/* ============================================================
   FLOWCHESTRA — SITE BUILD
   Visual foundation: Direction A (Nocturne). Palette, background
   treatment and hero composition carry through every page.
   CTAs take Direction C's high-contrast treatment, keyed to
   Flowchestra Sky rather than C's ember.
   Type: Ubuntu display + IBM Plex Sans body + IBM Plex Mono meta.
   ============================================================ */
:root{
  --void:#070c1c; --body:#0b1330; --raise:#111c40; --raise-2:#16224b;
  --text:#f2f5fb; --dim:#a3aec6; --faint:#6c7897;
  --lav:#7287fd; --lav-hi:#96a3ff; --sky:#89dceb; --sky-hi:#a9e8f3; --sapphire:#74c7ec;
  --ok:#3ddc97; --warn:#f5b544; --stop:#ff6b6b;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.055);
  --r-sec:48px; --slab-inset:clamp(16px,3.2vw,46px);
  --display:"Ubuntu","Inter","Segoe UI",Arial,sans-serif;
  --sans:"IBM Plex Sans","Inter","Noto Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --e:cubic-bezier(.22,1,.36,1);
  --col:minmax(0,1fr);
  /* light-band tokens: the page rotates dark -> light and back */
  --lt-bg:#ffffff; --lt-alt:#f6f9fc; --lt-ink:#0f1a3a; --lt-body:#3f4f6d;
  --lt-mute:#5d6d88; --lt-accent:#2f6d8c; --lt-blue:#4a56d6;
  --lt-line:#dfe9f1; --lt-line-2:#e9eff5; --lt-card:#eef4f9;

  /* ---- surface system ----
     Every module used to be a flat fill with a 1px border. These four
     give them a lit top edge, a surface that catches light at the top,
     real depth, and a brand-tinted glow when they lift. Navy-tinted
     shadows per the brand's elevation scale, never neutral black. */
  --r-card:20px;
  --surf:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014) 42%,rgba(255,255,255,0));
  --edge:inset 0 1px 0 rgba(255,255,255,.075);
  --lift:0 22px 50px -30px rgba(2,5,14,.92);
  --lift-hi:0 34px 68px -26px rgba(2,5,14,.96),0 0 40px -14px rgba(114,135,253,.40);
  --chip:linear-gradient(150deg,rgba(137,220,235,.20),rgba(114,135,253,.12));
  --chip-edge:inset 0 1px 0 rgba(255,255,255,.14);
  /* light-band elevation, from the brand's navy-tinted shadow scale */
  --lt-lift:0 1px 2px rgba(29,48,100,.06),0 12px 28px -18px rgba(29,48,100,.28);
  --lt-lift-hi:0 2px 4px rgba(29,48,100,.07),0 26px 56px -24px rgba(29,48,100,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--body);color:var(--text);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.028em;
  margin:0;color:#fff;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{width:min(100% - 44px,1240px);margin-inline:auto}
.wide{width:min(100% - 44px,1440px);margin-inline:auto}
.grid12{display:grid;grid-template-columns:repeat(12,var(--col));gap:24px}
/* grid items default to min-width:auto and refuse to shrink below their
   min-content width, overflowing the track. Harmless until an ancestor
   clips (the slab), so pin it to 0. */
.grid12>*{min-width:0}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:500;color:var(--sky)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sky);color:#04070d;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* gradient headings. Two ramps: the light ramp is unreadable on white
   (Sky sits at 1.56:1), the deep ramp is unreadable on the dark ground.
   `color` is set first as the fallback where background-clip:text is absent. */
