/* ==========================================================================
   PIXEL (v1) · soft-card layer
   --------------------------------------------------------------------------
   2 Oct, references voiceflow.com and littlebird.ai. Pixel is the funky,
   playful, light direction: content sits in soft white rounded cards on the
   paper page, product mockups sit on the pixel nature art, and the
   statement sections breathe and centre.

   Loaded by pixel.html only, after the shared section CSS, so structured
   keeps its own look. Copy is untouched. Standing rules still hold:
   buttons and tabs stay square (radius 0), labels stay DM Mono, icons
   stay Lucide. No literal colours: everything resolves to a token.
   ========================================================================== */

:root {
  --soft-r: 16px;                 /* cards */
  --soft-r-sm: 10px;              /* boxes and windows inside cards */
  --soft-card: var(--white);
  --soft-edge: color-mix(in srgb, var(--grey-900) 8%, transparent);
  --soft-shadow:
    0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent),
    0 18px 40px -24px color-mix(in srgb, var(--grey-900) 22%, transparent);
}

/* ---------------------------------------------------------------- HOW
   The architecture diagram, softened. The dark tooltip becomes a white
   card with a soft shadow; the frame, groups and boxes round off; the
   hatched field becomes a rounded, paler stage. Markers stay square. */
.arch {
  --note-bg: var(--soft-card);
  --note-ink: var(--grey-900);
  --arch-line: color-mix(in srgb, var(--grey-900) 22%, var(--paper));
  --arch-dash: color-mix(in srgb, var(--grey-900) 18%, var(--paper));
}
/* Behind the diagram (2 Oct, Littlebird): the meadow art instead of the
   hatched field, dissolving into the paper on every side, so the white
   frame and the ticket card float on a landscape like their phone does. */
.arch::before {
  /* Larger than the frame on every side: the frame covers the middle, so
     the solid band of the fade has to fall around it, not under it. */
  /* Sized to the art's own proportions, bottom-anchored under the frame,
     so the top fade lands on the sky rather than cutting the image. */
  top: auto; bottom: calc(var(--pad-b) - 260px); left: -40px; right: -80px;
  aspect-ratio: 1356 / 768;
  border: 0;
  /* Width-fit and bottom-aligned, as in the reference: the tree stands
     beside the ticket card, the flowering grass runs under the frame, the
     bush closes the right. Fades: the sky dissolves from the top, the
     sides and the foot soften, so it blends into the paper. */
  background: url(../img/art/hero-pixel.webp) 50% 100% / cover no-repeat;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 38%, black 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, black 38%, black 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-composite: intersect;
}
#how { overflow-x: clip; }        /* the art runs past the column; never the page */
@media (max-width: 900px) {
  .arch::before {
    /* Phones: the whole scene, wider than the column, under the diagram's foot. */
    top: auto; bottom: -32px; left: -40%; right: -40%; height: auto;
  }
}
.arch__panel {
  border-color: var(--soft-edge);
  border-radius: var(--soft-r);
  background: var(--soft-card);
  box-shadow: var(--soft-shadow);
}
.arch__group { border-radius: 12px; }
.arch__box,
.arch__app { border-radius: var(--soft-r-sm); }
.arch__strip { border-radius: var(--soft-r-sm) var(--soft-r-sm) 0 0; }
.arch__note {
  border: 1px solid var(--soft-edge);
  border-radius: 14px;
  box-shadow:
    0 2px 4px color-mix(in srgb, var(--grey-900) 5%, transparent),
    0 24px 48px -20px color-mix(in srgb, var(--grey-900) 28%, transparent);
}
.arch__note p { color: var(--grey-700); }
.arch__note-art {
  border-radius: var(--soft-r-sm);
  background: color-mix(in srgb, var(--ill-sage) 16%, var(--soft-card));
}

/* ------------------------------------------------------------ MODULES
   Dark section: the lined 2×2 becomes four separate rounded cards one
   step up from the charcoal, with a small gap, as in Voiceflow's dark
   infrastructure card. */
.section--ground .band {
  gap: 12px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.section--ground .band > * {
  padding: 32px 32px 36px;
  border: 0;
  border-radius: var(--soft-r);
  background: var(--ground-2);
}
.section--ground .ledger--pair { border-radius: var(--soft-r-sm); }

/* ---------------------------------------------------------------- FIT
   Each boundary is a white card on the tinted band. */
.fit__rows { gap: 12px; }
@media (min-width: 640px) { .fit__rows { gap: 12px; } }
.fit__row {
  padding: 28px 28px 32px;
  border: 1px solid var(--soft-edge);
  border-radius: var(--soft-r);
  background: var(--soft-card);
  box-shadow: var(--soft-shadow);
}
.fit__row dd { max-width: none; }

/* --------------------------------------------------------- INTERFACES
   The mockups sit on the pixel art (Voiceflow puts product UI on nature
   imagery): the meadow for Desktop, the pond for Terminal, the meadow's
   flowering bush for Slack. The windows get soft corners and a lift. */
.ifx__stage {
  border: 1px solid var(--soft-edge);          /* pale skies need an edge */
  border-radius: var(--soft-r);
}
.ifx__panel { background-size: cover; background-repeat: no-repeat; }
#ifx-panel-desktop  { background: url(../img/art/hero-pixel.webp) 50% 100% / cover no-repeat; }
#ifx-panel-terminal { background: url(../img/art/footer-pixel.webp) 0% 100% / 150% auto no-repeat; }  /* trees and dock, not the white sky */
#ifx-panel-slack    { background: url(../img/art/hero-pixel.webp) 100% 100% / 170% auto no-repeat; }
.ifx__panel > .win {
  border-radius: var(--soft-r-sm);
  box-shadow:
    0 2px 6px color-mix(in srgb, var(--grey-900) 10%, transparent),
    0 30px 60px -24px color-mix(in srgb, var(--grey-900) 40%, transparent);
}

/* --------------------------------------------------- AGENTS AND MODELS
   The loop diagram sits in a soft inner card on the charcoal. */
.section--ground .loops {
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--soft-r);
  background: var(--ground-2);
}

/* ---------------------------------------------------------------- FAQ
   Littlebird: one centred column. The label sits above a centred heading,
   the two-tone line drops to a quiet subheader, and the questions run in a
   narrow column under it. */
