/* SolaryxDev content pages: every page build-site.py writes (html.cp-page). Loaded after site.css and
   uses its tokens, buttons, tags, chrome, footer and contact form; nothing here restyles the home.

   Each page is an Astra article (openai.com/index/gpt-6-astra, the engine's scroll mode in
   field/boot.js): one natively scrolling page over the fixed particle field (field/field.css).
     the title     the page opens straight on its own words, right under the header band: crumbs,
                   H1, line, actions, centred, and the start of the article in the first screen. No
                   hero, no picture of its own (DECISIONS 393).
     the orrery    behind every page the stars form one solar system, the same on each, so moving
                   between pages is continuous (.cp-orrery: a fixed box the engine draws it in,
                   field/shaders.js orreryAt). It sits beside the text, never on it, turning with the
                   clock and the page; the rest of the field lies on the rails either side of the text
                   and moves with the page as on the home (drift, sink, swirl, the page's speed), and
                   parts round it. Without script, or where the stars cannot run, the night sky stands
                   in.
     the article   the text column ([data-astra-column], 676 px as Astra's prose): the stars keep clear
                   of its text (on narrow screens they show only between its blocks). Cards, figures and
                   tables step out to the wide column (909 px), tables of four or more columns to the
                   media column (1143), both capped by the space the section index leaves on wide
                   screens.
     the close     the band (a heading and two actions), then the footer, which opens on a horizon
                   (site.css .foot-horizon): the stars leave the orrery and lay one line of light
                   across the view as it comes up. The band follows <main>, outside it: the page is
                   held at its end while the footer comes up over it, and the band rises with the
                   footer, whole (motion.js).
   Rhythm (Astra): 120 px between blocks of the article (80 on phones), 24 px between paragraphs and
   under a heading. Shapes follow site.css: crisp rounded rectangles, every radius under half its
   element's height; markers are small squares. */

/* ── tokens for long-form reading ───────────────────────────────────────────────────────────── */
.cp-page {
  --cp-text: rgba(245, 245, 242, 0.8);         /* running text: 12:1 on black */
  --cp-fs: calc(17px * var(--z));              /* Astra's p1: 17 / 28, stepped up on wide screens (site.css --z) */
  --cp-lh: calc(28px * var(--z));
  --cp-prose: calc(676px * var(--z));          /* Astra's columns at 1440: prose, wide, media */
  --cp-wide: 909px;
  --cp-media: 1143px;
  --cp-measure: var(--cp-prose);
  --cp-h1: calc(clamp(32px, 26.37px + 1.502vw, 48px) * var(--zd));   /* Astra's title: 32 at 375 to 48 at 1440, then up */
  --cp-h2: calc(clamp(24px, 21.89px + 0.563vw, 30px) * var(--zd));   /* Astra's section heading: 24 to 30, then up */
  --cp-gap: calc(120px * var(--z));            /* between the blocks of the article */
  --cp-sec: var(--cp-gap);
  --cp-block: 40px;                            /* before a figure, table or card group */
  --cp-toc-w: 200px;
  --cp-anchor: calc(var(--pg-top) + 20px);     /* where a linked section lands, under the header band */
}
/* native scrolling, as Astra: scroll-behavior stays auto, so every scroll the engine reads is the page's own */

/* ── frame ──────────────────────────────────────────────────────────────────────────────────── */
.cp {
  position: relative;
  z-index: 10;
  display: block;
  color: var(--ink);
}
/* the gap under the article's last block belongs to the page, so the page stops (motion.js holds it) just as
   the band after it comes up the view */
.cp-body {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--grid) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--cp-gap) var(--gutter);
  padding-top: max(var(--cp-gap), calc(var(--pg-top) + 32px));   /* the page opens right under the header band */
}
.cp-body > * + * { margin-top: var(--cp-gap); }

/* ── the orrery: the stars' figure behind every page ───────────────────────────────────────────
   A box fixed in the view that the engine draws its orrery in (field/page.js, a fixed scene): the sun
   at the box's centre, the outer orbit's radius half its side, each orbit an ellipse 0.43 as tall as
   it is wide. Beside the text, never on it. From 1024 px it sits in the margin right of the text
   column, the sun a quarter of that margin in from the edge and the outer orbit reaching past it, at
   mid-height. Narrower, the text spans the screen and comes first: the orrery lies behind it, low on
   the right and partly past the edge, fainter (--astra-scene-light), and shows only between the
   page's blocks, as the rails do, never pushing the text down. The box itself draws nothing. */
.cp-orrery {
  --orb-r: 46vw;
  --orb-x: calc(100vw - 0.3 * var(--orb-r));
  --orb-y: 62svh;
  --astra-scene-light: 0.8;
  position: fixed;
  left: calc(var(--orb-x) - var(--orb-r));
  top: calc(var(--orb-y) - var(--orb-r));
  width: calc(2 * var(--orb-r));
  height: calc(2 * var(--orb-r));
  pointer-events: none;
}
@media (min-width: 1024px) {
  .cp-orrery {
    --orb-m: calc((100vw - var(--cp-prose)) / 2);
    --orb-x: calc(100vw - 0.25 * var(--orb-m));
    --orb-y: 54svh;
    --orb-r: min(calc(0.75 * var(--orb-m) - 24px), 46svh);
    --astra-scene-light: 1;
  }
}
/* the stars reach the top of the view from the first screen, so the header's own band (site.css
   body::before, otherwise shown once the page has scrolled) is there from the start */
html.cp-page body::before { opacity: 1; }
/* the still poster is the home's mark, never shown here: without script, or where the stars cannot
   run, the night sky stands in (the backdrop's ::after, field.css) */
.cp-page .astra-poster { display: none; }
html.cp-page:not(.js) .astra-backdrop,
html.cp-page[data-astra-static="true"] .astra-backdrop { --astra-sky: 1 !important; }

