/* Same type and colour as czt.sh: Schibsted Grotesk and IBM Plex Mono, near-black, one green accent. Flat, no glows. */
:root{
  color-scheme:dark;
  --ink-0:#0b0c0e;--ink-1:#111215;--ink-2:#181a1e;--line:#25272d;--line2:#3b3e46;
  --text:#ececee;--dim:#9a9da5;--faint:#4a4d55;--accent:#5af78e;--accent-ink:#0b1a10;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gut:clamp(16px,4vw,48px);--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink-0);color:var(--text);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:var(--ink-0)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--mono);font-size:.8rem;letter-spacing:.01em}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gut)}
.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:16px;top:16px;z-index:60;background:var(--ink-2);padding:8px 14px;border-radius:8px}

/* header */
.bar{position:fixed;top:12px;left:12px;right:12px;z-index:40;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink-0) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}
.bar-in{max-width:1320px;margin:0 auto;padding:0 clamp(14px,3vw,48px);min-height:58px;display:flex;align-items:center;gap:clamp(14px,2.4vw,28px)}
.brand{font-family:var(--mono);font-size:.9rem;font-weight:500;flex:none;white-space:nowrap}
.tilde{color:var(--accent)}
.bar nav{margin-left:auto;display:flex;gap:clamp(14px,2.4vw,28px)}
.bar nav a{color:var(--dim);font-size:.94rem;font-weight:500;transition:color .2s;white-space:nowrap}
.bar nav a:hover{color:var(--text)}
.clock{color:var(--dim);flex:none;font-variant-numeric:tabular-nums}
.pill{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);font:500 .8rem var(--mono);transition:background .2s}
.pill:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left}
@media (max-width:860px){.bar nav,.clock{display:none}.pill{margin-left:auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:999px;border:1px solid var(--line2);font-weight:600;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.btn:hover{border-color:var(--text)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.solid:hover{background:var(--text);border-color:var(--text);color:var(--ink-0)}
.btn.ghost{background:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.off{border-style:dashed;color:var(--faint);pointer-events:none}

/* hero */
.hero{position:relative;min-height:78svh;display:flex;align-items:center;overflow:hidden;padding:120px 0 72px}
.field{position:absolute;inset:0;width:100%;height:100%;--field:#202228;opacity:.7;-webkit-mask-image:linear-gradient(#000 50%,transparent);mask-image:linear-gradient(#000 50%,transparent)}
.hero-in{position:relative;z-index:2;width:100%}
.pl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 clamp(14px,2.4vw,26px)}
.seg{display:inline-flex;align-items:center;padding:7px 16px 7px 22px;margin-left:-9px;color:var(--ink-0);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%);font-weight:500;line-height:1}
.seg-user{background:var(--accent);margin-left:0;padding-left:12px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.seg-path{background:var(--ink-2);color:var(--dim)}
.typed{color:var(--text)}
.cursor{display:inline-block;width:.55em;height:1.1em;margin-left:-6px;background:var(--accent);animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.name{margin:0 0 clamp(20px,3vw,36px);font-weight:800;font-size:clamp(3rem,13vw,12.5rem);line-height:.9;letter-spacing:-.055em}
.w{display:inline-block}
.sub{display:flex;gap:14px;font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.5;color:var(--dim);max-width:52ch;margin:0 0 32px}
.gt{color:var(--accent);flex:none}
.links{display:flex;flex-wrap:wrap;gap:12px}

/* sections */
.block{padding-top:clamp(64px,9vw,120px)}
.head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 24px;margin-bottom:clamp(24px,3.4vw,44px)}
.head .pl{grid-column:1 / -1}
.title{margin:0;font-weight:800;font-size:clamp(2.6rem,7vw,6rem);line-height:.92;letter-spacing:-.05em}
.all{color:var(--dim);margin:0 0 .8em}

/* the picks: an index, like the lists on czt.sh */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr) auto;gap:clamp(20px,3.4vw,52px);align-items:center;padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line)}
.thumb{display:grid;place-items:center;aspect-ratio:3/2;background:#fff;border-radius:10px;overflow:hidden}
.thumb img{width:70%;height:62%;object-fit:contain}
.tile-none{font-weight:800;font-size:1.6rem;letter-spacing:-.04em;color:#222}
.rmeta{margin:0 0 6px;color:var(--dim)}
.rbody h3{margin:0;font-weight:700;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05;letter-spacing:-.04em}
.rbody h3 a{transition:color .2s}
.row:hover .rbody h3 a{color:var(--accent)}
.sum{margin:10px 0 0;color:var(--dim);font-size:1.05rem;max-width:46ch}
.racts{display:flex;flex-direction:column;gap:8px;min-width:190px}
.slot .thumb{background:transparent;border:1px dashed var(--line2)}
.slot .tile-none{color:var(--faint)}
.empty{color:var(--dim);margin:0 0 28px}
@media (max-width:760px){
  .row{grid-template-columns:minmax(0,1fr)}
  .thumb{aspect-ratio:16/9}
  .racts{flex-direction:row;flex-wrap:wrap;min-width:0}
  .racts .btn{flex:1 1 150px}
}

/* how it works */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(24px,4vw,56px)}
.step{padding-top:18px;border-top:1px solid var(--line2)}
.num{color:var(--accent)}
.step h3{margin:12px 0 8px;font-weight:650;font-size:1.5rem;letter-spacing:-.03em;line-height:1.15}
.step p{margin:0;color:var(--dim)}

/* disclosure */
.say{margin:0;font-weight:800;font-size:clamp(2rem,5.4vw,4.8rem);line-height:1;letter-spacing:-.05em;max-width:20ch}
.say-sub{color:var(--dim);font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:52ch;margin:28px 0 0}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:clamp(100px,14vw,200px);padding:clamp(48px,7vw,96px) 0 32px}
.big{display:inline-block;font-weight:800;font-size:clamp(3.4rem,12.5vw,11rem);line-height:.88;letter-spacing:-.06em;transition:color .2s}
.big span{display:inline-block;color:var(--accent);transition:transform .6s var(--ease)}
.big:hover{color:var(--accent)}
.big:hover span{transform:translate(.08em,-.08em)}
.foot-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:clamp(32px,5vw,64px);padding-top:24px;color:var(--dim)}
.foot-row p{margin:0;max-width:44ch}
.foot-links{list-style:none;margin:0;padding:0;display:flex;gap:8px 24px;flex-wrap:wrap}
.foot-links a{color:var(--text);transition:color .2s}
.foot-links a:hover{color:var(--accent)}

