/* ============================================================
   TOKENS. Palette values unchanged from the locked system.
   Type scale rebuilt for a dark hero.
   ============================================================ */
:root{
  --green:#283D33;  --green-deep:#1f2f28;   --green-rgb:40,61,51;
  --green-dark:#18251f;
  --cream:#FAF7F2;  --cream-2:#F3EEE6;      --cream-rgb:250,247,242;
  --clay:#9F775E;   --clay-deep:#875f48;    --clay-deepest:#734F3C;
  --clay-rgb:159,119,94;
  --grey-deep:#6b746d;
  --clay-on-green:#d8a583;
  /* GOLD IS NEW. It is not in the locked AllCare palette. It exists on
     this page only, on one element, because the figure had to run hotter
     than clay could carry on forest. If it stays, Melinda has to add it
     to the system or it becomes an orphan colour. */
  --gold:#E7BE63;   --gold-lit:#FBE9BC;   --gold-deep:#C79A3C;
  --text:#2b3730;   --muted:#5c665e;
  --on-green:#FAF7F2; --on-green-muted:#a9b8ad;
  --line:rgba(var(--green-rgb),.13);
  --line-on-green:rgba(var(--cream-rgb),.16);

  --fs-hero:clamp(2.3rem,4.4vw,3.5rem);
  --fs-d2:clamp(2rem,3.6vw,3rem);
  --fs-d4:clamp(1.7rem,2.7vw,2.2rem);
  --fs-d5:clamp(1.18rem,1.8vw,1.38rem);
  --fs-quote:clamp(1.05rem,1.4vw,1.16rem);
  --fs-stat:clamp(3rem,6vw,5rem);
  --fs-calc:clamp(3.1rem,6vw,4.5rem);

  --fs-lead:clamp(1.15rem,1.5vw,1.3rem);
  --fs-body-lg:1.14rem;
  --fs-body:1.0625rem;
  --fs-body-sm:1rem;
  --fs-meta:.9375rem;
  --fs-kicker:.8125rem;

  --lh-display-tight:1.02; --lh-heading:1.14;
  --lh-quote:1.5; --lh-lead:1.5; --lh-body:1.6; --lh-tight:1.5;
  --tr-display:-.022em; --tr-kicker:.14em;
  --r-pill:999px; --r-media:4px; --r-panel:22px;
  --sh-2:0 8px 30px rgba(var(--green-rgb),.09);
  --sh-3:0 24px 64px rgba(0,0,0,.28);
  --maxw:1240px; --pad-wrap:24px;
  --bay:clamp(60px,7.2vw,104px);
  --rail-w:400px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font-body:'Figtree',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-display:'Newsreader',Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text);background:var(--cream);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);color:var(--green);font-weight:400;
  letter-spacing:var(--tr-display);text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-wrap)}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:var(--r-media)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-body);
  padding:18px 34px;border-radius:var(--r-pill);border:0;cursor:pointer;
  white-space:nowrap;letter-spacing:.005em;
  transition:transform .3s var(--ease),background .3s ease,box-shadow .3s ease}
.btn:active{transform:scale(.985)}
.btn-green{background:var(--green);color:var(--cream);
  box-shadow:0 6px 18px rgba(var(--green-rgb),.34)}
.btn-green:hover{background:var(--green-deep);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(var(--green-rgb),.42)}
.btn-cream{background:var(--cream);color:var(--green)}
.btn-cream:hover{background:#fff;transform:translateY(-2px)}

.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}

/* ============================================================
   HERO FIELD. Full bleed dark band behind the first grid row.
   Height is measured off .col-a by JS so the band always ends
   exactly where the hero content ends, at any width, with any
   headline length.
   ============================================================ */
.stage{position:relative}
.herofield{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;background:var(--green);z-index:0;overflow:hidden;
  border-bottom-left-radius:var(--r-panel);border-bottom-right-radius:var(--r-panel)}
.herofield::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 58% 74% at 20% 94%,rgba(var(--clay-rgb),.36),transparent 66%),
             radial-gradient(ellipse 62% 62% at 94% 2%,rgba(var(--clay-rgb),.15),transparent 70%),
             linear-gradient(160deg,rgba(0,0,0,.16),transparent 46%)}
