/* ============================================================
   Elevated Tax Strategies — Design Tokens
   Colors, typography, spacing, radius, borders, shadows
   ============================================================ */

/* ---------- Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ============================================================
     COLORS — Brand
     Navy anchors. Gold accents. Parchment canvas.
     Every neutral has a warm undertone. No cold blue-grays.
     ============================================================ */

  /* Core brand */
  --ets-navy: #0a2342; /* Primary. Trust. Vault-feel. */
  --ets-navy-deep: #061731; /* Press states, footers */
  --ets-navy-soft: #1b3560; /* Hover on navy, quiet nav */
  --ets-gold: #e5b13a; /* Premium accent, CTAs, emphasis */
  --ets-gold-deep: #c8952a; /* Hover on gold */
  --ets-gold-soft: #f2cb6e; /* Light gold for hover tints */

  /* Parchment canvas — warm cream family (Claude-adjacent) */
  --ets-parchment: #f5f4ed; /* Default page canvas */
  --ets-parchment-deep: #edebe0; /* Alternate section band */
  --ets-cream: #faf8f2; /* Card surface (above parchment) */
  --ets-ivory: #fffdf7; /* Lightest surface, still warm */
  --ets-white: #ffffff; /* True white — use sparingly */

  /* Warm neutrals (text + borders) */
  --ets-ink: #1a1a1a; /* Headlines on light */
  --ets-graphite: #3a3a38; /* Body text on parchment */
  --ets-stone: #6b6962; /* Secondary text, captions */
  --ets-sand: #a8a396; /* Tertiary / muted */
  --ets-mist: #d9d5c6; /* Dividers, subtle borders */
  --ets-rule: #c9c3b0; /* Section rules, hairlines */

  /* Semantic — reserved, muted; no bright SaaS greens/reds */
  --ets-success: #4a6b3f; /* Olive green, editorial */
  --ets-success-soft: #e8ebdf;
  --ets-warning: #b87333; /* Burnt copper, not orange */
  --ets-warning-soft: #f3e6d4;
  --ets-danger: #8b2e2e; /* Oxblood, not fire-engine */
  --ets-danger-soft: #f0dede;
  --ets-info: #2a4a6b; /* Muted navy-teal */
  --ets-info-soft: #dde4eb;

  /* ============================================================
     SEMANTIC TOKENS — use these in UI code
     ============================================================ */
  --bg-canvas: var(--ets-parchment);
  --bg-canvas-alt: var(--ets-parchment-deep);
  --bg-surface: var(--ets-cream);
  --bg-surface-raised: var(--ets-ivory);
  --bg-inverse: var(--ets-navy);
  --bg-inverse-deep: var(--ets-navy-deep);

  --fg-primary: var(--ets-ink);
  --fg-body: var(--ets-graphite);
  --fg-muted: var(--ets-stone);
  --fg-subtle: var(--ets-sand);
  --fg-on-inverse: var(--ets-ivory);
  --fg-on-inverse-muted: #b8c2d1;
  --fg-accent: var(--ets-gold);
  --fg-link: var(--ets-navy);

  --border-hairline: var(--ets-mist);
  --border-default: var(--ets-rule);
  --border-strong: var(--ets-navy);
  --border-accent: var(--ets-gold);

  /* ============================================================
     TYPOGRAPHY — Archivo (display) / Inter (body) / Fraunces (italic accent) / JetBrains (mono)
     The logo wordmark sets the direction: bold, tight, geometric sans.
     Display = Archivo 700/800, tightly tracked. Italic emphasis = Fraunces italic.
     ============================================================ */
  --font-display:
    "Archivo", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:
    "Fraunces", Georgia, "Times New Roman", serif; /* italic accent only */
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — editorial, generous */
  --fs-display: clamp(48px, 6vw, 96px); /* Hero wordmark headline */
  --fs-h1: clamp(40px, 4.5vw, 64px); /* Page title */
  --fs-h2: clamp(30px, 3vw, 44px); /* Section */
  --fs-h3: 24px; /* Subsection */
  --fs-h4: 19px; /* Card title */
  --fs-lead: 20px; /* Intro paragraph */
  --fs-body: 17px; /* Default body */
  --fs-sm: 15px; /* Secondary */
  --fs-xs: 13px; /* Caption / legal */
  --fs-eyebrow: 12px; /* Tracked label */

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-serif-book: 400; /* Fraunces "book" weight */
  --fw-serif-display: 600; /* Fraunces display weight */

  /* Line heights — serif tight, body comfortable */
  --lh-tight: 1.08; /* Display */
  --lh-heading: 1.15; /* H1-H3 */
  --lh-snug: 1.35; /* Subheads */
  --lh-body: 1.6; /* Body text */
  --lh-loose: 1.75; /* Long-form reading */

  /* Tracking */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body: 0;
  --ls-eyebrow: 0.14em; /* Uppercase labels, widely tracked */
  --ls-button: 0.02em;

  /* ============================================================
     SPACING — 4px base grid, generous
     ============================================================ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  /* ============================================================
     RADIUS — medium, not pillowy
     ============================================================ */
  --r-xs: 3px; /* Pills, badges */
  --r-sm: 6px; /* Inputs, small buttons */
  --r-md: 10px; /* Cards */
  --r-lg: 14px; /* Large surfaces */
  --r-xl: 20px; /* Hero cards */
  --r-full: 999px;

  /* ============================================================
     BORDERS & RING SHADOWS — containment, not elevation
     Use ring shadows instead of drop shadows for the "quiet"
     editorial feel. Stacked rings layer cream + navy tints.
     ============================================================ */
  --ring-hairline: 0 0 0 1px var(--ets-mist);
  --ring-default: 0 0 0 1px var(--ets-rule);
  --ring-accent: 0 0 0 1px var(--ets-gold);
  --ring-navy: 0 0 0 1px var(--ets-navy);

  /* Card ring — warm cream halo + rule line */
  --ring-card: 0 0 0 1px var(--ets-rule), 0 1px 0 0 rgba(10, 35, 66, 0.03);

  /* Raised card — slightly deeper */
  --ring-card-raised:
    0 0 0 1px var(--ets-rule), 0 2px 8px -2px rgba(10, 35, 66, 0.06);

  /* Gold emphasis ring for CTAs / features */
  --ring-emphasis:
    0 0 0 1px var(--ets-gold), 0 0 0 4px rgba(229, 177, 58, 0.15);

  /* Minimal drop shadows — use RARELY, only for floating menus */
  --shadow-menu:
    0 8px 24px -6px rgba(10, 35, 66, 0.18), 0 0 0 1px var(--ets-rule);
  --shadow-modal:
    0 24px 48px -12px rgba(10, 35, 66, 0.25), 0 0 0 1px var(--ets-rule);

  /* ============================================================
     NAVY-TINTED MULTI-LAYER SHADOWS  (synthesis — from Stripe)
     We use Stripe's multi-layer philosophy, but re-color the primary
     layer with OUR navy (not Stripe's slate-blue 50,50,93) so shadows
     feel on-brand. Pair a navy-tinted far shadow with a neutral near
     shadow for depth parallax. Use ONLY on Tax Analysis deliverables,
     dashboard surfaces, and product screenshots — never on editorial
     body text or marketing cards (those stay on ring shadows).
     ============================================================ */
  --shadow-navy-sm:
    0 3px 6px -1px rgba(10, 35, 66, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.04);
  --shadow-navy-md:
    0 15px 35px -8px rgba(10, 35, 66, 0.18), 0 5px 15px -5px rgba(0, 0, 0, 0.06);
  --shadow-navy-lg:
    0 30px 45px -30px rgba(10, 35, 66, 0.3),
    0 18px 36px -18px rgba(0, 0, 0, 0.1);
  --shadow-navy-xl:
    0 40px 60px -20px rgba(10, 35, 66, 0.35),
    0 20px 30px -10px rgba(0, 0, 0, 0.12);

  /* ============================================================
     BINARY SECTION RHYTHM  (synthesis — from Apple + Ferrari)
     Apple's light/dark cadence + Ferrari's chiaroscuro pacing,
     re-voiced for our warm palette. These are SEMANTIC section
     tokens — use them to build the editorial page-turn rhythm.
     "Light chapter" = parchment canvas, navy ink, long-form.
     "Dark chapter" = deep navy, parchment ink, immersive moments.
     Never alternate for its own sake — each section must earn
     its color by story.
     ============================================================ */
  --chapter-light-bg: var(--ets-parchment);
  --chapter-light-fg: var(--ets-ink);
  --chapter-light-muted: var(--ets-graphite);
  --chapter-light-rule: var(--ets-rule);

  --chapter-dark-bg: var(--ets-navy);
  --chapter-dark-fg: var(--ets-parchment);
  --chapter-dark-muted: #b8c2d1;
  --chapter-dark-rule: rgba(245, 244, 237, 0.15);
  --chapter-dark-accent: var(--ets-gold);

  /* Deep chapter — used sparingly, for gravity. Full-bleed moments. */
  --chapter-deep-bg: var(--ets-navy-deep);
  --chapter-deep-fg: var(--ets-parchment);

  /* ============================================================
     GLASS NAV  (synthesis — from Apple, re-warmed)
     Apple's translucent dark nav, but tinted with navy instead
     of pure black so the backdrop feels like the same material
     as the rest of the site.
     ============================================================ */
  --nav-glass-light-bg: rgba(245, 244, 237, 0.82);
  --nav-glass-light-blur: saturate(180%) blur(20px);
  --nav-glass-dark-bg: rgba(10, 35, 66, 0.86);
  --nav-glass-dark-blur: saturate(160%) blur(20px);

  /* ============================================================
     MOTION — restrained, editorial
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   BASE — semantic element styles
   Use `.prose` or these defaults inside content blocks.
   ============================================================ */

