/* Palaner — landing page.
   Tokens and affordance grammar lifted from the app (pr-system.css):
   ACTIONS are rounded rectangles with labels · STATUS is a flat tinted badge ·
   category colour is carried as a 4px strip or a tinted tile, never as decoration. */
:root{
  --bg:#f4f3f1;--surface:#fff;--surface-2:#efedea;--surface-3:#e3e0db;
  --ink:#1a1815;--ink-2:#615d57;--ink-3:#8c877f;
  --line:rgba(26,24,21,.11);--line-2:rgba(26,24,21,.2);--line-3:rgba(26,24,21,.34);
  --accent:#ff6b8a;--accent-soft:#ffe6ec;--accent-text:#ab3251;--accent-deep:#e9587a;
  --highlight:#f5d76e;--ok:#2c7f55;--ok-soft:#e2f1e9;--warn:#8d5310;--warn-soft:#f8ecda;
  --music:#ff6b8a;--work:#7cc4ff;--sport:#8ad8a5;--art:#d4a8ff;--hobby:#f5d76e;--talk:#ffb074;--food:#f0c078;
  --r-card:18px;--r-btn:11px;--r-badge:7px;--r-lg:22px;
  --disp:"Bricolage Grotesque",ui-sans-serif,sans-serif;--sans:"Public Sans",ui-sans-serif,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --sh-1:0 1px 2px rgba(37,27,19,.05),0 6px 18px rgba(37,27,19,.045);
  --sh-2:0 2px 6px rgba(37,27,19,.07),0 20px 46px rgba(37,27,19,.1);
  --dur:.2s;--ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;background-image:repeating-linear-gradient(44deg,rgba(26,24,21,.022) 0 1px,transparent 1px 7px)}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--accent-text);text-decoration:none}
