/* SPDX-License-Identifier: LicenseRef-Vahini-Proprietary
   © 2026 Vahini Technologies. All rights reserved. */
/* ============================================================
   PLATFORM HERO — "The Vahini Flywheel"
   Twin-priority copy (pen + dataset) with kinetic signal ticker,
   and one animated flywheel stage (write→sense→grow→learn→apply,
   looping) + Applications band. Loaded after site.css.
   Kinetic ticker pairs with js/hero-imu.js (GSAP char stagger).
   ============================================================ */
.pf{ --pilot:#2563A8; --pilot-bg:#E4EDF8; --assess:#7A52A6; --assess-bg:#EFE7F7;
     --future:#5A6470; --future-bg:#E8EAED; }

.pf{padding:34px 0 50px; overflow:hidden;}
.pf__grid{display:grid; grid-template-columns:1fr 0.96fr; gap:50px; align-items:center;}

/* ---- LEFT COPY ---- */
.pf__eye{font-family:var(--sans); font-size:12px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-deep); margin:0 0 16px;}
.pf__h1{font-family:var(--serif); font-weight:700; font-size:clamp(34px,4vw,50px);
  line-height:1.02; letter-spacing:-.02em; color:var(--ink); margin:0;}
.pf__h1 em{font-style:normal; color:var(--accent-deep);}
.pf__rule{width:62px; height:4px; border-radius:3px; background:var(--accent); margin:16px 0 13px;}
.pf__sub{font-size:17px; line-height:1.56; color:var(--muted); max-width:560px; margin:0;}
.pf__sub strong{color:var(--ink); font-weight:700;}

/* live signal ticker — the word cycles via js/hero-imu.js (GSAP). Static
   "MOTION" when GSAP is absent or reduced motion is preferred. */
.pf__ticker{display:flex; align-items:baseline; margin:0 0 13px; font-family:var(--sans);
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--hint);}
.pf__ticker-word{display:inline-block; min-width:9.5ch; overflow:hidden; line-height:1.25; color:var(--ink);}
.pf__ticker-word .ch{display:inline-block; will-change:transform;}

/* twin priority cards — the pen and the dataset, joined by the loop */
.pf-duo{display:flex; align-items:stretch; gap:10px; margin-top:20px; max-width:560px;}
.pf-duo__card{flex:1; display:flex; flex-direction:column; gap:4px; background:var(--surface);
  border:1px solid var(--rule); border-radius:14px; padding:12px 14px; text-decoration:none;
  box-shadow:var(--shadow-1);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;}
.pf-duo__card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-2);}
.pf-duo__tag{font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-deep);}
.pf-duo__card b{font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink); line-height:1.12;}
.pf-duo__card span:last-child{font-size:12.5px; color:var(--muted); line-height:1.45;}
.pf-duo__loop{align-self:center; flex:0 0 auto; color:var(--accent-deep);
  display:flex; flex-direction:column; align-items:center; gap:3px;}
.pf-duo__loop i{font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--hint); line-height:1;}
.pf-duo__loop svg{width:22px; height:22px; display:block;}
.pf__cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:22px 0 0;}
.pf-btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans);
  font-weight:700; font-size:15.5px; border-radius:13px; padding:15px 24px; text-decoration:none;
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;}
.pf-btn svg{width:18px; height:18px;}
.pf-btn--primary{background:var(--accent-deep); color:#fff; box-shadow:0 8px 24px rgba(4,138,145,.28);}
.pf-btn--primary:hover{background:var(--accent-ink); transform:translateY(-2px);}
.pf-btn--ghost{background:var(--surface); color:var(--ink); border:1px solid var(--rule-2);}
.pf-btn--ghost:hover{border-color:var(--accent); color:var(--accent-deep); transform:translateY(-2px);}
.pf-btn--ghost .play{display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-deep);}
.pf-btn--ghost .play svg{width:12px; height:12px;}

