/* The shared shell, the homepage and the standing content pages.
   Loaded after main.css, which owns every colour as a token. Nothing here may
   hardcode a colour.

   Rewritten from scratch. The inherited version carried 85 hex values and no
   dark-mode handling, and faq.css re-declared the same shell blocks and loaded
   AFTER it on every content page, so at equal specificity the duplicate won and
   the two quietly disagreed. faq.css is now gone entirely and its FAQ styling
   lives here.

   Shared with results.css and test.css: 4px block spacing scale, 4px control
   radii and 6px card radii, hairlines rather than shadows, one focus ring, and
   --mono with tabular-nums on every figure. Sans has no 600 weight in the
   loaded font files, so 500 and 700 are the only emphasis steps. */

/* ---- shell ---------------------------------------------------------------- */

.hpv3-skip {
  position: absolute; left: 12px; top: -56px; z-index: 200;
  background: var(--ink-panel); color: var(--paper-on-dark);
  padding: 11px 18px; border-radius: var(--radius);
  font: 500 14px/1 var(--sans); text-decoration: none;
  transition: top .16s ease;
}
.hpv3-skip:focus { top: 12px; color: var(--paper-on-dark); }

#main:focus { outline: none; }
html { scroll-padding-top: 88px; }

body :focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px; border-radius: var(--radius);
}

/* Base first, components after. `.hpv3 a` is (0,1,1) and would otherwise beat
   a (0,1,0) component class on any anchor inside <main class="hpv3">, which is
   exactly what happened to the hero CTA: it rendered ember text on an ember
   background and was completely invisible. */
.hpv3 { color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
.hpv3 a { color: var(--blue); text-underline-offset: 2px; }
.hpv3 a:hover { color: var(--blue-hover); }

.hpv3-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--card); border-bottom: 1px solid var(--rule);
}
.hpv3-header-in {
  max-width: 1200px; margin-inline: auto;
  padding: 0 clamp(18px, 4vw, 40px); min-height: 76px;
  display: flex; align-items: center; gap: 22px;
}
.hpv3-brand {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 4px 2px; margin-right: auto;
  font: 800 23px/1 var(--display); letter-spacing: -.03em;
  color: var(--ink-2); text-decoration: none;
}
.hpv3-brand:hover { color: var(--ink-2); text-decoration: none; }
/* The pixel mark (src/brand.js). Square, never stretched, edges kept crisp. */
.hpv3-brand-mark { width: 36px; height: 36px; flex: none; }

.hpv3-nav { display: flex; align-items: center; gap: 2px; }
.hpv3-nav-primary { display: none; }
.hpv3-nav-group { position: relative; }
.hpv3-nav-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 11px; background: none; border: 0;
  border-bottom: 2px solid transparent; color: var(--pencil);
  font: 500 14.5px/1 var(--sans); cursor: pointer;
}
.hpv3-nav-trigger svg {
  width: 10px; height: 7px; flex: none; transition: transform .16s ease;
}
.hpv3-nav-trigger:hover,
.hpv3-nav-trigger[aria-expanded='true'],
.hpv3-nav-group.is-current .hpv3-nav-trigger {
  color: var(--ink-2); border-bottom-color: var(--marker);
}
.hpv3-nav-group.is-open .hpv3-nav-trigger svg { transform: rotate(180deg); }
.hpv3-nav-menu {
  display: none; position: absolute; top: calc(100% + 10px); left: 50%;
  width: 304px; padding: 8px; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--rule-strong);
  border-top: 4px solid var(--marker); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hpv3-nav-group.is-open .hpv3-nav-menu { display: grid; }
.hpv3-nav-item {
  display: block; min-height: 44px; padding: 11px 12px;
  color: var(--ink-2); text-decoration: none; border-radius: var(--radius);
}
.hpv3-nav-item:hover { background: var(--fill); color: var(--ink-2); text-decoration: none; }
.hpv3-nav-item strong { display: block; font: 700 14px/1.35 var(--sans); }
.hpv3-nav-item span {
  display: block; margin-top: 3px; font: 400 12.5px/1.4 var(--sans); color: var(--muted);
}
.hpv3-nav-item[aria-current='page'] { background: var(--blue-tint); }

