/* ============================================================
   The Little Box — thelittlebox.ai
   No frameworks, no web fonts, no third-party requests.

   THREE TYPE SIZES ONLY:
     --t-display   h1
     --t-head      h2 and pull statements
     --t-body      everything else, including h3 (bold body)
   Hierarchy below h2 is carried by weight, colour and space.
   Do not add a fourth size.
   ============================================================ */

:root{
  /* surface */
  --bg:#ffffff;
  --bg-soft:#f7f7f8;
  --fg:#0c0c0e;
  --muted:#55555e;
  --faint:#7d7d87;
  --line:#e4e4e8;
  --line-strong:#cbcbd3;
  --card:#ffffff;
  --nav-bg:rgba(255,255,255,.84);
  --shadow:0 1px 2px rgba(12,12,14,.05), 0 10px 30px rgba(12,12,14,.06);

  /* ---- the palette, all six tokens, named as the brand pack names them ----
     v1 only ever declared the accent. The rest were reached for as raw hex or
     not at all, which is why every icon on the site ended up orange. Naming
     them here is what makes the colour rules in the v2 plan enforceable:
     Ink for text and icon strokes, Midnight Blue for technical and trust
     material, Muted Green for assurance signals only, Sovereign Orange
     reserved for buttons, one diagram highlight, key figures and the active
     navigation marker. */
  --ink:#0c0c0e;
  --orange:#fb5607;
  --blue:#17365d;
  --cloud:#e8e8e5;
  --paper:#ffffff;
  --green:#2f8f63;

  /* brand */
  --accent:#fb5607;
  /* Figure blues. The deployment wheel and the five-layer stack are technical
     material, so they carry Midnight Blue, not Sovereign Orange. --fig-fill is
     the solid box, --fig-line the arrows, --fig-edge the card outline. */
  --fig-fill:#17365D;
  --fig-line:#17365D;
  --fig-edge:rgba(23,54,93,.30);
  --fig-stroke:transparent;
  --accent-ink:#ffffff;
  /* solid button ramp. Same values in both themes so a press looks identical. */
  --btn-bg:#fb5607;
  --btn-bg-hover:#d94a05;
  --btn-bg-active:#b53d04;
  --stage-hi:#f5f5f7;
  --stage-lo:#e7e7ec;
  --stage-shadow:rgba(12,12,14,.20);
  /* the five product keys, CLUSA V2 palette only, lightest to darkest:
     Cloud Grey, Muted Green, Midnight Blue, Sovereign Orange, Ink */
  --c1:#e8e8e5;
  --c2:#2f8f63;
  --c3:#17365d;
  --c4:#fb5607;
  --c5:#0c0c0e;
  --key-line:rgba(12,12,14,.22);

  /* ---- the only three type sizes ---- */
  /* One step down from 4.3rem, 4.6. Denys, 23 September 2026. The whole
     scale moves, so the phone end comes down with the desktop end. */
  --t-display:clamp(2.4rem,1.55rem + 3.1vw,3.8rem);
  --t-head:clamp(1.7rem,1.35rem + 1.35vw,2.4rem);
  --t-body:1rem;      /* 4.13: 18px to 16px. Denys, 30 September 2026 */
  /* Interface text, added 4.2. The three-size rule forced every menu link,
     button, kicker and label to body size, so the only hierarchy left was
     weight 700, and the page read loud. Prose keeps --t-body; anything that
     is a control or a label takes one of these two. */
  --t-small:0.8125rem;
  --t-micro:0.75rem;

  /* rhythm */
  --maxw:1200px;
  --measure:75ch;      /* the reading measure, one number for all prose */
  --pad:26px;
  --sect:68px;       /* space above and below every section */
  --r-card:10px;
  --r-btn:12px;
  --r-pill:999px;
}

[data-theme="dark"]{
  --bg:#0a0a0b;
  --bg-soft:#111114;
  --fg:#f3f3f5;
  --muted:#a8a8b2;
  --faint:#86868f;
  --line:#232329;
  --line-strong:#3a3a44;
  --card:#0f0f12;
  --nav-bg:rgba(10,10,11,.76);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.4);
  --accent:#ff6b2c;
  --stage-hi:#26262e;
  --stage-lo:#101014;
  --stage-shadow:rgba(0,0,0,.55);
  /* Midnight Blue is 1.60:1 on Ink, so on the dark ground the blue key is
     lifted and Ink is inverted to stay visible. Muted Green is 4.87:1 on Ink,
     which passes for a mark but is dull against a dark ground, so it is lifted
     to 6.67:1 for the same reason. */
  --blue:#3f6ea8;
  /* Dark. Filled boxes stay Midnight Blue, the brand value, in both themes.
     It sits at 1.55:1 against the near black ground, so every filled box takes
     a pale hairline to give it an edge. Blue TEXT and blue LINES cannot do
     that, so they lift to the palette's on-dark blue instead. */
  --fig-fill:#17365D;
  --fig-line:#3f6ea8;
  --fig-edge:rgba(63,110,168,.45);
  --fig-stroke:rgba(232,232,229,.34);
  --green:#3fa97a;
  --ink:#f3f3f5;
  --paper:#0c0c0e;
  --c3:#3f6ea8;
  --c5:#f3f3f5;
  --key-line:rgba(243,243,245,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ----------------------------------------------------------------------
   Inter, 4.6. A loaded typeface rather than a system stack, because neither
   Helvetica Neue nor Arial gives every visitor the same page: Helvetica Neue
   on a Mac has a Medium weight and Arial on Windows does not, so the same CSS
   would render medium headings for one reader and regular for another.

   4.2 to 4.5 used Clear Sans, the brand pack typeface, for that reason.
   Denys, 23 September 2026: its capital I carries serifs, an interface
   legibility feature that reads as a mistake at 69px, and the headline is
   "Private AI". Inter has a plain capital I by design. The deck and the rest
   of the brand pack stay on Clear Sans for now; that decision is open.

   Three weights, subset to Latin, 57KB in total. Unsubset it is 545KB.
   ---------------------------------------------------------------------- */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,-apple-system,system-ui,"Segoe UI",sans-serif;
  font-size:var(--t-body);
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Form controls and <button> do not inherit the page typeface. Every
   <a class="btn"> picked up the page typeface and every real <button> did not,
   is the cookie banner, the contact form and the carousel arrows. */
button,input,select,textarea{font-family:inherit}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4{margin:0 0 .55em;font-weight:500;letter-spacing:-.028em;line-height:1.12}
h1{font-size:var(--t-display)}
h2{font-size:var(--t-head)}
h3,h4{font-size:var(--t-body);font-weight:500;letter-spacing:-.012em;line-height:1.4}

/* Line breaking.
   A heading must never end on a lone word. The browser balances the lines to
   roughly equal length instead, which on a two-sentence heading lands on the
   sentence break by itself. Body copy uses pretty, which does the narrower job
   of pulling a word down rather than leaving one alone on the last line.
   Both degrade to normal wrapping on older browsers, so nothing breaks. */
h1,h2,h3,h4,.statement,.lede,.split__h{text-wrap:balance}
p,li{text-wrap:pretty}
.lineup__who, .lineup__seats, .lineup__note{text-wrap:auto}

/* Sentence per line, for headings of more than one sentence.
   Balancing alone fixes the lone word but will happily break in the middle of
   a sentence, which reads worse. Each sentence is wrapped in an inline-block
   instead, so the browser prefers to break between sentences and only breaks
   inside one when that sentence will not fit on a line of its own. Balancing
   is switched off on those headings, because the two rules fight. */
.ln{display:inline-block}
.bylines{text-wrap:normal}

p{margin:0 0 1.15em;max-width:var(--measure)}
p:last-child{margin-bottom:0}
ul{margin:0 0 1.15em;padding-left:1.1em;max-width:var(--measure)}
li{margin-bottom:.5em}
strong{font-weight:500}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--sect) 0}
.section--soft{background:var(--bg-soft)}
.section--line{border-top:1px solid var(--line)}
.section--tight{padding:calc(var(--sect) * .58) 0}
@media (max-width:760px){:root{--sect:66px;--pad:20px}}

/* labels: same size as body, distinguished by weight, caps and colour */
/* 4.11, 24 September 2026: every section label is orange and 20% bigger.
   Denys: some were grey, because .head p below painted them muted. */
.kicker{
  font-size:.9rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px
}
.lede{color:var(--muted);max-width:var(--measure)}
.micro{color:var(--faint)}
.head{max-width:var(--measure)}
.head p{color:var(--muted)}
.head .kicker,.contact__head .kicker{color:var(--accent)}

/* The header is sticky, so an anchored jump parks the section heading
   underneath it. scroll-padding-top on the root stops every hash link,
   in-page or arriving from another page, short of the bar. */
html{scroll-padding-top:127px}
@media (max-width:1160px){html{scroll-padding-top:117px}}

/* ---------- header: one horizontal bar, full width ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--bg);border-bottom:1px solid var(--line)
}
.site-header .wrap{position:relative}
.nav{display:flex;align-items:center;gap:20px;height:102px}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
/* The header carries the full lockup with the SOVEREIGN INTELLIGENCE
   descriptor, as v1 did and at v1's size. The descriptor sets the floor:
   at 62px its caps sit on the pack's 12px minimum. 4.64:1, so 288px wide.
   Below 1080px it drops to 52px, as v1 did, where the caps run about 10px. */
.brand img{height:62px;width:auto}
.brand .logo-dark{display:none}
[data-theme="dark"] .brand .logo-light{display:none}
[data-theme="dark"] .brand .logo-dark{display:block}

