/* ============================================================================================
   The redesign kit (the pivot, Nov 6 2026). One stylesheet for the new homepage and every page
   redesigned after it: tokens, then one class per part. docs/redesign/kit.md lists the parts and
   docs/redesign/07-design-principles.md the rules they follow. The sample report is its own
   component (report-sample.css). Prefix: r- (nothing here touches the old site's classes).
   ============================================================================================ */

:root {
  /* colours */
  --r-navy: #001C44;
  --r-navy-2: #0B2E63;
  --r-node: #0B2F66;
  --r-blue: #0070B8;          /* sky blue for text on light backgrounds (4.5:1+) */
  --r-bright: #00B0FF;        /* sky blue on navy */
  --r-ink: #1E2633;           /* body text */
  --r-body: #3A4252;          /* secondary text */
  --r-line: #D9DDE4;
  --r-line-2: #E1E5EB;
  --r-grey: #F3F4F7;          /* alternate section background */
  --r-pale: #E6F5FD;          /* icon squares, highlights */
  --r-field: #6B7589;         /* form field border */
  --r-on-navy: #C5CFDF;       /* body text on navy */
  --r-on-navy-2: #B3C0D6;     /* small text on navy */
  --r-rule-navy: rgba(255, 255, 255, 0.16);
  --r-gold: #FBB766; --r-gold-text: #9A5503;   /* Connect accent */
  --r-peach: #FF5D5C; --r-peach-text: #D70100; /* Personal & Property accent */
  --r-accent: var(--r-blue);                   /* eyebrow colour; a channel page swaps it */
  --r-accent-rule: transparent;                /* the 4px rule under a hub H1 */
  /* type: DM Sans 400/500/700. Fluid (Jana, 6 Nov: "isn't it a bit too big?"): each size grows
     smoothly with the browser from its phone size at 390px to its desktop size at 1280px, so there's
     no jump at a breakpoint. H1 34 to 48, H2 26 to 32, lead 18 to 20, body 16 to 17, small 14,
     figure 28 to 36; section padding 48 to 72. */
  --r-font: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, sans-serif;
  --r-h1: clamp(30px, 27.87px + 1.573vw, 48px); --r-h2: clamp(24px, 23.37px + 0.674vw, 32px);
  --r-lead: clamp(17px, 17.12px + 0.225vw, 20px); --r-text: clamp(16px, 15.56px + 0.112vw, 17px);
  --r-small: 14px; --r-fig: clamp(28px, 24.49px + 0.899vw, 36px);
  /* space and shape */
  --r-wrap: 1200px; --r-gutter: 24px; --r-edge: clamp(16px, 4vw, 24px); /* the page's side margin: 16px on a phone, 24px from 600px */ --r-pad: clamp(48px, 37.47px + 2.697vw, 72px);
  --r-radius: 12px; --r-radius-sm: 8px;
  --r-shadow-menu: 0 18px 48px rgba(0, 28, 68, 0.14);
}

/* ---- page ---- */
.r-page { margin: 0; background: #FFFFFF; color: var(--r-ink); font-family: var(--r-font); font-size: var(--r-text); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.r-page *, .r-page *::before, .r-page *::after { box-sizing: border-box; }
.r-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.r-skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: #FFFFFF; color: var(--r-navy); padding: 10px 14px; border-radius: 8px; }
.r-skip:focus { left: 8px; }
.r-page main:focus { outline: none; }

/* ---- layout ---- */
.r-wrap { width: min(var(--r-wrap), calc(100% - 2 * var(--r-edge))); margin: 0 auto; }
.r-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--r-gutter); align-items: start; }
.r-grid--center { align-items: center; }
.r-text { grid-column: 1 / span 5; }
.r-visual { grid-column: 6 / span 7; }
.r-section { position: relative; padding: var(--r-pad) 0; }
.r-section--grey { background: var(--r-grey); }
.r-section--navy { background: var(--r-navy); color: #FFFFFF; }
@media (max-width: 1023px) {
  .r-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .r-text, .r-visual { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .r-wrap { width: calc(100% - 32px); } }

/* ---- type ---- */
.r-eyebrow { margin: 0 0 16px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-accent); }
.r-h1 { margin: 0; font-size: var(--r-h1); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--r-navy); text-wrap: balance; }
.r-h2 { margin: 0; font-size: var(--r-h2); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: var(--r-navy); text-wrap: balance; }
.r-h1 .r-tone, .r-h2 .r-tone { display: block; color: var(--r-blue); }
.r-h1--ruled::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 20px; border-radius: 2px; background: var(--r-accent-rule); }
.r-lead { margin: 20px 0 0; font-size: var(--r-lead); line-height: 1.4; font-weight: 400; color: var(--r-ink); max-width: 34ch; }
.r-lead strong { font-weight: 700; color: var(--r-navy); }
.r-body { margin: 20px 0 0; font-size: var(--r-text); line-height: 1.5; color: var(--r-ink); max-width: 62ch; }
.r-body--strong { font-weight: 500; color: var(--r-navy); }
.r-body--tight { margin-top: 12px; }
.r-body--next { margin-top: 16px; }
.r-body--bold { font-weight: 700; color: var(--r-navy); }
.r-small--gap { margin-top: 24px !important; }
.r-small { margin: 16px 0 0; font-size: var(--r-small); line-height: 1.5; color: var(--r-body); }
.r-section--navy .r-eyebrow { color: var(--r-bright); }
.r-section--navy .r-h2 { color: #FFFFFF; }
.r-section--navy .r-h2 .r-tone { color: var(--r-bright); }
.r-section--navy .r-body { color: var(--r-on-navy); }
.r-section--navy .r-small { color: var(--r-on-navy-2); }
.r-sub { margin: 12px 0 0; font-size: var(--r-text); line-height: 1.5; font-weight: 500; color: #FFFFFF; }

/* ---- buttons and links ---- */
.r-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--r-navy); border-radius: var(--r-radius); background: var(--r-navy); color: #FFFFFF; font-family: inherit; font-size: var(--r-text); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.r-btn:hover { background: var(--r-navy-2); color: #FFFFFF; }
.r-btn--secondary { background: #FFFFFF; color: var(--r-navy); }
.r-btn--secondary:hover { background: var(--r-grey); color: var(--r-navy); }
.r-btn svg { flex: none; }
.r-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.r-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--r-text); font-weight: 500; color: var(--r-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.r-link:hover { color: var(--r-blue); }
.r-link--blue { color: var(--r-blue); }
.r-link--blue:hover { color: var(--r-navy); }
.r-more { margin: 24px 0 0; }
.r-tel { color: var(--r-navy); font-weight: 700; text-decoration: none; }

/* ---- trust strip ---- */
.r-trust { background: var(--r-grey); border-bottom: 1px solid var(--r-line); font-size: 14px; line-height: 1.5; color: var(--r-body); }
.r-trust .r-wrap { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 4px 16px; }
.r-trust p { margin: 0; }
.r-trust a { color: var(--r-body); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 35px; }
.r-trust a:hover { text-decoration: underline; }
.r-stars { color: var(--r-blue); letter-spacing: 0.08em; }
.r-trust b { color: var(--r-navy); }
.r-trust .r-trust-short { display: none; }
/* The short form, one line, below 1024px (the full strip wraps at tablet width); "reviews" drops at 360px and under */
@media (max-width: 1023px) {
  .r-trust .r-wrap { justify-content: center; min-height: 44px; }
  .r-trust .r-trust-full { display: none; }
  .r-trust .r-trust-short { display: inline; }
  .r-trust a { min-height: 44px; }
}
/* the reassurance line in the strip (6 Nov) */
.r-trust .r-trust-rep { display: none; }
@media (max-width: 1279px) { .r-trust .r-trust-creds { display: none; } .r-trust .r-trust-rep { display: inline; } }
@media (max-width: 1023px) { .r-trust .r-wrap { gap: 0; } .r-trust .r-trust-long { display: none; } .r-trust .r-trust-promise::after { content: "\00a0·\00a0"; } }
@media (max-width: 599px) { .r-trust .r-trust-rep { display: none; } }

/* ---- the pill nav ---- */
.r-header { position: relative; padding: 16px 0; }
/* Round 3 (Matt's 9 Nov email, point 4: "keep the header in place as you scroll down the page"): on every
   page with the menu the header stays at the top of the window while the trust strip above it scrolls away
   (since 9 Nov a white strip, below, not a pill in a clear band). In-page anchors
   and focus land below it (scroll-padding). Apply and the campaign pages (logo and phone only) keep a
   header that scrolls, so the send pages held until Wed 11 Nov don't change. */
.r-header:has(.r-menu) { position: sticky; top: 0; z-index: 70; pointer-events: none; }
.r-header:has(.r-menu) .r-nav { pointer-events: auto; }
html:has(.r-header .r-menu) { scroll-padding-top: 96px; }
html:has(.r-header .r-menu) .r-doc__toc { top: 112px; max-height: calc(100vh - 136px); }
.r-nav { position: relative; width: min(var(--r-wrap), calc(100% - 2 * var(--r-edge))); height: 64px; margin: 0 auto; border: 1px solid var(--r-line); border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; gap: 16px; padding: 0 7px 0 28px; }
/* The white strip (Jana, 9 Nov: "i dont like this rounded border ... cant it just be a sticky strip of white at the
   very top?"): on every page with the menu, the header is a full-width white band with a hairline under it, and
   the nav's contents line up with the page's own edges. Apply and the campaign pages (no menu) keep the pill. */
.r-header:has(.r-menu) { padding: 0; background: #FFFFFF; border-bottom: 1px solid var(--r-line); pointer-events: auto; }
.r-header:has(.r-menu) .r-nav { height: 72px; padding: 0; border: 0; border-radius: 0; background: none; }
html:has(.r-header .r-menu) { scroll-padding-top: 88px; }
html:has(.r-header .r-menu) .r-doc__toc { top: 96px; max-height: calc(100vh - 120px); }
.r-logo { display: flex; flex: none; }
.r-logo img { height: 22px; width: auto; display: block; }
.r-menu { list-style: none; margin: 0 auto; padding: 0; display: flex; align-items: center; gap: 8px; }
.r-menu > li { position: relative; }
.r-menu-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--r-navy); text-decoration: none; cursor: pointer; white-space: nowrap; }
.r-menu-link:hover, .r-dd.is-open > .r-menu-link { background: var(--r-grey); }
.r-menu-link[aria-current="page"], .r-menu-link.is-current { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.r-caret { transition: transform 0.2s; }
.r-dd.is-open .r-caret { transform: rotate(180deg); }
.r-dd-panel { display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); z-index: 50; width: max-content; max-width: calc(100vw - 48px); padding: 20px 24px; background: #FFFFFF; border: 1px solid var(--r-line); border-radius: 16px; box-shadow: var(--r-shadow-menu); }
.r-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.r-dd.is-open > .r-dd-panel { display: block; }
@media (hover: hover) and (min-width: 1024px) { .r-dd:hover > .r-dd-panel { display: block; } .r-dd:hover > .r-menu-link { background: var(--r-grey); } }
.r-dd-cols { display: grid; grid-template-columns: repeat(2, minmax(200px, auto)); gap: 32px; }
.r-dd-head { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--r-body); }
.r-dd-panel ul { list-style: none; margin: 0; padding: 0; }
.r-dd-panel a { display: flex; align-items: center; min-height: 40px; font-size: 14px; color: var(--r-navy); text-decoration: none; white-space: nowrap; }
.r-dd-panel a:hover { color: var(--r-blue); text-decoration: underline; }
.r-dd-foot { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--r-line-2); font-size: 14px; line-height: 1.5; color: var(--r-body); max-width: 52ch; }
.r-nav-right { display: flex; align-items: center; gap: 16px; flex: none; margin-left: auto; }
.r-nav .r-phone.r-phone--keep { display: flex; }
.r-nav .r-phone--keep span { display: inline; }
.r-phone { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--r-navy); text-decoration: none; }
.r-nav .r-btn { height: 48px; }
.r-burger { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--r-navy); color: #FFFFFF; cursor: pointer; }
.r-burger .r-x { display: none; }
.r-nav.is-open .r-burger .r-x { display: block; }
.r-nav.is-open .r-burger .r-bars { display: none; }
.r-m-only { display: none; }
.r-nav-title { margin: 0 auto; font-size: 14px; font-weight: 700; color: var(--r-navy); }  /* the QR landing page's nav */
@media (max-width: 1180px) { .r-phone span { display: none; } .r-menu-link { padding: 0 8px; } }
@media (max-width: 1023px) {
  .r-burger { display: inline-flex; }
  .r-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; background: #FFFFFF; border: 1px solid var(--r-line); border-radius: 16px; box-shadow: var(--r-shadow-menu); max-height: calc(100vh - 140px); overflow-y: auto; }
  .r-nav.is-open .r-menu { display: flex; }
  .r-menu > li { border-bottom: 1px solid var(--r-line-2); }
  .r-menu > li:last-child { border-bottom: 0; }
  .r-m-only { display: block; }
  .r-menu-link { width: 100%; justify-content: space-between; min-height: 52px; padding: 0 4px; font-size: 17px; border-radius: 0; }
  .r-menu-link:hover, .r-dd.is-open > .r-menu-link { background: none; }
  .r-dd-panel { position: static; transform: none; width: auto; max-width: none; padding: 0 4px 12px; border: 0; border-radius: 0; box-shadow: none; }
  .r-dd-panel::before { display: none; }
  .r-dd-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .r-dd-panel a { white-space: normal; min-height: 44px; font-size: 16px; }
}
@media (max-width: 700px) {
  .r-nav { width: calc(100% - 32px); padding: 0 6px 0 16px; gap: 8px; }
  .r-logo img { height: 18px; }
  .r-nav-right { gap: 8px; }
  .r-nav .r-btn { height: 44px; min-height: 44px; padding: 0 12px; font-size: 15px; gap: 6px; }
  .r-nav .r-btn svg, .r-nav .r-phone { display: none; }
  .r-burger { width: 44px; height: 44px; }
  .r-nav-title { font-size: 13px; }
}
@media (max-width: 380px) {
  .r-nav { padding-left: 12px; }
  .r-logo img { height: 15px; }
  .r-nav .r-btn { padding: 0 10px; font-size: 14px; }
  .r-btns .r-btn { white-space: normal; text-align: center; }
}

