/* ============================================================
   Shared by every landing page. The ship's log kept by the crew.
   index.html adds home.css; sub-pages add pages.css.

   Colour has jobs:
     coral  = needs you (stamps, the question, the primary button)
     yellow = the leash and the night's progress
     mint   = done, learned, shipped
     paper / signal sections = colour blocks that pace the page
   ============================================================ */
:root{
  --sea:#0D2B33; --sea-2:#133B45; --sea-3:#1A4A55; --ink:#071C24; --rule:#2A5967;
  --chalk:#EEF2EA; --chalk-dim:#BBD2D0;
  --flag:#FF6F59; --flag-deep:#B23A26; --flag-text:#FFA08F;
  --signal:#F2C230; --signal-deep:#B8860B;
  --mint:#7FE0B5; --mint-deep:#1D7556;
  --paper:#F4EEDF; --paper-dim:#45595D; --paper-rule:rgba(13,43,51,.16);
  --head:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ink-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");
  --rule-chalk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='6'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .6' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2'/%3E%3C/filter%3E%3Cpath d='M-4 3 H644' stroke='%232A5967' stroke-width='1.5' filter='url(%23r)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:var(--rule) var(--sea)}
body{background-color:var(--sea);color:var(--chalk);font-family:var(--head);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;caret-color:var(--signal)}
::selection{background:var(--signal);color:var(--sea)}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
code{font-family:var(--mono);font-size:.88em}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;background:var(--signal);color:var(--sea);font-family:var(--mono);font-weight:700}
.skip-link:focus{left:16px;top:16px}

/* ---------- buttons and links ---------- */
.btn{font-family:var(--head);font-weight:700;font-size:16px;letter-spacing:-.01em;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:2px solid var(--flag);background:var(--flag);color:var(--sea);cursor:pointer;border-radius:3px;transition:background .18s,color .18s,border-color .18s,transform .18s var(--ease)}
.btn:hover{background:var(--chalk);border-color:var(--chalk);color:var(--sea)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--chalk);border-color:var(--chalk-dim)}
.btn--ghost:hover{background:var(--chalk);color:var(--sea);border-color:var(--chalk)}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:24px;font-weight:700;font-size:16px;text-decoration:none;border-bottom:2px solid currentColor}
.more span{transition:transform .2s var(--ease)}
.more:hover span{transform:translateX(4px)}