.pf__metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 34px; margin-top:34px; padding-top:24px; border-top:1px solid var(--rule);}
.pf-metgroup{display:flex; flex-direction:column; gap:12px; min-width:0;}
.pf-metgroup__k{font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep);}
.pf-met{display:flex; align-items:center; gap:11px; min-width:0;}
.pf-met__ic{flex:0 0 auto; color:var(--accent-deep);}
.pf-met__ic svg{width:21px; height:21px;}
.pf-met div{min-width:0;}
.pf-met b{display:block; font-family:var(--serif); font-size:16px; color:var(--ink); line-height:1.05; white-space:nowrap;}
.pf-met span{display:block; font-size:11.5px; color:var(--hint); margin-top:2px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ============================================================
   SINGLE ANIMATED STAGE
   ============================================================ */
.pf-stage{position:relative; width:100%; max-width:520px; margin-left:auto;
  background:linear-gradient(165deg,#fff,var(--ivory-2));
  border:1px solid var(--rule); border-radius:24px; box-shadow:var(--shadow-2);
  padding:18px 18px 16px; overflow:hidden;}
.pf-stage::before{content:""; position:absolute; right:-90px; top:-90px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 16%, transparent), transparent 70%); pointer-events:none;}

/* step rail */
.pf-stage__head{position:relative; display:flex; align-items:flex-end; gap:14px; margin-bottom:16px;}
.pf-steps{display:flex; gap:7px; flex:1;}
.pf-step{flex:1; display:flex; flex-direction:column; gap:6px; min-width:0;}
.pf-step__bar{height:3px; border-radius:2px; background:var(--surface-2); transition:background .35s;}
.pf-step__lab{font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--hint); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .35s;}
.pf-steps__loop{flex:0 0 auto; align-self:flex-end; color:var(--hint); transition:color .35s;}
.pf-steps__loop svg{width:13px; height:13px; display:block;}
.pf-stage[data-phase="4"] .pf-steps__loop{color:var(--accent-deep);}
.pf-stage__live{display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--live);}
.pf-stage__live i{width:7px; height:7px; border-radius:50%; background:var(--live); position:relative;}

/* active / done step highlighting */
.pf-stage[data-phase="0"] .pf-step:nth-child(1) .pf-step__bar,
.pf-stage[data-phase="1"] .pf-step:nth-child(2) .pf-step__bar,
.pf-stage[data-phase="2"] .pf-step:nth-child(3) .pf-step__bar,
.pf-stage[data-phase="3"] .pf-step:nth-child(4) .pf-step__bar,
.pf-stage[data-phase="4"] .pf-step:nth-child(5) .pf-step__bar{background:var(--accent);}
.pf-stage[data-phase="0"] .pf-step:nth-child(1) .pf-step__lab,
.pf-stage[data-phase="1"] .pf-step:nth-child(2) .pf-step__lab,
.pf-stage[data-phase="2"] .pf-step:nth-child(3) .pf-step__lab,
.pf-stage[data-phase="3"] .pf-step:nth-child(4) .pf-step__lab,
.pf-stage[data-phase="4"] .pf-step:nth-child(5) .pf-step__lab{color:var(--accent-deep);}

/* screen + phases */
.pf-stage__screen{position:relative; height:296px;}
.pf-phase{position:absolute; inset:0; opacity:0; visibility:hidden; display:flex; flex-direction:column;
  justify-content:center; transition:opacity .45s var(--ease), visibility .45s;}
.pf-stage[data-phase="0"] .pf-phase--write,
.pf-stage[data-phase="1"] .pf-phase--cap,
.pf-stage[data-phase="3"] .pf-phase--grow,
.pf-stage[data-phase="2"] .pf-phase--learn,
.pf-stage[data-phase="4"] .pf-phase--apply{opacity:1; visibility:visible;}

.pf-phase__lab{position:absolute; left:2px; right:2px; bottom:0; font-size:12.5px; color:var(--muted); line-height:1.4;}
.pf-phase__lab b{display:block; font-family:var(--sans); font-weight:800; font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent-deep); margin-bottom:3px;}

/* phase 0 — write */
.pf-paper{position:relative; flex:1; margin-bottom:34px; border-radius:14px; background:var(--surface);
  border:1px solid var(--rule);
  background-image:radial-gradient(var(--rule-2) 1.1px, transparent 1.1px); background-size:15px 15px;
  background-position:8px 8px; overflow:hidden;}
.pf-hello{position:absolute; left:30px; right:24px; top:50%; transform:translateY(-42%) rotate(-4deg);
  font-family:"Caveat",cursive; font-weight:700; font-size:58px; color:var(--ink); line-height:1; white-space:nowrap;}
