/* kiosk/app/css/booth.css — the booth-flow screens (issues #7–#9).
   Mobile/tablet-first (Tyler: desktop last): single-column, clamp() type,
   48px+ touch targets. Every color routes through tokens (app.css/skins.css),
   so the operator's skin choice restyles these screens wholesale. */

.screen.booth{flex-direction:column; padding:clamp(18px,4vw,56px) clamp(18px,5vw,72px);}
.screen.booth.center{align-items:center; justify-content:center; text-align:center;}

/* nav chrome (← / ⌂), shared across booth flows */
#booth-nav{position:fixed; top:calc(env(safe-area-inset-top, 0px) + 14px); right:14px;
  z-index:40; display:flex; gap:10px;}
#booth-nav[hidden]{display:none;}
.bn-btn{width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line-2);
  background:color-mix(in srgb, var(--panel) 85%, transparent); color:var(--muted);
  font-size:20px; font-family:var(--font-body); cursor:pointer;}
.bn-btn[hidden]{display:none;}

/* ---- attract ---- */
.ba-logo{font-family:var(--font-mono); font-size:clamp(11px,1.6vw,15px); font-weight:700;
  letter-spacing:.3em; color:var(--ink); margin-bottom:clamp(22px,5vh,46px);}
.ba-logo span{color:var(--accent);}
.ba-h1{font-family:var(--font-display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(34px,7.5vw,78px); line-height:1.05; max-width:980px; color:var(--ink);}
.ba-h1 em{font-style:normal; color:var(--accent);}
.ba-sub{margin:clamp(14px,3vh,26px) auto 0; font-size:clamp(15px,2.3vw,21px);
  color:var(--muted); line-height:1.5; max-width:640px;}
.ba-cta{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--accent); color:var(--accent-ink); border:none; cursor:pointer;
  font-family:var(--font-body); font-size:clamp(16px,2.2vw,19px); font-weight:700;
  padding:clamp(15px,2.4vh,20px) clamp(26px,5vw,40px); border-radius:999px;
  letter-spacing:-.01em; min-height:48px;
  box-shadow:0 8px 30px color-mix(in srgb, var(--accent) 35%, transparent);}
#s-attract .ba-cta{margin-top:clamp(24px,5vh,44px); animation:ba-pulse 2.4s infinite;}
@keyframes ba-pulse{
  0%,100%{box-shadow:0 8px 30px color-mix(in srgb, var(--accent) 35%, transparent);}
  50%{box-shadow:0 8px 46px color-mix(in srgb, var(--accent) 65%, transparent);}}
.ba-quiet{background:transparent; color:var(--muted); border:1px solid var(--line-2);
  border-radius:999px; padding:clamp(13px,2vh,18px) clamp(20px,4vw,32px);
  font-family:var(--font-body); font-size:clamp(14px,2vw,17px); font-weight:600;
  cursor:pointer; min-height:48px;}
.ba-nobadge{margin-top:22px; font-size:clamp(12px,1.8vw,13.5px); color:var(--muted);
  background:transparent; border:1px solid var(--line-2); border-radius:999px;
  padding:11px 22px; cursor:pointer; font-family:var(--font-body); min-height:44px;}

/* ---- dossier beats ---- */
/* padding only: .screen's absolute inset:0 both fills the viewport AND is the
   containing block for the absolute stage. Declaring position:relative here
   collapsed the screen to zero height (killed centering, the ninja, and taps). */
#s-beats{padding:0;}
.bt-prog{position:absolute; top:calc(env(safe-area-inset-top, 0px) + 10px); left:14px;
  right:74px; display:flex; gap:5px; z-index:5;}
.bt-prog i{flex:1; height:3.5px; border-radius:99px; overflow:hidden; position:relative;
  background:color-mix(in srgb, var(--ink) 14%, transparent);}
