/* ═══════════════════════════════════════════════════════════════
   SELF-HOSTED FONTS — vendored from @fontsource; no network requests.
   ═══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/fonts/bricolage-grotesque-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/vendor/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/vendor/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/vendor/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/vendor/fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

/* ═══════════════════════════════════════════════════════════════
   BRAND TOKENS — the only block that changes when the kit lands.
   Product hues drive the ambient field behind each pain point.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#080b11; --bg-2:#0c111a; --panel:#10161f; --panel-2:#131b26;
  --line:#1d2734; --line-2:#26323f;
  --ink:#e9eef6; --muted:#8593a6; --muted-2:#5c6b7e;

  --sol-surface:#f4f7f4; --sol-surface-2:#e8ede9;
  --sol-ink:#0e1512; --sol-muted:#5d6b64; --sol-line:#d3dbd5;

  --accent:#2ee6c8; --accent-dim:#19897a; --accent-ink:#06120f;
  --blue:#4d9fff; --blue-ink:#2b6fc2;
  --alert:#ff4d6d; --alert-dim:#a8324a;

  /* type tokens — skins swap the family stacks, @font-face names stay literal */
  --font-display:"Bricolage Grotesque",sans-serif;
  --font-body:"Hanken Grotesk",sans-serif;
  --font-mono:"JetBrains Mono",monospace;

  /* per-product ambient hues — classic values equal the pack's products.hue;
     skins (css/skins.css) override these and theme.mjs reads them back into JS */
  --hue-sigma:#2ee6c8; --hue-notes:#4d9fff; --hue-omni:#a77bff; --hue-sona:#ffb454;

  /* booth-flow tokens (grain honesty labels + the one-pager doc card) — inert for
     the classic experience; POC values as the neutral default, skins override */
  --grain-you:#E5484D; --grain-role:#E5A93D; --grain-company:#4DA3E5; --grain-industry:#3EC1AC;
  --doc-surface:#F7F5EF; --doc-ink:#17171A; --doc-accent:#B8342F;

  --r-bento:22px;
  --glow1:rgba(46,230,200,.10); --glow2:rgba(247,179,43,.06);
  font-synthesis:none;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden;}
body{
  background:
    radial-gradient(1200px 700px at 82% -8%, var(--glow1), transparent 60%),
    radial-gradient(900px 600px at 8% 4%, var(--glow2), transparent 55%), var(--bg);
  color:var(--ink); font-family:var(--font-body);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:3; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ═══════════════════════════════════════════════════════════════
   AMBIENT FIELD — a slow-drifting light field behind the pain
   point, tinted to whichever product answers it. Pure CSS, so it
   ships offline with zero assets and re-skins from one hex.
   ═══════════════════════════════════════════════════════════════ */
#ambient{position:fixed; inset:0; z-index:0; opacity:0; pointer-events:none;
  transition:opacity .9s ease;}
#ambient.on{opacity:1;}
#ambient .orb{position:absolute; border-radius:50%; filter:blur(85px); opacity:.5;
  background:radial-gradient(circle at 50% 50%, var(--h), transparent 68%);
  transition:background .9s ease;}
#ambient .o1{width:56vw; height:56vw; top:-16vw; right:-10vw; animation:drift1 26s ease-in-out infinite;}
#ambient .o2{width:44vw; height:44vw; bottom:-18vw; left:-8vw; opacity:.34;
  animation:drift2 32s ease-in-out infinite;}
#ambient .o3{width:30vw; height:30vw; top:38%; left:42%; opacity:.2;
  animation:drift3 22s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-5vw,4vh) scale(1.12);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(6vw,-5vh) scale(1.16);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-7vw,-6vh) scale(.86);}}
/* grid mesh — reads as infrastructure, not decoration */
#ambient .mesh{position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(var(--h) 1px, transparent 1px),
                   linear-gradient(90deg, var(--h) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 10%, transparent 72%);
  transition:background-image .9s ease;}

#stage{position:fixed; inset:0; z-index:1;}
.screen{position:absolute; inset:0; display:none; flex-direction:column; justify-content:center;
  padding:clamp(24px,3.2vw,48px) clamp(20px,4vw,58px);}
.screen.active{display:flex; animation:sin .42s cubic-bezier(.2,.7,.2,1);}
@keyframes sin{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.si{max-width:1320px; width:100%; margin:0 auto; min-height:0; display:flex; flex-direction:column;}
.screen.center{align-items:center; text-align:center;}
.screen.center .si{max-width:1080px; align-items:stretch;}

#progress{position:fixed; top:0; left:0; height:4px; width:0; z-index:50;
  background:linear-gradient(90deg,var(--accent),var(--accent-dim));
  box-shadow:0 0 12px var(--accent); transition:width .55s cubic-bezier(.2,.7,.2,1);}

/* ── type ──────────────────────────────────────────────────────── */
.kick{font-family:var(--font-mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:12px; margin-bottom:12px; flex:none;}
.kick::before{content:""; width:28px; height:1px; background:var(--accent); flex:none;}
.screen.center .kick{justify-content:center;}
h1{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4.2vw,56px);
  line-height:1; letter-spacing:-.028em; margin-bottom:14px; flex:none;}
