/*
 * Steady Thread Marketing stylesheet (P0-28)
 * Homepage-specific layout and visual patterns.
 * All color/type/spacing references use semantic tokens from tokens.css.
 * NO raw hex (except rgba overlays where required by spec), NO inline style=, NO Tailwind.
 *
 * Background images: hero and quote break use absolute-positioned <img> elements
 * plus gradient overlay <div>s so Rails asset_path fingerprinting works correctly
 * without requiring CSS embedding or inline style= attributes.
 *
 * Cascade layer: @layer components (declared in tokens.css)
 * Loaded after tokens.css + application.bootstrap.scss.
 */

@layer components {

  /* =========================================================================
     Nav: absolute overlay on hero, transparent background
     ========================================================================= */
  .st-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }

  .st-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--space-32);
  }

  .st-nav__logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-on-surface-dark);
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  .st-nav__logo-dot {
    color: var(--color-primary);
  }

  .st-nav__links {
    display: flex;
    gap: var(--space-32);
    align-items: center;
    color: var(--color-on-surface-dark);
    font-weight: 600;
    font-size: 0.92rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .st-nav__links a {
    color: inherit;
    text-decoration: none;
    opacity: 0.82;
    transition: opacity var(--motion-fast) var(--motion-curve-ease-out);
  }

  .st-nav__links a:hover {
    opacity: 1;
  }

  .st-nav__cta {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    text-decoration: none;
    /* Transparent 2px border matches the outlined Log in button's box, so the
       two sit at the same height beside each other. */
    border: 2px solid transparent;
    padding: var(--space-12) var(--space-24);
    border-radius: var(--radius-md);
    font-weight: 800;
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
  }

  /* Right-hand group: the section links plus the two buttons. The buttons are
     siblings of the list, not items in it, so the mobile rule below can hide
     the list without taking the way in with it. */
  .st-nav__right {
    display: flex;
    align-items: center;
    gap: var(--space-32);
    color: var(--color-on-surface-dark);
  }

  /* Log in / Dashboard: the ghost signal (2px currentColor border, volt fill on
     hover) at the nav CTA's geometry, so it reads as a button beside the filled
     CTA without competing with it. currentColor inherits the nav's white on the
     hero photo. */
  .st-nav__login {
    color: inherit;
    text-decoration: none;
    border: 2px solid currentColor;
    border-radius: var(--radius-md);
    padding: var(--space-12) var(--space-24);
    font-weight: 800;
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
    white-space: nowrap;
    transition: var(--motion-hover);
  }

  .st-nav__login:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
  }

  .st-nav__login:focus-visible {
    box-shadow: var(--elevation-focus-ring);
  }

  /* Mid volt-hover the fill is volt, and volt with an orange ring is banned
     (style guide Do Not), so a focused-and-hovered button rings in ink. */
  .st-nav__login:focus-visible:hover {
    box-shadow: var(--elevation-focus-ring-ink);
  }

  /* The section anchors hide FIRST, and they hide earlier than they used to.
     Adding the login button pushed the nav's required width from about 798
     pixels to about 993 (the signed-in "Dashboard" label is the widest case),
     so the old 820 breakpoint now sits well below the point where the row stops
     fitting, and everything between the two wrapped: the wordmark collided with
     the first anchor and the CTA broke across two lines. The anchors are
     convenience jumps to sections the visitor scrolls past anyway, so they are
     what gives way; the way in and the CTA have to survive. */
  @media (max-width: 1023px) {
    .st-nav__links {
      display: none;
    }
  }

  @media (max-width: 820px) {
    /* The filled CTA stays hidden here, as it always has: the wordmark, Log in,
       and Get early access together need about 457 pixels, which overflows every
       common phone. The page carries the same CTA in the hero just below, so
       the way IN is what has to survive this second breakpoint. */
    .st-nav__cta {
      display: none;
    }

    .st-nav__right {
      gap: var(--space-8);
    }

    .st-nav__login {
      padding: var(--space-8) var(--space-12);
      font-size: 0.75rem;
    }
  }

  /* =========================================================================
     Hero: full-bleed photo, dark gradient, content bottom-left.
     Uses absolute-positioned <img> (so Rails asset_path fingerprinting works)
     plus a gradient overlay <div>. No inline style=.
     ========================================================================= */
  .st-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: flex-end;
    color: var(--color-on-surface-dark);
    background-color: var(--color-surface-dark);
    overflow: hidden;
  }

  /* Volt-colored inline text (no highlight box) for hero emphasis */
  .st-volt-text {
    color: var(--color-accent);
  }

  /* Background photo: covers entire hero behind all content */
  .st-hero__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    z-index: 0;
  }

  /* Gradient overlay: dark gradient for text legibility (spec: 55% top to 92% bottom) */
  .st-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      180deg,
      var(--color-scrim-55) 0%,
      var(--color-scrim-35) 40%,
      var(--color-scrim-92) 100%
    );
  }

  .st-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--space-32);
    /* Reserve room for the absolute-positioned nav: on short windows the
       bottom-anchored content otherwise slides up behind the wordmark.
       Hero uses min-height, so the section grows instead of overlapping. */
    padding-top: calc(var(--space-96) + var(--space-24));
    padding-bottom: var(--space-72);
    text-align: left;
  }

  .st-hero__eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .st-hero__h1 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0.005em;
    font-size: clamp(2.9rem, 8.5vw, 7.2rem);
    max-width: 15ch;
    margin-top: var(--space-16);
    margin-bottom: var(--space-24);
    color: var(--color-on-surface-dark);
  }

  .st-hero__lead {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    max-width: 600px;
    /* Slightly lifted warm off-white for subtext on dark */
    color: var(--color-surface-warm-tint);
    margin-bottom: var(--space-32);
    font-weight: 500;
    line-height: 1.55;
  }

  .st-hero__cta-row {
    display: flex;
    gap: var(--space-16);
    flex-wrap: wrap;
    align-items: center;
  }

  /* =========================================================================
     Stat band: ink background, 3-col, huge orange Anton numbers
     ========================================================================= */
  .st-stat-band {
    background-color: var(--color-surface-dark);
    color: var(--color-on-surface-dark);
  }

  .st-stat-band__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--space-32);
  }

  .st-stat-band__cell {
    padding: var(--space-48) var(--space-32);
    border-left: 1px solid var(--color-border);
  }

  .st-stat-band__cell:first-child {
    border-left: none;
    padding-left: 0;
  }

  .st-stat-band__number {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 4.6rem);
    color: var(--color-primary);
    line-height: 0.9;
    text-transform: uppercase;
  }

  .st-stat-band__label {
    margin-top: var(--space-12);
    /* Slightly lifted text on dark -- between muted and white per spec */
    color: var(--color-surface-lifted);
    font-size: 1rem;
    max-width: 30ch;
    line-height: 1.5;
  }

  .st-stat-band__label strong {
    color: var(--color-on-surface-dark);
    font-weight: 700;
  }

  .st-stat-band__cite {
    display: block;
    margin-top: var(--space-8);
    font-size: 0.74rem;
    color: var(--color-muted);
    font-style: normal;
    letter-spacing: 0.03em;
  }

  /* Citation links inside the stat band (linked primary sources) */
  .st-stat-band__cite a {
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: var(--space-2);
  }

  .st-stat-band__cite a:hover {
    color: var(--color-on-surface-dark);
  }

  @media (max-width: 820px) {
    .st-stat-band__grid {
      grid-template-columns: 1fr;
    }

    .st-stat-band__cell {
      border-left: none;
      border-top: 1px solid var(--color-border);
      padding-left: 0;
    }

    .st-stat-band__cell:first-child {
      border-top: none;
    }
  }

  /* =========================================================================
     Page sections: alternating rhythm
     ========================================================================= */
  .st-marketing-section {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
  }

  .st-marketing-wrap {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--space-32);
  }

  /* =========================================================================
     Eyebrow label (orange small-caps above section headlines)
     ========================================================================= */
  .st-eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  /* =========================================================================
     Split section: copy + photo side by side
     ========================================================================= */
  .st-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-72);
    align-items: center;
  }

  .st-split__kicker {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.05;
    text-transform: uppercase;
    margin-top: var(--space-16);
    margin-bottom: var(--space-24);
    color: var(--color-on-surface);
  }

  .st-split__kicker--dark {
    color: var(--color-on-surface-dark);
  }

  .st-split__kicker .st-hl,
  .st-hl {
    color: var(--color-primary);
  }

  .st-split__lead {
    font-size: 1.15rem;
    /* Body text on light section -- dark warm grey */
    color: var(--color-on-surface-dim);
    max-width: 46ch;
    line-height: 1.6;
  }

  .st-split__lead strong {
    color: var(--color-on-surface);
  }

  .st-split__img {
    width: 100%;
    border-radius: var(--radius-lg);
    display: block;
    aspect-ratio: 4 / 3.2;
    object-fit: cover;
  }

  @media (max-width: 820px) {
    .st-split {
      grid-template-columns: 1fr;
      gap: var(--space-32);
    }

    .st-split__imgwrap {
      order: -1;
    }
  }

  /* =========================================================================
     How it works: dark section, 3-col steps grid
     ========================================================================= */
  .st-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-48);
    margin-top: var(--space-16);
  }

  .st-step__number {
    font-family: var(--font-display);
    font-size: 3.4rem;
    color: var(--color-accent);
    line-height: 1;
  }

  .st-step__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-16);
    margin-bottom: var(--space-8);
  }

  .st-step__head h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--color-on-surface-dark);
    text-transform: uppercase;
  }

  .st-step__slash {
    color: var(--color-primary);
  }

  .st-step p {
    /* Body text on ink section -- warm lighter grey */
    color: var(--color-on-ink-dim);
    line-height: 1.6;
  }

  @media (max-width: 820px) {
    .st-steps {
      grid-template-columns: 1fr;
    }
  }

  /* =========================================================================
     Why it pays: 2-col split with figure card
     ========================================================================= */
  .st-pays-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-72);
    align-items: center;
  }

  /* Figure card: ink background, volt stat number, orange bottom accent */
  .st-figure-card {
    background-color: var(--color-surface-dark);
    color: var(--color-on-surface-dark);
    border-radius: var(--radius-xl);
    padding: var(--space-48);
    border-bottom: var(--elevation-rim-accent);
    box-shadow: var(--elevation-shadow-md);
  }

  .st-figure-card__amount {
    font-family: var(--font-display);
    font-size: clamp(4rem, 9vw, 6.2rem);
    color: var(--color-accent);
    line-height: 0.85;
    text-transform: uppercase;
  }

  .st-figure-card__caption {
    color: var(--color-surface-lifted);
    margin-top: var(--space-16);
    font-size: 1.05rem;
    line-height: 1.5;
  }

  .st-figure-card__small {
    display: block;
    margin-top: var(--space-24);
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.5;
  }

  @media (max-width: 820px) {
    .st-pays-grid {
      grid-template-columns: 1fr;
      gap: var(--space-32);
    }
  }

  /* =========================================================================
     Image quote break: full-bleed photo, left-weighted dark gradient.
     Uses absolute-positioned <img> + overlay <div>. No inline style=.
     ========================================================================= */
  .st-quote-break {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    color: var(--color-on-surface-dark);
    background-color: var(--color-surface-dark);
    overflow: hidden;
  }

  /* Background photo: covers entire quote break */
  .st-quote-break__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 0;
  }

  /* Left-weighted gradient overlay (spec: 86% left to 50% right) */
  .st-quote-break__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      var(--color-scrim-86) 0%,
      var(--color-scrim-50) 100%
    );
  }

  .st-quote-break__inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--space-32);
    width: 100%;
  }

  .st-quote-break__text {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    max-width: 18ch;
    text-transform: uppercase;
    line-height: 0.98;
  }

  /* =========================================================================
     Trust trio: 3-col with orange accent bar
     ========================================================================= */
  .st-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-48);
  }

  .st-trust-item__bar {
    width: var(--size-accent-bar-w);
    height: var(--size-accent-bar-h);
    background-color: var(--color-primary);
    margin-bottom: var(--space-16);
    border-radius: var(--radius-sm);
  }

  .st-trust-item h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-8);
    color: var(--color-on-surface);
    text-transform: uppercase;
  }

  .st-trust-item p {
    color: var(--color-on-surface-dim);
    line-height: 1.6;
  }

  @media (max-width: 820px) {
    .st-trust-grid {
      grid-template-columns: 1fr;
    }
  }

  /* =========================================================================
     Final CTA band: orange background, ink-colored button
     ========================================================================= */
  .st-final-cta {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    text-align: center;
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
  }

  .st-final-cta__eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-on-surface);
  }

  .st-final-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 5rem);
    max-width: 16ch;
    margin-inline: auto;
    margin-bottom: var(--space-16);
    line-height: 0.95;
    color: var(--color-on-primary);
    text-transform: uppercase;
  }

  .st-final-cta__lead {
    max-width: 34ch;
    margin-inline: auto;
    margin-bottom: var(--space-32);
    font-weight: 600;
    color: var(--color-on-primary);
    opacity: 0.95;
    line-height: 1.5;
  }

  /* =========================================================================
     Waitlist form: scoped inside the orange final-CTA section.
     All color references use semantic tokens. No raw hex, no inline style=.
     BETA-13
     ========================================================================= */

  /* Wrapper constrains form width and centers it on the orange ground */
  .st-waitlist-wrap {
    max-width: 480px;
    margin-inline: auto;
    margin-top: var(--space-32);
  }

  /* Form container: paper card on the orange ground */
  .st-waitlist-form {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-32);
  }

  /* Submit button: full-width inside the form */
  .st-waitlist-form .btn {
    width: 100%;
  }

  /* Flash messages: themed alerts above the form */
  .st-waitlist-flash {
    max-width: 480px;
    margin-inline: auto;
    margin-bottom: var(--space-16);
    padding: var(--space-16) var(--space-24);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-align: left;
  }

  .st-waitlist-flash--success {
    background-color: var(--color-success);
    color: var(--color-on-surface-dark);
  }

  .st-waitlist-flash--error {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    border-left: 4px solid var(--color-primary);
  }

  /* Final CTA button: ink background with white text (on the orange section) */
  .st-btn--ink-cta {
    --bs-btn-bg:                 var(--color-surface-dark) !important;
    --bs-btn-border-color:       var(--color-surface-dark) !important;
    --bs-btn-hover-bg:           var(--color-on-surface) !important;
    --bs-btn-hover-border-color: var(--color-on-surface) !important;
    --bs-btn-color:              var(--color-on-surface-dark) !important;
    --bs-btn-hover-color:        var(--color-on-surface-dark) !important;

    /* Override the orange hard shadow with a dark one */
    box-shadow: var(--elevation-shadow-ink-hard) !important;

    &:active {
      box-shadow: var(--elevation-shadow-ink-hard-pressed) !important;
    }
  }

  /* =========================================================================
     Final CTA: slim variant (modal flow -- reduced padding, no full-bleed band)
     ========================================================================= */
  .st-final-cta--slim {
    padding-top: var(--space-72);
    padding-bottom: var(--space-72);
  }

  /* Early-access CTA button: ink on the orange section */
  .st-btn--early-access {
    display: inline-block;
    background-color: var(--color-surface-dark);
    color: var(--color-on-surface-dark);
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
    padding: var(--space-16) var(--space-48);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    box-shadow: var(--elevation-shadow-ink-hard);
    transition: var(--motion-btn-press);
  }

  .st-btn--early-access:hover {
    background-color: var(--color-surface-dark-2);
  }

  .st-btn--early-access:active {
    box-shadow: var(--elevation-shadow-ink-hard-pressed);
    transform: translateY(4px);
  }

  .st-btn--early-access:focus-visible {
    outline: none;
    box-shadow: var(--elevation-focus-ring);
  }

  .st-final-cta__modal-host {
    margin-top: var(--space-32);
  }

  /* =========================================================================
     Modal overlay (CUX-homepage, modal_controller.js)
     Bootstrap JS is not loaded; Stimulus drives open/close state.
     ========================================================================= */

  /* Overlay: hidden by default; full-viewport scrim */
  .st-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    align-items: center;
    justify-content: center;
  }

  .st-modal--open {
    display: flex;
  }

  /* Backdrop: semi-transparent scrim behind the dialog */
  .st-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--color-scrim-55);
  }

  /* Dialog: the white card centered over the backdrop */
  .st-modal__dialog {
    position: relative;
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-shadow-lg);
    width: min(var(--size-modal-dialog-max-w), calc(100vw - var(--space-32)));
    max-height: calc(100vh - var(--space-96));
    overflow-y: auto;
    z-index: 1;
  }

  /* Header: title + close button */
  .st-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-24) var(--space-32) var(--space-16);
    border-bottom: 1px solid var(--color-surface-warm-tint);
  }

  .st-modal__title {
    font-family: var(--font-display);
    font-size: var(--type-h2-size);
    text-transform: uppercase;
    margin: 0;
    color: var(--color-on-surface);
  }

  .st-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-muted);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
    transition: color var(--motion-fast) var(--motion-curve-ease-out);
  }

  .st-modal__close:hover {
    color: var(--color-on-surface);
  }

  .st-modal__close:focus-visible {
    outline: none;
    box-shadow: var(--elevation-focus-ring);
  }

  /* Body: the form content */
  .st-modal__body {
    padding: var(--space-24) var(--space-32) var(--space-32);
  }

  /* Inside the modal, the form card background is transparent (the dialog is already white) */
  .st-modal__body .st-waitlist-form {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
  }

  /* =========================================================================
     Footer
     ========================================================================= */
  .st-footer {
    background-color: var(--color-surface-dark);
    color: var(--color-muted);
    padding-top: var(--space-48);
    padding-bottom: var(--space-48);
    font-size: 0.9rem;
  }

  .st-footer__inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-16);
    align-items: center;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--space-32);
  }

  .st-footer__logo {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--color-muted);
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  .st-footer__logo-dot {
    color: var(--color-primary);
  }

  /* Footer legal links (privacy + terms nav) */
  .st-footer__legal-links {
    display: flex;
    gap: var(--space-24);
    align-items: center;
  }

  .st-footer__legal-link {
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: var(--space-2);
    font-size: 0.9rem;
    transition: color var(--motion-fast) var(--motion-curve-ease-out);
  }

  .st-footer__legal-link:hover {
    color: var(--color-on-surface-dark);
  }

  /* =========================================================================
     Legal pages: nav, header, draft banner, body, content
     Used by privacy.html.erb and terms.html.erb
     ========================================================================= */

  /* Nav: light variant (legal pages have a paper background, not hero photo) */
  .st-nav--light {
    position: relative;
    background-color: var(--color-surface-dark);
  }

  .st-nav__logo--ink {
    color: var(--color-on-surface-dark);
  }

  .st-nav__links--ink a,
  .st-nav__links--ink {
    color: var(--color-on-surface-dark);
  }

  .st-legal-nav__back {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
    transition: color var(--motion-fast) var(--motion-curve-ease-out);
  }

  .st-legal-nav__back:hover {
    color: var(--color-on-surface-dark);
  }

  /* Legal header: ink band with page title */
  .st-legal-header {
    background-color: var(--color-surface-dark);
    color: var(--color-on-surface-dark);
    padding-top: var(--space-72);
    padding-bottom: var(--space-72);
  }

  .st-legal-header h1 {
    font-family: var(--font-display);
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-lh);
    letter-spacing: var(--type-h1-tracking);
    text-transform: uppercase;
    color: var(--color-on-surface-dark);
    margin-top: var(--space-12);
    margin-bottom: 0;
  }

  /* Draft banner: volt accent strip below the header */
  .st-legal-draft-banner {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .st-legal-draft-banner strong {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Legal page body: paper background, generous vertical rhythm */
  .st-legal-body {
    background-color: var(--color-surface);
    padding-top: var(--space-72);
    padding-bottom: var(--space-96);
  }

  /* Legal content: constrained readable width, long-form typography */
  .st-legal-content {
    max-width: 68ch;
  }

  .st-legal-content p {
    font-size: var(--type-body-size);
    line-height: var(--type-body-lh);
    color: var(--color-on-surface-dim);
    margin-bottom: var(--space-24);
  }

  .st-legal-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-on-surface);
    margin-top: var(--space-48);
    margin-bottom: var(--space-16);
    letter-spacing: 0.01em;
  }

  .st-legal-content h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin-top: var(--space-24);
    margin-bottom: var(--space-8);
    text-transform: none;
    letter-spacing: 0;
  }

  .st-legal-content ul {
    padding-left: var(--space-24);
    margin-bottom: var(--space-24);
  }

  .st-legal-content ul li {
    font-size: var(--type-body-size);
    line-height: var(--type-body-lh);
    color: var(--color-on-surface-dim);
    margin-bottom: var(--space-8);
  }

  .st-legal-content ul li strong {
    color: var(--color-on-surface);
    font-weight: 700;
  }

  .st-legal-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: var(--space-2);
  }

  .st-legal-content a:hover {
    color: var(--color-on-surface);
  }

  .st-legal-effective {
    font-size: var(--type-small-size);
    color: var(--color-muted);
    font-style: italic;
    margin-bottom: var(--space-32);
  }

  .st-legal-cross-link {
    margin-top: var(--space-48);
    padding-top: var(--space-24);
    border-top: 1px solid var(--color-surface-warm-tint);
    font-size: var(--type-small-size);
    color: var(--color-muted);
  }

}