.faq {
  display: block;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.faq__label {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding-top: 0;
}
.faq__label::before { top: 50%; }
.faq__head { display: grid; justify-items: center; }
.faq__head h2 { font-size: var(--size-h2); }
.faq__sub {
  max-width: 46ch;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: 0;
}
.faq__list { margin-top: var(--space-8); text-align: left; }

@media (max-width: 720px) {
  .section--ground .band > * { padding: 24px; }
  .fit__row { padding: 24px; }
}

/* ------------------------------------------------------- HERO PRODUCT VIEW
   2 Oct, littlebird.ai hero: under the actions, a stage row (the live
   site's workflow path, Review current) with the record's one-line note on
   the right, then a large white window with a frosted halo, rising out of
   the meadow. The hero grows to hold it, and the art switches from cover to
   its own proportions, anchored to the bottom, so the window sits on the
   grass. `.hero.scene` outranks the hero rules in pixel.html's own style.
   Content is the live site's product-preview placeholder, verbatim. */
.hero.scene {
  min-height: 0;
  padding-bottom: clamp(40px, 6vw, 88px);
}
.hero.scene .scene__art {
  top: auto; bottom: 0; height: auto;
  object-fit: fill;
  /* hero-meadow (Gemini, 2 Oct) has a deep blue sky: a long eased fade
     so it dissolves into the paper rather than starting as a band. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, black 15%, transparent) 22%, color-mix(in srgb, black 55%, transparent) 40%, black 62%);
          mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, black 15%, transparent) 22%, color-mix(in srgb, black 55%, transparent) 40%, black 62%);
}

.pview {
  width: min(100%, 1120px);
  margin: clamp(56px, 7vw, 96px) auto 0;
  text-align: left;
}
/* The window: white, rounded, Littlebird's translucent halo, real chrome. */
.pview__win {
  overflow: hidden;
  border: 1px solid var(--soft-edge);
  border-radius: 18px;
  background: var(--soft-card);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--white) 45%, transparent),
    0 0 0 9px color-mix(in srgb, var(--grey-900) 6%, transparent),
    0 40px 80px -32px color-mix(in srgb, var(--grey-900) 35%, transparent);
  color: var(--grey-700);
  font-size: 14px;
  line-height: 1.5;
  --icon-size: 15px;
}
.pview .icon { flex: none; }
.pview__chrome {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--soft-edge);
  background: color-mix(in srgb, var(--grey-900) 3%, var(--soft-card));
}
.pview__lights { display: flex; gap: 7px; }
.pview__lights i { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--grey-900) 14%, var(--soft-card)); }
.pview__brand {
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grey-600);
}
.pview__tag {
  justify-self: end;
  padding: 2px 9px; border: 1px solid var(--soft-edge); border-radius: 6px;
  font-size: 11px; color: var(--grey-600);
}

/* Three panes: work-item sidebar, the record, the decision rail. */
.pview__app {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  min-height: 460px;
}

.pview__side {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px;
  border-right: 1px solid var(--soft-edge);
  background: color-mix(in srgb, var(--grey-900) 2.5%, var(--soft-card));
}
.pview__ws { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; font-weight: 600; color: var(--grey-900); }
.pview__mark { width: 18px; height: 18px; background: var(--grey-900); -webkit-mask: url(../img/brand/mark.svg) center / contain no-repeat; mask: url(../img/brand/mark.svg) center / contain no-repeat; }
.pview__nav { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; color: var(--grey-700); }
.pview__group {
  margin: 16px 8px 6px;
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey-500);
}
.pview__item { display: grid; gap: 5px; padding: 8px 10px; border-radius: 8px; }
.pview__item b { font-weight: 500; color: var(--grey-900); font-size: 13px; line-height: 1.3; }
.pview__item small { font-family: var(--font-label); font-size: 11px; color: var(--grey-600); }
.pview__item.is-on { background: var(--soft-card); box-shadow: 0 0 0 1px var(--soft-edge), 0 4px 10px -6px color-mix(in srgb, var(--grey-900) 25%, transparent); }
.pview__skel { display: block; width: var(--w, 70%); height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--grey-900) 9%, transparent); }
.pview__skel--s { height: 5px; background: color-mix(in srgb, var(--grey-900) 6%, transparent); }

.pview__main { padding: 24px 28px 28px; display: grid; align-content: start; gap: 18px; }
.pview__crumb { font-size: 12px; color: var(--grey-600); }
.pview__heading {
  margin: 4px 0 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; color: var(--grey-900);
}
.pview__note { margin: 6px 0 0; color: var(--grey-600); }

/* Stage tracker: done stages carry a filled dot, the current one is the
   black block, the rest are hollow; a hairline joins them. */
.pview__path {
  display: flex; align-items: center; gap: 0;
  margin: 0; padding: 0; list-style: none;
  font-size: 13px;
}
.pview__path li { display: flex; align-items: center; color: var(--grey-500); }
.pview__path li + li::before {
  content: ''; width: 28px; height: 1px; margin-inline: 6px;
  background: color-mix(in srgb, var(--grey-900) 16%, transparent);
}
.pview__path li > * { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; }
.pview__path li > span::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid currentColor;
}
.pview__path .is-done { color: var(--grey-900); }
.pview__path .is-done > span::before { background: var(--pixel-green); border-color: var(--pixel-green); }
.pview__path strong { background: var(--grey-900); color: var(--paper); font-weight: 500; }

.pview__block { padding: 16px 18px; border: 1px solid var(--soft-edge); border-radius: 12px; }
.pview__cap {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey-600);
  --icon-size: 13px;
}
.pview__req { margin: 0; font-size: 16px; color: var(--grey-900); }

/* The finding reads as the agent's comment: a mark, then the card. */
.pview__finding {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ill-sage) 14%, var(--soft-card));
  border: 1px solid color-mix(in srgb, var(--ill-jade) 22%, transparent);
}
.pview__av { width: 26px; height: 26px; border-radius: 8px; background: var(--grey-900); position: relative; }
.pview__av::after { content: ''; position: absolute; inset: 8px; border: 1.5px solid var(--paper); border-radius: 2px; }
.pview__finding p { margin: 0; }
.pview__sub { margin-bottom: 4px !important; font-size: 16px; font-weight: 500; color: var(--grey-900); }
.pview__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pview__chips span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 6px;
  border: 1px solid var(--soft-edge); background: var(--soft-card);
  font-size: 12px; color: var(--grey-700);
  --icon-size: 13px;
}

/* Decision rail. */
.pview__decision {
  padding: 24px 22px;
  border-left: 1px solid var(--soft-edge);
  background: color-mix(in srgb, var(--grey-900) 1.5%, var(--soft-card));
}
.pview__status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--ember-orange) 16%, var(--soft-card));
  color: var(--ember-orange-ink); font-size: 14px; font-weight: 600;
}
.pview__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ember-orange); }
.pview__decision p { margin: 10px 0 24px; }
.pview__decision ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pview__decision li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
  padding: 8px 10px; border: 1px solid var(--soft-edge); border-radius: 8px;
  background: var(--soft-card); color: var(--grey-900); font-size: 13px;
}
.pview__decision li .icon:last-child { color: var(--pixel-green); }

