/* ==========================================================================
   rateshop.ca — design system
   Palette, type stack, radii and shadows ported verbatim from
   temp.rateshop.ca/css/site.css so the two properties stay visually identical.
   Indigo #080394 + gold #F9BB06 sampled from the Rateshop logotype.
   Gold carries CTAs. Indigo carries structure and links.
   Green means money saved. Red only ever means an error.
   ========================================================================== */

:root {
  --ink: #080733;
  --ink-2: #12114A;
  --ink-3: #232263;
  --brand: #080394;
  --brand-deep: #05024A;
  --brand-soft: #EEEEFF;
  --gold: #F9BB06;
  --gold-deep: #C99406;
  --gold-soft: #FFF6E0;
  --gold-text: #8E6800;
  --mint: #0E9E6E;
  --mint-soft: #E6F6F0;
  /* Primary CTA. #0B7A55 rather than the brighter mint because white text on
     mint is 3.42:1 — below AA. This is 5.34:1. */
  --green: #0B7A55;
  --green-deep: #085C40;
  --green-soft: #E7F5EF;
  --amber: #F9BB06;
  --error: #E11B18;
  /* The logotype red is a signal colour, not a text colour — at 4.27:1 on
     error-soft it fails WCAG AA. This darkened variant reads 5.93:1 and is
     what any error *text* uses. Borders and icons keep --error. */
  --error-text: #B81411;
  --error-soft: #FDEEEF;
  --paper: #F4F5FA;
  --line: #E3E4EF;
  --muted: #5B5F7D;
  --white: #fff;

  /* Two greys between --line and --paper. Modern layouts need a hairline that
     is lighter than a border and a fill that is barely there. */
  --line-soft: #EEEFF6;
  --wash: #FAFAFD;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;

  /* Shadows are near-neutral and shallow. The old set used coloured, heavy
     drops that read as 2018 and made every card float off the page. */
  --shadow-sm: 0 1px 2px rgba(8,7,51,.05);
  --shadow: 0 1px 3px rgba(8,7,51,.06), 0 8px 24px -8px rgba(8,7,51,.12);
  --shadow-lg: 0 2px 6px rgba(8,7,51,.07), 0 24px 56px -16px rgba(8,7,51,.18);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* One spacing scale, so vertical rhythm is a choice rather than an accident. */
  --s1: .35rem; --s2: .7rem; --s3: 1.1rem; --s4: 1.6rem;
  --s5: 2.4rem; --s6: 3.4rem; --s7: 4.8rem;
  --display: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif;
  --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --wrap: 1200px;
}

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

