.lg{max-width:1180px;margin:0 auto;padding:0 26px 70px}
.lg-head{padding:52px 0 30px;border-bottom:1px solid var(--line)}
.lg-head h1{font-family:var(--serif);font-size:clamp(30px,4vw,44px);
font-weight:600;letter-spacing:-.032em;margin:0 0 14px;color:var(--ink);
max-width:22ch;line-height:1.1}
.lg-head .lp-lede{margin-bottom:18px;font-size:16.5px}
.lg-stamp{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink3)}
.lg-stamp b{color:var(--ink2);font-weight:600}
.lg-banner{margin:22px 0 0;padding:15px 18px;border-radius:var(--r);
border:1px solid var(--warn);background:var(--panel);color:var(--ink2);
font-size:13.5px;line-height:1.6}
.lg-banner b{color:var(--warn)}
.lg-gap{color:var(--warn);border-bottom:1px dotted var(--warn);
font-style:italic;white-space:normal}
/* The contents list runs along the top rather than down the left.
   As a rail it was 230 pixels of column plus a 52-pixel gutter — a quarter of
   the reading width, permanently, so that a seven-item list could be visible.
   On the pages that are mostly diagrams that was the diagram's width being
   spent on its own table of contents. Sticking it to the top keeps what the
   rail was actually for (the map stays reachable at the bottom of a four
   thousand word notice) and costs one line of height instead. It also deletes
   the narrow-screen special case: one row of chips that scrolls sideways is
   the same thing on a phone as on a desk. */
.lg-body{padding-top:8px}
.lg-toc{position:sticky;top:0;z-index:6;display:flex;gap:6px;
align-items:center;font-size:12.5px;margin:0 0 30px;padding:9px 0;
background:var(--bg);border-bottom:1px solid var(--line);
overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lg-toc::-webkit-scrollbar{display:none}
/* The strip scrolls sideways when the headings do not fit across, and a hard
   cut at the right edge reads as a rendering fault rather than as more to
   come. The fade says which it is. Always on rather than only when there is
   something past it: a scroll listener on a contents list is not worth the
   forty pixels it would win back. */
.lg-toc{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 46px),
transparent);mask-image:linear-gradient(to right,#000 calc(100% - 46px),
transparent)}
.lg-toc b{flex:none;font-size:10.5px;letter-spacing:.07em;
text-transform:uppercase;color:var(--ink3);margin:0 6px 0 0}
.lg-toc a{flex:none;white-space:nowrap;padding:5px 11px;border-radius:20px;
color:var(--ink2);border:1px solid var(--line);line-height:1.35;
transition:color .14s,border-color .14s,background .14s}
.lg-toc a:hover{color:var(--ink);border-color:var(--accent);
background:var(--panel);text-decoration:none}
@media (max-width:700px){.lg-toc b{display:none}}
.lg-sec{padding:0 0 38px;scroll-margin-top:64px}
.lg-sec:last-child{padding-bottom:0}
.lg-sec h2{font-family:var(--serif);font-size:23px;font-weight:600;
letter-spacing:-.025em;margin:0 0 12px;color:var(--ink);text-transform:none}
.lg-sec h3{font-size:14px;font-weight:600;color:var(--ink);margin:24px 0 8px}
.lg-sec p,.lg-sec li{font-size:14.5px;line-height:1.68;color:var(--ink2)}
.lg-sec p{margin:0 0 14px;max-width:74ch}
.lg-sec ul,.lg-sec ol{margin:0 0 16px;padding-left:20px;max-width:74ch}
.lg-sec li{margin:0 0 7px}
.lg-sec b{color:var(--ink);font-weight:600}
.lg-sec a{color:var(--accent-ink)}
/* `.lg-sec a` is two classes and was quietly beating `.btn`, which is one — so
   the primary button inside the demonstration rendered as a green pill with
   invisible writing on it. Stated here rather than by making `.btn` louder
   everywhere, because the collision is local to these pages. It has happened
   once before, in the public header; see `.pub .sp a.btn` in ui.py. */
