/* InMyWords · inmywords.chat
 *
 * The entire stylesheet. Implements the Civic Cadence design system from the
 * InMyWords brand kit v1.0.2 (05-documentation/DESIGN.md).
 *
 *   Colour   every value below is an approved token from DESIGN.md 5.1. There
 *            are no other hex values in this file, and tools/check.mjs fails
 *            the build if one appears.
 *   Ground   the site ground is warm paper, so :root carries the light-mode
 *            token set. A navy or olive field re-declares the same token names
 *            with its own surface-correct values, so a component written once
 *            stays accessible in every field it is dropped into.
 *   Type     Noto Sans only, at the scale in DESIGN.md 5.2.
 *   Rhythm   the 8px scale in DESIGN.md 5.3; the 4px half-step inside controls.
 *   Shape    6px controls, 8px planes, 12px sheets, 0-2px held scenes.
 *   Motion   100ms feedback, 220ms arrival, 320ms expansion, and nothing that
 *            loops, pulses or floats.
 */

/* ---- font ------------------------------------------------------------- */

/* Latin and Latin Extended subset supplied in the brand kit. It covers the
 * Polish and Spanish samples used on this site. Any language outside that
 * coverage needs its own Noto subset added here before it is shown. */
@font-face {
  font-family: "Noto Sans";
  src: url("/site-assets/fonts/NotoSans-Brand-Latin.woff2?v=2026-10-04.16") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens ------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* surfaces and text: DESIGN.md 5.1 light mode */
  --bg-deep: #F4F0E7;
  --bg-warm: #ECE6DA;
  --bg-surface: #E3DDCF;
  --bg-elevated: #FBF8F1;
  --text-primary: #0B1B2F;
  --text-secondary: #3F4C5B;
  --text-muted: #59636D;
  --text-whisper: #6C747B;
  --border: #9A9488;
  --border-strong: #6F6A61;
  --brand-active: #7E5106;
  --brand-continuity: #596244;
  --success: #1F6744;
  --warning: #704700;
  --error: #94342F;
  --info: #1E607D;

  /* type */
  --font-sans: "Noto Sans", system-ui, sans-serif;
  --t-display: clamp(40px, 5vw, 64px);
  --t-h1: 40px;
  --t-h2: 30px;
  --t-h3: 22px;
  --t-conversation: 24px;
  --t-body: 17px;
  --t-small: 15px;
  --t-label: 13px;

  /* spacing: DESIGN.md 5.3 */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;
  --s8: 96px;

  /* shape */
  --r-control: 6px;
  --r-plane: 8px;
  --r-sheet: 12px;
  --r-scene: 2px;

  /* content widths: DESIGN.md 5.3 and 5.5 */
  --w-conversation: 760px;
  --w-prose: 720px;
  --w-wide: 1200px;
  --w-frame: 1120px;
}

/* A navy field. Re-declares the token names with the dark-mode values so that
 * anything placed inside stays on an approved foreground/background pair. */
.field-navy {
  color-scheme: dark;
  --bg-deep: #0B1B2F;
  --bg-warm: #13263A;
  --bg-surface: #1A3045;
  --bg-elevated: #243B50;
  --text-primary: #F4F0E7;
  --text-secondary: #C7CDD2;
  --text-muted: #AAB3B8;
  --text-whisper: #78848C;
  --border: #4A5A6A;
  --border-strong: #71808D;
  --brand-active: #D5942D;
  --brand-continuity: #A6AE87;
  --success: #73C69C;
  --warning: #F0B85A;
  --error: #F08A83;
  --info: #76BDD7;
  background: var(--bg-deep);
  color: var(--text-primary);
}

/* The olive closing field. DESIGN.md 5.1: labels on the olive surface are
 * navy. Ochre is illegible here at any weight, so the active role becomes
 * navy too and the field carries no ochre at all. */
.field-olive {
  --bg-deep: #A6AE87;
  --bg-warm: #A6AE87;
  --bg-surface: #A6AE87;
  --bg-elevated: #A6AE87;
  --text-primary: #0B1B2F;
  --text-secondary: #0B1B2F;
  --text-muted: #0B1B2F;
  --border: #0B1B2F;
  --border-strong: #0B1B2F;
  --brand-active: #0B1B2F;
  --brand-continuity: #0B1B2F;
  background: var(--bg-deep);
  color: var(--text-primary);
}

/* ---- base -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* The canvas colour is set on html so the iOS status-bar area paints with the
 * page rather than white. DESIGN.md 7.1: no overflow or scroll rules here. */
html {
  background: #F4F0E7;
  -webkit-text-size-adjust: 100%;
  /* Reserve the scrollbar gutter on every page: without it a short page
   * and a long one sit at different horizontal positions, and the whole
   * layout jumps as you move between them. */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-wrap: break-word;
  /* The footer sits at the bottom of the window on a page shorter than it:
   * main takes the space left over. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body > main { flex: 1 0 auto; }

h1, h2, h3, h4 { margin: 0 0 var(--s3); font-weight: 500; }
h1 { font-size: var(--t-h1); line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 600; }
h4 { font-size: var(--t-small); line-height: 1.4; font-weight: 600; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Loud on purpose. DESIGN.md 7.1. */
:focus-visible {
  outline: 3px solid var(--brand-active);
  outline-offset: 3px;
}

img, svg { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--s4);
}

