/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   Data Report LP — page-wide design language.

   Figma 6JdV8D0ZGECx2whzGAnTrs, frame "Redesign mockup" (6797:2035).

   This page introduces three things the rest of the site does not have, and
   all three are used by SIX sections — hence one page-level stylesheet rather
   than six copies. Every `data-report/*` section imports this file.

   1. A DISPLAY SERIF (`--dr-font-display`) for headlines, stat figures and
      pull quotes. See the font note below — it is not yet hosted.
   2. A YELLOW MARKER HIGHLIGHT (`.dr-mark`) drawn behind phrases inside a
      headline.
   3. A WHITE PAGE GROUND. The rest of the site is cream ground (#F5F0E7)
      with white cards; this LP inverts that — white ground with cream
      (#FAF6F0 = `--secondary`) panels and note cards. Do not "fix" a
      data-report section to `var(--background)`; that is the inversion, not
      a mistake.
   ============================================================ */


/* ---- 1. Display serif ------------------------------------- */

/* Figma specifies "Rowan" (Light 300 + Light Italic) for every headline on
   this page, and the licensed faces are now hosted: the `@font-face` blocks
   live in `src/webfont/fonts.css` alongside II Increments Sans, served as
   .woff2 from `src/webfont/Rowan/`.

   That file is reached from `src/globals.ts`, which `webflow.json` declares
   as the library's `globals` entry — so the face loads in the Webflow
   components, the Vite app (`src/main.tsx`) and Storybook
   (`.storybook/preview.ts`) alike. There is nothing per-component to wire.

   The serif fallbacks below are kept as a genuine fallback (font blocked,
   404, `font-display: swap` before load) — not as a stand-in. */
:host {
  --dr-font-display:
    'Rowan',
    ui-serif,
    Georgia,
    'Iowan Old Style',
    'Times New Roman',
    serif;

  /* 48px / 1.25 — Figma's headline size. The repo scale stops at
     `--font-size-3xl` (30px), so this is page-local rather than a fake
     `--font-size-5xl`. */
  --dr-font-size-display:   3rem;
  --dr-line-height-display: 1.25;

  /* The marker wash: a left-to-right fade, 0.7 → 0.49 alpha, on #E3E96A.
     Figma draws it as an absolutely-positioned rounded rect behind the text;
     here it is a background on the text itself so it reflows. */
  --dr-mark-from: rgba(227, 233, 106, 0.7);
  --dr-mark-to:   rgba(227, 233, 106, 0.49);
}


/* ---- 2. Marker highlight ---------------------------------- */

/* Usage: <mark className="dr-mark">where firms win or lose clients.</mark>

   `box-decoration-break: clone` is what makes a multi-line highlight render
   as one wash per line instead of a single box with the middle lines
   unpainted — without it a phrase that wraps loses its highlight on every
   line but the first. The vertical padding pads the 60px text line box out
   to Figma's 64px rect. */
.dr-mark {
  background:             linear-gradient(90deg, var(--dr-mark-from), var(--dr-mark-to));
  color:                  inherit;
  border-radius:          2px;
  padding:                0.125rem 0;   /* 2px — 60px line box → 64px rect */
  -webkit-box-decoration-break: clone;
  box-decoration-break:   clone;
}


/* ---- 3. Page ground --------------------------------------- */

/* The white ground every data-report section sits on. Named so a section
   reads `background: var(--dr-ground)` and the intent is obvious. */
:host {
  --dr-ground: var(--card);          /* #FFFFFF */
  --dr-panel:  var(--secondary);     /* #FAF6F0 — cream panels + note cards */
}


/* ---- Section rhythm --------------------------------------- */

/* `.hp-section` holds its desktop 128px until 991px, so between 992 and
   1199 two white sections stood 256px apart (and 192 at tablet) — far looser
   than this page's hero and CTA, which already step down. Figma has no frame
   between desktop and 402, so the page steps its white sections down in line
   with those two:

     ≥1200  128   Figma desktop (`.hp-section` as-is)
     ≤1199   96   same step as DataReportCtaSection's `__cta`
     ≤991    80   the hero's and CTA's tablet padding
     ≤767    64   `.hp-section`'s own mobile value, restated because the
                  rules above would otherwise still apply

   Two classes so it beats `.hp-section`'s media rules regardless of which
   stylesheet lands first. A section that needs its own value at a width
   (findings at ≤767) overrides with the same two-class weight. */
@media (max-width: 1199px) {
  .hp-section.dr-section { padding-block: 6rem; }   /* 96px */
}

@media (max-width: 991px) {
  .hp-section.dr-section { padding-block: 5rem; }   /* 80px */
}

@media (max-width: 767px) {
  .hp-section.dr-section { padding-block: 4rem; }   /* 64px */
}


/* ---- Shared display heading ------------------------------- */

/* Every headline on this page is the same face/size/weight; only the copy
   and the highlighted run change. */
.dr-display {
  margin:      0;
  font-family: var(--dr-font-display);
  font-size:   var(--dr-font-size-display);
  line-height: var(--dr-line-height-display);
  font-weight: var(--font-weight-light);   /* 300 — Rowan Light */
  color:       var(--foreground);
}

.dr-display em,
.dr-display .dr-italic {
  font-style: italic;
}

/* Tablet (≤991px) is still the repo's usual proportional reduction — there is
   no tablet frame. Mobile (≤767px) is MEASURED: see
   DataReportPage.mobile.figma.md. Figma's 402px hero headline text node is
   322 x 270 over six lines, i.e. 45px leading, and `.dr-display`'s 1.25 ratio
   puts the face at 36px. The earlier 32px was a guess made before the mobile
   frame existed. */
@media (max-width: 991px) {
  :host { --dr-font-size-display: 2.5rem; }   /* 40px */
}

@media (max-width: 767px) {
  :host { --dr-font-size-display: 2.25rem; }  /* 36px — Figma 6850:13075 */
}


/* ---- Display heading, section size ------------------------ */

/* The section headings (methodology, inside-the-report) are 36px/40px, not
   the hero's 48px. Same face and weight — this is `.hp-heading`'s size in the
   display serif, so it lines up with every other section heading on the site
   while carrying this page's typeface. */
.dr-display--sm {
  font-size:   2.25rem;   /* 36px */
  line-height: 2.5rem;    /* 40px */
}

/* Confirmed against the mobile frame: Figma's 402px section headings
   (methodology 6850:13649, inside 6853:13911) are 338 x 72 over two lines =
   36px leading, and "The full picture" (6853:15100) is a single 36px line. */
@media (max-width: 767px) {
  .dr-display--sm {
    font-size:   1.875rem;  /* 30px — matches .hp-heading's mobile step-down */
    line-height: 2.25rem;   /* 36px */
  }
}


/* ---- Mobile body copy: 18px / 28px ------------------------

   Every body text node on the 402px frame is `--font-size-lg` over
   `--line-height-lg` — ONE step down from the desktop 20px/28px, with the
   leading unchanged. Before the mobile frame existed each section dropped two
   steps to 16px/24px as a guess.

   Both halves of that are easy to get wrong, so here is how it was measured
   rather than inferred — the node heights alone only give the LEADING:

   - Line count. Figma's methodology caveat (6850:13723) is 338 x 112 = four
     28px lines. Rendered in the real II Increments Sans at 338px, that copy
     takes four lines at 16/17/18px and five at 19/20px.
   - Line width. Figma's third line, "that critical first step. Full
     definitions,", measures 282px of ink in the frame; the same string in the
     real face is 269px at 17px, 285px at 18px, 316px at 20px.

   Caveat for anyone re-measuring: the cream panels' background (249,246,239)
   reads as "not white", so a naive non-white ink test inside `.data-report-quote`
   or `.data-report-cta` returns the panel, not the glyphs. Threshold on real
   glyph darkness instead. */


/* ---- Badge pill, inverted --------------------------------- */

/* `.hp-badge` fills with `var(--card)` (white), which works everywhere else
   on the site because sections sit on the cream `--background`. On THIS page
   the ground IS white, so the stock pill is invisible — Figma fills it with
   the cream `#F5F0E7` instead (sampled from the render to confirm; note that
   is `--background`, not the slightly different `--secondary` #FAF6F0 used
   for the panels and note cards).

   Scoped to `.dr-section` rather than overriding `.hp-badge` globally, so
   every other page's badge is untouched. Applies to both the sticky rail
   badge and the inline one. */
.dr-section .hp-badge {
  background: var(--background);
}

/* ============================================================
   DataReportMethodologySection — Figma 6JdV8D0ZGECx2whzGAnTrs, node 6797:2202.
   Spec: DataReportMethodologySection.figma.md.
   ============================================================ */

.data-report-methodology {
  /* White ground — NOT `var(--background)`; this page inverts the site's
     scheme. See ../data-report.css. */
  background: var(--dr-ground);
}

/* The section-header + sticky-badge convention: THIS stack owns the
   header → content gap. `.hp-section`'s own gap separates containers, not the
   header from the content — without this stack the two render flush at 0px.
   See docs/conventions.md. Figma's 64px matches the convention's 4rem. */
.data-report-methodology__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;   /* 64px, flat at every width */
}


/* ---- Headline figures (6797:2215) ------------------------- */

.data-report-methodology__stats {
  display: flex;
  gap:     4rem;          /* 64px */
}

.data-report-methodology__stat {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-4);   /* 16px */
  flex:           1 1 0;
  min-width:      0;
}