/* ── the title block ────────────────────────────────────────────────────────────────────────── */
.cp-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--cp-wide);
  margin-inline: auto;
  text-align: center;
}
.cp-crumbrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; margin-bottom: 24px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85); }
.cp-crumbrow .tag { background: rgba(0, 0, 0, 0.55); }
.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 4px; }
.crumbs li { display: inline-flex; align-items: center; font: 400 13px/1.3 var(--font-ui); color: var(--ink-3); }
.crumbs li + li::before {
  content: ""; flex: none; width: 3px; height: 3px; margin: 0 11px; border-radius: 0.5px;
  background: rgba(255, 255, 255, 0.4);
}
.crumbs a { color: var(--ink-3); transition: color 0.18s; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); }

.cp-h1 {
  font: 500 var(--cp-h1)/1.16 var(--font-ui);
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 19em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.cp-lede {
  margin-top: 20px;
  max-width: 34em;
  font-size: clamp(17px, 15.6px + 0.36vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  text-wrap: balance;
}
.cp-meta { margin-top: 16px; font: 400 13px/1.45 var(--font-ui); color: var(--ink-3); }
.cp-notice {
  margin-top: 18px; max-width: 34em; padding: 10px 14px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--fill);
  font: 400 14px/1.5 var(--font-ui); color: var(--ink-2);
}
.cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cp-actions--hero { justify-content: center; margin-top: 32px; }
.cp-actions .btn { flex: none; }

/* ── the article: the text column, the section index beside it ──────────────────────────────── */
.cp-toc { display: none; }
.cp-col { min-width: 0; container-type: inline-size; }
.cp-flow {
  --grid-gap: var(--col-gap);                  /* the engine keeps this much clear either side */
  --cp-w: min(var(--cp-wide), 100cqw);
  --cp-m: min(var(--cp-media), 100cqw);
  max-width: var(--cp-prose);
  margin-inline: auto;
}
/* the section index: sticky beside the text on wide screens, over the left rail */
@media (min-width: 1280px) {
  .cp-layout { display: grid; grid-template-columns: var(--cp-toc-w) minmax(0, 1fr) var(--cp-toc-w); column-gap: var(--col-gap); align-items: start; }
  .cp-col { grid-column: 2; grid-row: 1; }
  .cp-toc {
    display: block;
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--cp-anchor) + 6px - var(--nav-pad));
    max-height: calc(100svh - var(--cp-anchor) - 34px + var(--nav-pad));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* the soft backing (site.css) spreads over this padding; the negative margins keep the text where it was */
    margin: calc(6px - var(--nav-pad)) calc(-1 * var(--nav-pad)) 0;
    padding: var(--nav-pad) calc(4px + var(--nav-pad)) var(--nav-pad) var(--nav-pad);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  }
}
.cp-toc-h { margin-bottom: 12px; font: 500 12.5px/1.3 var(--font-ui); color: var(--ink-2); }
.cp-toc ol { border-left: 1px solid var(--line-2); }
.cp-toc a {
  position: relative;
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 15px;
  border-left: 1px solid transparent;
  font: 400 13px/1.42 var(--font-ui);
  color: var(--ink-2);
  text-wrap: pretty;
  transition: color 0.18s, border-color 0.18s;
}
.cp-toc a:hover { color: var(--ink); }
.cp-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--ink); }
.cp-toc a:focus-visible { outline-offset: -2px; border-radius: 4px; }

/* the wide and media columns: centred on the text column, never past the space it has */
.cp-sec:not(.cp-sec--boxed) > :is(.cells, .cards2, .proofs, .dir, .chain, .quote, .fig:not(.calc, .fig-radar), .tbl-wrap:not(.tbl-wrap--kv, .tbl-wrap--wide)),
.cp-flow > .cp-contact { margin-inline: calc((100% - var(--cp-w)) / 2); }
.cp-sec:not(.cp-sec--boxed) > .tbl-wrap--wide { margin-inline: calc((100% - var(--cp-m)) / 2); }

