/*
 * 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) !important;
    padding: var(--space-12) var(--space-24);
    border-radius: var(--radius-md);
    opacity: 1 !important;
    font-weight: 800;
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
  }

  @media (max-width: 820px) {
    .st-nav__links {
      display: none;
    }
  }

  /* =========================================================================
     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);
  }

}