/* ---------------------------------------------------------------------- */
/* Tokens as CSS custom properties                                         */
/* ---------------------------------------------------------------------- */

:root {
  --color-charcoal: #20251F;
  --color-text-muted: #4A443C;
  --color-off-white: #FBF9F5;
  --color-white: #FFFFFF;
  --color-light-gray: #F5F1EA;
  --color-pale-green: #EFE9DF;
  --color-clay-500: #C2703D;
  --color-clay-600: #B4552A;
  --color-clay-750: #93421D;
  --color-clay-tint: #F6EADF;
  --color-pickle-tint: #E1E9CE;
  --color-pickle-500: #708B35;
  --color-pickle-700: #3F5423;
  --color-pickle-900: #2C3A18;
  --color-error: #9A3324;
  --color-error-bg: #F8EBE7;

  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-display-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --text-display-line-height: 1.05;
  --text-display-weight: 700;
  --text-display-tracking: -0.025em;

  --text-h1-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --text-h1-line-height: 1.1;
  --text-h1-weight: 700;
  --text-h1-tracking: -0.022em;

  --text-h2-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --text-h2-line-height: 1.18;
  --text-h2-weight: 700;

  --text-h3-size: 1.375rem;
  --text-h3-line-height: 1.3;
  --text-h3-weight: 600;

  --text-h4-size: 1.125rem;
  --text-h4-line-height: 1.4;
  --text-h4-weight: 600;

  --text-lead-size: 1.125rem;
  --text-lead-line-height: 1.6;
  --text-lead-weight: 400;

  --text-body-size: 1.0625rem;
  --text-body-line-height: 1.6;
  --text-body-weight: 400;

  --text-small-size: 0.875rem;
  --text-small-line-height: 1.5;
  --text-small-weight: 400;

  --text-micro-size: 0.75rem;
  --text-micro-line-height: 1.5;
  --text-micro-weight: 500;
  --text-micro-tracking: 0.02em;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-pill: 999px;

  --shadow-elevated: 0 8px 24px -6px rgba(32, 37, 31, 0.18);
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--color-clay-500) var(--color-light-gray);
  scrollbar-width: thin;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  padding-inline-start: 1.25em;
}

::selection {
  background-color: var(--color-pickle-tint);
  color: var(--color-charcoal);
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  font-weight: var(--text-body-weight);
  color: var(--color-charcoal);
  background-color: var(--color-off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  max-width: 70ch;
}

small,
.text-small {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
}

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

.text-micro {
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-line-height);
  font-weight: var(--text-micro-weight);
  letter-spacing: var(--text-micro-tracking);
}

.lead {
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-line-height);
  color: var(--color-charcoal);
  max-width: 60ch;
}

/* ---------------------------------------------------------------------- */
/* Headings                                                                */
/* ---------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--color-charcoal);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-tracking);
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--text-h2-weight);
}

h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
}

h4,
h5,
h6 {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  font-weight: var(--text-h4-weight);
}

.text-display {
  font-family: var(--font-display);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line-height);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-tracking);
  color: var(--color-charcoal);
  text-wrap: balance;
}

/* ---------------------------------------------------------------------- */
/* Links                                                                   */
/* ---------------------------------------------------------------------- */

a {
  color: var(--color-pickle-700);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
  transition: color 160ms ease-out;
}

a:hover {
  color: var(--color-pickle-900);
}

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

.container {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-narrow {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 40rem) {
  .container,
  .container-narrow {
    padding-inline: var(--space-xl);
  }
}

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

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  padding: 0.9375rem 1.625rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 160ms ease-out,
    border-color 160ms ease-out,
    color 160ms ease-out,
    transform 80ms ease-out;
  user-select: none;
}

@media (min-width: 40rem) {
  .btn {
    width: auto;
  }
}

.btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.btn-primary {
  background-color: var(--color-clay-600);
  color: var(--color-white);
  border-color: var(--color-clay-600);
}

.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-clay-750);
  border-color: var(--color-clay-750);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-pickle-700);
  border-color: var(--color-pickle-700);
}

.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-pale-green);
}

.btn-secondary:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-pickle-tint);
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: var(--space-lg);
}

.field > label {
  font-size: var(--text-small-size);
  font-weight: 600;
  color: var(--color-charcoal);
}

.field-hint {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.field-error {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-small-size);
  font-weight: 600;
  color: var(--color-error);
}

input,
select,
textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-charcoal);
  background-color: var(--color-white);
  /* A neutral hairline at rest. Green outlining every field was the last
     place the brand colour was doing decoration rather than signalling; it
     now appears on focus, where it means something. */
  border: 1px solid color-mix(in srgb, var(--color-charcoal) 22%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-variant-numeric: tabular-nums;
  caret-color: var(--color-pickle-700);
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-pickle-700);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--color-light-gray);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

