/* ============ TOKENS ============ */
/* ------------------------------------------------------------------
   COLOUR SYSTEM — champagne gold leads, navy supports.
   Roughly a 60 / 40 split across accented surface: gold owns every
   action, figure, icon well and highlight; navy owns structure — the
   top bar, dark bands, headings and the one contrasting product card.
   The gold ramp is lighter and warmer than the old #b8860b mustard so
   it sits beside the navy rather than fighting it.
   ------------------------------------------------------------------ */
:root {
  /* ---- gold ramp : the 60% ---- */
  --gold-50: #fdf9f0;
  --gold-100: #faf2df;
  --gold-200: #f2e3bd;
  --gold-300: #ecd7a2;
  --gold-400: #e0bb62;
  /* the lighter gold               */
  --gold-500: #d3a941;
  --gold-600: #bd9130;
  --gold-700: #8f6b12;
  /* 4.9:1 on white — small text    */
  --gold-800: #7a5a0d;

  /* ---- navy ramp : the 40% ---- */
  --navy-900: #0e2038;
  --navy-800: #102845;
  --navy-700: #16345c;
  --navy-600: #1a3c66;
  --navy-400: #2f6398;
  --navy-100: #eef3fa;
  --navy-200: #d3e1f1;

  /* brand — gold, so every rule already wired to these tokens
     inherits the new accent without touching 500 selectors */
  --charcoal: #0e2038;
  /* navy: top bar, dark bands      */
  --brand: #d3a941;
  --brand-rgb: 224, 187, 98;
  /* gold-400, for alpha use        */
  --brand-deep-rgb: 189, 145, 48;
  /* gold-600, for shadows          */
  --brand-lite-rgb: 236, 215, 162;
  --brand-wash-rgb: 250, 242, 223;
  --brand-tint-1: #fdf9f0;
  /* focused field                  */
  --brand-tint-2: #fefcf7;
  --brand-muted: #ded8ca;
  /* disabled primary button        */
  --brand-on-dark: #f0d698;
  /* accent text on navy            */
  --brand-on-dark-2: #f4e6c2;
  --brand-dark: #1a1408;
  --brand-hover-warm: #f7edd6;
  --grad-brand-deep: linear-gradient(100deg, #e6c473, #d3a941 52%, #b8892a);
  --brand-deep: #bd9130;
  --brand-bright: #e0bb62;
  --brand-text: #8f6b12;
  --brand-ink: #7a5a0d;
  /* small text on warm backgrounds */
  --brand-wash: #fdf9f0;
  --brand-line: #f0e0b8;
  --grad-brand: linear-gradient(135deg, #ecd7a2 0%, #e0bb62 34%, #c99b34 100%);

  /* navy, addressed directly wherever blue must hold its ground */
  --navy: #16345c;
  --navy-deep: #102845;
  --navy-bright: #2f6398;
  --navy-text: #1a3c66;
  --navy-ink: #102845;
  --navy-wash: #eef3fa;
  --navy-line: #d3e1f1;
  --grad-navy: linear-gradient(135deg, #24507f 0%, #16345c 55%, #102845 100%);

  /* premium tier — Complete Cover runs a deeper, richer gold than the page
     default so it still separates now that gold is the base accent */
  --prem: #c99b34;
  --prem-deep: #b8892a;
  --prem-bright: #e6c473;
  --prem-text: #8a6510;
  --prem-ink: #75550b;
  --prem-wash: #fbf4e4;
  --prem-line: #ecd9ac;
  --prem-hover: #f7ecd3;
  --grad-prem: linear-gradient(135deg, #efdcae 0%, #e0bb62 32%, #bd9130 100%);

  /* frosted-glass wells — used for icon badges over warm surfaces */
  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(253, 249, 240, .62));
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(224, 187, 98, .42),
    0 1px 2px rgba(122, 90, 13, .10),
    0 6px 16px rgba(189, 145, 48, .16);

  /* neutral surfaces — kept near-neutral so the gold reads as the accent */
  --bg: #faf9f6;
  --surface: #ffffff;
  --surface-sunken: #f1efe9;
  --surface-warm: #fbf4e4;

  --ink: #17202f;
  --ink-2: #555d6b;
  --ink-3: #8a9099;
  --line: #e7e4dd;
  --danger: #a8392a;
  --income: #16345c;
  /* Job Loss runs navy — the 40%   */
  --income-wash: #eef3fa;
  --income-line: #d3e1f1;
  --danger-wash: #f8ece9;
  --ok: #2e6f4e;
  --ok-wash: #e8f1ec;
  --info-bg: #e6e9f0;
  --info-ink: #3d4557;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-1: 0 1px 3px rgba(16, 40, 69, .05), 0 4px 16px rgba(16, 40, 69, .045);
  --shadow-2: 0 4px 12px rgba(16, 40, 69, .07), 0 12px 32px rgba(16, 40, 69, .06);
  --shadow-gold: 0 4px 16px rgba(var(--brand-deep-rgb), .26);

  /* 3D button stacks: top highlight, bottom lip, contact shadow, ambient.
     No borders anywhere — depth is carried by light, not outline. */
  --lift-gold:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -2px 0 rgba(122, 90, 13, .24),
    0 1px 2px rgba(122, 90, 13, .20),
    0 6px 16px rgba(189, 145, 48, .30);
  --lift-gold-hi:
    inset 0 1px 0 rgba(255, 255, 255, .74),
    inset 0 -2px 0 rgba(122, 90, 13, .20),
    0 2px 4px rgba(122, 90, 13, .18),
    0 14px 32px rgba(189, 145, 48, .42);
  --lift-navy:
    inset 0 1px 0 rgba(255, 255, 255, .17),
    inset 0 -2px 0 rgba(0, 0, 0, .26),
    0 1px 2px rgba(14, 32, 56, .28),
    0 6px 18px rgba(14, 32, 56, .28);
  --lift-navy-hi:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -2px 0 rgba(0, 0, 0, .22),
    0 2px 5px rgba(14, 32, 56, .24),
    0 14px 34px rgba(14, 32, 56, .38);
  --lift-quiet:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -2px 0 rgba(16, 40, 69, .07),
    0 1px 2px rgba(16, 40, 69, .07),
    0 5px 14px rgba(16, 40, 69, .08);
  --lift-quiet-hi:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(16, 40, 69, .06),
    0 2px 5px rgba(16, 40, 69, .09),
    0 12px 26px rgba(16, 40, 69, .14);

  /* one type scale for the whole plan experience */
  --t-page: clamp(30px, 4vw, 42px);
  --t-card: clamp(23px, 2.2vw, 30px);
  --t-hero: clamp(30px, 3.1vw, 42px);
  --t-sec: 18px;
  --t-metric: 22px;
  --t-label: 13px;
  --t-body: 14px;
  --t-note: 12px;

  --dur: 220ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --shell: 1200px;
  --gutter: 48px;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

svg {
  display: block;
}

.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 18px;
  height: 18px;
}

.icon-lg {
  width: 32px;
  height: 32px;
}

.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;
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  touch-action: manipulation;
}

.skip {
  position: absolute;
  left: var(--s4);
  top: -60px;
  z-index: 200;
  background: var(--charcoal);
  color: #fff;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}

.skip:focus {
  top: var(--s4);
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============ CHROME ============ */
.topbar {
  background: var(--charcoal);
  position: sticky;
  top: 0;
  z-index: 60;
}

.topbar-in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s3) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.logo .mark {
  width: 24px;
  height: 24px;
  color: var(--brand-bright);
}

.acct-top {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #d9d9de;
}

.acct-top:hover {
  border-color: var(--brand-bright);
  color: var(--brand-bright);
  background: rgba(var(--brand-rgb), .14);
}

.logo {
  cursor: pointer;
}

.subbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.subbar-in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s3) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.backbtn {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--brand-text);
  font-weight: 700;
  font-size: 17px;
  padding: var(--s2) var(--s3);
  margin-left: calc(var(--s3) * -1);
  border-radius: var(--r-sm);
  min-height: 44px;
  transition: background var(--dur) var(--ease);
}

.backbtn:hover {
  background: var(--surface-sunken);
}

.acct {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.acct:hover {
  border-color: var(--brand);
  color: var(--brand-text);
}

/* ============ VIEWS ============ */
.view {
  display: none;
}

.view.on {
  display: block;
  animation: viewIn 320ms var(--ease) both;
}

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.col {
  margin: 0 auto;
  padding-bottom: var(--s8);
}

.col-wide {
  max-width: 100%;
}

.col-mid {
  max-width: 940px;
}

.col-narrow {
  max-width: 720px;
}

/* ---- stepper ---- */
.stepper {
  padding: var(--s6) 0 0;
}

.stepper-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s2);
}

.stepper-row .now {
  color: var(--brand-text);
}

.track {
  height: 6px;
  background: var(--surface-sunken);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.track>i {
  display: block;
  height: 100%;
  background: var(--grad-brand);
  border-radius: var(--r-pill);
  transition: width 420ms var(--ease);
}

/* ---- headings ---- */
.page-title {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin-top: var(--s6);
}

.page-sub {
  color: var(--ink-2);
  font-size: 15.5px;
  margin-top: var(--s3);
  max-width: 60ch;
}

.sec-title {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ============ STEP 1 : PLAN ============ */

.checkout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-top: var(--s6);
  flex-wrap: wrap;
}

.checkout .amt {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-top: 2px;
}

.checkout .amt span {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}

.underwriter {
  margin-top: var(--s7);
  background: var(--surface-sunken);
  border-radius: var(--r-md);
  padding: var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.underwriter .badge {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--charcoal);
  color: var(--brand-bright);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.underwriter h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
}

.underwriter p {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 3px;
}

/* ---- selection states ---- */
.blocked {
  opacity: .42;
  filter: grayscale(.5);
  pointer-events: none;
  user-select: none;
}

.lockmsg {
  display: none;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  font-size: 13px;
  color: var(--brand-ink);
  font-weight: 500;
}

.lockmsg.on {
  display: flex;
}

.lockmsg button {
  text-decoration: underline;
  font-weight: 700;
  color: var(--brand-ink);
}

/* ---- coupon ---- */
.coupon {
  margin-top: var(--s5);
}

.coupon-row {
  display: flex;
  gap: var(--s3);
}

.coupon-row .input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.coupon-row .btn {
  min-height: 56px;
  padding: var(--s4) var(--s6);
  white-space: nowrap;
}

.coupon-msg {
  font-size: 13px;
  margin-top: var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.coupon-msg.ok {
  color: var(--brand-text);
  font-weight: 600;
}

.coupon-msg.bad {
  color: var(--danger);
  font-weight: 500;
}

.coupon-applied {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
  background: var(--brand-wash);
  border: 1px dashed var(--brand);
  border-radius: var(--r-md);
  padding: var(--s4);
}

.coupon-applied b {
  font-size: 14.5px;
  color: var(--brand-text);
  letter-spacing: .06em;
}

.coupon-applied p {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}

.coupon-applied .drop {
  margin-left: auto;
  color: var(--danger);
  font-weight: 700;
  font-size: 13px;
  min-height: 44px;
}

.coupon-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: var(--s3);
}

.amountcard .was {
  display: block;
  font-size: 15px;
  font-weight: 500;
  opacity: .8;
  text-decoration: line-through;
  margin-top: 2px;
}

/* ============ STEP 2 : DETAILS ============ */
.field {
  margin-top: var(--s6);
}

.field>label,
.legend {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: var(--s3);
}

.legend {
  padding: 0;
}

fieldset {
  border: 0;
}

.readonly {
  font-size: 17px;
  font-weight: 500;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

.verified {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.radioseg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface-sunken);
  border-radius: var(--r-md);
}

.radioseg label {
  display: grid;
  place-items: center;
  min-height: 52px;
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.radioseg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radioseg label:hover {
  background: var(--line);
}

.radioseg label:has(input:checked) {
  background: var(--grad-brand);
  color: #fff;
  font-weight: 600;
}

.radioseg label:has(input:focus-visible) {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.input {
  width: 100%;
  background: var(--surface-sunken);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  min-height: 56px;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--brand-tint-1);
}

.input:focus-visible {
  outline: none;
}

.input[aria-invalid="true"] {
  border-color: var(--danger);
  background: #faeeec;
}

.input[data-valid="true"]:not(:focus) {
  border-color: var(--brand-line);
}

.input::placeholder {
  color: var(--ink-3);
}

.hint {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: var(--s3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hint.bad {
  color: var(--danger);
  font-weight: 500;
}

.hint.ok {
  color: var(--ok);
}

.selectwrap {
  position: relative;
}

.selectwrap select {
  appearance: none;
  padding-right: 56px;
  cursor: pointer;
}

.selectwrap .chev {
  position: absolute;
  right: var(--s5);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-2);
  pointer-events: none;
}

.note {
  margin-top: var(--s7);
  background: var(--surface-sunken);
  border-radius: var(--r-md);
  padding: var(--s5);
  display: flex;
  gap: var(--s4);
}

.note .ico {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.note h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: var(--s2);
}

.note p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
}

.stack-btns {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s7);
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s6);
  min-height: 56px;
  font-size: 16px;
  font-weight: 600;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(var(--brand-deep-rgb), .36);
}