.pf-pen{position:absolute; right:46px; top:8px; width:74px; height:auto; transform:rotate(10deg);
  filter:drop-shadow(0 14px 22px rgba(34,40,49,.24));}

/* phase 1 — capture */
.pf-phase--cap{gap:14px; padding-bottom:34px;}
.pf-wave{width:100%; height:54px; display:block; flex:0 0 auto;}
.pf-wave path{fill:none; stroke-width:2.2; stroke-linecap:round;}
.pf-metrows{display:flex; flex-direction:column; gap:9px;}
.pf-metrow{display:grid; grid-template-columns:104px 1fr; align-items:center; gap:12px;}
.pf-metrow__k{font-size:12px; font-weight:600; color:var(--elephant);}
.pf-metrow__t{height:7px; border-radius:4px; background:var(--surface-2); overflow:hidden;}
.pf-metrow__t b{display:block; height:100%; width:var(--w); border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-lite));}

/* phase 2 — grow (the dataset: multi-script pages stack in, corpus meter fills) */
.pf-phase--grow{gap:14px; padding-bottom:36px;}
.pf-pagecards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.pf-pagecard{display:flex; flex-direction:column; gap:1px; background:var(--surface);
  border:1px solid var(--rule); border-top:3px solid var(--accent); border-radius:10px; padding:8px 11px 7px;}
/* a full word ("Vahini" in six scripts) — smaller than the old single
   letter, with line-height slack for Indic vowel marks above/below */
.pf-pagecard b{font-family:var(--serif); font-weight:600; font-size:17px; line-height:1.45; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pf-pagecard em{font-style:normal; font-size:10px; font-weight:700; color:var(--hint);}
.pf-corpus{display:flex; flex-direction:column; gap:6px;}
.pf-corpus__k{font-size:12px; font-weight:700; color:var(--elephant); display:flex; align-items:baseline; gap:8px;}
.pf-corpus__plus{font-family:var(--sans); font-size:10px; font-weight:800; color:var(--live);
  background:var(--live-bg); border-radius:6px; padding:1px 6px; opacity:0;}
.pf-corpus__t{display:block; height:7px; border-radius:4px; background:var(--surface-2); overflow:hidden;}
.pf-corpus__t b{display:block; height:100%; width:var(--w); border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-lite));}
.pf-corpus__note{font-size:11px; color:var(--hint);}

/* phase 3 — learn */
.pf-net{width:100%; height:150px; display:block; margin:auto;}
.pf-net__nodes circle{transform-box:fill-box; transform-origin:center;}

/* phase 4 — apply */
.pf-applist{display:flex; flex-direction:column; gap:7px; padding-bottom:32px;}
.pf-app{display:flex; align-items:center; gap:11px; padding:8px 9px; border-radius:11px;
  text-decoration:none; transition:background .18s;}
.pf-app:hover{background:var(--ivory-2);}
.pf-app__ic{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;}
.pf-app__ic svg{width:18px; height:18px;}
.pf-app__tx{flex:1; min-width:0;}
.pf-app__tx b{font-family:var(--sans); font-weight:700; font-size:13.5px; color:var(--ink);}
.pf-pill{display:inline-block; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; flex:0 0 auto;}
.pf-pill--live{color:var(--live); background:var(--live-bg);}
.pf-pill--dev{color:var(--dev); background:var(--dev-bg);}
.pf-pill--pilot{color:var(--pilot); background:var(--pilot-bg);}
.pf-pill--assess{color:var(--assess); background:var(--assess-bg);}
.pf-pill--grow{color:var(--accent-ink); background:var(--accent-soft);}
.pf-pill--future{color:var(--future); background:var(--future-bg);}
/* ---- tabfly: the products as a leafed stack of pages ---- */
.tabfly{margin-top:6px;}
.tabfly__tabs{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 4px; margin:0 0 36px;}
.tabfly__tab{appearance:none; border:0; background:transparent; cursor:pointer; position:relative;
  font-family:var(--sans); font-weight:700; font-size:13.5px; color:var(--muted);
  padding:10px 14px 13px; letter-spacing:.01em; transition:color .25s; border-radius:8px 8px 0 0;}
.tabfly__tab::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--tc,var(--accent)); margin-right:7px; opacity:.9;}
.tabfly__tab::after{content:""; position:absolute; left:13px; right:13px; bottom:5px; height:3px; border-radius:2px;
  background:var(--tc,var(--accent)); transform:scaleX(0); transform-origin:center; transition:transform .35s var(--ease);}
