/* ─────────────────────────────────────────────────────────────────────
 * garnet-app.css — consumer "Garnet: your own private AI" experience.
 *
 * Phase 1 of the garnetgrid.com rebrand (dossier: audits/garnetgrid-com/
 * rebrand-dossier-2026-06-13.md). Dark-first obsidian + crimson, built on the
 * design tokens in tokens.css (--ink-*, --paper-*, --accent, --space-*,
 * --radius-*, --shadow-*, --ease-*). All consumer classes are prefixed `gx-`
 * to avoid colliding with the existing B2B site CSS.
 *
 * Loaded by garnet-preview.html AFTER tokens.css. No build step; edit in place.
 * ───────────────────────────────────────────────────────────────────── */

:root {
  /* Machine Garnet: families resolve from tokens.css (Space Mono display +
     IBM Plex Sans body); surfaces read as graphite panels with drawn hairlines. */
  --gx-font-display: var(--font-display);
  --gx-font-body: var(--font-body);
  /* AA-safe primary button surface: a richer/darker garnet so white text clears
     4.5:1 (plain --accent at 47% L is ~4:1, below AA for normal text). */
  --gx-cta: linear-gradient(135deg, var(--accent), var(--accent-deep));
  --gx-line: var(--hairline);
  --gx-card: rgba(236, 238, 242, 0.025);
}

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

body.gx {
  margin: 0;
  background: var(--ink-0);
  color: var(--paper-0);
  font-family: var(--gx-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Full-page ambient WebGL crystal field (assets/js/garnet-bg.js). Fixed behind
   all content: z-index:-1 sits above the body's obsidian background but below
   in-flow content, and pointer-events:none keeps it click-through. If WebGL is
   unavailable it stays empty and the obsidian background shows — clean fallback. */
#garnet-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
/* Legibility scrim over the crystal field: darkens the upper-left where the hero
   headline sits, so text stays readable wherever a gem parallaxes to. Painted
   above the canvas (later in DOM, same z-index:-1), still below in-flow content. */
#garnet-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 95% at 24% 38%, rgba(10, 11, 14, 0.66) 0%, rgba(10, 11, 14, 0.36) 34%, rgba(10, 11, 14, 0) 64%); }
/* Faint instrument grid over the whole page — a hairline lattice that says
   "engineered", costs nothing, and sits below content. Off under reduced-motion-
   neutral (it's static anyway). */
body.gx::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 80%);
}

.gx-wrap { width: min(1120px, 92vw); margin-inline: auto; }
.gx-section { padding-block: clamp(48px, 9vw, 120px); }
.gx-section--tight { padding-block: clamp(36px, 6vw, 72px); }

/* Space Mono is a monospace display face — wider than a grotesque, so tracking
   is near-0 (not negative), line-height a touch looser, weight 700 throughout. */
.gx h1, .gx h2, .gx h3 { font-family: var(--gx-font-display); line-height: 1.14; letter-spacing: -0.005em; margin: 0 0 0.5em; font-weight: 700; }
.gx h1 { font-size: clamp(1.9rem, 4.7vw, 3.05rem); }
.gx h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
.gx h3 { font-size: clamp(1.1rem, 1.9vw, 1.32rem); }
.gx p { margin: 0 0 1em; }
.gx a { color: var(--accent-lift); }

/* Eyebrow = the machine readout label: mono, wide-tracked, garnet signal. */
.gx-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-lift); margin: 0 0 1rem; display: inline-flex; align-items: center; gap: 0.55em;
}
/* a small garnet "live" tick before each eyebrow — the instrument signal */
.gx-eyebrow::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.gx-lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--paper-1); max-width: 42ch; }
.gx-muted { color: var(--paper-2); }

