/* ═══════════════════════════════════════════════════════════════════════
   MANDA Survey — the public pages (landing, survey, legal pages, 404)
   The MANDA Network look: navy and gold, Playfair Display and DM Sans.
   No inline styles anywhere: the page's Content-Security-Policy forbids them.

   Three layouts, not one stretched:
     phone    under 640px   one column; a sticky "Get started" bar
     tablet   640 to 1023   two-up grids; every target 44px or more
     desktop  1024 and up   two-column hero, three-up packages, form + FAQ

   Contrast (WCAG 2.1 AA, measured by test/ui.mjs): body text 4.5:1 or
   more everywhere. Gold is a fill or a text colour on navy only; on light
   backgrounds gold text uses --gold-text. --dim is for rings and borders,
   never for text.
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy: #1E3259; --navy-deep: #0E1A36; --navy-mid: #2A4A8A;
  --gold: #C8A96E; --gold-dark: #9E7A3A; --gold-lt: #FBF4E6; --gold-text: #7A5C24; --gold-hi: #E2C78F;
  --surface: #F4F7FC; --border: #D8E2F3; --text: #1C2D50; --soft: #5B6B90; --dim: #77849F;
  --field: #8592AE;   /* the edge of a text box: 3:1 on white, so the box is visible */
  --white: #ffffff; --err: #C62828; --ok: #15803D;
  --focus: var(--navy-mid);
  --r-card: 20px; --r-btn: 14px;
  --shadow: 0 4px 24px rgba(14,26,54,.10); --shadow-deep: 0 18px 60px rgba(14,26,54,.30);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: light;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--text); background: var(--surface); }
img, svg { display: block; max-width: 100%; }
a { color: var(--navy-mid); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::placeholder { color: var(--soft); opacity: 1; }

/* Focus: a 3px ring that shows on every background. Dark areas switch the
   ring to light gold. Headings focused by script (tabindex="-1") so screen
   readers announce each new screen get no ring: they aren't controls. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.top, .hero, .band, .foot, .cta-bar, .legal-head, body.taking { --focus: var(--gold-hi); }
.t-card, .mock, .poll-ex { --focus: var(--navy-mid); }

.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The honeypot: off screen, out of the tab order, never seen by people. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* "Skip to content": the first thing a keyboard reaches, shown when focused. */
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--white); color: var(--navy-deep); font-weight: 700;
  padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-deep); text-decoration: none; }
.skip:focus { top: 12px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 12px 22px; border-radius: var(--r-btn); border: none; font-weight: 600; font-size: 15px;
  text-decoration: none; transition: filter .15s, transform .1s, background .15s; }
.btn:active { transform: scale(.98); }
/* Navy text on gold: white on this gold is only 2.2:1. */
.btn-gold { background: linear-gradient(135deg, #DCC28C, var(--gold)); color: var(--navy-deep); }
.btn-gold:hover { filter: brightness(1.05); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-mid); }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--border); }
.btn-light { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.34); }
.btn-light:hover { background: rgba(255,255,255,.16); }
.btn-link { background: none; border: none; color: var(--soft); text-decoration: underline; min-height: 44px; padding: 8px 10px; font-weight: 500; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }
.btn-block { width: 100%; }

/* ── Brand mark ──────────────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-height: 44px; }
.brand svg, .brand img { width: 34px; height: 34px; flex-shrink: 0; }
.brand-n { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1; }
.brand-s { display: block; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-top: 3px; }

/* ═══ Landing page and legal pages ═══════════════════════════════════════ */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }
@media (min-width: 1024px) { .wrap { padding: 0 40px; } }

.top { position: sticky; top: 0; z-index: 20; background: rgba(14,26,54,.95); backdrop-filter: blur(10px);
  color: #fff; border-bottom: 1px solid rgba(200,169,110,.25); }
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255,255,255,.86); text-decoration: none;
  font-size: 14.5px; font-weight: 500; padding: 0 12px; border-radius: 10px; }
