/* Fiduciary website styles: fonts + shared design system + site layout */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url('fonts/BricolageGrotesque-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url('fonts/BricolageGrotesque-rupee.woff2') format('woff2');unicode-range:U+20B9}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/Figtree-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/Figtree-rupee.woff2') format('woff2');unicode-range:U+20B9}
/* Fiduciary design system — shared by the prototype (app) and the website.
   Look: soft clay 3D on a lavender canvas. Violet = Fiduciary, mint = aligned,
   apricot = on hold, coral = blocked, sky = approved by you.
   Fonts: 'Bricolage Grotesque' (display, numbers) + 'Figtree' (text). Load via
   fonts-embedded.css (offline single file) or fonts-files.css (website). */

:root{
  /* canvas + surfaces */
  --canvas:#EEEAFF;        /* lavender page */
  --canvas-deep:#E2DCFF;   /* section bands, tracks */
  --surface:#FFFFFF;
  --surface-tint:#F7F5FF;
  --line:#E4E0F8;

  /* ink */
  --ink:#1C1847;           /* headings, primary text */
  --ink-2:#4A4680;         /* body text */
  --muted:#5F5B92;         /* captions, meta */

  /* brand + states */
  --violet:#5B47F5;  --violet-deep:#3D2AD3; --violet-soft:#DCD6FF; --violet-glow:rgba(91,71,245,.35);
  --mint:#18B894;    --mint-soft:#D5F6EC;
  --apricot:#F28A1E; --apricot-soft:#FFEAD3;
  --coral:#EE4B66;   --coral-soft:#FFE0E6;
  --sky:#3F7CF2;     --sky-soft:#DDE8FF;
  --sun:#FFC83D;

  /* clay surfaces: top highlight, soft inner shade, coloured drop shadow */
  --clay:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -10px 18px rgba(91,71,245,.06),
    0 22px 44px -18px rgba(58,40,170,.30),
    0 6px 14px -6px rgba(58,40,170,.16);
  --clay-sm:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 22px -10px rgba(58,40,170,.30),
    0 3px 8px -4px rgba(58,40,170,.16);
  --clay-press: inset 0 3px 8px rgba(40,20,140,.25);

  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px; --r-pill:999px;

  --f-display:'Bricolage Grotesque', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --f-text:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- type ---------- */
.display{font-family:var(--f-display);font-weight:760;letter-spacing:-.03em;line-height:.98;color:var(--ink);font-variation-settings:'opsz' 96}
.h2{font-family:var(--f-display);font-weight:750;letter-spacing:-.03em;line-height:1.04;color:var(--ink);font-variation-settings:'opsz' 72}
.h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.015em;line-height:1.15;color:var(--ink);font-variation-settings:'opsz' 24}
.num{font-family:var(--f-display);font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 48}
.eyebrow{font-family:var(--f-text);font-weight:650;font-size:13px;letter-spacing:.02em;color:var(--violet)}
.lede{font-family:var(--f-text);font-size:19px;line-height:1.5;color:var(--ink-2)}
.meta{font-family:var(--f-text);font-size:13px;color:var(--muted)}