a.hpv3-cta,
.hpv3-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 22px; gap: 8px;
  background: var(--blue); color: var(--card);
  border: 1px solid var(--blue-deep); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-cta);
  font: 700 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
}
a.hpv3-cta:hover,
.hpv3-cta:hover { background: var(--blue-hover); color: var(--card); }
.hpv3-cta:active { background: var(--blue-deep); }
.hpv3-cta.big { min-height: 54px; padding: 16px 26px; font-size: 17px; }

.hpv3-header .hpv3-cta {
  background: var(--marker); color: var(--ink-panel); border-color: var(--gold-ink);
}
.hpv3-header .hpv3-cta:hover { background: var(--gold-bright); color: var(--ink-panel); }
.hpv3-header .hpv3-cta:active { background: var(--gold); color: var(--ink-panel); }

.hpv3-burger {
  display: none; width: 44px; height: 44px; flex: none;
  background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.hpv3-burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 1px; }

/* ---- type ------------------------------------------------------------------ */
/* Instrument Serif for the wordmark and page h1 (400 is the only cut that
   exists), Newsreader for h2/h3 and prose, Schibsted for controls. */

.hpv3 h1 {
  font: 400 clamp(32px, 4.6vw, 46px)/1.1 var(--display);
  letter-spacing: -.02em; color: var(--ink-2); text-wrap: balance;
}
.hpv3 h2 {
  font: 600 clamp(24px, 2.8vw, 30px)/1.25 var(--serif);
  letter-spacing: -.015em; color: var(--ink-2);
}
.hpv3 h3 { font: 600 20px/1.3 var(--serif); color: var(--ink-2); }
.hpv3 p { max-width: 68ch; }

/* ---- closing CTA ----------------------------------------------------------- */

.hpv3-final {
  margin-top: 88px; background: var(--ink-panel);
  padding: clamp(40px, 7vw, 72px) clamp(18px, 5vw, 44px);
}
.hpv3-final-in { max-width: 720px; margin-inline: auto; text-align: center; }
.hpv3-final h2 { font-family: var(--display); font-weight: 400; color: var(--paper-on-dark); }
/* --paper-on-dark and --ink-panel are the only pairing used on a permanently
   dark panel: page-relative tokens like --muted would invert wrongly here. */
.hpv3-final .k {
  margin: 16px auto 0; max-width: 52ch;
  font: 400 17px/1.6 var(--sans); color: var(--paper-on-dark); opacity: .78;
}
.hpv3-final .hpv3-cta { margin-top: 32px; }

/* ---- footer ---------------------------------------------------------------- */

.hpv3-footer { border-top: 1px solid var(--rule); background: var(--paper); }
.hpv3-footer-in {
  max-width: 1120px; margin-inline: auto;
  padding: 48px clamp(18px, 5vw, 44px) 56px;
}
.hpv3-foot-grid {
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
}
.hpv3-foot-brand .b {
  font: 800 22px/1 var(--display); letter-spacing: -.03em;
  color: var(--ink-2); text-decoration: none;
}
.hpv3-foot-disc {
  margin-top: 12px; font: 400 13.5px/1.65 var(--sans);
  color: var(--muted); max-width: 60ch; text-wrap: pretty;
}
.hpv3-foot-col .h {
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.hpv3-foot-col ul { list-style: none; margin: 12px 0 0; padding: 0; }
.hpv3-foot-col li + li { margin-top: 2px; }
.hpv3-foot-col a {
  display: inline-block; padding: 6px 0;
  font: 400 14.5px/1.4 var(--sans); color: var(--pencil); text-decoration: none;
}
.hpv3-foot-col a:hover { color: var(--blue); text-decoration: underline; }
.hpv3-foot-legal {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule);
  font: 400 13px/1.6 var(--sans); color: var(--muted);
}

/* ---- homepage -------------------------------------------------------------- */
/* ---- homepage: the two-track figure ---------------------------------------- */
/* The owned illustration of the report's structure (five facet bars, twelve
   situation tiles, "never averaged together"). It now sits in the dark method
   panel; the rest of the home page rules are at the end of this sheet. */