/* ── Buttons ───────────────────────────────────────────────────────── */
.gx-btn {
  display: inline-flex; align-items: center; gap: 0.5em; justify-content: center;
  font: 600 0.98rem/1 var(--gx-font-body); text-decoration: none; cursor: pointer;
  padding: 0.8em 1.35em; border-radius: var(--radius-2); border: 1px solid transparent;
  min-height: 44px; transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
/* Primary CTA: the live garnet signal — filled, with a thin garnet ring so it
   reads like a lit control on the instrument panel. */
.gx-btn--primary { background: var(--gx-cta); color: #fff; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.55), 0 8px 24px var(--accent-glow); }
.gx-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent-lift), 0 12px 34px var(--accent-glow); }
.gx-btn--ghost { background: transparent; color: var(--paper-0); border-color: var(--gx-line); }
.gx-btn--ghost:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.gx :focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 3px; border-radius: 4px; }

/* ── Nav ───────────────────────────────────────────────────────────── */
.gx-nav {
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px);
  background: rgba(5, 5, 5, 0.72); border-bottom: 1px solid var(--gx-line);
}
.gx-nav__row { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.8rem; }
.gx-brand { display: flex; align-items: center; gap: 0.55rem; font-family: var(--gx-font-display); font-weight: 700; font-size: 1.2rem; color: var(--paper-0); text-decoration: none; }
.gx-gem { flex: 0 0 auto; display: inline-block; filter: drop-shadow(0 0 7px var(--accent-glow)); }
.gx-nav__links { display: flex; gap: 1.25rem; margin-left: auto; align-items: center; }
.gx-nav__links a { color: var(--paper-1); text-decoration: none; font-size: 0.95rem; }
.gx-nav__links a:hover { color: var(--paper-0); }
@media (max-width: 760px) {
  .gx-nav__row { flex-wrap: wrap; row-gap: 0.5rem; }
  .gx-nav__links { gap: 0.9rem 1rem; flex-wrap: wrap; }
  .gx-nav__links a:not(.gx-btn) { font-size: 0.9rem; min-height: 44px; display: inline-flex; align-items: center; } /* 44px touch target (Apple HIG) */
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.gx-hero { position: relative; overflow: hidden; }
.gx-hero::before {
  content: ''; position: absolute; inset: -30% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 60% at 70% 20%, rgba(var(--accent-rgb), 0.22), transparent 70%);
  pointer-events: none; filter: blur(8px);
}
.gx-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; }
@media (max-width: 920px) { .gx-hero__grid { grid-template-columns: 1fr; } }
.gx-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.gx-hero__trust { margin-top: 1.4rem; font-size: 0.85rem; color: var(--paper-2); display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.gx-hero__aside { margin-top: 0.85rem; font-size: 0.9rem; color: var(--paper-2); }
.gx-hero__aside a { color: var(--paper-2); text-decoration: underline; text-decoration-color: var(--gx-line); text-underline-offset: 3px; }
.gx-hero__aside a:hover { color: var(--paper-0); text-decoration-color: var(--accent); }
.gx-hero__trust span::before { content: '✓ '; color: var(--accent-lift); }

#chat{scroll-margin-top:84px}

/* ── Chat widget ───────────────────────────────────────────────────── */
.gx-chat {
  background: var(--ink-1); border: 1px solid var(--gx-line); border-radius: var(--radius-3);
  padding: 1rem; box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 0.75rem;
}
.gx-chat__log { display: flex; flex-direction: column; gap: 0.6rem; max-height: 340px; min-height: 96px; overflow-y: auto; padding: 0.25rem; }
.gx-chat__msg { padding: 0.7rem 0.95rem; border-radius: var(--radius-2); white-space: pre-wrap; word-break: break-word; max-width: 88%; font-size: 0.98rem; }
.gx-chat__msg--user { align-self: flex-end; background: var(--gx-cta); color: #fff; border-bottom-right-radius: 4px; }
.gx-chat__msg--ai { align-self: flex-start; background: var(--ink-2); color: var(--paper-0); border-bottom-left-radius: 4px; }
.gx-chat__msg--error { background: rgba(232, 65, 24, 0.12); color: #ffd9cf; }
.gx-chat__msg.is-typing::after { content: '▍'; animation: gx-blink 1s steps(2) infinite; color: var(--accent-lift); }
@keyframes gx-blink { 50% { opacity: 0; } }
.gx-chat__seeds { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.gx-chat__seed { font: 500 0.85rem var(--gx-font-body); color: var(--paper-1); background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: var(--radius-pill); padding: 0.45em 0.85em; cursor: pointer; text-align: left; }
.gx-chat__seed:hover { border-color: var(--accent); color: var(--paper-0); }
.gx-chat__form { display: flex; gap: 0.5rem; align-items: flex-end; }
.gx-chat__input { flex: 1; resize: none; max-height: 140px; font: 400 1rem var(--gx-font-body); color: var(--paper-0); background: var(--ink-0); border: 1px solid var(--gx-line); border-radius: var(--radius-2); padding: 0.7rem 0.85rem; }
.gx-chat__input:focus { border-color: var(--accent); }
.gx-chat__send { flex: 0 0 auto; }
.gx-chat__send { font: 600 1rem var(--gx-font-body); color: #fff; background: var(--gx-cta); border: none; border-radius: var(--radius-2); padding: 0.7rem 1.2rem; min-height: 44px; cursor: pointer; }
.gx-chat__send:disabled { opacity: 0.6; cursor: default; }
.gx-chat__note { margin: 0; font-size: 0.78rem; color: var(--paper-2); text-align: center; }
.gx-chat__note a { color: var(--accent-lift); }
/* Post-engagement capture card (rendered after a couple of demo replies). */
.gx-chat__capture { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--gx-line); }
.gx-chat__capture-q { font-size: 0.9rem; color: var(--paper-1); margin: 0 0 0.55rem; }
.gx-chat__capture-q strong { color: var(--paper-0); }
.gx-chat__capture-note { font-size: 0.82rem; color: var(--accent-lift); margin: 0.5rem 0 0; }

.gx-wait{display:flex;gap:.5rem;margin-top:auto}
.gx-wait input{flex:1;min-width:0;font:400 1rem var(--gx-font-body);color:var(--paper-0);background:var(--ink-0);border:1px solid var(--gx-line);border-radius:var(--radius-2);padding:.7rem .85rem}
.gx-wait input:focus{border-color:var(--accent);outline:none}
.gx-wait .gx-btn{flex:0 0 auto}
.gx-wait__note{margin:.6rem 0 0;font-size:.85rem;color:var(--accent-lift)}
@media(max-width:420px){.gx-wait{flex-direction:column}}

/* ── Prompt gallery ────────────────────────────────────────────────── */
.gx-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.gx-gallery__title { font-size: 0.95rem; color: var(--accent-lift); margin-bottom: 0.75rem; }
.gx-gallery__chips { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.gx-gallery__chip { text-align: left; font: 400 0.95rem var(--gx-font-body); color: var(--paper-1); background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: var(--radius-2); padding: 0.6em 0.9em; cursor: pointer; width: 100%; }
.gx-gallery__chip:hover { border-color: var(--accent); color: var(--paper-0); transform: translateX(2px); }
.gx-gallery__err { color: var(--paper-2); }

/* ── Flow toggle (Cloud ↔ Local) ───────────────────────────────────── */
.gx-flow { background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: var(--radius-3); padding: clamp(1rem, 3vw, 2rem); }
.gx-flow__controls { display: inline-flex; background: var(--ink-2); border: 1px solid var(--gx-line); border-radius: var(--radius-pill); padding: 4px; margin-bottom: 1.75rem; }
.gx-flow__btn { font: 600 0.95rem var(--gx-font-body); color: var(--paper-1); background: transparent; border: none; border-radius: var(--radius-pill); padding: 0.55em 1.2em; cursor: pointer; min-height: 40px; }
.gx-flow__btn[aria-pressed="true"] { background: var(--gx-cta); color: #fff; }
.gx-flow__stages { min-height: 150px; }
.gx-flow__stage { display: none; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gx-flow[data-mode="cloud"] .gx-flow__stage--cloud { display: flex; }
.gx-flow[data-mode="local"] .gx-flow__stage--local { display: flex; }
.gx-flow__machine { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: var(--radius-2); }
.gx-flow__machine--wraps, .gx-flow__stage--cloud .gx-flow__machine { border: 2px dashed rgba(var(--accent-rgb), 0.5); position: relative; }
.gx-flow__machine-label { position: absolute; top: -0.7em; left: 0.8rem; font: 600 0.65rem 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-lift); background: var(--ink-0); padding: 0 0.5em; }
.gx-flow__node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; font-weight: 600; font-size: 0.95rem; padding: 0.85rem 1rem; border-radius: var(--radius-2); background: var(--ink-2); border: 1px solid var(--gx-line); min-width: 110px; position: relative; }
.gx-flow__node small { font-weight: 400; font-size: 0.75rem; color: var(--paper-2); }
.gx-flow__node--ai { border-color: rgba(var(--accent-rgb), 0.5); }
.gx-flow__node--server { border-color: rgba(232, 65, 24, 0.5); }
.gx-flow__ico { font-size: 1.5rem; }
.gx-flow__wire { position: relative; flex: 1; min-width: 60px; height: 3px; background: linear-gradient(90deg, var(--gx-line), rgba(var(--accent-rgb), 0.5)); border-radius: 2px; }
.gx-flow__wire--short { max-width: 90px; }
.gx-flow__packet { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--accent-lift); box-shadow: 0 0 12px var(--accent-glow); animation: gx-travel 1.8s var(--ease-inout) infinite; }
@keyframes gx-travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
.gx-flow__stamp { position: absolute; top: -0.6em; right: -0.6em; font: 700 0.65rem 'JetBrains Mono', monospace; color: #ffd9cf; background: rgba(232, 65, 24, 0.85); padding: 0.25em 0.5em; border-radius: 4px; transform: rotate(6deg); }
.gx-flow__caption { margin: 1.75rem 0 0; font-size: 1.02rem; color: var(--paper-1); max-width: 60ch; }

/* ── Run checker ───────────────────────────────────────────────────── */
.gx-check { background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: var(--radius-3); padding: clamp(1rem, 3vw, 2rem); }
.gx-check__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
@media (max-width: 600px) { .gx-check__form { grid-template-columns: 1fr; } }
.gx-check__field { display: flex; flex-direction: column; gap: 0.4rem; }
.gx-check__field label { font-weight: 600; font-size: 0.95rem; }
.gx-check__select { font: 400 1rem var(--gx-font-body); color: var(--paper-0); background: var(--ink-2); border: 1px solid var(--gx-line); border-radius: var(--radius-2); padding: 0.7rem 0.85rem; min-height: 44px; }
.gx-check__select:focus { border-color: var(--accent); }
.gx-check__hint { grid-column: 1 / -1; font-size: 0.82rem; color: var(--paper-2); margin: 0; }
.gx-check__result { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius-2); border-left: 3px solid var(--accent); background: var(--ink-2); display: none; }
.gx-check__result.is-great, .gx-check__result.is-good, .gx-check__result.is-ok { display: block; }
.gx-check__result.is-great { border-left-color: var(--ok); }
.gx-check__result.is-ok { border-left-color: var(--warn); }
.gx-check__head { display: block; font-family: var(--gx-font-display); font-size: 1.2rem; margin-bottom: 0.3rem; }
.gx-check__body { color: var(--paper-1); }
/* Run-checker capture + routing (the verdict is no longer a dead end). */
.gx-check__route { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--gx-line); }
.gx-check__route-q { font-size: 0.92rem; color: var(--paper-1); margin: 0 0 0.6rem; }
.gx-check__route .gx-wait { margin-top: 0; }
.gx-check__route-note { font-size: 0.85rem; color: var(--accent-lift); margin: 0.55rem 0 0; }

/* ── What is / analogy ─────────────────────────────────────────────── */
.gx-what__analogy { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-family: var(--gx-font-display); line-height: 1.4; max-width: 24ch; color: var(--paper-0); }
.gx-callout { border-left: 3px solid var(--accent); font-size: 1.05rem; color: var(--paper-1); }
.gx-callout p:last-child { margin-bottom: 0; }
.gx-callout strong { color: var(--paper-0); }
.gx-details { border: 1px solid var(--gx-line); border-radius: var(--radius-2); padding: 0 1.25rem; margin-top: 1.5rem; background: var(--gx-card); }
.gx-details summary { cursor: pointer; font-weight: 600; padding: 1rem 0; list-style: none; }
.gx-details summary::-webkit-details-marker { display: none; }
.gx-details summary::after { content: '+'; float: right; color: var(--accent-lift); font-size: 1.3rem; line-height: 1; }
.gx-details[open] summary::after { content: '–'; }
.gx-details__body { padding-bottom: 1.25rem; color: var(--paper-1); }

/* ── Why-it-matters scenario cards ─────────────────────────────────── */
.gx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.gx-card { background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: var(--radius-2); padding: 1.5rem; }
.gx-card__ico { font-size: 1.8rem; display: block; margin-bottom: 0.6rem; }
.gx-card h3 { margin-bottom: 0.35rem; }
.gx-card p { margin: 0; color: var(--paper-1); font-size: 0.95rem; }

/* ── Comparison table ──────────────────────────────────────────────── */
.gx-compare { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.gx-compare caption { text-align: left; color: var(--paper-2); font-size: 0.85rem; margin-bottom: 0.75rem; }
.gx-compare th, .gx-compare td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--gx-line); }
.gx-compare thead th { font-family: var(--gx-font-display); font-size: 0.95rem; }
.gx-compare th[scope="col"]:last-child { color: var(--accent-lift); }
.gx-compare td:first-child { color: var(--paper-1); }
.gx-compare .gx-yes { color: var(--ok); font-weight: 600; }
.gx-compare .gx-no { color: var(--paper-2); }
.gx-compare__group td { background: rgba(var(--accent-rgb), 0.06); font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-lift); }
.gx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* <640px: the comparison table no longer forces a 560px min-width horizontal
   scroll. Each row restacks into a labelled card — the row label becomes a
   heading and the two value cells carry their column name via data-label (set
   on the <td>s in index.html). See "Comparison table — mobile stack" below. */

/* ── How you get it ────────────────────────────────────────────────── */
.gx-get { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
@media (max-width: 760px) { .gx-get { grid-template-columns: 1fr; } }
.gx-get__card { background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: var(--radius-3); padding: 2rem; display: flex; flex-direction: column; }
.gx-get__card--featured { border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 16px 50px var(--accent-glow); }
.gx-get__price { font-family: var(--gx-font-display); font-size: 1.5rem; margin: 0.5rem 0 1rem; }
.gx-get__list { list-style: none; padding: 0; margin: 0 0 1.5rem; color: var(--paper-1); }
.gx-get__list li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; }
.gx-get__list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-lift); }
.gx-get__card .gx-btn { margin-top: auto; }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.gx-faq { display: flex; flex-direction: column; gap: 0.6rem; }
.gx-faq details { border: 1px solid var(--gx-line); border-radius: var(--radius-2); padding: 0 1.25rem; background: var(--gx-card); }
.gx-faq summary { cursor: pointer; font-weight: 600; padding: 1.1rem 0; list-style: none; }
.gx-faq summary::-webkit-details-marker { display: none; }
.gx-faq summary::after { content: '+'; float: right; color: var(--accent-lift); font-size: 1.3rem; line-height: 1; }
.gx-faq details[open] summary::after { content: '–'; }
.gx-faq__a { padding-bottom: 1.1rem; color: var(--paper-1); }

