/* APEX ONE - apexone.app. Built to brand guidelines v6.0, not to taste.

   TYPE (locked): Raleway for headers, Semi-bold standard and BOLD for headers. Nothing heavier -
   the previous build reached for 800/900, which is off-guideline. Cabin Regular for body. Mono is
   a utility face and carries machine-generated values only.

   COLOUR (locked): APEX Red is the SINGLE striking accent, never modified, never gradiented. The
   ground is COOL WHITE, because the guideline reads "high contrast, typographically led ... red as
   the single striking accent on CLEAN BACKGROUNDS" - an all-dark page was off-brand. Charcoal and
   Dusty Blue are deliberate accent BANDS, not the world. Metal Blue stays subordinate to red.

   MOTIFS (locked, used sparingly as the guideline insists): hairline LINES that compose the frame
   and guide the eye; the four-DOT system carrying the palette in miniature; the cornerpiece SHAPE
   taken from the logo's angles.

   LAYOUT (R1332): the page is a two-column editorial grid, not a single left rail. Every section
   opens with a SECTION HEAD (.shead) that puts the heading left and its standfirst right, so the
   full measure is used and the eye has somewhere to go. Bands are sized to their content - the
   previous build padded every band identically and left 200px of empty ground under the short ones.
   ZERO SCRIPTS: the deployed _headers CSP is default-src 'none' with no script-src, so nothing here
   may depend on JS. Every interaction below is CSS or a native anchor. */

*{box-sizing:border-box;}
:root{
  /* THE PALETTE IS THE GUIDELINE'S, AND NOTHING ELSE (v6.0 section 05). Six colours exist:
     APEX Red, Charcoal Black, Dusty Blue, Pure Black, Cool White, Pure White, Metal Blue.
     THERE IS NO GREY IN THIS BRAND. Every "grey" below is Charcoal or Cool White at an opacity -
     which the guideline permits on Lights and Darks - never an invented hue. The build this
     replaced had #3A3644, #6E6879, #E4E0EA, #CFC9D8 and #F4F1F8 (all off-palette, all lilac-cast),
     plus #FF6470 (a LIGHTENED red - forbidden outright: "Accent colours cannot be modified"),
     #8FB6C4 and #7FCF9E. All eight are gone. */
  --red:#DD2734; --red-dark:#C41F2B;
  --charcoal:#0A090C; --dusty:#061826; --black:#000000; --metal:#0F4761;
  --cool:#FBF9FF; --pure:#FFFFFF;

  /* TEXT ON LIGHT - Charcoal at opacity. Measured, not guessed: .88 gives 15.5:1, .78 gives
     11.9:1. The old --mute carried nearly all body copy at 5.36:1, which is what "grey small
     words, hard to see" meant. */
  --ink:#0A090C;
  --ink-1:rgba(10,9,12,.88);
  --ink-2:rgba(10,9,12,.78);

  /* TEXT ON DARK - Cool White at opacity. Nothing readable sits below .72. */
  --on-dark:rgba(251,249,255,.96);
  --on-dark-2:rgba(251,249,255,.91);
  --on-dark-3:rgba(251,249,255,.85);

  /* HAIRLINES + WASHES - motif 4.1 says thin lines guide the eye. Charcoal / Cool White at low
     opacity: a line, not type, so contrast rules do not apply to it. */
  --rule:rgba(10,9,12,.13); --rule-2:rgba(10,9,12,.28); --wash:rgba(10,9,12,.045);
  --hair-dark:rgba(251,249,255,.16);

  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Raleway',Segoe UI,sans-serif; --bodyf:'Cabin',-apple-system,Segoe UI,sans-serif;
  --max:1180px;
}
html{scroll-behavior:smooth;}
/* The header is sticky, so an anchor jump must clear it or the heading lands underneath. */
:target{scroll-margin-top:78px;}
body{background:var(--cool);color:var(--ink);font-family:var(--bodyf);font-size:19px;line-height:1.62;margin:0;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--disp);text-wrap:balance;margin:0;letter-spacing:-.02em;}
p{margin:0;} a{color:inherit;}
img{max-width:100%;}
::selection{background:var(--red);color:var(--pure);}

.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--red);color:var(--pure);
  font-family:var(--disp);font-weight:600;font-size:15px;padding:12px 20px;text-decoration:none;}
.skip:focus{left:8px;top:8px;}

/* MOTIF - the four-dot system */
.dots{display:flex;gap:7px;align-items:center;}
.dots i{width:7px;height:7px;border-radius:50%;display:block;}
.dots i:nth-child(1){background:var(--metal);}
.dots i:nth-child(2){background:var(--dusty);}
.dots i:nth-child(3){background:var(--charcoal);}
.dots i:nth-child(4){background:var(--red);}

/* MOTIF - cornerpiece, from the logo angles */
.corner{position:absolute;top:0;right:0;width:56px;height:56px;pointer-events:none;z-index:2;}
.corner::before,.corner::after{content:"";position:absolute;background:var(--red);}
.corner::before{top:0;right:0;width:56px;height:2px;}
.corner::after{top:0;right:0;width:2px;height:56px;}

/* ============================ HEADER ============================
   The nav used to vanish entirely below 880px, which left a phone visitor with a logo, an
   oversized red button and no way to reach any section. It is now a scrollable strip at every
   width - a horizontally scrollable ancestor IS reachable, which is why the overflow gate is
   read with that exception in mind. */
.top{position:sticky;top:0;z-index:30;background:rgba(251,249,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);}
.top-in{max-width:var(--max);margin:0 auto;padding:10px clamp(16px,4vw,40px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;flex:0 0 auto;}
.brand img{display:block;height:auto;width:clamp(104px,14vw,140px);}

.top nav{order:3;flex:1 1 100%;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  border-top:1px solid var(--rule);margin:0 clamp(-16px,-4vw,-40px);padding:0 clamp(16px,4vw,40px);
  /* The strip scrolls where it cannot fit. Fade the right edge so that reads as scrollable
     rather than as a control clipped off the screen - the R1296 distinction, made visible. */
  mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);}
