/* ============================================================
   Glaise — glaise.io
   Ink-drenched brand surface. DM Sans + DM Mono.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/dm-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/dm-mono-500.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  /* surfaces */
  --ink: #141925;
  --ink-deep: #0f131c;
  --panel: #1b2130;
  --panel-raised: #20273a;
  --border: #272a30;
  --border-strong: #3e4149;

  /* text on ink */
  --text-hi: #f4f7fe;
  --text: #d5d9e2;
  --text-2: #a4a9b4;
  --text-3: #888e9a; /* Neutral 500: 5.0:1 on Ink, AA for small text */

  /* brand */
  --blue: #8db3ef;
  --blue-bright: #a3c4f8;
  --blue-mid: #5977a6;
  --blue-deep: #435b82;
  --blue-night: #1e2c41;

  /* semantic (state only) */
  --ok: #72cf8e;
  --warn: #f5bd56;
  --err: #ea6b62;

  /* type */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --text-h2: clamp(2.125rem, 1.25rem + 3.2vw, 3.625rem);
  --text-h1: clamp(3.25rem, 1.9rem + 6.2vw, 7rem);

  /* space (4pt) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
  --sp-24: 96px;
  --section-gap: clamp(112px, 16vh, 192px);

  /* geometry */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --page-pad: clamp(20px, 5vw, 48px);
  --page-max: 1200px;

  /* motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-reveal: 800ms;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-bright); }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd, figure, pre { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--blue-deep); color: var(--text-hi); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -48px; left: var(--sp-4);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-hi);
  font-size: var(--text-sm);
  transition: top var(--dur-fast) var(--ease-out-quart);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  max-width: calc(var(--page-max) + 2 * var(--page-pad));
  margin-inline: auto;
  padding: clamp(20px, 3.5vh, 32px) var(--page-pad);
}
/* Full-width scrim: keeps the nav on a stable Ink base so contrast never drops
   as the aurora's bright curtains drift behind it. Accessibility is non-negotiable. */
.site-header::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 200%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 25, 37, 0.92) 0%,
    rgba(20, 25, 37, 0.78) 38%,
    rgba(20, 25, 37, 0) 100%
  );
}
.brand { position: relative; display: inline-flex; color: var(--text-hi); }
.brand-logo { height: 25px; width: auto; display: block; }
/* pronunciation tooltip below the wordmark (instant, no native-title delay) */
.brand::after {
  content: attr(data-pronounce);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  padding: var(--sp-1) var(--sp-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-hi);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms var(--ease-out-quart);
}
.brand:hover::after,
.brand:focus-visible::after { opacity: 1; }

.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 32px); }
.nav-link {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 480;
  letter-spacing: 0.01em;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.nav-link:hover { color: var(--text-hi); }

/* Text links: Glaise Blue underline wipes in from the left on hover,
   retreats to the right on leave. The accent gets its moment. */
.nav-link:not(.nav-link--gh) {
  position: relative;
  display: inline-block;
}
.nav-link:not(.nav-link--gh)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-med) var(--ease-out-expo);
}
.nav-link:not(.nav-link--gh):hover::after,
.nav-link:not(.nav-link--gh):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-link--gh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  color: var(--text);
  background-color: transparent;
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart),
    background-color var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart);
}
.nav-link--gh:hover {
  border-color: var(--blue-mid);
  color: var(--text-hi);
  background-color: var(--blue-night);
  transform: translateY(-1px);
}
.nav-link--gh:active { transform: translateY(0); }
.nav-link--gh svg {
  transition: transform var(--dur-fast) var(--ease-out-quart);
}
.nav-link--gh:hover svg { transform: scale(1.12); }

@media (max-width: 640px) {
  .site-nav .nav-link:not(.nav-link--gh) { display: none; }
}

/* ---------- Shared: eyebrow, section scaffolding ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

/* Hero eyebrow sits over the live shader: wrap it in a frosted pill so a bright
   aurora frame can never eat its legibility. Dark ink base + blur guarantee the
   light-blue text always has a dark ground, whatever the shader paints behind. */
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  color: var(--blue-bright);
  background: rgba(20, 25, 37, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

.section {
  max-width: calc(var(--page-max) + 2 * var(--page-pad));
  margin-inline: auto;
  padding: calc(var(--section-gap) / 2) var(--page-pad);
}

.section-head {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: clamp(40px, 7vh, 72px);
}
.section-title {
  font-size: var(--text-h2);
  font-weight: 640;
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--text-hi);
}
.section-sub {
  font-size: var(--text-lg);
  font-weight: 380;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 58ch;
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    column-gap: var(--sp-16);
  }
  .section-head .eyebrow { grid-column: 1 / -1; }
  /* optically align the sub's first line with the title's cap height */
  .section-head .section-sub { padding-top: clamp(6px, 1vw, 14px); }
}

