@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/InstrumentSans-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/InstrumentSans-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{
  --bg:#f7f4ee; --panel:#fffdf9; --ink:#1e1b16; --ink2:#5a554b; --line:#ddd6c8;
  --accent:#005375; --accent-ink:#fff; --dim:rgba(22,20,15,.18); --ring:#f2b441;
  --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0f0d09; --panel:#1c1912; --ink:#f0ece2; --ink2:#b9b2a2; --line:#3a352a;
    --accent:#3e93b8; --accent-ink:#06151c; --dim:rgba(0,0,0,.34); --ring:#f2b441; }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.app{display:flex;flex-direction:column;height:100dvh;min-height:0}
.bar{display:flex;align-items:center;gap:16px;padding:10px 20px;border-bottom:1px solid var(--line);flex:none}
.brand{font-weight:650;letter-spacing:.01em}
.brand-sub{font-weight:400;color:var(--ink2);margin-left:4px}
.bar-mid{flex:1;color:var(--ink2);font-size:.9rem}
.linkbtn{background:none;border:0;color:var(--accent);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:underline;padding:4px}
.eyebrow,.kicker{margin:0 0 6px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}

/* choice */
.choice{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:24px 20px}
.choice-inner{max-width:760px;width:100%}
.choice h1{font-size:clamp(1.8rem,4.5vw,2.8rem);line-height:1.12;margin:0 0 14px;font-weight:600;letter-spacing:-.01em}
.choice h2{font-size:1.1rem;margin:28px 0 12px;font-weight:600}
.say{margin:0;color:var(--ink2);font-style:italic;max-width:60ch}
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chapter{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.chapter:hover,.chapter:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.chapter strong{display:block;font-size:1.1rem;margin-bottom:4px}
.chapter span{color:var(--ink2);font-size:.9rem}
.fine{margin-top:22px;color:var(--ink2);font-size:.85rem}

/* stage */
.stage{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.stage[hidden],.choice[hidden]{display:none}
.progress{height:4px;background:var(--line);flex:none}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .25s}
.frame{position:relative;flex:1;min-height:0;overflow:hidden;background:#fff}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.frame img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.frame.winmode{background:var(--bg)}
.frame.winmode img{border-radius:8px;box-shadow:0 14px 40px rgba(40,30,15,.16),0 0 0 1px rgba(40,30,15,.12)}
.backdrop{position:absolute;inset:0;background:
  radial-gradient(circle at 20% 15%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 45%),var(--bg)}
.shield{position:absolute;inset:0}
.spot{position:absolute;border-radius:8px;box-shadow:0 0 0 9999px var(--dim);outline:3px solid var(--ring);outline-offset:0;
  pointer-events:none;transition:left .2s,top .2s,width .2s,height .2s}
.spot button{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;cursor:pointer;pointer-events:auto;border-radius:8px}
.spot::after{content:"";position:absolute;inset:-3px;border-radius:10px;border:3px solid var(--ring);animation:pulse 1.8s ease-out infinite;pointer-events:none}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.12,1.35);opacity:0}}
.stage.nospot .spot{display:none}

/* caption card: floats over the stage on wide screens */
.caption{position:absolute;z-index:3;width:min(380px,calc(100% - 32px));background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.caption h2{margin:0 0 6px;font-size:1.15rem;line-height:1.25;font-weight:620}
.caption .text{margin:0 0 8px}
.caption .say{margin:0 0 10px;padding-left:10px;border-left:3px solid var(--accent);color:var(--ink)}
.caption .say:empty,.caption .text:empty{display:none}
.nav{display:flex;align-items:center;gap:10px;margin-top:12px}
.count{flex:1;text-align:center;color:var(--ink2);font-size:.85rem}
.btn{font:inherit;padding:8px 16px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn[disabled]{opacity:.4;cursor:default}
.btn:focus-visible,.quiet:focus-visible,.linkbtn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.cta{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:6px 0 4px}
.cta .btn{font-size:1.05rem;padding:11px 20px}
.quiet{color:var(--ink2);font-size:.9rem}
.stage.cardmode .caption{left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));padding:26px 28px}
.stage.cardmode .caption h2{font-size:1.5rem}
.stage.cardmode .caption .text{font-size:1.08rem}
.stage.cardmode .shield,.stage.cardmode iframe,.stage.cardmode img{display:none}

