/* getkapex.ai shared stylesheet. One file for every page.

   It extends the strata look of the live home page (2026-09-14): warm paper,
   navy ink, one flat teal accent, Newsreader for headings and Source Sans 3 for
   body text, both self-hosted from assets/fonts/ (link fonts.css before this
   file). No third-party request, no gradient other than the strata drawing, no
   blur, no shadows, no dark sections, no icons.

   Component reference with copy-paste markup: BUILD_NOTES.md (kept outside the
   site so it is not deployed). Class names here are the contract. While pages
   are being built in parallel, page builders do not edit this file; a missing
   pattern goes to whoever integrates, and lands here, not in a style attribute.

   Sizes: body text is 17px on phones and 19px from 768px up. Nothing on the
   page is set below 16px. Every control is at least 44px tall. Motion is only
   the disclosure toggle, and only when the reader has not asked for less. */

/* ── Tokens ───────────────────────────────────────────────────────── */
:root {
  color-scheme: only light;   /* also opts out of Chromium's forced dark mode */
  --paper: #F5F6F4;      /* page background */
  --white: #FFFFFF;      /* quiet bands, cards */
  --ink: #1F2A37;        /* body text */
  --ink-2: #33404F;      /* lead and secondary text */
  --navy: #1A2E44;       /* buttons, headings */
  --navy-2: #243B57;     /* button hover */
  --teal: #50B8A8;       /* flat accent only: the strata line, the current-page rule */
  --link: #386690;       /* 5.6:1 on paper; the live #5186B0 was 3.9:1 */
  --stone: #DFE4E7;      /* hairlines, card borders, the user's chat bubble */
  --stone-2: #C9D2D8;    /* tab pills and chips */
  --field-line: #7D8A96; /* form field edges: 3.3:1 on paper, 3.5:1 on white (WCAG 1.4.11) */
  --muted: #5B6673;      /* captions and dates, 5.4:1 on paper */
  --focus: #1F7A6A;      /* focus ring */
  --mint: #EAF4F2;       /* the app's chat bubble */
  --grey-bubble: #ECEEF0;/* the app's bubble when it has no memory */
  --ok-bg: #EAF4F2;  --ok-line: #9BCFC4;
  --bad-bg: #FBEDEA; --bad-line: #E0A99B;
  --mark-bg: #B8DDD5;    /* the pairing highlight (.mark); visible on white, mint and stone, ink on it is 9:1 */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --max: 1040px;         /* page width */
  --measure: 640px;      /* reading column */
  --gutter: 16px;        /* 24px from 768px */
  --band: 48px;          /* section padding, 72px from 768px */
  --radius: 18px;
  --tap: 44px;
}
@media (min-width: 768px) {
  :root { --gutter: 24px; --band: 72px; }
}

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.55;
  overflow-wrap: break-word;
}
@media (min-width: 768px) { body { font-size: 1.1875rem; } }   /* 19px */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 0.45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); }
h1 em, h2 em { font-style: italic; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem); }   /* 30px at 390, 36px at 768, 42px from 1024 */
h3 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 500; line-height: 1.25; }   /* fix round 3: a step above body text on desktop */
h4 { font-size: 1.1rem; font-weight: 500; line-height: 1.3; }
p, ul, ol, dl, figure, table, pre { margin: 0 0 1em; }
p, li, dd, .lead { text-wrap: pretty; }   /* fix round 3: no one-word last lines where the browser can help it */
ul, ol { padding-left: 1.25em; }
li + li { margin-top: 0.35em; }
strong { font-weight: 600; }
img, svg { max-width: 100%; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.lead { font-size: 1.2em; line-height: 1.45; color: var(--ink-2); }
.small { font-size: 1rem; }                       /* 16px, the floor */
.muted { color: var(--muted); }
p.when, .when { font-size: 1rem; color: var(--muted); margin: 0 0 0.35em; }

/* Visually hidden, still read aloud. */
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Layout ───────────────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.col { max-width: var(--measure); }
/* Fix round 3 (not-AI review): the reading pages (control, about, faq, security) put
   their one column in the middle of the page from 1024px, like a letter, instead of
   leaving the right forty percent of the screen empty. Header and footer keep the
   full page width. */
@media (min-width: 1024px) {
  main.reading .wrap { max-width: calc(var(--measure) + 2 * var(--gutter)); }
  main.reading .split { grid-template-columns: 1fr; gap: 40px; }
}

/* A band is one section. Alternate .band and .band.quiet down a page; two
   bands of the same colour next to each other need .rule between them. */
.band { padding: var(--band) 0; }
.band.quiet { background: var(--white); border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); }
.band.quiet + .band.quiet { border-top: 0; }
.band.rule { border-top: 1px solid var(--stone); }
.band.tight { padding-top: calc(var(--band) * 0.5); }
main > .band.quiet:last-child { border-bottom: 0; }   /* the footer draws that line */
.band > .wrap > :last-child, .col > :last-child { margin-bottom: 0; }

/* Two columns from 820px: text on one side, a card or list on the other. */
.split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }
@media (max-width: 819px) { .split > * { max-width: var(--measure); } }

/* Section intro: heading plus one or two lines, kept to the reading measure. */
.intro { max-width: var(--measure); margin-bottom: 32px; }
.intro > :last-child { margin-bottom: 0; }