/* ---------- Scroll reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal,
  [data-animate] {
    opacity: 0;
    transform: translateY(26px);
  }
  body.loaded .reveal {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-reveal) var(--ease-out-expo),
      transform var(--dur-reveal) var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * 100ms);
  }
  [data-animate].in {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-reveal) var(--ease-out-expo),
      transform var(--dur-reveal) var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(140px, 22vh, 220px) 0 0;
}

.hero-atmosphere {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(92vh, 900px);
  overflow: hidden;
  pointer-events: none;
}
/* CSS glow: always present; the shader canvas layers on top when live.
   Fade to same-hue zero-alpha (not `transparent`) to avoid a gray banding fringe. */
.hero-atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 42% at 72% 8%, rgba(141, 179, 239, 0.13), rgba(141, 179, 239, 0) 68%),
    radial-gradient(ellipse 48% 36% at 18% 30%, rgba(89, 119, 166, 0.10), rgba(89, 119, 166, 0) 70%);
}
#hero-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.8s var(--ease-out-quart);
  /* fade the aurora out before content gets busy */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
}
#hero-shader.live { opacity: 0.62; }

/* Fine grain over the atmosphere dissolves 8-bit banding on the dark gradient.
   Sits above the canvas (last in paint order); overlay leaves true blacks intact. */
.hero-atmosphere::after,
.closing-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}

.hero-inner {
  position: relative;
  max-width: calc(var(--page-max) + 2 * var(--page-pad));
  margin-inline: auto;
  padding-inline: var(--page-pad);
  text-align: center;
}

.hero-title {
  margin-top: var(--sp-6);
  font-size: var(--text-h1);
  font-weight: 645;
  letter-spacing: -0.034em;
  line-height: 1.01;
  color: var(--text-hi);
}

.hero-sub {
  margin-top: clamp(20px, 3vh, 32px);
  max-width: 56ch;
  margin-inline: auto;
  font-size: var(--text-lg);
  font-weight: 380;
  line-height: 1.62;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ---------- Install block ---------- */
.install {
  margin-top: clamp(32px, 5vh, 48px);
  margin-inline: auto;
  max-width: 720px;
  /* Hero text centers; the install card is centered as an object but its
     contents (tabs top-left, command code) stay left where they belong. */
  text-align: left;
}

.install-tabs {
  position: relative;
  display: inline-flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* The selected-tab background is a single pill that slides between tabs.
   JS sets its size/position; transform + width are the only animated props. */
.tab-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  background: var(--panel-raised);
  border-radius: var(--radius-sm);
  pointer-events: none;
  transition:
    transform var(--dur-med) var(--ease-out-expo),
    width var(--dur-med) var(--ease-out-expo);
}
.install-tab {
  position: relative;
  z-index: 1;
  padding: 7px 16px 6px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-3);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.install-tab:hover { color: var(--text-2); }
.install-tab[aria-selected="true"] { color: var(--text-hi); }

/* Wrapper clips the panel so its height can glide between the two tabs'
   content, killing the abrupt jump when Shell (1 line) swaps to Claude Code
   (2 lines). JS drives the target height; CSS eases it. */
.install-panels {
  position: relative;
  overflow: hidden;
  transition: height var(--dur-med) var(--ease-out-expo);
}
.install-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  padding: var(--sp-2);
}
.install--closing .install-panel { border-radius: var(--radius-md); }
.install-panel[hidden] { display: none; }
.install-panel.is-entering { animation: panelEnter var(--dur-med) var(--ease-out-expo); }
@keyframes panelEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Each command is its own copyable row: run one, then the next. Per-line copy
   means you grab exactly the command you're about to paste, never both at once. */
.cmd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmd-line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px var(--sp-2) 9px var(--sp-4);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out-quart);
}
.cmd-line:hover { background: var(--panel-raised); }
.cmd-prompt {
  flex: none;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  user-select: none;
}
.cmd-text {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text);
  scrollbar-width: thin;
}

.cmd-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition:
    color var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart),
    background-color var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart);
}
/* Always visible (no hover-to-reveal, so touch + keyboard reach it); the row
   warms the button, direct hover/focus takes it to the Glaise Blue accent. */
.cmd-line:hover .cmd-copy { color: var(--text-2); border-color: var(--text-3); }
.cmd-copy:hover,
.cmd-copy:focus-visible {
  color: var(--blue);
  border-color: var(--blue-mid);
  background: var(--blue-night);
}
.cmd-copy:active { transform: scale(0.96); }
.cmd-copy .ico-check { display: none; }
.cmd-copy.copied {
  color: var(--ok);
  border-color: var(--ok);
  background: transparent;
}
.cmd-copy.copied .ico-copy { display: none; }
.cmd-copy.copied .ico-check { display: block; }

