/*
 * RYLA funnel v6 design system: tokens + component classes.
 * Reuse verbatim. Every class is prefixed v6-. Raw hex lives only in this file.
 *
 * Responsive model: wrap the funnel page in <div class="v6-app"> (a CSS container).
 * Desktop rules use @container (min-width: 900px), so a 1280 frame inside a narrower
 * page lays out as desktop and the real page needs no media queries.
 * State helpers .is-hover .is-pressed .is-focus exist only so the sheet can show states;
 * the product uses real :hover :active :focus-visible.
 */

@property --v6-x { syntax: '<percentage>'; inherits: false; initial-value: -30%; }
@property --v6-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  /* color */
  --v6-bg: #0d0d10;
  --v6-surface: #16161c;
  --v6-raised: #1f1f27;
  --v6-raised-2: #2a2a35;
  --v6-text: #f4f3ff;
  --v6-text-2: #a9a9bc;
  --v6-text-3: #9d9db1;
  --v6-violet: #7c3aed;
  --v6-purple: #9333ea;
  --v6-indigo: #4F63F0;
  --v6-soft: #a78bfa;
  --v6-lilac: #c4b5fd;
  --v6-ok: #34d399;
  --v6-err: #f87171;
  --v6-line: rgba(255, 255, 255, 0.1);
  --v6-line-2: rgba(255, 255, 255, 0.18);
  --v6-tint: rgba(124, 58, 237, 0.18);
  --v6-tint-2: rgba(124, 58, 237, 0.32);
  --v6-glass: rgba(22, 22, 28, 0.62);
  --v6-grad-cta: linear-gradient(100deg, var(--v6-violet) 0%, var(--v6-purple) 55%, var(--v6-indigo) 100%);
  --v6-indigo-soft: #a5b4fc;
  --v6-grad-text: linear-gradient(90deg, var(--v6-lilac), var(--v6-soft) 55%, var(--v6-indigo-soft));
  /* glows, hairlines, scrims and shadows the steps share */
  --v6-glow: color-mix(in srgb, var(--v6-violet) 34%, transparent);
  --v6-line-accent: color-mix(in srgb, var(--v6-lilac) 32%, transparent);
  --v6-scrim: rgba(13, 13, 16, 0.9);
  --v6-veil: rgba(255, 255, 255, 0.03);
  --v6-hi-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --v6-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  --v6-shadow-sel: 0 0 0 3px rgba(196, 181, 253, 0.18), 0 8px 24px rgba(124, 58, 237, 0.45);
  --v6-shadow-glow: 0 18px 48px rgba(124, 58, 237, 0.35);

  /* spacing (4 px grid) */
  --v6-s1: 4px; --v6-s2: 8px; --v6-s3: 12px; --v6-s4: 16px; --v6-s5: 20px;
  --v6-s6: 24px; --v6-s8: 32px; --v6-s10: 40px; --v6-s12: 48px; --v6-s16: 64px;

  /* radius */
  --v6-r-sm: 10px; --v6-r-md: 14px; --v6-r-lg: 18px; --v6-r-xl: 24px; --v6-r-full: 999px;

  /* type */
  --v6-display: 'Space Grotesk', system-ui, sans-serif;
  --v6-body: 'Inter', system-ui, sans-serif;

  /* motion: micro 150, state 250, enter 400 (page max 500). ease-out only, no overshoot. */
  --v6-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --v6-t-micro: 150ms;
  --v6-t-state: 250ms;
  --v6-t-enter: 400ms;

  /* sizes */
  --v6-tap: 44px;
}

/* ---------------------------------------------------------------- base */
.v6-app {
  container: v6 / inline-size;
  position: relative;
  isolation: isolate;
  min-height: 100%;
  background: var(--v6-bg);
  color: var(--v6-text);
  font-family: var(--v6-body);
  -webkit-font-smoothing: antialiased;
  overflow: clip;
}
.v6-app *, .v6-app *::before, .v6-app *::after { box-sizing: border-box; }
.v6-app :where(h1, h2, h3, p, ul) { margin: 0; padding: 0; list-style: none; }
.v6-app :where(button) { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.v6-ic { width: 1.25em; height: 1.25em; flex: none; display: block; }

/* ambient backdrop: two slow orbs, violet and indigo, behind everything */
.v6-ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.v6-ambient::before, .v6-ambient::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; animation: v6-drift 14s ease-in-out infinite; }
.v6-ambient::before { width: 420px; height: 420px; left: -120px; top: -80px; background: var(--v6-violet); }
.v6-ambient::after { width: 360px; height: 360px; right: -140px; top: 30%; background: var(--v6-indigo); opacity: 0.28; animation-delay: -6s; }
@keyframes v6-drift { 50% { transform: translate3d(40px, 30px, 0) scale(1.08); } }