.stage > .topbar,.stage > .shell{position:relative;z-index:1}

/* ============================================================
   TOP BAR. Sits on the dark field. No nav, per the single focused
   CTA rule in both references.
   ============================================================ */
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:22px;padding-bottom:6px}
.topbar img{height:25px;width:auto}
.topbar .tag{font-family:var(--font-display);font-size:var(--fs-body);
  color:var(--cream);white-space:nowrap;letter-spacing:var(--tr-display)}
@media (max-width:640px){ .topbar .tag{display:none} }

/* ============================================================
   SHELL
   ============================================================ */
.shell{display:grid;gap:var(--bay) 0;align-items:start;
  padding-top:clamp(30px,3.6vw,54px);padding-bottom:0}
.col-c{padding-bottom:var(--bay)}
.col-a,.col-b,.col-c{min-width:0}
@media (min-width:1040px){
  .shell{grid-template-columns:minmax(0,1fr) var(--rail-w);
    column-gap:clamp(32px,3.4vw,54px);row-gap:var(--bay)}
  .col-a{grid-column:1;grid-row:1}
  .col-c{grid-column:1;grid-row:2}
  /* No align-self here. The column has to STRETCH across both grid rows,
     otherwise it collapses to the card's own height and the sticky card
     has zero range to travel in, which is why it released a third of the
     way down the page. Sticky sits on the card, not the column. */
  .col-b{grid-column:2;grid-row:1 / span 2;align-self:stretch}
  .col-b .card{position:sticky;top:20px}
}

/* ============================================================
   HERO CONTENT. Headline left, Alli right, both inside col-a.
   Alli is anchored to the bottom of the column and the hero band
   ends at the same line, so she is cropped by the field rather
   than floating inside it.
   ============================================================ */
.hero{display:grid;align-items:end;gap:clamp(14px,2.4vw,30px);
  grid-template-columns:minmax(0,1fr) clamp(140px,26vw,255px)}
/* Say block is optically centred against her, not bottom aligned. Bottom
   aligning it left a 380px void above the headline at 1440. */
.hero-say{align-self:center;padding-bottom:clamp(10px,2.4vw,40px)}

.hero h1{font-size:var(--fs-hero);line-height:var(--lh-display-tight);
  color:var(--cream);text-wrap:initial}
.hero h1 em{font-style:italic;color:var(--clay-on-green)}

/* Alli. The clip wrapper is what makes her read as standing IN the band
   rather than pasted onto it: her lower edge is cut by the band, so the
   band and the figure share one line. Without the clip she overhangs
   onto the cream below and reads as a mistake. */
.hero-fig{position:relative;align-self:end}
.hero-clip{overflow:hidden;line-height:0}
.hero-fig img{width:100%;height:auto}
/* Desktop: the row gets a min-height so the band can be sized against the
   card rather than against Alli. She stretches to fill it and is cut by the
   band's bottom edge at whatever height that lands on. */
@media (min-width:760px){
  .hero{min-height:clamp(430px,42vw,560px)}
  .hero-fig{height:100%}
  .hero-clip{height:100%}
  .hero-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
}
/* Phone: she stays beside the headline instead of stacking, because
   stacking a 1290px tall figure pushed the number two screens down.
   A shorter bust crop is swapped in below, see <picture>. */
@media (max-width:759px){
  .hero{gap:10px;align-items:end;
    grid-template-columns:minmax(0,1fr) clamp(104px,27vw,132px)}
  .hero-clip{aspect-ratio:410/470}
}

/* ============================================================
   THE CARD. Calculator and form as one object.
   ============================================================ */
/* The calc half is now the same green as the band behind it, so the
   card loses its own edge on desktop. A hairline plus a tighter contact
   shadow gives it back without changing the fill. */
.card{background:var(--cream);border-radius:var(--r-panel);
  border:1px solid rgba(var(--cream-rgb),.18);
  box-shadow:var(--sh-3),0 2px 10px rgba(0,0,0,.22);overflow:hidden}
/* The calc half is a dark green panel. The glow that used to sit inside
   the small figure box now lights this whole half, so the answer still
   reads as lit without a box around it. */