.top nav::-webkit-scrollbar{display:none;}
.top nav a{font-family:var(--disp);font-size:14px;font-weight:600;text-transform:uppercase;
  letter-spacing:normal;color:var(--ink);text-decoration:none;display:inline-flex;
  align-items:center;justify-content:center;min-height:44px;padding:0 11px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.top nav a:hover,.top nav a:focus-visible{color:var(--red);border-bottom-color:var(--red);}
@media(min-width:900px){
  .top-in{flex-wrap:nowrap;gap:16px;padding-top:8px;padding-bottom:8px;}
  .top nav{order:0;flex:0 1 auto;margin:0 0 0 auto;border-top:0;padding:0;overflow:visible;
    mask-image:none;-webkit-mask-image:none;}
}
/* STAFF LOGIN -> the Amarok hub. Deliberately NOT the red CTA: the page has one primary action
   (start a conversation) and this is a utility door for people who already work here. */
.top nav a.login{color:var(--ink);font-weight:600;font-family:var(--disp);}
.top nav a.login::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--red);margin-right:8px;}
.top nav a.login:hover,.top nav a.login:focus-visible{color:var(--red);}
.mobile-menu{display:none;}
@media(min-width:900px){
  .top nav a.login{border:1px solid var(--rule-2);padding:0 16px;margin-left:10px;font-size:14px;
    border-bottom:1px solid var(--rule-2);transition:border-color .16s,background .16s,color .16s;}
  .top nav a.login:hover,.top nav a.login:focus-visible{border-color:var(--ink);background:var(--pure);color:var(--ink);}
}
@media(max-width:899px){
  .top nav a.login{margin-left:auto;padding-left:16px;}
}
.cta-sm{margin-left:auto;font-family:var(--disp);font-weight:600;font-size:14px;
  text-transform:uppercase;color:var(--pure);
  background:var(--red);padding:0 clamp(14px,3vw,20px);min-height:44px;display:inline-flex;
  align-items:center;text-decoration:none;white-space:nowrap;transition:background .16s;}
@media(min-width:900px){ .cta-sm{margin-left:6px;} }
.cta-sm:hover{background:var(--red-dark);}
.cta-sm:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* ============================ BANDS + SECTION HEADS ============================ */
.band{padding:clamp(56px,6.4vw,94px) clamp(20px,4vw,40px);position:relative;}
.in{max-width:var(--max);margin:0 auto;} .narrow{max-width:760px;}
.eyebrow{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin-bottom:16px;}
.hero .eyebrow,.principle .eyebrow,footer .eyebrow{color:var(--cool);
  display:inline-flex;align-items:center;gap:10px;}
.hero .eyebrow::before,.principle .eyebrow::before{content:"";width:22px;height:2px;
  background:var(--red);display:inline-block;flex:0 0 auto;}
.lead{font-size:clamp(19px,1.7vw,21px);line-height:1.6;color:var(--ink-1);max-width:60ch;}

/* THE EDITORIAL GRID. Heading left, standfirst right - the fix for a page that was one long
   left-hand column with the right half of every screen empty. */
.shead{display:grid;grid-template-columns:1fr;gap:20px;align-items:end;}
@media(min-width:900px){
  .shead{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);}
  .shead .lead{padding-bottom:6px;}
}
h2.sec{font-weight:700;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.028em;line-height:1.08;max-width:18ch;}
h2.sec em{font-style:normal;color:var(--red);}

/* ============================ HERO ============================
   align-items:stretch + a flexing ledger. Under the old `start` the ledger stopped short and left
   a slab of empty charcoal at the foot of the opener - the single biggest piece of dead space on
   the page. */
.hero{background:var(--charcoal);color:var(--cool);overflow:hidden;position:relative;padding-bottom:0;}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(251,249,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(251,249,255,.05) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(76% 64% at 12% 8%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(76% 64% at 12% 8%,#000,transparent 74%);}
.hero .in{position:relative;z-index:1;}
.hgrid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4.2vw,54px);align-items:stretch;
  padding-bottom:clamp(48px,5.4vw,76px);}
@media(min-width:1000px){ .hgrid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);} }
.hcopy{display:flex;flex-direction:column;align-items:flex-start;}

/* The worked example outgrew the hero's right-hand column: at nine beats the panel stood 1192px
   against 458px of copy, and centring the copy to split the gap pushed the H1 below the fold.
   So it runs full width beneath the copy instead, and the beats sit two-up. No gap left to manage. */
.exwrap{margin-top:clamp(34px,4.2vw,54px);padding-bottom:clamp(48px,5.4vw,76px);}
h1{font-weight:700;font-size:clamp(36px,5.4vw,64px);line-height:1.04;letter-spacing:-.034em;max-width:14ch;color:var(--cool);}
.claim{font-size:clamp(18.5px,1.7vw,20.5px);line-height:1.5;color:var(--cool);font-weight:600;margin-top:24px;padding-left:16px;border-left:3px solid var(--red);max-width:44ch;}
.hero .lead{color:var(--on-dark);margin-top:22px;}
.hero .lead a{color:var(--cool);text-decoration-color:var(--on-dark-3);text-underline-offset:3px;}
.hero .lead a:hover{text-decoration-color:var(--red);}
.agency-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:18px;
  padding:0 18px;border:1px solid rgba(251,249,255,.52);color:var(--cool);font-family:var(--disp);
  font-size:14px;font-weight:600;text-transform:uppercase;text-decoration:none;transition:border-color .16s,background .16s;}
.agency-link:hover,.agency-link:focus-visible{border-color:var(--cool);background:rgba(251,249,255,.08);}
.agency-link:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.hero .dots{margin-top:30px;}
.hero .dots i:nth-child(3){background:var(--on-dark-2);}
.ledger{background:rgba(251,249,255,.045);border:1px solid var(--hair-dark);display:flex;flex-direction:column;}
.lhead{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--hair-dark);position:relative;overflow:hidden;flex:0 0 auto;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;}
@media(prefers-reduced-motion:no-preference){
  .dot{animation:pulse 2.4s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.8);}}
}
.lhead span{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-2);}
/* OUTCOMES - what the system changed on client work, counted from the action ledgers. These sit
   ABOVE the entries because a reader wants the result before the evidence for it. */
.outcomes{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair-dark);
  border-bottom:1px solid var(--hair-dark);flex:0 0 auto;}
@media(min-width:520px){ .outcomes{grid-template-columns:repeat(3,1fr);} }
.outcomes>div{background:rgba(251,249,255,.03);padding:16px 18px;display:flex;flex-direction:column;gap:6px;}
.outcomes b{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.4vw,38px);line-height:1;
  letter-spacing:-.03em;color:var(--cool);font-variant-numeric:tabular-nums;}