.grad{background:linear-gradient(115deg,var(--accent),#7af0dd 52%,var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.lede{font-size:clamp(14.5px,1.4vw,18px); color:var(--muted); max-width:680px; line-height:1.5; flex:none;}
.screen.center .lede{margin-left:auto; margin-right:auto;}

/* ═══════════════════════════════════════════════════════════════
   SCREEN 0 · WHO ARE WE CUSTOMIZING FOR
   ═══════════════════════════════════════════════════════════════ */
.picker{display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(20px,2.6vw,40px);
  margin-top:clamp(20px,3vh,32px); text-align:left; min-height:0; flex:1; align-content:start;}
.pgroup{display:flex; flex-direction:column; min-height:0;}
.ptitle{font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex:none;}
.ptitle span{color:var(--muted-2); opacity:.6;}
.pgrid{display:grid; gap:9px; align-content:start;}
.pgrid.one{grid-template-columns:1fr;}
.pgrid.two{grid-template-columns:1fr 1fr;}
.pchoice{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; cursor:pointer; transition:.16s; position:relative;
  color:var(--ink); font-family:var(--font-body); text-align:left;
  display:flex; flex-direction:column; gap:3px;}
.pchoice .pn{font-family:var(--font-display); font-weight:600; font-size:15.5px;
  line-height:1.2; transition:.16s; padding-right:34px;}
.pchoice .px{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; color:var(--muted-2);}
.pchoice:not([disabled]):hover{border-color:var(--accent-dim); transform:translateY(-2px);
  box-shadow:0 16px 36px -20px var(--accent);}
.pchoice:not([disabled]):hover .pn{color:var(--accent);}
.pchoice[disabled]{opacity:.3; cursor:not-allowed; filter:saturate(.15);}
.pchoice.live::after{content:"LIVE"; position:absolute; top:12px; right:12px;
  font-family:var(--font-mono); font-size:8px; letter-spacing:.14em; padding:3px 6px;
  border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:700;}
.pocnote{font-family:var(--font-mono); font-size:10px; letter-spacing:.05em;
  color:var(--muted-2); margin-top:16px; flex:none; text-align:center;}
.pocnote b{color:var(--accent);}

/* ═══════════════════════════════════════════════════════════════
   SCREEN 1 · THE HUB — the loop lives here
   ═══════════════════════════════════════════════════════════════ */
.capwrap{max-width:620px; margin:0 auto; width:100%; flex:none;}
.form{display:flex; gap:10px; margin-top:20px;}
.form input{flex:1; min-width:0; font-family:var(--font-body); font-size:16px;
  padding:15px 18px; border-radius:11px; background:var(--panel);
  border:1px solid var(--line-2); color:var(--ink); outline:none; transition:.16s;}
.form input::placeholder{color:var(--muted-2);}
.form input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);}
.form input.err{border-color:var(--alert);}
.formnote{font-family:var(--font-mono); font-size:10px; letter-spacing:.05em;
  color:var(--muted-2); margin-top:10px;}
.receipt{display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:14px;}
.rchip{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; padding:5px 12px;
  border-radius:999px; background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid var(--accent-dim); color:var(--accent);}
.orsep{display:flex; align-items:center; gap:16px; margin:clamp(16px,2.6vh,28px) 0 15px; flex:none;}
.orsep::before,.orsep::after{content:""; flex:1; height:1px; background:var(--line);}
.orsep span{font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-2); flex:none;}
.hubgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px;
  text-align:left; min-height:0; align-content:start; overflow-y:auto; padding-right:2px;}
.hcard{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:16px 16px 14px; cursor:pointer; transition:.18s; display:flex; flex-direction:column;
  gap:7px; color:var(--ink); font-family:var(--font-body); text-align:left; position:relative;}
.hcard:hover{border-color:var(--accent-dim); transform:translateY(-3px);
  box-shadow:0 20px 44px -22px var(--accent);}
.hcard:hover .mt{color:var(--accent);}
.hcard .mk{font-family:var(--font-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2);}
.hcard .mt{font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.22;
  color:var(--ink); transition:.18s; padding-right:26px;}
.hcard .mp{font-family:var(--font-mono); font-size:10px; letter-spacing:.04em;
  color:var(--accent-dim); margin-top:auto; padding-top:5px;}
.hcard .marrow{position:absolute; top:14px; right:14px; color:var(--muted-2); font-size:13px;
  font-family:var(--font-mono); transition:.18s;}
.hcard:hover .marrow{color:var(--accent); transform:translateX(2px);}
.hcard.seen{border-color:var(--accent-dim); background:color-mix(in srgb,var(--accent) 5%,var(--panel));}
.hcard.seen .mk{color:var(--accent-dim);}
.hcard.seen .mt{color:var(--muted);}
.hcard.seen:hover .mt{color:var(--accent);}
.hcard.seen .marrow{display:none;}
.hcard .tickbadge{position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%;
  display:none; place-items:center; background:var(--accent); color:var(--accent-ink);
  animation:pop .4s cubic-bezier(.2,1.3,.4,1) both;}
.hcard.seen .tickbadge{display:grid;}
.hcard .tickbadge svg{width:11px; height:11px; stroke:var(--accent-ink); fill:none; stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round;}
.hcard.seen .mt::after{content:"Read it again"; display:block; font-family:var(--font-mono);
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dim);
  margin-top:7px; font-weight:400; opacity:0; transition:.18s;}
.hcard.seen:hover .mt::after{opacity:1;}

/* ═══════════════════════════════════════════════════════════════
   SCREEN 2 · PAIN POINT
   The whole slide is one argument: four misses on the left, four
   fixes on the right, in the same order. Row 1 answers row 1.
   ═══════════════════════════════════════════════════════════════ */
.phead{display:flex; align-items:flex-start; justify-content:space-between;
  gap:26px; margin-bottom:clamp(12px,1.8vw,20px); flex:none;}
.pheadL{min-width:0;}
h1.pain{font-size:clamp(23px,2.9vw,40px); line-height:1.04; letter-spacing:-.022em;
  margin-bottom:7px; max-width:20ch;}
.painsub{font-size:clamp(13px,1.25vw,16px); color:var(--muted); max-width:60ch;
  line-height:1.45; margin:0;}

/* product lockup — placeholder mark until the real logo files land */
.lock{display:flex; align-items:center; gap:11px; flex:none; padding:11px 16px 11px 13px;
  border-radius:14px; background:color-mix(in srgb,var(--h) 8%,var(--panel));
  border:1px solid color-mix(in srgb,var(--h) 34%,transparent);
  box-shadow:0 14px 40px -22px var(--h); transition:.5s;}
.lock .mark{width:30px; height:30px; flex:none;}
.lock .mark svg{width:100%; height:100%; display:block;}
.lock .lt{display:flex; flex-direction:column; line-height:1.15;}
.lock .lname{font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:-.01em; color:var(--ink); white-space:nowrap;}
.lock .lrole{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--h);}

.ba{display:grid; grid-template-columns:1fr 1fr; gap:clamp(11px,1.4vw,18px);
  align-items:stretch; min-height:0; flex:1;}
.side{border-radius:var(--r-bento); padding:clamp(15px,1.8vw,24px);
  display:flex; flex-direction:column; position:relative; overflow:hidden; min-height:0;}