.btn-primary[disabled] {
  background: var(--brand-muted);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-ghost {
  background: var(--surface-sunken);
  color: var(--ink-2);
}

.btn-ghost:hover {
  background: var(--line);
  color: var(--ink);
}

.btn-outline {
  background: var(--surface);
  border: 2px solid var(--line);
}

.btn-outline:hover {
  border-color: var(--brand);
  color: var(--brand-text);
}

.btn-block {
  width: 100%;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============ STEP 3 : REVIEW ============ */
.sumgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin-top: var(--s6);
  align-items: start;
}

.card {
  background: var(--surface-sunken);
  border-radius: var(--r-md);
  padding: var(--s5);
  position: relative;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.editbtn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--brand);
  display: grid;
  place-items: center;
  margin: -10px -10px -10px 0;
  transition: background var(--dur) var(--ease);
}

.editbtn:hover {
  background: var(--line);
}

.kv {
  display: grid;
  gap: var(--s2);
}

.kv dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.kv dd {
  font-size: 16px;
  font-weight: 500;
}

.pairgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
}

.stackgrid {
  display: grid;
  gap: var(--s5);
}

.policy {
  margin-top: var(--s5);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-1);
}

.policy-id {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s4);
}

.policy-id .ico {
  width: 60px;
  height: 60px;
  border-radius: var(--r-md);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.policy-id h3 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.policy-id p {
  color: var(--ink-2);
  font-size: 14.5px;
  margin-top: 2px;
}

.figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.fig b {
  display: block;
  font-size: 26px;
  font-weight: 700;
  margin-top: var(--s2);
  letter-spacing: -.02em;
}

.fig.gold b {
  color: var(--brand-text);
}

.fig b span {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}

.consents {
  margin-top: var(--s6);
  display: grid;
  gap: var(--s3);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  cursor: pointer;
  padding: var(--s3);
  margin: calc(var(--s3) * -1);
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}

.consent:hover {
  background: var(--surface-sunken);
}

.consent input {
  appearance: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--brand);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--ease);
}

.consent input:checked {
  background: var(--brand);
}

.consent input:checked::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}

.consent span {
  font-size: 14.5px;
  line-height: 1.55;
}

.consent a {
  color: var(--brand-text);
  font-weight: 700;
}

.center {
  display: flex;
  justify-content: center;
  margin-top: var(--s6);
}

.foot-note {
  text-align: center;
  margin-top: var(--s4);
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ============ STEP 4 : PAY ============ */
.amountcard {
  margin-top: var(--s6);
  background: var(--grad-brand);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  box-shadow: var(--shadow-gold);
}

.amountcard .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .88;
}

.amountcard b {
  display: block;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: var(--s1);
}

.amountcard b span {
  font-size: 15px;
  font-weight: 500;
  opacity: .9;
}

.amountcard .plan {
  text-align: right;
  font-size: 15px;
  font-weight: 600;
}

.amountcard .plan small {
  display: block;
  font-weight: 400;
  opacity: .88;
  margin-top: 3px;
  font-size: 12.5px;
}

.methods {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s4);
}

.method {
  display: flex;
  align-items: center;
  gap: var(--s4);
  cursor: pointer;
  background: var(--surface-sunken);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  min-height: 76px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.method:hover {
  border-color: var(--line);
}

.method:has(input:checked) {
  border-color: var(--brand);
  background: var(--surface-warm);
}

.method:has(input:focus-visible) {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.method .ico {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.method h4 {
  font-size: 15px;
  font-weight: 600;
}

.method p {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}

.method .dot {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ink-3);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: border-color var(--dur) var(--ease);
}

.method:has(input:checked) .dot {
  border-color: var(--brand);
}

.method:has(input:checked) .dot::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brand);
}

/* ============ STEP 5 : SUCCESS ============ */
.hero {
  text-align: center;
  padding: var(--s8) var(--s4) 0;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 100%);
  height: 320px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--brand-rgb), .18) 0%, rgba(var(--brand-rgb), 0) 68%);
}

.hero>* {
  position: relative;
}

.seal {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--s5);
  border-radius: 20px;
  background: var(--brand-wash);
  border: 1.5px solid var(--brand-line);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  animation: seal 480ms cubic-bezier(.2, 1.3, .4, 1) both;
}

@keyframes seal {
  from {
    transform: scale(.5);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.hero h1 {
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
}

.hero p {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
  margin: var(--s4) auto 0;
  max-width: 52ch;
}

.policybox {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s6);
  margin-top: var(--s7);
  box-shadow: var(--shadow-1);
}

.policybox header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.policybox h2 {
  font-size: 21px;
  font-weight: 700;
  color: var(--brand-text);
}

.pill {
  background: var(--info-bg);
  color: var(--info-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-sm);
}

.pbgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6) var(--s5);
  margin-top: var(--s6);
}

.pbgrid .r {
  text-align: right;
}

.pbgrid dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s2);
}

.pbgrid dd {
  font-size: 16.5px;
  font-weight: 600;
}

.pbgrid dd.big {
  font-size: 24px;
  color: var(--brand-text);
  font-weight: 700;
}

.nextlist {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s4);
}

.next {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  text-align: left;
  background: var(--surface-sunken);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  min-height: 76px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.next:hover {
  border-color: var(--line);
  background: var(--line);
}

.next .ico {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.next h4 {
  font-size: 15px;
  font-weight: 600;
}

.next p {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}

.next .chev {
  margin-left: auto;
  color: var(--ink-3);
  flex-shrink: 0;
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  margin-top: var(--s7);
}

/* ============ STEP 6 : MEMBERSHIP REGISTRATION ============ */
.col-form {
  max-width: 620px;
}

.tel {
  display: flex;
  background: var(--surface-sunken);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease);
}

.tel:focus-within {
  border-color: var(--brand);
  background: var(--brand-tint-2);
}

.tel .cc {
  display: grid;
  place-items: center;
  padding: 0 var(--s4);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  border-right: 1px solid var(--line);
}

.tel input {
  background: none;
  border: 0;
  flex: 1;
  min-height: 56px;
  padding: var(--s4);
  font: inherit;
  font-size: 15.5px;
}

.tel input:focus {
  outline: none;
}

.tel[data-invalid="true"] {
  border-color: var(--danger);
  background: #faeeec;
}

.tel[data-valid="true"]:not(:focus-within) {
  border-color: var(--brand-line);
}

textarea.input {
  min-height: 86px;
  resize: vertical;
  line-height: 1.6;
  padding-top: var(--s4);
}

.duo-field {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

.privacy {
  margin-top: var(--s6);
  background: var(--surface-sunken);
  border-radius: var(--r-md);
  padding: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.privacy .ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.privacy p {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

.legal {
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: var(--s4);
}

.legal a {
  color: var(--ink-2);
  font-weight: 600;
}

@media (max-width:520px) {
  .duo-field {
    grid-template-columns: 1fr;
  }
}

/* ---- order summary (review) ---- */
.linelist {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
}

.lineitem {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
}

.lineitem:last-child {
  border-bottom: 0;
}

.lineitem .ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.lineitem h4 {
  font-size: 14.5px;
  font-weight: 600;
}

.lineitem p {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}

.lineitem .amt {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.totals {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 2px solid var(--line);
  display: grid;
  gap: var(--s3);
}

.totrow {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  font-size: 14px;
  color: var(--ink-2);
}

.totrow.grand {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.totrow.grand span:last-child {
  color: var(--brand-text);
}

.specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.spec dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s2);
}

.spec dd {
  font-size: 14.5px;
  font-weight: 600;
}

/* ---- richer policy card (success) ---- */
.policybox {
  overflow: hidden;
  padding: 0;
}

.pb-top {
  background: var(--charcoal);
  color: #fff;
  padding: var(--s5) var(--s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.pb-top h2 {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

.pb-top .sub {
  font-size: 12px;
  color: #b9b9c0;
  margin-top: 3px;
}

.pill-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--brand-rgb), .18);
  color: var(--brand-bright);
  border: 1px solid rgba(var(--brand-rgb), .5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
}

.pb-top .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-bright);
}

.pb-mid {
  padding: var(--s6);
}

.pb-covers {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.pb-cover {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 14px;
}

.pb-cover .icon {
  color: var(--brand);
  flex-shrink: 0;
}

.pb-cover b {
  margin-left: auto;
  font-weight: 600;
  color: var(--ink-2);
  font-size: 13px;
}

.pb-foot {
  background: var(--surface-sunken);
  padding: var(--s4) var(--s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

.pb-foot p {
  font-size: 12.5px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.linkbtn {
  color: var(--brand-text);
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.linkbtn:hover {
  text-decoration: underline;
}

/* ---- confetti ---- */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 130;
  overflow: hidden;
}

.confetti i {
  position: absolute;
  top: -14px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: fall linear forwards;
}

@keyframes fall {
  0% {
    transform: translateY(-10vh) rotate(0);
    opacity: 1;
  }

  100% {
    transform: translateY(108vh) rotate(720deg);
    opacity: .85;
  }
}

.cheer {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(.7);
  z-index: 140;
  pointer-events: none;
  opacity: 0;
  text-align: center;
  background: var(--surface);
  border: 2px solid var(--brand-line);
  border-radius: 20px;
  padding: var(--s5) var(--s7);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.cheer.on {
  animation: cheer 1900ms var(--ease) forwards;
}

.cheer b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.cheer span {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 6px;
}

.cheer .ring {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s3);
  border-radius: 50%;
  background: var(--brand-wash);
  border: 1.5px solid var(--brand-line);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
}

@keyframes cheer {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.7);
  }

  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }

  22% {
    transform: translate(-50%, -50%) scale(1);
  }

  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -58%) scale(.96);
  }
}

/* ============ PROFILE ============ */
.profhead {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-top: var(--s6);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-1);
  flex-wrap: wrap;
}

.avatar-lg {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--brand-wash);
  border: 2px solid var(--brand-line);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
}

.profhead h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.profhead .meta {
  color: var(--ink-2);
  font-size: 13.5px;
  margin-top: 4px;
}

.scorebox {
  margin-left: auto;
  text-align: right;
}

.scorebox .n {
  font-size: 32px;
  font-weight: 800;
  color: var(--brand-text);
  line-height: 1;
}

