/* Marketing pages (/, /terms, /privacy; VCF-28). Layout only: every color is a token from tokens.css. */
body.site { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
body.site.menu-open { overflow: hidden; }
.site a:focus-visible, .site button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Header + menu. Mobile: the menu is a full-screen sheet under the header; from 768px it is inline. */
.site-header { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto; padding: 56px 30px 0; background: var(--bg); }
.site-logo, .site-menu-toggle { position: relative; z-index: 30; }
.site-logo { display: inline-flex; align-items: center; min-height: 44px; }
.site-logo img { display: block; width: 83px; height: auto; }
.site-menu-toggle { display: none; align-items: center; justify-content: center; width: 47px; height: 47px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; }
.js .site-menu-toggle { display: inline-flex; }
.site-menu-toggle .bar { display: block; width: 24px; height: 2px; margin: 3px 0; background: currentColor; }

.site-menu { padding: 24px 23px 0; }
.js .site-menu:not([hidden]) { position: fixed; inset: 0; z-index: 20; overflow-y: auto; padding: 121px 23px 0; background: var(--bg); display: flex; flex-direction: column; }
.site-cta { display: flex; gap: 20px; margin: 0 0 40px; }
.site-cta .btn { flex: 1 1 0; min-height: 48px; padding: 0 16px; font-size: 0.75rem; letter-spacing: 0.03em; }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.site-links { list-style: none; margin: 0 0 40px; padding: 0; text-align: center; }
.site-links a { display: flex; align-items: center; justify-content: center; min-height: 64px; font-size: 2rem; font-weight: 500; text-decoration: none; }
.site-menu .site-footer { margin-top: auto; }
.label-long { display: none; }

/* Footer (also repeated at the bottom of the menu sheet on mobile). */
.site-footer { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 30px 0; text-align: center; color: var(--muted); font-size: 0.75rem; font-weight: 300; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--muted); }
.site-footer .copyright { letter-spacing: 0.02em; }
.site-legal { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; list-style: none; margin: 4px 0 0; padding: 0; }
.site-legal li + li { position: relative; }
.site-legal li + li::before { content: ""; position: absolute; left: 0; top: 50%; height: 16px; transform: translateY(-50%); border-left: 1px solid var(--muted); }
.site-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }
.site-footer-links { display: none; }

/* Page content. */
.site-main { flex: 1 0 auto; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 30px 56px; }
.site-main h1 { margin: 0; font-weight: 400; overflow-wrap: anywhere; }
.accent, .hl-b { color: var(--accent); }

.home-hero h1 { margin-top: 56px; font-size: 2.4375rem; line-height: 1; letter-spacing: -0.05em; }
.btn-sm-cta { min-height: 44px; padding: 0 28px; font-size: 0.875rem; letter-spacing: 0.08em; font-weight: 600; }
.home-hero .btn { margin-top: 32px; }
.eyebrow { margin: 40px 0 0; color: var(--accent); font-size: 1.125rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; }
.lead { margin: 8px 0 0; font-size: 1.125rem; font-weight: 300; line-height: 1.3; }
.lead + .lead { margin-top: 1.3em; }

.home-image { position: relative; margin: 40px 0 0; }
.home-image img { display: block; width: 100%; height: auto; border-radius: 36px; aspect-ratio: 360 / 399; object-fit: cover; }
.home-image .btn { position: absolute; left: 20px; right: 20px; bottom: 20px; margin: 0; }

