/* ══════════════════════════════════════════════════════════════════════════
   Fair Value Calculator — /pro · "One camera move: stock → portfolio → market."
   v2 (2026-07-12): brand-green palette (#7BB290/#1f8a52), real app screenshots
   in glass frames, ONE pinned scene (the forge), everything else IO-staged.
   PERF CONTRACT: transforms+opacity only in animation paths; backdrop-filter
   ONLY on the nav; no grain overlay; no blur transitions; no canvas.
   ══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#070b09; --bg2:#0a100d; --panel:#0d1410;
  --text:#eef3ef; --dim:#93a09a; --faint:#5b6862;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  /* Brand green family — SAME family as the app (--green:#7BB290 / --fvc-green:#1f8a52) */
  --grn:#7bb290; --grn-hi:#8fcaa5; --grn-deep:#1f8a52; --grn-ink:#06130c;
  --green:#7bb290; /* alias: the frozen CTA plumbing (pro.php ≤166) inlines var(--green) */
  --glow:rgba(123,178,144,.5); --glow-soft:rgba(123,178,144,.14); --glow-faint:rgba(123,178,144,.07);
  --amber:#f0b45a; --red:#e07a6a;
  --ff:'Space Grotesk','SF Pro Display',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.44,1);
  --r:18px; --r-lg:26px; --maxw:1180px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.p-body{
  font-family:var(--ff);background:var(--bg);color:var(--text);
  line-height:1.5;letter-spacing:-.01em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 1;
}
/* Aurora: one fixed compositor layer, transform-only parallax, NO filter, NO grain */
body.p-body::before{
  content:"";position:fixed;inset:-22vh 0 -10vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(58vw 50vh at 80% 6%, rgba(123,178,144,.11), transparent 62%),
    radial-gradient(52vw 52vh at 10% 44%, rgba(31,138,82,.10), transparent 64%),
    radial-gradient(66vw 56vh at 62% 98%, rgba(123,178,144,.07), transparent 62%);
  transform:translate3d(0,calc(var(--sy,0)*-7vh),0);will-change:transform;
}
.p-wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,44px)}
img,svg{display:block;max-width:100%}
::selection{background:rgba(123,178,144,.3);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--grn);outline-offset:3px;border-radius:6px}

/* ── Type ────────────────────────────────────────────────────────────────── */
.p-eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grn);display:inline-flex;align-items:center;gap:.7em}
.p-eyebrow .no{font-variant-numeric:tabular-nums;color:var(--grn-hi);opacity:.95}
.p-eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--grn))}
.p-h1{font-size:clamp(2.6rem,8.2vw,6rem);font-weight:500;line-height:1;letter-spacing:-.035em}
.p-h2{font-size:clamp(1.9rem,5.2vw,3.7rem);font-weight:500;line-height:1.04;letter-spacing:-.03em}
.p-lead{font-size:clamp(1.02rem,2.3vw,1.32rem);color:var(--dim);font-weight:300;max-width:42ch;line-height:1.55}
.p-kicker{color:var(--grn)}
.grad-txt{background:linear-gradient(180deg,#fff 28%,#a9c3b4);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-illu{display:block;margin-top:12px;color:var(--faint);font-size:.7rem;letter-spacing:.04em}

/* ── Reveal: opacity+transform ONLY (no blur — Safari jank) ──────────────── */
.p-reveal{opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--ease-out),transform .95s var(--ease-out);
  transition-delay:calc(var(--d,0)*95ms)}
.p-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.p-reveal{opacity:1!important;transform:none!important;transition:none}}

/* ══ NAV — the ONLY backdrop-filter on the page ═══════════════════════════ */
.p-nav{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:15px clamp(20px,5vw,44px);
  transition:background .4s var(--ease),border-color .4s}
.p-nav.scrolled{background:rgba(7,11,9,.62);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line)}
.p-nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--grn-deep),var(--grn-hi));
  transform:scaleX(var(--sp,0));transform-origin:left;opacity:.9}
.p-brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:1.02rem}
.p-brand-dot{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--grn-hi),var(--grn-deep));box-shadow:0 0 18px var(--glow-soft);
  color:var(--grn-ink);font-weight:800;font-size:.9rem}
.p-brand b{font-weight:600}.p-brand span{color:var(--grn)}
.p-nav-cta{font-size:.86rem;font-weight:600;padding:9px 18px;border-radius:999px;
  border:1px solid var(--line2);background:rgba(255,255,255,.045);color:var(--text);
  transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s}
.p-nav-cta:hover{transform:translateY(-1px);background:rgba(123,178,144,.16);border-color:rgba(123,178,144,.5);
  box-shadow:0 8px 26px -12px var(--glow)}
.p-nav-cta:active{transform:translateY(0) scale(.97)}

/* ══ HERO ═════════════════════════════════════════════════════════════════ */
.p-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px 0 60px;overflow:hidden;--mx:.5;--my:.4;--hp:0}
.p-hero-light{position:absolute;inset:0;z-index:1;pointer-events:none;
  transform:translate3d(calc((var(--mx) - .5)*24vw),calc((var(--my) - .5)*18vh),0);
  background:radial-gradient(40vw 40vw at 50% 44%,rgba(123,178,144,.13),transparent 62%);
  will-change:transform}
.p-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24vh;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg))}
.p-hero .p-wrap{position:relative;z-index:3}
.p-hero-inner{max-width:960px;
  transform:translate3d(0,calc(var(--hp,0)*-6vh),0);opacity:calc(1 - var(--hp,0)*1.1);will-change:transform,opacity}
.p-h1 .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;
  animation:lnFree .01s linear 1.5s forwards}   /* Maske nur FÜR die Einflug-Animation; danach overflow:visible
  — Unterlängen (g/j) können nach dem Entrance nie mehr gekappt werden, egal welche Font-Metrik lädt */
@keyframes lnFree{to{overflow:visible}}
.p-h1 .ln>span{display:block;transform:translateY(108%);animation:heroUp 1.05s var(--ease-out) forwards}
.p-h1 .ln:nth-child(2)>span{animation-delay:.1s}
.p-h1 .ln:nth-child(3)>span{animation-delay:.2s}
@keyframes heroUp{to{transform:none}}
.p-hero-sub{margin-top:28px;opacity:0;animation:fadeUp .95s var(--ease-out) .48s forwards;max-width:46ch}
.p-hero-cta-row{margin-top:38px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  opacity:0;animation:fadeUp .95s var(--ease-out) .64s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.p-trust{display:inline-block;color:var(--faint);font-size:.82rem;line-height:1.7}   /* natürlicher Textfluss statt Flex — kein künstlicher Abstand zwischen den Fakten */
.p-trust b{color:var(--dim);font-weight:600}
.p-scrollcue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--faint);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;opacity:0;animation:fadeUp 1s 1.05s forwards}
.p-scrollcue i{width:1px;height:36px;background:linear-gradient(var(--grn),transparent);
  animation:cueline 2.2s var(--ease) infinite}
@keyframes cueline{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* hero starfield — static SVG, 3 slow CSS drifts, desktop-fine only */
.p-hero-stars{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.8}
.p-hero-stars g{will-change:transform}
.p-hero-stars .d1{animation:drift1 26s var(--ease) infinite alternate}
.p-hero-stars .d2{animation:drift2 34s var(--ease) infinite alternate}
.p-hero-stars .d3{animation:drift3 42s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(26px,-18px)}}
@keyframes drift2{to{transform:translate(-32px,14px)}}
@keyframes drift3{to{transform:translate(18px,22px)}}
@media (pointer:coarse),(max-width:900px){.p-hero-stars{display:none}}

/* hero product silhouette (desktop) — solid gradients, transform-only motion */
.p-hero-os{position:absolute;right:-3%;top:50%;z-index:2;
  width:min(44vw,540px);aspect-ratio:1/1;pointer-events:none;display:grid;place-items:center;
  transform:translate3d(0,calc(-50% + var(--hp,0)*8vh),0) scale(calc(1 - var(--hp,0)*.05));
  opacity:calc(.96 - var(--hp,0)*1.05);will-change:transform,opacity}
