:root {
  color-scheme: light dark;
  --color-ink: #07090c;
  --color-paper: #f5f5f2;
  --color-flame: #ff5a1f;
  --color-flame-soft: #ff7643;
  --color-flame-text: #a82a00;
  --color-steel: #8c9199;
  --color-rule: rgba(7, 9, 12, 0.16);
  --color-rule-dark: rgba(255, 255, 255, 0.18);
  --max-width: 82rem;
  --font-sans: "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-ink); }
body { margin: 0; overflow-x: hidden; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.23em; }
a:focus-visible, summary:focus-visible { outline: 3px solid #35a7ff; outline-offset: 5px; }

.skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; translate: 0 -180%; padding: 0.75rem 1rem; background: white; color: black; font-weight: 700; }
.skip-link:focus { translate: 0; }

.site-header { position: absolute; z-index: 20; top: 0; left: 50%; display: grid; width: min(calc(100% - 3rem), var(--max-width)); min-height: 5.4rem; grid-template-columns: auto 1fr auto; align-items: center; translate: -50% 0; border-bottom: 1px solid var(--color-rule-dark); color: white; }
.brand { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; background: var(--color-flame); color: var(--color-ink); font-size: 0.67rem; font-weight: 850; letter-spacing: -0.05em; }
.brand-name { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; }
.primary-nav { justify-self: center; }
.primary-nav ul { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.primary-nav a, .nav-cta { color: rgba(255, 255, 255, 0.72); font-size: 0.8rem; font-weight: 650; text-decoration: none; transition: color 180ms ease; }
.primary-nav a:hover, .nav-cta:hover { color: white; }
.nav-cta { display: inline-flex; min-height: 2.45rem; align-items: center; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, 0.32); }
.menu-toggle { display: none; min-height: 2.75rem; align-items: center; gap: 0.7rem; padding: 0 0.9rem; border: 1px solid rgba(255, 255, 255, 0.32); background: transparent; color: white; font: inherit; font-size: 0.8rem; font-weight: 650; }
.menu-icon { position: relative; width: 1rem; height: 0.65rem; border-block: 1px solid currentColor; }
.menu-icon::after { position: absolute; top: 50%; left: 0; width: 100%; border-top: 1px solid currentColor; content: ""; }

.hero { position: relative; display: grid; min-height: 100svh; grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr); grid-template-rows: auto auto auto auto; align-content: center; gap: 1.3rem 3rem; padding: 9rem max(1.5rem, calc((100vw - var(--max-width)) / 2)) 5rem; overflow: hidden; background: var(--color-ink); color: white; }
.hero::after { position: absolute; z-index: 1; inset: 0 48% 0 0; background: linear-gradient(90deg, rgba(7, 9, 12, 1) 30%, rgba(7, 9, 12, 0)); content: ""; pointer-events: none; }
.hero > :not(.hero-art) { z-index: 2; grid-column: 1; }
.eyebrow { margin: 0; color: var(--color-flame-soft); font-size: 0.73rem; font-weight: 750; letter-spacing: 0.17em; text-transform: uppercase; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin-top: 0; line-height: 0.96; letter-spacing: -0.055em; }
h1 { max-width: 8ch; margin-bottom: 0; font-size: clamp(4.4rem, 10vw, 9.25rem); font-weight: 710; }
h1 em { color: var(--color-flame); font-style: normal; }
h2 { max-width: 17ch; margin-bottom: 1.4rem; font-size: clamp(3rem, 6.2vw, 6.4rem); font-weight: 680; }
h3 { margin-bottom: 0.6rem; font-size: clamp(1.35rem, 2vw, 1.7rem); }
.hero-summary { max-width: 30rem; margin: 0; color: rgba(255, 255, 255, 0.7); font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.75rem 0 0; }
.button { display: inline-flex; min-height: 3.2rem; align-items: center; justify-content: center; padding: 0 1.25rem; font-weight: 700; text-decoration: none; transition: background-color 180ms ease, color 180ms ease, translate 180ms ease; }
.button:hover { translate: 0 -2px; }
.button-primary { background: var(--color-flame); color: var(--color-ink); }
.button-primary:hover { background: #ef4810; }
.button-secondary { border: 1px solid rgba(255, 255, 255, 0.28); color: white; }
.hero-art { position: absolute; z-index: 0; inset: 0 0 0 38%; margin: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 61% center; opacity: 0.9; }
.hero-art figcaption { position: absolute; right: 2rem; bottom: 1.5rem; color: rgba(255, 255, 255, 0.48); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }

.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); padding-inline: max(1.5rem, calc((100vw - var(--max-width)) / 2)); background: white; }
.trust-strip p { margin: 0; padding: 2.2rem 2.2rem 2.2rem 0; color: #686d74; font-size: 0.9rem; }
.trust-strip p + p { padding-left: 2.2rem; border-left: 1px solid var(--color-rule); }
.trust-strip strong { color: var(--color-ink); font-size: 1rem; }

.section { padding: clamp(6rem, 12vw, 11rem) max(1.5rem, calc((100vw - var(--max-width)) / 2)); }
.section-intro, .section > p:not(.eyebrow) { max-width: 43rem; color: #60656c; font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.benefits { background: var(--color-paper); }
.benefits .eyebrow, .how-it-works .eyebrow, .faq .eyebrow, .support .eyebrow { color: var(--color-flame-text); }
.card-grid { display: grid; margin-top: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--color-rule); counter-reset: benefit; }
.card-grid article { display: grid; grid-template-columns: minmax(10rem, 0.48fr) minmax(0, 1fr); gap: 2rem; padding: 2.5rem 0; border-bottom: 1px solid var(--color-rule); counter-increment: benefit; }
.card-grid article::before { color: var(--color-flame-text); content: "0" counter(benefit); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.12em; }
.card-grid h3, .card-grid p { grid-column: 2; }
.card-grid h3 { margin-top: -1.4rem; }
.card-grid p { max-width: 38rem; margin: 0; color: #656a71; }

.plans { background: #101216; color: white; }
.plans > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.62); }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(4rem, 8vw, 7rem); border-block: 1px solid var(--color-rule-dark); }
.plan-card { min-height: 23rem; padding: 3rem 3rem 3rem 0; }
.plan-card + .plan-card { padding-left: 3rem; border-left: 1px solid var(--color-rule-dark); }
.plan-label { color: var(--color-flame-soft) !important; font-size: 0.74rem !important; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; }
.plan-card h3 { margin-top: 3.5rem; font-size: clamp(2.5rem, 4vw, 4.4rem); }
.plan-card p:not(.plan-label) { max-width: 24rem; color: rgba(255, 255, 255, 0.58); }
.disabled-action { display: inline-flex; min-height: 2.8rem; align-items: center; margin-top: 2rem; padding-inline: 1rem; border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.58); cursor: not-allowed; }