.pview figcaption {           /* on a frosted pill so it reads on the grass */
  width: fit-content; margin: 18px auto 0; padding: 5px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 12px; color: var(--grey-700); text-align: center;
}

@media (max-width: 1100px) {
  .pview__app { grid-template-columns: 200px minmax(0, 1fr); }
  .pview__side { grid-row: 1 / span 2; }
  .pview__decision { grid-column: 2; border-left: 0; border-top: 1px solid var(--soft-edge); }
}
@media (max-width: 760px) {
  .pview__app { grid-template-columns: 1fr; min-height: 0; }
  .pview__side { display: none; }
  .pview__decision { grid-column: auto; }
  .pview__main { padding: 20px; }
  .pview__heading { font-size: 22px; }
  .pview__path { flex-wrap: wrap; row-gap: 6px; }
  .pview__path li + li::before { width: 10px; margin-inline: 2px; }
  .pview__path li > * { padding: 4px 7px; }
  .pview__brand { display: none; }
  .pview__chrome { grid-template-columns: 1fr auto; }
}
@media (max-width: 720px) {
  .hero.scene { padding-bottom: 32px; }
}

/* ------------------------------------------------------ GREEN + ROUND
   2 Oct. Pixel's accent is --pixel-green (supplied, see palette.css). It goes on
   tabs, labels, small markers and text links on the light grounds, never on
   the main buttons (they stay --brand, near-black). The charcoal cards keep
   their own accent: dark green would vanish on --night.
   And pixel is "roundy and smooth": buttons and tabs take 8px corners
   (not pills), chips 6px, square markers become dots. (Structured stays boxy.) */
/* .section.section--paper: pixel.html's inline paper rule sets the orange
   ink and loads later, so this needs the extra class to win. */
.site-header, .hero.scene, .section.section--paper, .section.cta {
  --accent: var(--pixel-green);
  --accent-text: var(--pixel-green);
  --accent-dark: var(--pixel-green);
  --accent-on: var(--paper);
}
.section--paper .label, .hero .label { color: var(--pixel-green); }

:root[data-theme="slate"] { --radius-control: 8px; }   /* 8px, not pills (user, 2 Oct) */

.faq__label::before { border-radius: 50%; }

/* Interfaces tabs: rounded cards, the active one marked green. */
.ifx__tab { border-radius: 14px; }
.ifx__tab h4::before { border-radius: 50%; }
.ifx__tab[aria-selected="true"] h4 { color: var(--pixel-green); }

/* Chips and the diagram markers round off too. */
.chip { border-radius: 6px; }
.arch__hot { border-radius: 50%; }

/* ------------------------------------------------------- BLACK BUTTONS
   2 Oct: "keep buttons to black only." Every button-like control is black
   (--grey-900). The primary is solid black; the secondary is a black
   outline with black text, so the pair keeps its hierarchy without grey.
   The hero's current stage pill is black too. Green stays on labels,
   links, the active tab title and the small dots. */
.hero.scene .btns .btn:not(.btn--brand),
.site-actions .btn:not(.btn--brand) {
  background: transparent;
  color: var(--grey-900);
  border: 1px solid var(--grey-900);
}
.hero.scene .btns .btn:not(.btn--brand):hover,
.site-actions .btn:not(.btn--brand):hover {
  background: var(--grey-900);
  color: var(--paper);
}

/* The stage: a pixel scene per module, the illustration on a frosted pane. */

  /* closer in, on the tree */

/* Pixel softness on structured's square vignettes. */

/* Under the card: paragraph, Input / Output, Explore. */

/* --------------------------------------------------------------- GLASS
   2 Oct, generalintelligencecompany.com: any box sitting on an image or
   illustration is glossy glass, not an opaque card. The picture behind
   shows through heavily blurred and saturated, under a faint white tint,
   with a bright top edge (inset highlight), a hairline of white and a
   soft drop. The tint is kept high enough that grey-900 text stays
   readable on the pale pixel art. Used on: the module card panes, the
   diagram's ticket card, the hero caption. */
:root {
  --glass-bg: color-mix(in srgb, var(--white) 42%, transparent);
  --glass-edge: color-mix(in srgb, var(--white) 60%, transparent);
  --glass-blur: blur(22px) saturate(1.7);
  --glass-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 75%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--white) 20%, transparent),
    0 1px 2px color-mix(in srgb, var(--grey-900) 6%, transparent),
    0 24px 48px -24px color-mix(in srgb, var(--grey-900) 32%, transparent);
}

/* Applied to every box that sits on art. */
.mtile__pane,
.pview figcaption,
#how .arch__app {
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mtile__pane, .pview figcaption, #how .arch__app {
    background: color-mix(in srgb, var(--paper) 92%, transparent);
  }
}

.ifx__tab h4::before { display: none; }
.ifx__tab h4, .ifx__desc p { padding-left: 0; }

/* Interfaces stage (2 Oct): the same fade-out as the module stage. The scene
   moves to a ::before layer that dissolves into the paper on every side,
   and the stage loses its frame, so only the window reads as an object.
   The window still sits low and to the right, over the faded scene. */
.ifx__stage { border: 0; border-radius: 0; overflow: visible; background: none; }
.ifx__panel { background: none !important; isolation: isolate; overflow: hidden; }
.ifx__panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ifx-bg) var(--ifx-pos, 50% 100%) / var(--ifx-size, cover) no-repeat;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 24%, black 72%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, black 24%, black 72%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
          mask-composite: intersect;
}
#ifx-panel-desktop  { --ifx-bg: url(../img/art/hero-pixel.webp);   --ifx-pos: 50% 100%; }
#ifx-panel-terminal { --ifx-bg: url(../img/art/footer-pixel.webp); --ifx-pos: 0% 100%; --ifx-size: 150% auto; }
#ifx-panel-slack    { --ifx-bg: url(../img/art/hero-pixel.webp);   --ifx-pos: 100% 100%; --ifx-size: 170% auto; }
/* The window keeps its own edges now that the stage has none. */
.ifx__panel > .win { border: 1px solid var(--soft-edge); }
/* Inset the window inside the faded scene (it used to run off the right
   and bottom edges, which left hard cuts once the frame went away). */
