/* ============================================================================
   registry-content.css — layout for the CONTENT + UTILITY pages
   Owner: RD-CONTENT.  Consumed by:
     about.html  faq.html  help.html  setup-guide.html
     terms.html  privacy.html  404.html  start.html

   SCOPE. This file adds LAYOUT ONLY. Every colour, font, size step, gutter and
   motion token comes from registry.css; nothing here redefines a --rg-* token
   and nothing here restyles a shared component. If a rule below looks like it
   belongs in the design system, it belongs to RD-FOUNDATION - report it, do
   not fork it.

   THREE THINGS THIS FILE EXISTS TO GET RIGHT
   ------------------------------------------
   1. A READABLE MEASURE FOR LONG-FORM TEXT. terms.html and privacy.html are
      legal documents. The design system label style is 11px, which is correct
      for a column header and wrong for a paragraph somebody has to read and
      may have to rely on. .rgp-prose therefore sets its own floor: 15.5px,
      1.85 line-height, and a column capped at --rgp-measure (70ch). The old
      pages shipped these documents at 0.85rem in a 800px box.

   2. CONTRAST THAT SURVIVES THE DARK GROUND. --rg-muted is 3.30:1 on the ink.
      That passes AA only at 24px+. Every small text rule here uses --rg-warm
      (7.16:1). --rg-muted appears in exactly one place below, on a 26px+ mark.

   3. NO BORDER-RADIUS. registry.css zeroes every radius at specificity 0, so
      nothing here has to opt out - but nothing here may opt IN either. There
      is no circle on these eight pages.

   RTL: logical properties throughout (inline-start/end, padding-inline,
   border-inline), so one rule serves both directions.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. LOCAL MEASURES  (layout only - no colour, no type family)
   ------------------------------------------------------------------------ */
:root {
  /* The readable column for running prose. ~70 characters. */
  --rgp-measure: 70ch;
  /* The document rail: table of contents + the column beside it. */
  --rgp-rail: 232px;
}

/* ---------------------------------------------------------------------------
   1. PAGE HEAD — the block every content page opens with.
   Left aligned, unlike the storefront hero, because these pages are read
   rather than browsed. Same 110px top rhythm and same gutters.
   ------------------------------------------------------------------------ */
.rgp-head {
  position: relative;
  max-width: var(--rg-maxw);
  margin: 0 auto;
  padding: var(--rg-section-top) var(--rg-gutter) 0;
}
.rgp-head--center { text-align: center; }
.rgp-head__inner { position: relative; max-width: 780px; }
.rgp-head--center .rgp-head__inner { margin-inline: auto; }

/* The bilingual kicker line. Two elements, never one: i18n writes through
   textContent, so a nested span inside a translated node is destroyed on the
   first language switch. */
.rgp-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.rgp-head--center .rgp-eyebrow { justify-content: center; }
.rgp-eyebrow__sep { color: var(--rg-gold-dim); }
.rgp-eyebrow__ar {
  font-family: var(--rg-arabic);
  font-size: 15px;
  color: var(--rg-gold);
  line-height: 1.6;
}

.rgp-head__title { margin-top: 20px; }
/* The page-local dictionaries wrap an emphasised phrase in a bare <span>
   (about.html hero_title, help.html hero_title). It carries no class because
   the dictionary value is applied with innerHTML and a class would have to be
   translated too. */
.rgp-head__title span { color: var(--rg-gold); }
.rgp-head__lede { margin-top: 22px; max-width: 620px; }
.rgp-head--center .rgp-head__lede { margin-inline: auto; }
.rgp-head__meta {
  margin-top: 26px;
  display: flex;
  gap: 10px 26px;
  flex-wrap: wrap;
  align-items: center;
}
.rgp-head--center .rgp-head__meta { justify-content: center; }
.rgp-head__acts {
  margin-top: 38px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.rgp-head--center .rgp-head__acts { justify-content: center; }

/* A hairline that closes the head block off from the first section. */
.rgp-rule {
  max-width: var(--rg-maxw);
  margin: 54px auto 0;
  padding-inline: var(--rg-gutter);
}
.rgp-rule::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--rg-line);
}

/* ---------------------------------------------------------------------------
   2. SECTION HELPERS
   ------------------------------------------------------------------------ */
/* A section that follows another section: the 110px top belongs to the FIRST
   one only, otherwise the page grows a hole between every pair. */
.rgp-section--tight { padding-top: 64px; }
.rgp-section--flush { padding-top: 34px; }
.rgp-section__lede { max-width: 620px; margin-top: 18px; }