.steps { margin: 56px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 40px; }
.step-no { margin: 0 0 12px; color: var(--accent); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.step h2 { margin: 0 0 16px; font-size: 2rem; font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; text-transform: none; }
.step p { margin: 0; font-size: 1.125rem; font-weight: 300; line-height: 1.3; }
.step p + p { margin-top: 1.3em; }
.step .strong { font-weight: 400; }
.step .note { margin-top: 12px; color: var(--muted); font-size: 0.75rem; }
.step .note::before { content: "\2022\00a0"; color: var(--accent); }

.home-close { margin: 56px 0 0; padding: 36px 28px 26px; border-radius: 36px; background: var(--surface); text-align: left; }
.home-close h2 { margin: 0; font-size: 2rem; font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; text-transform: none; }
.home-close .lead { margin: 20px 0 32px; }
.btn-get { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 68px; padding: 0 8px 0 26px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.04em; text-decoration: none; text-transform: none; }
.btn-get .arrow { display: inline-flex; align-items: center; justify-content: center; width: 53px; height: 53px; border-radius: 50%; background: var(--bg); color: var(--accent); }

/* Legal pages: one readable column. */
.legal { max-width: 760px; margin: 0 auto; padding-top: 48px; }
.legal h1 { margin-bottom: 8px; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.03em; }
.legal-body { font-size: 1rem; font-weight: 300; line-height: 1.4; }
.legal-body p, .legal-body ul { margin: 0 0 0.9em; }
.legal-body ul { padding-left: 1.4em; }
.legal-body li { margin-bottom: 0.3em; }
.legal-body h2 { margin: 1.6em 0 0.5em; font-size: 1rem; font-weight: 500; text-transform: none; }
.legal-body .sub { margin-bottom: 0.4em; }
.legal-body a { color: var(--fg); }

@media (min-width: 768px) {
  .site-header { padding-top: 68px; }
  .site-logo img { width: 150px; }
  .site-menu-toggle { display: none !important; }
  .site-menu, .js .site-menu:not([hidden]) { position: static; display: flex; flex-direction: row-reverse; align-items: center; gap: 28px; padding: 0; overflow: visible; background: transparent; }
  .site-menu[hidden] { display: flex !important; }
  .site-header { flex-wrap: nowrap; }
  .site-header .site-menu { margin: 0; }
  .site-links { margin: 0; display: flex; gap: 8px; }
  .site-links a { min-height: 44px; padding: 0 12px; font-size: 0.875rem; font-weight: 300; letter-spacing: 0.02em; text-transform: uppercase; }
  .site-cta { order: -1; flex-direction: row-reverse; margin: 0; gap: 12px; }
  .label-short { display: none; }
  .label-long { display: inline; }
  .site-cta .btn { flex: none; min-width: 0; min-height: 44px; padding: 0 28px; font-size: 0.875rem; letter-spacing: 0.03em; }
  .site-cta .btn-ink { background: transparent; color: var(--fg); min-width: 0; padding: 0 12px; font-weight: 700; }
  .site-menu .site-footer { display: none; }
  .site-footer { padding-top: 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left; }
  .site-footer-links { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
  .site-footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none; }
  .site-footer .site-legal { grid-column: 2; grid-row: 1; margin: 0; }
  .site-footer .copyright { grid-column: 3; text-align: right; }
  .site-footer-links { grid-column: 1; grid-row: 1; }
  .site-footer .powered-by { grid-column: 1 / -1; grid-row: 2; justify-self: center; }

  .home-hero { display: contents; }
  .home-hero h1 { grid-area: h1; margin-top: 56px; font-size: clamp(2.75rem, 4.6vw, 4rem); }
  .hl-a { color: var(--accent); }
  .hl-b { color: var(--fg); }
  .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h1 img" "text img" "btn img"; grid-template-rows: auto auto 1fr; column-gap: 64px; align-items: start; }
  .home-grid > div { grid-area: text; }
  .home-hero .btn { grid-area: btn; justify-self: start; margin-top: 40px; }
  .home-image { grid-area: img; margin: 56px calc(-1 * max(30px, 50vw - 570px)) 0 0; }
  .home-image img { aspect-ratio: 5 / 3; border-radius: 72px 0 0 72px; }
  .home-image .btn { display: none; }
  .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 64px; }
  .home-close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 8px 48px; align-items: center; padding: 48px; }
  .home-close .lead { margin: 12px 0 0; }
  .home-close .btn-get { grid-column: 2; grid-row: 1 / span 2; }
  .legal { padding-top: 64px; }
}