/* Prospect Engine demo, v2: "Before the first call".
   Tokens follow tools/prospect-engine.html (navy, gold, paper) and
   growth-snapshot.html (Presence mark, buttons, Fraunces). Warm and calm:
   paper backgrounds, one serif voice, restrained motion. */
:root{
  --navy:#0a1628; --navy-2:#13233a; --navy-3:#24395b;
  --gold:#c9a961; --gold-bright:#e3c67f; --gold-deep:#8a6a22;
  --ink:#17202b; --ink-2:#2c3846; --ink-3:#56616d;
  --paper:#fbf8f1; --paper-2:#f4efe3; --paper-3:#ebe3d0;
  --rule:#dcd2bb; --rule-soft:#e9e2d0;
  --obs:#3f7a58; --obs-bg:#eaf3ec;
  --inf:#a0701c; --inf-bg:#fbf1dc;
  --unk:#5d6b7c; --unk-bg:#eef1f5;
  --shadow-sm:0 1px 2px rgba(10,22,40,.06);
  --shadow-md:0 6px 18px rgba(10,22,40,.08);
  --shadow-lg:0 24px 60px rgba(10,22,40,.18);
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --dock-h:76px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; overflow-x:hidden}
img{max-width:100%}
button,input{font:inherit; color:inherit}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; background:#fff; padding:8px 12px; z-index:80}
.skip:focus{left:8px}
[hidden]{display:none !important}
:focus-visible{outline:3px solid rgba(201,169,97,.7); outline-offset:3px}

/* ---------- header ---------- */
.top{position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 28px;
  background:rgba(10,22,40,.96); backdrop-filter:saturate(1.2) blur(6px); color:#fff}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.01em; font-size:15px}
.top-r{display:flex; align-items:center; gap:12px}
.fiction{font-size:12px; color:var(--gold-bright); letter-spacing:.04em; border-bottom:1px dotted rgba(227,198,127,.6); cursor:help}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:12px 22px;
  font-weight:600; font-size:15px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; line-height:1.2;
  transition:transform .2s var(--ease), box-shadow .2s, background .2s}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:var(--navy); color:#fff; box-shadow:0 6px 16px rgba(10,22,40,.18)}
