/* ═══════════════════════════════════════════════════════════════════════════
   FUEL LAYER — the site-wide visual language (adopted 5 Oct 2026)
   Monochrome editorial: one typeface, tight negative tracking, 1.0 display
   leading, 5px radii, no shadows or card borders, full-bleed white and black
   bands, numbered "(01)" labels. Reference captures and notes live in
   /design-reference at the repo root.

   Loaded last on every page (build/design-system.mjs attaches it), so it owns
   the tokens. Selectors start with html[data-theme] body to sit above the
   design-system layer without adding more !important than it already uses.

   Contents
     1. Font
     2. Tokens
     3. Typography utilities (.f-t-*)
     4. Components: Section, LabelTag/meta row, Card, PricingCard, StatBlock,
        ProjectCard, ButtonLink, Chip
     5. Mapping the site's existing markup onto the components
     6. Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Font ──────────────────────────────────────────────────────────────
   Geist (SIL OFL 1.1), self-hosted, four subsets: latin and latin-ext, each
   upright and italic, 92KB in total. Italic is included because 60 of the 68
   <em> and <i> elements on the site actually render italic; without it the
   browser would slant the upright face itself.

   Self-hosted rather than linked from Google, which is how Inter Tight was
   already served here. The link he sent would have added a render-blocking
   stylesheet on a third-party origin and a second origin for the files -
   both were removed from the critical path on 6 Oct, and Google Fonts is a
   processor the privacy policy has to name. Same font either way.

   Inter Tight stays declared below as the fallback. A fallback face is only
   fetched if it is actually used to render, so it costs nothing while Geist
   loads. */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/geist/geist-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/geist/geist-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/geist/geist-latin-italic.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/geist/geist-latin-ext-italic.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono. Used by one thing: the ASCII mark on the sign-in page, which
   draws a letterform out of words and needs every character to occupy the
   same width. Geist above is proportional, so it cannot do that job; this is
   the monospace member of the same family, so the mark is Geist without
   losing its shape. Upright only - nothing sets it in italic. */
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/geist-mono/geist-mono-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/geist-mono/geist-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Previous face, kept as the fallback. */
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-tight/inter-tight-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-tight/inter-tight-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;
}

/* ── 2. Tokens ─────────────────────────────────────────────────────────── */
:root, :root[data-theme] {
  /* Colour: monochrome plus one pale accent (the brand mint, where Fuel uses
     #D1E1E8). Muted text is the ink at 58%, which keeps 5.2:1 on white and
     #F7F7F7; Fuel's 50% would fall to 3.9:1. */
  --c-ink:#000000; --c-ink-soft:#111111; --c-paper:#FFFFFF; --c-surface:#F7F7F7;
  --c-accent:#D2E9DD; --c-muted:rgb(0 0 0 / 58%); --c-line:rgb(0 0 0 / 14%);
  --font-sans:'Geist','Inter Tight','Helvetica Neue',Arial,sans-serif;
  --fw-strong:600; --fw-display:500;
  --ls-tight:-0.03em; --ls-small:-0.02em;
  --fs-display-xl:clamp(64px,6.95vw,100px); --fs-display-l:clamp(44px,3.9vw,56px);
  --fs-display-m:clamp(32px,2.8vw,40px); --fs-section:clamp(36px,4.6vw,66px);
  --fs-heading:clamp(26px,2.1vw,30px); --fs-body:16px; --fs-caption:12px; --fs-micro:10px;
  --radius:5px; --gutter-x:24px;
  --gap-row:10px; --gap-card:40px; --gap-group:80px; --gap-stat:110px;

  /* The design-system roles, pointed at the Fuel palette. */
  --bg-page:var(--c-paper); --bg-section:var(--c-paper);
  --surface-card:var(--c-surface); --surface-raised:var(--c-surface); --surface-input:var(--c-surface);
  --text-primary:var(--c-ink); --text-secondary:var(--c-muted); --text-muted:var(--c-muted);
  --text-highlight:var(--c-ink); --text-accent:var(--c-ink); --text-on-accent:var(--c-paper);
  --border-subtle:var(--c-line); --border-control:rgb(0 0 0 / 55%); --border-active:var(--c-ink);
  --accent-wash:var(--c-accent);
  --hero-glow:none; --panel-light:linear-gradient(transparent,transparent); --canvas-light:linear-gradient(transparent,transparent);
  --growth-horizon:linear-gradient(transparent,transparent);
  --shadow-panel:none; --shadow-hover:none; --shadow-inset:none; --ld-shadow:none;
  --radius-control:var(--radius); --radius-card:var(--radius); --radius-panel:var(--radius);
  --r-xs:var(--radius); --r-sm:var(--radius); --r-md:var(--radius); --r-lg:var(--radius);
  --type-section:var(--fs-section); --type-card:var(--fs-heading); --type-body:var(--fs-body); --type-lead:18px;
  --leading-display:1; --leading-title:1.05;
  --button-green:var(--c-ink); --button-ink:var(--c-paper); --motion-ink:var(--c-ink);
  color-scheme:light;
}
/* A dark band: the same roles, inverted. Any element can opt in with
   .f-section--dark; section 5 lists the existing sections that do. */
.f-section--dark {
  --bg-page:var(--c-ink-soft); --bg-section:var(--c-ink-soft);
  --surface-card:var(--c-ink); --surface-raised:var(--c-ink); --surface-input:var(--c-ink);
  --text-primary:var(--c-paper); --text-secondary:rgb(255 255 255 / 58%); --text-muted:rgb(255 255 255 / 58%);
  --text-highlight:var(--c-paper); --text-accent:var(--c-paper); --text-on-accent:var(--c-ink);
  --c-muted:rgb(255 255 255 / 58%); --c-line:rgb(255 255 255 / 16%); --border-subtle:var(--c-line);
  --border-control:rgb(255 255 255 / 55%);
  --white:var(--c-paper); --ink:var(--c-paper); --text:var(--c-paper);
  background:var(--c-ink-soft)!important; color:var(--c-paper);
  color-scheme:dark;
}

/* ── 3. Typography utilities ───────────────────────────────────────────────
   One class per type token. Display sizes sit at 1.0 leading. */
.f-t-display-xl { font:var(--fw-display) var(--fs-display-xl)/1 var(--font-sans); letter-spacing:var(--ls-tight); }
.f-t-display-l  { font:var(--fw-display) var(--fs-display-l)/1 var(--font-sans); letter-spacing:var(--ls-tight); }
.f-t-display-m  { font:var(--fw-display) var(--fs-display-m)/1 var(--font-sans); letter-spacing:var(--ls-tight); }
.f-t-heading    { font:var(--fw-strong) var(--fs-heading)/1 var(--font-sans); letter-spacing:-0.05em; }
.f-t-heading-alt{ font:var(--fw-display) var(--fs-heading)/1 var(--font-sans); letter-spacing:var(--ls-tight); }
.f-t-body-strong{ font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans); letter-spacing:var(--ls-small); }
.f-t-caption    { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans); letter-spacing:var(--ls-small); }
.f-t-micro      { font:var(--fw-strong) var(--fs-micro)/1.1 var(--font-sans); }
.f-t-muted      { color:var(--c-muted); }

/* ── 4. Components ─────────────────────────────────────────────────────── */

/* Section: <section class="f-section [f-section--dark]">. Full-bleed band
   with 24px gutters; content runs near the edges. */
.f-section { padding:var(--gutter-x) var(--gutter-x) 120px; background:var(--c-paper); }

/* LabelTag: <span class="f-label">Pricing</span> renders "(Pricing)";
   <span class="f-label" data-n="04"></span> renders "(04)". */
.f-label { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans); letter-spacing:var(--ls-small); }
.f-label::before { content:'(' attr(data-n); }
.f-label::after { content:')'; }
/* Meta row: "◆ (04)" left, "(Label)" centre. The copyright lives in the footer only. */
.f-meta { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans); letter-spacing:var(--ls-small); }
.f-meta > :last-child { justify-self:end; }

/* Card: <div class="f-card [f-card--dark|f-card--accent]">. Separation comes
   from the surface colour alone: no border, no shadow. */
.f-card { display:flex; flex-direction:column; gap:var(--gap-card); padding:30px; border-radius:var(--radius); background:var(--c-surface); color:var(--c-ink); }
.f-card--dark { background:var(--c-ink-soft); color:var(--c-paper); --c-muted:rgb(255 255 255 / 58%); }
.f-card--accent { background:var(--c-accent); }