/* ---------------------------------------------------------------- type */
.v6-eyebrow { font: 600 12px/1 var(--v6-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v6-lilac); }
.v6-h1 { font: 700 28px/1.15 var(--v6-display); letter-spacing: -0.02em; text-wrap: balance; }
.v6-h2 { font: 700 20px/1.25 var(--v6-display); letter-spacing: -0.01em; }
.v6-sub { font: 400 16px/1.5 var(--v6-body); color: var(--v6-text-2); text-wrap: pretty; }
.v6-label { font: 600 12px/1 var(--v6-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v6-text-2); }
.v6-small { font: 400 13px/1.45 var(--v6-body); color: var(--v6-text-3); }
.v6-accent { background: var(--v6-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
@container v6 (min-width: 900px) {
  .v6-eyebrow { font-size: 13px; }
  .v6-h1 { font-size: 44px; line-height: 1.08; letter-spacing: -0.025em; }
  .v6-h2 { font-size: 24px; }
  .v6-sub { font-size: 18px; line-height: 1.55; }
  .v6-small { font-size: 14px; }
}

/* ---------------------------------------------------------------- CTA (primary) */
.v6-cta {
  --v6-x: -30%;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; min-height: 60px; padding: 0 10px 0 28px;
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: #fff; font: 700 18px/1 var(--v6-body); letter-spacing: -0.005em;
  background:
    radial-gradient(160px 80px at var(--v6-x) 50%, rgba(255, 255, 255, 0.38), transparent 70%),
    var(--v6-grad-cta);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -10px 20px rgba(60, 10, 120, 0.35), 0 10px 30px rgba(124, 58, 237, 0.45), 0 0 0 0 rgba(196, 181, 253, 0);
  animation: v6-sweep 3.6s ease-in-out infinite, v6-halo 2.6s ease-in-out infinite;
  transition: transform var(--v6-t-micro) var(--v6-ease), filter var(--v6-t-micro) var(--v6-ease);
}
.v6-cta__chip { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); transition: transform var(--v6-t-state) var(--v6-ease), background var(--v6-t-state) var(--v6-ease); }
.v6-cta__chip .v6-ic { width: 20px; height: 20px; }
.v6-cta:hover, .v6-cta.is-hover { filter: brightness(1.08); }
.v6-cta:hover .v6-cta__chip, .v6-cta.is-hover .v6-cta__chip { transform: translateX(3px); background: rgba(255, 255, 255, 0.32); }
.v6-cta:active, .v6-cta.is-pressed { transform: scale(0.985); filter: brightness(0.94); }
.v6-cta:focus-visible, .v6-cta.is-focus { outline: 2px solid var(--v6-lilac); outline-offset: 3px; }
.v6-cta[aria-busy='true'] { animation: none; pointer-events: none; filter: saturate(0.85); }
.v6-cta[aria-busy='true'] .v6-cta__chip .v6-ic { animation: v6-rot 0.9s linear infinite; }
.v6-cta:disabled, .v6-cta[aria-disabled='true'] { animation: none; pointer-events: none; color: var(--v6-text-3); background: var(--v6-raised-2); border-color: var(--v6-line); box-shadow: none; }
.v6-cta:disabled .v6-cta__chip { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
@keyframes v6-sweep { 0%, 100% { --v6-x: -20%; } 50% { --v6-x: 120%; } }
@keyframes v6-halo { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -10px 20px rgba(60, 10, 120, 0.35), 0 10px 44px rgba(147, 51, 234, 0.7), 0 0 0 5px rgba(196, 181, 253, 0.12); } }
@keyframes v6-rot { to { transform: rotate(360deg); } }
@container v6 (min-width: 900px) { .v6-cta { min-height: 64px; font-size: 19px; } }

/* secondary / back */
.v6-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--v6-tap); padding: 0 20px; border-radius: var(--v6-r-full); border: 1px solid var(--v6-line-2); background: rgba(255, 255, 255, 0.04); font: 600 15px/1 var(--v6-body); color: var(--v6-text); transition: background var(--v6-t-state) var(--v6-ease), border-color var(--v6-t-state) var(--v6-ease), transform var(--v6-t-micro) var(--v6-ease); }
.v6-btn:hover, .v6-btn.is-hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.32); }
.v6-btn:active, .v6-btn.is-pressed { transform: scale(0.98); }
.v6-btn:focus-visible, .v6-btn.is-focus { outline: 2px solid var(--v6-lilac); outline-offset: 2px; }
.v6-btn:disabled { opacity: 0.4; pointer-events: none; }
.v6-back { width: var(--v6-tap); height: var(--v6-tap); padding: 0; border-radius: 50%; }
.v6-back:disabled { visibility: hidden; } /* step 1: nothing to go back to */
.v6-link { color: var(--v6-lilac); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

/* ---------------------------------------------------------------- progress */
.v6-progress { display: grid; gap: 8px; width: 100%; }
.v6-progress__meta { display: flex; justify-content: space-between; align-items: baseline; font: 600 12px/1 var(--v6-body); color: var(--v6-text); font-variant-numeric: tabular-nums; }
.v6-progress__meta b { color: var(--v6-text); font-weight: 700; }
.v6-progress__track { position: relative; height: 6px; border-radius: var(--v6-r-full); background: rgba(255, 255, 255, 0.1); }
.v6-progress__fill { position: absolute; inset: 0 auto 0 0; width: var(--p, 30%); border-radius: inherit; background: linear-gradient(90deg, var(--v6-violet), var(--v6-indigo)); transition: width var(--v6-t-enter) var(--v6-ease); box-shadow: 0 0 14px rgba(147, 51, 234, 0.7); }
.v6-progress__fill::after { content: ''; position: absolute; right: -5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.35), 0 0 16px rgba(196, 181, 253, 0.9); }