.hp-model {
  min-width: 0; padding: clamp(20px, 2.5vw, 26px); background: var(--card); color: var(--ink);
  border: 1px solid var(--rule-strong); border-top: 6px solid var(--marker);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.hp-model figcaption > span,
.hp-model-track p > span {
  display: block; font: 500 9.5px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue);
}
.hp-model figcaption > strong {
  display: block; margin-top: 8px; font: 500 25px/1.25 var(--serif); color: var(--ink-2);
}
.hp-model-track {
  margin-top: 16px; padding: 14px; background: var(--card-tint);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.hp-model-track p > strong {
  display: block; margin-top: 6px; font: 700 13.5px/1.4 var(--sans); color: var(--ink-2);
}
.hp-model-track ul { list-style: none; margin: 14px 0 0; padding: 0; }
.hp-model-track li {
  display: grid; grid-template-columns: minmax(95px, auto) minmax(60px, 1fr); gap: 12px;
  align-items: center; padding: 3px 0; font: 400 11.5px/1.3 var(--sans); color: var(--pencil);
}
.hp-model-measure { position: relative; height: 7px; background: var(--fill); border: 1px solid var(--rule-strong); }
.hp-model-measure i {
  position: absolute; left: 28%; top: -3px; width: 36%; height: 11px;
  background: var(--blue-tint); border-inline: 1px solid var(--blue);
}
.hp-model-track small,
.hp-model-note { display: block; margin-top: 8px; font: 400 10px/1.45 var(--mono); color: var(--muted); }
.hp-model-separate { margin: 14px 0 0; text-align: center; overflow: hidden; }
.hp-model-separate span {
  position: relative; display: inline-block; padding-inline: 10px;
  font: 500 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue);
}
.hp-model-separate span::before,
.hp-model-separate span::after {
  content: ''; position: absolute; top: 50%; width: 120px; height: 1px; background: var(--rule-strong);
}
.hp-model-separate span::before { right: 100%; }
.hp-model-separate span::after { left: 100%; }
.hp-model-scenes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 14px; }
.hp-model-scenes i {
  display: block; height: 34px; background: var(--blue-tint);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.hp-model-scenes i:nth-child(3n + 2) { background: var(--marker-soft); }
.hp-model-note { margin-top: 14px; text-align: right; }
/* ---- content pages --------------------------------------------------------- */

.ct-hero {
  max-width: 720px; margin-inline: auto;
  padding: clamp(40px, 7vw, 72px) clamp(18px, 5vw, 44px) 0;
}
.ct-lede { margin-top: 16px; font: 400 19px/1.6 var(--serif); color: var(--pencil); }
.ct-body {
  max-width: 720px; margin-inline: auto;
  padding: 0 clamp(18px, 5vw, 44px) 72px;
}
.ct-sec { margin-top: 40px; }
.ct-sec h2 { margin-bottom: 16px; }
/* content.js's section('') helper emits an empty h2 on the utility pages. */
.ct-sec h2:empty { display: none; margin: 0; }
.ct-sec p { font: 400 17px/1.7 var(--serif); color: var(--ink); }
.ct-sec p + p { margin-top: 16px; }
.ct-sec strong { font-weight: 500; color: var(--ink-2); }
.ct-sec ul { list-style: none; margin: 16px 0 0; padding: 0; }
.ct-sec li {
  position: relative; padding-left: 20px; margin-top: 12px;
  font: 400 16px/1.6 var(--sans); color: var(--ink);
}
.ct-sec li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--pencil);
}
.ct-note { margin-top: 12px; font: 400 14.5px/1.6 var(--sans); color: var(--muted); }

