/* =========================================================================
   wprescue.dev — WP Rescue brand
   Fonts are self-hosted (latin subset) to keep the zero-third-party promise;
   BRAND.md's Google Fonts reference is satisfied locally.
   ========================================================================= */

@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/barlow-400.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: 'Barlow';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/barlow-500.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: 'Barlow Condensed';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/barlow-condensed-500.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: 'Barlow Condensed';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/barlow-condensed-600.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;
}

/* =========================================================================
   IMPORTED VERBATIM from design/brand/tokens.css — keep in sync with that
   file; do not edit this block here.
   ========================================================================= */

/* WP Rescue — design tokens
   Drop this in your global stylesheet and reference the variables everywhere.
   Nothing in the UI should use a hex, font name or radius that is not here. */

:root {
  /* Brand */
  --wpr-steel:      #5980a6;  /* primary accent — the mark, links, primary buttons */
  --wpr-deep:       #1d2d3d;  /* dark ground — headers, card fronts, footers */
  --wpr-ink:        #1d1f20;  /* body copy and headlines (never pure black) */
  --wpr-paper:      #f2f2f3;  /* the page ground */
  --wpr-white:      #ffffff;  /* stock and email only */

  /* Steel ramp — tints, hovers, pressed states */
  --wpr-steel-100: #eef6ff;
  --wpr-steel-200: #d6ebff;
  --wpr-steel-300: #b5d9fd;
  --wpr-steel-400: #94bce3;  /* .dev suffix + links on dark grounds */
  --wpr-steel-500: #749dc4;
  --wpr-steel-600: #597ea3;  /* hover on light ground */
  --wpr-steel-700: #416180;  /* accent-coloured body text (AA on paper) */
  --wpr-steel-800: #2c455d;  /* hairlines on dark grounds */
  --wpr-steel-900: #1d2d3d;

  /* Neutral ramp */
  --wpr-neutral-100: #f5f5f8;
  --wpr-neutral-200: #e7e7ea;
  --wpr-neutral-300: #d4d4d7;  /* the standard hairline on paper */
  --wpr-neutral-400: #b7b7ba;
  --wpr-neutral-500: #98989b;
  --wpr-neutral-600: #7a7a7d;
  --wpr-neutral-700: #5d5d60;  /* secondary text */
  --wpr-neutral-800: #424244;
  --wpr-neutral-900: #2b2b2d;

  /* Type */
  --wpr-font-heading: 'Barlow Condensed', system-ui, sans-serif;
  --wpr-font-body: 'Barlow', system-ui, sans-serif;

  /* Spacing — 4px base */
  --wpr-space-1: 4px;
  --wpr-space-2: 8px;
  --wpr-space-3: 12px;
  --wpr-space-4: 16px;
  --wpr-space-5: 20px;
  --wpr-space-6: 24px;
  --wpr-space-8: 32px;
  --wpr-space-10: 40px;
  --wpr-space-12: 48px;
  --wpr-space-16: 64px;
  --wpr-space-20: 80px;
  --wpr-space-24: 96px;

  /* Geometry — this brand is square. Corners stay sharp. */
  --wpr-radius: 0px;
  --wpr-hairline: 1px solid var(--wpr-neutral-300);
  --wpr-rule: 2px solid var(--wpr-ink);
}

