/* PYXA website.

 *

 * Two palettes that never merge. Brand colour identifies: navy, violet,

 * violet-reversed, paper. Product colour reports state, and appears here

 * only inside samples of the product: never as decoration.

 *

 * Archivo for what a person wrote, IBM Plex Mono for what a machine

 * measured. Eyebrow labels use mono at 10.5-11px with 0.12em tracking,

 * the same convention the application uses.

 */



:root {

  /* Brand: identity only */

  --pyxa-navy: oklch(0.24 0.06 268);            /* #131D3B */

  --pyxa-violet: oklch(0.55 0.19 285);          /* #6B58D9, on light only */

  --pyxa-violet-reversed: oklch(0.62 0.19 285); /* #7E6EF2, on navy only */

  --pyxa-paper: oklch(0.98 0.005 280);          /* #FAF9FE */

  --icon-field: #0D1321;



  /* Product semantic: meaning is fixed */

  --state-p0: oklch(0.52 0.21 22);

  --state-verified: oklch(0.5 0.13 155);

  --state-verified-on-navy: oklch(0.68 0.13 155);

  --state-p0-on-navy: oklch(0.68 0.17 22);

  --state-unproven: oklch(0.62 0.02 265);

  --hatch-unproven: repeating-linear-gradient(135deg,

    oklch(0.9 0.01 265) 0 4px, oklch(0.8 0.01 265) 4px 6px);

  --hatch-unproven-navy: repeating-linear-gradient(135deg,

    oklch(0.48 0.02 265) 0 4px, oklch(0.32 0.03 265) 4px 6px);



  /* Surfaces and lines on navy */

  --navy-raised: oklch(0.28 0.06 268);

  --line-navy: rgba(255, 255, 255, 0.1);

  --line-navy-strong: rgba(255, 255, 255, 0.18);

  /* Text on navy: 0.55 alpha is the floor for 4.5:1, so nothing goes lower */

  --on-navy: #fff;

  --on-navy-muted: rgba(255, 255, 255, 0.74);

  --on-navy-faint: rgba(255, 255, 255, 0.6);



  /* Text and lines on paper */

  --ink: oklch(0.24 0.02 265);

  --ink-2: oklch(0.35 0.02 265);

  --ink-muted: oklch(0.47 0.02 265);

  --line-paper: oklch(0.88 0.008 265);



  --font-sans: Archivo, system-ui, sans-serif;

  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;



  --radius-card: 14px;

  --radius-frame: 16px;

  --gutter: clamp(16px, 4vw, 40px);

  --wrap: 1200px;



  /* Motion: strong ease-out for anything entering, never ease-in on UI */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --dur-ui: 180ms;

  --dur-reveal: 700ms;

}



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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {

  margin: 0;

  background: var(--icon-field);

  color: var(--on-navy);

  font-family: var(--font-sans);

  font-size: 17px;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

  overflow-x: clip;

}

img { display: block; max-width: 100%; height: auto; }

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

button { font: inherit; color: inherit; }

h1, h2, h3, h4, p { margin: 0; }

:focus-visible { outline: 2px solid var(--pyxa-violet-reversed); outline-offset: 3px; border-radius: 4px; }

.paper :focus-visible { outline-color: var(--pyxa-violet); }

::selection { background: var(--pyxa-violet-reversed); color: #fff; }



.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; color: var(--pyxa-navy); padding: 10px 14px; border-radius: 8px; }

.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }



/* ---------- Type ---------- */

.display-1 {

  font-size: clamp(44px, 7.4vw, 92px);

  font-weight: 600;

  letter-spacing: -0.045em;

  line-height: 0.98;

  text-wrap: balance;

}

.display-2 {

  font-size: clamp(34px, 5vw, 62px);

  font-weight: 600;

  letter-spacing: -0.04em;

  line-height: 1.02;

  text-wrap: balance;

}

.h3 { font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }

.h4 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }

.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--on-navy-muted); text-wrap: pretty; max-width: 62ch; }

.body { color: var(--on-navy-muted); text-wrap: pretty; }

.small { font-size: 14.5px; line-height: 1.55; }

.accent { color: var(--pyxa-violet-reversed); }

.paper .accent { color: var(--pyxa-violet); }

.eyebrow {

  display: inline-flex; align-items: center; gap: 10px;

  font-family: var(--font-mono); font-size: 11px; font-weight: 500;

  letter-spacing: 0.14em; text-transform: uppercase;

  color: var(--on-navy-faint);

}

.eyebrow::before { content: "//"; color: var(--pyxa-violet-reversed); letter-spacing: 0; }

.paper .eyebrow { color: var(--ink-muted); }

.paper .eyebrow::before { color: var(--pyxa-violet); }

.mono { font-family: var(--font-mono); font-feature-settings: "zero" 0; }

.num { font-family: var(--font-mono); font-size: 0.94em; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }



/* A phrase that gets its highlight when it scrolls in */

.mark {

  background-image: linear-gradient(transparent 62%, rgba(126, 110, 242, 0.42) 62%);

  background-repeat: no-repeat; background-size: 0% 100%;

  transition: background-size 900ms var(--ease-out) 250ms;

}

.paper .mark { background-image: linear-gradient(transparent 62%, rgba(107, 88, 217, 0.22) 62%); }

.is-in .mark, .mark.is-in { background-size: 100% 100%; }



/* ---------- Buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.btn {

  display: inline-flex; align-items: center; justify-content: center; gap: 8px;

  min-height: 48px; padding: 0 24px; border-radius: 999px;

  font-size: 15.5px; font-weight: 500; white-space: nowrap; cursor: pointer;

  border: 1px solid transparent;

  transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), transform 160ms var(--ease-out), color var(--dur-ui);

}

.btn:active { transform: scale(0.97); }

.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14.5px; }

.btn--violet { background: var(--pyxa-violet); color: #fff; }

.btn--light { background: var(--pyxa-paper); color: var(--pyxa-navy); }

.btn--ghost { border-color: var(--line-navy-strong); color: var(--on-navy); }

.btn--navy { background: var(--pyxa-navy); color: #fff; }

.btn--outline { border-color: var(--line-paper); color: var(--ink); background: #fff; }

.btn .arrow { transition: transform var(--dur-ui) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {

  .btn--violet:hover { background: oklch(0.5 0.19 285); }

  .btn--light:hover { background: #fff; }

  .btn--ghost:hover { border-color: rgba(255, 255, 255, 0.45); }

  .btn--navy:hover { background: oklch(0.3 0.07 268); }

  .btn--outline:hover { border-color: oklch(0.7 0.02 265); }

  .btn:hover .arrow { transform: translateX(3px); }

}

.link {

  display: inline-flex; align-items: center; gap: 6px;

  color: var(--pyxa-violet-reversed); font-weight: 500;

}

.paper .link { color: var(--pyxa-violet); }

.link .arrow { transition: transform var(--dur-ui) var(--ease-out); }

@media (hover: hover) and (pointer: fine) { .link:hover .arrow { transform: translateX(3px); } }

.mono-link { font-family: var(--font-mono); font-size: 13px; color: var(--on-navy-muted); }



/* ---------- Nav ---------- */

.nav {

  position: sticky; top: 0; z-index: 50;

  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), backdrop-filter 240ms;

  border-bottom: 1px solid transparent;

}

.nav.is-scrolled, .nav.is-open {

  background: rgba(13, 19, 33, 0.94);

  backdrop-filter: saturate(140%) blur(14px);

  -webkit-backdrop-filter: saturate(140%) blur(14px);

  border-bottom-color: var(--line-navy);

}

.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }

.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }

.brand img { width: 28px; height: 28px; }

.brand__word { font-weight: 500; font-size: 17px; letter-spacing: 0.06em; }

.nav__links {

  display: flex; gap: 2px; padding: 5px;

  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-navy); border-radius: 999px;

}

.nav__links > a, .nav__trigger {

  font-size: 14px; color: var(--on-navy-muted); padding: 7px 14px; border-radius: 999px;

  transition: color var(--dur-ui), background-color var(--dur-ui);

}

.nav__links > a[aria-current="page"], .nav__trigger[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.09); }

@media (hover: hover) and (pointer: fine) { .nav__links > a:hover, .nav__trigger:hover { color: #fff; } }

/* Menus. Each panel hangs from the nav bar itself (the sticky header is its
   containing block), centred, so it never runs off the side of the screen. */
.nav__trigger { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; }

.nav__chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-ui) var(--ease-out); }

.nav__item.is-open > .nav__trigger { color: #fff; }

.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.menu {

  position: absolute; top: calc(100% - 4px); left: 50%; transform: translateX(-50%);

  width: min(1040px, calc(100vw - 48px)); display: none;

  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 20px; padding: 20px 18px 10px;

  background: #0E1528; border: 1px solid var(--line-navy-strong); border-radius: 18px;

  box-shadow: 0 28px 60px -16px rgba(0, 0, 0, 0.6);

}

.menu--2 { width: min(720px, calc(100vw - 48px)); grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Bridges the gap between the trigger and the panel, so the pointer can cross it. */
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }

.nav__item.is-open > .menu { display: grid; animation: menu-in 200ms var(--ease-out); }

html:not(.js) .nav__item:hover > .menu, html:not(.js) .nav__item:focus-within > .menu { display: grid; }

@keyframes menu-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) { .nav__item.is-open > .menu { animation: none; } }