.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links a{
  text-decoration:none;font-weight:400;color:var(--muted);
  padding:10px 12px;border-radius:var(--r-btn);white-space:nowrap
}
.nav-links a:hover{color:var(--fg);background:var(--bg-soft)}
.nav-links a[aria-current="page"]{color:var(--fg)}
/* the call to action in the bar is a button first, a nav link second.
   Without these, `.nav-links a` wins on specificity and paints the label grey. */
.nav-links a.btn,
.nav-links a.btn:visited{color:#ffffff;background:var(--btn-bg)}
.nav-links a.btn:hover{color:#ffffff;background:var(--btn-bg-hover)}
.nav-links a.btn:active{color:#ffffff;background:var(--btn-bg-active)}
.nav-links a.btn--ghost,
.nav-links a.btn--ghost:visited{color:var(--fg);background:transparent}
.nav-links a.btn--ghost:hover{color:var(--fg);background:var(--bg-soft)}
.nav-links a[aria-current="page"]::after{
  content:"";display:block;height:2px;width:18px;margin:6px auto -8px;
  background:var(--accent);border-radius:2px
}
.nav-links .btn{margin-left:12px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;white-space:nowrap;text-decoration:none;max-width:100%;
  font-size:var(--t-small);font-weight:500;letter-spacing:.005em;
  padding:13px 22px;border-radius:var(--r-btn);
  border:1px solid var(--btn-bg);background:var(--btn-bg);color:#ffffff;
  cursor:pointer;line-height:1;
  transition:background-color .12s ease,border-color .12s ease
}
/* ---------- the gloss, 4.4 ----------
   Denys, 23 September 2026, after looking at a React liquid-glass component
   that could not be used here. This is the same idea in twelve lines of CSS:
   a light from above so the button reads as a curved surface, and a soft
   sheen that follows the pointer across it. The sheen is drawn in ::before so
   it cannot collide with the current-page marker, which uses ::after. The
   ghost button is left alone: a white sheen on a white button shows nothing.
   The button still does not move, resize or fade, so the rule that hover
   changes colour only survives intact. */
.btn:not(.btn--ghost){
  position:relative;overflow:hidden;
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 58%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.20)
}
.btn:not(.btn--ghost)::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.30), rgba(255,255,255,0) 70%);
  opacity:0;transition:opacity .25s ease
}
.btn:not(.btn--ghost):hover::before,
.btn:not(.btn--ghost):focus-visible::before{opacity:1}
@media (prefers-reduced-motion:reduce){.btn::before{display:none}}

/* Hover and press change COLOUR ONLY. Nothing moves, nothing resizes,
   nothing fades. Opacity and transform are deliberately not used here. */
.btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);color:#ffffff}
.btn:active{background:var(--btn-bg-active);border-color:var(--btn-bg-active);color:#ffffff}
/* the keyboard focus ring is drawn INSIDE the button, so its footprint,
   its size and the alignment of the bar never change */
.btn:focus-visible{outline:2px solid #ffffff;outline-offset:-5px}

.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--bg-soft);border-color:var(--fg);color:var(--fg)}
.btn--ghost:active{background:var(--line);border-color:var(--fg);color:var(--fg)}
.btn--ghost:focus-visible{outline-color:var(--fg)}

.btn--sm{padding:11px 16px}
.btn--lg{font-size:.95rem;padding:16px 26px}

/* ---------- theme toggle ----------
   Last item in the header, after the button. It is a convenience, not a
   destination, so it is drawn small and without a box: an outlined square gave
   it the same visual weight as the call to action. */
.theme-toggle{
  flex:0 0 auto;width:30px;height:30px;margin-left:14px;
  border:0;border-radius:var(--r-btn);
  background:transparent;color:var(--faint);cursor:pointer;
  display:grid;place-items:center;padding:0
}
.theme-toggle:hover{color:var(--fg)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
/* 4.26: the icon shows the mode a click switches to (Denys, 35A):
   a moon in light mode, a sun in dark mode */
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}

.nav-burger{
  display:none;width:46px;height:46px;margin-left:auto;
  border:1px solid var(--line-strong);border-radius:var(--r-btn);
  background:transparent;color:var(--fg);cursor:pointer;padding:0
}
.nav-burger svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;margin:auto}

@media (max-width:1160px){
  .nav{gap:14px;height:92px}
  .brand img{height:52px}
  .nav-burger{display:grid;place-items:center}
  .nav-links{
    position:absolute;top:calc(100% + 12px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);
    box-shadow:var(--shadow);padding:16px;display:none;margin-left:0
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 16px;font-weight:400}
  .nav-links a[aria-current="page"]::after{display:none}
  .nav-links a[aria-current="page"]{background:var(--bg-soft)}
  .nav-links .btn{margin:10px 0 0}
  .theme-toggle{
    width:auto;height:auto;margin:6px 0 0;padding:13px 16px;
    justify-content:flex-start;grid-auto-flow:column;gap:12px;
    font:inherit;font-weight:500;border:0
  }
  .theme-toggle::after{content:"Switch theme";color:var(--muted)}
}

/* ---------- hero ---------- */
.hero{padding:76px 0 88px}
/* Three short lines, so the measure is set by the longest of them and the
   breaks are authored rather than accidental. */
/* The three lines are authored with <br>. Without this the longest of them
   wraps again in the narrow left column and the headline becomes four or five
   lines. nowrap still honours the <br>, so it only stops the accidental wrap.
   Denys, 23 September 2026: it should always be three lines. */
.hero h1{max-width:none;margin-bottom:26px;white-space:nowrap}
/* On the narrowest phones the longest line fills the column exactly, so it
   comes down one notch to keep a margin rather than risk a clipped word. */
@media (max-width:400px){.hero h1{font-size:2.2rem}}
/* Deliberately narrower than the site measure, and the only paragraph on the
   site that is. The homepage opener is meant to hit hard and stop, so it is
   held to 50 characters while everything else runs to --measure. */
.hero .lede{max-width:50ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

/* the illustrative panel beside the hero */
.panel{
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--card);box-shadow:var(--shadow);overflow:hidden
}
.panel__bar{
  display:flex;align-items:center;gap:10px;padding:16px 20px;
  border-bottom:1px solid var(--line);background:var(--bg-soft);font-weight:500
}
.panel__dot{width:10px;height:10px;border-radius:var(--r-pill);background:var(--c4);flex:none}
.panel__rows{padding:4px 20px 12px}
.panel__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--line)
}
.panel__row:last-child{border-bottom:0}
.panel__row span:first-child{color:var(--muted)}
.panel__row span:last-child{font-weight:500;text-align:right}

/* ---------- grids ---------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--card);padding:30px
}
.card h3{margin-bottom:12px}
.card p{color:var(--muted);margin-bottom:0;line-height:1.56}
/* The icon sits where the coloured bar used to, so the card keeps its rhythm. */
.card__ico{display:block;color:var(--accent);line-height:0;margin:0 0 18px}
.card__ico svg{width:38px;height:38px;display:block}
.bar{width:32px;height:4px;border-radius:2px;background:var(--accent);margin:0 0 22px;
  box-shadow:inset 0 0 0 1px var(--key-line)}.bar--2{background:var(--c2)}
.bar--3{background:var(--c3)}.bar--4{background:var(--c4)}
@media (max-width:960px){
  .range__row{grid-template-columns:16px 1fr;gap:16px}
  .range__row > :nth-child(3),.range__row > :nth-child(4){grid-column:2}
  .range__row > :nth-child(4){margin-top:8px}
}
@media (max-width:800px){.step{grid-template-columns:1fr;gap:14px}}

/* ---------- definition rows ---------- */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:.72fr 1.28fr;gap:36px;
  padding:26px 0;border-bottom:1px solid var(--line)
}
.row > :first-child{font-weight:500}
.row p{margin:0;color:var(--muted);line-height:1.56}
@media (max-width:760px){.row{grid-template-columns:1fr;gap:8px}}

/* ---------- pull statement and closing band ---------- */
/* The pull statement.
   It was Ink at heading size with an orange rule, which made it the same
   size, weight and colour as the h2 above it: only a 3px rule separated a
   heading from a quotation. Colour is what tells them apart now. Midnight
   Blue also puts it back inside the colour rule, which reserves Sovereign
   Orange for buttons, the one diagram highlight, key figures and the active
   navigation marker. A pull statement is none of those.
   The size stays at --t-head. Shrinking it would read better still, but it
   would be a fourth type size and the site allows three. */
.statement{
  border-left:3px solid var(--blue);padding:6px 0 6px 28px;margin-left:34px;
  color:var(--blue);
  font-size:var(--t-head);font-weight:500;letter-spacing:-.025em;
  line-height:1.2;max-width:32ch
}
@media (max-width:560px){.statement{margin-left:0;padding-left:20px}}

/* The inline CLUSA wordmark inside a .statement. The viewBox is 1184 tall
   with the cap band running 0 to 1000, so cap height is 1000/1184 of the
   rendered height and the baseline sits 92.2% down. To land the wordmark's
   caps on the text's cap height, the svg is drawn at 1.184 x the cap height
   of the surrounding type, then nudged down by the remainder below its own
   baseline. Letter-spacing is switched off around it: the mark carries its
   own spacing from the brand pack. */
.wm-inline{
  height:.84em;width:auto;display:inline-block;
  vertical-align:baseline;position:relative;top:.07em;
  margin:0 .12em
}

.cta-band{
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--card);padding:56px 52px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap
}
/* Narrower than --measure on purpose. The band is text on the left and a
   button on the right sharing one row, so past about 60 characters the text
   pushes the button onto its own line and the band changes shape. The button
   is the constraint here, not the reading. */
.cta-band h2{margin:0 0 12px;max-width:30ch}
.cta-band p{margin:0;color:var(--muted);max-width:60ch}
/* Below this the wider text would push the button onto its own line earlier
   than it used to, so the text narrows instead and the button keeps its place
   down to the same width as before. */
