/* Sorve site (marketing home + auth). Built on the Sorve Design System 1.0: tokens.css + sorve.css (sv-*), copied
   unchanged into assets/ds/. This file only adds the marketing layer (site-*, home-*, auth-*) and uses --sv-* tokens.
   Marketing type scale (not in the DS, which targets the 16 h/day app): Geist display sizes for hero and section heads. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --site-max: 1200px;
  --site-pad: 32px;
  --site-hero: 500 64px/68px var(--sv-font-family-brand);
  --site-hero-tracking: -0.035em;
  --site-h2: 500 40px/46px var(--sv-font-family-brand);
  --site-h2-tracking: -0.03em;
  --site-h3: 500 20px/28px var(--sv-font-family-brand);
  --site-lead: 400 18px/28px var(--sv-font-family-sans);
  --site-nav-h: 64px;
  /* Provider buttons follow Google's custom-button spec (fill/stroke/text), shared by all three for equal prominence. */
  --site-provider-bg: #FFFFFF;
  --site-provider-line: #747775;
  --site-provider-text: #1F1F1F;
}
.dark {
  --site-provider-bg: #131314;
  --site-provider-line: #8E918F;
  --site-provider-text: #E3E3E3;
}
html, body { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-nav-h) + 16px); }
body.sv-base { background: var(--sv-color-bg-page); min-height: 100vh; }
h1, h2, h3, h4, p { margin: 0; }
.site-wrap { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-pad); }
.site-lead { font: var(--site-lead); color: var(--sv-color-text-secondary); }
.site-h2 { font: var(--site-h2); letter-spacing: var(--site-h2-tracking); text-wrap: balance; }
.site-h3 { font: var(--site-h3); letter-spacing: -0.01em; }
.site-link { color: var(--sv-color-text-primary); text-decoration: underline; text-decoration-color: var(--sv-color-tint-primary); text-underline-offset: 3px; border-radius: var(--sv-radius-xs); }
.site-link:hover { text-decoration-color: currentColor; }
.site-btn-xl { height: 44px; padding: 0 var(--sv-space-5); font: var(--sv-type-body); font-weight: var(--sv-font-weight-medium); border-radius: var(--sv-radius-md); }

/* ---------- placeholder marker (social proof, pricing): always visible, never mistaken for real content ---------- */

/* ---------- top nav ---------- */
.site-nav { position: sticky; top: 0; z-index: var(--sv-z-sticky); height: var(--site-nav-h); background: color-mix(in srgb, var(--sv-color-bg-page) 86%, transparent); backdrop-filter: blur(var(--sv-blur-md)); -webkit-backdrop-filter: blur(var(--sv-blur-md)); border-bottom: 1px solid transparent; transition: border-color var(--sv-duration-base); }
.site-nav.is-scrolled { border-bottom-color: var(--sv-color-border-primary); }
.site-nav__in { height: 100%; display: flex; align-items: center; gap: var(--sv-space-2); }
.site-nav .sv-lockup { --sv-size-logo-sidebar: 24px; margin-right: var(--sv-space-6); padding: 0 4px; margin-left: -4px; height: 40px; }
.site-nav__links { display: flex; gap: 2px; }
.site-nav__links a { height: 40px; display: inline-flex; align-items: center; padding: 0 var(--sv-space-3); border-radius: var(--sv-radius-md); color: var(--sv-color-text-secondary); font: var(--sv-type-body); transition: background-color var(--sv-duration-fast), color var(--sv-duration-fast); }
.site-nav__links a:hover { color: var(--sv-color-text-primary); background: var(--sv-color-tint-tertiary); }
.site-nav .sv-spacer { flex: 1; }
.site-nav .sv-btn { height: 36px; padding: 0 var(--sv-space-3-5); font: var(--sv-type-body); font-weight: var(--sv-font-weight-medium); }
.site-nav__menu { display: none; }
.site-seg { padding: 2px; }
.site-seg button { height: 28px; padding: 0 var(--sv-space-2); font: var(--sv-type-caption); font-weight: var(--sv-font-weight-medium); }