.menu__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.menu__head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy-faint); padding: 0 10px 8px; }

.menu__link { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 12px; color: #fff; transition: background-color var(--dur-ui); }

.menu__link b { display: block; font-size: 14px; font-weight: 500; }

.menu__link small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--on-navy-muted); }

.menu__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-navy-strong); background: rgba(126, 110, 242, 0.1); transition: border-color var(--dur-ui); }

/* Menu icons are Iconsax Free, Linear style (iconsax.io, free licence: commercial
   use, no attribution, not redistributable as loose files). Drawn on a 24 grid. */
.menu__ico svg { width: 18px; height: 18px; color: var(--pyxa-violet-reversed); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; }

.menu__link:focus-visible { background: rgba(255, 255, 255, 0.06); }

@media (hover: hover) and (pointer: fine) {

  .menu__link:hover { background: rgba(255, 255, 255, 0.06); }

  .menu__link:hover .menu__ico { border-color: var(--pyxa-violet-reversed); }

  .menu__foot:hover { color: #fff; }

}

.menu__foot { grid-column: 1 / -1; margin: 6px 10px 0; padding: 12px 0 8px; border-top: 1px solid var(--line-navy); font-size: 13.5px; color: var(--on-navy-muted); transition: color var(--dur-ui); }

/* Section anchors land below the sticky nav. */
section[id], h2[id], h3[id] { scroll-margin-top: 88px; }

.nav__end { display: flex; align-items: center; gap: 18px; }

.nav__quiet { font-size: 14px; color: var(--on-navy-muted); white-space: nowrap; }

/* Just above the sheet breakpoint the bar is full: tighter spacing keeps every
   label on one line. */
@media (min-width: 1081px) and (max-width: 1199px) {

  .nav__links > a, .nav__trigger { padding-inline: 10px; }

  .nav__end { gap: 14px; }

}

.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-navy-strong); background: none; border-radius: 12px; cursor: pointer; position: relative; }

.nav__bars, .nav__bars::before, .nav__bars::after {

  position: absolute; left: 50%; width: 18px; height: 1.5px; background: #fff; border-radius: 2px;

  transform: translateX(-50%); transition: transform 220ms var(--ease-out), opacity 160ms;

}

.nav__bars { top: 50%; }

.nav__bars::before, .nav__bars::after { content: ""; }

.nav__bars::before { top: -6px; }

.nav__bars::after { top: 6px; }

.nav.is-open .nav__bars { background: transparent; }

.nav.is-open .nav__bars::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }

.nav.is-open .nav__bars::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* The page behind is locked while the sheet is open, so the sheet scrolls on
   its own: it is taller than a phone screen. */
.nav__sheet { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }

.nav__sheet nav { display: flex; flex-direction: column; padding-block: 8px 24px; }

.nav__sheet a:not(.btn) { padding: 14px 0; font-size: 20px; font-weight: 500; border-bottom: 1px solid var(--line-navy); }

.nav__sheet .btn { margin-top: 20px; }

@media (max-width: 1080px) {

  .nav__links, .nav__quiet { display: none; }

  .nav__toggle { display: inline-block; }

}

@media (max-width: 520px) { .nav__end .btn--light { display: none; } }



/* ---------- Sections ---------- */

.section { padding-block: clamp(72px, 10vw, 128px); position: relative; }

.section--tight { padding-block: clamp(56px, 7vw, 96px); }

.navy { background: var(--pyxa-navy); }

.paper { background: var(--pyxa-paper); color: var(--ink); }

.paper .lede, .paper .body { color: var(--ink-2); }

.section-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }

.section-head--center { margin-inline: auto; align-items: center; text-align: center; }

.section-head--split { max-width: none; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 64px; align-items: end; }

@media (max-width: 860px) { .section-head--split { grid-template-columns: minmax(0, 1fr); } }

.stack-lg > * + * { margin-top: clamp(48px, 6vw, 80px); }



/* Dotted field behind dark sections, fading at the edges */

.dots::before {

  content: ""; position: absolute; inset: 0; pointer-events: none;

  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.2px);

  background-size: 26px 26px;

  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);

          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);

}

/* The glow is wider than a phone; clip it sideways only, so it still bleeds into the next section */

.glow { overflow-x: clip; }

.glow::after {

  content: ""; position: absolute; left: 50%; top: 40%; width: min(1200px, 120vw); height: 760px;

  transform: translate(-50%, -50%); pointer-events: none;

  background: radial-gradient(closest-side, rgba(107, 88, 217, 0.26), rgba(107, 88, 217, 0) 72%);

}

.section > .wrap, .hero > .wrap { position: relative; z-index: 1; }



/* ---------- Hero ---------- */

.hero { position: relative; padding-top: clamp(48px, 8vw, 104px); padding-bottom: clamp(40px, 6vw, 72px); }

.hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }

.hero__copy .lede { max-width: 640px; }

.hero__note { font-size: 14px; color: var(--on-navy-faint); }

.pill {

  display: inline-flex; align-items: center; gap: 10px;

  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;

  color: var(--on-navy-muted);

  background: rgba(126, 110, 242, 0.1); border: 1px solid rgba(126, 110, 242, 0.32);

  border-radius: 999px; padding: 7px 14px;

}

.pill i { width: 6px; height: 6px; border-radius: 999px; background: var(--pyxa-violet-reversed); }

.hero--page .hero__copy { align-items: flex-start; text-align: left; }

.hero--page .display-1 { font-size: clamp(40px, 6.2vw, 76px); max-width: 15ch; }



/* The hero product frame tilts back and settles flat as you scroll */

.stage { perspective: 1800px; margin-top: clamp(48px, 7vw, 84px); }

.tilt { transform-origin: 50% 0%; will-change: transform; }



/* ---------- Product screen frames ---------- */

.shot {

  margin: 0; position: relative; min-width: 0;

  background: rgba(19, 29, 59, 0.78);

  border: 1px solid var(--line-navy-strong);

  border-radius: var(--radius-frame);

  padding: 8px;

  box-shadow: 0 50px 120px -40px rgba(107, 88, 217, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2);

}

.paper .shot { background: #fff; border-color: var(--line-paper); box-shadow: 0 30px 80px -40px rgba(19, 29, 59, 0.35); }

.shot__bar {

  display: flex; align-items: center; justify-content: space-between; gap: 12px;

  padding: 4px 8px 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;

  color: var(--on-navy-faint);

}

.paper .shot__bar { color: var(--ink-muted); }

.shot__bar span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.shot__tag { display: inline-flex; align-items: center; gap: 7px; flex: none; }

.shot__tag::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--pyxa-violet-reversed); }

.shot__img {

  display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in;

  border-radius: 9px; overflow: hidden; position: relative;

}

.shot__img img { width: 100%; }

.shot figcaption {

  padding: 12px 8px 4px; font-size: 13.5px; line-height: 1.5; color: var(--on-navy-faint);

}

.paper .shot figcaption { color: var(--ink-muted); }

.shot--flat { box-shadow: none; }



/* Brackets that draw themselves onto a region of a screen */

.annot {

  position: absolute; pointer-events: none;

  left: var(--x); top: var(--y); width: var(--w); height: var(--h);

}

.annot__box {

  position: absolute; inset: 0; border: 1.5px solid var(--pyxa-violet-reversed); border-radius: 6px;

  clip-path: inset(0 100% 100% 0 round 6px);

  transition: clip-path 900ms var(--ease-in-out);

  transition-delay: var(--d, 0ms);

}

.annot__label {

  position: absolute; left: -1px; bottom: calc(100% + 6px); white-space: nowrap;

  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;

  background: var(--pyxa-violet); color: #fff; padding: 4px 8px; border-radius: 4px;

  opacity: 0; transform: translateY(6px);

  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);

  transition-delay: calc(var(--d, 0ms) + 600ms);

}

.annot--below .annot__label { bottom: auto; top: calc(100% + 6px); }

.annot--right .annot__label { left: auto; right: -1px; }

.is-annotated .annot__box { clip-path: inset(0 0 0 0 round 6px); }

.is-annotated .annot__label { opacity: 1; transform: none; }

@media (max-width: 760px) { .annot { display: none; } }



/* ---------- Facts band and marquee ---------- */

.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-navy); }

.fact { padding: 28px 24px 0 0; display: flex; flex-direction: column; gap: 6px; }

.fact + .fact { padding-left: 24px; border-left: 1px solid var(--line-navy); }

.fact strong { font-size: 17px; font-weight: 600; }

.fact span { font-size: 14.5px; color: var(--on-navy-muted); }

@media (max-width: 860px) {

  .facts { grid-template-columns: 1fr 1fr; }

  .fact:nth-child(3) { border-left: 0; padding-left: 0; }

  .fact { padding-bottom: 20px; }

}

.marquee {

  margin-top: 56px; overflow: hidden; position: relative;

  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);

          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);

}

.marquee__track { display: flex; gap: 48px; width: max-content; animation: marquee 48s linear infinite; }

.marquee__track span { font-size: 15px; color: var(--on-navy-faint); white-space: nowrap; display: inline-flex; align-items: center; gap: 48px; }

.marquee__track span::after { content: ""; width: 4px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); }

@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }

@keyframes marquee { to { transform: translateX(-50%); } }



/* ---------- Scrollytelling: sticky screen, steps scroll past ---------- */

.scrolly { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); margin-top: 24px; }

.scrolly__steps { display: flex; flex-direction: column; }