@media (max-width:1100px){
  .cta-band h2{max-width:19ch}
  .cta-band p{max-width:42ch}
}
@media (max-width:800px){.cta-band{padding:38px 28px}}

/* ---------- the five steps as a wheel ----------
   A picture of the list below it, not a replacement. Below 760px the labels
   would be too small to read, so the wheel goes and the list carries on. */
.wheel-wrap{margin:0;display:flex;justify-content:center}
.wheel{width:100%;height:auto;display:block}
/* The wheel carries the same words as the list. Whichever one is readable at
   this width is the one shown, never both. */
/* the same six cards stacked, for widths where the drawing cannot be read */
.flow{display:flex;flex-direction:column;align-items:stretch;text-align:left}
.flow__card{
  border:1px solid var(--line);border-radius:16px;background:var(--card);padding:22px 22px 24px
}
.flow__card--customer{background:var(--accent);border-color:var(--accent);text-align:center;padding:26px 22px}
.flow__title{
  margin:0 0 8px;color:#fff;font-weight:500;font-size:var(--t-head);letter-spacing:.06em
}
.flow__note{margin:0;color:#fff;opacity:.94;max-width:none}
.flow__head{
  margin:0 0 10px;font-weight:500;display:flex;align-items:center;gap:12px;max-width:none
}
.flow__num{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-size:16px;line-height:1
}
.flow__body{margin:0;color:var(--muted);max-width:none}
.flow__arrow{
  width:24px;height:46px;display:block;margin:12px auto;fill:var(--accent);flex:0 0 auto
}
@media (min-width:901px){.flow{display:none}}
@media (max-width:900px){.wheel-wrap{display:none}}
/* The mark carries black, which disappears on a dark ground, so there are two
   files and the theme picks one. */
.wheel__mark--dark{display:none}
[data-theme=dark] .wheel__mark--light{display:none}
[data-theme=dark] .wheel__mark--dark{display:block}

/* ---------- quotes, the things people say ----------
   Six cards on a three by two grid. Six divides by three and by two, so the
   block stays a clean rectangle at every width instead of wrapping ragged.
   The icon carries the brand orange, the sentence stays plain text. */
.quotes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding:0;margin:34px 0 0;list-style:none;max-width:none
}
.quotes .quote{
  display:block;margin:0;background:var(--bg);
  border:1px solid var(--line);border-radius:14px;
  padding:24px 24px 26px;line-height:1.5
}
.quote__ico{display:block;color:var(--accent);line-height:0;margin-bottom:14px}
.quote__ico svg{width:34px;height:34px;display:block}
@media (max-width:880px){.quotes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .quotes{grid-template-columns:1fr;gap:12px}
  .quotes .quote{padding:20px}
  .quote__ico svg{width:28px;height:28px}
}

/* ---------- contact ----------
   One job, one screen. The headline drops to heading size because a form page
   does not need a billboard, and the details sit beside the form rather than
   under it, so the page stops at roughly 700px instead of 1780. */
.contact{padding:46px 0 58px}
.contact__head{max-width:60ch;margin:0 0 28px}
.contact__head h1{font-size:var(--t-head);margin:0 0 10px}
.contact__head p{color:var(--muted);margin:0;max-width:56ch}
.contact__head .kicker{margin:0 0 18px}
.contact__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:stretch}
/* the right column holds the details at the top and the closing line below,
   and the line grows to fill what is left so the column ends level with the form */
.caside{display:flex;flex-direction:column;gap:32px}
.contact .form{gap:14px;max-width:none}
.contact .field{gap:6px}
.contact .field input,.contact .field select{padding:11px 13px}
.contact .field textarea{padding:11px 13px;min-height:104px}
.contact .btn{padding:13px 26px}
.contact .micro{margin:0}
/* Two short fields on one line. Together they read as one question, and a name
   box the width of the column looks like a mistake. */
.fieldpair{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.cpanel{border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px;background:var(--bg-soft)}
.cdetail{display:grid;gap:16px;margin:0}
/* The contact band as a two-column table: label left, value right, both
   columns aligned so the eye can run down either one. */
.band-dl{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:26px;row-gap:8px;margin:0;align-items:baseline
}
.band-dl dt{color:var(--muted);font-size:.92rem}
.band-dl dd{margin:0}
.band-dl dd a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)}
.band-dl dd a:hover{border-bottom-color:var(--accent)}
@media (max-width:520px){.band-dl{column-gap:16px}}

/* The letterhead line: three place names, nothing claimed about any of them. */
.places{
  margin:0 0 20px;color:var(--muted);
  font-size:.82rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase
}
.citem a{display:block}
.citem{display:flex;gap:12px;align-items:flex-start}
.citem svg{width:22px;height:22px;color:var(--accent);flex:0 0 auto;margin-top:3px}
.citem b{display:block;font-weight:500;line-height:1.35}
.citem span,.citem a{color:var(--muted);text-decoration:none}
.citem a{text-decoration:underline}
.cline{
  flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  margin:0;max-width:none;color:#fff;background:#17365D;border-radius:14px;
  padding:28px 24px;font-weight:500;line-height:1.16;letter-spacing:-.02em;
  /* Derived from the heading size rather than set independently, so it still
     moves with the scale. Reduced so on-premise never has to break. */
  font-size:calc(var(--t-head) * .76)
}
/* The text is wrapped in one span so the flex box has a single child. Left
   bare, the nowrap phrase below becomes a second flex item and lands beside
   the sentence instead of inside it. */
.cline > span{display:block}
/* the hyphen in on-premise is a legitimate break point, and browsers take it */
.nobr{white-space:nowrap}
@media (max-width:820px){
  .contact__grid{grid-template-columns:1fr;gap:34px}
  .caside{gap:24px}
  /* it stops growing here, so a phone never gets a wall of orange */
  .cline{flex:0 0 auto;font-size:var(--t-body);padding:22px}
}
@media (max-width:600px){.fieldpair{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.form{display:grid;gap:20px;max-width:640px}
.field{display:grid;gap:8px}
.field label{font-weight:500}
.field input,.field textarea,.field select{
  font:inherit;color:var(--fg);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:var(--r-btn);padding:14px 16px;width:100%
}
.field textarea{min-height:170px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-btn);padding:18px 20px;margin-bottom:28px
}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:72px 0 38px}
/* Five columns now: the brand block plus the header's four groups. The brand
   block keeps more width because it carries the lockup, the sentence and the
   contact details. */
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:36px}
/* brand block on its own row, then the three link columns side by side */
@media (max-width:1080px){.footer-grid{grid-template-columns:1fr 1fr 1fr;gap:34px}.footer-grid > div:first-child{grid-column:1 / -1}}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-logo{height:58px;width:auto;margin-bottom:26px}
.footer-logo.logo-dark{display:none}
[data-theme="dark"] .footer-logo.logo-light{display:none}
[data-theme="dark"] .footer-logo.logo-dark{display:block}
/* these were <h4> under an <h2>, which skips a heading level for anyone
   reading with a screen reader. They are column labels, not headings, so
   they are now paragraphs and the look is unchanged. */
.site-footer .footer-h{
  text-transform:uppercase;
  color:var(--faint);margin:0 0 16px;font-weight:500;
  font-size:var(--t-micro);letter-spacing:.13em;line-height:1.4
}
.site-footer ul{list-style:none;padding:0;margin:0;max-width:none}
.site-footer li{margin-bottom:12px}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer li,.footer-bottom{font-size:var(--t-small)}
.site-footer a:hover{color:var(--fg)}
/* Kept narrower than its own column on purpose. Reviewed August 2026 and left
   as it was. */
.site-footer p{color:var(--muted);max-width:32ch}
/* the contact details sit under the brand sentence rather than in a column of
   their own: they are how you reach us, not a section of the site */
.footer-contact{margin-top:22px}
.footer-contact li{margin-bottom:10px}
.footer-bottom{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:48px;padding-top:24px;
  color:var(--faint)
}
.footer-bottom a{color:var(--faint)}
.footer-bottom a:hover{color:var(--fg)}

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:22px 26px;display:none;
  max-width:var(--maxw);margin:0 auto
}
.cookie.show{display:block}
.cookie-inner{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie p{margin:0;color:var(--muted);max-width:var(--measure)}
.cookie-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- misc ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{
  left:16px;top:16px;background:var(--accent);color:#fff;padding:13px 20px;
  border-radius:var(--r-btn);z-index:100
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- the stack ----------
   Five layers with one bar running under all of them. Cells reflow rather
   than shrink, because a drawn diagram at phone width becomes unreadable
   type. The bar is full width at every size, which is the point. */
.stack{margin:40px 0 0}
/* a centred flex wrap, not a grid: when the last row does not fill, the
   remaining cells sit in the middle rather than hanging off the left edge */
.stack__row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* The card is white on the soft ground, 1.07:1, so the box itself is invisible
   and the outline does all the work. At --line it measured 1.18:1, which is
   almost nothing. Midnight Blue at 30% takes it to 1.88:1 and ties the card to
   its own top rule rather than putting a grey box under a blue one. */
.stack__cell{
  flex:0 0 calc((100% - 40px) / 5);
  border:1px solid rgba(23,54,93,.30);border-top:3px solid #17365D;
  border-radius:10px;background:var(--card);padding:18px 14px;
  font-weight:500;line-height:1.32;text-align:center;
  display:flex;align-items:center;justify-content:center;min-height:76px
}
.stack__label{display:block}
/* Midnight Blue on the soft ground, with the same inset hairline the CLUSA
   row carries in the boundary diagram, so the two figures read as one system.
   Literal hex: --blue flips to a lifted blue under [data-theme="dark"] and
   this ground does not. */
.stack__bar{
  margin:0 0 10px;background:#17365D;color:#fff;border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(232,232,229,.55);
  padding:15px 20px;text-align:center;font-weight:500;max-width:none
}

/* Dark. Literal #17365D on a dark card measures 1.57:1, so the blue rule the
   light theme relies on all but disappears. The lifted blue takes it to
   3.65:1, and the outline follows it at 45%. */
[data-theme="dark"] .stack__cell{
  border-color:rgba(63,110,168,.45);border-top-color:#3f6ea8
}
[data-theme="dark"] .stack__bar{
  background:#17365D;box-shadow:inset 0 0 0 1px rgba(232,232,229,.34)
}
@media (max-width:900px){.stack__cell{flex:0 0 calc((100% - 20px) / 3)}}
@media (max-width:560px){
  .stack__cell{flex:0 0 calc((100% - 10px) / 2)}
  /* five cells, two to a row, so the fifth is alone. Give it the whole
     width rather than leaving it floating in the middle of the row. */
  .stack__cell:last-child:nth-child(odd){flex:0 0 100%}
}

/* ---------- the FAQ ----------
   Same rows as the legal notice, grouped under section titles. */
.faq-group{margin-top:28px}
.faq-group:first-of-type{margin-top:20px}
.faq-group__title{
  font-size:var(--t-small);text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);margin:0 0 6px
}
.faq-foot{margin-top:38px}

/* 4.14, 30 September 2026: compact, Denys's option 1B. Rows 33px, was 45px.
   One question at a time. The details elements share a name, so the browser
   closes whichever was open when another is clicked. No script. */
.faq-list{margin-top:10px;border-top:1px solid var(--line)}
.faq-q{border-bottom:1px solid var(--line)}
.faq-q summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  gap:12px;padding:5px 0;font-weight:500;line-height:1.35
}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary:hover{color:var(--accent)}
/* A plus that drops its upright when the question opens, so it reads as a
   minus. The horizontal bar never moves, which is what makes the change read
   as one mark changing state rather than two different icons. */
