/* CLEO Guide — built on the CLEO OS visual system (docs/CLEO-OS-DESIGN-SYSTEM.md §0).
   Tokens mirror assets/css/cleo-os.css so the guide and the product share one ground.
   Two text-only tokens (--ochre-ink, --sage-ink) are darker than the product's mark colours
   so labels set in them meet contrast on the cream ground. */

:root {
  --paper: #F7F4EE;
  --paper-sunk: #EFEBE3;
  --paper-raised: #FFFFFF;
  --ink: #1E2A3A;
  --ink-soft: #46546A;
  --ink-muted: #5F6B7C;
  --hairline: #E3DDD2;
  --hairline-soft: #ECE7DE;
  --primary: #355070;
  --primary-deep: #2B4059;
  --primary-wash: #E9EEF4;
  --attention: #9E2A2B;
  --attention-wash: #F6E9E7;
  --signal-wash: #F5ECE4;
  --terracotta: #B4573F;
  --ochre-ink: #7F5B1B;
  --ochre-wash: #F6F0E1;
  --sage-ink: #4D6647;
  --sage-wash: #EDF1EA;
  --taupe: #766C60;
  --rail-bg: #2C3E58;
  --rail-ink: rgba(255, 255, 255, .88);
  --rail-ink-soft: rgba(255, 255, 255, .62);
  --rail-ink-quiet: rgba(255, 255, 255, .72);
  --rail-line: rgba(255, 255, 255, .14);
  --rail-hover: rgba(255, 255, 255, .08);
  --rail-current: rgba(255, 255, 255, .16);
  --mark-hi: rgba(245, 236, 228, .9);
  --shadow: 0 1px 2px rgba(30, 42, 58, .06), 0 12px 32px rgba(30, 42, 58, .10);
  --scrim: rgba(20, 24, 31, .45);

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-voice: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --header-h: 60px;
  --rail-w: 17rem;
  --radius: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14181F;
    --paper-sunk: #1B2029;
    --paper-raised: #1E242E;
    --ink: #ECEFF3;
    --ink-soft: #B7BFCC;
    --ink-muted: #8A94A3;
    --hairline: #2C333E;
    --hairline-soft: #242A34;
    --primary: #8FA9C9;
    --primary-deep: #A9BFD9;
    --primary-wash: #1E2A3A;
    --attention: #E08B86;
    --attention-wash: #2A1C1C;
    --signal-wash: #26201A;
    --terracotta: #D48A70;
    --ochre-ink: #D2A860;
    --ochre-wash: #262119;
    --sage-ink: #9AB294;
    --sage-wash: #1C231B;
    --taupe: #A69B8E;
    --rail-bg: #10151D;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45);
    --scrim: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #14181F;
  --paper-sunk: #1B2029;
  --paper-raised: #1E242E;
  --ink: #ECEFF3;
  --ink-soft: #B7BFCC;
  --ink-muted: #8A94A3;
  --hairline: #2C333E;
  --hairline-soft: #242A34;
  --primary: #8FA9C9;
  --primary-deep: #A9BFD9;
  --primary-wash: #1E2A3A;
  --attention: #E08B86;
  --attention-wash: #2A1C1C;
  --signal-wash: #26201A;
  --terracotta: #D48A70;
  --ochre-ink: #D2A860;
  --ochre-wash: #262119;
  --sage-ink: #9AB294;
  --sage-wash: #1C231B;
  --taupe: #A69B8E;
  --rail-bg: #10151D;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45);
  --scrim: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01';
  overflow-x: clip;   /* the page itself never scrolls sideways; tables and diagrams scroll inside their own frames */
}
img, svg { max-width: 100%; }
a { color: var(--primary); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; }
code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--paper-sunk);
  border: 1px solid var(--hairline-soft);
  border-radius: 5px;
  padding: .05em .35em;
}
.g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g-skip {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--primary); color: #fff; padding: .5rem .9rem; border-radius: 8px; text-decoration: none;
}
.g-skip:focus { top: 10px; color: #fff; }
.g-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.g-icon .g-icon-fill { fill: currentColor; stroke: none; }
.g-chip {
  display: inline-flex; align-items: center;
  margin-left: .45rem;
  padding: .02rem .42rem;
  border-radius: 999px;
  font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--rail-line); color: var(--rail-ink-soft);
  white-space: nowrap; vertical-align: .12em;
}
.g-chip--quiet { border-color: var(--hairline); color: var(--ink-muted); background: var(--paper-sunk); }

