/* Shared base — tokens, reset, layout primitives, brand components, chrome — see /brand.css */

/* ============================================================ */
/* 1 · HERO — two-column at desktop, stacked at narrow            */
/* ============================================================ */
.hero { padding: var(--space-section-standard) 0 var(--space-section-standard); }
.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero .container {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-64);
  }
}
.hero h1 {
  max-width: 16ch;
}
.hero .descriptor {
  margin-top: var(--space-24);
  letter-spacing: 0.02em;
}
.hero .cta-row {
  display: flex; align-items: center; gap: var(--space-24);
  margin-top: var(--space-48);
  flex-wrap: wrap;
}

/* Micro-proof — full-width strip below the two-column grid */
.micro-proof {
  grid-column: 1 / -1;
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-stone-20);
  display: flex; align-items: center; gap: var(--space-24);
  flex-wrap: wrap;
  color: var(--color-stone-60);
}
.micro-proof .cert {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: var(--color-navy); font-weight: 500;
}
.micro-proof .cert svg { width: 18px; height: 18px; color: var(--color-navy); }
.micro-proof .sep {
  width: 1px; height: 14px; background: var(--color-stone-20);
  display: inline-block;
}

/* ============================================================ */
/* 6 · DATA-AS-IMAGERY                                            */
/*    Shared card chrome + per-card content. Two product-result   */
/*    cards on this page use the .rr-card chrome:                 */
/*      .rr-card.eligibility-card — hero ('not eligible · why')   */
/*      .rr-card.card-timeline    — plan section ('sign-up to     */
/*                                  first check · five minutes')  */
/*    Add .rr-card on the panel; add the specific card class for  */
/*    the content. Chrome lives once.                             */
/* ============================================================ */

/* Shared card chrome */
.rr-card {
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-soft);
  padding: var(--space-32);
  box-shadow: var(--shadow-card-hero);
}
.rr-card .card-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-mist);
  gap: var(--space-12);
}
.rr-card .card-meta .meta-left {
  display: inline-flex; align-items: center; gap: var(--space-12);
}
/* .label-s utility (on the element) holds the eyebrow recipe; this scope adds nothing. */
.rr-card .card-meta .brand-mark {
  width: 28px; height: 28px;
  color: var(--color-navy);
  display: block; flex-shrink: 0;
}
.rr-card .card-meta time {
  font-family: var(--font-mono); font-size: var(--type-label-s);
  color: var(--color-stone-60);
}
.rr-card .card-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-mist);
  font-family: var(--font-mono); font-size: var(--type-label-s);
  color: var(--color-stone-60);
  letter-spacing: 0.02em;
  text-align: right;
}

/* Eligibility card — content rules.
   Brand canon: a Medicare rejection is a product result, not an error.
   Royal marker, never red. Reason is the focal point; item is a footnote. */
.eligibility-card .single-finding {
  padding: var(--space-32) 0 var(--space-24);
  display: flex; flex-direction: column;
  gap: var(--space-24);
  align-items: flex-start;
}
.eligibility-card .pill {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  background: var(--color-mist);
  color: var(--verdict-not-eligible);
  white-space: nowrap;
}
.eligibility-card .pill svg {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--verdict-not-eligible);
}
/* In-card product result, NOT a customer pull-quote. Resets the brand
   blockquote element default (DM Serif Display) back to Inter — this is
   the eligibility-check finding text, a data/output register, not an
   editorial human voice. */
.eligibility-card .finding-reason {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 1.8vw + 1rem, 1.875rem);
  font-weight: 600;
  color: var(--color-midnight);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-inline-size: 24ch;
  border-inline-start: 2px solid var(--verdict-not-eligible);
  padding-inline-start: var(--space-20);
}
.eligibility-card .finding-item-foot {
  display: inline-flex; align-items: baseline; gap: var(--space-8);
  color: var(--color-stone-60);
  padding-left: var(--space-20);
}
.eligibility-card .finding-item-foot .item-no {
  font-family: var(--font-mono);   /* mono reset — keeper; size inherits .label-m */
  color: var(--color-stone-60); font-weight: 500;
}
/* 9px "MBS" superscript — a deliberate micro below the type scale, and a
   mono→sans reset for the prefix. Documented exception, not drift. */
.eligibility-card .finding-item-foot .item-no .mbs {
  font-family: var(--font-sans); font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--color-stone-60);
  margin-right: 4px;
}
.eligibility-card .finding-item-foot .item-name {
  color: var(--color-stone-60);
}
.eligibility-card .finding-item-foot .item-name::before {
  content: "· ";
  color: var(--color-stone-60);
  margin-right: 2px;
}

/* Timeline card — content rules. Two events with timestamps and a
   gap label naming the delta. Royal-outlined dots sit on a Stone-20
   vertical spine; chrome inherited from .rr-card. */