.bt-prog i b{position:absolute; inset:0; width:0%; background:var(--accent); border-radius:99px;}
.bt-stage{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:clamp(40px,8vw,90px);}
.bt-stage.in{animation:bt-in .4s cubic-bezier(.2,.8,.2,1);}
@keyframes bt-in{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.bt-eye{font-family:var(--font-mono); font-size:clamp(10px,1.6vw,12px); letter-spacing:.24em;
  color:var(--muted-2); font-weight:700; margin-bottom:clamp(14px,3vh,28px); text-transform:uppercase;}
.bt-name{font-family:var(--font-display); font-size:clamp(56px,14vw,110px); font-weight:800;
  letter-spacing:-.04em; line-height:1; color:var(--ink);}
.bt-sub{font-size:clamp(15px,2.6vw,22px); color:var(--muted); margin-top:clamp(10px,2vh,18px); font-weight:600;}
.bt-fact{font-family:var(--font-display); font-size:clamp(22px,4.6vw,40px); font-weight:800;
  line-height:1.28; letter-spacing:-.02em; max-width:950px; color:var(--ink);}
.bt-stamp{margin-top:clamp(18px,4vh,34px); font-family:var(--font-mono);
  font-size:clamp(11px,1.7vw,13px); font-weight:800; letter-spacing:.08em;
  color:var(--grain-company); border:2px solid color-mix(in srgb, var(--grain-company) 50%, transparent);
  border-radius:8px; padding:8px 16px; text-transform:lowercase;
  animation:bt-stamp .45s cubic-bezier(.2,1.4,.4,1) both; animation-delay:.55s;}
@keyframes bt-stamp{from{opacity:0; transform:rotate(-2deg) scale(1.9);}
  to{opacity:1; transform:rotate(-2deg) scale(1);}}
.bt-hint{position:absolute; bottom:calc(env(safe-area-inset-bottom, 0px) + 18px); left:0; right:0;
  text-align:center; font-family:var(--font-mono); font-size:clamp(9px,1.5vw,12px);
  color:var(--muted-2); letter-spacing:.1em; z-index:5;}

/* ---- the Bet ---- */
.bb-eye{font-family:var(--font-mono); font-size:clamp(10px,1.6vw,12px); font-weight:700;
  letter-spacing:.22em; color:var(--accent); text-transform:uppercase;
  margin-bottom:clamp(12px,2.4vh,18px);}
.bb-eye.dim{color:var(--muted-2);}
.bb-hl{font-family:var(--font-display); font-size:clamp(24px,5.6vw,46px); font-weight:800;
  letter-spacing:-.025em; line-height:1.12; max-width:960px; color:var(--ink);}
.bb-h2{font-family:var(--font-display); font-size:clamp(22px,4vw,34px); font-weight:800;
  letter-spacing:-.015em; line-height:1.15; color:var(--ink);}
.bb-q{font-size:clamp(14px,2.3vw,19px); color:var(--muted); font-style:italic;
  margin-top:clamp(14px,3vh,24px); max-width:820px; line-height:1.5;}
.bb-sub{font-size:clamp(14px,2.2vw,18px); color:var(--muted); line-height:1.5;
  margin-top:clamp(10px,2vh,16px); max-width:720px;}
.bb-row{display:flex; gap:14px; align-items:center; justify-content:center;
  margin-top:clamp(22px,5vh,40px); flex-wrap:wrap;}
.bb-alts{display:flex; flex-direction:column; gap:12px; margin-top:clamp(18px,4vh,30px);
  max-width:780px; width:100%;}
.bb-alt{background:var(--panel); border:1.5px solid var(--line); border-radius:14px;
  padding:clamp(16px,2.6vh,22px); cursor:pointer; text-align:left; color:var(--ink);
  display:flex; flex-direction:column; gap:9px; font-family:var(--font-body); min-height:48px;}
.bb-alt:active{border-color:var(--accent);}
.bb-grain{font-family:var(--font-mono); font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; padding:4px 9px; border-radius:6px; align-self:flex-start;}
.g-you{color:var(--grain-you); background:color-mix(in srgb, var(--grain-you) 13%, transparent);}
.g-role{color:var(--grain-role); background:color-mix(in srgb, var(--grain-role) 13%, transparent);}
.g-company{color:var(--grain-company); background:color-mix(in srgb, var(--grain-company) 13%, transparent);}
.g-industry{color:var(--grain-industry); background:color-mix(in srgb, var(--grain-industry) 13%, transparent);}
.bb-alt-hl{font-family:var(--font-display); font-size:clamp(15px,2.4vw,18.5px); font-weight:700;
  line-height:1.3; letter-spacing:-.01em;}

/* ---- live-write one-pager ---- */
#s-livewrite{align-items:center;}
.lw-head{font-family:var(--font-display); font-size:clamp(17px,2.6vw,22px); font-weight:800;
  color:var(--ink); text-align:center;}
.lw-wrap{flex:1; display:flex; flex-direction:column; min-height:0; width:100%;
  max-width:920px; margin-top:clamp(10px,2vh,18px);}
.lw-card{background:var(--doc-surface); color:var(--doc-ink); border-radius:14px; flex:1;
  min-height:0; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);}
.lw-for{padding:clamp(10px,1.8vh,13px) clamp(16px,3.4vw,30px); border-bottom:1px solid
  color-mix(in srgb, var(--doc-ink) 12%, var(--doc-surface));
  font-size:clamp(10px,1.6vw,12px); color:color-mix(in srgb, var(--doc-ink) 60%, var(--doc-surface));
  line-height:1.6; letter-spacing:.02em;}