/* ── Long-form documents (privacy · terms · trust prose) — AP-06 ───────
   A centered reading column so legal / long-form pages share the canonical
   gx- shell (garnet-app.css + tokens.css) instead of a bespoke gxs-/legacy
   inline <style> block. Pairs with body.gx + the gx-nav/gx-footer. */
.gx-doc { width: min(760px, 92vw); margin-inline: auto; padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem); }
.gx-doc h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin-bottom: 0.2em; }
.gx-doc h2 { font-size: clamp(1.3rem, 2.6vw, 1.55rem); margin: 2.25rem 0 0.55rem; }
.gx-doc h3 { font-size: 1.1rem; margin: 1.5rem 0 0.4rem; }
.gx-doc p, .gx-doc li { color: var(--paper-1); }
.gx-doc ul { padding-left: 1.2rem; margin: 0 0 1em; }
.gx-doc li { margin-bottom: 0.5rem; }
.gx-doc a { color: var(--accent-lift); }
.gx-doc__updated { color: var(--paper-2); font-size: 0.85rem; margin: 0 0 1.5rem; }
/* Reusable callouts (notice banner + TL;DR summary). */
.gx-note { background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: var(--radius-2); padding: 0.9rem 1.1rem; font-size: 0.9rem; color: var(--paper-1); margin: 0 0 2rem; }
.gx-note a { color: var(--accent-lift); }
.gx-tldr { background: var(--gx-card); border: 1px solid var(--gx-line); border-left: 3px solid var(--accent); border-radius: var(--radius-2); padding: 1rem 1.25rem; margin: 0 0 2rem; }
.gx-tldr strong { color: var(--paper-0); }