.scorebox .l {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

.polrow {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: var(--s5);
  box-shadow: var(--shadow-1);
  margin-top: var(--s3);
  min-height: 76px;
  transition: border-color var(--dur) var(--ease);
}

.polrow:hover {
  border-color: var(--brand-line);
}

.polrow .ico {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.polrow h4 {
  font-size: 15px;
  font-weight: 600;
}

.polrow p {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}

.polrow .tail {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}

.polrow .tail b {
  font-size: 15px;
  font-weight: 700;
}

.tag-live {
  display: inline-block;
  background: var(--brand-wash);
  color: var(--brand-deep);
  border: 1px solid var(--brand-line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  margin-top: 5px;
}

.menu {
  margin-top: var(--s4);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.menu button {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  text-align: left;
  padding: var(--s4) var(--s5);
  min-height: 60px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 500;
  transition: background var(--dur) var(--ease);
}

.menu button:last-child {
  border-bottom: 0;
}

.menu button:hover {
  background: var(--surface-sunken);
}

.menu .icon:first-child {
  color: var(--brand-deep);
  flex-shrink: 0;
}

.menu .chev {
  margin-left: auto;
  color: var(--ink-3);
}

.menu button.danger {
  color: var(--danger);
}

.menu button.danger .icon:first-child {
  color: var(--danger);
}

/* ---- support dialog ---- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(26, 26, 29, .5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
}

.scrim.on {
  display: flex;
  animation: fade 180ms var(--ease) both;
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.dialog {
  background: var(--surface);
  border-radius: 20px;
  padding: var(--s6);
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  animation: rise 240ms var(--ease) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.97)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.dialog .ring {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--s4);
  border-radius: 50%;
  background: var(--brand-wash);
  border: 1.5px solid var(--brand-line);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
}

.dialog h2 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.dialog p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-top: var(--s3);
}

.dialog .eta {
  margin-top: var(--s5);
  background: var(--surface-sunken);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
}

.dialog .btn {
  margin-top: var(--s5);
  width: 100%;
}

/* ============================================================
   HOME — light landing, same white-and-gold system as the app.
   ============================================================ */
body.dark {
  background: var(--bg);
}

body.dark .topbar {
  background: var(--charcoal);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

body.dark .subbar {
  display: none;
}

#view-home {
  color: var(--ink);
}

.dk {
  --dkpad: clamp(20px, 3.2vw, 56px);
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--dkpad);
}

.dk-sec {
  padding-top: var(--s8);
  padding-bottom: var(--s8);
}

/* ---- hero ---- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  padding: clamp(48px, 7vw, 96px) 0 var(--s8);
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--brand-text);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-h1 {
  font-size: clamp(40px, 5.4vw, 66px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.03;
  margin-top: var(--s5);
}

.hero-h1 .gold {
  display: block;
  background: var(--grad-brand-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.65;
  margin-top: var(--s5);
  max-width: 46ch;
}

.hero-cta {
  display: flex;
  gap: var(--s4);
  margin-top: var(--s6);
  flex-wrap: wrap;
}

.btn-glow {
  background: var(--grad-brand);
  color: #fff;
  border-radius: var(--r-md);
  padding: var(--s4) var(--s7);
  min-height: 58px;
  font-size: 16.5px;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(var(--brand-lite-rgb), .35), 0 10px 34px rgba(var(--brand-rgb), .34);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(var(--brand-lite-rgb), .5), 0 16px 44px rgba(var(--brand-rgb), .46);
}

.btn-quiet {
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s6);
  min-height: 58px;
  font-size: 15.5px;
  font-weight: 600;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.btn-quiet:hover {
  border-color: var(--brand);
  color: var(--brand-text);
  background: var(--brand-wash);
}

.hero-trust {
  display: flex;
  gap: var(--s5);
  margin-top: var(--s7);
  flex-wrap: wrap;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.hero-trust div {
  min-width: 120px;
}

.hero-trust b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-text);
  letter-spacing: -.02em;
}

.hero-trust span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 5px;
}

/* hero visual */
.slab {
  position: relative;
  aspect-ratio: 1/.95;
  border-radius: 22px;
  overflow: hidden;
  background: var(--brand-dark);
  box-shadow: 0 24px 56px rgba(30, 39, 73, .18);
  border: 1px solid var(--brand-line);
}

.slab .hero-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
  filter: contrast(1.04) brightness(1.02);
}

.slab .gold-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(12, 12, 14, 0) 38%,
      rgba(var(--brand-rgb), .30) 64%,
      rgba(140, 99, 12, .86) 86%,
      rgba(74, 50, 6, .97) 100%),
    linear-gradient(180deg, rgba(12, 12, 14, .28) 0%, rgba(12, 12, 14, 0) 26%);
}

.slab-badge {
  position: absolute;
  left: var(--s5);
  bottom: var(--s5);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.slab-badge .ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 14, 4, .8);
  border: 1px solid rgba(255, 225, 160, .45);
  color: var(--brand-on-dark);
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
}

.slab-badge .k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-on-dark-2);
}

.slab-badge .v {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
}

/* ---- cover at a glance ---- */
.glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: var(--s6);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.glance div {
  background: var(--surface);
  padding: var(--s5);
}

.glance dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.glance dd {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: var(--s3);
}

.glance dd small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 5px;
  letter-spacing: 0;
}

/* ---- two sides ---- */
.sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin-top: var(--s6);
}

.side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-1);
}

.side .ico {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--brand-deep);
  margin-bottom: var(--s5);
}

.side .who {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.side h3 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: var(--s3);
}

.side p {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
  margin-top: var(--s4);
}

/* ---- eligibility ---- */
.elig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4) var(--s6);
  margin-top: var(--s6);
}

.elig p {
  display: flex;
  gap: var(--s3);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

.elig .icon {
  color: var(--brand);
  flex-shrink: 0;
  margin-top: 2px;
}

.elig-note {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s6);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-md);
  padding: var(--s5);
}

.elig-note .icon {
  color: var(--brand-deep);
  flex-shrink: 0;
}

.elig-note p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
}

.elig-note b {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width:900px) {
  .glance {
    grid-template-columns: repeat(2, 1fr);
  }

  .sides,
  .elig {
    grid-template-columns: 1fr;
  }
}

@media (max-width:560px) {
  .glance {
    grid-template-columns: 1fr;
  }
}

/* ---- section headings ---- */
.dk-head {
  max-width: 46ch;
}

.dk-h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
}

.dk-rule {
  width: 64px;
  height: 3px;
  background: var(--brand);
  border-radius: 2px;
  margin-top: var(--s4);
}

.dk-sub {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
  margin-top: var(--s4);
}

/* ---- how it works ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  margin-top: var(--s6);
}

.step {
  border-top: 2px solid var(--line);
  padding-top: var(--s5);
  transition: border-color var(--dur) var(--ease);
}

.step:hover {
  border-top-color: var(--brand);
}

.step .n {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--brand-text);
}

.step h3 {
  font-size: 20px;
  font-weight: 700;
  margin-top: var(--s3);
  letter-spacing: -.015em;
}

.step p {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
  margin-top: var(--s3);
}

/* ---- faq ---- */
.faq {
  margin-top: var(--s6);
  border-top: 1px solid var(--line);
}

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

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s5) 0;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--s4);
}

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

.faq summary::after {
  content: "+";
  margin-left: auto;
  color: var(--brand-text);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.7;
  padding-bottom: var(--s5);
  max-width: 70ch;
}

/* ---- closing cta ---- */
.finale {
  text-align: center;
  margin-top: var(--s8);
  padding: var(--s8) 0;
  border-top: 1px solid var(--line);
}

.finale h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.finale p {
  color: var(--ink-2);
  font-size: 16.5px;
  margin-top: var(--s4);
}

.finale .btn-glow {
  margin-top: var(--s6);
}

.finale .fineprint {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: var(--s5);
}

@media (max-width:960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .steps {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
}

@media (max-width:560px) {

  .hero-cta .btn-glow,
  .hero-cta .btn-quiet {
    width: 100%;
  }
}

/* ============ TOAST ============ */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s6);
  z-index: 120;
  transform: translateX(-50%) translateY(90px);
  opacity: 0;
  pointer-events: none;
  background: var(--charcoal);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: var(--s4) var(--s6);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
  max-width: calc(100vw - 32px);
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}

.toast.on {
  transform: translateX(-50%);
  opacity: 1;
}

/* ============================================================
   STEP 1 : PLAN — decision layer → comparison → disclosure
   Built entirely on the existing token set. No new colours.
   ============================================================ */

/* ---- section heads ---- */
.plan-head {
  padding-top: var(--s6);
  max-width: 66ch;
}

.planzone .sec-title {
  font-weight: 600;
  letter-spacing: -.03em;
}

.plan-head .sec-title {
  font-size: var(--t-page);
  line-height: 1.08;
  margin-top: var(--s3);
}

.planzone .page-sub {
  font-size: 15px;
  line-height: 1.6;
}

.planzone .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}

.plan-head .page-sub {
  margin-top: var(--s3);
}

.sec-block {
  padding-top: var(--s8);
}

.sec-block .page-sub {
  margin-top: var(--s3);
}

/* ---- the rail of three product cards ----
   Layout follows a modular pricing-card pattern: header → headline figure →
   price and CTA → named feature modules → flat checklist → full detail.
   Every module is a bounded group with an uppercase header and `label · chip`
   rows, so the three cards compare horizontally without being read.
   ------------------------------------------------------------------------ */
.rail-wrap {
  margin-top: var(--s6);
}

.plan-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  align-items: stretch;
  list-style: none;
}

.pcard {
  --accent: var(--brand-deep);
  --accent-wash: var(--brand-wash);
  --accent-line: var(--brand-line);
  --mod-surface: var(--surface);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s5) var(--s5);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.pcard::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 2px;
  background: var(--accent);
  opacity: .5;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.pcard.featured::before {
  opacity: 1;
}

.pcard:hover {
  box-shadow: var(--shadow-1);
}

.pcard[data-on="true"] {
  border-color: var(--accent);
  box-shadow: var(--shadow-1);
}

.pcard[data-plan="job"] {
  --accent: var(--income);
  --accent-wash: var(--income-wash);
  --accent-line: var(--income-line);
}

.pcard.featured {
  background: var(--surface-warm);
  border-color: var(--brand-line);
  --mod-surface: var(--surface);
}

.pcard.featured::before {
  background: var(--grad-brand);
}

/* 1 — badge rail, reserved on every card */
.pc-badge {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-deep);
  background: var(--surface);
  border: 1px solid var(--brand-line);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
}

.pc-badge .icon {
  width: 12px;
  height: 12px;
}

/* 2 — header */
.pc-head {
  min-height: var(--band-head, 136px);
}