.side .corner{position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;}
.side .corner svg{width:14px; height:14px; fill:none; stroke-width:3; stroke-linecap:round;
  stroke-linejoin:round;}
.side.before{background:linear-gradient(160deg,color-mix(in srgb,var(--panel-2) 82%,transparent),
  color-mix(in srgb,var(--panel) 88%,transparent)); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}
.side.before .corner{background:color-mix(in srgb,var(--alert) 14%,transparent);
  border:1px solid var(--alert-dim);}
.side.before .corner svg{stroke:var(--alert);}
.lbl{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:10px; flex:none;}
.side.before .lbl{color:var(--muted-2);}
.side h3{font-family:var(--font-display); font-weight:700;
  font-size:clamp(15px,1.45vw,20px); line-height:1.18; letter-spacing:-.012em;
  margin-bottom:12px; max-width:24ch; flex:none; padding-right:36px;}
.side.before h3{color:var(--ink);}

/* the four boxes. Scannable at a glance, one thought each. */
.boxes{display:grid; grid-template-columns:1fr 1fr; gap:8px; min-height:0; flex:1;
  align-content:start;}
.box{border-radius:12px; padding:11px 12px; font-size:clamp(12px,.98vw,13.8px);
  line-height:1.32; display:flex; gap:8px; align-items:flex-start;}
.box .bi{font-family:var(--font-mono); font-weight:700; font-size:12px; flex:none;
  line-height:1.35; width:11px;}
.side.before .box{background:color-mix(in srgb,var(--alert) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--alert-dim) 40%,transparent);
  color:color-mix(in srgb,var(--ink) 76%,var(--muted));}
.side.before .box .bi{color:var(--alert);}
.side.after .box{background:#fff; border:1px solid var(--sol-line);
  color:color-mix(in srgb,var(--sol-ink) 82%,var(--sol-muted));}
.side.after .box .bi{color:var(--accent-dim);}

.costbar{margin-top:auto; padding-top:14px; flex:none;}
.cost{display:flex; align-items:baseline; gap:10px; padding:11px 14px; border-radius:12px;
  background:color-mix(in srgb,var(--alert) 8%,transparent); border:1px solid var(--alert-dim);}
.cost .cv{font-family:var(--font-display); font-weight:800; font-size:clamp(20px,1.9vw,28px);
  letter-spacing:-.02em; color:var(--alert); line-height:1; flex:none;}
.cost .cl{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); line-height:1.35;}

.side.after{background:var(--sol-surface); border:1px solid var(--sol-line); color:var(--sol-ink);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);}
.side.after .corner{background:var(--accent); border:1px solid var(--accent);}
.side.after .corner svg{stroke:var(--accent-ink);}
.side.after .lbl{color:var(--sol-muted);}
.side.after h3{color:var(--sol-ink);}

.payoff{margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:12px; flex:none;}
.payoff .pv{font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.1vw,44px);
  letter-spacing:-.035em; line-height:.9; color:var(--sol-ink); flex:none;}
.payoff .pl{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sol-muted); line-height:1.35;}

.nextbar{margin-top:clamp(13px,1.7vw,20px); flex:none;}
.btn.block{width:100%; justify-content:center; font-size:17px;
  padding:clamp(14px,1.6vw,19px) 30px; border-radius:14px;}
.btn.block .ar{transition:transform .18s;}
.btn.block:hover .ar{transform:translateX(4px);}

/* ── buttons ───────────────────────────────────────────────────── */
.btn{font-family:var(--font-body); font-weight:600; font-size:15px; border-radius:11px;
  padding:14px 26px; cursor:pointer; border:1px solid transparent; transition:.16s;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  text-decoration:none; white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.btn.primary:hover{filter:brightness(1.08); box-shadow:0 12px 30px -10px var(--accent);}
.btn.secondary{background:var(--panel-2); color:var(--ink); border-color:var(--line-2);}
.btn.secondary:hover{border-color:var(--accent-dim);}
.btn.lg{font-size:16px; padding:15px 28px;}

/* ── SCREEN 3 · thank you ──────────────────────────────────────── */
.tick{width:66px; height:66px; border-radius:50%; margin:0 auto 20px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid var(--accent-dim);
  animation:pop .5s cubic-bezier(.2,1.3,.4,1) .1s both; flex:none;}
.tick svg{width:30px; height:30px; stroke:var(--accent); fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;}
@keyframes pop{from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;}}
.emailback{font-family:var(--font-mono); font-size:13px; color:var(--accent);
  padding:9px 18px; border-radius:999px; margin:6px auto 0; flex:none; align-self:center;
  background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid var(--accent-dim);}
.foot{font-family:var(--font-mono); font-size:11px; color:var(--muted-2); letter-spacing:.04em;
  margin-top:22px; flex:none;}

#hint{position:fixed; bottom:13px; left:50%; transform:translateX(-50%); z-index:40;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); display:flex; align-items:center; gap:8px; pointer-events:none;
  opacity:.5; transition:opacity .4s;}
#hint kbd{font-family:var(--font-mono); font-size:10px; border:1px solid var(--line-2);
  border-radius:5px; padding:2px 6px; color:var(--muted); background:var(--panel);}
#hint.hide{opacity:0;}

.tok{font-style:normal;}
.tok[data-filled="1"]{color:var(--accent); font-weight:600;}

/* ── FIT: short-and-wide laptops are the case that breaks ──────── */
@media (min-width:901px) and (max-height:840px){
  h1{font-size:clamp(26px,3.4vw,42px);}
  h1.pain{font-size:clamp(21px,2.4vw,31px);}
  .painsub{font-size:13.5px;}
  .side{padding:14px 17px;}
  .side h3{font-size:16px; margin-bottom:9px;}
  .boxes{gap:7px;}
  .box{padding:9px 10px; font-size:12.4px; line-height:1.26;}
  .payoff .pv{font-size:clamp(26px,2.6vw,34px);}
  .costbar,.payoff{padding-top:10px;}
  .btn.block{padding:13px 30px; font-size:16px;}
  .pchoice{padding:12px 14px;}
  .pchoice .pn{font-size:14.5px;}
  .form{margin-top:16px;}
  .hcard{padding:14px 14px 12px;}
  .lock{padding:9px 13px 9px 11px;}
  .lock .mark{width:26px; height:26px;}
}
@media (min-width:901px) and (max-height:720px){
  .kick{margin-bottom:7px;}
  h1{font-size:clamp(23px,2.8vw,34px); margin-bottom:10px;}
  h1.pain{font-size:clamp(19px,2.1vw,26px);}
  .lede{font-size:14px;}
  .painsub{display:none;}
  .phead{margin-bottom:11px;}
  .box{padding:8px 9px; font-size:11.8px;}
  .cost{padding:8px 12px;}
  .picker{margin-top:14px;}
  .orsep{margin:14px 0 12px;}
}