/* reveal on scroll (only when motion is allowed) */
html.motion .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.motion .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cursor{animation:none}}

/* ---------- review pages ---------- */
.review .rv-hero{padding:clamp(120px,18vh,170px) 0 clamp(32px,4vw,56px);border-bottom:1px solid var(--line)}
.back{display:inline-block;color:var(--dim);margin-bottom:24px;transition:color .2s}
.back:hover{color:var(--accent)}
.rv-top{display:flex;gap:clamp(24px,4vw,56px);align-items:center;flex-wrap:wrap;margin:0 0 28px}
.rv-logo{display:grid;place-items:center;width:clamp(200px,24vw,300px);aspect-ratio:3/2;border-radius:10px;background:#fff;flex:none}
.rv-logo img{width:70%;height:62%;object-fit:contain}
.rv-id{min-width:0;flex:1 1 320px}
.pillc{display:inline-flex;align-items:center;height:26px;padding:0 11px;margin-bottom:14px;border-radius:999px;border:1px solid var(--line2);color:var(--dim);font:500 .72rem var(--mono)}
.rv-title{margin:0;font-weight:800;font-size:clamp(2.8rem,8vw,7rem);line-height:.92;letter-spacing:-.055em}
.rv-tag{color:var(--dim);font-size:clamp(1.1rem,1.8vw,1.45rem);margin:14px 0 0;max-width:42ch}
.rv-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.review .notice{margin:0;padding:12px 16px;border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:8px;background:none;font-size:.95rem;max-width:70ch;color:var(--dim)}
.review .notice strong{color:var(--text)}
.rv-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,5vw,80px);align-items:start;padding-top:clamp(36px,5vw,64px)}
.lead{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.55;margin:0 0 8px;max-width:60ch}
.take{margin:24px 0;padding-left:18px;border-left:3px solid var(--accent)}
.take .mono{color:var(--accent);margin:0 0 6px}
.take p:last-child{margin:0}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(20px,4vw,48px);margin:32px 0 8px}
.box{padding-top:16px;border-top:1px solid var(--line2)}
.box h2{margin:0 0 12px;font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.ticks,.crosses{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li,.crosses li{position:relative;padding-left:26px;color:var(--dim);line-height:1.5}
.ticks li::before{content:"+";position:absolute;left:0;top:0;color:var(--accent);font:500 1rem var(--mono)}
.crosses li::before{content:"\2013";position:absolute;left:0;top:0;color:var(--faint);font:500 1rem var(--mono)}
.review .title.sm,.title.sm{font-size:clamp(1.9rem,3.8vw,3rem);margin:clamp(40px,6vw,72px) 0 12px}
.checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.checks li{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.checks .n{color:var(--accent);padding-top:3px}
.checks p{margin:0}
.verdict{margin:40px 0 0;padding-left:20px;border-left:3px solid var(--accent)}
.verdict .mono{color:var(--accent);margin:0 0 8px}
.verdict > p:nth-child(2){font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.4;font-weight:600;letter-spacing:-.02em;margin:0 0 22px;max-width:44ch}
.rv-side{position:sticky;top:92px;padding-top:2px}
.side-cta .btn{width:100%}
.rv-side h3{margin:22px 0 4px;font-weight:650;font-size:1rem}
.facts{margin:0}
.facts div{padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--dim);font:.76rem var(--mono);text-transform:uppercase;letter-spacing:.05em}
.facts dd{margin:2px 0 0}
.more-h{margin-top:28px;font-weight:650;font-size:1.15rem}
.morelist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:0 28px;border-top:1px solid var(--line)}
.morelist a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);transition:color .2s}
.morelist a:hover{color:var(--accent)}
.sticky-cta{display:none}
@media (max-width:900px){
  .rv-body{grid-template-columns:minmax(0,1fr)}
  .rv-side{position:static}
  .rv-side .side-cta{display:none}
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--ink-0) 94%,transparent);border-top:1px solid var(--line)}
  .sticky-cta .btn{width:100%}
  .review .foot{padding-bottom:90px}
}