html,
body {
  background: var(--bg-canvas);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
.display {
  font-family: var(--font-display);
  color: var(--fg-primary);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  font-weight: 800;
  text-transform: uppercase;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.03em;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.025em;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
}
h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

/* Fraunces italic — the ONE editorial accent. Use for emphasis within display text. */
.italic-accent,
em.accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-body);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-primary);
  font-weight: var(--fw-regular);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.eyebrow--gold {
  color: var(--ets-gold-deep);
}
.eyebrow--navy {
  color: var(--ets-navy);
}

small,
.caption {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}

code,
kbd,
samp,
pre,
.mono,
.tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.mono-fig {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover {
  color: var(--ets-gold-deep);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: var(--s-8) 0;
}

::selection {
  background: var(--ets-gold);
  color: var(--ets-navy);
}

/* Utility helpers used by components */
.surface {
  background: var(--bg-surface);
}
.surface-alt {
  background: var(--bg-canvas-alt);
}
.surface-inverse {
  background: var(--bg-inverse);
  color: var(--fg-on-inverse);
}

.card {
  background: var(--bg-surface);
  border-radius: var(--r-md);
  box-shadow: var(--ring-card);
  padding: var(--s-6);
}

.rule-hair {
  border-top: 1px solid var(--border-hairline);
}
.rule-gold {
  border-top: 1px solid var(--ets-gold);
}
.rule-navy {
  border-top: 1px solid var(--ets-navy);
}

/* ============================================================
   TABULAR FIGURES  (synthesis — from Stripe)
   Stripe's tnum discipline for financial deliverables: every
   dollar figure, multi-year table, or schedule reference must
   have columns that align. Proportional figures for body prose
   so paragraphs don't feel like receipts.
   ============================================================ */
.tnum,
.tax-table,
.tax-table td,
.tax-table th,
.figures,
.money,
.mono-fig,
code,
kbd,
pre {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
}

.onum {
  /* old-style numerals for body prose — text-hugging */
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings:
    "onum" 1,
    "pnum" 1;
}

.frac {
  font-feature-settings: "frac" 1;
}
.sups {
  font-feature-settings: "sups" 1;
}

/* Money formatting — Stripe's tabular discipline, our palette */
.money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.money--negative {
  color: var(--ets-danger);
}
.money--positive {
  color: var(--ets-success);
}
.money--accent {
  color: var(--ets-navy);
  font-weight: 600;
}

/* ============================================================
   CHAPTER SECTIONS  (synthesis — Apple/Ferrari pacing)
   Use as section wrappers to create the editorial page-turn
   rhythm. Never alternate for its own sake.
   ============================================================ */
.chapter {
  padding: clamp(64px, 10vw, 140px) clamp(20px, 4vw, 48px);
}
.chapter > .chapter__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.chapter--light {
  background: var(--chapter-light-bg);
  color: var(--chapter-light-fg);
}
.chapter--dark {
  background: var(--chapter-dark-bg);
  color: var(--chapter-dark-fg);
}
.chapter--dark h1,
.chapter--dark h2,
.chapter--dark h3,
.chapter--dark h4,
.chapter--dark .display {
  color: var(--chapter-dark-fg);
}
.chapter--dark p {
  color: var(--chapter-dark-muted);
}
.chapter--dark .eyebrow {
  color: var(--ets-gold);
}
.chapter--dark hr {
  border-color: var(--chapter-dark-rule);
}
.chapter--dark a {
  color: var(--ets-gold);
}

.chapter--deep {
  background: var(--chapter-deep-bg);
  color: var(--chapter-dark-fg);
}

/* ============================================================
   GLASS NAV HELPER  (Apple, re-warmed)
   ============================================================ */
.nav-glass {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: var(--nav-glass-light-blur);
  -webkit-backdrop-filter: var(--nav-glass-light-blur);
  background: var(--nav-glass-light-bg);
  border-bottom: 1px solid var(--border-hairline);
}
.nav-glass--dark {
  backdrop-filter: var(--nav-glass-dark-blur);
  -webkit-backdrop-filter: var(--nav-glass-dark-blur);
  background: var(--nav-glass-dark-bg);
  border-bottom: 1px solid rgba(245, 244, 237, 0.1);
  color: var(--chapter-dark-fg);
}

/* ============================================================
   PRINT — force color fidelity
   By default, browsers strip background colors and images when
   printing unless the user toggles "Background graphics" / "Print
   backgrounds" in their print dialog. `print-color-adjust: exact`
   tells the browser to honor every fill, gradient, and image
   regardless of the user setting. Without this, ETS deliverables
   (which carry the brand through colored panels and gold accents)
   print as black-and-white outlines and lose the brand entirely.
   Applied universally so every kit benefits without needing its
   own copy. Browsers that don't support the property fall back
   to the legacy "Background graphics" toggle behavior.
   ============================================================ */
@media print {
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important; /* legacy alias */
  }
}