.ifx__panel > .win {
  top: 11%; left: 9%; right: auto; bottom: auto;
  width: 82%; height: 78%;
  border-radius: 12px;
}

/* ---------------------------------------------------------- MODULE CARDS
   2 Oct, voiceflow.com Build / Launch / Iterate row: no tabs. Four cards
   side by side. Each is a rounded nature tile (the pixel art, a scene per
   module) with the module's illustration from structured's tour on a glass
   pane, and under it a filled icon, the bold module name and its
   headline, then Explore. The icons are Phosphor's fill weight. */
.mtiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: var(--space-7);
}
.mtile { display: grid; grid-template-rows: auto auto 1fr; align-content: start; }
.mtile__scene {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1.08;
  padding: 18px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--mt-bg) var(--mt-pos, 50% 100%) / var(--mt-size, cover) no-repeat;
  container-type: inline-size;
}
.mtile--spec    .mtile__scene { --mt-bg: url(../img/art/hero-meadow.webp);  --mt-pos: 30% 100%; }
.mtile--code    .mtile__scene { --mt-bg: url(../img/art/footer-pixel.webp); --mt-pos: 12% 100%; --mt-size: auto 135%; }  /* low, on the dock and lilies, not the pale sky */
.mtile--review  .mtile__scene { --mt-bg: url(../img/art/hero-pixel.webp);   --mt-pos: 0% 100%; }
.mtile--on-call .mtile__scene { --mt-bg: url(../img/art/hero-meadow.webp);  --mt-pos: 100% 100%; }
.mtile__pane {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: 16px 12px;
  border-radius: 14px;
  overflow: hidden;
  /* the illustrations read their text roles from these */
  --heading: var(--grey-900);
  --ink: var(--grey-700);
  --ink-muted: var(--grey-600);
  --line: color-mix(in srgb, var(--grey-900) 12%, transparent);
  font-size: 12px;
}

/* Structured's vignettes, scaled to a quarter-width tile and softened. */
.mtile .vtile { border-radius: 7px; width: 24px; height: 24px; --icon-size: 13px; }
.mtile .vchips { gap: 10px; padding-block: 0; }
.mtile .vchips::before { display: none; }
.mtile .vchip { border-radius: 10px; padding: 5px 10px 5px 5px; gap: 7px; font-size: 11px; white-space: nowrap; translate: calc(var(--x, 0px) * 0.4) 0; }
.mtile .vchip--lg { font-size: 12px; padding: 6px 12px 6px 6px; }
.mtile .vchip--lg .vtile { width: 26px; height: 26px; }
.mtile .veditor { width: 100%; border-radius: 12px; overflow: hidden; font-size: 11px; }
.mtile .veditor__head { padding: 10px 12px; gap: 9px; }
.mtile .veditor__head b { font-size: 12px; }
.mtile .veditor__head .vmono { font-size: 10px; }
.mtile .veditor__code { margin: 0 12px; padding: 8px 0; gap: 7px; border-radius: 8px; }
.mtile .veditor__foot { padding: 10px 12px; }
.mtile .vpill, .mtile .vtag { border-radius: 6px; }
.mtile .vtoggle, .mtile .vtoggle::after { border-radius: 999px; }
.mtile .vcards { gap: 9px; width: 100%; }
.mtile .vcard { border-radius: 10px; padding: 10px 12px; gap: 10px; }
.mtile .vcard:nth-child(2) { translate: 8px 0; }
.mtile .vcard b { font-size: 12px; }
.mtile .vcard .vtile { width: 28px; height: 28px; --icon-size: 14px; }
.mtile .vchart { width: 100%; }
.mtile .vchart__tip { border-radius: 10px; padding: 7px 10px; gap: 5px; font-size: 11px; top: -14px; }
.mtile .vdot { border-radius: 50%; width: 8px; height: 8px; }
.mtile .vbar { border-radius: 4px; height: 5px; }
.mtile .vchart__axis .vbar { width: 22px; }

/* Under the tile: filled icon, bold name, headline; then Explore. */
.mtile__text {
  margin: 18px 4px 0;
  font-size: 15px; line-height: 1.5; color: var(--grey-600);
}
.mtile__text b { font-weight: 600; color: var(--grey-900); }
.mtile__icon {                    /* Phosphor fill weight, no tile */
  width: 18px; height: 18px; margin-right: 6px;
  vertical-align: -3px;
  color: var(--grey-900);
}
.mtile__more {
  align-self: end;
  display: inline-flex; align-items: center; gap: 5px;
  margin: 12px 4px 0;
  font-size: 14px; color: var(--pixel-green); text-decoration: none;
}
.mtile__more:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) { .mtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } }
@media (max-width: 600px)  { .mtiles { grid-template-columns: 1fr; gap: 36px; } .mtile__scene { aspect-ratio: 1 / 0.9; } }

/* ------------------------------------------------------ FIT SELECTOR
   2 Oct, amplemarket.com "Built to power revenue heroes like you": one soft
   white card. Across the top, five selector cards, each its label over the
   section's line illustration. Unselected cards are quiet paper with the
   art greyed; the selected one turns white, its art goes ink, and a soft
   blob of its own colour glows up from the bottom (the colour the user
   asked for). Below a hairline, the panel: the title large on the left,
   the paragraph on the right. Each boundary has its own pair of --ill-*
   colours. */