.step {

  min-height: 64vh; display: flex; flex-direction: column; justify-content: center; gap: 16px;

  opacity: 0.38; transition: opacity 400ms var(--ease-out);

}

.step.is-active { opacity: 1; }

.step__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--pyxa-violet-reversed); }

.step .chips { margin-top: 4px; }

.step__media { display: none; }

.scrolly__stage { position: sticky; top: calc(50vh - min(34vw, 300px)); height: fit-content; align-self: start; }

.scrolly__frames { position: relative; display: grid; }

.scrolly__frames > * {

  grid-area: 1 / 1; opacity: 0; transform: translateY(18px) scale(0.985);

  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out);

  pointer-events: none; align-self: start;

}

.scrolly__frames > .is-active { opacity: 1; transform: none; pointer-events: auto; }

.rail { display: flex; gap: 6px; margin-top: 18px; }

.rail i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); position: relative; overflow: hidden; }

.rail i::after { content: ""; position: absolute; inset: 0; background: var(--pyxa-violet-reversed); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out); }

.rail i.is-done::after { transform: scaleX(1); }

@media (max-width: 960px) {

  .scrolly { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }

  .scrolly__stage { display: none; }

  .step { min-height: 0; opacity: 1; padding-block: 36px; border-top: 1px solid var(--line-navy); }

  .step__media { display: block; margin-top: 12px; }

}



.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {

  font-family: var(--font-mono); font-size: 12px; color: var(--on-navy-muted);

  border: 1px solid var(--line-navy-strong); border-radius: 999px; padding: 4px 10px;

}

.paper .chip { color: var(--ink-2); border-color: var(--line-paper); }



/* ---------- Claim vs observation ---------- */

.claim-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: 64px; }

@media (max-width: 960px) { .claim-grid { grid-template-columns: minmax(0, 1fr); } }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }

.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line-navy-strong); }

.tl {

  position: relative; padding: 0 0 30px 34px;

  opacity: 0; transform: translateY(10px);

  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);

  transition-delay: calc(var(--i, 0) * 420ms + 200ms);

}

.is-in .tl { opacity: 1; transform: none; }

.tl::before {

  content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 999px;

  background: var(--pyxa-navy); border: 1.5px solid var(--on-navy-faint);

}

.tl--claimed::before { background: var(--hatch-unproven-navy); border-color: var(--state-unproven); }

.tl--failed::before { background: var(--state-p0); border-color: var(--state-p0); }

.tl__time { font-family: var(--font-mono); font-size: 12px; color: var(--on-navy-faint); letter-spacing: 0.04em; }

.tl__what { font-size: 17px; font-weight: 500; margin-top: 2px; }

.tl__who { font-size: 14.5px; color: var(--on-navy-muted); }

.state {

  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;

  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;

  padding: 3px 8px; border-radius: 4px;

}

/* Unproven is always a hatch; a claim is not a state you can trust */

.state--claimed { background: var(--hatch-unproven-navy); color: #fff; border: 1px dashed rgba(255, 255, 255, 0.4); }

.state--failed { background: var(--state-p0); color: #fff; }

.state--verified { background: var(--state-verified); color: #fff; }

.quote {

  font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3;

  padding-left: 22px; border-left: 2px solid var(--pyxa-violet-reversed); margin: 8px 0 0;

}

.quote cite { display: block; margin-top: 12px; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-navy-faint); }



/* Proof ribbon: verified fills solid, the rest stays hatched */

.ribbon { display: flex; gap: 4px; height: 10px; margin-top: 14px; }

.ribbon__done { background: var(--state-verified-on-navy); border-radius: 3px; width: 0; transition: width 1200ms var(--ease-out) 300ms; }

.ribbon__rest { flex: 1; background: var(--hatch-unproven-navy); border-radius: 3px; }

.is-in .ribbon__done { width: var(--done); }

.ribbon-label { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--on-navy-muted); }



/* ---------- Refusals bento ---------- */

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 64px; align-items: start; }

.card {

  background: var(--navy-raised); border: 1px solid var(--line-navy); border-radius: var(--radius-card);

  padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 14px;

}

.paper .card { background: #fff; border-color: var(--line-paper); }

.paper .card--navy { background: var(--pyxa-navy); border-color: var(--pyxa-navy); color: #fff; }

.bento .card:nth-child(1) { grid-column: span 6; }

.bento .card:nth-child(2), .bento .card:nth-child(3) { grid-column: span 3; }

.card__crop { margin-top: 8px; border: 1px solid var(--line-paper); border-radius: 10px; overflow: hidden; background: #fff; }

.card__crop button { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }

.card__crop--tall { max-height: 360px; }

.card__crop--tall img { object-fit: cover; object-position: top left; }

.card .h3 { max-width: 24ch; }

@media (max-width: 860px) { .bento .card:nth-child(n) { grid-column: span 6; } }



/* ---------- Tabs (roles) ---------- */

.tabs { display: grid; grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 56px); margin-top: 56px; align-items: start; }

.tabs__list { display: flex; flex-direction: column; gap: 4px; }

.tab {

  text-align: left; background: none; border: 0; cursor: pointer; border-radius: 12px;

  padding: 16px 18px; display: grid; gap: 2px; position: relative; overflow: hidden;

  transition: background-color var(--dur-ui) var(--ease-out);

}

.tab strong { font-size: 16.5px; font-weight: 600; }

.tab span { font-size: 14px; color: var(--ink-muted); }

.tab[aria-selected="true"] { background: var(--pyxa-navy); color: #fff; }

.tab[aria-selected="true"] span { color: rgba(255, 255, 255, 0.74); }

.tab__progress { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; overflow: hidden; display: none; }

.tab[aria-selected="true"] .tab__progress { display: block; }

.is-manual .tab[aria-selected="true"] .tab__progress, html:not(.js) .tab__progress { display: none; }

.tab__progress::after { content: ""; position: absolute; inset: 0; background: var(--pyxa-violet-reversed); transform: scaleX(var(--p, 0)); transform-origin: left; }

@media (hover: hover) and (pointer: fine) { .tab[aria-selected="false"]:hover { background: rgba(19, 29, 59, 0.05); } }

.tabs__panels { display: grid; grid-template-columns: minmax(0, 1fr); }

.tabs__panels > [role="tabpanel"] { grid-area: 1 / 1; transition: opacity 360ms var(--ease-out), transform 520ms var(--ease-out); }

.tabs__panels > [hidden] { display: block; opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }

.panel-note { margin-top: 14px; font-size: 15px; color: var(--ink-2); max-width: 64ch; }

@media (max-width: 900px) {

  .tabs { grid-template-columns: minmax(0, 1fr); }

  .tabs__list { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

  .tab { flex: none; scroll-snap-align: start; padding: 12px 16px; }

  .tab span { display: none; }

}



/* ---------- Missions and phases ---------- */

.missions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; align-items: start; }

@media (max-width: 760px) { .missions { grid-template-columns: 1fr; } }

.mission { gap: 12px; }

.mission__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pyxa-violet-reversed); }

.paper .mission__meta { color: var(--pyxa-violet); }

.mission ul { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }

.mission li { font-size: 13.5px; border: 1px solid var(--line-navy-strong); border-radius: 999px; padding: 4px 11px; color: var(--on-navy-muted); }

.paper .mission li { border-color: var(--line-paper); color: var(--ink-2); }

.mission__out { border-top: 1px solid var(--line-navy); padding-top: 14px; margin-top: 6px; font-size: 15px; }

.paper .mission__out { border-top-color: var(--line-paper); }

.mission__out b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy-faint); margin-bottom: 4px; }

.paper .mission__out b { color: var(--ink-muted); }



.phases { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }

.phases::before {

  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--pyxa-violet-reversed);

  transform: scaleX(0); transform-origin: left; transition: transform 1400ms var(--ease-in-out) 150ms;

}

.paper .phases::before { background: var(--pyxa-violet); }

.phases.is-in::before { transform: scaleX(1); }

.phase { padding-top: 34px; position: relative; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--i) * 280ms + 300ms); }

.phases.is-in .phase { opacity: 1; transform: none; }

.phase::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 999px; background: var(--icon-field); border: 1.5px solid var(--pyxa-violet-reversed); }

.paper .phase::before { background: var(--pyxa-paper); border-color: var(--pyxa-violet); }

.phase__when { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy-faint); }

.paper .phase__when { color: var(--ink-muted); }

.phase p { font-size: 15px; color: var(--on-navy-muted); }

.paper .phase p { color: var(--ink-2); }

@media (max-width: 860px) {

  .phases { grid-template-columns: 1fr; gap: 0; padding-left: 30px; }

  .phases::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; }

  .phases.is-in::before { transform: scaleY(1); }

  .phase { padding: 0 0 32px; }

  .phase::before { left: -30px; }

}



/* ---------- Flow diagram (sources -> PYXA -> outbound) ---------- */

.flow { margin-top: 64px; }

.flow svg { width: 100%; height: auto; display: block; overflow: visible; }

.flow text { font-family: var(--font-sans); font-size: 14px; fill: rgba(255, 255, 255, 0.86); }

.flow .t-mono { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; fill: rgba(255, 255, 255, 0.6); }

.flow .node { fill: var(--navy-raised); stroke: rgba(255, 255, 255, 0.16); }