/* mobile drawer */
.site-drawer { position: fixed; inset: var(--site-nav-h) 0 auto 0; z-index: var(--sv-z-drawer); background: var(--sv-color-bg-page); border-bottom: 1px solid var(--sv-color-border-primary); box-shadow: var(--sv-shadow-L4); padding: var(--sv-space-2) var(--sv-space-4) var(--sv-space-5); display: none; }
.site-drawer.is-open { display: block; animation: sv-fade var(--sv-duration-fast) var(--sv-easing-out); }
.site-drawer a.sv-row { min-height: 48px; font: var(--sv-type-lead); }
.site-drawer__prefs { display: flex; gap: var(--sv-space-2); align-items: center; padding: var(--sv-space-3) var(--sv-space-2) 0; border-top: 1px solid var(--sv-color-border-secondary); margin-top: var(--sv-space-2); }

/* ---------- home: hero ---------- */
.home-hero { padding-top: 88px; text-align: center; }
.home-hero .sv-t-eyebrow { display: inline-flex; align-items: center; gap: var(--sv-space-2); height: 28px; padding: 0 var(--sv-space-3); border-radius: var(--sv-radius-full); border: 1px solid var(--sv-color-border-primary); background: var(--sv-color-bg-elevated); color: var(--sv-color-text-secondary); }
.home-hero .sv-t-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--sv-color-accent-default); }
.home-hero h1 { font: var(--site-hero); letter-spacing: var(--site-hero-tracking); margin: var(--sv-space-6) auto 0; max-width: 880px; text-wrap: balance; }
.home-hero .site-lead { max-width: 640px; margin: var(--sv-space-5) auto 0; text-wrap: pretty; }
.home-hero__cta { display: flex; justify-content: center; gap: var(--sv-space-3); margin-top: var(--sv-space-8); flex-wrap: wrap; }
.home-hero__note { margin-top: var(--sv-space-4); font: var(--sv-type-meta); color: var(--sv-color-text-tertiary); }

/* product preview (illustrative; built from DS components) */
.home-preview { margin: 64px auto 0; max-width: 1080px; text-align: left; }
.home-preview__frame { background: var(--sv-color-bg-wash); border: 1px solid var(--sv-color-border-primary); border-radius: var(--sv-radius-xl); box-shadow: var(--sv-shadow-L4); padding: var(--sv-size-frame-inset); display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sv-size-frame-inset); }
.home-preview__chat { background: var(--sv-color-bg-page); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-L2); padding: var(--sv-space-4) var(--sv-space-6) var(--sv-space-5); min-width: 0; display: flex; flex-direction: column; }
.home-preview__bar { display: flex; align-items: center; gap: var(--sv-space-2); height: 32px; font: var(--sv-type-meta); color: var(--sv-color-text-secondary); margin-bottom: var(--sv-space-2); }
.home-preview__bar b { color: var(--sv-color-text-primary); font-weight: var(--sv-font-weight-medium); }
.home-preview__bar .sv-spacer { flex: 1; }
.home-preview .sv-msg p { color: var(--sv-color-text-primary); }
.home-preview .sv-step .sv-icon { color: var(--sv-color-text-tertiary); }
.home-preview .sv-step .ok { color: var(--sv-color-accent-text); }
.home-preview .sv-composer { height: auto; margin-top: auto; padding: var(--sv-space-2-5) var(--sv-space-3); }
.home-preview .sv-composer__ph { color: var(--sv-color-text-tertiary); padding: var(--sv-space-1) var(--sv-space-1) var(--sv-space-2); }
.home-preview__proof { background: var(--sv-color-bg-elevated); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-L2); outline: 1px solid var(--sv-color-border-secondary); padding: var(--sv-space-4) var(--sv-space-4-5); min-width: 0; }
.home-preview__proof .sv-panel__label:first-child { margin-top: 0; }
.home-preview__cap { margin-top: var(--sv-space-3); text-align: center; font: var(--sv-type-caption); color: var(--sv-color-text-tertiary); }
.verify-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--sv-color-accent-text); font: var(--sv-type-caption); font-weight: var(--sv-font-weight-medium); }

