/* ==========================================================================
   pages.css — layout for the two flat pages: /results/ and /book/.
   Loaded AFTER site.css. Uses site.css tokens only. Zero hardcoded colours.
   Design brief: one idea per screen, huge type, few words, FULL WIDTH.
   ========================================================================== */

/* ------------------------------------------------------------- shell ---- */
/* site.css nav is position:fixed, so the flat pages own their top offset. */
html, body { height: auto; }
body.flatpage { overflow-x: hidden; }

.pg { position: relative; z-index: 2; padding-top: var(--navh); }

/* THE flat-page container. Mirrors .nav-in EXACTLY (site.css ~L2172) so the
   page content shares one left edge with the logo at every width. The brief
   is "use the full width", not "a narrow column with dead space". */
.pw {
  width: min(var(--maxw), 100%);
  margin-inline: auto;
  padding: 0 var(--edge);
}
@media (min-width: 1200px) { .pw { padding: 0; } }
@media (min-width: 1400px) { .pw { width: min(1500px, 92vw); } }
@media (min-width: 1800px) { .pw { width: min(1620px, 90vw); } }

/* A band is one idea. Nothing else lives in it. */
.band { padding: clamp(50px, 5.6vw, 84px) 0; }
.band + .band { border-top: 1px solid var(--line); }
.band-tight { padding: clamp(40px, 5vw, 68px) 0; }

/* -------------------------------------------------------------- type ---- */
.p-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: 22px;
}
.p-h1 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--ink);
  font-size: clamp(46px, 8.6vw, 128px);
  text-wrap: balance;
}
.p-h2 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
  font-size: clamp(30px, 4.4vw, 60px);
  text-wrap: balance;
}
.p-say {
  font-size: clamp(19px, 1.85vw, 27px);
  line-height: 1.36;
  letter-spacing: -0.018em;
  color: var(--ink-soft);
  max-width: 34ch;
  margin-top: clamp(20px, 2.2vw, 30px);
  text-wrap: pretty;
}
.p-say b, .p-say strong { color: var(--ink); font-weight: 700; }
.p-say .amb { color: var(--accent-deep); font-style: italic; font-weight: 700; }
.p-note { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

.p-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
         margin-top: clamp(30px, 3.6vw, 46px); }
.p-cta .cta-btn { height: 56px; padding: 0 30px; font-size: 15px; }

/* -------------------------------------------- results: the wide ledger ---
   Five cells straight across the full width. Reads in one pass. */
.ledger {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 2px solid var(--ink);
}
.ledger > div {
  padding: 26px 22px 30px 0;
  border-right: 1px solid var(--line);
}
.ledger > div:last-child { border-right: 0; padding-right: 0; }
.ledger > div + div { padding-left: 22px; }
.ledger .n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 14px;
}
.ledger p {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.16;
  color: var(--ink);
  font-size: clamp(17px, 1.55vw, 23px);
}

/* The honest close: a single full-width statement, amber only once. */
.honest {
  border-left: 4px solid var(--accent);
  padding-left: clamp(22px, 3vw, 40px);
  max-width: 34ch;
}
.honest p {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.16;
  color: var(--ink);
  font-size: clamp(26px, 3.5vw, 46px);
  text-wrap: balance;
}

/* Two-up split used by the results close and the book hero. */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 84px);
  align-items: center;
}
.split-form { grid-template-columns: 1fr 0.86fr; align-items: start; }
/* Hero split: headline left, the one sentence right, sat on a shared baseline.
   This is what stops a 1620px canvas reading as a narrow left ribbon. */
.split-hero { grid-template-columns: 1.25fr 0.75fr; align-items: end; }
.split-hero .p-say { margin-top: 0; }

/* --------------------------------------------------- book: the promise --- */
.facts { list-style: none; margin-top: clamp(26px, 3vw, 40px); display: grid; gap: 0;
         border-top: 1px solid var(--line); max-width: 40ch; }
.facts li {
  padding: 17px 0 17px 34px;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: clamp(15.5px, 1.25vw, 18px);
  line-height: 1.4;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.012em;
}
.facts li::before {
  content: "";
  position: absolute; left: 2px; top: 1.42em;
  width: 14px; height: 2px; background: var(--accent);
}

/* --------------------------------------------------------- book: form --- */
.fcard {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(22px, 2.6vw, 34px);
}
.fcard h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(20px, 1.9vw, 25px); line-height: 1.1; color: var(--ink);
  margin-bottom: 20px;
}
.fld { display: block; margin-bottom: 14px; }
.fld > .lab { display: block; font-weight: 600; font-size: 13.5px;
              letter-spacing: -0.005em; color: var(--ink); margin-bottom: 7px; }
.fld > .lab .opt { color: var(--ink-soft); font-weight: 500; }
.fld input, .fld textarea {
  width: 100%;
  padding: 0 15px;
  height: 50px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
}
.fld textarea { height: auto; min-height: 108px; padding: 13px 15px; resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-soft); opacity: 0.8; }
.fld input:focus, .fld textarea:focus {
  outline: none; border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.f2 { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
.fbtn { width: 100%; height: 56px; font-size: 15px; margin-top: 4px; }
.fmsg { margin-top: 11px; font-size: 13.5px; min-height: 1.2em; color: var(--ink-soft); }
.fmsg.err { color: var(--danger); font-weight: 700; }
.fcard .p-note { margin-top: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.is-hidden { display: none !important; }

.done {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-left: 5px solid var(--accent);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3vw, 38px);
}
.done h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(28px, 3vw, 42px); line-height: 1.05; color: var(--ink);
}
.done p { margin-top: 14px; font-size: clamp(16px, 1.4vw, 19px);
          line-height: 1.5; color: var(--ink-soft); max-width: 34ch; }

/* ------------------------------------------------------------ footer ---- */
.pg .foot { margin-top: 0; padding-bottom: 40px; }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1180px) {
  .ledger { grid-template-columns: repeat(3, 1fr); border-top-width: 2px; }
  .ledger > div { border-bottom: 1px solid var(--line); }
  .ledger > div:nth-child(3n) { border-right: 0; padding-right: 0; }
  .ledger > div:nth-child(3n+1) { padding-left: 0; }
  .ledger > div:last-child { border-bottom: 0; }
}
@media (max-width: 980px) {
  .split, .split-form { grid-template-columns: 1fr; gap: 34px; }
  .p-say, .honest, .facts, .done p { max-width: none; }
}
@media (max-width: 720px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger > div { border-right: 0; padding: 18px 0; padding-left: 0 !important; }
  .ledger .n { margin-bottom: 8px; }
  .f2 { grid-template-columns: 1fr; }
  .p-cta .cta-btn, .p-cta .btn { width: 100%; }
}
@media (max-width: 560px) {
  .pg { padding-top: var(--navh); }
  .p-h1 { font-size: clamp(38px, 12vw, 54px); }
  .p-h2 { font-size: clamp(26px, 8.4vw, 34px); }
  .honest p { font-size: clamp(22px, 7vw, 30px); }
  .band { padding: 44px 0; }
}