.p-os-ring{position:absolute;border:1px solid var(--line);border-radius:50%}
.p-os-ring.r1{inset:0;animation:spin 70s linear infinite}
.p-os-ring.r2{inset:14%;border-color:rgba(123,178,144,.16);animation:spin 52s linear infinite reverse}
.p-os-ring.r3{inset:30%;animation:spin 36s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.p-os-core{position:relative;width:46%;border-radius:24px;
  background:linear-gradient(155deg,#141c16,#0a100c 70%);
  border:1px solid var(--line2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.1),0 0 46px -12px var(--glow-soft);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:22px}
.p-os-core .lbl{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.p-os-core .val{font-size:clamp(1.4rem,3vw,2rem);font-weight:600;color:var(--grn-hi)}
.p-os-core .bar{height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.p-os-core .bar i{display:block;height:100%;width:71%;border-radius:3px;
  background:linear-gradient(90deg,var(--grn-deep),var(--grn-hi))}
.p-os-chip{position:absolute;padding:7px 12px;border-radius:11px;font-size:.68rem;font-weight:600;
  background:linear-gradient(160deg,#131a15,#0b110d);border:1px solid var(--line2);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.9);white-space:nowrap;
  animation:floaty 6.5s var(--ease) infinite}
.p-os-chip .k{color:var(--faint);font-weight:500;margin-right:6px}
.p-os-chip.c1{top:12%;left:12%}
.p-os-chip.c2{bottom:27%;left:7%;color:var(--grn);animation-delay:1.5s}
.p-os-chip.c3{top:22%;right:16%;animation-delay:.7s}
.p-os-chip.c4{bottom:13%;right:12%;animation-delay:2.2s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ══ Section shell + light seams ══════════════════════════════════════════ */
.p-sec{position:relative;padding:clamp(88px,13vh,170px) 0;z-index:2}
/* .cv intentionally does nothing anymore: content-visibility's 900px placeholder underestimated
   real section heights → the document shrank ~800px while scrolling (jumping scrollbar, broken
   anchors, black viewports on fast flicks). 5 sections don't need it — paint them all. */
.p-sec-head{max-width:760px;margin:0 auto clamp(42px,6.5vw,74px);text-align:center}
.p-sec-head .p-lead{margin:20px auto 0}
.seam{position:relative;height:100px;max-width:var(--maxw);margin:-50px auto;z-index:1;pointer-events:none;
  background:radial-gradient(52% 100% at 50% 50%,var(--glow-faint),transparent 72%)}
.seam::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(123,178,144,.24) 30%,var(--line2) 50%,rgba(123,178,144,.24) 70%,transparent)}

/* split layout */
.p-split{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(32px,6vw,80px);align-items:center;
  max-width:var(--maxw);margin:0 auto}
.p-split.rev{grid-template-columns:1.06fr 1fr}
.p-split.rev .p-split-copy{order:2}
.p-split-copy h2{margin:18px 0 18px}
.p-split-copy .p-lead{margin-bottom:24px}
.p-featlist{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.p-featlist li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-top:1px solid var(--line);list-style:none}
.p-featlist .ic{width:20px;height:20px;flex:none;margin-top:1px;color:var(--grn)}
.p-featlist .ic.warn{color:var(--amber)}
.p-featlist .tx{font-size:.94rem;color:var(--dim)}
.p-featlist .tx b{color:var(--text);font-weight:600;display:block;margin-bottom:2px}
/* Hero steps (premium pass 2026-07-16): the user's own workflow as a quiet numbered sequence
   (01 find → 02 check → 03 let it watch) — one sentence each, no claim-stacking. */
.p-hero-steps{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;
  max-width:560px;opacity:0;animation:fadeUp .95s var(--ease-out) .56s forwards}
.p-hero-steps li{display:flex;gap:14px;align-items:baseline;font-size:1.02rem;line-height:1.5;color:var(--text)}
.p-hero-steps .n{flex:none;font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--grn);
  font-variant-numeric:tabular-nums;transform:translateY(-1px)}
.p-hero-proof{margin-top:14px;display:inline-flex;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center;gap:4px 8px;line-height:1.35;font-size:.83rem;
  color:var(--dim);background:rgba(123,178,144,.08);border:1px solid rgba(123,178,144,.22);
  border-radius:999px;padding:7px 14px}
.p-hero-proof b{color:var(--text);font-weight:600}

/* ══ GLASS PHONE FRAME for REAL screenshots ═══════════════════════════════
   Solid gradient chrome (no backdrop-filter). The tall app capture parallaxes
   inside the window: img translate3d driven by --pp (0..1, set from scroll). */
.p-shot{position:relative;width:min(100%,400px);margin:0 auto;border-radius:30px;padding:9px;
  background:linear-gradient(165deg,#1a231d,#0b110d 55%,#101712);
  border:1px solid var(--line2);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.12),0 0 50px -18px var(--glow-faint)}
.p-shot::after{content:"";position:absolute;inset:9px;border-radius:22px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.07),transparent 34%)}
.p-shot-win{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:var(--asp,4/5);background:#0a0f0b}
.p-shot-win img{width:100%;height:auto;
  transform:translate3d(0,calc(var(--pp,0)*var(--shift,-9%)),0);will-change:transform}
.p-shot-win::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(5,8,6,.55))}
.p-shot-badge{position:absolute;top:-13px;left:18px;z-index:3;font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grn-ink);padding:6px 12px;border-radius:999px;
  background:linear-gradient(180deg,var(--grn-hi),var(--grn));box-shadow:0 8px 22px -8px var(--glow)}
/* stage = frame + its overlays, anchored to the frame width so nothing drifts */
.p-shot-stage{position:relative;padding:26px 0;width:min(100%,440px);margin:0 auto}
@media (prefers-reduced-motion:reduce){.p-shot-win img{transform:none!important}}

/* floating glass KPI chips over/next to a frame — solid gradient bg */
.p-float{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;
  padding:10px 14px;border-radius:14px;
  background:linear-gradient(160deg,#141c16,#0a100c);border:1px solid var(--line2);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;transform:translateY(16px) scale(.92);
  transition:opacity .6s var(--ease-out) calc(var(--fd,0)*1ms),transform .7s var(--spring) calc(var(--fd,0)*1ms)}
.play .p-float,.p-float.on{opacity:1;transform:none}
.p-float .k{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block}
.p-float .v{font-size:1.02rem;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.p-float .v.grn{color:var(--grn-hi)}
.p-float.badge{background:linear-gradient(180deg,rgba(123,178,144,.2),rgba(31,138,82,.14));
  border-color:rgba(123,178,144,.44);color:var(--grn-hi);font-weight:700;font-size:.8rem;letter-spacing:.04em}

/* ══ 01 · VERDICT — real detail screenshot, the verdict lifts out of it ═══ */
.p-verdict-stage .p-float.f1{top:12%;left:-14%}
.p-verdict-stage .p-float.f2{top:30%;left:-19%}
.p-verdict-stage .p-float.f3{top:48%;left:-12%}
.p-verdict-stage .p-float.f4{top:66%;left:-17%}
.p-verdict-stage .p-float.badge{top:2%;right:-8%;left:auto}
.p-vsteps{margin-top:26px;display:flex;flex-direction:column;gap:2px}
.p-vstep{display:flex;align-items:center;gap:14px;padding:10px 0;color:var(--faint);
  border-top:1px solid var(--line);
  transition:color .5s var(--ease) calc(var(--fd,0)*1ms)}
.p-vstep .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
  transition:background .5s calc(var(--fd,0)*1ms),box-shadow .5s calc(var(--fd,0)*1ms)}
.p-vstep .t{font-size:.96rem;font-weight:500}
.play-copy .p-vstep{color:var(--text)}
.play-copy .p-vstep .dot{background:var(--grn);box-shadow:0 0 12px 2px var(--glow)}

/* ══ 02 · THE FORGE — 21 models + 6 quality criteria converge (PINNED) ════ */
.p-scene{position:relative;z-index:2}
.p-scene--forge{height:300vh}
.p-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;padding-top:86px}
.p-forge-head{text-align:center;max-width:820px;margin:0 auto;padding:0 20px;flex:none}
.p-forge{position:relative;flex:1;min-height:0;max-height:62vh;width:100%}
/* side labels: where the streams come from */
.p-forge-src{position:absolute;top:-30px;z-index:7;pointer-events:none;
  padding:6px 10px;border-radius:10px;background:rgba(5,7,11,.88);
  font-size:.62rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
  opacity:calc(1 - min(1,var(--p,0)*2.4))}