.pc-brow {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.pc-ico {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pc-ico .icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.pc-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pc-name {
  font-size: var(--t-card);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-top: var(--s4);
}

.pcard.featured .pc-name {
  color: var(--brand-text);
}

.pcard.featured .pc-hero-lbl {
  color: var(--brand-ink);
}

.pc-pitch {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: var(--s3);
}

/* 3 — headline figure and its quick metrics */
.pc-hero {
  min-height: var(--band-hero, 152px);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.pcard.featured .pc-hero {
  border-color: var(--brand-line);
}

.pc-hero-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.pc-hero-val {
  font-size: var(--t-hero);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin-top: var(--s3);
}

.pc-metrics {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--s3);
  list-style: none;
  /* two rows of pills, whether the copy wraps or not, so the bands below
     start on the same line across all three cards */
  min-height: 60px;
}

.pc-metrics li {
  background: var(--surface-sunken);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 500;
  max-width: max-content;
  color: var(--ink);
}

.pcard.featured .pc-metrics li {
  background: var(--surface);
}

/* 4 — price, CTA and its footnote, high on the card */
.pc-buy {
  min-height: var(--band-buy, 146px);
  margin-top: var(--s5);
}

.pc-price {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
}

.pc-price b {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.03em;
}

.pc-price .per {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
}

.pc-price s {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
}

.pc-cta {
  width: 100%;
  margin-top: var(--s4);
  min-height: 50px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r-md);
}

.pcard:not(.featured) .pc-cta {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

.pcard:not(.featured) .pc-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pc-cta[aria-pressed="true"] {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}

.pcard:not(.featured) .pc-cta[aria-pressed="true"] {
  background: var(--charcoal);
  color: #fff;
}

.pc-cta[aria-pressed="true"]:hover {
  color: #fff;
}

.pc-note {
  display: block;
  text-align: center;
  margin-top: var(--s3);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.4;
}

.pc-note b {
  font-weight: 600;
  color: var(--ink);
}

/* 5 & 6 — named feature modules */
.pc-mod {
  margin-top: var(--s4);
  background: var(--mod-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.pcard.featured .pc-mod {
  border-color: var(--brand-line);
}

.pc-mod-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pcard.featured .pc-mod-head {
  border-color: var(--brand-line);
}

.pc-mod-head .icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
  stroke-width: 1.6;
}

.pc-mod-body {
  padding: 0 var(--s4);
}

.pc-mod-foot {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-height: 46px;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.4;
}

.pcard.featured .pc-mod-foot {
  border-color: var(--brand-line);
}

.pc-mod-foot .icon {
  width: 14px;
  height: 14px;
  color: var(--ink-3);
  flex-shrink: 0;
  margin-top: 1px;
  stroke-width: 1.6;
}

/* the row that carries the whole comparison: label on the left, value chipped right */
.pc-row {
  /* The chip is nowrap and unshrinkable, so a long label like
     "Hospitalisation" beside "Refer to Hospicash" used to overlap it on a
     narrow card. Wrapping lets the chip drop to its own line instead. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  min-height: 54px;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.pc-row:last-child {
  border-bottom: 0;
}

.pcard.featured .pc-row {
  border-color: var(--brand-line);
}

.pc-row>.icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex: 0 0 auto;
  stroke-width: 1.8;
}

.pc-row .lbl {
  flex: 1 1 auto;
  min-width: 104px;
  font-weight: 500;
  line-height: 1.35;
}

.pc-row .chip {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  max-width: 100%;
  background: var(--surface-sunken);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.pcard.featured .pc-row .chip {
  background: var(--brand-wash);
  color: var(--brand-ink);
}

.pc-row.on .chip {
  background: var(--brand-wash);
  color: var(--brand-ink);
}

.pc-row.off {
  color: var(--ink-2);
}

.pc-row.off>.icon {
  color: var(--ink-3);
}

.pc-row.off .lbl {
  font-weight: 400;
}

.pc-row.off .chip {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 500;
}

/* 7 — flat checklist */
.pc-list {
  list-style: none;
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
  min-height: var(--band-list, 112px);
  align-content: start;
}

.pc-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: 13px;
  line-height: 1.4;
}

.pc-list .icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
  stroke-width: 1.8;
}

/* 8 — full detail */
.pc-more {
  margin-top: auto;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.pcard.featured .pc-more {
  border-color: var(--brand-line);
}

.pc-more summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
}

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

.pc-more-ico {
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pc-more-ico .icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.6;
}

.pc-more-txt {
  min-width: 0;
}

.pc-more-txt b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.pc-more-txt span {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 2px;
}

.pc-more summary::after {
  content: "";
  margin-left: auto;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}

.pc-more[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.pc-more-body {
  padding-top: var(--s3);
  animation: disclose 240ms var(--ease) both;
}

@keyframes disclose {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* a quiet third action: straight to this product's policy detail */
.pc-know {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: var(--s3);
  min-height: 46px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.pc-know:hover {
  background: var(--surface-sunken);
  border-color: var(--accent);
  color: var(--accent);
}

.pcard.featured .pc-know:hover {
  background: var(--brand-wash);
  color: var(--brand-ink);
}

.pc-know .icon {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}

/* fact rows — label over value, ruled, never boxed */
.facts {
  display: grid;
  column-gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.facts>div {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.3;
}

.facts dd {
  font-size: 13.5px;
  font-weight: 500;
  margin-top: 5px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.pcard .facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s4);
}

.pcard .facts dd {
  font-size: 12.5px;
}

.mini-h {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}

/* payout progression */
.paysteps {
  list-style: none;
  display: grid;
}

.paysteps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s4);
  row-gap: 2px;
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}

.paysteps li:last-child {
  border-bottom: 0;
}

.ps-day {
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 42px;
}

.ps-day b {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: var(--brand-deep);
  line-height: 1;
  letter-spacing: -.03em;
}

.ps-day span {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}

.ps-amt {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.ps-note {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.4;
}

/* required documents — outline pills */
.docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}

.docs>div {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s4);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.docs .icon {
  width: 15px;
  height: 15px;
  color: var(--accent, var(--brand-deep));
  flex-shrink: 0;
  stroke-width: 1.6;
}

/* wellness — filled micro-chips */
.pc-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pc-chips li {
  background: var(--brand-wash);
  border-radius: var(--r-pill);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-ink);
}

.pcard.featured .pc-chips li {
  background: var(--surface);
  border: 1px solid var(--brand-line);
}

/* ---- rail affordances (tablet + mobile) ---- */
.rail-hint {
  display: none;
  align-items: center;
  gap: var(--s2);
  font-size: 12px;
  color: var(--ink-2);
  margin-top: var(--s5);
}

.rail-hint .icon {
  width: 15px;
  height: 15px;
}

.rail-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: var(--s3);
}

.rail-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--line);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}

.rail-dots button[aria-current="true"] {
  width: 22px;
  background: var(--brand);
}

/* ---- selection messaging ---- */
.nudge {
  display: none;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  background: var(--surface);
  border: 1px dashed var(--brand);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

.nudge.on {
  display: flex;
}

.nudge .icon {
  color: var(--brand-deep);
  flex-shrink: 0;
}

.nudge button {
  margin-left: auto;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-deep);
  text-decoration: underline;
  min-height: 44px;
  padding: 0 var(--s2);
}

/* ---- sticky premium summary ---- */
.checkout {
  position: sticky;
  bottom: var(--s4);
  z-index: 40;
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 10px rgba(30, 39, 73, .06), 0 10px 30px rgba(30, 39, 73, .07);
}

.checkout .hint {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}

/* ---- comparison matrix ----
   Cells carry the actual figure rather than a tick, the recommended column
   runs as one continuous raised band, and the table closes with the totals
   and an action per column.
   ------------------------------------------------------------------------ */
.cmp {
  position: relative;
  margin-top: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.cmp-head,
.cmp-cat,
.cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}

/* header: each column gets an icon, a name and its price */
.cmp-head {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.cmp-head>div {
  padding: var(--s5) var(--s3) var(--s4);
  text-align: center;
}

.cmp-head>div:first-child {
  text-align: left;
  padding-left: var(--s5);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.cmp-corner b {
  color: var(--ink-2);
}

.cmp-head b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.cmp-head .cmp-hl b {
  color: var(--brand-ink);
}

.cmp-price {
  display: block;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 5px;
}

.cmp-price i {
  font-style: normal;
  font-size: 11px;
}

.cmp-tag-slot {
  display: block;
  min-height: 19px;
  margin-bottom: var(--s3);
}

.cmp-tag {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
}

/* the recommended column, drawn as one continuous band */
.cmp-hl {
  background: var(--surface-warm);
  box-shadow: inset 1px 0 0 var(--brand-line), inset -1px 0 0 var(--brand-line);
}

.cmp-head .cmp-hl {
  box-shadow: inset 1px 0 0 var(--brand-line), inset -1px 0 0 var(--brand-line), inset 0 1px 0 var(--brand-line);
  border-radius: 0 var(--r-lg) 0 0;
}

.cmp>*:last-child .cmp-hl {
  box-shadow: inset 1px 0 0 var(--brand-line), inset -1px 0 0 var(--brand-line), inset 0 -1px 0 var(--brand-line);
  border-radius: 0 0 var(--r-lg) 0;
}

/* category bands carry a line of context, not just a label */
.cmp-cat {
  border-top: 1px solid var(--line);
}

.cmp-cat>div {
  padding: var(--s6) var(--s3) var(--s4);
}

.cmp-cat>div:first-child {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-left: var(--s5);
}

.cmp-cat .icon {
  width: 19px;
  height: 19px;
  color: var(--brand-deep);
  flex-shrink: 0;
  stroke-width: 1.75;
}

.cmp-cat b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--ink);
}

.cmp-row {
  border-top: 1px solid var(--line);
}

.cmp-row>div {
  padding: var(--s3) var(--s3);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmp-row>div:first-child {
  justify-content: flex-start;
  padding-left: var(--s5);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
}

.cmp-row:hover>div {
  background: rgba(0, 0, 0, .014);
}

.cmp-row:hover>.cmp-hl {
  background: var(--brand-hover-warm);
}

/* plain figures, so the columns read as columns */
.cmp-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  text-align: center;
}

.cmp-hl .cmp-val {
  font-weight: 600;
  color: var(--brand-ink);
}

.cmp-yes {
  color: var(--brand-deep);
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

.cmp-no {
  color: var(--ink-2);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
}

/* totals close the argument */
.cmp-total {
  border-top: 1px solid var(--line);
}

.cmp-total>div {
  padding-top: var(--s5);
  padding-bottom: var(--s5);
  min-height: 0;
}

.cmp-total>div:first-child {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
}

.cmp-total b {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.025em;
}

.cmp-total .cmp-hl b {
  color: var(--brand-ink);
}

/* and an action per column */
.cmp-act {
  border-top: 1px solid var(--line);
}

.cmp-act>div {
  padding: var(--s5) var(--s4) var(--s5);
  align-items: flex-start;
}

.cmp-act>div:first-child {
  padding-left: var(--s5);
}

.cmp-cta {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s3);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.cmp-cta:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
}

.cmp-hl .cmp-cta {
  border-color: var(--brand);
  color: var(--brand-ink);
}

.cmp-cta[aria-pressed="true"] {
  background: var(--charcoal);
  border-color: transparent;
  color: #fff;
}

.cmp-cta[aria-pressed="true"]:hover {
  color: #fff;
}

/* scroll affordance, shown when the table has to scroll */
.cmp-hint {
  display: none;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  font-size: 12px;
  color: var(--ink-2);
}

.cmp-hint .icon {
  width: 15px;
  height: 15px;
}

/* ---- progressive disclosure accordion ---- */
.disclose {
  margin-top: var(--s5);
  display: grid;
  gap: var(--s3);
}

.dsc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.dsc[open] {
  border-color: var(--brand-line);
  box-shadow: var(--shadow-1);
}

.dsc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  min-height: 62px;
  font-size: 15px;
  font-weight: 500;
}

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

.dsc summary .ico {
  color: var(--ink-3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: color var(--dur) var(--ease);
}

.dsc summary .ico .icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.6;
}

.dsc[open] summary .ico {
  color: var(--brand-deep);
}

.dsc summary::after {
  content: "+";
  margin-left: auto;
  padding-left: var(--s3);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--ink-2);
}

.dsc[open] summary::after {
  content: "–";
  color: var(--brand-deep);
}

.dsc-body {
  padding: 0 var(--s5) var(--s5);
  animation: disclose 240ms var(--ease) both;
}

/* topic tabs — secondary navigation inside a policy panel */
.ptabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: var(--s4);
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}

.ptab {
  min-height: 44px;
  padding: 10px 15px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.ptab:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.ptab[aria-selected="true"] {
  background: var(--brand-wash);
  border-color: var(--brand-line);
  color: var(--brand-ink);
  font-weight: 600;
}

.ptab-panel {
  animation: disclose 200ms var(--ease) both;
}

.ptab-panel>.dsc-h:first-child {
  margin-top: var(--s4);
}

/* one grid for every block inside a policy panel */
.dsc .facts,
.dsc .excl,
.dsc .docs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s6);
}

.dsc .facts>div {
  padding: var(--s3) 0 var(--s4);
}

.dsc .excl>div {
  padding: var(--s3) 0 var(--s4);
}

/* a lone final item runs the full width, so no row is left half-ruled */
.dsc .facts>div:last-child:nth-child(odd),
.dsc .excl>div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.dsc .docs {
  row-gap: var(--s2);
}


.dsc-h {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s6) 0 var(--s3);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.dsc-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.dsc-note {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin-top: var(--s5);
  border-top: 1px solid var(--line);
  padding: var(--s4) 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

.dsc-note .icon {
  color: var(--brand-deep);
  flex-shrink: 0;
  margin-top: 1px;
}

.dsc-note b {
  color: var(--ink);
  font-weight: 600;
}

.excl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s7);
}

.excl>div {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}

/* covered reads green, not covered reads red — each set in a soft disc */
.excl .icon {
  width: 26px;
  height: 26px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--danger-wash);
  color: var(--danger);
  flex-shrink: 0;
  margin-top: 0;
  opacity: 1;
  stroke-width: 1.9;
}

.excl.incl .icon,
.excl .icon.cmp-yes {
  background: var(--ok-wash);
  color: var(--ok);
}

.excl b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.excl span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.5;
}

.wrows {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr 1fr;
}

.wrow {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s4);
}

.wrow .ico {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--brand-wash);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.wrow .ico .icon {
  width: 19px;
  height: 19px;
}

.wrow h4 {
  font-size: 14px;
  font-weight: 600;
}

.wrow p {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.5;
}

.planzone .faq summary {
  font-weight: 500;
}