/* ── Footer ────────────────────────────────────────────────────────── */
.gx-footer { border-top: 1px solid var(--gx-line); padding-block: clamp(36px, 6vw, 64px); }
.gx-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 700px) { .gx-footer__grid { grid-template-columns: 1fr; } }
.gx-footer__proof { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.88rem; color: var(--paper-1); }
.gx-footer__proof span::before { content: '✓ '; color: var(--accent-lift); }
.gx-footer small { color: var(--paper-2); }

/* ── Visual polish v2 (Phase 1 iteration) ──────────────────────────── */

/* Hero aurora — a second, slowly drifting glow layered over ::before. */
.gx-hero { isolation: isolate; }
/* The old animated gx-drift gradient + .gx-hero::after scaffolding are retired:
   the #garnet-bg WebGL crystal field is the hero backdrop now, so there is no
   live consumer for either (removed 2026-06-27). */
.gx-hero > .gx-wrap { position: relative; z-index: 1; }

/* Card + get-card hover lift. */
.gx-card { transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), background 220ms var(--ease-out); }
.gx-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), 0.45); background: rgba(255, 255, 255, 0.055); }
.gx-get__card { transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.gx-get__card:hover { transform: translateY(-5px); }
.gx-get__reassure { margin-top: 0.6rem; font-size: 0.82rem; color: var(--paper-2); }

/* Small text utilities (AP-26: promoted from repeated inline styles). */
.gx-accent { color: var(--accent-lift); }
.gx-footer__legal { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gx-line); font-size: 0.82rem; color: var(--paper-2); }