/* ---------------------------------------------------------------------------
   3. PROSE — the readable column. Used by terms, privacy, and any long answer.
   ------------------------------------------------------------------------ */
.rgp-prose {
  max-width: var(--rgp-measure);
  font-size: 15.5px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--rg-warm);
  text-wrap: pretty;
}
.rgp-prose > * + * { margin-top: 18px; }
.rgp-prose p { margin: 0; }
.rgp-prose strong { color: var(--rg-ivory); font-weight: 500; }
.rgp-prose em { font-style: italic; color: var(--rg-ivory); }
.rgp-prose a {
  color: var(--rg-gold);
  border-bottom: 1px solid rgba(var(--rg-gold-rgb), 0.35);
  padding-bottom: 1px;
}
.rgp-prose a:hover,
.rgp-prose a:focus-visible { color: var(--rg-ivory); border-bottom-color: var(--rg-ivory); }

/* Lists keep the measure and the 15.5px floor. The marker is a gold hairline
   dash rather than a bullet glyph, so it matches the hairline vocabulary. */
.rgp-list { list-style: none; margin: 0; padding: 0; }
.rgp-list > li {
  position: relative;
  padding-inline-start: 26px;
  margin-top: 12px;
}
.rgp-list > li:first-child { margin-top: 0; }
.rgp-list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.82em;
  width: 12px;
  height: 1px;
  background: var(--rg-gold-dim);
}

/* An ordered list of instructions. The number is a serif figure in gold,
   sitting in its own column so wrapped lines stay aligned. */
.rgp-steps { list-style: none; margin: 0; padding: 0; counter-reset: rgp-step; }
.rgp-steps > li {
  counter-increment: rgp-step;
  position: relative;
  padding-inline-start: 46px;
  padding-bottom: 20px;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--rg-warm);
}
.rgp-steps > li:last-child { padding-bottom: 0; }
.rgp-steps > li::before {
  content: counter(rgp-step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rg-line-3);
  font-family: var(--rg-serif);
  font-size: 13px;
  color: var(--rg-gold);
}
.rgp-steps strong { color: var(--rg-ivory); font-weight: 500; }
.rgp-steps code,
.rgp-prose code,
.rgp-code {
  font-family: var(--rg-mono);
  font-size: 0.88em;
  color: var(--rg-gold);
  background: var(--rg-wash-2);
  padding: 2px 6px;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
   4. DOCUMENT LAYOUT — a sticky contents rail beside the prose.
   terms.html and privacy.html only.
   ------------------------------------------------------------------------ */
.rgp-doc {
  display: grid;
  grid-template-columns: var(--rgp-rail) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.rgp-toc { position: sticky; top: 108px; }
.rgp-toc__title { display: block; margin-bottom: 16px; }
.rgp-toc__list { list-style: none; margin: 0; padding: 0; }
.rgp-toc__link {
  display: block;
  padding: 9px 0 9px 14px;
  border-inline-start: 1px solid var(--rg-line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rg-warm);
  transition: color var(--rg-t-fast), border-color var(--rg-t-fast);
}
.rgp-toc__link:hover,
.rgp-toc__link:focus-visible { color: var(--rg-ivory); border-inline-start-color: var(--rg-line-hi); }

.rgp-clause { padding-top: 8px; }
.rgp-clause + .rgp-clause { margin-top: 46px; padding-top: 46px; border-top: 1px solid var(--rg-line-row); }
.rgp-clause__num {
  display: block;
  font-family: var(--rg-serif);
  font-size: 13px;
  color: var(--rg-gold-dim);
  direction: ltr;
  unicode-bidi: isolate;
}
.rgp-clause__title { margin-top: 8px; }
.rgp-clause__body { margin-top: 20px; }

/* ---------------------------------------------------------------------------
   5. DISCLOSURE — native <details>. No JS, works before scripts land, and the
   open/closed state is exposed to assistive tech by the element itself.
   ------------------------------------------------------------------------ */
.rgp-faq { border-top: 1px solid var(--rg-line-row); }
.rgp-faq__item { border-bottom: 1px solid var(--rg-line-row); }
.rgp-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  padding: 22px 2px;
  list-style: none;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--rg-ivory);
  transition: color var(--rg-t-fast);
}
.rgp-faq__q::-webkit-details-marker { display: none; }
.rgp-faq__q:hover { color: var(--rg-gold); }
.rgp-faq__q:focus-visible { outline: 1px solid var(--rg-gold); outline-offset: 2px; }
/* The marker is a plus that becomes a minus. Drawn from two rules so it needs
   no glyph and no icon font, and it mirrors correctly with no extra rule. */