.planzone .faq details p {
  font-size: 14px;
}

/* ---- back to top ---- */
.totop {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--s4) + 88px);
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.totop.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.totop:hover {
  border-color: var(--brand);
  color: var(--brand-text);
}

.totop .icon {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
  stroke-width: 2;
}

/* ---- support cards ---- */
.helpcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-top: var(--s5);
}

.helpcard {
  display: flex;
  align-items: center;
  gap: var(--s4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  min-height: 84px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.helpcard:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-1);
}

.helpcard .ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--brand-wash);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.helpcard .ico .icon {
  width: 20px;
  height: 20px;
}

.helpcard .txt b {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.helpcard .txt span {
  display: block;
  font-size: var(--t-body);
  color: var(--ink-2);
  margin-top: 4px;
  line-height: 1.45;
}

.helpcard .chev {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--ink-2);
}

/* ---- closing band ---- */
.finale-band {
  margin-top: var(--s8);
  background: var(--charcoal);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s6);
  text-align: center;
}

.finale-band h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.2;
}

.finale-band p {
  color: #c5c5cc;
  font-size: 14.5px;
  margin-top: var(--s3);
}

.finale-band .btn {
  margin-top: var(--s5);
}

.finale-band .fineprint {
  font-size: 11.5px;
  color: #b3b3bb;
  margin-top: var(--s5);
  line-height: 1.6;
}

/* ---- responsive ---- */
@media (max-width:1023px) {
  .plan-rail {
    display: flex;
    overflow-x: auto;
    gap: var(--s4);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: var(--dkpad);
    padding: var(--s2) var(--dkpad) var(--s5);
    margin: 0 calc(var(--dkpad) * -1);
    scrollbar-width: none;
  }

  .plan-rail::-webkit-scrollbar {
    display: none;
  }

  .pcard {
    flex: 0 0 min(82vw, 340px);
    scroll-snap-align: start;
  }

  .rail-hint,
  .rail-dots {
    display: flex;
  }

  .wrows,
  .excl,
  .helpcards {
    grid-template-columns: 1fr;
  }

  .dsc .facts,
  .dsc .excl,
  .dsc .docs {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  /* one scrollable row beats four stacked ones on a small screen */
  .ptabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--s4) * -1);
    padding: 0 var(--s4) var(--s4);
  }

  .ptabs::-webkit-scrollbar {
    display: none;
  }

  .ptab {
    flex: 0 0 auto;
  }

  .pcard .docs {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {

  .cmp-head,
  .cmp-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
  }

  .cmp-head>div,
  .cmp-row>div {
    padding: var(--s3) 4px;
  }

  .cmp-head>div:first-child,
  .cmp-row>div:first-child {
    padding-left: 10px;
  }

  .cmp-head {
    top: 56px;
  }

  .cmp-head b {
    font-size: 11px;
  }

  .cmp-head span {
    font-size: 9.5px;
  }

  .cmp-cat {
    padding: var(--s3);
    font-size: 10.5px;
    letter-spacing: .1em;
  }

  .cmp-row>div:first-child {
    font-size: 11px;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }

  .cmp-row .icon {
    width: 17px;
    height: 17px;
  }

  .dsc summary {
    padding: var(--s4);
    font-size: 14.5px;
    gap: var(--s3);
  }

  .dsc-body {
    padding: 0 var(--s4) var(--s4);
  }

  .helpcard {
    padding: var(--s4);
    gap: var(--s3);
  }

  .nudge {
    flex-wrap: wrap;
  }

  .nudge button {
    margin-left: 0;
  }

  .checkout .btn {
    width: 100%;
  }

  .finale-band {
    padding: var(--s6) var(--s5);
  }
}

/* Below ~360px a four-column matrix cannot hold the longest feature label and
   the product names at a legible size. Rather than shrink the type into
   unreadability, the matrix scrolls sideways at a fixed comfortable width. */
@media (max-width:1000px) {
  .cmp {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cmp::-webkit-scrollbar {
    display: none;
  }

  .cmp-head {
    position: static;
  }

  .cmp-head,
  .cmp-cat,
  .cmp-row {
    min-width: 760px;
  }

  .cmp-row>div:first-child,
  .cmp-cat>div:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }

  .cmp-head>div:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }

  .cmp-hint {
    display: flex;
  }
}

@media (max-width:640px) {

  .cmp-head,
  .cmp-cat,
  .cmp-row {
    min-width: 700px;
  }

  .cmp-head>div {
    padding: var(--s4) var(--s3) var(--s3);
  }

  .cmp-corner b {
    font-size: 13.5px;
  }

  .cmp-row>div {
    padding: var(--s3);
  }
}


/* ---- premium tier ----
   Complete Cover swaps its accent family for gold. Placed after every component
   rule so it wins the cascade on shared selectors such as .cmp-hl. */
.pcard.featured,
.cmp-hl {
  --brand: var(--prem);
  --brand-deep: var(--prem-deep);
  --brand-bright: var(--prem-bright);
  --brand-text: var(--prem-text);
  --brand-ink: var(--prem-ink);
  --brand-wash: var(--prem-wash);
  --brand-line: var(--prem-line);
  --brand-hover-warm: var(--prem-hover);
  --grad-brand: var(--grad-prem);
  --accent: var(--prem-deep);
  --accent-wash: var(--prem-wash);
  --accent-line: var(--prem-line);
}

.pcard.featured {
  background: var(--prem-wash);
}

.cmp-hl {
  background: var(--prem-wash);
}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px) {
  :root {
    --gutter: 28px;
  }

  .covgrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sumgrid,
  .figs,
  .pbgrid,
  .duo {
    grid-template-columns: 1fr;
  }

  .pbgrid .r {
    text-align: left;
  }
}

@media (max-width:640px) {
  :root {
    --gutter: 20px;
  }

  .amountcard .plan {
    text-align: left;
  }

  .checkout .btn {
    width: 100%;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .toast {
    bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   UNIFIED DECISION PAGE
   Understand → see the situations → choose → compare → continue.
   One narrative, one primary action at each stage. Built on the
   existing token set; no new colour families introduced.
   ============================================================ */

/* ---- 01 hero : decision-oriented, not a marketing splash ---- */
.hero-grid {
  padding: clamp(40px, 5.5vw, 76px) 0 clamp(32px, 4vw, 56px);
}

.hero-h1 {
  font-size: clamp(36px, 4.8vw, 58px);
}

.hero-lede {
  font-size: 16.5px;
  max-width: 44ch;
  margin-top: var(--s4);
}

.hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s6);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.hero-proof li {
  min-width: 112px;
}

.hero-proof b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--brand-text);
  font-variant-numeric: tabular-nums;
}

.hero-proof span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* the hero carries two actions: the gold primary and a quiet second */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}

.btn-glow {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
}

.cta-chev {
  transition: transform var(--dur) var(--ease);
}

.btn-glow:hover .cta-chev {
  transform: translateY(2px);
}

/* A bare <button> inherits neither the page font nor any box, which is why
   this CTA read as unstyled text: the refinement layer below gives it
   colour, fill, radius and the shine, but nothing was setting its
   geometry. Only the box lives here — surface treatment stays there so
   the ghost keeps matching the other quiet buttons. */
.btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 var(--s6);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width:640px) {
  .hero-cta {
    flex-direction: column;
  }

  .hero-cta .btn-glow,
  .hero-cta .btn-hero-ghost {
    width: 100%;
  }
}

.hero-fine {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: var(--s4);
  line-height: 1.6;
}

.slab {
  aspect-ratio: 1/.86;
}

/* ---- 02 the three situations, as a bridge into the choice ---- */
.sitband {
  padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}

.band-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sitgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

.sit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  gap: var(--s3);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.sit:hover {
  border-color: var(--brand-line);
  box-shadow: var(--shadow-1);
  transform: translateY(-2px);
}

.sit-ico {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--brand-wash);
  color: var(--brand-deep);
}

.sit-ico .icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.6;
}

.sit b {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.sit-txt {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.sit-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: var(--s2);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text);
}

.sit-go .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  transition: transform var(--dur) var(--ease);
}

.sit:hover .sit-go .icon {
  transform: translateX(3px);
}

.sit-prem {
  --brand-wash: var(--prem-wash);
  --brand-deep: var(--prem-deep);
  --brand-text: var(--prem-text);
  --brand-line: var(--prem-line);
  background: var(--prem-wash);
  border-color: var(--prem-line);
}

.sit-prem .sit-ico {
  background: var(--surface);
}

/* ---- 03 the choice ---- */
.planzone {
  padding-bottom: var(--s8);
}

.sec-choose {
  padding-top: clamp(40px, 5vw, 72px);
  scroll-margin-top: 76px;
}

.plan-head {
  padding-top: 0;
  max-width: 60ch;
}

.plan-head .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-text);
}

.step-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

.plan-head .sec-title {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
}

.sec-block {
  padding-top: clamp(44px, 5vw, 72px);
}

.page-fine {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: var(--s5);
  line-height: 1.6;
}

/* card : level 1 decides, level 2 explains */
.pcard {
  padding: var(--s5);
  border-radius: var(--r-lg);
}

.pcard.focusflash {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--brand-deep-rgb), .12), var(--shadow-2);
}

.pc-head {
  min-height: 0;
}

.pc-name {
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-top: var(--s5);
  /* the band holds two lines: above ~1200px every name fits on one, below it
     "Complete Cover" wraps, and all three must still start their figure
     on the same line either way */
  min-height: 80px;
}

@media (min-width:1200px) {
  .pc-name {
    min-height: 40px;
  }
}

.pcard.featured .pc-name {
  color: var(--prem-ink);
}

.pc-pitch {
  font-size: 14.5px;
  line-height: 1.6;
  margin-top: var(--s4);
  min-height: 48px;
}

.pc-head {
  min-height: 224px;
  padding-right: 0;
}

@media (min-width:1200px) {
  .pc-head {
    min-height: 172px;
  }
}

.pc-brow {
  margin-bottom: var(--s2);
}

.pc-kicker {
  letter-spacing: .2em;
}

.pc-price {
  align-items: baseline;
  gap: var(--s2) var(--s3);
  margin-bottom: var(--s3);
  /* fixed, not a floor: the combo carries a struck list price that would
     otherwise push its CTA a row below the other two */
  height: 74px;
  align-content: flex-start;
}

@media (min-width:1200px) {
  .pc-price {
    height: 48px;
  }
}

.pc-price b {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.035em;
}

.pc-price .per {
  font-size: 13.5px;
}

.pc-price s {
  font-size: 14px;
  order: -1;
}

.pc-badge {
  position: absolute;
  top: var(--s5);
  right: var(--s5);
  margin: 0;
  font-size: 9px;
  letter-spacing: .12em;
}

/* One dominant figure per card, two quiet supporting facts. Sub-captions
   moved into the disclosure — three type sizes in a 320px column was the
   source of the clutter, so the column now carries one. */
/* One dominant figure, its supporting facts as quiet pills. The clutter was
   never the pills — it was three type sizes stacked with no air. So the air
   is the fix: generous rules, one label size, one value size. */