/* ---------- home: sections ---------- */
.home-sec { padding-top: 120px; }
.home-sec__head { max-width: 720px; }
.home-sec__head.center { margin: 0 auto; text-align: center; }
.home-sec__head .sv-t-eyebrow { display: block; margin-bottom: var(--sv-space-3); }
.home-sec__head .site-lead { margin-top: var(--sv-space-4); }


/* steps */
.home-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sv-grid-gutter); margin-top: 48px; counter-reset: st; }
.home-step { padding: var(--sv-space-5); border-radius: var(--sv-radius-card); background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); display: flex; flex-direction: column; gap: var(--sv-space-2); min-height: 220px; }
.home-step__n { font: var(--sv-type-meta); font-family: var(--sv-font-family-mono); color: var(--sv-color-text-tertiary); }
.home-step .sv-icon { color: var(--sv-color-text-secondary); margin: var(--sv-space-6) 0 var(--sv-space-1); }
.home-step p { color: var(--sv-color-text-secondary); font: var(--sv-type-body); }

/* modes */
.home-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-space-4); margin-top: 48px; }
.home-mode { border-radius: var(--sv-radius-xl); background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); padding: var(--sv-space-6); display: flex; flex-direction: column; gap: var(--sv-space-4); min-width: 0; }
.home-mode__head { display: flex; align-items: center; gap: var(--sv-space-2); }
.home-mode__head .sv-pill { margin-left: auto; }
.home-mode > p { color: var(--sv-color-text-secondary); }
.home-mode__demo { background: var(--sv-color-bg-wash); border-radius: var(--sv-radius-lg); padding: var(--sv-space-4); display: flex; flex-direction: column; gap: var(--sv-space-2-5); min-height: 196px; }
.home-mode__demo .sv-kv { border-color: var(--sv-color-border-primary); }
.home-mode ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sv-space-2); }
.home-mode li { display: flex; gap: var(--sv-space-2); align-items: flex-start; }
.home-mode li .sv-icon { margin-top: 2px; color: var(--sv-color-text-secondary); }
.home-code { font: var(--sv-type-code); font-family: var(--sv-font-family-mono); display: flex; flex-direction: column; gap: var(--sv-space-2); }
.home-code > div { display: flex; gap: var(--sv-space-2); align-items: center; min-width: 0; }
.home-code .k { color: var(--sv-color-text-tertiary); width: 40px; flex-shrink: 0; }
.home-code .add { color: var(--sv-color-accent-text); }
.home-code .term { background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); border-radius: var(--sv-radius-md); padding: var(--sv-space-2) var(--sv-space-3); display: block; color: var(--sv-color-text-secondary); white-space: pre; overflow: hidden; }
.home-mode__note { text-align: center; margin-top: var(--sv-space-5); font: var(--sv-type-meta); color: var(--sv-color-text-secondary); }