.flow .wire { fill: none; stroke: rgba(126, 110, 242, 0.75); stroke-width: 1.5; stroke-dasharray: 4 7; animation: wire 1.6s linear infinite; }

.flow .wire--claim { stroke: rgba(255, 255, 255, 0.4); stroke-dasharray: 2 6; }

.flow .wire--out { stroke: rgba(255, 255, 255, 0.55); }

@keyframes wire { to { stroke-dashoffset: -22; } }

.flow-list { display: none; }

@media (max-width: 860px) {

  .flow svg { display: none; }

  .flow-list { display: grid; gap: 14px; }

}



/* ---------- Columns of cards ---------- */

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }

@media (max-width: 1000px) { .grid-4 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr; } }

@media (max-width: 640px) { .grid-4, .grid-2 { grid-template-columns: 1fr; } }

.list-dots { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

.list-dots li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--on-navy-muted); }

.paper .list-dots li { color: var(--ink-2); }

.list-dots li::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--pyxa-violet-reversed); flex: none; transform: translateY(-2px); }

.paper .list-dots li::before { background: var(--pyxa-violet); }

.card__foot { font-size: 13.5px; color: var(--on-navy-faint); }

.paper .card__foot { color: var(--ink-muted); }



/* ---------- Pricing ---------- */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; align-items: start; }

@media (max-width: 960px) { .tiers { grid-template-columns: 1fr; } }

.tier { gap: 16px; }

.tier--feature { background: var(--pyxa-navy); color: #fff; border-color: var(--pyxa-navy); }

.tier--feature .list-dots li { color: rgba(255, 255, 255, 0.78); }

.tier--feature .list-dots li::before { background: var(--pyxa-violet-reversed); }

.tier__name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pyxa-violet); }

.tier--feature .tier__name { color: var(--pyxa-violet-reversed); }

.tier__price { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; }

.tier p { color: var(--ink-2); font-size: 15px; }

.tier--feature p { color: rgba(255, 255, 255, 0.78); }

.tier .btn { width: 100%; margin-top: 8px; }



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

.faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr); gap: 32px 64px; }

@media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); } }

.faq details { border-top: 1px solid var(--line-paper); }

.faq details:last-child { border-bottom: 1px solid var(--line-paper); }

.navy .faq details, .dark-faq details { border-color: var(--line-navy); }

.faq summary {

  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;

  font-size: 17.5px; font-weight: 500;

}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {

  content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px;

  background: linear-gradient(currentColor, currentColor) center/12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 12px no-repeat;

  color: var(--pyxa-violet); transition: transform 240ms var(--ease-out);

}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details > div { padding: 0 40px 24px 0; color: var(--ink-2); font-size: 16px; animation: faq-in 320ms var(--ease-out); }

@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }



/* ---------- Spec strip ---------- */

.specs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-navy); border-radius: var(--radius-card); margin-top: 48px; }

.spec { padding: 20px 22px; display: grid; gap: 4px; }

.spec + .spec { border-left: 1px solid var(--line-navy); }

.spec b { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-navy-faint); }

.spec span { font-size: 17px; font-weight: 500; }

@media (max-width: 760px) {

  .specs { grid-template-columns: 1fr 1fr; }

  .spec:nth-child(3) { border-left: 0; }

  .spec:nth-child(n + 3) { border-top: 1px solid var(--line-navy); }

}



/* ---------- Capability rows (text beside a real screen) ---------- */

.cap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 72px); align-items: center; }

.cap--flip { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); }

.cap--flip .cap__text { order: 2; }

.cap__text { display: flex; flex-direction: column; gap: 16px; }

.cap__media { display: grid; gap: 16px; }

@media (max-width: 960px) { .cap, .cap--flip { grid-template-columns: minmax(0, 1fr); } .cap--flip .cap__text { order: 0; } }



/* ---------- Integration source cards ---------- */

.source { gap: 10px; }

.source__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.source__kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-muted); white-space: nowrap; }

.source p { font-size: 15px; color: var(--ink-2); }

.source code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }

/* Which editions include the connector, as the pricing table says. */
.source__ed { font-size: 12px; font-weight: 500; color: var(--ink-2); padding-top: 8px; border-top: 1px solid var(--line-paper); }

.group-title { display: flex; flex-direction: column; gap: 6px; margin: 64px 0 20px; }

.group-title:first-child { margin-top: 0; }



/* ---------- Stack diagram ---------- */

.stack { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 48px; border: 1px dashed var(--line-navy-strong); border-radius: var(--radius-frame); padding: 44px 16px 16px; position: relative; }

.stack::before { content: "One instance \00B7  your Docker Compose stack"; position: absolute; top: 16px; left: 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy-faint); }

.stack .card { gap: 8px; }

.stack code { font-family: var(--font-mono); font-size: 14px; color: var(--pyxa-violet-reversed); }

@media (max-width: 1000px) { .stack { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 640px) { .stack { grid-template-columns: 1fr; } }



/* ---------- Docs ---------- */

.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }

.docs__toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 4px; font-size: 14.5px; }

.docs__toc a { color: var(--ink-muted); padding: 6px 0; }

.docs__toc a.is-active { color: var(--pyxa-violet); }

.docs__body { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }

.docs__body h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-top: 40px; scroll-margin-top: 96px; }

.docs__body h2:first-child { margin-top: 0; }

.docs__body p, .docs__body li { color: var(--ink-2); }

.docs__body code:not(pre code) { font-family: var(--font-mono); font-size: 0.86em; background: oklch(0.94 0.01 280); padding: 1px 5px; border-radius: 4px; }

.code { position: relative; background: var(--pyxa-navy); color: #E6E4F8; border-radius: 12px; }

.code pre { margin: 0; padding: 20px 22px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; }

.code button { position: absolute; top: 10px; right: 10px; font-size: 12px; font-family: var(--font-mono); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; }

.callout { border: 1px solid var(--line-paper); border-left: 3px solid var(--pyxa-violet); background: #fff; border-radius: 8px; padding: 16px 18px; color: var(--ink-2); }

@media (max-width: 860px) { .docs { grid-template-columns: 1fr; } .docs__toc { position: static; grid-auto-flow: column; overflow-x: auto; gap: 18px; } }



/* ---------- Forms ---------- */

.form { display: grid; gap: 16px; }

.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }

.form input, .form textarea, .form select {

  font: inherit; font-size: 16px; color: var(--ink); background: #fff;

  border: 1px solid var(--line-paper); border-radius: 10px; padding: 12px 14px; width: 100%;

  transition: border-color var(--dur-ui), box-shadow var(--dur-ui);

}

.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--pyxa-violet); box-shadow: 0 0 0 3px rgba(107, 88, 217, 0.18); }

.form textarea { min-height: 120px; resize: vertical; }

.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }

.segmented { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }

.segmented legend { font-size: 14px; font-weight: 500; margin-bottom: 8px; }

.segmented label { display: inline-flex; gap: 0; cursor: pointer; }

.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.segmented span { border: 1px solid var(--line-paper); border-radius: 999px; padding: 8px 16px; font-weight: 500; background: #fff; transition: background-color var(--dur-ui), color var(--dur-ui), border-color var(--dur-ui); }

.segmented input:checked + span { background: var(--pyxa-navy); color: #fff; border-color: var(--pyxa-navy); }

.segmented input:focus-visible + span { outline: 2px solid var(--pyxa-violet); outline-offset: 2px; }

.form__note { font-size: 13.5px; color: var(--ink-muted); }



/* ---------- Case study ---------- */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-navy); margin-top: 40px; }

.stat { padding: 24px 20px 0 0; display: grid; gap: 6px; }

.stat + .stat { padding-left: 20px; border-left: 1px solid var(--line-navy); }

.stat b { font-family: var(--font-mono); font-weight: 500; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; color: #fff; }

.stat span { font-size: 14.5px; color: var(--on-navy-muted); }

@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-navy); } .stat { padding-bottom: 20px; } }



/* ---------- Final CTA and footer ---------- */

.cta-final { position: relative; padding-block: clamp(96px, 12vw, 160px); text-align: center; overflow: hidden; }

.cta-final::after {

  content: ""; position: absolute; left: 50%; top: 50%; width: min(1000px, 120vw); height: 600px; transform: translate(-50%, -50%);

  background: radial-gradient(closest-side, rgba(107, 88, 217, 0.3), transparent 72%); pointer-events: none;

}

.cta-final__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; }

.cta-final .display-2 { max-width: 16ch; }

.footer { border-top: 1px solid var(--line-navy); padding-block: 56px 32px; }

.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }

.footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 300px; }

.footer__brand p { font-size: 14.5px; color: var(--on-navy-muted); }

.footer nav { display: flex; flex-direction: column; gap: 10px; }

.footer h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }

.footer nav a { font-size: 14.5px; color: var(--on-navy-muted); transition: color var(--dur-ui); }

@media (hover: hover) { .footer nav a:hover { color: #fff; } }

.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-navy); font-size: 13px; color: var(--on-navy-faint); }

@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }



/* ---------- Lightbox ---------- */

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1600px, 96vw); width: 100%; max-height: 94vh; color: #fff; }

.lightbox::backdrop { background: rgba(8, 12, 22, 0.84); backdrop-filter: blur(6px); }

.lightbox[open] { animation: lb-in 260ms var(--ease-out); }

@keyframes lb-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 10px; }

.lightbox__caption { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }

.lightbox__close { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 8px 16px; cursor: pointer; }