/* Base */
body {
  margin: 0;
  background: var(--wpr-paper);
  color: var(--wpr-ink);
  font-family: var(--wpr-font-body);
  font-size: 17px;
  line-height: 1.6;
}
h1, h2, h3, h4 {
  font-family: var(--wpr-font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
}
h1 { font-size: clamp(40px, 6vw, 76px); }
h2 { font-size: clamp(30px, 4vw, 40px); }
h3 { font-size: 24px; }
a { color: var(--wpr-steel-700); text-decoration: none; }
a:hover { color: var(--wpr-steel); }
:focus-visible { outline: 2px solid var(--wpr-steel); outline-offset: 2px; }
::selection { background: var(--wpr-steel-200); }

/* Eyebrow / label */
.wpr-label {
  font-family: var(--wpr-font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wpr-steel-700);
}

/* Buttons — square, no radius, no gradient */
.wpr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wpr-font-heading);
  font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 13px 24px; border-radius: 0; border: 1px solid transparent;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.wpr-btn-primary { background: var(--wpr-steel); color: #fff; }
.wpr-btn-primary:hover { background: var(--wpr-steel-600); }
.wpr-btn-primary:active { background: var(--wpr-steel-700); }
.wpr-btn-secondary { background: transparent; color: var(--wpr-ink); border-color: var(--wpr-ink); }
.wpr-btn-secondary:hover { background: var(--wpr-steel-100); border-color: var(--wpr-steel); color: var(--wpr-steel-700); }
/* On dark grounds the primary flips to steel-400 with deep text */
.wpr-on-dark .wpr-btn-primary { background: var(--wpr-steel-400); color: var(--wpr-deep); }

/* Blueprint frame — the signature container.
   Transparent, hairline border, four "+" registration marks. */
.wpr-frame { position: relative; border: 1px solid var(--wpr-neutral-300); background: transparent; border-radius: 0; }
.problem, .case, .rates, .guarantees { position: relative; }
.wpr-frame::after,
.problem::after,
.case::after,
.rates::after,
.guarantees::after {
  content: "";
  position: absolute; inset: -5px;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0V9M0 4.5H9' stroke='%23b7b7ba' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0V9M0 4.5H9' stroke='%23b7b7ba' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0V9M0 4.5H9' stroke='%23b7b7ba' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0V9M0 4.5H9' stroke='%23b7b7ba' stroke-width='1'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
}
.wpr-frame::before, .wpr-frame::after,
.wpr-frame > .wpr-corner-b::before, .wpr-frame > .wpr-corner-b::after {
  content: "+"; position: absolute; color: var(--wpr-neutral-400);
  font: 400 14px/1 var(--wpr-font-body); pointer-events: none;
}
.wpr-frame::before { top: -7px; left: -5px; }
.wpr-frame::after { top: -7px; right: -5px; }
.wpr-frame > .wpr-corner-b::before { bottom: -7px; left: -5px; }
.wpr-frame > .wpr-corner-b::after { bottom: -7px; right: -5px; }
/* usage: <div class="wpr-frame">…<span class="wpr-corner-b"></span></div> */


/* =========================================================================
   SITE LAYER — everything below consumes the wpr tokens above.
   ========================================================================= */

:root {
  /* ---- Surfaces: aliases onto brand tokens (max two grounds) ------------- */
  --paper:      var(--wpr-paper);
  --surface:    transparent;          /* cards are line drawings, not fills  */
  --paper-sunk: var(--wpr-neutral-100);
  --ink:        var(--wpr-ink);
  --ink-muted:  var(--wpr-neutral-700);
  --rule:       var(--wpr-neutral-300);
  --rule-soft:  var(--wpr-neutral-200);

  /* ---- Deep Steel ground -------------------------------------------------- */
  --deep:       var(--wpr-deep);
  --deep-2:     var(--wpr-deep);      /* single flat ground: no gradient      */
  --deep-ink:   var(--wpr-paper);
  --deep-mut:   var(--wpr-neutral-400);
  --deep-rule:  var(--wpr-steel-800);

  /* ---- Accent: Rescue Steel ----------------------------------------------- */
  --accent:      var(--wpr-steel);
  --accent-text: var(--wpr-steel-700); /* AA for accent-coloured body text    */
  --accent-ink:  var(--wpr-white);
  --accent-wash: var(--wpr-steel-100);
  --accent-edge: var(--wpr-steel-300);

  /* ---- Type ----------------------------------------------------------------
     Two families only. The old --font-mono alias now resolves to Barlow
     Condensed 500: every former monospace label becomes a brand eyebrow. */
  --font-sans: var(--wpr-font-body);
  --font-mono: var(--wpr-font-heading);

  --t-hero:  clamp(2.6rem, 1.4rem + 5vw, 4.75rem);
  --t-lead:  clamp(1.25rem, 1.02rem + 1.15vw, 1.85rem);
  --t-quote: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  --t-h2:    clamp(1.9rem, 1.4rem + 1.8vw, 2.5rem);
  --t-body:  clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem);
  --t-small: .9375rem;
  --t-label: .8125rem;

  --lh-tight: 0.95;                   /* brand headings: 0.92-1               */
  --lh-snug:  1;
  --lh-prose: 1.6;
  --track-label: .2em;                /* brand eyebrow tracking               */

  /* ---- Space ---------------------------------------------------------------
     Kept: 4px base, same as the brand scale. */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem; --s-9: 6rem;
  --section-y: clamp(2.75rem, 1.7rem + 5.2vw, 5rem);

  --col:     60rem;
  --rail:    12rem;
  --measure: 44rem;
  --gutter:  clamp(1.15rem, .7rem + 2.4vw, 3rem);

  /* ---- Geometry: this brand is square, flat, shadowless. ------------------ */
  --radius:    0;
  --radius-sm: 0;

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

.band--dark {
  --accent:      var(--wpr-steel-400);   /* links/accent on dark grounds      */
  --accent-text: var(--wpr-steel-400);
  --accent-ink:  var(--wpr-deep);
  --accent-wash: rgba(148, 188, 227, .12);
  --accent-edge: var(--wpr-steel-800);
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No overflow-x:hidden here. It computes to `hidden auto`, which makes
     <body> a scroll container and silently disables position:sticky on the
     bar. Overflow is prevented at source instead (min-width:0 grid tracks,
     overflow-wrap on code, the scrolling stack strip). */
}

/* Headings are Barlow Condensed 600 uppercase (brand rule 4). Sentence case
   is allowed below 28px, so smaller heads opt out per component. */
h1, h2, h3 {
  font-family: var(--wpr-font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: var(--lh-tight);
}

:where(a) { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
:where(a:hover) { color: var(--accent); }
:where(strong) { font-weight: 600; color: inherit; }

code {
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--wpr-neutral-100);
  padding: .12em .38em;
  word-break: break-word;
}

:focus-visible { outline: 2px solid var(--wpr-steel); outline-offset: 2px; }
::selection { background: var(--wpr-steel-200); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--s-4); top: -5rem; z-index: 60;
  background: var(--ink); color: #fff;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm);
  font-size: var(--t-small); text-decoration: none;
}
.skip:focus { top: var(--s-4); }

/* =========================================================================
   CONTAINER — one fluid centred column at every width.
   Children are grid items, so a child's own max-width aligns it left
   instead of re-centring it.
   ========================================================================= */

main > section,
.band__inner {
  display: grid;
  grid-template-columns: minmax(0, var(--col));
  justify-content: center;
  padding-inline: var(--gutter);
}

main > section { padding-block: var(--section-y); }
main > section + section { border-top: 1px solid var(--rule-soft); }

/* =========================================================================
   DEEP STEEL BAND — flat, per brand
   ========================================================================= */

.band--dark {
  background: var(--wpr-deep);
  color: var(--deep-ink);
}

.band--dark :where(strong) { color: var(--deep-ink); }

/* =========================================================================
   STICKY BAR
   ========================================================================= */

.bar {
  /* Direct child of <body> so it sticks for the whole document, not just
     while the hero band is on screen. It therefore needs its own accent
     stops — it no longer inherits them from .band--dark. */
  --accent:     var(--wpr-steel-400);
  --accent-ink: var(--wpr-deep);
  position: sticky; top: 0; z-index: 50;
  background: var(--wpr-deep);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease);
}
.bar.is-stuck { border-bottom-color: var(--wpr-steel-800); }