.tabfly__tab:hover{color:var(--ink);}
.tabfly__tab.is-active{color:var(--ink);}
.tabfly__tab.is-active::after{transform:scaleX(1);}
.tabfly__stage{position:relative; width:min(710px,100%); height:376px; margin:0 auto;}
.tf-card{position:absolute; left:0; top:0; width:min(548px, calc(100% - 152px)); height:312px; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--surface); border:1px solid var(--rule); border-radius:16px;
  padding:24px 26px 20px; box-shadow:var(--shadow-2);
  transition:transform .45s var(--ease), opacity .25s;}
.tf-card h3{font-family:var(--serif); font-weight:600; font-size:21px; color:var(--ink); line-height:1.15; margin:14px 0 0;}
.tf-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:8px 0 16px;}
.tf-card .pf-acard__mat{width:100%;}
.tf-card .pf-acard__who{width:100%;}
.tf-card__go{margin-top:14px; font-size:13.5px; font-weight:700; color:var(--accent-deep); text-decoration:none;}
.tf-card__go:hover{text-decoration:underline;}
/* the stack fans right, so every page's corner symbol stays visible
   like binder dividers -- a reason to peek behind the top page */
.tf-card:nth-of-type(1){z-index:6; transform:translate(0,0);}
.tf-card:nth-of-type(2){z-index:5; transform:translate(30px,8px);}
.tf-card:nth-of-type(3){z-index:4; transform:translate(60px,16px);}
.tf-card:nth-of-type(4){z-index:3; transform:translate(90px,24px);}
.tf-card:nth-of-type(5){z-index:2; transform:translate(120px,32px);}
.tf-card:nth-of-type(6){z-index:1; transform:translate(150px,40px);}
/* the corner symbol chip */
.tf-card__mini{position:absolute; top:9px; right:7px; width:22px; height:22px; border-radius:7px;
  display:grid; place-items:center; color:var(--mcc,var(--accent-deep)); background:var(--mcbg,var(--accent-soft));}
.tf-card__mini svg{width:13px; height:13px;}
/* stacked (non-top) pages invite a click: lift a little on hover */
.tf-card:not(.is-top):not(.fly){cursor:pointer;}
.tf-card:not(.is-top):not(.fly):nth-of-type(2):hover{transform:translate(30px,1px);}
.tf-card:not(.is-top):not(.fly):nth-of-type(3):hover{transform:translate(60px,9px);}
.tf-card:not(.is-top):not(.fly):nth-of-type(4):hover{transform:translate(90px,17px);}
.tf-card:not(.is-top):not(.fly):nth-of-type(5):hover{transform:translate(120px,25px);}
.tf-card:not(.is-top):not(.fly):nth-of-type(6):hover{transform:translate(150px,33px);}
/* flying away: each page gets its own trajectory, like leafed paper.
   1 s flight so the leafing reads as a quick page turn. */
.tf-card.fly{opacity:0; pointer-events:none; z-index:20;
  transition:transform 1s cubic-bezier(.45,-.15,.7,.35), opacity .4s .5s;}
.tf-card.fly:nth-of-type(1){transform:translate(-115%,-42%) rotate(-31deg) scale(.62) skew(6deg,3deg);}
.tf-card.fly:nth-of-type(2){transform:translate(108%,-52%) rotate(26deg) scale(.7) skew(-8deg,2deg);}
.tf-card.fly:nth-of-type(3){transform:translate(-88%,-64%) rotate(-15deg) scale(.56) skew(4deg,-6deg);}
.tf-card.fly:nth-of-type(4){transform:translate(96%,-30%) rotate(32deg) scale(.66) skew(-5deg,5deg);}
.tf-card.fly:nth-of-type(5){transform:translate(-102%,-48%) rotate(-24deg) scale(.74) skew(7deg,-4deg);}
@media (max-width:640px){
  .tabfly__tabs{gap:0 2px; margin-bottom:26px;}
  .tabfly__tab{font-size:12px; padding:8px 10px 12px;}
  .tabfly__stage{height:452px;}
  .tf-card{height:392px; width:calc(100% - 32px);}
  .tf-card__mini{display:none;}
  .tf-card:nth-of-type(n):not(.fly){transform:translate(0,0);}
  .tf-card:nth-of-type(2):not(.fly){transform:translate(6px,6px);}
  .tf-card:nth-of-type(3):not(.fly){transform:translate(12px,12px);}
  .tf-card:nth-of-type(4):not(.fly){transform:translate(18px,18px);}
  .tf-card:nth-of-type(5):not(.fly){transform:translate(24px,24px);}
  .tf-card:nth-of-type(6):not(.fly){transform:translate(30px,30px);}
}
@media (prefers-reduced-motion: reduce){
  .tf-card{transition:opacity .2s;}
  .tf-card.fly{transition:opacity .2s;}
  .tf-card.fly:nth-of-type(n){transform:translate(0,0);}
}