.fitx {
  margin-top: var(--space-7);
  padding: 12px;
  border: 1px solid var(--soft-edge);
  border-radius: 22px;
  background: var(--soft-card);
  box-shadow: var(--soft-shadow);
}
.fitx__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.fitx__tab {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; align-content: start; gap: 20px;
  min-height: 230px;
  padding: 18px 12px 24px;
  border: 1px solid var(--soft-edge);
  border-radius: 14px;
  background: color-mix(in srgb, var(--grey-900) 3%, var(--paper));
  --ground: color-mix(in srgb, var(--grey-900) 3%, var(--paper));
  font: inherit; color: var(--grey-600); cursor: pointer;
  transition: background 240ms var(--motion-ease), color 240ms var(--motion-ease), box-shadow 240ms var(--motion-ease);
}
.fitx__label { font-size: 16px; font-weight: 500; }
.fitx__tab .fit__art {
  width: 104px; height: 104px; margin: 0;
  color: color-mix(in srgb, var(--grey-900) 38%, var(--paper));
  transition: color 240ms var(--motion-ease), transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fitx__tab:hover { color: var(--grey-900); }
.fitx__tab:hover .fit__art { color: color-mix(in srgb, var(--grey-900) 60%, var(--paper)); }

/* The glow: two blobs of the card's colours, rising from the foot. */
.fitx__glow {
  position: absolute; z-index: -1; left: -10%; right: -10%; bottom: -30%; height: 75%;
  background:
    radial-gradient(50% 55% at 35% 70%, color-mix(in srgb, var(--c1) 85%, transparent), transparent 70%),
    radial-gradient(45% 50% at 68% 62%, color-mix(in srgb, var(--c2) 75%, transparent), transparent 72%);
  filter: blur(14px);
  opacity: 0; transform: translateY(18%);
  transition: opacity 360ms var(--motion-ease), transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fitx__tab--connects { --c1: var(--ill-teal);   --c2: var(--ill-jade); }
.fitx__tab--reads    { --c1: var(--ill-butter); --c2: var(--ill-ember); }
.fitx__tab--writes   { --c1: var(--ill-lime);   --c2: var(--ill-sage); }
.fitx__tab--approves { --c1: var(--ill-ember);  --c2: var(--ill-flame); }
.fitx__tab--records  { --c1: var(--ill-sage);   --c2: var(--ill-teal); }

.fitx__tab[aria-selected="true"] {
  background: var(--soft-card); --ground: var(--soft-card);
  color: var(--grey-900); cursor: default;
  box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--grey-900) 35%, transparent);
}
.fitx__tab[aria-selected="true"] .fit__art { color: var(--grey-900); transform: translateY(-4px); }
.fitx__tab[aria-selected="true"] .fitx__glow { opacity: 1; transform: none; }
.fitx__tab:focus-visible { outline: 2px solid var(--pixel-green); outline-offset: 2px; }

/* The panel. */
.fitx__panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-7); align-items: start;
  margin-top: 12px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--soft-edge);
}
.fitx__panel[hidden] { display: none; }
.fitx__panel h3 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; color: var(--grey-900);
}
.fitx__panel p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--grey-700); }
.fitx__panel:not([hidden]) { animation: fitx-in 320ms var(--motion-ease); }
@keyframes fitx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fitx__panel:not([hidden]) { animation: none; }
  .fitx__tab, .fitx__tab .fit__art, .fitx__glow { transition: none; }
}

@media (max-width: 960px) {
  .fitx__list { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .fitx__tab { scroll-snap-align: start; min-height: 200px; }
  .fitx__panel { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 600px) {
  .fitx { padding: 8px; border-radius: 18px; }
  .fitx__list { grid-template-columns: repeat(5, 132px); gap: 8px; }
  .fitx__tab { min-height: 170px; gap: 14px; }
  .fitx__tab .fit__art { width: 80px; height: 80px; }
  .fitx__label { font-size: 14px; }
  .fitx__panel { padding: 24px 16px 28px; }
}
/* Colour on every card, not just the selected one: a faint wash of its
   first colour, with the art in a deeper mix of its second. Selected keeps
   the white card, the ink art and the full glow, now a touch taller. */
.fitx__tab {
  background: color-mix(in srgb, var(--c1) 12%, var(--paper));
  --ground: color-mix(in srgb, var(--c1) 12%, var(--paper));
}
.fitx__tab .fit__art { color: color-mix(in srgb, var(--c2) 55%, var(--grey-700)); }
.fitx__tab:hover { background: color-mix(in srgb, var(--c1) 20%, var(--paper)); --ground: color-mix(in srgb, var(--c1) 20%, var(--paper)); }
.fitx__tab:hover .fit__art { color: color-mix(in srgb, var(--c2) 45%, var(--grey-900)); }
.fitx__tab[aria-selected="true"] .fitx__glow { height: 90%; }

/* ------------------------------------------------------------- ICONS
   2 Oct: pixel uses Phosphor (assets/icons/phosphor.svg, built by
   tools/phosphor-sprite.mjs) instead of Lucide. Phosphor draws with filled
   paths, so the base .icon stroke rule is turned into a fill here; the
   mega-panel diagrams (.pviz use) follow. Structured stays on Lucide. */
.icon { fill: currentColor; stroke: none; }
.pviz use { fill: currentColor; stroke: none; }

/* Fit panel, v2 (2 Oct, amplemarket layout): left, a small kicker (the
   boundary's name), a headline of its own and the live-site lede; right,
   two or three points, each a short title and a sentence, split by
   hairlines. Headlines and points are DRAFT copy for design review. */
.fitx__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); }
.fitx__kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 14px; font-weight: 500; color: var(--grey-600);
}
.fitx__kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--k, var(--pixel-green)); }
.fitx__panel--connects { --k: var(--ill-jade); }
.fitx__panel--reads    { --k: var(--ill-ember); }
.fitx__panel--writes   { --k: var(--ill-sage); }
.fitx__panel--approves { --k: var(--ill-flame); }
.fitx__panel--records  { --k: var(--ill-teal); }
.fitx__lead h3 { margin: 0 0 18px; }
.fitx__lead p { font-size: 16px; color: var(--grey-600); }
.fitx__points { list-style: none; margin: 0; padding: 0; display: grid; }
.fitx__points li { padding: 18px 0; border-top: 1px solid var(--soft-edge); }
.fitx__points li:first-child { padding-top: 4px; border-top: 0; }
.fitx__points h4 { margin: 0 0 6px; font-family: var(--font-body); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--grey-900); }
.fitx__points p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--grey-600); }

/* ---------------------------------------------------------- EYEBROWS
   2 Oct: section eyebrows on pixel are set in Caveat (handwritten),
   sentence case, larger, in the pixel green — playful against the serif
   headings. In-diagram labels (loop tags, product UI captions) keep
   DM Mono; only the section-head eyebrow and the FAQ label change. */
.section-head .label,
.problem .label,
.faq__label {
  font-family: "Caveat", "Comic Neue", cursive;
  font-size: 24px; font-weight: 600; line-height: 1.1;
  letter-spacing: 0; text-transform: none;
}
.section-head .label, .problem .label { color: var(--pixel-green); }
.section--ground .section-head .label { color: color-mix(in srgb, var(--ill-sage) 80%, var(--paper)); }
.faq__label { font-size: 26px; }

/* Module card text, v2 (2 Oct): icon and module name on one line as the
   title (18px, pixel green), the headline below it as body (14px). The
   Explore link was removed. */
.mtile { grid-template-rows: auto auto auto; }
.mtile__title {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 4px 0;
  font-family: var(--font-body); font-size: 18px; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.01em;
  color: var(--pixel-green);
}
.mtile__title .mtile__icon { width: 20px; height: 20px; margin: 0; vertical-align: 0; color: var(--pixel-green); }
.mtile__text { margin: 6px 4px 0; font-size: 14px; line-height: 1.5; color: var(--grey-600); }