/* ── Header ───────────────────────────────────────────── */
.g-header {
  position: sticky; top: 0; z-index: 30;
  height: var(--header-h);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-inline: max(16px, 1.25rem);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.g-brand { display: inline-flex; align-items: baseline; gap: .4rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.g-brand:hover { color: var(--ink); }
.g-brand-mark { width: .55rem; height: .55rem; border-radius: 50%; background: var(--terracotta); align-self: center; }
.g-brand-cleo { font-family: var(--font-voice); font-weight: 500; font-size: 1.35rem; letter-spacing: .01em; }
.g-brand-guide { font-weight: 500; color: var(--ink-muted); font-size: .98rem; }
.g-header-end { display: flex; align-items: center; gap: .35rem; justify-self: end; grid-column: -2 / -1; }
.g-icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.g-icon-btn:hover { background: var(--paper-sunk); color: var(--ink); }
.g-menu-btn, .g-search-btn { display: none; }
/* Guide home has one search: the large one in the hero. */
.g-page-home .g-header > .g-search { display: none; }

/* ── Search ───────────────────────────────────────────── */
.g-search { position: relative; width: 100%; max-width: 34rem; justify-self: center; }
.g-search > .g-icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.g-search-input {
  width: 100%; height: 40px;
  padding: 0 2.6rem 0 2.5rem;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--hairline); border-radius: 10px;
  appearance: none;
}
.g-search-input::placeholder { color: var(--ink-muted); }
.g-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-wash); }
.g-search-input::-webkit-search-cancel-button { display: none; }
.g-kbd {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  font: 600 .72rem/1 var(--font-ui); color: var(--ink-muted);
  border: 1px solid var(--hairline); border-bottom-width: 2px; border-radius: 5px;
  padding: .2rem .38rem; background: var(--paper);
}
.g-search--large .g-search-input { height: 56px; font-size: 1.05rem; padding-left: 3rem; border-radius: 14px; box-shadow: var(--shadow); }
.g-search--large > .g-icon { left: 1rem; width: 22px; height: 22px; }

.g-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50;
  max-height: min(70vh, 34rem); overflow: auto;
  background: var(--paper-raised);
  border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: var(--shadow);
  padding: .35rem;
}
.g-results-group { margin: .5rem .55rem .25rem; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.g-result {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .05rem .75rem;
  padding: .55rem .7rem; border-radius: 8px;
  color: var(--ink); text-decoration: none;
}
.g-result:hover { color: var(--ink); }
.g-result.is-active, a.g-result:hover { background: var(--primary-wash); }
.g-result-title { font-weight: 500; line-height: 1.35; }
.g-result-sub { grid-column: 1; font-size: .83rem; color: var(--ink-muted); line-height: 1.4; }
.g-result .g-chip { grid-column: 2; grid-row: 1; align-self: start; }
.g-result.is-soon { cursor: default; }
.g-result.is-soon .g-result-title { color: var(--ink-soft); }
.g-result mark { background: var(--signal-wash); color: inherit; border-radius: 3px; padding: 0 .08em; box-shadow: inset 0 -2px 0 var(--terracotta); }
.g-results-empty { margin: .7rem; color: var(--ink-muted); font-size: .92rem; }
.g-results-all {
  display: block; margin-top: .25rem; padding: .6rem .7rem;
  border-top: 1px solid var(--hairline-soft);
  font-size: .88rem; font-weight: 500; text-decoration: none;
}
.g-results-all.is-active { background: var(--primary-wash); border-radius: 8px; }

/* ── Layout ───────────────────────────────────────────── */
.g-layout { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); }