.card-timeline .timeline-events {
  list-style: none;
  padding: var(--space-24) 0;
  margin: 0;
}
.card-timeline .event {
  display: grid;
  grid-template-columns: 14px 64px 1fr;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) 0;
}
.card-timeline .event-dot {
  width: 10px; height: 10px;
  border: 1.5px solid var(--color-royal);
  background: var(--color-paper-dark);
  border-radius: var(--radius-pill);
  margin-left: 2px;
  position: relative;
  z-index: 1;
}
.card-timeline .event-time {
  font-family: var(--font-mono); font-size: var(--type-body-l);
  color: var(--color-midnight); font-weight: 500;
  font-feature-settings: "tnum" 1;
}
.card-timeline .event-text {
  color: var(--color-stone-60);
}
.card-timeline .event-gap {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--space-16);
  align-items: center;
  height: 32px;
  position: relative;
}
.card-timeline .event-gap::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--color-stone-20);
  transform: translateX(-50%);
}
.card-timeline .event-gap .gap-label {
  grid-column: 2;
  padding-left: 64px;
  font-family: var(--font-mono); font-size: var(--type-label-s);
  color: var(--color-stone-60);
  letter-spacing: 0.02em;
}

.check-caption {
  margin-top: var(--space-12); text-align: center;
  font-style: italic;
}

/* ============================================================ */
/* 7 · STORYBRAND BEATS                                           */
/* ============================================================ */

/* Problem */
.problem h2 {
  max-width: 28ch;
}
.problem .three-lines {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-32);
}
.problem .line {
  padding: var(--space-24);
  border-left: 2px solid var(--color-royal);
  padding-left: var(--space-24);
}
.problem .line .label-s { color: var(--color-royal); display: block; margin-bottom: var(--space-12); }
.problem .line p { color: var(--color-midnight); }

/* Proof bar */
/* Guide */
.guide .container-reading { text-align: left; }
.guide h2 {
  max-width: 26ch;
}
.guide .empathy {
  color: var(--color-midnight);
  margin-top: var(--space-32);
  max-width: 52ch;
}
.guide .authority {
  margin-top: var(--space-48);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-32);
}
@media (max-width: 640px) {
  .guide .authority { grid-template-columns: 1fr; }
}
.guide .authority .stat .label-text {
  color: var(--color-stone-60);
  margin-top: var(--space-8);
  line-height: 1.4;
}

/* Plan — Live the same day.
   Numbered-steps spine on the left (3 circles connected by a thin
   vertical line), sign-up-complete data card on the right at desktop.
   Stacks card-then-steps on mobile. Demo is a quiet support note
   below the whole block, framed as care, not a sales hook. */
.plan h2 {
  text-align: center;
  max-width: 18ch; margin: 0 auto;
}

.plan .signup-feature {
  margin-top: var(--space-64);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  align-items: center;
}
@media (min-width: 1024px) {
  .plan .signup-feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-64);
  }
}

/* Numbered-steps spine — outlined Royal circles, Stone-20 connecting line.
   The line is drawn per-step (::after on every non-last step), running from
   below the circle through the step's padding-bottom to the top of the next
   step's circle. Cleaner than a full-height line on the parent — and avoids
   the bug where the spine extended past the last circle into step 3's body. */
.plan .steps-list {
  list-style: none;
  padding: 0; margin: 0;
}
.plan .steps-list .step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-20);
  padding-bottom: var(--space-32);
  position: relative;
}
.plan .steps-list .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;       /* below the 32px circle */
  bottom: 0;       /* down through padding-bottom, touches top of next circle */
  left: 16px;      /* centre of the 32px circle */
  width: 1.5px;
  background: var(--color-stone-20);
  transform: translateX(-50%);
  z-index: 0;
}
.plan .steps-list .step:last-child {
  padding-bottom: 0;
}
.plan .steps-list .step .number {
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-royal);
  background: var(--color-paper-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
  color: var(--color-royal);
  position: relative; z-index: 1;
  flex-shrink: 0;
}
.plan .steps-list .step .step-content { padding-top: 2px; }
.plan .steps-list .step .step-title {
  font-weight: 600;
  color: var(--color-midnight); line-height: 1.4;
}
.plan .steps-list .step .step-body {
  margin-top: var(--space-8);
  color: var(--color-stone-60);
  line-height: 1.55;
  max-width: 40ch;
}
.plan .steps-list .step .step-body em {
  font-style: italic;
  color: var(--color-stone-60);
}

/* Optional step (step 3 — for the dev team).
   Eyebrow above the title; the circle is pushed down to align with
   the title (not the eyebrow). The connecting line from the prior
   step extends past its own boundary to reach the pushed circle. */
.plan .steps-list .step .step-label {
  display: block;
  margin-bottom: 6px;
  line-height: 1.2;
  color: var(--color-stone-60);
}
.plan .steps-list .step.step-optional .number {
  margin-top: 20px;
}
.plan .steps-list .step:has(+ .step.step-optional)::after {
  bottom: -20px;
}

.plan .signup-actions {
  margin-top: var(--space-32);
  padding-left: calc(32px + var(--space-20));
  display: flex; flex-wrap: wrap; gap: var(--space-16);
}