/* PricingCard: .f-card.f-pricing with __name, __desc, __price (+ __suffix),
   a full-width .f-link, and __list items prefixed "+". Three per row, 10px gap. */
.f-pricing__name { font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans); letter-spacing:var(--ls-small); }
.f-pricing__desc { font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans); color:var(--c-muted); }
.f-pricing__price { font:var(--fw-display) var(--fs-display-l)/1 var(--font-sans); letter-spacing:var(--ls-tight); }
.f-pricing__suffix { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans); }
.f-pricing__list li::before { content:'+'; margin-right:8px; color:var(--c-muted); }

/* StatBlock: .f-stats grid of .f-stat (value, label, note). */
.f-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--gap-stat); row-gap:var(--gap-group); }
.f-stat__value { display:block; padding-bottom:20px; border-bottom:1px solid var(--c-line); font:var(--fw-display) var(--fs-display-xl)/1 var(--font-sans); letter-spacing:var(--ls-tight); }
.f-stat__label { display:block; margin-top:20px; font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans); }

/* ProjectCard: image (5px radius) over a caption row: index · title · kind · year. */
.f-project__media { border-radius:var(--radius); overflow:hidden; }
.f-project__meta { display:flex; gap:30px; margin-top:10px; font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans); letter-spacing:var(--ls-small); }

/* ButtonLink: text with a small corner mark beside it; no rule underneath. */
.f-link {
  display:inline-flex; align-items:flex-start; justify-content:flex-start; gap:10px;
  padding:0; border:0; border-radius:0; background:none;
  color:inherit; font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans); letter-spacing:var(--ls-small);
  text-decoration:none; text-transform:none; cursor:pointer;
}
.f-link::after { content:''; flex:none; width:6px; height:6px; margin-top:2px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transition:transform 180ms var(--ease-system); }
.f-link:hover::after { transform:translate(2px,-2px); }

/* Chip: "See all (07)" style link on the surface colour. */
.f-chip { display:inline-flex; align-items:center; gap:16px; padding:3px 16px 3px 3px; border-radius:var(--radius); background:var(--c-surface); color:var(--c-ink); font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans); text-decoration:none; }
.f-chip img { width:48px; height:48px; object-fit:cover; border-radius:calc(var(--radius) - 2px); }

/* ── 5. Mapping the existing markup ────────────────────────────────────────
   The site's own classes take the component styles here, so the markup and
   copy stay as they are. */

/* Base type: one family; small text at the strong weight, display text at
   the display weight; no uppercase transforms on headings. */
html[data-theme] body { background:var(--c-paper); color:var(--c-ink); font-family:var(--font-sans); font-weight:var(--fw-strong); letter-spacing:var(--ls-small); }
html[data-theme] body *:not(code,pre,kbd,samp) { font-family:var(--font-sans)!important; }
html[data-theme] body :is(p,li,dd,dt,label,summary,figcaption,blockquote,small,.f-hnd-18-120,.f-hndb-18-120,.f-s-12-100,.f-s-16-100,.f-s-13-100) { font-weight:var(--fw-strong); letter-spacing:var(--ls-small); }
html[data-theme] body :is(h1,h2,.f-hndb-180-90,.f-hndb-96-90,.f-hndb-64-100,.sx__title,.hx__title,.c-title,.p-title,.wp__heading,.wx__heading,.wcta__title,.system-path h2,.hero-intro h1) {
  font-weight:var(--fw-display)!important; line-height:1!important; letter-spacing:var(--ls-tight)!important; text-transform:none!important;
}
html[data-theme] body :is(h3,h4,.sx-step__title,.sx-feature__title,.aud__name,.hws__name,.wk__title,.hw__name,.cs__title,.fq__group-title,.sx-plan__name,.footer-col__head) { font-weight:var(--fw-strong)!important; letter-spacing:var(--ls-small); text-transform:none; }
html[data-theme] body :is(.sx__title,.hx__title,.page-intro h1,.page-hero h1,.c-title,.p-title) { font-size:var(--fs-section)!important; }
html[data-theme] body :is(.f-hndb-96-90,.f-hndb-180-90) { letter-spacing:-0.04em!important; }
html[data-theme] body :is(.sx__lede,.hx__lede,.page-intro p,.sx-feature__body,.sx-step__body,.aud__copy,.pr-plan__summary,.hws__copy,.hw__copy,.sx-faq__answer,.legal-doc p,.pillar p) { color:var(--c-muted)!important; font-size:var(--fs-body); line-height:1.4; }
html[data-theme] body :is(.text-uppercase):is(h1,h2,h3,.title,.c-title,.sx__title) { text-transform:none!important; }

/* No shadows, no gradients, small radii, everywhere they used to appear. */
html[data-theme] body :is(.sx-card,.sx-plan,.pr-blob,.sx-step,.sx-quote,.hx-stack__card,.hx-showcase__panel,.hw__site-link,.wk__tile,.cs__card,.aud__card,.wp__shot,.wx__card,.cards .card,.pillar,.lottie-container,.image-wrap,.hws__frame,.hws__item,.portal-panel,.analytics-card,.lc-consent,.lc-prefs__panel,.header-submenu,.floating-scroll-menu,.contact-form-panel,.hc__form,#start .sx__inner,.sx-faq__item,.ld-mockup.ld-panel,.ld-browser,.ld-window) {
  box-shadow:none!important; border-radius:var(--radius)!important;
}
html[data-theme] body :is(.hero::after,.hero::before) { background:none!important; }