/* ── Skip link ────────────────────────────────────────────────────── */
.skip {
  position: absolute; left: 8px; top: -100px; z-index: 20;
  background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.skip:focus, .skip:focus-visible { top: 8px; }

/* ── Buttons and action rows ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 24px; border-radius: 999px;
  background: var(--navy); color: var(--white); border: 1.5px solid var(--navy);
  font-family: var(--sans); font-size: 1.05rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn.light { background: transparent; color: var(--navy); }
.btn.light:hover { background: var(--stone); border-color: var(--navy); }
.btn-small { min-height: var(--tap); padding: 6px 16px; font-size: 1rem; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* A row of one or two buttons. Written as a list so each label is its own
   item for the site lint and for a screen reader. */
.actions { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 24px 0 0; }
.actions li { margin: 0; }

/* A plain text link that leads to a deeper page. */
.doorway { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
.doorways { list-style: none; padding: 0; margin: 0 0 1em; display: flex; flex-direction: column; gap: 0; }
.doorways li { margin: 0; }

/* An "On this page" list of anchors under a page heading (use cases, developers, questions). */
.jump { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; padding: 0; margin: 16px 0 0; }
.jump li { margin: 0; }
.jump a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ── Header ───────────────────────────────────────────────────────── */
.site-header { position: relative; z-index: 10; }
.site-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding-top: 14px; padding-bottom: 14px;
}
.brand { margin: 0; }
.brand a { display: inline-flex; align-items: baseline; gap: 10px; min-height: var(--tap); padding: 6px 0; text-decoration: none; }
.brand-name { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); line-height: 1; }
.brand-by { font-size: 1rem; color: var(--muted); }
@media (max-width: 559px) { .brand-by { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
.site-cta { margin: 0 0 0 auto; }
.site-cta a[aria-current="page"] { background: transparent; color: var(--navy); }   /* on /waitlist itself */
@media (max-width: 359px) { .site-cta { display: none; } }   /* the Menu carries "Join the waitlist" */

.nav-wide { display: none; }
.nav-wide ul, .menu ul { list-style: none; margin: 0; padding: 0; }
.nav-wide li, .menu li { margin: 0; }
.nav-wide a, .menu nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--ink); text-decoration: none; font-size: 1rem;
}
.nav-wide a:hover, .menu nav a:hover { text-decoration: underline; }
.nav-wide a[aria-current="page"], .menu nav a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--teal);
  text-decoration-thickness: 3px; text-underline-offset: 8px;
}

/* Phones: brand, waitlist pill and a Menu disclosure. No script needed. */
.menu { order: 3; }
.menu > summary {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 6px 16px;
  border: 1.5px solid var(--navy); border-radius: 999px; color: var(--navy);
  font-weight: 600; font-size: 1rem; cursor: pointer; list-style: none; user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--stone); }
.menu nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-top: 1px solid var(--stone); border-bottom: 2px solid var(--navy);
  padding: 8px var(--gutter) 16px;
}
.menu nav a { display: flex; min-height: 48px; font-size: 1.0625rem; border-bottom: 1px solid var(--stone); }
.menu nav li:last-child a { border-bottom: 0; }

/* Tablets: the links get their own row under the brand. */
@media (min-width: 768px) {
  .menu { display: none; }
  .site-bar { padding-top: 18px; padding-bottom: 10px; }
  .nav-wide { display: block; order: 3; flex-basis: 100%; }
  .nav-wide ul { display: flex; flex-wrap: wrap; gap: 0 22px; }
}
/* Desktop: one row. */
@media (min-width: 1100px) {
  .site-bar { flex-wrap: nowrap; padding-top: 22px; padding-bottom: 22px; }
  .nav-wide { order: 0; flex-basis: auto; margin-left: auto; }
  .site-cta { margin-left: 8px; }
}

/* ── Footer ───────────────────────────────────────────────────────── */
.site-footer { padding: 36px 0 44px; color: var(--muted); font-size: 1rem; border-top: 1px solid var(--stone); }
.site-footer p { margin: 0 0 4px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 18px; list-style: none; padding: 0; margin: 8px 0 0; }
.foot-links + .foot-links { margin-top: 0; }
.foot-links li { margin: 0; max-width: 100%; }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); overflow-wrap: anywhere; }
.foot-links a[aria-current="page"] { color: var(--ink); }

/* ── Hero (home only): the full strata drawing and the headline ──── */
/* From 1024px the headline sits over the drawing, crossing the teal line, and
   the lead and buttons sit beside it on the paper above the layers, so no line
   of text ever lands on a dark layer. Below 1024px the drawing comes first,
   cropped to the band with the teal line, and the words follow on paper. One
   left edge at every width: the page grid. */
.strata { position: relative; overflow: hidden; margin: 0; }
.strata svg { display: block; width: 100%; height: auto; }
.strata .text .wrap { padding-top: 24px; }
.strata h1 { max-width: 12ch; font-size: clamp(2.6rem, 6.2vw, 4.8rem); text-wrap: wrap; }
.hero-aside .lead { max-width: 34ch; margin-bottom: 0; }
.strata .btn.light { background: var(--paper); }      /* stays readable over the layers */
.strata .btn.light:hover { background: var(--stone); }
@media (max-width: 1023px) {
  .strata svg { margin-top: -15vw; }                   /* drop the empty paper above the teal line */
  .strata .text .wrap { padding-bottom: 24px; }        /* room between the buttons and the next heading */
  /* Fix round 3 (design review): with the drawing above the words, the hero has no
     bottom edge of its own, so the next band starts with a full gap and a hairline. */
  .strata + .band.tight { padding-top: var(--band); border-top: 1px solid var(--stone); }
}
/* Fix round 3 (design review): on a tablet the lead and buttons sit beside the
   headline instead of under it, so the right half of the hero is not empty. */
@media (min-width: 768px) and (max-width: 1023px) {
  .strata .text .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; align-items: end; }
  .strata h1 { margin-bottom: 0; }
  .hero-aside .lead { max-width: 30ch; }
}
@media (min-width: 1024px) {
  .strata .text { position: absolute; inset: 0; }
  .strata .text .wrap {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
    column-gap: clamp(40px, 5vw, 72px); padding-top: clamp(20px, 2.4vw, 40px);
  }
  /* Fix round 2 (design review): from 1024 to 1366 the buttons sat on or under
     the teal line. Starting the text higher keeps them on the paper above it,
     and the headline still crosses the line. */
  .hero-aside { padding-top: 0; max-width: 26rem; }
  .hero-aside .lead { font-size: 1.1em; }
  .hero-aside .actions { margin-top: 16px; }
}
/* DM7: past 1440px the drawing stops growing taller, so the first screen is not
   mostly empty layers. At 1440 and below it keeps its own ratio. */
@media (min-width: 1441px) { .strata svg { height: 760px; } }

/* ── Strata strip: the top of every other page ────────────────────── */
/* A cropped band of the same drawing, no text, hidden from screen readers. */
/* The whole stack, pale to navy, squeezed to a band at every width (fix round 1):
   the old crop showed only the two palest layers on a desktop screen. */
/* Fix round 2 (not-AI review): 24px of paper above the teal line, so the line sits
   in the drawing instead of reading as a loading bar under the header. */
