/* Bridge: the older page family on the landing page's system (Oct 27).
   Loaded after fo.css. Tokens, ground, type scale, kickers, buttons, cards, panels and rhythm follow recovered/rec31.css. */
:root{
  --bg:#FAF6EE;--cream:#F3ECDD;--paper:#FAF6EE;
  --ink:#141216;--ink2:#1E1B21;--mute:#4A4550;--mute2:#6E6776;
  --line:rgba(20,18,22,.08);--line2:rgba(20,18,22,.06);
  --pink:#FA1896;--pinkdeep:#E60F86;--pinkhov:#E60F86;--pinksoft:#FDEEF6;--pinkline:#FFD6EC;
  --green:#25D366;--greenhov:#1fb455;--greensoft:#e3f8ea;
  --r:24px;--r2:16px;--sh:inset 0 0 0 1px rgba(20,18,22,.05);
  --w:1280px;
}
body{background:var(--bg);line-height:1.55}
.wrap{padding:0 28px}
.sec{padding:112px 0}
.sec.white{background:var(--bg)}
.sec.cream{background:var(--cream)}
.phero{background:var(--bg);border-bottom:0;padding:84px 0 56px}

/* type */
h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6.2vw,84px);line-height:.98;letter-spacing:-.025em;text-wrap:balance}
.foh2,h2.foh2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,66px);line-height:1.02;letter-spacing:-.018em;text-wrap:balance}
h3{font-weight:700;letter-spacing:-.01em}
.fosub,.lede{font-size:18.5px;line-height:1.6;color:var(--mute);max-width:640px;text-wrap:pretty}
.fok,.eyebrow{background:transparent;border:0;padding:0;border-radius:0;font:500 11px/1 var(--mono);letter-spacing:.18em;color:var(--pinkdeep);gap:10px}
.fok:before,.eyebrow:before{width:22px;height:3px;border-radius:3px;background:currentColor}
.kk{color:var(--pinkdeep);font-size:10.5px;letter-spacing:.16em}