/* ============================================================
   BRAND MARK COMPONENT  (v3 — 2026-06-19)

   The canonical ETS lockup. Replaces the composite logo.svg with
   a submark chip + typed wordmark in Archivo. Scales from favicon
   to billboard via a single font-size on the parent .ets-mark.

   Structure:
     <span class="ets-mark ets-mark--{xs|sm|md|lg|xl}">
       <span class="ets-mark__chip"><span></span></span>
       <span class="ets-mark__word">
         <span class="ets-mark__word-line">Elevated</span>
         <span class="ets-mark__word-line">Tax Strategies</span>
       </span>
     </span>

   Stacked variant uses brand + descriptor structure:
     <span class="ets-mark ets-mark--stacked ets-mark--md">
       <span class="ets-mark__chip"><span></span></span>
       <span class="ets-mark__word">
         <span class="ets-mark__word-brand">Elevated</span>
         <span class="ets-mark__word-descriptor">Tax Strategies</span>
       </span>
     </span>

   Surface modifiers:
     .ets-mark--on-navy   chip inverts to gold square + navy bars
     .ets-mark--on-gold   chip stays navy + gold bars
   ============================================================ */

:root {
  --mark-gap: 0.75em; /* bumped from 0.5em on 2026-05-20 — chip felt cramped against the "E" wordmark */
  --mark-chip-ratio: 1.85; /* calibrated to two-line block height (2 × 0.96 × 1em ≈ 1.9em) */
  --mark-chip-radius: 14%; /* 2026-06-19: aligned to Brand Kit v2 chip corner (was 8%) */
  --mark-tracking: -0.02em; /* title case — was -0.035em for uppercase */
  --mark-chip-optical-y: 0em; /* no optical y-shift needed for two-line treatment */
}