.strata-strip { height: clamp(112px, calc(10vw + 24px), 160px); padding-top: 24px; overflow: hidden; line-height: 0; }
.strata-strip svg { display: block; width: 100%; height: 100%; }

/* Page opening under the strip. */
.page-head { padding: 40px 0 8px; }
@media (min-width: 768px) { .page-head { padding: 56px 0 8px; } }
.page-head .lead { max-width: var(--measure); }
/* A heading that meets a white or ruled band gets the same gap on every page;
   one that flows into a paper .band.tight keeps the paper continuous. */
.page-head .wrap > :last-child, .page-head .col > :last-child { margin-bottom: 0; }
.page-head:has(+ .band.quiet), .page-head:has(+ .band.rule) { padding-bottom: 40px; }
@media (min-width: 768px) { .page-head:has(+ .band.quiet), .page-head:has(+ .band.rule) { padding-bottom: 56px; } }

/* ── Plain statements (home "What it feels like" left column) ─────── */
.plain { list-style: none; padding: 0; margin: 0; max-width: 36em; }
.plain li { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); line-height: 1.3; color: var(--ink); padding: 16px 0; border-top: 1px solid var(--stone); margin: 0; }
.plain li:last-child { border-bottom: 1px solid var(--stone); }
.plain li span { display: block; font-family: var(--sans); font-size: 1.0625rem; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
@media (min-width: 768px) { .plain li span { font-size: 1.125rem; } }   /* fix round 3: the explanations are the substance, so body size */
.plain li span.state { font-size: 1rem; color: var(--muted); margin-top: 8px; }   /* control page: built, and who draws the screen */
.after-plain, .plain + p { margin-top: 24px; }

/* ── Chat card ────────────────────────────────────────────────────── */
.chat { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: 20px; margin: 0; }
@media (min-width: 768px) { .chat { padding: 28px; } }
.chat-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0 0 14px; }
.chat-head p { margin: 0; font-size: 1rem; color: var(--muted); }
.chat-head .chat-title { color: var(--ink); font-weight: 600; }
.chat .msg { max-width: 86%; width: fit-content; padding: 12px 16px; border-radius: 16px; margin: 0 0 10px; line-height: 1.45; }
.chat .msg.them { background: var(--mint); border-bottom-left-radius: 4px; }
.chat .msg.me { background: var(--stone); margin-left: auto; border-bottom-right-radius: 4px; }
.chat.without { background: var(--paper); border-style: dashed; border-color: var(--stone-2); }
.chat.without .msg.them { background: var(--white); border: 1px solid var(--stone); }
.chat .msg .who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.chat .gap { font-size: 1rem; color: var(--muted); font-style: italic; margin: 16px 0 10px; }
.chat > .gap:first-child { margin-top: 0; }   /* visuals round 2: a chat that opens on a day */
.chat > :last-child { margin-bottom: 0; }

/* "What happens a month later": a disclosure inside a card. */
.chat details.later { margin-top: 8px; }
.chat details.later > summary {
  display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer;
  color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; list-style: none;
}
.chat details.later > summary::-webkit-details-marker { display: none; }
.chat details.later[open] > summary { color: var(--muted); }
.chat details.later > .later-body { margin-top: 10px; }

/* ── Example tabs (radio buttons and CSS; no script) ──────────────── */
/* Markup: .tabs > .tabs-list[role=radiogroup] > (input.tabs-input + label.tabs-label){2..6},
   then .tabs-panels > .tabs-panel{same count}, then p.tabs-caption.
   Without CSS, or in a browser without :has(), every panel shows, in order.
   Arrow keys move between tabs because they are one radio group. */
.tabs { margin: 0; }
.tabs-list { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.tabs-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tabs-label {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 8px 18px; margin: 0;
  border: 1.5px solid var(--stone-2); border-radius: 999px; background: var(--white);
  color: var(--ink); font-size: 1rem; font-weight: 600; cursor: pointer; line-height: 1.25;
}
.tabs-label:hover { border-color: var(--navy); }
.tabs-input:checked + .tabs-label { background: var(--navy); border-color: var(--navy); color: var(--white); }
.tabs-input:focus-visible + .tabs-label { outline: 2px solid var(--focus); outline-offset: 3px; }
.tabs-panels { margin-top: 18px; }
.tabs-panel + .tabs-panel { margin-top: 24px; }
.tabs:has(.tabs-input:checked) .tabs-panel { display: none; margin-top: 0; }
.tabs:has(.tabs-input:nth-of-type(1):checked) .tabs-panel:nth-of-type(1),
.tabs:has(.tabs-input:nth-of-type(2):checked) .tabs-panel:nth-of-type(2),
.tabs:has(.tabs-input:nth-of-type(3):checked) .tabs-panel:nth-of-type(3),
.tabs:has(.tabs-input:nth-of-type(4):checked) .tabs-panel:nth-of-type(4),
.tabs:has(.tabs-input:nth-of-type(5):checked) .tabs-panel:nth-of-type(5),
.tabs:has(.tabs-input:nth-of-type(6):checked) .tabs-panel:nth-of-type(6) { display: block; }
/* The home example tabs stack their panels in one grid cell, so the block keeps
   the height of the tallest panel and nothing below it jumps on a tab change
   (design review). Hidden panels use visibility, which also takes them out of
   the reading order. The use-cases pair tabs keep the display rules above.
   Visuals round 2 (2026-10-13): so do .walk (the control card walkthrough) and
   .code-tabs (the developer handler): their panels differ a lot in height, and
   a stacked cell left a tall empty box under the short ones, so their height
   follows the chosen tab instead. */
.tabs:not(.pair-tabs):not(.walk):not(.code-tabs):has(.tabs-input:checked) .tabs-panels { display: grid; }
.tabs:not(.pair-tabs):not(.walk):not(.code-tabs):has(.tabs-input:checked) .tabs-panel { grid-area: 1 / 1; display: block; visibility: hidden; margin-top: 0; }
.tabs:not(.pair-tabs):not(.walk):not(.code-tabs):has(.tabs-input:nth-of-type(1):checked) .tabs-panel:nth-of-type(1),
.tabs:not(.pair-tabs):not(.walk):not(.code-tabs):has(.tabs-input:nth-of-type(2):checked) .tabs-panel:nth-of-type(2),
.tabs:not(.pair-tabs):not(.walk):not(.code-tabs):has(.tabs-input:nth-of-type(3):checked) .tabs-panel:nth-of-type(3),
.tabs:not(.pair-tabs):not(.walk):not(.code-tabs):has(.tabs-input:nth-of-type(4):checked) .tabs-panel:nth-of-type(4),
.tabs:not(.pair-tabs):not(.walk):not(.code-tabs):has(.tabs-input:nth-of-type(5):checked) .tabs-panel:nth-of-type(5),
.tabs:not(.pair-tabs):not(.walk):not(.code-tabs):has(.tabs-input:nth-of-type(6):checked) .tabs-panel:nth-of-type(6) { visibility: visible; }
/* Fix round 3 (design review): the panel is a column and its card takes the spare
   height, so the note and the caption sit right under the card on every tab. */
.tabs:not(.pair-tabs):not(.walk):not(.code-tabs):has(.tabs-input:checked) .tabs-panels > .tabs-panel:nth-of-type(n) { display: flex; flex-direction: column; }
.tabs:not(.pair-tabs):not(.walk):not(.code-tabs) .tabs-panel > .chat { flex: 1 0 auto; }
.tabs-panel .happened { font-size: 1rem; color: var(--ink-2); margin: 12px 0 0; }
/* TF-g (team review): on a phone the examples come straight after the heading,
   then the three statements. */
@media (max-width: 767px) {
  #what .split { display: flex; flex-direction: column; }
  #what .split > div:last-child { order: -1; }
}
.tabs-caption { font-size: 1rem; color: var(--muted); margin: 16px 0 0; }

/* ── Without / with pairs (use cases) ─────────────────────────────── */
.case { margin: 0 0 48px; }
.case:last-child { margin-bottom: 0; }
.case + .case { border-top: 1px solid var(--stone); padding-top: 48px; }
.case > h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.85rem); font-weight: 400; margin-bottom: 8px; }
.case > .problem { max-width: var(--measure); color: var(--ink-2); }
.pair { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 20px 0 0; }
@media (min-width: 900px) { .pair { grid-template-columns: 1fr 1fr; gap: 24px; } }
.pair-note { font-size: 1.0625rem; color: var(--ink-2); margin: 14px 0 0; max-width: 36em; }
@media (min-width: 768px) { .pair-note { font-size: 1.125rem; } }
.pair-note + p { margin-top: 10px; }
/* On phones and tablets a pair is two tabs, "With KAPEX" chosen first, so the
   point of each example is one card away instead of two. From 900px both
   cards show side by side, at the same height, and the tab labels go away. */
