/* ── design tokens ──
   *
   * These :root variables are what the AI prompt instructs the model to
   * reference (var(--brand-primary), var(--font-display), …). Without
   * them, every authored slide using the brand palette or the editorial
   * type stack silently falls back to user-agent defaults — which is
   * exactly the "looks like Inter on white" outcome we hit before
   * threading these through. Per-tenant overrides should be appended via
   * the buildDeckSrcdoc({ extraCss }) slot once the brand kit is wired
   * end-to-end; until then, these defaults give the AI's references
   * something real to resolve to.
   *
   * Font choices mirror Claude Design's editorial trio: Fraunces for the
   * display register (italic display numbers, hero headlines), Inter for
   * body and titles, JetBrains Mono for captions and rail labels. The
   * srcdoc / print-doc heads load all three from Google Fonts. */
  :host,
  :root,
  .slide-container {
    --brand-primary: #1f3a8a;
    --brand-secondary: #0f172a;
    --brand-accent: #c8432c;
    --brand-bg: #f7f4ec;
    --brand-surface: #ffffff;
    --brand-text: #0b0b0c;
    --brand-text-muted: rgba(11, 11, 12, 0.65);
    /* Derived per tenant in build-brand-css.ts: a dark surface white type
     * reads on (scrims, section dividers) and an accent readable on it. */
    --brand-ink: #0f172a;
    --brand-on-ink: #ffffff;
    --brand-highlight: #e8765f;
    --font-display: 'Fraunces', 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  /* ── stage primitives ── */
  .slide {
    position: absolute;
    inset: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: #ffffff;
    color: #0b0b0c;
    box-sizing: border-box;
  }
  .slide * { box-sizing: border-box; }

  /* ── media placeholders ──
   *
   * The AI emits <img data-placeholder="image" data-intent="..."> (or
   * <video data-placeholder="video" ...>) when it wants media on a slide
   * but no tenant asset is a good fit. The inspector turns these into
   * interactive "Replace / Generate" slots. On-screen they render as a
   * dashed dropzone with the intent as a hint. When printing we hide the
   * dashed border and intent hint so the PDF has no "TODO" chrome.
   */
  [data-placeholder="image"],
  [data-placeholder="video"] {
    position: relative;
    display: block;
    background: repeating-linear-gradient(
      135deg,
      rgba(10, 44, 90, 0.03) 0 12px,
      rgba(10, 44, 90, 0.06) 12px 24px
    );
    border: 2px dashed rgba(10, 44, 90, 0.35);
    border-radius: 8px;
    min-height: 120px;
    object-fit: cover;
    color: rgba(10, 44, 90, 0.7);
  }
  [data-placeholder="image"]:not([src]),
  [data-placeholder="image"][src=""] {
    object-fit: contain;
  }
  [data-placeholder="image"]::after,
  [data-placeholder="video"]::after {
    /* data-intent surfaced as a readable hint. ::after on a <video> works
       (<video> can have children); on <img> it doesn't render because <img>
       is a void element — inspectors handle <img> hinting via an overlay. */
    content: "Placeholder: " attr(data-intent);
    position: absolute;
    inset: auto 16px 16px 16px;
    font: 600 14px/1.3 Inter, system-ui, sans-serif;
    letter-spacing: 0.02em;
    color: rgba(10, 44, 90, 0.85);
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 6px;
    pointer-events: none;
  }
  @media print {
    [data-placeholder] {
      border: none !important;
      background: rgba(10, 44, 90, 0.05) !important;
    }
    [data-placeholder]::after { display: none !important; }
  }

  /* ── typographic defaults ──
   *
   * Zero-specificity via :where() so any authored text-wrap wins.
   * Balance headings; avoid widows/orphans in body copy. Browsers
   * without text-wrap support drop the declarations harmlessly. */
  :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
  :where(p, li, blockquote, figcaption) { text-wrap: pretty; }

  /* ── print: one slide per page ──
   *
   * Printing is triggered by the host via iframe.contentWindow.print() so
   * only the iframe document prints (not the dashboard chrome). Two things
   * fight us in that flow:
   *   1. "html, body { overflow: hidden }" clips all but the first slide.
   *   2. ".slide { position: absolute; inset: 0 }" stacks every slide at the
   *      same origin, and the shadow DOM hides non-active slides via
   *      visibility/opacity (not display:none) keyed on data-deck-active.
   * The first is fixed here (light DOM). The second is fixed in the shadow
   * DOM CSS (deck-stage.runtime.ts) and by the runtime temporarily marking
   * every slide active for the duration of the print. */
  @page { size: 1920px 1080px; margin: 0; }
  @media print {
    html, body {
      background: white !important;
      overflow: visible !important;
      height: auto !important;
      width: auto !important;
    }
    deck-stage { position: static !important; display: block !important; }
    .slide,
    [data-slide-id] {
      position: relative !important;
      inset: auto !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      width: 1920px !important;
      height: 1080px !important;
      transform: none !important;
      overflow: hidden;
      page-break-after: always;
      break-after: page;
      break-inside: avoid;
      contain: size;
      margin: 0 !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    .slide:last-of-type,
    [data-slide-id]:last-of-type {
      page-break-after: auto;
      break-after: auto;
    }
    /* Skipped slides stay in the DOM for editor/rail but never print. */
    .slide[data-deck-skip],
    [data-slide-id][data-deck-skip] {
      display: none !important;
      page-break-after: auto !important;
      break-after: auto !important;
    }
    /* Jump entrance animations to end state so print never captures mid-fade. */
    *, *::before, *::after {
      animation-delay: -99s !important;
      animation-duration: 0.001s !important;
      animation-iteration-count: 1 !important;
      animation-fill-mode: both !important;
      animation-play-state: running !important;
      transition-duration: 0s !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
  }

  /* ── editorial type system (used by the cover template; safe defaults
        for everything else) ── */
  .slide--cover {
    padding: 96px 120px;
    background: var(--brand-bg);
    color: var(--brand-text);
    font-feature-settings: 'ss01', 'cv11';
  }
  .slide__top-rail,
  .slide__bottom-rail {
    position: absolute;
    left: 120px;
    right: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-text-muted);
    white-space: nowrap;
    /* The model likes to draw its own hairline on the footer with
     * `border-top:1px; padding-top:20px`. Under border-box that padding
     * eats the 28px content height and the rail text is cut in half on
     * every slide (seen on every DBF deck). Content-box lets the rail grow
     * upward around the padding while the text line stays 28px. */
    box-sizing: content-box;
  }
  /* Rail is a SINGLE line. Extra lines clip rather than collide with
   * the hairline (the verifier also flags stacked rails). Two-line
   * kickers belong in .slide__section-marker inside .slide__body. */
  .slide__top-rail {
    top: 56px;
    min-height: 28px;
    max-height: 52px;
    overflow: hidden;
  }
  .slide__bottom-rail {
    bottom: 56px;
    min-height: 28px;
    height: 28px;
    overflow: hidden;
  }
  .slide__rule {
    position: absolute;
    left: 120px;
    right: 120px;
    top: 140px;
    height: 1px;
    background: rgba(11, 11, 12, 0.18);
  }
  /* Source line / footnote slot. Sits in the 84px band between the
   * body inset (bottom: 168px) and the footer rail (top edge 996px), so a
   * "* Source: 2025 edition attendance" line never lands at the top-left
   * of the slide the way an unpositioned <p> outside .slide__body does.
   * Two lines max; anything longer belongs in speaker notes. */
  .slide__footnote {
    position: absolute;
    left: 120px;
    right: 120px;
    bottom: 100px;
    margin: 0;
    max-height: 56px;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--brand-text-muted);
  }
  .slide--section .slide__footnote {
    color: rgba(255, 255, 255, 0.6);
  }
  .slide__eyebrow,
  .slide__year,
  .slide__footer-mark,
  .slide__page-counter {
    font-family: var(--font-mono);
    font-size: inherit;
    line-height: 1;
    letter-spacing: inherit;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .slide__eyebrow {
    max-width: 70%;
    color: var(--brand-primary);
  }
  /* Inverted chapter slides sit on --brand-ink. Primary is often a dark
   * navy — unreadable there. */
  .slide--section .slide__eyebrow {
    color: var(--brand-highlight);
  }
  /* Cover logo lockup — sits where the eyebrow text wordmark normally
   * lives. Sized for the 28px-tall top rail; auto width keeps the
   * aspect ratio. The .slide__brand-mark class is also reusable in
   * any AI-authored slide for top-rail tenant branding. */
  .slide__brand-mark {
    height: 28px;
    width: auto;
    display: inline-block;
    object-fit: contain;
  }
  .slide--section .slide__brand-mark {
    /* Inverted slides (chapter dividers) often need a light/inverted
     * logo. The model can swap to a different src; we just normalize
     * brightness so the stock logo doesn't look out of place against
     * a darker canvas. */
    filter: brightness(0) invert(1) opacity(0.85);
  }
  .slide__body {
    position: absolute;
    left: 120px;
    right: 120px;
    top: 220px;
    bottom: 168px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
    min-height: 0;
    overflow: hidden;
  }
  /* Cover keeps a more generous type stage — the display headline is
   * the page. Body slides sit closer to the hairline so a kicker +
   * headline don't leave a dead band under the rule. */
  .slide--cover .slide__body {
    top: 280px;
    bottom: 200px;
    gap: 56px;
  }
  /* Kicker + headline (or numeral + caption) as one unit so the body
   * gap applies BETWEEN groups, not between the label and its title. */
  .slide__title-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  .slide__title-stack .slide__section-marker { margin: 0; }
  .slide__stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .slide__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 36px;
    min-width: 0;
    overflow: hidden;
  }
  .slide__section-marker {
    margin: 0 0 8px 0;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--brand-text-muted);
  }
  .slide__display {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 168px;
    line-height: 0.96;
    letter-spacing: -0.025em;
    color: var(--brand-text);
    font-feature-settings: 'ss01', 'cv11';
  }
  .slide__display-em {
    font-style: italic;
    color: var(--brand-primary);
  }
  .slide__subhead {
    margin: 0;
    max-width: 1120px;
    font-family: var(--font-body);
    font-size: 28px;
    line-height: 1.4;
    color: rgba(11, 11, 12, 0.72);
  }
  .slide__page-counter {
    font-variant-numeric: tabular-nums;
  }

  /* ── drafting-now cover state ──
   *
   * Seeded by the "building" variant of the cover template when an AI
   * kickoff is about to fire. The markup carries `data-building="true"`
   * on the slide, a `.slide__section-marker--drafting` pulse on the
   * "* Drafting now" tag, and a row of three `.slide__building-dot`
   * elements under the subhead. The AI strips this chrome on its first
   * cover edit (see DESIGN_BLOCK in ai/prompt.ts); if it doesn't, the
   * state simply lingers as a harmless progress indicator — it never
   * interferes with tool-call anchors.
   */
  .slide[data-building="true"] .slide__section-marker--drafting {
    color: var(--brand-primary);
    animation: slide-drafting-marker-pulse 2s ease-in-out infinite;
  }
  .slide__building-indicator {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 8px;
  }
  .slide__building-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--brand-primary);
    opacity: 0.2;
    animation: slide-drafting-dot-pulse 1.4s ease-in-out infinite;
  }
  .slide__building-dot:nth-child(2) { animation-delay: 0.18s; }
  .slide__building-dot:nth-child(3) { animation-delay: 0.36s; }
  @keyframes slide-drafting-dot-pulse {
    0%, 80%, 100% { opacity: 0.2; transform: scale(1); }
    40%           { opacity: 1;   transform: scale(1.35); }
  }
  @keyframes slide-drafting-marker-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
  }
  /* No animation in print / PDF export — a paused PDF with spinner chrome
     is uglier than a clean page. The AI is also expected to have cleared
     these by the time anyone prints. */
  @media print {
    .slide__building-dot,
    .slide[data-building="true"] .slide__section-marker--drafting {
      animation: none !important;
      opacity: 0.5 !important;
      transform: none !important;
    }
  }

  /* ── slide-canvas modifiers ──
   *
   * The cover ships its own layout (.slide--cover). Every other slide
   * the model authors should opt into one of these modifiers so the
   * absolute-positioned chrome (top rail, hairline rule, bottom rail)
   * sits at the same coordinates everywhere in the deck.
   *
   *   - .slide--body     → cream canvas, ink text. The default body slide.
   *   - .slide--section  → inverted ink-on-cream chapter divider; use
   *                        sparingly between major narrative beats.
   *   - .slide--closer   → same canvas as body; convention only — the
   *                        model picks the layout, but using the modifier
   *                        signals "this is the sign-off" to the verifier.
   *
   * The model is free to write any layout markup INSIDE these
   * modifiers. We provide the canvas + the chrome anchors; the
   * composition is the model's job. */
  /* Padding matches the chrome bands so in-flow content (when the
   * model forgets `.slide__body`) still clears the rails instead of
   * painting through the eyebrow and page counter. Absolute chrome
   * ignores padding; absolute `.slide__body` uses its own inset. */
  .slide--body,
  .slide--closer {
    padding: 220px 120px 168px;
    background: var(--brand-bg);
    color: var(--brand-text);
    font-feature-settings: 'ss01', 'cv11';
  }
  .slide--section {
    padding: 220px 120px 168px;
    background: var(--brand-ink);
    color: var(--brand-on-ink);
    font-feature-settings: 'ss01', 'cv11';
  }
  .slide--section .slide__top-rail,
  .slide--section .slide__bottom-rail {
    color: rgba(255, 255, 255, 0.55);
  }
  .slide--section .slide__rule {
    background: rgba(255, 255, 255, 0.18);
  }

  /* Brand-richness escalation rules (eyebrow tint, section-divider
   * canvas swap, etc.) live in build-brand-css.ts and are emitted
   * inline through the extraCss slot when the tenant brand kit is
   * "rich enough" (≥ 3 of primary, accent, heading font URL, primary
   * logo). Sparse kits keep the editorial defaults baked above. */