.faq-sign{
  width:16px;height:16px;flex:none;margin-top:3px;color:var(--faint);
  stroke:currentColor;stroke-width:2.2;stroke-linecap:round;fill:none
}
.faq-sign__v{transform-origin:12px 12px;transition:transform .18s ease}
.faq-q[open] .faq-sign{color:var(--accent)}
.faq-q[open] .faq-sign__v{transform:scaleY(0)}
.faq-q[open] summary{padding-bottom:6px}
.faq-a{padding:0 0 12px 28px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.faq-sign__v{transition:none}}
.faq-a p{margin:0 0 .8em;max-width:none}
.faq-a p:last-child{margin-bottom:0}

/* ---------- legal notice ----------
   The same shape as the row lists elsewhere on the site: label on the left,
   the obligation on the right, a hairline between each. A reader hunting for
   one clause runs down the left edge instead of down a wall of prose. */
.legal{padding:44px 0 56px}
.legal h1{font-size:var(--t-head);margin:0 0 8px}
.legal .lede{margin:0}
.legal__rows{margin-top:30px;border-top:1px solid var(--line)}
.legal__row{
  display:grid;grid-template-columns:210px 1fr;gap:28px;
  padding:22px 0;border-bottom:1px solid var(--line)
}
.legal__row h2{font-size:var(--t-body);margin:0}
.legal__row p{margin:0 0 .8em;max-width:none}
.legal__row p:last-child{margin-bottom:0}
@media (max-width:760px){.legal__row{grid-template-columns:1fr;gap:8px}}

/* ---------- the range, with product photography ---------- */
/* One transparent image per product, and the panel supplies the ground, so the
   same file serves light and dark and nothing has to be shipped twice. */
.stage{
  aspect-ratio:16/10;overflow:hidden;display:grid;place-items:center;padding:11%;
  background:radial-gradient(ellipse 78% 74% at 50% 46%,var(--stage-hi),var(--stage-lo))
}
.stage img{
  /* a grid item defaults to min-height:auto, which refuses to shrink below the
     picture's own size and lets a tall product break out of the panel */
  max-width:100%;max-height:100%;width:auto;height:auto;min-width:0;min-height:0;
  display:block;filter:drop-shadow(0 9px 11px var(--stage-shadow))
}

/* The five cards share one row grid, so the picture, the name, the situation,
   the seat count and the description each start on the same line in every
   card however long the text above them runs. Without this the situation
   line, which is three to five lines depending on the size, pushed everything
   below it out of step across the row. Browsers without subgrid fall back to
   the old stacking, which still fills the row, just unaligned. */
.lineup{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:36px;
  grid-template-rows:auto auto auto auto auto
}
.lineup__item{
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--card);overflow:hidden;
  display:grid;grid-row:span 5;grid-template-rows:subgrid
}
.lineup__body{
  display:grid;grid-row:span 4;grid-template-rows:subgrid;
  padding:15px 13px 17px
}
@supports not (grid-template-rows:subgrid){
  .lineup__item{display:flex;flex-direction:column}
  .lineup__body{display:block}
}
/* 4.19, Denys: no colour squares; the product name is the card's title, bold
   and a step larger. The one bold text below the hero, on purpose. */
.lineup__name{
  font-weight:700;font-size:1.25rem;line-height:1.25;letter-spacing:-.015em;margin:0 0 10px
}
.lineup__key{width:16px;height:16px;border-radius:4px;flex:none;
  box-shadow:inset 0 0 0 1px var(--key-line)}
/* Situation leads, seat count second. Both sit above the description. */
.lineup__who{color:var(--fg);font-weight:500;margin:0 0 8px;line-height:1.4}
.lineup__seats{color:var(--faint);font-weight:500;margin:0 0 10px}
.lineup__note{color:var(--muted);margin:0;line-height:1.5}
@media (max-width:1080px){.lineup{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.lineup{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.lineup{grid-template-columns:1fr}}
@media (max-width:820px){.strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.strip{grid-template-columns:repeat(2,1fr)}}
/* Only spill past the prose column where there is room beside it. Below this
   the wrap has no spare space either side and the negative margin pushed the
   page sideways. */
@media (min-width:900px){
  .diagram-wrap{margin-left:calc(-1 * clamp(0px, 5vw, 6rem));
                margin-right:calc(-1 * clamp(0px, 5vw, 6rem))}
}
@media (max-width:640px){
  .d-title{font-size:26px}
  .d-line{font-size:19px}
  .d-note,.d-head{font-size:17px}
}

/* The calls to action gained longer, more descriptive labels. On a narrow
   phone those no longer fit on one line, and nowrap pushed the page sideways,
   so below this width they are allowed to wrap and centre. */
@media (max-width:420px){
  .btn--lg{white-space:normal;text-align:center;line-height:1.25;padding:14px 20px}
}
@media (max-width:900px){
  .figure--wide{width:100%;margin-left:0;transform:none}
}
@media (min-width:661px){
  .grid--paired{row-gap:26px;align-items:start}
  .grid--paired > *:nth-child(1){grid-column:1;grid-row:1}
  .grid--paired > *:nth-child(2){grid-column:1;grid-row:2}
  .grid--paired > *:nth-child(3){grid-column:2;grid-row:1}
  .grid--paired > *:nth-child(4){grid-column:2;grid-row:2}
}
@media (max-width:660px){
  .grid--paired{gap:20px}
}

/* row list, tightened and given an icon
   ------------------------------------------------------------------
   The rows carried 26px of padding above and below, so between two lines
   of text there were 52px of nothing. The hairline rule is what separates
   one item from the next, not the space, so the space could go.
   The label column was also mostly empty on the left. The icon fills it,
   which is why the column can stay wide without looking abandoned. */
.rows .row{padding:14px 0}
.row > :first-child{display:flex;align-items:center;gap:22px}
.row__ico{flex:0 0 auto;color:var(--accent);line-height:0}
.row__ico svg{width:44px;height:44px;display:block}
@media (max-width:760px){
  .row > :first-child{gap:16px}
  .row__ico svg{width:34px;height:34px}
}

/* ---------- founders ---------- */
/* Photo beside the text, not above it: the two supplied portraits are small,
   so they are shown at 88px and never scaled up beyond their own pixels. */
/* THE TEAM
   The photograph sits beside the name, and the biography runs the full width
   of the card underneath. The role and the region share a line; below 660px
   the region drops to its own line, where a wrapped role reads as a mistake. */
.person{display:block}
.person__top{display:flex;align-items:center;gap:16px}
.person__photo{
  width:104px;height:104px;border-radius:8px;
  object-fit:cover;flex:0 0 auto;border:1px solid var(--line)
}
.person__id{min-width:0}
.person__id h3{margin:0 0 6px;color:var(--blue);letter-spacing:-.02em;line-height:1.2}
/* .card p paints every paragraph inside a card muted, and it outranks a
   single class, which is why this line has always rendered grey. */
.person .person__role{
  color:var(--accent);font-weight:500;font-size:.9rem;
  margin:0;line-height:1.4
}
.person__where{white-space:nowrap}
.person__where::before{content:"\00B7";margin:0 .45em}
.person__bio{margin:16px 0 0;color:var(--muted);line-height:1.56}
@media (max-width:660px){
  .person__where{display:block}
  .person__where::before{content:none}
}

/* The palette gives four colours with enough separation on both grounds
   (Cloud Grey, Muted Green, Midnight Blue, Sovereign Orange). Ink is the
   fifth in light mode; on the dark ground it would have to invert to white
   and collide with the Cloud Grey key, so there it becomes a ring instead.
   A shape, not a sixth colour. */
[data-theme="dark"] .key--c5{
  background:transparent!important;
  box-shadow:inset 0 0 0 2px var(--fg)
}


/* ---------- navigation groups ----------
   Four groups, each a details element, so the dropdown opens with no
   JavaScript and closes on Escape for free. The marker is suppressed because
   the chevron carries that job. On narrow screens the whole header collapses
   into the burger panel and the groups become plain open lists: a dropdown
   inside a dropdown is a menu nobody can use with a thumb. */
/* A nav group with no sub-items is a plain link, not a details element.
   Same metrics as a summary so the bar does not shift. */
.navlink{
  position:relative;text-decoration:none;white-space:nowrap;
  font-size:var(--t-small);font-weight:400;letter-spacing:0;color:var(--muted);
  padding:10px 12px;border-radius:var(--r-btn)
}
.navlink:hover{color:var(--fg);background:var(--bg-soft)}
.navlink--here,.navlink[aria-current="page"]{color:var(--fg);font-weight:500}
.navlink--here::after,.navlink[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;
  height:2px;background:var(--accent);border-radius:2px
}

.navgroup{position:relative}
.navgroup summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  font-weight:600;color:var(--muted);
  padding:10px 12px;border-radius:var(--r-btn)
}
.navgroup summary::-webkit-details-marker{display:none}
.navgroup summary:hover{color:var(--fg);background:var(--bg-soft)}
.navgroup[open] summary{color:var(--fg)}

/* the group holding the page in view keeps the orange marker the flat links
   used to have, so a reader still knows where they are two clicks in */
.navgroup[data-here] summary{color:var(--fg)}
.navgroup[data-here] summary::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;
  height:2px;background:var(--accent);border-radius:2px
}