.outcomes span{font-size:14.5px;line-height:1.42;color:var(--on-dark-2);}
.lrows{flex:1 1 auto;display:flex;flex-direction:column;}
.row{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:13px 18px;border-top:1px solid rgba(251,249,255,.1);
  transition:background .16s;}
.row:first-child{border-top:none;}
.row:hover{background:rgba(251,249,255,.035);}
@media(min-width:420px){ .row{grid-template-columns:74px 1fr;gap:14px;} }
.ts{font-family:var(--mono);font-size:12px;color:var(--on-dark-3);white-space:nowrap;padding-top:3px;font-variant-numeric:tabular-nums;line-height:1.45;}
.ev{font-size:16.2px;line-height:1.5;color:var(--on-dark);}
.ev b{color:var(--cool);font-weight:600;}

/* THE VERDICT TAG. What the system DID, in one word, before the sentence explaining it - so the
   column can be skimmed for behaviour rather than read line by line. Two colours only: RED for a
   catch or a correction, METAL for restraint (it held, it declined, it asked). Red stays the
   single striking accent; a third tag colour would spend it. */
.ev .tag{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:1px 7px;margin-right:9px;
  vertical-align:1px;white-space:nowrap;}
/* SOLID CHIPS, UNMODIFIED ACCENTS. The previous build tinted the tag with #FF6470 - a LIGHTENED
   APEX Red, which guideline 2.4 forbids outright ("Accent colours cannot be modified", and a
   washed red "reads dirty and pinkish"). Cool White on the true red is both on-guideline and far
   more legible than tinted type on a tinted ground. Metal Blue carries restraint and stays
   subordinate to red, exactly as section 05 requires. */
.ev .tag.tr{color:var(--pure);background:var(--red);}
.ev .tag.tb{color:var(--cool);background:var(--metal);}

.lfoot{padding:13px 18px;border-top:1px solid var(--hair-dark);font-family:var(--mono);font-size:12px;
  color:var(--on-dark-3);line-height:1.6;flex:0 0 auto;display:grid;gap:6px;}
.lfoot b{color:var(--on-dark);font-weight:600;}

/* THE PRODUCT INDEX - names what is below at the foot of the opener, and gives the hero a
   payoff line instead of trailing off into empty ground. */
.index{position:relative;z-index:1;max-width:var(--max);margin:0 auto;border-top:1px solid var(--hair-dark);
  display:flex;overflow-x:auto;scrollbar-width:none;}
.index::-webkit-scrollbar{display:none;}
.index a{flex:1 0 auto;display:inline-flex;align-items:baseline;gap:9px;min-height:56px;
  padding:16px clamp(14px,2vw,22px);text-decoration:none;font-family:var(--disp);font-weight:600;
  font-size:16.5px;color:var(--on-dark-2);border-left:1px solid var(--hair-dark);
  white-space:nowrap;transition:background .16s,color .16s;}
.index a:first-child{border-left:0;padding-left:0;}
.index a:hover,.index a:focus-visible{color:var(--cool);background:rgba(251,249,255,.05);}
.index b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--red);}
@media(min-width:1000px){ .index a{flex:0 0 auto;} }

/* THE BRAND SPINE. Kept when the pillars went (R1340): it is positioning, not a service list.
   The line above this one used to be the orphaned tail of the deleted .tagline rule - a
   line-oriented delete on a MULTI-LINE rule leaves its continuation behind, and CSS fails
   SILENTLY: the parser discards tokens until it recovers, which swallowed .spine entirely. It
   rendered at 17px/400 with no rule above it and nothing errored. Delete rules whole. */
.spine{margin-top:clamp(34px,4vw,48px);padding-top:26px;border-top:2px solid var(--red);
  font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.2vw,26px);line-height:1.3;
  letter-spacing:-.02em;color:var(--ink);}
.spine b{font-weight:700;color:var(--red);}

/* ============================ STATEMENT BAND ============================ */
.statement{background:var(--pure);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}

/* THREE-UP AND FOUR-UP - one bordered vocabulary. The governance/why-it-matters columns used to
   float as loose text while the failure points sat in a bordered grid; two treatments for the
   same job read as an accident. */
.gov{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(34px,4vw,52px);}
.gov>div{background:var(--pure);padding:26px 22px;transition:background .18s;position:relative;}
.gov>div:hover{background:var(--wash);}
.statement .gov>div{background:var(--pure);}
.statement .gov>div:hover{background:var(--wash);}
.gov h3{font-family:var(--disp);font-weight:600;font-size:17.5px;margin:10px 0 8px;}
.gov p{color:var(--ink-2);font-size:16.8px;line-height:1.55;}
.gov h3{margin-top:0;}
.gov h3::before{content:"";display:block;width:24px;height:2px;background:var(--red);margin-bottom:14px;}

/* WHAT IT DOES NOT DO - a bounded block, not four lines trailing off the left edge. */
.limitwrap{margin-top:clamp(30px,3.4vw,44px);border-top:2px solid var(--red);padding-top:26px;}
.limithead{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px;}
.limits{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:12px 40px;}
@media(min-width:820px){ .limits{grid-template-columns:1fr 1fr;} }
.limits li{position:relative;padding-left:26px;color:var(--ink-1);font-size:17.6px;line-height:1.55;max-width:52ch;}
.limits li::before{content:"";position:absolute;left:0;top:.68em;width:12px;height:1px;background:var(--red);}

/* ============================ PRINCIPLE - Dusty Blue, the one other dark moment ============================ */
.principle{background:var(--dusty);color:var(--cool);text-align:center;overflow:hidden;}
.principle .in{display:flex;flex-direction:column;align-items:center;}
/* NOT red here. Measured 3.78:1 on Dusty Blue - a fail. Red is the brand's most STRIKING colour,
   not its most legible; on a dark band it carries the rule beside the label, never the label. */
.principle .dots{margin-bottom:22px;}
.principle .dots i:nth-child(3){background:var(--on-dark-2);}
.principle h2{color:var(--cool);font-weight:700;font-size:clamp(27px,3.8vw,48px);line-height:1.12;letter-spacing:-.03em;max-width:20ch;}
.principle h2 em{font-style:normal;color:var(--red);}
.principle .lead{color:var(--on-dark);margin-top:22px;max-width:56ch;}
.enforced{margin-top:24px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  color:var(--on-dark-2);border-top:1px solid var(--hair-dark);padding-top:20px;}