.ct-table-wrap { margin-top: 20px; overflow-x: auto; }
.ct-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ct-table th,
.ct-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.ct-table thead th {
  font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--rule-strong);
}
.ct-table tbody th { font: 500 15px/1.5 var(--sans); color: var(--ink-2); }
.ct-table td { font: 400 15px/1.55 var(--sans); color: var(--pencil); }
.ct-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.ct-hist { margin-top: 20px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- member delivery schedule -------------------------------------------- */

.member-delivery {
  padding: clamp(22px, 4vw, 32px); background: var(--card);
  border: 1px solid var(--rule-strong); border-top: 3px solid var(--marker);
  border-radius: var(--radius-lg);
}
.ct-sec .member-delivery-kicker {
  margin: 0 0 8px; font: 500 10.5px/1.3 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--marker-ink);
}
.member-delivery h2 { margin: 0 0 12px; }
.member-delivery-control { margin-top: 20px; }
.member-action {
  min-height: 44px; padding: 11px 18px; border: 1px solid var(--blue-deep);
  border-radius: var(--radius); background: var(--blue); color: var(--card);
  font: 700 14.5px/1.2 var(--sans); cursor: pointer;
}
.member-action:hover { background: var(--blue-hover); }
.member-action.is-secondary {
  background: var(--card); color: var(--blue-deep); border-color: var(--blue);
}
.member-action.is-secondary:hover { background: var(--blue-tint); }
.ct-sec .member-delivery-alert {
  margin-top: 18px; padding: 12px 14px; background: var(--marker-soft);
  border: 1px solid var(--marker); border-radius: var(--radius);
  font: 400 14px/1.55 var(--sans); color: var(--marker-ink);
}
.member-delivery-list {
  list-style: none; margin: 24px 0 0; padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.ct-sec .member-delivery-list li {
  display: grid; grid-template-columns: 12px minmax(140px, .8fr) minmax(180px, 1.2fr);
  gap: 12px; align-items: center; margin: 0; padding: 13px 0;
  border-bottom: 1px solid var(--rule); font-family: var(--sans);
}
.ct-sec .member-delivery-list li::before { display: none; }
.member-delivery-mark {
  width: 9px; height: 9px; border: 1.5px solid var(--pencil); border-radius: 50%;
}
.is-sent .member-delivery-mark { background: var(--good); border-color: var(--good); }
.is-waiting .member-delivery-mark { background: var(--marker); border-color: var(--marker-ink); }
.is-past .member-delivery-mark { border-color: var(--rule-strong); }
.member-delivery-name { font: 700 14.5px/1.4 var(--sans); color: var(--ink-2); }
.member-delivery-status {
  font: 500 11.5px/1.45 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums;
}

@media (max-width: 540px) {
  .ct-sec .member-delivery-list li {
    grid-template-columns: 12px minmax(0, 1fr); gap: 3px 10px;
  }
  .member-delivery-mark { grid-row: 1 / span 2; }
  .member-delivery-status { grid-column: 2; }
}

/* ---- the sample report preview -------------------------------------------- */
/* This is an annotated buying preview, not a fake participant. Real report
   copy and component structure replace the previous hatched blanks, which read
   as a loading failure even when their explanation was technically accurate. */
.ct-sec .ct-sample-banner {
  margin-top: 18px; padding: 14px 16px;
  background: var(--marker-soft); border: 1px solid var(--marker);
  border-radius: var(--radius);
  font: 400 15px/1.6 var(--sans); color: var(--marker-ink); max-width: 68ch;
}
.ct-preview-cover {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr);
  gap: clamp(24px, 5vw, 56px); align-items: end; padding: clamp(24px, 5vw, 48px);
  background: var(--ink); color: var(--paper); border-radius: var(--radius-lg);
}
.ct-preview-cover h2 { margin-top: 10px; color: var(--paper); font-size: clamp(27px, 4vw, 42px); }
.ct-sec .ct-preview-cover p { color: var(--paper); }
.ct-preview-kicker,
.ct-sec .ct-preview-kicker {
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.ct-preview-cover .ct-preview-kicker { color: var(--marker); }
.ct-preview-cover-meta { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pencil); }
.ct-preview-cover-meta li {
  padding: 10px 0; border-bottom: 1px solid var(--pencil);
  font: 500 13px/1.45 var(--sans); color: var(--paper);
}

.ct-preview-chapters {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-top: 20px;
}
.ct-preview-chapters article {
  padding: 18px; background: var(--card); border: 1px solid var(--rule);
  border-top: 3px solid var(--marker); border-radius: var(--radius-lg);
}
.ct-preview-chapters article > span,
.ct-preview-number {
  font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--marker-ink);
}
.ct-preview-chapters h3 { margin-top: 12px; font: 600 18px/1.35 var(--serif); color: var(--ink-2); }
.ct-sec .ct-preview-chapters p { margin-top: 8px; font: 400 14.5px/1.55 var(--sans); color: var(--muted); }