@media (max-width:1160px){
  .navgroup{position:static}
  .navgroup summary{
    pointer-events:none;
    font-size:1rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--faint);padding:16px 16px 6px
  }
  .navgroup summary:hover{background:transparent}
  .navgroup .chev{display:none}
  .navgroup[data-here] summary::after{display:none}
  .navmenu{
    position:static;border:0;box-shadow:none;background:transparent;
    padding:0;min-width:0
  }
}


/* ---------- hero proof points ----------
   4.9: a centred row of three under the hero, each with an orange line icon
   and no rules. Denys, 24 September 2026, with the Zylon home page as the
   reference. From 4.2 to 4.8 they sat in the right of the hero as a stacked
   list divided by hairlines, which he no longer liked. The hero text above
   stays left-aligned; only this row is centred. One column on a phone. */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:84px;text-align:center}
.proof__i{display:flex;flex-direction:column;align-items:center}
.proof__ico{display:block;color:var(--accent);line-height:0}
.proof__ico svg{width:40px;height:40px;display:block}
.proof__t{margin:18px 0 8px;color:var(--fg);font-size:1.1875rem;font-weight:500;letter-spacing:-.005em}
.proof__b{margin:0;color:var(--muted);font-size:.97rem;line-height:1.5;max-width:30ch}
@media (max-width:860px){.proof{grid-template-columns:1fr;gap:36px;margin-top:56px}}
/* ============================================================
   v2 components
   ============================================================ */

/* ---------- tick lists ----------
   Used by the cloud-versus-CLUSA framework. The two columns are told apart by
   the colour of the marker, not by the weight of the box around them:
   Midnight Blue for the cloud column, Muted Green for ours. */
.ticks{list-style:none;padding:0;margin:0;max-width:none}
.ticks li{
  position:relative;padding-left:26px;margin-bottom:12px;
  color:var(--muted)
}
.ticks li:last-child{margin-bottom:0}
.ticks li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:10px;height:10px;border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--key-line)
}
.ticks--blue li::before{background:var(--blue)}
/* The positive column is marked in Sovereign Orange. This widens the accent
   rule, which previously covered buttons, one diagram highlight, key figures
   and the active navigation marker. Muted Green is no longer used anywhere. */
.ticks--green li::before{background:var(--orange)}

/* ---------- statistics ----------
   Quiet evidence, not marketing fireworks. The figure is the one place on the
   page besides the buttons where Sovereign Orange is allowed. */
/* The three columns share one row grid, so the label, the figure, the claim,
   the source and the URL each begin on the same line across all three however
   long the claim above them runs. */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  grid-template-rows:auto auto auto auto auto
}
.stats .stat{display:grid;grid-row:span 5;grid-template-rows:subgrid}
@supports not (grid-template-rows:subgrid){
  .stats .stat{display:block}
}
@media (max-width:860px){
  .stats{grid-template-columns:1fr;gap:26px;grid-template-rows:none}
  .stats .stat{display:block;grid-row:auto}
}
.stat{border-top:3px solid var(--accent);padding-top:20px}
/* The theme, before the number. A reader meets the subject first and the
   figure second, which is the order they actually read in. Body size, so the
   page still uses only three type sizes. */
.stat__label{
  font-size:var(--t-small);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg);margin:0 0 12px;line-height:1.3;
  align-self:start
}
.stat__n{
  font-size:var(--t-head);font-weight:500;letter-spacing:-.025em;
  line-height:1.1;margin:0 0 12px;color:var(--accent)
}
/* Three steps, separated by colour, weight and space so they do not run
   together: the claim in Ink, the source in muted bold, the URL in muted
   regular. --faint would separate them further but measures 3.80:1 on this
   ground, under the 4.5:1 minimum for body text, so weight carries the last
   step instead of colour. */
.stat p{margin:0}
.stat__claim{color:var(--fg);margin:0 0 26px!important;align-self:start}
.stat__src{color:var(--muted)!important;font-weight:500;margin:0 0 10px!important}
/* The URL is printed, not linked: a reader can copy it to check the claim
   without being sent off the site. Long paths break rather than overflow. */
.stat__url{
  color:var(--muted);font-weight:400;margin:0!important;
  overflow-wrap:anywhere;word-break:break-word
}
@media (max-width:900px){.steps--row{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:560px){.steps--row{grid-template-columns:1fr}}

/* ---------- flow, not slides ----------
   The first build of this page read as a deck: every section was a kicker, a
   headline, a lede, a grid of bordered boxes and a button, eleven times over.
   These three rules are the antidote. A measure column so prose reads as
   prose, a split with a rule instead of two cards, and route links that look
   like links rather than another row of panels. */
.measure{max-width:var(--measure)}
.measure h2{margin-bottom:22px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.split > div{padding:0 46px}
.split > div:first-child{padding-left:0;border-right:1px solid var(--line)}
.split > div:last-child{padding-right:0}
.split__h{
  font-weight:500;color:var(--fg);margin:0 0 18px;
  letter-spacing:-.01em
}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:34px}
  .split > div{padding:0}
  .split > div:first-child{
    border-right:0;border-bottom:1px solid var(--line);padding-bottom:34px
  }
}


/* ============================================================
   v4.0, 17 September 2026
   ============================================================ */

/* the menu item for the technical reader sits apart, behind a hairline */
.navlink--it{margin-left:10px;color:var(--blue)}
.navlink--it::before{
  content:"";position:absolute;left:-6px;top:6px;bottom:6px;width:1px;background:var(--line-strong)
}
.nav-links a.navlink--it{color:var(--blue)}
[data-theme="dark"] .nav-links a.navlink--it{color:var(--fg)}
@media (max-width:1160px){
  .navlink--it{margin-left:0;margin-top:8px;border-top:1px solid var(--line);border-radius:0}
  .navlink--it::before{display:none}
}

.head .kicker--accent{color:var(--accent)}
.head--wide{max-width:none}
.head--wide p:not(.kicker){max-width:var(--measure)}

/* home, the one picture */
/* The building picture, moved off the home page hero in 4.2. It now sits in
   the Product page comparison, centred in the column rather than hung on the
   right of a two-column grid. */
.pic-band{max-width:560px;width:100%;margin:46px auto 0}
.hero-pic{max-width:560px;width:100%;justify-self:end}
@media (max-width:1000px){.hero-pic{justify-self:start;max-width:520px}}
.pic{width:100%;height:auto;display:block}
.pic text{font-family:inherit}
.pic__mut{fill:var(--muted);font-size:14.5px}
.pic__acc{fill:var(--accent);font-weight:500;font-size:17px}
.pic__cap{fill:var(--fg);font-weight:500;font-size:14px;letter-spacing:.14em}
.pic__lab{fill:var(--fg);font-weight:500;font-size:14.5px}
.pic__lab--s{font-size:13px}
.pic__lab--on{fill:#ffffff}
/* on a phone the drawing is about 300px wide, so every label is set larger
   and the two long ones break onto two lines */
.pic--m{display:none}
@media (max-width:600px){
  .pic--d{display:none}
  .pic--m{display:inline}
  .pic__mut{font-size:18px}
  .pic__acc{font-size:21px}
  .pic__cap{font-size:17px}
  .pic__lab{font-size:18px}
}

/* home, the three quotes and the line that answers them */
@media (max-width:880px){.quotes--3{grid-template-columns:1fr}}
.quotes-after{margin:34px 0 0;font-weight:500;color:var(--blue);font-size:var(--t-body);max-width:none}
[data-theme="dark"] .quotes-after,[data-theme="dark"] .brandline{color:var(--fg)}

/* home, what your team does: the captures and the task list */
.cap2{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:center;margin-top:40px}
@media (max-width:960px){.cap2{grid-template-columns:1fr;gap:34px}}
.shots__frame{
  /* the shape of the chat captures, 1600 by 769, so a whole capture shows */
  position:relative;aspect-ratio:1600/769;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-strong);background:#1c1c20;
  box-shadow:0 18px 40px rgba(12,12,14,.16)
}
.shots__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;
  opacity:0;transition:opacity .5s ease
}
.shots__img.is-on{opacity:1}
.shots__nav{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:18px}
.shots__nav[hidden]{display:none}
.shots__dots{display:flex;gap:2px;align-items:center}
.shots__dot{
  width:24px;height:24px;padding:0;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center
}
.shots__dot::before{
  content:"";width:8px;height:8px;border-radius:4px;background:var(--line-strong);
  transition:width .25s ease,background .25s ease
}
.shots__dot.is-on::before{width:22px;background:var(--accent)}
.shots__ar{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--fg);font-size:24px;line-height:1;padding:0 0 3px;
  margin:0 8px;cursor:pointer
}
.shots__ar:hover,.shots__pause:hover{background:var(--bg-soft)}
.shots__pause{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--fg);padding:0;margin:0 0 0 4px;cursor:pointer;
  display:flex;align-items:center;justify-content:center
}
.shots__pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.shots__pause .i-play{display:none;fill:currentColor;stroke-linejoin:round;stroke-width:1.5}
.shots__pause[data-paused] .i-pause{display:none}
.shots__pause[data-paused] .i-play{display:block}
.shots__pause:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shots__ar:focus-visible,.shots__dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.shots__img{transition:none}}
.tasklist{list-style:none;margin:0;padding:0;max-width:none}
.tasklist li{padding:15px 0;border-bottom:1px solid var(--line);margin:0;color:var(--muted)}
.tasklist li:first-child{padding-top:0}
.tasklist b{color:var(--fg)}

