/*
 * 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 {

  .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;
    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;
  }

  .st-nav__right {
    display: flex;
    align-items: center;
    gap: var(--space-32);
    color: var(--color-on-surface-dark);
  }

  .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);
  }

  .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) {
    .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;
    }
  }

  .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;
  }

  .st-volt-text {
    color: var(--color-accent);
  }

  .st-hero__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    z-index: 0;
  }

  .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);
    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;
    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;
  }

  .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);
    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;
  }

  .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;
    }
  }

  .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);
  }

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

  .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;
    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;
    }
  }

  .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 {
    color: var(--color-on-ink-dim);
    line-height: 1.6;
  }

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

  .st-pays-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-72);
    align-items: center;
  }

  .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);
    }
  }

  .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;
  }

  .st-quote-break__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 0;
  }

  .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;
  }

  .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;
    }
  }

  .st-audience {
    background-color: var(--color-surface);
  }

  .st-audience__choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
  }

  .st-audience__choice {
    display: flex;
    text-decoration: none;
    flex-direction: column;
    gap: var(--space-8);
    min-height: var(--size-tap-min);
    padding: var(--space-32);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface-dashboard);
    color: var(--color-on-surface);
    cursor: pointer;
    transition: var(--motion-hover);
  }

  .st-audience__choice:hover,
  .st-audience__choice:focus-visible {
    border-color: var(--color-primary);
  }

  .st-audience__choice-label {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.05;
    text-transform: uppercase;
  }

  .st-audience__choice-text {
    color: var(--color-on-surface-dim);
    line-height: 1.6;
  }

  .st-audience__radio--coaches:checked ~ .st-audience__choices .st-audience__choice--coaches {
    background-color: var(--color-surface-dark);
    border-color: var(--color-primary);
    color: var(--color-on-surface-dark);
    box-shadow: var(--elevation-shadow-md);
  }

  .st-audience__radio--coaches:checked ~ .st-audience__choices .st-audience__choice--coaches .st-audience__choice-text {
    color: var(--color-on-ink-dim);
  }

  .st-audience__choice:focus-visible,
  .st-audience__radio--coaches:focus-visible ~ .st-audience__choices .st-audience__choice--coaches {
    box-shadow: var(--elevation-focus-ring);
  }

  .st-audience__panel {
    display: none;
    margin-top: var(--space-48);
  }

  .st-audience__radio--coaches:checked ~ .st-audience__panel--coaches {
    display: block;
  }

  .st-audience__prompt {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-24);
  }

  .st-audience__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
  }

  .st-audience__option {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-32);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-dashboard);
  }

  .st-audience__option 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-audience__option p {
    color: var(--color-on-surface-dim);
    line-height: 1.6;
    flex-grow: 1;
  }

  .st-audience__link {
    font-weight: 800;
    color: var(--color-primary);
    text-decoration: none;
  }

  .st-audience__link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
  }

  .st-audience__option:hover {
    border-color: var(--color-primary);
  }

  .st-audience__link::after {
    content: " \2192";
  }

  .st-audience__link:hover {
    text-decoration: underline;
  }

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

  .st-hero--landing {
    min-height: 72vh;
  }

  .st-section--tint {
    background-color: var(--color-surface-warm-tint);
  }

  .st-section-lead {
    margin-bottom: var(--space-48);
    max-width: 60ch;
  }

  .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;
  }

  .st-waitlist-wrap {
    max-width: 480px;
    margin-inline: auto;
    margin-top: var(--space-32);
  }

  .st-waitlist-form {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-32);
  }

  .st-waitlist-form .btn {
    width: 100%;
  }

  .st-hero__flash {
    margin-bottom: var(--space-24);
  }

  .st-marketing-flash-band {
    background-color: var(--color-surface-dark);
  }

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

  .st-marketing-flash {
    max-width: 480px;
    padding: var(--space-16) var(--space-24);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-shadow-md);
    font-weight: 600;
    text-align: left;
  }

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

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

  .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;

    box-shadow: var(--elevation-shadow-ink-hard) !important;

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

  .st-final-cta--slim {
    padding-top: var(--space-72);
    padding-bottom: var(--space-72);
  }

  .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);
  }

  .st-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    align-items: center;
    justify-content: center;
  }

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

  .st-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--color-scrim-55);
  }

  .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;
  }

  .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);
  }

  .st-modal__body {
    padding: var(--space-24) var(--space-32) var(--space-32);
  }

  .st-modal__body .st-waitlist-form {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
  }

  .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);
  }

  .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);
  }

  .st-nav--light {
    position: relative;
    background-color: var(--color-surface-dark);
  }

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

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

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

  .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;
  }

  .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;
  }

  .st-legal-body {
    background-color: var(--color-surface);
    padding-top: var(--space-72);
    padding-bottom: var(--space-96);
  }

  .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);
  }

  .st-nav__links--ink li {
    list-style: none;
  }

  .st-blog-lede {
    max-width: 60ch;
    margin-top: var(--space-16);
    margin-bottom: 0;
    font-size: var(--type-body-size);
    line-height: var(--type-body-lh);
    color: var(--color-muted);
  }

  .st-blog-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    max-width: 68ch;
  }

  .st-blog-card {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
    border-bottom: 1px solid var(--color-surface-warm-tint);
  }

  .st-blog-card:first-child {
    padding-top: 0;
  }

  .st-blog-date {
    font-size: var(--type-small-size);
    font-weight: 600;
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .st-blog-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-top: var(--space-8);
    margin-bottom: var(--space-12);
  }

  .st-blog-card__title a {
    color: var(--color-on-surface);
    text-decoration: none;
  }

  .st-blog-card__title a:hover {
    color: var(--color-primary);
  }

  .st-blog-card__summary,
  .st-blog-empty {
    font-size: var(--type-body-size);
    line-height: var(--type-body-lh);
    color: var(--color-on-surface-dim);
    margin-bottom: 0;
  }

  .st-blog-eyebrow-link {
    color: inherit;
    text-decoration: none;
  }

  .st-blog-post__title {
    max-width: 24ch;
  }

  .st-blog-byline {
    margin-top: var(--space-16);
    margin-bottom: 0;
    font-size: var(--type-small-size);
    color: var(--color-muted);
  }

  .st-blog-article img {
    max-width: 100%;
    height: auto;
  }

  .st-blog-article ol {
    padding-left: var(--space-24);
    margin-bottom: var(--space-24);
  }

  .st-blog-article ol 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-blog-article blockquote {
    border-left: var(--space-4) solid var(--color-accent);
    padding-left: var(--space-16);
    margin: 0 0 var(--space-24);
  }

}