/* /rental-arbitrage/ — calculator, guide extras, contract section, FAQ.
   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 page head). */

[hidden] { display: none !important; }

/* ---------- Hero ---------- */
/* Kept compact so the calculator's 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). */
.ra-hero { padding-block: clamp(10px, 2vw, 22px) clamp(10px, 1.4vw, 16px); }
.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__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 6px; font-size: 0.875rem; color: var(--ink-3); }
.ra-hero__meta a { color: inherit; }
.ra-hero__meta .ra-hero__link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 600; color: var(--link); text-underline-offset: 0.2em; }
.ra-hero__link .icon { flex: none; }
@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; }
  .ra-hero__meta { margin-top: 2px; }
}

/* ---------- Calculator shell ---------- */
/* Anchor jumps: html's scroll-padding-top already clears the sticky header, so no extra scroll-margin here. */
.ra-calc {
  --ra-pad: clamp(16px, 2.2vw, 24px);
  padding-block: clamp(14px, 2vw, 24px) clamp(36px, 5vw, 64px);
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
  font-family: var(--font-sans);
}
.ra-calc__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 28px; margin-bottom: 12px; }
.ra-calc__title { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
.ra-calc__intro { max-width: 72ch; font-size: 0.9375rem; color: var(--ink-2); }
@media (max-width: 639px) { .ra-calc__intro { display: none; } .ra-calc__head { margin-bottom: 10px; } .ra-tabs { margin-bottom: 10px; } }
@media (max-width: 360px) { .ra-calc__title { font-size: 1.25rem; } }
.ra-noscript { margin-bottom: 16px; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 0.9375rem; }

/* Tabs: a segmented control. Without JavaScript all three models are shown one after another instead. */
.ra-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--paper-3); }
html:not(.js) .ra-tabs { display: none; }
.ra-tab { display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; text-align: center; cursor: pointer; transition: background-color 0.15s var(--ease), color 0.15s var(--ease); }
.ra-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); }
/* The selected tab is marked by shape as well as color: an accent bar along its bottom edge (well over 3:1 against
   the bar in both themes), plus a lifted background that is lighter than the bar in dark mode too. */
.ra-tabs { --ra-tab-on: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ra-tabs { --ra-tab-on: color-mix(in srgb, var(--accent) 16%, var(--surface)); } }
:root[data-theme="dark"] .ra-tabs { --ra-tab-on: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.ra-tab[aria-selected="true"] { background: var(--ra-tab-on); color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent), inset 0 0 0 1px var(--rule-strong), 0 1px 2px rgba(14, 23, 38, 0.1); }
.ra-tab[aria-selected="true"] .ra-tab__name { color: var(--accent); }
.ra-tab[aria-selected="true"] .ra-tab__hint { color: var(--ink-2); } /* AA on the lifted background in both themes */
.ra-tab:focus-visible { outline-offset: -2px; }
.ra-tab__name { font-size: 0.9375rem; font-weight: 600; line-height: 1.25; }
.ra-tab__short { display: none; }
.ra-tab__hint { font-size: 0.75rem; color: var(--ink-3); line-height: 1.3; }
/* Phones: short names at a readable size (only one name is displayed, so it is also the tab's accessible name). */
@media (max-width: 559px) {
  .ra-tabs { gap: 3px; padding: 3px; }
  .ra-tab { min-height: 46px; padding: 5px 4px 7px; }
  .ra-tab__long { display: none; }
  .ra-tab__short { display: inline; }
  .ra-tab__name { font-size: 0.875rem; line-height: 1.2; }
  .ra-tab__hint { display: none; }
}

.ra-panel__title { margin-bottom: 14px; font-size: 1.5rem; }
.js .ra-panel__title { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.js .ra-calc:not(.is-ready) .ra-panel:not(.is-active) { display: none; }
html:not(.js) .ra-panel + .ra-panel { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--rule-strong); }

/* Layout: one column in DOM order (essentials → results → more → details); two columns from 1024px. */
.ra-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.2vw, 28px); }
@media (min-width: 1024px) {
  .ra-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 416px); grid-template-areas: "main results" "more results" "detail detail"; align-items: start; }
  .ra-main { grid-area: main; }
  /* The grid item stretches over the inputs and "more" rows; the card inside it sticks within that area only
     (a sticky grid item itself would be allowed to slide over the detail blocks below). The card is never a scroll
     box: when all of it does not fit on screen (short windows, a long list of input problems), app.js adds
     .is-static and it scrolls with the page, so the disclaimer and the Print and CSV buttons are always reachable. */
  .ra-results { grid-area: results; align-self: stretch; }
  .ra-card--sticky { position: sticky; top: calc(var(--header-h) + 16px); }
  .ra-card--sticky.is-static, html:not(.js) .ra-card--sticky { position: static; }
  .ra-more { grid-area: more; }
  .ra-detail { grid-area: detail; }
}