/* Large tappable single/multi-choice options (the assessment's core control).
   A visually-hidden native radio/checkbox drives a styled sibling, so the
   control stays keyboard- and screen-reader-operable without JS owning the
   visual state. */

.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.choice-face {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-height: 3.5rem;
  padding: 1rem 1.25rem 1rem 1.125rem;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-charcoal) 16%, transparent);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  transition:
    background-color 140ms ease-out,
    border-color 140ms ease-out;
}

.choice-face .choice-label {
  font-weight: 600;
  color: var(--color-charcoal);
}

.choice-face .choice-sub {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.choice:hover .choice-face {
  border-color: var(--color-pickle-700);
}

.choice-face:hover {
  border-left-color: var(--color-clay-500);
  background-color: var(--color-off-white);
}

.choice-input:checked + .choice-face {
  background-color: var(--color-pickle-tint);
  border-color: color-mix(in srgb, var(--color-pickle-700) 38%, transparent);
  border-left-color: var(--color-pickle-700);
}

.choice-input:focus-visible + .choice-face {
  outline: 2px solid var(--color-pickle-700);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Focus                                                                   */
/* ---------------------------------------------------------------------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-pickle-700);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------- */
/* Motion                                                                  */
/* ---------------------------------------------------------------------- */

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


:root{--hairline:color-mix(in srgb, var(--color-charcoal) 12%, transparent);--wrap:74rem}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--color-pickle-900);color:var(--color-white);padding:.75rem 1.25rem;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--space-lg)}
.wrap-narrow{width:100%;max-width:46rem;margin-inline:auto;padding-inline:var(--space-lg)}

.site-header{border-bottom:1px solid var(--hairline);background:var(--color-off-white);position:sticky;top:0;z-index:30}
.header-inner{display:flex;align-items:center;gap:var(--space-xl);min-height:4.25rem}
/* The wordmark is real HTML in the display face, not text baked into the SVG:
   an SVG loaded through <img> cannot reach the page's webfonts, so a drawn
   wordmark would silently fall back to whatever serif the device happens to
   have. */
.brand{display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;text-decoration:none}
.brand img{display:block;height:1.875rem;width:auto}
.brand-word{font-family:var(--font-display);font-weight:700;font-size:1.375rem;letter-spacing:-0.015em;color:var(--color-charcoal);line-height:1}
.site-nav{display:none;gap:var(--space-xl);margin-inline-start:auto}
.site-nav a{color:var(--color-charcoal);text-decoration:none;font-size:var(--text-small-size);font-weight:500;padding-block:.5rem;border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:var(--color-pickle-500)}
/* The base .btn is deliberately full-width on mobile, which is right for a
   page CTA and wrong for this one — in the header it has to sit beside the
   wordmark, not swallow the row. */
/* Hidden on phones: the hero's own CTA sits within the same screen, and two
   identical buttons above the fold is filler, not emphasis. The base .btn is
   deliberately full-width on mobile, which is right for a page CTA and wrong
   for this one. */
.header-cta{display:none;margin-inline-start:auto;width:auto;flex:0 0 auto;padding-inline:var(--space-md);font-size:var(--text-small-size);white-space:nowrap}
@media(min-width:40rem){.header-cta{display:inline-flex}}
@media(min-width:56rem){.site-nav{display:flex}.header-cta{margin-inline-start:0}}

.section{padding-block:var(--space-3xl)}
.section-tint{background:var(--color-pickle-tint)}
.section-pale{background:var(--color-pale-green)}
.section-head{max-width:42rem;margin-bottom:var(--space-2xl)}
.section-head > p{color:var(--color-text-muted);margin-top:var(--space-sm)}

.site-footer{margin-top:var(--space-4xl);border-top:1px solid var(--hairline);background:var(--color-light-gray);padding-block:var(--space-2xl)}
.footer-top{display:flex;gap:var(--space-md);align-items:flex-start;max-width:46rem}
.footer-top img{flex:0 0 auto;margin-top:.2rem}
.footer-blurb{color:var(--color-text-muted);font-size:var(--text-small-size);line-height:var(--text-small-line-height);margin:0}
.footer-nav{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl);margin-block:var(--space-2xl) var(--space-xl);padding-top:var(--space-xl);border-top:1px solid var(--hairline)}
.footer-nav a{color:var(--color-charcoal);text-decoration:none;font-size:var(--text-small-size)}
.footer-nav a:hover{text-decoration:underline}
.footer-legal{color:var(--color-text-muted);font-size:var(--text-micro-size);line-height:1.65;margin:0;max-width:62rem}
.footer-legal a{color:var(--color-pickle-700)}