.card-calc{padding:clamp(20px,2.2vw,26px) clamp(18px,2vw,22px) clamp(22px,2.4vw,28px);
  background:var(--green);position:relative;overflow:hidden}
.card-calc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 74% 60% at 82% 78%,rgba(231,190,99,.20),transparent 66%),
             radial-gradient(ellipse 66% 54% at 10% 8%,rgba(var(--clay-rgb),.20),transparent 70%)}
.card-calc > *{position:relative}
.klabel{font-size:var(--fs-kicker);font-weight:700;letter-spacing:var(--tr-kicker);
  text-transform:uppercase;color:var(--on-green-muted);margin-bottom:10px}

.stepper{display:flex;align-items:center;gap:4px;background:rgba(var(--cream-rgb),.07);
  border:1.5px solid var(--line-on-green);border-radius:var(--r-media);padding:5px;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.stepper:focus-within{border-color:var(--clay-on-green);background:rgba(var(--cream-rgb),.11);
  box-shadow:0 0 0 3px rgba(var(--clay-rgb),.28)}
.stepper input{flex:1;min-width:0;width:100%;text-align:center;padding:2px;
  font-family:var(--font-display);color:var(--on-green);background:transparent;border:0;
  line-height:1.1;font-variant-numeric:tabular-nums;-moz-appearance:textfield;
  font-size:clamp(1.8rem,2.6vw,2.1rem)}
.stepper input:focus{outline:none}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step-btn{flex:none;display:grid;place-items:center;border:0;padding:0;
  width:40px;height:40px;font-size:1rem;
  background:rgba(var(--cream-rgb),.10);border-radius:3px;color:var(--on-green);
  cursor:pointer;line-height:1;
  transition:background .18s ease,color .18s ease,transform .18s var(--ease)}
.step-btn:hover{background:var(--cream);color:var(--green)}
.step-btn:active{transform:scale(.9)}

.klabel-2{margin-top:16px;margin-bottom:8px}
.acuity{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  background:rgba(var(--cream-rgb),.08);border:1px solid var(--line-on-green);
  border-radius:var(--r-pill);padding:5px}
.acu{appearance:none;border:0;background:transparent;color:var(--on-green-muted);
  cursor:pointer;font-family:var(--font-body);font-weight:600;
  font-size:var(--fs-body-sm);padding:11px 6px;border-radius:var(--r-pill);
  white-space:nowrap;transition:background .22s var(--ease),color .22s ease,box-shadow .22s ease}
.acu:hover{color:#fff}
.acu[aria-pressed="true"]{background:var(--cream);color:var(--green);
  box-shadow:0 2px 10px rgba(0,0,0,.22)}

/* The number. No box. The half it sits in is already the dark panel, so
   an inset inside an inset was one frame too many. It is centred, it is
   the largest thing in the card, and it is the only gold on the page. */
.figure{margin-top:clamp(20px,2.6vw,28px);text-align:center;
  padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line-on-green)}
.figure .n{font-family:var(--font-display);font-size:var(--fs-calc);
  /* Not .92. background-clip:text clips the gradient to the line box, so a
     line-height under 1 shears the top and bottom off the dollar sign. */
  line-height:1.12;margin-top:-.06em;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--gold);
  /* Resting state is flat gold. The gradient is gold everywhere except a
     narrow lit band, and the animation parks at 0% and 100%, both of which
     land on pure gold. So the number never sits half lit in a screenshot,
     it just catches once every seven seconds. */
  background-image:linear-gradient(100deg,
    var(--gold) 0 40%,var(--gold-lit) 50%,var(--gold) 60% 100%);
  background-size:300% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:sheen 7s linear infinite;
  filter:drop-shadow(0 0 20px rgba(231,190,99,.3))}
@keyframes sheen{
  0%,66%{background-position:0 0}
  100%{background-position:100% 0}
}
.figure .l{margin-top:10px;color:#fff;font-size:var(--fs-body-sm);font-weight:600;
  line-height:var(--lh-tight)}
.figure .l span{color:var(--on-green-muted);font-weight:400}
.figure .l .mo{white-space:nowrap;color:inherit}
.figure .l b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}

/* Form half of the same card. Two up so the whole object stays
   inside one viewport on a laptop. */