.top nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.top nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.top nav .btn { min-height: 44px; padding: 8px 18px; margin-left: 8px; font-size: 14.5px; color: var(--navy-deep); white-space: nowrap; border-radius: 12px; }
@media (max-width: 767px) { .top nav a.nav-x { display: none; } }
@media (max-width: 520px) { .top .brand-s { display: none; } }

.kicker { font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold-text); }
/* On navy, gold text is fine; the hero's gold glow needs the lighter gold. */
.band .kicker, .legal-head .kicker { color: var(--gold); }
.hero .kicker { color: var(--gold-hi); }

/* Hero: one column on a phone, the example beside the words from tablet up. */
.hero { color: #fff; background: radial-gradient(90% 120% at 100% 0%, rgba(200,169,110,.22), rgba(200,169,110,0) 55%),
  linear-gradient(160deg, #1E3259 0%, #152648 55%, #0E1A36 100%); padding: 40px 0 48px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.08; margin: 14px 0 18px; letter-spacing: -.5px; text-wrap: balance; }
.hero p.lead { font-size: 18px; color: rgba(255,255,255,.86); max-width: 580px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero .trust { margin-top: 22px; font-size: 14px; color: rgba(255,255,255,.78); display: flex; gap: 8px; align-items: flex-start; }
.hero .trust svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.mock { background: #fff; color: var(--text); border-radius: 26px; padding: 22px 20px 20px; box-shadow: var(--shadow-deep);
  width: 100%; max-width: 360px; margin: 0 auto; border: 1px solid rgba(255,255,255,.4); }
@media (max-width: 639px) { .hero .cta .btn { flex: 1 1 100%; } }
@media (min-width: 768px) {
  .hero { padding: 56px 0 64px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
  .hero p.lead { font-size: 17px; }
  .mock { margin: 0 0 0 auto; }
}
@media (min-width: 1024px) {
  .hero { padding: 84px 0 92px; }
  .hero .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; }
  .hero p.lead { font-size: 19px; }
  .mock { max-width: 380px; padding: 26px 24px 22px; }
}
.mock-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold-text); background: var(--gold-lt); border-radius: 99px; padding: 4px 10px; }
.mock-bar { height: 6px; border-radius: 99px; background: var(--border); margin: 14px 0 16px; overflow: hidden; }
.mock-bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--gold), var(--gold-dark)); border-radius: 99px; }
.mock-q { font-family: var(--serif); font-size: 20px; line-height: 1.3; margin-bottom: 14px; color: var(--navy); text-wrap: balance; }
.mock-o { border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.mock-o i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--dim); flex-shrink: 0; }
.mock-o.on { border-color: var(--gold); background: var(--gold-lt); }
.mock-o.on i { border-color: var(--gold-dark); background: radial-gradient(circle, var(--gold-dark) 45%, transparent 50%); }
.mock-foot { font-size: 12.5px; color: var(--soft); margin-top: 10px; }

.sec { padding: 48px 0; }
@media (min-width: 640px) { .sec { padding: 64px 0; } }
@media (min-width: 1024px) { .sec { padding: 88px 0; } }
.sec.alt { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; color: var(--navy); margin: 8px 0 12px; text-wrap: balance; }
.sec .sub { font-size: 17px; color: var(--soft); max-width: 680px; }

/* Card grids: one column on a phone; two-up on a tablet, with an odd last
   card centred under the pair; three-up on a desktop. */
.grid3, .steps, .pkgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 32px; }
@media (min-width: 640px) and (max-width: 1023px) {
  .grid3, .steps, .pkgs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .grid3 > *, .steps > *, .pkgs > * { grid-column: span 2; }
  .grid3 > :last-child:nth-child(odd), .steps > :last-child:nth-child(odd), .pkgs > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 1024px) { .grid3, .steps, .pkgs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; } }