/* Comparison row hover. */
.gx-compare tbody tr:not(.gx-compare__group):hover td { background: rgba(255, 255, 255, 0.035); }

/* Scroll-reveal — only when JS adds .gx-js to <html>; no-JS keeps content visible. */
.gx-js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.gx-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── Motion / reduced-motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gx-flow__packet { animation: none; left: calc(100% - 12px); opacity: 1; }
  .gx-chat__msg.is-typing::after { animation: none; }
  .gx-btn, .gx-gallery__chip { transition: none; }
  .gx-card:hover, .gx-get__card:hover { transform: none; }
  .gx-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .gx * { scroll-behavior: auto; }
}


/* ── Visual-polish workflow (icons sizing + mid-page rhythm + mobile table) ── */
/* ── Inline-SVG icon set sizing (replaces emoji glyphs, 2026-06-27) ──────────
   The wrappers previously sized emoji via font-size; inline <svg> carry their
   own width/height 24, so we re-size them per wrapper and let currentColor pick
   up the garnet accent. Stroke icons are token-driven and CSP-safe (no fonts). */
.gx-card__ico svg { width: 1.8rem; height: 1.8rem; color: var(--accent-lift); display: block; }
.gx-flow__ico svg { width: 1.5rem; height: 1.5rem; color: var(--accent); display: block; }
.gx-flow__node--ai .gx-flow__ico { color: var(--accent); }