/* ============================ PRODUCT FAMILY ============================ */
.prod2{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(34px,4vw,52px);}
@media(min-width:760px){ .prod2{grid-template-columns:1fr 1fr;} }
.prod3{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-top:0;}
@media(min-width:760px){ .prod3{grid-template-columns:1fr 1fr 1fr;} }
.prod{background:var(--pure);padding:30px 26px;display:flex;flex-direction:column;position:relative;transition:background .18s;}
.prod::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;}
.prod:hover{background:var(--wash);}
.prod:hover::before,.prod:focus-within::before{transform:scaleX(1);}
.prod .pn{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--red);text-transform:uppercase;}
.prod h3{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.3vw,24px);margin:13px 0 0;letter-spacing:-.015em;}
.prod .plede{color:var(--ink);font-size:17.6px;font-weight:600;line-height:1.45;margin-top:11px;padding-bottom:14px;border-bottom:1px solid var(--rule);}
.prod p{color:var(--ink-1);font-size:16.9px;line-height:1.56;margin-top:14px;}
.prod .pwho{margin-top:auto;padding-top:22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-bottom:0;}
.prod2 .prod{padding:34px 30px;}
.prod2 .prod:hover{background:var(--wash);}
.prod2 .prod h3{font-size:clamp(23px,2.8vw,29px);}

/* ============================ CLOSE - the call and the jurisdiction note, one band ============================
   These were two separate full-height bands, each holding a short paragraph, each padded as though
   it held a section. Together they fill one. */
.close{background:var(--pure);border-top:1px solid var(--rule);}
.closegrid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4.6vw,64px);align-items:start;}
@media(min-width:900px){ .closegrid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);} }
.close h2.sec{font-size:clamp(30px,4.2vw,52px);max-width:15ch;}
.close .lead{margin-top:22px;}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.cta{display:inline-flex;align-items:center;min-height:54px;padding:0 34px;background:var(--red);color:var(--pure);font-family:var(--disp);font-weight:700;font-size:16px;text-decoration:none;transition:background .16s,transform .16s;}
.cta:hover{background:var(--red-dark);transform:translateY(-1px);}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.cta-alt{display:inline-flex;align-items:center;min-height:54px;padding:0 30px;background:transparent;color:var(--ink);border:1px solid var(--rule-2);font-family:var(--disp);font-weight:600;font-size:15.5px;text-decoration:none;transition:border-color .16s,background .16s;}
.cta-alt:hover{background:var(--wash);border-color:var(--ink);}
.cta-alt:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.jurisdiction{background:var(--wash);border-left:2px solid var(--red);padding:28px 26px;}
.jurisdiction h3{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.2vw,24px);line-height:1.16;letter-spacing:-.02em;margin-bottom:14px;}
.jurisdiction p{color:var(--ink-1);font-size:17.4px;line-height:1.58;}

/* ============================ FOOTER ============================ */
footer{background:var(--charcoal);color:var(--on-dark-2);padding:44px clamp(20px,4vw,40px) 52px;}
.fgrid{display:grid;grid-template-columns:1fr;gap:34px;max-width:var(--max);margin:0 auto;}
@media(min-width:760px){ .fgrid{grid-template-columns:1fr 1fr;gap:36px 40px;} }
@media(min-width:1000px){ .fgrid{grid-template-columns:1.5fr 1fr 1.15fr .9fr;gap:40px;} }
.fbrand img{display:block;width:clamp(140px,20vw,178px);height:auto;}
.fbrand p{margin-top:16px;max-width:34ch;}
.fcol h3{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cool);margin:0 0 6px;}
.fcol a,.fcol span{font-size:16px;line-height:1.6;min-height:40px;display:flex;align-items:center;text-decoration:none;}
.fcol a{transition:color .15s;}
.fcol a:hover{color:var(--cool);}
/* The footer is the reliable staff door: on a phone the header's login chip sits at the end of a
   scrollable strip - reachable, but not findable, which is no use to someone arriving to work. */
.fcol a.flogin{font-family:var(--disp);font-weight:600;color:var(--cool);}
.fcol a.flogin::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--red);margin-right:9px;flex:0 0 auto;}
.fcol a.flogin:hover{color:var(--red);}
.fnote{font-size:15px;line-height:1.55;color:var(--on-dark-3);min-height:0 !important;
  display:block !important;max-width:26ch;}
.fsoc{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.fsoc a{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;border:1px solid rgba(251,249,255,.34);padding:0 14px;min-height:40px;display:inline-flex;align-items:center;text-decoration:none;transition:border-color .16s,color .16s;}
.fsoc a:hover{border-color:var(--red);color:var(--cool);}
.fbase{max-width:var(--max);margin:38px auto 0;padding-top:22px;border-top:1px solid var(--hair-dark);display:grid;gap:10px;}
@media(min-width:760px){ .fbase{grid-template-columns:1fr auto;align-items:center;} }
.fbase p{font-size:15px;line-height:1.6;}
footer p{font-size:16px;line-height:1.66;}
footer b{color:var(--cool);font-weight:600;}
footer a{color:var(--on-dark);}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* Two-up beats. MUST live after the base .lrows{display:flex} rule - a media query does not beat a
   later declaration of the same property, so placing this earlier left display:flex winning while
   grid-template-columns applied to nothing. */
@media(min-width:900px){
  .lrows{display:grid;grid-template-columns:1fr 1fr;}
  .lrows .row{border-top:1px solid rgba(251,249,255,.1);}
  .lrows .row:nth-child(-n+2){border-top:none;}
  .lrows .row:nth-child(odd){border-right:1px solid rgba(251,249,255,.1);}
}

/* The layer under the worked example: what the process actually is, not what it produced. */
/* 12.5px, not 11.5: the 12px legibility floor is the one type rule with a number, and the
   mobile pass caught this heading under it at both 390 and 768. */
.dhead{font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cool);margin-bottom:15px;display:flex;align-items:center;gap:9px;}
.dhead::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;}
.dgrid{display:grid;grid-template-columns:1fr;gap:17px 28px;}
.dgrid b{display:block;font-size:15.6px;font-weight:600;color:var(--cool);margin-bottom:4px;}
.dgrid span{display:block;font-size:15.4px;line-height:1.5;color:var(--on-dark-2);}
@media(min-width:700px){ .dgrid{grid-template-columns:1fr 1fr;} }
@media(min-width:1050px){ .dgrid{grid-template-columns:repeat(3,1fr);} }

