/* Better Than Balance quiz. Style guide: /workspace/quiz/style-guide.md
   Quiet, old-money editorial: ivory/stone/charcoal, taupe CTA, thin gold rules,
   Playfair Display + one italic word, tracked Montserrat caps, square corners. */

@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-italic-var.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --ivory: #F6F5F0;
  --stone: #E8E6DD;
  --charcoal: #2E2E2C;
  --taupe: #9B8C85;
  --taupe-deep: #675D59;
  --taupe-light: #BCB3AF;
  --espresso: #342F2C;
  --gold: #9B8A5E;
  --btn-text: #F6F5F0;
  --serif: "Playfair Display", "Bodoni Moda", Didot, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --track: 0.22em;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ivory); color: var(--charcoal);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body[data-screen="cover"] { background: var(--espresso); }
body[data-screen="question"] { background: var(--stone); }
[hidden] { display: none !important; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 400; }
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

.screen {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: max(28px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom));
  animation: fade .35s ease-out both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

/* shared bits */
.eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--taupe-deep); margin: 0 0 18px;
}
.eyebrow--light { color: var(--taupe-light); text-align: center; line-height: 1.8; }
.rule { display: block; width: 44px; height: 1px; margin: 22px auto; }
.rule--gold { background: var(--gold); }
.smallprint { font-size: 12px; line-height: 1.6; color: #5E5A55; }
.smallprint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.smallprint a[aria-disabled="true"] { cursor: default; }
.smallprint--light { color: #C9C2BC; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 34px; border: 0; border-radius: 0;
  background: var(--taupe); color: var(--btn-text);
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: var(--track);
  text-transform: uppercase; text-decoration: none; text-align: center; line-height: 1.4;
  cursor: pointer; transition: background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { background: var(--taupe-deep); }
@media (hover: hover) { .btn:hover { background: var(--taupe-deep); } .answer:hover { border-color: var(--taupe); } }
.btn:disabled { opacity: .7; cursor: default; }
.btn--block { width: 100%; }

.footer {
  margin-top: auto; padding-top: 40px; text-align: center;
  font-size: 11px; line-height: 1.7; color: #6E6A64;
}
.footer p:first-child { font-family: var(--sans); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; font-size: 10.5px; margin-bottom: 2px; }
.footer--light { color: #B7AFA8; }
.footer p:last-child { font-size: 12px; line-height: 1.5; color: #5E5A55; }
.footer--light p:last-child { color: #C9C2BC; }
.footer--oneline p:first-child { font-weight: 400; letter-spacing: 0.04em; text-transform: none; font-size: 11px; }
.footer a { color: inherit; }

/* 1. cover: espresso with a quiet vertical pinstripe (after the BtB cover) */
.screen--cover {
  color: var(--ivory); text-align: center;
  background-color: var(--espresso);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 3px, rgba(0,0,0,0) 3px 19px);
}
.cover__inner { margin: auto 0; padding-top: 8vh; display: flex; flex-direction: column; align-items: center; max-width: 560px; align-self: center; width: 100%; }
.cover__title { font-family: var(--serif); line-height: .86; display: flex; flex-direction: column; align-items: center; letter-spacing: -0.01em; }
.cover__caps { text-transform: uppercase; font-size: clamp(56px, 18.5vw, 118px); }
.cover__italic { font-style: italic; font-size: clamp(50px, 16vw, 104px); line-height: .7; margin: -0.02em 0 0.04em; color: #EDE8E0; }
.cover__subhead {
  margin-top: 26px; font-weight: 500; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ivory);
}
.cover__intro { font-family: var(--serif); font-size: 18px; line-height: 1.6; max-width: 30em; margin: 0 auto 32px; color: #ECE8E1; }
.screen--cover .btn { min-width: 200px; }
.screen--cover .smallprint { margin-top: 22px; max-width: 34em; }

/* 2. question: ivory card on stone (after BtB slide 10) */
.screen--question { justify-content: center; padding-left: 14px; padding-right: 14px; }
.card {
  position: relative; width: 100%; max-width: 660px; margin: 0 auto;
  background: var(--ivory); border: 1px solid #D9D5CB;
  padding: 36px 22px 26px;
}
.progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--taupe-light); }
.progress__fill { display: block; height: 100%; width: 0; background: var(--taupe-deep); transition: width .3s ease; }
.screen--question .eyebrow { text-align: center; }
.question { font-family: var(--serif); font-size: 28px; line-height: 1.22; text-align: center; letter-spacing: -0.005em; }
.screen--question .rule { margin: 22px auto 24px; }
.answers { display: flex; flex-direction: column; gap: 10px; }
.answer {
  display: block; width: 100%; text-align: left;
  min-height: 56px; padding: 16px 18px; border-radius: 0;
  background: #FFFFFF; border: 1px solid var(--taupe-light); color: var(--charcoal);
  font-family: var(--sans); font-size: 15.5px; line-height: 1.45; font-weight: 400;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.answer[aria-pressed="true"] { border-color: var(--taupe-deep); background: #EFEAE5; box-shadow: inset 3px 0 0 var(--taupe-deep); }

/* 3. lead form */
.lead__inner, .result__inner { width: 100%; max-width: 480px; margin: 0 auto; padding-top: 4vh; }
.lead__headline { font-family: var(--serif); font-size: 36px; line-height: 1.15; text-align: center; }
.lead__line { font-family: var(--serif); font-size: 18px; line-height: 1.55; text-align: center; margin-bottom: 28px; }
.field { display: block; margin-bottom: 16px; }
.field__label { display: block; font-weight: 500; font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; margin-bottom: 7px; color: var(--taupe-deep); }
.field input {
  display: block; width: 100%; height: 50px; padding: 0 14px; border-radius: 0; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--taupe-light); background: #FFFFFF; color: var(--charcoal);
  font-family: var(--sans); font-size: 16px;
}
.field input:focus { border-color: var(--taupe-deep); outline: none; }
.consent { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 18px; cursor: pointer; font-size: 14px; line-height: 1.5; }
.consent input { position: absolute; z-index: 1; opacity: 0; width: 22px; height: 22px; margin: 0; top: 0; left: 0; cursor: pointer; }
.consent__box { flex: 0 0 22px; height: 22px; border: 1px solid var(--charcoal); background: #FFFFFF; position: relative; margin-top: 0; }
.consent input:checked + .consent__box { background: var(--taupe-deep); border-color: var(--taupe-deep); }
.consent input:checked + .consent__box::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--ivory); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.consent input:focus-visible + .consent__box { outline: 1px solid var(--gold); outline-offset: 3px; }
.consent__error { margin: -8px 0 16px 34px; color: var(--charcoal); font-size: 13px; line-height: 1.45; }
.turnstile:not(:empty) { margin: 0 0 16px; min-height: 0; }
.skip {
  display: block; width: 100%; min-height: 48px; margin: 8px 0 18px; padding: 10px;
  background: transparent; border: 0; color: var(--charcoal); cursor: pointer;
  font-family: var(--sans); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.skip:disabled { opacity: .5; }
.screen--lead .smallprint { text-align: center; }

/* 4. result */
.result__inner { text-align: center; }
.result__intro { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.6; color: #5E5A55; max-width: 26em; margin: 0 auto 26px; }
.result__name { font-family: var(--serif); font-size: clamp(48px, 14vw, 72px); line-height: 1; letter-spacing: -0.01em; }
.result__tagline { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; margin-top: 14px; }
.result__body { font-size: 16px; line-height: 1.75; text-align: left; margin-bottom: 26px; }
.result__confirm { font-family: var(--serif); font-style: italic; font-size: 17px; margin: 0 0 26px; padding: 14px 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.screen--result .btn { width: 100%; }
.btn[aria-disabled="true"] { cursor: default; }

/* larger screens */
@media (min-width: 720px) {
  .screen { padding: 48px 40px 28px; }
  .card { padding: 60px 64px 48px; }
  .question { font-size: 34px; }
  .answer { font-size: 16px; padding: 18px 22px; }
  .lead__headline { font-size: 44px; }
  .result__name { font-size: 76px; }
  .screen--result .btn { width: auto; }
  .cover__intro { font-size: 19px; }
}