.grad{color:#96a3ff;background:linear-gradient(100deg,#89dceb,#96a3ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.light .grad,.lt .grad,.jobs .grad{color:#4a56d6;background:linear-gradient(100deg,#3a87ac,#4a56d6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{-webkit-text-fill-color:#96a3ff;background:none}
  .light .grad,.lt .grad,.jobs .grad{-webkit-text-fill-color:#4a56d6;background:none}}

/* ---- buttons: Direction C's contrast, keyed to Sky.
   Solid cyan on near-black ink reads at 13.4:1 and is the single
   loudest element on any screen — which is what the CTA has to be. ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
  font-weight:600;font-size:16px;border-radius:999px;padding:15px 30px;border:1px solid transparent;
  background:none;color:inherit;-webkit-appearance:none;appearance:none;
  cursor:pointer;text-align:center;
  transition:background .18s var(--e),color .18s var(--e),border-color .18s var(--e),
             box-shadow .18s var(--e),transform .18s var(--e)}
.btn-p{background:var(--sky);color:#04070d;box-shadow:0 0 0 0 rgba(137,220,235,.34)}
.btn-p:hover{background:var(--sky-hi);box-shadow:0 0 0 5px rgba(137,220,235,.16);transform:translateY(-1px)}
.btn-o{border-color:var(--line);color:var(--text)}
.btn-o:hover{border-color:var(--sky);color:var(--sky)}
.btn-s{padding:11px 24px;font-size:14.5px}
.light .btn-o,.lt .btn-o{border-color:var(--lt-line);color:var(--lt-ink)}
.light .btn-o:hover,.lt .btn-o:hover{border-color:var(--lt-accent);color:var(--lt-accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

/* ---- header ---- */
header{position:sticky;top:0;z-index:80;background:rgba(7,12,28,.82);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
.nav{display:flex;align-items:center;gap:34px;height:78px}
.nav .brand img{height:36px;display:block}
.nav nav{display:flex;gap:22px;margin-left:auto;font-size:15px;color:var(--dim)}
.nav nav a{position:relative;padding:4px 0;transition:color .18s var(--e)}
.nav nav a:hover{color:#fff}
.nav nav a[aria-current="page"]{color:#fff}
/* the CTA is a button in the bar on desktop; it only becomes a nav
   row once the bar collapses into the menu */
.nav nav .navcta{display:none}
.nav nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--sky);border-radius:2px}
.nav .login{font-size:15px;color:var(--dim);transition:color .18s var(--e);white-space:nowrap}
.nav .login:hover{color:#fff}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:10px;width:44px;height:44px;color:var(--text);align-items:center;justify-content:center}
.navtoggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}

/* ---- section rhythm ---- */
section{padding:104px 0}
h2{font-size:clamp(32px,3.9vw,48px)}
.lead{color:#c2cbe0;font-size:18.5px;max-width:66ch}
.lead + .lead{margin-top:20px}
.eyebrow{margin-bottom:14px}
.light,.lt{background:var(--lt-bg);color:var(--lt-ink)}
.lt.tint{background:var(--lt-alt)}
.light h2,.light h3,.light h4,.lt h2,.lt h3,.lt h4{color:var(--lt-ink)}
.light p,.light .lead,.lt p,.lt .lead{color:var(--lt-body)}
.light .mono,.lt .mono{color:var(--lt-accent)}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ---- hero: Direction A's composition. Copy left, product right,
   silk field behind, scrim weighted to the copy side. ---- */
.hero{border-bottom:1px solid var(--line-2);padding:88px 0 76px;position:relative;
  background:var(--void);isolation:isolate;
  min-height:calc(100vh - 78px);min-height:calc(100svh - 78px);
  display:grid;align-content:center}
.hero.short{min-height:0;padding:96px 0 92px;display:block}
.hero .field{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
.hero .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(7,12,28,.94) 0%,rgba(7,12,28,.82) 38%,
             rgba(7,12,28,.42) 64%,rgba(7,12,28,.58) 100%)}
.hero .scrim::after{content:"";position:absolute;inset:auto 0 0 0;height:150px;
  background:linear-gradient(180deg,transparent,var(--body))}
.hero.short .scrim{background:linear-gradient(100deg,rgba(7,12,28,.94) 0%,rgba(7,12,28,.84) 46%,
             rgba(7,12,28,.6) 100%)}
.hero .grid12{position:relative;z-index:2;align-items:center;gap:44px 32px}
/* the hero runs a touch wider than the rest of the page so the mockup
   has room without squeezing the headline column. */
.hero > .wrap{width:min(100% - 44px,1340px)}
.hero .say{grid-column:span 5}
.hero .show{grid-column:span 7;min-width:0}
.hero.short .say{grid-column:span 8}
.hero.short .aside{grid-column:span 4}
.hero.split .say{grid-column:span 6}
.hero.split .aside{grid-column:span 6}
.hero h1{font-size:clamp(38px,4.4vw,58px);margin:0 0 20px}
.hero h1 b{font-weight:700;color:var(--lav-hi)}
.hero .lede{font-size:20px;color:#c2cbe0;max-width:48ch;margin-bottom:34px}
.act{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.act .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fric{font-size:14.5px;color:var(--dim);max-width:46ch}
.light .fric,.lt .fric{color:var(--lt-mute)}
.alt{margin-top:28px;font-size:15.5px;color:var(--dim)}
.alt a{color:var(--sky);font-weight:500;border-bottom:1px solid rgba(137,220,235,.35)}
.alt a:hover{color:#fff;border-bottom-color:#fff}
.light .alt,.lt .alt{color:var(--lt-mute)}
.light .alt a,.lt .alt a{color:var(--lt-accent);border-bottom-color:rgba(47,109,140,.4)}

/* ---- bright: Operators. Light ground, centred copy, and a
   gradient plinth carrying a glass tile cluster. The sticky header
   stays dark above it, so the switch reads as a deliberate break. ---- */
.hero.bright{min-height:0;padding:84px 0 92px;display:block;text-align:center;
  background:var(--lt-alt);border-bottom:0}
.hero.bright h1{color:var(--lt-ink);font-size:clamp(32px,3.9vw,53px);letter-spacing:-.032em;
  line-height:1.1;max-width:33ch;margin:0 auto 22px}
.hero.bright .lede{color:var(--lt-body);font-size:19px;margin:0 auto 32px;max-width:94ch}
.hero.bright .act{align-items:center}
.hero.bright .fric{color:var(--lt-mute);max-width:52ch}

/* the plate: fully rounded with a bottom edge, and a soft cloudy field
   rather than a hard ramp — brand colours at the dark end, so it reads
   against the light ground the way the band plates read against dark. */
.plinth{position:relative;margin-top:58px;height:min(56vw,560px);border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(64% 68% at 76% 84%,rgba(116,199,236,.22),transparent 68%),
    linear-gradient(152deg,#0d1631 0%,#16224b 46%,#1d3064 100%)}
/* the bloom breathes (gradient.js) and drifts (here); one alone reads as static */
.pglow{position:absolute;inset:-12%;z-index:1;animation:pdrift 19s ease-in-out infinite}
@keyframes pdrift{
  0%  {transform:translate3d(-3%,-2%,0) scale(1.04)}
  50% {transform:translate3d(6%,5%,0)   scale(1.16)}
  100%{transform:translate3d(-3%,-2%,0) scale(1.04)}
}
.plinth .cluster{z-index:3}
.plinth::before{content:"";position:absolute;inset:-30%;z-index:2;pointer-events:none;filter:blur(56px);
  background:
    linear-gradient(112deg,transparent 26%,rgba(255,255,255,.16) 36%,transparent 46%),
    linear-gradient(112deg,transparent 56%,rgba(137,220,235,.14) 64%,transparent 72%),
    linear-gradient(112deg,transparent 76%,rgba(255,255,255,.09) 82%,transparent 90%)}
.cluster{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;gap:12px;padding:14px;border-radius:26px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13)}
.ct{width:118px;height:118px;border-radius:21px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.17)}
.ct.mid{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.26)}
.ct svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.ct .mk-fc{width:44px;height:44px;stroke:none;fill:#fff}

@media(max-width:760px){
  .hero.bright{padding:56px 0 58px}
  .hero.bright .lede{font-size:17.5px}
  .plinth{margin-top:40px;height:300px;border-radius:18px}
  .cluster{gap:9px;padding:10px;border-radius:20px}
  .ct{width:80px;height:80px;border-radius:15px}
  .ct svg{width:29px;height:29px}
  .ct .mk-fc{width:31px;height:31px}
}

/* ---- deep: Resources. Cards laid back in perspective, thrown out
   of focus, and drifting. Depth of field is two copies of the same
   grid at different blur, the sharp one masked to a diagonal band;
   each track holds the grid twice so the drift loops seamlessly. ---- */
.hero.deep{min-height:0;padding:152px 0 78px;display:block;position:relative;
  background:#05080f;overflow:hidden}
.deepfield{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* the library field is a rendered loop: forward + reversed, so it cycles
   with no seam. Poster carries the first frame until it plays. */
.dvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.9;transform:scale(1.04)}
.hero.deep .scrim{z-index:1;background:
  radial-gradient(78% 76% at 16% 84%,rgba(5,8,15,.96),rgba(5,8,15,.34) 62%,transparent 78%),
  linear-gradient(180deg,rgba(5,8,15,.9) 0%,rgba(5,8,15,.5) 30%,rgba(5,8,15,.72) 66%,rgba(5,8,15,.96) 100%)}
.hero.deep .wrap{position:relative;z-index:3}
.hero.deep h1{font-size:clamp(35px,4.9vw,66px);font-weight:400;letter-spacing:-.03em;
  line-height:1.07;max-width:15ch;margin:0 0 24px}
.hero.deep .lede{max-width:52ch}

@media(max-width:900px){
  .hero.deep{padding:88px 0 62px}
}

/* ============================================================
   THE SWITCHER — pick a job, the product surface changes.
   Sits on the light band, so the dark plate reads as a window cut
   into the page. The plate runs to the viewport edge rather than
   stopping at the wrap, which is what makes it feel like a view
   onto something bigger than the column it lives in.
   ============================================================ */
.switch{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:60px;align-items:center}
.sw-l h2{margin-bottom:18px}
.sw-l .lead{max-width:46ch;margin-bottom:40px}
.sw-list{display:grid}
.sw-i{border-top:1px solid rgba(19,31,66,.14)}
.sw-i:first-child{border-top:0}
.sw-i>button{display:flex;align-items:baseline;gap:16px;width:100%;padding:20px 0;
  background:none;border:0;cursor:pointer;text-align:left;font-family:var(--display);
  color:rgba(19,31,66,.42);transition:color .22s var(--e)}
.sw-i>button:hover{color:rgba(19,31,66,.72)}
.sw-i.is-on>button{color:#131f42}
.sw-n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;flex:none;
  color:currentColor;opacity:.62}
.sw-t{font-size:clamp(20px,1.9vw,25px);font-weight:700;letter-spacing:-.024em;line-height:1.2}
/* collapsed by height so the open row animates rather than jumping */
.sw-d{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .34s var(--e),opacity .26s var(--e)}
.sw-d>*{overflow:hidden}
.sw-i.is-on .sw-d{grid-template-rows:1fr;opacity:1}
.sw-d p{color:var(--lt-body);font-size:16.5px;line-height:1.62;max-width:46ch;
  padding-bottom:14px}
.sw-d a{display:inline-block;color:var(--lt-accent);font-weight:500;font-size:15.5px;
  border-bottom:1px solid rgba(47,109,140,.4);margin-bottom:24px}
.sw-d a:hover{color:#131f42;border-bottom-color:#131f42}

.sw-r{position:relative;min-height:568px}
.sw-plate{position:absolute;top:0;bottom:0;left:0;right:calc(50% - 50vw + 22px);
  border-radius:22px 0 0 22px;overflow:hidden;
  background:
    radial-gradient(60% 66% at 26% 24%,rgba(114,135,253,.5),transparent 64%),
    radial-gradient(56% 60% at 82% 76%,rgba(116,199,236,.34),transparent 66%),
    linear-gradient(150deg,#0d1631,#16224b 46%,#1d3064)}
.sw-p{position:absolute;inset:0;padding:44px 0 0 46px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .34s var(--e),transform .34s var(--e),visibility .34s}
.sw-p.is-on{opacity:1;visibility:visible;transform:none}
.sw-p .win{position:absolute;top:44px;left:46px;right:-70px;bottom:0;border-radius:15px}

@media(max-width:1000px){
  .switch{grid-template-columns:minmax(0,1fr);gap:38px}
  .sw-r{min-height:430px}
  .sw-plate{right:calc(50% - 50vw + 22px);left:0;border-radius:20px}
  .sw-p,.sw-p .win{padding:0;top:28px;left:26px;right:-46px}
  .sw-p{padding:0}
}
@media(max-width:620px){
  .sw-r{min-height:360px}
  .sw-t{font-size:19px}
}

/* ============================================================
   FEATURE BANDS — a large rounded card per capability: copy on
   one side, a gradient plate on the other carrying a fragment of
   product UI. The plate and the window on it both run past the
   card edge, so the UI is cropped rather than sitting politely
   inside a box. Sides alternate down the page.
   ============================================================ */
.bands{display:grid;gap:24px}
.band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;border-radius:26px;overflow:hidden;min-height:430px;
  background:var(--raise);border:1px solid var(--line)}
.band .bt{padding:54px 50px;position:relative;z-index:2}
.band .bt h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.028em;line-height:1.14;
  margin:0 0 15px;color:#fff}
.band .bt p{color:var(--dim);font-size:17px;line-height:1.62;max-width:42ch}
.band .bv{position:relative;align-self:stretch;min-height:430px;overflow:hidden}
.band.flip .bt{grid-column:2;grid-row:1}
.band.flip .bv{grid-column:1;grid-row:1}

.bv .plate{position:absolute;top:44px;bottom:0;left:26px;right:-72px;border-radius:20px;
  overflow:hidden}
.band.flip .bv .plate{left:-72px;right:26px}
.plate.g1{background:linear-gradient(138deg,#3d4bb5,#7287fd 44%,#89dceb)}
.plate.g2{background:linear-gradient(142deg,#1d3064,#3d4bb5 42%,#74c7ec)}
.plate.g3{background:linear-gradient(146deg,#7287fd,#74c7ec 52%,#89dceb)}
.plate.g4{background:linear-gradient(150deg,#1d3064,#3d4bb5 54%,#7287fd)}

.plate .win{position:absolute;top:34px;left:34px;right:-54px;bottom:0;border-radius:15px;
  background:linear-gradient(180deg,#0c1531,#0a1128);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 34px 70px -26px rgba(0,0,0,.82);overflow:hidden}
.band.flip .plate .win{left:106px;right:-54px}
.win-h{display:flex;align-items:center;gap:9px;height:42px;padding:0 15px;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.026);
  font-size:12px;color:var(--faint)}
.win-h b{color:var(--text);font-weight:500}
.win-b{padding:16px 18px;display:grid;gap:10px}
.wrow{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim);
  padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:10px;
  background:rgba(255,255,255,.022);white-space:nowrap}
.wrow b{color:#fff;font-weight:500}
.wrow .r{margin-left:auto;color:var(--faint);font-family:var(--mono);font-size:11px}

.meter{display:grid;gap:12px;padding:4px 2px}
.mt{display:grid;grid-template-columns:104px minmax(0,1fr) 58px;gap:12px;align-items:center;
  font-size:12px;color:var(--dim);white-space:nowrap}
.mt i{display:block;height:7px;border-radius:5px;background:rgba(255,255,255,.09);
  position:relative;font-style:normal}
.mt i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--w);
  border-radius:5px;background:linear-gradient(90deg,#7287fd,#89dceb)}
.mt .v{text-align:right;font-family:var(--mono);font-size:11px;color:var(--faint)}

.tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;padding:34px;align-content:center}
.band.flip .plate .tiles{padding-left:106px;padding-right:20px}
.tile{aspect-ratio:1;border-radius:16px;display:grid;place-items:center;text-align:center;
  padding:8px;font-size:11.5px;font-weight:600;color:#fff;letter-spacing:.01em;line-height:1.25;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24)}

/* the rows card's window is narrower than a band's, so cap its rows there
   only rather than globally. */
.rowcard .win-b{max-width:430px}

/* ---- the rows card: one visual, a stack of hairline-split rows ---- */
.rowcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  border-radius:26px;overflow:hidden;background:var(--raise);border:1px solid var(--line)}
.rowcard .rc-v{position:relative;min-height:540px;overflow:hidden}
.rowcard .rc-v .plate{top:44px;bottom:44px;left:34px;right:-64px}
.rowcard .rc-l{padding:10px 46px 10px 42px;align-self:center}
.rc-item{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;
  padding:24px 0;border-top:1px solid var(--line-2)}
.rc-item:first-child{border-top:0}
.rc-item h3{font-size:19.5px;color:#fff;margin:0;letter-spacing:-.02em;line-height:1.24}
.rc-item p{color:var(--dim);font-size:15.5px;margin:0;line-height:1.58}

@media(max-width:1000px){
  .band,.rowcard{grid-template-columns:minmax(0,1fr)}
  .band{min-height:0}
  .band .bt,.band.flip .bt{grid-column:1;grid-row:1;padding:38px 30px 4px}
  .band .bv,.band.flip .bv{grid-column:1;grid-row:2;min-height:330px}
  .bv .plate,.band.flip .bv .plate{left:26px;right:-52px}
  .plate .win,.band.flip .plate .win{left:26px;right:-40px}
  .rowcard .rc-v{grid-row:2;min-height:330px}
  .rowcard .rc-v .plate{left:26px;right:-52px;bottom:0}
  .rowcard .rc-l{grid-row:1;padding:34px 30px 10px}
  .rc-item{grid-template-columns:minmax(0,1fr);gap:9px}
}

/* ============================================================
   HERO ARCHETYPES — the pages were reading as one page.
   Three grounds, not one: stage (product fills the frame),
   bloom (centred, brand ramp behind the copy) and statement
   (flat ground, one large line, nothing else).
   ============================================================ */

/* ---- bloom: Trust. Centred, symmetrical, lit from behind. ---- */
.hero.bloom{min-height:0;padding:92px 0 104px;display:block;text-align:center;
  overflow:hidden;background:var(--void)}
/* covers the whole hero and fades to fully transparent at its own rim, so
   there is no edge where the element stops. */
/* the homepage silk field, mirrored, so Trust shares the motion without
   repeating the composition. The bloom sits over it as the colour pool. */
.hero.bloom .field{z-index:0;transform:scaleX(-1)}
.hero.bloom .glow{position:absolute;inset:0;z-index:1;mix-blend-mode:screen}
.hero.bloom .scrim{z-index:2}
.hero.bloom .scrim{background:
  radial-gradient(58% 46% at 50% 34%,rgba(4,7,16,.88),rgba(4,7,16,.5) 58%,transparent 82%),
  linear-gradient(180deg,rgba(7,12,28,.86) 0%,rgba(7,12,28,.58) 30%,
    rgba(7,12,28,.22) 58%,rgba(7,12,28,.05) 80%)}
.hero.bloom .wrap{position:relative;z-index:3;max-width:1040px}
.hero.bloom h1{font-size:clamp(33px,4.4vw,60px);letter-spacing:-.032em;line-height:1.06;
  max-width:21ch;margin:0 auto 24px}
.hero.bloom .lede{margin:0 auto 34px;max-width:58ch}
.hero.bloom .act{align-items:center}
.hero.bloom .fric{max-width:44ch}

/* ---- statement: Company, Careers. The restraint is the point. ---- */
.hero.statement{min-height:0;padding:132px 0 108px;display:block;background:var(--void);
  border-bottom:1px solid var(--line-2);position:relative;overflow:hidden}
/* the homepage silk field runs behind the statement, with a scrim over it
   so the copy keeps contrast against the moving colour. */
.hero.statement .field{z-index:0}
.hero.statement .sscrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(62% 54% at 26% 42%,rgba(3,6,14,.9),rgba(3,6,14,.55) 56%,transparent 82%),
    linear-gradient(180deg,rgba(5,8,18,.82) 0%,rgba(5,8,18,.5) 34%,
      rgba(5,8,18,.24) 62%,rgba(5,8,18,.06) 86%)}
.hero.statement .lede .grad{font-weight:600}
.hero.statement::before{content:"";position:absolute;inset:0 0 auto 0;height:340px;
  pointer-events:none;
  background:radial-gradient(72% 100% at 12% 0%,rgba(114,135,253,.10),transparent 68%)}
/* the same dot texture the monogram portraits use, raked off one corner:
   enough grain that the flat ground reads as chosen rather than unfinished. */
.hero.statement::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(205deg,#000,transparent 58%);
  mask-image:linear-gradient(205deg,#000,transparent 58%)}
.hero.statement .wrap{position:relative;z-index:2}

/* who you would be joining, at a glance */
.faces{margin-top:62px;padding-top:32px;border-top:1px solid var(--line-2)}
.faces .faces-h{font-size:14.5px;color:var(--faint);margin:0 0 20px}
.faces ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:18px 34px}
.faces li{display:flex;align-items:center;gap:12px}
.faces img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center top;
  border:1px solid var(--line);filter:grayscale(.55);transition:filter .4s var(--e)}
.faces li:hover img{filter:grayscale(0)}
.faces .who b{display:block;font-size:14.5px;font-weight:600;color:#fff;line-height:1.3}
.faces .who i{font-style:normal;font-size:13px;color:var(--dim)}
.hero.statement h1{font-size:clamp(42px,7vw,98px);letter-spacing:-.038em;line-height:.99;
  max-width:15ch;margin:0}
.hero.statement .lede{margin-top:36px;max-width:54ch;font-size:19px}
.hero.statement .act{margin-top:38px}

@media(max-width:900px){
  .hero.bloom{padding:72px 0 84px}
  .hero.statement{padding:92px 0 78px}
  .hero.statement .lede{margin-top:26px}
}

/* ============================================================
   PLATFORM HERO — the product is the stage.
   The workspace mockup fills the frame and the headline sits on
   top of it. A veil darkens the centre of the screen so large
   type holds contrast over a busy UI. Below 900px the overlay
   is dropped and .stage-lead carries the headline above the
   frame instead: at phone width, type over the mockup buries it.
   ============================================================ */
.hero.stage{min-height:0;padding:64px 0 84px;display:block;text-align:center}
.hero.stage .scrim{background:
  radial-gradient(128% 92% at 50% -6%,rgba(7,12,28,.52),rgba(7,12,28,.9) 58%,rgba(7,12,28,.97))}
.hero.stage .wrap{position:relative;z-index:2}

/* the frame around the screen: a device lip, not a photoreal laptop */
.rig{position:relative;max-width:1080px;margin:0 auto;border-radius:20px;padding:13px;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.016) 42%,rgba(255,255,255,.03));
  box-shadow:0 70px 130px -46px rgba(0,0,0,.92),0 0 0 1px rgba(6,10,24,.6)}
.rig::after{content:"";position:absolute;left:12%;right:12%;bottom:-26px;height:26px;
  border-radius:0 0 40px 40px;pointer-events:none;
  background:linear-gradient(180deg,rgba(137,220,235,.14),transparent 78%);filter:blur(11px)}
.rig-screen{position:relative;border-radius:11px;overflow:hidden}
.rig-screen .app{border:0;border-radius:11px;box-shadow:none}
.rig .veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(74% 62% at 50% 50%,rgba(6,10,24,.88),rgba(6,10,24,.5) 58%,rgba(6,10,24,.24))}

.stage-frame{position:relative}
.stage-say{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  padding:0 28px;pointer-events:none}
.stage-say h1{font-size:clamp(30px,5.6vw,80px);font-weight:400;letter-spacing:-.032em;
  line-height:1.03;max-width:15ch;
  text-shadow:0 8px 46px rgba(4,7,16,.94),0 2px 12px rgba(4,7,16,.85)}
.stage-say h1 b{font-weight:400}

.hero.stage .cap{margin-top:34px}
.stage-foot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:48px;align-items:start;text-align:left;margin:44px 0 0}
.stage-foot .lede{margin:0;max-width:58ch}
.stage-foot .act{align-items:flex-start}
.stage-foot .fric{max-width:40ch}
.stage-foot .alt{margin-top:22px}
@media(max-width:900px){
  .stage-foot{grid-template-columns:minmax(0,1fr);gap:28px;text-align:center}
  .stage-foot .lede{margin:0 auto}
  .stage-foot .act{align-items:center}
}

/* headline above the frame at small widths; the overlay is for desktop */
@media(max-width:900px){
  .hero.stage{padding:48px 0 66px}
  .stage-say{position:static;padding:0;margin:0 0 30px}
  .stage-say h1{font-size:clamp(31px,6.4vw,44px);font-weight:700;max-width:none;text-shadow:none}
  .stage-say h1 b{font-weight:700}
  .rig .veil{background:linear-gradient(180deg,rgba(6,10,24,.1),rgba(6,10,24,.34))}
  .rig{padding:9px;border-radius:15px}
  .rig::after{display:none}
}

/* ============================================================
   THE WORKSPACE MOCKUP (Direction C's product visual)
   Lifted into the hero so the page shows a real product in the
   first seconds rather than arguing for one. Loops: the activity
   feed advances, the agent panel re-runs its check.
   ============================================================ */
.app{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#0c1531,#0a1128);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.86);isolation:isolate}
.app-bar{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.022)}
.app-bar .bm{display:flex;align-items:center;gap:8px}
.app-bar .bm img{height:17px;display:block}
.app-bar .rt{margin-left:auto;display:flex;align-items:center;gap:9px;
  font-size:11.5px;color:var(--faint)}
.app .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;
  font-size:11.5px;color:var(--dim);border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .chip b{color:var(--text);font-weight:500}
.av{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:9px;font-weight:600;color:#0b1024;letter-spacing:.02em}
.av.k{background:#f5b544}.av.j{background:#89dceb}.av.f{background:#96a3ff}
.app-body{display:grid;grid-template-columns:138px minmax(0,1fr);min-height:412px}
.app-side{border-right:1px solid rgba(255,255,255,.07);padding:14px 8px;
  background:rgba(255,255,255,.014)}
.sgrp{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  margin:16px 8px 7px;font-weight:500}
.sgrp:first-child{margin-top:0}
.snav{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;
  font-size:12.5px;color:var(--dim);cursor:default;transition:background .16s var(--e),color .16s var(--e)}
.snav svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.snav .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.snav:hover{background:rgba(255,255,255,.045);color:var(--text)}
.snav.on{background:rgba(137,220,235,.13);color:var(--sky)}
.sq{width:8px;height:8px;border-radius:2.5px;flex:none}
/* bottom padding keeps the activity feed clear of the floating agent panel */
.app-main{padding:18px 20px 150px;min-width:0}
.app-main .feed .tx{max-width:36ch}
.app-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.app-head .id{font-family:var(--mono);font-size:11px;color:var(--faint);
  border:1px solid rgba(255,255,255,.10);border-radius:5px;padding:2px 7px}
.app-head .star{color:var(--sky);font-size:11px;line-height:1}
.app-head .nn{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
.app-main h3{font-family:var(--display);font-size:19px;color:#fff;letter-spacing:-.022em;
  margin:0 0 8px}
.app-main .desc{font-size:13.5px;line-height:1.6;color:var(--dim);max-width:44ch;margin:0}
.code{font-family:var(--mono);font-size:12px;color:var(--sky);
  background:rgba(137,220,235,.09);border:1px solid rgba(137,220,235,.18);
  border-radius:4px;padding:1px 5px}
.act-h{font-family:var(--display);font-weight:700;font-size:13px;color:#fff;
  margin:20px 0 8px;letter-spacing:.01em}
.feed{display:grid;gap:2px}
.row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;
  position:relative;transition:background .18s var(--e),box-shadow .18s var(--e)}
.row.ok{--rg:rgba(61,220,151,.55);--rl:rgba(61,220,151,.30)}
.row.hold{--rg:rgba(245,181,68,.55);--rl:rgba(245,181,68,.30)}
.row.info{--rg:rgba(150,163,255,.55);--rl:rgba(150,163,255,.30)}
.row::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:var(--rg,transparent);opacity:0;transition:opacity .18s var(--e)}
.row:hover{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--rl,transparent)}
.row:hover::before{opacity:1}
.row .ic{width:19px;height:19px;border-radius:50%;flex:none;margin-top:1px;
  display:grid;place-items:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09)}
.row .ic.bare{background:none;border:0}
.row .ic svg{width:10px;height:10px;stroke:var(--dim);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.row .tx{font-size:12.5px;color:var(--dim);line-height:1.5;min-width:0}
.row .tx b{color:var(--text);font-weight:500}
.row .tx .t{color:var(--faint)}
.row .quote{display:block;margin-top:4px;color:var(--dim)}
.vtag{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 6px;border-radius:4px;white-space:nowrap;vertical-align:1px}
.vtag.ok{color:#3ddc97;background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.28)}
.vtag.hold{color:#f5b544;background:rgba(245,181,68,.12);border:1px solid rgba(245,181,68,.30)}
.vtag.stop{color:#ff6b6b;background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.30)}
/* Rows enter one at a time on a loop. They are visible by default and JS
   opts the feed into the animation, so a failed script leaves a full feed
   rather than an empty box where the product visual should be. */
.feed.anim .row{opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--e),transform .45s var(--e)}
.feed.anim .row.in{opacity:1;transform:none}
/* the agent panel floats over the main column */
.agent{position:absolute;right:12px;bottom:12px;width:262px;border-radius:13px;
  border:1px solid rgba(255,255,255,.12);overflow:hidden;
  background:linear-gradient(180deg,rgba(22,34,75,.94),rgba(14,24,54,.96));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 26px 56px -22px rgba(0,0,0,.9)}
.agent-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.agent-bar .nm{font-family:var(--display);font-weight:700;font-size:12.5px;color:#fff}
.agent-bar .mdl{font-family:var(--mono);font-size:9.5px;color:var(--dim);
  border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:2px 6px}
.agent-bar .win{margin-left:auto;display:flex;gap:8px;color:var(--faint)}
.agent-bar .win svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;display:block}
.agent-b{padding:12px;display:grid;gap:9px}
.agent-b p{margin:0;font-size:12px;line-height:1.55;color:var(--dim)}
.agent-b p.lead-in b{color:var(--text);font-weight:500}
.worked{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--faint)}
.agent-b ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.agent-b li{position:relative;padding-left:13px;font-size:12px;line-height:1.5;color:var(--dim)}
.agent-b li::before{content:"";position:absolute;left:2px;top:7px;width:3px;height:3px;
  border-radius:50%;background:var(--faint)}
.agent-b .code{font-size:11px}
.res{border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:10px;
  background:rgba(255,255,255,.025);display:grid;gap:8px}
.res .r1{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;font-size:12px;color:var(--text)}
.res .r1 .ct{color:var(--faint)}
.res .btn-g{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;
  color:var(--dim);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:3px 8px;
  transition:color .16s var(--e),border-color .16s var(--e)}
.res .btn-g:hover{color:var(--sky);border-color:rgba(137,220,235,.4)}
.res .r2{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text)}
.res .route{font-family:var(--mono);font-size:10px;color:var(--faint);
  border-top:1px solid rgba(255,255,255,.07);padding-top:7px}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:lp 2.4s infinite}
@keyframes lp{70%{box-shadow:0 0 0 7px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.cap{margin-top:12px;font-size:13px;color:var(--faint);text-align:right}

/* ============================================================
   ONE PLATFORM, THREE JOBS — the primary framing, directly
   under the hero. Bento, unequal, on a light band so it lifts
   straight out of the dark hero.
   ============================================================ */
.jobs{background:#fff;color:#1d3064;position:relative}
.jobs::before{content:"";position:absolute;inset:0 0 auto 0;height:180px;
  background:linear-gradient(180deg,rgba(11,19,48,.06),transparent);pointer-events:none}
.jobs .wrap{position:relative}
.jobs h2{color:#131f42;font-size:clamp(36px,4.6vw,58px);margin-bottom:18px}
.jobs .lead{color:var(--lt-body);margin-bottom:48px;max-width:60ch}
.jobs .grid12{gap:20px;align-items:stretch}
.job{height:100%;border:1px solid var(--lt-line);border-radius:14px;padding:32px;background:#f7f9fc;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .2s var(--e),background .2s var(--e),box-shadow .2s var(--e),transform .2s var(--e)}
.job:hover{border-color:#a6cfe2;background:#fff;transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(29,48,100,.10),0 4px 10px rgba(29,48,100,.06)}
.job.big{grid-column:span 6;padding:38px}
.job.sm{grid-column:span 3}
.job .n{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;color:#2f6d8c}
.job h3{font-size:22px;color:#131f42}
.job.big h3{font-size:28px}
.job p{color:#4a5775;font-size:16px}
.job .viz{margin-top:auto;padding-top:22px}
.bars{display:flex;gap:5px;align-items:flex-end;height:52px}
.bars i{flex:1;background:linear-gradient(180deg,#3a87ac,rgba(58,135,172,.16));border-radius:2px 2px 0 0}
.nodes{display:flex;align-items:center;gap:7px}
.nodes i{height:2px;flex:1;background:#dde3ee;border-radius:2px}
.nodes i.on{background:#3a87ac}
.nodes b{width:9px;height:9px;border-radius:50%;border:1.5px solid #3a87ac;flex:none}
.gate{display:flex;gap:6px;flex-wrap:wrap}
.jobs .vtag{font-size:10.5px;padding:5px 9px}
.jobs .vtag.ok{color:#116045;background:#e6f4ea;border-color:rgba(17,96,69,.32)}
.jobs .vtag.hold{color:#b45309;background:#fef3c7;border-color:rgba(180,83,9,.30)}
.jobs .vtag.stop{color:#b91c1c;background:#fee2e2;border-color:rgba(185,28,28,.30)}

/* ============================================================
   CHAOS — Direction B's section: heading and leak diagram left,
   the argument in a lit glass pane right, on the dark ground.
   ============================================================ */
.chaos{background:
  radial-gradient(760px 520px at 76% 26%,rgba(116,199,236,.15),transparent 64%),
  radial-gradient(640px 460px at 94% 82%,rgba(114,135,253,.12),transparent 66%),
  var(--void);
  color:var(--text);border-block:1px solid var(--line-2)}
.chaos .grid12{align-items:start;gap:52px 64px}
.chaos .h{grid-column:span 6}
.chaos .b{grid-column:span 6}
.chaos h2{margin-bottom:36px}
.chaos .b{position:relative;border-radius:22px;
  padding:clamp(28px,3.3vw,46px) clamp(24px,3vw,44px);
  background:linear-gradient(152deg,rgba(137,220,235,.17),rgba(116,199,236,.07) 48%,rgba(114,135,253,.10));
  border:1px solid rgba(137,220,235,.24);
  backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%);
  box-shadow:0 1px 0 rgba(255,255,255,.11) inset,0 30px 70px -34px rgba(0,0,0,.95)}
.chaos .b .lead{color:#d3e5ee;max-width:56ch}
.chaos .pull{margin:28px 0;padding:6px 0 6px 22px;border-left:3px solid var(--sky)}
.chaos .pull p{font-size:clamp(21px,2.2vw,27px);font-weight:600;line-height:1.28;
  letter-spacing:-.022em;color:#fff;max-width:32ch;font-family:var(--display)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .chaos .b{background:linear-gradient(152deg,rgba(137,220,235,.13),rgba(19,26,43,.94))}}
.leak{display:block;width:100%;max-width:560px;height:auto;margin-inline:auto}
.leak .lk{opacity:0;animation:sc .6s var(--e) both}
/* the escaping routes flow, the same device .converge already uses, so the
   two graphics in the slab read as one moving language. */
.leak path.lk{stroke-dasharray:5 5;
  animation:sc .6s var(--e) both,leakflow 1.9s linear infinite}
.leak circle.lk{animation:sc .6s var(--e) both,leakpulse 2.8s ease-in-out infinite}
@keyframes leakflow{to{stroke-dashoffset:-40}}
@keyframes leakpulse{0%,100%{opacity:1}50%{opacity:.42}}
.leak rect{stroke:rgba(255,255,255,.15)}
.leak line{stroke:#8e9bb4}
.leak circle[fill="#c3cad6"]{fill:#5b6880}
@keyframes sc{to{opacity:1}}

/* ============================================================
   THE SHIFT — Direction B: heading and convergence diagram left,
   the argument right.
   ============================================================ */
/* matches .chaos so the two read as one dark run inside the slab */
.shift{background:var(--void);border-bottom:1px solid var(--line-2)}
.shift .grid12{align-items:start;gap:52px 64px}
.shift .h{grid-column:span 6}
.shift .b{grid-column:span 6}
.shift h2{margin-bottom:48px}
.converge{display:block;width:100%;max-width:620px;height:auto}
.converge .cv{stroke-dasharray:14 10;animation:flow 3.2s linear infinite}
.converge .ln{stroke-dasharray:18 8;animation:flow 2.1s linear infinite}
.converge .cn{opacity:0;animation:fadein .5s var(--e) both}
.converge circle.cn:last-of-type{animation:fadein .5s var(--e) both,corepulse 2.6s ease-in-out infinite 1s}
@keyframes flow{to{stroke-dashoffset:-48}}
@keyframes fadein{to{opacity:1}}
@keyframes corepulse{0%,100%{r:4.2}50%{r:6}}
.shift .b .lead{max-width:56ch}
.shift .b .lead + .lead{margin-top:22px}

/* ---- the thesis line, moved down the page ---- */
.thesis{position:relative;isolation:isolate;overflow:hidden;background:var(--void);
  padding:150px 0;border-block:1px solid var(--line-2);text-align:center}
.thesis .bg{position:absolute;inset:0;z-index:0;opacity:0;transform:scale(1.5);
  animation:gin 2s cubic-bezier(.25,.1,.25,1) forwards}
@keyframes gin{to{opacity:1;transform:scale(1)}}
.thesis .scrimc{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 46%,rgba(7,12,28,.86),rgba(7,12,28,.42) 62%,transparent 82%)}
.thesis::after{content:"";position:absolute;inset:auto 0 0 0;height:150px;z-index:1;
  background:linear-gradient(180deg,transparent,var(--void));pointer-events:none}
.thesis .wrap{position:relative;z-index:2}
.thesis p.big{font-family:var(--display);font-weight:700;font-size:clamp(34px,6vw,80px);
  line-height:1;letter-spacing:-.038em;color:#fff;max-width:18ch;margin-inline:auto}
.thesis p.big em{font-style:normal;color:var(--sky)}
.thesis .sig{margin:26px auto 0;font-size:17px;color:#c8d2e6;line-height:1.55;max-width:52ch}
.thesis .sig b{color:var(--sky);font-weight:600}

/* ============================================================
   TWO JOURNEYS — Direction B's cards, with the marks and chips.
   ============================================================ */
.paths{background:var(--void);border-block:1px solid var(--line-2)}
.paths h2{margin-bottom:48px}
.paths .grid12{gap:22px;align-items:stretch}
.jcard{grid-column:span 6;border:1px solid var(--line);border-radius:16px;padding:38px 36px 34px;
  background:var(--raise);display:flex;flex-direction:column;
  transition:border-color .22s var(--e),background .22s var(--e),transform .22s var(--e)}
.jcard:hover{border-color:rgba(137,220,235,.36);background:var(--raise-2);transform:translateY(-3px)}
.jmark{height:44px;margin-bottom:26px}
.jmark svg{height:100%;width:auto;display:block;overflow:visible}
.jcard h3{font-size:25px;letter-spacing:-.026em;margin-bottom:16px;line-height:1.2}
.jcard p{color:var(--dim);font-size:16.5px;margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#aab6cc;border:1px solid var(--line);border-radius:6px;padding:8px 12px;
  background:rgba(255,255,255,.02)}
.jcard .go{margin-top:auto;font-weight:600;font-size:16.5px;color:var(--sky);
  display:inline-flex;gap:8px;transition:gap .18s var(--e)}
.jcard:hover .go{gap:14px}

/* ============================================================
   QUESTIONS / FAQ — Direction B's light treatment.
   ============================================================ */
.asks .grid12{gap:28px}
.asks .h{grid-column:span 4}
.asks .list{grid-column:span 8}
.ask{padding:36px 0;border-top:1px solid var(--line)}
.ask:last-child{border-bottom:1px solid var(--line)}
.asks.lt .ask{padding:30px 34px;border:1px solid var(--lt-line);border-radius:16px;
  background:#f7fbfd;margin-bottom:18px;
  box-shadow:0 0 0 4px rgba(137,220,235,.10),0 14px 34px rgba(15,26,58,.07);
  transition:box-shadow .3s var(--e),transform .3s var(--e),border-color .3s var(--e)}
.asks.lt .ask:hover{transform:translateY(-3px);border-color:#a7d9ea;
  box-shadow:0 0 0 6px rgba(137,220,235,.20),0 22px 48px rgba(15,26,58,.12)}
.asks.lt .ask:last-child{margin-bottom:0;border-bottom:1px solid var(--lt-line)}
.ask h3{font-size:22px;margin-bottom:13px;letter-spacing:-.024em}
.ask p{color:var(--dim);font-size:16.5px}
.ask p + p{margin-top:14px}
.asks.lt .ask p{color:var(--lt-body)}

/* ============================================================
   TRUST STRIP — Direction A.
   ============================================================ */
.trust{background:linear-gradient(160deg,var(--void),#101c44);border-block:1px solid var(--line-2)}
.trust .grid12{align-items:center;gap:40px 24px}
.trust .h{grid-column:span 7}
.trust .a{grid-column:span 5;display:flex;justify-content:flex-end}
.facts{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(137,220,235,.22);border:1px solid rgba(137,220,235,.28);
  border-radius:12px;overflow:hidden;margin-top:38px}
.fact{background:rgba(10,20,44,.72);padding:22px;transition:background .22s var(--e)}
.fact:hover{background:rgba(16,30,64,.82)}
.fact b{display:block;font-family:var(--display);font-size:15px;color:#fff;margin-bottom:5px}
.fact span{font-size:13.5px;color:var(--dim)}

/* ============================================================
   TEAM / PEOPLE — Direction A. Reflows from two to five.
   ============================================================ */
.team{background:var(--body);border-block:1px solid var(--line)}
.team h2{color:#fff;margin-bottom:14px}
.team .tm-lead{color:var(--dim);font-size:18px;max-width:56ch;margin-bottom:52px}
.tm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.tm-grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:940px}
.tm{margin:0;background:var(--raise);border:1px solid var(--line);border-radius:16px;
  padding:14px 14px 20px;transition:transform .3s var(--e),border-color .3s var(--e),box-shadow .3s var(--e)}
.tm:hover{transform:translateY(-4px);border-color:var(--sky);box-shadow:0 20px 44px rgba(0,0,0,.34)}
.tm img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  object-position:center top;border-radius:11px;filter:grayscale(.55);
  transition:filter .45s var(--e)}
.tm:hover img{filter:grayscale(0)}
/* Monogram fallback, retained for the open team slot and any future card whose
   photograph has not landed. It sits in the same square frame as a portrait, so
   the grid stays even and the gap reads as deliberate, not as a missing image. */
.mono-portrait{display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:11px;
  background:
    radial-gradient(120% 120% at 22% 12%,rgba(137,220,235,.16),transparent 62%),
    linear-gradient(158deg,var(--raise-2),var(--void));
  border:1px solid var(--line);position:relative;overflow:hidden}
.mono-portrait::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(150deg,#000,transparent 72%);
  mask-image:linear-gradient(150deg,#000,transparent 72%)}
.mono-portrait span{position:relative;z-index:1;font-family:var(--display);font-weight:700;
  font-size:clamp(30px,3.4vw,42px);letter-spacing:.02em;color:var(--sky);opacity:.9}
.tm figcaption{padding:18px 4px 0}
.tm h3{font-size:19px;color:#fff;margin:0}
.tm .role{margin-top:6px;font-size:15px;color:var(--sky)}
.tm .bio{margin-top:14px;font-size:15px;color:var(--dim);line-height:1.6}
.tm .mail{margin-top:14px;display:inline-block;font-size:14.5px;color:var(--sky);
  border-bottom:1px solid rgba(137,220,235,.35)}
.tm .mail:hover{color:#fff;border-bottom-color:#fff}
.tm.slot{display:grid;place-items:center;text-align:center;border-style:dashed;
  background:rgba(255,255,255,.014);min-height:260px;padding:32px}
.tm.slot p{color:var(--faint);font-size:14.5px;max-width:26ch}

/* ============================================================
   PROOF SLOT — ships empty, has to look deliberate.
   ============================================================ */
.proof .grid12{gap:24px}
.proof .h{grid-column:span 7}
.proof .f{grid-column:span 12;margin-top:34px;border:1px solid var(--line);border-radius:14px;
  padding:34px;background:rgba(255,255,255,.014)}
.wells{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.well{height:70px;border-radius:8px;border:1px dashed var(--line);background:rgba(255,255,255,.02)}
.proof .note{margin-top:20px;font-size:13px;color:var(--faint)}

/* ============================================================
   FINAL CTA + FOOTER — Direction A.
   ============================================================ */
.end{position:relative;isolation:isolate;overflow:hidden;background:var(--void);
  border-top:1px solid var(--line-2)}
.end .field{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;
  opacity:0;animation:gin 1.6s cubic-bezier(.25,.1,.25,1) forwards}
.end .scrimc{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(95deg,rgba(7,12,28,.93) 0%,rgba(7,12,28,.8) 38%,
             rgba(7,12,28,.42) 70%,rgba(7,12,28,.6) 100%)}
.end .scrimc::after{content:"";position:absolute;inset:auto 0 0 0;height:130px;
  background:linear-gradient(180deg,transparent,var(--void))}
.end .wrap{position:relative;z-index:2}
.end h2{max-width:18ch;margin-bottom:32px}

footer{position:relative;background:var(--raise);border-top:1px solid var(--line);
  padding:64px 0 56px;color:var(--dim);font-size:14.5px}
.fb{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(4,minmax(0,1fr));gap:40px 24px}
.fb .mark{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.fb .mark img{height:42px;opacity:.95}
.fb .copy{font-size:13.5px;color:var(--faint);line-height:1.55}
.fcol h4{font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-bottom:16px}
.fcol a{display:block;padding:5px 0;color:var(--dim);transition:color .16s var(--e)}
.fcol a:hover{color:#fff}
.soc{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);color:var(--dim);flex:none;
  transition:color .18s var(--e),border-color .18s var(--e),background .18s var(--e)}
.soc svg{width:18px;height:18px;display:block}
.soc:hover{color:var(--sky);border-color:rgba(137,220,235,.45);background:rgba(255,255,255,.04)}
.fbot{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--faint)}
.fbot nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}

/* ============================================================
   SHARED PAGE COMPONENTS (platform, operators, FS, trust, company)
   ============================================================ */
/* numbered stack: the three layers, the five capabilities, the steps */
.stack{display:grid;gap:18px}
.st{display:grid;grid-template-columns:64px minmax(0,1fr);gap:24px;align-items:start;
  border:1px solid var(--line);border-radius:14px;padding:28px 30px;background:var(--raise);
  transition:border-color .22s var(--e),background .22s var(--e),transform .22s var(--e)}
.st:hover{border-color:rgba(137,220,235,.36);background:var(--raise-2);transform:translateY(-2px)}
.st .num{font-family:var(--mono);font-size:13px;color:var(--sky);
  border:1px solid rgba(137,220,235,.28);border-radius:9px;width:44px;height:44px;
  display:grid;place-items:center;background:rgba(137,220,235,.08)}
.st h3{font-size:21px;margin-bottom:10px}
.st p{color:var(--dim);font-size:16.5px}
.lt .st{background:#f7fbfd;border-color:var(--lt-line);
  box-shadow:0 10px 26px rgba(15,26,58,.05)}
.lt .st:hover{background:#fff;border-color:#a7d9ea}
.lt .st p{color:var(--lt-body)}
.lt .st .num{color:var(--lt-accent);border-color:#bcdfec;background:#e9f5fa}

/* three-up / two-up card grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
/* five cards on a four-up grid leaves an orphan on the last row. A six
   column track takes 3 across then 2 across, which fills both rows. */
.cards.five{grid-template-columns:repeat(6,minmax(0,1fr))}
.cards.five > *{grid-column:span 2}
.cards.five > *:nth-child(4),.cards.five > *:nth-child(5){grid-column:span 3}
@media(max-width:1000px){
  .cards.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.five > *,.cards.five > *:nth-child(4),.cards.five > *:nth-child(5){grid-column:span 1}}
@media(max-width:620px){
  .cards.five{grid-template-columns:minmax(0,1fr)}}
.card{border:1px solid var(--line);border-radius:14px;padding:32px;background:var(--raise);
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .22s var(--e),background .22s var(--e),transform .22s var(--e)}
.card:hover{border-color:rgba(137,220,235,.36);background:var(--raise-2);transform:translateY(-3px)}
.card h3{font-size:21px}
.card p{color:var(--dim);font-size:16.5px}
.card .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(137,220,235,.09);border:1px solid rgba(137,220,235,.22);margin-bottom:6px}
.card .ico svg{width:22px;height:22px;stroke:var(--sky);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.lt .card{background:#f7fbfd;border-color:var(--lt-line);box-shadow:0 10px 26px rgba(15,26,58,.05)}
.lt .card:hover{background:#fff;border-color:#a7d9ea}
.lt .card p{color:var(--lt-body)}
.inl{color:var(--sky);font-weight:600;border-bottom:1px solid rgba(137,220,235,.35)}
.lt .inl,.light .inl{color:var(--lt-accent);border-bottom-color:rgba(47,109,140,.4)}
.inl:hover{color:#fff;border-bottom-color:#fff}
.lt .inl:hover,.light .inl:hover{color:var(--lt-ink);border-bottom-color:var(--lt-ink)}
.lt .card .ico{background:#e9f5fa;border-color:#bcdfec}
.lt .card .ico svg{stroke:var(--lt-accent)}

/* the walkthrough: a vertical spine with steps hung off it */
.walk{position:relative;display:grid;gap:0;margin-top:12px;padding-left:0}
.wk{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:26px;
  padding:30px 0}
.wk + .wk{border-top:1px solid var(--line)}
.lt .wk + .wk{border-top-color:var(--lt-line)}
.wk .mk{position:relative;display:grid;place-items:start center}
.wk .mk b{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--sky);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(137,220,235,.34);background:rgba(137,220,235,.08);position:relative;z-index:2}
.wk .mk::after{content:"";position:absolute;top:46px;bottom:-30px;width:1px;
  background:linear-gradient(180deg,rgba(137,220,235,.34),rgba(137,220,235,.06));z-index:1}
.wk:last-child .mk::after{display:none}
.wk h3{font-size:22px;margin-bottom:11px}
.wk p{color:var(--dim);font-size:17px;max-width:68ch}
.lt .wk p{color:var(--lt-body)}
.lt .wk .mk b{color:var(--lt-accent);border-color:#bcdfec;background:#e9f5fa}
.lt .wk .mk::after{background:linear-gradient(180deg,#bcdfec,rgba(188,223,236,.15))}

/* three governance questions, side by side */
.gov{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:rgba(137,220,235,.20);border:1px solid rgba(137,220,235,.26);
  border-radius:14px;overflow:hidden;margin-top:40px}
.gv{background:rgba(10,20,44,.76);padding:32px;transition:background .22s var(--e)}
.gv:hover{background:rgba(16,30,64,.86)}
.gv h3{font-size:20px;margin-bottom:12px;color:var(--sky)}
.gv p{color:var(--dim);font-size:16px}
/* "coming soon" is a status, not a claim: it gets a pill rather than
   sitting inside the sentence where it reads as shipped */
.soon{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--warn);background:rgba(245,181,68,.12);
  border:1px solid rgba(245,181,68,.3);border-radius:5px;padding:4px 8px;margin-bottom:10px}

/* the three moments (FS) */
.moments{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
/* the moments share the service-line warp, but keep their amber tension:
   these are problem states, not offers. */
.mo{position:relative;overflow:hidden;border:0;border-radius:var(--r-card);padding:0;
  min-height:290px;background:linear-gradient(160deg,#0d1631,#111c40);
  box-shadow:var(--edge),var(--lift);
  transition:transform .34s var(--e),box-shadow .34s var(--e)}
.mo::before{display:none}
.mo:hover{transform:translateY(-4px);border-color:transparent;
  box-shadow:var(--edge),0 34px 68px -26px rgba(2,5,14,.96),0 0 40px -14px rgba(245,181,68,.42)}
.mo .sl-in{border-color:rgba(255,255,255,.14)}
.mo h3{font-size:20px;color:#fff;letter-spacing:-.022em;margin:0 0 12px}
.mo p{color:rgba(226,234,248,.92);font-size:16px;line-height:1.62;margin:0}

/* data-handling grid (trust) */
.dh{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.dhc{border:1px solid var(--line);border-radius:14px;padding:30px;background:var(--raise);
  transition:border-color .22s var(--e),background .22s var(--e)}
.dhc:hover{border-color:rgba(137,220,235,.36);background:var(--raise-2)}
.dhc h3{font-size:19px;margin-bottom:11px;color:var(--sky)}
.dhc p{color:var(--dim);font-size:16px}

/* empty-by-design slots: architecture diagram, subprocessor table */
.slot{border:1px dashed var(--line);border-radius:14px;background:rgba(255,255,255,.014);
  padding:56px 34px;text-align:center}
.slot .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:rgba(137,220,235,.08);border:1px solid rgba(137,220,235,.2);margin:0 auto 20px}
.slot .ico svg{width:24px;height:24px;stroke:var(--sky);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.slot b{display:block;font-family:var(--display);font-size:17px;color:#fff;margin-bottom:8px}
.slot p{color:var(--faint);font-size:14.5px;max-width:52ch;margin-inline:auto}
.lt .slot{border-color:#cfe0ea;background:#f7fbfd}
.lt .slot b{color:var(--lt-ink)}
.lt .slot p{color:var(--lt-mute)}
.lt .slot .ico{background:#e9f5fa;border-color:#bcdfec}
.lt .slot .ico svg{stroke:var(--lt-accent)}

/* subprocessor table shell */
.tbl{width:100%;border-collapse:collapse;margin-top:28px;font-size:15.5px}
.tbl th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);font-weight:500;padding:0 16px 12px;
  border-bottom:1px solid var(--line)}
.tbl td{padding:16px;border-bottom:1px solid var(--line-2);color:var(--dim)}

/* company facts */
.facts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:40px}
.fx{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--raise)}
.fx b{display:block;font-family:var(--display);font-size:26px;color:#fff;
  letter-spacing:-.02em;margin-bottom:8px}
.fx span{font-size:14.5px;color:var(--dim)}

/* pricing: the three service levels, ascending */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.tier{position:relative;border:1px solid var(--lt-line);border-radius:16px;padding:34px 30px 30px;
  background:#f7fbfd;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  box-shadow:0 10px 26px rgba(15,26,58,.05);
  transition:border-color .22s var(--e),transform .22s var(--e),box-shadow .22s var(--e)}
.tier::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,#3a87ac,rgba(58,135,172,0))}
.tier:nth-child(2)::before{background:linear-gradient(90deg,#3a87ac,#4a56d6 60%,rgba(74,86,214,0))}
.tier:nth-child(3)::before{background:linear-gradient(90deg,#4a56d6,rgba(74,86,214,0))}
.tier:hover{border-color:#a7d9ea;transform:translateY(-3px);
  box-shadow:0 22px 48px rgba(15,26,58,.10)}
.tier .lvl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--lt-accent)}
.tier h3{font-size:23px;color:var(--lt-ink)}
.tier p{color:var(--lt-body);font-size:16px}

/* pull quote / conviction line inside a page */
.convict{margin-top:44px;padding:34px 38px;border-radius:18px;
  border:1px solid rgba(137,220,235,.24);
  background:linear-gradient(150deg,rgba(137,220,235,.11),rgba(114,135,253,.07))}
.convict p{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.8vw,34px);
  line-height:1.16;letter-spacing:-.028em;color:#fff;max-width:24ch}
.convict span{display:block;margin-top:14px;font-family:var(--sans);font-weight:400;
  font-size:16.5px;color:var(--dim);letter-spacing:0;max-width:52ch}
.lt .convict,.convict.lt-convict{border-color:#bcdfec;
  background:linear-gradient(150deg,#e9f5fa,#f2f0fd)}
.lt .convict p,.convict.lt-convict p{color:var(--lt-ink)}
.lt .convict span,.convict.lt-convict span{color:var(--lt-body)}

/* a two-column "what you get" split with a rail */
.split2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:44px;align-items:start}
.rail{display:grid;gap:14px}
.rl-item{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;color:var(--dim)}
.rl-item svg{width:20px;height:20px;flex:none;margin-top:3px;stroke:var(--sky);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lt .rl-item{color:var(--lt-body)}
.lt .rl-item svg{stroke:var(--lt-accent)}

/* form (demo page) */
.form{display:grid;gap:18px;border:1px solid var(--line);border-radius:18px;padding:34px;
  background:var(--raise)}
.field-l{display:grid;gap:8px}
.field-l span{font-size:14px;color:var(--dim);font-weight:500}
.field-l span{display:flex;align-items:baseline;gap:8px}
.req{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.field-l .err{font-style:normal;font-size:13.5px;color:#ffb4b4;margin-top:2px}
.field-l.bad input,.field-l.bad select,.field-l.bad textarea{border-color:rgba(255,107,107,.6)}
.field-l.note input{border-color:rgba(245,181,68,.5)}
.formnote{font-size:15px;color:var(--sky);border-left:2px solid var(--sky);padding-left:14px;
  line-height:1.55}
.formnote.bad{color:#ffb4b4;border-left-color:#ff6b6b}
.formnote.good{color:#8ff0c4;border-left-color:var(--ok)}
.field-l input,.field-l select,.field-l textarea{font-family:var(--sans);font-size:16px;
  color:var(--text);background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:10px;padding:14px 16px;width:100%;transition:border-color .18s var(--e)}
.field-l input:focus,.field-l select:focus,.field-l textarea:focus{border-color:var(--sky)}
.field-l textarea{min-height:120px;resize:vertical}
.field-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.form button[disabled]{opacity:.6;cursor:default}

/* holding-page notice */
.notice{border:1px dashed rgba(137,220,235,.3);border-radius:14px;padding:26px 30px;
  background:rgba(137,220,235,.05);margin-top:36px}
.notice p{color:var(--dim);font-size:16px;max-width:60ch}
.notice b{color:var(--sky)}

/* ---- cookie and consent banner ---- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:rgba(9,16,38,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);box-shadow:0 -18px 44px rgba(0,0,0,.4)}
.ck-in{width:min(100% - 44px,1240px);margin-inline:auto;padding:22px 0;
  display:flex;align-items:center;gap:28px 34px;flex-wrap:wrap}
.ck-tx{flex:1 1 420px;min-width:0}
.ck-tx h2{font-size:17px;margin-bottom:6px}
.ck-tx p{font-size:14.5px;color:var(--dim);max-width:74ch}
.ck-bt{display:flex;gap:10px;flex-wrap:wrap}
.btn-g2{border-color:transparent;color:var(--dim);text-decoration:underline;
  text-underline-offset:3px}
.btn-g2:hover{color:#fff}
.ck-more{flex:1 1 100%;font-size:14px;color:var(--dim);border-top:1px solid var(--line-2);
  padding-top:18px;margin-top:2px}
.ck-more a{color:var(--sky);border-bottom:1px solid rgba(137,220,235,.35)}

/* ---- legal pages: verbatim counsel text, site typography only ---- */
.legal{padding:76px 0 104px;background:var(--body)}
.legal .doc{width:min(100%,78ch);margin-inline:auto}
.legal .doc h2{font-size:clamp(24px,2.6vw,31px);margin:52px 0 16px;letter-spacing:-.026em}
.legal .doc h2:first-child{margin-top:0}
.legal .doc h3{font-size:20px;margin:34px 0 12px;color:var(--sky)}
.legal .doc h4{font-size:17px;margin:26px 0 10px}
.legal .doc p{color:#c2cbe0;font-size:16.5px;line-height:1.7;margin:0 0 16px}
.legal .doc ul{margin:0 0 20px;padding-left:22px;color:#c2cbe0;font-size:16.5px;line-height:1.7}
.legal .doc li{margin-bottom:8px}
.legal .doc li p{margin:0}
.legal .doc strong{color:#fff;font-weight:600}
.legal .doc a{color:var(--sky);border-bottom:1px solid rgba(137,220,235,.35);word-break:break-word}
.legal .doc a:hover{color:#fff;border-bottom-color:#fff}
.legal .doc hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.updated{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:44px;padding-bottom:20px;border-bottom:1px solid var(--line)}

/* ---- calendar embed slot (demo page) ---- */
.cal{border:1px dashed var(--line);border-radius:16px;background:rgba(255,255,255,.014);
  min-height:520px;display:grid;place-items:center;text-align:center;padding:48px 32px}
.cal b{display:block;font-family:var(--display);font-size:18px;color:#fff;margin-bottom:10px}
.cal p{color:var(--faint);font-size:14.5px;max-width:46ch;margin-inline:auto}

/* ---- routes list (contact page) ---- */
.routes{display:grid;gap:16px}
.rt-item{display:grid;grid-template-columns:52px minmax(0,1fr);gap:22px;align-items:start;
  border:1px solid var(--line);border-radius:14px;padding:26px 28px;background:var(--raise);
  transition:border-color .22s var(--e),background .22s var(--e),transform .22s var(--e)}
.rt-item:hover{border-color:rgba(137,220,235,.36);background:var(--raise-2);transform:translateY(-2px)}
.rt-item .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(137,220,235,.09);border:1px solid rgba(137,220,235,.22)}
.rt-item .ico svg{width:21px;height:21px;stroke:var(--sky);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.rt-item h3{font-size:19px;margin-bottom:9px}
.rt-item p{color:var(--dim);font-size:16px;margin-bottom:12px}
.rt-item a.go{color:var(--sky);font-weight:600;font-size:15.5px;
  display:inline-flex;gap:7px;transition:gap .18s var(--e)}
.rt-item:hover a.go{gap:12px}

/* scroll reveal, applied by site.js */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--e),transform .6s var(--e);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ---- responsive ---- */

/* the navy plate inside job 01: a dark inset on a light card, with the
   product window cropped by its right edge the way the band plates are. */
.job .viz.navy{position:relative;margin-top:26px;padding-top:0;height:238px;
  border-radius:14px;overflow:hidden;
  background:
    radial-gradient(62% 68% at 24% 22%,rgba(114,135,253,.42),transparent 66%),
    radial-gradient(56% 60% at 84% 82%,rgba(116,199,236,.28),transparent 68%),
    linear-gradient(150deg,#0d1631,#16224b 46%,#1d3064)}
.job .viz.navy .win{position:absolute;top:26px;left:26px;right:-48px;bottom:0;
  border-radius:13px;overflow:hidden;
  background:linear-gradient(180deg,#0c1531,#0a1128);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.8)}
/* ---- the stack on a light band: a wide white lane per step, with a
   large blue numeral cut off from the copy by an inset hairline.
   The dark-band .st keeps its own treatment. ---- */
.lt .stack{gap:16px}
.lt .st{grid-template-columns:auto minmax(0,1fr);gap:0;align-items:center;
  background:#fff;border:1px solid var(--lt-line);border-radius:16px;
  padding:30px 36px;box-shadow:var(--lt-lift);
  transition:transform .34s var(--e),box-shadow .34s var(--e),border-color .34s var(--e)}
.lt .st:hover{transform:translateY(-3px);box-shadow:var(--lt-lift-hi);
  border-color:#c9d8ea;background:#fff}
.lt .st .num{position:relative;display:block;width:auto;height:auto;
  background:none;border:0;box-shadow:none;border-radius:0;
  font-family:var(--display);font-weight:700;font-size:46px;line-height:1;
  letter-spacing:-.03em;color:var(--lt-blue);padding:2px 46px 2px 8px;
  align-self:center}
.lt .st .num::after{content:"";position:absolute;right:0;top:-4px;bottom:-4px;width:1px;
  background:var(--lt-line)}
.lt .st:hover .num{border:0;box-shadow:none}
.lt .st > div:nth-child(2){padding-left:38px}
.lt .st h3{font-size:20px;color:var(--lt-ink);letter-spacing:-.022em;margin:0 0 9px}
.lt .st p{color:var(--lt-body);font-size:16.5px;line-height:1.6;max-width:52ch}
.dot{color:var(--lt-blue)}

@media(max-width:760px){
  .lt .st{grid-template-columns:minmax(0,1fr);padding:26px 24px;row-gap:14px}
  .lt .st .num{font-size:38px;padding:0}
  .lt .st .num::after{display:none}
  .lt .st > div:nth-child(2){padding-left:0}
}

.tenancy{background:#222f5c;border-block:1px solid rgba(255,255,255,.07)}

/* ============================================================
   TENANCY — the model drawn. Three plates on the same isometric
   angle, offset vertically so they read as stacked layers: your
   organization on top, client organizations under it, the platform
   underneath both.
   ============================================================ */
.tn-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:56px;align-items:center;margin-bottom:56px}
.tenancy h2{font-size:clamp(34px,4vw,54px);line-height:1.08;letter-spacing:-.032em;margin:0}
.tn-say .lead{margin-top:24px;max-width:52ch}
.tn-em{margin-top:20px;font-size:17.5px;font-weight:600;color:var(--sky)}

/* the layer diagram is a render (no text in it), with the labels laid
   over as live HTML so they stay crisp, selectable and translatable.
   A radial mask feathers the image edge into the section ground. */
.iso{position:relative;aspect-ratio:1/1;max-width:560px;margin-inline:auto}
.iso img{display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(74% 74% at 50% 50%,#000 54%,transparent 100%);
  mask-image:radial-gradient(74% 74% at 50% 50%,#000 54%,transparent 100%)}
.iso-lb{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.012em;
  color:#fff;padding:8px 15px;border-radius:999px;
  background:rgba(9,14,32,.9);border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--edge),0 10px 26px -12px rgba(0,0,0,.8)}
.iso-lb.l1{top:20%}
.iso-lb.l2{top:49.5%}
.iso-lb.l3{top:75%}
@media(max-width:620px){.iso-lb{font-size:12.5px;padding:6px 11px}}

.tn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.tn{position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--r-card);padding:32px 28px;
  background:var(--surf),var(--raise);box-shadow:var(--edge),var(--lift);
  transition:transform .34s var(--e),border-color .34s var(--e),box-shadow .34s var(--e)}
.tn::before{content:"";position:absolute;inset:0 0 auto 0;height:2px}
.tn:nth-child(1)::before{background:linear-gradient(90deg,#3ddcb4,#89dceb 70%,rgba(137,220,235,0))}
.tn:nth-child(2)::before{background:linear-gradient(90deg,#74c7ec,#7287fd 70%,rgba(114,135,253,0))}
.tn:nth-child(3)::before{background:linear-gradient(90deg,#7287fd,#a86ffd 70%,rgba(168,111,253,0))}
.tn:hover{transform:translateY(-4px);border-color:rgba(137,220,235,.34);
  box-shadow:var(--edge),var(--lift-hi)}
.tn-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:22px;box-shadow:var(--chip-edge)}
.tn:nth-child(1) .tn-ic{background:rgba(61,220,180,.14);border:1px solid rgba(61,220,180,.3)}
.tn:nth-child(2) .tn-ic{background:rgba(116,199,236,.14);border:1px solid rgba(116,199,236,.3)}
.tn:nth-child(3) .tn-ic{background:rgba(168,111,253,.14);border:1px solid rgba(168,111,253,.32)}
.tn-ic svg{width:24px;height:24px;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.tn:nth-child(1) .tn-ic svg{stroke:#4fe3c1}
.tn:nth-child(2) .tn-ic svg{stroke:#74c7ec}
.tn:nth-child(3) .tn-ic svg{stroke:#b489fd}
.tn h3{font-size:20px;color:#fff;letter-spacing:-.022em;line-height:1.24;margin:0 0 12px;
  max-width:16ch}
.tn p{color:var(--dim);font-size:16px;line-height:1.62;margin:0}

@media(max-width:1000px){
  .tn-top{grid-template-columns:minmax(0,1fr);gap:8px}
  .iso{height:390px;transform:scale(.88)}
}
@media(max-width:620px){
  .iso{height:320px;transform:scale(.68)}
}

/* ---- service lines: a slow warping gradient behind each card, with a
   dark glass panel over it. The blur sits on the animating element so
   the browser rasterises it once and only spins the layer. ---- */
.sl{position:relative;overflow:hidden;border-radius:var(--r-card);min-height:290px;
  background:linear-gradient(160deg,#0d1631,#111c40);
  box-shadow:var(--edge),var(--lift);
  transition:transform .34s var(--e),box-shadow .34s var(--e)}
.sl:hover{transform:translateY(-4px);box-shadow:var(--edge),var(--lift-hi)}
.sl-warp{position:absolute;inset:-45%;z-index:0;filter:blur(40px);
  background:
    radial-gradient(38% 42% at 28% 30%,var(--c1),transparent 62%),
    radial-gradient(40% 44% at 74% 34%,var(--c2),transparent 64%),
    radial-gradient(46% 50% at 56% 76%,var(--c3),transparent 66%),
    radial-gradient(36% 40% at 16% 78%,var(--c4),transparent 62%);
  animation:slwarp 26s linear infinite;animation-delay:var(--sd)}
@keyframes slwarp{
  0%  {transform:rotate(0deg)   scale(1.08)}
  50% {transform:rotate(180deg) scale(1.26)}
  100%{transform:rotate(360deg) scale(1.08)}
}
.sl-tex{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:9px 9px}
.sl-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  padding:30px 28px;border-radius:var(--r-card);
  background:rgba(6,10,24,.9);border:1px solid rgba(255,255,255,.13)}
.sl-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:20px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);box-shadow:var(--chip-edge)}
.sl-ic svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sl h3{font-size:19px;color:#fff;letter-spacing:-.022em;line-height:1.28;margin:0 0 12px}
.sl p{color:rgba(225,233,248,.9);font-size:15.5px;line-height:1.6;margin:0}

/* ---- the paired columns, each with its own accent ---- */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.duo-c{--acc:var(--lt-blue)}
.duo-c.a{padding-right:68px}
.duo-c.b{--acc:#2f8f9d;padding-left:68px;border-left:1px solid var(--lt-line)}
.duo-c h2{font-size:clamp(32px,3.6vw,50px);line-height:1.06;letter-spacing:-.034em;
  margin:0 0 28px;color:var(--lt-ink)}
.duo-c .dot{color:var(--acc)}
.duo-c .lead{color:var(--lt-body);font-size:17px;line-height:1.7;max-width:44ch}
.duo-c .lead b{color:var(--acc);font-weight:600}
.duo-rule{display:block;width:64px;height:1px;background:var(--lt-line);margin:34px 0 26px}
.duo-em{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.36;
  letter-spacing:-.02em;color:var(--lt-ink);margin-bottom:20px;max-width:34ch}
.duo-em b{color:var(--acc);font-weight:700}

@media(max-width:900px){
  .duo{grid-template-columns:minmax(0,1fr);gap:48px}
  .duo-c.a{padding-right:0}
  .duo-c.b{padding-left:0;border-left:0;border-top:1px solid var(--lt-line);padding-top:48px}
}


/* ---- Direction A's slab: the dark run is inset on every side and
   rounded, sitting on a light band that blends the white section above
   into the light section below. The inner sections lose their own top
   and bottom rules so the slab edge is the only edge. ---- */
.lightband{background:linear-gradient(180deg,#ffffff,#f6f9fc);padding:var(--slab-inset) 0}
.slab{margin-inline:var(--slab-inset);border-radius:var(--r-sec);
  overflow:hidden;isolation:isolate;background:var(--void);
  box-shadow:0 44px 100px -56px rgba(4,8,20,.85)}
.slab > section{border-inline:0}
.slab > section:first-child{border-top:0}
.slab > section:last-child{border-bottom:0}

/* ---- "Two ways" on the light band ---- */
.paths.lt{background:#f6f9fc;border-block:1px solid var(--lt-line-2);color:var(--lt-ink)}
.paths.lt h2{color:var(--lt-ink)}
.paths.lt .jcard{background:#fff;border-color:var(--lt-line);box-shadow:var(--lt-lift)}
.paths.lt .jcard:hover{background:#fff;border-color:#c9d8ea;box-shadow:var(--lt-lift-hi)}
.paths.lt .jcard h3{color:var(--lt-ink)}
.paths.lt .jcard p{color:var(--lt-body)}
.paths.lt .jcard .go{color:var(--lt-accent)}
.paths.lt .jcard:hover .go{color:var(--lt-ink)}
.paths.lt .chip{color:var(--lt-body);border-color:var(--lt-line);background:var(--lt-alt)}
/* the marks carry hard-coded sky in the SVG; CSS beats presentation attributes */
.paths.lt .jmark [stroke]{stroke:var(--lt-accent)}
.paths.lt .jmark [fill="#89dceb"]{fill:var(--lt-accent)}
.paths.lt .jmark [stroke="#4a5775"]{stroke:#b9c9da}

/* ---- the working session: copy left, a numbered timeline right ---- */
.sess{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:72px;align-items:start}
.sess-l h2{font-size:clamp(34px,3.9vw,53px);line-height:1.07;letter-spacing:-.034em;
  margin:0 0 26px;color:var(--lt-ink)}
.sess-l .lead{color:var(--lt-body);max-width:38ch;margin-bottom:38px}
.btn-ink{background:var(--lt-ink);color:#fff;border:0;border-radius:12px;gap:12px;
  padding:17px 26px;box-shadow:0 14px 30px -14px rgba(15,26,58,.6)}
.btn-ink svg{width:19px;height:19px;stroke:var(--sky);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--e)}
.btn-ink:hover{background:#1b2c58;color:#fff}
.btn-ink:hover svg{transform:translateX(4px)}

.sess-r{position:relative}
.sess-r::before{content:"";position:absolute;left:22px;top:24px;bottom:16px;
  border-left:1px dashed rgba(74,86,214,.32)}
.ss{position:relative;display:grid;grid-template-columns:46px 78px minmax(0,1fr);
  gap:0 22px;align-items:start;padding:26px 0;border-top:1px solid var(--lt-line-2)}
.ss:first-child{border-top:0;padding-top:0}
.ss-n{position:relative;z-index:2;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:1px solid var(--lt-line);
  box-shadow:var(--lt-lift);font-family:var(--display);font-weight:700;font-size:16px;
  color:var(--lt-blue)}
.ss-ic{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:rgba(74,86,214,.07);margin-top:-14px}
.ss-ic svg{width:31px;height:31px;stroke:var(--lt-blue);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.ss-c h3{font-size:19.5px;color:var(--lt-ink);letter-spacing:-.022em;margin:0 0 9px}
.ss-c p{color:var(--lt-body);font-size:16px;line-height:1.62;max-width:44ch}
.ss-end{position:absolute;left:16px;bottom:-2px;width:13px;height:13px;border-radius:50%;
  background:#fff;border:1px solid rgba(74,86,214,.4)}

@media(max-width:1000px){
  .sess{grid-template-columns:minmax(0,1fr);gap:44px}
}
@media(max-width:620px){
  .ss{grid-template-columns:40px minmax(0,1fr);gap:0 16px}
  .ss-ic{display:none}
  .sess-r::before{left:19px}
  .ss-n{width:40px;height:40px;font-size:15px}
}

/* ---- bento: four panels butted into one slab, only the outer
   corners rounded, each fragment running off its bottom edge ---- */
.bento{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.bn{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--lt-line);box-shadow:var(--lt-lift);
  transition:box-shadow .34s var(--e),border-color .34s var(--e)}
.bn:hover{box-shadow:var(--lt-lift-hi);border-color:#c9d8ea}
.bn.a{grid-column:span 3;border-radius:20px 0 0 0}
.bn.b{grid-column:span 2;border-radius:0 20px 0 0}
.bn.c{grid-column:span 2;border-radius:0 0 0 20px}
.bn.d{grid-column:span 3;border-radius:0 0 20px 0}
.bn-t{padding:34px 34px 0}
.bn-t.center{text-align:center;padding:38px 34px 0}
.bn-t.center p{margin-inline:auto}
.bn h3{font-size:20px;color:var(--lt-ink);letter-spacing:-.022em;margin:0 0 11px;line-height:1.26}
.bn-t.center h3{font-size:22px;max-width:20ch;margin-inline:auto}
.bn p{color:var(--lt-body);font-size:15.5px;line-height:1.62;margin:0;max-width:46ch}
.bn-v{position:relative;margin-top:26px;padding:0 0 0 34px;flex:1;min-height:150px}
.bn-v .fcard{border-radius:12px 0 0 0;box-shadow:0 -2px 20px -8px rgba(29,48,100,.22)}
.bn-fade{position:absolute;inset:auto 0 0 0;height:64px;pointer-events:none;
  background:linear-gradient(180deg,transparent,#fff)}
.bn-keys{display:flex;justify-content:center;gap:16px;padding:30px 0 38px;margin-top:auto}
.bn-key{display:grid;place-items:center;align-content:center;gap:3px;width:96px;height:96px;
  border-radius:14px;background:var(--lt-alt);border:1px solid var(--lt-line);
  box-shadow:0 6px 14px -8px rgba(29,48,100,.3),inset 0 1px 0 #fff;
  font-size:13.5px;font-weight:600;color:var(--lt-ink);text-align:center}
.bn-key i{font-style:normal;font-size:11px;font-weight:500;color:var(--lt-mute)}
.bn-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:26px 34px 0}
.bn-tile{aspect-ratio:1;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--lt-line);background:var(--lt-alt)}
.bn-tile.dash{border-style:dashed;background:none}
.bn-tile svg{width:24px;height:24px;stroke:var(--lt-blue);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.bn-link{padding:22px 34px 32px}
.bn-link a{font-size:15.5px}

@media(max-width:860px){
  .bento{grid-template-columns:minmax(0,1fr);gap:10px}
  .bn.a,.bn.b,.bn.c,.bn.d{grid-column:1/-1;border-radius:18px}
  .bn-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- SOC 2 status: position left, the two stages as numbered stops ---- */
.certs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:72px;align-items:start}
.certs-l h2{font-size:clamp(34px,3.9vw,54px);line-height:1.06;letter-spacing:-.034em;
  margin:0 0 26px;color:var(--lt-ink)}
.certs-l .lead{color:var(--lt-body);max-width:40ch}
.certs-rule{display:block;width:170px;height:1px;background:var(--lt-line);margin:34px 0 26px}
.certs-note{display:grid;grid-template-columns:60px minmax(0,1fr);gap:20px;align-items:start}
.certs-ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:rgba(74,86,214,.08)}
.certs-ic svg{width:26px;height:26px;stroke:var(--lt-blue);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.certs-note p{color:var(--lt-body);font-size:16px;line-height:1.62;max-width:44ch}
.certs-note b{color:var(--lt-ink);font-weight:700}

.certs-r{position:relative;display:grid;gap:26px}
.certs-r::before{content:"";position:absolute;left:23px;top:26px;bottom:14px;
  border-left:1px solid var(--lt-line)}
.cstep{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 30px;
  align-items:start}
.cstep-n{position:relative;z-index:2;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:1px solid var(--lt-line);
  box-shadow:var(--lt-lift);font-family:var(--display);font-weight:700;font-size:17px;
  color:var(--lt-blue)}
.cstep-card{--acc:var(--lt-blue);display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:24px;align-items:start;background:#fff;border:1px solid var(--lt-line);
  border-radius:16px;padding:28px 30px;box-shadow:var(--lt-lift);
  transition:box-shadow .34s var(--e),border-color .34s var(--e)}
.cstep-card.live{--acc:#2f8f9d}
.cstep-card:hover{box-shadow:var(--lt-lift-hi);border-color:#c9d8ea}
.cstep-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 10%,transparent)}
.cstep-ic svg{width:27px;height:27px;stroke:var(--acc);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.cstep-c h3{font-size:19px;color:var(--lt-ink);letter-spacing:-.022em;margin:0;line-height:1.28}
.cstep-rule{display:block;width:56px;height:2px;border-radius:2px;background:var(--acc);
  margin:14px 0 16px}
.cstep-c p{color:var(--lt-body);font-size:15.5px;line-height:1.62;margin:0;max-width:40ch}
.cstep-end{position:absolute;left:18px;bottom:-4px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:1px solid rgba(74,86,214,.45)}

@media(max-width:1000px){.certs{grid-template-columns:minmax(0,1fr);gap:46px}}
@media(max-width:620px){
  .cstep{grid-template-columns:40px minmax(0,1fr);gap:0 16px}
  .cstep-n{width:40px;height:40px;font-size:15px}
  .certs-r::before{left:19px}
  .cstep-card{grid-template-columns:minmax(0,1fr);gap:16px;padding:22px 20px}
}

/* ---- FS hero: no render, no stat bar. The claim runs wide and the
   supporting paragraph sits under it at a full reading measure. ---- */
.hero.fs{min-height:0;padding:104px 0 96px;display:block}
/* the copy sits in .wrap, not .grid12, so it needs its own stacking lift
   above the scrim (z-index 1) and the field (0). */
.hero.fs .wrap{position:relative;z-index:2}
.hero.fs h1{font-size:clamp(40px,5.4vw,78px);letter-spacing:-.034em;line-height:1.04;
  max-width:22ch;margin:0 0 28px}
.hero.fs .lede{font-size:clamp(18px,1.5vw,22px);line-height:1.62;max-width:86ch;
  margin-bottom:38px}
.hero.fs .act .row{align-items:center;gap:16px 28px}
.btn-go{gap:12px}
.btn-go i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:rgba(4,7,13,.14)}
.btn-go svg{width:16px;height:16px;stroke:#04070d;fill:none;stroke-width:1.9;
  transition:transform .28s var(--e)}
.btn-go:hover svg{transform:translateX(3px)}
.alt.inline{margin-top:0;font-size:15.5px}
.fric.ic{display:flex;align-items:center;gap:10px;margin-top:24px;max-width:none}
.fric.ic span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;
  background:rgba(114,135,253,.14);border:1px solid rgba(114,135,253,.3)}
.fric.ic svg{width:15px;height:15px;stroke:var(--lav-hi);fill:none;stroke-width:1.6}
/* the tenancy render sits on dark ground: its background is keyed to true
   black, so screen removes it cleanly with no visible frame. */
/* real alpha channel now, so no blend mode and no ground dependency */
.iso img{display:block;width:100%;height:auto;
  -webkit-mask-image:none;mask-image:none}

@media(max-width:900px){.hero.fs{padding:68px 0 64px}}

/* ---- the paired columns share rows, so both sides line up ---- */
.duo{grid-template-rows:auto auto auto auto auto}
.duo-c{display:grid;grid-row:span 5;align-content:start}
@supports(grid-template-rows:subgrid){.duo-c{grid-template-rows:subgrid}}

/* ---- the control question: copy runs wide, evidence sits beside it ---- */
.ctrl{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:56px;
  align-items:start}
.ctrl-l h2{font-size:clamp(30px,3.3vw,46px);line-height:1.1;letter-spacing:-.032em;margin:0}
.ctrl-l .lead{margin-top:22px;max-width:none}
.ctrl-cta{margin-top:34px}
.ctrl .facts{grid-column:auto;grid-template-columns:minmax(0,1fr);margin-top:8px}
.ctrl .fact{padding:24px 26px}

/* lavender is the brand's primary action colour; the outline button was
   reading as secondary next to the body copy. */
.btn-lav{background:var(--lav);color:#fff;border-color:transparent;gap:11px;
  box-shadow:0 14px 30px -14px rgba(114,135,253,.7)}
.btn-lav:hover{background:var(--lav-hi);color:#0b1330;transform:translateY(-1px);
  box-shadow:0 18px 38px -14px rgba(114,135,253,.85)}
.btn-lav i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.18)}
.btn-lav svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
  transition:transform .28s var(--e)}
.btn-lav:hover svg{transform:translateX(3px)}

@media(max-width:1000px){.ctrl{grid-template-columns:minmax(0,1fr);gap:40px}}

/* ---- data handling: an even 2x2 of glass panels over the section glow ---- */
.dh.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.glasslit .dhc{background:var(--surf),var(--raise);border:1px solid var(--line);
  border-radius:var(--r-card);padding:30px 30px 32px;
  box-shadow:var(--edge),0 26px 56px -30px rgba(2,5,14,.9)}
.glasslit .dhc:hover{background:var(--surf),var(--raise-2);border-color:rgba(137,220,235,.44);
  transform:translateY(-4px);
  box-shadow:var(--edge),0 40px 74px -28px rgba(2,5,14,.95),
             0 0 46px -14px rgba(137,220,235,.42)}

/* ---- the evidence bar draws its accent across as it scrolls in ---- */
.facts.bar{position:relative}
.facts.bar::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--sky),var(--lav) 60%,rgba(114,135,253,0));
  transition:transform 1.1s cubic-bezier(.22,.61,.24,1) .12s}
.facts.bar.in::after{transform:scaleX(1)}

/* ---- compliance alignment: four obligations, four answers ---- */
.align-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.24fr);gap:48px;
  align-items:start;margin-bottom:40px}
.align-h h2{margin:0;font-size:clamp(30px,3.2vw,46px);line-height:1.1;letter-spacing:-.032em;
  max-width:14ch}
.align-h .lead + .lead{margin-top:18px}
.pils{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.pil{background:#fff;border:1px solid var(--lt-line);border-radius:var(--r-card);
  padding:28px 26px 30px;box-shadow:var(--lt-lift);
  transition:transform .34s var(--e),box-shadow .34s var(--e),border-color .34s var(--e)}
.pil:hover{transform:translateY(-4px);box-shadow:var(--lt-lift-hi);border-color:#c9d8ea}
.pil-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;
  margin-bottom:20px;background:rgba(74,86,214,.08);border:1px solid rgba(74,86,214,.16)}
.pil-ic svg{width:23px;height:23px;stroke:var(--lt-blue);fill:none;stroke-width:1.45}
.pil h3{font-size:18px;color:var(--lt-ink);letter-spacing:-.02em;margin:0 0 10px}
.pil p{color:var(--lt-body);font-size:15.5px;line-height:1.6;margin:0}

@media(max-width:900px){
  .dh.two{grid-template-columns:minmax(0,1fr)}
  .align-h{grid-template-columns:minmax(0,1fr);gap:26px}
}

/* ---- the three questions, listed; the argument on glass beside them ---- */
.askg{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:56px;
  align-items:start}
.askg-l h2{font-size:clamp(32px,3.7vw,52px);line-height:1.08;letter-spacing:-.034em;margin:0}
.askg-l .dot{color:var(--sky)}
.askg-rule{display:block;width:78px;height:3px;border-radius:3px;margin:26px 0 12px;
  background:linear-gradient(90deg,var(--sky),var(--lav))}
.askq{display:grid}
.aq{display:grid;grid-template-columns:62px minmax(0,1fr);gap:24px;align-items:center;
  padding:28px 0;border-top:1px solid var(--line-2)}
.aq:first-child{border-top:0}
.aq-ic{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(137,220,235,.3);background:rgba(137,220,235,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:border-color .3s var(--e),box-shadow .3s var(--e)}
.aq-ic svg{width:26px;height:26px;stroke:var(--sky);fill:none;stroke-width:1.45}
.aq:hover .aq-ic{border-color:rgba(137,220,235,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 26px -8px rgba(137,220,235,.6)}
.aq h3{font-size:clamp(20px,2vw,27px);color:#fff;letter-spacing:-.026em;line-height:1.26;
  margin:0;max-width:none}

.askp{position:relative;overflow:hidden;border-radius:26px;padding:44px 46px;
  background:var(--surf),var(--raise);border:1px solid var(--line);
  box-shadow:var(--edge),0 34px 70px -32px rgba(2,5,14,.92)}
.askp::after{content:"";position:absolute;right:-18%;bottom:-28%;width:62%;height:70%;
  pointer-events:none;border-radius:50%;filter:blur(46px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(114,135,253,.42),transparent 70%)}
.askp .lead{position:relative;z-index:2;color:#c8d3e8;max-width:52ch}
.askp-q{position:relative;z-index:2;margin:34px 0;padding:2px 0 2px 24px;
  border-left:3px solid var(--lav)}
.askp-q p{font-family:var(--display);font-weight:700;letter-spacing:-.026em;line-height:1.22;
  font-size:clamp(23px,2.4vw,34px);max-width:20ch;
  background:linear-gradient(100deg,#89dceb,#a9b3ff 62%,#b489fd);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#a9b3ff}

@media(max-width:1000px){
  .askg{grid-template-columns:minmax(0,1fr);gap:44px}
  .askp{padding:34px 28px}
}
@media(max-width:620px){
  .aq{grid-template-columns:44px minmax(0,1fr);gap:16px}
  .aq-ic{width:44px;height:44px}
  .aq-ic svg{width:20px;height:20px}
  .aq h3{font-size:17.5px}
}

/* ---- a real product screenshot, framed ---- */
.shot{margin:0;border-radius:var(--r-card);overflow:hidden;background:#fff;
  border:1px solid var(--lt-line);box-shadow:var(--lt-lift)}
.shot img{display:block;width:100%;height:auto}
/* the knowledge graph is drawn, not screenshotted: sharp at any size,
   editable, and it stays legible when the column narrows. */
.kgraph{display:block;width:100%;height:auto;padding:26px 20px 30px;background:#fff}
.kg-n{font-family:var(--sans);font-size:14px;font-weight:600;fill:var(--lt-ink)}
.kg-n.kg-c{font-size:15.5px;fill:var(--lt-blue)}
.kg-e{font-family:var(--mono);font-size:11px;letter-spacing:.04em;fill:var(--lt-mute)}
.shot figcaption{padding:18px 24px;font-size:14.5px;line-height:1.6;color:var(--lt-mute);
  border-top:1px solid var(--lt-line-2);background:var(--lt-alt)}

/* ---- the light lanes slide in as they scroll into view ---- */
.lt .stack .rv{transform:translateX(-38px);
  transition:opacity .7s var(--e),transform .7s var(--e)}
.lt .stack .rv.in{transform:none}

/* ---- highlighted phrases inside the two path cards ---- */
.jcard .hl{color:var(--sky);font-weight:600}
.jcard.light .hl{color:var(--lt-accent);font-weight:600}

/* ---- subprocessor table: real columns, ready for the real rows.
   Scrolls inside itself so a four-column table never pushes the page. ---- */
.subp{margin-top:34px;overflow-x:auto;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--surf),var(--raise);
  box-shadow:var(--edge),var(--lift)}
.subp .tbl{margin:0;min-width:640px}
.subp .tbl th{padding:20px 22px 14px}
.subp .tbl td{padding:18px 22px}
.subp .tbl tr:last-child td{border-bottom:0}
.tbl-empty td{text-align:center;padding:44px 30px 46px!important}
.tbl-empty .ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  margin:0 auto 18px;background:var(--chip);border:1px solid rgba(137,220,235,.22);
  box-shadow:var(--chip-edge)}
.tbl-empty .ico svg{width:24px;height:24px;stroke:var(--sky);fill:none;stroke-width:1.45}
.tbl-empty b{display:block;font-family:var(--display);font-size:17px;color:#fff;margin-bottom:9px}
.tbl-empty > td > span:last-of-type{display:block;color:var(--faint);font-size:14.5px;
  max-width:56ch;margin:0 auto 22px;line-height:1.6}

/* ---- the origin story: claim and its numbers left, the story panelled right ---- */
.og{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:64px;align-items:start}
.og-l h2{font-size:clamp(32px,3.7vw,52px);line-height:1.08;letter-spacing:-.034em;margin:0}
.og-rule{display:block;width:96px;height:3px;border-radius:3px;margin:26px 0 34px;
  background:linear-gradient(90deg,var(--sky),var(--lav))}
.og-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.og-s{border:1px solid var(--line);border-radius:var(--r-card);padding:26px 26px 28px;
  background:var(--surf),var(--raise);box-shadow:var(--edge),var(--lift);
  transition:transform .34s var(--e),border-color .34s var(--e),box-shadow .34s var(--e)}
.og-s:hover{transform:translateY(-4px);border-color:rgba(137,220,235,.34);
  box-shadow:var(--edge),var(--lift-hi)}
.og-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  margin-bottom:22px;border:1px solid rgba(137,220,235,.28);background:rgba(137,220,235,.06);
  box-shadow:var(--chip-edge)}
.og-ic svg{width:21px;height:21px;stroke:var(--sky);fill:none;stroke-width:1.45}
.og-s b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(32px,3.4vw,44px);line-height:1;padding-bottom:20px;
  border-bottom:1px solid var(--line-2);margin-bottom:18px;
  background:linear-gradient(100deg,#89dceb,#a9b3ff 70%,#b489fd);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#a9b3ff}
.og-c{display:block;color:var(--dim);font-size:15px;line-height:1.6}

.og-panel{position:relative;overflow:hidden;border-radius:26px;padding:44px 46px;
  border:1px solid var(--line);background:var(--surf),var(--raise);
  box-shadow:var(--edge),var(--lift)}
/* the light streak along the bottom edge */
.og-panel::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(137,220,235,.85),transparent);
  filter:blur(1px)}
.og-panel::before{content:"";position:absolute;left:22%;right:22%;bottom:-26px;height:52px;
  pointer-events:none;filter:blur(22px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(137,220,235,.4),transparent 70%)}
.og-panel .lead{color:#c8d3e8;max-width:58ch}
.og-q{margin:34px 0;padding:4px 0 4px 24px;border-left:3px solid transparent;
  border-image:linear-gradient(180deg,var(--sky),var(--lav)) 1}
.og-q p{font-family:var(--display);font-weight:700;letter-spacing:-.026em;line-height:1.2;
  font-size:clamp(24px,2.5vw,34px);color:#fff;max-width:18ch}

@media(max-width:1000px){
  .og{grid-template-columns:minmax(0,1fr);gap:44px}
  .og-panel{padding:34px 28px}
}

/* ---- the company on paper: claim left, the city right, particulars under ---- */
.op{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:64px;
  align-items:center;margin-bottom:26px}
.op-l h2{font-size:clamp(32px,3.7vw,52px);line-height:1.08;letter-spacing:-.034em;margin:0}
.op-rule{display:block;width:96px;height:3px;border-radius:3px;margin:24px 0 28px;
  background:linear-gradient(90deg,var(--sky),var(--lav))}
.op-l .lead{max-width:48ch}

.op-photo{position:relative;margin:0;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--edge),var(--lift)}
.op-photo img{display:block;width:100%;height:auto}
.op-photo figcaption{position:absolute;left:22px;bottom:22px;display:flex;align-items:center;
  gap:12px;padding:12px 20px 12px 16px;border-radius:16px;color:#fff;
  background:rgba(9,14,32,.76);border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--edge),0 12px 30px -12px rgba(0,0,0,.85)}
.op-photo figcaption svg{width:19px;height:19px;flex:none;stroke:var(--sky);fill:none;stroke-width:1.6}
.op-loc{display:grid;line-height:1.25}
.op-loc b{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.014em}
.op-loc i{font-style:normal;font-size:12.5px;color:var(--faint)}

.op-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:860px){.op-facts{grid-template-columns:minmax(0,1fr)}}
.op-f{position:relative;border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 26px 28px;background:var(--surf),var(--raise);
  box-shadow:var(--edge),var(--lift);
  transition:transform .34s var(--e),border-color .34s var(--e),box-shadow .34s var(--e)}
.op-f:hover{transform:translateY(-4px);border-color:rgba(137,220,235,.34);
  box-shadow:var(--edge),var(--lift-hi)}
.op-ic{display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;margin-bottom:24px;
  background:linear-gradient(150deg,var(--sky),var(--lav));
  box-shadow:0 8px 20px -8px rgba(114,135,253,.7)}
.op-ic svg{width:21px;height:21px;stroke:#0b1330;fill:none;stroke-width:1.7}
.op-f b{display:block;font-family:var(--display);font-size:20px;
  letter-spacing:-.022em;color:var(--sky);margin-bottom:9px}
.op-c{display:block;color:var(--dim);font-size:15px;line-height:1.55}

@media(max-width:1000px){
  .op{grid-template-columns:minmax(0,1fr);gap:36px}
}

@media(max-width:1080px){
  .job .viz.navy{height:210px}
  .job .viz.navy .win{right:-32px}
}

/* ============================================================
   THE WORKFLOW TRACK — badge, icon, copy and a small picture of
   the surface each step produces, tied together by one dashed
   rule so five claims read as a single run.
   ============================================================ */
.flow{display:grid}
.fw{display:grid;grid-template-columns:78px 92px minmax(0,1fr) minmax(0,1.04fr);
  gap:0 26px;align-items:center;padding:28px 0;border-top:1px solid var(--lt-line)}
.fw:first-child{border-top:0}
.fw-n{position:relative;display:grid;place-items:center;align-self:stretch}
.fw-n span{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:1px solid var(--lt-line);
  box-shadow:var(--lt-lift);font-family:var(--display);font-weight:700;
  font-size:18px;letter-spacing:-.01em;color:var(--lt-blue)}
.fw-n::after{content:"";position:absolute;left:50%;top:calc(50% + 36px);bottom:-30px;
  border-left:2px dashed rgba(74,86,214,.26);z-index:1}
.fw:last-child .fw-n::after{display:none}
.fw-i{width:92px;height:92px;border-radius:22px;background:#fff;
  border:1px solid var(--lt-line);box-shadow:var(--lt-lift);display:grid;place-items:center}
.fw-i svg{width:40px;height:40px;stroke:var(--lt-blue);fill:none;stroke-width:1.55;
  stroke-linecap:round;stroke-linejoin:round}
.fw-c h3{font-size:22px;color:var(--lt-ink);letter-spacing:-.024em;margin:0}
.fw-c p{color:var(--lt-body);font-size:16.5px;line-height:1.6;margin-top:10px;max-width:46ch}
.fw-v{border-radius:18px;background:var(--lt-alt);border:1px solid var(--lt-line-2);
  padding:20px;min-height:158px;display:grid;align-content:center}

/* --- the little pictures --- */
.fw-v svg{stroke:var(--lt-blue);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.fcard{background:#fff;border:1px solid var(--lt-line);border-radius:13px;padding:14px 15px;
  box-shadow:var(--lt-lift);display:grid;gap:11px}
.fcard-h{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--lt-ink);white-space:nowrap}
.fcard-h svg,.fchips svg,.fw-sum svg{width:16px;height:16px;flex:none}
.fchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fchips span{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12.5px;color:var(--lt-body);background:var(--lt-alt);
  border:1px solid var(--lt-line-2);border-radius:8px;padding:7px 9px;white-space:nowrap}
.fchain{display:flex;align-items:center;gap:10px;position:relative}
.fchain::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:1px;
  background:rgba(74,86,214,.24)}
.fdoc{position:relative;z-index:2;flex:1;min-width:0;background:#fff;
  border:1px solid var(--lt-line);border-radius:11px;box-shadow:var(--lt-lift);
  padding:11px 10px;display:grid;gap:6px;justify-items:start}
.fdoc svg{width:20px;height:20px}
.fdoc i{display:block;height:5px;width:82%;border-radius:3px;background:var(--lt-line)}
.fsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fgrid .fdoc{padding:8px}
.fbar{height:7px;border-radius:5px;background:var(--lt-line);overflow:hidden}
.fbar i{display:block;height:100%;width:62%;border-radius:5px;
  background:linear-gradient(90deg,#4a56d6,#2f6d8c)}
.frow{display:flex;align-items:center;gap:10px}
.fav{width:22px;height:22px;border-radius:50%;background:var(--lt-line);flex:none}
.frow i{display:block;height:6px;flex:1;border-radius:3px;background:var(--lt-line)}
.fbtns{display:flex;gap:8px;justify-content:flex-end}
.fbtns span{font-size:12px;font-weight:600;padding:7px 12px;border-radius:8px;
  border:1px solid var(--lt-line);color:var(--lt-body);white-space:nowrap}
.fbtns span.on{background:var(--lt-blue);border-color:var(--lt-blue);color:#fff}
.flog{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px;color:var(--lt-body);padding:7px 9px;border-radius:8px;
  background:var(--lt-alt);border:1px solid var(--lt-line-2);white-space:nowrap}
.flog b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--lt-mute)}

.fw-sum{margin-top:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff;border:1px solid var(--lt-line);border-radius:var(--r-card);
  box-shadow:var(--lt-lift);padding:22px 10px}
.fw-sum span{display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:15px;color:var(--lt-ink);text-align:left;padding:4px 18px;
  border-left:1px solid var(--lt-line-2)}
.fw-sum span:first-child{border-left:0}
.fw-sum svg{stroke:var(--lt-blue);fill:none;stroke-width:1.6}

@media(max-width:1080px){
  .fw{grid-template-columns:60px 72px minmax(0,1fr);gap:0 20px;row-gap:20px}
  .fw-n span{width:52px;height:52px;font-size:16px}
  .fw-n::after{top:calc(50% + 30px)}
  .fw-i{width:72px;height:72px;border-radius:18px}
  .fw-i svg{width:32px;height:32px}
  .fw-v{grid-column:1/-1;min-height:0}
  .fw-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0}
  .fw-sum span:nth-child(odd){border-left:0}
}
@media(max-width:620px){
  .fw{grid-template-columns:52px minmax(0,1fr)}
  .fw-i{display:none}
  .fw-sum{grid-template-columns:minmax(0,1fr)}
  .fw-sum span{border-left:0}
  .fsplit{grid-template-columns:minmax(0,1fr)}
}

/* ---- governed by default: ringed glyph, numbered question, rule ---- */
.gv{padding:34px 30px 32px;display:grid;align-content:start;gap:0}
.gv-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(137,220,235,.42);background:rgba(137,220,235,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 26px -10px rgba(137,220,235,.6);
  margin-bottom:26px}
.gv-ic svg{width:25px;height:25px;stroke:var(--sky);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.gv-h{display:flex;align-items:center;gap:12px}
.gv-n{font-family:var(--mono);font-size:12px;color:var(--sky);flex:none;
  padding:4px 7px;border-radius:6px;border:1px solid rgba(137,220,235,.28);
  background:rgba(137,220,235,.06)}
.gv h3{font-size:21px;color:#fff;margin:0;letter-spacing:-.022em}
.gv-rule{display:block;width:56px;height:2px;border-radius:2px;margin:18px 0 20px;
  background:linear-gradient(90deg,var(--sky),rgba(137,220,235,0))}
.gv p{color:var(--dim);font-size:16px;line-height:1.62;margin:0}
.gv .soon{display:inline-block;margin-bottom:14px}
.gv:hover .gv-ic{border-color:rgba(137,220,235,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 34px -8px rgba(137,220,235,.8)}
.gov-foot{display:flex;align-items:center;gap:18px;margin-top:22px;padding:20px 26px;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surf),var(--raise);box-shadow:var(--edge),var(--lift)}
.gf-ic{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid rgba(137,220,235,.34);background:rgba(137,220,235,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.gf-ic svg{width:21px;height:21px;stroke:var(--sky);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.gov-foot p{color:var(--dim);font-size:16px}
.gov-foot a{color:var(--sky);font-weight:500;border-bottom:1px solid rgba(137,220,235,.35)}
.gov-foot a:hover{color:#fff;border-bottom-color:#fff}
@media(max-width:620px){.gov-foot{flex-direction:column;align-items:flex-start;gap:14px}}

/* ---- FAQ as an accordion; the plus closes to a minus ---- */
.ask h3{margin:0;font-size:inherit}
.ask h3 button{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;
  width:100%;padding:0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.024em;
  line-height:1.26;color:#fff;transition:color .24s var(--e)}
.asks.lt .ask h3 button{color:var(--lt-ink)}
.ask h3 button:hover{color:var(--sky)}
.asks.lt .ask h3 button:hover{color:var(--lt-blue)}
.ask-x{position:relative;flex:none;width:28px;height:28px;margin-top:3px;border-radius:50%;
  border:1px solid rgba(137,220,235,.32);background:rgba(137,220,235,.07);
  transition:transform .34s var(--e),border-color .24s var(--e)}
.asks.lt .ask-x{border-color:rgba(74,86,214,.28);background:rgba(74,86,214,.06)}
.ask-x::before,.ask-x::after{content:"";position:absolute;top:50%;left:50%;border-radius:2px;
  background:var(--sky);transform:translate(-50%,-50%)}
.asks.lt .ask-x::before,.asks.lt .ask-x::after{background:var(--lt-blue)}
.ask-x::before{width:11px;height:1.8px}
.ask-x::after{width:1.8px;height:11px;transition:transform .3s var(--e)}
.ask.is-on .ask-x{transform:rotate(180deg);border-color:rgba(137,220,235,.62)}
.ask.is-on .ask-x::after{transform:translate(-50%,-50%) scaleY(0)}
.ask-a{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .36s var(--e),opacity .28s var(--e)}
.ask-a>*{overflow:hidden}
.ask.is-on .ask-a{grid-template-rows:1fr;opacity:1}
.ask-a p{padding-top:14px}
@media(max-width:620px){.ask h3 button{font-size:19px;gap:14px}}


/* the plinth carries the homepage silk field */
.plinth .field{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}

/* ============================================================
   SURFACE PASS — one language across every module, so a card on
   Pricing, a step on Trust and a route on Contact all sit at the
   same altitude and catch light the same way.
   ============================================================ */
.card,.mo,.dhc,.st,.rt-item,.fx,.jcard,.convict{
  border-radius:var(--r-card);
  background:var(--surf),var(--raise);
  box-shadow:var(--edge),var(--lift);
  transition:transform .34s var(--e),border-color .34s var(--e),
             box-shadow .34s var(--e),background .34s var(--e)}
.card:hover,.mo:hover,.dhc:hover,.st:hover,.rt-item:hover,.jcard:hover{
  transform:translateY(-4px);border-color:rgba(137,220,235,.34);
  background:var(--surf),var(--raise-2);
  box-shadow:var(--edge),var(--lift-hi)}
.mo:hover{border-color:rgba(245,181,68,.42);
  box-shadow:var(--edge),0 34px 68px -26px rgba(2,5,14,.96),0 0 40px -14px rgba(245,181,68,.34)}

/* icon chips: a lit gradient tile rather than a flat swatch */
.card .ico,.rt-item .ico,.slot .ico,.st .num,.wk .mk b{
  background:var(--chip);border:1px solid rgba(137,220,235,.22);
  box-shadow:var(--chip-edge);
  transition:border-color .3s var(--e),box-shadow .3s var(--e)}
.card:hover .ico,.rt-item:hover .ico{border-color:rgba(137,220,235,.44);
  box-shadow:var(--chip-edge),0 0 26px -8px rgba(137,220,235,.55)}
.st .num{display:grid;place-items:center;width:46px;height:46px;border-radius:13px}
.st:hover .num{border-color:rgba(137,220,235,.44);
  box-shadow:var(--chip-edge),0 0 26px -8px rgba(137,220,235,.55)}
/* the step connector fades out rather than stopping dead */
.wk .mk::after{background:linear-gradient(180deg,rgba(137,220,235,.36),rgba(137,220,235,0))}

/* governance slab reads as one object, not three loose panels */
.gov{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--edge),var(--lift)}
.gv{transition:background .3s var(--e)}
.gv:hover{background:rgba(18,33,70,.9)}

/* empty states: still obviously a slot, but a considered one */
.slot{border-radius:var(--r-card);box-shadow:var(--edge);
  background:radial-gradient(122% 104% at 50% 0%,rgba(114,135,253,.075),transparent 62%),
             rgba(255,255,255,.014)}

/* headline numbers carry the brand gradient */
.fx b{background:linear-gradient(100deg,#89dceb,#a9b3ff);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:#a9b3ff}

/* light bands get the navy-tinted elevation, not the dark one */
.tier,.asks.lt .ask{border-radius:var(--r-card);box-shadow:var(--lt-lift);
  transition:transform .34s var(--e),border-color .34s var(--e),box-shadow .34s var(--e)}
.tier:hover,.asks.lt .ask:hover{box-shadow:var(--lt-lift-hi)}

/* the tick list gets a chip too, so it matches the cards around it */
.rl-item svg{box-sizing:content-box;padding:5px;border-radius:9px;background:var(--chip);
  border:1px solid rgba(137,220,235,.20);box-shadow:var(--chip-edge);margin-top:0}

/* pull quote sits on the same surface as everything else */
.convict{border:1px solid var(--line)}

@media(max-width:1080px){
  .grid12{grid-template-columns:minmax(0,1fr);gap:32px}
  .grid12>*{grid-column:1/-1!important}
  .job.big,.job.sm,.jcard{grid-column:1/-1!important}
  .facts{grid-template-columns:repeat(2,1fr)}
  .fb{grid-template-columns:repeat(2,minmax(0,1fr))}
  section{padding:74px 0}
  .hero{padding:64px 0}
  .hero.short{padding:64px 0 60px}
  .thesis{padding:92px 0}
  :root{--r-sec:28px}
  .nav nav{display:none}
  .nav .login{display:none}
  .navtoggle{display:inline-flex}
  .nav.open nav{display:grid;position:absolute;left:0;right:0;top:78px;background:rgba(7,12,28,.98);
    border-bottom:1px solid var(--line);padding:18px 22px 24px;gap:4px;font-size:16.5px;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .nav.open nav a{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .nav.open nav .navcta{display:block;color:var(--sky);font-weight:600;border-bottom:0}
  .nav.open nav::after{content:"";display:block}
  .wells{grid-template-columns:repeat(3,1fr)}
  .trust .a{justify-content:flex-start}
  .app-body{grid-template-columns:minmax(0,1fr);min-height:0}
  .app-side{display:none}
  .agent{position:static;width:auto;margin:0 12px 12px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .app-bar .rt span:first-child{display:none}
  .st{grid-template-columns:1fr;gap:16px}
  .wk{grid-template-columns:52px minmax(0,1fr);gap:18px}
  .wk .mk b{width:40px;height:40px;font-size:13px}
  .wk .mk::after{top:40px}
  .cap{text-align:left}
}
@media(max-width:640px){
  .facts{grid-template-columns:minmax(0,1fr)}
  .fb{grid-template-columns:minmax(0,1fr)}
  .wells{grid-template-columns:repeat(2,1fr)}
  .act .btn,.form .btn{width:100%}
  .act .row{width:100%}
  /* the header CTA lives in the collapsed menu at this width; leaving the
     button in the bar overflows it next to the logo and the toggle */
  .nav > .btn{display:none}
  .nav{gap:16px}
  .ck-in{padding:20px 0;gap:18px}
  .ck-bt{width:100%}
  .ck-bt .btn{flex:1 1 auto;width:auto}
  .rt-item{grid-template-columns:1fr;gap:14px}
  .tbl{font-size:14px}
  .tbl td,.tbl th{padding:12px 10px}
}
@media(prefers-reduced-motion:reduce){
  .facts.bar::after{transition:none;transform:scaleX(1)}
  .glasslit .dhc:hover,.pil:hover{transform:none}
  .glasslit .lit{animation:none}
  .gov-foot:hover,.hbar:hover,.convict:hover,.fw-sum:hover{transform:none}
  .sl-warp{animation:none}
  .ask-x{transition:none}
  .card:hover,.mo:hover,.dhc:hover,.st:hover,.rt-item:hover,.jcard:hover,
  .tier:hover,.asks.lt .ask:hover{transform:none}
  .dvid{display:none}
  *{transition:none!important;scroll-behavior:auto;animation:none!important}
  .rv{opacity:1;transform:none}
  .feed.anim .row{opacity:1;transform:none}
  .leak .lk,.converge .cn{opacity:1}
  .leak path.lk{animation:none;stroke-dasharray:5 5}
  .leak circle.lk{animation:none}
  .converge .cv,.converge .ln{stroke-dasharray:none}
}

/* ---- the partner card runs light against the direct card, so the two
   paths read as a pair of choices rather than one long dark block ---- */
.jcard.light{background:linear-gradient(162deg,#ffffff,#eaf1f8);
  border-color:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 #fff,0 26px 56px -28px rgba(2,5,14,.9)}
.jcard.light:hover{background:linear-gradient(162deg,#ffffff,#f3f7fb);
  border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 34px 68px -26px rgba(2,5,14,.95)}
.jcard.light h3{color:var(--lt-ink)}
.jcard.light p{color:var(--lt-body)}
.jcard.light .chip{color:var(--lt-body);border-color:var(--lt-line);
  background:rgba(29,48,100,.05)}
.jcard.light .go{color:var(--lt-accent)}
.jcard.light:hover .go{color:var(--lt-ink)}
.jcard.light .jmark [stroke]{stroke:var(--lt-accent)}
.jcard.light .jmark [fill="#89dceb"]{fill:var(--lt-accent)}
.jcard.light .jmark [stroke="#4a5775"]{stroke:#b9c9da}

/* ============================================================
   RESOURCES LIBRARY AND POSTS
   The listing reuses .card so a post sits in the same visual
   family as the rest of the site; .pthumb adds the only thing
   a card did not already have, which is an image.
   ============================================================ */
.lib{background:var(--body);padding:88px 0 96px}
.pgrid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;align-items:stretch}
.pcard{padding:0;overflow:hidden;gap:0}
.pcard .pthumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--raise-2);
  border-bottom:1px solid var(--line)}
.pcard .pthumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--e)}
.pcard:hover .pthumb img{transform:scale(1.04)}
.pcard .pkind{color:var(--sky);margin:26px 30px 10px}
.pcard h3{font-size:19.5px;line-height:1.3;margin:0 30px 10px}
.pcard p{margin:0 30px}
.pcard .go-m{margin:auto 30px 28px;padding-top:20px}

/* eyebrow above a post title, in the hero and on the cards */
.pkind{color:var(--sky);display:block}
.hero.short .pkind{margin-bottom:16px}

/* ---- the post itself ---- */
.post .phero{width:min(100%,78ch);margin:0 auto 44px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:var(--raise)}
.post .phero img{width:100%;height:auto;display:block}
.post .doc .pfig{margin:32px 0;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.post .doc .pfig img{width:100%;height:auto;display:block}

/* a pulled quote: the source's voice, set apart from the author's */
.post .doc blockquote.pq{margin:30px 0;padding:4px 0 4px 26px;
  border-left:2px solid rgba(137,220,235,.5)}
.post .doc blockquote.pq p{color:var(--text);font-size:19px;line-height:1.6;
  font-family:var(--display);margin:0}

/* a framework or formula stated on its own line */
.post .doc .peq{text-align:center;font-family:var(--display);font-size:19px;
  color:var(--text);margin:28px 0;padding:20px 24px;border-radius:12px;
  background:var(--raise);border:1px solid var(--line)}
.post .doc .peq strong{color:var(--sky-hi)}

.post .doc .prel{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);
  font-size:15.5px;color:var(--faint)}

.post .doc .pauth{display:flex;gap:20px;align-items:flex-start;margin-top:48px;
  padding-top:32px;border-top:1px solid var(--line)}
.post .doc .pauth img{width:66px;height:66px;border-radius:50%;object-fit:cover;flex:none}
.post .doc .pauth h3{margin:0 0 8px;font-size:17px;color:var(--text)}
.post .doc .pauth p{font-size:15.5px;margin:0}

.post .pback{width:min(100%,78ch);margin:52px auto 0;padding-top:26px;
  border-top:1px solid var(--line)}
.post .pback a{color:var(--sky);font-family:var(--mono);font-size:12px;
  letter-spacing:.13em;text-transform:uppercase}
.post .pback a:hover{color:#fff}

@media (max-width:640px){
  .pcard .pkind{margin:22px 22px 10px}
  .pcard h3,.pcard p{margin-inline:22px}
  .pcard .go-m{margin:auto 22px 24px}
  .post .doc .pauth{flex-direction:column;gap:14px}
}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but will fill one that is technically rendered. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   PHONES: CONTAIN THE PRODUCT PANELS
   The window panels are deliberately overhung past their card's
   right edge and cropped by it, which reads as a screenshot
   continuing beyond the frame on a wide card. The overhang is a
   fixed pixel value, so on a phone it eats a far larger share of
   a much narrower card and genuinely clips content: the values
   on job 01 (142 mapped, 38 gates) were being cut in half.
   Below 640px the panels sit fully inside their card instead.
   Desktop and tablet keep the cropped treatment untouched.
   ============================================================ */
@media (max-width:640px){
  /* homepage, "01 Understand the business" */
  .job .viz.navy{height:auto;padding:14px}
  .job .viz.navy .win{position:relative;top:auto;left:auto;right:auto;bottom:auto}

  /* the banded sections across the site */
  .bv .plate,.band.flip .bv .plate{left:14px;right:14px}
  .plate .win,.band.flip .plate .win{left:14px;right:14px}

  /* platform: the rows card */
  .rowcard .rc-v .plate{left:14px;right:14px}

  /* the window chrome stops forcing a width once the panel is contained */
  .win-h{white-space:normal;height:auto;padding:11px 14px;line-height:1.35}
  .win-b{padding:14px}
  .wrow{font-size:12.5px}
}

/* ============================================================
   PHONES: SUBPROCESSOR TABLE AND KNOWLEDGE GRAPH
   The table carries min-width:640px so real columns never squash,
   which is right when there are rows. While it shows its empty
   state that width traps a plain message behind a sideways
   scroll, so on a phone the "confirmed on request" panel was
   half off-screen. When the empty row is present the table drops
   its min-width and the now-meaningless column headers go with
   it; add real rows and the scrolling behaviour returns on its own.

   The graph scaled rather than clipped, but at phone width its
   labels rendered around 7px. Enlarging the type in user units
   means it lands legible once the SVG is scaled down.
   ============================================================ */
@media (max-width:640px){
  .subp:has(.tbl-empty){overflow-x:visible;border-radius:14px}
  .subp:has(.tbl-empty) .tbl{min-width:0}
  .subp:has(.tbl-empty) thead{display:none}
  .tbl-empty td{padding:34px 20px 36px!important}
  .tbl-empty .ico{margin-inline:auto}

  .kgraph{padding:18px 10px 22px}
  .kg-n{font-size:24px}
  .kg-n.kg-c{font-size:26px}
  .kg-e{font-size:19px;letter-spacing:0}
}

/* ============================================================
   PHONES: THE TILE PLATE
   .band.flip pushes its tiles in by 106px so they clear the
   plate's left-hand crop on desktop. Once the plate is contained
   on a phone that padding just starves the grid: four aspect-1
   tiles across roughly 300px left no room for labels like
   "Approved providers". Two columns, symmetric padding, and a
   height driven by content rather than a forced square.
   ============================================================ */
@media (max-width:640px){
  .plate .tiles,.band.flip .plate .tiles{
    padding:16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tile{aspect-ratio:auto;min-height:54px;font-size:12px;padding:8px 6px}
}

/* ============================================================
   PHONES: THE TENANCY DIAGRAM
   It was held at a fixed 320px height and then scaled to 68%,
   which fought its own 1/1 aspect ratio and left the diagram
   small and adrift in white space. Letting it size to the column
   and keep its square ratio puts it back in proportion; the
   percentage-positioned labels track it automatically.
   ============================================================ */
@media (max-width:640px){
  .iso{height:auto;transform:none;max-width:440px;width:100%}
}

/* the tangle inside the boundary: static by design. The escaping routes
   carry the motion, so the mess behind them stays still and readable. */
.leak path.tg{fill:none}
.leak path.xm{fill:none}

/* ============================================================
   INVESTOR DOCUMENTS — THE SLIDE VIEWER
   The decks were first embedded as PDFs, which put the browser's
   own viewer chrome inside the page and left iOS Safari with a
   blank frame. build-decks.py renders each deck to slide images
   instead and they are moved through sideways: one slide, arrows
   either side, dots and a counter underneath. The PDF and the
   PowerPoint stay as downloads, and a link out to the current
   slide at full size covers the phone case, where a whole slide
   is too small to read.
   ============================================================ */
.deck-stage{display:flex;align-items:center;gap:14px}
.deck-win{position:relative;flex:1;min-width:0;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:var(--body);
  box-shadow:0 20px 48px rgba(4,9,24,.36)}
.deck-track{display:flex;height:100%;width:100%;
  transition:transform .46s var(--e);will-change:transform}
.deck-track img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;display:block;
  user-select:none;-webkit-user-drag:none}

.deck-nav{flex:0 0 auto;width:46px;height:46px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--raise);color:var(--text);
  display:grid;place-items:center;
  transition:border-color .2s var(--e),background .2s var(--e),opacity .2s var(--e)}
.deck-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.deck-nav:hover{border-color:rgba(137,220,235,.4);background:var(--raise-2)}
.deck-nav[disabled]{opacity:.28;cursor:default}
.deck-nav[disabled]:hover{border-color:var(--line);background:var(--raise)}

/* the padding clears the arrow column, so the dots line up under the slide
   rather than under the arrow */
.deck-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  margin-top:20px;padding:0 60px}
.deck-dots{display:flex;flex-wrap:wrap;gap:7px;margin-right:auto}
.deck-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.2);
  transition:background .2s var(--e),transform .2s var(--e)}
.deck-dots button:hover{background:rgba(255,255,255,.42)}
.deck-dots button[aria-current="true"]{background:var(--sky);transform:scale(1.3)}
.deck-i{font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;color:var(--faint)}
.deck-i b{color:var(--text);font-weight:500}

/* the two download routes, under a rule and inset to the slide's own left
   edge so they line up with the dots rather than with the heading */
.docbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
  margin-top:28px;padding:26px 60px 0;border-top:1px solid var(--line-2)}
.docbar .row{display:flex;flex-wrap:wrap;gap:10px}

@media (max-width:720px){
  .deck-stage{gap:8px}
  .deck-nav{width:38px;height:38px}
  .deck-nav svg{width:17px;height:17px}
  .deck-bar{padding:0;margin-top:16px}
  .docbar{margin-top:22px;padding:22px 0 0}
}