/* ---- tabfly split layout: product index left, card stack right ---- */
.tabfly--split{display:grid; grid-template-columns:minmax(300px,5fr) minmax(0,7fr);
  gap:16px 44px; align-items:center; margin-top:0;}
.tabfly--split .tabfly__left{text-align:left; min-width:0;}
.tabfly--split .tabfly__lede{font-size:15.5px; color:var(--muted); line-height:1.6; margin:14px 0 0;}
.tabfly--split .tabfly__tabs{flex-direction:column; align-items:stretch; gap:2px; margin:20px 0 0;}
.tabfly--split .tabfly__tab{text-align:left; padding:9px 12px; border-radius:10px; font-size:14px;
  transition:color .25s, background .25s;}
.tabfly--split .tabfly__tab::after{display:none;}
.tabfly--split .tabfly__tab small{display:block; font-weight:500; font-size:12.5px; color:var(--muted);
  line-height:1.4; margin:2px 0 0 15px;}
.tabfly--split .tabfly__tab.is-active{background:var(--surface); box-shadow:var(--shadow-1);}
.tabfly--split .tabfly__tab:hover:not(.is-active){background:color-mix(in srgb, var(--surface) 55%, transparent);}
.tabfly--split .tabfly__stage{margin:0; justify-self:center;}
@media (max-width:960px){
  .tabfly--split{grid-template-columns:1fr; gap:8px;}
  .tabfly--split .tabfly__left{text-align:center;}
  .tabfly--split .tabfly__tabs{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:2px 4px; margin:18px 0 22px;}
  .tabfly--split .tabfly__tab{text-align:center; padding:8px 10px 12px; border-radius:8px 8px 0 0;}
  .tabfly--split .tabfly__tab::after{display:block;}
  .tabfly--split .tabfly__tab.is-active{background:transparent; box-shadow:none;}
  .tabfly--split .tabfly__tab small{display:none;}
}

.ic--live{color:var(--live); background:var(--live-bg);}
.ic--dev{color:var(--dev); background:var(--dev-bg);}
.ic--pilot{color:var(--pilot); background:var(--pilot-bg);}
.ic--assess{color:var(--assess); background:var(--assess-bg);}
.ic--grow{color:var(--accent-ink); background:var(--accent-soft);}

/* ============ APPLICATIONS BAND (below hero) ============ */
.pf-band__head{text-align:center; margin-bottom:30px;}
.pf-band__head .eyebrow{justify-content:center;}
.pf-appgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1080px; margin:0 auto;}
.pf-acard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--rule);
  border-radius:16px; padding:22px 20px; text-decoration:none; box-shadow:var(--shadow-1);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s;}
.pf-acard:hover{transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--rule-2);}
.pf-acard__ic{width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;}
.pf-acard__ic svg{width:24px; height:24px;}
.pf-acard h3{font-family:var(--serif); font-weight:600; font-size:19px; color:var(--ink); line-height:1.15;}
.pf-acard p{font-size:13.5px; color:var(--muted); line-height:1.5; margin:9px 0 16px;}
/* maturity meter: the status pill plus a filled track showing how far
   along the product is (Live full, Future barely started) */
.pf-acard__mat{margin-top:auto; display:flex; align-items:center; gap:10px;}
.pf-acard__mat .pf-pill{flex:0 0 auto;}
.pf-acard__mat i{flex:1; display:block; height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden;}
.pf-acard__mat b{display:block; height:100%; width:var(--m,15%); border-radius:3px; background:var(--mc,var(--accent));}
/* who buys it: the revenue line at the foot of each card */
.pf-acard__who{display:block; margin-top:13px; padding-top:11px; border-top:1px dashed var(--rule);
  font-size:11.5px; font-weight:600; color:var(--muted); line-height:1.5;}