.g-rail {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--rail-bg); color: var(--rail-ink);
  padding-block: 1rem 2rem;
  font-size: .9rem;
}
.g-rail a { color: var(--rail-ink); text-decoration: none; }
.g-rail a:hover { color: #fff; background: var(--rail-hover); }
.g-rail :focus-visible { outline-color: var(--rail-ink); }
.g-rail-home { display: block; margin: 0 .75rem .5rem; padding: .45rem .75rem; border-radius: 8px; font-weight: 600; }
.g-rail-home[aria-current="page"] { background: var(--rail-current); }
.g-rail-sec { margin: 0 .75rem; border-top: 1px solid var(--rail-line); }
.g-rail-sec summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem .75rem .55rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--rail-ink-soft);
}
.g-rail-sec summary::-webkit-details-marker { display: none; }
.g-rail-sec summary::after { content: ''; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.g-rail-sec[open] summary::after { transform: rotate(45deg); }
.g-rail-sec summary:hover { color: var(--rail-ink); }
.g-rail ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.g-rail li a, .g-rail-soon { display: block; padding: .38rem .75rem; border-radius: 8px; line-height: 1.35; }
.g-rail li a { color: var(--rail-ink-quiet); }
.g-rail li a[aria-current="page"] { background: var(--rail-current); color: #fff; font-weight: 600; }
.g-rail-soon { color: var(--rail-ink-soft); }
.g-rail-foot { margin: .5rem .75rem 0; padding-top: .6rem; border-top: 1px solid var(--rail-line); display: grid; }
.g-rail-foot a { display: block; padding: .45rem .75rem; border-radius: 8px; font-weight: 600; }
.g-rail-foot a[aria-current="page"] { background: var(--rail-current); }
.g-scrim { position: fixed; inset: var(--header-h) 0 0 0; background: var(--scrim); z-index: 35; }

.g-main { min-width: 0; padding: 2.5rem clamp(16px, 4vw, 3.5rem) 5rem; }
.g-main--article { display: grid; grid-template-columns: minmax(0, 43rem) 13.5rem; gap: 3.5rem; align-items: start; }
.g-main--home, .g-main--wide { max-width: 72rem; }
.g-wide { max-width: 50rem; }

/* ── Article ──────────────────────────────────────────── */
.g-crumbs { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .85rem; color: var(--ink-muted); }
.g-crumbs a { color: var(--ink-muted); text-decoration: none; }
.g-crumbs a:hover { color: var(--primary); text-decoration: underline; }
.g-meta { display: flex; gap: .9rem; margin: 1.6rem 0 .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); }
.g-meta span + span::before { content: '·'; margin-right: .9rem; color: var(--hairline); }
.g-article h1, .g-wide h1 {
  margin: 0;
  font-family: var(--font-voice); font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.85rem); line-height: 1.08; letter-spacing: -.01em;
}
.g-wide h1 { margin-top: 1.4rem; }
.g-lede { margin: .9rem 0 0; font-size: 1.16rem; line-height: 1.55; color: var(--ink-soft); max-width: 40rem; text-wrap: pretty; }

.g-body { margin-top: 2.25rem; }
.g-body > * + * { margin-top: 1.05rem; }
.g-body h2 { margin: 3rem 0 0; font-size: 1.38rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.g-body h3 { margin: 2rem 0 0; font-size: 1.06rem; font-weight: 600; }
.g-body h2 + *, .g-body h3 + * { margin-top: .6rem; }
.g-body p, .g-body li { max-width: 41rem; text-wrap: pretty; }
.g-body ul, .g-body ol { padding-left: 1.3rem; }
.g-body li + li { margin-top: .4rem; }
.g-body li > ul, .g-body li > ol { margin-top: .4rem; }
.g-body strong { font-weight: 600; }

/* A top-level numbered list in an article is a real sequence of steps. */
.g-body > ol { list-style: none; counter-reset: step; padding-left: 0; display: grid; gap: .9rem; }
.g-body > ol > li { counter-increment: step; position: relative; padding-left: 2.6rem; margin: 0; }
.g-body > ol > li::before {
  content: counter(step);
  position: absolute; left: 0; top: .05rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--primary); background: var(--primary-wash);
}