.legal{max-width:46rem;padding-block:var(--space-2xl) var(--space-3xl)}
.legal-head{margin-bottom:var(--space-2xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--hairline)}
.legal-updated{color:var(--color-text-muted);font-size:var(--text-small-size);margin-top:var(--space-xs)}
.legal-intro{margin-top:var(--space-md);font-size:var(--text-lead-size);line-height:var(--text-lead-line-height)}
.legal section{margin-bottom:var(--space-2xl)}
.legal h2{font-size:var(--text-h3-size);margin-bottom:var(--space-sm)}
.legal p{margin-bottom:var(--space-md);line-height:1.7}
.legal ul{margin:0 0 var(--space-md);padding-inline-start:1.25rem}
.legal li{margin-bottom:var(--space-xs);line-height:1.65}


.home-hero{padding-block:var(--space-3xl) 0;overflow:hidden}
.home-hero-row{display:flex;flex-direction:column}
.home-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-lg);padding-inline:var(--space-lg);padding-block:0 var(--space-2xl)}
.home-hero-title{margin:0}
.home-hero-accent{display:block;color:var(--color-pickle-500)}
.home-hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm)}
.home-hero-meta{margin:0}
.home-hero-media img{display:block;width:100%;height:auto}

.home-topic-list{list-style:none;margin:0;padding:0}
.home-topic-row{display:flex;flex-direction:column;gap:var(--space-xs);padding-block:var(--space-lg);border-bottom:1px solid var(--hairline)}
.home-topic-row:first-child{padding-top:0}
.home-topic-row:last-child{border-bottom:none;padding-bottom:0}
.home-topic-title{margin:0}
.home-topic-body{display:flex;flex-direction:column;gap:var(--space-xs)}
.home-topic-sub{margin:0;color:var(--color-text-muted)}
.home-topic-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-lg);margin-top:var(--space-xs)}
.home-topic-cta{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--color-clay-750)}
.home-topic-more{display:inline-flex;align-items:center;min-height:44px;font-size:var(--text-small-size)}

.home-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.home-step{display:flex;align-items:flex-start;gap:var(--space-lg);padding-block:var(--space-lg);border-bottom:1px solid var(--hairline)}
.home-step:first-child{padding-top:0}
.home-step:last-child{border-bottom:none;padding-bottom:0}
.home-step-num{flex:0 0 auto;width:2.5rem;font-family:var(--font-display);font-weight:700;font-size:1.75rem;line-height:1;color:var(--color-pickle-500)}
.home-step-body{display:flex;flex-direction:column;gap:var(--space-xs)}
.home-step-body h3{margin:0}
.home-step-body p{margin:0;color:var(--color-text-muted)}

.home-honesty-section{padding-block:var(--space-4xl)}
.home-honesty h2{margin-bottom:var(--space-md)}
.home-honesty p{margin-bottom:var(--space-lg)}
.home-honesty-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:var(--text-small-size)}

.home-closing-band{background:var(--color-clay-tint)}
.home-closing{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);text-align:center}
.home-closing-actions{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}
.home-closing p{margin:0}

@media(min-width:40rem){
  .home-topic-row{flex-direction:row;align-items:flex-start;gap:var(--space-xl);padding-block:var(--space-xl)}
  .home-topic-title{flex:0 0 16rem}
  .home-topic-body{flex:1 1 auto}

  .home-step{gap:var(--space-xl)}
  .home-step-num{width:3rem;font-size:2.25rem}
}

@media(min-width:64rem){
  .home-hero{padding-block:var(--space-4xl) 0}
  .home-hero-row{flex-direction:row;align-items:center;gap:var(--space-3xl)}
  .home-hero-copy{flex:0 1 34rem;padding-inline:max(var(--space-lg), calc((100vw - 74rem) / 2 + var(--space-lg))) 0;padding-block:0}
  .home-hero-media{flex:1 1 26rem;min-width:0}
}


.category-head{padding-block:var(--space-2xl) var(--space-xl);border-bottom:1px solid var(--hairline)}
.category-head .lead{margin-top:var(--space-md)}

.category-media img{display:block;width:100%;height:clamp(13rem, 34vw, 23rem);object-fit:cover}

.category-sections{padding-block:var(--space-xl) var(--space-2xl)}
.category-sections section{margin-bottom:var(--space-2xl)}
.category-sections section:last-child{margin-bottom:0}
.category-sections h2{font-size:var(--text-h3-size);margin-bottom:var(--space-sm)}
.category-sections p{margin-bottom:var(--space-md);line-height:1.7}
.category-sections p:last-child{margin-bottom:0}