/* ---------------------------------------------------------------- option card */
.v6-opt { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--v6-r-xl); border: 1.5px solid var(--v6-line); background: var(--v6-surface); text-align: left; transition: transform var(--v6-t-state) var(--v6-ease), border-color var(--v6-t-state) var(--v6-ease), box-shadow var(--v6-t-state) var(--v6-ease); }
.v6-opt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--v6-t-enter) var(--v6-ease), filter var(--v6-t-state) var(--v6-ease); filter: saturate(0.85) brightness(0.85); }
.v6-opt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(13, 13, 16, 0.92)); }
.v6-opt__label { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; font: 600 16px/1.2 var(--v6-body); }
.v6-opt__label small { display: block; margin-top: 3px; font: 400 12px/1.3 var(--v6-body); color: var(--v6-text-2); }
.v6-opt__check { position: absolute; z-index: 1; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--v6-violet); opacity: 0; transform: scale(0.7); transition: opacity var(--v6-t-state) var(--v6-ease), transform var(--v6-t-state) var(--v6-ease); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.v6-opt__check .v6-ic { width: 16px; height: 16px; stroke-width: 3; }
.v6-opt:hover, .v6-opt.is-hover { transform: translateY(-3px); border-color: var(--v6-line-2); }
.v6-opt:hover img, .v6-opt.is-hover img { transform: scale(1.04); filter: none; }
.v6-opt:active, .v6-opt.is-pressed { transform: scale(0.98); }
.v6-opt:focus-visible, .v6-opt.is-focus { outline: 2px solid var(--v6-lilac); outline-offset: 3px; }
.v6-opt[aria-pressed='true'], .v6-opt.is-selected { border-color: var(--v6-lilac); transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(196, 181, 253, 0.16), 0 14px 40px rgba(124, 58, 237, 0.55); animation: v6-glow 3.2s ease-in-out infinite; }
.v6-opt[aria-pressed='true'] img, .v6-opt.is-selected img { filter: none; }
.v6-opt[aria-pressed='true'] .v6-opt__check, .v6-opt.is-selected .v6-opt__check { opacity: 1; transform: none; }
.v6-opt:disabled, .v6-opt.is-disabled { opacity: 0.4; pointer-events: none; }
@keyframes v6-glow { 50% { box-shadow: 0 0 0 4px rgba(196, 181, 253, 0.28), 0 14px 52px rgba(147, 51, 234, 0.75); } }