.lightbox__body { max-height: calc(94vh - 56px); overflow: auto; border-radius: 10px; background: #fff; }



/* ---------- Scroll reveal ---------- */

.js [data-reveal] {

  opacity: 0; transform: translateY(22px);

  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);

  transition-delay: calc(var(--i, 0) * 70ms);

}

.js [data-reveal].is-in { opacity: 1; transform: none; }



/* Motion is decoration here; with reduced motion every end state shows at once */

@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }

  .js [data-reveal] { opacity: 1; transform: none; }

  .tilt { transform: none !important; }

  .marquee__track { flex-wrap: wrap; width: auto; justify-content: center; row-gap: 12px; }

  .marquee__track span[aria-hidden] { display: none; }

}



/* ---------- Automation and AI ---------- */

.phases--5 { grid-template-columns: repeat(5, 1fr); }

.stats--compact { margin-top: 8px; }

.stats--compact .stat b { font-size: clamp(28px, 3vw, 38px); }

.ai-list { list-style: none; padding: 0; margin: 4px 0 0; border-top: 1px solid var(--line-navy); }

.ai-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-navy); }

.ai-list b { font-weight: 500; font-size: 15.5px; }

.ai-list span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-navy-faint); text-align: right; }

@media (max-width: 1100px) and (min-width: 861px) { .phases--5 { grid-template-columns: repeat(3, 1fr); row-gap: 8px; } .phases--5::before { display: none; } }

@media (max-width: 640px) { .ai-list li { flex-direction: column; gap: 2px; } .ai-list span { text-align: left; } }

@media (max-width: 860px) { .phases--5 { grid-template-columns: 1fr; } }



/* ---------- Where the time goes: manual step struck through, PYXA step beside it ---------- */

.speed { margin-top: 56px; border-top: 1px solid var(--line-paper); }

.speed__row {

  display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.3fr) 128px; gap: 24px; align-items: baseline;

  padding: 20px 0; border-bottom: 1px solid var(--line-paper);

}

.speed__stage { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }

.speed__before { color: var(--ink-muted); font-size: 15.5px; position: relative; width: fit-content; }

.speed__before::after {

  content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 1.5px; background: var(--ink-muted);

  transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out);

  transition-delay: calc(var(--i, 0) * 120ms + 450ms);

}

.speed.is-in .speed__before::after { transform: scaleX(1); }

.speed__after { font-size: 16.5px; font-weight: 500; color: var(--ink); }

.speed__how { justify-self: end; }

.tag {

  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;

  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;

  border: 1px solid var(--line-paper); color: var(--ink-2); border-radius: 999px; padding: 3px 9px;

}

.tag--ai { border-color: var(--pyxa-violet); color: var(--pyxa-violet); }

.navy .tag, .tag--onnavy { border-color: var(--line-navy-strong); color: var(--on-navy-muted); }

.navy .tag--ai { border-color: var(--pyxa-violet-reversed); color: var(--pyxa-violet-reversed); }

.speed .speed__row { opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }

.speed.is-in .speed__row, .no-js .speed .speed__row { opacity: 1; transform: none; }

html:not(.js) .speed .speed__row { opacity: 1; transform: none; }

@media (max-width: 860px) {

  .speed__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  .speed__how { justify-self: start; }

}



/* ---------- Compliance: five answers per framework, never one score ---------- */

.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 48px; align-items: start; }

.fw { gap: 12px; }

.fw__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.fw__name { font-size: 18px; font-weight: 600; }

.fw__count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--on-navy-faint); white-space: nowrap; }

.paper .fw__count { color: var(--ink-muted); }

.fw__bar { display: flex; gap: 3px; height: 12px; }

.fw__bar i {

  flex: var(--n) 0 0; border-radius: 3px; transform: scaleX(0); transform-origin: left;

  transition: transform 700ms var(--ease-out); transition-delay: calc(var(--k, 0) * 90ms + 200ms);

}

.is-in .fw__bar i, html:not(.js) .fw__bar i { transform: none; }

.ans-fail { background: var(--state-p0); }

.ans-pass { background: var(--state-verified); }

.ans-incomplete { background: var(--hatch-unproven); }

.navy .ans-incomplete, .fw-dark .ans-incomplete { background: var(--hatch-unproven-navy); }

.ans-person { border: 1.5px dashed var(--state-unproven); }

.ans-na { background: oklch(0.85 0.01 265); }

.fw__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--on-navy-muted); }

.paper .fw__legend { color: var(--ink-2); }

.fw__legend span { display: inline-flex; align-items: center; gap: 6px; }

.fw__legend span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--sw); border: var(--sb, 0); }

.answers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 40px; }

.answer { display: grid; gap: 8px; align-content: start; }

.answer i { display: block; height: 10px; border-radius: 3px; }

.answer b { font-size: 16px; }

.answer p { font-size: 14px; color: var(--on-navy-muted); }

.paper .answer p { color: var(--ink-2); }

@media (max-width: 900px) { .answers { grid-template-columns: 1fr 1fr; } }



/* ---------- AI task map ---------- */

.stage-title { display: flex; align-items: baseline; gap: 14px; margin: 56px 0 18px; }

.stage-title:first-child { margin-top: 0; }

.stage-title .h3 { font-size: 22px; }

.task { gap: 10px; }

.task dl { margin: 0; display: grid; gap: 8px; }

.task dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }

.task dd { margin: 0; font-size: 14.5px; color: var(--ink-2); }

.task--off { background: transparent; border-style: dashed; }

.crops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; align-items: start; }

.crops figure { margin: 0; display: grid; gap: 12px; }

.crops figcaption { font-size: 14.5px; color: var(--on-navy-muted); }

.crops figcaption b { display: block; color: #fff; font-size: 16px; margin-bottom: 2px; }

.paper .crops figcaption { color: var(--ink-2); }

.paper .crops figcaption b { color: var(--ink); }

.crop { border-radius: 10px; overflow: hidden; border: 1px solid var(--line-navy-strong); background: #fff; }

.paper .crop { border-color: var(--line-paper); }

.crop button { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }

@media (max-width: 960px) { .crops { grid-template-columns: minmax(0, 1fr); } }



/* ---------- Equal heights in a row ----------

   Cards in the same grid row take the height of the tallest one, and their

   footer line sits on the bottom edge so footers align across the row.

   Height comes from the tallest card's content, never a fixed value, so a

   footer cannot be pushed past the border. Screenshot frames are left at

   their own height: stretching them would open a void inside the frame. */

:is(.grid-2, .grid-3, .grid-4, .missions, .tiers, .fw-grid, .bento, .stack) > .card { align-self: stretch; }

.card > :is(code, .card__foot, .mission__out, .tier .btn, .fw__legend:last-child) { margin-top: auto; }

.tier > .btn { margin-top: auto; }

.source > code { margin-top: auto; padding-top: 6px; }

.bento .card__crop { margin-top: auto; }



/* ---------- Edition comparison ---------- */

.cmp__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 72px 0 20px; }

.cmp__toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; cursor: pointer; }

.cmp__toggle input { width: 18px; height: 18px; accent-color: var(--pyxa-violet); }

.cmp { border: 1px solid var(--line-paper); border-radius: var(--radius-card); background: #fff; min-width: 0; position: relative; /* keeps the cells' sr-only text inside the scroller */ }

.cmp thead th:first-child { border-top-left-radius: var(--radius-card); }

.cmp thead th:last-child { border-top-right-radius: var(--radius-card); }

@media (max-width: 760px) { .cmp { overflow-x: auto; } }

.cmp table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }

.cmp th, .cmp td { padding: 12px 18px; border-bottom: 1px solid oklch(0.93 0.006 265); text-align: left; vertical-align: top; }

.cmp thead th {

  position: sticky; top: 72px; z-index: 2; background: #fff; font-size: 16px; font-weight: 600; text-align: center;

  border-bottom: 1px solid var(--line-paper); padding-block: 16px;

}

.cmp thead th span { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 2px; }

.cmp thead th:nth-child(3) { color: var(--pyxa-violet); }

.cmp tbody th { font-weight: 400; color: var(--ink); width: 55%; }

.cmp tbody tr > :first-child { position: sticky; left: 0; background: inherit; }

.cmp tbody tr { background: #fff; }

.cmp td { text-align: center; width: 15%; }

.cmp__head th {

  background: var(--pyxa-paper); padding-top: 22px; font-size: 13px;

}

.cmp__head span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }

.cmp__head em { font-style: normal; font-size: 13.5px; color: var(--ink-2); margin-left: 12px; }

.cmp__n { color: oklch(0.72 0.01 265); }

.cmp__v { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }

.tick { display: inline-block; width: 16px; height: 16px; border-radius: 999px; background: var(--pyxa-navy); position: relative; vertical-align: middle; }

.tick::after { content: ""; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7.5px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }

.planned {

  display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;

  border: 1px dashed var(--ink-muted); color: var(--ink-muted); border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px;

}

.cmp.is-diff tr[data-same] { display: none; }

@media (hover: hover) { .cmp tbody tr:not(.cmp__head):hover { background: oklch(0.985 0.004 280); } }

.cmp--list table { min-width: 560px; }

.cmp--list td { text-align: left; width: auto; }

.cmp--list tbody th { width: 34%; }

.cmp--list tbody th b { display: block; font-weight: 600; }

.cmp--list tbody th span:not(.planned) { display: block; font-size: 13.5px; color: var(--ink-muted); margin-top: 2px; }