.category-cta-band{background:var(--color-clay-tint);text-align:center}
.category-cta{display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}
.category-cta p{max-width:38rem}


.assess{padding-block:var(--space-2xl) var(--space-3xl)}

.a-progress{margin-bottom:var(--space-xl)}
.a-progress-text{margin:0 0 var(--space-sm);font-size:var(--text-small-size);color:var(--color-text-muted);font-weight:600}
.a-progress-bar{height:var(--space-xs);border-radius:var(--radius-pill);background:var(--color-pale-green);overflow:hidden}
.a-progress-bar-fill{height:100%;background:var(--color-pickle-500);border-radius:var(--radius-pill);transition:width 260ms ease-out}

/* The one authored transition, applied to the freshly-inserted wrapper on
   every render. prefers-reduced-motion is already handled globally in
   styles.ts (it forces every animation/transition duration to ~0), so this
   needs no local media query of its own. */
.a-fade{animation:a-fade-in 260ms ease-out}
@keyframes a-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.a-question{border:0;margin:0;padding:0;min-width:0}
.a-legend{display:block;width:100%;padding:0;font-family:var(--font-display);font-size:var(--text-h2-size);line-height:var(--text-h2-line-height);font-weight:700;color:var(--color-charcoal);margin-bottom:var(--space-lg);text-wrap:balance}
.a-help{color:var(--color-text-muted);margin-bottom:var(--space-lg)}

.a-question .choice-list{margin-bottom:var(--space-lg)}
.a-question .choice-face{min-height:3.5rem}
.a-question select,
.a-question input[type="text"]{margin-bottom:var(--space-md)}

/* Continue/Submit is always the FIRST child (dominant: full-width, filled)
   and Back the second (quiet: see .a-back). Column stacking on mobile means
   the DOM order alone puts Back below Continue, never above it. */
.a-actions{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-xl)}
.a-actions .btn{width:100%}
@media(min-width:40rem){
  .a-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--space-lg)}
  .a-actions .btn{width:auto;min-width:12rem}
}

/* A real button — 44px target — styled as quiet text, never competing with
   the primary action's visual weight. */
.a-back{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-height:44px;padding:0 var(--space-sm);background:none;border:0;color:var(--color-text-muted);font-size:var(--text-small-size);font-weight:600;text-decoration:underline;cursor:pointer}
.a-back:hover{color:var(--color-charcoal)}

.a-skip{background:none;border:0;padding:.5rem 0;color:var(--color-text-muted);font-size:var(--text-small-size);font-weight:600;text-decoration:underline;cursor:pointer}
.a-skip:hover{color:var(--color-charcoal)}
@media(min-width:40rem){.a-skip{flex-basis:100%;order:3;text-align:center}}

.a-card-list{list-style:none;margin:0 0 var(--space-xl);padding:0;display:flex;flex-direction:column;gap:var(--space-md)}
.a-card{border:1px solid color-mix(in srgb, var(--color-charcoal) 14%, transparent);border-left:3px solid var(--color-clay-500);border-radius:var(--radius-sm);padding:var(--space-lg) var(--space-lg) var(--space-lg) calc(var(--space-lg) - 2px);background:var(--color-white)}
.a-card-title{margin:0 0 var(--space-sm);font-size:var(--text-h3-size)}
.a-card-what{margin:0 0 var(--space-sm)}
.a-card-why{margin:0 0 var(--space-sm);color:var(--color-text-muted)}
.a-card-tradeoff{margin:0;padding-top:var(--space-sm);border-top:1px solid var(--hairline);color:var(--color-text-muted);font-size:var(--text-small-size)}

/* Results flow straight into the contact form on the same screen — this is
   a section break, not a new page, so it reads as a continuation. */
.a-contact-section{margin-top:var(--space-2xl);padding-top:var(--space-2xl);border-top:1px solid var(--hairline)}
.a-contact-heading{font-family:var(--font-display);font-size:var(--text-h3-size);line-height:var(--text-h3-line-height);font-weight:700;color:var(--color-charcoal);margin-bottom:var(--space-sm)}

.a-consent{display:flex;align-items:flex-start;gap:var(--space-sm);margin:var(--space-lg) 0 var(--space-sm);cursor:pointer}
.a-consent input{width:1.25rem;height:1.25rem;flex:0 0 auto;margin-top:.15rem;accent-color:var(--color-pickle-700)}
.a-consent span{font-size:var(--text-small-size);color:var(--color-text-muted);line-height:1.5}
.a-consent a{color:var(--color-pickle-700)}

.a-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;left:-9999px}

.a-error .a-actions{margin-top:var(--space-xl)}