.bar__inner {
  display: flex; align-items: center; gap: var(--s-4);
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin-inline: auto; width: 100%;
  padding-inline: var(--gutter);
  padding-block: .7rem;
  justify-content: space-between;
}

/* Inlined lockup, 28px tall (151px wide, above the 120px brand minimum).
   Below 26rem the full lockup + CTA cannot fit, so the bar shows the mark
   alone: 28px, above the 24px outline-mark minimum. */
.bar__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.bar__logo svg { height: 28px; width: auto; }
.bar__logo svg.bar__logo-lockup { display: block; }
.bar__logo svg.bar__logo-mark { display: none; }
@media (max-width: 26rem) {
  .bar__logo svg.bar__logo-lockup { display: none; }
  .bar__logo svg.bar__logo-mark { display: block; }
}

/* Mobile-first: nav links are hidden by default, revealed when there's room. */
.bar__nav { display: none; }

@media (min-width: 48rem) {
  .bar__nav {
    display: flex; gap: var(--s-5);
    list-style: none; margin: 0 0 0 auto; padding: 0;
  }
  .bar__nav a {
    font-size: var(--t-small); color: var(--deep-mut); text-decoration: none;
    transition: color 160ms var(--ease);
  }
  .bar__nav a:hover { color: var(--deep-ink); }
}