.lg-sec a.btn,.lg-sec a.btn:hover{color:var(--on-accent)}
.lg-note{border-left:2px solid var(--accent);background:var(--panel);
padding:15px 18px;border-radius:0 var(--r) var(--r) 0;margin:0 0 18px;
max-width:74ch}
.lg-note p{margin:0;font-size:13.5px}
.lg-t{width:100%;border-collapse:collapse;background:var(--panel);
border:1px solid var(--line);font-size:13px;margin:0 0 18px}
.lg-t th,.lg-t td{text-align:left;padding:12px 14px;
border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55;
color:var(--ink2)}
.lg-t th{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink3);background:var(--panel2);font-weight:600}
.lg-t td:first-child{color:var(--ink);font-weight:600}
.lg-t tr:last-child td{border-bottom:0}
@media (max-width:640px){.lg-t{display:block;overflow-x:auto;white-space:nowrap}
.lg-t td,.lg-t th{white-space:normal;min-width:140px}}
.lg-defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:14px;margin:0 0 20px}
/* Four of them, not three. `auto-fit` would put three across and leave the
   fourth alone beside an empty half-row, which reads as a card that failed to
   load rather than as a set of four. */
.lg-defs.four{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.lg-defs.four{grid-template-columns:1fr}}
.lg-defs>div{background:var(--panel);border:1px solid var(--line);
border-radius:var(--r);padding:18px 20px;
transition:border-color .18s,transform .18s}
.lg-defs>div:hover{border-color:var(--line3);transform:translateY(-2px)}
.lg-defs b{display:block;font-family:var(--serif);font-size:18px;
font-weight:600;color:var(--ink);margin:0 0 6px;letter-spacing:-.025em}
.lg-defs span{font-size:13px;line-height:1.55;color:var(--ink2)}
.lg-end{border-top:1px solid var(--line);margin-top:12px;padding:30px 0 0;
display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.lg-end p{margin:0;font-size:13.5px;color:var(--ink2);max-width:56ch}

/* ---------- diagrams ----------
   Two of these pages are answering "what do you actually do", and the honest
   answer is a shape rather than a paragraph. Prose describing a pipeline is a
   pipeline nobody pictures; every block below exists because it replaced
   several hundred words that were saying the same thing more slowly.

   All of it is built from the same tokens as the product, so a prospect who
   signs up meets the thing they were shown rather than a tidier drawing of
   it. */

.dg{margin:0 0 24px}
.dg-cap{font-size:12.5px;color:var(--ink3);margin:12px 0 0;line-height:1.55;
max-width:74ch}
.dg-cap b{color:var(--ink2)}

/* A chain of boxes with arrows between them: the whole product in one line. */
.dg-strip{display:flex;align-items:stretch;flex-wrap:nowrap}
.dg-box{flex:1 1 0;min-width:0;background:var(--panel);border:1px solid var(--line);
border-radius:var(--r);padding:15px 15px 17px;display:flex;flex-direction:column;
gap:6px;transition:border-color .18s,transform .18s}
.dg-box:hover{border-color:var(--line3);transform:translateY(-2px)}
.dg-box .k{font:600 10px/1 var(--mono);text-transform:uppercase;
letter-spacing:.07em;color:var(--ink3)}
.dg-box b{font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.4}
.dg-box span{font-size:12px;color:var(--ink3);line-height:1.5}
.dg-box.me{border-color:var(--accent)}
.dg-box.me .k{color:var(--accent-ink)}
.dg-arw{flex:0 0 30px;display:flex;align-items:center;justify-content:center;
color:var(--ink3);font-size:15px}
@media (max-width:720px){.dg-strip{flex-direction:column}
.dg-arw{flex:0 0 24px;transform:rotate(90deg)}}

/* Then and now: what buying used to look like, and what it looks like once an
   assistant is doing the shortlisting. */
.dg-tn{display:grid;gap:12px}
.dg-tn-row{display:grid;grid-template-columns:78px 1fr;gap:18px;
align-items:center;padding:17px 20px;border:1px solid var(--line);
border-radius:var(--r);background:var(--panel)}
.dg-tn-row.now{border-color:var(--accent)}
.dg-tn-k{font:600 10.5px/1.3 var(--mono);text-transform:uppercase;
letter-spacing:.07em;color:var(--ink3)}
.dg-tn-row.now .dg-tn-k{color:var(--accent-ink)}
.dg-chain{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
font-size:13px;color:var(--ink2)}
.dg-chain i{font-style:normal;color:var(--ink3);font-size:14px}
.dg-chain b{font-weight:600;color:var(--ink2);background:var(--panel2);
border:1px solid var(--line2);border-radius:999px;padding:7px 13px;
font-size:12.5px}
.dg-chain b.hit{border-color:var(--accent);color:var(--accent-ink);
background:color-mix(in srgb,var(--accent) 12%,transparent)}
.dg-chain b.out{border-color:var(--bad);color:var(--bad)}
@media (max-width:560px){.dg-tn-row{grid-template-columns:1fr;gap:10px}}

/* One AI answer, marked up. Three outcomes most tools average into a single
   score, shown as the three different things they are. */
.dg-ans{background:var(--panel);border:1px solid var(--line);
border-radius:var(--r);padding:20px 22px 18px}
.dg-ans-h{font:600 10.5px/1 var(--mono);text-transform:uppercase;
letter-spacing:.07em;color:var(--ink3);margin:0 0 14px}
.dg-ans p{font-family:var(--serif);font-weight:400;font-size:16.5px;line-height:1.75;
color:var(--ink);margin:0;max-width:none;letter-spacing:-.011em}
.dg-mk{border-radius:3px;padding:2px 4px;-webkit-box-decoration-break:clone;
box-decoration-break:clone}
.dg-mk.m1{background:color-mix(in srgb,var(--c1) 45%,transparent)}
.dg-mk.m2{background:color-mix(in srgb,var(--good) 42%,transparent)}
.dg-mk.m3{background:color-mix(in srgb,var(--c2) 45%,transparent)}
.dg-key{display:flex;gap:22px;flex-wrap:wrap;margin:18px 0 0;padding-top:15px;
border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.dg-grid+.dg-key{margin:0 0 4px;padding-top:0;border-top:0}
.dg-key span{display:flex;align-items:center;gap:8px}
.dg-key i{width:13px;height:13px;border-radius:3px;flex:none;
box-shadow:inset 0 0 0 1px var(--line2)}
.dg-key b{color:var(--ink);font-weight:600}

/* The denominator, drawn as the thing it is: one row per AI surface, one cell
   per question. Six rows of fifty is not a decorative arrangement of three
   hundred squares — it is the actual shape of a monthly scan, so the picture
   and the sentence under it are the same claim. */
.dg-grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
gap:6px 15px;align-items:center;margin:0 0 14px}
/* No width cap. The prose beside it is held to 74 characters because
   that is how far an eye tracks a line comfortably; a grid is not read
   that way, and one that stopped three hundred pixels short of the
   table under it read as a panel that had failed to fill. */
.dg-glab{font-size:11.5px;color:var(--ink2);white-space:nowrap;text-align:right}
.dg-gnum{font:500 11.5px/1 var(--mono);color:var(--ink3);white-space:nowrap}
/* `minmax(0,1fr)`, not `1fr`, in both directions. A plain `1fr` track refuses
   to go below its content's minimum width, so fifty of them side by side made
   the grid two and a half times the width of the column it sits in and it ran
   off the edge of the page. */
.dg-grow{display:grid;grid-template-columns:repeat(50,minmax(0,1fr));gap:2px;
min-width:0}
/* Every one of these states is prefixed, and the box is reset outright, after
   the outlined cells spent a release sitting below the row they belong to,
   twice the size of their neighbours. The class was called `gap`, and `.gap`
   already exists in ui.py as a card for a missing piece of evidence — border,
   padding, nine-pixel corners and all. `.dg-cell.gap` is the more specific
   selector so it won the two properties it declared and inherited the other
   four, which is the failure mode of a bare state class in a shared
   stylesheet: it does not lose an argument, it silently wins half of one. */
.dg-cell{aspect-ratio:1;border-radius:1px;background:var(--line2);
padding:0;margin:0;border:0;min-width:0;align-self:center}
.dg-cell.dg-named{background:var(--accent)}
.dg-cell.dg-failed{background:transparent;
box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--warn) 85%,transparent)}
@media (max-width:560px){.dg-grid{grid-template-columns:1fr}
.dg-glab,.dg-gnum{text-align:left}}
.dg-tally{display:flex;gap:30px;flex-wrap:wrap;margin:0 0 18px}
.dg-tally>div{display:flex;flex-direction:column;gap:2px}
.dg-tally b{font-family:var(--serif);font-size:26px;font-weight:600;
color:var(--ink);letter-spacing:-.032em;font-variant-numeric:tabular-nums}
.dg-tally b.on{color:var(--accent-ink)}
.dg-tally span{font-size:12px;color:var(--ink3)}

/* Two readings that look different and are not. */
.dg-bands{display:grid;gap:0;max-width:900px;margin:0 0 8px}
.dg-brow{display:grid;grid-template-columns:96px 1fr;gap:16px;
align-items:center}
.dg-bk{text-align:right;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);
line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.dg-bk small{display:block;font-family:var(--sans);font-size:11.5px;
color:var(--ink3)}
.dg-bt{position:relative;height:42px}
.dg-bt:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;
background:var(--line)}
/* The overlap, spanning both rows because the rows sit flush. The whole point
   of the picture is the region both readings are consistent with, and a
   caption asserting it is weaker than a stripe showing it. */
.dg-ov{position:absolute;top:0;bottom:0;
background:color-mix(in srgb,var(--warn) 11%,transparent);
border-left:1px dashed color-mix(in srgb,var(--warn) 60%,transparent);
border-right:1px dashed color-mix(in srgb,var(--warn) 60%,transparent)}
.dg-bs{position:absolute;top:13px;height:16px;border-radius:3px;
background:color-mix(in srgb,var(--accent) 24%,transparent);
border:1px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.dg-bp{position:absolute;top:9px;width:2px;height:24px;background:var(--ink)}
.dg-scale{display:flex;justify-content:space-between;font-size:11.5px;
color:var(--ink3);max-width:640px;padding-left:112px}

/* The product itself, on the page that is selling it. A window frame, because
   an app screen dropped straight into a marketing page reads as a mistake. */
.dg-app{border:1px solid var(--line2);border-radius:13px;overflow:hidden;
background:var(--bg)}
.dg-app-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
background:var(--panel2);border-bottom:1px solid var(--line)}
.dg-app-bar u{width:10px;height:10px;border-radius:50%;background:var(--line3);
flex:none;display:block}
.dg-app-url{flex:1;min-width:0;margin-left:9px;font:500 11.5px/1 var(--mono);
color:var(--ink3);background:var(--panel);border:1px solid var(--line);
border-radius:7px;padding:7px 12px;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
/* Says the same thing it always said, in the window's own voice rather than
   in warning yellow: a bordered hazard tag in the title bar read as a fault
   in the screen underneath it, which is the opposite of what it is for. A
   dot and quiet type still land first, because the bar is the first thing
   read in a window frame. */
.dg-app-tag{flex:none;display:inline-flex;align-items:center;gap:6px;
font:600 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;
color:var(--ink3);padding:6px 2px}
.dg-app-tag:before{content:"";width:5px;height:5px;border-radius:50%;
background:var(--line3);flex:none}
.dg-app-body{padding:24px 24px 28px}
@media (max-width:560px){.dg-app-body{padding:16px 14px 20px}
.dg-app-url{display:none}}

/* ---------- the app itself, running inside the front page ---------- */
.dg-demo{position:relative}
/* `fixed`, and this is the whole reason the section does not jump.
   Pressing a label focuses the input it names, and a browser scrolls a
   newly focused element into view — which, with the inputs at the top of a
   760px frame, threw the reader back up the page every time they opened a
   step. A fixed element is always in the viewport, so there is nothing to
   scroll to. It stays focusable, because the six steps have to be reachable
   and arrow-key switchable from the keyboard like the radio group they are. */
.dg-pick{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;
pointer-events:none}
/* The app frame is `height:100vh` in the product, which is right for a window
   and wrong for a section of a page. Bounded here instead, and the scrolling
   stays where the app puts it: inside the rail and inside the canvas, so
   opening a step never moves the page around it. */
/* And it is drawn smaller than life, which is the difference between showing
   the product and showing a squeezed version of it. The screens were captured
   from a real window about 1500px across; the prose column they are dropped
   into is 1128px, so at full size the canvas had 916px to lay out a report
   built for 1200 — the topic map spilled into a sideways scrollbar and every
   card came out cramped. `zoom` shrinks the type and the graphics together and
   hands the layout back the width it was designed against, so the whole report
   is visible at once, which is the only thing this section is here to do.
   Unlike `transform:scale` it is a real layout scale, so the frame takes the
   room it appears to take and nothing has to be nudged back into place.

   The height is divided by the same number: the frame occupies the page
   exactly as it did before, and what changed is how much of the app fits in
   it. Narrower windows get a smaller number, because the column they scale
   against is narrower too. */
.dg-demo{--dgz:.75}
@media (max-width:1080px){.dg-demo{--dgz:.68}}
@media (max-width:760px){.dg-demo{--dgz:.62}}
.dg-demo .app{zoom:var(--dgz);height:calc(min(78vh,760px) / var(--dgz))}
.dg-demo .dg-screen{display:none}
.dg-demo .canvas{padding:22px 22px 60px}
/* Everything that would have done something. Captured pages keep their
   buttons and their forms because a screen with its controls cut out is not
   the screen anybody gets — they are simply inert, and say so on hover. */
.dg-demo .dg-off{display:contents}
.dg-demo [disabled],.dg-demo .btn[disabled]{cursor:default;opacity:.55}
.dg-demo a[data-off]{cursor:default}
.dg-demo a[data-off]:hover{text-decoration:none}
/* A rail row and an in-page link are labels now, not anchors. Both are styled
   by class in the app's own sheet, so they need nothing here but a pointer. */
.dg-demo label.r,.dg-demo label.btn,.dg-demo label.node,
.dg-demo label.quiet{cursor:pointer}
#dgstep-flow:checked ~ .dg-app [data-step='flow']{display:block}
#dgstep-flow:checked ~ .dg-app [data-step='flow'] label.r[for='dgstep-flow']{background:var(--panel3);color:var(--ink);border-color:var(--line2)}
#dgstep-flow:focus-visible ~ .dg-app [data-step]:not([hidden]) label.r[for='dgstep-flow']{outline:2px solid var(--accent);outline-offset:2px}
#dgstep-page:checked ~ .dg-app [data-step='page']{display:block}
#dgstep-page:checked ~ .dg-app [data-step='page'] label.r[for='dgstep-page']{background:var(--panel3);color:var(--ink);border-color:var(--line2)}
#dgstep-page:focus-visible ~ .dg-app [data-step]:not([hidden]) label.r[for='dgstep-page']{outline:2px solid var(--accent);outline-offset:2px}
#dgstep-research:checked ~ .dg-app [data-step='research']{display:block}
#dgstep-research:checked ~ .dg-app [data-step='research'] label.r[for='dgstep-research']{background:var(--panel3);color:var(--ink);border-color:var(--line2)}
#dgstep-research:focus-visible ~ .dg-app [data-step]:not([hidden]) label.r[for='dgstep-research']{outline:2px solid var(--accent);outline-offset:2px}
#dgstep-questions:checked ~ .dg-app [data-step='questions']{display:block}
#dgstep-questions:checked ~ .dg-app [data-step='questions'] label.r[for='dgstep-questions']{background:var(--panel3);color:var(--ink);border-color:var(--line2)}
#dgstep-questions:focus-visible ~ .dg-app [data-step]:not([hidden]) label.r[for='dgstep-questions']{outline:2px solid var(--accent);outline-offset:2px}
#dgstep-visibility:checked ~ .dg-app [data-step='visibility']{display:block}
#dgstep-visibility:checked ~ .dg-app [data-step='visibility'] label.r[for='dgstep-visibility']{background:var(--panel3);color:var(--ink);border-color:var(--line2)}
#dgstep-visibility:focus-visible ~ .dg-app [data-step]:not([hidden]) label.r[for='dgstep-visibility']{outline:2px solid var(--accent);outline-offset:2px}
#dgstep-actions:checked ~ .dg-app [data-step='actions']{display:block}
#dgstep-actions:checked ~ .dg-app [data-step='actions'] label.r[for='dgstep-actions']{background:var(--panel3);color:var(--ink);border-color:var(--line2)}
#dgstep-actions:focus-visible ~ .dg-app [data-step]:not([hidden]) label.r[for='dgstep-actions']{outline:2px solid var(--accent);outline-offset:2px}

/* Question page: the group's other questions on the left, always all of them,
   the answer on the right. The rail is a permanent column rather than a menu
   that opens, because a reader who arrived at one question is usually one
   click from a second one and should be able to see it without discovering a
   control. The grid stretches both columns to the taller of the two, so the
   dividing rule runs the whole height and neither column ends in mid-air. */
.fq{max-width:1180px;margin:0 auto;padding:0 26px 70px}
.fq-wrap{display:grid;grid-template-columns:248px minmax(0,1fr);
align-items:stretch;gap:0}
.fq-rail{border-right:1px solid var(--line);padding:34px 26px 40px 0}
.fq-rail>b{display:block;font-size:10.5px;letter-spacing:.07em;
text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
.fq-rail a{display:block;font-size:13px;line-height:1.45;color:var(--ink2);
padding:8px 0;border-bottom:1px solid var(--line);
transition:color .14s,padding-left .14s}
.fq-rail a:last-of-type{border-bottom:0}
.fq-rail a:hover{color:var(--ink);padding-left:4px;text-decoration:none}
.fq-rail a.on{color:var(--ink);font-weight:600}
.fq-rail a.on:before{content:"";display:inline-block;width:3px;height:11px;
background:var(--accent);margin-right:8px;vertical-align:-1px;border-radius:2px}
.fq-main{padding:34px 0 0 40px;min-width:0}
.fq-crumb{font-size:12.5px;color:var(--ink3);margin:0 0 16px}
.fq-crumb a{color:var(--ink3)}
.fq-crumb a:hover{color:var(--ink)}
.fq h1{font-family:var(--serif);font-size:clamp(26px,3.2vw,37px);
font-weight:600;letter-spacing:-.032em;line-height:1.12;margin:0 0 20px;
color:var(--ink);max-width:24ch}
/* The one-sentence answer, before the reasoning. Somebody who reads only this
   box should not come away with a wrong impression, which is the test every
   one of them was written against. */
.fq-short{border-left:2px solid var(--accent);background:var(--panel);
padding:16px 20px;margin:0 0 28px;font-size:15.5px;line-height:1.6;
color:var(--ink);border-radius:0 var(--r) var(--r) 0}
.fq-body{font-size:14.5px;line-height:1.75;color:var(--ink2);max-width:68ch}
.fq-body p{margin:0 0 16px}
.fq-body h2{font-family:var(--serif);font-size:19px;font-weight:600;
color:var(--ink);margin:30px 0 12px;letter-spacing:-.025em}
.fq-body ul,.fq-body ol{margin:0 0 16px;padding-left:20px}
.fq-body li{margin:0 0 9px}
.fq-body b{color:var(--ink);font-weight:600}
.fq-body a{color:var(--accent-ink)}
.fq-scroll{overflow-x:auto;margin:0 0 8px}
.fq-table{width:100%;border-collapse:collapse;font-size:13px;
background:var(--panel);border:1px solid var(--line)}
.fq-table th{text-align:left;padding:11px 14px;font-size:11px;
letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);
border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
.fq-table td{padding:11px 14px;border-bottom:1px solid var(--line);
color:var(--ink2);vertical-align:top}
.fq-table tr:last-child td{border-bottom:0}
.fq-note{font-size:12px;color:var(--ink3);margin:0 0 22px;line-height:1.55}
/* What to read next, and what to do next, as one band rather than two. A
   question page that ends in nothing is a page that answered somebody and
   then let them leave. */
.fq-next{margin:38px 0 0;border-top:1px solid var(--line);padding:26px 0 0}
.fq-next>b{display:block;font-size:10.5px;letter-spacing:.07em;
text-transform:uppercase;color:var(--ink3);margin:0 0 14px}
.fq-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:10px;margin:0 0 26px}
.fq-rel a{display:block;background:var(--panel);border:1px solid var(--line);
border-radius:var(--r);padding:14px 16px;font-size:13.5px;line-height:1.45;
color:var(--ink2);transition:border-color .14s,color .14s}
.fq-rel a:hover{border-color:var(--accent);color:var(--ink);
text-decoration:none}
.fq-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;
flex-wrap:wrap;background:var(--panel3);border:1px solid var(--line2);
border-radius:var(--r);padding:20px 22px}
.fq-cta p{margin:0;font-size:13.5px;color:var(--ink2);max-width:56ch;
line-height:1.6}
.fq-cta b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px;
font-family:var(--serif);font-weight:600;letter-spacing:-.02em}
/* Index: one card per group, every question inside it listed. Auto-fit rather
   than a fixed three so a group added later re-flows instead of leaving a
   hole in the last row. */
.fq-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:16px;margin:0 0 34px}
.fq-group{background:var(--panel);border:1px solid var(--line);
border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column}
.fq-group h2{font-family:var(--serif);font-size:18px;font-weight:600;
margin:0 0 6px;color:var(--ink);letter-spacing:-.025em}
.fq-group>p{font-size:12.5px;color:var(--ink3);margin:0 0 14px;line-height:1.55}
.fq-group ol{list-style:none;margin:0;padding:0;flex:1}
.fq-group li{border-top:1px solid var(--line)}
.fq-group li a{display:block;padding:11px 0;font-size:13.5px;line-height:1.45;
color:var(--ink2);transition:color .14s,padding-left .14s}
.fq-group li a:hover{color:var(--ink);padding-left:4px;text-decoration:none}
@media (max-width:860px){
.fq-wrap{grid-template-columns:1fr}
.fq-rail{border-right:0;border-bottom:1px solid var(--line);
padding:24px 0 20px;order:2}
.fq-main{padding:28px 0 0}
}