/* Figma: 96px, II Increments Sans LIGHT — the SANS face, not this page's
   display serif. Worth stating: every other oversized number on this page is
   serif, so the temptation is to reach for --dr-font-display here. */
.data-report-methodology__figure {
  margin:      0;
  font-family: var(--font-family-default);
  font-size:   6rem;                          /* 96px */
  line-height: normal;                        /* Figma: leading-normal */
  font-weight: var(--font-weight-light);      /* 300 */
  color:       var(--color-brand-blue-700);   /* #186581 */
  white-space: nowrap;
}

/* Figma draws the rule as a 1.5px line node between the figure and its
   caption; a border-top on the caption is the same pixel and one fewer node. */
.data-report-methodology__stat-label {
  margin:      0;
  padding-top: var(--spacing-4);              /* 16px — the line's own gap */
  border-top:  1.5px solid var(--color-brand-blue-700);
  font-size:   var(--font-size-base);         /* 16px */
  line-height: var(--line-height-base);       /* 24px */
  color:       var(--color-brand-blue-700);
}


/* ---- Caveat + definitions (6797:2668) --------------------- */

.data-report-methodology__notes {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);   /* 24px */
}

.data-report-methodology__body {
  margin:      0;
  max-width:   900px;                 /* Figma text-node max-width */
  font-size:   var(--font-size-xl);   /* 20px */
  line-height: var(--line-height-xl); /* 28px */
  color:       var(--foreground);
}