/* =====================================================================
   SponsorFlo Deck System v2
   One stylesheet for every deck. Slides are 1920x1080. Brand comes from
   the same variables the runtime already sets (--brand-*, --font-*).
   ===================================================================== */
.sfd {
  --m: 120px;              /* side margin (safe area) */
  --top: 172px;            /* content starts below the top rail */
  --bottom: 132px;         /* content ends above the bottom rail */
  --gap: 40px;
  --ink: var(--brand-ink, #0d1626);
  --line: color-mix(in srgb, var(--brand-text) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--brand-text) 28%, transparent);
  --tint: color-mix(in srgb, var(--brand-primary) 7%, var(--brand-bg));
  --em-font: var(--font-display, Georgia, serif);
  width: 1920px; height: 1080px; overflow: hidden; box-sizing: border-box;
  background: var(--brand-bg); color: var(--brand-text); font-family: var(--font-body);
  font-size: 26px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.sfd:not(.slide) { position: relative; }
.sfd *, .sfd *::before, .sfd *::after { box-sizing: border-box; }
.sfd p, .sfd h1, .sfd h2, .sfd h3, .sfd ul, .sfd ol, .sfd figure, .sfd blockquote { margin: 0; padding: 0; }
.sfd ul, .sfd ol { list-style: none; }
.sfd img { display: block; max-width: 100%; }

/* ---------- Surfaces ---------- */
.sfd.is-dark  { --brand-bg-local: var(--ink); background: var(--ink); color: #f4f6f9; --line: rgba(255,255,255,.14); --line-strong: rgba(255,255,255,.3); --muted: rgba(244,246,249,.68); }
.sfd.is-brand { background: var(--brand-primary); color: #fff; --line: rgba(255,255,255,.2); --line-strong: rgba(255,255,255,.4); --muted: rgba(255,255,255,.75); }
.sfd.is-tint  { background: var(--tint); }
.sfd { --muted: var(--brand-text-muted); }
.sfd.is-photo { background: var(--ink); color: #fff; --line: rgba(255,255,255,.2); --muted: rgba(255,255,255,.78); }
.sfd .bg-photo { position: absolute; inset: 0; z-index: 0; }
.sfd .bg-photo img { width: 100%; height: 100%; object-fit: cover; }
.sfd .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,12,22,.92) 0%, rgba(8,12,22,.72) 42%, rgba(8,12,22,.25) 100%), linear-gradient(0deg, rgba(8,12,22,.7) 0%, rgba(8,12,22,0) 40%); }

/* ---------- Rails (same on every slide) ---------- */
.sfd .rail { position: absolute; left: var(--m); right: var(--m); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-family: var(--font-mono); font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sfd .rail--top { top: 56px; height: 52px; border-bottom: 1px solid var(--line); padding-bottom: 18px; height: auto; }
.sfd .rail--bottom { bottom: 48px; }
.sfd .lockup { display: flex; align-items: center; gap: 18px; letter-spacing: .04em; text-transform: none; font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: inherit; }
.sfd.is-dark .lockup, .sfd.is-brand .lockup, .sfd.is-photo .lockup { color: #fff; }
.sfd .lockup img { height: 34px; width: auto; }
.sfd .lockup .x { font-family: var(--font-mono); font-weight: 400; font-size: 18px; opacity: .5; }
.sfd .lockup .partner { opacity: .92; }
.sfd .page { font-variant-numeric: tabular-nums; }

/* ---------- Content frame + grid ---------- */
.sfd .frame { position: absolute; left: var(--m); right: var(--m); top: var(--top); bottom: var(--bottom); z-index: 1; display: grid; gap: var(--gap); align-content: start; }
.sfd .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.sfd .cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.sfd .cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.sfd .split-5-7 { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; }
.sfd .split-7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; }
.sfd .push-bottom { align-self: end; }
.sfd .fill { height: 100%; }

/* ---------- Type ---------- */
.sfd .kicker { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 17px; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-primary); }
.sfd .kicker::before { content: ""; width: 40px; height: 2px; background: currentColor; }
.sfd.is-dark .kicker, .sfd.is-photo .kicker { color: var(--brand-accent); }
.sfd.is-brand .kicker { color: #fff; }
.sfd .display { font-family: var(--font-heading); font-weight: 700; font-size: 128px; line-height: .96; letter-spacing: -.035em; }
.sfd .h1 { font-family: var(--font-heading); font-weight: 700; font-size: 72px; line-height: 1.04; letter-spacing: -.025em; max-width: 22ch; }
.sfd .h2 { font-family: var(--font-heading); font-weight: 650; font-size: 40px; line-height: 1.15; letter-spacing: -.015em; }
.sfd .h3 { font-family: var(--font-heading); font-weight: 650; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; }
.sfd .lead { font-size: 32px; line-height: 1.42; color: var(--muted); max-width: 34ch; }
.sfd .body { font-size: 24px; line-height: 1.5; color: var(--muted); }
.sfd .small { font-size: 20px; line-height: 1.45; color: var(--muted); }
.sfd .label { font-family: var(--font-mono); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sfd em, .sfd .em { font-family: var(--em-font); font-style: italic; font-weight: 400; color: var(--brand-primary); letter-spacing: -.01em; }
.sfd.is-dark em, .sfd.is-photo em { color: var(--brand-accent); }
.sfd.is-brand em { color: var(--brand-accent); }
.sfd .num { font-family: var(--font-heading); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: .95; }

/* ---------- Sources: every number carries one ---------- */
.sfd sup.src { font-family: var(--font-mono); font-size: .32em; font-weight: 500; letter-spacing: 0; vertical-align: super; margin-left: 4px; color: var(--muted); }
.sfd .sources { position: absolute; left: var(--m); right: 420px; bottom: 92px; z-index: 2; font-size: 15px; line-height: 1.4; color: var(--muted); display: flex; gap: 22px; flex-wrap: wrap; }
.sfd .sources span b { font-family: var(--font-mono); font-weight: 500; margin-right: 6px; }
.sfd .estimate { display: inline-block; font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); vertical-align: middle; }

/* ---------- Components ---------- */
.sfd .stat { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 2px solid var(--brand-primary); }
.sfd.is-dark .stat, .sfd.is-photo .stat { border-top-color: var(--brand-accent); }
.sfd.is-brand .stat { border-top-color: #fff; }
.sfd .stat .num { font-size: 88px; }
.sfd .stat .num small { font-size: .5em; letter-spacing: -.01em; }
.sfd .stat p { font-size: 22px; line-height: 1.35; color: var(--muted); max-width: 22ch; }
.sfd .stat--xl .num { font-size: 260px; letter-spacing: -.05em; }
/* stat numbers never break mid-value: the renderer shrinks long ones to fit (zoom) and marks them data-fit */
.sfd .stat .num[data-fit] { white-space: nowrap; }
.sfd .card { background: var(--brand-surface); border-radius: 22px; padding: 40px; display: grid; gap: 16px; align-content: start; }
.sfd.is-dark .card { background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.sfd .point { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.sfd .point:first-child { border-top: 0; padding-top: 0; }
.sfd .point .n { font-family: var(--font-mono); font-size: 18px; color: var(--brand-primary); padding-top: 8px; }
.sfd.is-dark .point .n { color: var(--brand-accent); }
/* fit: the 01/02/03 over each reason. Brand primary on light slides; dark surfaces (and luxe) need the accent. */
.sfd .reason-n { color: var(--brand-primary); }
.sfd.is-dark .reason-n { color: var(--brand-accent); }
.sfd .point .h3 { margin-bottom: 8px; }
.sfd .photo { position: relative; border-radius: 22px; overflow: hidden; background: color-mix(in srgb, var(--brand-text) 8%, var(--brand-bg)); }
.sfd .photo img { width: 100%; height: 100%; object-fit: cover; }
.sfd .photo figcaption { position: absolute; left: 20px; bottom: 20px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(8,12,22,.66); padding: 7px 12px; border-radius: 999px; }
.sfd .photo .mock-tag { position: absolute; right: 20px; top: 20px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--brand-accent); padding: 7px 12px; border-radius: 999px; }
/* An empty image slot looks intentional, never broken */
/* An empty photo slot in HTML rendered before the photo-free variants (render.ts img()): never shown. */
.sfd .photo.is-empty { display: none; }

.sfd .asset { display: grid; gap: 22px; align-content: start; }
.sfd .asset .photo { aspect-ratio: 4 / 3; }
.sfd .asset .meta { display: flex; gap: 14px; flex-wrap: wrap; }
.sfd .chip { font-family: var(--font-mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--tint); color: var(--brand-primary); }
.sfd.is-dark .chip { background: rgba(255,255,255,.08); color: var(--brand-accent); }

.sfd .tier { border-radius: 24px; padding: 40px 38px 36px; background: var(--brand-surface); display: grid; gap: 18px; align-content: start; position: relative; }
.sfd .tier.is-featured { background: var(--ink); color: #fff; --muted: rgba(255,255,255,.72); --line: rgba(255,255,255,.16); transform: translateY(-24px); box-shadow: 0 40px 80px -40px rgba(8,12,22,.55); }
.sfd .tier .flag { position: absolute; top: -18px; left: 40px; font-family: var(--font-mono); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; background: var(--brand-accent); color: var(--ink); padding: 8px 14px; border-radius: 999px; }
.sfd .tier .price { font-family: var(--font-heading); font-weight: 700; font-size: 64px; letter-spacing: -.03em; line-height: 1; }
.sfd .tier .price small { font-size: 22px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.sfd .tier ul { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.sfd .tier li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 21px; line-height: 1.35; }
.sfd .tier li::before { content: ""; width: 10px; height: 10px; margin-top: 10px; border-radius: 50%; background: var(--brand-primary); }
.sfd .tier.is-featured li::before { background: var(--brand-accent); }
.sfd .tier .best { font-size: 19px; color: var(--muted); }

.sfd .timeline { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; padding-top: 48px; }
.sfd .timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line-strong); }
.sfd .tl { position: relative; display: grid; gap: 10px; align-content: start; }
.sfd .tl::before { content: ""; position: absolute; top: -46px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-bg); border: 3px solid var(--brand-primary); }
.sfd .tl.is-key::before { background: var(--brand-primary); box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-primary) 18%, transparent); }
.sfd .tl .when { font-family: var(--font-mono); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-primary); }

