/* The BidLoop site stylesheet. Lifted out of index.html when the scorecard
   page arrived: two pages hand-copying 480 lines of CSS is two pages that
   drift. Linked, not inlined, so a visitor pays for it once. */
:root {
    --blue: #0764f2;
    --blue-deep: #0546a9;
    --cyan: #06b6d4;
    --ink: #131a24;
    --paper: #ffffff;
    --wash: #f5f7fb;
    --wash-2: #eef2f8;
    --muted: #5a6678;
    --faint: #9aa6b6;
    --line: #e6eaf1;
    --line-2: #d7dde7;
    --ok: #12a150;

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
    --num: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --wrap: 1240px;
  }
  @media (prefers-color-scheme: dark) {
    :root{ --blue:#4d8dff; --blue-deep:#3d7cf0; --cyan:#26c8e0; --ink:#e7ecf3; --paper:#0c131d;
      --wash:#111b28; --wash-2:#16202e; --muted:#9aa7b8; --faint:#61708500; --faint:#66748a;
      --line:#1e2a3a; --line-2:#26344880; --ok:#3ec27a; }}
  :root[data-theme="dark"]{ --blue:#4d8dff; --blue-deep:#3d7cf0; --cyan:#26c8e0; --ink:#e7ecf3; --paper:#0c131d;
    --wash:#111b28; --wash-2:#16202e; --muted:#9aa7b8; --faint:#66748a; --line:#1e2a3a; --line-2:#26344880; --ok:#3ec27a; }
  :root[data-theme="light"]{ --blue:#0764f2; --blue-deep:#0546a9; --cyan:#06b6d4; --ink:#131a24; --paper:#ffffff;
    --wash:#f5f7fb; --wash-2:#eef2f8; --muted:#5a6678; --faint:#9aa6b6; --line:#e6eaf1; --line-2:#d7dde7; --ok:#12a150; }

  * { box-sizing: border-box; }
  html { overflow-x: clip; }   /* backstop: never scroll the page sideways (clip keeps the sticky nav working) */
  body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.62; -webkit-font-smoothing:antialiased; }
  .wrap { max-width:var(--wrap); margin:0 auto; padding:0 28px; }
  h1,h2,h3 { margin:0; line-height:1.12; letter-spacing:-0.02em; font-weight:680; text-wrap:balance; }
  p { margin:0; }
  /* the same blue→cyan blend the hero tagline uses, so each section opens in
     the brand's two colours instead of flat blue */
  .ey { font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
        background:linear-gradient(90deg, var(--blue), var(--cyan));
        -webkit-background-clip:text; background-clip:text; color:transparent;
        width:fit-content; margin-inline:auto; }
  .lede { color:var(--muted); font-size:19px; line-height:1.55; max-width:60ch; }

  .btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:15px;
    padding:12px 22px; border-radius:9px; border:1px solid transparent; text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s; }
  .btn-primary { background:var(--blue); color:#fff; }
  .btn-primary:hover { background:var(--blue-deep); }

  /* nav */
  .nav { position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
  /* 76px, not 64: the CTA is a real button and needs room to sit inside the bar
     rather than push against its edges */
  .nav .wrap { display:flex; align-items:center; gap:20px; height:76px; }
  /* the mark is the brand — it was 20px and read as an afterthought beside the
     wordmark. Both up, and the mark keeps its own proportions (18:17). */
  .brand { display:flex; align-items:center; gap:11px; font-weight:750; font-size:27px; letter-spacing:-0.03em; color:var(--ink); text-decoration:none; }
  .brand .mk { width:30px; height:28px; }
  .nav .links { margin-left:auto; display:flex; align-items:center; gap:26px; }
  .nav .links a { font-size:14.5px; color:var(--muted); text-decoration:none; font-weight:500; }
  .nav .links a:hover { color:var(--ink); }
  /* line-height:1 so the label can't ride out of the button, which is what made
     the top-right CTA look clipped */
  .nav .btn { padding:11px 20px; font-size:14.5px; line-height:1; }
  /* existing customers go to the app; kept as a text link so the CTA stays the
     single strong action in the bar */
  .nav .links a.signin { color:var(--ink); font-weight:600; }
  /* `.nav .links a` (0,2,1) outranks `.btn-primary` (0,1,0), so the CTA inherited
     the muted link colour and rendered dark text on blue. Restated at 0,3,1. */
  .nav .links a.btn-primary { color:#fff; }
  /* Nothing in the bar may wrap. "Sign in" and "Book a demo" were each breaking
     onto two lines on a phone, which made the whole nav look broken. */
  .nav .links a { white-space:nowrap; }
  @media (max-width:760px) { .nav .links a.txt{ display:none; } .brand{ font-size:23px; } .brand .mk{ width:25px; height:24px; }}
  /* Phone: brand + Sign in + the CTA come to roughly 419px at the desktop sizes,
     which is wider than the viewport. Everything comes down a notch so all three
     survive rather than dropping the sign-in link existing customers use. */
  @media (max-width:560px) {
    .nav .wrap { height:64px; gap:12px; }
    .nav .links { gap:15px; }
    .brand { font-size:20px; }
    .brand .mk { width:22px; height:21px; }
    .nav .links a.signin { font-size:13.5px; }
    .nav .btn { padding:9px 14px; font-size:13.5px; }}

  /* hero */
  /* Single column, centred, with the real estimate screenshot beneath it. The
     right column used to hold a hand-built mock of the app — aria-label and
     all — which was the first thing anyone saw and the least true thing on the
     page. A real screenshot does that job and cannot be argued with. */
  .hero .wrap { padding:74px 28px 40px; text-align:center; }
  .hero .htext { max-width:60ch; margin:0 auto; }
  .hero .cta { justify-content:center; }
  .hero h1 { font-size:clamp(38px,5.4vw,60px); font-weight:700; letter-spacing:-0.035em; }
  .hero .sub { margin-top:6px; }
  .hero .cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }
  /* The headline and the screenshot beneath it both lead with estimating, so
     without this the hero reads as an estimating tool. Naming the modules is
     the cheapest honest way to say "the whole job" before anyone scrolls. */
  .hero .hchips { list-style:none; margin:26px auto 0; padding:0; max-width:56ch;
                  display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
  .hero .hchips li { font-size:12.5px; color:var(--muted); background:var(--wash);
                     border:1px solid var(--line); border-radius:20px; padding:4px 11px; white-space:nowrap; }
  .hero .note { margin-top:22px; font-size:14px; color:var(--faint); }
  @media (max-width:900px) { .hero .wrap{ padding-bottom:20px; }}

  /* --- the sheet draws itself (CSS only, no script) ----------------------
     On load: the headline phrases set down one after another, a dimension
     line measures the headline, the rest arrives — then the loop strip below
     runs the job on repeat. prefers-reduced-motion gets the finished sheet. */
  .hero .wrap { position:relative; }
  .hero .htext { position:relative; z-index:1; }
  .hero h1 .w { display:inline-block; opacity:0; transform:translateY(14px);
    animation:hrise .55s cubic-bezier(.2,.7,.3,1) forwards; }
  .hero h1 .w:nth-child(1){ animation-delay:.15s } .hero h1 .w:nth-child(2){ animation-delay:.34s }
  .hero h1 .w:nth-child(3){ animation-delay:.53s }
  @keyframes hrise { to { opacity:1; transform:none; } }
  @keyframes hshow { to { opacity:1; } }
  /* the dimension line that measures the headline: ticks at both ends, the
     rule grows outward from the middle, the note sits in the line's gap */
  .hdim { display:flex; align-items:center; gap:10px; max-width:62ch; margin:18px auto 0;
          opacity:0; animation:hshow .4s ease .8s forwards; }
  .hdim .rule { flex:1; height:1px; background:var(--line-2); position:relative;
    transform:scaleX(0); animation:hgrow .45s cubic-bezier(.5,0,.2,1) .85s forwards; }
  .hdim .rule::before, .hdim .rule::after { content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--line-2); }
  .hdim .rule:first-child { transform-origin:right; } .hdim .rule:first-child::before { left:0; }
  .hdim .rule:last-child { transform-origin:left; } .hdim .rule:last-child::after { right:0; }
  .hdim .rule:first-child::after, .hdim .rule:last-child::before { display:none; }
  .hdim span { font-size:12.5px; font-weight:650; color:var(--muted); white-space:nowrap; letter-spacing:.14em; }
  @media (max-width:560px){ .hdim span { white-space:normal; text-align:center; } }
  @keyframes hgrow { to { transform:scaleX(1); } }

  /* the problem, as points — a paragraph that long reads as a wall on a phone.
     Left-aligned inside a centred column: centred bullet lists are unreadable. */
  .hbits { max-width:52ch; margin:30px auto 0; text-align:left; }
  .hbits-k { font-size:12.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase;
             color:var(--muted); text-align:center; }
  .hbits ul { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; }
  .hbits li { position:relative; padding-left:22px; color:var(--muted); font-size:17px; line-height:1.5; }
  /* markers alternate blue/cyan — the two brand colours, doing the counting */
  .hbits li::before { content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
                      border-radius:2px; background:var(--blue); }
  .hbits li:nth-child(even)::before { background:var(--cyan); }
  .hbits li b { color:var(--ink); font-weight:650; }
  .hbits-end { margin-top:18px; font-size:17px; line-height:1.55; color:var(--muted); text-align:center; }
  .hbits-end b { color:var(--ink); font-weight:650; }
  @media (max-width:560px){ .hbits li, .hbits-end { font-size:15.5px; } }
  /* the tagline in the button's old spot: brand-coloured, unmissable */
  .hero .era { margin-top:4px; font-size:clamp(24px,3.4vw,33px); font-weight:700; letter-spacing:-0.02em; line-height:1.25; }
  .hero .era b { font-weight:750; background:linear-gradient(90deg, var(--blue), var(--cyan));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero .era, .hero .hbits, .hero .hchips, .hero .note { opacity:0; animation:hset .5s ease forwards; }
  .hero .era { animation-delay:1.0s } .hero .hbits { animation-delay:1.35s }
  .hero .hchips { animation-delay:1.25s } .hero .note { animation-delay:1.35s }
  @keyframes hset { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  /* --- the loop, live (CSS only) -----------------------------------------
     The BidLoop mark sits in the middle; the job paints itself clockwise
     around it at CONSTANT speed and NOTHING is ever lost. Lap 1: the
     diamond paints the ring blue and each station's circle pops in and
     STAYS — permanently. Lap 2 repaints the ring cyan, lap 3 repaints it
     back to the resting grey, and because grey is also the reset state the
     cycle seams invisibly and just keeps circling. 7s a lap, 21s a colour
     cycle, one 1.2s start. */
  /* the ring hugs the logo (mobile keeps the mark readable); the station
     circles sit half on the ring at --r; the box gets generous padding so
     the top circle clears the CTA and the bottom tags clear the next section */
  .hloop { margin:26px auto 0; padding:122px 0 196px; opacity:0; animation:hset .6s ease 1.2s forwards; }
  .hloop .ringbox { position:relative; width:var(--ringw); aspect-ratio:1; margin:0 auto;
    --ringw:260px; --R:120px; --r:196px; }
  @media (max-width:640px){ .hloop { padding:88px 0 104px; }
    .hloop .ringbox { --ringw:168px; --R:77px; --r:114px; } }
  .hloop .ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-64.3deg); }
  .hloop .rbase { fill:none; stroke:var(--line-2); stroke-width:1.4; }
  /* three painters stacked in draw order: blue lap, cyan lap, then a lap in
     the resting grey. Grey full = grey empty to the eye, so the 42s reset is
     invisible and the ring appears to repaint forever. */
  .hloop .rp { fill:none; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; }
  .hloop .p1 { stroke:var(--blue); stroke-width:2.2; animation:hp1 21s linear 1.2s infinite; }
  .hloop .p2 { stroke:var(--cyan); stroke-width:2.4; animation:hp2 21s linear 1.2s infinite; }
  .hloop .p3 { stroke:var(--line-2); stroke-width:2.6; animation:hp3 21s linear 1.2s infinite; }
  @keyframes hp1 { 0%{stroke-dashoffset:100} 33.33%{stroke-dashoffset:0} 100%{stroke-dashoffset:0} }
  @keyframes hp2 { 0%,33.33%{stroke-dashoffset:100} 66.67%{stroke-dashoffset:0} 100%{stroke-dashoffset:0} }
  @keyframes hp3 { 0%,66.67%{stroke-dashoffset:100} 100%{stroke-dashoffset:0} }
  .hloop .orbit { position:absolute; inset:0; transform:rotate(25.7deg); animation:horbit 7s linear 1.2s infinite; }
  .hloop .odot { position:absolute; left:50%; top:calc(50% - var(--R)); width:9px; height:9px;
    margin:-6px 0 0 -6px; width:12px; height:12px; border-radius:50%; background:var(--blue); border:2.5px solid var(--paper); box-shadow:0 1px 5px rgb(19 26 36 / 0.25); }
  @keyframes horbit { 0%{transform:rotate(25.7deg)} 100%{transform:rotate(385.7deg)} }
  .hloop .core { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; }
  .hloop .core .cmk { width:44px; height:42px; }
  .hloop .core span { font-weight:750; font-size:26px; letter-spacing:-0.03em; color:var(--ink); }
  @media (max-width:640px){ .hloop .core .cmk { width:34px; height:32px; } .hloop .core span { font-size:20px; } }
  /* the station circles: name + a scrap of real data, popping in as the
     diamond passes and STAYING until the group wipe */
  .hloop .sat { position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
  /* two animations share the circle: hpop (once, its arrival) and hcol
     (42s, infinite) — the SAME per-station delay means hcol's 33.33% mark
     lands exactly as the diamond passes on the cyan lap, so each circle
     turns teal in turn, then back on the grey lap */
  .hloop .sat .in { width:106px; height:106px; border-radius:50%; border:1.5px solid transparent;
    background:var(--paper); box-shadow:0 5px 18px rgb(19 26 36 / 0.10);
    display:grid; place-content:center; justify-items:center; gap:3px; text-align:center;
    padding:10px; box-sizing:border-box; color:var(--ink);
    opacity:0; transform:scale(.55);
    animation:hpop .5s cubic-bezier(.3,1.3,.5,1) forwards, hcol 21s linear infinite;
    animation-delay:calc(1.2s + var(--i) * 1s); }
  @keyframes hpop { to { opacity:1; transform:scale(1); } }
  @keyframes hcol {
    0%,33.32% { border-color:transparent; }
    33.33%,66.66% { border-color:var(--cyan); }
    66.67%,100% { border-color:transparent; }
  }
  .hloop .sat .in b { font-size:13.5px; font-weight:700; color:inherit; }
  .hloop .sat .in span { font-size:10.5px; color:var(--muted); }
  .hloop .sat.c7 .in { color:var(--blue); }
  .hloop .sat.c7 .in { border-color:color-mix(in srgb, var(--blue) 45%, transparent); animation-name:hpop, hcol7; }
  @keyframes hcol7 {
    0%,33.32% { border-color:color-mix(in srgb, var(--blue) 45%, transparent); }
    33.33%,66.66% { border-color:var(--cyan); }
    66.67%,100% { border-color:color-mix(in srgb, var(--blue) 45%, transparent); }
  }
  @media (max-width:640px){
    .hloop .sat .in { width:66px; height:66px; padding:6px; }
    .hloop .sat .in b { font-size:10px; } .hloop .sat .in span { font-size:7.5px; }
  }
  /* each circle's few words, off to its side — arriving just after its
     circle, once, and staying for good */
  .hloop .sat .tag { position:absolute; width:15ch; font-style:normal; font-size:12.5px;
    line-height:1.4; color:var(--muted); opacity:0; text-wrap:balance;
    animation:htag .45s ease forwards; animation-delay:calc(1.4s + var(--i) * 1s); }
  @keyframes htag { to { opacity:1; } }
  .hloop .sat .tag.tr { left:calc(100% + 12px); top:50%; transform:translateY(-50%); text-align:left; }
  .hloop .sat .tag.tl { right:calc(100% + 12px); top:50%; transform:translateY(-50%); text-align:right; }
  /* bottom notes have the whole page width below them — let them run wide
     (one or two lines) instead of stacking four deep */
  .hloop .sat .tag.tb { top:calc(100% + 8px); left:50%; transform:translateX(-50%); text-align:center; width:30ch; }
  @media (max-width:640px){ .hloop .sat .tag { display:none; } }
  @media (prefers-reduced-motion: reduce) {
    .hero h1 .w, .hdim, .hdim .rule,
    .hero .era, .hero .hbits, .hero .hchips, .hero .note, .hloop { animation:none; opacity:1; transform:none; }
    .hloop .rp { animation:none; }
    .hloop .p1 { stroke-dashoffset:0; }
    .hloop .orbit { animation:none; }
    .hloop .sat .in { animation:none; opacity:1; transform:scale(1); }
    .hloop .sat .tag { animation:none; opacity:1; }
  }

  /* section frame */
  section { padding:70px 0; }
  .band { background:var(--wash); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  /* Centred, like the demo and closing sections. The page was alternating —
     four section heads left, the rest centred — which read as a mistake rather
     than a rhythm. Body copy inside the outcome boxes stays left: centred
     paragraphs are harder to read once they run past a line or two. */
  .sec-h { max-width:64ch; margin-left:auto; margin-right:auto; text-align:center; }
  .sec-h h2 { font-size:clamp(26px,3.6vw,38px); font-weight:700; }
  .sec-h .lede { margin-top:16px; margin-left:auto; margin-right:auto; }
  .tcol .cap { font-size:12.5px; color:var(--faint); margin-bottom:10px; font-weight:600; letter-spacing:0.01em; }
  .tcol .cap b { color:var(--ink); }
  .fnode .n { font-size:15px; font-weight:650; margin-top:3px; }

  /* outcomes */
  .outs { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:44px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  @media (max-width:720px) { .outs{ grid-template-columns:1fr; }}
  .out { background:var(--paper); padding:28px; }
  .out h3 { font-size:20px; font-weight:680; margin-bottom:9px; }
  .out p { color:var(--muted); font-size:15px; }
  /* Kicker steps blue→cyan across the four, echoing the ring's walk. Colour
     only, no badge and no rule: these are outcomes, not stations — a badge
     would claim they are steps in the loop — and a left rule would fight the
     1px hairlines this grid is built from. */
  .out .k { font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
            color:color-mix(in srgb, var(--cyan) calc(var(--i) * 33%), var(--blue)); }
  .dark .lede { color:#a9b6c8; margin-top:20px; margin-left:auto; margin-right:auto; }
  .demo-h .lede { margin:16px auto 0; }
  .prob .lede { margin-top:16px; max-width:52ch; }

  /* guided attention: gentle flashes (respects reduced motion) */
  @keyframes hintpulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 42%,transparent);} 70%,100%{ box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 0%,transparent);}}
  @keyframes tabhint { 0%,100%{ background:transparent;} 50%{ background:color-mix(in srgb,var(--blue) 13%,transparent);}}
  @keyframes chgflash { 0%{ background:color-mix(in srgb,var(--cyan) 32%,transparent);} 100%{ background:transparent;}}
  .profit-strip #psA.warn .big, .profit-strip #psA.warn .sub { color:#e2586b; }

  /* ---- mobile pass (interactive + spacing) ---- */
  @media (max-width:680px) {
    .wrap { padding:0 16px; }
    section { padding:52px 0; }
    .row.h > :nth-child(4), .row.h > :nth-child(5), .row.h > :nth-child(6),
    .hero .wrap { padding-top:46px; }}

  /* close */

  /* capability walkthrough + FAQ — native <details>, so no JS and it still
     works if scripts are blocked */
  /* Two columns, not a stack. Eight panels in a single column reads as a wall
     of grey rows; the same eight in a grid reads as a menu you pick from.
     align-items:start so an opened card grows on its own instead of dragging
     its neighbour's height with it. */
  /* One column. Two-up made sense when this held eight capability panels of
     wildly different lengths; the FAQ is nine short questions, and side by side
     they made a ragged pair of stacks where a straight list reads faster. */
  .caps { max-width:820px; margin:28px auto 0; display:grid; gap:10px; }
  .cap { border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden; }
  .cap summary { cursor:pointer; padding:15px 17px; list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; font-size:16px; }
  .cap summary::-webkit-details-marker { display:none; }
  .cap summary::after { content:'+'; margin-left:auto; color:var(--faint); font-size:20px; line-height:1; font-weight:400; }
  .cap[open] summary::after { content:'–'; }
  .cap summary b { font-weight:650; }
  .cap summary span { color:var(--muted); font-size:14px; }
  .cap summary:hover { background:var(--wash); }
  .cap ul { margin:0; padding:2px 18px 17px 34px; display:grid; gap:8px; }
  .cap li { color:var(--muted); font-size:14.5px; line-height:1.5; }
  .cap li b { color:var(--ink); font-weight:600; }
  /* The width/height attributes on the <img> reserve the space so the page
     doesn't jump when the screenshot arrives; height:auto keeps the aspect. */
  /* A shot squeezed below the width it was captured at renders its text smaller
     than native — at 75% the estimate grid's 13px lands near 9px, sharp but not
     readable, which defeats showing it. And these four were captured at four
     different widths (1428 estimate, 1376 programme, 735 budget, 742 claims),
     so displaying them at one common width would render the same UI at four
     different type sizes — it reads as four different apps. Each figure
     therefore carries its own capture width in --shot-w and is shown at exactly
     that, which keeps the type identical across the set. */
  .shotfig { width:min(var(--shot-w, 1060px), 100%); margin:30px auto 36px; }
  /* Both wide cards share ONE width so their edges line up down the page —
     they were 1428 and 1376, and 52px of difference reads as a mistake. 1376
     is the narrower capture, so the estimate downscales 3.6% (imperceptible)
     and the programme still renders 1:1. Never the other way: upscaling blurs. */
  .shotfig.wide { --shot-w:1376px; }
  /* Every figure on the page breaks out of the 1240 wrap to THIS one width, so
     the card edges agree all the way down. 1420 = the 1376 capture + the card's
     own 44px of padding, so the screenshot inside still renders at the width it
     was captured at. The 100vw-48 clamp keeps a scrollbar from causing overflow. */
  :root { --band:min(1420px, calc(100vw - 48px)); }
  /* Seven stages, all open. Three columns on a wide screen so the whole cycle
     is on screen at once — the point is that they join up, which you can't see
     one panel at a time. The last card is tinted because it's the one that
     closes the loop back to the first. */
  /* No align-items:start — cards stretch to match the tallest in their row, so
     the grid reads as a set rather than a ragged pile. The stages genuinely
     have different amounts to say; the boxes shouldn't advertise it. */
  .loop { display:grid; gap:16px 16px; margin-top:56px; grid-template-columns:1fr; }
  @media (min-width:720px) { .loop { grid-template-columns:repeat(2,1fr); }}
  @media (min-width:1080px) { .loop { grid-template-columns:repeat(3,1fr); }}
  /* Each card is a station on the ring above, so it wears the ring's badge:
     a numbered circle whose colour steps from blue to cyan across the seven,
     mixed per-card from --i. The connector runs between badges on a wide
     screen so the row reads as a path, and stops at the last in each row. */
  .lcard { position:relative; background:var(--paper); border:1px solid var(--line);
           border-radius:12px; padding:19px 20px 18px 20px; }
  .lcard .stn { position:absolute; top:-15px; left:19px; width:30px; height:30px; border-radius:50%;
                display:grid; place-items:center; font-size:12.5px; font-weight:700;
                color:#fff; background:color-mix(in srgb, var(--cyan) calc(var(--i) * 16%), var(--blue));
                box-shadow:0 0 0 4px var(--paper); }
  .lcard::after { content:""; position:absolute; top:0; left:calc(19px + 30px); width:calc(100% - 49px + 16px);
                  height:1px; background:var(--line-2); display:none; }
  @media (min-width:1080px) {
    .lcard::after { display:block; }
    .lcard:nth-child(3n)::after, .lcard.close::after { display:none; }
  }
  /* the stage name, in the brand sans — mono made it read as a reference code
     rather than a step in the job */
  .lcard .n { margin-top:6px; font-size:11.5px; font-weight:650; letter-spacing:.09em;
              text-transform:uppercase; color:var(--faint); }
  .lcard h3 { font-size:18px; margin-top:5px; letter-spacing:-0.02em; }
  /* One sentence per stage. This was seven cards of five bullets each, which is
     a manual rather than a website — the detail belongs in the demo. */
  .lcard h3 + p { margin-top:9px; font-size:14px; line-height:1.5; color:var(--muted); }
  /* The seventh card is the one that closes the loop, and with seven cards in a
     three-column grid it was left stranded alone in the bottom corner. It now
     spans the full width as a closing band, its three points side by side. */
  .lcard.close { background:color-mix(in srgb,var(--cyan) 7%, var(--paper));
                 border-color:color-mix(in srgb,var(--cyan) 32%, transparent);
                 grid-column:1 / -1; text-align:center; padding:22px 24px 24px; }
  .lcard.close .n { color:var(--blue); }
  .lcard.close h3 { font-size:20px; }
  .lcard.close h3 + p { max-width:70ch; margin-inline:auto; font-size:15px; }
  /* The budget and claims shots are 735 and 742 wide — near enough twins, so
     they sit as a pair rather than stacking as two narrow blocks under two wide
     ones. Side by side they need 1520, past the 1240 wrap, so the pair breaks
     out on a wide screen and stacks (still at native width) below that. */
  /* Image one side, its point the other. From 1040 up the row breaks the 1240
     wrap and grows to 1400, at which the image column lands on ~745 — the width
     these two were captured at, so the type sits at native size. Capped against
     100vw less a scrollbar's worth, so it can never cause a horizontal scroll.
     Below 1040 it's one column, image first. */
  .shotrow { display:grid; gap:36px; align-items:center; margin-top:58px; }
  .shotrow .shotfig { margin:0; width:100%; }
  /* .shotlead carried no rule at all, so two of the four proof captions were
     rendering on browser defaults while the other two were styled. Both now
     share one treatment; .shotlead sits above a full-width shot so it centres,
     .shotcopy sits beside one so it stays left. */
  .shotlead { max-width:64ch; margin:0 auto; text-align:center; }
  .shotcopy h3, .shotlead h3 { font-size:23px; letter-spacing:-0.025em; }
  .shotlead p { margin-top:13px; color:var(--muted); font-size:15.5px; }
  /* the station this screen is, on the ring's own colour walk */
  .shotcopy .k, .shotlead .k { font-size:12.5px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; margin-bottom:7px;
    color:color-mix(in srgb, var(--cyan) calc(var(--i) * 16%), var(--blue)); }
  .shotcopy p { margin-top:13px; color:var(--muted); font-size:15.5px; }
  .shotcopy p b { color:var(--ink); font-weight:700; }
  /* ONE band for every figure down the page. The wide cards used to break out
     at 1560 and the rows at 1040, at their own widths — so no two left edges
     agreed as you scrolled. Same breakpoint, same width, both centred: the
     cards now stack in a single column. */
  @media (min-width:1040px) {
    .shotrow { grid-template-columns:1fr 0.86fr; gap:56px;
               width:var(--band); position:relative; left:50%; transform:translateX(-50%); }
    .shotrow.flip figure { order:2; }
    .shotfig.wide { width:var(--band); position:relative; left:50%; transform:translateX(-50%); }}
  /* The frame is a padded card and the screenshot sits INSIDE it. Bordering the
     image directly put a hard line hard against the app's own content — a crop
     of a UI has no margin of its own, so it read as cut off. The padding gives
     it the breathing room the app has on screen. */
  .shotfig { background:var(--paper); border:1px solid var(--line); border-radius:15px;
             padding:16px; box-shadow:0 18px 44px rgba(19,26,36,.10); }
  .shotfig img { width:100%; height:auto; display:block; border-radius:6px; }
  /* the phone pair vs the wide desktop grab — one or the other, never both.
     Qualified with .shotfig img (0,2,1) because a bare .shot-lg (0,1,0) loses
     to '.shotfig img { display:block }' above and the wide shot rendered on
     the phone too — the same specificity trap as the nav CTA. */
  .shotfig .shot-sm { display:grid; gap:22px; }
  .shotfig img.shot-lg { display:none; }
  @media (min-width:760px) {
    .shotfig .shot-sm { display:none; }
    .shotfig img.shot-lg { display:block; } }
  @media (min-width:760px) { .shotfig { padding:22px; }}
  /* On a phone the card goes edge to edge and its padding drops — about 64px of
     extra image width, which takes the 698px budget table from 46% of native to
     just over half. Small, but it is the difference between numbers you can
     read and a grey smudge. */
  /* 680, not 759: that is where .wrap drops to 16px padding, and the pull has
     to match the padding exactly or the card sits off-centre. Both selectors,
     because ".shotrow .shotfig" outranks a bare ".shotfig" and the two figures
     inside rows were not bleeding while the two above them were. And width:auto,
     not 100% — with negative margins a 100% width box overflows one side and
     falls short on the other, which is the shift Ben could see. */
  @media (max-width:680px) {
    .shotfig, .shotrow .shotfig { width:auto; margin-inline:-16px; padding:12px;
                                  border-radius:0; border-left:0; border-right:0; }}
  .shotfig figcaption { margin-top:14px; text-align:center; color:var(--muted); font-size:14.5px; }
  .shotfig figcaption b { color:var(--ink); font-weight:600; }

  .cap li.soon { color:var(--faint); }
  .cap li.soon b { color:var(--muted); }
  .faq .cap summary { font-size:15.5px; }
  .faq .cap ul { padding-left:20px; list-style:none; }

  .close { text-align:center; }
  .close h2 { font-size:clamp(28px,4vw,44px); font-weight:700; max-width:20ch; margin:0 auto; }
  .close .lede { margin:16px auto 0; text-align:center; }
  .close .cta { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:28px; }
  /* The demo form. Same drawing-sheet manners as the rest of the page: squared
     corners, hairline borders, no decoration. Posts straight to the BidLoop
     backend; no script on this page. */
  .dform { max-width:560px; margin:30px auto 0; text-align:left; display:grid; gap:14px; }
  .dform .two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:560px){ .dform .two { grid-template-columns:1fr; } }
  .dform label { display:block; font-size:13px; font-weight:600; }
  .dform label span { display:block; margin-bottom:5px; }
  .dform input, .dform textarea { width:100%; box-sizing:border-box; font:inherit; font-size:15px; color:var(--ink);
    background:var(--paper); border:1px solid var(--line-2); border-radius:4px; padding:10px 12px; }
  .dform input:focus, .dform textarea:focus { outline:none; border-color:var(--blue); }
  .dform textarea { min-height:88px; resize:vertical; }
  .dform .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .dform .send { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .dform .alt { font-size:13.5px; color:var(--muted); }
  .dform .alt a { color:var(--blue); }
  /* the page collects personal data now, so it has to say where it goes */
  .dform .consent { font-size:12.5px; color:var(--faint); margin-top:-2px; }
  .dform .consent a { color:var(--muted); }

  footer { padding:34px 0; border-top:1px solid var(--line); }
  footer .wrap { display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; font-size:13.5px; }
  footer .fn { margin-left:auto; display:flex; gap:22px; }
  footer .fn a { color:var(--muted); text-decoration:none; }
  footer .fn a:hover { color:var(--blue); }
  footer .cr { width:100%; color:var(--faint); font-size:12.5px; }

  a:focus-visible, .btn:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
  ::selection { background:color-mix(in srgb,var(--blue) 24%, transparent); }

/* ---- waitlist card / scorecard ------------------------------------------ */
/* One card, three stages, in place: a button, then three fields, then the
   questions one at a time, then the readout. Everything the script builds is
   styled here; everything in the HTML also works with no script at all. */
.wl { max-width: 640px; margin: 0 auto; border: 1px solid var(--line); border-radius: 18px;
  background: var(--paper); padding: 34px 34px 30px; box-shadow: 0 1px 2px rgb(19 26 36 / 4%); }
.wl h2 { font-size: clamp(24px, 3.4vw, 32px); }
.wl-h { font-size: 22px; font-weight: 680; }
.wl .lede, .wl-sub { color: var(--muted); font-size: 15.5px; margin-top: 12px; }
.wl-note { color: var(--faint); font-size: 13px; margin-top: 12px; }
.wl .btn { margin-top: 22px; }
.wl-form label { display: block; margin-top: 14px; }
.wl-form label span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.wl-form input { width: 100%; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 9px;
  font: inherit; background: var(--paper); color: var(--ink); }
.wl-form input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.wl .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wl-send .alt { color: var(--muted); font-size: 14px; margin-top: 22px; }
.wl .consent { color: var(--muted); font-size: 13px; margin-top: 16px; }
.wl-err { color: #c0272d; font-size: 14px; margin-top: 12px; }

/* the quiz */
.wl-bar { height: 4px; border-radius: 999px; background: var(--wash-2); overflow: hidden; }
.wl-bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .3s ease; }
.wl-step { color: var(--muted); font-size: 13px; margin-top: 14px; }
.wl-q { font-size: clamp(19px, 2.6vw, 24px); font-weight: 680; line-height: 1.25; margin-top: 10px;
  letter-spacing: -0.02em; }
.wl-q:focus { outline: none; }
.wl-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
/* full-width targets, not radios — on a phone the whole row is the tap area */
.wl-opt { display: block; width: 100%; text-align: left; font: inherit; font-size: 15px;
  padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--paper);
  color: var(--ink); cursor: pointer; transition: border-color .12s, background .12s; }
.wl-opt:hover { border-color: var(--blue); background: var(--wash); }
.wl-opt.is-on { border-color: var(--blue); background: var(--wash-2); font-weight: 600; }
.wl-back { margin-top: 18px; background: none; border: 0; font: inherit; font-size: 14px;
  color: var(--muted); cursor: pointer; padding: 0; }
.wl-back:hover { color: var(--ink); }

/* the readout */
.wl-score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.wl-num { font-size: 52px; font-weight: 750; line-height: 1; letter-spacing: -0.04em;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.wl-outof { font-size: 24px; color: var(--faint); -webkit-text-fill-color: var(--faint); }
.wl-band { font-size: 21px; font-weight: 680; }
.wl-blurb { font-size: 16px; margin-top: 12px; }
.wl-axes { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
/* NOT colour-filled: a filled panel reads as a call to action, and `gap` is a
   finding about their setup rather than a mistake they made. The status lives
   in the dot and the label. */
.wl-ax { border: 1px solid var(--line); border-radius: 13px; background: var(--wash); padding: 16px 18px; }
.wl-axhead { display: flex; align-items: center; gap: 10px; }
.wl-axhead h4 { margin: 0; font-size: 16px; font-weight: 680; }
.wl-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.d-covered { background: var(--ok); } .d-partial { background: #d99100; } .d-gap { background: #d0454b; }
.wl-lvl { margin-left: auto; font-size: 12px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .05em; }
.l-covered { color: var(--ok); } .l-partial { color: #b47700; } .l-gap { color: #c0272d; }


/* The card lives in .close, which centres everything — fine for a headline,
   wrong for a form and hopeless for a two-column list of answers. */
.wl, .wl .lede, .wl h2, .wl h3, .wl p { text-align: left; }
.wl-verdict { font-size: 14.5px; margin-top: 10px; }
.wl-first { font-size: 15.5px; margin-top: 20px; }

/* --- /readiness — the standalone scorecard landing (2026-09-02) ---------
   The home page's nav, brand, type scale and tokens throughout (Ben,
   2026-09-03: colours, font and sizing must match). The hero is the site's
   own DARK palette (the dark-theme tokens), the card on it is the light
   card so the quiz and readout styles apply untouched, then light sections
   set with the home page's .sec-h / .close patterns. Page-only classes are
   prefixed rd-. */
.rd-hero { background:#0c131d radial-gradient(900px 520px at 78% 18%, rgb(7 100 242 / 0.26), transparent 62%); color:#e7ecf3; padding:56px 0 68px; }
.rd-hero .wrap { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(320px, 0.85fr); gap:56px; align-items:center; }
.rd-hero .rd-ey { color:#8fb4ff; }
.rd-hero h1 { margin:14px 0 20px; font-size:clamp(38px, 5.4vw, 60px); font-weight:700; letter-spacing:-0.035em; line-height:1.06; color:#fff; text-wrap:balance; }
.rd-hero h1 em { font-style:normal; color:#4d8dff; }
.rd-hero .lede { color:#a9b6c8; margin:0 0 14px; }
.rd-tiles { display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; margin-top:34px; }
.rd-tile .ic { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#16202e; color:#4d8dff; }
.rd-tile b { display:block; color:#fff; font-size:16px; margin-top:12px; }
.rd-tile > span:last-child { display:block; color:#9aa7b8; font-size:14.5px; margin-top:4px; max-width:34ch; }
.rd-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:38px; padding-top:22px; border-top:1px solid #1e2a3a; }
.rd-chips span { font-size:12.5px; font-weight:600; background:#fff; color:#131a24; border-radius:999px; padding:4px 11px; }
/* the card itself: the home-page card's look, lifted off the dark ground */
.rd-side .wl { margin:0; color:var(--ink); box-shadow:0 30px 70px rgb(0 0 0 / 0.42); }
.rd-side .wl .wl-h { margin:0; }
.rd-side .wl .wl-send { margin-top:4px; }
.rd-side .wl .wl-send .btn { width:100%; justify-content:center; }
@media (max-width: 900px) {
  .rd-hero .wrap { grid-template-columns:1fr; gap:36px; }
  .rd-tiles { gap:18px 22px; }
}
@media (max-width: 560px) { .rd-tiles { grid-template-columns:1fr; } .rd-hero { padding:36px 0 48px; } }
/* what it reveals + why trust it: the home page's section rhythm */
.rd-reveal, .rd-trust { text-align:center; }
.rd-reveal .sec-h h2 em, .rd-trust .sec-h h2 em { font-style:normal; color:var(--blue); }
.rd-axes { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:44px; text-align:left; }
.rd-axis { border:1px solid var(--line); border-radius:16px; background:var(--wash); padding:24px 24px 26px; }
.rd-axis .pain { display:inline-block; font-size:12.5px; font-weight:650; color:var(--blue-deep); background:var(--paper); border:1px solid var(--line-2); border-radius:999px; padding:3px 10px; }
.rd-axis h3 { margin:14px 0 8px; font-size:20px; }
.rd-axis p { margin:0; color:var(--muted); font-size:15px; }
.rd-steps { list-style:none; margin:44px auto 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; text-align:left; max-width:980px; }
.rd-steps li { display:grid; grid-template-columns:1fr; gap:6px; }
.rd-steps .n { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--blue); color:var(--blue); font-weight:700; font-size:15px; margin-bottom:8px; }
.rd-steps b { font-size:16px; }
.rd-steps li > span:last-child { color:var(--muted); font-size:14.5px; }
.rd-trust { background:var(--wash); }
.rd-trustgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:40px; text-align:left; }
.rd-fact { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px; }
.rd-fact .ic { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:color-mix(in srgb, var(--blue) 10%, var(--paper)); color:var(--blue); }
.rd-fact h3 { margin:14px 0 6px; font-size:18px; }
.rd-fact p { margin:0; color:var(--muted); font-size:15px; }
.rd-honest { max-width:64ch; margin:28px auto 0; padding:16px 20px; border-left:3px solid var(--cyan); background:var(--paper); border-radius:0 12px 12px 0; text-align:left; color:var(--muted); font-size:15px; }
.rd-honest b { color:var(--ink); }
.rd-close .cta { margin-top:28px; }
.rd-fine { color:var(--faint); font-size:13.5px; margin-top:14px; }
@media (max-width: 820px) { .rd-axes, .rd-steps, .rd-trustgrid { grid-template-columns:1fr; } }

/* --- the readout: ring, next steps, free-text box ------------------------ */
.wl-scorehead { display:flex; gap:24px; align-items:center; margin-top:12px; }
.wl-ring { position:relative; width:150px; height:150px; flex:none; }
.wl-ring svg { width:100%; height:100%; transform:rotate(-90deg); display:block; }
.wl-ring .rb { fill:none; stroke:var(--line-2); stroke-width:7; }
.wl-ring .rf { fill:none; stroke:var(--blue); stroke-width:7; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1) 0.15s; }
.wl-ring .rn { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:2px; }
.wl-ring .rn b { font-size:40px; line-height:1; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.wl-ring .rn i { font-style:normal; color:var(--muted); font-size:12.5px; }
@media (prefers-reduced-motion: reduce) { .wl-ring .rf { transition:none; } }
@media (max-width: 480px) { .wl-scorehead { flex-direction:column; align-items:flex-start; } }
.wl-next { margin-top:24px; padding:20px 22px; border-radius:14px; background:var(--wash); border:1px solid var(--line); }
.wl-next .ey { margin:0 0 6px; }
.wl-next h4 { margin:0 0 6px; font-size:18px; letter-spacing:-0.01em; }
.wl-next p { margin:0; color:var(--muted); font-size:15px; }
.wl-next .btn { margin-top:14px; }
.wl-text { width:100%; box-sizing:border-box; min-height:112px; margin-top:14px; padding:11px 13px; border:1px solid var(--line-2); border-radius:9px; font:inherit; background:var(--paper); color:var(--ink); resize:vertical; }
.wl-text:focus { outline:2px solid var(--blue); outline-offset:1px; border-color:transparent; }
.wl-textrow { display:flex; align-items:center; gap:16px; margin-top:16px; }
.wl-textrow .btn { margin-top:0; }
.wl-skip { background:none; border:0; padding:0; color:var(--muted); font:inherit; cursor:pointer; text-decoration:underline; }
/* the home card's pointer at /readiness — the questions live there now */
.wl-alt { color:var(--muted); font-size:14.5px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.wl-alt a { color:var(--blue); font-weight:600; }
/* /readiness when the browser already banked this person on the home page:
   the fields fold away behind "Continuing as …", with a way out */
.wl-form.is-known label { display:none; }
.wl-known { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--wash); font-size:14.5px; }
.wl-notyou { background:none; border:0; padding:0; color:var(--blue); font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:underline; }
/* the hero eyebrow sits with its column, not centred like the section ones */
.rd-hero .rd-ey { margin-inline:0; text-align:left; }
/* --- the scorecard as a focused overlay (Ben, 2026-09-03): on /readiness the
   details, the questions and the readout run in a large dialog over the page
   rather than inside the hero column. The card is the SAME node, moved. */
.wl-overlay { position:fixed; inset:0; z-index:60; background:rgb(12 19 29 / 0.74); backdrop-filter:blur(5px); overflow:auto; display:flex; align-items:center; justify-content:center; padding:32px 20px; }
.wl-overlay .wl { width:min(780px, 100%); position:relative; margin:auto; padding:40px 44px 36px; box-shadow:0 40px 90px rgb(0 0 0 / 0.5); animation:wlpop .28s cubic-bezier(.2,.7,.2,1); }
.wl-overlay .wl .wl-q { font-size:clamp(22px, 2.6vw, 28px); }
.wl-overlay .wl .wl-opt { font-size:16.5px; padding:16px 18px; }
.wl-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); background:var(--paper); color:var(--muted); font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.wl-close:hover { color:var(--ink); border-color:var(--ink); }
.wl-close:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
body.wl-open { overflow:hidden; }
@keyframes wlpop { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .wl-overlay .wl { animation:none; } }
@media (max-width: 640px) {
  .wl-overlay { padding:0; align-items:stretch; }
  .wl-overlay .wl { width:100%; min-height:100vh; border-radius:0; padding:64px 20px 32px; }
}