.ct-preview-facets { list-style: none; margin: 20px 0 0; padding: 0; }
.ct-preview-facet {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px;
  padding: 20px 0; border-top: 1px solid var(--rule);
}
.ct-preview-facet:last-child { border-bottom: 1px solid var(--rule); }
.ct-preview-facet h3 { margin: 0; font: 600 19px/1.35 var(--serif); color: var(--ink-2); }
.ct-sec .ct-preview-facet > div > p:last-of-type { margin-top: 8px; font: 400 15px/1.55 var(--sans); color: var(--ink); }
.ct-preview-includes {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0;
}
.ct-preview-includes li {
  padding: 5px 8px; background: var(--fill); border: 1px solid var(--rule);
  border-radius: var(--radius); font: 500 10.5px/1.2 var(--sans); color: var(--muted);
}

.ct-preview-reading,
.ct-preview-practice {
  margin-top: 18px; padding: clamp(20px, 4vw, 30px);
  background: var(--card); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
}
.ct-preview-reading h3,
.ct-preview-practice h3 { margin-top: 10px; font: 600 24px/1.3 var(--serif); color: var(--ink-2); }
.ct-sec .ct-preview-placeholder {
  margin-top: 16px; padding: 12px 14px; background: var(--fill); border-left: 3px solid var(--marker);
  font: 400 14px/1.55 var(--sans); color: var(--muted);
}
.ct-preview-contexts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ct-preview-contexts > div { padding: 14px 16px; background: var(--fill); border: 1px solid var(--rule); border-radius: var(--radius); }
.ct-sec .ct-preview-contexts p:last-child { margin-top: 7px; font: 400 14px/1.55 var(--sans); color: var(--ink); }
.ct-sec .ct-preview-edge { margin-top: 18px; color: var(--muted); font-style: italic; }

.ct-preview-flow { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.ct-preview-flow li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
}
.ct-preview-flow li > span { font: 500 10px/1.6 var(--mono); color: var(--marker-ink); }
.ct-preview-flow strong { font: 700 15px/1.4 var(--sans); color: var(--ink-2); }
.ct-sec .ct-preview-flow p { margin-top: 4px; font: 400 14px/1.5 var(--sans); color: var(--muted); }

.ct-preview-practice { border-top: 3px solid var(--marker); }
.ct-preview-timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.ct-preview-timeline li {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid var(--rule);
}
.ct-preview-timeline li:last-child { border-bottom: 1px solid var(--rule); }
.ct-preview-timeline span { font: 500 10.5px/1.5 var(--mono); color: var(--marker-ink); text-transform: uppercase; }
.ct-preview-timeline strong { font: 700 14.5px/1.45 var(--sans); color: var(--ink-2); }

@media (max-width: 640px) {
  .ct-preview-cover,
  .ct-preview-chapters,
  .ct-preview-contexts { grid-template-columns: 1fr; }
  .ct-preview-cover { align-items: start; }
}
@media (max-width: 420px) {
  .ct-preview-timeline { border-top: 1px solid var(--rule); }
  .ct-preview-timeline li { grid-template-columns: 1fr; gap: 3px; }
}

/* ---- FAQ (was faq.css, now folded in) --------------------------------------- */