.card-form{padding:clamp(16px,1.8vw,20px) clamp(18px,2vw,22px) clamp(18px,2vw,22px);
  background:var(--cream-2)}
.card-form h2{font-size:var(--fs-body-lg);font-family:var(--font-body);font-weight:700;
  letter-spacing:0;color:var(--green);margin-bottom:10px}
.fgrid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.field.wide{grid-column:1/-1}
.field label{display:block;font-size:var(--fs-kicker);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--grey-deep);margin-bottom:5px}
.field input{width:100%;padding:12px 14px;border-radius:var(--r-media);
  border:1.5px solid var(--line);background:#fff;color:var(--text);
  font-family:inherit;font-size:var(--fs-body-sm);
  transition:border-color .25s ease,box-shadow .25s ease}
.field input::placeholder{color:#a3ada5}
.field input:focus-visible{outline:none;border-color:var(--clay);
  box-shadow:0 0 0 3px rgba(var(--clay-rgb),.18)}
.field input[aria-invalid="true"]{border-color:var(--clay-deepest);
  background:rgba(var(--clay-rgb),.06)}
.err{display:block;margin-top:4px;font-size:var(--fs-kicker);
  color:var(--clay-deepest);font-weight:600}
.card-form .btn{width:100%;margin-top:13px;padding:16px 30px}
.fnote{margin-top:9px;font-size:var(--fs-kicker);color:var(--muted);
  line-height:var(--lh-tight);text-align:center}
.fnote a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:420px){ .fgrid{grid-template-columns:1fr} }

/* ============================================================
   SECTIONS
   ============================================================ */
.block{padding-top:var(--bay)}
.block > h2{font-size:var(--fs-d4);line-height:var(--lh-heading);
  max-width:22ch;margin-bottom:clamp(20px,2.4vw,30px)}

/* PROOF STRIP. Social proof moved directly under the fold, per both
   references. It used to sit five sections down where a paid visitor
   never reached it. */
.proof{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(3,1fr)}
@media (max-width:800px){ .proof{grid-template-columns:1fr} }
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);
  padding:clamp(22px,2.4vw,28px);box-shadow:var(--sh-2);display:flex;flex-direction:column}
.qcard .stars{color:var(--clay);font-size:.95rem;letter-spacing:.14em;margin-bottom:12px}
.qcard p{font-size:var(--fs-quote);line-height:var(--lh-quote);color:var(--text);
  flex:1 1 auto;margin-bottom:20px}
.who{display:flex;align-items:center;gap:11px;padding-top:16px;
  border-top:1px solid var(--line)}
.who .av{width:40px;height:40px;border-radius:var(--r-pill);flex-shrink:0;
  background:var(--cream-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:var(--fs-meta);color:var(--clay-deep)}
.who .name{font-weight:700;color:var(--green);font-size:var(--fs-body-sm);line-height:1.3}
.who .role{color:var(--muted);font-size:var(--fs-meta);line-height:1.35}


/* COST REDUCTION. Three cards, not three rows. Rows read as a table
   and a table reads as fine print. Cards read as claims. */
.lower{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(3,1fr)}
@media (max-width:800px){ .lower{grid-template-columns:1fr} }
.lcard{background:var(--cream-2);border:1px solid var(--line);
  border-radius:var(--r-panel);padding:clamp(24px,2.6vw,32px)}
.lcard .n{font-family:var(--font-display);font-size:var(--fs-stat);line-height:.9;
  color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  margin-bottom:14px}
.lcard h3{font-family:var(--font-display);font-weight:400;font-size:var(--fs-d5);
  line-height:var(--lh-heading);color:var(--green)}


/* OBJECTIONS */
.obj details{border-bottom:1px solid var(--line)}
.obj details:first-of-type{border-top:1px solid var(--line)}
.obj summary{list-style:none;cursor:pointer;position:relative;
  padding:clamp(17px,2.1vw,22px) 44px clamp(17px,2.1vw,22px) 0;
  font-weight:700;color:var(--green);font-size:var(--fs-body-lg);line-height:var(--lh-tight)}
.obj summary::-webkit-details-marker{display:none}
.obj summary::after{content:"\002B";position:absolute;right:8px;top:50%;
  transform:translateY(-50%);font-weight:400;font-size:1.5rem;
  color:var(--clay-deep);line-height:1}
.obj details[open] summary::after{content:"\2212"}
.obj summary:hover{color:var(--clay-deep)}
.obj .ans{padding:0 44px clamp(18px,2.2vw,24px) 0;color:var(--muted);
  font-size:var(--fs-body);line-height:var(--lh-body);max-width:60ch}

/* ============================================================
   ANCHOR. Alli's second and final appearance, small, beside the
   closing action. Introduced at the top, recognised at the bottom.
   ============================================================ */
.anchor{position:relative;overflow:hidden;background:var(--green);color:#fff}
.anchor::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 90% at 78% 100%,rgba(var(--clay-rgb),.3),transparent 68%)}
.anchor .wrap{position:relative;display:grid;align-items:end;
  gap:clamp(20px,3vw,40px);padding-top:clamp(50px,6.4vw,84px)}
