/* ============================================================================
   DVOIDER — Market-test landing page styles
   Standalone design system. Brand tokens mirror the main app (purple primary,
   orange accent, Plus Jakarta Sans) but are declared locally so this page has
   zero dependency on web/styles.css.
   ========================================================================== */

/* ───────── Tokens ───────── */
:root {
  --purple: #4F2DD8;
  --purple-deep: #3A1FB0;
  --purple-soft: #EEEAFF;
  --purple-tint: #F4F1FF;
  --orange: #F26B3A;
  --orange-soft: #FFE9DF;

  --text: #16151C;
  --muted: #62616C;
  --faint: #8C8B96;

  --bg: #FFFFFF;
  --surface: #F7F6FB;
  --surface-2: #FBFAFE;
  --border: #E8E6F0;
  --ink: #100D1C; /* deep near-black with a purple cast, for dark sections */

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 14px -8px rgba(28, 18, 64, 0.28);
  --shadow-card: 0 18px 44px -24px rgba(28, 18, 64, 0.34);
  --shadow-pop: 0 30px 70px -30px rgba(28, 18, 64, 0.40);
  --shadow-cta: 0 14px 30px -12px rgba(79, 45, 216, 0.55);

  --container: 1120px;
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ───────── Base ───────── */
* { box-sizing: border-box; }
/* Keep the `hidden` attribute authoritative — otherwise display:inline-flex on
   .btn (and others) would override it and reveal hidden form-nav buttons. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  overflow-x: hidden; /* safety net against any incidental horizontal overflow */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.container--narrow { max-width: 720px; }

.skip-link {
  position: absolute; left: 16px; top: -60px;
  background: var(--purple); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-sm); z-index: 200; transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ───────── Logo mark ───────── */
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.logo-mark svg { width: 22px; height: 22px; display: block; }
.logo-mark--sm { width: 28px; height: 28px; border-radius: 8px; }
.logo-mark--sm svg { width: 18px; height: 18px; }

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 12px 22px; cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 18px; height: 18px; }
.btn--primary { background: var(--purple); color: #fff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--purple-deep); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--surface); border-color: #d9d6e6; }
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--lg { padding: 15px 28px; font-size: 16px; }

/* Button loading spinner (used on submit) */
.btn__spinner {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.btn.is-loading { pointer-events: none; opacity: 0.85; }
.btn.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────── Nav ───────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__word { font-weight: 800; font-size: 19px; letter-spacing: 0.04em; color: var(--text); }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--muted); transition: color 0.2s; }
.nav__links a:hover { color: var(--text); }
.nav__links .btn { color: #fff; }

/* ───────── Hero ───────── */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); }
.hero__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 460px at 12% -5%, rgba(79, 45, 216, 0.14) 0%, transparent 62%),
    radial-gradient(720px 420px at 100% 8%, rgba(242, 107, 58, 0.10) 0%, transparent 60%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* min-width:0 lets the grid tracks shrink to the container instead of expanding
   to the hero visual card's content width (the classic grid overflow trap). */
.hero__copy, .hero__visual { min-width: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--purple-soft); color: var(--purple-deep);
  font-weight: 700; font-size: 13px; letter-spacing: 0.01em;
  padding: 7px 14px; border-radius: var(--radius-pill); margin-bottom: 22px;
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.hero__title { font-size: clamp(34px, 5.2vw, 58px); font-weight: 800; max-width: 16ch; }
.hero__sub { margin-top: 20px; font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__note { margin-top: 16px; font-size: 14px; color: var(--faint); }

/* Hero visual — aspirational preview card (no process detail) */
.hero__visual { position: relative; }
.preview-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 30px 28px; box-shadow: var(--shadow-pop);
  position: relative; overflow: hidden;
}
.preview-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(79,45,216,0.5), rgba(242,107,58,0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.preview-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.badge-beta { background: var(--purple-soft); color: var(--purple-deep); font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: var(--radius-pill); }
.preview-card__title { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; }
.preview-card__sub { margin-top: 12px; color: var(--muted); font-size: 15px; }
.preview-card__people { display: flex; align-items: center; margin-top: 26px; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff; margin-left: -12px; box-shadow: var(--shadow-sm);
}
.avatar:first-child { margin-left: 0; }
.avatar--1 { background: linear-gradient(135deg, #4F2DD8, #3A1FB0); }
.avatar--2 { background: linear-gradient(135deg, #F26B3A, #e0561f); }
.avatar--3 { background: linear-gradient(135deg, #7C5CFF, #4F2DD8); }
.avatar--more { background: var(--surface); color: var(--muted); }
.preview-card__people-label { margin-left: 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.preview-card__match {
  display: inline-flex; align-items: center; margin-top: 24px;
  background: var(--purple-tint); color: var(--purple-deep);
  font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: var(--radius-pill);
}

/* ───────── Trust strip ───────── */
.strip { border-block: 1px solid var(--border); background: var(--surface-2); }
.strip__inner { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 56px); padding: 22px 24px; flex-wrap: wrap; }
.strip__item { text-align: center; }
.strip__item strong { display: block; font-size: 16px; color: var(--text); }
.strip__item span { font-size: 13.5px; color: var(--muted); }
.strip__divider { width: 1px; height: 34px; background: var(--border); }

/* ───────── Sections ───────── */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section--tint { background: var(--purple-tint); }
.section--form { background:
  radial-gradient(700px 380px at 50% 0%, rgba(79,45,216,0.07) 0%, transparent 60%), var(--bg); }
.section__head { text-align: center; max-width: 680px; margin: 0 auto clamp(38px, 5vw, 60px); }
.kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--purple); margin-bottom: 14px; }
.section__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; }
.section__lead { margin-top: 14px; font-size: 17px; color: var(--muted); }

/* ───────── Steps ───────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 22px; box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--purple-soft); color: var(--purple-deep);
  font-weight: 800; font-size: 18px; margin-bottom: 18px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--muted); }

/* ───────── Who it's for ───────── */
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.who-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 24px; box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.who-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.who-card__icon { font-size: 26px; display: block; margin-bottom: 14px; }
.who-card h3 { font-size: 18px; margin-bottom: 8px; }
.who-card p { font-size: 14.5px; color: var(--muted); }
.who-card--cta { background: linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%); color: #fff; border-color: transparent; display: flex; flex-direction: column; }
.who-card--cta h3 { color: #fff; }
.who-card--cta p { color: rgba(255,255,255,0.85); }
.link-arrow { margin-top: auto; padding-top: 14px; font-weight: 700; color: #fff; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* ───────── Form card ───────── */
.form-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop); padding: clamp(24px, 4vw, 40px);
}
.form-progress { margin-bottom: 28px; }
.form-progress__bar { height: 6px; background: var(--surface); border-radius: var(--radius-pill); overflow: hidden; }
.form-progress__bar span { display: block; height: 100%; width: 33%; background: linear-gradient(90deg, var(--purple), var(--purple-deep)); border-radius: inherit; transition: width 0.35s ease; }
.form-progress__steps { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.form-progress__steps .is-current { color: var(--purple); }

.form-step { display: none; border: 0; margin: 0; padding: 0; }
.form-step.is-active { display: block; animation: fadeStep 0.3s ease; }
@keyframes fadeStep { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 8px; }
.field .hint { font-weight: 500; color: var(--faint); font-size: 13px; }
.req { color: var(--orange); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); padding: 13px 14px; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--purple); background: #fff;
  box-shadow: 0 0 0 4px rgba(79, 45, 216, 0.12);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2362616C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field.has-error input, .field.has-error select { border-color: var(--orange); }
.field__error { display: none; color: var(--orange); font-size: 13px; font-weight: 600; margin-top: 6px; }
.field.has-error .field__error { display: block; }

/* Chips (multi-select) */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1.5px solid var(--border); color: var(--muted);
  cursor: pointer; user-select: none; transition: all 0.15s ease;
}
.chip:hover { border-color: #d3cfe6; color: var(--text); }
.chip.is-selected { background: var(--purple-soft); border-color: var(--purple); color: var(--purple-deep); }

/* Radio row (single-select pills) */
.radio-row { display: flex; flex-wrap: wrap; gap: 9px; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill label {
  display: inline-block; margin: 0; font-weight: 600; font-size: 14px;
  padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1.5px solid var(--border); color: var(--muted); cursor: pointer; transition: all 0.15s ease;
}
.radio-pill input:checked + label { background: var(--purple); border-color: var(--purple); color: #fff; }
.radio-pill input:focus-visible + label { box-shadow: 0 0 0 4px rgba(79,45,216,0.18); }

.form-fineprint { font-size: 13px; color: var(--faint); margin-top: 4px; }

.form-banner { background: var(--orange-soft); color: #b8431b; border-radius: var(--radius-md); padding: 12px 16px; font-size: 14px; font-weight: 600; margin-top: 4px; }

.form-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.form-nav .btn { flex: 0 0 auto; }
.form-nav [data-form="next"], .form-nav [data-form="submit"] { margin-left: auto; }

/* Success state */
.form-success { text-align: center; padding: 12px 4px; animation: fadeStep 0.4s ease; }
.form-success__badge {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  box-shadow: 0 14px 30px -12px rgba(16,185,129,0.6);
}
.form-success h3 { font-size: 24px; margin-bottom: 10px; }
.form-success > p { color: var(--muted); max-width: 44ch; margin: 0 auto; }
.share { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.share__label { font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.share__row { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.share__row input {
  flex: 1; font-family: inherit; font-size: 14px; background: var(--surface-2);
  border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 11px 14px; color: var(--muted);
}
.share__note { margin-top: 12px; font-size: 13px; color: var(--faint); }

/* ───────── FAQ ───────── */
.faq { display: grid; gap: 12px; }
.faq details {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 4px 20px; box-shadow: var(--shadow-sm);
}
.faq summary { cursor: pointer; font-weight: 700; font-size: 16px; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--purple); font-size: 22px; font-weight: 400; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); font-size: 15px; padding-bottom: 18px; margin: 0; }

/* ───────── Footer ───────── */
.footer { background: var(--ink); color: #fff; padding: 56px 0 40px; }
.footer__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.brand--footer .brand__word { color: #fff; }
.footer__tag { color: rgba(255,255,255,0.72); font-size: 15px; max-width: 40ch; }
.footer__legal { color: rgba(255,255,255,0.45); font-size: 13px; }

/* ───────── Responsive ───────── */
@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; width: 100%; max-width: 420px; margin-inline: auto; }
  .hero__title { max-width: 20ch; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .who-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .container { padding-inline: 18px; }
  .nav__links a:not(.btn) { display: none; } /* keep the CTA, hide text links on small screens */
  .strip__divider { display: none; }
  .strip__inner { gap: 18px; }
  .steps { grid-template-columns: 1fr; }
  .who-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .form-nav { flex-direction: row; }
  .hero__actions .btn { flex: 1 1 auto; }
  .preview-card { padding: 24px 22px; }
  .preview-card__title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .form-step.is-active, .form-success { animation: none; }
  .step:hover, .who-card:hover { transform: none; }
}