/* FullSpectrum — landing page
   ---------------------------------------------------------------------------
   Design language: soft lavender atmosphere, high-contrast geometric display
   type, glass and iridescence for the product moment, and flat white cards for
   everything that has to be read. Depth is spent where the eye should go and
   withheld everywhere else.
   ------------------------------------------------------------------------- */


*, *::before, *::after { box-sizing: border-box; }

:root {
  --display: 'Cabinet Grotesk', 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --body: 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --violet: #5b45e0;
  --violet-600: #4a35cf;
  --violet-300: #a99cf5;
  --violet-050: #f0edfe;
  --blue: #4a8ff7;
  --blue-050: #eaf2ff;

  --ink: #0e1116;
  --ink-2: #3b4152;
  --muted: #6b7286;
  --faint: #9aa0b4;
  --line: #e8e6f5;
  --line-2: #f1eff9;
  --card: #ffffff;

  --bg: #ffffff;
  --bg-wash: #fbfaff;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 16, 60, .04), 0 2px 8px rgba(20, 16, 60, .04);
  --shadow: 0 2px 4px rgba(20, 16, 60, .04), 0 12px 32px rgba(20, 16, 60, .07);
  --shadow-lift: 0 4px 8px rgba(20, 16, 60, .05), 0 24px 56px rgba(20, 16, 60, .12);
  --shadow-violet: 0 4px 14px rgba(91, 69, 224, .28), 0 12px 32px rgba(91, 69, 224, .18);

  --page: 1200px;
  --gutter: 32px;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The page is white; the colour is only a hint. Two soft radial pools sit at low
   alpha near the top and are gone by the fold, plus a fine grain so the
   gradients never band on a wide display. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 620px at 78% -6%, rgba(196, 186, 255, .22) 0%, rgba(196, 186, 255, 0) 60%),
    radial-gradient(900px 520px at 8% 4%, rgba(205, 199, 255, .16) 0%, rgba(205, 199, 255, 0) 56%),
    linear-gradient(180deg, var(--bg-wash) 0%, var(--bg) 34%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;  /* grain reads harder on white than it did on the lavender wash */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; margin: 0; letter-spacing: -.03em; line-height: 1.06; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.eyebrow {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: .95rem;
  padding: .8rem 1.4rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: linear-gradient(135deg, #6b55ea, var(--violet) 55%, var(--violet-600)); color: #fff; box-shadow: var(--shadow-violet); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(91,69,224,.34), 0 18px 44px rgba(91,69,224,.24); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--violet-300); box-shadow: var(--shadow); }
.btn--sm { padding: .55rem 1.05rem; font-size: .875rem; }
.btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* ---- nav ---------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 1.05rem 0;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.nav.is-stuck {
  /* Near-opaque rather than the .82 the hero could carry: the document pages
     scroll dense body copy under this bar, and at .82 the text reads through. */
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 1px 0 rgba(20, 16, 60, .06);
}
/* position: relative is the anchor every dropdown panel resolves against. One
   containing block for all of them is what keeps the panels the same width and
   in the same place, so moving between menus reads as one surface changing its
   mind rather than four menus opening at four offsets. */
.nav__in { display: flex; align-items: center; gap: 2.2rem; position: relative; }
.nav__links { display: flex; align-items: center; gap: 1.7rem; margin: 0 auto; }
/* Scoped to .nav__link, not to `a` inside the nav: the dropdown panels live in
   here too and have their own type scale. */
.nav__link {
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: .25rem 0;
  transition: color .18s ease;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--violet);
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__right { display: flex; align-items: center; gap: .7rem; }
.nav__login { font-size: .93rem; font-weight: 600; padding: .55rem 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; white-space: nowrap; }
.nav__login:hover { border-color: var(--violet-300); }

/* ---- nav dropdowns -------------------------------------------------------
   A trigger is a button, not a link: it opens something rather than going
   somewhere, and the difference matters to anyone navigating by keyboard or
   screen reader. The open state is a pill rather than the underline the plain
   links use — an underline says "you are here", and a menu that is merely
   showing is not a place you have arrived at. */

.nav__link--btn {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  font-family: inherit;
  padding: .45rem .85rem;
  margin: -.45rem -.3rem;      /* the pill grows outward; the row keeps its rhythm */
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.nav__link--btn::after { content: none; }   /* the pill replaces the underline */
.nav__link--btn:hover { background: rgba(91, 69, 224, .06); }
.nav__link--btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.nav__item--menu.is-open > .nav__link--btn { background: var(--violet-050); color: var(--violet); }

.caret {
  width: 13px; height: 13px;
  color: var(--faint);
  transition: transform .24s cubic-bezier(.2,.8,.3,1), color .18s ease;
}
.nav__item--menu.is-open .caret { transform: rotate(180deg); color: var(--violet); }

.nav__mega {
  position: absolute;
  top: calc(100% + 1.5rem);
  left: 50%;
  z-index: 60;
  width: min(1080px, calc(100vw - 2 * var(--gutter)));
  padding: 1.7rem 1.7rem 1.35rem;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-lift);
  /* visibility, not display: it takes the panel out of the tab order and the
     accessibility tree while still leaving something for the transition to
     animate. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px) scale(.985);
  transform-origin: top center;
  transition:
    opacity .18s ease,
    transform .26s cubic-bezier(.2,.8,.3,1),
    visibility 0s linear .26s;
}
.nav__item--menu.is-open > .nav__mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 0s;
}
/* The pointer has to cross the gap between the trigger and the panel. This
   bridges it, so the crossing never counts as leaving the menu. Only while
   open — otherwise it is an invisible sheet swallowing clicks on the hero. */
.nav__item--menu.is-open > .nav__mega::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1.6rem;
  height: 1.6rem;
}

/* The tail points back at whichever trigger opened the panel. Its offset is the
   one thing here that JS has to measure, because the panel is centred on the
   page and the triggers are not. */
.mega__tail {
  position: absolute;
  top: -7px;
  left: var(--tail, 50%);
  width: 14px; height: 14px;
  margin-left: -7px;
  background: #fff;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 4px 0 0 0;
  transform: rotate(45deg);
}

.mega__grid {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(0, 300px);
  gap: 1.9rem;
}
/* Hairlines between the columns, not around them: the panel is one surface
   divided, not three cards pushed together. */
.mega__col + .mega__col { border-left: 1px solid var(--line-2); padding-left: 1.9rem; margin-left: -.3rem; }

.mega__head {
  font-size: .9rem;
  font-weight: 700;
  color: var(--violet);
  letter-spacing: -.01em;
  padding-left: .55rem;
  margin-bottom: .7rem;
}

.mega__link {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: .8rem;
  padding: .5rem .55rem;
  border-radius: 12px;
  transition: background .16s ease;
}
.mega__link:hover { background: var(--bg-wash); }
.mega__link:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.mega__ico { width: 20px; height: 20px; color: var(--violet-300); transition: color .16s ease, transform .16s ease; }
.mega__link:hover .mega__ico { color: var(--violet); transform: translateX(1px); }
.mega__link b { display: block; font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.mega__link small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; }

/* The promo is the only part of the menu that argues rather than lists, so it
   gets the only filled surface and the only piece of artwork. */
.mega__promo {
  position: relative;
  overflow: hidden;
  /* A column, so the artwork can be told to take the space the copy did not
     want rather than being positioned over it and hoped for. */
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 0;
  min-height: 356px;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(60% 40% at 50% 92%, rgba(120, 146, 255, .28) 0%, rgba(120, 146, 255, 0) 72%),
    linear-gradient(165deg, #fbfaff 0%, #f3f0ff 100%);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mega__promo:hover { border-color: var(--violet-300); box-shadow: var(--shadow); }
.mega__promo h3 { font-size: 1.38rem; line-height: 1.14; }
.mega__promo p { margin-top: .7rem; font-size: .83rem; line-height: 1.55; color: var(--muted); }
/* The object takes whatever height the copy left over and contains itself
   inside it. Sizing it by width instead — the obvious first try — makes its
   height a function of the card's width, which is how it ends up taller than
   the space beneath the paragraph and clipped by the card's own overflow. */
.mega__object {
  display: block;
  /* basis 0, not auto: on `auto` the image contributes its full intrinsic
     height to the card's min-content height, and the card grows to 640px tall
     to hold artwork it was supposed to be scaling down. */
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  margin: .9rem 0 -1.1rem;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 26px rgba(91, 69, 224, .22));
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.mega__promo:hover .mega__object { transform: translateY(-6px); }

.mega__foot {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-2);
}
.mega__cmd {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  border-radius: 12px;
  background: var(--bg-wash);
  border: 1px solid var(--line-2);
}
.mega__prompt { font-family: var(--mono); font-size: .84rem; color: var(--violet-300); }
.mega__cmd code { font-family: var(--mono); font-size: .84rem; color: var(--ink-2); flex: 1; }
.mega__copy {
  display: inline-flex;
  padding: .3rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.mega__copy svg { width: 16px; height: 16px; }
.mega__copy:hover { color: var(--violet); background: #fff; }
.mega__copy.is-done { color: var(--violet); }
.mega__note { flex: 1; font-size: .85rem; color: var(--muted); }
.mega__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--violet);
  white-space: nowrap;
}
.mega__more svg { width: 16px; height: 16px; transition: transform .2s ease; }
.mega__more:hover svg { transform: translateX(4px); }

/* An open panel needs something behind the nav, or the links float over
   whatever the panel does not cover. */
.nav.has-open { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.6) blur(14px); }

.logo { display: flex; align-items: center; gap: .6rem; }
/* Bare glyph, no tile behind it — height drives the size and width follows the
   artwork's 0.829:1 ratio. Sized to the two-line wordmark block, not to the old
   38px tile, which carried its own padding. */
.logo__mark { height: 34px; width: auto; flex: none; display: block; }
/* Wordmark ships as artwork with its own gradient baked in. Width is set to what
   the live text used to measure, so the strapline below still tracks it. */
.logo__name { display: block; width: 110px; height: auto; }
/* Scaled with the wordmark: letter-spacing is em-based, so the font-size drop
   carries the tracking down too and the strapline stays just inside its width. */
.logo__sub { display: block; font-size: .49rem; font-weight: 700; letter-spacing: .22em; color: var(--faint); margin-top: 1px; line-height: 1; }

/* ---- hero --------------------------------------------------------------- */

/* padding-block: the section is also a `.wrap`, and the shorthand was zeroing
   its gutter — which only showed on a phone, where the headline ran into the
   edge of the screen. */
.hero { padding-block: 3.2rem 4rem; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 2rem; align-items: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem .45rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
  backdrop-filter: blur(8px);
}
.pill svg { width: 14px; height: 14px; color: var(--violet); }

.hero h1 { font-size: clamp(2.9rem, 5.4vw, 4.3rem); margin: 1.5rem 0 0; }
/* The one gradient in the type system. Twice on the page and nowhere else: the
   word the hero promises and the word the closing CTA asks for. That pair is a
   frame; a third use would make it decoration rather than emphasis. */
.hero h1 .grad, .close h2 .grad {
  background: linear-gradient(100deg, #7c5ce8 0%, #6a6ef0 42%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede { margin-top: 1.5rem; font-size: 1.075rem; color: var(--muted); max-width: 30rem; line-height: 1.65; }
.hero__cta { display: flex; gap: .8rem; margin-top: 2.1rem; flex-wrap: wrap; }

.assure {
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  margin: 2.1rem 0 0; padding: 0; list-style: none;
}
.assure li { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); }
.assure svg { width: 15px; height: 15px; color: var(--violet); flex: none; }

/* ---- the hero scene -----------------------------------------------------
   One rendered object over flat generated layers. The glass is a transparent
   render because a real one is more precise than anything CSS can fake and it
   holds up identically on every device; everything around it — atmosphere,
   trails, map, nodes — is vector or gradient, so it stays sharp, stays light,
   and can move. Art direction happens in the offsets below, not in the render.

   Stack, back to front: ambient → trails → map + nodes → floor → portal → chips. */

.scene { position: relative; aspect-ratio: 1 / .94; isolation: isolate; }

.scene > * { position: absolute; }

/* Atmosphere. Sits behind everything and never quite reaches the edges, so the
   scene dissolves into the page instead of ending. */
.scene__ambient {
  z-index: 0;
  inset: 4% -6% 2%;
  background:
    radial-gradient(ellipse 62% 48% at 50% 44%,
      rgba(150,176,255,.22), rgba(214,186,255,.1) 42%, rgba(255,255,255,0) 72%);
  filter: blur(22px);
  animation: pulse 9s ease-in-out infinite;
}

/* Overhangs the column on both sides: the fan has to run out of the frame
   rather than stop inside it. */
.scene__trails {
  z-index: 1;
  left: 50%; top: 44%;
  width: 152%; height: auto;
  transform: translate(-50%, -50%);
  animation: breathe 14s ease-in-out infinite;
}

/* Runs well past the column. A world map narrow enough to fit reads as
   scattered dots; only at this width do the continents resolve. */
.scene__map {
  z-index: 2;
  left: 50%; bottom: 6%;
  width: 132%;
  transform: translateX(-50%);
  opacity: .55;
}
.scene__map img { display: block; width: 100%; height: auto; }

/* Cities, placed with the same projection that drew the map. The core is
   violet, not white: a white glow needs a dark scene to read against, and this
   one is white — so the light has to come from colour, not brightness. */
.node {
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #fff 0 22%, #7c5ce8 58%, #4a35cf 100%);
  box-shadow:
    0 0 0 2.5px rgba(124,92,232,.16),
    0 0 10px rgba(110,80,240,.6),
    0 0 26px rgba(110,80,240,.34);
  animation: ping 3.4s ease-in-out infinite;
}
.node--sf  { left: 27.83%; top: 24.95%; animation-delay: -.2s; }
.node--sao { left: 39.16%; top: 64.68%; animation-delay: -2.4s; }
.node--lon { left: 49.98%; top: 18.37%; animation-delay: -1.1s; }
.node--dxb { left: 60.49%; top: 31.60%; animation-delay: -3s; }
.node--sin { left: 71.64%; top: 46.09%; animation-delay: -1.7s; }
.node--syd { left: 86.92%; top: 73.67%; animation-delay: -2.9s; }

/* The pool the object stands in. Under the portal, over the map, so the map
   reads as lit from the middle out. */
.scene__floor {
  z-index: 3;
  left: 50%; bottom: 12%;
  width: 56%; height: 16%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(140,120,255,.3), rgba(140,120,255,0) 68%);
  filter: blur(16px);
}

.scene__portal {
  z-index: 4;
  left: 50%; top: 42%;
  width: 53%; height: auto;
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 26px 44px rgba(91, 69, 224, .13))
    drop-shadow(0 64px 92px rgba(168, 140, 255, .12));
  animation: float 8s ease-in-out infinite;
}

/* Composed rather than transformed: the portal is centred by translate, so its
   drift has to be part of the same transform or it fights the centring. */
@keyframes float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-10px); }
}
/* Held well under half strength: the fan is there to give the object somewhere
   to sit, and the moment it reads as rays it competes with the headline. */