.pair-tabs { margin-top: 18px; }
.pair-tabs .tabs-panels.pair { margin-top: 14px; }
@media (min-width: 900px) {
  .pair-tabs .tabs-list { display: none; }
  .pair-tabs .tabs-panels.pair { margin-top: 0; }
  .pair-tabs .tabs-panel { display: flex !important; margin-top: 0 !important; }
  .pair .tabs-panel > .chat { flex: 1; }
  .pair-tabs .tabs-panel:first-child { order: 2; }     /* "With" is first in the page; it sits on the right */
}

/* ── How-it-works diagram (two inline SVGs, one per width) ────────── */
.loop { margin: 0; }
.loop svg { display: block; width: 100%; height: auto; }
.loop .loop-wide { display: none; max-width: 800px; }
.loop .loop-narrow { display: block; max-width: 440px; margin: 0 auto; }
@media (min-width: 720px) {
  .loop .loop-wide { display: block; }
  .loop .loop-narrow { display: none; }
}
.loop.small .loop-wide { max-width: 680px; }
.loop text { font-family: var(--sans); }
.loop .box-name text { font-family: var(--serif); }
.loop figcaption { font-size: 1rem; color: var(--ink-2); margin-top: 16px; max-width: var(--measure); }

/* ── Ordered steps (no typed numerals; the list numbers them) ─────── */
.steps { padding-left: 0; list-style: none; counter-reset: step; margin: 0 0 1em; }
.steps > li { counter-increment: step; position: relative; padding: 14px 0 14px 52px; border-top: 1px solid var(--stone); margin: 0; }
.steps > li:last-child { border-bottom: 1px solid var(--stone); }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 12px;
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--navy);
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.1rem; color: var(--navy);
}

/* ── "What you control" card ──────────────────────────────────────── */
.memcard { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: 20px; margin: 0; }
@media (min-width: 768px) { .memcard { padding: 28px; } }
.memcard > h3 { margin-bottom: 4px; font-size: 1.3rem; }
.memcard-list { list-style: none; padding: 0; margin: 12px 0 0; }
.memcard-item { padding: 14px 0; border-top: 1px solid var(--stone); margin: 0; }
.memcard-item p { margin: 0; }
/* Keep, Hide, Fix and Delete are labels for what an app would offer, not
   controls on this page, so they do not look like buttons. */
.memcard-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
.memcard-actions span { font-size: 1rem; color: var(--muted); cursor: default; user-select: none; }
.memcard-actions span + span::before { content: "\00B7"; margin-right: 8px; color: var(--muted); }
.memcard-item.is-hidden .memcard-actions span:nth-child(2) { color: var(--ink); font-weight: 600; }
.memcard-item.is-hidden > p:first-child { color: var(--muted); }
.memcard-item .memcard-status { font-size: 1rem; color: var(--ink-2); margin-top: 6px; }
.memcard-caption { font-size: 1rem; color: var(--muted); margin: 14px 0 0; }

/* ── An example of the note KAPEX hands a model (how-it-works) ────── */
.note-card { background: var(--white); border: 1px solid var(--stone); border-left: 3px solid var(--teal); border-radius: 12px; padding: 18px 20px; margin: 0 0 1em; }
.note-card > :last-child { margin-bottom: 0; }
.note-title { font-weight: 600; margin: 0 0 8px; }
.note-lines { list-style: none; padding: 0; margin: 0 0 12px; }
.note-lines li { margin: 0; padding: 8px 0; border-top: 1px solid var(--stone); }
.note-lines li:last-child { border-bottom: 1px solid var(--stone); }
.note-label { font-weight: 600; color: var(--navy); }
.note-after { color: var(--ink-2); margin: 0 0 8px; }
.note-caption { font-size: 1rem; color: var(--muted); margin: 0; }

