/* ==========================================================================
   GuardEx landing page
   Desktop values are a 1:1 port of the original artifact and are the contract:
   do not "tidy" them. Responsive behaviour lives in the media queries at the
   bottom of this file.
   ========================================================================== */

:root {
  /* Instrument Sans carries display and body — a grotesque with real 400–700
     weights, tighter than Inter or Geist. IBM Plex Mono carries all code. */
  --display: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 48px;
  --shell: 1680px;
  --narrow: 1080px;

  /* ink */
  --ink: #14101F;
  --ink-mid: #475569;
  --ink-soft: #64748B;
  --ink-faint: #5A6678;

  /* brand */
  --violet: #6D28E8;
  --violet-deep: #5A1FC4;
  --violet-dark: #3B1B8F;
  --violet-light: #A78BFA;
  --violet-pale: #C4B4F7;

  /* surfaces, light */
  --paper: #FFFEFC;
  --paper-tint: #FAF8FD;
  --paper-tint-2: #F8F5FC;
  --line: #EBE6F3;
  --line-soft: #EFEAF6;

  /* surfaces, dark */
  --night: #16112B;
  --night-2: #1E1838;
  --night-3: #120E22;
  --night-line: #2A2150;
  --card-line: #332A5C;
  --chip: #221B40;
  --chip-line: #362C60;
  --dim: #BFB6DC;
  --dimmer: #9A90C4;

  --header-h: 64px;
}

/* --------------------------------------------------------- typography --- */
/* One family across display and body, so the scale is carried by size and
   weight rather than by a second typeface. Every size below is the original
   value: Instrument Sans has real weights, so nothing needs compensating. */
h1, h2, h3 { font-family: var(--display); }

/* ---------------------------------------------------------------- base --- */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-dark); text-decoration: underline; text-underline-offset: 3px; }

pre, code { font-family: var(--mono); }
button { font-family: inherit; }

img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

.sec-head { margin-bottom: 24px; }
.sec-title { margin: 0 0 8px; font-size: 28px; font-weight: 700; letter-spacing: -0.026em; }
.sec-sub { margin: 0; font-size: 15.5px; color: var(--ink-soft); }
.accent { color: var(--violet); }

