/* ═══════════════════════════════════════════════════════════════════════════
   DEALSMART — black, white and grey. The product's own scale, nothing added.

   The site and the tool share one palette because they will shortly share one
   domain: the product lives at dealsmart.uk alongside this page, and a visitor
   should not be able to tell where the marketing stops and the software starts.

   Colour is absent on purpose, here for the same reason as in the product. It
   cannot express order, it dies in a screenshot pasted into a deck, and one man
   in twelve cannot separate several hues. Progression is depth; emphasis is a
   rule; everything else is type.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --g-000:#ffffff; --g-050:#fafafa; --g-100:#f4f4f5; --g-200:#e7e7e9;
  --g-300:#d2d2d6; --g-400:#a8a8ae; --g-500:#7c7c84; --g-600:#56565d;
  --g-700:#3a3a40; --g-800:#232327; --g-900:#101012;

  --bg:var(--g-000);
  --bg-sunken:var(--g-100);
  --bg-inverse:var(--g-900);
  --ink:var(--g-900);
  --ink-muted:var(--g-600);
  --ink-faint:var(--g-400);
  --ink-inverse:var(--g-000);
  --line:var(--g-200);
  --line-strong:var(--g-300);
  --line-heavy:var(--g-900);

  /* THREE ROLES, AND THE MONO IS NOT ONE OF THE FIRST TWO.
     The page used a monospace for every eyebrow, label, button and caption.
     Uppercase letterspaced mono is the house style of every AI product shipped
     in the last two years, and it made a UK company-data business look like a
     developer tool. It is now reserved for figures, where tabular alignment
     actually earns it.
     Display is a text serif with optical sizing: at 80px it reads as an analyst
     note. Body is a Franklin Gothic revival - newspaper furniture rather than
     interface chrome. */
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --track-label:0.1em;
  --maxw:1160px;
  --pad:clamp(20px,5vw,64px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:var(--g-900); --bg-sunken:var(--g-800); --bg-inverse:var(--g-000);
    --ink:var(--g-050); --ink-muted:var(--g-400); --ink-faint:var(--g-500);
    --ink-inverse:var(--g-900);
    --line:var(--g-700); --line-strong:var(--g-600); --line-heavy:var(--g-300);
  }
}
:root[data-theme="dark"] {
  --bg:var(--g-900); --bg-sunken:var(--g-800); --bg-inverse:var(--g-000);
  --ink:var(--g-050); --ink-muted:var(--g-400); --ink-faint:var(--g-500);
  --ink-inverse:var(--g-900);
  --line:var(--g-700); --line-strong:var(--g-600); --line-heavy:var(--g-300);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; }

