/* The three rental arbitrage pages: the guide (/rental-arbitrage/), the calculator (/rental-arbitrage-calculator/) and
   the contract template (/rental-arbitrage-contract/). This sheet is shared by all three; the calculator's own styles
   are in ra-calc.css, loaded on the calculator page only (after this one), as is the calculator script.
   Page-specific styles on top of assets/site.css. Only site tokens are used (--paper, --surface, --ink, --rule,
   --accent, --navy …), so the light and dark themes both work. Blues, whites and grays only; --err is reserved for
   input errors. The agreement preview has its own styles (AGREEMENT_PREVIEW_CSS, emitted in the contract page's head). */

[hidden] { display: none !important; }

/* ---------- Hero ---------- */
/* Kept compact on the calculator page so its first inputs are on the first screen (about 560px down on a 1366×657
   laptop, 600px on a 390×664 phone; the browser test checks both), and on the contract page so both downloads are. */
.ra-hero { padding-block: clamp(10px, 2vw, 22px) clamp(12px, 1.6vw, 18px); }
.ra-hero__title { margin-top: 8px; font-size: clamp(1.5rem, 1.15rem + 2.2vw, 2.5rem); line-height: 1.1; letter-spacing: -0.016em; text-wrap: balance; }
.ra-hero__lede { margin-top: 8px; font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.125rem); line-height: 1.5; color: var(--ink-2); }
.ra-hero__lede { max-width: 72ch; }
.ra-hero__lede strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .ra-hero .breadcrumbs li:last-child { display: none; } }
/* Small or short phone screens (320–360px wide, or up to 700px tall): a tighter top, so the first row of inputs is on
   the first screen above the results bar. The breadcrumb trail (Home / Articles; the menu has both) gives way to it. */
@media (max-width: 360px), (max-width: 639px) and (max-height: 700px) {
  .ra-hero .breadcrumbs { display: none; }
  .ra-hero__title { margin-top: 2px; }
}
@media (max-width: 360px) {
  .ra-hero__title { font-size: 1.375rem; }
  .ra-hero__lede { margin-top: 6px; font-size: 0.875rem; line-height: 1.45; }
}

/* Page switcher ("Rental arbitrage: Guide · Calculator · Contract"): a row of text links under a thin rule, so it
   reads as navigation between pages and not as another set of tabs (the calculator's model tabs sit right below it on
   that page). The other two pages are underlined links; the current one is plain bold text with an accent bar under
   it (shape as well as color), and aria-current for assistive technology. The label stays visible at every width. */
.ra-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--rule); font-family: var(--font-sans); }
.ra-switch__label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.ra-switch__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0 18px; }
.ra-switch__link { display: inline-flex; align-items: center; min-height: 36px; font-size: 0.9375rem; font-weight: 600; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.ra-switch__link:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.ra-switch__link[aria-current="page"] { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--accent); }
.ra-switch__link:focus-visible { outline-offset: 2px; }
@media (max-width: 360px) { .ra-switch { margin-top: 10px; gap: 0 12px; } .ra-switch__list { gap: 0 14px; } }

/* Guide header: byline, the short answer, three buttons. */
.ra-hero--guide { padding-bottom: clamp(16px, 2.4vw, 28px); }
.ra-hero__byline { margin-top: 10px; font-size: 0.875rem; color: var(--ink-3); }
.ra-hero__byline a { color: inherit; }
.ra-answer { max-width: 50rem; margin-top: clamp(16px, 2.4vw, 24px); padding: clamp(14px, 2.2vw, 20px) clamp(16px, 2.6vw, 24px); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--accent-soft); }
.ra-answer > p:not(.eyebrow) { margin-top: 6px; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.6; color: var(--ink); }
.ra-hero__actions { margin-top: clamp(16px, 2.4vw, 22px); }
.ra-hero__actions .btn .icon { flex: none; }
/* Phones: "Run your numbers" across the full width, the other two side by side under it (stacked again where they do
   not fit), and a tighter answer box, so all three buttons are on the first screen of a 375×667 phone. */
@media (max-width: 479px) {
  .ra-answer { padding: 12px 14px 14px; }
  .ra-answer > p:not(.eyebrow) { font-size: 1rem; line-height: 1.55; }
  .ra-hero__actions { gap: 10px; }
  .ra-hero__actions > .btn { flex: 1 1 auto; padding-inline: 0.85rem; }
  .ra-hero__actions > .btn:first-child { flex-basis: 100%; }
}

