/* Homepage components share these semantic tokens; shared pages keep their theme. */
.home-page {
  --page-paper: #fafbf7;
  --page-ink: #193d33;
  --page-muted: #596b62;
  --page-sage: #e9efe3;
  --page-rule: #d8e0d4;
  --page-radius: 12px;
  --page-section-space: clamp(3.5rem, 7vw, 6rem);
  --primary: #245c46;
  --primary-hover: #183f31;
  --fg: var(--page-ink);
  --fg-muted: var(--page-muted);
  --sand-50: var(--page-paper);
  --sand-100: var(--page-sage);
  --r-card: var(--page-radius);
  --r-img: var(--page-radius);
  background: var(--page-paper);
}
.home-page .container{max-width:78rem}
.home-page h1,.home-page h2{font-weight:550;letter-spacing:-.035em;line-height:1.06}
.home-page h2{font-size:clamp(2rem,3.5vw,3.4rem)}
.home-page .btn{border-radius:var(--r-md);min-height:48px;padding-inline:1.25rem}
.home-page .topbar{background:var(--page-ink)}
.home-page .header{background:var(--surface);--header-fg:var(--page-ink)}
.home-page .header__inner{height:5.25rem;gap:var(--sp-4)}
.home-page .logo{flex-shrink:0;font-size:1.45rem}
.home-page .nav__links a{font-size:var(--text-sm);padding-inline:.55rem;white-space:nowrap}
.home-page .nav__toggle{border-radius:var(--r-md)}
.home-page .showcase{background:var(--page-paper);color:var(--page-ink);padding-block:clamp(2.5rem,5vw,4.5rem) var(--sp-12)}
.home-page .showcase__grid{gap:clamp(2rem,4vw,4rem)}
.home-page .showcase__eyebrow,.section-label{font-family:var(--font-sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--primary);margin-bottom:var(--sp-5)}
.home-page .showcase h1{max-width:14ch;font-size:clamp(2.8rem,4.8vw,4.8rem);color:var(--page-ink)}
.home-page .showcase__bn{color:var(--primary);font-size:1.25rem;margin-top:var(--sp-5)}
.home-page .showcase .lead{color:var(--page-muted);font-size:var(--text-lg);max-width:32rem;margin-top:var(--sp-5)}
.home-page .showcase .row{margin-top:var(--sp-6)}
.home-page .showcase__note{font-size:var(--text-sm);color:var(--page-muted);max-width:30rem}
.home-page .showcase__note .ico{color:var(--primary)}
.home-page .showcase .btn--primary{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.home-page .showcase .btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.home-page .showcase .btn--outline{background:var(--surface);color:var(--page-ink);border-color:var(--page-rule)}
.home-page .showcase .btn--outline:hover{background:var(--page-sage);border-color:var(--primary)}
.home-page .stage{max-width:35rem;background:var(--page-sage);border-radius:var(--page-radius);aspect-ratio:1.05;isolation:isolate}
.home-page .stage__disc{background:var(--brand-100);inset:16% 17%;opacity:.65}
.home-page .stage__orbit{inset:10% 10% 9%;border-color:var(--brand-300);opacity:.5}
.home-page .stage__card{top:43%;width:65%}
.home-page .stage__caption{top:68%;background:var(--surface);color:var(--page-ink);border:1px solid var(--page-rule);font-size:.8rem}
.home-page .feat{color:var(--page-ink);border:1px solid var(--page-rule);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:.6rem .75rem;gap:.5rem}
.home-page .feat strong{font-size:1rem}
.home-page .feat small{font-size:.72rem}
.home-page .feat__icon{width:2rem;height:2rem;border-radius:var(--r-md)}
.home-page .feat--1{left:5%;top:5%}
.home-page .feat--2{right:4%;top:13%}
.home-page .feat--3{right:3%;top:77%}
.home-page .feat--4{left:35%;bottom:3%}
.home-page .feat--5{left:3%;top:77%}
.home-page .facts{margin-top:0;border-radius:0;background:transparent;box-shadow:none;border-block:1px solid var(--page-rule)}
.home-page .fact{padding-block:var(--sp-6)}
.home-page .fact__icon{background:var(--page-sage);color:var(--primary);border-radius:var(--r-md)}
.home-page .section{padding-block:var(--page-section-space)}
.home-page #helps .section__head{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--sp-4) var(--sp-10);max-width:none;align-items:end}
.home-page #helps .section-label{grid-column:1/-1;margin-bottom:0}
.home-page #helps .section__head>p:last-child{max-width:30rem;margin-top:0}
.home-page .feature__img{aspect-ratio:1.35}
.home-page .feature h3{font-size:1.55rem;margin-top:var(--sp-2)}
.home-page .feature>p:last-child{font-size:var(--text-sm);max-width:36ch}
.home-page #plans{background:var(--page-sage)}
.home-page .plan{border-color:var(--page-rule);box-shadow:none;padding:var(--sp-6);border-top:3px solid var(--primary)}
.home-page .plan:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.home-page .plan__price{font-size:2.8rem}
.home-page .plan__price small{display:block;margin-top:var(--sp-2)}
.home-page .tabs{border-radius:var(--r-md);background:var(--surface);border:1px solid var(--page-rule)}
.home-page .tabs button{border-radius:var(--r-sm);min-height:44px}
.home-page .plans-note{background:transparent;padding-inline:0;border-radius:0}
.home-page .section--forest .section-label{color:var(--brand-200)}
.home-page .journey__media{aspect-ratio:4/5}
.home-page .truth{border-color:var(--page-rule)}
.home-page #agents .photo{max-height:45rem}
.home-page .levels{gap:0;border-block:1px solid var(--page-rule)}
.home-page .levels li{background:transparent;border:0;border-bottom:1px solid var(--page-rule);border-radius:0;padding-inline:0}
.home-page .levels li:last-child{border-bottom:0}
.home-page #priority{padding-top:0}
.home-page .pillar{border-color:var(--page-rule);box-shadow:none}
.home-page .pillar__icon{background:var(--page-sage);color:var(--primary);border-radius:var(--r-md)}
.home-page .pillar h3{font-size:1.35rem}
.home-page .people{gap:var(--sp-6)}
@media(min-width:62rem){.home-page .people{grid-template-columns:repeat(6,1fr);gap:var(--sp-5)}.home-page .person h3{font-size:1.1rem}}
.home-page .person__photo{aspect-ratio:1;filter:saturate(.8)}
.home-page .faq{gap:0;border-top:1px solid var(--page-rule)}
.home-page .faq details{background:transparent;border:0;border-bottom:1px solid var(--page-rule);border-radius:0}
.home-page .faq summary{padding-inline:0;min-height:64px}
.home-page .faq details p{padding-inline:0}
.home-page .band h2{max-width:17ch}
@media(min-width:62rem) and (max-width:72rem){.home-page .header__inner{gap:var(--sp-2)}.home-page .nav__links a{padding-inline:.35rem}.home-page .header__cta{padding-inline:.65rem}}
@media(max-width:24rem){.home-page .header__inner{gap:var(--sp-3)}.home-page .logo{font-size:1.15rem}}
@media(max-width:22.4rem){.home-page .logo{font-size:1.02rem}}
@media(max-width:62rem){.home-page .showcase__grid{grid-template-columns:1fr 1fr}.home-page .stage{font-size:.9rem}.home-page .showcase h1{font-size:clamp(2.5rem,5vw,3.7rem)}.home-page .feat small{display:none}.home-page .feat strong{font-size:.85rem}}
@media(max-width:48rem){.home-page .showcase__grid{grid-template-columns:1fr}.home-page .showcase h1{max-width:15ch}.home-page .stage{max-width:34rem}.home-page #helps .section__head{grid-template-columns:1fr}.home-page .feat small{display:block}.home-page .facts{grid-template-columns:1fr 1fr}.home-page .fact{padding:var(--sp-4);gap:var(--sp-2)}.home-page .fact strong{font-size:var(--text-sm)}.home-page .fact span{font-size:var(--text-xs)}.home-page .fact__icon{width:2rem;height:2rem}}
@media(max-width:40rem){.home-page .stage{aspect-ratio:auto;background:var(--page-sage);padding:var(--sp-6) var(--sp-4);gap:var(--sp-2)}.home-page .stage__card{top:auto;width:90%;margin-bottom:var(--sp-4)}.home-page .stage__caption{margin-bottom:var(--sp-3)}.home-page .feat{padding:.6rem;min-width:0}.home-page .feat strong{font-size:.95rem}.home-page .feat small{font-size:.7rem}.home-page .feat--5{justify-content:center}.home-page .showcase .row .btn{flex:1;min-width:140px}.home-page .tabs{width:100%}.home-page .tabs button{flex:1;padding-inline:.65rem}.home-page .section__head--row{align-items:stretch}.home-page .levels span{max-width:10rem}.home-page .person h3{font-size:1.1rem}}

/* Loyalty points: a benefit of every card */
.loyalty{display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.4rem;align-items:center;margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--r-card);background:var(--forest-900);color:#fff}
.loyalty__icon{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:16px;background:var(--marigold-400);color:var(--forest-900)}
.loyalty__icon .ico{width:1.7rem;height:1.7rem}
.loyalty__tag{font-size:var(--text-sm);font-weight:600;color:var(--marigold-400)}
.loyalty h3{margin-top:.25rem;color:#fff}
.loyalty p:not(.loyalty__tag){margin-top:.4rem;max-width:62ch;color:rgb(255 255 255 / .78)}
@media (max-width:30rem){.loyalty{grid-template-columns:1fr}}

/* Why ONE Card: four plain promises, numbered like a printed leaflet */
.promise-wrap{display:grid;gap:clamp(1.5rem,4vw,3rem)}
@media (min-width:62rem){.promise-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);align-items:start}}
.promises{list-style:none;display:grid;gap:0 clamp(1.5rem,3vw,2.5rem);margin:0;padding:0}
@media (min-width:40rem){.promises{grid-template-columns:repeat(2,1fr)}}
.promises li{padding:1.4rem 0 1.6rem;border-top:1px solid var(--line)}
.promises__n{display:block;font-family:var(--font-display);font-size:.95rem;font-weight:600;letter-spacing:.04em;color:var(--marigold-700)}
.promises h3{margin-top:.45rem;font-size:1.25rem}
.promises p{margin-top:.45rem;color:var(--fg-muted)}

/* Plans: the hospital cover, right under the price */
.plan__cover{margin-top:.6rem;padding:.45rem .7rem;border-radius:8px;background:var(--brand-50);color:var(--brand-700);font-size:var(--text-sm)}
.plan__cover strong{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--brand-800,var(--brand-700))}
.plan--dark .plan__cover{background:rgb(255 255 255 / .08);color:rgb(255 255 255 / .85)}
.plan--dark .plan__cover strong{color:var(--marigold-400)}

