/* ==========================================================================
   Interactive Report — borrower mini-app.

   Self-contained by design: every rule is scoped under body.ireport, every
   color is literal hex (no oklch/--c-* tokens — see CLAUDE.md §4.13), all
   positioning uses top/right/bottom/left longhands (never `inset:`), and
   anything newer than the ~2017 CSS floor is decorative-only with a
   fallback declaration before it.

   Type: Source Serif 4 (variable, display) + Public Sans (variable, text),
   both self-hosted. The display face is deliberately a plain transitional
   serif — this page is a financial document a borrower reads before signing,
   so the letterforms should be unremarkable. (It replaced Fraunces, whose
   ball-terminal 'f' and curled 'j' read as decorative; docs/blog still use
   Fraunces via reading.css, which is marketing copy, not a quote.) Display
   text sets at 700 — that is where Source Serif 4 carries the visual density
   Fraunces had at 600, so 600 here leaves the hero figures looking anaemic.

   Option identity hues arrive per-element via --opt / --opt-soft
   / --opt-ink (plain hex custom properties — floor-safe).

   COLOR THEME. The --brand* and --accent* tokens below are the LO's report
   color theme (builder rail → "Theme & title"), the same three colors the
   static report and the PDF use. interactiveReport.html overrides them from
   interactive_report.theme_colors() on every render; the literals here are the
   default preset (theme1) so the file still renders correctly on its own.

     --brand*   color 1, the prominent one — page chrome AND the recommended
                option. Anything on this page that reads as "the report's
                color" is a --brand token.
     --accent*  color 2 — the What-if / illustrative-estimate accents, the
                sliders and the focus ring. Also option 2's identity hue.
     color 3    reaches the page only as option 3's --opt (matching the static
                report, where color 3 is loan column 3).

   Each color carries derived tones so an LO can pick anything and the page
   stays legible (all measured server-side, ≥4.5:1):
     (raw)      decorative fills only — bars, dots, donut wedges, borders.
     -ink       text, and any surface with white text on it.
     -soft      pale tinted backgrounds sitting behind -ink text.
     -veil      the mid stop of the avatar-initial gradient.
     -lift      on the near-black panels (#1c1b19).
     -wash      the page's corner gradients.

   Not themed on purpose: --good-text (savings/"you save" green is a semantic
   convention, not branding — an LO's red theme must not paint savings red) and
   the LendrTech wordmark, which matches the logo asset beside it.
   ========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/sourceserif4-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/publicsans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

body.ireport {
  /* Palette — literal hex only. */
  --paper: #faf9f6;
  --surface: #ffffff;
  --ink: #141412;
  --ink-2: #52514e;
  --muted: #898781;
  --hairline: #e5e2da;
  --good-text: #006300;
  --shadow-card: 0 1px 2px rgba(20, 20, 18, 0.05), 0 14px 44px rgba(20, 20, 18, 0.07);
  --shadow-soft: 0 1px 2px rgba(20, 20, 18, 0.04), 0 8px 26px rgba(20, 20, 18, 0.05);
  --radius: 20px;

  /* Report color theme — defaults are preset "theme1"; interactiveReport.html
     overrides all ten from the report's own theme. See the file header. */
  --brand: #64bc3c;
  --brand-ink: #427c28;
  --brand-soft: #ecf7e8;
  --brand-veil: #e9f6e4;
  --brand-lift: #64bc3c;
  --brand-wash: rgba(100, 188, 60, 0.07);
  --accent: #36a2eb;
  --accent-ink: #2671a4;
  --accent-lift: #36a2eb;
  --accent-soft: #e7f4fd;
  --accent-wash: rgba(54, 162, 235, 0.07);

  margin: 0;
  background: #faf9f6;
  background:
    radial-gradient(circle at 12% -4%, var(--brand-wash), transparent 32%),
    radial-gradient(circle at 92% 2%, var(--accent-wash), transparent 30%),
    #faf9f6;
  color: #141412;
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ireport *, .ireport *::before, .ireport *::after { box-sizing: border-box; }

/* Fine paper grain — pure decoration, invisible if data-URI SVG unsupported. */
body.ireport::before {
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 1;
}
.ir-shell, .ir-tabbar { position: relative; z-index: 2; }

/* ---------- Shell ---------- */
.ir-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }

.ir-side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 18px;
  border-right: 1px solid #e5e2da;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px); /* decorative — solid-ish rgba stands alone */
}

.ir-brand { display: grid; grid-template-columns: 30px 1fr; align-items: center; grid-column-gap: 10px; grid-gap: 10px; padding: 2px 6px 16px; }
.ir-brand-mark { width: 30px; height: 30px; }
.ir-brand-word { font-weight: 800; letter-spacing: -0.03em; font-size: 18px; }
/* NOT themed: this is the LendrTech wordmark and it has to match logo.svg
   sitting beside it — the report's color theme is the LO's, not ours. */
.ir-brand-word em { font-style: normal; color: #3f9126; }

.ir-borrower-card {
  border: 1px solid #e5e2da;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #fbfaf7);
  box-shadow: 0 1px 2px rgba(20, 20, 18, 0.04), 0 8px 26px rgba(20, 20, 18, 0.05);
  padding: 14px;
  margin-bottom: 18px;
}
.ir-borrower-card small { display: block; color: #898781; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.ir-borrower-card strong { display: block; font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.ir-pill {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 11.5px;
  font-weight: 700;
}
.ir-pill-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-right: 5px; vertical-align: 1px; }