/* ---------- nav (markup comes from partials/nav-home.html) ---------- */
body>nav{border-bottom:1px solid var(--rule);background:var(--sea)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter);max-width:1280px;margin:0 auto;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:800;font-size:22px;letter-spacing:-.03em;text-decoration:none;color:var(--chalk)}
.logo .mark{width:34px;height:34px;display:grid;place-items:center;flex:none;color:var(--signal)}
.logo .mark svg{width:34px;height:34px}
.logo .lite{font-weight:500;color:var(--chalk-dim)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a.lnk{font-family:var(--head);font-weight:500;font-size:15px;text-decoration:none;color:var(--chalk-dim);padding:0 12px;min-height:44px;display:inline-flex;align-items:center}
.nav-links a.lnk:hover{color:var(--chalk)}
.nav-links a.lnk[aria-current="page"]{color:var(--chalk);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:8px}
.nav-cta{margin-left:8px;min-height:44px}
@media(max-width:820px){
  .nav-inner{gap:8px;padding-bottom:0}
  .nav-links{width:100%;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0 12px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{flex:none;white-space:nowrap}
  .nav-cta{order:-1;margin-left:0}
}

/* ---------- type ---------- */
h1{font-weight:800;font-size:clamp(44px,7vw,100px);line-height:.98;letter-spacing:-.045em;max-width:11ch;text-wrap:balance;padding-bottom:.14em;margin-bottom:-.14em}
h2{font-weight:800;font-size:clamp(30px,3.6vw,50px);line-height:1.04;letter-spacing:-.04em;max-width:16ch;text-wrap:balance}
h3{line-height:1.3}
.lede{max-width:56ch;margin-top:16px;font-size:clamp(17px,1.3vw,19px);line-height:1.5}
.honest{font-family:var(--mono);font-size:12.5px;margin-top:20px;max-width:46ch;opacity:.8}
.stamp{display:table;font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.08em;color:var(--signal);border:2px solid currentColor;padding:3px 10px;transform:rotate(-3deg);margin-top:10px}
.stamp--bad{color:var(--flag-text)}
.stamp--ok{color:var(--signal)}
.stamp--done{color:var(--mint)}
.stamp--save{color:var(--chalk)}
.sign{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--flag-text);border:2px solid var(--flag-text);padding:1px 7px;transform:rotate(-3deg);display:inline-block}
.soon{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;padding:1px 7px;border-radius:2px;white-space:nowrap;vertical-align:2px;opacity:.85}
.stamp,.sign{-webkit-mask-image:var(--ink-mask);mask-image:var(--ink-mask);-webkit-mask-size:160px;mask-size:160px}

@keyframes inlog{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes peck{30%{transform:rotate(-7deg) translateY(1px)}60%{transform:rotate(3deg)}}
@keyframes bob{40%{transform:translateY(-3px) rotate(-1deg)}70%{transform:translateY(1px) rotate(.5deg)}}
.hw{position:relative;display:inline-block;white-space:nowrap;color:var(--signal)}
.hw-rope{position:absolute;left:-2%;width:104%;height:.26em;bottom:-.1em;overflow:visible;pointer-events:none;animation:rope-in 1.1s .2s var(--ease) both}
.hw-rope path{fill:none;stroke:var(--signal);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hw-rope path.strand-b{stroke:var(--signal-deep)}
@keyframes rope-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.ring{fill:var(--sea);stroke:var(--chalk);stroke-width:3}
.bollard{fill:var(--signal);stroke:var(--sea);stroke-width:3}

/* ---------- sections, colour blocks, split layout ---------- */
section{position:relative;padding:80px 0}
.s-sea{background:var(--rule-chalk) repeat-x top center/640px 6px}
#loop{padding-top:56px}
.s-night{background-color:var(--ink);background-image:
  radial-gradient(1.5px 1.5px at 12% 18%,rgba(238,242,234,.7),transparent 60%),
  radial-gradient(1px 1px at 28% 9%,rgba(238,242,234,.5),transparent 60%),
  radial-gradient(1.5px 1.5px at 47% 22%,rgba(238,242,234,.7),transparent 60%),
  radial-gradient(1px 1px at 63% 6%,rgba(238,242,234,.6),transparent 60%),
  radial-gradient(1.5px 1.5px at 78% 15%,rgba(238,242,234,.6),transparent 60%),
  radial-gradient(1px 1px at 91% 28%,rgba(238,242,234,.5),transparent 60%),
  radial-gradient(1px 1px at 6% 40%,rgba(238,242,234,.4),transparent 60%),
  radial-gradient(1.5px 1.5px at 86% 46%,rgba(127,224,181,.6),transparent 60%)}
.s-paper,.s-signal{color:var(--sea)}
.s-paper{background-color:var(--paper)}
.s-signal{background-color:var(--signal)}
.s-paper ::selection,.s-signal ::selection{background:var(--sea);color:var(--paper)}
.s-paper :focus-visible,.s-signal :focus-visible{outline-color:var(--sea)}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px 64px;align-items:start}
.sec-head{position:sticky;top:28px}
.split h2{max-width:12ch}
.split .lede{max-width:40ch}
@media(max-width:980px){.split{grid-template-columns:1fr;gap:32px}.sec-head{position:static}.split h2{max-width:16ch}.split .lede{max-width:56ch}}


/* ---------- doodles: flimsy hand-drawn ink, on purpose ---------- */
.doodle{display:block;height:auto;overflow:visible;color:var(--sea)}
.s-sea .doodle,.s-night .doodle,.phero .doodle{color:var(--chalk)}
.phero .doodle .ok,.s-sea .doodle .ok,.s-night .doodle .ok{stroke:var(--mint)}
.phero .doodle .spill,.s-sea .doodle .spill,.s-night .doodle .spill{stroke:var(--flag);fill:var(--flag)}
.phero .doodle .rope,.s-sea .doodle .rope,.s-night .doodle .rope{stroke:var(--signal)}
.doodle path,.doodle circle{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;filter:url(#rough)}
.doodle .mass{fill:currentColor;fill-opacity:.08;stroke:none}
/* traced from generated line art: the ink is the fill */
.doodle--trace path{fill:currentColor;stroke:none}
.doodle .dot{fill:currentColor;stroke:none}
.doodle .fine{stroke-width:1.6;opacity:.8}
.doodle .ok{stroke:var(--mint-deep);stroke-width:3}
.doodle .spill{stroke:var(--flag-deep);fill:var(--flag-deep);fill-opacity:.22}
.doodle .rope{stroke:var(--flag-deep);stroke-width:3}
.doodle .needle{stroke:var(--flag-text);stroke-width:3.2}

/* ---------- eight ways (paper) ---------- */
.eight{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.eight>div{padding:16px 0 18px;border-top:1px solid var(--paper-rule)}
.eight>div:nth-child(-n+2){border-top:2px solid var(--sea)}
.eight dt{font-weight:800;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.025em;line-height:1.25;color:var(--flag-deep)}
.eight dt code{white-space:nowrap;color:inherit}
.eight dd{font-size:15.5px;color:var(--sea);line-height:1.45;margin-top:4px}
@media(max-width:600px){.eight{grid-template-columns:1fr}.eight>div:nth-child(2){border-top:1px solid var(--paper-rule)}}


/* ---------- compare ---------- */
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.cmp thead th{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--chalk-dim);text-align:left;padding:12px 14px;vertical-align:bottom;border-bottom:2px solid var(--chalk)}
.cmp thead td{border-bottom:2px solid var(--chalk)}
.cmp thead th.us{color:var(--sea);background:var(--signal);border-bottom-color:var(--signal)}
.cmp tbody th{text-align:left;font-weight:700;font-size:15.5px;letter-spacing:-.01em;padding:14px 14px 14px 0;width:24%;vertical-align:top;border-bottom:1px solid var(--rule)}
.cmp tbody td{padding:14px;color:var(--chalk-dim);vertical-align:top;border-bottom:1px solid var(--rule)}
.cmp td.us{color:var(--chalk);font-weight:700;background:var(--sea-3);border-bottom-color:var(--rule)}
@media(max-width:760px){
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp tbody tr{border-top:2px solid var(--chalk);padding:4px 0 14px}
  .cmp tbody th{padding:12px 0 6px;border:0;width:auto}
  .cmp tbody td{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--rule)}
  .cmp tbody td::before{content:attr(data-l);font-family:var(--mono);font-size:12px;color:var(--chalk-dim);padding-top:2px}
  .cmp td.us{padding:8px 10px;margin:0 -10px}
  .cmp td.us::before{color:var(--signal)}
}

/* ---------- made for (paper): a ruled list, not tiles ---------- */
.lanes{list-style:none;border-top:2px solid var(--sea)}
.lanes a{display:grid;grid-template-columns:minmax(170px,.75fr) minmax(0,1.25fr) 104px;gap:4px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--paper-rule);text-decoration:none}
.lanes h3{font-weight:800;font-size:clamp(19px,1.7vw,22px);letter-spacing:-.03em;transition:color .18s}
.lanes a:hover h3{color:var(--flag-deep)}
.lanes p{font-size:15.5px;color:#2E4247}
.lanes .you{visibility:hidden;justify-self:end;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--flag-deep);border:2px solid currentColor;padding:2px 8px;transform:rotate(-3deg);-webkit-mask-image:var(--ink-mask);mask-image:var(--ink-mask);-webkit-mask-size:160px;mask-size:160px}
.lanes li.is-you h3{color:var(--flag-deep)}
.lanes li.is-you .you{visibility:visible}
@media(max-width:640px){.lanes a{grid-template-columns:1fr auto}.lanes p{grid-column:1/-1;grid-row:2}}
.notfor{margin-top:20px;font-size:15.5px;color:var(--paper-dim);max-width:64ch}
.notfor a{color:var(--sea);font-weight:700;white-space:nowrap}

/* ---------- price: ruled rows ---------- */
.plans{border-top:2px solid var(--chalk)}
.plan{display:grid;grid-template-columns:110px 180px minmax(0,1fr);gap:4px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.plan-name{font-weight:800;font-size:19px;letter-spacing:-.02em}
.plan:nth-child(2) .plan-name{color:var(--signal)}
.plan:nth-child(3) .plan-name{color:var(--mint)}
.plan-price{font-weight:800;font-size:clamp(34px,3.4vw,44px);letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.plan-price small{line-height:1.4;font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:0;color:var(--chalk-dim)}
.plan-line{font-size:16px;color:#D5E2E0}
@media(max-width:640px){.plan{grid-template-columns:1fr auto}.plan-line{grid-column:1/-1}}
.plans-foot{margin-top:24px;display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap}
.plans-foot p{flex-basis:100%;font-size:16px;color:var(--chalk-dim);max-width:60ch;margin-top:4px}


/* ---------- final: the rope ties off at the button ---------- */
.final{background-color:var(--flag);color:var(--sea);padding:88px 0 80px;overflow:hidden}
.final .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px}
.final h2{max-width:14ch}
.final p{margin-top:16px;max-width:44ch;font-size:clamp(17px,1.4vw,20px);font-weight:500}
.final .btn{background:var(--sea);border-color:var(--sea);color:var(--chalk);min-height:56px;padding:0 30px;font-size:17px}
.final .btn:hover{background:var(--chalk);border-color:var(--chalk);color:var(--sea)}
.final .small{font-size:16px;margin-top:12px;font-weight:500;max-width:30ch}
.final :focus-visible{outline-color:var(--sea)}
.final ::selection{background:var(--sea);color:var(--flag)}
.end-rope{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.end-rope path{fill:none;stroke:var(--signal);stroke-width:3.6;stroke-linecap:round}
.end-rope path.strand-b{stroke:var(--sea)}
.end-rope .bollard{fill:var(--sea);stroke:var(--signal);stroke-width:3}
@media(max-width:820px){.final .wrap{grid-template-columns:1fr}}

/* ---------- footer (partials/footer.html) ---------- */
footer{background:var(--ink);border-top:1px solid var(--rule);padding:52px 0 36px}
.foot-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px}
.foot-brand{max-width:330px}
.foot-tag{font-family:var(--mono);font-size:13px;color:var(--chalk-dim);margin-top:14px;line-height:1.55}
.socials{display:flex;gap:8px;margin-top:20px}
.socials a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule);color:var(--chalk);border-radius:3px;transition:border-color .15s,color .15s}
.socials a:hover{border-color:var(--signal);color:var(--signal)}
.socials a svg{width:20px;height:20px}
.foot-links{display:flex;gap:48px;flex-wrap:wrap}
.foot-col h3{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-dim);margin-bottom:12px;line-height:1.4}
.foot-col a{display:flex;align-items:center;min-height:44px;font-family:var(--head);font-size:15px;color:var(--chalk);text-decoration:none}
.foot-col a:hover{color:var(--signal)}
.foot-cta{display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap;margin-top:36px}
.foot-login{font-size:15px;color:var(--chalk-dim);min-height:44px;min-width:44px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center}
.foot-login:hover{color:var(--chalk)}
.foot-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:12.5px;color:var(--chalk-dim)}