.rgp-faq__mark {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  align-self: center;
}
.rgp-faq__mark::before,
.rgp-faq__mark::after {
  content: "";
  position: absolute;
  background: var(--rg-gold);
  transition: opacity var(--rg-t-fast), transform var(--rg-t-fast);
}
.rgp-faq__mark::before { inset-inline: 0; top: 6px; height: 1px; }
.rgp-faq__mark::after  { inset-block: 0; inset-inline-start: 6px; width: 1px; }
.rgp-faq__item[open] .rgp-faq__mark::after { opacity: 0; transform: scaleY(0); }
.rgp-faq__a {
  padding: 0 2px 26px;
  max-width: var(--rgp-measure);
  font-size: 15px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--rg-warm);
}
.rgp-faq__a > * + * { margin-top: 14px; }
.rgp-faq__a a { color: var(--rg-gold); }
.rgp-faq__a a:hover,
.rgp-faq__a a:focus-visible { color: var(--rg-ivory); }
/* Hidden by the search filter on help.html. */
.rgp-faq__item.is-filtered { display: none; }

/* ---------------------------------------------------------------------------
   6. GRIDS — cards, quick links, values, team, info.
   ------------------------------------------------------------------------ */
.rgp-grid { display: grid; gap: var(--rg-gap); }
.rgp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rgp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rgp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* A card that is a link. The whole tile is the target, so the hit area matches
   what the eye reads as one object. */
.rgp-tile {
  display: block;
  border: 1px solid var(--rg-line-2);
  background: var(--rg-surface);
  padding: 30px;
  color: inherit;
  transition: border-color var(--rg-t-fast), background var(--rg-t-fast);
}
.rgp-tile:hover,
.rgp-tile:focus-visible { border-color: var(--rg-line-hi); background: var(--rg-surface-2); color: inherit; }
.rgp-tile__idx {
  font-family: var(--rg-serif);
  font-size: 13px;
  color: var(--rg-gold);
  direction: ltr;
  unicode-bidi: isolate;
}
.rgp-tile__title { margin-top: 12px; font-family: var(--rg-serif); font-size: 20px; color: var(--rg-ivory); }
.rgp-tile__body { margin: 10px 0 0; font-size: 14px; line-height: 1.75; font-weight: 300; color: var(--rg-warm); }
.rgp-tile__more { display: block; margin-top: 18px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rg-gold); }

/* A quiet two-line fact used inside the value cards on about.html. */
.rgp-card__ar { font-family: var(--rg-arabic); font-size: 15px; color: var(--rg-gold); line-height: 1.6; }

/* setup-guide.html turns the four .rg-how columns into anchors so the stepper
   actually goes somewhere. The shared component gives every child an explicit
   colour, so the base `a` rule produces no visible hover at all — these two
   rules supply the feedback a link owes the reader, without touching
   registry.css. `color: inherit` stops the gold link colour leaking onto any
   stray text node inside the column. */
a.rg-how__col { display: block; color: inherit; transition: border-color var(--rg-t-fast); }
a.rg-how__col:hover,
a.rg-how__col:focus-visible { border-top-color: var(--rg-gold); color: inherit; }
a.rg-how__col:hover .rg-how__title,
a.rg-how__col:focus-visible .rg-how__title { color: var(--rg-gold); }

/* ---------------------------------------------------------------------------
   7. PULL QUOTE — the mission line on about.html.
   ------------------------------------------------------------------------ */
.rgp-quote {
  margin: 0;
  border-block: 1px solid var(--rg-line);
  padding: 54px 0;
  text-align: center;
}
.rgp-quote__text {
  margin: 0 auto;
  max-width: 820px;
  font-family: var(--rg-serif);
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 31px);
  line-height: 1.45;
  color: var(--rg-ivory);
  text-wrap: balance;
}
.rgp-quote__mark {
  display: block;
  font-family: var(--rg-serif);
  font-size: 34px;
  line-height: 1;
  color: var(--rg-gold-dim);
  margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   8. SPLIT — a text column beside a panel (story, setup steps).
   ------------------------------------------------------------------------ */
.rgp-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
}
.rgp-split--rail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.rgp-split--start { align-items: start; }
.rgp-split__body > * + * { margin-top: 20px; }

/* ---------------------------------------------------------------------------
   9. KEY / VALUE PANEL — connection parameters, account facts.
   Two columns that collapse to stacked pairs on a phone.
   ------------------------------------------------------------------------ */