.skip {
  position: fixed;
  z-index: 99;
  inset-inline-start: var(--s3);
  inset-block-start: var(--s2);
  transform: translateY(-200%);
  padding: 12px 20px;
  background: #F4F0E7;
  color: #0B1B2F;
  font-weight: 600;
  border-radius: var(--r-control);
  text-decoration: none;
}
.skip:focus { transform: none; }

/* ---- labels ------------------------------------------------------------ */

/* DESIGN.md 5.2: 13px, 600, 0.04em. Uppercase is used only on these short
 * standing labels, never on a sentence and never on a language name. */
.label,
.eyebrow {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--brand-active);
  margin-bottom: var(--s2);
}

/* ---- chrome: primary nav ----------------------------------------------- */

.nav { position: relative; z-index: 10; }
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Tight across the bar, roomier between the stacked rows the bar breaks into
   * once it collapses. The bar is close to full at 1440 with eight sections
   * and the two account controls, so every column gap is width the section
   * links do not have. */
  column-gap: var(--s2);
  row-gap: var(--s3);
  min-height: 78px;
  padding-block: 12px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 208px; height: auto; display: block; }

/* Auto margins on both sides share the spare width either side of the
 * sections, so they sit centred between the wordmark and the account
 * controls however wide the viewport gets. */
.links { display: flex; gap: var(--s1); flex-wrap: wrap; margin-inline: auto; }
.links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 12px;
  font-size: var(--t-small);
  text-decoration: none;
  color: var(--text-secondary);
  border-radius: var(--r-control);
}
.links a:hover { color: var(--text-primary); text-decoration: underline; }
.links a.active {
  color: var(--text-primary);
  box-shadow: inset 0 -3px 0 var(--brand-active);
}

/* Register and Sign in leave the marketing site for the product, so they read
 * as controls rather than as two more sections. The rule keeps them last in
 * the bar and the divider stops the eye running the section list straight on
 * into them. */
.auth {
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding-inline-start: var(--s2);
  border-inline-start: 1px solid var(--border);
}
.auth .login {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--s3);
  font-size: var(--t-small);
  /* A control that breaks across two lines stops reading as a control. */
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  color: var(--text-primary);
  font-weight: 600;
}
.auth .login:hover { border-color: var(--text-primary); text-decoration: none; }
.auth .login--primary {
  background: var(--brand-active);
  border-color: var(--brand-active);
  color: var(--bg-deep);
}
.auth .login--primary:hover { opacity: .9; border-color: var(--brand-active); }

/* CSS-only mobile menu: navigation never depends on scripting. */
.navcb, .navtoggle { display: none; }

/* ---- chrome: section navigation ---------------------------------------- */

/* Sits under the primary nav on a section's parent and on every child, so a
 * reader arriving on a sub-page can see the rest of the section. */
.subnav { border-block-start: 1px solid var(--border); }
.subnav .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  padding-block: var(--s2);
}
.subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  font-size: var(--t-small);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--r-control);
}
.subnav a:hover { color: var(--text-primary); text-decoration: underline; }
.subnav a.active {
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--brand-continuity);
}
/* A section inside a section (the integrations guides under Support): its
 * pages down the left, beside the text, under the parent's bar. The body's own
 * sections keep their padding but not a second wrap's width. */
.sidegrid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
.sidegrid .wrap { padding-inline: 0; max-width: none; }
/* Beside the menu the column is the reference's whole width, so tables and
 * code use it; running text keeps a reading measure. */
.sidegrid .prose { max-width: none; }
.sidegrid .prose > p, .sidegrid .prose > ol, .sidegrid .prose > ul, .sidegrid .prose > dl { max-width: 80ch; }
/* A product's logo set to the right of the text it introduces, which runs
 * beside it; the next heading starts below it. On a phone it sits above. */
.prose .logo-aside { float: right; margin: 0 0 var(--s3) var(--s5); }
.prose .logo-aside img { display: block; }
.prose .logo-aside ~ h2 { clear: both; }
@media (max-width: 600px) {
  .prose .logo-aside { float: none; margin: 0 0 var(--s3); }
}
/* A coloured band in the body (the Policies overview's Who you are dealing
 * with) cannot run edge to edge beside the menu, so it becomes a panel of the
 * column: its own inset, rounded, clear of the footer. */
.sidegrid__main > .sec[class*="field-"] {
  padding: var(--s6) var(--s5);
  border-radius: var(--r-sheet);
  margin-bottom: var(--s7);
}
@media (max-width: 600px) {
  .sidegrid__main > .sec[class*="field-"] { padding: var(--s5) var(--s4); }
}
.sidenav {
  position: sticky;
  top: var(--s4);
  display: flex;
  flex-direction: column;
  padding-block: var(--s7);
}
.sidenav a {
  display: block;
  padding: 8px 12px;
  font-size: var(--t-small);
  color: var(--text-muted);
  text-decoration: none;
  border-inline-start: 3px solid transparent;
  border-radius: 0 var(--r-control) var(--r-control) 0;
  transition: background-color 120ms ease, color 120ms ease;
}
.sidenav a:hover { color: var(--text-primary); background: var(--bg-warm); }
.sidenav a:focus-visible { outline: 2px solid var(--brand-active); outline-offset: 1px; }
/* A group's name above its pages, in the section's colour, with a rule
 * between one group and the next; the first sits flush with the menu's top. */