.ir-nav { display: grid; grid-gap: 6px; grid-row-gap: 6px; }
.ir-nav button {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  grid-column-gap: 10px;
  grid-gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 11px 12px;
  border-radius: 12px;
  font: inherit;
  font-weight: 650;
  font-size: 14.5px;
  color: #52514e;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.ir-nav button i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #ddd9d0;
  border-radius: 8px;
  color: #898781;
  transition: all 0.16s ease;
}
.ir-nav button:hover { background: #f3f1ec; }
.ir-nav button.active { background: var(--brand-soft); color: var(--brand-ink); }
/* -ink, not the raw hue: this chip carries white text. */
.ir-nav button.active i { background: var(--brand-ink); border-color: var(--brand-ink); color: #ffffff; }

.ir-lo-card { margin-top: auto; border: 1px solid #e5e2da; border-radius: 16px; background: #ffffff; padding: 14px; }
.ir-lo-row { display: grid; grid-template-columns: 52px 1fr; grid-column-gap: 11px; grid-gap: 11px; align-items: center; margin-bottom: 10px; }
/* object-position, not just object-fit: this box is SQUARE and the static
   report's is not — its <img> carries no `width`, so a portrait headshot keeps
   its intrinsic ratio there and is never cropped, while `cover` here crops the
   overflowing axis around the image's geometric CENTRE and takes the top of the
   head off. Faces sit in the upper third of a headshot, so biasing the window
   up keeps the head whole; on a square source, where `cover` crops nothing at
   all, the declaration is a no-op. 52px rather than 44px for the same reason —
   this photo is the page's one piece of human trust and it was thumbnail-sized.
   object-position is 2015-era and degrades to today's centred crop (§4.13). */
.ir-lo-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #e5e2da; }
.ir-lo-avatar-blank { display: grid; place-items: center; background: var(--brand-soft); background: linear-gradient(135deg, var(--brand-soft), var(--brand-veil)); color: var(--brand-ink); font-weight: 800; font-size: 21px; }
.ir-lo-card strong { display: block; font-size: 14px; letter-spacing: -0.01em; }
.ir-lo-card small { display: block; color: #52514e; font-size: 12.5px; line-height: 1.7; }
.ir-lo-card small.ir-muted { color: #898781; }
.ir-lo-card a { color: inherit; text-decoration: none; }
.ir-lo-card a:hover { color: #141412; text-decoration: underline; }

/* ---------- Main column ---------- */
.ir-main { padding: 30px 38px 64px; max-width: 1160px; width: 100%; margin-left: auto; margin-right: auto; min-width: 0; }

.ir-top { margin-bottom: 20px; }
.ir-eyebrow { color: #898781; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.ir-headline {
  margin: 8px 0 8px;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 38px;
  font-size: clamp(32px, 4.2vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.ir-lede { margin: 0; max-width: 640px; color: #52514e; font-size: 15.5px; }

/* ---------- Tabs / reveal motion ---------- */
.ir-tab { display: none; }
.ir-tab.active { display: block; }

@keyframes ir-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ir-tab.active .ir-reveal { animation: ir-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }

@keyframes ir-grow { from { width: 0; } to { width: var(--w, 0%); } }
@media (prefers-reduced-motion: reduce) {
  .ireport *, .ireport *::before, .ireport *::after { animation: none !important; transition: none !important; }
}

/* ---------- Cards & sections ---------- */
.ir-section { margin-top: 26px; }
.ir-section-title { margin-bottom: 14px; }
.ir-section-title h2, .ir-steps h2, .ir-final h2, .ir-footer-cta h2 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.015em;
}
/* #6b6963, not the #898781 the rest of the page's quiet text uses: at 13.5px
   on the paper that token measures 3.41:1, and this line is running copy the
   borrower is meant to read (it introduces the comparison). 5.18:1 here. */
.ir-sub { margin: 4px 0 0; color: #6b6963; font-size: 13.5px; }
/* A tab name inside running copy — enough weight to read as a signpost, not
   enough to out-shout the heading above it. */
.ir-sub b { color: #52514e; font-weight: 750; }

/* ---------- Summary hero ---------- */
.ir-hero { border: 1px solid #e5e2da; border-radius: 26px; background: #ffffff; box-shadow: var(--shadow-card); overflow: hidden; }
.ir-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; }
.ir-hero-rec {
  padding: 30px;
  border-right: 1px solid #eeebe4;
  background: #ffffff;
  background: radial-gradient(circle at 96% 0%, var(--opt-soft, var(--brand-soft)), transparent 42%), #ffffff;
}
.ir-tag {
  display: inline-block;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--opt-soft, var(--brand-soft));
  color: var(--opt-ink, var(--brand-ink));
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ir-tag-neutral { background: #f0efeb; color: #52514e; }
.ir-tag-blue { background: var(--accent-soft); color: var(--accent-ink); }
.ir-rec-title { display: flex; align-items: baseline; flex-wrap: wrap; margin: 16px 0 8px; }
/* One scale, two facts. The hero headline is a rate on a purchase or a single
   report and a dollar saving on a refinance — the type size is the design, the
   name .ir-rec-rate was the fact. Grouped rather than duplicated so the two can
   never drift, and so that no class called "-rate" ever carries money. */
.ir-rec-rate, .ir-rec-figure {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 56px;
  font-size: clamp(44px, 6vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-right: 14px;
}
/* Tabular on the money twin only: a six-figure saving set in the display face's
   proportional digits reads as accidentally kerned around the separators. A
   rate is four glyphs and has nothing to line up with. */
.ir-rec-figure { font-variant-numeric: tabular-nums; }
.ir-rec-kind { font-size: 18px; font-weight: 700; color: var(--opt-ink, var(--brand-ink)); }
/* The APR under the headline rate. Text font, not the display serif: it is the same
   fact stated a second way, so it reads as a caption on the number above
   rather than competing with it — but at 15px/700 it is a figure the borrower
   can read from where they sit, which is the whole point of it being here. */
.ir-rec-apr { margin: 6px 0 0; color: #52514e; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ir-rec-apr b { color: #141412; font-weight: 800; }
.ir-rec-copy { color: #52514e; max-width: 560px; margin: 10px 0 22px; }
/* The Savings-Summary caption, copied off the LO's own page verbatim and set
   under the hero figure — never a sentence written here. The two refinance
   engines measure different things and only the copied string is true under
   both (CLAUDE.md §4.21). Quieter than .ir-rec-apr because it explains the
   figure rather than stating a second one. */
.ir-rec-basis { margin: 8px 0 18px; color: #52514e; font-size: 13.5px; line-height: 1.5; }
.ir-rec-basis b { color: #141412; font-weight: 750; font-variant-numeric: tabular-nums; }

/* auto-fit + minmax lets the stat cards wrap to a new row when their
   container is narrow (e.g. the embedded builder preview iframe) instead of
   squeezing into fixed tracks that clip the nowrap dollar figures. The ~590px
   hero-rec can't actually hold five cards wide enough for a 6-figure value, so
   the cards settle into a balanced 3+2 (144px floor comfortably fits a 7-figure
   $1,250,000) and re-flow to fewer columns as the container narrows. */
.ir-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); grid-gap: 10px; }
.ir-metric-grid-3 { grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); margin-top: 18px; }
.ir-metric { background: #ffffff; border: 1px solid #e5e2da; border-radius: 14px; padding: 12px 13px; min-width: 0; }
.ir-metric small { display: block; color: #898781; font-size: 11.5px; font-weight: 650; }
.ir-metric strong { display: block; margin-top: 5px; font-size: 18px; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap; }
/* The qualifier under a headline figure: the option's APR, or where its
   bought-down payment ends up. A classed span, not <em> — these are
   subordinate captions, not stress emphasis, and <small> is already taken by
   the tile's label. Wraps (the <strong> above does not): "steps up to $3,972
   by year 3" does not fit one line in a 144px tile, and a nowrap here would
   push the figure out of the card rather than take a second line. */
.ir-metric-note { display: block; margin-top: 3px; color: #52514e; font-size: 12px; font-weight: 650; line-height: 1.35; font-variant-numeric: tabular-nums; }

.ir-hero-notes { padding: 26px; display: grid; align-content: center; grid-gap: 12px; }
.ir-note-card { border: 1px solid #e5e2da; border-radius: 16px; background: #ffffff; box-shadow: var(--shadow-soft); padding: 16px 18px; }
.ir-note-card h3 { margin: 0 0 6px; font-size: 15.5px; letter-spacing: -0.01em; }
.ir-note-card p { margin: 0; color: #52514e; font-size: 14px; line-height: 1.55; }
.ir-note-quiet { background: #fbfaf7; box-shadow: none; }
/* The single-loan report's "Cash due at closing" card. That model carries no
   best-fit narrative, so this cell would otherwise hold one quiet card centred
   in a 26px box and read as abandoned; it gets the PDF's own single-report hero
   instead. The surface is stated rather than inherited because .ir-note-quiet
   is proof that .ir-note-card's white is not a given — these two are a pair and
   this is the loud half. */
.ir-note-figure { background: #ffffff; }
.ir-note-big {
  margin: 4px 0 8px;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #141412;
}

/* auto-fit, not repeat(3, 1fr): a superlative several options tie on is
   dropped rather than crowned (interactive_report._add_superlative), so a
   1- or 2-fact strip is ordinary now — and a hard 3-track grid left the
   remaining two-thirds as dead space under a full-width top rule. auto-fit
   collapses the empty tracks, so one fact fills the row. */
.ir-quick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid #eeebe4; }
.ir-quick { padding: 15px 24px; border-right: 1px solid #eeebe4; background: #ffffff; min-width: 0; }
.ir-quick:last-child { border-right: 0; }
.ir-quick small { display: block; color: #898781; font-size: 12px; font-weight: 650; }
.ir-quick strong { display: block; margin-top: 4px; font-size: 14.5px; letter-spacing: -0.01em; }

/* ---------- Refinance — "Today, and after you refinance" ----------
   One card per option, each restating the current mortgage in a three-column
   table (fact / Today / After). The repetition is the design: on a phone the
   cards stack and scroll independently, so a single shared "Today" column would
   scroll out of sight exactly when it is needed. */
.ir-versus { display: grid; grid-gap: 14px; }
.ir-versus-1 { grid-template-columns: minmax(0, 1fr); }
.ir-versus-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ir-versus-card {
  border: 1px solid #e5e2da;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  min-width: 0;
}
/* -ink, not the raw hue: the header is white-on-color (same rule as
   .ir-option-head). */
.ir-versus-head { padding: 14px 18px; background: var(--opt-ink, #52514e); color: #ffffff; }
.ir-versus-head small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.ir-versus-head h3 { margin: 3px 0 0; font-size: 19px; font-weight: 750; letter-spacing: -0.01em; }

/* Prefixed with .ireport on purpose, here and on the cells below: `.ireport
   table` is a class AND a type, so it outranks a bare `.ir-versus-table` and a
   bare rule could not lift the 480px scroll floor the fee tables need. This
   table has no .ir-table-scroll wrapper, so that floor inside a ~324px phone
   card overflows the page instead of scrolling. */
.ireport .ir-versus-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 0; }
.ir-versus-table th[scope="col"] {
  text-align: right;
  padding: 10px 16px 8px;
  color: #898781;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  border-top: 0; /* .ireport th draws one; the card's own header is the rule here */
}
.ir-versus-table th[scope="col"]:first-child { text-align: left; }
/* The "After" column is the one the borrower is being asked about — a pale wash
   in the option's own tint makes it the read, without a border that would fight
   the card's radius. */
.ir-versus-table th[scope="col"]:last-child,
.ir-versus-table td:last-child { background: var(--opt-soft, #fbfaf7); }
/* A row header is a <th> too, so .ireport th's 10.5px uppercase column-header
   treatment lands on it: the three type properties have to be put back or
   "Interest rate" prints as a micro-caption instead of the label it is. */
.ir-versus-table th[scope="row"] {
  text-align: left;
  padding: 11px 16px;
  color: #52514e;
  font-size: inherit;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  border-top: 1px solid #f0eee8;
  white-space: normal;
}
.ireport .ir-versus-table td {
  padding: 11px 16px;
  text-align: right;
  border-top: 1px solid #f0eee8;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: baseline;
}
/* Today is context, not the answer — it is stated, not sold. */
.ir-versus-table td:nth-child(2) { color: #52514e; font-weight: 650; }
.ir-vs-note { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: #52514e; white-space: nowrap; }
/* A class rule with display: outranks the UA's [hidden] (CLAUDE.md §4.13,
   bite #3), so every display: in this file's new rules carries its twin. */
.ir-versus[hidden], .ir-versus-head small[hidden], .ir-vs-note[hidden] { display: none; }

/* ---------- Option cards ---------- */
.ir-options { display: grid; grid-gap: 14px; }
.ir-options-3 { grid-template-columns: repeat(3, 1fr); }
.ir-options-2 { grid-template-columns: repeat(2, minmax(0, 420px)); }
.ir-options-1 { grid-template-columns: minmax(0, 460px); }
.ir-option {
  /* Flex column so the buydown band can be parked on the bottom edge
     (.ir-option-steps) — the grid already gives every card the same height. */
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e2da;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  min-width: 0;
}
.ir-option:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.ir-option-rec { border: 2px solid var(--opt, var(--brand)); }
/* -ink, not the raw hue: the header is white-on-color. */
.ir-option-head { padding: 14px 18px; background: var(--opt-ink, #52514e); color: #ffffff; }
.ir-option-head small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.ir-option-head h3 { margin: 3px 0 0; font-size: 19px; font-weight: 750; letter-spacing: -0.01em; }
.ir-option-body { padding: 18px; }
.ir-payment {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1;
}
.ir-payment small { display: block; font-family: "Public Sans", -apple-system, sans-serif; font-size: 11.5px; color: #898781; font-weight: 650; letter-spacing: 0.01em; margin-top: 7px; }
/* Refinance only: the Refinance Analysis panel's one-sentence takeaway, set as
   a pull-quote off the payment above it rather than as another row — it is the
   sentence the seven-row table failed to deliver, and a row would file it with
   the figures it is there to explain. Never rendered on an empty string
   (refiAnalysisSummarySentence() returns '' when it has nothing to say). */
.ir-option-take {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--opt, #d5d1c8);
  color: #52514e;
  font-size: 13.5px;
  line-height: 1.55;
}
.ir-option-rows { margin: 14px 0 0; }
.ir-r { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-top: 1px solid #eeebe4; font-size: 14px; }
.ir-r dt { color: #52514e; margin: 0; flex: 0 0 auto; }
.ir-r dd { margin: 0; font-weight: 700; color: #141412; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; }
/* The APR under its rate. Same relationship as .ir-metric-note: a second
   statement of one fact, subordinate but legible. `display:block` inside a
   baseline-aligned flex item keeps the label opposite the FIRST line. */
.ir-r-note { display: block; margin-top: 2px; font-size: 12px; font-weight: 650; color: #52514e; white-space: nowrap; }
/* "Starting point" in the savings row is a note about the column, not a figure
   — bold would put it in the same visual class as the dollar amounts beside it. */
.ir-r dd .ir-muted { font-weight: 500; }

/* Temporary-buydown ladder inside the option card. Last child of .ir-option
   (NOT inside .ir-option-body) for two reasons: the card clips to its radius,
   so this paints a full-bleed foot band in the option's own tint; and it sits
   below the comparison rows, which therefore stay on one horizontal line
   across every card whether or not a given option is bought down. */
/* margin-top:auto (with .ir-option a flex column) parks the band on the card's
   bottom edge, so a 2-step ladder and a 3-step ladder end level with each
   other and with the plain card beside them — the grid already equalises card
   HEIGHT, and without this the shorter band floated with white beneath it. */
.ir-option-steps { margin-top: auto; border-top: 1px solid #eeebe4; background: var(--opt-soft, #fbfaf7); padding: 13px 18px 14px; }
/* A real heading: it labels the list beneath it, and as a styled <b> the
   whole of note 4's new content was unreachable by screen-reader heading
   navigation. <h4> sits correctly under the card's own <h3> title. */
.ir-option-steps > h4 { margin: 0 0 8px; color: var(--opt-ink, #52514e); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.ir-option-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-row-gap: 6px; grid-gap: 6px; }
.ir-option-steps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; grid-column-gap: 10px; grid-gap: 10px; font-size: 12.5px; color: #52514e; }
/* :not() so the caption below is untouched — it is also a direct-child span,
   so a child combinator cannot separate them, and inheriting this rule's
   nowrap made the caption overflow its cell instead of taking a second line. */
.ir-option-steps li span:not(.ir-step-note) { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-option-steps li b { text-align: right; color: #141412; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Full width under the last row: "Year 3 onward · 6.625%" is the one period
   label that would not fit inline, and on its own line it can never crowd the
   payment beside it. #52514e, not a lighter grey — this sits on --opt-soft,
   which is the LO's OWN color veiled with white, and the palette only
   guarantees 4.5:1 for the tones interactive_report._tone derives. A near-
   black LO color takes #6b6963 here to 4.16:1; #52514e stays at 5.9:1 against
   the darkest tint the mixer can produce. */
.ir-option-steps .ir-step-note { grid-column: 1 / -1; margin-top: 1px; font-weight: 400; font-size: 11.5px; color: #52514e; font-variant-numeric: tabular-nums; }
/* rgba over the option's tint rather than a hairline hex: the tint is the LO's
   color and a fixed grey reads as dirt on a saturated one. */
.ir-option-steps li.is-note-rate { padding-top: 7px; border-top: 1px solid rgba(20, 20, 18, 0.1); }
.ir-option-steps li.is-note-rate b { font-weight: 800; }

/* ---------- Refinance — the debt ledger ----------
   Five .ir-r rows in a wide panel on the Summary tab: what the borrower pays
   now across every debt, then the one new payment. Reusing the option-card row
   vocabulary is the point — the borrower has already learned to read it two
   sections up — so only the two subtotal rows need saying. */
.ir-debt-rows { margin: 12px 0 0; }
.ir-debt-total dt { color: #141412; font-weight: 700; }
.ir-debt-total dd { font-weight: 800; }

/* Never themed — green for "you save" is a convention the borrower already
   reads, not branding. See the file header. */
.ir-good { color: var(--good-text); }
.ir-muted { color: #898781; }
/* .ir-r dd is a class AND a type, so it outranks a lone .ir-good and a <dd> that
   IS the saving prints in the row's ordinary ink. The option rows never hit
   this — they wrap the figure in a <span> inside the dd — but the debt ledger's
   last row is the figure, so the pairing has to be spelled out. */
.ir-r dd.ir-good { color: var(--good-text); }

/* ---------- Single — the .ir-solo band ----------
   One loan has no grid to sit in, and a lone .ir-option floating at 460px in a
   1084px column is what "unfinished" looks like. The band pairs the terms with
   the payment anatomy so the card is half of something. */
.ir-solo { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-gap: 14px; align-items: start; }
/* One track when the LO switched the breakdown off (or the snapshot has no
   parts to draw): a two-track grid holding one child would leave the card at
   1.15fr and hand back exactly the dead space this band exists to remove. Same
   idiom as .ir-options-1 / .ir-versus-1. */
.ir-solo-1 { grid-template-columns: minmax(0, 1fr); }
.ir-solo-main, .ir-solo-side { min-width: 0; }
/* The rule that makes one loan look designed: eight rows in one narrow column
   is a list; in two columns it is a spec sheet, and the .ir-r border-tops then
   run as two parallel rules, which reads as a ledger. */
.ir-solo .ir-option-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 24px; grid-gap: 0 24px; }
/* The band between the sidebar appearing (1000px) and the main column growing
   enough to carry a two-cell band. Measured at 1001px: the loan card is ~370px,
   four of its eight rows clip their own text, and BOTH cells overflow their own
   box by ~12px because the donut and its legend have a real minimum width. So
   the band stacks — the same shape it takes below 1000px, where the shell is
   already single-column and everything fits.

   A BAND and not a floor: at 1200px and up there is room for two cells, and at
   999px and down the sidebar is gone and the card is full width. Only the
   sliver between them is short of both. Sampling 1000 and 1200 and calling it
   covered is exactly how this was missed. */
@media (min-width: 1001px) and (max-width: 1199px) {
  .ir-solo { grid-template-columns: minmax(0, 1fr); }
}
/* The breakdown was drawn for a half-width chart panel (~490px of content). In
   the 0.85fr cell it has ~410px, while a 190px donut beside the legend's fixed
   148px + 96px columns needs ~454 — the legend's own track is what would be
   squeezed to nothing. Stack them, which is the move the 680px block already
   makes for the same reason. */
.ir-solo-side .ir-breakdown { grid-template-columns: minmax(0, 1fr); }
.ir-solo[hidden], .ir-solo .ir-option-rows[hidden] { display: none; }

/* ---------- Charts tab ---------- */
.ir-chart-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; }
.ir-panel { background: #ffffff; border: 1px solid #e5e2da; border-radius: 20px; box-shadow: var(--shadow-soft); padding: 20px 22px; min-width: 0; }
.ir-panel h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.01em; }
.ir-panel-wide { grid-column: 1 / -1; }
.ir-chart-sub { margin: 0 0 18px; color: #898781; font-size: 13px; line-height: 1.5; }

.ir-bars { display: grid; grid-row-gap: 14px; grid-gap: 14px; }
.ir-bar-line { display: grid; grid-template-columns: 118px 1fr 128px; align-items: center; grid-column-gap: 12px; grid-gap: 12px; font-size: 13px; }
.ir-bar-label { color: #52514e; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The one label on this page that is not a loan title, and the only one long
   enough to hit the 118px track: "Your mortgage today" ellipsized to "Your
   mortgag…" at every width. It wraps instead — a two-line label is legible and
   a truncated one is a guess, and this is the bar every other bar on the refi
   payment panel is read against. */
.ir-bar-label--today { white-space: normal; line-height: 1.25; }
.ir-key { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--opt, #898781); margin-right: 7px; vertical-align: 0; }
.ir-bar-track { border-left: 1px solid #d5d1c8; padding-top: 1px; padding-bottom: 1px; }
.ir-bar-fill {
  height: 22px;
  width: var(--w, 0%);
  background: var(--opt, #52514e);
  border-radius: 0 4px 4px 0; /* rounded data-end, square baseline */
  animation: ir-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.ir-bar-value { text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ir-bar-value em { display: block; font-style: normal; font-weight: 650; font-size: 12px; }

/* Temporary-buydown ladder — a decorative segmented fill plus the text list
   that actually carries the numbers. Tints are the option hue veiled by a
   white overlay (no color-mix, no oklch — §4.13 floor), so the family stays
   one hue and steps darker toward the note rate. If a browser drops --seg the
   segments collapse to 0% and the parent .ir-bar-fill still paints its own
   var(--opt) background at the right width — it degrades to today's solid
   bar, never to a blank row. */
.ir-bar-fill { display: flex; overflow: hidden; }
.ir-bar-seg {
  flex: 0 0 auto;
  width: var(--seg, 0%);
  height: 100%;
  background-color: var(--opt, #52514e);
  background-image: linear-gradient(rgba(255, 255, 255, var(--tint, 0)), rgba(255, 255, 255, var(--tint, 0)));
  box-shadow: inset -1px 0 0 #ffffff;
}
.ir-bar-seg:last-child { box-shadow: none; }

.ir-steps-mini {
  grid-column: 1 / -1;
  list-style: none;
  margin: 8px 0 2px;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--opt, #d5d1c8);
  display: grid;
  grid-row-gap: 6px;
  grid-gap: 6px;
}
.ir-steps-mini li {
  display: grid;
  grid-template-columns: 118px 1fr auto;
  align-items: baseline;
  grid-column-gap: 12px;
  grid-gap: 12px;
  font-size: 12.5px;
}
.ir-step-when { color: #52514e; font-weight: 700; }
.ir-step-rate { color: #141412; font-variant-numeric: tabular-nums; }
.ir-step-rate em { font-style: normal; color: #898781; }
.ir-step-pay { text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ir-steps-mini li.is-note-rate { border-top: 1px solid #eeebe4; padding-top: 6px; }
/* The APR closing the ladder. No payment cell — it is a rate, not a tier —
   so it stops at the middle column rather than leaving an empty money slot. */
.ir-steps-mini li.is-apr { grid-template-columns: 118px 1fr; margin-top: 2px; }

.ir-chart-foot { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #eeebe4; color: #898781; font-size: 12.5px; line-height: 1.5; }

/* Payment breakdown — decorative donut + always-visible itemized list. */
.ir-breakdown { display: grid; grid-template-columns: 190px 1fr; grid-gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid #eeebe4; }
.ir-breakdown:first-of-type { border-top: 0; }
.ir-donut-wrap { text-align: center; }
.ir-donut {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  background: #ece9e2; /* stands when the inline conic-gradient is dropped */
}
.ir-donut-hole {
  position: absolute;
  top: 26px; right: 26px; bottom: 26px; left: 26px;
  background: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  box-shadow: inset 0 0 0 1px #eeebe4;
}
.ir-donut-hole b { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1; }
.ir-donut-hole small { color: #898781; font-size: 10.5px; font-weight: 650; margin-top: 3px; }
.ir-donut-caption { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: #52514e; }

.ir-mini-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-row-gap: 9px; grid-gap: 9px; }
.ir-mini-row { display: grid; grid-template-columns: 148px 1fr 96px; align-items: center; grid-column-gap: 10px; grid-gap: 10px; font-size: 12.5px; }
.ir-mini-label { color: #52514e; }
.ir-mini-track { display: block; height: 8px; border-radius: 999px; background: #f0eee8; overflow: hidden; }
.ir-mini-fill { display: block; height: 100%; border-radius: 999px; width: var(--w, 0%); background: var(--part, #898781); animation: ir-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ir-mini-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Refinance — the break-even runway ----------
   One row per option: how far into the window the lower payment has covered
   what the refinance cost. The bar is the only chart on this page whose scale
   is a promise — every row spans the same window — so the window is named in
   .ir-runway-scale rather than left to be inferred from the bars. */
.ir-runway-top { display: flex; align-items: baseline; justify-content: space-between; grid-gap: 12px; gap: 12px; }
.ir-runway-scale { color: #898781; font-size: 11.5px; font-weight: 650; white-space: nowrap; }

.ir-runway-rows { display: grid; grid-row-gap: 18px; grid-gap: 18px; margin-top: 4px; }
.ir-runway-row { min-width: 0; }
.ir-runway-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; grid-column-gap: 12px; grid-gap: 12px; }
/* The name yields, the answer never does: a long option title ellipsises so
   that "It doesn't pay for itself" always arrives whole. */
.ir-runway-name { color: #52514e; font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* nowrap, and a cap generous enough to honour it. This is the panel's ANSWER
   ("1 year and 10 months") and the widest of the seven break-even states; at
   max-width:60% it squeezed to ~86px and wrapped onto two lines at every
   width, turning the headline into a ribbon. The name beside it is the
   truncatable half — it already carries text-overflow: ellipsis — so the
   figure takes what it needs and the name yields — which is what the head's
   own `minmax(0, 1fr) auto` already arranges, so no max-width belongs here:
   any cap re-creates the squeeze, and with nowrap it clips instead of wraps. */
.ir-runway-figure { text-align: right; white-space: nowrap; font-weight: 750; font-size: 15px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.ir-runway-track { margin-top: 8px; height: 12px; border-radius: 999px; background: #f0eee8; overflow: hidden; }
.ir-runway-fill { display: block; height: 100%; width: var(--w, 0%); border-radius: 999px; background: var(--opt, #52514e); animation: ir-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* A refusal is never painted in the option's identity colour — a full bar in the
   loan's own hue reads as achievement, which is the opposite of what "it doesn't
   pay for itself" means. */
.ir-runway-row--unreached .ir-runway-fill { background: #d9d6cf; }
.ir-runway-row--unreached .ir-runway-figure { color: #6b6963; }
/* "Right away" has a zero-width fill; tint the whole track so the best possible
   answer doesn't render as the emptiest-looking row on the panel. */
.ir-runway-row--met .ir-runway-track { background: var(--opt-soft, #f0eee8); }

.ir-runway-note { margin: 7px 0 0; color: #6b6963; font-size: 12.5px; line-height: 1.5; }
.ir-runway-top[hidden], .ir-runway-rows[hidden], .ir-runway-head[hidden], .ir-runway-fill[hidden] { display: none; }

/* ---------- Fees tab ---------- */
.ir-fees-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-gap: 16px; align-items: start; }
.ir-fee-box { background: #ffffff; border: 1px solid #e5e2da; border-radius: 20px; box-shadow: var(--shadow-soft); overflow: hidden; }
.ir-fee-box details { border-bottom: 1px solid #eeebe4; }
.ir-fee-box details:last-child { border-bottom: 0; }
.ir-fee-box summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.ir-fee-box summary::-webkit-details-marker { display: none; }
.ir-fee-box summary::after { content: "+"; color: #898781; font-weight: 650; margin-left: 12px; }
.ir-fee-box details[open] summary::after { content: "−"; }
.ir-fee-box summary:hover { background: #fbfaf7; }
.ir-sum-total { color: var(--brand-ink); font-size: 13px; font-weight: 700; margin-left: auto; padding-right: 4px; }

.ir-table-scroll { overflow-x: auto; }
.ireport table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px; }
.ireport th {
  text-align: right;
  padding: 10px 20px;
  color: #898781;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-top: 1px solid #eeebe4;
  white-space: nowrap;
}
.ireport th:first-child { text-align: left; }
.ireport td { padding: 10px 20px; border-top: 1px solid #f0eee8; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ireport td:first-child { text-align: left; color: #52514e; white-space: normal; }
.ireport tr.ir-total td { background: #fbfaf7; font-weight: 800; color: #141412; border-top: 1px solid #e5e2da; }
/* A qualifier under a cell's value — the refinance long view's "more interest
   overall, after what the refinance costs" under its figure. Same relationship
   as .ir-r-note under an option row: subordinate, legible, and wrapping, which
   has to be said because .ireport td above sets nowrap and these are sentences,
   not figures. */
.ir-cell-note { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: #52514e; white-space: normal; font-variant-numeric: tabular-nums; }
.ir-cell-note[hidden] { display: none; }
/* The 480px floor exists to make a three-option table scroll rather than
   squeeze. A single fee sheet has ONE value column, so on a phone that floor
   only buys a scrollbar for a table that already fitted. Keyed off the body
   because the fee tables are shared markup and the report type is the only
   thing that tells them apart — <body class="ireport ir-type-{{ report_type }}">. */
body.ireport.ir-type-single table { min-width: 0; }
/* The label column takes the slack; every value column on the tab is the same
   width, so the figures line up down the page instead of shifting per table. */
body.ireport.ir-type-single th + th,
body.ireport.ir-type-single td + td { width: 140px; }

.ir-summary-panel {
  position: sticky;
  top: 22px;
  background: #1c1b19;
  color: #ffffff;
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
}
.ir-summary-panel h3 { margin: 0 0 12px; font-family: "Source Serif 4", Georgia, serif; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.ir-sum-line { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.13); color: #cfcdc6; font-size: 13.5px; }
.ir-sum-line b { color: #ffffff; font-variant-numeric: tabular-nums; }
/* -lift, not the raw hue: this sits on the near-black panel. */
.ir-sum-final b { color: var(--brand-lift); font-size: 17px; }

/* ---------- What-if tab ---------- */
.ir-calc { display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-gap: 16px; align-items: start; }
.ir-control, .ir-calc-result { background: #ffffff; border: 1px solid #e5e2da; border-radius: 20px; box-shadow: var(--shadow-soft); padding: 22px; }
.ir-control h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.01em; }
.ireport label { display: block; color: #52514e; font-size: 13px; font-weight: 750; margin: 18px 0 8px; }
/* -ink, not the raw hue: accent-color paints the whole slider (track fill +
   thumb) and there is no ::-webkit-slider-thumb rule behind it, so this IS the
   control's affordance on a white card — a pale theme color would leave the
   borrower with an invisible handle. Raw hues stay for decoration only. */
.ireport input[type="range"] { width: 100%; accent-color: var(--accent-ink); }
.ir-range-meta { display: flex; justify-content: space-between; align-items: baseline; color: #898781; font-size: 12px; margin-top: 2px; }
.ir-range-meta output { color: #141412; font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ir-result-number {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 56px;
  font-size: clamp(44px, 6vw, 64px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 2px 0;
  font-variant-numeric: tabular-nums;
}
.ir-compare-pill { display: inline-block; margin-top: 10px; padding: 7px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 750; font-size: 13px; }
.ir-calc-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #eeebe4; color: #52514e; font-size: 13.5px; line-height: 1.6; }

.ir-control-head { display: flex; align-items: baseline; justify-content: space-between; grid-gap: 12px; gap: 12px; }
.ir-reset { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 750; color: var(--accent-ink); text-decoration: underline; cursor: pointer; }
.ir-reset:disabled { color: #898781; text-decoration: none; cursor: default; }
/* Same reason as .ir-sub: these notes explain a limit (and now, why the
   slider has no APR) and have to be readable. #898781 is 3.59:1 at 12px. */
.ir-range-note { margin: 8px 0 0; color: #6b6963; font-size: 12px; line-height: 1.5; }
.ir-derived { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid #eeebe4; color: #52514e; font-size: 13.5px; }
.ir-derived b { color: #141412; font-weight: 750; font-variant-numeric: tabular-nums; }
.ir-result-caption { margin-top: 14px; }
.ir-calc-items { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid #eeebe4; display: grid; grid-row-gap: 9px; grid-gap: 9px; }
.ir-calc-item { display: flex; justify-content: space-between; align-items: baseline; grid-gap: 12px; gap: 12px; font-size: 13.5px; color: #52514e; }
.ir-calc-item b { color: #141412; font-weight: 750; font-variant-numeric: tabular-nums; }
/* clip: before clip-path — the floor browser keeps the former (§4.13). */
.ir-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Next steps tab ---------- */
.ir-next-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; grid-gap: 16px; }
.ir-final {
  border: 1px solid #e5e2da;
  border-radius: 22px;
  padding: 26px;
  background: #ffffff;
  background: radial-gradient(circle at 94% 4%, var(--opt-soft, var(--brand-soft)), transparent 38%), #ffffff;
  box-shadow: var(--shadow-soft);
}
.ir-final h2 { font-size: 30px; margin: 12px 0 10px; }
.ir-final p { color: #52514e; line-height: 1.6; margin: 0; }
.ir-steps { background: #ffffff; border: 1px solid #e5e2da; border-radius: 22px; padding: 24px 26px; box-shadow: var(--shadow-soft); }
.ir-step-list { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: ir-step; }
.ir-step-list li { display: grid; grid-template-columns: 34px 1fr; grid-column-gap: 12px; grid-gap: 12px; padding: 14px 0; border-top: 1px solid #eeebe4; counter-increment: ir-step; }
.ir-step-list li:first-child { border-top: 0; }
.ir-step-list li::before {
  content: counter(ir-step);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 800;
  display: grid;
  place-items: center;
}
/* The number pseudo-element occupies column 1; pin the title AND the
   description to column 2 or the span auto-places into the 34px column. */
.ir-step-list b { display: block; grid-column: 2; margin-bottom: 3px; font-size: 14.5px; }
.ir-step-list span { grid-column: 2; color: #898781; font-size: 13px; line-height: 1.5; }
.ir-step-list li::before { grid-row: 1 / span 2; }

.ir-footer-cta {
  margin-top: 16px;
  background: #1c1b19;
  color: #ffffff;
  border-radius: 22px;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-card);
}
.ir-footer-cta h2 { color: #ffffff; font-size: 22px; }
.ir-footer-cta p { margin: 6px 0 0; color: #c9c7c0; }
.ir-footer-cta a { color: var(--brand-lift); text-decoration: none; font-weight: 700; }
.ir-footer-cta a:hover { text-decoration: underline; }
.ir-footer-logo { max-height: 54px; max-width: 180px; background: #ffffff; border-radius: 10px; padding: 6px 10px; }

/* ---------- Compliance: required top sentence + persistent legal footer ----
   Both live OUTSIDE every .ir-tab so they render on all five tabs. Anything
   inside a panel is display:none on the four tabs the borrower isn't on.

   .ir-legal-lead is pinned to 16px on purpose: 12 CFR 1026.19(e)(2)(ii)
   requires that sentence at no smaller than 12-point, and 12pt == 16 CSS px at
   the 96dpi CSS reference. Do not shrink it to "match" the body copy. */
.ir-legal-lead {
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e2da;
  color: #6b6963;
  /* 16px is the FLOOR, not a design choice — 12pt at the 96dpi CSS reference.
     The weight is what carries the visual quiet: at 650 this read as a banner
     over the masthead, and it is only 0.5px larger than the lede anyway. Tune
     weight and colour freely; never the size. */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  max-width: 900px;
}

.ir-legal {
  display: block;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid #e5e2da;
  color: #52514e;
  font-size: 12px;
  line-height: 1.6;
}
.ir-legal-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
  color: #141412;
  font-size: 12.5px;
  font-weight: 700;
}
.ir-legal-eh { display: flex; align-items: center; margin-right: 18px; }
/* Legible, not a smudge: the legacy reports render this mark at 8px tall,
   which is hard to defend as "prominently indicated". The asset is a raster
   inside the SVG (~1.33:1), so height + auto width keeps it undistorted. */
.ir-legal-eh img { display: block; height: 34px; width: auto; margin-right: 8px; }
.ir-legal-item { margin-right: 18px; font-weight: 650; }
.ir-legal p { margin: 0 0 10px; max-width: 900px; }
.ir-legal p:last-child { margin-bottom: 0; }
.ir-legal b { color: #141412; font-weight: 750; }

/* The one sentence in this footer that has to land. Own line, page ink,
   above the fine print rather than buried at the end of it. */
/* The <strong> inside carries the weight on its own, so "clear and
   conspicuous" survives a stylesheet that never loads; this rule only tunes it. */
.ir-legal-key { color: #141412; font-size: 12.5px; letter-spacing: -0.005em; }
.ir-legal-key strong { font-weight: 750; }
/* The boilerplate. Nothing is hidden or collapsed (see the template's footer
   comment) — it is set as what it is: fine print.
   The two columns are what MAKE the smaller type readable, and that is the
   whole argument for them: 11px across a 1084px block would be a ~150
   character line, unreadable at any size. Two columns put it on a ~90
   character measure, and the type can then shrink — measured at 1440px, the
   footer goes 335px -> 253px, and the boilerplate itself ~240px -> 158px.
   `columns: 2 300px` is column-count AND column-width in one: at most two
   columns, and one as soon as the block is narrower than ~640px, so the phone
   layout needs no media query. Multi-column is 2011-era; a browser that drops
   the shorthand renders one column, which is exactly today's layout (§4.13). */
.ir-legal-fine {
  color: #6b6963;
  font-size: 11px;
  line-height: 1.5;
  -webkit-columns: 2 300px;
  -moz-columns: 2 300px;
  columns: 2 300px;
  -webkit-column-gap: 32px;
  -moz-column-gap: 32px;
  column-gap: 32px;
}
/* NO max-width override. Inside a ~526px column the inherited 900px cap is a
   no-op, and on a browser that drops `columns` it is the whole fallback — 11px
   type running the full 1084px block is a ~185-character line, which is worse
   than what this replaced. */
.ir-legal-fine p { margin: 0 0 9px; }
.ir-legal-fine p:last-child { margin-bottom: 0; }

/* ---------- Mobile bottom tab bar ---------- */
.ir-tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid #e5e2da;
  box-shadow: 0 -8px 30px rgba(20, 20, 18, 0.08);
  padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
}
.ir-tabbar button {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #898781;
  padding: 6px 2px 5px;
  border-radius: 12px;
  cursor: pointer;
  display: grid;
  justify-items: center;
  grid-row-gap: 2px;
  grid-gap: 2px;
}
.ir-tabbar button.active { color: var(--brand-ink); background: var(--brand-soft); }
.ir-tabbar-ico { font-size: 15px; line-height: 1; }

/* ---------- Focus ---------- */
.ireport button:focus-visible,
.ireport input:focus-visible,
.ireport summary:focus-visible,
/* -ink, not the raw hue: a focus ring has to be visible whatever the LO picked.
   -ink is derived against the LIGHT surfaces, which is where all of these sit… */
.ireport a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 6px; }
/* …except the footer CTA's phone/email links, which sit on the near-black panel
   — outline-offset puts the whole ring on #1c1b19, where a dark -ink ring is
   invisible (theme4 measures 2.49:1, a navy custom color ~1.2:1). -lift is the
   tone derived against exactly that surface. */
.ir-footer-cta a:focus-visible { outline-color: var(--accent-lift); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .ir-hero-grid { grid-template-columns: 1fr; }
  .ir-hero-rec { border-right: 0; border-bottom: 1px solid #eeebe4; }
}

@media (max-width: 1000px) {
  .ir-shell { grid-template-columns: 1fr; }
  .ir-side { position: relative; height: auto; border-right: 0; border-bottom: 1px solid #e5e2da; padding: 14px 18px; }
  .ir-nav, .ir-lo-card { display: none; }
  .ir-brand { padding-bottom: 10px; }
  .ir-borrower-card { margin-bottom: 0; }
  .ir-tabbar { display: flex; }
  .ir-main { padding: 22px 18px 96px; }
  .ir-chart-grid { grid-template-columns: 1fr; }
  .ir-fees-layout { grid-template-columns: 1fr; }
  .ir-summary-panel { position: static; }
  .ir-calc { grid-template-columns: 1fr; }
  .ir-next-grid { grid-template-columns: 1fr; }
  /* Two versus cards side by side hold two three-column tables; below this they
     stack, which is also where each card's repeated "Today" column earns its
     place (see the section comment). */
  .ir-versus-2 { grid-template-columns: minmax(0, 1fr); }
  .ir-solo { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .ir-options-3, .ir-options-2 { grid-template-columns: 1fr; }
  .ir-quick-row { grid-template-columns: 1fr; }
  .ir-quick { border-right: 0; border-bottom: 1px solid #eeebe4; }
  .ir-quick:last-child { border-bottom: 0; }
  .ir-breakdown { grid-template-columns: 1fr; }
  .ir-mini-row { grid-template-columns: minmax(96px, 40%) 1fr 84px; }
  .ir-bar-line { grid-template-columns: 86px 1fr 104px; }
  /* The bar track is ~150px here — four in-bar labels are impossible, which is
     why every buydown figure lives in this list rather than inside the fill.
     Two lines per step: "Year 1 ........ $1,885.09" over "3.125% 3% lower".
     Placement is explicit on all three cells — auto-placement transposes the
     year and the rate. */
  .ir-steps-mini li { grid-template-columns: 1fr auto; grid-row-gap: 1px; }
  .ir-step-when { grid-column: 1; grid-row: 1; }
  .ir-step-pay { grid-column: 2; grid-row: 1; }
  .ir-step-rate { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
  /* Three columns on a ~324px card: the row header gives up its share first
     (38% keeps two words per line), the notes wrap where the figures cannot,
     and the cells lose the horizontal padding the room no longer has. The
     .ireport prefixes match the base rules — a media query adds no specificity,
     so a bare selector here would lose to them. */
  .ireport .ir-versus-table { font-size: 13px; }
  .ireport .ir-versus-table td,
  .ireport .ir-versus-table th[scope="row"] { padding: 10px 12px; }
  .ir-versus-table th[scope="row"] { width: 38%; }
  .ir-vs-note { white-space: normal; }
  /* The runway track keeps its full width — it is alone on its own row and can
     never squeeze — so only the two text lines step down. */
  .ir-runway-figure { font-size: 13.5px; }
  .ir-runway-note { font-size: 12px; }
  .ir-solo .ir-option-rows { grid-template-columns: 1fr; }
  .ir-footer-cta { display: block; }
  .ir-footer-logo { margin-top: 14px; }
  .ir-headline { font-size: 30px; }
  .ir-legal-lead { margin-bottom: 18px; }
  .ir-legal-eh img { height: 30px; }
  .ir-legal-item { margin-right: 0; flex-basis: 100%; margin-top: 4px; }
}

/* ---------- Print: show everything, hide chrome ---------- */
@media print {
  .ir-side, .ir-tabbar { display: none; }
  .ir-shell { display: block; }
  .ir-tab { display: block !important; }
  body.ireport::before { display: none; }
}