.lw-for b{color:var(--doc-accent); font-size:10px; letter-spacing:.12em; margin-right:6px;}
.lw-scroll{overflow:hidden; flex:1;
  padding:calc(clamp(10px,2vh,15px) * var(--lw-scale)) clamp(16px,3.4vw,30px)
          calc(18px * var(--lw-scale));
  --lw-scale:1;}
.lw-body h4{font-family:var(--font-mono); font-size:calc(clamp(9px,1.5vw,10.5px) * var(--lw-scale)); letter-spacing:.15em;
  text-transform:uppercase; color:var(--doc-accent);
  margin:calc(clamp(9px,1.8vh,13px) * var(--lw-scale)) 0 calc(4px * var(--lw-scale));}
.lw-body h4:first-child{margin-top:0;}
.lw-body p{font-size:calc(clamp(12.5px,1.9vw,14px) * var(--lw-scale)); line-height:1.45; color:var(--doc-ink);
  margin:calc(3px * var(--lw-scale)) 0;}
.lw-body blockquote{margin:calc(5px * var(--lw-scale)) 0; padding:1px 0 1px 12px; border-left:3px solid var(--doc-accent);
  font-style:italic; color:color-mix(in srgb, var(--doc-ink) 70%, var(--doc-surface));
  font-size:calc(clamp(12px,1.8vw,13px) * var(--lw-scale)); line-height:1.45;}
.lw-li{display:flex; gap:9px; align-items:baseline; margin:calc(5px * var(--lw-scale)) 0;
  font-size:calc(clamp(12px,1.85vw,13.5px) * var(--lw-scale)); line-height:1.45; color:var(--doc-ink);}
.lw-tag{flex:none; font-family:var(--font-mono); font-size:9px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:var(--doc-accent);
  border:1px solid color-mix(in srgb, var(--doc-accent) 35%, var(--doc-surface));
  border-radius:99px; padding:2px 8px;
  background:color-mix(in srgb, var(--doc-accent) 8%, var(--doc-surface));}
.lw-cursor{display:inline-block; width:2.5px; height:1em; background:var(--doc-accent);
  margin-left:2px; vertical-align:text-bottom; animation:lw-blink .85s steps(1) infinite;}
@keyframes lw-blink{50%{opacity:0;}}
.lw-ctas{opacity:0; pointer-events:none; transition:opacity .4s;}
.lw-ctas.on{opacity:1; pointer-events:auto;}

/* ---- send / book / done ---- */
.bs-email{margin-top:clamp(20px,4vh,34px); width:100%; max-width:640px;
  background:var(--panel); border:1.5px solid var(--line-2); border-radius:14px;
  padding:clamp(16px,2.6vh,22px) clamp(18px,3.6vw,28px); color:var(--ink);
  font-family:var(--font-body); font-size:clamp(17px,2.8vw,23px); font-weight:600;
  letter-spacing:.01em; outline:none;}
.bs-email:focus{border-color:var(--accent);}
.bk-row{display:flex; gap:14px; margin-top:clamp(20px,4vh,34px); flex-wrap:wrap; justify-content:center;}
.bk-slot{background:var(--panel); border:1.5px solid var(--line-2); border-radius:14px;
  padding:clamp(16px,2.6vh,22px) clamp(18px,3.4vw,26px); cursor:pointer; min-width:180px;
  display:flex; flex-direction:column; gap:7px; text-align:left; color:var(--ink);
  font-family:var(--font-body); min-height:48px;}
.bk-slot.on{border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, var(--panel));}
.bk-d{font-family:var(--font-mono); font-size:clamp(11px,1.7vw,13px); color:var(--muted-2);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;}
.bk-w{font-family:var(--font-display); font-size:clamp(16px,2.6vw,20px); font-weight:800;}
.bd-check{width:clamp(84px,16vw,110px); height:clamp(84px,16vw,110px); border-radius:50%;
  background:color-mix(in srgb, var(--accent) 14%, transparent); border:2px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(36px,7vw,48px); color:var(--accent); margin-bottom:clamp(20px,4vh,36px);
  animation:bd-pop .5s cubic-bezier(.2,1.6,.4,1);}
@keyframes bd-pop{from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;}}

/* phones: stack CTA rows, full-width slots */
@media (max-width: 520px){
  .bb-row{flex-direction:column; width:100%;}
  .bb-row .ba-cta, .bb-row .ba-quiet{width:100%;}
  .bk-slot{min-width:100%;}
}