.faq { margin-top: 32px; border-top: 1px solid var(--rule-strong); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 32px 18px 0; position: relative;
  font: 600 18px/1.4 var(--serif); color: var(--ink-2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: 400 24px/1 var(--sans); color: var(--muted);
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-a { padding: 0 0 20px; }
.faq-a p { font: 400 16px/1.7 var(--serif); color: var(--pencil); }

/* ---- responsive ------------------------------------------------------------- */

@media (max-width: 880px) {
  .hpv3-burger { display: flex; }
  .hpv3-header-in { position: relative; min-height: 68px; }
  .hpv3-brand { min-height: 48px; font-size: 22px; }
  .hpv3-brand-mark { width: 32px; height: 32px; }
  .hpv3-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto;
    background: var(--card); border-bottom: 1px solid var(--rule-strong);
    padding: 14px clamp(18px, 4vw, 40px) 20px;
  }
  .hpv3-nav.open { display: flex; }  /* v3-nav.js toggles "open", not "is-open" */
  .hpv3-nav-primary {
    display: flex; align-items: center; justify-content: center; min-height: 48px;
    margin-bottom: 10px; padding: 12px 16px; background: var(--marker);
    border: 1px solid var(--gold-ink); border-radius: var(--radius);
    color: var(--ink-panel); font: 700 15px/1.2 var(--sans); text-decoration: none;
  }
  .hpv3-nav-primary:hover { background: var(--gold-bright); color: var(--ink-panel); text-decoration: none; }
  .hpv3-nav-group { border-bottom: 1px solid var(--rule); }
  .hpv3-nav-trigger {
    width: 100%; min-height: 52px; justify-content: space-between; padding: 0 6px;
    border-bottom: 0; color: var(--ink-2); font-size: 15.5px;
  }
  .hpv3-nav-trigger:hover,
  .hpv3-nav-trigger[aria-expanded='true'],
  .hpv3-nav-group.is-current .hpv3-nav-trigger { border-bottom-color: transparent; }
  .hpv3-nav-menu {
    position: static; width: auto; padding: 4px 0 10px; transform: none;
    background: var(--fill); border: 0; border-radius: var(--radius); box-shadow: none;
  }
  .hpv3-nav-item { margin: 0; padding: 10px 12px; }
  .hpv3-nav-item:hover { background: var(--card-tint); }
  .hpv3-header .hpv3-cta { display: none; }
  .hpv3-foot-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Neutralises any inherited lift; nothing here transforms on press anyway,
     because feedback is a background-colour step that is complete at t=0. */
  .hpv3-cta,
  .hpv3-cta:hover,
  .hpv3-cta:active { transform: none; }
}

/* The soft-launch announcement bar, above the header, on the ink panel. */
.hpv3-announce {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  padding: 11px 24px; background: var(--ink-panel); color: var(--paper-on-dark);
  font: 400 13.5px/1.45 var(--sans); text-align: center;
}
.hpv3-announce-pill {
  flex: none; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--marker); color: var(--ink-panel);
  font: 700 11px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase;
}
.hpv3-announce a { color: var(--paper-on-dark); text-decoration: underline; text-underline-offset: 3px; opacity: .82; }
.hpv3-announce a:hover { opacity: 1; color: var(--paper-on-dark); }

/* ---- homepage -------------------------------------------------------------- */
/* The landing page copies the structure of the Hyros home page (owner
   decision, 2026-08-25; the DataScoop home page follows the same shape) and
   is reworded for one job, starting the free test. A rounded purple hero card
   with a two-colour headline, a four-step chain in glass tiles, check marks,
   a ghost pill beside a filled one and one line of proof; a "pick what
   brought you here" grid of cream cards that all end in the same action; a
   dark method panel holding the two-track figure; and a closing purple offer
   card. Every figure and price is derived, and no card invents a result. */

.hp-wrap {
  max-width: 1220px; margin-inline: auto;
  padding: 18px clamp(14px, 3vw, 20px) clamp(48px, 7vw, 80px);
}

/* The coloured cards. --paper-on-dark and the glass tokens are the only
   pairing used on the purple and ink fields: page-relative greys would read
   wrong there. */
.hp-card {
  position: relative; overflow: hidden; text-align: center;
  background: var(--blue); color: var(--paper-on-dark);
  border-radius: var(--radius-xl);
  padding: clamp(40px, 5.5vw, 60px) clamp(20px, 4vw, 48px) clamp(36px, 4.5vw, 48px);
}
.hp-card p { margin-inline: auto; }
.hp-card a:not(.hp-pill) { color: var(--paper-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.hp-card a:not(.hp-pill):hover { color: var(--gold-bright); }
.hp-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--glass-line); pointer-events: none;
}
.hp-dot--1 { left: 6%; top: 12%; }
.hp-dot--2 { right: 9%; top: 22%; width: 5px; height: 5px; background: var(--gold-bright); }
.hp-dot--3 { left: 12%; bottom: 18%; width: 4px; height: 4px; }
.hp-dot--4 { right: 14%; bottom: 14%; background: var(--gold-bright); }
.hp-gold { display: block; color: var(--gold-bright); }
.hp-label {
  font: 700 11.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-blue-soft);
}