body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Every figure on this site is money. Lining, tabular figures stop columns
     of numbers from wobbling as the values change. */
  font-variant-numeric: tabular-nums lining-nums;
}

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.14; letter-spacing: -.025em; margin: 0 0 .5em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 2.9vw, 2.25rem); line-height: 1.1; letter-spacing: -.03em; }
h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
h3 { font-size: 1.08rem; letter-spacing: -.015em; }
h4 { font-size: .95rem; }
p  { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a  { color: var(--brand); text-decoration: none; text-underline-offset: .18em; }
a:hover { text-decoration: underline; }

/* One focus treatment for everything, visible on light and dark grounds. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}

/* Anything that carries meaning for a screen reader but must not be seen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
small, .small { font-size: .86rem; }
.muted { color: var(--muted); }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num   { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.money-saved { color: var(--mint); font-weight: 700; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
/* Sections were clamped up to 5.5rem top and bottom, which put most of a
   laptop screen between the hero and the first thing worth reading. */
.section { padding: clamp(2.4rem, 4.4vw, 3.8rem) 0; }
.section-tight { padding-block: clamp(1rem, 2vw, 1.5rem); }
.section-paper { background: var(--paper); }
.section-wash { background: var(--wash); }
/* A hairline between same-coloured sections, so the page has structure without
   alternating background stripes down its whole length. */
.section + .section:not(.section-paper):not(.section-wash) { border-top: 1px solid var(--line-soft); }
.hero + .section-tight { padding-top: 0; }
.section-paper + .section-paper { border-top: 1px solid var(--line); }
.lede { font-size: 1.06rem; line-height: 1.58; color: var(--muted); max-width: 60ch; }

.eyebrow {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; display: block;
}
/* A section can carry an eyebrow, a heading and a lede as one block. */
.section-head { max-width: 62ch; margin-bottom: var(--s4); }
.section-head h2 { margin-bottom: .4rem; }
.section-head .lede { font-size: 1rem; }

/* -------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
/* Firefox and anything else without backdrop-filter gets a solid bar rather
   than translucent white over scrolling text. */
@supports not (backdrop-filter: blur(1px)) { .site-head { background: #fff; } }
.head-inner { display: flex; align-items: center; gap: 1.2rem; height: 66px; }
/* The logotype is artwork, not type. Height is fixed and width follows, so the
   lockup keeps its proportions at every breakpoint. */
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { display: block; height: 34px; width: auto; }
.logo:hover { text-decoration: none; }
@media (max-width: 480px) { .logo img { height: 28px; } }
.mainnav { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.mainnav a, .mainnav .navbtn {
  display: flex; align-items: center; gap: .3rem; padding: .5rem .75rem; border-radius: 8px;
  font-weight: 600; font-size: .9rem; background: none; border: 0; cursor: pointer;
  color: var(--ink-3); transition: background .16s, color .16s;
}
.mainnav a:hover, .mainnav .navbtn:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
.mainnav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.head-cta { margin-left: .6rem; }
.navtoggle { display: none; }

@media (max-width: 900px) {
  .mainnav { position: fixed; inset: 66px 0 auto; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line); padding: .6rem 1.25rem 1rem;
    gap: .1rem; display: none; box-shadow: var(--shadow); max-height: calc(100dvh - 66px); overflow-y: auto; }
  .mainnav.open { display: flex; }
  .mainnav a { padding: .8rem .75rem; font-size: 1rem; }   /* 44px tap targets */
  .navtoggle { display: inline-flex; align-items: center; margin-left: auto; background: none;
    border: 1px solid var(--line); border-radius: 9px; padding: .6rem .85rem;
    font-weight: 600; font-size: .9rem; cursor: pointer; min-height: 42px; color: var(--ink); }
  .head-cta { margin-left: .5rem; padding: .7rem 1.05rem; font-size: .88rem; min-height: 42px; }
}
/* On a phone the header CTA wrapped onto two lines and took a third of the
   bar with it. Keep it on one line and let the logo shrink instead. */
.head-cta { white-space: nowrap; }
@media (max-width: 420px) {
  .head-inner { gap: .5rem; }
  .head-cta { padding: .6rem .8rem; font-size: .82rem; }
  .navtoggle { padding: .55rem .7rem; font-size: .85rem; }
}
/* Stacked hero buttons should fill the column rather than sitting at odd widths. */
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* -------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--green); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--btn-bg); color: var(--btn-fg);
  padding: .95rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: .97rem; letter-spacing: -.01em; text-align: center;
  font-family: var(--body); text-decoration: none;
  /* No coloured drop shadow. A gold glow under every button was the single
     most dating detail on the page; depth now comes from a hairline and a
     small, fast lift. */
  transition: filter .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
  box-shadow: 0 1px 2px rgba(8,7,51,.08);
  min-height: 44px;
}
.btn:hover { filter: brightness(1.04); box-shadow: 0 2px 8px rgba(8,7,51,.12); text-decoration: none; }
.btn:active { transform: translateY(1px); filter: brightness(.97); }
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; min-height: 52px; }
.btn-sm { padding: .55rem 1rem; font-size: .86rem; min-height: 38px; }
.btn-ghost { --btn-bg: #fff; --btn-fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ink-3); filter: none; background: var(--wash); }
.btn-brand { --btn-bg: var(--brand); --btn-fg: #fff; }
.btn-dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn-gold { --btn-bg: var(--gold); --btn-fg: var(--ink); }
/* The Lendmax handoff. Same green, kept as its own class so the application
   CTA can never be restyled by accident when the primary button changes. */
.btn-green { --btn-bg: var(--green); --btn-fg: #fff; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; pointer-events: none; }
.btn-block { width: 100%; }

/* -------------------------------------------------- cards + grid */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
/* Cards settle rather than levitate. The old translateY(-4px) plus a big shadow
   made a grid of them jump around under the cursor. */
a.card:hover { border-color: var(--ink-3); box-shadow: var(--shadow); text-decoration: none; }
a.card:hover h3 { color: var(--brand); }
.card h3 { margin-bottom: .4rem; }
.card-flat, .card-flat:hover { box-shadow: none; border-color: var(--line); transform: none; background: var(--wash); }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: var(--s5); align-items: start; }
/* minmax(0,1fr), not 1fr. A bare 1fr track takes its min-width from the widest
   child, so a wide table inside pushed the whole page sideways on a phone
   instead of scrolling inside its own wrapper. */
@media (max-width: 900px) { .split { grid-template-columns: minmax(0,1fr); gap: var(--s4); } }

/* -------------------------------------------------- pills / badges */
.pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem;
  border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .01em;
  background: var(--brand-soft); color: var(--brand);
}
.pill-gold { background: var(--gold-soft); color: var(--gold-text); }
.pill-mint { background: var(--mint-soft); color: #076C4B; }
.pill-line { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* -------------------------------------------------- rate board */
.rateboard { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.rateboard-head {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--wash);
}
.rateboard-head .stamp { margin-left: auto; font-family: var(--mono); font-size: .76rem; color: var(--muted); }

/* -------------------------------------------------- calculator icons */
/* One size everywhere. The icon sits in a tinted square so a line drawing has
   a shape to belong to — without it, 36 thin glyphs float on white and the
   grid reads as unfinished. */
.calcicon {
  display: block; width: 44px; height: 44px; padding: 8px; margin-bottom: .9rem;
  border-radius: 12px; background: var(--brand-soft); color: var(--brand);
  box-sizing: content-box;
}
.calccard:hover .calcicon { background: var(--brand); color: #fff; }
.calccard.is-pending { opacity: .62; }
.calccard.is-pending .calcicon { background: var(--paper); color: var(--muted); }
/* On the dark result panel the tint would be invisible, so the icon goes bare. */
.calc-out .calcicon { background: transparent; color: #fff; padding: 0; }

/* The icon above a page heading. Bigger than the card version because it is
   carrying a whole page rather than labelling one of nine cards. */
.page-mark .calcicon {
  width: 34px; height: 34px; padding: 11px; border-radius: 14px; margin-bottom: 1rem;
}

/* -------------------------------------------------- lender logos */
/* Every logo is pre-fitted to the same 320×160 canvas by scripts/import-logos.js,
   so the only job here is to hold the box and never let one stretch. Fixed
   height with a hairline means a card with a logo and a card without still line
   up down the grid. */
.lender-mark {
  display: flex; align-items: center; justify-content: center;
  width: 160px; height: 80px; object-fit: contain;
  border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft);
  margin-bottom: .8rem; overflow: hidden;
}
/* The monogram placeholder. Muted and colourless on purpose — it must read as
   "no logo supplied", never as a mark belonging to the lender. */
.lender-mark-mono { background: var(--wash); }
.lender-mark-mono span {
  font-family: var(--display); font-weight: 700; letter-spacing: .04em;
  font-size: 1.5rem; color: #A9ABC6;
}
.lender-mark-lg { width: 200px; height: 100px; margin-bottom: 1rem; }
.lender-mark-lg.lender-mark-mono span { font-size: 1.9rem; }
@media (max-width: 480px) { .lender-mark-lg { width: 160px; height: 80px; } }

/* -------------------------------------------------- dual CTA */
/* Two actions sharing the row. Equal columns so neither reads as the fallback,
   and they stack on a phone rather than shrinking to two unreadable halves. */
.cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.cta-pair .btn { width: 100%; }
@media (max-width: 620px) { .cta-pair { grid-template-columns: 1fr; } }

/* -------------------------------------------------- Lendmax handoff */
.lmx {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(8,7,51,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 1.5rem;
}
.lmx[hidden] { display: none; }
.lmx-card {
  background: #fff; border-radius: var(--radius-lg); padding: var(--s5) var(--s4);
  width: min(100%, 440px); text-align: center; box-shadow: var(--shadow-lg);
}
.lmx-spin {
  width: 54px; height: 54px; margin: 0 auto var(--s3);
  border-radius: 50%; border: 4px solid var(--green-soft); border-top-color: var(--green);
  animation: lmx-spin .9s linear infinite;
}
@keyframes lmx-spin { to { transform: rotate(360deg); } }
/* Reduced motion still needs to signal "working" — pulse rather than freeze. */
@media (prefers-reduced-motion: reduce) {
  .lmx-spin { animation: lmx-pulse 1.4s ease-in-out infinite; border-top-color: var(--green); }
  @keyframes lmx-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
}
.lmx-title { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .4rem; }
.lmx-sub { color: var(--muted); font-size: .93rem; margin: 0 0 var(--s3); }
.lmx-points { list-style: none; margin: 0 0 var(--s3); padding: 0; text-align: left; display: grid; gap: .5rem; }
.lmx-points li {
  position: relative; padding-left: 1.6rem; font-size: .93rem; font-weight: 600;
}
.lmx-points li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green);
}
.lmx-fallback { color: var(--muted); margin: 0; }

/* -------------------------------------------------- renewal savings calc */
.input-suffix { position: relative; display: block; }
.input-suffix input { width: 100%; padding-right: 3.4rem; }
.input-suffix span {
  position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .88rem; pointer-events: none;
}
.label-like { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.seg { display: grid; grid-auto-flow: column; gap: .4rem; }
.seg label { position: relative; margin: 0; }
.seg input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span {
  display: flex; align-items: center; justify-content: center; min-height: 46px;
  border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 600; font-size: .9rem; background: #fff; transition: background .15s, color .15s;
}
.seg input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.rscalc { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s4); align-items: start; }
.rscalc .rs-form { display: grid; gap: .2rem; }
.rscalc .rs-form .btn { margin-top: .5rem; }
.rs-out { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
@media (max-width: 860px) { .rscalc { grid-template-columns: minmax(0,1fr); } }
.rs-headline {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
  padding: var(--s2); border-radius: 12px; background: var(--green-soft); margin-bottom: var(--s2);
}
.rs-headline .num { display: block; font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.rs-headline .eyebrow { display: block; margin-bottom: .15rem; }
.rs-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line-soft); font-size: .93rem; }
.rs-lines > div:last-child { border-bottom: 0; }
.rs-lines .is-total { font-weight: 700; border-top: 1px solid var(--line); border-bottom: 0; margin-top: .2rem; }
.rs-lines .is-total span:last-child { color: var(--green); }

@media (max-width: 560px) {
  .rs-headline { grid-template-columns: 1fr; }
  .rs-headline .num { font-size: 1.6rem; }
}

/* Renewal Tracker month/year picker. Two equal columns so neither dropdown
   reads as the primary one; they are a single date between them. */
.datepick { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.datepick select { width: 100%; }
.datepick select:invalid { color: var(--muted); }

/* The buydown row. Sorts into the board like any rate, because it is one — the
   tint and the note under the name are what stop it reading as a posted lender
   rate the borrower could get by phoning that lender directly. */
.row-buydown { background: var(--gold-soft); }
.row-buydown .rate { font-weight: 800; }
.buydown-note { display: block; margin-top: .3rem; max-width: 34ch; line-height: 1.35; color: var(--gold-text); }

/* The one exclusive row. Sits above the table, deliberately unlike a rate row —
   no number, no rank, no column alignment with the board beneath it. */
.exclusive-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3);
  align-items: center; padding: 1.05rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--gold-soft) 0%, #fff 140%);
}
.exclusive-copy .eyebrow { display: block; margin-bottom: .15rem; }
.exclusive-head { margin: 0 0 .25rem; font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
.exclusive-copy .small { margin: 0; max-width: 62ch; }
.exclusive-act { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; text-align: center; }
.exclusive-act .small { white-space: nowrap; }

@media (max-width: 700px) {
  .exclusive-row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .exclusive-act { align-items: stretch; }
  .exclusive-act .btn { width: 100%; }
}
.filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.filters button {
  border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  padding: .45rem .85rem; border-radius: 999px; font-weight: 600; font-size: .84rem;
  font-family: var(--body); color: var(--ink); cursor: pointer;
  transition: background .14s, box-shadow .14s, color .14s;
  min-height: 34px; display: inline-flex; align-items: center;
}
.filters button:hover { box-shadow: inset 0 0 0 1px var(--ink-3); background: var(--wash); }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
/* Filters are the primary control on this page and they get tapped with a
   thumb. Under 900px they grow to a real touch target. */
@media (max-width: 900px) {
  .filters { gap: .45rem; }
  .filters button { min-height: 42px; padding: .6rem 1rem; font-size: .88rem; }
}
.rate-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.rate-table th {
  text-align: left; font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--line);
  background: #fff;
}
.rate-table td { padding: .8rem 1.1rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.rate-table tr:last-child td { border-bottom: 0; }
.rate-table tbody tr { transition: background .12s; }
.rate-table tbody tr:hover { background: var(--wash); }
.rate-table .rate { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.02rem; letter-spacing: -.03em; }
.rate-table .lender { font-weight: 700; }
.rate-table .lender small { display: block; font-weight: 500; color: var(--muted); font-size: .78rem; }
.rate-table .term-name { display: block; }
.rate-table .term-spread { display: block; font-size: .78rem; }
.rate-table td.right, .rate-table th.right { text-align: right; }
.rateboard-foot { padding: .85rem 1.1rem; font-size: .8rem; color: var(--muted); background: var(--wash); border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .rate-table thead { display: none; }
  .rate-table tr { display: grid; grid-template-columns: 1fr auto; gap: .25rem .8rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
  .rate-table td { border: 0; padding: 0; }
  .rate-table td[data-label]::before { content: attr(data-label) " "; font-size: .7rem; color: var(--muted); font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
  .rate-table .btn.btn-sm { min-height: 44px; }
}

/* -------------------------------------------------- calculator shell */
.calc { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 1.6rem; align-items: start; }
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0,1fr); } }
.calc-inputs { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem; }
.calc-out {
  background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 1.5rem;
  position: sticky; top: 82px; box-shadow: var(--shadow);
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(8,3,148,.55), transparent 62%);
}
@media (max-width: 900px) { .calc-out { position: static; } }
.calc-out .eyebrow { color: #9A9CC4; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .35rem; }
.field .hint { font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.field input, .field select {
  width: 100%; padding: .72rem .85rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 1rem; font-variant-numeric: tabular-nums;
  color: var(--ink); background: #fff; min-height: 46px;
  transition: border-color .14s, box-shadow .14s;
  /* 16px minimum, or iOS Safari zooms the whole page on focus. */
}
.field input:hover, .field select:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus {
  outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235B5F7D' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 11px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.result-big { font-family: var(--mono); font-size: clamp(2rem,4.6vw,2.7rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: .3rem 0 .2rem; }
.result-rows { margin-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); }
.result-rows div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.09); font-size: .92rem; }
.result-rows div:last-child { border-bottom: 0; }
.result-rows span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.result-rows .is-total { color: var(--gold); }