.pf-acard__who em{display:block; font-style:normal; font-size:9px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--hint); margin-bottom:3px;}
/* buyer chips: a small symbol per audience so the row reads at a glance */
.wb-row{display:flex; flex-wrap:wrap; gap:5px 7px;}
.wb{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--elephant);
  background:var(--ivory-2); border:1px solid var(--rule); border-radius:20px; padding:3px 9px 3px 6px;}
.wb svg{width:12px; height:12px; color:var(--accent-deep); flex:0 0 auto;}

@media (max-width:1024px){
  .pf__grid{grid-template-columns:1fr; gap:46px; max-width:560px; margin:0 auto;}
  .pf-stage{margin:0 auto;}
  .pf-appgrid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .pf-appgrid{grid-template-columns:1fr 1fr;}
  .pf__metrics{grid-template-columns:1fr; gap:18px;}
  .pf-stage__screen{height:288px;}
  .pf-hello{font-size:48px;}
  .pf-pagecards{grid-template-columns:repeat(2,1fr);}
  .pf-pagecard:nth-child(n+5){display:none;} /* keep the Grow phase inside the stage on tiny screens */
  .pf-duo{flex-direction:column;}
  /* stacked cards: the connector becomes a horizontal row (icon spins,
     labels stay upright) instead of rotating the whole column sideways,
     which used to wrap "captures"/"improves" into a vertical letter-stack */
  .pf-duo__loop{flex-direction:row; gap:7px;}
  .pf-duo__loop svg{transform:rotate(90deg);}
}
@media (max-width:430px){
  .pf-appgrid{grid-template-columns:1fr;}
  .pf-step__lab{font-size:0;} /* collapse labels to bars on tiny screens */
}

/* ============================================================
   STAGE ANIMATIONS — reduced-motion-safe (static end-state below)
   ============================================================ */
.pf-stage__live i::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--live); opacity:0;}