/* Six governance cards. auto-fit minmax(210px) lays five across at desktop and orphans the sixth,
   so pin the count. After the base .gov rule - a media query does not beat a later declaration. */
@media(min-width:900px){ .gov{grid-template-columns:repeat(3,1fr);} }

/* R1445: "Underneath it" left the hero panel for its own band at the foot of the page. It was
   styled for a dark panel (light type on charcoal), so the band carries that ground with it rather
   than the type being re-coloured - moving a block should not mean rewriting how it reads. */
.deepband{background:var(--charcoal);}
.deepband .eyebrow{color:var(--cool);}
.deepband h2.sec{color:var(--cool);}
.deepband .lead{color:var(--on-dark-2);}
.deepband .dgrid{margin-top:clamp(30px,3.6vw,46px);}

/* R1612: phones get a complete navigation and a single-column decision record. The previous
   mobile treatment hid the later navigation items beyond a horizontal strip, while the record
   kept a desktop-style number rail and nowrap labels. That combination clipped meaningful copy
   even though the hero's overflow:hidden concealed the page-level overflow signal. */
@media(max-width:519px){
  .top-in{gap:8px;padding-left:14px;padding-right:14px;}
  .brand img{width:108px;}
  .cta-sm{font-size:12.5px;padding:0 13px;}
  .top-in>nav{display:none;}
  .mobile-menu{display:block;order:3;flex:1 1 100%;margin:0 -14px -10px;border-top:1px solid var(--rule);}
  .mobile-menu summary{min-height:44px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;
    color:var(--ink);font-family:var(--disp);font-size:12px;font-weight:600;text-transform:uppercase;cursor:pointer;list-style:none;}
  .mobile-menu summary::-webkit-details-marker{display:none;}
  .mobile-menu summary::after{content:"+";font-family:var(--mono);font-size:18px;font-weight:500;color:var(--red);}
  .mobile-menu[open] summary::after{content:"-";}
  .top .mobile-menu nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
    margin:0;padding:0 8px;border-top:1px solid var(--rule);overflow:visible;mask-image:none;-webkit-mask-image:none;}
  .top .mobile-menu nav a{min-width:0;min-height:48px;padding:5px 4px;font-size:12px;line-height:1.2;
    text-align:center;white-space:normal;}
  .top .mobile-menu nav a.login{margin-left:0;padding-left:4px;}
  .top .mobile-menu nav a.login::before{display:none;}
  :target{scroll-margin-top:112px;}

  .band{padding-left:18px;padding-right:18px;}
  .row{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px;}
  .ts{padding-top:0;}
  .ev{min-width:0;overflow-wrap:anywhere;}
  .ev .tag{display:table;margin:0 0 7px;max-width:100%;white-space:normal;line-height:1.35;}

  .index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;}
  .index a{min-width:0;padding:13px 10px;font-size:14px;white-space:normal;}
  .index a:first-child{padding-left:10px;}
}

/* Enterprise AI control plane direction, approved 16 Oct 2026. */
:root{--max:1200px;}
body{font-size:18px;background:var(--charcoal);}
.top{background:var(--cool);border-bottom:4px solid var(--red);backdrop-filter:none;}
.top-in{max-width:1200px;min-height:72px;padding-top:0;padding-bottom:0;}
.brand img{width:152px;}
.top nav a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;min-height:72px;}
.cta-sm{font-family:var(--mono);font-size:11px;letter-spacing:.08em;min-height:44px;}
.band{padding:clamp(64px,7vw,108px) clamp(22px,4vw,44px);}
.hero{background:var(--dusty);padding-top:0;}
.hero::before{opacity:.9;background-size:32px 32px;mask-image:linear-gradient(90deg,#000,transparent 84%);-webkit-mask-image:linear-gradient(90deg,#000,transparent 84%);}
.hero>.in:first-of-type{max-width:1200px;padding-top:clamp(72px,8vw,124px);padding-bottom:56px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:clamp(52px,7vw,104px);align-items:start;}
.hero .hcopy{min-width:0;}
h1{font-size:clamp(52px,5.8vw,86px);line-height:.94;max-width:12ch;letter-spacing:-.05em;}
.claim{max-width:58ch;font-size:18.5px;background:rgba(251,249,255,.06);border:1px solid var(--hair-dark);border-left:4px solid var(--red);padding:22px 24px;margin-top:34px;}
.hero .lead{max-width:62ch;color:var(--on-dark-2);}
.agency-link{border-radius:0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;}

.system-panel{border:1px solid rgba(251,249,255,.28);background:rgba(6,24,38,.72);box-shadow:14px 14px 0 rgba(10,9,12,.34);margin-top:8px;position:relative;}
.system-panel::before{content:"";position:absolute;inset:-1px auto auto -1px;width:72px;height:3px;background:var(--red);}
.system-panel::after{content:"";position:absolute;right:-1px;bottom:-1px;width:42px;height:42px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);}
.system-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:0 20px;border-bottom:1px solid var(--hair-dark);}
.system-title{font:600 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cool);}
.system-live{display:inline-flex;align-items:center;gap:8px;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cool);white-space:nowrap;}
.system-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(221,39,52,.14);}
.system-map{padding:10px 20px 18px;}
.system-node{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:68px;border-bottom:1px solid var(--hair-dark);position:relative;}
.system-node:last-child{border-bottom:0;}
.system-node::before{content:"";position:absolute;left:26px;top:-11px;bottom:43px;width:1px;background:rgba(251,249,255,.18);}
.system-node:first-child::before{top:34px;}
.system-node:last-child::before{bottom:34px;}
.system-code{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(251,249,255,.32);background:var(--dusty);font:500 10px/1 var(--mono);color:var(--cool);position:relative;z-index:1;}
.system-label b{display:block;font:600 12px/1.35 var(--disp);letter-spacing:.035em;text-transform:uppercase;color:var(--cool);}
.system-label span{display:block;margin-top:4px;font:400 11px/1.45 var(--mono);color:var(--on-dark-3);}
.system-state{font:600 9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--cool);border:1px solid rgba(251,249,255,.28);padding:6px 7px;}
.system-state.guard{color:var(--cool);border-color:var(--red);background:rgba(221,39,52,.12);}
.system-foot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair-dark);}
.system-foot span{padding:13px 18px;font:500 9.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);}
.system-foot span+span{border-left:1px solid var(--hair-dark);}
.system-foot b{display:block;color:var(--cool);font-weight:600;margin-top:3px;}

