/* ==========================================================================
   WEALTH CLARITY ASSESSMENT — standalone application stylesheet.

   This page deliberately does NOT use the site header, footer, or site.css.
   It is a self-contained tool with its own padding and rhythm. The colour
   tokens below are identical to site.css, so it stays on-brand.

   Loaded only by assessment.php.
   ========================================================================== */

/* DM Sans, self-hosted — same files the rest of the site uses, so there is
   no Google Fonts request and no extra download for returning visitors. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  
  --paper: #F7F5EF;
  --ink: #1C1B18;
  --body: #3A3833;
  --muted: #8C887C;
  --hairline: #DDD8CA;
  --hairline-soft: #E7E3D6;
  --hairline-strong: #CFC9B8;

  --night: #0B0B0B;
  --night-ink: #F3F1E9;
  --night-muted: #8E96A3;
  --night-hairline: #39414D;
  --night-accent: #8FA9CF;

  --accent: #5B7DB1;
  --accent-deep: #41608F;
  --accent-tint: rgba(91,125,177,0.13);

  --positive: #7A8B6F; --positive-text: #5C6B52; --positive-tint: rgba(122,139,111,0.12);
  --warning:  #C2922E; --warning-text:  #96701F; --warning-tint:  rgba(194,146,46,0.11);
  --negative: #A8563F; --negative-text: #8F4530; --negative-tint: rgba(168,86,63,0.10);

  --radius-sm: 2px;
  --radius-md: 3px;

  --bg:     var(--paper);
  --panel:  var(--accent-tint);
  --panel2: var(--hairline-soft);
  --b:      var(--hairline);
  --bm:     var(--hairline-strong);
  --bh:     var(--ink);
  --white:  var(--ink);
  --w90:    var(--body);
  --w60:    var(--body);
  --w35:    var(--muted);
  --w15:    var(--hairline-strong);
  --w08:    var(--hairline-soft);
  --green:  var(--positive-text);
  --amber:  var(--warning-text);
  --red:    var(--negative-text);

  --font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --max:  680px;
}

html, body {
  overflow-x: clip;
  overscroll-behavior-x: none;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--ink); }
::selection { background: var(--accent-tint); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.screen { display: none; min-height: 100vh; background: var(--paper); }
.screen.active { display: flex; flex-direction: column; }

:root { --gutter-x: 32px; }
.inner { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter-x); }

.lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent-deep);
}

.logo { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.logo .mark { font-size: 24px; font-weight: 300; line-height: 1; color: var(--ink); }
.logo .sep  { display: none; }
.logo .name { font-size: 12px; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink); }
.logo:hover .name { color: var(--accent-deep); }

.btn {
  display: inline-block; font-family: var(--font); font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em; background: var(--ink); color: var(--paper);
  padding: 14px 28px; border: none; border-radius: var(--radius-md);
  cursor: pointer; transition: background 0.15s ease; text-decoration: none;
}
.btn:hover { background: var(--accent-deep); color: var(--paper); }
.btn:disabled { background: var(--hairline); color: var(--muted); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--body); border: 1px solid var(--hairline); }
.btn-ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-retake {
  font-family: var(--font); font-size: 14px; font-weight: 600; background: transparent;
  border: 1px solid var(--hairline); border-radius: var(--radius-md); color: var(--body);
  padding: 12px 20px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-retake:hover { border-color: var(--ink); color: var(--ink); }

#screen-hero { position: relative; overflow: hidden; justify-content: center; }
#screen-hero::before,
#screen-hero::after {
  content: ''; position: absolute; top: 50%; border-radius: 50%;
  transform: translateY(-50%); pointer-events: none;
}
#screen-hero::before { right: -190px; width: 620px; height: 620px; border: 1px solid var(--hairline); }
#screen-hero::after  { right: -110px; width: 450px; height: 450px; border: 1.5px solid var(--accent); opacity: 0.5; }

.hero-wrap    { padding: 40px 0 88px; }
.hero-logo    { margin-bottom: 64px; }
.hero-eyebrow { margin-bottom: 24px; }
h1 {
  font-size: clamp(34px,4.6vw,50px); font-weight: 500; line-height: 1.12;
  letter-spacing: -0.015em; color: var(--ink); margin-bottom: 22px; text-wrap: balance;
}
h1 em { font-style: normal; font-weight: 500; color: var(--muted); }
.hero-body { font-size: 18px; font-weight: 400; line-height: 1.62; color: var(--body); max-width: 520px; margin-bottom: 30px; }
.hero-meta {
  display: flex; align-items: center; flex-wrap: wrap; font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 40px;
}
.hero-meta span { padding: 0 16px; border-right: 1px solid var(--hairline); }
.hero-meta span:first-child { padding-left: 0; }
.hero-meta span:last-child  { border-right: none; }

.fc-row { display: flex; margin-top: 52px; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--paper); }
.fc-pill { flex: 1; padding: 18px 8px; text-align: center; border-right: 1px solid var(--hairline); }
.fc-pill:last-child { border-right: none; }
.fc-c    { font-size: 22px; font-weight: 500; color: var(--accent-deep); line-height: 1; margin-bottom: 8px; }
.fc-name { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

#screen-step { flex-direction: column; }
.step-head { background: var(--paper); padding: 22px 0 0; border-bottom: 1px solid var(--hairline); }
.step-head-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.step-pct { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--ink); }
.prog-track { display: flex; gap: 3px; margin-bottom: 12px; }
.prog-seg { flex: 1; height: 2px; border-radius: 1px; background: var(--hairline); transition: background 0.3s ease; }
.prog-seg.done   { background: var(--ink); }
.prog-seg.active { background: var(--accent); }
.step-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-bottom: 20px; }
.step-body { flex: 1; overflow-y: auto; padding: 44px 0 0; }

.d-lbl   { margin-bottom: 14px; }
.d-title { font-size: clamp(26px,3.4vw,34px); font-weight: 500; letter-spacing: -0.012em; color: var(--ink); line-height: 1.18; margin-bottom: 10px; }
.d-prin  { font-size: 17px; font-weight: 400; color: var(--body); line-height: 1.55; max-width: 560px; margin-bottom: 30px; }
.divider { height: 1px; background: var(--hairline); margin-bottom: 32px; }

.r-q { margin-bottom: 30px; }
.r-qtext { font-size: 17px; font-weight: 500; color: var(--ink); line-height: 1.5; margin-bottom: 14px; }
.r-opts, .i-opts { display: flex; flex-direction: column; gap: 8px; }
.r-opt, .i-opt { position: relative; }
.r-opt input, .i-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.r-opt label, .i-opt label {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--paper); cursor: pointer; font-size: 15px; font-weight: 400; color: var(--body);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.r-opt label:hover, .i-opt label:hover { border-color: var(--ink); color: var(--ink); }
.r-opt input:checked + label, .i-opt input:checked + label {
  border-color: var(--accent); background: var(--accent-tint); color: var(--ink); font-weight: 500;
}
.r-opt .dot, .i-opt .dot {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--hairline-strong); background: transparent; transition: background 0.15s ease, border-color 0.15s ease;
}
.r-opt input:checked + label .dot, .i-opt input:checked + label .dot {
  background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2.5px var(--paper);
}

.step-foot { position: sticky; bottom: 0; z-index: 20; background: var(--paper); padding: 20px 0 24px; border-top: 1px solid var(--hairline); box-shadow: 0 -8px 24px -12px rgba(0,0,0,0.28); }
@supports (padding: env(safe-area-inset-bottom)) { .step-foot { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } }
.step-nav  { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.step-cnt  { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

#screen-gen { align-items: center; justify-content: center; text-align: center; padding: 32px; }
.gen-mark   { font-size: 56px; font-weight: 300; color: var(--accent); margin-bottom: 32px; animation: pulse 2.5s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 0.8 } 50% { opacity: 0.22 } }
.gen-title  { font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 24px; }
.gen-domain { font-size: clamp(24px,3.4vw,32px); font-weight: 500; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 10px; min-height: 44px; transition: opacity 0.3s ease; }
.gen-step   { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.gen-track  { width: 260px; height: 2px; background: var(--hairline); margin: 0 auto 20px; overflow: hidden; border-radius: 1px; }
.gen-fill   { height: 100%; background: var(--ink); width: 0; transition: width 0.8s ease; }
.gen-sub    { font-size: 14px; font-weight: 400; color: var(--muted); min-height: 20px; transition: opacity 0.3s ease; }

#screen-results { overflow-y: auto; }
.res-wrap { padding: 56px 0 80px; }
.res-logo { margin-bottom: 56px; }
.res-head { font-size: clamp(28px,4vw,40px); font-weight: 500; line-height: 1.14; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 18px; text-wrap: balance; }

.verdict {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--hairline);
  border-radius: 999px; color: var(--body); margin-bottom: 44px;
}
.verdict.strong     { border-color: var(--positive); color: var(--positive-text); background: var(--positive-tint); }
.verdict.developing { border-color: var(--warning);  color: var(--warning-text);  background: var(--warning-tint); }
.verdict.urgent     { border-color: var(--negative); color: var(--negative-text); background: var(--negative-tint); }

.r-block { padding: 36px 0; border-top: 1px solid var(--hairline); }
.r-lbl   { margin-bottom: 20px; }

.stand { font-size: 26px; font-weight: 400; line-height: 1.35; letter-spacing: -0.012em; color: var(--ink); max-width: 640px; }
.stand strong { font-weight: 600; }
.stand-sub { margin-top: 18px; font-size: 16px; font-weight: 400; color: var(--body); line-height: 1.7; max-width: 620px; }

.cx-row  { display: flex; flex-wrap: wrap; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.cx-item { flex: 1; min-width: 115px; padding: 14px 16px; border-right: 1px solid var(--hairline); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cx-item:last-child { border-right: none; }
.cx-item strong { display: block; font-size: 15px; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--ink); margin-top: 6px; }

.map5c  { display: flex; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.m-tile { flex: 1; padding: 20px 8px; text-align: center; border-right: 1px solid var(--hairline); }
.m-tile:last-child { border-right: none; }
.m-c      { font-size: 22px; font-weight: 500; line-height: 1; margin-bottom: 8px; color: var(--ink); }
.m-name   { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; color: var(--muted); }
.m-status { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.m-tile.aligned    { background: var(--positive-tint); }
.m-tile.aligned    .m-c, .m-tile.aligned    .m-status { color: var(--positive-text); }
.m-tile.aligned    .m-name { color: var(--positive-text); opacity: 0.72; }
.m-tile.developing { background: var(--warning-tint); }
.m-tile.developing .m-c, .m-tile.developing .m-status { color: var(--warning-text); }
.m-tile.developing .m-name { color: var(--warning-text); opacity: 0.72; }
.m-tile.exposed    { background: var(--negative-tint); }
.m-tile.exposed    .m-c, .m-tile.exposed    .m-status { color: var(--negative-text); }
.m-tile.exposed    .m-name { color: var(--negative-text); opacity: 0.72; }
.map-leg { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.map-leg span { display: flex; align-items: center; gap: 7px; }
.ldot { width: 6px; height: 6px; border-radius: 50%; }

.rc-head  { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.rc-score { font-size: 40px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.rc-of    { font-size: 14px; font-weight: 400; color: var(--muted); }
.rc-body  { font-size: 15px; font-weight: 400; color: var(--body); line-height: 1.7; max-width: 560px; }
.rc-adj   { margin-top: 18px; padding: 16px 18px; border-left: 2px solid var(--warning); background: var(--warning-tint); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 14px; font-weight: 400; color: var(--body); line-height: 1.7; }
.rc-adj strong { color: var(--ink); }
.rc-list  { margin-top: 20px; border-top: 1px solid var(--hairline); }
.rc-item  { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 15px; font-weight: 400; color: var(--body); }
.rc-item b { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.rc-item b.yes  { color: var(--positive-text); }
.rc-item b.part { color: var(--warning-text); }
.rc-item b.no   { color: var(--negative-text); }

.ai-card { border: 1px solid var(--hairline); border-left: 2px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--paper); padding: 26px 28px; }
.ai-lbl  { font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 14px; }
.ai-text { font-size: 16px; font-weight: 400; color: var(--body); line-height: 1.75; }

.gap-card { border: 1px solid var(--hairline); border-left: 2px solid var(--hairline); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--paper); padding: 22px 26px; margin-bottom: 10px; }
.gap-card.developing { border-left-color: var(--warning); }
.gap-card.exposed    { border-left-color: var(--negative); }
.gc-head  { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gc-c     { font-size: 17px; font-weight: 600; }
.gc-c.developing { color: var(--warning-text); }
.gc-c.exposed    { color: var(--negative-text); }
.gc-dom   { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.gc-badge { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-left: auto; }
.gc-badge.developing { border: 1px solid var(--warning); color: var(--warning-text); background: var(--warning-tint); }
.gc-badge.exposed    { border: 1px solid var(--negative); color: var(--negative-text); background: var(--negative-tint); }
.gc-title { font-size: 17px; font-weight: 500; color: var(--ink); line-height: 1.35; margin-bottom: 8px; }
.gc-body  { font-size: 15px; font-weight: 400; color: var(--body); line-height: 1.7; }
.gc-why   { font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.6; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline-soft); }

.em-card  { border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--paper); padding: 32px; }
.em-title { font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; }
.em-body  { font-size: 15px; font-weight: 400; color: var(--body); line-height: 1.7; margin-bottom: 22px; max-width: 520px; }
.em-form  { display: flex; gap: 10px; flex-wrap: wrap; }
.em-form input[type=text], .em-form input[type=email] {
  flex: 1 1 200px; min-width: 0; background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); color: var(--ink); font-family: var(--font); font-size: 15px;
  font-weight: 400; padding: 13px 14px; outline: none; transition: border-color 0.15s ease;
}
.em-form input::placeholder { color: var(--muted); }
.em-form input:focus { border-color: var(--ink); }
.em-consent { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.6; }
.em-consent input { margin-top: 4px; accent-color: var(--accent); }
.em-err  { margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--negative-text); display: none; }
.em-done { display: none; }
.em-done .em-title { color: var(--positive-text); }

.r-block.r-cta { border-top: none; background: var(--night); border-radius: var(--radius-md); padding: 44px 36px; margin-top: 36px; }
.r-cta .lbl { color: var(--night-accent); }
.cta-title { font-size: clamp(26px,3.2vw,34px); font-weight: 500; line-height: 1.16; letter-spacing: -0.014em; color: var(--ink); margin-bottom: 14px; }
.cta-title em { font-style: normal; font-weight: 500; color: var(--muted); }
.cta-line  { font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--body); margin-bottom: 14px; }
.cta-body  { font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--body); margin-bottom: 28px; }
.cta-row   { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.r-cta .cta-title { color: var(--night-ink); }
.r-cta .cta-title em { color: var(--night-accent); }
.r-cta .cta-line { color: var(--night-ink); }
.r-cta .cta-body { color: var(--night-muted); }
.r-cta .btn { background: var(--night-ink); color: var(--night); }
.r-cta .btn:hover { background: var(--night-accent); color: var(--night); }
.r-cta .btn-retake { border-color: var(--night-hairline); color: var(--night-muted); }
.r-cta .btn-retake:hover { border-color: var(--night-accent); color: var(--night-ink); }

.res-foot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 24px; }

@media (max-width: 1080px) {
  #screen-hero::before, #screen-hero::after { display: none; }
}
@media (max-width: 560px) {
  :root { --gutter-x: 22px; }
  h1 { font-size: 32px; }
  .stand { font-size: 22px; }
  /* Five cells on a phone. Flex with a percentage basis does not hold: a long
     word like "Consolidation" pushes its cell wider than the basis, so only
     two fit on the first row and the hand-placed borders land on the wrong
     cells. A six-column grid divides evenly — the first three span two
     columns each, the last two span three — so both rows are exactly equal
     whatever the word length. */
  .fc-row { display: grid; grid-template-columns: repeat(6, 1fr); }
  .fc-pill {
    grid-column: span 2;
    min-width: 0;
    padding: 16px 6px;
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }
  .fc-pill:nth-child(3) { border-right: none; }
  .fc-pill:nth-child(4) { grid-column: span 3; }
  .fc-pill:nth-child(5) { grid-column: span 3; border-right: none; }
  .fc-pill:nth-child(4), .fc-pill:nth-child(5) { border-bottom: none; }
  /* Let the longest label shrink rather than break mid-word. */
  .fc-name { font-size: 9px; letter-spacing: 0.1em; word-break: keep-all; overflow-wrap: normal; hyphens: none; }
  .fc-c { font-size: 20px; margin-bottom: 6px; }

  /* The meta row wrapped mid-list, leaving a divider dangling at the end of
     the first line and the second line indented. Reads as flowing text
     instead, with the separator part of the content. */
  .hero-meta { display: block; margin-bottom: 32px; line-height: 1.9; }
  .hero-meta span { display: inline; padding: 0; border-right: none; }
  .hero-meta span + span::before { content: '·'; margin: 0 10px; color: var(--hairline); }
  .map5c { flex-wrap: wrap; }
  .m-tile { flex: 0 0 33.33%; border-bottom: 1px solid var(--hairline); }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn, .cta-row .btn-retake { text-align: center; }
  .cx-row { flex-direction: column; }
  .cx-item { border-right: none; border-bottom: 1px solid var(--hairline); }
  .cx-item:last-child { border-bottom: none; }
  .em-card { padding: 24px 20px; }
  .r-block.r-cta { padding: 32px 22px; }
  .res-foot { flex-direction: column; gap: 10px; }
  .step-nav { gap: 10px; }
  .step-cnt { display: none; }
}