.sfd .quote { font-family: var(--em-font); font-style: italic; font-size: 44px; line-height: 1.25; letter-spacing: -.01em; }
.sfd .quote-by { margin-top: 24px; font-family: var(--font-mono); font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.sfd .bars { display: grid; gap: 18px; }
.sfd .bar { display: grid; grid-template-columns: 240px minmax(0, 1fr) 120px; gap: 20px; align-items: center; font-size: 21px; }
.sfd .bar .track { height: 16px; border-radius: 8px; background: color-mix(in srgb, var(--brand-text) 8%, transparent); overflow: hidden; }
.sfd .bar .track i { display: block; height: 100%; border-radius: 8px; background: var(--brand-primary); }
.sfd .bar .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Chart layout: an SVG drawn from the spec (chart.ts). Plain fills, no color-mix(). ---------- */
.sfd .chart-slide { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
.sfd .chart-slide[data-kind="column"] { grid-template-rows: auto minmax(0, 1fr); gap: 48px; }
.sfd .chart { --chart-a: var(--brand-primary); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 24px; min-height: 0; min-width: 0; color: inherit; }
.sfd .chart-svg { display: block; width: 100%; height: 100%; min-height: 0; }
.sfd .chart text { font-family: var(--font-body); }
.sfd .chart .c-cat { fill: var(--muted); }
.sfd .chart .c-cat.is-hl { fill: currentColor; font-weight: 700; }
.sfd .chart .c-val { fill: currentColor; font-family: var(--font-heading); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.sfd .chart .c-base { stroke: currentColor; stroke-opacity: .28; stroke-width: 2; }
.sfd .chart .c-bar.is-a { fill: var(--chart-a); }
.sfd .chart .c-bar.is-b { fill: currentColor; fill-opacity: .3; }
.sfd .chart .c-bar.is-muted { fill: currentColor; fill-opacity: .16; }
.sfd .chart[data-series="2"][data-highlight] .c-bar:not(.is-hl) { opacity: .5; }
.sfd .chart .c-track { fill: none; stroke: currentColor; stroke-opacity: .06; stroke-width: 60; }
.sfd .chart .c-seg { fill: none; stroke-width: 60; }
.sfd .chart .c-seg.is-a { stroke: var(--chart-a); }
.sfd .chart .c-seg.is-muted { stroke: currentColor; stroke-opacity: .18; }
.sfd .chart .sl-1 { opacity: .76; } .sfd .chart .sl-2 { opacity: .56; } .sfd .chart .sl-3 { opacity: .4; } .sfd .chart .sl-4 { opacity: .27; } .sfd .chart .sl-5 { opacity: .17; }
.sfd .chart .sw { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 4px; background: var(--chart-a); }
.sfd .chart .sw.is-b { background: currentColor; opacity: .3; }
.sfd .chart .sw.is-muted { background: currentColor; opacity: .18; }
.sfd .chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; font-size: 21px; font-weight: 600; }
.sfd .chart-legend > span { display: inline-flex; align-items: center; gap: 12px; }
.sfd .chart-legend sup.src { font-size: 14px; margin-left: -24px; }
.sfd .chart-caption sup.src { font-size: 13px; }
.sfd .chart-donut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; min-height: 0; }
.sfd .chart-donut .chart-svg { max-height: 520px; }
.sfd .chart-slices { display: grid; gap: 14px; align-content: center; }
.sfd .chart-slices li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 22px; line-height: 1.3; }
.sfd .chart-slices li:last-child { border-bottom: 0; padding-bottom: 0; }
.sfd .chart-slices .nm { color: var(--muted); }
.sfd .chart-slices li.is-hl .nm { color: inherit; font-weight: 700; }
.sfd .chart-slices .v { font-family: var(--font-heading); font-weight: 700; font-size: 28px; font-variant-numeric: lining-nums tabular-nums; }
.sfd .chart-takeaway { font-family: var(--font-heading); font-weight: 650; font-size: 30px; line-height: 1.25; letter-spacing: -.01em; padding-left: 22px; border-left: 4px solid var(--brand-primary); }

