/* ============================================================
   AUTHORITY — a Rebel Sites template (docs/rebel-sites/concepts/template-authority/authority.css, scoped under .rau).
   A cut-out portrait standing over the owner's own city, then a sleek dark-and-paper body: glass, hairlines, identical card
   rows, a moving strip, big honest figures. Every colour is theme.ts `authorityVars` (from the site's three brand colours, on
   the root); the fallbacks here are the concept's own (Larry Steinway's navy, blue and gold). Roles:
     primary   the field: the big bands and the numbers band's glass (and the hue of the night)
     secondary the details: eyebrows, labels, numerals, icons, hairlines, the strip's diamonds; the light (halo, wash, gradient)
     tertiary  the main buttons, the text links, the current page's mark
   Tone: light is the concept; dark deepens the night and turns the paper bands into a dark paper of the primary's hue (the `-d`
   set). Every rule sits under .rau and every keyframe is rau-*.
   ============================================================ */

/* ---------------- tokens ---------------- */
.rau {
  --sans: var(--font-body, 'Inter Tight', 'Helvetica Neue', Arial, sans-serif);
  --display: var(--font-display, var(--sans));

  /* the night (hero, strip, closer, footer, phone menu) and the field (the primary's bands) */
  --night: var(--au-night, #0A0D17);
  --night-raised: var(--au-night-raised, #12182A);
  --field: var(--au-field, #101421);
  --field-raised: var(--au-field-raised, #1D212D);
  --on-field: var(--au-field-text, #FFFFFF);
  --light: var(--au-light, #2964D5);
  --pill: var(--au-pill, #688BFD);
  --btn: var(--au-btn, #AF914B);
  --on-btn: var(--au-on-btn, #10141D);
  --ring-night: var(--au-ring-night, #AF914B);
  --ring-paper: var(--au-ring-paper, #896E29);

  /* the paper in the light tone (the concept) */
  --paper: var(--au-paper-l, #F7F7F5);
  --paper-raised: var(--au-paper-l-raised, #FFFFFF);
  --paper-text: var(--au-paper-l-text, #10141D);
  --paper-muted: var(--au-paper-l-muted, #4A4F5E);
  --paper-faint: var(--au-paper-l-faint, #5D6272);
  --paper-accent: var(--au-paper-l-accent, #2964D5);
  --paper-accent-raised: var(--au-paper-l-accent-raised, #2964D5);
  --paper-mark: var(--au-paper-l-mark, #2964D5);
  --paper-mark-raised: var(--au-paper-l-mark-raised, #2964D5);
  --paper-link: var(--au-paper-l-link, #896E29);
  --paper-link-raised: var(--au-paper-l-link-raised, #896E29);
  /* the main button's fallback is the owner's button colour itself (Andrew, 2026-10-24: a main button's fill is never a
     shade moved to part from its paper; #A98B45 was the shade the old 3:1 rule walked) */
  --paper-btn: var(--au-paper-l-btn, #AF914B);
  --paper-on-btn: var(--au-paper-l-on-btn, #10141D);
  --paper-btn-edge: var(--au-paper-l-btn-edge, transparent);
  --paper-btn-raised: var(--au-paper-l-btn-raised, #AF914B);
  --paper-on-btn-raised: var(--au-paper-l-on-btn-raised, #10141D);
  --paper-btn-raised-edge: var(--au-paper-l-btn-raised-edge, transparent);
  --paper-line: rgb(16 20 33 / .1);
  --paper-line-2: rgb(16 20 33 / .16);
  --paper-shadow: 0 1px 2px rgb(16 20 33 / .04), 0 8px 24px rgb(16 20 33 / .06);
  --paper-shadow-hover: 0 2px 4px rgb(16 20 33 / .05), 0 18px 40px rgb(16 20 33 / .1);

  /* glass (the concept's Flowninja measure: a 24% edge, a three-part shadow) */
  --glass-edge: rgb(248 248 248 / .24);
  --shadow-glass: 0 4px 24px rgb(0 0 0 / .2), inset 0 1px rgb(255 255 255 / .15), inset 0 -1px rgb(255 255 255 / .05);
  --shadow-panel: 0 24px 64px rgb(10 13 23 / .28), 0 2px 8px rgb(10 13 23 / .12);

  /* shape and rhythm */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --max: 1240px;
  --gutter: 24px;
  /* the header's column — the width the bar's brand and pages align to, published for other products so their content
     lines up with the header (CONTENT MEDIA's blog, director ruling (B) 2026-10-24). The bar is a `nav.wrap`, so its
     column is .wrap's own width, content-box (nothing inside it but its padding-free box), and --rs-gutter is the page's
     gutter: the gap it keeps to the screen's edge (16px on a phone, below). */
  --rs-wrap: min(var(--max), 100% - 2 * var(--gutter));
  --rs-gutter: var(--gutter);
  --bar: 72px;
  --section: clamp(72px, 8vw, 120px);
  --gap-block: 28px;
  --gap-card: 16px;
  --fs-display: clamp(42px, 5.9vw, 88px);
  --fs-h1: clamp(40px, 5vw, 72px);
  --fs-h2: clamp(32px, 3.4vw, 52px);
  --fs-lede: clamp(17px, 1.3vw, 20px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --bleed: max(var(--gutter), (100vw / var(--z) - var(--max)) / 2);
}
/* the dark tone: the night a step deeper, the paper bands a dark paper of the primary's hue (theme.ts `paper.dark`) */
.rau[data-mode="dark"] {
  --night: color-mix(in srgb, var(--au-night, #0A0D17) 72%, #000);
  --paper: var(--au-paper-d, #141A2B);
  --paper-raised: var(--au-paper-d-raised, #1B2236);
  --paper-text: var(--au-paper-d-text, #F7F7F5);
  --paper-muted: var(--au-paper-d-muted, #B3B6BD);
  --paper-faint: var(--au-paper-d-faint, var(--paper-muted));
  --paper-accent: var(--au-paper-d-accent, #5C83E9);
  --paper-accent-raised: var(--au-paper-d-accent-raised, #6189EE);
  --paper-mark: var(--au-paper-d-mark, #3F70E0);
  --paper-mark-raised: var(--au-paper-d-mark-raised, #4675E2);
  --paper-link: var(--au-paper-d-link, #AF914B);
  --paper-link-raised: var(--au-paper-d-link-raised, #AF914B);
  --paper-btn: var(--au-paper-d-btn, #AF914B);
  --paper-on-btn: var(--au-paper-d-on-btn, #10141D);
  --paper-btn-edge: var(--au-paper-d-btn-edge, transparent);
  --paper-btn-raised: var(--au-paper-d-btn-raised, #AF914B);
  --paper-on-btn-raised: var(--au-paper-d-on-btn-raised, #10141D);
  --paper-btn-raised-edge: var(--au-paper-d-btn-raised-edge, transparent);
  --paper-line: rgb(255 255 255 / .12);
  --paper-line-2: rgb(255 255 255 / .2);
  --paper-shadow: none;
  --paper-shadow-hover: 0 18px 40px rgb(0 0 0 / .32);
}
@media (max-width: 1023px) { .rau { --bar: 64px; } }
@media (max-width: 720px) { .rau { --gutter: 16px; --bar: 60px; } }

/* ---------------- base ---------------- */
.rau, .rau *, .rau *::before, .rau *::after { box-sizing: border-box; }
html:has(.rau) { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--site-stuck, 72px) + 16px); }
@media (prefers-reduced-motion: no-preference) {
  html:has(.rau) { scroll-behavior: smooth; }
}
.rau {
  position: relative; min-height: 100%;
  background: var(--paper); color: var(--paper-text);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (max-width: 720px) { .rau { font-size: 16px; } }
:where(.rau) h1, :where(.rau) h2, :where(.rau) h3, :where(.rau) h4, :where(.rau) p, :where(.rau) ul, :where(.rau) ol, :where(.rau) figure, :where(.rau) blockquote, :where(.rau) dl, :where(.rau) dd { margin: 0; }
:where(.rau) ul, :where(.rau) ol { padding: 0; list-style: none; }
:where(.rau) img, :where(.rau) svg { display: block; max-width: 100%; }
:where(.rau) a { color: inherit; }
:where(.rau) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.rau) address { font-style: normal; }
/* the resets above weigh nothing (:where), so a blog drawn on the site keeps its own spacing; the app's own `.prose` (globals.css)
   sets its paragraphs', headings', lists' and quotes' margins and its lists' bullets at one class and one element, so inside the
   long words the resets keep that weight here, as they had it before */
.rau :where(.prose) :is(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.rau :where(.prose) :is(ul, ol) { padding: 0; list-style: none; }
:where(.rau) h1, :where(.rau) h2, :where(.rau) h3, :where(.rau) h4 { text-wrap: balance; }
:where(.rau) p { text-wrap: pretty; }
.rau :focus-visible { outline: 2px solid var(--focus, var(--ring-paper)); outline-offset: 3px; border-radius: 4px; }
/* a jump's target holds the focus without a ring (site-jumps.ts): the reader's eyes are on its words */
.rau [data-jump-focus]:focus { outline: none; }
.rau .wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.rau .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rau .skip { position: absolute; left: 16px; top: -80px; z-index: 300; background: #fff; color: #10141D; padding: 12px 16px; border-radius: var(--r-sm); text-decoration: none; font-weight: 600; }
.rau .skip:focus { top: 12px; }
.rau .lucide { display: block; }
/* the outline icons Authority draws (kit/catalog.ts KIT_FORM_ICONS and KIT_CALCULATOR_ICONS, Home.tsx NAMED_ICONS): one look */
.rau :is(.lucide-message-square, .lucide-mail, .lucide-phone, .lucide-badge-check, .lucide-chart-line, .lucide-key-round, .lucide-house-plus, .lucide-refresh-cw, .lucide-banknote, .lucide-percent, .lucide-hand-coins, .lucide-shield, .lucide-landmark, .lucide-wheat, .lucide-building-2, .lucide-building, .lucide-receipt, .lucide-credit-card, .lucide-piggy-bank, .lucide-hourglass, .lucide-file-text, .lucide-calculator, .lucide-dollar-sign, .lucide-arrow-right-left, .lucide-gauge, .lucide-scale, .lucide-chart-column-increasing, .lucide-medal, .lucide-briefcase, .lucide-flag, .lucide-rotate-ccw) { flex: none; }
/* the hooks the shared parts and the renderers mark (no look of their own beyond their parent's) */
.rau .card.is-raised, .rau .frame-box.is-calc, .rau .frame-box.is-form, .rau .table-wrap.is-three, .rau .place, .rau .hero-photo.is-still { min-width: 0; }
.rau .wrap.has-embed { min-width: 0; }
.rau .vid .player { position: absolute; inset: 0; }
.rau .opening.is-post .bl-head-in { max-width: 860px; }
.rau .bl-byline-m { color: var(--t2); }
.rau .bl-copy-link { min-height: 40px; padding: 0 16px; font-size: 14px; }
.rau .ico { width: 20px; height: 20px; stroke-width: 1.75; flex: none; }

/* ---------------- the grounds ----------------
   Each band sets the words, quiet words, details (the secondary: small words AA, marks 3:1), links (the button colour), the main
   button and the hairlines for the ground it is drawn on, and for a card raised on it, so a part reads the same on any ground
   (kit.tsx `groundOf` chooses each band's ground for the whole page). */
.rau :is(.night, .bar, .mmenu, .mbar, .foot) {
  --g: var(--night); --raised: var(--night-raised);
  --t: #FFFFFF; --t2: var(--au-night-muted, rgb(255 255 255 / .74)); --t3: rgb(255 255 255 / .6);
  --acc: var(--au-night-accent, #4A78EC); --acc-r: var(--au-night-accent-raised, #688BFD);
  --mk: var(--au-night-mark, #2964D5); --mk-r: var(--au-night-mark-raised, #3A6FDD);
  --lk: var(--au-night-link, #AF914B); --lk-r: var(--au-night-link-raised, #AF914B);
  --b: var(--au-night-btn, #AF914B); --ob: var(--au-night-on-btn, #10141D); --be: var(--au-night-btn-edge, transparent);
  --b-r: var(--au-night-btn-raised, #AF914B); --ob-r: var(--au-night-on-btn-raised, #10141D); --be-r: var(--au-night-btn-raised-edge, transparent);
  --line: rgb(255 255 255 / .12); --line-2: rgb(255 255 255 / .2);
  --focus: var(--ring-night); --card-shadow: none; --card-shadow-hover: none;
}
.rau .field {
  --g: var(--field); --raised: var(--field-raised);
  --t: var(--on-field); --t2: var(--au-field-muted, rgb(255 255 255 / .74)); --t3: var(--au-field-faint, rgb(255 255 255 / .6));
  --acc: var(--au-field-accent, #4A78EC); --acc-r: var(--au-field-accent-raised, #688BFD);
  --mk: var(--au-field-mark, #2964D5); --mk-r: var(--au-field-mark-raised, #3A6FDD);
  --lk: var(--au-field-link, #AF914B); --lk-r: var(--au-field-link-raised, #AF914B);
  --b: var(--au-field-btn, #AF914B); --ob: var(--au-field-on-btn, #10141D); --be: var(--au-field-btn-edge, transparent);
  --b-r: var(--au-field-btn-raised, #AF914B); --ob-r: var(--au-field-on-btn-raised, #10141D); --be-r: var(--au-field-btn-raised-edge, transparent);
  --line: color-mix(in srgb, var(--on-field) 12%, transparent); --line-2: color-mix(in srgb, var(--on-field) 20%, transparent);
  --focus: var(--ring-night); --card-shadow: none; --card-shadow-hover: none;
}
.rau :is(.paper, .white) {
  --g: var(--paper); --raised: var(--paper-raised);
  --t: var(--paper-text); --t2: var(--paper-muted); --t3: var(--paper-faint);
  --acc: var(--paper-accent); --acc-r: var(--paper-accent-raised);
  --mk: var(--paper-mark); --mk-r: var(--paper-mark-raised);
  --lk: var(--paper-link); --lk-r: var(--paper-link-raised);
  --b: var(--paper-btn); --ob: var(--paper-on-btn); --be: var(--paper-btn-edge);
  --b-r: var(--paper-btn-raised); --ob-r: var(--paper-on-btn-raised); --be-r: var(--paper-btn-raised-edge);
  --line: var(--paper-line); --line-2: var(--paper-line-2);
  --focus: var(--ring-paper); --card-shadow: var(--paper-shadow); --card-shadow-hover: var(--paper-shadow-hover);
}
/* the white: a band between two papers (the concept's g-white), the card on it the paper */
.rau .white {
  --g: var(--paper-raised); --raised: var(--paper);
  --acc: var(--paper-accent-raised); --mk: var(--paper-mark-raised); --lk: var(--paper-link-raised); --b: var(--paper-btn-raised); --ob: var(--paper-on-btn-raised); --be: var(--paper-btn-raised-edge);
  --acc-r: var(--paper-accent); --mk-r: var(--paper-mark); --lk-r: var(--paper-link); --b-r: var(--paper-btn); --ob-r: var(--paper-on-btn); --be-r: var(--paper-btn-edge);
}
.rau :is(.night, .field, .paper, .white) { background: var(--g); color: var(--t); }
.rau :is(.night, .field, .paper, .white) :focus-visible { outline-color: var(--focus); }
/* a card raised on its ground takes the raised set */
.rau :is(.card, .glass, .info, .award, .fig, .hub-card, .bl-card, .quote, .offer.card, .g-band, .bl-author, .bl-cta, .strip-ask, .frame-box) { --acc: var(--acc-r); --mk: var(--mk-r); --lk: var(--lk-r); --b: var(--b-r); --ob: var(--ob-r); --be: var(--be-r); }
.rau .section { position: relative; padding-block: var(--section); }

/* ---------------- type ---------------- */
.rau .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--acc);
}
.rau .eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; flex: none; }
/* `.mark-powered` beside `.label`: the lockup's Powered-by line speaks in its title line's voice (nav-mega.css, the Powered-by line) */
.rau :is(.label, .mark-powered) { display: block; font: 600 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.rau .h2 { font: 500 var(--fs-h2)/1.06 var(--display); letter-spacing: -.025em; }
.rau .lede { font-size: var(--fs-lede); line-height: 1.5; max-width: 60ch; color: var(--t2); }
/* a line with no words takes no room on the page; the editor's prompt for it (.rs-add, words drawn as a ::before) always shows */
.rau .lede:not(.rs-add):empty, .rau .lede:has(> [data-edit]:only-child:empty) { display: none; }
.rau .num { font: 600 13px/1.55 var(--sans); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--acc); }
.rau .section-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: 48px; }
.rau .section-head.split { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; -moz-column-gap: 48px; column-gap: 48px; }
.rau .section-head.split > div { display: grid; gap: 18px; max-width: 760px; }
@media (max-width: 720px) {
  .rau .section-head { margin-bottom: 32px; }
  .rau .section-head.split { grid-template-columns: 1fr; row-gap: 20px; }
}

/* ---------------- buttons and links ---------------- */
.rau .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--r-sm); border: 1px solid transparent;
  font: 600 16px/1.1 var(--sans); letter-spacing: -.005em; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.rau .btn svg { width: 16px; height: 16px; flex: none; transition: transform .18s var(--ease); }
.rau .btn:hover svg { transform: translateX(3px); }
.rau .btn-lg { min-height: 56px; padding: 0 28px; }
.rau .btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
/* the main button: the owner's button colour EXACTLY on the ground it stands on (Andrew, 2026-10-24), its own words, and a
   1px edge in its own hue only where its fill nearly vanishes into that ground (`--be`: theme.ts `buttonFillOn`'s edge) */
.rau .btn-primary { background: var(--b, var(--btn)); color: var(--ob, var(--on-btn)); border-color: var(--be, transparent); }
.rau .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgb(0 0 0 / .18); }
/* the second button: outlined in the button colour, the ground's words (many of one button, button-crowd.ts) */
.rau .btn-line { background: transparent; border-color: var(--b, var(--btn)); color: var(--t); }
.rau .btn-line:hover { background: color-mix(in srgb, var(--b, var(--btn)) 12%, transparent); }
/* many of one button (more than three in a section: button-crowd.ts): outlined in the button colour, its words the link's shade */
.rau .btn-many { background: transparent; border-color: var(--b, var(--btn)); color: var(--lk); }
.rau .btn-many:hover { background: color-mix(in srgb, var(--b, var(--btn)) 12%, transparent); box-shadow: none; }
/* glass: a quiet button over the night and a photograph */
.rau .btn-glass { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .28); color: #FFFFFF; backdrop-filter: blur(12px); }
.rau .btn-glass:hover { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .42); }
.rau .link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 0;
  font: 600 15px/1.55 var(--sans); color: var(--lk); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.rau .link-arrow svg { width: 16px; height: 16px; flex: none; transition: transform .18s var(--ease); }
.rau .link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.rau .link-arrow:hover svg { transform: translateX(4px); }
.rau .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ============================================================
   THE BAR — over the night, solid once the page moves
   ============================================================ */
.rau .bar {
  position: sticky; top: 0; z-index: 50; height: var(--bar);
  /* fully opaque: nothing on the page reads through a header (Andrew via REBEL SITES, 2026-10-27, every template) */
  background: var(--night);
  border-bottom: 1px solid var(--line);
  margin-bottom: calc(-1 * var(--bar));
  transition: background-color .32s var(--ease), border-color .32s var(--ease);
}
/* over the page's own night opening the bar is clear until the page moves (the runtime marks it is-solid) */
.rau:has(main > :first-child:is(.night, .day, .calc-page)) .bar:not(.is-solid):not(.bar-min) { background: transparent; border-bottom-color: transparent; }
.rau:not(:has(main > :first-child:is(.night, .day, .calc-page))) .bar { margin-bottom: 0; }
.rau .bar-in { height: 100%; display: flex; align-items: center; gap: 24px; }
/* the lockup: the person's name with the licence under it (BrandMark's words, drawn first), a hairline, the company's mark */
.rau .brandmark { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 6px 0; text-decoration: none; color: #FFFFFF; }
.rau .brandmark .mark-words { order: -1; display: grid; gap: 1px; min-width: 0; line-height: 1.1; }
.rau .brandmark .mark-words b { font: 600 17px/1.1 var(--sans); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rau .brandmark .mark-words :is(.label, .mark-powered) { font: 500 11px/1.1 var(--sans); letter-spacing: .08em; color: var(--t3); white-space: nowrap; }
.rau .brandmark > .mark { display: none; }
.rau .brandmark .logo { display: grid; align-items: center; flex: none; max-width: 180px; padding-left: var(--lockup-gap); border-left: var(--lockup-hair); --logo-h: var(--rs-logo-h, 30px); }
.rau .brandmark .logo-v { grid-area: 1 / 1; display: flex; align-items: center; visibility: hidden; padding: 0; }
.rau .brandmark .logo-v.has-panel { background: var(--logo-panel); padding: calc(var(--logo-h) * .18) calc(var(--logo-h) * .3); border-radius: var(--r-sm); }
.rau .brandmark .logo-v.on-dark { visibility: visible; }
.rau .brandmark .logo-img { height: var(--logo-h); width: auto; max-width: 100%; -o-object-fit: contain; object-fit: contain; }
.rau .brandmark.logo-only:not([data-logo-broken]) .mark-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rau .brandmark.logo-only:not([data-logo-broken]) .logo { padding-left: 0; border-left: 0; }
.rau .brandmark .mark-fallback { display: none; }
.rau .brandmark[data-logo-broken] .logo { display: none; }
.rau .nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.rau .nav-links a:where(:not(.btn)), .rau .nav-links .linkbtn, .rau .nav-drop summary {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--r-sm);
  font: 500 15px/1 var(--sans); color: var(--t2); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.rau .nav-links > li > a:where(:not(.btn)):hover, .rau .nav-links > li > .linkbtn:hover, .rau .nav-drop summary:hover, .rau .nav-drop details[open] > summary { color: #FFFFFF; background: rgb(255 255 255 / .07); }
/* the current page: its link in the words' full white over the button colour's underline */
.rau .nav-links > li > a[aria-current="page"] { color: #FFFFFF; box-shadow: inset 0 -2px 0 var(--btn); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.rau .nav-drop { position: relative; display: flex; align-items: center; }
/* a group with a page of its own (nav-draw.tsx has-page): its link and its chevron's <summary> are ONE lockup. The pill (hover, open)
   is the lockup's, never the chevron's alone (Andrew, 2026-10-20, Larry's Loan Programs open: "the arrow in its own disconnected
   rectangle"), so the link and the summary draw no background of their own inside it. */
.rau .nav-drop.has-page { border-radius: var(--r-sm); transition: background-color .18s var(--ease); }
.rau .nav-drop.has-page:hover, .rau .nav-drop.has-page:has(details[open]) { background: rgb(255 255 255 / .07); }
.rau .nav-drop.has-page:hover > a, .rau .nav-drop.has-page:has(details[open]) > a, .rau .nav-drop.has-page:has(details[open]) summary { color: #FFFFFF; }
.rau .nav-drop.has-page > a:hover, .rau .nav-drop.has-page summary:hover, .rau .nav-drop.has-page details[open] > summary { background: transparent; }
.rau .nav-drop.has-page > a { padding-right: 6px; }
.rau .nav-drop.has-page summary { padding: 0 12px 0 6px; }
.rau .nav-drop summary { list-style: none; }
.rau .nav-drop summary::-webkit-details-marker { display: none; }
.rau .nav-drop summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
/* a list's dropdown: a panel on the bar's own night (the menu's colours: menu-ground.css), hanging from its opener's left at the bar's
   foot; its words, details and buttons are the night's, as the bar's (the grounds, above) */
.rau { --drop-gap: 16px; } /* the 40px opener centred in the 72px bar: 16px from its foot to the bar's (the runtime measures it as the panel opens) */
.rau .nav-sub {
  position: absolute; left: 0; z-index: 60; min-width: 220px; display: grid; padding: 8px;
  border: 1px solid var(--menu-line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-panel);
}
.rau .nav-sub a:where(:not(.btn)), .rau .nav-sub .linkbtn { display: flex; align-items: center; width: 100%; height: auto; min-height: 44px; padding: 10px 12px; border-radius: var(--r-md); text-align: left; }
.rau .nav-sub a:where(:not(.btn)):focus-visible, .rau .nav-sub .linkbtn:focus-visible { outline-offset: -2px; }
/* the wide panel (nav-mega.css's grid): the concept's columns sized to their longest name, the level rows, the strip at its foot */
.rau .nav-drop .nav-mega .nav-cols { padding: 24px 20px 12px; } /* the concept's 24 over the columns; their sides inset as the shared strip under them (20) */
.rau .nav-drop .nav-mega .nav-col-h { margin: 0 12px 6px; padding-bottom: 10px; font: 600 11px/1.55 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--menu-accent); text-wrap: balance; }
.rau .nav-drop .nav-mega .has-rich { align-items: flex-start; gap: 12px; height: 58px; padding: 10px 12px; }
.rau .nav-drop .nav-mega .nav-ico-box { height: 20px; }
.rau .nav-drop .nav-mega .nav-ico { stroke-width: 1.75; }
.rau .nav-sub .nav-sub-t { display: grid; gap: 1px; min-width: 0; }
.rau .nav-sub .nav-sub-t > span { display: block; font: 600 15px/20px var(--sans); letter-spacing: -.005em; white-space: nowrap; }
.rau .nav-sub .nav-sub-line { display: block; max-width: none; font: 400 13px/18px var(--sans); white-space: nowrap; }
.rau .nav-drop .nav-mega .nav-cta { border-radius: var(--r-md); } /* its place and shape are nav-mega.css's (the concept's own strip) */
.rau .nav-cta-h { font: 600 16px/1.3 var(--sans); }
.rau .nav-cta-line { font: 400 14px/1.4 var(--sans); }
.rau .nav-drop .nav-mega .nav-cta .btn { min-height: 44px; padding: 0 24px; font-size: 16px; }
.rau .bar-actions { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
/* beside the drawn links (their own auto margins centre them) the actions take no auto margin of their own; whenever the links fold
   into the menu (below 1024px, or navFit's is-crowded) the actions keep theirs and sit at the bar's right edge */
@media (min-width: 1024px) { .rau .bar:not(.is-crowded) .nav-links + .bar-actions { margin-left: 0; } }
.rau .bar-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #FFFFFF; text-decoration: none; font: 500 15px/1 var(--sans); }
.rau .bar-tel svg { width: 16px; height: 16px; }
/* the burger: a glass square, three lines that turn into an X */
.rau .burger {
  display: none; place-content: center; justify-items: center; gap: 4px; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: rgb(255 255 255 / .06); color: #FFFFFF;
}
.rau .burger i { display: block; width: 18px; height: 1.75px; border-radius: 1px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.rau .burger.is-open i:nth-child(1) { transform: translateY(5.75px) rotate(45deg); }
.rau .burger.is-open i:nth-child(2) { opacity: 0; }
.rau .burger.is-open i:nth-child(3) { transform: translateY(-5.75px) rotate(-45deg); }
/* the phone menu: the bar's night under it (the menu's colours: menu-ground.css); the groups open to their links (icon, name, line), then the flat links, the strip, the pair */
.rau .mmenu {
  position: fixed; top: var(--bar); left: 0; right: 0; bottom: 0; z-index: 49;
  display: none; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 0 32px;
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s .25s;
}
.rau .mmenu.is-open { opacity: 1; visibility: visible; transition: opacity .25s var(--ease), visibility 0s; }
.rau .mmenu-in { display: grid; gap: 24px; }
.rau .mmenu-links > li { border-bottom: 1px solid var(--menu-line); }
.rau .mmenu-links > li > a:where(:not(.btn)), .rau .mmenu-links > li > .linkbtn { display: flex; align-items: center; width: 100%; min-height: 56px; font: 500 18px/1.2 var(--sans); text-decoration: none; text-align: left; }
.rau .mm-drop { display: grid; grid-template-columns: 1fr auto; }
.rau .mm-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 44px; min-height: 56px; cursor: pointer; font: 500 18px/1.2 var(--sans); }
.rau .mm-drop.has-page .mm-group summary { justify-content: center; }
.rau .mm-drop:not(.has-page) .mm-group { grid-column: 1 / -1; }
.rau .mm-group summary::-webkit-details-marker { display: none; }
.rau .mm-group summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--menu-ink-2); border-bottom: 1.5px solid var(--menu-ink-2); transform: translateY(-2px) rotate(45deg); transition: transform .18s var(--ease); }
.rau .mm-group[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.rau .mm-sub { grid-column: 1 / -1; display: none; padding: 4px 0 16px; }
.rau .mm-drop:has(details[open]) .mm-sub { display: grid; }
.rau .mm-sub .mm-col-h { padding: 14px 0 4px; font: 600 11px/1.55 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--menu-accent); }
.rau .mm-sub a:where(:not(.btn)), .rau .mm-sub .linkbtn { display: flex; align-items: flex-start; gap: 14px; width: 100%; min-height: 56px; padding: 12px 0; text-decoration: none; text-align: left; }
.rau .mm-sub .nav-ico-box { display: grid; place-items: center; width: 20px; height: 22px; flex: none; }
.rau .mm-sub .nav-ico { width: 20px; height: 20px; stroke-width: 1.75; }
.rau .mm-sub .nav-sub-t { display: grid; min-width: 0; }
.rau .mm-sub .nav-sub-t > span { font: 600 16px/22px var(--sans); }
.rau .mm-sub .nav-sub-line { font: 400 14px/20px var(--sans); }
.rau .mm-sub .mm-cta { display: grid; gap: 6px; margin-top: 16px; padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--menu-line); }
.rau .mm-cta .nav-cta-h { font: 600 17px/1.55 var(--sans); }
.rau .mm-cta .nav-cta-line { font: 400 15px/1.55 var(--sans); margin-bottom: 12px; }
.rau .mmenu-cta { display: grid; gap: 12px; }
.rau .mmenu-cta > .btn { width: 100%; }
.rau .mmenu-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rau .mmenu-contact .btn { width: 100%; padding: 0 12px; font-size: 15px; }
/* seven links need about 1000px beside the lockup and the button: they fold into the drawer below 1024px (and sooner when the
   owner's words are longer: navFit's is-crowded) */
@media (max-width: 1023px) {
  .rau .nav-links { display: none; }
  .rau .burger { display: grid; }
  .rau .mmenu { display: block; }
}
.rau .bar.is-crowded .nav-links { display: none; }
.rau .bar.is-crowded .burger { display: grid; }
.rau:has(.bar.is-crowded) .mmenu { display: block; }
/* while the links share the row (above 1023px, where they fold into the drawer), the brand holds its width: free to shrink, it let a
   full bar never fill, so navFit never moved the links into the menu, and the lockup's title and Powered-by lines showed cut (and the
   name beside the line shrank to a few letters) at 1440 (found by designer review 2's new check, lockup-look.test.tsx's fitted header:
   the R2 hold Meridian, Cinematic, Golden Hour and Quartz have). Held, an overfull bar is crowded, where it may shrink again. */
@media (min-width: 1024px) { .rau .bar:not(.is-crowded) .brandmark { flex: none; } }
@media (max-width: 720px) {
  /* the phone's own logo height (the Logo pane's phone size), else the computer's */
  .rau .brandmark .logo { --logo-h: var(--rs-logo-h-phone, var(--rs-logo-h, 30px)); }
  /* a phone's bar keeps the owner's logo (never hidden: Andrew, 2026-10-17) and beside it the officer's name and NMLS, always
     (REBEL SITES 10-27: the logo alone left the bar nameless): too long for the row they take a second line, never an
     ellipsis; the NMLS at a size a phone reads; 16px between the lockup and the menu button */
  .rau .bar .brandmark .mark-words > * { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
  /* the words never narrower than their longest word (they ran onto the logo at 390): a bar too full for them runs over, so
     keepFit sees the logo past the brand's edge and the kept button gives way */
  .rau .bar .brandmark .mark-words { min-width: auto; }
  .rau .bar .brandmark .mark-words .label { font-size: 12px; }
  .rau .bar-in { gap: 16px; }
  .rau .bar-actions { gap: 8px; }
  .rau .bar-actions .btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
  /* a phone's bar keeps one button, the header's main (`bar-keep`): the second waits in the dock and the menu; the main gives way
     to them too where it would crowd the brand (measured, AuthorityRuntime keepFit) */
  .rau .bar:not(.bar-min) .bar-actions > .btn:not(.bar-keep) { display: none; }
  .rau .bar.keep-gives-way .bar-actions > .bar-keep { display: none; }
  /* never drawn, then taken away (Andrew, 2026-10-20, Larry's phone: "flashing apply now in the header next to the hamburger then
     disappearing"): until keepFit has measured, the kept button holds its room unseen (so the measurement is true), then shows or gives way */
  .rau .bar:not(.keep-measured) .bar-actions > .bar-keep { visibility: hidden; }
  .rau .bar-min .bar-tel { justify-content: center; width: 44px; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
  .rau .bar-min .bar-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 340px) { .rau .bar:not(.bar-min) .bar-actions > .bar-keep { display: none; } }
/* the narrowest phones: the logo gives up its size and the rule beside it before the name or the NMLS gives up a letter */
@media (max-width: 420px) {
  .rau .bar .brandmark { --lockup-gap: 12px; }
  .rau .bar .brandmark.has-logo:not([data-logo-broken]) .logo { max-width: 104px; padding-left: 0; border-left: 0; }
  .rau .bar .brandmark .logo-img { max-height: 28px; }
}

/* ============================================================
   THE HERO — the city behind, the person in front
   ============================================================ */
.rau .hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(720px, 100svh / var(--z), 900px);
  display: flex; flex-direction: column;
  background: var(--night); color: #FFFFFF;
}
/* the background: the colour field (the night alone: Color is one flat field, no halo), the gradient, or a photograph under the brand's wash */
/* the gradient (hero-background.ts heroGradient, drawn by hero-backdrop.tsx HeroGradientFill in the overlay's place: the primary deep
   in the top corner into its own colour): its light, the secondary as itself, rises behind the person at the foot's right, the
   concept's bloom (110% by 90% at 88% 100%, half strength, gone by 62%), behind the hero, every opening and the closer */
.rau .hero-light { inset: 0; height: auto; background: radial-gradient(110% 90% at 88% 100%, color-mix(in srgb, var(--light) 50%, transparent) 0%, transparent 62%); }
.rau .hero-photo { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.rau .hero-photo img, .rau .hero-photo picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* the motion (zoom, drift) is every template's (hero-motion.css: Andrew, 2026-10-20, the concept's 28 s zoom 'moves so painfully slow'); the zoom keeps the concept's origin */
.rau .hero-photo.is-zoom img { transform-origin: 62% 55%; }
.rau .hero-overlay { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
/* the grade: a light wash of the secondary over a photograph, then shade only where the words sit, so the city stays in view */
.rau .hero-grade { position: absolute; inset: 0; z-index: -2; pointer-events: none; display: none; }
.rau .hero-photo ~ .hero-grade { display: block; }
.rau .hero-grade::before { content: ""; position: absolute; inset: 0; background: var(--light); mix-blend-mode: multiply; opacity: .28; }
.rau .hero-grade::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(10 13 23 / .92) 0%, rgb(10 13 23 / .84) 32%, rgb(10 13 23 / .62) 46%, rgb(10 13 23 / .15) 62%, rgb(10 13 23 / 0) 74%),
    linear-gradient(180deg, rgb(10 13 23 / .55) 0%, rgb(10 13 23 / 0) 20%, rgb(10 13 23 / 0) 66%, rgb(10 13 23 / .88) 100%);
}
/* the halo: the light the person stands in (drawn in the gradient, the photograph, the slideshow and the film; never in Color, one
   flat field, so the element is not drawn there: sections/Home.tsx and Blocks.tsx OpeningGround) */
.rau .hero-halo {
  position: absolute; z-index: -1; pointer-events: none;
  right: max(-120px, calc((100vw / var(--z) - var(--max)) / 2 - 220px)); bottom: -18%;
  width: min(980px, 74vw / var(--z)); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--light) 62%, transparent), color-mix(in srgb, var(--light) 22%, transparent) 55%, transparent 100%);
}
.rau .hero.no-figure .hero-halo { opacity: .7; }
.rau .hero.has-photo .hero-halo { opacity: .85; }
.rau .hero-in { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; padding-top: calc(var(--bar) + 56px); padding-bottom: 88px; }
/* just the background (the owner's choice): no figure, the words take the width */
.rau .hero.no-figure .hero-in { grid-template-columns: minmax(0, 1fr); }
.rau .hero.no-figure .hero-copy { max-width: 760px; }
.rau .hero.has-proof .hero-in { padding-bottom: 196px; }
.rau .hero-copy { position: relative; z-index: 2; display: grid; gap: 26px; max-width: min(590px, calc(100vw / var(--z) - 722px)); }
.rau .kicker {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: rgb(10 13 23 / .7); border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(16px);
  font: 500 13px/1.4 var(--sans); letter-spacing: .01em; color: var(--pill);
}
.rau .kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--light); box-shadow: 0 0 0 4px color-mix(in srgb, var(--light) 28%, transparent); flex: none; }
.rau .kicker-words { min-width: 0; }
.rau .display {
  font: 500 var(--fs-display)/1 var(--display); letter-spacing: -.035em;
  background: linear-gradient(140deg, #FFFFFF 30%, color-mix(in srgb, var(--light) 22%, #FFFFFF) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* over a photograph the headline is solid white (its tinted end would lose contrast over a bright sky) */
.rau .hero:has(> .hero-photo) .display { background: none; -webkit-text-fill-color: #FFFFFF; color: #FFFFFF; }
/* a phone: the headline a size up and a step bolder, 44 at 360 to 48 from 394 (it sat on the 42 floor on every phone: Andrew,
   2026-10-21, "headline and cta buttons look DINKY on mobile"); a long word wraps inside the column rather than past it, and its
   last two words (held on one line, keep-words.ts; words.tsx pairFit, --last-pair) set no larger than the column holds them, as
   the opening's head, and an owner's long headline (--chars, its characters) no larger than four lines of the column hold
   (authority/__tests__/hero-phone-size) */
@media (max-width: 560px) {
  .rau .display { font-size: clamp(42px, 12.2vw, 48px); font-weight: 600; overflow-wrap: break-word; }
  .rau .hero-copy:has(> .display[style*="--last-pair"]) { container-type: inline-size; }
  .rau .display[style*="--last-pair"] { font-size: min(clamp(42px, 12.2vw, 48px), calc(100cqi / (var(--last-pair) * .5)), calc(400cqi / (var(--chars, 1) * .5))); }
}
.rau .hero-lede { font-size: var(--fs-lede); line-height: 1.5; color: rgb(255 255 255 / .74); max-width: 520px; }
.rau .hero-lede.rich a { color: var(--lk); }
.rau .hero-fine { font-size: 14px; color: rgb(255 255 255 / .6); }
/* the Google rating under the buttons (under the owner's line when there is one), where the owner chose it (kinds/hero.ts
   `underButtons`): the G, the number, the five stars, the count, in the hero's light inks (the reviews' .g-score, set for the night) */
.rau .hero-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; font-size: 15px; color: rgb(255 255 255 / .74); text-decoration: none; }
.rau .hero-rating b { font-weight: 600; color: #FFFFFF; }
.rau .hero-rating .stars5 { width: 104px; height: 20px; color: var(--review-star); }
/* under the owner's line (Andrew, 2026-10-21: the line goes UNDER the buttons, not under the rating), the 10px the pair always had */
.rau .hero-fine + .hero-rating { margin-top: 10px; }
/* the person: cut out, standing on the hero's floor at the right in the halo (or their photograph framed in the same place) */
.rau .hero { --fig-right: max(var(--gutter), calc((100vw / var(--z) - var(--max)) / 2 - 24px)); --fig-w: min(420px, 32vw / var(--z)); }
.rau .hero-figure {
  position: absolute; z-index: 1; bottom: 0; pointer-events: none; margin: 0;
  right: var(--fig-right);
  height: calc(100% - var(--bar) - 24px); max-height: 804px; aspect-ratio: 896 / 1088;
}
.rau .hero-figure img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: bottom; object-position: bottom; filter: drop-shadow(0 30px 60px rgb(0 0 0 / .45)); pointer-events: auto; }
.rau .hero-figure.is-framed { bottom: auto; top: calc(var(--bar) + 56px); height: auto; width: var(--fig-w); aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 30px 80px rgb(0 0 0 / .4), inset 0 0 0 1px rgb(255 255 255 / .14); }
.rau .hero-figure.is-framed img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 20%; object-position: 50% 20%; filter: none; }
/* no photograph yet: the initials in the frame, a mark of the secondary on the raised night */
.rau .hero-figure.is-initials { display: grid; place-items: center; background: var(--night-raised); }
.rau .hero-initials { font: 500 clamp(72px, 9vw, 120px)/1 var(--display); letter-spacing: -.04em; color: var(--mk-r); }
.rau .hero.has-proof .hero-figure.is-framed { top: calc(var(--bar) + 40px); }
.rau .hb-pause { right: max(var(--gutter), 16px); bottom: 16px; }
.rau .hero.has-proof .hb-pause { bottom: auto; top: calc(var(--bar) + 16px); }
/* with the band, beside a framed portrait: the portrait holds that corner (flush to the same right edge from the bar + 40px, so the
   disc from the bar + 16px lay 20px on its top corner up to about 1420 wide), and under it there is no room either (on a 1366×768
   laptop the hero is 720 tall and the portrait already ends under the band's glass), so the button stands at the portrait's
   top-left, aligned to its top, 16px from it. A cut-out person's top corner is always empty: the corner stays theirs. The desktop's
   own query, so the phone's lift above the band (the 900px block) is never outweighed */
@media (min-width: 901px) {
  .rau .hero.has-proof.has-photo .hb-pause { bottom: auto; top: calc(var(--bar) + 40px); right: calc(var(--fig-right) + var(--fig-w) + 16px); }
  /* a cut-out person with NO band: the lower-right corner is where a head-and-shoulders cut-out is widest (the disc lay on the shoulder
     at 901–1180 and on a 1280×720 laptop; video showtime review 4), so the disc takes the corner under the bar, as the band case does:
     the cut-out's box starts at the bar + 160/200 (≤1180/≤1023) and never meets it */
  .rau .hero.has-cut .hb-pause { bottom: auto; top: calc(var(--bar) + 16px); }
}
@media (max-width: 1180px) {
  .rau .hero-in { grid-template-columns: minmax(0, 1fr); }
  .rau .hero-copy { max-width: 470px; }
  .rau .hero-figure { height: calc(100% - var(--bar) - 160px); }
}
@media (max-width: 1023px) {
  .rau .hero-copy { max-width: 420px; }
  .rau .hero-figure { height: calc(100% - var(--bar) - 200px); }
}
@media (max-width: 900px) {
  .rau .hero { min-height: 0; }
  .rau .hero-in, .rau .hero.has-proof .hero-in { padding-top: calc(var(--bar) + 28px); padding-bottom: 0; align-items: start; }
  .rau .hero.no-figure .hero-in { padding-bottom: 72px; }
  .rau .hero.no-figure.has-proof .hero-in { padding-bottom: 96px; }
  .rau .hero-copy { max-width: none; gap: 20px; }
  .rau .hero-photo img { -o-object-position: 62% 40%; object-position: 62% 40%; }
  .rau .hero-grade::after { background: linear-gradient(180deg, rgb(10 13 23 / .86) 0%, rgb(10 13 23 / .72) 42%, rgb(10 13 23 / .12) 62%, rgb(10 13 23 / .4) 84%, rgb(10 13 23 / .95) 100%); }
  /* with no person standing in the clear band the words run down through it (the line at 247-272, the buttons at 292-416 of a 492
     hero at 390), so the shade under them holds to the foot, one smooth darkening: the line's .74 white keeps 4.5:1 over any frame,
     the film still in view (Andrew, mortgagepops.com, 2026-10-20; authority/__tests__/hero-grade-phone) */
  .rau .hero.no-figure .hero-grade::after { background: linear-gradient(180deg, rgb(10 13 23 / .86) 0%, rgb(10 13 23 / .72) 42%, rgb(10 13 23 / .7) 84%, rgb(10 13 23 / .95) 100%); }
  .rau .hero-halo { right: -40%; bottom: 4%; width: calc(130vw / var(--z)); }
  .rau { --cut-w: min(76vw / var(--z), 400px); }
  .rau .hero-figure { position: relative; right: auto; height: auto; width: var(--cut-w); margin: 24px auto 0; aspect-ratio: 896 / 1088; }
  .rau .hero-figure.is-framed, .rau .hero.has-proof .hero-figure.is-framed { top: auto; width: min(76vw / var(--z), 360px); margin-bottom: 32px; }
  .rau .hero.has-proof .hero-figure.is-framed { margin-bottom: 96px; }
  /* without the band the button keeps the shared lower corner (16px from the foot): where one is drawn at all the framed portrait,
     or the words with no portrait, end above its room: 16, the 44px button, 16 (at 390 the portrait's margin of 32 put the
     button on its corner) */
  .rau .hero:has(.hb-pause) .hero-figure.is-framed { margin-bottom: 76px; }
  .rau .hero.no-figure:has(.hb-pause) .hero-in { padding-bottom: 76px; }
  /* the pause button stands above the band's 64px lap (below, the glass takes the tap), and where one is drawn at all (a background
     that moves: hero-backdrop.tsx) the portrait, or the words with no portrait, end above its room: lap, 16, the 44px button, 16 */
  .rau .hero.has-proof .hb-pause { top: auto; bottom: calc(64px + 16px); }
  .rau .hero.has-proof:has(.hb-pause) .hero-figure.is-framed { margin-bottom: 140px; }
  .rau .hero.no-figure.has-proof:has(.hb-pause) .hero-in { padding-bottom: 140px; }
  /* the cut-out person stands on the hero's foot, the glass over their feet, so above the band is their arms: the button stands
     beside their head instead, its top at the figure's (the figure's box is its width at 1088/896), where a cut-out is always empty */
  .rau .hero.has-cut.has-proof .hb-pause { bottom: calc(var(--cut-w) * 1088 / 896 - 44px); }
}
@media (max-width: 720px) { .rau .kicker { font-size: 12px; } }

/* ============================================================
   THE LIGHT HERO — the owner's choice (kit.tsx `lightHero`; Andrew, 2026-10-22: "does Authority not allow a light hero it should")
   ============================================================
   The home page's hero on the light tone's paper in every background, whatever the page tone (theme.ts `day`, carried as --au-day-*:
   the paper's words, details, links and buttons, each held on the paper, the gradient's tint and the photograph's wash); the colour field the paper with the light the person stands
   in; the gradient the paper into a tint of that light (theme.ts `dayTint`); a photograph, a slideshow or a film under a light wash
   that keeps the paper's words at AA over any frame (authority/__tests__/light-hero). The header over it, until the page moves,
   takes the paper's words and the logo drawn for a light ground (Golden Hour's `data-hero-ground` mark). The default is the night. */
.rau .day, .rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) {
  --g: var(--au-day, #F7F7F5); --raised: var(--au-day-raised, #FFFFFF);
  --t: var(--au-day-text, #10141D); --t2: var(--au-day-muted, #4A4F5E); --t3: var(--au-day-faint, #5D6272);
  --acc: var(--au-day-accent, #2964D5); --acc-r: var(--au-day-accent-raised, #2964D5);
  --mk: var(--au-day-mark, #2964D5); --mk-r: var(--au-day-mark-raised, #2964D5);
  --lk: var(--au-day-link, #896E29); --lk-r: var(--au-day-link-raised, #896E29);
  --b: var(--au-day-btn, #AF914B); --ob: var(--au-day-on-btn, #10141D); --be: var(--au-day-btn-edge, transparent);
  --b-r: var(--au-day-btn-raised, #AF914B); --ob-r: var(--au-day-on-btn-raised, #10141D); --be-r: var(--au-day-btn-raised-edge, transparent);
  --line: color-mix(in srgb, var(--t) 10%, transparent); --line-2: color-mix(in srgb, var(--t) 18%, transparent);
  --focus: var(--ring-paper); --card-shadow: none; --card-shadow-hover: none;
}
.rau .hero.day { background: var(--g); color: var(--t); border-bottom: 1px solid var(--line); }
.rau .hero.day .display { background: none; -webkit-text-fill-color: currentColor; color: var(--t); }
.rau .hero.day .hero-lede { color: var(--t2); }
.rau .hero.day .hero-fine { color: var(--t3); }
.rau .hero.day .hero-rating { color: var(--t2); }
.rau .hero.day .hero-rating b { color: var(--t); }
/* the pill: a white card on the paper, its words the secondary's shade that reads on white */
.rau .hero.day .kicker { background: var(--raised); border-color: var(--line); color: var(--acc-r); backdrop-filter: none; }
.rau .hero.day .hero-halo { opacity: .45; }
.rau .hero.day .hero-figure.is-initials { background: var(--raised); box-shadow: var(--paper-shadow, none); }
.rau .hero.day .hero-figure img { filter: drop-shadow(0 24px 48px color-mix(in srgb, var(--t) 18%, transparent)); }
.rau .hero.day .hero-figure.is-framed img { filter: none; }
/* the gradient: the paper to 42% (the words' side), then into the light's tint at the foot's right, the light's bloom behind the person */
.rau .hero.day .hero-day-gradient { overflow: hidden; background-image: linear-gradient(135deg, var(--g) 0%, var(--g) 42%, var(--au-day-tint, #DCE6F8) 100%); }
.rau .hero.day .hero-day-gradient .hero-light { background: radial-gradient(110% 90% at 88% 100%, color-mix(in srgb, var(--light) 28%, transparent) 0%, transparent 62%); }
/* a photograph, a slideshow or a film: the paper's wash where the words sit (90% over the words' column to 50% of the width, past its
   47.9% edge at 1440) and across the whole top behind the clear header (90% to 11% of a 720px hero, past the bar's foot), so the
   paper's words, its quiet words and the header's links keep AA over a black frame; clear toward the person; the line under the
   buttons in the quiet words, never the faintest (authority/__tests__/light-hero, computed over a black and a mid-grey frame) */
.rau .hero.day .hero-grade::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--g) 95%, transparent) 0%, color-mix(in srgb, var(--g) 92%, transparent) 32%, color-mix(in srgb, var(--g) 90%, transparent) 50%, color-mix(in srgb, var(--g) 35%, transparent) 64%, color-mix(in srgb, var(--g) 0%, transparent) 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--g) 92%, transparent) 0%, color-mix(in srgb, var(--g) 90%, transparent) 11%, color-mix(in srgb, var(--g) 0%, transparent) 24%, color-mix(in srgb, var(--g) 0%, transparent) 66%, color-mix(in srgb, var(--g) 90%, transparent) 100%);
}
.rau .hero.day:has(> .hero-photo) .hero-fine { color: var(--t2); }
@media (max-width: 900px) {
  .rau .hero.day .hero-grade::after { background: linear-gradient(180deg, color-mix(in srgb, var(--g) 95%, transparent) 0%, color-mix(in srgb, var(--g) 90%, transparent) 42%, color-mix(in srgb, var(--g) 30%, transparent) 62%, color-mix(in srgb, var(--g) 50%, transparent) 84%, color-mix(in srgb, var(--g) 95%, transparent) 100%); }
  .rau .hero.day.no-figure .hero-grade::after { background: linear-gradient(180deg, color-mix(in srgb, var(--g) 95%, transparent) 0%, color-mix(in srgb, var(--g) 90%, transparent) 42%, color-mix(in srgb, var(--g) 88%, transparent) 84%, color-mix(in srgb, var(--g) 95%, transparent) 100%); }
  /* the numbers band past the hero's foot stands on the light hero's paper, and the gradient settles into it */
  .rau:has(main > .hero:first-child[data-hero-ground="light"]) .proof.on-hero { background: linear-gradient(180deg, transparent 64px, var(--au-day, #F7F7F5) 64px); }
  .rau .hero.day.has-proof [data-hero-gradient]::after { background: linear-gradient(180deg, transparent 72%, var(--g) 100%); }
}
/* the numbers band over the light hero: the brand's field, solid (its glass over the paper would grey its white words), in the field's words */
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .proof.on-hero .proof-in { background: var(--field); color: var(--on-field); backdrop-filter: none; }
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .proof.on-hero .proof-fig { color: var(--on-field); }
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .proof.on-hero .proof-label { color: var(--au-field-muted, var(--on-field)); }
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .proof.on-hero .proof-cell + .proof-cell { border-color: color-mix(in srgb, var(--on-field) 20%, transparent); }
/* the header over the light hero until the page moves: the paper's words, the lockup and the logo drawn for a light ground (the phone
   menu open under it takes the header's ground: menu-ground.css) */
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .brandmark, .rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .bar-tel { color: var(--t); }
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .nav-links > li > a:where(:not(.btn)):hover, .rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .nav-links > li > .linkbtn:hover, .rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .nav-drop summary:hover, .rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .nav-drop details[open] > summary { color: var(--t); background: color-mix(in srgb, var(--t) 6%, transparent); }
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .nav-links > li > a[aria-current="page"] { color: var(--t); }
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .nav-drop.has-page:hover, .rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .nav-drop.has-page:has(details[open]) { background: color-mix(in srgb, var(--t) 6%, transparent); }
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .nav-drop.has-page:hover > a, .rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .nav-drop.has-page:has(details[open]) > a, .rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .nav-drop.has-page:has(details[open]) summary { color: var(--t); }
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .burger { background: color-mix(in srgb, var(--t) 4%, transparent); color: var(--t); }
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .logo-v.on-dark { visibility: hidden; }
.rau:has(main > .hero:first-child[data-hero-ground="light"]) .bar:not(.is-solid):not(.bar-min) .logo-v.on-light { visibility: visible; }

/* the numbers: a frosted band across the hero's foot ("proof in glass"), or a band of its own on the night */
.rau .proof { position: relative; z-index: 3; }
.rau .proof.on-hero { margin-top: -152px; padding-bottom: 32px; }
.rau .proof.night { padding-block: 40px; }
.rau .proof-in {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border-radius: var(--r-lg); border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--field) 52%, transparent); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--shadow-glass); color: #FFFFFF;
}
.rau .proof-cell { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 24px 32px; min-height: 120px; }
.rau .proof-cell + .proof-cell { border-left: 1px solid rgb(255 255 255 / .2); }
.rau .proof-fig { display: flex; align-items: center; gap: 14px; font: 500 var(--proof-size, clamp(34px, 3.1vw, 44px))/1 var(--display); letter-spacing: -.03em; color: #FFFFFF; white-space: nowrap; }
.rau .proof-label { font-size: 14px; line-height: 1.35; color: rgb(255 255 255 / .74); }
.rau .stars5-base, .rau .stars5-fill { pointer-events: none; }
.rau .proof-stars { width: 130px; height: 25px; color: var(--review-star); flex: none; }
@media (max-width: 1023px) { .rau .proof-cell { padding: 20px 22px; } }
@media (max-width: 900px) {
  /* the stacked band runs past the hero's foot (the concept's hero holds it): below its 64px over the hero it stands on the night,
     and a gradient hero settles into the night at its foot, so the band never floats over the paper and no seam shows */
  .rau .proof.on-hero { margin-top: -64px; padding-bottom: 24px; background: linear-gradient(180deg, transparent 64px, var(--night) 64px); }
  .rau .hero.has-proof [data-hero-gradient]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 72%, var(--night) 100%); }
  .rau .proof-in { grid-auto-flow: row; grid-auto-rows: 1fr; }
  .rau .proof-cell { padding: 16px 20px; min-height: 0; }
  .rau .proof-cell + .proof-cell { border-left: 0; border-top: 1px solid rgb(255 255 255 / .2); }
  .rau .proof-stars { width: 104px; height: 20px; }
}

/* ============================================================
   THE STRIP — short lines moving left, paused under the pointer
   ============================================================ */
.rau .strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.rau .strip-track { display: flex; width: -moz-max-content; width: max-content; animation: rau-strip var(--strip-time, 38s) linear infinite; }
.rau .strip:hover .strip-track { animation-play-state: paused; }
.rau .strip ul { display: flex; align-items: center; }
.rau .strip li { display: flex; align-items: center; gap: 28px; padding: 22px 28px 22px 0; font: 500 20px/1.55 var(--sans); letter-spacing: -.01em; color: var(--t2); white-space: nowrap; }
.rau .strip-rating { display: inline-flex; align-items: center; gap: 12px; }
.rau .strip-rating .stars5 { width: 104px; height: 20px; color: var(--review-star); }
.rau .strip li::after { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--mk); flex: none; }
/* one copy to the left (site-runtime.ts runningStrips sets the copy and its time; with no script, the two copies at -50%) */
@keyframes rau-strip { to { transform: translateX(calc(-1 * var(--strip-copy, 50%))); } }

/* ============================================================
   CARD ROWS — one design, one size, one type scale per row
   ============================================================ */
.rau .cards { display: grid; gap: var(--gap-card); grid-auto-rows: 1fr; }
.rau .cards-1 { grid-template-columns: minmax(0, 520px); }
.rau .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rau .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rau .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rau .card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0;
  padding: 28px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--card-shadow);
  color: var(--t); text-decoration: none;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.rau .card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: var(--line-2); }
.rau .card-ico { display: inline-flex; color: var(--mk); }
.rau .card-t { margin-top: 8px; font: 600 22px/1.2 var(--sans); letter-spacing: -.02em; }
.rau .card-p { font-size: 16px; line-height: 1.5; color: var(--t2); }
.rau .card > .link-arrow, .rau .card > .btn { margin-top: auto; }
.rau .card > .link-arrow { padding-top: 8px; }
/* a card that is its own link (where to start): its arrow in the corner */
.rau .card.way { width: 100%; padding-right: 64px; min-height: 100%; text-align: left; }
.rau .card.way .card-t { margin-top: 0; }
.rau .card.way .go { position: absolute; top: 28px; right: 26px; color: var(--lk); }
.rau .card.way .go svg { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.rau .card.way:hover .go svg { transform: translateX(4px); }
@media (max-width: 1100px) { .rau .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rau .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rau :is(.cards-2, .cards-3, .cards-4) { grid-template-columns: 1fr; } .rau .card { padding: 24px; } }

/* the offer's strip under the situations: the words left, the one button right (the dropdown's strip at section scale) */
.rau .section.joins-aside { padding-bottom: 0; }
.rau .section.is-aside { padding-top: var(--gap-card); }
.rau .strip-ask { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 26px 28px 26px 32px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.rau .strip-ask-words { display: grid; gap: 4px; min-width: 0; }
.rau .strip-ask-t { font: 600 22px/1.25 var(--sans); letter-spacing: -.02em; }
.rau .strip-ask-p { font-size: 16px; color: var(--t2); }
@media (max-width: 760px) { .rau .strip-ask { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px; } }

/* a quote card: the quote mark, the words, the name */
.rau .quote .qmark { width: 20px; height: 20px; color: var(--mk); }
.rau .quote > p { font: 500 19px/1.4 var(--sans); letter-spacing: -.012em; color: var(--t); }
.rau .quote-by { margin-top: auto; padding-top: 16px; font-size: 15px; color: var(--t2); }
.rau .quote-by strong { font-weight: 600; color: var(--t); }
.rau .quotes.cards { grid-auto-rows: auto; }
.rau .quotes.cards-3 { grid-auto-rows: 1fr; }
.rau .quotes-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; }
.rau .g-score { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--t2); }
.rau .g-score b { font-weight: 600; color: var(--t); }
.rau .gmark { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: #FFFFFF; flex: none; }
.rau .g-score .stars5, .rau .g-band .stars5 { width: 104px; height: 20px; color: var(--review-star); }
.rau .g-band { display: flex; align-items: center; gap: 28px; margin-bottom: 40px; padding: 28px 32px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); }
.rau .g-band-score { font: 500 clamp(56px, 6vw, 88px)/.9 var(--display); letter-spacing: -.04em; }
.rau .g-band-meta { display: grid; gap: 8px; }
.rau .g-band-line { display: flex; align-items: center; gap: 10px; color: var(--t2); }
.rau .q-feature { margin-bottom: var(--gap-card); }
.rau .q-feature > p { font-size: clamp(22px, 2vw, 26px); line-height: 1.4; }
.rau .q-read { margin-top: 4px; }
.rau .quotes.by-many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .rau .quotes.by-many { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rau .quotes.by-many { grid-template-columns: 1fr; } .rau .g-band { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   WHY — statements on glass; the field's blue light behind them
   ============================================================ */
.rau .glow-field { overflow: hidden; isolation: isolate; }
.rau .glow-field::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; width: 1100px; max-width: 120%; height: 520px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--light) 32%, transparent), transparent); pointer-events: none;
}
.rau .glass-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap-card); }
.rau .glass-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rau .glass-row.n1 { grid-template-columns: minmax(0, 640px); }
.rau .glass-row.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rau .glass {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--raised) 72%, transparent); border: 1px solid var(--glass-edge); backdrop-filter: blur(32px); box-shadow: var(--shadow-glass);
}
.rau .paper .glass, .rau .white .glass { background: var(--raised); border-color: var(--line); box-shadow: var(--card-shadow); }
.rau .glass-h { margin-top: 28px; font: 600 26px/1.15 var(--sans); letter-spacing: -.02em; }
.rau .glass .num + .glass-h { margin-top: 28px; }
.rau .glass > .glass-h:first-child { margin-top: 0; }
.rau .glass-p { color: var(--t2); }
.rau .glass > .link-arrow { margin-top: auto; }
@media (max-width: 900px) { .rau .glass-row, .rau .glass-row.n2, .rau .glass-row.n4 { grid-template-columns: 1fr; } .rau .glass-h { margin-top: 12px; } .rau .glass { padding: 26px; } }

/* ============================================================
   MEET — the framed portrait, the bio, the facts
   ============================================================ */
.rau .meet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.rau .meet.no-photo { grid-template-columns: minmax(0, 760px); }
.rau .portrait { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; background: var(--raised); }
.rau .portrait img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 20%; object-position: 50% 20%; }
.rau .portrait.is-initials { display: grid; place-items: center; background: var(--raised); }
.rau .portrait-initials { font: 500 clamp(72px, 9vw, 120px)/1 var(--display); letter-spacing: -.04em; color: var(--mk); }
.rau .portrait::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); pointer-events: none; }
.rau .portrait-play { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgb(10 13 23 / .7); color: #FFFFFF; border: 1px solid rgb(255 255 255 / .24); font: 600 14px/1 var(--sans); backdrop-filter: blur(12px); }
.rau .portrait-play svg { width: 14px; height: 14px; }
.rau .meet-copy { display: grid; gap: 22px; justify-items: start; }
.rau .meet-role { font-size: 15px; color: var(--t2); }
.rau .meet-bio { font-size: 19px; line-height: 1.6; color: var(--t2); max-width: 600px; }
.rau .meet-bio p + p { margin-top: 12px; }
.rau .facts { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); border-top: 1px solid var(--line-2); margin-top: 6px; justify-self: stretch; }
.rau .fact { padding: 18px 28px 0 0; }
.rau .fact + .fact { padding-left: 28px; border-left: 1px solid var(--line); }
.rau .fact dt { margin-bottom: 8px; }
.rau .fact dd { font-size: 16px; line-height: 1.5; }
.rau .fact a { display: inline-block; padding: 6px 0; margin: -6px 0; color: var(--lk); text-decoration: none; font-weight: 600; }
.rau .fact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rau .meet.is-member .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rau .meet.is-member .facts > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.rau .meet.is-member .facts dt { margin-bottom: 6px; }
.rau .meet.is-member .facts dd a { display: inline-block; padding: 6px 0; margin: -6px 0; color: var(--lk); text-decoration: none; font-weight: 600; }
.rau .reach-facts { min-width: 0; }
.rau .socials { display: flex; flex-wrap: wrap; gap: 10px; }
.rau .socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--t); }
.rau .social-mark { width: 16px; height: 16px; }
.rau .member-bio { font-size: 18px; line-height: 1.6; color: var(--t2); max-width: 620px; }
@media (max-width: 960px) {
  .rau .meet { grid-template-columns: 1fr; gap: 40px; }
  /* a person's page: the words and the button first, the portrait after, so the button is on the first screen */
  .rau .meet.is-member .portrait { order: 2; }
  .rau .portrait { max-width: 420px; }
  .rau .facts, .rau .meet.is-member .facts { grid-template-columns: 1fr; }
  .rau .fact, .rau .fact + .fact { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ============================================================
   HOW IT WORKS — three stations on a line
   ============================================================ */
.rau .track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding-top: 36px; }
.rau .track.by-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rau .track.by-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rau .track.by-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.rau .track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: linear-gradient(90deg, var(--mk), color-mix(in srgb, var(--mk) 15%, transparent)); }
.rau .station { position: relative; display: grid; align-content: start; gap: 12px; }
.rau .station::before { content: ""; position: absolute; top: -36px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--g); border: 2px solid var(--mk); }
.rau .station h3 { font: 600 26px/1.15 var(--sans); letter-spacing: -.02em; }
.rau .station-p { color: var(--t2); }
.rau .track.is-timeline, .rau .tl-wrap .track { grid-template-columns: 1fr; gap: 32px; padding: 0 0 0 36px; max-width: 760px; }
.rau .track.is-timeline::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; background: linear-gradient(180deg, var(--mk), color-mix(in srgb, var(--mk) 15%, transparent)); }
.rau .track.is-timeline .station::before { top: 4px; left: -36px; }
@media (max-width: 860px) {
  .rau .track, .rau .track.by-2, .rau .track.by-3, .rau .track.by-4 { grid-template-columns: 1fr; gap: 32px; padding: 0 0 0 36px; }
  .rau .track::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; background: linear-gradient(180deg, var(--mk), color-mix(in srgb, var(--mk) 15%, transparent)); }
  .rau .station::before { top: 4px; left: -36px; }
}

/* ============================================================
   LOCAL AREAS — tall photo cards, each name over the photograph's fade
   ============================================================ */
.rau .places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap-card); }
.rau .places[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rau .places[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rau .place-link { position: relative; display: block; overflow: hidden; height: 100%; border-radius: var(--r-lg); aspect-ratio: 3 / 4; text-decoration: none; color: #FFFFFF; background: var(--night); isolation: isolate; text-align: left; }
.rau .place-photo { position: absolute; inset: 0; z-index: -2; }
.rau .place-photo img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .8s var(--ease); }
.rau .place-link:hover .place-photo img { transform: scale(1.04); }
.rau .place-link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(10 13 23 / 0) 30%, rgb(10 13 23 / .55) 58%, rgb(10 13 23 / .94) 100%); }
.rau .places.no-photo .place-link { aspect-ratio: auto; min-height: 220px; }
/* a card with no photograph: the field under its own words, no fade */
.rau .place-link:is(.places.no-photo *, :has(> .place-photo.is-empty)) { color: var(--on-field); background: var(--field); }
.rau .place-link:is(.places.no-photo *, :has(> .place-photo.is-empty))::after { display: none; }
.rau .place-link:is(.places.no-photo *, :has(> .place-photo.is-empty)) .place-sub { color: var(--au-field-muted, rgb(255 255 255 / .74)); }
.rau .place-link:is(.places.no-photo *, :has(> .place-photo.is-empty)) .place-arrow { background: transparent; border-color: color-mix(in srgb, var(--on-field) 40%, transparent); }
.rau .place-body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 24px; }
.rau .place-name { font: 600 28px/1.1 var(--sans); letter-spacing: -.025em; }
.rau .place-sub { font-size: 15px; line-height: 1.4; color: rgb(255 255 255 / .74); }
.rau .place-arrow { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .28); backdrop-filter: blur(10px); transition: transform .18s var(--ease); }
.rau .place-arrow svg { width: 16px; height: 16px; }
.rau .place-link:hover .place-arrow { transform: rotate(-45deg); }
@media (max-width: 1023px) { .rau .places, .rau .places[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .rau .places { gap: 12px; }
  .rau .place-link { aspect-ratio: 4 / 5; }
  .rau .place-body { padding: 14px; }
  .rau .place-name { font-size: 20px; }
  .rau .place-sub { font-size: 13px; }
  .rau .place-arrow { top: 10px; right: 10px; width: 32px; height: 32px; }
}

/* ============================================================
   THE CLOSER — the city again behind the one ask
   ============================================================ */
.rau .closer { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF; padding-block: clamp(96px, 11vw, 160px); }
.rau .closer .hero-photo img { -o-object-position: 50% 30%; object-position: 50% 30%; }
.rau .closer .hero-grade { display: block; }
.rau .closer .hero-grade::before { display: none; }
.rau .closer .hero-photo ~ .hero-grade::before { display: block; }
.rau .closer .hero-grade::after { background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--light) 28%, transparent), transparent 70%); }
.rau .closer .hero-photo ~ .hero-grade::after { background: linear-gradient(180deg, rgb(10 13 23 / .78) 0%, rgb(10 13 23 / .62) 50%, rgb(10 13 23 / .88) 100%); }
.rau .closer-in { display: grid; justify-items: center; text-align: center; gap: 24px; }
/* two buttons stacked on a phone share one width, the column's (Andrew, 2026-10-20, mortgagepops.com: "CTA buttons need to auto
   size to the same width as the larger button when stacked like this"; then 2026-10-21, the hero's "headline and cta buttons look
   DINKY on mobile"): full width, the main one first, each 56 tall at 17px, its words wrapping inside it rather than past it, as the
   phone bar's do; the row stretched where its column centres (the closer) or starts (the offer) its children; side by side on a
   wider screen they keep their own widths (templates/__tests__/button-pair-width, authority/__tests__/hero-phone-size) */
@media (max-width: 560px) {
  .rau :is(.hero-copy, .offer-copy, .closer-in) > .cta-row { display: grid; grid-template-columns: 1fr; justify-self: stretch; }
  .rau :is(.hero-copy, .offer-copy, .closer-in) > .cta-row > .btn { width: 100%; min-height: 56px; font-size: 17px; white-space: normal; text-wrap: balance; }
}
.rau .closer-h { max-width: 900px; font: 500 var(--fs-h1)/1.02 var(--display); letter-spacing: -.035em; }
.rau .closer-in .lede { max-width: 560px; color: rgb(255 255 255 / .74); }
.rau .closer-in .cta-row { justify-content: center; margin-top: 8px; }
.rau .phone-big { display: inline-block; padding: 4px 0; font: 500 clamp(28px, 3vw, 40px)/1 var(--display); letter-spacing: -.03em; color: #FFFFFF; text-decoration: none; }
.rau .phone-big:hover { color: var(--lk); }

/* ============================================================
   INNER OPENINGS — the hero's tone, band and glow
   ============================================================ */
.rau .opening { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF; padding: calc(var(--bar) + 88px) 0 96px; }
.rau .opening .hero-photo img { -o-object-position: 50% 40%; object-position: 50% 40%; }
.rau .opening .hero-photo ~ .hero-grade::after { background: linear-gradient(90deg, rgb(10 13 23 / .9) 0%, rgb(10 13 23 / .85) 55%, rgb(10 13 23 / .6) 100%), linear-gradient(180deg, rgb(10 13 23 / .4), rgb(10 13 23 / 0) 30%, rgb(10 13 23 / 0) 70%, rgb(10 13 23 / .85)); }
.rau .opening.has-figure .hero-photo ~ .hero-grade::after { background: linear-gradient(90deg, rgb(10 13 23 / .92) 0%, rgb(10 13 23 / .87) 46%, rgb(10 13 23 / .55) 62%, rgb(10 13 23 / .1) 82%), linear-gradient(180deg, rgb(10 13 23 / .45), rgb(10 13 23 / 0) 30%, rgb(10 13 23 / 0) 70%, rgb(10 13 23 / .85)); }
.rau .opening .hero-halo { opacity: .55; }
.rau .opening-in { display: grid; gap: 22px; max-width: 760px; justify-items: start; }
.rau .opening-h { font: 500 var(--fs-h1)/1.03 var(--display); letter-spacing: -.035em; max-width: 18ch; overflow-wrap: break-word; }
/* its last two words held on one line (keep-words.ts; words.tsx pairFit, --last-pair: their characters): set no larger than the
   column holds them, as Foreground's page head (a 360 phone's "questions, answered." at 40px ran 3px past the screen) */
.rau .opening-in:has(> .opening-h[style*="--last-pair"]) { container-type: inline-size; }
.rau .opening-h[style*="--last-pair"] { font-size: min(var(--fs-h1), calc(100cqi / (var(--last-pair) * .46))); }
.rau .opening .lede { color: rgb(255 255 255 / .74); max-width: 600px; }
.rau .opening .meet-role { color: rgb(255 255 255 / .74); }
.rau .id-line { font-size: 14px; color: rgb(255 255 255 / .6); }
.rau .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: rgb(255 255 255 / .6); }
.rau .crumbs a { display: inline-block; padding: 6px 0; margin: -6px 0; color: var(--lk); text-decoration: none; }
.rau .crumbs a + a::before { content: '/'; margin-right: 8px; color: rgb(255 255 255 / .6); }
.rau .dial-at { display: grid; gap: 8px; }
.rau .big-phone { font: 500 clamp(36px, 4.6vw, 64px)/1 var(--display); letter-spacing: -.035em; color: #FFFFFF; text-decoration: none; white-space: nowrap; }
.rau .big-phone:hover { color: var(--lk); }
/* the Contact page (contact.html): the words and the phone set large on the left, the contact card's two buttons on the right, both
   on the band's foot; one column on a tablet and a phone, the buttons under the phone */
.rau .contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
@media (max-width: 900px) { .rau .contact-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; } }
@media (max-width: 720px) { .rau .opening { padding: calc(var(--bar) + 48px) 0 64px; } }
@media (max-width: 860px) {
  .rau .opening .hero-photo ~ .hero-grade::after { background: linear-gradient(180deg, rgb(10 13 23 / .88) 0%, rgb(10 13 23 / .84) 70%, rgb(10 13 23 / .9) 100%); }
  .rau .opening.has-figure .hero-photo ~ .hero-grade::after { background: linear-gradient(180deg, rgb(10 13 23 / .9) 0%, rgb(10 13 23 / .84) 52%, rgb(10 13 23 / .3) 72%, rgb(10 13 23 / .7) 100%); }
}
/* the About opening: the figure stands in it too */
.rau .opening.has-figure { padding-bottom: 0; }
.rau .opening-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 24px; }
.rau .opening.has-figure .opening-in { padding-bottom: 96px; align-self: center; }
.rau .figure-stand { position: relative; justify-self: end; width: min(100%, 480px); aspect-ratio: 896 / 1088; margin: 0; }
.rau .figure-stand img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: bottom; object-position: bottom; filter: drop-shadow(0 30px 60px rgb(0 0 0 / .45)); }
.rau .opening.has-figure .hero-halo { right: max(-160px, calc((100vw / var(--z) - var(--max)) / 2 - 260px)); bottom: -40%; width: min(820px, 62vw / var(--z)); opacity: 1; }
.rau .opening.is-framed .figure-stand { align-self: center; margin-bottom: 96px; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 30px 80px rgb(0 0 0 / .4), inset 0 0 0 1px rgb(255 255 255 / .14); }
.rau .opening.is-framed .figure-stand img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 20%; object-position: 50% 20%; filter: none; }
@media (max-width: 860px) {
  .rau .opening-grid { grid-template-columns: 1fr; }
  .rau .opening.has-figure .opening-in { padding-bottom: 0; }
  .rau .figure-stand { justify-self: center; width: min(72vw / var(--z), 320px); margin-top: 16px; }
  .rau .opening.is-framed .figure-stand { margin-bottom: 64px; }
  .rau .opening.has-figure .hero-halo { right: -40%; bottom: -10%; width: calc(120vw / var(--z)); }
}
/* a page's opening beside its photograph */
.rau .intro-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.rau .intro-photo { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 80px rgb(0 0 0 / .4); margin: 0; }
.rau .intro-photo img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rau .intro-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); pointer-events: none; }
.rau .intro-grid.is-slot { align-items: start; }
@media (max-width: 900px) { .rau .intro-grid { grid-template-columns: 1fr; gap: 40px; } .rau .intro-photo { aspect-ratio: 16 / 10; } }

/* ============================================================
   ABOUT — the notes, the story, licensing
   ============================================================ */
.rau .awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap-card); }
.rau .awards.n2, .rau .awards.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rau .awards.n1 { grid-template-columns: minmax(0, 520px); }
.rau .award { display: flex; flex-direction: column; gap: 14px; min-height: 260px; padding: 32px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.rau .award h3 { margin-top: auto; font: 600 24px/1.15 var(--sans); letter-spacing: -.02em; }
.rau .award-p { font-size: 15px; color: var(--t2); }
@media (max-width: 900px) { .rau .awards, .rau .awards.n2, .rau .awards.n4 { grid-template-columns: 1fr; } .rau .award { min-height: 0; } .rau .award h3 { margin-top: 16px; } }
.rau .story-cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
.rau .story-cols > .story-side > .section-head { margin: 0; }
.rau .story-cols > .prose:first-child { grid-column: 1 / -1; max-width: 72ch; }
.rau .article { display: grid; gap: 0; max-width: 760px; }
.rau .prose { display: grid; gap: 20px; max-width: 680px; font-size: 19px; line-height: 1.65; color: var(--t2); }
.rau .prose.is-story > p:first-child { font-size: 24px; line-height: 1.45; color: var(--t); letter-spacing: -.015em; }
.rau .prose :where(h1, h2, h3, h4, strong, blockquote) { color: var(--t); }
.rau .prose :where(b:not(.label, .bl-cta-h)) { color: var(--t); }
.rau .prose :where(h2) { font: 600 26px/1.2 var(--sans); letter-spacing: -.02em; }
.rau .prose :where(h3) { font: 600 21px/1.25 var(--sans); letter-spacing: -.015em; }
/* the anchor weighs what the other templates' `.<root> .bl-prose a:not(.btn)` weigh, so it outweighs legal-doc.css's `.legal-fair a`
   (inherit): the Legal page's Fair Lending links are the link color like every prose link (the bar, 2026-10-23) */
.rau .prose a:not(.btn) { color: var(--lk); font-weight: 600; text-underline-offset: 3px; }
.rau .prose :where(ul, ol) { display: grid; gap: 8px; padding-left: 0; }
.rau .prose :where(ul > li) { position: relative; padding-left: 24px; }
.rau .prose :where(ul > li)::before { content: ''; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--mk); }
.rau .prose :where(ol) { counter-reset: rau-n; }
.rau .prose :where(ol > li) { position: relative; padding-left: 28px; counter-increment: rau-n; }
.rau .prose :where(ol > li)::before { content: counter(rau-n) '.'; position: absolute; left: 0; top: 0; font-weight: 600; color: var(--acc); }
.rau .prose :where(blockquote) { padding-left: 20px; border-left: 2px solid var(--mk); font-size: 1.05em; }
/* an owner's formatted words in a part of its own (the shared Words adds .prose): the part's own size and measure, never the story's */
.rau :is(.strip-ask-p, .offer-body, .qa-a, .ruled-p, .station-p, .glass-p, .award-p, .card-p).prose { display: grid; gap: 10px; max-width: none; font-size: 16px; line-height: 1.5; }
.rau .meet-bio.prose { gap: 12px; max-width: 600px; font-size: 19px; line-height: 1.6; }
.rau .member-bio.prose { gap: 12px; max-width: 620px; font-size: 18px; line-height: 1.6; }
@media (max-width: 860px) { .rau .story-cols { grid-template-columns: 1fr; gap: 24px; } .rau .prose { font-size: 17px; } .rau .prose.is-story > p:first-child { font-size: 21px; } }
.rau .cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap-card); }
.rau .cards3.n2, .rau .cards3.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rau .cards3.n1 { grid-template-columns: minmax(0, 520px); }
/* licensing's cards (the product's .lic / .lic-card hooks): a card's words wrap inside it, never past it */
.rau .lic > .lic-card { min-width: 0; overflow-wrap: anywhere; }
.rau .info { display: grid; align-content: start; gap: 12px; padding: 28px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.rau .info-h { font: 600 12px/1.55 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.rau .info p { font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.rau .info a { color: var(--lk); text-decoration: none; font-weight: 600; }
.rau .info a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rau .info-sub { display: block; color: var(--t2); }
.rau .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rau .chip { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); font: 600 15px/1 var(--sans); letter-spacing: .04em; }
.rau .info-go { margin-top: var(--gap-block); }
@media (max-width: 900px) { .rau .cards3, .rau .cards3.n2, .rau .cards3.n4 { grid-template-columns: 1fr; } }

/* ============================================================
   THE LOANS OVERVIEW — grouped cards
   ============================================================ */
.rau .hub { display: grid; }
.rau .hub-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; padding: 48px 0; border-top: 1px solid var(--line); }
.rau .hub:not(.is-grouped) .hub-group { grid-template-columns: 1fr; }
.rau .hub-group:first-child { border-top: 0; padding-top: 0; }
.rau .hub-group:last-child { padding-bottom: 0; }
.rau .hub-head { display: grid; align-content: start; gap: 10px; }
.rau .hub-h { font: 600 clamp(24px, 2vw, 28px)/1.12 var(--sans); letter-spacing: -.025em; }
.rau .hub-count { font-size: 15px; color: var(--t2); }
.rau .hub-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap-card); }
.rau .hub-group.is-headless { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.rau .hub-group.is-headless .hub-cards { grid-column: 2; }
.rau .hub-card {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-content: start; -moz-column-gap: 16px; column-gap: 16px; row-gap: 6px; height: 100%;
  padding: 26px 64px 26px 24px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line);
  box-shadow: var(--card-shadow); text-decoration: none; color: var(--t);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
  text-align: left;
}
.rau .hub-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--card-shadow-hover); }
.rau .hub-ico { grid-row: span 2; margin-top: 3px; color: var(--mk); }
.rau .hub-ico .nav-ico { width: 20px; height: 20px; stroke-width: 1.75; }
.rau .hub-name { font: 600 21px/1.25 var(--sans); letter-spacing: -.02em; }
.rau .hub-sub { font-size: 15px; color: var(--t2); }
.rau .hub-card .go { position: absolute; top: 24px; right: 22px; color: var(--lk); transition: transform .18s var(--ease); }
.rau .hub-card .go svg { width: 16px; height: 16px; }
.rau .hub-card:hover .go { transform: translateX(4px); }
@media (max-width: 1180px) { .rau .hub-group, .rau .hub-group.is-headless { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; } .rau .hub-group.is-headless .hub-cards { grid-column: auto; } }
@media (max-width: 640px) { .rau .hub-cards { grid-template-columns: 1fr; } .rau .hub-card { padding: 22px 56px 22px 20px; } .rau .hub-name { font-size: 19px; } }

/* ============================================================
   ONE LOAN'S PAGE — the figures, the ruled list, the table, the questions, the frame
   ============================================================ */
.rau .figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap-card); }
.rau .fig { display: flex; flex-direction: column-reverse; justify-content: space-between; gap: 40px; min-height: 260px; padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--raised); }
.rau .paper .fig, .rau .white .fig { background: var(--raised); box-shadow: var(--card-shadow); border-color: var(--line); }
.rau .fig-n { display: flex; align-items: center; gap: 14px; font: 500 clamp(64px, 7vw, 112px)/.9 var(--display); letter-spacing: -.05em; overflow-wrap: anywhere; }
.rau :is(.night, .field) .fig-n > span { background: linear-gradient(180deg, #FFFFFF 20%, color-mix(in srgb, var(--light) 40%, #FFFFFF) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rau .fig-n .proof-stars { width: 120px; height: 23px; }
.rau .fig-p { font-size: 17px; color: var(--t2); max-width: 280px; }
/* a place's local figures: its number, what it is, its source */
.rau .figs.is-local .fig { flex-direction: column; justify-content: flex-start; gap: 10px; min-height: 0; }
.rau .figs.is-local .fig-num { order: -1; font: 500 clamp(36px, 3.6vw, 52px)/1 var(--display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.rau .fig-what { font-size: 15px; color: var(--t2); }
.rau .fig-from { margin: 0; }
.rau .fig-src { font-size: 13px; color: var(--t3); }
.rau a.fig-src { display: inline-block; padding: 8px 0; margin: -8px 0; color: var(--lk); }
@media (max-width: 900px) { .rau .figs { grid-template-columns: 1fr; } .rau .fig { min-height: 0; gap: 20px; } }
.rau .ruled-list { min-width: 0; }
.rau .ruled { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
.rau .ruled > .section-head { margin: 0; align-content: start; }
.rau .ruled-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 16px; padding: 28px 0; border-top: 1px solid var(--line); }
.rau .ruled-row:last-child { border-bottom: 1px solid var(--line); }
.rau .ruled-row .num { padding-top: 6px; }
.rau .ruled-row h3 { font: 600 22px/1.55 var(--sans); letter-spacing: -.015em; }
.rau .ruled-p { grid-column: 2; color: var(--t2); }
@media (max-width: 900px) { .rau .ruled { grid-template-columns: 1fr; gap: 24px; } .rau .ruled-row { grid-template-columns: 40px minmax(0, 1fr); } }
.rau .table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.rau .compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: transparent; }
.rau .compare th, .rau .compare td { padding: 20px 24px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-size: 16px; }
.rau .compare thead th, .rau .compare thead td { border-top: 0; font: 600 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.rau .compare .corner { width: 22%; }
.rau .compare tbody th { font-weight: 600; width: 22%; color: var(--t); }
.rau .compare td { color: var(--t2); }
@media (max-width: 720px) {
  .rau .compare, .rau .compare thead, .rau .compare tbody, .rau .compare tr, .rau .compare th, .rau .compare td { display: block; width: auto; }
  .rau .compare thead { display: none; }
  .rau .compare tbody tr { padding: 16px 20px; border-top: 1px solid var(--line); }
  .rau .compare tbody tr:first-child { border-top: 0; }
  .rau .compare tbody th, .rau .compare td { padding: 4px 0; border: 0; width: auto; }
  .rau .compare td::before { content: attr(data-col) ": "; font-weight: 600; color: var(--acc); }
}
.rau .faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
.rau .faq > .section-head { margin: 0; align-content: start; }
.rau .qa { border-top: 1px solid var(--line); }
.rau .qa:last-child { border-bottom: 1px solid var(--line); }
.rau .qa summary { display: flex; align-items: center; gap: 16px; padding: 24px 0; cursor: pointer; list-style: none; font: 600 20px/1.3 var(--sans); letter-spacing: -.015em; }
.rau .qa summary::-webkit-details-marker { display: none; }
.rau .qa-q { flex: 1; min-width: 0; }
.rau .qa .plus { width: 20px; height: 20px; color: var(--mk); flex: none; transition: transform .18s var(--ease); }
.rau .qa[open] .plus { transform: rotate(45deg); }
.rau .qa-a { padding: 0 48px 24px 0; color: var(--t2); max-width: 640px; }
.rau .qa-list.is-numbered .qa-a { padding-left: 46px; }
@media (max-width: 900px) { .rau .faq { grid-template-columns: 1fr; gap: 24px; } .rau .qa summary { font-size: 18px; } .rau .qa-a { padding-right: 0; } }
/* a calculator or a form placed in a page: ONE plain card beside its words, on the band's own raised surface and in its words
   (Andrew, 2026-10-23: the hard-coded white sheet framed the embed's own card — a device bezel — and on a dark page it set a
   dark form inside a white sheet). The surface is the same one Authority's `.card` draws, so the sheet follows the tone, and the
   box is only the mat around the embed's own card: the minimal padding that keeps the head and the words column aligned. */
.rau .frame { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.rau .frame > .section-head { margin: 0; }
.rau .frame-box { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-xl); background: var(--raised); color: var(--t); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.rau .frame-title { font: 600 20px/1.3 var(--sans); letter-spacing: -.015em; }
/* a form or a calculator holds its height while it loads, and lets it go once the loader has put its frame in */
.rau .ms-embed.is-form:not(:has(iframe)) { min-height: 560px; }
.rau .ms-embed.is-calc:not(:has(iframe)) { min-height: 640px; }
.rau .ticks { display: grid; gap: 10px; }
.rau .ticks li { position: relative; padding-left: 28px; color: var(--t2); }
.rau .ticks li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--mk); border-bottom: 2px solid var(--mk); transform: rotate(-45deg); }
@media (max-width: 900px) { .rau .frame { grid-template-columns: 1fr; gap: 28px; } .rau .frame-box { padding: 12px; } }
/* the band: one heading, one line, one button, on the field (its blue light in the corner) */
.rau .section.joins { padding-top: 0; }
.rau .band { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 48px; border-radius: var(--r-xl); }
.rau .band::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -120%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--light) 50%, transparent), transparent); }
.rau .band-words { display: grid; gap: 8px; }
.rau .band-t { font: 500 clamp(26px, 2.4vw, 36px)/1.12 var(--display); letter-spacing: -.025em; }
.rau .band-p { color: var(--t2); }
@media (max-width: 760px) { .rau .band { flex-direction: column; align-items: flex-start; padding: 28px 24px; } }
/* the calculators page: the sub menu under the opening, then its rows */
.rau .calc-tabs { position: sticky; top: var(--bar); z-index: 30; background: var(--night); border-bottom: 1px solid rgb(255 255 255 / .12); --b: var(--au-night-btn, #AF914B); --ob: var(--au-night-on-btn, #10141D); }
.rau .calc-tabs ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.rau .calc-tabs ul::-webkit-scrollbar { display: none; }
.rau .calc-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid rgb(255 255 255 / .2); border-radius: var(--r-sm); font: 500 14px/1 var(--sans); color: #FFFFFF; text-decoration: none; white-space: nowrap; }
.rau .calc-tabs a[aria-current="true"] { background: var(--b); border-color: var(--b); color: var(--ob); }
.rau .calc-rows { display: grid; }
.rau .calc-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar) + 76px); }
.rau .calc-row:last-child { border-bottom: 1px solid var(--line); }
.rau .calc-head { display: grid; gap: 6px; min-width: 0; }
.rau .calc-t { font: 600 24px/1.2 var(--sans); letter-spacing: -.02em; }
.rau .calc-words { display: grid; gap: 8px; justify-items: start; min-width: 0; }
/* each point its own line, all three equal, in Authority's tick (Andrew, 2026-10-20, Larry's calculators page: run into one wrapping line,
   the first point read as a heading with no colon and two points landed side by side) */
.rau .calc-points { display: grid; gap: 6px; color: var(--t2); font-size: 16px; line-height: 1.5; }
.rau .calc-points li { position: relative; padding-left: 26px; }
.rau .calc-points li::before { content: ''; position: absolute; left: 2px; top: .4em; width: 12px; height: 7px; border-left: 2px solid var(--mk); border-bottom: 2px solid var(--mk); transform: rotate(-45deg); }
.rau .calc-row > .num { align-self: center; }
@media (max-width: 900px) { .rau .calc-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 10px; } .rau .calc-row > :is(.calc-words, .btn) { grid-column: 2; } .rau .calc-row > .btn { justify-self: start; } .rau .calc-t { font-size: 21px; } }
.rau .calc-page > .section.paper { padding-top: var(--section); }

/* the offer as a card of its own */
.rau .offer.card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; padding: 0; overflow: hidden; }
.rau .offer.card.no-pic { grid-template-columns: minmax(0, 1fr); }
.rau .offer-pic { min-height: 100%; }
.rau .offer-pic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rau .offer-copy { display: grid; gap: 16px; align-content: center; justify-items: start; padding: 40px; min-width: 0; container-type: inline-size; }
/* the figure is set to its own column (cqi), not the viewport, so it always fits; a number never wraps */
.rau .offer-amount { font: 500 clamp(28px, 20cqi, 72px)/1 var(--display); letter-spacing: -.04em; white-space: nowrap; }
.rau .offer-amount[data-len="words"] { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; white-space: normal; }
.rau .offer-title { font: 600 26px/1.2 var(--sans); letter-spacing: -.02em; }
.rau .offer-body { color: var(--t2); }
.rau .offer-cap { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 16px 40px; border-top: 1px solid var(--line); font-size: 13px; color: var(--t2); }
.rau .offer-cap strong { color: var(--t); }
@media (max-width: 900px) { .rau .offer.card { grid-template-columns: minmax(0, 1fr); } .rau .offer-pic { aspect-ratio: 16 / 10; } .rau .offer-copy { padding: 28px 24px; } .rau .offer-cap { padding: 14px 24px; } }
/* the callout: its words beside the framed photograph */
.rau .callout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.rau .callout.no-pic { grid-template-columns: minmax(0, 760px); }
.rau .callout-copy { display: grid; gap: 18px; justify-items: start; }
.rau .framed { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 10; margin: 0; background: var(--raised); }
.rau .framed img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
@media (max-width: 900px) { .rau .callout { grid-template-columns: 1fr; gap: 32px; } }
/* the video, and a video in a picture's place: a 16:9 frame */
.rau .watch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.rau .watch.no-words { grid-template-columns: minmax(0, 960px); justify-content: center; }
.rau .watch-copy { display: grid; gap: 18px; }
.rau .vid { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: var(--night-raised); }
.rau .vid > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.rau .vid img { -o-object-fit: cover; object-fit: cover; }
/* a player (cinematic/FacadeVideo.tsx) holds a 16:9 box before it loads, wherever it stands; inside a video card it fills the card */
.rau .player { position: relative; aspect-ratio: 16 / 9; }
.rau .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* the intro video's overlay (cinematic/IntroVideo.tsx): the whole screen on the night, the player rising into place, one close */
.rau .video-ov { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; }
.rau .video-ov .scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--night) 88%, transparent); animation: rau-fade .28s ease-out both; }
.rau .video-box { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: var(--night); animation: rau-rise .34s var(--ease) both; }
.rau .video-ov[data-closing] .scrim { animation: rau-fade-out .24s ease-in both; }
.rau .video-ov[data-closing] .video-box { animation: rau-rise-out .24s ease-in both; }
.rau .video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rau .video-box .x { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; color: var(--night); font-size: 26px; line-height: 1; }
@keyframes rau-fade { from { opacity: 0; } }
@keyframes rau-fade-out { to { opacity: 0; } }
@keyframes rau-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes rau-rise-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 900px) { .rau .watch { grid-template-columns: 1fr; gap: 28px; } }
/* the marks: a slim band, the line beside the logos */
.rau .logos-band { padding-block: 48px; }
.rau .logos-in { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.rau .logos-title { font: 600 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.rau .logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.rau .logos img { height: 40px; width: auto; max-width: 160px; -o-object-fit: contain; object-fit: contain; }
.rau :is(.night, .field) .logos li { padding: 10px 16px; border-radius: var(--r-sm); background: #FFFFFF; }
/* the glossary: the letters to jump by, each letter beside its terms */
.rau .az ul { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; }
.rau .az a { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid var(--line-2); font-weight: 600; text-decoration: none; color: var(--t); }
.rau .az a:hover { border-color: var(--lk); color: var(--lk); }
.rau .az-group { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 32px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar) + 16px); }
.rau .az-letter { font: 500 48px/1 var(--display); letter-spacing: -.03em; color: var(--mk); }
.rau .az-terms { display: grid; gap: 20px; }
.rau .az-terms dt { font: 600 19px/1.3 var(--sans); }
.rau .az-terms dd { color: var(--t2); }
@media (max-width: 640px) { .rau .az-group { grid-template-columns: 1fr; gap: 12px; } .rau .az-letter { font-size: 36px; } }
/* videos in a row */
.rau .clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-block) var(--gap-card); }
.rau .clips.is-one { grid-template-columns: minmax(0, 960px); }
.rau .clip { display: grid; gap: 12px; align-content: start; }
.rau .clip h3 { font: 600 20px/1.3 var(--sans); }
.rau .clip-line { color: var(--t2); }
@media (max-width: 760px) { .rau .clips { grid-template-columns: 1fr; } }
/* ruled rows to a page or a resource, each whole row the link */
.rau .plinks { border-top: 1px solid var(--line); }
.rau .plinks > li { border-bottom: 1px solid var(--line); }
.rau .plink { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 24px; padding: 24px 0; text-decoration: none; color: var(--t); text-align: left; }
.rau .plink-t { font: 600 21px/1.25 var(--sans); letter-spacing: -.02em; }
.rau .plink-s { color: var(--t2); }
.rau .plink svg { width: 16px; height: 16px; color: var(--lk); transition: transform .18s var(--ease); }
.rau .plink:hover svg { transform: translateX(4px); }
@media (max-width: 760px) { .rau .plink { grid-template-columns: minmax(0, 1fr) auto; } .rau .plink-s { grid-column: 1; } .rau .plink svg { grid-row: 1; grid-column: 2; } }
/* pictures and words: framed photographs beside their words, the sides alternating */
.rau .pw { display: grid; gap: clamp(48px, 6vw, 88px); }
.rau .pw-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.rau .pw-row.is-right .pw-place { order: 2; }
.rau .pw-row.no-pic { grid-template-columns: minmax(0, 760px); }
.rau .pw-place { position: relative; }
.rau .pw-pic { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; margin: 0; background: var(--raised); }
.rau .pw-pic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rau .pw-num { display: block; margin-bottom: 14px; font: 600 13px/1.4 var(--sans); letter-spacing: .08em; color: var(--acc); }
.rau .pw-place .pw-num { position: absolute; left: 16px; top: 16px; margin: 0; padding: 6px 10px; border-radius: 999px; background: rgb(10 13 23 / .7); color: var(--pill); }
.rau .pw-copy { display: grid; gap: 16px; justify-items: start; }
.rau .pw-h { font: 600 clamp(24px, 2.2vw, 30px)/1.15 var(--sans); letter-spacing: -.02em; }
@media (max-width: 900px) { .rau .pw-row { grid-template-columns: 1fr; gap: 28px; } .rau .pw-row.is-right .pw-place { order: 0; } }