/* ─────────────────────────────────────────────────────────────────────
 * Polish pass 2026-06-27 — mid-page rhythm + mobile comparison table.
 * Token-driven, restrained; no markup churn beyond data-label + band hooks.
 * ───────────────────────────────────────────────────────────────────── */

/* ── Section rhythm: alternating figure-ground band ────────────────────
   A barely-lighter surface with a hairline top border gives every-other
   content section a faint lift off the obsidian field below the hero, so
   the mid-page stops reading flat. The band is a hair more vertical room
   too, for breathing space. Full-bleed: the tint runs edge-to-edge while
   .gx-wrap keeps the measure centered. Layered above the fixed crystal
   field but tuned to stay subtle (alpha 0.018) so it never looks like a
   box — just a tonal shift. */
.gx-section--band {
  position: relative;
  /* A real figure-ground step (was 0.018 — so faint it read as nothing). A
     soft top-down gradient sits the band slightly proud of the obsidian field
     and reserves the brightest tint for the section's start, so the long home
     stack gets visible rhythm without the band looking like a hard box. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.022) 62%, rgba(255, 255, 255, 0.012));
  border-top: 1px solid var(--gx-line);
  border-bottom: 1px solid var(--gx-line); /* delineate the band BOTH edges, not just the top */
  padding-block: clamp(56px, 10vw, 132px); /* slightly more than base .gx-section rhythm */
}
/* A whisper-thin accent seam riding each hairline, so the band edges read as
   intentional brand detail rather than stray dividers. Kept to ~22% width,
   centered, low alpha; mirrored top + bottom. */