/* ---- hero ---- */
.r-hero { position: relative; min-height: 810px; overflow: hidden; background: #FFFFFF; }
.r-hero__video { position: absolute; top: 0; left: calc(50% - 640px); width: 1440px; height: 810px; object-fit: cover; pointer-events: none; }
/* a still image in place of the video (a hub with no video); the video's own poster shows under reduced motion */
.r-hero__poster { position: absolute; top: 0; left: calc(50% - 640px); width: 1440px; height: 810px; object-fit: cover; }
.r-hero .r-grid { position: relative; padding-top: 40px; row-gap: 32px; }
.r-hero__copy { grid-column: 1 / span 7; }
.r-hero__form { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 16px; }
.r-hero--short { min-height: 0; padding-bottom: 72px; }
@media (max-width: 1279px) { .r-hero__form { grid-column: 1 / span 6; } }
@media (max-width: 1023px) {
  .r-hero { min-height: 0; display: flex; flex-direction: column; }
  .r-hero .r-grid { order: 1; }
  .r-hero__copy, .r-hero__form { grid-column: 1 / -1; }
  .r-hero__video, .r-hero__poster { position: relative; order: 2; left: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: 85% 50%; }
}

/* ---- form ---- */
.r-form { display: flex; flex-direction: column; gap: 20px; padding: 24px; background: #FFFFFF; border: 1px solid var(--r-line); border-radius: var(--r-radius); color: var(--r-ink); }
.r-form--on-navy { border: 0; }
.r-label { display: block; margin-bottom: 8px; font-size: var(--r-text); font-weight: 500; color: var(--r-navy); }
.r-money { position: relative; }
.r-money::before { content: "$"; position: absolute; left: 16px; top: 12px; font-size: var(--r-text); font-weight: 500; color: var(--r-ink); }
.r-input, .r-select { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--r-field); border-radius: var(--r-radius-sm); background: #FFFFFF; font-family: inherit; font-size: var(--r-text); color: var(--r-ink); }
.r-money .r-input { padding-left: 32px; font-weight: 500; }
.r-select { padding-right: 40px; -webkit-appearance: none; appearance: none; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23001C44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
textarea.r-input { height: auto; min-height: 120px; padding: 12px 16px; }
.r-range { width: 100%; margin: 14px 0 4px; accent-color: var(--r-navy); }
.r-scale { display: flex; justify-content: space-between; font-size: 14px; line-height: 1.5; color: var(--r-body); }
.r-fields-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 20px; }
.r-form__go { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.r-form__call { margin: 0; font-size: 14px; line-height: 1.5; color: var(--r-body); }
.r-form__call a:first-child { color: var(--r-blue); }
.r-reassure { margin: 0; font-size: 14px; line-height: 1.5; color: var(--r-body); }
.r-consent { margin: 0; font-size: 14px; line-height: 1.5; color: var(--r-body); }
.r-consent a { color: var(--r-navy); }
@media (max-width: 700px) {
  .r-form { padding: 16px; }
  .r-fields-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- stat row, panel line, logo strip ---- */
.r-proof { padding: 0 0 var(--r-pad); }
.r-proof .r-wrap { border-top: 1px solid var(--r-line); padding-top: 56px; }
.r-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-stat { padding: 0 24px; border-left: 1px solid var(--r-line); }
.r-stat:first-child { padding-left: 0; border-left: 0; }
.r-fig { margin: 0; font-size: var(--r-fig); line-height: 1.15; font-weight: 700; color: var(--r-navy); }
.r-lab { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--r-body); }
.r-panel-line { margin: 40px 0 20px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-body); }
/* The lender strip in its own band, below the first content section (round 2, R2-04, 8 Nov). */
.r-lenders-band { padding: var(--r-pad) 0; }
.r-lenders-band .r-panel-line { margin-top: 0; }
/* The client logos (round 2, R2-12, 8 Nov): still, greyscale, one row that wraps. */
.r-clients { padding: var(--r-pad) 0; }
.r-clients__head { margin: 0 0 32px; text-align: center; font-size: clamp(20px, 19px + 0.3vw, 24px); line-height: 1.3; font-weight: 700; color: var(--r-navy); text-wrap: balance; }
.r-clients__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: center; justify-items: center; gap: 16px 24px; }
.r-clients__list img { display: block; width: 100%; max-width: 132px; height: auto; filter: grayscale(1); opacity: 0.75; }
@media (max-width: 899px) { .r-clients__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; } }
@media (max-width: 700px) {
  .r-stats { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .r-stat { padding: 0 16px; }
  .r-stat:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ---- thin-rule lists ---- */
.r-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-bottom: 1px solid var(--r-line); }
.r-rules--one { grid-template-columns: minmax(0, 1fr); }
/* a list under a section's heading, with a card as the section's visual (Commercial's "A specialist", 6 Nov) */
.r-rules--in-text { margin-top: 28px; }
/* the near-form sentence (6 Nov, Matt's cost-of-service stance): above the reassurance line */
.r-paid-line { margin: 0; font-size: var(--r-text); font-weight: 600; line-height: 1.4; color: var(--r-navy); }
.r-cta .r-paid-line, .r-section--navy .r-paid-line { color: #FFFFFF; }
.r-faq__more { margin-top: 8px; }
.r-faq__more a { font-weight: 600; color: var(--r-blue); }
.r-visual--card { align-self: center; justify-self: end; width: 100%; max-width: 600px; }
@media (max-width: 1023px) { .r-visual--card { justify-self: stretch; max-width: none; } }
.r-rules > li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--r-line); }
.r-rules > li.r-rules__linked { display: block; padding: 0; }
.r-rule-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--r-pale); color: var(--r-blue); display: flex; align-items: center; justify-content: center; }
.r-rule-icon svg { width: 22px; height: 22px; }
.r-rule-num { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--r-blue); color: var(--r-blue); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.r-rule-body { display: flex; flex-direction: column; }
.r-rule-title { font-size: var(--r-text); line-height: 1.5; font-weight: 500; color: var(--r-navy); }
.r-rule-text { font-size: 14px; line-height: 1.5; color: var(--r-body); }
.r-rule-link { display: flex; align-items: center; gap: 12px; padding: 20px 0; text-decoration: none; }
.r-rule-link .r-rule-body { flex: 1; }
.r-rule-link .r-arrow { flex: none; color: var(--r-blue); transition: transform 0.2s; }
.r-rule-link:hover .r-rule-title { text-decoration: underline; text-underline-offset: 4px; }
.r-rule-link:hover .r-arrow { transform: translateX(3px); }
@media (max-width: 700px) { .r-rules { grid-template-columns: minmax(0, 1fr); } }

/* ---- the navy steps ---- */
.r-steps { list-style: none; margin: 32px 0 0; padding: 0; border-bottom: 1px solid var(--r-rule-navy); }
.r-steps > li { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-top: 1px solid var(--r-rule-navy); }
.r-steps .r-rule-num { border-color: var(--r-bright); color: var(--r-bright); }
.r-steps .r-step-title { font-size: var(--r-text); line-height: 1.5; font-weight: 500; color: #FFFFFF; }
.r-steps .r-step-text { margin-top: 4px; font-size: var(--r-text); line-height: 1.5; color: var(--r-on-navy); }
.r-steps .r-rule-body { flex: 1; }
/* Matt's line above step 1 (M9-2, site/processDiagramMarkup.mjs STEPS_START): the list's first row, unnumbered,
   an empty marker, so the list reads Start, 1, 2, 3 like the Journey's four boxes. */
.r-steps > li.r-steps__start { align-items: center; }
.r-steps__start .r-step-title { font-weight: 700; }
.r-dark-card { border: 1px solid var(--r-rule-navy); border-radius: var(--r-radius); padding: 24px; background: rgba(255, 255, 255, 0.03); display: flex; align-items: center; justify-content: center; align-self: stretch; }

/* ---- the how-it-works diagram: the seven-node process (round 1, S-08), in the round-1:fork-4 block below ---- */

/* ---- reviews ---- */
.r-reviews { padding: var(--r-pad) 0; background: var(--r-grey); }
.r-reviews__stars { display: block; font-size: 22px; }
.r-reviews .r-h2 { margin-top: 12px; }
.r-reviews .r-h2 a { color: var(--r-navy); text-decoration: none; }
.r-reviews .r-h2 a:hover, .r-reviews .r-h2 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.r-review-grid { position: relative; margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.r-review { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #FFFFFF; border: 1px solid var(--r-line); border-radius: var(--r-radius); }
.r-review:not([data-source]) { display: none; }   /* 07 rule 22: a review with no real source never shows */
.r-review blockquote { margin: 0; }
.r-review blockquote p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--r-ink); }
.r-review figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--r-body); }
.r-review figcaption b { font-size: 16px; color: var(--r-navy); }
@media (max-width: 1023px) and (min-width: 701px) { .r-review-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .r-review-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .r-review { scroll-snap-align: start; } }

/* ---- Connect's two invoices ---- */
.r-outcomes__title { margin: 0 0 20px; font-size: var(--r-text); line-height: 1.5; font-weight: 700; color: var(--r-navy); }
.r-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.r-outcome { display: flex; flex-direction: column; gap: 12px; }
.r-outcome__k { margin: 0; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-body); }
.r-outcome--with .r-outcome__k { color: var(--r-blue); }
.r-invoice { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #FFFFFF; border: 1px solid var(--r-line); border-radius: var(--r-radius); }
.r-outcome--with .r-invoice { border-color: var(--r-navy); }
.r-invoice__top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; color: var(--r-navy); }
.r-skel { display: block; height: 8px; border-radius: 4px; background: var(--r-line-2); }
.r-skel--tag { width: 56px; } .r-skel--60 { width: 60%; } .r-skel--56 { width: 56%; } .r-skel--50 { width: 50%; } .r-skel--42 { width: 42%; } .r-skel--40 { width: 40%; } .r-skel--18 { width: 18%; }
.r-invoice__lines { display: flex; flex-direction: column; gap: 8px; }
.r-invoice__rows { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.r-invoice__row { display: flex; justify-content: space-between; }
.r-invoice__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--r-line); font-size: 14px; color: var(--r-body); }
.r-invoice__total b { font-size: var(--r-fig); line-height: 1.15; color: var(--r-navy); }
.r-invoice__pay { height: 64px; border: 1px dashed var(--r-line); border-radius: var(--r-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--r-body); }
.r-invoice__qr { height: 64px; border-radius: var(--r-radius-sm); background: var(--r-pale); display: flex; align-items: center; gap: 12px; padding: 0 12px; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--r-navy); }
.r-outcome__result { margin: 0; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--r-ink); }
.r-outcome__result svg { flex: none; margin-top: 1px; }
@media (max-width: 700px) { .r-outcomes { grid-template-columns: minmax(0, 1fr); } .r-invoice__total b { font-size: 28px; } }