@media (max-width:700px){
  .bar{padding:8px 14px}.bar-mid{display:none}.brand-sub{display:none}
  .chapters{grid-template-columns:1fr}
  .stage{display:flex}
  .caption{position:static;width:auto;border-radius:0;border-width:1px 0 0;box-shadow:none;max-height:46dvh;overflow:auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .stage.cardmode .caption{position:absolute;left:16px!important;right:16px;width:auto;transform:translateY(-50%);top:50%!important;border-width:1px;border-radius:12px;max-height:80dvh}
  .stage.cardmode .caption{transform:translateY(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .spot::after{animation:none;opacity:.6;transform:none}
  .spot,.progress span{transition:none}
}
.loaderr{padding:24px;margin:0}

/* zoom: iframe, image and spotlight scale together around the target */
.zoom{position:absolute;inset:0;transform-origin:0 0;transition:transform .4s ease;will-change:transform}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top-bar buttons */
.askbtn{font:inherit;font-size:.9rem;padding:6px 14px;border-radius:999px;border:1px solid var(--accent);background:var(--panel);color:var(--accent);cursor:pointer;font-weight:600}
.askbtn:hover,.askbtn[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink)}
.askbtn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* prehandled worry under the caption */
.worry{display:block;margin:0 0 10px;padding:6px 10px;border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--ink2);font:inherit;font-size:.88rem;text-align:left;cursor:pointer}
.worry:hover,.worry:focus-visible{border-color:var(--accent);color:var(--ink);outline:none}
.worry:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* show me more menu */
.more{position:fixed;z-index:20;top:52px;right:90px;width:min(340px,calc(100% - 32px));background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.22);padding:8px}
.more button{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-radius:8px;padding:10px 12px;cursor:pointer}
.more button:hover,.more button:focus-visible{background:color-mix(in srgb,var(--accent) 10%,transparent);outline:none}
.more button:focus-visible{outline:2px solid var(--accent)}
.more strong{display:block}
.more span{color:var(--ink2);font-size:.86rem}