.proof-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-top:0;padding-bottom:0;border:1px solid var(--hair-dark);background:rgba(10,9,12,.3);}
.proof-rail span{min-height:80px;padding:17px 18px;display:flex;flex-direction:column;justify-content:center;gap:5px;border-left:1px solid var(--hair-dark);font:500 11px/1.45 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark-3);}
.proof-rail span:first-child{border-left:0;}
.proof-rail b{color:var(--cool);font-weight:600;}

.exwrap{max-width:1200px;margin-top:0;padding-bottom:74px;padding-top:56px;}
.ledger{background:var(--cool);color:var(--ink);border:1px solid rgba(251,249,255,.22);box-shadow:0 0 0 8px rgba(15,71,97,.12);}
.lhead{background:var(--charcoal);color:var(--cool);min-height:56px;padding-inline:22px;border:0;font-family:var(--mono);letter-spacing:.12em;}
.lhead::after{content:"DECISION ORCHESTRATION";margin-left:auto;font:500 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--on-dark-3);}
.lrows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
.phase{grid-column:1/-1;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;gap:12px;padding:14px 22px;background:var(--metal);border-top:1px solid var(--rule-2);color:var(--cool);}
.phase:first-child{border-top:0;}
.phase span{font:600 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--cool);}
.phase b{font:700 18px/1 var(--disp);text-transform:uppercase;letter-spacing:.04em;}
.phase em{font:400 12px/1.5 var(--mono);font-style:normal;color:rgba(251,249,255,.82);}
.row{grid-template-columns:52px 1fr;padding:24px 22px;border-color:var(--rule);min-height:178px;background:var(--pure);position:relative;overflow:hidden;}
.loop-card{min-height:150px;}
.loop-title{display:block;font-family:var(--disp);font-size:clamp(22px,2.4vw,30px);line-height:1.1;color:var(--ink);margin-bottom:12px;}
.loop-card .ev span{display:block;}
.row:nth-child(odd){border-right:0;}
.phase+.row,.phase+.row+.row{border-top:0;}
.phase+.row{border-right:1px solid var(--rule-2);}
.row::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--metal);transform:scaleY(0);transform-origin:top;transition:transform .18s ease;}
.row:hover::after{transform:scaleY(1);}
.ts{font-size:11px;color:var(--metal);border:1px solid rgba(15,71,97,.72);background:rgba(15,71,97,.08);width:32px;height:32px;display:grid;place-items:center;padding:0;}
.ev{font-size:15.5px;line-height:1.58;color:var(--ink-1);}
.ev .tag{color:var(--pure);font-family:var(--mono);font-size:11px;}
.ev b{color:var(--ink);}
.index{background:var(--charcoal);border-color:var(--hair-dark);max-width:none;padding-inline:max(22px,calc((100% - 1200px)/2));}
.index a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;min-height:62px;}

#products,#governance{background:var(--cool);}
#products{background-image:linear-gradient(rgba(10,9,12,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(10,9,12,.035) 1px,transparent 1px);background-size:40px 40px;}
.shead{align-items:start;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:80px;}
.shead>div{border-left:4px solid var(--red);padding-left:24px;}
h2.sec{font-size:clamp(36px,4.2vw,56px);}
.prod2,.prod3{background:transparent;border:0;gap:16px;}
.prod2{grid-template-columns:1.15fr .85fr;}
.prod3{margin-top:16px;border:0;}
.prod{border:1px solid var(--rule-2);padding:32px;background:var(--pure);overflow:hidden;}
.prod::before{height:4px;transform:scaleX(1);background:var(--metal);}
.prod2 .prod:first-child::before,.prod2 .prod:nth-child(2)::before{background:var(--red);}
.prod::after{position:absolute;right:22px;top:18px;font:600 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);}
.prod2 .prod:first-child::after{content:"CONTROL PLANE / LIVE";color:var(--red);}
.prod2 .prod:nth-child(2)::after{content:"CLIENT SURFACE / LIVE";color:var(--red);}
.prod3 .prod::after{content:"MODULE / IN DEVELOPMENT";}
.prod .pn{padding-right:150px;font-size:11px;}
.prod h3{font-size:25px;}
.prod .pwho{font-size:11px;}

.statement{background:var(--metal);color:var(--cool);position:relative;overflow:hidden;}
.statement .eyebrow,.statement h2{color:var(--cool);}
.statement .gov{background:var(--hair-dark);border-color:var(--hair-dark);}
.statement .gov>div{background:var(--dusty);}
.statement .gov h3,.statement .gov p{color:var(--cool);}
.statement .spine{color:var(--cool);border-color:var(--hair-dark);}
.statement::after{content:"APEX OPERATING LOGIC / DATA / ROADMAP";position:absolute;right:28px;bottom:26px;font:500 9px/1 var(--mono);letter-spacing:.14em;color:rgba(251,249,255,.45);}

.principle{background:var(--red);}
.principle .corner::before,.principle .corner::after{background:var(--cool);}
.principle .eyebrow::before{background:var(--cool);}
.principle h2{font-size:clamp(42px,5.4vw,72px);max-width:18ch;}
.principle h2 em{color:var(--charcoal);}
.principle .enforced{background:var(--charcoal);border:0;color:var(--cool);padding:16px 20px;}

#governance{background-image:linear-gradient(rgba(10,9,12,.035) 1px,transparent 1px);background-size:100% 48px;}
#governance .gov{grid-template-columns:repeat(3,1fr);background:transparent;border:0;gap:1px;counter-reset:control;}
#governance .gov>div{border:1px solid var(--rule);min-height:248px;padding:48px 28px 28px;counter-increment:control;}
#governance .gov>div::after{content:"CTRL / 0" counter(control);position:absolute;top:18px;right:20px;font:600 9.5px/1 var(--mono);letter-spacing:.12em;color:var(--metal);}
#governance .gov h3::before{background:var(--metal);}
.limitwrap{position:relative;background:var(--charcoal);color:var(--cool);border:0;padding:30px;box-shadow:10px 10px 0 var(--red);margin-right:10px;}
.limithead,.limits li{color:var(--cool);}
.limitwrap::after{content:"HARD LIMITS / CODE ENFORCED";position:absolute;top:30px;right:30px;font:600 9px/1 var(--mono);letter-spacing:.12em;color:var(--on-dark-3);}

