/* ==========================================================================
   OptimalHealthChoices — site styles (loaded after Bootstrap 5.3)
   Palette: plum ink / warm paper / amber signal
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* color */
  --plum: #2E1B33;
  --plum-2: #40284A;
  --plum-3: #5A3A66;
  --ink: #1E1520;
  --ink-2: #4A3D50;
  --muted: #6E6674;
  --paper: #FBF9F8;
  --paper-2: #F4EFF4;
  --surface: #FFFFFF;
  --line: #E4DCE6;
  --line-2: #F0EAF1;
  --field: #8E8095;
  --field-hover: #6E6478;
  --placeholder: #7A7080;
  --amber: #DE8A24;
  --amber-soft: #FBEEDA;
  --amber-line: #EFDCBE;
  --amber-deep: #8F5410;
  --on-dark: #F6F1F7;
  --on-dark-2: #C6B6CB;
  --on-dark-3: #9C8CA3;
  --error: #B3261E;

  /* type */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-micro: .8125rem;
  --fs-sm: .9375rem;
  --fs-legal: 1rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.1875rem;

  /* shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(46, 27, 51, .05);
  --sh-2: 0 2px 6px rgba(46, 27, 51, .05), 0 18px 40px -18px rgba(46, 27, 51, .22);
  --sh-3: 0 6px 16px rgba(46, 27, 51, .08), 0 44px 80px -32px rgba(46, 27, 51, .4);

  /* layout */
  --max: 1200px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --stack: clamp(3.5rem, 7vw, 6rem);

  /* Bootstrap overrides */
  --bs-body-font-family: var(--ui);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-link-color-rgb: 90, 58, 102;
  --bs-link-hover-color-rgb: 46, 27, 51;
}

/* ---------- 2. Base ---------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: inherit;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--plum-3); text-underline-offset: .2em; }
a:hover { color: var(--plum); }

:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 3px; }
.hero :focus-visible,
.foot :focus-visible,
.utility :focus-visible,
.skip:focus-visible { outline-color: var(--amber); }

/* Bootstrap container → site wrap (1200px incl. padding) */
.container {
  max-width: var(--max);
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: .9rem 1.4rem;
  background: var(--plum);
  color: #fff;
  font-weight: 600;
}
.skip:focus { left: 0; top: 0; color: #fff; }

/* ---------- 3. Utility bar ---------- */
.utility {
  background: var(--plum);
  color: var(--on-dark-2);
  font-size: var(--fs-legal);
}
.utility .container {
  gap: .2rem 1.5rem;
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.utility a {
  display: inline-block;
  padding-block: .5rem;
  margin-block: -.5rem;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-underline-offset: .18em;
}
.utility a:hover { color: #fff; text-decoration-color: #fff; }
.utility .hrs { color: var(--on-dark-3); }
.utility .pre-s { display: none; }

/* ---------- 4. Masthead / navbar ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 249, 248, .985);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(46, 27, 51, .03), 0 8px 24px -20px rgba(46, 27, 51, .25);
}
.masthead .navbar { padding: .8rem 0; }
.masthead .navbar > .container {
  position: relative;
  gap: 1.5rem;
  flex-wrap: nowrap;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: .3rem 0;
  text-decoration: none;
  white-space: nowrap;
}
.logo img { display: block; flex: none; height: 62px; width: auto; }

.nav-links { display: flex; align-items: center; gap: .15rem; }
.nav-links a {
  padding: .55rem .75rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.nav-links a:hover { color: var(--plum); background: var(--paper-2); }
.nav-links .m-cta { display: none; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: -1rem; /* sits .5rem from links (container gap is 1.5rem) */
  padding: .75rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--plum);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--plum-2); color: #fff; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  min-width: 44px;
  margin-left: -1.15rem;
  padding: .5rem .7rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font: 600 var(--fs-sm)/1 var(--ui);
  cursor: pointer;
}
.menu-btn:hover { background: var(--paper-2); color: var(--plum); }
.menu-btn img { display: block; width: 18px; height: 18px; }
.menu-btn .ico-close,
.menu-btn[aria-expanded="true"] .ico-open { display: none; }
.menu-btn[aria-expanded="true"] .ico-close { display: block; }