/* option rail: swipe on mobile, grid on desktop */
.v6-opts { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 14px; margin: 0 -4px; scrollbar-width: none; }
.v6-opts::-webkit-scrollbar { display: none; }
.v6-opts > * { flex: 0 0 132px; scroll-snap-align: start; }
@container v6 (min-width: 900px) {
  .v6-opts { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; padding: 6px 4px 8px; }
  .v6-opts > * { flex: none; }
}

/* ---------------------------------------------------------------- chips */
.v6-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v6-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--v6-tap); padding: 0 18px; border-radius: var(--v6-r-full); border: 1px solid var(--v6-line); background: var(--v6-raised); font: 500 16px/1 var(--v6-body); color: var(--v6-text-2); transition: background var(--v6-t-state) var(--v6-ease), border-color var(--v6-t-state) var(--v6-ease), color var(--v6-t-state) var(--v6-ease), transform var(--v6-t-micro) var(--v6-ease); }
.v6-chip .v6-ic { width: 16px; height: 16px; stroke-width: 3; display: none; }
.v6-chip:hover, .v6-chip.is-hover { border-color: var(--v6-line-2); color: var(--v6-text); transform: translateY(-1px); }
.v6-chip:active, .v6-chip.is-pressed { transform: scale(0.97); }
.v6-chip:focus-visible, .v6-chip.is-focus { outline: 2px solid var(--v6-lilac); outline-offset: 2px; }
.v6-chip[aria-pressed='true'], .v6-chip.is-selected { color: var(--v6-text); border-color: var(--v6-lilac); background: linear-gradient(160deg, var(--v6-tint-2), var(--v6-tint)); box-shadow: 0 0 18px rgba(124, 58, 237, 0.4); }
.v6-chip[aria-pressed='true'] .v6-ic, .v6-chip.is-selected .v6-ic { display: block; }
.v6-chip:disabled { opacity: 0.4; pointer-events: none; }

/* ---------------------------------------------------------------- slider (age) */
.v6-slider { --p: 40%; display: grid; gap: 14px; }
.v6-slider__head { display: flex; justify-content: space-between; align-items: baseline; }
.v6-slider__value { font: 700 40px/1 var(--v6-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.v6-slider__value small { margin-left: 6px; font: 500 14px var(--v6-body); color: var(--v6-text-3); letter-spacing: 0; }
.v6-slider input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: var(--v6-tap); margin: 0; background: transparent; cursor: pointer; }
.v6-slider input[type='range']::-webkit-slider-runnable-track { height: 8px; border-radius: var(--v6-r-full); background: linear-gradient(90deg, var(--v6-violet), var(--v6-indigo)) 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, 0.12); }
.v6-slider input[type='range']::-moz-range-track { height: 8px; border-radius: var(--v6-r-full); background: rgba(255, 255, 255, 0.12); }
.v6-slider input[type='range']::-moz-range-progress { height: 8px; border-radius: var(--v6-r-full); background: linear-gradient(90deg, var(--v6-violet), var(--v6-indigo)); }
.v6-slider input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 5px solid var(--v6-violet); box-shadow: 0 0 0 5px rgba(196, 181, 253, 0.22), 0 6px 18px rgba(0, 0, 0, 0.5); transition: transform var(--v6-t-micro) var(--v6-ease), box-shadow var(--v6-t-state) var(--v6-ease); }
.v6-slider input[type='range']::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 5px solid var(--v6-violet); box-shadow: 0 0 0 5px rgba(196, 181, 253, 0.22); }
.v6-slider input[type='range']:hover::-webkit-slider-thumb, .v6-slider.is-hover input[type='range']::-webkit-slider-thumb { transform: scale(1.08); }
.v6-slider input[type='range']:active::-webkit-slider-thumb, .v6-slider.is-pressed input[type='range']::-webkit-slider-thumb { transform: scale(0.95); box-shadow: 0 0 0 9px rgba(196, 181, 253, 0.3), 0 6px 18px rgba(0, 0, 0, 0.5); }
.v6-slider input[type='range']:focus-visible, .v6-slider.is-focus input[type='range'] { outline: 2px solid var(--v6-lilac); outline-offset: 2px; border-radius: 12px; }
.v6-slider input[type='range']:disabled { opacity: 0.4; }
.v6-slider__scale { display: flex; justify-content: space-between; font: 500 12px/1 var(--v6-body); color: var(--v6-text-3); }