@media (max-width:900px){
  html,body{overflow:auto;}
  #stage{position:relative; inset:auto;}
  .screen{position:relative; inset:auto; min-height:100svh;
    justify-content:flex-start; padding-top:clamp(34px,6vh,52px); padding-bottom:58px;}
  .picker{grid-template-columns:1fr; flex:none; gap:26px;}
  .ba{grid-template-columns:1fr; gap:13px; flex:none;}
  .side{min-height:auto;}
  .boxes{grid-template-columns:1fr;}
  .phead{flex-direction:column-reverse; align-items:flex-start; gap:16px;}
  .costbar,.payoff{margin-top:16px;}
  .form{flex-direction:column;}
  .hubgrid{grid-template-columns:1fr;}
  #hint{bottom:8px;}
}
@media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;}}

#s-hub.active{display:flex;} #s-hub{justify-content:center;} #s-hub .si{max-width:1360px;}
.proflayout{display:grid; grid-template-columns:0.92fr 1.35fr; gap:clamp(18px,2.4vw,40px); min-height:0; flex:1;}
.profile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-bento);
  padding:clamp(18px,1.8vw,26px); display:flex; flex-direction:column; gap:14px; min-height:0; overflow:hidden;}
.phead2{display:flex; gap:15px; align-items:center; flex:none;}
.pphoto{width:78px; height:78px; border-radius:18px; flex:none; overflow:hidden; position:relative; border:1px solid var(--line-2); background:var(--panel-2);}
.pphoto img{width:100%; height:100%; object-fit:cover; display:block;}
.pinit{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--panel-2));}
.pname{font-family:var(--font-display); font-weight:800; font-size:clamp(19px,1.7vw,24px); line-height:1.05; letter-spacing:-.02em;}
.ptitle2{font-size:13.5px; color:var(--muted); line-height:1.3; margin-top:3px;} .ptitle2 b{color:var(--ink); font-weight:600;}
.pchips{display:flex; flex-wrap:wrap; gap:6px; flex:none;}
.pchip{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--muted);}
.pchip b{color:var(--accent); font-weight:700; text-transform:none; letter-spacing:0;}
.pbio-wrap{min-height:0; flex:1; display:flex; flex-direction:column;}
.pbio-lbl{font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:7px; padding-bottom:7px; border-top:1px solid var(--line); padding-top:12px; flex:none;}
.pbio{font-size:12.5px; line-height:1.5; color:var(--muted); overflow-y:auto; padding-right:6px; min-height:0;}
.plinks{font-family:var(--font-mono); font-size:10px; color:var(--muted-2); letter-spacing:.04em; flex:none;} .plinks span{color:var(--accent);}
.hubside{display:flex; flex-direction:column; min-height:0;}
.hubside .hubgrid{grid-template-columns:1fr 1fr; overflow:visible;}
.hubside .orsep{margin:clamp(12px,2vh,20px) 0 13px;}
#suggest{margin-top:12px;} #suggest .sg{cursor:pointer; transition:.15s;} #suggest .sg:hover{border-color:var(--accent); color:var(--ink);}
/* company section: --blue is the established company hue (matches .cal-token.is-company) */
#suggest .rchip.co{background:color-mix(in srgb,var(--blue) 10%,transparent);
  border-color:color-mix(in srgb,var(--blue) 55%,transparent); color:var(--blue);}
#suggest .rchip.co:hover{border-color:var(--blue); color:var(--ink);}
#suggest .seclabel{flex-basis:100%; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-top:6px;}
@media (max-width:900px){ .proflayout{grid-template-columns:1fr; flex:none;} .hubside .hubgrid{grid-template-columns:1fr;} .pbio{max-height:180px;} }
@media (min-width:901px) and (max-height:840px){ .pphoto{width:64px; height:64px;} .pname{font-size:20px;} .pbio{font-size:12px;} }

/* ── company experience (s-company) ─────────────────────────────────────────── */
.co-wrap{display:grid; grid-template-columns:minmax(260px,320px) 1fr; gap:22px;
  align-items:start; width:100%; height:100%; min-height:0; text-align:left;}
.co-rail{display:flex; flex-direction:column; gap:12px; min-height:0; max-height:100%;
  overflow-y:auto; padding-right:2px;}
.co-profile{background:var(--panel-2,rgba(255,255,255,.03)); border:1px solid var(--line);
  border-radius:14px; padding:16px;}
.co-att-lbl{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2); margin-top:4px;}
.co-attendees{display:flex; flex-direction:column; gap:8px;}
.co-att{display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  border:1px solid var(--line); border-radius:12px; padding:10px 14px; transition:.15s;}
.co-att:hover{border-color:var(--accent);}
.co-att-name{color:var(--ink); font-weight:600;}
.co-att-title{font-family:var(--font-mono); font-size:10px; color:var(--muted);}
.co-main{min-height:0; max-height:100%; overflow-y:auto; display:flex; flex-direction:column;}
.co-view{display:flex; flex-direction:column; min-height:0;}