.cmp--list td.num { font-size: 13.5px; white-space: nowrap; color: var(--ink); }

.cmp--list thead th { text-align: left; font-size: 13px; }

@media (max-width: 640px) { .cmp th, .cmp td { padding: 10px 12px; } .cmp tbody th { min-width: 210px; } }



@media (max-width: 760px) { .cmp thead th { top: 0; } }

/* border-collapse keeps borders on the table, so a stuck header would lose its divider */

.cmp thead th { box-shadow: inset 0 -1px 0 var(--line-paper), 0 6px 12px -10px rgba(19, 29, 59, 0.25); }



/* ---------- Nav: platform pill, then services on their own ---------- */

.nav__center { display: flex; align-items: center; gap: 14px; }

.nav__svc {

  display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1;

  padding: 4px 0 4px 16px; border-left: 1px solid var(--line-navy-strong);

  font-size: 14px; color: var(--on-navy-muted); transition: color var(--dur-ui);

}

.nav__svc span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-navy-faint); }

.nav__svc[aria-current="page"] { color: #fff; }

@media (hover: hover) and (pointer: fine) { .nav__svc:hover { color: #fff; } }

@media (max-width: 1080px) { .nav__center { display: none; } }

.nav__sheet .wrap { display: grid; gap: 8px; padding-block: 8px 24px; }

.nav__sheet nav { padding-block: 0; }

.nav__group { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-navy-faint); padding-top: 16px; }



/* ---------- Services band: the consulting business, set apart from the product ---------- */

.services { position: relative; background: var(--pyxa-navy); padding-block: 0 clamp(72px, 10vw, 128px); }

.services__rule { display: flex; align-items: center; gap: 16px; padding-block: 28px clamp(48px, 7vw, 88px); }

.services__rule::before, .services__rule::after { content: ""; flex: 1; height: 1px; background: var(--line-navy-strong); }

.services__rule span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-navy-faint); }

.svc { transition: border-color var(--dur-ui) var(--ease-out), transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) { .svc:hover { border-color: var(--pyxa-violet-reversed); transform: translateY(-2px); } }



/* ---------- Consulting service blocks ---------- */

.svc-block { display: grid; gap: 24px; padding-top: clamp(48px, 6vw, 72px); margin-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line-paper); scroll-margin-top: 96px; }

.svc-block:first-of-type { margin-top: 48px; }

.svc-block__head { display: grid; gap: 10px; max-width: 760px; }

.svc-block__out { font-size: 15.5px; color: var(--ink-2); max-width: 760px; }

.svc-block__out b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; }

.nav__quiet[aria-current="page"] { color: #fff; }



/* ---------- Blog ---------- */

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

.navy .post-meta, .hero .post-meta { color: var(--on-navy-faint); }

.post-meta__cat { color: var(--pyxa-violet); }

.hero .post-meta__cat { color: var(--pyxa-violet-reversed); }

.post-card { gap: 12px; transition: border-color var(--dur-ui) var(--ease-out), transform 200ms var(--ease-out); }

.post-card .link { margin-top: auto; padding-top: 4px; }

@media (hover: hover) and (pointer: fine) { .post-card:hover { border-color: var(--pyxa-violet); transform: translateY(-2px); } }

.post-card--featured { padding: clamp(28px, 4vw, 48px); margin-bottom: 20px; }

.post-card--featured .h3 { font-size: clamp(26px, 3vw, 38px); max-width: 26ch; }

.post-card--featured .body { font-size: 17px; max-width: 64ch; }

.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.blog-filter { font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid var(--line-paper); background: #fff; color: var(--ink-2); border-radius: 999px; padding: 7px 15px; transition: background-color var(--dur-ui), color var(--dur-ui), border-color var(--dur-ui); }

.blog-filter[aria-pressed="true"] { background: var(--pyxa-navy); border-color: var(--pyxa-navy); color: #fff; }

.blog-empty { border: 1px dashed var(--line-paper); border-radius: var(--radius-card); padding: clamp(28px, 4vw, 48px); display: grid; gap: 10px; max-width: 760px; }

.blog-empty .body { color: var(--ink-2); }

[data-blog-list] [hidden] { display: none; }



.post__wrap { max-width: calc(760px + var(--gutter) * 2); }

.post__title { font-size: clamp(36px, 5.4vw, 64px); max-width: none; }

.post__back { font-size: 15px; }

.post__byline { font-size: 14.5px; color: var(--on-navy-muted); }

.post__section { padding-top: clamp(48px, 6vw, 80px); }

.prose { color: var(--ink); font-size: 18px; line-height: 1.7; }

.prose > * + * { margin-top: 1.1em; }

.prose h2 { font-size: clamp(26px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-top: 2em; scroll-margin-top: 96px; }

.prose h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-top: 1.6em; scroll-margin-top: 96px; }

.prose h4 { font-size: 18px; font-weight: 600; margin-top: 1.4em; }

.prose p, .prose li { color: var(--ink-2); }

.prose strong { color: var(--ink); font-weight: 600; }

.prose a { color: var(--pyxa-violet); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.4em; }

.prose li::marker { color: var(--pyxa-violet); }

.prose :not(pre) > code { font-family: var(--font-mono); font-size: 0.86em; background: oklch(0.94 0.01 280); padding: 1px 5px; border-radius: 4px; }

.prose blockquote { margin: 1.6em 0; padding-left: 22px; border-left: 2px solid var(--pyxa-violet); font-size: 20px; color: var(--ink); }

.prose blockquote p { color: var(--ink); }

.prose hr { border: 0; height: 1px; background: var(--line-paper); margin: 2.4em 0; }

.prose .code { margin-top: 1.4em; }

.prose figure.post__figure { margin: 1.8em 0; }

.prose figure img { border-radius: 10px; border: 1px solid var(--line-paper); }

.prose figcaption { font-size: 14px; color: var(--ink-muted); margin-top: 8px; }

.post__table { overflow-x: auto; border: 1px solid var(--line-paper); border-radius: 10px; background: #fff; }

.post__table table { width: 100%; border-collapse: collapse; font-size: 15px; }

.post__table th, .post__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid oklch(0.93 0.006 265); }

.post__table th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

@media (max-width: 1100px) and (min-width: 861px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } .footer__brand { grid-column: 1 / -1; } }

.hero .planned { color: var(--on-navy-muted); border-color: var(--on-navy-faint); }



/* ---------- Homepage hero: fluid ink ----------

   The canvas fills the top of the hero and fades into the navy below it.

   Until fluid.js starts (or when it cannot: reduced motion, no WebGL) the

   canvas is hidden and the static violet glow shows instead. */

.hero__fluid {

  position: absolute; left: 0; right: 0; top: 0; height: min(100vh, 1000px); min-height: 640px;

  z-index: 0; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease-out);

  -webkit-mask-image: linear-gradient(#000 62%, transparent);

          mask-image: linear-gradient(#000 62%, transparent);

}

.hero__fluid canvas { display: block; width: 100%; height: 100%; }

.hero__scrim {

  position: absolute; inset: 0;

  background: radial-gradient(70% 62% at 50% 38%, rgba(13, 19, 33, 0.72) 0%, rgba(13, 19, 33, 0.62) 34%, rgba(13, 19, 33, 0.3) 66%, rgba(13, 19, 33, 0.08) 100%);

}

.hero.has-fluid .hero__fluid { opacity: 1; }

.hero.has-fluid::after { opacity: 0; }

.hero::after { transition: opacity 900ms var(--ease-out); }



/* Timed hero entrance: each block carries its own delay */

.js .hero__copy--timed [data-reveal] { transition-delay: var(--d, 0ms); }



/* Word-by-word reveal. site.js wraps each word; --d is the start, --step the

   stagger, --rise the travel and --dur each word's duration. */

.js [data-words] .w {

  display: inline-block; opacity: 0; transform: translateY(var(--rise, 20px));

  transition: opacity var(--dur, 700ms) cubic-bezier(0.215, 0.61, 0.355, 1), transform var(--dur, 700ms) cubic-bezier(0.215, 0.61, 0.355, 1);

  transition-delay: calc(var(--d, 0ms) + var(--n) * var(--step, 60ms));

}

.js [data-words].is-in .w { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .js [data-words] .w { opacity: 1; transform: none; } }



/* ---------- Contact forms ---------- */

.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form { position: relative; }

.form__status { font-size: 15px; min-height: 1.5em; color: var(--ink-2); }

.form__status.is-ok { color: var(--state-verified); font-weight: 500; }

.form__status.is-error { color: var(--state-p0); font-weight: 500; }

.form button[disabled] { opacity: 0.6; cursor: progress; }



/* ---------- Docs ---------- */

.docs-search { position: relative; max-width: 640px; margin-bottom: 32px; }

.docs-search input {

  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff;

  border: 1px solid var(--line-paper); border-radius: 12px; padding: 13px 44px 13px 16px;

}

.docs-search input:focus { outline: none; border-color: var(--pyxa-violet); box-shadow: 0 0 0 3px rgba(107, 88, 217, 0.18); }

.docs-search kbd { position: absolute; right: 12px; top: 11px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); border: 1px solid var(--line-paper); border-radius: 5px; padding: 1px 7px; }

.docs-search__results {

  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px;

  background: #fff; border: 1px solid var(--line-paper); border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(19, 29, 59, 0.35);

  max-height: 60vh; overflow: auto;

}

.docs-search__results a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; color: var(--ink); }

.docs-search__results a:hover, .docs-search__results a:focus-visible { background: oklch(0.97 0.008 280); }

.docs-search__results b { font-weight: 600; font-size: 15px; }

.docs-search__results span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pyxa-violet); }