/* sections */
.cp-flow > * + * { margin-top: var(--cp-sec); }
.cp-flow > .cp-contact { margin-top: 48px; }
[id] { scroll-margin-top: var(--cp-anchor); }
.cp-sec > * + * { margin-top: 24px; }
.cp-sec > .cp-h2 + * { margin-top: 24px; }
.cp-sec > :is(.fig, .tbl-wrap, .cells, .cards2, .proofs, .steps, .chain, .faqs, .dir, .rows, .cp-aside, .quote) { margin-top: var(--cp-block); }
.cp-sec > :is(.fig, .tbl-wrap) + .cp-small { margin-top: 12px; }
.cp-h2 {
  font: 500 var(--cp-h2)/1.32 var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.cp-h2 .tag { vertical-align: 0.3em; margin-left: 10px; }
.cp-sub { font-size: 18px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* running text */
.cp-flow :is(p, li) { text-wrap: pretty; }
.cp-sec > p, .cp-sec > .cp-list, .cp-answer-a, .faq-a, .legal > :is(p, ul, ol) {
  max-width: var(--cp-measure);
}
.cp-sec > p, .cp-list, .faq-a p, .legal p, .legal li {
  font-size: var(--cp-fs);
  line-height: var(--cp-lh);
  letter-spacing: -0.01em;
  color: var(--cp-text);
}
.cp-flow strong { font-weight: 600; color: var(--ink); }
.cp-flow :is(p, li, td, th, caption, figcaption, dd, dt) a:not([class], .dir a, .rows a) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.cp-flow :is(p, li, td, th, caption, figcaption, dd, dt) a:not([class], .dir a, .rows a):hover { text-decoration-color: #fff; }

/* lists: a small square per item, a lead phrase in full ink */
.cp-list { display: grid; gap: 10px; }
.cp-list > li { position: relative; padding-left: 22px; }
.cp-list > li::before {
  content: ""; position: absolute; left: 3px; top: calc(0.84em - 2.5px);
  width: 5px; height: 5px; border-radius: 1px; background: rgba(245, 245, 242, 0.42);
}
.cp-list--ol { counter-reset: cpl; }
.cp-list--ol > li { counter-increment: cpl; padding-left: 30px; }
.cp-list--ol > li::before {
  content: counter(cpl, decimal-leading-zero); top: 0.26em; left: 0; width: auto; height: auto; border-radius: 0; background: none;
  font: 500 12px/1.4 var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.li-lead { font-weight: 600; color: var(--ink); }

/* notes, asides, the boxed section, the pull quote */
.cp-note {
  max-width: var(--cp-measure);
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--fill);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.cp-small { max-width: var(--cp-measure); font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.cp-small a { color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.28); text-underline-offset: 3px; }
.cp-sec--boxed {
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.cp-aside {
  max-width: 44em;
  padding: 24px 26px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
}
.cp-aside-t { font: 600 17px/1.3 var(--font-ui); letter-spacing: -0.015em; color: var(--ink); }
.cp-aside > p:not([class]) { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.cp-aside .cp-actions { margin-top: 20px; }
.cp-aside .cp-small { margin-top: 16px; }
.quote { margin: 0; padding: 6px 0 6px 26px; border-left: 2px solid var(--ink); }
.quote blockquote { margin: 0; }
.quote blockquote p { font: 500 clamp(22px, 17px + 1.1vw, 30px)/1.28 var(--font-ui); letter-spacing: -0.024em; color: var(--ink); text-wrap: balance; }
.quote figcaption { margin-top: 14px; font-size: 13px; color: var(--ink-3); }

/* text links: the words and an underline that brightens on hover (no arrows, 2026-09-25) */
.cp-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.cp-more {
  display: inline-flex; align-items: center;
  font: 500 14.5px/1.35 var(--font-ui); letter-spacing: -0.008em; color: var(--ink);
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 5px;
  transition: text-decoration-color 0.2s;
}
.cp-more:hover { text-decoration-color: #fff; }

/* ── the direct answer ──────────────────────────────────────────────────────────────────────── */
.cp-answer {
  position: relative;
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px) clamp(24px, 2.8vw, 36px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.cp-answer > * + * { margin-top: 16px; }
.cp-q {
  font: 500 clamp(15.5px, 14.4px + 0.28vw, 18px)/1.4 var(--font-ui);
  letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 40em;
}
.cp-answer-a {
  font: 400 clamp(18px, 16.3px + 0.44vw, 22px)/1.52 var(--font-ui);
  letter-spacing: -0.016em;
  color: var(--ink);
}
.cp-answer .cp-note { background: rgba(255, 255, 255, 0.03); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.facts li {
  display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box;
  height: 30px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 6px;
  font: 500 13px/1 var(--font-ui); color: var(--ink-2); white-space: nowrap;
}
.facts li::before { content: ""; width: 4px; height: 4px; border-radius: 1px; background: var(--ink); }

/* ── cells, cards, proofs, stats ────────────────────────────────────────────────────────────── */
.cells, .cards2, .rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
/* no card left alone at the end: 4 as two by two, 5 as two over three, 7 as three over four,
   8 as two columns in the text (four across the full width for Related) */
@media (min-width: 720px) {
  :is(.cells, .cards2, .rels):has(> :nth-child(4):last-child),
  :is(.cells, .cards2):has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rels:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :is(.cells, .cards2, .rels):has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :is(.cells, .cards2, .rels):has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  :is(.cells, .cards2, .rels):has(> :nth-child(5):last-child) > :nth-child(-n + 2) { grid-column: span 3; }
  :is(.cells, .cards2, .rels):has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  :is(.cells, .cards2, .rels):has(> :nth-child(7):last-child) > * { grid-column: span 3; }
  :is(.cells, .cards2, .rels):has(> :nth-child(7):last-child) > :nth-child(-n + 3) { grid-column: span 4; }
}
.cell, .card2, .proof, .stat, .ct, .rel {
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--fill);
}
.cell { padding: 18px 20px 20px; }
.cell-t { font: 600 15.5px/1.35 var(--font-ui); letter-spacing: -0.012em; color: var(--ink); }
.cell-x { margin-top: 6px; font-size: 14.5px; line-height: 1.58; color: var(--ink-2); }
.cell-x--solo { margin-top: 0; color: var(--cp-text); }

.card2 { position: relative; display: flex; flex-direction: column; padding: 20px 22px 22px; transition: background-color 0.2s, border-color 0.2s; }
.card2-t { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font: 600 16px/1.35 var(--font-ui); letter-spacing: -0.014em; color: var(--ink); }
.card2-t .tag { margin-top: 1px; }
.card2-x { margin-top: 8px; font-size: 14.5px; line-height: 1.58; color: var(--ink-2); }
.card2 .cp-list { margin-top: 14px; gap: 6px; }
.card2 .cp-list > li { font-size: 14px; line-height: 1.55; }
.card2 .cp-links { margin-top: auto; padding-top: 16px; }
.card2--link:hover { background: var(--fill-2); border-color: var(--line-2); }
.card2-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card2-link:focus-visible { outline: none; }
.card2--link:has(.card2-link:focus-visible) { outline: 2px solid rgba(255, 255, 255, 0.92); outline-offset: 2px; }

.proofs { display: grid; gap: 12px; }
.proof { padding: 24px 26px 24px; }
.proof-t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font: 600 18px/1.3 var(--font-ui); letter-spacing: -0.018em; color: var(--ink); }
.proof-x { margin-top: 10px; max-width: var(--cp-measure); font-size: 15px; line-height: 1.62; color: var(--cp-text); }
.stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.stack li {
  display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0 8px;
  border: 1px solid var(--line-2); border-radius: var(--r-tag);
  font: 500 11.5px/1 var(--font-mono); color: var(--ink-2);
}
.proof .cp-links { margin-top: 18px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 0; }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 20px 22px 22px; }
.stat dd { margin: 0; font: 500 clamp(26px, 20px + 1.2vw, 36px)/1.05 var(--font-ui); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat dt { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
/* a published figure: its source under the line, linked to the entry in Sources */
.stat .stat-src { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.cp-flow .stat .stat-src a { color: inherit; text-decoration-color: rgba(255, 255, 255, 0.24); }
.cp-flow .stat .stat-src a:hover { color: var(--ink-2); text-decoration-color: rgba(255, 255, 255, 0.6); }

/* ── steps and the chain ────────────────────────────────────────────────────────────────────── */
.cp .steps { counter-reset: cps; display: grid; gap: 0; padding: 0; }
.cp .steps::before { display: none; }
.cp .steps > li {
  counter-increment: cps;
  position: relative;
  display: block;
  padding: 0 0 26px 50px;
}
.cp .steps > li:last-child { padding-bottom: 0; }
.cp .steps > li::before {
  content: counter(cps, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; box-sizing: border-box;
  width: 30px; height: 26px; border: 1px solid var(--line-2); border-radius: 6px; background: #000;
  font: 500 11.5px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums;
}
.cp .steps > li::after {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: 6px; width: 1px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06));
}
.cp .steps > li:last-child::after { display: none; }
.step-t { font: 600 16.5px/1.4 var(--font-ui); letter-spacing: -0.014em; color: var(--ink); padding-top: 2px; }
.step-x { margin-top: 6px; max-width: var(--cp-measure); font-size: 15.5px; line-height: 1.62; color: var(--cp-text); }
.step-x--solo { margin-top: 0; padding-top: 2px; }
.step-y {
  margin-top: 12px; max-width: var(--cp-measure); padding: 11px 14px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--fill);
  font-size: 14.5px; line-height: 1.55; color: var(--ink);
}
.step-y span { display: block; margin-bottom: 3px; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-3); }

.chain { counter-reset: chn; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.chain > li {
  counter-increment: chn;
  position: relative;
  box-sizing: border-box;
  padding: 44px 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--fill);
}
.chain > li::before {
  content: counter(chn, decimal-leading-zero);
  position: absolute; left: 16px; top: 16px;
  font: 500 11.5px/1 var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
/* the join between two links of the chain: a hairline across the gap */
.chain > li:not(:last-child)::after {
  content: ""; position: absolute; top: 22px; right: -13px; z-index: 1;
  width: 12px; height: 1px;
  background: rgba(255, 255, 255, 0.5);
  transform-origin: 0 50%;
}
.chain .step-t { padding: 0; font-size: 15.5px; }
.chain .step-x { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* ── tables: a frame on wide screens; on phones each row becomes a card (below) ─────────────── */
.tbl-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.018);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.tbl-wrap:focus-visible { outline-offset: 2px; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.55; }
.tbl[data-cols="3"] { min-width: 540px; }
.tbl[data-cols="4"], .tbl[data-cols="5"], .tbl[data-cols="6"] { min-width: 680px; }
.tbl caption {
  caption-side: top; padding: 15px 18px 14px; border-bottom: 1px solid var(--line);
  text-align: left; font-size: 13px; line-height: 1.5; color: var(--ink-3);
}
.tbl th, .tbl td { padding: 13px 18px; text-align: left; vertical-align: top; }
.tbl thead th {
  padding-top: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  font: 500 12.5px/1.4 var(--font-ui); color: var(--ink-2);
}
.tbl tbody tr + tr > * { border-top: 1px solid var(--line); }
.tbl tbody th { font-weight: 500; color: var(--ink); }
.tbl td { color: var(--ink-2); }
.tbl td strong { color: var(--ink); }
.tbl--kv th { width: 30%; font-weight: 400; color: var(--ink-3); }
.tbl--kv td { color: var(--ink); }
.tbl-wrap--kv { max-width: 44em; }

/* ── figures ────────────────────────────────────────────────────────────────────────────────── */
.fig { margin: 0; }
.fig > figcaption, .fig-we > figcaption { margin-top: 12px; max-width: var(--cp-measure); font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* worked example: a quiet console */
.we {
  padding: 18px 22px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.we > * + * { margin-top: 12px; }
.we-title { display: flex; align-items: center; gap: 9px; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-3); }
.we-title::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 8px rgba(255, 255, 255, 0.55); }
.we-lines { display: grid; }
.st {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--ink);
}
.we-title + .we-lines .st:first-child { border-top: 0; padding-top: 4px; }
.st-ic { width: 15px; height: 15px; }
/* a line without an icon in a list that has them keeps the text column */
.we-lines:has(.st-ic) .st:not(:has(.st-ic))::before { content: ""; flex: none; width: 15px; }
.st--done .st-ic { color: var(--ink); }
.st--next { color: var(--ink); }
.st--next .st-ic { color: var(--ink-2); }
.st--wait { color: var(--ink-2); }
.st--wait .st-ic { color: var(--ink-3); }
.st-a { flex: 1 1 auto; min-width: 0; }
.st-b { flex: none; margin-left: auto; font: 500 12.5px/1.3 var(--font-mono); color: var(--ink-2); }
.we-said { display: flex; align-items: baseline; gap: 12px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.we-said > span:last-child::before { content: "\201C"; }
.we-said > span:last-child::after { content: "\201D"; }
.we-who {
  flex: none; display: inline-flex; align-items: center; box-sizing: border-box; height: 22px; padding: 0 7px;
  border: 1px solid var(--line-2); border-radius: var(--r-tag); font: 500 11px/1 var(--font-mono); color: var(--ink-3);
  transform: translateY(-2px);
}
.we-tbl { overflow-x: auto; }
.we-tbl table { width: 100%; min-width: 380px; border-collapse: collapse; font-size: 14px; }
.we-tbl th, .we-tbl td { padding: 10px 12px 10px 0; text-align: left; border-top: 1px solid var(--line); }
.we-tbl thead th { border-top: 0; font: 500 12px/1.3 var(--font-ui); color: var(--ink-3); }
.we-tbl tbody th { font-weight: 500; color: var(--ink); }
.we-tbl .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.we-tbl .stt { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.we-tbl .stt .icon { width: 13px; height: 13px; }
.we-tbl tr.q .stt { color: var(--ink-3); }
.we-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.we-stats div { display: flex; flex-direction: column-reverse; }
.we-stats dt { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.we-stats dd { margin: 0; font: 500 20px/1.2 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.we--qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; padding: 12px; }
.we--qa > * + * { margin-top: 0; }
.qa { padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.35); }
.qa-q { font: 500 15px/1.45 var(--font-ui); color: var(--ink); }
.qa-a { margin-top: 10px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.4); font-size: 14.5px; line-height: 1.58; color: var(--ink-2); }
.qa--declined .qa-a { border-left-style: dashed; border-left-color: rgba(255, 255, 255, 0.28); }
.qa-src { margin-top: 12px; font: 500 12px/1.4 var(--font-mono); color: var(--ink-3); }

/* countdowns: computed in the browser (js/page.js), at Gulf Standard Time */
.cts--2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.ct { display: flex; flex-direction: column; padding: 20px 22px 22px; }
.ct[hidden] { display: none; }
/* the long list: one row per date, the count on the left, the date on the right */
.cts:not(.cts--2) { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--fill); }
.cts:not(.cts--2) .ct {
  display: grid; grid-template-columns: 7.5ch minmax(0, 1fr) auto; grid-template-areas: "n l d" "n x d";
  align-items: baseline; column-gap: 20px; padding: 18px 22px 19px;
  border: 0; border-radius: 0; background: none;
}
.cts:not(.cts--2) .ct + .ct { border-top: 1px solid var(--line); }
.cts:not(.cts--2) .ct-n { grid-area: n; font-size: clamp(28px, 22px + 1vw, 36px); }
.cts:not(.cts--2) .ct-l { grid-area: l; margin-top: 0; font-size: 15px; }
.cts:not(.cts--2) .ct-d { grid-area: d; margin-top: 0; text-align: right; white-space: nowrap; }
.cts:not(.cts--2) .ct-note { grid-area: x; }
.cts:not(.cts--2) .ct[data-passed] .ct-n { font-size: 17px; }
.ct-n { font: 500 clamp(34px, 26px + 1.4vw, 46px)/1 var(--font-ui); letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ct-u { margin-left: 2px; font-size: 15px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-2); }
.ct[data-passed] .ct-n { font-size: 26px; letter-spacing: -0.02em; color: var(--ink-2); }
.ct[data-passed] .ct-u { display: none; }
.ct-l { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.ct-d { margin-top: 10px; font: 500 12px/1.4 var(--font-mono); color: var(--ink-3); }
.ct-note { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.cp-sec--boxed .ct { background: rgba(0, 0, 0, 0.4); }

/* the calculator */
.calc {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
}
.calc-h { font: 600 18px/1.3 var(--font-ui); letter-spacing: -0.016em; color: var(--ink); }
.calc-sub { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.calc-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; margin-top: 22px; }
.calc-in label { font-size: 14px; color: var(--ink-2); }
.calc-n { font: 500 28px/1 var(--font-mono); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-in input[type="range"] {
  --p: 50%;
  grid-column: 1 / -1;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; margin: 4px 0 0; padding: 0;
  background: transparent; cursor: pointer;
}
.calc-in input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; border-radius: 1px;
  background: linear-gradient(to right, var(--ink) var(--p), rgba(255, 255, 255, 0.16) var(--p));
}
.calc-in input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -8px; box-sizing: border-box;
  border: 0; border-radius: 5px; background: var(--ink);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.9), 0 0 14px rgba(255, 255, 255, 0.35);
  transition: transform 0.2s var(--settle);
}
.calc-in input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.calc-in input[type="range"]::-moz-range-track { height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.16); }
.calc-in input[type="range"]::-moz-range-progress { height: 2px; border-radius: 1px; background: var(--ink); }
.calc-in input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; box-sizing: border-box; border: 0; border-radius: 5px; background: var(--ink);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.9), 0 0 14px rgba(255, 255, 255, 0.35);
}
.calc-in input[type="range"]:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.92); outline-offset: 4px; border-radius: 6px; }
.calc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; margin: 20px 0 0; }
.calc-o { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.35); }
.calc-o dt { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.calc-o dd { margin: 0; font: 500 20px/1.2 var(--font-mono); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-o--key { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.06); }
.calc-o--key dd { font-size: 23px; }
.calc figcaption { max-width: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/* the radar: rings and quadrants in hairlines, one square per entry, filled by ring */
.fig-radar { padding: clamp(14px, 2vw, 24px); border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255, 255, 255, 0.015); }
.radar { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; overflow: visible; }
.rd-ring { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; }
.rd-ring:first-of-type { fill: rgba(255, 255, 255, 0.012); }
.rd-axis { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.rd-rl { fill: var(--ink-3); font: 500 11.5px var(--font-mono); }
.rd-ql { fill: var(--ink-2); font: 500 13px var(--font-ui); }
.rd-dot rect { transition: transform 0.2s var(--settle); transform-box: fill-box; transform-origin: center; }
.rd-dot:hover rect { transform: scale(1.5); }
.rd-use rect { fill: var(--ink); }
.rd-trial rect { fill: rgba(245, 245, 242, 0.62); }
.rd-watch rect { fill: #000; stroke: rgba(245, 245, 242, 0.85); stroke-width: 1.2; }
.rd-hold rect { fill: #000; stroke: rgba(245, 245, 242, 0.45); stroke-width: 1.2; stroke-dasharray: 2 2; }
.rd-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.rd-legend li { display: inline-flex; align-items: center; gap: 8px; }
.rd-legend span { width: 9px; height: 9px; box-sizing: border-box; border-radius: 2px; }
.rd-legend .rd-use span { background: var(--ink); }
.rd-legend .rd-trial span { background: rgba(245, 245, 242, 0.62); }
.rd-legend .rd-watch span { border: 1px solid rgba(245, 245, 242, 0.85); }
.rd-legend .rd-hold span { border: 1px dashed rgba(245, 245, 242, 0.5); }

/* ── directories: the solutions groups, the insights rows ───────────────────────────────────── */
.dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px 32px; }
.dir-h { padding-bottom: 12px; border-bottom: 1px solid var(--line-2); font: 500 13px/1.3 var(--font-ui); color: var(--ink-3); }
.dir-g a { display: block; padding: 13px 0 14px; border-bottom: 1px solid var(--line); transition: padding 0.3s var(--settle); }
.dir-l { display: block; font: 500 16px/1.35 var(--font-ui); letter-spacing: -0.012em; color: var(--ink); }
.dir-b { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.dir-g a:hover { padding-left: 6px; }
.dir-g a:hover .dir-l { color: #fff; }
.rows { border-top: 1px solid var(--line); }
.rows a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px;
  padding: 18px 6px 19px; border-bottom: 1px solid var(--line);
  transition: background-color 0.2s, padding 0.3s var(--settle);
}
.rows .dir-l { grid-column: 1; font-size: 17px; }
.rows .dir-b { grid-column: 1; margin-top: 0; font-size: 14.5px; }
.rows .dir-l { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color 0.2s; }
.rows a:hover { background: var(--fill); padding-left: 12px; }
.rows a:hover .dir-l { text-decoration-color: rgba(255, 255, 255, 0.5); }

/* ── FAQ: native disclosure, one question per row ───────────────────────────────────────────── */
.faqs { max-width: calc(var(--cp-measure) + 64px); border-top: 1px solid var(--line); }
.cp-sec > .faqs { margin-top: 26px; }
.faq { border-bottom: 1px solid var(--line); }
.faq > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 20px 2px 21px; list-style: none; cursor: pointer;
  border-radius: 6px;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:focus-visible { outline-offset: -2px; }
.faq-q { font: 500 17px/1.45 var(--font-ui); letter-spacing: -0.012em; color: var(--ink); transition: color 0.18s; text-wrap: pretty; }
.faq > summary:hover .faq-q { color: #fff; }
.faq-ic {
  flex: none; box-sizing: border-box; width: 26px; height: 26px; margin-top: -1px; padding: 5px;
  border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink-2);
  transition: transform 0.3s var(--settle), color 0.2s, border-color 0.2s;
}
.faq > summary:hover .faq-ic { color: var(--ink); border-color: rgba(255, 255, 255, 0.3); }
.faq[open] .faq-ic { transform: rotate(45deg); color: var(--ink); }
.faq-a { padding: 0 50px 24px 2px; }
.faq-a > * + * { margin-top: 12px; }
.faq-a p { font-size: 16px; }
.faq-a .cp-list > li { font-size: 16px; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq::details-content { block-size: 0; overflow: clip; transition: block-size 0.34s var(--settle), content-visibility 0.34s allow-discrete; }
  .faq[open]::details-content { block-size: auto; }
}

/* ── related, the band ──────────────────────────────────────────────────────────────────────── */
.cp-related { max-width: var(--cp-wide); margin-inline: auto; padding-top: 28px; border-top: 1px solid var(--line); }
.cp-h3 { margin-bottom: 18px; font: 500 20px/1.3 var(--font-ui); letter-spacing: -0.02em; color: var(--ink); }
.rels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .rels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .cells, .cards2, .rels { grid-template-columns: 1fr; } }
.rel {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 18px 20px 18px;
  transition: background-color 0.2s, border-color 0.2s;
}
.rel-l { font: 600 15.5px/1.35 var(--font-ui); letter-spacing: -0.012em; color: var(--ink); }
.rel-b { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.rel-l { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color 0.2s; }
.rel:hover { background: var(--fill-2); border-color: var(--line-2); }
.rel:hover .rel-l { text-decoration-color: rgba(255, 255, 255, 0.5); }

/* the band sits after <main>, right before the footer, in the article's frame (as .cp-body): the footer comes
   up over the held page and the band rises with it, so it stacks over that page as the footer does, and is
   never cut (motion.js cuts the page at the band's top edge instead) */
.cp-band {
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--grid) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.cp-band-in {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 64px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(35, 67, 95, 0.36), transparent 62%),
    radial-gradient(70% 100% at 0% 100%, rgba(255, 255, 255, 0.05), transparent 70%),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cp-band-h { max-width: 18em; font: 500 clamp(28px, 20px + 1.9vw, 46px)/1.08 var(--font-ui); letter-spacing: -0.034em; color: var(--ink); text-wrap: balance; }
.cp-band-l { margin-top: 16px; max-width: 40em; font-size: clamp(16px, 15px + 0.25vw, 18px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.cp-band .cp-actions { margin-top: 30px; }
/* at the page's end the band can sit under the header band (1280x720: its buttons at 39 px); a button that takes
   focus there is brought down to where a linked section lands, clear of the header */
.cp-band .btn { scroll-margin-top: var(--cp-anchor); }

/* ── the contact page: the form beside three cards ──────────────────────────────────────────── */
.cp-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: 32px 40px; align-items: start; }
.cp-contact-main { min-width: 0; }
.cp-contact-side { display: grid; gap: 10px; }
.card-go {
  display: inline-block; margin-top: 12px; font: 500 13px/1.2 var(--font-ui); color: var(--ink);
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 4px;
}
.card--static { background: transparent; }
.cf-done h3 { color: var(--ink); }
.cp-contact .cf-field--lead textarea { height: 148px; }   /* the page people come to write on: room for the four details below it */

/* ── legal: the verbatim texts, as plain readable prose ─────────────────────────────────────── */
.eyebrow { margin-bottom: 14px; font: 500 13px/1.3 var(--font-ui); color: var(--ink-3); }
.updated { margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.cp-legal-top .note {
  margin-top: 22px; max-width: 40em; padding: 15px 18px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--fill);
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.cp-legal-top .note strong { color: var(--ink); font-weight: 600; }
.legal > h2 { margin-top: 48px; font: 600 20px/1.35 var(--font-ui); letter-spacing: -0.016em; color: var(--ink); max-width: 34em; }
.legal > h2:first-child { margin-top: 0; }
.legal > h2 + * { margin-top: 14px; }
.legal > p + p, .legal > p + ul, .legal > ul + p { margin-top: 14px; }
.legal ul { display: grid; gap: 8px; }
.legal li { position: relative; padding-left: 20px; }
.legal li::before { content: ""; position: absolute; left: 2px; top: calc(0.84em - 2.5px); width: 5px; height: 5px; border-radius: 1px; background: rgba(245, 245, 242, 0.42); }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.32); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal a:hover { text-decoration-color: #fff; }
.legal .tbl { margin-top: 18px; max-width: 44em; border: 1px solid var(--line); border-radius: var(--r-card); font-size: 15px; }
.legal .tbl td { padding: 12px 16px; color: var(--ink); overflow-wrap: anywhere; }
.legal .tbl td:first-child { width: 36%; color: var(--ink-3); }
.legal .tbl tr + tr td { border-top: 1px solid var(--line); }

/* ── 404: the words alone, at the top of the page, the orrery behind them ──────────────────────── */
/* a first screen of its own, so the footer (and its horizon, which would take the stars) comes after it */
.cp--404 .cp-body { min-height: 100svh; }
.cp--404 .cp-h1 { font-size: clamp(28px, 24px + 1vw, 40px); }
.cp--404 .cp-lede { margin-top: 12px; max-width: 36em; font-size: clamp(15px, 14.4px + 0.2vw, 17px); text-wrap: pretty; }
.cp--404 .cp-actions--hero { margin-top: 24px; }

/* ── wide screens: the page uses the width ────────────────────────────────────────────────────────
   The grid runs to 92% of the screen (site.css --grid). The figure column grows with it (as the
   home's: 1047 px at 1440, 1459 at 1920, 76% beyond, never wider than the space between the two
   section-index columns), so cards, tables and figures spread across the page while the text
   column keeps its measure and steps up in size with the type (--z, --zd from 1600 px). */
@media (min-width: 1280px) {
  .cp-page { --cp-wide: min(76vw, max(909px, calc(909px + (100vw - 1280px) * 0.86))); --cp-media: max(1143px, var(--cp-wide)); }
}
@media (min-width: 1600px) {
  .cp-page { --cp-toc-w: clamp(200px, 13vw, 300px); --cp-block: calc(40px * var(--z)); }
  .crumbs li, .cp-meta, .cp-toc a, .quote figcaption, .cp-small, .fig > figcaption, .fig-we > figcaption, .dir-h { font-size: calc(13px * var(--z)); }
  .cp-toc-h { font-size: calc(12.5px * var(--z)); }
  .cp-lede { font-size: calc(20px * var(--z)); }
  .cp-notice, .cp-note, .calc-sub, .calc-in label, .stat dt { font-size: calc(14px * var(--z)); }
  .cp-sub { font-size: calc(18px * var(--z)); }
  .cp-aside-t, .faq-q, .rows .dir-l { font-size: calc(17px * var(--z)); }
  .cp-aside > p:not([class]), .proof-x, .cts:not(.cts--2) .ct-l, .ct-u { font-size: calc(15px * var(--z)); }
  .quote blockquote p { font-size: calc(30px * var(--zd)); }
  .cell-t, .rel-l, .chain .step-t { font-size: calc(15.5px * var(--z)); }
  .cell-x, .card2-x, .qa-a, .ct-l, .rows .dir-b, .tbl { font-size: calc(14.5px * var(--z)); }
  .card2-t, .dir-l, .faq-a p, .faq-a .cp-list > li { font-size: calc(16px * var(--z)); }
  .step-t { font-size: calc(16.5px * var(--z)); }
  .step-x { font-size: calc(15.5px * var(--z)); }
  .chain .step-x, .rel-b { font-size: calc(13.5px * var(--z)); }
  .dir-b, .card2 .cp-list > li { font-size: calc(14px * var(--z)); }
  .proof-t, .calc-h { font-size: calc(18px * var(--z)); }
  .stat dd { font-size: calc(36px * var(--zd)); }
  .ct-n { font-size: calc(46px * var(--zd)); }
  .cts:not(.cts--2) .ct-n { font-size: calc(36px * var(--zd)); }
  .cp-h3 { font-size: calc(20px * var(--zd)); }
  .cp-band-h { font-size: calc(46px * var(--zd)); }
  .cp-band-l { font-size: calc(18px * var(--z)); }
  .legal > h2 { font-size: calc(20px * var(--zd)); }
  .legal > :is(p, ul, ol), .legal li { font-size: var(--cp-fs); }
  .cp-page :is(.cp, .cp-band) .btn:not(.btn-sm) { height: calc(44px * var(--z)); padding: 0 calc(20px * var(--z)); font-size: calc(14px * var(--z)); }
  .cp-page .more, .cp-more { font-size: calc(14px * var(--z)); }
}

/* ── narrower screens ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .cp-contact { grid-template-columns: 1fr; }
  .cp-contact-side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
}
/* phones and small tablets: Astra's 80 px between blocks, 20 under a heading */
@media (max-width: 767px) {
  .cp-page { --cp-gap: 80px; --cp-block: 32px; }
  .cp-sec > .cp-h2 + * { margin-top: 20px; }
  .cp-crumbrow { margin-bottom: 18px; }
  .cp-lede { margin-top: 16px; }
  .cp-actions--hero { margin-top: 26px; }
}
@media (max-width: 719px) {
  .cp-actions--hero .btn { flex: 1 1 0; }
  .cp-answer { padding: 20px 20px 22px; }
  .cp .steps > li { padding-left: 44px; }
  .chain { grid-template-columns: 1fr; gap: 0; }
  .chain > li { padding: 14px 16px 16px 58px; border-radius: 0; border-bottom-width: 0; }
  .chain > li:first-child { border-radius: var(--r-card) var(--r-card) 0 0; }
  .chain > li:last-child { border-radius: 0 0 var(--r-card) var(--r-card); border-bottom-width: 1px; }
  .chain > li::before { top: 18px; }
  .chain > li:not(:last-child)::after { display: none; }
  .tbl { font-size: 14px; }
  .cts:not(.cts--2) .ct { grid-template-columns: 5.5ch minmax(0, 1fr); grid-template-areas: "n l" "n d" "n x"; column-gap: 14px; padding: 16px 16px 17px; }
  .cts:not(.cts--2) .ct-d { text-align: left; margin-top: 6px; }
  .tbl th, .tbl td { padding: 11px 14px; }
  .faq > summary { gap: 16px; padding: 17px 0 18px; }
  .faq-q { font-size: 16px; }
  .faq-a { padding-right: 8px; }
  .calc-n { font-size: 24px; }
  .cp-band-in { padding: 28px 22px 26px; }
  .cp-band .cp-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .legal .tbl td { display: block; width: auto; padding: 4px 14px; }
  .legal .tbl td:first-child { width: auto; padding-top: 12px; }
  .legal .tbl tr td + td { border-top: 0; padding-bottom: 12px; }
}
/* phones: a table of three or more columns reads as one card per row, the row's name on top and
   each cell beside its column's name (build-site.py writes it into data-label). The footer is the
   home's: every link list (review 8) */
@media (max-width: 599px) {
  .tbl-wrap:has(> .tbl:not(.tbl--kv, [data-cols="2"])) { overflow: visible; border: 0; border-radius: 0; background: none; }
  .tbl:not(.tbl--kv, [data-cols="2"]) { min-width: 0; }
  .tbl:not(.tbl--kv, [data-cols="2"]) :is(tbody, tr, th, td) { display: block; }
  .tbl:not(.tbl--kv, [data-cols="2"]) caption { display: block; padding: 0 2px 12px; border: 0; }
  .tbl:not(.tbl--kv, [data-cols="2"]) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .tbl:not(.tbl--kv, [data-cols="2"]) tbody tr {
    padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--fill);
  }
  .tbl:not(.tbl--kv, [data-cols="2"]) tbody tr + tr { margin-top: 10px; }
  .tbl:not(.tbl--kv, [data-cols="2"]) tbody tr + tr > th { border-top: 0; }
  .tbl:not(.tbl--kv, [data-cols="2"]) tbody th { padding: 0 0 10px; font-size: 15px; font-weight: 600; line-height: 1.4; }
  /* the label floats in the cell's own left padding, so the value's text and links flow as written */
  .tbl:not(.tbl--kv, [data-cols="2"]) td { display: flow-root; padding: 9px 0 10px 118px; border-top: 1px solid var(--line); }
  .tbl:not(.tbl--kv, [data-cols="2"]) td::before {
    content: attr(data-label); float: left; box-sizing: border-box; width: 118px; margin-left: -118px; padding: 1px 14px 0 0;
    font-size: 12.5px; line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere;
  }

}
@media (max-width: 380px) {
  .cp-actions--hero { display: grid; grid-template-columns: 1fr; }
  .cp-band .cp-actions { grid-template-columns: 1fr; }
}

/* ── booking (2026-09-25): the calendar on /book ──────────────────────────────────────────────────
   The booking app draws its calendar on a transparent ground (book.solaryxdev.com, the sx embed);
   the box under it is this page's own panel (a hairline, the card radius, dark glass), so the stars
   keep clear of it and the calendar reads as part of the page. Until the calendar has drawn, the
   box holds a quiet month grid; then the frame fades in over it, and the box follows the height the
   booker settles on (js/page.js), so the page never shows a second scrollbar. The box starts at
   about the calendar's own height with today's times open, so the page below it barely moves when
   the calendar arrives. */
.cp-sec > .bk { margin-top: var(--cp-block); }
.bk-box {
  position: relative;
  height: 520px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(5, 6, 9, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 80px -40px rgba(0, 0, 0, 0.9);
  transition: height 0.5s var(--settle), border-color 0.3s;
}
.bk-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* "normal", as the booker's own page is: a frame whose scheme differs from its page gets an opaque
     white backdrop from Chrome, which put the calendar's light text on white (measured 2026-09-25) */
  color-scheme: normal;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--out), transform 0.8s var(--out);
}
.bk[data-state="ready"] .bk-frame { opacity: 1; transform: none; }
.bk-wait {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(16px, 2.4vw, 26px);
  pointer-events: none;
  transition: opacity 0.4s var(--out), visibility 0s linear 0.4s;
}
.bk[data-state="ready"] .bk-wait { opacity: 0; visibility: hidden; }
.bk-wait-h { display: flex; align-items: center; gap: 10px; font: 500 13px/1.3 var(--font-ui); color: var(--ink-3); }
.bk-wait-dot { width: 6px; height: 6px; border-radius: 1px; background: var(--ink); animation: bk-blink 1.1s ease-in-out infinite alternate; }
.bk-wait-d, .bk-wait-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-wait-d b { font: 500 11px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: var(--ink-3); }
.bk-wait-g i { height: clamp(34px, 4.6vw, 44px); border-radius: var(--r-ctl); background: rgba(255, 255, 255, 0.045); }
.bk-wait-g i:nth-child(n + 20) { background: rgba(255, 255, 255, 0.085); }
.bk-wait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%) 0 0 / 250% 100%;
  animation: bk-sweep 1.8s var(--settle) infinite;
}
@keyframes bk-sweep { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes bk-blink { from { opacity: 1; } to { opacity: 0.25; } }
.bk-alt { margin-top: 14px; }
@media (max-width: 719px) {
  .bk-box { height: 540px; margin-inline: calc(-1 * min(var(--gutter), 8px)); }
}
@media (prefers-reduced-motion: reduce) {
  .bk-box, .bk-frame, .bk-wait { transition: none; }
  .bk-frame { transform: none; }
  .bk-wait-dot, .bk-wait::after { animation: none; }
}
/* ── /booking ── */

/* ── reduced motion ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cp-toc a, .card2, .rel, .rel-l, .rows a, .rows .dir-l, .dir-g a, .faq-ic,
  .rd-dot rect, .calc-in input[type="range"]::-webkit-slider-thumb { transition: none; }
  .faq::details-content { transition: none; }
}