/* ---------------------------------------------------------------- text input */
.v6-field { display: grid; gap: 8px; }
.v6-field__box { position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 12px 10px 18px; border-radius: var(--v6-r-lg); border: 1.5px solid var(--v6-line-2); background: var(--v6-surface); transition: border-color var(--v6-t-state) var(--v6-ease), box-shadow var(--v6-t-state) var(--v6-ease), background var(--v6-t-state) var(--v6-ease); }
.v6-field__main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.v6-field__main label { font: 600 11px/1 var(--v6-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v6-text-3); }
.v6-field__main input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--v6-text); font: 600 22px/1.2 var(--v6-display); }
.v6-field__main input::placeholder { color: var(--v6-text-3); font-weight: 500; }
.v6-field__box:hover, .v6-field__box.is-hover { border-color: rgba(255, 255, 255, 0.3); }
.v6-field__box:focus-within, .v6-field__box.is-focus { border-color: var(--v6-lilac); background: color-mix(in srgb, var(--v6-violet) 14%, var(--v6-surface)); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.32), 0 0 28px rgba(124, 58, 237, 0.3); }
.v6-field__box:focus-within .v6-field__main label, .v6-field__box.is-focus .v6-field__main label { color: var(--v6-lilac); }
.v6-field__helper { display: flex; gap: 6px; align-items: center; padding: 0 6px; font: 400 13px/1.4 var(--v6-body); color: var(--v6-text-3); }
.v6-field__helper .v6-ic { width: 14px; height: 14px; }
.v6-field.is-error .v6-field__box { border-color: var(--v6-err); box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18); }
.v6-field.is-error .v6-field__helper { color: var(--v6-err); }
.v6-field.is-disabled { opacity: 0.45; pointer-events: none; }
.v6-field__action { min-height: 40px; padding: 0 14px; font-size: 14px; }

/* ---------------------------------------------------------------- hero stage (live preview of her) */
.v6-stage { position: relative; width: 100%; height: 300px; display: grid; place-items: end center; isolation: isolate; }
.v6-stage::before { content: ''; position: absolute; inset: 6% 8% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, 0.75), rgba(147, 51, 234, 0.25) 60%, transparent 75%); animation: v6-breathe 6s ease-in-out infinite; }
/* mobile: absolute, because a % height inside the grid stage does not resolve when the stage is
   sized by its parent (the photo then spills over the controls). Desktop keeps the grid sizing. */
.v6-stage__img { height: 100%; width: auto; max-width: 88%; object-fit: cover; object-position: 50% 0; border-radius: 28px 28px 0 0; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); transition: opacity var(--v6-t-enter) var(--v6-ease); }
.v6-stage__ring { position: absolute; left: 50%; bottom: -6px; width: 72%; height: 26px; transform: translateX(-50%); border-radius: 50%; border: 1.5px solid rgba(196, 181, 253, 0.55); box-shadow: 0 0 22px rgba(147, 51, 234, 0.7), inset 0 0 18px rgba(147, 51, 234, 0.5); }
.v6-stage__ring::after { content: ''; position: absolute; inset: 5px 18%; border-radius: 50%; border: 1px solid rgba(196, 181, 253, 0.35); }
.v6-stage__tag { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: var(--v6-r-full); background: var(--v6-glass); border: 1px solid var(--v6-line-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 700 16px/1 var(--v6-display); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.v6-stage__tag .v6-ic { width: 14px; height: 14px; color: var(--v6-lilac); }
@keyframes v6-breathe { 50% { opacity: 0.7; transform: scale(1.05); } }

/* ---------------------------------------------------------------- micro-cards (no reviews, no counts) */
.v6-card { border-radius: var(--v6-r-lg); border: 1px solid var(--v6-line); background: var(--v6-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.v6-tile { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--v6-violet), var(--v6-indigo)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 16px rgba(124, 58, 237, 0.4); }
.v6-tile .v6-ic { width: 20px; height: 20px; }
.v6-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font: 500 12.5px/1.3 var(--v6-body); color: var(--v6-text-2); }
.v6-trust li { display: inline-flex; align-items: center; gap: 6px; }
.v6-trust .v6-ic { width: 14px; height: 14px; color: var(--v6-ok); }
.v6-benefit { display: flex; gap: 14px; align-items: center; padding: 14px 16px; }
.v6-benefit b { display: block; font: 600 15px/1.25 var(--v6-body); }
.v6-benefit > div > span { display: block; margin-top: 3px; font: 400 13px/1.4 var(--v6-body); color: var(--v6-text-2); }
.v6-example { padding: 12px; display: grid; gap: 10px; }
.v6-example__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.v6-example__row img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; }
.v6-example p { font: 500 13px/1.35 var(--v6-body); color: var(--v6-text-2); }
.v6-example p b { color: var(--v6-text); font-weight: 600; }
.v6-profile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.v6-profile img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; box-shadow: 0 0 0 2px var(--v6-lilac); }
.v6-profile b { display: block; font: 700 16px/1.2 var(--v6-display); }
.v6-profile span { font: 400 13px/1.3 var(--v6-body); color: var(--v6-text-3); }