/* ---- cold paths (issue #8): sneak theater + pickers ---- */
#s-sneak{padding:0;}
.sk-beat{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:clamp(40px,8vw,90px);}
.sk-beat.in{animation:bt-in .4s cubic-bezier(.2,.8,.2,1);}
.sk-nothing{font-family:var(--font-display); font-size:clamp(48px,11vw,84px); font-weight:800;
  letter-spacing:-.04em; line-height:1; color:var(--ink);}
.sk-ninja{position:relative; flex:none; width:clamp(120px,26vw,170px); height:clamp(120px,26vw,170px);
  margin-bottom:clamp(20px,4vh,36px);}
.sk-face{position:absolute; inset:0; border-radius:50%;
  background:color-mix(in srgb, var(--ink) 14%, var(--bg));
  /* sk-out must be `forwards`, NOT `both`: a backwards fill during its 2.35s
     delay pinned opacity to the vanish state, so the ninja never appeared. */
  animation:sk-rise .55s cubic-bezier(.2,1.3,.4,1) both, sk-out .45s ease-in 2.35s forwards;}
.sk-band{position:absolute; top:33%; left:-4%; right:-4%; height:31%;
  background:color-mix(in srgb, var(--ink) 7%, var(--bg)); border-radius:14px;}
.sk-eye{position:absolute; top:41%; width:17%; height:9%; background:var(--ink);
  border-radius:50%; overflow:hidden;}
.sk-eye.l{left:21%;} .sk-eye.r{right:21%;}
.sk-eye i{position:absolute; top:20%; left:35%; width:28%; height:60%; background:var(--bg);
  border-radius:50%; animation:sk-dart 1.7s steps(1) .65s both;}
.sk-tail{position:absolute; right:-17%; width:28%; height:6%; background:var(--accent);
  border-radius:6px; transform-origin:left center; animation:sk-wave 1s ease-in-out infinite alternate;}
.sk-tail.t1{top:37%; transform:rotate(-16deg);}
.sk-tail.t2{top:48%; transform:rotate(9deg); animation-delay:.25s;}
.sk-poof i{position:absolute; border-radius:50%; background:var(--muted); filter:blur(14px);
  opacity:0; animation:sk-poof .9s ease-out both;}
.sk-poof .p1{left:5%; top:11%; width:44%; height:44%; animation-delay:2.35s;}
.sk-poof .p2{right:0; top:24%; width:36%; height:36%; animation-delay:2.42s;}
.sk-poof .p3{left:22%; bottom:0; width:39%; height:39%; animation-delay:2.5s;}
.sk-poof .p4{right:14%; bottom:6%; width:28%; height:28%; animation-delay:2.46s;}
.sk-late{animation:bt-in .5s .4s both;}
@keyframes sk-rise{from{transform:translateY(150px); opacity:0;} to{transform:none; opacity:1;}}
@keyframes sk-out{to{transform:scale(.15) translateY(14px); opacity:0;}}
@keyframes sk-dart{0%{transform:none;} 25%{transform:translateX(-160%);} 55%{transform:translateX(160%);} 85%{transform:none;}}
@keyframes sk-wave{from{transform:rotate(-16deg);} to{transform:rotate(-26deg);}}
@keyframes sk-poof{0%{opacity:0; transform:scale(.3);} 25%{opacity:.75;} 100%{opacity:0; transform:scale(1.8);}}
#s-honest{align-items:flex-start; justify-content:center;}
#s-honest .bh-sub b{color:var(--ink);}
#s-roles, #s-industry{justify-content:center;}
.pk-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap:12px; margin-top:clamp(18px,4vh,34px); max-width:900px; width:100%;}
.pk-card{background:var(--panel); border:1.5px solid var(--line-2); border-radius:14px;
  padding:clamp(18px,3vh,26px) clamp(16px,3vw,24px); cursor:pointer; text-align:left;
  color:var(--ink); display:flex; flex-direction:column; gap:7px;
  font-family:var(--font-body); min-height:48px;}
.pk-card:active{border-color:var(--accent);}
.pk-n{font-family:var(--font-display); font-size:clamp(16px,2.6vw,19px); font-weight:800;
  letter-spacing:-.01em;}
.pk-d{font-size:clamp(12px,1.9vw,13px); color:var(--muted); line-height:1.4;}
/* two-tier pickers (#27): 8 primary cards stay glanceable on a tablet, the tail
   (9 seats / 5 worlds) waits behind one tap. [hidden] has to beat display:grid. */
