/* Arctic Autonomy, pass 5.
   One white ground across every page, squared geometry, the sphere-and-wing mark,
   scroll-fill statement, glass system cards, per-page aurora art.
   No em dashes and no middle dots in rendered text. */

@font-face{font-family:InterVar;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-var-latin.woff2) format("woff2")}

:root{
  --sans:InterVar,ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Roboto Mono",monospace;

  /* one ground everywhere, no band-to-band mismatch */
  --paper:#FBFAF7;
  --raised:#FBFAF7;
  /* One step down from --paper. The statement band has to read as a different
     surface from the page without becoming a second colour. */
  --beige:#EFEAE1;
  --ink:#131312;
  --body:#6f6e68;
  --hairline:rgba(19,19,18,.15);
  --hairline-soft:rgba(19,19,18,.08);
  --navbg:rgba(251,250,247,.92);
  --shade:rgba(19,19,18,.06);

  --field-indigo-a:#2e4da4; --field-indigo-b:#1d3474;
  --field-rust-a:#c06a24;   --field-rust-b:#8a4413;
  --field-stone-a:#b3aa9c;  --field-stone-b:#8d8474;
  --field-sage-a:#9aa37e;   --field-sage-b:#6f7a55;

  /* The fields behind the drawings. Coloured, but deep and low in saturation,
     so a one weight line drawing sits on them without fighting anything. */
  --field-indigo2-a:#1e2f63; --field-indigo2-b:#111a3a;
  --field-oxide2-a:#5e3524;  --field-oxide2-b:#2e1a12;
  --field-slate-a:#22333c;   --field-slate-b:#121d23;
  --field-moss-a:#33422f;    --field-moss-b:#1a231a;

  --w-display:410;
  --r:2px;
  --gutter:clamp(20px,4vw,72px);
  --ease:cubic-bezier(.25,.1,0,1);
}
.dark{
  --paper:#0C0D0F;
  --raised:#0C0D0F;
  --ink:#F2F1EC;
  --body:#8f8e88;
  --hairline:rgba(242,241,236,.18);
  --hairline-soft:rgba(242,241,236,.09);
  --navbg:rgba(12,13,15,.9);
  --shade:rgba(0,0,0,.35);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* the nav is sticky, so anchored sections must clear it when jumped to */
section[id]{scroll-margin-top:88px}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:1rem;line-height:1.55;font-weight:410;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  animation:pagein .7s var(--ease) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:100%;max-width:1680px;margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono)}