/* Buttons: the guide's "Open this example in the calculator" links and the calculator's own buttons (ra-calc.css adds
   the calculator variants). */
.ra-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.ra-btn:hover { border-color: var(--ink-2); }
.ra-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ra-nw { white-space: nowrap; }
/* Wide guide tables: the row label stays put while the figures scroll sideways. */
.ra-prose .table-scroll tbody th[scope="row"]:first-child { position: sticky; left: 0; z-index: 1; }

/* ---------- Guide extras ---------- */
.ra-guide { padding-top: clamp(28px, 3.6vw, 44px); }
/* Every guide section after the first is wrapped in .ra-gsec (pages/rental-arbitrage.mjs), which the browser skips
   rendering while it is off screen: the guide is about 12,000 words, and this keeps a phone's main thread free while
   the page loads. The wrapper keeps the spacing its heading and blocks had as direct children of .prose (h2 2em above,
   1.1em between blocks; .prose h2 + * still applies). Its inline padding, cancelled by negative margins, leaves room
   inside the paint containment that content-visibility adds for focus outlines of links at the start or end of a
   line. Until a section has been rendered once, its placeholder height comes from its text length (--ra-ch) times the
   guide's measured height per character at that width (about 1.05px at 320px, 0.93px at 390px, 0.63px from 700px);
   after that the browser remembers the real height. */
.ra-prose > .ra-gsec { margin-top: calc(2 * clamp(1.625rem, 1.35rem + 1vw, 2.125rem)); margin-inline: -8px; padding-inline: 8px; content-visibility: auto; contain-intrinsic-block-size: auto calc(var(--ra-ch, 3000) * 1.05px); }
@media (min-width: 380px) { .ra-prose > .ra-gsec { contain-intrinsic-block-size: auto calc(var(--ra-ch, 3000) * 0.93px); } }
@media (min-width: 480px) { .ra-prose > .ra-gsec { contain-intrinsic-block-size: auto calc(var(--ra-ch, 3000) * 0.77px); } }
@media (min-width: 600px) { .ra-prose > .ra-gsec { contain-intrinsic-block-size: auto calc(var(--ra-ch, 3000) * 0.67px); } }
@media (min-width: 700px) { .ra-prose > .ra-gsec { contain-intrinsic-block-size: auto calc(var(--ra-ch, 3000) * 0.63px); } }
.ra-gsec > * + * { margin-top: 1.1em; }
.ra-gsec > h2:first-child { margin-top: 0; }
/* The FAQ and the related episodes and articles below the guide: skipped the same way while off screen. */
.ra-page--guide > .ra-faq { content-visibility: auto; contain-intrinsic-block-size: auto 5500px; }
.ra-page--guide ~ .ra-lazy { content-visibility: auto; contain-intrinsic-block-size: auto 1100px; }
@media (min-width: 700px) { .ra-page--guide > .ra-faq { contain-intrinsic-block-size: auto 3200px; } .ra-page--guide ~ .ra-lazy { contain-intrinsic-block-size: auto 900px; } }
@media print { .ra-prose > .ra-gsec, .ra-page--guide > .ra-faq, .ra-page--guide ~ .ra-lazy { content-visibility: visible; } }
/* The desktop contents list: compact enough that all of it fits beside the guide on a laptop-height window. */
.ra-toc ol { gap: 0; }
.ra-toc a { padding-block: 4px; font-size: 0.8125rem; line-height: 1.3; }

/* Comparison tables with 4+ columns (pages/rental-arbitrage.mjs stackTable): one card per row on phones, each value
   under its column heading. The table keeps explicit table roles, so assistive technology still reads a table. */
@media (max-width: 559px) {
  .ra-prose table.ra-stack, .ra-prose .ra-stack caption, .ra-prose .ra-stack tbody, .ra-prose .ra-stack tr, .ra-prose .ra-stack th, .ra-prose .ra-stack td { display: block; }
  .ra-prose .ra-stack thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ra-prose .ra-stack tbody { display: grid; gap: 12px; }
  .ra-prose .ra-stack tr { border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
  .ra-prose .table-scroll .ra-stack tbody th[scope="row"] { position: static; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); font-weight: 600; }
  .ra-prose .ra-stack td { padding: 9px 14px; border-bottom: 1px solid var(--rule); }
  .ra-prose .ra-stack td:last-child { border-bottom: 0; }
  .ra-prose .ra-stack td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: 1px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); }
}