/* --------------------------------------------------------------------------
   ADDED: no-JS notice, and responsive coverage for the tablet range.
   The original had breakpoints only at 560px and 1080px, which left
   561–1080px unhandled.
   -------------------------------------------------------------------------- */
.noscript-note {
  max-width: 620px;
  margin: 80px auto;
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper);
  font-family: var(--font);
  color: var(--body);
  line-height: 1.6;
}
.noscript-note p + p { margin-top: 12px; }
.noscript-note a { color: var(--accent-deep); }

/* Tablet / small laptop */
@media (max-width: 900px) {
  :root { --gutter-x: 32px; }
}
@media (max-width: 720px) {
  :root { --gutter-x: 26px; }
  /* Long option lists and grids get cramped before the 560px breakpoint. */
  .cx-row { flex-wrap: wrap; }
  .res-foot { gap: 16px; }
}

/* Safe-area padding on notched phones, since the tool is full-bleed. This
   used a hard 22px, which quietly overrode the gutter at every width — the
   logo then sat 10px proud of the body text on desktop. It now takes the
   larger of the gutter and the notch inset. */
@supports (padding: max(0px)) {
  .inner {
    padding-left: max(var(--gutter-x), env(safe-area-inset-left));
    padding-right: max(var(--gutter-x), env(safe-area-inset-right));
  }
  /* Horizontal from the gutter, vertical kept for the 44px touch height —
     setting all four here would wipe the padding-top/bottom above. */
  #screen-hero .hero-logo,
  #screen-gate .hero-logo {
    padding: 10px max(var(--gutter-x), env(safe-area-inset-left))
             10px max(var(--gutter-x), env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1023px) {
  /* Touch target without breaking the layout: inline-block killed the flex
     gap, so the circle sat hard against the wordmark. Keep inline-flex and
     take the height from padding instead. */
  /* 44px touch height. min-height cannot be wiped by a later padding
     shorthand, which is what kept happening with padding alone. */
  .hero-logo { display: inline-flex; min-height: 44px; align-items: center; }
}

/* ==========================================================================
   GATE SCREEN — name and email before the questions.
   Our own form, submitted to HubSpot through the Forms API, so the styling
   is entirely ours and nothing of theirs needs overriding.
   ========================================================================== */
/* Matches the hero exactly: same vertical centring, same wrapper padding and
   same logo gap, so moving between the two screens does not shift the page. */
#screen-gate { justify-content: center; }
.gate-wrap { max-width: 560px; padding: 40px 0 88px; }

/* The pinned logo is out of the flow, so on a short laptop the vertically
   centred content rises underneath it. Reserving its height as top padding
   keeps them apart without unpinning the logo. The vh floor is generous
   enough for a 720px laptop; the px floor covers short phone viewports where
   12vh alone is too small. */
.hero-wrap, .gate-wrap { padding-top: max(112px, clamp(96px, 12vh, 140px)); }

/* The logo is fixed to the top of the screen rather than riding on the
   content. Both the hero and the gate centre their content vertically, and
   those blocks differ in height, so a logo inside the flow moved between
   screens. Pinned, it holds one position and the content flows beneath it. */
#screen-hero, #screen-gate { position: relative; }
/* .inner is position:relative for stacking, which made it the containing
   block for the absolute logo — so the logo still moved with the centred
   content. Static here pins the logo to the screen; the wrapper keeps the
   stacking context so the decorative circles stay behind the text. */
#screen-hero > .inner,
#screen-gate > .inner { position: static; }
#screen-hero .hero-logo,
#screen-gate .hero-logo {
  position: absolute;
  /* 44px minimum touch height on phones, without disturbing the flex box. */
  padding-top: 10px;
  padding-bottom: 10px;
  top: clamp(22px, 5vh, 62px);
  left: 50%;
  /* Matches .inner: same max-width, same 32px gutter, so the logo sits on the
     page's left edge rather than the content block's. */
  transform: translateX(-50%);
  width: var(--max);
  max-width: 100%;
  /* The same gutter variable .inner uses, so the logo can never drift from
     the body text at any breakpoint. */
  padding: 0 var(--gutter-x);
  z-index: 2;
  box-sizing: border-box;
  margin-bottom: 0;
  justify-content: flex-start;
}
.gate-h1 { margin-bottom: 18px; }
.gate-body { margin-bottom: 34px; }