@keyframes breathe {
  0%, 100% { opacity: .34; transform: translate(-50%, -50%) scale(.985); }
  50%      { opacity: .48; transform: translate(-50%, -50%) scale(1.015); }
}
@keyframes pulse { 0%, 100% { opacity: .8 } 50% { opacity: 1 } }
@keyframes ping {
  0%, 100% { transform: scale(.8); opacity: .5 }
  50%      { transform: scale(1.25); opacity: 1 }
}

/* Feature claims orbiting the object. Icon beside the copy rather than above
   it: two lines of text beside a mark read as a statement, where a mark above a
   single word reads as a category tag. Width is fixed so the six cards align as
   two columns instead of ragging to their content. */
.chip {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .62rem .78rem;
  width: 172px;
  border-radius: 15px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  font-size: .715rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink-2);
  animation: bob 6s ease-in-out infinite;
}
.chip svg { width: 20px; height: 20px; flex: none; color: var(--violet); }
.chip:nth-child(odd) { animation-delay: -3s; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }

/* The middle pair sits furthest out because the portal is widest between them;
   the bottom pair clears the plinth by dropping below it rather than by moving
   sideways, which is the only direction with room left. */
.chip--a { left:  -1%; top:  6%; }
.chip--b { left:  -6%; top: 40%; }
.chip--c { left:  -1%; top: 78%; }
.chip--d { right: -1%; top:  6%; }
.chip--e { right: -6%; top: 40%; }
.chip--f { right: -1%; top: 78%; }

/* ---- logo strip --------------------------------------------------------- */

.trusted { padding-block: 1rem 3.5rem; text-align: center; }
.trusted__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; margin-top: 1.6rem; flex-wrap: wrap;
}
.trusted__row span {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #7b8196;
  display: inline-flex; align-items: center; gap: .45rem;
  opacity: .85;
  transition: opacity .2s ease, color .2s ease;
}
.trusted__row span:hover { opacity: 1; color: var(--ink-2); }
.trusted__row svg { width: 20px; height: 20px; }

/* ---- feature bento ------------------------------------------------------ */

/* Six columns rather than four, so a card can take two of them or four. The
   alternation — wide+narrow, then narrow+wide — is the whole trick: four equal
   columns read as a table of features, where an uneven pair reads as a
   composition and gives the eye somewhere to start. */
.features { padding-bottom: 4.5rem; }
.features__grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1.15rem; }
.card--wide { grid-column: span 4; }
.card--tall { grid-column: span 2; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: .85rem;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #ded9f6; }
.card__body { display: flex; flex-direction: column; gap: .85rem; }
.card__icon {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--violet-050), var(--blue-050));
  border: 1px solid #e6e2fb;
  color: var(--violet);
}
.card__icon svg { width: 20px; height: 20px; }
.card h3 { font-size: 1.16rem; line-height: 1.22; }
.card p { font-size: .9rem; color: var(--muted); line-height: 1.55; }

/* A wide card is the same card turned on its side: copy in one column, the
   product surface in the other. Stacking it would leave the dead band of
   whitespace that `margin-top: auto` opens up when a short panel sits under a
   short paragraph in a very wide box.
   These override `.card h3` / `.card p` at equal specificity, so they have to
   come after them. */
.card--wide {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: 1.6rem;
  align-items: stretch;
  padding: 1.75rem 1.65rem;
}
.card--wide .card__body { gap: .8rem; justify-content: center; }
.card--wide h3 { font-size: 1.55rem; letter-spacing: -.02em; }
.card--wide p { font-size: .94rem; }

/* A wide cell is as tall as the narrow one beside it, which is taller than its
   own copy needs. The panel takes that slack rather than leaving it as a band
   of empty card — but it absorbs it at one seam, not by spreading every row:
   the tiles grow, and the action sits on the floor of its panel the way a real
   one does. Distributing the slack evenly is what makes a stretched panel read
   as broken. */
.card--wide .mini { margin-top: 0; }
.card--wide .mini--fill { align-self: stretch; display: flex; flex-direction: column; }
.card--wide .mini--fill .tiles { flex: 1; grid-auto-rows: 1fr; }
/* `auto` against no free space collapses to zero, which would butt the action
   up against the list in every layout where the card has no slack to give. The
   list keeps the gap; the auto margin adds whatever is spare on top of it. */
.card--wide .mini--fill .mini__list { margin-bottom: .7rem; }
.card--wide .mini--fill .mini__cta { margin-top: auto; }

/* The hero of the composition, marked by a wash rather than by another border —
   one tinted cell is enough to say "start here" at this size. */