/* ---------- small screens ---------- */
@media(max-width:820px){section{padding:64px 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- shared explainers (home + solutions) ----------
   .steps3  the three-step "how it works" strip, on a dark section
   .flow    the Kraken diagram: boxes joined by arrows, on a dark section */
.steps3{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;counter-reset:st}
.steps3 li{counter-increment:st;padding:22px 22px 24px;background:var(--sea-2)}
.steps3 li::before{content:counter(st);display:block;font-weight:800;font-size:40px;line-height:1;color:var(--signal);margin-bottom:10px}
.steps3 h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.025em;max-width:none}
.steps3 p{margin-top:6px;font-size:16px;line-height:1.5;color:var(--chalk-dim)}
.steps3 q{color:var(--chalk)}
@media(max-width:820px){.steps3{grid-template-columns:1fr}}
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;margin-top:40px}
.flow li{position:relative;padding:16px 16px 18px;background:var(--sea-2);border:1px solid var(--rule)}
.flow li:not(:last-child)::after{content:"\2192";position:absolute;right:-28px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:800;color:var(--signal)}
.flow b{display:block;font-size:17px}
.flow .tag{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--signal);margin-bottom:6px}
.flow p{margin-top:6px;font-size:15px;line-height:1.45;color:var(--chalk-dim)}
.flow q{color:var(--chalk)}
.flow-side{margin-top:14px;padding:12px 16px;border:1px dashed var(--flag-text);color:var(--chalk);font-size:15.5px;max-width:70ch}
.flow-side b{color:var(--flag-text)}
@media(max-width:900px){.flow{grid-template-columns:1fr;gap:28px}.flow li:not(:last-child)::after{content:"\2193";right:auto;left:50%;top:auto;bottom:-28px;transform:translateX(-50%)}}

