/* =========================================================================
   ROLE PAGES -- /for/<role>/
   =========================================================================
   Was for/role.css and served five pages; promoted to /site.css on
   2026-09-17 when the site went from eight pages to thirty. Every page except
   /landing/ loads this one file, because the header, the footer, the contact
   sheet and now the breadcrumbs have to stay identical across all of them and
   a copied block drifts the first time one is edited.
   (/landing/ and /regulation/ each inline their own CSS and already differ in
   small ways -- .btn is a pill on one and a 10px radius on the other. That is
   the drift this file exists to avoid repeating five more times.)

   External stylesheet is allowed: the CSP is `style-src 'self' 'unsafe-inline'`.

   THE PALETTE IS THE LANDING PAGE'S, unchanged. A prospect arriving here from
   a link in a board pack and then clicking through to the home page must not
   feel they changed sites.
   ========================================================================= */

:root {
  --brand:#0b0120; --brand-2:#241155; --page:#ffffff; --panel:#faf9fd;
  --line:#e4e2ec; --line-strong:#cfc9de;
  --gold:#d9a441; --gold-ink:#8a6410; --gold-soft:rgba(217,164,65,.13);
  --text:#0b0120; --muted:#6b6484; --neg:#c0392b; --pos:#1e7a4d;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; background: var(--page); color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---- header, identical to /landing/ and /regulation/ -------------------- */
header.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topin { display:flex; align-items:center; gap:12px; height:80px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand svg.mark { width:27px; height:27px; color: var(--brand); flex:none; }
.brandname { font-weight:700; font-size:17px; letter-spacing:-.015em; }
.topspace { margin-left:auto; display:flex; align-items:center; gap:26px; }
.toplink {
  display:inline-flex; align-items:center; gap:7px;
  font-size:14.5px; color:var(--muted); text-decoration:none;
  padding:8px 0; border-bottom:2px solid transparent;
}
.toplink:hover { color:var(--text); }
.toplink.on { color:var(--gold-ink); font-weight:600; cursor:default; border-bottom-color:var(--gold); }
.topspace .btn:first-of-type { margin-left:10px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; font-size:14.5px; font-weight:600;
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--brand); background:var(--brand); color:#fff;
  /* EXPLICIT: .btn is worn by both <a> and <button>, and a button's UA
     line-height is `normal` where an anchor inherits the body's 1.6. Without
     this the two render different heights side by side in the header. */
  line-height:1.5; font-family:inherit; cursor:pointer; white-space:nowrap;
}
.btn:hover { background:var(--brand-2); border-color:var(--brand-2); }
.btn.ghost { background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn.ghost:hover { background:var(--panel); border-color:var(--muted); }
.btn.gold { background:var(--gold); border-color:var(--gold); color:var(--brand); }
.btn.gold:hover { background:#c8952f; border-color:#c8952f; }
.btn.lg { font-size:16px; padding:14px 26px; }

  /* ---- the mega menus -----------------------------------------------------
   Kieran, 2026-09-17: "use minimalist mega menus as we have in the main app."
   So these ARE the app's -- values ported from App.css's .navmega block rather
   than redesigned. The token names differ because the app's --card is this
   site's white and its --page is this site's --panel; everything else (the
   34px tile, the 272px column floor, the 8px/48px gaps, the barely-there
   shadow) is the same number.

   NO SCRIPT, same as the dropdown they replace: the CSP is script-src 'self'
   with no inline, /legal-spine/ loads no script at all, and a stylesheet
   cannot keep aria-expanded honest -- a hardcoded "false" beside an open panel
   is worse than no attribute. Hover and :focus-within open it; the trigger is
   a real link, so a tap or an Enter goes to the section index instead.

   THE PANEL POSITIONS AGAINST THE HEADER, NOT THE TRIGGER. header.top is
   already `position: sticky`, which makes it the containing block, so
   left:0;right:0 spans the page. .megawrap must therefore stay static --
   positioning it is exactly the bug App.css records, where the panel collapsed
   to the width of one nav button. */
header.top { position: sticky; }          /* restated: it is the containing block */
.megawrap { position: static; display: inline-flex; align-items: center; align-self: stretch; }
.megawrap > .toplink { cursor: pointer; }

/* Drawn, not typed: a rotating chevron is one shape moving, where a v swapped
   for a ^ is two shapes. Straight from the app. */
.navchev {
  width: 6px; height: 6px; flex: none; margin-top: -3px; margin-left: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.megawrap:hover .navchev, .megawrap:focus-within .navchev {
  transform: rotate(-135deg); margin-top: 2px;
}

.navmega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Barely there. A full-width panel separated by a rule does not need a drop
     shadow to read as above the page. */
  box-shadow: 0 14px 26px -20px rgba(11,1,32,.3);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .13s ease, transform .13s ease, visibility .13s;
}
.megawrap:hover .navmega, .megawrap:focus-within .navmega {
  opacity: 1; visibility: visible; transform: none;
}
.navmegainner { padding: 26px 24px 24px; }
/* A quiet label above the columns: it names the layer you have opened without
   competing with the destinations. */
.navmegacaption { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.navmegacols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 8px 48px;
}
.navmegacol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Sentence case, not caps -- the uppercase tracking was shouting a heading
   that only needs to be legible. */
.navmegahead { font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 10px 8px; }
.navmegaitem {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 10px; border: 0; border-radius: 10px;
  background: none; text-align: left; text-decoration: none;
  font: inherit; color: inherit; width: 100%;
}
.navmegaitem:hover, .navmegaitem:focus-visible { background: var(--panel); }
.navmegaitem.on { background: var(--panel); }
.navmegaitem.on .navmegalabel { color: var(--gold-ink); }
/* A PALE tile with a muted glyph. */
.navmegaicon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
}
.navmegaitem:hover .navmegaicon { color: var(--gold-ink); }
.navmegaitem.on .navmegaicon { background: var(--gold-soft); border-color: transparent; color: var(--gold-ink); }
.navmegatext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.navmegalabel { font-size: 14px; font-weight: 600; }
.navmegablurb { font-size: 12.2px; color: var(--muted); line-height: 1.45; }
/* The exit, on its own faint band across the whole width and centred. */
.navmegaall {
  display: block; width: 100%; padding: 13px 20px;
  border: 0; border-top: 1px solid var(--line);
  background: var(--panel); text-decoration: none;
  font: inherit; font-size: 13px; font-weight: 600; text-align: center;
  color: var(--muted);
}
.navmegaall:hover { color: var(--gold-ink); }
@media (max-width: 900px) { .navmegainner { padding: 20px 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .navmega, .navchev { transition: none; } }

/* ---- the role hero ------------------------------------------------------
   No product screenshot. The landing page opens with the interface because a
   stranger needs to see what the thing is; somebody who has clicked "for the
   CFO" has already been told, and what they want is the argument. So the hero
   is type, and the first thing under it is a claim with a number in it. */
.rhero { padding: 64px 0 8px; }
/* THE MEASURE GOES ON THE CHILDREN, NOT THE CONTAINER. This read
   `.rheroin { max-width: 860px; }` -- set on the .wrap itself, which is
   `margin: 0 auto`, so it CENTRED the hero inside a narrower box while every
   section below stayed centred at 1180. The two left edges then disagreed by
   (1180 - 860) / 2 = 160px at full width, and the whole page below the hero
   read as shifted left against it. Measured at 1009px: hero h1 at x=99,
   section h2 at x=24.
   The container now keeps .wrap's edge, and the readable line length is capped
   per child instead. .lead, .premise, .answerbox and .facttable each carry a
   tighter measure of their own, so this only really binds h1 and the buttons. */
.rheroin > * { max-width: 860px; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-ink); background:var(--gold-soft);
  padding:6px 13px; border-radius:999px; margin-bottom:22px;
}
.eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }
h1 { font-size: clamp(34px, 4.2vw, 54px); line-height:1.04; letter-spacing:-.03em; margin:0 0 20px; text-wrap:balance; }
h1 .two { color: var(--gold-ink); }
.lead { font-size:19px; color:var(--muted); max-width:58ch; margin:0 0 30px; text-wrap:pretty; }
.cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* The lifeblood line. Same thought on all five pages, said in the language of
   the person reading it -- a CFO's version of "rent is the lifeblood" is not a
   CX Director's. Set apart because it is the premise the rest of the page
   argues from, not one of the arguments. */
.premise {
  margin: 40px 0 0; padding: 22px 26px;
  border-left: 3px solid var(--gold); background: var(--gold-soft);
  border-radius: 0 10px 10px 0; max-width: 72ch;
}
.premise p { margin:0; font-size:17.5px; line-height:1.55; text-wrap:pretty; }
.premise p + p { margin-top:12px; color:var(--muted); font-size:16px; }

/* ---- bands --------------------------------------------------------------*/
section.band { padding: 72px 0; border-top:1px solid var(--line); }
section.band.alt { background:var(--panel); }
.seyebrow {
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-ink); margin:0 0 10px;
}
h2 { font-size: clamp(26px, 2.8vw, 34px); line-height:1.15; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance; }
/* SCOPED, not on the bare h2. /landing/ and /legal-spine/ load this file
   before their own <style>, and a bare `max-width:26ch` is one of the few
   things those pages do not redefine -- so it leaked, and /legal-spine/'s
   22px headings started wrapping after three words. Section headings on the
   generated pages still want the measure; a page's own headings do not. */
section.band h2, .rhero h2, section.close h2 { max-width:26ch; }
.sublead { font-size:17px; color:var(--muted); max-width:70ch; margin:0 0 34px; text-wrap:pretty; }

/* ---- the figure row -----------------------------------------------------
   Four answers the product produces across the whole book. NOT invented
   numbers: each card states WHAT IS COUNTED and what it is counted against,
   with no value, because a specimen figure on a marketing page is read as a
   benchmark and we have none. The unit line is the honest part. */
/* EXPLICIT COLUMN COUNTS rather than auto-fit. There are always four of these,
   and auto-fit went 4 -> 3 -> 1 as the viewport narrowed, leaving the fourth
   card sitting alone in a row of its own at tablet width. 4 / 2 / 1 always
   fills the row it is on. */
.figs { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; }
@media (max-width: 1040px) { .figs { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .figs { grid-template-columns: minmax(0,1fr); } }
.fig {
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px;
  display:flex; flex-direction:column; gap:8px;
}
section.band.alt .fig { background:#fff; }
.fig .figq { font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-ink); }
.fig h3 { margin:0; font-size:17.5px; line-height:1.3; letter-spacing:-.01em; }
.fig p { margin:0; font-size:14.5px; color:var(--muted); line-height:1.55; }
.fig .figstat { margin:0; font-size:12.5px; color:var(--muted); font-style:italic; }

/* ---- the argument list --------------------------------------------------
   Numbered because these ARE a sequence -- each one is the answer to the
   objection the previous one raises. Numbering a set that is not a sequence
   is decoration; numbering this one is information. */
.args { display:flex; flex-direction:column; gap:0; counter-reset: arg; }
.arg {
  display:grid; grid-template-columns: 54px minmax(0,1fr); gap:20px;
  padding:28px 0; border-top:1px solid var(--line);
}
.arg:first-child { border-top:none; padding-top:0; }
.argnum {
  counter-increment: arg;
  font-size:13px; font-weight:700; color:var(--gold-ink);
  font-variant-numeric: tabular-nums; padding-top:4px;
}
.argnum::before { content: "0" counter(arg); }
.arg h3 { margin:0 0 8px; font-size:20px; line-height:1.28; letter-spacing:-.015em; max-width:34ch; }
.arg p { margin:0 0 10px; color:var(--muted); max-width:72ch; text-wrap:pretty; }
.arg p:last-child { margin-bottom:0; }
.arg p strong { color:var(--text); font-weight:600; }
.argstat { font-size:13px; color:var(--muted); font-style:italic; margin:0 0 10px !important; }
.argwhere {
  display:inline-block; margin-top:4px; font-size:13.5px; font-weight:600;
  color:var(--gold-ink); border-bottom:1px solid var(--gold); text-decoration:none; padding-bottom:1px;
}

/* ---- a plain two-column contrast ---------------------------------------- */
.contrast { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:20px; }
.contrast > div { padding:22px 24px; border-radius:12px; border:1px solid var(--line); background:#fff; }
.contrast h3 { margin:0 0 10px; font-size:16px; letter-spacing:.02em; text-transform:uppercase; font-size:12.5px; font-weight:700; }
.contrast .bad h3 { color:var(--neg); }
.contrast .good h3 { color:var(--pos); }
.contrast ul { margin:0; padding-left:18px; color:var(--muted); font-size:15px; }
.contrast li + li { margin-top:8px; }

/* ---- the limits band ----------------------------------------------------
   Every /Differentiators/ note in the vault ends with one of these, for the
   reason it exists here: a claim a prospect could quote back after an adverse
   finding is the claim to cut, and the fastest way to make sure none are on
   the page is to publish the boundary beside them. */
.limits { background: var(--brand); color:#fff; }
.limits h2 { color:#fff; }
.limits .seyebrow { color: var(--gold); }
.limits .sublead { color: rgba(255,255,255,.72); }
.limitlist { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:18px; }
.limitlist div { border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:18px 20px; background:rgba(255,255,255,.03); }
.limitlist h3 { margin:0 0 8px; font-size:16px; letter-spacing:-.01em; }
.limitlist p { margin:0; font-size:14.5px; color:rgba(255,255,255,.7); line-height:1.55; }

/* ---- the other four -----------------------------------------------------*/
.others { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:14px; }
.other {
  display:block; text-decoration:none; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:18px 20px;
}
.other:hover { border-color:var(--line-strong); background:var(--panel); }
.other .orole { font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--gold-ink); }
.other h3 { margin:6px 0 0; font-size:16px; line-height:1.35; letter-spacing:-.01em; }

/* ---- close --------------------------------------------------------------*/
section.close { padding: 78px 0 84px; border-top:1px solid var(--line); text-align:center; }
section.close h2 { margin-left:auto; margin-right:auto; }
section.close .sublead { margin-left:auto; margin-right:auto; text-align:center; }
section.close .cta { justify-content:center; }

/* ---- footer -------------------------------------------------------------*/
footer { border-top:1px solid var(--line); background:var(--panel); padding:28px 0; }
.footin { display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:13.5px; color:var(--muted); }
.footright { margin-left:auto; display:flex; gap:18px; flex-wrap:wrap; }
.footright a { text-decoration:none; }
.footright a:hover { text-decoration:underline; color:var(--text); }
.asbtn { background:none; border:none; padding:0; font:inherit; color:inherit; cursor:pointer; }
.asbtn:hover { color:var(--text); text-decoration:underline; }

/* ---- the contact sheet, markup and behaviour shared with /landing/ -------*/
.scrim {
  position:fixed; inset:0; z-index:60; background:rgba(11,1,32,.46);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.scrim[hidden] { display:none; }
.sheet {
  position:relative; background:#fff; border-radius:16px; width:min(520px,100%);
  max-height:90vh; overflow:auto; padding:28px 30px 24px;
  box-shadow:0 30px 70px rgba(11,1,32,.3);
}
.shclose { position:absolute; top:12px; right:14px; background:none; border:none; font-size:17px; color:var(--muted); cursor:pointer; }
.sheet h2 { font-size:24px; margin:0 0 8px; }
.shsub { margin:0 0 18px; color:var(--muted); font-size:14.5px; }
.fld { display:block; margin-bottom:14px; }
.fld span { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.fld input, .fld textarea {
  width:100%; font:inherit; font-size:14.5px; padding:10px 12px;
  border:1px solid var(--line-strong); border-radius:9px; background:#fff; color:var(--text);
}
.fld textarea { min-height:96px; resize:vertical; }
.hp { position:absolute; left:-9999px; }
.shfoot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px; }
.shnote { font-size:13px; color:var(--muted); }
#contactMsg { padding:10px 12px; border-radius:9px; font-size:14px; margin-bottom:14px; }
#contactMsg.ok { background:rgba(30,122,77,.1); color:var(--pos); }
#contactMsg.err { background:rgba(192,57,43,.1); color:var(--neg); }

/* ---- narrow -------------------------------------------------------------*/
@media (max-width: 860px) {
  .arg { grid-template-columns: 1fr; gap:6px; }
  .argnum { padding-top:0; }
}
/* THE HEADER SHEDS ITS LINKS BEFORE IT WRAPS -- the same staging as the
   landing page's, and for the reason recorded there: at 390px the wordmark and
   "Speak to us" had each broken onto two lines and Sign in ran off the right
   edge. The links here point at the HOME page's sections rather than this
   one's, so they are not merely redundant when dropped -- but a header that
   overflows is worse than a header with four fewer links, and every one of them
   is reachable from the footer's home link. Sign in is the only thing somebody
   arrived to do, so it is the last to go. */
@media (max-width: 760px) {
  .topin { height:64px; }
  .brandname, .btn, .toplink { white-space: nowrap; }
  .topspace { gap:10px; }
  .toplink, .megawrap { display:none; }
  .rhero { padding-top:44px; }
  section.band { padding:56px 0; }
  .footright { margin-left:0; }
}
@media (max-width: 520px) {
  /* One more thing has to go at phone width: the wordmark plus BOTH buttons
     measured 385px against a 375px viewport, which is a page that scrolls
     sideways. The header's "Speak to us" is the one to drop -- it appears
     again in the hero, again at the close, and again in the footer, so
     nothing is lost; "Sign in" appears only here. */
  .topspace > .btn.gold { display:none; }
  .btn { padding:9px 15px; font-size:14px; }
  h1 { font-size:33px; }
  .lead, .sublead, .premise p { font-size:16px; }
  .wrap { padding:0 18px; }
  .premise { padding:18px 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }


/* =========================================================================
   ADDED 2026-09-17 WITH THE SEO/ANSWER LAYER
   ========================================================================= */

/* ---- breadcrumbs --------------------------------------------------------
   On the page as well as in JSON-LD. A consumer that ignores structured data
   still gets the hierarchy, and a reader arriving from a search result on an
   /answers/ page needs to know what site they have landed on. */
.crumbs {
  border-bottom:1px solid var(--line); background:var(--panel);
  font-size:13px; color:var(--muted);
}
.crumbs .wrap { padding-block:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.crumbs a { text-decoration:none; }
.crumbs a:hover { color:var(--text); text-decoration:underline; }
.crumbs .csep { opacity:.45; }
.crumbs [aria-current] { color:var(--text); font-weight:600; }

/* ---- the answer box -----------------------------------------------------
   The first self-contained block under the h1, and the reason these pages
   exist. Visually set apart because it is also the thing a human skims for. */
.answerpage h1 { max-width:20ch; }
.answerbox {
  margin:6px 0 30px; padding:24px 28px; max-width:70ch;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:14px;
  border-left:4px solid var(--gold);
}
.ashort {
  margin:0 0 12px; font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold-ink);
}
.answerbox p:not(.ashort) { margin:0; font-size:18px; line-height:1.55; text-wrap:pretty; }
.answerbox p + p { margin-top:12px; }

/* ---- the fact table -----------------------------------------------------
   Tables are lifted by answer engines far more readily than prose, so the
   checkable facts go in one on every answer page. */
.facttable {
  width:100%; max-width:74ch; border-collapse:collapse; margin:0 0 8px;
  font-size:15px; text-align:left;
}
.facttable caption {
  text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-ink); padding-bottom:10px;
}
.facttable th, .facttable td { padding:11px 14px; border-top:1px solid var(--line); vertical-align:top; }
.facttable tr:first-child th, .facttable tr:first-child td { border-top:none; }
.facttable th {
  width:30%; font-weight:600; color:var(--muted); white-space:nowrap;
}
@media (max-width:620px) {
  .facttable th, .facttable td { display:block; width:auto; white-space:normal; }
  .facttable td { padding-top:0; border-top:none; }
}

/* ---- long-form prose ----------------------------------------------------*/
/* SAME TRAP AS .rheroin, one level down: a max-width on the .wrap itself
   centres it, so the prose on an answer page sat 132px right of the hero above
   it. .prosebody is a plain div with no auto margins and can be measured
   directly; the .wrap cannot, so it measures its children instead. */
.prosebody { max-width:74ch; }
.prose .wrap > * { max-width:74ch; }
.prose h2, .prosebody h2 { font-size:25px; margin:38px 0 10px; }
.prose > .wrap > h2:first-child { margin-top:0; }
.prose p, .prosebody p { margin:0 0 14px; color:var(--muted); text-wrap:pretty; }
.prose p strong, .prosebody p strong { color:var(--text); font-weight:600; }
.prose ul, .prosebody ul { margin:0 0 16px; padding-left:20px; color:var(--muted); }
.prose li + li, .prosebody li + li { margin-top:8px; }

/* ---- the limits list, plain variant ------------------------------------*/
.limitplain { margin:0; padding-left:20px; max-width:74ch; }
.limitplain li { color:rgba(255,255,255,.76); margin-bottom:12px; line-height:1.6; }
.limitplain li strong { color:#fff; }
.limitplain a { color:var(--gold); }

/* ---- the FAQ ------------------------------------------------------------
   <details> rather than a script: it is keyboard-accessible, needs no JS
   under a CSP of script-src 'self', and the answer text is in the DOM whether
   or not it is open -- which is what matters for the FAQPage markup beside it. */
.faqlist { max-width:74ch; border-top:1px solid var(--line); }
.faq { border-bottom:1px solid var(--line); }
.faq summary {
  cursor:pointer; padding:16px 0; font-size:17px; font-weight:600;
  letter-spacing:-.01em; list-style:none; display:flex; gap:12px; align-items:flex-start;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before {
  content:"+"; color:var(--gold-ink); font-weight:700; flex:none;
  width:1em; text-align:center;
}
.faq[open] summary::before { content:"\2212"; }
.faq summary:hover { color:var(--gold-ink); }
.faq p { margin:0 0 18px; padding-left:calc(1em + 12px); color:var(--muted); max-width:66ch; }
.reviewed { margin:28px 0 0; font-size:13px; color:var(--muted); font-style:italic; max-width:70ch; }

/* ---- the answers index --------------------------------------------------*/
.anslist { display:grid; gap:14px; max-width:860px; }
.ansrow {
  display:block; text-decoration:none; padding:20px 24px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
}
.ansrow:hover { border-color:var(--line-strong); background:var(--panel); }
.ansrow h3 { margin:0; font-size:19px; line-height:1.3; letter-spacing:-.015em; }
.ansshort { margin:6px 0 0; font-size:14.5px; color:var(--muted); }

/* ---- the glossary -------------------------------------------------------
   ONE PAGE, NOT ONE PER TERM: twenty-two pages of forty words each is a
   thin-content pattern that drags a whole domain down. Anchored definitions
   plus DefinedTermSet markup win the same "what is X" queries without it. */
.gterms { columns:2; column-gap:40px; max-width:1000px; }
.gterm { break-inside:avoid; margin:0 0 26px; }
.gterm h3 { margin:0 0 6px; font-size:17px; letter-spacing:-.01em; }
.ganchor { text-decoration:none; }
.ganchor:hover { color:var(--gold-ink); }
.gterm p { margin:0; font-size:14.5px; color:var(--muted); line-height:1.55; }
.gterm .argwhere { font-size:12.5px; margin-top:6px; }
.gterm:target h3 { color:var(--gold-ink); }
@media (max-width:820px) { .gterms { columns:1; } }

/* ---- the four-column footer ---------------------------------------------
   The nav is deliberately three items, so this is the site's main internal
   linking surface -- for a crawler and for a reader two pages deep. */
.sitefoot { border-top:1px solid var(--line); background:var(--panel); padding:48px 0 26px; }
.footgrid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:28px 32px; padding-bottom:34px;
}
.footgrid h3 {
  margin:0 0 12px; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-ink);
}
.footgrid a {
  display:block; font-size:14px; color:var(--muted); text-decoration:none; padding:4px 0;
}
.footgrid a:hover { color:var(--text); text-decoration:underline; }
.footbase {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--muted);
}
@media (max-width:760px) { .footbase .footright { margin-left:0; } }