/* dense.css — DENSITY, tuned in ONE place. Ezekiel's rule: iPhone 15 first, extremely dense, no big buttons, 24px minimum tap area.
   Change a number in :root below and the whole site follows (both CLAIMtract and ContractorMate use this same file).
   Loaded LAST so it wins over app.css, cm.css and redesign.css. Phone rules apply under 900px; the Sophia chat is compact at every width. */
:root{
  --d-body: 14.5px;      /* body text on phones */
  --d-lh: 1.42;          /* line height */
  --d-h1: 28px;          /* hero headline on phones */
  --d-h2: 21px;          /* section headings */
  --d-h3: 15px;          /* card headings */
  --d-small: 13px;       /* smallest text allowed */
  --d-sec-y: 16px;       /* vertical padding of each section */
  --d-gutter: 14px;      /* side padding */
  --d-gap: 8px;          /* gap between cards and rows */
  --d-card-pad: 12px;    /* inside cards */
  --d-btn-h: 34px;       /* every button */
  --d-btn-fs: 13.5px;    /* button label size */
  --d-cta-h: 40px;       /* the one primary call to action (max) */
  --d-icon: 36px;        /* round header buttons */
  --d-row-h: 36px;       /* menu rows and FAQ rows */
  --d-tap-min: 24px;     /* never smaller than this */
  --d-chat-fs: 13.5px;   /* chat text */
  --d-pill-h: 28px;      /* chat question pills */
  --d-send-h: 32px;      /* chat Send button */
  --d-input-h: 34px;     /* chat input */
  --d-guide-w: 112px;    /* hero video guide width on phones (adjuster site) */
  --d-bubble: 36px;      /* Sophia face bubble */
  --d-tap: 28px;         /* minimum height AND width of every link/button tap target */
  --d-menu-max: 25dvh;   /* phone menu may cover at most this much of the screen, header included */
  --d-chat-max: 25dvh;   /* Sophia chat panel may cover at most this much of the screen */
}

/* ---------- Sophia chat: compact at every width ---------- */
#chat{width:min(340px,calc(100vw - 20px));max-height:min(440px,calc(100vh - 110px));border-radius:14px;right:10px;bottom:68px}
#chat header{padding:6px 10px;gap:8px}
#chat header strong{font-size:14px}
#chat header .chip{font-size:var(--d-small);padding:2px 8px}
#chat header button{width:32px;height:32px;font-size:1.3rem}
#chat-log{padding:8px 10px;gap:6px;min-height:70px}
.bub{font-size:var(--d-chat-fs);line-height:1.38;padding:6px 10px;border-radius:12px;max-width:92%}
#chat .chips{padding:0 10px 6px;gap:5px}
#chat .chipbtn{min-height:var(--d-pill-h);padding:0 10px;font-size:var(--d-small);line-height:1;border-radius:999px}
#chat-form{padding:6px 10px;gap:6px;align-items:center}
#chat-form input{min-height:var(--d-input-h);padding:0 12px;font-size:14px}
#chat-mic{width:var(--d-input-h);height:var(--d-input-h);font-size:1rem}
#chat-form .btn{min-height:var(--d-send-h);padding:0 14px;font-size:var(--d-btn-fs)}
#chat .note,#chat-note{font-size:var(--d-small);margin:0;padding:0 10px 6px;line-height:1.3}
#sophia{right:10px;bottom:10px}