/* ---------- which one are you (persona.js) ----------
   Asked in the hero, in the first screen. Until it is answered the hero has no other buttons and every
   section below (and the footer) is hidden. After the pick the hero gets its CTAs back and #who is one line
   with a switch. */
html.gate #main>section,html.gate footer,html.gate .hero .cta,html.gate .phero .cta{display:none}
html.picked .who-ask,.no-js .who-ask,.no-js #who{display:none}
.who-ask{margin-top:34px}
.who-ask h2{font-size:clamp(24px,2.4vw,32px);color:var(--signal)}
.who-sub{margin-top:6px;font-size:17px;color:var(--chalk-dim)}
.pick-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;max-width:720px}
.pick-btn{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:center;padding:18px 20px;min-height:44px;text-align:left;font:inherit;color:var(--chalk);background:var(--sea-2);border:2px solid var(--rule);border-radius:4px;cursor:pointer;touch-action:manipulation;transition:border-color .18s,background .18s,transform .18s var(--ease)}
.pick-btn:hover{border-color:var(--signal);transform:translateY(-2px)}
.pick-btn:active{transform:none;background:var(--signal);color:var(--sea)}
#main .pick-art .doodle{color:inherit}
.pick-txt b{display:block;font-size:clamp(20px,1.9vw,24px);letter-spacing:-.025em;line-height:1.15}
.pick-txt span{display:block;margin-top:6px;font-size:15px;line-height:1.45;color:var(--chalk-dim)}
.pick-btn:active .pick-txt span{color:var(--sea)}
.who{padding:16px 0}
.who-done{font-size:17px}
.who-switch{margin-left:10px;min-height:44px;padding:0 16px;border:2px solid var(--sea);border-radius:999px;background:transparent;color:var(--sea);font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}
.who-switch:hover{background:var(--sea);color:var(--paper)}
@media(max-width:1180px){.pick-btn{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:16px}}
@media(max-width:640px){.pick-opts{grid-template-columns:1fr}.pick-btn{grid-template-columns:64px minmax(0,1fr);padding:14px 16px}.who-switch{margin:8px 0 0}}
html.gate .hero{padding-bottom:56px}

/* ---------- a real app screenshot with the tap marked (.hot, positioned in % of the screen) ---------- */
.shot{position:relative;padding:10px;background:var(--ink);border:2px solid var(--rule);border-radius:30px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:390/760;object-fit:cover;object-position:top;border-radius:21px}
.shot-in{position:relative;display:block;overflow:hidden;border-radius:21px}
.hot{position:absolute;border:3px solid var(--signal);border-radius:10px;box-shadow:0 0 0 9999px rgba(7,28,36,.38);pointer-events:none}
.f-shot{width:min(300px,100%);margin-top:28px}
html.has-reader:not(.reader-dev) .dev{display:none}