/* =========================================================================
   HERO
   ========================================================================= */

.hero { padding-block: clamp(1.5rem, .9rem + 3.4vw, 3.5rem) clamp(2rem, 1.2rem + 3.6vw, 3.75rem); }

.kicker {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-5);
}

h1 {
  font-size: var(--t-hero);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  max-width: 17ch;
}

.hero__promise {
  font-size: var(--t-lead);
  line-height: var(--lh-snug);
  letter-spacing: -.018em;
  color: var(--deep-mut);
  margin: 0 0 var(--s-4);
  max-width: 32ch;
  text-wrap: pretty;
}
.hero__promise em { font-style: normal; color: var(--deep-ink); font-weight: 500; }

.hero__lede { color: var(--deep-mut); margin: 0 0 var(--s-5); max-width: 56ch; }

/* =========================================================================
   CTAs — full-width on the smallest screens, inline as soon as there's room
   ========================================================================= */

.ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  font-family: var(--wpr-font-heading);
  font-size: 1rem; font-weight: 600; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 0;
  background: var(--accent); color: var(--accent-ink);
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--wpr-steel-600); }
.btn:active { background: var(--wpr-steel-700); }

.btn--ghost {
  background: transparent; color: inherit;
  box-shadow: inset 0 0 0 1px var(--deep-rule);
}
.band--dark .btn:hover { background: var(--wpr-steel-300); }
.band--dark .btn:active { background: var(--wpr-steel-500); }
.band--dark .btn--ghost:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--accent-edge); }

main .btn--ghost {
  color: var(--accent);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}

.btn--sm { width: auto; padding: 9px 16px; font-size: .875rem; white-space: nowrap; }

@media (min-width: 26rem) { .btn { width: auto; } }

.trust {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
}
.trust li {
  font-size: .8125rem; line-height: 1;
  color: var(--deep-mut);
  background: transparent;
  border: 1px solid var(--deep-rule);
  padding: .55rem .85rem;
}

/* Credential strip closing the dark band. On desktop the names spread
   across the full column width, sized to own the line. On narrow screens
   it scrolls rather than wraps, so it stays one confident line. */
.stack { border-top: 1px solid var(--deep-rule); }
.stack__list {
  list-style: none;
  margin: 0;
  padding: var(--s-4) 0 var(--s-5);
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  white-space: nowrap;
}
.stack__list li {
  font-family: var(--wpr-font-heading);
  font-weight: 500;
  font-size: clamp(.8125rem, .66rem + .75vw, 1.125rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--deep-mut);
}
@media (max-width: 48rem) {
  .stack .band__inner { display: block; overflow-x: auto; scrollbar-width: none; }
  .stack .band__inner::-webkit-scrollbar { display: none; }
  .stack__list { justify-content: flex-start; padding-inline: var(--gutter); }
}

/* =========================================================================
   SECTION FURNITURE (light body)
   ========================================================================= */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.section-title {
  font-size: var(--t-h2);
  margin: 0 0 var(--s-4);
  max-width: 20ch;
  text-wrap: balance;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--wpr-ink);
}

.section-lede { color: var(--ink-muted); margin: 0 0 var(--s-6); max-width: 58ch; }
.section-note { color: var(--ink-muted); font-size: var(--t-small); margin: var(--s-5) 0 0; max-width: 56ch; }

section p { margin: 0 0 var(--s-4); }