.card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px 22px; box-shadow: var(--shadow); }
.sec.alt .card { background: var(--surface); box-shadow: none; }
.card h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--navy); margin: 12px 0 8px; }
.card p { color: var(--soft); font-size: 15.5px; }
.ico { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--navy), var(--navy-deep)); }
.ico svg { width: 24px; height: 24px; }

.steps { counter-reset: step; }
.step { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 26px 22px 24px; }
.step::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--gold-lt); color: var(--gold-text); font-weight: 700; font-size: 18px;
  border: 1.5px solid var(--gold); }
.step h3 { font-family: var(--serif); font-size: 20px; color: var(--navy); margin: 14px 0 6px; }
.step p { color: var(--soft); font-size: 15.5px; }
.step .when { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--navy-mid); background: var(--surface);
  border-radius: 99px; padding: 4px 12px; border: 1px solid var(--border); }

.uses { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 24px; margin-top: 26px; }
@media (min-width: 640px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 32px; } }
.uses li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.uses li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip { font-size: 14px; padding: 7px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--border); color: var(--navy); }

/* Packages */
.pkg { position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--border); border-radius: 22px; padding: 26px 22px 22px; box-shadow: var(--shadow); }
.pkg.featured { border-color: var(--gold); box-shadow: 0 10px 40px rgba(158,122,58,.18); }
.pkg .flag { position: absolute; top: -12px; left: 22px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  background: var(--gold); color: var(--navy-deep); border-radius: 99px; padding: 4px 12px; }
.pkg h3 { font-family: var(--serif); font-size: 23px; color: var(--navy); }
.pkg .what { color: var(--soft); font-size: 15px; margin-top: 2px; min-height: 24px; }
.pkg .price { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 4px; color: var(--navy-deep); }
.pkg .price b { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.pkg .price span { font-size: 14px; color: var(--soft); }
.pkg .price .from { font-size: 14px; color: var(--soft); align-self: center; }
.pkg .price .cur { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--soft); }
.pkg ul { list-style: none; margin: 14px 0 20px; display: grid; gap: 8px; flex: 1; align-content: start; }
.pkg li { display: flex; gap: 9px; font-size: 15px; color: var(--text); }
.pkg li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; }
.tiers { display: grid; gap: 8px; margin: 14px 0 6px; border: none; }
.tier { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; }
.tier input { accent-color: var(--gold-dark); width: 18px; height: 18px; }
.tier .t-l { flex: 1; font-weight: 600; }
.tier .t-p { font-weight: 700; color: var(--navy-deep); }
.tier:has(input:checked) { border-color: var(--gold); background: var(--gold-lt); }
.tier:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
/* the market switch above the packages: Australia or the United States */
.market { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 8px; }
.market .market-l { font-size: 14px; color: var(--soft); margin-right: 4px; }
.market button { min-height: 44px; padding: 8px 18px; font-size: 14.5px; font-weight: 600; border-radius: 99px; background: #fff; border: 1.5px solid var(--border); color: var(--navy); cursor: pointer; }
.market button:hover { border-color: var(--gold); }
.market button[aria-pressed="true"] { background: var(--gold-lt); border-color: var(--gold); color: var(--navy-deep); }
.market button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 520px) { .market .market-l { flex: 1 0 100%; } }
.pkg-note { margin-top: 18px; font-size: 14px; color: var(--soft); display: flex; gap: 8px; align-items: center; }
.pkg-note svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Sample questions */
.samples { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 30px; }
@media (min-width: 640px) { .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.sample { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px; }
.sample .t { font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold-text); }
.sample .q { font-family: var(--serif); font-size: 19px; color: var(--navy); margin: 8px 0 12px; line-height: 1.3; text-wrap: balance; }
.sample .row { display: flex; gap: 6px; flex-wrap: wrap; }
.sample .pill { border: 1.5px solid var(--border); border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.sample .sc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sample .sc span { border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 0; text-align: center; font-weight: 600; }
.sample .lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--soft); margin-top: 6px; }
.sample .box { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px; color: var(--soft); font-size: 14px; min-height: 64px; }