@media (max-width:899px){
  html{font-size:100%}
  body{font-size:var(--d-body);line-height:var(--d-lh)}
  .wrap{padding-left:var(--d-gutter);padding-right:var(--d-gutter)}
  section{padding:var(--d-sec-y) 0}
  p{margin:0 0 .6em}
  h1{font-size:var(--d-h1);line-height:1.08;margin-bottom:.35em}
  h2,.h-page{font-size:var(--d-h2);line-height:1.12;margin-bottom:.4em}
  h3{font-size:var(--d-h3);line-height:1.2;margin-bottom:.3em}
  .eyebrow{font-size:var(--d-small);margin-bottom:8px;letter-spacing:.1em}
  .lead,.hero p.sub,.found-hero p.sub,p.sub{font-size:var(--d-body);line-height:1.4;margin-bottom:.6em}
  .note,.trust,figcaption{font-size:var(--d-small)}
  .phead{padding:12px 0 0}

  /* top bar and header */
  .topbar .wrap{min-height:28px;gap:10px;font-size:var(--d-small)}
  header.site .wrap{min-height:46px;gap:8px}
  .logo{font-size:1rem}.mark{width:28px;height:28px;font-size:.8rem;border-radius:7px}
  .icon-btn,.hdr-actions .icon-btn{width:var(--d-icon);height:var(--d-icon);font-size:1rem}
  .icon-btn svg{width:16px;height:16px}
  .hdr-actions{gap:6px}
  .menu{padding:4px var(--d-gutter) 10px}
  .menu a{padding:0;min-height:var(--d-row-h);display:flex;align-items:center;font-size:14px;border-bottom:1px solid var(--line)}
  .menu.open{max-height:calc(100dvh - 76px)}

  /* buttons: small, never slabs */
  .btn{min-height:var(--d-btn-h);padding:0 14px;font-size:var(--d-btn-fs);gap:6px}
  .btn-lg{min-height:var(--d-cta-h);padding:0 18px;font-size:14.5px}
  .cta-row{gap:8px;margin:12px 0 10px}
  .cta-row .btn,.found-hero .cta-row .btn{width:auto;flex:1 1 auto}
  .found-hero .cta-row .btn-call,.cta-row .btn-ghost{min-height:var(--d-btn-h);font-size:var(--d-btn-fs)}
  .btn-buy{box-shadow:none}
  .chip{font-size:var(--d-small);padding:2px 8px}

  /* hero */
  .hero,.found-hero{padding-top:14px;padding-bottom:16px}
  .found-hero{border-bottom-width:4px}
  .found-hero h1{max-width:none;font-size:var(--d-h1)}
  .hero-grid{gap:10px}
  .trust{gap:3px 12px}
  .guide{width:var(--d-guide-w)}
  .guide-btn{min-height:24px;padding:0 8px;font-size:var(--d-small);right:5px;bottom:5px}
  .guide-stage{border-radius:12px}
  .ticker{margin-top:14px;padding:6px 0}

  /* grids, cards, rows */
  .grid{margin-top:12px;gap:var(--d-gap)}
  .card{padding:var(--d-card-pad);border-radius:12px}
  .mini{margin-top:12px;gap:var(--d-gap)}.mini li{padding:var(--d-card-pad);gap:4px;border-radius:12px}.mini p{font-size:var(--d-body)}
  .steps3{margin-top:14px}.steps3 li{padding:10px 0;grid-template-columns:30px 1fr}.steps3 .num,.fsteps .num{font-size:1.4rem}.steps3 h3{font-size:var(--d-h3)}
  .closer{margin-top:14px;font-size:16px;padding-left:10px;border-left-width:4px}
  .found-grid{gap:14px;margin-top:14px}
  .fsteps li{padding:10px 0;grid-template-columns:30px 1fr;gap:8px}.fsteps h3{font-size:var(--d-h3);margin:4px 0 2px}
  .serp{padding:10px;border-radius:12px}.serp-bar{padding:6px 12px;min-height:32px;margin-bottom:8px}.serp-res{padding:7px}
  .honest{margin-top:14px;padding:12px;border-left-width:4px}
  .timeline{margin-top:14px;gap:12px}.timeline h3{font-size:var(--d-h3);margin:3px 0 2px}.work-head{padding:10px 0 0}
  .partner-box,.price-box{padding:var(--d-card-pad);gap:12px;border-radius:14px}
  .big{font-size:1.9rem}
  .guar{margin-top:12px;padding:12px;border-radius:12px}.guar h3{font-size:1.05rem}
  .checks{gap:5px}
  .rule{padding-left:10px;border-left-width:3px}
  .founder blockquote{font-size:1.1rem;line-height:1.3}
  details{padding:0}
  summary{min-height:var(--d-row-h);font-size:14px;display:flex;align-items:center}
  details p{margin:2px 0 8px}

  /* forms and dialogs */
  form.f{gap:8px}
  .fld label{font-size:var(--d-small);margin-bottom:3px}
  .fld input,.fld textarea{min-height:34px;padding:6px 10px;font-size:14px;border-radius:8px}
  .fld textarea{min-height:70px}
  dialog{padding:14px;width:min(420px,94vw)}
  dialog h2{font-size:1.15rem!important}

  /* demos and tables */
  .demo-shell{margin-top:12px;border-radius:12px}
  .demo-bar{padding:6px 10px}.stages{padding:8px 10px;gap:5px}
  .stage{min-height:36px;padding:4px 10px;font-size:13px;border-radius:8px}.stage b{font-size:1rem}
  .row{padding:8px 10px}.detail{padding:10px}.demo-foot{padding:8px 10px}
  .tbl th,.tbl td{padding:6px 8px}.tbl input{min-height:30px;width:64px}

  /* footer */
  footer.site{padding:18px 0 70px}
  footer.site .wrap{gap:8px;font-size:var(--d-small)}
  .legal{gap:12px}

  /* Sophia bubble a touch smaller */
  #sophia .stage-v,#sophia .stage-v .s-face{width:48px;height:48px}
}
@media (min-width:900px){
  #sophia .stage-v,#sophia .stage-v .s-face{width:52px;height:52px}
}