/* the team: framed portraits (team-card.tsx reveals the actions over each) */
.rau .team { --cols: 4; --gap: var(--gap-card); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-block) var(--gap); margin-top: 8px; }
.rau .team > .member { flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; display: grid; gap: 14px; align-content: start; }
.rau .team[data-count="2"], .rau .team[data-count="4"] { --cols: 2; }
.rau .team[data-count="2"] > .member, .rau .team[data-count="4"] > .member { max-width: 380px; }
.rau .team[data-count="3"] { --cols: 3; }
.rau .team[data-count="1"] > .member { flex-basis: 100%; max-width: 720px; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: center; gap: 32px; }
.rau .member-shot { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--raised); }
.rau .member-shot img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 20%; object-position: 50% 20%; }
.rau .member-initials { display: grid; place-items: center; width: 100%; height: 100%; font: 500 56px/1 var(--display); letter-spacing: -.03em; color: var(--mk); }
.rau .member-copy { display: grid; gap: 4px; justify-items: start; }
.rau .member-name { font: 600 20px/1.25 var(--sans); letter-spacing: -.015em; }
.rau .member-name a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.rau .member-name a:hover { color: var(--lk); }
.rau .member-line { font-size: 15px; color: var(--t2); }
.rau .team-blurb { margin-top: 8px; color: var(--t2); }
.rau .team-meet { margin-top: 12px; }
@media (max-width: 900px) { .rau .team, .rau .team[data-count] { --cols: 2; } }
/* a phone: two compact cards across, a person alone the whole row */
@media (max-width: 560px) {
  .rau .team, .rau .team[data-count] { --cols: 2; --gap: 12px; row-gap: 28px; }
  .rau .team[data-count="1"] { --cols: 1; }
  .rau .team[data-count="1"] > .member { grid-template-columns: 1fr; }
}
/* the reveal over a portrait and the search above a big team (team-card.tsx, team-search.tsx): their look on Authority's night over
   the shared team-card.css's layout; the open states are restated because this sheet's closed state outweighs the shared :where() */