/* ---- Hero compatibility strip: the icons ARE the compat statement.
   Monochrome at rest to stay in the Ink world; hover lifts each mark to its
   brand color. Only Claude has a hue that reads on Ink (coral); the other
   marks are monochrome brands, so they brighten to high-emphasis instead. ---- */
.compat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-8);
}
.compat-group { display: inline-flex; align-items: center; gap: var(--sp-3); }
.compat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.compat-marks { display: inline-flex; align-items: center; gap: var(--sp-3); }
.compat-mark {
  position: relative;
  display: inline-flex;
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.compat-mark svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.compat-mark:hover { color: var(--brand, var(--text-hi)); }   /* color only, no lift */
.compat-mark--claude { --brand: #d97757; }   /* Claude coral: the one brand hue that reads on Ink */
/* instant name tooltip above the mark (native title has a ~1s delay) */
.compat-mark::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: var(--sp-1) var(--sp-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-hi);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms var(--ease-out-quart);
}
.compat-mark:hover::after { opacity: 1; }
.compat-sep { color: var(--text-3); user-select: none; }

@media (max-width: 600px) {
  .cmd-line { gap: var(--sp-2); padding: 8px 8px 8px 12px; }
  .cmd-copy { padding: 6px 8px; }
  .cmd-copy .copy-label { display: none; }
}

/* ---------- Hero screenshot ---------- */
.hero-shot {
  position: relative;
  max-width: min(1080px, calc(100% - 2 * var(--page-pad)));
  margin: clamp(56px, 9vh, 96px) auto 0;
}
.hero-shot img {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(20, 25, 37, 0.8),
    0 24px 80px -24px rgba(9, 12, 20, 0.9),
    0 0 120px -40px rgba(141, 179, 239, 0.25);
  transition: opacity 0.5s ease;
}
/* Pigment crossfade: first image stays in flow (LCP), the rest stack on top */
.hero-shot img + img { position: absolute; top: 0; left: 0; }
.hero-shot img:not(.is-active) { opacity: 0; }
.hero-shot-caption {
  margin-top: var(--sp-4);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* ============================================================
   01 — THE PROBLEM (compare slider)
   ============================================================ */
.section--problem { padding-top: var(--section-gap); }

.compare { max-width: 1160px; }

.compare-stage {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}

.pane {
  position: absolute;
  inset: 0;
  user-select: none;
}
.pane--slop {
  clip-path: inset(0 calc(100% - var(--cut, 62%)) 0 0);
}

.compare-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--cut, 62%);
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(244, 247, 254, 0.35), 0 0 18px rgba(9, 12, 20, 0.55);
  z-index: 3;
  pointer-events: none;
}
.compare-handle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--border-strong);
  color: var(--text-hi);
  box-shadow: 0 4px 16px rgba(9, 12, 20, 0.6);
}