/* ---------- Inputs card ---------- */
.ra-main { min-width: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
/* The message keeps at least 20rem (320px) of width. Where the buttons beside it would leave less (phones, mid-size
   windows once Undo shows, the 1024px two-column layout), they wrap onto their own row under the full-width message
   instead of squeezing it into a narrow column. */
.ra-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 9px var(--ra-pad); border-bottom: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--accent-soft); }
.ra-status:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.ra-status__text { flex: 1 1 20rem; min-width: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); }
.ra-status__text strong { color: var(--ink); font-weight: 600; }
.ra-status__actions { flex: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ra-status__actions .ra-btn { gap: 0; }
@media (max-width: 479.98px) {
  .ra-status { gap: 5px 14px; padding-block: 7px; }
  .ra-status__actions .ra-btn--quiet { min-height: 32px; }
}
/* Phones show "Reset" / "Clear"; the rest of each name stays available to assistive technology. */
@media (max-width: 639px) { .ra-wide { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }

.ra-fs { min-width: 0; margin: 0; padding: 12px var(--ra-pad) 2px; border: 0; }
.ra-fs + .ra-fs { border-top: 1px solid var(--rule); }
.ra-fs__legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ra-fs__legend + * { clear: both; }
.ra-fs__intro { margin-bottom: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }

/* Fields: a grid whose rows (label / input / help / message) line up across columns (subgrid). */
.ra-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); column-gap: 14px; }
@media (min-width: 640px) { .ra-fields { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); column-gap: 20px; } }
.ra-field { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; align-content: start; min-width: 0; margin-bottom: 16px; }
.ra-field__label { align-self: end; font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
@media (max-width: 639px) { .ra-field__label { font-size: 0.8125rem; } }
.ra-field__help { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-3); }
/* Phones: an essential field's help appears once the field is focused (app.js marks it .is-helped) and then stays, so
   a result is a short scroll away and nothing below a field moves when it loses focus (a tap on the next control
   lands where it was aimed). It stays the input's accessible description (aria-describedby) either way. Without
   JavaScript every help text is shown. */
@media (max-width: 639px) {
  .js .ra-main .ra-field__help { display: none; }
  .js .ra-main .ra-field.is-helped .ra-field__help, .js .ra-main .ra-field:focus-within .ra-field__help { display: block; }
}
.ra-field__msg { font-size: 0.8125rem; line-height: 1.45; font-weight: 500; }
.ra-field__msg::before { content: "!"; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; margin-right: 6px; border-radius: 50%; font-size: 0.75rem; font-weight: 700; vertical-align: 0.05em; }
.ra-field.is-error .ra-field__msg, [data-msg-for] { color: var(--err); }
.ra-field.is-error .ra-field__msg::before { background: var(--err); color: var(--surface); }
.ra-field.is-warn .ra-field__msg { color: var(--ink-2); }
.ra-field.is-warn .ra-field__msg::before { background: var(--accent); color: var(--accent-ink); }
[data-msg-for] { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 500; }

/* Input edges: at least 3:1 against the card in both themes (WCAG 1.4.11). */
.ra-calc { --ra-edge: color-mix(in srgb, var(--ink-3) 70%, var(--rule-strong)); }
.ra-input { display: flex; align-items: stretch; min-height: 44px; border: 1px solid var(--ra-edge); border-radius: var(--radius); background: var(--paper); transition: border-color 0.15s, box-shadow 0.15s; }
.ra-input:hover { border-color: var(--ink-2); }
.ra-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.ra-field.is-error .ra-input { border-color: var(--err); }
.ra-field.is-error .ra-input:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 22%, transparent); }
.ra-field.is-warn .ra-input { border-color: var(--accent); }
.ra-input__affix { display: flex; align-items: center; padding-left: 12px; font-size: 0.9375rem; color: var(--ink-3); white-space: nowrap; user-select: none; }
.ra-input__affix--end { padding: 0 12px 0 4px; font-size: 0.8125rem; }
.ra-input__control { flex: 1 1 auto; width: 100%; min-width: 0; padding: 0 12px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; outline: none; }
.has-pre .ra-input__control { padding-left: 3px; }
.ra-field--label .ra-input__control { font-variant-numeric: normal; } /* words: tabular figures widen hyphens in Inter */
.ra-input__control::placeholder { color: var(--ink-3); opacity: 1; }

.ra-select-wrap { position: relative; }
.ra-select-wrap::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.ra-select { width: 100%; min-height: 44px; padding: 0 32px 0 12px; border: 1px solid var(--ra-edge); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.ra-select:hover { border-color: var(--ink-2); }
.ra-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }

.ra-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; color: var(--ink); line-height: 1.4; }
.ra-field--select { min-width: 0; }
@media (max-width: 639px) { .ra-field--select:not(.ra-field--cell) { grid-column: 1 / -1; } }
.ra-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.ra-check label { cursor: pointer; }
.ra-field .ra-check { grid-row: span 2; align-self: center; }