.gx-section--band::before,
.gx-section--band::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 22vw, 320px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.45), transparent);
  pointer-events: none;
}
.gx-section--band::before { top: -1px; }
.gx-section--band::after { bottom: -1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.28), transparent); }
/* A tight band keeps the slimmer rhythm but still gets the surface + seam. */
.gx-section--band.gx-section--tight { padding-block: clamp(44px, 7vw, 84px); }

/* ── Comparison table — mobile stack (<640px) ──────────────────────────
   Replaces the retired 560px min-width (which forced horizontal scroll).
   Each row becomes a self-contained card: the first cell (row label) is a
   heading, and the two value cells stack beneath it, each prefixed with its
   column name via the data-label set in index.html. The thead row is moved
   off-screen (not display:none) so it stays in the accessibility tree. */
@media (max-width: 640px) {
  .gx-table-scroll { overflow-x: visible; } /* nothing to scroll now */

  .gx-compare,
  .gx-compare tbody,
  .gx-compare tr,
  .gx-compare td { display: block; width: 100%; }

  /* Keep the column headers for AT, but pull them visually off-screen. */
  .gx-compare thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Each data row is a card. */
  .gx-compare tbody tr:not(.gx-compare__group) {
    border: 1px solid var(--gx-line);
    border-radius: var(--radius-2);
    background: var(--gx-card);
    padding: 0.25rem 0.25rem 0.5rem;
    margin-bottom: 0.85rem;
  }

  /* Reset the cell borders the desktop table set. */
  .gx-compare th,
  .gx-compare td { border-bottom: none; padding: 0.55rem 0.9rem; }

  /* Row label → card heading. */
  .gx-compare tbody tr:not(.gx-compare__group) td:first-child {
    font-family: var(--gx-font-display);
    font-size: 1.02rem;
    color: var(--paper-0);
    padding-bottom: 0.35rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--gx-line);
  }

  /* Value cells: surface their column name from data-label. */
  .gx-compare tbody tr:not(.gx-compare__group) td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-2);
    margin-bottom: 0.15rem;
  }
  /* Make the "yours" column read as the highlighted decision column. */
  .gx-compare tbody tr:not(.gx-compare__group) td[data-label$="(yours)"]::before {
    color: var(--accent-lift);
  }

  /* Group headers ("Privacy & control" / "Practical") become full-width
     section labels between the cards, not boxed rows. */
  .gx-compare__group { display: block; margin: 1.1rem 0 0.5rem; }
  .gx-compare__group td { background: transparent; padding: 0 0.2rem; }

  /* Neutralize the desktop hover tint on touch. */
  .gx-compare tbody tr:not(.gx-compare__group):hover td { background: transparent; }
}