/* buttons */
.pill{height:48px;padding:0 24px;font:700 15px/1 var(--sans);border:0;border-radius:999px;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.pill:hover{transform:translateY(-1px)}
.pill.sm{height:42px;padding:0 20px;font-size:14px}
.pill.pink{background:var(--pink);color:#fff;box-shadow:0 10px 24px -10px rgba(250,24,150,.7),inset 0 -2px 0 rgba(0,0,0,.12)}
.pill.pink:hover{background:var(--pinkdeep)}
.pill.green{background:#25D366;color:#fff;box-shadow:0 10px 24px -10px rgba(37,211,102,.6),inset 0 -2px 0 rgba(0,0,0,.1)}
.pill.outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pill.white{background:#fff;color:var(--ink)}
.pinkband .pill.white{background:var(--ink);color:#fff}
.pinkband .pill.outline{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9)}

/* cards and tiles */
.card,.eqcard,.acard,.statband,.feat,.human,.qa,.tile{background:var(--cream);border:0;border-radius:var(--r);box-shadow:var(--sh)}
.card.gold{box-shadow:inset 0 0 0 1.5px var(--goldline)}
.statband>div{border-right:1px solid rgba(20,18,22,.08)}
.statband .v{font-size:44px}
.eqcard.mid{background:#FDEEF6}
.nug{border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--goldline)}

/* the closing pink band becomes the landing page's rounded pink panel */
.pinkband{margin:0 16px;border-radius:40px;background:linear-gradient(135deg,#FA1896 0%,#E60F86 100%);padding:96px 32px}
.pinkband h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.02em}
.pinkband p{color:#ffe2f1;font-size:18px}
.pinkband .mk{opacity:.12}

/* notes and disclaimers: small, italic, centred */
.l4note,.fo-datanote{font-size:13px;color:var(--mute2);font-style:italic;text-align:center}

@media(max-width:760px){
  .wrap{padding:0 20px}
  .sec{padding:64px 0}
  .phero{padding:40px 0 32px}
  h1{font-size:clamp(40px,11.3vw,46px);line-height:1.04}
  .foh2,h2.foh2{font-size:clamp(32px,9vw,40px)}
  .pinkband{margin:0 12px;border-radius:28px;padding:56px 22px}
}

/* ---------- richer heroes on the older family: split layout, phone fan, phone stack with callouts ---------- */
:root{--pinkd:#E60F86;--pinkl:#FFD6EC;--blush:#FDEEF6;--cream2:#F3ECDD;--body:#4A4550;--ease:cubic-bezier(.22,1,.36,1);--gut:20px}
@media(min-width:761px){:root{--gut:28px}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.phero .hsplit{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.phero .htext>.gx{max-width:none}
.phone{position:relative;aspect-ratio:720/1472;width:100%;filter:drop-shadow(0 40px 50px rgba(20,18,22,.22)) drop-shadow(0 8px 14px rgba(20,18,22,.12))}
.phone>img,.phone>img.shot{width:100%;height:100%;display:block}
.fan{position:relative;height:440px;margin-top:10px}
.fan .phone{position:absolute;width:180px;transition:transform .8s var(--ease)}
.fan .a{left:-2%;top:56px;transform:rotate(-8deg)}
.fan .b{left:50%;width:200px;margin-left:-100px;top:0;z-index:2}
.fan .c{right:-2%;top:56px;transform:rotate(8deg)}
.fan:hover .a{transform:rotate(-11deg) translateX(-12px)}
.fan:hover .c{transform:rotate(11deg) translateX(12px)}
.pstack{position:relative;padding:10px 0 0;display:grid;grid-template-columns:1fr;justify-items:center}
.pstack .glow{position:absolute;left:50%;top:40%;width:420px;height:420px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(250,24,150,.22),rgba(250,24,150,0));pointer-events:none}
.pstack .phone{max-width:250px;width:62%;z-index:1}
.pstack .call{position:relative;z-index:2;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 18px 36px -16px rgba(20,18,22,.35),0 0 0 1px rgba(20,18,22,.05);font-size:13px;line-height:1.3;width:min(260px,88%)}
.pstack .call small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pinkd);margin-bottom:4px}
.pstack .call b{display:block;font-size:14.5px;margin-bottom:2px}
.pstack .call.pk{background:var(--pink);color:#fff}
.pstack .call.pk small{color:#ffe2f1}
.pstack .call.f1{margin-top:-30px;justify-self:start}
.pstack .call.f2{margin-top:10px;justify-self:end}
@keyframes bob{50%{transform:translateY(-8px)}}
@media(min-width:761px){
  .phero .hsplit{grid-template-columns:1.1fr .9fr;gap:48px}
  .fan{height:620px;margin-top:0}
  .fan .phone{width:250px}
  .fan .a{left:4%;top:70px}
  .fan .b{width:270px;margin-left:-135px}
  .fan .c{right:4%;top:70px}
  .pstack{height:560px;display:block}
  .pstack .phone{position:absolute;left:50%;top:0;width:280px;max-width:none;transform:translateX(-50%)}
  .pstack .call{position:absolute;width:230px;animation:bob 6s ease-in-out infinite}
  .pstack .call.f1{left:0;top:16%;margin:0}
  .pstack .call.f2{right:0;bottom:12%;margin:0;animation-delay:-3s}
}
@media(prefers-reduced-motion:reduce){.pstack .call{animation:none}}
/* cards lift */
.card,.eqcard,.acard,.tlrow{transition:transform .35s var(--ease),box-shadow .35s}
.card:hover,.eqcard:hover,.acard:hover{transform:translateY(-4px);box-shadow:0 26px 48px -22px rgba(20,18,22,.35),0 0 0 1px rgba(20,18,22,.06)}
.statband{box-shadow:0 30px 60px -30px rgba(20,18,22,.35),0 0 0 1px rgba(20,18,22,.06)}
.herochat .phone{aspect-ratio:auto}

/* keyboard focus, same pink on every page */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #FA1896;outline-offset:3px}
main:focus{outline:none}

/* Oct 28: the closing panel's pair on the older family; no brush on pink */
.pinkband .pill.green{background:#25D366;color:#fff;box-shadow:0 14px 30px -14px rgba(0,60,20,.5)}
.pinkband .brush{background:none;padding:0;margin:0}