/* Section rhythm: white by default; these are the black bands. */
html[data-theme] body :is(.sx,.hx,.page-section,.page-section.alt,.sx--raised,.sx--light,.hx--cream,.page-hero,.page-header,.page-intro,.powered-by,.sections,.sections .section,._03,#start,.hero) { background:var(--c-paper)!important; }
html[data-theme] body :is(.sx--deep:not(#pricing),.hx--deep,.typography-section,.site-footer,[data-page='home'] ._01,[data-page='home'] ._01 > .inner-wrap,[data-page='home'] ._01 .info-section,[data-page='home'] .system-path,[data-page='home'] ._02,[data-page='home'] ._02 .inner-wrap,[data-page='home'] #work) {
  --bg-page:var(--c-ink-soft); --bg-section:var(--c-ink-soft);
  --surface-card:var(--c-ink); --surface-raised:var(--c-ink); --surface-input:var(--c-ink);
  --text-primary:var(--c-paper); --text-secondary:rgb(255 255 255 / 58%); --text-muted:rgb(255 255 255 / 58%);
  --text-highlight:var(--c-paper); --text-accent:var(--c-paper); --text-on-accent:var(--c-ink);
  --c-muted:rgb(255 255 255 / 58%); --c-line:rgb(255 255 255 / 16%); --border-subtle:var(--c-line); --border-control:rgb(255 255 255 / 55%);
  --white:var(--c-paper); --ink:var(--c-paper); --text:var(--c-paper);
  background:var(--c-ink-soft)!important; color:var(--c-paper); color-scheme:dark;
}
/* The capability band inside the studio section stays white. */
html[data-theme] body[data-page='home'] ._01 .sections {
  --bg-page:var(--c-paper); --surface-card:var(--c-surface); --surface-raised:var(--c-surface); --surface-input:var(--c-surface);
  --text-primary:var(--c-ink); --text-secondary:rgb(0 0 0 / 58%); --text-muted:rgb(0 0 0 / 58%); --text-highlight:var(--c-ink);
  --text-accent:var(--c-ink); --c-muted:rgb(0 0 0 / 58%); --c-line:rgb(0 0 0 / 14%); --border-subtle:var(--c-line);
  --white:var(--c-ink); --ink:var(--c-ink); --text:var(--c-ink); color:var(--c-ink); color-scheme:light;
}
/* Live product mockups keep their own light screen whatever band they sit in. */
html[data-theme] body .ld-mockup {
  --bg-page:var(--c-paper); --surface-card:#FFFFFF; --surface-raised:var(--c-surface); --surface-input:var(--c-surface);
  --text-primary:var(--c-ink); --text-secondary:rgb(0 0 0 / 58%); --text-muted:rgb(0 0 0 / 58%); --text-highlight:var(--c-ink);
  --border-subtle:rgb(0 0 0 / 12%); --c-line:rgb(0 0 0 / 12%); color:var(--c-ink); color-scheme:light;
}
/* Legacy colour helpers follow the band they are in. */
html[data-theme] body :is(.color-black,.color-gray-light,.color-white,.color-green,.color-orange) { color:var(--text-primary)!important; }
html[data-theme] body :is(.background-black,.background-gray-super-dark,.background-green,.background-gray-light,.background-white,.background-cream) { background-color:transparent!important; }
html[data-theme] body .lottie-container { background:var(--c-surface)!important; }

/* Section heads become meta rows: "◆ (04)   (Label)",
   numbered in page order. */
html[data-theme] body { counter-reset:f-sec; }
html[data-theme] body :is(.sx__head,.hx__head) { position:relative; max-width:none!important; padding-top:40px; border-top:0!important; counter-increment:f-sec; }
html[data-theme] body :is(.sx__head,.hx__head)::before { content:'◆ (' counter(f-sec,decimal-leading-zero) ')'; position:absolute; top:12px; left:0; font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans); color:var(--text-primary); }
html[data-theme] body :is(.sx__head,.hx__head)::after { content:none!important; }
html[data-theme] body :is(.sx__eyebrow,.hx__eyebrow) {
  position:absolute; top:12px; left:96px; right:96px; margin:0!important; padding:0!important; border:0!important; text-align:center;
  font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; letter-spacing:var(--ls-small)!important; text-transform:none; color:var(--text-primary)!important;
}
html[data-theme] body :is(.sx__eyebrow,.hx__eyebrow)::before { content:'('!important; position:static!important; display:inline!important; width:auto!important; height:auto!important; margin:0!important; background:none!important; border:0!important; }
html[data-theme] body :is(.sx__eyebrow,.hx__eyebrow)::after { content:')'!important; position:static!important; display:inline; flex:none; width:auto; height:auto; margin:0; background:none!important; border:0!important; }
html[data-theme] body :is(.sx__title,.hx__title,.sx__lede,.hx__lede) { max-width:22ch; }
html[data-theme] body :is(.sx__lede,.hx__lede) { max-width:46ch; }
html[data-theme] body .sx__head--center :is(.sx__title,.sx__lede) { margin-inline:auto; }
/* Inner pages already number their sections ("02/ STORY"): same rule, label left. */
html[data-theme] body :is(.section-label,[data-page='home'] :is(._01,._02,._03) .header,.sections .section > .header) {
  display:flex!important; justify-content:space-between; width:100%; padding-top:0; border:0!important;
  font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; letter-spacing:var(--ls-small)!important; color:var(--text-primary)!important;
}
html[data-theme] body :is(.section-label,[data-page='home'] :is(._01,._02,._03) .header,.sections .section > .header)::after { content:none!important; }

/* Card. */
html[data-theme] body :is(.sx-card,.sx-step,.aud__card,.cards .card,.pillar,.hx-stack__card,.hx-showcase__panel,.wx__card,.cs__card,.pr-blob,.sx-plan) {
  background:var(--surface-card)!important; color:var(--text-primary)!important; border:0!important; padding:30px!important;
}
html[data-theme] body :is(.cards,.sx-cards__grid,.sx-steps__list,.aud__grid,.pr-grid,.sx-pricing__grid,.hx-stack__list) { gap:var(--gap-row)!important; }
html[data-theme] body .sx-step::before { content:'(' counter(sx-step,decimal-leading-zero) ')'!important; position:static!important; display:block!important; margin:0 0 var(--gap-card)!important; width:auto!important; height:auto!important; background:none!important; color:var(--text-primary)!important; font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; }
html[data-theme] body .aud__index::before { content:'('; }
html[data-theme] body .aud__index::after { content:')'!important; margin:0!important; }
html[data-theme] body .aud__media { border-radius:var(--radius); overflow:hidden; }
html[data-theme] body :is(.aud__tag,.sx-step__body) { color:var(--c-muted)!important; }

/* PricingCard. */
html[data-theme] body :is(.pr-blob,.sx-plan) { display:flex!important; flex-direction:column; gap:28px; }
html[data-theme] body :is(.pr-blob--glow,.sx-plan--featured) {
  --surface-card:var(--c-ink-soft); --text-primary:var(--c-paper); --text-secondary:rgb(255 255 255 / 58%); --text-muted:rgb(255 255 255 / 58%);
  --c-muted:rgb(255 255 255 / 58%); --c-line:rgb(255 255 255 / 16%); --text-highlight:var(--c-paper);
  background:var(--c-ink-soft)!important; color:var(--c-paper)!important; border:0!important;
}
html[data-theme] body :is(.pr-blob,.sx-plan) :is(.sx-plan__name) { font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans)!important; text-transform:none!important; letter-spacing:var(--ls-small)!important; color:var(--text-primary)!important; }
html[data-theme] body :is(.sx-plan__price,.pr-plan__price,.pr-price__val) { font-size:var(--fs-display-l)!important; font-weight:var(--fw-display)!important; line-height:1!important; letter-spacing:var(--ls-tight)!important; color:var(--text-primary)!important; }
html[data-theme] body :is(.pr-price__prefix,.pr-price__unit) { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; letter-spacing:var(--ls-small)!important; text-transform:none!important; color:var(--c-muted)!important; }
html[data-theme] body .sx-plan__list { display:grid; gap:12px; padding-top:8px; border:0!important; }
html[data-theme] body .sx-plan__list li { padding-left:16px!important; color:var(--c-muted)!important; font-size:var(--fs-body)!important; }
html[data-theme] body .sx-plan__list li::before { content:'+'!important; position:absolute; left:0; top:0; width:auto!important; height:auto!important; background:none!important; border:0!important; transform:none!important; color:var(--text-primary)!important; }
html[data-theme] body .sx-plan__list li { position:relative; }
html[data-theme] body :is(.sx-plan__flag) {
  align-self:flex-start; position:static!important; width:auto!important; margin:0!important; padding:3px 8px!important; border-radius:var(--radius)!important;
  background:var(--c-accent)!important; color:var(--c-ink)!important; font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; text-transform:none!important; letter-spacing:var(--ls-small)!important;
}

/* StatBlock. */
html[data-theme] body :is(.sx-stats__grid,.hx-metrics__row) { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; column-gap:var(--gap-stat)!important; row-gap:var(--gap-group)!important; }
html[data-theme] body :is(.sx-stat,.hx-metric) { padding:0!important; border:0!important; background:none!important; }
html[data-theme] body :is(.sx-stat__value,.hx-metric__value) { display:block; padding-bottom:20px; border-bottom:1px solid var(--c-line); font:var(--fw-display) var(--fs-display-xl)/1 var(--font-sans)!important; letter-spacing:var(--ls-tight)!important; color:var(--text-primary)!important; }
html[data-theme] body :is(.sx-stat__value,.hx-metric__value) em { font-style:normal; color:inherit!important; }
html[data-theme] body :is(.sx-stat__label,.hx-metric__label) { display:block; margin-top:20px; font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans)!important; text-transform:none!important; color:var(--text-primary)!important; }

/* Testimonial. */
html[data-theme] body .sx-quote__mark { display:none; }
html[data-theme] body .sx-quote__body { font:var(--fw-display) var(--fs-heading)/1.05 var(--font-sans)!important; letter-spacing:var(--ls-tight)!important; }
html[data-theme] body .sx-quote__avatar { border-radius:50%; background:var(--c-accent)!important; color:var(--c-ink)!important; }

/* ProjectCard: the homepage showcase and the work index. */
html[data-theme] body :is(.hws__frame,.hws__shot,.wk__media,.hw__media,.wp__shot,.cs__media) { border:0!important; border-radius:var(--radius)!important; overflow:hidden; }
html[data-theme] body :is(.hws__index,.wk__index,.wk__kind,.hw__kind,.hws__tags li,.cs__tags li,.hw__tags li) { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; letter-spacing:var(--ls-small)!important; text-transform:none!important; background:none!important; padding:0!important; color:var(--c-muted)!important; }
html[data-theme] body :is(.hws__tags,.hw__tags,.cs__tags) { gap:6px 18px!important; }
html[data-theme] body .hws__name { font-size:var(--fs-display-l)!important; font-weight:var(--fw-display)!important; line-height:1!important; letter-spacing:var(--ls-tight)!important; }
html[data-theme] body .hw__bar { background:var(--c-surface)!important; }

/* ButtonLink: framed SVG buttons, primary buttons and plan CTAs all become
   the ruled text link. Form submits stay solid so they read as buttons. */