.prose .ra-example { margin-block: 1.6em; padding: clamp(16px, 2.6vw, 24px); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-2); font-family: var(--font-sans); font-size: 1rem; line-height: 1.55; }
.prose .ra-example + .ra-example { margin-top: 1.1em; }
.prose .ra-example__title { margin: 0; font-family: var(--font-serif); font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem); line-height: 1.3; }
.prose .ra-example__summary { margin-top: 8px; font-size: 0.9375rem; color: var(--ink-2); }
.ra-example__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
@media (min-width: 760px) { .ra-example__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.prose .ra-xt { font-size: 0.875rem; line-height: 1.4; background: var(--surface); border-radius: var(--radius); }
.prose .ra-xt caption { padding: 0 0 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.prose .ra-xt th, .prose .ra-xt td { padding: 7px 10px; background: transparent; border-bottom: 1px solid var(--rule); }
.prose .ra-xt th { width: 52%; font-weight: 500; color: var(--ink-3); }
.prose .ra-xt td { color: var(--ink); font-weight: 600; }
.prose .ra-xt tr:last-child th, .prose .ra-xt tr:last-child td { border-bottom: 0; }
.ra-example__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; font-size: 0.8125rem; color: var(--ink-3); }
/* Vertical padding as well: on a 320–360px phone the label wraps to two lines, which then keep clear of the border. */
.ra-btn--load { padding-block: 8px; color: var(--accent); text-decoration: none; }
.ra-btn--load:hover { border-color: var(--accent); color: var(--accent); }
.ra-btn--load .icon { flex: none; }

/* "Run your numbers" call-out in the guide (after the revenue and costs section). */
.prose .ra-callout { display: grid; gap: 14px 28px; align-items: center; margin-block: 1.8em; padding: clamp(18px, 2.6vw, 24px); border: 1px solid var(--rule-strong); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface); font-family: var(--font-sans); }
@media (min-width: 640px) { .prose .ra-callout { grid-template-columns: minmax(0, 1fr) auto; } }
.prose .ra-callout p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.prose .ra-callout .ra-callout__title { margin-bottom: 4px; font-family: var(--font-serif); font-size: 1.3125rem; line-height: 1.2; color: var(--ink); }
.prose .ra-callout .btn, .prose .ra-callout .btn:hover { color: var(--btn-fg); text-decoration: none; overflow-wrap: normal; }
.prose .ra-callout .btn .icon { flex: none; }

/* Short contract section on the guide: what the sample is, the notice and the two downloads. */
.ra-teaser__grid { display: grid; gap: 24px 48px; }
@media (min-width: 900px) { .ra-teaser__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
.ra-teaser .h2 { margin-top: 12px; }
.ra-teaser__lede { margin-top: 14px; max-width: 62ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.ra-teaser__more { margin-top: 16px; }
.ra-teaser__more .text-link { display: inline; color: var(--link); }
.ra-teaser__more .text-link .icon { display: inline-block; margin-left: 4px; vertical-align: -0.15em; }

.ra-cta { display: grid; gap: 18px 36px; align-items: center; margin-top: clamp(40px, 6vw, 64px); padding: clamp(20px, 3vw, 32px); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-2); }
@media (min-width: 900px) { .ra-cta { grid-template-columns: minmax(0, 1fr) auto; } }
.ra-cta__title { font-family: var(--font-serif); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); line-height: 1.2; color: var(--ink); }
.ra-cta p:not(.ra-cta__title):not(.btn-row__note) { margin-top: 8px; max-width: 62ch; color: var(--ink-2); }

/* ---------- Contract page and the guide's contract section ---------- */
/* A jump to a section lands on its heading, not on its top padding (html's scroll-padding clears the header). */
.ra-faq, .ra-teaser, .ra-reading, .ra-examples { scroll-margin-top: calc(8px - var(--section)); }
/* Header: title, short intro and the notice beside the download card on wide screens; stacked on phones, where the
   notice comes first and both download buttons still fit on the first screen. */