.sfd .contact { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 28px; align-items: center; }
.sfd .avatar { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--brand-accent); color: var(--ink); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 40px; }

/* ---------- Building state (while the AI drafts) ---------- */
.sfd .shimmer { border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-text) 7%, transparent) 0%, color-mix(in srgb, var(--brand-text) 13%, transparent) 50%, color-mix(in srgb, var(--brand-text) 7%, transparent) 100%); background-size: 200% 100%; animation: sfdShimmer 1.4s ease-in-out infinite; }
.sfd .display[data-fit="2"] { zoom: .88; }
.sfd .display[data-fit="3"] { zoom: .78; }
.sfd .tiers[data-dense] .tier { gap: 14px; padding-top: 34px; padding-bottom: 30px; }
.sfd .tiers[data-dense] .tier ul { gap: 8px; padding-top: 16px; }
@keyframes sfdShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sfd .shimmer { animation: none; } }

/* =====================================================================
   Automatic variants: layouts adapt to how many items the data has.
   The generator passes N items; data-count picks the arrangement.
   ===================================================================== */
.sfd .stats { display: grid; gap: 32px; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.sfd .stats[data-count="2"] { --n: 2; } .sfd .stats[data-count="3"] { --n: 3; } .sfd .stats[data-count="4"] { --n: 4; }

.sfd .assets { display: grid; gap: 40px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); align-self: end; }
.sfd .assets[data-count="2"] { --n: 2; gap: 56px; }
.sfd .assets[data-count="2"] .photo { aspect-ratio: 16 / 9; }
.sfd .assets[data-count="3"] .photo { aspect-ratio: 16 / 10; }
.sfd .assets[data-count="4"] { --n: 4; gap: 28px; }
.sfd .assets[data-count="4"] .photo { aspect-ratio: 4 / 3; }
.sfd .assets[data-count="4"] .h2 { font-size: 30px; }
.sfd .assets[data-count="4"] .body { font-size: 20px; }
.sfd .assets[data-count="6"] { --n: 3; gap: 28px 32px; }
.sfd .assets[data-count="6"] .asset { gap: 14px; }
.sfd .assets[data-count="6"] .photo { aspect-ratio: auto; height: 196px; }
.sfd .assets[data-count="6"] .h2 { font-size: 26px; }
.sfd .assets[data-count="6"] .meta .chip:nth-child(n+2) { display: none; }
.sfd .asset-text { display: grid; gap: 8px; }

.sfd .tiers { display: grid; gap: 32px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin-top: 44px; align-items: start; }
.sfd .tiers[data-count="2"] { --n: 2; gap: 48px; max-width: 1360px; }
.sfd .tiers[data-count="4"] { --n: 4; gap: 24px; }
.sfd .tiers[data-count="4"] .tier { padding: 36px 28px 30px; gap: 14px; }
.sfd .tiers[data-count="4"] .price { font-size: 50px; }
.sfd .tiers[data-count="4"] .h2 { font-size: 32px; }
.sfd .tiers[data-count="4"] li { font-size: 19px; }
.sfd .tiers[data-count="4"] .best { font-size: 17px; }
.sfd .tier--single { margin-top: 56px; transform: none; display: grid; grid-template-columns: 5fr 7fr; gap: 72px; padding: 56px 64px; }
.sfd .tier--single .price { font-size: 96px; }
.sfd .tier--single ul.two-col { border-top: 0; padding-top: 0; border-left: 1px solid var(--line); padding-left: 56px; grid-template-columns: 1fr 1fr; gap: 18px 40px; align-content: center; }
.sfd .tier--single li { font-size: 24px; }

.sfd .timeline[data-count="5"] .h3, .sfd .timeline[data-count="5"] .h2 { font-size: 27px; }
.sfd .timeline[data-count="6"] .h3, .sfd .timeline[data-count="6"] .h2 { font-size: 25px; }
.sfd .timeline[data-count="6"] .small, .sfd .timeline[data-count="6"] .body { font-size: 18px; }
.sfd .timeline[data-count="3"] { gap: 64px; }
.sfd .timeline[data-count="3"] .h3 { font-size: 36px; }
.sfd .timeline[data-count="3"] .small { font-size: 22px; }

/* =====================================================================
   Look: Sport. Same layouts and data, different personality:
   condensed caps headlines, oversized numbers, team-color stripe,
   squared corners, punchier photos. Set data-look="sport" on the deck.
   ===================================================================== */
