/* ============================================================
   Cognitive Fit Assessment — quiz flow
   Design target 390 × 844. Above 500px the flow centres in a
   max-width column; no phone chrome in product.
   Tokens are the handoff's Design Tokens table verbatim.
   ============================================================ */

:root {
  --ink:          #1C1A17;
  --ink-deep:     #221F1B;
  --ink-line:     #332F2A;
  --paper:        #FAF8F4;
  --paper-raised: #FFFDFA;
  --rule:         #E2DCD2;
  --rule-soft:    #E8E2D8;
  --rule-softer:  #EDE7DD;
  --accent:       #C1552F;
  --accent-deep:  #9C3F22;
  --accent-light: #E08A62;
  --accent-tint:  #FBF1EC;
  --body:         #3A352E;
  --muted:        #5C564D;
  --muted-2:      #7A736A;
  --faint:        #8A8175;
  --faint-2:      #9A9287;
  --faintest:     #B5AC9E;
  --faintest-2:   #CFC7BA;
  --on-dark:      #F3EFE8;
  --on-dark-2:    #B8B1A5;
  --on-dark-3:    #7C746A;

  --serif: 'Newsreader', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --pad: 24px;
  --shadow-cta:   0 10px 24px -10px rgba(193, 85, 47, .70);
  --shadow-thumb: 0  6px 18px  -6px rgba(224, 138, 98, .90);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible { outline-color: var(--accent-light); }

/* ---------- app shell ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.screen.dark { background: var(--ink); color: var(--on-dark); }

/* admin log is a desk view, not a phone view */
.screen--wide { max-width: 1100px; }
body:has(.screen.dark) { background: var(--ink); }

/* ---------- brand strip ---------- */
.brandbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--rule-softer);
}
.brandbar__name { font-family: var(--serif); font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.dark .brandbar { border-bottom-color: var(--ink-line); }

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.dark .eyebrow { color: var(--accent-light); }

.metaline { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .04em; }
.dark .metaline { color: var(--on-dark-3); }

.body-copy { font-size: 16px; line-height: 1.6; color: var(--muted); }
.dark .body-copy { color: var(--on-dark-2); }

.pad { padding-inline: var(--pad); }

/* ---------- buttons ---------- */
.cta {
  display: block;
  width: 100%;
  border: 0;
  cursor: pointer;
  background: var(--accent);
  color: #FFF;
  font-size: 17px;
  font-weight: 600;
  padding: 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-cta);
  transition: background-color .15s ease, opacity .15s ease;
  min-height: 44px;
}
.cta:hover:not(:disabled) { background: var(--accent-deep); }
.cta:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }

.linkbtn {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--faint);
  padding: 10px 2px;
  min-height: 44px;
}
.linkbtn:hover { color: var(--ink); }
.dark .linkbtn { color: var(--on-dark-3); }
.dark .linkbtn:hover { color: var(--on-dark); }

.footer-cta { margin-top: auto; padding: 16px var(--pad) 34px; }

/* ============================================================
   1 · Start
   ============================================================ */
.start { padding: 34px var(--pad) 0; display: flex; flex-direction: column; gap: 20px; }
.start h1 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.9rem + 1.6vw, 2.625rem);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.spec-table { border-top: 1px solid var(--rule-soft); margin-top: 4px; }
.spec-table div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 15px;
}
.spec-table dt { color: var(--muted); }
.spec-table dd { font-weight: 600; }

/* ============================================================
   2 / 3 · Question
   ============================================================ */
.q { padding: 18px var(--pad) 0; display: flex; flex-direction: column; gap: 18px; flex: 1; }

.q__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.dark .q__head { color: var(--faint-2); }
.dark .q__head .q__axis { color: var(--accent-light); }

.progress { height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.dark .progress { background: var(--ink-line); height: 3px; }
.progress__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .3s ease-out;
}
.dark .progress__fill { background: var(--accent-light); }

.q__text {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 1.45rem + .8vw, 1.9375rem);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

/* choice options */
.options { display: flex; flex-direction: column; gap: 11px; }
.option {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--paper-raised);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: 17px 18px;
  min-height: 44px;
  transition: border-color .12s ease, background-color .12s ease;
}
.option:hover { border-color: var(--faintest-2); }
.option__radio {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--faintest-2);
  background: #FFF;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.option__label { font-size: 15px; line-height: 1.5; color: var(--body); }