.pk-grid[hidden]{display:none;}
.pk-grid.pk-more{margin-top:12px;}
.pk-expand{margin-top:12px; max-width:900px; width:100%; cursor:pointer;
  background:transparent; border:1.5px dashed var(--line-2); border-radius:14px;
  padding:13px 20px; color:var(--muted); text-align:left; letter-spacing:.05em;
  font-family:var(--font-mono); font-size:clamp(11px,1.7vw,12.5px); font-weight:700;}
.pk-expand:active{border-color:var(--accent); color:var(--accent);}
.pk-expand[hidden]{display:none;}

/* ---- flow A: reveal + narrow + solutions + card (issue #9) ---- */
.rv-card{display:flex; align-items:center; gap:clamp(14px,3vw,26px); margin-top:clamp(18px,4vh,38px);
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:clamp(18px,3vh,30px) clamp(20px,4vw,36px); max-width:760px; width:100%;}
.rv-av{width:clamp(56px,10vw,88px); height:clamp(56px,10vw,88px); border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-size:clamp(20px,4vw,30px); font-weight:800; color:var(--accent-ink);
  background:color-mix(in srgb, var(--accent) 30%, var(--panel-2)); border:2px solid var(--line-2);}
.rv-nm{font-family:var(--font-display); font-size:clamp(20px,3.6vw,30px); font-weight:800;
  letter-spacing:-.015em; text-align:left;}
.rv-tt{font-size:clamp(13px,2.2vw,17px); color:var(--muted); margin-top:5px; text-align:left;}
.rv-chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:clamp(14px,3vh,26px); justify-content:flex-start;
  max-width:760px;}
.rv-chip{font-family:var(--font-mono); font-size:clamp(10.5px,1.7vw,12.5px); font-weight:600;
  color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:8px 15px;
  letter-spacing:.03em;}
.rv-chip b{color:var(--ink);}
.rv-chip.hot{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);}
.rv-chip.hot b{color:var(--accent);}
#s-reveal{align-items:flex-start; justify-content:center;}
#s-reveal .rv-row{justify-content:flex-start;}
#s-narrow{justify-content:center;}
.nw-legend{font-size:clamp(11px,1.8vw,12.5px); color:var(--muted-2); margin-top:10px; line-height:1.5;}
.nw-legend i{font-style:normal; font-weight:700;}
.nw-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap:12px; margin-top:clamp(14px,3vh,26px); max-height:52vh; overflow-y:auto; padding-right:4px;}
.nw-card{background:var(--panel); border:1.5px solid var(--line); border-radius:14px;
  padding:clamp(14px,2.4vh,20px); cursor:pointer; text-align:left; color:var(--ink);
  display:flex; flex-direction:column; gap:9px; font-family:var(--font-body); position:relative; min-height:48px;}
.nw-card.pin{border-color:var(--accent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--panel)),
    color-mix(in srgb, var(--accent) 3%, var(--panel)));}
.nw-card.thin{opacity:.62; cursor:default;}
.nw-hl{font-family:var(--font-display); font-size:clamp(14.5px,2.3vw,18.5px); font-weight:700;
  line-height:1.3; letter-spacing:-.01em; padding-right:30px;}
.nw-tick{position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--line-2); display:flex; align-items:center; justify-content:center;
  font-size:14px; color:transparent;}
.nw-card.pin .nw-tick{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.nw-foot{justify-content:flex-start;}
#s-solutions{justify-content:center;}
.sl-card{background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:clamp(20px,3.6vh,40px) clamp(20px,4.4vw,48px); margin-top:clamp(12px,2.4vh,22px);
  display:flex; flex-direction:column; gap:12px; max-width:920px; width:100%; max-height:62vh; overflow-y:auto;}
.sl-phl{font-size:clamp(13px,2.1vw,15px); color:var(--muted); font-weight:600;}
.sl-hook{font-family:var(--font-display); font-size:clamp(19px,3.4vw,28px); font-weight:800;
  line-height:1.22; letter-spacing:-.018em;}
.sl-bens{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.sl-row{display:flex; gap:12px; align-items:baseline; font-size:clamp(13px,2vw,15.5px);
  line-height:1.45; text-align:left; color:color-mix(in srgb, var(--ink) 85%, var(--muted));}
.sl-tag{flex:none; font-family:var(--font-mono); font-size:10px; font-weight:800; letter-spacing:.06em;
  padding:4px 11px; border-radius:999px; min-width:86px; text-align:center; white-space:nowrap;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);}
.sl-tag.proof{color:var(--grain-role); background:color-mix(in srgb, var(--grain-role) 12%, transparent);}
.sl-needle{padding:12px 18px; border-left:3px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, transparent); border-radius:0 12px 12px 0;
  font-size:clamp(13.5px,2.1vw,16px); font-weight:700; line-height:1.4; text-align:left;}