.rgp-kv { border: 1px solid var(--rg-line-soft); background: var(--rg-surface-2); }
.rgp-kv__head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--rg-line-row-2);
}
.rgp-kv__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--rg-line-row);
}
.rgp-kv__row:last-child { border-bottom: none; }
.rgp-kv__k { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rg-warm); }
.rgp-kv__v {
  font-family: var(--rg-mono);
  font-size: 12.5px;
  color: var(--rg-ivory);
  text-align: end;
  direction: ltr;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   10. TABS — the platform switcher on setup-guide.html.
   A real tablist: buttons, roving focus, one visible panel.
   ------------------------------------------------------------------------ */
.rgp-tabs { border: 1px solid var(--rg-line-2); background: var(--rg-surface); }
.rgp-tabs__list {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--rg-line-row-2);
}
.rgp-tab {
  flex: 1 0 auto;
  min-width: 132px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 17px 22px;
  cursor: pointer;
  font-family: var(--rg-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rg-warm);
  white-space: nowrap;
  transition: color var(--rg-t-fast), border-color var(--rg-t-fast), background var(--rg-t-fast);
}
.rgp-tab:hover { color: var(--rg-ivory); }
.rgp-tab[aria-selected="true"] {
  color: var(--rg-gold);
  border-bottom-color: var(--rg-gold);
  background: var(--rg-wash-2);
}
.rgp-tabs__panel { padding: 34px; }
.rgp-tabs__panel[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   11. CONTACT — the support form beside the reach-us panel (help.html).
   ------------------------------------------------------------------------ */
.rgp-contact {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--rg-gap);
  align-items: start;
}
.rgp-panel { border: 1px solid var(--rg-line-2); background: var(--rg-surface); padding: 34px; }
.rgp-panel__title { margin-bottom: 8px; }
.rgp-panel__note { margin-bottom: 28px; }

.rgp-reach { display: grid; gap: var(--rg-gap); }
.rgp-reach__card { border: 1px solid var(--rg-line-2); background: var(--rg-surface); padding: 26px 28px; }
.rgp-reach__title { font-family: var(--rg-serif); font-size: 18px; color: var(--rg-ivory); }
.rgp-reach__body { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; font-weight: 300; color: var(--rg-warm); }
.rgp-reach__link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--rg-gold);
  direction: ltr;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

/* The inline result of a real submission. Never a browser alert, never a
   fabricated reference number. Hidden until there is something to say. */
.rgp-status {
  margin-top: 20px;
  padding: 14px 18px;
  border-inline-start: 2px solid var(--rg-gold);
  background: var(--rg-wash-2);
  font-size: 14px;
  line-height: 1.65;
  color: var(--rg-ivory);
}
.rgp-status[hidden] { display: none; }
.rgp-status--ok { border-inline-start-color: var(--rg-ok); }
.rgp-status--err {
  border-inline-start-color: var(--rg-danger);
  background: rgba(var(--rg-danger-rgb), 0.06);
  color: var(--rg-danger);
}

/* ---------------------------------------------------------------------------
   12. FILTER FIELD — the knowledge-base filter on help.html.
   Same underline vocabulary as .rg-field__input, at heading scale.
   ------------------------------------------------------------------------ */
.rgp-filter {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin-top: 34px;
  border-bottom: 1px solid var(--rg-line-4);
  transition: border-color var(--rg-t-fast);
}
.rgp-head--center .rgp-filter { margin-inline: auto; }
.rgp-filter:focus-within { border-bottom-color: var(--rg-gold); }
.rgp-filter__mark { font-family: var(--rg-serif); font-size: 21px; color: var(--rg-gold); user-select: none; -webkit-user-select: none; }
.rgp-filter__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 15px 0;
  font-size: 16px;
  color: var(--rg-ivory);
}

/* ---------------------------------------------------------------------------
   13. NOT FOUND — 404.html.
   The numeral is decoration behind the message, not the message.
   ------------------------------------------------------------------------ */
.rgp-nf { position: relative; }
.rgp-nf__num {
  font-family: var(--rg-serif);
  font-size: clamp(96px, 20vw, 210px);
  line-height: 0.9;
  /* The one --rg-muted in this file. At 96px+ it is decorative and the
     accessible name lives in the heading below it. */
  color: rgba(var(--rg-gold-rgb), 0.14);
  user-select: none;
  -webkit-user-select: none;
  direction: ltr;
  unicode-bidi: isolate;
}
.rgp-nf__title { margin-top: -18px; }