.ra-chead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 48px; margin-top: 8px; }
.ra-chead .ra-hero__title, .ra-chead .ra-hero__lede { margin-top: 0; }
@media (min-width: 900px) {
  .ra-chead { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-areas: "title dl" "lede dl" "legal dl" ". dl"; grid-template-rows: auto auto auto 1fr; align-items: start; }
  .ra-chead__title { grid-area: title; }
  .ra-chead__lede { grid-area: lede; }
  .ra-chead > .ra-dl { grid-area: dl; margin-top: 8px; }
  .ra-chead > .ra-legal { grid-area: legal; }
}
.ra-legal { max-width: 62rem; padding: 12px 16px 13px; border: 1px solid var(--rule-strong); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
.ra-legal__title { margin-bottom: 2px; font-weight: 700; color: var(--ink); }
@media (min-width: 640px) { .ra-legal { padding: 14px 20px 16px; font-size: 0.9375rem; } }
.ra-dl--card { padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-2); }
.ra-dl__title { margin: 0 0 10px; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ra-dl--card .ra-dl__list { gap: 8px; }
.ra-dl--card .ra-dl__link { padding: 10px 14px; }
.ra-dl--card .ra-dl__type { width: 46px; height: 46px; }
.ra-dl--card .ra-dl__meta { margin-top: 10px; }
.ra-dl--card .ra-dl__notice { margin: 0 0 10px; padding: 8px 12px; font-size: 0.8125rem; }
.ra-hero--contract { padding-bottom: clamp(16px, 2.4vw, 28px); }
.ra-contract { padding-top: clamp(32px, 4.4vw, 56px); }
.ra-dl__meta a { color: var(--link); }
.ra-h2 { margin-bottom: 14px; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); line-height: 1.2; }
.ra-contract__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 56px; }
@media (min-width: 900px) { .ra-contract__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.ra-notes-plain { margin-top: clamp(40px, 5vw, 64px); }
.ra-dl__notice { margin: -4px 0 14px; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--accent-soft); font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.ra-dl__notice strong { color: var(--ink); font-weight: 600; }
.ra-dl__list { list-style: none; display: grid; gap: 12px; }
.ra-dl__link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.ra-dl__link:hover { border-color: var(--accent); box-shadow: var(--shadow-md); color: var(--ink); }
.ra-dl__type { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; }
.ra-dl__text { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.ra-dl__text strong { font-size: 1rem; font-weight: 600; }
.ra-dl__text span { font-size: 0.8125rem; color: var(--ink-3); }
.ra-dl__link .icon { color: var(--accent); }
.ra-dl__meta { margin-top: 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.ra-scope__list { list-style: none; display: grid; gap: 10px; }
.ra-scope__list li { position: relative; padding-left: 30px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.ra-scope__list li::before { position: absolute; left: 0; top: 0.15em; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.75rem; font-weight: 700; }
.ra-scope__list li.is-yes::before { content: "\2713"; background: var(--accent-soft); color: var(--accent); }
.ra-scope__list li.is-no::before { content: "\2715"; background: var(--paper-3); color: var(--ink-2); }
.ra-checklist { list-style: none; counter-reset: ra-check; display: grid; gap: 14px 40px; }
.ra-checklist li { counter-increment: ra-check; position: relative; padding-left: 40px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.ra-checklist li::before { content: counter(ra-check); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--surface); font-size: 0.75rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ra-explain__intro { margin: -6px 0 14px; font-size: 0.875rem; color: var(--ink-3); }
.ra-explain { display: grid; gap: 0 40px; margin: 0; }
@media (min-width: 900px) { .ra-explain { grid-template-columns: 1fr 1fr; } }
.ra-explain > div { padding: 14px 0; border-top: 1px solid var(--rule); }
.ra-explain dt { font-size: 0.9375rem; font-weight: 600; }
.ra-explain dt a { color: var(--ink); text-decoration-color: var(--rule-strong); }
.ra-explain dt a:hover { color: var(--accent); }
.ra-explain dd { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.ra-preview__intro { max-width: 70ch; margin-top: -4px; font-size: 0.9375rem; color: var(--ink-2); }
/* The full agreement opens in place at its natural height (a disclosure, not a nested scroll box). */
.ra-preview { margin-top: 16px; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.ra-preview__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label icon" "meta icon"; align-items: center; gap: 2px 16px; padding: 16px clamp(16px, 2.4vw, 24px); cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.ra-preview__summary::-webkit-details-marker { display: none; }
.ra-preview__summary:focus-visible { outline-offset: -2px; }
.ra-preview__label { grid-area: label; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--link); }
.ra-preview__summary:hover .ra-preview__label { text-decoration: underline; text-underline-offset: 0.18em; }
.ra-preview__meta { grid-area: meta; font-size: 0.875rem; line-height: 1.4; color: var(--ink-3); }
.ra-preview__summary .icon { grid-area: icon; color: var(--link); transition: transform 0.2s var(--ease); }
.ra-preview__close { display: none; }
.ra-preview[open] .ra-preview__open { display: none; }
.ra-preview[open] .ra-preview__close { display: inline; }
.ra-preview[open] > .ra-preview__summary { border-bottom: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ra-preview[open] > .ra-preview__summary .icon { transform: rotate(180deg); }
.ra-preview__body { padding: clamp(18px, 3.2vw, 44px); }
.ra-preview .ra-agr, .ra-preview__skip, .ra-preview__end { max-width: 46rem; margin-inline: auto; }
.ra-preview__skip { margin-bottom: 20px; font-size: 0.875rem; }
.ra-preview__end { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 0.875rem; color: var(--ink-3); }
.ra-preview__skip a, .ra-preview__end a { color: var(--link); }
/* Small phones: the agreement's two-column fill-in tables use the full width (no hanging indent) so labels such as
   "Subletting and assignment" keep whole words. */
@media (max-width: 420px) {
  .ra-preview__body { padding-inline: 12px; }
  .ra-preview .ra-agr .ra-agr-fields { width: 100%; margin-left: 0; font-size: 0.875rem; }
  .ra-preview .ra-agr .ra-agr-fields th { width: 44%; }
  .ra-preview .ra-agr .ra-agr-fields th, .ra-preview .ra-agr .ra-agr-fields td { padding: 6px 8px; overflow-wrap: break-word; hyphens: auto; }
}

/* ---------- FAQ ---------- */
.ra-faq__wrap { max-width: 880px; }
.ra-faq__wrap .h2 { margin-top: 12px; }
.ra-faq__intro { margin-top: 12px; max-width: 64ch; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.ra-faq__intro a { color: var(--link); }
.ra-faq__list { margin-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--rule); }
.ra-faq__item { padding: clamp(18px, 2.4vw, 26px) 0; border-bottom: 1px solid var(--rule); }
.ra-faq__q { font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.4375rem); line-height: 1.25; }
.ra-faq__a { margin-top: 10px; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.ra-faq__a > * + * { margin-top: 0.75em; }
.ra-faq__a ul, .ra-faq__a ol { padding-left: 1.2em; }
.ra-faq__a a { color: var(--link); }
.ra-faq__a strong { color: var(--ink); font-weight: 600; }

/* "Keep going" links to the other two pages. */
.ra-next__title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); }
.ra-next__list { list-style: none; display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 760px) { .ra-next__list { grid-template-columns: 1fr 1fr; } }
.ra-next__card { display: grid; gap: 6px; height: 100%; padding: 18px 20px; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.ra-next__card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); color: var(--ink); }
.ra-next__name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.2; color: var(--link); }
.ra-next__name .icon { flex: none; transition: transform 0.2s var(--ease); }
.ra-next__card:hover .ra-next__name .icon { transform: translateX(3px); }
.ra-next__text { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ra-dl__link, .ra-preview__summary .icon, .ra-next__card, .ra-next__name .icon { transition: none; }
}

/* ---------- Print ---------- */
@media print {
  /* Ordinary printing of a page: drop the controls, expand the contract preview. */
  .ra-btn--load, .ra-cta, .ra-switch, .ra-hero__actions, .ra-callout .btn, .ra-next { display: none !important; }
  .ra-preview { border: 0; box-shadow: none; }
  .ra-preview__summary, .ra-preview__skip, .ra-preview__end { display: none !important; }
  .ra-preview__body { padding: 0; }
}