.sl-needle b{color:var(--accent); letter-spacing:.1em; font-size:10.5px; display:block;
  margin-bottom:5px; font-family:var(--font-mono);}
.sl-why{padding-top:12px; border-top:1px solid var(--line); font-size:clamp(11.5px,1.8vw,13px);
  color:var(--muted-2); line-height:1.5; text-align:left;}
.sl-why b{color:var(--muted); font-weight:700;}
.sl-dots{display:flex; gap:8px; justify-content:center; margin-top:14px;}
.sl-dots i{width:8px; height:8px; border-radius:50%; background:var(--line-2);}
.sl-dots i.on{background:var(--accent);}
#s-card{justify-content:center;}
.cd-card{margin-top:clamp(14px,3vh,30px); background:linear-gradient(165deg, var(--panel-2), var(--panel));
  border:1px solid var(--line-2); border-radius:18px; padding:clamp(20px,3.4vh,34px) clamp(20px,4.4vw,40px);
  max-width:860px; width:100%; position:relative; overflow:hidden;}
.cd-card:before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), transparent);}
.cd-nm{font-family:var(--font-display); font-size:clamp(19px,3.2vw,26px); font-weight:800; text-align:left;}
.cd-tt{font-size:clamp(12px,1.9vw,14px); color:var(--muted); margin-top:3px; text-align:left;}
.cd-rows{margin-top:14px;}
.cd-row{display:flex; align-items:baseline; gap:14px; padding:13px 0; border-top:1px solid var(--line);
  text-align:left;}
.cd-n{font-family:var(--font-mono); font-size:13px; font-weight:800; color:var(--accent); flex:none;}
.cd-t{display:block; font-family:var(--font-display); font-size:clamp(14px,2.2vw,16.5px);
  font-weight:700; line-height:1.35;}
.cd-h{display:block; font-size:clamp(11.5px,1.9vw,13.5px); color:var(--muted); margin-top:4px; line-height:1.45;}
.cd-who{font-size:clamp(11px,1.8vw,13px); color:var(--muted-2); margin-top:14px; text-align:left;}
.cd-who b{color:var(--muted);}

/* ---- flow B: reel ---- */
#s-reel{padding:0;}
.rl-quote{font-family:var(--font-display); font-size:clamp(24px,5.4vw,44px); font-weight:800;
  line-height:1.22; letter-spacing:-.02em; max-width:940px;}
.rl-quote:before{content:"\201C"; color:var(--accent);}
.rl-quote:after{content:"\201D"; color:var(--accent);}
.rl-attr{font-size:clamp(12px,2vw,16px); color:var(--muted-2); margin-top:clamp(14px,3vh,26px);
  letter-spacing:.04em;}
.rl-hook{font-family:var(--font-display); font-size:clamp(23px,5.2vw,42px); font-weight:800;
  line-height:1.2; letter-spacing:-.02em; max-width:920px;}
.rl-prods{margin-top:clamp(16px,3.4vh,30px); display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.rl-prod{font-family:var(--font-mono); font-size:clamp(10px,1.7vw,11.5px); font-weight:700;
  padding:5px 12px; border-radius:999px; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);}

/* ---- flow C: receipts ---- */
#s-receiptsb{justify-content:center;}
.rc-list{display:flex; flex-direction:column; gap:14px; margin-top:clamp(16px,3.4vh,30px);
  max-width:880px; width:100%;}
.rc-card{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:clamp(16px,2.8vh,24px) clamp(18px,3.4vw,28px); display:flex; gap:16px;
  align-items:flex-start; text-align:left; opacity:0; transform:translateY(16px);
  animation:rc-in .5s cubic-bezier(.2,.8,.2,1) both;}
@keyframes rc-in{to{opacity:1; transform:none;}}
.rc-qm{font-family:var(--font-display); font-size:clamp(24px,4.6vw,34px); color:var(--accent);
  font-weight:800; line-height:1; flex:none;}
.rc-f{display:block; font-family:var(--font-display); font-size:clamp(14.5px,2.4vw,19px);
  font-weight:600; line-height:1.4; letter-spacing:-.005em;}
.rc-s{display:inline-block; font-family:var(--font-mono); font-size:clamp(10px,1.7vw,11.5px);
  color:var(--grain-company); font-weight:700; letter-spacing:.05em; margin-top:10px;
  text-transform:lowercase; border:1px solid color-mix(in srgb, var(--grain-company) 35%, transparent);
  border-radius:999px; padding:4px 11px;}
