/*
  CXO Republic site styles, v2 (Noir and gold), 2026-10-14.
  Uses only the design system tokens in tokens.css (a copy of 08 Brand/tokens.css).
  Rules: 07 Wiki/Brand System.md. Noir ground, vignette behind key sections,
  gold text gradient for display and headline only (24px and up),
  gold-deep for gold at body size, black text on gold fills.
  The only gradients used: --gold-text-gradient, --gold-fill-gradient, --vignette.
*/

/* ---------- Base ---------- */

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--gold-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--gold-light);
}

::selection {
  background: var(--gold);
  color: var(--on-gold);
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
}

p {
  margin: 0 0 var(--space-sm);
  max-width: var(--measure);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

strong {
  font-weight: 500;
}

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

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  z-index: 100;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--gold-fill-gradient);
  color: var(--on-gold);
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-sm);
  color: var(--on-gold);
}

.mt-md {
  margin-top: var(--space-md);
}

.muted {
  color: var(--ink-muted);
}

/* ---------- Type styles (design system) ---------- */

/* Gold text gradient. Only at 24px and larger, on surface. */
.display,
.headline,
.gold-text {
  width: fit-content;
  max-width: 100%;
  color: var(--gold);
  background-image: var(--gold-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.display {
  text-wrap: balance;
  font-size: var(--display-size);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.headline {
  text-wrap: balance;
  font-size: var(--headline-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.subtitle {
  margin-top: var(--space-xs);
  font-size: var(--subtitle-size);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}

.eyebrow {
  margin: 0 0 12px;
  font-size: var(--eyebrow-size);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.title {
  font-size: var(--title-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.numeral {
  font-family: var(--font-display);
  font-size: var(--numeral-size);
  font-weight: 200;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.caption {
  font-size: var(--caption-size);
  line-height: 20px;
  color: var(--ink-muted);
}

/* Visible placeholder text that Dez must replace before launch. */
.placeholder {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  color: var(--gold-deep);
}

.text-link {
  font-weight: 500;
}

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 400px) {
  .container {
    padding: 0 16px;
  }
}

.container--narrow {
  max-width: 820px;
}

.section {
  position: relative;
  padding: var(--space-lg) 0;
}

@media (min-width: 861px) {
  .section {
    padding: calc(var(--space-lg) * 1.5) 0;
  }
}

.section--vignette {
  background-color: var(--surface);
  background-image: var(--vignette);
}

.section-head {
  margin-bottom: var(--space-md);
}

.section-head .subtitle {
  max-width: var(--measure);
}

.split {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-lg);
    align-items: start;
  }
}

.grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 720px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--gold);
  background-image: var(--gold-fill-gradient);
  color: var(--on-gold);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.btn:hover {
  color: var(--on-gold);
  box-shadow: var(--glow-gold);
}

.btn--secondary {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold-deep);
}

.btn--secondary:hover {
  background: var(--gold-wash);
  color: var(--gold-light);
}

.btn--small {
  min-height: 40px;
  padding: 8px 20px;
  font-size: 0.8125rem;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin-top: var(--space-md);
}

@media (max-width: 480px) {
  .btn-row .btn {
    width: 100%;
  }
}

/* ---------- Header and nav ---------- */

.site-header {
  position: relative;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--gold-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
}

.brand img {
  width: auto;
  height: 18px;
}

@media (min-width: 600px) {
  .brand img {
    height: 20px;
  }
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav a:not(.btn) {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav a:not(.btn):hover {
  color: var(--gold-deep);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle__icon,
.nav-toggle__icon::before {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--gold);
  transition: transform 0.2s var(--ease);
}

.nav-toggle__icon {
  position: relative;
  box-shadow: 0 -5px 0 var(--gold);
}

.nav-toggle__icon::before {
  content: "";
  position: absolute;
  top: 5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  box-shadow: none;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  top: 0;
  transform: rotate(-90deg);
}

@media (max-width: 860px) {
  .js .nav-toggle {
    display: inline-flex;
  }

  .js .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--gold-line);
  }

  .js .nav.is-open {
    display: block;
  }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
  }

  .nav li a:not(.btn) {
    display: block;
    padding: 14px 0;
  }

  .nav li .btn {
    width: 100%;
    margin-top: 12px;
  }

  /* Without JavaScript the nav stays visible and wraps under the wordmark. */
  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
  }
}

/* ---------- Gold silk motif (decorative, corners only, never behind text) ---------- */

.has-silk {
  position: relative;
  overflow: hidden;
}

.has-silk > .container {
  position: relative;
  z-index: 1;
}

.silk {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  height: auto;
}

.silk__pearl {
  filter: drop-shadow(var(--glow-pearl));
}

/* The ribbons converge at one end (bottom left of the artwork). That end is always
   pushed past the section edge, so the lines sweep in from the edge as on the Cover. */

/* Top right, beside the text column on wide screens. Flipped so the lines enter from the top edge. */
.silk--tr {
  top: 0;
  right: -48px;
  width: min(46vw, 640px);
  transform: translateY(-18%) scaleY(-1);
}

/* Bottom right: the lines enter from the bottom edge. */
.silk--br {
  bottom: 0;
  right: -48px;
  width: min(46vw, 600px);
  transform: translateY(18%);
}

/* Wide screens: keep the text column clear of the silk. */
@media (min-width: 1024px) {
  .has-silk .silk-safe {
    max-width: min(600px, 46vw);
  }
}

/* Narrow screens: the silk moves below the content, with space reserved for it. */
@media (max-width: 1023px) {
  .hero.has-silk,
  .section.has-silk {
    padding-bottom: 260px;
  }
  .silk--tr,
  .silk--br {
    top: auto;
    bottom: 0;
    right: -60px;
    width: 440px;
    transform: translateY(18%);
  }
}

@media (max-width: 480px) {
  .hero.has-silk,
  .section.has-silk {
    padding-bottom: 196px;
  }
  .silk--tr,
  .silk--br {
    width: 300px;
  }
}

/* ---------- Hero ---------- */

.hero {
  padding-top: 88px;
  padding-bottom: var(--space-lg);
  background-color: var(--surface);
  background-image: var(--vignette);
}

@media (min-width: 1024px) {
  .hero {
    padding-top: 128px;
    padding-bottom: 120px;
  }
}

.hero__lead {
  margin-top: var(--space-md);
  font-size: 1.0625rem;
  line-height: 28px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-md);
  list-style: none;
}

.chips li {
  padding: 6px 16px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
  font-size: var(--eyebrow-size);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Panels and cards ---------- */

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.panel--featured {
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
}

.panel .title {
  margin-bottom: 12px;
}

.panel > p:last-child {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .panel {
    padding: 24px 20px;
  }
}

.pillar__tag {
  margin-bottom: var(--space-xs);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Offer ladder */
.offer .title {
  font-size: 1.25rem;
}

.offer__list {
  margin: 4px 0 var(--space-sm);
  list-style: none;
}

.offer__list li,
.checklist li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}

.offer__list li::before,
.checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}

.checklist {
  list-style: none;
}

.checklist--not li::before {
  top: 12px;
  width: 12px;
  height: 0;
  border-left: 0;
  border-bottom: 1.5px solid var(--ink-muted);
  transform: none;
}

.offer__meta {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--gold-line);
}