.btn.primary:hover:not(:disabled){background:var(--navy-3); transform:translateY(-1px)}
.btn.gold{background:linear-gradient(135deg,#f6e3a8 0%, #d6b25b 55%, #b48a33 100%); border-color:#a98232; color:#1a1408}
.btn.quiet{background:#fff; border-color:var(--rule); color:var(--ink)}
.btn.quiet:hover:not(:disabled){border-color:var(--gold-deep)}
.btn.ghost{background:transparent; border-color:rgba(227,198,127,.55); color:#fff}
.btn.ghost:hover{background:rgba(227,198,127,.12)}
.btn.sm{padding:8px 15px; font-size:13.5px}
.linkbtn{background:none; border:0; padding:0; color:var(--navy-3); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-weight:600}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; flex:0 0 auto}
.dot.o{background:var(--obs)} .dot.i{background:var(--inf)} .dot.u{background:transparent; border:2px solid var(--unk)}

/* ================= Opening ================= */
.welcome{position:relative; overflow:hidden; color:#fff; padding:clamp(40px,7vw,88px) 28px clamp(48px,7vw,96px);
  background:radial-gradient(1000px 520px at 85% -10%, rgba(201,169,97,.22), transparent 60%),
             radial-gradient(700px 400px at -10% 110%, rgba(36,57,91,.9), transparent 70%),
             linear-gradient(180deg,#0d1b30 0%, var(--navy) 100%)}
.welcome-in{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center}
.kicker{font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-bright); font-weight:600; margin:0 0 16px}
.kicker.dark{color:var(--gold-deep)}
.welcome h1{font-family:var(--serif); font-weight:500; font-size:clamp(34px,5.4vw,60px); line-height:1.06; letter-spacing:-.015em; margin:0 0 20px}
.welcome h1 em{font-style:italic; color:var(--gold-bright)}
.lede{font-size:clamp(16.5px,1.6vw,19px); color:#d3d9e2; max-width:56ch; margin:0 0 22px}
.meta{list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; padding:0; margin:0 0 30px; color:#c7cfda; font-size:14px}
.meta li{display:flex; align-items:center; gap:8px}
.meta-i{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1px solid rgba(227,198,127,.5); color:var(--gold-bright); font-size:11px; font-weight:700}
.choose-head{margin:0 0 16px}
.choose-label{font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.6vw,30px); line-height:1.15; margin:0; color:#fff}
.choose-sub{margin:4px 0 0; font-size:14px; color:#aeb8c6}
.choose{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:680px}
.choice{position:relative; text-align:left; display:flex; flex-direction:column; gap:6px; min-height:250px; padding:24px 24px 22px; border-radius:20px; cursor:pointer; font:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s, filter .3s}
.choice.written{background:linear-gradient(165deg,#fffdf7 0%,#f3ead3 100%); color:var(--ink); border:1px solid rgba(227,198,127,.55); box-shadow:0 14px 34px rgba(0,0,0,.28)}
.choice.voice{background:radial-gradient(120% 90% at 100% 0%, rgba(227,198,127,.28), transparent 60%), linear-gradient(160deg,#2c3f5e 0%,#1a2a44 60%,#2a2414 120%); color:#fff; border:1px solid rgba(227,198,127,.6); box-shadow:0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08)}
.choice:hover,.choice:focus-visible{transform:translateY(-4px); filter:brightness(1.04); border-color:var(--gold-bright);
  box-shadow:0 0 0 1px var(--gold-bright), 0 22px 48px rgba(0,0,0,.4), 0 0 32px rgba(227,198,127,.22)}
.choice:focus-visible{outline:3px solid rgba(227,198,127,.9); outline-offset:4px}
.choice:active{transform:translateY(-1px)}
.choice-ico{display:flex; align-items:flex-end; gap:4px; height:26px; margin-bottom:10px}
.choice.written .choice-ico{flex-direction:column; align-items:flex-start; justify-content:center; gap:5px}
.choice.written .choice-ico i{display:block; height:3px; border-radius:2px; background:var(--gold-deep)}
.choice.written .choice-ico i:nth-child(1){width:30px} .choice.written .choice-ico i:nth-child(2){width:22px; opacity:.7} .choice.written .choice-ico i:nth-child(3){width:26px; opacity:.45}
.choice-ico.wave i{display:block; width:4px; border-radius:2px; background:var(--gold-bright); height:40%; transform-origin:bottom}
.choice-ico.wave i:nth-child(2){height:75%} .choice-ico.wave i:nth-child(3){height:100%} .choice-ico.wave i:nth-child(4){height:60%} .choice-ico.wave i:nth-child(5){height:35%}
.choice.voice:hover .choice-ico.wave i,.choice.voice:focus-visible .choice-ico.wave i{animation:wave 1.1s ease-in-out infinite}
.choice-ico.wave i:nth-child(2){animation-delay:-.2s!important} .choice-ico.wave i:nth-child(3){animation-delay:-.4s!important} .choice-ico.wave i:nth-child(4){animation-delay:-.6s!important} .choice-ico.wave i:nth-child(5){animation-delay:-.8s!important}
@keyframes wave{0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.45)}}
.choice-k{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600}
.choice.written .choice-k{color:var(--gold-deep)} .choice.voice .choice-k{color:var(--gold-bright)}
.choice-t{font-family:var(--serif); font-size:clamp(25px,2.4vw,30px); font-weight:500; line-height:1.1}
.choice-d{font-size:14.5px; line-height:1.5}
.choice.written .choice-d{color:var(--ink-2)} .choice.voice .choice-d{color:#cdd5e0}
.choice-go{margin-top:auto; padding-top:16px; display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px}
.choice-go .arr{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; font-size:14px; transition:transform .3s var(--ease), background .3s}
.choice.written .choice-go .arr{background:var(--navy); color:#fff}
.choice.voice .choice-go .arr{background:var(--gold); color:var(--navy); font-size:12px}
.choice:hover .choice-go .arr,.choice:focus-visible .choice-go .arr{transform:translateX(5px)}
.choice.voice:hover .choice-go .arr,.choice.voice:focus-visible .choice-go .arr{background:var(--gold-bright)}
.voice-hint{font-size:13px; color:#aeb8c6; margin:12px 0 0; max-width:680px}
.voice-hint:empty{display:none}
.skiplink{margin-top:20px; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border:1px solid rgba(227,198,127,.28); border-radius:999px; padding:9px 16px; color:#c9d0db; cursor:pointer; font-size:14px; transition:border-color .25s, background .25s}
.skiplink .sk-strong{color:var(--gold-bright); font-weight:600}
.skiplink:hover,.skiplink:focus-visible{border-color:var(--gold-bright); background:rgba(227,198,127,.08)}

.customize{margin-top:28px; max-width:640px; border-top:1px solid rgba(255,255,255,.14); padding-top:18px}
.customize summary{cursor:pointer; list-style:none; font-family:var(--serif); font-size:19px; color:#fff; display:flex; align-items:center; gap:10px}
.customize summary::-webkit-details-marker{display:none}
.customize summary::after{content:"+"; margin-left:auto; color:var(--gold-bright); font-family:Inter,sans-serif; font-size:20px; transition:transform .25s}
.customize[open] summary::after{transform:rotate(45deg)}
.spark{color:var(--gold-bright)}
.customize-in{display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:14px 22px; padding-top:14px; animation:rise .45s var(--ease) both}
.customize-in > p:first-child{grid-column:1 / -1; margin:0; color:#d0d7e1; font-size:14.5px}
.custom-form{display:flex; flex-direction:column; gap:10px}
.custom-form label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:#b9c3d0}
.custom-form input{padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:#fff}
.custom-form input:focus{outline:2px solid var(--gold); border-color:transparent}
.custom-form .btn{align-self:flex-start}
.cover-preview{align-self:start; border-radius:12px; background:var(--paper); color:var(--ink); padding:16px; box-shadow:0 18px 40px rgba(0,0,0,.35); transform:rotate(2deg)}
.cp-k{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; border-bottom:1px solid var(--rule); padding-bottom:8px; margin-bottom:12px}
.cp-for{font-size:11.5px; color:var(--ink-3)}
.cp-name{font-family:var(--serif); font-size:20px; line-height:1.2; word-break:break-word}
.honest{grid-column:1 / -1; margin:0; font-size:13px; color:#aeb8c6; line-height:1.55}
.honest strong{color:#e2e7ee}
.custom-done{grid-column:1 / -1; margin:0; color:var(--gold-bright); font-size:14px; font-weight:600}
.custom-done:empty{display:none}

/* decorative art */
.welcome-art{position:relative; height:420px}
.art-card,.art-snap{position:absolute; border-radius:14px; box-shadow:0 30px 70px rgba(0,0,0,.4)}
.art-card{left:0; top:30px; width:270px; padding:22px; background:#f8f3e6; color:var(--ink); transform:rotate(-7deg); animation:drift 12s ease-in-out infinite}
.art-card .bc-name{font-family:var(--serif); font-size:22px; margin-top:16px}
.art-card .bc-role{font-size:13px; color:var(--ink-3)}
.art-card .bc-co{font-size:13px; margin-top:10px; padding-top:10px; border-top:1px solid var(--rule); color:var(--ink-2)}
.art-arrow{position:absolute; left:150px; top:210px; width:120px; height:80px; border-bottom:1.5px dashed rgba(227,198,127,.6); border-right:1.5px dashed rgba(227,198,127,.6); border-bottom-right-radius:60px}
.art-snap{right:0; top:150px; width:300px; padding:18px 20px 22px; background:#fff; color:var(--ink); transform:rotate(3deg); animation:drift 12s ease-in-out -6s infinite}
.as-top{display:flex; justify-content:space-between; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; border-bottom:1px solid var(--rule); padding-bottom:8px}
.as-h{font-family:var(--serif); font-size:19px; line-height:1.22; margin:12px 0 12px}
.as-row{display:flex; align-items:center; gap:4px; margin-top:9px}
.as-row span{flex:1; height:8px; border-radius:4px; background:var(--paper-3)}
.as-row:nth-child(4) span{width:80%; flex:0 0 80%}
.as-row:nth-child(5) span{flex:0 0 62%}
@keyframes drift{0%,100%{translate:0 0} 50%{translate:0 -8px}}

.bc-logo{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:10px; background:linear-gradient(140deg,#1b6f8a,#0f4c62); color:#fff; font-family:var(--serif); font-size:22px; font-weight:600}
.bc-logo.sm{width:34px; height:34px; font-size:18px; border-radius:8px}

/* ================= Tour ================= */
body.in-tour .welcome{display:none}
section.tour{position:relative; min-height:calc(100vh - 56px); padding-bottom:calc(var(--dock-h) + 40px)}

/* chapter rail */
.tour-top{position:sticky; top:52px; z-index:20}
.rail{background:rgba(251,248,241,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--rule-soft); padding:12px 28px 0}
.rail-steps{list-style:none; margin:0 auto; padding:0; display:flex; gap:4px; max-width:1100px}
.rail-steps li{flex:1 1 0; min-width:0}
.rail-step{width:100%; display:flex; align-items:center; gap:9px; background:none; border:0; padding:6px 4px 12px; cursor:pointer; color:var(--ink-3); text-align:left; font-size:13.5px; font-weight:500}
.rail-step .n{flex:0 0 auto; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--rule); font-size:12px; font-weight:600; background:#fff; transition:all .3s}
.rail-step .l{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rail-step.done .n{background:var(--navy); border-color:var(--navy); color:#fff}
.rail-step.done .n::before{content:"\2713"}
.rail-step.done .n span{display:none}
.rail-step[aria-current="step"]{color:var(--ink); font-weight:600}
.rail-step[aria-current="step"] .n{border-color:var(--gold); background:var(--gold); color:var(--navy)}
.rail-step.star .n{border-style:dashed}
.rail-fill{max-width:1100px; margin:0 auto; height:2px; background:var(--rule-soft); position:relative}
.rail-fill span{position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); transition:width .6s var(--ease)}
.rail-side{max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0 10px; min-height:38px}
.key{display:flex; gap:16px; font-size:12.5px; color:var(--ink-3)}
.key span{display:flex; align-items:center}
.rail-skip{margin-left:auto; font-size:13px; color:var(--gold-deep)}

/* chapters */
.stage{max-width:1100px; margin:0 auto; padding:clamp(28px,4vw,56px) 28px 0}
.chapter{animation:chapterIn .7s var(--ease) both}
@keyframes chapterIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.ch-head{display:grid; grid-template-columns:1fr auto; align-items:end; gap:6px 18px; margin-bottom:clamp(24px,3vw,40px)}
.ch-eyebrow{grid-column:1 / -1; margin:0; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}
.ch-head h2{margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,44px); line-height:1.1; letter-spacing:-.01em; color:var(--navy); outline:none}
.askbtn{justify-self:end; display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--rule); border-radius:999px; padding:8px 14px 8px 10px; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer; white-space:nowrap; transition:border-color .2s, box-shadow .2s}
.askbtn::before{content:"?"; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--paper-3); color:var(--gold-deep); font-weight:700; font-size:12px}
.askbtn:hover{border-color:var(--gold-deep); box-shadow:var(--shadow-md)}

/* staged reveal: items rise in one after another when a chapter opens */
.chapter .rv{animation:rise .7s var(--ease) both; animation-delay:calc(var(--i,0) * 140ms + 180ms)}
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

/* speaking-tour highlight */
[data-hl]{transition:box-shadow .5s var(--ease), background-color .5s}
.is-hl{box-shadow:0 0 0 2px var(--gold), 0 0 0 8px rgba(201,169,97,.18) !important; border-radius:14px}

/* --- 1. the introduction --- */
.intro-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:center}
.bizcard{background:linear-gradient(160deg,#fffdf7,#f6efdd); border:1px solid var(--rule); border-radius:16px; padding:28px; box-shadow:var(--shadow-lg); transform:rotate(-1.5deg); max-width:440px}
.bc-top{display:flex; align-items:center; gap:12px}
.bc-brand{font-family:var(--serif); font-size:22px; line-height:1.1}
.bc-brand small{display:block; font-family:Inter,sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}
.bc-person{margin:34px 0 14px}
.bc-person strong{display:block; font-family:var(--serif); font-size:26px; font-weight:500}
.bc-person span{color:var(--ink-3); font-size:14px}
.bc-lines{display:flex; flex-wrap:wrap; gap:4px 16px; border-top:1px solid var(--rule); padding-top:12px; font-size:13.5px; color:var(--ink-2)}
.davidnote{margin:0; background:#fffaeb; border-radius:4px 16px 16px 16px; padding:24px 26px; position:relative; box-shadow:var(--shadow-md); border-left:3px solid var(--gold)}
.davidnote figcaption{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}
.davidnote blockquote{margin:10px 0 12px; font-family:var(--serif); font-style:italic; font-size:clamp(19px,2vw,23px); line-height:1.4; color:var(--ink)}
.nt{font-size:12.5px; color:var(--ink-3)}
.known{margin-top:40px; padding:26px 0 0; border-top:1px solid var(--rule-soft); display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px}
.known-lead{margin:0; font-family:var(--serif); font-size:21px}
.known-list{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.known-list li{background:#fff; border:1px solid var(--rule); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:500}
.known-tail{flex-basis:100%; margin:4px 0 0; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--gold-deep)}
.aside{margin:22px 0 0; font-size:14px; color:var(--ink-3); max-width:62ch}

/* --- 2. the evidence --- */
.sources{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 26px}
.sources li{position:relative; padding:7px 14px 7px 32px; background:#fff; border:1px solid var(--rule); border-radius:999px; font-size:13.5px; color:var(--ink-2)}
.sources li::before{content:"\2713"; position:absolute; left:12px; top:50%; transform:translateY(-50%) scale(0); color:var(--obs); font-weight:700; animation:tick .4s var(--ease) forwards}
.sources li:nth-child(1)::before{animation-delay:.6s}.sources li:nth-child(2)::before{animation-delay:.8s}.sources li:nth-child(3)::before{animation-delay:1s}
.sources li:nth-child(4)::before{animation-delay:1.2s}.sources li:nth-child(5)::before{animation-delay:1.4s}.sources li:nth-child(6)::before{animation-delay:1.6s}
@keyframes tick{to{transform:translateY(-50%) scale(1)}}
.legend{background:var(--navy); color:#fff; border-radius:18px; padding:22px 26px; margin-bottom:28px}
.legend-t{margin:0 0 14px; font-family:var(--serif); font-size:20px}
.legend dl{margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.legend dt{font-weight:600; display:flex; align-items:center; margin-bottom:4px}
.legend dd{margin:0; font-size:14px; color:#c8d0db}
.legend .dot.o{background:#7fc39b} .legend .dot.i{background:#e7b75a} .legend .dot.u{border-color:#a9b6c6}
.findings{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.finding{display:grid; grid-template-columns:150px minmax(0,1fr); gap:4px 22px; background:#fff; border:1px solid var(--rule-soft); border-left:4px solid var(--obs); border-radius:12px; padding:18px 22px}
.finding.i{border-left-color:var(--inf); background:linear-gradient(90deg,var(--inf-bg),#fff 40%)}
.finding.u{border-left-color:var(--unk); border-left-style:dashed; background:linear-gradient(90deg,var(--unk-bg),#fff 40%)}
.f-tag{grid-row:1 / span 2; font-size:13px; font-weight:600; color:var(--obs); display:flex; align-items:flex-start; flex-wrap:wrap; padding-top:3px}
.f-tag .dot{margin-top:5px}
.finding.i .f-tag{color:var(--inf)} .finding.u .f-tag{color:var(--unk)}
.f-tag em{font-style:normal; font-weight:500; color:var(--ink-3); flex-basis:100%; padding-left:16px; font-size:12.5px}
.finding p{margin:0; font-size:16.5px; color:var(--ink)}
.f-src{font-size:13px; color:var(--ink-3)}

/* --- 3. the opportunity --- */
.judgment{font-family:var(--serif); font-size:clamp(20px,2.4vw,27px); line-height:1.35; margin:0 0 28px; max-width:30ch; color:var(--ink-2)}
.judgment strong{font-weight:600; color:var(--navy); background:linear-gradient(transparent 62%, rgba(201,169,97,.35) 62%)}
.lenses{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; border-radius:18px}
.lens{background:#fff; border:1px solid var(--rule-soft); border-radius:16px; padding:22px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.lens.lens-top{background:linear-gradient(160deg,#fff 40%,#fbf3de); border-color:#e2cd96; box-shadow:var(--shadow-md)}
.lens.lens-ask{background:var(--paper-2); border-style:dashed}
.lens-k{margin:0 0 6px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.rank{letter-spacing:.02em; text-transform:none; font-size:12px; padding:2px 9px; border-radius:999px; background:var(--navy); color:#fff}
.rank.q{background:var(--unk-bg); color:var(--unk)}
.lens h3{margin:0 0 6px; font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.2; color:var(--navy)}
.lens p{margin:0 0 12px; font-size:15px; color:var(--ink-2)}
.meter{display:flex; align-items:center; gap:4px; margin-top:auto; font-size:12.5px; color:var(--ink-3)}
.meter i{width:22px; height:6px; border-radius:3px; background:var(--paper-3)}
.meter i.on{background:var(--gold-deep)}
.meter span{margin-left:8px}
.fit{margin:10px 0 0 !important; font-size:13.5px !important; color:var(--navy-3) !important; font-weight:600}
.held{margin-top:18px; border:1.5px dashed var(--rule); border-radius:14px; padding:16px 22px; color:var(--ink-3)}
.held-k{margin:0 0 4px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.held p{margin:0; font-size:15px}
.held s{color:var(--ink-2)}

/* --- 4. the first conversation --- */
.talk{list-style:none; margin:0; padding:0; counter-reset:t; position:relative}
.talk::before{content:""; position:absolute; left:17px; top:12px; bottom:12px; width:2px; background:linear-gradient(var(--gold),var(--rule-soft))}
.talk li{position:relative; padding:0 0 30px 58px; counter-increment:t}
.talk li::before{content:counter(t); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; background:#fff; border:2px solid var(--gold); display:grid; place-items:center; font-family:var(--serif); font-size:17px; color:var(--navy)}
.talk-k{display:block; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; padding-top:7px}
.say{margin:8px 0 6px; font-family:var(--serif); font-size:clamp(19px,2.1vw,24px); line-height:1.38; color:var(--ink)}
.why{margin:0; font-size:14.5px; color:var(--ink-3)}
.leave{margin:12px 0 0; font-size:14.5px; color:var(--ink-2); background:var(--paper-2); display:inline-block; padding:8px 14px; border-radius:10px}
.leave span{font-weight:600}
.draft{background:#fff; border:1px solid var(--rule); border-radius:16px; padding:22px 26px; box-shadow:var(--shadow-md); max-width:720px}
.draft-h{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; border-bottom:1px solid var(--rule-soft); padding-bottom:10px; margin-bottom:12px}
.draft-s{color:var(--gold-deep)}
.draft p{margin:0 0 8px; font-size:16px; line-height:1.65}
.draft-anchor{margin-top:12px !important; font-size:13px !important; color:var(--ink-3)}

/* --- 5. the Growth Snapshot: the payoff --- */
.chapter.reveal{position:relative}
.chapter.reveal::before{content:""; position:absolute; z-index:-1; left:50%; width:100vw; transform:translateX(-50%); top:calc(-1 * clamp(28px,4vw,56px)); height:min(980px, 120%);
  background:radial-gradient(800px 480px at 50% 28%, rgba(201,169,97,.25), transparent 65%), linear-gradient(180deg,#0d1b30, var(--navy) 70%, var(--paper))}
.ch-head.on-dark h2{color:#fff}
.ch-head.on-dark .ch-eyebrow{color:var(--gold-bright)}
.ch-head.on-dark .askbtn{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff}
.ch-head.on-dark .askbtn::before{background:rgba(227,198,127,.2); color:var(--gold-bright)}
.unveil{position:relative; display:flex; flex-direction:column; align-items:center}
.unveil-line{margin:0 0 22px; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--gold-bright); animation:fadeUp 1s var(--ease) .2s both}
.snapdoc{width:100%; max-width:780px; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  animation:unveil 1.3s var(--ease) .6s both; transform-origin:50% 0}
@keyframes unveil{0%{opacity:0; transform:translateY(60px) scale(.94) rotateX(8deg); filter:blur(6px)} 60%{filter:blur(0)} 100%{opacity:1; transform:none}}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.sd-band{display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; padding:14px 28px; background:var(--navy); color:#fff; font-size:13px}
.sd-brand{display:flex; align-items:center; gap:8px; font-weight:600}
.sd-priv{color:var(--gold-bright)}
.sd-hero{padding:30px 34px 10px; background:linear-gradient(180deg,#fbf6e8,#fff)}
.sd-for{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-2)}
.sd-for small{color:var(--ink-3)}
.sd-hero h3{font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.4vw,38px); line-height:1.12; color:var(--navy); margin:20px 0 10px; letter-spacing:-.01em}
.sd-intro{margin:0; color:var(--ink-2); font-size:16px; max-width:58ch}
.sd-opps{list-style:none; margin:0; padding:10px 34px 6px}
.sd-opps li{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--rule-soft); opacity:0; animation:fadeUp .7s var(--ease) both}
.sd-opps li:nth-child(1){animation-delay:1.5s} .sd-opps li:nth-child(2){animation-delay:1.7s} .sd-opps li:nth-child(3){animation-delay:1.9s}
.sd-n{flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--paper-2); border:1px solid #e2cd96; display:grid; place-items:center; font-family:var(--serif); color:var(--gold-deep); font-size:17px}
.sd-opps strong{display:block; font-family:var(--serif); font-weight:500; font-size:20px; color:var(--ink); line-height:1.25}
.sd-opps p{margin:4px 0 6px; font-size:15px; color:var(--ink-2)}
.sd-src{font-size:12.5px; color:var(--obs); display:flex; align-items:center}
.sd-unknown{margin:18px 34px 0; padding:16px 20px; border-radius:12px; background:var(--unk-bg)}
.sd-uk{margin:0 0 4px !important; font-weight:600; color:var(--unk) !important; display:flex; align-items:center}
.sd-unknown p{margin:0; font-size:15px; color:var(--ink-2)}
.sd-presence{display:flex; gap:16px; align-items:center; margin:18px 34px 0; padding:16px 20px; border-radius:14px; background:linear-gradient(135deg,#101820,#1d2a3a); color:#fff}
.sd-presence p{margin:0; font-family:var(--serif); font-size:17px}
.sd-presence small{display:block; font-family:Inter,sans-serif; font-size:12.5px; color:#aeb8c6; margin-top:4px}
.mini-orb{flex:0 0 auto; width:46px; height:24px; border-radius:44% 44% 40% 40%/52% 52% 48% 48%; background:linear-gradient(178deg,#2e343c,#06080a); box-shadow:inset 0 -6px 0 -4px rgba(255,220,160,.85), 0 6px 14px rgba(0,0,0,.5)}
.sd-foot{margin:22px 0 0; padding:14px 34px 18px; font-size:12.5px; color:var(--ink-3); border-top:1px solid var(--rule-soft); background:var(--paper)}

.paths{max-width:860px; margin:64px auto 0; text-align:center}
.paths-k{margin:0; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}
.paths-h{font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.4vw,36px); line-height:1.15; color:var(--navy); margin:8px 0 8px}
.paths-sub{margin:0 0 26px; color:var(--ink-3)}
.path-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left}
.path{position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left; font:inherit; gap:6px; padding:24px 26px; border-radius:18px; background:#fff; border:1px solid var(--rule); cursor:pointer; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s, border-color .25s}
.path:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--gold-deep)}
.path.gold{background:linear-gradient(150deg,#fff8e4,#f3e2b5); border-color:#dcc07a}
.path img{width:44px; height:44px; border-radius:50%; object-fit:cover; margin-bottom:4px}
.path-t{font-family:var(--serif); font-size:21px; line-height:1.2; color:var(--navy)}
.path-d{font-size:14.5px; color:var(--ink-2)}
.replay-all{margin-top:22px; font-size:14px; color:var(--ink-3)}

/* ================= Dock ================= */
.dock{position:fixed; z-index:25; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(1060px, calc(100% - 32px));
  background:rgba(255,255,255,.97); border:1px solid var(--rule); border-radius:20px; box-shadow:0 18px 50px rgba(10,22,40,.18); backdrop-filter:blur(8px)}
.dock-written{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px}
.mode-switch{background:none; border:0; color:var(--ink-3); font-size:13.5px; font-weight:600; cursor:pointer; padding:8px 10px; border-radius:10px; display:inline-flex; align-items:center; gap:6px}
.mode-switch:hover{background:var(--paper-2); color:var(--ink)}

/* ================= Ask panel ================= */
.askpanel{position:fixed; z-index:40; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--paper); border-left:1px solid var(--rule); box-shadow:-20px 0 60px rgba(10,22,40,.18);
  display:flex; flex-direction:column; animation:slideIn .35s var(--ease) both}
@keyframes slideIn{from{transform:translateX(30px); opacity:0} to{transform:none; opacity:1}}
.scrim{position:fixed; inset:0; z-index:35; background:rgba(10,22,40,.28)}
.ap-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:22px 22px 14px; border-bottom:1px solid var(--rule-soft)}
.ap-k{margin:0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}
.ap-head h2{margin:2px 0 0; font-family:var(--serif); font-weight:500; font-size:24px; color:var(--navy)}
.x{background:none; border:0; font-size:28px; line-height:1; cursor:pointer; color:var(--ink-3); padding:2px 6px}
.resume{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 22px 0; padding:10px 12px 10px 16px; border-radius:12px; background:#fdf3d9; border:1px solid #e6cf91; font-size:14px}
.ap-log{flex:1 1 auto; overflow-y:auto; padding:16px 22px; display:flex; flex-direction:column; gap:10px}
.tx-empty{margin:0; color:var(--ink-3); font-size:14.5px}
.tx{border-radius:14px; padding:11px 14px; font-size:15px; line-height:1.55}
.tx p{margin:0}
.tx p + p{margin-top:6px}
.tx-k{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; margin-bottom:4px}
.tx.tour{background:transparent; border:1px dashed var(--rule); color:var(--ink-2)}
.tx.tour .tx-k{color:var(--ink-3)}
.tx.tour p.speaking{color:var(--ink); font-weight:500}
.tx.q{background:var(--navy); color:#fff; align-self:flex-end; max-width:88%; border-bottom-right-radius:4px}
.tx.q .tx-k{color:var(--gold-bright)}
.tx.a{background:#fff; border:1px solid var(--rule); border-bottom-left-radius:4px}
.tx.a .tx-k{color:var(--gold-deep)}
.tx.a.speaking{border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,97,.2)}
.tx.a.err{border-color:#e2b4b4; background:#fff6f6}
.ans.thinking{color:var(--ink-3)}
.ans.thinking::after{content:""; display:inline-block; width:7px; height:7px; margin-left:8px; border-radius:50%; background:var(--gold); animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25} 50%{opacity:1}}
.tx-note{font-size:12.5px; color:var(--navy-3); margin-top:6px; font-weight:600}
.tx-mock{font-size:11.5px; color:var(--inf); margin-top:6px; font-weight:600}
.arow{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.ap-foot{border-top:1px solid var(--rule-soft); padding:12px 22px calc(14px + env(safe-area-inset-bottom)); background:#fff}
.chips{display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:0 0 10px}
.chips:empty{display:none}
.chip{border:1px solid var(--rule); background:var(--paper); border-radius:12px; padding:7px 12px; font-size:14px; cursor:pointer; color:var(--ink); text-align:left; transition:border-color .2s, background .2s}
.chip:hover{border-color:var(--gold-deep); background:#fff}
.ask{display:flex; gap:6px; align-items:center; border:1px solid var(--rule); background:#fff; border-radius:14px; padding:4px 4px 4px 12px}
.ask:focus-within{border-color:var(--gold-deep)}
.ask input{flex:1 1 auto; min-width:0; border:0; outline:0; padding:8px 2px; font-size:15px; background:transparent}
.btn.speak{gap:5px; padding:8px 11px}
.recbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; padding:8px 10px; border-radius:12px; background:#fdf1d8; border:1px solid var(--gold-deep)}
.recbar strong{font-size:14px; color:var(--navy)}
.rec-dot{width:10px; height:10px; border-radius:50%; background:#c0392b; animation:recpulse 1.2s ease-out infinite}
.recbar.busy .rec-dot{background:var(--gold); animation:none}
@keyframes recpulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.5)} 70%{box-shadow:0 0 0 8px rgba(192,57,43,0)} 100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}}
.vstatus{font-size:13px; color:var(--ink-2); margin-top:6px}
.vstatus:empty{display:none}
.vstatus.err{color:#a04545}
.fine{font-size:12px; color:var(--ink-3); margin:6px 0 0}
.fine:empty{display:none}

.toast{position:fixed; z-index:60; left:50%; bottom:calc(var(--dock-h) + 34px); transform:translateX(-50%); background:var(--navy); color:#fff; padding:10px 16px; border-radius:12px; font-size:14px; box-shadow:var(--shadow-lg); max-width:calc(100% - 32px)}

/* ================= Dialog ================= */
.modal{border:0; padding:0; border-radius:20px; max-width:600px; width:calc(100% - 32px); box-shadow:var(--shadow-lg); background:var(--paper); color:var(--ink)}
.modal::backdrop{background:rgba(10,22,40,.5); backdrop-filter:blur(2px)}
.modal-in{position:relative; padding:30px 30px 24px}
.modal .x{position:absolute; right:14px; top:12px}
.modal h2{font-family:var(--serif); font-weight:500; font-size:28px; line-height:1.15; color:var(--navy); margin:0 0 10px}
.modal-in > div > p{color:var(--ink-2); font-size:15px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-top:16px}
.grid2 label{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--ink-2)}
.grid2 input{padding:11px 12px; border:1px solid var(--rule); border-radius:10px; background:#fff; font-weight:400}
.grid2 input:focus{outline:2px solid var(--gold); border-color:transparent}
.opt-l{font-weight:400; color:var(--ink-3)}
.hp{position:absolute; left:-9999px}
.promises{list-style:none; padding:0; margin:16px 0 10px; display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--ink-2)}
.promises li::before{content:"\2713"; color:var(--obs); font-weight:700; margin-right:8px}
.consent{display:flex; gap:8px; align-items:flex-start; font-size:13.5px; color:var(--ink-2)}
.ferr{color:#a04545; font-size:14px; margin-top:8px}
.ferr:empty{display:none}
.mock-mail{margin-top:14px; border:1px dashed #d9b46a; background:#fff8e6; border-radius:12px; padding:12px 14px}
.mm-k{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--inf)}
.mock-mail pre{white-space:pre-wrap; font-size:12.5px; max-height:220px; overflow:auto; margin:8px 0 0}

.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:1100px; margin:0 auto; padding:24px 28px 40px; font-size:12.5px; color:var(--ink-3)}
body.in-tour .foot{padding-bottom:calc(var(--dock-h) + 48px)}
.foot a{color:var(--ink-3)}

/* ================= Responsive ================= */
@media (max-width:960px){
  .welcome-in{grid-template-columns:1fr}
  .welcome-art{display:none}
}
@media (max-width:760px){
  :root{--dock-h:118px}
  .top{padding:10px 16px}
  .fiction{display:none}
  .welcome{padding:36px 16px 48px}
  .choose{grid-template-columns:1fr}
  .customize-in{grid-template-columns:1fr}
  .cover-preview{max-width:230px}
  .rail{padding:8px 16px 0}
  .tour-top{top:50px}
  .rail-step{flex-direction:column; align-items:center; gap:4px; padding-bottom:8px}
  .rail-step .l{display:none}
  .rail-step[aria-current="step"] .l{display:none}
  .rail-side{padding:6px 0 8px}
  .key{gap:10px; font-size:11.5px}
  .stage{padding:26px 16px 0}
  .ch-head{grid-template-columns:1fr}
  .askbtn{justify-self:start; margin-top:8px}
  .intro-grid{grid-template-columns:1fr; gap:22px}
  .bizcard{transform:none}
  .legend dl{grid-template-columns:1fr; gap:12px}
  .finding{grid-template-columns:1fr; padding:16px 18px}
  .f-tag{grid-row:auto}
  .lenses{grid-template-columns:1fr}
  .talk li{padding-left:50px}
  .sd-hero,.sd-opps{padding-left:20px; padding-right:20px}
  .sd-band,.sd-foot{padding-left:20px; padding-right:20px}
  .sd-unknown,.sd-presence{margin-left:20px; margin-right:20px}
  .path-cards{grid-template-columns:1fr}
  .dock{width:calc(100% - 20px); bottom:max(10px, env(safe-area-inset-bottom)); border-radius:18px}
  .dock-written .mode-switch{font-size:12.5px; padding:6px}
  .askpanel{top:auto; height:min(82vh,640px); width:100%; border-left:0; border-top:1px solid var(--rule); border-radius:20px 20px 0 0; animation-name:sheetUp}
  @keyframes sheetUp{from{transform:translateY(40px); opacity:0} to{transform:none; opacity:1}}
  .grid2{grid-template-columns:1fr}
  .modal-in{padding:24px 18px 18px}
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .sd-opps li{opacity:1}
}
.dock-written .btn,.mode-switch{white-space:nowrap}
.paths{scroll-margin-top:150px}
@media (max-width:760px){ .choice{min-height:0; padding:20px 20px 18px} .skiplink{border-radius:16px; text-align:left} }

/* ================= Speaking tour: start + Tour Controls ================= */
.btn.big{padding:16px 28px; font-size:17px}
body.mode-voice .dock{display:none}
body.mode-voice section.tour{padding-bottom:48px}
body.mode-voice .foot{padding-bottom:40px}
.tourbar{background:var(--navy); color:#fff; border-bottom:1px solid rgba(227,198,127,.35); box-shadow:0 10px 30px rgba(10,22,40,.22)}
.tb-in{max-width:1100px; margin:0 auto; padding:12px 28px 12px; display:flex; flex-direction:column; gap:10px}
.tb-now{display:flex; align-items:flex-start; gap:14px; min-width:0}
.tb-text{min-width:0; flex:1}
.tb-status{margin:0; font-size:13px; font-weight:600; color:#fff; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px}
.tb-k{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); margin-right:4px}
#phase{color:var(--gold-bright)}
.audio-state{margin-left:8px; font-size:12px; font-weight:500; color:#c9d0db; border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:1px 9px}
.audio-state.off{color:#f1d9a3; border-color:rgba(227,198,127,.5)}
.tourbar .caption{margin:4px 0 0; font-family:var(--serif); font-size:17px; line-height:1.4; color:#eef1f5; max-width:80ch}
.wave-ind{flex:0 0 auto; display:flex; align-items:flex-end; gap:3px; width:30px; height:26px; margin-top:4px}
.wave-ind i{display:block; width:4px; height:30%; border-radius:2px; background:var(--gold); opacity:.55; transform-origin:bottom; transition:height .3s, opacity .3s}
.wave-ind[data-state="speaking"] i{opacity:1}
.wave-ind[data-state="speaking"] i:nth-child(1){height:45%} .wave-ind[data-state="speaking"] i:nth-child(2){height:85%} .wave-ind[data-state="speaking"] i:nth-child(3){height:100%} .wave-ind[data-state="speaking"] i:nth-child(4){height:70%} .wave-ind[data-state="speaking"] i:nth-child(5){height:40%}
.wave-ind[data-state="speaking"] i{animation:wave 1.2s ease-in-out infinite}
.wave-ind[data-state="speaking"] i:nth-child(2){animation-delay:-.25s} .wave-ind[data-state="speaking"] i:nth-child(3){animation-delay:-.5s} .wave-ind[data-state="speaking"] i:nth-child(4){animation-delay:-.75s} .wave-ind[data-state="speaking"] i:nth-child(5){animation-delay:-1s}
.wave-ind[data-state="thinking"] i,.wave-ind[data-state="listening"] i{opacity:.9; animation:pulse 1.2s ease-in-out infinite}
.tb-ctrl{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.tc{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#fff; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .2s, border-color .2s}
.tc:hover:not(:disabled){background:rgba(255,255,255,.12); border-color:rgba(227,198,127,.7)}
.tc:disabled{opacity:.35; cursor:not-allowed}
.tc:focus-visible{outline:3px solid rgba(227,198,127,.8); outline-offset:2px}
.tc.main{height:44px; padding:0 20px; background:var(--gold); border-color:var(--gold); color:var(--navy); font-size:14.5px}
.tc.main:hover:not(:disabled){background:var(--gold-bright); border-color:var(--gold-bright)}
.tc.sound[aria-pressed="true"]{background:rgba(227,198,127,.16); border-color:rgba(227,198,127,.7); color:#f6e3a8}
.tc-gap{flex:1}
.tc.more{display:none}
.tb-notice{max-width:1100px; margin:0 auto; padding:0 28px 12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; color:#f6e3a8}
.tb-notice[hidden]{display:none !important}

.vstart{position:fixed; inset:0; z-index:45; display:grid; place-items:center; padding:20px; background:rgba(10,22,40,.55); backdrop-filter:blur(3px); animation:fadeUp .35s var(--ease) both}
.vs-card{width:min(520px,100%); background:linear-gradient(165deg,#13233a,#0a1628); color:#fff; border:1px solid rgba(227,198,127,.45); border-radius:24px; padding:34px 32px 28px; text-align:center; box-shadow:0 40px 90px rgba(0,0,0,.45)}
.vs-wave{display:inline-flex; align-items:center; gap:4px; height:34px; margin-bottom:10px}
.vs-wave i{display:block; width:4px; border-radius:2px; background:var(--gold-bright); height:30%; animation:wave 1.4s ease-in-out infinite}
.vs-wave i:nth-child(2){height:60%; animation-delay:-.2s} .vs-wave i:nth-child(3){height:90%; animation-delay:-.4s} .vs-wave i:nth-child(4){height:100%; animation-delay:-.6s} .vs-wave i:nth-child(5){height:80%; animation-delay:-.8s} .vs-wave i:nth-child(6){height:55%; animation-delay:-1s} .vs-wave i:nth-child(7){height:30%; animation-delay:-1.2s}
.vs-k{margin:0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); font-weight:600}
.vs-card h2{font-family:var(--serif); font-weight:500; font-size:clamp(26px,4vw,32px); margin:8px 0 20px}
.vs-card .btn{gap:10px}
.vs-line{margin:18px auto 0; max-width:40ch; color:#d3d9e2; font-size:15px}
.vs-note{margin:10px auto 0; max-width:44ch; color:#aeb8c6; font-size:13px}
.vs-note:empty{display:none}
.vs-read{margin-top:16px; color:var(--gold-bright); font-size:14px}

@media (max-width:760px){
  .tb-in{padding:10px 16px}
  .tourbar .caption{font-size:15px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .tb-k{display:none}
  .audio-state{margin-left:0}
  .tb-ctrl{gap:8px 6px; justify-content:center}
  .tc{padding:0 11px; height:38px}
  .tc.main{height:48px; padding:0 22px; order:2}
  #prevBtn{order:1} #nextBtn{order:3}
  .tb-ctrl::before{content:""; order:4; flex-basis:100%; height:0}
  .tc.sound{order:5; flex:1 1 40%; justify-content:center}
  .tc.more{display:inline-flex; order:6; flex:1 1 40%; justify-content:center}
  .tc.opt,.tc-gap{display:none; order:7}
  .tourbar.show-more .tc.opt{display:inline-flex; flex:1 1 30%; justify-content:center}
  #prevBtn .tc-l,#nextBtn .tc-l,.tc.more .tc-l,.tc.sound .tc-l{font-size:12.5px}
  .tb-notice{padding:0 16px 10px; font-size:13.5px}
  .vs-card{padding:28px 20px 22px}
}
@media (max-width:350px){
  #prevBtn,#nextBtn{position:relative}
  #prevBtn .tc-l,#nextBtn .tc-l{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
}
.tc.mobile-only{display:none}
@media (max-width:760px){
  body.mode-voice .rail{padding:0}
  body.mode-voice .rail-steps{display:none}
  body.mode-voice .rail-side{display:flex; min-height:0; padding:3px 16px 1px; background:var(--navy)}
  body.mode-voice .rail-side .key,body.mode-voice .rail-skip{display:none}
  body.mode-voice .rail-fiction{color:rgba(232,236,242,.62); border-bottom-color:rgba(227,198,127,.45)}
  body.mode-voice .rail-fill{height:3px}
  .tourbar.show-more .tc.mobile-only{display:inline-flex}
}

/* ================= Opening: business card to conversation ================= */
.prelude{animation:chapterIn .6s var(--ease) both}
.pl-head{margin-bottom:clamp(20px,3vw,34px)}
.pl-head h2{margin:6px 0 0; font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,44px); line-height:1.1; color:var(--navy); outline:none}
.pl-stage{display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1.05fr); align-items:center; gap:0}
.pl-cardwrap{display:flex; flex-direction:column; align-items:center; gap:18px}
.pl-card{position:relative; overflow:hidden; width:100%; max-width:420px; transform:rotate(-4deg) translateY(10px); opacity:0; transition:transform .9s var(--ease), opacity .7s, box-shadow .6s}
.prelude[data-stage]:not([data-stage="0"]) .pl-card{opacity:1; transform:rotate(-2deg)}
.prelude[data-stage="2"] .pl-card,.prelude[data-stage="3"] .pl-card,.prelude[data-stage="4"] .pl-card{transform:rotate(0deg) scale(.97); box-shadow:0 0 0 1px rgba(201,169,97,.5), var(--shadow-lg)}
.pl-sweep{position:absolute; inset:-20% auto -20% -40%; width:35%; background:linear-gradient(90deg, transparent, rgba(255,236,190,.75), transparent); transform:skewX(-14deg); opacity:0; pointer-events:none}
.prelude[data-stage="2"] .pl-sweep{animation:sweep 1.2s var(--ease) both}
@keyframes sweep{0%{left:-40%; opacity:0} 15%{opacity:1} 100%{left:110%; opacity:0}}
.pl-frame i{position:absolute; width:22px; height:22px; border-color:var(--gold-deep); border-style:solid; opacity:0; transition:opacity .4s, transform .5s var(--ease)}
.pl-frame i:nth-child(1){left:10px; top:10px; border-width:2px 0 0 2px; transform:translate(-6px,-6px)}
.pl-frame i:nth-child(2){right:10px; top:10px; border-width:2px 2px 0 0; transform:translate(6px,-6px)}
.pl-frame i:nth-child(3){left:10px; bottom:10px; border-width:0 0 2px 2px; transform:translate(-6px,6px)}
.pl-frame i:nth-child(4){right:10px; bottom:10px; border-width:0 2px 2px 0; transform:translate(6px,6px)}
.prelude[data-stage="2"] .pl-frame i,.prelude[data-stage="3"] .pl-frame i,.prelude[data-stage="4"] .pl-frame i{opacity:1; transform:none}
.pl-capture{transition:opacity .3s}
.prelude:not([data-stage="1"]) .pl-capture,body.mode-voice .pl-capture{visibility:hidden; opacity:0}
.pl-link{height:2px; position:relative}
.pl-link span{position:absolute; left:8px; right:8px; top:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
.prelude[data-stage="3"] .pl-link span,.prelude[data-stage="4"] .pl-link span{transform:scaleX(1)}
.pl-profile{background:#fff; border:1px solid var(--rule); border-radius:18px; box-shadow:var(--shadow-md); padding:18px 20px; opacity:.25; filter:saturate(.3); transition:opacity .6s, filter .6s, transform .6s var(--ease); transform:translateX(10px)}
.prelude[data-stage="3"] .pl-profile,.prelude[data-stage="4"] .pl-profile{opacity:1; filter:none; transform:none}
.pp-h{display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600; border-bottom:1px solid var(--rule-soft); padding-bottom:10px; margin-bottom:6px}
.pp-s{color:var(--gold-deep)}
.pp-rows{list-style:none; margin:0; padding:0}
.pp-rows li{display:grid; grid-template-columns:118px minmax(0,1fr); gap:0 12px; padding:8px 0; border-bottom:1px solid var(--rule-soft); opacity:0; transform:translateY(6px); transition:opacity .45s, transform .45s var(--ease); transition-delay:calc(var(--i) * 160ms)}
.pp-rows li:last-child{border-bottom:0}
.prelude[data-stage="3"] .pp-rows li,.prelude[data-stage="4"] .pp-rows li{opacity:1; transform:none}
.pp-k{grid-row:1 / span 2; font-size:12.5px; color:var(--ink-3); padding-top:2px}
.pp-v{font-size:15px; font-weight:600; color:var(--ink)}
.pp-un{color:var(--unk); font-weight:500; font-style:italic}
.pp-t{font-size:12.5px; display:flex; align-items:center; color:var(--obs)}
.pp-t .dot{width:7px; height:7px; margin-right:6px}
.pp-t.u{color:var(--unk)} .pp-t.n{color:var(--gold-deep)}
.pl-cap{margin:10px 0 0; max-width:62ch; font-family:var(--serif); font-style:italic; font-size:clamp(18px,1.9vw,21px); color:var(--gold-deep); min-height:2.9em}
.pl-end{max-height:0; overflow:hidden; opacity:0; transition:opacity .7s var(--ease), max-height .8s var(--ease); text-align:center}
.prelude[data-stage="4"] .pl-end{max-height:900px; opacity:1}

.pl-quote{margin:26px auto 0; max-width:54ch; font-family:var(--serif); font-size:clamp(20px,2.3vw,26px); line-height:1.38; color:var(--navy)}
.pl-method{list-style:none; counter-reset:m; padding:0; margin:24px auto 0; max-width:960px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; text-align:left}
.pl-method li{counter-increment:m; background:#fff; border:1px solid var(--rule-soft); border-radius:14px; padding:12px 14px; font-size:13.5px; color:var(--ink-2); line-height:1.45}
.pl-method li::before{content:counter(m); display:block; font-family:var(--serif); color:var(--gold-deep); font-size:17px; margin-bottom:4px}
.pl-method strong{color:var(--ink)}
.pl-promise{margin:24px auto 0; max-width:52ch; font-size:15.5px; color:var(--ink-2)}
#plBegin{margin-top:18px}
@media (max-width:760px){
  .pl-stage{grid-template-columns:1fr; gap:16px}
  .pl-link{height:24px; width:2px; justify-self:center}
  .pl-link span{left:0; right:auto; top:0; bottom:0; width:2px; height:auto; transform:scaleY(0); transform-origin:top}
  .prelude[data-stage="3"] .pl-link span,.prelude[data-stage="4"] .pl-link span{transform:scaleY(1)}
  .pl-card{max-width:340px}
  .pp-rows li{grid-template-columns:96px minmax(0,1fr)}
  .pl-method{grid-template-columns:1fr; gap:8px}
  .pl-method li{display:flex; gap:10px; align-items:baseline}
  .pl-method li::before{display:inline; margin:0}
  #plBegin{white-space:normal}
}
.pp-wait{margin:18px 0; font-size:14px; color:var(--ink-3); font-style:italic}
.prelude[data-stage="3"] .pp-wait,.prelude[data-stage="4"] .pp-wait{display:none}
.prelude[data-stage="0"] .pp-rows,.prelude[data-stage="1"] .pp-rows,.prelude[data-stage="2"] .pp-rows{display:none}
.pl-profile{opacity:.6}
.pl-head{margin-bottom:18px}
@media (max-width:760px){
  .pl-method li{display:block}
  .pl-method li::before{display:inline; margin-right:8px}
  .dock-written{gap:6px; padding:8px}
  .dock-written .btn.primary{padding:11px 16px}
  .dock-written .btn.quiet{padding:8px 12px}
}

/* ================= The evolving intelligence canvas ================= */
.studio{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(24px,4vw,56px); align-items:start}
.narr{position:sticky; top:200px; padding-top:8px}
body.mode-voice .narr{top:250px}
.np h2{margin:6px 0 12px; font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.4vw,42px); line-height:1.08; color:var(--navy); outline:none; letter-spacing:-.01em}
.np-lede{margin:0 0 18px; font-size:16.5px; color:var(--ink-2); max-width:42ch}
.np-act{display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:999px; border:1px solid var(--navy); background:var(--navy); color:#fff; font:inherit; font-weight:600; font-size:15px; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s, background .25s}
.np-act:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 12px 26px rgba(10,22,40,.2)}
.np-act:disabled{opacity:.4; cursor:default}
.np-act-i{color:var(--gold-bright)}
.np-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.np-after{max-height:0; overflow:hidden; opacity:0; transition:opacity .7s var(--ease), max-height .8s var(--ease)}
.studio.cap-done .np-after{max-height:400px; opacity:1}
.studio.cap-done #capBtn{display:none}
.np-quote{margin:0 0 14px; font-family:var(--serif); font-size:clamp(19px,1.9vw,22px); line-height:1.38; color:var(--navy)}
.np-steps{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.np-steps li{font-size:12.5px; font-weight:600; color:var(--ink-2); padding:5px 11px; border:1px solid var(--rule); border-radius:999px; background:#fff}
.np-steps li:last-child{border-color:var(--gold-deep); color:var(--gold-deep)}
.np-legend{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--ink-3)}
.np-legend b{color:var(--ink); font-weight:600; margin-right:6px}
.np-hint{margin:0 0 12px; font-size:14px; color:var(--gold-deep); font-weight:600}
.np-punch{margin:16px 0 0; font-family:var(--serif); font-style:italic; font-size:21px; color:var(--navy); opacity:0; transform:translateY(6px); transition:opacity .6s, transform .6s var(--ease)}
.np-punch.on{opacity:1; transform:none}
.np-more{margin:4px 0 0; font-size:14.5px; color:var(--ink-2); max-width:44ch}
.np-more summary{cursor:pointer; font-weight:600; color:var(--navy-3)}
.np-more p{margin:10px 0 0; line-height:1.6}
.np-fine{font-size:12.5px; color:var(--ink-3)}
.np .askbtn{margin-top:22px}

/* the canvas itself: one surface whose mood changes with the chapter */
.canvas{position:relative; min-height:540px; border-radius:26px; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg,#fbf6e9,#f1e8d2); border:1px solid var(--rule); box-shadow:0 30px 70px rgba(10,22,40,.14);
  transition:background .9s var(--ease), border-color .9s, box-shadow .9s}
.canvas::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background-image:linear-gradient(rgba(10,22,40,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,22,40,.05) 1px, transparent 1px); background-size:28px 28px; transition:opacity .9s}
.canvas[data-phase="research"]{background:#fff; border-color:var(--rule-soft)}
.canvas[data-phase="research"]::before{opacity:.35}
.canvas[data-phase="opportunities"]{background:radial-gradient(700px 400px at 70% 0%, #1f3252, var(--navy) 70%); border-color:#1f3252; box-shadow:0 34px 80px rgba(10,22,40,.32)}
.canvas[data-phase="opportunities"]::before{opacity:.12; background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px)}
.canvas[data-phase="outreach"]{background:linear-gradient(170deg,#fdf9f0,#f5ecd8)}
.canvas[data-phase="outreach"]::before{opacity:0}
.cv-k{position:absolute; left:22px; top:16px; margin:0; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--gold-deep); z-index:3}
.canvas[data-phase="opportunities"] .cv-k{color:var(--gold-bright)}
.cv-corner i{position:absolute; width:26px; height:26px; border-color:var(--gold-deep); border-style:solid; opacity:0; transition:opacity .5s, transform .6s var(--ease); z-index:2}
.cv-corner i:nth-child(1){left:18%; top:20%; border-width:2px 0 0 2px; transform:translate(-10px,-10px)}
.cv-corner i:nth-child(2){right:18%; top:20%; border-width:2px 2px 0 0; transform:translate(10px,-10px)}
.cv-corner i:nth-child(3){left:18%; bottom:20%; border-width:0 0 2px 2px; transform:translate(-10px,10px)}
.cv-corner i:nth-child(4){right:18%; bottom:20%; border-width:0 2px 2px 0; transform:translate(10px,10px)}
.canvas[data-phase="capture"][data-stage="2"] .cv-corner i{opacity:1; transform:none}

/* the card persists across every chapter */
.cv-card{position:absolute; z-index:4; left:50%; top:52%; width:min(360px,74%); margin:0; padding:24px; font:inherit; color:var(--ink); text-align:left; cursor:pointer; display:block;
  transform:translate(-50%,-50%) rotate(-5deg) translateY(30px); opacity:0; transform-origin:center;
  transition:transform 1s var(--ease), opacity .7s, left 1s var(--ease), top 1s var(--ease), width 1s var(--ease), box-shadow .6s, padding 1s var(--ease)}
.cv-card .bc-person{display:block; margin:28px 0 12px}
.cv-card .bc-lines{display:flex}
.cv-card .bc-top{display:flex}
.cv-card:focus-visible{outline:3px solid rgba(201,169,97,.8); outline-offset:4px}
.canvas[data-stage="1"] .cv-card{opacity:1; transform:translate(-50%,-50%) rotate(-3deg)}
.canvas[data-stage="1"] .cv-card:hover{transform:translate(-50%,-52%) rotate(-2deg); box-shadow:0 0 0 2px var(--gold), var(--shadow-lg)}
.canvas[data-stage="2"] .cv-card{opacity:1; transform:translate(-50%,-50%) rotate(0) scale(.96); box-shadow:0 0 0 1px rgba(201,169,97,.6), var(--shadow-lg)}
.canvas[data-stage="2"] .pl-sweep{animation:sweep 1.2s var(--ease) both}
.canvas[data-phase="capture"][data-stage="3"] .cv-card,.canvas[data-phase="capture"][data-stage="4"] .cv-card{opacity:1; left:25%; top:50%; width:min(270px,42%); padding:18px; transform:translate(-50%,-50%) rotate(-2deg) scale(.9); cursor:default}
/* after capture the card becomes the origin chip in the corner */
.canvas:not([data-phase="capture"]) .cv-card{opacity:1; left:22px; top:44px; width:210px; padding:10px 12px; transform:none; cursor:default; box-shadow:var(--shadow-sm)}
.canvas:not([data-phase="capture"]) .cv-card .bc-person,.canvas:not([data-phase="capture"]) .cv-card .bc-lines{display:none}
.canvas:not([data-phase="capture"]) .cv-card .bc-logo{width:28px; height:28px; font-size:15px; border-radius:7px}
.canvas:not([data-phase="capture"]) .cv-card .bc-brand{font-size:15px}
.canvas:not([data-phase="capture"]) .cv-card .bc-brand small{font-size:10px}
.cv-chiplbl{display:none}
.canvas[data-phase="opportunities"] .cv-card{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff}
.canvas[data-phase="opportunities"] .cv-card .bc-brand small{color:#aeb8c6}

/* layers */
.cv-layer{position:absolute; z-index:3; opacity:0; visibility:hidden; transition:opacity .7s var(--ease), visibility 0s .7s, transform .8s var(--ease)}
.cv-profile{right:5%; top:50%; width:min(330px,50%); transform:translate(16px,-50%); background:#fff; border:1px solid var(--rule); border-radius:18px; box-shadow:var(--shadow-md); padding:16px 18px}
.canvas[data-phase="capture"][data-stage="3"] .cv-profile,.canvas[data-phase="capture"][data-stage="4"] .cv-profile{opacity:1; visibility:visible; transform:translate(0,-50%); transition-delay:0s}
.cv-profile .pp-rows li{grid-template-columns:1fr; gap:2px; padding:8px 0}
.canvas[data-stage="3"] .cv-profile .pp-rows li,.canvas[data-stage="4"] .cv-profile .pp-rows li{opacity:1; transform:none}
.cv-ev,.cv-opp{left:22px; right:22px; top:110px; bottom:22px}
.cv-plan{left:50%; top:54%; width:min(440px,86%); transform:translate(-50%,-44%)}
.canvas[data-phase="research"] .cv-ev,.canvas[data-phase="opportunities"] .cv-opp{opacity:1; visibility:visible; transition-delay:.2s}
.canvas[data-phase="outreach"] .cv-plan{opacity:1; visibility:visible; transform:translate(-50%,-50%); transition-delay:.2s}

/* evidence surface: findings arrive from the card and settle into lanes */
.ev-lane{margin-bottom:14px}
.ev-lane-k{display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-3)}
.ev-lane-k::after{content:""; flex:1; height:1px; background:var(--rule-soft)}
.ev-items{display:flex; flex-wrap:wrap; gap:8px}
.ev{position:relative; font:inherit; text-align:left; cursor:pointer; padding:9px 13px 9px 30px; border-radius:12px; font-size:14px; line-height:1.35; color:var(--ink);
  opacity:0; transform:translate(-120px,-60px) scale(.7); filter:blur(3px);
  transition:opacity .6s var(--ease), transform .8s var(--ease), filter .6s, box-shadow .25s, border-color .25s, background .25s; transition-delay:calc(var(--i,0) * 110ms)}
.ev::before{content:""; position:absolute; left:12px; top:14px; width:9px; height:9px; border-radius:50%}
.ev.in{opacity:1; transform:none; filter:none}
.ev.o{background:#fff; border:1px solid #cfe1d5; box-shadow:0 2px 8px rgba(63,122,88,.08)}
.ev.o::before{background:var(--obs)}
.ev.o.in::after{content:"\2713"; position:absolute; right:-6px; top:-7px; width:18px; height:18px; border-radius:50%; background:var(--obs); color:#fff; font-size:10px; display:grid; place-items:center; animation:stamp .4s var(--ease) both; animation-delay:calc(var(--i,0) * 110ms + .5s)}
@keyframes stamp{from{transform:scale(0)} to{transform:scale(1)}}
.ev.n{background:#fffaeb; border:1px solid #ead9a8; font-family:var(--serif); font-style:italic}
.ev.n::before{background:var(--gold)}
.ev.i{background:var(--inf-bg); border:1.5px dashed #d9b46a; color:var(--ink-2)}
.ev.i.in{opacity:.86}
.ev.i::before{background:var(--inf)}
.ev.u{background:transparent; border:1.5px dashed #b7c0cc; color:var(--unk); font-style:italic}
.ev.u::before{background:transparent; border:2px solid var(--unk); width:7px; height:7px}
.ev:hover,.ev.sel{box-shadow:0 0 0 2px var(--gold); border-color:transparent}
.ev:focus-visible{outline:3px solid rgba(201,169,97,.8); outline-offset:2px}
.ev-detail{margin-top:6px; min-height:58px; padding:12px 14px; border-radius:12px; background:var(--paper-2); font-size:13.5px; color:var(--ink-2); opacity:0; transition:opacity .4s}
.ev-detail.on{opacity:1}
.ev-detail b{color:var(--ink)}

/* opportunity: lenses weighed one at a time, connected to the evidence */
.op-strip{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px}
.op-dot{font-size:11.5px; padding:4px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:#8f9bb0; transition:all .4s var(--ease)}
.op-dot.lit{border-color:var(--gold); color:#1a1408; background:var(--gold-bright); box-shadow:0 0 16px rgba(227,198,127,.45)}
.op-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.op{display:grid; grid-template-columns:96px minmax(0,1fr) auto; align-items:center; gap:4px 14px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#fff;
  opacity:0; transform:translateY(14px); max-height:0; overflow:hidden; padding-top:0; padding-bottom:0; border-width:0;
  transition:opacity .6s var(--ease), transform .6s var(--ease), max-height .6s var(--ease), padding .6s, background .5s, border-color .5s}
.op.in{opacity:1; transform:none; max-height:140px; padding-top:12px; padding-bottom:12px; border-width:1px}
.op-l{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#aeb8c6; font-weight:600}
.op-t{font-family:var(--serif); font-size:18px; line-height:1.2}
.op-w{grid-column:2; font-size:13px; color:#c3cbd7}
.op-v{grid-row:1 / span 2; grid-column:3; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap}
.op-m{grid-column:1; grid-row:2; display:flex; gap:3px}
.op-m i{width:16px; height:4px; border-radius:2px; background:rgba(255,255,255,.15)}
.op-m i.on{background:var(--gold)}
.op.raise.in{background:linear-gradient(100deg, rgba(227,198,127,.16), rgba(255,255,255,.04)); border-color:rgba(227,198,127,.5)}
.op.raise .op-v{background:var(--gold); color:var(--navy)}
.op.ask .op-v{border:1px dashed #aeb8c6; color:#d6dce5}
.op.aside .op-v{background:transparent; color:#e9b2a6; border:1px solid rgba(233,178,166,.5)}
.op.aside.set{background:transparent; border-style:dashed; border-color:rgba(255,255,255,.18); opacity:.62}
.op.aside.set .op-t{text-decoration:line-through; text-decoration-color:rgba(233,178,166,.8)}
.op-tray{margin-top:12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#8f9bb0; display:none}
.op-tray.on{display:block}

/* conversation plan: everything distilled into four lines */
.plan{background:#fff; border:1px solid var(--rule); border-radius:20px; box-shadow:0 24px 50px rgba(10,22,40,.14); padding:22px 24px 18px}
.plan-h{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600; border-bottom:1px solid var(--rule-soft); padding-bottom:10px; margin-bottom:6px}
.plan-h span:last-child{color:var(--gold-deep)}
.plan ol{list-style:none; margin:0; padding:0}
.plan li{display:grid; grid-template-columns:112px minmax(0,1fr); gap:12px; padding:11px 0; border-bottom:1px solid var(--rule-soft); opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.plan li:last-child{border-bottom:0}
.plan li.in{opacity:1; transform:none}
.plan-k{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--gold-deep); padding-top:3px}
.plan-t{font-family:var(--serif); font-size:17.5px; line-height:1.35; color:var(--ink)}
.plan li.wait .plan-t{color:var(--ink-3); font-family:Inter,sans-serif; font-size:14.5px}
.plan-f{margin:10px 0 0; font-size:12.5px; color:var(--ink-3)}

/* snapshot: the interface quiets */
body.on-snapshot .rail{opacity:.55; transition:opacity .8s}
body.in-tour .studio[hidden]{display:none}

@media (max-width:900px){
  .studio{grid-template-columns:1fr}
  .narr{position:static}
  .canvas{min-height:520px}
}
@media (max-width:760px){
  .canvas{min-height:500px; border-radius:20px}
  .cv-card{width:78%}
  .canvas[data-phase="capture"][data-stage="3"] .cv-card,.canvas[data-phase="capture"][data-stage="4"] .cv-card{left:50%; top:24%; width:62%; transform:translate(-50%,-50%) scale(.82)}
  .cv-profile{left:5%; right:5%; width:auto; top:auto; bottom:16px; transform:translateY(16px)}
  .canvas[data-phase="capture"][data-stage="3"] .cv-profile,.canvas[data-phase="capture"][data-stage="4"] .cv-profile{transform:none}
  .canvas[data-phase="capture"][data-stage="3"],.canvas[data-phase="capture"][data-stage="4"]{min-height:560px}
  .canvas:not([data-phase="capture"]) .cv-card{width:170px; top:40px; left:16px}
  .cv-ev,.cv-opp{left:14px; right:14px; top:100px; bottom:auto; position:relative; padding-bottom:16px}
  .canvas[data-phase="research"],.canvas[data-phase="opportunities"]{min-height:0}
  .canvas[data-phase="research"] .cv-ev,.canvas[data-phase="opportunities"] .cv-opp{position:relative; left:auto; right:auto; top:auto; margin:96px 14px 0}
  .op{grid-template-columns:minmax(0,1fr) auto}
  .op-l{grid-column:1} .op-t{grid-column:1} .op-w{grid-column:1} .op-m{grid-column:1; grid-row:auto} .op-v{grid-row:1; grid-column:2}
  .plan li{grid-template-columns:1fr; gap:2px}
  .np-lede{font-size:15.5px}
}
/* evidence and opportunity layers flow inside the canvas so it grows with them */
.canvas[data-phase="research"] .cv-ev,.canvas[data-phase="opportunities"] .cv-opp{position:relative; left:auto; right:auto; top:auto; bottom:auto; margin:62px 22px 22px}
.canvas:not([data-phase="capture"]) .cv-card{left:calc(100% - 196px); top:12px; width:178px; padding:8px 10px}
.canvas:not([data-phase="capture"]) .cv-card .bc-top{gap:8px}
@media (max-width:760px){
  .canvas[data-phase="research"] .cv-ev,.canvas[data-phase="opportunities"] .cv-opp{margin:62px 14px 16px}
  .canvas:not([data-phase="capture"]) .cv-card{left:calc(100% - 166px); width:150px}
}
.op.aside{position:relative}
.op.aside.set::after{content:"Kept off the table"; position:absolute; right:14px; bottom:10px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#e9b2a6; border:1.5px solid rgba(233,178,166,.7); border-radius:6px; padding:3px 8px; transform:rotate(-4deg); animation:stampIn .45s var(--ease) both}
@keyframes stampIn{from{opacity:0; transform:rotate(-4deg) scale(1.6)} to{opacity:1; transform:rotate(-4deg) scale(1)}}
.op.aside.set .op-v{visibility:hidden}
.op.aside .op-m i.on{background:#e9b2a6}
.canvas.rising{background:var(--navy); border-color:var(--navy); transition:background .6s, border-color .6s}
.canvas.rising .cv-card,.canvas.rising .cv-k{opacity:0 !important; transition:opacity .4s}
.canvas.rising .plan{transform:translateY(-30px) scale(1.06); box-shadow:0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(227,198,127,.6); transition:transform .6s var(--ease), box-shadow .6s}
.cv-layer{transition:opacity .45s var(--ease), visibility 0s .45s, transform .8s var(--ease)}
@media (max-width:900px){
  /* phones and tablets: heading first, then the canvas, then the actions */
  .studio{display:flex; flex-direction:column; gap:14px}
  .narr,.np:not([hidden]){display:contents}
  .np .ch-eyebrow,.np h2,.np-lede{order:1}
  .np h2{margin-bottom:4px}
  .np-lede{margin-bottom:6px}
  .canvas{order:2}
  .np > *:not(.ch-eyebrow):not(h2):not(.np-lede){order:3}
  .np-punch:not(.on){display:none}
  .np .askbtn{margin-top:4px; align-self:flex-start}
  .np-act,.np-row{align-self:flex-start}
}
@media (max-width:760px){
  .canvas .cv-ev,.canvas .cv-opp{position:absolute; top:0; left:14px; right:14px; margin:0}
  .canvas[data-phase="research"] .cv-ev,.canvas[data-phase="opportunities"] .cv-opp{position:relative; top:auto; left:auto; right:auto; margin:62px 14px 16px}
}
@media (max-width:760px){ .op.in{max-height:300px} }

/* ================= Art direction v2: a premium intelligence studio =================
   Depth, warm light and transformation. Gold = discovery and progress.
   Teal = verified / confirmed only. Navy, cream and white stay the foundation. */
:root{
  --teal:#2c958c; --teal-soft:#79cfc4; --teal-bg:#e3f3f0;
  --obs:#2c958c; --obs-bg:#e3f3f0;
  --studio:#0b1729; --studio-2:#12233b;
  --glow-gold:rgba(227,198,127,.55);
}
.dot.o{background:var(--teal)}

/* ---------- opening page art: the card floating over its capture light ---------- */
.welcome-art{position:relative; height:440px; perspective:1100px}
.wa-pad{position:absolute; left:4%; top:58%; width:62%; height:120px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(227,198,127,.42), rgba(227,198,127,.12) 55%, transparent 75%); filter:blur(6px);
  animation:padPulse 6s ease-in-out infinite}
.wa-card{position:absolute; left:6%; top:16%; width:58%; padding:24px 24px 20px; border-radius:16px;
  background:linear-gradient(155deg,#fffdf6 0%,#f3eadb 100%); color:var(--ink);
  border-top:3px solid var(--gold);
  transform:rotateX(16deg) rotateY(-18deg) rotateZ(-3deg); transform-style:preserve-3d;
  box-shadow:0 2px 0 rgba(255,255,255,.7) inset, 0 34px 40px -12px rgba(0,0,0,.55), 0 70px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(227,198,127,.35);
  overflow:hidden; animation:floaty 7s ease-in-out infinite}
.wa-card .bc-logo{width:36px; height:36px; font-size:19px}
.wa-card .bc-brand{font-size:19px}
.wa-name{font-family:var(--serif); font-size:24px; margin-top:22px}
.wa-role{font-size:13px; color:var(--ink-3)}
.wa-lines{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; padding-top:10px; border-top:1px solid var(--rule); font-size:12px; color:var(--ink-2)}
.wa-scan{position:absolute; left:-10%; right:-10%; height:46px; top:-50px; background:linear-gradient(180deg, transparent, rgba(227,198,127,.5) 48%, rgba(255,240,200,.9) 50%, rgba(227,198,127,.5) 52%, transparent); mix-blend-mode:multiply; animation:scanY 5.5s ease-in-out infinite}
.wa-paths{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.wa-paths path{fill:none; stroke:var(--gold); stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; opacity:.85; filter:drop-shadow(0 0 4px rgba(227,198,127,.7)); animation:drawPath 5.5s var(--ease) infinite}
.wa-paths path:nth-child(2){animation-delay:.25s} .wa-paths path:nth-child(3){animation-delay:.5s}
.wa-chip{position:absolute; display:flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap;
  background:rgba(10,22,40,.75); border:1px solid rgba(255,255,255,.14); color:#e9eef4; box-shadow:0 10px 24px rgba(0,0,0,.35); backdrop-filter:blur(4px);
  animation:chipIn 5.5s var(--ease) infinite}
.wa-chip i{width:8px; height:8px; border-radius:50%}
.wa-chip.v i{background:var(--teal-soft); box-shadow:0 0 10px var(--teal-soft)}
.wa-chip.g i{background:var(--gold-bright); box-shadow:0 0 10px var(--gold-bright)}
.wa-chip.c1{left:78%; top:18%; transform:translateY(-50%)}
.wa-chip.c2{left:80%; top:44%; transform:translateY(-50%); animation-delay:.25s}
.wa-chip.c3{left:78%; top:70%; transform:translateY(-50%); animation-delay:.5s}
@keyframes floaty{0%,100%{translate:0 0} 50%{translate:0 -9px}}
@keyframes padPulse{0%,100%{opacity:.85} 50%{opacity:1}}
@keyframes scanY{0%,12%{top:-50px} 45%,100%{top:110%}}
@keyframes drawPath{0%,30%{stroke-dashoffset:1} 55%,90%{stroke-dashoffset:0; opacity:.85} 100%{stroke-dashoffset:0; opacity:0}}
@keyframes chipIn{0%,42%{opacity:0} 58%,92%{opacity:1} 100%{opacity:0}}

/* ---------- the canvas becomes a lit studio ---------- */
.canvas{background:radial-gradient(900px 520px at 40% 108%, rgba(227,198,127,.16), transparent 60%), linear-gradient(170deg,var(--studio-2),var(--studio)); border-color:#1d3150; box-shadow:0 40px 90px rgba(10,22,40,.35), inset 0 1px 0 rgba(255,255,255,.06)}
.canvas::before{opacity:0}
.cv-k{color:var(--gold-bright)}
.cv-floor{position:absolute; left:-20%; right:-20%; bottom:-10%; height:62%; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(227,198,127,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(227,198,127,.13) 1px, transparent 1px); background-size:44px 44px;
  transform:perspective(520px) rotateX(62deg); transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 85%); mask-image:linear-gradient(to top, #000 10%, transparent 85%); transition:opacity .9s}
.cv-pad{position:absolute; z-index:1; left:50%; top:66%; width:min(460px,80%); height:120px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(227,198,127,.5), rgba(227,198,127,.14) 55%, transparent 76%); filter:blur(8px); opacity:0; transition:opacity .9s, left 1s var(--ease), width 1s var(--ease)}
.canvas[data-phase="capture"] .cv-pad{opacity:.9}
.canvas[data-phase="capture"][data-stage="2"] .cv-pad{opacity:1; animation:padPulse 1.2s ease-in-out infinite}
.canvas[data-phase="capture"][data-stage="3"] .cv-pad,.canvas[data-phase="capture"][data-stage="4"] .cv-pad{left:30%; width:min(320px,52%)}
.canvas:not([data-phase="capture"]) .cv-floor{opacity:.35}
.canvas[data-phase="outreach"] .cv-floor{opacity:0}

/* the hero card: dimensional, floating, foil-edged */
.cv-card{background:linear-gradient(155deg,#fffdf6 0%,#f3eadb 100%); border:0; border-top:3px solid var(--gold); border-radius:16px;
  box-shadow:0 2px 0 rgba(255,255,255,.7) inset, 0 30px 36px -14px rgba(0,0,0,.6), 0 70px 90px -34px rgba(0,0,0,.65), 0 0 0 1px rgba(227,198,127,.3)}
.canvas[data-phase="capture"][data-stage="1"] .cv-card{transform:translate(-50%,-50%) perspective(1000px) rotateX(16deg) rotateY(-16deg) rotateZ(-3deg); animation:floaty 7s ease-in-out infinite}
.canvas[data-phase="capture"][data-stage="1"] .cv-card:hover{transform:translate(-50%,-52%) perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(-2deg); box-shadow:0 0 0 2px var(--gold), 0 0 40px rgba(227,198,127,.35), 0 40px 60px -20px rgba(0,0,0,.6)}
.canvas[data-phase="capture"][data-stage="2"] .cv-card{transform:translate(-50%,-50%) perspective(1000px) rotateX(6deg) rotateY(-4deg) scale(.98); box-shadow:0 0 0 1px rgba(227,198,127,.8), 0 0 46px rgba(227,198,127,.4), 0 40px 60px -20px rgba(0,0,0,.6)}
.canvas[data-phase="capture"][data-stage="3"] .cv-card,.canvas[data-phase="capture"][data-stage="4"] .cv-card{left:30%; width:min(280px,40%); transform:translate(-50%,-50%) perspective(1000px) rotateX(8deg) rotateY(-12deg) rotateZ(-2deg) scale(.92)}
/* the scan plane: a soft gold light passing through the card */
.pl-sweep{inset:auto -10% auto -10%; left:-10%; width:auto; height:56px; top:-60px; transform:none; background:linear-gradient(180deg, transparent, rgba(227,198,127,.45) 46%, rgba(255,244,214,.95) 50%, rgba(227,198,127,.45) 54%, transparent); mix-blend-mode:multiply}
.canvas[data-stage="2"] .pl-sweep{animation:scanCard 1.25s var(--ease) both}
@keyframes scanCard{0%{top:-60px; opacity:0} 15%{opacity:1} 100%{top:110%; opacity:.2}}
.cv-corner i{border-color:var(--gold-bright); filter:drop-shadow(0 0 6px rgba(227,198,127,.6))}

/* light paths from the card to what capture produced */
.cv-paths{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible}
.lp{fill:none; stroke:var(--gold); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; filter:drop-shadow(0 0 5px rgba(227,198,127,.75));
  transition:stroke-dashoffset 1s var(--ease), opacity .5s}
.lp2{transition-delay:.18s} .lp3{transition-delay:.36s}
.canvas[data-phase="capture"][data-stage="3"] .lp{stroke-dashoffset:0; opacity:.95}
.canvas[data-phase="capture"][data-stage="4"] .lp{stroke-dashoffset:0; opacity:.35}
.cv-results{list-style:none; margin:0; padding:0}
.cv-results li{position:absolute; z-index:4; left:66%; display:flex; align-items:center; gap:9px; padding:9px 15px; border-radius:999px; font-size:14px; font-weight:600; white-space:nowrap; color:#eef2f6;
  background:rgba(14,28,48,.85); border:1px solid rgba(255,255,255,.14); box-shadow:0 12px 28px rgba(0,0,0,.4); transform:translate(8px,-50%); opacity:0;
  transition:opacity .5s var(--ease), transform .5s var(--ease)}
.cv-results li i{width:9px; height:9px; border-radius:50%}
.cv-results .v i{background:var(--teal-soft); box-shadow:0 0 10px var(--teal-soft)}
.cv-results .g i{background:var(--gold-bright); box-shadow:0 0 10px var(--gold-bright)}
.cv-results .r1{top:27%; transition-delay:.7s} .cv-results .r2{top:50%; transition-delay:.9s} .cv-results .r3{top:73%; transition-delay:1.1s}
.canvas[data-phase="capture"][data-stage="3"] .cv-results li{opacity:1; transform:translate(0,-50%)}
/* stage 4: the results settle into the prospect profile */
.cv-profile{right:4%; width:min(320px,46%); background:#fffdf8; border:1px solid rgba(227,198,127,.4); box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04)}
.canvas[data-phase="capture"][data-stage="3"] .cv-profile{opacity:0; visibility:hidden}
.pp-t.o{color:var(--teal)}
.pp-s{color:var(--teal)}

/* ---------- evidence: grounded facts, provisional readings, open questions ---------- */
.canvas[data-phase="research"]{background:radial-gradient(800px 420px at 10% 0%, rgba(121,207,196,.08), transparent 60%), linear-gradient(170deg,#13253f,#0c1a2e); border-color:#1d3150}
.canvas[data-phase="research"]::before{opacity:0}
.ev-lane-k{color:#9fb0c4}
.ev-lane-k::after{background:rgba(255,255,255,.1)}
.ev.o{background:#fffdf8; border:1px solid rgba(121,207,196,.55); box-shadow:0 10px 22px rgba(0,0,0,.35), inset 3px 0 0 var(--teal); color:var(--ink)}
.ev.o::before{background:var(--teal)}
.ev.o.in::after{background:var(--teal); box-shadow:0 0 10px rgba(121,207,196,.8)}
.ev.n{background:#fff6dc; border:1px solid rgba(227,198,127,.7); box-shadow:0 10px 22px rgba(0,0,0,.3)}
.ev.i{background:rgba(227,198,127,.08); border:1.5px dashed rgba(227,198,127,.6); color:#efe3c4; box-shadow:none}
.ev.i.in{opacity:.9}
.ev.u{background:transparent; border:1.5px dashed rgba(159,176,196,.55); color:#a9b8c9}
.ev.u::before{border-color:#a9b8c9}
.ev.u.in{animation:unresolved 3.2s ease-in-out infinite}
@keyframes unresolved{0%,100%{border-color:rgba(159,176,196,.35)} 50%{border-color:rgba(159,176,196,.75)}}
.ev:hover,.ev.sel{box-shadow:0 0 0 2px var(--gold), 0 0 24px rgba(227,198,127,.3)}
.ev-detail{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#d7dee7}
.ev-detail b{color:#fff}
.canvas:not([data-phase="capture"]) .cv-card{box-shadow:0 12px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(227,198,127,.45), 0 0 22px rgba(227,198,127,.18)}
.canvas[data-phase="research"] .cv-card,.canvas[data-phase="opportunities"] .cv-card{background:linear-gradient(155deg,#fffdf6,#f3eadb); color:var(--ink)}
.canvas[data-phase="opportunities"] .cv-card .bc-brand small{color:var(--ink-3)}

/* ---------- opportunity: richer surface, a spotlight on each lens ---------- */
.canvas[data-phase="opportunities"]{background:radial-gradient(700px 380px at 75% -5%, rgba(227,198,127,.2), transparent 60%), radial-gradient(600px 400px at 0% 110%, rgba(36,57,91,.9), transparent 70%), linear-gradient(170deg,#152a48,#0a1628)}
.op.raise.in{background:linear-gradient(100deg, rgba(227,198,127,.2), rgba(255,255,255,.04)); box-shadow:0 14px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(227,198,127,.4)}
.op.ask.in{border-style:dashed; border-color:rgba(159,176,196,.5)}
.op.aside.in:not(.set){box-shadow:0 0 0 1px rgba(224,154,138,.5), 0 0 30px rgba(224,154,138,.18)}
.op.aside.set{filter:grayscale(1); opacity:.55}
.op.aside.set::after{filter:none; color:#f0b2a3; border-color:#f0b2a3; background:rgba(10,22,40,.6)}
.op-dot.lit{box-shadow:0 0 18px rgba(227,198,127,.6)}

/* ---------- conversation: the energy resolves into clarity ---------- */
.canvas[data-phase="outreach"]{background:linear-gradient(170deg,#fdf9f0,#f3e9d4); border-color:var(--rule); box-shadow:0 30px 70px rgba(10,22,40,.14)}
.canvas[data-phase="outreach"] .cv-k{color:var(--gold-deep)}
.canvas[data-phase="outreach"] .cv-card{box-shadow:var(--shadow-md)}

/* ---------- Snapshot: a light falls on the deliverable ---------- */
.unveil::before{content:""; position:absolute; z-index:-1; left:50%; top:-40px; width:min(900px,120%); height:520px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,236,190,.22), transparent 70%); pointer-events:none}
.snapdoc{box-shadow:0 50px 110px rgba(0,0,0,.55), 0 0 0 1px rgba(227,198,127,.25), 0 0 80px rgba(227,198,127,.12)}
.sd-src{color:var(--teal)}

@media (max-width:760px){
  .canvas[data-phase="capture"][data-stage="3"] .cv-card,.canvas[data-phase="capture"][data-stage="4"] .cv-card{left:50%; top:24%; width:64%; transform:translate(-50%,-50%) perspective(1000px) rotateX(8deg) rotateY(-8deg) scale(.82)}
  .canvas[data-phase="capture"][data-stage="3"] .cv-pad,.canvas[data-phase="capture"][data-stage="4"] .cv-pad{left:50%; top:38%; width:70%}
  .cv-paths{display:none}
  .cv-results li{left:50%; transform:translate(-50%, 8px)}
  .cv-results .r1{top:58%} .cv-results .r2{top:70%} .cv-results .r3{top:82%}
  .canvas[data-phase="capture"][data-stage="3"] .cv-results li{transform:translate(-50%,0)}
}

/* ---------- concept refinements: tablet capture surface, light beams, glass chip ---------- */
.canvas[data-phase="capture"]{background:
  radial-gradient(520px 460px at -6% 20%, rgba(244,220,170,.34), transparent 62%),
  radial-gradient(700px 420px at 50% 112%, rgba(227,198,127,.18), transparent 60%),
  linear-gradient(100deg,#2a2a2e 0%, #15233a 38%, #0b1729 100%)}
/* the capture surface: a dark tablet in perspective with a faint teal grid */
.cv-floor{left:14%; right:14%; bottom:7%; height:40%; border-radius:22px; z-index:0;
  background-color:rgba(8,18,32,.92);
  background-image:linear-gradient(rgba(121,207,196,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(121,207,196,.12) 1px, transparent 1px); background-size:26px 26px;
  border:1px solid rgba(121,207,196,.25); box-shadow:0 40px 60px rgba(0,0,0,.55), inset 0 0 40px rgba(121,207,196,.08);
  transform:perspective(700px) rotateX(58deg); transform-origin:50% 100%; -webkit-mask-image:none; mask-image:none}
.cv-floor i{position:absolute; width:26px; height:26px; border-color:var(--gold-bright); border-style:solid; filter:drop-shadow(0 0 5px rgba(227,198,127,.7))}
.cv-floor i:nth-child(1){left:12px; top:12px; border-width:2px 0 0 2px}
.cv-floor i:nth-child(2){right:12px; top:12px; border-width:2px 2px 0 0}
.cv-floor i:nth-child(3){left:12px; bottom:12px; border-width:0 0 2px 2px}
.cv-floor i:nth-child(4){right:12px; bottom:12px; border-width:0 2px 2px 0}
.canvas:not([data-phase="capture"]) .cv-floor{opacity:0}
.canvas[data-phase="capture"][data-stage="3"] .cv-floor,.canvas[data-phase="capture"][data-stage="4"] .cv-floor{left:6%; right:48%}
.cv-pad{top:72%}
/* light beams rising from the surface into the card */
.cv-beams{position:absolute; z-index:1; left:50%; top:40%; width:min(300px,56%); height:36%; transform:translateX(-50%); display:flex; justify-content:space-between; pointer-events:none; opacity:0; transition:opacity .8s, left 1s var(--ease), width 1s var(--ease)}
.cv-beams i{width:2px; border-radius:2px; background:linear-gradient(to top, rgba(227,198,127,.0), rgba(227,198,127,.75) 40%, rgba(121,207,196,.5) 75%, transparent); filter:blur(.4px); animation:beam 3.6s ease-in-out infinite}
.cv-beams i:nth-child(2){animation-delay:-.7s; background:linear-gradient(to top, transparent, rgba(121,207,196,.65) 45%, transparent)}
.cv-beams i:nth-child(3){animation-delay:-1.4s}
.cv-beams i:nth-child(4){animation-delay:-2.1s; background:linear-gradient(to top, transparent, rgba(121,207,196,.65) 45%, transparent)}
.cv-beams i:nth-child(5){animation-delay:-2.8s}
@keyframes beam{0%,100%{opacity:.35; transform:scaleY(.85)} 50%{opacity:1; transform:scaleY(1)}}
.canvas[data-phase="capture"][data-stage="1"] .cv-beams{opacity:.45}
.canvas[data-phase="capture"][data-stage="2"] .cv-beams{opacity:1}
.canvas[data-phase="capture"][data-stage="3"] .cv-beams,.canvas[data-phase="capture"][data-stage="4"] .cv-beams{opacity:.35; left:30%; width:min(220px,36%)}
/* a glass profile chip forms on the surface once the card is captured */
.cv-glass{position:absolute; z-index:3; left:50%; bottom:13%; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:12px; transform:translate(-50%,10px);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px); box-shadow:0 14px 30px rgba(0,0,0,.4); color:var(--gold-bright); opacity:0;
  transition:opacity .6s var(--ease), transform .6s var(--ease), left 1s var(--ease)}
.cv-glass b{display:block; width:46px; height:5px; border-radius:3px; background:rgba(255,255,255,.28)}
.cv-glass b + b{width:30px}
.cv-glass .ok{color:var(--teal-soft)}
.canvas[data-phase="capture"][data-stage="2"] .cv-glass{opacity:1; transform:translate(-50%,0); transition-delay:.6s}
.canvas[data-phase="capture"][data-stage="3"] .cv-glass{opacity:1; left:30%; transform:translate(-50%,0)}
.canvas[data-phase="capture"][data-stage="4"] .cv-glass{opacity:0}
/* the card glows warm at its edges */
.canvas[data-phase="capture"] .cv-card{box-shadow:0 2px 0 rgba(255,255,255,.7) inset, 0 0 34px rgba(244,214,150,.32), 0 30px 36px -14px rgba(0,0,0,.6), 0 70px 90px -34px rgba(0,0,0,.65), 0 0 0 1px rgba(227,198,127,.35)}
/* result chips with icons: teal = verified, gold = discovered */
.cv-results li svg{flex:0 0 auto}
.cv-results .v svg{color:var(--teal-soft); filter:drop-shadow(0 0 6px rgba(121,207,196,.6))}
.cv-results .g svg{color:var(--gold-bright); filter:drop-shadow(0 0 6px rgba(227,198,127,.6))}
.cv-results li{background:rgba(14,28,48,.72); backdrop-filter:blur(6px)}
/* opening page art matches */
.wa-slab{position:absolute; left:2%; top:52%; width:68%; height:40%; border-radius:20px;
  background-color:rgba(8,18,32,.9); background-image:linear-gradient(rgba(121,207,196,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(121,207,196,.12) 1px, transparent 1px); background-size:24px 24px;
  border:1px solid rgba(121,207,196,.25); transform:perspective(700px) rotateX(60deg); transform-origin:50% 100%; box-shadow:0 30px 50px rgba(0,0,0,.5)}
.wa-slab i{position:absolute; width:22px; height:22px; border-color:var(--gold-bright); border-style:solid}
.wa-slab i:nth-child(1){left:10px; top:10px; border-width:2px 0 0 2px}
.wa-slab i:nth-child(2){right:10px; top:10px; border-width:2px 2px 0 0}
.wa-slab i:nth-child(3){left:10px; bottom:10px; border-width:0 0 2px 2px}
.wa-slab i:nth-child(4){right:10px; bottom:10px; border-width:0 2px 2px 0}
.wa-pad{top:62%; z-index:1}
.wa-card{z-index:3}
.wa-beams{position:absolute; z-index:2; left:16%; top:42%; width:38%; height:30%; display:flex; justify-content:space-between; pointer-events:none}
.wa-beams i{width:2px; background:linear-gradient(to top, transparent, rgba(227,198,127,.75) 40%, rgba(121,207,196,.5) 75%, transparent); animation:beam 3.6s ease-in-out infinite}
.wa-beams i:nth-child(2){animation-delay:-.9s} .wa-beams i:nth-child(3){animation-delay:-1.8s} .wa-beams i:nth-child(4){animation-delay:-2.7s}
.wa-chip svg{flex:0 0 auto}
.wa-chip.v svg{color:var(--teal-soft)} .wa-chip.g svg{color:var(--gold-bright)}
.welcome{background:radial-gradient(700px 520px at 78% 40%, rgba(244,220,170,.16), transparent 62%), radial-gradient(1000px 520px at 85% -10%, rgba(201,169,97,.2), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(36,57,91,.9), transparent 70%), linear-gradient(180deg,#0d1b30 0%, var(--navy) 100%)}
@media (max-width:760px){
  .canvas[data-phase="capture"][data-stage="3"] .cv-floor,.canvas[data-phase="capture"][data-stage="4"] .cv-floor{left:14%; right:14%; bottom:auto; top:16%}
  .canvas[data-phase="capture"][data-stage="3"] .cv-beams,.canvas[data-phase="capture"][data-stage="4"] .cv-beams{left:50%; top:10%}
  .canvas[data-phase="capture"][data-stage="3"] .cv-glass{left:50%; bottom:auto; top:40%}
}
.wa-card{left:0; top:20%; width:55%; padding:20px 20px 16px}
.wa-name{font-size:21px; margin-top:16px}
.wa-slab{left:-2%; top:56%; width:60%}
.wa-pad{left:0; width:56%}
.wa-beams{left:10%; width:34%; top:46%}
.wa-chip{font-size:12.5px; padding:7px 11px}
.wa-chip.c1{left:65%; top:22%} .wa-chip.c2{left:65%; top:46%} .wa-chip.c3{left:65%; top:70%}
.canvas[data-phase="capture"] .cv-card{top:41%; width:min(330px,64%)}
.canvas[data-phase="capture"] .cv-floor{height:34%; bottom:5%}
.cv-beams{top:46%; height:30%}
.canvas[data-phase="capture"]{background:
  radial-gradient(560px 520px at -4% 24%, rgba(244,220,170,.42), transparent 62%),
  radial-gradient(700px 420px at 50% 112%, rgba(227,198,127,.2), transparent 60%),
  linear-gradient(100deg,#3a342b 0%, #1a2638 40%, #0b1729 100%)}
@media (max-width:760px){ .canvas[data-phase="capture"] .cv-card{width:76%} }
.cv-results .r1,.cv-results .r2,.cv-results .r3{transition-delay:0s}
.canvas[data-phase="capture"][data-stage="3"] .cv-results .r1{transition-delay:.6s}
.canvas[data-phase="capture"][data-stage="3"] .cv-results .r2{transition-delay:.85s}
.canvas[data-phase="capture"][data-stage="3"] .cv-results .r3{transition-delay:1.1s}
.canvas[data-phase="capture"][data-stage="4"] .cv-profile{transition-delay:.25s}
/* light paths: solid strokes revealed left to right (dash tricks break with non-scaling strokes) */
.lp,.wa-paths path{stroke-dasharray:none; stroke-dashoffset:0}
.cv-paths{clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease)}
.canvas[data-phase="capture"][data-stage="3"] .cv-paths,.canvas[data-phase="capture"][data-stage="4"] .cv-paths{clip-path:inset(0 0 0 0)}
.canvas[data-phase="capture"][data-stage="3"] .lp{opacity:.95}
.wa-paths{animation:waReveal 5.5s var(--ease) infinite}
.wa-paths path{animation:none; opacity:.85}
@keyframes waReveal{0%,30%{clip-path:inset(0 100% 0 0); opacity:1} 55%,90%{clip-path:inset(0 0 0 0); opacity:1} 100%{clip-path:inset(0 0 0 0); opacity:0}}
@media (prefers-reduced-motion: reduce){ .wa-paths{clip-path:none} .wa-chip{opacity:1} }
.op.aside.set{filter:none; opacity:1; background:rgba(255,255,255,.02)}
.op.aside.set .op-l,.op.aside.set .op-t,.op.aside.set .op-w,.op.aside.set .op-m{opacity:.42}
.op.aside.set::after{font-size:12px; padding:5px 11px; color:#f4b6a6; border:2px solid #f4b6a6; background:rgba(40,20,20,.35); box-shadow:0 0 22px rgba(244,182,166,.25)}
@media (max-width:900px){ .studio{align-items:stretch} .canvas{align-self:stretch; width:100%} }
@media (max-width:760px){
  .cv-profile{left:5%; right:5%; width:auto; top:auto; bottom:16px; transform:translateY(16px)}
  .canvas[data-phase="capture"][data-stage="4"] .cv-profile{transform:none}
  .canvas[data-phase="capture"][data-stage="4"]{min-height:640px}
  .canvas[data-phase="capture"][data-stage="4"] .cv-card{top:20%; width:58%}
  .canvas[data-phase="capture"][data-stage="4"] .cv-floor{top:8%; height:26%}
}
@media (max-width:760px){
  .canvas[data-phase="capture"][data-stage="4"] .cv-card{top:23%; width:62%; padding:16px; transform:translate(-50%,-50%) perspective(1000px) rotateX(8deg) rotateY(-8deg) scale(.78)}
  .canvas[data-phase="capture"][data-stage="4"] .cv-card .bc-lines{display:none}
  .canvas[data-phase="capture"][data-stage="4"] .cv-card .bc-person{margin:14px 0 0}
  .canvas[data-phase="capture"][data-stage="4"] .cv-profile{bottom:14px}
}

/* ================= Concept match: the capture scene bleeds full width ================= */
.studio{position:relative}
.studio[data-phase="capture"]::before{content:""; position:absolute; z-index:-1; left:50%; width:100vw; transform:translateX(-50%); top:calc(-1 * clamp(28px,4vw,56px)); bottom:-140px; pointer-events:none;
  background:
    radial-gradient(760px 620px at 70% 52%, rgba(255,198,118,.42), transparent 62%),
    radial-gradient(420px 380px at 96% 30%, rgba(30,26,24,.55), transparent 70%),
    linear-gradient(90deg, #fbf4e8 0%, #f6e8cf 30%, #d9b98c 52%, #7a5f42 72%, #3a302a 90%, #2a2522 100%)}
.studio[data-phase="capture"]{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.canvas[data-phase="capture"]{background:transparent; border-color:transparent; box-shadow:none; overflow:visible; min-height:600px}
.canvas[data-phase="capture"] .cv-k,.canvas[data-phase="capture"] .cv-corner{display:none}
.canvas[data-phase="capture"] .cv-pad{left:46%; top:76%; width:min(560px,90%); height:150px; background:radial-gradient(closest-side, rgba(255,200,120,.6), rgba(255,190,100,.18) 55%, transparent 78%)}

/* the hero card: bigger, warmer, with light at its edges */
.canvas[data-phase="capture"] .cv-card,
.canvas[data-phase="capture"][data-stage="3"] .cv-card{left:38%; top:38%; width:min(400px,54%); padding:26px 26px 22px}
.canvas[data-phase="capture"][data-stage="1"] .cv-card{transform:translate(-50%,-50%) perspective(1100px) rotateX(12deg) rotateY(-14deg) rotateZ(3deg)}
.canvas[data-phase="capture"][data-stage="1"] .cv-card:hover{transform:translate(-50%,-52%) perspective(1100px) rotateX(8deg) rotateY(-9deg) rotateZ(2deg)}
.canvas[data-phase="capture"][data-stage="2"] .cv-card{transform:translate(-50%,-50%) perspective(1100px) rotateX(8deg) rotateY(-8deg) rotateZ(2deg)}
.canvas[data-phase="capture"][data-stage="3"] .cv-card{transform:translate(-50%,-50%) perspective(1100px) rotateX(10deg) rotateY(-12deg) rotateZ(3deg)}
.canvas[data-phase="capture"] .cv-card{box-shadow:0 2px 0 rgba(255,255,255,.8) inset, 0 0 0 1px rgba(255,218,160,.55), 0 0 46px rgba(255,190,100,.42), 0 34px 50px -22px rgba(60,32,8,.55)}
.canvas[data-phase="capture"] .cv-card .bc-brand{font-size:24px}
.canvas[data-phase="capture"] .cv-card .bc-person strong{font-size:28px}

/* the capture tablet: dark glass, teal grid, luminous edges */
.canvas[data-phase="capture"] .cv-floor,
.canvas[data-phase="capture"][data-stage="3"] .cv-floor,.canvas[data-phase="capture"][data-stage="4"] .cv-floor{left:4%; right:14%; bottom:2%; height:38%; top:auto; border-radius:26px;
  background-color:rgba(22,34,40,.88);
  background-image:linear-gradient(rgba(121,207,196,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(121,207,196,.2) 1px, transparent 1px); background-size:30px 30px;
  border:1px solid rgba(160,230,220,.45); box-shadow:0 0 0 6px rgba(20,28,32,.6), 0 0 30px rgba(121,207,196,.25), inset 0 0 50px rgba(121,207,196,.14), 0 50px 60px rgba(40,24,8,.45);
  transform:perspective(800px) rotateX(55deg) rotateZ(-2deg)}
.canvas[data-phase="capture"] .cv-floor i{width:44px; height:44px; border-color:rgba(255,236,200,.9); filter:drop-shadow(0 0 6px rgba(255,214,150,.9))}

/* light beams between card and tablet */
.canvas[data-phase="capture"] .cv-beams,
.canvas[data-phase="capture"][data-stage="3"] .cv-beams,.canvas[data-phase="capture"][data-stage="4"] .cv-beams{left:38%; top:55%; width:min(330px,46%); height:26%}
.canvas[data-phase="capture"][data-stage="1"] .cv-beams{opacity:.7}
.canvas[data-phase="capture"][data-stage="3"] .cv-beams{opacity:.8}
.cv-beams i{width:2px; background:linear-gradient(to top, rgba(255,214,150,0), rgba(255,226,170,.85) 35%, rgba(150,230,220,.55) 70%, transparent); box-shadow:0 0 6px rgba(255,214,150,.5)}

/* the glass profile chip on the tablet, as in the concept */
.cv-glass{bottom:auto; top:78%; left:41%; padding:12px 16px; gap:12px; border-radius:16px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); box-shadow:0 18px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3)}
.cv-glass > svg:first-child{width:34px; height:34px; padding:6px; border-radius:50%; border:2px solid var(--gold-bright); color:#fff4dc; box-shadow:0 0 12px rgba(255,214,150,.6)}
.cv-glass b{width:78px; height:6px; background:rgba(255,255,255,.55)} .cv-glass b + b{width:54px}
.cv-glass .ok{width:24px; height:24px; padding:4px; border-radius:50%; background:rgba(160,170,175,.5); color:#fff; transition:background .5s, box-shadow .5s}
.canvas[data-phase="capture"][data-stage="1"] .cv-glass,.canvas[data-phase="capture"][data-stage="2"] .cv-glass{opacity:1; transform:translate(-50%,0)}
.canvas[data-phase="capture"][data-stage="3"] .cv-glass{opacity:1; left:41%; transform:translate(-50%,0)}
.canvas[data-phase="capture"][data-stage="3"] .cv-glass .ok{background:var(--teal-soft); box-shadow:0 0 14px rgba(121,207,196,.8)}
.cv-glass b{display:block}
.cv-glass{flex-direction:row}
.cv-glass span{display:none}

/* result chips: dark glass tiles with icon badges; waiting until capture, lit after */
.cv-results li{left:auto; right:0; width:min(170px,26%); white-space:normal; line-height:1.25; border-radius:16px; padding:12px 14px; gap:12px; font-size:14.5px;
  background:rgba(22,24,28,.62); border:1px solid rgba(255,255,255,.2); box-shadow:0 18px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(8px); color:#f2f2ee}
.cv-results li svg{width:40px; height:40px; padding:9px; border-radius:50%; flex:0 0 auto}
.cv-results .v svg{color:#e8fffb; background:radial-gradient(circle, rgba(121,207,196,.55), rgba(44,149,140,.35)); box-shadow:0 0 0 2px rgba(121,207,196,.7), 0 0 16px rgba(121,207,196,.55)}
.cv-results .g svg{color:#fff1d0; background:radial-gradient(circle, rgba(232,180,90,.9), rgba(180,120,40,.7)); box-shadow:0 0 0 2px rgba(255,214,150,.6), 0 0 16px rgba(255,190,100,.5)}
.cv-results li::before{content:""; position:absolute; left:-4px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:#fff4dc; box-shadow:0 0 8px rgba(255,214,150,.9); opacity:0; transition:opacity .4s}
.cv-results .r1{top:21%} .cv-results .r2{top:40%} .cv-results .r3{top:59%}
.canvas[data-phase="capture"][data-stage="1"] .cv-results li,.canvas[data-phase="capture"][data-stage="2"] .cv-results li{opacity:.5; transform:translate(0,-50%); filter:grayscale(.9); border-style:dashed}
.canvas[data-phase="capture"][data-stage="3"] .cv-results li{opacity:1; filter:none; border-style:solid}
.canvas[data-phase="capture"][data-stage="3"] .cv-results li::before{opacity:1}
.lp{stroke:#ffd89a; stroke-width:1.8; filter:drop-shadow(0 0 4px rgba(255,200,110,.9))}

/* stage 4: the card steps left and the verified profile takes the chips' place */
.canvas[data-phase="capture"][data-stage="4"] .cv-card{left:27%; top:40%; width:min(300px,42%); transform:translate(-50%,-50%) perspective(1100px) rotateX(10deg) rotateY(-12deg) rotateZ(2deg) scale(.92)}
.canvas[data-phase="capture"][data-stage="4"] .cv-beams{left:27%; width:min(240px,34%)}
.canvas[data-phase="capture"][data-stage="4"] .cv-profile{right:0; width:min(330px,50%)}

/* the narrative sits on the warm light side */
.studio[data-phase="capture"] .np-lede{color:var(--ink-2)}

@media (max-width:900px){
  .studio[data-phase="capture"]::before{background:radial-gradient(500px 420px at 50% 62%, rgba(255,198,118,.45), transparent 65%), linear-gradient(180deg, #fbf4e8 0%, #f3e3c6 40%, #8a6b4b 75%, #3a302a 100%)}
}
@media (max-width:760px){
  .canvas[data-phase="capture"]{min-height:620px}
  .canvas[data-phase="capture"] .cv-card,.canvas[data-phase="capture"][data-stage="3"] .cv-card{left:50%; top:24%; width:80%}
  .canvas[data-phase="capture"][data-stage="1"] .cv-card,.canvas[data-phase="capture"][data-stage="2"] .cv-card,.canvas[data-phase="capture"][data-stage="3"] .cv-card{transform:translate(-50%,-50%) perspective(1000px) rotateX(10deg) rotateY(-8deg) rotateZ(2deg) scale(.92)}
  .canvas[data-phase="capture"] .cv-floor,.canvas[data-phase="capture"][data-stage="3"] .cv-floor,.canvas[data-phase="capture"][data-stage="4"] .cv-floor{left:4%; right:4%; top:30%; bottom:auto; height:30%}
  .canvas[data-phase="capture"] .cv-beams,.canvas[data-phase="capture"][data-stage="3"] .cv-beams{left:50%; top:36%; width:60%; height:14%}
  .cv-glass,.canvas[data-phase="capture"][data-stage="3"] .cv-glass{left:50%; top:46%}
  .cv-results li{right:auto; left:50%; width:78%; transform:translate(-50%,0); flex-direction:row}
  .cv-results .r1{top:58%} .cv-results .r2{top:71%} .cv-results .r3{top:84%}
  .canvas[data-phase="capture"][data-stage="1"] .cv-results li,.canvas[data-phase="capture"][data-stage="2"] .cv-results li,.canvas[data-phase="capture"][data-stage="3"] .cv-results li{transform:translate(-50%,0)}
  .cv-results li br{display:none}
  .canvas[data-phase="capture"][data-stage="4"] .cv-card{left:50%; top:16%}
  .canvas[data-phase="capture"][data-stage="4"] .cv-floor,.canvas[data-phase="capture"][data-stage="4"] .cv-beams,.canvas[data-phase="capture"][data-stage="4"] .cv-glass{opacity:0}
  .canvas[data-phase="capture"][data-stage="4"] .cv-profile{left:5%; right:5%; width:auto}
}
@media (min-width:761px){
  .canvas[data-phase="capture"] .cv-floor,
  .canvas[data-phase="capture"][data-stage="3"] .cv-floor,.canvas[data-phase="capture"][data-stage="4"] .cv-floor{left:0; right:12%; bottom:6%; height:48%}
  .canvas[data-phase="capture"] .cv-card,.canvas[data-phase="capture"][data-stage="3"] .cv-card{width:min(420px,58%); top:37%}
  .canvas[data-phase="capture"] .cv-beams,.canvas[data-phase="capture"][data-stage="3"] .cv-beams{top:52%; height:22%}
  .cv-glass,.canvas[data-phase="capture"][data-stage="3"] .cv-glass{top:72%}
}
.wa-chip{border-radius:14px; padding:8px 12px 8px 8px; background:rgba(22,24,28,.7); border-color:rgba(255,255,255,.2)}
.wa-chip svg{width:30px; height:30px; padding:6px; border-radius:50%}
.wa-chip.v svg{color:#e8fffb; background:rgba(44,149,140,.45); box-shadow:0 0 0 1.5px rgba(121,207,196,.7), 0 0 12px rgba(121,207,196,.45)}
.wa-chip.g svg{color:#fff1d0; background:rgba(200,140,50,.8); box-shadow:0 0 0 1.5px rgba(255,214,150,.6), 0 0 12px rgba(255,190,100,.45)}
.wa-card{box-shadow:0 2px 0 rgba(255,255,255,.8) inset, 0 0 0 1px rgba(255,218,160,.55), 0 0 44px rgba(255,190,100,.4), 0 34px 50px -22px rgba(0,0,0,.55)}
.wa-slab{background-color:rgba(22,34,40,.9); background-image:linear-gradient(rgba(121,207,196,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(121,207,196,.2) 1px, transparent 1px); border-color:rgba(160,230,220,.45); box-shadow:0 0 0 5px rgba(20,28,32,.6), 0 0 26px rgba(121,207,196,.22), 0 30px 50px rgba(0,0,0,.5)}
.wa-paths path{stroke:#ffd89a; stroke-width:1.8}
@media (max-width:760px){
  .canvas[data-phase="capture"][data-stage="4"] .cv-card{width:76%; padding:16px 18px; top:15%}
  .canvas[data-phase="capture"][data-stage="4"] .cv-card .bc-person strong{font-size:22px}
}

/* ================= A real two-sided business card (US 3.5 × 2 in, 1.75:1) ================= */
.cv-card,.wa-card{aspect-ratio:1.75 / 1; height:auto; padding:0 !important; background:transparent !important; border:0 !important; border-radius:3.2cqw; container-type:inline-size; transform-style:preserve-3d; overflow:visible}
.cv-card{border-radius:12px}
.hb-flip{position:absolute; inset:0; display:block; transform-style:preserve-3d; transition:transform 1s cubic-bezier(.45,.05,.25,1); border-radius:inherit}
.hb-face{position:absolute; inset:0; display:block; border-radius:3.2cqw; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.hb-front{background:linear-gradient(160deg,#fffdf8 0%,#f6efe1 60%,#efe5d1 100%); color:#1b2733; padding:7.5cqw 7.5cqw 6.5cqw;
  box-shadow:inset 0 0 0 1px rgba(160,130,70,.18); display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr auto}
.hb-front::after{content:""; position:absolute; left:0; right:0; top:0; height:1.1cqw; background:linear-gradient(90deg,#b8913f,#e8cf8e,#b8913f)}
.hb-top{display:flex; align-items:center; gap:3cqw}
.hb-mark{width:11.5cqw; height:11.5cqw; flex:0 0 auto; border-radius:2.4cqw; box-shadow:0 .6cqw 1.6cqw rgba(19,64,90,.25)}
.hb-word{font-family:var(--serif); font-weight:500; font-size:7.4cqw; line-height:1; letter-spacing:-.01em; color:#13405a}
.hb-word small{display:block; margin-top:1.1cqw; font-family:Inter,sans-serif; font-size:2.5cqw; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:#8a6a22}
.hb-person{align-self:end; padding-bottom:3cqw}
.hb-person strong{display:block; font-family:var(--serif); font-weight:500; font-size:6.6cqw; line-height:1.05; color:#1b2733}
.hb-person span{display:block; margin-top:.8cqw; font-size:2.9cqw; letter-spacing:.18em; text-transform:uppercase; color:#6b6252}
.hb-contact{display:grid; grid-template-columns:auto auto; justify-content:space-between; gap:.9cqw 4cqw; padding-top:2.6cqw; border-top:.25cqw solid rgba(184,145,63,.55); font-size:2.85cqw; color:#3a4450; white-space:nowrap}
.hb-contact span:nth-child(even){text-align:right}
.hb-back{transform:rotateY(180deg); background:radial-gradient(120% 90% at 20% 0%, #1d4a66 0%, #13344b 45%, #0d2436 100%); color:#fdf8ec;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:inset 0 0 0 1px rgba(227,198,127,.35)}
.hb-back::before{content:""; position:absolute; inset:3.4cqw; border:.25cqw solid rgba(227,198,127,.4); border-radius:2cqw}
.hb-back .hb-mark{width:13cqw; height:13cqw; box-shadow:0 0 0 .3cqw rgba(227,198,127,.6)}
.hb-bword{margin-top:3cqw; font-family:var(--serif); font-size:7cqw; letter-spacing:.06em}
.hb-bsub{margin-top:.6cqw; font-size:2.5cqw; letter-spacing:.34em; text-transform:uppercase; color:#e3c67f}
.hb-rule{width:14cqw; height:.25cqw; margin:3.2cqw 0 2.8cqw; background:linear-gradient(90deg,transparent,#e3c67f,transparent)}
.hb-svc{font-size:2.8cqw; letter-spacing:.06em; color:#dfe7ee}
.hb-svc i{font-style:normal; color:#e3c67f; margin:0 1.2cqw}

/* the turn: brand side up until capture, then the contact side resolves */
.canvas[data-phase="capture"][data-stage="0"] .hb-flip,.canvas[data-phase="capture"][data-stage="1"] .hb-flip{transform:rotateY(180deg)}
.canvas[data-phase="capture"][data-stage="2"] .hb-flip{transform:rotateY(0deg)}
.canvas[data-phase="capture"][data-stage="2"] .pl-sweep{animation-delay:.75s}
/* the sweep and glow now live on the faces */
.pl-sweep{z-index:2}
.cv-card .pl-sweep{display:block}
/* sizes on the canvas */
.canvas[data-phase="capture"] .cv-card,.canvas[data-phase="capture"][data-stage="3"] .cv-card{width:min(430px,62%); top:36%}
.canvas[data-phase="capture"][data-stage="4"] .cv-card{width:min(300px,44%)}
.canvas:not([data-phase="capture"]) .cv-card{width:176px; padding:0}
@media (max-width:760px){
  .canvas[data-phase="capture"] .cv-card,.canvas[data-phase="capture"][data-stage="3"] .cv-card{width:86%; top:21%}
  .canvas[data-phase="capture"][data-stage="4"] .cv-card{width:72%; top:14%}
  .canvas:not([data-phase="capture"]) .cv-card{width:140px}
  .canvas[data-phase="capture"] .cv-floor,.canvas[data-phase="capture"][data-stage="3"] .cv-floor{top:24%}
  .canvas[data-phase="capture"] .cv-beams,.canvas[data-phase="capture"][data-stage="3"] .cv-beams{top:30%}
  .cv-glass,.canvas[data-phase="capture"][data-stage="3"] .cv-glass{top:41%}
  .cv-results .r1{top:53%} .cv-results .r2{top:66%} .cv-results .r3{top:79%}
}
/* opening page card */
.wa-card{left:0; top:24%; width:56%}
.wa-card .hb-flip{transform:none}
.wa-card .wa-scan{z-index:2}
@media (prefers-reduced-motion: reduce){ .hb-flip{transition:none} }
/* the small card that stays with the visitor through later chapters */
.canvas:not([data-phase="capture"]) .cv-card{width:140px; top:14px; left:calc(100% - 158px)}
.canvas[data-phase="research"] .cv-ev,.canvas[data-phase="opportunities"] .cv-opp{margin-top:104px}
@media (max-width:760px){
  .canvas:not([data-phase="capture"]) .cv-card{width:120px; left:calc(100% - 134px)}
  .canvas[data-phase="research"] .cv-ev,.canvas[data-phase="opportunities"] .cv-opp{margin-top:92px}
}
.wa-slab{top:48%} .wa-pad{top:56%} .wa-beams{top:40%; height:22%}

/* ================= Capture steps: front → flip → back (optional) → verified ================= */
.canvas[data-phase="capture"][data-stage="0"] .hb-flip,.canvas[data-phase="capture"][data-stage="1"] .hb-flip{transform:rotateY(0deg)}
.canvas[data-phase="capture"][data-side="back"] .hb-flip{transform:rotateY(180deg)}
.pl-sweep-b{z-index:3}
.canvas[data-cstep="3"] .pl-sweep-b{animation:scanCard 1.05s var(--ease) both}
.canvas[data-cstep="2"] .pl-sweep,.canvas[data-cstep="3"] .hb-front .pl-sweep,.canvas[data-cstep="4"] .pl-sweep{animation:none; opacity:0}
.cv-steps{list-style:none; margin:0; padding:5px; position:absolute; z-index:5; left:38%; top:4%; transform:translateX(-50%); display:flex; gap:4px;
  border-radius:999px; background:rgba(20,26,32,.62); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px); box-shadow:0 12px 26px rgba(0,0,0,.3);
  opacity:0; transition:opacity .5s, left 1s var(--ease)}
.canvas[data-phase="capture"][data-stage="1"] .cv-steps,.canvas[data-phase="capture"][data-stage="2"] .cv-steps,.canvas[data-phase="capture"][data-stage="3"] .cv-steps{opacity:1}
.canvas:not([data-phase="capture"]) .cv-steps{display:none}
.cv-steps li{display:flex; align-items:center; gap:6px; padding:5px 11px 5px 6px; border-radius:999px; font-size:12px; font-weight:600; color:#b9c2cc; white-space:nowrap; transition:background .35s, color .35s}
.cv-steps li b{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; font-size:10.5px; background:rgba(255,255,255,.12); color:#dfe5ea}
.cv-steps li em{font-style:normal; font-weight:500; color:#8f9aa6; margin-left:2px}
.canvas[data-cstep="1"] .cv-steps li[data-n="1"],.canvas[data-cstep="2"] .cv-steps li[data-n="2"],.canvas[data-cstep="3"] .cv-steps li[data-n="3"]{background:rgba(227,198,127,.18); color:#fff3d6}
.canvas[data-cstep="1"] .cv-steps li[data-n="1"] b,.canvas[data-cstep="2"] .cv-steps li[data-n="2"] b,.canvas[data-cstep="3"] .cv-steps li[data-n="3"] b{background:var(--gold-bright); color:var(--navy)}
.canvas[data-cstep="2"] .cv-steps li[data-n="1"] b,.canvas[data-cstep="3"] .cv-steps li[data-n="1"] b,.canvas[data-cstep="3"] .cv-steps li[data-n="2"] b,
.canvas[data-cstep="4"] .cv-steps li:not([data-n="4"]) b{background:rgba(121,207,196,.35); color:#e8fffb}
.canvas[data-cstep="4"] .cv-steps li[data-n="4"]{background:rgba(121,207,196,.2); color:#e8fffb}
.canvas[data-cstep="4"] .cv-steps li[data-n="4"] b{background:var(--teal-soft); color:var(--navy); box-shadow:0 0 10px rgba(121,207,196,.7)}
@media (max-width:760px){
  .cv-steps{left:50%; top:1%; padding:4px; gap:2px}
  .cv-steps li{padding:4px 7px 4px 4px; font-size:10.5px}
  .cv-steps li em{display:none}
  .cv-steps li b{width:16px; height:16px}
}
@media (prefers-reduced-motion: reduce){ .cv-steps{transition:none} }
.canvas[data-stage="2"] .pl-sweep-b{animation:none; opacity:0}
.canvas[data-stage="2"][data-cstep="3"] .pl-sweep-b{animation:scanCardB 1.05s var(--ease) both; opacity:1}
@keyframes scanCardB{0%{top:-60px; opacity:0} 15%{opacity:1} 100%{top:110%; opacity:.2}}
/* source detail opens inline, right under the tapped signal */
.ev-items .ev-detail{flex-basis:100%; margin:2px 0 4px; min-height:0; display:none; position:relative}
.ev-items .ev-detail.on{display:block; animation:fadeUp .3s var(--ease) both}
.ev-items .ev-detail::before{content:""; position:absolute; left:22px; top:-6px; width:10px; height:10px; background:inherit; border-left:1px solid rgba(255,255,255,.1); border-top:1px solid rgba(255,255,255,.1); transform:rotate(45deg)}
.cv-ev > .ev-detail{display:none}

/* ================= What-happened timeline (not buttons) ================= */
.np-steps{list-style:none; margin:4px 0 0; padding:0; display:flex; gap:0; position:relative; max-width:440px}
.np-steps li{flex:1 1 0; position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; border:0; background:none; border-radius:0; font-size:12px; font-weight:600; color:var(--ink-2); text-align:center; cursor:default;
  opacity:0; transform:translateY(4px); transition:opacity .4s var(--ease), transform .4s var(--ease)}
.np-steps li:last-child{border:0; color:var(--ink)}
/* the connecting line */
.np-steps li::before{content:""; position:absolute; top:11px; left:calc(-50% + 13px); right:calc(50% + 13px); height:2px; background:linear-gradient(90deg,var(--teal-soft),var(--teal)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.np-steps li:first-child::before{display:none}
.np-steps .ts-node{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:12px; font-weight:700; background:var(--teal); color:#fff; box-shadow:0 0 0 3px rgba(121,207,196,.25)}
.np-steps li.human .ts-node{background:var(--gold); color:var(--navy); box-shadow:0 0 0 3px rgba(227,198,127,.35)}
.np-steps li.human::before{background:linear-gradient(90deg,var(--teal),var(--gold))}
.np-steps .ts-l{line-height:1.2}
.np-steps li.human .ts-l{color:var(--gold-deep)}
.studio.cap-done .np-steps li{opacity:1; transform:none}
.studio.cap-done .np-steps li::before{transform:scaleX(1)}
.studio.cap-done .np-steps li:nth-child(1){transition-delay:.3s}
.studio.cap-done .np-steps li:nth-child(2),.studio.cap-done .np-steps li:nth-child(2)::before{transition-delay:.5s}
.studio.cap-done .np-steps li:nth-child(3),.studio.cap-done .np-steps li:nth-child(3)::before{transition-delay:.7s}
.studio.cap-done .np-steps li:nth-child(4),.studio.cap-done .np-steps li:nth-child(4)::before{transition-delay:.9s}
.studio.cap-done .np-steps li:nth-child(5),.studio.cap-done .np-steps li:nth-child(5)::before{transition-delay:1.1s}

/* ================= Ask: a real, clearly labelled button ================= */
.askbtn{display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:12px; border:1.5px solid var(--navy); background:#fff; color:var(--navy); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  box-shadow:0 2px 0 rgba(10,22,40,.08), 0 6px 14px rgba(10,22,40,.08); transition:background .2s, color .2s, transform .2s var(--ease), box-shadow .2s}
.askbtn::before{content:none; display:none}
.askbtn-i{flex:0 0 auto; color:var(--gold-deep)}
.askbtn:hover{background:var(--navy); color:#fff; transform:translateY(-1px); box-shadow:0 10px 22px rgba(10,22,40,.18)}
.askbtn:hover .askbtn-i{color:var(--gold-bright)}
.askbtn:focus-visible{outline:3px solid rgba(201,169,97,.7); outline-offset:3px}
.np .askbtn{margin-top:24px}
.ch-head.on-dark .askbtn{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.55); color:#fff}
.ch-head.on-dark .askbtn .askbtn-i{color:var(--gold-bright)}
.ch-head.on-dark .askbtn:hover{background:#fff; color:var(--navy)}
@media (max-width:760px){
  .askbtn{white-space:normal; font-size:14px}
  .np-steps{max-width:none}
  .np-steps li{font-size:11px}
}
@media (prefers-reduced-motion: reduce){ .np-steps li,.np-steps li::before{transition:none} }
@media (max-width:900px){
  .studio[data-phase="capture"]::before{background:radial-gradient(520px 460px at 50% 40%, rgba(255,198,118,.42), transparent 65%), linear-gradient(180deg, #fbf4e8 0%, #f0dcb8 35%, #8a6b4b 52%, #c9a87d 66%, #f6ecdc 80%, #fbf4e8 100%)}
}

/* ================= Opening page: start close under the header, keep the hero in view ================= */
@media (min-width:761px){
  .welcome{padding:clamp(22px,3vw,40px) 28px clamp(36px,5vw,64px)}
  .welcome h1{font-size:clamp(34px,4.3vw,56px); margin-bottom:14px}
  .kicker{margin-bottom:12px}
  .lede{margin-bottom:16px}
  .meta{margin-bottom:22px}
  .choose-head{margin-bottom:12px}
  .choice{min-height:0; padding:20px 22px 18px}
  .choice-ico{margin-bottom:6px}
  .choice-go{padding-top:12px}
  .welcome-in{align-items:start}
  .welcome-art{margin-top:40px; height:400px}
}
/* hero art stays inside its column: chips align to the right edge */
.welcome-art{overflow:visible}
.wa-card{width:52%}
.wa-chip.c1,.wa-chip.c2,.wa-chip.c3{left:auto; right:0}
.wa-chip{font-size:12px}
@media (min-width:761px){
  .welcome{padding-top:18px}
  .meta{margin-bottom:18px}
  .lede{font-size:clamp(16px,1.4vw,18px); margin-bottom:14px}
  .choice-d{font-size:14px}
  .choice-t{font-size:clamp(23px,2.2vw,28px)}
}

/* ================= Ask lives in the bars, so nothing can push it out of view ================= */
.np .askbtn,.ch-head .askbtn{display:none}
.dock-mid{display:flex; align-items:center; gap:12px}
.dock-ask{padding:9px 16px; font-size:14px; box-shadow:none}
.dk-short{display:none}
.tc-ask{background:rgba(227,198,127,.14); border-color:rgba(227,198,127,.6)}
.tc-ask:hover:not(:disabled){background:rgba(227,198,127,.24)}
/* tighter left column in chapter 1 */
.np-quote{font-size:clamp(17px,1.5vw,19px); margin-bottom:12px}
.np h2{font-size:clamp(28px,3vw,40px)}
@media (max-height:760px) and (min-width:761px){
  .np-lede{margin-bottom:12px; font-size:15.5px}
  .np h2{margin-bottom:8px}
}
@media (max-width:1100px) and (min-width:761px){ .dk-full{display:none} .dk-short{display:inline} }
@media (max-width:760px){
  .dk-full{display:none} .dk-short{display:inline}
  .dock-mid{gap:4px}
  .dock-ask{padding:8px 11px}
  .tc-ask{order:5; flex:1 1 30%; justify-content:center}
  .tc.sound{flex:1 1 30%} .tc.more{flex:1 1 30%}
}
.dk-tiny{display:none}
@media (max-width:760px){ .dk-short{display:none} .dk-tiny{display:inline} }
@media (max-width:760px){
  .lv-x,.bk-l{display:none}
  .dock-written{gap:6px; padding:8px}
  .dock-written #backBtn{padding:8px 12px}
  .dock-written #continueBtn{padding:11px 16px}
}
.np-role{margin:-6px 0 16px; padding:10px 14px; border-left:3px solid var(--gold); background:rgba(255,255,255,.55); border-radius:0 10px 10px 0; font-size:14px; line-height:1.5; color:var(--ink-2); max-width:44ch}
.np-role b{color:var(--ink); font-weight:600}
@media (max-width:900px){ .np-role{order:1; margin:0 0 6px} }

/* ================= Abridged label + the full Growth Snapshot ================= */
.sd-abr{display:inline-block; margin-right:8px; padding:2px 9px; border-radius:999px; background:rgba(227,198,127,.18); border:1px solid rgba(227,198,127,.6); color:var(--gold-bright); font-size:11.5px; font-weight:600; letter-spacing:.04em}
.sd-more{width:100%; max-width:780px; margin:18px auto 0; display:flex; align-items:center; justify-content:space-between; gap:14px 20px; flex-wrap:wrap; padding:16px 20px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(227,198,127,.35); animation:fadeUp .8s var(--ease) 2.2s both}
.sd-more p{margin:0; flex:1 1 320px; color:#d7dee7; font-size:14.5px; line-height:1.5}
.fullsnap{border:0; padding:0; width:min(860px,calc(100% - 24px)); max-height:calc(100vh - 32px); border-radius:22px; background:var(--paper); box-shadow:0 40px 100px rgba(0,0,0,.5); overflow:auto}
.fullsnap::backdrop{background:rgba(10,22,40,.72); backdrop-filter:blur(3px)}
.fs-top{position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:10px 14px 10px 20px; background:var(--navy); color:#fff}
.fs-label{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); font-weight:600}
.fs-top .x{color:#fff}
.fs-doc{background:#fff}
.fs-band{display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; padding:12px 32px; background:#0f1d33; color:#fff; font-size:13px}
.fs-hero{padding:28px 32px 18px; background:linear-gradient(180deg,#fbf6e8,#fff)}
.fs-hero h2{font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.6vw,36px); line-height:1.12; color:var(--navy); margin:16px 0 10px}
.fs-hero p{margin:0; color:var(--ink-2); font-size:16px; max-width:62ch}
.fs-legend{list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; padding:0; margin:14px 0 0; font-size:13px; color:var(--ink-3)}
.fs-legend li{display:flex; align-items:center}
.fs-sec{padding:20px 32px; border-top:1px solid var(--rule-soft)}
.fs-sec h3{margin:0 0 12px; font-family:var(--serif); font-weight:500; font-size:22px; color:var(--navy)}
.fs-glance{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.fs-glance > div{padding:14px; border-radius:14px; background:var(--paper-2); display:flex; flex-direction:column; gap:3px}
.fs-gk{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.fs-glance strong{font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink)}
.fs-gs{font-size:12.5px; color:var(--ink-3); display:flex; align-items:center}
.fs-opps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.fs-opps > li{padding:18px 20px; border:1px solid var(--rule-soft); border-radius:16px; background:#fffdf8}
.fs-opps h4{display:flex; align-items:center; gap:12px; margin:0 0 10px; font-family:var(--serif); font-weight:500; font-size:20px; color:var(--ink)}
.fs-k{margin:10px 0 6px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}
.fs-ev{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.fs-ev li,.fs-opps p{font-size:15px; color:var(--ink-2); line-height:1.5}
.fs-ev li{display:block}
.fs-opps p{margin:0}
.fs-src{display:block; margin-left:16px; font-size:12.5px; color:var(--teal)}
.dot.n{background:var(--gold)}
.fs-q{margin-top:10px !important; padding:10px 12px; border-radius:10px; background:var(--unk-bg)}
.fs-help{margin-top:8px !important; font-size:14px !important; color:var(--navy-3) !important}
.fs-unknown,.fs-sources{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:15px; color:var(--ink-2)}
.fs-unknown li{display:flex; align-items:center}
.fs-sources li::before{content:"·"; color:var(--gold-deep); margin-right:8px; font-weight:700}
.fs-note{margin:10px 0 0; font-size:13px; color:var(--ink-3)}
.fs-next p{margin:0; color:var(--ink-2); font-size:15px}
.fs-actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.fs-btn{display:inline-block; padding:10px 18px; border-radius:999px; background:var(--navy); color:#fff; font-weight:600; font-size:14px}
.fs-btn.quiet{background:#fff; color:var(--ink); border:1px solid var(--rule)}
.fs-doc .sd-presence{margin:4px 32px 0}
.fs-doc .sd-foot{margin-top:18px}
@media (max-width:760px){
  .fs-band,.fs-hero,.fs-sec{padding-left:18px; padding-right:18px}
  .fs-glance{grid-template-columns:1fr}
  .fs-doc .sd-presence{margin:4px 18px 0}
}
.sd-more{background:var(--navy); border-color:rgba(227,198,127,.45); box-shadow:0 20px 40px rgba(10,22,40,.25)}
.sd-more p{color:#e2e8ef}
.dock-written > *{min-width:0}
.vs-test{display:block; margin:14px auto 0; color:#d7dee7; font-size:14px}
.vs-test + .vs-read{margin-top:10px}
.tb-test{color:#f6e3a8; font-size:13.5px}

/* ================= The surface is the phone doing the capture ================= */
.canvas[data-phase="capture"] .cv-floor,
.canvas[data-phase="capture"][data-stage="3"] .cv-floor,.canvas[data-phase="capture"][data-stage="4"] .cv-floor{
  background-color:#0d1620; background-image:radial-gradient(120% 90% at 50% 0%, rgba(121,207,196,.12), transparent 60%), linear-gradient(180deg,#121d29,#0a121b);
  border:12px solid #1b1e23; border-radius:40px; box-shadow:0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 1px rgba(121,207,196,.25), 0 50px 60px rgba(40,24,8,.45)}
/* camera notch */
.canvas[data-phase="capture"] .cv-floor::before{content:""; position:absolute; top:-4px; left:50%; width:90px; height:14px; transform:translateX(-50%); border-radius:0 0 10px 10px; background:#1b1e23}
/* the gold brackets are the camera's framing guides */
.canvas[data-phase="capture"] .cv-floor i{width:40px; height:40px}
.cv-surface-lbl{position:absolute; z-index:5; left:38%; bottom:1.5%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:rgba(14,22,30,.82); border:1px solid rgba(255,255,255,.18); color:#e8eef3; font-size:12px; font-weight:600; white-space:nowrap; backdrop-filter:blur(6px); transition:opacity .4s}
.cv-surface-lbl svg{color:var(--teal-soft)}
.canvas:not([data-phase="capture"]) .cv-surface-lbl,.canvas[data-phase="capture"][data-stage="4"] .cv-surface-lbl{opacity:0; pointer-events:none}
.canvas[data-cstep="4"] .cv-surface-lbl svg{color:var(--teal-soft)}
/* opening-page art: same phone */
.wa-slab{background-color:#0d1620; background-image:radial-gradient(120% 90% at 50% 0%, rgba(121,207,196,.12), transparent 60%); border:10px solid #1b1e23; border-radius:34px}
.wa-lbl{position:absolute; z-index:4; left:28%; top:88%; transform:translateX(-50%); padding:5px 11px; border-radius:999px; background:rgba(14,22,30,.82); border:1px solid rgba(255,255,255,.18); color:#e8eef3; font-size:11.5px; font-weight:600; white-space:nowrap}
@media (max-width:760px){
  .cv-surface-lbl{left:50%; bottom:auto; top:46%}
  .canvas[data-phase="capture"][data-stage="3"] .cv-surface-lbl{opacity:0}
}
@media (max-width:760px){ .canvas[data-phase="capture"] .cv-glass{display:none} .cv-surface-lbl{top:42%} }

/* ================= A recognisable phone does the capture (replaces the slab) ================= */
.canvas[data-phase="capture"] .cv-floor,.canvas[data-phase="capture"] .cv-beams,.canvas[data-phase="capture"] .cv-glass,
.wa-slab,.wa-beams{display:none !important}
.phone-mock{position:absolute; z-index:3; display:block; width:128px; aspect-ratio:9 / 19; padding:7px; border-radius:26px; background:linear-gradient(160deg,#2a2e35,#14171b);
  box-shadow:0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 1px rgba(0,0,0,.6), 0 30px 50px rgba(30,18,6,.5); transform:rotate(-8deg)}
.pm-screen{position:relative; display:flex; flex-direction:column; align-items:center; height:100%; border-radius:20px; overflow:hidden; background:linear-gradient(180deg,#1a2430,#0e151d); padding:22px 10px 12px}
.pm-screen::before{content:""; position:absolute; top:6px; left:50%; width:34px; height:8px; transform:translateX(-50%); border-radius:6px; background:#05070a}
.pm-top{font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright)}
.pm-view{position:relative; flex:1; width:100%; margin:10px 0; display:grid; place-items:center}
.pm-view > i{position:absolute; width:14px; height:14px; border-color:var(--gold-bright); border-style:solid}
.pm-view > i:nth-child(1){left:0; top:12%; border-width:2px 0 0 2px} .pm-view > i:nth-child(2){right:0; top:12%; border-width:2px 2px 0 0}
.pm-view > i:nth-child(3){left:0; bottom:12%; border-width:0 0 2px 2px} .pm-view > i:nth-child(4){right:0; bottom:12%; border-width:0 2px 2px 0}
.pm-card{width:82%; aspect-ratio:1.75 / 1; border-radius:4px; background:linear-gradient(160deg,#fffdf8,#efe5d1); padding:6px; display:flex; flex-direction:column; gap:3px; box-shadow:0 0 14px rgba(255,214,150,.35); transition:background .4s}
.pm-card b{width:12px; height:12px; border-radius:3px; background:#13405a}
.pm-card em{display:block; height:3px; border-radius:2px; background:rgba(27,39,51,.45); width:70%}
.pm-card em.s{width:45%}
.pm-shutter{width:30px; height:30px; border-radius:50%; border:3px solid #fff; background:rgba(255,255,255,.2); flex:0 0 auto}
/* in the capture scene: bottom-left, holding the card in its camera view */
.cv-phone{left:5%; bottom:5%; transition:opacity .5s, transform .6s var(--ease)}
.canvas[data-phase="capture"][data-cstep="2"] .pm-card,.canvas[data-phase="capture"][data-cstep="3"] .pm-card{background:linear-gradient(160deg,#1d4a66,#0d2436)}
.canvas[data-phase="capture"][data-cstep="3"] .pm-card em,.canvas[data-phase="capture"][data-cstep="2"] .pm-card em{background:rgba(227,198,127,.6)}
.canvas[data-phase="capture"][data-stage="2"] .pm-view::after{content:""; position:absolute; left:6%; right:6%; height:2px; top:20%; background:var(--gold-bright); box-shadow:0 0 10px var(--gold-bright); animation:pmScan 1.1s ease-in-out infinite alternate}
@keyframes pmScan{to{top:78%}}
.canvas[data-phase="capture"][data-cstep="4"] .pm-top{color:var(--teal-soft)}
.canvas[data-phase="capture"][data-stage="4"] .cv-phone,.canvas:not([data-phase="capture"]) .cv-phone{opacity:0; transform:rotate(-8deg) translateY(16px); pointer-events:none}
.cv-surface-lbl{left:calc(5% + 64px); bottom:1%}
/* opening page: the same phone */
.wa-phone{left:2%; top:56%; width:96px; z-index:4}
.wa-lbl{left:calc(2% + 120px); top:auto; bottom:4%; transform:none}
@media (max-width:760px){
  .cv-phone{left:8%; bottom:auto; top:35%; width:96px}
  .cv-surface-lbl{left:auto; right:6%; top:44%; transform:none; white-space:normal; max-width:46%}
  .canvas[data-phase="capture"][data-stage="1"] .cv-results li,.canvas[data-phase="capture"][data-stage="2"] .cv-results li{opacity:0}
  .canvas[data-phase="capture"][data-stage="3"] .cv-phone{opacity:0}
}
@media (prefers-reduced-motion: reduce){ .canvas[data-phase="capture"][data-stage="2"] .pm-view::after{animation:none; top:50%} }
@media (max-width:760px){ .cv-surface-lbl{bottom:auto; top:47%; right:5%; border-radius:12px; font-size:12px} }

/* ================= Capture surface v3: the concept's glass capture tablet, held back ~25% ================= */
.phone-mock{display:none !important}
.canvas[data-phase="capture"] .cv-floor{display:block !important}
.canvas[data-phase="capture"] .cv-beams{display:flex !important}
.canvas[data-phase="capture"] .cv-glass{display:flex !important}
.wa-slab{display:block !important} .wa-beams{display:flex !important}

/* the tablet: dark glass with a fine, faint grid, lit edges and visible thickness */
.canvas[data-phase="capture"] .cv-floor,
.canvas[data-phase="capture"][data-stage="3"] .cv-floor,.canvas[data-phase="capture"][data-stage="4"] .cv-floor{
  left:2%; right:16%; top:auto; bottom:6%; height:44%; border-radius:30px; border:0;
  background-color:#121c22;
  background-image:
    radial-gradient(70% 60% at 50% 30%, rgba(255,214,150,.22), transparent 70%),
    radial-gradient(100% 80% at 50% 100%, rgba(121,207,196,.14), transparent 70%),
    linear-gradient(rgba(150,225,215,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,225,215,.09) 1px, transparent 1px),
    linear-gradient(170deg, #1d2a31 0%, #0f181e 60%, #0b1217 100%);
  background-size:auto, auto, 100% 18px, 18px 100%, auto;
  box-shadow:
    inset 0 0 0 1px rgba(170,235,225,.35),
    inset 0 0 26px rgba(121,207,196,.18),
    inset 0 1px 0 rgba(255,236,200,.45),
    0 7px 0 -1px #0a1014,
    0 7px 0 0 rgba(170,235,225,.18),
    0 0 34px rgba(121,207,196,.18),
    0 44px 60px rgba(40,24,8,.42);
  transform:perspective(900px) rotateX(56deg) rotateZ(-3deg); transform-origin:50% 100%}
.canvas[data-phase="capture"] .cv-floor::before{content:none}
/* soft inner frame line */
.canvas[data-phase="capture"] .cv-floor::after{content:""; position:absolute; inset:16px; border-radius:20px; border:1px solid rgba(170,235,225,.16)}
/* glowing gold-white corner brackets */
.canvas[data-phase="capture"] .cv-floor i{width:46px; height:46px; border-color:rgba(255,240,212,.95); filter:drop-shadow(0 0 4px rgba(255,214,150,.9)) drop-shadow(0 0 10px rgba(255,200,120,.45))}
.canvas[data-phase="capture"] .cv-floor i:nth-child(1){left:20px; top:20px} .canvas[data-phase="capture"] .cv-floor i:nth-child(2){right:20px; top:20px}
.canvas[data-phase="capture"] .cv-floor i:nth-child(3){left:20px; bottom:20px} .canvas[data-phase="capture"] .cv-floor i:nth-child(4){right:20px; bottom:20px}
/* warm pool of light where the card meets the surface */
.canvas[data-phase="capture"] .cv-pad{left:42%; top:66%; width:min(460px,70%); height:130px; opacity:.85}

/* soft light beams rising from the surface to the card */
.canvas[data-phase="capture"] .cv-beams,
.canvas[data-phase="capture"][data-stage="3"] .cv-beams,.canvas[data-phase="capture"][data-stage="4"] .cv-beams{left:40%; top:50%; width:min(320px,48%); height:22%; justify-content:space-around}
.canvas[data-phase="capture"] .cv-beams i{width:1.5px; border-radius:2px; background:linear-gradient(to top, rgba(255,226,170,0), rgba(255,232,190,.75) 30%, rgba(160,230,220,.45) 70%, rgba(255,255,255,0)); box-shadow:0 0 8px rgba(255,214,150,.45); filter:blur(.3px)}
.canvas[data-phase="capture"][data-stage="1"] .cv-beams{opacity:.6}
.canvas[data-phase="capture"][data-stage="2"] .cv-beams{opacity:.95}
.canvas[data-phase="capture"][data-stage="3"] .cv-beams{opacity:.7}
.canvas[data-phase="capture"][data-stage="4"] .cv-beams{opacity:.25}

/* the glass profile chip resting on the tablet */
.canvas[data-phase="capture"] .cv-glass,.canvas[data-phase="capture"][data-stage="3"] .cv-glass{left:40%; top:73%; bottom:auto; padding:12px 16px; gap:12px; border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); border:1px solid rgba(255,255,255,.35);
  box-shadow:0 16px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45), 0 0 24px rgba(255,214,150,.18); backdrop-filter:blur(8px)}
.canvas[data-phase="capture"][data-stage="1"] .cv-glass,.canvas[data-phase="capture"][data-stage="2"] .cv-glass,.canvas[data-phase="capture"][data-stage="3"] .cv-glass{opacity:1; transform:translate(-50%,0)}
.canvas[data-phase="capture"][data-stage="4"] .cv-glass{opacity:0}

/* the label explains the surface and follows the steps */
.cv-surface-lbl{left:40%; bottom:0; transform:translateX(-50%); background:rgba(14,22,30,.7)}
.canvas[data-phase="capture"][data-stage="4"] .cv-surface-lbl{opacity:0}

/* opening page: the same tablet, smaller */
.wa-slab{left:0; top:50%; width:62%; height:38%; border:0; border-radius:24px;
  background-color:#121c22;
  background-image:radial-gradient(70% 60% at 50% 30%, rgba(255,214,150,.22), transparent 70%), linear-gradient(rgba(150,225,215,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(150,225,215,.09) 1px, transparent 1px), linear-gradient(170deg,#1d2a31,#0b1217);
  background-size:auto, 100% 16px, 16px 100%, auto;
  box-shadow:inset 0 0 0 1px rgba(170,235,225,.35), inset 0 0 22px rgba(121,207,196,.18), 0 6px 0 -1px #0a1014, 0 0 30px rgba(121,207,196,.16), 0 30px 50px rgba(0,0,0,.5);
  transform:perspective(800px) rotateX(58deg) rotateZ(-3deg)}
.wa-slab i{border-color:rgba(255,240,212,.95); filter:drop-shadow(0 0 4px rgba(255,214,150,.9))}
.wa-lbl{left:31%; top:auto; bottom:2%; transform:translateX(-50%)}

@media (max-width:760px){
  .canvas[data-phase="capture"] .cv-floor,.canvas[data-phase="capture"][data-stage="3"] .cv-floor{left:4%; right:4%; top:26%; bottom:auto; height:28%}
  .canvas[data-phase="capture"] .cv-beams,.canvas[data-phase="capture"][data-stage="3"] .cv-beams{left:50%; top:31%; width:62%; height:12%}
  .canvas[data-phase="capture"] .cv-glass{display:none !important}
  .cv-surface-lbl{left:50%; right:auto; top:47%; bottom:auto; transform:translateX(-50%); white-space:nowrap; max-width:none; border-radius:999px}
  .canvas[data-phase="capture"][data-stage="4"] .cv-floor,.canvas[data-phase="capture"][data-stage="4"] .cv-beams{opacity:0}
}
@media (min-width:761px){
  .canvas[data-phase="capture"] .cv-floor,
  .canvas[data-phase="capture"][data-stage="3"] .cv-floor,.canvas[data-phase="capture"][data-stage="4"] .cv-floor{left:-3%; right:6%; bottom:3%; height:70%;
    background-color:#18242a;
    background-image:
      radial-gradient(60% 45% at 48% 22%, rgba(255,226,170,.42), transparent 72%),
      radial-gradient(100% 80% at 50% 100%, rgba(121,207,196,.16), transparent 70%),
      linear-gradient(rgba(170,235,225,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(170,235,225,.1) 1px, transparent 1px),
      linear-gradient(170deg, #22313a 0%, #131d24 60%, #0d151b 100%);
    background-size:auto, auto, 100% 20px, 20px 100%, auto;
    transform:perspective(1000px) rotateX(58deg) rotateZ(-3deg)}
  .canvas[data-phase="capture"] .cv-floor i{width:56px; height:56px}
  .canvas[data-phase="capture"] .cv-beams,.canvas[data-phase="capture"][data-stage="3"] .cv-beams{top:52%; height:16%}
  .canvas[data-phase="capture"] .cv-glass,.canvas[data-phase="capture"][data-stage="3"] .cv-glass{top:72%}
  .canvas[data-phase="capture"] .cv-pad{top:60%; width:min(560px,86%); height:170px; opacity:1}
}
@media (min-width:761px){
  .canvas[data-phase="capture"] .cv-card,.canvas[data-phase="capture"][data-stage="3"] .cv-card{top:39%}
  .canvas[data-phase="capture"] .cv-floor,
  .canvas[data-phase="capture"][data-stage="3"] .cv-floor,.canvas[data-phase="capture"][data-stage="4"] .cv-floor{height:80%; bottom:4%;
    box-shadow:inset 0 0 0 1px rgba(170,235,225,.35), inset 0 0 30px rgba(121,207,196,.18), inset 0 2px 0 rgba(255,236,200,.55), 0 7px 0 -1px #0a1014, 0 7px 0 0 rgba(170,235,225,.2), 0 -6px 40px rgba(255,214,150,.25), 0 0 34px rgba(121,207,196,.16), 0 44px 60px rgba(40,24,8,.42)}
  .canvas[data-phase="capture"] .cv-beams,.canvas[data-phase="capture"][data-stage="3"] .cv-beams{top:56%; height:13%}
  .cv-results .r1{top:24%} .cv-results .r2{top:43%} .cv-results .r3{top:62%}
}

/* ================= Capture scene v4: David's concept render as the plate, live pieces on top ================= */
@media (min-width:761px){
  .studio[data-phase="capture"]{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:12px}
  .canvas[data-phase="capture"]{
    aspect-ratio:1257 / 710; min-height:0; align-self:center;
    margin-right:calc(-1 * max(0px, (100vw - 1100px) / 2 - 8px));
    background-color:transparent;
    background-image:url("assets/capture-plate.jpg");
    background-image:image-set(url("assets/capture-plate.webp") type("image/webp"), url("assets/capture-plate.jpg") type("image/jpeg"));
    background-size:100% 100%; background-repeat:no-repeat; border:0; border-radius:0; box-shadow:none; overflow:visible;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 92%, transparent 100%);
    -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 0, #000 7%), linear-gradient(180deg, transparent 0, #000 6%, #000 92%, transparent 100%); mask-composite:intersect}
  .canvas[data-phase="capture"] .cv-floor,.canvas[data-phase="capture"] .cv-beams,.canvas[data-phase="capture"] .cv-glass,.canvas[data-phase="capture"] .cv-pad{display:none !important}
  /* the live card sits where the render's card was */
  .canvas[data-phase="capture"] .cv-card,.canvas[data-phase="capture"][data-stage="3"] .cv-card{left:53%; top:39%; width:40%}
  .canvas[data-phase="capture"][data-stage="1"] .cv-card{transform:translate(-50%,-50%) perspective(1100px) rotateX(9deg) rotateY(-12deg) rotateZ(4deg)}
  .canvas[data-phase="capture"][data-stage="1"] .cv-card:hover{transform:translate(-50%,-52%) perspective(1100px) rotateX(7deg) rotateY(-9deg) rotateZ(3deg)}
  .canvas[data-phase="capture"][data-stage="2"] .cv-card{transform:translate(-50%,-50%) perspective(1100px) rotateX(6deg) rotateY(-6deg) rotateZ(2deg)}
  .canvas[data-phase="capture"][data-stage="3"] .cv-card{transform:translate(-50%,-50%) perspective(1100px) rotateX(9deg) rotateY(-12deg) rotateZ(4deg)}
  .canvas[data-phase="capture"] .cv-card{box-shadow:0 2px 0 rgba(255,255,255,.85) inset, 0 0 0 1px rgba(255,222,170,.65), 0 0 60px rgba(255,196,110,.55), 0 30px 46px -20px rgba(60,32,8,.5)}
  /* result chips where the render has them */
  .cv-results li{left:77.8%; right:auto; width:16.6%; min-width:150px}
  .cv-results .r1{top:16.3%} .cv-results .r2{top:33.8%} .cv-results .r3{top:51.1%}
  .canvas[data-phase="capture"][data-stage="1"] .cv-results li,.canvas[data-phase="capture"][data-stage="2"] .cv-results li{opacity:.55; background:rgba(22,24,28,.55)}
  /* steps and label */
  .cv-steps{left:53%; top:1%}
  .cv-surface-lbl{left:52%; bottom:2%; top:auto}
  /* the plate warms up while the card is being captured */
  .canvas[data-phase="capture"]::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(38% 46% at 53% 52%, rgba(255,222,165,.38), transparent 70%); opacity:0; transition:opacity .9s}
  .canvas[data-phase="capture"][data-stage="2"]::after{opacity:1}
  .canvas[data-phase="capture"][data-stage="3"]::after{opacity:.55}
  /* stage 4: card steps left, profile on the right */
  .canvas[data-phase="capture"][data-stage="4"] .cv-card{left:30%; top:40%; width:30%}
  .canvas[data-phase="capture"][data-stage="4"] .cv-profile{right:3%; width:min(330px,38%); top:46%}
}
/* phones: a sensible crop of the render behind the live pieces */
@media (max-width:760px){
  .canvas[data-phase="capture"]{background-color:#2a241e; background-image:url("assets/capture-plate.jpg"); background-image:image-set(url("assets/capture-plate.webp") type("image/webp"), url("assets/capture-plate.jpg") type("image/jpeg")); background-size:cover; background-position:52% 70%; border:0}
  .canvas[data-phase="capture"] .cv-floor,.canvas[data-phase="capture"] .cv-beams,.canvas[data-phase="capture"] .cv-pad{display:none !important}
  .cv-surface-lbl{top:auto; bottom:2%}
}
/* opening page: the same render */
@media (min-width:961px){
  .welcome-art{height:auto; aspect-ratio:1257 / 710; margin-top:70px; margin-right:-60px;
    background-image:url("assets/capture-plate.jpg"); background-image:image-set(url("assets/capture-plate.webp") type("image/webp"), url("assets/capture-plate.jpg") type("image/jpeg"));
    background-size:100% 100%; -webkit-mask-image:radial-gradient(75% 80% at 58% 55%, #000 55%, transparent 100%); mask-image:radial-gradient(75% 80% at 58% 55%, #000 55%, transparent 100%)}
  .welcome-art .wa-slab,.welcome-art .wa-beams,.welcome-art .wa-pad,.welcome-art .wa-lbl,.welcome-art .phone-mock{display:none !important}
  .wa-card{left:53%; top:39%; width:40%; transform:translate(-50%,-50%) perspective(1100px) rotateX(9deg) rotateY(-12deg) rotateZ(4deg); animation:none}
  .wa-chip{font-size:11px; padding:5px 9px 5px 5px}
  .wa-chip svg{width:22px; height:22px; padding:4px}
  .wa-chip.c1,.wa-chip.c2,.wa-chip.c3{left:77%; right:auto}
  .wa-chip.c1{top:16%} .wa-chip.c2{top:34%} .wa-chip.c3{top:51%}
  .wa-paths{display:none}
}
@media (min-width:761px){
  .studio[data-phase="capture"]{grid-template-columns:minmax(260px,.5fr) minmax(0,1.5fr); gap:0}
  .canvas[data-phase="capture"]{margin-left:-6%; margin-right:calc(-1 * max(0px, (100vw - 1100px) / 2 + 20px)); margin-top:-24px}
  .studio[data-phase="capture"] .narr{position:relative; z-index:6}
}
@media (min-width:761px){
  .studio[data-phase="capture"]{grid-template-columns:minmax(300px,.58fr) minmax(0,1.42fr); align-items:start}
  .studio[data-phase="capture"] .narr{align-self:start; top:auto; padding-top:20px}
  .studio[data-phase="capture"] .np h2{font-size:clamp(28px,2.6vw,38px)}
}
@media (min-width:961px){ .welcome-art{margin-right:0} }
@media (min-width:761px){
  .np[data-np="capture"]:not([hidden]){display:flex; flex-direction:column}
  .np[data-np="capture"] > *{order:1}
  .np[data-np="capture"] #capBtn{order:2; align-self:flex-start; margin-bottom:14px}
  .np[data-np="capture"] .np-after{order:3}
  .np[data-np="capture"] .np-role{order:4; margin:6px 0 0}
}

/* ================= Shared capture stage: one component, two variants =================
   .capture-stage--chapter  the interactive Chapter 1 scene (#canvas)
   .capture-stage--welcome  a quieter, non-interactive copy for the opening page (.welcome-art)
   Both use the same plate, the same card faces, the same pill and light-path treatment. */
:root{
  --cs-plate:url("assets/capture-plate.jpg");
  --cs-card-left:53%; --cs-card-top:39%; --cs-card-w:40%;
  --cs-card-tilt:perspective(1100px) rotateX(9deg) rotateY(-12deg) rotateZ(4deg);
  --cs-pill-left:77.8%;
  --cs-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .34  0 0 0 0 .2  0 0 0 .085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the physical card: ivory stock with grain, warm gold edge light, soft layered shadow */
.capture-stage .hb-front{background:
    radial-gradient(130% 100% at 100% 0%, rgba(255,226,170,.28), transparent 46%),
    linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 32%),
    var(--cs-paper),
    linear-gradient(160deg,#fffdf8 0%,#f7f0e1 58%,#ede2cc 100%);
  box-shadow:inset 0 0 0 1px rgba(196,160,90,.32), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -.6cqw 1.6cqw rgba(150,110,50,.14)}
.capture-stage .hb-back{background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,226,170,.14), transparent 50%),
    var(--cs-paper),
    radial-gradient(120% 90% at 20% 0%, #1d4a66 0%, #13344b 45%, #0d2436 100%)}
@media (min-width:761px){
  .capture-stage--chapter[data-phase="capture"] .cv-card,.capture-stage--welcome .wa-card{
    box-shadow:
      0 0 0 1px rgba(232,198,128,.75),
      0 -1px 0 1px rgba(255,236,196,.55),
      0 0 18px rgba(255,206,130,.45),
      0 0 56px rgba(255,190,105,.28),
      0 2px 3px rgba(40,22,6,.18),
      0 22px 28px -14px rgba(40,22,6,.45),
      0 54px 74px -34px rgba(24,12,2,.55)}
  /* gentle extra depth: the warm edge catches light on the right */
  .capture-stage .hb-front::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(90deg, transparent 82%, rgba(255,214,150,.22) 97%, rgba(255,232,190,.45) 100%)}

  /* the scan plane continues into the lower-right atmosphere and fades out */
  .capture-stage--chapter[data-phase="capture"]::before{content:""; position:absolute; z-index:0; opacity:1; pointer-events:none;
    left:30%; right:-22%; top:90%; bottom:-60%;
    background-image:
      radial-gradient(50% 40% at 45% 6%, rgba(255,214,150,.34), transparent 72%),
      linear-gradient(rgba(160,228,218,.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(160,228,218,.18) 1px, transparent 1px);
    background-size:auto, 100% 30px, 30px 100%;
    transform:perspective(900px) rotateX(58deg) rotateZ(-7deg); transform-origin:50% 0;
    mix-blend-mode:screen;
    -webkit-mask-image:radial-gradient(46% 60% at 62% 30%, #000 0%, rgba(0,0,0,.5) 45%, transparent 100%);
    mask-image:radial-gradient(46% 60% at 62% 30%, #000 0%, rgba(0,0,0,.5) 45%, transparent 100%)}
  /* the warm environment behind Chapter 1 dissolves at the bottom instead of stopping on a line */
  .studio[data-phase="capture"]::before{-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 calc(100% - 130px), transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 calc(100% - 130px), transparent 100%)}
}

/* ---------- capture-stage--welcome: the same plate, card, pills and paths, quieter, no controls ---------- */
.capture-stage--welcome{background:var(--cs-plate) center / 100% 100% no-repeat !important; aspect-ratio:1257 / 710; height:auto !important; pointer-events:none; overflow:visible}
.capture-stage--welcome::before{content:none}
.capture-stage--welcome .wa-slab,.capture-stage--welcome .wa-beams,.capture-stage--welcome .wa-pad,.capture-stage--welcome .wa-lbl,.capture-stage--welcome .phone-mock{display:none !important}
/* card: same place, size and tilt as Chapter 1, floating gently */
.capture-stage--welcome .wa-card{position:absolute; z-index:3; left:var(--cs-card-left); top:var(--cs-card-top); width:var(--cs-card-w);
  transform:translate(-50%,-50%) var(--cs-card-tilt); animation:csFloat 7s ease-in-out infinite;
  box-shadow:0 0 0 1px rgba(232,198,128,.75), 0 -1px 0 1px rgba(255,236,196,.55), 0 0 18px rgba(255,206,130,.45), 0 0 56px rgba(255,190,105,.28), 0 2px 3px rgba(40,22,6,.18), 0 22px 28px -14px rgba(40,22,6,.45), 0 54px 74px -34px rgba(24,12,2,.55)}
/* pills: the same dark glass signals as Chapter 1 */
.capture-stage--welcome .wa-chip{z-index:3; left:var(--cs-pill-left) !important; right:auto !important; width:16.6%; min-width:0; transform:translateY(-50%) !important;
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:16px; font-size:clamp(11px,.9vw,14px); font-weight:600; line-height:1.25; white-space:normal; color:#f2f2ee;
  background:rgba(22,24,28,.62); border:1px solid rgba(255,255,255,.2); box-shadow:0 18px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(8px);
  opacity:1; animation:none}
.capture-stage--welcome .wa-chip svg{flex:0 0 auto; width:32px; height:32px; padding:7px; border-radius:50%}
.capture-stage--welcome .wa-chip.v svg{color:#e8fffb; background:radial-gradient(circle, rgba(121,207,196,.55), rgba(44,149,140,.35)); box-shadow:0 0 0 2px rgba(121,207,196,.7), 0 0 16px rgba(121,207,196,.55)}
.capture-stage--welcome .wa-chip.g svg{color:#fff1d0; background:radial-gradient(circle, rgba(232,180,90,.9), rgba(180,120,40,.7)); box-shadow:0 0 0 2px rgba(255,214,150,.6), 0 0 16px rgba(255,190,100,.5)}
.capture-stage--welcome .wa-chip.c1{top:16.3%} .capture-stage--welcome .wa-chip.c2{top:33.8%} .capture-stage--welcome .wa-chip.c3{top:51.1%}
/* light paths: the same gold lines, drawing slowly on a loop */
.capture-stage--welcome .wa-paths{display:block; z-index:2; animation:waReveal 6s var(--ease) -3.3s infinite}
.capture-stage--welcome .wa-paths path{stroke:#ffd89a; stroke-width:1.8; opacity:.95; filter:drop-shadow(0 0 4px rgba(255,200,110,.9)); animation:none}
@keyframes csFloat{0%,100%{margin-top:0} 50%{margin-top:-5px}}
@media (prefers-reduced-motion: reduce){ .capture-stage--welcome .wa-card,.capture-stage--welcome .wa-paths{animation:none; clip-path:none} }

/* desktop: on the right, bleeding to the edge, behind the tour choices */
@media (min-width:961px){
  .welcome{position:relative}
  .welcome-in{position:static}
  .welcome-copy{position:relative; z-index:2}
  .capture-stage--welcome{display:block; position:absolute !important; z-index:0; right:0; top:58px; left:auto; margin:0 !important; width:min(1180px,66vw);
    -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 22%, #000 46%), linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%) !important;
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 22%, #000 46%), linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%) !important;
    mask-composite:intersect; filter:saturate(.92) brightness(.9); opacity:.92}
  /* the plate's cream side becomes navy here, so it reads as one dark page */
  .capture-stage--welcome::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, #0f1d31 0%, rgba(15,29,49,.85) 26%, rgba(15,29,49,.25) 44%, transparent 56%), linear-gradient(0deg, rgba(15,29,49,.45), transparent 30%)}
}
/* phones and tablets: the same scene under the headline, cropped to the card and its signals */
@media (max-width:960px){
  .welcome-in{display:flex; flex-direction:column; gap:0}
  .welcome-copy{display:contents}
  .welcome-copy > *{order:3}
  .welcome-copy > .kicker,.welcome-copy > h1,.welcome-copy > .lede{order:1}
  .capture-stage--welcome{display:block !important; order:2; position:relative; flex:0 0 auto; width:154vw; max-width:none; margin:10px 0 4px calc(-0.31 * 154vw); z-index:0;
    -webkit-mask-image:linear-gradient(90deg, transparent 27%, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg, transparent 27%, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%); mask-composite:intersect}
  .capture-stage--welcome .wa-chip{font-size:11px; gap:6px; padding:6px 8px; border-radius:12px}
  .capture-stage--welcome .wa-chip svg{width:24px; height:24px; padding:5px}
}
@media (max-width:960px) and (min-width:600px){
  .capture-stage--welcome{width:140vw; margin-left:calc(-0.3 * 140vw)}
}

/* ================= Seven refinements ================= */
/* 2 · after capture the button confirms it, instead of greying out */
.np-act.is-done:disabled,.np-act.is-busy:disabled{opacity:1}
.np-act.is-busy{background:#2a3a52; border-color:#2a3a52}
.np-act.is-done{background:transparent; color:#1f6d65; border-color:rgba(44,149,140,.55); box-shadow:none}
.np-act.is-done .np-act-i{color:#2c958c; font-weight:700}
.studio.cap-done #capBtn.is-done{display:inline-flex}
.cap-again{order:2; align-self:flex-start; margin:-6px 0 14px 6px; font-size:13.5px; color:var(--gold-deep)}
.np[data-np="capture"] #capAgain{order:2}
/* 3 · before capture, the signals are faint outlines that light up once verified */
@media (min-width:761px){
  .canvas[data-phase="capture"]:is([data-stage="0"],[data-stage="1"],[data-stage="2"]) .cv-results li{opacity:1; color:rgba(255,255,255,.7);
    background:rgba(16,20,28,.16); border:1px dashed rgba(255,236,200,.42); box-shadow:none; backdrop-filter:blur(2px)}
  .canvas[data-phase="capture"]:is([data-stage="0"],[data-stage="1"],[data-stage="2"]) .cv-results li svg{background:transparent; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.38); color:rgba(255,255,255,.62); filter:none}
  .cv-results li,.cv-results li svg{transition:background .6s var(--ease), border-color .6s, color .6s, box-shadow .6s, opacity .6s}
}
/* 7 · on the profile step the smaller card keeps a "Captured" tag */
.canvas[data-phase="capture"][data-stage="4"] .cv-card::after{content:"\2713  Captured"; position:absolute; z-index:5; left:50%; top:-14px; transform:translateX(-50%) translateZ(1px);
  padding:4px 11px; border-radius:999px; background:#123c45; color:#c9f2ec; border:1px solid rgba(121,207,196,.6); font:600 11.5px/1.2 Inter,sans-serif; letter-spacing:.04em; white-space:nowrap; box-shadow:0 6px 14px rgba(0,0,0,.25)}

/* 1 + 6 · end of the tour: one main action, two quieter ones */
.path-cards{display:flex; flex-direction:column; gap:14px; text-align:left}
.path.path-main{flex-direction:row; align-items:center; gap:18px; padding:22px 26px}
.path-main img{width:56px; height:56px; margin:0; flex:0 0 auto}
.path-body{display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0}
.path-cta{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; background:var(--navy); color:#fff; font-weight:600; font-size:15px; white-space:nowrap; transition:transform .25s var(--ease), box-shadow .25s}
.path-main:hover .path-cta,.path-main:focus-visible .path-cta{transform:translateY(-1px); box-shadow:0 10px 22px rgba(10,22,40,.22)}
.path-more{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.path-sec{display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; font:inherit; padding:14px 18px; border-radius:14px; background:transparent; border:1px solid var(--rule); color:var(--ink); cursor:pointer; transition:border-color .25s, background .25s}
.path-sec:hover,.path-sec:focus-visible{border-color:var(--gold-deep); background:rgba(201,169,97,.06)}
.path-sec-t{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--navy)}
.path-sec-d{font-size:13.5px; color:var(--ink-3)}
@media (max-width:760px){
  .path.path-main{flex-direction:column; align-items:flex-start}
  .path-cta{align-self:stretch; justify-content:center}
  .path-more{grid-template-columns:1fr}
}

/* Snapshot chapter: the chapter bar is solid navy to match the stage, so nothing shows through while scrolling */
body.on-snapshot .rail{opacity:1; background:#0d1b2f; backdrop-filter:none; border-bottom:1px solid rgba(227,198,127,.16)}
body.on-snapshot .rail-step{color:rgba(232,236,242,.62)}
body.on-snapshot .rail-step[aria-current="step"]{color:#fff}
body.on-snapshot .rail-step .n{background:transparent; border-color:rgba(255,255,255,.28); color:rgba(232,236,242,.8)}
body.on-snapshot .rail-step.done .n{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:#e8ecf2}
body.on-snapshot .rail-step[aria-current="step"] .n{background:var(--gold); border-color:var(--gold); color:var(--navy)}
body.on-snapshot .rail-fill{background:rgba(255,255,255,.1)}
body.on-snapshot .key{color:rgba(232,236,242,.62)}

/* ================= Click targets that ask to be clicked ================= */
/* 1 + 6 · a soft gold halo breathes around the next action until it is used */
@keyframes ctaHalo{
  0%{box-shadow:0 0 0 0 rgba(227,198,127,.55), 0 10px 24px rgba(10,22,40,.18)}
  70%{box-shadow:0 0 0 12px rgba(227,198,127,0), 0 10px 24px rgba(10,22,40,.18)}
  100%{box-shadow:0 0 0 0 rgba(227,198,127,0), 0 10px 24px rgba(10,22,40,.18)}
}
@keyframes ctaSheen{0%,55%{transform:translateX(-120%)} 85%,100%{transform:translateX(220%)}}
#capBtn:not(:disabled):not(.is-done),#lensBtn:not(:disabled){position:relative; overflow:hidden; animation:ctaHalo 2.4s ease-out infinite; outline:1px solid rgba(227,198,127,.55); outline-offset:3px}
#capBtn:not(:disabled):not(.is-done)::after,#lensBtn:not(:disabled)::after{content:""; position:absolute; top:0; bottom:0; left:0; width:38%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,236,196,.28), transparent); animation:ctaSheen 3.6s ease-in-out infinite}
#capBtn:not(:disabled):not(.is-done):hover,#lensBtn:not(:disabled):hover{animation-play-state:paused}

/* 5 · the "tap a signal" hint reads as a callout, nudging toward the scene until a signal is tapped */
.np-hint{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:rgba(201,169,97,.12); border:1px solid rgba(201,169,97,.5); color:#6b4f12; font-size:14.5px; font-weight:600; box-shadow:0 6px 16px rgba(138,106,34,.12)}
.np-hint-i{flex:0 0 auto; color:var(--gold-deep)}
.np-hint-arrow{display:inline-block; color:var(--gold-deep); font-size:17px; animation:hintNudge 1.6s ease-in-out infinite}
@keyframes hintNudge{0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)}}
.studio:not(.ev-tapped) .np-hint{animation:ctaHaloSoft 2.6s ease-out infinite}
@keyframes ctaHaloSoft{0%{box-shadow:0 0 0 0 rgba(201,169,97,.45), 0 6px 16px rgba(138,106,34,.12)} 70%{box-shadow:0 0 0 10px rgba(201,169,97,0), 0 6px 16px rgba(138,106,34,.12)} 100%{box-shadow:0 0 0 0 rgba(201,169,97,0), 0 6px 16px rgba(138,106,34,.12)}}
.studio.ev-tapped .np-hint-arrow{animation:none}
@media (max-width:760px){ .np-hint-arrow{transform:rotate(90deg); animation:none} }

/* 7 · the follow-up note link is a clear, inviting button until it is opened */
.np-more{max-width:none}
.np-more summary{list-style:none; display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; background:#fff; border:1px solid rgba(201,169,97,.6); color:var(--navy); font-weight:600; font-size:15px; line-height:1.35; box-shadow:0 8px 20px rgba(10,22,40,.08); transition:border-color .25s, background .25s}
.np-more summary::-webkit-details-marker{display:none}
.np-more summary::after{content:"\203A"; margin-left:4px; font-size:20px; line-height:1; color:var(--gold-deep); transition:transform .25s var(--ease)}
.np-more[open] summary::after{transform:rotate(90deg)}
.np-more-i{flex:0 0 auto; color:var(--gold-deep)}
.np-more summary:hover,.np-more summary:focus-visible{border-color:var(--gold-deep); background:#fffaf0}
.np-more:not([open]) summary{animation:ctaHaloSoft 2.6s ease-out infinite}

/* 3 · the three capture results light up one at a time, each with its own colour */
@media (min-width:761px){
  .canvas[data-phase="capture"]:is([data-stage="0"],[data-stage="1"],[data-stage="2"]) .cv-results li{color:rgba(255,255,255,.86); background:rgba(16,20,28,.32); border-color:rgba(255,236,200,.62)}
  .canvas[data-phase="capture"]:is([data-stage="0"],[data-stage="1"],[data-stage="2"]) .cv-results li svg{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); color:rgba(255,255,255,.8)}
}
@keyframes pillLightV{
  0%{opacity:1; background-color:rgba(16,20,28,.32); border-color:rgba(255,236,200,.62); border-style:dashed; box-shadow:none}
  40%{border-style:solid; border-color:rgba(121,207,196,.95); box-shadow:0 0 0 6px rgba(121,207,196,.22), 0 0 34px rgba(121,207,196,.55)}
  100%{opacity:1; border-style:solid; border-color:rgba(121,207,196,.55); box-shadow:0 18px 34px rgba(0,0,0,.35), 0 0 18px rgba(121,207,196,.25)}
}
@keyframes pillLightG{
  0%{opacity:1; background-color:rgba(16,20,28,.32); border-color:rgba(255,236,200,.62); border-style:dashed; box-shadow:none}
  40%{border-style:solid; border-color:rgba(255,214,150,.95); box-shadow:0 0 0 6px rgba(255,200,120,.22), 0 0 34px rgba(255,190,100,.55)}
  100%{opacity:1; border-style:solid; border-color:rgba(255,214,150,.55); box-shadow:0 18px 34px rgba(0,0,0,.35), 0 0 18px rgba(255,190,100,.25)}
}
@keyframes pillIcon{0%{filter:grayscale(1) brightness(.85); transform:scale(1)} 40%{filter:none; transform:scale(1.18)} 100%{filter:none; transform:scale(1)}}
@keyframes pathIn{0%{opacity:0} 100%{opacity:.95}}
.canvas[data-phase="capture"][data-stage="3"] .cv-results li{transition:none}
.canvas[data-phase="capture"][data-stage="3"] .cv-results .v{animation:pillLightV 1s var(--ease) both}
.canvas[data-phase="capture"][data-stage="3"] .cv-results .g{animation:pillLightG 1s var(--ease) both}
.canvas[data-phase="capture"][data-stage="3"] .cv-results li svg{animation:pillIcon 1s var(--ease) both}
.canvas[data-phase="capture"][data-stage="3"] .cv-results .r1,.canvas[data-phase="capture"][data-stage="3"] .cv-results .r1 svg{animation-delay:.3s}
.canvas[data-phase="capture"][data-stage="3"] .cv-results .r2,.canvas[data-phase="capture"][data-stage="3"] .cv-results .r2 svg{animation-delay:1.2s}
.canvas[data-phase="capture"][data-stage="3"] .cv-results .r3,.canvas[data-phase="capture"][data-stage="3"] .cv-results .r3 svg{animation-delay:2.1s}
.canvas[data-phase="capture"][data-stage="3"] .lp{animation:pathIn .7s var(--ease) both}
.canvas[data-phase="capture"][data-stage="3"] .lp1{animation-delay:0s} .canvas[data-phase="capture"][data-stage="3"] .lp2{animation-delay:.9s} .canvas[data-phase="capture"][data-stage="3"] .lp3{animation-delay:1.8s}
.canvas[data-phase="capture"][data-stage="3"] .cv-paths{transition-duration:2.6s}

@media (prefers-reduced-motion: reduce){
  #capBtn,#lensBtn,.np-hint,.np-more summary,.np-hint-arrow{animation:none !important}
  #capBtn::after,#lensBtn::after{display:none}
  .canvas[data-phase="capture"][data-stage="3"] .cv-results li,.canvas[data-phase="capture"][data-stage="3"] .cv-results li svg,.canvas[data-phase="capture"][data-stage="3"] .lp{animation:none}
}

/* ================= Brand architecture ================= */
.kicker-by{margin:-6px 0 14px; font-size:13px; letter-spacing:.02em; color:rgba(220,226,234,.62)}
.kicker-by::before{content:""; display:inline-block; width:18px; height:1px; margin:0 8px 3px 0; background:rgba(227,198,127,.55); vertical-align:middle}
@media (max-width:960px){ .welcome-copy > .kicker-by{order:1} }
.unveil-sub{display:block; margin-top:4px; font-size:.78em; font-style:normal; opacity:.75}
button.path-main{font:inherit; text-align:left; width:100%; cursor:pointer}
a.path-sec{text-decoration:none}
.path-sec-img{width:22px; height:22px; border-radius:50%; object-fit:cover}
.foot-r{display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap}
.powered{font-size:12px; letter-spacing:.04em; color:#5d666f}
/* product promise: a quiet line between the eyebrow and the headline; the AI-Disruptors identifier sits beside the eyebrow */
.welcome-copy > .kicker{display:inline-block; vertical-align:baseline}
.welcome-copy > .kicker-by{display:inline-block; vertical-align:baseline; margin:0 0 0 14px}
.promise{margin:10px 0 14px; font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.5vw,20px); line-height:1.35; color:rgba(232,220,192,.82)}
@media (max-width:960px){ .welcome-copy > .promise{order:1} .welcome-copy > .kicker-by{margin:0} }
@media (max-width:960px){ .welcome-copy > .kicker,.welcome-copy > .kicker-by{align-self:flex-start; text-align:left} .welcome-copy > .kicker-by{margin:2px 0 0} }

/* ================= The page presents itself: AI-Disruptors · Prospect Engine ================= */
.brand-t{display:inline-flex; align-items:center; gap:12px}
.brand-p{position:relative; padding-left:13px; font-weight:500; color:rgba(240,232,214,.92); letter-spacing:.01em}
.brand-p::before{content:""; position:absolute; left:0; top:50%; width:1px; height:16px; transform:translateY(-50%); background:rgba(227,198,127,.55)}
@media (max-width:520px){
  .brand-t{flex-direction:column; align-items:flex-start; gap:1px; line-height:1.15}
  .brand-p{padding-left:0; font-size:12px; color:var(--gold-bright)}
  .brand-p::before{content:none}
}

/* ================= Welcome opening beat (fresh load only, 1.5 s, nothing waits on it) ================= */
.cs-veil,.cs-bloom{position:absolute; pointer-events:none; opacity:0}
.anticipate{margin:20px 0 6px; font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.4; color:rgba(232,220,192,.72)}
@media (max-width:960px){ .anticipate{margin:6px 0 10px} }
@media (prefers-reduced-motion: no-preference){
  /* the scan plane surfaces: a navy veil over the lower scene lifts */
  .capture-stage--welcome.cs-intro .cs-veil{display:block; left:0; right:0; top:52%; bottom:0; z-index:2;
    background:linear-gradient(180deg, rgba(13,27,47,0) 0%, rgba(13,27,47,.92) 26%, rgba(13,27,47,.96) 100%);
    animation:csVeil .9s cubic-bezier(.22,.61,.36,1) .15s both}
  /* the warm capture light blooms, then settles back */
  .capture-stage--welcome.cs-intro .cs-bloom{display:block; z-index:2; left:30%; top:20%; width:48%; height:62%; border-radius:50%;
    background:radial-gradient(closest-side, rgba(255,206,130,.55), rgba(255,180,100,.18) 55%, transparent 80%); mix-blend-mode:screen; filter:blur(10px);
    animation:csBloom 1.3s ease-out .1s both}
  /* the card resolves from soft to sharp and settles up a few pixels */
  .capture-stage--welcome.cs-intro .wa-card{animation:csCardIn .95s cubic-bezier(.22,.61,.36,1) both, csFloat 7s ease-in-out .95s infinite}
  /* the paths draw, then the pills arrive one by one */
  .capture-stage--welcome.cs-intro .wa-paths{animation:csPaths .6s cubic-bezier(.22,.61,.36,1) .55s both}
  .capture-stage--welcome.cs-intro .wa-chip{animation:csChip .4s cubic-bezier(.22,.61,.36,1) both}
  .capture-stage--welcome.cs-intro .wa-chip.c1{animation-delay:.7s}
  .capture-stage--welcome.cs-intro .wa-chip.c2{animation-delay:.85s}
  .capture-stage--welcome.cs-intro .wa-chip.c3{animation-delay:1s}
  /* the line of anticipation fades in after the promise */
  .anticipate.cs-intro{animation:csFade .5s ease-out 1s both}
}
@keyframes csVeil{from{opacity:1} to{opacity:0}}
@keyframes csBloom{0%{opacity:0} 45%{opacity:1} 100%{opacity:0}}
@keyframes csCardIn{from{filter:blur(6px); opacity:.55; translate:0 9px} to{filter:blur(0); opacity:1; translate:0 0}}
@keyframes csPaths{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes csChip{from{opacity:0; translate:-8px 0} to{opacity:1; translate:0 0}}
@keyframes csFade{from{opacity:0} to{opacity:1}}

/* Capture label: readable over the bright glow. It sits above the canvas's soft bottom fade
   (which was washing it out) on an opaque navy glass with light text. */
@media (min-width:761px){
  .canvas[data-phase="capture"] .cv-surface-lbl{bottom:8.5%; top:auto}
}
.canvas[data-phase="capture"] .cv-surface-lbl{background:rgba(11,22,38,.9); color:#f5f1e8; border:1px solid rgba(227,198,127,.35);
  box-shadow:0 6px 18px rgba(8,14,24,.45), 0 0 0 4px rgba(11,22,38,.12); backdrop-filter:blur(6px); font-weight:600; text-shadow:none}
.canvas[data-phase="capture"] .cv-surface-lbl svg{color:#8fe0d4}

/* ================= Public launch ================= */
.rail-fiction{font-size:12px; letter-spacing:.04em; color:var(--ink-3); border-bottom:1px dotted rgba(138,106,34,.5); cursor:help; margin-left:auto}
.rail-fiction + .rail-skip{margin-left:16px}
body.on-snapshot .rail-fiction{color:rgba(232,236,242,.62)}
@media (max-width:760px){
  .rail-side{display:grid; grid-template-columns:1fr auto; column-gap:12px; row-gap:2px; align-items:center}
  .rail-side .key{grid-column:1; grid-row:1}
  .rail-fiction{grid-column:1; justify-self:start; margin-left:0; font-size:11px; line-height:1.35}
  .rail-fiction .rf-x{display:none}
  .rail-side .rail-skip{grid-column:2; grid-row:1 / span 2; margin-left:0}
}
.p-turnstile{margin:6px 0 12px; min-height:65px}
.ts-fallback{margin:0 0 12px; padding:10px 14px; border-radius:12px; background:#fdf3d9; border:1px solid #e6cf91; font-size:14px; line-height:1.5; color:var(--ink-2)}
.ts-fallback:empty{display:none}
.ts-fallback a{color:var(--navy); font-weight:600}
.p-turnstile:empty:has(+ .ts-fallback:not(:empty)){display:none}
.pe-faq{max-width:1100px; margin:0 auto; padding:40px 28px 8px}
.pe-faq h2{font-family:var(--serif); font-weight:500; font-size:22px; color:var(--navy); margin:0 0 12px}
.pe-faq-i{border-top:1px solid var(--rule-soft); padding:12px 0}
.pe-faq-i summary{cursor:pointer; font-weight:600; color:var(--navy); font-size:15px}
.pe-faq-i p{margin:8px 0 0; max-width:72ch; color:var(--ink-2); font-size:14.5px; line-height:1.6}
.studio.cap-done #capBtn.is-done{display:inline-flex !important}

/* ================= Way back to the main site ================= */
.top-back{margin-right:auto; margin-left:22px; padding:6px 2px; font-size:13px; font-weight:500; letter-spacing:.01em; color:rgba(232,236,242,.72); text-decoration:none; white-space:nowrap; border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
.top-back:hover,.top-back:focus-visible{color:#fff; border-bottom-color:rgba(227,198,127,.6)}
@media (max-width:620px){
  .top{flex-wrap:wrap; row-gap:0}
  .top-back{order:3; flex:1 0 100%; margin:6px 0 -4px; padding:4px 0; font-size:12.5px}
  .tour-top{top:84px}
}

/* ================= An example closer to your world (optional field choice) ================= */
.field-pick{margin:22px 0 4px; padding:16px 18px 14px; border-radius:16px; border:1px solid rgba(227,198,127,.22); background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); max-width:640px}
.fp-k{margin:0; font-family:var(--serif); font-size:18px; color:#f4efe4}
.fp-sub{margin:4px 0 12px; font-size:13.5px; color:#b9c2cf}
.fp-chips{display:flex; flex-wrap:wrap; gap:8px}
.fp-chip{font:inherit; font-size:13.5px; font-weight:600; color:#e9edf3; padding:8px 14px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(227,198,127,.32); transition:background .25s, border-color .25s, color .25s, box-shadow .25s}
.fp-chip:hover,.fp-chip:focus-visible{border-color:var(--gold-bright); background:rgba(227,198,127,.08); outline:none; box-shadow:0 0 0 3px rgba(227,198,127,.18)}
.fp-chip:focus-visible{outline:3px solid rgba(227,198,127,.9); outline-offset:2px}
.fp-chip[aria-pressed="true"]{background:linear-gradient(150deg, rgba(227,198,127,.95), rgba(201,169,97,.9)); border-color:transparent; color:#0f1d31}
.fp-chip[aria-pressed="true"]::before{content:"\2713\00a0"}
.fp-keep{background:transparent; border-style:dashed}
.fp-keep[aria-pressed="true"]{background:rgba(255,255,255,.1); color:#f4efe4; border:1px solid rgba(255,255,255,.28)}
.fp-status{margin:10px 0 0; font-size:13.5px; line-height:1.5; color:#d9c99f; min-height:0}
.fp-status:empty{display:none}
@media (max-width:760px){ .field-pick{padding:14px} .fp-chip{font-size:13px; padding:8px 12px} }

/* the end note: based only on the visitor's own choice */
.field-note{margin:6px auto 22px; max-width:720px; text-align:left; padding:18px 20px; border-radius:14px; background:#fffdf7; border:1px solid rgba(201,169,97,.45); border-left:4px solid var(--gold); box-shadow:0 10px 24px rgba(10,22,40,.06)}
.fn-k{margin:0 0 6px; font-family:var(--serif); font-size:18px; color:var(--navy)}
.fn-t{margin:0; font-size:15px; line-height:1.6; color:var(--ink-2)}
.fn-disc{margin:10px 0 0; font-size:12.5px; color:var(--ink-3); font-style:italic}
.custom-clear{margin-left:10px; font-size:13px; color:var(--gold-bright)}
.fp-st-k{display:block; color:#f4efe4; font-family:var(--serif); font-weight:500; font-size:15.5px; margin-bottom:2px}
.fp-clear{display:inline-block; margin-top:8px; font-size:13px; color:var(--gold-bright)}
.fp-clear[hidden]{display:none}

/* ================= Welcome v2: the field choice is part of the opening decision ================= */
.field-pick{margin:18px 0 6px; padding:0; border:0; background:none; max-width:680px}
.fp-k{font-size:19px}
.fp-sub{margin:3px 0 11px}
.fp-chips{gap:8px}
.fp-chip{padding:8px 15px}
.fp-other{border-style:dashed}
.fp-other[aria-expanded="true"]:not([aria-pressed="true"]){background:rgba(227,198,127,.1); border-style:solid; border-color:var(--gold-bright)}
.fp-custom{margin:12px 0 2px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(227,198,127,.25); max-width:560px; animation:fpIn .35s var(--ease) both}
.fp-custom[hidden]{display:none}
@keyframes fpIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.fp-c-l{display:block; font-family:var(--serif); font-size:16px; color:#f4efe4}
.fp-c-hint{margin:2px 0 8px; font-size:12.5px; color:#aeb8c6}
.fp-c-row{display:flex; gap:8px}
.fp-c-row input{flex:1 1 auto; min-width:0; font:inherit; font-size:15px; padding:9px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.22); background:rgba(8,16,28,.6); color:#f4efe4}
.fp-c-row input:focus{outline:none; border-color:var(--gold-bright); box-shadow:0 0 0 3px rgba(227,198,127,.22)}
.fp-c-row input[aria-invalid="true"]{border-color:#e7a17a}
.fp-c-go{flex:0 0 auto; font:inherit; font-weight:600; font-size:14px; padding:9px 16px; border-radius:10px; border:0; cursor:pointer; color:#0f1d31; background:linear-gradient(150deg, rgba(227,198,127,.98), rgba(201,169,97,.92))}
.fp-c-go:focus-visible{outline:2px solid #fff; outline-offset:2px}
.fp-c-err{margin:6px 0 0; font-size:13px; color:#f0b48f}
.fp-c-err:empty{display:none}
.field-pick + .anticipate{margin-top:16px}
@media (max-width:760px){
  .fp-chips{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .fp-chip{text-align:center; padding:10px 8px; font-size:13px; line-height:1.25}
  .fp-chip[aria-pressed="true"]::before{content:"\2713\00a0"}
}
@media (prefers-reduced-motion: reduce){ .fp-custom{animation:none} }
@media (min-width:761px){
  .fp-chips{flex-wrap:nowrap; gap:7px}
  .fp-chip{font-size:13px; padding:7px 13px; white-space:nowrap}
  .field-pick{margin-top:14px}
  .fp-sub{margin-bottom:9px}
  .field-pick + .anticipate{margin-top:12px}
}
@media (min-width:761px) and (max-width:1100px){ .fp-chips{flex-wrap:wrap} }

/* ================= Phones: the field choice starts as one compact row ================= */
.fp-compact{display:none}
@media (max-width:760px){
  .fp-compact{display:block; padding:12px 14px; border-radius:14px; border:1px solid rgba(227,198,127,.28); background:rgba(255,255,255,.035)}
  .fp-cmp-k{display:block; font-family:var(--serif); font-size:16px; color:#f4efe4}
  .fp-cmp-row{display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:4px}
  .fp-cmp-v{flex:1 1 auto; min-width:0; font-size:13.5px; color:#d9c99f}
  .fp-cmp-btn,.fp-cmp-clear{font:inherit; font-size:13.5px; font-weight:600; background:none; border:0; padding:6px 2px; cursor:pointer; color:var(--gold-bright); text-decoration:underline; text-underline-offset:3px}
  .fp-cmp-clear{color:#c7cfda}
  .fp-cmp-clear[hidden]{display:none}
  .field-pick:not(.open) .fp-body{display:none}
  .field-pick.open .fp-body{margin-top:12px}
  .field-pick.open .fp-body > .fp-k,.field-pick.open .fp-body > .fp-sub{display:none}
}
@media (max-width:760px) and (prefers-reduced-motion: no-preference){ .field-pick.open .fp-body{animation:fpIn .3s var(--ease) both} }