.rau .has-reveal { position: relative; isolation: isolate; container-type: inline-size; }
.rau .team-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: linear-gradient(to top, color-mix(in srgb, var(--night) 94%, transparent) 0%, color-mix(in srgb, var(--night) 60%, transparent) 55%, transparent 92%); }
.rau .team-reveal { position: absolute; inset: auto 0 0; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px; color: #FFFFFF; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s ease, transform .35s var(--ease); }
@media (hover: hover) {
  .rau .has-reveal:hover .team-reveal { opacity: 1; transform: none; pointer-events: auto; }
  .rau .has-reveal:hover .team-scrim { opacity: 1; }
}
.rau :is(.has-reveal:focus-within, .has-reveal[data-reveal="open"]) .team-reveal { opacity: 1; transform: none; pointer-events: auto; }
.rau :is(.has-reveal:focus-within, .has-reveal[data-reveal="open"]) .team-scrim { opacity: 1; }
.rau .team-way { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; color: #FFFFFF; text-decoration: none; font: 600 14px/1.2 var(--sans); border-radius: var(--r-sm); }
.rau .team-way > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rau .team-way > svg { flex: none; width: 16px; height: 16px; }
.rau .team-way:is(.is-page, .is-apply) { justify-content: center; padding: 0 16px; }
.rau .team-way.is-page { background: var(--btn); color: var(--on-btn); }
.rau .team-way.is-apply { border: 1px solid rgb(255 255 255 / .5); }
.rau .team-contact { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rau .team-way:is(.is-phone, .is-email) { padding: 0 4px; color: rgb(255 255 255 / .92); }
.rau .team-contact .team-way:hover span { text-decoration: underline; text-underline-offset: 3px; }
.rau .team-hint { display: none; }
@container (max-width: 220px) {
  .rau .team-reveal { padding: 10px; gap: 6px; }
  .rau .team-contact { display: flex; justify-content: center; gap: 8px; }
  .rau .team-contact .team-way { justify-content: center; width: 40px; padding: 0; border-radius: 50%; border: 1px solid rgb(255 255 255 / .5); }
  .rau .team-contact .team-way > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rau .team-way:is(.is-page, .is-apply) { padding: 4px 8px; font-size: 13px; }
  .rau .team-way:is(.is-page, .is-apply) > span { overflow: visible; white-space: normal; text-align: center; }
}
@media (hover: none) {
  .rau .team-hint { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--night); color: #FFFFFF; pointer-events: none; transition: transform .3s ease; }
  .rau .team-hint svg { width: 16px; height: 16px; }
  .rau .has-reveal[data-reveal="open"] .team-hint { transform: rotate(45deg); }
}
.rau .team-search-input { min-height: 48px; padding: 0 20px 0 48px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--raised); color: var(--t); }
.rau .team-search-count { font-size: 14px; color: var(--t2); }

/* ============================================================
   THE FOOTER — the person, the menu's groups as columns, the legal band
   ============================================================ */
.rau .foot { background: var(--night); color: var(--t2); font-size: 15px; }
.rau .foot-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr); gap: 48px; padding: 88px 0 64px; }
.rau .foot-brand { display: grid; align-content: start; gap: 18px; justify-items: start; }
.rau .foot-brand .brandmark { flex-direction: column; align-items: flex-start; gap: 16px; }
.rau .foot-brand .brandmark .mark-words b { font-size: 22px; }
.rau .foot-brand .brandmark .logo { order: 2; padding-left: 0; border-left: 0; --logo-h: var(--rs-logo-h-foot, 36px); }
.rau .foot-brand p { line-height: 1.6; }
.rau .foot-brand a:not(.brandmark) { color: var(--lk); text-decoration: none; font-weight: 600; }
.rau .foot-brand a:not(.brandmark):hover { text-decoration: underline; text-underline-offset: 3px; }
.rau .foot-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 36px 40px; align-content: start; }
.rau .foot-groups { display: contents; }
.rau .foot-links h4 { margin: 0 0 16px; font: 600 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.rau .foot-links h4 a { display: inline-block; padding-block: 9px; margin-block: -9px; color: inherit; text-decoration: none; }
.rau .foot-links ul { display: grid; gap: 2px; }
.rau .foot-links li a, .rau .foot-links li .linkbtn { display: inline-block; padding: 6px 0; color: var(--t2); text-decoration: none; line-height: 1.4; text-align: left; }
.rau .foot-links li a:hover, .rau .foot-links li .linkbtn:hover { color: #FFFFFF; }
.rau .foot-links li a[aria-current="page"] { color: var(--lk); }
.rau .foot-stack { display: grid; align-content: start; gap: 36px; }
.rau .foot-stack .foot-col + .foot-col { margin-top: 0; }
.rau .foot-legal { border-top: 1px solid var(--line); padding: 40px 0 48px; }
/* the legal band: its structure is the shared band's (legal-band.css, laid out as this concept's band: the mark, the licensing lines and
   the words side by side, the links in one row, then the copyright); this sheet sets its type, its inks and its hairline */
.rau .legal { --legal-mark: 64px; font-size: 14px; line-height: 1.6; }
.rau .legal .legal-nmls { color: var(--t); }
/* the official Equal Housing artwork for the footer's ground (legal-band.ts draws both; legal-eho-grounds.test): the night, in both tones: the white */
.rau .foot .legal-eho-on-light { display: none; }
.rau .foot .legal-eho-on-dark { display: block; }
.rau .legal-nmls { font-weight: 600; }
.rau .legal a { display: inline-block; padding: 6px 0; margin: -6px 0; color: var(--lk); text-decoration: none; }
.rau .legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rau .legal-copy { padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--t3); }
.rau .powered { margin-top: 20px; }
@media (max-width: 1180px) {
  .rau .foot-top { grid-template-columns: 1fr; gap: 40px; }
  .rau .foot-brand { grid-template-columns: repeat(3, auto); justify-content: start; gap: 16px 48px; }
  .rau .foot-brand .brandmark { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .rau .foot-top { padding: 56px 0 32px; }
  .rau .foot-brand { grid-template-columns: 1fr; }
  .rau .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .rau .legal-access { font-size: 13px; }
}
/* a phone: the columns fold to their headings (nav-mega.css, FootFold), one under another in a single column (after the 720 rule above, which it outweighs by order), rows that touch */
@media (max-width: 600px) { .rau .foot-links { grid-template-columns: minmax(0, 1fr); row-gap: 0; } }
/* the phone bar: the main button, Text and Call, once the page's first block has scrolled away */
.rau .mbar { display: none; }
@media (max-width: 720px) {
  .rau .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; gap: 8px; align-items: center;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--night) 92%, transparent); backdrop-filter: blur(16px); border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform .3s var(--ease);
  }
  .rau .mbar.is-on { transform: none; }
  .rau .mbar > .btn { flex: 1; min-height: 48px; }
  /* two buttons (the header's main, then its second: chrome-kit `phoneButtons`): they share the bar; a label too long for one line wraps */
  .rau .mbar:has(> .btn ~ .btn) > .btn { min-width: 0; padding: 0 6px; white-space: normal; text-wrap: balance; text-align: center; line-height: 1.15; }
  /* the bar's Text and Call give way to the two buttons: both live in the phone menu's pair (REBEL SITES, 2026-10-27) */
  .rau .mbar:has(> .btn ~ .btn) > :not(.btn) { display: none; }
  .rau .dock-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: rgb(255 255 255 / .06); color: #FFFFFF; flex: none; }
  .rau .dock-icon svg { width: 20px; height: 20px; }
  .rau .foot { padding-bottom: 72px; }
}