.how-it-works { background: white; }
.how-it-works ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: clamp(4rem, 8vw, 7rem) 0 0; padding: 0; border-top: 1px solid var(--color-rule); list-style: none; counter-reset: steps; }
.how-it-works li { display: grid; min-height: 20rem; align-content: start; gap: 1.3rem; padding: 2.5rem 2.5rem 0 0; counter-increment: steps; }
.how-it-works li + li { padding-left: 2.5rem; border-left: 1px solid var(--color-rule); }
.how-it-works li::before { color: var(--color-flame-text); content: "0" counter(steps); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.12em; }
.how-it-works li strong { font-size: 1.4rem; letter-spacing: -0.03em; }
.how-it-works li span { color: #656a71; }

.about { display: grid; grid-template-columns: minmax(11rem, 0.5fr) minmax(0, 1.5fr); gap: 2rem 5rem; background: var(--color-flame); color: var(--color-ink); }
.about .eyebrow { grid-row: 1 / 4; color: var(--color-ink); }
.about > p:not(.eyebrow) { color: var(--color-ink); }

.faq { background: var(--color-paper); }
.faq details { max-width: 58rem; margin-left: auto; border-top: 1px solid var(--color-rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--color-rule); }
.faq summary { padding: 1.65rem 3rem 1.65rem 0; cursor: pointer; font-size: 1.08rem; font-weight: 680; letter-spacing: -0.02em; }
.faq details p { max-width: 45rem; margin-top: 0; padding-bottom: 1.65rem; color: #60656c; }

.support { min-height: 70vh; display: grid; align-content: center; background: white; }
.support .button { width: fit-content; margin-top: 1.5rem; }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 2rem 4rem; padding: 4rem max(1.5rem, calc((100vw - var(--max-width)) / 2)); background: var(--color-ink); color: rgba(255, 255, 255, 0.55); font-size: 0.83rem; }
.site-footer p { margin: 0; }
.site-footer strong { color: white; }
.legal-nav { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 0.7rem 1.5rem; }
.legal-nav a { color: rgba(255, 255, 255, 0.68); }
.legal-nav a:hover { color: white; }

.legal-page { background: var(--color-paper); }
.legal-page .site-header { position: relative; left: auto; width: 100%; padding-inline: max(1.5rem, calc((100vw - var(--max-width)) / 2)); translate: none; background: var(--color-ink); }
.legal-page .site-header .brand { color: white; }
.legal-page .site-header .nav-cta { margin-left: auto; }
.legal-hero { padding: clamp(6rem, 11vw, 9rem) max(1.5rem, calc((100vw - var(--max-width)) / 2)) clamp(4rem, 8vw, 7rem); background: var(--color-ink); color: white; }
.legal-hero h1 { max-width: 12ch; font-size: clamp(3.5rem, 8vw, 7.5rem); }
.legal-hero .effective-date { margin: 1.5rem 0 0; color: rgba(255, 255, 255, 0.65); }
.legal-layout { display: grid; grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 1fr); gap: clamp(3rem, 8vw, 8rem); max-width: var(--max-width); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 1.5rem clamp(6rem, 10vw, 9rem); }
.legal-toc { align-self: start; position: sticky; top: 2rem; }
.legal-toc p { margin: 0 0 1rem; color: var(--color-flame-text); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; }
.legal-toc ol { margin: 0; padding-left: 1.2rem; color: #656a71; }
.legal-toc li + li { margin-top: 0.55rem; }
.legal-toc a { font-size: 0.9rem; }
.legal-copy { max-width: 48rem; }
.legal-copy > p:first-child { margin-top: 0; font-size: 1.2rem; line-height: 1.65; }
.legal-copy section { scroll-margin-top: 2rem; padding: 0 0 2.75rem; border-bottom: 1px solid var(--color-rule); }
.legal-copy section + section { padding-top: 2.75rem; }
.legal-copy h2 { max-width: none; margin-bottom: 1.1rem; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.05; }
.legal-copy h3 { margin-top: 1.7rem; font-size: 1.1rem; line-height: 1.2; letter-spacing: -0.02em; }
.legal-copy p, .legal-copy li { color: #3f444a; line-height: 1.75; }
.legal-copy li + li { margin-top: 0.55rem; }
.legal-copy a { color: #8e2600; font-weight: 650; }
.policy-note { padding: 1.2rem 1.4rem; border-left: 4px solid var(--color-flame); background: white; }

.js [data-reveal] { opacity: 0; transform: translateY(1.75rem); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 62rem) {
  .site-header { grid-template-columns: 1fr auto auto; gap: 0.75rem; }
  .primary-nav { grid-column: 1 / -1; justify-self: stretch; padding-bottom: 1rem; }
  .primary-nav ul { flex-wrap: wrap; gap: 0.8rem 1.5rem; }
  .js .menu-toggle { display: inline-flex; }
  .js .primary-nav { display: none; }
  .js .primary-nav.is-open { display: block; }
  .hero { min-height: 58rem; grid-template-columns: 1fr; align-content: end; padding-bottom: 4rem; }
  .hero-art { inset: 0 0 42% 18%; }
  .hero::after { inset: 0; background: linear-gradient(0deg, #07090c 26%, rgba(7, 9, 12, 0.2) 72%); }
  .hero > :not(.hero-art) { grid-column: 1; }
}

@media (max-width: 43rem) {
  .site-header { width: calc(100% - 2rem); grid-template-columns: 1fr auto; }
  .nav-cta { display: none; }
  .hero { min-height: 52rem; padding-inline: 1.25rem; }
  .hero-art { inset: 0 0 48% 0; }
  h1 { font-size: clamp(4rem, 21vw, 6rem); }
  .hero-actions, .hero-actions .button { width: 100%; }
  .trust-strip, .plan-grid, .how-it-works ol, .about, .site-footer { grid-template-columns: 1fr; }
  .trust-strip { padding-inline: 1.25rem; }
  .trust-strip p, .trust-strip p + p { padding: 1.5rem 0; border-left: 0; }
  .trust-strip p + p { border-top: 1px solid var(--color-rule); }
  .section { padding-inline: 1.25rem; }
  .card-grid article { grid-template-columns: 3rem 1fr; gap: 0.75rem; }
  .card-grid h3, .card-grid p { grid-column: 2; }
  .plan-card, .plan-card + .plan-card { min-height: 20rem; padding: 2.5rem 0; border-left: 0; }
  .plan-card + .plan-card { border-top: 1px solid var(--color-rule-dark); }
  .how-it-works li, .how-it-works li + li { min-height: auto; padding: 2rem 0; border-left: 0; border-bottom: 1px solid var(--color-rule); }
  .about { gap: 1rem; }
  .about .eyebrow { grid-row: auto; }
  .legal-nav { grid-column: auto; }
  .legal-page .site-header { min-height: 4.8rem; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; padding-bottom: 2rem; border-bottom: 1px solid var(--color-rule); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}