.sidenav__group {
  display: block;
  margin-top: var(--s3);
  padding: var(--s3) 12px var(--s1) 15px;
  border-top: 1px solid var(--bg-surface);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--brand-continuity);
}
.sidenav a + .sidenav__group:first-of-type,
.sidenav__group:first-child { margin-top: 0; }
.sidenav__group:first-child { padding-top: 0; border-top: 0; }
.sidenav a.active {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--bg-warm);
  border-inline-start-color: var(--brand-continuity);
}
@media (max-width: 900px) {
  .sidegrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sidenav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    padding-block: var(--s4) 0;
    border-block-end: 1px solid var(--border);
  }
  .sidenav a { min-height: 44px; display: inline-flex; align-items: center; border-inline-start: 0; }
  .sidenav a.active { box-shadow: inset 0 -3px 0 var(--brand-continuity); }
  /* A group's name starts its own line, above its pages. */
  .sidenav__group { flex-basis: 100%; margin-top: var(--s2); padding: var(--s3) 12px 0; }
  .sidenav a { border-radius: var(--r-control) var(--r-control) 0 0; }
}

/* ---- search ------------------------------------------------------------ */

/* Every box is an ordinary GET form to /search/ (inc/search.php). The
 * magnifier opens the search page; a section's bar ends with a box for that
 * section; the integrations guides' menu opens with one; the phone menu's
 * first line is one for the whole site; and the 404 page has one. */
.nav .searchlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 48px;
  color: var(--text-secondary);
  border-radius: var(--r-control);
}
.nav .searchlink:hover, .nav .searchlink[aria-current] { color: var(--text-primary); }
.nav .searchlink svg { width: 20px; height: 20px; display: block; }
.drawersearch { display: none; }

.subsearch, .drawersearch, .search { margin: 0; }
.subsearch__row, .drawersearch__row, .search__row { display: flex; gap: 6px; }
.subsearch input, .drawersearch input, .search input[type="search"] {
  min-width: 0;
  font: 400 var(--t-small)/1.4 var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  padding: 6px 10px;
}
.subsearch button, .drawersearch button {
  padding: 0 12px;
  font: 600 var(--t-small)/1 var(--font-sans);
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  cursor: pointer;
}
.subsearch button:hover, .drawersearch button:hover { border-color: var(--text-primary); }

.subnav .wrap { align-items: center; }
.subsearch { margin-inline-start: auto; }
.subsearch input { width: 200px; min-height: 40px; background: var(--bg-surface); border-color: var(--border); }
.subsearch button { min-height: 40px; border-color: var(--border); }


.search__label { display: block; font-size: var(--t-small); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.search__row { max-width: 640px; gap: var(--s2); }
.search input[type="search"] { flex: 1; min-height: 48px; padding: 10px 14px; font-size: var(--t-body); }
.search__scope { border: 0; padding: 0; margin: var(--s3) 0 0; display: flex; gap: var(--s2) var(--s4); flex-wrap: wrap; align-items: center; }
.search__scope legend { float: left; margin: 0 var(--s2) 0 0; }
.search__scope label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--t-small); }
.searchpage .search { margin-bottom: var(--s5); }
.search__count { color: var(--text-muted); font-size: var(--t-small); margin: 0 0 var(--s3); }
.search__count b { color: var(--text-primary); }
.results, .prose .results { list-style: none; padding: 0; margin: 0; max-width: 760px; }
.prose .results li { margin: 0; padding: var(--s4) 0; border-top: 1px solid var(--border); }
.results__sec { font-size: 13px; font-weight: 600; color: var(--brand-active); }
.prose .results h2 { margin: 4px 0 2px; font-size: 22px; }
.results h2 a { color: var(--text-primary); }
.results__url { margin: 0 0 6px; color: var(--text-muted); font-size: var(--t-small); overflow-wrap: anywhere; }
.results__text { margin: 0; color: var(--text-secondary); }
.results b { color: var(--text-primary); }
.search__other { margin-top: var(--s4); font-size: var(--t-small); }
.search--404 { max-width: 520px; margin: var(--s5) auto 0; text-align: start; }

/* ---- buttons ----------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--r-control);
  font: 600 16px/1.4 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 100ms ease-out, opacity 100ms ease-out;
}
.button--primary { background: var(--brand-active); color: var(--bg-deep); }
.button--primary:hover { opacity: .9; }
.button--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.button--secondary:hover { border-color: var(--text-primary); }
.button:disabled { opacity: .55; cursor: not-allowed; }

/* The public hero is the one place the campaign may lead with continuity
 * rather than the product action token. DESIGN.md 6.3. */