/* ---------- 5. Non-affiliation microbar ---------- */
.microbar {
  background: var(--amber-soft);
  border-bottom: 1px solid var(--amber-line);
}
.microbar .container {
  padding-top: .7rem;
  padding-bottom: .7rem;
  color: #4A3208;
  font-size: var(--fs-legal);
  font-weight: 500;
  text-align: center;
}

/* ---------- 6. Shared section furniture ---------- */
.section { padding-block: var(--stack); }
.section.alt { background: var(--paper-2); }

.shead { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.shead-split { --bs-gutter-x: 2rem; --bs-gutter-y: 1rem; }

.kicker {
  margin-bottom: .85rem;
  color: var(--amber-deep);
  font-family: var(--ui);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.shead h2 {
  max-width: 24ch;
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  text-wrap: balance;
}

.shead p {
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  background: var(--plum);
  color: var(--on-dark);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -8%;
  top: -30%;
  width: 60%;
  height: 150%;
  background: radial-gradient(closest-side, rgba(222, 138, 36, .16), transparent 72%);
  pointer-events: none;
}
.hero > .container {
  position: relative;
  z-index: 1;
  padding-top: clamp(2.5rem, 4.5vw, 4.25rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 4.25rem);
}
.hero-row {
  --bs-gutter-x: clamp(2rem, 4vw, 3.5rem);
  --bs-gutter-y: 2.25rem;
}

.hero h1 {
  max-width: 16ch;
  margin-bottom: 1.1rem;
  font-size: clamp(2.35rem, 4.4vw, 3.8rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--amber); }

.hero .sub {
  max-width: 44ch;
  margin-bottom: 1.75rem;
  color: var(--on-dark-2);
  font-size: 1.18rem;
  line-height: 1.55;
}

.marks { display: grid; gap: .6rem; max-width: 38ch; }
.marks div {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: #EAE1EC;
  font-size: var(--fs-legal);
  font-weight: 500;
}
.marks .n {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(222, 138, 36, .55);
  border-radius: 50%;
}
.marks .n img { width: 14px; height: 14px; }

.callbox {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 34rem;
  margin-top: 2.25rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
}
.callbox .ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(222, 138, 36, .16);
}
.callbox .ic img { width: 20px; height: 20px; }
.callbox p {
  margin: 0;
  color: var(--on-dark-2);
  font-size: var(--fs-legal);
  line-height: 1.5;
}
.callbox strong { display: block; margin-bottom: .15rem; color: #fff; font-weight: 700; }
.callbox a {
  display: inline-block;
  padding-block: .5rem;
  margin-block: -.5rem;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-underline-offset: .18em;
}
.callbox a:hover { color: var(--amber); text-decoration-color: var(--amber); }
.callbox .hrs { display: block; margin-top: .2rem; color: var(--on-dark-2); }

/* ---------- 8. Form card ---------- */
.form-card {
  padding: clamp(1.35rem, 1.9vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-3);
  color: var(--ink);
  scroll-margin-top: 100px;
}
.form-card h2 { margin-bottom: .3rem; font-size: 1.6rem; font-weight: 800; }
.form-card .lede {
  margin-bottom: 1.25rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

.g-row2 { --bs-gutter-x: .85rem; --bs-gutter-y: 0; }

.field { margin-bottom: .9rem; }
.field-select { margin-bottom: 1.3rem; }

.field .form-label {
  display: block;
  margin-bottom: .4rem;
  color: var(--ink-2);
  font-size: 1rem;
  font-weight: 700;
}
.field-select .form-label { margin-bottom: .5rem; line-height: 1.4; }

.hint {
  display: block;
  margin-top: .45rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.form-control,
.form-select {
  width: 100%;
  min-height: 50px;
  padding: .7rem .9rem;
  border: 1.5px solid var(--field);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--fs-legal);
  font-weight: 500;
  line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
.form-select {
  padding-right: 2.5rem;
  background-position: right .9rem center;
}
.form-control::placeholder { color: var(--placeholder); opacity: 1; font-weight: 400; }
.form-control:hover,
.form-select:hover { border-color: var(--field-hover); }
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--plum-3);
  box-shadow: 0 0 0 4px rgba(90, 58, 102, .14);
}
.form-control.bad,
.form-select.bad { border-color: var(--error); }

.err {
  display: none;
  margin: .4rem 0 0;
  color: var(--error);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.err.show { display: block; }

/* spam honeypot: off-screen, checked server-side */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* consent box */
.consent {
  margin-bottom: 1.15rem;
  padding: 1.15rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
.consent .cap {
  margin-bottom: 1rem;
  color: var(--amber-deep);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.consent-rule { margin: 1rem 0; border: 0; border-top: 1px solid var(--line); opacity: 1; }

.check { display: flex; align-items: flex-start; gap: .85rem; }
.check .form-check-input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  border: 1.5px solid var(--field);
  border-radius: 5px;
  cursor: pointer;
}
.check .form-check-input:checked { background-color: var(--plum-3); border-color: var(--plum-3); }
.check .form-check-input:focus { border-color: var(--plum-3); box-shadow: 0 0 0 4px rgba(90, 58, 102, .14); }
.check label {
  color: var(--ink);
  font-size: var(--fs-legal);
  line-height: 1.55;
  cursor: pointer;
}
.check strong { font-weight: 700; }

/* Long consent paragraph: collapsed to half its height until "Read More".
   The full text always stays in the DOM (TrustedForm + consent_text_rendered). */
.consent-body { flex: 1; min-width: 0; }
.consent-text { position: relative; overflow-wrap: break-word; }
.consent-text.is-clamped {
  max-height: var(--clamp-h, 12.4em);
  overflow: hidden;
}
.consent-text.is-clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5rem;
  background: linear-gradient(rgba(251, 249, 248, 0), var(--paper));
  pointer-events: none;
}
.consent-text.is-animating { overflow: hidden; transition: max-height .35s ease; }

.read-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  margin: .1rem 0 -.6rem;
  padding: .4rem 0;
  border: 0;
  background: none;
  color: var(--plum-3);
  font: 700 var(--fs-sm)/1 var(--ui);
  text-decoration: underline;
  text-decoration-color: rgba(90, 58, 102, .35);
  text-underline-offset: .2em;
  cursor: pointer;
}
.read-more[hidden] { display: none; }
.read-more:hover { color: var(--plum); text-decoration-color: currentColor; }
.read-more img { width: 14px; height: 14px; transition: transform .25s ease; }
.read-more[aria-expanded="true"] img { transform: rotate(180deg); }

/* primary button (Bootstrap .btn + variables) */
.btn-plum {
  --bs-btn-bg: var(--plum);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--plum-2);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--plum-2);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--plum);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-opacity: 1;
  --bs-btn-border-width: 0;
  --bs-btn-padding-y: .85rem;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-font-family: var(--ui);
  --bs-btn-font-size: var(--fs-legal);
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: var(--r-pill);
  --bs-btn-focus-box-shadow: 0 0 0 4px rgba(90, 58, 102, .25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  box-shadow: 0 10px 24px -12px rgba(46, 27, 51, .7);
  transition: background .15s, transform .12s;
}
.btn-plum:hover { transform: translateY(-1px); }
.btn-plum:active,
.btn-plum:disabled { transform: none; }