.offer__meta p {
  margin-bottom: 4px;
}

.offer__foot {
  margin-top: var(--space-sm);
}

.offer__foot .btn {
  width: 100%;
}

.ladder-note {
  margin-top: var(--space-md);
}

/* ---------- Numbered lists ---------- */

/* Problem list: small gold-deep numbers */
.ledger {
  list-style: none;
  border-top: 1px solid var(--gold-line);
}

.ledger li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-sm);
  padding: 20px 0;
  border-bottom: 1px solid var(--gold-line);
}

.ledger__num {
  padding-top: 2px;
  font-size: var(--eyebrow-size);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
}

.ledger p {
  margin: 0;
}

.ledger strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--title-size);
  letter-spacing: 0.02em;
}

/* Modules and deliverables: thin gold numerals */
.numbered {
  display: grid;
  gap: var(--space-md) var(--space-lg);
  list-style: none;
}

@media (min-width: 760px) {
  .numbered--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .numbered--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.numbered li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.numbered .numeral {
  min-width: 2ch;
}

.numbered .title {
  margin: 10px 0 6px;
}

.numbered p {
  margin: 0;
}

@media (max-width: 480px) {
  .numbered .numeral {
    font-size: 3rem;
  }
  .numbered .title {
    margin-top: 4px;
  }
}

/* ---------- Statement (key insight on gold-wash) ---------- */

.statement {
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  background: var(--gold-wash);
}

.statement p {
  margin: 0;
  font-size: var(--subtitle-size);
  font-weight: 300;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .statement {
    padding: 24px 20px;
  }
}

/* ---------- PromptBlock ---------- */

.prompt-block {
  margin: 0;
  display: grid;
  gap: 16px;
}

.prompt-block__part {
  padding: 24px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.prompt-block__part--output {
  background: var(--gold-wash);
}

@media (max-width: 480px) {
  .prompt-block__part {
    padding: 20px 18px;
  }
}

.prompt-block__label {
  margin: 0 0 12px;
  font-size: var(--eyebrow-size);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.prompt-block__text {
  font-family: var(--font-mono);
  font-size: var(--prompt-size);
  line-height: 24px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.prompt-block__text p {
  margin: 0 0 12px;
  max-width: none;
}

.prompt-block__text p:last-child {
  margin-bottom: 0;
}

/* ---------- Founder note ---------- */

.founder {
  display: grid;
  gap: var(--space-md);
  align-items: start;
}

@media (min-width: 760px) {
  .founder {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-lg);
  }
}

.founder__portrait {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  overflow: hidden;
  background: var(--surface-raised);
}

@media (min-width: 760px) {
  .founder__portrait {
    width: 200px;
    height: 200px;
  }
}

.founder__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signature {
  margin-top: var(--space-md);
  font-weight: 500;
}

.signature span {
  display: block;
  font-weight: 400;
  font-size: var(--caption-size);
  color: var(--ink-muted);
}

/* ---------- FAQ ---------- */

.faq {
  border-top: 1px solid var(--gold-line);
}

.faq details {
  border-bottom: 1px solid var(--gold-line);
}

.faq summary {
  position: relative;
  display: block;
  padding: 20px 48px 20px 0;
  font-size: var(--title-size);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--gold);
  transition: transform 0.2s var(--ease);
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] > summary::after {
  transform: rotate(0deg);
}

.faq summary:hover {
  color: var(--gold-deep);
}

.faq details > div {
  padding: 0 0 20px;
}

.faq details > div p:last-child {
  margin-bottom: 0;
}

/* ---------- Timeline ---------- */

.timeline {
  list-style: none;
  border-left: 1px solid var(--gold-line);
  margin-left: 6px;
}

.timeline li {
  position: relative;
  padding: 0 0 var(--space-md) 28px;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: var(--glow-pearl);
}

.timeline .eyebrow {
  margin-bottom: 4px;
}

.timeline .title {
  margin-bottom: 6px;
}

.timeline p:last-child {
  margin-bottom: 0;
}

/* Info rows: pills listing what we look at */
.info-rows {
  display: grid;
  gap: 12px;
  list-style: none;
}

.info-rows li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
}

.info-rows li span {
  font-size: var(--eyebrow-size);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
}

/* ---------- Forms ---------- */

.form {
  display: grid;
  gap: 20px;
  padding: var(--space-md);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--glow-gold);
}