/* ---- how we're paid, and the FAQ ---- */
.r-faq { border-bottom: 1px solid var(--r-line); }
.r-faq__item { border-top: 1px solid var(--r-line); }
.r-faq__q { margin: 0; padding: 20px 0; font-size: var(--r-text); line-height: 1.5; font-weight: 500; color: var(--r-navy); }
.r-faq__a { margin: 0; padding: 0 36px 20px 0; font-size: var(--r-text); line-height: 1.5; color: var(--r-ink); }
@media (max-width: 700px) { .r-faq__a { padding-right: 0; } }

/* ---- the navy call-to-action band ---- */
.r-cta { background: var(--r-navy); color: #FFFFFF; }
.r-cta .r-grid { align-items: center; }
.r-cta .r-h2 { color: #FFFFFF; }
.r-cta .r-h2 .r-tone { color: var(--r-bright); }
.r-cta__reassure { margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: var(--r-on-navy); }
.r-cta__talk { margin: 20px 0 0; font-size: var(--r-text); line-height: 1.5; color: #FFFFFF; }
.r-cta__talk a { color: #FFFFFF; }
.r-cta__talk a[href^="tel:"] { font-weight: 700; }
.r-cta .r-form { border: 0; }
.r-cta__amount { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: center; }
.r-cta__amount .r-range { margin-top: 0; }
.r-cta__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; }
.r-cta__row .r-btn { height: 52px; }
@media (max-width: 900px) {
  .r-cta__amount, .r-cta__row { grid-template-columns: minmax(0, 1fr); }
  .r-cta__amount { gap: 14px; }
  .r-cta__row { gap: 20px; }
  .r-cta__row .r-btn { width: 100%; height: 48px; }
}

/* ---- footer ---- */
.r-footer { padding: var(--r-pad) 0 48px; background: var(--r-navy); color: var(--r-on-navy); border-top: 1px solid var(--r-rule-navy); font-size: 14px; line-height: 1.5; }
.r-footer a { color: var(--r-on-navy); text-decoration: none; }
.r-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.r-footer__top { margin-bottom: 48px; }
.r-footer__brand { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 20px; }
.r-footer__brand img { height: 26px; width: auto; align-self: flex-start; }
.r-footer__brand p { margin: 0; padding-right: 24px; }
.r-footer__contact { display: flex; flex-direction: column; gap: 4px; }
.r-footer__contact a[href^="tel:"] { font-size: var(--r-text); font-weight: 700; color: #FFFFFF; }
.r-footer__contact a[href^="mailto:"] { text-decoration: underline; }
.r-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-right: 24px; }
.r-pill { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; font-weight: 500; color: #FFFFFF; }
.r-footer__col { grid-column: span 2; }
.r-footer__head { margin: 0 0 12px; font-weight: 700; color: #FFFFFF; }
.r-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.r-footer__sub { margin-top: 8px; }
.r-footer__sub > a { font-weight: 500; color: #FFFFFF; }
.r-footer__sub ul { margin-top: 8px; padding-left: 12px; border-left: 1px solid var(--r-rule-navy); }
.r-footer .tf-footer-cookie-btn { display: block; min-height: 24px; padding: 0; margin-top: 8px; border: 0; background: none; font: inherit; font-size: 14px; line-height: 1.5; color: var(--r-on-navy); cursor: pointer; text-align: left; }
.r-footer .tf-footer-cookie-btn:hover { color: #FFFFFF; text-decoration: underline; }
.r-footer__legal { padding-top: 32px; border-top: 1px solid var(--r-rule-navy); display: flex; flex-direction: column; gap: 8px; color: var(--r-on-navy-2); }
.r-footer__legal p { margin: 0; }
.r-footer__legal a { color: #FFFFFF; text-decoration: underline; }
@media (max-width: 1023px) {
  .r-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .r-footer__brand { grid-column: 1 / -1; }
  .r-footer__col { grid-column: auto; }
}
@media (max-width: 700px) {
  .r-footer__top { grid-template-columns: minmax(0, 1fr); }
  .r-footer__col ul { gap: 0; }
  .r-footer__col a, .r-footer .tf-footer-cookie-btn { display: flex; align-items: center; min-height: 44px; }
  .r-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
}

/* ---- the phone's sticky bar (07 rule 28: hidden while a form is in view) ---- */
.r-sticky, .r-sticky.r-sticky--off { display: none; }
@media (max-width: 900px) {
  .r-sticky { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #FFFFFF; border-top: 1px solid var(--r-line); box-shadow: 0 -4px 16px rgba(0, 28, 68, 0.08); transform: translateY(110%); transition: transform 0.25s ease; }
  .r-sticky.is-shown { transform: none; }
  .r-sticky .r-btn { flex: 1; }
  .r-sticky.r-sticky--off { display: none; }
  .r-sticky .r-sticky__call { flex: none; width: 48px; min-height: 48px; border: 1px solid var(--r-navy); border-radius: var(--r-radius); display: flex; align-items: center; justify-content: center; color: var(--r-navy); }
}
@media (prefers-reduced-motion: reduce) { .r-sticky { transition: none; } }

/* ---- channel accents (07 H): only the eyebrow and the 4px rule under a hub H1 change ---- */
.r-accent-connect { --r-accent: var(--r-gold-text); --r-accent-rule: var(--r-gold); }
.r-accent-pp { --r-accent: var(--r-peach-text); --r-accent-rule: var(--r-peach); }

/* ---- the customer door bar (Connect hub) ---- */
.r-door { background: var(--r-pale); border-bottom: 1px solid var(--r-line); }
.r-door .r-wrap { min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; }
.r-door a { color: var(--r-navy); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }

/* ---- the old pages inside the new shell (Part B): their own content stays as it was, under the
   new type scale and the one navy primary button ---- */
.r-shell .btn-primary, .r-shell a.btn-primary { background: var(--r-navy); color: #FFFFFF; border-color: var(--r-navy); }
body.r-shell { font-size: var(--r-text); color: var(--r-ink); }
body.r-shell h1 { font-size: var(--r-h1); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
body.r-shell h2 { font-size: var(--r-h2); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.r-shell .r-trust, .r-shell .r-header, .r-shell .r-footer, .r-shell .r-sticky { font-family: var(--r-font); line-height: 1.5; }
.r-shell .r-trust a, .r-shell .r-footer__brand a { text-decoration: none; }
.r-shell .r-footer__contact a[href^="mailto:"] { text-decoration: underline; }
.r-shell .r-header img, .r-shell .r-footer img { max-width: none; }
.r-shell .r-dd-panel ul, .r-shell .r-footer ul { list-style: none; }

/* ---- hub additions (08): split hero, side visual, phone mock, flow, pair cards, CTA card ---- */
.r-hero--split .r-hero__copy, .r-hero--split .r-hero__form { grid-column: 1 / span 5; }
.r-hero__side { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: center; }
.r-hero--split .r-hero__side .r-form { width: 100%; }
.r-hero__trust { margin: 0; font-size: 14px; line-height: 1.5; color: var(--r-body); }
.r-hero__trust a { color: var(--r-navy); }
@media (max-width: 1023px) { .r-hero__side { grid-column: 1 / -1; grid-row: auto; } }
.r-phone-mock { width: 300px; max-width: 100%; margin: 0 auto; padding: 16px 14px 24px; border: 1px solid var(--r-line); border-radius: 36px; background: var(--r-grey); box-shadow: 0 24px 60px rgba(0, 28, 68, 0.12); }
.r-phone-mock__bar { width: 72px; height: 6px; margin: 0 auto 14px; border-radius: 3px; background: var(--r-line); }
.r-phone-mock .r-invoice__qr { outline: 2px solid var(--r-accent-rule); outline-offset: 2px; }
/* Connect's flow (6 Nov): four boxes stacked down the card, joined by lines, so it fills the card
   beside the four steps at any width. Builds once in view (redesign.js); built from the start for
   reduced motion, without JavaScript and in print. */
.r-flow { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 40px; }
.r-flow li { position: relative; min-height: 96px; padding: 16px 20px; border: 1px solid var(--r-rule-navy); border-radius: var(--r-radius); background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 14px; line-height: 1.4; color: var(--r-on-navy); }
.r-flow li b { font-size: 16px; color: #FFFFFF; }
.r-flow li + li::before { content: ""; position: absolute; left: 50%; top: -41px; width: 0; height: 40px; border-left: 1.5px solid var(--r-bright); opacity: 0.7; transform-origin: top center; }
.r-flow li.r-flow__hub { border: 2px solid var(--r-bright); background: var(--r-node); box-shadow: rgba(0, 176, 255, 0.1) 0 0 0 8px; flex-direction: row; gap: 12px; }
.r-flow li.r-flow__hub img { height: 40px; width: auto; }
.r-flow li.r-flow__paid { background: #FFFFFF; border-color: #FFFFFF; color: var(--r-ink); }
.r-flow li.r-flow__paid b { color: var(--r-navy); }
.r-flow.is-ready li { opacity: 0; transform: translateY(10px); }
.r-flow.is-ready li + li::before { transform: scaleY(0); }
.r-flow.is-drawn li { opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.r-flow.is-drawn li + li::before { transform: scaleY(1); transition: transform 0.35s ease; }
.r-flow.is-drawn li:nth-child(2)::before { transition-delay: 0.35s; } .r-flow.is-drawn li:nth-child(2) { transition-delay: 0.6s; }
.r-flow.is-drawn li:nth-child(3)::before { transition-delay: 0.95s; } .r-flow.is-drawn li:nth-child(3) { transition-delay: 1.2s; }
.r-flow.is-drawn li:nth-child(4)::before { transition-delay: 1.55s; } .r-flow.is-drawn li:nth-child(4) { transition-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) { .r-flow.is-ready li { opacity: 1; transform: none; } .r-flow.is-ready li + li::before { transform: none; } }
@media print { .r-flow.is-ready li { opacity: 1 !important; transform: none !important; } .r-journey { --p: 1 !important; } }
@media (max-width: 700px) { .r-flow { gap: 28px; } .r-flow li { min-height: 80px; } .r-flow li + li::before { top: -29px; height: 28px; } }
.r-pair__big { display: block; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--r-navy); }
.r-pair__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--r-body); }
.r-cta__card { padding: 24px; background: #FFFFFF; border-radius: var(--r-radius); color: var(--r-ink); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.r-cta__card p { margin: 0; font-size: var(--r-text); line-height: 1.5; }
.r-center { text-align: center; }
.r-center .r-h2, .r-center .r-body { margin-left: auto; margin-right: auto; }
.r-center .r-btns { justify-content: center; }
.r-industries { margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: var(--r-body); }
.r-industries b { color: var(--r-navy); }
.r-preview-note { margin: 0; padding: 12px 14px; border-radius: var(--r-radius-sm); background: var(--r-pale); font-size: 14px; line-height: 1.5; color: var(--r-navy); }
.r-preview-note[hidden] { display: none; }
.r-hidden { display: none !important; }
.r-cta__row--two { grid-template-columns: 1fr auto; }
@media (max-width: 900px) { .r-cta__row--two { grid-template-columns: minmax(0, 1fr); } }
.r-fields-2 { align-items: end; }
/* a hero video whose subject sits further left (Connect's invoices): shifted right, with a white fade
   under the copy so the text stays readable over it */
.r-hero__video--right { left: calc(50% - 360px); }
.r-hero__fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #FFFFFF 0, #FFFFFF calc(50% - 160px), rgba(255, 255, 255, 0.7) calc(50% - 40px), rgba(255, 255, 255, 0) calc(50% + 120px)); }
@media (max-width: 1023px) { .r-hero__fade { display: none; } .r-hero__video--right { left: auto; } }
/* No visible pause controls since Matt's 9 Nov email (round 3, point 1: "No need for them"; accepted by
   Jana): the hero's button is gone, and the lender logos' toggle stays only on the send pages held until
   Wed 11 Nov (site/lenderStripMarkup.mjs HELD_PATHS), styled as on 7 Nov: a 44px icon-only navy button,
   60% at rest, full on hover and focus. Drop these rules with the hold. */
.r-logos__pause { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--r-navy); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 4px 16px rgba(0, 28, 68, 0.2); color: #FFFFFF; opacity: 0.6; cursor: pointer; transition: opacity 0.15s ease; }
.r-logos__pause:hover, .r-logos__pause:focus-visible { opacity: 1; }
.r-logos__pause:focus-visible { outline: 3px solid var(--r-blue); outline-offset: 2px; }
.r-logos__pause svg { flex: none; }
.r-logos__pause .r-logos__play-i { display: none; }
.r-logos__pause[aria-pressed="true"] .r-logos__pause-i { display: none; }
.r-logos__pause[aria-pressed="true"] .r-logos__play-i { display: block; }
.r-hero__copy .r-reassure { margin-top: 16px; }
@media (max-width: 420px) { .r-nav-title ~ .r-nav-right .r-phone--keep span { display: none; } .r-nav-title { line-height: 1.3; } }

/* The report section's three points and its How it works button (6 Nov) */
.r-rules--report { margin-top: 24px; }
.r-rules--report > li { padding: 14px 0; align-items: center; }
.r-rules--report .r-rule-icon { width: 32px; height: 32px; border-radius: 8px; }
.r-rules--report .r-rule-icon svg { width: 18px; height: 18px; }
.r-actions { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Any width (Jana, 6 Nov: "resizable depending on browser ... pretty no matter how small") ----
   The older pages' own layouts, until each is redesigned in P7, where a 320 to 1920px sweep found
   them wider than the window or text spilling out of its box. Each rule names what it fixes. */
/* Calculator results: two columns of figures didn't fit at 320px; the big figure scales down */
@media (max-width: 420px) {
  body .cp-calc-out, body .pp-calc-out { grid-template-columns: minmax(0, 1fr) !important; }
  body .cp-calc-out-cell:first-child, body .pp-calc-out-cell:first-child { padding: 20px; }
  body .cp-calc-out-cell:first-child .cp-calc-out-value, body .pp-calc-out-cell:first-child .pp-calc-out-value { font-size: clamp(1.5rem, 8vw, 2.4rem); }
}
/* Compare Report page: the three "why it's different" cards and the four figures */
@media (max-width: 560px) {
  body .cr-grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
  body .cr-metric-num { font-size: clamp(1.4rem, 6.5vw, 2rem); }
}
/* Invoice vs debtor finance guide: the worked example's two boxes stack */
@media (max-width: 560px) {
  body .ga-worked-example div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
}
/* About: the platform's six steps, two a row on a phone */
@media (max-width: 480px) {
  body .au-rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Terms: the liability table's label and value stack */
@media (max-width: 560px) {
  body .lg-table-row { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; }
}
/* For vendors: the three trust cards' small labels wrap inside their card */
@media (max-width: 420px) {
  body [style*="padding:26px"] > div { overflow-wrap: anywhere; }
}
/* Campaign pages: the hero figures ("Access", "$1B+") never wider than their column */
body .lp-hero-stat-value { overflow-wrap: normal; }
@media (max-width: 700px) { body .lp-hero-stat-value { flex: none; } }
@media (min-width: 701px) { body .lp-hero-stat-value { font-size: clamp(1.8rem, 3.1vw, 2.5rem); } }

/* ---- Fit and alignment (6 Nov) ---- */
/* Jana (6 Nov): Home's split sections are "so compressed together", and "across the whole site
   pivot - fix all alignments". The shell's side margin is --r-side: 16px to 700px, then --r-edge
   (24px), the same as .r-wrap and the pill nav. Older pages' containers are pulled onto it. */
:root { --r-side: var(--r-edge); }
@media (max-width: 700px) { :root { --r-side: 16px; } }

/* Split sections: a clear gutter between the text and its visual (the grid's own gap was 24px).
   The text column gives up the room, so the visuals keep their width: 48px of gutter at 1024px,
   64px from 1440px. */
@media (min-width: 1024px) {
  .r-section > .r-wrap.r-grid > .r-text { padding-right: clamp(24px, 3.85vw - 15.4px, 40px); }
}

/* The navy steps' diagram card fits its diagram and sits centred beside the steps, instead of
   stretching to the text's height */
.r-section .r-dark-card { align-self: center; padding: 32px 24px; }
@media (max-width: 1023px) { .r-section .r-dark-card { padding: 32px 16px; } }

/* The older pages' containers on the shell's edge: their content started 24px inside the menu and
   footer at desktop, 8px on a phone. A container's own narrower max-width (a centred block) stays. */
.r-shell .container, .r-shell .container-wide { max-width: calc(var(--r-wrap) + 2 * var(--r-side)); }
body.r-shell .container, body.r-shell .container-wide, body.r-shell .container-prose { padding-left: var(--r-side); padding-right: var(--r-side); }

/* Legal pages: the title block started 24px left of the text below it */
body .lg-hero { padding-left: var(--r-side); padding-right: var(--r-side); }
body .lg-hero > div { max-width: calc(var(--max-width-prose) - 2 * var(--r-side)) !important; }
body .lg-jump-inner, body .lg-main { padding-left: var(--r-side); padding-right: var(--r-side); }

/* Apply: the form and its report panel ran from 40px to 24px off the window's edges, wider than the
   menu above them */
body .ap-layout { max-width: calc(var(--r-wrap) + 2 * var(--r-side)); margin-left: auto; margin-right: auto; padding-left: var(--r-side); padding-right: var(--r-side); column-gap: 40px; }
body .ap-form-panel { padding-left: 0; padding-right: 0; }
body .ap-report-panel { margin-right: 0; }
@media (max-width: 900px) { body .ap-report-panel { margin-left: 0; margin-right: 0; } }

/* Sections and bands that padded their container from the sides a second time (About, Careers,
   Partner with us, Broker portal, Contact's desk band, the guides' title and closing bands): the
   container's own padding is the edge */
body :is(.au-section, .bp-section, .bp-desk, .ct-desk):has(> :is(.container, .container-prose, .container-wide)) { padding-left: 0; padding-right: 0; }
body.r-shell :is(header, section)[style*="padding:"]:has(> :is(.container, .container-prose, .container-wide)) { padding-left: 0 !important; padding-right: 0 !important; }
/* containers with their own side padding written on the element (About's and Careers' title blocks) */
body.r-shell :is(.container, .container-prose, .container-wide)[style*="padding:"] { padding-left: var(--r-side) !important; padding-right: var(--r-side) !important; }
/* Connect FAQs: the question groups sat 12px left of the title above them */
body .faq-group { max-width: var(--max-width-prose); padding-left: var(--r-side); padding-right: var(--r-side); }

/* Guides: the article and its "On this page" rail ran from 52px, outside the menu's edge, and the
   article sat 16px left of the key takeaways above it. From 1200px the rail sits on the shell's edge
   and the article in the centred column the title and takeaways use; below that, the rail goes
   above the article (as it already did below 900px) */
body .ga-layout { max-width: var(--max-width-prose); padding-left: var(--r-side); padding-right: var(--r-side); }
@media (min-width: 1200px) {
  body .ga-layout { max-width: calc(var(--r-wrap) + 2 * var(--r-side)); grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--max-width-prose) - 2 * var(--r-side))) minmax(0, 1fr); column-gap: 0; }
  body .ga-rail { margin-right: 40px; }
  body .ga-body { max-width: none; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  body .ga-layout { grid-template-columns: minmax(0, 1fr); }
  body .ga-rail { position: static; border-right: none; padding-right: 0; flex-direction: row; flex-wrap: wrap; column-gap: 20px; border-bottom: 1px solid var(--border-neutral); padding-bottom: 16px; }
}

/* Legal pages' definition boxes: the 220px label column left the value a few words wide on a phone */
@media (max-width: 560px) {
  body .lg-kv-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px; }
}
/* the rail's "On this page" label on its own line when the rail runs across the page */
@media (max-width: 1199px) { body .ga-rail-label { flex-basis: 100%; margin-bottom: 4px; } }

/* The text columns are narrower for the gutter: no single word left on a paragraph's last line */
.r-section .r-text :is(.r-body, .r-sub, .r-small, .r-lead) { text-wrap: pretty; }

/* The kit page's narrow demos and contents bar on the shell's edge (the demos sat 24px in on a phone) */
body .kit-narrow { margin-left: max(var(--r-side), calc((100% - var(--r-wrap)) / 2)); }
body .kit-toc ul { width: min(var(--r-wrap), calc(100% - 2 * var(--r-side))); }

/* Contact's "Prefer to talk right away?" band: on a phone the number and email broke mid-word beside
   their label, so the three stack */
@media (max-width: 560px) {
  body .ct-desk-inner > div { flex-direction: column; align-items: flex-start; gap: 4px; }
  body .ct-desk-inner > div > span[style*="border-neutral"] { display: none; }
}

/* Matt's review round 1 (7 Nov 2026): one block per part, so each is found and changed in one place. */


/* round-1:fork-1 the shell: S-01, S-02, S-03, S-11, S-14, PP-01  */
/* S-03 (build note 1): an area's logo carries its line under the wordmark; at these heights the wordmark
   itself is the same size as on every other page (logo-navy.png is the wordmark alone). */
.r-logo--area img { height: 26px; }
@media (max-width: 700px) { .r-logo--area img { height: 21px; } }
@media (max-width: 380px) { .r-logo--area img { height: 18px; } }

/* S-14: the W3C disclosure-navigation hybrid. The label is a link to its page; the caret beside it is
   its own 44px button that opens the drop-down. The pair reads as one pill. */
.r-dd-pair { display: inline-flex; align-items: center; border-radius: 999px; }
.r-dd--split .r-dd-link { padding-right: 0; }
.r-dd-pair .r-menu-link:hover { background: none; }
.r-dd-pair:hover, .r-dd--split.is-open .r-dd-pair { background: var(--r-grey); }
.r-dd-caret { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--r-navy); cursor: pointer; }
.r-dd-caret:focus-visible, .r-dd-link:focus-visible { outline: 3px solid var(--r-blue); outline-offset: 2px; }
@media (hover: hover) and (min-width: 1024px) { .r-dd--split:hover .r-dd-pair { background: var(--r-grey); } }

/* S-02 and PP-03: the page itself as the first row, Personal & Property as the last, full-width row. */
.r-dd-row { margin: 0; font-size: 14px; line-height: 1.5; }
.r-dd-row a { display: flex; align-items: center; min-height: 44px; }
.r-dd-row--first { margin-bottom: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--r-line-2); }
.r-dd-row--first a { font-weight: 700; }
.r-dd-row--last { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--r-line-2); }
.r-dd-panel .r-dd-row--last a { font-weight: 400; white-space: normal; }

@media (max-width: 1023px) {
  /* The phone menu: the label links, the caret expands. */
  .r-dd-pair { display: flex; width: 100%; border-radius: 0; }
  .r-dd-pair:hover, .r-dd--split.is-open .r-dd-pair { background: none; }
  .r-dd-pair .r-menu-link { flex: 1 1 auto; width: auto; justify-content: flex-start; }
  .r-dd-caret { width: 52px; height: 52px; border-radius: 0; }
}

/* S-11: Connect's and Personal & Property's links in the footer, each under its own link with a short
   rule in its colour. The rule is decorative: the link's text names the area. */
.r-footer__group { display: flex; flex-direction: column; }
.r-footer__group + .r-footer__group { margin-top: 16px; }
.r-footer a.r-footer__group-head { font-size: 14px; font-weight: 700; color: #FFFFFF; }
.r-footer__rule { display: block; width: 32px; height: 3px; margin: 6px 0 2px; border-radius: 2px; }
.r-footer__group--gold .r-footer__rule { background: var(--r-gold); }
.r-footer__group--peach .r-footer__rule { background: var(--r-peach); }
.r-footer .r-footer__group ul { margin-top: 8px; padding-left: 0; border-left: 0; }
@media (max-width: 599px) { .r-footer__rule { margin-top: 0; } }
/* /round-1:fork-1  */




/* round-1:fork-2 the lender logos: S-16, S-13  */
/* The lender logo strip (S-16, S-13; site/lenderStripMarkup.mjs): a screen-reader list of the 66, and two
   rows that drift in opposite directions, two minutes a loop (round 3). Hover or keyboard focus pauses
   them. Under reduced motion nothing moves and the rows wrap into a still grid (no sideways scroll). */
.r-logos { display: flex; align-items: center; gap: 16px; }
.r-logos__names { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; list-style: none; }
.r-logos__rows { flex: 1 1 auto; min-width: 0; display: grid; row-gap: 24px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.r-logos__row { overflow: hidden; }
.r-logos__track { list-style: none; margin: 0; padding: 0 48px 0 0; display: flex; align-items: center; gap: 48px; width: max-content; animation: r-logos-left 120s linear infinite; }
/* Half the speed since Matt's 9 Nov email (round 3, point 2): two minutes a loop. The held send pages
   (the strip that still has its toggle) keep a minute until Wed 11 Nov. */
.r-logos:has(> .r-logos__pause) .r-logos__track { animation-duration: 60s; }
/* Keyboard focus pauses the strip (one tab stop, round 3), with a ring only for the keyboard. */
.r-logos[tabindex]:focus { outline: none; }
.r-logos[tabindex]:focus-visible { outline: 3px solid var(--r-blue); outline-offset: 4px; border-radius: 8px; }
.r-logos__row--1 .r-logos__track { animation-name: r-logos-right; }
.r-logos__track li { flex: none; }
.r-logos img { display: block; max-width: none; height: auto; filter: grayscale(1); opacity: 0.6; }
.r-logos.is-paused .r-logos__track, .r-logos:hover .r-logos__track, .r-logos:focus-within .r-logos__track { animation-play-state: paused; }
/* The held send pages' toggle (the rule above). */
.r-logos__pause { flex: none; }
@keyframes r-logos-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes r-logos-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 700px) {
  .r-logos { flex-direction: column; align-items: stretch; }
  /* 24px logos and 32px gaps on a phone: the rows are drawn at 6/7 of their desktop size. */
  .r-logos__rows { zoom: 0.857; row-gap: 20px; }
  .r-logos__track { gap: 37px; padding-right: 37px; }
  .r-logos__pause { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .r-logos__rows { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .r-logos__row { overflow: visible; }
  .r-logos .r-logos__track { animation: none !important; transform: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 20px 32px; padding: 0; }
  .r-logos__track .r-logos__dup { display: none; }
  .r-logos__pause { display: none; }
}
/* /round-1:fork-2  */




/* round-1:fork-3 the sample report: S-07, B-05  */
/* /round-1:fork-3  */




/* round 2 (R2-05, P2-2, 8 Nov): the process graphic is the Journey (site/processDiagramMarkup.mjs), from
   Matt's "The Journey (left to right)": the need, then the three steps. Four columns under a track from
   1024px; stacked, the track down the left, below that. Complete by default; with motion allowed it fills
   as the visitor scrolls through it (redesign.js), never on a timer. A stage still to come keeps its text
   at full contrast: only its border, marker and the track show it pending. */
.r-how-steps .r-steps { margin-top: 0; }
.r-proc-wrap { margin-top: 48px; }
.r-section .r-proc-card { display: block; padding: 28px 24px; }
.r-journey { --p: 1; position: relative; }
.r-journey__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.r-journey__stage { position: relative; min-width: 0; margin-top: 44px; padding: 18px 16px 20px; border: 1px solid var(--r-bright); border-radius: var(--r-radius-sm); background: var(--r-node); display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--r-on-navy); transition: border-color 0.35s ease, background-color 0.35s ease; }
.r-journey__dot { position: absolute; top: -44px; left: 14px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--r-bright); border-radius: 50%; background: var(--r-bright); color: var(--r-navy); transition: background-color 0.35s ease; }
.r-journey__dot svg { transition: opacity 0.35s ease; }
.r-journey__tag { font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--r-bright); }
.r-journey__title { font-size: 17px; line-height: 1.3; font-weight: 600; color: #FFFFFF; }
.r-journey__text { display: block; }
.r-journey__facts { margin: 2px 0 0; display: grid; gap: 6px; }
.r-journey__facts div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.r-journey__facts dt { margin: 0; }
.r-journey__facts dd { margin: 0; font-weight: 600; color: #FFFFFF; text-align: right; }
.r-journey__chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.r-journey__chips li { padding: 3px 8px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; background: rgba(255, 255, 255, 0.06); font-size: 13px; line-height: 1.35; }
.r-journey__tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-top: 2px; }
.r-journey__tiles i { display: block; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.r-journey__tiles i.is-match { background: var(--r-bright); }
.r-journey__ticks { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.r-journey__ticks li { display: flex; align-items: center; gap: 8px; }
.r-journey__ticks svg { flex: none; color: var(--r-bright); }
/* the track: a line through the markers, lit up to where Cashper is */
.r-journey__track { position: absolute; top: 13px; left: 28px; right: calc(25% - 43px); height: 2px; border-radius: 2px; background: var(--r-rule-navy); }
.r-journey__beam { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: 2px; background: var(--r-bright); }
.r-journey__ghost { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 22px; height: auto; transform: translate(-50%, -112%); }
@media (min-width: 1024px) and (max-width: 1199px) { .r-journey__list { gap: 16px; } .r-journey__stage { padding: 16px 14px 18px; } .r-journey__title { font-size: 16px; } }
@media (max-width: 1023px) {
  .r-proc-wrap { margin-top: 32px; }
  .r-section .r-proc-card { padding: 24px 16px; }
  .r-journey { max-width: 560px; margin: 0 auto; }
  .r-journey__list { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-left: 44px; }
  .r-journey__stage { margin-top: 0; }
  .r-journey__dot { top: 16px; left: -44px; }
  .r-journey__track { top: 30px; bottom: 30px; left: 13px; right: auto; width: 2px; height: auto; }
  .r-journey__beam { inset: 0 0 auto 0; width: auto; height: calc(var(--p) * 100%); }
  .r-journey__ghost { top: calc(var(--p) * 100%); left: 50%; transform: translate(-50%, -50%); }
}
/* pending: only while it fills on screen; print and reduced motion show it complete */
@media screen {
  .r-journey.is-live .r-journey__stage:not(.is-done) { border-style: dashed; border-color: var(--r-rule-navy); background: rgba(255, 255, 255, 0.03); }
  .r-journey.is-live .r-journey__stage:not(.is-done) .r-journey__dot { background: var(--r-navy); }
  .r-journey.is-live .r-journey__stage:not(.is-done) .r-journey__dot svg { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .r-journey__stage, .r-journey__dot, .r-journey__dot svg { transition: none; } }
/* /round-1:fork-4  */




/* round-1:fork-5 Connect: C-02, CC-03, H-09, C-03, CC-02  */
/* The Connect invoice (site/invoiceMockMarkup.mjs): the monthly line under the total, the QR tile with the
   Trade Funding Connect logo, and the footnote under the drawings that gives the figure's basis. */
.r-invoice__monthly { margin: -8px 0 0; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--r-navy); text-align: right; }
.r-invoice__qr { height: auto; min-height: 64px; padding: 10px 12px; }
.r-invoice__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.r-invoice__logo { display: block; width: 160px; max-width: 100%; height: auto; }
.r-phone-mock .r-invoice__logo { width: 136px; }
.r-invoice__total { gap: 12px; }
@media (max-width: 360px) { .r-phone-mock .r-invoice { padding: 18px; } .r-phone-mock .r-invoice__total b { font-size: 24px; } .r-phone-mock .r-invoice__qr { flex-direction: column; align-items: flex-start; padding: 12px; } }
.r-invoice-note { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--r-body); }
.r-hero__side .r-invoice-note { max-width: 300px; margin: 16px auto 0; text-align: center; }
/* Connect's five steps as a flow (C-03): five boxes, a little tighter, built in turn on scroll. */
.r-flow--five { gap: 32px; }
.r-flow--five li { min-height: 80px; padding: 12px 20px; }
.r-flow--five li + li::before { top: -33px; height: 32px; }
.r-flow.is-drawn li:nth-child(5)::before { transition-delay: 2.15s; } .r-flow.is-drawn li:nth-child(5) { transition-delay: 2.4s; }
@media (max-width: 700px) { .r-flow--five { gap: 24px; } .r-flow--five li { min-height: 68px; } .r-flow--five li + li::before { top: -25px; height: 24px; } }
/* /round-1:fork-5  */




/* round-1:fork-6 forms and fee copy: S-04, S-05, S-06, S-09, S-10, C-06, HP-01  */
/* S-09: the hero pause control was restyled here (removed in round 3, Matt's 9 Nov email). S-04: the short forms' purpose now sits alone in
   .r-fields-2 and the closing forms use .r-cta__row--two, both existing rules. */
/* /round-1:fork-6  */






/* rest:phase-a the kit's page blocks for the rest of the site (site/kit/blocks.mjs; docs/redesign-rest/phase-a.md) */
/* The hero on a kit page: no video, so it sizes to its content. Split: copy (and the form) left, one
   visual right; on a campaign page the form card is the visual. */
.r-hero--kit { min-height: 0; padding-bottom: var(--r-pad); }
.r-hero--kit .r-grid { padding-top: 24px; }
.r-hero--kit.r-hero--short { padding-bottom: var(--r-pad); }
.r-hero--kit .r-hero__copy { grid-column: 1 / span 7; }
.r-hero--kit.r-hero--split .r-hero__copy, .r-hero--kit.r-hero--split .r-hero__form { grid-column: 1 / span 5; }
.r-hero--kit .r-hero__side { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: start; min-width: 0; }
.r-hero--kit .r-hero__side--logos { align-self: center; }
.r-hero--kit .r-lead { max-width: 40ch; }
.r-hero--kit .r-hero__copy > .r-body { max-width: 52ch; }
.r-hero__meta { margin: 16px 0 0; font-size: var(--r-small); line-height: 1.5; color: var(--r-body); }
.r-pills-row { list-style: none; margin: 24px 0 0; padding: 0; border-bottom: 1px solid var(--r-line); }
.r-pills-row li { padding: 12px 0; border-top: 1px solid var(--r-line); font-size: var(--r-text); line-height: 1.5; font-weight: 500; color: var(--r-navy); }
.r-pills-row li strong { font-weight: 700; }
@media (max-width: 1279px) { .r-hero--kit.r-hero--split .r-hero__copy, .r-hero--kit.r-hero--split .r-hero__form { grid-column: 1 / span 6; } }
@media (max-width: 1023px) {
  .r-hero--kit .r-hero__copy, .r-hero--kit.r-hero--split .r-hero__copy, .r-hero--kit.r-hero--split .r-hero__form, .r-hero--kit .r-hero__side { grid-column: 1 / -1; grid-row: auto; }
  /* A campaign page on a phone: heading and lead, then the form, then the offer's facts (T-A). */
  .r-hero--kit:has(.r-hero__side--form) .r-grid { row-gap: 0; }
  .r-hero--kit:has(.r-hero__side--form) .r-hero__copy { display: contents; }
  .r-hero--kit .r-hero__side--form { order: 1; margin-top: 28px; }
  .r-hero--kit:has(.r-hero__side--form) .r-pills-row { order: 2; margin-top: 28px; }
}

/* The breadcrumb over a hero's eyebrow (the page it marks up as BreadcrumbList). */
.r-crumbs { margin: 0 0 16px; font-size: var(--r-small); line-height: 1.5; color: var(--r-body); }
.r-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.r-crumbs li { display: inline-flex; align-items: center; }
.r-crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--r-field); }
.r-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--r-body); text-decoration: underline; text-underline-offset: 3px; }
.r-crumbs a:hover { color: var(--r-navy); }
.r-crumbs [aria-current] { color: var(--r-navy); font-weight: 500; }

/* A featured link card (a hero's visual: the featured guide). */
.r-feature { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--r-line); border-radius: var(--r-radius); background: #FFFFFF; text-decoration: none; color: var(--r-ink); }
.r-feature .r-eyebrow { margin: 0; }
.r-feature__title { font-size: var(--r-h2); line-height: 1.2; font-weight: 700; color: var(--r-navy); }
.r-feature__text { font-size: var(--r-text); line-height: 1.5; color: var(--r-body); }
.r-feature__go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; color: var(--r-blue); }
.r-feature:hover .r-feature__title { text-decoration: underline; text-underline-offset: 4px; }
.r-feature:focus-visible { outline: 3px solid var(--r-blue); outline-offset: 2px; }

/* The facts panel (T-A, T-C): a definition list in up to five columns, divided like the stat row. */
.r-facts-band { padding: 0 0 var(--r-pad); }
.r-facts-band .r-wrap { border-top: 1px solid var(--r-line); padding-top: 40px; }
.r-facts__head { margin: 0 0 20px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-body); }
.r-facts { margin: 0; display: grid; grid-template-columns: repeat(var(--r-facts-n, 4), minmax(0, 1fr)); }
.r-facts--2 { --r-facts-n: 2; } .r-facts--3 { --r-facts-n: 3; } .r-facts--4 { --r-facts-n: 4; } .r-facts--5 { --r-facts-n: 5; }
.r-fact { padding: 0 24px; border-left: 1px solid var(--r-line); min-width: 0; }
.r-fact:first-child { padding-left: 0; border-left: 0; }
.r-fact dt { margin: 0; font-size: var(--r-small); line-height: 1.5; color: var(--r-body); }
.r-fact dd { margin: 6px 0 0; font-size: clamp(16px, 15.11px + 0.225vw, 18px); line-height: 1.4; font-weight: 700; color: var(--r-navy); overflow-wrap: break-word; }
.r-facts__caption { margin: 24px 0 0; font-size: var(--r-small); line-height: 1.5; color: var(--r-body); max-width: 80ch; }
@media (max-width: 1023px) { .r-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } .r-fact:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 420px) { .r-facts { grid-template-columns: minmax(0, 1fr); } .r-fact { padding: 0 0 0 16px; border-left: 3px solid var(--r-line); } .r-fact:nth-child(odd), .r-fact:first-child { padding-left: 16px; border-left: 3px solid var(--r-line); } }

/* A heading over a full-width list (stacked) and groups of lists under small headings. */
.r-stack { max-width: 62ch; }
.r-stack .r-text { grid-column: auto; }
.r-stack__list, .r-groups, .r-report-full, .r-logos-full { margin-top: 40px; }
.r-groups { display: grid; grid-template-columns: repeat(var(--r-groups-n, 2), minmax(0, 1fr)); gap: 40px 24px; }
.r-groups--1 { --r-groups-n: 1; margin-top: 0; } .r-groups--2 { --r-groups-n: 2; } .r-groups--3 { --r-groups-n: 3; }
.r-group { min-width: 0; }
.r-group__head { margin: 0 0 12px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-body); }
.r-group__text { margin: -4px 0 12px; }
@media (max-width: 1023px) { .r-groups--3 { --r-groups-n: 2; } }
@media (max-width: 700px) { .r-groups { grid-template-columns: minmax(0, 1fr); } }

/* Suits / usually not (T-C). */
.r-suits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.r-suits__col { min-width: 0; }
.r-rule-icon--cross { background: var(--r-grey); color: var(--r-field); }
.r-section--grey .r-rule-icon--cross { background: #FFFFFF; }
@media (max-width: 700px) { .r-suits { grid-template-columns: minmax(0, 1fr); } }

/* A table with its caption, in a scroll container that a keyboard can reach (T-C's versus table). */
.r-table { overflow-x: auto; border: 1px solid var(--r-line); border-radius: var(--r-radius); background: #FFFFFF; }
.r-table:focus-visible { outline: 3px solid var(--r-blue); outline-offset: 2px; }
.r-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--r-text); line-height: 1.45; }
.r-table caption { padding: 16px 20px 0; text-align: left; font-size: var(--r-small); font-weight: 700; color: var(--r-body); caption-side: top; }
.r-table th, .r-table td { padding: 14px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--r-line-2); }
.r-table thead th { border-top: 0; font-size: var(--r-small); font-weight: 700; color: var(--r-navy); }
.r-table tbody th { font-weight: 500; color: var(--r-navy); }
.r-table td { color: var(--r-ink); }
.r-table thead th:nth-child(2), .r-table td:nth-child(2) { background: var(--r-pale); }

/* Label and value lines (What it costs, Who qualifies). */
.r-lines { margin: 0; border-bottom: 1px solid var(--r-line); }
.r-line { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 24px; padding: 16px 0; border-top: 1px solid var(--r-line); }
.r-line dt { margin: 0; font-weight: 500; color: var(--r-navy); }
.r-line dd { margin: 0; color: var(--r-ink); }
.r-lines__after { margin-top: 24px; }
@media (max-width: 560px) { .r-line { grid-template-columns: minmax(0, 1fr); } }

/* Prose on its own (About's what we do, Built by lenders): a readable measure. */
.r-prose-col { max-width: 70ch; }
.r-prose-col .r-body { max-width: none; }
.r-stats--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
.r-stats--pair .r-stat:nth-child(3) { padding-left: 24px; border-left: 1px solid var(--r-line); }

/* Doors (T-I): a row per kind of partner, its button at the end. */
.r-doors > li.r-door-row { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.r-door-row .r-rule-body { flex: 1 1 260px; }

/* The lender panel's still grid of every logo (R-33), under the moving strip. */
.r-logo-grid { list-style: none; margin: 40px 0 0; padding: 32px 0 0; border-top: 1px solid var(--r-line); display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 32px 24px; align-items: center; }
.r-logo-grid li { display: flex; align-items: center; justify-content: center; min-height: 48px; }
.r-logo-grid img { display: block; max-width: 100%; height: auto; filter: grayscale(1); opacity: 0.75; }

/* A calculator card (T-C, T-F): the inputs with their values, the results, the note. */
.r-calc { display: flex; flex-direction: column; gap: 24px; padding: 28px; border: 1px solid var(--r-line); border-radius: var(--r-radius); background: #FFFFFF; }
.r-calc__field .r-range { margin-top: 10px; }
.r-calc__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.r-calc__label label { font-size: var(--r-text); font-weight: 500; color: var(--r-navy); }
.r-calc__value { font-size: var(--r-lead); font-weight: 700; color: var(--r-navy); white-space: nowrap; }
.r-calc__out { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; padding-top: 20px; border-top: 1px solid var(--r-line); }
.r-calc__cell dt { margin: 0; font-size: var(--r-small); line-height: 1.4; color: var(--r-body); }
.r-calc__cell dd { margin: 6px 0 0; font-size: var(--r-fig); line-height: 1.15; font-weight: 700; color: var(--r-navy); overflow-wrap: anywhere; }
.r-calc__cell:not(:first-child) dd { font-size: var(--r-lead); }
.r-calc__note { margin: 0; }
.r-assume { list-style: none; margin: 24px 0 0; padding: 0; border-bottom: 1px solid var(--r-line); }
.r-assume li { padding: 12px 0; border-top: 1px solid var(--r-line); font-size: var(--r-small); line-height: 1.5; color: var(--r-body); }
@media (max-width: 700px) { .r-calc { padding: 20px 16px; } }

/* One line and a button, as a card (a guide's inline "See my options"). */
.r-section--tight { padding: 32px 0; }
.r-inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 24px 28px; border: 1px solid var(--r-line); border-left: 4px solid var(--r-navy); border-radius: var(--r-radius); background: #FFFFFF; }
.r-inline-cta__text { margin: 0; font-size: var(--r-lead); line-height: 1.4; font-weight: 500; color: var(--r-navy); max-width: 48ch; }

/* The closing band with a button rather than the form. */
.r-cta__go { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
.r-cta .r-btn { border-color: #FFFFFF; }
.r-cta .r-btn:not(.r-btn--secondary) { background: #FFFFFF; color: var(--r-navy); }
.r-cta .r-btn:not(.r-btn--secondary):hover { background: var(--r-grey); }
.r-cta .r-btn--secondary { background: transparent; color: #FFFFFF; }
.r-cta .r-btn--secondary:hover { background: var(--r-navy-2); color: #FFFFFF; }
.r-cta .r-form .r-btn { background: var(--r-navy); color: #FFFFFF; border-color: var(--r-navy); }
.r-cta .r-form .r-btn:hover { background: var(--r-navy-2); }
.r-cta__text { margin: 20px 0 0; font-size: var(--r-text); line-height: 1.5; color: var(--r-on-navy); }
.r-cta__paid { margin-top: 20px; }

/* The purpose as a chip (T-C): the product's purpose is chosen already; "Change" opens the select. */
.r-chip-field .r-label { margin: 0 0 8px; }
.r-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; max-width: 100%; min-height: 44px; padding: 8px 16px; text-align: left; line-height: 1.3; border: 1px solid var(--r-field); border-radius: 999px; background: var(--r-pale); font: inherit; font-size: var(--r-text); font-weight: 500; color: var(--r-navy); cursor: pointer; }
.r-chip__change { font-size: var(--r-small); font-weight: 500; color: var(--r-blue); text-decoration: underline; text-underline-offset: 3px; }
.r-chip:hover .r-chip__change { color: var(--r-navy); }
.r-chip:focus-visible { outline: 3px solid var(--r-blue); outline-offset: 2px; }
.r-chip-select { display: none; }
.r-chip-field.is-open .r-chip, .r-chip-field.is-open > .r-label { display: none; }
.r-chip-field.is-open .r-chip-select { display: block; }
/* Without JavaScript the select shows, with the product's purpose chosen. */
.r-chip-field:not(.is-ready) .r-chip, .r-chip-field:not(.is-ready) > .r-label { display: none; }
.r-chip-field:not(.is-ready) .r-chip-select { display: block; }

/* The campaign pages' form card (T-A, T-B): its four fields, the consent line, the lines under it. */
.r-form-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--r-line); border-radius: var(--r-radius); background: #FFFFFF; box-shadow: 0 18px 48px rgba(0, 28, 68, 0.08); scroll-margin-top: 24px; }
.r-form-card__title { margin: 0; font-size: var(--r-h2); line-height: 1.2; font-weight: 700; color: var(--r-navy); }
.r-form-card__text { margin: -4px 0 0; font-size: var(--r-text); line-height: 1.5; color: var(--r-ink); }
.r-form--plain { padding: 0; border: 0; gap: 16px; }
.r-form--plain .r-btn { width: 100%; }
.r-required { margin: 0; font-size: var(--r-small); line-height: 1.5; color: var(--r-body); }
.r-status { margin: 0; font-size: var(--r-small); line-height: 1.5; color: var(--r-body); }
.r-status:empty { display: none; }
.r-form-card__lines { display: flex; flex-direction: column; gap: 6px; }
.r-form-card .r-consent a { color: var(--r-navy); }
/* Sent: the form gives way to the thanks, in the same place (Isabella's test, 3 Nov). */
.r-form-card.lp-sent > :not(form), .r-form-card.lp-sent form > :not(.lp-status) { display: none; }
.r-form-card.lp-sent .lp-status { display: block; margin: 0; padding: 12px 0 8px; text-align: center; font-size: var(--r-h2); line-height: 1.3; font-weight: 700; color: var(--r-navy); }
.r-form-card.lp-sent .lp-status::before { content: ""; display: block; width: 64px; height: 3px; margin: 0 auto 20px; border-radius: 2px; background: var(--r-blue); }
@media (max-width: 700px) { .r-form-card { padding: 20px 16px; } }

/* Long-form text: guides and legal pages (T-E, T-J). A readable measure, the kit's type scale, tables in
   scroll containers, and a contents list that sticks beside the text from 1024px. */
.r-doc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--r-gutter); align-items: start; }
.r-doc__toc { grid-column: 1 / span 3; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
.r-doc__body { grid-column: 4 / span 8; min-width: 0; }
.r-toc { font-size: var(--r-small); line-height: 1.45; }
.r-toc__head { margin: 0 0 8px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-body); }
.r-toc ol, .r-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--r-line); }
.r-toc a { display: flex; align-items: center; min-height: 40px; padding: 4px 0 4px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--r-body); text-decoration: none; }
.r-toc a:hover, .r-toc a[aria-current="true"] { color: var(--r-navy); border-left-color: var(--r-blue); }
.r-prose { font-size: clamp(17px, 16.56px + 0.112vw, 18px); line-height: 1.65; color: var(--r-ink); max-width: 70ch; }
.r-prose > :first-child { margin-top: 0; }
.r-prose h2 { margin: 48px 0 16px; font-size: var(--r-h2); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--r-navy); scroll-margin-top: 24px; }
.r-prose h3 { margin: 32px 0 12px; font-size: var(--r-lead); line-height: 1.3; font-weight: 700; color: var(--r-navy); scroll-margin-top: 24px; }
.r-prose h4 { margin: 24px 0 8px; font-size: var(--r-text); font-weight: 700; color: var(--r-navy); }
.r-prose p, .r-prose ul, .r-prose ol, .r-prose blockquote { margin: 0 0 16px; }
.r-prose ul, .r-prose ol { padding-left: 24px; }
.r-prose li + li { margin-top: 6px; }
.r-prose a { color: var(--r-blue); text-decoration: underline; text-underline-offset: 3px; }
.r-prose a:hover { color: var(--r-navy); }
.r-prose strong { font-weight: 700; color: var(--r-navy); }
.r-prose blockquote { padding: 16px 20px; border-left: 4px solid var(--r-navy); background: var(--r-grey); border-radius: 0 var(--r-radius-sm) var(--r-radius-sm) 0; }
.r-prose .r-table { margin: 24px 0; }
.r-prose .r-table table { font-size: var(--r-small); }
.r-takeaways { margin: 0 0 32px; padding: 24px 28px; border-left: 4px solid var(--r-navy); border-radius: 0 var(--r-radius) var(--r-radius) 0; background: var(--r-grey); }
.r-takeaways__head { margin: 0 0 8px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-navy); }
.r-takeaways ul { margin: 0; padding-left: 20px; }
.r-updated { margin: 16px 0 0; font-size: var(--r-small); color: var(--r-body); }
@media (max-width: 1023px) {
  .r-doc { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .r-doc__toc, .r-doc__body { grid-column: 1 / -1; }
  .r-doc__toc { position: static; max-height: none; overflow: visible; }
}

/* A step indicator (Apply, T-G): an ordered list, the current step aria-current="step". */
.r-progress { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(var(--r-progress-n, 4), minmax(0, 1fr)); gap: 8px; counter-reset: r-step; }
.r-progress li { counter-increment: r-step; display: flex; flex-direction: column; gap: 8px; font-size: var(--r-small); line-height: 1.4; color: var(--r-body); }
.r-progress li::before { content: ""; display: block; height: 4px; border-radius: 2px; background: var(--r-line); }
.r-progress li[aria-current="step"], .r-progress li.is-done { color: var(--r-navy); font-weight: 500; }
.r-progress li[aria-current="step"]::before, .r-progress li.is-done::before { background: var(--r-navy); }
@media (max-width: 560px) { .r-progress li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .r-progress li[aria-current="step"] span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } }

/* A hero with the form under the copy and a taller visual beside them (the products' report, the list's
   logos; fork 2): the form sits straight under the copy, and the visual's extra height goes below the form. */
@media (min-width: 1024px) { .r-hero--kit.r-hero--split:has(> .r-wrap > .r-hero__form) > .r-grid { grid-template-rows: auto 1fr; } }
/* A group with its own id (the products list's #equipment) clears the top of the window when linked. */
.r-group[id] { scroll-margin-top: 24px; }
/* A page with nothing but a short hero and a list (the 404, the broker portal): no extra space under it. */
.r-hero--kit.r-hero--short + .r-section { padding-top: 0; }
.r-hero--kit.r-hero--short + .r-section--grey { padding-top: var(--r-pad); }
/* /rest:phase-a */




/* rest:fork-1 campaign and email pages (only fork 1 edits inside this block) */
/* /rest:fork-1 */




/* rest:fork-2 business products and the list (only fork 2 edits inside this block) */
/* On a product page the full report follows further down, so below 1024px the hero's copy of it gives
   way: heading, lead and form, then the facts (T-C, phone). */
@media (max-width: 1023px) { body:has(.r-report-full) .r-hero--kit .r-hero__side:has(.rs-figure) { display: none; } }
/* A three-column versus table (T-C) fits a phone instead of scrolling: both sides of the comparison stay in view. */
@media (max-width: 560px) {
  .r-visual > .r-table table:has(thead th:nth-child(3):last-child) { min-width: 0; font-size: var(--r-small); }
  .r-visual > .r-table table:has(thead th:nth-child(3):last-child) :is(th, td) { padding: 12px; }
}
/* /rest:fork-2 */




/* rest:fork-3 Apply, the Compare Report page and the calculators (only fork 3 edits inside this block) */
/* The two calculators (T-F; site/kit/code/fork3.ts): each slider's paired text field, the lease-or-loan
   table and verdict, and the button to Apply with the figures. */
.r-calc__type { margin-top: 12px; }
.r-calc__go { width: 100%; white-space: normal; text-align: center; }
.r-calc__table { border-radius: var(--r-radius-sm); }
.r-calc__table table { min-width: 0; }
.r-calc__table th, .r-calc__table td { padding: 12px 16px; }
.r-calc__table thead th:nth-child(2), .r-calc__table td:nth-child(2) { background: transparent; }
.r-calc__table tbody tr:last-child th, .r-calc__table tbody tr:last-child td { font-weight: 700; color: var(--r-navy); }
.r-calc__verdict { padding: 16px 20px; border-left: 4px solid var(--r-navy); border-radius: 0 var(--r-radius-sm) var(--r-radius-sm) 0; background: var(--r-grey); }
.r-calc__verdict p { margin: 0; }
.r-calc__verdict-head { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-body); }
.r-calc__verdict-title { margin-top: 8px !important; font-size: var(--r-lead); line-height: 1.3; font-weight: 700; color: var(--r-navy); }
.r-calc__verdict-text { margin-top: 4px !important; font-size: var(--r-small); line-height: 1.5; color: var(--r-ink); }
@media (max-width: 420px) { .r-calc__table th, .r-calc__table td { padding: 10px 10px; } }
/* /rest:fork-3 */




