/* Kapio mockup, shared stylesheet. Edit here and every mockup page updates. */
:root{
  /* ── Kapio brand: orange-forward on warm near-white (yellow/lime dropped from palette 2026-07-28) ── */
  --blue:#F58220; --blue-dark:#DC6E12; --blue-deep:#B85A0F;
  --blue-dim:rgba(245,130,32,0.08); --blue-mid:rgba(245,130,32,0.13); --blue-border:rgba(245,130,32,0.24);
  --gold:#FBAA1B;
  --bg:#FDFAF5; --bg2:#F6EFE6; --bg3:#EFE5D8;
  --ink:#202020; --ink2:#2C2C2C; --muted:#5C554A; --sub:#9C9486; --line:#EBE3D6;
}
@font-face{
  font-family:'Bayer Sans';
  src:url('fonts/BayerSans-Regular.ttf') format('truetype');
  font-weight:400 700; font-style:normal; font-display:swap;
}
/* Bayer Sans reserved for the KAPIO logo wordmark; General Sans for all headlines + body */
.brand-word{font-family:'Bayer Sans','General Sans',sans-serif;}
/* real Kapio K mark sits inside the small avatar/brand tiles (replaces the old letter "K") */
.hh-chat-av>img,.pf-av>img,.wp-ans-av>img,.afeed-mark>img,.al-n-mark>img{width:62%;height:62%;display:block;}
*{box-sizing:border-box;margin:0;padding:0;font-family:'General Sans',-apple-system,BlinkMacSystemFont,sans-serif;}
html{scroll-behavior:smooth;}
html,body{background:var(--bg);color:var(--ink);font-weight:300;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{overflow-x:hidden;}
img{display:block;max-width:100%;}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
em{font-style:normal;color:var(--blue);}

/* ───────── NAV ───────── */
/* floating frosted-pill header (Cleo-style: transparent, drifts over the hero photo) */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:clamp(14px,2vh,20px) clamp(16px,4vw,40px);background:none;border:none;pointer-events:none;}
.nav > .nav-logo-pill{justify-self:start;}
.nav > .nav-links{justify-self:center;}
.nav > .nav-right{justify-self:end;}
/* the mega menu is a grid child too, so keep it out of the column flow */
.nav > .mega{grid-column:1 / -1;grid-row:2;}
.nav>*{pointer-events:auto;}
.nav-pill{backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  background:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 8px 24px rgba(0,0,0,0.10);border-radius:999px;}
.nav-logo-pill{display:inline-flex;align-items:center;padding:11px 20px;}
.nav-logo{height:21px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:4px;padding:6px 8px;}
.nav-links a{text-decoration:none;font-size:14px;font-weight:500;color:var(--ink);opacity:0.82;padding:8px 15px;border-radius:999px;transition:.16s;}
.nav-links a:hover{opacity:1;color:var(--blue);background:rgba(255,255,255,0.55);}
.nav-right{display:flex;align-items:center;gap:5px;padding:5px;}
.nav-sign{background:none;border:none;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;padding:9px 16px;border-radius:999px;font-family:inherit;transition:.16s;}
.nav-sign:hover{background:rgba(255,255,255,0.55);}
.nav-btn{background:var(--ink);color:#fff;border:none;border-radius:999px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.16s;}
.nav-btn:hover{background:var(--blue);}

/* ───────── HERO ───────── */
.hero{position:relative;padding:clamp(104px,13vh,140px) clamp(20px,5vw,56px) clamp(50px,8vh,90px);overflow:hidden;isolation:isolate;}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;
  background:
  radial-gradient(120% 90% at 82% -6%, rgba(224,123,46,0.10) 0%, rgba(224,123,46,0) 52%),
  radial-gradient(90% 80% at 2% 104%, rgba(236,154,78,0.10) 0%, rgba(236,154,78,0) 52%),
  radial-gradient(110% 120% at 50% 26%, #FCFCFA 0%, #F3F2EE 64%, var(--bg2) 100%);}
/* atmospheric environment: drifting soft colour orbs + grain mesh */
.hero-bg::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(10,10,10,0.05) 1px, transparent 1px);
  background-size:22px 22px;opacity:0.5;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 30%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 100% at 50% 30%, #000 0%, transparent 72%);}
.hero-orb{position:absolute;border-radius:50%;filter:blur(58px);opacity:0.5;will-change:transform;}
.hero-orb.o1{width:520px;height:520px;top:-160px;right:-90px;background:radial-gradient(circle at 50% 50%, rgba(224,123,46,0.42), rgba(224,123,46,0) 70%);animation:orbDrift 19s ease-in-out infinite;}
.hero-orb.o2{width:460px;height:460px;bottom:-170px;left:-110px;background:radial-gradient(circle at 50% 50%, rgba(243,201,154,0.55), rgba(243,201,154,0) 70%);animation:orbDrift 23s ease-in-out infinite reverse;}
.hero-orb.o3{width:380px;height:380px;top:34%;left:60%;background:radial-gradient(circle at 50% 50%, rgba(236,154,78,0.32), rgba(236,154,78,0) 70%);animation:orbDrift2 27s ease-in-out infinite;}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(34px,30px) scale(1.08);}}
@keyframes orbDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,24px) scale(0.92);}}
@media(prefers-reduced-motion:reduce){.hero-orb{animation:none;}}
/* ── PHOTO ENVIRONMENT MODE (Cleo-style: phone floats over a nature scene) ── */
.hero--photo .hero-orb{display:none;}
.hero--photo .hero-bg{background:#0c1410 center/cover no-repeat;}
.hero--photo .hero-bg::after{
  background-image:none;
  /* scrim: lift centre behind phone, darken edges/top/bottom for text legibility */
  background:
    radial-gradient(60% 50% at 50% 44%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(6,12,9,0.40) 0%, rgba(6,12,9,0.10) 24%, rgba(6,12,9,0.16) 54%, rgba(9,15,21,0.62) 82%, #0B1219 100%);
  -webkit-mask-image:none;mask-image:none;opacity:1;}
.hero--forest .hero-bg{background-image:url('/hero-forest.jpg');}
.hero--water .hero-bg{background-image:url('/hero-water.jpg');}
.hero--mountain .hero-bg{background-image:url('/hero-mountain.jpg');}
.hero--lake .hero-bg{background-image:url('/hero-lake.jpg');}
.hero--darkwater .hero-bg{background-image:url('/hero-darkwater.jpg');}
.hero--photo .hero-eyebrow{color:#fff;}
/* heading blends into the scene: airy translucent white with a soft halo, not a hard overlay */
.hero--photo .hero-word{color:rgba(255,255,255,0.88);text-shadow:0 2px 44px rgba(0,0,0,0.42),0 1px 8px rgba(0,0,0,0.3);}
.hero--photo .hero-word b{color:#fff;font-weight:500;}
.hero--photo .hero-h{color:rgba(255,255,255,0.9);text-shadow:0 2px 44px rgba(0,0,0,0.42),0 1px 8px rgba(0,0,0,0.3);}
.hero--photo .hero-h b{color:#fff;}
.hero--photo .hero-sub{color:#fff;font-weight:400;text-shadow:0 1px 18px rgba(0,0,0,0.65),0 1px 3px rgba(0,0,0,0.5);}
.hero--photo .btn-ghost{color:#fff;}
.hero--photo .hero-trust{color:rgba(255,255,255,0.9);text-shadow:0 1px 10px rgba(0,0,0,0.55);}
.hero-inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;}
.hero-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:0.04em;color:var(--blue);margin-bottom:8px;display:inline-flex;align-items:center;gap:8px;}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(224,123,46,0.5);animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,123,46,0.5);}70%{box-shadow:0 0 0 12px rgba(224,123,46,0);}100%{box-shadow:0 0 0 0 rgba(224,123,46,0);}}
/* centered floating-phone stage with heading fragments around it */
.hero-stage{position:relative;width:100%;max-width:1080px;display:flex;align-items:center;justify-content:center;min-height:clamp(560px,74vh,720px);}
.hero-word{position:absolute;z-index:1;font-size:clamp(38px,6.6vw,90px);line-height:0.92;letter-spacing:-0.05em;font-weight:200;color:var(--ink);white-space:nowrap;opacity:0;animation:popin 1s cubic-bezier(.16,.84,.28,1) forwards;}
.hero-word b{font-weight:500;}
.hw1{top:13%;left:1%;animation-delay:.10s;}
.hw2{top:13%;right:1%;animation-delay:.24s;}
.hw3{bottom:15%;left:1%;font-weight:500;animation-delay:.38s;}
.hw4{bottom:15%;right:1%;font-weight:500;animation-delay:.52s;}
@keyframes popin{0%{opacity:0;transform:translateY(34px) scale(.78);}60%{opacity:1;transform:translateY(-6px) scale(1.04);}100%{opacity:1;transform:translateY(0) scale(1);}}
.hero-h{display:none;}
.hero-foot{display:flex;flex-direction:column;align-items:center;margin-top:6px;}
.hero h1{font-size:clamp(40px,5.4vw,68px);font-weight:200;line-height:1.0;letter-spacing:-0.045em;margin-bottom:24px;}
.hero h1 b{font-weight:500;}
.hero-sub{font-size:clamp(17px,1.7vw,20px);font-weight:300;line-height:1.5;color:var(--muted);max-width:560px;margin-bottom:30px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;}
.btn-primary{background:var(--blue);color:#fff;border:none;border-radius:12px;padding:16px 28px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:.18s;display:inline-flex;align-items:center;gap:8px;}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 12px 30px rgba(224,123,46,0.25);}
.btn-ghost{background:none;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;padding:15px 26px;transition:border-color .2s,background .2s;}
.btn-ghost:hover{border-color:var(--ink);background:rgba(10,10,10,0.03);}
.hero--photo .btn-ghost,.sechero .btn-ghost{border-color:rgba(255,255,255,0.34);}
.hero--photo .btn-ghost:hover,.sechero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,0.10);}
.hero-trust{margin-top:24px;font-size:clamp(14.5px,1.7vw,17px);font-weight:500;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;letter-spacing:-0.01em;}
.hero-trust svg{width:18px;height:18px;flex-shrink:0;}

/* hero iPhone — realistic titanium device */
.iphone{position:relative;z-index:2;justify-self:center;width:318px;max-width:88vw;padding:9px;border-radius:58px;
  background:linear-gradient(135deg,#ededef 0%,#c4c4c8 8%,#9c9ca0 19%,#727276 33%,#5a5a5e 50%,#727276 67%,#444448 81%,#8e8e92 93%,#dadadc 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    inset 0 2px 3px rgba(255,255,255,0.5),
    inset 0 -2px 3px rgba(0,0,0,0.5),
    0 1px 2px rgba(0,0,0,0.55),
    0 36px 70px -26px rgba(10,10,12,0.55),
    0 64px 120px -44px rgba(10,10,12,0.5);
  transform-origin:center center;
  transform:none;
  animation:phonein 1.2s cubic-bezier(.16,.84,.28,1) forwards, heroFloat 9s ease-in-out 1.2s infinite;}
/* The device settles at a gentle perspective angle so it reads as a real 3D
   object sitting in the scene, then breathes so it feels alive. */
/* front-facing (no 3D rotation) so the screen stays crisp; just a gentle vertical float */
@keyframes phonein{
  from{opacity:0;transform:translateY(56px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes heroFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}}
@media(prefers-reduced-motion:reduce){.iphone{animation:none;transform:none;}}
.iphone-screen{position:relative;border-radius:49px;overflow:hidden;height:666px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#FBFBF9,#F4F5F0);
  box-shadow:0 0 0 3px #060606;}
.iphone-gloss{position:absolute;inset:0;z-index:35;pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 80%,rgba(255,255,255,0.06) 100%);}
.iphone-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:122px;height:35px;background:#000;border-radius:20px;z-index:40;
  box-shadow:inset 0 0 2px 1px rgba(45,45,52,0.55);}
.iphone-island::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2b3a55 0%,#0a0e16 62%);box-shadow:inset 0 0 1px rgba(95,125,185,0.7);}
/* metallic side buttons */
.ib{position:absolute;border-radius:2px;z-index:0;}
.ib-left{left:-2px;background:linear-gradient(90deg,#7C3D12 0%,#C2762F 44%,#EBAF6A 68%,#89481A 100%);box-shadow:-1px 0 2px rgba(40,18,4,0.45),inset 0 1px 1px rgba(255,224,190,0.5),inset 0 -1px 1px rgba(40,18,4,0.5);}
.ib-right{right:-2px;background:linear-gradient(270deg,#7C3D12 0%,#C2762F 44%,#EBAF6A 68%,#89481A 100%);box-shadow:1px 0 2px rgba(40,18,4,0.45),inset 0 1px 1px rgba(255,224,190,0.5),inset 0 -1px 1px rgba(40,18,4,0.5);}
.ib-action{top:120px;width:4px;height:26px;}
.ib-volup{top:178px;width:4px;height:52px;}
.ib-voldn{top:242px;width:4px;height:52px;}
.ib-power{top:204px;width:4px;height:98px;}
.ios-status{display:flex;align-items:center;justify-content:space-between;padding:18px 30px 7px;font-size:14px;font-weight:600;color:var(--ink);flex-shrink:0;position:relative;z-index:38;}
.ios-status .ios-icons{display:flex;align-items:center;gap:6px;}
.ios-status .ios-icons svg{display:block;}
.phone-head{display:flex;align-items:center;gap:10px;padding:8px 20px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,0.7);backdrop-filter:blur(8px);flex-shrink:0;}
.phone-ava{width:36px;height:36px;border-radius:11px;background:var(--ink);display:flex;align-items:center;justify-content:center;position:relative;}
.phone-ava svg{width:19px;height:19px;stroke:#fff;fill:none;}
.phone-name{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:5px;}
.phone-name .spark{font-size:12px;}
.phone-status{font-size:11.5px;color:var(--blue);display:flex;align-items:center;gap:5px;}
.phone-status .d{width:6px;height:6px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 0 rgba(22,163,74,0.5);animation:pulse 2.4s infinite;}
.phone-body{padding:18px;display:flex;flex-direction:column;gap:11px;flex:1;min-height:0;overflow-y:auto;scroll-behavior:smooth;}
.phone-body::-webkit-scrollbar{width:0;}
.msg-line{display:flex;flex-direction:column;animation:msgin .4s cubic-bezier(.2,.9,.25,1);}
@keyframes msgin{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
.msg{max-width:86%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.5;font-weight:300;}
.msg b{font-weight:500;}
.msg-time{font-size:9.5px;color:var(--sub);margin-top:4px;padding:0 4px;}
/* AI reply — no bubble, typed straight on the screen with typographic hierarchy */
.m-kapio{align-self:flex-start;background:none;border-radius:0;padding:1px 2px;max-width:94%;
  font-size:15.5px;line-height:1.5;font-weight:300;color:var(--muted);letter-spacing:-0.015em;}
.m-kapio b{color:var(--ink);font-weight:600;}          /* key facts pop dark + heavy */
.m-kapio .stat{color:var(--blue);font-weight:600;}      /* live figures in brand blue */
.msg-line.k{align-items:flex-start;margin:3px 0 7px;}
/* small "Kapio" caption sits above the reply, not in a bubble tail */
.msg-line.k .msg-time{order:-1;margin:0 0 3px;padding:0 2px;font-size:9.5px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);opacity:0.75;}
/* User query — centred white pill with gradient orb */
.msg-line.u{align-items:center;margin:5px 0 3px;}
.m-user{align-self:center;display:inline-flex;align-items:center;gap:9px;max-width:94%;background:rgba(255,255,255,0.94);border:1px solid rgba(10,10,10,0.07);border-radius:999px;padding:7px 15px 7px 8px;box-shadow:0 1px 3px rgba(0,0,0,0.05),0 8px 22px rgba(0,0,0,0.06);font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.4;}
.m-user .orb{width:24px;height:24px;border-radius:50%;flex-shrink:0;background:conic-gradient(from 210deg at 55% 45%,#0B2A6B,#F58220,#EC9A4E,#F3C99A,#0B2A6B);box-shadow:inset 0 0 5px rgba(255,255,255,0.35),0 1px 2px rgba(0,0,0,0.12);}
.msg-line.u .msg-time{text-align:center;}
/* in-chat cash flow card (image-2 style) */
.msg-card{align-self:flex-start;width:100%;background:#fff;border:1px solid var(--line);border-radius:18px;border-bottom-left-radius:5px;padding:13px;box-shadow:0 2px 10px rgba(10,10,10,0.05);animation:msgin .4s cubic-bezier(.2,.9,.25,1);}
.cfc-row{display:flex;gap:7px;margin-bottom:10px;}
.cfc-cell{flex:1;border:1px solid var(--line);border-radius:12px;padding:9px 10px;}
.cfc-in{background:rgba(22,163,74,0.06);border-color:rgba(22,163,74,0.22);}
.cfc-out{background:rgba(217,119,6,0.06);border-color:rgba(217,119,6,0.22);}
.cfc-cell .l{font-size:9px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--sub);margin-bottom:5px;}
.cfc-cell .v{font-size:15px;font-weight:600;letter-spacing:-0.02em;}
.cfc-in .v{color:#16A34A;}.cfc-out .v{color:#D97706;}.cfc-net .v{color:var(--ink);}
.cfc-note{font-size:12px;line-height:1.45;color:var(--muted);background:var(--bg);border-radius:10px;padding:9px 11px;}
.cfc-note b{color:var(--ink);font-weight:600;}
/* cash-flow "in a breath" card — In → Out → Kept, split bar, chips */
.breath-card{padding:14px;}
.br-title{font-size:13px;font-weight:600;color:var(--ink);}
.br-sub{font-size:11px;color:var(--sub);margin-top:2px;}
.br-flow{display:flex;align-items:flex-start;justify-content:space-between;gap:3px;margin:13px 0 12px;}
.br-col{flex:1;text-align:center;min-width:0;}
.br-l{font-size:8.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--sub);margin-bottom:4px;}
.br-v{font-size:17px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);line-height:1;}
.br-v.br-in{color:var(--blue);}
.br-v.br-kept{color:#16A34A;}
.br-d{font-size:8.5px;margin-top:5px;white-space:nowrap;}
.br-d.up{color:#16A34A;}
.br-d.neutral{color:var(--sub);}
.br-arrow{flex:none;color:#C7C4BC;font-size:14px;padding-top:15px;}
.br-bar{position:relative;height:8px;border-radius:999px;background:var(--bg2);overflow:hidden;margin-top:2px;}
.br-bar-kept{position:absolute;top:0;right:0;height:100%;border-radius:999px;background:#16A34A;animation:brgrow 1s cubic-bezier(.2,.9,.25,1) forwards;transform-origin:right;}
@keyframes brgrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.br-legend{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);margin-top:6px;}
.br-summary{font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:12px;}
.br-summary b{color:#16A34A;font-weight:600;}
.br-chips{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;}
.br-chip{font-size:11px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-family:inherit;}
@media(prefers-reduced-motion:reduce){.br-bar-kept{animation:none;}}
.typing{align-self:flex-start;display:inline-flex;gap:4px;align-items:center;padding:12px 15px;background:#F0EDE8;border-radius:4px 16px 16px 16px;}
.typing span{width:6px;height:6px;border-radius:50%;background:rgba(10,10,10,0.34);animation:blink 1.2s ease-in-out infinite;}
.typing span:nth-child(2){animation-delay:.18s;}.typing span:nth-child(3){animation-delay:.36s;}
@keyframes blink{0%,80%,100%{transform:scale(.6);opacity:.32;}40%{transform:scale(1);opacity:1;}}
.phone-input{display:flex;align-items:center;gap:8px;padding:13px 14px;border-top:1px solid var(--line);background:#fff;flex-shrink:0;}
.phone-input .field{flex:1;font-size:13.5px;color:var(--ink);font-family:inherit;border:none;background:none;outline:none;padding:0;}
.phone-input .field::placeholder{color:var(--sub);}
.phone-input .go{width:40px;height:34px;border-radius:12px;background:linear-gradient(155deg,#FBE4C9 0%,#FCEBD5 52%,#FDF3E6 100%);border:1px solid rgba(255,255,255,0.75);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;box-shadow:0 2px 7px rgba(224,123,46,0.16),inset 0 1px 1.5px rgba(255,255,255,0.85);transition:filter .14s,transform .14s,box-shadow .14s;}
.phone-input .go:hover{transform:translateY(-1px);filter:saturate(1.12) brightness(1.02);box-shadow:0 5px 14px rgba(224,123,46,0.24),inset 0 1px 1.5px rgba(255,255,255,0.9);}
.phone-input .go:active{transform:translateY(0) scale(.97);}
.phone-input .go svg{width:15px;height:15px;stroke:#F58220;fill:none;}

/* ───────── LOGO STRIP ───────── */
.logos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);}
.logos-inner{max-width:1180px;margin:0 auto;padding:30px clamp(20px,5vw,56px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;}
.logos-label{font-size:12.5px;color:var(--sub);font-weight:500;}
.logos-row{display:flex;gap:clamp(24px,4vw,52px);align-items:center;flex-wrap:wrap;}
.logos-row span{font-size:17px;font-weight:600;color:var(--ink);opacity:0.32;letter-spacing:-0.02em;}

/* ───────── SECTION SHELL ───────── */
.section{max-width:1180px;margin:0 auto;padding:clamp(42px,6vh,78px) clamp(20px,5vw,56px);}
.sec-head{text-align:center;margin-bottom:36px;}
.sec-kicker{font-size:12.5px;font-weight:600;letter-spacing:0.04em;color:var(--blue);margin-bottom:16px;}
.sec-title{font-size:clamp(30px,4.4vw,54px);font-weight:200;letter-spacing:-0.04em;line-height:1.12;padding-bottom:0.14em;}
.sec-sub{font-size:17px;color:var(--muted);max-width:560px;margin:18px auto 0;line-height:1.55;}

/* ───────── STATEMENT ───────── */
.statement{text-align:center;padding:clamp(48px,7vh,92px) 20px;}
.statement h2{font-size:clamp(34px,5.4vw,68px);font-weight:200;letter-spacing:-0.045em;line-height:1.06;max-width:920px;margin:0 auto;}
.statement p{font-size:18px;color:var(--muted);max-width:540px;margin:24px auto 0;line-height:1.55;}

/* ───────── CAPABILITY SPLIT PANELS ───────── */
.cap{display:flex;flex-direction:column;}
.cap-row{display:grid;grid-template-columns:1fr 1fr;height:clamp(600px,82vh,800px);}
.cap-row.flip .cap-media{order:2;}
.cap-media{position:relative;overflow:hidden;}
.cap-media img{width:100%;height:100%;object-fit:cover;}
.cap-media .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 45%,rgba(10,10,10,0.28) 100%);}
.cap-copy{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(34px,4.5vw,66px) clamp(28px,4.5vw,64px);position:relative;overflow:hidden;}
.cap-copy.on-dark{background:var(--ink);color:#fff;}
.cap-copy.on-bg{background:var(--bg2);}
.cap-copy.on-blue{background:var(--blue);color:#fff;}
.cap-num{font-size:12.5px;font-weight:600;letter-spacing:0.06em;color:var(--blue);margin-bottom:18px;}
.cap-copy.on-dark .cap-num,.cap-copy.on-blue .cap-num{color:#fff;opacity:0.7;}
.cap-h{font-size:clamp(28px,3.4vw,44px);font-weight:200;letter-spacing:-0.035em;line-height:1.08;margin-bottom:18px;}
.cap-copy.on-blue .cap-h em,.cap-copy.on-dark .cap-h em{color:#fff;font-weight:400;}
.cap-p{font-size:16.5px;line-height:1.62;color:var(--muted);max-width:430px;margin-bottom:26px;}
.cap-copy.on-dark .cap-p{color:rgba(255,255,255,0.62);}.cap-copy.on-blue .cap-p{color:rgba(255,255,255,0.82);}
.cap-bubble{background:#fff;border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px;padding:15px 18px;font-size:15px;line-height:1.5;max-width:400px;box-shadow:0 14px 40px rgba(10,10,10,0.08);}
.cap-copy.on-dark .cap-bubble{background:var(--ink2);border-color:rgba(255,255,255,0.12);color:#fff;box-shadow:none;}
.cap-copy.on-blue .cap-bubble{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2);color:#fff;box-shadow:none;}
.cap-bubble b{color:var(--blue);font-weight:500;}.cap-copy.on-dark .cap-bubble b,.cap-copy.on-blue .cap-bubble b{color:#fff;}
.cap-bubble .who{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--sub);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.cap-copy.on-dark .cap-bubble .who,.cap-copy.on-blue .cap-bubble .who{color:rgba(255,255,255,0.55);}
.cap-bubble .who .d{width:6px;height:6px;border-radius:50%;background:var(--blue);}
.cap-copy.on-blue .cap-bubble .who .d{background:#fff;}
/* interactive cycling chat (Cleo-style) */
.cap-chat{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;min-height:170px;}
.cap-msg{align-self:flex-start;max-width:480px;font-size:clamp(19px,1.7vw,26px);line-height:1.34;font-weight:300;letter-spacing:-0.02em;padding:18px 23px;border-radius:7px 24px 24px 24px;background:#F0EDE8;box-shadow:0 18px 50px rgba(10,10,10,0.07);opacity:0;transform:translateY(16px) scale(.97);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1);}
.cap-msg.show{opacity:1;transform:none;}
.cap-msg b{color:var(--blue);font-weight:600;}
.cap-dots{align-self:flex-start;display:inline-flex;gap:5px;align-items:center;padding:15px 19px;border-radius:7px 24px 24px 24px;background:#F0EDE8;opacity:0;transform:translateY(8px);transition:.3s;}
.cap-dots.show{opacity:1;transform:none;}
.cap-dots i{width:7px;height:7px;border-radius:50%;background:rgba(10,10,10,0.34);animation:capdot 1.2s infinite;}
.cap-dots i:nth-child(2){animation-delay:.18s;}.cap-dots i:nth-child(3){animation-delay:.36s;}
@keyframes capdot{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-4px);}}
.cap-copy.on-dark .cap-msg{background:var(--ink2);border-color:rgba(255,255,255,0.12);color:#fff;box-shadow:none;}
.cap-copy.on-dark .cap-msg b{color:#FCC85F;}
.cap-copy.on-dark .cap-dots{background:var(--ink2);border-color:rgba(255,255,255,0.12);box-shadow:none;}
.cap-copy.on-dark .cap-dots i{background:rgba(255,255,255,0.6);}
.cap-copy.on-blue .cap-msg{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.24);color:#fff;box-shadow:none;}
.cap-copy.on-blue .cap-msg b{color:#fff;font-weight:600;}
.cap-copy.on-blue .cap-dots{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.26);box-shadow:none;}
.cap-copy.on-blue .cap-dots i{background:rgba(255,255,255,0.85);}
.cap-foot{flex-shrink:0;}
/* ───────── 24/7 MONITOR ───────── */
.cw{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(22px,3vw,38px);box-shadow:0 40px 90px rgba(10,10,10,0.10);position:relative;overflow:hidden;}
.cw::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 88% -10%,rgba(224,123,46,0.07),rgba(224,123,46,0) 55%);pointer-events:none;}
.cw-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;position:relative;}
.cw-label{font-size:11.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--sub);}
.cw-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#DC2626;background:rgba(220,38,38,0.08);border:1px solid rgba(220,38,38,0.18);padding:6px 13px;border-radius:50px;transition:.45s ease;}
.cw-chart{position:relative;margin:18px 0 18px;}
.cw-svg{display:block;width:100%;height:auto;overflow:visible;}
.cw-band{fill:rgba(224,123,46,0.05);}
.cw-normal{stroke:var(--blue);stroke-width:1.5;stroke-dasharray:4 5;opacity:.45;}
.cw-normal-tag{font-size:11px;fill:var(--blue);font-weight:600;letter-spacing:.02em;}
.cw-area{fill:url(#cwArea);}
.cw-spike-area{fill:url(#cwSpike);}
.cw-line{fill:none;stroke:#E8B27E;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.cw-line-spike{fill:none;stroke:#DC2626;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.cw-dot{fill:#fff;stroke:#E8B27E;stroke-width:2;}
.cw-dot-now{fill:#DC2626;stroke:#fff;stroke-width:2.5;}
.cw-ping{fill:rgba(220,38,38,0.30);transform-box:fill-box;transform-origin:center;animation:cwPing 2s ease-out infinite;}
@keyframes cwPing{0%{transform:scale(.5);opacity:.7;}70%,100%{transform:scale(2.6);opacity:0;}}
.cw-xlabel{font-size:12px;fill:var(--sub);text-anchor:middle;}
.cw-xlabel.now{fill:#DC2626;font-weight:600;}
.cw-spike-tag{font-size:14px;fill:#DC2626;font-weight:700;text-anchor:middle;}
@media(prefers-reduced-motion:reduce){.cw-ping{animation:none;}}
.cw-react{display:flex;align-items:flex-start;gap:13px;border-top:1px solid var(--line);padding-top:22px;position:relative;}
.cw-av{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0;}
.cw-bubble-wrap{flex:1;}
.cw-who{font-size:11px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--sub);margin-bottom:7px;}
.cw-bubble{background:var(--bg);border:1px solid var(--line);border-radius:16px;border-top-left-radius:5px;padding:15px 18px;font-size:15.5px;line-height:1.5;color:var(--ink);transition:opacity .4s ease,transform .4s ease;}
.cw-bubble b{color:var(--blue);font-weight:600;}

/* ───────── LOANS (interactive) ───────── */
.loans{background:var(--ink);color:#fff;position:relative;overflow:hidden;}
.loans::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(62% 46% at 50% -4%,rgba(224,123,46,0.26),rgba(224,123,46,0) 62%);}
.loans-inner{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:clamp(56px,9vh,108px) clamp(20px,5vw,56px);}
.loans-head{text-align:center;margin-bottom:30px;}
.loans-kicker{font-size:12.5px;font-weight:600;letter-spacing:0.05em;color:#FCC85F;margin-bottom:14px;}
.loans-head h2{font-size:clamp(30px,4.6vw,54px);font-weight:200;letter-spacing:-0.04em;line-height:1.05;margin-bottom:15px;}
.loans-head h2 em{color:#FCC85F;font-weight:400;}
.loans-head p{font-size:16.5px;line-height:1.6;color:rgba(255,255,255,0.62);max-width:500px;margin:0 auto;}
.ask-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:28px;}
.chip{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);color:#fff;border-radius:30px;padding:10px 17px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:.18s;}
.chip:hover{background:rgba(255,255,255,0.13);transform:translateY(-2px);}
.chip.active{background:var(--blue);border-color:var(--blue);}
.ask-thread{max-width:560px;margin:0 auto;min-height:118px;display:flex;flex-direction:column;gap:11px;}
.ask-thread .bubble{max-width:82%;padding:13px 17px;border-radius:18px;font-size:15px;line-height:1.45;font-weight:300;animation:msgin .4s cubic-bezier(.2,.9,.25,1);}
.ask-thread .bubble b{font-weight:500;}
.ask-thread .bubble{border-radius:16px;}
.ask-thread .b-user{background:var(--blue);color:#fff;align-self:flex-end;border-radius:16px 4px 16px 16px;}
.ask-thread .b-kapio{background:rgba(255,255,255,0.08);color:#fff;align-self:flex-start;border-radius:4px 16px 16px 16px;}
.ask-thread .b-kapio b{color:#FCC85F;}
.ask-thread .typing{align-self:flex-start;background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.12);}
.ask-thread .typing span{background:rgba(255,255,255,0.6);}
.ask-results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px;}
.opt{position:relative;background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:20px;opacity:0;transform:translateY(-22px);transition:transform .18s;}
.opt.drop{animation:drop .55s cubic-bezier(.2,.85,.3,1) forwards;}
.opt:hover{transform:translateY(-3px);}
@keyframes drop{0%{opacity:0;transform:translateY(-22px);}60%{opacity:1;transform:translateY(4px);}100%{opacity:1;transform:translateY(0);}}
.opt.best{border-color:rgba(246,190,132,0.5);background:rgba(224,123,46,0.12);box-shadow:0 16px 40px -12px rgba(224,123,46,0.4);}
.opt-best-tag{position:absolute;top:-9px;left:18px;font-size:10px;font-weight:700;letter-spacing:0.04em;color:#fff;background:var(--blue);padding:3px 9px;border-radius:20px;}
.opt-type{font-size:14px;font-weight:500;color:#fff;margin-bottom:10px;letter-spacing:-0.01em;}
.opt-rate{font-size:32px;font-weight:200;letter-spacing:-0.03em;color:#fff;line-height:1;}
.opt-rate small{font-size:13px;color:rgba(255,255,255,0.5);font-weight:300;}
.opt-meta{font-size:12.5px;color:rgba(255,255,255,0.55);margin-top:9px;line-height:1.5;}
.opt-match{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#FCC85F;background:rgba(224,123,46,0.18);padding:4px 10px;border-radius:14px;margin-top:13px;}
.ask-foot{text-align:center;margin-top:28px;font-size:13.5px;color:rgba(255,255,255,0.5);line-height:1.5;}
.ask-foot b{color:#fff;font-weight:500;}
@media(max-width:680px){.ask-results{grid-template-columns:1fr;}}

/* ───────── KAPIO FUNCTIONS (bento) ───────── */
.kf-bento{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:stretch;}
.kf-rightcol{display:flex;flex-direction:column;gap:16px;}
.kf-rightcol .kf-tile{flex:1;}
.kf-tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px 26px 24px;transition:.22s cubic-bezier(.2,.8,.3,1);overflow:hidden;display:flex;flex-direction:column;}
.kf-tile:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(10,10,10,0.09);border-color:var(--blue-border);}
.kf-big .kf-chat{flex:1;justify-content:flex-start;min-height:230px;}
.kf-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--blue);margin-bottom:16px;}
.kf-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--blue-dim);}
.kf-tile h3{font-size:20px;font-weight:500;letter-spacing:-0.02em;margin-bottom:7px;}
.kf-tile p{font-size:13.5px;color:var(--muted);line-height:1.5;}
.kf-spacer{flex:1;}
/* big tile mini-chat */
.kf-chat{display:flex;flex-direction:column;gap:9px;margin-bottom:20px;}
.kf-b{padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.45;max-width:84%;}
.kf-b-user{align-self:flex-end;background:var(--blue);color:#fff;border-radius:16px 4px 16px 16px;}
.kf-b-kapio{align-self:flex-start;background:#F0EDE8;color:var(--ink);border-radius:4px 16px 16px 16px;}
.kf-b-kapio b{color:var(--blue);font-weight:600;}
.kf-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:12px 15px;background:#F0EDE8;border-radius:4px 16px 16px 16px;}
.kf-typing i{width:6px;height:6px;border-radius:50%;background:rgba(10,10,10,0.34);animation:blink 1.2s ease-in-out infinite;}
.kf-typing i:nth-child(2){animation-delay:.18s;}.kf-typing i:nth-child(3){animation-delay:.36s;}
/* nudge tile */
.kf-nudges{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.kf-nudge{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;}
.kf-nudge-ic{width:26px;height:26px;border-radius:8px;background:var(--blue-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.kf-nudge-ic svg{width:13px;height:13px;stroke:var(--blue);fill:none;}
.kf-nudge-t{font-size:12px;font-weight:600;line-height:1.2;}.kf-nudge-s{font-size:10.5px;color:var(--sub);margin-top:1px;}
.kf-nudge .new{margin-left:auto;font-size:8.5px;font-weight:700;color:var(--blue);background:var(--blue-dim);padding:2px 6px;border-radius:5px;letter-spacing:0.03em;}
/* broker tile */
.kf-handoff{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.kf-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;}
.kf-av.k{background:var(--ink);color:#fff;}.kf-av.h{background:linear-gradient(135deg,#C9B69E,#A8896A);color:#fff;}
.kf-arrow{flex:1;height:2px;background:linear-gradient(90deg,var(--blue-border),var(--blue));border-radius:1px;position:relative;}
.kf-arrow::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);border-left:6px solid var(--blue);border-top:4px solid transparent;border-bottom:4px solid transparent;}

/* ───────── AUTOPILOT ───────── */
.auto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.auto-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 26px;transition:.2s;}
.auto-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(10,10,10,0.08);}
.auto-ic{width:46px;height:46px;border-radius:14px;background:var(--blue-dim);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.auto-ic svg{width:22px;height:22px;stroke:var(--blue);fill:none;}
.auto-h{font-size:19px;font-weight:500;letter-spacing:-0.02em;margin-bottom:10px;}
.auto-p{font-size:14.5px;color:var(--muted);line-height:1.6;}

/* ───────── EMOTION + STATS (Cleo-style bento) ───────── */
.bento{max-width:1200px;margin:0 auto;padding:clamp(42px,6vh,72px) clamp(20px,5vw,56px) clamp(48px,7vh,80px);}
.bento .sec-head{text-align:center;margin-bottom:clamp(34px,5vh,54px);}
.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15.5vw,176px);gap:14px;grid-auto-flow:row dense;}
.bt{position:relative;border-radius:26px;padding:clamp(22px,2.3vw,30px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;}
.bt-num{font-size:clamp(40px,4.6vw,64px);font-weight:200;letter-spacing:-0.045em;line-height:0.9;position:relative;z-index:2;}
.bt-num span{font-size:0.46em;font-weight:300;letter-spacing:-0.01em;margin-left:4px;opacity:0.82;}
.bt-label{font-size:clamp(13px,1.4vw,15.5px);font-weight:400;line-height:1.4;margin-top:12px;max-width:300px;position:relative;z-index:2;}
.bt-top{position:absolute;top:clamp(20px,2.2vw,28px);left:clamp(22px,2.3vw,30px);right:clamp(22px,2.3vw,30px);font-size:13.5px;font-weight:500;color:var(--muted);z-index:2;}
/* spans — explicit asymmetric bento (4 cols × 4 rows) */
.bt-a{grid-column:1;grid-row:1/3;justify-content:space-between;}  /* number top, label bottom (Cleo style) */
.bt-b{grid-column:1;grid-row:3/5;}        /* tall photo */
.bt-c{grid-column:2/4;grid-row:1/4;}      /* BIG data-viz centerpiece */
.bt-g{grid-column:2/4;grid-row:4/5;}      /* wide blue sparkline */
.bt-e{grid-column:4;grid-row:1;}          /* small photo accent */
.bt-d{grid-column:4;grid-row:2/4;}        /* tall photo */
.bt-f{grid-column:4;grid-row:4;}          /* white waveform */
/* solid + graphic tiles */
.bt-g{background:var(--blue);color:#fff;justify-content:flex-end;}
.bt-g .bt-num{color:#fff;}.bt-g .bt-label{color:rgba(255,255,255,0.86);}
.bt-f{background:#fff;border:1px solid var(--line);color:var(--ink);flex-direction:row;align-items:center;justify-content:flex-start;gap:clamp(12px,1.5vw,18px);}
.bt-f .bt-num{color:var(--blue);font-size:clamp(38px,4.2vw,54px);}
.bt-f .bt-label{color:var(--muted);margin-top:6px;}
.bt-ftext{display:flex;flex-direction:column;min-width:0;}
.bt-f .bt-wave{position:static;transform:none;flex-shrink:0;height:44px;}
/* data-viz centerpiece */
.bt-c{background:linear-gradient(165deg,#EEF1FF 0%,#E6ECFF 100%);color:var(--ink);align-items:center;justify-content:center;text-align:center;padding:clamp(26px,3vw,40px);}
.bt-c .bt-top{position:static;text-align:center;font-size:clamp(15px,1.7vw,20px);font-weight:400;color:var(--muted);margin-bottom:-6px;}
.bt-c .bt-top b{color:var(--ink);font-weight:500;}
.viz-ring{position:relative;width:min(78%,360px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin:10px auto 0;}
.viz-ring svg{position:absolute;inset:0;width:100%;height:100%;}
.viz-ring rect{fill:var(--blue);}
.viz-num{font-size:clamp(52px,7vw,92px);font-weight:200;letter-spacing:-0.05em;color:var(--ink);line-height:1;}
/* glossy chat-bubble illustration (hero tile) */
.bt-illu{position:absolute;left:0;right:0;top:42%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none;}
.bt-illu svg{width:46%;max-width:138px;filter:drop-shadow(0 20px 34px rgba(8,18,50,0.42));}
.bt-illu .d{animation:bdot 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.bt-illu circle:nth-of-type(2){animation-delay:.18s;}
.bt-illu circle:nth-of-type(3){animation-delay:.36s;}
@keyframes bdot{0%,100%{opacity:.45;transform:translateY(1px);}50%{opacity:1;transform:translateY(-1.5px);}}
/* waveform graphic tile */
.bt-wave{position:absolute;top:clamp(22px,2.3vw,30px);left:clamp(22px,2.3vw,30px);display:flex;align-items:flex-end;gap:3.5px;height:30px;z-index:1;}
.bt-wave i{width:4px;border-radius:3px;background:linear-gradient(180deg,var(--blue),#8AABFF);transform-origin:bottom;animation:wave 1.2s ease-in-out infinite;}
@keyframes wave{0%,100%{transform:scaleY(0.42);}50%{transform:scaleY(1);}}
/* sparkline graphic tile */
.bt-spark{position:absolute;inset:0;z-index:0;opacity:0.95;}
.bt-spark svg{position:absolute;left:0;right:0;top:18%;width:100%;height:56%;}
/* image tiles */
.bt.img{background-size:cover;background-position:center;color:#fff;}
.bt.img .bt-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,9,18,0.05) 0%,rgba(6,9,18,0.12) 34%,rgba(6,9,18,0.6) 72%,rgba(6,9,18,0.9) 100%);}
.bt.img .bt-num{color:#fff;}
.bt.img .bt-label{color:rgba(255,255,255,0.94);}
@media(max-width:760px){
  .bento-grid{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(146px,40vw,176px);grid-auto-flow:row dense;}
  .bt-a,.bt-b,.bt-d{grid-column:auto;grid-row:span 2;}
  .bt-c{grid-column:1/3;grid-row:span 2;}
  .bt-g{grid-column:1/3;grid-row:span 1;}
  .bt-e,.bt-f{grid-column:auto;grid-row:span 1;}
}

/* ───────── FINAL CTA ───────── */
/* shared dark-water backdrop across final CTA + footer */
.ocean-end{position:relative;isolation:isolate;background:var(--ink);}
.ocean-end::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg, rgba(8,12,22,0.58) 0%, rgba(8,12,22,0.50) 48%, rgba(8,12,22,0.58) 100%), url('/hero-darkwater.jpg');
  background-size:cover;background-position:center;}
.final{position:relative;text-align:center;padding:clamp(80px,14vh,180px) 20px;overflow:hidden;isolation:isolate;color:#fff;background:transparent;}
.final-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(70% 80% at 50% 120%, rgba(224,123,46,0.42) 0%, rgba(224,123,46,0) 60%),
  radial-gradient(60% 70% at 80% -10%, rgba(224,123,46,0.22) 0%, rgba(224,123,46,0) 55%);}
.final h2{font-size:clamp(36px,6vw,76px);font-weight:200;letter-spacing:-0.045em;line-height:1.04;}
.final h2 em{color:#FCC85F;}
.final p{font-size:18px;color:rgba(255,255,255,0.6);margin:22px auto 0;max-width:480px;line-height:1.5;}
.final .btn-primary{margin-top:36px;font-size:16px;padding:18px 34px;}

/* ───────── FOOTER ───────── */
.foot{background:transparent;color:#fff;border-top:1px solid rgba(255,255,255,0.10);padding:54px clamp(20px,5vw,56px) 40px;position:relative;}
.foot-top{max-width:1180px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:30px;}
.foot-logo{filter:brightness(0) invert(1);height:24px;opacity:0.9;}
.foot-cols{display:flex;gap:clamp(30px,6vw,80px);flex-wrap:wrap;}
.foot-col h4{font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:14px;}
.foot-col a{display:block;text-decoration:none;color:rgba(255,255,255,0.72);font-size:14px;margin-bottom:10px;transition:.16s;}
.foot-col a:hover{color:#fff;}
.foot-bottom{max-width:1180px;margin:40px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,0.08);font-size:12.5px;color:rgba(255,255,255,0.4);}

@media(max-width:900px){
  .hero-word{display:none;}
  .hero-h{display:block;font-size:clamp(38px,11vw,60px);font-weight:200;line-height:1.0;letter-spacing:-0.045em;margin:6px 0 10px;}
  .hero-stage{min-height:0;margin:14px 0 4px;}
  .phone{order:-1;max-width:340px;}
  .cards,.kf-bento,.auto-grid{grid-template-columns:1fr;}
  .kf-big{grid-row:auto;}
  .cap-row{grid-template-columns:1fr;height:auto;}
  .cap-row.flip .cap-media{order:0;}
  .cap-media{min-height:300px;}
  .nav-links{display:none;}
  .bento-grid{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(160px,40vw,200px);}
  .products{grid-template-columns:1fr;}
  .watch-panel{left:16px;right:16px;bottom:16px;}
}

/* ───────── INTERACTIVE "KAPIO WATCHING" OVERLAYS ───────── */
.cap-media img{transition:transform 1.2s ease;}
.cap-media{background:var(--ink);}
.cap-media .tint{background:linear-gradient(180deg,rgba(10,10,10,0.10) 0%,rgba(10,10,10,0.55) 100%);}
/* scan sweep */
.scan{position:absolute;left:0;right:0;height:140px;pointer-events:none;
  background:linear-gradient(180deg,rgba(224,123,46,0) 0%,rgba(224,123,46,0.18) 50%,rgba(224,123,46,0) 100%);
  border-top:1px solid rgba(120,165,255,0.5);box-shadow:0 0 24px rgba(224,123,46,0.25);
  opacity:0;}
.cap-row.in .scan{opacity:1;animation:sweep 4.2s ease-in-out infinite;}
@keyframes sweep{0%{transform:translateY(-160px);}50%{transform:translateY(min(70vh,560px));}100%{transform:translateY(-160px);}}
/* live status chip top-left */
.watch-tag{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:7px;
  background:rgba(10,10,10,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.14);border-radius:30px;padding:7px 13px 7px 11px;
  font-size:11.5px;font-weight:600;color:#fff;letter-spacing:.01em;z-index:3;}
.watch-tag .pulse{width:7px;height:7px;border-radius:50%;background:#FBAA1B;box-shadow:0 0 0 0 rgba(242,162,76,0.6);animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(242,162,76,0.55);}70%{box-shadow:0 0 0 8px rgba(242,162,76,0);}100%{box-shadow:0 0 0 0 rgba(242,162,76,0);}}
/* glass analysis panel bottom */
.watch-panel{position:absolute;left:22px;right:22px;bottom:22px;z-index:3;
  background:rgba(16,16,18,0.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.14);border-radius:18px;padding:16px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);color:#fff;
  opacity:0;transform:translateY(14px);transition:opacity .6s ease .25s,transform .6s ease .25s;}
.cap-row.in .watch-panel{opacity:1;transform:translateY(0);}
.wp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.wp-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.55);}
.wp-live{font-size:10.5px;font-weight:600;color:#FCC85F;display:flex;align-items:center;gap:5px;}
.wp-live .d{width:5px;height:5px;border-radius:50%;background:#FBAA1B;animation:pulse 1.8s infinite;}
/* cash flow: in/out bars + surplus counter */
.wp-flow{display:flex;align-items:flex-end;gap:7px;height:54px;margin-bottom:14px;}
.wp-bar{flex:1;border-radius:5px 5px 2px 2px;height:0;transition:height 1.1s cubic-bezier(.2,.8,.2,1);}
.wp-bar.up{background:linear-gradient(180deg,#FBAA1B,#F58220);}
.wp-bar.down{background:rgba(255,255,255,0.16);}
.wp-stats{display:flex;justify-content:space-between;align-items:flex-end;}
.wp-num{font-size:26px;font-weight:200;letter-spacing:-0.03em;line-height:1;}
.wp-num small{font-size:13px;opacity:.6;font-weight:300;}
.wp-cap{font-size:11.5px;color:rgba(255,255,255,0.55);margin-top:5px;}
.wp-delta{font-size:11.5px;font-weight:600;color:#6EE7B7;background:rgba(110,231,183,0.14);padding:4px 9px;border-radius:20px;}
/* credit: ring gauge */
.wp-credit{display:flex;align-items:center;gap:16px;}
.ring{position:relative;width:78px;height:78px;flex-shrink:0;}
.ring svg{transform:rotate(-90deg);}
.ring-bg{stroke:rgba(255,255,255,0.14);}
.ring-fg{stroke:#FBAA1B;stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:226;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1);}
.cap-row.in .ring-fg{stroke-dashoffset:60;}
.ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-mid .v{font-size:23px;font-weight:300;letter-spacing:-0.02em;line-height:1;}
.ring-mid .l{font-size:9px;color:rgba(255,255,255,0.5);margin-top:2px;}
/* debt: lender scan rows */
.wp-rows{display:flex;flex-direction:column;gap:8px;}
.wp-row{display:flex;align-items:center;gap:10px;font-size:12.5px;opacity:0;transform:translateX(-8px);}
.cap-row.in .wp-row{animation:rowin .5s forwards;}
.cap-row.in .wp-row:nth-child(1){animation-delay:.3s;}
.cap-row.in .wp-row:nth-child(2){animation-delay:.7s;}
.cap-row.in .wp-row:nth-child(3){animation-delay:1.1s;}
@keyframes rowin{to{opacity:1;transform:translateX(0);}}
.wp-row .chk{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(110,231,183,0.18);}
.wp-row .chk svg{width:11px;height:11px;stroke:#6EE7B7;fill:none;stroke-width:3;}
.wp-row .nm{color:rgba(255,255,255,0.85);font-weight:500;}
.wp-row .rt{margin-left:auto;color:rgba(255,255,255,0.55);font-weight:500;}
.wp-row.best .rt{color:#6EE7B7;}
.wp-row.best .nm{color:#fff;}
@media(prefers-reduced-motion:reduce){.scan{display:none;}.cap-media img{transition:none;}}

/* ═══════════════════ NEW LANDING COMPONENTS ═══════════════════ */

/* ── nav triggers + mega menu ── */
.nav-trigger{display:inline-flex;align-items:center;gap:5px;background:none;border:none;font-family:inherit;
  font-size:14px;font-weight:500;color:var(--ink);opacity:0.82;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.16s;}
.nav-trigger:hover,.nav-trigger.on{opacity:1;color:var(--blue);background:rgba(255,255,255,0.55);}
.nav-caret{width:13px;height:13px;transition:transform .2s;}
.nav-trigger.on .nav-caret{transform:rotate(180deg);}
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(940px,calc(100vw - 32px));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .24s;z-index:210;}
.mega.show{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.mega-inner{background:rgba(255,255,255,0.92);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,0.7);border-radius:26px;box-shadow:0 24px 60px rgba(10,10,10,0.16);
  padding:26px;display:grid;grid-template-columns:270px 1fr;gap:26px;text-align:left;}
.mega-lead{padding:6px 4px 0;border-right:1px solid var(--line);padding-right:24px;}
.mega-kicker{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;}
.mega-lead h4{font-size:21px;font-weight:400;line-height:1.18;letter-spacing:-0.03em;margin-bottom:10px;}
.mega-lead p{font-size:13.5px;line-height:1.5;color:var(--muted);font-weight:300;}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.mega-item{display:flex;gap:12px;align-items:flex-start;padding:12px 13px;border-radius:15px;text-decoration:none;color:var(--ink);transition:background .15s,transform .15s;}
.mega-item:hover{background:rgba(224,123,46,0.055);transform:translateX(2px);}
.mega-ic{width:34px;height:34px;flex-shrink:0;border-radius:11px;background:var(--blue-dim);color:var(--blue);display:flex;align-items:center;justify-content:center;}
.mega-ic svg{width:17px;height:17px;}
.mega-item b{display:block;font-size:14px;font-weight:600;letter-spacing:-0.01em;margin-bottom:3px;}
.mega-item small{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);font-weight:300;}
.mega-grid--tight .mega-item small{font-size:12px;}
.mega-inner--inside{grid-template-areas:"lead grid" "foot foot";}
.mega-inner--inside .mega-lead{grid-area:lead;}
.mega-inner--inside .mega-grid{grid-area:grid;}
.mega-foot{grid-area:foot;display:flex;align-items:flex-start;gap:10px;margin-top:4px;padding:14px 16px;border-radius:15px;
  background:var(--blue-dim);font-size:12.5px;line-height:1.5;color:var(--muted);font-weight:300;}
.mega-foot-ic{flex-shrink:0;color:var(--blue);}
.mega-foot-ic svg{width:16px;height:16px;}
/* ── hamburger button (hidden on desktop) ── */
.nav-burger{display:none;pointer-events:auto;justify-self:end;width:46px;height:46px;border-radius:50%;
  background:#fff;box-shadow:0 6px 18px rgba(40,22,6,0.12);border:1px solid var(--line);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s,opacity .2s;}
.nav-burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.on span:nth-child(2){opacity:0;}
.nav-burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── mobile drawer ── */
/* overflow:hidden clips the closed (translateX off-canvas) navd-panel to
   this box, so it can never be tapped/scrolled into view while hidden. */
.nav-drawer{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none;overflow:hidden;}
.nav-drawer.open{visibility:visible;pointer-events:auto;}
.navd-scrim{position:absolute;inset:0;background:rgba(20,14,8,0.42);backdrop-filter:blur(2px);opacity:0;transition:opacity .3s;}
.nav-drawer.open .navd-scrim{opacity:1;}
.navd-panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);background:var(--bg);
  box-shadow:-20px 0 60px rgba(40,22,6,0.2);padding:88px 22px 28px;overflow-y:auto;
  transform:translateX(102%);transition:transform .36s cubic-bezier(.22,.7,.3,1);display:flex;flex-direction:column;gap:6px;}
.nav-drawer.open .navd-panel{transform:none;}
.navd-group{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin:4px 4px 8px;}
.navd-prod{display:flex;flex-direction:column;gap:4px;}
.navd-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;text-decoration:none;transition:background .2s;}
.navd-item:active,.navd-item:hover{background:var(--blue-dim);}
.navd-ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--blue-dim);display:grid;place-items:center;}
.navd-ic svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.navd-item b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
.navd-item small{display:block;font-size:11.5px;color:var(--muted);font-weight:300;margin-top:1px;line-height:1.35;}
.navd-links{display:flex;flex-direction:column;margin:12px 0;border-top:1px solid var(--line);padding-top:8px;}
.navd-links a{padding:13px 12px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;border-radius:12px;}
.navd-links a:active,.navd-links a:hover{background:var(--blue-dim);}
.navd-cta{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:14px;}
.navd-sign{padding:14px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;}
.navd-btn{padding:15px;border-radius:99px;border:none;background:var(--blue);color:#fff;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 10px 24px rgba(224,123,46,0.3);}

@media(max-width:900px){
  .nav{grid-template-columns:1fr auto;}
  .nav-links{display:none;} .mega{display:none;} .nav-right{display:none;}
  .nav-burger{display:flex;}
}
@media(prefers-reduced-motion:reduce){.navd-panel{transition:none;}.navd-scrim{transition:none;}}

/* ── accreditation strip ── */
/* The strip bridges the dark hero and the light section below: it starts in the
   hero's own deep water tone and dissolves into the page background at its base,
   so there are no hard colour edges. */
/* The strip sits in the water: the hero photograph carries on behind it, deep
   and dark, then dissolves into the page. No band, no seam, just the sea
   getting deeper until the page surfaces again. */
.accred{position:relative;color:#1A140D;padding:clamp(40px,6vh,64px) clamp(20px,5vw,56px) clamp(52px,7vh,80px);
  background:linear-gradient(180deg,#F7E8CC 0%,var(--bg) 46%);overflow:hidden;}
.accred-water{display:none;}
.accred::before{display:none;}
.accred::after{display:none;}
.accred-inner{position:relative;z-index:3;}
@media(prefers-reduced-motion:reduce){.accred-water{animation:none;}}
.accred-inner{position:relative;z-index:1;}
.accred-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,44px);}
.accred-item{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;}
.laurel{color:rgba(26,20,13,0.2);flex-shrink:0;}
.laurel svg{height:74px;width:auto;display:block;}
.laurel-r svg{transform:scaleX(-1);}
.accred-mid{padding:0 2px;}
.accred-h{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#9A8368;margin-bottom:6px;}
.accred-brand{font-size:16.5px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);margin-bottom:6px;}
.accred-sub{font-size:11.5px;line-height:1.45;color:var(--muted);font-weight:300;max-width:230px;margin:0 auto;}
@media(max-width:820px){.accred-inner{grid-template-columns:1fr;gap:24px;}.laurel svg{height:60px;}}

/* ── ladder under the statement ── */
.ladder{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:30px;}
.ladder span{font-size:13.5px;font-weight:500;letter-spacing:-0.01em;padding:9px 17px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 3px rgba(10,10,10,0.04);}

/* ── merge visual ── */
.merge{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 220px 1.05fr;align-items:center;gap:0;}
.merge-sources{display:flex;flex-direction:column;gap:12px;}
.msrc{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:15px;
  padding:15px 18px;font-size:14px;font-weight:500;letter-spacing:-0.01em;box-shadow:0 1px 3px rgba(10,10,10,0.04);
  opacity:0;transform:translateX(-14px);transition:opacity .55s ease,transform .55s ease;transition-delay:calc(var(--i)*0.11s);}
.merge.go .msrc{opacity:1;transform:none;}
.msrc-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0;}
.merge-flow svg{width:100%;height:280px;display:block;}
.mline{fill:none;stroke:var(--blue);stroke-width:1.4;opacity:0.3;stroke-dasharray:6 8;}
.merge.go .mline{animation:mflow 1.6s linear infinite;}
@keyframes mflow{to{stroke-dashoffset:-28;}}
.merge-out{background:var(--ink);color:#fff;border-radius:24px;padding:clamp(24px,3vw,32px);box-shadow:0 20px 50px rgba(10,10,10,0.2);}
.mout-head{font-size:11px;font-weight:600;letter-spacing:0.11em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:12px;}
.mout-num{font-size:clamp(34px,4.4vw,48px);font-weight:300;letter-spacing:-0.045em;line-height:1;}
.mout-cap{font-size:12.5px;color:rgba(255,255,255,0.55);font-weight:300;margin-top:8px;}
.mout-rows{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.13);display:flex;flex-direction:column;gap:11px;}
.mout-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,0.7);font-weight:300;}
.mout-row b{color:#FCC85F;font-weight:500;}
@media(max-width:860px){.merge{grid-template-columns:1fr;gap:22px;}.merge-flow{display:none;}}

/* ── everyday: timeline + lock screen phone ── */
.everyday{padding:clamp(42px,6vh,74px) clamp(20px,5vw,56px);background:var(--bg2);}
.ev-wrap{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 330px;gap:clamp(30px,5vw,64px);align-items:center;}
.ev-line{display:flex;flex-direction:column;gap:14px;position:relative;padding-left:26px;}
.ev-line::before{content:'';position:absolute;left:6px;top:12px;bottom:12px;width:1px;background:var(--line);}
.ev-step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:flex-start;transition:opacity .3s;}
.ev-step::before{content:'';position:absolute;left:-24px;top:17px;width:11px;height:11px;border-radius:50%;
  background:var(--bg2);border:2px solid var(--line);transition:.3s;}
.ev-step.active::before{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 5px rgba(224,123,46,0.14);}
.ev-time{font-size:12.5px;font-weight:600;color:var(--sub);padding-top:14px;letter-spacing:-0.01em;transition:color .3s;}
.ev-step.active .ev-time{color:var(--blue);}
.ev-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:15px 18px;transition:box-shadow .3s,border-color .3s,transform .3s;}
.ev-step.active .ev-card{border-color:rgba(224,123,46,0.28);box-shadow:0 8px 26px rgba(224,123,46,0.10);transform:translateY(-1px);}
.ev-h{font-size:15px;font-weight:600;letter-spacing:-0.02em;margin-bottom:5px;}
.ev-card p{font-size:13.5px;line-height:1.55;color:var(--muted);font-weight:300;}
.ev-phone-wrap{display:flex;justify-content:center;}
.ev-phone{width:300px;animation:none;}
.ev-screen{height:610px;background:#0d1a2b center/cover no-repeat;background-image:linear-gradient(180deg,rgba(6,14,26,0.5),rgba(6,14,26,0.75)),url('/hero-darkwater.jpg');}
.ev-lock{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;align-items:center;padding:64px 14px 22px;}
.ev-lock-time{font-size:70px;font-weight:200;color:#fff;letter-spacing:-0.045em;line-height:1;text-shadow:0 2px 20px rgba(0,0,0,0.35);}
.ev-lock-date{font-size:14px;color:rgba(255,255,255,0.82);font-weight:400;margin-top:6px;text-shadow:0 1px 10px rgba(0,0,0,0.4);}
.ev-notifs{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:9px;}
.ev-notif{background:rgba(255,255,255,0.16);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.22);border-radius:19px;padding:12px 14px;color:#fff;
  opacity:0;transform:translateY(16px) scale(.96);transition:opacity .5s ease,transform .5s cubic-bezier(.16,.84,.28,1);}
.ev-notif.in{opacity:1;transform:none;}
.ev-n-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.ev-n-app{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,0.88);letter-spacing:0.01em;}
.ev-n-mark{width:16px;height:16px;border-radius:5px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.ev-n-time{font-size:11px;color:rgba(255,255,255,0.6);}
.ev-n-t{font-size:13.5px;font-weight:600;letter-spacing:-0.01em;margin-bottom:3px;}
.ev-n-s{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,0.85);font-weight:300;}
@media(max-width:900px){.ev-wrap{grid-template-columns:1fr;}.ev-phone-wrap{order:-1;}}
@media(max-width:520px){.ev-step{grid-template-columns:52px 1fr;gap:11px;}}

/* ── weekly briefing tile lines ── */
.kf-brief{display:flex;flex-direction:column;gap:9px;margin-top:4px;}
.kf-brief-line{display:flex;align-items:center;gap:11px;background:rgba(10,10,10,0.035);border-radius:13px;padding:12px 14px;font-size:13.5px;letter-spacing:-0.01em;}
.kf-brief-line span{width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0;}
.kf-brief-line b{font-weight:500;}

/* ── the quiet part (emotional) ── */
.quiet{position:relative;padding:clamp(48px,7vh,88px) clamp(20px,5vw,56px);background:#080D14;color:#fff;overflow:hidden;isolation:isolate;}
.quiet-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,13,20,0.86),rgba(8,13,20,0.94)),url('/hero-darkwater.jpg') center/cover no-repeat;}
.quiet-inner{max-width:760px;margin:0 auto;text-align:center;}
.quiet-h{font-size:clamp(30px,4.6vw,54px);font-weight:200;line-height:1.06;letter-spacing:-0.045em;margin-bottom:34px;}
.quiet-h em{color:#FCC85F;font-style:normal;font-weight:400;}
.quiet-list{list-style:none;display:flex;flex-direction:column;gap:1px;margin:0 auto 34px;max-width:560px;text-align:left;}
.quiet-list li{font-size:clamp(15px,1.8vw,18px);font-weight:300;line-height:1.5;color:rgba(255,255,255,0.72);
  padding:15px 4px 15px 30px;border-bottom:1px solid rgba(255,255,255,0.08);position:relative;}
.quiet-list li::before{content:'';position:absolute;left:4px;top:24px;width:12px;height:1px;background:rgba(246,190,132,0.6);}
.quiet-p{font-size:clamp(16px,2vw,20px);line-height:1.55;font-weight:300;color:rgba(255,255,255,0.92);max-width:600px;margin:0 auto;}
.quiet-tag{display:inline-block;margin-top:30px;font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:#FCC85F;border:1px solid rgba(246,190,132,0.3);border-radius:999px;padding:11px 22px;}

/* ── final trust line + footer note ── */
.final-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:26px;}
.final-trust span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:400;color:rgba(255,255,255,0.72);}
.final-trust svg{width:15px;height:15px;flex-shrink:0;}
.foot-note{max-width:820px;font-size:11.5px;line-height:1.6;color:var(--sub);font-weight:300;margin:26px 0 18px;}

/* ═══════════════════ LIVING OCEAN HERO ═══════════════════ */

/* 1. the photo itself breathes: a very slow drift and swell, never a loop you can spot */
.hero--photo .hero-bg{animation:oceanDrift 46s ease-in-out infinite;transform-origin:52% 58%;will-change:transform;}
@keyframes oceanDrift{
  0%{transform:scale(1.06) translate3d(0,0,0);}
  33%{transform:scale(1.11) translate3d(-1.1%,-0.9%,0);}
  66%{transform:scale(1.09) translate3d(1%,0.7%,0);}
  100%{transform:scale(1.06) translate3d(0,0,0);}}

/* 2. light on water: soft caustic sheets sliding across the surface */
.hero-shimmer{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.hero-shimmer i{position:absolute;left:-40%;right:-40%;height:60%;opacity:0;
  background:linear-gradient(107deg,rgba(255,255,255,0) 32%,rgba(255,255,255,0.16) 47%,rgba(190,220,255,0.20) 51%,rgba(255,255,255,0.14) 55%,rgba(255,255,255,0) 70%);
  filter:blur(26px);mix-blend-mode:screen;will-change:transform,opacity;}
.hero-shimmer i:nth-child(1){top:38%;animation:sheen 17s ease-in-out infinite;}
.hero-shimmer i:nth-child(2){top:56%;animation:sheen 23s ease-in-out infinite 5s;}
.hero-shimmer i:nth-child(3){top:22%;animation:sheen 29s ease-in-out infinite 11s;}
@keyframes sheen{
  0%{transform:translate3d(-26%,0,0) rotate(-2deg);opacity:0;}
  18%{opacity:.75;}
  70%{opacity:.55;}
  100%{transform:translate3d(26%,0,0) rotate(-2deg);opacity:0;}}

/* 3. glints: tiny specular sparkles catching the swell */
.hero-glints{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.hero-glints i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 7px 2px rgba(255,255,255,0.65);animation:glint 6s ease-in-out infinite;}
@keyframes glint{0%,100%{opacity:0;transform:scale(.5);}6%{opacity:.9;transform:scale(1);}16%{opacity:0;transform:scale(.6);}}

/* 4. the water in the photograph actually ripples: a duplicate of the hero image sits
      exactly on top, warped by an animated turbulence field, and is masked so only the
      sea below the horizon moves. The sky and the horizon line stay perfectly still. */
.hero-ripple{position:absolute;inset:0;background-image:inherit;background-size:cover;background-position:center;
  background-repeat:no-repeat;filter:url(#waterRipple);
  -webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 46%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 30%,#000 46%,#000 100%);
  will-change:filter;}
.hero-ripple.rest{display:none;}   /* switched off once the hero is off screen */

@media(prefers-reduced-motion:reduce){
  .hero--photo .hero-bg,.hero-shimmer i,.hero-glints i{animation:none!important;}
  .hero-shimmer,.hero-glints,.hero-ripple{display:none;}}

/* ═══════════════════ CASH FLOW PROJECTION PANEL ═══════════════════ */
.cfp{padding:18px 20px 17px;}
.cfp-chart{position:relative;margin:2px 0 14px;}
.cfp-chart svg{display:block;width:100%;height:clamp(112px,13vw,152px);overflow:visible;}
.cfp-area{fill:url(#cfpFill);opacity:0;transition:opacity 1s ease .55s;}
.cap-row.in .cfp-area{opacity:1;}
.cfp-line{fill:none;stroke:url(#cfpLine);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.9s cubic-bezier(.32,.72,.3,1) .2s;}
.cap-row.in .cfp-line{stroke-dashoffset:0;}
.cfp-floor{stroke:rgba(255,255,255,0.26);stroke-width:1;stroke-dasharray:3 5;}
.cfp-floor-tag{fill:rgba(255,255,255,0.42);font-size:9.5px;font-weight:500;letter-spacing:.03em;}
.cfp-now{stroke:rgba(255,255,255,0.3);stroke-width:1;stroke-dasharray:2 4;}
.cfp-now-tag{fill:rgba(255,255,255,0.6);font-size:9.5px;font-weight:600;letter-spacing:.05em;}
/* Today / floor labels live as HTML overlays, not SVG <text>: the chart svg is
   preserveAspectRatio="none" so any text inside it stretches horizontally. */
.cfp-now-html{position:absolute;top:5%;color:rgba(255,255,255,0.6);font-size:9.5px;font-weight:600;letter-spacing:.05em;white-space:nowrap;pointer-events:none;}
.cfp-floor-html{position:absolute;left:2px;top:76%;color:rgba(255,255,255,0.42);font-size:9.5px;font-weight:500;letter-spacing:.03em;white-space:nowrap;pointer-events:none;}
.cfp-dot{fill:#E8563A;stroke:rgba(10,10,10,0.5);stroke-width:1.5;opacity:0;transition:opacity .4s ease 1.5s;}
.cfp-ping{fill:rgba(232,86,58,0.5);opacity:0;}
.cap-row.in .cfp-dot{opacity:1;}
.cap-row.in .cfp-ping{animation:cfpPing 2.4s ease-out 1.6s infinite;}
@keyframes cfpPing{0%{transform:scale(.5);opacity:.65;}70%,100%{transform:scale(2.4);opacity:0;}}
.cfp-ping{transform-origin:208px 104px;}
.cfp-flag{position:absolute;left:34%;top:4%;background:rgba(18,20,26,0.82);backdrop-filter:blur(10px);
  border:1px solid rgba(232,86,58,0.28);border-radius:11px;padding:8px 11px;
  opacity:0;transform:translateY(6px);transition:opacity .6s ease 1.7s,transform .6s ease 1.7s;pointer-events:none;}
.cap-row.in .cfp-flag{opacity:1;transform:none;}
.cfp-flag-t{font-size:11.5px;font-weight:600;color:#FF7A5C;letter-spacing:-0.01em;}
.cfp-flag-s{font-size:10.5px;color:rgba(255,255,255,0.62);margin-top:2px;font-weight:300;}
.cfp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:13px;border-top:1px solid rgba(255,255,255,0.12);}
/* The row assumed every label fits on one line. It doesn't at narrow widths, and a label
   that wrapped pushed only its own figure down, out of line with the two beside it. Grid
   already stretches these cells to equal height, so pinning the label to the top and the
   figure to the bottom keeps all three figures on one baseline whatever the labels do.
   Not `display:contents` on .cfp-stat: these are the elements [data-stagger] animates,
   and an element generating no box can't be transformed. */
.cfp-stat{display:flex;flex-direction:column;justify-content:space-between;}
.cfp-l{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:5px;}
.cfp-v{font-size:clamp(15px,1.7vw,19px);font-weight:300;letter-spacing:-0.03em;color:rgba(255,255,255,0.9);}
.cfp-v.in{color:#FCC85F;}
.cfp-v.safe{color:#6EE7B7;}
@media(max-width:520px){.cfp-flag{left:36%;top:20%;padding:6px 8px;}.cfp-flag-s{display:none;}}

/* ═══════════════════ CREDIT POSITION PANEL ═══════════════════ */
.crs{padding:18px 20px 16px;}
.crs-top{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,26px);align-items:center;margin:4px 0 15px;}
.crs-num{font-size:clamp(38px,4.6vw,54px);font-weight:200;letter-spacing:-0.05em;line-height:1;color:#fff;}
.crs-band{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,0.6);margin-top:7px;}
.crs-delta{color:#6EE7B7;background:rgba(110,231,183,0.14);border-radius:20px;padding:3px 8px;letter-spacing:0;}
.crs-track{position:relative;}
.crs-track svg{display:block;width:100%;height:clamp(62px,7vw,84px);overflow:visible;}
.crs-area{fill:url(#crsFill);opacity:0;transition:opacity .9s ease .5s;}
.cap-row.in .crs-area{opacity:1;}
.crs-line{fill:none;stroke:#FCC85F;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.5s cubic-bezier(.32,.72,.3,1) .25s;}
.cap-row.in .crs-line{stroke-dashoffset:0;}
.crs-next{fill:none;stroke:rgba(246,190,132,0.5);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 4;
  opacity:0;transition:opacity .5s ease 1.8s;}
.cap-row.in .crs-next{opacity:1;}
.crs-pt{fill:#FCC85F;opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .4s ease var(--d),transform .5s cubic-bezier(.3,1.5,.5,1) var(--d);}
.crs-pt.now{fill:#fff;}
.cap-row.in .crs-pt{opacity:1;transform:scale(1);}
.crs-axis{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,0.42);margin-top:3px;}
.crs-why{display:flex;flex-direction:column;gap:7px;padding-top:13px;border-top:1px solid rgba(255,255,255,0.12);}
.crs-row{display:flex;align-items:center;gap:10px;font-size:12.5px;opacity:0;transform:translateX(-10px);}
.cap-row.in .crs-row{animation:rowin .5s forwards;}
.cap-row.in .crs-row:nth-child(1){animation-delay:1.5s;}
.cap-row.in .crs-row:nth-child(2){animation-delay:1.75s;}
.crs-ic{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.crs-ic svg{width:11px;height:11px;}
.crs-row.good .crs-ic{background:rgba(110,231,183,0.16);color:#6EE7B7;}
.crs-row.warn .crs-ic{background:rgba(232,86,58,0.16);color:#E8563A;}
.crs-t{color:rgba(255,255,255,0.86);font-weight:400;}
.crs-e{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.02em;}
.crs-row.good .crs-e{color:#6EE7B7;}
.crs-row.warn .crs-e{color:#FF7A5C;}
.crs-soft{display:flex;align-items:center;gap:8px;margin-top:13px;padding:9px 11px;border-radius:11px;
  background:rgba(246,190,132,0.10);border:1px solid rgba(246,190,132,0.18);
  font-size:11.5px;font-weight:500;color:rgba(255,255,255,0.82);}
.crs-soft svg{width:14px;height:14px;flex-shrink:0;color:#FCC85F;}
@media(max-width:520px){.crs-top{grid-template-columns:1fr;}.crs-axis span:last-child{display:none;}}

/* ═══════════════════ CAPITAL CAPACITY PANEL ═══════════════════ */
.cpc{padding:18px 20px 16px;}
.cpc-lead{margin:2px 0 15px;}
.cpc-num{font-size:clamp(32px,4vw,46px);font-weight:200;letter-spacing:-0.045em;line-height:1;color:#fff;}
.cpc-num small{font-size:0.42em;opacity:.55;font-weight:300;letter-spacing:-0.02em;}
.cpc-cap{font-size:12px;color:rgba(255,255,255,0.58);margin-top:7px;font-weight:300;}
.cpc-bar{display:flex;height:13px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,0.08);gap:2px;}
.cpc-seg{width:0;transition:width 1.1s cubic-bezier(.24,.78,.28,1);transition-delay:var(--d);}
.cap-row.in .cpc-seg{width:var(--w);}
.cpc-seg.repay{background:linear-gradient(90deg,#FFD27A,#F2B94B);}
.cpc-seg.run{background:rgba(255,255,255,0.28);}
.cpc-seg.head{background:linear-gradient(90deg,#6EE7B7,#34D399);}
.cpc-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:10.5px;color:rgba(255,255,255,0.55);}
.cpc-key span{display:inline-flex;align-items:center;gap:6px;}
.cpc-key i{width:7px;height:7px;border-radius:2px;}
.cpc-key i.repay{background:#F2B94B;}
.cpc-key i.run{background:rgba(255,255,255,0.4);}
.cpc-key i.head{background:#34D399;}
.cpc-rows{display:flex;flex-direction:column;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,0.12);}
.cpc-row{display:flex;align-items:center;font-size:12.5px;opacity:0;transform:translateX(-10px);}
.cap-row.in .cpc-row{animation:rowin .5s forwards;}
.cap-row.in .cpc-row:nth-child(1){animation-delay:1.15s;}
.cap-row.in .cpc-row:nth-child(2){animation-delay:1.35s;}
.cpc-t{color:rgba(255,255,255,0.78);font-weight:400;}
.cpc-v{margin-left:auto;color:#fff;font-weight:500;}
.cpc-verdict{display:flex;align-items:flex-start;gap:9px;margin-top:13px;padding:10px 12px;border-radius:11px;
  background:rgba(110,231,183,0.10);border:1px solid rgba(110,231,183,0.20);
  font-size:12px;line-height:1.45;font-weight:300;color:rgba(255,255,255,0.86);
  opacity:0;transform:translateY(6px);transition:opacity .6s ease 1.6s,transform .6s ease 1.6s;}
.cap-row.in .cpc-verdict{opacity:1;transform:none;}
.cpc-verdict b{font-weight:600;color:#6EE7B7;}
.cpc-tick{width:17px;height:17px;border-radius:50%;background:rgba(110,231,183,0.18);color:#6EE7B7;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.cpc-tick svg{width:10px;height:10px;}

/* ═══════════════════ SCROLL CHOREOGRAPHY ═══════════════════ */
/* thin progress hairline so the page always tells you where you are */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:400;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#FBAA1B,#F58220);pointer-events:none;will-change:transform;}

/* directional entrances, opt in per element with data-anim */
[data-anim]{opacity:0;will-change:opacity,transform;
  transition:opacity .8s cubic-bezier(.22,.7,.3,1),transform .9s cubic-bezier(.22,.7,.3,1);}
[data-anim="up"]{transform:translateY(30px);}
[data-anim="left"]{transform:translateX(-34px);}
[data-anim="right"]{transform:translateX(34px);}
[data-anim="scale"]{transform:scale(.93);}
[data-anim="rise"]{transform:translateY(52px) scale(.97);}
[data-anim].in{opacity:1;transform:none;}

/* headings wipe up from behind a mask, one line at a time */
.sec-title,.quiet-h{overflow:hidden;}
.wipe{display:block;overflow:hidden;}
.wipe > span{display:block;transform:translateY(102%);transition:transform 1s cubic-bezier(.22,.7,.3,1);}
.wipe.in > span{transform:none;}

/* photos drift slower than the page, so the pillar rows feel like they have depth */
[data-parallax]{will-change:transform;}
.cap-media{overflow:hidden;}
.cap-media img{height:118%;top:-9%;position:relative;}

@media(prefers-reduced-motion:reduce){
  [data-anim],[data-anim].in{opacity:1!important;transform:none!important;transition:none!important;}
  .wipe > span{transform:none!important;}
  [data-parallax]{transform:none!important;}
  .progress{display:none;}}

/* ═══════════════════════════════════════════════════════════════
   MULTI-PAGE COMPONENTS
   Shared by every mockup-*.html page. Home uses .pillars / .who,
   inner pages use .pghero / .steps / .faq / .rel-grid.
   ═══════════════════════════════════════════════════════════════ */

#mockup-badge{position:fixed;bottom:16px;left:16px;z-index:9999;background:#0A0A0A;color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;
  border-radius:999px;opacity:.75;pointer-events:none;}

.nav-links a.on-page{color:var(--blue);opacity:1;background:rgba(255,255,255,0.55);}

/* ── inner page hero ── */
.pghero{position:relative;padding:clamp(122px,15vh,168px) clamp(20px,5vw,56px) clamp(40px,6vh,64px);
  background:
    radial-gradient(120% 90% at 78% -10%, rgba(224,123,46,0.05) 0%, rgba(224,123,46,0) 54%),
    radial-gradient(90% 80% at 4% 106%, rgba(236,154,78,0.05) 0%, rgba(236,154,78,0) 54%),
    linear-gradient(180deg,#FDFBF6 0%,var(--bg) 62%,var(--bg) 100%);}
.pghero-inner{max-width:960px;margin:0 auto;text-align:center;}
.crumb{font-size:12.5px;color:var(--sub);margin-bottom:26px;letter-spacing:.01em;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--blue);}
.crumb span{margin:0 6px;opacity:.5;}
.pghero-kicker{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-dim);border:1px solid var(--blue-border);border-radius:999px;padding:7px 15px;margin-bottom:20px;}
.pghero-h{font-size:clamp(38px,6vw,74px);font-weight:200;line-height:1.02;letter-spacing:-0.05em;margin-bottom:20px;}
.pghero-h em{font-style:normal;color:var(--blue);font-weight:400;}
.pghero-sub{font-size:clamp(15px,1.9vw,19px);line-height:1.6;font-weight:300;color:var(--muted);max-width:660px;margin:0 auto 28px;}
.pghero .hero-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.pghero .btn-ghost{display:inline-flex;align-items:center;text-decoration:none;}

/* ── numbered steps ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);max-width:1180px;margin:0 auto;}
.step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.6vw,30px);
  box-shadow:0 1px 3px rgba(10,10,10,0.04);transition:box-shadow .3s,transform .3s;}
.step:hover{box-shadow:0 14px 36px rgba(10,10,10,0.07);transform:translateY(-2px);}
.step-n{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--blue);margin-bottom:14px;}
.step-t{font-size:clamp(17px,2vw,21px);font-weight:500;letter-spacing:-0.025em;margin-bottom:9px;}
.step-b{font-size:14.5px;line-height:1.6;color:var(--muted);font-weight:300;}
@media(max-width:840px){.steps{grid-template-columns:1fr;}}

/* ── pull quote ── */
.pull{padding:clamp(34px,5vh,62px) clamp(20px,5vw,56px);background:var(--bg2);}
.pull-inner{max-width:820px;margin:0 auto;text-align:center;}
.pull-q{font-size:clamp(20px,3vw,32px);line-height:1.4;font-weight:200;letter-spacing:-0.035em;color:var(--ink);}
.pull-w{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);margin-top:22px;}

/* ── FAQ (also feeds the FAQPage structured data on each page) ── */
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:22px 4px;font-size:clamp(15px,1.9vw,18px);font-weight:500;letter-spacing:-0.02em;transition:color .2s;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--blue);}
.faq-mark{margin-left:auto;position:relative;width:15px;height:15px;flex-shrink:0;}
.faq-mark::before,.faq-mark::after{content:'';position:absolute;background:var(--blue);border-radius:2px;transition:transform .3s;}
.faq-mark::before{top:7px;left:0;width:15px;height:1.6px;}
.faq-mark::after{left:7px;top:0;width:1.6px;height:15px;}
.faq-item[open] .faq-mark::after{transform:scaleY(0);}
.faq-a{padding:0 4px 24px;max-width:660px;}
.faq-a p{font-size:15px;line-height:1.65;color:var(--muted);font-weight:300;}
.faq-item[open] .faq-a{animation:faqIn .4s ease;}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ── legal / support content (privacy, terms, support pages) ── */
.legal{max-width:760px;margin:0 auto;}
.legal h2{font-size:17px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);
  margin-top:40px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);
  display:flex;gap:8px;align-items:baseline;}
.legal h2 span{color:var(--blue);font-weight:700;}
.legal > h3{font-size:15px;font-weight:600;letter-spacing:-0.005em;color:var(--ink);
  margin:24px 0 8px;}
.legal p{font-size:15px;line-height:1.75;color:var(--ink2);font-weight:300;margin-bottom:14px;}
.legal ul{margin:6px 0 18px 22px;}
.legal li{font-size:15px;line-height:1.7;color:var(--ink2);font-weight:300;margin-bottom:7px;}
.legal a{color:var(--blue-dark);text-decoration:underline;text-underline-offset:2px;}
.legal-callout{background:var(--blue-dim);border-left:3px solid var(--blue);padding:16px 20px;
  border-radius:0 12px 12px 0;margin:18px 0;}
.legal-callout p{margin-bottom:0;}
.legal-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px;
  margin-top:26px;box-shadow:0 1px 3px rgba(10,10,10,0.04);}
.legal-card h3{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:10px;}
.legal-card p{font-size:14px;color:var(--muted);margin-bottom:4px;}

/* ── related / explore cards ── */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);max-width:1180px;margin:0 auto;}
.rel-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(20px,2.4vw,28px);text-decoration:none;color:var(--ink);
  box-shadow:0 1px 3px rgba(10,10,10,0.04);transition:box-shadow .3s,transform .3s,border-color .3s;}
.rel-card:hover{box-shadow:0 16px 40px rgba(224,123,46,0.10);transform:translateY(-3px);border-color:var(--blue-border);}
.rel-ic{width:38px;height:38px;border-radius:12px;background:var(--blue-dim);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.rel-ic svg{width:19px;height:19px;}
.rel-t{font-size:18px;font-weight:500;letter-spacing:-0.025em;margin-bottom:8px;}
.rel-b{font-size:14px;line-height:1.55;color:var(--muted);font-weight:300;margin-bottom:16px;}
.rel-go{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--blue);}
@media(max-width:840px){.rel-grid{grid-template-columns:1fr;}}

/* ── home: the three pillars as doorways ── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);max-width:1180px;margin:0 auto;}
.pillar{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;
  overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 1px 3px rgba(10,10,10,0.04);
  transition:box-shadow .35s,transform .35s,border-color .35s;}
.pillar:hover{box-shadow:0 20px 48px rgba(10,10,10,0.12);transform:translateY(-4px);border-color:var(--blue-border);}
.pillar-img{position:relative;height:clamp(170px,20vw,232px);background-size:cover;background-position:center;overflow:hidden;}
.pillar-img::after{content:'';position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.pillar:hover .pillar-img{transform:scale(1.03);transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.pillar-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.10) 0%,rgba(10,10,10,0.55) 100%);}
.pillar-n{position:absolute;top:16px;left:18px;font-size:12px;font-weight:600;letter-spacing:.12em;
  color:rgba(255,255,255,0.9);z-index:2;}
.pillar-body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1;}
.pillar-body h3{font-size:clamp(20px,2.4vw,26px);font-weight:400;letter-spacing:-0.035em;margin-bottom:5px;}
.pillar-sub{font-size:14.5px;font-weight:600;letter-spacing:-0.01em;color:var(--blue);margin-bottom:12px;}
.pillar-body p{font-size:14.5px;line-height:1.6;color:var(--muted);font-weight:300;margin-bottom:18px;}
.pillar-go{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--blue);}
@media(max-width:840px){.pillars{grid-template-columns:1fr;}}

/* ── home: who we are ── */
.who{padding:clamp(42px,6vh,76px) clamp(20px,5vw,56px);background:var(--bg2);}
.who-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.who-h{font-size:clamp(28px,3.8vw,46px);font-weight:200;line-height:1.08;letter-spacing:-0.045em;margin:14px 0 20px;}
.who-h em{font-style:normal;color:var(--blue);font-weight:400;}
.who-copy p{font-size:clamp(15px,1.75vw,17px);line-height:1.65;color:var(--muted);font-weight:300;margin-bottom:14px;}
.who-go{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--blue);text-decoration:none;}
.who-go:hover{text-decoration:underline;}
.who-stats{display:flex;flex-direction:column;gap:12px;}
.who-stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:20px 22px;}
.who-stat b{display:block;font-size:22px;font-weight:400;letter-spacing:-0.03em;color:var(--blue);margin-bottom:5px;}
.who-stat span{font-size:13.5px;line-height:1.5;color:var(--muted);font-weight:300;}
@media(max-width:840px){.who-inner{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT SHOWCASE
   Device frames with the interface rebuilt in the current blue brand.
   Every .screen-* block is a drop-in slot: swap the markup for a real
   screenshot <img> when current blue-brand grabs are available.
   ═══════════════════════════════════════════════════════════════ */

/* ── the free promise ── */
.freebar{background:var(--ink);color:#fff;padding:clamp(30px,4vh,46px) clamp(20px,5vw,56px);text-align:center;}
.freebar-inner{max-width:900px;margin:0 auto;}
.freebar h2{font-size:clamp(26px,3.6vw,44px);font-weight:200;letter-spacing:-0.045em;line-height:1.1;}
.freebar h2 em{font-style:normal;color:#FCC85F;font-weight:400;}
.freebar p{font-size:clamp(14px,1.7vw,17px);color:rgba(255,255,255,0.66);font-weight:300;margin-top:14px;}
.freebar-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;}
.freebar-row span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;
  border:1px solid rgba(255,255,255,0.16);border-radius:999px;padding:9px 16px;color:rgba(255,255,255,0.86);}
.freebar-row svg{width:14px;height:14px;color:#6EE7B7;}

/* ── question marquee, gives the statement section a pulse ── */
.qmarq{margin-top:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.qmarq-row{display:flex;gap:10px;width:max-content;}
.qmarq-row + .qmarq-row{margin-top:10px;}
.qmarq-row.a{animation:marq 46s linear infinite;}
.qmarq-row.b{animation:marq 38s linear infinite reverse;}
.qmarq:hover .qmarq-row{animation-play-state:paused;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.qpill{flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 19px;
  font-size:14px;font-weight:400;color:var(--muted);letter-spacing:-0.01em;white-space:nowrap;
  box-shadow:0 1px 3px rgba(10,10,10,0.04);}
.qpill b{color:var(--ink);font-weight:500;}
@media(prefers-reduced-motion:reduce){.qmarq-row{animation:none!important;}}

/* ── phone frame, lighter than the hero device ── */
.pf{position:relative;width:100%;max-width:270px;padding:8px;border-radius:44px;flex-shrink:0;
  background:linear-gradient(150deg,#e8e8ea 0%,#b9bbc0 18%,#f3f3f5 34%,#a9abb2 62%,#e6e6e9 84%,#b5b7bd 100%);
  box-shadow:0 26px 60px rgba(10,10,10,0.26),0 3px 10px rgba(10,10,10,0.16);}
.pf-screen{position:relative;border-radius:37px;overflow:hidden;background:#F7F7F4;height:520px;
  display:flex;flex-direction:column;}
.pf-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:88px;height:25px;
  background:#000;border-radius:16px;z-index:12;}
.pf-top{padding:38px 17px 12px;flex-shrink:0;}
.pf-eyebrow{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);}
.pf-title{font-size:16px;font-weight:500;letter-spacing:-0.025em;margin-top:3px;}
.pf-body{padding:0 17px 17px;flex:1;display:flex;flex-direction:column;gap:10px;overflow:hidden;}

/* screen: cash flow */
.pf-hero-num{font-size:34px;font-weight:200;letter-spacing:-0.045em;line-height:1;}
.pf-hero-cap{font-size:11px;color:var(--muted);margin-top:5px;font-weight:300;}
.pf-bars{display:flex;align-items:flex-end;gap:5px;height:74px;margin-top:4px;}
.pf-bars i{flex:1;border-radius:4px 4px 2px 2px;height:0;background:linear-gradient(180deg,#FBAA1B,#F58220);
  transition:height 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*0.07s);}
.pf-bars i.mute{background:rgba(10,10,10,0.10);}
.in-view .pf-bars i{height:var(--h);}
.pf-line{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;
  padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:12px;}
.pf-line b{font-weight:600;}
.pf-line .up{color:#0F9D58;}
.pf-line .warn{color:#C0442A;}

/* screen: chat */
.pf-chat{display:flex;flex-direction:column;gap:8px;}
.pf-b{max-width:88%;font-size:12px;line-height:1.45;padding:10px 13px;border-radius:15px;}
.pf-b.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px;}
.pf-b.k{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;}
.pf-b.k b{color:var(--blue);font-weight:600;}

/* screen: alerts */
.pf-alert{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:11px 12px;}
.pf-alert-ic{width:26px;height:26px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--blue-dim);color:var(--blue);}
.pf-alert-ic svg{width:13px;height:13px;}
.pf-alert-t{font-size:12px;font-weight:600;letter-spacing:-0.01em;}
.pf-alert-s{font-size:11px;color:var(--muted);font-weight:300;line-height:1.4;margin-top:2px;}
.pf-alert.warn .pf-alert-ic{background:rgba(232,86,58,0.16);color:#C0442A;}
.pf-alert.good .pf-alert-ic{background:rgba(15,157,88,0.13);color:#0F9D58;}

/* ── phone trio, each rides at its own height ── */
.trio{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,3vw,42px);max-width:1080px;margin:0 auto;padding-top:10px;}
.trio .pf{transform:translateY(30px);opacity:0;transition:opacity .9s ease,transform 1s cubic-bezier(.22,.7,.3,1);}
.trio.in-view .pf{opacity:1;transform:none;}
.trio .pf:nth-child(1){transition-delay:.05s;}
.trio .pf:nth-child(2){transition-delay:.2s;}
.trio .pf:nth-child(3){transition-delay:.35s;}
.trio .pf:nth-child(2){margin-bottom:clamp(18px,4vw,54px);}
.trio-cap{display:flex;justify-content:center;gap:clamp(12px,3vw,42px);max-width:1080px;margin:26px auto 0;text-align:center;}
.trio-cap div{flex:1;max-width:270px;}
.trio-cap b{display:block;font-size:15px;font-weight:500;letter-spacing:-0.02em;margin-bottom:5px;}
.trio-cap span{font-size:13px;line-height:1.5;color:var(--muted);font-weight:300;}
@media(max-width:900px){
  .trio{flex-wrap:wrap;gap:22px;}
  .trio .pf:nth-child(1),.trio .pf:nth-child(3){display:none;}  /* mobile: show only the Kapio chat phone */
  .trio .pf:nth-child(2){margin-bottom:0;}
  .trio .pf{width:clamp(228px,72vw,262px);}
  .trio .pf-screen{height:clamp(430px,118vw,478px);}
  .trio-cap{display:none;}
}

/* ── desktop frame with switchable screens ── */
.showcase{max-width:1180px;margin:0 auto;}
.sc-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:28px;}
.sc-tab{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-family:inherit;
  font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:.2s;position:relative;overflow:hidden;}
.sc-tab:hover{color:var(--ink);border-color:var(--blue-border);}
.sc-tab.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.sc-tab .sc-fill{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue);}
.sc-tab.on .sc-fill{animation:scFill 6s linear forwards;}
@keyframes scFill{to{width:100%;}}
.sc-stage{display:grid;grid-template-columns:1fr 250px;gap:clamp(16px,2.6vw,32px);align-items:end;}
.mac{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(10,10,10,0.16);}
.mac-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#F1F1EE;border-bottom:1px solid var(--line);}
.mac-dot{width:10px;height:10px;border-radius:50%;background:#DCDCD6;}
.mac-url{margin-left:10px;font-size:11px;color:var(--sub);background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:4px 12px;}
.mac-main{padding:0;position:relative;overflow:hidden;line-height:0;}
.sc-screen{display:none;}
.sc-screen.on{display:block;animation:scIn .55s cubic-bezier(.22,.7,.3,1);}
@keyframes scIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.sc-shot{display:block;width:100%;height:auto;}
.sc-side-phone{display:flex;justify-content:center;}
.sc-side-phone .pf{max-width:250px;}
.sc-side-phone .pf-screen{height:470px;}
@media(max-width:1000px){.sc-stage{grid-template-columns:1fr;}.sc-side-phone{display:none;}}
/* keep the 4 showcase tabs on one line at phone widths */
@media(max-width:560px){.sc-tabs{flex-wrap:nowrap;gap:6px;}.sc-tab{flex:1 1 0;min-width:0;padding:9px 4px;font-size:12.5px;text-align:center;justify-content:center;white-space:nowrap;}}

/* ── pillar cards get a living stat chip ── */
.pillar-chip{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;background:rgba(18,20,26,0.72);
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.14);border-radius:13px;padding:10px 12px;
  display:flex;align-items:center;gap:10px;color:#fff;
  opacity:0;transform:translateY(8px);transition:opacity .6s ease .3s,transform .6s ease .3s;}
.pillar.in .pillar-chip,.in-view .pillar-chip{opacity:1;transform:none;}
.pillar-chip-v{font-size:17px;font-weight:300;letter-spacing:-0.03em;}
.pillar-chip-l{font-size:10px;color:rgba(255,255,255,0.6);line-height:1.3;}
.pillar-spark{margin-left:auto;display:flex;align-items:flex-end;gap:2.5px;height:22px;}
.pillar-spark i{width:3px;border-radius:2px;background:#FCC85F;height:0;
  transition:height .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*0.06s);}
.in-view .pillar-spark i{height:var(--h);}

/* ── bento gets its own motion ── */
.bt{transition:transform .5s cubic-bezier(.22,.7,.3,1),box-shadow .5s ease;}
.bt:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(10,10,10,0.18);}
.bt.img{background-size:cover;}
.bt.img::before{content:'';position:absolute;inset:0;background:inherit;background-size:cover;
  animation:btDrift 26s ease-in-out infinite;}
@keyframes btDrift{0%,100%{transform:scale(1.02);}50%{transform:scale(1.09) translate(-1%,-1%);}}
.bt-sheen{position:absolute;top:0;bottom:0;width:38%;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.16) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-160%);}
.bento-grid.in-view .bt-sheen{animation:btSheen 5.5s ease-in-out infinite;animation-delay:var(--sd);}
@keyframes btSheen{0%{transform:translateX(-160%);}45%,100%{transform:translateX(420%);}}
@media(prefers-reduced-motion:reduce){
  .bt.img::before,.bt-sheen{animation:none!important;}
  .bt:hover{transform:none;}}

/* ═══════════════════════════════════════════════════════════════
   LIVE PHONE SCREENS
   Three device screens that run their own looping animation while
   on screen. Driven by kapio.js (phoneShow).
   ═══════════════════════════════════════════════════════════════ */

.trio .pf{animation:pfFloat 7s ease-in-out infinite;}
.trio .pf:nth-child(2){animation-duration:8.4s;animation-delay:-2s;}
.trio .pf:nth-child(3){animation-duration:7.8s;animation-delay:-4s;}
@keyframes pfFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.trio.in-view .pf{animation-play-state:running;}
@media(prefers-reduced-motion:reduce){.trio .pf{animation:none;}}

/* screen chrome */
.pf-screen{background:linear-gradient(178deg,#FBFBF9 0%,#F4F5F1 100%);color:var(--ink);}
/* the device is a light UI wherever it sits, including on dark sections */
.pf-status{display:flex;align-items:center;justify-content:space-between;padding:13px 22px 0;
  font-size:11.5px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);flex-shrink:0;}
.pf-status .ic{display:flex;align-items:center;gap:4px;opacity:.9;}
.pf-status svg{display:block;}
.pf-home{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:104px;height:4px;
  border-radius:3px;background:rgba(10,10,10,0.22);z-index:14;}
.pf-gloss{position:absolute;inset:0;z-index:13;pointer-events:none;border-radius:37px;
  background:linear-gradient(128deg,rgba(255,255,255,0.42) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 62%,rgba(255,255,255,0.14) 100%);}

/* header inside the app */
.pf-head{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 12px;flex-shrink:0;}
.pf-h-l{font-size:17px;font-weight:500;letter-spacing:-0.03em;}
.pf-live{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue);background:var(--blue-dim);border-radius:999px;padding:4px 9px;}
.pf-live i{width:5px;height:5px;border-radius:50%;background:var(--blue);animation:pfPing 1.9s ease-out infinite;}
@keyframes pfPing{0%{box-shadow:0 0 0 0 rgba(224,123,46,.55);}70%{box-shadow:0 0 0 7px rgba(224,123,46,0);}100%{box-shadow:0 0 0 0 rgba(224,123,46,0);}}

/* segmented control that drives itself */
.pf-seg{display:flex;gap:3px;background:rgba(10,10,10,0.05);border-radius:11px;padding:3px;margin:0 18px 12px;position:relative;flex-shrink:0;}
.pf-seg button{flex:1;position:relative;z-index:2;border:none;background:none;font-family:inherit;font-size:11px;
  font-weight:600;color:var(--sub);padding:7px 0;border-radius:9px;cursor:pointer;transition:color .35s;}
.pf-seg button.on{color:var(--ink);}
.pf-seg .pf-seg-pill{position:absolute;top:3px;bottom:3px;left:3px;border-radius:9px;background:#fff;z-index:1;
  box-shadow:0 1px 4px rgba(10,10,10,0.10);transition:transform .5s cubic-bezier(.5,1.5,.5,1),width .5s cubic-bezier(.5,1.5,.5,1);}

/* the money figure */
.pf-metric{padding:0 18px;flex-shrink:0;}
.pf-big{font-size:38px;font-weight:200;letter-spacing:-0.055em;line-height:1;display:flex;align-items:baseline;gap:2px;}
.pf-big small{font-size:20px;font-weight:300;opacity:.5;}
.pf-meta{display:flex;align-items:center;gap:8px;margin-top:7px;}
.pf-chip{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:rgba(15,157,88,0.12);color:#0F9D58;}
.pf-chip.warn{background:rgba(232,86,58,0.16);color:#C0442A;}
.pf-note{font-size:11px;color:var(--muted);font-weight:300;}

/* the chart */
.pf-graph{position:relative;padding:6px 12px 0;flex:1;min-height:0;}
.pf-graph svg{width:100%;height:100%;display:block;overflow:visible;}
.pf-gline{fill:none;stroke:url(#pfGrad);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s cubic-bezier(.32,.72,.3,1),opacity .45s;}
.pf-gline.drawn{stroke-dashoffset:0;}
.pf-garea{fill:url(#pfFill);opacity:0;transition:opacity .7s ease;}
.pf-garea.drawn{opacity:1;}
.pf-gset{transition:opacity .45s ease,transform .45s ease;}
.pf-gset.out{opacity:0;transform:translateY(6px);}
.pf-gdot{fill:#fff;stroke:var(--blue);stroke-width:3;opacity:0;transition:opacity .4s ease;}
.pf-gdot.on{opacity:1;}
.pf-flag{position:absolute;background:var(--ink);color:#fff;border-radius:9px;padding:6px 9px;font-size:10px;
  font-weight:500;letter-spacing:-0.01em;white-space:nowrap;pointer-events:none;
  opacity:0;transform:translate(-50%,4px) scale(.94);transition:opacity .4s ease,transform .45s cubic-bezier(.4,1.5,.5,1);}
.pf-flag.on{opacity:1;transform:translate(-50%,0) scale(1);}
.pf-flag::after{content:'';position:absolute;left:50%;bottom:-4px;transform:translateX(-50%) rotate(45deg);
  width:8px;height:8px;background:var(--ink);border-radius:1px;}

/* footer stat strip */
.pf-strip{display:flex;gap:6px;padding:12px 15px 20px;flex-shrink:0;}
.pf-strip div{flex:1 1 0;min-width:0;background:#fff;border:1px solid var(--line);border-radius:11px;padding:8px 8px;}
.pf-strip .l{font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);}
.pf-strip .v{font-size:11.5px;font-weight:600;letter-spacing:-0.03em;margin-top:3px;white-space:nowrap;}
.pf-strip .v.up{color:#0F9D58;}

/* ── chat screen ── */
.pf-chead{display:flex;align-items:center;gap:9px;padding:9px 18px 12px;flex-shrink:0;
  border-bottom:1px solid rgba(10,10,10,0.06);}
.pf-av{width:31px;height:31px;border-radius:10px;background:linear-gradient(140deg,#FBAA1B,#DC6E12);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0;
  box-shadow:0 4px 12px rgba(224,123,46,0.28);}
.pf-cname{font-size:13.5px;font-weight:600;letter-spacing:-0.02em;}
.pf-cstat{font-size:10px;color:var(--blue);font-weight:500;}
.pf-thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 15px 6px;display:flex;flex-direction:column;justify-content:flex-start;gap:9px;scroll-behavior:smooth;}
.pf-thread::-webkit-scrollbar{width:0;}
.pf-msg{max-width:86%;font-size:12px;line-height:1.5;padding:10px 13px;border-radius:16px;
  opacity:0;transform:translateY(12px) scale(.96);animation:pfMsgIn .5s cubic-bezier(.3,1.4,.5,1) forwards;}
@keyframes pfMsgIn{to{opacity:1;transform:none;}}
.pf-msg.me{align-self:flex-end;background:linear-gradient(135deg,#F0A45E,#DE7A2B);color:#fff;border-bottom-right-radius:6px;}
.pf-msg.k{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px;
  box-shadow:0 2px 8px rgba(10,10,10,0.04);}
.pf-msg.k b{color:var(--blue);font-weight:600;}
.pf-typing{align-self:flex-start;display:flex;gap:4px;background:#fff;border:1px solid var(--line);
  border-radius:16px;border-bottom-left-radius:6px;padding:11px 13px;
  opacity:0;animation:pfMsgIn .4s ease forwards;}
.pf-typing i{width:5px;height:5px;border-radius:50%;background:var(--sub);animation:pfDot 1.3s ease-in-out infinite;}
.pf-typing i:nth-child(2){animation-delay:.16s;}
.pf-typing i:nth-child(3){animation-delay:.32s;}
@keyframes pfDot{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
/* the little data card Kapio answers with */
.pf-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px;align-self:flex-start;
  width:92%;box-shadow:0 3px 10px rgba(10,10,10,0.05);
  opacity:0;transform:translateY(12px) scale(.96);animation:pfMsgIn .55s cubic-bezier(.3,1.4,.5,1) forwards;}
.pf-card-h{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--sub);margin-bottom:8px;}
.pf-card-row{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-bottom:6px;}
.pf-card-row:last-child{margin-bottom:0;}
.pf-card-bar{flex:1;height:6px;border-radius:4px;background:rgba(10,10,10,0.07);overflow:hidden;}
.pf-card-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#FBAA1B,#F58220);
  width:0;animation:pfGrow 1s cubic-bezier(.2,.8,.2,1) forwards;}
.pf-card-bar i.green{background:linear-gradient(90deg,#34D399,#0F9D58);}
@keyframes pfGrow{to{width:var(--w);}}
.pf-card-row b{font-weight:600;min-width:44px;text-align:right;}
.pf-composer{display:flex;align-items:center;gap:8px;margin:0 15px 16px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 9px 9px 15px;flex-shrink:0;box-shadow:0 2px 8px rgba(10,10,10,0.05);}
.pf-composer>span:first-child{flex:1;font-size:11.5px;color:var(--sub);}
.pf-caret{display:inline-block;width:1.5px;height:12px;background:var(--blue);vertical-align:-2px;
  animation:pfCaret 1.1s step-end infinite;}
@keyframes pfCaret{50%{opacity:0;}}
.pf-send{flex:none;width:24px;height:24px;border-radius:50%;background:var(--blue);display:flex;align-items:center;
  justify-content:center;box-shadow:0 3px 9px rgba(224,123,46,0.32);}
.pf-send svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.6;}

/* ── signals screen ── */
.pf-ring{display:flex;align-items:center;gap:13px;padding:4px 18px 14px;flex-shrink:0;}
.pf-ring svg{width:66px;height:66px;flex-shrink:0;transform:rotate(-90deg);}
.pf-ring .bg{fill:none;stroke:rgba(10,10,10,0.08);stroke-width:7;}
.pf-ring .fg{fill:none;stroke:url(#pfGrad2);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s cubic-bezier(.32,.72,.3,1);}
.pf-ring .fg.on{stroke-dashoffset:var(--off);}
.pf-ring-mid{position:absolute;font-size:15px;font-weight:500;letter-spacing:-0.03em;}
.pf-ring-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.pf-ring-t{font-size:13px;font-weight:500;letter-spacing:-0.02em;}
.pf-ring-s{font-size:10.5px;color:var(--muted);font-weight:300;line-height:1.45;margin-top:3px;}
.pf-feed{flex:1;min-height:0;overflow:hidden;padding:0 15px;display:flex;flex-direction:column;gap:8px;}
.pf-sig{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:10px 11px;box-shadow:0 2px 8px rgba(10,10,10,0.04);
  opacity:0;transform:translateY(16px) scale(.96);animation:pfMsgIn .55s cubic-bezier(.3,1.4,.5,1) forwards;}
.pf-sig-ic{width:27px;height:27px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--blue-dim);color:var(--blue);}
.pf-sig-ic svg{width:13px;height:13px;}
.pf-sig.warn .pf-sig-ic{background:rgba(232,86,58,0.18);color:#C0442A;}
.pf-sig.good .pf-sig-ic{background:rgba(15,157,88,0.13);color:#0F9D58;}
.pf-sig-t{font-size:11.5px;font-weight:600;letter-spacing:-0.01em;}
.pf-sig-s{font-size:10.5px;color:var(--muted);font-weight:300;line-height:1.4;margin-top:2px;}
.pf-sig-new{margin-left:auto;font-size:8px;font-weight:700;letter-spacing:.08em;color:var(--blue);
  background:var(--blue-dim);border-radius:5px;padding:3px 5px;flex-shrink:0;}

/* ═══════════ PILLAR VISUALS, one graph type each ═══════════ */
.pillar-viz{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;background:rgba(16,18,24,0.74);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.14);
  border-radius:15px;padding:12px 13px;color:#fff;
  opacity:0;transform:translateY(10px);transition:opacity .6s ease .25s,transform .6s cubic-bezier(.3,1.3,.5,1) .25s;}
.in-view .pillar-viz{opacity:1;transform:none;}
.pv-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px;}
.pv-v{font-size:19px;font-weight:300;letter-spacing:-0.035em;}
.pv-l{font-size:9.5px;color:rgba(255,255,255,0.58);letter-spacing:.02em;}
.pv-tag{font-size:9.5px;font-weight:600;padding:3px 7px;border-radius:999px;}
.pv-tag.up{background:rgba(110,231,183,0.16);color:#6EE7B7;}
.pv-tag.info{background:rgba(246,190,132,0.16);color:#FCC85F;}

/* 01 area chart */
.pv-area svg{width:100%;height:44px;display:block;overflow:visible;}
.pv-area .ln{fill:none;stroke:#FCC85F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s cubic-bezier(.32,.72,.3,1) .4s;}
.in-view .pv-area .ln{stroke-dashoffset:0;}
.pv-area .ar{fill:rgba(246,190,132,0.22);opacity:0;transition:opacity .8s ease 1s;}
.in-view .pv-area .ar{opacity:1;}
.pv-area .pt{fill:#fff;opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .4s ease 1.5s,transform .5s cubic-bezier(.3,1.6,.5,1) 1.5s;}
.in-view .pv-area .pt{opacity:1;transform:scale(1);}

/* 02 radial gauge */
.pv-gauge{display:flex;align-items:center;gap:12px;}
.pv-gauge-ring{position:relative;width:58px;height:58px;flex-shrink:0;}
.pv-gauge svg{width:58px;height:58px;transform:rotate(-90deg);}
.pv-gauge .bg{fill:none;stroke:rgba(255,255,255,0.14);stroke-width:6;}
.pv-gauge .fg{fill:none;stroke:#FCC85F;stroke-width:6;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.8s cubic-bezier(.32,.72,.3,1) .4s;}
.in-view .pv-gauge .fg{stroke-dashoffset:26;}
.pv-gauge-mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:400;letter-spacing:-0.03em;}
.pv-gauge-txt{font-size:10px;color:rgba(255,255,255,0.62);line-height:1.45;}
.pv-gauge-txt b{display:block;color:#fff;font-size:11.5px;font-weight:500;margin-bottom:2px;letter-spacing:-0.01em;}

/* 03 stacked composition bar */
.pv-stack-bar{display:flex;height:11px;border-radius:6px;overflow:hidden;gap:2px;background:rgba(255,255,255,0.08);}
.pv-stack-bar i{width:0;transition:width 1.1s cubic-bezier(.24,.78,.28,1);transition-delay:var(--d);}
.in-view .pv-stack-bar i{width:var(--w);}
.pv-stack-bar i.a{background:linear-gradient(90deg,#FFD27A,#F2B94B);}
.pv-stack-bar i.b{background:rgba(255,255,255,0.32);}
.pv-stack-bar i.c{background:linear-gradient(90deg,#6EE7B7,#34D399);}
.pv-key{display:flex;gap:11px;margin-top:9px;font-size:9px;color:rgba(255,255,255,0.6);}
.pv-key span{display:inline-flex;align-items:center;gap:5px;}
.pv-key i{width:6px;height:6px;border-radius:2px;}
.pv-key i.a{background:#F2B94B;} .pv-key i.b{background:rgba(255,255,255,0.45);} .pv-key i.c{background:#34D399;}

/* ═══════════════════════════════════════════════════════════════
   CONNECTED ACCOUNTS PAGE
   ═══════════════════════════════════════════════════════════════ */

/* richer source rows: icon, name, live sync state */
.msrc{gap:12px;position:relative;}
.msrc-ic{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--blue-dim);color:var(--blue);}
.msrc-ic svg{width:16px;height:16px;}
.msrc-txt{display:flex;flex-direction:column;line-height:1.3;}
.msrc-txt small{font-size:11px;font-weight:400;color:var(--sub);}
.msrc-state{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:#0F9D58;background:rgba(15,157,88,0.10);
  border-radius:999px;padding:4px 9px;flex-shrink:0;}
.msrc-state i{width:5px;height:5px;border-radius:50%;background:#0F9D58;}
.msrc-state.sync{color:var(--blue);background:var(--blue-dim);}
.msrc-state.sync i{background:var(--blue);animation:pfPing 1.6s ease-out infinite;}

/* data packets travelling down the merge lines */
.mpacket{fill:var(--blue);opacity:0;}
.merge.go .mpacket{opacity:1;}

/* what you can connect */
.conn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,18px);max-width:1180px;margin:0 auto;}
.conn{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;transition:box-shadow .3s,transform .3s,border-color .3s;}
.conn:hover{box-shadow:0 14px 34px rgba(224,123,46,0.09);transform:translateY(-2px);border-color:var(--blue-border);}
.conn-ic{width:40px;height:40px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--blue-dim),rgba(224,123,46,0.03));color:var(--blue);border:1px solid var(--blue-border);}
.conn-ic svg{width:19px;height:19px;}
.conn-t{font-size:14.5px;font-weight:500;letter-spacing:-0.02em;}
.conn-s{font-size:12.5px;color:var(--muted);font-weight:300;margin-top:2px;line-height:1.4;}
@media(max-width:860px){.conn-grid{grid-template-columns:1fr;}}

/* the sale-to-kept waterfall */
.wf-wrap{display:grid;grid-template-columns:1fr 260px;gap:clamp(24px,4vw,56px);align-items:center;max-width:1180px;margin:0 auto;}
.wf{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,34px);
  box-shadow:0 2px 6px rgba(10,10,10,0.04);}
.wf-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;}
.wf-h b{font-size:15px;font-weight:500;letter-spacing:-0.02em;}
.wf-h span{font-size:12px;color:var(--sub);}
.wf-chart{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,16px);height:clamp(170px,22vw,230px);}
.wf-col{flex:1;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;}
.wf-bar{position:absolute;left:0;right:0;bottom:var(--b);height:0;border-radius:6px;
  background:rgba(10,10,10,0.14);transition:height .9s cubic-bezier(.24,.78,.28,1);transition-delay:var(--d);}
.in-view .wf-bar{height:var(--h);}
.wf-col.start .wf-bar{background:linear-gradient(180deg,#FCC85F,#FBAA1B);}
.wf-col.cut .wf-bar{background:repeating-linear-gradient(135deg,rgba(10,10,10,0.16) 0 5px,rgba(10,10,10,0.09) 5px 10px);}
.wf-col.kept .wf-bar{background:linear-gradient(180deg,#6EE7B7,#0F9D58);box-shadow:0 6px 18px rgba(15,157,88,0.22);}
.wf-lab{position:relative;z-index:2;margin-top:auto;padding-top:10px;text-align:center;}
.wf-v{font-size:clamp(11px,1.3vw,13.5px);font-weight:600;letter-spacing:-0.02em;}
.wf-col.cut .wf-v{color:#C0442A;}
.wf-col.kept .wf-v{color:#0F9D58;}
.wf-n{font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:300;}
.wf-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.6;
  color:var(--muted);font-weight:300;}
.wf-foot b{color:var(--ink);font-weight:600;}
.wf-side{display:flex;justify-content:center;}
@media(max-width:900px){.wf-wrap{grid-template-columns:1fr;}.wf-side{display:none;}}

/* accounts screen on the phone */
.pf-acct{display:flex;flex-direction:column;gap:8px;padding:0 15px;flex:1;min-height:0;overflow:hidden;}
.pf-acct-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:10px 11px;}
.pf-acct-ic{width:28px;height:28px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--blue-dim);color:var(--blue);}
.pf-acct-ic svg{width:13px;height:13px;}
.pf-acct-t{font-size:11.5px;font-weight:600;letter-spacing:-0.01em;}
.pf-acct-s{font-size:10px;color:var(--sub);margin-top:1px;}
.pf-acct-v{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:-0.02em;text-align:right;}
.pf-acct-v small{display:block;font-size:9px;font-weight:500;color:#0F9D58;letter-spacing:.04em;}
.pf-acct-v small.sync{color:var(--blue);}
.pf-total{margin:2px 15px 0;background:var(--ink);border-radius:15px;padding:13px 14px;color:#fff;}
.pf-total .l{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.5);}
.pf-total .v{font-size:24px;font-weight:200;letter-spacing:-0.04em;margin-top:5px;}
.pf-total .d{font-size:10px;color:rgba(255,255,255,0.6);margin-top:4px;font-weight:300;}
.pf-add{margin:10px 15px 18px;border:1px dashed var(--blue-border);color:var(--blue);border-radius:13px;
  padding:11px;text-align:center;font-size:11.5px;font-weight:600;background:var(--blue-dim);}

/* ═══════════════════════════════════════════════════════════════
   BUSINESS CREDIT PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── two files, side by side: personal vs business ── */
.vs{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2.4vw,30px);
  align-items:stretch;max-width:1080px;margin:0 auto;}
.vs-card{border-radius:22px;padding:clamp(22px,3vw,32px);border:1px solid var(--line);background:#fff;
  opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s cubic-bezier(.22,.7,.3,1);}
.in-view .vs-card{opacity:1;transform:none;}
.in-view .vs-card.b{transition-delay:.18s;}
.vs-card.b{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 26px 60px rgba(10,10,10,0.22);}
.vs-tag{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;border-radius:999px;padding:6px 13px;margin-bottom:16px;
  background:rgba(10,10,10,0.05);color:var(--muted);}
.vs-card.b .vs-tag{background:rgba(246,190,132,0.16);color:#FCC85F;}
.vs-h{font-size:clamp(20px,2.4vw,27px);font-weight:400;letter-spacing:-0.035em;line-height:1.15;margin-bottom:8px;}
.vs-sub{font-size:13.5px;line-height:1.55;font-weight:300;color:var(--muted);margin-bottom:18px;}
.vs-card.b .vs-sub{color:rgba(255,255,255,0.66);}
.vs-rows{display:flex;flex-direction:column;gap:0;}
.vs-row{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;}
.vs-card.b .vs-row{border-color:rgba(255,255,255,0.12);}
.vs-row span{color:var(--sub);flex-shrink:0;width:86px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding-top:2px;}
.vs-card.b .vs-row span{color:rgba(255,255,255,0.42);}
.vs-row b{font-weight:400;color:var(--muted);}
.vs-card.b .vs-row b{color:rgba(255,255,255,0.9);}
.vs-mid{display:flex;align-items:center;justify-content:center;}
.vs-mid span{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--sub);
  letter-spacing:.04em;box-shadow:0 4px 14px rgba(10,10,10,0.07);}
.vs-note{max-width:820px;margin:clamp(22px,3vh,34px) auto 0;text-align:center;font-size:clamp(15px,1.8vw,18px);
  line-height:1.6;font-weight:300;color:var(--muted);}
.vs-note b{color:var(--ink);font-weight:500;}
@media(max-width:880px){.vs{grid-template-columns:1fr;}.vs-mid{padding:4px 0;}.vs-mid span{transform:rotate(90deg);}}

/* ── how it works, as a rail rather than three cards ── */
.rail{max-width:900px;margin:0 auto;position:relative;padding-left:58px;}
.rail::before{content:'';position:absolute;left:18px;top:16px;bottom:16px;width:2px;background:var(--line);}
.rail::after{content:'';position:absolute;left:18px;top:16px;width:2px;height:0;
  background:linear-gradient(180deg,var(--blue),#FCC85F);transition:height 1.6s cubic-bezier(.3,.7,.3,1) .2s;}
.in-view .rail::after{height:calc(100% - 32px);}
.rail-step{position:relative;padding:0 0 clamp(26px,3.4vw,40px);}
.rail-step:last-child{padding-bottom:0;}
/* node sits centred on the line at every width (fixed values, no drifting calc) */
/* simple dot markers, centred on the line at every width */
.rail-node{position:absolute;left:-46px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--line);border:none;font-size:0;
  transition:background .5s ease,box-shadow .5s ease;}
@media(max-width:560px){.rail{padding-left:50px;}.rail::before,.rail::after{left:15px;}.rail-node{left:-40px;top:8px;width:12px;height:12px;}}
.in-view .rail-step:nth-child(1) .rail-node{background:var(--blue);box-shadow:0 0 0 5px rgba(224,123,46,0.10);transition-delay:.35s;}
.in-view .rail-step:nth-child(2) .rail-node{background:var(--blue);box-shadow:0 0 0 5px rgba(224,123,46,0.10);transition-delay:.85s;}
.in-view .rail-step:nth-child(3) .rail-node{background:var(--blue);box-shadow:0 0 0 5px rgba(224,123,46,0.10);transition-delay:1.35s;}
.rail-t{font-size:clamp(18px,2.2vw,23px);font-weight:400;letter-spacing:-0.03em;margin-bottom:7px;}
.rail-b{font-size:14.5px;line-height:1.6;color:var(--muted);font-weight:300;max-width:560px;}
.rail-badge{display:inline-flex;align-items:center;gap:8px;margin-top:13px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;font-size:12.5px;font-weight:500;box-shadow:0 2px 8px rgba(10,10,10,0.04);}
.rail-badge svg{width:15px;height:15px;color:var(--blue);flex-shrink:0;}
.rail-badge.good svg{color:#0F9D58;}
.rail-dial{display:inline-flex;align-items:center;gap:10px;margin-top:13px;}
.rail-dial svg{width:42px;height:42px;transform:rotate(-90deg);}
.rail-dial .bg{fill:none;stroke:var(--line);stroke-width:5;}
.rail-dial .fg{fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.5s cubic-bezier(.3,.7,.3,1) 1.5s;}
.in-view .rail-dial .fg{stroke-dashoffset:14;}
.rail-dial-t{font-size:12.5px;font-weight:500;line-height:1.4;}
.rail-dial-t small{display:block;font-size:11.5px;color:var(--muted);font-weight:300;}

/* ── what moves it: weighted impact bars ── */
.impact{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:clamp(20px,3vw,32px);box-shadow:0 2px 6px rgba(10,10,10,0.04);}
.impact-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;
  padding-bottom:16px;border-bottom:1px solid var(--line);}
.impact-h b{font-size:14.5px;font-weight:500;letter-spacing:-0.02em;}
.impact-h span{font-size:11.5px;color:var(--sub);}
.imp{display:grid;grid-template-columns:1fr 2fr auto;gap:clamp(10px,2vw,22px);align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line);}
.imp:last-child{border-bottom:none;padding-bottom:0;}
.imp-t{font-size:14px;font-weight:500;letter-spacing:-0.02em;}
.imp-s{font-size:12px;color:var(--muted);font-weight:300;line-height:1.45;margin-top:3px;}
.imp-track{height:9px;border-radius:5px;background:rgba(10,10,10,0.06);overflow:hidden;}
.imp-fill{display:block;height:100%;border-radius:5px;width:0;
  background:linear-gradient(90deg,#FCC85F,#F58220);
  transition:width 1.1s cubic-bezier(.24,.78,.28,1);transition-delay:var(--d);}
.in-view .imp-fill{width:var(--w);}
.imp-fill.warn{background:linear-gradient(90deg,#FF7A5C,#C0442A);}
.imp-fill.good{background:linear-gradient(90deg,#6EE7B7,#0F9D58);}
.imp-tag{font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;white-space:nowrap;
  background:rgba(10,10,10,0.05);color:var(--muted);}
.imp-tag.good{background:rgba(15,157,88,0.12);color:#0F9D58;}
.imp-tag.warn{background:rgba(232,86,58,0.18);color:#C0442A;}
.impact-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.55;color:var(--muted);font-weight:300;}
.impact-foot svg{width:16px;height:16px;color:var(--blue);flex-shrink:0;margin-top:2px;}
@media(max-width:700px){.imp{grid-template-columns:1fr;gap:8px;}.imp-tag{justify-self:start;}}

/* ═══════════════════════════════════════════════════════════════
   SECURITY PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── the short version: wide rows, not a card grid ── */
.promise{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(10px,1.6vw,16px);}
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,34px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,34px);
  box-shadow:0 1px 3px rgba(10,10,10,0.04);transition:box-shadow .35s,transform .35s,border-color .35s;}
.prow:hover{box-shadow:0 16px 40px rgba(10,10,10,0.08);transform:translateY(-2px);border-color:var(--blue-border);}
.prow-n{font-size:clamp(38px,5vw,62px);font-weight:200;letter-spacing:-0.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(224,123,46,0.32);}
.prow-t{font-size:clamp(19px,2.4vw,26px);font-weight:400;letter-spacing:-0.035em;line-height:1.15;margin-bottom:7px;
  text-wrap:balance;}
.prow-b{font-size:14.5px;line-height:1.6;color:var(--muted);font-weight:300;max-width:56ch;text-wrap:pretty;}
.prow-ic{width:clamp(46px,5vw,58px);height:clamp(46px,5vw,58px);border-radius:17px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--blue-dim),rgba(224,123,46,0.02));border:1px solid var(--blue-border);color:var(--blue);}
.prow-ic svg{width:23px;height:23px;}
@media(max-width:760px){
  .prow{grid-template-columns:auto 1fr;gap:14px;}
  .prow-ic{grid-column:1;grid-row:1;}
  .prow-n{display:none;}
}

/* ── the consent journey ── */
.flow{max-width:1120px;margin:0 auto;}
.flow-track{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.4vw,16px);position:relative;}
.fnode{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2vw,22px);
  text-align:center;opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.22,.7,.3,1);transition-delay:var(--d);}
.in-view .fnode{opacity:1;transform:none;}
.fnode.key{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 20px 46px rgba(10,10,10,0.20);}
.fnode-ic{width:44px;height:44px;border-radius:14px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  background:var(--blue-dim);color:var(--blue);}
.fnode.key .fnode-ic{background:rgba(246,190,132,0.16);color:#FCC85F;}
.fnode-ic svg{width:21px;height:21px;}
.fnode-step{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin-bottom:6px;}
.fnode.key .fnode-step{color:rgba(255,255,255,0.45);}
.fnode-t{font-size:15px;font-weight:500;letter-spacing:-0.025em;margin-bottom:5px;}
.fnode-b{font-size:12.5px;line-height:1.5;color:var(--muted);font-weight:300;}
.fnode.key .fnode-b{color:rgba(255,255,255,0.68);}
.fnode-link{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:11.5px;font-weight:600;
  color:var(--blue);text-decoration:none;}
.fnode.key .fnode-link{color:#FCC85F;}
.fnode-link:hover{text-decoration:underline;}
.fnode-link svg{width:11px;height:11px;}
/* the connector, with a packet running along it */
.flow-wire{position:relative;height:34px;margin:14px 0 0;}
.flow-wire svg{width:100%;height:100%;display:block;overflow:visible;}
.flow-wire .w{fill:none;stroke:var(--line);stroke-width:2;}
.flow-wire .wp{fill:var(--blue);opacity:0;}
.in-view .flow-wire .wp{opacity:1;}
.flow-note{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(18px,2.4vh,28px);}
.flow-note span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;}
.flow-note svg{width:14px;height:14px;color:#0F9D58;flex-shrink:0;}
@media(max-width:900px){
  .flow-track{grid-template-columns:1fr 1fr;}
  .flow-wire{display:none;}
}
@media(max-width:520px){.flow-track{grid-template-columns:1fr;}}

/* ── read more, external ── */
.reading{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,20px);max-width:1000px;margin:0 auto;}
.read{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(18px,2.4vw,26px);text-decoration:none;color:var(--ink);
  transition:box-shadow .3s,transform .3s,border-color .3s;}
.read:hover{box-shadow:0 16px 40px rgba(224,123,46,0.10);transform:translateY(-2px);border-color:var(--blue-border);}
.read-ic{width:40px;height:40px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--blue-dim);color:var(--blue);}
.read-ic svg{width:19px;height:19px;}
.read-t{font-size:15.5px;font-weight:500;letter-spacing:-0.025em;display:flex;align-items:center;gap:7px;}
.read-t svg{width:13px;height:13px;color:var(--sub);}
.read-b{font-size:13px;line-height:1.55;color:var(--muted);font-weight:300;margin-top:5px;}
.read-u{font-size:11.5px;color:var(--sub);margin-top:8px;}
@media(max-width:760px){.reading{grid-template-columns:1fr;}}

/* external references inside body copy and the footer disclosure */
.faq-a a,.foot-note a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
.foot-note a{color:#FCC85F;}
.faq-a a:hover,.foot-note a:hover{opacity:.8;}

/* ═══════════════════════════════════════════════════════════════
   SECURITY HERO
   Two columns: the promise, and a phone running the real consent
   journey on a loop.
   ═══════════════════════════════════════════════════════════════ */
.sechero{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(112px,14vh,158px) clamp(20px,5vw,56px) clamp(44px,7vh,80px);
  background:linear-gradient(168deg,#0A0E16 0%,#101725 46%,#0C1220 100%);color:#fff;}
/* a quiet secure-field backdrop: grid, drifting glow, and a slow scan */
.sechero-bg{position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(246,190,132,0.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(246,190,132,0.055) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 92% at 50% 26%,#000 0%,transparent 76%);
          mask-image:radial-gradient(120% 92% at 50% 26%,#000 0%,transparent 76%);}
.sechero-glow{position:absolute;inset:0;z-index:-2;pointer-events:none;}
.sechero-glow i{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;}
.sechero-glow i:nth-child(1){width:520px;height:520px;top:-190px;right:-90px;
  background:radial-gradient(circle,rgba(224,123,46,0.55),rgba(224,123,46,0) 70%);animation:orbDrift 21s ease-in-out infinite;}
.sechero-glow i:nth-child(2){width:420px;height:420px;bottom:-180px;left:-90px;
  background:radial-gradient(circle,rgba(110,231,183,0.30),rgba(110,231,183,0) 70%);animation:orbDrift 27s ease-in-out infinite reverse;}
.sechero-scan{position:absolute;left:0;right:0;height:180px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(246,190,132,0) 0%,rgba(246,190,132,0.10) 50%,rgba(246,190,132,0) 100%);
  animation:secScan 9s ease-in-out infinite;}
@keyframes secScan{0%{transform:translateY(-200px);}50%{transform:translateY(min(72vh,620px));}100%{transform:translateY(-200px);}}
.sechero-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 360px;
  gap:clamp(28px,5vw,72px);align-items:center;}
.sechero .crumb{color:rgba(255,255,255,0.5);}
.sechero .crumb a{color:rgba(255,255,255,0.72);}
.sechero .crumb a:hover{color:#FCC85F;}
.sechero .pghero-kicker{background:rgba(246,190,132,0.14);border-color:rgba(246,190,132,0.28);color:#FCC85F;}
.sechero-h{font-size:clamp(36px,5.4vw,68px);font-weight:200;line-height:1.02;letter-spacing:-0.05em;margin-bottom:18px;}
.sechero-h em{font-style:normal;color:#FCC85F;font-weight:400;}
.sechero-sub{font-size:clamp(15px,1.9vw,19px);line-height:1.6;font-weight:300;color:rgba(255,255,255,0.72);
  max-width:56ch;margin-bottom:26px;}
.sechero .hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.sechero .btn-ghost{color:#fff;text-decoration:none;display:inline-flex;align-items:center;}
.sechero-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;}
.sechero-chips span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,0.86);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;padding:9px 15px;backdrop-filter:blur(8px);}
.sechero-chips svg{width:14px;height:14px;color:#6EE7B7;flex-shrink:0;}
.sechero-stage{position:relative;display:flex;justify-content:center;overflow:visible;}
.sechero-stage .pf{max-width:300px;}
/* true iPhone proportions for the security device */
.sechero-stage .pf-screen{height:598px;}
/* glass markers orbiting the device */
.smark{position:absolute;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  color:#fff;background:rgba(18,22,32,0.72);border:1px solid rgba(255,255,255,0.16);border-radius:12px;
  padding:8px 12px;backdrop-filter:blur(14px);white-space:nowrap;z-index:5;
  opacity:0;transform:translateY(8px);animation:smarkIn .7s cubic-bezier(.3,1.4,.5,1) forwards;}
.smark svg{width:13px;height:13px;color:#6EE7B7;}
/* callouts sit to the left of the angled phone, framing it, never clipping the edge */
.smark.a{top:10%;left:-30%;animation-delay:.7s;}
.smark.b{top:45%;left:-40%;animation-delay:1.1s;}
.smark.c{bottom:12%;left:-24%;animation-delay:1.5s;}
@keyframes smarkIn{to{opacity:1;transform:none;}}
@media(max-width:960px){
  .sechero-inner{grid-template-columns:1fr;}
  .sechero-stage{order:-1;margin-bottom:8px;}
  .smark{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .sechero-scan,.sechero-glow i,.sechero-stage .pf{animation:none;}
  .smark{opacity:1;transform:none;animation:none;}
}

/* ── consent screen inside the phone ── */
.cs-step{padding:0 17px;flex:1;min-height:0;display:none;flex-direction:column;gap:9px;}
.cs-step.on{display:flex;animation:scIn .5s cubic-bezier(.22,.7,.3,1);}
.cs-q{font-size:13.5px;font-weight:500;letter-spacing:-0.025em;margin-bottom:2px;}
.cs-bank{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:11px 12px;font-size:12px;font-weight:500;transition:border-color .3s,box-shadow .3s;}
.cs-bank i{width:26px;height:26px;border-radius:8px;background:rgba(10,10,10,0.06);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.cs-bank i svg{width:13px;height:13px;color:var(--muted);}
.cs-bank.pick{border-color:var(--blue);box-shadow:0 0 0 3px rgba(224,123,46,0.12);}
.cs-bank.pick i{background:var(--blue-dim);}
.cs-bank.pick i svg{color:var(--blue);}
.cs-bank .tick{margin-left:auto;width:16px;height:16px;border-radius:50%;background:var(--blue);
  display:none;align-items:center;justify-content:center;}
.cs-bank.pick .tick{display:flex;}
.cs-bank .tick svg{width:9px;height:9px;color:#fff;stroke-width:3.4;}
.cs-lock{margin:6px auto 2px;width:58px;height:58px;border-radius:20px;background:var(--blue-dim);
  border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center;color:var(--blue);}
.cs-lock svg{width:26px;height:26px;}
.cs-mid{text-align:center;font-size:12.5px;line-height:1.5;color:var(--muted);font-weight:300;padding:0 4px;}
.cs-mid b{display:block;font-size:14px;color:var(--ink);font-weight:500;margin-bottom:4px;letter-spacing:-0.02em;}
.cs-prog{height:5px;border-radius:4px;background:rgba(10,10,10,0.07);overflow:hidden;margin-top:4px;}
.cs-prog i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#FBAA1B,#F58220);
  animation:csProg 2.4s cubic-bezier(.3,.7,.3,1) forwards;}
@keyframes csProg{to{width:100%;}}
.cs-done{margin:2px auto 4px;width:54px;height:54px;border-radius:50%;background:rgba(15,157,88,0.12);
  display:flex;align-items:center;justify-content:center;color:#0F9D58;
  animation:csPop .55s cubic-bezier(.3,1.6,.5,1) both;}
.cs-done svg{width:26px;height:26px;stroke-width:2.6;}
@keyframes csPop{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}
.cs-badge{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:600;
  color:#0F9D58;background:rgba(15,157,88,0.10);border:1px solid rgba(15,157,88,0.22);
  border-radius:999px;padding:7px 12px;}
.cs-badge svg{width:12px;height:12px;}
.cs-row{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:9px 11px;font-size:11.5px;}
.cs-row b{margin-left:auto;font-weight:600;font-size:11px;color:#0F9D58;}
.cs-foot{font-size:10.5px;color:var(--sub);text-align:center;line-height:1.45;padding:2px 6px 14px;font-weight:300;}

/* amount selector that sits under the scenario chips */
.ask-amounts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:0 auto 26px;}
.ask-amounts .lab{font-size:12.5px;color:rgba(255,255,255,0.5);margin-right:4px;font-weight:500;}
.amt{background:transparent;border:1px solid rgba(255,255,255,0.16);color:rgba(255,255,255,0.82);border-radius:999px;
  padding:8px 15px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:.18s;letter-spacing:-0.01em;}
.amt:hover{background:rgba(255,255,255,0.09);color:#fff;}
.amt.active{background:#fff;border-color:#fff;color:var(--ink);}
.ask-foot{text-align:center;font-size:12.5px;color:rgba(255,255,255,0.5);margin-top:22px;font-weight:300;}
.ask-foot b{color:#FCC85F;font-weight:600;}
.opt-meta{font-size:12.5px;color:rgba(255,255,255,0.55);line-height:1.5;margin-top:9px;font-weight:300;}
.opt-match{margin-top:12px;display:inline-block;font-size:11px;font-weight:600;color:#FCC85F;
  background:rgba(246,190,132,0.14);border-radius:999px;padding:4px 10px;}
@media(max-width:760px){.ask-results{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════════════════
   GLASS DEVICE FINISH
   Applies to every phone on the site: a polished ceramic-glass
   rim, an inner bezel highlight, a screen reflection and a soft
   contact shadow underneath.
   ═══════════════════════════════════════════════════════════════ */
.pf,.iphone{
  /* iPhone 17 Pro — Cosmic Orange anodised aluminium rail.
     Alternating bright chamfer highlights and deep copper shadow bands
     give the machined-metal read; the outer stops are the polished edge. */
  background:
    linear-gradient(150deg,
      #FFE7CE 0%,
      #F4AE6C 8%,
      #C06826 21%,
      #FFDBB2 37%,
      #D2802F 50%,
      #8C420E 66%,
      #F8D0A0 80%,
      #B75F22 92%,
      #E79A54 100%);
  box-shadow:
    0 2px 3px rgba(255,240,224,0.9) inset,
    0 -2px 3px rgba(70,26,0,0.28) inset,
    0 1px 0 rgba(255,230,205,0.6),
    0 34px 70px -18px rgba(40,18,4,0.5),
    0 12px 26px -10px rgba(40,18,4,0.34),
    0 3px 8px rgba(40,18,4,0.18);
  position:relative;}
/* inner bezel: a dark ring so the screen sits inside the glass, not on it */
.pf-screen,.iphone-screen{
  box-shadow:
    0 0 0 1.5px rgba(12,14,20,0.92),
    0 0 0 3px rgba(255,255,255,0.16),
    0 2px 10px rgba(0,0,0,0.30) inset;}
/* specular highlight raking across the glass */
.pf::after,.iphone::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:20;
  background:
    linear-gradient(128deg,
      rgba(255,255,255,0.50) 0%,
      rgba(255,255,255,0.10) 16%,
      rgba(255,255,255,0) 34%,
      rgba(255,255,255,0) 62%,
      rgba(255,255,255,0.14) 82%,
      rgba(255,255,255,0.42) 100%);
  mix-blend-mode:screen;opacity:.7;}
/* soft contact shadow on the surface below */
.pf::before,.iphone::before{
  content:'';position:absolute;left:8%;right:8%;bottom:-26px;height:34px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,rgba(10,14,24,0.30),rgba(10,14,24,0) 72%);
  filter:blur(9px);}
/* the screen glass itself picks up a faint sheen */
.pf-gloss,.iphone-gloss{
  background:
    linear-gradient(122deg,
      rgba(255,255,255,0.34) 0%,
      rgba(255,255,255,0.06) 26%,
      rgba(255,255,255,0) 48%,
      rgba(255,255,255,0) 70%,
      rgba(255,255,255,0.10) 88%,
      rgba(255,255,255,0.26) 100%);}
/* on dark sections the rim reads brighter, as real glass would */
.sechero .pf,.loans .pf,.quiet .pf{
  box-shadow:
    0 2px 3px rgba(255,255,255,0.9) inset,
    0 -2px 3px rgba(0,0,0,0.22) inset,
    0 0 0 1px rgba(255,255,255,0.10),
    0 40px 80px -20px rgba(0,0,0,0.70),
    0 14px 30px -12px rgba(0,0,0,0.55);}

/* ── the quiet part gets a face: photo beside the list ── */
.quiet-inner{max-width:1120px;}
.quiet-grid{display:grid;grid-template-columns:0.85fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;text-align:left;
  margin-top:clamp(24px,3vh,38px);}
.quiet-photo{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 34px 80px -20px rgba(0,0,0,0.66);
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity 1s ease,transform 1.1s cubic-bezier(.22,.7,.3,1);}
.in-view .quiet-photo{opacity:1;transform:none;}
.quiet-photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) contrast(1.04) brightness(.82);
  transform:scale(1.04);transition:transform 1.4s cubic-bezier(.22,.7,.3,1);}
.quiet-photo:hover img{transform:scale(1.08);}
/* tint it into the section's palette so it does not read as a stock photo drop-in */
.quiet-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,13,20,0.18) 0%,rgba(8,13,20,0.30) 46%,rgba(8,13,20,0.78) 100%),
             linear-gradient(120deg,rgba(224,123,46,0.18),rgba(224,123,46,0) 58%);}
.quiet-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;
  font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.86);font-weight:300;}
.quiet-cap b{display:block;color:#fff;font-weight:500;font-size:15px;margin-bottom:4px;letter-spacing:-0.02em;}
.quiet-grid .quiet-list{margin:0;max-width:none;}
.quiet-grid .quiet-p{margin:26px 0 0;text-align:left;}
.quiet-grid .quiet-tag{margin-top:22px;}
@media(max-width:880px){
  .quiet-grid{grid-template-columns:1fr;}
  .quiet-photo{aspect-ratio:16/10;}
}

/* ── supported institutions strip ──
   PLACEHOLDER MARKS ONLY. Bank logos are registered trademarks; swap these
   slots for approved artwork once permission is confirmed. Layout and copy
   are final so the real files can drop straight in. ── */
.banks{max-width:1180px;margin:0 auto;}
.banks-lead{text-align:center;font-size:clamp(15px,1.8vw,18px);line-height:1.6;color:var(--muted);
  font-weight:300;max-width:640px;margin:0 auto clamp(22px,3vh,32px);}
.banks-lead b{color:var(--ink);font-weight:500;}
.bank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(10px,1.5vw,16px);}
.bank{display:flex;align-items:center;justify-content:center;gap:10px;height:78px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(10,10,10,0.04);
  transition:box-shadow .3s,transform .3s,border-color .3s;}
.bank:hover{box-shadow:0 12px 30px rgba(10,10,10,0.07);transform:translateY(-2px);border-color:var(--blue-border);}
.bank-mark{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#E7EBF5,#D6DCEA);color:#7C879C;font-size:12px;font-weight:700;letter-spacing:-0.02em;}
.bank-name{font-size:13.5px;font-weight:500;letter-spacing:-0.02em;color:var(--muted);}
.banks-note{margin-top:clamp(18px,2.4vh,26px);text-align:center;font-size:12.5px;color:var(--sub);font-weight:300;}
.banks-note b{color:var(--muted);font-weight:500;}

/* ═══════════════════════════════════════════════════════════════
   WHERE THE MONEY ACTUALLY GOES
   A stacked flow bar instead of six lonely columns: proportional,
   legible at a glance, and it animates segment by segment while a
   running balance counts down beside it.
   ═══════════════════════════════════════════════════════════════ */
.flowcard{background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(22px,3vw,36px);
  box-shadow:0 2px 8px rgba(10,10,10,0.05);position:relative;overflow:hidden;}
.flowcard::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 90% -10%,rgba(224,123,46,0.06),rgba(224,123,46,0) 62%);}
.fc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(20px,2.6vh,30px);
  position:relative;z-index:1;flex-wrap:wrap;}
.fc-from .l,.fc-to .l{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin-bottom:8px;}
.fc-from .v{font-size:clamp(30px,4vw,46px);font-weight:200;letter-spacing:-0.05em;line-height:1;color:var(--muted);}
.fc-arrow{flex:1;min-width:60px;height:2px;position:relative;margin-bottom:14px;background:linear-gradient(90deg,var(--line),var(--blue-border));}
.fc-arrow::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%) rotate(45deg);
  width:7px;height:7px;border-top:2px solid var(--blue-border);border-right:2px solid var(--blue-border);}
.fc-arrow i{position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;background:var(--blue);
  transform:translateY(-50%);opacity:0;}
.in-view .fc-arrow i{animation:fcRun 2.6s cubic-bezier(.4,0,.5,1) 1.2s infinite;}
@keyframes fcRun{0%{left:0;opacity:0;}12%{opacity:1;}80%{opacity:1;}100%{left:100%;opacity:0;}}
.fc-to{text-align:right;}
.fc-to .v{font-size:clamp(34px,4.6vw,54px);font-weight:300;letter-spacing:-0.05em;line-height:1;color:#0F9D58;}
.fc-to .pct{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:700;color:#0F9D58;
  background:rgba(15,157,88,0.12);border-radius:999px;padding:5px 11px;letter-spacing:.02em;}

/* the bar itself */
.fc-bar{display:flex;height:clamp(46px,5.6vw,64px);border-radius:14px;overflow:hidden;background:rgba(10,10,10,0.05);
  position:relative;z-index:1;box-shadow:inset 0 1px 3px rgba(10,10,10,0.07);}
.fc-seg{width:0;position:relative;transition:width .85s cubic-bezier(.24,.8,.3,1);transition-delay:var(--d);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.in-view .fc-seg{width:var(--w);}
.fc-seg + .fc-seg{box-shadow:-1px 0 0 rgba(255,255,255,0.5);}
.fc-seg span{font-size:11px;font-weight:700;color:#fff;letter-spacing:-0.01em;white-space:nowrap;
  opacity:0;transition:opacity .4s ease;transition-delay:calc(var(--d) + .5s);text-shadow:0 1px 2px rgba(0,0,0,0.22);}
.in-view .fc-seg span{opacity:1;}
.fc-seg.fees {background:linear-gradient(180deg,#B9BFCC,#98A0B1);}
.fc-seg.stock{background:linear-gradient(180deg,#6E7789,#525B6D);}
.fc-seg.wages{background:linear-gradient(180deg,#8E96A6,#6E7789);}
.fc-seg.tax  {background:linear-gradient(180deg,#FFD27A,#E9A93B);}
.fc-seg.kept {background:linear-gradient(180deg,#6EE7B7,#0F9D58);box-shadow:0 0 22px rgba(15,157,88,0.34);}
/* a light sweep runs across the finished bar */
.fc-bar::after{content:'';position:absolute;top:0;bottom:0;width:26%;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.30) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-160%);}
.in-view .fc-bar::after{animation:fcSheen 4.4s ease-in-out 2s infinite;}
@keyframes fcSheen{0%{transform:translateX(-160%);}55%,100%{transform:translateX(430%);}}

/* the itemised list under the bar */
.fc-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:2px 18px;
  margin-top:clamp(18px,2.4vh,26px);position:relative;z-index:1;}
.fc-item{display:flex;align-items:center;gap:9px;padding:11px 0;border-top:1px solid var(--line);
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;transition-delay:var(--d);}
.in-view .fc-item{opacity:1;transform:none;}
.fc-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.fc-dot.fees{background:#98A0B1;} .fc-dot.stock{background:#525B6D;} .fc-dot.wages{background:#6E7789;}
.fc-dot.tax{background:#E9A93B;} .fc-dot.kept{background:#0F9D58;}
.fc-item-t{font-size:13px;color:var(--muted);font-weight:400;}
.fc-item-v{margin-left:auto;font-size:13px;font-weight:600;letter-spacing:-0.02em;}
.fc-item.is-kept .fc-item-t,.fc-item.is-kept .fc-item-v{color:#0F9D58;}
.fc-foot{margin-top:clamp(18px,2.4vh,26px);padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.65;color:var(--muted);font-weight:300;position:relative;z-index:1;}
.fc-foot b{color:var(--ink);font-weight:600;}

/* ═══════════════════════════════════════════════════════════════
   WHAT WE DO, as something you poke at rather than read
   Pick a question on the left, watch it answered on the phone.
   ═══════════════════════════════════════════════════════════════ */
.wwd{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr minmax(320px,450px);
  gap:clamp(28px,5vw,68px);align-items:center;}
/* the answer thread is free-floating message bubbles, not a phone */
.wwd-chat{width:100%;display:flex;flex-direction:column;gap:16px;}
.wwd-chat-head{display:flex;align-items:center;gap:11px;}
.wwd-thread{display:flex;flex-direction:column;gap:11px;align-items:flex-start;height:420px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;padding-right:8px;-webkit-overflow-scrolling:touch;}
.wwd-thread::-webkit-scrollbar{width:6px;}
.wwd-thread::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;}
.wwd-thread::-webkit-scrollbar-track{background:transparent;}
.wwd-thread .pf-msg{max-width:84%;font-size:14px;line-height:1.5;padding:12px 16px;border-radius:18px;}
.wwd-thread .pf-msg.me{border-bottom-right-radius:6px;}
.wwd-thread .pf-msg.k{border-bottom-left-radius:6px;box-shadow:0 8px 22px rgba(40,22,6,0.06);}
.wwd-thread .pf-card{align-self:flex-start;max-width:88%;border-radius:16px;padding:14px 15px;box-shadow:0 10px 26px rgba(40,22,6,0.08);}
.wwd-thread .pf-card-row{font-size:12.5px;}
@media(max-width:900px){.wwd-thread{align-items:stretch;height:auto;max-height:60vh;}}

/* ═══════════ HOME HERO — middleman message, text left / phone right ═══════════ */
.hh{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(24px,3.4vw,52px);align-items:center;}
.hh-copy{display:flex;flex-direction:column;gap:15px;align-items:flex-start;text-align:left;}
.hh .hero-eyebrow{margin-bottom:0;}
.hh .hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#FCC85F;display:inline-block;}
.hh-h{font-weight:200;letter-spacing:-0.052em;line-height:1.03;font-size:clamp(36px,4.1vw,56px);color:#FFF7EE;text-shadow:0 2px 44px rgba(0,0,0,0.45);}
.hh-h b{font-weight:650;color:#FCC85F;font-style:normal;text-shadow:0 2px 34px rgba(246,190,132,0.28);}
.hh-thesis{font-size:14px;color:rgba(255,247,238,0.7);font-weight:300;line-height:1.5;}
.hh-thesis b{color:#FFF7EE;font-weight:500;}
.hh-ow{display:flex;flex-direction:column;gap:7px;width:100%;max-width:440px;}
.hh-ow-item{display:flex;align-items:center;gap:11px;font-size:14px;color:rgba(255,247,238,0.5);font-weight:300;}
.hh-ow-x{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);display:grid;place-items:center;}
.hh-ow-x svg{width:10px;height:10px;stroke:rgba(255,180,150,0.85);fill:none;stroke-width:2.6;stroke-linecap:round;}
.hh-ow-item s{text-decoration-color:rgba(255,255,255,0.3);}
.hh-promise{width:100%;max-width:470px;background:linear-gradient(135deg,rgba(246,190,132,0.16),rgba(224,123,46,0.09));border:1px solid rgba(246,190,132,0.34);border-radius:16px;padding:15px 17px;display:flex;gap:12px;align-items:flex-start;}
.hh-promise-ic{flex:none;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#F0A45E,#DE7A2B);display:grid;place-items:center;}
.hh-promise-ic svg{width:14px;height:14px;stroke:#2A1508;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;}
.hh-promise p{font-size:14px;line-height:1.5;color:#FFF7EE;font-weight:300;}
.hh-promise b{font-weight:600;color:#FCC85F;}
.hh-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.hh-cta .btn-primary{animation:hhGlow 3.4s ease-in-out infinite;}
@keyframes hhGlow{0%,100%{box-shadow:0 14px 34px rgba(224,123,46,0.42);}50%{box-shadow:0 18px 46px rgba(224,123,46,0.62);}}
.hh-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:490px;}
.hh-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,247,238,0.82);font-weight:400;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);padding:8px 14px;border-radius:99px;}
.hh-chip svg{width:14px;height:14px;stroke:#6FD79F;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.hh-phonewrap{position:relative;display:flex;justify-content:center;}
.hh-phonewrap::before{content:'';position:absolute;width:120%;height:76%;left:-10%;top:12%;border-radius:50%;background:radial-gradient(circle,rgba(240,164,94,0.42) 0%,rgba(240,164,94,0) 66%);filter:blur(50px);z-index:0;}
.hh .iphone{width:290px;animation:hhTilt 9s ease-in-out infinite;}
.hh .iphone-screen{height:588px;}
.hh .iphone-gloss{opacity:.5;}
/* fixed tilt (no rotation wobble) + gentle float, and a flat perspective so the screen stays crisp at the angle */
/* front-facing (no 3D rotation) so the retina screen text stays razor sharp; gentle float only */
@keyframes hhTilt{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
/* entrance: base state is visible; keyframe supplies the fade-up */
.hh-in{animation:hhUp .8s cubic-bezier(.22,.7,.3,1) both;}
@keyframes hhUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
/* the "see everything" screen */
.hh-ov{flex:1;display:flex;flex-direction:column;min-height:0;background:#FBF7EE;}
.hh-ov-top{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 8px;}
.hh-ov-hi{font-size:14.5px;font-weight:650;letter-spacing:-0.02em;color:#1A140D;}
.hh-ov-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:#1F7A4C;background:rgba(46,158,99,0.12);padding:5px 9px;border-radius:99px;}
.hh-ov-live i{width:5px;height:5px;border-radius:50%;background:#2E9E63;animation:hhBlink 1.8s ease-in-out infinite;}
@keyframes hhBlink{0%,100%{opacity:1;}50%{opacity:.35;}}
.hh-ov-cards{flex:1;min-height:0;padding:4px 13px;display:flex;flex-direction:column;gap:9px;}
.hh-ov-card{background:#fff;border:1px solid #E7DECC;border-radius:15px;padding:12px 13px;}
.hh-ov-cl{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:#5C5346;margin-bottom:7px;}
.hh-ov-ic{width:20px;height:20px;border-radius:6px;background:rgba(224,123,46,0.1);display:grid;place-items:center;}
.hh-ov-ic svg{width:12px;height:12px;stroke:#DE7A2B;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hh-ov-chip{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#1F7A4C;background:rgba(46,158,99,0.1);padding:3px 7px;border-radius:99px;}
.hh-ov-big{display:flex;align-items:baseline;gap:7px;}
.hh-ov-big .count{font-size:26px;font-weight:600;letter-spacing:-0.04em;color:#1A140D;line-height:1;}
.hh-ov-dollar{font-size:19px;font-weight:600;color:#1A140D;}
.hh-ov-k{font-size:26px;font-weight:600;letter-spacing:-0.04em;color:#1A140D;}
.hh-ov-unit{font-size:11px;color:#8A7A62;font-weight:400;}
.hh-ov-bar{height:7px;border-radius:99px;background:#EFE7D8;overflow:hidden;margin-top:9px;}
.hh-ov-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#F0A45E,#DE7A2B);width:0;animation:hhFill 1.2s cubic-bezier(.22,.8,.3,1) forwards .2s;}
.hh-ov-bar i.grn{background:linear-gradient(90deg,#5CC98D,#2E9E63);}
@keyframes hhFill{to{width:var(--w);}}
.hh-ov-mini{font-size:9.5px;color:#A2988A;font-weight:300;margin-top:6px;}
.hh-ov-spark{width:100%;height:34px;margin-top:6px;display:block;}
.hh-ov-spark path.area{fill:url(#hhg);opacity:.9;}
.hh-ov-spark path.line{fill:none;stroke:#DE7A2B;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;animation:hhDraw 1.5s ease forwards .3s;}
@keyframes hhDraw{to{stroke-dashoffset:0;}}
.hh-ov-foot{padding:9px 16px 13px;font-size:10px;color:#A2988A;font-weight:300;text-align:center;border-top:1px solid #F0E9DA;}
@media(prefers-reduced-motion:reduce){.hh .iphone,.hh-cta .btn-primary,.hh-in,.hh-ov-bar i,.hh-ov-spark path.line{animation:none;}}
@media(max-width:940px){
  /* keep the phone beside the text, just tighter and with a compact device */
  .hh{grid-template-columns:1.06fr 0.94fr;gap:clamp(16px,3.5vw,42px);align-items:center;}
  .hh-copy{align-items:flex-start;text-align:left;gap:13px;}
  .hh-chips{justify-content:flex-start;}
  .hh .iphone{width:100%;max-width:280px;animation:hhFloatUp 7s ease-in-out infinite;}
  .hh .iphone-screen{height:auto;aspect-ratio:250/510;}
}
@keyframes hhFloatUp{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
/* true phones: stack cleanly, phone tucked right under the headline (side-by-side is too cramped here) */
@media(max-width:600px){
  .hh{display:flex;flex-direction:column;align-items:stretch;gap:16px;}
  .hh-copy{display:contents;}
  .hh .hero-eyebrow{order:1;align-self:flex-start;}
  .hh-h{order:2;font-size:clamp(31px,10vw,44px);}
  .hh-phonewrap{order:3;margin:2px auto 6px;}
  .hh-thesis{order:4;font-size:14px;line-height:1.5;}
  .hh-promise{order:5;padding:14px 15px;}
  .hh-promise p{font-size:13.5px;line-height:1.5;}
  .hh-cta{order:6;flex-direction:column;align-items:stretch;gap:9px;}
  .hh-cta .btn-primary,.hh-cta .btn-ghost{width:100%;text-align:center;justify-content:center;}
  .hh-chips{order:7;}
  .hh-phone-in{animation:none;}
  .hh .iphone{width:clamp(232px,64vw,272px);max-width:none;}
  .hh .iphone-screen{height:auto;aspect-ratio:250/520;}
  .hero.hero--aurora.hero--light{padding-left:clamp(16px,5vw,22px);padding-right:clamp(16px,5vw,22px);}
}

/* ── hero phone: live Kapio chat + a livelier "coming in" entrance ── */
.hh-thesis{font-size:16px;color:rgba(255,247,238,0.9);}
.hh-phonewrap{perspective:1600px;}
.hh-phone-in{animation:hhPhoneIn 1.15s cubic-bezier(.2,.75,.25,1) .18s both;}
@keyframes hhPhoneIn{from{opacity:0;transform:translateX(78px) translateY(16px) scale(.9) rotate(2.5deg);}to{opacity:1;transform:none;}}
.hh .iphone{animation:hhTilt 7.5s ease-in-out infinite;}
@keyframes hhTilt{0%,100%{transform:translateY(0);}50%{transform:translateY(-18px);}}
.hh-chat{flex:1;display:flex;flex-direction:column;min-height:0;background:#FBF7EE;}
.hh-chat-head{display:flex;align-items:center;gap:9px;padding:11px 15px 9px;border-bottom:1px solid #F0E9DA;}
.hh-chat-av{width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,#FBAA1B,#DC6E12);display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;}
.hh-chat-name{font-size:13.5px;font-weight:650;color:#1A140D;letter-spacing:-0.02em;}
.hh-chat-stat{font-size:10px;color:#DE7A2B;font-weight:500;display:flex;align-items:center;gap:5px;}
.hh-chat-stat i{width:5px;height:5px;border-radius:50%;background:#DE7A2B;animation:hhBlink 1.6s ease-in-out infinite;}
.hh-chat-body{flex:1;min-height:0;padding:16px 13px 8px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;overflow:hidden;}
.hh-cmsg{max-width:86%;font-size:12.8px;line-height:1.45;padding:10px 13px;border-radius:15px;animation:hhPop .4s cubic-bezier(.22,.8,.3,1) both;}
.hh-cmsg.me{align-self:flex-end;background:linear-gradient(135deg,#F0A45E,#DE7A2B);color:#fff;border-bottom-right-radius:5px;}
.hh-cmsg.k{align-self:flex-start;background:#F1EADC;color:#241C12;border-bottom-left-radius:5px;font-weight:300;}
.hh-cmsg.k b{font-weight:650;color:#1A140D;}
@keyframes hhPop{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
.hh-ctyping{align-self:flex-start;display:flex;gap:4px;background:#F1EADC;padding:12px 13px;border-radius:15px;border-bottom-left-radius:5px;}
.hh-ctyping i{width:6px;height:6px;border-radius:50%;background:#B8A88E;animation:hhDot 1.3s infinite;}
.hh-ctyping i:nth-child(2){animation-delay:.18s;}.hh-ctyping i:nth-child(3){animation-delay:.36s;}
@keyframes hhDot{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-4px);}}
.hh-ccard{align-self:stretch;background:#fff;border:1px solid #E7DECC;border-radius:13px;padding:11px 12px;animation:hhPop .5s both;}
.hh-ccard-h{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#A2988A;margin-bottom:8px;}
.hh-ccard-row{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-bottom:6px;color:#5C5346;}
.hh-ccard-row:last-child{margin-bottom:0;}
.hh-ccard-bar{flex:1;height:6px;border-radius:4px;background:#EFE7D8;overflow:hidden;}
.hh-ccard-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#F0A45E,#DE7A2B);width:0;animation:hhFill 1s cubic-bezier(.22,.8,.3,1) forwards .1s;}
.hh-ccard-bar i.grn{background:linear-gradient(90deg,#5CC98D,#2E9E63);}
.hh-ccard-row b{font-weight:650;color:#1A140D;min-width:46px;text-align:right;}
.hh-chat-bar{margin:0 13px 13px;background:#fff;border:1px solid #E7DECC;border-radius:99px;padding:9px 14px;font-size:11.5px;color:#A2988A;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.hh-chat-send{flex:none;width:23px;height:23px;border-radius:50%;background:linear-gradient(135deg,#F0A45E,#DE7A2B);display:grid;place-items:center;}
.hh-chat-send svg{width:12px;height:12px;stroke:#fff;}
@media(prefers-reduced-motion:reduce){.hh-phone-in,.hh-cmsg,.hh-ccard,.hh-ccard-bar i,.hh-chat-stat i{animation:none;}}

/* ── showcase phone: white, premium, angled iPhone-17-Pro credit summary ── */
.sc-side-phone{perspective:1500px;}
.sc-side-phone .pf{max-width:248px;}
.sc-side-phone .pf-screen{height:500px;background:linear-gradient(180deg,#FFFFFF 0%,#FBF6EC 100%);}
.scp-phone{animation:scpTilt 8s ease-in-out infinite;box-shadow:0 40px 74px -30px rgba(70,40,12,0.5),0 16px 34px -18px rgba(70,40,12,0.32);}
@keyframes scpTilt{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.scp{flex:1;display:flex;flex-direction:column;min-height:0;padding:30px 15px 15px;gap:12px;color:#1A140D;}
.scp-head{display:flex;align-items:flex-start;justify-content:space-between;}
.scp-eyebrow{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#A2988A;}
.scp-title{font-size:15px;font-weight:600;letter-spacing:-0.025em;color:#1A140D;margin-top:2px;}
.scp-live{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;color:#1F7A4C;background:rgba(46,158,99,0.12);padding:4px 8px;border-radius:99px;}
.scp-live i{width:5px;height:5px;border-radius:50%;background:#2E9E63;animation:hhBlink 1.6s ease-in-out infinite;}
.scp-gauge{position:relative;width:124px;height:124px;margin:0 auto;}
.scp-ring{width:100%;height:100%;transform:rotate(-90deg);}
.scp-ring-t{fill:none;stroke:rgba(26,20,13,0.08);stroke-width:8;}
.scp-ring-a{fill:none;stroke:url(#scpArc);stroke-width:8;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:scpArc 1.7s cubic-bezier(.3,.85,.3,1) forwards .35s;filter:drop-shadow(0 1px 4px rgba(224,123,46,0.4));}
@keyframes scpArc{to{stroke-dashoffset:18;}}
.scp-gauge-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.scp-gtop{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#A2988A;font-weight:700;margin-bottom:1px;}
.scp-gnum{font-size:37px;font-weight:300;letter-spacing:-0.05em;line-height:1;color:#1A140D;}
.scp-glbl{font-size:8.5px;letter-spacing:.08em;color:#1F7A4C;margin-top:3px;text-transform:uppercase;font-weight:700;}
.scp-rows{display:flex;flex-direction:column;gap:8px;}
.scp-stat{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #EAE1D0;border-radius:12px;padding:10px 12px;font-size:11.5px;color:#5C5346;box-shadow:0 6px 16px rgba(40,22,6,0.05);}
.scp-dot{width:7px;height:7px;border-radius:50%;background:#F58220;flex:none;}
.scp-dot.grn{background:#2E9E63;}
.scp-stat-l{flex:1;}
.scp-stat b{font-weight:650;color:#1A140D;font-size:13px;}
.scp-stat b.up{color:#1F7A4C;}
.scp-chat{margin-top:4px;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden;}
.scp-b{max-width:88%;font-size:11px;line-height:1.4;padding:8px 11px;border-radius:13px;animation:hhPop .4s cubic-bezier(.22,.8,.3,1) both;}
.scp-b.me{align-self:flex-end;background:linear-gradient(135deg,#F0A45E,#DE7A2B);color:#fff;border-bottom-right-radius:4px;}
.scp-b.k{align-self:flex-start;background:#F1EADC;border:1px solid #EAE1D0;color:#241C12;border-bottom-left-radius:4px;}
.scp-b.k b{color:#DC6E12;font-weight:650;}
.scp-typing{align-self:flex-start;display:flex;gap:3px;background:#F1EADC;border:1px solid #EAE1D0;padding:9px 11px;border-radius:13px;border-bottom-left-radius:4px;}
.scp-typing i{width:5px;height:5px;border-radius:50%;background:#B8A88E;animation:hhDot 1.3s infinite;}
.scp-typing i:nth-child(2){animation-delay:.18s;}.scp-typing i:nth-child(3){animation-delay:.36s;}
@media(prefers-reduced-motion:reduce){.scp-phone{animation:none;transform:none;}.scp-b{animation:none;}.scp-ring-a{animation:none;stroke-dashoffset:18;}}
.wwd-lead{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin-bottom:16px;}
.wwd-qs{display:flex;flex-direction:column;gap:9px;}
.wwd-q{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:15px;padding:15px 17px;font-family:inherit;font-size:15px;font-weight:400;letter-spacing:-0.015em;
  color:var(--ink);cursor:pointer;box-shadow:0 1px 3px rgba(10,10,10,0.04);
  transition:border-color .22s,box-shadow .22s,transform .22s,background .22s;}
.wwd-q:hover{border-color:var(--blue-border);box-shadow:0 10px 26px rgba(224,123,46,0.09);transform:translateX(3px);}
.wwd-q.on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 14px 32px rgba(10,10,10,0.20);}
.wwd-q-ic{width:32px;height:32px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--blue-dim);color:var(--blue);transition:background .22s,color .22s;}
.wwd-q.on .wwd-q-ic{background:rgba(246,190,132,0.18);color:#FCC85F;}
.wwd-q-ic svg{width:16px;height:16px;}
.wwd-q-go{margin-left:auto;font-size:16px;color:var(--sub);opacity:0;transform:translateX(-4px);
  transition:opacity .22s,transform .22s;}
.wwd-q:hover .wwd-q-go,.wwd-q.on .wwd-q-go{opacity:1;transform:none;}
.wwd-q.on .wwd-q-go{color:#FCC85F;}
.wwd-hint{margin-top:16px;font-size:12.5px;color:var(--sub);font-weight:300;display:flex;align-items:center;gap:8px;}
.wwd-hint i{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pfPing 2s ease-out infinite;}
.wwd-stage{display:flex;justify-content:center;}
.wwd-stage .pf{animation:pfFloat 9s ease-in-out infinite;}
@media(max-width:900px){
  .wwd{grid-template-columns:1fr;gap:22px;}
  .wwd-stage{order:0;}                 /* mobile: tap a question first, watch the answer below */
  .wwd-thread{min-height:0;}
}
/* ── mobile spacing: tighten the tall vertical padding so sections don't leave big empty gaps ── */
@media(max-width:640px){
  .section,.everyday,.statement--img,.always,.loans,.who,.pull,.quiet,.bento{
    padding-top:clamp(32px,7vw,52px);padding-bottom:clamp(32px,7vw,52px);
  }
  .final{padding-top:clamp(46px,12vw,78px);padding-bottom:clamp(46px,12vw,78px);}   /* was ~114px each */
  .hero{padding-bottom:clamp(30px,7vw,54px);}
  .accred{padding-top:clamp(30px,7vw,48px);padding-bottom:clamp(34px,8vw,56px);}
  .sec-head{margin-bottom:24px;}
  .statement--img{gap:clamp(18px,5vw,30px);}
}

/* ═══════════════════════════════════════════════════════════════
   WHY KAPIO
   Personal, image led, and something to press.
   ═══════════════════════════════════════════════════════════════ */
.whyhero{position:relative;padding:clamp(112px,14vh,150px) clamp(20px,5vw,56px) clamp(40px,6vh,72px);
  background:linear-gradient(180deg,#FCFCFA 0%,var(--bg) 68%);overflow:hidden;}
.whyhero-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr 0.95fr;
  gap:clamp(28px,5vw,68px);align-items:center;}
.whyhero-h{font-size:clamp(34px,4.8vw,62px);font-weight:200;line-height:1.05;letter-spacing:-0.05em;margin:14px 0 20px;}
.whyhero-h em{font-style:normal;color:var(--blue);font-weight:400;}
.whyhero-sub{font-size:clamp(15px,1.9vw,19px);line-height:1.65;font-weight:300;color:var(--muted);max-width:52ch;}
.whyhero-sig{margin-top:26px;display:flex;align-items:center;gap:13px;}
.whyhero-sig i{width:38px;height:1px;background:var(--line);}
.whyhero-sig span{font-size:12.5px;color:var(--sub);font-weight:400;}
.whyhero-art{position:relative;}
.whyhero-art img{width:100%;border-radius:26px;display:block;box-shadow:0 34px 76px -22px rgba(10,14,24,0.4);}
.whyhero-note{position:absolute;left:-22px;bottom:26px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:14px 17px;max-width:250px;box-shadow:0 18px 42px rgba(10,10,10,0.14);}
.whyhero-note b{display:block;font-size:14px;font-weight:600;letter-spacing:-0.02em;margin-bottom:4px;}
.whyhero-note span{font-size:12.5px;line-height:1.5;color:var(--muted);font-weight:300;}
@media(max-width:920px){.whyhero-inner{grid-template-columns:1fr;}.whyhero-note{left:14px;}}

/* before and after, as a thing you flip */
.flip{max-width:1080px;margin:0 auto;}
.flip-switch{display:inline-flex;gap:3px;background:rgba(10,10,10,0.05);border-radius:999px;padding:4px;margin:0 auto clamp(24px,3vh,34px);
  position:relative;left:50%;transform:translateX(-50%);}
.flip-switch button{border:none;background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);
  padding:11px 22px;border-radius:999px;cursor:pointer;transition:.25s;}
.flip-switch button.on{background:var(--ink);color:#fff;box-shadow:0 4px 14px rgba(10,10,10,0.18);}
.flip-panel{display:grid;grid-template-columns:0.9fr 1fr;gap:clamp(24px,4vw,52px);align-items:center;}
.flip-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/1;background:var(--bg2);}
.flip-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .7s ease,transform 1.2s cubic-bezier(.22,.7,.3,1);transform:scale(1.06);}
.flip-photo img.on{opacity:1;transform:scale(1);}
.flip-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,13,20,0) 40%,rgba(8,13,20,0.55) 100%);}
.flip-side{position:relative;}
.flip-state{display:none;}
.flip-state.on{display:block;animation:scIn .5s cubic-bezier(.22,.7,.3,1);}
.flip-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;}
.flip-state.before .flip-eyebrow{color:#C0442A;}
.flip-state.after .flip-eyebrow{color:#0F9D58;}
.flip-h{font-size:clamp(22px,2.8vw,32px);font-weight:300;letter-spacing:-0.04em;line-height:1.2;margin-bottom:18px;}
.flip-list{list-style:none;display:flex;flex-direction:column;gap:1px;}
.flip-list li{font-size:15px;line-height:1.55;font-weight:300;color:var(--muted);padding:13px 0 13px 28px;
  border-bottom:1px solid var(--line);position:relative;}
.flip-list li::before{content:'';position:absolute;left:2px;top:21px;width:11px;height:1px;background:var(--line);}
.flip-state.after .flip-list li{color:var(--ink);}
.flip-state.after .flip-list li::before{background:#0F9D58;height:2px;}
@media(max-width:860px){.flip-panel{grid-template-columns:1fr;}}

/* which one are you */
.who-picker{max-width:1080px;margin:0 auto;}
.wp-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:clamp(22px,3vh,32px);}
.wp-tab{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 20px;font-family:inherit;
  font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;transition:.2s;}
.wp-tab:hover{border-color:var(--blue-border);color:var(--ink);}
.wp-tab.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(224,123,46,0.26);}
.wp-panel{display:none;grid-template-columns:0.85fr 1fr;gap:clamp(22px,4vw,48px);align-items:center;}
.wp-panel.on{display:grid;animation:scIn .5s cubic-bezier(.22,.7,.3,1);}
.wp-img{border-radius:22px;overflow:hidden;aspect-ratio:4/3;position:relative;}
.wp-img img{width:100%;height:100%;object-fit:cover;display:block;}
.wp-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,13,20,0.06),rgba(8,13,20,0.42));}
.wp-worry{font-size:clamp(19px,2.4vw,26px);font-weight:300;line-height:1.35;letter-spacing:-0.03em;margin-bottom:16px;}
.wp-worry em{font-style:normal;color:var(--blue);}
.wp-ans{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;box-shadow:0 2px 8px rgba(10,10,10,0.04);}
.wp-ans-av{width:30px;height:30px;border-radius:10px;flex-shrink:0;background:linear-gradient(140deg,#FBAA1B,#DC6E12);
  color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.wp-ans-t{font-size:14.5px;line-height:1.6;color:var(--muted);font-weight:300;}
.wp-ans-t b{color:var(--ink);font-weight:600;}
@media(max-width:860px){.wp-panel.on{grid-template-columns:1fr;}}

/* ── rebrand logo lockup: gradient mark + KAPIO wordmark ── */
.nav-logo-pill,.foot-logo,.brandlock{text-decoration:none;color:var(--ink);}
.brandlock{display:inline-flex;align-items:center;gap:0;line-height:1;}
.brand-logo{height:21px;width:auto;display:block;}
.foot .brandlock .brand-logo{height:22px;}
.foot-logo{height:auto;}

/* ═══════════════════════════════════════════════════════════════
   AURORA HERO  (graphic alternative to the ocean, ?hero=aurora)
   A dark warm stage with drifting brand-gradient blooms, a pulsing
   core glow, flowing signal lines and grain. All transform/opacity,
   so it is far cheaper than the ocean displacement filter.
   ═══════════════════════════════════════════════════════════════ */
.hero-aurora{display:none;}
.hero--aurora .hero-aurora{display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;}
.hero--aurora .hero-bg,.hero--aurora .hero-shimmer,.hero--aurora .hero-glints{display:none;}
.hero--aurora{background:radial-gradient(120% 120% at 74% 28%,#4A3417 0%,#372610 52%,#20150A 100%);}
/* keep the left copy column readable: darken behind the text, light stays behind the phone */
.hero--aurora .hero-aurora::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(18,12,6,0.64) 0%,rgba(18,12,6,0.2) 44%,rgba(18,12,6,0) 64%);}

/* ── LIGHT hero variant: warm branded mesh gradient, dark high-contrast text ── */
.hero--light{background:
  radial-gradient(50% 46% at 14% 84%, rgba(231,80,24,0.40), transparent 60%),
  radial-gradient(58% 54% at 48% 60%, rgba(246,156,54,0.46), transparent 62%),
  radial-gradient(44% 42% at 66% 92%, rgba(250,206,112,0.46), transparent 62%),
  radial-gradient(76% 70% at 82% 24%, rgba(250,198,102,0.66), transparent 66%),
  radial-gradient(50% 48% at 22% 15%, rgba(255,249,235,0.9), transparent 56%),
  linear-gradient(150deg,#FEF7EB 0%,#FBEBCF 56%,#F3DEBA 100%);}
.hero--light .au-bloom,.hero--light .au-glow{display:none;}
.hero--light .hero-aurora::after{display:none;}
.hero--light .hh .hero-eyebrow{color:#6A2C06;background:rgba(255,255,255,0.92);border-color:rgba(224,123,46,0.55);}
.hero--light .hh .hero-eyebrow .dot{background:#DE7A2B;}
.hero--light .hh-h{color:#160F08;text-shadow:none;}
.hero--light .hh-h b{color:var(--blue-dark);text-shadow:none;}
.hero--light .hh-thesis{color:#43301E;}
.hero--light .hh-thesis b{color:#160F08;}
.hero--light .hh-ow-item{color:rgba(52,37,20,0.68);}
.hero--light .hh-ow-x{background:rgba(26,20,13,0.06);border-color:rgba(26,20,13,0.14);}
.hero--light .hh-ow-x svg{stroke:#B23A18;}
.hero--light .hh-promise{background:rgba(255,255,255,0.55);border-color:rgba(224,123,46,0.4);}
.hero--light .hh-promise p{color:#2C2013;}
.hero--light .hh-promise b{color:var(--blue-deep);}
.hero--light .hh-chip{background:rgba(255,255,255,0.85);border-color:rgba(26,20,13,0.12);color:#43301E;}
.hero--light .hh-chip svg{stroke:#2E9E63;}
.hero--light .hh .btn-ghost{color:#160F08;font-weight:600;border-color:rgba(26,20,13,0.2);background:rgba(255,255,255,0.92);}
/* warm shadow via box-shadow (NOT filter): filter rasterises the phone's content and blurs the screen text under the 3D tilt */
.hero--light .hh .iphone{filter:none;box-shadow:0 38px 72px -30px rgba(120,66,18,0.5),0 16px 34px -18px rgba(120,66,18,0.34);}

.au-bloom{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;will-change:transform;opacity:.5;}
.hero--aurora .au-lines{display:none;}  /* remove the busy background waves */
.au1{width:640px;height:640px;top:-180px;left:6%;
  background:radial-gradient(circle,rgba(224,123,46,0.95),rgba(224,123,46,0) 68%);animation:auDrift1 26s ease-in-out infinite;}
.au2{width:560px;height:560px;top:8%;right:2%;
  background:radial-gradient(circle,rgba(242,162,76,0.85),rgba(242,162,76,0) 68%);animation:auDrift2 31s ease-in-out infinite;}
.au3{width:520px;height:520px;bottom:-160px;left:34%;
  background:radial-gradient(circle,rgba(194,94,26,0.9),rgba(194,94,26,0) 66%);animation:auDrift3 34s ease-in-out infinite;}
.au4{width:420px;height:420px;bottom:6%;right:22%;
  background:radial-gradient(circle,rgba(246,190,132,0.7),rgba(246,190,132,0) 70%);animation:auDrift1 29s ease-in-out infinite reverse;}
@keyframes auDrift1{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(6%,5%,0) scale(1.14);}}
@keyframes auDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.05);}50%{transform:translate3d(-7%,4%,0) scale(0.9);}}
@keyframes auDrift3{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(4%,-6%,0) scale(1.12);}}

/* core glow sitting behind the phone */
.au-glow{position:absolute;left:50%;top:52%;width:min(760px,86vw);height:min(760px,86vw);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(240,160,74,0.34) 0%,rgba(224,123,46,0.10) 40%,rgba(224,123,46,0) 66%);
  animation:auPulse 8s ease-in-out infinite;}
@keyframes auPulse{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08);}}

/* flowing signal lines */
.au-lines{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.5;}
.au-lines path{fill:none;stroke:url(#auGrad);stroke-width:1.4;will-change:transform;}
.au-lines .l1{animation:auRoll 30s linear infinite;}
.au-lines .l2{animation:auRoll 40s linear infinite reverse;}
.au-lines .l3{animation:auRoll 24s linear infinite;}
.au-lines .l4{animation:auRoll 46s linear infinite reverse;}
.au-lines .l5{animation:auRoll 36s linear infinite;}
@keyframes auRoll{from{transform:translateX(0);}to{transform:translateX(-360px);}}

/* grain */
.au-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px,transparent 1px);background-size:3px 3px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000,transparent 78%);
          mask-image:radial-gradient(120% 100% at 50% 40%,#000,transparent 78%);}

/* aurora shares the photo hero's light-on-dark text treatment */
.hero--aurora .hero-eyebrow{color:#FBD9AE;background:rgba(246,190,132,0.15);border:1px solid rgba(246,190,132,0.36);
  padding:7px 14px;border-radius:99px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;}
.hero--aurora .hero-word{color:rgba(255,250,242,0.95);text-shadow:0 2px 40px rgba(40,20,4,0.55);}
.hero--aurora .hero-word b{color:#fff;}
.hero--aurora .hero-h{color:rgba(255,247,238,0.92);text-shadow:0 2px 40px rgba(0,0,0,0.5);}
.hero--aurora .hero-h b{color:#fff;}
.hero--aurora .hero-sub{color:rgba(255,247,238,0.82);}
.hero--aurora .hero-trust{color:rgba(255,247,238,0.78);}
.hero--aurora .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.34);}
.hero--aurora .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,0.10);}
@media(prefers-reduced-motion:reduce){
  .au-bloom,.au-glow,.au-lines path{animation:none!important;}}

/* ── aurora: plant the phone in the scene ── */
.hero--aurora .iphone{
  /* drop-shadow follows the tilted rounded silhouette, so it reads as cast on a surface */
  filter:drop-shadow(0 46px 46px rgba(0,0,0,0.62)) drop-shadow(0 8px 16px rgba(0,0,0,0.4));}
/* warm ambient bounce on the leading edge, as if lit by the glow around it */
.hero--aurora .iphone::before{
  content:'';position:absolute;left:-6%;right:-6%;bottom:-46px;height:64px;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 100% at 46% 0%,rgba(0,0,0,0.6),rgba(0,0,0,0) 74%);filter:blur(14px);}
/* the screen glass catches the orange environment instead of reading as flat white */
.hero--aurora .iphone-gloss{
  background:linear-gradient(122deg,
    rgba(255,222,180,0.30) 0%,rgba(255,200,140,0.10) 24%,rgba(255,255,255,0) 46%,
    rgba(255,255,255,0) 66%,rgba(240,160,90,0.12) 86%,rgba(240,160,90,0.26) 100%);}
/* a soft warm rim where the device meets the light */
.hero--aurora .iphone-screen{
  box-shadow:0 0 0 1.5px rgba(12,14,20,0.92),0 0 0 3px rgba(255,190,120,0.22),0 2px 10px rgba(0,0,0,0.3) inset;}

/* ── statement with an emotional image alongside ── */
.statement--img{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:0.92fr 1.08fr;
  gap:clamp(30px,5vw,66px);align-items:center;text-align:left;padding:clamp(48px,7vh,92px) clamp(20px,5vw,56px);}
.statement--img .st-photo{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 34px 76px -22px rgba(40,18,4,0.34);
  opacity:0;transform:translateY(26px) scale(.97);transition:opacity 1s ease,transform 1.1s cubic-bezier(.22,.7,.3,1);}
.statement--img.in-view .st-photo{opacity:1;transform:none;}
.statement--img .st-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.4s cubic-bezier(.22,.7,.3,1);}
.statement--img .st-photo:hover img{transform:scale(1.08);}
.statement--img .st-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(224,123,46,0.10),rgba(40,18,4,0) 46%),
             linear-gradient(0deg,rgba(40,18,4,0.32),rgba(40,18,4,0) 44%);}
.statement--img .st-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff;
  font-size:14px;line-height:1.5;font-weight:300;text-shadow:0 1px 12px rgba(0,0,0,0.4);}
.statement--img .st-cap b{display:block;font-weight:600;font-size:16px;margin-bottom:4px;letter-spacing:-0.02em;}
.statement--img h2{font-size:clamp(30px,4.4vw,52px);font-weight:200;line-height:1.08;letter-spacing:-0.045em;margin-bottom:18px;}
.statement--img h2 em{font-style:normal;color:var(--blue);font-weight:400;}
.statement--img > div > p{font-size:clamp(15px,1.8vw,18px);line-height:1.65;color:var(--muted);font-weight:300;}
.statement--img .ladder{justify-content:flex-start;margin-top:26px;}
@media(max-width:880px){.statement--img{grid-template-columns:1fr;}.statement--img .st-photo{aspect-ratio:16/11;}}

/* ═══════════════════════════════════════════════════════════════
   PHONE STEPPER  (reusable: steps on one side, a glass phone that
   advances through matching screens on the other). Auto-plays and
   is clickable. Used on Cash flow, Capital, Kapio.
   ═══════════════════════════════════════════════════════════════ */
.stepper{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 322px;
  gap:clamp(30px,5vw,72px);align-items:center;}
.stepper.flip{grid-template-columns:322px 1fr;}
.stepper.flip .step-stage{order:-1;}
.step-list{display:flex;flex-direction:column;gap:11px;position:relative;padding-left:26px;}
.step-list::before{content:'';position:absolute;left:8px;top:16px;bottom:16px;width:2px;background:var(--line);}
.step-list::after{content:'';position:absolute;left:8px;top:16px;width:2px;height:0;
  background:linear-gradient(180deg,var(--blue),#FCC85F);transition:height .6s cubic-bezier(.4,0,.4,1);}
.step-list[data-progress="0"]::after{height:0;}
.step-list[data-progress="1"]::after{height:calc(50% - 16px);}
.step-list[data-progress="2"]::after{height:calc(100% - 32px);}
.step-item{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .3s;}
.step-item:hover{border-color:var(--blue-border);transform:translateX(2px);}
.step-item.on{border-color:var(--blue-border);box-shadow:0 14px 34px rgba(224,123,46,0.12);}
.step-node{position:absolute;left:-26px;top:19px;width:18px;height:18px;border-radius:50%;background:var(--bg);
  border:2px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.3s;}
.step-item.on .step-node{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 5px rgba(224,123,46,0.14);}
.step-item.on .step-node::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff;}
.step-k{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin-bottom:5px;transition:color .3s;}
.step-item.on .step-k{color:var(--blue);}
.step-h{font-size:clamp(16px,2vw,19px);font-weight:500;letter-spacing:-0.025em;margin-bottom:5px;}
.step-p{font-size:13.5px;line-height:1.55;color:var(--muted);font-weight:300;}
.step-stage{display:flex;justify-content:center;}
.step-stage .pf{animation:pfFloat 9s ease-in-out infinite;}
.step-screen{display:none;flex-direction:column;flex:1;min-height:0;}
.step-screen.on{display:flex;animation:scIn .55s cubic-bezier(.22,.7,.3,1);}
@media(max-width:900px){.stepper,.stepper.flip{grid-template-columns:1fr;}.stepper.flip .step-stage,.step-stage{order:-1;}}

/* ── generic phone signup / onboarding screen bits ── */
.ph-pad{padding:8px 17px 16px;flex:1;display:flex;flex-direction:column;gap:11px;min-height:0;}
.ph-lead{font-size:15px;font-weight:600;letter-spacing:-0.025em;margin-bottom:2px;}
.ph-lead small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:3px;letter-spacing:0;}
.ph-field{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:3px;}
.ph-field.focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(224,123,46,0.12);}
.ph-field .lab{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);}
.ph-field .val{font-size:13px;font-weight:500;color:var(--ink);min-height:16px;}
.ph-field .val .cur{display:inline-block;width:1.5px;height:13px;background:var(--blue);vertical-align:-2px;animation:pfCaret 1s step-end infinite;}
.ph-cta{margin-top:auto;background:var(--blue);color:#fff;border-radius:12px;padding:13px;text-align:center;
  font-size:13.5px;font-weight:600;box-shadow:0 8px 20px rgba(224,123,46,0.26);}
.ph-cta.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none;}
.ph-secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10.5px;color:var(--sub);font-weight:400;}
.ph-secure svg{width:12px;height:12px;color:#0F9D58;}
/* bank pick row */
.ph-bank{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 12px;transition:.3s;}
.ph-bank.sel{border-color:var(--blue);box-shadow:0 0 0 3px rgba(224,123,46,0.12);}
.ph-bank-ic{width:26px;height:26px;border-radius:8px;flex-shrink:0;background:var(--blue-dim);color:var(--blue);display:flex;align-items:center;justify-content:center;}
.ph-bank-ic svg{width:13px;height:13px;}
.ph-bank .nm{font-size:12px;font-weight:500;}
.ph-bank .tk{margin-left:auto;width:16px;height:16px;border-radius:50%;background:var(--blue);display:none;align-items:center;justify-content:center;}
.ph-bank.sel .tk{display:flex;}
.ph-bank .tk svg{width:9px;height:9px;stroke:#fff;stroke-width:3.4;}
/* mapping / working state */
.ph-map{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center;}
.ph-map-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  opacity:0;transform:translateY(8px);animation:pfMsgIn .5s ease forwards;}
.ph-map-row .mi{width:22px;height:22px;border-radius:7px;background:rgba(15,157,88,0.13);color:#0F9D58;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ph-map-row .mi svg{width:12px;height:12px;stroke-width:3;}
.ph-map-row .mt{font-size:12px;font-weight:500;}
.ph-map-row .mv{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:300;}
.ph-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:10px;}
.ph-done-ring{width:60px;height:60px;border-radius:50%;background:rgba(15,157,88,0.12);color:#0F9D58;display:flex;align-items:center;justify-content:center;
  animation:csPop .6s cubic-bezier(.3,1.6,.5,1) both;}
.ph-done-ring svg{width:30px;height:30px;stroke-width:2.6;}
.ph-done b{font-size:16px;font-weight:600;letter-spacing:-0.02em;}
.ph-done span{font-size:12px;color:var(--muted);font-weight:300;line-height:1.5;}

/* ── cost watch: draw the trend, then the spike jumps and pings ── */
.cw-area,.cw-spike-area{opacity:0;transition:opacity .8s ease .3s;}
.cw.in-view .cw-area{opacity:1;}
.cw.in-view .cw-spike-area{opacity:1;transition-delay:1.5s;}
.cw-line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.5s cubic-bezier(.32,.72,.3,1) .2s;}
.cw.in-view .cw-line{stroke-dashoffset:0;}
.cw-line-spike{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .7s cubic-bezier(.5,0,.6,1) 1.5s;}
.cw.in-view .cw-line-spike{stroke-dashoffset:0;}
.cw-dot{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;transition:opacity .3s ease,transform .4s cubic-bezier(.3,1.5,.5,1);}
.cw.in-view .cw-dot{opacity:1;transform:scale(1);}
.cw.in-view .cw-dot:nth-of-type(1){transition-delay:.5s;}
.cw.in-view .cw-dot:nth-of-type(2){transition-delay:.75s;}
.cw.in-view .cw-dot:nth-of-type(3){transition-delay:1s;}
.cw.in-view .cw-dot:nth-of-type(4){transition-delay:1.2s;}
.cw.in-view .cw-dot:nth-of-type(5){transition-delay:1.4s;}
.cw-dot-now,.cw-spike-tag{opacity:0;transition:opacity .5s ease 2.1s;}
.cw.in-view .cw-dot-now,.cw.in-view .cw-spike-tag{opacity:1;}
.cw-ping{opacity:0;transform-box:fill-box;transform-origin:center;transform:translateY(6px);}
.cw.in-view .cw-ping{opacity:1;transform:none;transition:opacity .4s ease 2.2s,transform .5s cubic-bezier(.3,1.5,.5,1) 2.2s;animation:cwPingPulse 2.2s ease-out 2.6s infinite;}
@keyframes cwPingPulse{0%{r:7;opacity:.6;}70%,100%{r:20;opacity:0;}}
.cw-badge{opacity:0;transform:translateY(-4px);transition:opacity .5s ease 2.3s,transform .5s ease 2.3s;}
.cw.in-view .cw-badge{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .cw-area,.cw-spike-area,.cw-line,.cw-line-spike,.cw-dot,.cw-dot-now,.cw-spike-tag,.cw-ping,.cw-badge{
    opacity:1!important;transform:none!important;stroke-dashoffset:0!important;transition:none!important;animation:none!important;}}

/* ── angled phone (high-end 3/4 product shot) ── */
.pf--angle{transform:perspective(1900px) rotateY(-13deg) rotateX(4deg) rotateZ(-0.5deg);
  animation:pfAngleFloat 9s ease-in-out infinite;
  filter:drop-shadow(0 40px 42px rgba(40,18,4,0.4));}
@keyframes pfAngleFloat{
  0%,100%{transform:perspective(1900px) rotateY(-13deg) rotateX(4deg) rotateZ(-0.5deg) translateY(0);}
  50%{transform:perspective(1900px) rotateY(-10deg) rotateX(3deg) rotateZ(-0.5deg) translateY(-11px);}}
.wf-side{overflow:visible;}
/* alerts section: phone sits on the left, so it tilts to the right instead */
.always-phone.pf--angle{transform:perspective(1900px) rotateY(13deg) rotateX(4deg) rotateZ(0.5deg);animation:pfAngleFloatRight 9s ease-in-out infinite;}
@keyframes pfAngleFloatRight{
  0%,100%{transform:perspective(1900px) rotateY(13deg) rotateX(4deg) rotateZ(0.5deg) translateY(0);}
  50%{transform:perspective(1900px) rotateY(10deg) rotateX(3deg) rotateZ(0.5deg) translateY(-11px);}}
@media(prefers-reduced-motion:reduce){.pf--angle,.always-phone.pf--angle{animation:none;}}
/* keep the money-kept two-column vertically centred and evenly spaced */
.wf-wrap{align-items:center;}

/* sechero-chips reused on the light credit hero */
.whyhero .sechero-chips span{color:var(--muted);background:#fff;border:1px solid var(--line);}
.whyhero .sechero-chips svg{color:#0F9D58;}
/* keep the three credit reassurance chips on one line at phone widths */
@media(max-width:560px){
  .sechero-chips{flex-wrap:nowrap;gap:5px;justify-content:space-between;}
  .sechero-chips span{font-size:10px;padding:7px 7px;gap:0;white-space:nowrap;flex:0 1 auto;min-width:0;}
  .sechero-chips svg{display:none;}
}

/* ── always-on: lock screen stacking real notifications ── */
.always{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 330px;gap:clamp(28px,5vw,68px);align-items:center;}
.always.flip{grid-template-columns:330px 1fr;}
.always.flip .always-stage{order:-1;}
.always-list{display:flex;flex-direction:column;gap:12px;}
.always-item{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:17px 19px;box-shadow:0 1px 3px rgba(40,18,4,0.04);transition:box-shadow .3s,transform .3s;}
.always-item:hover{box-shadow:0 14px 34px rgba(40,18,4,0.08);transform:translateX(2px);}
.always-ic{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--blue-dim);color:var(--blue);}
.always-ic svg{width:18px;height:18px;}
.always-item.warn .always-ic{background:rgba(232,86,58,0.13);color:#E8563A;}
.always-item.good .always-ic{background:rgba(15,157,88,0.13);color:#0F9D58;}
.always-h{font-size:16px;font-weight:500;letter-spacing:-0.025em;margin-bottom:4px;}
.always-p{font-size:13.5px;line-height:1.55;color:var(--muted);font-weight:300;}
.always-stage{display:flex;justify-content:center;}
.always-phone .pf-screen{background:#12100c center/cover no-repeat;background-image:linear-gradient(180deg,rgba(20,14,8,0.5),rgba(20,14,8,0.72)),url('/hero-mountain.jpg');}
.al-lock{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;align-items:center;padding:52px 12px 20px;}
.al-time{font-size:60px;font-weight:200;color:#fff;letter-spacing:-0.045em;line-height:1;text-shadow:0 2px 20px rgba(0,0,0,0.35);}
.al-date{font-size:13px;color:rgba(255,255,255,0.82);font-weight:400;margin-top:6px;text-shadow:0 1px 10px rgba(0,0,0,0.4);}
.al-notifs{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:9px;}
.al-notif{background:rgba(255,255,255,0.17);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.22);border-radius:19px;padding:12px 14px;color:#fff;
  opacity:0;transform:translateY(16px) scale(.96);animation:pfMsgIn .6s cubic-bezier(.16,.84,.28,1) forwards;}
.al-n-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.al-n-app{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:rgba(255,255,255,0.9);}
.al-n-mark{width:16px;height:16px;border-radius:5px;background:var(--blue);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.al-n-time{font-size:10.5px;color:rgba(255,255,255,0.62);}
.al-n-t{font-size:13px;font-weight:600;letter-spacing:-0.01em;margin-bottom:2px;}
.al-n-s{font-size:12px;line-height:1.45;color:rgba(255,255,255,0.86);font-weight:300;}
@media(max-width:900px){.always,.always.flip{grid-template-columns:1fr;}.always.flip .always-stage,.always-stage{order:-1;}}


/* ── home 'works with your banks': the graphic runs from the screen's left edge ── */


/* ── cost watch: the push notification you would get, arriving as the spike lands ── */
.cw-notif{position:absolute;top:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);z-index:5;width:min(300px,72%);
  background:rgba(255,255,255,0.86);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--line);border-radius:17px;padding:12px 14px;
  box-shadow:0 18px 44px rgba(40,18,4,0.18),0 3px 10px rgba(40,18,4,0.08);
  opacity:0;transform:translateY(-18px) scale(.95);pointer-events:none;}
.cw.in-view .cw-notif{animation:cwNotifIn .7s cubic-bezier(.3,1.4,.5,1) 2.5s forwards;}
@keyframes cwNotifIn{to{opacity:1;transform:translateY(0) scale(1);}}
.cwn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.cwn-app{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted);}
.cwn-mark{width:16px;height:16px;border-radius:5px;background:linear-gradient(140deg,#FBAA1B,#DC6E12);color:#fff;
  font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.cwn-time{font-size:10.5px;color:var(--sub);}
.cwn-t{font-size:13.5px;font-weight:600;letter-spacing:-0.01em;}
.cwn-s{font-size:12px;line-height:1.45;color:var(--muted);font-weight:300;margin-top:2px;}
@media(prefers-reduced-motion:reduce){.cw.in-view .cw-notif{animation:none;opacity:1;transform:none;}}

/* ── home banks: the flow lines span the whole left side of the screen ──
   The lines layer shares the first grid column with the source cards, so it
   stretches from the viewport's left edge to the merged panel. Cards float
   above it; the packets travel the entire span underneath. */



/* ── home 'works with your banks': lines flow from the page's left edge straight
   into the black 'one picture' panel as one continuous system. JS-drawn so the
   convergence always meets the real panel position. ── */
#banks{position:relative;overflow:hidden;}
#banks .sec-head,#banks .merge,#banks .banks-note{position:relative;z-index:1;}
#banks .merge{display:flex;justify-content:flex-end;min-height:clamp(300px,34vw,380px);align-items:center;}
#banks .merge-out{width:min(430px,44%);margin-right:clamp(20px,5vw,56px);}
.bank-connect{position:absolute;left:calc(50% - 50vw);width:100vw;top:0;bottom:0;z-index:0;pointer-events:none;}
.bank-connect svg{width:100%;height:100%;display:block;}
.bank-connect text{font-family:'General Sans',-apple-system,sans-serif;font-size:12.5px;font-weight:500;fill:var(--muted);}
.bc-line{fill:none;stroke:var(--blue);stroke-width:1.3;opacity:0.28;}
.bc-dot{fill:var(--blue);opacity:0;filter:drop-shadow(0 0 3px rgba(224,123,46,0.5));}
#banks.in-view .bc-dot{opacity:1;}
@media(max-width:860px){.bank-connect{display:none;}#banks .merge{justify-content:center;}#banks .merge-out{width:100%;max-width:400px;margin-right:0;}}

/* ── cost watch: chart (track) beside a live alert feed (Kapio tells you) ── */
.cw-layout{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(20px,3vw,38px);align-items:stretch;}
.cw-layout .cw{max-width:none;margin:0;display:flex;flex-direction:column;}
.cw-layout .cw-chart{flex:1;}
.cw-foot-line{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.55;color:var(--muted);font-weight:300;}
@media(max-width:900px){.cw-layout{grid-template-columns:1fr;}}

.afeed{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:clamp(18px,2.4vw,24px);box-shadow:0 40px 90px rgba(40,18,4,0.07);}
.afeed-head{display:flex;align-items:center;gap:9px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line);}
.afeed-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,#FBAA1B,#DC6E12);color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(224,123,46,0.3);}
.afeed-title{font-size:14.5px;font-weight:600;letter-spacing:-0.02em;}
.afeed-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue);}
.afeed-live i{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pfPing 1.9s ease-out infinite;}
.afeed-list{display:flex;flex-direction:column;gap:11px;flex:1;}
.afeed-item{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);
  border-radius:15px;padding:13px 14px;opacity:0;transform:translateY(14px) scale(.97);}
.cw-layout.in-view .afeed-item{animation:pfMsgIn .6s cubic-bezier(.16,.84,.28,1) forwards;}
.afeed-ic{width:34px;height:34px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(232,86,58,0.12);color:#E8563A;}
.afeed-ic svg{width:17px;height:17px;}
.afeed-item.info .afeed-ic{background:var(--blue-dim);color:var(--blue);}
.afeed-item.good .afeed-ic{background:rgba(15,157,88,0.13);color:#0F9D58;}
.afeed-b{flex:1;min-width:0;}
.afeed-t{font-size:13.5px;font-weight:600;letter-spacing:-0.01em;display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.afeed-time{font-size:10.5px;color:var(--sub);font-weight:400;flex-shrink:0;}
.afeed-s{font-size:12.5px;line-height:1.45;color:var(--muted);font-weight:300;margin-top:3px;}
.afeed-s b{color:var(--ink);font-weight:600;}
.afeed-foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;
  color:var(--muted);font-weight:300;text-align:center;}
.afeed-foot b{color:var(--ink);font-weight:500;}
@media(prefers-reduced-motion:reduce){.cw-layout.in-view .afeed-item{animation:none;opacity:1;transform:none;}}