/* ============================================================
   THE BLOG — the openings and card rows in the blog's own parts
   ============================================================ */
.rau .bl-head { padding-bottom: 72px; }
.rau .bl-index, .rau .bl-read { padding-top: clamp(56px, 6vw, 88px); }
.rau .bl-head-in { display: grid; gap: 20px; justify-items: start; max-width: 860px; }
.rau .bl-head .crumbs a + a::before { content: '/'; margin-right: 8px; }
.rau .bl-head .lede { color: var(--t2); }
.rau .bl-draft { padding: 6px 12px; border-radius: 999px; background: var(--line); font-size: 13px; }
.rau .bl-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.rau .bl-topics a, .rau .bl-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--t) 6%, transparent); color: var(--t); text-decoration: none; font: 500 14px/1 var(--sans); }
.rau .bl-topics a[aria-current="page"] { border-color: var(--btn); box-shadow: inset 0 -2px 0 var(--btn); }
.rau .bl-byline { display: flex; align-items: center; gap: 12px; color: var(--t2); font-size: 14px; }
.rau .byline-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--field-raised); color: #FFFFFF; font-weight: 600; flex: none; }
.rau .byline-av img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rau .bl-byline-t { display: grid; }
.rau .bl-byline-t a, .rau .bl-byline-t b { color: var(--t); font-weight: 600; text-decoration: none; }
.rau .bl-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: var(--gap-card); margin-bottom: var(--gap-card); }
.rau .bl-top.is-solo { grid-template-columns: 1fr; }
.rau .bl-top .is-lead { grid-row: span 2; }
/* a lead with no picture (real articles often have none): its words alone, set low in the card, never an empty frame */
.rau .bl-card.is-lead:not(:has(.bl-card-pic)) { grid-template-rows: 1fr; align-content: end; min-height: 320px; }
/* the two beside the lead: picture and words side by side, each half the lead's height */
.rau .bl-card.is-side { grid-template-rows: none; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.rau .bl-card.is-side .bl-card-pic { aspect-ratio: auto; height: 100%; min-height: 160px; }
.rau .bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap-card); }
.rau .bl-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--card-shadow); text-decoration: none; color: var(--t); transition: transform .32s var(--ease), box-shadow .32s var(--ease); }
.rau .bl-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.rau .bl-card-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--g); }
.rau .bl-card-pic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rau .bl-copy { display: grid; align-content: start; gap: 10px; padding: 24px; }
.rau .bl-topic { font: 600 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.rau .bl-title { font: 600 21px/1.25 var(--sans); letter-spacing: -.02em; }
.rau .is-lead .bl-title { font-size: clamp(26px, 2.4vw, 34px); }
.rau .bl-dek { color: var(--t2); }
.rau .bl-meta { font-size: 13px; color: var(--t2); }
.rau .bl-empty { color: var(--t2); }
.rau .bl-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: var(--gap-block); }
.rau .bl-pager-l { color: var(--t2); }
.rau .bl-index-side { display: grid; gap: var(--gap-card); margin-top: var(--gap-block); }
.rau .bl-hero { margin: 0 0 var(--gap-block); border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 21 / 9; }
.rau .bl-hero img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rau .bl-lay { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.rau .bl-lay.is-solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.rau .bl-col { display: grid; gap: var(--gap-block); min-width: 0; }
.rau .bl-prose { max-width: 720px; }
.rau .bl-answer { padding: 24px 28px; border-radius: var(--r-lg); background: var(--field); color: var(--on-field); --t: var(--on-field); --t2: var(--au-field-muted); --acc: var(--au-field-accent); --lk: var(--au-field-link); }
.rau .bl-table { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--raised); }
.rau .bl-table table { width: 100%; border-collapse: collapse; }
.rau .bl-table :is(th, td) { padding: 14px 18px; text-align: left; border-top: 1px solid var(--line); font-size: 15px; }
.rau .bl-table th { font-weight: 600; }
.rau .bl-fig { margin: 0; border-radius: var(--r-lg); overflow: hidden; }
/* the officer's own video in an article (blog-body.tsx `b.embed`) holds its 16:9 box before it loads */
.rau .bl-fig iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--night-raised); }
/* a legal page's notice (legal-doc.css frames it in its words' own colour): in the paper's full words, not the prose's quieter ones */
.rau .legal-read .legal-prose blockquote { color: var(--t); }
.rau .bl-faq details { border-top: 1px solid var(--line); }
.rau .bl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font: 600 18px/1.3 var(--sans); }
.rau .bl-faq summary::-webkit-details-marker { display: none; }
.rau .bl-faq .plus { width: 20px; height: 20px; color: var(--mk); flex: none; }
.rau .bl-cta, .rau .bl-side, .rau .bl-end { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border-radius: var(--r-lg); }
.rau .bl-cta { background: var(--raised); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.rau .bl-side { flex-direction: column; align-items: flex-start; background: var(--field); color: var(--on-field); --t: var(--on-field); --t2: var(--au-field-muted); --acc: var(--au-field-accent); --b: var(--au-field-btn); --ob: var(--au-field-on-btn); }
.rau .bl-end { position: relative; overflow: hidden; isolation: isolate; padding: 40px 48px; background: var(--field); color: var(--on-field); --t: var(--on-field); --t2: var(--au-field-muted); --acc: var(--au-field-accent); --b: var(--au-field-btn); --ob: var(--au-field-on-btn); }
.rau .bl-end::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -120%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--light) 50%, transparent), transparent); }
.rau .bl-cta-copy { display: grid; gap: 6px; }
.rau .bl-cta-h { font: 600 21px/1.25 var(--sans); letter-spacing: -.015em; }
.rau .bl-end .bl-cta-h { font: 500 clamp(24px, 2.2vw, 32px)/1.15 var(--display); letter-spacing: -.025em; }
.rau .bl-cta-s { color: var(--t2); }
.rau .bl-cta-go { display: grid; gap: 6px; justify-items: start; flex: none; }
.rau .bl-cta-note { font-size: 13px; color: var(--t2); }
.rau .bl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rau .bl-share-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--t); }
.rau .bl-share-i svg { width: 16px; height: 16px; }
.rau .bl-author { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 28px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); }
.rau .bl-author-pic { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--g); font: 500 32px/1 var(--display); color: var(--mk); }
.rau .bl-author-pic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rau .bl-author-b { display: grid; gap: 6px; justify-items: start; }
.rau .bl-author-n { font: 600 20px/1.25 var(--sans); }
.rau .bl-author-n a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.rau .bl-author-r, .rau .bl-author-line { color: var(--t2); }
.rau .bl-author-l { font-size: 13px; color: var(--t2); }
.rau .bl-author-l a { display: inline-block; padding: 8px 0; margin: -8px 0; color: var(--lk); }
.rau .bl-aside { position: sticky; top: calc(var(--bar) + 24px); display: grid; gap: var(--gap-card); }
.rau .bl-toc { display: grid; gap: 4px; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.rau .bl-toc a { padding: 6px 0; color: var(--t2); text-decoration: none; font-size: 15px; }
.rau .bl-toc a:hover { color: var(--lk); }
.rau .bl-more .h2 { margin-bottom: 40px; }
@media (max-width: 1023px) { .rau .bl-lay { grid-template-columns: 1fr; } .rau .bl-aside { position: static; } .rau .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .rau .bl-top, .rau .bl-grid { grid-template-columns: 1fr; }
  .rau .bl-card.is-side { grid-template-columns: none; grid-template-rows: auto 1fr; }
  .rau .bl-card.is-side .bl-card-pic { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .rau .bl-top .is-lead { grid-row: auto; }
  .rau .bl-cta, .rau .bl-end { flex-direction: column; align-items: flex-start; }
  .rau .bl-end { padding: 28px 24px; }
  .rau .bl-author { grid-template-columns: 1fr; }
  .rau .bl-author-pic { width: 120px; }
}

/* the intro video's overlay (cinematic/IntroVideo.tsx): the whole screen, the night, one close */
.rau .intro-video { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgb(10 13 23 / .92); }
.rau .intro-video iframe { width: min(1100px, 100%); aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-lg); }

/* ============================================================
   MOTION — momentary reveals and the strip; nothing under reduced motion
   ============================================================ */
/* site-runtime.ts `reveals` arms only what starts below the fold, so a slow or failed script never hides a word */
.rau .reveal.is-armed:not(.is-in) { opacity: 0; transform: translateY(18px); }
.rau .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .rau *, .rau *::before, .rau *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .rau .reveal, .rau .reveal.is-armed:not(.is-in) { opacity: 1; transform: none; transition: none; }
  .rau .strip-track { animation: none; width: auto; }
  .rau .strip-track ul + ul { display: none; }
  .rau .strip ul { flex-wrap: wrap; justify-content: center; padding: 6px var(--gutter); }
  .rau .strip li { padding: 12px 28px 12px 0; }
  .rau .hero-photo img { animation: none !important; transform: none; }
}
/* the page is held until its typefaces are in (entrance.tsx): no motion underneath while it waits */
/* the page's ground: the body keeps the paper; <html> is painted the entrance's top edge and steps to its bottom edge halfway down
   (ground.css), each tone's edges from ground.ts (the paper the fallback) */