.gate-form { display: flex; flex-direction: column; gap: 18px; }
.gf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gf-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.gf-input {
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 13px 14px; min-height: 48px;
  width: 100%; box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.gf-input:focus { outline: none; border-color: var(--ink); }
.gf-input.is-invalid { border-color: #a8443a; }

/* Honeypot — off-screen rather than display:none, so bots still fill it. */
.gf-hp {
  /* Clipped rather than pushed off-screen — a large negative offset is
     pannable on iOS. */
  position: absolute; left: 0; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

.gf-consent {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; line-height: 1.6; color: var(--body);
  cursor: pointer; padding: 4px 0;
}
.gf-consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.gf-consent a { color: var(--accent-deep); border-bottom: 1px solid var(--hairline); }
.gf-consent a:hover { border-bottom-color: var(--accent-deep); }

.gf-err { font-size: 14px; color: #a8443a; line-height: 1.5; }
.gf-submit { align-self: flex-start; margin-top: 4px; }
.gf-submit[disabled] { opacity: 0.55; cursor: default; }

@media (max-width: 560px) {
  .gf-pair { grid-template-columns: 1fr; }
  .gf-submit { align-self: stretch; text-align: center; }
}

/* ==========================================================================
   PRINT — the designed Wealth Clarity Profile.

   The screen results and the PDF are two renderings of one result. On paper we
   print #pdfDoc and hide everything else. Editing the PDF means editing that
   markup in assessment.php, not this stylesheet.
   ========================================================================== */
#pdfDoc { display: none; }

/* Status colours, used by both the 5C rows and the recall check. The design
   file left every pill the same colour, so a page of "exposed" read exactly
   like a page of "aligned". These are the site's own semantic tokens. */
/* The design hardcodes colour and background inline on every pill, so all
   five 5C rows printed the same red whatever the score. !important is the
   right tool here: the alternative is stripping inline styles from a design
   file we want to keep editable. */
#pdfDoc [data-status] {
  display: inline-block !important;
  width: auto !important;
  padding: 3px 10px 2px !important;
  border-radius: 3px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-align: center !important;
}
#pdfDoc [data-status="aligned"],
#pdfDoc [data-status="precisely"] {
  color: #4A5A40 !important;
  background: rgba(122,139,111,0.20) !important;
}
#pdfDoc [data-status="developing"],
#pdfDoc [data-status="roughly"] {
  color: #7E5C13 !important;
  background: rgba(194,146,46,0.20) !important;
}
#pdfDoc [data-status="exposed"],
#pdfDoc [data-status="would-ask"] {
  color: #8C3D2E !important;
  background: rgba(154,75,60,0.18) !important;
}