.p-forge-src.l{left:clamp(16px,6vw,90px)}
.p-forge-src.r{right:clamp(16px,6vw,90px);text-align:right}
.p-forge-src b{display:block;color:var(--grn);font-size:.78rem;letter-spacing:.1em}
/* chips: start scattered (--x/--y from center), converge with per-chip stagger --st */
.p-fchip{position:absolute;top:50%;left:50%;font-size:.76rem;font-weight:600;padding:7px 13px;
  border-radius:999px;background:linear-gradient(160deg,#1a231c,#0e1410);
  border:1px solid rgba(255,255,255,.22);white-space:nowrap;color:#d9e2dc;
  --pe:min(1,max(0,calc((var(--p,0) - var(--st,0))/.55)));
  --pz:calc(var(--pe)*var(--pe)*(3 - 2*var(--pe)));
  --fx:var(--x);--fy:var(--y);
  transform:translate(-50%,-50%)
    translate3d(calc(var(--fx)*(1 - var(--pz))),calc(var(--fy)*(1 - var(--pz))),0)
    scale(calc(1 - var(--pz)*.5));
  /* base .6 (was .25): fast scrollers hit the pin mid-flight — the stage must never read as empty */
  opacity:calc((.8 + .2*min(1,calc(var(--p,0)*2.5)))*(1 - var(--pz)))}
.p-fchip.q{color:var(--grn-hi);border-color:rgba(123,178,144,.55);background:linear-gradient(160deg,#16281e,#0d1710);font-size:.64rem;padding:5px 10px}
/* the core that forges the number */
.p-forge-core{position:absolute;top:50%;left:50%;width:min(30vh,220px);aspect-ratio:1;
  display:grid;place-items:center;
  transform:translate(-50%,-50%) scale(calc(.55 + var(--cp,0)*.55));border-radius:50%;
  --cp:calc(var(--p,0)*var(--p,0)*(3 - 2*var(--p,0)));
  background:radial-gradient(circle at 42% 36%,
    rgba(143,202,165,calc(.22 + var(--cp,0)*.5)),
    rgba(31,138,82,calc(.14 + var(--cp,0)*.3)) 58%,transparent 72%);
  box-shadow:0 0 calc(18px + var(--cp,0)*90px) var(--glow)}
.p-forge-arrow{width:34%;height:34%;color:#0c3e24;position:relative;z-index:2;
  opacity:calc(.3 + var(--cp,0)*.7);transform:scale(calc(.8 + var(--cp,0)*.25));
  filter:drop-shadow(0 2px 6px rgba(6,25,15,.55))}
.p-forge-core::after{content:"";position:absolute;inset:26%;border-radius:50%;
  border:1px solid rgba(143,202,165,calc(.14 + var(--cp,0)*.4))}
.p-forge-core::before{content:"";position:absolute;inset:32%;border-radius:50%;
  background:radial-gradient(circle at 46% 42%,rgba(210,240,222,.95),rgba(143,202,165,.5) 55%,transparent 75%);
  opacity:calc(var(--cp,0)*.9)}
/* convergence flash — one clean pulse when it all becomes one */
.p-forge-flash{position:absolute;top:50%;left:50%;width:min(34vh,240px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) scale(.5);border:2px solid rgba(143,202,165,.85);opacity:0;pointer-events:none}
.conv .p-forge-flash{animation:convFlash 1.1s var(--ease-out) forwards}
@keyframes convFlash{0%{opacity:.9;transform:translate(-50%,-50%) scale(.55)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
/* the two results — born TOGETHER, flanking the core */
.p-forge-out{position:absolute;top:50%;width:clamp(170px,19vw,240px);min-height:148px;
  display:flex;flex-direction:column;justify-content:center;
  --oo:min(1,max(0,calc((var(--p,0) - .52)/.2)));
  opacity:var(--oo);border-radius:18px;padding:16px 18px;text-align:center;
  background:linear-gradient(165deg,#121a14,#0a100c);border:1px solid rgba(123,178,144,.3);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.9),0 0 34px -14px var(--glow-soft)}
.p-forge-out .k{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:#e6efe9;font-weight:700;margin-bottom:8px}
.p-forge-out .v{font-size:clamp(1.9rem,4.2vw,2.9rem);font-weight:700;color:#eafff2;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 34px var(--glow)}
.p-forge-out .s{font-size:.68rem;color:var(--dim);margin-top:5px}
/* Stock identity inside the converged verdict (operator 2026-07-16): once the diagram has built up,
   show WHICH stock this verdict belongs to — same ICBC example as the hero card (same $23.39). */
.p-fv-stock{display:block;font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-bottom:6px}
.p-fv-stock b{color:var(--grn-hi,#9be8bf);font-weight:700}
.p-forge-out.fv{left:50%;transform:translate3d(calc(-50% - min(24vw,300px) + (1 - var(--oo))*40px),-50%,0)}
.p-forge-out.qs{left:50%;transform:translate3d(calc(-50% + min(24vw,300px) - (1 - var(--oo))*40px),-50%,0)}
/* the shared verdict — the same one scene 01 showed */
.p-forge-verdict{position:absolute;left:50%;top:calc(50% + min(21vh,160px));
  --vo:min(1,max(0,calc((var(--p,0) - .78)/.16)));
  transform:translate3d(-50%,calc((1 - var(--vo))*18px),0);opacity:var(--vo);
  font-size:clamp(.94rem,1.8vw,1.15rem);font-weight:700;letter-spacing:.05em;padding:13px 26px;border-radius:999px;
  color:#eafff2;background:linear-gradient(180deg,rgba(123,178,144,.28),rgba(31,138,82,.16));
  border:1px solid rgba(123,178,144,.46);white-space:nowrap;
  box-shadow:0 14px 34px -16px var(--glow)}
.p-forge-hint{flex:none;text-align:center;margin:clamp(10px,2.5vh,26px) auto 0;padding:0 20px;
  color:var(--faint);font-size:.86rem;max-width:62ch;
  opacity:min(1,max(0,calc((var(--p,0) - .5)/.25)))}
.p-forge-hint b{color:var(--text)}

/* ══ 01b · CORE CLAIM — "only two numbers matter" (operator dictate 07-12) ═ */
.p-core-claim{margin:18px 0 8px;font-size:clamp(.98rem,2vw,1.16rem);font-weight:500;color:var(--text);
  line-height:1.5;padding:13px 17px;border-radius:14px;max-width:46ch;
  border:1px solid rgba(123,178,144,.32);
  background:linear-gradient(120deg,rgba(123,178,144,.12),rgba(10,16,12,.4))}
.p-core-claim b{color:var(--grn-hi);font-weight:700}

/* ══ 03 · FEED — cards ⇄ table 3D flip + cursor + fly-to-watchlist ════════
   The two captures share ONE clip, so the flip reads as the same screen
   changing view. Overflow-hidden flattens preserve-3d, therefore the two
   faces are their own rounded, clipped boxes INSIDE an unclipped 3D box.  */
.p-feed-stage{position:relative;padding:34px 0 6px;width:min(100%,560px);margin:0 auto}
.p-feed-shot{width:100%;max-width:none}
/* badge sits at the BOTTOM edge here — the top-left of the capture IS the story
   (the Cards/Table toggle the cursor taps), it must never be covered */
.p-feed-shot .p-shot-badge{top:auto;bottom:-13px;left:18px}
.p-feed-persp{position:relative;perspective:1500px}
.p-feed-flip{position:relative;aspect-ratio:1120/1150;transform-style:preserve-3d;
  transition:transform .95s var(--ease-out)}
.p-feed-flip.flipped{transform:rotateY(180deg)}
.p-feed-flip .face{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#0a0f0b;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.p-feed-flip .face img{width:100%;height:100%;object-fit:cover;transform:none}
.p-feed-flip .face.back{transform:rotateY(180deg)}
.p-feed-flip .face::after{content:"";position:absolute;left:0;right:0;bottom:0;height:13%;
  pointer-events:none;background:linear-gradient(180deg,transparent,rgba(5,8,6,.5))}
/* cursor dot — position via transform only (perf contract), ring pulse = the tap */
.p-cursor{position:absolute;left:0;top:0;z-index:7;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 38% 34%,#fff,#cfe7da 72%);
  box-shadow:0 3px 14px rgba(0,0,0,.6),0 0 0 1.5px rgba(123,178,144,.65);
  transition:transform .95s var(--ease-out),opacity .45s}
.p-cursor.jump{transition:opacity .45s}   /* teleport (loop reset) without a visible sweep */
.p-cursor i{position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(143,202,165,.9);
  opacity:0;transform:scale(.5)}
.p-cursor.tap i{animation:curTap .55s var(--ease-out)}
@keyframes curTap{0%{opacity:.95;transform:scale(.45)}100%{opacity:0;transform:scale(1.6)}}
/* watchlist chip above the frame — counter ticks +1, check lights up */
.p-wl-chip{position:absolute;top:4px;right:-4px;z-index:8;display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;font-size:.8rem;font-weight:700;color:var(--text);
  background:linear-gradient(160deg,#141c16,#0a100c);border:1px solid var(--line2);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  transition:border-color .5s,box-shadow .5s}
.p-wl-chip svg{width:15px;height:15px;color:var(--grn)}
.p-wl-chip .n{min-width:22px;height:22px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  background:rgba(123,178,144,.16);border:1px solid rgba(123,178,144,.4);color:var(--grn-hi);
  font-size:.72rem;font-variant-numeric:tabular-nums}
.p-wl-chip.tick .n{animation:chipPop .5s var(--spring)}
.p-wl-chip .ok{color:var(--grn-hi);font-size:.8rem;opacity:0;transform:scale(.6);
  transition:opacity .4s,transform .5s var(--spring)}
.p-wl-chip.done{border-color:rgba(123,178,144,.5);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9),0 0 26px -10px var(--glow)}
.p-wl-chip.done .ok{opacity:1;transform:none}
/* the mini chip that flies from "+ Watch" into the watchlist (WAAPI-driven) */
.p-fly-card{position:absolute;left:0;top:0;z-index:9;pointer-events:none;opacity:0;
  display:inline-flex;align-items:center;gap:7px;padding:8px 12px;margin:-16px 0 0 -34px;
  border-radius:999px;font-size:.74rem;font-weight:700;color:var(--text);white-space:nowrap;
  background:linear-gradient(160deg,#182219,#0c120e);border:1px solid rgba(123,178,144,.5);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.85),0 0 22px -8px var(--glow-soft)}
.p-fly-card b{color:var(--grn-hi)}
.p-fly-card.go{opacity:1}

/* ══ 04 · WATCHLIST — real shot + the story the email tells ═══════════════ */
.p-wl-stage .p-float.sig{top:20%;right:-13%;gap:10px}
.p-wl-stage .p-float.sig .pill{font-size:.66rem;font-weight:700;letter-spacing:.05em;
  padding:5px 11px;border-radius:999px;min-width:76px;text-align:center;
  color:var(--grn);background:rgba(123,178,144,.14);border:1px solid rgba(123,178,144,.36);
  transition:color .5s,background .5s,border-color .5s}
.p-wl-stage.flip .p-float.sig .pill{color:var(--amber);background:rgba(240,180,90,.14);
  border-color:rgba(240,180,90,.4);animation:sigPop .5s var(--spring)}
@keyframes sigPop{0%{transform:scale(.82)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.p-wl-mail{position:absolute;left:0;right:0;margin:0 auto;width:min(94%,420px);bottom:62px;z-index:5;display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-radius:16px;
  background:linear-gradient(160deg,#171f19,#0c120e);border:1px solid rgba(240,180,90,.4);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.95);
  opacity:0;transform:translateY(16px)}
.p-wl-stage.flip .p-wl-mail{animation:mailFly 4s var(--ease) forwards}
@keyframes mailFly{
  0%{opacity:0;transform:translateY(18px) scale(.96)}
  12%{opacity:1;transform:translateY(0) scale(1)}
  72%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-34px) scale(.94)}}
.p-wl-mail .ic{width:32px;height:32px;border-radius:10px;background:rgba(240,180,90,.16);
  display:grid;place-items:center;color:var(--amber);flex:none;font-size:.9rem}
.p-wl-mail b{font-size:.82rem;font-weight:600;display:block}
.p-wl-mail span{font-size:.72rem;color:var(--dim)}

/* ══ 05 · PORTFOLIO — two real app CARDS (wide crops) + optimizer line ════ */
.p-duo{position:relative;padding:26px 0 64px;min-height:560px}
.p-duo .p-shot.a{width:min(84%,400px);margin:0;position:relative;z-index:2}
.p-duo .p-shot.b{position:absolute;right:0;top:46%;width:min(68%,320px);z-index:1;
  transform:rotate(2.2deg)}
.p-duo-illu{position:absolute;left:0;bottom:14px}
.p-opt{position:absolute;z-index:5;left:-4%;bottom:11%;max-width:min(92%,420px);
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;
  background:linear-gradient(160deg,#141c16,#0a100c);border:1px solid rgba(123,178,144,.34);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.95),0 0 34px -16px var(--glow-soft);
  opacity:0;transform:translateY(18px) scale(.95);
  transition:opacity .6s var(--ease-out),transform .75s var(--spring)}
.p-opt.on{opacity:1;transform:none}
.p-opt .ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--grn-hi),var(--grn-deep));color:var(--grn-ink);font-weight:800}
.p-opt b{font-size:.85rem;font-weight:600;display:block}
.p-opt>div>span{font-size:.73rem;color:var(--dim);display:block;margin-top:2px}
.p-opt .sw{color:var(--grn-hi);font-weight:700;display:inline}
.p-div-note{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:.82rem;
  padding:8px 14px;border-radius:999px;background:rgba(123,178,144,.1);border:1px solid rgba(123,178,144,.32);
  color:var(--grn);opacity:0;transform:translateY(8px);
  transition:opacity .7s var(--ease-out) .3s,transform .7s var(--ease-out) .3s}
.p-div-note.ok{opacity:1;transform:none}

/* ══ 06 · TOP-DOWN — one arrow draws from market → sector → screener → stock.
   --tdp (0..1, scroll-driven in premium.js) scales the progress line; each
   station .lit(s) as the tip passes. Gauge rings REMOVED (operator 07-12). ══ */
.p-td{position:relative;max-width:1040px;margin:0 auto;--tdp:0}
.p-td-line{position:absolute;left:50%;top:8px;bottom:clamp(120px,16vh,190px);width:2px;margin-left:-1px;z-index:1}
.p-td-line::before{content:"";position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(var(--line2),var(--line))}
.p-td-prog{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:2px;
  background:linear-gradient(180deg,var(--grn-deep),var(--grn-hi));
  transform:scaleY(var(--tdp));transform-origin:top;box-shadow:0 0 14px var(--glow-soft)}
.p-td-tip{position:absolute;left:50%;top:calc(var(--tdp)*100%);transform:translate(-50%,-6px);
  width:26px;height:26px;color:var(--grn-hi);opacity:min(1,calc(var(--tdp)*14));
  filter:drop-shadow(0 0 8px var(--glow))}
.p-td-step{position:relative;display:grid;grid-template-columns:1fr 84px 1fr;align-items:center;
  padding:clamp(28px,5vh,56px) 0}
.p-td-node{grid-column:2;grid-row:1;justify-self:center;align-self:start;margin-top:4px;z-index:2;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:.86rem;color:var(--dim);
  background:linear-gradient(160deg,#131a15,#0b110d);border:1px solid var(--line2);
  transition:background .6s,color .6s,border-color .6s,box-shadow .6s}
.p-td-step.lit .p-td-node{color:var(--grn-ink);
  background:linear-gradient(150deg,var(--grn-hi),var(--grn-deep));
  border-color:rgba(143,202,165,.7);box-shadow:0 0 22px -4px var(--glow)}
.p-td-copy{grid-column:1;grid-row:1;padding-right:clamp(18px,3vw,40px);text-align:right;
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-out),transform .85s var(--ease-out)}
.p-td-media{grid-column:3;grid-row:1;padding-left:clamp(18px,3vw,40px);
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-out) .12s,transform .9s var(--ease-out) .12s}
.p-td-step.alt .p-td-copy{grid-column:3;text-align:left;padding:0 0 0 clamp(18px,3vw,40px)}
.p-td-step.alt .p-td-media{grid-column:1;padding:0 clamp(18px,3vw,40px) 0 0}
.p-td-step.lit .p-td-copy,.p-td-step.lit .p-td-media{opacity:1;transform:none}
.p-td-copy h3{font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.p-td-copy p{color:var(--dim);font-size:.95rem;line-height:1.55;max-width:40ch;margin-left:auto}
.p-td-step.alt .p-td-copy p{margin-left:0}
.p-td-copy .p-scr-chips{justify-content:flex-end;margin:14px 0 0}
.p-td-step.alt .p-td-copy .p-scr-chips{justify-content:flex-start}
/* filter chips pop one by one when station 3 lights (--ci stagger) */
.p-td-step .p-chip{opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease-out) calc(.25s + var(--ci,0)*.14s),
             transform .55s var(--ease-out) calc(.25s + var(--ci,0)*.14s),
             color .4s,background .4s,border-color .4s}
.p-td-step.lit .p-chip{opacity:1;transform:none;color:var(--grn-hi);
  background:rgba(123,178,144,.15);border-color:rgba(123,178,144,.46)}
.p-td .p-shot.td{width:min(100%,330px)}
.p-td-duo{position:relative;width:min(100%,380px);margin:22px auto 0;padding-bottom:64px}
.p-td-duo .p-shot.s1{width:min(86%,300px);margin:0}
/* strategy capture has content at its very top edge — float the badge fully above the frame */
.p-td-duo .p-shot.s1 .p-shot-badge{top:-32px;left:10px}
.p-td-duo .p-shot.s2{position:absolute;right:0;top:36%;width:min(60%,220px);
  transform:rotate(2.2deg);z-index:2}
/* station 4: the resulting verdict card (same stock + numbers as scenes 01/02) */
.p-td-result{width:min(100%,320px);margin:0 auto;border-radius:22px;padding:22px;
  background:linear-gradient(155deg,#141c16,#0a100c 70%);border:1px solid rgba(123,178,144,.34);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.1),0 0 46px -12px var(--glow-soft)}
.p-td-result .hd{display:flex;align-items:center;gap:9px;margin-bottom:12px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.09)}
.p-td-result .tk{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#22302a,#101a14);border:1px solid rgba(123,178,144,.35);
  font-size:.5rem;font-weight:800;color:var(--grn-hi)}
.p-td-result .nm{font-size:.7rem;font-weight:600;color:#dfe9e3;line-height:1.3}
.p-td-result .nm i{font-style:normal;color:var(--faint);margin-left:4px;font-size:.62rem}
.p-td-result .row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:.85rem}
.p-td-result .row .k{color:var(--faint);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.p-td-result .row .v{font-weight:700;font-variant-numeric:tabular-nums}
.p-td-result .row .v.grn{color:var(--grn-hi)}
.p-td-result .bar{height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0 10px}
.p-td-result .bar i{display:block;height:100%;width:71%;
  background:linear-gradient(90deg,var(--grn-deep),var(--grn-hi))}
.p-td-result .ft{display:flex;justify-content:space-between;align-items:center;gap:10px}
.p-td-result .up{color:var(--grn);font-weight:700;font-size:.84rem}
.p-td-result .badge{font-size:.62rem;font-weight:700;letter-spacing:.06em;padding:5px 10px;border-radius:999px;
  color:var(--grn-hi);background:rgba(123,178,144,.14);border:1px solid rgba(123,178,144,.4)}

/* filter chips (shared) — also used by the top-down station 3 */
.p-scr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.p-chip{font-size:.74rem;font-weight:600;padding:8px 14px;border-radius:999px;cursor:default;
  border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--dim)}
@keyframes chipPop{0%{transform:scale(.92)}60%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ══ 07 · EVIDENCE — chart draws + stats + extra tool thumbs ══════════════ */
.p-chart{position:relative;height:auto;border-radius:var(--r-lg);padding:22px;
  background:linear-gradient(165deg,#0e1410,#090e0b);border:1px solid var(--line)}
.p-chart svg{width:100%;height:100%;overflow:visible}
.p-chart .grid{stroke:var(--line);stroke-width:1}
.p-chart .base{stroke:var(--faint);stroke-width:1.6;fill:none;
  stroke-dasharray:var(--l2,1400);stroke-dashoffset:var(--l2,1400);transition:stroke-dashoffset 2s var(--ease-out) .3s}
.p-chart .alpha{stroke:var(--grn);stroke-width:2.6;fill:none;
  stroke-dasharray:var(--l1,1600);stroke-dashoffset:var(--l1,1600);transition:stroke-dashoffset 2.2s var(--ease-out)}
.p-chart .area{fill:url(#pgrad);opacity:0;transition:opacity 1.4s 1s}
/* line labels as HTML overlays — immune to the preserveAspectRatio:none squeeze on phones */
.p-ch-lbl{display:none}
.p-ch-lbl-legacy{position:absolute;right:26px;font-size:.74rem;font-weight:600;color:var(--dim);
  pointer-events:none;opacity:0;transition:opacity .8s 1.9s;
  text-shadow:0 1px 6px rgba(7,11,9,.9)}
.p-ch-lbl.a{top:8%;color:var(--grn-hi)}
.p-ch-lbl.m{top:53%}
.p-chart.is-in .alpha,.p-chart.is-in .base{stroke-dashoffset:0}
.p-chart.is-in .area{opacity:1}
.p-chart.is-in .p-ch-lbl{opacity:1}
.p-chart-cap{text-align:center;color:var(--faint);font-size:.7rem;margin-top:12px;letter-spacing:.04em}
.p-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.p-stat{text-align:center}
.p-stat .n{font-size:clamp(2rem,5vw,3.1rem);font-weight:600;color:var(--grn-hi);line-height:1}
.p-stat .l{color:var(--dim);font-size:.82rem;margin-top:8px}
.p-more{display:grid;grid-template-columns:1fr;max-width:620px;margin:clamp(40px,6vw,64px) auto 0;
  gap:clamp(16px,3vw,28px)}
.p-more-card{border-radius:var(--r-lg);padding:18px;
  background:linear-gradient(165deg,#0f1511,#090e0b);border:1px solid var(--line)}
.p-more-card .p-shot{width:100%;box-shadow:0 24px 50px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.1)}
.p-more-card h3{font-size:1rem;font-weight:600;margin:16px 4px 4px}
.p-more-card p{color:var(--dim);font-size:.82rem;margin:0 4px}

/* ══ mid-page CTA band ════════════════════════════════════════════════════ */
.p-band{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,44px)}
.p-band-in{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  border-radius:var(--r-lg);padding:clamp(22px,4vw,34px) clamp(22px,4vw,40px);
  background:linear-gradient(120deg,rgba(123,178,144,.12),rgba(10,16,12,.5) 55%);
  border:1px solid rgba(123,178,144,.26)}
.p-band-in .tt{font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:600;letter-spacing:-.02em}
.p-band-in .tt small{display:block;font-size:.82rem;color:var(--dim);font-weight:400;margin-top:4px}

/* ══ 08 · FINALE ══════════════════════════════════════════════════════════ */
.p-finale{position:relative;text-align:center;padding:clamp(110px,17vh,210px) 0;overflow:hidden;z-index:2}
.p-finale::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:120vw;height:120vw;max-width:1300px;max-height:1300px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(123,178,144,.13),transparent 55%);
  animation:finaleBreath 7s var(--ease) infinite}
@keyframes finaleBreath{0%,100%{opacity:.75}50%{opacity:1}}
.p-finale .p-wrap{position:relative}
.p-final-line{font-size:clamp(2.1rem,6.4vw,4.8rem);font-weight:500;line-height:1.04;letter-spacing:-.03em;
  max-width:17ch;margin:0 auto 40px}
.p-price-pill{display:inline-flex;align-items:baseline;gap:8px;margin-bottom:30px;
  padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--line2)}
.p-price-pill .amt{font-size:1.12rem;font-weight:700}
.p-price-pill .per{color:var(--faint);font-size:.82rem}
.p-price-pill .free{color:var(--grn-hi);font-weight:600;font-size:.82rem}
/* .pro-cta-micro = the class the frozen $microLine (pro.php ≤166) actually renders — style both */
.p-cta-micro,.pro-cta-micro{margin-top:18px;color:var(--faint);font-size:.86rem}
.p-cta-micro a,.pro-cta-micro a{color:var(--grn);font-weight:600}
.p-guarantee{margin-top:28px;display:inline-flex;flex-wrap:wrap;gap:18px;justify-content:center;
  color:var(--faint);font-size:.8rem}
.p-guarantee span{display:inline-flex;align-items:center;gap:7px}
.p-guarantee svg{width:15px;height:15px;color:var(--grn)}

/* ══ CTA button — brand green, light sweep (transform-only) ═══════════════ */
.p-cta-btn,.pro-btn.pro-btn-primary{
  position:relative;display:inline-flex;align-items:center;gap:12px;font-family:var(--ff);cursor:pointer;
  font-size:clamp(.98rem,2vw,1.12rem);font-weight:700;letter-spacing:-.01em;
  padding:17px 36px;border-radius:999px;border:1px solid rgba(143,202,165,.5);
  color:#fff;text-shadow:0 1px 5px rgba(2,10,6,.55);background:linear-gradient(180deg,#3d8a5f,#1f7a4a 60%,#145c37);
  box-shadow:0 16px 44px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .35s var(--ease),box-shadow .35s;overflow:hidden}
.p-cta-btn::before,.pro-btn.pro-btn-primary::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:46%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-130%) skewX(-18deg);animation:ctaSweep 4.6s var(--ease) infinite}
@keyframes ctaSweep{0%,55%{transform:translateX(-130%) skewX(-18deg)}
  80%,100%{transform:translateX(320%) skewX(-18deg)}}
.p-cta-btn:hover,.pro-btn.pro-btn-primary:hover{transform:translateY(-3px) scale(1.015);
  box-shadow:0 26px 64px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.55)}
.p-cta-btn:active,.pro-btn.pro-btn-primary:active{transform:translateY(-1px) scale(.985);transition-duration:.12s}

/* ══ FOOTER ═══════════════════════════════════════════════════════════════ */
.p-foot{position:relative;z-index:2;padding:48px 0 58px;border-top:1px solid var(--line);text-align:center}
.p-foot .p-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.p-foot-brand{display:flex;align-items:center;gap:10px;font-weight:600}
.p-foot-links{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;color:var(--faint);font-size:.84rem}
.p-foot-links a{transition:color .3s}.p-foot-links a:hover{color:var(--grn)}
.p-foot-legal{color:var(--faint);font-size:.74rem;max-width:54ch;line-height:1.6}

/* ══ STICKY MOBILE TRIAL CTA — long page, keep the free-trial CTA always reachable (touch only) ══ */
.p-sticky-cta{display:none}
@media (pointer:coarse){
  .p-sticky-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    position:fixed;left:12px;right:12px;bottom:12px;z-index:70;
    padding:12px 20px;border-radius:16px;text-decoration:none;text-align:center;
    font-weight:700;font-size:1rem;line-height:1.12;color:var(--on-green,#08130d);
    background:var(--grn,#7bb290);box-shadow:0 14px 34px -10px rgba(0,0,0,.66);
    transform:translateY(160%);transition:transform .32s var(--ease-out);pointer-events:none}
  .p-sticky-cta.show{transform:none;pointer-events:auto}
  .p-sticky-sub{font-weight:500;font-size:.72rem;opacity:.82}
}

/* ══ TOUCH (2026-07-16 final) — full animations INCL. the pinned forge scene (operator: "die beste
   Animation"). Removed on phones: ONLY the decorative scroll parallax (hero drift, fixed bg layer,
   screenshot shift) — those per-frame transforms made iOS momentum scrolling stutter ("Stufen"/
   einrasten beim Zurückscrollen). Statically painted they look near-identical and scroll creamy. ══ */
@media (pointer:coarse){
  .p-hero-inner{transform:none!important;opacity:1!important;will-change:auto}
  body.p-body::before{transform:none!important;will-change:auto}
  .p-shot-win img{transform:none!important;will-change:auto}
  /* bar-proof: Höhen aus der beim Laden EINMAL gemessenen px-Variable statt svh — die iOS-Leiste
     kann Hero/Pin damit nie mehr umrechnen/relayouten („Hero hüpft beim Wegschicken"). */
  .p-hero{min-height:var(--vhpx,100svh)}
  .p-pin{height:var(--vhpx,100svh)}
}
/* ══ COMPACT PHONE HERO (2026-07-16) — the DE hero was 909px on a 715px first viewport (194px
   overhang): CTA, price line and the SCROLLEN cue sat below the fold, and dismissing the iOS URL
   bar revealed the overhang (felt like the hero "shifting down"). Tightened so EVERYTHING incl.
   the scroll cue fits the first screen; the hero then centers statically in 100svh = no shift. ══ */
@media (max-width:560px){
  .p-hero{padding:82px 0 22px}
  .p-h1{font-size:2.45rem}
  .p-hero .p-hero-sub{margin-top:16px;font-size:.98rem}
  .p-hero-steps{margin-top:14px;gap:8px}
  .p-hero-steps li{font-size:.92rem}
  .p-hero-proof{margin-top:10px;padding:6px 12px;font-size:.76rem}
  .p-hero-cta-row{margin-top:14px;gap:8px}
  .p-trust{font-size:.78rem;line-height:1.5}
  .p-scrollcue{bottom:10px}
  .p-scrollcue i{height:22px}
}

/* ══ REDUCED MOTION — finished states, zero movement ══════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important}
  .p-h1 .ln>span{transform:none;animation:none}
  .p-hero-sub,.p-hero-cta-row,.p-scrollcue{opacity:1;animation:none}
  .p-hero-inner{transform:none;opacity:1}
  .p-hero-os{transform:translateY(-50%);opacity:.96}
  .p-float,.p-opt,.p-div-note{opacity:1!important;transform:none!important}
  .p-scene--forge{height:auto!important}   /* beat the later max-width:560 rule that sets 260vh */
  .p-scene--forge .p-pin{position:relative!important;height:auto;padding:40px 0;overflow:hidden}
  .p-forge{flex:none;min-height:0;height:min(56vh,520px);max-height:none;margin:14px 0}
  .p-forge-verdict{top:auto;bottom:2%}
  .p-fchip{opacity:.85;--pz:0}
  .p-forge-core{--cp:1}
  .p-forge-out,.p-forge-verdict,.p-forge-hint{opacity:1}
  .p-forge-out.fv{transform:translate3d(calc(-50% - min(24vw,300px)),-50%,0)}
  .p-forge-out.qs{transform:translate3d(calc(-50% + min(24vw,300px)),-50%,0)}
  .p-forge-verdict{transform:translateX(-50%)}
  .p-chip{opacity:1!important;transform:none!important;color:var(--grn-hi);
    background:rgba(123,178,144,.15);border-color:rgba(123,178,144,.46)}
  .p-chart .base,.p-chart .alpha{stroke-dashoffset:0}
  .p-chart .area,.p-ch-lbl{opacity:1}
  .p-wl-mail{opacity:1!important;transform:none!important;animation:none!important}
  /* feed scene: end state = cards view, chip filled, no cursor theatre */
  .p-cursor,.p-fly-card{display:none}
  .p-feed-flip{transition:none}
  .p-wl-chip .ok{opacity:1;transform:none}
  /* top-down: arrow fully drawn, every station lit (JS also sets --tdp/.lit) */
  .p-td{--tdp:1}
  .p-td-copy,.p-td-media{opacity:1!important;transform:none!important;transition:none}
  .p-finale::before,.p-scrollcue i,.p-os-ring,.p-os-chip,.p-cta-btn::before,
  .pro-btn.pro-btn-primary::before,.p-hero-stars g{animation:none}
}

/* ══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .p-verdict-stage .p-float.f1{left:-4%}
  .p-verdict-stage .p-float.f2{left:-7%}
  .p-verdict-stage .p-float.f3{left:-4%}
  .p-verdict-stage .p-float.f4{left:-6%}
  .p-verdict-stage .p-float.badge{right:-2%}
  .p-wl-stage .p-float.sig{top:-14px;right:10px}   /* über der Frame-Kante — verdeckt keine Kartenwerte */
}
@media (max-width:900px){
  .p-hero-os{display:none}
  .p-split,.p-split.rev{grid-template-columns:1fr;gap:30px}
  .p-split.rev .p-split-copy{order:0}
  .p-shot{width:min(100%,360px)}
  .p-shot-stage{padding:22px 0}
  .p-verdict-stage .p-float.f1{left:2%}.p-verdict-stage .p-float.f2{left:0}
  .p-verdict-stage .p-float.f3{left:2%}.p-verdict-stage .p-float.f4{left:0}
  .p-verdict-stage .p-float.badge{right:0}
  .p-wl-stage .p-float.sig{right:0}
  .p-duo{min-height:0;padding-bottom:16px}
  .p-duo .p-shot.a{width:min(94%,400px);margin:0 auto 0 0}
  .p-duo .p-shot.b{position:static;width:min(86%,340px);margin:16px 0 0 auto;transform:rotate(1.6deg)}
  .p-opt{left:0;bottom:0;position:relative;margin-top:18px;max-width:100%}
  .p-duo-illu{position:static;display:block;margin-top:12px}
  .seam{height:70px;margin:-35px auto}
  /* top-down: line on the left, stations stack (copy above media) */
  .p-td-line{left:19px;margin-left:0}
  .p-td-tip{left:19px}
  .p-td-step,.p-td-step.alt{grid-template-columns:40px 1fr;padding:24px 0}
  .p-td-node{grid-column:1;grid-row:1;justify-self:start}
  .p-td-copy,.p-td-step.alt .p-td-copy{grid-column:2;grid-row:1;text-align:left;padding:0 0 0 14px}
  .p-td-copy p{margin-left:0}
  .p-td-media,.p-td-step.alt .p-td-media{grid-column:2;grid-row:2;padding:16px 0 0 14px}
  .p-td-copy .p-scr-chips,.p-td-step.alt .p-td-copy .p-scr-chips{justify-content:flex-start}
  .p-td .p-shot.td,.p-td-duo,.p-td-result{margin-left:0}
}
@media (max-width:700px){
  .p-sec{padding:clamp(56px,8vh,96px) 0}   /* halve the dead zones between scenes on phones */
  .p-finale{padding:clamp(88px,13vh,150px) 0}
  /* the real screenshot carries the KPIs on phones — hide the duplicate chips,
     keep only the verdict badge, floated ABOVE the frame so nothing is covered */
  .p-verdict-stage .p-float.f1,.p-verdict-stage .p-float.f2,
  .p-verdict-stage .p-float.f3,.p-verdict-stage .p-float.f4{display:none}
  .p-verdict-stage .p-float.badge{top:-6px;right:4%}
  /* keep the flip chip INSIDE the frame, off the right edge, over the card body —
     it must never sit on top of the app's own counters/controls */
  .p-wl-stage .p-float.sig{top:24%;right:10px}
}
@media (max-width:560px){
  .p-nav{padding:12px 16px}
  .p-nav-cta{font-size:.78rem;padding:8px 14px}
  .p-brand{font-size:.94rem}
  .p-hero{padding-top:104px}
  .p-hero-cta-row .p-cta-btn{font-size:.92rem;padding:15px 24px}  /* one line, no mid-dash wrap */
  .p-scene--forge{height:260vh}
  .p-fchip{font-size:.52rem;padding:4px 8px}
  /* phones: half the model chips is plenty — full 21 collide at 10.5vw column gaps */
  .p-fchip{font-size:.52rem;padding:3px 7px;--fx:var(--mx,var(--x));--fy:var(--my,var(--y))}
  .p-fchip.q{font-size:.5rem;padding:3px 7px}
  .p-fchip.mh{display:none}   /* Phone: kuratierte Auswahl im kollisionsfreien 2-Spalten-Raster */
  .p-forge-src{display:none}
  .p-forge-core{width:min(20vh,150px)}
  .p-forge-flash{width:min(24vh,170px)}
  .p-forge-out{width:37vw;padding:12px 8px;background:linear-gradient(165deg,#131c15,#0b110d)}
  .p-forge-out.fv{transform:translate3d(calc(-50% - 30vw - (1 - var(--oo))*24px),-50%,0)}
  .p-forge-out.qs{transform:translate3d(calc(-50% + 30vw + (1 - var(--oo))*24px),-50%,0)}
  .p-forge-verdict{top:calc(50% + 16vh)}
  .p-float{padding:8px 11px}
  .p-float .v{font-size:.88rem}
  .p-float .k{font-size:.52rem}
  .p-stat-row{grid-template-columns:1fr;gap:22px}
  .p-chart{height:auto;padding:14px}
  .p-band-in{justify-content:center;text-align:center}
  .p-guarantee{gap:10px 14px}
  /* feed scene on phones: chip INSIDE the top edge so nothing overflows */
  .p-feed-stage{padding-top:30px}
  .p-wl-chip{top:2px;right:0;padding:8px 11px;font-size:.72rem}
  .p-fly-card{font-size:.66rem;padding:6px 9px}
  .p-core-claim{padding:11px 13px}
  .p-td-copy h3{font-size:1.15rem}
  .p-td-copy p{font-size:.88rem}
}

/* Echtes Marken-Logo im Header (wie Startseite: assets/fvc-logo.svg) + „Pro"-Chip */
.p-brand-logo{height:28px;width:auto;display:block}
.p-brand span.p-brand-pro{color:var(--grn-ink)}   /* schlägt .p-brand span{color:grün} — sonst grün-auf-grün unsichtbar */
.p-brand-pro{margin-left:10px;display:inline-flex;align-items:center;gap:5px;
  background:var(--grn);border:1px solid var(--grn);color:var(--grn-ink);
  font-weight:800;border-radius:6px;padding:6px 13px;line-height:1;
  text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}   /* = Original hdr-pro-btn der App */
.p-foot-brand img{height:24px;width:auto;opacity:.92}
@media (max-width:560px){.p-brand-logo{height:24px}.p-brand-pro{margin-left:7px;padding:2px 8px;font-size:.66rem}}


/* ── Evidence-Chart im Popup-Stil (echte Kurven, Achsen, Legende) ── */
.p-chart{padding-top:44px;padding-bottom:22px}
.p-chart-h{position:absolute;top:14px;left:22px;right:22px;text-align:center;font-size:.82rem;color:var(--dim)}
.p-chart-h b{color:var(--text);font-weight:600}
.p-ch-dot.a{fill:var(--grn-hi);filter:drop-shadow(0 0 8px var(--glow))}
.p-ch-dot.m{fill:#cfd6d2}
.p-ch-svgwrap{position:relative}
.p-ch-svgwrap svg{width:100%;height:clamp(210px,30vw,300px);display:block}
.p-ch-ax{position:absolute;left:2px;font-size:.62rem;color:var(--faint);font-variant-numeric:tabular-nums}
.p-ch-years{margin:8px 2px 0;display:flex;justify-content:space-between;
  font-size:.62rem;color:var(--faint);font-variant-numeric:tabular-nums}
.p-ch-leg{margin-top:14px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;
  font-size:.82rem;color:var(--dim)}
.p-ch-leg b{color:var(--text);font-weight:700;margin-left:4px}
.p-ch-leg .li{display:inline-flex;align-items:center;gap:8px}
.p-ch-leg .li i{width:12px;height:12px;border-radius:4px;display:inline-block}
.p-ch-leg .li.a i{background:var(--grn)}
.p-ch-leg .li.m i{background:#aab3ae}
@media (max-width:560px){
  .p-chart{padding-top:58px;padding-bottom:18px}
  .p-chart-h{font-size:.7rem}
  .p-ch-leg{flex-direction:column;gap:6px;align-items:center}
  .p-ch-years span:nth-child(even){display:none}
}


/* ── Sternschnuppe: fliegt im Loop von links unten Richtung Bildmitte (nur Desktop) ── */
.p-shoot-wrap{position:fixed;left:0;top:0;z-index:5;pointer-events:none;
  transform-origin:left center;opacity:0}
.p-shoot{display:block;width:120px;height:2px;border-radius:2px;
  transform:translateX(-100%);   /* KOPF liegt am Wrap-Ursprung → Flug endet exakt am Ziel, Schweif hängt hinterher */
  background:linear-gradient(90deg,transparent,rgba(214,255,233,.95));
  filter:drop-shadow(0 0 7px rgba(143,202,165,.9))}
.p-shoot::after{content:"";position:absolute;right:-2px;top:50%;width:5px;height:5px;border-radius:50%;
  transform:translateY(-50%);background:#eafff4;box-shadow:0 0 12px 3px rgba(163,222,185,.9)}
@media (pointer:coarse),(max-width:900px){.p-shoot-wrap{display:none}}
@media (prefers-reduced-motion:reduce){.p-shoot-wrap{display:none}}

/* Einschlag: Blitz am Eyebrow-Strich + Ausrollen der Überschrift */
.p-eyebrow{position:relative}
.p-burst{position:absolute;left:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  pointer-events:none;opacity:0}
.p-burst.boom{animation:pBoom .75s var(--ease-out)}
@keyframes pBoom{
  0%{opacity:1;box-shadow:0 0 0 0 rgba(214,255,233,.9),0 0 10px 3px rgba(163,222,185,.95);transform:scale(.4)}
  45%{opacity:1;box-shadow:0 0 34px 14px rgba(143,202,165,.5),0 0 10px 4px rgba(214,255,233,.9);transform:scale(1.25)}
  100%{opacity:0;box-shadow:0 0 60px 26px rgba(143,202,165,0),0 0 12px 5px rgba(214,255,233,0);transform:scale(1.6)}}
.p-burst{background:#eafff4}
.p-eyebrow.veiled .p-eyebrow-txt{clip-path:inset(-30% 100% -30% 0)}
.p-eyebrow.veiled::before{transform:scaleX(0);transform-origin:left center}
.p-eyebrow.unroll .p-eyebrow-txt{clip-path:inset(-30% -8% -30% 0);
  transition:clip-path .95s var(--ease-out) .12s}
.p-eyebrow.unroll::before{transform:scaleX(1);transition:transform .5s var(--ease-out) .1s}
.p-eyebrow-txt{display:inline-block}

/* Hero-OS-Karte: Demo-Aktie (Ticker-Kachel + Name) über dem Fair Value */
.p-os-stock{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.09)}
.p-os-stock .tk{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#22302a,#101a14);border:1px solid rgba(123,178,144,.35);
  font-size:.5rem;font-weight:800;letter-spacing:.02em;color:var(--grn-hi)}
.p-os-stock .nm{font-size:.66rem;font-weight:600;color:#dfe9e3;line-height:1.25}
.p-os-stock .nm i{font-style:normal;color:var(--faint);font-weight:600;margin-left:4px;font-size:.6rem}

/* Snap bewusst ENTFERNT (Operator: kein „Zurückscrollen/scroll-to") — der kurze Halt kommt
   ausschließlich vom Sticky-Pin der Szenen (reiner Freeze, nie eine Gegenbewegung). */

/* ── „Einrasten wie 02": Szenen 01/03–06 werden am Desktop GEPINNT ──
   height = 100vh + Halte-Strecke; der Inhalt klebt zentriert, während man ~55vh „durchscrollt"
   → exakt das Halte-Gefühl der Forge. Mobile bleibt natürlicher Fluss (Inhalte > Viewport). */
@media (min-width:901px){
  section.p-hold{height:calc(100vh + 26vh);padding:0}   /* KURZER Freeze (Operator: nur kurz blockieren) */
  section.p-hold > .p-wrap{position:sticky;top:0;min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding-top:76px;padding-bottom:28px}
}

/* ── INTERLUDE · Tutorial-Video — premium frame, pulsing play, inline playback ── */
.p-vid{position:relative;width:min(100%,880px);margin:38px auto 0;border-radius:26px;padding:10px;
  background:linear-gradient(160deg,rgba(123,178,144,.16),rgba(20,30,24,.6) 45%,rgba(10,16,12,.8));
  border:1px solid rgba(123,178,144,.28);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 60px -18px var(--glow-soft),inset 0 1px 0 rgba(255,255,255,.08)}
.p-vid-cover{position:relative;display:block;width:100%;border:0;padding:0;margin:0;cursor:pointer;
  border-radius:18px;overflow:hidden;background:#000;-webkit-tap-highlight-color:transparent}
.p-vid-cover[hidden]{display:none}
.p-vid-cover img{display:block;width:100%;height:auto}
.p-vid-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,7,.05) 40%,rgba(5,9,7,.62));
  transition:background .3s}
.p-vid-cover:hover .p-vid-dim{background:linear-gradient(180deg,rgba(5,9,7,0) 40%,rgba(5,9,7,.5))}
.p-vid-btn{position:absolute;inset:0;margin:auto;width:86px;height:86px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(180deg,#3d8a5f,#1f7a4a 55%,#145c37);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s}
.p-vid-cover:hover .p-vid-btn{transform:scale(1.06)}
.p-vid-btn svg{width:34px;height:34px;margin-left:4px}
/* pulse ring: transform+opacity only (GPU-cheap, matches the site's animation budget) */
.p-vid-btn i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(143,202,165,.55);
  animation:pvidring 2.6s ease-out infinite}
@keyframes pvidring{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){.p-vid-btn i{animation:none}}
.p-vid-tag{position:absolute;left:16px;bottom:14px;font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#e6efe9;background:rgba(10,16,12,.55);border:1px solid rgba(123,178,144,.3);
  padding:6px 12px;border-radius:999px;backdrop-filter:none}
.p-vid video{display:block;width:100%;height:auto;border-radius:18px;background:#000}
.p-vid video[hidden]{display:none}

/* ── INTERLUDE · Trust — founder social card + community leaderboard ── */
.p-trust{display:grid;grid-template-columns:330px 1fr;gap:20px;align-items:stretch;
  width:min(100%,980px);margin:38px auto 0}
.p-founder{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;
  gap:6px;border-radius:24px;padding:30px 24px;
  background:linear-gradient(165deg,#131c16,#0a100c 70%);border:1px solid rgba(123,178,144,.3);
  box-shadow:0 30px 70px -32px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.09),0 0 44px -14px var(--glow-soft)}
.p-founder .ph{width:112px;height:112px;border-radius:50%;object-fit:cover;margin-bottom:8px;
  border:2px solid rgba(123,178,144,.55);box-shadow:0 14px 34px -14px rgba(0,0,0,.9),0 0 30px -10px var(--glow-soft)}
.p-founder .nm{display:flex;align-items:center;gap:6px;font-size:1.02rem;font-weight:800;color:#eef4f0}
.p-founder .nm svg{width:17px;height:17px;color:var(--grn-hi);flex:none}
.p-founder .rl{font-size:.78rem;color:var(--faint);margin-bottom:12px}
.p-founder .socs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.p-founder .soc{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  font-size:.74rem;color:#d9e4dd;text-decoration:none;
  background:rgba(123,178,144,.1);border:1px solid rgba(123,178,144,.3);transition:background .2s,border-color .2s}
.p-founder .soc:hover{background:rgba(123,178,144,.2);border-color:rgba(123,178,144,.55)}
.p-founder .soc svg{width:15px;height:15px;color:var(--grn-hi)}
.p-founder .soc b{color:#fff;font-weight:800}
.p-lb{display:flex;flex-direction:column;gap:10px;border-radius:24px;padding:22px;
  background:linear-gradient(165deg,#111a14,#0a100c 75%);border:1px solid rgba(123,178,144,.26);
  box-shadow:0 30px 70px -32px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.p-lb-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:2px}
.p-lb-h b{font-size:.95rem;color:#eef4f0}
.p-lb-h small{font-size:.72rem;color:var(--faint);white-space:nowrap}
.p-lb-card{display:grid;grid-template-columns:34px 1fr auto;grid-template-areas:"rk who ret" "rk tks ret";
  column-gap:12px;row-gap:6px;align-items:center;padding:13px 14px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.p-lb-card.r1{background:rgba(123,178,144,.09);border-color:rgba(123,178,144,.34)}
.p-lb-card .rk{grid-area:rk;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;font-weight:800;color:#0e1512;background:linear-gradient(160deg,#8fcaa5,#4d8a66)}
.p-lb-card.r2 .rk{background:linear-gradient(160deg,#cfd8d2,#8fa098)}
.p-lb-card.r3 .rk{background:linear-gradient(160deg,#d9b98c,#a17e50)}
.p-lb-card .who{grid-area:who;display:flex;align-items:baseline;gap:8px;min-width:0}
.p-lb-card .who b{font-size:.85rem;color:#e8f0eb;white-space:nowrap}
.p-lb-card .who small{font-size:.7rem;color:var(--faint);white-space:nowrap}
.p-lb-card .tks{grid-area:tks;display:flex;flex-wrap:wrap;gap:6px}
.p-lb-card .tk{font-size:.66rem;font-weight:700;color:#cdd9d1;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.p-lb-card .tk i{font-style:normal;color:var(--grn-hi);margin-left:3px}
.p-lb-card .ret{grid-area:ret;text-align:right}
.p-lb-card .ret b{display:block;font-size:1.06rem;font-weight:800;color:var(--grn-hi)}
.p-lb-card .ret small{font-size:.64rem;color:var(--faint)}
.p-lb-cap{margin:8px 2px 0;font-size:.66rem;line-height:1.5;color:var(--faint)}
@media (max-width:900px){
  .p-trust{grid-template-columns:1fr;gap:14px}
  .p-vid{margin-top:26px;border-radius:20px;padding:7px}
  .p-vid-btn{width:68px;height:68px}.p-vid-btn svg{width:26px;height:26px}
  .p-lb{padding:16px}
  .p-lb-card{grid-template-columns:28px 1fr;grid-template-areas:"rk who" "rk tks" "rk ret";row-gap:7px}
  .p-lb-card .rk{width:26px;height:26px;font-size:.72rem}
  .p-lb-card .ret{text-align:left}
  .p-lb-card .ret b{display:inline;margin-right:6px}
}