.option[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.option[aria-checked="true"] .option__radio { border-color: var(--accent); }
.option[aria-checked="true"] .option__radio::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}
.option[aria-checked="true"] .option__label { color: var(--ink); font-weight: 500; }

/* 7-point scale (dark) */
.scale { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
/* Light is the default. The .dark overrides below keep the dark
   variant intact for DARK_SCALE_SCREENS = true in app.js. */
.scale__anchors {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.scale__anchors span:last-child { text-align: right; }

.scale__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  margin: 6px 0;
}
.scale__input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--rule) var(--fill, 50%));
}
.scale__input::-moz-range-track { height: 3px; border-radius: 2px; background: var(--rule); }
.scale__input::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--accent); }
.scale__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 38px;
  height: 38px;
  margin-top: -17.5px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--paper);
  box-shadow: var(--shadow-cta);
  cursor: grab;
}
.scale__input::-moz-range-thumb {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--paper);
  box-shadow: var(--shadow-cta); cursor: grab;
}
.scale__input:active::-webkit-slider-thumb { cursor: grabbing; }

.scale__nums {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
}
.scale__nums b { color: var(--accent); font-weight: 500; }

.infocard {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 4px;
}

/* dark variant */
.dark .scale__anchors { color: var(--faint-2); }
.dark .scale__input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--accent-light) var(--fill, 50%), var(--ink-line) var(--fill, 50%));
}
.dark .scale__input::-moz-range-track { background: var(--ink-line); }
.dark .scale__input::-moz-range-progress { background: var(--accent-light); }
.dark .scale__input::-webkit-slider-thumb {
  background: var(--accent-light); border-color: var(--ink); box-shadow: var(--shadow-thumb);
}
.dark .scale__input::-moz-range-thumb {
  background: var(--accent-light); border-color: var(--ink); box-shadow: var(--shadow-thumb);
}
.dark .scale__nums { color: var(--on-dark-3); }
.dark .scale__nums b { color: var(--accent-light); }
.dark .infocard {
  background: var(--ink-deep);
  border-color: var(--ink-line);
  color: var(--on-dark-2);
}

.q__foot { margin-top: auto; padding: 16px 0 34px; display: flex; flex-direction: column; gap: 6px; }
.q__nav { display: flex; justify-content: space-between; align-items: center; }
.q__left { font-size: 13px; color: var(--faint); }
.dark .q__left { color: var(--on-dark-3); }

/* ============================================================
   4 · Scoring interstitial
   ============================================================ */
.scoring { padding: 56px var(--pad) 0; display: flex; flex-direction: column; gap: 22px; flex: 1; }
.scoring h2 {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.08;
}
.steps { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.step { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.step__icon { width: 16px; flex: none; font-family: var(--mono); }
.step[data-state="done"]    { color: var(--body); }
.step[data-state="done"] .step__icon    { color: var(--accent); }
.step[data-state="active"]  { color: var(--ink); font-weight: 500; }
.step[data-state="active"] .step__icon  { color: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.step[data-state="pending"] { color: var(--faintest); }

@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.scoring__foot {
  margin-top: auto;
  padding: 18px 0 40px;
  border-top: 1px solid var(--rule-soft);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ============================================================
   5 · Result + paywall
   ============================================================ */
.result { flex: 1; display: flex; flex-direction: column; }

.result__head { background: var(--ink); color: var(--on-dark); padding: 24px var(--pad) 20px; }
.result__label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint-2); }
.result__type {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.025em;
  margin-top: 8px;
}
.result__line { font-size: 14px; line-height: 1.55; color: var(--on-dark-2); margin-top: 12px; }
.result__stats {
  display: flex;
  gap: 26px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-line);
}
.result__stats b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1; }
.result__stats span { display: block; font-size: 12px; color: var(--faint-2); margin-top: 4px; }
.result__stats .accent b { color: var(--accent-light); }

.specgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.specgrid div { background: var(--paper-raised); padding: 14px 12px; }
.specgrid dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.specgrid dd { font-family: var(--serif); font-size: 20px; margin-top: 3px; line-height: 1.1; }
.specgrid .accent dd { color: var(--accent); }

.reveal { padding: 18px var(--pad) 0; }
.reveal__label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

.locked { position: relative; padding: 14px var(--pad) 0; }
.locked__inner {
  filter: blur(4px);
  opacity: .7;
  user-select: none;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.locked__inner p { font-size: 14px; line-height: 1.55; color: var(--body); }
.locked__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(250, 248, 244, 0), var(--paper) 70%);
  pointer-events: none;
}