/* The live availability search offered instead of an apology. */
.rgp-find { margin-top: 44px; max-width: var(--rg-maxw-narrow); }
.rgp-head--center .rgp-find { margin-inline: auto; }
.rgp-find__note { margin-top: 14px; }
.rgp-results { margin-top: 26px; border-top: 1px solid var(--rg-line); }
.rgp-results[hidden] { display: none; }
.rgp-results__list { list-style: none; margin: 0; padding: 0; }
.rgp-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 17px 2px;
  border-bottom: 1px solid var(--rg-line-row);
}
.rgp-result__addr { font-family: var(--rg-serif-ar); font-size: 17px; color: var(--rg-ivory); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.rgp-result--taken .rgp-result__addr,
.rgp-result--blocked .rgp-result__addr { color: var(--rg-warm); }
.rgp-result__side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rgp-result__reason { font-size: 12.5px; line-height: 1.6; color: var(--rg-warm); max-width: 34ch; }
.rgp-busy { padding: 22px 2px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rg-warm); }

/* Route-back links: a plain, obvious list of the places worth going. */
.rgp-routes { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; }
.rgp-head--center .rgp-routes { text-align: start; max-width: var(--rg-maxw-narrow); margin-inline: auto; }
.rgp-route {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--rg-line-row);
  color: var(--rg-ivory);
  transition: color var(--rg-t-fast), padding-inline-start var(--rg-t-fast);
}
.rgp-route:first-child { border-top: 1px solid var(--rg-line-row); }
.rgp-route:hover,
.rgp-route:focus-visible { color: var(--rg-gold); padding-inline-start: 8px; }
.rgp-route__label { font-size: 15px; }
.rgp-route__hint { font-size: 12px; color: var(--rg-warm); text-align: end; }

/* ---------------------------------------------------------------------------
   14. RELATED — the cross-link strip that closes every content page.
   The registry footer carries no navigation, so this is how a reader moves
   between the eight content pages without going back to the storefront.
   ------------------------------------------------------------------------ */
.rgp-related {
  max-width: var(--rg-maxw);
  margin: 0 auto;
  padding: 60px var(--rg-gutter) 110px;
  border-top: 1px solid var(--rg-line);
}
.rgp-related__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  gap: 12px 34px;
  flex-wrap: wrap;
}
.rgp-related__link {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rg-warm);
  transition: color var(--rg-t-fast);
}
.rgp-related__link:hover,
.rgp-related__link:focus-visible { color: var(--rg-gold); }

/* ---------------------------------------------------------------------------
   15. RESPONSIVE — the shared 900 / 560 breakpoints. Gutters and the type
   scale are already stepped by registry.css; only layout changes here.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .rgp-doc { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rgp-toc { position: static; }
  .rgp-toc__list { display: flex; flex-wrap: wrap; gap: 0 6px; }
  .rgp-toc__link { border-inline-start: none; border-bottom: 1px solid var(--rg-line); padding: 8px 10px; }
  .rgp-toc__link:hover,
  .rgp-toc__link:focus-visible { border-bottom-color: var(--rg-line-hi); }

  .rgp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgp-split,
  .rgp-split--rail { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .rgp-contact { grid-template-columns: minmax(0, 1fr); }
  .rgp-tabs__panel { padding: 26px 22px; }
  .rgp-panel { padding: 28px 24px; }
  .rgp-related { padding-bottom: 76px; }
}

@media (max-width: 560px) {
  .rgp-grid--2,
  .rgp-grid--3,
  .rgp-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .rgp-quote { padding: 40px 0; }
  .rgp-kv__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rgp-kv__v { text-align: start; }
  .rgp-result { align-items: flex-start; }
  .rgp-tile { padding: 24px 22px; }
  .rgp-panel,
  .rgp-tabs__panel { padding: 24px 20px; }
  .rgp-route__hint { display: none; }
}

/* ---------------------------------------------------------------------------
   16. REDUCED MOTION — registry.css already flattens durations globally. The
   two transforms this file introduces are killed by name so nothing slides.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .rgp-route:hover,
  .rgp-route:focus-visible { padding-inline-start: 2px; }
  .rgp-faq__item[open] .rgp-faq__mark::after { transform: none; }
}

/* ---------------------------------------------------------------------------
   17. PRINT — a legal document has to survive being printed.
   ------------------------------------------------------------------------ */
@media print {
  .rgp-toc,
  .rgp-related,
  .rgp-find,
  .rgp-routes { display: none !important; }
  .rgp-doc { grid-template-columns: minmax(0, 1fr); }
  .rgp-prose,
  .rgp-faq__a { max-width: none; color: #111; }
  .rgp-faq__item[open] .rgp-faq__a { display: block; }
}