/* =========================================================================
   Regalis Capital - On-Market vs Off-Market Quiz
   Every value below comes from working/BRAND-TOKENS.md and the approved
   artboards in working/design/*.dc.html. Tokens are declared once on :root
   and nothing below uses a raw hex that is not a token.
   ========================================================================= */

:root {
  --navy:      #001E3D;   /* buttons, progress fill, focus ring, check icons */
  --gold:      #F2B90D;   /* accent, defined, used sparingly */
  --ink:       #0F172A;   /* headings and option text */
  --slate:     #475569;   /* sub-lines, lane text, progress meta */
  --muted:     #64748B;   /* fine print, ghost link */
  --line:      #E2E8F0;   /* card and input borders */
  --track:     #F6F7F9;   /* progress track */
  --card-bg:   #FFFFFF;
  --btn-text:  #F8FAFC;
  --sel-bg:    #F8FAFC;   /* selected option background */
  --note-bg:   #FFF8E1;   /* amber note */
  --note-line: #F5D77A;
  --note-head: #7A5200;
  --note-text: #5C3D00;
  --lane-bg:   #F1F5F9;   /* the emphasised lane */
  --lane-line: #CBD5E1;
  --radio-line:#CBD5E1;   /* unselected radio ring */
  --placeholder:#64748B;   /* darkened from #94A3B8, which measured 2.56:1 on white */
  --error:     #B91C1C;
  --radius-sm: 6px;       /* buttons and inputs */
  --radius-md: 8px;       /* cards and lanes */
  --card-max:  672px;
}

/* -------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #F4F7FB 55%, #EEF3F9 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }
a:hover { color: #0A3A6B; }

/* -------------------------------------------------------------------------
   PAGE AND SCREENS
   ------------------------------------------------------------------------- */
.page {
  min-height: 100%;
  padding: 40px 24px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.logo { width: 199px; height: auto; display: block; }

.screen { display: none; width: 100%; flex-direction: column; align-items: center; gap: 24px; }
.screen.is-active { display: flex; }

.title {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin: 0;
  max-width: 640px;
  text-wrap: pretty;
}
.title:focus { outline: none; }

.sub {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--slate);
  text-align: center;
  margin: 0;
  max-width: 560px;
  text-wrap: pretty;
}

/* The one muted line that sits OUTSIDE the white card, on the page wash,
   where --muted (#64748B) measured 4.27:1. This darker slate measures 4.88:1
   on the #EEF3F9 end of the wash, so it clears the 4.5:1 AA minimum. */
.foot { font-size: 14px; line-height: 20px; color: #5B6B7F; text-align: center; margin: 0; }

/* -------------------------------------------------------------------------
   PROGRESS
   ------------------------------------------------------------------------- */
.progress-wrap { width: 100%; max-width: var(--card-max); display: flex; flex-direction: column; gap: 8px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.meta { font-size: 14px; line-height: 20px; color: var(--slate); }

.track { width: 100%; height: 16px; background: var(--track); border-radius: 9999px; overflow: hidden; }

.fill { height: 100%; background: var(--navy); transition: width 0.25s ease; }

/* -------------------------------------------------------------------------
   CARD
   ------------------------------------------------------------------------- */
.card {
  width: 100%;
  max-width: var(--card-max);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-result { gap: 22px; }

/* -------------------------------------------------------------------------
   QUESTION CARD
   ------------------------------------------------------------------------- */
.qhead { display: flex; flex-direction: column; gap: 6px; }

.qtitle { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); margin: 0; text-wrap: pretty; }

.qhelp { font-size: 15px; line-height: 22px; color: var(--slate); margin: 0; }

.options { display: flex; flex-direction: column; gap: 10px; }

.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.opt:hover { border-color: var(--lane-line); }

.opt.is-selected {
  border: 2px solid var(--navy);
  padding: 11px 15px;   /* 1px less on each side, so nothing shifts */
  background: var(--sel-bg);
  font-weight: 500;
}

.radio { width: 18px; height: 18px; border-radius: 9999px; border: 2px solid var(--radio-line); flex-shrink: 0; }
.opt.is-selected .radio { border: 6px solid var(--navy); }

/* -------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary { background: var(--navy); color: var(--btn-text); border: 1px solid var(--navy); }
.btn-secondary { background: var(--card-bg); color: var(--navy); border: 1px solid var(--line); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid transparent; font-weight: 400; }

.btn-lg { height: 48px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-cta { height: 48px; padding: 0 28px; font-size: 16px; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nav-row .nav-spacer { display: block; }

/* -------------------------------------------------------------------------
   FORM
   ------------------------------------------------------------------------- */
#gate-form { display: flex; flex-direction: column; gap: 20px; }

.field { display: flex; flex-direction: column; gap: 6px; }

/* Honeypot: off screen for people, still a real focusable input for a bot. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.gate-nav { display: flex; margin-top: 20px; }

.label { font-size: 14px; font-weight: 500; color: var(--ink); }

.input {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--card-bg);
  width: 100%;
}
.input::placeholder { color: var(--placeholder); }

.help { font-size: 13px; line-height: 18px; color: var(--muted); }

.field-error { font-size: 13px; line-height: 18px; color: var(--error); margin: 0; }

.reassure { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); }

/* -------------------------------------------------------------------------
   RESULT
   ------------------------------------------------------------------------- */
.result-head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-navy { background: var(--navy); color: #FFFFFF; }

.verdict { font-size: 28px; line-height: 34px; font-weight: 700; color: var(--ink); margin: 0; text-wrap: pretty; }
.verdict:focus { outline: none; }

.lede { font-size: 16px; line-height: 24px; color: var(--slate); margin: 0; text-wrap: pretty; }

.sect { display: flex; flex-direction: column; gap: 12px; }

.h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; }

.why { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

.why-item { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 22px; color: var(--ink); }
.why-item .ico { flex-shrink: 0; margin-top: 2px; }

.hr { height: 1px; background: var(--line); width: 100%; }

.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.lane {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card-bg);
}
.lane-navy { background: var(--lane-bg); border-color: var(--lane-line); }

.lane-title { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.lane-text { font-size: 14px; line-height: 21px; color: var(--slate); margin: 0; }
.lane-close { margin-top: 4px; }

.note {
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.note-title { font-size: 14px; font-weight: 600; color: var(--note-head); margin: 0; }
.note-text { font-size: 14px; line-height: 21px; color: var(--note-text); margin: 0; }

.cta { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 4px; }

/* The result CTA carries both labels. CSS, not JavaScript, decides which one
   shows, so a phone rotating keeps the label correct. */
.cta-short { display: none; }

/* -------------------------------------------------------------------------
   FOCUS
   ------------------------------------------------------------------------- */
.btn:focus-visible,
.opt:focus-visible,
.input:focus-visible,
.input:focus,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--navy);
}

/* -------------------------------------------------------------------------
   MOBILE, 640px and below. Every mobile change lives in this one query.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .page { padding: 20px 16px 40px; }
  .logo { width: 150px; }
  .title { font-size: 26px; line-height: 32px; }
  .card { padding: 20px; }
  .qtitle { font-size: 20px; line-height: 28px; }
  .verdict { font-size: 24px; line-height: 30px; }
  .lanes { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .btn-cta { width: 100%; padding: 0 16px; white-space: normal; }
}

/* -------------------------------------------------------------------------
   MOTION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fill { transition: none; }
  * { scroll-behavior: auto; }
}