@media (min-width:760px){
  .anchor .wrap{grid-template-columns:minmax(0,1fr) clamp(180px,20vw,250px)}
}
.anchor-say{padding-bottom:clamp(50px,6.4vw,84px)}
.anchor .tagline{font-family:var(--font-display);font-size:var(--fs-d2);
  color:#fff;line-height:var(--lh-heading);letter-spacing:var(--tr-display);
  margin-bottom:10px;max-width:16ch}
.anchor .os{font-size:var(--fs-kicker);font-weight:700;letter-spacing:var(--tr-kicker);
  text-transform:uppercase;color:var(--clay-on-green)}
.anchor .btn{margin-top:clamp(22px,2.6vw,32px)}
.anchor-fig{align-self:end}
.anchor-fig img{width:100%;height:auto}
@media (max-width:759px){ .anchor-fig{display:none} }

/* ============================================================
   TRUST STRIP. The credline, moved off the fold. Quiet, factual,
   sits where trust marks belong on a lead gen page.
   ============================================================ */
.trust{background:var(--cream-2);border-top:1px solid var(--line)}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px clamp(18px,2.6vw,34px);padding-top:22px;padding-bottom:22px;
  font-size:var(--fs-meta);color:var(--muted)}
.trust span{white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.trust i{font-size:1.1rem;color:var(--clay);line-height:1}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--cream-2);border-top:1px solid var(--line);
  padding:clamp(30px,3.6vw,42px) 0 clamp(84px,9vw,100px)}
.foot{display:grid;gap:16px}
@media (min-width:760px){ .foot{grid-template-columns:1fr auto;align-items:center;gap:0 40px} }
.foot img{height:23px;width:auto;margin-bottom:12px}
.foot .addr,.foot .legal,.foot .copy{font-size:var(--fs-meta);color:var(--muted);
  line-height:var(--lh-tight)}
.foot .legal{display:flex;gap:clamp(14px,2vw,22px);flex-wrap:wrap}
.foot .legal a{text-decoration:underline;text-underline-offset:2px}
.foot .legal a:hover{color:var(--clay-deep)}
.foot .copy{margin-top:18px;grid-column:1/-1;padding-top:16px;border-top:1px solid var(--line)}
.foot .srcnote{margin-top:12px;font-size:var(--fs-kicker);color:var(--muted);
  line-height:var(--lh-tight);max-width:70ch}

/* ============================================================
   MOBILE BAR
   ============================================================ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--green-dark);
  border-top:1px solid var(--line-on-green);transform:translateY(101%);
  transition:transform .45s var(--ease)}
.mbar.show{transform:none}
.mbar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding-top:11px;padding-bottom:11px}
.mbar p{color:#fff;font-size:var(--fs-body-sm);font-weight:700;line-height:1.25}
.mbar p b{color:var(--gold);font-variant-numeric:tabular-nums}
.mbar .btn{padding:13px 24px;font-size:var(--fs-body-sm)}
@media (min-width:1040px){ .mbar{display:none} }
@media (max-width:480px){ .mbar p{font-size:var(--fs-kicker)} .mbar .btn{padding:13px 18px} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .figure .n{animation:none;background-image:none;
    -webkit-text-fill-color:var(--gold);color:var(--gold)}
  .figure .n,.mbar,.btn,.acu,.stepper,.step-btn,.field input,
  .obj summary::after{transition:none}
}