a:hover{color:var(--ink)}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wrap{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{font:600 12px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
.mono{font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.h2{font:600 clamp(38px,5vw,64px)/.99 var(--disp);letter-spacing:-.034em;text-wrap:balance}
.h2 i{font-style:normal;color:var(--ink-3)}
.lede{margin-top:20px;max-width:33em;font-size:17px;line-height:1.58;color:var(--ink-2);text-wrap:pretty}
.mark{width:1em;aspect-ratio:120/150;height:auto;flex:none;overflow:visible}
.pal-eye{fill:var(--eye,#fff)}
.lockup{display:inline-flex;align-items:flex-end;gap:0;font:700 22px/.92 var(--disp);letter-spacing:-.045em;color:var(--accent);white-space:nowrap;transition:color var(--dur)}
.lockup:hover{color:var(--accent-deep)}
.lockup .mark{font-size:.9em;color:currentColor;margin:0 -.13em -.035em -.12em}
.blink .pal-eye,.blink .pal-eye+circle{animation:blink 5.4s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}

/* ── actions: rounded rectangles, always labelled (app grammar) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-btn);border:1px solid transparent;background:var(--surface);color:var(--ink);font:600 14px/1 var(--sans);white-space:nowrap;transition:background var(--dur),border-color var(--dur),color var(--dur),transform var(--dur),box-shadow var(--dur)}
.btn:active{transform:translateY(1px) scale(.995)}
.btn i{font-style:normal;transition:transform var(--dur) var(--ease)}
.btn:hover i{transform:translateX(2px)}
.btn--pri{background:var(--ink);color:#fff;box-shadow:var(--sh-1)}
.btn--pri:hover{background:#332e28}
.btn--go{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:var(--sh-1)}
.btn--go:hover{background:#332e28}
.btn--pink{background:var(--accent);border-color:var(--accent-deep);color:#fff;box-shadow:var(--sh-1)}
.btn--pink:hover{background:#ff829d}
.btn--ok{background:var(--ok);border-color:#246a45;color:#fff;box-shadow:var(--sh-1)}
.btn--ok:hover{background:#339363}
.btn--out{border-color:var(--line-3);box-shadow:0 1px 0 rgba(26,24,21,.03)}
.btn--out:hover{background:var(--surface-2);border-color:var(--ink)}
.btn--ghost{border-color:rgba(244,243,241,.26);color:#f4f3f1;background:transparent}
.btn--ghost:hover{background:rgba(244,243,241,.1)}
.btn--sm{min-height:36px;padding:0 13px;font-size:13px}
.btn--lg{min-height:50px;padding:0 22px;font-size:15px}

/* ── status: flat, unclickable ── */
.badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 9px;border-radius:var(--r-badge);background:var(--surface-2);color:var(--ink-2);font:600 10px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.badge--ok{background:var(--accent-soft);color:var(--accent-text)}
.badge--go{background:var(--accent-soft);color:var(--accent-text)}
.badge--ink{background:var(--ink);color:#fff}
.badge--out{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2)}
.cat{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 9px 0 7px;border-radius:var(--r-badge);font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.cat i{width:8px;height:8px;border-radius:2px;background:currentColor;opacity:.9}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;animation:pulse 1.7s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4;transform:scale(.8)}}
.src{display:inline-flex;align-items:center;height:21px;padding:0 6px;border-radius:5px;background:var(--surface-2);color:var(--ink-2);font:600 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tile{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;flex:none;background:color-mix(in oklab,var(--c,var(--surface-2)) 42%,#fff);color:var(--ink)}
.tile svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);background:rgba(244,243,241,.88);backdrop-filter:blur(14px)}
.nav__in{display:flex;align-items:center;gap:18px;padding:11px 28px;max-width:1180px;margin:0 auto}
.nav__links{display:flex;gap:4px;margin-left:12px}
.nav__links a{padding:9px 12px;border-radius:10px;font:600 13.5px/1 var(--sans);color:var(--ink-2);white-space:nowrap;transition:background var(--dur),color var(--dur)}
.nav__links a:hover{background:var(--surface-2);color:var(--ink)}
.nav__cta{display:flex;align-items:center;gap:8px;margin-left:auto}
@media (max-width:860px){.nav__links{display:none}}

/* ── hero ── */
.hero{position:relative;overflow:hidden}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:58px 28px 82px;max-width:1180px;margin:0 auto}
/* min-width:0 (2026-08-04) — the fix for the hero being cut off on phones.
   A grid item's default min-width is `auto`, so a track can never be narrower
   than the widest thing inside it. .heroFlow holds a 446px-wide iframe, so on
   one-column layouts the track was pinned at 446px and EVERY sibling — the h1,
   the paragraph, the platform cards — was laid out 446px wide and ran off the
   side of the phone. body{overflow-x:hidden} then clipped it silently, so the
   page never scrolled sideways and no scrollWidth check could ever catch it;
   it just quietly ate the end of every line ("...near you each we").
   min-width:0 lets the track shrink to the viewport again. No effect on
   desktop, where the .95fr track (~511px at 1180) already exceeds 446px. */
.hero__in>*{min-width:0}
.hero h1{font:600 clamp(44px,5.6vw,70px)/.98 var(--disp);letter-spacing:-.038em;margin-top:18px}
.hero h1 em{font-style:normal;color:var(--accent-deep)}
.hero__sub{margin-top:20px;max-width:30em;font-size:17px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:440px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.stats b{display:block;font:600 30px/1 var(--disp);letter-spacing:-.03em}
.stats span{display:block;margin-top:7px;font:500 9.5px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
/* overflow-x:clip, not hidden — `clip` leaves overflow-y VISIBLE, which this
   needs: the frame below is scaled with a transform and pulled back up with a
   negative margin-bottom, and `hidden` would force a scroll container on the
   other axis and cut that off. The frame's LAYOUT box stays 446px wide however
   far the transform scales it down (transforms don't resize layout), so below
   ~500px that box is what pushes the whole document sideways. Nothing overflows
   here at 390px and up, so this is inert at every width the design targets. */
.heroFlow{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-x:clip}
.heroFlow__frame{width:446px;height:930px;border:0;background:transparent;transform:scale(.745);transform-origin:top center;margin-bottom:-237px;color-scheme:light}
.heroFlow__cap{max-width:22em;margin-top:6px;text-align:center;font:500 10px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:1000px){.hero__in{grid-template-columns:1fr;gap:44px;padding-top:44px}.stats{max-width:none}}
@media (max-width:460px){.heroFlow__frame{transform:scale(.63);margin-bottom:-344px}}

/* ── platform availability ── */
.plat{display:flex;flex-direction:column;gap:8px;margin-top:28px;max-width:470px}
.plat__row{display:flex;align-items:center;gap:13px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--sh-1);transition:border-color var(--dur),box-shadow var(--dur)}
.plat__row:hover{border-color:var(--line-2)}
.plat__row.is-live{border-color:rgba(255,107,138,.42);box-shadow:var(--sh-1),inset 3px 0 0 var(--accent)}
.plat__ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink);flex:none}
.plat__row.is-live .plat__ic{background:var(--accent-soft);color:var(--accent-text)}
.plat__ic svg{width:19px;height:19px}
.plat__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.plat__t b{font:600 14.5px/1.2 var(--sans)}
.plat__row .btn{flex:none}

/* ── sources ── */
.sources{position:relative;z-index:1;border-block:1px solid var(--line);background:var(--surface);padding:24px 0}
.sources__lab{max-width:1180px;margin:0 auto 14px;padding:0 28px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ticker{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker__in{display:flex;width:max-content;gap:8px;animation:slide 48s linear infinite}
.ticker span{border-radius:8px;background:var(--surface-2);padding:9px 14px;font:500 15px/1 var(--disp);letter-spacing:-.012em;color:var(--ink-2);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── engine ── */
.engine{position:relative;z-index:1;border-top:1px solid var(--line);background:var(--surface);padding:100px 0}
.engine__grid{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);gap:44px;align-items:start;margin-top:44px}
.beats{display:flex;flex-direction:column;gap:8px}
.beat{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;text-align:left;padding:16px 18px;border-radius:var(--r-card);border:1px solid var(--line-2);background:var(--bg);box-shadow:inset 3px 0 0 transparent;transition:background var(--dur),border-color var(--dur),box-shadow var(--dur)}
.beat:hover{border-color:var(--ink-3)}
.beat b{font:600 12px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3);padding-top:5px}
.beat h3{font:600 19px/1.2 var(--disp);letter-spacing:-.025em}
.beat p{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin-top:7px;max-width:36em}
.beat[aria-selected="true"]{background:var(--surface);border-color:var(--line-2);box-shadow:inset 3px 0 0 var(--accent),var(--sh-1)}
.beat[aria-selected="true"] b{color:var(--accent-text)}
.beat__bar{grid-column:1/-1;height:3px;border-radius:3px;background:rgba(26,24,21,.1);overflow:hidden;margin-top:12px;display:none}
.beat[aria-selected="true"] .beat__bar{display:block}
.beat__bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px}
.beat[aria-selected="true"].run .beat__bar i{animation:fill 5s linear forwards}
@keyframes fill{to{width:100%}}
.stage{position:relative;aspect-ratio:1/1.02;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,#f7f6f4,#eae8e3);border:1px solid var(--line);box-shadow:var(--sh-2)}
.stage__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(26,24,21,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(26,24,21,.045) 1px,transparent 1px);background-size:11% 11%}
.stage__water{position:absolute;left:-4%;right:-4%;top:16%;height:8%;background:rgba(124,196,255,.17);transform:rotate(-4deg)}
.stage__park{position:absolute;left:14%;top:58%;width:28%;height:20%;border-radius:16px;background:rgba(138,216,165,.2)}
.stage__rings{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:78%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,107,138,.26);display:grid;place-items:center;transition:opacity var(--dur)}
.stage__rings::before,.stage__rings::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,107,138,.18)}
.stage__rings::before{inset:17%}
.stage__rings::after{inset:34%;border-color:rgba(255,107,138,.3)}
.stage__me{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);z-index:8}
.stage__me .mark{font-size:44px;color:var(--accent);filter:drop-shadow(0 6px 14px rgba(255,107,138,.4))}
.sweep{position:absolute;left:50%;top:47%;width:80%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) rotate(0deg);background:conic-gradient(rgba(255,107,138,.38) 0deg,rgba(255,107,138,.14) 24deg,transparent 58deg);z-index:6;opacity:0;pointer-events:none;transition:opacity .4s}
.sweep::after{content:"";position:absolute;left:50%;top:0;bottom:50%;width:2px;transform:translateX(-50%);border-radius:2px;background:linear-gradient(180deg,rgba(255,107,138,0),var(--accent))}
.pin{position:absolute;transform:translate(-50%,-50%);z-index:5;display:flex;align-items:center;gap:6px;padding:5px 9px 5px 7px;border-radius:var(--r-badge);background:rgba(255,255,255,.96);box-shadow:0 2px 8px rgba(26,24,21,.16);font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s}
.pin i{width:8px;height:8px;border-radius:2px;flex:none}
.ask{position:absolute;z-index:9;max-width:186px;padding:9px 12px;border-radius:13px;border-bottom-left-radius:4px;background:var(--ink);color:#f4f3f1;font:500 11.5px/1.35 var(--sans);box-shadow:0 10px 22px -8px rgba(0,0,0,.42);opacity:0;transform:translateY(8px) scale(.94);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.picks{position:absolute;inset:auto 5% 5%;z-index:12;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pick{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
.pick b{font:600 13.5px/1.15 var(--disp);letter-spacing:-.02em;display:block}
.pick b+span{font:500 10px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);display:block;margin-top:4px}
.pick i{width:3.5px;align-self:stretch;border-radius:2px;flex:none}
.ring{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;background:conic-gradient(var(--accent) calc(var(--pct)*1%),rgba(26,24,21,.1) 0)}
.ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface)}
.ring span{position:relative;z-index:1;font:600 10px/1 var(--mono)}
.counter{position:absolute;left:5%;top:5%;z-index:14;display:flex;flex-direction:column;gap:3px;padding:10px 13px;border-radius:14px;background:rgba(26,24,21,.92);color:#f4f3f1;box-shadow:var(--sh-2)}
.counter b{font:600 22px/1 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.counter span{font:500 9px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;opacity:.7}
.stage[data-beat="1"] .sweep{opacity:1;animation:spin 5s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.stage[data-beat="1"] .pin{animation:pop .5s var(--ease) both}
.stage[data-beat="2"] .pin.no{opacity:.24;filter:grayscale(1)}
.stage[data-beat="2"] .ask{opacity:1;transform:none}
.stage[data-beat="3"] .pin{opacity:0;transform:translate(-50%,-50%) scale(.7)}
.stage[data-beat="3"] .pin.yes{opacity:1;transform:translate(-50%,-50%) scale(1)}
.stage[data-beat="3"] .picks{opacity:1;transform:none}
.stage[data-beat="3"] .stage__rings{opacity:.4}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
@media (max-width:940px){.engine__grid{grid-template-columns:1fr}}

/* ── depth: the signal reader (ink panel = "the engine room") ── */
.depth{padding:100px 0}
.reader{margin-top:44px;border-radius:var(--r-lg);background:var(--ink);color:#f4f3f1;overflow:hidden;box-shadow:var(--sh-2)}
.reader__tabs{display:flex;gap:2px;padding:10px 10px 0;background:rgba(244,243,241,.04);border-bottom:1px solid rgba(244,243,241,.12);overflow-x:auto;scrollbar-width:none}
.reader__tabs::-webkit-scrollbar{display:none}
.rtab{position:relative;display:flex;align-items:center;gap:9px;min-height:46px;padding:0 15px;border-radius:11px 11px 0 0;color:rgba(244,243,241,.6);font:600 13.5px/1 var(--sans);white-space:nowrap;transition:background var(--dur),color var(--dur)}
.rtab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rtab:hover{color:#f4f3f1;background:rgba(244,243,241,.07)}
.rtab[aria-selected="true"]{background:rgba(244,243,241,.1);color:#f4f3f1}
.rtab[aria-selected="true"] svg{color:var(--tint)}
.rtab::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--tint);transform:scaleX(0);transform-origin:0 50%;opacity:0}
.rtab.is-timing::after{opacity:1;animation:tabTime 6.2s linear both}
.reader.is-held .rtab.is-timing::after{animation-play-state:paused}
@keyframes tabTime{to{transform:scaleX(1)}}
.reader__body{display:grid;grid-template-columns:1.08fr .92fr;min-height:392px}
.raw{position:relative;padding:20px 22px;border-right:1px solid rgba(244,243,241,.12);overflow:hidden}
.raw__hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,243,241,.62)}
.raw__hd b{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#f4f3f1}
.raw__hd b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tint)}
.rows{display:flex;flex-direction:column;gap:5px}
.row{--i:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px 10px;padding:9px 12px 9px 14px;border-radius:10px;background:rgba(244,243,241,.05);animation:rowIn .45s var(--ease) both;animation-delay:calc(var(--i)*.07s)}
.row::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:0;border-radius:0 3px 3px 0;background:var(--tint)}
.row__t{font-size:13.5px;line-height:1.35;color:rgba(244,243,241,.86);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__n{font:500 10.5px/1 var(--mono);letter-spacing:.04em;color:rgba(244,243,241,.5);white-space:nowrap}
.row__bar{grid-column:1/-1;height:2px;border-radius:2px;background:rgba(244,243,241,.12);overflow:hidden}
.row__bar i{display:block;height:100%;width:0;border-radius:2px;background:rgba(244,243,241,.34);animation:barIn .9s var(--ease) both;animation-delay:calc(.25s + var(--i)*.07s)}
.row.hit .row__bar i{background:var(--tint)}
.row.hit::before{animation:edgeIn .4s var(--ease) both;animation-delay:calc(1.05s + var(--i)*.1s)}
.row.hit .row__t{animation:litIn .4s var(--ease) both;animation-delay:calc(1.05s + var(--i)*.1s)}
.row.out{animation:rowIn .45s var(--ease) both,dim .5s var(--ease) both;animation-delay:calc(var(--i)*.07s),calc(1.35s + var(--i)*.1s)}
.row.out .row__t{text-decoration:line-through;text-decoration-color:rgba(244,243,241,.4)}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;background:var(--tint);color:var(--ink);font:600 9px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;justify-self:end;animation:tagIn .38s var(--ease) both;animation-delay:calc(1.2s + var(--i)*.1s)}
.tag--out{background:rgba(244,243,241,.16);color:rgba(244,243,241,.7)}
.scan{position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--tint) 22%,transparent) 78%,var(--tint));opacity:.34;animation:scanY 1.5s var(--ease) both;animation-delay:.15s}
@keyframes rowIn{from{opacity:0;transform:translateY(9px)}}
@keyframes barIn{to{width:var(--w,50%)}}
@keyframes edgeIn{to{width:3px}}
@keyframes litIn{to{color:#fff}}
@keyframes dim{to{opacity:.34}}
@keyframes tagIn{from{opacity:0;transform:scale(.86)}}
@keyframes scanY{from{transform:translateY(-120px)}to{transform:translateY(392px)}}
.read{display:flex;flex-direction:column;padding:20px 22px;animation:readIn .5s var(--ease) both;animation-delay:1.5s}
.reader.is-manual .read{animation-delay:.2s}
@keyframes readIn{from{opacity:0;transform:translateY(10px)}}
.read .lab{font:600 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(244,243,241,.66)}
.read .val{margin:9px 0 0;font-size:20px;line-height:1.32;color:rgba(244,243,241,.72)}
.read__hr{margin:15px 0;border-top:1px solid rgba(244,243,241,.14)}
.read .lab--on{color:var(--tint)}
.read .val--big{margin:10px 0 0;font:600 25px/1.24 var(--disp);letter-spacing:-.028em;color:#fff;text-wrap:pretty}
.read .val--big em{font-style:normal;box-shadow:inset 0 -.42em 0 color-mix(in oklab,var(--tint) 40%,transparent)}
.conf{margin-top:auto;padding-top:20px}
.conf__t{display:flex;align-items:baseline;justify-content:space-between;font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,243,241,.62)}
.conf__t b{font:600 21px/1 var(--disp);letter-spacing:-.02em;color:#fff}
.conf__bar{height:4px;margin-top:9px;border-radius:3px;background:rgba(244,243,241,.13);overflow:hidden}
.conf__bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--tint);animation:barIn 1.1s var(--ease) both;animation-delay:1.7s}
.read__src{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.read__src span{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;background:rgba(244,243,241,.09);color:rgba(244,243,241,.7);font:600 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:820px){.reader__body{grid-template-columns:1fr;min-height:0}.raw{border-right:0;border-bottom:1px solid rgba(244,243,241,.12)}}

/* ── friends ── */
.friends{padding:100px 0}
.friends__grid{display:grid;grid-template-columns:1fr 1.02fr;gap:52px;align-items:center}
.flist{display:flex;flex-direction:column;gap:8px;margin-top:30px}
.flist li{display:flex;gap:13px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--sh-1);font-size:15px;line-height:1.45;color:var(--ink-2);transition:border-color var(--dur)}
.flist li:hover{border-color:var(--line-2)}
.flist b{color:var(--ink);font-weight:600}
.fmap{position:relative;aspect-ratio:4/3.7;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,#f7f6f4,#eae8e3);border:1px solid var(--line);box-shadow:var(--sh-2)}
.fmap__route{position:absolute;inset:0;width:100%;height:100%}
.fmap__route path{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:7 7;stroke-dashoffset:600}
.in .fmap__route path{animation:draw 1.7s var(--ease) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.who{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;z-index:4}
.who b{display:grid;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font:600 10.5px/1 var(--mono);text-transform:uppercase;color:var(--ink);box-shadow:0 2px 8px rgba(26,24,21,.18),0 0 0 3px var(--surface)}
.who span{position:absolute;top:50%;left:calc(100% + 7px);transform:translateY(-50%);border-radius:var(--r-badge);background:var(--surface);padding:5px 8px;font:600 9.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--sh-1)}
.who--l span{left:auto;right:calc(100% + 7px)}
.middle{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:9;width:min(76%,272px);padding:14px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-2)}
.middle b{display:block;font:600 15.5px/1.2 var(--disp);letter-spacing:-.025em;margin-top:9px}
.middle .m{font:500 9.5px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-top:7px}
@media (max-width:940px){.friends__grid{grid-template-columns:1fr;gap:38px}}

/* ── cta / footer ── */
.cta{position:relative;z-index:1;overflow:hidden;background:var(--ink);color:#f4f3f1;text-align:center;padding:88px 0 36px}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(44deg,rgba(244,243,241,.035) 0 1px,transparent 1px 7px)}
.cta__in{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 28px}
.cta .mark{font-size:58px;color:#fff;--eye:var(--accent);margin:0 auto 20px}
.cta h2{font:600 clamp(40px,5.4vw,68px)/.99 var(--disp);letter-spacing:-.036em;text-wrap:balance}
.cta p{margin:18px auto 0;max-width:34em;font-size:15.5px;line-height:1.6;color:rgba(244,243,241,.7)}
.picker{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.picker__lab{width:100%;margin-bottom:2px;font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,243,241,.45)}
.pchoice{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:40px;padding:0 14px;border-radius:var(--r-btn);border:1px solid rgba(244,243,241,.24);font:600 13px/1 var(--sans);color:#f4f3f1;transition:background var(--dur),border-color var(--dur),color var(--dur)}
.pchoice svg{width:16px;height:16px}
.pchoice:hover{background:rgba(244,243,241,.1)}
.pchoice[aria-pressed="true"]{background:var(--accent);border-color:var(--accent-deep);color:var(--ink)}
.pchoice__tick{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(244,243,241,.4);font:700 11px/1 var(--sans);color:transparent}
.pchoice[aria-pressed="true"] .pchoice__tick{background:var(--ink);box-shadow:none;color:var(--accent)}
.form{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px}
/* max-width:100% and NOT width:100% — the form is a centred flex row, so a
   100% width would force the button onto its own line at every width. This
   keeps the 300px basis wherever it fits and only shrinks below it. */
.form input{width:300px;max-width:100%;min-height:48px;border-radius:var(--r-btn);border:1px solid rgba(244,243,241,.22);background:rgba(244,243,241,.06);padding:0 16px;font-size:14.5px;color:#f4f3f1}
.form input::placeholder{color:rgba(244,243,241,.4)}
.form input:focus{outline:none;border-color:var(--accent);background:rgba(244,243,241,.1)}
.form .btn--go{background:var(--accent);border-color:var(--accent-deep);color:#fff}
.form .btn--go:hover{background:#ff829d}
.note{min-height:22px;margin-top:12px;font-size:13.5px;color:rgba(244,243,241,.74)}
.note.bad{color:#ffb3c4}
.cta__alt{display:flex;justify-content:center;gap:9px;margin-top:22px;flex-wrap:wrap}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;margin-top:52px;padding-top:20px;border-top:1px solid rgba(244,243,241,.14);font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,243,241,.5)}
.foot a{color:rgba(244,243,241,.5)}
.foot a:hover{color:#fff}
/* ── Below 390px (2026-08-04) ──────────────────────────────────────────────
   320px is the WCAG reflow floor and the narrowest phone still in use. The
   page scrolled sideways there: the nav's two buttons plus the lockup did not
   fit on one line, and the hero frame's 446px layout box (see .heroFlow) stuck
   out past the viewport.

   Everything here is behind max-width:389px SO THAT 390 AND UP ARE BYTE-FOR-
   BYTE UNCHANGED — 390 is the iPhone width the design was tuned at, and this
   fix is not allowed to touch it. Measured before and after at 320/390/768/1440.

   The frame's scale steps down again and the negative margin follows it: the
   compensation is always -(930 × (1 − scale)), because the frame is 930px tall
   unscaled and transform-origin is top center. 446 × .56 = 250px, which clears
   320px minus the section's 2 × 28px padding with room to spare, so the visual
   is never clipped by .heroFlow — only the empty layout box is. */
/* Below 520px the platform rows stack (2026-08-04). Their three children —
   icon, label+badge, button — sit on one line, and the badge is
   white-space:nowrap so it cannot give any width back. Once .hero__in>* stopped
   forcing the column to 446px, the row was honest about its real width and the
   button simply sat on top of the badge ("AVAILABLE NOW IN ANY B" under a
   "Try free" pill). Wrapping the button onto its own full-width line is the
   ordinary mobile card shape and keeps every word readable. */
@media (max-width:520px){
  .plat__row{flex-wrap:wrap}
  .plat__row .btn{flex:1 1 100%;margin-top:2px}
}

@media (max-width:389px){
  .nav__in{padding:11px 14px;gap:8px}
  .nav__cta{gap:6px}
  .nav__cta .btn--sm{padding:0 10px}
  .heroFlow__frame{transform:scale(.56);margin-bottom:-409px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}