.docs-search__results em { font-style: normal; font-size: 13.5px; color: var(--ink-muted); }

.docs-search__none { padding: 12px; color: var(--ink-muted); font-size: 14.5px; }

.doc-card { gap: 10px; }

.doc-card .link { margin-top: auto; }

.hero--docs { padding-bottom: clamp(32px, 4vw, 56px); }

.hero--docs .post__title { font-size: clamp(36px, 5vw, 60px); }

.docs-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) 200px; gap: 48px; align-items: start; }

.docs-side, .docs-toc { position: sticky; top: 96px; display: grid; gap: 2px; font-size: 14.5px; max-height: calc(100vh - 120px); overflow: auto; }

.docs-side .docs-search { margin-bottom: 18px; }

.docs-side .docs-search input { font-size: 14.5px; padding: 9px 36px 9px 12px; }

.docs-side .docs-search kbd { top: 7px; }

.docs-side__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); padding: 4px 0 8px; }

.docs-side a, .docs-toc a { color: var(--ink-2); padding: 6px 10px; border-radius: 6px; }

.docs-side a[aria-current="page"] { background: var(--pyxa-navy); color: #fff; }

.docs-toc a { font-size: 13.5px; padding: 4px 10px; border-left: 2px solid var(--line-paper); border-radius: 0; }

.docs-toc a.is-active { color: var(--pyxa-violet); border-left-color: var(--pyxa-violet); }

@media (hover: hover) { .docs-side a:not([aria-current]):hover, .docs-toc a:hover { color: var(--pyxa-violet); } }

.docs-prose { font-size: 16.5px; }

.docs-prose h2 { margin-top: 1.8em; }

.docs-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }

.docs-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-paper); }

.docs-pager a { display: grid; gap: 2px; text-decoration: none; color: var(--ink); font-weight: 600; }

.docs-pager a span { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }

.docs-pager__next { text-align: right; margin-left: auto; }

.docs-source { font-size: 13.5px; color: var(--ink-muted); }

@media (max-width: 1180px) { .docs-layout { grid-template-columns: 210px minmax(0, 1fr); } .docs-toc { display: none; } }

@media (max-width: 860px) { .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } .docs-side { position: static; max-height: none; grid-auto-flow: row; } }

.docs-search input:not(:placeholder-shown) + kbd { display: none; }



/* ---------- Every source, one queue ---------- */

.source-flow {

  list-style: none; margin: 48px 0 0; padding: 0;

  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; position: relative;

}

.source-flow li {

  display: grid; gap: 4px; align-content: start; padding: 16px 16px 18px;

  border: 1px solid var(--line-navy-strong); border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.03);

  position: relative;

}

.source-flow li::after {

  /* each source feeds the same queue: a short drop line under every tile */

  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 18px;

  background: linear-gradient(var(--pyxa-violet-reversed), transparent);

}

.source-flow b { font-weight: 600; font-size: 15.5px; }

.source-flow span { font-size: 13px; color: var(--on-navy-faint); line-height: 1.45; }

.source-steps { align-items: start; }

.source-step { display: grid; gap: 16px; align-content: start; }

@media (max-width: 1100px) { .source-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .source-flow li::after { display: none; } }

@media (max-width: 640px) { .source-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* A small card shown at its real size on the app's page surface, never stretched */

.shot--fit .shot__img { background: #EEF0F5; padding: clamp(18px, 3vw, 36px); }

.shot--fit .shot__img img { width: auto; max-width: 100%; margin-inline: auto; display: block; }



/* ---------- Prices ---------- */

.tier__price small { font-family: var(--font-sans, inherit); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-muted); }

.tier__price small:last-child { display: block; margin-top: 4px; }

.tier--feature .tier__price small { color: rgba(255, 255, 255, 0.7); }



/* ---------- Contrast and shape (brand.md 4.2) ----------

   Violet-reversed on navy is 4.26:1, below AA for text under 24px: small labels

   and links on navy are white instead, links underlined. A violet outline chip

   means "risk accepted" inside the product, so marketing chips are neutral or filled. */

.pill { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.18); }

.link { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.4); }

.paper .link { color: var(--pyxa-violet); text-decoration: none; }

.step__n, .mission__meta, .tier--feature .tier__name, .hero .post-meta__cat { color: rgba(255, 255, 255, 0.78); }

.stack code { color: rgba(255, 255, 255, 0.9); }

.paper .mission__meta { color: var(--pyxa-violet); }

.tag--ai { border-color: transparent; background: oklch(0.55 0.19 285 / 0.1); }