/* proof */
.home-proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.home-feats { display: flex; flex-direction: column; margin-top: var(--sv-space-8); }
.home-feat { display: flex; gap: var(--sv-space-3); padding: var(--sv-space-4) 0; border-top: 1px solid var(--sv-color-border-primary); }
.home-feat .sv-icon { margin-top: 2px; color: var(--sv-color-text-primary); }
.home-feat b { display: block; font-weight: var(--sv-font-weight-medium); }
.home-feat span { color: var(--sv-color-text-secondary); }
.home-log { background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); border-radius: var(--sv-radius-xl); box-shadow: var(--sv-shadow-L3); overflow: hidden; position: sticky; top: calc(var(--site-nav-h) + 24px); }
.home-log__head { display: flex; align-items: center; gap: var(--sv-space-2); padding: var(--sv-space-3) var(--sv-space-4); border-bottom: 1px solid var(--sv-color-border-primary); font: var(--sv-type-meta); }
.home-log__head b { font-weight: var(--sv-font-weight-medium); }
.home-log__head .sv-spacer { flex: 1; }
.home-log__rows { font: var(--sv-type-code); font-family: var(--sv-font-family-mono); }
.home-log__row { display: grid; grid-template-columns: 104px 64px minmax(0, 1fr) 86px; gap: var(--sv-space-3); align-items: center; padding: 0 var(--sv-space-4); min-height: 40px; border-bottom: 1px solid var(--sv-color-border-secondary); font-variant-numeric: tabular-nums; }
.home-log__row:last-child { border-bottom: 0; }
.home-log__row .t, .home-log__row .h { color: var(--sv-color-text-tertiary); }
.home-log__row .a { color: var(--sv-color-text-secondary); }
.home-log__row .d { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-log__row .h { text-align: right; }
.home-log__foot { display: flex; align-items: center; gap: var(--sv-space-2); padding: var(--sv-space-3) var(--sv-space-4); background: var(--sv-color-tint-faint); border-top: 1px solid var(--sv-color-border-primary); font: var(--sv-type-meta); color: var(--sv-color-text-secondary); }
.home-log__foot .sv-spacer { flex: 1; }

/* testimonials + pricing placeholders */

/* final CTA */
.home-cta { margin-top: 120px; padding: 72px var(--sv-space-6); border-radius: var(--sv-radius-xl); background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); text-align: center; }
.home-cta .site-lead { margin: var(--sv-space-3) auto 0; max-width: 520px; }
.home-cta .sv-lockup { --sv-size-logo-sidebar: 40px; height: 40px; margin-bottom: var(--sv-space-6); pointer-events: none; }
.home-cta .sv-lockup .sv-word { display: none; }

/* ---------- footer ---------- */
.site-foot { margin-top: 120px; border-top: 1px solid var(--sv-color-border-primary); padding: 56px 0 32px; }
.site-foot__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--sv-space-6); }
.site-foot__brand p { color: var(--sv-color-text-secondary); margin-top: var(--sv-space-3); max-width: 280px; font: var(--sv-type-meta); }
.site-foot h4 { font: var(--sv-type-meta); font-weight: var(--sv-font-weight-medium); margin-bottom: var(--sv-space-2); }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li a { display: flex; align-items: center; min-height: 32px; color: var(--sv-color-text-secondary); font: var(--sv-type-meta); }
.site-foot li a:hover { color: var(--sv-color-text-primary); }
.site-foot__bar { display: flex; align-items: center; gap: var(--sv-space-3); margin-top: 48px; padding-top: var(--sv-space-5); border-top: 1px solid var(--sv-color-border-secondary); font: var(--sv-type-meta); color: var(--sv-color-text-secondary); flex-wrap: wrap; }
.site-foot__bar .sv-spacer { flex: 1; }
.site-proto { display: inline-flex; align-items: center; gap: var(--sv-space-1-5); }
.site-proto b { font: var(--sv-type-micro); font-weight: var(--sv-font-weight-semibold); letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--sv-radius-xs); background: var(--sv-color-tint-secondary); color: var(--sv-color-text-primary); }