/* ── deep-dive detail screen (scrollable) ─────────────────────────── */
#s-pain{padding:0;}
#s-pain.active{display:block; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.deepwrap{max-width:1120px; margin:0 auto; padding:clamp(24px,4vh,50px) clamp(20px,4vw,48px) 40px;}
.deep-hero .phead{margin-bottom:clamp(14px,2.2vw,24px);}
.deep-hero h1.pain{max-width:24ch;}
.deep-hero .painsub{max-width:74ch; font-size:clamp(14px,1.2vw,16.5px); color:color-mix(in srgb,var(--ink) 70%,var(--muted)); display:block;}
#s-pain .ba{display:grid; grid-template-columns:1fr 1fr; gap:clamp(11px,1.4vw,18px); flex:none;}
.dsec{margin-top:clamp(22px,3.2vh,36px);}
.dsec-lbl{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:12px; margin-bottom:15px;}
.dsec-lbl::before{content:""; width:26px; height:1px; background:var(--accent);}
.steps{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.stepc{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px 18px 16px; display:flex; gap:14px; align-items:flex-start;}
.stepn{font-family:var(--font-display); font-weight:800; font-size:19px; line-height:1; color:var(--accent-ink); background:var(--h,var(--accent)); width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;}
.stepc .st{font-family:var(--font-display); font-weight:700; font-size:15.5px; margin-bottom:5px; line-height:1.15;}
.stepc .sd{font-size:13px; line-height:1.5; color:var(--muted);}
.scenario{background:linear-gradient(150deg,color-mix(in srgb,var(--h,var(--accent)) 12%,var(--panel)),var(--panel)); border:1px solid color-mix(in srgb,var(--h,var(--accent)) 34%,var(--line)); border-radius:18px; padding:clamp(20px,2.4vw,30px);}
.scenario .sct{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--h,var(--accent)); margin-bottom:12px;}
.scenario .scd{font-size:clamp(15px,1.35vw,18px); line-height:1.6; color:var(--ink); max-width:80ch;}
.bcase{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.bcard{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px 18px;}
.bcard .bv{font-family:var(--font-display); font-weight:800; font-size:clamp(22px,2.2vw,30px); letter-spacing:-.02em; color:var(--h,var(--accent)); line-height:1; margin-bottom:9px;}
.bcard .bl{font-size:13px; line-height:1.45; color:var(--muted);}
.fit{margin-top:clamp(22px,3.2vh,36px); background:var(--panel-2); border:1px solid var(--line-2); border-left:3px solid var(--h,var(--accent)); border-radius:12px; padding:20px 22px;}
.fit .ft{font-family:var(--font-display); font-weight:700; font-size:16px; margin-bottom:7px;}
.fit .fd{font-size:13.5px; line-height:1.55; color:var(--muted);}
.dcta{margin-top:clamp(24px,3.4vh,40px); text-align:center;}
.dcta p{font-size:clamp(14px,1.2vw,16px); color:var(--muted); max-width:60ch; margin:0 auto 16px;}
.dcta .btn.block{max-width:520px; margin:0 auto;}
@media (max-width:900px){ .steps,.bcase{grid-template-columns:1fr;} #s-pain .ba{grid-template-columns:1fr;} }

/* ═══════════════════════════════════════════════════════════════
   TASK 13 · DOSSIER REVEAL + CONVERSATION CANVAS + REP LAYER
   Reuses .profile/.phead2/.pchips/.hcard/.hubgrid from above; adds
   only the reveal animation, canvas expand, maturity strip, product
   chips, pin badge and rep drawer. Same tokens, same visual language.
   ═══════════════════════════════════════════════════════════════ */
#s-dossier.active, #s-canvas.active{display:flex; justify-content:flex-start;
  overflow-y:auto; -webkit-overflow-scrolling:touch;}
#s-dossier .si, #s-canvas .si{max-width:1360px; flex:none;}

/* staged reveal — each element fades up on its own animation-delay (--d).
   A tap adds .dossier-skip which snaps everything visible instantly. */
.reveal{opacity:0; transform:translateY(10px);
  animation:revealup .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0ms);}
@keyframes revealup{to{opacity:1; transform:none;}}
.dossier-skip .reveal{animation:none !important; opacity:1 !important; transform:none !important;}

.dossi .proflayout{align-items:start;}
/* left rail on the dossier: person card stacked over the company card */
.profcol{display:flex; flex-direction:column; gap:14px; min-height:0;}
.dcompany .delegline{margin-top:12px;}
.dosside{display:flex; flex-direction:column; gap:13px; min-height:0;}
.dback{align-self:flex-start; margin-bottom:14px;}
.dosside h1{font-size:clamp(24px,3.1vw,42px); line-height:1.02;}
.delegline{font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color:var(--accent);
  padding:9px 13px; border-radius:11px; align-self:flex-start; line-height:1.4;
  background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid var(--accent-dim);}
.dsectlbl{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted-2); margin-top:4px; line-height:1.5;}
.dproblems{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.dcard{cursor:pointer;}
.dcard:hover{transform:none; border-color:var(--accent-dim); box-shadow:none;}
.dcard:hover .mt{color:var(--accent);}
.dcontinue{align-self:flex-start; margin-top:6px;}

/* canvas grid + views */
.cv-view{width:100%;}
.cv-head{flex:none; margin-bottom:clamp(14px,2vw,22px); cursor:pointer; user-select:none;
  -webkit-user-select:none; touch-action:manipulation;}
.cv-head h1{font-size:clamp(24px,3vw,42px);}
.cv-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

/* pin badge on the grid — reuses the .tickbadge markup */
.hcard.pinned{border-color:var(--accent-dim);
  background:color-mix(in srgb,var(--accent) 6%,var(--panel));}
.hcard.pinned .tickbadge{display:grid;}
.hcard.pinned .marrow{display:none;}
.hcard.opened .mk{color:var(--accent-dim);}
.hcard.opened .marrow{opacity:.35;}

/* editorial "lead with this one" — subtle START HERE badge in the kick/mono style */
.hcard.lead{border-color:var(--accent-dim);}
.leadbadge{display:inline-block; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700; color:var(--accent-ink); background:var(--accent);
  border-radius:999px; padding:3px 8px; margin-bottom:9px; align-self:flex-start;}
/* collapsed card: sibling headlines stacked, hairline-separated */
.mtstack .mt + .mt{margin-top:8px; padding-top:8px; border-top:1px solid var(--line);}

/* expanded card */
.expandwrap{overflow-y:auto; -webkit-overflow-scrolling:touch;}
.expand{max-width:1100px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:14px;
  padding-bottom:20px;}
.expand .xback{align-self:flex-start;}
.xkick{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--h,var(--accent)); display:flex; align-items:center; gap:11px;}
.xkick::before{content:""; width:26px; height:1px; background:var(--h,var(--accent));}
h1.xstate{max-width:26ch;}
.xsub{font-size:clamp(14px,1.3vw,17px); color:color-mix(in srgb,var(--ink) 72%,var(--muted));
  max-width:70ch; line-height:1.5;}