@media (max-width: 480px) {
  .form {
    padding: 24px 20px;
  }
}

.form--plain {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.form-row {
  display: grid;
  gap: 20px;
}

@media (min-width: 600px) {
  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.field label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.field__optional {
  font-weight: 400;
  color: var(--ink-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--gold);
}

.field__hint {
  margin: 0;
  font-size: var(--caption-size);
  line-height: 20px;
  color: var(--ink-muted);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.form__fine,
.form__status {
  margin: 0;
  font-size: var(--caption-size);
  line-height: 20px;
  color: var(--ink-muted);
}

.form__status:empty {
  display: none;
}

/* ---------- Scorecard ---------- */

.scorecard {
  padding: var(--space-md);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  scroll-margin-top: 24px;
}

@media (max-width: 480px) {
  .scorecard {
    padding: 24px 18px;
  }
}

.scorecard h2 {
  margin-bottom: var(--space-sm);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.scorecard [tabindex="-1"]:focus {
  outline: none;
}

.scorecard__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
}

.scorecard__top .eyebrow {
  margin: 0;
}

.scorecard__area {
  color: var(--ink-muted);
}

.progress {
  height: 6px;
  margin: 16px 0 var(--space-md);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  overflow: hidden;
}

.progress__bar {
  width: 0;
  height: 100%;
  background: var(--gold-fill-gradient);
  transition: width 0.3s var(--ease);
}

.question {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.question legend {
  padding: 0;
  margin-bottom: var(--space-md);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
}

.scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.scale__option {
  position: relative;
  cursor: pointer;
}

.scale__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.scale__box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.scale__option:hover .scale__box {
  border-color: var(--gold);
}

.scale__option input:checked + .scale__box {
  border-color: var(--gold);
  background: var(--gold-fill-gradient);
  color: var(--on-gold);
}

.scale__option input:focus-visible + .scale__box {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.scale__ends {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-size: var(--caption-size);
  color: var(--ink-muted);
}

.scorecard__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: var(--space-md);
}

.result-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 var(--space-sm);
}

.result-score__num {
  font-size: 6rem;
  font-weight: 200;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.result-score__of {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--ink-muted);
}

.bands {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-md);
  list-style: none;
}

.bands li {
  display: flex;
  flex-direction: column;
  padding: 8px 18px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.bands li span {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

.bands li.is-active {
  border-color: var(--gold);
  background: var(--gold-wash);
  color: var(--gold-deep);
  box-shadow: var(--glow-gold);
}

.bands li.is-active span {
  color: var(--ink);
}

.area-bars {
  display: grid;
  gap: 14px;
  margin: var(--space-sm) 0 var(--space-md);
  list-style: none;
}

.area-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  grid-template-areas:
    "name value"
    "track track";
  gap: 6px 12px;
  align-items: center;
}

@media (min-width: 640px) {
  .area-bar {
    grid-template-columns: 220px minmax(0, 1fr) 40px;
    grid-template-areas: "name track value";
  }
}

.area-bar__name {
  grid-area: name;
  font-size: 0.9375rem;
}

.area-bar__track {
  grid-area: track;
  height: 8px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  overflow: hidden;
}

.area-bar__fill {
  display: block;
  height: 100%;
  background: var(--gold-fill-gradient);
}

.area-bar__value {
  grid-area: value;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.area-bar.is-weakest .area-bar__name {
  color: var(--gold-deep);
  font-weight: 500;
}

.result-panels {
  display: grid;
  gap: 16px;
  margin-bottom: var(--space-md);
}

.result-panels .panel {
  background: var(--surface);
}

.result-panels .panel--insight {
  background: var(--gold-wash);
}

.result-panels .title {
  margin-bottom: 8px;
}

/* ---------- Thank you ---------- */

.next-steps {
  list-style: none;
  margin: var(--space-md) 0;
  border-top: 1px solid var(--gold-line);
}

.next-steps li {
  padding: 20px 0;
  border-bottom: 1px solid var(--gold-line);
}

.next-steps p {
  margin: 0;
}

.next-steps strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--title-size);
}

/* ---------- Footer ---------- */

.site-footer {
  padding: var(--space-lg) 0 var(--space-md);
  border-top: 1px solid var(--gold-line);
  background: var(--surface);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 760px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

.site-footer__brand {
  display: inline-block;
}

.site-footer__brand img {
  width: auto;
  height: 20px;
}

.site-footer__tagline {
  margin: 16px 0 0;
  color: var(--ink-muted);
}

.site-footer nav ul {
  display: grid;
  gap: 10px;
  list-style: none;
}

.site-footer nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
}

.site-footer nav a:hover {
  color: var(--gold-deep);
  text-decoration: underline;
}

.site-footer__legal {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--gold-line);
}

.site-footer__legal p {
  margin: 0;
  font-size: var(--caption-size);
  color: var(--ink-muted);
}

.site-footer__legal a {
  color: var(--ink-muted);
}

/* ---------- Scroll reveal (site.js adds .is-visible) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Windows high contrast ---------- */

@media (forced-colors: active) {
  .display,
  .headline,
  .gold-text {
    -webkit-text-fill-color: CanvasText;
    background: none;
  }
  .btn {
    border-color: ButtonText;
  }
}

/* ---------- v3: prices and thank-you routing ---------- */

.offer__price {
  margin-bottom: 4px;
  font-size: 1.75rem; /* 28px, Jost 200, gold text is allowed at 24px+ */
  font-weight: 200;
  line-height: 1.2;
  color: var(--gold);
}



[data-next] {
  display: none;
}

[data-next].is-shown {
  display: block;
}

/* Home hero: the second half of the headline, set larger than a normal subtitle. */
.hero__tagline {
  margin-top: 12px;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--ink);
}