.sfd[data-look="sport"] { --font-heading: var(--font-sport, "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif); --em-font: var(--font-heading); }
.sfd[data-look="sport"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: 3; background: linear-gradient(90deg, var(--brand-primary) 0 72%, var(--brand-accent) 72% 100%); }
.sfd[data-look="sport"] .display, .sfd[data-look="sport"] .h1, .sfd[data-look="sport"] .h2, .sfd[data-look="sport"] .h3 { text-transform: uppercase; font-weight: 800; letter-spacing: -.005em; }
.sfd[data-look="sport"] .display { font-size: 168px; line-height: .86; }
.sfd[data-look="sport"] .h1 { font-size: 104px; line-height: .9; max-width: 20ch; }
.sfd[data-look="sport"] .h2 { font-size: 46px; line-height: 1; }
.sfd[data-look="sport"] .h3 { font-size: 34px; line-height: 1.02; font-weight: 700; }
.sfd[data-look="sport"] em, .sfd[data-look="sport"] .em { font-family: var(--font-heading); font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--brand-primary); }
.sfd[data-look="sport"].is-dark em, .sfd[data-look="sport"].is-photo em, .sfd[data-look="sport"].is-brand em { color: var(--brand-accent); }
.sfd[data-look="sport"] .kicker { justify-self: start; width: max-content; color: #fff; background: var(--brand-primary); padding: 7px 18px 6px; font-weight: 700; letter-spacing: .16em; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.sfd[data-look="sport"] .kicker::before { display: none; }
.sfd[data-look="sport"].is-dark .kicker, .sfd[data-look="sport"].is-photo .kicker, .sfd[data-look="sport"].is-brand .kicker { background: var(--brand-accent); color: var(--ink); }
.sfd[data-look="sport"] .num { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.01em; }
.sfd[data-look="sport"] .stat { border-top-width: 6px; }
.sfd[data-look="sport"] .stat .num { font-size: 120px; }
.sfd[data-look="sport"] .stat--xl .num { font-size: 340px; line-height: .82; }
.sfd[data-look="sport"] .stats[data-count="4"] .num { font-size: 96px; }
.sfd[data-look="sport"] .card, .sfd[data-look="sport"] .tier, .sfd[data-look="sport"] .photo { border-radius: 6px; }
.sfd[data-look="sport"] .photo img { filter: contrast(1.08) saturate(1.12); }
.sfd[data-look="sport"] .tier .price { font-family: var(--font-heading); font-weight: 800; font-size: 84px; }
.sfd[data-look="sport"] .tiers[data-count="4"] .price { font-size: 64px; }
.sfd[data-look="sport"] .tier.is-featured { box-shadow: inset 0 8px 0 var(--brand-accent), 0 40px 80px -40px rgba(8,12,22,.55); }
.sfd[data-look="sport"] .tier .flag { border-radius: 0; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.sfd[data-look="sport"] .timeline::before { height: 6px; top: 8px; background: var(--brand-primary); }
.sfd[data-look="sport"] .tl::before { border-radius: 2px; transform: rotate(45deg); width: 20px; height: 20px; top: -48px; border-width: 4px; }
.sfd[data-look="sport"] .tl .when { font-weight: 700; }
.sfd[data-look="sport"] .lockup { font-family: var(--font-heading); text-transform: uppercase; font-size: 24px; letter-spacing: .04em; }
.sfd[data-look="sport"] .quote { font-family: var(--font-heading); font-style: normal; text-transform: uppercase; font-weight: 700; font-size: 52px; line-height: 1.02; }
.sfd[data-look="sport"].is-brand { background: linear-gradient(105deg, var(--brand-primary) 0 62%, color-mix(in srgb, var(--brand-primary) 82%, #000) 62% 100%); }
.sfd[data-look="sport"].is-brand .num { color: transparent !important; -webkit-text-stroke: 4px var(--brand-accent); }
.sfd[data-look="sport"] .bg-photo::after { background: linear-gradient(100deg, rgba(8,12,22,.94) 0%, rgba(8,12,22,.8) 46%, rgba(8,12,22,.2) 46.2%, rgba(8,12,22,.15) 100%), linear-gradient(0deg, rgba(8,12,22,.75) 0%, rgba(8,12,22,0) 45%); }
.sfd[data-look="sport"] .chip { border-radius: 2px; font-weight: 700; }
.sfd[data-look="sport"] .bar .track, .sfd[data-look="sport"] .bar .track i { border-radius: 0; }
.sfd[data-look="sport"] .chart .c-bar { rx: 0; }
.sfd[data-look="sport"] .chart .c-val { font-weight: 800; }
.sfd[data-look="sport"] .chart .sw { border-radius: 0; }
.sfd[data-look="sport"] .chart-legend { font-family: var(--font-heading); text-transform: uppercase; font-size: 24px; letter-spacing: .02em; }
.sfd[data-look="sport"] .chart-takeaway { text-transform: uppercase; font-weight: 800; font-size: 34px; line-height: 1.05; border-left-width: 8px; }

/* fixes: numbers keep the text color inside stats; sizes that keep variants inside the safe area */
.sfd .stat p.num { color: inherit; max-width: none; }
.sfd[data-look="sport"] .stat p.num { color: var(--brand-primary); }
.sfd[data-look="sport"].is-dark .stat p.num, .sfd[data-look="sport"].is-photo .stat p.num { color: var(--brand-accent); }
.sfd[data-look="sport"].is-brand .stat p.num { color: #fff; }
.sfd[data-look="sport"] .h1 { font-size: 96px; }
.sfd[data-look="sport"] .tier .price { font-size: 72px; }
.sfd[data-look="sport"] .tier .h2 { font-size: 40px; }
.sfd[data-look="sport"] .tiers { margin-top: 36px; }
.sfd[data-look="sport"] .tier li { font-size: 20px; }
.sfd .assets[data-count="2"] .photo { aspect-ratio: auto; height: 380px; }
.sfd .assets[data-count="6"] .photo { height: 150px; }
.sfd[data-look="sport"] .assets[data-count="2"] .photo { height: 330px; }
.sfd[data-look="sport"] .assets[data-count="6"] .photo { height: 128px; }
.sfd[data-look="sport"] .assets .h2 { font-size: 34px; }
.sfd[data-look="sport"] .assets[data-count="6"] .h2 { font-size: 28px; }

/* six assets: horizontal cards, photo beside the name */
.sfd .assets[data-count="6"] .asset { grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 22px; row-gap: 10px; align-items: start; }
.sfd .assets[data-count="6"] .photo, .sfd[data-look="sport"] .assets[data-count="6"] .photo { grid-row: 1 / span 2; height: auto; aspect-ratio: 4 / 3; }
.sfd .assets[data-count="6"] .asset-text { align-self: end; }
.sfd .assets[data-count="6"] .meta { align-self: start; }
.sfd .assets[data-count="6"] .photo .mock-tag { top: 10px; right: 10px; font-size: 11px; padding: 4px 8px; }
.sfd .assets[data-count="6"] { row-gap: 36px; }
/* one package: fill the slide */
.sfd .tier--single { min-height: 470px; align-items: center; }
.sfd .tier--single .h2 { font-size: 56px; }
.sfd .tier--single .price { font-size: 120px; }
.sfd[data-look="sport"] .tier--single .price { font-size: 140px; }
.sfd .tiers[data-count="2"] { max-width: none; }
.sfd .assets[data-count="6"] .asset { grid-template-columns: 300px minmax(0, 1fr); }
.sfd .assets[data-count="6"] { row-gap: 32px; }
.sfd[data-look="sport"] .assets[data-count="6"] .asset { grid-template-columns: 280px minmax(0, 1fr); }

/* glass card on photo slides (closer contact card) */
.sfd .card--glass { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); color: #fff; }
.sfd .card-strong { color: inherit; }
.sfd.is-photo .label { color: rgba(255,255,255,.6); }

/* =====================================================================
   Look: Corporate. Quiet and data-first: one sans family, lighter
   weights, light surfaces throughout, hairline rules, square-ish corners.
   For brand-side decks and finance or B2B sponsors.
   ===================================================================== */
.sfd[data-look="corporate"] { --em-font: var(--font-heading); }
.sfd[data-look="corporate"] .display, .sfd[data-look="corporate"] .h1, .sfd[data-look="corporate"] .h2, .sfd[data-look="corporate"] .h3 { font-weight: 600; letter-spacing: -.02em; }
.sfd[data-look="corporate"] .display { font-size: 104px; line-height: 1; }
.sfd[data-look="corporate"] .h1 { font-size: 64px; line-height: 1.08; }
.sfd[data-look="corporate"] em, .sfd[data-look="corporate"] .em { font-family: var(--font-heading); font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--brand-primary); }
.sfd[data-look="corporate"] .kicker { font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: .12em; gap: 12px; }
.sfd[data-look="corporate"] .kicker::before { width: 10px; height: 10px; background: var(--brand-primary); }
.sfd[data-look="corporate"] .rail { font-family: var(--font-body); font-size: 14px; letter-spacing: .1em; }
.sfd[data-look="corporate"] .num { font-weight: 600; letter-spacing: -.02em; }
.sfd[data-look="corporate"] .stat { border-top: 1px solid var(--line-strong); padding-top: 24px; }
.sfd[data-look="corporate"] .stat p.num { color: var(--brand-text); }
.sfd[data-look="corporate"] .card { background: var(--brand-bg); border: 1px solid var(--line); border-radius: 10px; }
.sfd[data-look="corporate"] .photo { border-radius: 8px; }
.sfd[data-look="corporate"] .tier { background: var(--brand-bg); border: 1px solid var(--line); border-radius: 10px; }
.sfd[data-look="corporate"] .tier.is-featured { background: var(--brand-bg); color: var(--brand-text); --muted: var(--brand-text-muted); --line: color-mix(in srgb, var(--brand-text) 14%, transparent); border: 2px solid var(--brand-primary); transform: none; box-shadow: 0 24px 48px -32px rgba(13,22,38,.35); }
.sfd[data-look="corporate"] .tier.is-featured li::before { background: var(--brand-primary); }
.sfd[data-look="corporate"] .tier .flag { background: var(--brand-primary); color: #fff; border-radius: 4px; }
.sfd[data-look="corporate"] .chip { border-radius: 4px; }
.sfd[data-look="corporate"] .quote { font-family: var(--font-heading); font-style: normal; font-weight: 500; font-size: 36px; line-height: 1.3; }
.sfd[data-look="corporate"] .bar .track, .sfd[data-look="corporate"] .bar .track i { border-radius: 2px; }
.sfd[data-look="corporate"] .chart .c-bar { rx: 2px; }
.sfd[data-look="corporate"] .chart .c-val { font-weight: 600; }
.sfd[data-look="corporate"] .chart .sw { border-radius: 2px; }
.sfd[data-look="corporate"] .chart-takeaway { font-weight: 600; font-size: 28px; border-left-width: 2px; }
.sfd[data-look="corporate"] .tl::before { border-radius: 2px; width: 14px; height: 14px; top: -44px; }
/* light everywhere: dark, brand, and photo slides become light */
.sfd[data-look="corporate"].is-dark, .sfd[data-look="corporate"].is-brand { background: var(--brand-surface); color: var(--brand-text); --muted: var(--brand-text-muted); --line: color-mix(in srgb, var(--brand-text) 14%, transparent); --line-strong: color-mix(in srgb, var(--brand-text) 28%, transparent); }
.sfd[data-look="corporate"].is-brand { background: var(--brand-bg); box-shadow: inset 24px 0 0 var(--brand-primary); }
.sfd[data-look="corporate"].is-brand .num { color: var(--brand-primary) !important; -webkit-text-stroke: 0; }
.sfd[data-look="corporate"].is-dark .kicker, .sfd[data-look="corporate"].is-brand .kicker, .sfd[data-look="corporate"].is-photo .kicker { color: var(--brand-primary); }
.sfd[data-look="corporate"].is-dark em, .sfd[data-look="corporate"].is-brand em, .sfd[data-look="corporate"].is-photo em { color: var(--brand-primary); }
.sfd[data-look="corporate"].is-dark .lockup, .sfd[data-look="corporate"].is-brand .lockup, .sfd[data-look="corporate"].is-photo .lockup { color: var(--brand-text); }
.sfd[data-look="corporate"].is-dark .stat { border-top-color: var(--line-strong); }
.sfd[data-look="corporate"].is-dark .num[data-slot="investment"], .sfd[data-look="corporate"] .num[data-slot="investment"] { color: var(--brand-primary) !important; }
.sfd[data-look="corporate"].is-dark .chip { background: var(--tint); color: var(--brand-primary); }
.sfd[data-look="corporate"].is-dark .point .n { color: var(--brand-primary); }
.sfd[data-look="corporate"].is-dark .card { background: var(--brand-bg); border: 1px solid var(--line); }
.sfd[data-look="corporate"].is-photo { background: var(--brand-bg); color: var(--brand-text); --muted: var(--brand-text-muted); --line: color-mix(in srgb, var(--brand-text) 14%, transparent); }
.sfd[data-look="corporate"].is-photo .bg-photo { left: 60%; top: 132px; bottom: 132px; right: var(--m); border-radius: 8px; overflow: hidden; }
.sfd[data-look="corporate"].is-photo .bg-photo::after { background: none; }
.sfd[data-look="corporate"].is-photo .frame { right: 44%; }
.sfd[data-look="corporate"].is-photo .label { color: var(--brand-text-muted); }
.sfd[data-look="corporate"].is-photo .display { font-size: 88px; }
.sfd[data-look="corporate"] .card--glass { background: var(--brand-surface); border: 1px solid var(--line); color: var(--brand-text); backdrop-filter: none; }
.sfd[data-look="corporate"] .card--glass .small { color: var(--brand-text-muted) !important; }

/* =====================================================================
   Look: Community. Warm and friendly: rounded type and shapes, a
   highlighter accent instead of italics, soft tinted tiles.
   For nonprofits, youth programs, schools, local events.
   ===================================================================== */
.sfd[data-look="community"] { --font-heading: var(--font-community, "Nunito", "Quicksand", "Avenir Next", sans-serif); --em-font: var(--font-heading); --warm: color-mix(in srgb, var(--brand-accent) 7%, var(--brand-bg)); background: var(--warm); }
.sfd[data-look="community"].is-tint { background: color-mix(in srgb, var(--brand-primary) 7%, var(--warm)); }
.sfd[data-look="community"] .display, .sfd[data-look="community"] .h1, .sfd[data-look="community"] .h2, .sfd[data-look="community"] .h3 { font-weight: 800; letter-spacing: -.015em; }
.sfd[data-look="community"] .num { font-weight: 800; letter-spacing: -.02em; }
.sfd[data-look="community"] em, .sfd[data-look="community"] .em { font-family: var(--font-heading); font-style: normal; font-weight: inherit; letter-spacing: inherit; color: inherit;
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--brand-accent) 75%, transparent) 60%, color-mix(in srgb, var(--brand-accent) 75%, transparent) 90%, transparent 90%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sfd[data-look="community"].is-dark em, .sfd[data-look="community"].is-photo em, .sfd[data-look="community"].is-brand em { color: inherit; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--brand-accent) 70%, transparent) 62%, color-mix(in srgb, var(--brand-accent) 70%, transparent) 90%, transparent 90%); }
.sfd[data-look="community"] .kicker { justify-self: start; width: max-content; font-family: var(--font-body); font-weight: 700; font-size: 16px; letter-spacing: .08em; padding: 9px 18px; border-radius: 999px; background: color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.sfd[data-look="community"] .kicker::before { width: 8px; height: 8px; border-radius: 50%; }
.sfd[data-look="community"].is-dark .kicker, .sfd[data-look="community"].is-photo .kicker, .sfd[data-look="community"].is-brand .kicker { background: rgba(255,255,255,.14); color: #fff; }
.sfd[data-look="community"] .card, .sfd[data-look="community"] .tier { border-radius: 32px; background: color-mix(in srgb, var(--brand-primary) 6%, var(--brand-bg)); }
.sfd[data-look="community"].is-dark .card { background: rgba(255,255,255,.07); }
.sfd[data-look="community"] .tier.is-featured { background: var(--brand-primary); transform: translateY(-16px); }
.sfd[data-look="community"] .tier .flag { border-radius: 999px; }
.sfd[data-look="community"] .photo { border-radius: 32px; }
.sfd[data-look="community"] .photo figcaption, .sfd[data-look="community"] .photo .mock-tag { font-family: var(--font-body); font-weight: 700; letter-spacing: .04em; }
.sfd[data-look="community"] .stat { border-top: 0; padding: 24px 26px; border-radius: 24px; background: color-mix(in srgb, var(--brand-accent) 16%, var(--brand-bg)); }
.sfd[data-look="community"] .stat p.num { color: var(--brand-primary); }
.sfd[data-look="community"] .stat--xl { background: none; padding: 0; }
.sfd[data-look="community"].is-dark .stat, .sfd[data-look="community"].is-photo .stat { background: rgba(255,255,255,.08); }
.sfd[data-look="community"].is-dark .stat p.num { color: var(--brand-accent); }
.sfd[data-look="community"] .chip { border-radius: 999px; font-family: var(--font-body); font-weight: 700; letter-spacing: .04em; text-transform: none; font-size: 15px; }
.sfd[data-look="community"] .quote { font-family: var(--font-heading); font-style: normal; font-weight: 700; font-size: 40px; line-height: 1.25; }
.sfd[data-look="community"] .timeline::before { height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--brand-primary) 0 14px, transparent 14px 24px); }
.sfd[data-look="community"] .tl::before { width: 24px; height: 24px; top: -49px; background: var(--brand-accent); border-color: var(--brand-primary); }
.sfd[data-look="community"] .rail { font-family: var(--font-body); font-weight: 600; letter-spacing: .08em; }
.sfd[data-look="community"] .lockup { font-family: var(--font-heading); font-weight: 800; }
.sfd[data-look="community"].is-dark, .sfd[data-look="community"].is-photo { background: color-mix(in srgb, var(--brand-primary) 70%, #0b0b0b); }
.sfd[data-look="community"].is-brand { background: var(--brand-primary); }
.sfd[data-look="community"].is-brand::before { content: ""; position: absolute; width: 760px; height: 760px; right: -200px; top: -220px; border-radius: 50%; background: color-mix(in srgb, var(--brand-accent) 26%, transparent); }
.sfd[data-look="community"].is-brand .num { color: var(--brand-accent); }
.sfd[data-look="community"] .bar .track, .sfd[data-look="community"] .bar .track i { border-radius: 999px; }
.sfd[data-look="community"] .bar .track i { background: var(--brand-primary); }
.sfd[data-look="community"] .chart .c-bar { rx: 14px; }
.sfd[data-look="community"] .chart .c-val { font-weight: 800; }
.sfd[data-look="community"] .chart .sw { border-radius: 50%; }
.sfd[data-look="community"] .chart-takeaway { font-weight: 800; border-left: 0; padding: 18px 24px; border-radius: 20px; background: var(--tint); }
.sfd[data-look="community"] .avatar { background: var(--brand-accent); }

/* =====================================================================
   Look: Luxe. Dark and quiet: refined serif headings, gold hairlines,
   a thin frame around every slide, restrained photos.
   For hospitality, arts, premium and high-net-worth inventory.
   ===================================================================== */
.sfd[data-look="luxe"] { --font-heading: var(--font-luxe, "Cormorant Garamond", "Playfair Display", Georgia, serif); --em-font: var(--font-heading);
  background: var(--ink); color: #f3eee4; --muted: rgba(243,238,228,.68); --line: color-mix(in srgb, var(--brand-accent) 26%, transparent); --line-strong: color-mix(in srgb, var(--brand-accent) 55%, transparent); --tint: rgba(255,255,255,.04); }
.sfd[data-look="luxe"]::after { content: ""; position: absolute; inset: 26px; border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, transparent); pointer-events: none; z-index: 3; }
.sfd[data-look="luxe"].is-tint, .sfd[data-look="luxe"].is-dark { background: color-mix(in srgb, var(--ink) 92%, #ffffff); }
.sfd[data-look="luxe"].is-brand { background: var(--ink); color: #f3eee4; }
.sfd[data-look="luxe"].is-brand .num { color: var(--brand-accent); font-weight: 400; }
.sfd[data-look="luxe"] .display, .sfd[data-look="luxe"] .h1, .sfd[data-look="luxe"] .h2, .sfd[data-look="luxe"] .h3 { font-weight: 500; letter-spacing: -.01em; }
.sfd[data-look="luxe"] .display { font-size: 140px; line-height: .95; }
.sfd[data-look="luxe"] .h1 { font-size: 84px; line-height: 1.02; }
.sfd[data-look="luxe"] .h2 { font-size: 46px; }
.sfd[data-look="luxe"] .h3 { font-size: 34px; }
.sfd[data-look="luxe"] em, .sfd[data-look="luxe"] .em { font-family: var(--font-heading); font-style: italic; font-weight: 500; color: var(--brand-accent); }
.sfd[data-look="luxe"] .kicker { color: var(--brand-accent); letter-spacing: .32em; font-size: 15px; }
.sfd[data-look="luxe"] .kicker::before { height: 1px; width: 56px; }
.sfd[data-look="luxe"] .lockup { font-family: var(--font-heading); font-weight: 600; font-size: 24px; letter-spacing: .06em; color: #f3eee4; }
.sfd[data-look="luxe"] .num { font-family: var(--font-heading); font-weight: 500; letter-spacing: -.01em; }
.sfd[data-look="luxe"] .stat { border-top: 1px solid var(--line-strong); }
.sfd[data-look="luxe"] .stat p.num { color: #f3eee4; }
.sfd[data-look="luxe"] .stat .num { font-size: 104px; }
.sfd[data-look="luxe"] .card, .sfd[data-look="luxe"] .tier { background: transparent; border: 1px solid var(--line); border-radius: 0; color: #f3eee4; }
.sfd[data-look="luxe"] .card--glass { background: rgba(8,8,8,.35); }
.sfd[data-look="luxe"] .tier.is-featured { background: color-mix(in srgb, var(--brand-accent) 8%, transparent); border: 1px solid var(--brand-accent); box-shadow: inset 0 0 0 6px var(--ink), inset 0 0 0 7px color-mix(in srgb, var(--brand-accent) 55%, transparent); transform: none; }
.sfd[data-look="luxe"] .tier .flag { border-radius: 0; background: var(--brand-accent); }
.sfd[data-look="luxe"] .tier li::before, .sfd[data-look="luxe"] .tier.is-featured li::before { background: var(--brand-accent); width: 6px; height: 6px; margin-top: 12px; transform: rotate(45deg); border-radius: 0; }
.sfd[data-look="luxe"] .tier .price { font-family: var(--font-heading); font-weight: 500; }
.sfd[data-look="luxe"] .photo { border-radius: 0; }
.sfd[data-look="luxe"] .photo img { filter: saturate(.8) contrast(1.05) sepia(.06); }
.sfd[data-look="luxe"] .photo::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.35); pointer-events: none; }
.sfd[data-look="luxe"] .photo .mock-tag, .sfd[data-look="luxe"] .photo figcaption { border-radius: 0; z-index: 1; }
.sfd[data-look="luxe"] .chip { background: transparent; border: 1px solid var(--line-strong); color: var(--brand-accent); border-radius: 0; }
.sfd[data-look="luxe"] .point .n, .sfd[data-look="luxe"] .reason-n { color: var(--brand-accent); }
.sfd[data-look="luxe"] .quote { font-size: 50px; color: #f3eee4; }
.sfd[data-look="luxe"] .bar .track { background: rgba(255,255,255,.08); border-radius: 0; } .sfd[data-look="luxe"] .bar .track i { background: var(--brand-accent); border-radius: 0; }
.sfd[data-look="luxe"] .chart { --chart-a: var(--brand-accent); }
.sfd[data-look="luxe"] .chart .c-bar { rx: 0; }
.sfd[data-look="luxe"] .chart .c-val { font-weight: 500; }
.sfd[data-look="luxe"] .chart .sw { border-radius: 0; width: 12px; height: 12px; transform: rotate(45deg); }
.sfd[data-look="luxe"] .chart-slices .v { font-weight: 500; font-size: 32px; }
.sfd[data-look="luxe"] .chart-takeaway { font-style: italic; font-weight: 500; font-size: 34px; border-left: 1px solid var(--brand-accent); }
.sfd[data-look="luxe"] .timeline::before { height: 1px; background: var(--line-strong); }
.sfd[data-look="luxe"] .tl::before { width: 14px; height: 14px; top: -42px; border-radius: 0; transform: rotate(45deg); border: 1px solid var(--brand-accent); background: var(--ink); }
.sfd[data-look="luxe"] .tl.is-key::before { background: var(--brand-accent); box-shadow: none; }
.sfd[data-look="luxe"] .tl .when { color: var(--brand-accent); }
.sfd[data-look="luxe"] .avatar { background: transparent; border: 1px solid var(--brand-accent); color: var(--brand-accent); font-family: var(--font-heading); font-weight: 500; }
.sfd[data-look="luxe"] .estimate { border-color: var(--line-strong); color: var(--brand-accent); }
/* look-specific fits */
.sfd[data-look="corporate"][data-layout="closer"] .bg-photo { display: none; }
.sfd[data-look="corporate"][data-layout="closer"] .frame { right: var(--m); }
.sfd[data-look="corporate"][data-layout="closer"] .display { font-size: 96px; }
.sfd[data-look="community"] .display { font-size: 108px; line-height: 1; }
.sfd[data-look="community"][data-layout="cover.photo"] .h3 { font-size: 26px; }
.sfd[data-look="community"] .h1 { font-size: 66px; }
.sfd[data-look="community"] .assets[data-count="2"] .photo, .sfd[data-look="luxe"] .assets[data-count="2"] .photo { height: 330px; }
.sfd[data-look="community"][data-layout="cover.photo"] .display { font-size: 96px !important; max-width: 17ch !important; }
.sfd[data-look="community"][data-layout="cover.photo"] .frame { gap: 26px; }
.sfd .bg-photo figure { position: absolute; inset: 0; margin: 0; }
.sfd[data-look="community"] .card--glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.sfd[data-look="community"].is-photo .card--glass .small { color: rgba(255,255,255,.75); }
.sfd .strong { color: inherit; font-weight: 700; }
.sfd .num, .sfd .price { font-variant-numeric: lining-nums tabular-nums; }
.sfd[data-look="luxe"] .stat--xl .num { font-size: 300px; line-height: .85; }
.sfd[data-look="luxe"] .card .strong, .sfd[data-look="luxe"] .card p.small { color: rgba(243,238,228,.75); }
.sfd[data-look="corporate"].is-photo .display { font-size: 78px !important; line-height: 1.05; max-width: 16ch !important; }
.sfd[data-look="corporate"][data-layout="cover.photo"] .frame { gap: 28px; }
.sfd[data-look="corporate"][data-layout="cover.photo"] .frame > div:last-child { gap: 40px !important; }
.sfd[data-look="corporate"][data-layout="cover.photo"] .frame > div:last-child .h3 { font-size: 24px; }

/* ---------- Photo-free variants: a slot with no photo is a text card, never an empty box ---------- */
.sfd .asset.is-text, .sfd .asset:has(> .photo.is-empty) { padding: 30px 32px 28px; border-radius: 22px; background: var(--tint); border-top: 6px solid var(--brand-primary); gap: 16px; align-content: start; }
.sfd .assets[data-photos="none"] .asset.is-text { min-height: 280px; }
.sfd .assets[data-count="4"] .asset.is-text .body { font-size: 20px; }
.sfd .assets[data-count="6"] .asset.is-text, .sfd .assets[data-count="6"] .asset:has(> .photo.is-empty) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 22px 26px; gap: 10px; min-height: 0; }
.sfd .assets[data-count="6"] .asset.is-text .asset-text { align-self: start; }
.sfd .assets[data-count="6"] .asset.is-text .body { font-size: 19px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sfd[data-look="sport"] .asset.is-text { border-radius: 6px; }
.sfd[data-look="corporate"] .asset.is-text { border-radius: 8px; }
.sfd[data-look="luxe"] .asset.is-text { background: rgba(255,255,255,.04); border-top-color: var(--brand-accent); }
.sfd .split-5-7:has(> .photo.is-empty) { grid-template-columns: minmax(0, 1fr); }

/* ---------- Cover lockup: the property and partner logos lead the cover ---------- */
.sfd[data-layout^="cover"] .lockup { gap: 32px; font-size: 32px; }
.sfd[data-layout^="cover"] .lockup img { height: 88px; width: auto; max-width: 320px; object-fit: contain; }
.sfd[data-layout^="cover"] .lockup .x { font-size: 30px; }
/* On dark covers a logo sits on a white plate: most logos are drawn for light backgrounds. */
.sfd.is-photo[data-layout^="cover"] .lockup img, .sfd[data-look="luxe"][data-layout^="cover"] .lockup img { box-sizing: content-box; padding: 8px 14px; border-radius: 12px; background: #fff; }
.sfd[data-look="corporate"].is-photo[data-layout^="cover"] .lockup img { padding: 0; background: none; }
.sfd[data-look="corporate"][data-layout="cover.photo"] .bg-photo { top: 216px; }
.sfd[data-layout^="cover"] .lockup .wordmark { display: inline-flex; align-items: center; height: 88px; padding: 0 24px; border: 2px solid currentColor; border-radius: 12px; font-size: 34px; line-height: 1; letter-spacing: .02em; white-space: nowrap; max-width: 520px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Typography controls (spec: keepTogether, titleLines; typography.ts) ---------- */
/* Headlines break into even lines instead of leaving one word alone on the last. */
.sfd .display, .sfd .h1, .sfd .h2 { text-wrap: balance; }
/* A keep-together phrase never breaks across lines. */
.sfd .nb { white-space: nowrap; }
/*
 * The headline line count. The heading becomes a size container; its text steps down from the
 * look's size (1em) toward what the estimate says fits the line count, never under the floor
 * (the larger of 40px and 55% of the look's size). --glyph is the look's average caps/lowercase
 * glyph width in em, measured on the 1920px stage.
 */
.sfd { --glyph: .56; }
.sfd[data-look="sport"] { --glyph: .5; }
.sfd[data-look="community"] { --glyph: .6; }
.sfd[data-look="luxe"] { --glyph: .5; }
.sfd [data-max-lines] { container-type: inline-size; max-width: none !important; }
.sfd [data-max-lines] > .fit-lines { display: block; font-size: clamp(max(40px, .55em), calc(var(--fit-lines) * 100cqi / (var(--fit-chars) * var(--glyph))), 1em); }
/* Two or three lines: a headline short enough for one line breaks into that many balanced lines
   (its measure narrows to a little over 1/N of its one-line width). */
.sfd [data-max-lines="2"] > .fit-lines { max-width: calc(var(--fit-chars) * var(--glyph) * 1em * .62); }
.sfd [data-max-lines="3"] > .fit-lines { max-width: calc(var(--fit-chars) * var(--glyph) * 1em * .42); }

/* ---------- Logo size presets (spec: logoSize) ---------- */
.sfd[data-logo-size="small"] .lockup img { height: 26px; }
.sfd[data-logo-size="large"] .lockup img { height: 44px; }
.sfd[data-logo-size="x-large"] .lockup img { height: 52px; }
/* No logo file: the name set in type scales with the preset too. */
.sfd[data-logo-size="small"] .rail .lockup { font-size: 17px; }
.sfd[data-logo-size="large"] .rail .lockup { font-size: 25px; }
.sfd[data-logo-size="x-large"] .rail .lockup { font-size: 30px; }
.sfd[data-logo-size="small"][data-layout^="cover"] .lockup img, .sfd[data-logo-size="small"][data-layout^="cover"] .lockup .wordmark { height: 64px; }
.sfd[data-logo-size="large"][data-layout^="cover"] .lockup img, .sfd[data-logo-size="large"][data-layout^="cover"] .lockup .wordmark { height: 104px; max-width: 380px; }
.sfd[data-logo-size="x-large"][data-layout^="cover"] .lockup img, .sfd[data-logo-size="x-large"][data-layout^="cover"] .lockup .wordmark { height: 116px; max-width: 420px; }