/* ── Status block and dated notes ─────────────────────────────────── */
.status { border-left: 3px solid var(--teal); padding: 4px 0 4px 18px; margin: 0 0 28px; max-width: var(--measure); }
.status ul { list-style: none; padding: 0; margin: 0; }
.status li { margin: 0 0 6px; }
.status li:last-child { margin-bottom: 0; }

/* ── Questions (details/summary) ──────────────────────────────────── */
.qa-group { max-width: var(--measure); margin: 0 0 40px; }
.qa-group:last-child { margin-bottom: 0; }
.qa-group + p { margin-top: -20px; }
.qa { border-top: 1px solid var(--stone); }
.qa:last-of-type { border-bottom: 1px solid var(--stone); }
.qa > summary {
  position: relative; display: flex; align-items: center; min-height: 56px;
  padding: 12px 44px 12px 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; color: var(--navy);
}
.qa > summary::-webkit-details-marker { display: none; }
/* Plus and minus, drawn with two bars so nothing is read aloud. */
.qa > summary::before, .qa > summary::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 16px; height: 2px; margin-top: -1px; background: var(--navy);
}
.qa > summary::after { transform: rotate(90deg); }
.qa[open] > summary::after { transform: none; opacity: 0; }
.qa > summary:hover { color: var(--navy-2); text-decoration: underline; text-underline-offset: 4px; }
.qa > .qa-a { padding: 0 0 18px; color: var(--ink); }
.qa > .qa-a > :last-child { margin-bottom: 0; }
.qa:target > summary { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .qa[open] > .qa-a, .chat details.later[open] > .later-body { animation: kx-open 0.2s ease-out; }
}
@keyframes kx-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── People (a stacked list, never a three-up grid) ───────────────── */
/* Initials in a circle until the photographs are matched to names (D4); then the
   circle holds the photo. Fix round 3 (design and team review): without any mark,
   three founders read like three feature bullets. */
.people-list { list-style: none; padding: 0; margin: 0; max-width: 760px; }
.person-row { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 2px 24px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--stone); margin: 0; }
.person-row:last-child { border-bottom: 1px solid var(--stone); }
.person-row h3 { margin: 0; font-size: 1.5rem; }
.person-row .role { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .person-row { grid-template-columns: minmax(0, 1fr); } }

/* ── Two-column definition list ("When KAPEX is the wrong choice") ── */
.fit { max-width: 880px; margin: 0; }
.fit > div { padding: 16px 0; border-top: 1px solid var(--stone); }
.fit > div:last-child { border-bottom: 1px solid var(--stone); }
.fit dt { font-weight: 600; margin: 0 0 4px; }
.fit dd { margin: 0; color: var(--ink-2); }
@media (min-width: 768px) {
  .fit > div { display: grid; grid-template-columns: 2fr 3fr; gap: 24px; }
  .fit dt { margin: 0; }
}

/* ── Control table ────────────────────────────────────────────────── */
.table-wrap { max-width: 100%; overflow-x: auto; }
.controls { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 1rem; background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); }
.controls th, .controls td { text-align: left; vertical-align: top; padding: 14px 16px; border-top: 1px solid var(--stone); }
.controls thead th { border-top: 0; font-weight: 600; color: var(--ink-2); background: var(--paper); }
.controls code { font-size: 1rem; }
@media (max-width: 899px) {
  .controls, .controls tbody, .controls tr, .controls td, .controls th { display: block; width: 100%; }
  .controls { border: 0; background: transparent; overflow: visible; }
  .controls thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .controls tr { background: var(--white); border: 1px solid var(--stone); border-radius: 12px; margin: 0 0 12px; padding: 4px 0; }
  .controls th, .controls td { border-top: 0; padding: 8px 14px; }
  .controls td[data-label]::before { content: attr(data-label); display: block; font-weight: 600; color: var(--muted); }
}
/* The status pills ("chips") left with the control table in fix round 2: the
   controls are a plain list now, with the status as a muted line (.plain .state). */

/* Two-column "kept / not kept" table reuses .controls. */

/* ── Code (developers page only) ──────────────────────────────────── */
code { font-family: var(--mono); font-size: max(1rem, 0.9em); background: var(--white); border: 1px solid var(--stone); border-radius: 6px; padding: 0 0.3em; }
.code { margin: 0 0 1.5em; max-width: 100%; }
.code pre {
  margin: 0; padding: 16px 18px; overflow-x: auto; max-width: 100%;
  background: var(--white); border: 1px solid var(--stone); border-radius: 12px;
  font-family: var(--mono); font-size: 1rem; line-height: 1.55; color: var(--ink); tab-size: 2;
}
.code pre code { background: none; border: 0; padding: 0; font-size: inherit; white-space: pre; }
.code .c { color: var(--muted); }               /* a comment line */
/* Fix round 3 (design review): below 560px comment lines wrap, and a soft shadow at
   the right edge shows that a command line scrolls; it lifts at the end of the line. */
@media (max-width: 559px) {
  .code .c { white-space: pre-wrap; }
  .code pre {
    background:
      linear-gradient(to left, var(--white) 24px, rgba(255, 255, 255, 0) 24px) local,
      linear-gradient(to left, rgba(26, 46, 68, 0.14), rgba(26, 46, 68, 0) 16px) scroll,
      var(--white);
  }
}
.code figcaption { font-size: 1rem; color: var(--muted); margin-top: 10px; }

/* A boxed note at the top of a page ("What runs today"). */
.box { background: var(--white); border: 1px solid var(--stone); border-left: 3px solid var(--teal); border-radius: 12px; padding: 18px 20px; max-width: var(--measure); }
.box > :last-child { margin-bottom: 0; }
.box h2, .box h3 { font-size: 1.5rem; margin-bottom: 0.35em; }

/* ── Closing block (one line for the page, if any, and the two buttons) */
.closing .lead { max-width: var(--measure); }
.closing .vh + .actions { margin-top: 0; }