.navy .tag--ai { border-color: transparent; background: rgba(126, 110, 242, 0.22); color: #fff; }

/* The featured tier is navy on a paper section; `.paper .card` would otherwise make it white under white text. */

.paper .tier--feature { background: var(--pyxa-navy); border-color: var(--pyxa-navy); color: #fff; }

.paper .hero__note { color: var(--ink-muted); }

.tag--ai { background: oklch(0.55 0.19 285 / 0.05); }

.docs__body code:not(pre code), .prose :not(pre) > code { background: oklch(0.96 0.008 280); color: var(--ink); }

/* `.tier p` outranks `.tier__price` on its own; keep the price at display size. */

.tier p.tier__price { font-size: 34px; color: var(--ink); }

.tier--feature p.tier__price { color: #fff; }

.tier__price .num { font-size: 1em; letter-spacing: -0.03em; }

.cmp--list thead th:nth-child(3) { color: inherit; }



/* ---------- Visitor walk-through fixes ---------- */

/* Strike the "before" text per line: a drawn bar sat between the lines of a wrapped row. */

.speed__before::after { display: none; }

.speed__before {

  text-decoration-line: line-through; text-decoration-thickness: 1.5px; text-decoration-color: transparent;

  transition: text-decoration-color 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms + 450ms);

}

.speed.is-in .speed__before, .no-js .speed .speed__before { text-decoration-color: var(--ink-muted); }

/* The three AI examples share one frame height, so the captions line up. */

.crops .crop { aspect-ratio: 16 / 11; }

.crops .crop button, .crops .crop img { height: 100%; }

.crops .crop img { width: 100%; object-fit: cover; object-position: top left; }

.crops .crop--fit { background: #EEF0F5; }

.crops .crop--fit img { object-fit: contain; object-position: center; }

/* Bento screenshots fill the rest of their card on the app's page surface, instead of leaving a void above them. */

.bento .card__crop { margin-top: 8px; flex: 1 1 auto; display: flex; align-items: center; background: #EEF0F5; }

.bento .card__crop button { width: 100%; }

/* Stack cards read top-down; the code label is a heading, not a footer. */

/* .card > :is(...) takes the specificity of its .tier .btn argument; the doubled class outranks it. */
.stack .card.card > code { margin-top: 0; }


/* ---------- Scrollytelling frame placement ----------
   Centred in the space below the sticky nav (84px), never under it, on short
   and tall windows alike. Frames already passed wait above, the rest below. */
.scrolly__stage { top: max(100px, calc((100vh + 84px) / 2 - min(34vw, 300px))); }
.scrolly__frames > .is-past { transform: translateY(-18px) scale(0.985); }

/* ---------- Try it: the three install commands ---------- */
.try { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
.try__step { display: grid; gap: 10px; align-content: start; }
.try__step:first-child { grid-row: span 2; }
.try .h4 { font-size: 17px; }
.navy .code { background: #0B1120; border: 1px solid var(--line-navy-strong); }
.try .code pre { font-size: 13px; }
.try__actions { margin-top: 32px; }
#try .hero__note { margin-top: 16px; max-width: 72ch; }
@media (max-width: 900px) { .try { grid-template-columns: minmax(0, 1fr); } .try__step:first-child { grid-row: auto; } }

/* ---------- What a team gets: five linked cards ---------- */
.values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 5vw, 56px); }
.value { gap: 10px; transition: border-color var(--dur-ui) var(--ease-out), transform 200ms var(--ease-out); }
.value p { font-size: 14.5px; color: var(--ink-2); }
.value .link { margin-top: auto; padding-top: 4px; font-size: 14.5px; }
.value__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--pyxa-violet); }
@media (hover: hover) and (pointer: fine) { .paper .value:hover { border-color: var(--pyxa-violet); transform: translateY(-2px); } }
@media (max-width: 1100px) { .values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .values { grid-template-columns: minmax(0, 1fr); } }
/* Try it, laid out: the long fetch step across the full width, start and sign in side by side.
   Code boxes may shrink and scroll sideways; the command never runs under the Copy button. */
.try { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.try__step { min-width: 0; }
.try__step:first-child { grid-column: 1 / -1; grid-row: auto; }
.try .code pre { padding-right: 84px; }
@media (max-width: 900px) { .try { grid-template-columns: minmax(0, 1fr); } }
.try__step { grid-template-columns: minmax(0, 1fr); }
.paper .mono-link { color: var(--ink); }

/* ==========================================================================
   Refinements after the Qarin study: one section rhythm, readable fragments,
   a source hub, inset panels, boxed FAQ rows, the footer wordmark.
   ========================================================================== */

/* Section labels sit in a neutral chip (never a violet outline: that shape means risk accepted). */
.section-head > .eyebrow, .hero__copy > .eyebrow {
  width: fit-content; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line-navy-strong); background: rgba(255, 255, 255, 0.04);
}
.paper .section-head > .eyebrow { border-color: var(--line-paper); background: #fff; color: var(--ink-muted); }
.section-head--center .lede { max-width: 62ch; }

/* What a team gets: each card ends on a fragment of the app at its real size. */
.vbento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.vcard { grid-column: span 2; gap: 10px; padding-bottom: 0; overflow: hidden; transition: border-color var(--dur-ui) var(--ease-out), transform 200ms var(--ease-out); }
.vcard--wide { grid-column: span 4; }
.vbento .vcard:nth-child(2) { grid-column: span 2; }
.vcard p { font-size: 14.5px; color: var(--ink-2); max-width: 52ch; margin-bottom: 14px; }
.vcard__shot {
  margin: auto calc(-1 * clamp(22px, 2.6vw, 32px)) 0;
  height: 250px; overflow: hidden; background: #EEF0F5; border-top: 1px solid var(--line-paper);
  padding: 20px 0 0 20px;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
}
.vcard__shot img { width: auto; max-width: none; height: auto; display: block; border-radius: 8px; border: 1px solid var(--line-paper); box-shadow: 0 12px 28px -16px rgba(19, 29, 59, 0.35); }
@media (hover: hover) and (pointer: fine) { .paper .vcard:hover { border-color: var(--pyxa-violet); transform: translateY(-2px); } }
@media (max-width: 1000px) { .vcard, .vcard--wide, .vbento .vcard:nth-child(2) { grid-column: span 3; } .vcard--wide { grid-column: 1 / -1; } }
@media (max-width: 640px) { .vcard, .vcard--wide, .vbento .vcard:nth-child(2) { grid-column: 1 / -1; } }

/* Every source, one queue: six source groups wired into the mark. */
.hub {
  display: grid; align-items: stretch; margin-top: clamp(40px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.1fr) minmax(40px, 0.45fr) auto minmax(40px, 0.45fr) minmax(0, 1.1fr);
}
.hub__nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px; }
.hub__node {
  display: grid; gap: 4px; align-content: center; min-height: 92px; padding: 16px 18px;
  border: 1px solid var(--line-navy-strong); border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.035);
}
.hub__node b { font-weight: 600; font-size: 15.5px; }
.hub__node span { font-size: 13px; line-height: 1.45; color: var(--on-navy-faint); }
.hub__wire { width: 100%; height: 100%; overflow: visible; }
.hub__wire path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hub__wire .base { stroke: rgba(255, 255, 255, 0.14); }
.hub__wire .flow { stroke: var(--pyxa-violet-reversed); stroke-dasharray: 5 15; animation: hub-flow 1.6s linear infinite; }
@keyframes hub-flow { to { stroke-dashoffset: -20; } }
.hub__core { align-self: center; display: grid; justify-items: center; gap: 10px; text-align: center; padding-inline: 6px; }
.hub__mark { width: 104px; height: 104px; border-radius: 26px; background: #0D1321; border: 1px solid var(--line-navy-strong); display: grid; place-items: center; }
.hub__mark img { width: 52px; height: 52px; }
.hub__core b { font-weight: 500; letter-spacing: 0.06em; font-size: 17px; }
.hub__core span { font-size: 12.5px; color: var(--on-navy-faint); max-width: 15ch; }
@media (max-width: 900px) {
  .hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .hub__wire { display: none; }
  .hub__core { grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; }
  .hub__nodes { grid-template-rows: none; }
}
@media (max-width: 900px) { .hub__node { min-height: 0; padding: 14px; } .hub__node b { font-size: 14.5px; } .hub__node span { font-size: 12.5px; } }
@media (max-width: 340px) { .hub { grid-template-columns: minmax(0, 1fr); } }

/* Inset panel: a coloured band with rounded corners and page around it. */
.section--panel { padding-block: clamp(24px, 3vw, 40px); }
.panel { position: relative; border-radius: 28px; margin-inline: clamp(12px, 2vw, 28px); padding-block: clamp(64px, 8vw, 104px); overflow: hidden; }
.panel > .wrap { position: relative; z-index: 1; }

/* FAQ: each question in its own box; a contact card under the heading. */
.faq details { border: 1px solid var(--line-paper); border-radius: 14px; background: #fff; padding-inline: 22px; }
.faq details + details { margin-top: 10px; }
.faq details:last-child { border-bottom: 1px solid var(--line-paper); }
.faq details > div { padding-right: 24px; }
.faq__ask { gap: 10px; margin-top: 18px; max-width: 360px; }
.faq__ask b { font-size: 17px; font-weight: 600; }
.faq__ask p { color: rgba(255, 255, 255, 0.78); font-size: 14.5px; }
.faq__ask .btn { width: fit-content; margin-top: 6px; }

/* Footer: the wordmark, Archivo Medium at 0.06em, as a quiet last line. */
.footer__word {
  font-weight: 500; letter-spacing: 0.06em; line-height: 0.78;
  font-size: clamp(88px, 21vw, 300px); color: rgba(255, 255, 255, 0.045);
  margin-top: 40px; user-select: none; overflow: hidden; white-space: nowrap;
}
/* The page around an inset panel is paper, but its text colours come from the panel itself. */
.section--panel { background: var(--pyxa-paper); }
.panel.navy { color: #fff; }
#try .try__actions { justify-content: center; }
#try .hero__note { margin-inline: auto; text-align: center; }

/* ---------- Plans: who each one is for, and a quieter second action ---------- */
.tier__for { font-size: 14px; font-weight: 500; color: var(--ink); margin-top: -6px; }
.tier--feature .tier__for { color: #fff; }
.tier__alt { align-self: center; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-paper); margin-top: -4px; }
.tier--feature .tier__alt { color: rgba(255, 255, 255, 0.82); text-decoration-color: rgba(255, 255, 255, 0.35); }
.tier .btn { justify-content: center; }
.ways { margin-top: clamp(40px, 5vw, 64px); }
/* A section contains its children's margins: with padding-top:0, a first child's top margin
   otherwise escapes the section and shows the dark page background as a band. */
.section { display: flow-root; }
#compare .cmp__bar { margin-top: 0; }

/* What makes PYXA different: three rules with their screens, three without. */
.bento .card--rule { grid-column: span 2; gap: 12px; transition: border-color var(--dur-ui) var(--ease-out), transform 200ms var(--ease-out); }
.bento .card--rule .link { margin-top: auto; padding-top: 4px; }
@media (hover: hover) and (pointer: fine) { .paper .bento .card--rule:hover { border-color: var(--pyxa-violet); transform: translateY(-2px); } }
@media (max-width: 860px) { .bento .card--rule { grid-column: span 6; } }
/* On a phone, product crops keep a readable width and scroll sideways inside their frame. */
@media (max-width: 640px) { .bento .card__crop { overflow-x: auto; overscroll-behavior-x: contain; } .bento .card__crop button { width: max-content; } .bento .card__crop img { width: 600px; max-width: none; } }

/* ---------- Try it: what the install does not ask for, then four steps ---------- */
.easy { list-style: none; margin: 32px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; }
.easy li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-navy-strong); background: rgba(255, 255, 255, 0.04); font-size: 14.5px; color: #fff;
}
.easy svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--pyxa-violet-reversed); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stepper { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; gap: 14px; position: relative; }
.stepper::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 1px; background: var(--line-navy-strong); }
.stepper__step {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 0 22px; align-items: center;
}
.stepper__n {
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; z-index: 1;
  background: var(--pyxa-navy); border: 1px solid var(--line-navy-strong); font-family: var(--font-mono); font-size: 15px; color: #fff;
}
.stepper__step--done .stepper__n { background: var(--pyxa-violet); border-color: var(--pyxa-violet); }
.stepper__text { display: grid; gap: 6px; padding-block: 8px; }
.stepper__text p { font-size: 15px; color: rgba(255, 255, 255, 0.78); }
.stepper .code { min-width: 0; }
.stepper .code pre { padding-right: 84px; font-size: 13px; }
.stepper__shot { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-navy-strong); background: #fff; max-height: 220px; }
.stepper__shot img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .stepper__step { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 16px; align-items: start; }
  .stepper__step > .code, .stepper__shot { grid-column: 2; }
}
/* Step 4 shows the top of Setup's step list at its real size, on the app's page surface. */
.stepper__shot { background: #EEF0F5; padding: 18px 0 0 22px; height: 230px; max-height: none;
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.stepper__shot img { width: 300px; max-width: none; border-radius: 8px; box-shadow: 0 12px 28px -16px rgba(19, 29, 59, 0.45); }
@media (max-width: 640px) { .stepper .code { display: flex; flex-direction: column; } .stepper .code button { position: static; align-self: flex-end; margin: 10px 10px 0 0; } .stepper .code pre { padding: 10px 18px 18px; } }
@media (max-width: 640px) { .stepper .code button { order: -1; } }

/* The walkthrough steps were three-fifths of a screen each; half reads the same with less scrolling. */
.step { min-height: 50vh; }

/* The GitHub link: the mark beside the word, never the mark alone. */
.nav__gh { display: inline-flex; align-items: center; gap: 7px; }
.gh-mark { width: 16px; height: 16px; fill: currentColor; flex: none; }