.paybar {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--rule-softer);
  padding: 16px var(--pad) 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.paybar__value { font-size: 14px; line-height: 1.5; color: var(--muted); }
.paybar__value b { color: var(--ink); font-weight: 600; }
.paybar__meta { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: center; }

/* ============================================================
   6 · Checkout
   ============================================================ */
.checkout { flex: 1; display: flex; flex-direction: column; }
.checkout__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--rule-softer);
}
.checkout__secure { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--faint); }
.checkout__body { padding: 20px var(--pad) 0; display: flex; flex-direction: column; gap: 18px; flex: 1; }

.lineitem {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-soft);
}
.lineitem__name { font-family: var(--serif); font-size: 20px; }
.lineitem__sub { font-size: 13px; color: var(--muted-2); margin-top: 2px; }
.lineitem__price { font-family: var(--serif); font-size: 22px; }

/* order bump — dashed on purpose: it must read as an insert */
.bump {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 2px dashed var(--accent);
  background: var(--accent-tint);
  border-radius: 12px;
  padding: 15px 16px;
  cursor: pointer;
}
.bump__box {
  width: 22px; height: 22px; flex: none;
  border-radius: 5px;
  border: 1.5px solid var(--accent);
  background: #FFF;
  display: grid; place-items: center;
  margin-top: 1px;
  color: #FFF;
  font-size: 13px;
  line-height: 1;
}
.bump input { position: absolute; opacity: 0; width: 0; height: 0; }
.bump input:checked + .bump__box { background: var(--accent); }
.bump input:focus-visible + .bump__box { outline: 2px solid var(--accent); outline-offset: 3px; }
.bump__head { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.bump__head b { color: var(--accent); }
.bump__why { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 4px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.field input {
  font: inherit;
  font-size: 15px;
  padding: 14px 15px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-raised);
  color: var(--ink);
  width: 100%;
}
.field input::placeholder { color: var(--faintest); }
.field input:focus { outline: none; border-color: var(--accent); }
.field[data-invalid] input { border-color: var(--accent-deep); }
.field__err { font-size: 13px; color: var(--accent-deep); }
.row { display: flex; gap: 9px; }
.row .field { flex: 1; }

.testnotice {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted-2);
  background: var(--paper-raised);
  border: 1px dashed var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
}

.total {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.total span { font-size: 15px; color: var(--muted); }
.total b { font-family: var(--serif); font-size: 30px; font-weight: 400; }

.refundline { font-size: 12px; color: var(--muted-2); text-align: center; margin-top: 10px; }

/* ============================================================
   7 · Upsell (dark)
   ============================================================ */
.upsell { flex: 1; display: flex; flex-direction: column; padding: 20px var(--pad) 0; gap: 16px; }
.paidstrip {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-line);
  font-size: 14px;
  color: var(--on-dark-2);
}
.paidstrip b { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--accent-light); font-weight: 500; }
.upsell h2 { font-family: var(--serif); font-size: 36px; font-weight: 400; letter-spacing: -.025em; line-height: 1.08; }
.benefits { display: flex; flex-direction: column; gap: 10px; }
.benefits li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--on-dark-2); }
.benefits li::before { content: "—"; color: var(--accent-light); flex: none; }

.pricecard {
  background: var(--ink-deep);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.pricecard__label { font-size: 14px; }
.pricecard__sub { font-size: 13px; color: var(--on-dark-3); margin-top: 2px; }
.pricecard__was { font-size: 15px; color: var(--on-dark-3); text-decoration: line-through; }
.pricecard__now { font-family: var(--serif); font-size: 34px; line-height: 1; }

.decline { display: block; margin: 0 auto; text-decoration: underline; }

/* ============================================================
   Done + log
   ============================================================ */
.done { padding: 56px var(--pad); display: flex; flex-direction: column; gap: 16px; flex: 1; }
.done h2 { font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }

.log { padding: 24px var(--pad); font-family: var(--mono); font-size: 12px; }
.log h2 { font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 14px; }
.log__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.log table { width: 100%; min-width: 560px; border-collapse: collapse; }
.log td { white-space: nowrap; }
.log th, .log td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.log th { color: var(--faint); font-weight: 500; }
.log__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.log__actions button { border: 1.5px solid var(--ink); background: none; padding: 10px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}