::selection{background:#2e4da4;color:#fff}

/* ---------- labels ---------- */
.eyebrow{font-size:.68rem;font-weight:520;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* ---------- ice-crystal mark ---------- */
.mark{width:26px;height:26px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the brand mark ---------- */
/* One vector, assets/img/mark.svg, painted through a mask rather than inlined,
   so every page carries the same artwork and it still takes the ink colour of
   whatever ground it sits on, light or dark. */
.brandmark{display:inline-block;flex:none;height:32px;aspect-ratio:944/1000;
  background-color:currentColor;
  -webkit-mask:url(../img/mark.svg?v=2) no-repeat center/contain;
          mask:url(../img/mark.svg?v=2) no-repeat center/contain}

/* ---------- squared buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:var(--r);
  border:1px solid var(--hairline);background:transparent;color:var(--ink);
  font-weight:470;font-size:.88rem;line-height:1;white-space:nowrap;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn svg{width:11px;height:11px;flex:none;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid:hover{opacity:.88;border-color:var(--ink)}
.btn--ghost{border-color:rgba(255,255,255,.42);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- corner ticks ---------- */
.corners{position:relative}
.corners>i{position:absolute;width:14px;height:14px;pointer-events:none;opacity:.55;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat}
.corners>i:nth-child(1){top:-7px;left:-7px}
.corners>i:nth-child(2){top:-7px;right:-7px}
.corners>i:nth-child(3){bottom:-7px;left:-7px}
.corners>i:nth-child(4){bottom:-7px;right:-7px}

/* ---------- nav ---------- */
/* Transparent only at the very top, over the hero. The words take the colour
   that keeps them readable against whatever is passing underneath there: ink
   over the page, white over a film. The instant you scroll, the bar goes
   solid (--navbg, already theme-aware for light and dark pages) so page
   content never has to compete with the nav's own text for the same pixels. */
.nav{position:sticky;top:0;z-index:100;background:none;border:0;border-bottom:1px solid transparent;color:var(--ink);
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.nav.over-dark{color:#fff}
.nav.over-dark .btn--solid{background:#fff;color:#0a0e14;border-color:#fff}
.nav.over-dark .btn--solid:hover{opacity:.9}
/* The outline button needs the same inversion. .nav__links inherit the white
   above, but .btn sets its own colour from --ink and so cannot -- which left
   Sign up as near-black type on the ocean. Same values as .btn--ghost, which is
   what that modifier has always been for. */
/* :not(.btn--solid) is load-bearing. `.nav.over-dark .btn--solid` above is three
   classes and so is `.nav.over-dark .btn` -- identical specificity, and this one
   is later, so it won and painted Contact us in white on its own white fill. */
.nav.over-dark .btn:not(.btn--solid){border-color:rgba(255,255,255,.42);color:#fff}
.nav.over-dark .btn:not(.btn--solid):hover{border-color:#fff;background:rgba(255,255,255,.08)}
.nav.solid{background:var(--navbg);color:var(--ink);border-bottom-color:var(--hairline-soft);
  box-shadow:0 8px 30px rgba(20,22,24,.05);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:70px}
.nav__links{display:flex;gap:clamp(14px,2.2vw,34px)}
.nav__links a{font-size:.86rem;font-weight:440;padding:8px 2px;position:relative;color:inherit}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:currentColor;transition:right .4s var(--ease)}
.nav__links a:hover::after{right:0}
.nav__logo{display:inline-flex;align-items:center;gap:12px;justify-self:center;color:inherit}
.nav__logo .brandmark{height:38px}
.nav__logo b{font-weight:500;font-size:1.46rem;letter-spacing:-.022em;white-space:nowrap;line-height:1}
.nav__cta{justify-self:end;display:flex;align-items:center;gap:10px}
.nav__cta .btn{padding:9px 16px;font-size:.84rem}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,8vh,104px) 0 clamp(34px,5vh,60px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.7fr);gap:clamp(28px,4vw,72px);align-items:end}
.hero h1{font-size:clamp(2.1rem,4.4vw,4rem);line-height:1.04;letter-spacing:-.03em;font-weight:var(--w-display);max-width:15ch}
.hero__aside{display:flex;flex-direction:column;gap:20px;padding-bottom:6px;max-width:32ch}
.hero__aside p{font-size:.94rem;line-height:1.55;color:var(--body)}
.hero__aside .btn{align-self:flex-start}

/* The hero holds the fold on its own: the page opens on cream, and the water
   below is something you scroll to rather than something already cut in half at
   the bottom of the first screen.

   Scoped to the desktop breakpoint deliberately. The 70px comes from .nav__in,
   and that is only true above 1060px -- below it the nav becomes a two-row
   height:auto bar, so a fixed subtraction there would leave a gap or a scrollbar
   depending on the viewport. Small screens keep a hero sized by its content.

   svh, not vh, with vh underneath as the fallback: on a phone-style browser vh
   is the height WITHOUT the address bar, so a 100vh hero is taller than what you
   can actually see until the chrome retracts. */
@media (min-width:1061px){
  .hero{display:flex;align-items:center;
    min-height:calc(100vh - 70px);
    min-height:calc(100svh - 70px)}
  /* The film hero runs BEHIND the nav rather than starting under it. The nav is
     position:sticky, so it takes up flow space and the hero began 70px down the
     page: the first screen was a cream strip sitting on top of the water, and
     the nav's own over-dark test (does a dark block cross my midline) could
     never be true because the hero started below that line. Pulling it up by the
     nav's height and padding the same amount back in puts the water under the
     nav without moving the content, and the whole first screen becomes ocean. */
  /* The type sits on the floor of the frame, not in the middle of it. A full
     screen of water with the headline centred leaves the shot split in half;
     dropped to the bottom, the water reads as the subject and the words as the
     caption on it. */
  .hero--film{margin-top:-70px;padding-top:70px;align-items:flex-end;
    padding-bottom:clamp(48px,9vh,104px);
    min-height:100vh;min-height:100svh}
}

/* ---------- the hero, on water ---------- */
.hero--film{position:relative;overflow:hidden;isolation:isolate;background:#0a0d12}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* A directional scrim, heavier where the type is. The loop is bright open water
   and its brightness moves, so white text on the bare plate is legible in one
   frame and not the next; this makes it legible in every frame without turning
   the whole shot grey. */
.hero--film::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(5,9,14,.74) 0%,rgba(5,9,14,.5) 42%,rgba(5,9,14,.24) 100%)}
.hero--film>.wrap{position:relative;z-index:2}
.hero--film h1{color:#fff}
.hero--film .hero__aside p{color:rgba(255,255,255,.84)}
.hero--film .btn{color:#fff;border-color:rgba(255,255,255,.45)}
.hero--film .btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}

.hero--solo{padding:clamp(56px,10vh,124px) 0 clamp(30px,5vh,56px);text-align:center}
.hero--solo h1{max-width:18ch;margin-inline:auto}

/* ---------- a film held inside the page, not run to the edges ---------- */
.filmbox{padding:0 var(--gutter) clamp(44px,7vh,100px)}
.filmbox video{display:block;width:min(100%,1240px);margin-inline:auto;
  aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:#0A0B0C}

/* ---------- statement: scroll-fill words ---------- */
.statement{position:relative;padding:clamp(48px,8vh,104px) 0}
.statement .corner{position:absolute;width:14px;height:14px;opacity:.5;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat}
.statement .c1{top:20px;left:calc(var(--gutter) - 7px)}
.statement .c2{top:20px;right:calc(var(--gutter) - 7px)}
.statement .c3{bottom:20px;left:calc(var(--gutter) - 7px)}
.statement .c4{bottom:20px;right:calc(var(--gutter) - 7px)}
/* This is the only thing on a full screen, so it is sized to hold one: at the
   old 2.3rem cap it was a paragraph floating in the middle of an empty panel.
   The measure widens with it -- 30ch at this size would run to eight short
   lines, which reads as a column rather than a statement. */
.fill{font-size:clamp(2rem,5.4vw,4.6rem);font-weight:var(--w-display);
  line-height:1.08;letter-spacing:-.032em;max-width:17ch;text-wrap:balance}
.fill .w{color:rgba(19,19,18,.2);transition:color .3s var(--ease)}
.dark .fill .w{color:rgba(242,241,236,.22)}
.fill .w.lit{color:var(--ink)}
/* The figure lights maroon rather than ink, so the number arrives as the number
   at the moment the sentence reaches it. */
.fill .w--accent.lit{color:#B4384A}
/* A full screen of its own, the same as the hero above it: the number is the
   only thing on it, and it gets the whole viewport to land in rather than a band
   you scroll past. min-height rather than height, so if the supporting column
   ever grows past a screen it pushes the panel taller instead of overflowing it.
   Centred, because the corner marks are pinned to the panel's edges and the
   sticky nav covers the top 70px once it goes solid. */
.statement{background:var(--beige);display:flex;align-items:center;
  min-height:100vh;min-height:100svh}
.statement__in{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(240px,.6fr);
  gap:clamp(28px,4vw,72px);align-items:end}
.statement__aside{display:flex;flex-direction:column;gap:16px;max-width:38ch}
.statement__aside p{font-size:.9rem;line-height:1.6;color:var(--body)}
.statement__link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-weight:480;font-size:.85rem;color:var(--ink);
  border-bottom:1px solid var(--hairline);padding-bottom:2px}
.statement__link:hover{border-bottom-color:var(--ink)}
.statement__link svg{width:11px;height:11px}
@media (max-width:860px){
  .statement__in{grid-template-columns:1fr}
  .statement__aside{max-width:52ch}
}

/* ---------- full-bleed film, clean, crossfading ---------- */
.film{position:relative;overflow:hidden;height:min(84vh,880px);background:#0a0d12}
/* A bottom scrim, not a full-frame darken: the water reads as water for most of
   the plate, and only the strip the copy actually sits on is guaranteed to hold
   contrast regardless of what the loop is doing at that instant. */
.film::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(5,9,14,.86) 0%, rgba(5,9,14,.52) 30%, rgba(5,9,14,0) 60%)}
.film__stat{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr);
  gap:clamp(24px,4vw,64px);align-items:end;padding-bottom:clamp(28px,6vh,68px)}
.film__num{color:#fff;font-size:clamp(1.7rem,3.3vw,2.9rem);line-height:1.14;
  letter-spacing:-.02em;font-weight:var(--w-display);max-width:18ch}
/* The one figure in the sentence, not the sentence. A maroon distinct from the
   warm eyebrow tone below it, dark enough to read as "the number that matters"
   rather than as a link -- this page never uses colour for emphasis anywhere
   else, so this is deliberately the one exception, on the one hard number. */
.film__figure{color:#B4384A;font-weight:600}
.film__aside{display:flex;flex-direction:column;gap:14px;padding-bottom:3px;max-width:34ch}
/* --eyebrow is dark ink everywhere else on the page because everywhere else is
   on --paper. This is the one eyebrow sitting on water at night, so it takes a
   colour of its own rather than becoming invisible on the base class. */
.film__eyebrow{color:#E8A24A}
.film__aside p{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.8)}
.film__link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-weight:480;font-size:.85rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:2px;transition:border-color .3s var(--ease)}
.film__link:hover{border-color:#fff}
.film__link svg{width:11px;height:11px}
@media (max-width:860px){
  .film__stat{grid-template-columns:1fr;padding-bottom:28px}
  .film__aside{max-width:52ch}
}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 2.2s var(--ease)}
.film video.on{opacity:1}

/* ---------- prelude copy above a clean band ---------- */
.prelude{padding:clamp(52px,8vh,110px) 0 clamp(32px,5vh,58px)}
.prelude .eyebrow{display:inline-flex;align-items:center;gap:10px}
.prelude h2{font-size:clamp(1.8rem,3.2vw,3.1rem);letter-spacing:-.028em;font-weight:var(--w-display);line-height:1.06;max-width:22ch;margin-top:16px}
.prelude p{margin-top:16px;max-width:54ch;color:var(--body);font-size:.98rem;line-height:1.6}
.flag{display:inline-block;width:21px;height:11.5px;overflow:hidden;flex:none;box-shadow:0 0 0 1px var(--hairline)}

/* ---------- clean video bands (no overlays) ---------- */
.band{position:relative;overflow:hidden}
.band video{width:100%;height:min(84vh,860px);object-fit:cover;transform:scale(1.12);will-change:transform}
.band--slim video{height:min(50vh,500px)}
.band--hero{background:#0A0B0C}
.band--hero video{height:auto;aspect-ratio:16/9;object-fit:cover;transform:none!important}

/* ---------- woven color fields ---------- */
.tex{position:relative;overflow:hidden;isolation:isolate}
.tex::before{content:"";position:absolute;inset:-2%;z-index:1;opacity:.28;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.9 0.13' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23w)'/></svg>");
  background-size:240px 240px}
/* A 34px rule grid and a corner sheen, rather than a second cloud of noise.
   Drawn, not photographed, which is the difference being aimed at here. */
.tex::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px),
    radial-gradient(120% 90% at 12% 0%,rgba(255,255,255,.13),transparent 58%),
    radial-gradient(130% 100% at 100% 100%,rgba(0,0,0,.42),transparent 62%);
  background-size:34px 34px,34px 34px,100% 100%,100% 100%}
.tex>*{position:relative;z-index:2}
.tex--indigo{background:linear-gradient(135deg,var(--field-indigo-a),var(--field-indigo-b))}
.tex--rust{background:linear-gradient(135deg,var(--field-rust-a),var(--field-rust-b))}
.tex--stone{background:linear-gradient(135deg,var(--field-stone-a),var(--field-stone-b))}
.tex--sage{background:linear-gradient(135deg,var(--field-sage-a),var(--field-sage-b))}
/* Named apart from the four the platform page uses, which stay as they were. */
/* One navy, four steps, deepest to lightest. These were indigo, rust, slate and
   moss: four unrelated hues on four panels that are one continuous process, so
   the colour said "these are different things" while the copy said the opposite.
   Nothing else on this site uses colour to carry meaning, and a rainbow here read
   as decoration rather than as a sequence.

   The progression is deliberate and legible in one direction: step 01 is the
   machine working alone in the dark, and each step lifts as the work comes closer
   to a person, so 04 (the one that waits for a human) is the lightest. */
.tex--f1{background:linear-gradient(155deg,#16244f,#0b1228)}
.tex--f2{background:linear-gradient(155deg,#1e2f63,#111a3a)}
.tex--f3{background:linear-gradient(155deg,#27407f,#16265a)}
.tex--f4{background:linear-gradient(155deg,#31508f,#1d3270)}

/* ---------- the drawings on those fields ----------
   One stroke weight, one colour, and a lot of nothing. They are diagrams of what
   the line beside them claims, not pictures of a screen. */
/* The mockup on the field, in the same card grammar the platform page uses. It
   drifts a little across its own step so scrolling always moves something while
   a panel is being held. */

/* ---------- product screenshots resting on a field ---------- */
/* Crops of the running system, used on the platform page. */
.shot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(78%,540px);height:auto;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.6);z-index:2}
.shot--tall{width:min(58%,360px)}

/* ---------- product UI mock cards ---------- */
.ui{background:#fff;border-radius:var(--r);box-shadow:0 30px 80px -24px rgba(10,14,24,.5);
  font-size:.84rem;line-height:1.4;color:#191a1c;overflow:hidden;text-align:left}
.ui__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(19,19,18,.08)}
.ui__bar .appdot{width:20px;height:20px;border-radius:var(--r);background:#131312;color:#fff;flex:none;
  display:inline-flex;align-items:center;justify-content:center}
.ui__bar .appdot svg{width:11px;height:11px}
.ui__bar b{font-weight:560;font-size:.88rem}
.ui__bar .spacer{margin-left:auto}
.ui__chip{font-size:.7rem;font-weight:540;padding:5px 11px;border-radius:var(--r);border:1px solid rgba(19,19,18,.16);background:#fff;font-family:var(--mono);letter-spacing:.04em}
.ui__body{padding:16px}
.ui .step{display:flex;gap:11px;align-items:flex-start;padding:8px 0}
.ui .step .ck{width:18px;height:18px;border-radius:var(--r);background:#131312;color:#fff;flex:none;
  display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.ui .step .ck svg{width:9px;height:9px}
.ui .step .qbox{display:inline-block;background:#f4f3ef;border:1px solid rgba(19,19,18,.09);border-radius:var(--r);padding:6px 11px;font-weight:500}
.ui .step p b{font-weight:580}
.ui .sub{margin:2px 0 4px 29px;border-left:1px solid rgba(19,19,18,.14);padding-left:15px;display:flex;flex-direction:column;gap:7px}
.ui .act{display:inline-flex;align-items:center;gap:8px;background:#f7f6f2;border:1px solid rgba(19,19,18,.09);
  border-radius:var(--r);padding:6px 11px;font-size:.78rem;font-weight:480;align-self:flex-start}
.ui .act svg{width:10px;height:10px;flex:none}
.ui .kv{padding:7px 0;border-bottom:1px solid rgba(19,19,18,.06);display:flex;gap:10px;font-size:.8rem}
.ui .kv span{color:#191a1c;opacity:.55;flex:none;font-weight:480;font-family:var(--mono);font-size:.72rem;padding-top:2px}
.ui .kv b{font-weight:540}
.ui table{width:100%;border-collapse:collapse;font-size:.8rem}
.ui th{font-weight:540;text-align:left;color:#191a1c;opacity:.55;font-size:.72rem;padding:7px 9px;border-bottom:1px solid rgba(19,19,18,.09)}
.ui td{padding:8px 9px;border-bottom:1px solid rgba(19,19,18,.06);vertical-align:top}
.ui td .cell{background:#f4f3ef;border:1px solid rgba(19,19,18,.08);border-radius:var(--r);padding:5px 9px;display:inline-block}
.ui .crumb{font-size:.8rem;color:#191a1c;opacity:.6}
.ui .crumb b{opacity:1;font-weight:580}
.ui .search{display:flex;gap:9px;margin:0 0 11px}
.ui .search .box{flex:1;border:1px solid rgba(19,19,18,.12);border-radius:var(--r);padding:7px 11px;color:#8a897f;display:flex;align-items:center;gap:8px}
.ui .search .box svg{width:11px;height:11px}
.ui .search .add{border:1px solid rgba(19,19,18,.12);border-radius:var(--r);padding:7px 11px;font-weight:500;white-space:nowrap}
.ui .bubble{background:#f4f3ef;border-radius:var(--r);padding:9px 13px;margin-bottom:9px;max-width:88%}
.ui .bubble.me{background:#131312;color:#fff;margin-left:auto}
.ui .bubble small{display:block;font-size:.68rem;opacity:.6;margin-bottom:2px}
.ui .sheetname{padding:11px 16px;text-align:center;font-weight:540;border-bottom:1px solid rgba(19,19,18,.08);font-size:.84rem}
.ui .grid{display:grid;grid-template-columns:32px 1fr 1.3fr .6fr;font-size:.78rem}
.ui .grid>div{padding:8px 11px;border-bottom:1px solid rgba(19,19,18,.07);border-right:1px solid rgba(19,19,18,.07)}
.ui .grid .h{opacity:.55;font-size:.7rem;font-weight:540;background:#faf9f6}
.ui .grid .n{opacity:.45;background:#faf9f6}
.ui .grid .sel{outline:2px solid #2f7d4f;outline-offset:-2px;background:#f2f8f2;font-style:italic}
.ui .grid .ghost{opacity:.4;font-style:italic}

/* ---------- scroll-driven feature list ---------- */
.fl{padding:clamp(48px,8vh,100px) 0}
/* The section says what it does before the four numbered claims explain how.
   Left aligned rather than centred, because everything below it is. */
.fl__head{margin-bottom:clamp(30px,5vh,60px)}
.fl__head h2{font-size:clamp(1.5rem,2.9vw,2.55rem);letter-spacing:-.028em;
  font-weight:var(--w-display);line-height:1.14;max-width:26ch;text-wrap:balance}
.fl__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,46%);gap:clamp(28px,4vw,72px);align-items:start}
.fl__items{display:flex;flex-direction:column}
.fl__item{border-top:1px solid var(--hairline);padding:clamp(22px,3.6vh,38px) 0;cursor:pointer;
  display:flex;gap:clamp(16px,2.6vw,44px)}
.fl__item:last-child{border-bottom:1px solid var(--hairline)}
.fl__num{font-family:var(--mono);font-size:.76rem;font-weight:440;color:var(--ink);flex:none;width:clamp(30px,3vw,52px);
  padding-top:.55em;opacity:.62;transition:opacity .5s var(--ease)}
.fl__body h3{font-size:clamp(1.3rem,2.05vw,2rem);letter-spacing:-.03em;font-weight:var(--w-display);line-height:1.08;
  opacity:.42;transition:opacity .5s var(--ease)}
.fl__item.on .fl__num,.fl__item.on .fl__body h3{opacity:1}
.fl__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.fl__more>div{overflow:hidden}
.fl__item.on .fl__more{grid-template-rows:1fr}
.fl__body p{max-width:44ch;font-size:1rem;line-height:1.5;padding-top:14px;color:var(--ink);opacity:.72}
.fl__body .learn{display:inline-block;margin-top:15px;font-weight:480;font-size:.85rem;border-bottom:1px solid var(--ink);padding-bottom:2px;color:var(--ink)}
.fl__m{display:none}
/* The block pins and the reader scrolls through its steps, rather than the list
   itself being spaced out. The four lines stay close together, which is how they
   are meant to read, and each step still gets most of a screen of scrolling
   before the next one takes over. */
@media (min-width:1061px){
  .fl{position:relative;padding-bottom:0}
  .fl__grid{position:sticky;top:calc(70px + clamp(18px,3vh,44px));
    min-height:min(76vh,660px);align-content:center}
  /* The scroll a step is held for is (this, times four, minus one screen) over
     four, because the block is pinned for everything except the last screen of
     its own height. At 70vh that is a little under half a screen per step: long
     enough to read, short enough that it does not feel locked. */
  .fl--pinned{min-height:calc(4 * 70vh)}
}
.fl__stage{position:sticky;top:calc(70px + 24px);height:min(70vh,580px);--drift:0px}
.fl__panel{position:absolute;inset:0;opacity:0;transform:scale(.995);pointer-events:none;
  transition:opacity .55s var(--ease),transform .7s var(--ease)}
.fl__panel.on{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .65s var(--ease),transform .8s var(--ease)}
.fl__panel .tex{position:absolute;inset:0;border-radius:var(--r)}
.fl__panel .ui{position:absolute;left:clamp(16px,2.4vw,44px);right:clamp(16px,2.4vw,44px);top:50%;
  transform:translateY(calc(-50% + var(--drift,0px)));z-index:2}

/* ---------- system cards: glass panel over imagery ---------- */
.cases{padding:clamp(48px,8vh,110px) 0}
.cases__head{margin-bottom:clamp(26px,3.4vw,44px);text-align:center}
.cases__head h2{font-size:clamp(1.8rem,3.2vw,3.1rem);letter-spacing:-.028em;font-weight:var(--w-display);line-height:1.06;max-width:22ch;margin-inline:auto}
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,20px)}
.sys{position:relative;border-radius:var(--r);overflow:hidden;isolation:isolate;
  min-height:clamp(380px,36vw,500px);background-size:cover;background-position:center;
  display:flex;align-items:flex-start;padding:clamp(20px,2.6vw,44px)}
.sys::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.18))}
.sys__card{position:relative;z-index:1;width:100%;border-radius:var(--r);
  padding:clamp(18px,2vw,28px) clamp(18px,2vw,30px) clamp(20px,2.2vw,32px);
  background:rgba(250,249,246,.86);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:0 34px 70px -34px rgba(16,18,20,.5);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.sys:hover .sys__card{transform:translateY(-3px);box-shadow:0 42px 84px -34px rgba(16,18,20,.58)}
.sys__top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.sys__top h3{font-size:clamp(1.25rem,1.9vw,1.75rem);font-weight:450;
  letter-spacing:-.022em;line-height:1;color:#131312}
.sys__plus{position:relative;flex:none;width:22px;height:22px;opacity:.8}
.sys__plus::before,.sys__plus::after{content:"";position:absolute;background:#131312}
.sys__plus::before{left:0;top:50%;width:100%;height:1.2px;transform:translateY(-50%)}
.sys__plus::after{top:0;left:50%;height:100%;width:1.2px;transform:translateX(-50%)}
.sys__rule{height:1px;background:rgba(19,19,18,.2);margin:clamp(13px,1.5vw,20px) 0 clamp(14px,1.6vw,22px)}
.sys__card p{font-size:.92rem;line-height:1.58;color:rgba(19,19,18,.62);max-width:44ch}

/* ---------- compliance: title, note, mark at the foot ---------- */
.comp{padding:clamp(48px,8vh,110px) 0}
.comp__head{text-align:center;margin-bottom:clamp(28px,4vh,52px)}
.comp__head p{margin:18px auto 0;font-size:.95rem;line-height:1.6;color:var(--body);max-width:40rem}
.comp__head h2{font-size:clamp(1.8rem,3.4vw,3.2rem);letter-spacing:-.03em;font-weight:var(--w-display);line-height:1.05}
.comp__grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hairline)}
.comp__tile{padding:clamp(26px,3vw,44px);border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;min-height:clamp(300px,26vw,380px)}
.comp__tile:last-child{border-right:0}
.comp__tile b{font-size:1.32rem;font-weight:450;letter-spacing:-.02em}
.comp__tile p{margin-top:12px;font-size:.92rem;line-height:1.58;color:var(--body);max-width:32ch}
.comp__mark{margin-top:auto;padding-top:32px}
.comp__mark svg{width:76px;height:76px;stroke:currentColor;fill:none;stroke-width:1;opacity:.85}
.comp__mark svg text{fill:currentColor;stroke:none;font-family:var(--sans)}

/* ---------- inset media rectangle ---------- */
.inset{padding:clamp(48px,8vh,110px) 0}
.inset__head{margin-bottom:30px;text-align:center}
/* This heading used to be a single short line, so it was pinned with
   white-space:nowrap and max-width:none. It now carries two full sentences, and
   nowrap on that runs straight off the side of the page at any width. It wraps,
   and it gets a measure: centred display type past roughly 30 characters a line
   stops being scannable and starts being a paragraph in a big font. */
.inset__head h2{font-size:clamp(1.4rem,2.7vw,2.6rem);letter-spacing:-.028em;font-weight:var(--w-display);
  line-height:1.16;max-width:30ch;margin-inline:auto;text-wrap:balance}
.inset__media{border-radius:var(--r);overflow:hidden;position:relative;border:1px solid var(--hairline)}
.inset__media video{width:100%;aspect-ratio:16/8.5;object-fit:cover}

/* ---------- centered section head ---------- */
.centerhead{text-align:center;padding:clamp(52px,8vh,110px) var(--gutter) clamp(30px,5vh,52px)}
.centerhead h2{font-size:clamp(1.9rem,3.8vw,3.6rem);letter-spacing:-.03em;font-weight:var(--w-display);line-height:1.04;margin-top:14px}
.centerhead p{margin:16px auto 0;max-width:46ch;font-size:.96rem;line-height:1.6;color:var(--body)}

/* ---------- comparison two-up ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-items:stretch}
.compare__cell .tex{height:clamp(320px,38vw,540px);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:var(--r)}
.compare__cell .ui{width:min(86%,600px);border-radius:var(--r);transform:translateY(6%)}
.compare__cell .cap{padding:24px var(--gutter) clamp(40px,6vh,68px)}
.compare__cell .cap h3{font-size:clamp(1.18rem,1.7vw,1.55rem);letter-spacing:-.02em;font-weight:460;margin-top:10px;line-height:1.16}
.compare__cell .cap p{margin-top:10px;font-family:var(--sans);font-size:.93rem;line-height:1.58;max-width:44ch;color:var(--body)}

/* ---------- demo frame ---------- */
.demo{padding:0 var(--gutter) clamp(20px,4vh,48px);display:flex;justify-content:center}
.demo__frame{width:min(1280px,100%);background:#0B0C0D;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--hairline);box-shadow:0 40px 110px -40px rgba(0,0,0,.5)}
.demo__chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid rgba(237,236,232,.1)}
.demo__chrome i{width:8px;height:8px;border-radius:99px;background:rgba(237,236,232,.18)}
.demo__chrome span{margin-left:12px;font-family:var(--mono);font-size:.7rem;color:rgba(237,236,232,.42)}
.demo__frame video{width:100%;display:block}

/* ---------- CTA: original aurora art, recolored per page ---------- */
.cta{padding:clamp(52px,8vh,116px) var(--gutter);background:var(--paper)}
.cta__in{position:relative;border:1px solid var(--hairline);border-radius:var(--r);
  min-height:min(62vh,560px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:22px;padding:64px var(--gutter);
  background:#0a0e14;color:#F2F1EC;overflow:hidden}
.cta__art{position:absolute;inset:-15%;pointer-events:none;filter:blur(42px) saturate(1.25);z-index:0;
  background:
    radial-gradient(34% 30% at 30% 64%, rgba(62,196,158,.7), transparent 68%),
    radial-gradient(32% 26% at 68% 40%, rgba(72,112,214,.8), transparent 68%),
    radial-gradient(24% 20% at 52% 76%, rgba(140,235,200,.4), transparent 68%),
    radial-gradient(44% 36% at 50% 18%, rgba(34,58,116,.85), transparent 74%);
  animation:auror 26s var(--ease) infinite alternate}
/* platform page: violet ice */
.cta__art--violet{background:
    radial-gradient(34% 30% at 28% 62%, rgba(126,104,222,.7), transparent 68%),
    radial-gradient(32% 26% at 70% 38%, rgba(58,86,196,.8), transparent 68%),
    radial-gradient(24% 20% at 54% 78%, rgba(196,168,255,.36), transparent 68%),
    radial-gradient(44% 36% at 48% 18%, rgba(38,34,96,.85), transparent 74%)}
/* freight page: amber corridor */
.cta__art--amber{background:
    radial-gradient(34% 30% at 30% 62%, rgba(214,138,58,.7), transparent 68%),
    radial-gradient(32% 26% at 68% 40%, rgba(158,74,36,.78), transparent 68%),
    radial-gradient(24% 20% at 54% 78%, rgba(240,200,140,.34), transparent 68%),
    radial-gradient(44% 36% at 48% 18%, rgba(64,36,20,.85), transparent 74%)}
@keyframes auror{
  0%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(6deg) scale(1.12)}
  100%{transform:rotate(-5deg) scale(1.05)}
}
.cta__in::before{content:"";position:absolute;inset:0;z-index:1;opacity:.4;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='11' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23g)'/></svg>");
  background-size:300px 300px}
.cta__in>:not(.cta__art):not(i){position:relative;z-index:2}
.cta__in .cta__art{position:absolute;z-index:0}
.cta__in>i{z-index:2}
.cta h2{font-size:clamp(2rem,4.2vw,3.9rem);letter-spacing:-.03em;font-weight:var(--w-display);line-height:1;color:#F2F1EC}
.cta p{max-width:38ch;color:rgba(242,241,236,.84);font-size:.95rem;line-height:1.55}
.cta .corners>i{color:#F2F1EC}

/* ---------- integrations: what the system talks to ---------- */
.conn{padding:clamp(48px,8vh,110px) 0}
.conn__head{text-align:center}
.conn__head h2{font-size:clamp(1.8rem,3.4vw,3.2rem);letter-spacing:-.03em;line-height:1.05;
  font-weight:var(--w-display)}
.conn__head p{margin:18px auto 0;font-size:.95rem;line-height:1.6;color:var(--body);max-width:33rem}
.conn__grid{margin-top:clamp(38px,6vh,72px);max-width:1180px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  row-gap:clamp(30px,5vh,50px);column-gap:24px;align-items:center;justify-items:center}
/* No hover state. The grid used to dim every logo to .42 and lift the one under
   the cursor back to 1, which was a nice effect on monochrome glyphs and a bad
   one on fifteen real brand marks: pointing anywhere greyed out fourteen
   companies at once, and the whole row flickered as the pointer crossed it. A
   list of who you connect to is not a control, so it does not answer the mouse. */
.conn__logo{display:inline-flex;align-items:center;gap:12px;color:var(--ink);opacity:.72}
.conn__logo svg{width:26px;height:26px;flex:none;fill:currentColor;stroke:none}
/* Real brand marks are raster and keep their own colour: a logo recoloured to
   currentColor stops being that company's logo. Served at 64px for a 26px box so
   they stay sharp on a retina screen. */
.conn__logo img{width:26px;height:26px;flex:none;object-fit:contain;display:block}
.conn__logo b{font-size:1.1rem;font-weight:500;letter-spacing:-.022em;white-space:nowrap;line-height:1}
.conn__logo--type b{letter-spacing:-.01em}
@media (max-width:900px){
  .conn__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  .conn__logo b{font-size:.95rem}
}

/* ---------- bento: the capability grid on the product page ----------
   Layout pattern adapted from "Cybernetic Bento Grid" (21st.dev), with its
   glowing borders and background grid left behind. Nothing on this site glows.
   The Overview page keeps .fl, where one panel at a time suits a narrative.
   Here every card is on screen at once: this is the page someone opens to find
   out what the product does, and hiding three answers behind an interaction
   costs more than the animation is worth.
   Two spans, not four equal cells. The equal-cell version read as a spec sheet
   and forced all four screenshots to the same crop, which the source images do
   not share: widget and draft are wide, observed and mix are close to square. */
.bento{padding:clamp(26px,4vh,50px) 0 clamp(48px,8vh,100px)}
.bento__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px)}
.bento__card{display:flex;flex-direction:column;gap:clamp(14px,1.8vh,22px);
  border:1px solid var(--hairline);border-radius:var(--r);
  padding:clamp(20px,2.2vw,30px);min-height:clamp(340px,46vh,470px)}
.bento__card--wide{grid-column:span 2}
.bento__card h3{font-size:clamp(1.15rem,1.5vw,1.5rem);letter-spacing:-.028em;
  font-weight:var(--w-display);line-height:1.1;color:var(--ink)}
.bento__card p{font-size:.94rem;line-height:1.55;color:var(--body);max-width:46ch}
/* The plate fills whatever the copy leaves, so two cards of different text
   lengths still bottom out level. */
.bento__media{flex:1;min-height:140px;border-radius:var(--r)}
/* Sized by max-* on both axes with width and height auto, so whichever edge
   binds first wins and the crop is never cut off. A fixed width (what .shot
   does on the platform page, where the plate is 580px tall) overflowed these
   much shorter plates and .tex's overflow:hidden silently sliced the top and
   bottom off three of the four screenshots. */
/* A mock screen can sit on the plate in place of a screenshot. Same centring
   as the crops, capped so a long card body never pushes it out of frame. */
.bento__media .ui{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(90%,560px);max-height:92%;overflow:hidden;z-index:2}
.bento__media img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;max-width:88%;max-height:86%;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.6);z-index:2}
@media (max-width:900px){
  .bento__grid{grid-template-columns:1fr}
  .bento__card--wide{grid-column:span 1}
  .bento__card{min-height:0}
  .bento__media{min-height:210px}
  /* A screenshot can shrink to fit a short plate. A mock screen cannot: its
     text is real text, so scaling it down either makes it unreadable or, with
     max-height and overflow:hidden, silently crops rows off the bottom. At
     375px this plate showed two of the backtest's four rows, and the two it
     dropped were the two the card exists to show. The plate grows instead. */
  .bento__media--mock{min-height:340px}
  .bento__media--mock .ui{width:min(94%,560px);max-height:92%}
}

/* "Google Workspace" is 171px of nowrap label against a 161px track at 375px,
   the one name in fifteen wide enough to skew the columns. */
@media (max-width:420px){
  .conn__grid{column-gap:10px}
  .conn__logo{gap:9px}
  .conn__logo b{font-size:.86rem}
  .conn__logo img,.conn__logo svg{width:22px;height:22px}
}

/* ---------- footer: mark, flag, one line of legal. Nothing else. ---------- */
.foot{background:var(--paper);padding:clamp(56px,9vh,120px) 0 clamp(34px,5vh,52px);text-align:center}
.foot__brand{display:flex;flex-direction:column;align-items:center;gap:16px}
.foot__brand .brandline{display:inline-flex;align-items:center;gap:13px}
.foot__brand .brandline .brandmark{height:52px}
.foot__brand .brandline b{font-size:1.8rem;font-weight:500;letter-spacing:-.024em;white-space:nowrap}
.foot__flag{width:34px;height:19px;overflow:hidden;box-shadow:0 0 0 1px var(--hairline)}
.foot__made{font-size:.86rem;color:var(--body)}
.foot__legal{margin-top:clamp(30px,5vh,52px);display:flex;justify-content:center;flex-wrap:wrap;
  gap:10px 26px;font-size:.82rem;color:var(--body)}
.foot__legal a{transition:color .3s}
.foot__legal a:hover{color:var(--ink)}

/* ---------- demo form ---------- */
.formpage{padding:clamp(40px,7vh,90px) var(--gutter) clamp(56px,8vh,110px);
  display:flex;justify-content:center}
.formcard{width:min(620px,100%)}
.formcard__head{text-align:center;margin-bottom:clamp(26px,4vh,40px)}
.formcard__head .eyebrow{color:var(--body)}
.formcard__head h1{margin-top:14px;font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.03em;
  font-weight:var(--w-display);line-height:1.04}
.formcard__head p{margin:14px auto 0;max-width:44ch;font-size:.96rem;line-height:1.6;color:var(--body)}
.formbox{border:1px solid var(--hairline);border-radius:var(--r);background:var(--paper);
  padding:clamp(24px,3.4vw,40px)}
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.68rem;font-weight:540;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:.94rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--hairline);border-radius:0;
  padding:9px 2px;transition:border-color .3s var(--ease)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--body);opacity:.6}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .btn{align-self:flex-start;margin-top:6px}
.form__note{margin-top:2px;font-size:.84rem;color:var(--body);line-height:1.55}
.form__note a{color:var(--ink);border-bottom:1px solid var(--hairline)}
.form__note.err{color:#a2401c}
.formcard__alt{margin-top:22px;text-align:center;font-size:.86rem;color:var(--body);line-height:1.6}
.formcard__alt a{color:var(--ink);border-bottom:1px solid var(--hairline)}

/* ---------- legal pages ---------- */
.legal{max-width:760px;margin-inline:auto;padding:clamp(40px,6vh,84px) var(--gutter) clamp(56px,8vh,110px)}
.legal__head{padding-bottom:clamp(26px,4vh,42px);border-bottom:1px solid var(--hairline);margin-bottom:clamp(8px,2vh,18px)}
.legal h1{font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.03em;font-weight:var(--w-display);line-height:1.04}
.legal .updated{margin-top:14px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
.legal h2{margin-top:clamp(32px,4.5vh,50px);font-size:.7rem;font-weight:540;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink)}
.legal p{margin-top:14px;font-size:.96rem;line-height:1.75;color:var(--ink)}
.legal ul{margin:14px 0 0;list-style:none;display:flex;flex-direction:column;gap:12px}
.legal li{font-size:.96rem;line-height:1.75;color:var(--ink);padding-left:18px;position:relative}
.legal li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:1px;background:var(--ink);opacity:.5}
.legal a{color:var(--ink);border-bottom:1px solid var(--hairline)}
.legal .lead{margin-top:20px;font-size:1.05rem;line-height:1.65;color:var(--ink)}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .band video{transform:none!important}
  .cta__art{animation:none}
  .fill .w{color:var(--ink)}
  body{animation:none}
}

/* ---------- responsive ---------- */
/* Small screens get the same first screen as desktop: all ocean, type on the
   floor of the frame. It used to be a short letterboxed band of water with a
   cream strip above it, because the desktop rule subtracts a hardcoded 70px
   nav and that number is only true above 1060px. --navh is the measured height,
   published by site.js, so the same trick works at any nav height. The fallback
   is the two-row bar at its usual size, used only if the script has not run. */
@media (max-width:1060px){
  .hero--film{display:flex;align-items:flex-end;
    margin-top:calc(-1 * var(--navh,96px));
    padding-top:var(--navh,96px);
    padding-bottom:clamp(34px,7vh,72px);
    min-height:100vh;min-height:100svh}
}

@media (max-width:1060px){
  /* two-row header: brand and action on top, the links on their own line.
     Hiding them left Platform and Maritime AI unreachable on phones. */
  .nav__in{grid-template-columns:1fr auto;
    grid-template-areas:"logo cta" "links links";
    height:auto;padding-block:12px 0;row-gap:10px}
  .nav__logo{grid-area:logo;justify-self:start}
  .nav__cta{grid-area:cta;justify-self:end}
  .nav__links{grid-area:links;justify-content:center;gap:clamp(18px,6vw,40px);
    border-top:1px solid var(--hairline-soft);padding:9px 0 10px;margin-inline:calc(-1*var(--gutter));
    padding-inline:var(--gutter)}
  .nav__links a{padding:2px}
  .fl__stage{display:none}
  .hero__grid{grid-template-columns:1fr;align-items:start}
  .hero__aside{max-width:52ch}
  .fl__grid{grid-template-columns:1fr}
  .fl__stage{display:none}
  .fl__item{flex-wrap:wrap;position:relative;padding-right:56px}
  .fl__item::after{content:"";position:absolute;right:0;top:clamp(22px,3.6vh,38px);
    width:30px;height:30px;border:1px solid var(--hairline);border-radius:var(--r);
    background:
      linear-gradient(currentColor,currentColor) center/11px 1px no-repeat,
      linear-gradient(currentColor,currentColor) center/1px 11px no-repeat;
    transition:opacity .35s var(--ease)}
  .fl__item.on::after{opacity:0}
  .fl__m{display:block;width:100%;margin-top:16px;position:relative;
    padding:clamp(28px,7vw,48px) clamp(14px,4vw,28px)}
  .fl__m .tex{position:absolute;inset:0;border-radius:var(--r)}
  .fl__m .ui{position:relative;z-index:2;margin-inline:auto;max-width:560px}
  /* the cloned stage on narrow screens: it sits in the flow, not pinned. The
     clones live outside .fl__panel, so the reveal that keys off .on would never
     fire for them and every row would stay at zero opacity. They are shown in
     their finished state instead. */
  .fl__m .shot{position:relative;inset:auto;top:auto;transform:none;left:auto;right:auto;
    display:block;width:100%;max-width:100%;margin:0 auto}
  .cgrid{grid-template-columns:1fr}
  .sys{min-height:340px}
  .compare{grid-template-columns:1fr}
  .compare__cell .tex{height:auto;min-height:0;align-items:flex-start;
    padding:clamp(26px,7vw,44px) clamp(14px,4vw,26px) 0}
  .compare__cell .ui{width:min(94%,600px);transform:none}
  .comp__grid{grid-template-columns:1fr}
  .comp__tile{border-right:0;border-bottom:1px solid var(--hairline);min-height:0}
  .comp__tile:last-child{border-bottom:0}
  .comp__mark{padding-top:24px}
  .foot__top{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .foot__top{grid-template-columns:1fr}
  .foot__bottom .right{margin-left:0}
  .form__row{grid-template-columns:1fr}
  .demo__frame video{aspect-ratio:4/3.4;object-fit:cover;object-position:12% 30%}
}


/* ---------- capability grid (security page) ---------- */
.capsec{padding:clamp(48px,8vh,110px) 0 clamp(56px,9vh,120px)}
.capsec__eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
.capsec__eyebrow i{width:7px;height:7px;border-radius:99px;background:#C97B41;flex:none}
.capgrid{margin-top:clamp(40px,7vh,84px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.85fr);
  gap:clamp(34px,5vw,72px) clamp(28px,4vw,56px)}
.cap{display:flex;flex-direction:column}
.cap svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round}
.cap b{margin-top:clamp(64px,7vw,104px);font-size:1.06rem;font-weight:480;letter-spacing:-.014em}
.cap p{margin-top:16px;font-family:var(--mono);font-size:.82rem;line-height:1.72;color:var(--body)}
.capgrid__title{grid-column:4;grid-row:2;align-self:end}
.capgrid__title h2{font-size:clamp(1.7rem,2.8vw,2.6rem);letter-spacing:-.03em;
  font-weight:var(--w-display);line-height:1.08}


@media (max-width:1060px){
  .capgrid{grid-template-columns:1fr 1fr}
  .capgrid__title{grid-column:1/-1;grid-row:auto;order:-1}
  .cap b{margin-top:36px}
}
@media (max-width:640px){
  .capgrid{grid-template-columns:1fr}
}


/* ---------- split: statement left, technical diagram right ---------- */
.split{padding:clamp(48px,8vh,110px) 0}
.split__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,88px);align-items:center}
.split__copy .capsec__eyebrow{margin-bottom:20px}
.split__copy h2{font-size:clamp(1.8rem,3.2vw,3rem);letter-spacing:-.03em;
  font-weight:var(--w-display);line-height:1.06;max-width:16ch}
.split__copy p{margin-top:18px;max-width:48ch;color:var(--body);font-size:.96rem;line-height:1.65}
.split__acts{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- ontology tree ---------- */
.tree{font-family:var(--mono);font-size:.76rem;line-height:2.05;color:var(--body);
  overflow-x:auto;padding-bottom:4px}
.tree ul{list-style:none;padding-left:20px}
.tree>ul{padding-left:0}
.tree li{position:relative;padding-left:15px;white-space:nowrap}
.tree li::before{content:"";position:absolute;left:0;top:1.02em;width:11px;height:1px;background:var(--hairline)}
.tree li::after{content:"";position:absolute;left:0;top:0;height:100%;width:1px;background:var(--hairline)}
.tree li:last-child::after{height:1.02em}
.tree>ul>li{padding-left:0}
.tree>ul>li::before,.tree>ul>li::after{display:none}
.tree b{color:var(--ink);font-weight:500}
.tree em{font-style:normal;opacity:.55}

/* ---------- supported models ---------- */
.models{padding:0 var(--gutter) clamp(48px,8vh,110px)}
.models__panel{border:1px solid var(--hairline);border-radius:var(--r);
  padding:clamp(28px,4vw,58px);display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.models__panel h2{font-size:clamp(1.5rem,2.5vw,2.3rem);letter-spacing:-.028em;
  font-weight:var(--w-display);line-height:1.1;max-width:18ch;margin-top:18px}
.models__panel>div>p{margin-top:16px;max-width:44ch;color:var(--body);font-size:.94rem;line-height:1.65}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--hairline);border-radius:var(--r);padding:11px 16px;
  font-size:.88rem;font-weight:460;white-space:nowrap;
  transition:border-color .3s var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip span{font-family:var(--mono);font-size:.7rem;color:var(--body);margin-left:8px;letter-spacing:.06em}
.chips__note{margin-top:18px;font-family:var(--mono);font-size:.74rem;color:var(--body);letter-spacing:.04em}

@media (max-width:1060px){
  .split__grid{grid-template-columns:1fr;gap:36px}
  .models__panel{grid-template-columns:1fr;gap:28px}
}