/* code token colours, shared by hero and build panes */
.tk-k { color: #A78BFA; }
.tk-s { color: #7DD3A8; }
.tk-n { color: #6FC7DD; }
.tk-c { color: #9A90C4; }
.tk-p { color: #D9D2EB; }

/* -------------------------------------------------------------- header --- */

/* Three states, decided by whatever section sits under the bar:
     .at top          fully transparent — nothing behind the hero
     (scrolled, dark) dark frosted, marks stay light
     .on-light        light frosted, marks flip dark
   The bar floats over the hero rather than pushing it down, so there is no
   spacer: the hero carries its own top padding instead. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .32s ease, border-color .32s ease;
}
.site-header.is-stuck {
  background: rgba(18, 14, 34, 0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(167, 139, 250, 0.16);
}
.site-header.on-light {
  background: rgba(255, 254, 252, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: #EBE6F4;
}
.site-header__inner {
  max-width: var(--shell); margin: 0 auto; height: 100%;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.site-header__spring { flex: 1; }

.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand__mark { display: flex; align-items: center; gap: 11px; }
.brand__mark:hover { text-decoration: none; }
.brand__shield { height: 28px; width: auto; display: block; }
/* live text, so inverting the wordmark is a colour change, not a second asset */
.brand__word {
  font-family: var(--display); font-size: 21px; font-weight: 600;
  letter-spacing: -0.03em; color: #fff; transition: color .32s ease;
}
.brand__rule { width: 1px; height: 24px; background: rgba(255,255,255,0.22); display: block; transition: background .32s ease; }
.brand__by { display: flex; }
.brand__by:hover { text-decoration: none; }
.atliq { height: 26px; width: auto; display: block; }
.atliq--dark { display: none; }

.site-nav {
  display: flex; align-items: center; gap: 18px;
  font-size: 14.5px; white-space: nowrap;
}
.site-nav > a { color: rgba(255,255,255,0.76); transition: color .32s ease; }
.site-nav > a:hover { color: #fff; }

.site-nav .btn-github {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--night);
  padding: 8px 15px; border-radius: 6px;
  font-weight: 500; font-size: 14px;
  transition: background .32s ease, color .32s ease;
}
.site-nav .btn-github:hover { background: #EDE9FB; color: var(--night); text-decoration: none; }
.site-nav .btn-github svg { display: block; fill: currentColor; }

/* the light inversion */
.site-header.on-light .brand__word { color: var(--ink); }
.site-header.on-light .brand__rule { background: #DFD8EE; }
.site-header.on-light .atliq--light { display: none; }
.site-header.on-light .atliq--dark { display: block; }
.site-header.on-light .site-nav > a { color: #4A4362; }
.site-header.on-light .site-nav > a:hover { color: var(--violet); }
.site-header.on-light .site-nav .btn-github { background: var(--night); color: #fff; }
.site-header.on-light .site-nav .btn-github:hover { background: var(--night-line); color: #fff; }
.site-header.on-light .nav-toggle { color: #4A4362; }

.nav-toggle { display: none; }
.nav-scrim { display: none; }

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

.hero {
  position: relative; background: var(--night);
  border-bottom: 1px solid var(--night-line);
  overflow: hidden; isolation: isolate;
}

/* Four quiet layers. None reads as "an effect" alone; together they stop the
   panel looking like flat paint. transform/opacity only — compositor work. */
.hero__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__fx span { position: absolute; display: block; }

.fx-dots {
  inset: -2px;
  background-image: radial-gradient(rgba(167, 139, 250, 0.20) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 78% 76% at 64% 34%, #000 4%, transparent 72%);
  mask-image: radial-gradient(ellipse 78% 76% at 64% 34%, #000 4%, transparent 72%);
}
.fx-bloom {
  width: 1060px; height: 640px; left: -12%; top: -28%;
  background: radial-gradient(closest-side, rgba(124, 58, 240, 0.34), transparent 70%);
  animation: heroBreathe 17s ease-in-out infinite; will-change: transform, opacity;
}
@keyframes heroBreathe {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.14); opacity: 1; }
}
/* the only thing crossing the panel, which is why it can be this slow */
.fx-beam {
  top: -70%; left: 0; width: 34%; height: 240%;
  background: linear-gradient(90deg, transparent, rgba(180, 150, 255, 0.11), transparent);
  filter: blur(26px);
  animation: heroBeam 19s linear infinite; will-change: transform;
}
@keyframes heroBeam {
  0% { transform: rotate(16deg) translateX(-60vw); }
  100% { transform: rotate(16deg) translateX(200vw); }
}
/* kills the banding a big soft gradient always shows on OLED */
.fx-grain {
  inset: 0; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--shell); margin: 0 auto;
  padding: calc(var(--header-h) + 56px) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 56px; align-items: center;
}
.hero__copy, .hero__panel-wrap { padding-bottom: 68px; }

.hero__lockup { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.hero__lockup img { height: 70px; width: auto; display: block; filter: drop-shadow(0 10px 28px rgba(109, 40, 232, 0.45)); }
.hero__title {
  margin: 0;
  font-size: 84px; line-height: .98;
  letter-spacing: -0.04em; font-weight: 600; color: #FFFFFF;
}
.hero__lede {
  margin: 0 0 18px;
  font-size: 18.5px; line-height: 1.6; color: var(--dim); max-width: 33em;
}
.hero__lede + .hero__lede { margin-bottom: 26px; }

/* ── the screening demo: fixed perimeter, the change happens inside it ── */
.demo-label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6E6699;
}
.demo-label b {
  width: 5px; height: 5px; border-radius: 50%; background: #7DD3A8; flex: 0 0 auto;
  box-shadow: 0 0 8px #7DD3A8; animation: demoBlip 2.2s ease-in-out infinite;
}
@keyframes demoBlip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* height is fixed, never min-height: the card is a perimeter, not a container
   that grows. Every string is short enough to hold one line inside it. */
.demo {
  background: rgba(18, 14, 36, 0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--chip-line); border-radius: 10px;
  padding: 0 19px; margin-bottom: 22px; max-width: 38em; height: 74px;
  display: flex; align-items: center; gap: 16px; overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.04);
}
.demo__body {
  flex: 1; min-width: 0; font-family: var(--mono);
  font-size: 13px; line-height: 1.5; color: #B9AEDA;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo__caret { color: var(--violet-light); margin-right: 8px; }
.demo__hit { position: relative; display: inline; border-radius: 4px; }
.demo__raw { font-style: normal; color: #E4DEF8; }
/* the token REPLACES the value in the flow — holding the old width would leave
   a hole where the long string used to be, and redaction really does shorten */
.demo__tok {
  font-style: normal; display: none; white-space: nowrap;
  border-radius: 4px; padding: 1px 6px;
}

/* The beam crosses the WHOLE card, not just the value, so it reads as the line
   being scanned. JS measures where the value sits and fires the swap at the
   moment the beam is over it — that's what makes the beam look like the cause
   rather than something that happened nearby. */
.demo__scan {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
  width: 120px; pointer-events: none; opacity: 0;
  transform: translateX(-120px);
  background: linear-gradient(90deg,
    transparent,
    rgba(167, 139, 250, 0.06) 30%,
    rgba(216, 202, 255, 0.42) 50%,
    rgba(167, 139, 250, 0.06) 70%,
    transparent);
}
/* LINEAR, deliberately. With an eased beam, clock time no longer maps to beam
   position, so the swap timing JS computes from geometry would land in the
   wrong place — and a scanner at constant speed is the more believable read. */
.demo.is-scanning .demo__scan {
  animation: demoScan var(--scan-dur, 1150ms) linear forwards;
}
@keyframes demoScan {
  0%   { transform: translateX(-120px); opacity: 0; }
  9%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(var(--scan-end, 100%)); opacity: 0; }
}

/* the value lights up for the instant the beam is on it */
.demo__hit.is-lit { background: rgba(167, 139, 250, 0.22); box-shadow: 0 0 14px rgba(167, 139, 250, 0.35); }
.demo__hit { transition: background .18s ease, box-shadow .18s ease; }

.demo.is-done .demo__raw { display: none; }
/* inline-block so the token can be scaled on entry — a plain inline box can't */
.demo.is-done .demo__tok { display: inline-block; animation: demoPop .26s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes demoPop {
  0%   { transform: scale(.88); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* fixed slot so a wider verdict word can't shove the line sideways */
.demo__status {
  flex: 0 0 86px; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 5px 0; border-radius: 999px; white-space: nowrap;
  background: #241C42; color: #8B82A8; border: 1px solid var(--chip-line);
  transition: background .25s, color .25s, border-color .25s;
}
.demo-rail { display: flex; gap: 6px; margin: -12px 0 26px; padding-left: 2px; }
.demo-rail button {
  width: 20px; height: 3px; border: 0; padding: 0; border-radius: 2px;
  background: #382F5E; cursor: pointer; transition: background .3s, width .3s;
}
.demo-rail button:hover { background: #4E4383; }
.demo-rail button.is-on { width: 34px; background: var(--violet-light); }

.hero__actions {
  display: flex; align-items: stretch; gap: 12px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.hero__note { margin: 0; font-size: 14px; color: var(--dimmer); }

.install-chip {
  display: flex; align-items: center; gap: 14px;
  background: var(--chip); border: 1px solid var(--chip-line);
  border-radius: 7px; padding: 11px 14px;
}
.install-chip__cmd { font-size: 14.5px; color: #E4DEF8; }
.install-chip__prompt { color: var(--dimmer); }
.install-chip__copy {
  background: var(--chip-line); border: 0; color: #D6CEF2;
  font-size: 12px; padding: 6px 11px; border-radius: 5px;
  cursor: pointer; letter-spacing: 0.03em;
}
.install-chip__copy:hover { background: #4A3D80; }
.cta .install-chip__copy { letter-spacing: normal; }

.btn-ghost {
  display: inline-flex; align-items: center; color: var(--violet-pale);
  border: 1px solid var(--chip-line); border-radius: 7px;
  padding: 11px 18px; font-size: 15px; font-weight: 500;
}
.btn-ghost--wide { padding: 11px 20px; }
.btn-ghost:hover { border-color: var(--violet-light); color: #fff; text-decoration: none; }

/* hero code panel */
.code-panel {
  background: var(--night-2); border: 1px solid var(--card-line);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
.code-panel__tabs {
  display: flex; flex-wrap: nowrap; gap: 2px;
  padding: 8px 8px 0; border-bottom: 1px solid var(--card-line);
  overflow-x: auto;
}
.code-tab {
  background: transparent; color: var(--dimmer);
  border: 0; border-radius: 6px 6px 0 0;
  padding: 9px 12px; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.code-tab.is-on { background: #2C2454; color: #EDE9FB; }
.code-panel__body { padding: 22px 24px; height: 486px; overflow: hidden; }
.code-pane {
  margin: 0; font-size: 13.5px; line-height: 1.82;
  color: #D5CEEE; white-space: pre;
}
.code-pane[hidden] { display: none; }

/* stats bar */
.stats { border-top: 1px solid var(--night-line); background: rgba(0, 0, 0, 0.16); }
.stats__inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat { padding: 20px 26px; border-left: 1px solid var(--night-line); }
.stat__v {
  font-family: var(--mono);
  font-size: 20px; font-weight: 500; color: #EDE9FB;
}
.stat__k { font-size: 13px; color: var(--dimmer); margin-top: 3px; }

/* ----------------------------------------------------------------- how --- */

.how {
  position: relative; padding: 54px 0 58px;
  background: var(--paper); border-bottom: 1px solid #F1EDF9; overflow: hidden;
}
.how__dots {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.85;
  background-image:
    radial-gradient(#D2C9E6 1px, transparent 1px),
    radial-gradient(#BCA2F0 1px, transparent 1px);
  background-size: 24px 24px, 96px 96px;
  background-position: 0 0, 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, transparent 12%, #000 92%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, transparent 12%, #000 92%);
}
.how .shell { position: relative; }
.how .sec-sub { margin-bottom: 26px; }

.flow { max-width: var(--narrow); margin: 0 auto; }
.flow__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1.16fr) 54px minmax(0, 1fr);
  align-items: stretch;
}

.node {
  border: 1px solid var(--line); background: #FBF9FD;
  border-radius: 12px; padding: 24px 18px; text-align: center;
  transform: translateY(0); box-shadow: none;
  transition: border-color .35s, box-shadow .35s, transform .35s;
}
.node.is-on {
  border-color: #C4A8F5; background: #FAF7FE;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -18px rgba(109, 40, 232, 0.55);
}
.node--app, .node--llm { display: flex; flex-direction: column; justify-content: center; }
.node--llm { transition: border-color .35s, box-shadow .35s, transform .35s, opacity .35s; opacity: 1; }
.node--llm.is-stopped { opacity: 0.45; }
.node--guard { position: relative; }

.node__icon {
  width: 38px; height: 38px; margin: 0 auto 14px;
  border-radius: 9px; background: #EFEAF6;
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft);
}
.node__icon--brand { background: #EAE1FD; margin: 0 auto 12px; }
.node__icon--brand img { height: 20px; width: auto; display: block; }
.node__title { font-size: 15.5px; font-weight: 600; }
.node__title--brand { color: var(--violet-deep); margin-bottom: 11px; }
.node__sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }
.node__badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--violet); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 999px;
}

.layers { display: grid; gap: 5px; }
.layer {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 5px 9px; border-radius: 6px;
  border: 1px solid transparent; background: var(--paper-tint-2); color: #62697A;
  transition: background .3s, color .3s, border-color .3s;
}
.layer__dot {
  width: 6px; height: 6px; border-radius: 50%; display: block;
  background: #DDD6EA; transform: scale(1); box-shadow: none;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.layer__label { flex: 1; text-align: left; }
.layer__mark {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.05em; color: #6E6689;
}

.link { position: relative; display: flex; align-items: center; justify-content: center; }
.link__line { width: 34px; height: 1px; background: #DCD4EA; display: block; }
.link__arrow {
  width: 0; height: 0; display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #DCD4EA;
}
.link__packet {
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--violet); display: block; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(109, 40, 232, 0.16);
  opacity: 0; transform: translate(-50%, -50%) translateX(-22px);
  transition: transform .85s cubic-bezier(.5, 0, .5, 1), opacity .3s;
}

.io {
  margin-top: 22px; background: #FFFFFF;
  border: 1px solid var(--line); border-radius: 12px;
  text-align: left; overflow: hidden;
  box-shadow: 0 1px 2px rgba(24, 16, 48, 0.04);
}
.io__row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 16px; align-items: center; padding: 15px 18px;
}
.io__row--out {
  border-top: 1px solid var(--line-soft); background: #FCFBFD; opacity: 0.25;
  transition: opacity .45s ease, background .45s;
}
.io__row--out.is-on { background: #FBF9FE; opacity: 1; }
.io__label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: #6E6689; }
.io__value {
  font-family: var(--mono);
  font-size: 12.5px; line-height: 1.6; color: #2A2440; overflow-wrap: anywhere;
  /* Hold one line even while empty. The "Model sees" row is populated part-way
     through the animation; without this the row collapses and the whole panel
     jumps height mid-cycle. */
  min-height: 1.6em;
}
.io__status {
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  background: #F4F1FA; color: #6E6689; border: 1px solid var(--line);
  transition: background .3s, color .3s, border-color .3s;
}
.io__note {
  font-size: 11.5px; color: #6E6689; white-space: nowrap;
  opacity: 0; transition: opacity .4s;
}
.io__row--out.is-on .io__note { opacity: 1; }

.dots {
  margin-top: 14px; display: flex;
  align-items: center; justify-content: center; gap: 8px;
}
.dot {
  width: 7px; height: 7px; border-radius: 999px;
  border: 0; padding: 0; cursor: pointer; background: #DCD4EA;
  transition: width .3s, background .3s;
}
.dot.is-on { width: 20px; background: var(--violet); }
.dots__name { font-size: 12px; color: var(--ink-faint); margin-left: 6px; }

.pill-note {
  margin: 20px auto 0; display: table;
  font-size: 12.5px; color: var(--ink-faint);
  background: var(--paper-tint-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
}

/* ------------------------------------------------------------- catches --- */

/* The one dark band in the middle of the page. It carries the threat inventory,
   so shadow is the right register — and it breaks a five-section light run
   without ever sitting next to the dark sticky cards in #build. */
.catches {
  background: var(--night);
  border-top: 1px solid var(--night-line);
  border-bottom: 1px solid var(--night-line);
  padding: 54px 0 58px;
  color: #fff;
}
.catches .sec-title { color: #fff; }
.catches .sec-sub { color: var(--dim); }

.group { margin: 0 auto 22px; max-width: var(--narrow); }
.group__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.group__label {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.005em; color: var(--violet-light);
}
.group__rule { flex: 1; height: 1px; background: rgba(167, 139, 250, 0.18); display: block; }
.group__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.fcard {
  border: 1px solid var(--card-line); background: var(--night-2);
  border-radius: 10px; padding: 18px 20px;
  transition: border-color .3s, background .3s;
}
.fcard:hover { border-color: var(--violet-light); background: #241C42; }
.fcard__title { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; color: #fff; }
.fcard__body { font-size: 13.5px; line-height: 1.55; color: #A79DC4; }

/* --------------------------------------------------------------- cases --- */

.cases { padding: 54px 0 58px; }
.cases__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; align-items: stretch; max-width: var(--narrow); margin: 0 auto;
}
.ccard {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 24px 22px; display: flex; flex-direction: column;
}
.ccard:hover { border-color: #DDD1FA; }
.ccard__title { font-size: 15.5px; font-weight: 600; margin-bottom: 14px; }

.rf {
  display: grid; grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px; align-items: start;
}
.rf + .rf { margin-top: 11px; }
.rf__tag {
  font-size: 11.5px; font-weight: 600;
  padding: 3px 6px; border-radius: 4px; text-align: center;
}
.rf__tag--risk { color: #B91C1C; background: #FEE2E2; }
.rf__tag--fix { color: var(--violet-deep); background: #EAE1FD; }
.rf__text { font-size: 13.5px; line-height: 1.5; color: var(--ink-mid); }

.art { position: relative; height: 138px; margin-bottom: 20px; }
.art--chat { display: flex; align-items: flex-start; }
.art--rag { display: flex; flex-direction: column; gap: 8px; width: 156px; }

.ln { height: 4px; border-radius: 2px; background: #463C78; }
.ln--head { background: #4A3E7A; }
.ln--dim { background: #2E2752; }
.ln--src { background: #D9CEF2; }
.ln--hi { flex: 1; background: var(--violet-light); }

/* case art: chat */
.chatwin {
  width: 148px; background: #1B1533; border-radius: 9px; overflow: hidden;
  box-shadow: 0 12px 26px -12px rgba(27, 21, 51, 0.55);
}
.chatwin__bar {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 9px; background: #241C42; border-bottom: 1px solid #332B5C;
}
.chatwin__dot { width: 5px; height: 5px; border-radius: 50%; background: #4A3E7A; display: block; }
.chatwin__pill { width: 34px; height: 3px; border-radius: 2px; background: #3A3168; display: block; margin-left: 3px; }
.chatwin__body { padding: 10px 9px; display: flex; flex-direction: column; gap: 6px; }
.bubble { display: flex; flex-direction: column; gap: 3px; }
.bubble--them {
  align-self: flex-start; background: #2E2752;
  border-radius: 6px 6px 6px 2px; padding: 5px 7px; width: 62%;
}
.bubble--me {
  align-self: flex-end; background: var(--violet);
  border-radius: 6px 6px 2px 6px; padding: 4px 6px;
  flex-direction: row; align-items: center; gap: 4px;
}
.bubble__tok {
  font-family: var(--mono);
  font-size: 7px; color: #fff; white-space: nowrap;
}

/* case art: documents */
.sheet { position: absolute; border-radius: 7px; }
.sheet--back {
  left: 18px; top: 12px; width: 96px; height: 116px;
  background: #EDE7F7; border: 1px solid #E2D9F2; transform: rotate(-8deg);
}
.sheet--mid {
  left: 26px; top: 7px; width: 96px; height: 120px;
  background: #F7F3FD; border: 1px solid #E2D9F2; transform: rotate(-4deg);
}
.sheet--front {
  left: 36px; top: 0; width: 100px; height: 128px;
  background: #1B1533; padding: 12px;
  display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 12px 26px -12px rgba(27, 21, 51, 0.55);
}
.sheet__rule { height: 1px; background: #332B5C; margin: 1px 0 2px; }
.sheet__tok {
  display: inline-flex; align-self: flex-start;
  background: rgba(109, 40, 232, 0.22); border: 1px solid var(--violet);
  border-radius: 3px; padding: 3px 5px;
  font-family: var(--mono);
  font-size: 8px; color: #DCD0FB; white-space: nowrap;
}

/* case art: rag */
.answer {
  background: #1B1533; border-radius: 8px; padding: 11px 12px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 12px 26px -14px rgba(27, 21, 51, 0.55);
}
.answer__label {
  font-family: var(--mono);
  font-size: 8px; letter-spacing: 0.05em; color: #A79BD0;
}
.answer__flag { display: flex; align-items: center; gap: 5px; }
.answer__bang {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--violet-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; color: var(--violet-light); line-height: 1;
}
.ticks { display: flex; align-items: center; justify-content: center; gap: 4px; }
.ticks span { width: 1px; height: 8px; background: #D6CCEE; display: block; }
.sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.source {
  border: 1px solid #E2D9F2; background: #F7F4FD;
  border-radius: 5px; padding: 7px 6px;
  display: flex; flex-direction: column; gap: 3px;
}
.source--none {
  border: 1px dashed #B9A2F2; background: #F3EEFD;
  align-items: center; justify-content: center;
}
.source--none span {
  font-family: var(--mono);
  font-size: 8px; color: var(--violet-deep); white-space: nowrap;
}

/* --------------------------------------------------------------- build --- */

.build {
  background: var(--paper-tint-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.build__head { padding-top: 60px; }
.build__intro { max-width: 40em; }
.kicker {
  margin: 0 0 12px; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--violet);
}
.build__title { margin: 0 0 12px; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
.build__lede { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-mid); }
.build__stack { padding-bottom: 64px; }

.stack { position: sticky; top: 84px; padding-bottom: 26px; }
.stack__card {
  background: var(--night-2); border: 1px solid var(--card-line);
  border-radius: 16px; padding: 22px 34px;
  height: min(440px, calc(100vh - 118px));
  height: min(440px, calc(100dvh - 118px));
  min-height: 372px; overflow: auto;
  display: flex; align-items: center;
  transform-origin: 50% 0%; will-change: transform;
  box-shadow: 0 26px 60px -32px rgba(22, 17, 43, 0.6);
}
.stack__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 34px; align-items: center; width: 100%;
  transition: opacity .1s linear;
}
.stack__kickerwrap { margin-bottom: 14px; }
.stack__kicker {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--violet-light);
}
.stack__title {
  margin: 0 0 12px; font-size: 27px; font-weight: 600;
  letter-spacing: -0.03em; color: #fff;
}
.stack__body { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: #C6BEDC; }
.bullets { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.bullets li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px;
  font-size: 14.5px; line-height: 1.45; color: #D9D2EB;
}
.bullets__dot { color: var(--dimmer); }
.stack__link {
  font-size: 15px; font-weight: 500; color: var(--violet-pale);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(196, 180, 247, 0.4);
}
.stack__pane {
  background: var(--night); border: 1px solid var(--card-line);
  border-radius: 10px; padding: 18px 20px; overflow: auto; min-width: 0;
}
.build-code {
  margin: 0; font-size: 12.5px; line-height: 1.75;
  color: #D9D2EB; white-space: pre; overflow: auto;
}

/* ------------------------------------------------------------- install --- */

.install { padding: 54px 0 58px; }
.editions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; align-items: stretch; max-width: var(--narrow); margin: 0 auto;
}
.edition {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 20px; height: 100%; display: flex; flex-direction: column;
}
.edition--rec {
  border: 1.5px solid var(--violet);
  box-shadow: 0 14px 32px -20px rgba(109, 40, 232, 0.55);
}
.edition__badgeslot { height: 20px; margin-bottom: 10px; }
.edition__badge {
  display: inline-block; background: var(--violet); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 4px;
}
.edition__name { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.edition__pkg {
  font-family: var(--mono);
  font-size: 11.5px; line-height: 1.5; color: var(--violet-dark);
  background: #F7F4FD; border: 1px solid #E7E1F1;
  padding: 9px 11px; border-radius: 6px; margin-bottom: 8px;
  overflow-wrap: anywhere; min-height: 50px;
  display: flex; align-items: center; gap: 7px;
}
.edition__prompt { color: #6E6689; }
.edition__size { font-size: 12px; color: var(--ink-faint); margin-bottom: 14px; }
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.checks li {
  display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px;
  font-size: 13px; line-height: 1.45; color: var(--ink-mid);
}
.checks__ic { color: var(--violet); display: flex; padding-top: 2px; }
.install__note {
  margin: 26px auto 0; max-width: var(--narrow);
  font-size: 13.5px; color: var(--ink-soft);
}

/* ----------------------------------------------------------------- faq --- */

.faq {
  background: var(--paper-tint);
  border-top: 1px solid var(--line-soft);
  padding: 54px var(--gutter) 58px;
}
.faq__inner { max-width: 1180px; margin: 0 auto; }
.faq__title { margin: 0 0 22px; }
.faq__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; align-items: start;
}
.qa {
  background: #FFFFFF; border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 18px;
}
.qa summary {
  cursor: pointer; font-size: 14.5px; font-weight: 600;
  line-height: 1.4; color: var(--ink);
}
.qa p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* ----------------------------------------------------------------- cta --- */

.cta {
  background: var(--night);
  background-image: radial-gradient(700px 300px at 50% 120%, rgba(124, 58, 240, 0.3), transparent 65%);
  border-top: 1px solid var(--night-line);
}
.cta__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 58px var(--gutter); text-align: center;
}
.cta__title {
  margin: 0 0 14px; font-size: 30px; font-weight: 600;
  letter-spacing: -0.03em; color: #fff;
}
.cta__lede {
  margin: 0 auto 28px; font-size: 17px; line-height: 1.6;
  color: var(--dim); max-width: 32em;
}
.cta__code { font-size: 15px; color: var(--violet-pale); }
.cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------- maintainer ----- */

.maint { background: var(--night-3); border-top: 1px solid #241C42; }
.maint__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 36px var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px; align-items: center;
}
.maint__eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--dimmer); }
/* sized so the lockup carries the same optical weight as the 21px wordmark it
   replaced, keeping this block's height within a few px of the original */
.maint__logo { display: inline-flex; margin: 0 0 8px; }
.maint__logo img { height: 28px; width: auto; display: block; }
.maint__logo:hover { text-decoration: none; }
.maint__body { margin: 0; font-size: 15px; line-height: 1.6; color: #A79DC4; max-width: 40em; }
.maint__links { display: flex; gap: 10px; flex-wrap: wrap; }

.btn-outline {
  display: inline-flex; align-items: center; color: var(--violet-pale);
  border: 1px solid var(--chip-line); border-radius: 7px;
  padding: 10px 18px; font-size: 14.5px; font-weight: 500; white-space: nowrap;
}
.btn-outline--light { color: #E4DEF8; }
.btn-outline:hover { border-color: var(--violet-light); color: #fff; text-decoration: none; }

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

.site-footer { background: var(--night-3); border-top: 1px solid #241C42; padding: 22px 0; }
.site-footer__inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between;
  font-size: 13px; color: #8B82A8;
}
.site-footer a { color: var(--violet-pale); }


/* ==========================================================================
   RESPONSIVE
   Floor is 360px (Galaxy S24/S25), not 390px — a 6.1" phone spans 360-414
   CSS px depending on vendor.
   ========================================================================== */

/* --- 1180: laptops. gutters only, layout untouched ----------------------- */

@media (max-width: 1180px) {
  :root { --gutter: 32px; }
}

/* --- 960: tablet. columns collapse, sticky stacking switched off --------- */

@media (max-width: 960px) {
  /* 44px toggle + 12px padding x2 + 1px border. The spacer must track the real
     header height or the top of the hero slides underneath it. */
  :root { --header-h: 69px; }

  /* The desktop nav needs 771px minimum (brand 188 + gap 24 + nav 480 +
     gutters 64 + scrollbar 15), so it has to collapse here, not at 700 —
     otherwise it overflows the header across the whole 701-960 band. */
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;
    background: transparent; border: 0; padding: 0; cursor: pointer;
    color: #4A4362; flex: 0 0 auto;
  }
  .nav-toggle__bars { display: block; width: 20px; height: 14px; position: relative; }
  .nav-toggle__bars span {
    position: absolute; left: 0; width: 100%; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
  }
  .nav-toggle__bars span:nth-child(1) { top: 0; }
  .nav-toggle__bars span:nth-child(2) { top: 6px; }
  .nav-toggle__bars span:nth-child(3) { top: 12px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  .site-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    display: block; background: var(--paper);
    border-bottom: 1px solid #EBE6F4;
    box-shadow: 0 18px 40px -24px rgba(22, 17, 43, 0.45);
    padding: 8px max(var(--gutter), env(safe-area-inset-left)) 16px;
    white-space: normal;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform .22s ease, opacity .22s ease, visibility .22s;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .site-nav > a {
    display: flex; align-items: center; min-height: 48px;
    font-size: 16px; border-bottom: 1px solid var(--line-soft);
  }
  .site-nav > a:last-of-type { border-bottom: 0; }
  .btn-github {
    justify-content: center; margin-top: 14px;
    min-height: 48px; font-size: 15px; border-bottom: 0;
  }
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: rgba(20, 16, 31, 0.34);
    opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }
  .nav-scrim[hidden] { display: block; }

  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__panel-wrap { padding-bottom: 0; }
  .hero__copy { padding-bottom: 40px; }
  .hero__inner { padding-bottom: 48px; }

  .cases__grid, .editions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* sticky stacking cannot work once the card is taller than the viewport */
  .stack { position: static; padding-bottom: 20px; }
  .stack__card {
    height: auto; min-height: 0; overflow: visible;
    transform: none !important; padding: 26px;
  }
  .stack__grid {
    grid-template-columns: minmax(0, 1fr); gap: 24px;
    opacity: 1 !important;
  }
  .stack__pane { overflow-x: auto; }
}

/* --- 700: phone --------------------------------------------------------- */

@media (max-width: 700px) {
  /* brand shrinks to 30px but the 44px toggle still sets the row height:
     44 + 10px padding x2 + 1px border = 65 */
  :root { --gutter: 20px; --header-h: 65px; }

  .shell, .stats__inner, .site-header__inner, .hero__inner,
  .cta__inner, .maint__inner, .site-footer__inner {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .faq { padding-left: max(var(--gutter), env(safe-area-inset-left));
         padding-right: max(var(--gutter), env(safe-area-inset-right)); }

  /* header: brand marks shrink; the nav already became a panel at 960 */
  .site-header__inner { gap: 12px; }
  .brand { gap: 10px; }
  .brand__mark { gap: 9px; }
  .brand__shield { height: 24px; }
  .brand__word { font-size: 21px; }
  .brand__rule { height: 20px; }
  .atliq { height: 22px; }

  /* hero */
  .hero__inner { padding-top: calc(var(--header-h) + 30px); padding-bottom: 32px; gap: 0; }
  .hero__copy { padding-bottom: 0; }
  .hero__panel-wrap { display: none; }          /* code panel dropped on phones */
  .hero__lockup { gap: 12px; margin-bottom: 18px; }
  .hero__lockup img { height: 44px; }
  .hero__title { font-size: clamp(40px, 11.5vw, 62px); }
  /* The full lede runs seven lines on a 360px screen and pushed the install
     command toward the fold. Tightened, and the provider note waits until the
     reader has scrolled — it is reassurance, not the pitch. */
  .hero__lede { font-size: 15.5px; line-height: 1.5; margin-bottom: 12px; max-width: none; }
  .hero__lede + .hero__lede { margin-bottom: 18px; }
  .hero__note { display: none; }
  .fx-dots { background-size: 22px 22px; }

  /* the call signature is desktop context; on a phone it's one more thing to
     read before the point. Two fixed rows: the line, then the verdict. */
  .demo-label { display: none; }
  .demo {
    max-width: none; padding: 0 14px; gap: 8px; flex-wrap: wrap;
    height: 92px; align-content: center; margin-bottom: 18px;
  }
  /* truncating would hide the very thing the animation exists to show */
  .demo__body {
    font-size: 12.5px; flex: 1 1 100%;
    white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .demo__status { flex: 0 0 auto; padding: 5px 11px; }
  .demo-rail { margin: -10px 0 20px; gap: 0; }
  .demo-rail button { min-width: 28px; min-height: 44px; background: transparent; position: relative; }
  .demo-rail button::after {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 20px; height: 3px; border-radius: 2px; background: #382F5E; transition: width .3s, background .3s;
  }
  .demo-rail button.is-on { width: 28px; background: transparent; }
  .demo-rail button.is-on::after { width: 26px; background: var(--violet-light); }
  /* Let the BUTTON drop to its own line rather than let the command break
     mid-string. The command stays nowrap and always fits: it measures ~257px
     at 13px mono, against 304px of content box even at our 360px floor. */
  .install-chip { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
  .install-chip__cmd { font-size: 13px; white-space: nowrap; flex: 0 1 auto; }
  .install-chip__copy { min-height: 44px; flex: 1 0 auto; }
  .btn-ghost { min-height: 44px; }

  /* Logos are small by design, so the hit area is grown with a pseudo-element
     instead of padding — 44px targets without a taller header. Vertical only:
     horizontal growth would overlap the neighbouring logo link.

     A fixed 44px centred on the link, NOT tuned negative insets. Insets have to
     be recomputed every time a logo size or the display font changes, and they
     silently stop being 44px when you forget. This is correct by construction. */
  .brand__mark, .brand__by, .maint__logo { position: relative; }
  .brand__mark::after, .brand__by::after, .maint__logo::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%); height: 44px;
  }

  /* stats 4 -> 2x2 */
  .stats__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 16px 18px; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--night-line); }
  .stat:nth-child(odd) { border-left: 0; }

  /* sections */
  .how, .catches, .cases, .install { padding-top: 40px; padding-bottom: 44px; }
  .sec-title { font-size: clamp(22px, 6vw, 26px); }
  .sec-sub { font-size: 14.5px; }

  /* ---- flow diagram: horizontal -> vertical ---- */
  .flow__row { grid-template-columns: minmax(0, 1fr); }
  .link { flex-direction: column; height: 54px; }
  .link__line { width: 1px; height: 34px; }
  .link__arrow {
    border-top: 6px solid #DCD4EA;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 0;
  }
  .link__packet { transform: translate(-50%, -50%) translateY(-22px); }

  /* endpoints compact to icon-left rows; the GuardEx box keeps its treatment */
  .node--app, .node--llm {
    display: grid; grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px; align-items: center; text-align: left; padding: 16px 18px;
  }
  .node--app .node__icon, .node--llm .node__icon { margin: 0; }
  .node__sub { margin-top: 2px; }
  .node--guard { padding: 22px 16px 18px; }
  /* stacked, the connector arrow lands dead centre on the box's top edge —
     exactly where a centred badge sits. Move it clear of the arrow's path. */
  .node__badge { left: auto; right: 14px; transform: none; }
  .node__head {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: 12px;
  }
  .node__icon--brand { margin: 0; }
  .node__title--brand { margin-bottom: 0; }
  .layer { padding: 8px 10px; font-size: 12.5px; }

  /* i/o table stacks */
  .io__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px; padding: 13px 14px;
  }
  .io__label { grid-column: 1; grid-row: 1; }
  .io__status, .io__note { grid-column: 2; grid-row: 1; justify-self: end; }
  .io__value { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
  .io__note { white-space: normal; text-align: right; max-width: 42vw; }

  .dot { min-width: 28px; min-height: 44px; background: transparent; position: relative; }
  .dot::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 7px; height: 7px; border-radius: 999px; background: #DCD4EA;
    transition: width .3s, background .3s;
  }
  .dot.is-on { width: 28px; background: transparent; }
  .dot.is-on::after { width: 20px; background: var(--violet); }
  .dots { gap: 0; margin-top: 0; }
  .dots__name { margin-left: 10px; }

  /* one column everywhere */
  .group__grid, .cases__grid, .editions, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .group { margin-bottom: 18px; }

  .art--rag { width: 100%; max-width: 200px; }

  /* build */
  .build__head { padding-top: 40px; }
  .build__title { font-size: clamp(24px, 7vw, 30px); }
  .build__lede { font-size: 15.5px; }
  .build__stack { padding-bottom: 40px; }
  .stack__card { padding: 22px 18px; border-radius: 14px; }
  .stack__title { font-size: clamp(21px, 6vw, 25px); }
  .stack__body { font-size: 15px; }
  .stack__pane { padding: 14px; }
  .build-code { font-size: 11.5px; -webkit-overflow-scrolling: touch; }
  .stack__link { display: inline-flex; align-items: center; min-height: 44px; }

  /* faq */
  .faq { padding-top: 40px; padding-bottom: 44px; }
  .qa { padding: 6px 18px; }
  .qa summary { min-height: 44px; display: flex; align-items: center; }
  .qa p { margin-bottom: 10px; }

  /* cta + footer */
  .cta__inner { padding-top: 44px; padding-bottom: 44px; }
  .cta__title { font-size: clamp(23px, 6.5vw, 28px); }
  .cta__lede { font-size: 16px; }
  .maint__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 30px var(--gutter); }
  .maint__body { font-size: 14.5px; }
  .btn-outline { min-height: 44px; }
  .site-footer__inner { gap: 10px; }
}

/* --- 380: Galaxy S24 and narrower --------------------------------------- */

@media (max-width: 380px) {
  :root { --gutter: 16px; }

  .hero__title { font-size: clamp(36px, 10.5vw, 42px); }
  .hero__lockup img { height: 38px; }
  .sec-title { font-size: 21px; }
  .demo { height: 96px; }

  .install-chip { gap: 8px; }
  .install-chip__cmd { font-size: 12.5px; }

  .node--app, .node--llm { padding: 14px 14px; gap: 10px; }
  .stat { padding: 14px 14px; }
  .io__note { max-width: 38vw; }
}

/* --- landscape phones: ~300px of usable height --------------------------- */

@media (max-height: 480px) and (orientation: landscape) {
  /* must still clear the fixed bar, or the lockup slides underneath it */
  .hero__inner { padding-top: calc(var(--header-h) + 14px); padding-bottom: 22px; }
  .hero__lockup { margin-bottom: 12px; }
  .hero__lockup img { height: 34px; }
  .hero__title { font-size: clamp(30px, 5.5vw, 38px); }
  .hero__lede { font-size: 14.5px; line-height: 1.45; margin-bottom: 8px; }
  .hero__lede + .hero__lede { display: none; }
  /* ~300px of usable height cannot hold the demo card and still leave the
     install command reachable. The command wins. */
  .demo-label, .demo, .demo-rail { display: none; }
  .stat { padding: 12px 16px; }
  .site-nav { max-height: calc(100dvh - var(--header-h)); }
}

/* --- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .node, .layer, .layer__dot, .link__packet, .io__row--out,
  .io__status, .io__note, .dot, .dot::after, .site-nav, .nav-scrim {
    transition: none !important;
  }
}