.rc-verdict{opacity:0; animation:rc-in .5s cubic-bezier(.2,.8,.2,1) both; flex-wrap:wrap;}
.rc-ask{font-family:var(--font-display); font-size:clamp(15px,2.4vw,17px); font-weight:700;
  align-self:center; margin-right:8px;}


/* ═══════════════════════════════════════════════════════════════
   TEMPLATE ADDITIONS — receipts (relevant points + source chips),
   best-guesses legend, product lockups, dark one-pager. Everything
   routes through the skin tokens.
   ═══════════════════════════════════════════════════════════════ */

/* ---- receipts: the homework ---- */
.br-list{display:flex; flex-direction:column; gap:clamp(10px,1.8vh,16px);
  margin-top:clamp(18px,3.6vh,30px); max-width:840px; width:100%; text-align:left;}
.br-item{display:flex; gap:clamp(14px,2.6vw,22px); align-items:flex-start;
  background:var(--panel); border:1.5px solid var(--line); border-radius:16px;
  padding:clamp(14px,2.4vh,22px) clamp(16px,3vw,26px);}
.br-item.you{--src:var(--grain-you);} .br-item.role{--src:var(--grain-role);}
.br-item.company{--src:var(--grain-company);} .br-item.industry{--src:var(--grain-industry);}
.br-n{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,5.4vw,46px);
  line-height:.85; color:var(--muted-2); flex:none;}
.br-body{display:flex; flex-direction:column; min-width:0;}
.br-find{font-family:var(--font-display); font-weight:700; letter-spacing:-.012em;
  font-size:clamp(16px,2.7vw,22px); line-height:1.3; color:var(--ink);}
.br-chip{align-self:flex-start; display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:clamp(9.5px,1.5vw,11.5px); letter-spacing:.05em;
  color:var(--src,var(--accent));
  background:color-mix(in srgb,var(--src,var(--accent)) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--src,var(--accent)) 35%,transparent);
  border-radius:999px; padding:5px 12px; margin-top:10px;}

/* ---- best guesses: honesty legend ---- */
.bb-legend{font-size:clamp(12.5px,1.9vw,15px); color:var(--muted);
  margin-top:clamp(10px,1.8vh,16px); max-width:760px; line-height:1.55;}
.bb-legend i{font-style:normal; font-weight:700;}
.bb-legend .ly{color:var(--grain-you);} .bb-legend .lr{color:var(--grain-role);}
.bb-legend .lc{color:var(--grain-company);} .bb-legend .li{color:var(--grain-industry);}

/* ---- product lockup — compact pill: match-width wordmark on the
   left, description left-justified beside it ---- */
.plock{display:flex; align-items:center; gap:10px;
  padding:7px 12px; border-radius:999px;
  background:color-mix(in srgb,var(--h,var(--accent)) 8%,var(--panel));
  border:1px solid color-mix(in srgb,var(--h,var(--accent)) 34%,transparent);
  box-shadow:0 14px 40px -22px var(--h,var(--accent));}
.plock .pmark{width:62px; flex:none; display:flex; align-items:center; justify-content:center;}
.plock .pmark img{width:100%; height:auto; max-height:18px; object-fit:contain; display:block;}
.plock .ptag{font-family:var(--font-mono); font-size:clamp(7.5px,1.15vw,9px); font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--h,var(--accent));
  text-align:left; flex:1; line-height:1.5;}

/* ---- one-pager: dark balance, personalized-full components ---- */
#s-livewrite{height:100vh; max-height:100vh;}
.od-wrap{width:100%; max-width:1000px; margin:clamp(10px,2vh,18px) auto 0; text-align:left;
  flex:1; min-height:0; overflow-y:auto; padding-bottom:8px;}
.od-meta{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:clamp(12px,2.2vh,20px);}
.od-pill{font-family:var(--font-mono); font-size:clamp(7.5px,1.15vw,9px); color:var(--muted);
  letter-spacing:.04em; border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 70%,transparent); border-radius:999px;
  padding:5px 11px; line-height:1.5;}
.od-pill b{color:var(--accent); letter-spacing:.12em; font-size:7px; margin-right:5px;}

/* ---- Ninja Concepts logo — every screen, top center; rides the
   content (scrolls away on scrollable views) ---- */
.nc-logo{display:block;}
.nc-logo.big{width:clamp(200px,32vw,300px); margin:0 auto clamp(22px,5vh,46px);}
.nc-logo.top{position:absolute; top:calc(env(safe-area-inset-top,0px) + 42px);
  left:50%; transform:translateX(-50%); width:clamp(96px,14vw,128px); z-index:6;}