html[data-theme] body :is(.button-frame,.sx-btn,.hero-action,.pr-plan__cta,.hw__project-link,.hw__all):not([type='submit']) {
  display:inline-flex!important; align-items:flex-start; justify-content:flex-start; gap:10px; width:auto!important; height:auto!important; min-width:0; min-height:44px;
  padding:12px 0!important; border:0!important; border-radius:0!important; background:none!important;
  color:var(--text-primary)!important; font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans)!important; letter-spacing:var(--ls-small)!important; text-transform:none!important; text-decoration:none!important; box-shadow:none!important;
}
html[data-theme] body :is(.button-frame,.sx-btn,.hero-action,.pr-plan__cta,.hw__project-link,.hw__all):not([type='submit'])::after { content:''; flex:none; width:6px; height:6px; margin-top:2px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transition:transform 180ms var(--ease-system); }
html[data-theme] body :is(.button-frame,.sx-btn,.hero-action,.pr-plan__cta,.hw__project-link,.hw__all):not([type='submit']):hover::after { transform:translate(2px,-2px); }
html[data-theme] body :is(.button-frame,.sx-btn,.hero-action,.pr-plan__cta,.hw__project-link,.hw__all):not([type='submit']) :is(svg,.icon-arrow,[aria-hidden='true']) { display:none!important; }
html[data-theme] body .button-frame .label-wrap { position:static!important; display:block!important; width:auto!important; height:auto!important; padding:0!important; transform:none!important; }
html[data-theme] body :is(.button-frame,.sx-btn,.hero-action,.pr-plan__cta,.hw__project-link,.hw__all):not([type='submit']) span { color:inherit!important; font:inherit!important; letter-spacing:inherit!important; text-transform:none!important; text-decoration:none!important; background:none!important; padding:0!important; }
html[data-theme] body .pr-plan__cta { width:100%!important; margin-top:auto; }
html[data-theme] body :is(button[type='submit'],.career-submit,.auth-submit,.hc__submit,.portal-button--primary) {
  border:0!important; border-radius:var(--radius)!important; background:var(--c-ink)!important; color:var(--c-paper)!important; box-shadow:none!important;
  font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans)!important; letter-spacing:var(--ls-small)!important; text-transform:none!important;
}
html[data-theme] body :is(button[type='submit'],.career-submit,.auth-submit) :is(span,svg) { color:inherit!important; }
html[data-theme] body :is(.f-section--dark,.site-footer,.typography-section) button[type='submit'] { background:var(--c-paper)!important; color:var(--c-ink)!important; }
html[data-theme] body :is(.link-arrow,.hws__link,.hc__link,.pr-more__link) { font-weight:var(--fw-strong)!important; text-transform:none!important; letter-spacing:var(--ls-small)!important; color:var(--text-primary)!important; }

/* Forms: soft surface with a visible bottom rule (3:1 against the page). */
html[data-theme] body :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']),textarea,select):not(.ld-mockup *) {
  background:var(--c-surface)!important; color:var(--c-ink)!important; border:0!important; border-bottom:1px solid rgb(0 0 0 / 55%)!important;
  border-radius:var(--radius) var(--radius) 0 0!important; box-shadow:none!important; font-weight:500!important;
}
html[data-theme] body :is(.f-section--dark,.site-footer,.typography-section) :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']),textarea,select):not(.ld-mockup *) { background:var(--c-ink)!important; color:var(--c-paper)!important; border-bottom-color:rgb(255 255 255 / 55%)!important; }
html[data-theme] body :is(.field,.contact-form-panel,.hc__form,#start .sx__inner,.career-form) { background:transparent!important; border:0!important; }

/* FAQ: hairline rows, no panels. */
html[data-theme] body .sx-faq__item { background:transparent!important; border:0!important; border-top:1px solid var(--c-line)!important; border-radius:0!important; padding-inline:0!important; }
html[data-theme] body .sx-faq__item summary { font:var(--fw-strong) clamp(18px,1.4vw,20px)/1.2 var(--font-sans)!important; letter-spacing:var(--ls-small)!important; color:var(--text-primary)!important; }

/* Header: a quiet bar, numbered links ("Work 03"), no frame. */
html[data-theme] body header.site-header .top-wrap { border:0!important; border-radius:var(--radius)!important; background:rgb(255 255 255 / 94%)!important; box-shadow:none!important; }
html[data-theme] body header.site-header { counter-reset:f-nav; }
html[data-theme] body header.site-header .menu-segment:not(.menu-segment--cta):not(.menu-segment--auth) { counter-increment:f-nav; }
html[data-theme] body header.site-header .menu-segment:not(.menu-segment--cta):not(.menu-segment--auth) > .header-nav-link .header-nav-label::after { content:counter(f-nav,decimal-leading-zero); margin-left:4px; vertical-align:super; font-size:9px; color:var(--c-muted); }
html[data-theme] body header.site-header .header-nav-label { font-size:13px!important; font-weight:var(--fw-strong)!important; letter-spacing:var(--ls-small)!important; text-transform:none!important; color:var(--c-ink)!important; }
html[data-theme] body header.site-header .header-nav-marker { display:none!important; }
html[data-theme] body header.site-header .menu-segment--cta .header-nav-link { background:var(--c-ink)!important; border-radius:var(--radius)!important; }
html[data-theme] body header.site-header .menu-segment--cta .header-nav-label { color:var(--c-paper)!important; }
html[data-theme] body header.site-header .menu-segment--cta .header-nav-label::after { content:none!important; }
html[data-theme] body header.site-header .header-submenu { background:var(--c-paper)!important; border:0!important; outline:1px solid var(--c-line); }
html[data-theme] body header.site-header .logo .logo-light { display:none!important; }
html[data-theme] body header.site-header .logo .logo-dark { display:block!important; }
/* Header logo in black: a display filter only; the logo file is unchanged. */
html[data-theme] body header.site-header .logo .logo-dark { filter:brightness(0); }
html[data-theme] body header.site-header .hamburger .line { background:var(--c-ink)!important; }
html[data-theme] body .modal-menu :is(a,span) { color:var(--c-ink)!important; }
html[data-theme] body .floating-scroll-menu { background:var(--c-paper)!important; border:0!important; outline:1px solid var(--c-line); }
html[data-theme] body .floating-scroll-menu span { font-weight:var(--fw-strong)!important; text-transform:none!important; color:var(--c-ink)!important; }

/* Hero: the supplied loop stays as it is; the copy takes the Fuel type. */
html[data-theme] body .hero-intro__eyebrow { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; text-transform:none!important; letter-spacing:var(--ls-small)!important; color:var(--text-primary)!important; }
html[data-theme] body .hero-intro h1 { font-size:clamp(40px,4.6vw,72px)!important; }
html[data-theme] body .hero-intro__lede { font:var(--fw-strong) var(--fs-body)/1.3 var(--font-sans)!important; color:var(--text-primary)!important; }
html[data-theme] body .hero-intro__actions { gap:24px 32px!important; }
html[data-theme] body .hero .text-list span { font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans)!important; text-transform:none!important; letter-spacing:var(--ls-small)!important; }

/* Homepage bands. */
html[data-theme] body[data-page='home'] .system-path { background:var(--c-ink-soft)!important; }
html[data-theme] body[data-page='home'] .system-path :is(h2,h2 span,h3,p,.system-path__number,.system-path__route,.system-path__eyebrow) { color:var(--text-primary)!important; }
html[data-theme] body[data-page='home'] .system-path :is(.system-path__number,.system-path__route,.system-path__eyebrow) { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; letter-spacing:var(--ls-small)!important; }
html[data-theme] body[data-page='home'] .system-path__number::before { content:'('; }
html[data-theme] body[data-page='home'] .system-path__number::after { content:')'; }
html[data-theme] body[data-page='home'] .system-path__steps li { padding-top:0!important; border:0!important; }
html[data-theme] body[data-page='home'] .system-path__steps h3 { font-size:var(--fs-display-m)!important; font-weight:var(--fw-display)!important; line-height:1!important; letter-spacing:var(--ls-tight)!important; }
html[data-theme] body[data-page='home'] .system-path__steps p { color:var(--c-muted)!important; }
html[data-theme] body .typography-section .title { font-weight:var(--fw-display)!important; letter-spacing:-0.045em!important; }
html[data-theme] body .typography-section .js-scramble-text { font-weight:var(--fw-strong)!important; text-transform:none!important; }
html[data-theme] body :is(.bullet-green)::before { background:currentColor!important; border-radius:0!important; }
html[data-theme] body .powered-by .pb-caption { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; text-transform:none!important; color:var(--c-muted)!important; }