/* Poll example */
.poll-ex { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px; max-width: 420px; }
.poll-ex .q { font-weight: 700; font-size: 17px; margin: 8px 0 12px; }
.poll-ex .o { border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; font-size: 15px; }
.poll-ex .f { font-size: 13px; color: var(--soft); margin-top: 6px; }
/* The polls intro: the heading and words on the left, the example poll beside them. */
.poll-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.poll-row .sub { margin-top: 4px; }
@media (min-width: 768px) { .poll-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } .poll-ex { margin-left: auto; width: 100%; } }

/* Research band */
.band { background: linear-gradient(160deg, #1E3259, #0E1A36); color: #fff; border-radius: 26px; padding: 28px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.86); max-width: 640px; }
@media (min-width: 768px) { .band { grid-template-columns: minmax(0, 1fr) auto; padding: 40px 40px; } }

/* "Get started": the form, and the FAQ beside it on a desktop. */
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
@media (min-width: 1024px) { .start-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } .start-aside { position: sticky; top: 88px; } }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 22px 16px; box-shadow: var(--shadow); max-width: 820px; }
@media (min-width: 640px) { .form-card { padding: 32px 30px; } }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 16px; }
.fgrid .full { grid-column: 1 / -1; }
@media (min-width: 640px) { .fgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field label, .field .lab { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.field label .optional { font-weight: 500; color: var(--soft); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--field); border-radius: 12px; background: #fff; font-size: 16px; }
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-mid); }
.field .hint { font-size: 13px; color: var(--soft); margin-top: 5px; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--err); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; cursor: pointer; padding: 10px 0; min-height: 44px; }
.check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--gold-dark); flex-shrink: 0; }
.msg { min-height: 22px; font-size: 14.5px; margin-top: 10px; }
.msg.err { color: var(--err); }
.picked { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--gold-lt); border: 1px solid var(--gold);
  border-radius: 14px; padding: 8px 8px 8px 14px; margin-bottom: 18px; font-size: 15px; }
.picked b { color: var(--navy-deep); }
.picked .btn-link { color: var(--navy-mid); }
.done-box { text-align: center; padding: 18px 6px; }
.done-box svg { width: 64px; height: 64px; margin: 0 auto 12px; }
.done-box h3 { font-family: var(--serif); font-size: 26px; color: var(--navy); margin-bottom: 8px; }
.done-box p { color: var(--soft); max-width: 520px; margin: 0 auto 10px; }
.notice { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; font-size: 15px; text-align: left; max-width: 520px; margin: 16px auto 0; }
.notice svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

.faq { max-width: 820px; }
.faq h3 { font-family: var(--serif); font-size: 21px; color: var(--navy); margin-bottom: 12px; }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: 16px; margin-bottom: 10px; }
.faq summary { display: flex; align-items: center; min-height: 52px; padding: 12px 18px; font-weight: 700; color: var(--navy); cursor: pointer; border-radius: 16px; }
.faq details p { padding: 0 18px 16px; color: var(--soft); }

/* Footer: the legal pages are linked from every page. */
.foot { background: var(--navy-deep); color: rgba(255,255,255,.78); padding: 28px 0 32px; font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; justify-content: space-between; }
.foot a { color: rgba(255,255,255,.9); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 4px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 8px; }
.foot-links a:first-child { padding-left: 0; }

/* Phone only: a "Get started" bar fixed to the bottom of the screen.
   landing.js shows it once the hero's own buttons have scrolled away and
   hides it while the form is on screen, so it never sits over the hero or a
   field. The footer is padded by the bar's height, so the end of the page
   is never under it either. Focus scrolls clear of it (scroll-padding). */
.cta-bar { display: none; }
@media (max-width: 639px) {
  html { scroll-padding-bottom: 84px; }
  .cta-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(14,26,54,.97); border-top: 1px solid rgba(200,169,110,.3); transition: opacity .2s, visibility .2s; }
  .cta-bar.away { opacity: 0; visibility: hidden; }
  body.has-bar .top nav .btn { display: none; }
  body.has-bar .foot { padding-bottom: calc(32px + 68px + env(safe-area-inset-bottom)); }
}