.button--campaign { background: #A6AE87; color: #0B1B2F; }
.button--campaign:hover { opacity: .9; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---- conversational turn ----------------------------------------------- */

/* A structured plane, not a speech bubble. Speaker and language come before
 * the text; the edge colour is paired with that text so colour never carries
 * the state alone. DESIGN.md 6.1. */
.imw-turn {
  position: relative;
  padding: var(--s4);
  padding-inline-start: 28px;
  background: var(--bg-warm);
  border-radius: var(--r-plane);
}
.imw-turn::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  border-start-start-radius: var(--r-plane);
  border-end-start-radius: var(--r-plane);
  background: var(--brand-continuity);
}
.imw-turn[aria-current="true"]::before { background: var(--brand-active); }
.imw-turn__meta {
  margin: 0 0 var(--s2);
  color: var(--text-muted);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.imw-turn__text {
  margin: 0;
  font-size: var(--t-conversation);
  line-height: 1.55;
  color: var(--text-primary);
}
.imw-turn__note {
  margin: var(--s2) 0 0;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-muted);
}

.exchange {
  display: grid;
  gap: var(--s3);
  max-width: var(--w-conversation);
}
/* A change of task, rather than the next turn. DESIGN.md 5.3. */
.exchange .break { height: var(--s2); }

/* ---- active handoff ---------------------------------------------------- */

/* A square and a text label, never a pulsing orb. DESIGN.md 6.2. */
.handoff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  font-size: var(--t-small);
  color: var(--text-secondary);
}
.handoff .marker {
  width: 12px;
  height: 12px;
  border-radius: var(--r-control);
  background: var(--brand-active);
}
.thread {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s2);
  max-width: 520px;
  margin: var(--s6) auto var(--s3);
}
.thread i { height: 2px; background: var(--brand-continuity); }
.thread i:first-child { background: var(--brand-active); }
.thread b { width: 14px; height: 14px; border-radius: var(--r-control); background: var(--brand-active); }

/* ---- boundary notice --------------------------------------------------- */

/* Full-width structured notice with a heading, an explanation and a next
 * action. Never a tooltip. DESIGN.md 6.5. */
.imw-boundary {
  /* Even padding all round: 20px against 24px read as a mistake at the
   * corner where the rail meets the heading. */
  padding: var(--s4);
  /* And clear of the heading above it and the list below it. Without this
   * the notice sits flush against both and reads as part of whichever the
   * eye reaches first. */
  margin-block: var(--s4);
  background: var(--bg-warm);
  border-inline-start: 4px solid var(--warning);
  border-radius: var(--r-plane);
}
.imw-boundary h3 { font-size: var(--t-h3); margin-bottom: var(--s2); }
/* The box's own padding is the space above its first line; a heading's
 * prose margin on top of it doubled the gap. */
.imw-boundary > :first-child { margin-top: 0; }
.imw-boundary p { font-size: var(--t-small); color: var(--text-secondary); }
.imw-boundary p:last-child { margin-bottom: 0; }

/* ---- page sections ----------------------------------------------------- */

.sec { padding-block: var(--s7); }
.sec--tight { padding-block: var(--s6); }
/* A policy's document control, after its text: a rule above, the facts as
 * label and value pairs, then the revision record as a small table. */
.doccontrol { padding-top: 0; }
/* A policy's document control: a tinted panel with the section's colour down
 * its edge, the facts in a row of cells, the status as a pill. */
.doccontrol .doccontrol__panel {
  max-width: 80ch;
  padding: var(--s4) var(--s5);
  background: var(--bg-warm);
  border-inline-start: 4px solid var(--brand-continuity);
  border-radius: var(--r-plane);
  font-size: var(--t-small);
}
.doccontrol h2 { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.03em; text-transform: none; margin: 0 0 var(--s3); color: var(--brand-continuity); }
.doccontrol__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s2);
  margin: 0;
}
.doccontrol__facts > div { background: var(--bg-elevated); border-radius: var(--r-control); padding: var(--s2) var(--s3); }
.doccontrol .doccontrol__facts dt { margin: 0; font-size: var(--t-label); color: var(--text-muted); font-weight: 600; }
.doccontrol .doccontrol__facts dd { margin: 2px 0 0; color: var(--text-primary); font-weight: 600; }
.doccontrol__status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--t-label); color: var(--bg-elevated); background: var(--success); }

.pagehead { padding-block: var(--s7) var(--s7); }
.pagehead h1 { font-size: var(--t-display); line-height: 1.08; max-width: 20ch; }
.pagehead .lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 62ch;
  margin-top: var(--s4);
}
/* One rail, running down the start margin of the page header, aligned to the
 * content edge rather than the viewport edge. It marks where the sequence
 * begins; it is not a border around a card. */
.pagehead .wrap { position: relative; }
.pagehead .wrap::before {
  content: "";
  position: absolute;
  inset-block: 0 45%;
  inset-inline-start: 0;
  width: 3px;
  background: var(--brand-active);
}

.shead { max-width: 62ch; margin-bottom: var(--s6); }
.shead p { color: var(--text-secondary); }

.prose { max-width: var(--w-prose); }

/* Blocks of pasted content, offered as four ready shapes by the editor at
   /sysadmin/site/edit.php so a page can be laid out without writing CSS.
   Full width takes the whole wrap; the other three are a reading column
   placed within it. The placement is logical rather than physical, so in a
   right-to-left language a block on the left mirrors to the right along
   with everything else on the page. */
.block { max-width: var(--w-prose); }
.block--full { max-width: none; }
.block--left { margin-inline: 0 auto; }
.block--centre { margin-inline: auto; }
.block--right { margin-inline: auto 0; }