/* Pills on the coloured cards. Scoped under .hp-card so they outrank the
   (0,1,1) `.hpv3 a` colour rule that once silently beat a bare CTA class. */
.hp-ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 26px auto 0; max-width: none;
}
.hp-card .hp-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 16px 34px;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  font: 700 16px/1 var(--sans); text-decoration: none; white-space: nowrap;
}
.hp-card .hp-pill--accent { background: var(--marker); color: var(--ink-panel); box-shadow: var(--shadow-cta); }
.hp-card .hp-pill--accent:hover { background: var(--gold-bright); color: var(--ink-panel); }
.hp-card .hp-pill--ghost { background: transparent; color: var(--paper-on-dark); border-color: var(--glass-line); }
.hp-card .hp-pill--ghost:hover { border-color: var(--paper-on-dark); color: var(--paper-on-dark); }
.hp-card .hp-pill--white { background: var(--card); color: var(--blue); }
.hp-card .hp-pill--white:hover { background: var(--card-tint); color: var(--blue-deep); }

/* The hero. */
.hp-hero h1 {
  margin-inline: auto; max-width: 24ch;
  font: 800 clamp(30px, 4.3vw, 48px)/1.1 var(--display);
  letter-spacing: -.03em; color: var(--paper-on-dark);
}
.hp-chain {
  list-style: none; margin: 34px auto 0; padding: 0; max-width: 940px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 34px;
}
.hp-chain li {
  position: relative; min-height: 100px; padding: 16px 12px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 14px;
  font: 700 12.5px/1.3 var(--sans); color: var(--paper-on-dark);
}
.hp-chain li + li::before {
  content: '\2192'; position: absolute; left: -27px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--on-blue-soft);
}
.hp-chain svg {
  width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.hp-chain svg .ac { stroke: var(--gold-bright); stroke-width: 2.2; }
.hp-checks {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px;
  font: 600 13.5px/1.3 var(--sans);
}
.hp-checks li { display: inline-flex; align-items: center; gap: 7px; }
.hp-ck {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 15px; height: 15px; border-radius: 3px;
  background: var(--good-bright); color: var(--ink-panel); font: 700 10px/1 var(--sans);
}
.hp-quote {
  margin-top: 26px; max-width: 62ch;
  font: 600 italic 14px/1.5 var(--sans); color: var(--paper-on-dark);
}
.hp-quote strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hp-counter strong { color: var(--gold-bright); }
.hp-attr {
  margin-top: 6px; font: 700 11.5px/1.6 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-blue-soft);
}
.hp-reviewer { margin-top: 10px; font: 400 13.5px/1.5 var(--sans); color: var(--on-blue-soft); }
.hp-reviewer strong { font-weight: 700; }

/* "Pick what brought you here": the cream reason cards. */
.hp-uc-head { text-align: center; padding: clamp(56px, 8vw, 92px) 0 30px; }
.hp-uc-head h2 {
  margin-inline: auto; max-width: 26ch;
  font: 800 clamp(28px, 4vw, 44px)/1.15 var(--display);
  letter-spacing: -.03em; color: var(--ink-2);
}
.hp-uc-head p { margin: 12px auto 0; font: 700 15px/1.5 var(--sans); color: var(--ink); }
.hp-uc-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.hp-uc {
  padding: 32px 28px 26px; background: var(--card-tint); border-radius: var(--radius-lg);
  display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; align-items: center;
}
.hp-uc-copy { min-width: 0; }
.hp-uc h3 { font: 800 30px/1.1 var(--display); letter-spacing: -.02em; color: var(--ink-2); }
.hp-uc-sub { margin-top: 10px; font: 400 15.5px/1.45 var(--sans); color: var(--ink-2); }
.hp-uc-q { margin-top: 18px; font: italic 400 13px/1.55 var(--sans); color: var(--muted); }
.hp-uc-who { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.hp-uc-av {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-panel); color: var(--card); font: 700 10px/1 var(--mono);
}
.hp-uc-av--self { background: var(--facet-self); }
.hp-uc-av--composure { background: var(--facet-composure); }
.hp-uc-av--attunement { background: var(--facet-attunement); }
.hp-uc-av--repair { background: var(--facet-repair); }
.hp-uc-av--drive { background: var(--facet-drive); }
.hp-uc-who b { display: block; font: 700 12.5px/1.3 var(--sans); color: var(--ink-2); }
.hp-uc-who span { display: block; font: 400 10.5px/1.3 var(--sans); color: var(--muted); }
.hp-uc .hpv3-cta { margin-top: 22px; padding: 12px 26px; font-size: 15px; }
/* The report excerpt beside each card lists the SECTIONS the report holds for
   that reason. Names only, never a value, so it cannot read as a result. */
