:root {
    --brand: #2d2a26;

    /* surfaces */
    --bg-primary: #faf9f5;
    --bg-secondary: #f5f3ed;
    --bg-inverse: #2d2a26;
    --surface-white: #ffffff;
    --mist: var(--bg-secondary);

    /* neutrals */
    --deep-navy: #1a2020;
    --warm-charcoal: #2d2a26;
    --espresso: #3c3633;
    --stone: #d4d1cc;
    --stone-faint: #e8e5e0;
    --pewter: #b8b3ac;
    --taupe: #6c6966;
    --slate-grey: #6b7c85;

    /* text */
    --text-primary: #1a2020;
    --text-secondary: #3c3633;
    --text-quote: rgba(31,48,49,0.8);

    /* accents */
    --coral: #f06161;
    --burnt-orange: #B05046;
    --forest-green: #2e6b5a;
    --electric-blue: #1d7afc;
    --sky-blue: #85deff;
    --muted-violet: #6a5acd;
    /* valence tints — soft card backgrounds for at-a-glance up/down state */
    --green-tint: #e7efe9;
    --orange-tint: #f6e9e4;

    /* radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* shadows */
    --shadow-button: 0 1px 1px 0 rgba(0,0,0,.10),0 4px 2px 0 rgba(0,0,0,.09),0 10px 3px 0 rgba(0,0,0,.05),0 17px 3.5px 0 rgba(0,0,0,.01),0 27px 4px 0 rgba(0,0,0,.00);

    /* spacing */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px;
    --space-9:72px; --space-10:96px;

    /* typography */
    --font-sans: 'Schibsted Grotesk', sans-serif;
    --font-serif: 'Libre Baskerville', serif;
    --text-large: 18px;
    --text-medium: 16px;
    --text-small: 14px;
    --text-xs: 13px;
    --text-2xs: 12px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-medium);
    line-height: 1.5;
    letter-spacing: -0.02em;
    padding: var(--space-8) var(--space-5);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .page { max-width: 880px; margin: 0 auto; }

  /* ---------- MASTHEAD ---------- */
  .masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-7);
  }
  .masthead-left { display: flex; align-items: baseline; gap: var(--space-4); }
  .logo { font-weight: 600; font-size: 22px; letter-spacing: -0.04em; color: var(--deep-navy); }
  .issue { font-weight: 500; font-size: 12px; color: var(--text-secondary); }
  .date { font-weight: 500; font-size: 12px; color: var(--text-secondary); }

  /* ---------- TITLE BLOCK ---------- */
  .title-block { margin-bottom: var(--space-8); }
  .client-name { font-weight: 500; font-size: 14px; letter-spacing: -0.01em; color: var(--text-secondary); margin-bottom: var(--space-4); }
  h1 { font-weight: 500; font-size: clamp(40px, 5.5vw, 56px); line-height: 1.05; letter-spacing: -0.04em; margin-bottom: var(--space-5); color: var(--deep-navy);text-wrap: pretty; }
  h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.98em; }
  .lede { font-weight: 400; font-size: 18px; line-height: 1.5; letter-spacing: -0.017em; max-width: 640px; color: var(--text-secondary); }

  /* ---------- SECTIONS ---------- */
  .section { margin-bottom: var(--space-8); }
  .section-label { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); }
  .section-num { font-weight: 500; font-size: 12px; color: var(--taupe); }
  .section-title { font-weight: 600; font-size: 22px; letter-spacing: -0.03em; color: var(--deep-navy); }

  /* ---------- UP / DOWN / FLAT ---------- */
  .up { color: var(--forest-green); }
  .down { color: var(--burnt-orange); }
  .flat { color: var(--taupe); }

  /* ---------- CONTENT BLOCK (noticed-grid cards) ---------- */
  .content-block { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 40px; }

  /* ---------- REVENUE GRID ---------- */
  .revenue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .revenue-drivers { grid-column: 1 / -1; margin: 0 0 var(--space-2); font-size: var(--text-medium); color: var(--text-primary); }
  .revenue-card { background: var(--mist); border-radius: var(--radius-md); padding: var(--space-6); }
  .revenue-label { font-weight: 500; font-size: 13px; color: var(--taupe); margin-bottom: var(--space-3); }
  /* Headline numerals only: large hero/headline numbers (~24px+) share the serif
     face. Smaller numbers, table cells, footers, and generated commentary stay
     sans (see docs/design-tokens.md type pairing). Size, weight, and spacing stay
     per-context on each class below. */
  .revenue-stat, .step-number, .show-bench-value {
    font-family: var(--font-serif, serif);
    font-style: italic;
    color: var(--deep-navy);
  }
  .revenue-stat { font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--space-2); }
  .revenue-stat .currency, .h-num .currency { font-size: 0.55em; vertical-align: 0.4em; color: var(--taupe); margin-right: 2px; }

  .revenue-headline { font-weight: 500; font-size: 14px; color: var(--forest-green); margin-bottom: var(--space-5); letter-spacing: -0.01em; }
  .revenue-headline.down { color: var(--burnt-orange); }

  .year-chart { display: block; width: 100%; height: auto; }
  .year-chart .axis-baseline,
  .year-chart .axis-now { stroke: var(--stone); stroke-width: 0.5; fill: none; }
  .year-chart .axis-now { stroke-dasharray: 2 2; }
  .year-chart .line-last { stroke: var(--pewter); stroke-width: 1.5; stroke-dasharray: 3 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .year-chart .line-this { stroke: var(--forest-green); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .year-chart .now-marker { fill: var(--forest-green); }
  .year-chart .label-month { font-size: 10px; fill: var(--taupe); }
  .year-chart .label-now-text { font-size: 9px; fill: var(--taupe); }

  .year-chart-legend { display: flex; gap: 14px; margin-top: var(--space-3); font-size: 12px; color: var(--taupe); letter-spacing: -0.01em; }
  .year-chart-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .year-chart-legend .legend-line-solid { width: 14px; height: 2px; background: var(--forest-green); display: inline-block; }
  .year-chart-legend .legend-line-dashed { width: 14px; border-top: 1.5px dashed var(--pewter); display: inline-block; }

  .revenue-micro { border-top: 1px solid var(--stone); margin-top: var(--space-5); padding-top: var(--space-4); }
  .revenue-micro-stat { font-family: var(--font-sans); color: var(--deep-navy); font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
  .revenue-micro-context { font-weight: 400; font-size: 13px; color: var(--taupe); margin-top: var(--space-1); letter-spacing: -0.01em; }
  .revenue-micro-context.up { color: var(--forest-green); }
  .revenue-micro-context.down { color: var(--burnt-orange); }
  .revenue-label-soft { display: block; font-weight: 400; font-size: 12px; color: var(--text-secondary); margin-top: var(--space-1); letter-spacing: -0.01em; }

  /* ---------- RETENTION GRID ---------- */
  .retention-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
  @media (max-width: 720px) { .retention-grid { grid-template-columns: 1fr; } }
  /* Retention cards are 3-up so the SVG renders ~1:1 with its viewBox —
     chart labels need a CSS bump to stay legible. Revenue cards are 2-up
     and scale the same labels up naturally, so they're scoped out. */
  .retention-grid .year-chart .label-month { font-size: 12px; }
  .retention-grid .year-chart .label-now-text { font-size: 11px; }

  /* ---------- BOOKING FLOW SCORECARD ---------- */
  .scorecard-intro { font-weight: 400; font-size: var(--text-medium); color: var(--text-primary); margin-bottom: var(--space-5); letter-spacing: -0.01em; max-width: 640px; }

  /* Headline outcome row: two equal mist cards leading the section. */
  .outcome-row { display: flex; gap: var(--space-4); margin-bottom: var(--space-5); }
  .headline-stat { flex: 1; background: var(--mist); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
  .h-label { font-weight: 500; font-size: 13px; color: var(--taupe); letter-spacing: -0.01em; }
  .h-line { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
  .h-num { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.04em; color: var(--deep-navy); }
  .h-change { font-weight: 500; font-size: 13px; color: var(--taupe); letter-spacing: -0.01em; }
  .h-change.up { color: var(--forest-green); }
  .h-change.down { color: var(--burnt-orange); }

  /* Step diagnosis: quieter supporting strip, tinted by valence. No outer
     mist shell — cards sit directly on the section background. */
  .steps-label { font-weight: 500; font-size: 13px; color: var(--taupe); letter-spacing: -0.01em; margin: 0 0 var(--space-3); }
  .scorecard { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; }
  .step-card { flex: 1; background: var(--mist); border-radius: var(--radius-md); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); min-width: 0; }
  .step-card.up { background: var(--green-tint); }
  .step-card.down { background: var(--orange-tint); }
  .step-label { font-weight: 500; font-size: 13px; color: var(--taupe); letter-spacing: -0.01em; }
  .step-number { font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.03em; }
  .step-change { font-weight: 500; font-size: 12px; letter-spacing: -0.01em; line-height: 1; }
  .step-sub { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.01em; }

  /* ---------- YOY CHIP (inline prose pill) ---------- */
  .yoy-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); font-weight: 500; font-size: 13px; letter-spacing: -0.01em; white-space: nowrap; vertical-align: baseline; }
  .yoy-chip--up { background: rgba(46, 107, 90, 0.08); color: var(--forest-green); }
  .yoy-chip--down { background: rgba(216, 83, 60, 0.08); color: var(--burnt-orange); }
  .yoy-chip--flat { background: var(--mist); color: var(--taupe); }

  /* ---------- NOTICED GRID ---------- */
  .noticed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .noticed-label { font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 16px; }
  .noticed-label.good { color: var(--forest-green); }
  .noticed-label.watch { color: var(--burnt-orange); }
  .noticed-text { font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: var(--text-quote); }

  /* ---------- TEST CARD ---------- */
  .test-card { border-radius: var(--radius-md); padding: 40px; background: var(--surface-white); }
  .test-tag { font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--forest-green); margin-bottom: 12px; }
  .test-text { font-size: 20px; line-height: 1.5; letter-spacing: -0.02em; margin-bottom: 32px; }
  .test-card-divider { height: 1px; background: var(--stone); margin: 8px 0; }
  .test-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .test-field-label { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--taupe); letter-spacing: -0.01em; margin-bottom: 6px; line-height: 1.4; }
  .test-field-body { font-family: var(--font-sans); font-size: var(--text-small); color: var(--text-secondary); line-height: 1.5; letter-spacing: -0.01em; }
  .approve-btn { display: inline-block; margin-top: 16px; padding: 10px 18px; background: var(--bg-inverse); color: var(--bg-primary); font-family: var(--font-sans); font-size: var(--text-medium); font-weight: 500; letter-spacing: -0.02em; line-height: 1.5; border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow-button); }
  .approve-btn:hover { opacity: 0.9; }

  /* ---------- BUTTON ---------- */
  .btn-primary { display: inline-block; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; text-decoration: none; color: var(--bg-primary); background: var(--bg-inverse); padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-button); cursor: pointer; margin-top: var(--space-6); transition: transform 0.15s ease; }
  .btn-primary.on-dark { background: var(--bg-primary); color: var(--bg-inverse); }
  .btn-primary:hover { transform: translateY(-1px); }

  /* ---------- FOOTER ---------- */
  .footer { margin-top: var(--space-9); padding: var(--space-5); background: var(--mist); border-radius: var(--radius-md); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
  .footer-left { font-family: var(--font-sans); font-size: 16px; color: var(--text-secondary); }
  .footer-right { font-weight: 500; font-size: 12px; color: var(--taupe); }

  /* ---------- CALLOUT BUBBLE ---------- */
  .callout-bubble {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
  }
  /* Two visual states: green for recovery/lift, neutral for steady. */
  .callout-bubble--recovery,
  .callout-bubble--lift     { background: rgba(46, 107, 90, 0.06); }
  .callout-bubble--steady   { background: var(--bg-secondary); }

  .callout-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .callout-pill-icon { font-size: 12px; line-height: 1; }

  .callout-bubble--recovery .callout-pill,
  .callout-bubble--lift     .callout-pill { background: rgba(46, 107, 90, 0.12); color: var(--forest-green); }
  .callout-bubble--steady   .callout-pill { background: rgba(26, 32, 32, 0.06); color: var(--taupe); }

  .callout-body { font-family: var(--font-sans); font-style: normal; font-weight: 400; font-size: 18px; line-height: 1.4; letter-spacing: -0.02em; color: var(--deep-navy);text-wrap:pretty; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 720px) {
    body { padding: var(--space-6) var(--space-4); }
    .revenue-grid { grid-template-columns: 1fr; }
    .outcome-row { flex-direction: column; }
    .scorecard { flex-direction: column; }
    .step-card { flex: 1; }
    .revenue-stat { font-size: 40px; }
    .noticed-grid { grid-template-columns: 1fr; }
    .test-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ---------- PRINT ---------- */
  @media print {
    body { background: #fff; padding: 0; }
    .page { padding: 20px 24px; }
    .section { page-break-inside: avoid; }
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    .footer { display: none !important; }
  }

/* Dashboard nav aliases */
.nav-bar { display: flex; align-items: center; gap: 16px; background: var(--bg-inverse); color: var(--bg-primary); padding: 12px 32px; font-family: var(--font-sans); font-size: 13px; }
.nav-client { font-weight: 600; }
.nav-period { color: rgba(255,255,255,0.7); margin-left: auto; }
main { max-width: 880px; margin: 0 auto; padding: 56px 40px 80px; display: flex; flex-direction: column; gap: 64px; }
.headline { font-family: var(--font-sans); font-size: 60px; line-height: 1; font-weight: 500; letter-spacing: -0.04em; margin-bottom: 24px; }
.headline em { font-family: var(--font-serif); font-style: italic; color: var(--text-primary); }
.subhead { font-size: 18px; line-height: 1.5; letter-spacing: -0.017em; color: var(--text-secondary); max-width: 620px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Show by show */
.show-intro { font-style: italic; max-width: 60ch; }
.show-benchmarks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; background: var(--bg-secondary, #f5f3ed); border-radius: 8px; padding: 1.25rem 1.5rem; margin: 1.25rem 0; }
.show-bench-label { font-size: 0.8rem; color: var(--taupe, #666); }
.show-bench-value { font-size: 1.6rem; font-weight: 700; }
.show-bench-sub { font-size: 0.78rem; color: var(--taupe, #666); }
.show-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--stone, #ddd); margin: 1rem 0 0.5rem; }
.show-tab { background: none; border: none; padding: 0.5rem 0; font: inherit; cursor: pointer; color: var(--taupe, #666); border-bottom: 2px solid transparent; }
.show-tab.active { color: inherit; font-weight: 600; border-bottom-color: currentColor; }
.show-tab-count { font-size: 0.75rem; background: var(--bg-secondary, #eee); border-radius: 999px; padding: 0.1rem 0.5rem; }
.show-tab.active .show-tab-count { background: #1a1a1a; color: #fff; }
.show-head, .show-row { display: grid; grid-template-columns: 2.6fr 1.8fr 0.9fr 0.9fr 0.7fr 1fr; gap: 1rem; align-items: center; padding: 0.9rem 0; }
.show-head { font-size: 0.78rem; color: var(--taupe, #666); border-bottom: 1px solid var(--stone, #ddd); }
.show-head div:nth-child(n+3) { text-align: right; white-space: nowrap; } /* numeric columns: £/perf, Avg ticket, % new, Revenue */
.show-sort { cursor: pointer; user-select: none; }
.show-sort:hover { color: var(--ink, #1a1a1a); }
.show-sort--active { color: var(--ink, #1a1a1a); font-weight: 600; }
.show-sort[aria-sort="ascending"]::after { content: " \25B2"; font-size: 0.7em; }
.show-sort[aria-sort="descending"]::after { content: " \25BC"; font-size: 0.7em; }
.show-sort[aria-sort="none"]::after { content: " \2195"; font-size: 0.7em; opacity: 0.3; }
.show-row { border-bottom: 1px solid var(--stone-faint, #e8e5e0); }
.show-name { font-family: var(--font-sans, sans-serif); font-weight: 600; font-size: var(--text-small); }
.show-dates { font-size: 0.78rem; color: var(--taupe, #666); }
.show-num { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-xs); font-weight: 500; }
.show-num--rev { font-weight: 600; }
.show-read { max-width: 212px; }
.show-read-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.show-read-label { font-size: var(--text-2xs); font-weight: 600; }
.show-read-value { font-size: var(--text-2xs); }
.show-read-value strong { font-weight: 700; }
.show-read--up .show-read-label, .show-read--up .show-read-value { color: var(--forest-green, #1d6b4f); }
.show-read--down .show-read-label, .show-read--down .show-read-value { color: var(--burnt-orange, #b3422f); }
.show-num--perf.show-num--up { color: var(--forest-green, #1d6b4f); }
.show-num--perf.show-num--down { color: var(--burnt-orange, #b3422f); }
.range-dot { width: 100%; height: auto; display: block; margin-top: 0.35rem; }
.range-track { stroke: var(--stone, #ddd); stroke-width: 6; stroke-linecap: round; }
.range-typical { stroke: var(--taupe, #999); stroke-width: 1.5; }
/* SVG strokes are centred on the path, so to fake a 2px outline fully outside
   the dot, the circle's r is 4 (3 + stroke/2): the ring covers 3..5, leaving a
   6px visible dot — same height as the track. */
.range-marker { stroke: var(--bg-primary, #faf9f5); stroke-width: 2; }
.range-marker--up { fill: var(--forest-green, #1d6b4f); }
.range-marker--down { fill: var(--burnt-orange, #b3422f); }
.range-marker--flat { fill: var(--taupe, #999); }
.show-footer { font-size: 0.82rem; color: var(--taupe, #666); }