/* ==========================================================
   /care : the Care marketing page layer only.

   WHAT THIS FILE OWNS
   The centred hero, the library ground under it, the link row after the
   pilot, the two price figures, the companion statement, the closer, and
   this page's seams by id.

   WHAT IT DEPENDS ON
   /folio.css, loaded first. This file adds to that layer and never restates it.

   LOAD ORDER
   critical fallback <style> -> /folio.css -> /care.css -> /scrollcraft.css.
   ========================================================== */

.hero{position:relative;min-height:100svh}
.hero-stage{position:relative;overflow:clip;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-start;background:var(--ink);
  padding:calc(var(--nav-h) + var(--nav-inset) + 28px) 0 36px}
.hero-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(244,241,234,.06),transparent 60%)}
.hero-stage>.wrap{width:100%}
.hero-in{position:relative;z-index:2;width:100%;min-width:0;display:flex;flex-direction:column;
  align-items:center;text-align:center}
.hero h1 .sc-split--line{padding-bottom:.26em;margin-bottom:-.26em}
.hero h1{margin-top:16px;max-width:28ch;font-size:clamp(32px,3.1vw,48px);line-height:1.08}
.care-entity{margin-top:22px;max-width:62ch;font-size:clamp(16px,1.35vw,18px)}
.hero-who{margin-top:14px;max-width:46ch;color:var(--muted);font-size:15.5px;line-height:1.55}
.hero-cta{margin-top:22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.care-terms{margin-top:18px;padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;
  color:var(--text);text-align:center}
/* In flow under the ask on a phone, where the hero is not pinned. On a pinned desktop
   stage the same figure is a horizon at the bottom of the screen, so the library is
   in the first viewport instead of clipped below a 100svh stage. */
.care-ground{position:relative;z-index:1;margin-top:28px}
.care-ground .cap{text-align:center}
.hero.sc-act--pinned .care-ground{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:0 var(--pad) 16px;pointer-events:none}
.hero.sc-act--pinned .care-ground .frame{aspect-ratio:16/2.45;max-width:1180px;margin:0 auto}
.hero.sc-act--pinned .care-ground .cap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The one next step off the page: a full-width link card, not a lone text link. */
.care-next{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 22px;
  max-width:720px;margin:44px auto 0;padding:22px 26px;border:1px solid var(--line-2);border-radius:16px;
  background:linear-gradient(180deg,rgba(76,141,255,.07),rgba(76,141,255,.015));color:var(--text);
  transition:border-color .2s,background .2s,transform .2s var(--ease-out)}
.care-next:hover{border-color:rgba(76,141,255,.55);transform:translateY(-2px)}
.care-next:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.care-next-k{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.care-next-t{font-family:var(--serif);font-size:clamp(26px,2.4vw,32px);line-height:1.1;letter-spacing:-.01em}
.care-next-a{font-size:22px;color:var(--blue);transition:transform .2s var(--ease-out)}
.care-next:hover .care-next-a{transform:translateX(4px)}

/* Steps read as one sequence: a rail across the top with a node per step. */
.care-steps li{position:relative}
.care-steps li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--ink);border:1px solid var(--blue);box-shadow:0 0 0 4px var(--ink)}
.care-steps li:nth-child(3)::before{background:var(--blue)}

/* Boundaries: a struck mark so each card reads as a "not" at a glance. */
.care-x{position:relative;display:block;width:30px;height:30px;margin-bottom:16px;border-radius:50%;
  border:1px solid rgba(215,168,79,.4);background:rgba(215,168,79,.06)}
.care-x::before,.care-x::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;
  background:var(--amber);border-radius:1px}
.care-x::before{transform:translate(-50%,-50%) rotate(45deg)}
.care-x::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* Price tiers: Care is the page's offer, so it carries the accent and the ask. */
.care-tier{display:flex;flex-direction:column;padding-bottom:28px}
.care-tier--main{border-color:rgba(76,141,255,.42);
  background:linear-gradient(180deg,rgba(76,141,255,.09),rgba(76,141,255,.015) 55%),var(--surface)}
.care-tier--main .num{color:var(--blue)}
.care-tier .care-figure{padding-bottom:18px;border-bottom:1px solid var(--line)}
.care-tier .care-figure+p{margin-top:16px}
.care-tier-cta{margin-top:auto;align-self:flex-start}
.care-tier p+.care-tier-cta{margin-top:24px}

/* The companion is a future intent, so it is a quiet note under the prices. */
.care-note{display:flex;gap:10px 20px;align-items:baseline;flex-wrap:wrap;margin-top:28px;
  padding:16px 20px;border:1px dashed var(--line-2);border-radius:12px}
.care-note-k{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.care-note p{flex:1 1 320px;color:var(--muted);font-size:14px;line-height:1.55}

.care-figure{margin-top:18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.care-figure .price{font-family:var(--serif);font-size:56px;font-weight:400;letter-spacing:-.03em;line-height:1}

.closer-stage{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100svh;background:var(--ink);
  padding:calc(var(--nav-h) + var(--nav-inset) + 34px) 0 56px}
.closer-stage>.wrap{width:100%}
.closer-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(76,141,255,.07),transparent 62%)}
.closer-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  text-align:center}
.closer-in .display{margin-top:22px}
.closer-in .lead{margin-top:22px;text-align:center}

#covers{padding-top:calc(var(--sec-pad) * .5)}
#questions{padding-bottom:calc(var(--sec-pad) * .62)}

.hero:not(.sc-act--pinned){min-height:0}
.hero-stage:not(.sc-stage){min-height:0}

@media(prefers-reduced-motion:reduce){
  .closer-stage{min-height:0;padding-top:calc(var(--rhythm) * .5);padding-bottom:0}
}
@media(max-width:900px){
  .closer-stage{min-height:0;padding-top:calc(var(--rhythm) * .5);padding-bottom:0}
  .care-figure .price{font-size:44px}
}
@media(max-width:760px){
  .hero-stage{padding-top:calc(var(--nav-h) + var(--nav-inset) + 22px)}
  .hero-cta{margin-top:20px;flex-direction:column;width:100%}
  .hero-cta .btn{width:100%;justify-content:center;min-height:48px}
  .care-entity,.hero-who{font-size:15.5px}
  .care-ground .frame-crop{--zoom:220%;--sx:-8%;--sy:-6%;--w-from:0px;--w-to:-36px}
  .care-next{grid-template-columns:1fr auto;padding:18px 20px}
  .care-next-k{grid-column:1 / -1}
  .care-steps li::before{display:none}
  .care-tier-cta{align-self:stretch;justify-content:center;min-height:48px}
}