/* ---------- auth (sign up / log in): full page, split layout ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth__main { display: flex; flex-direction: column; min-width: 0; padding: 0 var(--site-pad); }
.auth__top { height: var(--site-nav-h); display: flex; align-items: center; gap: var(--sv-space-2); }
.auth__top .sv-lockup { --sv-size-logo-sidebar: 24px; height: 40px; padding: 0 4px; margin-left: -4px; }
.auth__top .sv-spacer { flex: 1; }
.auth__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--sv-space-8) 0; }
.auth__card { width: 100%; max-width: 380px; }
.auth__card h1 { font: 500 30px/36px var(--sv-font-family-brand); letter-spacing: -0.025em; text-align: center; text-wrap: balance; }
.auth__sub { text-align: center; color: var(--sv-color-text-secondary); margin-top: var(--sv-space-2); font: var(--sv-type-lead); overflow-wrap: anywhere; }
.auth__sub b { color: var(--sv-color-text-primary); font-weight: var(--sv-font-weight-medium); }
.auth__icon { width: 48px; height: 48px; margin: 0 auto var(--sv-space-5); border-radius: var(--sv-radius-lg); background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); display: flex; align-items: center; justify-content: center; color: var(--sv-color-text-primary); }
.auth__icon .sv-icon { width: 22px; height: 22px; }
.auth__form { margin-top: var(--sv-space-8); display: flex; flex-direction: column; gap: var(--sv-space-3); }
.auth__form .sv-input, .auth__form .sv-select { height: 44px; font: var(--sv-type-body); padding: 0 var(--sv-space-3); }
.auth__form .sv-label { display: flex; align-items: center; justify-content: space-between; }
.auth__form .sv-help--error { font: var(--sv-type-meta); align-items: flex-start; }
.auth__form .sv-help--error .sv-icon { margin-top: 1px; }
.auth__form .sv-btn--primary, .auth__form .sv-btn--block { height: 44px; font: var(--sv-type-body); font-weight: var(--sv-font-weight-medium); border-radius: var(--sv-radius-md); }
.auth__form .sv-btn--primary:disabled { opacity: .32; }
.auth__alt { text-align: center; font: var(--sv-type-meta); color: var(--sv-color-text-secondary); margin-top: var(--sv-space-6); }
.auth__alt a, .auth__alt button { color: var(--sv-color-text-primary); font-weight: var(--sv-font-weight-medium); padding: 6px 4px; margin: -6px -4px; border-radius: var(--sv-radius-xs); }
.auth__alt a:hover, .auth__alt button:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth__alt button:disabled { color: var(--sv-color-text-tertiary); font-weight: var(--sv-font-weight-regular); text-decoration: none; cursor: default; }
.auth__legal { text-align: center; font: var(--sv-type-caption); color: var(--sv-color-text-secondary); margin-top: var(--sv-space-6); text-wrap: balance; }
.auth__legal a { color: var(--sv-color-text-primary); text-decoration: underline; text-decoration-color: var(--sv-color-tint-primary); text-underline-offset: 2px; }
.auth__mini { display: flex; justify-content: space-between; align-items: center; }
.auth__mini a, .auth__mini button, .auth__link { font: var(--sv-type-meta); color: var(--sv-color-text-secondary); border-radius: var(--sv-radius-xs); padding: 4px 2px; }
.auth__mini a:hover, .auth__mini button:hover, .auth__link:hover { color: var(--sv-color-text-primary); text-decoration: underline; text-underline-offset: 3px; }
.auth__back { display: inline-flex; align-items: center; gap: var(--sv-space-1); height: 32px; padding: 0 var(--sv-space-2) 0 var(--sv-space-1); margin: 0 0 var(--sv-space-5) calc(-1 * var(--sv-space-1)); border-radius: var(--sv-radius-md); color: var(--sv-color-text-secondary); font: var(--sv-type-meta); }
.auth__back:hover { background: var(--sv-color-tint-secondary); color: var(--sv-color-text-primary); }
.auth__back .sv-icon { transform: rotate(180deg); }
.auth__chip { display: flex; align-items: center; gap: var(--sv-space-2); height: 44px; padding: 0 var(--sv-space-1) 0 var(--sv-space-3); border-radius: var(--sv-radius-md); background: var(--sv-color-tint-tertiary); border: 1px solid var(--sv-color-border-primary); font: var(--sv-type-body); min-width: 0; }
.auth__chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth__chip .sv-btn { height: 32px; }
.auth__soon { margin-top: var(--sv-space-4); display: flex; gap: var(--sv-space-2); align-items: flex-start; padding: var(--sv-space-2-5) var(--sv-space-3); border-radius: var(--sv-radius-md); background: var(--sv-color-tint-tertiary); font: var(--sv-type-caption); color: var(--sv-color-text-secondary); }
.auth__soon .sv-icon { margin-top: 1px; }
.auth__foot { height: 56px; display: flex; align-items: center; gap: var(--sv-space-3); font: var(--sv-type-caption); color: var(--sv-color-text-secondary); flex-wrap: wrap; }
.auth__foot a:hover { color: var(--sv-color-text-primary); }
.auth__foot .sv-spacer { flex: 1; }

/* provider buttons: equal size and weight (Google: "at least as prominent as other options") */
.auth-provider {
  height: 44px; width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sv-space-2-5); position: relative;
  border-radius: var(--sv-radius-md); border: 1px solid var(--site-provider-line); background: var(--site-provider-bg); color: var(--site-provider-text);
  font: var(--sv-type-body); font-weight: var(--sv-font-weight-medium); transition: background-color var(--sv-duration-fast), box-shadow var(--sv-duration-fast);
}
.auth-provider:hover { box-shadow: inset 0 0 0 100px rgb(0 0 0 / .04); }
.dark .auth-provider:hover { box-shadow: inset 0 0 0 100px rgb(255 255 255 / .05); }
.auth-provider:active { box-shadow: inset 0 0 0 100px rgb(0 0 0 / .08); }
.auth-provider svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-provider .glyph { fill: currentColor; }
.auth-provider .sv-icon { width: 18px; height: 18px; }
.auth-provider:disabled { opacity: .45; cursor: not-allowed; }
.auth-provider.is-loading { opacity: 1; cursor: progress; }
.auth-provider.is-loading > :not(.sv-spinner) { visibility: hidden; }
.auth-provider .sv-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--sv-space-2); color: var(--sv-color-text-secondary); font: var(--sv-type-body); }
.sv-spinner i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: sv-spin .8s linear infinite; }
.auth-or { display: flex; align-items: center; gap: var(--sv-space-3); margin: var(--sv-space-3) 0; font: var(--sv-type-caption); font-weight: var(--sv-font-weight-medium); color: var(--sv-color-text-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--sv-color-border-primary); }