.xdetails{display:grid; gap:8px; margin-top:2px;}
.detailrow{display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.45;
  color:color-mix(in srgb,var(--ink) 80%,var(--muted)); padding:11px 14px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line);}
.detailrow .dm{width:7px; height:7px; border-radius:50%; flex:none; margin-top:7px; background:var(--muted-2);}
.detailrow.dr-frustration{border-color:color-mix(in srgb,var(--alert-dim) 40%,transparent);
  background:color-mix(in srgb,var(--alert) 5%,transparent);}
.detailrow.dr-frustration .dm{background:var(--alert);}

/* solution content — reused inside .xside.after (see two-column expand block below);
   the old .xsolution white-card wrapper is gone, these classes now sit directly on
   the panel's --sol-surface background. */
.xsol-name{font-family:var(--font-display); font-weight:800; font-size:clamp(17px,1.6vw,22px);
  letter-spacing:-.02em; color:var(--sol-ink); margin:2px 0 10px;}
.prodchips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px;}
.prodchip{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; padding:5px 11px;
  border-radius:999px; color:var(--pc,var(--accent-dim)); font-weight:700;
  background:color-mix(in srgb,var(--pc,var(--accent)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--pc,var(--accent)) 45%,transparent);}
.xnarr{font-size:14.5px; line-height:1.6; color:color-mix(in srgb,var(--sol-ink) 84%,var(--sol-muted));}
.xnarr p{margin:0 0 9px;} .xnarr p:last-child{margin-bottom:0;}
.xnarr h2,.xnarr h3,.xnarr h4{font-family:var(--font-display); font-weight:700; color:var(--sol-ink);
  margin:12px 0 6px; font-size:15.5px; line-height:1.2;}
.xnarr ul{margin:6px 0 9px; padding-left:18px;} .xnarr li{margin:3px 0;}
.xnarr strong{color:var(--sol-ink); font-weight:700;}