/* On-screen words, set as they appear in CLEO. */
.g-ui {
  font-weight: 600; font-size: .9em;
  padding: .06em .42em; border-radius: 6px;
  background: var(--paper-raised); border: 1px solid var(--hairline);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  white-space: normal;
}
/* CLEO's own sentences, in CLEO's voice. */
.g-voice {
  font-family: var(--font-voice); font-style: italic; font-size: 1.07em;
  background: var(--signal-wash); padding: .02em .28em; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.g-voice::before { content: '“'; }
.g-voice::after { content: '”'; }
.g-soon-link { border-bottom: 1px dashed var(--ink-muted); cursor: help; }

.g-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper-raised); }
.g-body table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.45; }
.g-body th {
  text-align: left; vertical-align: bottom;
  padding: .6rem .85rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--paper-sunk);
  border-bottom: 1px solid var(--hairline);
}
.g-body td { padding: .7rem .85rem; vertical-align: top; border-top: 1px solid var(--hairline-soft); min-width: 9rem; }
.g-body tbody tr:first-child td { border-top: 0; }
.g-body td:first-child { font-weight: 600; }

.g-callout {
  padding: 1rem 1.15rem 1.05rem;
  border-radius: var(--radius);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
}
.g-callout > * + * { margin-top: .5rem; }
.g-callout p, .g-callout li { max-width: none; }
.g-callout ol, .g-callout ul { padding-left: 1.2rem; }
.g-callout-label {
  display: flex; align-items: center; gap: .5rem;
  margin: 0;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted);
}
.g-callout-label::before { content: ''; width: .5rem; height: .5rem; border-radius: 2px; background: currentColor; }
.g-callout--rule { background: var(--primary-wash); border-color: transparent; }
.g-callout--rule .g-callout-label { color: var(--primary); }
.g-callout--rule p { font-weight: 500; }
.g-callout--example { background: var(--paper-sunk); border-color: transparent; }
.g-callout--good { background: var(--ochre-wash); border-color: transparent; }
.g-callout--good .g-callout-label { color: var(--ochre-ink); }
.g-callout--next { background: var(--sage-wash); border-color: transparent; }
.g-callout--next .g-callout-label { color: var(--sage-ink); }
.g-callout--try { border-style: dashed; border-color: var(--primary); }
.g-callout--try .g-callout-label { color: var(--primary); }
.g-callout--try .g-callout-label::before { border-radius: 50%; }

.g-pre { overflow-x: auto; padding: 1rem; background: var(--paper-sunk); border-radius: var(--radius); font-size: .85rem; line-height: 1.5; }
.g-pre code { background: none; border: 0; padding: 0; }

/* ── Figures and diagrams ─────────────────────────────── */
.g-figure { margin: 2rem 0; }
.g-figure figcaption { margin-top: .6rem; font-size: .85rem; color: var(--ink-muted); max-width: 41rem; }
.g-diagram { container-type: inline-size; padding: 1.1rem; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper-raised); }
/* Drawn at the article column's own width, so its text renders at reading size rather than shrinking. */
.gd-svg { display: block; width: 100%; height: auto; }
.gd-box { fill: var(--paper); stroke: var(--hairline); stroke-width: 1.2; }
.gd-box--customer { fill: var(--primary-wash); stroke: var(--primary); }
.gd-box--needs { fill: var(--attention-wash); stroke: var(--attention); }
.gd-box--noticed { fill: var(--signal-wash); stroke: var(--terracotta); }
.gd-box--focus { fill: var(--primary-wash); stroke: var(--primary); }
.gd-box--act { fill: var(--paper-raised); stroke: var(--ink-soft); }
/* Sizes are in the diagrams' 720-unit drawing. At a 1280px window the drawing renders about 596px wide,
   so 15.7 units ≈ 13px on screen and 19.5 ≈ 16px; wider windows render larger. */
.gd-title { fill: var(--ink); font-family: var(--font-ui); font-size: 19.5px; font-weight: 600; text-anchor: middle; }
.gd-title--voice { font-family: var(--font-voice); font-style: italic; font-weight: 500; font-size: 21.5px; }
.gd-sub { fill: var(--ink-muted); font-family: var(--font-ui); font-size: 15.7px; text-anchor: middle; }
.gd-label { fill: var(--ink-soft); font-family: var(--font-ui); font-size: 15.7px; font-style: italic; text-anchor: middle; }
.gd-line { fill: none; stroke: var(--taupe); stroke-width: 1.4; }
.gd-line--dash { stroke-dasharray: 5 4; }
.gd-arrowhead { fill: var(--taupe); }