/* home, the brand line above the closing box */
.brandline{
  font-size:var(--t-head);font-weight:500;color:var(--blue);margin:0 0 40px;
  letter-spacing:-.025em;line-height:1.15;max-width:none
}

/* product, how it works: three steps in a row */
.hsteps{list-style:none;margin:40px 0 0;padding:0;max-width:none;display:grid;grid-template-columns:repeat(3,1fr)}
.hsteps li{position:relative;padding:0 32px 0 0;margin:0}
.hsteps__n{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--fig-fill);color:#ffffff;font-weight:500;position:relative;z-index:1;margin-bottom:18px;
  box-shadow:0 0 0 1px var(--fig-stroke)
}
.hsteps li::before{content:"";position:absolute;top:20px;left:40px;right:0;height:2px;background:var(--line-strong)}
.hsteps li:last-child::before{display:none}
.hsteps h3{margin:0 0 8px}
.hsteps p{margin:0 0 12px;color:var(--muted)}
.hsteps .hsteps__tag{font-weight:500;color:var(--accent);margin:0}
@media (max-width:800px){
  .hsteps{grid-template-columns:1fr;gap:30px}
  .hsteps li{padding:0 0 0 58px}
  .hsteps__n{position:absolute;left:0;top:0;margin:0}
  .hsteps li::before{top:40px;bottom:-30px;left:19px;right:auto;width:2px;height:auto}
}
.card .card__more{margin-top:14px}
.card .card__more a{font-weight:500;color:var(--blue)}
[data-theme="dark"] .card .card__more a{color:var(--fg)}
.honest{margin:44px 0 0;padding-top:28px;border-top:1px solid var(--line-strong);max-width:78ch;color:var(--muted)}
.honest b{color:var(--fg)}

/* sizes: the hero runs straight into the five cards */
.section--hero-tight{padding-bottom:10px}
.section--after-hero{padding-top:30px}

/* for IT teams: the way back for a reader who is not technical */
.wayback{margin:22px 0 0;color:var(--muted)}

/* investors: the five beats, the one dark band on the site */
/* 4.10, 24 September 2026: tightened to about 60% of its height (option 1B).
   Denys found the list too big. Smaller numbers and headings, the number on
   the heading's line, points closer together. Wording unchanged. */
/* v4.1: the black is a rounded card inside the page width, not a band across
   the window. On a wide screen the band filled the whole view. */