/* Quiet support note — single centered line below the feature */
.plan .support-note {
  margin-top: var(--space-64);
  text-align: center;
}
.plan .support-note a {
  color: var(--color-royal); font-weight: 500;
  white-space: nowrap;
}

/* Pricing teaser */
.pricing-teaser h2 {
  text-align: center;
  max-width: 22ch; margin: 0 auto;
}
.pricing-teaser .lead {
  text-align: center; max-width: 620px; margin: var(--space-24) auto 0;
}
.pricing-teaser .section-label {
  display: block; text-align: center; margin-bottom: var(--space-16);
}

/* "In every plan" — the equality move */
.pricing-teaser .included-every {
  margin-top: var(--space-48);
  max-width: 720px; margin-left: auto; margin-right: auto;
  padding: var(--space-32);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
}
.pricing-teaser .included-every .included-heading {
  text-align: center; margin-bottom: var(--space-20);
}
.pricing-teaser .included-every ul {
  list-style: none; display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12) var(--space-32);
}
@media (max-width: 640px) {
  .pricing-teaser .included-every ul { grid-template-columns: 1fr; }
}
.pricing-teaser .included-every li {
  color: var(--color-midnight);
  display: flex; gap: var(--space-12); align-items: baseline;
}
.pricing-teaser .included-every li::before {
  content: "✓"; color: var(--color-success-600); font-weight: 600;
  flex-shrink: 0;
}

/* Tier preview — three of the ten plans, volume + price only */
.pricing-teaser .tier-intro {
  text-align: center; margin-top: var(--space-64);
}
.pricing-teaser .tiers {
  margin-top: var(--space-24);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-24);
}
.pricing-teaser .tier {
  padding: var(--space-32);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  text-align: center;
}
.pricing-teaser .tier.featured {
  border-color: var(--color-navy);
  box-shadow: var(--shadow-card-elevated);
}
.pricing-teaser .tier .tier-volume {
  font-weight: 500;
  color: var(--color-stone-60); line-height: 1.4;
}
.pricing-teaser .tier .price {
  margin-top: var(--space-12); font-family: var(--font-mono); font-size: var(--type-title-l);
  color: var(--color-navy); font-weight: 500;
}
.pricing-teaser .tier .price .per {
  font-family: var(--font-sans); font-size: var(--type-body-s);
  color: var(--color-stone-60);
}
.pricing-teaser .tier .price-detail {
  margin-top: var(--space-4); color: var(--color-stone-60);
}
.pricing-teaser .see-all { text-align: center; margin-top: var(--space-48); }

/* Primary CTA section */
.cta-section { background: var(--color-mist); }
.cta-section h2 {
  text-align: center;
  max-width: 18ch; margin: 0 auto;
}
.cta-section .cta-options {
  margin-top: var(--space-32); display: flex; gap: var(--space-32);
  justify-content: center; flex-wrap: wrap;
}
.cta-section .cta-options .button-secondary { font-weight: 500; }

/* Failure stakes */
.failure-stakes h2 {
  max-width: 24ch;
}
.failure-stakes .stakes-list {
  margin-top: var(--space-48); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-32);
}
.failure-stakes .stake {
  padding: var(--space-24);
  background: var(--color-paper);
  border-left: 2px solid var(--color-stone-40);
}
.failure-stakes .stake h3 {
  color: var(--color-midnight); line-height: 1.4;
}
.failure-stakes .stake p {
  margin-top: var(--space-12);
}

/* Our impact — aggregate proof, calculated from real customer API usage */
.impact { background: var(--color-mist); }
.impact .container-content { text-align: center; }
.impact .label-s { display: block; margin-bottom: var(--space-24); }
.impact .impact-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-64);
  max-width: 720px; margin: 0 auto;
}
@media (max-width: 640px) {
  .impact .impact-stats { grid-template-columns: 1fr; gap: var(--space-32); }
}
.impact .impact-stats .stat .label-text {
  color: var(--color-stone-60);
  margin-top: var(--space-8); line-height: 1.45;
}
.impact .methodology {
  margin-top: var(--space-48);
}
.impact .methodology a {
  color: var(--color-royal); font-weight: 500;
  white-space: nowrap;
}

/* Success vision — customer story */
.success-vision .container-content {
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-48);
  align-items: center;
}
@media (min-width: 1024px) {
  .success-vision .container-content {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-64);
  }
}
/* blockquote styling comes from the brand-canon primitive in brand.css.
   Attribution lives inside <blockquote><footer><cite>...</cite></footer>
   per Roselli's a11y-screen-reader guidance; styling also from canon. */
.success-vision .outcome-stat {
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-stone-20);
}
@media (min-width: 1024px) {
  .success-vision .outcome-stat {
    padding-top: 0; padding-left: var(--space-48);
    border-top: none; border-left: 1px solid var(--color-stone-20);
  }
}
.success-vision .outcome-stat .desc {
  margin-top: var(--space-16); max-width: 32ch;
}