/* LTV meter */
.ltv-meter { height: 8px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; margin: .5rem 0 .3rem; }
.ltv-meter i { display: block; height: 100%; background: var(--gold); border-radius: 999px; transition: width .3s var(--ease); }
.ltv-meter.is-high i { background: var(--error); }

/* -------------------------------------------------- gates */
.gate {
  background: linear-gradient(180deg, var(--gold-soft), #fff 70%);
  border: 1px solid #F1D89A; border-radius: var(--radius-lg); padding: 1.4rem;
}
.gate h3 { margin-bottom: .35rem; }
/* The gate's title is a widget label, not a section heading — making it an h3
   put an h1 → h3 jump on the home page and the renewals hub. */
.gate-title {
  font-family: var(--display); font-size: 1.12rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .35rem;
}
.gate .btn { margin-top: .5rem; }
.gate-note { font-size: .78rem; line-height: 1.5; color: var(--gold-text); margin-top: .7rem; }

/* -------------------------------------------------- tables (generic) */
.data-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.data-table th { text-align: left; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.data-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.data-table td.right, .data-table th.right { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.data-table tr:last-child td { border-bottom: 0; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }

/* -------------------------------------------------- misc */
.breadcrumb { font-size: .82rem; color: var(--muted); padding: 1.1rem 0 0; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb a { color: var(--muted); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 0; }
.faq summary {
  font-weight: 700; cursor: pointer; list-style: none; display: flex;
  justify-content: space-between; gap: 1rem; padding: 1.05rem .25rem;
  border-radius: 8px; transition: background .14s;
}
.faq summary:hover { background: var(--wash); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--muted); flex: none; transition: transform .18s var(--ease); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 1rem; color: var(--muted); max-width: 68ch; }
.faq details[open] > p:last-child { padding-bottom: 1.05rem; }
.faq details > *:not(summary) { padding-inline: .25rem; }
.linklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: .1rem 1rem; }
.linklist a { padding: .4rem 0; display: block; font-size: .92rem; }
.callout { border-left: 3px solid var(--brand); background: var(--brand-soft); padding: .95rem 1.15rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.callout p:last-child { margin-bottom: 0; }
.callout-gold { border-left-color: var(--gold-deep); background: var(--gold-soft); }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--mono); font-size: 1.8rem; letter-spacing: -.04em; line-height: 1.1; }
.stat span { font-size: .82rem; color: var(--muted); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; position: fixed; background: #fff; padding: .7rem 1rem; border-radius: 8px; z-index: 99; box-shadow: var(--shadow); }

/* -------------------------------------------------- footer */
.site-foot { background: var(--ink); color: #9A9CC4; padding: clamp(2.6rem,4vw,3.6rem) 0 1.6rem; font-size: .88rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.site-foot .foot-head { color: #fff; font-size: .72rem; font-family: var(--mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .9rem; }
.site-foot a { display: block; padding: .3rem 0; transition: color .16s; color: #9A9CC4; }
.site-foot a:hover { color: #fff; text-decoration: none; }
.site-foot .logo { margin-bottom: .2rem; }
.site-foot .logo img { height: 34px; }
.foot-legal { padding-top: 1.6rem; font-size: .78rem; line-height: 1.7; color: #7A7CA6; }
/* The trademark notice is the longest line in the footer and the least often
   read. Smaller and narrower so it reads as a notice rather than competing
   with the ownership line above it. */
.foot-marks { font-size: .73rem; max-width: 88ch; opacity: .88; }

/* Google Preferred Sources. Sits between the link columns and the province
   list, where it reads as a subscribe affordance rather than an advert. */
.preferred-source {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.4rem 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.preferred-source p { margin: 0; font-size: .88rem; color: #9A9CC4; max-width: 34ch; }
.preferred-source [google-add-preferred-source-btn] { margin-left: auto; min-height: 44px; }
.preferred-source img { display: block; height: 44px; width: auto; max-width: 100%; }
@media (max-width: 700px) {
  .preferred-source [google-add-preferred-source-btn] { margin-left: 0; }
}
.foot-provinces { padding: 1.4rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .8rem; }
.foot-provinces a { display: inline-block; padding: .2rem .55rem .2rem 0; }

/* -------------------------------------------------- lender directory */
.lender-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px; background: var(--line);
}
.lender-card {
  background: #fff; padding: 1.05rem 1.15rem; display: block; color: var(--ink);
  transition: background .14s;
}
.lender-card:hover { background: var(--brand-soft); text-decoration: none; }
.lender-card:hover h3 { color: var(--brand); }
.lender-card h3 { font-size: 1rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
.lender-card .pill { margin: 0 .3rem .45rem 0; font-size: .68rem; padding: .18rem .5rem; }
.lender-card p { margin: .3rem 0 0; }
.lender-card[hidden] { display: none; }

/* ------------------------------------------------------------------ ratings */
/* A star is a grey track with a gold overlay clipped to a percentage width, so
   3.4 and 3.6 look different. The zero state is the track alone — no gold at
   all — because a lender with no reviews must not read as a low score either. */
.stars { display: inline-flex; gap: .12em; vertical-align: -.12em; }
.star {
  position: relative; width: 1em; height: 1em; display: block;
  background: var(--line);
  -webkit-mask: var(--star-mask) center / contain no-repeat;
          mask: var(--star-mask) center / contain no-repeat;
}
.star i { position: absolute; inset: 0; display: block; background: var(--gold); width: 0; }
:root { --star-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.9 7.4.8-5.5 5 1.5 7.3L12 17.9 5.5 21.6 7 14.3l-5.5-5 7.4-.8z'/%3E%3C/svg%3E"); }
.stars-sm { font-size: .82rem; }
.stars-empty .star { background: var(--line); }

.rating-line { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0; flex-wrap: wrap; }
.rating-line strong { font-family: var(--mono); font-size: .95rem; }
.rating-line em { font-style: italic; }
.rating-big { font-size: 1.35rem; margin: 1rem 0 1.4rem; }
.rating-big strong { font-size: 1.1rem; }
a.rating-jump { display: inline-block; text-decoration: none; color: inherit; }
a.rating-jump:hover .rating-line em,
a.rating-jump:hover .rating-line strong { text-decoration: underline; }

.review-statement {
  font-size: 1.02rem; line-height: 1.6; color: var(--ink);
  border-left: 3px solid var(--gold); padding-left: 1.05rem; margin: 1rem 0 1.4rem;
  max-width: 62ch;
}

.crits { display: grid; gap: 1.1rem; margin: 1.4rem 0 2rem; }
@media (min-width: 700px) { .crits { grid-template-columns: 1fr 1fr; gap: 1.1rem 2rem; } }
.crit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.crit-label { font-weight: 600; font-size: .95rem; }
.crit-score { font-family: var(--mono); font-size: .9rem; }
.crit-meter { height: 6px; border-radius: 3px; background: var(--line); margin: .4rem 0 .35rem; overflow: hidden; }
.crit-meter i { display: block; height: 100%; background: var(--gold); }
.crit-meter.is-empty i { background: transparent; }
.crit-prompt { margin: 0; }

.gate-review .field-stars { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem .8rem; }
.gate-review .field-stars label { grid-area: 1 / 1; margin: 0; }
.gate-review .field-stars output { grid-area: 1 / 2; font-family: var(--mono); font-size: .85rem; color: var(--muted); }
.gate-review .field-stars input[type=range] { grid-area: 2 / 1 / 3 / 3; width: 100%; accent-color: var(--gold); }


/* -------------------------------------------------- hero
   The first screen. It was clamped to 5.5rem of section padding on top of a
   2.4rem grid gap, which put the fold below anything worth reading. */
.hero { padding: clamp(1.8rem, 3.4vw, 2.8rem) 0 clamp(1.4rem, 2.4vw, 2rem); }
.hero .split { align-items: center; gap: clamp(1.6rem, 4vw, 3rem); }
.hero h1 { margin-bottom: .55rem; }
.hero .lede { font-size: clamp(1rem, 1.3vw, 1.1rem); margin-bottom: 1.35rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: .85rem; }
.hero-note { font-size: .84rem; color: var(--muted); margin: 0; }
@media (max-width: 900px) { .hero .split { align-items: start; } }

/* -------------------------------------------------- trust strip
   Small, factual, and directly under the hero — the numbers a visitor uses to
   decide whether the site is worth their next thirty seconds. */
.trustbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.trustbar > div { background: #fff; padding: .9rem 1.1rem; }
.trustbar b {
  display: block; font-family: var(--mono); font-size: 1.22rem;
  letter-spacing: -.035em; line-height: 1.2; color: var(--ink);
}
.trustbar span { font-size: .76rem; line-height: 1.4; color: var(--muted); display: block; }
@media (max-width: 560px) { .trustbar { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------- utilities */
.stack-sm > * + * { margin-top: var(--s2); }
.stack > * + * { margin-top: var(--s3); }
.divider { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s5); }
.prose h3 { margin-top: var(--s4); }
.prose > *:first-child { margin-top: 0; }

/* Long values wrap rather than widening the table — but `anywhere` alone let a
   two-column definition table squeeze its label column to nothing and break
   short phrases mid-word. Give the label column a floor. */
.data-table td, .data-table th { overflow-wrap: break-word; }
.data-table tr > td:first-child:not(.right) { min-width: 11rem; }
@media (max-width: 560px) { .data-table tr > td:first-child:not(.right) { min-width: 7rem; } }

/* Print: the calculator result and the rate board are what people print. */
@media print {
  .site-head, .site-foot, .gate, .btn, .filters, .skip { display: none !important; }
  body { font-size: 11pt; }
  .card, .rateboard, .calc-inputs { break-inside: avoid; border-color: #ccc; }
  .calc-out { background: #fff !important; color: #000 !important; box-shadow: none; }
  a[href^="/"]::after { content: " (rateshop.ca" attr(href) ")"; font-size: .8em; color: #555; }
}

/* A gold button on all 128 rows of the board turned the whole table yellow and
   drowned the rates, which are what the page is for. The action is secondary
   to the number beside it. */
.rate-table .btn.btn-sm { --btn-bg: #fff; font-weight: 600; }
.rate-table tbody tr:hover .btn.btn-sm { box-shadow: inset 0 0 0 1px var(--ink-3); background: var(--gold-soft); }

/* A heading that must sit at h2 for document order but reads as a card title. */
.h3-size { font-size: 1.08rem; letter-spacing: -.015em; }

/* -------------------------------------------------- shelf finder
   The hero's working end. Every competitor forks on intent then asks one or
   two impersonal questions; this does the same and answers immediately rather
   than sending you to a results page to find out. */
.finder-shell {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.3rem; box-shadow: var(--shadow);
}
.finder-lede { font-size: .9rem; color: var(--muted); margin: 0 0 1rem; }

.finder-intent { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-bottom: 1rem; }
.finder-intent label { margin: 0; }
.finder-intent input { position: absolute; opacity: 0; width: 0; height: 0; }
.finder-intent span {
  display: block; text-align: center; padding: .6rem .3rem; border-radius: 9px;
  font-weight: 600; font-size: .88rem; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line); transition: .14s; min-height: 42px;
  display: flex; align-items: center; justify-content: center;
}
.finder-intent input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.finder-intent input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.finder-intent span:hover { background: var(--wash); }
.finder-intent input:checked + span:hover { background: var(--ink); }

.finder-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.finder .field { margin-bottom: .9rem; }

.finder-out {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  background: var(--paper); border-radius: var(--radius-sm);
  padding: .85rem 1rem; margin-bottom: 1rem;
}
.finder-out .eyebrow { margin-bottom: .2rem; font-size: .66rem; }
.finder-out strong { display: block; font-size: 1.05rem; line-height: 1.2; text-transform: capitalize; }
.finder-out .finder-rate { text-align: right; }
.finder-out .finder-rate strong { font-size: 1.5rem; letter-spacing: -.03em; text-transform: none; }
.finder-note { font-size: .78rem; color: var(--muted); margin: .7rem 0 0; text-align: center; }

/* -------------------------------------------------- shelves */
.shelves { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.shelf { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; background: #fff; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.shelf-head h3 { margin: 0; }
.shelf-why { margin: .5rem 0 1rem; }
.shelf-rates { margin: 0; display: grid; gap: .55rem; }
.shelf-rates div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: .55rem; border-top: 1px solid var(--line-soft); }
.shelf-rates dt { font-size: .85rem; color: var(--muted); }
.shelf-rates dd { margin: 0; text-align: right; }
.shelf-rates dd strong { font-size: 1.15rem; letter-spacing: -.03em; display: block; }
.shelf-rates dd span { display: block; }

/* -------------------------------------------------- lender programs
   The module the research says nobody else has. Deliberately plainer than the
   rate cards — this is meant to read as reference, not as an offer. */
.programs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.program { background: #fff; padding: 1.2rem 1.25rem; display: flex; flex-direction: column;
  color: var(--ink); transition: background .14s; }
.program:hover { background: var(--brand-soft); text-decoration: none; }
.program:hover h3 { color: var(--brand); }
.program-head h3 { margin: .55rem 0 0; font-size: 1.02rem; }
.program-suits { font-size: .89rem; line-height: 1.55; margin: .7rem 0 1rem; flex: 1; }
.program-suits .muted { font-weight: 600; }
.program-more { font-size: .84rem; font-weight: 600; color: var(--brand); }

/* -------------------------------------------------- mobile shopping */
.mobileshop { display: grid; gap: 2rem; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
@media (max-width: 860px) { .mobileshop { grid-template-columns: minmax(0,1fr); } }
.mobileshop-copy h2 { margin-bottom: .6rem; }
.ticks { list-style: none; margin: 1.1rem 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.ticks li { padding-left: 1.6rem; position: relative; font-size: .93rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: .85rem; height: .5rem;
  border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint);
  transform: rotate(-45deg);
}
.mobileshop-art { margin: 0; text-align: center; }
.mobileshop-art svg { width: min(100%, 300px); height: auto; }
.mobileshop-art figcaption { font-size: .72rem; color: var(--muted); margin-top: .6rem; font-style: italic; }
.mobileshop-art code { font-style: normal; }
/* Placeholder palette — deliberately flat, so it never reads as a finished asset. */
.ph-body   { fill: var(--ink); }
.ph-screen { fill: var(--paper); }
.ph-bar    { fill: #fff; }
.ph-card   { fill: #fff; stroke: var(--line); stroke-width: 1; }
.ph-line   { fill: var(--line); }
.ph-faint  { opacity: .6; }
.ph-rate   { fill: var(--brand-soft); }
.ph-cta    { fill: var(--gold); }
.ph-chip rect { fill: var(--brand-soft); }
.ph-chip rect:first-child { fill: var(--ink); }
.ph-notch  { fill: var(--ink); }

/* -------------------------------------------------- learning centre */
.linkgrid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.linkgrid a { background: #fff; padding: 1rem 1.15rem; display: block; color: var(--ink); transition: background .14s; }
.linkgrid a:hover { background: var(--brand-soft); text-decoration: none; }
.linkgrid a:hover strong { color: var(--brand); }
.linkgrid strong { display: block; margin-bottom: .3rem; font-size: .98rem; }
.linkgrid span { display: block; line-height: 1.5; }

/* Four calculator cards with real blurbs read as 2x2, not 3+1. */
.calcgrid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .calcgrid { grid-template-columns: 1fr 1fr; } }