/* ---------- clay card ---------- */
.clay{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--clay)}
.clay-tint{background:linear-gradient(180deg,#FFFFFF, var(--surface-tint));border-radius:var(--r-lg);box-shadow:var(--clay)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:var(--r-pill);font:600 15px/1 var(--f-text);padding:13px 20px;cursor:pointer;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--violet-soft);outline-offset:2px}
.btn-primary{color:#fff;background:linear-gradient(180deg,#7563FF 0%,var(--violet) 55%,var(--violet-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(30,10,140,.35), 0 12px 24px -10px var(--violet-glow)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(30,10,140,.35), 0 16px 30px -10px var(--violet-glow)}
.btn-soft{color:var(--violet-deep);background:#fff;box-shadow:var(--clay-sm)}
.btn-danger{color:#fff;background:linear-gradient(180deg,#FF6A82,var(--coral));box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 20px -10px rgba(238,75,102,.6)}
.btn-ghost{color:var(--ink-2);background:transparent}
.btn-sm{padding:9px 14px;font-size:13.5px}

/* ---------- status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:5px 11px;font:650 12.5px/1 var(--f-text);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill-aligned{color:#0A7158;background:var(--mint-soft)}
.pill-held{color:#9A4F00;background:var(--apricot-soft)}
.pill-blocked{color:#B8213D;background:var(--coral-soft)}
.pill-approved{color:#2558C4;background:var(--sky-soft)}
.pill-later{color:var(--ink-2);background:var(--canvas-deep)}

/* ---------- clay icon tile (white glyph on a glossy colour block) ---------- */
.tile{--a:#7A68FF;--b:#5B47F5;--s:rgba(91,71,245,.45);
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.45),rgba(255,255,255,0) 45%),linear-gradient(160deg,var(--a),var(--b));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -4px 8px rgba(0,0,0,.14), 0 10px 18px -8px var(--s)}
.tile svg{width:22px;height:22px}
.tile-lg{width:64px;height:64px;flex-basis:64px;border-radius:20px}.tile-lg svg{width:32px;height:32px}
.tile-violet{--a:#8B7BFF;--b:#5B47F5;--s:rgba(91,71,245,.5)}
.tile-mint{--a:#4ADDB9;--b:#15A984;--s:rgba(21,169,132,.45)}
.tile-apricot{--a:#FFB766;--b:#F07F12;--s:rgba(240,127,18,.45)}
.tile-coral{--a:#FF8A9C;--b:#E83E5B;--s:rgba(232,62,91,.45)}
.tile-sky{--a:#7FB0FF;--b:#3A72EE;--s:rgba(58,114,238,.45)}
.tile-sun{--a:#FFD970;--b:#F5B000;--s:rgba(245,176,0,.45)}
.tile-ink{--a:#5E5A9E;--b:#2C2866;--s:rgba(44,40,102,.45)}

/* ---------- toggles ---------- */
.switch{width:46px;height:26px;border-radius:var(--r-pill);border:0;padding:0;position:relative;cursor:pointer;background:#D9D5EE;box-shadow:inset 0 2px 5px rgba(40,20,120,.18);transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(30,20,90,.3);transition:left .2s}
.switch.on{background:linear-gradient(180deg,#7563FF,var(--violet))}
.switch.on::after{left:23px}
.switch:focus-visible{outline:3px solid var(--violet-soft);outline-offset:2px}

/* ---------- range ---------- */
input[type=range].range{width:100%;accent-color:var(--violet)}

/* ---------- motion ---------- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* ---------- site layout (website only) ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink-2);font-family:var(--f-text);font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:inherit}
img,svg{display:block}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--violet-soft);outline-offset:3px;border-radius:8px}
section{scroll-margin-top:90px}

/* nav */
.nav{position:sticky;top:14px;z-index:50;margin-top:14px}
.nav-inner{display:flex;align-items:center;gap:28px;padding:10px 10px 10px 16px;border-radius:var(--r-pill);background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--clay-sm)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:750;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.brand .tile{width:34px;height:34px;flex-basis:34px;border-radius:11px}
.brand .tile svg{width:20px;height:20px}
.nav-links{display:flex;gap:22px;margin-left:auto;font-weight:550;font-size:15px}
.nav-links a{text-decoration:none;color:var(--ink-2)}
.nav-links a:hover{color:var(--violet-deep)}
@media (max-width:860px){.nav-links{display:none}.nav-inner .btn{margin-left:auto}}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1.02fr;align-items:center;gap:36px;padding:64px 0 48px}
.hero h1{font-size:clamp(42px,4.9vw,66px);margin:18px 0 22px;text-wrap:balance}
.hero h1 .accent{color:var(--violet)}
.hero .lede{max-width:520px;margin:0 0 30px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.chip-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:var(--r-pill);background:#fff;box-shadow:var(--clay-sm);font-weight:600;font-size:14px;color:var(--ink)}
.chip-eyebrow .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#8B7BFF,var(--violet))}
.chip-eyebrow .dot svg{width:13px;height:13px}
.rails{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:14px;color:var(--muted)}
.rails b{color:var(--ink-2);font-weight:600}
.rails i{width:4px;height:4px;border-radius:50%;background:var(--violet-soft)}
@media (max-width:980px){.hero{grid-template-columns:1fr;padding-top:48px}.hero .lede{max-width:none}}

/* ---------- signature: the gate scene ---------- */
.scene-box{position:relative;width:100%;aspect-ratio:600/500}
.scene{position:absolute;left:0;top:0;width:600px;height:500px;transform-origin:0 0;transform:scale(var(--s,1))}
.glow{position:absolute;inset:40px 20px 30px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));filter:blur(4px)}
/* conveyor slab, drawn as top face + front edge */
.track{position:absolute;left:14px;right:10px;top:304px;height:64px;border-radius:32px;background:linear-gradient(180deg,#F6F3FF,#DCD5FF);box-shadow:inset 0 2px 0 #fff,0 10px 0 #C2B8FF,0 26px 40px -14px rgba(58,40,170,.35);transform:rotate(-6deg)}
.track::after{content:"";position:absolute;left:28px;right:28px;top:28px;height:8px;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(91,71,245,.28) 0 18px,transparent 18px 34px)}
/* Aria, the agent */
.orb{position:absolute;left:26px;top:202px;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0,#E4DEFF 12%,#9C8CFF 38%,#5B47F5 70%,#3420B8 100%);
  box-shadow:inset -10px -14px 26px rgba(30,10,120,.35),0 24px 40px -14px rgba(58,40,170,.55);animation:float 6s ease-in-out infinite}
.orb::before,.orb::after{content:"";position:absolute;top:50px;width:11px;height:17px;border-radius:6px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.8)}
.orb::before{left:40px}.orb::after{left:64px}
.tag{position:absolute;padding:6px 12px;border-radius:var(--r-pill);background:#fff;box-shadow:var(--clay-sm);font:650 13px/1 var(--f-text);color:var(--ink);white-space:nowrap}
.tag small{font-weight:500;color:var(--muted);margin-left:4px}
/* the gate */
.gate{position:absolute;left:176px;top:74px;width:150px;height:282px;border-radius:75px 75px 20px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(206,198,255,.55));border:2px solid rgba(255,255,255,.95);
  box-shadow:inset 0 0 0 10px rgba(91,71,245,.10),inset 0 -20px 30px rgba(91,71,245,.12),0 30px 50px -20px rgba(58,40,170,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gate::after{content:"";position:absolute;left:20px;right:20px;top:58px;bottom:18px;border-radius:56px 56px 10px 10px;background:linear-gradient(180deg,rgba(91,71,245,.10),rgba(91,71,245,.02));border:1.5px dashed rgba(91,71,245,.35)}
.gate .tile{position:absolute;left:43px;top:-32px;width:64px;height:64px;border-radius:20px;animation:float 5s ease-in-out infinite}
.gate .tile svg{width:34px;height:34px}
/* the world */
.world{position:absolute;right:8px;top:120px;display:grid;gap:10px;justify-items:end}
.world .tile{width:56px;height:56px;border-radius:18px}
.world .tile svg{width:28px;height:28px}
.world .tile:nth-child(1){animation:float 7s ease-in-out infinite}
.world .tile:nth-child(2){margin-right:22px;animation:float 6s ease-in-out .6s infinite}
.world .tile:nth-child(3){animation:float 8s ease-in-out 1.2s infinite}
/* action cards */
.acard{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:18px;background:#fff;box-shadow:var(--clay);font:650 13.5px/1.25 var(--f-text);color:var(--ink);white-space:nowrap}
.acard .tile{width:34px;height:34px;flex-basis:34px;border-radius:11px}
.acard .tile svg{width:18px;height:18px}
.acard small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.acard.held{left:292px;top:150px;flex-direction:column;align-items:stretch;gap:10px;padding:14px;width:220px;white-space:normal;
  box-shadow:0 0 0 3px rgba(242,138,30,.25),0 0 40px -6px rgba(242,138,30,.55),var(--clay);animation:heldPulse 3.2s ease-in-out infinite}
.acard.held .top{display:flex;align-items:center;gap:10px}
.acard.held .amt{font-family:var(--f-display);font-weight:750;font-size:26px;letter-spacing:-.03em}
.acard.held .btns{display:flex;gap:6px}
.acard.held .btns span{flex:1;text-align:center;padding:8px 0;border-radius:var(--r-pill);font-size:12.5px;font-weight:650}
.acard.held .btns .ok{color:#fff;background:linear-gradient(180deg,#7563FF,var(--violet))}
.acard.held .btns .no{color:var(--violet-deep);background:var(--violet-soft)}
.acard.passed{left:368px;top:372px;transform:rotate(-6deg)}
.acard.blocked{left:28px;top:398px;transform:rotate(-9deg);animation:nudge 6s ease-in-out infinite}
.stream{position:absolute;left:150px;top:344px;width:22px;height:22px;border-radius:8px;background:linear-gradient(160deg,#8B7BFF,var(--violet));box-shadow:0 6px 12px -4px var(--violet-glow);animation:stream 4.5s linear infinite}
@keyframes stream{0%{transform:translate(0,0) rotate(-6deg);opacity:0;background:linear-gradient(160deg,#8B7BFF,var(--violet))}
  10%{opacity:1}48%{background:linear-gradient(160deg,#8B7BFF,var(--violet))}
  56%{background:linear-gradient(160deg,#4ADDB9,#15A984)}
  90%{opacity:1}100%{transform:translate(330px,-35px) rotate(-6deg);opacity:0;background:linear-gradient(160deg,#4ADDB9,#15A984)}}
@keyframes heldPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes nudge{0%,80%,100%{transform:rotate(-9deg) translateX(0)}84%{transform:rotate(-9deg) translateX(-8px)}88%{transform:rotate(-9deg) translateX(4px)}92%{transform:rotate(-9deg) translateX(-2px)}}
.time{position:absolute;left:404px;top:112px;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:var(--r-pill);background:#2C2866;color:#fff;font:650 13px/1 var(--f-text);box-shadow:0 14px 24px -12px rgba(28,24,71,.7);animation:float 6.5s ease-in-out .4s infinite}
.time .moon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#FFD970,#F5B000);color:#2C2866}
.time .moon svg{width:13px;height:13px}
.spark{position:absolute;color:var(--sun)}
.spark svg{width:22px;height:22px}

/* ---------- sections ---------- */
.sec{padding:96px 0}
@media (max-width:720px){.sec{padding:64px 0}.hero{padding:36px 0 24px}.sec-head{margin-bottom:30px}.final{padding:48px 24px}}
.sec-head{max-width:780px;margin:0 0 44px}
.sec-head .h2{font-size:clamp(34px,4.4vw,52px);margin:10px 0 14px;text-wrap:balance}
.sec-head p{margin:0;font-size:18px;color:var(--ink-2)}
.center{text-align:center;margin-inline:auto}

/* the two selves */
.selves{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:stretch}
.self{padding:34px;border-radius:var(--r-xl)}
.self.night{background:linear-gradient(160deg,#3A3480,#1C1847);color:#D9D5FF;box-shadow:0 30px 60px -24px rgba(28,24,71,.7)}
.self.day{background:linear-gradient(160deg,#FFFFFF,#FFF6DF);box-shadow:var(--clay)}
.self .when{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:750;font-size:26px;letter-spacing:-.02em}
.self.night .when{color:#fff}
.self .h3{font-size:24px;margin:22px 0 14px}
.self.night .h3{color:#fff}
.self ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:16px}
.self li{display:flex;gap:10px;align-items:center}
.self li svg{width:18px;height:18px;flex:0 0 18px}
.self.night li svg{color:var(--apricot)}
.self.day li svg{color:var(--mint)}
.vs{display:grid;place-items:center}
.vs .tile{width:70px;height:70px;border-radius:22px}
.vs .tile svg{width:36px;height:36px}
.quote{text-wrap:balance;margin:40px auto 0;max-width:860px;text-align:center;font-family:var(--f-display);font-weight:650;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.quote span{color:var(--violet)}
@media (max-width:860px){.selves{grid-template-columns:1fr}.vs .tile{width:56px;height:56px;border-radius:18px}}

/* modules */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mod{padding:26px;border-radius:var(--r-xl);display:flex;flex-direction:column;gap:18px}
.mod .h3{font-size:24px;margin:0}
.mod p{margin:0;font-size:16px}
.mini{border-radius:var(--r-lg);background:var(--surface-tint);padding:16px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:10px;min-height:178px;align-content:start}
.mini .rule{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:12px;background:#fff;box-shadow:0 2px 6px -3px rgba(58,40,170,.25);font-size:13.5px;font-weight:550;color:var(--ink)}
.mini .rule .switch{width:38px;height:22px;pointer-events:none}
.mini .rule .switch::after{width:16px;height:16px}
.mini .rule .switch.on::after{left:19px}
.mini .redline{padding:9px 12px;border-radius:12px;background:var(--coral-soft);color:#B8213D;font-size:13.5px;font-weight:600}
.mini .bar{display:grid;grid-template-columns:76px 1fr 62px;align-items:center;gap:10px;font-size:13px;font-weight:550;color:var(--ink-2)}
.mini .bar b{font-family:var(--f-display);font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.mini .trk{height:14px;border-radius:7px;background:#E9E5FB;overflow:hidden}
.mini .trk i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#8B7BFF,var(--violet))}
.mini .trk.over i{background:linear-gradient(90deg,#FFB766,var(--apricot))}
.mini .note{font-size:13px;color:var(--muted)}
.mini .decision{padding:12px;border-radius:14px;background:#fff;box-shadow:0 2px 6px -3px rgba(58,40,170,.25)}
.mini .decision b{display:block;font-size:14px;color:var(--ink)}
.mini .decision span{font-size:12.5px;color:var(--muted)}
.mini .opts{display:flex;gap:8px}
.mini .opts span{flex:1;text-align:center;padding:8px 0;border-radius:var(--r-pill);font-size:12.5px;font-weight:650;background:#fff;color:var(--violet-deep);box-shadow:0 2px 6px -3px rgba(58,40,170,.3)}
.mini .opts span:first-child{color:#fff;background:linear-gradient(180deg,#7563FF,var(--violet))}
.ring{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-2)}
.ring svg{width:46px;height:46px}
@media (max-width:980px){.modules{grid-template-columns:1fr}}

/* what it caught */
.band{background:linear-gradient(180deg,var(--canvas),var(--canvas-deep) 30%,var(--canvas-deep) 70%,var(--canvas))}
.caught{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.catch{padding:24px;border-radius:var(--r-xl);display:flex;flex-direction:column;gap:14px}
.catch .big{font-family:var(--f-display);font-weight:760;font-size:46px;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variation-settings:'opsz' 72}
.catch p{margin:0;font-size:15.5px}
.catch .pill{align-self:flex-start;margin-top:auto}
.catch:nth-child(2),.catch:nth-child(4){margin-top:26px}
@media (max-width:1040px){.caught{grid-template-columns:1fr 1fr}.catch:nth-child(n){margin-top:0}}
@media (max-width:560px){.caught{grid-template-columns:1fr}}

/* can't act */
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.side{padding:30px;border-radius:var(--r-xl)}
.side.agent{background:linear-gradient(160deg,#6E5CFF,var(--violet-deep));color:#E7E3FF;box-shadow:0 30px 60px -26px rgba(61,42,211,.7)}
.side .who{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.side .who .h3{font-size:22px;margin:0}
.side.agent .h3{color:#fff}
.verbs{display:flex;flex-wrap:wrap;gap:10px}
.verb{padding:12px 18px;border-radius:var(--r-pill);font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.side.agent .verb{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.side.fid .verb{background:var(--mint-soft);color:#0A7158}
.side p{margin:20px 0 0;font-size:15.5px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.fact{padding:22px;border-radius:var(--r-lg);display:flex;gap:14px;align-items:flex-start}
.fact b{display:block;color:var(--ink);font-size:16.5px;margin-bottom:2px}
.fact span{font-size:15px}
@media (max-width:900px){.split,.facts{grid-template-columns:1fr}}

/* trust timeline */
.timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.timeline::before{content:"";position:absolute;left:8%;right:8%;top:44px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--violet-soft),var(--violet))}
.step{position:relative;padding:0 8px;text-align:center}
.step .yr{position:relative;z-index:1;margin:0 auto 18px;width:88px;height:88px;border-radius:28px;display:grid;place-items:center;font-family:var(--f-display);font-weight:760;font-size:24px;letter-spacing:-.02em;color:var(--ink);background:#fff;box-shadow:var(--clay)}
.step.now .yr{color:#fff;background:linear-gradient(160deg,#8B7BFF,var(--violet-deep));box-shadow:0 0 0 8px rgba(91,71,245,.14),var(--clay)}
.step b{display:block;font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.step span{display:block;margin-top:6px;font-size:15.5px;color:var(--ink-2)}
.step q{display:inline-block;margin-top:12px;padding:8px 14px;border-radius:var(--r-pill);background:#fff;box-shadow:var(--clay-sm);font-size:14.5px;font-weight:600;color:var(--violet-deep);quotes:"\201C" "\201D"}
.standard{margin-top:44px;padding:26px 30px;border-radius:var(--r-xl);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.standard .h3{font-size:21px;margin:0 0 4px}
.standard p{margin:0;font-size:15.5px}
.standard .grow{flex:1;min-width:260px}
@media (max-width:860px){.timeline{grid-template-columns:1fr}.timeline::before{left:43px;right:auto;top:40px;bottom:40px;width:6px;height:auto}.step{display:grid;grid-template-columns:88px 1fr;gap:16px;text-align:left;align-items:center}.step .yr{margin:0}.step q{grid-column:2}}

/* north star */
.star{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:stretch}
.star-main{padding:36px;border-radius:var(--r-xl);display:flex;flex-direction:column;justify-content:center}
.star-main .k{font-weight:650;color:var(--violet);font-size:15px}
.star-main .v{font-family:var(--f-display);font-weight:780;font-size:clamp(80px,10vw,132px);line-height:.95;letter-spacing:-.05em;color:var(--ink);margin:10px 0 12px;font-variation-settings:'opsz' 96}
.star-main .v small{font-size:.35em;letter-spacing:-.02em;color:var(--mint)}
.star-main p{margin:0;font-size:17px;max-width:420px}
.guards{display:grid;gap:14px}
.guard{padding:20px 22px;border-radius:var(--r-lg);display:flex;gap:14px;align-items:center}
.guard b{display:block;color:var(--ink);font-size:16px}
.guard span{font-size:14.5px}
@media (max-width:900px){.star{grid-template-columns:1fr}}

/* final cta */
.final{margin:40px 0 0;padding:64px 48px;border-radius:36px;color:#E7E3FF;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 50% 0%,#7A68FF 0%,var(--violet) 40%,#2E1FA8 100%);box-shadow:0 40px 80px -30px rgba(61,42,211,.7)}
.final .h2{color:#fff;font-size:clamp(34px,4.6vw,56px);margin:0 0 14px}
.final p{margin:0 auto 28px;max-width:520px;font-size:18px}
.final .btn-soft{font-size:16px;padding:15px 24px}
.final .orbit{position:absolute;border-radius:50%;border:1.5px dashed rgba(255,255,255,.22)}
.final .meta{color:rgba(231,227,255,.7);margin-top:16px}

/* footer */
footer{padding:44px 0 56px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
footer .brand{font-size:17px}
footer .grow{flex:1}
footer a{text-decoration:none}
footer a:hover{color:var(--violet-deep)}

/* scroll reveal (progressive: content is visible without JS) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1;transform:none}