.reassure {
  margin-top: 1rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: center;
}

.card-note {
  max-width: 430px;
  margin-top: 1.15rem;
  color: #EDE4EF;
  font-size: var(--fs-legal);
  line-height: 1.6;
}

/* ---------- 9. Steps ---------- */
.steps {
  --bs-gutter-x: clamp(1.25rem, 3vw, 2.5rem);
  --bs-gutter-y: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.step { height: 100%; padding-top: 1.35rem; border-top: 2px solid var(--plum); }
.step .n {
  display: block;
  margin-bottom: .6rem;
  color: var(--amber-deep);
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .1em;
}
.step h3 { margin-bottom: .55rem; font-size: 1.3rem; }
.step p { color: var(--muted); font-size: var(--fs-legal); }

/* ---------- 10. Tiles ---------- */
.tile {
  height: 100%;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.tile:hover { border-color: #D9CADC; box-shadow: var(--sh-2); transform: translateY(-2px); }
.tile h3 { margin-bottom: .55rem; font-size: 1.15rem; }
.tile p { margin: 0; color: var(--muted); font-size: var(--fs-legal); }

/* ---------- 11. Enrollment period rows ---------- */
.period { padding: 1.55rem 0; border-bottom: 1px solid var(--line); }
.period:first-child { padding-top: 0; }
.period:last-child { border-bottom: 0; }
.period .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: .5rem; }
.period h3 { font-size: 1.15rem; }
.period p { margin: 0; color: var(--muted); font-size: var(--fs-legal); }

/* ---------- 12. FAQ ---------- */
.faq { max-width: 66rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  display: block;
  padding: 1.3rem 3rem 1.3rem 0;
  font-family: var(--display);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -.02em;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  top: 50%;
  background: var(--amber);
  transform: translateY(-50%);
}
.faq summary::after { right: .4rem; width: 14px; height: 2px; }
.faq summary::before { right: 6.4px; width: 2px; height: 14px; transition: transform .22s; }
.faq details[open] summary::before { transform: translateY(-50%) scaleY(0); }
.faq summary:hover { color: var(--plum-3); }
.faq .ans { max-width: 62ch; padding: 0 0 1.4rem; color: var(--muted); font-size: var(--fs-legal); }

/* ---------- 13. Disclosures ---------- */
.disc {
  padding-block: var(--stack);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.disc h2 { margin-bottom: .6rem; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.disc .dsub { max-width: 54ch; margin-bottom: 2.25rem; color: var(--muted); font-size: var(--fs-lead); }

.clause { max-width: 80ch; padding: 1.55rem 0; border-top: 1px solid var(--line); }
.clause h3 {
  margin-bottom: .65rem;
  color: var(--muted);
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.clause p { margin: 0; color: var(--ink); font-size: var(--fs-legal); line-height: 1.62; }
.clause.key {
  margin-bottom: 1.5rem;
  padding: 1.6rem;
  border: 1.5px solid var(--plum-3);
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.clause.key h3 { color: var(--plum-3); }

/* ---------- 14. Footer ---------- */
.foot {
  padding-block: clamp(3rem, 5vw, 4rem);
  background: var(--plum);
  color: var(--on-dark-2);
}
.foot .top {
  --bs-gutter-x: 2.5rem;
  --bs-gutter-y: 2rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.foot address {
  margin: 1.15rem 0 0;
  font-size: var(--fs-legal);
  font-style: normal;
  line-height: 1.7;
}
.foot address strong { color: var(--on-dark); font-weight: 600; }
.foot a { color: var(--on-dark); }
.foot a:hover { color: #fff; }

.foot .links { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.foot .links .h {
  margin-bottom: .35rem;
  color: var(--on-dark-3);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.foot .links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem 0;
  font-size: var(--fs-legal);
  text-decoration: none;
}
.foot .links a:hover { text-decoration: underline; }

.foot .bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
  font-size: var(--fs-sm);
}
.smid {
  padding: .45rem .85rem;
  border: 1px dashed rgba(255, 255, 255, .28);
  border-radius: var(--r-sm);
  color: var(--on-dark);
  font-size: var(--fs-sm);
}

/* ---------- 15. Thank-you page + form error notice ---------- */
.thanks > .container { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }

.status-card {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-3);
  color: var(--ink);
  text-align: center;
}
.status-card .badge-ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--amber-soft);
}
.status-card .badge-ic img { width: 30px; height: 30px; }
.status-card h1 { margin-bottom: .75rem; font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 800; }
.status-card p { color: var(--muted); }
.status-card .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.75rem;
}
.status-card .btn-plum { width: auto; gap: .5rem; }
.status-card .btn-plum img { width: 18px; height: 18px; }

/* Shown above the lead form when submit.php sends the visitor back */
.form-alert {
  margin-bottom: 1.25rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--error);
  border-radius: var(--r-sm);
  background: #FCEEEE;
  color: var(--error);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- 16. Interior page banner ---------- */
.banner {
  position: relative;
  overflow: hidden;
  background: var(--plum);
  color: var(--on-dark);
}
.banner::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -6%;
  top: -40%;
  width: 50%;
  height: 180%;
  background: radial-gradient(closest-side, rgba(222, 138, 36, .14), transparent 72%);
  pointer-events: none;
}
.banner .container {
  position: relative;
  z-index: 1;
  padding-top: clamp(2.5rem, 4.5vw, 3.75rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
}
.banner h1 {
  max-width: 20ch;
  margin-bottom: .75rem;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
}
.banner .meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  color: var(--on-dark-3);
  font-size: var(--fs-sm);
}

/* ---------- 17. Legal pages: table of contents + prose ---------- */
.legal { padding-block: var(--stack); }
.legal-row { --bs-gutter-x: clamp(2rem, 5vw, 4rem); --bs-gutter-y: 2rem; }

.toc {
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.toc .h {
  margin-bottom: .9rem;
  color: var(--amber-deep);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.toc ol {
  display: grid;
  gap: .1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.toc li { counter-increment: toc; }
.toc a {
  display: block;
  min-height: 44px;
  padding: .7rem .5rem .7rem 0;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-decoration: none;
  transition: padding .15s, background .15s;
}
.toc a::before { content: counter(toc) ". "; color: var(--amber-deep); font-weight: 700; }
.toc a:hover { padding-left: .5rem; background: var(--paper-2); color: var(--plum); }

.prose { max-width: 70ch; }
.prose > section {
  margin-bottom: 2.25rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.prose > section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.prose h2 { margin-bottom: .85rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.prose h3 { margin: 1.5rem 0 .5rem; font-size: 1.12rem; }
.prose > section > p,
.prose li,
.prose .note p {
  color: var(--ink);
  font-size: var(--fs-legal);
  line-height: 1.65;
}
.prose ul { margin: 0 0 1em; padding-left: 1.25rem; }
.prose li { margin-bottom: .45rem; }

.prose .note {
  margin: 1.25rem 0;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--paper-2);
}
.prose .note p { margin: 0; color: var(--ink-2); }
.prose .note.is-error { border-left-color: var(--error); }

.prose .table-responsive { margin: 1rem 0; }
.prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--fs-legal); }
.prose th,
.prose td {
  padding: .7rem .75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prose th { background: var(--paper-2); font-weight: 700; }

/* ---------- 18. Privacy request form (Do Not Sell page) ---------- */
.dns-form { margin-top: 1rem; }
.dns-form .field .form-label { font-size: var(--fs-sm); }
.dns-form textarea.form-control { min-height: 120px; padding: .8rem .9rem; line-height: 1.55; resize: vertical; }
.dns-form .err { font-size: var(--fs-sm); line-height: 1.5; }
.dns-form .btn-plum { width: auto; }

.dns-form fieldset { margin: 0 0 1.25rem; padding: 0; border: 0; }
.dns-form legend {
  float: none;
  margin-bottom: .65rem;
  padding: 0;
  font-size: var(--fs-legal);
  font-weight: 700;
  line-height: 1.4;
}

.choices { display: grid; gap: .5rem; }
.choice {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 54px;
  padding: .75rem 1rem;
  border: 1.5px solid var(--field);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-legal);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--field-hover); background: var(--paper); }
.choice input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--plum-3); }
.choice:has(input:checked) { border-color: var(--plum-3); background: var(--paper-2); color: var(--ink); }
.choice:has(input:focus-visible) { outline: 3px solid var(--amber-deep); outline-offset: 2px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Desktop (≥ 992px): two-column hero, sticky intro copy */
@media (min-width: 992px) {
  .hero-lead {
    position: sticky;
    top: calc(76px + 2rem);
    align-self: flex-start;
  }
  .form-col { width: calc(400px + var(--bs-gutter-x)); }
  .shead-split p { margin-top: calc(var(--fs-micro) * 1.62 + .85rem); }

  /* Legal pages: sticky contents column beside the text */
  .toc-col { width: calc(230px + var(--bs-gutter-x)); }
  .toc {
    position: sticky;
    top: 110px;
    padding: 0;
    border: 0;
    background: none;
  }
}
@media (min-width: 1200px) {
  .form-col { width: calc(430px + var(--bs-gutter-x)); }
}

/* Tablet & below (< 992px): stacked hero, dropdown menu */
@media (max-width: 991.98px) {
  .form-card,
  .card-note,
  .callbox { max-width: 560px; }

  .nav-cta { margin-left: auto; }

  .masthead .navbar-collapse {
    position: absolute;
    top: calc(100% + 1.55rem);
    right: var(--pad);
    z-index: 70;
    min-width: 240px;
    padding: .6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--sh-3);
  }
  .masthead .navbar-collapse.collapsing { transition: height .2s ease; overflow: hidden; }
  .nav-links { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .8rem .9rem;
    font-size: var(--fs-legal);
  }
}

/* Small tablet & phones (< 768px) */
@media (max-width: 767.98px) {
  .form-card { max-width: none; }
}

@media (max-width: 560px) {
  .masthead .navbar > .container { gap: .6rem; }
  .logo img { height: 56px; }
  .nav-cta { padding: .5rem .9rem; font-size: .90625rem; }
  .menu-btn { margin-left: -.45rem; padding: .5rem .6rem; }
  .menu-btn .t { display: none; }
  .masthead .navbar-collapse { right: 1rem; min-width: min(260px, calc(100vw - 2rem)); }
}

/* Not enough room for logo + CTA + menu: CTA moves into the menu panel */
@media (max-width: 480px) {
  .nav-cta { display: none; }
  .menu-btn { margin-left: auto; }
  .nav-links .m-cta {
    display: flex;
    justify-content: center;
    margin-bottom: .35rem;
    border-radius: var(--r-sm);
    background: var(--plum);
    color: #fff;
  }
  .nav-links .m-cta:hover { background: var(--plum-2); color: #fff; }
  .logo img { height: 48px; }
  .utility .container { gap: .15rem 1rem; padding-top: .55rem; padding-bottom: .55rem; }
  .utility .pre { display: none; }
  .utility .pre-s { display: inline; }
}

/* Small phones (≤ 400px): give the form more usable width */
@media (max-width: 400px) {
  .form-card { padding: 1.15rem; border-radius: var(--r-md); }
  .form-card h2 { font-size: 1.4rem; }
  .consent { padding: .9rem; }
  .check { gap: .65rem; }
  .check label { font-size: .9375rem; }
  .callbox { padding: 1rem; gap: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

@media print {
  .utility, .masthead, .form-card { display: none; }
  body { font-size: 12pt; }
  .disc, .section.alt { background: #fff; }
}