.nc-logo.bot{position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  left:50%; transform:translateX(-50%); width:clamp(96px,14vw,128px); z-index:6;}
#s-betalts .bt-hint{bottom:calc(env(safe-area-inset-bottom,0px) + 58px);}
.nc-logo.end{width:clamp(96px,14vw,128px); margin:clamp(10px,1.8vh,16px) auto 0; flex:none;}

/* ---- done screen: squared-off check ---- */
.bd-check{border-radius:24px;}
.bd-check svg{width:44%; height:44%; fill:none; stroke:var(--accent);
  stroke-width:3.4; stroke-linecap:square; stroke-linejoin:miter;}
.od-hero{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(14px,2.4vw,26px);
  align-items:start; margin-bottom:clamp(12px,2.2vh,20px);}
.od-kick{font-family:var(--font-mono); font-size:clamp(9px,1.4vw,11px); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 8px;}
.od-hl{font-family:var(--font-display); font-weight:800; font-size:clamp(20px,3.4vw,32px);
  line-height:1.12; letter-spacing:-.022em; color:var(--ink);}
.od-q{margin:10px 0 14px; padding:2px 0 2px 12px; border-left:3px solid var(--accent);
  font-style:italic; color:var(--muted); font-size:clamp(12px,1.8vw,14px); line-height:1.5;}
.od-sub{font-size:clamp(13px,1.9vw,15.5px); line-height:1.55; margin:0;
  color:color-mix(in srgb,var(--ink) 82%,var(--muted));}
.od-plan{display:flex; flex-direction:column; gap:10px;}
.od-ba{flex:none;}
.od-ba .side h3{font-size:clamp(14px,2vw,18px);}
#s-livewrite .dsec{margin-top:clamp(14px,2.2vh,24px);}
/* steps: purple number chips; a thin product-colored bar on the left edge */
#s-livewrite .stepc{border-left:3px solid var(--h,var(--accent));}
#s-livewrite .stepn{background:var(--accent); color:var(--accent-ink);}
.slogo{width:80px; display:flex; align-items:center; justify-content:flex-start; margin-bottom:7px;}
.slogo img{width:100%; height:auto; max-height:18px; object-fit:contain; object-position:left center; display:block;}
.slogo.txt{font-family:var(--font-mono); font-weight:800; font-size:10px;
  letter-spacing:.16em; color:var(--accent);}
@media (max-width:640px){
  .od-hero{grid-template-columns:1fr;}
  .od-ba{grid-template-columns:1fr;}
  #s-livewrite .steps{grid-template-columns:1fr;}
  #s-livewrite .boxes{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════════
   TABLET PASS 1 (#58) — hint placement + one-pager reading window
   ═══════════════════════════════════════════════════════════════ */

/* ---- best guesses: the hint belongs beside the cards, not under them ----
   `.bt-hint` is a full-width bar pinned to the bottom, which works on the
   story screens (nothing else is down there) but collides on 4b: four cards
   plus the bottom-centre logo leave nothing for it to sit in. On a tablet
   there is real estate to the RIGHT of the 780px card column, so the
   instruction moves there and reads as an instruction instead of an overlay.
   The card column is capped to guarantee that space exists rather than
   hoping the viewport is wide enough. */
@media (min-width: 900px) {
  #s-betalts .bb-alts { max-width: min(780px, calc(100% - 280px)); }
  #s-betalts .bt-hint {
    top: 50%; bottom: auto; left: auto;
    right: clamp(18px, 4vw, 56px);
    width: min(220px, 24vw);
    transform: translateY(-50%);
    text-align: left;
    line-height: 1.7;
    z-index: 5;
  }
  /* the bottom-centre logo no longer has to dodge the hint */
  #s-betalts .nc-logo.bot { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
}

/* ---- one-pager: give the reading window every pixel it can have ----
   Chrome was eating height three ways: a centred eyebrow+heading block, the
   CTAs floating mid-column, and the logo trailing BELOW them. Now the logo
   and heading share one compact top-left row, the CTAs sit bottom-right, and
   everything between belongs to `od-wrap`. */
.od-head {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 22px);
  flex: none; text-align: left; width: 100%;
}
.od-head-txt { min-width: 0; }
.nc-logo.tl { width: clamp(84px, 9vw, 116px); flex: none; }
#s-livewrite { align-items: stretch; }
#s-livewrite .bb-eye { margin-bottom: 2px; }
#s-livewrite .lw-head { text-align: left; margin: 0; }
#s-livewrite .od-wrap { margin-top: clamp(8px, 1.4vh, 14px); }
/* bottom-right, in flow — no absolute positioning, so it can never overlap
   the content the way the old centred block did */
#s-livewrite .lw-ctas {
  justify-content: flex-end;
  margin-top: clamp(8px, 1.4vh, 14px);
  flex: none;
}