/* In a narrow frame the same diagram is restacked to read top to bottom, in the same colours. */
.gd-stack { display: none; gap: .5rem; }
@container (max-width: 560px) {
  .gd-svg { display: none; }
  .gd-stack { display: grid; }
}
.gd-node { padding: .6rem .85rem; border: 1.2px solid var(--hairline); border-radius: 10px; background: var(--paper); }
.gd-node p { margin: 0; }
.gd-node-title { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.gd-node-title--voice { font-family: var(--font-voice); font-style: italic; font-weight: 500; font-size: 1.12rem; }
.gd-node-sub { margin-top: .1rem; font-size: .88rem; line-height: 1.35; color: var(--ink-muted); }
.gd-node--customer, .gd-node--focus { background: var(--primary-wash); border-color: var(--primary); }
.gd-node--needs { background: var(--attention-wash); border-color: var(--attention); }
.gd-node--noticed { background: var(--signal-wash); border-color: var(--terracotta); }
.gd-node--act { background: var(--paper-raised); border-color: var(--ink-soft); }
.gd-rel { margin: .3rem 0 0 .15rem; font-size: .88rem; font-style: italic; color: var(--ink-soft); }
.gd-tree { list-style: none; margin: -.5rem 0 0 1rem; padding: .55rem 0 0 1rem; border-left: 1.5px solid var(--taupe); display: grid; gap: .55rem; }
.gd-tree .gd-tree { margin-top: .05rem; }
.gd-tree > li { position: relative; }
.gd-tree > li::before { content: ''; position: absolute; left: -1rem; top: 1.3rem; width: .85rem; border-top: 1.5px solid var(--taupe); }
.gd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.gd-down { position: relative; height: 1.25rem; }
.gd-down::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 5px; border-left: 1.5px solid var(--taupe); }
.gd-down::after { content: ''; position: absolute; left: calc(50% - 4px); bottom: 0; border-left: 4.75px solid transparent; border-right: 4.75px solid transparent; border-top: 6px solid var(--taupe); }
.gd-loop { margin: .15rem 0 0; text-align: center; font-size: .88rem; font-style: italic; color: var(--ink-soft); }

/* A prepared-card illustration: CLEO's voice on the head, the software's controls below. */
.g-mock { padding: 1.25rem; border-radius: 16px; background: var(--paper-sunk); display: grid; gap: .9rem; }
.g-mock-you {
  justify-self: end; max-width: 26rem;
  margin: 0; padding: .6rem .9rem;
  border-radius: 14px 14px 4px 14px;
  background: var(--primary); color: #fff; font-size: .95rem;
}
:root[data-theme="dark"] .g-mock-you { color: #14181F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-mock-you { color: #14181F; } }
.g-mock-card { max-width: 30rem; padding: 1rem 1.1rem; border-radius: 12px; background: var(--paper-raised); border: 1px solid var(--hairline); display: grid; gap: .35rem; }
.g-mock-head { margin: 0; display: flex; align-items: center; gap: .5rem; font-family: var(--font-voice); font-style: italic; font-size: 1.08rem; }
.g-mock-head::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--terracotta); }
.g-mock-who { margin: .2rem 0 0; font-weight: 600; }
.g-mock-what { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.g-mock-foot { margin: .5rem 0 0; font-size: .85rem; color: var(--ink-muted); }
.g-mock-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.g-mock-btn { padding: .45rem .85rem; border-radius: 8px; font-size: .88rem; font-weight: 600; border: 1px solid var(--hairline); color: var(--ink); background: var(--paper-raised); }
.g-mock-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
:root[data-theme="dark"] .g-mock-btn--primary { color: #14181F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-mock-btn--primary { color: #14181F; } }

/* ── Article end matter ───────────────────────────────── */
.g-path { margin-top: 3.5rem; padding: 1rem; border-radius: 14px; background: var(--paper-sunk); }
.g-path-head { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.g-path-steps { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.g-step { display: grid; gap: .1rem; padding: .75rem .9rem; border-radius: 10px; background: var(--paper-raised); border: 1px solid var(--hairline); text-decoration: none; color: var(--ink); }
.g-step:hover { border-color: var(--primary); color: var(--ink); }
.g-step--next { text-align: right; }
.g-step--next .g-chip { justify-self: end; }
.g-step-word { font-size: .78rem; color: var(--ink-muted); }
.g-step-title { font-weight: 600; line-height: 1.3; }
.g-step.is-soon { color: var(--ink-soft); background: transparent; border-style: dashed; }
.g-step.is-soon .g-chip { margin: .3rem 0 0; justify-self: start; }
.g-step--next.is-soon .g-chip { justify-self: end; }

.g-related { margin-top: 3rem; }
.g-related-title { margin: 0 0 .9rem; font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); }
.g-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.g-card { padding: .9rem 1rem; border: 1px solid var(--hairline); border-radius: 12px; background: var(--paper-raised); }
.g-card.is-soon { background: transparent; border-style: dashed; }
.g-card-sec { margin: 0; font-size: .72rem; color: var(--ink-muted); }
.g-card-title { margin: .15rem 0 0; font-weight: 600; line-height: 1.3; }
.g-card-title a { color: var(--ink); text-decoration: none; }
.g-card-title a:hover { color: var(--primary); text-decoration: underline; }
.g-card.is-soon .g-card-title { color: var(--ink-soft); }
.g-card-sum { margin: .35rem 0 0; font-size: .87rem; color: var(--ink-muted); line-height: 1.45; }
.g-article-foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--hairline); font-size: .82rem; color: var(--ink-muted); }

.g-toc { position: sticky; top: calc(var(--header-h) + 2.5rem); font-size: .85rem; }
.g-toc-title { margin: 0 0 .6rem; font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); }
.g-toc ul { list-style: none; margin: 0; padding: 0 0 0 .8rem; border-left: 1px solid var(--hairline); display: grid; gap: .45rem; }
.g-toc a { color: var(--ink-muted); text-decoration: none; line-height: 1.35; display: block; }
.g-toc a:hover { color: var(--primary); }
.g-toc a[aria-current="true"] { color: var(--ink); font-weight: 600; }