.card--hero { background: linear-gradient(150deg, #fbfaff, var(--card) 58%); }

/* Miniature product surfaces inside the cards. These carry most of the page's
   credibility — a claim with a picture of the thing beats a claim. */
.mini {
  margin-top: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, #fdfdff, #f8f7fe);
  padding: .85rem;
  font-size: .72rem;
}
.mini__head { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-weight: 600; margin-bottom: .55rem; }
.mini__head svg { width: 13px; height: 13px; color: var(--violet); }
.mini__list { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.mini__list li { display: flex; align-items: center; gap: .4rem; color: var(--ink-2); }
.check { width: 13px; height: 13px; color: #3aa76d; flex: none; }
.mini__cta { margin-top: .7rem; width: 100%; justify-content: center; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.tier { padding: .55rem .5rem; text-align: center; background: #fff; }
.tier + .tier { border-left: 1px solid var(--line-2); }
.tier--hot { background: var(--violet-050); }
.tier b { display: block; font-family: var(--display); font-size: 1.02rem; letter-spacing: -.02em; }
.tier small { display: block; color: var(--faint); font-size: .6rem; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.tile {
  display: grid; place-items: center; gap: .22rem;
  padding: .45rem .2rem;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: #fff;
  font-size: .58rem;
  color: var(--muted);
  transition: border-color .18s ease, color .18s ease;
}
.tile:hover { border-color: var(--violet-300); color: var(--violet); }
.tile svg { width: 14px; height: 14px; color: var(--violet); }

.mini__map { display: block; width: 100%; height: auto; opacity: .5; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--violet-050); border-top-color: var(--violet); animation: spin 1s linear infinite; margin-left: auto; }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---- the thesis panel --------------------------------------------------- */

.thesis {
  border-radius: 26px;
  background: linear-gradient(135deg, #f6f4ff 0%, #eef1ff 48%, #f9f2ff 100%);
  border: 1px solid #e9e5fb;
  padding: 2.6rem;
  margin-bottom: 4.5rem;
  position: relative;
  overflow: hidden;
}
.thesis::after {
  content: '';
  position: absolute; right: -8%; top: -40%;
  width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(180,150,255,.28), transparent 66%);
  filter: blur(30px);
  pointer-events: none;
}
.thesis__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr) minmax(0, .6fr); gap: 2rem; align-items: center; position: relative; }
.thesis h2 { font-size: clamp(1.7rem, 2.5vw, 2.15rem); margin-top: .75rem; }
.thesis p { margin-top: 1rem; color: var(--muted); font-size: .95rem; }

.code {
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.code__tabs { display: flex; gap: .25rem; padding: .5rem .5rem 0; border-bottom: 1px solid var(--line-2); background: #fbfaff; }
.code__tab {
  font-family: var(--body);
  font-size: .8rem; font-weight: 600;
  padding: .5rem .9rem;
  border: 0; background: none; cursor: pointer;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.code__tab[aria-selected="true"] { color: var(--violet); border-bottom-color: var(--violet); }
.code__tab:hover { color: var(--ink); }
.code pre { margin: 0; padding: 1.1rem 1.2rem; overflow-x: auto; }
.code code { font-family: var(--mono); font-size: .78rem; line-height: 1.75; color: var(--ink-2); }
.tok-key { color: var(--violet); }
.tok-str { color: #2e8f5b; }
.tok-punc { color: var(--faint); }
.tok-tag { color: #c2410c; }
/* TypeScript needs three more than JSON did: keywords, calls, comments. */
.tok-kw { color: #8b4fd8; font-weight: 500; }
.tok-fn { color: #2563c9; }
.tok-com { color: var(--faint); font-style: italic; }

.proofs { display: grid; gap: .6rem; }
.proof {
  display: flex; align-items: center; gap: .55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .6rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ---- testimonials ------------------------------------------------------- */

.loved { text-align: center; padding-bottom: 4.5rem; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; margin-top: 1.8rem; text-align: left; }
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 1.1rem;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.quote__mark { font-family: var(--display); font-size: 2rem; line-height: .6; color: var(--violet-300); }
.quote p { font-size: .95rem; color: var(--ink-2); line-height: 1.6; }
.quote__who { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; background: linear-gradient(140deg, var(--violet-300), var(--blue)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .82rem; }
.quote__who b { display: block; font-size: .87rem; }
.quote__who small { color: var(--faint); font-size: .78rem; }

/* ---- closing CTA -------------------------------------------------------- */

/* Light, not the inverted violet slab it used to be: the page is white
   throughout, and a saturated panel here would read as a banner pasted on the
   end. The weight comes from scale and from the object instead. */
.close {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 3.2rem;
  margin-bottom: 4rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  background:
    radial-gradient(760px 480px at 86% 14%, rgba(186, 174, 255, .3), rgba(186, 174, 255, 0) 62%),
    radial-gradient(560px 420px at 4% 94%, rgba(174, 202, 255, .22), rgba(174, 202, 255, 0) 60%),
    linear-gradient(152deg, #fbfaff 0%, #ffffff 52%, #f7f5ff 100%);
  display: grid;
  /* Copy takes the larger share so the four claim pills fit on one line; at an
     even split the last one wraps alone and reads as an accident. */
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: 2.4rem;
  align-items: center;
}
.close h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-top: 1.4rem; }
.close p { margin-top: 1.1rem; color: var(--muted); font-size: 1.02rem; line-height: 1.65; max-width: 32rem; }

/* Form and secondary action share a row; the form takes the slack so the two
   read as one action bar rather than a form with a button parked beside it. */
.close__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
.close__actions .signup { flex: 1 1 20rem; }
.close__actions .btn--ghost { flex: none; }

.signup { display: flex; flex-wrap: wrap; gap: .5rem; background: #fff; border-radius: var(--r-pill); padding: .4rem; box-shadow: var(--shadow); border: 1px solid var(--line); position: relative; }
.signup input {
  flex: 1 1 10rem; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--body); font-size: .95rem; padding: .55rem .9rem; color: var(--ink);
}
.signup input::placeholder { color: var(--faint); }
.close .assure { margin-top: 1.1rem; justify-content: flex-start; }

/* The product claims, restated as evidence under the action rather than as
   another headline. Pills, not the hero's cards — these are read in a row. */
.close__marks {
  list-style: none; margin: 1.9rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .48rem;
}
.close__marks li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .46rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: .755rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.close__marks svg { width: 15px; height: 15px; flex: none; color: var(--violet); }

.close__art { position: relative; aspect-ratio: 1 / .96; display: grid; place-items: center; }
.close__art > * { position: absolute; }

/* Overhangs its box so the light runs past the panel's rounded corner and gets
   clipped by it — the panel edge becomes the vignette. */
/* Its own cycle rather than the hero's `breathe`, and quieter than it: the hero
   fan has a whole scene to hold up, while this one only has to keep the object
   from floating on bare panel. Held near a quarter opacity and blurred enough
   that no single ray resolves — what's left is a warm patch of air behind the
   object, and the pulse is something you feel rather than watch. */
.close__burst {
  z-index: 0;
  width: 132%; height: auto;
  top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(3px);
  animation: flare 15s ease-in-out infinite;
}
@keyframes flare {
  0%, 100% { opacity: .22; transform: translate(-50%, -50%) scale(.985); }
  50%      { opacity: .3;  transform: translate(-50%, -50%) scale(1.015); }
}
.close__pool {
  z-index: 1;
  width: 58%; height: 16%;
  bottom: 14%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(140,120,255,.12), rgba(140,120,255,0) 68%);
  filter: blur(20px);
}
.close__portal {
  z-index: 2;
  width: 68%; height: auto;
  top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 22px 40px rgba(91, 69, 224, .14))
    drop-shadow(0 56px 84px rgba(168, 140, 255, .12));
  animation: float 9s ease-in-out infinite;
}

/* ---- footer ------------------------------------------------------------- */

/* padding-block, not the shorthand: `.foot` is also a `.wrap`, and the
   shorthand would zero the gutter it inherits. */
.foot { border-top: 1px solid var(--line); padding-block: 2.2rem 3rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.foot p { font-size: .85rem; color: var(--faint); }
.foot nav { display: flex; gap: 1.4rem; font-size: .88rem; color: var(--muted); }
.foot nav a:hover { color: var(--violet); }

/* ---- entrance ----------------------------------------------------------- */

.rise { opacity: 1; }
.rise--armed { opacity: 0; transform: translateY(18px); }
.is-in { animation: rise .7s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

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

@media (max-width: 1080px) {
  /* The promo is the part of the menu you can lose without losing a
     destination, so it is what goes when the panel runs out of room. */
  .mega__grid { grid-template-columns: 1fr 1fr; }
  .mega__promo { display: none; }

  /* Four columns: the wide cards take the whole row and the narrow pair sits
     between them, so the alternation survives as a rhythm down the page. */
  .features__grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .card--wide { grid-column: span 4; }
  .card--tall { grid-column: span 2; }
  .thesis__grid { grid-template-columns: 1fr; }
  .proofs { grid-template-columns: repeat(3, 1fr); display: grid; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  /* Wider than the text column it sits above: the scene is atmosphere, and
     letting it bleed past the gutter keeps it from reading as a boxed image.
     Shorter too — at full width a square box would push the headline off the
     first screen. */
  .scene { order: -1; width: 114%; margin-left: -7%; aspect-ratio: 1 / .8; }
  .scene__portal { width: 52%; }
  /* The scene already hangs ~7% off both edges here, so the desktop insets —
     which push further out still — would put the chips past the viewport and
     into overflow-x: hidden. 9% of the scene clears the overhang with room to
     spare, and the stagger goes away because a full-width scene has space for
     all six at the same depth. */
  .chip--a, .chip--b, .chip--c { left: 9%; }
  .chip--d, .chip--e, .chip--f { right: 9%; }
  .quotes { grid-template-columns: 1fr; }
  /* Copy first, object under it — the CTA's job is the action, so the artwork
     gives up the top of the fold rather than the headline. */
  .close { grid-template-columns: 1fr; }
  /* width, not max-width + auto margins: an auto margin makes a grid item
     shrink-to-fit, and every child here is absolutely positioned, so the box
     would resolve to zero and the artwork would silently vanish. */
  .close__art { aspect-ratio: 1 / .62; width: min(100%, 460px); justify-self: center; margin-top: .6rem; }
  .close__portal { width: 46%; }
  .close__burst { width: 92%; }
}
@media (max-width: 760px) {
  /* Below this a full-width card is no longer wide enough to hold two columns,
     so the wide ones go back to being ordinary stacked cards. */
  .card--wide { display: flex; padding: 1.5rem 1.4rem; }
  .card--wide .mini { margin-top: auto; }
  .card--wide h3 { font-size: 1.16rem; }
  .card--wide p { font-size: .9rem; }
}
@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .features__grid, .proofs { grid-template-columns: 1fr; }
  .card--wide, .card--tall { grid-column: auto; }
  .thesis, .close { padding: 1.6rem; }
  .trusted__row { justify-content: center; gap: 1.4rem 2rem; }
  .chip { display: none; }

  /* The nav has three fixed-width children and no room to negotiate; drop the
     wordmark's strapline and let the buttons shrink before anything overflows. */
  .nav__in { gap: .6rem; }
  .logo__sub { display: none; }
  .logo__name { width: 100px; }
  .logo__mark { height: 29px; width: auto; }
  .nav__right { gap: .4rem; }
  .nav__login { padding: .5rem .8rem; font-size: .85rem; }
  .nav__right .btn { padding: .5rem .85rem; font-size: .82rem; }

  .close .assure { gap: .5rem 1rem; }
  .assure { gap: .5rem 1rem; }
  .signup .btn { flex: 1 1 100%; justify-content: center; }
  .hero h1 { font-size: clamp(2.3rem, 10vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .rise--armed { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ===========================================================================
   SITE — everything below is shared by the pages beyond the landing page
   (pricing, docs, developers, company). The landing page is a single
   composition; these are documents. So they get a different set of primitives:
   a quieter hero, real reading measures, and a dark surface for anything that
   is code, because a terminal that looks like a terminal is worth more than
   one more white card.
   ========================================================================= */

/* ---- multi-page nav ------------------------------------------------------
   The landing page's nav was one page's worth of anchors. Now it navigates a
   site, so it needs a current-page state and — since the links vanish under
   900px — somewhere for them to go on a phone. */

.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
/* A trigger has no underline to turn on, so the current page reads as colour
   alone — and stays legible against the pill the open state adds on top. */
.nav__link--btn[aria-current="page"] { color: var(--violet); }

.nav__burger {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  color: var(--ink);
  align-items: center; justify-content: center;
}
.nav__burger:hover { border-color: var(--violet-300); }
.nav__burger svg { width: 18px; height: 18px; }
.nav__burger .x { display: none; }
.nav__burger[aria-expanded="true"] .x { display: block; }
.nav__burger[aria-expanded="true"] .bars { display: none; }

.nav__panel {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  top: calc(100% + .5rem);
  z-index: 60;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: .6rem;
  animation: drop .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.nav__panel a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem .9rem;
  border-radius: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.nav__panel a[aria-current="page"] { background: var(--violet-050); color: var(--violet); }
.nav__panel a svg { width: 15px; height: 15px; color: var(--faint); }
.nav__panel hr { border: 0; border-top: 1px solid var(--line-2); margin: .5rem .3rem; }
.nav__panel .btn { width: 100%; justify-content: center; margin-top: .2rem; }

/* ---- page furniture ------------------------------------------------------ */

/* Vertical padding only. These elements also carry `.wrap`, and a shorthand
   `padding: 3.2rem 0` would reset its horizontal gutter to zero — which is
   invisible at 1440px, where the max-width does the insetting, and puts the
   text against the bezel on a phone, where it does not. */
.page-hero { padding-block: 3.2rem 2.6rem; position: relative; }
.page-hero__in { max-width: 46rem; }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); margin: 1.2rem 0 0; }
.page-hero .lede { margin-top: 1.15rem; font-size: 1.08rem; line-height: 1.65; color: var(--muted); max-width: 34rem; }
.page-hero__cta { display: flex; gap: .8rem; margin-top: 1.9rem; flex-wrap: wrap; }
/* A single soft pool behind the heading so the top of the page has the same
   air as the landing hero without repeating its scene.

   Held to the element's own width rather than the 120% it wants: a centred
   over-wide box adds real scrollWidth on both sides, and on a 390px phone that
   is a 39px horizontal overflow for a gradient nobody can see the edge of. */
.page-hero::before {
  content: '';
  position: absolute; z-index: -1;
  left: 0; right: 0; top: -34%;
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse 56% 52% at 66% 60%, rgba(160,140,255,.16), rgba(255,255,255,0) 70%);
  pointer-events: none;
}

.section { padding-block: 3.4rem; }
.section--tight { padding-block: 2.2rem; }
.section__head { max-width: 40rem; margin-bottom: 2rem; }
.section__head h2 { font-size: clamp(1.7rem, 2.9vw, 2.3rem); margin-top: .7rem; }
.section__head p { margin-top: .9rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.4rem;
}

/* ---- dark surface --------------------------------------------------------
   Used for terminals and for the one band per page that should feel like the
   inside of the product rather than the outside. Same hues as the light theme,
   just inverted — the violet is the only colour that carries across. */

.dark {
  --ink: #f4f4fb;
  --ink-2: #c9cce0;
  --muted: #8f95ad;
  --faint: #6d7290;
  --line: rgba(255,255,255,.1);
  --line-2: rgba(255,255,255,.06);
  --card: #171a26;
  color: var(--ink);
  background: linear-gradient(165deg, #12141f 0%, #171a2a 55%, #14162a 100%);
  border-radius: 26px;
  padding: 2.6rem;
  position: relative;
  overflow: hidden;
}
.dark::after {
  content: '';
  position: absolute; right: -6%; top: -46%;
  width: 44%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(124,92,232,.4), transparent 64%);
  filter: blur(26px);
  pointer-events: none;
}
.dark h2, .dark h3 { color: #fff; }
.dark p { color: var(--ink-2); }
.dark .eyebrow { color: var(--violet-300); }
.dark .btn--ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.16); box-shadow: none; }
.dark .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }

/* ---- terminal / code blocks ---------------------------------------------
   Shell transcripts are dark, source listings are light. The distinction is
   load-bearing: on a docs page you should be able to tell "run this" from
   "this is what the file says" without reading either. */

.term {
  position: relative;
  border-radius: var(--r);
  background: #12141f;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 2px 4px rgba(20,16,60,.06), 0 16px 40px rgba(20,16,60,.14);
  overflow: hidden;
}
.term__bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
}
.term__bar i { width: 9px; height: 9px; border-radius: 50%; background: #33374a; }
.term__bar i:first-child { background: #3d3350; }
.term__bar span { margin-left: .4rem; font-family: var(--mono); font-size: .68rem; color: #7b8199; letter-spacing: .02em; }
.term pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; }
.term code { font-family: var(--mono); font-size: .78rem; line-height: 1.85; color: #d6dae9; }
.term .c { color: #6f7590; }                      /* comment */
.term .p { color: #a99cf5; user-select: none; }   /* prompt */
.term .o { color: #8fe0b0; }                      /* output the tool prints */
.term .n { color: #f0c274; }                      /* a number worth noticing */

/* Copy button: shows on hover, stays put for keyboards, and reports what it
   did in its own label rather than in a toast that appears somewhere else. */
.copy {
  position: absolute; top: .55rem; right: .55rem;
  font-family: var(--body); font-size: .7rem; font-weight: 600;
  padding: .3rem .6rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: #c9cce0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s ease, background .16s ease;
}
.term:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { background: rgba(255,255,255,.16); }
.copy.is-done { color: #8fe0b0; border-color: rgba(143,224,176,.4); }
.code .copy { border-color: var(--line); background: #fff; color: var(--muted); box-shadow: var(--shadow-sm); }
.code:hover .copy { opacity: 1; }
.code { position: relative; }

/* ---- shared CTA band ----------------------------------------------------- */

.cta-band {
  border-radius: 26px;
  padding: 2.6rem;
  margin: 1rem 0 4rem;
  color: #fff;
  background: linear-gradient(112deg, #5b45e0 0%, #6a5ae8 42%, #4a8ff7 100%);
  box-shadow: 0 24px 60px rgba(74, 60, 190, .3);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: 2rem; align-items: center;
}
.cta-band::after {
  content: '';
  position: absolute; right: -12%; top: -80%;
  width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 62%);
  pointer-events: none;
}
.cta-band h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.cta-band p { margin-top: .7rem; color: rgba(255,255,255,.85); font-size: .98rem; max-width: 30rem; }
.cta-band__act { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; }
.cta-band .btn--primary { background: #fff; color: var(--violet); box-shadow: 0 10px 30px rgba(20,16,60,.22); }
.cta-band .btn--primary:hover { box-shadow: 0 14px 38px rgba(20,16,60,.3); }
.cta-band .btn--ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); box-shadow: none; }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.2); }

/* ---- big footer ---------------------------------------------------------- */

.foot--big { display: block; padding-top: 3rem; }
.foot__grid { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(4, minmax(0,1fr)); gap: 2rem; }
.foot__brand p { margin-top: 1rem; font-size: .85rem; color: var(--muted); max-width: 20rem; line-height: 1.6; }
.foot__col h4 { font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.foot__col ul { list-style: none; margin: .95rem 0 0; padding: 0; display: grid; gap: .55rem; }
.foot__col a { font-size: .88rem; color: var(--muted); }
.foot__col a:hover { color: var(--violet); }
.foot__base {
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.foot__base p { font-size: .84rem; color: var(--faint); }
.foot__base nav { display: flex; gap: 1.2rem; font-size: .84rem; color: var(--faint); }
.foot__base nav a:hover { color: var(--violet); }

/* ===========================================================================
   PRICING
   ========================================================================= */

/* Monthly / annual is a two-state switch, so it is built out of two radios and
   a sliding thumb — real form controls, so it works with a keyboard and a
   screen reader without any script deciding what "checked" means. */
.billing { display: inline-flex; align-items: center; gap: .8rem; margin-top: 1.8rem; }
.switch { position: relative; display: inline-flex; padding: .28rem; border-radius: var(--r-pill); background: #f2f0fb; border: 1px solid var(--line); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch label {
  position: relative; z-index: 1;
  /* Equal widths, not content widths — the sliding thumb is exactly half the
     track, so "Monthly" and "Annual" have to occupy the same half each. */
  flex: 1 1 0; min-width: 6.2rem; text-align: center;
  padding: .42rem 1rem;
  font-size: .84rem; font-weight: 700;
  border-radius: var(--r-pill);
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease;
}
.switch__thumb {
  position: absolute; z-index: 0;
  top: .28rem; bottom: .28rem; left: .28rem;
  width: calc(50% - .28rem);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .24s cubic-bezier(.2,.8,.3,1);
}
.switch input:nth-of-type(2):checked ~ .switch__thumb { transform: translateX(100%); }
.switch input:checked + label { color: var(--violet); }
.switch input:focus-visible + label { outline: 2px solid var(--violet); outline-offset: 2px; }
.billing__save { font-size: .78rem; font-weight: 700; color: #2e8f5b; background: #e8f7ef; border: 1px solid #cdebdb; padding: .3rem .7rem; border-radius: var(--r-pill); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.1rem; align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #ded9f6; }
/* The recommended plan is raised out of the row rather than recoloured: it
   reads as the default from across the room, and it still looks like the other
   three when you actually compare them. */
.plan--hot {
  border-color: var(--violet-300);
  box-shadow: var(--shadow-lift);
  position: relative;
}
.plan--hot::before {
  content: '';
  position: absolute; inset: -1px -1px auto; height: 4px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, var(--violet), var(--blue));
}
.plan__tag {
  align-self: flex-start;
  font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--violet); background: var(--violet-050);
  border-radius: var(--r-pill); padding: .25rem .6rem;
  margin-bottom: .7rem;
}
.plan h3 { font-size: 1.22rem; }
.plan__for { margin-top: .45rem; font-size: .84rem; color: var(--muted); line-height: 1.5; min-height: 2.5em; }
.plan__price { display: flex; align-items: baseline; gap: .35rem; margin: 1.15rem 0 .2rem; }
.plan__price > b { font-family: var(--display); font-size: 2.5rem; letter-spacing: -.04em; line-height: 1; }
/* Direct child only — the amount itself is a <span> inside the <b>, so a
   descendant selector here shrinks the price it was meant to caption. */
.plan__price > span { font-size: .82rem; color: var(--faint); font-weight: 500; }
.plan__note { font-size: .76rem; color: var(--faint); min-height: 1.4em; }
.plan .btn { width: 100%; justify-content: center; margin: 1.2rem 0 1.3rem; }
.plan__list { list-style: none; margin: 0; padding: 1.3rem 0 0; border-top: 1px solid var(--line-2); display: grid; gap: .58rem; }
.plan__list li { display: flex; gap: .55rem; font-size: .855rem; color: var(--ink-2); line-height: 1.45; }
.plan__list svg { width: 14px; height: 14px; color: #3aa76d; flex: none; margin-top: .25rem; }
.plan__list b { font-weight: 700; }
.plan__more { margin-top: auto; padding-top: 1.2rem; font-size: .78rem; color: var(--faint); }

/* Prices swap on the switch. Two spans, one hidden — no number is ever
   assembled in script, so the page is right before it is interactive. */
.amt--yr { display: none; }
body.is-yearly .amt--mo { display: none; }
body.is-yearly .amt--yr { display: inline; }

.meter { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; }
.meter__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem 1.25rem; }
.meter__card h4 { font-size: 1rem; margin-bottom: .5rem; }
.meter__card p { font-size: .875rem; color: var(--muted); line-height: 1.55; }
.meter__bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin-bottom: 1rem; background: var(--line-2); }
.meter__bar i { display: block; height: 100%; }

.ptable { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ptable th, .ptable td { padding: .8rem 1rem; text-align: center; border-bottom: 1px solid var(--line-2); }
.ptable thead th { position: sticky; top: 64px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); z-index: 2; font-size: .8rem; letter-spacing: .02em; border-bottom: 1px solid var(--line); }
.ptable th:first-child, .ptable td:first-child { text-align: left; color: var(--ink-2); font-weight: 500; width: 34%; }
.ptable tbody tr:hover td { background: #fbfaff; }
.ptable .grp td {
  font-family: var(--body); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  background: #fbfaff; padding-top: 1.3rem; padding-bottom: .55rem;
}
.ptable .grp td:first-child { color: var(--faint); font-weight: 700; }
.ptable .yes { color: #3aa76d; }
.ptable .no { color: #cfd3e2; }
.ptable svg { width: 16px; height: 16px; vertical-align: -3px; }
.ptable td b { font-weight: 700; color: var(--ink); }
.ptable__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); }

/* ---- FAQ / disclosure ---------------------------------------------------- */

.faq { display: grid; gap: .7rem; max-width: 52rem; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease;
}
.faq details[open] { border-color: var(--violet-300); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; color: var(--violet); flex: none; transition: transform .22s cubic-bezier(.2,.8,.3,1); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq p { padding: 0 1.25rem 1.15rem; color: var(--muted); font-size: .92rem; line-height: 1.65; max-width: 46rem; }
.faq code { font-family: var(--mono); font-size: .84em; background: var(--violet-050); color: var(--violet-600); padding: .1em .4em; border-radius: 5px; }

/* ===========================================================================
   DOCS
   ========================================================================= */

.docs { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 3rem; align-items: start; padding-bottom: 4rem; }

.side { position: sticky; top: 84px; max-height: calc(100vh - 108px); overflow-y: auto; padding-right: .4rem; }
.side summary { display: none; }
.side__filter { position: relative; margin-bottom: 1.1rem; }
.side__filter input {
  width: 100%;
  font-family: var(--body); font-size: .85rem;
  padding: .55rem .8rem .55rem 2.1rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.side__filter input:focus { border-color: var(--violet-300); box-shadow: 0 0 0 3px rgba(91,69,224,.1); }
.side__filter svg { position: absolute; left: .7rem; top: 50%; margin-top: -8px; width: 16px; height: 16px; color: var(--faint); }
.side__group + .side__group { margin-top: 1.4rem; }
.side__group h4 { font-family: var(--body); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: .55rem; }
.side__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.side__group a {
  display: block;
  padding: .35rem .7rem;
  border-left: 2px solid var(--line);
  font-size: .875rem; color: var(--muted);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.side__group a:hover { color: var(--ink); background: #faf9ff; }
.side__group a.is-active { color: var(--violet); border-left-color: var(--violet); font-weight: 600; background: #f8f6ff; }
.side__group li.is-hidden { display: none; }
.side__empty { font-size: .82rem; color: var(--faint); padding: .4rem .7rem; }

/* The reading column. Docs prose gets its own type scale — the marketing
   headings are display-weight at 800 and would shout down a paragraph of
   reference material. */
.doc { max-width: 46rem; }
.doc section { scroll-margin-top: 90px; }
.doc section + section { margin-top: 3rem; }
.doc h2 { font-size: 1.72rem; letter-spacing: -.028em; }
.doc h3 { font-size: 1.12rem; margin-top: 1.9rem; letter-spacing: -.02em; }
.doc p { margin-top: .9rem; color: var(--ink-2); font-size: .95rem; line-height: 1.72; }
.doc p a, .doc li a { color: var(--violet); font-weight: 600; border-bottom: 1px solid rgba(91,69,224,.25); }
.doc p a:hover, .doc li a:hover { border-bottom-color: var(--violet); }
.doc ul, .doc ol { margin: .9rem 0 0; padding-left: 1.15rem; color: var(--ink-2); font-size: .95rem; line-height: 1.72; }
.doc li + li { margin-top: .4rem; }
.doc li::marker { color: var(--violet-300); }
.doc .term, .doc .code, .doc .note, .doc .dtable__scroll { margin-top: 1.2rem; }
.doc code:not(pre code) { font-family: var(--mono); font-size: .85em; background: var(--violet-050); color: var(--violet-600); padding: .12em .4em; border-radius: 5px; }
.doc__lead { font-size: 1.05rem !important; color: var(--muted) !important; line-height: 1.65 !important; }
.doc__anchor { color: var(--violet-300); font-weight: 400; opacity: 0; margin-left: .4rem; font-size: .8em; transition: opacity .16s ease; }
.doc h2:hover .doc__anchor, .doc h3:hover .doc__anchor { opacity: 1; }

.note {
  display: flex; gap: .8rem;
  border-radius: var(--r);
  border: 1px solid #e6e2fb;
  background: linear-gradient(140deg, var(--violet-050), #f7f5ff);
  padding: 1rem 1.15rem;
}
.note svg { width: 18px; height: 18px; color: var(--violet); flex: none; margin-top: .15rem; }
.note p { margin: 0 !important; font-size: .88rem !important; line-height: 1.62 !important; }
.note b { color: var(--ink); }
.note--warn { border-color: #f6e3c9; background: linear-gradient(140deg, #fdf6ea, #fffaf2); }
.note--warn svg { color: #c58a2a; }

.dtable { width: 100%; border-collapse: collapse; font-size: .875rem; }
.dtable th, .dtable td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.dtable thead th { background: #fbfaff; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable td:first-child { white-space: nowrap; }
.dtable code { font-family: var(--mono); font-size: .82em; color: var(--violet-600); }
.dtable__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }

/* ===========================================================================
   DEVELOPERS
   ========================================================================= */

/* The pipeline. Three stages plus a branch, drawn with borders rather than an
   image so it re-flows on a phone instead of shrinking to illegibility. */
.pipe { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 2rem; }
.pipe__step { position: relative; padding: 1.35rem 1.3rem; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.dark .pipe__step { border-color: rgba(255,255,255,.1); }
.pipe__step:first-child { border-radius: var(--r) 0 0 var(--r); }
.pipe__step:last-child { border-radius: 0 var(--r) var(--r) 0; }
.pipe__step + .pipe__step { border-left: 0; }
.pipe__n { font-family: var(--mono); font-size: .68rem; color: var(--violet-300); letter-spacing: .1em; }
.pipe__step h4 { font-size: 1.02rem; margin: .5rem 0 .4rem; }
.pipe__step p { font-size: .84rem; line-height: 1.55; }
.pipe__step::after {
  content: '';
  position: absolute; right: -7px; top: 50%; z-index: 1;
  width: 12px; height: 12px; margin-top: -6px;
  border-top: 2px solid var(--violet-300); border-right: 2px solid var(--violet-300);
  transform: rotate(45deg);
  background: #171a26;
}
.pipe__step:last-child::after { display: none; }

.pkgs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; }
.pkg {
  display: flex; gap: .9rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.2rem;
  transition: border-color .18s ease, transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;
}
.pkg:hover { border-color: var(--violet-300); transform: translateY(-2px); box-shadow: var(--shadow); }
.pkg__icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--violet-050); color: var(--violet); border: 1px solid #e6e2fb; }
.pkg__icon svg { width: 17px; height: 17px; }
.pkg b { display: block; font-family: var(--mono); font-size: .82rem; color: var(--violet-600); }
.pkg p { margin-top: .3rem; font-size: .85rem; color: var(--muted); line-height: 1.5; }

.split { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 2.4rem; align-items: center; }
.split--wide { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
.split h3 { font-size: 1.45rem; }
.split > div > p { margin-top: .9rem; color: var(--muted); font-size: .96rem; line-height: 1.65; }
.dark .split > div > p { color: var(--ink-2); }

.tools { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.tools code {
  font-family: var(--mono); font-size: .74rem;
  padding: .35rem .65rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #c9cce0;
}

.rules { display: grid; gap: .1rem; margin-top: 1.4rem; }
.rules__row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: 1.2rem; padding: .95rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.rules__row b { font-size: .93rem; }
.rules__row span { font-size: .89rem; color: var(--muted); line-height: 1.6; }
.dark .rules__row { border-color: rgba(255,255,255,.1); }
.dark .rules__row span { color: var(--ink-2); }

/* ===========================================================================
   COMPANY
   ========================================================================= */

/* Editorial pull-quote scale: the company page has one job, which is to say
   what the thing is for. That sentence gets to be the largest type on the site
   after the landing headline. */
.creed { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.22; letter-spacing: -.03em; max-width: 24ch; }
.creed em { font-style: normal; color: var(--violet); }

.stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.stat { padding: 1.5rem 1.2rem; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line-2); }
.stat b { display: block; font-family: var(--display); font-size: 2rem; letter-spacing: -.04em; line-height: 1; background: linear-gradient(120deg, #7c5ce8, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { display: block; margin-top: .5rem; font-size: .78rem; color: var(--muted); line-height: 1.4; }

.tenets { display: grid; gap: 0; }
.tenet { display: grid; grid-template-columns: 4rem minmax(0,1fr); gap: 1.6rem; padding: 1.8rem 0; border-top: 1px solid var(--line); }
.tenet__n { font-family: var(--display); font-size: 1.6rem; color: var(--violet-300); letter-spacing: -.03em; line-height: 1; }
.tenet h3 { font-size: 1.24rem; }
.tenet p { margin-top: .6rem; color: var(--muted); font-size: .95rem; line-height: 1.68; max-width: 44rem; }
.tenet p + p { margin-top: .6rem; }
.tenet q { color: var(--ink-2); font-style: italic; }

.phases { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; }
.phase { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.4rem; position: relative; }
.phase__mark { display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .6rem; border-radius: var(--r-pill); }
.phase__mark--now { color: var(--violet); background: var(--violet-050); }
.phase__mark--next { color: #7b8196; background: #f3f4f8; }
.phase h3 { font-size: 1.14rem; margin: .9rem 0 .5rem; }
.phase p { font-size: .89rem; color: var(--muted); line-height: 1.6; }
.phase ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; }
.phase li { display: flex; gap: .5rem; font-size: .83rem; color: var(--ink-2); }
.phase li svg { width: 13px; height: 13px; flex: none; margin-top: .28rem; color: var(--violet-300); }

.roles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; }
.role {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.15rem 1.3rem;
  transition: border-color .18s ease, transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;
}
.role:hover { border-color: var(--violet-300); transform: translateY(-2px); box-shadow: var(--shadow); }
.role b { display: block; font-size: .98rem; }
.role small { display: block; margin-top: .25rem; font-size: .8rem; color: var(--faint); }
.role svg { width: 17px; height: 17px; color: var(--violet); flex: none; }

/* ===========================================================================
   RESPONSIVE — site pages
   ========================================================================= */

/* Every track below is minmax(0, 1fr) rather than 1fr, without exception. A
   bare 1fr track takes its minimum from the item's min-content, and a <pre> is
   as wide as its longest line — so one code block silently widens the whole
   column and the page overflows sideways on a phone. */
@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .docs { grid-template-columns: 200px minmax(0,1fr); gap: 2rem; }
  .stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .stat:nth-child(4) { border-left: 0; }
  .stats .stat:nth-child(n+4) { border-top: 1px solid var(--line-2); }
}

@media (max-width: 900px) {
  .nav__burger { display: inline-flex; }
  .nav__in { position: relative; }
  .nav__right { margin-left: auto; }
  .nav__right .nav__login { display: none; }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
  .cta-band__act { justify-content: flex-start; }
  .split, .split--wide { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .meter { grid-template-columns: minmax(0, 1fr); }
  .phases { grid-template-columns: minmax(0, 1fr); }
  .pkgs, .roles { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.8rem; }
  .foot__brand { grid-column: 1 / -1; }

  /* Sidebar becomes a disclosure. The `open` attribute is set by script at this
     breakpoint, because CSS cannot force a <details> open and a sidebar that
     silently disappears is worse than one that has to be tapped. */
  .docs { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .side { position: static; max-height: none; border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: .3rem .9rem; }
  .side summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem .2rem; cursor: pointer; list-style: none;
    font-weight: 700; font-size: .92rem;
  }
  .side summary::-webkit-details-marker { display: none; }
  .side summary svg { width: 17px; height: 17px; color: var(--violet); transition: transform .2s ease; }
  .side[open] summary svg { transform: rotate(180deg); }
  .side__in { padding-bottom: 1rem; }
  .pipe { grid-template-columns: minmax(0, 1fr); }
  .pipe__step:first-child { border-radius: var(--r) var(--r) 0 0; }
  .pipe__step:last-child { border-radius: 0 0 var(--r) var(--r); }
  .pipe__step + .pipe__step { border-left: 1px solid rgba(255,255,255,.1); border-top: 0; }
  .pipe__step::after { right: 50%; top: auto; bottom: -7px; margin: 0 -6px 0 0; transform: rotate(135deg); }
  .ptable thead th { top: 0; }
}

@media (max-width: 620px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat:nth-child(odd) { border-left: 0; }
  .stats .stat:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .dark, .cta-band { padding: 1.6rem; border-radius: 20px; }
  .tenet { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .rules__row { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .role { flex-wrap: wrap; }
  .page-hero { padding-top: 2.2rem; }
}

/* ===========================================================================
   INVESTOR DOCUMENTS — business plan, pitch deck, one-pager
   ---------------------------------------------------------------------------
   Three documents sharing the site's type, colour and surfaces, and differing
   only in how they are *paginated*: the plan is a scroll, the deck is ten
   fixed frames, the one-pager is a single sheet. Everything below that looks
   like duplication between them is the difference between those three shapes.
   ========================================================================= */

/* ---- shared: source references ------------------------------------------
   A superscript that is also a link. Kept off the underline treatment the rest
   of the prose links use — at 0.7em an underline reads as a smudge. */
.doc sup { font-size: .68em; line-height: 0; }
.doc sup a {
  color: var(--violet);
  font-weight: 600;
  border-bottom: 0 !important;
  padding: 0 .08em;
}
.doc sup a:hover { text-decoration: underline; }

.srcs { font-size: .88rem !important; }
.srcs li { line-height: 1.6; }
.srcs li + li { margin-top: .55rem; }
.srcs em { color: var(--faint); font-style: normal; font-size: .92em; }

/* Byline row under a document's lede. */
.docmeta {
  display: flex; flex-wrap: wrap; gap: .45rem 1.4rem;
  margin-top: 1.6rem;
  font-size: .8rem; color: var(--faint);
}
.docmeta span { display: inline-flex; align-items: center; gap: .42rem; }
.docmeta svg { width: 14px; height: 14px; color: var(--violet-300); }

/* ---- shared: the market funnel ------------------------------------------
   Bars whose width is the argument. Each carries a minimum width because the
   narrowest bar still has to hold a sentence — a funnel that becomes
   illegible at the bottom has hidden its own conclusion. */
.funnel { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.funnel__row { display: grid; gap: .45rem; }
.funnel__bar {
  width: var(--w);
  min-width: min(100%, 21rem);
  padding: .75rem 1.05rem;
  border-radius: 12px;
  color: #fff;
  font-size: .9rem;
  line-height: 1.35;
  background: linear-gradient(100deg, #7b68ee, var(--violet));
  box-shadow: 0 6px 18px rgba(91, 69, 224, .18);
}
.funnel__bar b { font-family: var(--display); font-size: 1.12em; letter-spacing: -.02em; margin-right: .3em; }
.funnel__bar--2 { background: linear-gradient(100deg, #6a5ae8, #5478f0); }
.funnel__bar--3 { background: linear-gradient(100deg, #5478f0, var(--blue)); }
.funnel__bar--4 { background: linear-gradient(100deg, var(--blue), #6fb6ff); box-shadow: 0 0 0 3px rgba(74,143,247,.16), 0 6px 18px rgba(74,143,247,.2); }
/* On a slide the funnel is read from across a room, and its type has to scale
   with the frame like everything else in there — so the rem sizes above become
   container units and the explanatory notes come off entirely. */
.funnel--deck { gap: .8cqw; margin-top: 1.2cqw; }
.funnel--deck .funnel__row { gap: 0; }
.funnel--deck .funnel__bar { min-width: min(100%, 17cqw); padding: .85cqw 1.1cqw; border-radius: 8px; font-size: 1.18cqw; line-height: 1.3; }
.funnel--deck .funnel__bar b { font-size: 1.25em; }

.funnel__note { font-size: .82rem !important; color: var(--muted) !important; line-height: 1.55 !important; max-width: 46rem; margin: 0 !important; }

/* ---- shared: the three-year bars ---------------------------------------- */
.barchart {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 1.5rem;
  padding: 1.3rem 1.4rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
/* A definite middle row is what lets the bars take a percentage height. With
   an auto row the percentage has nothing to resolve against and every bar
   collapses to its min-height. */
.barchart__col { display: grid; grid-template-rows: auto 150px auto; gap: .55rem; text-align: center; }
.barchart__col i {
  align-self: end;
  height: var(--h); min-height: 10px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #8b7cf0, var(--violet));
}
.barchart__v { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; color: var(--ink); }
.barchart__k { font-size: .74rem; color: var(--muted); }

/* ===========================================================================
   THE DECK
   ---------------------------------------------------------------------------
   Ten frames at 16:9. The card's width is derived from the viewport *height*
   as well as its width, so the frame is always whole — a deck that needs
   scrolling inside a slide is a document pretending to be a deck.

   Type inside a slide is sized in `cqw`, against the card as a container. That
   is what makes one stylesheet serve both a 1440px screen and a 338.7mm PDF
   page: the card changes size, and everything in it changes with it.
   ========================================================================= */

html.is-deck-root, html:has(body.is-deck) { scroll-snap-type: y proximity; }
body.is-deck { overflow-x: hidden; }

.slide {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 5.4rem var(--gutter) 3.4rem;
  scroll-snap-align: center;
  scroll-margin-top: 0;
}

.slide__in {
  /* Three constraints, whichever binds first: the design width, the viewport,
     and the height the viewport has left after the nav and the HUD. */
  width: min(1160px, 100%, (100vh - 9.4rem) * 16 / 9);
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3.5cqw 4.2cqw;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow-lift);
}

.slide__n {
  font-family: var(--body);
  font-size: 1.28cqw; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--violet);
}
.slide__in h1 { font-size: 5.2cqw; line-height: 1.04; margin-top: .5em; }
.slide__in h2 { font-size: 4.05cqw; line-height: 1.07; margin-top: .4em; }
.slide__lede { margin-top: 1.15cqw; font-size: 1.72cqw; line-height: 1.5; color: var(--muted); max-width: 52ch; }
.slide__body { margin-top: 1.2cqw; font-size: 1.52cqw; line-height: 1.55; color: var(--ink-2); }
.slide__note { margin-top: 1cqw; font-size: 1.24cqw; line-height: 1.5; color: var(--faint); }
.slide__foot {
  margin-top: auto; padding-top: 1.4cqw;
  font-size: 1.18cqw; color: var(--faint);
  border-top: 1px solid var(--line-2);
}
.slide__foot span { color: var(--violet); }

/* The claim that closes a slide. Tinted rather than bordered — it is a
   conclusion, not another item in the list above it. */
.slide__kicker {
  margin-top: auto;
  /* Positioned icon, not a flex sibling — the same reason `.ticks` uses one.
     A kicker is one sentence with dates and figures bolded inside it, and as
     flex items every one of those <b>s becomes its own column. */
  position: relative;
  padding: 1.05cqw 1.4cqw 1.05cqw 3.9cqw;
  border-radius: 12px;
  background: linear-gradient(120deg, var(--violet-050), #f6f4ff);
  border: 1px solid #e6e2fb;
  font-size: 1.34cqw; line-height: 1.5; color: var(--ink-2);
}
.slide__kicker svg { position: absolute; left: 1.4cqw; top: 1.25cqw; width: 1.9cqw; height: 1.9cqw; color: var(--violet); }

.slide__grid { display: grid; gap: 1.4cqw; margin-top: 2cqw; }
.slide__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slide__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 2.4cqw; margin-top: 1.5cqw; }
.slide__split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Cards inside a slide are flat: the frame already carries the elevation, and
   a raised card on a raised card reads as clutter at presentation distance. */
.scard { display: grid; align-content: start; gap: .7cqw; padding: 1.5cqw 1.4cqw; border: 1px solid var(--line); border-radius: 12px; background: #fdfdff; }
.scard__ico { width: 2.9cqw; height: 2.9cqw; display: grid; place-items: center; border-radius: 8px; background: var(--violet-050); color: var(--violet); }
.scard__ico svg { width: 1.7cqw; height: 1.7cqw; }
.scard b { font-family: var(--display); font-size: 1.5cqw; letter-spacing: -.02em; line-height: 1.2; }
.scard p { font-size: 1.24cqw; line-height: 1.5; color: var(--muted); }
.scard q { font-style: italic; color: var(--ink-2); }

.fact { padding: 1.3cqw 1.3cqw; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.fact b { display: block; font-family: var(--display); font-size: 2.5cqw; letter-spacing: -.04em; line-height: 1; background: linear-gradient(120deg, #7c5ce8, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fact span { display: block; margin-top: .6cqw; font-size: 1.16cqw; line-height: 1.45; color: var(--muted); }

/* Dated events. The date column is fixed so the four rows scan as a column of
   dates rather than four sentences that happen to start with one. */
.tl { display: grid; gap: 0; margin-top: 1.6cqw; }
.tl__row { display: grid; grid-template-columns: 7.2cqw minmax(0, 1fr); gap: 1.6cqw; padding: .92cqw .6cqw; border-top: 1px solid var(--line); }
.tl__when { text-align: right; }
.tl__when b { display: block; font-family: var(--display); font-size: 1.72cqw; letter-spacing: -.03em; color: var(--violet); line-height: 1.1; }
.tl__when span { display: block; font-size: 1.06cqw; color: var(--faint); }
.tl__what b { font-family: var(--display); font-size: 1.56cqw; letter-spacing: -.02em; }
.tl__what p { margin-top: .35cqw; font-size: 1.24cqw; line-height: 1.5; color: var(--muted); }

/* The arc reuses the dated-events layout, so the shipped surface needs a way to
   read as "this one exists" without a second component. */
.tl__row--now { background: linear-gradient(100deg, var(--violet-050), rgba(255,255,255,0) 70%); border-radius: 8px; }
.tl__row--now .tl__when b { color: var(--violet-600); }
.tl__row--now .tl__what > b::after {
  content: 'shipped';
  margin-left: .7em;
  font-family: var(--body); font-size: .62em; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet); background: #fff;
  border: 1px solid var(--violet-300); border-radius: 99px;
  padding: .12em .55em; vertical-align: .12em;
}

/* A quotation that is evidence, not decoration — so it is attributed and it
   sits on a rule rather than in a tinted box. */
.pull { margin: 1.1cqw 0 0; padding: 0 0 0 1.3cqw; border-left: 3px solid var(--violet-300); }
.pull p { font-size: 1.42cqw; line-height: 1.5; color: var(--ink-2); font-style: italic; }
.pull cite { display: block; margin-top: .45cqw; font-size: 1.1cqw; font-style: normal; color: var(--faint); }

.ticks { list-style: none; margin: 1.2cqw 0 0; padding: 0; display: grid; gap: .72cqw; }
/* The check is positioned, not a flex sibling. As a flex item a <b> opening the
   line becomes its own column, and the sentence splits into two ragged stacks
   instead of reading as one. */
.ticks li { position: relative; padding-left: 2.6cqw; font-size: 1.26cqw; line-height: 1.5; color: var(--ink-2); }
.ticks svg { position: absolute; left: 0; top: .3em; width: 1.55cqw; height: 1.55cqw; color: #3aa76d; }
.ticks--lg li { font-size: 1.36cqw; }

.steps { margin: 1cqw 0 0; padding-left: 1.5cqw; display: grid; gap: .9cqw; }
.steps li { font-size: 1.28cqw; line-height: 1.5; color: var(--ink-2); }
.steps li::marker { color: var(--violet); font-weight: 700; }

/* The retention comparison. Two panels that have to be read against each
   other, so they are the same size and differ only in the one colour that
   carries the verdict. */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2cqw; }
.vs__side { padding: 1.4cqw 1.3cqw; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.vs__side--bad { border-color: #f3d9d9; background: linear-gradient(150deg, #fff6f5, #fffbfb); }
.vs__side--good { border-color: #d6e9d9; background: linear-gradient(150deg, #f2fbf5, #fbfffc); }
.vs__label { font-size: 1.06cqw; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.vs__side > b { display: block; margin-top: .4cqw; font-family: var(--display); font-size: 3.1cqw; letter-spacing: -.04em; line-height: 1; }
.vs__side--bad > b { color: #c0453c; }
.vs__side--good > b { color: #2b8558; }
.vs__side > span { display: block; margin-top: .55cqw; font-size: 1.16cqw; line-height: 1.45; color: var(--ink-2); }
.vs__why { margin-top: .8cqw; padding-top: .7cqw; border-top: 1px solid var(--line-2); font-size: 1.1cqw; line-height: 1.45; color: var(--muted); }

.warn { display: flex; gap: .9cqw; padding: 1.05cqw 1.15cqw; border-radius: 12px; border: 1px solid #f6e3c9; background: linear-gradient(140deg, #fdf6ea, #fffaf3); }
.warn svg { width: 1.9cqw; height: 1.9cqw; flex: none; color: #c58a2a; margin-top: .1em; }
.warn p { font-size: 1.24cqw; line-height: 1.5; color: var(--ink-2); }

/* Tables at presentation distance: no vertical rules, generous row padding,
   and the first column doing the labelling work. */
.mtable { width: 100%; border-collapse: collapse; margin-top: 1.2cqw; font-size: 1.2cqw; }
.mtable th, .mtable td { padding: .62cqw .8cqw; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; line-height: 1.42; }
.mtable thead th { font-size: 1.02cqw; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 700; background: #fbfaff; }
.mtable tbody tr:last-child td { border-bottom: 0; }
.mtable td small { display: block; margin-top: .18cqw; font-size: .88em; color: var(--faint); font-weight: 400; }
.mtable .yes { color: #2b8558; font-weight: 700; }
.mtable .no { color: #c0453c; font-weight: 700; }
.mtable--comp td:first-child { width: 27%; }
.mtable--flag td { background: var(--violet-050); }
.mtable--flag td:first-child { border-left: 3px solid var(--violet); }

.tiercard { padding: 1.1cqw 1cqw; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.tiercard span { font-size: 1.02cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.tiercard b { display: block; margin: .45cqw 0 .5cqw; font-family: var(--display); font-size: 2.5cqw; letter-spacing: -.04em; line-height: 1; }
.tiercard b i { font-style: normal; font-size: .38em; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.tiercard small { font-size: 1.12cqw; line-height: 1.45; color: var(--muted); }
.tiercard--hot { border-color: var(--violet-300); background: linear-gradient(160deg, var(--violet-050), #fff 60%); }

/* Use of funds. The bar is the number — the percentage is only there so the
   two smallest rows are still readable. */
.use { display: grid; gap: .7cqw; margin-top: 1.6cqw; }
.use__row { display: grid; grid-template-columns: minmax(0, 1fr) 34% auto; gap: 1cqw; align-items: center; font-size: 1.2cqw; color: var(--ink-2); }
.use__row i { height: .95cqw; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--blue)); width: var(--w); box-shadow: inset 0 0 0 100vmax rgba(0,0,0,0); }
.use__row b { font-family: var(--display); font-size: 1.35cqw; color: var(--violet); }

.askbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 1.5cqw; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.askbar div { padding: 1.1cqw .9cqw; text-align: center; }
.askbar div + div { border-left: 1px solid var(--line-2); }
.askbar b { display: block; font-family: var(--display); font-size: 2cqw; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.askbar span { display: block; margin-top: .4cqw; font-size: 1.02cqw; color: var(--muted); }

/* The dark band and the terminal shrink to slide scale rather than keeping
   the document sizes they carry elsewhere on the site. */
.deck__dark { margin-top: 1.8cqw; padding: 2cqw; border-radius: 16px; }
.deck__dark .pipe__step { padding: 1.4cqw 1.3cqw; }
.deck__dark .pipe__n { font-size: 1.06cqw; }
.deck__dark .pipe__step h4 { font-size: 1.5cqw; margin: .5cqw 0 .4cqw; }
.deck__dark .pipe__step p { font-size: 1.16cqw; line-height: 1.5; }
.deck__dark .pipe__step::after { width: 1.1cqw; height: 1.1cqw; right: -.55cqw; margin-top: -.55cqw; }
.deck__term { margin-top: 0; }
.deck__term .term__bar { padding: .7cqw .9cqw; }
.deck__term .term__bar i { width: .75cqw; height: .75cqw; }
.deck__term .term__bar span { font-size: 1cqw; }
.deck__term pre { padding: 1.1cqw 1.2cqw; }
.deck__term code { font-size: 1.02cqw; line-height: 1.58; }

/* Title and closing frames: the portal appears twice in the deck for the same
   reason it appears twice on the landing page — it bookends. */
.slide--title, .slide--ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 3cqw; align-items: center; }
.slide--title { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); grid-template-rows: minmax(0, 1fr) auto; }
.slide__art { position: relative; align-self: center; aspect-ratio: 1 / .95; }
.slide__art > * { position: absolute; inset: 0; margin: auto; }
.slide__burst { width: 100%; height: auto; opacity: .85; }
.slide__portal { width: 62%; height: auto; filter: drop-shadow(0 12px 34px rgba(60, 40, 160, .22)); }
.slide__art--ask { order: 2; }
.slide__logo { width: 22cqw; height: auto; display: block; }
.slide__lead { min-width: 0; }
.slide__marks { list-style: none; margin: 2cqw 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8cqw 1.8cqw; }
.slide__marks li { display: flex; align-items: center; gap: .55cqw; font-size: 1.24cqw; font-weight: 600; color: var(--ink-2); }
.slide__marks svg { width: 1.5cqw; height: 1.5cqw; color: var(--violet); }
.slide--title .slide__foot { grid-column: 1 / -1; margin-top: 0; align-self: end; }
.slide--ask { gap: 2.6cqw; }
.slide--ask .slide__art--ask { display: none; }

/* ---- deck chrome --------------------------------------------------------
   Fixed, not in flow: it has to be reachable from slide seven as easily as
   from slide one. It is also the only thing on the page that is not part of
   the document, which is exactly the rule `@media print` uses to remove it. */
.deck__hud {
  position: fixed; right: var(--gutter); bottom: 1.3rem; z-index: 45;
  display: flex; align-items: center; gap: .75rem;
  padding: .45rem .45rem .45rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(14px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.deck__count { font-family: var(--mono); font-size: .78rem; color: var(--faint); }
.deck__count b { font-family: var(--display); font-size: 1.05rem; color: var(--ink); letter-spacing: -.02em; margin-right: .18rem; }
.deck__acts { display: flex; align-items: center; gap: .35rem; }
.deck__btn {
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--ink-2); cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.deck__btn:hover { border-color: var(--violet-300); color: var(--violet); }
.deck__btn:disabled { opacity: .35; cursor: default; }
.deck__btn svg { width: 15px; height: 15px; }
.deck__hud .btn { margin-left: .25rem; }

.deck__rail { position: fixed; left: 1.4rem; top: 50%; transform: translateY(-50%); z-index: 45; display: grid; gap: .5rem; }
.deck__rail a { display: flex; align-items: center; gap: .6rem; padding: .15rem 0; }
.deck__rail i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #d9d6ec; transition: background .18s ease, transform .18s ease; }
.deck__rail span { font-size: .74rem; font-weight: 600; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.deck__rail a:hover i { background: var(--violet-300); }
.deck__rail a:hover span { opacity: 1; transform: none; }
.deck__rail a.is-on i { background: var(--violet); transform: scale(1.45); }
.deck__rail a.is-on span { opacity: 1; transform: none; color: var(--violet); }
.deck__rail a:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

/* ===========================================================================
   THE ONE-PAGER
   ---------------------------------------------------------------------------
   Sized to A4 on screen as well as on paper. A one-pager that silently becomes
   two pages is not a one-pager, so the screen has to be able to show you that
   it fits before the print dialog does.
   ========================================================================= */

.one-wrap { padding-bottom: 4rem; }
.one-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 3rem 0 1.6rem;
}
.one-bar__h { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: .55rem; }
.one-bar__act { display: flex; gap: .7rem; flex-wrap: wrap; }

.sheet {
  width: min(100%, 860px);
  aspect-ratio: 210 / 297;
  container-type: size;
  margin: 0 auto;
  /* Vertical padding is free to tighten — the type scale is cqw (width-based), so trimming top and
     bottom just returns space to the content. Horizontal padding is not: it feeds the content-box
     width that every cqw resolves against, so shrinking it scales the whole sheet up and overflows
     the fixed A4 height. So: close the oversized top gap and the bottom, ease the sides only a little. */
  padding: 3.6cqw 5cqw 3.4cqw;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2cqw; padding-bottom: 2.4cqw; border-bottom: 2px solid var(--violet); }
.sheet__logo { width: 28cqw; height: auto; display: block; }
.sheet__meta { text-align: right; font-size: 1.5cqw; line-height: 1.5; }
.sheet__meta b { display: block; color: var(--violet); }
.sheet__meta span { color: var(--faint); }

.sheet__one { margin-top: 1.9cqw; font-size: 1.76cqw; line-height: 1.46; color: var(--ink-2); }
.sheet__one b { color: var(--ink); }

.sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2cqw; margin-top: 2cqw; flex: 1; min-height: 0; }
.sheet__col { display: grid; align-content: start; gap: 1.95cqw; }
.sheet__blk h2 {
  display: flex; align-items: center; gap: .8cqw;
  font-family: var(--body); font-size: 1.5cqw; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--violet);
  margin-bottom: .7cqw;
}
.sheet__blk h2 svg { width: 2cqw; height: 2cqw; color: var(--violet-300); }
.sheet__blk p { font-size: 1.52cqw; line-height: 1.42; color: var(--ink-2); }
.sheet__blk p + p { margin-top: .75cqw; }
.sheet__blk q { font-style: italic; }
.sheet__tight { font-size: 1.44cqw !important; color: var(--muted) !important; }
.sheet__kick { margin-top: .8cqw !important; padding: .8cqw 1cqw; border-radius: 8px; background: var(--violet-050); border: 1px solid #e6e2fb; font-size: 1.4cqw !important; line-height: 1.46 !important; }
.sheet__blk--tint { padding: 1.4cqw 1.4cqw; border-radius: 10px; background: linear-gradient(150deg, #f7f5ff, #fbfaff); border: 1px solid #e8e4fb; }
.sheet__blk--ask { padding: 1.4cqw 1.4cqw; border-radius: 10px; background: linear-gradient(120deg, #5b45e0, #6a5ae8 55%, #4a8ff7); color: #fff; }
.sheet__blk--ask h2 { color: rgba(255,255,255,.82); }
.sheet__blk--ask h2 svg { color: rgba(255,255,255,.65); }
.sheet__blk--ask p { color: rgba(255,255,255,.94); }
.sheet__blk--ask .sheet__tight { color: rgba(255,255,255,.78) !important; }

.sheet__steps { margin: 0; padding-left: 1.6cqw; display: grid; gap: .62cqw; }
.sheet__steps li { font-size: 1.48cqw; line-height: 1.46; color: var(--ink-2); }
.sheet__steps li::marker { color: var(--violet); font-weight: 700; }
/* The arc: numbered surfaces, with the shipped one carrying its own tag rather
   than a separate legend. */
.sheet__arc { list-style: none; margin: 0 0 .9cqw; padding: 0; display: grid; gap: .55cqw; }
.sheet__arc li { font-size: 1.4cqw; line-height: 1.45; color: var(--ink-2); }
.sheet__arc b { color: var(--violet-600); }
.sheet__arc i {
  font-style: normal; font-size: .74em; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--violet); background: #fff;
  border: 1px solid var(--violet-300); border-radius: 99px;
  padding: .08em .5em; vertical-align: .1em;
}

.sheet__dates { list-style: none; margin: 0; padding: 0; display: grid; gap: .65cqw; }
.sheet__dates li { font-size: 1.42cqw; line-height: 1.45; color: var(--ink-2); padding-left: 1.3cqw; border-left: 2px solid var(--violet-300); }
.sheet__dates b { color: var(--violet); }

.sheet__t { width: 100%; border-collapse: collapse; margin-top: .8cqw; font-size: 1.44cqw; }
.sheet__t td { padding: .5cqw 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); line-height: 1.4; }
.sheet__t td:last-child { text-align: right; white-space: nowrap; padding-left: 1cqw; }
.sheet__t tr:last-child td { border-bottom: 0; }
.sheet__t b { font-family: var(--display); font-size: 1.12em; letter-spacing: -.02em; color: var(--ink); }

.sheet__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 1.1cqw; }
.sheet__stats div { padding: .8cqw .5cqw; text-align: center; }
.sheet__stats div + div { border-left: 1px solid var(--line-2); }
.sheet__stats b { display: block; font-family: var(--display); font-size: 2.1cqw; letter-spacing: -.04em; line-height: 1; background: linear-gradient(120deg, #7c5ce8, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sheet__stats span { display: block; margin-top: .35cqw; font-size: 1.02cqw; color: var(--muted); line-height: 1.3; }

.sheet__foot { display: flex; justify-content: space-between; gap: 2cqw; flex-wrap: wrap; margin-top: auto; padding-top: 1.2cqw; border-top: 1px solid var(--line); font-size: 1.24cqw; color: var(--faint); }
.sheet__foot b { color: var(--violet); }

/* ===========================================================================
   RESPONSIVE — investor documents
   ---------------------------------------------------------------------------
   Below the desktop breakpoints a 16:9 frame and an A4 sheet stop being
   readable at any type size, so both give up their fixed proportions and
   become ordinary stacked documents. The container query units go with them —
   `cqw` against a phone-width card is 3px.
   ========================================================================= */

@media screen and (max-width: 1280px) {
  .deck__rail { display: none; }
}

@media screen and (max-width: 1080px) {
  .barchart { padding: 1rem; gap: .8rem; }
  .funnel__bar { min-width: min(100%, 16rem); }
}

/* `screen and` is load-bearing, not tidiness. An A4 page box is 794 CSS px
   wide and a 16:9 slide is 1280 — the first sits under this breakpoint, so
   without the qualifier the printed one-pager linearises into a single column
   and the sheet's own `overflow: hidden` silently clips two thirds of it. */
@media screen and (max-width: 900px) {
  html.is-deck-root, html:has(body.is-deck) { scroll-snap-type: none; }
  .slide { min-height: 0; padding: 2rem var(--gutter); }
  .slide__in {
    width: 100%;
    aspect-ratio: auto;
    container-type: normal;
    padding: 1.8rem 1.5rem;
    border-radius: 18px;
  }
  /* Everything below restates, in rem, what `cqw` was doing above. */
  .slide__n { font-size: .7rem; }
  .slide__in h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .slide__in h2 { font-size: clamp(1.55rem, 6.4vw, 2rem); }
  .slide__lede { font-size: 1rem; margin-top: .9rem; }
  .slide__body { font-size: .93rem; margin-top: .8rem; }
  .slide__note { font-size: .82rem; }
  .slide__foot { font-size: .78rem; padding-top: 1rem; }
  .slide__kicker { font-size: .88rem; padding: .9rem 1rem .9rem 2.6rem; margin-top: 1.2rem; }
  .slide__kicker svg { width: 17px; height: 17px; left: .9rem; top: 1rem; }
  .slide__grid, .slide__grid--4, .slide__split, .slide__split--even,
  .vs, .askbar, .sheet__stats { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .slide__grid { margin-top: 1.2rem; }
  .askbar div + div, .sheet__stats div + div { border-left: 0; border-top: 1px solid var(--line-2); }
  .scard { padding: 1rem; gap: .4rem; }
  .scard__ico { width: 30px; height: 30px; }
  .scard__ico svg { width: 16px; height: 16px; }
  .scard b { font-size: 1rem; }
  .scard p, .fact span, .vs__side > span, .vs__why, .warn p { font-size: .85rem; }
  .fact b, .tiercard b, .askbar b { font-size: 1.6rem; }
  .tl__row { grid-template-columns: 4.4rem minmax(0, 1fr); gap: 1rem; padding: .8rem 0; }
  .tl__when b { font-size: 1rem; }
  .tl__when span, .vs__label, .tiercard span { font-size: .68rem; }
  .tl__what b { font-size: 1rem; }
  .tl__what p, .ticks li, .ticks--lg li, .steps li, .use__row, .mtable { font-size: .86rem; }
  .ticks li { padding-left: 1.55rem; }
  .ticks svg { width: 15px; height: 15px; top: .25em; }
  .pull p { font-size: .95rem; }
  .pull cite { font-size: .78rem; }
  .vs__side > b { font-size: 2rem; }
  .warn svg { width: 18px; height: 18px; }
  .mtable th, .mtable td { padding: .55rem .5rem; }
  .mtable thead th { font-size: .68rem; }
  .mtable--comp td:first-child { width: auto; }
  .use__row { grid-template-columns: minmax(0, 1fr) 26% auto; gap: .6rem; }
  .use__row i { height: 7px; }
  .use__row b { font-size: .9rem; }
  .slide--title, .slide--ask { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .slide__art { display: none; }
  .slide__logo { width: 190px; }
  .slide__marks { gap: .5rem 1.1rem; margin-top: 1.2rem; }
  .slide__marks li { font-size: .82rem; }
  .slide__marks svg { width: 15px; height: 15px; }
  .deck__dark { padding: 1.3rem; margin-top: 1.2rem; }
  .deck__dark .pipe__step { padding: 1rem; }
  .deck__dark .pipe__n { font-size: .66rem; }
  .deck__dark .pipe__step h4 { font-size: 1rem; margin: .4rem 0 .3rem; }
  .deck__dark .pipe__step p, .deck__term code { font-size: .8rem; }
  .deck__dark .pipe__step::after { width: 12px; height: 12px; right: 50%; margin: 0 -6px 0 0; }
  .deck__term .term__bar i { width: 9px; height: 9px; }
  .deck__term .term__bar span, .askbar span { font-size: .68rem; }
  .deck__term pre { padding: .8rem .9rem; }
  .deck__hud { right: 50%; transform: translateX(50%); bottom: .9rem; }

  /* The sheet becomes a document. Same content, no page. */
  .sheet {
    width: 100%;
    aspect-ratio: auto;
    container-type: normal;
    padding: 1.6rem 1.4rem 1.4rem;
    display: block;
  }
  .sheet__head { gap: 1rem; padding-bottom: 1rem; flex-wrap: wrap; }
  .sheet__logo { width: 180px; }
  .sheet__meta { text-align: left; font-size: .8rem; }
  .sheet__one { font-size: 1rem; margin-top: 1.2rem; }
  .sheet__grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; margin-top: 1.6rem; }
  .sheet__col { gap: 1.6rem; }
  .sheet__blk h2 { font-size: .72rem; gap: .5rem; margin-bottom: .6rem; }
  .sheet__blk h2 svg { width: 16px; height: 16px; }
  .sheet__blk p, .sheet__steps li { font-size: .9rem; }
  .sheet__tight, .sheet__kick, .sheet__dates li, .sheet__t { font-size: .86rem !important; }
  .sheet__arc li { font-size: .88rem; }
  .sheet__blk--tint, .sheet__blk--ask { padding: 1.1rem 1rem; }
  .sheet__steps { padding-left: 1.1rem; gap: .5rem; }
  .sheet__dates { gap: .55rem; }
  .sheet__dates li { padding-left: .8rem; }
  .sheet__t td { padding: .45rem 0; }
  .sheet__stats { margin-bottom: .8rem; }
  .sheet__stats div { padding: .7rem; }
  .sheet__stats b { font-size: 1.5rem; }
  .sheet__foot { font-size: .76rem; margin-top: 1.4rem; padding-top: .9rem; }
  .one-bar { padding: 2rem 0 1.2rem; }
}

/* ===========================================================================
   PRINT — the export path
   ---------------------------------------------------------------------------
   There is no PDF library on this site and there should not be: the browser
   already has a typesetter and a PDF writer, and every page here is a
   stylesheet away from using them. Each document declares its own `@page` size
   inline, because one shared stylesheet cannot hold three different ones.
   ========================================================================= */

@media print {
  /* Backgrounds are load-bearing here — the gradient bars *are* the numbers —
     so the colour-adjust hint is not decoration. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  html { scroll-behavior: auto; }
  body { background: #fff; }
  body::before, body::after { display: none !important; }

  /* Site furniture and any control that only makes sense on screen. */
  /* `.page-hero__cta` goes too: on paper a row of buttons is three dead
     rectangles, and the documents they point at are named in the text. */
  .nav, .foot, .cta-band, .deck__hud, .deck__rail, .one-bar, .memo-bar, .side,
  .page-hero__cta, [data-print], .doc__anchor { display: none !important; }

  a { color: inherit; text-decoration: none; }

  /* -- the business plan ------------------------------------------------- */
  .docs { display: block; padding-bottom: 0; }
  .doc { max-width: none; }
  .doc section { break-inside: auto; }
  .doc h2 { break-after: avoid; break-before: page; font-size: 17pt; }
  #summary h2 { break-before: auto; }
  .doc h3 { break-after: avoid; font-size: 12pt; }
  .doc p, .doc li { font-size: 9.6pt; line-height: 1.5; }
  .dtable__scroll, .note, .term, .code, .barchart, .funnel__row,
  .stat, .plan, .phase, .role, .scard { break-inside: avoid; }
  .dtable { font-size: 8.4pt; }
  .page-hero { padding-block: 0 1rem; }
  .page-hero::before { display: none; }
  .page-hero h1 { font-size: 26pt; }
  .docmeta { margin-top: .6rem; }
  .stats, .plans { break-inside: avoid; }
  .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats .stat:nth-child(n+3), .stats .stat:nth-child(n+4) { border-top: 0; }
  .stat + .stat { border-left: 1px solid var(--line-2); }
  .stat b { font-size: 15pt; }
  .stat span { font-size: 6.6pt; }
  .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* -- the deck ----------------------------------------------------------
     One slide per page, edge to edge. The frame stops being a card — on paper
     the page *is* the card, and a border round it would print a rectangle
     4mm inside the sheet. */
  body.is-deck .slide {
    min-height: 0;
    padding: 0;
    display: block;
    break-after: page;
    break-inside: avoid;
  }
  body.is-deck .slide:last-child { break-after: auto; }
  body.is-deck .slide__in {
    width: 100%;
    height: 190.5mm;              /* matches the @page declared in the deck  */
    max-width: none;
    aspect-ratio: auto;
    container-type: size;         /* keeps every cqw in the deck resolving   */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 13mm 15mm;
  }

  /* -- the one-pager ----------------------------------------------------- */
  body.is-sheet .one-wrap { padding: 0; max-width: none; }
  .sheet {
    width: 210mm;
    height: 297mm;
    aspect-ratio: auto;
    max-width: none;
    margin: 0;
    /* The sides feed the cqw the type resolves against, and the sheet's content is fit to the page
       so exactly that even 15mm→14mm scales the left column enough to push its last box into the
       footer. So the sides hold at 15mm and the tightening comes off the top and bottom, which only
       return vertical space — where the oversized gap was anyway. Kept clear of the ~5mm a printer
       cannot reach. */
    padding: 9mm 15mm 9mm;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
  }
}

/* ===========================================================================
   THE MEMO
   ---------------------------------------------------------------------------
   The document above the deck and below the appendix. Unlike the one-pager it
   is not a fixed sheet — five pages of continuous prose cannot be hand-fitted
   without the text fighting the page — so it flows, and `@media print` governs
   only where it is allowed to break.
   ========================================================================= */

.memo-wrap { padding-bottom: 4rem; }
.memo-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 3rem 0 1.6rem;
}
.memo-bar__h { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: .55rem; }
.memo-bar__act { display: flex; gap: .7rem; flex-wrap: wrap; }

.memo {
  max-width: 50rem;
  margin: 0 auto;
  padding: 3.4rem 3.6rem 2.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-lift);
}
.memo__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding-bottom: 1.3rem;
  border-bottom: 2px solid var(--violet);
}
.memo__logo { width: 200px; height: auto; display: block; }
.memo__meta { text-align: right; font-size: .82rem; line-height: 1.5; }
.memo__meta b { display: block; color: var(--violet); }
.memo__meta span { color: var(--faint); }

/* The only line in the document set at display scale. Everything else is
   argument; this is the claim the argument is for. */
.memo__thesis {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.08; letter-spacing: -.035em;
  margin-top: 2.2rem;
}
.memo__thesis em {
  font-style: normal;
  background: linear-gradient(100deg, #7c5ce8, var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.memo__stand {
  margin-top: 1.2rem;
  font-size: 1.05rem; line-height: 1.6; color: var(--muted);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.memo__sec { margin-top: 1.9rem; }
.memo__sec h2 {
  display: flex; align-items: baseline; gap: .7rem;
  font-size: 1.24rem; letter-spacing: -.025em;
  margin-bottom: .75rem;
}
.memo__sec h2 span {
  font-family: var(--mono); font-size: .78rem; font-weight: 400;
  color: var(--violet-300); letter-spacing: .04em;
}
.memo__sec p { font-size: .95rem; line-height: 1.62; color: var(--ink-2); }
.memo__sec p + p { margin-top: .8rem; }
.memo__sec sup { font-size: .68em; line-height: 0; color: var(--violet); font-weight: 600; }
.memo__sec em { font-style: italic; }

/* A paragraph that concedes something. Tinted rather than bordered — it is the
   same voice, not a callout box shouting a caveat. */
.memo__aside {
  margin-top: .9rem !important;
  padding: .85rem 1rem;
  border-left: 3px solid var(--violet-300);
  background: linear-gradient(100deg, var(--violet-050), #fbfaff);
  border-radius: 0 8px 8px 0;
  font-size: .9rem !important;
}

.memo__dates { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .55rem; }
.memo__dates li {
  font-size: .92rem; line-height: 1.55; color: var(--ink-2);
  padding-left: .9rem; border-left: 2px solid var(--violet-300);
}
.memo__dates b { color: var(--violet); }

.memo__table { margin-top: 1rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.memo__table table { width: 100%; border-collapse: collapse; font-size: .89rem; }
.memo__table td { padding: .55rem .85rem; border-bottom: 1px solid var(--line-2); color: var(--ink-2); line-height: 1.45; }
.memo__table tr:last-child td { border-bottom: 0; }
.memo__table td:first-child { width: 11.5rem; white-space: nowrap; background: #fbfaff; }
.memo__table td:first-child b { color: var(--ink); }

/* The arc. Numbered rows rather than a horizontal pipeline: the point is that
   each surface is gated on the one above it, and a row of equal boxes would
   say they are alternatives. */
.memo__arc { display: grid; gap: .5rem; margin-top: 1rem; }
.memo__arc-row {
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.memo__arc-row b { display: block; font-family: var(--display); font-size: 1rem; letter-spacing: -.02em; }
.memo__arc-row span { display: block; margin-top: .28rem; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.memo__arc-row--now {
  border-color: var(--violet-300);
  background: linear-gradient(100deg, var(--violet-050), #fff 70%);
}
.memo__arc-row--now b { color: var(--violet); }

/* Countable things, inline. Deliberately the repository's numbers and not
   usage or revenue — there is none of the latter yet, and a memo that invents
   it forfeits everything the rest of the document was for. */
.memo__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.memo__stats div { padding: .7rem .6rem; text-align: center; }
.memo__stats div + div { border-left: 1px solid var(--line-2); }
.memo__stats b {
  display: block; font-family: var(--display); font-size: 1.5rem;
  letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(120deg, #7c5ce8, var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.memo__stats span { display: block; margin-top: .3rem; font-size: .7rem; color: var(--muted); line-height: 1.35; }

.memo__foot {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 2.2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--faint);
}
.memo__foot b { color: var(--violet); }

@media screen and (max-width: 900px) {
  .memo { padding: 1.6rem 1.4rem; border-radius: 6px; }
  .memo-bar { padding: 2rem 0 1.2rem; }
  .memo__meta { text-align: left; }
  .memo__logo { width: 170px; }
  .memo__thesis { margin-top: 1.5rem; }
  .memo__stand { font-size: .98rem; }
  .memo__sec p, .memo__sec { font-size: .92rem; }
  .memo__table td:first-child { width: auto; white-space: normal; }
  .memo__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memo__stats div:nth-child(odd) { border-left: 0; }
  .memo__stats div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}

@media print {
  body.is-memo .memo-wrap { padding: 0; max-width: none; }
  .memo {
    max-width: none; margin: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .memo__thesis { font-size: 27pt; margin-top: 14pt; }
  .memo__stand { font-size: 10.6pt; }
  .memo__sec p, .memo__dates li { font-size: 9.5pt; line-height: 1.52; }
  .memo__sec h2 { font-size: 12.5pt; }
  .memo__table table { font-size: 8.8pt; }
  .memo__arc-row span { font-size: 8.8pt; }
  .memo__foot { font-size: 7.4pt; }
  .memo__stats b { font-size: 13pt; }
  .memo__stats span { font-size: 6.4pt; }
  .memo__stats { break-inside: avoid; }
  /* A heading orphaned at the foot of a page is the one break that reads as a
     mistake; everything else may fall where the text falls. */
  .memo__sec { break-inside: auto; }
  .memo__sec h2 { break-after: avoid; }
  .memo__table, .memo__arc-row, .memo__aside, .memo__dates li { break-inside: avoid; }
  .memo__head { break-after: avoid; }
}