/* password field with reveal */
.auth-pw { position: relative; }
.auth-pw .sv-input { padding-right: 44px; }
.auth-pw .sv-icon-btn { position: absolute; right: 6px; top: 8px; }
.auth-rules { list-style: none; padding: 0; margin: var(--sv-space-1) 0 0; display: flex; flex-direction: column; gap: var(--sv-space-1); font: var(--sv-type-meta); color: var(--sv-color-text-secondary); }
.auth-rules li { display: flex; align-items: center; gap: var(--sv-space-1-5); }
.auth-rules li .sv-icon { color: var(--sv-color-text-tertiary); }
.auth-rules li.ok { color: var(--sv-color-text-primary); }
.auth-rules li.ok .sv-icon { color: var(--sv-color-accent-text); }

/* phone */
.auth-phone { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--sv-space-2); }

/* 6-digit code */
.auth-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sv-space-2); }
.auth-code .sv-input { height: 56px; padding: 0; text-align: center; font: 500 22px/1 var(--sv-font-family-sans); font-variant-numeric: tabular-nums; }
.auth-code .sv-input:nth-child(3) { margin-right: var(--sv-space-2); }
.auth-code.is-error .sv-input { border-color: var(--sv-color-status-danger-fg); }
.auth-code.is-shake { animation: auth-shake .32s var(--sv-easing-standard); }
@keyframes auth-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.auth-count { font-variant-numeric: tabular-nums; }