/* guide panel */
.guide{position:fixed;z-index:30;right:16px;top:56px;bottom:16px;width:min(410px,calc(100% - 32px));display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.28)}
.guide[hidden]{display:none}
.guide-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 4px}
.guide-note{margin:0;padding:0 16px 8px;color:var(--ink2);font-size:.8rem;border-bottom:1px solid var(--line)}
.guide-log{flex:1;min-height:0;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:92%;padding:9px 12px;border-radius:12px;line-height:1.42;font-size:.95rem}
.msg.bot{background:color-mix(in srgb,var(--accent) 9%,var(--panel));border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--accent);color:var(--accent-ink);align-self:flex-end;border-bottom-right-radius:4px}
.msg p{margin:0}
.msg .row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.opt{font:inherit;font-size:.88rem;padding:6px 11px;border-radius:999px;border:1px solid var(--accent);background:var(--panel);color:var(--accent);cursor:pointer;text-decoration:none;display:inline-block}
.opt:hover,.opt:focus-visible{background:var(--accent);color:var(--accent-ink);outline:none}
.opt:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.opt.cta{background:var(--accent);color:var(--accent-ink);font-weight:600}
.opt[disabled]{opacity:.45;cursor:default}
.guide-chips{display:flex;flex-wrap:wrap;gap:6px;padding:6px 16px 4px;max-height:96px;overflow:auto}
.guide-form{display:flex;gap:8px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.guide-form input{flex:1;min-width:0;font:inherit;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.guide-form input:focus-visible{outline:3px solid var(--ring);outline-offset:1px;border-color:var(--accent)}
@media (max-width:700px){
  .askbtn{padding:5px 11px}
  .more{top:48px;right:12px;left:12px;width:auto}
  .guide{left:0;right:0;bottom:0;top:auto;width:auto;height:72dvh;border-radius:14px 14px 0 0}
}
@media (prefers-reduced-motion:reduce){.zoom{transition:none}}

/* presenter's pen: marks layer sits in the zoom wrapper, so it scales with the screen */
:root{--mk-pen:#d92d20;--mk-hl:rgba(255,212,59,.5);--mk-ok:#1a8f4c;--mk-blend:multiply}
@media (prefers-color-scheme:dark){:root{--mk-pen:#ff6b5e;--mk-hl:rgba(255,212,59,.34);--mk-ok:#4ad38a;--mk-blend:normal}}
.marks{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.mk-pen{stroke:var(--mk-pen)}
.mk-hl{stroke:var(--mk-hl);mix-blend-mode:var(--mk-blend)}
.mk-ok{stroke:var(--mk-ok)}
.badges{position:absolute;inset:0;pointer-events:none}
.mk-badge{position:absolute;z-index:2;padding:9px 14px;border-radius:12px;background:var(--panel);color:var(--ink);font-size:1.3rem;font-weight:650;line-height:1.3;border:2.5px solid var(--mk-pen);box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:0;transition:opacity .25s ease,margin .25s ease;margin-top:6px}
.mk-badge.on{opacity:1;margin-top:0}
.mk-ok.mk-badge,.mk-badge.mk-ok{border-color:var(--mk-ok)}
.mk-badge.mk-note{border-color:var(--accent)}
.mk-cursor{position:absolute;left:0;top:0;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.mk-ripple{position:absolute;width:34px;height:34px;border-radius:50%;border:3px solid var(--mk-pen);pointer-events:none;animation:mkr .7s ease-out forwards}
@keyframes mkr{from{opacity:.9;width:10px;height:10px}to{opacity:0;width:54px;height:54px}}
/* steps that carry marks: the marks do the pointing, so no dim and no ring */
.stage.marked .spot{box-shadow:none;outline:none}
.stage.marked .spot::after{display:none}
@media (prefers-reduced-motion:reduce){.mk-badge{transition:none}.mk-ripple{animation:none;display:none}}

@media (max-width:700px){
  /* on a phone the caption below the screen carries each badge's point; floating badges only cover rows */
  .mk-badge{display:none}
  header .brand,.brand{white-space:nowrap}
  .bar{gap:8px;padding-left:12px;padding-right:12px}
  .brand{font-size:.85rem}.brand-sub{display:none}
  .linkbtn,.askbtn{white-space:nowrap;font-size:.72rem}
  .askbtn{padding:5px 9px}
  /* shorter labels so the whole bar fits 360px; the full text stays in the DOM for screen readers */
  #moreBtn,#restart{font-size:0}
  #moreBtn::after{content:'More';font-size:.75rem}
  #restart::after{content:'Change';font-size:.75rem}
}

/* v3: persistent sign-up link, what-you-will-see list, loading line */
.linkbtn.strong{font-weight:650;text-decoration:none;border:1.5px solid var(--accent);border-radius:999px;padding:5px 12px;color:var(--accent)}
.linkbtn.strong:hover{background:var(--accent);color:var(--accent-ink)}
.sees{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:6px;text-align:left}
.sees li{position:relative;padding-left:22px;line-height:1.35}
.sees li::before{content:"";position:absolute;left:3px;top:.45em;width:9px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.stage.loading .frame::after{content:"Opening the real product screen";position:absolute;inset:0;display:grid;place-items:center;background:var(--panel);color:var(--ink);font-size:1rem;z-index:3}
@media (max-width:700px){
  .bar{flex-wrap:nowrap}
  .linkbtn.strong{padding:4px 9px;font-size:.75rem}
  #askBtn{font-size:0}
  #askBtn::after{content:'Ask';font-size:.75rem}
}

#count{white-space:nowrap}

/* v3 iterations: numbered next-steps, sample link, idle nudge */
.steps3{margin:10px 0 4px;padding-left:1.3em;display:grid;gap:4px;line-height:1.35}
#capLink{display:inline-block;margin:6px 0 2px;font-size:.9rem}
.askbtn.nudge{box-shadow:0 0 0 3px var(--ring);animation:szpulse 1.6s ease-in-out 3}
@keyframes szpulse{0%,100%{box-shadow:0 0 0 3px var(--ring)}50%{box-shadow:0 0 0 8px transparent}}
@media (prefers-reduced-motion:reduce){.askbtn.nudge{animation:none}}
@media (max-width:700px){
  .steps3{margin:4px 0 2px;gap:1px;font-size:.82rem;line-height:1.25}
  .caption .cta{gap:4px}
  #ctaShare,#diveNext{font-size:.8rem;padding:2px 0}
  #capSay:empty{display:none}
}

/* v3 brand + hero (matches the home page V8: logo, serif headline, filled teal button, sample report card) */
:root{--serif:"Fraunces","Iowan Old Style",Georgia,serif;--sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--orange:#c4501a;--neg:#b3261e}
@media (prefers-color-scheme:dark){:root{--orange:#ff8a52;--neg:#ff8a80}}
body{font-family:var(--sans)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.05rem;letter-spacing:-.005em}
.brand img{display:block}
.linkbtn.strong{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700;padding:7px 16px}
.linkbtn.strong:hover{filter:brightness(1.12);background:var(--accent);color:var(--accent-ink)}
.choice{align-items:flex-start;padding:clamp(24px,6vh,64px) 24px}
.choice-inner{max-width:1120px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center}
.choice h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.08;letter-spacing:-.015em}
.eyebrow{color:var(--orange);font-weight:700;letter-spacing:.14em}
.choice .say{font-style:normal;font-size:1.08rem;color:var(--ink2)}
.sees li{font-size:1.02rem}
.choice h2{font-family:var(--sans);font-weight:700;font-size:1.05rem;margin:26px 0 12px}
.chapter{border-top:3px solid var(--accent);position:relative;padding:15px 16px 16px;transition:transform .12s,box-shadow .12s}
.chapter:hover,.chapter:focus-visible{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,83,117,.16)}
.chapter strong{font-size:1.05rem}
.chapter::after{content:"\2192";position:absolute;right:14px;top:14px;color:var(--accent);font-weight:700}
.hero-card{position:relative;padding:28px;border-radius:14px;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,83,117,.07) 6px 7px),var(--bg);border:1px solid var(--line)}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:0 10px 30px rgba(30,27,22,.10);font-size:.85rem}
.rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.rc-head strong{display:block;font-size:.95rem}.rc-head span{color:var(--ink2);font-size:.78rem}
.rc-head em{font-style:normal;font-size:.72rem;font-weight:700;color:var(--orange);border:1px solid var(--orange);border-radius:999px;padding:2px 9px;white-space:nowrap}
.rc-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.rc-stats>div{padding:10px 12px;border-right:1px solid var(--line)}.rc-stats>div:last-child{border-right:0}
.rc-stats span{display:block;color:var(--ink2);font-size:.7rem;margin-bottom:3px}
.rc-stats b{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:1rem}.rc-stats b.neg{color:var(--neg)}
.rc-sec{margin:14px 0 6px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.rc-row{display:flex;justify-content:space-between;padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--neg);border-radius:6px;font-family:ui-monospace,Menlo,monospace}
.rc-row b{color:var(--neg)}
.rc-foot{display:flex;justify-content:space-between;margin:14px 0 0;color:var(--ink2);font-size:.7rem}
@media (max-width:900px){.choice-inner{grid-template-columns:1fr}.hero-card{display:none}}
@media (max-width:700px){.choice{padding:18px 16px}.linkbtn.strong{padding:5px 12px}.brand span{font-size:.95rem}}

/* caption anchored to its target, with a pointer; ring-only focus where the dark surround is distracting */
.spot.nodim{box-shadow:none}
@media (min-width:701px){
  .caption[data-arrow]{box-shadow:0 10px 34px rgba(0,0,0,.22);transition:left .25s,top .25s}
  .caption[data-arrow]::before{content:"";position:absolute;width:14px;height:14px;background:var(--panel);transform:rotate(45deg);border:1px solid var(--line)}
  .caption[data-arrow=below]::before{top:-8px;left:calc(var(--ax) - 7px);border-right:0;border-bottom:0}
  .caption[data-arrow=above]::before{bottom:-8px;left:calc(var(--ax) - 7px);border-left:0;border-top:0}
  .caption[data-arrow=right]::before{left:-8px;top:calc(var(--ay) - 7px);border-right:0;border-top:0}
  .caption[data-arrow=left]::before{right:-8px;top:calc(var(--ay) - 7px);border-left:0;border-bottom:0}
}
button.quiet{background:none;border:0;font:inherit;font-size:.9rem;color:var(--ink2);text-decoration:underline;cursor:pointer;padding:2px 0;text-align:left}
button.quiet:hover{color:var(--accent)}
button.quiet:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
@media (max-width:700px){#capList{display:none}}

/* V8 start card pieces: quiet start-free link, guarantee box, preview line */
.startfree{margin:10px 0 0}
.startfree a{color:var(--ink2);font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.startfree a:hover{color:var(--accent)}
.guarantee{display:flex;align-items:center;gap:10px;width:fit-content;margin:14px 0 0;padding:11px 16px;border:1px solid rgba(0,83,117,.3);background:rgba(0,83,117,.06);border-radius:12px;font-weight:700;color:var(--ink)}
.guarantee svg{color:var(--accent);flex:none}
.choice .fine{margin-top:14px}
@media (max-width:700px){.guarantee{font-size:.9rem;padding:9px 12px}}
@media (max-width:700px){.bar{gap:10px}}
@media (max-width:420px){.bar{gap:8px;padding:8px 10px}.brand span{font-size:.8rem}}
/* First page (Michael, 2026-11-07): the system buttons are the one thing to do, so they sit high and look like the site's buttons. */
.choice{padding:clamp(16px,3vh,32px) 24px}
.choice-inner{align-items:start}
.choice h1{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:0}
.choice h2{margin:14px 0 10px}
.chapters{display:flex;flex-wrap:wrap;gap:10px}
.chapter{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.875rem;font-weight:500;text-align:center;transition:filter .12s}
.chapter:hover,.chapter:focus-visible{transform:none;box-shadow:none;filter:brightness(1.15)}
.chapter:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.chapter strong{font-size:inherit;font-weight:inherit;margin:0}
.chapter::after{content:none}
.choice .fine{margin-top:12px}
.choice .say{margin-top:18px}
@media (max-width:700px){.chapters{flex-direction:column}.chapter{width:100%}}
/* a label that has to fit in the gap under a circle: one short line */
.mk-badge.mk-compact{padding:5px 11px;border-radius:9px;font-size:.95rem;border-width:2px}