.ets-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--mark-gap);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--mark-tracking);
  line-height: 1;
  color: var(--ets-ink);
  white-space: nowrap;
  text-decoration: none;
}

.ets-mark__chip {
  display: inline-block;
  width: calc(var(--mark-chip-ratio) * 1em);
  height: calc(var(--mark-chip-ratio) * 1em);
  background: var(--ets-navy);
  border-radius: var(--mark-chip-radius);
  position: relative;
  flex-shrink: 0;
  transform: translateY(var(--mark-chip-optical-y));
}
.ets-mark__chip::before,
.ets-mark__chip::after,
.ets-mark__chip > span {
  content: "";
  position: absolute;
  background: var(--ets-gold);
  left: 15%;
  height: 18%;
  border-radius: 8%;
}
.ets-mark__chip::before {
  top: 14%;
  width: 70%;
}
.ets-mark__chip > span {
  top: 41%;
  width: 56%;
  display: block;
}
.ets-mark__chip::after {
  top: 68%;
  width: 70%;
}

.ets-mark__word {
  font-family: var(--font-display);
  font-weight: inherit;
  letter-spacing: var(--mark-tracking);
  font-size: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.06em;
  line-height: 0.96;
}

.ets-mark__word-line {
  display: block;
  white-space: nowrap;
}