/* rest:fork-4 the guides hub and the guides (only fork 4 edits inside this block) */
/* /rest:fork-4 */




/* rest:fork-5 company and partner pages, the 404 (only fork 5 edits inside this block) */
/* A link inside copy (Contact's details, a form card's line, an FAQ answer, a list row's text, a hero's
   small line): the kit's blue, underlined, rather than the browser's own. Links with a class of their own
   (buttons, rows, the "How We're Paid" link) keep theirs. */
.r-page main :is(.r-pills-row, .r-body, .r-faq__a, .r-rule-text, .r-hero__meta, .r-form-card__text) a:not([class]) { color: var(--r-blue); text-decoration: underline; text-underline-offset: 3px; }
.r-page main :is(.r-pills-row, .r-body, .r-faq__a, .r-rule-text, .r-hero__meta, .r-form-card__text) a:not([class]):hover { color: var(--r-navy); }
.r-page main .r-section--navy :is(.r-body, .r-faq__a, .r-rule-text) a:not([class]), .r-page main .r-section--navy :is(.r-body, .r-faq__a, .r-rule-text) a:not([class]):hover { color: #FFFFFF; }
/* The proof row straight after a navy section (Partner with us): room above the figures. */
.r-section--navy + .r-proof { padding-top: var(--r-pad); }
/* The lender panel (R-33): under reduced motion the strip would stand still as a second copy of the A to Z
   grid under it, so only the grid shows. */
@media (prefers-reduced-motion: reduce) {
  .r-logos-full { display: none; }
  .r-logos-full + .r-logo-grid { margin-top: 40px; padding-top: 0; border-top: 0; }
}
/* /rest:fork-5 */




/* rest:fork-6 old Connect pages, P&P products and list, legal pages (only fork 6 edits inside this block) */
/* The P&P enquiry form (code part "pp-enquire", site/kit/code/fork6.ts): visible labels over the fields,
   the button the form's width. */
.r-ppform__field { display: block; }
.r-ppform .r-btn { width: 100%; }
/* Second Mortgage's repayment calculator (calculator "pp-second-mortgage"): the repayment-type toggle, and
   the slider its script fills up to the thumb (calculatorScript, unchanged). */
.pp-calc-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-calc-toggle-btn { min-height: 44px; padding: 8px 12px; border: 1px solid var(--r-field); border-radius: var(--r-radius-sm); background: #FFFFFF; font: inherit; font-size: var(--r-small); font-weight: 500; line-height: 1.3; color: var(--r-body); cursor: pointer; }
.pp-calc-toggle-btn:hover { color: var(--r-navy); }
.pp-calc-toggle-btn.is-active { border-color: var(--r-navy); background: var(--r-pale); color: var(--r-navy); }
.pp-calc-toggle-btn:focus-visible { outline: 3px solid var(--r-blue); outline-offset: 2px; }
.r-ppcalc .r-range { -webkit-appearance: none; appearance: none; height: 4px; margin: 20px 0 12px; border-radius: 2px; background: var(--r-line); }
.r-ppcalc .r-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--r-navy); border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px var(--r-field); cursor: pointer; }
.r-ppcalc .r-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--r-navy); border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px var(--r-field); cursor: pointer; }
.r-ppcalc .r-range:focus-visible { outline: 3px solid var(--r-blue); outline-offset: 6px; }
/* The monthly repayment on its own row, the two totals under it, so "/mo" never breaks off. */
.r-ppcalc .r-calc__out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-ppcalc .r-calc__cell:first-child { grid-column: 1 / -1; }
.r-ppcalc .r-calc__cell dd { overflow-wrap: normal; }
/* A long button under a section's heading on a P&P page ("See All Personal and Property Funding") wraps
   on a phone rather than run off the screen. */
