/* AlgoWatch — v4 (31 Oct 2026) */
:root{
  --page:#f2f4f7; --surface:#ffffff; --ink:#0e1726; --muted:#4f5a6b; --rule:#d8dde5;
  --cta:#1f4fe0; --cta-ink:#ffffff; --cta-hover:#173dbb;
  --add-bg:#e3f4e8; --add:#0f6a2e; --del-bg:#fde8e8; --del:#a8221b;
  --band:#0e1726; --band-ink:#eef1f6;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 18px/1.55 var(--sans);overflow-x:hidden}
a{color:var(--cta);text-underline-offset:3px}
a:hover{color:var(--cta-hover)}
:focus-visible{outline:3px solid var(--cta);outline-offset:3px;border-radius:4px}
img,svg{display:block}
h1,h2,h3{line-height:1.12;letter-spacing:-.015em;margin:0}
p{margin:0 0 1em}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px;z-index:9}
.skip:focus{left:8px}

/* header */
.top{background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:5}
.topin{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.02em}
.brand .mark{width:30px;height:30px}
.top nav{display:flex;align-items:center;gap:22px}
.top nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:16px}
.top nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px}
.top nav a.navcta{background:var(--cta);color:var(--cta-ink);padding:10px 16px;border-radius:999px;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.top nav a.navcta:hover{background:var(--cta-hover)}
@media (max-width:720px){.top nav .hide{display:none}.top nav{gap:14px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;background:var(--cta);color:var(--cta-ink);font-weight:700;font-size:17px;text-decoration:none;border:2px solid var(--cta)}
.btn:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.ghost.light{color:var(--band-ink);border-color:var(--band-ink)}
.btn.ghost.light:hover{background:var(--band-ink);color:var(--band)}

/* hero */
.hero{background:var(--surface);border-bottom:1px solid var(--rule)}
.heroin{display:grid;grid-template-columns:1.25fr .9fr;gap:56px;padding:72px 20px 80px;align-items:start}
.hero h1{font-size:clamp(34px,5.2vw,58px);font-weight:900;letter-spacing:-.03em;max-width:17ch}
.lede{font-size:20px;color:var(--muted);margin:24px 0 32px;max-width:36em}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.small{font-size:15px;color:var(--muted);margin-top:16px}
.latest{border:2px solid var(--ink);border-radius:var(--r);padding:24px;background:var(--page)}
.lhead{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin-bottom:10px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--add);box-shadow:0 0 0 4px var(--add-bg)}
.latest h2{font-size:24px;margin-bottom:12px}
.latest p{font-size:16px;color:var(--muted)}
.weights{font-family:var(--mono);font-size:14px!important;color:var(--ink)!important;background:var(--surface);padding:8px 10px;border-radius:6px}
.more{font-weight:700;display:inline-block;margin-top:4px}
@media (max-width:880px){.heroin{grid-template-columns:1fr;gap:36px;padding:44px 20px 52px}.lede{font-size:18px}}
@media (max-width:480px){.ctas .btn{width:100%}}

/* section heads */
.sechead{max-width:640px;margin-bottom:32px}
.sechead h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;margin-bottom:12px}
.sechead p{color:var(--muted)}