/* ── Home ─────────────────────────────────────────────── */
.g-hero { padding-block: 1.5rem 1rem; max-width: 46rem; }
.g-eyebrow { margin: 0 0 .6rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.g-hero h1 { margin: 0; font-family: var(--font-voice); font-weight: 500; font-size: clamp(2.3rem, 1.5rem + 3vw, 3.4rem); line-height: 1.04; letter-spacing: -.015em; }
.g-hero .g-lede { margin-bottom: 1.6rem; }
.g-hero .g-search { max-width: 40rem; justify-self: start; }
.g-hero-try { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1rem 0 0; font-size: .87rem; color: var(--ink-muted); }
.g-try {
  font: inherit; font-size: .85rem; color: var(--ink-soft); cursor: pointer;
  background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 999px;
  padding: .25rem .75rem;
}
.g-try:hover { border-color: var(--primary); color: var(--primary); }

.g-home-sec { margin-top: 3.75rem; }
.g-home-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; margin-bottom: 1.1rem; }
.g-home-head h2 { margin: 0; font-size: 1.4rem; font-weight: 600; }
.g-home-head p { margin: 0; color: var(--ink-muted); font-size: .93rem; max-width: 36rem; }

.g-pathcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; align-items: start; }
.g-pathcard { padding: 1.3rem 1.35rem 1.1rem; border-radius: 16px; background: var(--paper-raised); border: 1px solid var(--hairline); }
.g-pathcard-time { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.g-pathcard h3 { margin: .25rem 0 0; font-family: var(--font-voice); font-weight: 500; font-size: 1.6rem; line-height: 1.15; }
.g-pathcard-sum { margin: .35rem 0 0; color: var(--ink-muted); font-size: .93rem; }
.g-pathcard-steps { list-style: none; counter-reset: s; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--hairline-soft); }
.g-pathcard-steps li {
  counter-increment: s;
  display: flex; align-items: baseline; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--hairline-soft);
  font-size: .93rem;
}
.g-pathcard-steps li:last-child { border-bottom: 0; }
.g-pathcard-steps li::before { content: attr(data-step); min-width: 1.3rem; font-size: .78rem; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.g-pathcard-steps a { font-weight: 500; text-decoration: none; }
.g-pathcard-steps a:hover { text-decoration: underline; }
.g-pathcard-steps li.is-soon { color: var(--ink-muted); }
.g-pathcard-steps .g-chip { margin-left: auto; }

.g-qlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); column-gap: 2rem; }
.g-q { display: grid; gap: .1rem; padding: .7rem 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink); height: 100%; }
a.g-q:hover .g-q-text { color: var(--primary); text-decoration: underline; }
.g-q-text { font-weight: 500; line-height: 1.4; }
.g-q-page { font-size: .83rem; color: var(--ink-muted); }
.g-q.is-soon .g-q-text { color: var(--ink-soft); font-weight: 400; }