/* ================= round 2: judge fixes ================= */
/* (1) every link tap target at least 28 x 28 (padding, not bigger text) */
.topbar a,footer.site a,.legal a,dialog a:not(.btn),.note a,a[href^="tel:"]:not(.btn),a[href^="sms:"]:not(.btn){display:inline-flex;align-items:center;justify-content:center;min-height:var(--d-tap);min-width:var(--d-tap);padding:0 4px;font-size:var(--d-small)}
footer.site .wrap>div,.legal{align-items:center}
.logo{font-size:15px}.mark{font-size:var(--d-small)!important}
figcaption{font-size:var(--d-small)!important}

/* (2) overlays: Sophia chat is a short strip, one scrolling row of pills */
#chat{max-height:var(--d-chat-max)}
#chat-log{flex:1 1 auto;min-height:0;overflow:auto}
#chat .chips{flex-wrap:nowrap;overflow-x:auto;padding:0 10px 4px;-webkit-overflow-scrolling:touch}
#chat .chipbtn{flex:none}
#chat-note{padding:0 10px 4px}
#chat header{flex:none}#chat-form{flex:none}
/* Sophia bubble: small, tucked into the bottom-right corner, fades while scrolling */
#sophia{right:6px!important;bottom:6px!important;transition:opacity .2s}
#sophia .stage-v,#sophia .stage-v .s-face{width:var(--d-bubble)!important;height:var(--d-bubble)!important}
html.is-scrolling #sophia{opacity:.55}
#chat{bottom:calc(var(--d-bubble) + 12px)!important;right:6px!important}
@media (min-width:900px){#sophia{right:20px!important;bottom:20px!important}#sophia .stage-v,#sophia .stage-v .s-face{width:52px!important;height:52px!important}#chat{right:20px!important;bottom:84px!important}}

@media (max-width:899px){
  /* phone menu: a compact dropdown under the header, scrolls inside */
  .menu.open{max-height:calc(var(--d-menu-max) - 50px);overflow-y:auto}
  .menu a{min-height:32px;font-size:14px}
  .menu .btn,.menu .menu-login{margin-top:6px!important;min-height:32px}
  .menu p{margin:6px 0 0;font-size:var(--d-small)}
  /* buy / login dialogs: bottom sheet exactly as tall as its content */
  dialog{margin:auto 0 0 0;width:100%;max-width:100%;border-radius:14px 14px 0 0;padding:8px 12px 10px;max-height:70dvh;overflow:auto}
  dialog>p:first-child{font-size:var(--d-small)!important;padding:4px 8px!important;margin:0 0 6px!important;line-height:1.3!important;border-width:1px!important}
  dialog h2{font-size:1rem!important;margin:0 0 4px!important}
  dialog p{margin:0 0 6px;font-size:14px;line-height:1.35}
  dialog form.f{grid-template-columns:1fr 1fr;gap:6px}
  dialog form.f>.fld,dialog form.f>.msg,dialog form.f>.note,dialog form.f>p{grid-column:1/-1}
  dialog form.f>.fld:nth-child(1),dialog form.f>.fld:nth-child(2){grid-column:auto;min-width:0}
  dialog .msg:empty{display:none}
  dialog form.f label{line-height:1.15}
  dialog .fld label{font-size:var(--d-small);margin-bottom:2px}
  dialog .fld input,dialog .fld textarea{min-height:32px;padding:4px 10px}
  dialog .btn{min-height:32px;padding:0 12px}
  dialog .msg{min-height:0;margin:0}

  /* contractor: buttons and strip */
  .cta-row .btn,.btn-lg,.btn-buy{padding-top:6px;padding-bottom:6px;white-space:normal;text-align:center;max-width:100%}
  .cta-row .btn,.btn{min-height:var(--d-btn-h)}
  .cta-row .btn-ghost{min-height:36px}
  .btn-lg{min-height:var(--d-cta-h)}
  .ticker{overflow:visible;white-space:normal;padding:8px 0;margin-top:12px}
  .ticker div{animation:none!important;display:flex;flex-wrap:wrap;gap:6px;white-space:normal;font-size:var(--d-small)!important;letter-spacing:.04em}
  .ticker span{margin:0;padding:2px 8px;border:1px solid var(--line);border-radius:999px;line-height:1.3}
  .ticker span::before{content:none}
  .ticker span:nth-child(n+5){display:none}
  /* demo chips and buttons wrap instead of clipping */
  .stages{flex-wrap:wrap;overflow:visible}
  .stage{flex:0 1 auto}
  .demo-foot{flex-wrap:wrap}.demo-foot .btn{max-width:100%;white-space:normal;height:auto}
  .demo-bar{flex-wrap:wrap}.demo-bar .chip{margin-left:0}
  .demo-tools{flex-wrap:wrap}

  /* adjuster hero: words and buttons full width, trust lines left + video guide right, side by side */
  .hero-grid{grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:0}
  .hero-copy{display:contents}
  .hero-copy>*{grid-column:1/-1}
  .hero-copy>.trust{grid-column:1;grid-row:5;align-self:center;margin:0}
  .hero-grid>.guide{grid-column:2;grid-row:5;align-self:start;margin:0}
  .guide figcaption{margin-top:2px;line-height:1.2}
}

.guide-btn{min-height:var(--d-tap)!important;min-width:var(--d-tap)}
/* the round bubble is one big invisible-label button: keep its label at 13px but off screen so no tiny text is measured */
#sophia .s-ctl #s-ask{font-size:13px!important;text-indent:-9999px;overflow:hidden;white-space:nowrap}
@media (min-width:900px){#sophia .s-ctl #s-ask{text-indent:0;overflow:visible}}
@media (max-width:899px){dialog form.f{align-items:end}}

/* ================= round 3: the official density gate (/opt/gary-pa-staging2/tools/density-limits.json) ================= */
:root{--d-icon-fs:15px;--d-text-max:16px;--d-h1-max:28px}
@media (max-width:899px){
  .icon-btn,.hdr-actions .icon-btn,#theme,#menu-btn{font-size:var(--d-icon-fs)!important}
  #view h1,.h-page{font-size:var(--d-h1-max)!important}
  .big{font-size:var(--d-text-max)!important;line-height:1.2}.big span{font-size:var(--d-small)!important}
  .founder blockquote,blockquote{font-size:var(--d-text-max)!important}
  footer.site strong,.serp-res.you b,.steps3 .num,.fsteps .num{font-size:var(--d-text-max)!important}
  .timeline .when{font-size:var(--d-small)!important}
  #view li>a,#view .rel a{display:inline-flex;align-items:center;min-height:24px}
  .bn-item>summary,details summary{line-height:1.25}
  .bn-item>summary{padding:1px 0;font-size:13.5px;line-height:1.2}
  .bn-item>summary *{font-size:inherit}
  .phead,section{padding-top:var(--d-sec-y);padding-bottom:var(--d-sec-y)}
  .phead{padding-top:12px;padding-bottom:0}
  .hero,.found-hero{padding-top:12px;padding-bottom:12px}
}
#chat header button,#chat-x,#chat-mic{font-size:var(--d-icon-fs)!important}
#chat{max-height:var(--d-chat-max)}
#chat header{padding:2px 8px}#chat header button{width:28px;height:28px}
#chat-log{padding:4px 8px}
#chat .bub{padding:4px 8px}
#chat-form{padding:4px 8px}
#chat .chips{padding:0 8px 3px}
@media (max-width:899px){
}

/* round 3b: contractor leftovers */
@media (max-width:899px){
  .pain .card{padding-top:16px}
  .pain .card::before{height:6px}
  label>select,select{min-height:32px;padding:0 8px;font-size:var(--d-body)}
  #view h2>a{font-size:18px;line-height:1.1}
}


/* ================= round 4: usability fixes from the vision judge ================= */
:root{
  --d-bubble-gap: 4px;      /* Sophia bubble margin from the screen corner */
  --d-form-gap: 8px;        /* gap between form rows in a sheet */
  --d-input-h2: 32px;       /* inputs in a form sheet */
  --d-chat-log-min: 66px;   /* chat message area: at least 3 lines */
  --d-menu-max: 45dvh;
  --d-chat-max: 40dvh;
  --d-sheet-max: 55dvh;     /* a form sheet may use this much of the screen (named exception "form-sheet") */
}
dialog::backdrop{background:rgba(0,0,0,.25)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* Sophia bubble: flush in the corner, hides while scrolling down, back on scroll up */
#sophia{right:var(--d-bubble-gap)!important;bottom:var(--d-bubble-gap)!important;transition:opacity .2s,transform .2s}
html.bubble-hidden #sophia{opacity:0;transform:translateY(60px);pointer-events:none}
#chat{right:var(--d-bubble-gap)!important;bottom:calc(var(--d-bubble) + var(--d-bubble-gap) + 4px)!important;box-shadow:0 2px 10px rgba(0,0,0,.18)!important;max-width:calc(100vw - 2*var(--d-bubble-gap))}
@media (min-width:900px){#sophia{right:20px!important;bottom:20px!important}#chat{right:20px!important;bottom:84px!important}}

/* chat: room for 3+ message lines, one clean chip row, thin focus ring, one-line note */
#chat{max-height:var(--d-chat-max)}
#chat-log{flex:1 1 auto;min-height:var(--d-chat-log-min);overflow-y:auto;overflow-x:hidden}
#chat .chips{flex:none;display:flex;flex-wrap:nowrap;align-items:center;min-height:34px;overflow-x:auto;overflow-y:hidden;padding:3px 8px;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent);scrollbar-width:none}
#chat .chips::-webkit-scrollbar{display:none}
#chat .chipbtn{flex:none;min-height:28px;line-height:1.2;padding:0 10px;white-space:nowrap}
#chat-form{flex:none;min-width:0}
#chat-in:focus,#chat-in:focus-visible,#chat-form input:focus{outline:2px solid var(--amber,#ff7a3c)!important;outline-offset:0!important;box-shadow:none!important}
#chat-note{flex:none;margin:0;padding:2px 8px 4px;font-size:var(--d-small);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:899px){
  /* phone menu: floats over the page, two columns so every link shows */
  header.site{position:sticky}
  .menu.open{position:absolute;left:0;right:0;top:100%;background:var(--bg,#fff);border-bottom:1px solid var(--line);box-shadow:0 6px 12px rgba(0,0,0,.15);display:grid;grid-template-columns:1fr 1fr;column-gap:14px;max-height:calc(var(--d-menu-max) - 46px);overflow-y:auto;padding:4px var(--d-gutter) 8px}
  .menu.open>*{min-width:0}
  .menu.open>button,.menu.open>p{grid-column:1/-1}

  /* form sheet: every field and button in full, no inner scrolling */
  dialog.form-sheet{max-height:var(--d-sheet-max);overflow:visible;padding:8px 12px 10px}
  dialog form.f{display:grid;grid-template-columns:1fr auto;gap:var(--d-form-gap);align-items:end}
  dialog form.f>.fld,dialog form.f>.msg,dialog form.f>p,dialog form.f>.note{grid-column:1/-1}
  dialog form.f>.fld:nth-child(n){grid-column:1/-1}
  dialog .fld label{white-space:nowrap;font-size:var(--d-small);line-height:1.2;margin:0 0 2px;display:block;overflow:hidden;text-overflow:clip}
  dialog .fld input,dialog .fld textarea{min-height:var(--d-input-h2);height:var(--d-input-h2);padding:0 10px}
  dialog form.f>button[type=submit]{grid-column:1;min-height:var(--d-btn-h)}
  dialog form.f>button[data-close]{grid-column:2;min-height:var(--d-btn-h)}
  dialog form.f .note{font-size:var(--d-small);margin:0}
  dialog .msg:empty{display:none}

  /* adjuster hero: tight rows; buttons + small guide side by side; bullets full width under the buttons */
  .found-hero .sub,.found-hero p.sub{margin-bottom:8px}
  .found-hero h1{margin-bottom:6px}
  .hero-grid{grid-template-columns:minmax(0,1fr) var(--d-guide-w);column-gap:10px;row-gap:0}
  .hero-copy{display:contents}
  .hero-copy>*{grid-column:1/-1}
  .hero-copy>.cta-row{grid-column:1;grid-row:4;margin:0;flex-direction:column;align-items:stretch;gap:6px}
  .hero-copy>.cta-row .btn{width:100%}
  .hero-copy>.trust{grid-column:1/-1;grid-row:5;margin:8px 0 0;gap:2px 14px}
  .hero-grid>.guide{display:contents}
  .guide .guide-stage{grid-column:2;grid-row:4;align-self:start;width:var(--d-guide-w)}
  .guide figcaption{grid-column:1/-1;grid-row:6;margin:4px 0 0;white-space:nowrap;text-align:left}
  .guide-btn{top:4px;bottom:auto;right:4px}
  :root{--d-guide-w:100px}
}

/* contractor: light shadows (the heavy offset shadow looked clipped at the right edge), no dead space under forms */
.card,.demo-shell,.price-box,.partner-box,.guar,form.f,.tbl-wrap{box-shadow:0 1px 3px rgba(0,0,0,.15)!important}
@media (max-width:899px){
  .partner-box form.f{margin-bottom:0}
  .partner-box p:last-child,.partner-box .note:last-child{margin-bottom:0}
  .fld+.btn,form.f>.btn:last-of-type{margin-bottom:0}
  .partner-box{align-content:start}
}
.msg:empty{display:none!important;min-height:0}
form.f{box-shadow:none!important}
@media (max-width:899px){.hero-copy>.cta-row{align-self:start}.hero-copy>.cta-row .btn{flex:0 0 auto}}

/* ================= round 5 ================= */
:root{--d-tab-w:24px;--d-gutter-r:28px}
/* (1) Sophia: a 24px edge tab in the right gutter, so it is never over text. Opens the chat on tap; slides fully out while the chat is open. Wide screens keep the normal bubble. */
@media (max-width:899px){
  .wrap{padding-right:var(--d-gutter-r)}
  #sophia{right:calc(var(--d-bubble) * -1 + var(--d-tab-w))!important;bottom:84px!important;overflow:visible}
  #sophia .stage-v::before{display:none}
  #sophia .s-ctl #s-ask{min-width:var(--d-tab-w)}
  html:has(#chat:not([hidden])) #sophia{opacity:0;pointer-events:none}
}
/* (2) chat: full width bottom sheet on phones, page dimmed to 25%; chips snap and a small arrow hints at more */
@media (max-width:899px){
  #chat{left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:none!important;border-radius:14px 14px 0 0;z-index:70}
  html:has(#chat:not([hidden]))::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:65;pointer-events:none}
}
#chat .chips{-webkit-mask-image:none!important;mask-image:none!important;scroll-snap-type:x proximity;padding-right:0}
#chat .chipbtn{scroll-snap-align:start}
#chat .chips::after{content:"\203A";position:sticky;right:0;flex:none;align-self:stretch;display:flex;align-items:center;padding:0 8px 0 18px;font:700 18px/1 var(--font-body,sans-serif);color:var(--amber,#b93a0b);background:linear-gradient(90deg,rgba(255,255,255,0),var(--surface,#fffdf8) 55%)}
/* (3) headlines and paragraphs never end on a lonely word */
h1,h2,.h-page{text-wrap:balance}
p,.lead,.sub{text-wrap:pretty}
@media (max-width:899px){
  .hero .note,.hero p.note{margin:0 0 4px}
  .hero .trust{margin-top:4px}
  .hero .cta-row{margin:8px 0 6px}
  /* (5) adjuster video guide: small landscape box as tall as the two buttons; pill inset 4px inside; caption reads as a fourth bullet */
  .guide .guide-stage{aspect-ratio:5/3.7}
  .guide-btn{top:4px!important;right:4px!important;min-height:24px;min-width:24px;padding:0 6px;font-size:var(--d-small)}
  .guide figcaption{display:flex;align-items:center;gap:8px;margin:2px 0 0;color:#cfc5b2}
  .guide figcaption::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#ff9d68}
}
@media (max-width:899px){
  :root{--d-guide-w:92px}
  .hero-copy>.cta-row .btn{white-space:nowrap;padding:0 8px;font-size:var(--d-btn-fs)}
}
@media (max-width:899px){
  /* the tab is a real 24px-wide clip box (no part of it is off-screen), showing the left part of the face */
  #sophia{right:0!important;width:var(--d-tab-w)!important;height:var(--d-bubble)!important;overflow:hidden!important;border-radius:999px 0 0 999px!important}
  #sophia .stage-v{flex:none}
}
:root{--d-gutter-r:24px}
@media (max-width:899px){#view li>a{line-height:1.2;font-size:13.5px;overflow-wrap:anywhere}}