/* Footer: a black band with the lead line at display size and hairline lists. */
html[data-theme] body .site-footer :is(.footer-lead,.inner-wrap,.footer-bottom,.info) { background:transparent!important; border-color:var(--c-line)!important; }
html[data-theme] body .site-footer .footer-lead__line { font:var(--fw-display) var(--fs-display-l)/1 var(--font-sans)!important; letter-spacing:var(--ls-tight)!important; color:var(--c-paper)!important; max-width:16ch; }
html[data-theme] body .site-footer .footer-col__head { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; color:var(--c-muted)!important; }
html[data-theme] body .site-footer .footer-col__links li { border:0!important; padding-block:6px; }
html[data-theme] body .site-footer .footer-col__links :is(a,button) span { font:var(--fw-strong) var(--fs-body)/1.26 var(--font-sans)!important; color:var(--c-paper)!important; }
html[data-theme] body .site-footer :is(.sign,.credits,.local-clock) span { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; text-transform:none!important; color:var(--c-muted)!important; }
html[data-theme] body .site-footer .footer-newsletter__label { color:var(--c-paper)!important; }

/* Overlays: cookie notice and chat use the same surfaces and radius. */
html[data-theme] body :is(.lc-consent,.lc-prefs__panel) { background:var(--c-paper)!important; outline:1px solid var(--c-line); }
html[data-theme] body :is(.lc-consent,.lc-prefs) .lc-c-btn { min-height:44px; border-radius:var(--radius)!important; background:var(--c-ink)!important; border:0!important; color:var(--c-paper)!important; }

/* Specific overrides where an older rule is more specific. */
html[data-theme] body[data-page] .pr-grid .pr-blob--glow.sx-plan--featured,
html[data-theme] body[data-page] .pr-blob--glow.sx-plan--featured { background:var(--c-ink-soft)!important; border:0!important; box-shadow:none!important; padding-top:30px!important; }

/* The text that goes on top of it is coloured in editorial.css, not here:
   that file loads after this one and sets colour on .pr-blob / .sx-plan with
   !important behind three ID-level :not() selectors, so a rule at this point
   in the cascade cannot be heard. See "the featured plan card is dark" there. */
