/*
  Layer order controls the cascade explicitly instead of relying on
  source order / specificity fights. Later layers win over earlier
  ones regardless of where a rule is declared.
*/
@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  img { display: block; max-width: 100%; }
  summary { list-style: none; }
  summary::-webkit-details-marker { display: none; }
  a { text-decoration: none; }
}

@layer tokens {
  :root {
    /* Color */
    --color-bg: #000;
    --color-bg-alt: #080808;
    --color-bg-card: #0c0c0c;
    --color-hairline: rgba(255, 255, 255, 0.12);
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-strong: rgba(255, 255, 255, 0.14);
    --color-border-loud: rgba(255, 255, 255, 0.22);

    --color-text: #fff;
    --color-text-muted: #9a9490;
    --color-text-dim: #8f8a86;
    --color-text-faint: #7a7a7a;
    --color-text-label: #8a8a8a;
    --color-text-taupe: #b9b0aa;
    --color-placeholder: #7f7975;

    --color-accent: #f26522;
    --color-accent-hover: #ff7a3d;
    --color-accent-wash: rgba(242, 101, 34, 0.07);
    --color-gold: #c8b378;
    --color-cream: #e8e2de;

    /* Typography */
    --font-sans: "Raleway", system-ui, sans-serif;
    --leading-body: 1.6;

    /* Layout */
    --container-max: 1280px;
    --container-max-narrow: 1040px;
    --container-max-reading: 820px;
    --container-padding-x: clamp(16px, 4vw, 48px);
    --section-padding-y: clamp(64px, 9vw, 124px);
    --section-padding-y-compact: clamp(44px, 6vw, 84px);
    --section-padding-y-lg: clamp(68px, 10vw, 132px);

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Motion */
    --transition-fast: 0.18s;
    --transition-bar: 0.08s linear;
  }
}

@layer base {
  html { color-scheme: dark; }

  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; margin: 0; }
  ul, ol { list-style: none; padding: 0; margin: 0; }

  a { color: var(--color-accent); }
  a:hover, a:focus-visible { color: var(--color-gold); }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  details[open] .faq-icon { transform: rotate(45deg); }

  @keyframes tick {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    background: var(--color-accent);
    color: #000;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    transform: translateY(-150%);
    transition: transform var(--transition-fast);
  }
  .skip-link:focus { transform: translateY(0); }

  .hide-sm { }
  @media (max-width: 760px) {
    .hide-sm { display: none !important; }
  }

  .aspect-16-9 { aspect-ratio: 16 / 9; }
  .aspect-5-2 { aspect-ratio: 5 / 2; }
  .aspect-4-3 { aspect-ratio: 4 / 3; }
  .aspect-3-4 { aspect-ratio: 3 / 4; }

  .text-accent { color: var(--color-accent); }
  .text-gold { color: var(--color-gold); }
  .text-taupe { color: var(--color-text-taupe); }

  .container--center { text-align: center; }
  .link-strong { font-weight: 700; }
  .scroll-anchor { scroll-margin-top: 70px; }
  /* Sections opt in via .scroll-anchor; this catches the heading ids that are
     linked directly (llms.txt publishes /#faq-title, /#speakers-title and
     friends), which would otherwise land under the sticky header. */
  :target { scroll-margin-top: 70px; }
  /* The host guide's table eyebrow can wrap to two lines of "Table N . Host";
     landing on the second must not tuck the first under the sticky header.
     Here rather than beside .eyebrow--tables because this layer outranks
     components, so only a rule in it can beat the one above. */
  .eyebrow--tables > :target { scroll-margin-top: 100px; }
}

/* ============================= LAYOUT ============================= */
@layer layout {
  .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-x);
  }
  .container--narrow { max-width: var(--container-max-narrow); }
  /* One column of instructions, read on a phone at a table (the two guides). */
  .container--reading { max-width: var(--container-max-reading); }

  .section { padding: var(--section-padding-y) 0; background: var(--color-bg); }
  /* The guides are working documents with many short sections; the full
     section rhythm would put most of a phone screen of nothing between them. */
  .section--compact { padding: var(--section-padding-y-compact) 0; }
  .section--alt { background: var(--color-bg-alt); }
  .section--bordered { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .section--border-bottom { border-bottom: 1px solid var(--color-border); }
  .section--tight { padding: clamp(64px, 9vw, 110px) 0; }

  .hairline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--color-hairline);
  }
  .hairline-grid--bordered {
    border: 1px solid var(--color-hairline);
  }
  .hairline-grid > * { background: var(--color-bg); padding: clamp(26px, 3vw, 38px); }
  .section--alt .hairline-grid > * { background: var(--color-bg-alt); }
  .hairline-grid--mt-lg { margin-top: clamp(40px, 5vw, 68px); }
  .hairline-grid--mt-md { margin-top: clamp(34px, 4vw, 54px); }
}