.r-accent-pp .r-section .r-actions .r-btn { white-space: normal; text-align: left; }
/* /rest:fork-6 */

/* R3 How it works (Matt's final mock, right to go on 9 Nov; site/kit/code/r3-hiw.ts). Replaces R2-09's
   diagrams. Navy, greys and one bright-blue accent (P2-3). Still: nothing moves. */
/* The hero: the six sources around Cashper, at Matt's positions (the dashed lines are a drawing). */
.r-hub { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.r-hub__map { position: relative; width: 100%; max-width: 560px; aspect-ratio: 10 / 8; }
.r-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.r-hub__lines line { stroke: #4BA3E3; stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; fill: none; }
.r-hub__srcs { list-style: none; margin: 0; padding: 0; }
.r-hub__src { position: absolute; transform: translate(-50%, -50%); padding: 10px 16px; border: 1px solid var(--r-line); border-radius: var(--r-radius); background: #FFFFFF; box-shadow: 0 6px 16px rgba(0, 28, 68, 0.06); font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--r-navy); white-space: nowrap; }
.r-hub__src--1 { left: 20%; top: 12%; }
.r-hub__src--2 { left: 80%; top: 12%; }
.r-hub__src--3 { left: 11%; top: 50%; }
.r-hub__src--4 { left: 89%; top: 50%; }
.r-hub__src--5 { left: 20%; top: 88%; }
.r-hub__src--6 { left: 80%; top: 88%; }
.r-hub__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1 / 1; margin: 0; border-radius: 999px; background: var(--r-navy); box-shadow: 0 0 0 10px rgba(0, 176, 255, 0.1); color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: var(--r-small); font-weight: 700; }
.r-hub__core img { width: 24%; height: auto; filter: drop-shadow(0 0 10px rgba(0, 176, 255, 0.6)); }
.r-hub__cap { margin: 0; max-width: 460px; text-align: center; font-size: var(--r-small); line-height: 1.5; color: var(--r-body); }
@media (max-width: 479px) {
  .r-hub__src { padding: 7px 10px; font-size: 13px; }
  .r-hub__src--3 { left: 12%; }
  .r-hub__src--4 { left: 88%; }
}
/* Meet Cashper: the ghost in its halo. */
.r-ghost { margin: 0; display: flex; align-items: center; justify-content: center; }
.r-ghost__halo { width: 150px; height: 150px; border-radius: 999px; background: var(--r-pale); box-shadow: 0 0 0 12px rgba(0, 176, 255, 0.08); display: flex; align-items: center; justify-content: center; }
.r-ghost__halo img { width: 62px; height: auto; }
/* Behind the scenes: the matching result, every lender qualified or a soft match, and why. */
.r-match { margin: 0; padding: 24px; border: 1px solid var(--r-line); border-radius: var(--r-radius); background: #FFFFFF; }
.r-match__kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--r-blue); }
.r-match__title { margin: 0 0 16px; font-size: var(--r-text); font-weight: 700; color: var(--r-navy); }
.r-match__rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--r-line); }
.r-match__rows li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--r-line); font-size: var(--r-small); }
.r-match__who { font-weight: 700; color: var(--r-ink); }
.r-match__ok, .r-match__no { flex: 0 1 auto; padding: 3px 10px; border-radius: 999px; font-size: 13px; line-height: 1.4; }
.r-match__ok { background: var(--r-pale); color: var(--r-navy); font-weight: 500; text-align: right; }
.r-match__no { border: 1px solid var(--r-field); background: #FFFFFF; color: var(--r-body); font-weight: 700; }
.r-match__why { flex-basis: 100%; color: var(--r-body); }
.r-match__cap { margin: 12px 0 0; font-size: 13px; color: var(--r-body); }
/* One specialist: the report being reviewed together, then the specialist's note. */
.r-spec { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.r-spec__report { border: 1px solid var(--r-line); border-radius: var(--r-radius); background: #FFFFFF; box-shadow: 0 12px 32px rgba(0, 28, 68, 0.08); overflow: hidden; }
.r-spec__bar { margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--r-navy); color: #FFFFFF; font-size: var(--r-small); font-weight: 700; }
.r-spec__dots { display: inline-flex; gap: 5px; }
.r-spec__dots i { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); }
.r-spec__rows { list-style: none; margin: 0; padding: 6px 16px 10px; }
.r-spec__rows li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--r-line); font-size: var(--r-small); }
.r-spec__rows li:first-child { border-top: 0; }
.r-spec__who { font-weight: 500; color: var(--r-ink); }
.r-spec__tag { padding: 3px 10px; border-radius: 999px; background: var(--r-pale); color: var(--r-navy); font-size: 13px; font-weight: 700; line-height: 1.4; }
.r-spec__rows li.is-active .r-spec__who { font-weight: 700; color: var(--r-navy); }
.r-spec__rows li.is-active .r-spec__tag { background: var(--r-navy); color: #FFFFFF; }
.r-spec__note { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: var(--r-radius); background: var(--r-navy); color: #FFFFFF; }
.r-spec__icon { flex: none; width: 64px; height: 64px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); color: var(--r-bright); display: flex; align-items: center; justify-content: center; }
.r-spec__whois { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--r-bright); }
.r-spec__quote { margin: 0; font-size: var(--r-text); line-height: 1.5; color: #FFFFFF; }
/* A ticked list inside a text field (paras in site/kit/blocks.mjs): lines that start with "- ". */
.r-ticklist { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; max-width: 62ch; }
.r-ticklist li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--r-text); line-height: 1.5; color: var(--r-ink); }
.r-ticklist svg { flex: none; margin-top: 1px; color: var(--r-blue); }
/* /R3 How it works */