@media print {
  /* The design specifies a 0.62in page margin. @page alone is not enough:
     some browsers print with their own margin setting, and Chrome's headless
     PDF defaults to none — which is why the first version ran to the paper
     edge. Padding on the document itself guarantees the inset regardless. */
  @page { size: A4; margin: 0; }

  html, body {
    background: #fff !important;
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body > *:not(#pdfDoc) { display: none !important; }

  #pdfDoc {
    display: block !important;
    padding: 0.62in;
    box-sizing: border-box;
  }

  /* The header and footer sit at the top and bottom of the document; browsers
     cannot repeat arbitrary markup on every printed page. */
  .pdfdoc__header { margin-bottom: 10mm; }
  .pdfdoc__footer { margin-top: 10mm; }
  .c26-pageno { display: none; }

  h1, h2, h3 { page-break-after: avoid; }

  /* The closing block sits in a wrapper the design gave a dark ground. The
     new guide block is light text made for that ground, so on paper it
     printed near-invisible. Neutralise the wrapper and set legible colours. */
  #pdfDoc .pdf-closewrap,
  #pdfDoc .pdf-close {
    background: none !important;
  }
  #pdfDoc .pdf-closewrap *,
  #pdfDoc .pdfdoc__footer,
  #pdfDoc .pdfdoc__footer * { color: var(--body) !important; }
  #pdfDoc .pdf-close { border-top: 1px solid var(--hairline) !important; }
  #pdfDoc .pdf-close .pdf-close__lbl { color: var(--muted) !important; }
  #pdfDoc .pdf-close .pdf-close__btn {
    color: var(--paper) !important;
    background: var(--ink) !important;
  }
  [data-row], [data-list] > div { page-break-inside: avoid; }
}