/* An image placed in a page body, offered as four shapes by the same editor.
   Wrap is the only one that is not a block of its own: the text runs past it,
   the way .mark--corner already sets the maker's mark into a column. The
   other three are a block on its own line, put where the name says.

   Placement is logical rather than physical, like the blocks above, so left
   and right mirror in a right-to-left language along with everything else.
   A width in ch rather than pixels, so an image beside prose is measured
   against the column it is beside; height stays auto so nothing is squashed
   and the width and height attributes on the tag keep the space reserved
   while it loads. */
.fig { display: block; height: auto; border-radius: var(--r-scene); }
.fig--wrap {
  float: inline-end;
  max-width: min(100%, 20rem);
  margin: 0 0 var(--s3) var(--s4);
  margin-inline: var(--s4) 0;
}
.fig--left   { margin-inline: 0 auto; margin-block: var(--s4); }
.fig--centre { margin-inline: auto;   margin-block: var(--s4); }
.fig--right  { margin-inline: auto 0; margin-block: var(--s4); }

/* A float has no height, so a short paragraph beside a tall image would let
   the next block start underneath it. The section that follows clears. */
.sec::after, .block::after { content: ""; display: table; clear: both; }

@media (max-width: 640px) {
  /* Nothing wraps on a phone: a 20rem image beside prose in a 360px column
     leaves a two-word measure. It becomes a block like the other three. */
  .fig--wrap { float: none; max-width: 100%; margin-inline: 0; margin-block: var(--s4); }
}
.prose h2 { margin-top: var(--s6); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s5); }
.prose ul, .prose ol { margin: 0 0 var(--s3); padding-inline-start: var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose dt { font-weight: 600; margin-top: var(--s4); }
.prose dd { margin: var(--s2) 0 0; color: var(--text-secondary); }

/* Code in running text: request examples, answers, field names. A block
   keeps its lines exactly as written and scrolls inside itself, so a long
   curl line on a phone moves the block and never the page. Inline code may
   break anywhere in a sentence; inside a table it stays whole and the
   table's own scroller takes the width. */
.prose code { font-family: ui-monospace, monospace; font-size: 0.9em; }
.prose p code, .prose li code { overflow-wrap: anywhere; }
.prose pre {
  margin: 0 0 var(--s4);
  padding: var(--s3);
  overflow-x: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: var(--t-small);
  line-height: 1.5;
}
.prose pre code { font-size: inherit; white-space: pre; }
/* Syntax colour, set by inc/highlight.php as the page renders, from the
 * approved tokens: each holds at least 4.5:1 on the code block's paper. */
.hl .tok-key, .hl .tok-flag { color: var(--info); }
.hl .tok-str  { color: var(--success); }
.hl .tok-num, .hl .tok-lit, .hl .tok-var { color: var(--warning); }
.hl .tok-kw, .hl .tok-cmd { color: var(--brand-active); font-weight: 600; }
.hl .tok-com  { color: var(--text-muted); font-style: italic; }
.hl .tok-url  { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border); }
.prose .table-scroll { margin: 0 0 var(--s4); }
.docdate {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: var(--t-small);
  color: var(--text-muted);
}

.two {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: start;
}

.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s3);
}
.plane {
  padding: var(--s4);
  background: var(--bg-warm);
  border-radius: var(--r-plane);
  border-top: 4px solid var(--brand-continuity);
}
.plane h3 { margin-bottom: var(--s2); }
.plane p { font-size: var(--t-small); color: var(--text-secondary); margin-bottom: 0; }
.plane .n {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-active);
  margin-bottom: var(--s2);
}
/* Anything set below a grid of planes gets clear of it. Without this the
 * fineprint under the pricing cards sits against the bottom edge of the last
 * one and reads as part of it. */
.planes + * { margin-top: var(--s5); }

.panel {
  padding: var(--s5);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-plane);
}
.panel p { font-size: var(--t-small); color: var(--text-secondary); }

/* A visible sequence: the numbers are content, not decoration. */
.steps { counter-reset: step; display: grid; gap: var(--s5); }
.step { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-active);
  padding-top: 6px;
}
.step h3 { margin-bottom: var(--s2); }
.step p { color: var(--text-secondary); margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.chips li {
  padding: 10px var(--s3);
  background: var(--bg-surface);
  border-radius: var(--r-control);
  font-size: var(--t-small);
}

.langs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s2) var(--s3);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--w-wide);
}
.langs li {
  padding-block: 6px;
  border-bottom: 1px solid var(--border);
  font-size: var(--t-small);
}

.limits { counter-reset: limit; list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s3); }
.limits li {
  padding: var(--s4);
  background: var(--bg-warm);
  border-inline-start: 4px solid var(--error);
  border-radius: var(--r-plane);
}
.limits b { display: block; margin-bottom: var(--s1); }
.limits b::before {
  counter-increment: limit;
  content: counter(limit, decimal-leading-zero) "  ";
  color: var(--error);
  font-variant-numeric: tabular-nums;
}
.limits span { font-size: var(--t-small); color: var(--text-secondary); }

.partners { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; }
.partners a { font-size: var(--t-h3); font-weight: 500; }

/* A maker's mark on its own: the logo, centred, and nothing else in the
 * section with it. The dark mark, because this sits on the paper ground;
 * the footer's reversed one is for the navy field. */
.mark { display: flex; justify-content: center; }
.mark img { width: 180px; height: auto; }
/* The same mark set into the corner of a column, with the text wrapping past
 * it. A float rather than a grid cell, because the column it sits in is
 * already one half of a two-column section. */