/* aside (desktop only): product promise + illustrative proof card */
.auth__aside { background: var(--sv-color-bg-wash); border-left: 1px solid var(--sv-color-border-primary); display: flex; align-items: center; justify-content: center; padding: var(--sv-space-12); position: relative; overflow: hidden; }
.auth__aside-in { max-width: 460px; width: 100%; }
.auth__aside h2 { font: 500 34px/40px var(--sv-font-family-brand); letter-spacing: -0.028em; margin-top: var(--sv-space-3); text-wrap: balance; }
.auth__aside ul { list-style: none; padding: 0; margin: var(--sv-space-6) 0 0; display: flex; flex-direction: column; gap: var(--sv-space-3); }
.auth__aside li { display: flex; gap: var(--sv-space-3); align-items: center; color: var(--sv-color-text-secondary); font: var(--sv-type-lead); }
.auth__aside li .sv-icon { color: var(--sv-color-text-primary); }
.auth__receipt { margin-top: var(--sv-space-10); background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); border-radius: var(--sv-radius-xl); box-shadow: var(--sv-shadow-L3); padding: var(--sv-space-4) var(--sv-space-5) var(--sv-space-3); }
.auth__receipt-head { display: flex; align-items: center; gap: var(--sv-space-2); padding-bottom: var(--sv-space-2); font: var(--sv-type-meta); }
.auth__receipt-head b { font-weight: var(--sv-font-weight-medium); }
.auth__receipt-head .sv-spacer { flex: 1; }
.auth__receipt-cap { margin-top: var(--sv-space-3); font: var(--sv-type-caption); color: var(--sv-color-text-tertiary); }

/* toast placement on auth */
.sv-toasts { z-index: var(--sv-z-toast); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-proof { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .home-log { position: static; }
  .home-preview__frame { grid-template-columns: minmax(0, 1fr); }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__aside { display: none; }
}
@media (max-width: 860px) {
  :root { --site-pad: 20px; --site-hero: 500 40px/44px var(--sv-font-family-brand); --site-h2: 500 30px/36px var(--sv-font-family-brand); --site-lead: 400 16px/25px var(--sv-font-family-sans); }
  .site-nav__links, .site-nav .site-hide-m { display: none; }
  .site-nav__menu { display: inline-flex; }
  .site-nav .sv-lockup { margin-right: 0; }
  .site-nav .sv-btn { height: 36px; padding: 0 var(--sv-space-3); }
  .home-hero { padding-top: 48px; }
  .home-hero .sv-t-eyebrow { height: auto; min-height: 28px; padding: 4px 12px; text-align: left; }
  .home-hero__cta .sv-btn { flex: 1 1 140px; }
  .home-preview { margin-top: 40px; }
  .home-preview__chat { padding: var(--sv-space-3) var(--sv-space-3-5) var(--sv-space-4); }
  .home-sec { padding-top: 88px; }
  .home-logos__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-steps, .home-modes { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .home-step { min-height: 0; }
  .home-step .sv-icon { margin-top: var(--sv-space-3); }
  .home-mode { padding: var(--sv-space-4); }
  .home-log__row { grid-template-columns: 86px minmax(0, 1fr); row-gap: 2px; padding: var(--sv-space-2) var(--sv-space-3); }
  .home-log__row .a { grid-column: 2; grid-row: 1; }
  .home-log__row .d { grid-column: 1 / -1; }
  .home-log__row .h { display: none; }
  .home-cta { margin-top: 88px; padding: 48px var(--sv-space-5); }
  .site-foot { margin-top: 88px; }
  .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__brand { grid-column: 1 / -1; }
  .auth__main { padding: 0 var(--sv-space-5); }
  .auth__body { align-items: flex-start; padding-top: var(--sv-space-6); }
  .auth__card h1 { font-size: 26px; line-height: 32px; }
  .auth__top .site-hide-m { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }