/* Distill-style article system for AI, But Simple.
 *
 * Everything an article needs except its own figures: design tokens, the
 * named-line layout grid, prose, citations, footnotes, math, appendix and
 * capture. Pair it with distill.js for the interactive furniture, and with
 * scripts/build-math.mjs to pre-render <d-math>.
 *
 * See _template.html for a working skeleton of every component.
 *
 * The layout grid is adapted from Distill's: content picks a width by naming
 * grid lines rather than by nesting containers.
 *
 *   .l-text     the reading column, the default
 *   .l-outset   696px, a little past the text
 *   .l-page     784px, the widest a figure goes, still centred
 *   .l-screen   edge to edge
 *   .l-gutter   kept as an alias so existing markup works; renders inline
 */

/* ---- tokens (AI, But Simple Web Design System) ---- */
  :root {
    --ink: #0b0d12; --ink-2: #565c68; --ink-3: #8a909b;
    --canvas: #fafbfc; --surface: #ffffff; --muted: #f1f2f5;
    --line: #e4e5ea; --grid: color-mix(in srgb, #848a9c, white 74%);
    --blue-100: #eef1f9; --blue-200: #dde3f4; --blue-300: #aab8e0;
    --accent: #46599e; --accent-hover: #37477d; --accent-active: #2b3866;
    --danger: #ce3f3f; --good: #1f9268;
    --accent-gradient: linear-gradient(135deg, #37477d 0%, #46599e 55%, #7688c9 100%);
    --accent-gradient-hover: linear-gradient(135deg, #2b3866 0%, #37477d 55%, #46599e 100%);
    --bg-panel: linear-gradient(160deg, #2b3866 0%, #46599e 45%, #9aacd6 85%, #eef1f9 100%);
    --shadow-md: 0 4px 16px rgba(8,11,18,.08); --shadow-lg: 0 14px 44px rgba(8,11,18,.12);
    --sans: 'Satoshi', -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --pixel: 'Geist Pixel', 'JetBrains Mono', monospace;
    --serif: 'Times New Roman', Times, Georgia, serif;
    --ease: cubic-bezier(.25,.46,.45,.94);
    --frame: max(880px, min(70vw, 1200px));
    --measure: 640px;  /* the reading column, and what figure apparatus aligns to */
  }
  * { box-sizing: border-box; margin: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 15px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; cursor: pointer; }
  ::selection { background: var(--accent); color: #fff; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  canvas, svg { display: block; }

  .frame { max-width: var(--frame); margin: 0 auto; border-left: 1px solid var(--grid); border-right: 1px solid var(--grid); background: var(--canvas); }
  .label { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
  .hl { font-family: var(--pixel); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; color: var(--accent); }

  /* ---- header ---- */
  header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--grid); }
  .header-in { max-width: var(--frame); margin: 0 auto; padding: 0 48px; height: 64px; display: flex; align-items: center; border-left: 1px solid var(--grid); border-right: 1px solid var(--grid); }
  .wordmark { font-weight: 600; font-size: 19px; letter-spacing: -.025em; }
  .wordmark span { font-weight: 400; color: var(--ink-2); transition: color .25s var(--ease); }
  .wordmark:hover span { color: var(--ink); }
  .nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
  .nav a.plain { position: relative; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .15s var(--ease); }
  .nav a.plain::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
  .nav a.plain:hover { color: var(--ink); }
  .nav a.plain:hover::after { transform: scaleX(1); }
  .nav a.pro { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #fff; background: var(--accent-gradient); padding: 8px 14px; transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
  .nav a.pro:hover { background: var(--accent-gradient-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }

  /* =================================================================
     Layout: named-line grid after Distill's, so a figure can sit in the
     text column, break out past it, or run the full page, and short asides
     can live in the right gutter beside the paragraph they annotate.
     ================================================================= */
  /* Symmetric rings around a fixed reading column, so text and every figure
     sit on the page's centre line. The contents list is furniture, not
     content: it is taken out of the flow entirely and pinned in the window
     margin, which is the only way to keep the column centred AND give the
     list somewhere to live that no figure can run underneath. */
  /* Track maxima sum to 880px, the frame's own floor, so the reading column
     stays 640px and the figure rings stay put at every window width instead of
     collapsing on a 1280px screen. Outer padding is the site's 48px, which is
     what keeps these pages' vertical rules on the same lines as every other. */
  .grid {
    display: grid;
    grid-template-columns:
      [screen-start] minmax(48px, 1fr)
      [page-start] minmax(0, 44px)
      [outset-start] minmax(0, 28px)
      [text-start] minmax(0, 640px) [text-end]
      minmax(0, 28px) [outset-end]
      minmax(0, 44px) [page-end]
      minmax(48px, 1fr) [screen-end];
  }
  .grid > * { grid-column: text; }
  .l-text { grid-column: text; }
  .l-outset { grid-column: outset; }  /* 696px: past the text, not dramatically */
  .l-page { grid-column: page; }      /* 784px, the widest a figure goes */
  .l-screen { grid-column: screen; }
  .l-gutter { grid-column: text; }   /* asides are indented notes in the column */
  .l-rail { grid-column: text; }

  aside.side { border-left: 2px solid var(--blue-200); padding-left: 16px; margin: 2px 0 22px; max-width: 560px; }

  @media (max-width: 900px) {
    :root { --frame: 100%; }
    .grid { grid-template-columns:
      [screen-start] 24px
      [page-start outset-start text-start] minmax(0, 1fr)
      [text-end outset-end page-end] 24px [screen-end]; }
  }

  /* ---- title block ---- */
  .title { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0H40V40' fill='none' stroke='%23848a9c' stroke-opacity='0.12'/%3E%3C/svg%3E"); border-bottom: 1px solid var(--grid); padding: 74px 0 0; }
  .title h1 { font-weight: 600; font-size: clamp(34px, 4.4vw, 50px); line-height: 1.07; letter-spacing: -.026em; margin: 14px 0 0; }
  .title .lede { margin-top: 20px; font-weight: 300; font-size: 20px; line-height: 1.52; color: var(--ink-2); }
  /* byline: the four-column metadata strip, after Distill's d-byline */
  .byline { grid-column: text; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; padding: 18px 0 26px; border-top: 1px solid var(--grid); }
  .byline h3 { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
  .byline p { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
  .byline p b { font-weight: 500; color: var(--ink); }
  @media (max-width: 720px) { .byline { grid-template-columns: 1fr 1fr; gap: 18px; } .title { padding-top: 48px; } .title .lede { font-size: 17.5px; } }

  /* ---- article prose ---- */
  article.grid { padding-bottom: 20px; position: relative; }
  .art-top { height: 52px; }
  .kicker { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-top: 62px; }
  h2 { font-weight: 500; font-size: 32px; line-height: 1.2; letter-spacing: -.02em; margin: 10px 0 22px; padding-bottom: 15px; border-bottom: 1px solid var(--grid); scroll-margin-top: 84px; }
  h3 { font-weight: 600; font-size: 18px; letter-spacing: -.004em; margin: 36px 0 10px; }
  h4 { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin: 30px 0 10px; }
  p { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); margin: 0 0 19px; }
  p strong, li strong { font-weight: 600; color: var(--ink); }
  /* editorial links: ink with a quiet rule, the accent reserved for controls */
  a.link { color: var(--ink); border-bottom: 1px solid var(--blue-300); transition: border-color .15s var(--ease), background .15s var(--ease); }
  a.link:hover { border-bottom-color: var(--accent); background: var(--blue-100); }
  ul, ol { margin: 0 0 19px; padding-left: 0; list-style: none; }
  li { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); margin-bottom: 11px; padding-left: 28px; position: relative; }
  ul > li::before { content: ''; position: absolute; left: 7px; top: 13px; width: 6px; height: 1px; background: var(--accent); }
  ol { counter-reset: s; }
  ol > li { counter-increment: s; }
  ol > li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 3px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; color: var(--accent); }
  code { font-family: var(--mono); font-size: .87em; background: var(--muted); padding: 1.5px 5px; color: var(--ink); }
  hr.sep { border: none; border-top: 1px solid var(--grid); margin: 58px 0; }

  /* inline citation, after Distill's superscript reference number */
  a.cite { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--accent); vertical-align: super; line-height: 0; margin-left: 1.5px; padding: 0 1px; border-bottom: none; }
  a.cite:hover { background: var(--blue-200); }
  a.cite.fnote::before { content: '['; } a.cite.fnote::after { content: ']'; }

  /* the preview card behind citations and footnotes, Distill's best small idea:
     you can check a reference without losing your place in the sentence */
  .hovercard { position: absolute; left: 0; top: 0; z-index: 60; background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow-lg); padding: 13px 15px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
    opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; }
  .hovercard.on { opacity: 1; visibility: visible; transform: none; }
  .hovercard b { font-weight: 600; color: var(--ink); }
  .hovercard em { font-style: normal; color: var(--ink); }
  .hovercard .tagf { display: none; }
  @media (prefers-reduced-motion: reduce) { .hovercard { transition: none; } }

  /* gutter aside, the sidenote slot */
  aside.side { font-size: 12.5px; line-height: 1.62; color: var(--ink-3); }
  aside.side b { font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }

  /* ---- math: real KaTeX, pre-rendered by scripts/build-math.mjs ----
     Authored with Distill's own element (see _template.html) and rendered to
     static markup before publishing, so no math JavaScript ships.

     Spacing follows Distill's d-math.css exactly: display equations are left
     aligned with a small indent and half-em margins, not centred blocks with
     a caption under them. That tightness is most of why their math reads
     cleanly next to prose. */
  .katex { font-size: 1.10em; -webkit-font-smoothing: antialiased; }
  .dmath { color: var(--ink); }
  .eq { overflow-x: auto; overflow-y: hidden; }
  .eq .katex-display { text-align: left; padding: 6px 0; margin: .5em 0 .5em 1.1em; }
  .eq .katex-display > .katex { text-align: left; }  /* KaTeX centres this by default */
  .eq .katex { font-size: 1.16em; }
  figcaption .katex, .toc .katex, .hovercard .katex { font-size: 1em; }

  /* ---- glossary ---- */
  dl.gloss { margin: 4px 0 24px; border-top: 1px solid var(--grid); }
  dl.gloss > div { display: grid; grid-template-columns: 176px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  dl.gloss dt { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); padding-top: 2px; }
  dl.gloss dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
  @media (max-width: 620px) { dl.gloss > div { grid-template-columns: 1fr; gap: 5px; } }

  /* =================================================================
     Figures. Distill's convention: the figure sits in the flow with no
     frame, and a small muted caption under it carries the number. The
     controls get one hairline to separate them from the prose.
     ================================================================= */
  figure { margin: 40px 0 44px; position: relative; }
  figure > .fbody { padding: 22px 0 0; border-top: 1px solid var(--grid); }
  /* Caption, controls and readouts stay on the text measure even when the
     figure breaks wider. A wide figure then reads as one visual with its
     apparatus beneath it, rather than as a cramped plot sitting next to a
     column of labels. --measure keeps them locked to the reading column. */
  figcaption { margin-top: 18px; font-size: 13px; line-height: 1.62; color: var(--ink-3); }
  figure figcaption,
  figure > .fbody > .ctrl,
  figure > .fbody > .seg,
  figure > .fbody > .readout,
  figure > .fbody > .stack { max-width: var(--measure); margin-left: auto; margin-right: auto; }
  figure > .fbody > .seg { display: flex; width: fit-content; }
  /* Distill runs captions as prose with no chip or rule; the number is here
     only because the body text refers to figures by number. */
  figcaption .fnum { font-weight: 600; color: var(--ink-2); margin-right: 2px; }
  figcaption b { font-weight: 600; color: var(--ink-2); }
  figcaption .m { color: var(--ink-2); }

  .ctrl { display: flex; flex-wrap: wrap; gap: 20px 30px; align-items: flex-start; margin-bottom: 22px; }
  .ctrl .f { display: flex; flex-direction: column; gap: 8px; min-width: 164px; flex: 1 1 164px; }
  .ctrl .f > span { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; gap: 10px; }
  .ctrl .f > span b { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
  /* the input is as tall as a text box with the hairline track centred in it,
     so a slider and a text input sit on one row without fighting */
  input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; outline: none; cursor: pointer; }
  input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--line); }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; margin-top: -5px; background: var(--accent); cursor: pointer; border: none; }
  input[type=range]::-moz-range-track { height: 1px; background: var(--line); }
  input[type=range]::-moz-range-thumb { width: 11px; height: 11px; background: var(--accent); cursor: pointer; border: none; border-radius: 0; }

  /* annotated slider ticks: named, clickable configurations under the track */
  /* pulled up under the track: the input is 40px tall with the track centred,
     so without the negative margin the marks float 20px adrift of it */
  .ticks { position: relative; height: 30px; margin-top: -19px; pointer-events: none; }
  .tick { pointer-events: auto; }
  /* a mark too close to its neighbour drops to a second row instead of
     overprinting it; the helper in the figure script sets the class */
  .tick.tick-low { top: 13px; }
  .tick.tick-low i { visibility: hidden; height: 2px; }
  .tick { position: absolute; top: 0; transform: translateX(-50%); background: none; border: none; padding: 0 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .tick i { display: block; width: 1px; height: 4px; background: #c3c6cf; }
  .tick span { font-family: var(--mono); font-size: 9px; letter-spacing: .03em; color: var(--ink-3); white-space: nowrap; transition: color .15s var(--ease); }
  .tick:hover i { background: var(--accent); }
  .tick:hover span { color: var(--accent); }
  .seg { display: inline-flex; border: 1px solid var(--line); background: var(--surface); }
  .seg button { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; padding: 7px 12px; background: none; border: none; border-right: 1px solid var(--line); color: var(--ink-3); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
  .seg button:last-child { border-right: none; }
  .seg button.on { background: var(--accent); color: #fff; }
  .seg button:not(.on):hover { background: var(--blue-100); color: var(--accent); }
  .tin { width: 100%; font-family: var(--mono); font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 10px 12px; transition: border-color .15s var(--ease); }
  .tin:focus { outline: none; border-color: var(--accent); }

  /* readouts: a quiet annotation strip, not a dashboard of cards */
  .readout { display: flex; flex-wrap: wrap; gap: 26px 40px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
  .readout > div { min-width: 92px; }
  .readout .k { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .readout .v { margin-top: 7px; font-size: 21px; font-weight: 500; letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--ink); }
  .readout .v small { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 3px; }


  /* ---- contents rail ---- */
  /* Pinned in the window margin, out of the flow, so the reading column stays
     centred and no figure can run underneath it. It appears only when the
     window is wide enough to hold it clear of the frame. */
  /* Contents: in the margin past the frame's left rule, right-aligned against
     it, starting under the byline. The nav itself is an absolute strip spanning
     the article's height; the inner block is sticky, so the list follows the
     reader after the byline scrolls away. Numbers sit inline so they share the
     text baseline. */
  .toc { display: none; }
  @media (min-width: 1260px) {
    .toc { display: block; position: absolute; grid-column: 1 / -1; top: 10px; bottom: 40px; right: calc(100% + 20px); width: 148px; text-align: left; }
  }
  .toc-in { position: sticky; top: 96px; }
  .toc ol { list-style: none; padding: 0; margin: 12px 0 0; counter-reset: t; }
  .toc li { counter-increment: t; margin: 0; padding: 0; }
  .toc li::before { content: none; }
  .toc a { display: block; padding: 5px 0; font-size: 12.5px; line-height: 1.38; color: var(--ink-3); border-bottom: none; transition: color .18s var(--ease); }
  .toc a::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; opacity: .7; margin-right: 8px; }
  .toc a:hover { color: var(--ink); }
  .toc a.on { color: var(--accent); }
  .toc a.on::before { opacity: 1; }

  /* ---- appendix ---- */
  .appendix { font-size: 13.5px; line-height: 1.7; color: var(--ink-3); border-top: 1px solid var(--grid); margin-top: 60px; padding: 52px 0 56px; }
  .appendix h3 { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 34px 0 12px; }
  .appendix h3:first-child { margin-top: 0; }
  .appendix p { font-size: 13.5px; line-height: 1.7; color: var(--ink-3); margin-bottom: 14px; }
  .appendix a { border-bottom: 1px solid var(--line); }
  .appendix a:hover { border-bottom-color: var(--ink-3); color: var(--ink-2); }
  ol.refs { counter-reset: r; margin: 0; }
  ol.refs > li { counter-increment: r; font-size: 13px; line-height: 1.6; color: var(--ink-3); padding-left: 32px; margin-bottom: 11px; }
  ol.refs > li::before { content: counter(r); position: absolute; left: 0; top: 1px; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink-3); }
  ol.refs > li b { font-weight: 500; color: var(--ink-2); }
  ol.refs > li em { font-style: normal; color: var(--ink-2); }
  ol.refs > li .tagf { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); padding: 1px 5px; margin-left: 6px; white-space: nowrap; }
  ol.refs > li:target { background: var(--blue-100); }

  /* ---- site chrome shared with the other marketing pages ---- */
  .life-under { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .rv { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: var(--d, 0ms); }
  .rv.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-weight: 500; font-size: 15px; border: 1px solid transparent; cursor: pointer; padding: 13px 22px; transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease); }
  .btn:active { transform: translateY(1px); }
  .btn.accent { background: var(--accent-gradient); color: #fff; }
  .btn.accent:hover { background: var(--accent-gradient-hover); box-shadow: var(--shadow-md); }

  /* ---- footer ---- */
  .frame > footer { position: relative; }
  .frame > footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: var(--grid); }
  footer .inner { padding: 72px 48px 40px; position: relative; max-width: var(--frame); margin: 0 auto; }
  footer h2 { font-weight: 500; font-size: 62px; line-height: 1.02; letter-spacing: -.02em; max-width: 560px; margin: 0 0 40px; border: none; padding: 0; }
  .fcols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
  .fcols .col { display: flex; flex-direction: column; gap: 9px; }
  .fcols .col a { font-size: 14px; color: var(--ink-2); transition: color .15s var(--ease); width: fit-content; }
  .fcols .col a:hover { color: var(--ink); }
  /* parked footer links: same type, no navigation */
  .fcols .col a:not([href]) { cursor: default; }
  .fcols .col a:not([href]):hover { color: var(--ink-2); }
  .fcols .col .label { margin-bottom: 3px; }
  .copyright { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
  /* 900px and the same nav treatment as every other page: links stay, the gap
     tightens. Hiding them left an article showing only PRO on a phone. */
  @media (max-width: 900px) {
    .header-in, footer .inner { padding-left: 24px; padding-right: 24px; }
    .nav { gap: 18px; }
    footer h2 { font-size: 44px; }
    .fcols { grid-template-columns: 1fr 1fr; }
    h2 { font-size: 26px; } p, li { font-size: 16px; }
  }
  @media (max-width: 420px) { .nav { gap: 13px; } .nav a.plain { font-size: 13px; } .wordmark { font-size: 17px; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* =================================================================
     Q&A disclosure list. <details> rather than a scripted accordion: it is
     keyboard and screen-reader correct for free, survives no-JS, and the
     browser's own find-in-page can open a closed answer.
     ================================================================= */
.qlist { border-top: 1px solid var(--line); margin: 26px 0 40px; }
  .q { border-bottom: 1px solid var(--line); }
  .q summary { display: grid; grid-template-columns: 42px 1fr 20px; align-items: baseline; gap: 4px;
    padding: 17px 0; cursor: pointer; list-style: none; transition: background .15s var(--ease); }
  .q summary::-webkit-details-marker { display: none; }
  .q summary::after { content: '+'; font-family: var(--mono); font-size: 15px; color: var(--ink-3);
    justify-self: end; transition: transform .2s var(--ease), color .2s var(--ease); }
  .q[open] summary::after { content: '+'; transform: rotate(45deg); color: var(--accent); }
  .q summary:hover .qt { color: var(--accent); }
  .q summary:hover::after { color: var(--accent); }
  .qn { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--accent); }
  .qt { font-size: 16.5px; line-height: 1.5; color: var(--ink); font-weight: 500; transition: color .15s var(--ease); }
  .qa { padding: 0 62px 22px 42px; }
  .qa p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 12px; }
  .qa p:last-of-type { margin-bottom: 10px; }
  .qsrc { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
  .qsrc:hover { color: var(--accent); border-color: var(--accent); }
  @media (max-width: 620px) {
    .q summary { grid-template-columns: 32px 1fr 18px; }
    .qa { padding: 0 0 20px 32px; }
    .qt { font-size: 15.5px; }
  }

  /* expand-all control, right-aligned above the first list */
  .qtools { display: flex; justify-content: flex-end; margin-bottom: -12px; }
  .qtools button { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); background: none; border: none; cursor: pointer; padding: 6px 0;
    border-bottom: 1px solid var(--line); transition: color .15s var(--ease), border-color .15s var(--ease); }
  .qtools button:hover { color: var(--accent); border-color: var(--accent); }

  /* The PRO panel: the site's one saturated surface, used once, at the end of
     a free piece. Card-on-gradient is the same treatment as the landing page,
     so an upsell never reads as a different property. */
  .propanel { position: relative; background: var(--bg-panel); padding: clamp(32px, 4vw, 56px); overflow: hidden; margin-top: 20px; }
  .propanel::after { content: ''; position: absolute; inset: 0; mix-blend-mode: overlay; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }
  .procard { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  .prohead { padding: 34px 34px 26px; border-bottom: 1px solid var(--line); }
  .prohead h2 { font-weight: 500; font-size: 30px; letter-spacing: -.02em; line-height: 1.15; margin: 10px 0 0; border: none; padding: 0; }
  .prohead p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 460px; }
  .prolist { display: grid; grid-template-columns: 1fr 1fr; }
  .prolist > div { padding: 22px 34px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .prolist > div:nth-child(odd) { border-left: none; }
  .prolist > div:nth-child(-n+2) { border-top: none; }
  .prolist h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; margin: 0 0 6px; }
  .prolist p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }
  .profoot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 26px 34px 30px; border-top: 1px solid var(--line); }
  .price { font-size: 15px; color: var(--ink-2); }
  .price b { font-size: 25px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans);
    font-weight: 500; font-size: 15px; border: 1px solid transparent; cursor: pointer; padding: 13px 26px;
    transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease); }
  .btn.accent { background: var(--accent-gradient); color: #fff; margin-left: auto; }
  .btn.accent:hover { background: var(--accent-gradient-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
  @media (max-width: 620px) {
    .prolist { grid-template-columns: 1fr; }
    .prolist > div { border-left: none; border-top: 1px solid var(--line); }
    .prolist > div:first-child { border-top: none; }
    .btn.accent { margin-left: 0; width: 100%; }
  }