.data-report-methodology__body > strong {
  font-weight: var(--font-weight-bold);
}

/* `align-items: stretch` so both cards match height when one wraps to more
   lines than the other. */
.data-report-methodology__cards {
  display:     flex;
  align-items: stretch;
  gap:         var(--spacing-4);      /* 16px */
}


/* ---- Responsive ------------------------------------------- */

@media (max-width: 991px) {
  .data-report-methodology__stats {
    gap: 2rem;
  }

  .data-report-methodology__figure {
    font-size: 4.5rem;   /* 72px */
  }
}

/* Mobile is MEASURED against Figma CRrdcRif8N6jgEWK28BDb5 node 6850:13643
   — see ../DataReportPage.mobile.figma.md. */
@media (max-width: 767px) {
  /* Figma: heading ends y=2195, the first stat starts 2231. (The same stack
     also carries stats → body at 32px; one flex gap cannot be both, and 4px
     is below the threshold of anything visible.)

     NOTE this is a third value for a stack `docs/conventions.md` specifies as
     `gap: 4rem` flat at every width — it was already 3rem here before the
     mobile frame landed, and 36px is what the frame measures. */
  .data-report-methodology__content {
    gap: 2.25rem;        /* 36px */
  }

  .data-report-methodology__stats,
  .data-report-methodology__cards {
    flex-direction: column;
  }

  /* Each stat hugs its own figure so the rule under it is the width of the
     NUMBER — 258px under "3,252,754", 154px under "4,265" — instead of running
     the full column. `flex: 1 1 0` would stretch them back out. */
  .data-report-methodology__stat {
    flex:  0 0 auto;
    width: fit-content;
  }

  /* 60px, not 56: Figma's figure node is 66px tall and II Increments Sans at
     `line-height: normal` runs ~1.107, so 66 / 1.107 = 60. */
  .data-report-methodology__figure {
    font-size: 3.75rem;  /* 60px */
  }

  /* Figma tightens both sides of the rule from 16px to 12px. */
  .data-report-methodology__stat {
    gap: var(--spacing-3);   /* 12px */
  }

  .data-report-methodology__stat-label {
    padding-top: var(--spacing-3);   /* 12px */
  }

  /* 18px/28px — see ../data-report.css. */
  .data-report-methodology__body {
    font-size:   var(--font-size-lg);
    line-height: var(--line-height-lg);
  }

  .data-report-methodology__notes {
    gap: var(--spacing-8);   /* 32px — Figma body ends y=2839, cards start 2871 */
  }

  /* Cards sit on the frame's 16px MEDIA inset, not the 32px text inset that
     `.container` gives them at this width. */
  .data-report-methodology__cards {
    gap:           var(--spacing-3);   /* 12px */
    margin-inline: -1rem;
  }
}

/* ============================================================
   DataReportNoteCard — Figma "Feature (medium)" (e.g. node 6797:2672).
   ============================================================ */

.data-report-note {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;                 /* Figma spacing-3.5; no 14px token */
  flex:          1 1 0;
  min-width:     0;
  padding:       var(--spacing-6);     /* 24px */
  background:    var(--dr-panel);
  border-radius: 12px;                 /* no 12px radius token — scale is 8/16/24 */
  box-sizing:    border-box;
}

.data-report-note__icon {
  display:     flex;
  flex-shrink: 0;
  width:       24px;
  height:      24px;
  color:       var(--foreground);
}

.data-report-note__text {
  margin:      0;
  font-size:   var(--font-size-base);    /* 16px */
  line-height: var(--line-height-base);  /* 24px */
  color:       var(--foreground);
}

.data-report-note__text > strong {
  font-weight: var(--font-weight-bold);
}