/* ═══ Legal pages (terms, privacy, refunds) ══════════════════════════════ */
.legal-head { color: #fff; background: linear-gradient(160deg, #1E3259 0%, #152648 60%, #0E1A36 100%); padding: 40px 0 44px; }
.legal-head h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.1; margin: 10px 0 10px; }
.legal-head p { color: rgba(255,255,255,.84); max-width: 680px; }
@media (min-width: 1024px) { .legal-head { padding: 64px 0 60px; } }
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 28px; padding-bottom: 64px; }
@media (min-width: 1024px) { .legal-grid { grid-template-columns: 260px minmax(0, 760px); gap: 56px; padding-top: 48px; padding-bottom: 96px; } .toc { position: sticky; top: 88px; align-self: start; } }
.toc { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px 18px 10px; }
@media (min-width: 1024px) { .toc { max-height: calc(100vh - 112px); overflow-y: auto; } }
.legal-grid > .draft { grid-column: 1 / -1; margin-bottom: 0; }
@media (min-width: 1024px) { .legal-grid > .draft { margin-bottom: -16px; } }
.toc h2 { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px; }
.toc ol { list-style: none; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; color: var(--navy); text-decoration: none; font-size: 15px; border-bottom: 1px solid #EEF2F9; }
.toc li:last-child a { border-bottom: none; }
.toc a:hover { color: var(--navy-mid); text-decoration: underline; }
.legal { font-size: 16.5px; line-height: 1.65; }
.legal h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--navy); margin: 40px 0 12px; line-height: 1.2; }
.legal h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin: 22px 0 6px; }
.legal p, .legal ul, .legal ol { margin-bottom: 14px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.fill { background: #FFF1C2; color: #5C4300; border-radius: 6px; padding: 1px 6px; font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.draft { display: flex; gap: 12px; align-items: flex-start; background: #FFF8E6; border: 1.5px solid var(--gold); border-radius: 16px; padding: 16px 18px; margin-bottom: 24px; color: #4A3712; }
.draft svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.summary { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px 8px; box-shadow: var(--shadow); }
.summary h2 { margin-top: 0; font-size: 22px; }
.legal table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 15px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.legal th { color: var(--navy); background: #fff; }
.legal .table-wrap { overflow-x: auto; }

/* ═══ The survey itself (s.html) and the 404 page ════════════════════════ */
body.taking { background: linear-gradient(170deg, #1E3259 0%, #152648 40%, #0E1A36 100%); min-height: 100vh; min-height: 100dvh; }
.t-shell { width: 100%; max-width: 640px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 0 16px; }
.t-head { display: flex; align-items: center; gap: 12px; color: #fff; padding: 16px 0 12px; }
.t-head .brand-n { font-size: 17px; }
.t-prog { flex: 1; margin-left: 8px; }
.t-prog .bar { height: 6px; background: rgba(255,255,255,.16); border-radius: 99px; overflow: hidden; }
.t-prog .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), #E2C78F); border-radius: 99px; transition: width .3s ease; }
.t-prog .count { font-size: 12.5px; color: rgba(255,255,255,.8); text-align: right; margin-top: 5px; min-height: 16px; }
.t-card { background: #fff; border-radius: 26px; padding: 28px 22px 22px; box-shadow: var(--shadow-deep); margin-bottom: 20px; animation: up .25s ease both; }
@keyframes up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 480px) { .t-card { padding: 24px 18px 18px; border-radius: 22px; } }
.t-card h1 { font-family: var(--serif); font-size: 27px; line-height: 1.2; color: var(--navy); font-weight: 600; }
.t-card h2.q { font-family: var(--serif); font-size: 23px; line-height: 1.3; color: var(--navy); font-weight: 600; }
.t-card .intro { color: var(--soft); margin-top: 10px; white-space: pre-line; }
.t-card .help { color: var(--soft); font-size: 15px; margin-top: 6px; }
.t-card .req { font-size: 12px; font-weight: 700; color: var(--gold-text); letter-spacing: .6px; text-transform: uppercase; margin-bottom: 8px; }
/* Tablet and desktop: the same one-question card, roomier, and centred
   between the header and the footer (a little above the middle). */
@media (min-width: 768px) {
  .t-shell { max-width: 720px; padding: 0 24px; }
  .t-head { padding: 28px 0 20px; }
  .t-shell > main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2vh 0 8vh; }
  .t-card { padding: 40px 44px 32px; border-radius: 28px; }
  .t-card h1 { font-size: 32px; }
  .t-card h2.q { font-size: 27px; }
}
.before { margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 16px 6px; }
.before h2 { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--navy-mid); margin-bottom: 10px; }
.before dl { display: grid; gap: 10px; }
.before dt { font-weight: 700; font-size: 14.5px; color: var(--navy); }
.before dd { font-size: 14.5px; color: var(--soft); margin-bottom: 4px; }
@media (min-width: 768px) {
  .before { padding: 20px 22px 10px; }
  .before dl { grid-template-columns: 190px minmax(0, 1fr); gap: 10px 20px; }
  .before dd { margin-bottom: 0; }
}
.t-card .check { margin-top: 10px; }
.t-actions { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.t-actions .grow { flex: 1; }
.opts { display: grid; gap: 10px; margin-top: 18px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 54px; padding: 13px 16px; border-radius: 16px;
  border: 1.5px solid #C3CFE5; background: #fff; font-size: 16px; transition: border-color .12s, background .12s; }
.opt .mk { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--dim); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.opt.multi .mk { border-radius: 7px; }
.opt[aria-checked="true"], .opt[aria-pressed="true"] { border-color: var(--gold-dark); background: var(--gold-lt); }
.opt[aria-checked="true"] .mk, .opt[aria-pressed="true"] .mk { border-color: var(--gold-dark); background: var(--gold-dark); }
.opt .mk svg { width: 14px; height: 14px; opacity: 0; }
.opt[aria-checked="true"] .mk svg, .opt[aria-pressed="true"] .mk svg { opacity: 1; }
.yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.yn .opt { justify-content: center; font-weight: 700; font-size: 17px; min-height: 64px; }
.yn .opt .mk { display: none; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 18px; }
.scale .opt { justify-content: center; font-weight: 700; font-size: 20px; min-height: 60px; padding: 0; }
.scale .opt .mk { display: none; }
.scale-l { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--soft); margin-top: 8px; }
.scale-l span:last-child { text-align: right; }
.t-text { width: 100%; margin-top: 18px; padding: 14px; border: 1.5px solid var(--field); border-radius: 14px; font-size: 16px; }
textarea.t-text { min-height: 150px; resize: vertical; }
.t-text:focus { border-color: var(--navy-mid); }
.counter { font-size: 12.5px; color: var(--soft); text-align: right; margin-top: 5px; }
.t-err { color: var(--err); font-size: 14.5px; min-height: 22px; margin-top: 12px; }
.t-foot { margin-top: auto; padding: 14px 0 18px; text-align: center; font-size: 13px; color: rgba(255,255,255,.75); }
.t-foot a { color: rgba(255,255,255,.88); }
.t-foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; }
.t-foot nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 8px; }
.center { text-align: center; }
.big-ico { width: 72px; height: 72px; margin: 4px auto 14px; }
.spin { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--gold-dark); border-radius: 50%; animation: spin .8s linear infinite; margin: 10px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.contact-fields { display: grid; gap: 12px; margin-top: 14px; }

/* Hover only where there is a pointer that hovers. On a touch screen a
   tapped spot keeps :hover, so the option in the same place on the next
   question would look chosen. */
@media (hover: hover) {
  .btn-ghost:hover { border-color: var(--gold); }
  .opt:hover { border-color: var(--gold); }
}

/* Anyone who asks their system for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}