.pc-figure {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

.pcard.featured .pc-figure {
  border-color: var(--prem-line);
}

.pc-fig-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pcard.featured .pc-fig-lbl {
  color: var(--prem-text);
}

.pc-fig-val {
  font-size: clamp(34px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  margin-top: var(--s4);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pcard.featured .pc-fig-val {
  color: var(--ink);
}

.pc-metrics {
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* align-content: flex-start; */
  gap: 8px;
  margin-top: var(--s5);
  list-style: none;
  /* two rows of pills whether the copy wraps or not, so the price and CTA
     below land on the same line across all three cards */
  min-height: 76px;
}

.pc-metrics li {
  background: var(--surface-sunken);
  border-radius: var(--r-pill);
  padding: 8px 15px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.3;
}

.pcard.featured .pc-metrics li {
  background: var(--surface);
  color: var(--prem-ink);
}

/* two actions, one hierarchy: select is primary, learn is quiet */
.pc-actions {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
}

.pc-actions .pc-cta {
  margin-top: 0;
}

.pc-learn {
  width: 100%;
  min-height: 46px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pc-learn:hover {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: var(--accent-line);
}

.pc-buy {
  min-height: 0;
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

.pcard.featured .pc-buy {
  border-color: var(--prem-line);
}

/* Every card reserves the same badge lane, whether or not it carries a badge.
   That keeps "Recommended" clear of the heading and keeps all three cards
   starting their header on the same line. */
.pcard {
  padding: calc(var(--s6) + 28px) var(--s5) var(--s5);
}

.pc-badge {
  top: var(--s5);
  right: var(--s5);
}

.pcard.featured .pc-buy {
  border-color: var(--brand-line);
}

.pc-cta {
  min-height: 52px;
}

.pc-more {
  margin-top: var(--s5);
  padding-top: var(--s4);
}

.pc-more-body {
  padding-top: var(--s4);
}

.pc-more-body .pc-mod:first-child {
  margin-top: 0;
}

.pc-list {
  margin-top: var(--s4);
  min-height: 0;
}

.pc-know {
  margin-top: var(--s5);
}

/* ---- 04 quick comparison ---- */
.qcmp {
  margin-top: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.qc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}

.qc-row>div {
  padding: var(--s4) var(--s2);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.qc-row>div:first-child {
  justify-content: flex-start;
  text-align: left;
  padding-left: var(--s5);
  font-size: 13.5px;
  color: var(--ink);
}

.qc-row+.qc-row {
  border-top: 1px solid var(--line);
}

.qc-head>div {
  padding-top: var(--s5);
  padding-bottom: var(--s4);
  align-items: flex-end;
}

.qc-head>div:first-child {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.qc-head b {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.qc-hl {
  background: var(--prem-wash);
  box-shadow: inset 1px 0 0 var(--prem-line), inset -1px 0 0 var(--prem-line);
}

.qc-head .qc-hl {
  box-shadow: inset 1px 0 0 var(--prem-line), inset -1px 0 0 var(--prem-line), inset 0 1px 0 var(--prem-line);
}

.qc-head .qc-hl b {
  color: var(--prem-ink);
}

.qcmp>.qc-row:last-child .qc-hl {
  box-shadow: inset 1px 0 0 var(--prem-line), inset -1px 0 0 var(--prem-line), inset 0 -1px 0 var(--prem-line);
}

.qc-price>div {
  background: var(--surface-sunken);
}

.qc-price>div:first-child {
  font-weight: 600;
}

.qc-price b {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.qc-price .qc-hl {
  background: var(--prem-hover);
}

.qc-price .qc-hl b {
  color: var(--prem-ink);
}

.qc-row .cmp-yes {
  color: var(--brand-deep);
}

.qc-hl .cmp-yes {
  color: var(--prem-deep);
}

.cmp-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  margin-top: var(--s4);
  min-height: 48px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.cmp-toggle:hover {
  border-color: var(--brand);
  color: var(--brand-text);
  background: var(--brand-wash);
}

.cmp-toggle .icon {
  transition: transform var(--dur) var(--ease);
}

.cmp-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.cmp-full {
  animation: disclose 260ms var(--ease) both;
}

.cmp-full .cmp {
  margin-top: var(--s4);
}

/* ---- 05 selected plan summary ---- */
.selsum {
  margin-top: clamp(44px, 5vw, 72px);
  background: var(--charcoal);
  border-radius: var(--r-lg);
  padding: var(--s6);
  color: #fff;
  animation: disclose 300ms var(--ease) both;
  scroll-margin-top: 88px;
}

.selsum-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s6);
  align-items: center;
}

.selsum .eyebrow {
  color: var(--brand-on-dark-2);
}

.ss-title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: -.025em;
  margin-top: var(--s2);
}

.ss-inc {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s4);
}

.ss-inc li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #d8dae0;
  line-height: 1.4;
}

.ss-inc .icon {
  width: 15px;
  height: 15px;
  color: var(--brand-bright);
  flex-shrink: 0;
  stroke-width: 2;
}

.ss-right {
  text-align: right;
  min-width: 210px;
}

.ss-price b {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.ss-price span {
  font-size: 14px;
  color: #b6bac4;
  margin-left: 4px;
}

.ss-meta {
  font-size: 11.5px;
  color: #9aa0ac;
  margin-top: 4px;
}

.ss-right .btn {
  width: 100%;
  margin-top: var(--s4);
  min-height: 54px;
}

.ss-fine {
  font-size: 11.5px;
  color: #9aa0ac;
  margin-top: var(--s3);
}

/* ---- 06 trust ---- */
.trustrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
}

.trustrow .underwriter,
.waitcard {
  margin-top: 0;
  background: var(--surface-sunken);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.waitcard .badge {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--charcoal);
  color: var(--brand-bright);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.waitcard h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
}

.waitcard p {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 3px;
}

.dsc-elig {
  margin-top: var(--s5);
}

.dsc-elig .elig {
  margin-top: var(--s3);
}

.dsc-elig .elig-note {
  margin-top: var(--s5);
}

.planzone .disclose {
  margin-top: var(--s3);
}

.planzone .helpcards {
  margin-top: var(--s6);
}

/* The sticky selection bar was removed: choosing a plan now advances straight
   to the details form, so there is no persistent bottom bar to style. */

/* A locked card must still be readable. Blocking selection is correct;
   blocking comprehension is not — so only the decision zone dims and only
   the CTA stops responding. The disclosure stays open to anyone. */
.pcard.blocked {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  user-select: auto;
}

.pcard.blocked .pc-head,
.pcard.blocked .pc-key,
.pcard.blocked .pc-buy {
  opacity: .45;
  transition: opacity var(--dur) var(--ease);
}

.pcard.blocked .pc-cta {
  pointer-events: none;
}

.pcard {
  scroll-margin-top: 84px;
}

.pc-more summary {
  scroll-margin-top: 96px;
}

/* Pagination dots stay 8px to the eye and 44px to the thumb. */
.rail-dots button {
  position: relative;
}

.rail-dots button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ---- responsive ---- */
@media (max-width:1023px) {
  .sitgrid {
    grid-template-columns: 1fr;
  }

  .sit {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3) var(--s4);
  }

  .sit-ico {
    flex-shrink: 0;
  }

  .sit b {
    flex: 1;
    min-width: 0;
  }

  .sit-txt {
    flex-basis: 100%;
  }

  .sit-go {
    margin-top: 0;
    padding-top: 0;
  }

  .trustrow {
    grid-template-columns: 1fr;
  }

  .selsum-in {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  .ss-right {
    text-align: left;
    min-width: 0;
  }
}

@media (max-width:640px) {
  .hero-grid {
    padding-top: var(--s6);
  }

  /* the alignment bands are a desktop-rail concern; on a swipe rail one card
     is on screen at a time, so they only add dead space */
  .pc-name {
    font-size: 26px;
    min-height: 0;
  }

  .pc-head {
    min-height: 0;
    padding-right: var(--s6);
  }

  .pc-pitch {
    min-height: 0;
  }

  .pc-metrics {
    min-height: 0;
  }

  .pc-price {
    height: auto;
    min-height: 0;
  }

  .pc-fig-val {
    font-size: 34px;
  }

  /* the smallest labels in the system get a floor on small screens */
  .pc-kicker {
    font-size: 11px;
  }

  .mini-h {
    font-size: 10.5px;
  }

  .ps-day span {
    font-size: 10px;
  }

  .pc-badge {
    font-size: 10px;
  }

  /* the situations band earns its place but shouldn't delay the decision */
  .sitband {
    padding-bottom: var(--s6);
  }

  .sitgrid {
    gap: var(--s3);
    margin-top: var(--s4);
  }

  .sit {
    padding: var(--s4);
    gap: var(--s2) var(--s3);
  }

  .sit-ico {
    width: 34px;
    height: 34px;
  }

  .sit-txt {
    font-size: 13px;
    line-height: 1.5;
  }

  .sec-choose {
    padding-top: var(--s7);
  }

  .hero-h1 {
    font-size: clamp(32px, 8.6vw, 42px);
  }

  .hero-lede {
    font-size: 15.5px;
  }

  .hero-proof {
    gap: var(--s4) var(--s5);
  }

  .hero-proof li {
    min-width: 96px;
  }

  .hero-proof b {
    font-size: 17px;
  }

  .hero-cta .btn-glow {
    width: 100%;
    justify-content: center;
  }

  .slab {
    aspect-ratio: 1/.78;
  }

  .qc-row>div {
    padding: var(--s3) 4px;
    min-height: 52px;
  }

  .qc-row>div:first-child {
    padding-left: var(--s4);
    font-size: 12px;
    line-height: 1.35;
  }

  .qc-head b {
    font-size: 11px;
  }

  .qc-price b {
    font-size: 13.5px;
  }

  .selsum {
    padding: var(--s5);
    border-radius: var(--r-md);
  }

  .ss-price b {
    font-size: 28px;
  }
}

@media (max-width:380px) {
  .qc-row {
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  }
}

/* ==================================================================
   REFINEMENT LAYER
   Appended last so it wins the cascade on shared selectors.
   Covers: gold/navy balance corrections, pill geometry, the 3D +
   shine button system, frosted icon wells, and the general lift in
   finish across the page.
   ================================================================== */

/* ---- 1 · text colour on the new gold fills -----------------------
   --grad-brand is gold now, so every surface that used to set #fff
   on it would fail contrast. Deep navy on champagne measures 7.7:1
   and reads as the luxury register the page is aiming for. ---- */
.btn-primary,
.btn-glow,
.pc-cta[aria-pressed="true"],
.ss-right .btn {
  color: var(--navy-deep);
}

.btn-primary:hover:not([disabled]),
.btn-glow:hover,
.pc-cta[aria-pressed="true"]:hover {
  color: var(--navy-deep);
}

.btn-primary .spinner {
  border-color: rgba(16, 40, 69, .32);
  border-top-color: var(--navy-deep);
}

/* Large filled surfaces stay navy: a gold slab this size would tip
   the page past 60% and cost the accent its authority. */
.amountcard {
  background: var(--grad-navy);
  color: #fff;
  box-shadow: var(--lift-navy);
}

.amountcard .lbl {
  color: var(--brand-on-dark-2);
  opacity: 1;
}

.radioseg label:has(input:checked) {
  background: var(--grad-navy);
  color: #fff;
}

.track>i {
  background: var(--grad-brand);
}

/* ---- 2 · pill geometry on every button ---- */
.btn,
.btn-glow,
.btn-quiet,
.btn-hero-ghost,
.pc-cta,
.pc-learn,
.pc-know,
.cmp-cta,
.cmp-toggle,
.next,
.coupon-row .btn {
  border-radius: var(--r-pill);
}

.ptab {
  border-radius: var(--r-pill);
}

.consent input {
  border-radius: 7px;
}

/* ---- 3 · the 3D + shine button system ---------------------------
   No borders anywhere: depth comes from a top highlight, a bottom
   lip and a coloured contact shadow. The sweep is a skewed
   highlight that crosses once on hover.
   ---- */
.btn,
.btn-glow,
.btn-quiet,
.btn-hero-ghost,
.pc-cta,
.cmp-cta,
.cmp-toggle {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  transition: transform 180ms var(--ease), box-shadow 220ms var(--ease),
    background 220ms var(--ease), color 180ms var(--ease);
}

.btn::after,
.btn-glow::after,
.btn-quiet::after,
.btn-hero-ghost::after,
.pc-cta::after,
.cmp-cta::after,
.cmp-toggle::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -80%;
  width: 42%;
  height: 140%;
  pointer-events: none;
  z-index: 1;
  transform: skewX(-22deg);
  opacity: 0;
  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .58) 48%,
      rgba(255, 255, 255, 0) 100%);
}

.btn:hover:not([disabled])::after,
.btn-glow:hover::after,
.btn-quiet:hover::after,
.btn-hero-ghost:hover::after,
.pc-cta:hover:not([disabled])::after,
.cmp-cta:hover::after,
.cmp-toggle:hover::after {
  animation: btnShine 820ms var(--ease) forwards;
}

@keyframes btnShine {
  0% {
    left: -80%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    left: 130%;
    opacity: 0;
  }
}

/* the sweep is brighter on dark fills, softer on pale ones */
.btn-quiet::after,
.btn-hero-ghost::after,
.cmp-toggle::after,
.pcard:not(.featured) .pc-cta:not([aria-pressed="true"])::after {
  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(224, 187, 98, .34) 48%,
      rgba(255, 255, 255, 0) 100%);
}