/* the diff — the one loud thing */
.diffs{padding:80px 0}
.dlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.drow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:16px 20px 16px 16px}
.code{font-family:var(--mono);font-size:16px;border-radius:6px;overflow:hidden;border:1px solid var(--rule)}
.ln{display:block;padding:7px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln b{font-weight:600}
.ln .sg{display:inline-block;width:1.4em;font-weight:600}
.del{background:var(--del-bg);color:var(--del)}
.del b{text-decoration:line-through;text-decoration-thickness:1px}
.add{background:var(--add-bg);color:var(--add)}
.plain{margin:0;font-size:17px}
.plain a{white-space:nowrap;font-size:15px;color:var(--muted);margin-left:4px}
.aside{color:var(--muted);font-size:15px;margin-top:20px;max-width:46em}
@media (max-width:760px){.drow{grid-template-columns:1fr;gap:12px}.code{font-size:14px}}

/* how */
.how{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:80px 0}
.steps{list-style:none;counter-reset:s;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps li{counter-increment:s;border-top:3px solid var(--ink);padding-top:18px}
.steps li::before{content:counter(s);display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;margin-bottom:14px}
.steps h3{font-size:21px;margin-bottom:8px}
.steps p{color:var(--muted);font-size:17px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* log */
.logsec{padding:80px 0}
.login{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
.log{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.lrow a{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:14px 4px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;min-height:44px}
.lrow a:hover span{text-decoration:underline}
.lrow time{font-family:var(--mono);font-size:15px;color:var(--muted);padding-top:2px}
.lrow span{font-weight:600}
.lrow.quiet span{font-weight:400;color:var(--muted)}
@media (max-width:820px){.login{grid-template-columns:1fr;gap:8px}}

/* test + interest */
.test{padding:0 0 72px}
.testin{border-left:4px solid var(--add);padding-left:24px}
.testin h2{font-size:26px;margin-bottom:10px;max-width:30ch}
.testin p{color:var(--muted);max-width:46em}
.interest{padding:0 0 80px}
.intin{display:flex;justify-content:space-between;gap:32px;align-items:center;flex-wrap:wrap;border:1px dashed var(--muted);border-radius:var(--r);padding:28px}
.intin h2{font-size:22px;margin-bottom:6px}
.intin p{color:var(--muted);font-size:16px;margin:0;max-width:40em}

/* £4 interest button (class names kept for the click counter) */
.aw-alert{display:flex;flex-direction:column;gap:8px}
.aw-btn{font:700 16px var(--sans);min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);cursor:pointer}
.aw-btn:hover{background:var(--ink);color:#fff}
.aw-btn:disabled{opacity:.55;cursor:default;background:var(--surface);color:var(--ink)}
.aw-thanks{font-size:15px;color:var(--add);margin:0}

/* band + footer */
.band{background:var(--band);color:var(--band-ink);padding:64px 0}
.bandin{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.band h2{font-size:clamp(26px,3vw,34px);font-weight:800;margin-bottom:10px}
.band p{color:#b9c2d0;max-width:38em;margin:0}
.bandbtns{display:flex;gap:12px;flex-wrap:wrap}
.f{background:var(--surface);border-top:1px solid var(--rule);padding:48px 0 40px;font-size:16px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.fbrand p{color:var(--muted);margin-top:12px;max-width:30em}
.f h2{font-size:15px;font-weight:700;margin-bottom:10px}
.f a{display:block;color:var(--ink);text-decoration:none;padding:4px 0}
.f a:hover{text-decoration:underline}
.f .brand{display:flex}
.fine{grid-column:1/-1;color:var(--muted);font-size:14px;border-top:1px solid var(--rule);padding-top:20px;margin:8px 0 0}
.fine a{display:inline;color:var(--muted);text-decoration:underline}
@media (max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}

/* inner pages (content carried over from the previous site) */
.doc{max-width:760px;margin:0 auto;padding:48px 20px 72px}
.doc h1{font-size:clamp(30px,4.4vw,46px);font-weight:900;letter-spacing:-.025em;margin-bottom:20px}
.doc h2{font-size:26px;font-weight:800;margin:40px 0 12px}
.doc ul,.doc ol{padding-left:1.2em}
.doc li{margin-bottom:6px}
.doc .meta{font-size:15px;color:var(--muted)}
.doc .meta a{color:var(--muted)}
.doc .lede{font-size:20px;color:var(--muted)}
.doc .kick{font-weight:700;font-size:15px;margin-bottom:8px}
.doc .c{font-size:15px;color:var(--muted)}
.doc .pn{margin-top:40px;font-weight:600}
.doc .wcbox{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:20px 22px;margin:24px 0}
.doc .wcbox ul{list-style:none;padding:0;margin:0}
.doc .wcbox li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rule)}
.doc .wcbox li:last-child{border-bottom:0}
.tag{display:inline-block;font-size:13px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--page);border:1px solid var(--rule);color:var(--muted);white-space:nowrap;margin-right:6px}
.tag.t-high{background:var(--add-bg);border-color:transparent;color:var(--add)}
.tag.t-medium{background:#fff4d6;border-color:transparent;color:#7a5200}
.tag.t-low{background:var(--del-bg);border-color:transparent;color:var(--del)}
.doc .interest{display:flex;flex-direction:column;gap:14px;padding:20px 22px;margin:8px 0 24px;border:1px dashed var(--muted);border-radius:var(--r)}
.doc .interest p{margin:0}
.doc .follow a{font-weight:700}
.doc .items h2{font-size:24px}
.doc .tiers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.doc .tier{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:22px}
.doc .price{font-size:32px;font-weight:900}
.doc .steps{grid-template-columns:1fr;gap:12px}
.doc .vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.doc .vs>*{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:18px}
.doc .vs .us{border:2px solid var(--ink)}
@media (max-width:600px){.doc .tiers,.doc .vs{grid-template-columns:1fr}}
.doc .btn{margin:8px 0 16px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.top nav a{white-space:nowrap}
@media (max-width:420px){.brand{font-size:18px}.top nav a.navcta{padding:8px 14px;font-size:15px}.top nav{gap:12px}}
.doc .wcbox .tag{min-width:92px;text-align:center}

/* v4 (31 Oct 2026): long unbroken URLs in FAQ answers pushed /faq to 398px at 390px */
.doc{overflow-wrap:anywhere}
.doc p,.doc li,.doc h1,.doc h2{overflow-wrap:anywhere}