/* ---------------------------------------------------------------- loader */
.v6-orb { position: relative; width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; }
.v6-orb::before { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 4px; background: conic-gradient(from var(--v6-spin), transparent 0 55%, var(--v6-lilac) 85%, #fff 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: v6-orbit 2.4s linear infinite; filter: drop-shadow(0 0 12px rgba(196, 181, 253, 0.8)); }
.v6-orb::after { content: ''; position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, 0.55), transparent 75%); z-index: -1; animation: v6-breathe 4s ease-in-out infinite; }
.v6-orb img { width: 172px; height: 172px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; filter: blur(14px) saturate(1.2); animation: v6-reveal 6s ease-out infinite; }
@keyframes v6-orbit { to { --v6-spin: 360deg; } }
@keyframes v6-reveal { 0% { filter: blur(18px) saturate(1.2); } 70%, 100% { filter: blur(4px) saturate(1.1); } }
.v6-steps { display: grid; gap: 8px; }
.v6-step { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px; border-radius: var(--v6-r-lg); border: 1px solid var(--v6-line); background: rgba(255, 255, 255, 0.03); font: 500 15px/1.2 var(--v6-body); color: var(--v6-text-3); transition: all var(--v6-t-state) var(--v6-ease); }
.v6-step i { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--v6-line-2); font-style: normal; }
.v6-step i .v6-ic { width: 14px; height: 14px; stroke-width: 3; display: none; }
.v6-step em { margin-left: auto; font: 500 13px var(--v6-body); font-style: normal; }
.v6-step.is-done { color: var(--v6-text); }
.v6-step.is-done i { background: var(--v6-violet); border-color: var(--v6-violet); color: #fff; }
.v6-step.is-done i .v6-ic { display: block; }
.v6-step.is-active { color: var(--v6-text); border-color: var(--v6-lilac); background: var(--v6-tint); box-shadow: 0 0 24px rgba(124, 58, 237, 0.3); }
.v6-step.is-active i { border: 2px dashed var(--v6-lilac); animation: v6-rot 2.4s linear infinite; }

/* ---------------------------------------------------------------- screen shell */
.v6-screen { position: relative; display: flex; flex-direction: column; min-height: 100%; max-width: 430px; margin: 0 auto; }
.v6-top { display: grid; grid-template-columns: var(--v6-tap) 1fr var(--v6-tap); align-items: center; gap: 12px; padding: 12px 16px 8px; }
.v6-logo { font: 700 22px/1 var(--v6-display); letter-spacing: -0.03em; text-align: center; }
.v6-top .v6-progress { grid-column: 1 / -1; }
.v6-body { display: flex; flex-direction: column; gap: 20px; flex: 1; padding: 12px 16px 8px; }
.v6-head { display: grid; gap: 8px; text-align: center; }
/* mobile: .v6-main dissolves so the order is head, her preview, controls, dock */
.v6-main { display: contents; }
.v6-head { order: -2; }
.v6-side { display: flex; flex-direction: column; gap: 12px; order: -1; }
/* the dock sits inside .v6-body's 16 px gutter, so no side padding of its own (CTA as wide as the content) */
.v6-dock { position: sticky; bottom: 0; z-index: 5; display: grid; gap: 12px; padding: 16px 0 20px; background: linear-gradient(to top, var(--v6-bg) 62%, transparent); }
/* floats are desktop-only; on desktop each card keeps its own display (flex benefit, grid example) */
@container v6 (max-width: 899.98px) {
  .v6-float { display: none; }
  .v6-stage__img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
  /* opt-in compact mobile shell (render returns compact: true): tighter top bar, head and dock,
     the preview takes only the height that is left, so picker steps fit iPhone SE */
  .v6-screen.is-compact .v6-top { padding: 6px 16px 2px; gap: 6px 12px; }
  .v6-screen.is-compact .v6-progress { gap: 6px; }
  .v6-screen.is-compact .v6-body { padding: 8px 16px 0; gap: 12px; }
  .v6-screen.is-compact .v6-h1 { font-size: 26px; line-height: 1.12; }
  .v6-screen.is-compact .v6-sub { font-size: 14px; line-height: 1.4; }
  .v6-screen.is-compact .v6-side { flex: 1 1 0; min-height: 112px; }
  .v6-screen.is-compact .v6-stage { height: 100%; }
  .v6-screen.is-compact .v6-dock { padding: 4px 0 10px; gap: 8px; }
  .v6-screen.is-compact .v6-cta { min-height: 56px; font-size: 17px; }
}

/* desktop: two columns, left 520 content, right live preview plus side cards */
@container v6 (min-width: 900px) {
  .v6-screen { max-width: none; }
  .v6-top { grid-template-columns: auto auto 1fr 420px; padding: 24px 48px 0; gap: 16px; }
  .v6-top .v6-progress { grid-column: auto; }
  .v6-logo { text-align: left; font-size: 26px; }
  .v6-body { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 72px; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 48px 48px; }
  .v6-head { text-align: left; gap: 12px; }
  .v6-main { display: flex; flex-direction: column; gap: 28px; grid-column: 1; grid-row: 1; }
  .v6-head { order: 0; }
  .v6-side { order: 0; grid-column: 2; grid-row: 1; position: relative; align-self: stretch; justify-content: center; }
  .v6-stage { height: min(560px, calc(var(--vh, 1vh) * 62)); min-height: 460px; }
  .v6-float { position: absolute; width: 250px; z-index: 2; animation: v6-float 7s ease-in-out infinite; }
  .v6-float.is-a { left: -8px; bottom: 56px; }
  .v6-float.is-b { right: 0; top: 40px; animation-delay: -3s; }
  .v6-dock { position: static; padding: 0; background: none; }
}
@keyframes v6-float { 50% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  .v6-app *, .v6-app *::before, .v6-app *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* wizard loops replacing option stills (core.js loopify): same box as the still */
video.v6-lp { display: block; width: 100%; height: 100%; object-fit: cover; }

.v6-logo img { display: block; height: 32px; width: auto; margin: 0 auto; }
@media (min-width: 0px) { .v6-logo { line-height: 0; } }

/* compact top bar (founder 2026-10-19): back, logo and step count share one row, the track is a thin line below */
.v6-top { grid-template-columns: 36px 1fr auto; gap: 0 10px; padding: 8px 16px 4px; }
.v6-back { width: 36px; height: 36px; }
.v6-logo img { height: 24px; }
.v6-stepno { min-width: 36px; text-align: right; font: 600 13px/1 var(--v6-body); color: var(--v6-text-2); font-variant-numeric: tabular-nums; }
.v6-stepno b { color: var(--v6-text); font-weight: 700; }
.v6-top .v6-progress { gap: 0; margin-top: 6px; }
.v6-top .v6-progress__meta { display: none; }
.v6-progress__track { height: 4px; }
.v6-progress__fill::after { width: 10px; height: 10px; margin-top: -5px; right: -4px; }
@container v6 (min-width: 900px) {
  .v6-top { grid-template-columns: auto auto 1fr 420px; padding: 20px 48px 0; gap: 16px; }
  .v6-stepno { display: none; }
  .v6-top .v6-progress { margin-top: 0; gap: 8px; }
  .v6-top .v6-progress__meta { display: flex; }
  .v6-logo img { height: 30px; }
}
.v6-top .v6-back { width: 36px; height: 36px; min-width: 36px; padding: 0; justify-self: start; border-radius: 50%; }
.v6-top .v6-back { min-height: 36px; max-height: 36px; width: 36px; aspect-ratio: 1; align-self: center; }

.v6-top .v6-back { position: relative; }
.v6-top .v6-back::after { content: ''; position: absolute; inset: -4px; }
.v6-label, .v6-field__main label { font-size: max(12px, 1em); }