.close{background:var(--pure);}
.closegrid{grid-template-columns:1.05fr .95fr;gap:70px;}
.jurisdiction{border:4px solid var(--charcoal);background:var(--cool);padding:34px;}
.deepband{background:var(--dusty);background-image:linear-gradient(rgba(251,249,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(251,249,255,.035) 1px,transparent 1px);background-size:42px 42px;}
.deepband .shead>div{border-color:var(--red);}
.dgrid{grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--hair-dark);}
.dgrid>div{display:grid;grid-template-columns:38px 1fr;column-gap:16px;padding:24px 20px;border-bottom:1px solid var(--hair-dark);position:relative;background:rgba(6,24,38,.52);}
.dgrid>div::before{content:"+";font:500 26px/1 var(--mono);color:var(--red);grid-row:1/3;}
.dgrid>div::after{content:"";position:absolute;left:18px;bottom:-1px;width:36px;height:2px;background:var(--metal);}
.dgrid>div:nth-child(2n)::after{background:var(--red);}
.dgrid b,.dgrid span{grid-column:2;}
footer{border-top:4px solid var(--red);}

@media(max-width:1099px){
  .hero>.in:first-of-type{grid-template-columns:1fr;gap:46px;}
  .system-panel{max-width:760px;margin-top:0;}
  .hero h1{font-size:clamp(52px,8vw,82px);}
  .proof-rail{grid-template-columns:repeat(3,minmax(0,1fr));}
  .proof-rail span:nth-child(4){border-left:0;border-top:1px solid var(--hair-dark);}
  .proof-rail span:nth-child(5){border-top:1px solid var(--hair-dark);}
}
@media(max-width:899px){
  .top-in{min-height:auto;padding-block:10px;}
  .top nav a{min-height:44px;}
  .lrows{grid-template-columns:1fr;}
  .phase{grid-column:1;}
  .phase+.row{border-right:0;}
  .shead,.prod2,.closegrid{grid-template-columns:1fr;gap:24px;}
  #governance .gov,.dgrid{grid-template-columns:1fr;}
  .prod3{gap:12px;}
}
@media(max-width:519px){
  .hero>.in:first-of-type{display:grid;padding-top:62px;padding-bottom:48px;gap:38px;}
  .hero h1{font-size:clamp(42px,13vw,58px);}
  .system-panel{box-shadow:7px 7px 0 rgba(10,9,12,.34);}
  .system-top{padding:0 14px;min-height:58px;}
  .system-map{padding:8px 14px 14px;}
  .system-node{grid-template-columns:44px minmax(0,1fr);gap:10px;min-height:70px;}
  .system-node::before{left:21px;}
  .system-code{width:30px;height:30px;}
  .system-state{grid-column:2;justify-self:start;margin-top:-10px;margin-bottom:9px;}
  .system-foot{grid-template-columns:1fr;}
  .system-foot span+span{border-left:0;border-top:1px solid var(--hair-dark);}
  .proof-rail{grid-template-columns:1fr 1fr;}
  .proof-rail span{min-height:72px;padding:14px 12px;}
  .proof-rail span:nth-child(odd){border-left:0;}
  .proof-rail span:nth-child(n+3){border-top:1px solid var(--hair-dark);}
  .proof-rail span:last-child{grid-column:1/-1;}
  .lhead::after{display:none;}
  .phase{grid-template-columns:auto 1fr;gap:6px 10px;}
  .phase em{grid-column:1/-1;}
  .row{grid-template-columns:minmax(0,1fr);min-height:0;}
  .prod::after{position:static;display:block;order:-1;margin:0 0 13px;}
  .prod .pn{padding-right:0;}
  .statement::after{display:none;}
  .limitwrap::after{position:static;display:block;margin-bottom:20px;}
}

/* R2250: Claude Opus motion layer. CSS only, with static reduced-motion fallbacks. */
.hero>.in:first-of-type{container-type:inline-size;}
.hero>.in:first-of-type::before,.hero>.in:first-of-type::after{content:"";position:absolute;left:0;bottom:0;pointer-events:none;z-index:2;}
.hero>.in:first-of-type::before{right:0;height:1px;background:var(--hair-dark);}
.hero>.in:first-of-type::after{width:56px;height:2px;background:var(--red);}

.system-node::before{left:17px;}
.system-node::after{content:"";position:absolute;left:16px;top:-6px;width:2px;height:12px;background:var(--red);transform:translateY(0) scaleY(0);transform-origin:center;z-index:2;pointer-events:none;}
.system-code{transition:border-color 180ms ease-out,background-color 180ms ease-out;}
.system-state.guard{position:relative;overflow:hidden;}
.system-state.guard::after{content:"";position:absolute;left:6px;right:6px;bottom:3px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;}

.proof-rail{box-shadow:8px 8px 0 rgba(10,9,12,.34);}
.proof-rail span{position:relative;box-shadow:inset 0 1px 0 rgba(251,249,255,.06);transition:background-color 200ms cubic-bezier(.2,.7,.2,1);}
.proof-rail span::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--metal);transform:scaleX(0);transform-origin:left;transition:transform 200ms cubic-bezier(.2,.7,.2,1);}

.loop-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;pointer-events:none;}
.loop-card .ts{transition:border-color 200ms ease-out,background-color 200ms ease-out;}

.prod{transition:background-color 220ms cubic-bezier(.2,.7,.2,1),border-color 220ms cubic-bezier(.2,.7,.2,1),box-shadow 220ms cubic-bezier(.2,.7,.2,1),transform 220ms cubic-bezier(.2,.7,.2,1);}
.prod::before{transform:scaleX(1) scaleY(1);transform-origin:top center;transition:transform 220ms cubic-bezier(.2,.7,.2,1);}

.gov h3::before{width:48px;transform:scaleX(.5);transform-origin:left;transition:transform 200ms ease-out;}
#governance .gov>div::after{transition:color 200ms ease-out;}

#products::before,#owned::before,#governance::before,#data::before,#underneath::before{content:"";position:absolute;top:0;left:max(22px,calc((100% - 1200px)/2));width:56px;height:4px;background:var(--red);transform:scaleX(.32);transform-origin:left;z-index:2;pointer-events:none;}