.mark--corner { display: block; float: inline-end; margin: 0; margin-block-end: var(--s3); margin-inline-start: var(--s4); }
.mark--corner img { width: 140px; }

/* ---- the interrupted frame (landing page only) ------------------------- */

/* DESIGN.md 5.5. Held scenes in a content field with exterior rails. The rails
 * are outside the scene and each state has different geometry: interrupted,
 * suspended, resumed, released. */

.hero {
  position: relative;
  min-height: min(770px, calc(100vh - 78px));
  display: flex;
  align-items: center;
  background: var(--bg-deep) url("/site-assets/images/face-to-face-hero.webp?v=2026-10-04.16") center / cover no-repeat;
  overflow: hidden;
}
/* The artwork already carries a quiet navy field at its centre, which is where
 * the live headline sits and where it keeps its 15.23:1. This leaves that
 * centre untouched and deepens the outer field so the two profiles frame the
 * words instead of competing with them. Every stop is #0B1B2F with alpha; no
 * new colour is introduced. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%,
    rgb(11 27 47 / 0) 0 24%,
    rgb(11 27 47 / .55) 62%,
    rgb(11 27 47 / .78) 100%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: min(700px, 56vw);
  margin-inline: auto;
  text-align: center;
  padding-block: var(--s8);
}
.hero h1 {
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-block: var(--s2) var(--s3);
}
.hero .lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 34ch;
  margin-inline: auto;
}
.hero .actions { justify-content: center; }
/* The plain statement of what the product physically is, under the campaign
 * line. Deliberately quieter than the lead above it and louder than a caption. */
.hero .lead--plain {
  margin-top: var(--s3);
  font-size: var(--t-body);
  color: var(--text-muted);
}
.hero .boundary-note {
  max-width: 46ch;
  margin: var(--s5) auto 0;
  font-size: var(--t-small);
  color: var(--text-secondary);
}

.cuts { padding-block: var(--s8); }
.cut {
  display: grid;
  grid-template-columns: 80px minmax(0, var(--w-frame)) 80px;
  justify-content: center;
}
.cut + .cut { margin-top: 28px; }

.rail { position: relative; }
.rail::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(50% - 1.5px);
  width: 3px;
  background: var(--brand-active);
}
/* Interrupted: the rail stops on one side and picks up on the other. */
.cut--interrupted .rail:first-child::before { top: 0; height: 42%; }
.cut--interrupted .rail:last-child::before { top: 42%; bottom: 0; }
/* Suspended: held clear of both ends. */
.cut--suspended .rail::before { top: 28%; bottom: 28%; }
/* Resumed: the mirror of interrupted. */
.cut--resumed .rail:first-child::before { top: 24%; bottom: 0; }
.cut--resumed .rail:last-child::before { top: 0; height: 24%; }
/* Released: a short mark at the close, and nothing else. */
.cut--released .rail::before { top: 0; height: 18%; }

.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;
  padding: clamp(58px, 6vw, 92px) clamp(34px, 6vw, 90px);
  border-radius: var(--r-scene);
  /* A held scene is a field, not a card. On the paper ground that means the
   * raised surface rather than the canvas, so the scene has an edge without
   * needing a border drawn around it. */
  background: var(--bg-elevated);
}
/* A navy or olive scene is the field itself and takes the canvas, not the
 * raised surface. Without this the navy scenes render as #243B50, which is
 * the hover state and not a field colour. */
.scene.field-navy,
.scene.field-olive { background: var(--bg-deep); }
.scene h2 {
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 18ch;
  margin-block: var(--s2) var(--s4);
  overflow-wrap: anywhere;
}
.scene p { font-size: 19px; line-height: 1.6; max-width: 62ch; }
.scene .actions { margin-top: var(--s4); }

/* Supplementary compositional cue. DESIGN.md 5.2 permits 700-750 at 10-11px
 * here and nowhere else. It carries no instruction. */
.frame-label {
  position: absolute;
  top: 18px;
  inset-inline-start: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-active);
}

.pair { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s5); max-width: var(--w-conversation); }

/* ---- tables ------------------------------------------------------------ */

/* Wide content scrolls inside its own container; the page body never scrolls
 * sideways. */
.table-scroll { overflow-x: auto; }
.langtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.langtable caption {
  text-align: start;
  padding-bottom: var(--s3);
  color: var(--text-muted);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.langtable th,
.langtable td {
  text-align: start;
  padding: 12px 0;
  padding-inline-end: var(--s3);
  border-bottom: 1px solid var(--border);
}
.langtable th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
}
.langtable td code {
  font-family: ui-monospace, monospace;
  color: var(--text-muted);
}

/* ---- footer ------------------------------------------------------------ */

.site-footer { padding-block: var(--s7) var(--s4); }
.site-footer .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s5);
}
.site-footer img { width: 180px; height: auto; }
/* The INT6 mark sits under the brand heading, smaller than the wordmark
   above it: it is whose product this is, not what the product is. */
.site-footer .int6-mark { width: 124px; margin-block: var(--s1) var(--s3); }
.site-footer h4 { color: var(--text-muted); letter-spacing: 0.04em; font-size: var(--t-label); }
.site-footer .col a { display: block; margin-bottom: var(--s2); font-size: var(--t-small); color: var(--text-secondary); text-decoration: none; }
.site-footer .col a:hover { color: var(--text-primary); text-decoration: underline; }
.site-footer .lab { font-size: var(--t-small); color: var(--text-secondary); margin-top: var(--s3); max-width: 40ch; }
.site-footer .policies {
  grid-column: 1 / -1;
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: var(--t-small);
  color: var(--text-muted);
}

/* ---- contact form ------------------------------------------------------ */

.form { display: grid; gap: var(--s2); max-width: var(--w-prose); }
.form label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.04em; margin-top: var(--s3); }
.form input, .form select, .form textarea {
  min-height: 48px;
  padding: 12px var(--s3);
  font: 400 var(--t-body)/1.5 var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
}
.form textarea { min-height: 160px; resize: vertical; }
.form .button { margin-top: var(--s4); justify-self: start; }
.form .note { font-size: var(--t-small); color: var(--text-muted); }
.big { font-size: var(--t-h3); font-weight: 600; }

/* ---- 404 --------------------------------------------------------------- */

.notfound { text-align: center; padding-block: var(--s8); }
.notfound .actions { justify-content: center; }

/* ---- responsive -------------------------------------------------------- */

/* Breakpoints from DESIGN.md 7.1. Tested at 320, 390, 768, 1024 and 1440. */

@media (min-width: 768px) {
  .two { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .two--wide { grid-template-columns: 1.3fr 1fr; }
  .pair { grid-template-columns: 1fr 1.15fr; }
}

@media (max-width: 900px) {
  .nav .wrap { flex-wrap: wrap; min-height: 68px; }
  .brand img { width: 176px; }
  .navtoggle {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding-inline: var(--s3);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-control);
    font-size: var(--t-small);
    font-weight: 600;
    cursor: pointer;
  }
  .links { display: none; width: 100%; flex-direction: column; gap: 0; margin-inline-start: 0; padding-bottom: var(--s2); }
  .navcb:checked ~ .links { display: flex; }
  .links a { width: 100%; border-bottom: 1px solid var(--border); border-radius: 0; }
  .links a.active { box-shadow: none; border-inline-start: 3px solid var(--brand-active); padding-inline-start: 9px; }
  /* Two full-width controls will not fit beside the brand and the menu button
   * at this width, so the account group collapses with the sections rather
   * than staying in the top bar, and keeps its full tap target when open. */
  .auth {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: var(--s2);
    padding-inline-start: 0;
    padding-bottom: var(--s2);
    border-inline-start: 0;
  }
  .navcb:checked ~ .auth { display: flex; }
  .auth .login { width: 100%; justify-content: center; }
  /* The magnifier gives way to the box heading the open menu, and a
   * section's box takes the full width above the section's links. */
  .nav .searchlink { display: none; }
  .drawersearch { display: block; width: 100%; padding-block: var(--s2); }
  .drawersearch input { flex: 1; min-height: 44px; font-size: var(--t-body); }
  .drawersearch button { min-height: 44px; }
  .subsearch { order: -1; width: 100%; margin-inline-start: 0; padding-bottom: var(--s1); }
  .subsearch input { flex: 1; min-height: 44px; width: auto; }
  .subsearch button { min-height: 44px; }
}

@media (max-width: 800px) {
  .hero {
    min-height: auto;
    background-image: url("/site-assets/images/face-to-face-hero-mobile.webp?v=2026-10-04.16");
    background-size: 100% auto;
    background-position: center top;
    align-items: flex-start;
  }
  /* Both profiles stay visible at the top and the lower hero resolves into
   * navy, so the copy reads against the field rather than the artwork.
   * DESIGN.md 5.5, signature device 2. */
  /* The artwork is served at full viewport width, so its 820x583 frame ends at
   * 71vw. The stops are in vw for that reason: as a percentage they would be
   * measured against the whole hero, which is several times taller than the
   * image, and the scrim would still be fully transparent where the copy
   * starts. Both profiles stay lit down to the jaw; below that the field
   * resolves to navy and the copy reads against navy, not against a face. */
  .hero::after {
    background: linear-gradient(to bottom,
      rgb(11 27 47 / 0) 0 34vw,
      rgb(11 27 47 / .95) 56vw,
      #0B1B2F 64vw);
  }
  .hero-copy { width: min(86vw, 520px); padding-block: 62vw var(--s7); }
  .hero h1 { font-size: clamp(40px, 12vw, 56px); }
  .cuts { padding-block: var(--s6); }
  .cut { grid-template-columns: 26px minmax(0, 1fr) 26px; }
  .cut + .cut { margin-top: 20px; }
  .scene { min-height: auto; padding: 70px var(--s4) 62px; }
  .scene h2 { font-size: clamp(34px, 10vw, 52px); }
  .scene p { font-size: var(--t-body); }
  .rail::before { width: 2px; }
  .frame-label { inset-inline-start: var(--s3); }
  .sec { padding-block: var(--s6); }
  .pagehead { padding-block: var(--s6); }
  .pagehead h1 { font-size: clamp(32px, 9vw, 48px); }
}

@media (max-width: 430px) {
  .wrap { padding-inline: var(--s3); }
  .hero .actions .button { width: 100%; }
  .step { grid-template-columns: 32px 1fr; }
}

/* ---- reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- print ------------------------------------------------------------- */

/* /safeguards/ is meant to be handed to staff, so it has to print. */
@media print {
  .nav, .site-footer, .skip { display: none; }
  body { background: #FBF8F1; color: #0B1B2F; font-size: 12pt; }
  .sec, .pagehead { padding-block: 12pt; }
  a { text-decoration: underline; }
}

/* ---- language machinery ------------------------------------------------- */

/* The fallback notice: shown when a translation is missing and the English
 * is standing in. States its point once, in the page's own language. */
.lang-fallback {
  margin-block-start: var(--s4);
  padding: var(--s3) var(--s4);
  border-inline-start: 3px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--t-small);
}

/* The chooser: every language as a plain link, native name first. */
.langlist {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 220px;
  column-gap: var(--s6);
}
.langlist li { break-inside: avoid; padding-block: var(--s2); }
.langlist a { font-size: var(--t-h3); text-decoration: none; }
.langlist a[aria-current="true"] { color: var(--brand-active); }
.langlist__en { color: var(--text-muted); font-size: var(--t-small); margin-inline-start: var(--s2); }
/* The language strip: one slim line under the bar, on every page. */
.langbar { border-block-start: 1px solid var(--border); }
.langbar .wrap { padding-block: var(--s2); text-align: center; }
.langbar a { font-size: var(--t-label); color: var(--text-secondary); }

/* ---- news listing ------------------------------------------------------- */

.newslist { display: grid; gap: var(--s4); max-width: var(--w-prose); }
/* The heading over a group of articles. It sits above its own list rather
   than inside it, so the grid gap does not apply to it, and the first one
   on the page does not need the space a later one does. */
.newsgroup { max-width: var(--w-prose); margin: var(--s6) 0 var(--s3); }
.newsgroup:first-child { margin-top: 0; }
.newsitem {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s4); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--r-plane);
  text-decoration: none;
}
.newsitem img { width: 128px; height: auto; border-radius: var(--r-scene); flex-shrink: 0; }
.newsitem__text { display: grid; gap: var(--s1); }
.newsitem__title { font-size: var(--t-h3); font-weight: 600; }
.newsitem time { color: var(--text-muted); font-size: var(--t-small); }
.newsitem__desc { color: var(--text-secondary); }
.newsitem:hover .newsitem__title { text-decoration: underline; }

/* An article's date, added under the lead by the renderer, and its share
   links at the foot. Same date treatment as the card in the listing. */
.pagehead__date { margin-top: var(--s3); color: var(--text-muted); font-size: var(--t-small); }
.share { max-width: var(--w-prose); padding-top: var(--s4); border-top: 1px solid var(--border); }
.share__heading { font-size: var(--t-body); font-weight: 600; margin-bottom: var(--s2); }
.share__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; }

/* Wide screens: the bar grows, in type and in presence. Type steps to the
 * next token on the scale (--t-body), never an invented size; the rest is
 * spacing. KEPT IN SYNC with the app bar: the same block lives in
 * app/public_html/site_assets/css/appbar.css, because the two hosts are one
 * product and the chrome must not announce the boundary. If one changes,
 * the other has to. */
@media (min-width: 1440px) {
  /* The bar's own container widens with the type, or the extra size just
   * wraps the menu: eight sections at 17px do not fit in 1200px. Only the
   * bar widens; page content keeps --w-wide. */
  .nav .wrap { min-height: 88px; max-width: 1400px; }
  .links { gap: var(--s2); }
  .links a { font-size: var(--t-body); padding-inline: var(--s3); }
  .auth .login { font-size: var(--t-body); padding-inline: 20px; }
}

/* The chooser's type-to-filter, created by langfilter.js. */
.langfilter { margin-block-end: var(--s4); }
.langfilter__input {
  width: 100%; max-width: 420px;
  padding: 10px 14px;
  font: inherit; font-size: var(--t-body);
  color: var(--text-primary); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--r-control);
}

/* Questions grouped into sections that open. <details> rather than a script:
 * the browser opens one on a find-in-page hit, and a printed page prints
 * every answer whether or not somebody clicked it. */
.faq { display: grid; gap: var(--s3); max-width: var(--w-frame); }
.faq__group {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-plane);
}
.faq__group + .faq__group { margin-top: 0; }
.faq__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.faq__group > summary::-webkit-details-marker { display: none; }
.faq__group > summary::after {
  content: "+";
  flex: none;
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1;
  color: var(--brand-active);
}
/* U+2212, the minus sign, not a hyphen: it matches the plus at this size. */
.faq__group[open] > summary::after { content: "\2212"; }
.faq__group[open] > summary { border-bottom: 1px solid var(--border); }
.faq__group > summary:focus-visible {
  outline: 2px solid var(--brand-active);
  outline-offset: -2px;
  border-radius: var(--r-plane);
}
.faq__group .prose { max-width: var(--w-prose); padding: var(--s4); }
.faq__group .prose dl { margin: 0; }
.faq__group .prose dt:first-child { margin-top: 0; }

@media print {
  /* A closed group is closed by a user-agent rule, so printing needs it
   * overridden or half the page comes out blank. */
  .faq__group > *:not(summary) { display: block; }
  .faq__group > summary { border-bottom: 1px solid var(--border); }
  .faq__group > summary::after { content: ""; }
}