/* ── Waitlist form ────────────────────────────────────────────────── */
main.wl { padding: 40px 0 48px; }
@media (min-width: 768px) { main.wl { padding: 56px 0 72px; } }
.wl form { margin: 28px 0 0; max-width: 34rem; }
.wl label { display: block; font-weight: 600; font-size: 1rem; margin: 0 0 6px; }
.wl input[type=email], .wl textarea {
  width: 100%; min-height: var(--tap); padding: 12px 14px; border: 1.5px solid var(--field-line);
  border-radius: 10px; font: inherit; background: var(--white); color: var(--ink);
}
.wl input[type=email]:focus-visible, .wl textarea:focus-visible { border-color: var(--focus); }
.wl textarea { min-height: 92px; resize: vertical; }
.wl .field { margin: 0 0 18px; }
.wl .hint { color: var(--muted); font-size: 1rem; margin: 8px 0 0; }
.wl .msg { margin: 18px 0 0; padding: 14px 16px; border-radius: 10px; font-size: 1rem; }
.wl .msg.ok { background: var(--ok-bg); border: 1px solid var(--ok-line); }
.wl .msg.bad { background: var(--bad-bg); border: 1px solid var(--bad-line); }
.wl .direct { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--stone); }

/* ── Legal pages (privacy, terms): long text, unchanged wording ───── */
.legal { max-width: 720px; }
.legal h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin-top: 1.6em; }
.legal h3 { margin-top: 1.2em; }
.legal li { margin-top: 0.4em; }
.legal hr { border: 0; border-top: 1px solid var(--stone); margin: 2em 0; }
.legal code { white-space: nowrap; }

/* ── Visuals round (2026-10-12): playthroughs built from the parts above ── */
/* Plan: KAPEX_SITE_VISUALS_PLAN_2026-10-12.md, "Top 5 to do first". Every new
   piece reuses .chat, .note-card, .memcard, .loop, .steps, .tabs or
   details.later; only the joins between them are new here. Nothing in these
   rules sizes, fades, orders or colors a memory line by age or importance:
   the three lines of a card always look alike, and a state (pinned, hidden,
   fixed) is shown by its words and by the label the person chose. */

/* A note shown inside a chat reveal (home, Personal assistant tab). Round 2:
   the inset memory card that sat beside it in its own reveal is gone, and its
   rules with it. */
.chat .later-body > .note-card { margin: 0; }
/* The label over that note, inside the month-later reveal. */
.chat .later-label { font-weight: 600; color: var(--navy); font-size: 1rem; margin: 18px 0 8px; }
/* The home tabs stack their panels in one cell, so a hidden panel still sets
   the height. An open reveal in the Personal assistant tab stretched the Help
   desk and Evening class cards into tall empty boxes on a phone (build review).
   A reveal's body takes up room only in the panel that is on screen; print
   still shows every one (the print block below). */
.tabs:not(.pair-tabs):has(.tabs-input:checked) .tabs-panel details.later > .later-body { display: none; }
.tabs:not(.pair-tabs):has(.tabs-input:nth-of-type(1):checked) .tabs-panel:nth-of-type(1) details.later[open] > .later-body,
.tabs:not(.pair-tabs):has(.tabs-input:nth-of-type(2):checked) .tabs-panel:nth-of-type(2) details.later[open] > .later-body,
.tabs:not(.pair-tabs):has(.tabs-input:nth-of-type(3):checked) .tabs-panel:nth-of-type(3) details.later[open] > .later-body,
.tabs:not(.pair-tabs):has(.tabs-input:nth-of-type(4):checked) .tabs-panel:nth-of-type(4) details.later[open] > .later-body,
.tabs:not(.pair-tabs):has(.tabs-input:nth-of-type(5):checked) .tabs-panel:nth-of-type(5) details.later[open] > .later-body,
.tabs:not(.pair-tabs):has(.tabs-input:nth-of-type(6):checked) .tabs-panel:nth-of-type(6) details.later[open] > .later-body { display: block; }

/* A tab's own name, repeated inside its panel. Hidden while the tabs work,
   shown when every panel is on screen at once: in print, and in a browser
   without :has(), where the panels already stack in order. */
.tabs-panel-label { font-weight: 600; color: var(--navy); margin: 0 0 10px; }
.tabs:has(.tabs-input:checked) .tabs-panel-label { display: none; }

/* Something the app does out of sight, between two lines of a chat
   (how-it-works, the "You write" and "The reply" columns of the spread). */
/* Round 2 review: set like the day breaks (.gap), as a stage direction, so the
   teal rule stays with the note card and the code's added lines. */
.chat .handoff { margin: 14px 0 0; padding: 0; font-size: 1rem; font-style: italic; color: var(--muted); }
.walk-h { margin-top: 48px; }
.walk { margin-top: 8px; }

/* The control walkthrough: the label the person chose is the one in ink. It
   carries aria-current too, because a screen reader doesn't announce bold. */
.memcard-actions span[aria-current="true"] { color: var(--ink); font-weight: 600; }

/* "Delete, in order": the steps, then what is still left behind for now, in
   a quieter dashed box so it reads as a gap and not as a fourth step. Round 2:
   the box holds the "Which of these are left?" check instead of a title. */
.order { margin-top: 48px; }
.steps-after { margin: 0; padding: 16px 18px 18px; border: 1.5px dashed var(--stone-2); border-radius: 12px; background: var(--paper); color: var(--ink-2); font-size: 1rem; }
.steps-after > p { margin: 0 0 0.5em; }
.steps-after > :last-child { margin-bottom: 0; }

/* Developers, "One turn, traced". Round 2: the six steps are open, each with
   its old summary as a bold lead on its own line, and nothing is cut off: the
   code wraps inside its box. Below 560px the two JSON blocks scroll instead,
   like every other code block on the page, because a wrapped JSON line starts
   again at the left edge and loses its nesting; the prompt block still wraps. */
.trace > li { padding-top: 14px; padding-bottom: 16px; }
.trace-lead { font-weight: 600; color: var(--ink); margin: 3px 0 8px; }
.trace > li > p:not(.trace-lead) { margin: 0 0 8px; }
.trace > li > :last-child { margin-bottom: 0; }
.trace .code { margin: 0 0 8px; }
.trace .code:last-child { margin-bottom: 0; }
.trace pre, .trace pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.trace pre { padding: 12px 14px; }
@media (max-width: 559px) {
  .trace .code:not(.prompt) pre, .trace .code:not(.prompt) pre code { white-space: pre; overflow-wrap: normal; }
}
/* The system prompt step is sentences, so it is set in the body face. */
.trace .prompt pre { font-family: var(--sans); line-height: 1.5; }
.trace-note { font-size: 1rem; color: var(--muted); margin: 14px 0 0; }