/* An example year, set like a statement */
.example{display:grid;gap:clamp(1.5rem,4vw,3rem)}
@media (min-width:62rem){.example{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);align-items:start}}
.example__aside{margin-top:var(--sp-5);padding-left:1rem;border-left:3px solid var(--marigold-400);color:var(--ink-700)}
.statement{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;font-size:.9375rem}
.statement__head,.statement__row{display:grid;grid-template-columns:4.5rem 1fr 6.5rem;gap:1rem;padding:.95rem 1.25rem;align-items:baseline}
.statement__head{background:var(--sand-50);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
.statement__head span:last-child,.statement__row span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.statement__row+.statement__row{border-top:1px dashed var(--line)}
.statement__row span:first-child{color:var(--fg-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.statement__row span:last-child{font-family:var(--font-display);font-weight:600}
.statement__row.is-paid{background:var(--brand-50)}
.statement__row.is-paid span:last-child{color:var(--brand-700)}
.statement__row.is-new{border-top:2px solid var(--forest-900)}
@media (max-width:34rem){.statement__head{display:none}.statement__head,.statement__row{grid-template-columns:1fr auto;gap:.3rem .8rem}.statement__row span:nth-child(2){grid-column:1/-1;grid-row:2}}
/* small phones: the four facts put the icon above the words, so the words get the full width */
@media(max-width:30rem){.home-page .fact{flex-direction:column;gap:.55rem}}
/* the hero card is drawn larger on phones, so its text stays readable */
@media(max-width:40rem){.home-page .stage .ocard{font-size:clamp(.7rem,3.2vw,.9rem)}}
@media(max-width:36rem){.home-page .levels span{max-width:none}}