/* Surface: navy — gold-outline frame + gold bars (Brand Kit v2 standard, 2026-06-19).
   Replaces the former solid-gold chip so the on-navy mark matches the kit's
   documented inverse. Gold on navy = 6.0:1 (AA large). */
.ets-mark--on-navy {
  color: var(--ets-parchment);
}
.ets-mark--on-navy .ets-mark__chip {
  background: transparent;
  box-shadow: inset 0 0 0 0.085em var(--ets-gold);
}
.ets-mark--on-navy .ets-mark__chip::before,
.ets-mark--on-navy .ets-mark__chip::after,
.ets-mark--on-navy .ets-mark__chip > span {
  background: var(--ets-gold);
}

/* Surface: gold — chip stays navy + gold bars, wordmark navy */
.ets-mark--on-gold {
  color: var(--ets-navy);
}

/* Stacked: brand + descriptor (MD minimum) */
.ets-mark--stacked {
  flex-direction: column;
  gap: 0.55em;
  align-items: center;
}
.ets-mark--stacked .ets-mark__chip {
  width: 1.8em;
  height: 1.8em;
  border-radius: var(--mark-chip-radius);
  transform: none;
}
.ets-mark--stacked .ets-mark__word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22em;
}
.ets-mark--stacked .ets-mark__word-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78em;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ets-ink);
}
.ets-mark--stacked .ets-mark__word-descriptor {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.42em;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--ets-navy);
}
.ets-mark--stacked.ets-mark--on-navy .ets-mark__word-brand {
  color: var(--ets-parchment);
}
.ets-mark--stacked.ets-mark--on-navy .ets-mark__word-descriptor {
  color: var(--ets-parchment);
  opacity: 0.78;
}
.ets-mark--stacked.ets-mark--on-gold .ets-mark__word-brand,
.ets-mark--stacked.ets-mark--on-gold .ets-mark__word-descriptor {
  color: var(--ets-navy);
}

/* Compact: unified proportions, shorter wordmark text ("ETS") */
.ets-mark--compact .ets-mark__word {
  font-weight: 700;
  letter-spacing: var(--mark-tracking);
}

/* Size ladder — optical sizing schedule (700 across all sizes, title case) */
.ets-mark--xs {
  font-size: 14px;
  font-weight: 700;
}
.ets-mark--sm {
  font-size: 18px;
  font-weight: 700;
}
.ets-mark--md {
  font-size: 26px;
  font-weight: 700;
}
.ets-mark--lg {
  font-size: 40px;
  font-weight: 700;
}
.ets-mark--xl {
  font-size: 56px;
  font-weight: 700;
}
.ets-mark--xxl {
  font-size: 80px;
  font-weight: 700;
}

/* Stacked sizes — MD is the minimum (descriptor unreadable below) */
.ets-mark--stacked.ets-mark--md {
  font-size: 44px;
}
.ets-mark--stacked.ets-mark--lg {
  font-size: 64px;
}
.ets-mark--stacked.ets-mark--xl {
  font-size: 80px;
}