/* A route name written on a diagram arrow (developers only). */
.loop text.route { font-family: var(--mono); }

/* A diagram that sits in a column. .loop switches drawings on the width of the
   screen; these switch on the width they are given, so a two-column layout
   gets the narrow drawing instead of a wide one shrunk to small type. Without
   container queries the narrow drawing shows at every width. */
.loop.in-col { container-type: inline-size; }
.loop.in-col .loop-wide { display: none; max-width: 640px; }
.loop.in-col .loop-narrow { display: block; max-width: 400px; margin: 0; }
@container (min-width: 560px) {
  .loop.in-col .loop-wide { display: block; }
  .loop.in-col .loop-narrow { display: none; }
}
.flow { margin: 28px 0 0; }
.loop.calls { margin: 32px 0; }

/* ── Visuals round 2 (2026-10-13): small puzzles instead of redrawings ── */
/* The reader picks or ticks something, then opens the answer. Nothing moves on
   its own and nothing needs a script: the pieces are native checkboxes, radios
   and <details>, so they work the same with JavaScript off. In print, and in a
   browser without :has(), every answer shows. Same rule as round 1: no size,
   shade, order or color says how old or how important a memory is. */

/* The one marking style on the site: a flat highlight, used to pair a word in
   one place with the same word somewhere else. Round 2 review: it was a teal
   underline, which read as a link next to the site's underlined links. It is
   decoration only; the words around it carry the meaning, and every mark is the
   same color. Print drops backgrounds, so it prints as an underline. */
.mark {
  background: var(--mark-bg); border-radius: 3px; padding: 0 2px; white-space: nowrap;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* A self-check: tick what you think, then open the answer. Ticking changes
   nothing on the page. How it works (which names went under your dad) and
   control (what is left after a delete). */
.check { margin: 0; padding: 0; border: 0; min-width: 0; }
.check > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 14px;
  font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  line-height: 1.25; color: var(--navy); text-wrap: balance;
}
.check > legend + * { clear: both; }
.check-opt {
  display: flex; align-items: flex-start; gap: 12px; min-height: var(--tap);
  padding: 10px 0; margin: 0; border-top: 1px solid var(--stone); cursor: pointer; color: var(--ink);
  text-wrap: pretty;
}
/* Control: the setup of the question on its own line, above the question. */
.check-setup { display: block; }
.check-opt:last-of-type { border-bottom: 1px solid var(--stone); }
/* font: inherit, so 1.55em is the label's own line height and the box sits on
   the first line of a label that wraps. */
.check-opt input {
  flex: none; font: inherit; width: 20px; height: 20px;
  margin: calc((1.55em - 20px) / 2) 0 0; accent-color: var(--focus); cursor: pointer;
}
.steps-after .check > legend { font-size: 1.25rem; }

/* The answer behind a check. The summary reads like a link until it is open.
   The body sits under a hairline (round 2 review: a teal rule here made teal
   mean five things). It does not fade in. */
details.answer { margin-top: 14px; }
details.answer > summary {
  display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; list-style: none;
  color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
details.answer > summary::-webkit-details-marker { display: none; }
details.answer > summary:hover { text-decoration-thickness: 2px; }
details.answer[open] > summary { color: var(--ink); text-decoration: none; }
.answer-body { margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--stone); }
.answer-body p { margin: 0 0 10px; }
.answer-body > :last-child { margin-bottom: 0; }
.answer-lead { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.2; color: var(--navy); }
/* Control: one verdict per option, in the order the options were asked. */
.verdicts { list-style: none; padding: 0; margin: 0 0 12px; }
.verdicts > li { margin: 0; padding: 12px 0; border-top: 1px solid var(--stone); }
.verdicts > li:first-child { border-top: 0; padding-top: 2px; }
.verdicts p { margin: 0; }
.verdict-opt { font-weight: 600; color: var(--ink); }
.verdict { display: block; margin: 2px 0; font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; color: var(--navy); }

/* How it works: the chat beside the check. */
.dad-check { margin-top: 56px; }
.dad-check .chat + p { margin-top: 12px; }

/* Home: pick the reply you would want, then read why. Each option is the
   app's own bubble, so the choice looks like the chat it belongs to. These are
   not .tabs-input: no panel switches, and nothing here is nested tabs. */
.pick { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.pick > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 12px;
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; color: var(--navy);
}
.pick > legend + * { clear: both; }
.pick-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: center; margin: 0 0 10px; }
.pick-opt:last-child { margin-bottom: 0; }
.pick-opt > input {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--field-line); border-radius: 50%; background: var(--white); cursor: pointer;
}
.pick-opt > input:checked { border: 6px solid var(--focus); }
.pick-opt > input:focus-visible { border-radius: 50%; }   /* the site-wide ring would square it off */
.chat .pick-opt > .msg {
  justify-self: start; max-width: none; width: auto; min-height: var(--tap); margin: 0;
  display: flex; align-items: center; border: 1.5px solid transparent; cursor: pointer;
}
.chat .pick-opt > .msg:hover { border-color: var(--stone-2); }
.chat .pick-opt > input:checked + .msg { border-color: var(--focus); }
.pick-why { grid-column: 2; margin: 8px 0 6px; font-size: 1rem; color: var(--ink-2); }
/* With :has(), a verdict shows once its reply is picked, and the reader can
   change the pick. Without it every verdict shows, which reads as a comparison
   with notes. */
@supports selector(:has(*)) {
  .pick-why { display: none; }
  .pick-opt:has(> input:checked) > .pick-why { display: block; }
}
@media (max-width: 559px) {
  .chat .pick-opt > .msg { justify-self: stretch; }
}

/* How it works, "What the model is handed": one message, the note it was
   handed, and the reply, side by side from 1000px with a hairline between
   them, one under the other below that. No arrows; the highlighted pair (the
   note's "probably Saturday" and the reply's "still Saturday") is the link. */
