/* THE SHOW — the home page's direction (founder-selected 2026-09-25, 9:25 PM,
   over Counter and Album), built to Rob's two approved mockups (desktop 1280,
   phone 390). Loaded AFTER vault.css, on the home page and the Media page
   (site/media/, which adds media.css), so every other page keeps the Vault
   exactly as it is.

   Colours are sampled from the mockup PNGs: page #0B0B0C, raised band #111112,
   rules #262626, gold #F2B64A, cream band #EFEBE3, navy card #2F4864 → #1C2C43.

   ⚠ The mockups' display face is not one this site has. The site self-hosts
   its fonts (founder ruling 2026-07-30), so headings use IBM Plex Sans 600 with
   tight tracking; adding a new face is a separate decision, not this page's. */

.show-page{
  --gold:#F2B64A;--gold-bright:#F6C56C;--gold-pale:#F8D493;--gold-dim:#8A6A2A;
  --sh-ink:#0B0B0C;--sh-raised:#111112;--sh-raised-2:#131314;--sh-rule:#262626;
  --sh-white:#F4F2EE;--sh-text:#D2CEC6;--sh-mute:#9C978E;
  --sh-cream:#EFEBE3;--sh-paper:#FFFFFF;--sh-bubble:#F3EFE6;
  background:var(--sh-ink);color:var(--sh-text);
}
html:has(.show-page){background:#0B0B0C}
/* ⛔ RETIRED BY NAV-SHELL-2 (2026-10-10): no page uses the rules in this block any more.
   Every page's header, menu and footer now come from assets/shell.css, rendered
   by scripts/site-shell.mjs, and scripts/test-site-shell.mjs fails a page that
   uses these old classes. Kept, not deleted, for the rulings recorded in the
   comments here; delete together once nothing needs the history. */
.show-page .nav{background:var(--sh-ink)}
.show-page .nav-links a{font-size:14.5px;color:var(--sh-text)}
.show-page .nav-links a.subtle{color:var(--sh-white);font-weight:600}
.show-page .btn-solid{background:var(--gold);color:#111;border-radius:4px}
.show-page .btn-solid:hover{background:var(--gold-bright);color:#111}
.sh-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- hero ---------- */
.sh-hero{position:relative;overflow-x:clip;padding-top:clamp(10px,4vw,56px);padding-bottom:clamp(36px,4vw,48px)}
.sh-hero-grid{display:grid;gap:30px;align-items:center}
/* Phone: the card leads, straight under the nav. Desktop: words left, card right. */
.sh-hero-grid > .sh-cycle{order:-1}
@media (min-width:900px){
  .sh-hero-grid{grid-template-columns:1.12fr .88fr;gap:clamp(32px,4.4vw,56px)}
  .sh-hero-grid > .sh-cycle{order:0}
}
.sh-h1{
  font-family:var(--sans);font-weight:600;color:var(--sh-white);
  font-size:clamp(34px,4.7vw,60px);line-height:1.05;letter-spacing:-.035em;max-width:10em;
}
.sh-hero .sh-body{margin-top:26px;max-width:30em;font-size:clamp(16px,1.35vw,17px);line-height:1.7;color:var(--sh-text)}
.sh-cta{margin-top:34px;display:flex;align-items:center;gap:18px 20px;flex-wrap:wrap}
.sh-cta .btn-solid{padding:15px 26px;font-size:15px}
.sh-cta-note{font-family:var(--mono);font-size:14.5px;line-height:1.4;color:var(--gold);max-width:18em}
@media (max-width:899px){
  .sh-cta{flex-direction:column;align-items:stretch;gap:18px}
  .sh-cta .btn-solid{width:100%}
  .sh-cta-note{text-align:center;max-width:none;font-size:13px}
}

/* the card — a tilted frame, a navy panel, a cream label; four moments */
.sh-cycle{position:relative;display:flex;flex-direction:column;align-items:center;margin:0}
.sh-cycle::before{
  content:"";position:absolute;left:50%;top:48%;width:135%;height:115%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(242,182,74,.30),rgba(242,182,74,.10) 55%,transparent 80%);
  pointer-events:none;
}
.sh-card{
  position:relative;width:clamp(210px,70vw,436px);aspect-ratio:436/584;
  transform:rotate(-3.5deg);border-radius:12px;padding:3.4%;
  background:#171613;border:1px solid #3A3120;box-shadow:0 30px 60px rgba(0,0,0,.55);
}
@media (min-width:900px){ .sh-card{width:min(436px,100%)} }
.sh-navy{position:relative;width:100%;height:100%;border-radius:4px;overflow:hidden;
  background:linear-gradient(170deg,#2F4864 0%,#233752 55%,#1C2C43 100%)}
.sh-face{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.sh-face.on{opacity:1;visibility:visible;transition:opacity .45s ease}
.sh-tag{position:absolute;top:4%;right:4.5%;font-family:var(--mono);font-weight:500;font-size:clamp(9px,1vw,11px);letter-spacing:.1em;
  color:var(--gold);border:1px solid var(--gold);border-radius:3px;padding:2px 6px;text-transform:uppercase}
.sh-label{position:absolute;left:3%;right:3%;bottom:3.5%;background:#F2F0EC;border-radius:2px;padding:4% 4.5% 3.2%;color:#111;transform:rotate(-2deg)}
.sh-label b{display:block;font-weight:600;font-size:clamp(13px,1.3vw,16px);letter-spacing:-.01em;line-height:1.2}
.sh-label span{display:block;font-family:var(--mono);font-size:clamp(10px,.95vw,11.5px);color:#3A3833;margin-top:2px}
/* the moments' own drawings, quiet on the navy */
.sh-lines{position:absolute;left:9%;right:9%;top:16%;display:flex;flex-direction:column;gap:clamp(9px,1.4vw,16px)}
.sh-lines i{display:flex;align-items:center;gap:10px;height:clamp(10px,1.2vw,14px)}
.sh-lines i::before{content:"";flex:0 0 auto;width:clamp(10px,1.2vw,14px);height:100%;border:1.5px solid rgba(244,242,238,.7);border-radius:2px}
.sh-lines i.got::before{background:rgba(244,242,238,.85)}
.sh-lines i::after{content:"";flex:1;height:2px;background:rgba(244,242,238,.22);border-radius:2px}
.sh-finder{position:absolute;left:22%;right:22%;top:14%;aspect-ratio:5/7}
.sh-finder::before{content:"";position:absolute;inset:0;border-radius:3px;background:rgba(244,242,238,.08);border:1px solid rgba(244,242,238,.35)}
.sh-finder b{position:absolute;width:18%;aspect-ratio:1;border:2px solid var(--gold)}
.sh-finder b:nth-child(1){left:-9%;top:-7%;border-right:0;border-bottom:0}
.sh-finder b:nth-child(2){right:-9%;top:-7%;border-left:0;border-bottom:0}
.sh-finder b:nth-child(3){left:-9%;bottom:-7%;border-right:0;border-top:0}
.sh-finder b:nth-child(4){right:-9%;bottom:-7%;border-left:0;border-top:0}
.sh-room{position:absolute;left:12%;right:12%;top:18%;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.4vw,16px)}
.sh-room span{aspect-ratio:1;border-radius:50%;border:1px solid rgba(244,242,238,.4);background:rgba(244,242,238,.08);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:clamp(10px,1vw,12px);color:rgba(244,242,238,.8)}

.sh-controls{display:flex;align-items:center;gap:4px;margin-top:18px;position:relative}
.sh-controls[hidden]{display:none}
@media (min-width:900px){ .sh-controls{position:absolute;right:-12px;bottom:-34px;margin:0} }
.sh-mark{width:36px;height:20px;display:flex;align-items:center;justify-content:center}
.sh-mark::before{content:"";width:28px;height:2px;background:#3A3732;transition:background .2s ease}
.sh-mark[aria-current="true"]::before{background:var(--gold)}
.sh-mark:hover::before{background:var(--gold-dim)}
.sh-mark[aria-current="true"]:hover::before{background:var(--gold-bright)}
.sh-pause{margin-left:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6F6B62;padding:3px 4px}
.sh-pause:hover{color:var(--sh-white)}

/* ---------- the loop ---------- */
.sh-loop-band{border-top:1px solid var(--sh-rule)}
.sh-loop-head{display:flex;justify-content:space-between;align-items:center;gap:10px 24px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.sh-loop-head p{font-weight:600;font-size:clamp(14.5px,1.25vw,16px);color:var(--sh-text)}
.sh-loop{display:grid;grid-template-columns:1fr;border-top:1px solid var(--sh-rule);max-width:1280px;margin:0 auto}
@media (min-width:900px){ .sh-loop{grid-template-columns:1fr 1fr} }
.sh-step{padding:clamp(34px,4.4vw,56px) var(--pad-x);border-bottom:1px solid var(--sh-rule)}
@media (min-width:900px){
  .sh-step:nth-child(odd){border-right:1px solid var(--sh-rule)}
  .sh-step{padding-left:56px;padding-right:56px}
  .sh-step:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:899px){ .sh-step:last-child{border-bottom:0} }
.sh-step .n{font-family:var(--mono);font-size:12px;color:var(--gold)}
.sh-step h3{font-family:var(--sans);font-weight:600;color:var(--sh-white);font-size:clamp(34px,3.9vw,50px);letter-spacing:-.035em;line-height:1.05;margin-top:clamp(12px,1.6vw,20px)}
.sh-step h4{font-weight:600;color:var(--sh-white);font-size:clamp(16.5px,1.5vw,19px);letter-spacing:-.01em;margin-top:clamp(10px,1.2vw,16px)}
.sh-step p{margin-top:12px;font-size:15.5px;line-height:1.7;color:#B9B4AB;max-width:28em}
.sh-step p.lexi{margin-top:22px;padding-top:22px;border-top:1px solid var(--sh-rule);font-size:14px;color:var(--sh-text);max-width:none;font-weight:500}
.sh-step .lexi b{color:var(--gold);font-weight:600}

/* ---------- the loop's expansions ----------
   Rob, 2026-09-28: "each Capture, Chase, Show, Connect piece can have an
   expandable +, and each expansion shows a couple of small images."
   A native <details> is the whole disclosure with none of the JavaScript —
   the same device the nav menu already uses, so it is keyboard-operable and
   a screen reader announces expanded/collapsed without a single aria- attribute.
   The marker is replaced by a drawn + that becomes a – when open. */
.sh-more{margin-top:20px;padding-top:18px;border-top:1px solid var(--sh-rule)}
.sh-more > summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  font-weight:600;font-size:14.5px;color:var(--sh-white)}
.sh-more > summary::-webkit-details-marker{display:none}
.sh-more > summary::before{content:"+";flex:0 0 26px;height:26px;border:1px solid var(--sh-rule);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:15px;line-height:1;color:var(--gold);
  transition:border-color .18s ease,color .18s ease}
.sh-more[open] > summary::before{content:"\2013"}
.sh-more > summary:hover{color:var(--gold-bright)}
.sh-more > summary:hover::before{border-color:var(--gold-dim);color:var(--gold-bright)}
.sh-more > summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:3px}
.sh-shots{display:flex;gap:14px;margin-top:16px;max-width:320px}
/* "a couple of SMALL images" — his words. The pair is capped rather than
   filling the column, so the cards read as a glance and the copy stays the
   section's centre of gravity. */
.sh-shot{flex:1 1 0;min-width:0;margin:0}
/* ⛔ WHATEVER GOES IN A SLOT IS FITTED, NEVER CROPPED. No fixed ratio is
   imposed on an app screen and no cover fit is allowed anywhere: a screen that
   is trimmed to a shape loses exactly the edges worth showing, which is how a
   count line ends up sliced by the frame. Every view is cropped once, at the
   source, with a margin on each side, and the frame is then told to take the
   whole of it. */
.sh-shot img{display:block;max-width:100%;height:auto;object-fit:contain;border-radius:2px}
/* ⭐ THE DEVICE FRAME. Rob asked for a designed frame rather than a bare
   screenshot, so an app view sits in one: a black screen, a hairline bezel and
   a radius that reads as hardware on the phone shots and as a panel on the wide
   ones. The Safari chrome and the QTest intake banner are cropped out of the
   source before it ever reaches here — the frame is the site's, the pixels
   inside it are the app's, and neither pretends to be the other. */
/* A Home capture is the original image as it is, with a thin black border
   and nothing else: no bezel, padding, panel or rounding (these captures
   have square corners of their own). */
.sh-device{border:0;border-radius:0;background:none;padding:0}
.sh-device img{display:block;box-sizing:border-box;width:100%;height:auto;border:1px solid #000;border-radius:0}
/* A whole iPhone capture inside the iPhone 16 frame: the same component and
   geometry as .frame.shot.full.phone in launch.css (frame PNG 1359x2736,
   screen opening x90..1268 y90..2645 r~185). The capture fills the opening
   edge to edge, cover-fit from the top; see launch.css for the rule. */
.sh-device.phone{position:relative;aspect-ratio:1359/2736;overflow:visible;isolation:isolate}
.sh-device.phone img{position:absolute;left:6.55%;top:3.22%;width:86.9%;height:93.56%;max-width:none;margin:0;border:0;border-radius:15.726% / 7.238%;object-fit:cover;object-position:50% 0;z-index:1}
.sh-device.phone::after{content:"";position:absolute;inset:0;background:url(/assets/device/iphone-16-black-portrait.png) 0 0/100% 100% no-repeat;z-index:2;pointer-events:none}
/* a single wide view gets more room than a pair of phones */
.sh-shots.is-wide{max-width:460px}

/* The labelled pending slot is GONE, with its markup: all four sections show a
   real app screen now. It is not kept warm in the stylesheet — dead rules are
   how a stand-in quietly comes back. */
.sh-shot figcaption{margin-top:8px;font-family:var(--mono);font-size:11.5px;line-height:1.45;color:var(--sh-mute)}
/* whose numbers a screen is showing, where the screen shows numbers */
.sh-own{display:block;margin-top:3px;color:#6F6B62}
/* ---------- meet lexi (cream) ---------- */
.sh-lexi-band{background:var(--sh-cream);color:#121212}
.sh-lexi{display:grid;gap:clamp(28px,4vw,72px);align-items:center;padding-top:clamp(44px,5vw,60px);padding-bottom:clamp(44px,5vw,56px)}
@media (min-width:900px){ .sh-lexi{grid-template-columns:1fr 1.08fr} }
.sh-lexi > div,.sh-pricing > div,.sh-hero-grid > *{min-width:0}
.sh-lexi .sh-eyebrow{color:#8A6A2A}
.sh-lexi h2{font-family:var(--sans);font-weight:600;color:#121212;font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.03em;margin-top:14px;max-width:13em}
.sh-lexi .lede{margin-top:18px;font-size:16px;line-height:1.7;color:#3A3833;max-width:28em}
.sh-chat{background:var(--sh-paper);border:1px solid #DCD6CA;border-radius:14px;box-shadow:0 24px 50px rgba(60,45,20,.10);overflow:hidden;color:#121212}
.sh-chat-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #E6E1D6}
.sh-avatar{flex:0 0 38px;height:38px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;color:#111}
.sh-who{display:flex;flex-direction:column;margin-right:auto;line-height:1.25}
.sh-who b{font-weight:600;font-size:17px}
.sh-who span{font-size:12px;color:#6B665C}
.sh-pill{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6B665C;border:1px solid #CFC9BC;border-radius:999px;padding:3px 9px}
.sh-examples{padding:18px}
.sh-msgs{display:flex;flex-direction:column;gap:12px}
.sh-msg{font-size:14.5px;line-height:1.5}
.sh-msg.you{align-self:flex-end;max-width:88%;background:#0B0B0C;color:#F4F2EE;padding:10px 14px;border-radius:12px 12px 2px 12px;font-weight:500}
.sh-msg.her{align-self:flex-start;max-width:94%;background:var(--sh-bubble);padding:14px 16px 12px;border-radius:12px}
.sh-rows{list-style:none;margin:10px 0 8px}
.sh-rows li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid #E1DBCE;font-family:var(--mono);font-size:13.5px}
.sh-rows li span{color:#9A7322;white-space:nowrap}
.sh-rows li.more{color:#6B665C}
.sh-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 16px}
.sh-chips[hidden]{display:none}
.sh-ex{font-size:12.5px;font-weight:600;color:#121212;background:var(--sh-bubble);border:1px solid #DDD6C8;border-radius:999px;padding:6px 12px}
.sh-ex[aria-pressed="true"]{background:#121212;color:#F4F2EE;border-color:#121212}
.sh-ex:focus-visible{outline-color:#8A6A2A}
.sh-compose{display:flex;gap:8px;padding:12px 18px 16px;border-top:1px solid #E6E1D6}
.sh-compose input{flex:1;min-width:0;border:1px solid #CFC9BC;border-radius:5px;padding:12px 14px;font:inherit;font-size:14.5px;background:#fff;color:#6B665C}
.sh-compose button{background:#121212;color:#F4F2EE;border-radius:5px;padding:0 18px;font-weight:600;font-size:14.5px;opacity:.45;cursor:not-allowed}
.sh-chat-note{margin-top:12px;font-size:12.5px;color:#5C574E}
/* With JS the two examples share one cell, so switching never moves the page.
   Without it both conversations are listed, one after the other. */
.sh-example + .sh-example{margin-top:18px;padding-top:18px;border-top:1px solid #E6E1D6}
.rotating .sh-examples{display:grid}
.rotating .sh-example{grid-area:1/1;margin:0;padding:0;border:0;transition:opacity .4s ease}
.rotating .sh-example:not(.on){visibility:hidden;opacity:0}

/* ---------- and it goes deeper ---------- */
.sh-deeper-band{background:var(--sh-raised)}
.sh-deeper{display:grid;gap:18px;padding-top:clamp(36px,4vw,50px);padding-bottom:clamp(36px,4vw,44px)}
@media (min-width:900px){ .sh-deeper{grid-template-columns:278px 1fr} }
.sh-deeper h2{font-family:var(--sans);font-weight:600;color:var(--sh-white);font-size:clamp(20px,1.9vw,24px);letter-spacing:-.02em}
.sh-deeper dl{border-bottom:1px solid var(--sh-rule)}
.sh-row{display:grid;grid-template-columns:1fr;gap:2px;padding:10px 0;border-top:1px solid var(--sh-rule)}
.sh-row:first-child{border-top:0}
@media (min-width:700px){ .sh-row{grid-template-columns:180px 1fr;gap:0} }
.sh-row dt{font-weight:600;color:var(--sh-white);font-size:14.5px}
.sh-row dd{color:var(--sh-text);font-size:14.5px;line-height:1.55}
@media (max-width:699px){
  .sh-row{display:block}
  .sh-row dt{display:inline}
  .sh-row dt::after{content:"\00A0\00B7\00A0";color:var(--sh-mute);font-weight:400}
  .sh-row dd{display:inline}
}

/* ---------- pricing ---------- */
.sh-pricing-band{border-top:1px solid var(--sh-rule)}
.sh-pricing{display:grid;gap:34px;padding-top:clamp(40px,5vw,66px);padding-bottom:clamp(40px,5vw,62px)}
@media (min-width:900px){ .sh-pricing{grid-template-columns:1fr 1.13fr;gap:56px} }
.sh-pricing h2{font-family:var(--sans);font-weight:600;color:var(--sh-white);font-size:clamp(28px,2.9vw,36px);line-height:1.15;letter-spacing:-.03em;margin-top:12px}
.sh-pricing .copy{margin-top:14px;font-size:16.5px;line-height:1.65;color:var(--sh-text);max-width:24em}
.sh-arrow{display:inline-block;margin-top:24px;font-weight:600;font-size:15px;color:var(--gold)}
.sh-arrow:hover{color:var(--gold-bright);text-decoration:none}
/* Phone: the mockup reads heading, copy, table, Curator seat, then the link. */
@media (max-width:899px){
  .sh-pricing{display:flex;flex-direction:column;gap:0}
  .sh-pricing > div:first-child{display:contents}
  .sh-pricing > div:last-child{order:1;margin-top:26px}
  .sh-pricing .sh-arrow{order:2}
}
/* Solo teaser (2026-09-26): with the documents table gone, the one block splits
   itself across the two columns — heading left, prices and the link right — so
   the band stays balanced at desktop. Phone keeps the stacked rules above. */
@media (min-width:900px){
  .sh-pricing-solo{grid-template-columns:1fr}
  .sh-pricing-solo > div{display:grid;grid-template-columns:1fr 1.13fr;column-gap:56px;align-items:end}
  .sh-pricing-solo .sh-eyebrow{grid-column:1;grid-row:1}
  .sh-pricing-solo h2{grid-column:1;grid-row:2}
  .sh-pricing-solo .copy{grid-column:2;grid-row:2;margin-top:0;font-size:18px}
  .sh-pricing-solo .sh-arrow{grid-column:2;grid-row:3;justify-self:start}
}
.sh-docs{width:100%;border-collapse:collapse}
.sh-docs th,.sh-docs td{text-align:right;padding:18px 0 18px 10px;border-bottom:1px solid var(--sh-rule)}
.sh-docs thead th{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sh-mute);padding-top:0;padding-bottom:10px}
.sh-docs thead th:first-child,.sh-docs tbody th{text-align:left;padding-left:0}
.sh-docs tbody th{font-weight:600;color:var(--sh-white);font-size:clamp(15px,1.4vw,18px)}
.sh-docs td{font-family:var(--mono);font-size:clamp(14px,1.3vw,16.5px);color:var(--sh-text)}
.sh-docs .lit{color:var(--gold)}
.sh-seat{margin-top:22px;border:1px solid #3A3120;background:#15130E;border-radius:4px;padding:18px 20px;color:var(--sh-white);font-size:15px;font-weight:500}
.sh-seat b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--gold);margin-right:6px}

/* ---------- invitation + dealers ---------- */
.sh-split{display:grid;grid-template-columns:1fr;border-top:1px solid var(--sh-rule)}
@media (min-width:900px){ .sh-split{grid-template-columns:1fr 1fr} }
.sh-split > div{padding:clamp(36px,5vw,66px) var(--pad-x)}
@media (min-width:900px){
  .sh-split > div:first-child{padding-left:max(56px,calc((100vw - 1280px)/2 + 56px))}
  .sh-split > div + div{background:var(--sh-raised-2);border-left:1px solid var(--sh-rule);padding-left:56px}
}
@media (max-width:899px){ .sh-split > div + div{border-top:1px solid var(--sh-rule)} }
.sh-split h2{font-family:var(--sans);font-weight:600;color:var(--sh-white);font-size:clamp(26px,2.9vw,36px);letter-spacing:-.03em;line-height:1.15}
.sh-split h2.small{font-size:clamp(22px,2.3vw,28px);margin-top:14px;max-width:16em}
.sh-split p a{color:var(--sh-white);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#5A574F}
.sh-split p{margin-top:12px;font-size:15.5px;line-height:1.7;color:var(--sh-text);max-width:28em}
.sh-join{margin-top:26px;display:flex;max-width:502px}
.sh-join input{flex:1;min-width:0;background:#161617;border:1px solid #3F3F3F;border-right:0;border-radius:4px 0 0 4px;color:var(--sh-white);
  font-family:var(--mono);font-size:14px;padding:15px 18px}
.sh-join button{background:#F2F0EC;color:#111;font-weight:600;font-size:14.5px;padding:0 22px;border:1px solid #F2F0EC;border-radius:0 4px 4px 0;white-space:nowrap}
.sh-join button:hover{background:#FFFFFF}
@media (max-width:899px){
  .sh-join{flex-direction:column;gap:10px}
  .sh-join input{border-right:1px solid #3F3F3F;border-radius:4px}
  .sh-join button{border-radius:4px;padding:15px 22px}
}

@media (prefers-reduced-motion:reduce){
  .sh-face,.sh-face.on,.rotating .sh-example{transition:none}
  .sh-mark::before{transition:none}
}

/* ---------- the live Lexi chat (/assets/lexi-chat.js; OFF until its meta is on) ----------
   Live, the scripted examples and their chips step aside and a real transcript
   takes their place. Inputs are 16px so a phone does not zoom on focus. */
.sh-chat.live .sh-examples,.sh-chat.live > .sh-chips{display:none}
.sh-live-log{padding:18px;max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain}
.sh-live-log .sh-msg.her{display:flex;flex-direction:column;gap:6px}
.sh-msg.her.notice{background:transparent;border:1px solid #DCD6CA;color:#3A3833}
.sh-src{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#6B5320;text-decoration:underline;text-underline-offset:2px}
.sh-suggest{padding:0}
.sh-live-compose{display:flex;gap:8px;flex:1;min-width:0}
.sh-chat.live .sh-compose{flex-direction:column;align-items:stretch}
.sh-live-compose input{flex:1;min-width:0;border:1px solid #BDB6A8;border-radius:5px;padding:12px 14px;font:inherit;font-size:16px;background:#fff;color:#121212}
.sh-live-compose input:disabled{background:#F6F4EF;color:#6B665C}
.sh-live-compose button,.sh-gate-go{background:#121212;color:#F4F2EE;border-radius:5px;padding:0 18px;min-height:44px;font-weight:600;font-size:15px;cursor:pointer}
.sh-live-compose button:disabled,.sh-gate-go:disabled{opacity:.45;cursor:not-allowed}
.sh-turnstile:empty{display:none}
.sh-turnstile{margin-top:10px}
.sh-gate{gap:10px !important;width:100%;max-width:100% !important}
.sh-gate-line{font-weight:600}
.sh-gate input[type=email],.sh-gate input[type=tel],.sh-gate input[type=text]{border:1px solid #BDB6A8;border-radius:5px;padding:11px 12px;font:inherit;font-size:16px;background:#fff;color:#121212;width:100%}
.sh-seg{display:flex;gap:8px}
.sh-age{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.sh-radio{display:flex;align-items:center;gap:8px;font-size:14.5px;min-height:32px;cursor:pointer}
.sh-radio input{width:18px;height:18px;accent-color:#121212;margin:0}
.sh-consent{font-size:12.5px;line-height:1.5;color:#4A463F}
.sh-gate-err{font-size:13px;color:#8A2A1C}
.sh-gate-err:empty{display:none}
.sh-gate-go{align-self:flex-start}
.sh-gate-again{align-self:flex-start;font-size:13px;color:#4A463F;text-decoration:underline;text-underline-offset:2px;background:none;padding:4px 0}
.sh-chat-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* The scripted composer's button is styled disabled; the live one is not. */
.sh-chat.live .sh-compose button{opacity:1;cursor:pointer}
.sh-chat.live .sh-compose button:disabled{opacity:.45;cursor:not-allowed}
.sh-scope-link{background:none;border:none;padding:0;font:inherit;color:#6B5320;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sh-scope-link:disabled{opacity:.5;cursor:not-allowed}
.sh-scope-row{display:block;margin-top:4px;font-size:13.5px}