/* gold primaries */
.btn-primary,
.btn-glow {
  background: var(--grad-brand);
  box-shadow: var(--lift-gold);
  font-weight: 700;
  letter-spacing: -.005em;
}

.btn-primary:hover:not([disabled]),
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-gold-hi);
}

.btn-primary:active:not([disabled]),
.btn-glow:active {
  transform: translateY(1px);
  box-shadow: var(--lift-gold);
}

.btn-primary[disabled] {
  background: var(--brand-muted);
  color: #8b8577;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .05);
  transform: none;
  cursor: not-allowed;
}

/* quiet buttons — same 3D language, no outline */
.btn-ghost,
.btn-outline,
.btn-quiet,
.btn-hero-ghost,
.cmp-toggle,
.cmp-cta {
  background: linear-gradient(180deg, #fff, #f6f3ec);
  color: var(--navy-text);
  box-shadow: var(--lift-quiet);
}

.btn-ghost:hover,
.btn-outline:hover,
.btn-quiet:hover,
.btn-hero-ghost:hover,
.cmp-toggle:hover,
.cmp-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-quiet-hi);
  color: var(--brand-text);
  background: linear-gradient(180deg, #fff, var(--gold-50));
}

.btn-ghost:active,
.btn-outline:active,
.btn-quiet:active,
.btn-hero-ghost:active,
.cmp-toggle:active,
.cmp-cta:active {
  transform: translateY(1px);
  box-shadow: var(--lift-quiet);
}

/* card CTAs: idle is a raised champagne tile, chosen is a navy slab so the
   selected state can never be confused with the gold call to action */
.pcard:not(.featured) .pc-cta {
  background: linear-gradient(180deg, #fffdf6, #f4e7c9);
  color: var(--gold-700);
  box-shadow: var(--lift-gold);
  border: 0;
}

.pcard:not(.featured) .pc-cta:hover {
  background: linear-gradient(180deg, #fffefa, #f0dcb0);
  color: var(--gold-800);
  box-shadow: var(--lift-gold-hi);
  transform: translateY(-2px);
}

.pcard.featured .pc-cta {
  background: var(--grad-prem);
  box-shadow: var(--lift-gold);
  border: 0;
}

.pcard.featured .pc-cta:hover {
  box-shadow: var(--lift-gold-hi);
  transform: translateY(-2px);
}

.pc-cta[aria-pressed="true"],
.pcard:not(.featured) .pc-cta[aria-pressed="true"] {
  background: var(--grad-navy);
  color: #fff;
  box-shadow: var(--lift-navy);
}

.pc-cta[aria-pressed="true"]:hover,
.pcard:not(.featured) .pc-cta[aria-pressed="true"]:hover {
  color: #fff;
  box-shadow: var(--lift-navy-hi);
  transform: translateY(-2px);
}

.pc-cta {
  min-height: 52px;
  font-size: 15px;
  font-weight: 700;
}

/* the remaining outlined controls lose their hairlines too */
.btn-outline {
  border: 0;
}

.cmp-cta {
  background: linear-gradient(180deg, #fff, #f6f3ec);
  border: 0;
}

.cmp-hl .cmp-cta {
  background: var(--grad-prem);
  color: var(--navy-deep);
  box-shadow: var(--lift-gold);
}

.cmp-cta[aria-pressed="true"] {
  background: var(--grad-navy);
  color: #fff;
  box-shadow: var(--lift-navy);
}

.pc-learn,
.pc-know {
  border: 0;
}

.pc-learn:hover,
.pc-know:hover {
  color: var(--brand-text);
}

.method,
.input,
.tel,
.polrow {
  border-width: 2px;
}

/* ---- 4 · frosted icon wells ------------------------------------
   The navy discs were the heaviest blue on the page and pulled the
   ratio the wrong way. Glass keeps the shape and gives back the gold.
   ---- */
.underwriter .badge,
.waitcard .badge,
.note .ico,
.privacy .ico,
.lineitem .ico,
.policy-id .ico,
.method .ico,
.polrow .ico,
.side .ico,
.helpcard .ico,
.pc-ico,
.pc-more-ico,
.dsc summary .ico,
.avatar-lg,
.cheer .ring {
  background: var(--glass-bg);
  color: var(--gold-700);
  border: 0;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
}

.underwriter .badge,
.waitcard .badge {
  width: 42px;
  height: 42px;
}

.underwriter .badge .icon,
.waitcard .badge .icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}

/* the trust tiles themselves lift off the page rather than sitting in a well */
.trustrow .underwriter,
.trustrow .waitcard {
  background: linear-gradient(180deg, #fff, var(--gold-50));
  box-shadow: var(--lift-quiet);
  border-radius: var(--r-lg);
  padding: var(--s5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.trustrow .underwriter:hover,
.trustrow .waitcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-quiet-hi);
}

.underwriter h4,
.waitcard h4 {
  color: var(--navy-ink);
  letter-spacing: -.015em;
}

/* Job Loss keeps a navy well so the card rail reads two-gold-one-navy */
.pcard[data-plan="job"] .pc-ico {
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(238, 243, 250, .66));
  color: var(--navy-600);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(47, 99, 152, .30),
    0 1px 2px rgba(16, 40, 69, .10),
    0 6px 16px rgba(22, 52, 92, .14);
}

/* ---- 5 · the payee tile ---- */
.pc-payee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #fff, var(--gold-50)) !important;
  color: var(--brand-text) !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 0 0 1px var(--brand-line),
    0 1px 2px rgba(122, 90, 13, .09);
}

.pc-payee .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  flex-shrink: 0;
  color: var(--brand-deep);
}

.pcard[data-plan="job"] .pc-payee {
  color: var(--navy-text) !important;
  box-shadow: inset 0 0 0 1px var(--navy-line), 0 1px 2px rgba(16, 40, 69, .08);
  background: linear-gradient(180deg, #fff, var(--navy-100)) !important;
}

.pcard[data-plan="job"] .pc-payee .icon {
  color: var(--navy-600);
}

/* The payee pill pushes Job Loss onto a third row of pills. The band is
   sized for that worst case so all three cards start their price,
   CTA and disclosure on exactly the same line. */
.pc-metrics {
  min-height: 113px;
}

@media (max-width:640px) {
  .pc-metrics {
    min-height: 0;
  }
}

/* ---- 6 · premium finish ---------------------------------------- */

/* cards sit on light rather than in a box */
.pcard {
  border: 0;
  background: var(--surface);
  box-shadow: var(--lift-quiet);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.pcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-quiet-hi);
}

.pcard[data-on="true"] {
  box-shadow:
    inset 0 0 0 2px var(--accent),
    0 2px 6px rgba(16, 40, 69, .09),
    0 16px 38px rgba(16, 40, 69, .13);
}

.pcard.featured {
  background: linear-gradient(168deg, #fffdf7 0%, var(--prem-wash) 62%, #f8eed6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 6px rgba(122, 90, 13, .10),
    0 18px 44px rgba(189, 145, 48, .22);
}

.pcard.featured:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 3px 9px rgba(122, 90, 13, .12),
    0 26px 60px rgba(189, 145, 48, .30);
}

.pc-badge {
  background: var(--grad-prem);
  color: var(--navy-deep);
  border: 0;
  box-shadow: var(--lift-gold);
  font-weight: 800;
}

/* the hero slab and its gold wash, warmed to the new ramp */
.slab {
  border: 0;
  box-shadow: 0 28px 64px rgba(16, 40, 69, .20), 0 4px 12px rgba(16, 40, 69, .10);
}

.slab .gold-wash {
  background:
    linear-gradient(180deg,
      rgba(12, 12, 14, 0) 38%,
      rgba(224, 187, 98, .28) 64%,
      rgba(189, 145, 48, .84) 86%,
      rgba(122, 90, 13, .96) 100%),
    linear-gradient(180deg, rgba(12, 12, 14, .26) 0%, rgba(12, 12, 14, 0) 26%);
}

.slab-badge .ring {
  background: rgba(26, 20, 8, .62);
  box-shadow: inset 0 0 0 1px rgba(240, 214, 152, .55);
  backdrop-filter: blur(8px);
  color: var(--brand-on-dark);
  border: 0;
}

.badge-pill {
  background: linear-gradient(180deg, #fff, var(--gold-50));
  border: 0;
  box-shadow: inset 0 0 0 1px var(--brand-line), 0 2px 8px rgba(189, 145, 48, .14);
  color: var(--brand-text);
}

.hero-proof b {
  color: var(--brand-text);
}

.dk-rule {
  background: var(--grad-brand);
  height: 4px;
  width: 72px;
}

/* the comparison table, lifted and de-hairlined */
.cmp,
.qcmp {
  border: 0;
  overflow: hidden;
  box-shadow: var(--lift-quiet);
}

.qc-head {
  background: linear-gradient(180deg, #fff, #faf8f3);
}

.qc-hl,
.cmp-hl {
  background: var(--prem-wash);
}

.qc-price>div {
  background: #faf8f3;
}

.qc-price .qc-hl {
  background: var(--prem-hover);
}

.cmp-head {
  background: linear-gradient(180deg, #fff, #faf8f3);
}

.cmp-cat>div:first-child .icon {
  color: var(--brand-deep);
}

.cmp-yes,
.qc-row .cmp-yes {
  color: var(--brand-deep);
}

.qc-hl .cmp-yes,
.cmp-hl .cmp-yes {
  color: var(--prem-deep);
}

/* accordions and help cards pick up the same soft-raised treatment */
.dsc,
.helpcard,
.policy,
.profhead,
.menu,
.side {
  border: 0;
  box-shadow: var(--lift-quiet);
}

.helpcard:hover {
  box-shadow: var(--lift-quiet-hi);
  transform: translateY(-2px);
}

.dsc[open] {
  box-shadow: var(--lift-quiet-hi);
}

.elig-note,
.coupon-applied {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--brand-line);
}

/* the selected-plan band: navy slab, gold figure — the pairing in miniature */
.selsum {
  background: var(--grad-navy);
  box-shadow: 0 3px 10px rgba(14, 32, 56, .16), 0 22px 52px rgba(14, 32, 56, .24);
}

.ss-price b {
  color: var(--brand-on-dark);
}

.selsum .ss-title {
  color: #fff;
}

/* focus stays navy: a gold ring on a gold button is invisible */
:focus-visible {
  outline: 3px solid var(--navy-bright);
  outline-offset: 3px;
}

/* back-to-top sits above the fixed WhatsApp bubble (60px tall, 20px from the
   bottom edge) rather than behind it — that bubble carries z-index 9999. */
.totop {
  right: 20px;
  bottom: calc(20px + 60px + var(--s4));
  z-index: 10000;
  border: 0;
  box-shadow: var(--lift-quiet);
  background: linear-gradient(180deg, #fff, #f6f3ec);
}

.totop:hover {
  color: var(--brand-text);
  box-shadow: var(--lift-quiet-hi);
  transform: translateY(-2px);
}

/* the sticky mini-checkout keeps a warm frost rather than a grey hairline */
.checkout {
  border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(253, 249, 240, .92));
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--brand-line), 0 3px 12px rgba(16, 40, 69, .07), 0 14px 36px rgba(16, 40, 69, .10);
}

/* ---- 7 · closing band ------------------------------------------
   The page used to stop dead on the FAQ fine print. A navy slab with a
   gold action closes the argument, and it is the one place where blue
   carries real mid-tone surface rather than only type. ---- */
.closer {
  margin-top: clamp(48px, 6vw, 88px);
  background: var(--grad-navy);
  border-radius: clamp(18px, 2vw, 26px);
  padding: clamp(32px, 4vw, 56px);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(14, 32, 56, .16), 0 26px 60px rgba(14, 32, 56, .26);
}

.closer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(224, 187, 98, .20), transparent 58%),
    radial-gradient(80% 70% at 4% 96%, rgba(47, 99, 152, .35), transparent 60%);
}

.closer-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.closer-brow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-on-dark);
}

.closer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-bright);
  box-shadow: 0 0 0 4px rgba(224, 187, 98, .20);
  flex-shrink: 0;
}