/* Diagram layout, v2 (2 Oct): the empty band above the frame is gone.
   Spec, Code and Review markers all sit on their boxes' left edges, and
   their notes share one slot in the left column under "Ticket or
   request", so each leader is a short line across the gap. On-call keeps
   its marker on the bottom edge and its note below the frame, over the
   landscape. The top padding is now just breathing room. */
.arch { --pad-t: 32px; --pad-b: 220px; }
#arch-note-spec,
#arch-note-code,
#arch-note-review { left: 0; right: auto; bottom: auto; top: calc(var(--pad-t) + 250px); width: 244px; }
#arch-note-oncall { right: 24px; top: calc(100% - var(--pad-b) + 24px); }

/* Fit cards, v3 (2 Oct, amplemarket again): unselected cards are black and
   white — plain paper, grey art, grey label — and only the selected card
   carries colour (its glow). The kicker above the panel headline is gone. */
.fitx__tab,
.fitx__tab:hover {
  background: color-mix(in srgb, var(--grey-900) 3%, var(--paper));
  --ground: color-mix(in srgb, var(--grey-900) 3%, var(--paper));
}
.fitx__tab .fit__art { color: color-mix(in srgb, var(--grey-900) 40%, var(--paper)); }
.fitx__tab:hover .fit__art { color: color-mix(in srgb, var(--grey-900) 65%, var(--paper)); }
.fitx__tab[aria-selected="true"] { background: var(--soft-card); --ground: var(--soft-card); }
.fitx__tab[aria-selected="true"] .fit__art { color: var(--grey-900); }

/* ------------------------------------------------------------- LOOPS
   2 Oct: the Agents and models diagram, in pixel's language rather than
   structured's drafting look (orange dashed squares, mono caps). The
   diagram sits on a pixel landscape inside the charcoal card; the outer
   loop is a frosted pane with a soft rounded track, the inner loop a
   brighter glass card inside it. Stations and model chips are white pills
   with a dot; agent chips carry the on-light logos. Labels are the body
   face in sentence case. Same structure and copy as before. */
.section--ground .loops {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(44px, 6vw, 72px) clamp(16px, 5vw, 64px);
  border-radius: 20px;
  background: url(../img/art/hero-meadow.webp) 50% 70% / cover no-repeat;
  /* text inside the diagram reads dark, on glass */
  --heading: var(--grey-900);
  --ink: var(--grey-700);
  --ink-muted: var(--grey-600);
  --ground: var(--white);
  --line: color-mix(in srgb, var(--grey-900) 10%, transparent);
}
.loops .loop::before {                           /* the track: soft, rounded, gently flowing */
  inset: 0; border-radius: inherit;
  background: none;
  border: 2px dashed var(--track);
  animation: none;
}
.loops .loop--outer {
  --track: color-mix(in srgb, var(--white) 85%, transparent);
  padding: 72px clamp(20px, 4vw, 56px) 76px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--white) 22%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(1.3); backdrop-filter: blur(6px) saturate(1.3);
}
.loops .loop--inner {
  --track: color-mix(in srgb, var(--pixel-green) 35%, transparent);
  border-radius: 20px;
  background: var(--glass-bg);
  border: 0;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

/* Tags: sentence case in the body face, a round dot instead of a square. */
.loops .loop__tag .label {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--grey-900);
}
.loops .loop__tag::before { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--white) 40%, transparent); }
.loops .loop--outer > .loop__tag {
  padding: 6px 14px 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--white) 70%, transparent);
}
.loops .loop--outer > .loop__tag::before { background: var(--grey-900); box-shadow: none; }
.loops .loop--inner .loop__tag::before { background: var(--pixel-green); box-shadow: none; }

/* Stations and chips: white pills. */
.loops .loop__stations span,
.loops .chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--grey-900) 8%, transparent);
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--grey-900) 35%, transparent);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--grey-900);
}
.loops .loop__stations span::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pixel-green);
}
.loops .loop__base .chip::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--grey-600);
}
.loops .chip__logo { height: 15px; }
.loops .chip__mark { border-radius: 4px; }

.section--ground .loops + .small { margin-top: var(--space-6) !important; }

@media (max-width: 760px) {
  .section--ground .loops { padding: 32px 12px; border-radius: 16px; }
  .loops .loop--outer { padding: 56px 14px 20px; border-radius: 20px; }
  .loops .loop--inner { border-radius: 16px; }
  .loops .loop__stations span, .loops .chip { padding: 6px 11px; font-size: 13px; }
}

/* ------------------------------------------------- AGENTS AND MODELS UI
   2 Oct: "more like product UI, it's a technical section". The loop picture
   becomes a AdPilot screen on the charcoal card: the meadow only as a faint
   wash behind it, faded out on every side; the window carries the detail.
     sidebar  = outer loop: Spec, Review, On-call as stage rows (icon, name,
                skeleton line, green status), a hand-off row between Spec
                and Review where the agents work
     main     = inner loop: the coding agents as rows (logo, name, skeleton
                line, toggle; Devin off to show it's a choice)
     foot     = model choice as a two-option radio
   The old .loops rules above are now unused on pixel. */
.lx { position: relative; isolation: isolate; margin: var(--space-7) 0 0; padding: clamp(32px, 5vw, 64px) 0; }
.lx::before {
  content: ''; position: absolute; inset: 0 -4%; z-index: -1;
  background: url(../img/art/hero-meadow.webp) 50% 75% / cover no-repeat;
  opacity: 0.32;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 22%, black 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 22%, black 78%, transparent 100%);
          mask-composite: intersect;
}
.lx__win {
  width: min(100%, 980px); margin-inline: auto; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
  border-radius: 18px;
  background: var(--soft-card);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--white) 6%, transparent),
    0 40px 90px -30px color-mix(in srgb, var(--night) 90%, transparent);
  color: var(--grey-700); font-size: 14px; line-height: 1.45;
  --icon-size: 16px;
}
.lx__chrome {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--soft-edge);
  background: color-mix(in srgb, var(--grey-900) 3%, var(--soft-card));
}
.lx__title { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-600); }
.lx__more { justify-self: end; color: var(--grey-500); --icon-size: 18px; }