/* R2-10 */
/* Matt's hero graphics on the business product pages (round 2; the parts: site/kit/code/r2-10.ts). Navy
   line work, white fills, one bright-blue accent (P2-3). Each draws once on load in about 1.5 seconds, then
   stays still (P2-5), so it needs no pause control. The finished drawing is the base style and every
   animation only runs from its start state (fill-mode backwards), so with reduced motion, in print, or if an
   animation never runs, the finished drawing shows. Below 1024px the hero stacks and the graphic gives way,
   as the hero's sample report did on these pages. */
.r-hero--kit .r-hero__side:has(> .r-graphic) { align-self: center; }
.r-graphic { width: 100%; max-width: 440px; margin: 0 auto; }
.r-graphic svg { display: block; width: 100%; height: auto; overflow: hidden; }
.r-g * { transform-box: fill-box; }
.r-g .g-vb { transform-box: view-box; }
.r-g .g-d { fill: none; stroke: var(--r-navy); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; animation: rgDraw 1.1s cubic-bezier(.6, 0, .3, 1) backwards; }
.r-g .g-d.g-fx { animation: rgDraw 1.1s cubic-bezier(.6, 0, .3, 1) backwards, rgFill .6s ease .55s backwards; }
.r-g .g-key { stroke: var(--r-bright); }
.r-g .g-f0 { fill: #FFFFFF; }
.r-g .g-ink { fill: var(--r-navy); }
.r-g .g-acc { fill: var(--r-bright); }
@keyframes rgDraw { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }
@keyframes rgFill { from { fill-opacity: 0; } }
@keyframes rgFade { from { opacity: 0; } }
@keyframes rgGrow { from { transform: scaleX(0); } }
/* Business Loans: the money drops in and is gone; the window and door light up. */
.r-g .g-m { fill: #FFFFFF; stroke: var(--r-navy); stroke-width: 1.1; stroke-linejoin: round; }
.r-g .g-drop { opacity: 0; transform-origin: 50% 100%; animation: rgDrop .7s cubic-bezier(.5, 0, .6, 1) .45s backwards; }
.r-g .g-drop.g-dl1 { animation-delay: .55s; }
.r-g .g-drop.g-dl2 { animation-delay: .65s; }
@keyframes rgDrop { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(12px); opacity: 1; } 100% { transform: translateY(17px) scale(.5); opacity: 0; } }
.r-g .g-glow { fill: var(--r-bright); fill-opacity: .28; animation: rgGlow .45s ease 1.1s backwards; }
@keyframes rgGlow { from { fill-opacity: 0; } 60% { fill-opacity: .5; } }
/* Lines of Credit: the card is drawn down the line, the bar shows what's used. */
.r-g .g-lc-card { transform-origin: 50% 0; transform: translateY(18px); animation: rgLcCard .8s cubic-bezier(.45, 0, .3, 1) .7s backwards; }
@keyframes rgLcCard { from { transform: translateY(0); } 50% { transform: translateY(9px) rotate(-2deg); } 85% { transform: translateY(18px) rotate(1deg); } }
.r-g .g-lc-str { transform-origin: 50% 0; transform: scaleY(4.6); animation: rgLcStr .8s cubic-bezier(.45, 0, .3, 1) .7s backwards; }
@keyframes rgLcStr { from { transform: scaleY(1); } }
.r-g .g-lc-pul { transform-origin: 50% 50%; animation: rgLcPul .8s cubic-bezier(.45, 0, .3, 1) .7s backwards; }
@keyframes rgLcPul { from { transform: rotate(-300deg); } }
.r-g .g-lc-bar { transform-origin: 0 50%; transform: scaleX(.62); animation: rgGrow .5s ease-in-out 1s backwards; }
/* Invoice Finance: the clock turns once, the bar fills, the cash stacks up. */
.r-g .g-if-bar { transform-origin: 0 50%; transform: scaleX(.9); animation: rgGrow .6s ease-in-out .7s backwards; }
.r-g .g-if-hand { fill: none; stroke: var(--r-bright); stroke-width: 1.2; stroke-linecap: round; transform-origin: 39px 46px; animation: rgTurn .9s ease-in-out .6s backwards; }
@keyframes rgTurn { from { transform: rotate(-360deg); } }
.r-g .g-if-coin { animation: rgCoin .45s cubic-bezier(.4, 0, .2, 1) 1s backwards; }
.r-g .g-if-coin.g-dl1 { animation-delay: 1.1s; }
.r-g .g-if-coin.g-dl2 { animation-delay: 1.2s; }
@keyframes rgCoin { from { transform: translate(-22px, -18px) scale(.5); opacity: 0; } 30% { opacity: 1; } 60% { transform: translate(-11px, -28px) scale(.9); } }
/* Trade Finance: the water comes in, the ship rocks once and settles. */
.r-g .g-water { fill: var(--r-bright); fill-opacity: .08; animation: rgFade .6s ease .5s backwards; }
.r-g .g-wave { fill: none; stroke: var(--r-bright); stroke-width: 1.1; stroke-linecap: round; animation: rgWave 1s ease-out .5s backwards; }
.r-g .g-wave2 { stroke-width: .9; stroke-opacity: .55; animation-name: rgWave2; }
@keyframes rgWave { from { opacity: 0; transform: translateX(-16px); } }
@keyframes rgWave2 { from { opacity: 0; transform: translateX(16px); } }
.r-g .g-tf-ship { transform-origin: 50% 100%; animation: rgRock 1s ease-in-out .5s backwards; }
@keyframes rgRock { from { transform: translateY(-1px) rotate(-1.6deg); } 50% { transform: translateY(.8px) rotate(1.2deg); } }
/* Equipment & Leasing: the arm swings once and comes to rest. */
.r-g .g-eq-boom { transform-origin: 30px 38px; transform: rotate(-4deg); animation: rgBoom 1s ease-in-out .6s backwards; }
@keyframes rgBoom { from { transform: rotate(-4deg); } 35% { transform: rotate(14deg); } 70% { transform: rotate(-10deg); } }
.r-g .g-eq-stick { transform-origin: 44px 24px; animation: rgStick 1s ease-in-out .6s backwards; }
@keyframes rgStick { 35% { transform: rotate(-16deg); } 55% { transform: rotate(16deg); } 75% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .r-g, .r-g * { animation: none !important; } }
@media print { .r-g, .r-g * { animation: none !important; } }
@media (max-width: 1023px) { .r-hero--kit .r-hero__side:has(> .r-graphic), .r-graphic { display: none; } }
/* /R2-10 */

/* R3 pages */
/* The hero graphics of the two new Business product pages (Matt's email, 9 Nov; the parts: site/kit/code/
   r3-pages.ts), on R2-10's base styles above: drawn once, then still (P2-5). The finished drawing is the base
   style; each animation runs only from its start state (fill-mode backwards). Reduced motion, print and the
   phone rule are R2-10's. */
.r-g .g-thin { stroke-width: .8; }
/* Commercial Property: the windows light up floor by floor, then the antenna. */
.r-g .g-cp-w { fill: var(--r-bright); fill-opacity: .9; animation: rgFill .3s ease .9s backwards; }
.r-g .g-cp-w.g-w1 { animation-delay: .975s; }
.r-g .g-cp-w.g-w2 { animation-delay: 1.05s; }
.r-g .g-cp-w.g-w3 { animation-delay: 1.125s; }
.r-g .g-cp-w.g-w4 { animation-delay: 1.2s; }
.r-g .g-cp-w.g-w5 { animation-delay: 1.275s; }
.r-g .g-cp-w.g-w6 { animation-delay: 1.35s; }
.r-g .g-cp-ant { fill: var(--r-bright); animation: rgFade .3s ease 1.35s backwards; }
/* Second Mortgages: the level shows, the tap turns once, the level drops, the cash comes out. */
.r-g .g-sm-wf { animation: rgFade .4s ease .5s backwards; }
.r-g .g-sm-lvl { fill: var(--r-bright); fill-opacity: .14; transform-origin: 50% 100%; transform: scaleY(.5); animation: rgSmLvl .7s ease-in-out .8s backwards; }
@keyframes rgSmLvl { from { transform: scaleY(.72); } }
.r-g .g-sm-valve { transform-origin: 50% 50%; animation: rgSmValve .6s ease-in-out .7s backwards; }
@keyframes rgSmValve { from { transform: rotate(-180deg); } }
.r-g .g-sm-coin { animation: rgSmCoin .4s cubic-bezier(.4, 0, .2, 1) 1.1s backwards; }
.r-g .g-sm-coin.g-dl1 { animation-delay: 1.3s; }
@keyframes rgSmCoin { from { transform: translateY(-8px) scale(.6); opacity: 0; } 30% { opacity: 1; } }
/* /R3 pages */