.list { margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
.list li {
  position: relative; padding-left: var(--s-5);
  margin-bottom: var(--s-4); color: var(--ink-muted);
}
.list li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: .5rem; height: 1px; background: var(--accent);
}
.list li:last-child { margin-bottom: 0; }

/* =========================================================================
   TIER ONE — numbered crisis blocks, soft glam cards
   ========================================================================= */

.problem {
  display: grid;
  gap: var(--s-3);
  background: transparent;
  border: 1px solid var(--wpr-neutral-300);
  padding: clamp(1.25rem, .9rem + 2vw, 2.25rem);
  margin-bottom: var(--s-6);
}
.problem:last-of-type { margin-bottom: 0; }

.problem__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--accent);
  margin: 0;
}

@media (min-width: 48rem) {
  .problem { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 var(--s-5); }
  .problem__n { padding-top: .62em; }
}

.quote {
  font-size: var(--t-quote);
  line-height: var(--lh-snug);
  letter-spacing: -.022em;
  font-weight: 500;
  margin: 0 0 var(--s-4);
  max-width: 21ch;
  text-indent: -.45em;
  text-wrap: pretty;
}
.quote::before { content: "\201C"; color: var(--accent); }
.quote::after  { content: "\201D"; color: var(--accent); }

.problem__body > p { color: var(--ink-muted); max-width: var(--measure); }
.problem__body .list { margin-top: var(--s-5); }

/* =========================================================================
   TIER TWO — flat and sunk. Deliberately quieter: no card, no shadow.
   ========================================================================= */

.quiet { border-top: 1px solid var(--rule); }
.quiet .eyebrow { color: var(--ink-muted); }
.quiet__lede { color: var(--ink-muted); font-size: var(--t-small); margin: 0 0 var(--s-5); max-width: 56ch; }
.list--compact li { font-size: var(--t-small); margin-bottom: var(--s-3); }
.list--compact li::before { background: var(--ink-muted); opacity: .5; }

/* =========================================================================
   PROOF — incident reports
   ========================================================================= */

.case {
  background: transparent;
  border: 1px solid var(--wpr-neutral-300);
  padding: clamp(1.25rem, .9rem + 1.8vw, 1.9rem);
  margin-bottom: var(--s-6);
}
.case:last-of-type { margin-bottom: 0; }

.case__title {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -.012em;
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
  max-width: 40ch;
}

.case dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--s-2); }

.case dt {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}
.case dd { margin: 0 0 var(--s-4); color: var(--ink-muted); font-size: var(--t-small); }
.case dd:last-child { margin-bottom: 0; }

@media (min-width: 42rem) {
  .case dl { grid-template-columns: 5rem minmax(0, 1fr); column-gap: var(--s-5); row-gap: var(--s-4); }
  .case dt { padding-top: .2em; }
  .case dd { margin-bottom: 0; }
}

/* =========================================================================
   RATES
   ========================================================================= */

.rates {
  margin: 0;
  background: transparent;
  border: 1px solid var(--wpr-neutral-300);
}
.rates > div {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s-1) var(--s-5);
  padding: var(--s-4) clamp(1rem, .75rem + 1.2vw, 1.5rem);
  border-bottom: 1px solid var(--rule-soft);
}
.rates > div:last-child { border-bottom: 0; }
.rates dt { font-weight: 500; }
.rates dd {
  margin: 0; color: var(--ink-muted);
  font-family: var(--font-mono); font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 34rem) { .rates dd { text-align: right; } }

/* =========================================================================
   FIRST STEP — deep azure close, bookending the hero
   ========================================================================= */

.final { padding-block: var(--section-y) 0; }
.final h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -.028em;
  font-weight: 600;
  margin: 0 0 var(--s-5);
  max-width: 18ch;
  text-wrap: balance;
}
.final__lede { color: var(--deep-mut); max-width: 54ch; margin: 0 0 var(--s-6); }

/* =========================================================================
   FOOTER
   ========================================================================= */

footer {
  padding-block: var(--s-7) var(--s-7);
  font-size: var(--t-small);
  color: var(--deep-mut);
}

