/* The Stranger Check, rework v1 (2026-10-20). Phone first. One ink ground for the whole journey; the result takes on
   THEIR colors and THEIR photo, Stolan stays in the chrome (rule: the Card is theirs, not ours).
   Headlines follow the live site's type7: Big Shoulders, heavy words 800 and thin words 300 in one line. */
:root{
  --ink:#060507;--black:#08080a;--cream:#ebded0;--stone:#9a938a;--flint:#413933;--fern:#6a865c;--moss:#36402a;--leather:#7b4c2c;
  --pink:#ff2d78;--green:#81ff28;--orange:#ff6a00;
  --their:#ebded0;--their-ink:#060507;
  --line:rgba(235,222,208,.14);--soft:rgba(235,222,208,.62);
  --r:14px;--gut:clamp(18px,5vw,40px);--ease:cubic-bezier(.3,0,.1,1);
  --disp:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;--body:'Hanken Grotesk',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{background:var(--ink);color:var(--cream);font:500 17px/1.45 var(--body);min-height:100svh;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input{font:inherit;color:inherit}
a{color:inherit}
.mono{font:600 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.h{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.9;text-wrap:balance}
.h .th{font-weight:300;letter-spacing:0}
.dot{color:var(--orange)}

/* chrome */
.top{position:fixed;inset:0 0 auto;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:14px var(--gut);
  background:linear-gradient(var(--ink) 30%,rgba(6,5,7,0));pointer-events:none}
.top>*{pointer-events:auto}
.mark{font:900 17px/1 var(--disp);letter-spacing:-.02em;text-decoration:none}
.prev{color:var(--stone)}
.meter{display:flex;align-items:baseline;gap:6px;white-space:nowrap;opacity:0;transform:translateY(-6px);transition:.4s var(--ease)}
.meter.on{opacity:1;transform:none}
.meter.on~.prev{display:none}
.meter b{font:300 30px/1 var(--disp);color:var(--cream);min-width:2.2ch;text-align:right}
.meter span{color:var(--stone)}

/* screens */
.scr{display:none;min-height:100svh;padding:88px var(--gut) 40px;position:relative}
.scr.on{display:block;animation:in .5s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wrap{max-width:720px;margin:0 auto;position:relative;z-index:2}

/* the hook: a wall of the same first lines every stranger has read a thousand times */
#hook.on{display:flex}
#hook{flex-direction:column;justify-content:flex-end;padding-bottom:max(40px,env(safe-area-inset-bottom))}
.wall{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 40%,rgba(0,0,0,.08) 78%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 40%,rgba(0,0,0,.08) 78%,transparent 100%)}
.wall .row{display:flex;gap:.6em;white-space:nowrap;font:300 clamp(34px,9vw,84px)/1 var(--disp);text-transform:uppercase;color:rgba(235,222,208,.13);
  animation:drift 60s linear infinite;padding:.08em 0}
.wall .row:nth-child(2n){animation-direction:reverse;animation-duration:75s}
.wall .row i{font-style:normal}
.wall .row i.lit{color:rgba(235,222,208,.9);font-weight:800;position:relative}
.wall .row i.lit::after{content:"";position:absolute;left:0;right:0;top:52%;height:.07em;background:var(--orange);transform-origin:left;animation:strike 9s var(--ease) infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes strike{0%,30%{transform:scaleX(0)}45%,100%{transform:scaleX(1)}}
.hook-h{font-size:clamp(58px,15.5vw,148px);margin:0 0 22px}
.hook-sub{font-size:clamp(18px,4.6vw,22px);line-height:1.38;max-width:34ch;color:var(--cream)}
.hook-sub em{font-style:normal;color:var(--soft)}
.linkbox{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.field{display:flex;align-items:center;gap:10px;border:1px solid rgba(235,222,208,.32);border-radius:var(--r);padding:6px 6px 6px 16px;background:rgba(8,8,10,.72);backdrop-filter:blur(6px)}
.field:focus-within{border-color:var(--cream)}
.field input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:17px;padding:12px 0}
.field input::placeholder{color:rgba(235,222,208,.42)}
.go{border:0;border-radius:10px;background:var(--pink);color:var(--ink);font:800 17px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;padding:15px 18px;cursor:pointer;white-space:nowrap;transition:transform .24s var(--ease)}
.go:active{transform:scale(.97)}
.go[disabled]{opacity:.5}
.alt{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--stone)}
.alt label{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.notfor{margin-top:26px;color:var(--stone);max-width:44ch;font-size:14px;line-height:1.5}

/* the reading strip: what the scan found, shown while they answer */
.found{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:28px;display:flex;align-items:center;gap:12px;min-height:58px}
.found .sw{display:flex;gap:4px}
.found .sw i{width:14px;height:14px;border-radius:50%;display:block;border:1px solid rgba(235,222,208,.25)}
.found .txt{flex:1;min-width:0}
.found .txt b{display:block;font:600 15px/1.25 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.found .txt span{color:var(--stone)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(129,255,40,.6);animation:pulse 1.4s infinite}
.pulse.done{animation:none;background:var(--green)}
.pulse.warn{background:var(--orange);animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(129,255,40,0)}100%{box-shadow:0 0 0 0 rgba(129,255,40,0)}}
.shotask{border:1px dashed rgba(235,222,208,.35);border-radius:var(--r);padding:16px;margin:-12px 0 26px;display:none}
.shotask.on{display:block}
.shotask p{margin-bottom:12px}
.shotask .btn2{display:inline-block}

/* questions */
.prog{display:flex;gap:4px;margin-bottom:22px}
.prog i{flex:1;height:3px;border-radius:2px;background:rgba(235,222,208,.16);transition:background .3s var(--ease)}
.prog i.d{background:var(--cream)}
.qn{color:var(--stone);margin-bottom:12px}
.q{font-size:clamp(40px,10.5vw,76px);margin-bottom:26px}
.opts{display:grid;gap:10px}
.opt{display:flex;justify-content:space-between;align-items:center;text-align:left;width:100%;border:1px solid rgba(235,222,208,.24);background:rgba(235,222,208,.03);
  border-radius:var(--r);padding:17px 18px;font-size:18px;cursor:pointer;transition:background .24s var(--ease),border-color .24s var(--ease),transform .24s var(--ease)}
.opt::after{content:"+";font:300 26px/1 var(--disp);color:var(--stone)}
.opt:hover{border-color:rgba(235,222,208,.6)}
.opt.pick{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.opt.pick::after{content:"\2713";color:var(--ink);font:700 18px/1 var(--body)}
.txtq .field{margin-bottom:14px}
.btn2{border:1px solid rgba(235,222,208,.5);background:none;border-radius:10px;padding:13px 18px;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.back{background:none;border:0;color:var(--stone);margin-top:22px;cursor:pointer}
.plus{position:fixed;right:var(--gut);top:58px;font:300 22px/1 var(--disp);color:var(--green);opacity:0;z-index:41;pointer-events:none}
.plus.pop{animation:plus .9s var(--ease)}
@keyframes plus{0%{opacity:0;transform:translateY(8px)}25%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}

/* the gate */
.tease{border-left:3px solid var(--pink);padding:6px 0 6px 16px;margin:0 0 26px;min-height:64px}
.tease .mono{color:var(--stone);margin-bottom:8px}
.tease q{display:block;font:800 clamp(28px,7.4vw,46px)/.95 var(--disp);text-transform:uppercase;quotes:"\201C" "\201D"}
.tease .wait{color:var(--stone)}
.gate-h{font-size:clamp(44px,11vw,84px);margin-bottom:16px}
.fine{color:var(--stone);font-size:13px;line-height:1.5;margin-top:12px}

/* ------------------------------------------------------------ the result: THEIR world */
#result{padding:0 0 60px}
.res-hero{position:relative;min-height:82svh;display:flex;flex-direction:column;justify-content:flex-end;padding:96px var(--gut) 36px;overflow:hidden;isolation:isolate}
.res-hero .ph{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.05);transform:scale(1.06);animation:settle 2.4s var(--ease) forwards}
.res-hero .ph.none{background:radial-gradient(120% 80% at 70% 10%,color-mix(in srgb,var(--their) 55%,transparent),transparent 60%),var(--ink)}
.res-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,5,7,.25) 0%,rgba(6,5,7,.55) 45%,rgba(6,5,7,.94) 82%,var(--ink) 100%)}
@keyframes settle{to{transform:scale(1)}}
.res-hero .who{color:var(--their);margin-bottom:12px}
.res-hero h1{font-size:clamp(54px,14vw,130px);margin-bottom:6px}
.res-hero .sub{color:var(--soft);max-width:36ch}
.res-sec{padding:44px var(--gut) 8px;max-width:760px;margin:0 auto}
.lab{color:var(--their);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.lab::before{content:"";width:22px;height:1px;background:currentColor}
.firstread q{display:block;font:800 clamp(40px,10.5vw,86px)/.92 var(--disp);text-transform:uppercase;quotes:"\201C" "\201D";margin-bottom:12px}
.firstread .src{color:var(--stone);margin-bottom:18px}
.firstread .dec{font-size:clamp(19px,4.8vw,24px);line-height:1.35;margin-bottom:12px}
.firstread .com{color:var(--soft);font-size:17px}

/* the score: six questions a stranger asks */
.score{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 18px}
.score .n{border:1px solid var(--line);border-radius:var(--r);padding:16px}
.score .n b{display:block;font:300 clamp(64px,17vw,120px)/.82 var(--disp)}
.score .n.after{border-color:var(--their);background:color-mix(in srgb,var(--their) 10%,transparent)}
.score .n.after b{font-weight:800;color:var(--their)}
.score .n span{color:var(--stone)}
.checks{list-style:none;border-top:1px solid var(--line)}
.checks li{display:grid;grid-template-columns:1fr 34px 34px;align-items:center;gap:8px;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
.checks li .c{text-align:center;font-weight:700}
.checks .no{color:rgba(235,222,208,.28)}
.checks .yes{color:var(--their)}
.checks .hd{color:var(--stone)}

/* before and after: the shareable card */
.ba{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--black)}
.ba .side{padding:22px 20px 24px}
.ba .before{background:rgba(235,222,208,.04);border-bottom:1px solid var(--line)}
.ba .before .t{font:300 clamp(26px,7vw,44px)/.98 var(--disp);text-transform:uppercase;color:var(--soft)}
.ba .after{background:linear-gradient(160deg,color-mix(in srgb,var(--their) 22%,var(--black)),var(--black) 70%)}
.ba .after .t{font:800 clamp(32px,8.6vw,58px)/.92 var(--disp);text-transform:uppercase;margin-bottom:14px}
.ba .after .bio{font-size:18px;line-height:1.42}
.ba .mono{margin-bottom:12px;color:var(--stone)}
.ba .after .mono{color:var(--their)}
.ba .foot{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-top:1px solid var(--line);color:var(--stone)}
.row-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* what a stranger misses */
.miss .line{font:800 clamp(34px,9vw,64px)/.92 var(--disp);text-transform:uppercase;margin-bottom:18px}
.miss blockquote{font-size:clamp(19px,4.8vw,23px);line-height:1.4;border-left:3px solid var(--their);padding-left:16px;quotes:"\201C" "\201D"}
.miss blockquote::before{content:open-quote}.miss blockquote::after{content:close-quote}
.miss cite{display:block;margin-top:10px;font-style:normal;color:var(--stone)}
.gaps{list-style:none;margin-top:26px}
.gaps li{padding:12px 0 12px 28px;border-top:1px solid var(--line);position:relative}
.gaps li::before{content:"";position:absolute;left:4px;top:21px;width:10px;height:10px;border:1.5px solid var(--their);border-radius:50%}

/* the $27 */
.offer{margin-top:20px;border-radius:18px;padding:26px 20px;background:var(--cream);color:var(--ink);position:relative;overflow:hidden}
.offer .h{font-size:clamp(42px,11vw,80px);margin-bottom:14px}
.offer ul{list-style:none;margin:6px 0 20px}
.offer li{padding:10px 0;border-top:1px solid rgba(6,5,7,.14);display:flex;justify-content:space-between;gap:12px;font-size:16px}
.offer li span{color:#5d564f;text-align:right}
.offer .buy{width:100%;padding:19px;font-size:21px;background:var(--ink);color:var(--cream)}
.offer .price{color:#762aed}
.offer .fine{color:#5d564f}
.offer .stamp{position:absolute;right:-8px;top:14px;transform:rotate(8deg);border:2px solid var(--orange);color:var(--orange);padding:6px 10px;border-radius:6px;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}

/* the pack */
.pack{display:none}
.pack.on{display:block}
.pk{border-top:1px solid var(--line);padding:18px 0}
.pk .mono{color:var(--their);display:flex;justify-content:space-between;margin-bottom:10px}
.pk .mono span{color:var(--stone)}
.pk p{font-size:17px;line-height:1.5;white-space:pre-wrap}
.pk .ask{color:var(--stone);margin-bottom:6px}
.pk .copy{margin-top:10px}
.blank{background:color-mix(in srgb,var(--their) 26%,transparent);border-radius:4px;padding:0 4px}
.next{margin-top:34px;border:1px solid var(--line);border-radius:18px;padding:22px 20px}
.next .h{font-size:clamp(34px,8.6vw,56px);margin-bottom:10px}
.foot-chrome{padding:40px var(--gut);color:var(--stone);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:760px;margin:0 auto}
.loading{display:flex;align-items:center;gap:10px;color:var(--stone)}
.err{color:var(--orange);margin-top:10px;min-height:1em}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:999px;opacity:0;transition:.3s var(--ease);z-index:60}
.toast.on{opacity:1;transform:translateX(-50%)}

@media (min-width:900px){
  .scr{padding-top:110px}
  #hook .wrap{max-width:980px;margin:0}
  #hook{padding-left:8vw}
  .hook-h{font-size:clamp(90px,10vw,168px)}
  .res-hero{padding-left:8vw;padding-right:8vw}
  .ba{display:grid;grid-template-columns:1fr 1.25fr}
  .ba .before{border-bottom:0;border-right:1px solid var(--line)}
  .ba .foot{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .wall .row i.lit::after{transform:scaleX(1)}
}

/* the quiz ground: THEIR own headlines, read by the scan, drifting low and faint (their words are the art) */
.wall.theirs{top:auto;height:58svh;bottom:0;opacity:0;transition:opacity 1.2s var(--ease);
  mask-image:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 45%,transparent 100%);-webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 45%,transparent 100%)}
.wall.theirs.on{opacity:1}
.wall.theirs .row{color:color-mix(in srgb,var(--their) 16%,transparent);font-size:clamp(30px,8vw,70px)}