.spread { margin: 56px 0 0; }
.spread-title { margin: 0 0 20px; }
.spread-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.spread-col > :last-child { margin-bottom: 0; }
.spread-label { font-weight: 600; color: var(--navy); font-size: 1rem; margin: 0 0 10px; }
.spread .note-card { margin: 0; }
.chat .spread-why { font-size: 1rem; color: var(--ink-2); margin: 12px 0 0; }
.spread figcaption { font-size: 1rem; color: var(--muted); margin-top: 20px; }
@media (max-width: 999px) {
  .spread-col { max-width: var(--measure); }
}
@media (min-width: 1000px) {
  .spread-cols { grid-template-columns: 1fr 1.2fr 1fr; gap: 0; }
  .spread-col { padding: 0 24px; }
  .spread-col:first-child { padding-left: 0; }
  .spread-col:last-child { padding-right: 0; }
  .spread-col + .spread-col { border-left: 1px solid var(--stone); }
  .spread .chat { padding: 22px; }   /* a third of the page; the card's 28px left too little room */
}

/* Control walkthrough: what the app says the next time you ask, under each
   card, so each choice shows its effect on a reply. */
/* Five tabs fit on one row of a phone when the pills are a little narrower. */
/* Developers: the three handler tabs too ("As curl" wrapped onto a row of its own). */
@media (max-width: 479px) {
  .walk .tabs-list, .code-tabs .tabs-list { gap: 10px 5px; }
  .walk .tabs-label, .code-tabs .tabs-label { padding: 8px 11px; }
}
.next { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--stone); }
.next-label { font-weight: 600; color: var(--navy); font-size: 1rem; margin: 0 0 10px; }
/* The ledger record on the Delete tab, as the ruled table it is: one row, and
   no column for the words. It sits outside the card, so it reads as the ledger
   speaking, not the app's list. */
.ledger { width: 100%; border-collapse: collapse; margin: 18px 0 0; font-size: 1rem; line-height: 1.4; }
.ledger caption { caption-side: top; text-align: left; font-weight: 600; color: var(--navy); padding: 0 0 8px; }
/* Round 2 review: the ledger is written on the /api/v1 set only, so the table says so. */
.ledger-scope { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
.ledger th, .ledger td {
  text-align: left; vertical-align: top; padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--stone); overflow-wrap: break-word;
}
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger thead th { font-weight: 600; color: var(--muted); border-top: 1px solid var(--stone-2); border-bottom-color: var(--stone-2); }
.ledger-note { margin: 12px 0 0; padding: 6px 0 6px 14px; border-left: 3px solid var(--stone-2); font-size: 1rem; color: var(--ink-2); }

/* Developers: the handler without KAPEX and with it. The added lines are <ins>,
   which a screen reader announces as an insertion and which copies as plain
   code, with a teal rule down the left edge of the box. */
.code-tabs .tabs-panels { margin-top: 14px; }
/* What the teal rule means, inside the one panel that has it. */
.code .code-note { font-size: 1rem; color: var(--muted); margin: 10px 0 0; }
.code ins {
  display: block; text-decoration: none;
  margin-left: -18px; padding-left: 15px; border-left: 3px solid var(--teal);
}

/* Use cases: a note in the margin of the no-memory chat, in the reviewer's
   voice, under the bubble it is about. The KAPEX side has none. */
.chat .margin {
  width: fit-content; max-width: 86%; margin: -2px 0 12px; padding: 2px 0 2px 12px;
  border-left: 1px solid var(--stone-2); font-family: var(--serif); font-style: italic;
  font-size: 1rem; line-height: 1.4; color: var(--ink-2);
}
.chat .msg.me + .margin { margin-left: auto; }

/* ── Forced colours (Windows High Contrast) ───────────────────────── */
/* Fix round 3 (design review): the plus and minus are drawn with backgrounds and the
   chosen tab is shown only by its fill, and forced colours remove both. */
@media (forced-colors: active) {
  .qa > summary::before, .qa > summary::after { forced-color-adjust: none; background: CanvasText; }
  .tabs-input:checked + .tabs-label { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  /* Visuals round 2: the highlight (an underline here) and the picked reply keep a visible mark. */
  .mark { background: none; text-decoration: underline 2px CanvasText; text-underline-offset: 3px; }
  .pick-opt > input:checked { forced-color-adjust: none; border-color: Highlight; background: Canvas; }
  .chat .pick-opt > input:checked + .msg { border-color: Highlight; }
}

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

/* ── Print ────────────────────────────────────────────────────────── */
@media print {
  .site-header nav, .menu, .site-cta, .skip, .strata-strip, .actions { display: none !important; }
  .band, .band.quiet { padding: 16px 0; background: none; border: 0; }
  .tabs-panel, .qa > .qa-a, .chat details.later > .later-body, details.answer > .answer-body { display: block !important; }
  body { font-size: 12pt; }
  /* Visuals round 2: every verdict prints beside its reply, and the rings,
     which a printout can't use, are left off. */
  .pick-why { display: block !important; }
  .pick-opt > input { display: none !important; }
  .pick-opt { grid-template-columns: minmax(0, 1fr); }
  .pick-why { grid-column: 1; }
  .check, .pick-opt, .spread-col, .ledger { break-inside: avoid; }
  .mark { background: none; text-decoration: underline 1.5px; text-underline-offset: 3px; }
  /* Visuals round (2026-10-12): every tab panel prints, in order, under its own
     name. The stacked home tabs hid the unchosen panels with visibility, so a
     printout showed one panel only. */
  .tabs .tabs-panels { display: block !important; }
  .tabs .tabs-panel { visibility: visible !important; }
  .tabs .tabs-panel + .tabs-panel { margin-top: 18px !important; }
  .tabs .tabs-panel-label { display: block !important; }
  .tabs .tabs-list { display: none !important; }
  .tabs-panel, .chat, .memcard, .note-card, .steps > li, .loop svg { break-inside: avoid; }
  /* A closed reveal prints open, in order (where ::details-content is known;
     site.js opens them before printing everywhere else). */
  details::details-content { content-visibility: visible; display: block; }
  details.answer > summary { text-decoration: none; color: var(--ink); }
  .code pre code { white-space: pre-wrap; overflow-wrap: anywhere; }   /* paper does not scroll */
  /* site.js opens closed reveals on beforeprint, which starts their fade-in at
     opacity 0, and the page is captured before the next frame (build review):
     without this they print blank. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}