.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 46rem) {
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6) var(--s-7); }
}

.footer__col p { margin: 0; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: var(--s-2); }
.footer__col li:last-child { margin-bottom: 0; }
.footer__col a {
  color: var(--deep-mut);
  text-decoration: none;
  transition: color 160ms var(--ease);
}
.footer__col a:hover { color: var(--deep-ink); text-decoration: underline; text-underline-offset: .18em; }

.footer__name { color: var(--deep-ink); font-weight: 500; margin-bottom: var(--s-3) !important; }
.footer__imprint { line-height: 1.8; font-size: .8125rem; }

.footer__label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-bottom: var(--s-3) !important;
}

.footer__meta {
  margin: var(--s-7) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--deep-rule);
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.8;
}

/* =========================================================================
   LEGAL PAGES — light, one column, quiet
   ========================================================================= */

.legal-page {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--s-7) var(--gutter) var(--s-9);
}
.legal-page__back {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin: 0 0 var(--s-6);
}
.legal-page__back a { color: var(--accent); text-decoration: none; }
.legal-page__back a:hover { text-decoration: underline; }
.legal-page h1 {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -.025em;
  margin: 0 0 var(--s-2);
  max-width: none;
}
.legal-page__date {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--ink-muted);
  margin: 0 0 var(--s-6);
}
.legal-page h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
  margin: var(--s-6) 0 var(--s-3);
}
.legal-page p { color: var(--ink-muted); font-size: var(--t-small); margin: 0 0 var(--s-4); }

/* =========================================================================
   MOTION — enhancement only. Never runs without JS or against user choice.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* =========================================================================
   DESKTOP — editorial rail.
   From 64rem the section label leaves the flow and pins into its own
   left column, so the prose keeps its 44rem measure while the page stops
   reading as one narrow strip. Mobile is untouched.
   ========================================================================= */

@media (min-width: 66rem) {

  /* Content track is derived from --col, never stated independently, so the
     rail layout lines up exactly with the hero and the sticky bar. */
  main > section {
    grid-template-columns:
      var(--rail)
      minmax(0, calc(var(--col) - var(--rail) - var(--s-8)));
    column-gap: var(--s-8);
  }

  main > section > .eyebrow {
    grid-column: 1;
    grid-row: 1 / span 99;
    position: sticky;
    top: 5.5rem;
    align-self: start;
    margin: 0;
    display: block;
    line-height: 1.5;
    text-wrap: balance;
  }
  main > section > .eyebrow::after { display: none; }

  main > section > *:not(.eyebrow) { grid-column: 2; }
}

/* =========================================================================
   REFINEMENTS
   ========================================================================= */

/* The audit is the page's actual product — give its rate row weight. */
.rates > div.is-offer dt { color: var(--wpr-steel-700); font-weight: 600; }
.rates > div.is-offer dd { color: var(--wpr-steel-700); font-weight: 500; }

/* Care-plan scope, so the price is legible without hunting up the page. */
.rates dd.scope {
  flex-basis: 100%;
  margin: var(--s-1) 0 0;
  font-family: var(--font-sans);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-muted);
  text-align: left;
  font-variant-numeric: normal;
}

/* Quote marks hang, but never let the first word collide on narrow screens. */
@media (max-width: 30rem) { .quote { text-indent: 0; } }

/* Long identifiers in the case studies must never widen the page. */
.case code { overflow-wrap: anywhere; }

/* =========================================================================
   HOW IT WORKS — the offer in one glance, directly under the hero.
   ========================================================================= */

.how { padding-block: var(--s-6) !important; background: var(--surface); }
.how + section { border-top: 1px solid var(--rule-soft); }

.how__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
  counter-reset: step;
}

.how__list li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: start;
}

.how__n {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--wpr-steel);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
}

.how__list h3 {
  margin: 0 0 var(--s-1);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.35;
}
.how__list p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-muted);
}

@media (min-width: 40rem) {
  .how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
}

/* =========================================================================
   BENTO — the quieter tier, made scannable without gaining weight.
   Flat and sunk on purpose: no shadow, no lift. Tier one keeps the cards.
   ========================================================================= */

.bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.bento li {
  background: transparent;
  border: 1px solid var(--wpr-neutral-300);
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-muted);
}
.bento strong { display: block; margin-bottom: var(--s-1); color: var(--ink); }

@media (min-width: 46rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__wide { grid-column: 1 / -1; }
}
@media (min-width: 66rem) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento__wide { grid-column: 1 / span 2; }
}

/* =========================================================================
   GUARANTEES — the promise section. Four commitments read better as a
   grid of discrete statements than as one bulleted list.
   ========================================================================= */

.guarantees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;                          /* hairlines are the gap itself */
  background: var(--wpr-neutral-300);
  border: 1px solid var(--wpr-neutral-300);
}

.guarantees li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: start;
  background: var(--wpr-paper);
  padding: var(--s-5);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink);
}

/* Check drawn in CSS: two borders on a rotated box. No icon font. */
.guarantees li::before {
  content: "";
  width: .7rem;
  height: .4rem;
  margin-top: .38em;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  border-bottom-left-radius: 1px;
}

@media (min-width: 46rem) {
  .guarantees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* With an odd number of guarantees, the last tile fills the whole row. */
@media (min-width: 46rem) {
  .guarantees li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* =========================================================================
   TYPED H1 — square caret in the band accent (steel-400 on deep).
   Static without JS; static under prefers-reduced-motion.
   ========================================================================= */

.typed__caret {
  display: inline-block;
  width: .08em;
  height: .74em;
  margin-left: .07em;
  background: var(--accent);
  vertical-align: baseline;
  transform: translateY(.06em);
}
@media (prefers-reduced-motion: no-preference) {
  .typed__caret { animation: wpr-caret 1.1s steps(1) infinite; }
}
@keyframes wpr-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* =========================================================================
   MULTI-PAGE CHROME — mobile menu, page heroes, footer lockup
   ========================================================================= */

/* Page heroes are shorter than the home hero. */
.hero--page { padding-block: clamp(2.5rem, 1.4rem + 4.5vw, 4.5rem); }
.hero--page .hero__promise { margin-bottom: 0; }

/* Current page in the nav */
.bar__nav a[aria-current="page"] { color: var(--deep-ink); border-bottom: 2px solid var(--wpr-steel-400); padding-bottom: 2px; }

/* Mobile menu: <details>, works without JS. Hidden once the inline nav shows. */
.bar__menu { position: relative; }
.bar__menu summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--wpr-font-heading);
  font-size: .875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--deep-mut);
  padding: 9px 12px;
  border: 1px solid var(--wpr-steel-800);
}
.bar__menu summary::-webkit-details-marker { display: none; }
.bar__menu[open] summary { color: var(--deep-ink); border-color: var(--wpr-steel-400); }
.bar__menu ul {
  position: absolute; right: 0; top: calc(100% + 9px);
  min-width: 12rem;
  margin: 0; padding: var(--s-2) 0;
  list-style: none;
  background: var(--wpr-deep);
  border: 1px solid var(--wpr-steel-800);
  z-index: 60;
}
.bar__menu li a {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-small);
  color: var(--deep-mut);
  text-decoration: none;
}
.bar__menu li a:hover,
.bar__menu li a[aria-current="page"] { color: var(--deep-ink); background: rgba(255, 255, 255, .05); }

@media (min-width: 48rem) { .bar__menu { display: none; } }
@media (max-width: 47.99rem) { .bar__nav { display: none; } }

/* Footer lockup sits above the imprint. */
.footer__lockup { margin: 0 0 var(--s-4) !important; }
.footer__lockup svg { height: 24px; width: auto; display: block; }
.footer__lockup a { display: inline-block; }

/* Mobile bar: logo left, menu top right, no CTA button. The Hire us action
   stays one scroll away in the hero and in every final section. */
@media (max-width: 47.99rem) {
  .bar .btn--sm { display: none; }
}

/* Minimal closing CTA on the home: one line and the button, no band. */
.closer p:first-child { color: var(--ink-muted); max-width: 48ch; margin: 0 0 var(--s-5); }