.closer-h {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-top: var(--s4);
  max-width: 20ch;
}

.closer-sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: #c9d3e2;
  margin-top: var(--s4);
  max-width: 46ch;
}

.closer-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid rgba(224, 187, 98, .22);
}

.closer-proof li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #e3e9f2;
}

.closer-proof .icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
  color: var(--brand-bright);
  flex-shrink: 0;
}

.closer-act {
  text-align: right;
  min-width: 220px;
}

.closer-act .btn {
  width: 100%;
  min-height: 58px;
  font-size: 16px;
}

.closer-fine {
  font-size: 11.5px;
  color: #98a5b8;
  margin-top: var(--s3);
}

@media (max-width:860px) {
  .closer-in {
    grid-template-columns: 1fr;
  }

  .closer-act {
    text-align: left;
    min-width: 0;
  }

  .closer-h {
    max-width: none;
  }
}

/* A <legend> ignores its own top margin — it is placed by the fieldset's
   box — so "Payment method" was sitting on top of the coupon hint.
   The spacing has to live on the fieldset instead. */
#view-pay fieldset {
  margin-top: var(--s7);
}

/* ---- page brand mark -------------------------------------------
   The shared header is centred and carries no logo on desktop, so the
   top-left corner is free. At 1250px and below the header switches to
   its own full-width bar with a centred logo (css/header.css), so this
   one has to disappear there or the page shows two logos. Fixed,
   matching the header's own positioning, and just under it in the stack.
   ---- */
.ins-logo {
  display: none;
}

@media screen and (min-width:1251px) {
  .ins-logo {
    position: fixed;
    top: 0.75rem;
    left: clamp(20px, 3.2vw, 56px);
    z-index: 1105;
    /* below .headerMain (1110) */
    display: block;
    line-height: 0;
    transition: opacity var(--dur) var(--ease);
  }

  /* a stacked lockup (mark over wordmark over tagline), so it needs real
     height to stay legible — sized to sit inside the header's 6rem band */
  .ins-logo img {
    height: 72px;
    width: auto;
    display: block;
    object-fit: contain;
  }

  .ins-logo:hover {
    opacity: .82;
  }
}

/* ---- stacking against the shared header ------------------------
   .headerMain (css/header.css) is position:fixed at z-index:1110 —
   far above this page's own scale, which topped out at 200. Anything
   that must cover the whole viewport has to clear it, or it renders
   underneath the navbar. Kept in one block so the order stays
   obvious: scrim < cheer < confetti < skip-link.
   ---- */
.scrim {
  z-index: 2000;
}

.cheer {
  z-index: 2010;
}

.confetti {
  z-index: 2020;
}

.skip {
  z-index: 2030;
}

/* the toast still sits below a modal, but above the page and header */
.toast {
  z-index: 1990;
}

/* ---- advisor callback form ------------------------------------
   Shares the .dialog shell, but a form needs left-aligned labels and
   a wider box than the centred confirmation dialog it sits beside. */
.dialog-form {
  max-width: 440px;
  text-align: left;
  position: relative;
  max-height: calc(100vh - var(--s7));
  overflow-y: auto;
}

.dialog-form .ring {
  margin-left: 0;
  margin-right: 0;
}

.dialog-form h2 {
  text-align: left;
}

.dialog-form>p {
  text-align: left;
  font-size: 14px;
}

.dlg-x {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-3);
  background: var(--surface-sunken);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.dlg-x:hover {
  background: var(--line);
  color: var(--ink);
}

.advform {
  margin-top: var(--s5);
}

/* .field's default top margin is sized for the full-page forms */
.advform .field {
  margin-top: var(--s5);
}

.advform .field>label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: var(--s2);
}

.advform .input,
.advform .tel input {
  min-height: 52px;
  font-size: 15px;
}

.advform .btn {
  margin-top: var(--s6);
}

.advform .hint {
  margin-top: var(--s2);
  font-size: 12.5px;
}

.advform .legal {
  margin-top: var(--s4);
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: center;
}

@media (max-width:520px) {
  .dialog-form {
    max-width: 100%;
    padding: var(--s5);
  }
}

/* the FAQ was the one section with no accent at all, so it read as a
   grey tail after an otherwise warm page */
.faq {
  border-top-color: var(--brand-line);
}

.faq details {
  border-bottom-color: var(--brand-line);
}

.faq summary {
  transition: color var(--dur) var(--ease);
}

.faq summary::after {
  color: var(--brand-text);
  font-weight: 500;
}

.faq summary:hover,
.faq details[open] summary {
  color: var(--brand-text);
}

@media (prefers-reduced-motion:reduce) {

  .btn::after,
  .btn-glow::after,
  .btn-quiet::after,
  .btn-hero-ghost::after,
  .pc-cta::after,
  .cmp-cta::after,
  .cmp-toggle::after {
    display: none;
  }
}

/* =========================================
   FIXED-HEADER OFFSET
   .headerMain (css/header.css) is position:fixed, so page content
   starts underneath it. Offset the topmost in-flow element by the
   header height: 6rem desktop, 7rem at <=940px where the mobile
   .topContainer takes over.

   .subbar is hidden by body.dark, but that class is added by JS at
   the very end of the page, so .subbar IS the top element on first
   paint (and stays so if that script never runs). Offset whichever
   element is actually first: .subbar normally, #main once .subbar
   is hidden.
========================================= */
.subbar {
  margin-top: 6rem;
}

.subbar+#main {
  margin-top: 0;
}

#main {
  margin-top: 6rem;
}

body.dark .subbar+#main {
  margin-top: 6rem;
}

@media screen and (max-width:940px) {
  .subbar {
    margin-top: 7rem;
  }

  #main {
    margin-top: 7rem;
  }

  body.dark .subbar+#main {
    margin-top: 7rem;
  }
}

/* Mobile app view (?mobile=1) renders no <x-header />, so the offset above is
   dead space. Beats the desktop and <=940px rules on specificity, not order. */
body.no-topnav .subbar,
body.no-topnav #main,
body.no-topnav.dark .subbar+#main {
  margin-top: 0;
}


/* ======== Kept from the source file: phone product rows, re-skinned by the tokens above ======== */
/* ============ PHONE : all three products on one screen ============ */
.pm-sum{display:none;}

@media (max-width:900px){
  /* the collapsed row is the whole card until it is opened */
  .pcard{padding:0;overflow:hidden;}
  .pc-detail{display:none;padding:var(--s5);border-top:1px solid var(--line);}
  .pcard[data-open="true"] .pc-detail{display:block;animation:disclose 240ms var(--ease) both;}
  .pcard.featured .pc-detail{border-color:var(--prem-line);}

  .pm-sum{
    display:block;width:100%;text-align:left;
    padding:var(--s4) var(--s5) var(--s5);
  }
  .pm-top{display:flex;align-items:center;gap:var(--s3);}
  .pm-kicker{
    font-size:9.5px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-2);
  }
  .pm-aud{
    margin-left:auto;flex-shrink:0;
    font-size:10px;font-weight:600;letter-spacing:.02em;
    padding:4px 10px;border-radius:var(--r-pill);
    box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);
  }
  .pcard.featured .pm-aud{box-shadow:inset 0 0 0 1px var(--prem-line);color:var(--prem-ink);}
  .pm-name{
    display:block;font-size:20px;font-weight:700;letter-spacing:-.025em;
    line-height:1.2;margin-top:var(--s3);color:var(--ink);
  }
  .pcard.featured .pm-name{color:var(--prem-text);}
  .pm-pitch{
    display:block;font-size:13px;line-height:1.5;color:var(--ink-2);
    margin-top:6px;
    /* exactly the two lines the brief asks for */
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .pm-foot{
    display:flex;align-items:flex-end;gap:var(--s4);
    margin-top:var(--s4);padding-top:var(--s4);
    border-top:1px solid var(--line);
  }
  .pcard.featured .pm-foot{border-color:var(--prem-line);}
  .pm-cell{display:block;min-width:0;}
  .pm-cell.pm-r{margin-left:auto;text-align:right;}
  .pm-lbl{
    display:block;font-size:9px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-2);
  }
  .pm-val{
    display:block;font-size:17px;font-weight:700;letter-spacing:-.025em;
    margin-top:3px;color:var(--ink);font-variant-numeric:tabular-nums;
  }
  .pm-val i{font-style:normal;font-size:11px;font-weight:500;color:var(--ink-2);}
  .pm-val s{
    font-size:11px;font-weight:500;color:var(--ink-2);
    margin-right:5px;text-decoration:line-through;
  }
  .pm-chev{
    width:18px;height:18px;flex-shrink:0;color:var(--ink-2);
    margin-bottom:2px;transition:transform var(--dur) var(--ease);
  }
  .pcard[data-open="true"] .pm-chev{transform:rotate(180deg);}

  /* the page header gives its space back so the three rows fit */
  .plan-rail{display:grid;grid-template-columns:1fr;gap:var(--s3);}
  #choose .sec-head{padding-bottom:var(--s2);}
  #choose .page-sub{display:none;}
  .pc-metrics{height:auto !important;}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .pcard[data-open="true"] .pc-detail{animation:none;}
}

@media (max-width:900px){
  .pm-sum{padding:var(--s3) var(--s4) var(--s4);}
  .pm-name{font-size:18px;margin-top:6px;}
  .pm-pitch{font-size:12.5px;line-height:1.45;margin-top:5px;}
  .pm-foot{margin-top:var(--s3);padding-top:var(--s3);}
  .pm-val{font-size:16px;}
  .plan-rail{gap:10px;}
  /* a vertical stack does not swipe */
  .rail-hint,.rail-dots,.choose-hint{display:none !important;}
  #choose{padding-top:var(--s5);}
  #choose .sec-title{font-size:24px;}
}
@media (max-width:900px) and (max-height:800px){
  .pm-pitch{-webkit-line-clamp:2;font-size:12px;}
  .pm-sum{padding:10px var(--s4) var(--s4);}
  #choose .sec-title{font-size:21px;}
}

@media (max-width:900px){
  /* the summary already carries these five things */
  .pc-detail > .pc-head,
  .pc-detail > .pc-figure{display:none;}
  .pc-detail > .pc-metrics{margin-top:0;}
  .pc-detail{padding-top:var(--s4);}
}

/* audience chip inside the metric pills (carried over from the source file) */
.pc-metrics li.pc-aud{color:var(--ink);font-weight:600;}
.pcard.featured .pc-metrics li.pc-aud{color:var(--prem-ink);}



/* ======== Launch offer: struck list price + ₹100-off note ======== */
.pc-price s{font-size:14px;font-weight:500;color:var(--ink-3);text-decoration-thickness:1.5px;}
.pc-offer{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 var(--s3);
  padding:5px 11px;border-radius:var(--r-pill);
  background:var(--brand-wash);box-shadow:inset 0 0 0 1px var(--brand-line);
  font-size:11.5px;font-weight:600;line-height:1.3;color:var(--brand-text);
}
.pc-offer .icon{width:12px;height:12px;color:var(--brand-deep);flex-shrink:0;}
.pcard.featured .pc-offer{background:var(--surface);box-shadow:inset 0 0 0 1px var(--prem-line);color:var(--prem-text);}

.hero-proof b s{font-size:13px;font-weight:500;color:var(--ink-3);margin-right:5px;letter-spacing:0;}
.hero-proof li:last-child span{text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:600;color:var(--brand-text);}

.pm-offer{display:none;}
@media (max-width:900px){
  .pm-offer{display:block;margin-top:3px;font-size:10px;font-weight:600;color:var(--brand-text);letter-spacing:.01em;}
  .pcard.featured .pm-offer{color:var(--prem-text);}
  /* the offer line adds height on the price side only, so line the two
     figures up from the top instead of the bottom */
  .pm-foot{align-items:flex-start;}
  .pm-chev{align-self:center;}
}

.qc-price > div:first-child{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;}
.qc-offer{font-size:11px;font-weight:600;color:var(--brand-text);line-height:1.3;}
.qc-price b{display:inline-flex;align-items:baseline;flex-wrap:wrap;justify-content:center;gap:2px 6px;}
.qc-price b s{font-size:12px;font-weight:400;color:var(--ink-3);}
.cmp-price s{color:var(--ink-3);}