@media (prefers-reduced-motion: no-preference){
  /* phase enter */
  .pf-stage[data-phase="0"] .pf-phase--write,
  .pf-stage[data-phase="1"] .pf-phase--cap,
  .pf-stage[data-phase="3"] .pf-phase--grow,
  .pf-stage[data-phase="2"] .pf-phase--learn,
  .pf-stage[data-phase="4"] .pf-phase--apply{animation:pfPhaseIn .5s var(--ease) both;}

  /* the twin-priority loop glyph slowly spins — the flywheel, literally */
  .pf-duo__loop svg{animation:pfSpin 7s linear infinite;}
  @keyframes pfSpin{to{transform:rotate(360deg)}}
  @keyframes pfPhaseIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}

  /* live ping */
  .pf-stage__live i::after{animation:pfPing 1.9s ease-out infinite;}
  @keyframes pfPing{0%{transform:scale(1); opacity:.6} 80%,100%{transform:scale(3.2); opacity:0}}

  /* 0 · write — pen floats, hello writes on */
  .pf-stage[data-phase="0"] .pf-hello{animation:pfWrite 3s var(--ease) both;}
  .pf-stage[data-phase="0"] .pf-pen{animation:pfFloat 3s ease-in-out infinite;}
  @keyframes pfWrite{0%{clip-path:inset(0 100% 0 0)} 70%{clip-path:inset(0 0 0 0)} 100%{clip-path:inset(0 0 0 0)}}
  @keyframes pfFloat{0%,100%{transform:rotate(10deg) translateY(0)} 50%{transform:rotate(10deg) translateY(-7px)}}

  /* 1 · capture — flowing waves, bars fill in */
  .pf-stage[data-phase="1"] .pf-wave path{stroke-dasharray:9 7; animation:pfFlow 2.6s linear infinite;}
  .pf-stage[data-phase="1"] .pf-wave path:nth-child(2){animation-duration:1.9s; animation-direction:reverse;}
  .pf-stage[data-phase="1"] .pf-wave path:nth-child(3){animation-duration:3.3s;}
  @keyframes pfFlow{to{stroke-dashoffset:-160;}}
  .pf-stage[data-phase="1"] .pf-metrow__t b{animation:pfBar .9s var(--ease) both;}
  .pf-stage[data-phase="1"] .pf-metrow:nth-child(2) .pf-metrow__t b{animation-delay:.1s}
  .pf-stage[data-phase="1"] .pf-metrow:nth-child(3) .pf-metrow__t b{animation-delay:.2s}
  .pf-stage[data-phase="1"] .pf-metrow:nth-child(4) .pf-metrow__t b{animation-delay:.3s}
  .pf-stage[data-phase="1"] .pf-metrow:nth-child(5) .pf-metrow__t b{animation-delay:.4s}
  @keyframes pfBar{from{width:0}to{width:var(--w)}}

  /* 3 · grow — multi-script pages stack into the corpus, meter fills */
  .pf-stage[data-phase="3"] .pf-pagecard{animation:pfPop .5s var(--ease) both;}
  .pf-stage[data-phase="3"] .pf-pagecard:nth-child(2){animation-delay:.08s}
  .pf-stage[data-phase="3"] .pf-pagecard:nth-child(3){animation-delay:.16s}
  .pf-stage[data-phase="3"] .pf-pagecard:nth-child(4){animation-delay:.24s}
  .pf-stage[data-phase="3"] .pf-pagecard:nth-child(5){animation-delay:.32s}
  .pf-stage[data-phase="3"] .pf-pagecard:nth-child(6){animation-delay:.40s}
  .pf-stage[data-phase="3"] .pf-corpus__t b{animation:pfBar 1.3s var(--ease) both; animation-delay:.45s;}
  .pf-stage[data-phase="3"] .pf-corpus__plus{animation:pfPlus 2.2s var(--ease) both; animation-delay:.9s;}
  @keyframes pfPlus{0%{opacity:0; transform:translateY(5px)} 18%{opacity:1; transform:translateY(0)} 80%{opacity:1} 100%{opacity:0; transform:translateY(-4px)}}
  @keyframes pfPop{from{opacity:0; transform:scale(.85) translateY(6px)} to{opacity:1; transform:scale(1) translateY(0)}}

  /* 2 · learn — signal flows, nodes fire, output glows */
  .pf-stage[data-phase="2"] .pf-net__edges path{stroke-dasharray:5 7; animation:pfSignal 1.9s linear infinite;}
  @keyframes pfSignal{to{stroke-dashoffset:-48}}
  .pf-stage[data-phase="2"] .pf-net__nodes circle{animation:pfNode 2s ease-in-out infinite;}
  .pf-stage[data-phase="2"] .pf-net__nodes circle:nth-child(2){animation-delay:.22s}
  .pf-stage[data-phase="2"] .pf-net__nodes circle:nth-child(3){animation-delay:.34s}
  .pf-stage[data-phase="2"] .pf-net__nodes circle:nth-child(4){animation-delay:.46s}
  .pf-stage[data-phase="2"] .pf-net__nodes circle:nth-child(5){animation-delay:.64s}
  .pf-stage[data-phase="2"] .pf-net__nodes circle:nth-child(6){animation-delay:.76s}
  .pf-stage[data-phase="2"] .pf-net__nodes circle:nth-child(7){animation:pfNode 2s ease-in-out infinite, pfGlow 2s ease-in-out infinite; animation-delay:1s, 1s;}
  @keyframes pfNode{0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.3); opacity:1}}
  @keyframes pfGlow{0%,100%{filter:drop-shadow(0 0 0 transparent)} 50%{filter:drop-shadow(0 0 8px var(--accent))}}

  /* 4 · apply — app rows slide in */
  .pf-stage[data-phase="4"] .pf-app{animation:pfPop .45s var(--ease) both;}
  .pf-stage[data-phase="4"] .pf-app:nth-child(2){animation-delay:.08s}
  .pf-stage[data-phase="4"] .pf-app:nth-child(3){animation-delay:.16s}
  .pf-stage[data-phase="4"] .pf-app:nth-child(4){animation-delay:.24s}
  .pf-stage[data-phase="4"] .pf-app:nth-child(5){animation-delay:.32s}
  /* the loop closes: the repeat arrow spins while Apply plays, pointing back to Write */
  .pf-stage[data-phase="4"] .pf-steps__loop svg{animation:pfSpin 1.6s linear infinite;}
}