.lx__body {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas: "outer inner" "models models";
}
.lx__outer { grid-area: outer; padding: 20px 16px 22px; border-right: 1px solid var(--soft-edge); background: color-mix(in srgb, var(--grey-900) 2%, var(--soft-card)); }
.lx__inner { grid-area: inner; padding: 20px 24px 22px; }
.lx__head {
  display: flex; align-items: center; gap: 8px; margin: 0 4px 14px;
  font-size: 13px; font-weight: 600; color: var(--grey-900);
}
.lx__outer .lx__head .icon { color: var(--grey-900); }
.lx__inner .lx__head .icon { color: var(--pixel-green); }

.lx__stages, .lx__agents { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lx__stage, .lx__agent {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--soft-edge); background: var(--soft-card);
}
.lx__ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: color-mix(in srgb, var(--ill-sage) 16%, var(--soft-card)); color: var(--pixel-green);
}
.lx__stage-t, .lx__agent-t { display: grid; gap: 6px; min-width: 0; }
.lx__stage b, .lx__agent b { font-weight: 500; color: var(--grey-900); }
.lx__skel { display: block; width: var(--w, 60%); height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--grey-900) 8%, transparent); }
.lx__ok { width: 8px; height: 8px; border-radius: 50%; background: var(--ill-jade); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ill-jade) 18%, transparent); }

/* Hand-off: the agents' work happens between Spec and Review. */
.lx__hand {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 0 26px; padding: 6px 12px 6px 14px;
  border-left: 1.5px dashed color-mix(in srgb, var(--pixel-green) 40%, transparent);
  color: var(--pixel-green); --icon-size: 14px;
}
.lx__hand .lx__skel { background: color-mix(in srgb, var(--pixel-green) 16%, transparent); }

.lx__agent { padding: 12px 14px; }
.lx__logo { width: 20px; height: 20px; object-fit: contain; }
.lx__agent .chip__mark { width: 18px; height: 18px; color: var(--grey-900); }
.lx__toggle { position: relative; width: 32px; height: 18px; border-radius: 999px; background: color-mix(in srgb, var(--grey-900) 14%, transparent); }
.lx__toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 30%, transparent); }
.lx__toggle.is-on { background: var(--pixel-green); }
.lx__toggle.is-on::after { left: 16px; }

.lx__models {
  grid-area: models;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--soft-edge);
  background: color-mix(in srgb, var(--grey-900) 2%, var(--soft-card));
}
.lx__mlabel { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: 13px; font-weight: 600; color: var(--grey-900); }
.lx__model {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 10px;
  border: 1px solid var(--soft-edge); background: var(--soft-card); color: var(--grey-700);
}
.lx__model.is-on { border-color: color-mix(in srgb, var(--pixel-green) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pixel-green) 10%, transparent); color: var(--grey-900); }
.lx__radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--grey-500); }
.lx__model.is-on .lx__radio { border: 4px solid var(--pixel-green); }

@media (max-width: 820px) {
  .lx__body { grid-template-columns: 1fr; grid-template-areas: "outer" "inner" "models"; }
  .lx__outer { border-right: 0; border-bottom: 1px solid var(--soft-edge); }
  .lx__inner { padding: 18px 16px; }
  .lx__models { padding: 14px 16px; }
  .lx__title { display: none; }
  .lx__chrome { grid-template-columns: 1fr auto; }
}

/* ------------------------------------------------------------ MOBILE
   2 Oct audit at 360 / 390 / 768: no horizontal scroll anywhere; fixes for
   what didn't hold up on a phone. */
@media (max-width: 760px) {
  /* Fit panel: one column (the v2 two-column rule was winning on phones). */
  .fitx__panel { grid-template-columns: 1fr; gap: 20px; }
  .fitx__lead h3 { font-size: 28px; }

  /* Interfaces: the mockups are drawn in em off the stage width, which put
     their text at 4–5px. On phones the window is drawn at about twice the
     scale and cropped by the stage, so it reads as a real screen (~9px). */
  .ifx__stage { aspect-ratio: 4 / 3.4; }
  .ifx__panel { font-size: 2.6cqw; }
  .ifx__panel > .win { top: 9%; left: 6%; width: 165%; height: 140%; }
}

/* Tap targets: at least 40px tall without changing how anything looks. */
@media (max-width: 1024px), (pointer: coarse) {
  .site-footer__cols a { display: inline-block; padding-block: 10px; }
  .footer .site-footer__cols ul { gap: 0; }
  .ifx__more, .faq__guide { padding-block: 9px; }
  .arch__hot { position: relative; }
  .arch__hot::after { content: ''; position: absolute; inset: -11px; }
  .wordmark { padding-block: 7px; }
}

/* 2 Oct: buttons and header links at 14px on pixel. */
[data-theme="slate"] { --btn-size: 14px; }
.btn, .site-actions .btn, .site-footer a.btn { font-size: 14px; }
.site-nav .nav-link { font-size: 14px; }
@media (max-width: 991px) {
  .site-header.is-open .nav-link { font-size: 14px; }
  .nav-toggle { font-size: 14px; }
}

/* -------------------------------------------------- PILL + SHINE BUTTONS
   2 Oct: buttons are fully rounded again, with a subtle glossy finish.
   Primary: black with a faint top-lit gradient, a hairline highlight on its
   upper edge and a soft drop. Secondary: a white-to-paper gradient with the
   same top highlight inside a black outline. Hover lifts the light a touch;
   press settles it. */
:root[data-theme="slate"] { --radius-control: 999px; }
.btn--brand {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--white) 14%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--grey-800), var(--grey-900));
  border-color: var(--grey-900);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--black, var(--grey-900)) 40%, transparent),
    0 1px 2px color-mix(in srgb, var(--grey-900) 20%, transparent),
    0 6px 14px -6px color-mix(in srgb, var(--grey-900) 45%, transparent);
  transition: box-shadow 200ms var(--motion-ease), filter 200ms var(--motion-ease), transform 200ms var(--motion-ease);
}
.btn--brand:hover {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--white) 20%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--grey-800), var(--grey-900));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--white) 28%, transparent),
    0 1px 2px color-mix(in srgb, var(--grey-900) 20%, transparent),
    0 10px 20px -8px color-mix(in srgb, var(--grey-900) 50%, transparent);
  transform: translateY(-1px);
}
.hero.scene .btns .btn:not(.btn--brand),
.site-actions .btn:not(.btn--brand) {
  background: linear-gradient(180deg, var(--white), var(--paper));
  box-shadow:
    inset 0 1px 0 var(--white),
    0 1px 2px color-mix(in srgb, var(--grey-900) 10%, transparent),
    0 6px 14px -8px color-mix(in srgb, var(--grey-900) 30%, transparent);
  transition: box-shadow 200ms var(--motion-ease), transform 200ms var(--motion-ease), background 200ms var(--motion-ease);
}
.hero.scene .btns .btn:not(.btn--brand):hover,
.site-actions .btn:not(.btn--brand):hover {
  background: linear-gradient(180deg, var(--white), color-mix(in srgb, var(--grey-900) 4%, var(--paper)));
  color: var(--grey-900);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); filter: brightness(0.96); }