/* ============================ COMPONENTS =========================== */
@layer components {
  /* -- Header / progress -- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
  }
  .site-header__row {
    padding: 12px var(--container-padding-x);
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
  }
  .site-header__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .brand-label {
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-label);
  }
  .section-label {
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-header__nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); position: relative; }
  /* Wraps the hamburger trigger and the .nav-links it opens so outside-click
     detection (site.js) can tell "inside this menu" from "inside Feedback or
     the page behind it" with one containment check. */
  .nav-hamburger-wrap { position: relative; display: flex; align-items: center; }
  .nav-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    /* 44px is the minimum comfortable touch target (Apple HIG/WCAG) -- the
       glyph itself stays small, but the tappable box around it doesn't. */
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-taupe);
    cursor: pointer;
  }
  .nav-hamburger:hover, .nav-hamburger:focus-visible, .nav-hamburger[aria-expanded="true"] { color: var(--color-accent); }
  .nav-links { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
  .nav-link {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-taupe);
    white-space: nowrap;
    transition: color var(--transition-fast);
  }
  .nav-link:hover, .nav-link:focus-visible { color: var(--color-accent); }

  /* Header dropdown. Deliberately a disclosure, not role="menu": the panel
     holds ordinary links, so Tab already walks them and the script only has
     to toggle and close. A real menu widget would owe arrow-key roving
     focus, and half of one is worse than none. */
  .nav-menu { position: relative; }
  .nav-menu__button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
  }
  .nav-menu__caret { font-size: 9px; transition: transform var(--transition-fast); }
  .nav-menu__button[aria-expanded="true"] { color: var(--color-accent); }
  .nav-menu__button[aria-expanded="true"] .nav-menu__caret { transform: rotate(180deg); }
  .nav-menu__panel {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    /* Never wider than the viewport: this is the one nav item that survives
       the mobile breakpoint, so it has to sit inside a 320px screen. */
    width: max-content;
    min-width: 224px;
    max-width: calc(100vw - 32px);
    /* Never taller than the gap between the header and the fixed mobile bar
       (~61px above, ~68px below, plus a margin): the header is sticky, so on a
       landscape phone anything the bar covers can never be scrolled into view.
       Seven items is where this started to bite. vh first for browsers
       without dvh. */
    max-height: calc(100vh - 144px);
    max-height: calc(100dvh - 144px);
    overflow-y: auto;
    padding: 14px;
    /* Solid, not translucent: the panel hangs off the header and over the
       hero, and the header's own backdrop-filter stops a child blur from
       sampling what is actually behind it -- so anything less than opaque
       leaves the hero headline legible straight through the links. */
    background: #0b0b0b;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.62);
    text-align: left;
    z-index: 50;
  }
  .nav-menu__panel[hidden] { display: none; }
  .nav-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
  .nav-menu__item {
    display: block;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-taupe);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
  }
  .nav-menu__item:hover, .nav-menu__item:focus-visible { background: rgba(255, 255, 255, 0.07); color: var(--color-accent); }
  .nav-menu__item[aria-current="page"] { color: var(--color-accent); }
  /* Below this width, Home, Conference and Get involved move behind a
     hamburger and Feedback stays in the row on its own -- that's the only
     item with no other way onto the program/guide pages, so it can't be
     tucked away with the rest. */
  @media (max-width: 560px) {
    /* The brand label is already hidden by this width and the section readout
       is decorative (aria-hidden), and there's no room for either next to a
       trigger and Feedback -- a stray "P" reads as a glitch. Drop the whole
       brand column instead. */
    .site-header__brand { display: none; }
    /* Hamburger and Feedback as a pair, flush to the right edge, rather than
       stranded at the left with the rest of the row empty. margin-left:auto
       on the nav itself, not just justify-content -- with the brand column
       gone, .nav is the row's only child, and space-between has nothing left
       to space, so justify-content alone has no slack to push against. */
    .site-header__nav { margin-left: auto; justify-content: flex-end; }
    .nav-hamburger { display: inline-flex; }
    .nav-links {
      display: none;
      position: absolute;
      top: calc(100% + 15px);
      /* Anchored to the trigger's right edge, same as the old per-menu
         dropdowns: grows leftward into open space instead of right, which
         is where there's less of it now that the trigger sits at the right
         edge of the header instead of the left. */
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      width: max-content;
      min-width: 200px;
      max-width: calc(100vw - 32px);
      max-height: calc(100vh - 144px);
      max-height: calc(100dvh - 144px);
      overflow-y: auto;
      padding: 14px;
      background: #0b0b0b;
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-lg);
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.62);
      z-index: 50;
    }
    .nav-links:not([hidden]) { display: flex; }
    .nav-links .nav-link { padding: 9px 10px; }
    /* Conference and Get involved keep working as their own disclosures --
       still one tap each -- but their panel no longer floats: a floating
       panel doesn't push the row below it out of the way, so it sits on top
       of (and blocks taps on) whatever trigger comes next. Opening in place,
       indented under its trigger, pushes that row down instead. site.js
       skips its usual close-on-blur for these two specifically, so that push
       happens only once a tap on the next trigger actually lands, not while
       it's still in flight (see the comment there). */
    .nav-links .nav-menu { width: 100%; }
    .nav-links .nav-menu__button { width: 100%; justify-content: space-between; padding: 9px 10px; }
    .nav-links .nav-menu__panel {
      position: static;
      width: 100%;
      min-width: 0;
      max-width: none;
      max-height: none;
      overflow: visible;
      padding: 2px 0 6px 14px;
      margin: 0;
      background: none;
      border: 0;
      box-shadow: none;
    }
  }

  .progress-track { height: 3px; background: rgba(255, 255, 255, 0.09); }
  .progress-bar { height: 3px; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-bar); }

  /* -- Buttons -- */
  .btn {
    display: inline-block;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  }
  .btn--primary { background: var(--color-accent); color: #000; }
  .btn--primary:hover, .btn--primary:focus-visible { background: var(--color-accent-hover); color: #000; }
  .btn--outline { background: transparent; color: var(--color-text); border: 1px solid rgba(255, 255, 255, 0.34); }
  .btn--outline:hover, .btn--outline:focus-visible { background: #fff; color: #000; }
  .btn--lift:hover, .btn--lift:focus-visible { transform: translateY(-2px); }

  .btn--header { font-size: 13px; padding: 10px 18px; white-space: nowrap; }
  .btn--hero { font-size: 17px; padding: 18px 32px; }
  .btn--cta { font-size: 18px; padding: 19px 34px; }
  .btn--mobile { font-size: 14px; padding: 12px 20px; white-space: nowrap; }

  /* -- Hero -- */
  .hero {
    position: relative;
    min-height: min(92vh, 920px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(56px, 9vw, 116px) var(--container-padding-x);
    background: radial-gradient(120% 90% at 50% 0%, #2a1108 0%, #0b0503 55%, #000 100%);
    border-bottom: 1px solid var(--color-border);
  }
  .hero__eyebrow {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 clamp(26px, 4vw, 46px);
  }
  /* A secondary page (the program) reuses the hero's centred type and
     gradient but not its full-viewport height -- there the content below is
     the point, and nobody should scroll past a title card to reach it. */
  .hero--compact {
    min-height: 0;
    padding-top: clamp(66px, 10vw, 128px);
    padding-bottom: clamp(46px, 6vw, 78px);
  }
  .hero__logo { margin: 0; }
  .hero__logo img { width: min(880px, 92%); height: auto; margin: 0 auto; }
  .hero__tagline {
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(15px, 1.7vw, 25px);
    line-height: 1.35;
    letter-spacing: 0.02em;
    margin: clamp(30px, 4vw, 48px) 0 0;
    max-width: 26ch;
    color: var(--color-text-taupe);
  }
  .hero__lead {
    margin: clamp(22px, 3vw, 32px) 0 0;
    max-width: 50ch;
    color: var(--color-text-muted);
    font-size: clamp(17px, 1.3vw, 19px);
    text-wrap: pretty;
  }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
  .hero__note {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 20px 0 0;
  }

  /* -- Stats bar -- */
  .stats-bar { border-bottom: 1px solid var(--color-border); }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--color-border);
  }
  .stat { padding: clamp(28px, 4vw, 48px) 24px; text-align: center; background: var(--color-bg); }
  .stat__value { font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 36px); line-height: 1; margin: 0; }
  .stat__label {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-label);
    margin: 12px 0 0;
  }

  /* -- Ticker -- */
  .ticker { overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); }
  .ticker__track { display: flex; width: max-content; animation: tick 40s linear infinite; }
  .ticker__group {
    display: flex;
    gap: 24px;
    flex: none;
    padding: 15px 24px 15px 0;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.07em;
    color: var(--color-text-faint);
    white-space: nowrap;
  }
  .ticker__sep { color: var(--color-accent); }

  /* -- Section heading block -- */
  .eyebrow {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 22px;
  }
  .section-heading { text-align: center; }
  /*
    --measure is a per-instance token: set it inline (style="--measure:20ch")
    on a single element instead of repeating a whole style block.
  */
  .h2 { font-size: clamp(34px, 5vw, 68px); line-height: 0.96; letter-spacing: -0.028em; margin: 0 auto; max-width: var(--measure, 26ch); }
  .h2--xl { font-size: clamp(34px, 5.4vw, 76px); }
  .h2--md { font-size: clamp(30px, 4vw, 54px); line-height: 0.98; max-width: var(--measure, 20ch); }
  .h2--sm { font-size: clamp(28px, 3.6vw, 48px); line-height: 0.98; }
  .h2--display { font-size: clamp(40px, 7.5vw, 104px); line-height: 0.94; letter-spacing: -0.03em; max-width: none; }
  .h2--tight-bottom { margin-bottom: 28px; }
  /* Opt-in, for headings whose length is not ours to tune (the guides' topic
     names): even out the lines rather than strand one word on the last. */
  .h2--balance { text-wrap: balance; }
  .lead {
    margin: clamp(22px, 3vw, 32px) auto 0;
    color: var(--color-text-muted);
    font-size: clamp(17px, 1.4vw, 20px);
    text-wrap: pretty;
    max-width: var(--measure, 60ch);
  }
  .lead--sm { margin: 20px auto 0; font-size: 1rem; max-width: var(--measure, 56ch); }

  /* -- Feature / criteria cards -- */
  .feature-card__index {
    display: block;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    margin-bottom: 20px;
  }
  .card-title { font-size: 24px; line-height: 1.05; margin: 0 0 12px; }
  .card-title--sm { font-size: 21px; line-height: 1.1; }
  .card-body { margin: 0; font-size: 16px; color: var(--color-text-dim); }
  .section-footnote { margin: clamp(24px, 3vw, 32px) auto 0; max-width: 64ch; text-align: center; color: var(--color-text-faint); font-size: 15px; }
  .section-footnote--label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 600; }

  /* -- Placeholder media (used until real photos/logos are supplied) -- */
  .placeholder-media {
    display: flex;
    align-items: flex-end;
    padding: 18px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--color-placeholder);
    background: repeating-linear-gradient(135deg, #141414 0 7px, #0d0d0d 7px 14px);
    border: 1px solid var(--color-border-strong);
  }
  .placeholder-media--rounded { border-radius: var(--radius-lg); }
  .placeholder-media--center { align-items: center; justify-content: center; text-align: center; }
  .placeholder-media--dashed { border: 1px dashed rgba(255, 255, 255, 0.2); background: none; }

  /* Silhouette stand-in for a headshot we do not have yet. */
  .placeholder-media--person {
    background-image:
      url("../assets/silhouette-person.svg"),
      repeating-linear-gradient(135deg, #141414 0 7px, #0d0d0d 7px 14px);
    background-repeat: no-repeat, repeat;
    background-position: center bottom, 0 0;
    background-size: auto 82%, auto;
  }

  .figure { margin: clamp(30px, 4vw, 48px) 0 0; }
  .figure__image { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border-strong); }
  .figure__image--wide { max-width: 1100px; margin: clamp(28px, 4vw, 44px) auto 0; }
  /* A portrait poster/infographic, sized so it doesn't tower over its section at container width. */
  .figure__image--narrow { max-width: 480px; margin: clamp(28px, 4vw, 44px) auto 0; }
  /* Inside a <figure> the wrapper already supplies the top margin. */
  .figure > .figure__image--wide, .figure > .figure__image--narrow { margin-top: 0; }

  .map-embed { position: relative; width: 100%; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; }
  .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .figure--left { text-align: left; }
  .figure__caption {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    margin-top: 12px;
  }

  /* -- Pills -- */
  .pill-row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 26px auto 0; max-width: 760px; }
  .pill {
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 9px 15px;
    border: 1px solid var(--color-border-loud);
    border-radius: var(--radius-md);
    color: var(--color-text-taupe);
  }

  /* -- Speaker / panel grid -- */
  .speaker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(16px, 2vw, 26px);
    margin-top: clamp(34px, 4vw, 52px);
    text-align: left;
  }
  .speaker-grid > li { min-width: 0; }
  .speaker-card__photo { width: 100%; height: auto; object-fit: cover; display: block; border-radius: var(--radius-lg); border: 1px solid var(--color-border-strong); }
  .speaker-card__name { font-size: 26px; line-height: 1; margin: 18px 0 0; }
  .speaker-card__role { margin: 10px 0 0; font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em; color: var(--color-accent); }
  .speaker-card__role a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
  .speaker-card__bio { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--color-text-dim); }
  .speaker-card__name--muted { color: #4f4b48; }
  .speaker-card__role--muted { color: var(--color-placeholder); }

  /* -- Timeline -- */
  .timeline { margin: clamp(38px, 5vw, 60px) auto 0; border-top: 1px solid var(--color-hairline); max-width: 1000px; }
  .timeline-row {
    display: grid;
    grid-template-columns: minmax(84px, 110px) 1fr;
    gap: clamp(14px, 3vw, 36px);
    padding: 20px 0;
    border-bottom: 1px solid var(--color-hairline);
    align-items: baseline;
  }
  .timeline-row--highlight { background: var(--color-accent-wash); }
  /* __label is the same slot for a row whose "when" is not a time or a
     duration ("Most of the hour", "Before 1:45 PM"), so cannot be a <time>. */
  .timeline-row time, .timeline-row__label { font-weight: 600; font-size: 14px; color: var(--color-gold); }
  .timeline-row--highlight time { color: var(--color-accent); }
  .timeline-row h3 { font-size: 21px; line-height: 1.05; }
  .timeline-row--highlight h3 { color: var(--color-accent); }
  .timeline-row p { margin: 6px 0 0; font-size: 16px; color: var(--color-text-dim); max-width: 62ch; }
  /* A row with no heading (the guides' agendas) starts on the label's baseline. */
  .timeline-row p:first-child { margin-top: 0; }
  .timeline-row p b { color: var(--color-cream); }
  .timeline-note { font-weight: 600; font-size: 12px; color: var(--color-text-faint); margin: 20px 0 0; }
  /* Sub-items under one timeline slot (the speakers inside a session, the
     ten peer-discussion tables -- there __cat carries the host, not a
     category). */
  .timeline-sub { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
  .timeline-sub li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.45; color: var(--color-text-dim); }
  .timeline-sub li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 8px; height: 1px; background: var(--color-accent); }
  /* The numbered groups carry their own index, so the number replaces the
     bullet rather than sitting beside it. */
  .timeline-sub--numbered li { padding-left: 28px; }
  .timeline-sub--numbered li::before { content: none; }
  .timeline-sub--numbered b { position: absolute; left: 0; top: 0; font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; }
  .timeline-sub__cat { display: block; font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); }
  /* A line after the sub-list (the program's host-guide link) needs more air
     than the 7px between items, or it reads as one more item. */
  .timeline-sub + p { margin-top: 14px; }

  /* -- Topic legend / grid -- */
  .legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 26px 0 0; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
  .legend__dot--core { color: var(--color-accent); }
  .legend__dot--tech { color: var(--color-gold); }
  .legend__dot--faith { color: var(--color-cream); }

  .topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 22px); margin-top: clamp(34px, 4vw, 54px); }
  .topic-card { border: 1px solid var(--color-border-strong); border-top: 3px solid var(--color-accent); border-radius: var(--radius-lg); padding: clamp(22px, 2.4vw, 30px); background: var(--color-bg-card); }
  .topic-card--tech { border-top-color: var(--color-gold); }
  .topic-card--faith { border-top-color: var(--color-cream); }
  .topic-card__eyebrow { font-weight: 700; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 14px; }
  .topic-card--tech .topic-card__eyebrow { color: var(--color-gold); }
  .topic-card--faith .topic-card__eyebrow { color: var(--color-cream); }
  .topic-card h3 { font-size: 21px; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 12px; text-transform: none; }

  /* -- Room stats -- */
  .room-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--color-hairline); border: 1px solid var(--color-hairline); margin-top: clamp(36px, 4vw, 56px); text-align: left; }
  .room-stat { background: var(--color-bg-alt); padding: clamp(24px, 3vw, 34px); }
  .room-stat__value { font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; margin: 0; color: var(--color-accent); }
  .room-stat__label { font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-label); margin: 12px 0 0; }

  /* -- Organizers / venue two-col -- */
  .split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(30px, 5vw, 72px); align-items: start; }
  .about-copy { margin: 22px 0 0; color: var(--color-text-muted); max-width: 46ch; }
  .organizer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
  .organizer { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 12px; }
  .organizer h3 { font-size: 20px; }
  .organizer p { margin: 4px 0 0; font-weight: 600; font-size: 11.5px; color: var(--color-placeholder); }
  .fine-print { font-weight: 600; font-size: 12px; color: var(--color-text-faint); margin: 24px 0 0; }

  /* Long-form body copy: the program's welcome letter. */
  .prose { margin: clamp(26px, 3vw, 36px) 0 0; max-width: 68ch; }
  .prose > p { margin: 0 0 18px; font-size: 17px; line-height: var(--leading-body); color: var(--color-text-muted); }
  .prose > p:last-child { margin-bottom: 0; }
  .prose-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
  .prose-list li { position: relative; padding-left: 22px; font-size: 17px; line-height: var(--leading-body); color: var(--color-text-muted); }
  .prose-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--color-accent); }
  .prose-list b { color: var(--color-cream); }
  .prose .prose-signoff { font-weight: 700; color: var(--color-gold); }

  /* -- Guides (table guide, host guide) -- */
  /* The two printed guides as pages. They get read at a table, on a phone,
     mid-conversation, so the copy runs brighter than the site's body text and
     steps up with how directly it is used: taupe for instructions, cream for
     lines to say out loud, white in a box for the one thing not to miss. */
  .guide { margin-top: clamp(28px, 4vw, 44px); }
  .guide > * { margin-top: 0; margin-bottom: 0; }
  .guide > * + * { margin-top: 18px; }
  /* The print sheets' ruled section labels. */
  .guide-heading {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--color-gold);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-hairline);
  }
  .guide > * + .guide-heading { margin-top: clamp(32px, 4vw, 46px); }
  .guide-text { font-size: 17px; color: var(--color-text-taupe); max-width: 66ch; }
  .guide-text b { color: var(--color-cream); }
  .guide-question { font-weight: 700; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.35; color: var(--color-cream); text-wrap: pretty; }
  .guide .timeline-row p { font-size: 17px; color: var(--color-text-taupe); }
  /* Straight under a ruled label, the label's rule is the timeline's top
     rule -- two hairlines 18px apart read as an empty row. */
  .guide > .guide-heading + .timeline { border-top: 0; margin-top: 0; }

  /* The boxed line on the print sheets: the opening question, the one
     instruction for the table. */
  .callout {
    padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px);
    border: 1px solid var(--color-border-loud);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    font-weight: 700;
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.35;
    color: var(--color-text);
    text-wrap: pretty;
  }
  .guide > .callout + .callout { margin-top: 12px; }

  .guide-list { display: grid; gap: 12px; }
  .guide-list li { position: relative; padding-left: 24px; font-weight: 600; font-size: 17px; line-height: 1.45; color: var(--color-cream); }
  /* 2px, not the 1px of .prose-list: at 1x a hairline on a fractional offset
     anti-aliases to grey on some rows and orange on others. */
  .guide-list li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 10px; height: 2px; background: var(--color-accent); }
  .guide-list b { font-weight: 800; color: var(--color-text); }
  /* A real <ol>, numbered by counter because the base layer strips list
     markers site-wide. */
  .guide-list--numbered { counter-reset: guide-item; }
  .guide-list--numbered li { counter-increment: guide-item; padding-left: 34px; }
  .guide-list--numbered li::before {
    content: counter(guide-item);
    top: 0;
    width: auto;
    height: auto;
    background: none;
    font-weight: 800;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
  }
  .guide-list__tag { display: block; font-weight: 700; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold); }
  /* Items that open with a tag: seat the dash on the tag's (shorter) line
     instead of between the tag and the question. */
  .guide-list--tagged li::before { top: 0.39em; }

  /* Host guide: ten tables, fewer topics. Each card says who hosts the table
     and what it is about, and jumps to its topic -- whose eyebrow carries the
     #table-N ids, so the one a host arrived at lights up. */
  .table-index { display: grid; gap: 8px; }
  .table-index__link {
    display: grid;
    grid-template-columns: 1.6em 1fr;
    gap: 14px;
    align-items: start;
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-border-loud);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-taupe);
    transition: border-color var(--transition-fast);
  }
  .table-index__link:hover, .table-index__link:focus-visible { border-color: var(--color-accent); color: var(--color-text-taupe); }
  .table-index__num { font-weight: 800; font-size: 24px; line-height: 1; color: var(--color-accent); font-variant-numeric: tabular-nums; }
  .table-index__body { display: grid; gap: 4px; min-width: 0; }
  .table-index__topic { font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-cream); }
  .table-index__tagline { font-size: 15px; line-height: 1.4; }
  .table-index__host { margin-top: 4px; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; color: var(--color-gold); }
  /* Two columns once a card has room for its tagline in each. */
  @media (min-width: 760px) {
    .table-index { grid-template-columns: 1fr 1fr; }
  }
  /* A topic eyebrow that names its tables: each "Table N . Host" is one
     unbreakable chunk (and one #table-N target), so two of them wrap as
     whole lines on a phone instead of mid-name. */
  .eyebrow--tables { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; }
  .eyebrow--tables > span { white-space: nowrap; }
  .eyebrow :target { color: var(--color-accent); }

  .venue-list { display: grid; gap: 18px; margin: 0; }
  .venue-list dt { font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 6px; }
  .venue-list dd { margin: 0; font-size: 17px; }

  /* -- FAQ -- */
  .faq-list { margin-top: clamp(30px, 4vw, 48px); }
  .faq-item { border-bottom: 1px solid var(--color-border-strong); padding: 18px 0; }
  .faq-question {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 19px;
    letter-spacing: 0.005em;
  }
  .faq-icon { font-weight: 600; font-style: normal; color: var(--color-accent); font-size: 20px; flex: none; transition: transform 0.2s; }
  .faq-answer { margin: 14px 0 2px; font-size: 16px; color: var(--color-text-dim); max-width: 66ch; }

  /* -- Sponsors -- */
  .sponsor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--color-hairline); border: 1px solid var(--color-hairline); margin-top: clamp(34px, 4vw, 52px); }
  .sponsor-tile { background: var(--color-bg-alt); padding: 26px; display: flex; align-items: center; justify-content: center; }
  /* Gold sponsors get their own row above the rest: fewer columns, so each
     tile is wider, plus a taller logo box and a gold hairline. The hairlines
     between tiles come from each tile's 1px shadow rather than a gold grid
     background, so when the tiles don't divide evenly into the columns the
     empty cells stay as faint as the supporting grid's instead of rendering
     as a block of solid gold. */
  .sponsor-grid--gold { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-color: var(--color-gold); }
  .sponsor-grid--gold .sponsor-tile { padding: 34px 30px; box-shadow: 0 0 0 1px var(--color-gold); }
  .sponsor-grid--gold .sponsor-tile__logo { height: 116px; }
  .sponsor-grid--gold .sponsor-tile__logo--image { opacity: 1; }
  .sponsor-group-title {
    margin: clamp(34px, 4vw, 52px) 0 14px;
    font-family: inherit;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-label);
  }
  .sponsor-group-title--gold { color: var(--color-gold); }
  .sponsor-group-title + .sponsor-grid { margin-top: 0; }
  .sponsor-group-title + .sponsor-notes { margin-top: 0; }
  /* Gold sponsors on the program page get a written-up row each (logo, site,
     blurb) rather than a bare logo tile -- same gold hairline as the grid. */
  .sponsor-notes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--color-hairline);
    border: 1px solid var(--color-gold);
    text-align: left;
  }
  .sponsor-note {
    background: var(--color-bg-alt);
    padding: clamp(22px, 3vw, 34px);
    display: grid;
    grid-template-columns: minmax(0, 200px) 1fr;
    gap: clamp(20px, 3vw, 38px);
    align-items: start;
  }
  .sponsor-note__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
  }
  /* Outside a .sponsor-tile nothing ever raises the flattened logo back to
     full strength on hover, so it starts at full strength here. */
  .sponsor-note__mark .sponsor-tile__logo { height: 92px; }
  .sponsor-note__mark .sponsor-tile__logo--image { opacity: 1; }
  .sponsor-note__name { font-size: 24px; line-height: 1.1; margin: 0; }
  .sponsor-note__site { margin: 8px 0 0; font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em; color: var(--color-accent); }
  .sponsor-note__site a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
  .sponsor-note__copy { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--color-text-dim); max-width: 66ch; }
  @media (max-width: 620px) {
    .sponsor-note { grid-template-columns: 1fr; gap: 18px; }
    .sponsor-note__mark { justify-self: start; min-width: 160px; }
  }
  .sponsor-tile--cta { flex-direction: column; gap: 8px; }
  .sponsor-tile__logo {
    width: 100%;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-placeholder);
    background: repeating-linear-gradient(135deg, #141414 0 7px, #0d0d0d 7px 14px);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
  }
  .sponsor-tile__logo--image {
    display: block;
    padding: 10px;
    object-fit: contain;
    background: none;
    border: 0;
    /* Sponsor logos arrive in their own brand colours; flatten to white so they
       stay legible on the dark tile. */
    filter: brightness(0) invert(1);
    opacity: 0.82;
    transition: opacity var(--transition-fast);
  }
  .sponsor-tile:hover .sponsor-tile__logo--image { opacity: 1; }
  /* Tiles link out to the sponsor's own site. The grid draws its dividers as
     1px gaps, so an outward focus ring would sit under the neighbouring tile --
     inset it instead. Keyboard focus gets the same lift as hover. */
  .sponsor-tile--link { text-decoration: none; color: inherit; }
  .sponsor-tile--link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; }
  .sponsor-tile:focus-within .sponsor-tile__logo--image { opacity: 1; }
  /* Badge-style logos whose own fill colour is load-bearing to the mark (e.g.
     a coloured nameplate with dark text on top) can't survive the flatten-to-
     white filter -- it erases the internal contrast and leaves a blank
     rectangle. Those get a small light card instead, keeping their real
     colours legible against the dark tile. */
  .sponsor-tile__logo--card {
    display: block;
    object-fit: contain;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
  }
  /* A circular badge mark (no wordmark beside it) would leave that card as a
     wide, mostly empty white rectangle. Let the card hug the mark and round it
     off instead, so it reads as a white-ringed badge at the same height as its
     neighbours. Added on top of --card. */
  .sponsor-tile__logo--card-round { width: auto; padding: 6px; border-radius: 50%; }
  /* Stand-in for sponsors whose logo file we do not have yet: set the name in
     the site's own display type rather than an empty box. */
  .sponsor-tile__logo--wordmark {
    flex-direction: column;
    gap: 6px;
    margin: 0;
    background: none;
    border: 0;
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--color-cream);
  }
  .sponsor-tile__wordmark-sub {
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--color-text-label);
  }
  .sponsor-tile__cta-label { font-weight: 800; text-transform: uppercase; font-size: 17px; line-height: 1.1; margin: 0; color: var(--color-accent); }
  .sponsor-tile__cta-link { font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); }
  .sponsor-tile__cta-link:hover, .sponsor-tile__cta-link:focus-visible { color: var(--color-accent); }

  .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(34px, 4vw, 52px); text-align: left; }
  .tier-card { border: 1px solid var(--color-border-loud); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px); background: var(--color-bg-card); }
  .tier-card--featured { border-color: var(--color-accent); }
  .tier-badge { display: inline-block; font-weight: 700; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #000; background: var(--color-accent); border-radius: var(--radius-sm); padding: 5px 10px; }
  .tier-name { font-size: 24px; letter-spacing: -0.01em; margin: 20px 0 6px; }
  .tier-price { font-weight: 800; font-size: clamp(34px, 3.6vw, 44px); line-height: 1; letter-spacing: -0.03em; margin: 0; color: var(--color-accent); }
  .tier-list { margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
  .tier-list li { list-style: none; font-size: 16px; color: var(--color-text-taupe); }
  .tier-list li::before { content: "\203A"; color: var(--color-accent); margin-right: 6px; }
  .sponsor-cta { margin: clamp(26px, 3vw, 36px) 0 0; font-size: 17px; color: var(--color-text-muted); }
  .sponsor-cta a { font-weight: 700; }

  /* -- Upcoming events (home hub) -- */
  /* Its own component rather than a .tier-card reskin: an event card is a date
     rail + body + action row, a shape the pricing card does not have. The border,
     radius, card background and accent edge are deliberately lifted from
     .tier-card so the two still read as one system. */
  .event-list { margin: clamp(34px, 4vw, 52px) 0 0; display: grid; gap: clamp(16px, 2vw, 24px); }
  .event-card {
    display: grid;
    grid-template-columns: minmax(92px, 120px) 1fr;
    gap: clamp(18px, 2.5vw, 34px);
    align-items: start;
    border: 1px solid var(--color-border-loud);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 3vw, 34px);
    background: var(--color-bg-card);
    text-align: left;
  }
  .event-card--featured { border-color: var(--color-accent); }
  .event-card__date { margin: 0; display: grid; gap: 4px; }
  .event-card__month {
    font-weight: 800;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }
  .event-card--featured .event-card__month { color: var(--color-accent); }
  .event-card__year { font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-label); }
  .event-card__body { min-width: 0; }
  /* A partner event can carry its host's mark in the date rail, under the date.
     The mark is a grid child of the card in its own right rather than a child of
     .event-card__date, so the date rail's mobile row-flow does not drag it onto
     the baseline beside the month. --branded then spans the body down both rows
     so it still sits beside the date rather than under the mark, and pins the
     rows to auto/1fr -- without that the body, spanning both, distributes its
     own height across them and pushes the mark halfway down the rail. */
  .event-card--branded { grid-template-rows: auto 1fr; }
  .event-card--branded .event-card__body { grid-column: 2; grid-row: 1 / span 2; }
  .event-card__logo {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: 72px;
    height: 72px;
    margin-top: 18px;
    object-fit: contain;
    /* Same reasoning as .sponsor-tile__logo--card-round: a circular badge whose
       own fill colours are load-bearing gets a white badge rather than the
       flatten-to-white filter the other logos take. */
    background: #fff;
    border-radius: 50%;
    padding: 5px;
  }
  .event-card__status {
    display: inline-block;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #000;
    background: var(--color-accent);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    margin: 0;
  }
  .event-card__status--muted { color: var(--color-text-muted); background: transparent; border: 1px solid var(--color-border-loud); }
  .event-card__title { font-size: clamp(23px, 2.5vw, 29px); line-height: 1.05; letter-spacing: -0.015em; margin: 16px 0 8px; }
  .event-card__meta { font-weight: 600; font-size: 12px; letter-spacing: 0.06em; color: var(--color-gold); margin: 0 0 12px; }
  .card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

  @media (max-width: 560px) {
    .event-card { grid-template-columns: 1fr; gap: 14px; }
    .event-card__date { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; }
    /* Single column here, so drop the explicit placement and let the mark
       stack between the date and the body. */
    .event-card--branded { grid-template-rows: none; }
    .event-card--branded .event-card__body { grid-column: 1; grid-row: auto; }
    .event-card__logo { grid-column: 1; grid-row: auto; width: 56px; height: 56px; margin-top: 0; }
  }

  /* -- Final CTA / newsletter -- */
  .cta-final {
    padding: var(--section-padding-y-lg) 0 clamp(30px, 4vw, 48px);
    background: radial-gradient(120% 100% at 50% 100%, #2a1108 0%, #0b0503 55%, #000 100%);
    border-top: 1px solid var(--color-border);
    text-align: center;
  }
  .cta-final__actions { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
  .cta-final__meta { font-weight: 600; font-size: 12px; color: var(--color-text-label); margin: 18px 0 0; }
  .newsletter { max-width: 460px; margin: clamp(48px, 6vw, 78px) auto 0; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.16); text-align: left; }
  .newsletter__eyebrow { font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); margin: 0 0 10px; }
  .newsletter__lead { margin: 0 0 14px; font-size: 16px; color: var(--color-text-muted); }
  .newsletter iframe { border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; }
  .newsletter--bare { margin-top: clamp(20px, 3vw, 30px); padding-top: 0; border-top: 0; }

  /* -- Footer / floating controls -- */
  .site-footer { background: var(--color-bg); padding: 26px 0 96px; border-top: 1px solid var(--color-border); }
  .site-footer__row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-faint);
  }

  .back-to-top {
    position: fixed;
    right: 14px;
    bottom: 84px;
    z-index: 44;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(242, 101, 34, 0.55);
    background: rgba(10, 10, 10, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--color-accent);
    font-weight: 800;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast), background var(--transition-fast);
    opacity: 0;
    pointer-events: none;
  }
  .back-to-top:hover, .back-to-top:focus-visible { background: var(--color-accent); color: #000; }
  .back-to-top.is-visible { opacity: 1; pointer-events: auto; }

  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: #0a0a0a;
    border-top: 1px solid var(--color-accent);
    padding: 10px clamp(14px, 4vw, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .mobile-bar__title { font-weight: 800; text-transform: uppercase; font-size: 16px; color: var(--color-text); }
  .mobile-bar__subtitle { display: block; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; color: var(--color-text-label); }

  /* Reserve space so the fixed mobile CTA bar never covers the last section's content. */
  body { padding-bottom: 76px; }
}