/* MoneyTruVa – compiled styles (generated from scss/) */
/* Layout: XD artboard "Sign-Up – Investor – Landing 7" (1920 wide) → 1200px content column, sticky glass header, alternating airy white / lavender bands, navy CTA band, grey footer. Single light look, as designed. */
:root{
  color-scheme: light;
  --navy:#001691;      /* brand navy – headings, accents */
  --navy-deep:#000E5A; /* CTA band, dark card */
  --navy-2:#24379F;
  --ink:#000000;
  --ink-2:#434343;
  --ink-3:#707070;
  --btn:#212746;       /* Register Now pill */
  --gold:#C9A108;
  --yellow:#FFDD00;
  --lav-1:#F7F8FD;
  --lav-2:#E5EAFF;
  --lav-3:#D9DEFF;
  --line:#D1D6E8;
  --grey-bg:#EFEFEF;
  --white:#FFFFFF;
  --f-display:"Host Grotesk", "Inter", system-ui, sans-serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-accent:"Open Sans", "Inter", system-ui, sans-serif;
  --wrap:1200px;
  --gutter:clamp(16px, 4vw, 40px);
  --radius:18px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-anchor:none}   /* no CSS smooth scrolling: it turns ScrollTrigger's instant measuring jumps into glides and corrupts the pinned section; our scripts ask for smooth scrolling where wanted */
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,140px)}
.h2{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,3.4vw,52px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.blue{color:var(--navy)}
.eyebrow{font-family:var(--f-body);font-weight:500;font-size:clamp(13px,1vw,16px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
/* real asset slots: <img> sits over a drawn fallback and removes itself if the file is missing */
.slot{position:relative}
.slot > img.asset{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

/* ===== Buttons ===== */
.pill{display:inline-flex;align-items:center;gap:14px;padding:6px 6px 6px 22px;border-radius:999px;font-family:var(--f-accent);font-weight:700;font-size:15px;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease)}
.pill .knob{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transition:transform .45s var(--ease)}
.pill .knob svg{width:14px;height:14px;opacity:0;transform:translateX(-6px);transition:.35s var(--ease)}
.pill:hover .knob svg,.pill:focus-visible .knob svg{opacity:1;transform:none}
.pill-dark{background:var(--btn);color:var(--white)}
.pill-dark .knob{background:var(--white);color:var(--btn)}
.pill-light{background:var(--white);color:var(--btn);border:1.5px solid var(--btn)}
.pill-light .knob{background:var(--btn);color:var(--white)}


/* header Register: even glow (no downward drop shadow) and no hover lift, so it reads centred in the slim scrolled bar */
.header .btn-reg{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.25),0 0 0 1px rgba(0,22,145,.08),0 4px 14px -6px rgba(0,22,145,.5)}
.header .btn-reg:hover,.header .btn-reg:focus-visible{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.25),0 0 0 4px rgba(0,22,145,.12),0 6px 18px -6px rgba(0,22,145,.55)}
.header.is-scrolled .btn-reg{padding-block:5px}
.header.is-scrolled .btn-reg .knob{width:28px;height:28px}

/* View More – text link with arrow */
.link-more{display:inline-flex;align-items:center;gap:10px;padding:6px 2px;color:var(--navy);font:700 16px/1.2 var(--f-accent);letter-spacing:.01em;white-space:nowrap}
.link-more .lm-text{position:relative;padding-bottom:3px}
.link-more .lm-text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:currentColor;transform:scaleX(.28);transform-origin:left;transition:transform .45s var(--ease)}
.link-more .lm-arrow{width:22px;height:22px;flex:none;transition:transform .45s var(--ease)}
.link-more .lm-shaft{stroke-dasharray:15;stroke-dashoffset:4;transition:stroke-dashoffset .45s var(--ease)}
.link-more:hover .lm-text::after,.link-more:focus-visible .lm-text::after{transform:scaleX(1)}
.link-more:hover .lm-arrow,.link-more:focus-visible .lm-arrow{transform:translateX(5px)}
.link-more:hover .lm-shaft,.link-more:focus-visible .lm-shaft{stroke-dashoffset:0}
@media (prefers-reduced-motion: reduce){.link-more *{transition:none!important}}
/* Register Now – premium pill (all instances) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn-reg{position:relative;isolation:isolate;overflow:hidden;color:#fff;letter-spacing:.01em;
  background:linear-gradient(135deg,#0A1A8C 0%,var(--navy) 45%,#2B44C9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.25),0 10px 24px -10px rgba(0,22,145,.65),0 2px 6px -2px rgba(0,14,90,.35);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-position .6s var(--ease)}
.btn-reg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%)}
.btn-reg .knob{background:#fff;color:var(--navy);box-shadow:0 2px 8px -2px rgba(0,14,90,.45)}
.btn-reg .knob svg{opacity:1;transform:none;transition:transform .45s var(--ease)}
.btn-reg:hover,.btn-reg:focus-visible{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.25),0 18px 34px -12px rgba(0,22,145,.75),0 3px 8px -2px rgba(0,14,90,.35)}
.btn-reg:hover::after,.btn-reg:focus-visible::after{transform:translateX(120%);transition:transform .9s var(--ease)}
.btn-reg:hover .knob svg,.btn-reg:focus-visible .knob svg{transform:translate(2px,-2px) scale(1.08)}
.btn-reg:active{transform:translateY(0);transition-duration:.1s}
/* on the navy CTA band: inverted */
.cta .pill.btn-reg{color:var(--navy-deep);background:linear-gradient(135deg,#fff 0%,#F2F5FF 60%,#E3E9FF 100%);
  box-shadow:inset 0 1px 0 #fff,0 14px 30px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.6)}
.cta .pill.btn-reg::after{background:linear-gradient(110deg,transparent 30%,rgba(0,22,145,.12) 50%,transparent 70%)}
.cta .pill.btn-reg .knob{background:linear-gradient(135deg,var(--navy) 0%,#2B44C9 100%);color:#fff}
.cta .pill.btn-reg:hover,.cta .btn-reg:focus-visible{box-shadow:inset 0 1px 0 #fff,0 22px 40px -14px rgba(0,0,0,.6),0 0 0 4px rgba(255,255,255,.18)}
@media (prefers-reduced-motion: reduce){.btn-reg,.btn-reg::after,.btn-reg .knob svg{transition:none!important}.btn-reg:hover{transform:none}}

/* ===== Header ===== */
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 6px 24px rgba(0,22,145,.06);transition:padding .35s var(--ease)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;transition:height .35s var(--ease)}
.header.is-scrolled .wrap{height:66px}
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{height:28px;width:auto;display:block}
@media (max-width:820px){.logo img{height:24px}}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);font-family:var(--f-accent);font-size:16px}
.nav a{position:relative;padding-block:6px;color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1);transform-origin:left}
.nav a.active{font-weight:700}
.nav a.tv{color:var(--navy)}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.burger span:nth-child(2){width:16px;align-self:flex-end;margin-right:9px}
.mobile-menu{display:none}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--lav-1) 0%,#EEF1FF 55%,var(--lav-3) 100%);padding-block:clamp(56px,7vw,96px) clamp(48px,6vw,80px)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(100,131,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(100,131,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 40% 40%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 40% 40%,#000 30%,transparent 75%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}
.hero-copy{min-width:0;display:flex;flex-direction:column;gap:28px}
.tagpill{align-self:flex-start;background:var(--lav-2);color:var(--ink);font-family:var(--f-display);font-weight:500;font-size:14px;padding:8px 18px;border-radius:999px}
.hero h1{font-family:var(--f-body);font-weight:700;font-size:clamp(24px,2.32vw,37px);line-height:1.4;letter-spacing:-.01em;text-wrap:balance;margin-block:14px 18px}
.hero h1 .line{display:block}
@media (min-width:1025px){.hero h1 .line{white-space:nowrap}}
.hero h1 .line > span{display:inline-block}
.connecting{display:flex;align-items:center;gap:14px;font-family:var(--f-accent);font-weight:700;font-style:italic;font-size:17px}
.cubes{width:72px;height:72px;margin:-20px -12px;flex:none;pointer-events:none}  /* Lottie canvas is 512px with the icon in the middle third, so the box is larger than the visible icon */
.cubes svg{display:block}
.chain{position:relative;display:grid;grid-template-columns:repeat(4,auto);justify-content:start;column-gap:clamp(20px,3vw,44px);padding-top:18px;max-width:520px}
.chain::before{content:"";position:absolute;top:3px;left:3px;right:20%;height:1px;background:var(--line)}
.chain-items{display:contents;list-style:none}
.chain .fill{position:absolute;top:3px;left:3px;height:1px;width:0;background:var(--navy)}
.chain li{position:relative;font-family:var(--f-display);font-size:17px;line-height:1.3;color:var(--ink-3);transition:color .4s}
.chain li::before{content:"";position:absolute;top:-19px;left:0;width:7px;height:7px;border-radius:50%;border:1.5px solid #BFBFBF;background:var(--white);transition:.4s var(--ease)}
.chain li.on{color:var(--ink)}
.chain li.on::before{border-color:var(--navy);background:var(--navy);box-shadow:0 0 0 5px rgba(0,22,145,.12)}
.hero-tag{font-family:var(--f-body);font-weight:700;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.01em;margin-top:clamp(12px,3vw,40px)}
.hero-cta{display:none}
.m-only{display:none!important}
.eco-dots,.arrow-m{display:none}
.snap-mid{display:none;width:1px;pointer-events:none}

/* hero device: ONE image (hand + phone) with a screen slot laid over the phone screen for an animated GIF */
.hero-visual{position:relative;display:flex;justify-content:center;align-self:end;min-width:0;margin-bottom:calc(-1 * clamp(48px,6vw,80px))}
/* hand + phone (one PNG, swooshes and arrow included) sits on the bottom edge of the hero;
   the animated GIF overlaps the centre of the phone screen */
.device{
  /* phone screen inside hero-hand-phone.png (710×835), measured in % of the image */
  --img-ratio: 710 / 835;
  --scr-left: 10.85%;
  --scr-top: 2.04%;
  --scr-width: 39.58%;
  --scr-height: 75.45%;
  --gif-width: 92%;          /* GIF width as % of the screen width */
  position:relative;width:clamp(340px,32vw,520px);max-width:100%;aspect-ratio:var(--img-ratio)}
.device > .hand{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;z-index:1}
.scr-slot{position:absolute;left:var(--scr-left);top:var(--scr-top);width:var(--scr-width);height:var(--scr-height);display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.scr-slot > img{width:var(--gif-width);height:auto;display:block}
.go-hit{position:absolute;left:30.6%;top:65.6%;width:7%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:3}
.go-hit::before,.go-hit::after{content:"";position:absolute;inset:-18%;border-radius:50%;border:2px solid rgba(100,131,255,.45);animation:ring 2.4s var(--ease) infinite;pointer-events:none}
.go-hit::after{animation-delay:1.2s}
.go-pad{position:absolute;left:30.6%;top:65.6%;width:max(7%,48px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:2}
.ph-label{display:none;position:absolute;font:500 12px/1.45 var(--f-body);color:var(--ink-3);text-align:center;z-index:3}
.ph-label code{font:500 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--navy)}
.device.no-img::before{content:"";position:absolute;inset:0;border:2px dashed #A3ADD6;border-radius:20px;background:rgba(255,255,255,.35)}
.device.no-img .ph-hand{display:block;right:5%;bottom:6%;max-width:40%;text-align:right}
.scr-slot.no-gif .ph-gif{display:block;left:8%;right:8%;top:45%}
@keyframes ring{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}

/* ===== Ecosystem ===== */
.eco{text-align:center}
/* XD: heading Inter 62 / titles Host Grotesk Bold 24 / copy Host Grotesk 20 at 1920 → ×0.75 at the 1440 base.
   Tighter tracking throughout, for a classic look. */
.eco .h2{font-family:var(--f-body);font-weight:600;font-size:clamp(30px,3.2vw,46px);line-height:1.18;letter-spacing:-.035em}
.eco-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:880px;margin:clamp(72px,10vh,120px) auto 0;text-align:left}
.eco-col{position:relative;padding:12px clamp(14px,2vw,28px) 36px;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.eco-col + .eco-col::before{content:"";position:absolute;left:0;top:-56px;bottom:0;width:1px;background:linear-gradient(transparent,var(--line) 20%,var(--line) 70%,transparent)}
.eco-col:nth-child(2),.eco-col:nth-child(4){margin-top:-32px}
.shield{height:82px;width:auto;margin-bottom:18px}
.eco-col h3{font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1.25;letter-spacing:-.02em;margin-bottom:22px}
.eco-col p{font-family:var(--f-display);font-size:15.5px;line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.eco-col p + p{margin-top:16px}

/* ===== 1% / 99% ===== */
.decide{padding-block:clamp(40px,6vw,80px)}
.decide-card{--card-bg:#FFFFFF;--t1:var(--navy-2);--t2:var(--navy);--fan:rgba(0,22,145,.28);position:relative;overflow:hidden;border-radius:0;background:var(--card-bg);padding:clamp(56px,7vw,96px) 16px;text-align:center;margin-inline:auto;max-width:1440px}
.decide-card .k{z-index:3}
.d1{font-family:var(--f-body);font-size:clamp(22px,2.3vw,34px);line-height:1.2;letter-spacing:-.02em;color:var(--gold)}
.d2{font-family:var(--f-body);font-size:clamp(24px,2.5vw,37px);line-height:1.2;letter-spacing:-.025em;color:var(--t1)}
.d3{font-family:var(--f-body);font-size:clamp(30px,3.2vw,46px);line-height:1.2;color:var(--t2);letter-spacing:-.03em;margin-top:2px}
.d2 b,.d3 b{font-weight:700}
/* stage: 1260×735 like the lines asset; text overlays it exactly as in the XD artboard */
.stage{position:relative;width:min(908px,100%);aspect-ratio:1260 / 735;margin-inline:auto}
.ktop{position:absolute;left:0;right:0;top:0;z-index:3;font-weight:400}
.ktop > span{display:block}
.hub-gfx{position:absolute;inset:0;z-index:1}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.hub-lines-m{display:none}
.hub-orb{position:absolute;left:50%;top:50%;width:35.8%;height:auto;translate:-50% -50%;z-index:2}
.node{position:absolute;left:var(--x);top:var(--y);width:12.3%;height:auto;translate:-50% -50%;z-index:3}
.stage .d4{position:absolute;left:0;right:0;top:79%;z-index:3}
.d4{font-family:var(--f-body);font-size:clamp(24px,2.3vw,34px);color:var(--gold);line-height:1.3;letter-spacing:-.02em}
.d4 b{font-weight:700}

/* ===== Follow ===== */
.follow{text-align:center}
.follow .lead{max-width:56ch;margin:20px auto 0;font-family:var(--f-display);font-size:clamp(16px,1.2vw,19px);color:var(--ink-2)}
.f-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,26px);max-width:880px;margin:clamp(40px,5vw,72px) auto 0;text-align:left}  /* XD: three ~261px cards, centred */
.f-grid{align-items:start}
/* The hover line opens into space that is already reserved below the cards, so the section's height
   (and its centred content) never changes on hover – no jump. lockFollowGrid() sets that height. */
.f-grid.measure-open .f-more{grid-template-rows:1fr;transition:none}
.f-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px 18px 26px 20px;background:var(--white);outline:none;transition:box-shadow .45s var(--ease),border-color .45s var(--ease)}
.f-card h3{color:var(--navy);display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.f-card h3 .ib{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;background:transparent;transition:background-color .35s var(--ease)}
.f-card h3 svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.6}
.f-card ul{margin-top:20px;display:grid;gap:18px}
.f-card li{position:relative;padding-left:14px;font-family:var(--f-display);font-size:14px;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.f-card li::before{content:"";position:absolute;left:2px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--ink)}
/* hover / focus / active (XD "Hover State"): green icon badge, lifted card, the italic line slides open */
.f-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.f-more > div{overflow:hidden;min-height:0}
.f-foot{padding-top:26px;font-family:var(--f-body);font-weight:700;font-style:italic;font-size:14px;line-height:1.4;letter-spacing:-.01em;opacity:0;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.f-card:hover,.f-card:focus-visible,.f-card.is-active{border-color:#B9C2EA;box-shadow:0 24px 50px -24px rgba(0,22,145,.28)}
.f-card:hover .ib,.f-card:focus-visible .ib,.f-card.is-active .ib{background:#9BE08F}
.f-card:hover .f-more,.f-card:focus-visible .f-more,.f-card.is-active .f-more{grid-template-rows:1fr}
.f-card:hover .f-foot,.f-card:focus-visible .f-foot,.f-card.is-active .f-foot{opacity:1;transform:none}
@media (hover:none){ .f-card .f-more{grid-template-rows:1fr} .f-card .f-foot{opacity:1;transform:none} .f-card h3 .ib{background:#9BE08F} }

/* ===== Track ===== */
.track{text-align:center}
.track .h2{font-family:var(--f-body);margin-top:8px}
/* Track: 16:9 video holder (reference: light grey box, thin blue outline, large radius) */
.vbox{position:relative;width:min(1040px,100%,calc((100svh - var(--hdr) - 230px) * 16 / 9));aspect-ratio:16 / 9;margin:26px auto 0;border:0;box-shadow:none;border-radius:0;background:transparent}  /* holder has no colour or border: the frame is part of the video; no isolation, so the video's white blends into the page */  /* outline drawn outside so the inside stays exactly 16:9 */
.vbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:transparent;mix-blend-mode:multiply}  /* video is exactly 1920×1080, the box exactly 16:9 → fills edge to edge, nothing cropped */
/* glass replay button, bottom-right (Apple-style) */
.vbtn{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;z-index:2;
  color:#1d1d1f;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 6px 18px -6px rgba(0,14,90,.25),inset 0 1px 0 rgba(255,255,255,.8);transition:background .25s,transform .25s}
.vbtn:hover{background:rgba(255,255,255,.8)}
.vbtn:active{transform:scale(.94)}
.vbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vbtn .i-play{fill:currentColor;stroke:none}
.vbtn .i-play{display:none}
.vbox.paused .vbtn .i-play{display:block}
.vbox.paused .vbtn .i-replay{display:none}


/* ===== Investors ===== */
.investors{text-align:center;overflow:hidden}
.investors .eyebrow{color:var(--ink);font-weight:600;letter-spacing:.02em}
.investors .h2{color:var(--ink);font-family:var(--f-body);margin-top:6px}
/* Investor card – a 1:1 HTML/CSS rebuild of the reference SVG (660×504):
   Rectangle 6697 = background, pattern = person photo (transparent PNG), Sonia Shenoy_1 = bottom shade,
   text layers = quote / name / role / company with the SVG drop-shadow. Sizes use container units so the
   card scales like the SVG at any width. */
.inv{--cw:clamp(300px,38vw,560px);--ch:calc(var(--cw) * 504 / 660);position:relative;height:calc(var(--ch) + 90px);margin-top:clamp(8px,2vh,24px);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.inv:focus-visible{box-shadow:inset 0 0 0 2px var(--navy)}
.inv.dragging{cursor:grabbing}
.inv-cards{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.inv-cards li{position:absolute;left:50%;top:0;bottom:0;width:var(--cw);margin-left:calc(var(--cw) / -2);display:flex;align-items:center;opacity:0;will-change:transform,opacity}
.inv-cards .inv-card{width:100%;box-shadow:0 30px 60px -28px rgba(0,14,90,.5)}
.inv-card{--shadow:0 3px 6px rgba(0,0,0,.69);position:relative;flex:none;margin:0;width:100%;aspect-ratio:660 / 504;
  container-type:inline-size;overflow:hidden;background:#625D57;color:#fff;text-align:center;font-family:var(--f-body)}
.inv-photo{position:absolute;left:calc(-5.97% + var(--dx,0%));top:11.09%;width:69.66%;height:auto;max-width:none;pointer-events:none}
.inv-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:68.25%;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 31%,rgba(0,0,0,.651) 78.6%,rgba(0,0,0,.71) 100%)}
.inv-quote{position:absolute;z-index:2;margin:0;left:52%;right:8%;top:9.4%;font-size:3.03cqw;line-height:1.5;letter-spacing:-.015em;text-shadow:var(--shadow);text-wrap:balance}
.inv-quote p{margin:0}
.inv-quote p::before{content:"\201C"} .inv-quote p::after{content:"\201D"}
.inv-meta{position:absolute;z-index:2;left:50%;right:8%;top:65.3%;text-align:center;display:flex;flex-direction:column;align-items:center;text-shadow:var(--shadow)}
.inv-name{font-style:normal;font-weight:inherit;font-size:4.85cqw;line-height:1.2;letter-spacing:-.015em}
.inv-role{margin-top:4.2cqw;font-size:3.64cqw;line-height:1.2;letter-spacing:-.015em}
.inv-org{font-size:3.64cqw;line-height:1.2;letter-spacing:-.015em;font-weight:600}
/* no photo yet → initials monogram in the photo spot */
.inv-mono{display:none;position:absolute;left:6%;top:22%;width:38%;aspect-ratio:1;border-radius:50%;place-items:center;
  background:radial-gradient(circle at 35% 30%,#8a837b,#4d4943);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 30px -10px rgba(0,0,0,.5);
  font-family:var(--f-display);font-size:11cqw;letter-spacing:.02em;color:rgba(255,255,255,.92)}
.inv-card[data-nophoto] .inv-mono{display:grid}
/* no one-liner yet → name block sits centred on the right half */
.inv-card[data-noquote] .inv-meta{top:50%;translate:0 -50%}

/* ===== Team ===== */
.team{background:var(--lav-1)}
.team-head{text-align:center;max-width:1080px;margin-inline:auto}
.team.section{padding-block:clamp(40px,5vw,80px)}
.team .h2{font-family:var(--f-body);color:var(--ink)}
.team-lead{margin-top:18px;font-family:var(--f-display);font-size:clamp(16px,1.25vw,20px);line-height:1.55;color:var(--ink-2)}
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);max-width:1200px;margin:clamp(24px,2.8vw,40px) auto 0}
.t-card{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(16px,1.8vw,24px);align-content:start;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.4vw,34px);transition:box-shadow .45s var(--ease),border-color .45s var(--ease)}
.t-card:hover{border-color:#B9C2EA;box-shadow:0 24px 50px -24px rgba(0,22,145,.28)}
.t-photo{flex:none;width:clamp(96px,9vw,136px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--lav-2);box-shadow:0 0 0 4px #fff,0 0 0 5px var(--line),0 16px 30px -18px rgba(0,22,145,.45)}
.t-photo img{width:100%;height:100%;object-fit:cover;display:block;font-size:0;color:transparent}
.t-card--short{align-items:center}
.t-mono{display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#2F42A3,var(--navy-deep));color:#fff;font:500 clamp(30px,2.8vw,42px)/1 var(--f-display);letter-spacing:.02em}
.t-body{display:contents;text-align:left}
.t-card .t-photo{grid-row:1 / span 3;width:clamp(88px,7.4vw,118px)}
.t-card .t-tag,.t-card .t-name,.t-card .t-role{grid-column:2;justify-self:start}
.t-card .t-name{margin-top:10px}
.t-card .t-points,.t-card .t-social{grid-column:1 / -1}
.t-card .t-points{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.t-tag{display:inline-block;background:var(--lav-2);color:var(--navy);font:600 13px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.t-name{margin-top:12px;font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2vw,32px);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.t-role{margin-top:4px;font-family:var(--f-display);font-weight:500;font-size:clamp(15px,1.2vw,19px);color:var(--navy)}
.t-points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.t-points li{position:relative;padding-left:18px;font-family:var(--f-display);font-size:clamp(15.5px,1.18vw,19px);line-height:1.55;color:var(--ink)}
.t-points li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--navy)}
.t-social{display:flex;gap:10px;margin-top:16px}
.t-social a{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--navy);transition:background .25s,color .25s,border-color .25s}
.t-social a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.t-social svg{width:16px;height:16px;fill:currentColor}
@media (max-width: 820px){
  .team-grid{grid-template-columns:1fr}
  .t-card{grid-template-columns:1fr;justify-items:center;text-align:center}
  .t-card .t-photo{grid-row:auto}
  .t-card .t-tag,.t-card .t-name,.t-card .t-role{grid-column:1;justify-self:center}
  .t-card .t-photo{margin-bottom:14px}
  .t-points{text-align:left}
  .t-social{justify-content:center}
}

/* ===== CTA band ===== */
.cta{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;box-shadow:0 40px 60px -30px rgba(0,14,90,.45)}
.cta::before{content:"";position:absolute;inset:0 0 0 30%;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(60% 90% at 30% 50%,#000,transparent);-webkit-mask-image:radial-gradient(60% 90% at 30% 50%,#000,transparent)}
.cta .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:clamp(56px,6vw,84px);flex-wrap:wrap}
.cta h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,2.6vw,42px)}
.cta p{margin-top:12px;font-family:var(--f-display);font-size:clamp(15px,1.1vw,19px);color:var(--lav-1);max-width:34ch}
.cta-right{display:flex;align-items:center;gap:20px}
.arrow-draw{width:clamp(120px,14vw,220px);height:auto;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.cta .pill{background:#fff;color:var(--btn);font-size:16px;padding:8px 8px 8px 24px}
.cta .pill .knob{background:var(--btn);color:#fff;width:34px;height:34px}

/* ===== Watching ===== */
.watch-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.watch-head .h2{font-family:var(--f-body);font-weight:600;font-size:clamp(28px,2.6vw,44px)}
.watch-head p{margin-top:10px;font-family:var(--f-display);color:var(--ink-2)}
.w-grid{display:grid;grid-template-columns:1fr 1.15fr;grid-template-areas:"big list" "yt list";column-gap:clamp(16px,2vw,24px);margin-top:clamp(28px,3vw,40px);align-items:start}
.w-grid .big{grid-area:big}.w-grid .v-list{grid-area:list}.w-grid .yt{grid-area:yt}.w-grid .more{grid-area:more;justify-self:center;margin-top:28px}
.v-card{display:block;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#FBFBFB;transition:box-shadow .45s var(--ease)}
.v-card:hover{box-shadow:0 20px 40px -22px rgba(0,22,145,.3)}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 60%,#2F42A3 100%)}
.thumb .fb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:8%;color:#fff;font-family:var(--f-display)}
.thumb .fb b{display:inline-block;align-self:flex-start;background:var(--yellow);color:var(--navy-deep);font-weight:700;padding:2px 8px;border-radius:3px;font-size:.8em;margin-bottom:.4em}
.thumb .fb span{font-weight:700;line-height:1.15}
.thumb .play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;z-index:3;opacity:0;transition:opacity .35s var(--ease)}
.thumb .play svg{width:12px;height:12px;margin-left:2px}
.v-card:hover .play{opacity:1}
.v-card.big .thumb{border-bottom:4px solid var(--yellow)}
.v-card.big .thumb .fb{font-size:clamp(18px,2vw,30px)}
.v-card.big h3{padding:22px 24px 26px;font-family:var(--f-body);font-weight:400;font-size:clamp(18px,1.6vw,24px);line-height:1.45}
.v-list{display:grid;gap:clamp(12px,1.4vw,18px)}
.v-card.row{display:grid;grid-template-columns:clamp(110px,11vw,150px) 1fr;gap:16px;align-items:center;padding:14px}
.v-card.row .thumb{border-radius:3px}
.v-card.row .thumb .fb{font-size:11px;padding:10px}
.v-card.row h3{font-family:var(--f-body);font-weight:400;font-size:clamp(15px,1.2vw,18px);line-height:1.55;min-width:0}
.yt{display:flex;flex-direction:column;gap:10px;margin-top:28px;font-family:var(--f-display);font-size:14px;color:var(--ink-2)}
.yt .brand{display:flex;align-items:center;gap:14px}
.yt .logo-yt{display:flex;align-items:center;gap:6px;font:700 19px/1 var(--f-body);color:#000;letter-spacing:-.04em}
.yt .logo-yt i{width:26px;height:18px;border-radius:5px;background:#FF0000;display:grid;place-items:center}
.yt .logo-yt i::after{content:"";border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
.yt a{color:#0844CC;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:8px 2px;margin:-8px -2px}

/* ===== Footer ===== */
.footer{background:var(--grey-bg);padding-block:clamp(56px,6vw,88px) 32px;font-family:var(--f-display)}
.ft-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line)}
.ft-logo img{height:34px;width:auto}
.ft-tag{margin-top:8px;color:var(--navy);font-size:16px;letter-spacing:-.01em}
.ft-line{font-size:clamp(22px,2.1vw,32px);letter-spacing:-.025em;line-height:1.2;text-align:right;text-wrap:balance}
.ft-line b{font-weight:700;color:var(--navy)}
.ft-topics{margin-top:28px;font-size:13px;line-height:1.7;color:var(--ink-2);letter-spacing:-.005em}
.ft-topics b{color:var(--ink)}
.f-cols{display:grid;grid-template-columns:1.1fr 1.6fr .9fr;gap:32px;margin-top:clamp(36px,4vw,56px);font-size:15px}
.f-cols .ft-h{margin:0 0 18px;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:none}
.f-cols ul{display:grid;gap:10px}
.ft-series{grid-template-columns:repeat(2,minmax(0,max-content));column-gap:36px}
.f-cols a{color:var(--navy)}
.f-cols a:hover{text-decoration:underline;text-underline-offset:3px}
.ft-lets{font-weight:700;color:var(--navy);font-size:17px;margin-bottom:8px}
.mail{text-decoration:underline;text-underline-offset:3px}
.ft-app{margin-top:28px}
.ft-app .ft-h{margin-bottom:12px}
.ft-app ul{display:grid;gap:10px}
.ft-soon{color:var(--navy)}  /* source link is empty – add the URL here when ready */
.totop{margin-top:26px;width:46px;height:46px;border-radius:50%;background:var(--navy);display:grid;place-items:center;transition:background .35s var(--ease)}
.totop:hover{background:var(--navy-2)}
.f-cols a.totop{display:grid;place-items:center;padding:0}   /* keep the circle round with the arrow centred (footer links get extra tap padding on phones) */
.totop svg{width:16px;height:16px}
.ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.legal{font-size:14px;color:var(--ink-2)}
.ft-social{display:flex;gap:18px}
.ft-social a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--navy);transition:background .25s,color .25s}
.ft-social a:hover{background:var(--navy);color:#fff}
.ft-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== Sections 1–6: exactly one screen each =====
   Each fills the screen below the sticky header (66px). If its content is taller than the screen,
   fitScreens() in the script scales the content down evenly (like an XD artboard) so the design keeps
   its proportions; on very short screens it lets the section grow instead of shrinking text too far. */
:root{--hdr:66px;--hdr-top:84px}
.screen{height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;justify-content:safe center;overflow:hidden}
.screen.grow,.hero.screen.grow{height:auto!important;min-height:calc(100svh - var(--hdr))}
.screen > .wrap{flex:none}
.hero.screen{height:calc(100vh - var(--hdr-top,84px));height:calc(100svh - var(--hdr-top,84px))}
.hero.screen > .wrap{flex:1;align-items:center}
.section.screen{padding-block:clamp(32px,6vh,96px)}
.decide.screen{padding-block:0}
.decide-card{flex:1;width:100%;display:flex;flex-direction:column;justify-content:center}

@media (min-width:821px){
  /* keep the tall pieces inside one screen on desktop / laptop */
  .decide-card{padding-block:clamp(28px,5vh,96px)}
}

/* Tablet / desktop hero: the hand + phone set is sized from the hero's HEIGHT (94% of it),
   sits on the section's bottom edge and runs into the right margin, as in the XD artboard. */
@media (min-width: 821px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-copy{max-width:58%;position:relative;z-index:2}
  .hero-visual{position:absolute;top:auto;bottom:var(--hv-bottom,-80px);right:var(--hv-right,0px);height:var(--hv-h,90%);width:auto;aspect-ratio:710 / 835;margin:0;display:block;z-index:1}
  .device{width:100%;height:auto;max-width:none}
}
@media (min-width: 821px) and (max-width: 1100px){
  .hero-copy{max-width:56%}
  .hero h1 .line{white-space:normal}
}

/* ===== Main video plays inside its own thumbnail box ===== */
.v-card.big .thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5;background:#000}
.v-card.big.is-playing .thumb .play,.v-card.big.is-playing .thumb img{display:none}
.v-card.big[data-vid] .thumb{cursor:pointer}
.v-card.big[data-vid] .thumb .play{opacity:1;width:56px;height:56px;right:50%;bottom:50%;transform:translate(50%,50%);
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.v-card.big[data-vid] .thumb .play svg{width:18px;height:18px}
[hidden]{display:none!important}

/* ===== Responsive (XD "iPhone 14 Pro Max – 1") ===== */
@media (max-width: 1024px) and (min-width: 821px){
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 820px){
  .nav,.header .pill{display:none}
  .burger{display:flex}
  .mobile-menu{display:block;position:fixed;inset:0;top:calc(66px + env(safe-area-inset-top,0px));background:rgba(255,255,255,.97);backdrop-filter:blur(10px);z-index:49;padding:32px var(--gutter);transform:translateY(-110%);transition:transform .5s var(--ease)}
  .mobile-menu.open{transform:none}
  .mobile-menu nav{display:grid;gap:4px;font-family:var(--f-display);font-size:26px;font-weight:600}
  .mobile-menu nav a{padding:10px 0;border-bottom:1px solid var(--line)}
  .mobile-menu .pill{margin-top:28px}
  .header .wrap{height:66px}
  .burger.open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .burger.open span:nth-child(2){width:22px;margin-right:0;transform:translateY(-4px) rotate(-45deg)}
  .d-only{display:none!important}
  .m-only{display:block!important}
  /* hero – XD mobile order: copy → button → phone → tagline */
  .hero{padding-bottom:0;background:linear-gradient(180deg,var(--lav-1) 0%,#EEF1FF 45%,var(--lav-3) 78%,#fff 100%)}
  .hero .wrap{grid-template-columns:1fr;gap:28px}
  .hero h1{font-size:clamp(21px,5.6vw,27px);margin-block:8px 12px}
  .hero h1 .line,.hero h1 .line > span{display:inline}
  .tagpill{background:none;padding:0;font-style:italic;font-size:14px;max-width:18ch}
  .connecting{font-size:clamp(18px,5vw,22px)}
  .chain{grid-template-columns:1fr;row-gap:16px;padding:0 0 0 22px}
  .chain::before{top:4px;bottom:4px;left:3px;right:auto;width:1px;height:auto}
  .chain .fill{top:4px;left:3px;width:1px;height:0}
  .chain li{font-size:clamp(17px,4.6vw,20px)}
  .chain li br{display:none}
  .chain li::before{top:.45em;left:-22px}
  .hero-cta{display:flex;align-self:stretch;justify-content:space-between;padding:8px 8px 8px 0;margin-top:12px;font-size:16px}
  .hero-cta .label{flex:1;text-align:center}
  .hero-cta .knob{width:34px;height:34px}
  .hero-visual{margin-bottom:0}
  .device{width:min(240px,58%)}
  .hero-copy{gap:18px}
  .hero.screen{height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr))}
  .hero-tag.m-only{display:block!important;font-size:clamp(22px,6vw,26px);line-height:1.3;padding-bottom:20px;margin-top:0}
  /* mobile hero without the hand + phone: content enlarged and spread over the full screen */
  .hero-visual{display:none!important}
  .hero{padding-block:clamp(20px,4svh,40px) clamp(24px,4.5svh,44px)}
  .hero.screen > .wrap{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(22px,4svh,40px);flex:1 1 auto;width:100%}
  .hero-copy{gap:clamp(14px,2.6svh,26px)}
  .tagpill{font-size:clamp(14px,3.9vw,17px);max-width:none}
  .hero h1{font-size:clamp(26px,7.7vw,36px);line-height:1.24;margin-block:0}
  .connecting{font-size:clamp(20px,5.8vw,26px)}
  .connecting .cubes{width:clamp(40px,11vw,52px);height:clamp(40px,11vw,52px)}
  .chain{row-gap:clamp(12px,2.4svh,22px)}
  .chain li{font-size:clamp(18px,5.2vw,23px)}
  .hero-cta{font-size:clamp(16px,4.4vw,19px);padding:10px 10px 10px 0;margin-top:clamp(4px,1.5svh,14px)}
  .hero-cta .knob{width:38px;height:38px}
  .hero-tag.m-only{font-size:clamp(26px,7.6vw,36px);line-height:1.22;padding:clamp(16px,2.6svh,26px) 0 0;border-top:1px solid rgba(0,22,145,.14);align-self:stretch;width:auto;max-width:none;margin:0;text-align:left}
  /* ecosystem – swipe carousel on a soft grey band */
  .eco{background:var(--lav-1)}
  .eco .h2{font-size:clamp(25px,6.8vw,30px)}
  .eco-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 8px;scrollbar-width:none;margin-top:36px}
  .eco-grid::-webkit-scrollbar{display:none}
  .eco-col{flex:0 0 86%;scroll-snap-align:center;margin-top:0!important;align-items:center;text-align:center;background:#fff;border-radius:var(--radius);padding:32px 24px 36px;box-shadow:0 10px 30px -20px rgba(0,22,145,.25)}
  .eco-col::before{display:none}
  .eco-col h3{font-size:24px;font-weight:600;margin-bottom:24px}
  .shield{height:96px;margin-bottom:20px}
  .eco-col p + p{margin-top:20px}
  .eco-col p{font-size:17px;line-height:1.4}
  .eco-dots{display:flex!important;justify-content:center;gap:0;margin-top:10px}
  .eco-dots button{position:relative;width:24px;height:36px;padding:0;border:0;background:none;transition:width .35s var(--ease)}  /* 34px tall tap area */
  .eco-dots button::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:6px;background:#C9CDDD;transform:translate(-50%,-50%);transition:width .35s var(--ease),background .35s}
  .eco-dots button.on{width:32px}
  .eco-dots button.on::before{width:16px;background:var(--navy)}
  /* 1% / 99% – navy on mobile, gold figures */
  .decide{padding-block:0}
  .decide-card{--card-bg:var(--navy-deep);--t1:#fff;--t2:#fff;--fan:rgba(217,222,255,.28);background:radial-gradient(120% 60% at 50% 60%,#0B1F8F 0%,var(--navy-deep) 70%)}
  .decide-card .d2 b,.decide-card .d3 b,.decide-card .d4 b{color:var(--gold)}
  .d2,.d3{max-width:13ch;margin-inline:auto}
  .stage{width:100%;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center}
  .ktop,.stage .d4{position:relative;top:auto}
  .hub-gfx{position:relative;inset:auto;width:100%;aspect-ratio:100 / 110;margin-block:4px;overflow:visible}
  .hub-lines:not(.hub-lines-m){display:none}   /* desktop fan artwork is too wide for a phone */
  .hub-lines-m{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;
    -webkit-mask-image:radial-gradient(ellipse 62% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 62% 50% at 50% 50%,#000 72%,transparent 100%)}  /* line ends fade out */
  .hub-lines-m path{fill:none;stroke:rgba(214,221,255,.55);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linecap:round}
  .hub-lines-m path.t{stroke:rgba(214,221,255,.3);stroke-dasharray:2 4}
  .hub-orb{width:96%}            /* bigger centre */
  .node{left:var(--mx);top:var(--my);width:27%}
  /* follow */
  .follow .h2 .blue{display:block;font-size:1.25em}
  /* Companies, Topics, Profiles stacked one after another (no swipe), icons in their highlighted state */
  /* Follow on phones: two screens tall, so the three cards get room to breathe (no shrinking to fit one screen) */
  /* screen 1 = heading + Companies, screen 2 = Topics + Profiles; each half is exactly one screen */
  .follow{--S:calc(100svh - var(--hdr));--P:clamp(32px,5.5svh,60px)}
  .follow.screen{position:relative;height:auto!important;min-height:calc(2 * var(--S));justify-content:flex-start}
  .follow.section{padding-block:var(--P)}
  /* rows: heading | intro | Companies (rest of screen 1) | Topics (top half of screen 2) | Profiles (bottom half) */
  .follow.screen > .wrap{flex:none;display:grid;min-height:calc(2 * var(--S) - 2 * var(--P));grid-template-rows:auto auto minmax(0,1fr) minmax(calc((var(--S) - var(--P)) / 2),auto) minmax(calc((var(--S) - var(--P)) / 2),auto);grid-template-columns:minmax(0,1fr)}   /* rows grow on very short phones instead of overlapping */
  .follow .lead{margin-top:14px;font-size:16px;line-height:1.55}
  .f-grid{display:contents}
  .follow .wrap > .h2{grid-row:1;grid-column:1}
  .follow .wrap > .lead{grid-row:2;grid-column:1}
  .f-grid > .f-card:nth-child(1){grid-row:3;grid-column:1;align-self:center}
  .f-grid > .f-card:nth-child(2){grid-row:4;grid-column:1;align-self:center}
  .f-grid > .f-card:nth-child(3){grid-row:5;grid-column:1;align-self:center}
  .f-card{padding:clamp(22px,3.2svh,30px) 22px;border-color:#B9C2EA;box-shadow:0 18px 40px -26px rgba(0,22,145,.35)}
  .f-card h3{font-size:21px;gap:12px}
  .f-card h3 .ib{width:38px;height:38px}
  .f-card ul{margin-top:16px;gap:12px}
  .f-card li{font-size:16px;line-height:1.5;padding-left:16px}
  .f-card .f-foot{padding-top:16px;font-size:15.5px}
  .snap-mid{display:block;position:static;grid-row:4;grid-column:1;align-self:start;height:0;margin-top:calc(-1 * clamp(10px,2svh,22px))}   /* resting point = start of screen 2 */
  .follow .f-card{margin-block:clamp(10px,2svh,22px)}
  .f-card .f-foot br{display:none}
  #followDots{display:none!important}
  .f-card h3 .ib{background:#9BE08F}   /* icons shown in their highlighted (hover) state */
  .f-card .f-more{grid-template-rows:1fr}
  .f-card .f-foot{opacity:1;transform:none}
  .f-card h3 .ib svg{width:20px;height:20px}
  /* track */
  .track{background:var(--lav-1)}
  .vbox{aspect-ratio:9 / 16;width:min(100%,calc((100svh - var(--hdr) - 200px) * 9 / 16));border-radius:0;margin-top:16px}   /* 9:16 phone video */
  .vbtn{right:10px;bottom:10px;width:38px;height:38px}
  .vbtn svg{width:17px;height:17px}
  /* investors – photo on top, quote band underneath */
  /* XD iPhone: portrait card – photo + name on top, quote in a dark band underneath */
  .inv{--cw:min(300px,74vw);--ch:calc(var(--cw) * 440 / 300)}
  .inv-card{aspect-ratio:300 / 440;display:flex;flex-direction:column}
  /* person fills the card from the bottom edge; a soft dark "cloud" fade rises from below so name and one-liner stay readable */
  .inv-photo{left:50%;top:auto;bottom:0;width:var(--pw,142%);translate:-50% 0}
  .inv-card::after{height:100%;bottom:0;top:auto;background:linear-gradient(180deg,rgba(43,42,40,0) 44%,rgba(43,42,40,.5) 55%,rgba(43,42,40,.85) 67%,#2B2A28 80%,#2B2A28 100%)}
  .inv-meta{left:7%;right:7%;top:53.8%;bottom:auto}   /* every name starts on the same line (Ajay Thakur's card is the reference) */
  .inv-name{font-size:7.4cqw}
  .inv-role,.inv-org{font-size:4.6cqw}
  .inv-role{margin-top:2.4cqw}
  .inv-mono{left:50%;top:16%;width:52%;translate:-50% 0;font-size:16cqw}
  .inv-card[data-noquote] .inv-meta{top:53.8%;bottom:auto;translate:none}
  .inv-quote{left:0;right:0;top:auto;bottom:0;height:28%;display:grid;place-items:center;padding:0 9%;background:none;font-size:4.3cqw;line-height:1.45;text-shadow:0 2px 6px rgba(0,0,0,.6)}
  /* CTA */
  .cta .wrap{flex-direction:column;align-items:stretch;gap:20px}
  .cta h2{font-size:clamp(30px,8vw,36px);line-height:1.2}
  .cta-right{flex-direction:column;align-items:center}
  .arrow-draw{display:none}
  .arrow-m{display:block!important;width:60px;height:70px;align-self:flex-start;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;margin:-6px 0 0 -4px}
  /* watching */
  .watch-head .h2{font-size:clamp(32px,9vw,40px);line-height:1.15}
  .watch-head .link-more{display:none}
  .w-grid{grid-template-columns:1fr;grid-template-areas:"big" "list" "more" "yt";row-gap:20px}
  .w-grid .more{display:inline-flex!important;margin-top:4px}
  .v-card.row{grid-template-columns:110px 1fr;padding:0;border:0;background:none}
  .v-card.row h3{font-size:14px;line-height:1.4}
  .v-card.big h3{font-size:17px;padding:14px 16px 18px}
  .yt{margin-top:8px}
  .f-cols{grid-template-columns:1fr 1fr}
  .f-cols > div:first-child{grid-column:1/-1}
  .ft-top{flex-direction:column;align-items:center;text-align:center}
  .ft-brand{display:flex;flex-direction:column;align-items:center}
  .ft-line{text-align:center}
  .ft-bottom{flex-direction:column-reverse;justify-content:center;text-align:center}
}
@media (max-width: 820px) and (max-height: 760px){
  .f-card{padding:18px 18px}
  .f-card h3{font-size:19px}
  .f-card ul{margin-top:12px;gap:8px}
  .f-card li{font-size:15px;line-height:1.45}
  .f-card .f-foot{padding-top:12px;font-size:14.5px}
  .follow .lead{font-size:15px}
}
@media (max-width: 520px){
  .f-cols{grid-template-columns:1fr;text-align:center}
  .f-cols ul{gap:0}
  .f-cols a,.ft-soon{display:inline-block;padding-block:9px}
  .ft-app ul{gap:0}
  .ft-series{grid-template-columns:1fr}
  .totop{margin-inline:auto}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}