/* On the charcoal footer the primary is light: paper with the same shine. */
.footer .btn--brand {
  background: linear-gradient(180deg, var(--white), color-mix(in srgb, var(--grey-900) 6%, var(--paper)));
  border-color: transparent;
  box-shadow: inset 0 1px 0 var(--white), 0 6px 16px -8px color-mix(in srgb, var(--night) 80%, transparent);
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* 2 Oct: the diagram's landscape fades out at the bottom a bit more, so it
   dissolves into the paper before the next section instead of ending on
   the grass. */
.arch::before {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 38%, black 66%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-image:
    linear-gradient(to bottom, transparent 0%, black 38%, black 66%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* ---------------------------------------------------------- END SCENE
   2 Oct, generalintelligencecompany.com: the footer is the last section
   that scrolls; after it, the lake and dock sit pinned to the bottom of the
   viewport and are uncovered as the footer moves up. The .endscape box is
   an inset card like the others; clip-path (with its corner radius) clips
   the position:fixed picture to the box, so it only shows there and never
   behind the gaps between cards. The CTA no longer carries the pond. */
.cta { padding-bottom: var(--section-y, clamp(64px, 8vw, 120px)); }
.cta .cta__inner { min-height: 0; }
.footer { margin-bottom: 12px; }
.endscape {
  --end-h: clamp(300px, 40vw, 560px);
  position: relative;
  height: var(--end-h);
  margin: 0 var(--inset) var(--inset);
  border-radius: var(--card-radius);
  clip-path: inset(0 round var(--card-radius));
  background: var(--paper);
}
.endscape__art {
  position: fixed; left: 0; right: 0; bottom: 0;
  width: 100%; max-width: none; height: var(--end-h);
  object-fit: cover; object-position: 50% 100%;
  pointer-events: none; user-select: none;
}
@media (max-width: 720px) {
  .endscape { --end-h: 280px; }
  .endscape__art { object-position: 22% 100%; }
}
/* The CTA without the pond: sized to its copy, not to the old art. */
.section.cta { padding-block: clamp(56px, 7vw, 96px); }
.section.cta .cta__inner { min-height: 0; gap: var(--space-7); }

/* 2 Oct fixes:
   · Button labels centred: .btn was a left-packed flex row with a 24px gap
     (built for a trailing shortcut chip), so any hidden child or the gap
     shifted the text. Centre it and drop the gap; even inline padding.
   · Footer links 14px.
   · The white secondary button has no outline.
   · The end scene sits right under the footer (no 12px gap). */
.btn { justify-content: center; gap: 0; padding-inline: 18px; text-align: center; }
.btn .kbd { display: none; }
footer.footer .site-footer__cols a { font-size: 14px; }
.hero.scene .btns .btn:not(.btn--brand),
.site-actions .btn:not(.btn--brand) { border-color: transparent; }
footer.footer { margin-bottom: 0; }
.endscape { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; clip-path: inset(0 round 0 0 var(--card-radius) var(--card-radius)); }
footer.footer { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* End scene fixes (2 Oct): the box keeps a 12px foot margin, so the fixed
   picture is pinned 12px up to line its top edge up with the box — no paper
   strip under the footer. And the scene takes the site's fade-out: it
   dissolves into the paper at the top and sides, solid at the water. */
.endscape__art {
  bottom: var(--inset);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 45%),
    linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, black 45%),
    linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
          mask-composite: intersect;
}
/* End scene: fade on all four sides (2 Oct). */
.endscape__art {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 40%, black 78%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
          mask-image:
    linear-gradient(to bottom, transparent 0%, black 40%, black 78%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
}
/* Footer keeps all four rounded corners (2 Oct): the end scene below now
   fades into the paper, so the footer reads as its own card again. */
footer.footer { border-radius: var(--card-radius); }

/* End scene, v2 (2 Oct, GIC reference): full-bleed, taller, solid. No
   inset, no radius, no side fades. A band of pale teal stripes runs along
   its top edge; the footer bar's two lines sit on the picture's foot over a
   soft dark scrim, in paper. The footer above keeps its rounded card and a
   12px gap so the stripes read as their own edge. */
.endscape {
  --end-h: clamp(380px, 52vw, 720px);
  margin: 12px 0 0;
  border-radius: 0;
  clip-path: inset(0);
  background: var(--paper);
}
.endscape::before {                       /* the stripes */
  content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 22px;
  background: repeating-linear-gradient(to bottom,
    color-mix(in srgb, var(--teal-200) 70%, var(--paper)) 0 4px,
    var(--paper) 4px 7px);
  pointer-events: none;
}
.endscape__art {
  left: 0; right: 0; bottom: 0; height: var(--end-h);
  object-position: 50% 100%;
  -webkit-mask-image: none; mask-image: none;
}
.endscape__bar {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding-top: 80px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--grey-900) 55%, transparent));
}
.endscape__bar .container {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: 24px 28px;
  font-size: 14px; color: var(--paper);
}
.endscape__bar p { margin: 0; }
footer.footer { margin-bottom: 0; }
footer.footer .site-footer__bar .container { padding-bottom: var(--space-7); }
@media (max-width: 720px) {
  .endscape { --end-h: 340px; }
  .endscape__art { object-position: 22% 100%; }
  .endscape__bar .container { flex-direction: column; padding-block: 18px 22px; }
}
.endscape__bar {
  padding-top: 140px;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--night) 45%, transparent) 55%, color-mix(in srgb, var(--night) 82%, transparent) 100%);
}

/* End scene, v3 (2 Oct): stripes removed; the site's fade-out is back on all
   four sides (the scene dissolves into the paper), still full-bleed and
   pinned. The copyright line now sits on the faded foot, so it is dark text
   with no scrim. */
.endscape::before { display: none; }
.endscape { margin-top: 0; }
.endscape__art {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 38%, black 74%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, black 38%, black 74%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%);
          mask-composite: intersect;
}
.endscape__bar { padding-top: 0; background: none; }
.endscape__bar .container { color: var(--grey-600); }

/* End scene height halved (3 Oct): 52vw / 720px max was too tall. */
.endscape { --end-h: clamp(190px, 26vw, 360px); }
@media (max-width: 720px) { .endscape { --end-h: 170px; } }