.g-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.g-tile { display: flex; flex-direction: column; padding: 1.1rem 1.15rem .9rem; border-radius: 14px; background: var(--paper-raised); border: 1px solid var(--hairline); }
.g-tile h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.g-tile > p { margin: .35rem 0 0; font-size: .9rem; color: var(--ink-muted); line-height: 1.45; }
.g-tile-links { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: .9rem; }
.g-tile-links a { font-weight: 500; }
.g-tile-foot { display: flex; justify-content: space-between; margin-top: auto !important; padding-top: .9rem; font-size: .78rem; color: var(--ink-muted); }

/* ── How do I… / Search pages ─────────────────────────── */
.g-qgroup { margin-top: 2.5rem; }
.g-qgroup h2 { margin: 0 0 .3rem; font-size: 1.15rem; font-weight: 600; }
.g-page-howto .g-qlist { grid-template-columns: 1fr; }
.g-search-page-form { position: relative; margin-top: 1.5rem; max-width: 40rem; }
.g-search-page-form .g-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ink-muted); }
.g-search-page-form input {
  width: 100%; height: 52px; padding: 0 1rem 0 2.9rem;
  font: inherit; font-size: 1.05rem; color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 12px;
}
.g-search-page-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-wash); }
.g-search-page-count { margin: 1.2rem 0 0; color: var(--ink-muted); font-size: .9rem; }
.g-search-page-results { margin-top: .5rem; }
.g-search-page-results h2 { margin: 2rem 0 .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); }
.g-search-page-results .g-results-list { list-style: none; margin: 0; padding: 0; }
.g-search-page-results .g-result { padding: .8rem .2rem; border-radius: 0; border-bottom: 1px solid var(--hairline); }
.g-search-page-results a.g-result:hover { background: transparent; }
.g-search-page-results a.g-result:hover .g-result-title { color: var(--primary); text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1180px) {
  .g-main--article { grid-template-columns: minmax(0, 43rem); }
  .g-toc { display: none; }
}
@media (max-width: 900px) {
  .g-layout { grid-template-columns: minmax(0, 1fr); }
  .g-menu-btn { display: inline-grid; }
  .g-header { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .5rem; }
  .g-rail {
    position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 40;
    width: min(20rem, 86vw); height: auto;
    transform: translateX(-100%); visibility: hidden;
    /* Closing: slide out, then hide. */
    transition: transform .2s ease, visibility 0s linear .2s;
    box-shadow: var(--shadow);
  }
  /* Opening: visible at once, so focus can move into the rail while it slides in. */
  .g-rail[data-open] { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
}
@media (max-width: 720px) {
  .g-header > .g-search { display: none; }
  .g-search-btn { display: inline-grid; }
  .g-header[data-search-open] { grid-template-columns: minmax(0, 1fr) auto; }
  .g-header[data-search-open] > .g-menu-btn,
  .g-header[data-search-open] > .g-brand,
  .g-header[data-search-open] .g-theme-btn { display: none; }
  .g-header[data-search-open] > .g-search { display: block; max-width: none; }
  .g-header .g-kbd { display: none; }
  .g-main { padding-top: 1.75rem; }
  .g-path-steps { grid-template-columns: 1fr; }
  .g-step--next { text-align: left; }
  .g-step--next .g-chip, .g-step--next.is-soon .g-chip { justify-self: start; }
  .g-qlist { grid-template-columns: 1fr; }
  .g-diagram { padding: 1rem; }
  /* Three columns must fit a 375px screen without the table scrolling inside its own frame:
     3 × 6.5rem = 312px inside a 341px reading column. */
  .g-body td { min-width: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .g-header, .g-rail, .g-scrim, .g-toc, .g-path, .g-related { display: none !important; }
  .g-layout, .g-main--article { display: block; }
  body { background: #fff; }
}

/* Screenshots of CLEO itself: framed, never wider than the column, readable in both themes. */
.g-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: 12px; background: #F7F4EE; }
.g-shot--phone img { max-width: 300px; }