html[data-theme] body :is(.pr-blob,.sx-plan)::before, html[data-theme] body :is(.pr-blob,.sx-plan)::after { content:none!important; }
html[data-theme] body[data-page] .sx-plan__flag { display:inline-block!important; width:-moz-fit-content!important; width:fit-content!important; transform:none!important; }
html[data-theme] body :is(.sx__eyebrow,.hx__eyebrow) { display:block!important; gap:0!important; }
html[data-theme] body .hws__tags li { border:0!important; }
html[data-theme] body .hws__frame { --text-primary:var(--c-ink); --text-secondary:rgb(0 0 0 / 58%); --surface-input:var(--c-paper); }
html[data-theme] body :is(.hws__frame,.hw__site-link) .hw__url { background:var(--c-paper)!important; color:rgb(0 0 0 / 58%)!important; border:0!important; }
html[data-theme] body :is(.hws__frame,.hw__site-link) .hw__live { color:var(--c-ink)!important; }
html[data-theme] body .lottie-container { border:0!important; outline:0!important; }
html[data-theme] body header.site-header.is-scrolled:not(.menu-open) .top-wrap,
html[data-theme] body header.site-header .top-wrap { background:rgb(247 247 247 / 96%)!important; }
html[data-theme] body footer[data-shared-footer] .footer-col__links { justify-items:stretch!important; }
html[data-theme] body footer[data-shared-footer] .footer-col__links > li { display:block; width:100%; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter button[type='submit'] { color:var(--c-ink)!important; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter button[type='submit'] :is(svg,path) { display:block!important; color:var(--c-ink)!important; fill:currentColor!important; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter button[type='submit'] svg { flex:0 0 14px; width:14px!important; height:14px!important; }
html[data-theme] body form button[type='submit'] { display:inline-flex!important; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px!important; border-radius:var(--radius)!important; }
html[data-theme] body form button[type='submit']::after, html[data-theme] body form button[type='submit']::before { content:none!important; }
html[data-theme] body[data-page] :is(.pr-blob,.sx-plan) .pr-plan__cta { background:none!important; color:var(--text-primary)!important; border-radius:0!important; }
html[data-theme] body[data-page] :is(#start,main,footer) form button[type='submit'] { border-radius:var(--radius)!important; padding-inline:24px!important; }
html[data-theme] body[data-page] form button[type='submit']:not(:disabled):hover { background:#333!important; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter__row input { background:var(--c-ink)!important; color:var(--c-paper)!important; border:0!important; border-bottom:1px solid rgb(255 255 255 / 55%)!important; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter__row input::placeholder { color:rgb(255 255 255 / 58%)!important; }
/* Large running text takes the lighter display weight (Fuel's 30px/500). */
html[data-theme] body .f-hnd-24-110 { font-weight:var(--fw-display)!important; letter-spacing:var(--ls-tight)!important; line-height:1.15!important; }
/* Card numbers read "(01)" on the card, not on a tinted bar. */
html[data-theme] body .cards .card .status { background:none!important; padding:0!important; border:0!important; }
html[data-theme] body .cards .card .status span { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; color:var(--text-primary)!important; }
html[data-theme] body .cards .card .status span::before { content:'('; }
html[data-theme] body .cards .card .status span::after { content:')'; }
html[data-theme] body .cards .card .c-title { font-size:var(--fs-display-m)!important; }
html[data-theme] body :is(.wk__tile,.wx__card,.cs__card) { border:0!important; }
html[data-theme] body .media-placeholder { background:#EBEBEB!important; }
html[data-theme] body .sx-faq__chev { color:var(--text-primary)!important; opacity:1!important; }
html[data-theme] body .sx-compare { background:transparent!important; border-radius:0!important; }
html[data-theme] body .sx-compare :is(th,td) { border:0!important; background:transparent!important; }
html[data-theme] body .sx-compare tbody tr:nth-child(odd) :is(th,td) { background:var(--c-surface)!important; }
html[data-theme] body .sx-compare th { font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; text-transform:none!important; color:var(--c-muted)!important; }

/* Dividers: only the FAQ rows and the StatBlock rule keep a hairline. Every
   other rule, from this layer or older ones, is switched off. */
html[data-theme] body :is(.site-footer,.site-footer *,.hero,.hero *,.powered-by,.footer-lead,.footer-bottom,.info,.inner-wrap,.sections .section,.sx__head,.hx__head,.hx__eyebrow,.page-section,.page-intro,.section-label,.system-path,.system-path *,.pillar,.cards .card,.hws__item,.hws__text,.sx-feature,.service-text__row,.aud__card,.pr-svc__row,.hx-ledger__item,.fq__group,.hq__grid,.wk__meta,.wx__head,.typography-section,.typography-section *,._01 .header,._02 .header,._03 .header,.text-wrap .list li):not(input):not(textarea):not(select):not(.sx-faq__item) {
  border-top-width:0!important; border-bottom-width:0!important;
}
html[data-theme] body hr { display:none!important; }
/* data-reveal="none" opts out of the scroll reveal, so it must never start hidden. */
html.has-reveal body [data-reveal='none'] { opacity:1!important; transform:none!important; }

/* ── Glass removed (5 Oct 2026) ────────────────────────────────────────────
   The frosted panels and the dark glow bands behind the forms and pricing
   cards are gone at Patrick's request. Those areas now use the editorial
   cards in css/editorial.css ("Cards instead of glass"). */
html[data-theme] body footer#site-footer-main.site-footer { background:radial-gradient(28% 42% at 90% 72%, rgb(71 156 115 / 38%), transparent 72%), var(--c-ink-soft)!important; }
/* Custom checkboxes (review consent) stay checkbox-sized, with a light edge. */
html[data-theme] body form .field input[type='checkbox'] { flex:0 0 22px!important; width:22px!important; min-width:22px!important; height:22px!important; min-height:22px!important; padding:0!important; border-radius:5px!important; }
html[data-theme] body .rv-consent__label input[type='checkbox'] { background:transparent!important; border:1.5px solid rgb(17 17 17 / 55%)!important; }
html[data-theme] body .rv-consent__label input[type='checkbox']:checked { background:var(--c-ink, #111)!important; }
/* Pricing: plan titles centred; the recommended plan carries a light-green
   strip on its top edge with the label centred in it. */
html[data-theme] body :is(.pr-blob,.sx-plan) .sx-plan__name { align-self:stretch; text-align:center!important; }
html[data-theme] body[data-page] :is(.pr-blob--glow,.sx-plan--featured) .sx-plan__flag + .sx-plan__name { margin-top:34px!important; }
html[data-theme] body[data-page] :is(.pr-blob--glow,.sx-plan--featured) { position:relative; overflow:hidden; padding-top:calc(clamp(24px,2.6vw,36px) + 34px)!important; border-top:0!important; }
html[data-theme] body[data-page] :is(.pr-blob--glow,.sx-plan--featured) .sx-plan__flag {
  position:absolute!important; top:0; left:0; right:0; display:block!important; width:auto!important; height:34px;
  margin:0!important; padding:0!important; border-radius:0!important; background:var(--mint)!important; color:var(--c-ink)!important;
  font:var(--fw-strong) var(--fs-caption)/34px var(--font-sans)!important; letter-spacing:.04em!important; text-align:center; text-transform:uppercase!important;
}

/* ── CTA banner (homepage, 5 Oct 2026, from Patrick's reference) ──────────
   Jhene's dark studio portrait fills a large rounded frame, lit green from the
   left. A white card (no glass since 5 Oct) crosses the open left side and runs just into her
   shoulder: the eyebrow at its left end, the question right-aligned. The lead
   sits under it on the photo. A soft shade over the bright glow keeps the
   white text above AA. On phones the photo runs on top and fades into the
   dark frame, with the card below. */
html[data-theme] body .cta-banner {
  position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr);
  align-content:center; justify-items:start; row-gap:22px; aspect-ratio:2688 / 1520;
  margin:clamp(24px,4vw,64px) var(--gutter-x,24px); padding:clamp(24px,5vw,88px);
  border-radius:clamp(28px,4.4vw,64px); background:#E6E6E4; color:#333;
}
html[data-theme] body .cta-banner__photo { position:absolute; inset:0; z-index:-1; width:100%; height:100%; max-width:none; object-fit:cover; }
html[data-theme] body .cta-banner::after { content:none; }
html[data-theme] body .cta-banner__glass {
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:28px; width:min(62%,880px);
  padding:clamp(22px,2.6vw,40px) clamp(24px,3vw,48px);
  background:#fff; border:0; border-radius:4px; box-shadow:0 30px 60px rgb(0 0 0 / 18%); color:#111;
}
html[data-theme] body .cta-banner__eyebrow { max-width:14ch; font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; letter-spacing:.04em; color:rgb(17 17 17 / 70%)!important; }
html[data-theme] body .cta-banner__title { margin:0; text-align:right; font-size:clamp(30px,3.8vw,62px)!important; color:#111!important; }
html[data-theme] body .cta-banner__lead { margin:0 0 0 clamp(24px,3vw,48px); font:var(--fw-strong) var(--fs-body)/1.45 var(--font-sans)!important; color:#333!important; }
@media (max-width: 1023px) {
  html[data-theme] body .cta-banner { aspect-ratio:auto; padding:0 16px 24px; border-radius:28px; row-gap:18px; }
  html[data-theme] body .cta-banner::after { content:none; }
  html[data-theme] body .cta-banner__photo { position:relative; inset:auto; width:calc(100% + 32px); height:auto; margin:0 -16px -96px; aspect-ratio:2688 / 1520; object-fit:cover; object-position:72% 50%;
    -webkit-mask-image:linear-gradient(#000 58%, transparent 97%); mask-image:linear-gradient(#000 58%, transparent 97%); }
  html[data-theme] body .cta-banner__glass { width:100%; grid-template-columns:1fr; gap:12px; }
  html[data-theme] body .cta-banner__eyebrow { max-width:none; }
  html[data-theme] body .cta-banner__title { text-align:left; }
  html[data-theme] body .cta-banner__lead { margin:0 4px; }
}

/* ── Book a Call (5 Oct 2026) ──────────────────────────────────────────────
   Reusable section (renderBookCall in build/partials.mjs). The photo fills a
   rounded frame; the copy sits over the empty cream left side at up to 45%
   width. Under 768px the copy comes first and the photo follows below.
   Colours: cream #F5E3CC matches the backdrop; text #2B1D0E and #4A3520;
   button #E8A33D with #2B1D0E text. */
html { scroll-padding-top:100px; }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
html[data-theme] body .book-call {
  --bc-cream:#F5E3CC; --bc-ink:#2B1D0E; --bc-body:#4A3520; --bc-amber:#E8A33D; --bc-amber-dark:#D4902A;
  position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center;
  aspect-ratio:2000 / 1131; margin:clamp(24px,4vw,64px) var(--gutter-x,24px);
  border-radius:clamp(28px,4.4vw,64px); background:var(--bc-cream); color:var(--bc-ink);
}
html[data-theme] body .book-call__media { position:absolute; inset:0; z-index:-1; }
html[data-theme] body .book-call__photo { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:right center; }
/* Soft fade on the left so the copy sits on an even cream. */
html[data-theme] body .book-call__media::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--bc-cream) 0%, rgb(245 227 204 / 70%) 22%, transparent 42%); pointer-events:none; }
html[data-theme] body .book-call__content { width:min(45%,560px); padding:clamp(28px,5vw,88px); display:grid; justify-items:start; gap:18px; }
html[data-theme] body .book-call__eyebrow { margin:0; font:var(--fw-strong) var(--fs-caption)/1.35 var(--font-sans)!important; letter-spacing:.08em!important; text-transform:uppercase; color:var(--bc-body)!important; }
html[data-theme] body .book-call__title { margin:0!important; font-size:clamp(32px,3.6vw,56px)!important; color:var(--bc-ink)!important; }
html[data-theme] body .book-call__text { margin:0; font:var(--fw-strong) var(--fs-body)/1.5 var(--font-sans)!important; color:var(--bc-body)!important; }
html[data-theme] body .book-call__button {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; margin-top:8px; padding:12px 28px;
  border-radius:999px; background:var(--bc-amber); color:var(--bc-ink)!important; text-decoration:none;
  font:var(--fw-strong) var(--fs-body)/1 var(--font-sans);
  transition:background-color 180ms var(--ease-system), transform 180ms var(--ease-system), box-shadow 180ms var(--ease-system);
}
html[data-theme] body .book-call__button:hover { background:var(--bc-amber-dark); transform:translateY(-2px); box-shadow:0 8px 20px rgb(43 29 14 / 18%); }
html[data-theme] body .book-call__button:focus-visible { outline:3px solid var(--bc-ink)!important; outline-offset:3px; }
html[data-theme] body .book-call__alt { margin:0; font:var(--fw-strong) 14px/1.4 var(--font-sans)!important; color:var(--bc-body)!important; }
html[data-theme] body .book-call__alt a { color:var(--bc-ink)!important; text-decoration:underline; text-underline-offset:3px; }
@media (min-width:768px) and (max-width:1023px) {
  html[data-theme] body .book-call { aspect-ratio:auto; min-height:clamp(420px,62vw,600px); }
  html[data-theme] body .book-call__photo { object-position:100% center; }
  html[data-theme] body .book-call__content { width:40%; padding:40px 32px; }
  html[data-theme] body .book-call__title { font-size:clamp(28px,3.8vw,38px)!important; }
}
@media (max-width:767px) {
  html[data-theme] body .book-call { flex-direction:column; align-items:stretch; aspect-ratio:auto; margin:24px 16px; border-radius:28px; }
  html[data-theme] body .book-call__content { order:1; width:auto; padding:36px 24px 8px; }
  html[data-theme] body .book-call__media { order:2; position:relative; inset:auto; z-index:0; }
  html[data-theme] body .book-call__media::after { content:none; }
  /* Crop to the right part of the photo so she and the icon stay whole. */
  html[data-theme] body .book-call__photo { aspect-ratio:1.15; height:auto; object-position:88% center; }
  html[data-theme] body .book-call__button { justify-self:stretch; }
}

/* Footer newsletter: one wide glass bar under the link columns. Label and
   hint on the left, the field and button in the middle, consent on the right;
   it stacks into a single column on phones. */
html[data-theme] body footer[data-shared-footer] .footer-newsletter:not(#_) {
  display:grid; grid-template-columns:minmax(160px,1fr) minmax(0,1.5fr) minmax(0,1fr); align-items:center; gap:12px clamp(20px,3vw,48px);
  width:100%; max-width:none; margin:clamp(28px,4vw,56px) 0 0; padding:clamp(18px,2vw,28px) clamp(20px,2.6vw,36px)!important;
}
html[data-theme] body footer[data-shared-footer] .footer-newsletter__intro { display:grid; gap:4px; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter__label { margin:0!important; font:var(--fw-display) var(--fs-heading)/1 var(--font-sans)!important; letter-spacing:var(--ls-tight)!important; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter__hint { margin:0; font:var(--fw-strong) 14px/1.4 var(--font-sans); color:rgb(255 255 255 / 70%)!important; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter__row { margin:0!important; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter__consent { margin:0!important; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter .form-status { grid-column:1 / -1; margin:0; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter .form-status:empty { display:none; }
html[data-theme] body footer[data-shared-footer] .footer-newsletter .hidden-field { display:none; }
@media (max-width:899px) {
  html[data-theme] body footer[data-shared-footer] .footer-newsletter:not(#_) { grid-template-columns:minmax(0,1fr); gap:14px; }
}

/* ── Pill labels and footer, second pass (5 Oct 2026) ─────────────────────
   Section labels are outlined pills above the heading (the earlier counter
   row is retired). The footer lead is a compact statement with two solid
   buttons. Layout ideas from naka.framer.website. */
html[data-theme] body :is(.sx__head,.hx__head):not(#_) { padding-top:0!important; display:grid; gap:20px; justify-items:start; counter-increment:none; }
html[data-theme] body :is(.sx__head,.hx__head):not(#_)::before { content:none!important; }
html[data-theme] body .sx__head--center:not(#_) { justify-items:center; text-align:center; }
html[data-theme] body :is(.sx__eyebrow,.hx__eyebrow):not(#_) {
  position:static!important; display:inline-flex!important; width:auto!important; padding:7px 14px!important; border-radius:999px!important;
  box-shadow:inset 0 0 0 1px currentColor; text-align:left; font:500 14px/1 var(--font-sans)!important; letter-spacing:-.01em!important;
}
html[data-theme] body :is(.sx__eyebrow,.hx__eyebrow):not(#_)::before, html[data-theme] body :is(.sx__eyebrow,.hx__eyebrow):not(#_)::after { content:none!important; }
html[data-theme] body :is(.sx__title,.hx__title):not(#_) { margin:0!important; }

html[data-theme] body footer[data-shared-footer] .footer-lead:not(#_) { align-items:end; }
html[data-theme] body footer[data-shared-footer] .footer-lead__line:not(#_) { max-width:18ch; font-size:clamp(30px,3.4vw,48px)!important; }
html[data-theme] body footer[data-shared-footer] .footer-lead .top-wrap:not(#_) { display:flex; flex-wrap:wrap; gap:10px; }
html[data-theme] body footer[data-shared-footer] .footer-lead .button-frame:not(#_) {
  display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:0!important; min-height:52px; padding:14px 24px!important;
  border:0!important; border-radius:14px!important; background:#fff!important; color:#0B0B0B!important; font:600 15px/1 var(--font-sans)!important; letter-spacing:-.01em!important;
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
html[data-theme] body footer[data-shared-footer] .footer-lead .button-frame:not(#_) + .button-frame { background:#1F1F1F!important; color:#fff!important; }
html[data-theme] body footer[data-shared-footer] .footer-lead .button-frame:not(#_)::after { content:none!important; }
html[data-theme] body footer[data-shared-footer] .footer-lead .button-frame:not(#_) span { color:inherit!important; text-transform:none!important; }
html[data-theme] body footer[data-shared-footer] .footer-lead .button-frame:not(#_):hover { transform:translateY(-2px); }
html[data-theme] body footer[data-shared-footer] .footer-newsletter:not(#_) { border-radius:28px!important; }

/* ── Brand accents (5 Oct 2026) ───────────────────────────────────────────
   Black stays primary and white secondary. The six official brand colours are
   accents only: label pills, tags, markers, small dots and hover states.
   Text on an accent is always black (5.6:1 or better on all six).
     Evergreen Leaf #479C73 · Glacial Periwinkle #7EADDB · Toasted Sand #E6D4BE
     Slate Horizon #6DBEC6 · Burnt Terra #D4622C · Marigold Glow #F0C845
   --ac is the accent for the current block: top-level sections cycle through
   the six, and cards in a row take one each. */
:root, :root[data-theme] {
  --brand-leaf:#479C73; --brand-periwinkle:#7EADDB; --brand-sand:#E6D4BE; --brand-slate:#6DBEC6; --brand-terra:#D4622C; --brand-marigold:#F0C845;
  --ac:var(--brand-leaf); --on-accent:#000;
}
main > :nth-child(6n+1), .f-accent-1 { --ac:var(--brand-leaf); }
main > :nth-child(6n+2), .f-accent-2 { --ac:var(--brand-periwinkle); }
main > :nth-child(6n+3), .f-accent-3 { --ac:var(--brand-marigold); }
main > :nth-child(6n+4), .f-accent-4 { --ac:var(--brand-slate); }
main > :nth-child(6n+5), .f-accent-5 { --ac:var(--brand-terra); }
main > :nth-child(6n+6), .f-accent-6 { --ac:var(--brand-sand); }
:is(.sections .section,.aud__item,.cards .card,.hws__item,.system-path__steps > li,.sx-steps__list > li,.footer-col,.pr-blob,.sx-card):nth-child(6n+1) { --ac:var(--brand-leaf); }
:is(.sections .section,.aud__item,.cards .card,.hws__item,.system-path__steps > li,.sx-steps__list > li,.footer-col,.pr-blob,.sx-card):nth-child(6n+2) { --ac:var(--brand-periwinkle); }
:is(.sections .section,.aud__item,.cards .card,.hws__item,.system-path__steps > li,.sx-steps__list > li,.footer-col,.pr-blob,.sx-card):nth-child(6n+3) { --ac:var(--brand-marigold); }
:is(.sections .section,.aud__item,.cards .card,.hws__item,.system-path__steps > li,.sx-steps__list > li,.footer-col,.pr-blob,.sx-card):nth-child(6n+4) { --ac:var(--brand-slate); }
:is(.sections .section,.aud__item,.cards .card,.hws__item,.system-path__steps > li,.sx-steps__list > li,.footer-col,.pr-blob,.sx-card):nth-child(6n+5) { --ac:var(--brand-terra); }
:is(.sections .section,.aud__item,.cards .card,.hws__item,.system-path__steps > li,.sx-steps__list > li,.footer-col,.pr-blob,.sx-card):nth-child(6n+6) { --ac:var(--brand-sand); }

/* Label pills: filled with the block's accent. */
html[data-theme] body:not(#_):not(#__) :is(.sx__eyebrow,.hx__eyebrow,.section-label,._01 > .inner-wrap > .header,._02 .header,._03 > .header,.sections .section > .header,.page-intro .eyebrow,.book-call__eyebrow) {
  display:inline-flex!important; width:auto!important; padding:7px 14px!important; border:0!important; border-radius:999px!important; box-shadow:none!important;
  background:var(--ac)!important; color:var(--on-accent)!important; font:600 13px/1 var(--font-sans)!important; letter-spacing:-.01em!important;
}
html[data-theme] body:not(#_):not(#__) .section-label::after { content:none!important; }
html[data-theme] body:not(#_):not(#__) .section-label { margin-bottom:24px; }
/* Tags and numbered chips. */
html[data-theme] body:not(#_):not(#__) :is(.aud__tag,.hws__tags li:first-child,.cards .card .status span,.sx-plan__flag) { background:var(--ac)!important; color:var(--on-accent)!important; box-shadow:none!important; }
html[data-theme] body:not(#_):not(#__) .cards .card .status span { display:inline-flex; padding:5px 10px; border-radius:999px; }
html[data-theme] body:not(#_):not(#__) :is(.pr-blob--glow,.sx-plan--featured) .sx-plan__flag { background:var(--brand-leaf)!important; }
/* Markers: list points, bullets, footer column dots. */
html[data-theme] body:not(#_):not(#__) .sections .section .text-wrap .list li::before { content:''!important; flex:0 0 8px; width:8px!important; height:8px!important; border-radius:50%; background:var(--ac)!important; }
html[data-theme] body:not(#_):not(#__) .bullet-green::before { background:var(--brand-leaf)!important; }
html[data-theme] body:not(#_):not(#__) .footer-col__head::before { content:none!important; } /* label dots removed (5 Oct) */
html[data-theme] body:not(#_):not(#__) :is(.sx-plan__list,.f-pricing__list) li::before { color:var(--brand-leaf)!important; }
/* Demo panels pick up a faint wash of their accent. */
html[data-theme] body:not(#_):not(#__)[data-page='home'] .sections .section > .lottie-container { background:color-mix(in srgb, var(--ac) 14%, #F7F7F7)!important; }
/* Hover and state colours. */
@media (hover:hover) {
  html[data-theme] body:not(#_):not(#__)[data-page='home'] .system-path__steps.hm-rows > li:hover h3 { color:var(--ac)!important; }
  html[data-theme] body:not(#_):not(#__) :is(button[type='submit'],.auth-submit,.career-submit):not(:disabled):hover { background:var(--brand-leaf)!important; color:#000!important; }
}
html[data-theme] body:not(#_):not(#__) .sx-faq__item[open] .sx-faq__chev { color:var(--brand-terra)!important; }
html[data-theme] body:not(#_):not(#__) :is(.sx-stat__value,.hx-metric__value) em { color:var(--brand-terra)!important; }
html[data-theme] body:not(#_):not(#__) :is(.hc__link,.legal-doc a,.book-call__alt a,.sx-faq__answer a) { text-decoration:underline; text-decoration-color:var(--brand-leaf); text-decoration-thickness:2px; text-underline-offset:4px; }
html[data-theme] body:not(#_):not(#__) .hw__live::before, html[data-theme] body:not(#_):not(#__) .hw__live i { background:var(--brand-leaf)!important; }
html[data-theme] body ::selection { background:var(--brand-marigold); color:#000; }
html[data-theme] body :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible { outline:2px solid var(--brand-leaf)!important; outline-offset:3px; }
html[data-theme] body :is(input,select,textarea) { accent-color:var(--brand-leaf); }

/* ── Tighter corners on the dark glass areas (5 Oct 2026) ──────────────────
   Pricing cards, the Start a project panel and the footer: 6px panels, 4px
   controls, solid form fields. (A hairline hatch was tried here and removed
   at Patrick's request: no shading lines.) */
/* b) Pricing cards; the featured plan gets the reversed, stronger hatch. */
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) #pricing .pr-grid .pr-blob { border-radius:6px!important; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) #pricing :is(.pr-cur__select,.pr-cur__field,.pr-pick,.pr-pick__search,.sx-plan__flag,.pr-plan__cta) { border-radius:4px!important; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) #pricing .pr-blob--glow .sx-plan__flag { border-radius:0!important; }
/* c) Start a project: hatch on the form panel; fields and the button solid. */
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) #start .hc__form { border-radius:4px!important; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) #start .hc__form button[type='submit'] { border-radius:6px!important; }
/* d) Footer: a faint hatch across the band; the newsletter bar is squared off. */
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) footer#site-footer-main.site-footer {
  background:radial-gradient(28% 42% at 90% 72%, rgb(71 156 115 / 38%), transparent 72%), var(--c-ink-soft)!important;
}
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) footer#site-footer-main .footer-newsletter { border-radius:6px!important; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) footer#site-footer-main .footer-newsletter :is(input,button) { border-radius:4px!important; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) footer#site-footer-main .footer-newsletter__row input { background:color-mix(in srgb, var(--c-ink-soft) 93%, #fff)!important; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) footer#site-footer-main .footer-lead .button-frame { border-radius:6px!important; }

/* ── Slanted edges and flat corners (5 Oct 2026) ───────────────────────────
   Large radii are gone: cards, frames and media panels are near-square (4px).
   Kept: pill labels and tags, buttons, the pricing cards and small icon
   tiles. The dark bands, the footer, the CTA banner and the Book a Call card
   slope: the right side sits higher than the left, top and bottom running
   parallel, like the slanted sections on Fuel. */
:root[data-theme='light'] { --slant:clamp(18px,3.4vw,56px); }
/* The Start a project panel, the "Have a problem worth solving?" banner and
   the Get in Touch (Book a Call) card take a gentler slope (Patrick, 5 Oct). */
html[data-theme='light'] body[data-page] :is(#start, .cta-banner, .book-call) { --slant:clamp(6px,1vw,16px); }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) { --nk-r:4px; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) :is(._01 .info-section > .image-wrap, ._02 .experience > .media-wrap, .sections .section > .lottie-container, ._03 .aud__card, ._03 .aud__media, ._03 .aud__media > img, ._03 .aud__media--wg > wg-sector, .hm-drift :is(.hws__frame,.hws__text), .cta-banner__glass, .book-call, .cta-banner) { border-radius:4px!important; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) .sections .section::before { border-radius:4px; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) .wg-host { border-radius:4px; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) :is(.book-call, .cta-banner) { border-radius:0!important; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) :is(.page-section:has(.contact-form-panel),.book-section,.careers-interest,.page-section:has(.js-review-form),.auth-shell) :is(.contact-form-panel,.newsletter-form,.career-form,.js-review-form,.auth-workspace) { border-radius:6px!important; }
/* Slants. Sections keep enough padding that nothing is clipped. */
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___)[data-page='home'] :is(.system-path, #pricing, #start) {
  clip-path:polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
  padding-block:calc(var(--section-y, 96px) + var(--slant))!important;
}
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___)[data-page='home'] #pricing { margin-top:calc(var(--slant) * -1); }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) :is(.book-call, .cta-banner) { clip-path:polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) :is(.book-call, .cta-banner) { margin-block:calc(var(--slant) + 24px)!important; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) footer#site-footer-main.site-footer { clip-path:polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); padding-top:calc(var(--slant) + 48px)!important; }
/* Footer: Start a project was dark on dark; it takes the brand green. */
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) footer[data-shared-footer] .footer-lead .button-frame + .button-frame { background:var(--brand-leaf, #479C73)!important; color:#000!important; }
html[data-theme='light'] body[data-page]:not(#_):not(#__):not(#___) footer[data-shared-footer] .footer-lead .button-frame + .button-frame span { color:#000!important; }
@media (max-width:767px) { :root[data-theme='light'] { --slant:18px; } }

/* ── Soft scroll-in (5 Oct 2026, replaces the diagonal wipe) ──────────────
   Pricing cards and the Start a project panel fade in and rise 16px as they
   scroll into view, on a long, gentle ease-out (1s), once, cards 0.08s apart.
   No clipping. js/design-system.js watches their containers and adds
   .is-wiped (and --wipe-i). Only applies once main.js has added .has-reveal,
   so reduced-motion and no-JS visitors see the cards straight away. */
html.has-reveal[data-theme='light'] body[data-page='home']:not(#_):not(#__):not(#___) :is(#pricing .pr-blob, #start .hc__form)[data-reveal] {
  clip-path:none!important; opacity:0; transform:translate3d(0,16px,0);
  transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1)!important;
  transition-delay:calc(var(--wipe-i, 0) * .08s)!important;
}
html.has-reveal[data-theme='light'] body[data-page='home']:not(#_):not(#__):not(#___) :is(#pricing .pr-blob, #start .hc__form)[data-reveal].is-wiped {
  opacity:1; transform:none;
}

/* ── 6. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 810px) {
  :root, :root[data-theme] { --fs-display-xl:64px; --fs-display-l:44px; --fs-heading:26px; --fs-section:clamp(34px,9vw,44px); --gap-stat:24px; --gutter-x:16px; }
  .f-stats { grid-template-columns:1fr; }
  html[data-theme] body :is(.sx-stats__grid,.hx-metrics__row) { grid-template-columns:1fr!important; }
  html[data-theme] body :is(.sx-steps__list,.aud__grid,.pr-grid,.sx-pricing__grid,.cards) { grid-template-columns:minmax(0,1fr)!important; }
  html[data-theme] body :is(.sx__eyebrow,.hx__eyebrow) { left:72px; right:56px; }
  html[data-theme] body :is(.button-frame,.sx-btn,.hero-action,.pr-plan__cta) { min-width:0; width:100%!important; }
}