:root{
    --paper:#FCFDFD;--paper-2:#F4F7F8;--paper-3:#EAF0F2;
    --ink:#0E1417;--ink-2:#33424A;--muted:#5D6B72;--muted-2:#8A959B;
    --line:rgba(14,20,23,.08);--line-2:rgba(14,20,23,.14);
    --teal:#026282;--teal-600:#0A7397;--teal-700:#045E7C;--teal-deep:#013F55;
    --teal-tint:#E6F1F4;--teal-tint-2:#D0E5EB;
    /* single accent - used sparingly, never as a second brand colour */
    --amber:#E1932F;--amber-soft:#F6C97E;
    /* top of the page is flat #FCFCFE so it blends into the hero artwork */
    --paper-top:#FCFCFE;
    /* nav's height in normal flow: 16px top padding + 62px glass bar */
    --nav-h:78px;
    --radius:22px;--maxw:1360px;
    /* vertical rhythm: one knob for the whole page */
    --sec-pad:clamp(40px,5vw,78px);
    --gutter:clamp(18px,3.4vw,44px);
    --measure:62ch;
    --ease:cubic-bezier(.22,1,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
    --shadow-sm:0 1px 2px rgba(14,20,23,.05);
    --shadow:0 2px 8px rgba(14,20,23,.04),0 22px 48px -26px rgba(14,20,23,.22);
    --shadow-lg:0 6px 18px rgba(14,20,23,.05),0 50px 100px -46px rgba(14,20,23,.30);
    --glass-bg:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.52));
    --glass-brd:1px solid rgba(255,255,255,.65);
    --glass-ring:0 0 0 1px rgba(14,20,23,.045);--glass-hi:inset 0 1px 0 rgba(255,255,255,.85);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
  h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative}
  .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
  .display{letter-spacing:-.03em;line-height:1.0}
  :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

  /* scroll progress */
  .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;transform:scaleX(0);transform-origin:left;
    background:linear-gradient(90deg,var(--teal-600),var(--teal),var(--teal-deep));box-shadow:0 0 12px rgba(2,98,130,.5)}

  /* background */
  .bg{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:var(--paper)}
  .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
  .b1{width:640px;height:640px;left:-180px;top:-160px;background:radial-gradient(circle,rgba(2,98,130,.30),transparent 68%);animation:drift1 26s var(--ease) infinite alternate}
  .b2{width:600px;height:600px;right:-160px;top:-100px;background:radial-gradient(circle,rgba(150,120,255,.24),transparent 68%);animation:drift2 30s var(--ease) infinite alternate}
  .b3{width:720px;height:720px;left:30%;top:36%;background:radial-gradient(circle,rgba(80,180,220,.20),transparent 66%);animation:drift3 34s var(--ease) infinite alternate}
  .b4{width:520px;height:520px;right:6%;top:60%;background:radial-gradient(circle,rgba(255,170,130,.16),transparent 66%);animation:drift1 28s var(--ease) infinite alternate-reverse}
  @keyframes drift1{to{transform:translate(80px,60px) scale(1.1)}}
  @keyframes drift2{to{transform:translate(-70px,50px) scale(1.05)}}
  @keyframes drift3{to{transform:translate(-60px,-60px) scale(1.12)}}
  .bg-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
    background-image:linear-gradient(rgba(14,20,23,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(14,20,23,.035) 1px,transparent 1px);background-size:60px 60px;
    -webkit-mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 30%,transparent 78%)}
  .bg-noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.028;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* reveal - kept short so scrolling never waits on the animation */
  .js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
  .js [data-reveal].is-visible{opacity:1;transform:none}
  .js [data-reveal="scale"]{transform:translateY(16px) scale(.98)}
  .js [data-reveal="scale"].is-visible{transform:none}
  .js .mask{display:block;overflow:hidden}
  .js .mask>*{display:block;transform:translateY(110%);transition:transform .55s var(--ease)}
  .js .mask.is-visible>*{transform:none}

  /* buttons */
  /* padding and size scale with the viewport so button pairs never wrap */
  .btn{position:relative;font-weight:600;font-size:clamp(13px,1.15vw,15px);font-family:inherit;border:none;cursor:pointer;border-radius:999px;padding:clamp(10px,1.2vw,13px) clamp(14px,1.9vw,25px);display:inline-flex;align-items:center;justify-content:center;gap:clamp(6px,.7vw,9px);white-space:nowrap;overflow:hidden;transition:transform .2s var(--ease),box-shadow .3s var(--ease),background .25s,border-color .2s,color .2s}
  .btn::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
  .btn:hover::after{transform:translateX(120%)}
  .btn:active{transform:translateY(1px) scale(.99)}
  .btn-primary{background:linear-gradient(135deg,var(--teal-600),var(--teal-deep));color:#fff;box-shadow:0 1px 2px rgba(14,20,23,.1),0 12px 26px -12px rgba(2,98,130,.55)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(14,20,23,.12),0 20px 40px -14px rgba(2,98,130,.65)}
  .btn-white{background:var(--glass-bg);color:var(--ink);border:var(--glass-brd);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--glass-ring),var(--glass-hi),var(--shadow-sm)}
  .btn-white:hover{color:var(--teal);transform:translateY(-2px);box-shadow:var(--glass-ring),var(--glass-hi),var(--shadow)}
  .btn-amber{background:linear-gradient(135deg,var(--amber-soft),var(--amber));color:#33260C;box-shadow:0 1px 2px rgba(0,0,0,.16),0 14px 30px -14px rgba(225,147,47,.7)}
  .btn-amber:hover{transform:translateY(-2px);box-shadow:0 2px 5px rgba(0,0,0,.2),0 22px 44px -16px rgba(225,147,47,.8)}
  .btn-ghost{background:transparent;color:var(--ink-2);padding:10px 8px}
  .btn-ghost::after{display:none}.btn-ghost:hover{color:var(--teal)}
  .btn-sm{padding:10px 19px;font-size:14px}

  /* nav */
  .nav-outer{position:sticky;top:0;z-index:100;padding-top:16px;transition:padding-top .4s var(--ease)}
  .nav-outer.scrolled{padding-top:9px}
  /* the bar hugs its content and sits hard left, so the right half of the hero
     stays clear of the artwork's "Scale" card */
  .nav-outer>.wrap{max-width:1440px;padding-left:clamp(18px,3vw,64px)}
  .nav-glass{width:max-content;max-width:100%;margin:0;height:62px;padding:0 12px 0 22px;display:flex;align-items:center;gap:clamp(18px,2.6vw,44px);border-radius:20px;
    background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.5));-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
    border:1px solid rgba(255,255,255,.6);box-shadow:var(--glass-ring),var(--glass-hi),0 12px 34px -18px rgba(14,20,23,.28);
    transition:height .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease),border-radius .4s var(--ease)}
  .nav-outer.scrolled .nav-glass{height:54px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.66));-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);box-shadow:var(--glass-ring),var(--glass-hi),0 16px 40px -16px rgba(14,20,23,.34)}
  .brand img{height:28px;display:block}
  .nav-links{display:flex;gap:32px;align-items:center}
  .nav-links a{position:relative;font-size:14.5px;font-weight:500;color:var(--ink-2);padding:4px 0;transition:color .25s}
  .nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--teal-600));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);box-shadow:0 0 10px rgba(2,98,130,.5)}
  .nav-links a:hover{color:var(--teal)}.nav-links a:hover::after{transform:scaleX(1)}
  .nav-cta{display:flex;gap:8px;align-items:center}
  .burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
  .burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}

  /* hero - copy hard left, artwork bleeding off the right edge.
     Flat #FCFCFE background so the artwork's own sky blends seamlessly. */
  /* Pulled up under the sticky nav at every width so the page starts on one flat
     colour with no band above the artwork. The background fades out at the
     bottom so the page's grid texture returns gradually instead of at a hard
     edge - that plus the image's own bottom fade blends both ends. */
  .hero{position:relative;text-align:left;isolation:isolate;overflow:hidden;
    display:flex;align-items:center;
    margin-top:calc(-1 * var(--nav-h));
    background:linear-gradient(180deg,var(--paper-top) 0,var(--paper-top) 74%,transparent 100%);
    padding:calc(var(--nav-h) + clamp(32px,4.5vw,80px)) 0 clamp(48px,8vw,120px)}
  /* the copy sits further left than the rest of the page on purpose */
  .hero>.wrap{max-width:1440px;padding-left:clamp(18px,3vw,64px);width:100%}
  /* The artwork is 1.68:1. Anchoring it to the top of the page and making the
     hero exactly as tall as the art means the sky starts at y=0 (behind the
     glass nav) and the mountain base lands on the hero's bottom edge - no white
     band above, nothing clipped. Art is 72vw wide (capped 1450px) => 42.9vw tall. */
  @media(min-width:1181px){
    /* art spans the hero exactly: sky at the page top, mountain base at the fold */
    .hero{min-height:min(42.9vw,863px)}
    .hero-art{top:0;bottom:auto}
  }
  /* 901–1180: art narrows to 54vw so it clears the copy, and is too short to
     span the hero - keep it bottom-anchored there. */
  @media(min-width:901px) and (max-width:1180px){
    .hero{min-height:calc(32.2vw + 72px)}
  }
  /* pre-cropped so its pale left edge falls under the copy column;
     the mask hides the crop seam against the page background */
  .hero-art{position:absolute;right:0;bottom:0;z-index:-1;pointer-events:none;
    width:clamp(720px,72%,1450px);
    /* fade must finish before 19%, where the "Start" card begins */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%);
            mask-image:linear-gradient(90deg,transparent 0,#000 13%)}
  /* second fade on the child, so the two directions compose without needing
     mask-composite (patchy support) - otherwise the mountain cuts off hard */
  .hero-art img{display:block;width:100%;height:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 88%,transparent 100%)}
  .hero-content{position:relative;z-index:1}
  .hero-copy{max-width:600px}
  h1.hero-h{font-size:clamp(30px,4.4vw,56px);font-weight:800;line-height:1.08;letter-spacing:-.035em}
  /* the masks clip overflow, so leave room for descenders */
  h1.hero-h .mask{padding-bottom:.08em;margin-bottom:-.08em}
  h1.hero-h em{font-style:normal;background:linear-gradient(120deg,var(--teal-600),var(--teal),var(--teal-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .hero-sub{max-width:34ch;margin:20px 0 0;font-size:clamp(15px,1.5vw,19px);color:var(--muted);line-height:1.6}
  /* nowrap: the two join buttons must stay on one line at every width */
  .hero-cta{display:flex;gap:clamp(8px,1vw,12px);justify-content:flex-start;margin-top:clamp(22px,3vw,32px);flex-wrap:nowrap}
  .btn .barrow{width:17px;height:17px;flex-shrink:0;transition:transform .25s var(--ease)}
  .btn:hover .barrow{transform:translateX(3px)}
  .hero-trust{list-style:none;display:flex;align-items:center;flex-wrap:wrap;margin-top:26px}
  .hero-trust li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--muted)}
  .hero-trust li+li::before{content:'·';margin:0 15px;color:var(--muted-2);font-weight:700}
  .hero-trust .material-symbols-outlined{font-size:18px;color:var(--teal);
    font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 20}
  .js .hero-anim{opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
  .js body.loaded .hero-anim{opacity:1;transform:none}
  .js .hero-h .mask>*{transform:translateY(110%);transition:transform .65s var(--ease)}
  .js body.loaded .hero-h .mask>*{transform:none}

  /* section shell + seams */
  section{padding:var(--sec-pad) 0;position:relative}
  /* two touching sections would otherwise stack two full pads into a dead band */
  section+section{padding-top:clamp(22px,2.4vw,38px)}
  /* ...unless the next one paints its own background, which needs the full inset */
  section+.soft,section+.dark{padding-top:var(--sec-pad)}
  .soft{background:linear-gradient(180deg,transparent,rgba(234,240,242,.55) 12%,rgba(234,240,242,.55) 88%,transparent)}
  .seam{height:1px;max-width:var(--maxw);margin:0 auto;position:relative;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
  .seam::after{content:'';position:absolute;left:50%;top:-40px;transform:translateX(-50%);width:340px;height:80px;background:radial-gradient(ellipse,rgba(2,98,130,.10),transparent 70%);pointer-events:none}
  .sec-head{max-width:min(var(--measure),720px);margin:0 auto clamp(26px,3vw,44px);text-align:center}
  .sec-head h2{font-size:clamp(30px,4.6vw,50px);font-weight:800;letter-spacing:-.03em;margin-top:14px;line-height:1.06}
  .sec-head h2 em{font-style:normal;background:linear-gradient(120deg,var(--teal-600),var(--teal),var(--teal-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .sec-head p{color:var(--muted);font-size:18px;margin:16px auto 0;line-height:1.65;max-width:var(--measure)}

  /* dark beats - each big idea gets its own screen */
  .dark{background:linear-gradient(170deg,#02485F,var(--teal-deep) 55%,#012B3A);color:#fff;overflow:hidden}
  .dark::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(700px 420px at 12% 0%,rgba(80,180,220,.16),transparent 62%),
               radial-gradient(620px 380px at 92% 96%,rgba(225,147,47,.12),transparent 62%)}
  .dark>*{position:relative;z-index:1}
  .dark .eyebrow{color:var(--amber-soft)}
  .dark h2{color:#fff}
  .dark h2 em{background:linear-gradient(120deg,var(--amber-soft),var(--amber));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .dark p{color:rgba(255,255,255,.76)}
  .glass-dark{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 40px 80px -40px rgba(0,0,0,.6)}

  /* honest labelling for anything mocked up */
  .illus{text-align:center;margin-top:22px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted-2)}
  .illus.on-dark{color:rgba(255,255,255,.5);margin-top:18px}

  .glass{position:relative;background:var(--glass-bg);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:var(--glass-brd);box-shadow:var(--glass-ring),var(--glass-hi),var(--shadow-sm);border-radius:var(--radius);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
  .glass::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(2,98,130,.12),transparent 62%)}
  .glass:hover{transform:translateY(-5px);box-shadow:var(--glass-ring),0 0 0 1px rgba(2,98,130,.16),var(--glass-hi),var(--shadow-lg)}
  .glass:hover::before{opacity:1}

  /* about */
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,64px);align-items:center;margin-bottom:clamp(48px,5.5vw,76px)}
  .about-grid h2{font-size:clamp(30px,4.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:14px}
  .about-grid .sright{font-size:18px;color:var(--ink-2);line-height:1.6;margin-top:18px}
  .about-grid .btn{margin-top:24px}
  /* min-width:0 keeps the card from blowing out its grid track */
  .about-vis,.post-wrap{min-width:0}
  /* caption under a product mock */
  .vis-cap{margin-top:16px;text-align:center;font-size:12.5px;font-weight:500;color:var(--muted-2)}
  .about-vis .vis-cap{margin-top:28px}

  /* ---- Invest-page listing card (matches product fsc design) ---- */
  .landing-invest-card{
    position:relative;transform-style:preserve-3d;max-width:420px;width:100%;margin:0 auto}
  .landing-invest-card .fsc-glow{position:absolute;inset:-4px;background:linear-gradient(to right,rgba(0,71,96,.08),rgba(0,70,102,.08));
    border-radius:32px;filter:blur(20px);opacity:.5;transition:opacity .6s ease;pointer-events:none}
  .landing-invest-card:hover .fsc-glow{opacity:.8}
  .landing-invest-card .fsc-card{position:relative;background:#fff;border-radius:28px;overflow:hidden;
    box-shadow:0 4px 20px rgba(0,96,128,.06);border:1px solid rgba(191,200,206,.3);
    transition:box-shadow .3s ease;transform-style:preserve-3d}
  .landing-invest-card:hover .fsc-card{box-shadow:0 0 24px rgba(0,96,128,.18)}
  .landing-invest-card .fsc-cover{position:relative;height:180px;width:100%;padding:12px}
  .landing-invest-card .fsc-cover img{width:100%;height:100%;object-fit:cover;border-radius:20px;display:block}
  .landing-invest-card .fsc-cover-overlay{position:absolute;inset:12px;
    background:linear-gradient(to top,rgba(0,71,96,.35),transparent);border-radius:20px;pointer-events:none}
  .landing-invest-card .fsc-badges{position:absolute;top:20px;left:20px;display:flex;gap:8px;flex-wrap:wrap}
  .landing-invest-card .fsc-badge{padding:5px 14px;border-radius:9999px;font-size:12px;font-weight:600;
    font-family:'Space Grotesk',sans-serif;line-height:1;letter-spacing:.05em;background:rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);
    color:#004760;white-space:nowrap}
  .landing-invest-card .fsc-body{padding:0 20px 20px;margin-top:-56px;position:relative;z-index:10}
  .landing-invest-card .fsc-glass{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:28px 28px 0;
    box-shadow:0 4px 20px rgba(0,96,128,.06)}
  .landing-invest-card .fsc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:8px}
  .landing-invest-card .fsc-name-with-logo{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
  /* brand mark: white Xoventra logo on a solid teal disc */
  .landing-invest-card .fsc-company-logo{width:44px;height:44px;border-radius:50%;background:var(--teal);
    display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;padding:9px}
  .landing-invest-card .fsc-company-logo img{width:100%;height:100%;object-fit:contain;
    filter:brightness(0) invert(1)}
  .landing-invest-card .fsc-company-name{font-size:1.125rem;font-weight:600;color:#191c1e;margin:0;line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Space Grotesk',sans-serif;letter-spacing:-.015em}
  .landing-invest-card .fsc-description{font-size:.875rem;color:#40484d;margin:0 0 20px;line-height:1.45;min-height:2.9em;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:'Plus Jakarta Sans',sans-serif}
  .landing-invest-card .fsc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px 0;
    border-top:1px solid rgba(191,200,206,.3);border-bottom:1px solid rgba(191,200,206,.3);margin-bottom:20px}
  .landing-invest-card .fsc-metric{display:flex;flex-direction:column;gap:4px;min-width:0}
  .landing-invest-card .fsc-metric-right{text-align:right}
  .landing-invest-card .fsc-metric-right .fsc-metric-value{text-align:right}
  .landing-invest-card .fsc-metric-label{font-size:.6875rem;font-weight:600;color:#6b7280;text-transform:uppercase;
    letter-spacing:.06em;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .landing-invest-card .fsc-metric-value{font-size:1rem;font-weight:700;color:#004760;font-family:'Space Grotesk',sans-serif;
    line-height:1.15;white-space:nowrap}
  .landing-invest-card .fsc-metric-value i{font-style:normal;font-size:12px;font-weight:600;color:#6b7280}
  .landing-invest-card .fsc-view-btn{position:absolute;bottom:-18px;right:-16px;z-index:20;display:flex;align-items:center;
    gap:6px;padding:10px 20px;background:#004760;color:#fff;border:none;border-radius:10px;font-size:.8125rem;font-weight:600;
    font-family:'Plus Jakarta Sans',sans-serif;line-height:1;white-space:nowrap;text-decoration:none;
    box-shadow:0 4px 16px rgba(0,71,96,.25);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
  .landing-invest-card .fsc-view-btn:hover{transform:scale(1.05);box-shadow:0 6px 24px rgba(0,71,96,.35)}
  .landing-invest-card .fsc-view-btn:active{transform:scale(.95)}
  .landing-invest-card .fsc-view-btn .material-symbols-outlined{font-size:18px}

  /* steps */
  .steps{display:grid;gap:16px;max-width:920px;margin:0 auto}
  .step{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;padding:26px 28px}
  .step:hover{transform:translateX(6px) translateY(-2px)}
  .step-num{font-size:16px;font-weight:800;color:var(--teal);width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--teal-tint);border:1px solid var(--teal-tint-2);transition:transform .35s var(--ease)}
  .step:hover .step-num{transform:scale(1.08)}
  .step h3{font-size:20px;font-weight:700}
  .step .slede{color:var(--muted);font-size:15px;margin:4px 0 16px}
  .step-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .scard{padding:13px 16px;border-radius:13px;background:rgba(255,255,255,.5);border:1px solid var(--line)}
  .scard .stag{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;color:var(--teal)}
  .scard.i .stag{color:var(--muted-2)}
  .scard p{font-size:13.5px;color:var(--ink-2)}
  /* step 3 - the weekly habit is the whole argument, so it gets the accent */
  .step.hot{box-shadow:var(--glass-ring),0 0 0 1px rgba(225,147,47,.35),var(--glass-hi),var(--shadow)}
  .step.hot .step-num{background:rgba(225,147,47,.14);border-color:rgba(225,147,47,.4);color:#A4650C}
  .step.hot h3::after{content:'Every week';margin-left:12px;vertical-align:middle;font-size:10.5px;
    font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#A4650C;
    background:rgba(225,147,47,.14);border:1px solid rgba(225,147,47,.35);border-radius:999px;padding:4px 10px}

  /* platform preview */
  .preview{border-radius:26px;padding:14px;max-width:1000px;margin:0 auto;background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:var(--glass-brd);box-shadow:var(--glass-ring),var(--glass-hi),var(--shadow-lg)}
  .browser{border-radius:16px;border:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.55)}
  .browser-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(255,255,255,.6);border-bottom:1px solid var(--line)}
  .browser-bar i{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
  .browser-url{margin-left:12px;font-size:12.5px;color:var(--muted-2);font-weight:500}
  .feed{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;padding:20px}
  .feed h4{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
  .scardt{background:rgba(255,255,255,.66);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .scardt:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .sct{display:flex;align-items:center;gap:11px;margin-bottom:12px}
  .slogo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;flex-shrink:0}
  .sname2{font-weight:700;font-size:14.5px}.scat{font-size:11px;font-weight:600;color:var(--muted-2);letter-spacing:.04em}
  .sdesc{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:12px}
  .sfoot{display:flex;align-items:center;justify-content:space-between}
  .sraise{font-size:12.5px;font-weight:700;color:var(--teal)}
  .minibar{height:5px;width:110px;border-radius:5px;background:var(--paper-3);overflow:hidden}
  .minibar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--teal-600),var(--teal))}
  .matchpanel{background:linear-gradient(180deg,rgba(230,241,244,.9),rgba(208,229,235,.7));border:1px solid var(--teal-tint-2);border-radius:14px;padding:16px}
  .mph{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
  .mrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--teal-tint-2)}
  .mrow:last-child{border-bottom:none}
  .mdot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0}
  .mrow span{font-size:13px;color:var(--ink-2)}.mrow b{font-weight:700}

  /* ===== MARQUEE (shared) ===== */
  .marquee{overflow:hidden;position:relative;padding:6px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .mtrack{display:flex;gap:18px;width:max-content;will-change:transform;animation:marq var(--dur,46s) linear infinite}
  .marquee:hover .mtrack{animation-play-state:paused}
  @keyframes marq{to{transform:translateX(-50%)}}

  /* category tiles */
  /* compact icon pill - the icon carries the category, no photography */
  .stile{flex:0 0 auto;display:inline-flex;align-items:center;gap:13px;padding:10px 24px 10px 10px;
    border-radius:999px;white-space:nowrap;cursor:default;
    background:var(--glass-bg);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    border:var(--glass-brd);box-shadow:var(--glass-ring),var(--glass-hi),var(--shadow-sm);
    transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
  .stile:hover{transform:translateY(-4px);box-shadow:var(--glass-ring),0 0 0 1px rgba(2,98,130,.16),var(--glass-hi),var(--shadow)}
  .stile .semo{width:46px;height:46px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(180deg,var(--teal-tint),var(--teal-tint-2));border:1px solid var(--teal-tint-2);
    transition:transform .35s var(--ease)}
  .stile:hover .semo{transform:scale(1.08) rotate(-5deg)}
  .stile .sname3{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}

  /* problem stats */
  /* stays three-across at every width - everything inside scales instead */
  .statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.8vw,28px);max-width:1000px;margin:0 auto}
  .stat{text-align:center;padding:clamp(16px,3vw,34px) clamp(6px,1.4vw,20px);border-radius:var(--radius);background:var(--glass-bg);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:var(--glass-brd);
    box-shadow:var(--glass-ring),var(--glass-hi),var(--shadow-sm);min-width:0}
  .statnum{font-size:clamp(21px,4.6vw,60px);font-weight:800;letter-spacing:-.035em;line-height:1;
    background:linear-gradient(120deg,var(--teal-600),var(--teal-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    font-variant-numeric:tabular-nums}
  .stat.accent .statnum{background:linear-gradient(120deg,var(--amber),#B9700F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .statlab{margin-top:clamp(8px,1.2vw,14px);font-size:clamp(11px,1.15vw,14.5px);color:var(--muted);
    line-height:1.4;max-width:24ch;margin-inline:auto}
  .statsrc{text-align:center;margin-top:clamp(18px,2.4vw,28px);font-size:12.5px;color:var(--muted-2);font-weight:500}

  /* ---- the feed / social proof of posting ---- */
  /* mirror of .prog-grid but reversed, so the page zig-zags */
  .social-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:center}
  .social-copy h2{font-size:clamp(30px,4.4vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin-top:14px}
  .social-copy>p{font-size:18px;line-height:1.65;margin-top:20px;color:var(--ink-2);max-width:var(--measure)}
  .social-copy .btn{margin-top:8px}

  .post{padding:22px 24px;border-radius:var(--radius);background:var(--glass-bg);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
    border:var(--glass-brd);box-shadow:var(--glass-ring),var(--glass-hi),var(--shadow)}
  .post-top{display:flex;align-items:center;gap:12px}
  .post-av{width:42px;height:42px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;
    background:linear-gradient(180deg,var(--teal-tint),var(--teal-tint-2));border:1px solid var(--teal-tint-2)}
  .post-av .material-symbols-outlined{font-size:22px;color:var(--teal);
    font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24}
  .post-av.sm{width:30px;height:30px;border-radius:10px}
  .post-av.sm .material-symbols-outlined{font-size:16px}
  .post-who{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
  .post-badge{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--teal);background:var(--teal-tint);border:1px solid var(--teal-tint-2);
    border-radius:999px;padding:3px 8px}
  .post-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
  .post-follow{margin-left:auto;font-size:12px;font-weight:700;color:var(--teal);
    border:1px solid var(--teal-tint-2);background:rgba(255,255,255,.6);border-radius:999px;padding:6px 13px}
  .post-body{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:16px}
  .post-tag{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 13px;border-radius:11px;
    font-size:12.5px;font-weight:700;color:#A4650C;
    background:rgba(225,147,47,.12);border:1px solid rgba(225,147,47,.32)}
  .post-tag .material-symbols-outlined{font-size:17px;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20}
  .post-actions{display:flex;align-items:center;gap:20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
  .post-actions>span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
  .post-actions .material-symbols-outlined{font-size:18px;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20}
  .post-actions .post-watch{margin-left:auto;font-size:12px;font-weight:700;color:var(--teal)}
  /* Hit / Miss - hollow triangles, matching the vote control in the product */
  .post-actions .vote{gap:7px;font-weight:700}
  .post-actions .vote.hit{color:var(--teal)}
  .post-actions .vote.miss{color:var(--muted)}
  /* hollow, so the centre stays empty until a vote fills it in-product */
  .vtri{width:16px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linejoin:round}
  .post-reply{display:flex;align-items:flex-start;gap:11px;margin-top:14px;padding:12px 14px;border-radius:13px;
    background:rgba(255,255,255,.55);border:1px solid var(--line)}
  .post-reply p{font-size:13px;line-height:1.55;color:var(--ink-2)}
  .post-reply b{font-weight:700;color:var(--ink);margin-right:5px}

  /* progress becomes your pitch */
  .prog-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:center}
  .prog-copy h2{font-size:clamp(30px,4.4vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin-top:14px}
  .prog-copy>p{font-size:18px;line-height:1.65;margin-top:20px;max-width:var(--measure)}
  .ticks{list-style:none;margin:30px 0 34px;display:grid;gap:13px}
  .ticks li{position:relative;padding-left:32px;font-size:15px;color:rgba(255,255,255,.8);line-height:1.55}
  .ticks li::before{content:'';position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;
    background:rgba(225,147,47,.18);border:1px solid rgba(246,201,126,.5)}
  .ticks li::after{content:'';position:absolute;left:5.5px;top:10px;width:7px;height:4px;
    border-left:2px solid var(--amber-soft);border-bottom:2px solid var(--amber-soft);transform:rotate(-45deg)}
  /* same list on a pale background */
  .ticks.light li{color:var(--ink-2)}
  .ticks.light li::before{background:var(--teal-tint);border-color:var(--teal-tint-2)}
  .ticks.light li::after{border-left-color:var(--teal);border-bottom-color:var(--teal)}

  .tl-panel{padding:28px 30px 24px}
  .tl-head{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:rgba(255,255,255,.6);padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.12)}
  .tl-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(225,147,47,.18)}
  .timeline{position:relative;padding:26px 0 4px 30px}
  /* the spine draws itself once the panel scrolls into view */
  .tl-line{position:absolute;left:5px;top:30px;bottom:22px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--amber-soft),rgba(246,201,126,.15));
    transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease-out) .05s}
  .js .tl-panel.is-visible .tl-line{transform:scaleY(1)}
  .tl-item{position:relative;padding-bottom:26px}
  .tl-item:last-child{padding-bottom:0}
  .tl-node{position:absolute;left:-30px;top:5px;width:12px;height:12px;border-radius:50%;
    background:var(--teal-deep);border:2px solid var(--amber-soft);box-shadow:0 0 0 4px rgba(1,63,85,.9)}
  .tl-when{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-soft)}
  .tl-what{font-size:15px;color:rgba(255,255,255,.86);line-height:1.5;margin-top:5px}

  /* twice a year vs every week */
  .compare{max-width:900px;margin:0 auto;border-radius:var(--radius);overflow:hidden;
    background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border:var(--glass-brd);box-shadow:var(--glass-ring),var(--glass-hi),var(--shadow)}
  .crow{display:grid;grid-template-columns:.85fr 1fr 1.15fr;gap:20px;align-items:center;
    padding:20px 26px;border-bottom:1px solid var(--line);font-size:15px;color:var(--muted)}
  .crow:last-child{border-bottom:none}
  .crow .clab{font-weight:700;color:var(--ink);font-size:14px}
  .crow .cx{font-weight:600;color:var(--teal);position:relative;padding-left:26px}
  .crow .cx::before{content:'';position:absolute;left:0;top:6px;width:14px;height:8px;
    border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
  .chead{background:rgba(255,255,255,.4);font-size:11px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted-2);padding:16px 26px}
  .chead .cx{color:var(--teal);font-size:11px;letter-spacing:.12em;padding-left:0}
  .chead .cx::before{display:none}

  /* email capture */
  .capture{display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap;justify-content:center}
  .capture input[type=email]{flex:1;min-width:240px;background:rgba(255,255,255,.72);border:1px solid var(--line-2);
    border-radius:999px;padding:14px 20px;font-family:inherit;font-size:15px;color:var(--ink);outline:none;
    transition:border-color .2s,box-shadow .2s}
  .capture input[type=email]:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(2,98,130,.14)}
  .capture .btn{flex-shrink:0}
  .capture-msg{flex-basis:100%;text-align:center;margin-top:4px;font-size:13.5px;font-weight:600;
    color:var(--teal);min-height:20px}
  .capture-msg.err{color:#B0392B}
  .capture-note{text-align:center;margin-top:20px;font-size:13px;color:var(--muted-2);font-weight:500}
  /* the cohort block sits on a dark band - lift the supporting text off it */
  .dark .capture input[type=email]{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.3)}
  .dark .capture input[type=email]:focus{border-color:var(--amber-soft);box-shadow:0 0 0 3px rgba(225,147,47,.28)}
  .dark .capture-msg{color:var(--amber-soft)}
  .dark .capture-msg.err{color:#FFB4A6}
  .dark .capture-note{color:rgba(255,255,255,.55)}

  /* faq */
  .faq{max-width:760px;margin:0 auto}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{width:100%;background:none;border:none;color:var(--ink);text-align:left;cursor:pointer;font-family:inherit;padding:24px 0;font-size:18px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color .25s}
  .faq-q .fi{flex-shrink:0;width:22px;height:22px;position:relative}
  .faq-q .fi::before,.faq-q .fi::after{content:'';position:absolute;background:var(--teal);top:50%;left:50%;border-radius:2px;transition:transform .3s var(--ease)}
  .faq-q .fi::before{width:13px;height:2px;transform:translate(-50%,-50%)}
  .faq-q .fi::after{width:2px;height:13px;transform:translate(-50%,-50%)}
  .faq-item.open .fi::after{transform:translate(-50%,-50%) scaleY(0)}
  .faq-q:hover{color:var(--teal)}.faq-item.open .faq-q{color:var(--teal)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);color:var(--muted);font-size:15px;line-height:1.65}
  .faq-a p{padding-bottom:24px;max-width:660px}

  /* final */
  .final{position:relative;text-align:center;border-radius:30px;padding:clamp(48px,7vw,80px) clamp(20px,3vw,32px);overflow:hidden;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:var(--glass-brd);box-shadow:var(--glass-ring),var(--glass-hi),var(--shadow-lg)}
  .final .faura{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(440px 280px at 28% 12%,rgba(2,98,130,.16),transparent 60%),radial-gradient(440px 280px at 76% 90%,rgba(150,120,255,.14),transparent 60%),radial-gradient(440px 280px at 90% 18%,rgba(80,180,220,.16),transparent 60%);animation:auraPulse 9s ease-in-out infinite}
  @keyframes auraPulse{0%,100%{opacity:.85}50%{opacity:1;transform:scale(1.04)}}
  .final>*{position:relative;z-index:1}
  .final h2{font-size:clamp(32px,5vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
  .final p{color:var(--muted);font-size:clamp(15px,1.6vw,18px);margin:16px auto 0;max-width:460px}
  /* centred, and the two buttons stay side by side like the hero pair */
  .final .hero-cta{margin-top:30px;justify-content:center}

  /* footer */
  footer{padding:66px 0 40px;border-top:1px solid var(--line);position:relative}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:40px;margin-bottom:46px}
  .foot-brand img{height:30px;margin-bottom:16px}
  .foot-brand p{color:var(--muted);font-size:14px;max-width:270px;line-height:1.6}
  .foot-col h5{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
  .foot-col a{display:block;color:var(--ink-2);font-size:14px;padding:6px 0;transition:color .2s,transform .2s var(--ease)}
  .foot-col a:hover{color:var(--teal);transform:translateX(3px)}
  /* input + button stay on one line; only the status message wraps below */
  .news{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
  .news input{flex:1 1 140px;min-width:0}
  .news button{flex:0 0 auto}
  .news .capture-msg{flex-basis:100%;text-align:left;font-size:12.5px;margin-top:8px;min-height:0}
  .news input{flex:1;background:rgba(255,255,255,.6);border:1px solid var(--line-2);border-radius:11px;padding:11px 14px;font-family:inherit;font-size:13.5px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
  .news input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(2,98,130,.12)}
  .news button{background:linear-gradient(135deg,var(--teal-600),var(--teal-deep));color:#fff;border:none;border-radius:11px;padding:0 18px;font-weight:600;font-size:13.5px;cursor:pointer;transition:transform .2s var(--ease)}
  .news button:hover{transform:translateY(-2px)}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap;gap:16px}
  .foot-bottom p{font-size:13px;color:var(--muted-2)}
  .foot-legal-links{display:flex;gap:20px;flex-wrap:wrap}
  .foot-legal-links a{font-size:13px;color:var(--muted);transition:color .2s}
  .foot-legal-links a:hover{color:var(--teal)}
  .fsoc{display:flex;gap:10px}
  .fsoc a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);background:rgba(255,255,255,.5);transition:transform .25s var(--ease),border-color .2s,color .2s,box-shadow .25s}
  .fsoc a:hover{transform:translateY(-3px);border-color:var(--teal);color:var(--teal);box-shadow:var(--shadow-sm)}
  .fsoc svg{width:16px;height:16px}

  /* ---- menu: a glass panel dropping from the nav, not a full-screen wash ---- */
  .mm-scrim{position:fixed;inset:0;z-index:98;background:rgba(14,20,23,.28);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    opacity:0;transition:opacity .3s var(--ease)}
  .mm-scrim.open{opacity:1}
  .mobile-menu{position:fixed;z-index:99;top:calc(env(safe-area-inset-top,0px) + 84px);
    left:clamp(12px,4vw,28px);right:clamp(12px,4vw,28px);max-width:420px;margin-inline:auto;
    padding:12px;border-radius:24px;display:flex;flex-direction:column;gap:4px;
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.84));
    -webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:var(--glass-ring),var(--glass-hi),0 34px 70px -26px rgba(14,20,23,.42);
    opacity:0;transform:translateY(-12px) scale(.97);transform-origin:top center;pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease)}
  .mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
  .mm-link{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:16px;
    color:var(--ink);transition:background .2s}
  .mm-link:hover,.mm-link:focus-visible{background:rgba(2,98,130,.07)}
  .mm-link b{display:block;font-size:15.5px;font-weight:700;line-height:1.25}
  .mm-link i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
  .mm-ic{width:40px;height:40px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;
    background:linear-gradient(180deg,var(--teal-tint),var(--teal-tint-2));
    border:1px solid var(--teal-tint-2);color:var(--teal);
    font-size:21px;font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24}
  .mm-sep{height:1px;margin:6px 12px;background:var(--line)}
  .mm-cta{width:100%;margin-top:6px;font-size:15px;padding:14px 20px}
  /* burger morphs to a close icon while the panel is open */
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Below ~1180 the art's "Start" card would sit on top of the copy, so pull the
     artwork narrower (its left edge moves right) and cap the copy to match. */
  @media(max-width:1180px){
    .hero-art{width:clamp(500px,54%,760px)}
    .hero-copy{max-width:52%}
  }

  /* legal pages (terms / privacy) */
  .legal{padding:clamp(90px,10vw,140px) 0 clamp(70px,8vw,110px)}
  .legal .wrap{max-width:760px}
  .legal-back{display:inline-block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:30px;transition:color .2s}
  .legal-back:hover{color:var(--teal)}
  .legal h1{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
  .legal-updated{margin-top:12px;font-size:13px;font-weight:600;color:var(--muted-2)}
  .legal-lede{margin-top:30px;font-size:18px;line-height:1.65;color:var(--ink-2);
    padding:22px 26px;border-radius:16px;background:rgba(230,241,244,.6);border:1px solid var(--teal-tint-2)}
  .legal h2{font-size:21px;font-weight:700;letter-spacing:-.015em;margin-top:44px}
  .legal p{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--ink-2);max-width:var(--measure)}
  .legal ul{margin-top:14px;padding-left:22px;display:grid;gap:10px;max-width:var(--measure)}
  .legal li{font-size:15.5px;line-height:1.65;color:var(--ink-2)}
  .legal a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
  .legal-note{margin-top:52px;padding:18px 22px;border-radius:14px;font-size:13.5px;
    background:rgba(255,255,255,.6);border:1px solid var(--line-2);color:var(--muted)}

  @media(max-width:900px){
    /* Log in and Get started both move into the menu panel */
    .nav-links,.nav-cta .btn-ghost,.nav-cta .btn-primary{display:none}
    .burger{display:flex}
    .nav-glass{padding:0 10px 0 18px}
    .about-grid{grid-template-columns:1fr;gap:28px}
    .feed{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    /* No room beside the copy: the art becomes a full-width base under it.
       Art height is 59.5vw (100vw / 1.68). Reserving only 46vw pulls it up by
       so the summit - which sits 10.8% down the image - rises above the CTA row
       instead of sitting in a gap below it. Nothing is cropped. */
    .hero{padding-bottom:calc(42vw + 6px)}
    .hero>.wrap{padding-left:var(--gutter)}
    .hero-art{width:100%;right:0;opacity:1}
    .hero-copy{max-width:100%}
    .hero-sub{max-width:46ch}
    .prog-grid{grid-template-columns:1fr;gap:44px}
    /* stacked, the copy should lead and the mock follow */
    .social-grid{grid-template-columns:1fr;gap:40px}
    .social-copy{order:1}.post-wrap{order:2}
    .crow{grid-template-columns:1fr;gap:6px;padding:18px 22px}
    .crow .clab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
    .chead{display:none}
    .money{flex-direction:column;text-align:center}
  }
  @media(max-width:680px){
    .step{grid-template-columns:1fr;gap:14px}.step-split{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .landing-invest-card{max-width:360px}
    .landing-invest-card .fsc-cover{height:150px;padding:8px}
    .landing-invest-card .fsc-cover-overlay{inset:8px}
    .landing-invest-card .fsc-badges{top:16px;left:16px}
    .landing-invest-card .fsc-badge{font-size:.625rem;padding:4px 10px}
    .landing-invest-card .fsc-body{padding:0 14px 14px;margin-top:-40px}
    .landing-invest-card .fsc-glass{padding:20px 20px 0;border-radius:14px}
    .landing-invest-card .fsc-metrics{gap:12px;padding:14px 0}
    .landing-invest-card .fsc-view-btn{bottom:-16px;right:-12px;padding:10px 18px}
    .post-actions{flex-wrap:wrap;gap:14px}.post-actions .post-watch{margin-left:0;flex-basis:100%}
    .capture{flex-direction:column}.capture .btn{width:100%}
    .ic-stats,.compare,.preview{min-width:0}
  }
  @media(max-width:600px){
    /* the arrows and the trust row are the first things to go so the two
       join buttons keep their full labels on one line */
    .btn .barrow{display:none}
    .hero-trust{display:none}
    .hero-sub{max-width:100%}
    .sec-head{margin-bottom:clamp(28px,6vw,40px)}
    .final{padding:44px 20px}
    .foot-bottom{flex-direction:column;align-items:flex-start}
  }
  @media(max-width:420px){
    .landing-invest-card{max-width:300px}
    .landing-invest-card .fsc-cover{height:130px}
    .hero-cta{gap:8px}
    .btn{padding:10px 12px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .js [data-reveal],.js .mask>*,.js .hero-anim,.js .hero-h .mask>*{opacity:1!important;transform:none!important}
    .marquee{overflow-x:auto}.mtrack{animation:none!important}
    .tl-line{transform:scaleY(1)!important}
  }

  /* ============================================================
     Xoventra additions / overrides
     - category tiles use Material Symbols icons (no emoji)
     ============================================================ */
  .stile .semo .material-symbols-outlined{font-size:25px;color:var(--teal);
    font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24}

  /* ---- sector icon tile on the feed cards ---- */
  .slogo{padding:6px;background:linear-gradient(180deg,var(--teal-tint),var(--teal-tint-2));border:1px solid var(--teal-tint-2)}
  .slogo .material-symbols-outlined{font-size:21px;color:var(--teal);
    font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24}

  section>.wrap,section>.marquee{position:relative;z-index:1}