.story{color:#f3f3f5;padding:20px 0 70px}
.beats{list-style:none;margin:0;padding:34px 44px;max-width:none;background:#0c0c0e;border-radius:20px}
[data-theme="dark"] .beats{background:#000000;box-shadow:inset 0 0 0 1px var(--line-strong)}
.beat{
  display:grid;grid-template-columns:56px 1fr;gap:16px;padding:18px 0;margin:0;align-items:baseline;
  border-bottom:1px solid rgba(243,243,245,.16)
}
.beat:first-child{padding-top:0}
.beat--last{border-bottom:0;padding-bottom:0}
.beat__n{font-size:2.4rem;line-height:.9;font-weight:500;color:#fb5607;letter-spacing:-.04em}
.story .beat h2{margin:0 0 4px;color:#ffffff;font-size:1.45rem;line-height:1.2;letter-spacing:-.025em;max-width:none}
.story .beat--last h2{color:#fb5607}
.beat__p{margin:0;color:#d6d6db;font-size:1rem;line-height:1.55;max-width:70ch}
@media (max-width:760px){
  .story{padding:10px 0 50px}
  .beats{padding:26px 20px;border-radius:16px}
  .beat{grid-template-columns:44px 1fr;gap:12px;padding:16px 0}
  .beat__n{font-size:2rem}
  .story .beat h2{font-size:1.25rem}
  .beat__p{font-size:var(--t-body)}
}
.cta-band .cta-mail{margin-top:10px}
.cta-band .cta-mail a{font-weight:500;color:var(--blue)}
[data-theme="dark"] .cta-band .cta-mail a{color:var(--fg)}
.fine{margin:22px 0 0;color:var(--muted);max-width:none}


/* ============================================================
   v4.1, 17 September 2026
   ============================================================ */

/* Menu text is regular weight; the page in view is semi-bold. Each label
   carries a hidden semi-bold copy of itself, so an item is as wide as it
   will ever be and the menu does not shift from page to page. */
.nav-links a.navlink[aria-current="page"],.navlink--here{font-weight:500}
/* the button keeps the weight it had before the menu text went regular, and
   never takes the current-page marker: on Contact the marker made it wider */
.nav-links a.btn{font-weight:500}
.nav-links a.btn[aria-current="page"]::after{display:none}
.navlink__t{display:inline-flex;flex-direction:column;align-items:center}
.navlink__t::after{
  content:attr(data-t);font-weight:500;height:0;overflow:hidden;visibility:hidden;
  user-select:none;pointer-events:none
}
@media (max-width:1160px){.navlink__t{align-items:flex-start}}

/* founder names: the blue measured 3.7:1 on the dark card */
[data-theme="dark"] .person__id h3{color:var(--fg)}

/* the industries ticker: a way to stop it without a mouse */
.head--row{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:none}
.head--row h2{margin:0}
.tick-pause{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--fg);padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center
}
.tick-pause[hidden]{display:none}
.tick-pause:hover{background:var(--bg-soft)}
.tick-pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.tick-pause .i-play{display:none;fill:currentColor;stroke-linejoin:round;stroke-width:1.5}
.tick-pause[data-paused] .i-pause{display:none}
.tick-pause[data-paused] .i-play{display:block}
.tick-pause:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tick.is-paused .tick__track{animation-play-state:paused}

/* with Home the menu is one item longer: between the phone breakpoint and a
   full-width screen the items sit a little closer, so a wider system font
   still fits on one line */
@media (min-width:1161px) and (max-width:1320px){
  .navlink{padding-left:8px;padding-right:8px}
  .navlink::after,.navlink[aria-current="page"]::after{left:8px;right:8px}
  .nav-links .btn{margin-left:8px}
}
/* the theme switch in the phone menu follows the menu text */
@media (max-width:1160px){.theme-toggle,.theme-toggle::after{font-weight:400}}
/* investors, the card on a small phone: a narrower number column gives the
   sentences room */
@media (max-width:480px){
  .beat{grid-template-columns:34px 1fr;gap:10px}
  .beat__n{font-size:1.7rem}
}


/* ==== boundary, generated from _build/boundary.py, do not edit ==== */
/* ---------- the security boundary ---------- */
/* Two independent panels, so they stack on a phone rather than shrink. */
.bd-pair{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;margin-top:40px}
@media (max-width:900px){.bd-pair{grid-template-columns:1fr;gap:44px}}

.bd-cap{
  font-size:15px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:0
}
.bd-cap--blue{color:#E8E8E5}
/* The panel's own title. Set at 19px, the same size as the orange line, so the
   drawing still has three type sizes and not four. var(--fg) rather than a
   literal, because this one does want to flip: Ink on Paper, white on dark. */
.bd-title{
  font-size:19px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg);margin:0
}

/* Outside. A light ground with a Midnight Blue hairline, so it is a place
   rather than a gap in the page. */
.bd-out{
  background:var(--bg-soft);border:1px solid var(--blue);border-radius:12px;
  padding:14px 18px;margin-top:12px;text-align:center
}
.bd-out p{margin:6px 0 0;color:var(--muted);font-size:17px;max-width:none}

/* The route out. Two dashed segments with the cross set into the gap, so the
   line is broken by the cross rather than drawn under it.
   Three cells, the first empty. Wide, it is 1fr auto 1fr, which puts the line on
   the panel's centre line, under the middle of the box above and over the middle
   of the box below. Narrow, the first column collapses and the line moves left,
   because a centred line leaves too little room for the label beside it.
   The label sits hard against the line in both, so it reads as a caption on the
   route rather than as a sentence of its own. */
.bd-route{display:grid;grid-template-columns:0 auto 1fr;column-gap:12px;
  align-items:center;padding:18px 0 18px 13%}
@media (min-width:900px){
  .bd-route{grid-template-columns:1fr auto 1fr;column-gap:14px;padding-left:0}
}
.bd-rail{display:flex;flex-direction:column;align-items:center;gap:8px}
.bd-rail i{display:block;width:0;height:28px;border-left:3px dashed var(--line-strong)}
.bd-rail--shut i{border-left-color:var(--accent)}
.bd-x{width:30px;height:30px;flex:0 0 auto}
.bd-x path{fill:none;stroke-width:4;stroke-linecap:round}
.bd-x--soft path{stroke:var(--line-strong)}
.bd-x--hard path{stroke:var(--accent)}
/* The one line in the drawing that is allowed to shout. */
.bd-route p{margin:0;font-size:19px;font-weight:500;color:var(--accent);max-width:none;
  line-height:1.32}

/* The boundary. Ink ground, Cloud Grey boundary: Midnight Blue on Ink is
   1.60 to 1 and the palette forbids it.
   Literal hex, not var(--ink) and not var(--blue): both of those flip meaning
   under [data-theme="dark"], where --ink becomes near white. This ground is
   dark in both themes on purpose, so it cannot be written in theme tokens. */
.bd-env{
  border:2px dashed #E8E8E5;border-radius:16px;background:#0C0C0E;
  background-clip:padding-box;padding:20px
}

.bd-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#ffffff;border:1px solid var(--line);border-radius:10px;
  padding:16px 20px;margin-top:14px
}
.bd-row b{font-size:17px;font-weight:500;color:#0C0C0E}
.bd-row span{font-size:17px;color:#55555e}
.bd-row--gap{
  background:none;border:1.5px dashed #3a3a42;justify-content:center;
  color:#8e8e98;font-size:17px
}
/* Midnight Blue on Ink needs an edge or the box half disappears. */
.bd-row--clusa{
  background:#17365D;border-color:#17365D;
  box-shadow:inset 0 0 0 1px rgba(232,232,229,.55)
}
.bd-row--clusa span{color:rgba(255,255,255,.86);font-weight:500}
.bd-wm{height:20px;width:auto;display:block}

.bd-note{margin:16px 0 0;color:var(--muted);font-size:17px;max-width:none;
  text-wrap:normal}
/* Each sentence is an inline-block, so the note breaks between sentences and
   only inside one when that sentence will not fit a line of its own. */
.bd-note .ln{display:inline-block}

/* On a phone the two halves of a row cannot sit side by side and stay
   readable, so they stack and the row reads label then value. */
@media (max-width:560px){
  .bd-row{flex-direction:column;align-items:flex-start;gap:4px}
  .bd-row--gap{align-items:center}
}

/* Dark. Only two things change. The page is already near black, so the
   environment lifts off it rather than sinking into it, and the Outside
   hairline lightens because Midnight Blue disappears on a dark page.
   The rows are deliberately not touched: they sit on a dark ground in both
   themes, so they stay white in both. */
[data-theme="dark"] .bd-env{background:#17171C}
/* Outside cannot be a dark box on a dark page: it disappears, and it would
   also match the environment, which is the one thing it must not do. It goes
   to Cloud Grey with Ink type, so the two places stay opposites in both themes. */
[data-theme="dark"] .bd-out{background:#E8E8E5;border-color:#17365D}
/* The soft route is drawn in --line-strong, which on the dark page is #3a3a44
   and all but invisible. It lifts to a mid grey: enough to be seen, still weak
   enough that the orange line beside it wins, which is the whole point of it. */
[data-theme="dark"] .bd-rail i{border-left-color:#7C7C8A}
[data-theme="dark"] .bd-rail--shut i{border-left-color:var(--accent)}
[data-theme="dark"] .bd-x--soft path{stroke:#7C7C8A}
[data-theme="dark"] .bd-out .bd-cap{color:#55555E}
[data-theme="dark"] .bd-out p{color:#0C0C0E}
/* ==== end boundary ==== */

/* Midnight Blue on the near black ground is 1.55:1, so the panel needs an
   edge or it stops reading as a panel. */
[data-theme="dark"] .cline{box-shadow:inset 0 0 0 1px rgba(232,232,229,.34)}

/* The one place blue text appears. Midnight Blue is 1.55:1 on the dark ground
   and the palette has no on-dark blue, so the highlight takes Muted Green,
   6.43:1, rather than introducing a colour the pack does not hold. */
/* On dark, Midnight Blue text measures 1.55:1 and cannot be read. It was
   Muted Green; it is now Paper, which is the plainest thing that works.
   Light mode keeps Midnight Blue. */
[data-theme="dark"] .statement{color:#E8E8E5;border-left-color:#E8E8E5}

/* The band under the three team cards. Ink in both themes with paper text, so
   it reads as a closing statement rather than a fourth card. */
/* Literal hex, not --ink and --paper: both flip under [data-theme="dark"],
   which would give near-black text on a near-white band. This band is dark in
   both themes on purpose, so it takes a hairline on the dark page. */
.teamline{
  margin:12px 0 0;max-width:none;background:#0C0C0E;color:#E8E8E5;
  border-radius:var(--r-card);padding:22px 28px;font-weight:500;line-height:1.45;
  text-align:center;text-wrap:balance
}
[data-theme="dark"] .teamline{box-shadow:inset 0 0 0 1px rgba(232,232,229,.20)}
@media (max-width:560px){.teamline{padding:20px 20px}}

/* ============================================================
   HOW IT WORKS, the circle
   The customer sits at the top and never recedes. The middle rests on the
   promise and carries each step in turn, so nothing ever overlaps a box.
   Arrows are drawn by main.js, which measures every box: a fixed angular gap
   leaves a long arrow where two boxes stack and a stub where they sit side
   by side. Below 620px a tap fades the figure and the words come forward.
   ============================================================ */
.ring{
  position:relative;width:100%;max-width:640px;margin:40px auto 0;
  aspect-ratio:1/1;--ring-node:150px
}
.ring[hidden]{display:none}
.ring__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring__arc{fill:none;stroke:var(--fig-line);stroke-width:2.4;stroke-linecap:round;
  transition:opacity .3s ease}
.ring__head{fill:var(--fig-line);transition:opacity .3s ease}

.ring__node{
  position:absolute;left:50%;top:50%;width:var(--ring-node);
  transform:translate(-50%,-50%);
  padding:13px 10px;border:1px solid var(--fig-edge);border-radius:var(--r-card);
  background:var(--card);color:var(--fg);cursor:pointer;text-align:center;
  font:inherit;font-weight:500;font-size:15px;line-height:1.3;letter-spacing:-.01em;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease
}
.ring__node:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.ring__node.is-on{border-color:var(--fig-line);box-shadow:var(--shadow);
  transform:translate(-50%,-50%) scale(1.05)}

.ring__hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:216px;
  border-radius:var(--r-card);background:var(--fig-fill);color:#fff;text-align:center;
  box-shadow:inset 0 0 0 1px var(--fig-stroke);padding:17px 18px
}
.ring__hub-t{font-weight:500;letter-spacing:.13em;font-size:15px;margin:0 0 6px}
.ring__hub p{margin:0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.9)}

.ring__core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:300px;max-width:52%;text-align:center;pointer-events:none;z-index:1
}
.ring__layer{transition:opacity .26s ease, transform .26s ease}
.ring__layer.is-out{opacity:0;transform:translateY(-7px)}
.ring__rest{font-weight:500;font-size:21px;letter-spacing:-.01em;line-height:1.25;
  color:var(--blue)}
.ring__rest .mark{display:block;width:46px;height:auto;margin:0 auto 14px}
.ring__t{font-weight:500;font-size:17px;letter-spacing:-.01em;margin-bottom:8px}
.ring__b{color:var(--muted);font-size:14.5px;line-height:1.5;margin:0}

/* the stacked list keeps the words for search engines and for anyone
   without JavaScript. Once the circle is live it is taken out of the flow. */
.flow.is-source{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}

@media (max-width:620px){
  .ring{max-width:330px;--ring-node:100px;margin-top:30px}
  .ring__node{font-size:12.5px;padding:9px 5px}
  .ring__hub{width:142px;padding:11px 9px}
  .ring__hub-t{font-size:11.5px;margin-bottom:4px}
  .ring__hub p{font-size:10px;line-height:1.36}
  .ring__core{width:88%;max-width:none}
  .ring__rest{font-size:16px}
  .ring__rest .mark{width:34px;margin-bottom:10px}
  .ring__t{font-size:15px}
  .ring__b{font-size:13.5px}
  /* a tap fades the figure and brings the words forward as a card */
  .ring__node,.ring__hub,.ring__svg{transition:opacity .24s ease}
  .ring.is-open .ring__node,.ring.is-open .ring__hub,.ring.is-open .ring__svg{opacity:.12}
  .ring.is-open .ring__core{
    pointer-events:auto;cursor:pointer;z-index:6;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
    box-shadow:0 2px 6px rgba(12,12,14,.10), 0 18px 50px rgba(12,12,14,.18);
    padding:18px
  }
}
[data-theme="dark"] .ring.is-open .ring__core{
  box-shadow:0 2px 6px rgba(0,0,0,.5), 0 18px 50px rgba(0,0,0,.65)
}

/* ============================================================
   THE INDUSTRY TICKER
   The row is written twice and the track slides exactly half its width, so
   the loop closes with no jump. Hovering or tabbing in stops it, because a
   line that will not hold still cannot be read. Anyone who has asked their
   system for less motion gets the same words, wrapped and still.
   ============================================================ */
.tick{
  position:relative;overflow:hidden;width:100%;margin-top:34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)
}
.tick__track{display:flex;width:max-content;animation:tick 110s linear infinite}
.tick:hover .tick__track,.tick:focus-within .tick__track{animation-play-state:paused}
.tick__row{display:flex;align-items:center;white-space:nowrap}
.tick__item{
  display:inline-block;white-space:nowrap;font-weight:500;letter-spacing:-.01em;
  font-size:1.35rem;color:var(--blue)
}
.tick__dot{
  width:7px;height:7px;border-radius:50%;background:var(--line-strong);
  margin:0 30px;flex:0 0 auto;align-self:center
}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:620px){
  .tick__item{font-size:1.15rem}
  .tick__dot{margin:0 20px}
}
@media (prefers-reduced-motion:reduce){
  .tick{-webkit-mask-image:none;mask-image:none}
  .tick__track{animation:none;width:100%}
  .tick__row{flex-wrap:wrap;white-space:normal;justify-content:center}
  .tick__row[aria-hidden="true"]{display:none}
}

/* ============================================================
   4.13, 30 September 2026. Refined type, one standard across the site.
   Denys: the text looked big and bold, not refined. Body text is 16px, small
   text 13px, and nothing below the hero is bold: emphasis is medium weight
   and colour. The heroes stay as they were, including their intro lines.
   The size photos are about 20% smaller and the cards more compact.
   ============================================================ */
b,strong,th,dt{font-weight:500}
.hero .lede,main > section:first-child .lede,.contact__head p{font-size:1.125rem}
/* the smallest phones: the three-line headline keeps its margin */
@media (max-width:360px){.hero h1{font-size:2rem}}

/* ============================================================
   4.15, 1 October 2026. The five sizes as line drawings.
   Denys: the panels are 35% taller so the tall sizes show properly, and the
   drawings grow from Nano to Rack so size reads at a glance while the small
   ones stay readable. They stand on a common baseline. No drop shadow: it
   belonged to the photographs, not to line art.
   ============================================================ */
.stage{aspect-ratio:32/27;place-items:end center}
.stage img.stage__img{filter:none;width:auto;max-width:100%;max-height:none}
.stage img.stage__img--nano{height:58%}
.stage img.stage__img--box{height:32%}  /* 4.20: 30% smaller, Denys 1A */
.stage img.stage__img--team{height:86%}
.stage img.stage__img--department{height:62%}
.stage img.stage__img--rack{height:100%}

/* ---------- the intro, 4.16 ----------
   Denys, 3 October 2026. The definition of the name over a moving orange
   gradient, then the logo, then a slow blend into the page. Always dark,
   whatever the theme. html.intro-on is set in the head of the home page
   before first paint, so the page never shows and then vanishes; it paints
   black until the intro itself is on screen. */
html.intro-on::after{content:"";position:fixed;inset:0;background:#000;z-index:1999}
html.intro-lock,html.intro-lock body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:2000;background:#000;color:#f4f4f2;display:grid;place-items:center;
  font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.intro__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease-out,filter 1s ease}
.intro__def,.intro__logo{grid-area:1/1;position:relative;text-align:center;opacity:0}
.intro__def{max-width:620px;padding:0 24px;transform:translateY(10px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.intro__word{font-weight:500;font-size:clamp(44px,8vw,76px);letter-spacing:.02em;line-height:1;margin:0;color:#f4f4f2}
.intro__say{margin:14px 0 26px;font-size:16px;color:#ffc7a6;letter-spacing:.02em}
.intro__say span{margin:0 .6em;color:#fb8a4c}
.intro__gram{margin:0 0 12px;font-size:15px;line-height:1.55;color:#e8e2de}
.intro__mean{margin:0;font-size:clamp(18px,2.4vw,22px);line-height:1.45;color:#ffffff}
.intro__logo{transform:scale(.96);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.intro__logo img{display:block;width:min(420px,72vw);height:auto}
.intro__skip{position:absolute;right:24px;bottom:22px;background:none;border:0;color:#c9c9cf;
  font:400 14px "Inter",sans-serif;letter-spacing:.04em;cursor:pointer;padding:8px 4px}
.intro__skip:hover,.intro__skip:focus-visible{color:#ffffff;text-decoration:underline}
.intro.is-start .intro__canvas{opacity:1}
.intro.is-def .intro__def{opacity:1;transform:none}
.intro.is-leaving-def .intro__def{opacity:0;transform:translateY(-6px);transition-duration:.5s}
.intro.is-logo .intro__canvas{filter:brightness(.42)}
.intro.is-logo .intro__logo{opacity:1;transform:none}
/* the hand-over: slow and eased at both ends; Skip uses a shorter one */
.intro.is-out{opacity:0;transition:opacity 1.8s cubic-bezier(.45,0,.2,1)}
.intro.is-out .intro__logo{transform:scale(1.04);transition:transform 1.8s cubic-bezier(.45,0,.2,1)}
.intro.is-out.is-fast{transition-duration:.9s}
/* the page settles into place underneath as the intro fades */
#main.intro-settle{transform:scale(1.02);transform-origin:50% 0}
#main.intro-settle--go{transform:none;transition:transform 2.2s cubic-bezier(.33,0,.15,1)}
@media (prefers-reduced-motion:reduce){
  .intro__def,.intro__logo,.intro.is-out .intro__logo{transform:none!important}
}

/* "Play intro", tucked under the theme switch so the bar keeps its height.
   In the phone menu it is a row of its own, under Switch theme. */
.theme-wrap{position:relative;display:inline-flex;align-items:center}
.replay{position:absolute;top:calc(100% + 3px);left:calc(50% + 7px);transform:translateX(-50%);
  white-space:nowrap;background:none;border:0;padding:2px 0;cursor:pointer;
  font:400 11px/1 "Inter",sans-serif;letter-spacing:.02em;color:var(--faint)}
.replay:hover,.replay:focus-visible{color:var(--fg)}
.replay[hidden]{display:none}
.replay__icon{display:none}
@media (max-width:1160px){
  .theme-wrap{display:contents}
  .replay{position:static;transform:none;display:flex;align-items:center;gap:12px;
    padding:13px 16px;font:inherit;font-size:inherit;font-weight:500;color:var(--muted);text-align:left}
  .replay__icon{display:block;width:17px;height:17px;fill:none;stroke:var(--faint);stroke-width:1.8;stroke-linejoin:round}
}
@media print{.intro,.replay{display:none!important}html.intro-on::after{display:none}}

/* ---------- the home page gradient, 4.18 ----------
   The intro's gradient at a whisper, behind the opening section of the home
   page only. It fades out towards the bottom so there is no edge where the
   next section begins. The canvas is added by aura.js; without it, nothing. */
.hero--aura{position:relative;isolation:isolate}
.hero--aura .aura{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
@media print{.hero--aura .aura{display:none}}

/* ---------- NVIDIA Inception badge, 4.21 ----------
   NVIDIA's rules: the badge as supplied (white, with its own border) on both
   themes, colours and wording untouched, smaller than the CLUSA logo, clear
   space around it. Three places: under the hero buttons on the home page, in
   the footer on every page, and on the Investors page. */
.inception{display:inline-block;line-height:0;flex:none}
.inception img{display:block;width:150px;height:auto}
.credential{display:flex;align-items:center;gap:14px;margin:34px 0 0;color:var(--muted);font-size:var(--t-small)}
.inception--footer{margin-top:24px}
.credential-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.credential-row .inception img{width:190px}
.credential-row p{margin:0;max-width:52ch;color:var(--muted)}
@media (max-width:560px){.credential{margin-top:28px}.credential-row{gap:18px}.credential-row .inception img{width:160px}}

/* 4.22 Products: product descriptor under a card name, card lists,
   the line under a card row, the comparison table, a kicker inside a band */
.card .prod-tag{color:var(--accent);margin:4px 0 14px;font-size:var(--t-small,14px);letter-spacing:.02em}
.card-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}
.after-cards{margin-top:26px;color:var(--muted)}
.after-cards a{color:var(--fg)}
.cta-band .kicker--accent{color:var(--accent);margin:0 0 10px}
.cmp{margin-top:34px;border-top:1px solid var(--line)}
.cmp__row{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.cmp__row span{color:var(--muted);line-height:1.5}
.cmp__row [role=rowheader]{color:var(--fg)}
.cmp__row--head span{color:var(--fg);font-size:var(--t-small,14px);letter-spacing:.04em;text-transform:uppercase}
.cmp__row .cmp__us{color:var(--fg)}
.cmp__row--head .cmp__us{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){
  .cmp__row{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .cmp__row--head{display:none}
  .cmp__row [role=cell]::before{display:block;font-size:var(--t-micro,12px);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);opacity:.8;margin-top:6px}
  .cmp__row [role=cell]:nth-child(2)::before{content:"Cloud app builders"}
  .cmp__row [role=cell]:nth-child(3)::before{content:"Private coding platforms"}
  .cmp__row [role=cell]:nth-child(4)::before{content:"CLUSA";color:var(--accent)}
}

/* 4.23 Products dropdown */
.navgroup summary{font-size:var(--t-small);font-weight:400}
.navgroup[data-here] summary{font-weight:500}
.navgroup .chev{width:14px;height:14px;flex:0 0 14px;display:block;overflow:visible;transition:transform .2s}
.navgroup[open] .chev{transform:rotate(180deg)}
@media (min-width:1161px){
  .navmenu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:220px;
    display:flex;flex-direction:column;gap:2px;padding:8px;
    background:var(--bg);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 18px 40px rgba(0,0,0,.18)}
  .navmenu a{display:block;text-decoration:none;white-space:nowrap;font-size:var(--t-small);
    color:var(--muted);padding:10px 12px;border-radius:8px}
  .navmenu a:hover{color:var(--fg);background:var(--bg-soft)}
  .navmenu a[aria-current="page"]{color:var(--fg);font-weight:500}
}
@media (max-width:1160px){
  .navmenu{display:flex;flex-direction:column}
  .navmenu a{display:block;text-decoration:none;color:var(--fg);padding:10px 16px}
}
.navmenu a::after{display:none!important}
@media (max-width:1160px){
  .navmenu a{font-size:var(--t-small);color:var(--muted);padding:12px 16px 12px 28px}
  .navmenu a[aria-current="page"]{color:var(--fg)}
}

/* 4.25: a section inside a product (Private AI Sizes) sits indented under it */
@media (min-width:1161px){.navmenu a.navmenu__sub{padding-left:28px}}
@media (max-width:1160px){.navmenu a.navmenu__sub{padding-left:44px}}