@font-face {
  font-family: "Amora Rounded";
  src: url("/assets/fonts/open-runde-regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: light;
  --brand: #e91e63;
  --brand-dark: #c81954;
  --brand-soft: rgba(233, 30, 99, .10);
  --bg: #fdfbf9;
  --bg-mid: #fbf9f7;
  --bg-end: #f9f7f5;
  --surface: rgba(255, 255, 255, .70);
  --surface-solid: #fff;
  --text: #241b22;
  --text-secondary: #4b3f46;
  --text-tertiary: #7a6d74;
  --line: rgba(0, 0, 0, .06);
  --track: rgba(0, 0, 0, .08);
  --success: #16845b;
  --tick: #45c776;
  --warning: #a55f12;
  --page-gutter: 24px;
  --content-width: 500px;
  --shadow-glass: 0 5px 10px rgba(0, 0, 0, .06);
  --shadow-brand: 0 14px 32px rgba(233, 30, 99, .25);
  --spring: cubic-bezier(.22, .78, .22, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #161b20;
    --bg-mid: #191f25;
    --bg-end: #1c232a;
    --surface: rgba(26, 26, 26, .60);
    --surface-solid: #20272e;
    --text: #e6ebef;
    --text-secondary: #a9b1ba;
    --text-tertiary: #7e8892;
    --line: rgba(255, 255, 255, .12);
    --track: rgba(255, 255, 255, .10);
    --brand-soft: rgba(233, 30, 99, .16);
    --shadow-glass: 0 5px 10px rgba(0, 0, 0, .20);
  }
}

* { box-sizing: border-box; min-width: 0; }
html, body { width: 100%; max-width: 100%; min-height: 100%; overflow-x: clip; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 32%, rgba(233, 30, 99, .07), transparent 23rem),
    linear-gradient(180deg, var(--bg), var(--bg-mid) 48%, var(--bg-end));
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button, label[for] { touch-action: manipulation; }
button { color: inherit; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.safe-width { width: 100%; max-width: var(--content-width); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.title-font, h1, h2, h3, .wordmark, .ready-title { font-family: ui-rounded, "Amora Rounded", system-ui, sans-serif; font-weight: 600; }
h1, h2, h3, p { margin-block-start: 0; }
h1 { white-space: pre-line; text-wrap: balance; }
.wordmark { font-size: 26px; letter-spacing: -.02em; text-decoration: none; }
.eyebrow { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }

.primary-button {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 28px;
  padding: 12px 22px;
  color: #fff;
  background: linear-gradient(145deg, #f42b70 0%, #e91e63 60%, #d91758 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .24), 0 10px 24px rgba(233, 30, 99, .24);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform .16s var(--spring), opacity .16s, box-shadow .2s;
}
.primary-button::before { position: absolute; z-index: -1; inset: 0 0 52%; border-radius: inherit; background: linear-gradient(rgba(255,255,255,.15), transparent); content: ""; }
.primary-button:not(:disabled):active { transform: scale(.97); opacity: .92; box-shadow: inset 0 1px rgba(255,255,255,.18), 0 5px 14px rgba(233,30,99,.20); }
.primary-button:disabled { color: rgba(255, 255, 255, .48); background: linear-gradient(145deg, rgba(233,30,99,.32), rgba(233,30,99,.20)); box-shadow: inset 0 1px rgba(255,255,255,.10); cursor: default; }
.primary-button.is-busy:disabled { color: #fff; background: linear-gradient(145deg, #f42b70, #d91758); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 8px 20px rgba(233,30,99,.18); }
.primary-button.is-busy::after { width: 15px; height: 15px; flex: 0 0 15px; border: 2px solid rgba(255,255,255,.38); border-top-color: #fff; border-radius: 50%; content: ""; animation: spin .7s linear infinite; }
.primary-button:focus-visible, .secondary-button:focus-visible, .text-button:focus-visible, .icon-button:focus-visible, .sheet-close:focus-visible, .choice:focus-visible, .auth-button:focus-visible, .photo-preview:focus-visible, .photo-change-button:focus-visible, input:focus-visible, .review-toggle:focus-visible, .review-arrow:focus-visible, .welcome-preference:focus-visible, .language-link:focus-visible, .verification-retry:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 38%, transparent); outline-offset: 3px; }
.text-button { display: block; min-height: 44px; border: 0; padding: 10px 16px; color: var(--text-secondary); background: transparent; cursor: pointer; font-size: 15px; font-weight: 600; transition: color .16s ease, opacity .16s ease; }
.secondary-button { display: inline-grid; min-height: 48px; place-items: center; border: .5px solid var(--line); border-radius: 24px; padding: 10px 18px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-glass); cursor: pointer; font-size: 15px; font-weight: 700; backdrop-filter: blur(18px); transition: transform .16s var(--spring), border-color .16s ease, box-shadow .2s ease, opacity .16s ease; }
.secondary-button:disabled, .auth-button:disabled, .text-button:disabled { opacity: .46; cursor: default; }
.toast { position: fixed; z-index: 100; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); left: 20px; max-width: 460px; margin: auto; padding: 12px 16px; border: .5px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface-solid); box-shadow: 0 14px 42px rgba(0,0,0,.16); font-size: 14px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s, transform .2s var(--spring); }
.toast.visible { opacity: 1; transform: translateY(0); }

/* Native welcome, adapted only for the web consent and language controls. */
.landing-shell {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 25%, rgba(233,30,99,.08), transparent 22rem),
    linear-gradient(180deg, #fbe4ec, #f5e6f0 48%, #f9f7f5);
}
@media (prefers-color-scheme: dark) {
  .landing-shell { background: radial-gradient(circle at 50% 25%, rgba(233,30,99,.12), transparent 22rem), linear-gradient(180deg, #0f1318, #161b22 48%, #1c2128); }
}
.welcome-preferences { position: fixed; z-index: 8; top: env(safe-area-inset-top); right: 10px; display: flex; align-items: center; gap: 5px; }
.welcome-preference { min-height: 40px; border: 0; padding: 9px 7px; color: color-mix(in srgb, var(--text-secondary) 78%, transparent); background: transparent; cursor: pointer; font-size: 11px; font-weight: 650; text-decoration: none; }
.welcome-preference[aria-disabled="true"], .welcome-preference:disabled { opacity: .45; cursor: wait; }
.landing-main { display: flex; width: 100%; min-height: 100dvh; flex-direction: column; padding: calc(env(safe-area-inset-top) + max(0px, calc(6dvh - 12px))) 0 calc(32px + env(safe-area-inset-bottom)); text-align: center; }
.welcome-hero { display: flex; min-height: 0; flex: 1; flex-direction: column; align-items: center; }
.welcome-carousel { --card-width: min(72vw, 320px); --card-height: calc(var(--card-width) * 1.25); --side-width: min(50.4vw, 224px); --badge-one-x: min(20.16vw, 89.6px); --badge-two-x: min(23.04vw, 102.4px); --badge-three-x: min(15.84vw, 70.4px); --badge-one-y: min(34.2vw, 152px); --badge-two-y: min(13.5vw, 60px); --badge-three-y: min(36vw, 160px); position: relative; width: 100vw; height: calc(var(--card-height) + 40px); flex: 0 0 auto; }
.welcome-triptych { position: absolute; top: 20px; left: 50%; display: flex; align-items: center; gap: 8px; opacity: 1; transform: translateX(-50%); transform-origin: center; transition: opacity .3s ease-out, transform .3s ease-out; will-change: opacity, transform; }
@keyframes welcomeTriptychIn { from { opacity: 0; transform: translateX(-50%) scale(.92); } }
@keyframes welcomeTriptychCycleIn { from { opacity: 0; transform: translateX(-50%) scale(.96); } }
.welcome-carousel.initializing .welcome-triptych { animation: welcomeTriptychIn .5s ease-out backwards; }
.welcome-carousel.changing .welcome-triptych { opacity: 0; transform: translateX(-50%) scale(.96); }
.welcome-carousel.reentering .welcome-triptych { animation: welcomeTriptychCycleIn .4s ease-in backwards; }
.welcome-card { height: auto; flex: 0 0 auto; aspect-ratio: 4 / 5; border-radius: 32px; object-fit: cover; }
.welcome-card-center { width: var(--card-width); box-shadow: 0 12px 24px rgba(0,0,0,.12); }
.welcome-card-side { width: var(--side-width); opacity: .50; }
.welcome-badge { position: absolute; z-index: 2; white-space: nowrap; }
.welcome-badge-surface { display: flex; min-height: 34px; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 14px; color: #1a1a1a; background: rgba(255,255,255,.95); box-shadow: 0 4px 12px rgba(0,0,0,.08); font-size: 12px; font-weight: 600; opacity: 1; transform-origin: center; transition: opacity .3s ease-out, transform .3s ease-out; will-change: opacity, transform; }
@keyframes welcomeBadgeIn { from { opacity: 0; transform: translateY(10px) scale(.6); } }
@keyframes welcomeBadgeCycleIn { from { opacity: 0; transform: translateY(8px) scale(.82); } }
.welcome-carousel.initializing .welcome-badge-surface { animation: welcomeBadgeIn .6s cubic-bezier(.22,.78,.22,1) backwards; }
.welcome-carousel.initializing .welcome-badge-one .welcome-badge-surface { animation-delay: .4s; }
.welcome-carousel.initializing .welcome-badge-two .welcome-badge-surface { animation-delay: .75s; }
.welcome-carousel.initializing .welcome-badge-three .welcome-badge-surface { animation-delay: 1.1s; }
.welcome-carousel.changing .welcome-badge-surface { opacity: 0; transform: translateY(8px) scale(.88); }
.welcome-carousel.reentering .welcome-badge-surface { animation: welcomeBadgeCycleIn .6s cubic-bezier(.22,.78,.22,1) backwards; }
.welcome-carousel.reentering .welcome-badge-one .welcome-badge-surface { animation-delay: .15s; }
.welcome-carousel.reentering .welcome-badge-two .welcome-badge-surface { animation-delay: .5s; }
.welcome-carousel.reentering .welcome-badge-three .welcome-badge-surface { animation-delay: .85s; }
@media (prefers-color-scheme: dark) { .welcome-badge-surface { color: #fff; background: rgba(26,26,26,.90); box-shadow: 0 4px 12px rgba(0,0,0,.30); } }
.welcome-badge b { font-size: 13px; }
.welcome-badge-one { top: calc(50% - var(--badge-one-y)); left: calc(50% - var(--badge-one-x)); transform: translate(-50%, -50%) rotate(-3deg); }
.welcome-badge-two { top: calc(50% + var(--badge-two-y)); left: calc(50% + var(--badge-two-x)); transform: translate(-50%, -50%) rotate(3deg); }
.welcome-badge-three { top: calc(50% + var(--badge-three-y)); left: calc(50% - var(--badge-three-x)); transform: translate(-50%, -50%) rotate(-2deg); }
.welcome-app-icon { position: relative; display: block; width: 68px; height: 68px; flex: 0 0 68px; margin-top: 0; border-radius: 15px; filter: drop-shadow(0 4px 18px rgba(233,30,99,.18)); animation: welcomeBrandIn .5s cubic-bezier(.22,.78,.22,1) .3s backwards; }
@keyframes welcomeBrandIn { from { opacity: 0; transform: scale(.85); } }
.welcome-app-icon::before { position: absolute; inset: -6px; border-radius: 20px; background: rgba(233,30,99,.10); filter: blur(18px); content: ""; }
.welcome-app-icon img { position: relative; width: 68px; height: 68px; border-radius: 15px; object-fit: cover; }
.welcome-copy { display: contents; }
.welcome-desktop-details, .welcome-trust { display: none; }
.welcome-hero h1 { margin: auto 34px; padding-top: 10px; color: var(--text); font-size: 36px; line-height: 1.12; letter-spacing: -.015em; animation: welcomeHeadlineIn .5s cubic-bezier(.22,.78,.22,1) .3s backwards; }
@keyframes welcomeHeadlineIn { from { opacity: 0; transform: translateY(10px); } }
.welcome-actions { width: 100%; max-width: 500px; margin-inline: auto; padding: 0 28px; animation: welcomeActionsIn .5s cubic-bezier(.22,.78,.22,1) .45s backwards; }
@keyframes welcomeActionsIn { from { opacity: 0; transform: translateY(20px); } }
.welcome-primary svg { width: 18px; height: 18px; }
.welcome-legal { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; color: var(--text-tertiary); font-size: 11px; }
.welcome-legal a { padding-block: 10px; text-underline-offset: 3px; }

/* Consent is a web-only privacy boundary; its visual language follows iOS sheets. */
.consent-sheet { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 0; background: transparent; }
.consent-sheet::backdrop { background: rgba(20,13,18,.38); backdrop-filter: blur(4px); }
.sheet-card { position: fixed; right: 0; bottom: 0; left: 0; max-height: min(92dvh, 740px); overflow: auto; border-radius: 28px 28px 0 0; padding: 12px 24px calc(20px + env(safe-area-inset-bottom)); color: var(--text); background: var(--surface-solid); box-shadow: 0 -20px 60px rgba(20,10,16,.18); text-align: center; animation: sheetIn .36s var(--spring); }
@keyframes sheetIn { from { transform: translateY(100%); } }
.sheet-handle { width: 38px; height: 5px; margin: 0 auto 18px; border-radius: 999px; background: var(--line); }
.sheet-close { position: absolute; top: 12px; right: 14px; display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; padding: 0; color: var(--text-secondary); background: transparent; cursor: pointer; }
.sheet-close:active { background: var(--line); transform: scale(.96); }
.sheet-close svg { width: 20px; height: 20px; }
.privacy-mark { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 14px; border-radius: 16px; color: var(--brand); background: var(--brand-soft); }
.sheet-card h2 { margin: 0 0 9px; font-size: 28px; }
.sheet-card > p { max-width: 420px; margin: 0 auto 18px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.consent-options { margin: 0 0 18px; border: .5px solid var(--line); border-radius: 18px; overflow: hidden; text-align: left; }
.consent-options label { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 15px; cursor: pointer; }
.consent-options label + label { border-top: .5px solid var(--line); }
.consent-options span { display: grid; gap: 3px; }
.consent-options b { font-size: 14px; }
.consent-options small { color: var(--text-tertiary); font-size: 12px; line-height: 1.35; }
.consent-options input { width: 24px; height: 24px; flex: 0 0 24px; accent-color: var(--brand); }
.consent-options input:disabled { opacity: .45; }
.gpc-notice { margin: -8px auto 16px !important; color: var(--text-tertiary) !important; font-size: 12px !important; }
.sheet-legal { margin-top: 10px !important; font-size: 11px !important; }

/* Shared native onboarding frame. */
.onboarding-shell { display: flex; height: 100dvh; min-height: 100dvh; flex-direction: column; overflow: hidden; padding-top: env(safe-area-inset-top); }
.progress-header { display: grid; width: 100%; height: 60px; flex: 0 0 60px; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px 24px 0; }
.icon-button { display: grid; width: 44px; height: 44px; place-items: center; border: .5px solid var(--line); border-radius: 50%; padding: 0; color: var(--text); background: var(--surface); box-shadow: 0 3px 10px rgba(0,0,0,.05); cursor: pointer; backdrop-filter: blur(18px); transition: transform .16s var(--spring), border-color .16s ease, box-shadow .2s ease; }
.icon-button svg { width: 24px; height: 24px; }
.progress-track { height: 10px; overflow: hidden; border-radius: 5px; background: var(--track); }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--text); transition: width .4s var(--spring); }
.step-count { display: none; }
.step-stage { display: flex; width: 100%; max-width: var(--content-width); height: calc(100dvh - 60px - env(safe-area-inset-top)); min-height: 0; flex: 1; align-self: center; }
.step-screen { position: relative; display: flex; width: 100%; height: 100%; min-height: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; animation: stepIn .36s var(--spring); }
@keyframes stepIn { from { opacity: 0; transform: translateX(12px); } }
.step-copy { width: 100%; padding-inline: 24px; text-align: center; }
.step-copy h1 { margin: 0; font-size: 36px; line-height: 1.14; letter-spacing: -.01em; }
.step-copy p { max-width: 390px; margin: 12px auto 0; color: var(--text-secondary); font-size: 15px; font-weight: 400; line-height: 1.48; white-space: pre-line; }
.step-emoji { display: grid; width: 100px; height: 100px; place-items: center; margin: 0 auto 24px; font-size: 72px; line-height: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,.08)); }
.step-content { width: 100%; padding-inline: 24px; }
.step-actions { z-index: 3; width: 100%; flex: 0 0 auto; margin-top: auto; padding: 12px 24px calc(32px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 22%); }
.step-actions .primary-button { max-width: 500px; margin-inline: auto; }
.step-actions.has-secondary-action { display: grid; justify-items: center; }
.optional-date-skip { width: 100%; max-width: 500px; margin: 0 auto -12px; }

.step-basic .step-copy { margin-top: auto; }
.step-basic .step-content { display: flex; flex: 0 0 auto; justify-content: center; margin-top: 24px; margin-bottom: auto; }
.step-basic .step-actions { margin-top: 22px; }
.step-basic .choice-grid { width: 100%; max-width: 320px; }
.text-field, .date-field { width: 100%; max-width: 320px; min-height: 62px; border: .5px solid var(--line); border-radius: 18px; padding: 16px 20px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-glass); font-size: 18px; font-weight: 600; text-align: center; outline: 0; backdrop-filter: blur(18px); }
.text-field::placeholder { color: var(--text-tertiary); opacity: 1; }
.text-field:focus, .date-field:focus { border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); box-shadow: 0 0 0 3px rgba(233,30,99,.08), var(--shadow-glass); }
.date-field { min-height: 72px; color-scheme: light; }
/* The basic step lays its field out in a centred row; the hint takes a line of its own under it. */
.step-basic .step-content:has(.field-hint) { flex-wrap: wrap; }
.field-hint { flex-basis: 100%; margin: 12px auto 0; max-width: 320px; color: var(--text-secondary); font-size: 14px; line-height: 1.4; text-align: center; }
@media (prefers-color-scheme: dark) { .date-field { color-scheme: dark; } }

/* T-03 in the handoff, by its own numbers rather than an approximation of them.
   Title 28/1.14 at -.022em capped at 330px, subtitle 15/1.4 at 14px below it,
   rows 16px below that, and the whole block centred in the space above the
   button. The previous values drifted a little on every line (14px subtitle,
   24px gap, 340px caps) and together they read as a different screen. */
.step-survey .step-copy { max-width: 378px; margin: auto auto 0; text-align: left; }
.step-survey .step-copy h1 { max-width: 330px; font-size: 28px; line-height: 1.14; letter-spacing: -.022em; }
.step-survey .step-copy p { max-width: 330px; margin: 14px 0 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
.step-survey .step-content { flex: 0 0 auto; margin: 16px 0 auto; }
/* T-03's footer is the button and 24px under it, nothing else. The shared
   footer adds a scrim and 32px, which on a six-row step is most of the empty
   band under the last option, and survey steps do not scroll under their button
   so they never needed the scrim. `margin-top: 0` also takes the footer out of
   the auto-margin split: three competing autos (copy top, content bottom,
   footer top) shared the leftover space three ways and left 23px above the
   question against 61px under the last row. Two autos centre it evenly. */
.step-survey .step-actions { margin-top: 0; padding: 16px 24px calc(24px + env(safe-area-inset-bottom)); background: none; }
.choice-grid { display: grid; width: 100%; max-width: 330px; gap: 12px; margin-inline: auto; }
/* 64px is T-03's row height. `min-height` rather than `height` because a label
   that wraps to two lines has to grow instead of overflowing its card, which is
   what several translations do. */
.choice { display: grid; width: 100%; min-height: 64px; grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 14px; align-items: center; border: .5px solid var(--line); border-radius: 18px; padding: 12px 18px 12px 20px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-glass); cursor: pointer; text-align: left; backdrop-filter: blur(18px); transition: transform .16s var(--spring), border-color .16s ease, background .2s ease, box-shadow .2s ease; }
.choice:active { transform: scale(.97); }
.choice.selected { border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); background: linear-gradient(rgba(233,30,99,.10), rgba(233,30,99,.10)), var(--surface); box-shadow: 0 5px 12px rgba(233,30,99,.10); }
@media (prefers-color-scheme: dark) { .choice.selected { background: linear-gradient(rgba(233,30,99,.16), rgba(233,30,99,.16)), var(--surface); box-shadow: 0 5px 12px rgba(233,30,99,.22); } }
.choice-icon { display: grid; width: 36px; height: 36px; place-items: center; font-size: 28px; line-height: 1; }
.choice-label { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.choice-check { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: transparent; }
.choice-check svg { width: 16px; height: 16px; }
.choice.selected .choice-check { color: #fff; background: var(--brand); }
/* Six-row steps. T-03: "Rows gap 12; drops to 9 at six rows so nothing
   scrolls." Only the gaps close up. The old variant also pinned the block to
   the top and shrank the rows, so a six-answer question rendered with a third
   of the screen empty under the last row and looked like a smaller, cheaper
   version of a two-answer one. `auto` restores the centring T-03 uses at every
   row count. */
.step-dense .step-copy { margin-top: auto; }
.step-dense .choice-grid { gap: 9px; }
/* The crowded questions need their tightening earlier than the shared 760px
   breakpoint. T-03 draws 64px rows on an 852px device with about 768px of
   content, and a six-answer question whose title runs to four lines in Spanish
   does not fit that on a 768px phone: the discover question went from fitting
   to 20px of scroll. Scoped to the dense survey steps so nothing else moves,
   and the row height is the only thing that gives, back to what these steps
   carried before. */
@media (max-height: 820px) {
  .step-survey.step-dense .choice { min-height: 59px; }
  .step-survey.step-dense .step-copy p { margin-top: 10px; }
}

/* 17px labels on the dense steps. This is T-04's own label size, and T-04 is
   the template for exactly these six-answer questions, so it is the reference
   rather than a deviation from it. Measured, not preferred: dropping it to
   T-03's 18px made more labels wrap to a second line on a 375x667 phone, which
   grows the rows, and three already-shipped steps got worse. Spanish pain
   points went from fitting to 22px of scroll, and the discover question from
   20px over to 54px. */
.step-dense .choice-label { font-size: 17px; }
/* Seven rows is past what T-03 documents ("Three to six rows"), and the
   attribution question needs it. Rather than invent a size, borrow T-04's:
   that template already runs a 17px label when it has more to fit. The rows
   keep their height, so the screen still reads as the same template.
   Keyed off a count the renderer writes rather than `:has()`, so the rule does
   not quietly stop applying on a browser without it. */
.step-dense .choice-grid[data-count="7"] { gap: 8px; }
.step-dense .choice-grid[data-count="7"] .choice-label { font-size: 17px; }

/* Photo */
.step-photo .step-copy h1 { font-size: 36px; }
.step-photo .step-copy p { max-width: 360px; margin-top: 8px; font-size: 15px; font-weight: 500; }
.step-photo .step-content { margin-top: 32px; }
.photo-picker { display: grid; justify-items: center; }
.photo-preview { display: grid; width: 160px; height: 160px; overflow: hidden; place-items: center; border: .5px solid var(--line); border-radius: 50%; padding: 0; color: var(--text); background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.08); cursor: pointer; backdrop-filter: blur(18px); transition: transform .16s var(--spring), border-color .16s ease, box-shadow .2s ease; }
.photo-preview span { font-size: 82px; line-height: 1; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-actions { display: grid; gap: 0; }
.photo-actions .primary-button { max-width: 500px; margin-inline: auto; }
.photo-button-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.photo-actions .busy { opacity: .5; pointer-events: none; }
.photo-skip { width: 100%; margin: 0 auto -8px; }
.photo-change-button { display: grid; min-height: 44px; place-items: center; border: 0; padding: 8px 16px; color: var(--brand); background: transparent; cursor: pointer; font-size: 16px; font-weight: 600; }

/* Transition */
.step-ceremony .ceremony-content { display: flex; width: 100%; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 20px 24px; }
.ceremony-emoji { display: grid; width: 130px; height: 130px; place-items: center; margin-bottom: 36px; font-size: 100px; filter: drop-shadow(0 14px 22px rgba(233,30,99,.14)); }
.growing-heart { animation: heartGrow 1.1s var(--spring) both; }
@keyframes heartGrow { from { opacity: 0; transform: scale(.72); } }
.ceremony-copy { padding: 0; }
.ceremony-copy h1 { max-width: 400px; font-size: 34px; margin-inline: auto; }
.ceremony-copy p { max-width: 360px; margin-top: 18px; font-size: 16px; line-height: 1.55; }

/* Long-distance interstitial */
.distance-content { display: flex; width: 100%; flex: 1; flex-direction: column; justify-content: center; padding: 12px 24px 8px; }
.distance-mockup { position: relative; width: 292px; height: 114px; flex: 0 0 114px; margin: 0 auto 32px; }
.distance-mockup > svg { position: absolute; top: 5px; left: 56px; width: 180px; height: 40px; overflow: visible; }
.distance-mockup > svg path { fill: none; stroke: color-mix(in srgb, var(--text) 26%, transparent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.distance-avatar { position: absolute; top: 0; width: 68px; height: 68px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,.30); }
.distance-avatar-left { left: 22px; }
.distance-avatar-right { right: 22px; }
.distance-pill { position: absolute; top: 9px; left: 50%; display: flex; min-height: 24px; align-items: center; gap: 4px; border-radius: 12px; padding: 4px 8px; color: #fff; background: rgba(233,30,99,.88); box-shadow: 0 3px 10px rgba(233,30,99,.25); font-size: 9px; transform: translateX(-50%); }
.distance-pill b { font-size: 10px; }
.location-pill { position: absolute; top: 78px; display: grid; width: 112px; gap: 4px; border: .5px solid var(--line); border-radius: 12px; padding: 7px 9px; background: var(--surface); text-align: center; box-shadow: var(--shadow-glass); backdrop-filter: blur(16px); }
.location-pill-left { left: 0; }
.location-pill-right { right: 0; }
.location-pill b { font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.location-pill small { color: var(--text-secondary); font-size: 9px; white-space: nowrap; }
.distance-copy { max-width: 388px; padding: 0; text-align: left; }
.distance-copy h1 { max-width: 340px; font-size: 30px; }
.distance-copy p { max-width: 340px; margin: 10px 0 0; font-size: 15px; font-weight: 500; line-height: 1.45; }
.distance-values { display: grid; width: 100%; max-width: 340px; gap: 14px; margin: 22px auto 0; }
.distance-values > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; }
.distance-values span { font-size: 22px; }
.distance-values b { font-size: 15px; font-weight: 600; line-height: 1.3; }

/* Native App Store review carousel */
.social-content { display: flex; width: 100%; flex: 1; flex-direction: column; justify-content: center; padding: 12px 0 0; }
.review-carousel { position: relative; display: flex; width: 100%; height: 200px; flex: 0 0 200px; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 0 32px; scroll-padding-inline: 32px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.review-carousel::-webkit-scrollbar { display: none; }
.review-card { position: relative; display: flex; width: 100%; min-width: 100%; height: 200px; flex: 0 0 100%; flex-direction: column; scroll-snap-align: center; border: .8px solid rgba(233,30,99,.25); border-radius: 20px; padding: 18px; background: linear-gradient(145deg, rgba(233,30,99,.06), transparent 60%), rgba(255,255,255,.85); box-shadow: 0 3px 6px rgba(0,0,0,.08); text-align: left; backdrop-filter: blur(18px); }
@media (prefers-color-scheme: dark) { .review-card { background: linear-gradient(145deg, rgba(233,30,99,.12), transparent 60%), rgba(26,26,26,.70); box-shadow: 0 3px 6px rgba(0,0,0,.25); } }
.review-stars, .rating-stars { color: #ffc700; letter-spacing: 1px; }
.review-stars { font-size: 14px; }
.review-quote { margin: 10px 0 0; color: var(--text); font-size: 14.5px; font-weight: 600; line-height: 1.42; }
.review-toggle { align-self: flex-start; border: 0; padding: 4px 0; color: var(--brand); background: none; cursor: pointer; font-size: 11px; font-weight: 600; text-decoration: underline; }
.review-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; color: var(--text-secondary); }
.review-card footer b { font-size: 13px; font-weight: 600; }
.review-card footer span { font-size: 28px; }
.review-controls { display: flex; height: 36px; align-items: center; justify-content: center; }
.review-dots { display: flex; height: 36px; align-items: center; justify-content: center; gap: 8px; }
.review-dots i { width: 8px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text-secondary) 30%, transparent); transition: width .3s var(--spring), background .3s; }
.review-dots i.active { width: 22px; background: var(--brand); }
.review-arrow { display: none; width: 36px; height: 36px; place-items: center; border: .5px solid var(--line); border-radius: 50%; padding: 0; color: var(--text-secondary); background: var(--surface); box-shadow: var(--shadow-glass); cursor: pointer; transition: transform .16s var(--spring), border-color .16s ease, box-shadow .2s ease, opacity .16s ease; }
.review-arrow:disabled { opacity: .32; cursor: default; }
.review-arrow svg { width: 18px; height: 18px; }
.social-copy { width: 100%; max-width: 388px; margin: auto auto 0; padding: 0 24px; }
.app-store-rating { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; border: .5px solid var(--line); border-radius: 18px; padding: 8px 14px; background: var(--surface); box-shadow: 0 3px 8px rgba(0,0,0,.08); color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.app-store-rating > span:first-child { color: var(--text); font-size: 17px; }
.app-store-rating b { color: var(--text); font-size: 15px; }
.app-store-rating .rating-stars { font-size: 12px; }
.step-social .survey-copy { padding: 14px 0 0; text-align: left; }
.step-social .survey-copy h1 { max-width: 340px; font-size: 28px; }
.step-social .survey-copy p { max-width: 340px; margin: 12px 0 0; font-size: 15px; font-weight: 500; }

/* Native two-card value comparison */
.comparison-scroll { width: 100%; flex: 1; overflow-x: hidden; overflow-y: visible; padding: 20px 0 22px; }
.comparison-copy { text-align: center; }
.comparison-copy h1 { max-width: 430px; margin-inline: auto; font-size: 30px; }
.comparison-copy p { margin-top: 8px; font-size: 14px; font-weight: 500; }
.comparison-cards { display: flex; width: 100%; max-width: 540px; height: 448px; align-items: flex-start; gap: 0; margin: 24px auto 0; padding: 0 16px 18px; }
.comparison-card { position: relative; display: flex; width: calc(50% + 4px); height: 430px; flex: 0 0 calc(50% + 4px); flex-direction: column; overflow: hidden; border-radius: 26px; padding: 18px 14px 20px; }
.comparison-without { z-index: 0; margin-right: -8px; border: .5px solid var(--line); background: linear-gradient(rgba(0,0,0,.03), transparent 50%), rgba(128,128,128,.06); box-shadow: 0 3px 8px rgba(0,0,0,.04); transform: translateY(18px); }
.comparison-with { z-index: 1; border: 1.4px solid color-mix(in srgb, var(--brand) 70%, transparent); background: radial-gradient(circle at 50% 0, rgba(233,30,99,.18), transparent 55%), rgba(255,255,255,.78); box-shadow: 0 6px 16px rgba(233,30,99,.18), 0 3px 8px rgba(0,0,0,.08); }
@media (prefers-color-scheme: dark) {
  .comparison-without { background: linear-gradient(rgba(0,0,0,.15), transparent 50%), rgba(17,17,17,.85); }
  .comparison-with { background: radial-gradient(circle at 50% 0, rgba(233,30,99,.28), transparent 55%), rgba(31,20,25,.85); box-shadow: 0 6px 16px rgba(233,30,99,.30), 0 3px 8px rgba(0,0,0,.25); }
}
.comparison-chip { display: inline-flex; min-height: 27px; align-self: center; align-items: center; gap: 5px; border-radius: 14px; padding: 5px 10px; color: var(--text-tertiary); background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 11px; font-weight: 700; white-space: nowrap; }
.comparison-with .comparison-chip { padding: 5px 11px 5px 6px; color: #fff; background: linear-gradient(145deg, var(--brand), #d91758); box-shadow: 0 2px 8px rgba(233,30,99,.48); }
.comparison-chip img { width: 16px; height: 16px; border: .5px solid rgba(255,255,255,.5); border-radius: 4px; }
.comparison-items { display: grid; gap: 12px; margin-top: 18px; }
.comparison-items > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.comparison-items i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--text-tertiary); background: color-mix(in srgb, var(--text-tertiary) 10%, transparent); font-size: 13px; font-style: normal; font-weight: 700; }
.comparison-items span { color: var(--text-secondary); font-size: 13px; font-weight: 400; line-height: 1.34; }
.comparison-with .comparison-items i { color: var(--brand); background: rgba(233,30,99,.18); }
.comparison-with .comparison-items span { color: var(--text); font-weight: 600; }
.comparison-with .comparison-items > div { animation: comparisonRow .45s var(--spring) both; }
@keyframes comparisonRow { from { opacity: 0; transform: translateY(8px); } }
.comparison-emoji { margin-top: auto; padding-top: 8px; font-size: 60px; line-height: 1; text-align: center; }
.comparison-with .comparison-emoji { font-size: 72px; }

/* Welcome to Amora */
.ready-content { display: flex; width: 100%; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 20px 24px; text-align: center; }
.ready-icon { position: relative; display: grid; width: 200px; height: 160px; place-items: center; margin-bottom: 36px; }
.ready-icon::before { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(233,30,99,.16); filter: blur(44px); content: ""; }
@media (prefers-color-scheme: dark) { .ready-icon::before { background: rgba(233,30,99,.30); } }
.ready-icon img { position: relative; width: 108px; height: 108px; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; box-shadow: 0 8px 22px rgba(233,30,99,.45), 0 4px 12px rgba(0,0,0,.35); }
.ready-title { display: grid; gap: 2px; font-size: 46px; line-height: 1.25; }
.ready-content p { max-width: 360px; margin: 18px 0 0; color: var(--text-secondary); font-size: 16px; line-height: 1.55; }
.ready-confetti { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.ready-confetti i { position: absolute; top: 0; left: var(--x); width: var(--piece-width); height: var(--piece-height); border-radius: 2px; background: var(--piece-color); opacity: 0; animation: confettiFall var(--duration) linear var(--delay) both; }
.ready-confetti .confetti-circle { border-radius: 50%; }
.ready-confetti .confetti-triangle { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@keyframes confettiFall {
  0% { opacity: 0; transform: translate(-50%, -24px) rotate(0) scaleX(1); }
  5% { opacity: 1; }
  50% { transform: translate(calc(-50% + var(--mid-x)), 54dvh) rotate(var(--mid-spin)) scaleX(.14); }
  100% { opacity: 1; transform: translate(calc(-50% + var(--drift)), 108dvh) rotate(var(--spin)) scaleX(1); }
}

/* Native 9-second personalization calibration. */
.calibration-active .progress-header { display: none; }
.calibration-active .step-stage { height: calc(100dvh - env(safe-area-inset-top)); }
.calibration-content { display: flex; width: 100%; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 12px 28px 20px; }
.calibration-wand { display: grid; width: 130px; height: 130px; place-items: center; margin-bottom: 28px; font-size: 92px; filter: drop-shadow(0 10px 18px rgba(233,30,99,.16)); animation: wandFloat 1.8s ease-in-out infinite alternate; }
.calibration-wand.ready { animation: none; transform: rotate(5deg) scale(1.04); }
@keyframes wandFloat { to { transform: translateY(-6px) rotate(4deg); } }
.calibration-content h1 { max-width: 420px; margin: 0 0 22px; font-size: 40px; line-height: 1.12; text-align: center; }
.calibration-progress { width: calc(100% - 32px); max-width: 412px; height: 10px; margin-bottom: 32px; overflow: visible; border-radius: 5px; background: color-mix(in srgb, var(--text-secondary) 16%, transparent); }
.calibration-progress i { position: relative; display: block; width: 0; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(233,30,99,.85), var(--brand)); box-shadow: 0 0 8px rgba(233,30,99,.60); transition-property: width; transition-timing-function: linear; }
.calibration-progress i::after { position: absolute; top: -4px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); filter: blur(7px); content: ""; }
.calibration-list { display: grid; width: 100%; max-width: 444px; gap: 10px; }
.calibration-row { display: grid; min-height: 54px; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: center; border: .5px solid var(--line); border-radius: 16px; padding: 12px 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.calibration-row > i { position: relative; display: grid; width: 22px; height: 22px; place-items: center; border: 1.5px solid color-mix(in srgb, var(--text-secondary) 30%, transparent); border-radius: 50%; font-style: normal; }
.calibration-row.active { border-color: rgba(233,30,99,.55); box-shadow: 0 4px 12px rgba(233,30,99,.18); }
.calibration-row.active > i { border: 2.5px solid transparent; border-top-color: var(--brand); border-right-color: var(--brand); animation: spin .9s linear infinite; }
.calibration-row.done { border-color: rgba(69,199,118,.35); }
.calibration-row.done > i { border-color: transparent; color: var(--tick); background: rgba(69,199,118,.18); }
.calibration-row.done > i::after { content: "✓"; font-size: 16px; font-weight: 800; }
.calibration-row b { color: var(--text-secondary); font-size: 14.5px; font-weight: 500; line-height: 1.32; }
.calibration-row.active b, .calibration-row.done b { color: var(--text); }
@keyframes spin { to { transform: rotate(1turn); } }

/* Auth remains web-specific but uses the same glass controls. */
.step-account .step-copy h1 { font-size: 36px; }
/* The account step renders inside the `step-basic` shell, whose `.step-content` is
   `display:flex` with no direction — intended for a single centred child. With four
   children (social buttons, separator, form, legal note) that lays them out as squashed
   columns: on a 420px viewport the email input collapses to ~104px and clips its own
   placeholder. Live on production since launch; every visitor who reached sign-up saw it.
   `.step-content.auth-content` matches the same specificity as `.step-basic .step-content`
   and comes later in the file, so it wins without depending on the shell's class. */
.auth-content, .step-content.auth-content { display: block; width: 100%; max-width: 400px; }
.auth-stack { display: grid; width: 100%; gap: 10px; }
.auth-button { display: grid; width: 100%; min-height: 54px; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; border: .5px solid var(--line); border-radius: 18px; padding: 10px 15px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-glass); cursor: pointer; font-size: 15px; font-weight: 700; transition: transform .16s var(--spring), border-color .16s ease, box-shadow .2s ease, opacity .16s ease; }
.auth-button.primary-auth { border-color: var(--text); color: var(--surface-solid); background: var(--text); }
.auth-button[data-provider="apple"] { border-color: #000; color: #fff; background: #000; }
.auth-button[data-provider="apple"] > span:first-child { width: 17px; height: 20px; justify-self: center; overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 814 1000'%3E%3Cpath fill='%23fff' d='M788 341c-6 4-108 62-108 190 0 148 130 200 134 201-1 3-21 71-68 141-43 62-88 123-156 123s-85-39-163-39c-76 0-103 41-165 41s-106-57-156-127C47 790 0 663 0 543c0-194 126-297 250-297 66 0 121 43 162 43 39 0 101-46 176-46 29 0 130 3 200 98zM554 159c31-37 53-88 53-139 0-7-1-14-2-20-50 2-110 34-146 76-28 32-55 83-55 135 0 8 1 16 2 18 3 1 9 1 14 1 45 0 102-30 134-71z'/%3E%3C/svg%3E") center / contain no-repeat; color: transparent; font-size: 0; }
.auth-separator { display: flex; align-items: center; gap: 12px; margin: 10px 0; color: var(--text-tertiary); font-size: 12px; }
.auth-separator::before, .auth-separator::after { flex: 1; height: .5px; background: var(--line); content: ""; }
.auth-form { display: grid; gap: 10px; }
.auth-form .text-field { max-width: none; }
.auth-toggle { min-height: 44px; border: 0; padding: 12px 2px; color: var(--text-secondary); background: transparent; cursor: pointer; font-size: 13.5px; font-weight: 650; }
.auth-note { margin: 10px 0 0; color: var(--text-tertiary); font-size: 11.5px; line-height: 1.45; text-align: center; }

/* Offer and web→app confirmation retain their existing behavior. */
.offer-shell { min-height: 100dvh; padding: calc(18px + env(safe-area-inset-top)) var(--page-gutter) calc(28px + env(safe-area-inset-bottom)); }
.offer-brand, .funnel-brandbar { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 16px; }
.funnel-header-actions { display: flex; align-items: center; gap: 14px; }
.language-link { min-height: 44px; padding: 12px 2px; color: var(--text-tertiary); font-size: 14px; font-weight: 650; text-decoration: none; }
button.language-link { border: 0; background: transparent; cursor: pointer; }
.secure-chip { border: .5px solid var(--line); border-radius: 999px; padding: 7px 10px; color: var(--text-tertiary); font-size: 11px; font-weight: 700; }
.offer-intro { padding: 28px 0 18px; text-align: center; }
.plan-ready-icon { display: grid; width: 68px; height: 68px; place-items: center; margin: 0 auto 16px; border-radius: 20px; color: #fff; background: var(--brand); box-shadow: var(--shadow-brand); font-size: 26px; }
.offer-intro .eyebrow { margin-bottom: 8px; }
.offer-intro h1 { margin: 0 0 10px; font-size: clamp(34px, 9vw, 44px); line-height: 1.08; }
.offer-intro p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.offer-card { border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line)); border-radius: 26px; padding: 21px; background: var(--surface); box-shadow: 0 12px 36px rgba(0,0,0,.08); backdrop-filter: blur(18px); }
.offer-badge { display: inline-flex; border-radius: 999px; padding: 6px 10px; color: var(--brand-dark); background: var(--brand-soft); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.plan-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 16px 0 4px; }
.plan-row h2 { margin: 0; font-size: 25px; }
.price-block { text-align: right; }
.price-block b { display: block; font-size: 28px; letter-spacing: -.04em; }
.price-block small { color: var(--text-tertiary); font-size: 11px; }
.billing-note { margin: 4px 0 17px; color: var(--text-tertiary); font-size: 12.5px; }
.plan-options { display: grid; gap: 10px; margin: 16px 0 18px; }
.plan-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 76px; border: 1.5px solid var(--line); border-radius: 18px; padding: 13px 16px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s var(--spring); }
.plan-option:active { transform: scale(.985); }
.plan-option.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); }
.plan-option-copy { display: grid; gap: 2px; }
.plan-option-copy b { font-size: 15px; }
.plan-option-copy strong { font-size: 19px; letter-spacing: -.02em; }
.plan-option-copy small { color: var(--text-tertiary); font-size: 12px; }
.plan-save { flex: none; border-radius: 999px; padding: 5px 9px; color: #fff; background: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.offer-benefits { display: grid; gap: 10px; margin: 0 0 18px; padding: 15px 0; border-block: .5px solid var(--line); list-style: none; }
.offer-benefits li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.35; }
.offer-benefits span { color: var(--brand); font-weight: 900; }
.offer-guarantee, .offer-error { color: var(--text-tertiary); line-height: 1.45; text-align: center; }
.offer-guarantee { margin: 12px 0 0; font-size: 11.5px; }
.offer-error { margin: 2px 0 16px; font-size: 14px; }
.offer-close { flex: none; }
.offer-close svg { width: 18px; height: 18px; }
.icon-button:disabled { opacity: .46; cursor: default; }
.offer-legal { margin: 4px 10px 0; color: var(--text-tertiary); font-size: 10.5px; line-height: 1.45; text-align: center; }
.skeleton { border-radius: 9px; background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 35%, transparent), var(--line)); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.skeleton-title { width: 55%; height: 24px; }
.skeleton-price { width: 34%; height: 36px; margin: 20px 0 20px auto; }
.skeleton-line { width: 100%; height: 90px; }
.skeleton-button { height: 56px; margin-top: 18px; border-radius: 999px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.success-shell { display: flex; min-height: 100dvh; flex-direction: column; align-items: center; justify-content: center; padding: calc(34px + env(safe-area-inset-top)) var(--page-gutter) calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.success-orbit { position: relative; display: grid; width: 126px; height: 126px; place-items: center; margin-bottom: 24px; border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line)); border-radius: 50%; }
.success-orbit span { display: grid; width: 76px; height: 76px; place-items: center; border-radius: 24px; color: #fff; background: var(--brand); box-shadow: var(--shadow-brand); font-size: 27px; }
.success-orbit i { position: absolute; inset: -5px; border: 2px solid transparent; border-top-color: var(--brand); border-radius: 50%; animation: orbit 3s linear infinite; }
.success-orbit i::after { position: absolute; top: 4px; right: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); content: ""; }
@keyframes orbit { to { transform: rotate(1turn); } }
.success-shell .eyebrow { margin-bottom: 9px; }
.success-shell h1 { max-width: 440px; margin: 0 0 14px; font-size: clamp(38px, 10vw, 50px); line-height: 1.06; }
.success-copy { max-width: 430px; margin: 0 0 20px; color: var(--text-secondary); font-size: 16px; line-height: 1.5; }
.verification-card { width: 100%; margin-bottom: 16px; border: .5px solid var(--line); border-radius: 18px; padding: 13px 15px; color: var(--text-secondary); background: var(--surface); font-size: 13px; line-height: 1.4; }
.verification-card.verified { border-color: color-mix(in srgb, var(--success) 35%, var(--line)); color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.verification-card.delayed { border-color: color-mix(in srgb, #d48b16 35%, var(--line)); background: color-mix(in srgb, #f3a51f 7%, var(--surface)); }
.verification-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.verification-actions a, .verification-retry { color: var(--brand-dark); font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.verification-retry { border: 0; padding: 0; background: none; cursor: pointer; }
.store-buttons { display: none; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.store-buttons.visible { display: flex; }
.store-buttons a { display: block; border-radius: 8px; transition: opacity .18s, transform .18s var(--spring); }
.store-buttons a:active { opacity: .86; transform: scale(.97); }
.store-buttons a:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 38%, transparent); outline-offset: 3px; }
.store-buttons img { width: auto; height: 48px; }
.manual-login { max-width: 390px; margin: 15px 0 0; color: var(--text-tertiary); font-size: 11.5px; line-height: 1.45; }
.desktop-handoff-copy { margin: 2px 0 16px; }
.desktop-handoff-copy[hidden], .auth-button[hidden], .primary-button[hidden], .secondary-button[hidden], .manual-login[hidden] { display: none; }
.desktop-handoff-copy h2 { margin: 0 0 7px; font-size: 25px; line-height: 1.15; }
.desktop-handoff-copy p { max-width: 430px; margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.success-manage-link { margin-top: 14px; color: var(--brand-dark); font-size: 12.5px; font-weight: 750; text-underline-offset: 3px; }

/* Subscription management */
.account-shell { min-height: 100dvh; padding: env(safe-area-inset-top) var(--page-gutter) calc(22px + env(safe-area-inset-bottom)); }
.account-main { padding: clamp(28px, 7vh, 68px) 0 24px; text-align: center; }
.account-mark { display: grid; width: 64px; height: 64px; place-items: center; margin: 0 auto 20px; border-radius: 20px; color: #fff; background: var(--brand); box-shadow: var(--shadow-brand); font-size: 23px; }
.account-main > .eyebrow { margin-bottom: 9px; }
.account-main h1 { margin: 0 auto 14px; font-size: clamp(36px, 9vw, 46px); line-height: 1.08; }
.account-intro { max-width: 440px; margin: 0 auto 24px; color: var(--text-secondary); font-size: 15.5px; line-height: 1.55; }
.account-card { min-height: 180px; border: .5px solid var(--line); border-radius: 24px; padding: 22px; background: var(--surface); box-shadow: 0 12px 36px rgba(0,0,0,.08); text-align: left; backdrop-filter: blur(18px); }
.account-card-eyebrow { margin: 0 0 5px; color: var(--text-tertiary); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.account-email { margin: 0 0 12px; overflow-wrap: anywhere; color: var(--text); font-size: 17px; font-weight: 750; }
.account-guidance { margin: 0 0 18px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }
.account-switch { margin: 7px auto -5px; }
.account-loading { margin: 54px 0; color: var(--text-tertiary); font-size: 14px; text-align: center; }
.account-status { margin: 16px 0 0; border: .5px solid color-mix(in srgb, var(--warning) 30%, var(--line)); border-radius: 15px; padding: 12px 13px; color: var(--text-secondary); background: color-mix(in srgb, var(--warning) 7%, var(--surface)); font-size: 12.5px; line-height: 1.45; }
.account-help { margin: 17px auto 0; color: var(--text-tertiary); font-size: 12px; line-height: 1.5; }
.account-help a, .account-status a { color: var(--brand-dark); font-weight: 700; }
.account-footer { display: flex; justify-content: center; gap: 18px; padding-top: 8px; color: var(--text-tertiary); font-size: 11.5px; }
.account-footer a { min-height: 36px; padding: 10px 0; text-underline-offset: 3px; }

@media (max-height: 760px) {
  .welcome-carousel { --card-width: min(62vw, 280px); }
  .welcome-hero h1 { margin-block: 8px 14px; font-size: 33px; }
  .welcome-app-icon, .welcome-app-icon img { width: 60px; height: 60px; }
  .welcome-app-icon { flex-basis: 60px; }
  .step-emoji { width: 84px; height: 84px; margin-bottom: 16px; font-size: 62px; }
  .step-basic .step-copy h1 { font-size: 33px; }
  .step-dense .step-copy { margin-top: 8px; }
  .step-dense .step-content { margin-top: 10px; }
  .step-dense .choice { min-height: 54px; padding-block: 8px; }
  .step-dense .choice-grid { gap: 7px; }
  /* Restated at the specificity of the unconditional rules added for the
     seven-answer question and the T-03 footer. Media queries add none, so the
     bare selectors above lose to them and this whole block would go inert for
     survey steps, on exactly the screens with the least room. */
  .step-dense .choice-grid[data-count="7"] { gap: 7px; }
  .step-actions { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .step-survey .step-actions { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  /* Restores the 8px the dense footer used to carry here. T-03's 16px is right
     on a full-height phone and is 8px this screen does not have. */
  .step-survey.step-dense .step-actions { padding-top: 8px; }
  /* The 820px block above uses `.step-survey.step-dense` and therefore outranks
     the bare `.step-dense .choice` in this block. Restated here so the shortest
     screens still get the shortest rows; without it a 667px phone inherits the
     768px phone's 59px rows and goes 40px over. */
  .step-survey.step-dense .choice { min-height: 54px; padding-block: 8px; }
  /* Same trade on the subtitle: T-03's 15px everywhere there is room, the 14px
     this block used to get where there is not. A six or seven answer question
     on a 667px phone is the tightest screen in the funnel. */
  .step-survey.step-dense .step-copy p { font-size: 14px; }
  .distance-mockup { margin-bottom: 18px; }
  .distance-values { gap: 10px; margin-top: 14px; }
  .calibration-wand { width: 90px; height: 90px; margin-bottom: 12px; font-size: 68px; }
  .calibration-content h1 { margin-bottom: 16px; font-size: 35px; }
  .calibration-progress { margin-bottom: 18px; }
  .calibration-list { gap: 7px; }
  .calibration-row { min-height: 48px; padding-block: 9px; }
}

@media (min-width: 600px) {
  .sheet-card { right: auto; bottom: 18px; left: 50%; width: min(520px, calc(100% - 32px)); border-radius: 28px; transform: translateX(-50%); }
  @keyframes sheetIn { from { opacity: 0; transform: translate(-50%, 40px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* Desktop keeps the native journey and repackages it for a wider canvas. */
@media (min-width: 900px) and (min-height: 600px) {
  .onboarding-shell { position: relative; isolation: isolate; justify-content: center; padding: max(18px, env(safe-area-inset-top)) 24px 22px; }
  .onboarding-shell::before { position: fixed; z-index: -1; top: 50%; left: 50%; width: min(860px, 72vw); height: min(660px, 76vh); border-radius: 50%; background: radial-gradient(ellipse, rgba(233,30,99,.075), transparent 67%); filter: blur(18px); pointer-events: none; transform: translate(-50%, -48%); content: ""; }
  .progress-header { position: relative; z-index: 2; max-width: 720px; height: 66px; flex-basis: 66px; padding: 0 20px 12px; }
  .progress-track { height: 8px; border-radius: 999px; }
  .step-stage { position: relative; z-index: 1; max-width: 720px; height: calc(100dvh - 106px); max-height: 640px; flex: 0 1 640px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); border-radius: 34px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 72%, transparent), color-mix(in srgb, var(--surface) 82%, transparent)); box-shadow: 0 26px 80px rgba(47,30,40,.075), inset 0 1px rgba(255,255,255,.52); backdrop-filter: blur(24px); }
  .step-screen { border-radius: inherit; }
  .step-copy h1 { font-size: 40px; }
  .step-copy p { max-width: 430px; font-size: 16px; }
  .step-survey .step-copy { max-width: 460px; }
  .step-survey .step-copy h1 { max-width: 420px; font-size: 32px; }
  .step-survey .step-copy p { max-width: 420px; font-size: 15px; }
  /* .auth-content is repeated as .step-content.auth-content because the block-layout fix
     above uses that 2-class selector; a bare .auth-content here would lose to it on
     specificity (media queries add none) and this 420px would never apply. */
  .step-basic .choice-grid, .choice-grid, .text-field, .date-field,
  .auth-content, .step-content.auth-content { max-width: 420px; }
  .step-actions { margin-top: 24px; padding: 0 24px 18px; background: transparent; }
  /* Same specificity trap as `.auth-content` above: the unconditional
     `.step-survey .step-actions` added for T-03 outranks the bare selector
     here, so the desktop footer needs its own two-class copy or every survey
     step gets ~22px more padding inside a card capped at 640px. */
  .step-survey .step-actions { padding: 0 24px 18px; background: transparent; }
  .step-actions .primary-button { max-width: 420px; }
  .step-basic .step-content { margin-bottom: 0; }
  .step-basic .step-actions { margin: 24px 0 auto; }
  .step-survey .step-content { margin: 24px 0 0; }
  .step-survey .step-actions { margin: 24px 0 auto; }
  .step-ceremony .ceremony-content, .step-distance .distance-content, .step-social .social-content, .step-ready .ready-content, .step-calibration .calibration-content { flex: 0 0 auto; margin-top: auto; }
  .step-ceremony .step-actions, .step-distance .step-actions, .step-social .step-actions, .step-ready .step-actions, .step-calibration .step-actions { margin: 24px 0 auto; }
  .comparison-scroll { flex: 0 0 auto; margin-top: auto; padding-top: 10px; }
  .step-comparison .step-actions { margin: 12px 0 auto; }
  .comparison-copy h1 { max-width: 560px; font-size: 34px; }
  .comparison-cards { max-width: 660px; }
  body[data-onboarding-step="social_proof"] .step-stage, body[data-onboarding-step="long_distance_value"] .step-stage { max-width: 880px; }
  body[data-onboarding-step="social_proof"] .progress-header, body[data-onboarding-step="long_distance_value"] .progress-header { max-width: 820px; }
  .step-social .social-content { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(275px, .88fr); grid-template-rows: auto 38px; column-gap: 34px; align-content: center; padding: 28px 38px 12px; }
  .step-social .review-carousel { grid-column: 1; grid-row: 1; width: 100%; max-width: none; height: 238px; overflow-x: hidden; padding-inline: 0; scroll-padding-inline: 0; }
  .step-social .review-card { height: 238px; min-width: 100%; flex-basis: 100%; padding: 21px; }
  .step-social .review-controls { grid-column: 1; grid-row: 2; }
  .step-social .social-copy { grid-column: 2; grid-row: 1 / 3; max-width: none; margin: 0; padding: 0; }
  .step-social .survey-copy { padding-top: 16px; }
  .step-social .survey-copy h1 { max-width: 330px; font-size: 31px; }
  .step-social .survey-copy p { max-width: 330px; }
  .review-controls { gap: 14px; }
  .review-arrow { display: grid; }
  .review-dots { min-width: 74px; }
  .step-distance .distance-content { display: grid; grid-template-columns: 310px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 48px; align-content: center; padding: 30px 56px 12px; }
  .step-distance .distance-mockup { grid-column: 1; grid-row: 1 / 3; align-self: center; margin: 0; }
  .step-distance .distance-copy { grid-column: 2; grid-row: 1; align-self: end; }
  .step-distance .distance-values { grid-column: 2; grid-row: 2; align-self: start; margin: 20px 0 0; }
  body[data-onboarding-step="amora_comparison"] .step-stage, .calibration-active .step-stage { max-height: 700px; flex-basis: 700px; }
  .calibration-active .step-stage { height: calc(100dvh - 40px); }
}

@media (min-width: 960px) and (min-height: 600px) {
  .landing-main { justify-content: center; padding: max(36px, env(safe-area-inset-top)) 48px max(36px, env(safe-area-inset-bottom)); }
  .welcome-hero { display: grid; width: min(1180px, 100%); min-height: 0; flex: 1 1 auto; grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr); gap: 56px; align-items: center; margin: auto; text-align: left; }
  .welcome-carousel { --card-width: clamp(220px, 22vw, 290px); --side-width: calc(var(--card-width) * .70); --badge-one-x: calc(var(--card-width) * .28); --badge-two-x: calc(var(--card-width) * .32); --badge-three-x: calc(var(--card-width) * .22); --badge-one-y: calc(var(--card-width) * .475); --badge-two-y: calc(var(--card-width) * .1875); --badge-three-y: calc(var(--card-width) * .50); width: 100%; align-self: center; }
  .welcome-copy { display: flex; max-width: 450px; flex-direction: column; align-items: flex-start; justify-self: start; }
  .welcome-app-icon { width: 72px; height: 72px; flex-basis: 72px; margin: 0 0 22px; }
  .welcome-app-icon img { width: 72px; height: 72px; }
  .welcome-hero h1 { margin: 0; padding: 0; font-size: clamp(46px, 4.2vw, 58px); line-height: 1.03; text-align: left; }
  .welcome-desktop-details { display: block; }
  .welcome-body { max-width: 430px; margin: 18px 0 0; color: var(--text-secondary); font-size: 17px; line-height: 1.5; }
  .welcome-promises { display: grid; max-width: 440px; gap: 10px; margin: 20px 0 24px; padding: 0; list-style: none; }
  .welcome-promises li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; color: var(--text-secondary); font-size: 14px; font-weight: 600; line-height: 1.38; }
  .welcome-promises li > span:first-child { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: 12px; font-weight: 900; }
  .welcome-actions { max-width: 420px; margin: 0; padding: 0; }
  .welcome-trust { display: block; margin: 12px 0 0; color: var(--text-tertiary); font-size: 11.5px; font-weight: 600; line-height: 1.45; text-align: left; }
  .welcome-legal { min-height: 34px; justify-content: flex-start; }

  .offer-shell.safe-width { display: grid; width: min(1040px, 100%); max-width: 1040px; grid-template-columns: minmax(320px, .9fr) minmax(420px, 1fr); grid-template-rows: auto auto auto auto; column-gap: 72px; align-content: center; padding: max(28px, env(safe-area-inset-top)) 42px max(32px, env(safe-area-inset-bottom)); }
  .offer-brand { grid-column: 1 / -1; grid-row: 1; }
  .offer-intro { grid-column: 1; grid-row: 2 / 5; align-self: center; padding: 44px 0; text-align: left; }
  .offer-intro .plan-ready-icon { margin: 0 0 20px; }
  .offer-intro h1 { max-width: 430px; font-size: 50px; }
  .offer-intro p { max-width: 410px; font-size: 17px; }
  .offer-card { grid-column: 2; grid-row: 2; align-self: start; margin-top: 30px; padding: 27px; }
  .offer-legal { grid-column: 2; grid-row: 4; }

  .success-shell.safe-width { max-width: 620px; padding-inline: 44px; }
  .success-shell h1 { font-size: 52px; }
  .success-shell > .primary-button, .verification-card { max-width: 500px; }
  .desktop-handoff-copy { margin-top: 4px; }
  .store-buttons { margin-top: 2px; }

  .funnel-brandbar, .account-footer { max-width: 960px; }
  .account-main { max-width: 560px; }
  .account-main h1 { font-size: 48px; }
}

@media (prefers-color-scheme: dark) and (min-width: 900px) and (min-height: 600px) {
  .step-stage { border-color: rgba(255,255,255,.10); box-shadow: 0 28px 86px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08); }
}

@media (min-width: 960px) and (max-width: 1100px) and (min-height: 600px) {
  .landing-main { padding-inline: 34px; }
  .welcome-hero { grid-template-columns: minmax(0, 1.04fr) minmax(350px, .96fr); gap: 46px; }
  .welcome-carousel { --card-width: clamp(210px, 21vw, 230px); --side-width: calc(var(--card-width) * .56); }
}

@media (min-width: 900px) and (min-height: 721px) and (max-height: 800px) {
  .step-dense .step-copy { margin-top: 6px; }
  .step-dense .step-content { margin-top: 11px; }
  .step-dense .choice-grid { gap: 7px; }
  .step-dense .choice-grid[data-count="7"] { gap: 7px; }
  .step-dense .choice { min-height: 54px; padding-block: 8px; }
  .step-dense .step-actions { margin-top: 12px; padding-bottom: 10px; }
  .step-survey.step-dense .step-actions { padding-bottom: 10px; }
  .comparison-cards { height: 400px; margin-top: 14px; padding-bottom: 8px; }
  .comparison-card { height: 390px; padding: 16px 13px 17px; }
  .comparison-items { gap: 9px; margin-top: 13px; }
  .step-social .social-content { padding-block: 18px 6px; }
  .step-social .review-carousel, .step-social .review-card { height: 218px; }
}

@media (min-width: 900px) and (min-height: 600px) and (max-height: 720px) {
  .step-comparison .comparison-scroll { padding-block: 0 4px; }
  .comparison-copy h1 { font-size: 30px; }
  .comparison-copy p { margin-top: 4px; }
  .comparison-cards { height: 350px; margin-top: 12px; padding-bottom: 8px; }
  .comparison-card { height: 340px; padding: 14px 12px 16px; }
  .comparison-items { gap: 8px; margin-top: 12px; }
  .comparison-items span { font-size: 12.5px; line-height: 1.25; }
  .comparison-emoji { font-size: 46px; }
  .comparison-with .comparison-emoji { font-size: 56px; }
  .step-comparison .step-actions { margin-top: 6px; }
  .step-dense .step-copy { margin-top: 4px; }
  .step-dense .step-content { margin-top: 9px; }
  .step-dense .choice-grid { gap: 6px; }
  .step-dense .choice-grid[data-count="7"] { gap: 6px; }
  .step-dense .choice { min-height: 52px; padding-block: 7px; }
  .step-dense .step-actions { margin-top: 9px; padding-bottom: 8px; }
  .step-survey.step-dense .step-actions { padding-bottom: 8px; }
  .step-social .social-content { padding: 12px 30px 4px; }
  .step-social .review-carousel, .step-social .review-card { height: 190px; }
  .step-social .survey-copy { padding-top: 10px; }
  .step-social .survey-copy h1 { font-size: 27px; }
  .step-distance .distance-content { padding-block: 12px 4px; }
}

@media (min-width: 960px) and (min-height: 600px) and (max-height: 720px) {
  .landing-shell { overflow-y: auto; }
  .landing-main { min-height: 680px; padding-block: 24px; }
  .welcome-carousel { --card-width: clamp(200px, 20vw, 230px); }
  .welcome-app-icon, .welcome-app-icon img { width: 58px; height: 58px; }
  .welcome-app-icon { flex-basis: 58px; margin-bottom: 14px; }
  .welcome-hero h1 { font-size: clamp(43px, 4vw, 49px); }
  .welcome-body { margin-top: 12px; font-size: 15px; }
  .welcome-promises { gap: 7px; margin: 14px 0 16px; }
  .welcome-trust { margin-top: 8px; }
  .offer-intro { padding-block: 20px; }
  .offer-intro .plan-ready-icon { width: 58px; height: 58px; margin-bottom: 14px; border-radius: 18px; }
  .offer-intro h1 { font-size: 44px; }
  .offer-card { margin-top: 10px; padding: 22px; }
}

@media (hover: hover) and (pointer: fine) {
  .primary-button:not(:disabled):hover { transform: translateY(-1px); box-shadow: inset 0 1px rgba(255,255,255,.28), 0 14px 30px rgba(233,30,99,.30); }
  .secondary-button:not(:disabled):hover, .auth-button:not(:disabled):hover, .choice:not(:disabled):hover, .icon-button:not(:disabled):hover, .review-arrow:not(:disabled):hover, .photo-preview:not(:disabled):hover { border-color: color-mix(in srgb, var(--brand) 24%, var(--line)); box-shadow: 0 8px 20px rgba(0,0,0,.09); transform: translateY(-1px); }
  .text-button:not(:disabled):hover, .welcome-preference:not(:disabled):not([aria-disabled="true"]):hover, .language-link:hover, .verification-retry:hover, .photo-change-button:hover { color: var(--brand-dark); }
  .store-buttons a:hover { opacity: .92; transform: translateY(-1px); }
  .primary-button:not(:disabled):active, .secondary-button:not(:disabled):active, .auth-button:not(:disabled):active, .choice:not(:disabled):active, .icon-button:not(:disabled):active, .review-arrow:not(:disabled):active, .photo-preview:not(:disabled):active { transform: translateY(0) scale(.97); }
  .store-buttons a:active { opacity: .86; transform: translateY(0) scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .welcome-triptych, .welcome-app-icon, .welcome-hero h1, .welcome-actions { animation: welcomeReducedIn .16s ease-out backwards !important; }
  .welcome-badge-surface { animation: none !important; }
}

@keyframes welcomeReducedIn { from { opacity: 0; } }