/* ============================================================================
   DISCOVERABLE — DESIGN SYSTEM
   One stylesheet. Every page links it. No build step.

   Rules live in BRAND.md. This file is those rules, executable.

   Three voices, and the split is the whole system:
     serif  — authority. Headlines and firm names. Never a number.
     sans   — interface. Everything you act on.
     mono   — the instrument. EVERY measured value, unit, source and date.

   A number set in the serif is a marketing claim. The same number in mono,
   next to its interval and its provenance, is a measurement. That distinction
   is the product, so it is enforced here rather than left to each page.
   ========================================================================= */

/* --- fonts. Self-hosted, woff2, swap. 124KB total for the whole site. ----- */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/SourceSerif4-400_600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/fonts/Inter-300_700-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/IBMPlexMono-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/IBMPlexMono-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/IBMPlexMono-600-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('/fonts/DMSans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('/fonts/DMSans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/InstrumentSerif-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/InstrumentSerif-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ==== THE ACCENT + RAMP — "Clarity Advantage" (navy + kelly) =============
     --cobalt is the brand accent, kept as a token name for continuity but now a
     DEEP KELLY that works in cobalt's two old roles at once: as text on ivory
     (5.3:1) and as a fill that still holds white (6.7:1). Mid-kelly is the CTA
     (--cta) and mint is the signal (--signal). No gold anywhere. */
  --cobalt:#176B4A;   /* deep kelly — the dual-role brand accent (text + fill) */
  --cyan:#12563C;     /* deeper still, for gradient mids */
  --lime:#9CF4CE;     /* mint — the light attention fill, ink text */
  --ramp:linear-gradient(161deg,#0B1528 0%,#176B4A 28%,#3FBE8A 58%,#9CF4CE 82%,#BFD7FF 100%);
  --ramp-flat:linear-gradient(90deg,#176B4A 0%,#3FBE8A 38%,#9CF4CE 70%,#BFD7FF 100%);
  /* THE TEXT-SAFE RAMP. Vertical, with the navy/deep-kelly held to ~58% so the
     waterline is a position you can design against: white in the top ~58%
     (navy → deep-kelly, >=6.7:1), ink below on the mint/blue end. Never put text
     on --ramp (a diagonal colour field); put it on --ramp-head. */
  --ramp-head:linear-gradient(180deg,#0B1528 0%,#0B1528 50%,#176B4A 66%,#3FBE8A 82%,#9CF4CE 100%);

  /* ==== SURFACES ========================================================= */
  --paper:#FAF8F3;          /* editorial ivory */
  --card:#FFFFFF;
  --sunk:#FBF9F3;
  --ink:#0B1528;            /* authority navy — white survives on it */
  --ink-2:#34405C;          /* body prose, ~9:1 on ivory */
  /* TEXT COLOUR — two tones, and only two.
     Prose was reading at four different greys depending on which component it
     landed in, which made the page look unevenly lit. There is now one colour
     for everything you read, and one for the mono labels around it. Both pass
     AA on paper, card, sunk and wash — measured, not eyeballed. */
  --mut:#667085;            /* quiet slate — mono labels, units, meta, placeholders */
  --faint:#667085;          /* alias. Kept so older pages do not break. */
  --ghost:#9CA1AD;          /* NON-TEXT ONLY. Icon strokes, disabled dots. Never type. */
  --line:#DDE2EA;           /* soft structure */
  --line-2:#E7EBF1;
  --field:#C4CBD6;          /* every competitor that is not the subject */
  --wash:#EAF2FC;           /* evidence blue, softened — the quietest emphasis */
  --track:#DCE3EC;          /* meter track */
  --band:#BFD7FF;           /* evidence blue — the confidence band inside a meter */

  /* on ink (navy) surfaces */
  --on-ink:#ECEAE3; --on-ink-2:#AEB6CC; --on-ink-3:#7C889E; --on-ink-line:#1E2E52;

  /* ==== SIGNAL — mint does exactly one job ===============================
     It marks the subject, or the single number that matters. Never a
     background, never a section colour, never decoration. Once per screen.
     On paper it always needs an ink fill behind it (mint on white is low-contrast). */
  --signal:#9CF4CE; --signal-on:#0B1528;

  /* ==== CTA FILL ========================================================
     The solid CTA is kelly with an INK label — high contrast, and it sits in the
     kelly family without competing with the mint signal, which stays reserved for
     marking the subject/one-number. Never white text on kelly. */
  --cta:#3FBE8A; --cta-hover:#34A87A; --cta-on:#0B1528;

  /* ==== STATUS — RESERVED. Icon and word, always. Never a CTA. ===========
     No warm hues anywhere. Navy, kelly and mint are the only colour on the page;
     everything else is a cool neutral, and status is carried by treatment —
     a dashed edge, a mark, a word — rather than by a red or an amber. That is
     stricter than the usual convention and it holds because nothing here is
     an emergency: "we could not read this" is not an error, and a missing
     field is not a warning. */
  --good:#176B4A; --good-bg:#E4F3EC;
  --warn:#34405C; --warn-bg:#E9EBF0; --warn-ink:#2B3450;
  --crit:#1F2536; --crit-bg:#E9EBF0;

  /* ==== PROVENANCE — CATEGORICAL, NOT STATUS. None is ever red. ==========
     A warning colour on "Modeled" tells the reader the number is wrong when
     it only means inferred. Unknown is the one that earns attention: it means
     "we could not read this", and it is never a zero. */
  --prov-counted-bg:#EAF1FB;  --prov-counted-ink:#23507A;
  --prov-neutral-bg:#ECEEF2;  --prov-neutral-ink:#5A6472;
  /* Unknown earns attention without a hue: same cool family, one step darker,
     and a dashed edge. It is distinguished by TREATMENT, not by warmth. */
  --prov-unknown-bg:#E3E6ED;  --prov-unknown-ink:#2B313C;

  /* ==== TYPE ============================================================= */
  /* An even-weight text serif rather than a high-contrast display face: it
     holds up at the smaller sizes where firm names live in the report, and it
     does not go thin-and-spindly next to the mono. Georgia is the fallback and
     is close enough in colour that a failed font load is not a redesign. */
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,'Courier New',monospace;

  --t-d1:clamp(42px,6.1vw,80px);   --lh-d1:0.98;
  --t-d2:clamp(32px,4.1vw,52px);   --lh-d2:1.04;
  --t-d3:clamp(24px,2.6vw,34px);   --lh-d3:1.12;
  --t-lede:clamp(17px,1.35vw,20px);
  --t-body:16px;
  --t-sm:14px;
  --t-xs:12.5px;
  --t-micro:10.5px;                /* the mono label voice */

  --n-hero:clamp(52px,6.6vw,88px);
  --n-lg:clamp(34px,3.4vw,44px);
  --n-md:24px;
  --n-sm:17px;

  /* ==== SPACE — 4pt base ================================================= */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:96px; --s12:128px;
  --gutter:clamp(20px,4vw,40px);
  --measure:68ch;

  /* ==== FORM ============================================================= */
  --r-sm:8px; --r:12px; --r-lg:20px; --r-pill:999px;
  --hair:1px solid var(--line);

  /* Elevation is rationed. An instrument does not float. */
  --lift-1:0 1px 2px rgba(11,11,16,.04), 0 6px 18px rgba(11,11,16,.05);
  --lift-2:0 2px 6px rgba(11,11,16,.05), 0 22px 56px -20px rgba(11,11,16,.28);

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.34s;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:var(--t-body);line-height:1.55;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv05' 1,'ss01' 1;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}
.wrap--tight{max-width:640px}
.section{padding-block:clamp(44px,5.2vw,76px)}
.section--tight{padding-block:clamp(28px,3.2vw,44px)}
.stack>*+*{margin-top:var(--s4)}
.rule{height:1px;background:var(--line);border:0}
.rule--heavy{height:2px;background:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--signal);
  padding:12px 18px;border-radius:0 0 var(--r-sm) 0;z-index:100;font-weight:600}
.skip:focus{left:0}

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */
.d1,.d2,.d3{font-family:var(--serif);font-weight:600;letter-spacing:-.022em;text-wrap:balance}
.d1{font-size:var(--t-d1);line-height:var(--lh-d1)}
.d2{font-size:var(--t-d2);line-height:var(--lh-d2)}
.d3{font-size:var(--t-d3);line-height:var(--lh-d3);letter-spacing:-.016em}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.body{color:var(--ink-2);max-width:var(--measure)}
.fine{font-size:var(--t-xs);line-height:1.5;color:var(--mut)}

/* The label voice. Mono, tracked, uppercase — used for every kicker,
   column head, unit, source and date on the site. */
.label{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.kicker{display:flex;align-items:center;gap:var(--s3);
  font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt)}
.kicker::after{content:'';flex:0 1 84px;height:1px;background:var(--line)}
.kicker--center{justify-content:center}
.kicker--center::before{content:'';flex:0 1 84px;height:1px;background:var(--line)}

/* Numbers. Mono, tabular, never coloured by band — a score tinted red says
   "you are bad"; this measures visibility, not quality. The interval reads. */
.num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--ink);line-height:1}
.num--hero{font-size:var(--n-hero);font-weight:400;letter-spacing:-.045em}
.num--lg{font-size:var(--n-lg)}
.num--md{font-size:var(--n-md)}
.num--sm{font-size:var(--n-sm)}
.num .u{font-size:.42em;font-weight:500;color:var(--mut);letter-spacing:0;margin-left:.12em}
.num--hero .u{font-size:.28em}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.masthead{position:sticky;top:0;z-index:50;background:rgba(243,243,246,.88);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:var(--hair)}
.masthead__in{display:flex;align-items:center;gap:var(--s6);height:66px}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;flex:0 0 auto}
.brand__mark{width:18px;height:18px;flex:0 0 auto}
.brand__mark .br{stroke:currentColor;stroke-width:6.5;fill:none;stroke-linecap:square}
.brand__mark .dot{fill:var(--cobalt)}
.brand__name{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-.014em}
.masthead__links{display:flex;gap:var(--s6);margin-left:var(--s5)}
.masthead__links a{font-size:var(--t-sm);color:var(--ink-2);text-decoration:none;
  padding-block:4px;border-bottom:1.5px solid transparent;transition:color .16s,border-color .16s}
.masthead__links a:hover{color:var(--ink);border-bottom-color:var(--line)}
.masthead__links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--cobalt)}
.masthead__right{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
@media (max-width:800px){
  .masthead__links{display:none}
  .masthead__in{height:58px}
}

/* ==========================================================================
   BUTTONS
   The solid CTA is a KELLY fill (--cta) with an INK label, and it lives in the
   kelly family. Mint (--signal) stays reserved for marking the subject/one-number;
   it never fills the button.
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-size:var(--t-sm);font-weight:600;letter-spacing:-.005em;
  padding:12px 20px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--card);color:var(--ink);text-decoration:none;cursor:pointer;
  transition:background .16s,border-color .16s,transform .16s var(--ease);white-space:nowrap}
.btn:hover{border-color:#C0C2C9}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--cta);border-color:var(--cta);color:var(--cta-on);font-weight:700}
.btn--solid:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.btn--lg{padding:15px 26px;font-size:15.5px;border-radius:10px}
.btn--block{width:100%}
.btn--quiet{background:transparent;border-color:transparent;color:var(--ink-2);padding-inline:10px}
.btn--quiet:hover{color:var(--ink);background:rgba(11,11,16,.04)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.btn__arrow{transition:transform .2s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* ==========================================================================
   CARDS + TABLES
   ========================================================================== */
.card{background:var(--card);border:var(--hair);border-radius:var(--r);padding:var(--s6)}
.card--lift{box-shadow:var(--lift-1)}
.card--flush{padding:0;overflow:hidden}
/* Emphasis without a dark slab: an accent wash and edge. Quieter than ink and
   it keeps the whole page on one surface. */
.card--accent{background:var(--wash);border-color:#CBE5D8}
.card--accent .label{color:var(--cobalt)}

.grid{display:grid;gap:var(--s4)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:1fr}}
@media (max-width:600px){.grid--2,.grid--4{grid-template-columns:1fr}}

/* Data tables are hairline, never zebra, never dashed. */
.dtable{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.dtable th{text-align:left;font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
  padding:0 var(--s4) var(--s3);border-bottom:1px solid var(--ink)}
.dtable td{padding:var(--s4);border-bottom:1px solid var(--line-2);vertical-align:top}
.dtable tr:last-child td{border-bottom:0}
.dtable .n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.dtable tr.is-subject{background:var(--wash)}
.dtable tr.is-subject td{font-weight:600}
/* The de-emphasised field: every competitor that is not the subject. */
.dtable tr:not(.is-subject) .firmname{color:var(--ink-2)}

/* ==========================================================================
   THE METER — a value against a fixed limit is a meter, never a dial.
   Track, fill, confidence band, and one mint point. The point is the only
   mint on the screen: it is the number that matters.
   ========================================================================== */
.meter{display:block}
.meter__track{position:relative;height:14px;border-radius:7px;background:var(--track);overflow:hidden}
.meter__fill{position:absolute;inset-block:0;left:0;background:var(--cobalt);border-radius:7px}
.meter__band{position:absolute;inset-block:0;background:var(--band)}
.meter__point{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:var(--signal);box-shadow:0 0 0 2.5px var(--card),0 0 0 3.5px rgba(11,11,16,.10)}
.meter__ci{font-family:var(--mono);font-size:var(--t-xs);color:var(--mut);margin-top:var(--s2);
  font-variant-numeric:tabular-nums}
.meter__ci b{color:var(--ink-2);font-weight:600}
/* Field marker — where the market midpoint sits on the same scale. */
.meter__mark{position:absolute;inset-block:-3px;width:1.5px;background:var(--ink);opacity:.5}

/* Bar, for a share that is not a score. Subject accent, field grey. */
.bar{height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:3px;background:var(--cobalt)}
.bar>i.is-field{background:var(--field)}

/* ==========================================================================
   CHIPS
   ========================================================================== */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:var(--t-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-pill);background:var(--prov-neutral-bg);
  color:var(--prov-neutral-ink);white-space:nowrap}
.chip--counted{background:var(--prov-counted-bg);color:var(--prov-counted-ink)}
.chip--benchmark,.chip--modelled{background:var(--prov-neutral-bg);color:var(--prov-neutral-ink)}
.chip--unknown{background:var(--prov-unknown-bg);color:var(--prov-unknown-ink);
  box-shadow:inset 0 0 0 1px #C3C9D6}
.chip--outline{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--mut)}
.chip__dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}

/* ==========================================================================
   STAT — a labelled measured value. Label, number, meaning, provenance.
   Never a number on its own: a number without a comparison is not
   information, it is a Rorschach test.
   ========================================================================== */
.stat{display:flex;flex-direction:column;gap:var(--s2)}
.stat__label{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.stat__value{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:var(--n-lg);letter-spacing:-.035em;line-height:1;color:var(--ink)}
.stat__value .u{font-size:.4em;color:var(--mut);margin-left:.1em;letter-spacing:0}
.stat__note{font-size:var(--t-xs);color:var(--mut);line-height:1.45}
.stat__bench{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2);
  font-variant-numeric:tabular-nums}
/* Unknown is an attention state, never an error, and never a zero. */
.stat--unknown .stat__value{font-size:var(--n-md);color:var(--prov-unknown-ink)}

/* ==========================================================================
   THE RAMP AS A COLOUR FIELD
   One block or one full bleed per page. Two gradients cancel each other out.
   Text sits high-and-white or low-and-ink — the waterline, applied.
   ========================================================================== */
.ramp{background:var(--ramp)}          /* colour field. NO TEXT. */
.ramp-head{background:var(--ramp-head)}  /* the only ramp that carries text */
.ramp-hair{height:4px;background:var(--ramp-flat)}
.on-ramp-top{color:#fff}
.on-ramp-low{color:var(--ink)}

/* ==========================================================================
   LOCKED PREVIEW — may hide a view, never change a number.
   States in plain text what it contains: "competitor media spend by channel,
   monthly" tells a reader more than a blurred chart does.
   ========================================================================== */
.locked{position:relative;border:1px dashed var(--line);border-radius:var(--r);
  padding:var(--s6);background:var(--sunk)}
.locked__body{filter:blur(5px);opacity:.42;user-select:none;pointer-events:none}
.locked__over{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s3);text-align:center;padding:var(--s5)}

/* ==========================================================================
   FIRST WIN — exactly one fix. The value is that it is the only thing here.
   "Verified after re-check" is a promise, not a completed state: it must not
   render with a checkmark until the re-check has actually run.
   ========================================================================== */
.firstwin{border:1px solid var(--line);border-left:3px solid var(--cobalt);
  border-radius:0 var(--r) var(--r) 0;background:var(--card);padding:var(--s6)}
.firstwin__meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  font-family:var(--mono);font-size:var(--t-xs);color:var(--mut);margin-top:var(--s4)}
.firstwin__pending{color:var(--warn-ink);background:var(--warn-bg)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Paper, not ink. The page stays one continuous sheet; a 2px rule does the
   separating that a dark slab used to do, and the ramp hairline at the very
   bottom closes the document the same way it opens it. */
.footer{background:var(--paper);color:var(--ink-2);padding-block:var(--s9) var(--s7);
  margin-top:var(--s10);border-top:2px solid var(--ink)}
.footer a{color:var(--ink-2);text-decoration:none}
.footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.footer .brand{color:var(--ink)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s8)}
.footer__head{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:var(--s4)}
.footer__list li+li{margin-top:var(--s3)}
.footer__legal{margin-top:var(--s8);padding-top:var(--s5);border-top:var(--hair);
  font-size:var(--t-xs);color:var(--mut);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6)}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr;gap:var(--s7)}}

/* ==========================================================================
   MOTION — decoration only. Degrades to nothing when asked.
   Content is in the HTML; the reveal only affects opacity and offset, so a
   crawler, a reader-mode parse and a reduced-motion user all get everything.
   ========================================================================== */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
.no-js .rv{opacity:1;transform:none}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.center{text-align:center}
.mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)}
.mt5{margin-top:var(--s5)} .mt6{margin-top:var(--s6)} .mt7{margin-top:var(--s7)}
.mt8{margin-top:var(--s8)} .mt9{margin-top:var(--s9)}
.row{display:flex;gap:var(--s3);flex-wrap:wrap}
.row--center{justify-content:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* A wide data table scrolls inside its own box rather than blowing out the
   page. Focusable so keyboard users can reach the scroll. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tablewrap:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.tablewrap .dtable{min-width:640px}

/* --- CTA colour switch -----------------------------------------------------
   The solid CTA is navy fill with a mint label — BRAND.md's specified button,
   the strongest legible pairing (mint on navy). To run deep-kelly buttons with
   white labels instead (--cobalt holds white 6.7:1), uncomment:

   .btn--solid{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
   .btn--solid:hover{background:#12563C;border-color:#12563C}
--------------------------------------------------------------------------- */

/* A long metadata chip must not push the page wider than the viewport. */
@media (max-width:600px){
  .chip{white-space:normal;text-align:left}
}

/* At the narrowest phones the masthead's two actions plus the wordmark exceed
   the viewport. Sign in is reachable from the footer on every page, so the
   primary action keeps the space. */
@media (max-width:430px){
  .masthead .btn--quiet{display:none}
  .masthead .btn--solid{padding:10px 14px;font-size:13px}
  .brand__name{font-size:18px}
}

/* ---- Hero inline check form (firm · market · email, right on the homepage) ---- */
.hero-form{max-width:544px;margin:26px auto 0;text-align:left}
.hero-form__fields{display:grid;gap:10px;grid-template-columns:1fr}
.hf-in{width:100%;font:inherit;font-size:15px;padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);-webkit-appearance:none;appearance:none}
.hf-in::placeholder{color:var(--mut)}
.hf-in:focus-visible{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.hero-form .btn{margin-top:12px}
.hf-err{color:var(--crit);font-size:13px;margin-top:9px;min-height:16px;text-align:center}
@media(min-width:620px){.hero-form__fields{grid-template-columns:1fr 1fr}.hf-firm{grid-column:1 / -1}}

/* ============ Homepage — marketing-OS sections (added 2026-08-14) ============ */
/* Signal strip */
.signalstrip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s6);justify-content:center;
  background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:var(--s6) var(--s7);text-align:center}
.signalstrip>div{display:flex;flex-direction:column;gap:2px}
.signalstrip strong{font-size:34px;font-weight:800;line-height:1;color:var(--signal)}
.signalstrip span{font-size:12px;color:rgba(255,255,255,.7);letter-spacing:.02em}
.signalstrip p{margin:0;margin-left:auto;font-size:15px;font-weight:600;line-height:1.35;text-align:right;color:rgba(255,255,255,.92)}
@media(max-width:620px){.signalstrip{gap:var(--s5)}.signalstrip p{margin-left:0;text-align:center;width:100%}}

/* Watch / Act / Prove */
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.stepgrid article{border:1px solid var(--line);border-radius:var(--r);padding:var(--s6);background:var(--card)}
.step__tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cobalt);background:color-mix(in srgb,var(--cobalt) 10%,transparent);border-radius:var(--r-pill);padding:4px 12px}

/* Work modes (do / assign / send) */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.modes article{border:1px solid var(--line);border-radius:var(--r);padding:var(--s6);background:var(--card);display:flex;flex-direction:column}
.modes__tag{margin-top:auto;padding-top:var(--s4);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.modes__tag.live{color:#1a8a5a}
.modes__tag.soon{color:var(--mut)}

/* Coverage grid (six surfaces) */
.coverage{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.coverage article{border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);background:var(--card)}
.cov__badge{display:inline-block;margin-bottom:var(--s3);font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:3px 9px}
.cov__badge.live{background:#e6f7ee;color:#1a8a5a}
.cov__badge.soon{background:var(--paper);color:var(--mut);border:1px solid var(--line)}

/* Difference table */
.difftable{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.difftable__row{display:grid;grid-template-columns:1.1fr 1.4fr 1.4fr;gap:var(--s5);padding:var(--s5) var(--s6);border-top:1px solid var(--line-2);align-items:center;font-size:14px}
.difftable__row:first-child{border-top:0}
.difftable__head{background:var(--ink);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.difftable__row strong{font-weight:700}
.difftable__row span{color:var(--ink-2)}
.difftable__us{background:color-mix(in srgb,var(--cobalt) 6%,transparent)}
.difftable__us strong,.difftable__us span{color:var(--ink)}
@media(max-width:720px){.difftable__row{grid-template-columns:1fr;gap:var(--s2)}.difftable__head{display:none}}

/* FAQ */
.faqs details{border-bottom:1px solid var(--line);padding:var(--s5) 0}
.faqs summary{display:flex;justify-content:space-between;gap:var(--s4);align-items:center;cursor:pointer;font-size:17px;font-weight:600;list-style:none}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary span{color:var(--cobalt);font-weight:700;transition:transform .2s}
.faqs details[open] summary span{transform:rotate(45deg)}
.faqs details p{margin-top:var(--s4);color:var(--ink-2);font-size:15px;line-height:1.6;max-width:64ch}

@media(max-width:820px){.stepgrid,.modes{grid-template-columns:1fr}.coverage{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.coverage{grid-template-columns:1fr}}

/* Outcome chain — "marketing activity is not a business result" (added 2026-08-14) */
.chain{list-style:none;display:flex;flex-direction:column;gap:var(--s3);max-width:760px}
.chain li{display:flex;align-items:center;gap:var(--s5);padding:var(--s5) var(--s6);
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);position:relative}
.chain li:not(:last-child)::after{content:"↓";position:absolute;left:38px;bottom:-15px;
  color:var(--field);font-size:14px;line-height:1;z-index:1}
.chain__n{font-family:var(--mono);font-size:var(--t-micro);font-weight:600;color:var(--mut);
  letter-spacing:.08em;width:22px;flex:none}
.chain__k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.chain__v{font-size:17px;font-weight:600;margin-top:3px;color:var(--ink)}
.chain__win{background:var(--ink);border-color:var(--ink)}
.chain__win .chain__k{color:var(--on-ink-2)}
.chain__win .chain__v{color:var(--signal)}
.chain__win .chain__n{color:var(--on-ink-2)}