.wrap { max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

.eyebrow { font-family:var(--sans); font-size:11px; font-weight:500;
           text-transform:uppercase; letter-spacing:var(--track-label);
           color:var(--ink-muted); margin:0; }
h1,h2,h3 { margin:0; text-wrap:balance; }
h1 { font-family:var(--display); font-variation-settings:"opsz" 72; font-weight:700;
     font-size:clamp(40px,7.4vw,86px); line-height:0.98; letter-spacing:-0.035em; }
h2 { font-family:var(--display); font-variation-settings:"opsz" 44; font-weight:600;
     font-size:clamp(27px,3.6vw,42px); line-height:1.06; letter-spacing:-0.024em; }
h3 { font-family:var(--display); font-weight:600; font-size:19px; line-height:1.3; letter-spacing:-0.008em; }
p { margin:0; }
.lede { font-size:clamp(16px,1.6vw,19px); line-height:1.55; color:var(--ink-muted); max-width:60ch; }
.body { max-width:64ch; color:var(--ink-muted); }
.body strong,.lede strong { color:var(--ink); font-weight:600; }

a { color:inherit; text-decoration:underline; text-underline-offset:3px;
    text-decoration-thickness:1px; text-decoration-color:var(--line-strong); }
a:hover { text-decoration-color:var(--ink); }
a:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* Skip link — the site should be operable without a mouse. */
.skip { position:absolute; left:-9999px; top:0; background:var(--bg-inverse);
        color:var(--ink-inverse); padding:10px 16px; z-index:50;
        font-family:var(--mono); font-size:12px; text-decoration:none; }
.skip:focus { left:0; }

.mast { border-bottom:1px solid var(--line-heavy); position:sticky; top:0;
        z-index:20; background:var(--bg); }
.mast-in { display:flex; align-items:center; justify-content:space-between;
           gap:24px; padding-top:16px; padding-bottom:16px; }
.brand { font-family:var(--display); font-weight:700; font-size:21px;
         letter-spacing:-0.02em; text-decoration:none; }
.mast nav { display:flex; gap:28px; align-items:center; }
.mast nav a { font-family:var(--sans); font-size:12px; text-transform:uppercase;
              letter-spacing:0.06em; text-decoration:none; color:var(--ink-muted); }
.mast nav a:hover { color:var(--ink); }
@media (max-width:820px){ .mast nav a.hide-sm { display:none; } }

.btn { display:inline-block; font-family:var(--sans); font-size:12px; font-weight:500;
       text-transform:uppercase; letter-spacing:0.06em; text-decoration:none;
       padding:10px 18px; border:1px solid var(--line-heavy);
       background:var(--bg-inverse); color:var(--ink-inverse); }
.btn:hover { background:var(--bg); color:var(--ink); }
.btn.ghost { background:transparent; color:var(--ink); }
.btn.ghost:hover { background:var(--bg-inverse); color:var(--ink-inverse); }

section { border-bottom:1px solid var(--line); }
.pad { padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(56px,8vw,104px); }

.hero { padding-top:clamp(48px,7vw,88px); padding-bottom:clamp(40px,6vw,72px); }
.hero h1 { margin-top:20px; max-width:20ch; }
.hero .lede { margin-top:28px; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

.flow { border-top:1px solid var(--line-heavy); background:var(--bg-sunken); }
.flow-in { padding-top:28px; padding-bottom:28px; }
.flow-track { display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
              background:var(--line-strong); border:1px solid var(--line-strong); }
.step { background:var(--bg); padding:14px 14px 16px; min-width:0; }
.step .k { font-family:var(--sans); font-size:10px; letter-spacing:0.1em;
           text-transform:uppercase; color:var(--ink-faint); display:block; }
.step .v { font-size:13px; font-weight:600; margin-top:6px; display:block; line-height:1.25; }
.step .w { font-family:var(--sans); font-size:10px; color:var(--ink-muted);
           margin-top:8px; display:block; }
.step.you { background:var(--bg-inverse); color:var(--ink-inverse); }
.step.you .k,.step.you .w { color:var(--ink-inverse); opacity:0.7; }
.flow-note { font-family:var(--sans); font-style:italic; font-size:11px; color:var(--ink-muted); margin-top:14px; }
@media (max-width:900px){ .flow-track { grid-template-columns:repeat(2,1fr); } }

.ledger { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.col { padding-top:clamp(48px,6vw,84px); padding-bottom:clamp(48px,6vw,84px); }
.col:first-child { padding-right:clamp(28px,4vw,64px); border-right:1px solid var(--line-heavy); }
.col:last-child { padding-left:clamp(28px,4vw,64px); }
@media (max-width:880px){
  .ledger { grid-template-columns:1fr; }
  .col:first-child { padding-right:0; border-right:0; border-bottom:1px solid var(--line-heavy); }
  .col:last-child { padding-left:0; }
}
.mark { display:flex; align-items:baseline; gap:14px; margin-bottom:22px; }
.mark .n { font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:0.08em;
           color:var(--ink); border:1px solid var(--line-heavy); padding:3px 8px; }
.mark .t { font-family:var(--sans); font-size:11px; text-transform:uppercase;
           letter-spacing:var(--track-label); color:var(--ink-muted); }
.col h2 { margin-bottom:18px; }
.col .body + .body { margin-top:14px; }
.col .body:first-of-type { margin-top:18px; }

.spec { margin-top:30px; border-top:1px solid var(--line-strong); }
.spec > div { padding:14px 0; border-bottom:1px solid var(--line); }
.spec h3 { margin-bottom:5px; }
.spec p { font-size:14px; color:var(--ink-muted); }

/* FOUR FIGURES, SO TWO BY TWO. auto-fit inside a 516px column resolved to
   three across and left the fourth alone beside an empty grey cell - a hole in
   the middle of the proof. A fixed pair fills every row at every width. */
.figs { display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
        background:var(--line-strong); border:1px solid var(--line-strong); margin-top:32px; }
@media (max-width:420px){ .figs { grid-template-columns:1fr; } }
.fig { background:var(--bg); padding:18px 16px; }
.fig b { font-family:var(--mono); font-variant-numeric:tabular-nums;
         font-size:clamp(20px,2.4vw,27px); font-weight:600; letter-spacing:-0.02em;
         display:block; line-height:1.1; }
.fig span { display:block; margin-top:8px; font-size:12px; color:var(--ink-muted); line-height:1.4; }

.split { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
         gap:clamp(28px,5vw,72px); align-items:start; }
@media (max-width:880px){ .split { grid-template-columns:1fr; } }
.isnot { border-left:3px solid var(--line-heavy); padding-left:20px; margin-top:26px; }
.isnot p { font-size:14px; color:var(--ink-muted); }
.isnot p + p { margin-top:10px; }
.isnot em { font-style:normal; color:var(--ink); font-weight:600; }

.deliver { border:1px solid var(--line-strong); }
.deliver .hd { font-family:var(--sans); font-size:11px; text-transform:uppercase;
               letter-spacing:var(--track-label); padding:12px 18px;
               border-bottom:1px solid var(--line-strong); color:var(--ink-muted); }
.deliver ol { margin:0; padding:6px 18px 16px 18px; list-style:none; counter-reset:d; }
.deliver li { counter-increment:d; padding:12px 0 12px 30px; position:relative;
              border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-muted); }
.deliver li:last-child { border-bottom:0; }
.deliver li::before { content:counter(d,decimal-leading-zero); position:absolute; left:0; top:12px;
                      font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11px; color:var(--ink-faint); }
.deliver li b { color:var(--ink); font-weight:600; }

.fit { display:grid; grid-template-columns:1fr 1fr; gap:1px;
       background:var(--line-strong); border:1px solid var(--line-strong); margin-top:34px; }
@media (max-width:760px){ .fit { grid-template-columns:1fr; } }
.fit > div { background:var(--bg); padding:24px; }
.fit h3 { font-family:var(--sans); font-size:11px; font-weight:600; text-transform:uppercase;
          letter-spacing:var(--track-label); color:var(--ink-muted); margin-bottom:14px; }
.fit ul { margin:0; padding:0; list-style:none; }
.fit li { font-size:14px; padding:9px 0 9px 22px; position:relative; border-bottom:1px solid var(--line); }
.fit li:last-child { border-bottom:0; }
.fit li::before { position:absolute; left:0; top:9px; font-size:14px; }
.fit .yes li::before { content:"+"; color:var(--ink); }
.fit .no li::before { content:"\2212"; color:var(--ink-faint); }
.fit .no li { color:var(--ink-muted); }

.faq { margin-top:34px; border-top:1px solid var(--line-heavy); }
details { border-bottom:1px solid var(--line); }
summary { cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative;
          font-weight:600; font-size:16px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:4px; top:17px;
                 font-family:var(--sans); font-weight:400; font-size:19px; color:var(--ink-muted); }
details[open] summary::after { content:"\2212"; }
details p { padding:0 0 20px; font-size:14.5px; color:var(--ink-muted); max-width:70ch; }
details p + p { margin-top:-8px; }

.contact { background:var(--bg-inverse); color:var(--ink-inverse); border-bottom:0; }
.contact .eyebrow { color:inherit; opacity:0.6; }
.contact h2 { max-width:18ch; margin-top:18px; }
.contact .lede { color:var(--ink-inverse); opacity:0.72; margin-top:20px; }
.contact a.mail { font-family:var(--sans); font-weight:600; font-size:clamp(15px,2vw,22px);
                  display:inline-block; margin-top:30px; color:var(--ink-inverse);
                  text-decoration-color:currentColor; }

footer { padding-top:30px; padding-bottom:44px; }
.foot-in { display:flex; flex-wrap:wrap; gap:16px 40px; justify-content:space-between;
           align-items:flex-start; }
footer p { font-family:var(--sans); font-size:11px; color:var(--ink-faint);
           line-height:1.7; max-width:52ch; margin:0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { animation:none !important; transition:none !important; }
}

/* ── What this replaces ─────────────────────────────────────────────────────
   The competitive section. Three blocks, ruled, no cards: this is an argument
   about the reader's stack rather than a feature grid, and it should read like
   a memo, not a comparison chart. */
.repl { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:1px; background:var(--line-strong); border:1px solid var(--line-strong);
        margin-top:34px; }
.repl > div { background:var(--bg); padding:24px 22px 26px; }
.repl h3 { margin-bottom:10px; }
.repl p { font-size:14px; color:var(--ink-muted); }
.repl .kill { display:block; margin-top:12px; font-family:var(--sans);
              font-size:11px; text-transform:uppercase; letter-spacing:var(--track-label);
              color:var(--ink); border-top:1px solid var(--line); padding-top:12px; }

/* A quiet inline link out to the methodology, in mono so it reads as a
   reference rather than a call to action. */
.aside-link { display:inline-block; margin-top:26px; font-family:var(--sans);
              font-size:11px; text-transform:uppercase; letter-spacing:var(--track-label);
              color:var(--ink-muted); text-decoration-color:var(--line-strong); }
.aside-link:hover { color:var(--ink); }

/* ── Methodology page ───────────────────────────────────────────────────── */
.doc { max-width:74ch; padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(56px,8vw,96px); }
.doc h1 { font-family:var(--display); font-size:clamp(32px,5vw,56px); max-width:18ch; }
.doc > p.lede { margin-top:24px; }
.doc h2 { font-size:clamp(19px,2.2vw,24px); margin-top:clamp(36px,5vw,56px); }
.doc h3 { margin-top:26px; }
.doc p { margin-top:14px; color:var(--ink-muted); }
.doc p strong { color:var(--ink); font-weight:600; }
.doc ul { margin:14px 0 0; padding:0; list-style:none; }
.doc li { font-size:14px; color:var(--ink-muted); padding:10px 0 10px 22px;
          position:relative; border-bottom:1px solid var(--line); }
.doc li::before { content:"\2014"; position:absolute; left:0; color:var(--ink-faint); }
.doc li b { color:var(--ink); font-weight:600; }
.doc .rule { margin-top:clamp(36px,5vw,56px); padding-top:22px;
             border-top:1px solid var(--line-heavy); }
.doc .stamp { font-family:var(--sans); font-size:11px; color:var(--ink-faint);
              text-transform:uppercase; letter-spacing:var(--track-label); }