/* search and categories */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.finder{margin:0 0 clamp(20px,3vw,32px)}
.search{width:100%;height:56px;padding:0 4px;background:none;border:0;border-bottom:1px solid var(--line2);color:var(--text);font:500 clamp(1.1rem,2vw,1.5rem) var(--sans);letter-spacing:-.02em;outline:none;border-radius:0}
.search::placeholder{color:var(--faint)}
.search:focus{border-color:var(--accent)}
.cats{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px}
.cat{background:none;border:0;border-bottom:2px solid transparent;padding:6px 0;color:var(--dim);cursor:pointer;transition:color .2s,border-color .2s}
.cat:hover{color:var(--text)}
.cat[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.row[hidden]{display:none}

.rv-banner{margin:0 0 28px}
.rv-banner img{display:block;width:auto;height:auto;max-width:100%;max-height:440px;border-radius:10px;background:var(--ink-2)}
.rv-banner figcaption{margin-top:8px;color:var(--faint)}

.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:0 0 8px}
.shots figure{margin:0}
.shots img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:10px;background:var(--ink-2)}
.shots figcaption{margin-top:6px;color:var(--faint)}
.credit{margin:0 0 28px;color:var(--faint)}
.codes{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:10px}
.codes li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 14px;border:1px solid var(--line,#2a2d31);border-radius:10px}
.codes code{color:var(--accent);font-size:1rem}
.codes span{color:var(--muted,#a0a4aa)}

.qa{display:grid;gap:8px;margin:0 0 28px}
.qa details{border:1px solid var(--line,#2a2d31);border-radius:10px;padding:0 16px}
.qa summary{cursor:pointer;padding:14px 0;font-weight:600}
.qa p{margin:0 0 14px;color:var(--muted,#a0a4aa)}

.ticks.wide{margin:0 0 28px}
.lead.sm{font-size:1rem;color:var(--muted,#a0a4aa);margin:0 0 28px}

.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:0 0 8px}
.vids figure{margin:0}
.vids video{display:block;width:100%;aspect-ratio:var(--ar);max-height:460px;object-fit:contain;border-radius:10px;background:#000}
.vids figcaption{margin-top:6px;color:var(--faint)}

.media{margin:0 0 28px}
.media .frame{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;padding:clamp(10px,2.4vw,24px);background:var(--ink-2);border:1px solid var(--line,#2a2d31);border-radius:12px;overflow:hidden}
.media .frame a{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.media img,.media video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px}
.media video{width:100%;height:100%;background:#000}
.media figcaption{margin-top:8px;color:var(--faint)}
.figs{display:grid;gap:16px;margin:0 0 12px}
.figs.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.figs.n2{grid-template-columns:1fr}}