html:has(.rau) body { background-color: #F7F7F5; }
html:has(.rau[data-mode="dark"]) body { background-color: #161B29; }
html:has(.rau) { --rs-ground-top: var(--rs-ground-top-l, #F7F7F5); --rs-ground-bottom: var(--rs-ground-bottom-l, #F7F7F5); background-color: var(--rs-ground-top); }
html:has(.rau[data-mode="dark"]) { --rs-ground-top: var(--rs-ground-top-d, #161B29); --rs-ground-bottom: var(--rs-ground-bottom-d, #161B29); }
html:has(.rau).rs-entering .rau { opacity: 0; visibility: hidden; animation: rau-gate 0s 1.6s forwards; }
@keyframes rau-gate { to { opacity: 1; visibility: visible; } }
/* the page's entrance (templates/entrance.tsx): the opening band's words settle into place once, after the gate; a person's words
   only on their own page; a word the scroll reveal arms is left to the reveal */
@media (prefers-reduced-motion: no-preference) {
  .rau :is(.hero-copy, .opening-in, .meet.is-member > .meet-copy, .bl-head-in) > :not(.is-armed) { animation: rau-settle .7s var(--ease) both; }
  .rau :is(.hero-copy, .opening-in, .meet.is-member > .meet-copy, .bl-head-in) > :nth-child(2) { animation-delay: .08s; }
  .rau :is(.hero-copy, .opening-in, .meet.is-member > .meet-copy, .bl-head-in) > :nth-child(3) { animation-delay: .16s; }
  .rau :is(.hero-copy, .opening-in, .meet.is-member > .meet-copy, .bl-head-in) > :nth-child(n + 4) { animation-delay: .24s; }
}
/* from all but invisible, never 0: the browser does not count words that start at opacity 0 as the page's largest paint */
@keyframes rau-settle { from { opacity: .01; transform: translateY(16px); } }
html:has(.rau).rs-entering .rau * { animation-play-state: paused !important; } /* important: an entrance's `animation` shorthand resets the play state */

/* ============================================================
   THE EDITOR'S RINGS (the preview only): the hover's dashed ring, the selected thing's solid one, the words being edited
   ============================================================ */
.rau[data-preview] .rs-sel-hover { outline: 1.5px dashed var(--light); outline-offset: 3px; }
.rau[data-preview] .rs-sel-on { outline: 2px solid var(--light); outline-offset: 3px; }
.rau[data-preview] .rs-editing:not([data-sel]) { background: color-mix(in srgb, var(--light) 14%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--light) 60%, transparent); border-radius: 3px; }
.rau[data-preview] .rs-editing[data-sel] { outline: 2px solid var(--light); outline-offset: 3px; }

/* The owner's second button color (config.ts secondButtonColor, the Design pane's "Second button"; Andrew, 2026-10-21): every
   element this template draws in its second look (.btn-line, .btn-glass) is filled with it: the owner's second buttons (glass on the hero, the line look on the bands), the header bar's and the phone dock's (where the outline look is drawn the same), the phone menu's Call and Text (glass), More reviews and the blog's pager, share and call links (.btn-line). A team card's Meet is .btn-second, which this sheet does not style, so it is not painted.
   Its words take the color that reads on it (--rs-second-ink: theme.ts readableOn), and hover shades the fill away from the words
   (--rs-second-shade), so they read better still. Only on a root that carries the color (chrome-kit.tsx secondButtonAttrs): on Auto
   neither the mark nor the colors exist, so none of this applies. The :not(#…) lifts it over every ground's and hover's own rule
   for the look; a button's own color (drawn inline) still wins; many of one button keep the crowd's outline. */
.rau[data-second-button] .btn-line:not(.btn-many):not(#rs-second-button),
.rau[data-second-button] .btn-glass:not(.btn-many):not(#rs-second-button) {
  background-color: var(--rs-second); background-image: none; border-color: var(--rs-second); color: var(--rs-second-ink);
}
.rau[data-second-button] .btn-line:not(.btn-many):not(#rs-second-button):hover,
.rau[data-second-button] .btn-glass:not(.btn-many):not(#rs-second-button):hover {
  background-color: color-mix(in srgb, var(--rs-second) 88%, var(--rs-second-shade)); border-color: color-mix(in srgb, var(--rs-second) 88%, var(--rs-second-shade));
}

/* ── The blog's sidebar modules and its subscribe box (blog-shell/BlogModules.tsx), in Authority's own type and colors ──
   Beside the text with the call to action, in the owner's order; a column holding more than the call to action scrolls
   with the page (a sticky column taller than the window hides its own end). Lines and quiet words are the ground's own ink,
   so a module reads on the paper and on a colored band alike. */
.rau .bl-aside:has(> .bl-mod) { position: static; }
.rau .bl-mod { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.rau .bl-mod-h { font: 600 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.rau .bl-mod-sub, .rau .bl-mod-fine { font-size: 13px; line-height: 1.45; color: color-mix(in srgb, currentColor 70%, transparent); }
.rau :is(.bl-mod-name, .bl-mod-more, .bl-mod-topic, .bl-mod-post, .bl-mod-sub a) { color: inherit; }
.rau .bl-mod-who { display: flex; align-items: center; gap: 14px; }
.rau .bl-mod-av { flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--field-raised); color: var(--on-field); font-weight: 600; }
.rau .bl-mod-av img, .rau .bl-mod-ph img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rau .bl-mod-who-b, .rau .bl-mod-post-b { display: grid; gap: 2px; min-width: 0; }
.rau .bl-mod-name { font: 600 20px/1.25 var(--sans); text-decoration: none; }
.rau .bl-mod-more { justify-self: start; font-weight: 600; text-underline-offset: .2em; }
.rau .bl-mod-list { display: grid; margin: 0; padding: 0; list-style: none; }
.rau .bl-mod-topic, .rau .bl-mod-rates > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.rau .bl-mod-topic, .rau .bl-mod-post { text-decoration: none; }
.rau .bl-mod-n { font-variant-numeric: tabular-nums; color: color-mix(in srgb, currentColor 66%, transparent); }
.rau .bl-mod-post { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 0; }
.rau .bl-mod-post:not(:has(.bl-mod-ph)) { grid-template-columns: minmax(0, 1fr); }
.rau .bl-mod-ph { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); background: var(--g); }
.rau .bl-mod-post-t { font-weight: 600; line-height: 1.3; }
.rau .bl-mod-name:hover, .rau .bl-mod-topic:hover > span:first-child, .rau .bl-mod-post:hover .bl-mod-post-t { text-decoration: underline; text-underline-offset: .2em; }
.rau .bl-mod-rates { display: grid; margin: 0; }
.rau .bl-mod-rates dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.rau .bl-mod > .btn { justify-self: start; }
.rau .bl-mod-frame { display: block; width: 100%; border: 0; }
.rau .bl-sub { padding: 28px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line); }
.rau .bl-author + .bl-sub { margin-top: var(--gap-card); }
.rau :is(.bl-index, .bl-side) > :is(.wrap, .section-in, .chapter-in) > * + :is(.bl-mod, .bl-sub) { margin-top: var(--gap-card); }
.rau :is(.bl-index, .bl-side) .bl-mod { max-width: 640px; }

/* ── An article's rail and phone drawer (blog-shell/BlogRail.tsx; the shared layout is blog-rail.css), in Authority's own surfaces:
   the bar's and drawer's paper, ink and line, how far under the header the kept group stops (the rail's old sticky top),
   and "In this article" as its own card (already framed), its entries one type step under the cards (15px → 14px). ── */
.rau :is(.bl-rail, .bl-rbar, .bl-drawer) { --bl-paper: var(--paper); --bl-ink: var(--t); --bl-line: var(--line); }
.rau .bl-rail { --bl-rail-top: calc(var(--bar) + 24px); }
.rau .bl-rail-toc a { font-size: 14px; }
/* the official Equal Housing artwork on the Legal page (legal-doc.tsx draws both; legal-eho-grounds.test) for its band’s ground: the paper band: light, the night tone’s dark */
.rau .legal-read .legal-eho-on-light { display: block; }
.rau .legal-read .legal-eho-on-dark { display: none; }
.rau[data-mode="dark"] .legal-read .legal-eho-on-dark { display: block; }
.rau[data-mode="dark"] .legal-read .legal-eho-on-light { display: none; }