@media screen {
  #pdfDoc { display: none !important; }
}

/* ==========================================================================
   RESULTS — the closing call to action and the save block.
   ========================================================================== */

/* [hidden] is display:none at the browser's lowest specificity, so any rule
   that sets display beats it. .cta-row is display:flex, which is why the
   buttons stayed on screen underneath the booking calendar. */
[hidden] { display: none !important; }
.cta-secondary {
  font-size: 15px;
  font-weight: 600;
  /* The CTA block sits on --night. --accent-deep is a light-background colour
     and fails contrast here; --night-accent is the dark-ground equivalent. */
  color: var(--night-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding: 12px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.15s ease;
}
.cta-secondary:hover { color: var(--night-ink); border-bottom-color: var(--night-accent); }

/* Booking calendar, shown only for qualified results. */
.cta-book { margin-top: 28px; }
.cta-book .meetings-iframe-container { min-height: 620px; }

/* Keeping a copy is a different decision from what to do next, so it sits in
   its own block rather than competing with the call to action. */
.r-save {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.save-copy { flex: 1 1 420px; min-width: 0; }
.save-title {
  font-size: 22px; font-weight: 500; line-height: 1.25;
  color: var(--ink); margin-bottom: 12px;
}
.save-body { font-size: 15px; line-height: 1.7; color: var(--body); max-width: 560px; }
.save-action { flex: 0 0 auto; padding-top: 4px; }
.btn--quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.btn--quiet:hover { border-color: var(--ink); background: transparent; }

@media (max-width: 700px) {
  .r-save { flex-direction: column; gap: 22px; }
  .save-action { width: 100%; }
  .btn--quiet { width: 100%; text-align: center; }
  .cta-book .meetings-iframe-container { min-height: 700px; }
}

/* A qualifying line under the hero body, and the interpretation prompt above
   the focus areas. Both quieter than the copy they sit beneath. */
.hero-body--sub { font-size: 15px; color: var(--muted); margin-top: 14px; }
.r-focus-note {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 10px 0 24px;
  max-width: 46em;
}

/* No italics. House policy, matching site.css. */
em, i, cite { font-style: normal; }
/* Emphasis inherits the heading colour. The pre-existing muted treatment on
   the assessment h1 is left alone; it was a deliberate design choice. */
h2 em, .hero-h1 em, .gate-h1 em { color: inherit; }