.compare-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
.compare-range:focus-visible ~ * { outline: none; }
.compare-stage:has(.compare-range:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.compare-tags {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.compare-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.compare-tag--before { color: var(--text-3); }
.compare-tag--after { color: var(--blue); }

.compare-note {
  margin-top: var(--sp-6);
  max-width: 68ch;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-3);
}
.compare-note em { font-style: normal; color: var(--text-2); }

/* ----- Pane: deliberate AI slop ----- */
.pane--slop {
  background: linear-gradient(135deg, #eef1ff 0%, #fdf2ff 100%);
  font-family: Arial, Helvetica, sans-serif;
  color: #2d2a45;
}
.s-app { display: flex; height: 100%; }
.s-side {
  flex: 0 0 24cqi;
  background: linear-gradient(180deg, #7b2ff7 0%, #b224ef 60%, #f107a3 130%);
  color: #fff;
  padding: 2.4cqi 1.6cqi;
  display: flex;
  flex-direction: column;
  gap: 1cqi;
}
.s-side-brand {
  font-weight: 700;
  font-size: 1.75cqi;
  margin-bottom: 1.6cqi;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.s-side-item {
  display: flex;
  align-items: center;
  gap: 1cqi;
  padding: 1cqi 1.2cqi;
  font-size: 1.45cqi;
  border-radius: 99px;
  opacity: 0.92;
}
.s-side-item--on {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(0,0,0,0.2);
}
.s-ico { font-size: 1.6cqi; }

.s-mainarea { flex: 1; padding: 2.2cqi 2.4cqi; overflow: hidden; }
.s-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2cqi;
}
.s-h1 {
  font-size: 2.5cqi;
  font-weight: 800;
  background: linear-gradient(90deg, #7b2ff7, #f107a3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.s-btn-grad {
  padding: 1.1cqi 2cqi;
  font-size: 1.4cqi;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #7b2ff7, #f107a3);
  border-radius: 99px;
  box-shadow: 0 8px 24px rgba(178, 36, 239, 0.5);
}
.s-stats { display: flex; gap: 1.6cqi; margin-bottom: 2cqi; }
.s-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.2cqi;
  background: #fff;
  border: 2px solid #ece7ff;
  border-radius: 1.6cqi;
  padding: 1.6cqi;
  box-shadow: 0 10px 30px rgba(123, 47, 247, 0.16), 0 3px 8px rgba(0,0,0,0.08);
}
.s-ico-circle {
  display: grid;
  place-items: center;
  width: 4cqi; height: 4cqi;
  font-size: 1.9cqi;
  border-radius: 50%;
  flex: none;
}
.s-ico-circle--a { background: linear-gradient(135deg, #ffe259, #ffa751); }
.s-ico-circle--b { background: linear-gradient(135deg, #ff5858, #f09819); }
.s-ico-circle--c { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.s-stat-num { font-size: 1.9cqi; font-weight: 800; }
.s-stat-num--grad {
  background: linear-gradient(90deg, #f107a3, #7b2ff7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.s-stat-label { font-size: 1.2cqi; color: #9a93bd; }

.s-panel {
  background: #fff;
  border: 2px solid #ece7ff;
  border-radius: 1.6cqi;
  box-shadow: 0 10px 30px rgba(123, 47, 247, 0.13);
  overflow: hidden;
}
.s-row {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1fr 1fr;
  align-items: center;
  gap: 1cqi;
  padding: 1.15cqi 1.8cqi;
  font-size: 1.3cqi;
  border-top: 1px solid #f1edff;
}
.s-row--head {
  border-top: none;
  background: linear-gradient(90deg, #f6f1ff, #fdf0fa);
  font-weight: 700;
  color: #7b2ff7;
  text-transform: uppercase;
  font-size: 1.1cqi;
  letter-spacing: 0.06em;
}
.s-btn-pill {
  padding: 0.55cqi 1.3cqi;
  font-size: 1.1cqi;
  font-weight: 700;
  color: #fff;
  border-radius: 99px;
}
.s-btn-pill--green { background: linear-gradient(90deg, #43e97b, #38b2ac); }
.s-btn-pill--blue { background: linear-gradient(90deg, #4facfe, #00f2fe); }
.s-btn-pill--red { background: linear-gradient(90deg, #ff5858, #f857a6); }

.s-mainarea { position: relative; }
.s-fab {
  position: absolute;
  right: 2.4cqi;
  bottom: 2.2cqi;
  width: 4.6cqi;
  height: 4.6cqi;
  font-size: 2.4cqi;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f107a3, #7b2ff7);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(178, 36, 239, 0.55), 0 3px 8px rgba(0, 0, 0, 0.25);
}

/* ----- Pane: the same screen, Glaise family ----- */
.pane--glaise {
  background: #f4f3f0;
  font-family: var(--font-sans);
  color: #1f242e;
}
.g-app { display: flex; height: 100%; gap: 1.2cqi; padding: 1.2cqi; }
.g-side {
  flex: 0 0 20cqi;
  background: #fdfcfa;
  border: 1px solid #e4e2dd;
  border-radius: 0.9cqi;
  padding: 1.6cqi 1cqi;
  display: flex;
  flex-direction: column;
  gap: 0.35cqi;
}
.g-side-brand {
  display: flex;
  align-items: center;
  gap: 0.8cqi;
  font-weight: 600;
  font-size: 1.45cqi;
  letter-spacing: -0.01em;
  padding: 0 0.9cqi 1.3cqi;
  color: #1f242e;
}
.g-dot {
  width: 1.5cqi; height: 1.5cqi;
  border-radius: 0.4cqi;
  background: #2b303a;
  flex: none;
}
.g-side-item {
  display: flex;
  align-items: center;
  gap: 0.9cqi;
  padding: 0.85cqi 0.9cqi;
  font-size: 1.3cqi;
  font-weight: 450;
  color: #5c6270;
  border-radius: 0.6cqi;
}
.g-side-item svg { width: 1.4cqi; height: 1.4cqi; flex: none; }
.g-side-item--on {
  background: #edece8;
  color: #1f242e;
  font-weight: 550;
}

.g-mainarea { flex: 1; display: flex; flex-direction: column; gap: 1.2cqi; overflow: hidden; }
.g-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0.8cqi 0.4cqi 0;
}
.g-h1 { font-size: 2.1cqi; font-weight: 630; letter-spacing: -0.02em; color: #171c26; }
.g-crumb { font-size: 1.15cqi; color: #6d7380; margin-top: 0.3cqi; }
.g-top-actions { display: flex; gap: 0.8cqi; }
.g-btn {
  padding: 0.8cqi 1.5cqi;
  font-size: 1.2cqi;
  font-weight: 530;
  color: #fdfcfa;
  background: #2b303a;
  border-radius: 0.6cqi;
}
.g-btn--ghost {
  color: #3d434f;
  background: transparent;
  border: 1px solid #d9d6cf;
}

.g-stats { display: flex; gap: 1.2cqi; }
.g-stat {
  flex: 1;
  background: #fdfcfa;
  border: 1px solid #e4e2dd;
  border-radius: 0.9cqi;
  padding: 1.4cqi 1.6cqi;
}
.g-stat-label { font-size: 1.1cqi; font-weight: 480; color: #6d7380; }
.g-stat-num {
  font-family: var(--font-mono);
  font-size: 2cqi;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #171c26;
  margin-top: 0.5cqi;
}
.g-stat-sub { font-size: 1.05cqi; color: #6d7380; margin-top: 0.35cqi; }
.g-stat-sub--err { color: #a03e36; }

.g-panel {
  flex: 1;
  background: #fdfcfa;
  border: 1px solid #e4e2dd;
  border-radius: 0.9cqi;
  overflow: hidden;
}
.g-row {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1fr 1fr;
  align-items: center;
  gap: 1cqi;
  padding: 1.05cqi 1.6cqi;
  font-size: 1.25cqi;
  border-top: 1px solid #edebe6;
}
.g-row--head {
  border-top: none;
  font-size: 1.02cqi;
  font-weight: 520;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6d7380;
}
.g-mono { font-family: var(--font-mono); font-size: 1.15cqi; color: #3d434f; }
.g-badge {
  display: inline-block;
  padding: 0.3cqi 0.9cqi;
  font-size: 1.02cqi;
  font-weight: 520;
  border-radius: 99px;
  background: #eceae5;
  color: #4d525e;
  border: 1px solid #dfdcd5;
}
.g-badge--ok { background: #e2f2e6; color: #256a41; border-color: #cae5d2; }
.g-badge--err { background: #f9e4e1; color: #92312b; border-color: #f0cfca; }
.g-foot {
  padding: 1cqi 1.6cqi;
  font-size: 1.05cqi;
  color: #6d7380;
  border-top: 1px solid #edebe6;
}

/* hide sidebars when the stage is narrow */
@container (max-width: 560px) {
  .s-side, .g-side { display: none; }
  .s-row, .g-row { grid-template-columns: 1fr 1.4fr 0.9fr 1fr; }
}

/* ============================================================
   02 — SKIN VS SOUL  (light section, pinned pigment carousel)
   The surface itself becomes the off-white skin — a deliberate break
   in the Ink drench. Reuses the compare pane's skin values so the
   light world stays in-system.
   ============================================================ */
.section--pigments {
  position: relative;
  isolation: isolate;
  padding-block: clamp(96px, 15vh, 176px);
}
/* full-bleed off-white ground */
.section--pigments::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #f4f3f0;
}
.pigments-inner {
  max-width: calc(var(--page-max) + 2 * var(--page-pad));
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
/* the flex gap / viewport margin handles spacing here */
.pigments-stage .section-head { margin-bottom: 0; }
/* light-mode text overrides — the dark tokens are invisible on off-white */
.pigments-light .eyebrow { color: #48618c; }   /* deep Glaise blue, AA on #f4f3f0 */
.pigments-light .section-title { color: #171c26; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); line-height: 1.05; }
.pigments-light .section-sub { color: #4d525e; }

/* ---- Stage: pinned wrapper. Heading + strip + progress stay on screen
   together while the pigment screens scrub horizontally past them. ---- */
.pigments-scroll { position: relative; }   /* JS sets height = 100vh + scrub distance */
.pigments-stage { display: block; }         /* fallback / mobile: vertical flow */
/* CSS sticky does the pinning (robust, no fixed-position/spacer); GSAP only
   reads scroll progress and translates the track. */
.is-pinned .pigments-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vh, 40px);
  height: 100vh;
  padding-block: clamp(28px, 4vh, 56px);
}

/* ---- Viewport: native swipe strip by default; JS clips it for the scrub ---- */
.pigments-viewport {
  margin-top: clamp(44px, 7vh, 80px);
  padding-bottom: 24px;          /* room for the card shadow inside the scroll clip */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pigments-viewport::-webkit-scrollbar { display: none; }
/* pinned: clip the horizontal track; padding-bottom leaves room for the
   card drop shadow inside the clip (card sized down to keep the 100vh fit) */
.is-pinned .pigments-viewport {
  margin-top: 0;
  padding-bottom: 36px;
  overflow: hidden;
  scroll-snap-type: none;
}

.pigments-track {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  width: max-content;
  margin: 0;
  /* first card's left edge aligns with the page content column */
  padding-inline: max(var(--page-pad), calc((100vw - var(--page-max)) / 2));
}
.is-pinned .pigments-track { will-change: transform; }

.pigment {
  flex: 0 0 auto;
  width: clamp(260px, 42vw, 560px);
  scroll-snap-align: center;
  margin: 0;
}
/* pinned: size cards by height so the whole stage always fits one screen */
.is-pinned .pigment { width: auto; }
.is-pinned .pigment img { width: auto; height: clamp(180px, 36vh, 360px); }
.pigment-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.pigment-link:focus-visible { border-radius: var(--radius-lg); }
.pigment img {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid #e0ddd4;
  /* lift the light UI shots off the light ground */
  box-shadow: 0 24px 60px -30px rgba(20, 25, 37, .38), 0 3px 10px rgba(20, 25, 37, .07);
  transition: transform var(--dur-med) var(--ease-out-expo), box-shadow var(--dur-med) var(--ease-out-expo);
}
/* the whole card is a link to the live demo — signal it on hover */
.pigment-link:hover img {
  transform: translateY(-4px);
  box-shadow: 0 34px 72px -28px rgba(20, 25, 37, .48), 0 5px 14px rgba(20, 25, 37, .10);
}
.pigment-link:hover .pigment-name { color: var(--blue); }
.pigment-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding-inline: 2px;
}
.pigment-name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #171c26;
}
.pigment-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: #6d7380;
}

/* ---- Scrub progress (pinned mode only) ---- */
.pigments-progress {
  display: none;
  margin-top: clamp(20px, 3vh, 32px);
  height: 2px;
  background: #e0ddd4;
  border-radius: 2px;
  overflow: hidden;
}
.is-pinned .pigments-progress { display: block; }
.pigments-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: #48618c;
  transform: scaleX(0);
  transform-origin: left;
}

.pigments-outro {
  margin-top: clamp(48px, 7vh, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
}
.pigment-footnote {
  font-size: var(--text-base);
  color: #4d525e;
  max-width: 52ch;
}
/* dark solid CTA reads as primary on the off-white ground (the compare pane's
   button language) and carries into the interactive gallery */
.pigment-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  color: #fdfcfa;
  background: #1f242e;
  border-radius: var(--radius-md);
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart);
}
.pigment-cta:hover { background: #2b303a; transform: translateY(-1px); }
.pigment-cta:active { transform: translateY(0); }
.pigment-cta svg { transition: transform var(--dur-med) var(--ease-out-expo); }
.pigment-cta:hover svg { transform: translate(2px, -2px); }

/* ============================================================
   03 — HOW IT WORKS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  counter-reset: step;
}
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; }
}

.step {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.step-num {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--blue-mid); /* 3.4:1 on Ink, AA for large text */
}
.step-name {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-hi);
}
.step-desc {
  margin-top: var(--sp-2);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
}

.flow-figure {
  margin-top: clamp(48px, 8vh, 80px);
  max-width: 860px;
  margin-inline: auto;
}
.flow-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.flow-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   04 — GUARANTEES
   ============================================================ */
.guarantees {
  border-top: 1px solid var(--border);
  max-width: 1000px;
}
.guarantee {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-8);
  padding: clamp(20px, 3.5vh, 32px) 0;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 820px) {
  .guarantee {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
  }
}
.guarantee dt {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 1.125rem;
  font-weight: 570;
  letter-spacing: -0.01em;
  color: var(--text-hi);
}
.guarantee-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  color: var(--blue);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.guarantee-mark svg { width: 24px; height: 24px; stroke-width: 1.25; }
.guarantee dd {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 52ch;
  text-wrap: pretty;
}
@media (max-width: 819px) {
  .guarantee dd { padding-left: calc(48px + var(--sp-4)); }
}

/* ============================================================
   05 — IN DEPTH  (sticky vertical scroll-spy)
   Left nav is position:sticky; the right column scrolls. script.js
   lights the tab whose panel crosses the viewport center. Mobile
   drops the nav and stacks the panels under their own headings.
   ============================================================ */
/* full-bleed raised ground, a step up from the Ink page surface */
.section--depth { position: relative; isolation: isolate; }
.section--depth::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--panel);   /* raised surface, a step up from the Ink page */
}

.depth { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 900px) {
  .depth {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }
}

/* ---- sticky nav (desktop only) ---- */
.depth-nav { display: none; }
@media (min-width: 900px) {
  .depth-nav {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: clamp(104px, 20vh, 176px);
  }
}
.depth-tablist { display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.depth-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  color: var(--text-3);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.depth-tab-num {
  font-size: 0.75rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
/* active indicator: a segment that grows on the shared rail (scroll-spy) */
.depth-tab::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: var(--blue);
  transition: height var(--dur-med) var(--ease-out-quart);
}
.depth-tab:hover { color: var(--text-2); }
.depth-tab.is-active { color: var(--text-hi); }
.depth-tab.is-active .depth-tab-num { color: var(--blue); }
.depth-tab.is-active::before { height: 60%; }

/* ---- scrolling panels ---- */
.depth-panels { min-width: 0; }
.depth-panel {
  min-height: 52vh;
  padding-block: clamp(28px, 6vh, 60px);
}
.depth-panel:first-child { padding-top: 0; }
.depth-panel:last-child { min-height: 0; }   /* no trailing void before the next section */
.depth-panel + .depth-panel { border-top: 1px solid var(--border); }
.depth-panel-title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  margin-bottom: clamp(20px, 3vh, 32px);
}
.depth-list code,
.depth-panel code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--text-hi);
  background: var(--ink);          /* recessed against the raised panel ground */
  border: 1px solid var(--border);
  padding: 0.08em 0.36em;
  border-radius: 6px;
}

/* who — personas */
.depth-personas { display: grid; }
.depth-persona {
  display: grid;
  gap: var(--sp-2);
  padding-block: clamp(18px, 3vh, 28px);
}
.depth-persona:first-child { padding-top: 0; }
.depth-persona + .depth-persona { border-top: 1px solid var(--border); }
@media (min-width: 560px) {
  .depth-persona {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--sp-8);
    align-items: baseline;
  }
}
.depth-persona dt {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 570;
  letter-spacing: -0.015em;
  color: var(--text-hi);
}
.depth-persona dd {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.depth-note {
  margin-top: clamp(24px, 4vh, 40px);
  font-size: var(--text-sm);
  color: var(--text-3);
  max-width: 62ch;
}

/* what / proof — lists */
.depth-list { display: grid; gap: clamp(16px, 2.4vh, 24px); max-width: 64ch; }
.depth-list li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.depth-list strong { color: var(--text-hi); font-weight: 570; }
/* What: a short accent tick in the gutter (hairline motif) */
.depth-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--blue);
}
/* Proof: swap the tick for a verify check */
.depth-proof li::before {
  content: '✓';
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.6;
}

/* when — use / skip */
.depth-when { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 620px) { .depth-when { grid-template-columns: 1fr 1fr; } }
.depth-when-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.depth-when-label--yes { color: var(--blue); }
.depth-when-label--no { color: var(--text-3); }
.depth-when ul { display: grid; gap: var(--sp-3); }
.depth-when li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
.depth-when li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.55;
}
.depth-when-col--yes li::before { content: '✓'; color: var(--blue); }
.depth-when-col--no li::before { content: '✕'; color: var(--text-3); }

/* ============================================================
   06 — FAQ  (light section, native accordion)
   Same off-white ground as the pigment world: the Ink break stays
   in-system. <details>/<summary> = zero JS, keyboard + SR native;
   script.js upgrades it to a single-open, grid-rows accordion. Light
   text overrides because the dark tokens are invisible on off-white.
   ============================================================ */
.section--faq {
  position: relative;
  isolation: isolate;
}
.section--faq::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #f4f3f0;
}
.faq-light .eyebrow { color: #48618c; }        /* deep Glaise blue, AA on #f4f3f0 */
.faq-light .section-title { color: #171c26; }
.faq-light .section-sub { color: #4d525e; }

.faq {
  max-width: 860px;
  margin-inline: auto;
  border-top: 1px solid rgba(23, 28, 38, 0.14);
}
.faq-item { border-bottom: 1px solid rgba(23, 28, 38, 0.14); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: clamp(18px, 3vh, 26px) 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: #171c26;
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover,
.faq-item:focus-within > .faq-q { color: #0f131c; }
/* the global focus ring is Glaise Blue (#8db3ef): invisible on the off-white
   FAQ ground. Swap to the AA deep blue this section's eyebrow already uses. */
.faq-q:focus-visible { outline-color: #48618c; }

/* +/− mark, pure CSS — animates plus → minus on open */
.faq-mark {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.faq-mark::before,
.faq-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  background: #48618c;
  transform: translateY(-50%);
  transition: transform var(--dur-med) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart);
}
.faq-mark::after { transform: translateY(-50%) rotate(90deg); }        /* standing bar → plus */
/* Open: the standing bar lies down onto the horizontal one (90° → 0°),
   merging into a single minus. no-JS keys off [open]; script.js adds
   .faq-js and drives it from .is-open so it flips at the gesture. */
.faq-item[open] .faq-mark::after { transform: translateY(-50%) rotate(0deg); }
.faq-js .faq-item .faq-mark::after { transform: translateY(-50%) rotate(90deg); }
.faq-js .faq-item.is-open .faq-mark::after { transform: translateY(-50%) rotate(0deg); }
.faq-q:hover .faq-mark::before,
.faq-q:hover .faq-mark::after { background: #171c26; }

.faq-a { max-width: 62ch; }
/* Open/close reveal: script.js keeps the item [open] while this grid row
   tweens 0fr → 1fr (a browser-scheduled transition, smooth even while the
   shaders/GSAP work the main thread). Padding sits on the <p> so it clips
   with the row instead of leaving a gap when collapsed. No-JS / reduced
   motion get the native instant toggle (no grid, no transition). */
.faq-js .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--ease-out-quart);   /* collapse */
}
.faq-js .faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
  transition-duration: 320ms;                                   /* expand, a touch slower */
}
/* the grid item: carries no padding so the 0fr row can fully collapse
   (padding on the item would keep the track at its min-content height). */
.faq-a-inner { min-height: 0; }
.faq-js .faq-a-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms var(--ease-out-quart);
}
.faq-js .faq-item.is-open .faq-a-inner {
  opacity: 1;
  transition-delay: 60ms;
}
.faq-a p {
  padding: 0 var(--sp-8) clamp(20px, 3.2vh, 30px) 0;
  font-size: var(--text-base);
  line-height: 1.65;
  color: #4d525e;
  text-wrap: pretty;
}
.faq-a code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: #384258;
  background: rgba(23, 28, 38, 0.06);
  padding: 0.1em 0.36em;
  border-radius: 5px;
}

/* ============================================================
   07 — HONEST SCOPE
   ============================================================ */
.scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 96px);
  max-width: 880px;
}
@media (max-width: 640px) {
  .scope { grid-template-columns: 1fr; }
}

.scope-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}
.scope-label--does { color: var(--blue); }
.scope-label--refuses { color: var(--text-3); }

.scope-list {
  display: grid;
  gap: var(--sp-3);
}
.scope-list li {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-hi);
}
.scope-list--refuses li {
  color: var(--text-3);
  font-weight: 420;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-3);
}

.scope-wink {
  margin-top: clamp(40px, 6vh, 64px);
  font-size: var(--text-base);
  color: var(--text-2);
  max-width: 56ch;
}

/* ============================================================
   CLOSING
   ============================================================ */
.closing {
  position: relative;
  margin-top: calc(var(--section-gap) / 2);
  padding: var(--section-gap) var(--page-pad) calc(var(--section-gap) * 0.8);
  overflow: hidden;
}
.closing-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.closing-atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 65% at 50% 60%, rgba(141, 179, 239, 0.10), rgba(141, 179, 239, 0) 70%);
}
#closing-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.8s var(--ease-out-quart);
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 55%, #000 40%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 55%, #000 40%, transparent 78%);
}
#closing-shader.live { opacity: 0.5; }

.closing-inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}
/* Grid items default to min-width:auto — a child that can't wrap (iOS Safari
   won't break at some Unicode spaces) would stretch the shared column and drag
   the full-width panel off-screen. Pin every child to min-width:0. */
.closing-inner > * { min-width: 0; }
.closing-title {
  font-size: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  font-weight: 645;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-hi);
}
.install--closing {
  margin-top: clamp(32px, 5vh, 48px);
  width: min(640px, 100%);
  text-align: left;
}
.closing-meta {
  margin-top: var(--sp-8);
  font-size: var(--text-sm);
  color: var(--text-3);
}
.closing-meta a { color: var(--text-2); }
.closing-meta a:hover { color: var(--blue-bright); }

/* ---------- Footer ---------- */
.site-footer {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--page-pad) var(--sp-12);
}
.footer-mark { width: 30px; height: auto; }
.footer-motto {
  font-size: var(--text-sm);
  color: var(--text-2);
}
.footer-links {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.footer-links a { color: var(--text-3); }
.footer-links a:hover { color: var(--blue-bright); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  #hero-shader, #closing-shader { display: none; }
}