.hp-uc-vis {
  align-self: center; overflow: hidden; text-align: left;
  padding: 14px; background: var(--ink-panel); color: var(--paper-on-dark);
  border-radius: 14px; font: 400 10.5px/1.75 var(--mono);
}
.hp-uc-vis .h { display: block; color: var(--faint); }
.hp-uc-vis .r { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.hp-uc-vis .r i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.hp-uc-vis .r--self i { background: var(--facet-self); }
.hp-uc-vis .r--composure i { background: var(--facet-composure); }
.hp-uc-vis .r--attunement i { background: var(--facet-attunement); }
.hp-uc-vis .r--repair i { background: var(--facet-repair); }
.hp-uc-vis .r--drive i { background: var(--facet-drive-ink); }
.hp-uc-vis .f { display: block; margin-top: 4px; color: var(--faint); }

/* The method panel: the one argument the product rests on, beside the owned
   two-track figure. */
.hp-method {
  margin-top: 18px; text-align: left; background: var(--ink-panel);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: clamp(28px, 5vw, 56px); align-items: center;
  padding: clamp(36px, 5vw, 56px) clamp(22px, 4vw, 48px);
}
.hp-method .hp-label { margin-inline: 0; color: var(--marker); }
.hp-method h2 {
  margin-top: 12px; font: 800 clamp(26px, 3.2vw, 36px)/1.15 var(--display);
  letter-spacing: -.025em; color: var(--paper-on-dark);
}
.hp-method-copy > p:not(.hp-label) {
  margin: 14px 0 0; max-width: 56ch;
  font: 400 15.5px/1.6 var(--sans); color: var(--on-blue-soft);
}
.hp-method .hp-pill { margin-top: 22px; }

/* The closing offer card. The mark is the cream variant (src/brand.js), the
   identity's rule for the purple field. */
.hp-deal { margin-top: clamp(56px, 8vw, 92px); }
.hp-deal-mark { display: block; width: 84px; height: 84px; margin: 0 auto 14px; }
.hp-deal h2 {
  margin: 14px auto 0; max-width: 22ch;
  font: 800 clamp(32px, 5vw, 54px)/1.08 var(--display);
  letter-spacing: -.03em; color: var(--paper-on-dark);
}
.hp-deal-sub {
  margin-top: 16px; max-width: 46ch;
  font: 700 clamp(17px, 2vw, 20px)/1.4 var(--sans); color: var(--paper-on-dark);
}
.hp-micro { margin-top: 14px; max-width: 66ch; font: 400 12.5px/1.6 var(--sans); color: var(--on-blue-soft); }

@media (max-width: 960px) {
  .hp-card { border-radius: var(--radius-lg); }
  .hp-chain { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hp-chain li + li::before { display: none; }
  .hp-uc-grid { grid-template-columns: 1fr; }
  .hp-uc { grid-template-columns: 1fr; }
  .hp-uc-vis { display: none; }
  .hp-method { grid-template-columns: 1fr; }
  .hp-model { max-width: 560px; }
}
@media (max-width: 520px) {
  .hp-chain { grid-template-columns: 1fr; }
  .hp-card .hp-pill { width: 100%; }
}