/* One stylesheet for the two public pages: the landing (/) and the numbers (/data/).
   Shared first, then one section per page. Served by whitenoise; collectstatic in the
   Dockerfile picks it up. No build step: this file is what the browser gets. */

/* ---- Shared: tokens, reset, grid, masthead, footer ------------------------------ */
:root{
  --ground:#F7F5F1; --panel:#FFFFFF; --ink:#111110; --muted:#75716A;
  --rule:#111110; --hair:#DAD6CE; --accent:#E4002B; --accent-ink:#FFFFFF;
  --grid:12; --gap:24px; --maxw:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E0E0D; --panel:#161513; --ink:#F4F1EA; --muted:#9A958C;
    --rule:#F4F1EA; --hair:#2A2825; --accent:#FF2E43; --accent-ink:#0E0E0D;
  }
}
:root[data-theme="dark"]{
  --ground:#0E0E0D; --panel:#161513; --ink:#F4F1EA; --muted:#9A958C;
  --rule:#F4F1EA; --hair:#2A2825; --accent:#FF2E43; --accent-ink:#0E0E0D;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:400; line-height:1.5; font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.grid{display:grid;grid-template-columns:repeat(var(--grid),minmax(0,1fr));gap:var(--gap)}
a{color:inherit}
.label{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.top{border-top:9px solid var(--rule)}
.masthead{padding:18px 0 16px;align-items:baseline}
.brand{grid-column:1 / span 6;display:flex;align-items:center;gap:12px;font-weight:900;font-size:1.5rem;letter-spacing:-.02em;text-decoration:none}
.mark{width:15px;height:15px;background:var(--accent);display:inline-block}
.masthead .meta{grid-column:7 / span 6;text-align:right;align-self:center}
.masthead .meta a{text-decoration:none;margin-left:18px}

.hero{padding:56px 0 40px;border-bottom:2px solid var(--rule)}
.hero .eyebrow{grid-column:1 / span 12;margin-bottom:28px}
.figure{font-weight:900;letter-spacing:-.04em;line-height:.9;font-size:clamp(3.4rem,11vw,7rem);color:var(--accent);font-variant-numeric:tabular-nums}
.btn{display:inline-block;font-weight:800;letter-spacing:.01em;text-decoration:none;padding:13px 22px;border:2px solid var(--rule)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

footer{border-top:9px solid var(--rule);margin-top:16px;padding:22px 0 60px}
footer .disc{grid-column:1 / span 8;font-size:.8rem;color:var(--muted);line-height:1.6}
footer .cw{grid-column:9 / span 4;text-align:right;font-size:.8rem;color:var(--muted)}

@media (max-width:720px){
  .brand,.masthead .meta{grid-column:1 / span 12;text-align:left}
  .masthead .meta{margin-top:6px}
  .masthead .meta a{margin:0 18px 0 0}
  footer .disc,footer .cw{grid-column:1 / span 12;text-align:left}
  footer .cw{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Landing (/) ---------------------------------------------------------------- */
.hero > h1{
  grid-column:1 / span 11;margin:0;font-weight:900;letter-spacing:-.035em;
  line-height:.98;font-size:clamp(2.6rem,7vw,5.3rem);text-wrap:balance;
}
.hero > h1 .red{color:var(--accent)}
.funnel{grid-column:1 / span 5;margin-top:44px;align-self:end}
.funnel .from{font-size:.95rem;color:var(--muted);font-variant-numeric:tabular-nums}
.has-metric-definition{border-block-end:2px dotted var(--p-color-border-tertiary,rgba(204,204,204,1));cursor:help;text-decoration:none;color:inherit}
.figure-cap{font-weight:600;font-size:1.05rem;margin-top:4px}
.pitch{grid-column:7 / span 6;align-self:end;margin-top:44px}
.pitch p{margin:0 0 22px;font-size:1.12rem;max-width:32ch}
.actions{display:flex;gap:14px;flex-wrap:wrap}

/* Spec list */
.spec{padding:8px 0 8px}
.spec .label.head{grid-column:1 / span 12;padding:28px 0 8px}
.row{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(var(--grid),1fr);gap:var(--gap);padding:18px 0;border-top:1px solid var(--hair)}
.row .k{grid-column:1 / span 3;font-weight:800;letter-spacing:-.01em;font-size:1.15rem}
.row .v{grid-column:4 / span 7;color:var(--muted);max-width:52ch}
.row .n{grid-column:11 / span 2;text-align:right;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}

/* Pricing */
.pricing{padding:56px 0 24px;border-top:2px solid var(--rule);margin-top:40px}
.pricing .label.head{grid-column:1 / span 12;margin-bottom:22px}
.notice{grid-column:1 / span 12;border-left:4px solid var(--accent);padding:10px 0 10px 16px;margin:30px 0 0;color:var(--muted);max-width:64ch}
.notice strong{color:var(--ink)}
.tier{grid-column:span 4;border-top:2px solid var(--rule);padding-top:16px;display:flex;flex-direction:column;min-height:340px}
.tier.mid{border-top-color:var(--accent)}
.tier .name{font-weight:800;font-size:1.25rem}
.tier .tagline{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.price{font-weight:900;letter-spacing:-.03em;font-size:3rem;line-height:1;font-variant-numeric:tabular-nums}
.price small{font-size:1.1rem;font-weight:500;letter-spacing:0;color:var(--muted);opacity:.85}
.tier ul{list-style:none;margin:20px 0 24px;padding:0;flex:1}
.tier li{padding:7px 0;border-bottom:1px solid var(--hair);font-size:.98rem}
.tier.mid .name{color:var(--accent)}
/* Enquiry form: native popover, no JS */
.tier > .btn[popovertarget]{cursor:pointer;font:inherit;font-weight:800;text-align:center;
  background:none;color:inherit;width:100%}
/* centred in the viewport: fixed + inset 0 + auto margins (never position:relative,
   which drops the popover back into page flow) */
.ask{position:fixed;inset:0;margin:auto;width:min(440px,92vw);height:fit-content;
  max-height:90vh;overflow:auto;padding:32px;border:2px solid var(--rule);
  background:var(--panel);color:var(--ink)}
.ask::backdrop{background:rgba(17,17,16,.55)}
.ask .head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.ask h3{margin:0;font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.ask > p{margin:0;color:var(--muted);font-size:.95rem}
.ask #lead-done{margin-top:20px;color:var(--ink);font-weight:600}
.ask form{margin-top:24px}
.ask .x{flex:none;width:auto;margin:-4px -8px 0 0;border:0;background:none;color:var(--muted);
  font-size:1.7rem;line-height:1;cursor:pointer;padding:2px 8px}
.ask label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin:16px 0 6px}
.ask input,.ask textarea{width:100%;font:inherit;font-size:.95rem;padding:9px 11px;
  background:var(--panel);color:var(--ink);border:1px solid var(--hair);border-radius:0}
.ask input:focus-visible,.ask textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.ask form button{width:100%;margin-top:22px;cursor:pointer;font:inherit}  /* submit only — not the ✕ */
.ask input[name="web"]{position:absolute;left:-9999px}  /* honeypot */

/* Sample */
.sample{padding:48px 0;border-top:2px solid var(--rule);margin-top:24px}
.sample h2{grid-column:1 / span 7;margin:0;font-weight:900;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.03em}
.sample .side{grid-column:8 / span 5;color:var(--muted);align-self:end}
.sample a{color:var(--accent);font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent)}

@media (max-width:720px){
  .hero > h1,.hero .eyebrow,.funnel,.pitch{grid-column:1 / span 12}
  .funnel{margin-top:34px}.pitch{margin-top:30px}
  .row .k{grid-column:1 / span 12}.row .v{grid-column:1 / span 12;margin-top:4px}.row .n{display:none}
  .tier{grid-column:1 / span 12}
  .sample h2,.sample .side{grid-column:1 / span 12}
}

/* ---- Data (/data/) --------------------------------------------------------------- */
.hero .big{grid-column:1 / span 7;margin:0}
.hero .big .figure{display:block}
.figure-claim{display:block;font-weight:800;font-size:clamp(1.5rem,3.4vw,2.3rem);
  letter-spacing:-.025em;margin-top:12px;line-height:1.1;text-wrap:balance}
.hero .side{grid-column:8 / span 5;align-self:end}
.hero .side p{margin:0 0 24px;font-size:1.05rem;max-width:36ch}
.hero .side p.go{margin:0}
/* The three numbers are a funnel, so they sit in a row under the claim rather than in
   a list beside it — the shape is the point, and a column of two thin rows was not it. */
.facts{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0 var(--gap);margin:48px 0 0;padding:0;list-style:none;}
.facts li{padding:18px 0 0}
.facts b{display:block;font-weight:900;font-size:clamp(1.7rem,3.6vw,2.4rem);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:8px;color:var(--muted);font-size:.9rem;max-width:26ch}

/* Blocks */
.block{padding:52px 0 40px;border-bottom:2px solid var(--rule)}
.block .num{grid-column:1 / span 12}
.block h2{grid-column:1 / span 8;margin:10px 0 0;font-weight:900;letter-spacing:-.03em;line-height:1.05;font-size:clamp(1.7rem,4.2vw,2.7rem);text-wrap:balance}
.block h2 .red{color:var(--accent)}
.block .lead{grid-column:1 / span 8;margin:14px 0 0;font-size:1.08rem;max-width:62ch}
.block .lead.thin{color:var(--muted)}
.block .text{grid-column:1 / span 5;align-self:start;min-width:0}
.block .chart{grid-column:6 / span 7;align-self:start;min-width:0}
.block .text ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.block .text li{padding:11px 0;border-bottom:1px solid var(--hair);font-size:.97rem}
.block .text li b{font-variant-numeric:tabular-nums}
.block h3{grid-column:1 / span 8;margin:36px 0 0;font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.point{grid-column:1 / span 12;margin:32px 0 0;border-left:4px solid var(--accent);padding:8px 0 8px 16px;font-size:1.08rem;max-width:64ch}
.point strong{font-weight:800}
.note{grid-column:1 / span 8;margin:18px 0 0;color:var(--muted);font-size:.88rem;line-height:1.55;max-width:70ch}

/* Charts — no canvas, no JS: bars are divs, columns are flex */
/* The columns are the list's, and every row borrows them through `subgrid`, so the
   value column is measured once against all rows. With a grid per row the track was
   whatever that row's own value left over, and "77,9 % · 1 848" drew itself a shorter
   bar than the "0,9 % · 21" underneath — a width that meant nothing. */
.bars{display:grid;grid-template-columns:minmax(0,17ch) 1fr auto;margin:0;padding:0;
  list-style:none;font-size:.92rem}
.bars li{grid-column:span 3;display:grid;grid-template-columns:subgrid;gap:12px;
  align-items:center;padding:5px 0}
.bars .k{line-height:1.15}
.bars .bar{height:18px;background:var(--hair);position:relative}
.bars .bar i{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.bars .rest .bar i{background:var(--muted);opacity:.45}
.bars .hot .bar i{background:var(--accent)}
.bars .v{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted);min-width:9ch;text-align:right}
.bars .v b{color:var(--ink);font-weight:600}
.cols{display:flex;align-items:flex-end;gap:10px;height:200px;border-bottom:2px solid var(--rule);padding-top:22px}
.cols .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative;min-width:0}
.cols .col i{display:block;flex:none;background:var(--ink);min-height:1px}
.cols .col.hot i{background:var(--accent)}
.cols .col .n{flex:none;text-align:center;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:4px}
.xaxis{display:flex;gap:10px;margin-top:6px}
.xaxis span{flex:1;text-align:center;font-size:.78rem;color:var(--muted);min-width:0}
.stack{margin:0;padding:0;list-style:none}
.stack li{padding:10px 0 14px}
.stack .k{display:flex;justify-content:space-between;font-size:.92rem;margin-bottom:6px}
.stack .k b{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:500}
.stack .bar{display:flex;height:26px;gap:2px}
.stack .bar i{display:block;min-width:1px;background:var(--c,var(--hair))}
/* Our own tooltip. The browser waits about a second before it shows a `title`, which
   is a long time to hold a mouse on a 6px slice of a bar. `data-tip` on any element
   inside a chart; the numbers also live in the table under every chart, which is what
   a keyboard or a screen reader reads — these bars are decoration and take no focus. */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:100%;left:50%;
  transform:translate(-50%,-7px);opacity:0;visibility:hidden;pointer-events:none;z-index:5;
  background:var(--ink);color:var(--ground);font-size:.78rem;font-weight:600;
  letter-spacing:0;line-height:1.3;white-space:nowrap;padding:5px 9px;
}
/* At the ends of a chart there is no room to centre in, so the box hangs off its own
   edge. Only where the thing hovered is narrow — a column, the thin tail segment of a
   stacked bar. The first segment of a stacked bar is the widest one there is, so it
   centres like everything else and the stack takes only the right-hand rule. */
.cols > :first-child[data-tip]::after,
.cols > :first-child [data-tip]::after{left:0;right:auto;transform:translate(0,-7px)}
.stack .bar > [data-tip]:last-child::after,
.cols > :last-child[data-tip]::after,
.cols > :last-child [data-tip]::after{left:auto;right:0;transform:translate(0,-7px)}
/* A sentence rather than a number: it wraps, and it opens from the word's own left
   edge, because the word sits in running text and has no width to centre on. */
abbr[data-tip]{border-block-end:2px dotted var(--muted);cursor:help;text-decoration:none}
abbr[data-tip]::after{
  left:0;right:auto;transform:translate(0,-7px);
  white-space:normal;width:max-content;max-width:min(38ch,70vw);
  font-weight:400;line-height:1.45;padding:8px 11px;
}
[data-tip]:hover::after{opacity:1;visibility:visible}

.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;padding:0;list-style:none;font-size:.85rem}
.legend i{display:inline-block;width:12px;height:12px;background:var(--c,var(--hair));vertical-align:-1px;margin-right:6px}
.s0{--c:var(--accent)}.s1{--c:var(--ink)}
.s2{--c:color-mix(in srgb,var(--ink) 58%,var(--ground))}
.s3{--c:color-mix(in srgb,var(--ink) 42%,var(--ground))}
.s4{--c:color-mix(in srgb,var(--ink) 28%,var(--ground))}
.s5{--c:color-mix(in srgb,var(--ink) 16%,var(--ground))}
.srest{--c:repeating-linear-gradient(135deg,var(--hair) 0 4px,var(--ground) 4px 7px)}
/* A sub-block that has no chart, only two figures: the number carries its own caption
   and its own sentence, full width. Before this the sentence sat in a .text column on
   the left and the figure in a .chart column on the right, which printed both
   percentages twice and left the bottom-right corner of the block empty. */
.duo{grid-column:1 / span 12;display:grid;gap:var(--gap);margin:26px 0 0;padding:0;
  list-style:none;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.duo li{border-top:2px solid var(--rule);padding-top:16px;min-width:0}
.duo b{display:block;font-weight:900;font-size:clamp(2rem,4.4vw,2.8rem);letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums}
.duo b.red{color:var(--accent)}
.duo .cap{display:block;margin-top:9px;font-weight:600;font-size:.98rem;max-width:26ch}
.duo p{margin:10px 0 0;color:var(--muted);font-size:.92rem;line-height:1.55;max-width:40ch}
.block > .src{grid-column:1 / span 12;margin-top:14px}

.pair{display:flex;gap:24px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
.pair > div{flex:1}
.pair .big{font-weight:900;font-size:2.2rem;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.pair .big.red{color:var(--accent)}
.pair .cap{font-size:.85rem;color:var(--muted);margin-top:6px;max-width:22ch}
.daily .cols .col{flex-direction:row;align-items:flex-end;gap:2px}
.daily .cols .col i{flex:1}
.daily .cols .col i.sk,.legend i.lsk{background:var(--muted);opacity:.6}
.daily .cols .col i.com{background:var(--accent)}
.funnel3{display:flex;align-items:flex-end;gap:14px;height:180px;border-bottom:2px solid var(--rule)}
.funnel3 > div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.funnel3 i{display:block;background:var(--ink)}
.funnel3 .grey i{background:repeating-linear-gradient(135deg,var(--muted) 0 4px,var(--ground) 4px 7px)}
.funnel3 .n{text-align:center;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:4px}
.src{margin-top:10px}
.chart details{margin-top:14px}
.chart summary{cursor:pointer;font-size:.85rem;color:var(--muted)}
.tbl{overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;margin-top:8px;font-size:.88rem}
.tbl th,.tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--hair)}
.tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums}

/* Closing */
.close{padding:52px 0 32px}
.close h2{grid-column:1 / span 7;margin:0;font-weight:900;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.03em}
.close .side{grid-column:8 / span 5;color:var(--muted);align-self:end}
.close .side a{color:var(--accent);font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent)}
.close .sub{grid-column:1 / span 7;margin:20px 0 0;font-size:1.06rem;max-width:46ch}
.close .actions{grid-column:1 / span 7;margin-top:24px}

@media (max-width:820px){
  .hero .big,.hero .side{grid-column:1 / span 12}.hero .side{margin-top:30px}
  .facts{margin-top:34px;gap:0}
  .facts li + li{border-top:1px solid var(--hair);margin-top:14px}
  .block h2,.block .lead,.block .text,.block .chart,.block h3,.note{grid-column:1 / span 12}
  .block .chart{margin-top:8px}
  .close h2,.close .side,.close .sub,.close .actions{grid-column:1 / span 12}
  .xaxis span:nth-child(even){visibility:hidden}
}