.ra-notice { margin: 0 0 12px; padding: 12px 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-notice strong { color: var(--ink); }
.ra-note { margin-top: 2px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }

/* Buttons local to the calculator */
.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-btn--quiet { min-height: 34px; padding: 0 11px; font-size: 0.8125rem; }
.ra-btn--add { border-style: dashed; color: var(--accent); }
.ra-btn--add:hover { border-color: var(--accent); }
.ra-linkbtn { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.ra-linkbtn:hover { color: var(--accent-hover); }

/* Rent roll editor */
/* Sized by the editor's own width (container queries), not the window: the inputs column is narrow beside the results
   on 1024–1200px screens. Four fields per row only when each has room for its figures. */
.ra-rooms { list-style: none; display: grid; gap: 10px; margin: 12px 0 0; padding: 0; container-type: inline-size; }
.ra-room__set { position: relative; min-width: 0; margin: 0; padding: 10px 14px 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); }
.ra-room__legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.ra-room__fields { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
@container (min-width: 600px) { .ra-room__fields { grid-template-columns: 1.35fr 1fr 0.8fr 0.95fr; } }
@container (max-width: 380px) { .ra-room__fields > .ra-field--label, .ra-room__fields > .ra-field--collectionLoss { grid-column: 1 / -1; } }
.ra-room__fields .ra-field { margin-bottom: 12px; }
/* "Describe the room, not the person" is shown once, under the first room; later rooms keep it as the field's
   accessible description only (visually hidden, so it takes no row). */
.ra-room + .ra-room .ra-field--label .ra-field__help, .js .ra-main .ra-room + .ra-room .ra-field--label.is-helped .ra-field__help { display: block; position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ra-room__fields .ra-field__label { font-size: 0.8125rem; }
.ra-room__remove { position: absolute; top: 6px; right: 8px; min-height: 30px; padding: 0 8px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-3); font: inherit; font-size: 0.8125rem; font-weight: 500; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.ra-room__remove:hover { color: var(--ink); }
.ra-room__remove:disabled { visibility: hidden; }
/* After a room is removed, "Removed Room 3. Undo" takes its place in the list (app.js), right where the reader tapped:
   on a phone the status line's Undo is far above, off screen. A room brought back from there takes focus, so it is
   outlined where it reappears. */
.ra-room-gone { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; min-width: 0; min-height: 44px; padding: 4px 8px 4px 14px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--rule)); border-radius: var(--radius); background: var(--accent-soft); font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.ra-room-gone .ra-linkbtn { padding-inline: 6px; font-weight: 600; }
.ra-room__set:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.ra-rooms__actions { margin: 12px 0 16px; }

/* ---------- Results card ---------- */
.ra-results { min-width: 0; }
.ra-card { overflow: hidden; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.ra-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; padding: 9px 20px 0; background: var(--navy); }
.ra-card__title { padding: 4px 0; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; color: var(--navy-ink-2); }
/* Jumps to the notes on return, payback and break-even under the inputs. */
.ra-card__explain { display: inline-flex; align-items: center; min-height: 24px; font-size: 0.75rem; font-weight: 600; color: var(--navy-accent); text-decoration: underline; text-underline-offset: 0.18em; }
.ra-card__explain:hover { color: var(--navy-ink); }
.ra-card__explain:focus-visible { outline-color: var(--navy-accent); }
.ra-headline { padding: 4px 20px 16px; background: var(--navy); color: var(--navy-ink); }
.ra-headline__label { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.ra-headline__label span { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--navy-ink-2); }
.ra-headline__value { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font-size: clamp(2.125rem, 1.8rem + 1.1vw, 2.5rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.ra-headline__value > [data-out] { white-space: nowrap; }
.ra-headline__value.is-long { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.ra-headline__value.is-xlong { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.ra-headline__value.is-xlong > [data-out] { white-space: normal; }
.ra-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid var(--navy-ink-2); border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--navy-ink); white-space: nowrap; }
.ra-tag--warn { border-color: var(--navy-accent); background: color-mix(in srgb, var(--navy-accent) 16%, transparent); }
/* Input errors: the figures use corrected values, so they are dimmed and tagged until the inputs are fixed. */
.ra-headline.is-provisional [data-out] { opacity: 0.62; }
.ra-kpis.is-provisional .ra-kpi__value { color: var(--ink-3); }
.ra-headline__note { margin-top: 6px; font-size: 0.8125rem; color: var(--navy-ink-2); }

.ra-issues { padding: 12px 20px; border-top: 1px solid var(--rule); font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.ra-issues--error { border-left: 4px solid var(--err); background: color-mix(in srgb, var(--err) 7%, var(--surface)); }
.ra-issues--warn { border-left: 4px solid var(--accent); background: var(--accent-soft); }
.ra-issues__title { font-weight: 700; color: var(--ink); }
.ra-issues--error .ra-issues__title { color: var(--err); }
.ra-issues ul { margin-top: 4px; padding-left: 1.1em; }
.ra-issues li + li { margin-top: 6px; }
/* Each issue links to its field: at least 24px tall (WCAG 2.2 target size). */
.ra-issues a { display: block; padding-block: 3px; color: var(--ink); } /* block, so the bullet stays on its first line */

.ra-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.ra-kpi { min-width: 0; padding: 10px 12px 11px 20px; border-top: 1px solid var(--rule); }
.ra-kpi:nth-child(even) { padding-left: 16px; }
.ra-kpi:nth-child(odd) { border-right: 1px solid var(--rule); }
.ra-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.ra-kpi dt { font-size: 0.75rem; font-weight: 500; line-height: 1.3; color: var(--ink-3); }
.ra-kpi dd { margin: 3px 0 0; }
.ra-kpi__value { display: block; font-size: 1.125rem; font-weight: 650; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
/* Very large figures: smaller, and they wrap only after a thousands comma (<wbr>), never after the minus sign.
   Amounts (app.js .is-amount) never split mid-number: up to 13 characters stay on one line (they fit a 320px phone at
   these sizes), and from 14 characters (.is-xlong) they may wrap only after a comma. */
.ra-kpi__value.is-long { font-size: 1rem; }
.ra-kpi__value.is-xlong { font-size: 0.875rem; overflow-wrap: normal; }
.ra-kpi__value.is-amount { overflow-wrap: normal; white-space: nowrap; }
.ra-kpi__value.is-amount.is-xlong { white-space: normal; }
.ra-kpi__sub { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.35; color: var(--ink-3); overflow-wrap: anywhere; }
.ra-kpi__flag { display: block; margin-top: 3px; }
.ra-link { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }
.ra-kpi__sub .ra-link { display: inline-flex; align-items: center; min-height: 24px; }
.ra-flag { display: inline; font-weight: 600; color: var(--ink); }
.ra-flag::before { content: "!"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: 5px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.6875rem; font-weight: 700; vertical-align: 0.08em; }
.ra-kpi.is-flag { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
@media (max-width: 380px) { .ra-kpi { padding-left: 14px; } .ra-kpi__value { font-size: 1rem; } .ra-kpi__value.is-long { font-size: 0.9375rem; } .ra-kpi__value.is-amount.is-long { font-size: 0.875rem; } .ra-kpi__value.is-xlong { font-size: 0.8125rem; } }

.ra-disclaimer { padding: 11px 20px; border-top: 1px solid var(--rule); font-size: 0.75rem; line-height: 1.5; color: var(--ink-3); }
.ra-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 20px 14px; border-top: 1px solid var(--rule); background: var(--paper-2); }
.ra-main__foot { padding: 14px var(--ra-pad) 16px; border-top: 1px solid var(--rule); background: var(--paper-2); }
@media (min-width: 1024px) { .ra-main__foot { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } }
.ra-main__foot .ra-check { font-size: 0.9375rem; font-weight: 500; }
.ra-save__status { margin: 4px 0 0 30px; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-3); }
.ra-main__foot .ra-linkbtn { margin: 2px 0 0 30px; }

/* ---------- More assumptions (collapsed groups) ---------- */
.ra-more { min-width: 0; }
.ra-more__title { font-size: 1.25rem; }
.ra-more__intro { margin: 4px 0 12px; font-size: 0.875rem; color: var(--ink-3); }
.ra-group { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.ra-group + .ra-group { margin-top: 8px; }
.ra-group__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title badge icon" "value value icon"; align-items: center; gap: 3px 10px; padding: 13px 16px 13px var(--ra-pad); cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.ra-group__summary::-webkit-details-marker { display: none; }
.ra-group__summary:hover .ra-group__title { color: var(--accent); }
.ra-group__summary:focus-visible { outline-offset: -2px; }
.ra-group__title { grid-area: title; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ra-group__value { grid-area: value; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-3); }
.ra-group__badge { grid-area: badge; padding: 1px 8px; border-radius: 999px; background: var(--err); color: var(--surface); font-size: 0.6875rem; font-weight: 700; }
.ra-group__summary .icon { grid-area: icon; color: var(--ink-3); transition: transform 0.2s var(--ease); }
.ra-group[open] > .ra-group__summary .icon { transform: rotate(180deg); }
.ra-group[open] > .ra-group__summary { border-bottom: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ra-group__body { padding: 16px var(--ra-pad) 4px; }
.ra-group__intro { margin-bottom: 14px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.ra-group__body > .ra-group__intro:last-child { margin: 0 0 16px; }
.ra-subset { min-width: 0; margin: 0 0 4px; padding: 0; border: 0; }
.ra-subset legend { padding: 0; margin-bottom: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.ra-group .ra-note { margin: -4px 0 16px; }

/* Seasonality table */
.ra-season { margin-top: 4px; }
.ra-season__t td { min-width: 104px; }
.ra-season__t th[scope="row"] { vertical-align: middle; }

/* ---------- Detailed results ---------- */
.ra-detail { display: grid; gap: clamp(16px, 2.2vw, 24px); min-width: 0; }
.ra-detail__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.2vw, 24px); }
@media (min-width: 1200px) { .ra-detail__pair { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: start; } }
.ra-block { min-width: 0; padding: var(--ra-pad); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.ra-block__title { margin-bottom: 12px; font-size: 1.375rem; line-height: 1.2; }
.ra-block__lede { margin-bottom: 14px; max-width: 80ch; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.ra-block__lede strong { color: var(--ink); font-weight: 600; }
.ra-block__note { margin-top: 10px; max-width: 90ch; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.ra-block__note p + p, .ra-block__note p + ul { margin-top: 6px; }
.ra-block__note strong { color: var(--ink-2); }

.ra-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* positioned, so visually hidden labels inside are clipped too */
.ra-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Scroll box around a wide table: a hint and a right-edge fade while more columns are off to the side
   (app.js sets .is-scrollable / .is-end). The row labels stay put (sticky) while the numbers scroll. */
.ra-scroll { --ra-fade: var(--surface); position: relative; min-width: 0; }
.ra-scroll + .ra-scroll { margin-top: 14px; }
.ra-scroll__hint { display: none; height: 18px; margin: 0 0 6px; font-size: 0.75rem; font-weight: 500; line-height: 18px; color: var(--ink-3); text-align: right; }
.ra-scroll.is-scrollable > .ra-scroll__hint { display: block; }
.ra-scroll.is-scrollable.is-end > .ra-scroll__hint { visibility: hidden; }
.ra-scroll::after { content: ""; position: absolute; top: 24px; right: 0; bottom: 0; width: 28px; background: linear-gradient(to right, transparent, var(--ra-fade)); pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.ra-scroll.is-scrollable:not(.is-end)::after { opacity: 1; }
.ra-prose .ra-scroll { --ra-fade: var(--paper); }
.ra-table-wrap .ra-t tbody th[scope="row"], .ra-table-wrap .ra-t thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.ra-scroll.is-scrollable .ra-t tbody th[scope="row"] { box-shadow: inset -1px 0 0 var(--rule); }
.ra-t__group th > span { position: sticky; left: 0; }
.ra-prose .table-scroll tbody th[scope="row"]:first-child { position: sticky; left: 0; z-index: 1; }
/* Tabular figures only where figures line up (data cells). Inter's tabular forms also widen hyphens, so labels, word
   cells (.ra-tx) and notes keep proportional text ("Master-lease rent", "Pre-opening"). */
.ra-t { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.4; font-variant-numeric: lining-nums; }
.ra-t td { font-variant-numeric: tabular-nums lining-nums; }
.ra-t td.ra-tx, .ra-t tfoot td, .ra-t td .ra-t__d, .ra-t td .ra-flag { font-variant-numeric: lining-nums; }
.ra-t th, .ra-t td { padding: 7px 10px; border-bottom: 1px solid var(--rule); text-align: right; vertical-align: top; white-space: nowrap; }
.ra-t th:first-child, .ra-t td:first-child { padding-left: 0; }
.ra-t th:last-child, .ra-t td:last-child { padding-right: 0; }
.ra-t thead th { font-size: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--ink-3); border-bottom: 1px solid var(--rule-strong); vertical-align: bottom; white-space: normal; }
.ra-t th[scope="row"], .ra-t thead th:first-child { text-align: left; white-space: normal; }
.ra-t th[scope="row"] { font-weight: 500; color: var(--ink-2); min-width: 9em; }
.ra-t th[scope="row"] span, .ra-t__d { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ink-3); }
.ra-t__v { display: block; }
.ra-nw { white-space: nowrap; }
/* Phones: secondary columns (.ra-col--opt) fold into a line under the row label (.ra-t__alt). */
.ra-t .ra-t__alt, .ra-t th[scope="row"] .ra-t__alt { display: none; }
@media (max-width: 639px) {
  .ra-t th, .ra-t td { padding: 6px 7px; }
  .ra-t th[scope="row"] { min-width: 7.5em; }
  .ra-t .ra-col--opt { display: none; }
  .ra-t .ra-t__alt, .ra-t th[scope="row"] .ra-t__alt { display: block; }
  .ra-t td .ra-t__alt { font-size: 0.75rem; font-weight: 400; color: var(--ink-3); }
  .ra-season__t td { min-width: 84px; }
}
@media (max-width: 360px) {
  .ra-t { font-size: 0.8125rem; }
  .ra-t th, .ra-t td { padding: 5px 4px; }
  .ra-t th[scope="row"] { min-width: 6.5em; hyphens: auto; }
}
.ra-t__group th { white-space: normal; padding-top: 16px; font-size: 0.6875rem !important; font-weight: 600 !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3) !important; text-align: left; }
.ra-t tbody:first-of-type .ra-t__group th { padding-top: 10px; }
.ra-t__total th, .ra-t__total td { font-weight: 650; color: var(--ink); border-bottom-color: var(--rule-strong); }
.ra-t__total th[scope="row"] { font-weight: 650; color: var(--ink); }
.ra-t__sub th[scope="row"] { padding-left: 16px; font-weight: 400; color: var(--ink-3); }
.ra-t__sub td { color: var(--ink-3); }
.ra-t__key th, .ra-t__key td, .ra-table-wrap .ra-t tr.ra-t__key th[scope="row"] { font-weight: 700; color: var(--ink); background: var(--accent-soft); border-bottom: 0; }
.ra-t__key th[scope="row"] { padding-left: 10px; font-weight: 700; color: var(--ink); border-radius: var(--radius) 0 0 var(--radius); }
.ra-t__key td:last-child { padding-right: 10px; border-radius: 0 var(--radius) var(--radius) 0; }
.ra-t__key th span { color: var(--ink-2); }

.ra-t--grid th, .ra-t--grid td { text-align: center; padding: 8px 6px; }
.ra-t--grid th[scope="row"], .ra-t--grid thead th:first-child { text-align: left; padding-left: 0; min-width: 6.5em; }
.ra-t--grid td { min-width: 4.6em; border: 2px solid var(--surface); border-radius: 4px; font-weight: 600; }
.ra-t--grid td.is-pos { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--ink); font-weight: 650; }
.ra-t--grid td.is-zero { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.ra-t--grid td.is-neg { background: var(--paper-2); color: var(--ink-2); font-weight: 450; }
.ra-t--grid td.is-na { color: var(--ink-3); font-weight: 400; }
.ra-t--grid td.is-base { box-shadow: inset 0 0 0 2px var(--accent); color: var(--ink); font-weight: 700; }

.ra-t--schedule th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 4em; background: var(--surface); text-align: center; padding-right: 10px; }
.ra-t--schedule tr.is-pre th, .ra-t--schedule tr.is-pre td, .ra-table-wrap .ra-t--schedule tr.is-pre th[scope="row"] { background: var(--paper-2); }
.ra-t--schedule td.is-neg { color: var(--ink); font-weight: 600; }

.ra-t--scenarios th[scope="row"] { min-width: 12em; font-weight: 600; color: var(--ink); }
.ra-t--scenarios tr.is-base th, .ra-t--scenarios tr.is-base td, .ra-table-wrap .ra-t--scenarios tr.is-base th[scope="row"] { background: var(--paper-2); }
.ra-t--scenarios .ra-flag { display: block; font-size: 0.75rem; font-weight: 500; white-space: normal; }
.ra-t--scenarios td:last-child { white-space: normal; min-width: 7.5em; }
@media (max-width: 639px) {
  .ra-t--scenarios th[scope="row"] { min-width: 8em; }
  .ra-t td .ra-t__alt { white-space: normal; }
}
.ra-t--uses td:nth-child(2), .ra-t--uses thead th:nth-child(2) { text-align: left; }
.ra-t--uses td:nth-child(2) { white-space: normal; color: var(--ink-3); font-size: 0.8125rem; }

.ra-t--adj { width: auto; }
.ra-t--adj th, .ra-t--adj td { vertical-align: middle; }
.ra-t--adj td { width: 150px; min-width: 120px; }
.ra-t--adj th[scope="row"] { min-width: 7.5em; padding-right: 16px; }
.ra-t tfoot td { padding-top: 10px; border-bottom: 0; text-align: left; white-space: normal; font-size: 0.75rem; color: var(--ink-3); }
.ra-field--cell { display: block; margin: 0; }
.ra-field--cell .ra-input { min-height: 38px; }
.ra-field--cell .ra-input__control { font-size: 0.9375rem; padding-inline: 8px; }
.ra-field--cell .ra-field__msg { margin-top: 4px; white-space: normal; text-align: left; }

.ra-notes { margin: 0; }
.ra-notes__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding: 11px 0; border-top: 1px solid var(--rule); }
.ra-notes__item:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 760px) { .ra-notes__item { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); } }
.ra-notes dt { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.ra-notes dd { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
.ra-notes dd strong { margin-right: 6px; color: var(--ink); font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }

.ra-timing__msg { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 0.875rem; line-height: 1.5; color: var(--ink); border-radius: 0 var(--radius) var(--radius) 0; }
.ra-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px 20px; margin: 14px 0 0; }
.ra-stats dt { font-size: 0.75rem; line-height: 1.35; color: var(--ink-3); }
.ra-stats dd { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

.ra-fold { margin-top: 16px; border-top: 1px solid var(--rule); }
.ra-fold__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.ra-fold__summary::-webkit-details-marker { display: none; }
.ra-fold__summary .icon { margin-left: auto; color: var(--ink-3); transition: transform 0.2s var(--ease); }
.ra-fold[open] > .ra-fold__summary .icon { transform: rotate(180deg); }
.ra-fold__meta { font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); }
.ra-fold > .ra-block__note { margin: 0 0 12px; }

.ra-assume { display: grid; gap: 20px 40px; }
@media (min-width: 900px) { .ra-assume { grid-template-columns: 1fr 1fr; } }
.ra-assume__title { margin-bottom: 8px; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ra-bullets { padding-left: 1.1em; font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
.ra-bullets li + li { margin-top: 6px; }
.ra-bullets li::marker { color: var(--ink-3); }

/* ---------- Guide extras ---------- */
.ra-guide__intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: clamp(20px, 3vw, 32px); }
.ra-guide__lede { font-size: 1.0625rem; color: var(--ink-2); }
.ra-guide__byline { flex-basis: 100%; font-size: 0.875rem; color: var(--ink-3); }
.ra-guide__byline a { color: inherit; }
/* 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); }
.ra-btn--load { color: var(--accent); }
.ra-btn--load:hover { border-color: var(--accent); }

.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 section ---------- */
/* A jump to the section lands on its heading, not on its top padding (html's scroll-padding clears the header). */
.ra-contract, .ra-faq { scroll-margin-top: calc(8px - var(--section)); }
.ra-contract__head { max-width: 62rem; }
.ra-contract__head .lede { margin-top: 16px; max-width: 64ch; }
.ra-contract__head .lede strong { color: var(--ink); font-weight: 600; }
.ra-legal { max-width: 62rem; margin-top: 24px; padding: 16px 22px 18px; border: 1px solid var(--rule-strong); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
.ra-legal__title { margin-bottom: 4px; font-weight: 700; color: var(--ink); }
.ra-h3 { margin-bottom: 14px; font-size: clamp(1.3125rem, 1.15rem + 0.5vw, 1.5rem); line-height: 1.2; }
.ra-contract__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 48px; margin-top: clamp(28px, 4vw, 40px); }
@media (min-width: 900px) { .ra-contract__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.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-contract__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 48px; margin-top: clamp(32px, 5vw, 52px); }
.ra-checklist { list-style: none; counter-reset: ra-check; display: grid; gap: 14px 40px; }
@media (min-width: 900px) { .ra-checklist { grid-template-columns: 1fr 1fr; grid-auto-flow: row; } }
.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 12px; 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__title { margin-top: clamp(36px, 5vw, 56px); }
.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__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; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ra-tab, .ra-input, .ra-group__summary .icon, .ra-fold__summary .icon, .ra-dl__link, .ra-preview__summary .icon, .ra-scroll::after { transition: none; }
}

/* ---------- Print ---------- */
.ra-print { display: none; }
@media print {
  /* Ordinary printing of the page: drop the controls, expand the contract preview. */
  .ra-tabs, .ra-tools, .ra-status__actions, .ra-rooms__actions, .ra-room__remove, .ra-room-gone, .ra-btn--load, .ra-cta, .ra-noscript { display: none !important; }
  .ra-results { position: static !important; max-height: none !important; overflow: visible !important; }
  .ra-preview { border: 0; box-shadow: none; }
  .ra-preview__summary, .ra-preview__skip, .ra-preview__end, .ra-scroll__hint, .ra-scroll::after { display: none !important; }
  .ra-preview__body { padding: 0; }
  .ra-calc, .ra-block, .ra-main, .ra-card, .ra-group { box-shadow: none !important; }

  /* "Print summary": only the generated report. */
  html.ra-printing main > :not(#ra-print) { display: none !important; }
  html.ra-printing .ra-print { display: block !important; }
  html.ra-printing body { background: #fff !important; }
  .ra-print, .ra-print * { color: #000 !important; background: transparent !important; box-shadow: none !important; border-color: #b9b9b9 !important; }
  .ra-print { font-family: var(--font-sans); font-size: 10pt; line-height: 1.4; }
  .ra-print__brand { font-size: 8.5pt; letter-spacing: 0.08em; text-transform: uppercase; }
  .ra-print h2 { margin: 4pt 0 2pt; font-size: 17pt; }
  .ra-print h3 { margin: 14pt 0 5pt; font-size: 12.5pt; break-after: avoid; }
  .ra-print h4 { margin: 8pt 0 3pt; font-family: var(--font-sans); font-size: 10pt; font-weight: 700; break-after: avoid; }
  .ra-print__meta { font-size: 9pt; }
  .ra-print__url { word-break: break-all; }
  .ra-print__note { margin-top: 6pt; padding: 6pt 8pt; border: 1px solid #b9b9b9; }
  .ra-print .ra-headline { padding: 0; }
  .ra-print .ra-headline__value { font-size: 20pt; }
  .ra-print .ra-tag { border: 1px solid #000; }
  .ra-print .ra-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ra-print .ra-kpi, .ra-print .ra-kpi:nth-child(even) { padding: 5pt 6pt; border-right: 0; border-top: 1px solid #b9b9b9; }
  .ra-print .ra-kpi:last-child:nth-child(odd) { grid-column: auto; }
  .ra-print .ra-issues { padding: 5pt 0; border-left: 0; }
  .ra-print table { width: 100%; border-collapse: collapse; font-size: 9pt; break-inside: auto; }
  .ra-print tr { break-inside: avoid; }
  .ra-print .ra-t th, .ra-print .ra-t td, .ra-print__inputs th, .ra-print__inputs td { padding: 2.5pt 5pt; border-bottom: 1px solid #d0d0d0; white-space: normal; }
  .ra-print__inputs th { width: 60%; text-align: left; font-weight: 400; }
  .ra-print__inputs td { text-align: right; }
  .ra-print .ra-notes__item { display: block; padding: 4pt 0; }
  .ra-print tfoot { display: table-row-group; }
  .ra-print .ra-bullets { padding-left: 14pt; font-size: 9pt; }
  .ra-print .ra-flag::before { border: 1px solid #000; }
  /* Sub-lines (fixed-cost items, setup items) stay indented and lighter so they don't read as extra costs. */
  .ra-print .ra-t__sub th[scope="row"] { padding-left: 14pt !important; color: #444 !important; font-style: italic; }
  .ra-print .ra-t__sub td { color: #444 !important; }
  .ra-print .ra-t__alt { display: none !important; }
  .ra-print .ra-col--opt { display: table-cell !important; }
  .ra-print .ra-notes__item, .ra-print__group, .ra-print__sec.is-keep, .ra-print .ra-kpi { break-inside: avoid; }
  .ra-print h3, .ra-print h4 { break-after: avoid; }
  .ra-print__small { font-size: 8.5pt; }
  .ra-print .ra-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4pt 10pt; margin-top: 6pt; }
  .ra-print .ra-stats dd { margin: 0; font-weight: 700; }
  .ra-print .ra-timing__msg { padding: 4pt 0; border: 0; }
  .ra-print .ra-t--grid td { border: 1px solid #d0d0d0 !important; }
  .ra-print .ra-headline.is-provisional [data-out] { opacity: 1; }
}

/* Phones and tablets: a slim bar pinned to the bottom of the inputs card keeps the headline in view while typing.
   scroll-padding-bottom makes the browser stop short of it when it scrolls a focused field into view, so the bar never
   covers the field being typed in (WCAG 2.4.11). */
@media (max-width: 1023.98px) { html { scroll-padding-bottom: 84px; } }
/* A very long figure wraps the "See results" link onto its own line instead of running under it. */
.ra-peek { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 10px var(--ra-pad); border-top: 1px solid var(--navy-rule); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--navy); color: var(--navy-ink); text-decoration: none; box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, 0.45); }
.ra-peek:hover { color: var(--navy-ink); }
.ra-peek__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.ra-peek__label { font-size: 0.8125rem; color: var(--navy-ink-2); }
.ra-peek__value { min-width: 0; font-size: 1.125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.ra-peek__value.is-long { font-size: 1rem; }
.ra-peek__value.is-xlong { font-size: 0.9375rem; }
.ra-peek__issue { font-size: 0.75rem; color: var(--navy-ink-2); }
.ra-peek__go { flex: none; margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--navy-accent); }
.ra-peek:focus-visible { outline-offset: -3px; outline-color: var(--navy-accent); }
.ra-main__foot + .ra-peek, .ra-main__foot[hidden] + .ra-peek { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
/* Small phones: the label sits over the figure, so "See results" stays on the same row and the bar stays short. */
@media (max-width: 360px) {
  .ra-peek { flex-wrap: nowrap; padding-block: 7px; }
  .ra-peek__body { flex-direction: column; align-items: flex-start; gap: 0; }
  .ra-peek__label { font-size: 0.75rem; line-height: 1.3; }
  .ra-peek__value { line-height: 1.25; }
}
@media (min-width: 1024px) { .ra-peek { display: none; } }
@media print { .ra-peek, .ra-mini { display: none !important; } }

/* Wide screens: the results card scrolls with the page when it is too tall to stay in view (app.js .is-static). Then
   .ra-mini, a compact copy of the headline at the foot of the results column, is pinned to the bottom of the window
   while the card's own headline is scrolled away (.is-mini), so the cash flow stays beside the inputs being edited.
   Its space is reserved whenever the card is static (.has-mini), so showing it never moves anything. */
.ra-mini { display: none; }
@media (min-width: 1024px) {
  html { scroll-padding-bottom: 80px; } /* a focused control is never left under the pinned headline */
  .ra-results { display: flex; flex-direction: column; }
  .ra-results.has-mini .ra-mini { display: flex; }
  .ra-mini { position: sticky; bottom: 16px; z-index: 4; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; margin-top: auto; padding: 10px 16px 10px 20px; border-radius: var(--radius-lg); background: var(--navy); color: var(--navy-ink); text-decoration: none; box-shadow: var(--shadow-md), 0 0 0 1px var(--navy-rule); visibility: hidden; opacity: 0; transition: opacity 0.15s var(--ease), visibility 0s linear 0.15s; }
  .ra-results.is-mini .ra-mini { visibility: visible; opacity: 1; transition: opacity 0.15s var(--ease); }
  .ra-mini:hover { color: var(--navy-ink); }
  .ra-mini:hover .ra-peek__go { text-decoration: underline; }
  .ra-mini:focus-visible { outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .ra-mini, .ra-results.is-mini .ra-mini { transition: none; } }

/* Laptop-height windows (kept last so it overrides the card rules above): a tighter results card, so it still fits,
   and stays in view, beside the inputs on an 800px-tall window. */
@media screen and (min-width: 1024px) and (max-height: 940px) {
  .ra-card__top { padding-top: 6px; }
  .ra-headline { padding-bottom: 11px; }
  .ra-headline__label span { display: inline; }
  .ra-headline__value { margin-top: 3px; font-size: 2.125rem; }
  .ra-headline__note { margin-top: 3px; }
  .ra-kpi { padding-top: 7px; padding-bottom: 8px; }
  .ra-kpi dd { margin-top: 2px; }
  .ra-disclaimer { padding-block: 8px; }
  .ra-tools { padding-block: 9px 10px; }
  .ra-tools .ra-btn { min-height: 36px; }
}