.top nav a{transition:color 180ms ease-out,border-color 180ms ease-out,background-color 180ms ease-out,transform 180ms ease-out;}
.cta,.cta-sm{transition:background-color 200ms cubic-bezier(.2,.7,.2,1),box-shadow 200ms cubic-bezier(.2,.7,.2,1),transform 200ms cubic-bezier(.2,.7,.2,1);}
.cta-alt,.agency-link{transition:border-color 200ms ease-out,background-color 200ms ease-out,box-shadow 200ms ease-out;}
.index a{position:relative;transition:background-color 200ms ease-out,color 200ms ease-out,transform 200ms ease-out;}
.index a::after{content:"";position:absolute;left:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 200ms cubic-bezier(.2,.7,.2,1);}

.fcol a,.fsoc a{transition:color 180ms ease-out,border-color 180ms ease-out;}
.fcol a:focus-visible,.fsoc a:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.fbase{position:relative;container-type:inline-size;}
.fbase::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:1px;background:var(--on-dark-3);pointer-events:none;}

@media(hover:hover){
  .system-node:hover .system-code{border-color:var(--cool);background:var(--metal);}
  .proof-rail span:hover{background:rgba(251,249,255,.04);}
  .proof-rail span:hover::before{transform:scaleX(1);}
  .prod:hover,.prod:focus-within{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--rule-2);border-color:var(--ink-2);}
  .prod:hover::before,.prod:focus-within::before{transform:scaleX(1) scaleY(1.5);}
  .gov>div:hover h3::before{transform:scaleX(1);}
  #governance .gov>div:hover::after{color:var(--ink);}
  .cta:hover,.cta:focus-visible{box-shadow:4px 4px 0 var(--charcoal);}
  .cta-sm:hover,.cta-sm:focus-visible{box-shadow:3px 3px 0 var(--charcoal);transform:translate(-1px,-1px);}
  .cta-alt:hover,.cta-alt:focus-visible{box-shadow:inset 4px 0 0 var(--red);}
  .agency-link:hover,.agency-link:focus-visible{box-shadow:inset 3px 0 0 var(--cool);}
  .index a:hover::after,.index a:focus-visible::after{transform:scaleX(1);}
}

.top nav a:active,.index a:active{transform:translateY(1px);}
.cta:active,.cta-sm:active{box-shadow:none;transform:none;}
.index a:focus-visible{outline:2px solid var(--red);outline-offset:-4px;}

@media(prefers-reduced-motion:no-preference){
  @keyframes apex-trace{from{transform:translateX(0);}to{transform:translateX(calc(100cqw - 56px));}}
  @keyframes apex-flow{0%{transform:translateY(0) scaleY(1);}18%{transform:translateY(46px) scaleY(1);}18.01%,100%{transform:translateY(46px) scaleY(0);}}
  @keyframes apex-guard{0%,5%{transform:scaleX(0);}10%,28%{transform:scaleX(1);}34%,100%{transform:scaleX(0);}}
  @keyframes apex-pulse{0%,100%{transform:scale(1);}50%{transform:scale(.7);}}
  @keyframes apex-stage{0%{transform:scaleX(0);}8%,24%{transform:scaleX(1);}25%,100%{transform:scaleX(0);}}
  @keyframes apex-stage-code{0%,24%{border-color:var(--red);background:rgba(221,39,52,.08);}25%,100%{border-color:rgba(15,71,97,.72);background:rgba(15,71,97,.08);}}
  @keyframes apex-seam{from{transform:scaleX(.32);}to{transform:scaleX(1);}}
  @keyframes apex-menu{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
  @keyframes apex-footer-trace{from{transform:translateX(0);}to{transform:translateX(calc(100cqw - 40px));}}

  .hero>.in:first-of-type::after{animation:apex-trace 10s cubic-bezier(.45,0,.55,1) infinite alternate;}
  .system-node::after{animation:apex-flow 10s linear infinite;}
  .system-node:nth-child(2)::after{animation-delay:2s;}
  .system-node:nth-child(3)::after{animation-delay:4s;}
  .system-node:nth-child(4)::after{animation-delay:6s;}
  .system-node:nth-child(5)::after{animation-delay:8s;}
  .system-node:nth-child(3) .system-state.guard::after{animation:apex-guard 10s linear infinite 4s;}
  .system-node:nth-child(4) .system-state.guard::after{animation:apex-guard 10s linear infinite 6s;}
  .dot,.system-live::before,.fcol a.flogin::before{animation:apex-pulse 8s ease-in-out infinite;}
  .loop-card::before{animation:apex-stage 12s cubic-bezier(.4,0,.2,1) infinite;}
  .loop-card .ts{animation:apex-stage-code 12s cubic-bezier(.4,0,.2,1) infinite;}
  .loop-card:nth-child(2)::before,.loop-card:nth-child(2) .ts{animation-delay:3s;}
  .loop-card:nth-child(3)::before,.loop-card:nth-child(3) .ts{animation-delay:6s;}
  .loop-card:nth-child(4)::before,.loop-card:nth-child(4) .ts{animation-delay:9s;}
  .lrows:hover .loop-card::before,.lrows:hover .loop-card .ts{animation-play-state:paused;}
  #products:target::before,#owned:target::before,#governance:target::before,#data:target::before,#underneath:target::before{animation:apex-seam 280ms cubic-bezier(.2,.7,.2,1) both;}
  .mobile-menu[open] nav{animation:apex-menu 180ms ease-out both;}
  .fbase::before{animation:apex-footer-trace 12s cubic-bezier(.45,0,.55,1) infinite alternate;}
}

@supports not (container-type:inline-size){
  .hero>.in:first-of-type::after,.fbase::before{animation:none !important;}
}

@media(max-width:519px){
  .hero>.in:first-of-type::after{width:32px;}
  .system-node::before{left:15px;}
  .system-node::after{display:none;}
  .proof-rail{box-shadow:5px 5px 0 rgba(10,9,12,.34);}
  #products::before,#owned::before,#governance::before,#data::before,#underneath::before{left:18px;}
  .loop-card::before,.loop-card .ts,.hero>.in:first-of-type::after,.fbase::before{animation:none !important;}
}

@media(prefers-reduced-motion:reduce){
  .hero>.in:first-of-type::after,.system-node::after,.loop-card::before,.fbase::before{animation:none !important;}
  .system-state.guard::after{transform:scaleX(1);}
  .prod:hover,.prod:focus-within{transform:none;}
  .mobile-menu[open] nav{animation:none !important;}
}