/* honest-maturity strip: capability→Shipped, outcome→In motion */
.mstrip{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.mpill{display:flex; align-items:center; gap:9px; font-size:13px; line-height:1.3;
  padding:8px 12px; border-radius:11px; background:#fff; border:1px solid var(--sol-line);
  color:color-mix(in srgb,var(--sol-ink) 82%,var(--sol-muted));}
.mpill i{font-family:var(--font-mono); font-style:normal; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 7px; border-radius:999px; flex:none; font-weight:700;}
.mpill-capability i{background:color-mix(in srgb,var(--accent-dim) 18%,#fff); color:var(--accent-dim);}
.mpill-outcome i{background:color-mix(in srgb,var(--blue) 16%,#fff); color:var(--blue-ink);}

.proofs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin-top:12px;}
.proofcard{background:#fff; border:1px solid var(--sol-line); border-left:3px solid var(--h,var(--accent));
  border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.4; color:var(--sol-ink);}

/* tight anatomy (experience pass): the hook is the card's voice — large + prominent */
.xhook{font-family:var(--font-display); font-weight:600; font-size:clamp(17px,1.7vw,23px);
  line-height:1.28; letter-spacing:-.01em; color:var(--sol-ink); margin:2px 0 14px; max-width:44ch;}
.xproof{margin-top:12px; background:#fff; border:1px solid var(--sol-line);
  border-left:3px solid var(--h,var(--accent)); border-radius:12px; padding:12px 14px;
  font-size:13px; line-height:1.45; color:color-mix(in srgb,var(--sol-ink) 88%,var(--sol-muted));}

/* #boothcopy: numbered one-thought boxes — ported from the original .box/.bi */
/* Full-width stacked rows, mirroring .xsolves — the problem points and the solve
   points read as the same visual unit on facing panels (Bo, pilot review). */
.xboxes{display:grid; gap:8px; align-content:start; margin-top:10px;}
.xbox{border-radius:12px; padding:10px 12px; font-size:clamp(12.5px,1vw,14.5px);
  line-height:1.32; display:flex; gap:10px; align-items:center;}
.xbox .xbi{font-family:var(--font-mono); font-weight:700; font-size:12px; flex:none;
  line-height:1.35; width:12px;}
.xside.before .xbox{background:color-mix(in srgb,var(--alert) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--alert-dim) 40%,transparent);
  color:color-mix(in srgb,var(--ink) 76%,var(--muted));}
.xside.before .xbox .xbi{color:var(--alert);}
.xside.after .xbox{background:#fff; border:1px solid var(--sol-line);
  color:color-mix(in srgb,var(--sol-ink) 82%,var(--sol-muted));}
.xside.after .xbox .xbi{color:var(--accent-dim);}

/* #boothcopy: solve rows — numbered short + product chip + motion tag */
.xsolves{display:grid; gap:8px; margin-top:12px;}
.xsolve{display:flex; align-items:center; gap:10px; background:#fff;
  border:1px solid var(--sol-line); border-radius:12px; padding:10px 12px;
  font-size:clamp(12.5px,1vw,14.5px); color:color-mix(in srgb,var(--sol-ink) 85%,var(--sol-muted));}
.xsolve .xbi{color:var(--accent-dim);}
.xsolve .xsv{flex:1;}
.xsolve .xchip{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  padding:3px 8px; border-radius:999px; flex:none;
  background:color-mix(in srgb,var(--pc,var(--accent)) 14%,#fff);
  color:color-mix(in srgb,var(--pc,var(--accent)) 70%,#000);
  border:1px solid color-mix(in srgb,var(--pc,var(--accent)) 35%,#fff);}
.xsolve .xmotion{font-family:var(--font-mono); font-style:normal; font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue-ink); flex:none;}

/* #boothcopy: business case — ported from the original .bcase/.bcard/.bv/.bl */
.xbcase-lbl{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sol-muted); margin-top:16px; margin-bottom:8px;}
.xbcase{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.xbcase .bcard{background:#fff; border:1px solid var(--sol-line); border-radius:14px; padding:14px 13px;}
.xbcase .bv{font-family:var(--font-display); font-weight:800;
  font-size:clamp(19px,1.9vw,26px); letter-spacing:-.02em; color:var(--h,var(--accent-dim));
  line-height:1; margin-bottom:7px;}
.xbcase .bl{font-size:12px; line-height:1.4; color:var(--sol-muted);}
.xbcase .bproof{grid-column:1 / -1; background:color-mix(in srgb,var(--accent) 8%,#fff);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--sol-line));
  font-size:12.5px; line-height:1.45; color:var(--sol-ink);}

.xfoot{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); margin-top:2px;}
.expand .xpin{align-self:flex-start; margin-top:4px;}

/* two-column problem/solution — ported from the original workup's .ba layout */
.xba{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,18px); align-items:stretch;}
.xside{border-radius:var(--r-bento); padding:clamp(16px,1.9vw,26px); display:flex;
  flex-direction:column; position:relative; overflow:hidden; min-height:0;}
.xside .xcorner{position:absolute; top:14px; right:14px; width:30px; height:30px;
  border-radius:50%; display:grid; place-items:center;}
.xside .xcorner svg{width:14px; height:14px; fill:none; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;}
.xlbl{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:12px; flex:none;}
.xside.before{background:linear-gradient(160deg,color-mix(in srgb,var(--panel-2) 82%,transparent),
  color-mix(in srgb,var(--panel) 88%,transparent)); border:1px solid var(--line);}
.xside.before .xcorner{background:color-mix(in srgb,var(--alert) 14%,transparent);
  border:1px solid var(--alert-dim);}
.xside.before .xcorner svg{stroke:var(--alert);}
.xside.before .xlbl{color:var(--muted-2);}
.xside.after{background:var(--sol-surface); border:1px solid var(--sol-line);
  color:var(--sol-ink); box-shadow:0 30px 70px -30px rgba(0,0,0,.75);}
.xside.after .xcorner{background:var(--accent); border:1px solid var(--accent);}
.xside.after .xcorner svg{stroke:var(--accent-ink);}
.xside.after .xlbl{color:var(--sol-muted);}
.xside h1.xstate{font-size:clamp(20px,2.2vw,32px); padding-right:40px;}
.xangle-body{font-size:clamp(14px,1.3vw,17px); line-height:1.5;
  color:color-mix(in srgb,var(--sol-ink) 82%,var(--sol-muted));}

/* engagement roadmap — horizontal 4-phase stepper */
.xroad{margin-top:4px;}
.xroad-lbl{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:10px;}
.xroad-track{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.rstep{position:relative; border-radius:14px; padding:12px 14px;
  background:color-mix(in srgb,var(--panel) 80%,transparent); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:4px;}
.rstep::after{content:"\2192"; position:absolute; right:-11px; top:50%;
  transform:translateY(-50%); color:var(--muted-2); font-size:13px; z-index:1;}
.rstep:last-child::after{content:none;}
.rstep .rk{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em;
  color:var(--accent);}
.rstep b{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink);}
.rstep .rd{font-size:12.5px; line-height:1.4; color:var(--muted);}

@media (max-width:820px){
  .xba{grid-template-columns:1fr;}
  .xroad-track{grid-template-columns:1fr 1fr;}
  .rstep::after{content:none;}
  .xbcase{grid-template-columns:1fr;}
}

/* rep drawer — slides in from the right on a 600ms header long-press */
.replayer{position:fixed; top:0; right:0; height:100%; width:min(460px,88vw); z-index:60;
  background:var(--panel-2); border-left:1px solid var(--line-2); box-shadow:-30px 0 90px -40px #000;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto; padding:26px 24px 40px;}
.replayer.open{transform:none;}
.repinner{max-width:100%;}
.rephead{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.replayer h1,.replayer h2,.replayer h3,.replayer h4{font-family:var(--font-display); font-weight:700;
  letter-spacing:-.01em; margin:16px 0 7px; line-height:1.18;}
.replayer h1{font-size:19px;} .replayer h2{font-size:16.5px;} .replayer h3,.replayer h4{font-size:14.5px; color:var(--ink);}
.replayer p{font-size:13.5px; line-height:1.55; color:var(--muted); margin:0 0 10px;}
.replayer ul{margin:6px 0 12px; padding-left:20px;} .replayer li{font-size:13.5px; line-height:1.5; color:var(--muted); margin:4px 0;}
.replayer strong{color:var(--ink); font-weight:700;}
.repempty{font-style:italic; color:var(--muted-2);}

@media (max-width:900px){
  .dossi .proflayout{grid-template-columns:1fr;}
  .dproblems{grid-template-columns:1fr;}
  .cv-grid{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════════
   TASK 14 · CANVAS FINISH BUTTON + CLOSE SCREEN + IDLE HINT
   ═══════════════════════════════════════════════════════════════ */
.cv-headrow{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.cv-hleft{display:flex; align-items:center; gap:14px; min-width:0;}
.cv-headrow .kick{margin-bottom:0;}
.cv-finish{flex:none;}
.cv-back-btn{flex:none;}

/* #256 rep-selectable pitch framing — a low-key segmented control on the board surface */
.cv-framing{display:inline-flex; align-items:center; gap:4px; flex:none;
  background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px 5px;}
.frlbl{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); padding:0 5px 0 4px;}
.frbtn{font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--muted);
  background:transparent; border:0; border-radius:999px; padding:5px 11px; cursor:pointer;
  transition:background .15s, color .15s;}
.frbtn:hover{color:var(--ink);}
.frbtn.active{background:var(--accent); color:var(--accent-ink); font-weight:600;}

/* #234 alliance/channel rep-note surface — pinned to the top of the rep drawer */
.repalliance{border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  background:color-mix(in srgb, var(--accent) 9%, var(--panel)); border-radius:12px;
  padding:12px 14px 6px; margin-bottom:16px;}
.repalliance-tag{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:5px;}
.repalliance-lead{font-family:var(--font-display); font-weight:600; font-size:14px;
  line-height:1.35; color:var(--ink); margin:0 0 8px;}
.repalliance p{font-size:13px;} .repalliance h1,.repalliance h2,.repalliance h3,.repalliance h4{margin-top:10px;}

#s-close.active{display:flex; justify-content:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.close-view{max-width:960px;}
.closelist{display:grid; gap:9px; margin-top:6px; margin-bottom:4px;}
.closeitem{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:12px; padding:13px 16px; font-family:var(--font-display); font-weight:600;
  font-size:15px; line-height:1.3; color:var(--ink);}
.close-view > .lede{margin-top:6px;}

.closegrid{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(20px,3vw,40px);
  margin-top:clamp(20px,2.6vh,32px); align-items:start;}
.closecol{display:flex; flex-direction:column; min-width:0;}
.closechips{display:flex; flex-wrap:wrap; gap:9px; margin-top:10px;}
.chipbtn{font-family:var(--font-body); font-weight:600; font-size:13.5px; color:var(--ink);
  background:var(--panel); border:1px solid var(--line-2); border-radius:999px;
  padding:11px 16px; cursor:pointer; transition:.16s;}
.chipbtn:hover{border-color:var(--accent-dim);}
.chipbtn.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700;}

.closeqr{align-items:center; text-align:center;}
.qrcard{background:#fff; border-radius:18px; padding:16px; width:200px; height:200px;
  display:grid; place-items:center; box-shadow:0 20px 50px -26px #000; flex:none;}
.qrcard svg{width:100%; height:100%; display:block;}
.closeqr .formnote{margin-top:12px; text-align:center;}

.idle-hint{position:fixed; left:50%; bottom:36px; z-index:70; transform:translate(-50%,12px);
  pointer-events:none; opacity:0; transition:opacity .3s ease, transform .3s ease;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--accent-dim); border-radius:999px;
  padding:14px 26px; width:max-content; box-shadow:0 20px 50px -26px #000;}
.idle-hint.show{opacity:1; transform:translate(-50%,0);}

@media (max-width:900px){
  .closegrid{grid-template-columns:1fr;}
  .closeqr{order:-1;}
}

/* ═══════════════════════════════════════════════════════════════
   BADGE SCAN — viewfinder overlay + calibration screen (Task 15)
   ═══════════════════════════════════════════════════════════════ */
.scanner-overlay{position:fixed; inset:0; z-index:80; background:#04070c;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px;}
.scanner-overlay[hidden]{display:none;}
.scanner-overlay video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.scanner-guide{position:relative; z-index:1; width:min(78vw,560px); aspect-ratio:1.6/1;
  border:2px solid var(--accent); border-radius:18px; box-shadow:0 0 0 2000px rgba(4,7,12,.55);
  pointer-events:none;}
.scanner-note{position:relative; z-index:1; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.08em; color:var(--ink); background:rgba(4,7,12,.65); padding:9px 18px;
  border-radius:999px;}
.scanner-cancel{position:relative; z-index:1;}

.kiosk-toast{position:fixed; left:50%; bottom:34px; transform:translate(-50%,14px); z-index:90;
  background:var(--panel); border:1px solid var(--line-2); color:var(--ink); font-size:13.5px;
  padding:12px 20px; border-radius:12px; max-width:min(88vw,460px); text-align:center;
  box-shadow:0 20px 50px -26px #000; opacity:0; pointer-events:none; transition:.25s ease;}
.kiosk-toast.show{opacity:1; transform:translate(-50%,0);}

.cal-view{max-width:760px;}
.cal-camwrap{position:relative; width:100%; max-width:520px; aspect-ratio:4/3; border-radius:16px;
  overflow:hidden; background:#000; margin-top:18px; border:1px solid var(--line-2); flex:none;}
.cal-camwrap video{width:100%; height:100%; object-fit:cover; display:block;}
.cal-guide{position:absolute; inset:14%; border:2px dashed var(--accent-dim); border-radius:12px;
  pointer-events:none;}
.cal-payload{font-family:var(--font-mono); font-size:12.5px; color:var(--muted); margin-top:16px;
  word-break:break-all; background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; flex:none;}
.cal-tokens{display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; flex:none;}
.cal-token{font-family:var(--font-mono); font-size:12px; background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line-2); border-radius:10px; padding:8px 12px; cursor:pointer; display:flex;
  flex-direction:column; align-items:flex-start; gap:2px; transition:.14s;}
.cal-token:hover{border-color:var(--accent-dim);}
.cal-token .cal-token-role{font-size:9px; letter-spacing:.14em; color:var(--accent);}
.cal-token.is-name{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--panel-2));}
.cal-token.is-company{border-color:var(--blue); background:color-mix(in srgb,var(--blue) 14%,var(--panel-2));}
.cal-token.is-company .cal-token-role{color:var(--blue);}
.cal-actions{display:flex; gap:12px; margin-top:22px; flex:none;}

/* ── operator panel (operator.mjs — issue #3) ─────────────────────────────
   Rep-only chrome: long-press the resolve kick line. Mobile-first sheet;
   everything runs off tokens so it follows the active skin. */
#operator{position:fixed; inset:0; z-index:80;}
#operator[hidden]{display:none;}
.op-scrim{position:absolute; inset:0; background:rgba(0,0,0,.62);}
.op-sheet{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(480px, calc(100vw - 24px)); max-height:min(86vh, 720px); overflow-y:auto;
  background:var(--panel); border:1px solid var(--line-2); border-radius:18px;
  padding:18px 18px 22px; color:var(--ink);
}
.op-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px;}
.op-title{font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);}
.op-lbl{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); margin:16px 0 8px;}
.op-list{display:flex; flex-direction:column; gap:8px;}
.op-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:48px; padding:10px 14px; border-radius:12px; cursor:pointer;
  background:var(--panel-2); border:1.5px solid var(--line-2); color:var(--ink);
  font-family:var(--font-body); font-weight:600; font-size:14.5px; text-align:left;
}
.op-item.on{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--panel-2));}
.op-item.off{opacity:.45; cursor:default;}
.op-tag{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em; color:var(--muted);}
.op-item.on .op-tag{color:var(--accent);}
.op-info{display:flex; flex-direction:column; gap:6px; font-size:13px;}
.op-info div{display:flex; gap:10px; align-items:baseline;}
.op-info i{font-style:normal; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-2); width:64px; flex:none;}
.op-info b{color:var(--muted); font-weight:600; word-break:break-all;}
/* Front-camera preview is mirrored so aligning a badge feels natural (scan.mjs
   toggles this). Display only — captured frames stay unmirrored for OCR/QR. */
#scanner-video.mirrored{transform:scaleX(-1);}