/* sambatayneh.com, local draft.
   One ordered stylesheet, mobile first. Main breakpoints: 640px (tablet), 1024px (desktop). Smaller steps:
   359px and 399px (narrow phones), 400px, 480px (the sticker row), 1119px, 1120px, 1179px and 1180px (the header),
   1200px (the rankings row), 1279px (page-head stickers) and 1360px (the wider page).
   Order: tokens, base, layout, header (with menus and breadcrumb), buttons, type, pills, hero,
   ID card, facts, cards, pictures (lead, tiles, strip), feature, loan programs, recognition and press,
   steps, checklist, quotes, FAQ, page head, limits, table, ladder, calculator, social, link list,
   economic calendar, SamBatayneh.tv, news, CTA band, footer, phone tab bar and "More" sheet, stickers, gear, motion.
   Pictures are Sam's own AI-made illustrations in /assets/img/. Every picture is sized by its container
   (width: 100% with a set aspect ratio), so none can be wider than the screen.
   Navigation: desktop has three header menus plus Economic calendar (shown as "Calendar"), SamBatayneh.tv, News and About; phones have a five-item tab bar
   (Home, Buyers, Areas, Loans, More) and the full page list in the footer. */

/* ---------- Tokens ---------- */
:root {
  /* OriginPoint blue (originpoint.com, Nov 10, 2026) */
  --blue: #0064e5;
  --blue-deep: #1a72ec;
  --blue-soft: #a8ceff;
  --tint: #e5f1ff;
  --wash: #f2f7fe;

  --ink: #25282a;
  --navy: #0a1628;
  --body: #3a4553;
  --muted: #566275;
  --line: #e2e8f0;
  --line-soft: #eef2f6;
  --shell: #f3f5f8;
  --card: #ffffff;

  --green: #15803d;
  --gold: #b45309;
  --purple: #6d28d9;
  --teal: #0f766e;
  --orange: #c2410c;

  /* Sam, Nov 11: "anything that's dark blue make it light blue". The bands that were navy are now the logo blue. */
  --grad-dark: linear-gradient(145deg, #0064e5 0%, #0064e5 55%, #1a72ec 100%);
  --shadow-rest: 0 1px 2px rgba(30, 80, 180, 0.04), 0 6px 20px rgba(30, 80, 180, 0.06);
  --shadow-hover: 0 2px 4px rgba(30, 80, 180, 0.06), 0 14px 34px rgba(30, 80, 180, 0.14);
  --shadow-glow: 0 8px 22px rgba(0, 100, 229, 0.28);

  /* Colours that change with the theme (light values here; the dark set is just below). Every surface, line and
     text colour on the page comes from a token, so the dark theme is one block of values and no extra rules.
     The exceptions are the bands that look the same in both themes (TV band, recognition, jumbo, feature, CTA,
     the white labels on pictures), which use fixed colours on purpose. */
  --check: #16a34a;                /* the green tick in a checklist: the same green in both themes (its tick is white) */
  --link: #0064e5;                 /* text links, eyebrows, icons in tinted squares */
  --link-hover: #1a72ec;
  --accent: #0064e5;               /* the blue words in a heading */
  --focus: #0064e5;                /* the focus ring */
  --tint-line: #a8ceff;            /* the border of a tinted (pale blue) surface */
  --solid: #25282a;                /* small solid chips: social icons, the skip link */
  --on-solid: #ffffff;
  --bar: rgba(255, 255, 255, 0.82);          /* the frosted header */
  --bar-line: rgba(226, 232, 240, 0.9);
  --tabs-bg: rgba(255, 255, 255, 0.88);      /* the phone tab bar */
  --tabs-line: rgba(86, 98, 117, 0.18);
  --pill: rgba(255, 255, 255, 0.85);
  --ok-bg: #dcfce7;                /* behind "Licensed originator" */
  --photo-top: #dbeafe;            /* behind Sam's photo while it loads */
  --tile: #0064e5;                 /* the band under a region tile's picture */
  --thead: #f8fafc;                /* a table's heading row */
  --rail: #cfe3ff;                 /* the ladder's rail */
  --field: #ffffff;                /* calculator fields */
  --field-line: #7b8798;           /* 3.6:1 on the white card, so a field's edge can be seen (it was #cbd5e1, 1.5:1) */
  --seg-on: #ffffff;               /* the chosen loan term */
  --footer: #ffffff;
  --draft-bg: #fef3c7;             /* the amber Draft note */
  --draft-ink: #92400e;
  --wall-line: #d3dce8;            /* the Home sticker wall's panel */
  --wall-bg: linear-gradient(150deg, #eef2f7 0%, #dfe6ef 55%, #cdd7e4 100%);
  --wall-hi: rgba(255, 255, 255, 0.85);
  --logo-plate: transparent;       /* OriginPoint's logo on the ID card: no plate on a white card */
  --logo-pad: 0px;
  --sun: none;                     /* the theme button shows the moon on a light page, the sun on a dark page */
  --moon: block;
  color-scheme: light;

  --display: "Nunito", ui-rounded, system-ui, sans-serif;
  --text: "DM Sans", system-ui, sans-serif;

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --max: 1120px;
  --gutter: 20px;
  --header-h: 64px;
  --tabs-h: 64px;

  /* Motion: all three are switched off under prefers-reduced-motion (see Motion) */
  --t: 0.18s;
  --lift: -2px;
  --zoom: 1.04;
}

/* ---------- Dark theme ---------- */
/* The same tokens with dark values. The set is written twice, and the two copies must stay the same:
     1. :root[data-theme="dark"]  when the visitor picked dark with the header button (build.py's head script puts
        the saved choice on <html> before the page is drawn);
     2. the device's own setting (prefers-color-scheme), until the visitor picks: :root:not([data-theme="light"]).
   Deep navy page, slightly lighter cards, near-white headings, blue-grey text. Buttons keep the logo blue #0064e5;
   links and accents use a lighter blue so they pass 4.5:1 on navy. The bands that are already dark or blue (TV
   band, recognition panel, jumbo block, feature card, CTA band, the TV screen) use fixed colours and look the same
   in both themes, as do the white button and the white picture labels that sit on them.
   Contrast on a card (#13233d): headings 15:1, body 10:1, muted and legal small print 6.8:1, links 6.5:1. */
:root[data-theme="dark"] {
  --tint: #15171b;
  --wash: #101114;
  --ink: #ffffff;
  --body: #d6d9de;
  --muted: #a3a8b1;
  --line: #2a2c31;
  --line-soft: #1d1f23;
  --shell: #000000;
  --card: #0e0f11;
  --green: #4ade80;
  --gold: #fbbf24;
  --purple: #c4b5fd;
  --teal: #5eead4;
  --orange: #fdba74;
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.6), 0 14px 34px rgba(0, 100, 229, 0.28);
  --shadow-glow: 0 8px 22px rgba(0, 100, 229, 0.4);
  --link: #4d97ff;
  --link-hover: #8fc0ff;
  --accent: #3d8dff;
  --focus: #4d97ff;
  --tint-line: #0064e5;
  --solid: #1d1f23;
  --on-solid: #ffffff;
  --bar: rgba(0, 0, 0, 0.84);
  --bar-line: rgba(0, 100, 229, 0.55);
  --tabs-bg: rgba(0, 0, 0, 0.92);
  --tabs-line: rgba(0, 100, 229, 0.5);
  --pill: rgba(255, 255, 255, 0.08);
  --ok-bg: rgba(34, 197, 94, 0.16);
  --photo-top: #15171b;
  --tile: #0064e5;
  --thead: #15171b;
  --rail: #0064e5;
  --field: #000000;
  --field-line: #5b6270;
  --seg-on: #0064e5;
  --footer: #07080a;
  --draft-bg: rgba(251, 191, 36, 0.14);
  --draft-ink: #fde68a;
  --wall-line: #2a2c31;
  --wall-bg: linear-gradient(150deg, #0e0f11 0%, #101114 55%, #15171b 100%);
  --wall-hi: rgba(255, 255, 255, 0.06);
  --logo-plate: #ffffff;
  --logo-pad: 8px 18px;
  --sun: block;
  --moon: none;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint: #15171b;
    --wash: #101114;
    --ink: #ffffff;
    --body: #d6d9de;
    --muted: #a3a8b1;
    --line: #2a2c31;
    --line-soft: #1d1f23;
    --shell: #000000;
    --card: #0e0f11;
    --green: #4ade80;
    --gold: #fbbf24;
    --purple: #c4b5fd;
    --teal: #5eead4;
    --orange: #fdba74;
    --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.6), 0 14px 34px rgba(0, 100, 229, 0.28);
    --shadow-glow: 0 8px 22px rgba(0, 100, 229, 0.4);
    --link: #4d97ff;
    --link-hover: #8fc0ff;
    --accent: #3d8dff;
    --focus: #4d97ff;
    --tint-line: #0064e5;
    --solid: #1d1f23;
    --on-solid: #ffffff;
    --bar: rgba(0, 0, 0, 0.84);
    --bar-line: rgba(0, 100, 229, 0.55);
    --tabs-bg: rgba(0, 0, 0, 0.92);
    --tabs-line: rgba(0, 100, 229, 0.5);
    --pill: rgba(255, 255, 255, 0.08);
    --ok-bg: rgba(34, 197, 94, 0.16);
    --photo-top: #15171b;
    --tile: #0064e5;
    --thead: #15171b;
    --rail: #0064e5;
    --field: #000000;
    --field-line: #5b6270;
    --seg-on: #0064e5;
    --footer: #07080a;
    --draft-bg: rgba(251, 191, 36, 0.14);
    --draft-ink: #fde68a;
    --wall-line: #2a2c31;
    --wall-bg: linear-gradient(150deg, #0e0f11 0%, #101114 55%, #15171b 100%);
    --wall-hi: rgba(255, 255, 255, 0.06);
    --logo-plate: #ffffff;
    --logo-pad: 8px 18px;
    --sun: block;
    --moon: none;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--shell);
}
body {
  margin: 0;
  padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px));
  background: var(--shell);
  color: var(--ink);
  font: 500 16px/1.6 var(--text);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
/* Selected text: pale blue with navy text, which reads on the light page and on the dark one. */
::selection { background: var(--blue-soft); color: var(--navy); }
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--display); font-weight: 900; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance;
}
p, figure, dl, dd { margin: 0; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cta :focus-visible, .feature :focus-visible, .program--feature :focus-visible { outline-color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 18px; border-radius: 999px;
  background: var(--solid); color: var(--on-solid); font-weight: 800; font-size: 14px;
}
.skip:focus { top: 10px; }
.link {
  color: var(--link); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.link:hover { color: var(--link-hover); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: 44px; }
.section--tight { padding-block: 28px; }
.section--media { padding-block: 8px 16px; }
.section-head { display: grid; gap: 10px; max-width: 640px; margin-bottom: 22px; }
.section-head p { color: var(--muted); }
.section-head__action { margin-top: 8px; }
.grid { display: grid; gap: 12px; }
.grid > *, .split > * { min-width: 0; }
.prose { display: grid; gap: 16px; }
.prose p { color: var(--body); }
.prose .grid { margin-top: 8px; }

@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; --header-h: 76px; }
  body { padding-bottom: 0; }
  .section { padding-block: 76px; }
  .section--tight { padding-block: 40px; }
  .section--media { padding-block: 12px 24px; }
  .section-head { margin-bottom: 32px; }
  .grid { gap: 16px; }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
  .split .section-head { position: sticky; top: calc(var(--header-h) + 24px); margin-bottom: 0; }
  /* A heading block that carries a sticker set is wrapped in .stick-headrow: the wrapper is what stays in view. */
  .split > .stick-headrow { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--bar-line);
}
/* Sam, Nov 12 (iPad): a menu opened "for a second and then it goes away". On iPad Safari a header that carries the
   frosted blur (backdrop-filter) or overflow-x: clip itself cuts off the dropdown panel that hangs below it once the
   page is repainted. So the blur and the bar colour sit on a layer BEHIND the header's content, and the header no
   longer clips anything; the panels are free to hang below it. */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bar);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
}
.header__row { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; }
/* Sam's SB mark (assets/logo/sb-mark.svg): a vector picture, so it stays sharp at 38px on any screen. */
.brand__mark { flex: none; width: 46px; height: 46px; filter: drop-shadow(0 2px 3px rgba(10, 30, 70, 0.28)); }
.brand__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.05; }
.brand__name { font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: -0.025em; white-space: nowrap; }
.brand__sub { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.brand__extra { display: none; }
/* The right end of the header: the theme button, then "Get started". */
.header__end { flex: none; display: flex; align-items: center; gap: 8px; }
/* Light mode / dark mode button (Sam, Nov 11). A round icon button, 40px, shown only when scripts run (html.js),
   because it works by script. The moon shows on a light page and the sun on a dark page: the --sun and --moon
   tokens decide, so it is right whether the theme came from the button or from the device's own setting. */
.theme-btn {
  display: none; flex: none; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.js .theme-btn { display: grid; }
.theme-btn:hover { border-color: var(--blue); color: var(--link); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .theme-btn__sun { display: var(--sun); }
.theme-btn .theme-btn__moon { display: var(--moon); }
.nav { display: none; align-items: center; gap: 2px; min-width: 0; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px;
  border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.nav a:hover, .menu > summary:hover { background: var(--wash); color: var(--link); }
.nav a.is-active, .menu.is-active > summary, .menu[open] > summary { background: var(--tint); color: var(--link); }

/* Header menus (desktop): "Who Sam works with", "Where", "Loans" */
.menu { position: relative; }
.menu > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 13px;
  border-radius: 999px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 800; white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px;
  transform: rotate(45deg); transition: transform var(--t);
}
.menu[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.menu__panel {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 5;
  display: grid; gap: 2px; min-width: 250px; padding: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-hover);
  /* The Who menu holds twelve pages and the Loans menu fourteen links (the loans page, six programs, the refinance
     page and three of its sections, three tools), so on a short window the panel scrolls inside itself and never
     runs off the bottom of the screen. */
  max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; overscroll-behavior: contain;
}
.menu__panel a { display: flex; padding: 0 14px; border-radius: var(--r-sm); }
/* The small labels inside a menu. "More" in the "Who Sam works with" menu: the three main pages sit above it, the
   nine others below. "Programs", "Refinance" and "Tools" in the Loans menu: the six main programs, the refinance
   page and three of its sections, then the other tools. */
.menu__more {
  margin-top: 6px; padding: 12px 14px 4px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); }
.crumbs a:hover { color: var(--link-hover); }

@media (min-width: 400px) { .brand__extra { display: inline; } }
/* Phones: the header holds the brand, the theme button and "Get started". On narrow phones the three sit a little
   closer and the name is a little smaller, so the row never crowds. The theme button keeps its 40px. */
@media (max-width: 399px) {
  .header__row { gap: 8px; }
  .header__end { gap: 6px; }
  .brand { gap: 8px; }
  .brand__name { font-size: 16px; }
  .header .btn--sm { padding-inline: 12px; }
}
@media (max-width: 359px) {
  .header__row { gap: 6px; }
  .brand { gap: 6px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 13px; }
  .brand__sub { font-size: 10px; }
  .header .btn--sm { padding-inline: 8px; font-size: 12px; }
  /* The theme button keeps its 40px here too (site audit Q13): at 320px the row needs about 250px of its 280px. */
}
@media (min-width: 1024px) { .nav { display: flex; } }
/* Narrow desktops: the header has seven items (three menus, Calendar, SamBatayneh.tv, News, About Sam) and the
   theme button, so the items sit closer, with no gap between them, and the brand line shows the NMLS number only.
   "Economic calendar" is shortened to "Calendar" in the header at every width (build.py does that; the link's
   aria-label keeps the full name). */
@media (min-width: 1024px) and (max-width: 1179px) {
  .nav { gap: 0; }
  .nav a, .menu > summary { padding-inline: 8px; }
  .menu__panel a { padding-inline: 14px; }
  .brand__extra { display: none; }
}
/* Sam, Nov 11: the menu bar says SamBatayneh.tv, the full word, at every desktop width. From 1024px to 1119px the
   seven items are set a little smaller and closer so the full word fits (seen in a browser at 1024px).
   By arithmetic, give or take 10%: at 1024px the row is 960px wide; the brand takes about 142px, the seven items
   about 580px, the theme button and "Get started" about 160px, and the two gaps 16px, which leaves about 60px.
   The links inside a dropdown panel keep their own padding and size (the second rule; site audit Q1: without it
   the rule above, which comes later in the file than the panel's own, also shrank the panel's links). */
@media (min-width: 1024px) and (max-width: 1119px) {
  .nav a, .menu > summary { padding-inline: 4px; font-size: 13.5px; }
  .menu__panel a { padding-inline: 14px; font-size: 14px; }
  .header__row { gap: 8px; }
  .brand { flex: none; gap: 8px; }
  .brand__mark { width: 42px; height: 42px; }
  .brand__name { font-size: 16px; }
}
@media (min-width: 1180px) {
  /* Sam, Nov 11: the logo was crammed against the menu (12px apart). The menu items sit a little closer together so
     the logo and "Get started" each get clear space from the menu, and a thin line sets the logo apart. */
  .nav { gap: 0; }
  .brand { padding-right: 20px; border-right: 1px solid var(--line); }
  .nav a, .menu > summary { padding-inline: 7px; }
  .menu__panel a { padding-inline: 14px; }
  .brand__extra { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 26px; border: 1px solid transparent; border-radius: 999px;
  font: 800 16px/1.2 var(--text); text-align: center; cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
}
.btn svg { flex: none; width: 18px; height: 18px; transition: transform var(--t); }
.btn:hover { transform: translateY(var(--lift)); }
.btn:hover svg { transform: translateX(calc(var(--lift) * -1.5)); }
.btn:active { transform: none; }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-glow); }
.btn--primary:hover { background: var(--blue-deep); box-shadow: 0 12px 28px rgba(0, 73, 168, 0.35); }
.btn--ghost { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-rest); }
.btn--ghost:hover { border-color: var(--blue); color: var(--link); }
/* The white button sits only on the dark and blue bands, which look the same in both themes: fixed colours. */
.btn--light { background: #fff; color: var(--blue-deep); box-shadow: 0 6px 18px rgba(10, 22, 40, 0.16); }
.btn--light:hover { background: #f2f7fe; }
.btn--sm { flex: none; min-height: 44px; padding: 8px 16px; font-size: 14px; white-space: nowrap; }
.btn--block { width: 100%; padding-inline: 18px; }
.btn-row { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 640px) { .btn-row { flex-direction: row; flex-wrap: wrap; } }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--link);
}
.eyebrow::before { content: ""; flex: none; width: 18px; height: 3px; border-radius: 3px; background: var(--blue); }
.h1 { font-size: clamp(38px, 10.4vw, 68px); letter-spacing: -0.035em; line-height: 1.02; }
.h2 { font-size: clamp(28px, 7vw, 40px); letter-spacing: -0.028em; }
.h3 { font-size: 21px; line-height: 1.2; }
.lede { font-size: 18px; line-height: 1.55; color: var(--body); }
.accent { color: var(--accent); }
.source-note { margin-top: 14px; font-size: 12.5px; line-height: 1.6; font-weight: 600; color: var(--muted); }
.source-note--narrow { max-width: 820px; }
/* The "Updated, source" line that sits just above the loan limits table */
.source-note--above { margin: -6px 0 14px; color: var(--body); }
.more-link { margin-top: 18px; }
/* A second link straight under the first (Home, Loan programs: the refinance page) */
.more-link--next { margin-top: 0; }
/* Home, under the "Three kinds of income" cards: one quiet band saying Sam works with every kind of home buyer,
   with its two links. The links wrap under the sentence on a phone. */
.everyone {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 16px; padding: 14px 18px;
  background: var(--tint); border: 1px solid var(--tint-line); border-radius: var(--r);
  font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--ink);
}
.everyone span { flex: 1 1 320px; min-width: 0; }
.everyone .link { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; font-weight: 800; }

@media (min-width: 1024px) { .lede { font-size: 20px; } }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--pill);
  font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--ink);
}
.pill svg { flex: none; width: 14px; height: 14px; color: var(--link); }
.pill--blue { background: var(--tint); border-color: var(--tint-line); color: var(--link); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Hero ---------- */
.hero, .pagehead { position: relative; overflow: hidden; overflow: clip; }
.hero { padding-block: 28px 36px; }
.hero::before, .hero::after, .pagehead::before {
  content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
.hero::before { width: 420px; height: 420px; right: -170px; top: -170px; background: rgba(0, 100, 229, 0.2); }
.hero::after { width: 320px; height: 320px; left: -170px; bottom: -190px; background: rgba(34, 197, 94, 0.1); }
.hero__grid { position: relative; z-index: 1; display: grid; gap: 28px; }
.hero__grid > * { min-width: 0; }
.hero__copy { display: grid; gap: 18px; justify-items: start; }
.hero__copy .btn-row { width: 100%; }

@media (min-width: 1024px) {
  .hero { padding-block: 76px 68px; }
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 64px; align-items: center; }
  .hero__copy { gap: 24px; }
}

/* ---------- ID card ---------- */
.idcard {
  display: grid; gap: 16px; padding: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-hover);
}
/* The logo and the "Licensed originator" pill share a row and wrap onto two when the card is too narrow for both
   (site audit Q3: at 320px the row needs about 275px and has 242px, so the pill used to run out of the card). */
.idcard__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
/* OriginPoint's logo is never recoloured. On the dark theme it sits on a small white plate (the two tokens);
   on the light theme the plate is see-through with no padding, so the logo is exactly as before. */
.idcard__logo {
  height: 26px; width: auto; box-sizing: content-box;
  padding: var(--logo-pad); border-radius: 999px; background: var(--logo-plate);   /* Sam, Nov 11: the same pill curve as the buttons, so the plate does not look stuck on */
}
.idcard__logotext { font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: -0.02em; }
.verified {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: var(--ok-bg); color: var(--green); font-size: 12px; font-weight: 800; white-space: nowrap;
}
.verified svg { width: 13px; height: 13px; }
.idcard__main { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; }
.idcard__photo {
  position: relative; overflow: hidden; width: 104px; aspect-ratio: 1; border-radius: 22px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--photo-top), var(--wash));
  box-shadow: 0 0 0 1px var(--line), var(--shadow-rest);
  font-family: var(--display); font-weight: 900; font-size: 34px; color: var(--link);
}
.idcard__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* The two tap-to-call links are 44px tall, so a thumb can hit them (site audit Q13: they were about 30px and 26px). */
.idcard__phone {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--display); font-weight: 900; font-size: 19px; letter-spacing: -0.01em; color: var(--link); text-decoration: none; white-space: nowrap;
}
.idcard__phone:hover { text-decoration: underline; }
.footer__phone { margin: 0; font-weight: 700; }
.footer__phone a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 900; white-space: nowrap; }
.idcard__body { display: grid; gap: 6px; min-width: 0; }
.idcard__name { font-family: var(--display); font-weight: 900; font-size: 23px; letter-spacing: -0.025em; line-height: 1.1; }
.idcard__title { font-size: 14px; font-weight: 700; color: var(--body); line-height: 1.35; }
.idcard__ids { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; line-height: 1.6; }
.idcard__ids b { color: var(--ink); font-weight: 800; white-space: nowrap; }
.idcard__foot {
  display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
}
.idcard__social, .footer__social { display: flex; flex-wrap: wrap; gap: 6px; }
.idcard__social a, .footer__social a {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--solid); color: var(--on-solid);
  transition: transform var(--t), background var(--t);
}
.idcard__social a:hover, .footer__social a:hover { transform: translateY(var(--lift)); background: var(--blue); }
.idcard__social svg, .footer__social svg { width: 20px; height: 20px; }

/* The narrowest phones (site audit Q3): a smaller photo, so the phone number, which never wraps, has about 144px
   of the card's 244px and needs about 134px at this size. */
@media (max-width: 359px) {
  .idcard__main { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .idcard__photo { width: 88px; border-radius: 18px; }
  .idcard__phone { font-size: 18px; }
}
@media (min-width: 640px) {
  .idcard { padding: 22px; }
  .idcard__main { grid-template-columns: 128px minmax(0, 1fr); gap: 20px; }
  .idcard__photo { width: 128px; }
  .idcard__foot { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 1024px) {
  .idcard { padding: 24px; gap: 20px; }
  .idcard__logo { height: 30px; }
  .idcard__main { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .idcard__photo { width: 184px; border-radius: 30px; font-size: 52px; }
  .idcard__body { justify-items: center; text-align: center; gap: 8px; }
  .idcard__name { font-size: 27px; }
  .idcard__foot { grid-template-columns: 1fr; justify-items: center; }
  .idcard__social { justify-content: center; }
}

/* ---------- Facts strip ---------- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fact {
  padding: 16px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-rest);
}
.fact__big {
  font-family: var(--display); font-weight: 900; font-size: clamp(19px, 5.6vw, 28px);
  letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.fact__label { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.35; }
.fact__note { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--blue); line-height: 1.35; }
.fact__note .link { font-weight: 700; }

@media (min-width: 640px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fact { padding: 20px; } }
@media (min-width: 1024px) { .facts { gap: 16px; } }

/* ---------- Cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-rest);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
a.card:hover { transform: translateY(var(--lift)); border-color: var(--blue); box-shadow: var(--shadow-hover); }
.card:target { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 100, 229, 0.14), var(--shadow-rest); }
.card__icon {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--tint); color: var(--link);
}
.card__icon svg { width: 22px; height: 22px; }
.card--green .card__icon { background: rgba(34, 197, 94, 0.12); color: var(--green); }
.card--gold .card__icon { background: rgba(217, 119, 6, 0.12); color: var(--gold); }
.card--purple .card__icon { background: rgba(124, 58, 237, 0.1); color: var(--purple); }
.card--teal .card__icon { background: rgba(14, 165, 164, 0.12); color: var(--teal); }
.card--orange .card__icon { background: rgba(255, 122, 0, 0.12); color: var(--orange); }
.card p { color: var(--body); font-size: 15px; line-height: 1.55; }
.card__meta { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.card__cta {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  min-height: 44px; margin-top: auto; margin-bottom: -10px;
  font-size: 14px; font-weight: 800; color: var(--link);
}
.card__cta svg { flex: none; width: 16px; height: 16px; transition: transform var(--t); }
a.card:hover .card__cta svg, a.card__cta:hover svg { transform: translateX(calc(var(--lift) * -1.5)); }
a.card__cta:hover { color: var(--link-hover); }
.more-link .card__cta { margin-bottom: 0; }
.card dl { display: grid; gap: 12px; }
.card dt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.card dd { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--body); }
.card--compact { padding: 16px; }
.card--compact .h3 { font-size: 18px; }

@media (min-width: 1024px) {
  .card { padding: 24px; }
  .card--compact { padding: 18px; }
}

/* ---------- Pictures ---------- */
/* Lead: one large picture with rounded corners and a small place label. */
.lead {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--tint); box-shadow: var(--shadow-hover);
}
.lead img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.lead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, rgba(10, 22, 40, 0.42), rgba(10, 22, 40, 0)); pointer-events: none;
}
.lead__cap {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; max-width: calc(100% - 24px);
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  /* A white label on a picture: the same fixed colours in both themes */
  background: rgba(255, 255, 255, 0.95); color: #25282a; box-shadow: 0 4px 14px rgba(10, 22, 40, 0.2);
  font-size: 12.5px; font-weight: 800; line-height: 1.3;
}
.lead__cap svg { flex: none; width: 14px; height: 14px; color: #0064e5; }

/* Tiles: one for every region on the home page, in an even grid of equal tiles (1 per row on phones, 2 on tablets,
   4 on desktop). Each tile is a two-row grid: the picture in a 16:10 panel, then a navy band with the region's name
   and its link, so white text never sits on the bare picture. The region's sticker sits on the picture's top right
   corner (see "Tile corner" in the Stickers part). A region whose picture has not arrived shows the panel's own
   navy-to-blue gradient, at the same size and shape. */
.tiles { display: grid; gap: 12px; }
.tile {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
  overflow: hidden; border-radius: var(--r-lg);
  background: var(--tile); color: #fff; box-shadow: var(--shadow-hover);
}
.tile__pic {
  grid-column: 1; grid-row: 1; display: block; overflow: hidden;
  background: linear-gradient(145deg, #0064e5 0%, #1a72ec 45%, #3d8dff 100%);
}
.tile__pic picture { display: block; }
.tile__pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.6s ease; }
.tile__pic--blank { aspect-ratio: 16 / 10; }
.tile:hover .tile__pic img { transform: scale(var(--zoom)); }
.tile__cap { grid-column: 1; grid-row: 2; display: grid; gap: 4px; align-content: start; padding: 14px 16px 16px; }
.tile__place { font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: -0.025em; line-height: 1.15; color: #fff; }
.tile__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: #fff; }
.tile__cta svg { flex: none; width: 16px; height: 16px; transition: transform var(--t); }
.tile:hover .tile__cta svg { transform: translateX(calc(var(--lift) * -1.5)); }
/* The day above the region's name on the TV page's desk tiles */
.tile__day { display: block; margin-bottom: 3px; font-family: var(--text); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.3; color: #e5f1ff; }

/* Strip: smaller pictures in a row. It scrolls sideways inside itself on a phone and is a grid from 640px. */
.strip {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline-offset: -3px; border-radius: var(--r); }
.shot { flex: 0 0 78%; max-width: 340px; display: grid; gap: 8px; align-content: start; scroll-snap-align: start; }
.strip--1 .shot { flex-basis: 100%; max-width: none; }
.shot img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r); background: var(--tint); box-shadow: var(--shadow-rest);
}
.shot figcaption { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--muted); }

@media (min-width: 640px) {
  .lead img { aspect-ratio: 2 / 1; }
  .lead__cap { left: 18px; bottom: 18px; font-size: 13px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible;
    margin-inline: 0; padding: 0;
  }
  .strip--1 { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .strip--1 .shot img { aspect-ratio: 16 / 9; }
  .strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shot { max-width: none; }
}
@media (min-width: 1024px) {
  .lead img { aspect-ratio: 21 / 9; }
  .tiles, .strip { gap: 16px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile__place { font-size: 18px; }
  /* The TV page's five desk tiles: one row of five, with a slightly smaller name and link to suit the narrower tile */
  .tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .tiles--5 .tile { border-radius: var(--r); }
  .tiles--5 .tile__cap { padding: 12px 12px 14px; }
  .tiles--5 .tile__place { font-size: 16px; }
  .tiles--5 .tile__cta { font-size: 13px; }
  .strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Feature (dark) card ---------- */
.feature {
  position: relative; overflow: hidden; display: grid; gap: 20px; padding: 28px 22px;
  border-radius: var(--r-lg); background: var(--grad-dark); color: #fff;
  box-shadow: 0 20px 50px rgba(10, 22, 40, 0.28);
}
.feature::after {
  content: ""; position: absolute; width: 340px; height: 340px; right: -140px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 100, 229, 0.6), transparent 65%); pointer-events: none;
}
.feature > * { position: relative; z-index: 1; min-width: 0; }
.feature__copy { display: grid; gap: 14px; }
.feature h2 { color: #fff; }
.feature p { color: rgba(255, 255, 255, 0.82); }
.feature .eyebrow { color: #e5f1ff; }
.feature .eyebrow::before { background: #e5f1ff; }
.feature .link, .feature .link:hover { color: #fff; font-weight: 800; }
.feature .btn { justify-self: start; }

@media (min-width: 1024px) {
  .feature { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: center; gap: 32px; padding: 52px 48px; }
  .feature .btn { justify-self: end; }
}

/* ---------- Loan programs (loans page) ---------- */
.programs { display: grid; gap: 14px; }
.program {
  display: grid; gap: 20px; padding: 24px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-rest);
}
.program > * { min-width: 0; }
.program:target { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 100, 229, 0.14), var(--shadow-rest); }
.program__head { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; }
.program__icon {
  width: 48px; height: 48px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--tint); color: var(--link);
}
.program__icon svg { width: 24px; height: 24px; }
.program__title { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.program .h2 { font-size: clamp(26px, 6.4vw, 34px); }
.program__cols { display: grid; gap: 20px; }
.program__col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.program__label {
  font-family: var(--text); font-size: 12px; font-weight: 800; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
}
.program__col p { font-size: 15px; line-height: 1.6; color: var(--body); }
/* The three column labels are paragraphs, not headings (site audit S6), so they are given their label look again
   here, after the rule for a column's ordinary paragraphs. */
.program__col .program__label { font-size: 12px; font-weight: 800; line-height: 1.3; color: var(--muted); }
.program .checklist { gap: 10px; }
.program__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.program__note { flex: 1 1 260px; max-width: 60ch; font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--muted); }

/* Jumbo, Sam's specialty: the same block on the dark gradient */
.program--feature { background: var(--grad-dark); border-color: transparent; box-shadow: 0 20px 50px rgba(10, 22, 40, 0.28); color: #fff; }
.program--feature:target { border-color: var(--blue-soft); box-shadow: 0 0 0 4px rgba(168, 206, 255, 0.4), 0 20px 50px rgba(10, 22, 40, 0.28); }
.program--feature h2 { color: #fff; }
.program--feature .eyebrow, .program--feature .program__label { color: #e5f1ff; }
.program--feature .eyebrow::before { background: #e5f1ff; }
.program--feature .program__icon { background: rgba(255, 255, 255, 0.12); color: #fff; }
.program--feature .program__col p, .program--feature .checklist li { color: rgba(255, 255, 255, 0.86); }
.program--feature .program__col .program__label { color: #e5f1ff; }
.program--feature .checklist b { color: #fff; }
.program--feature .program__foot { border-top-color: rgba(255, 255, 255, 0.18); }
.program--feature .program__note { color: rgba(255, 255, 255, 0.82); }
.program--feature .link, .program--feature .link:hover { color: #fff; font-weight: 800; }

@media (min-width: 1024px) {
  .programs { gap: 20px; }
  .program { gap: 26px; padding: 36px; }
  .program__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

/* ---------- Recognition and press ---------- */
.press {
  position: relative; overflow: hidden; display: grid; gap: 22px; padding: 30px 20px;
  border-radius: var(--r-lg); background: var(--grad-dark); color: #fff;
  box-shadow: 0 20px 50px rgba(10, 22, 40, 0.28);
}
.press::before {
  content: ""; position: absolute; width: 380px; height: 380px; right: -150px; top: -200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.26), transparent 65%); pointer-events: none;
}
.press > * { position: relative; z-index: 1; min-width: 0; }
.press__head { display: grid; gap: 10px; justify-items: start; max-width: 640px; }
.press .eyebrow, .press__meta { color: #fde68a; }
.press .eyebrow::before { background: #fde68a; }
.press h2, .press h3, .press h4 { color: #fff; }
.press :focus-visible { outline-color: #fff; }
.press__group { display: grid; gap: 12px; }
.press__label {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3;
}
.press__label::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.22); }
.press__grid { display: grid; gap: 12px; }
.press__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 20px 20px 12px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r);
}
.press__title {
  margin: 0; font-family: var(--display); font-size: 19px; font-weight: 900;
  letter-spacing: -0.02em; line-height: 1.22; overflow-wrap: break-word;
}
.press__links { display: grid; justify-items: start; width: 100%; min-width: 0; margin-top: auto; }
.press__link {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 6px 0;
  font-size: 14px; font-weight: 800; line-height: 1.35; color: #fde68a;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.press__link:hover { color: #fff; }
.press__link svg { flex: none; width: 16px; height: 16px; }
.press__icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(252, 211, 77, 0.16); color: #fde68a;
}
.press__icon svg { width: 22px; height: 22px; }
.press__meta { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.3; }
.press__item p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.press__note { font-size: 12.5px; font-weight: 600; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }

@media (min-width: 640px) {
  .press { padding: 38px 32px; }
  .press__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .press { gap: 30px; padding: 56px 48px; }
  .press__group { gap: 16px; }
  .press__grid { gap: 16px; }
  .press__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .press__item { padding: 26px 26px 16px; }
  .press__title { font-size: 21px; }
  .press__grid--3 .press__item, .press__grid--4 .press__item { padding: 22px 22px 12px; }
  .press__grid--3 .press__title, .press__grid--4 .press__title { font-size: 19px; }
}
/* Four National Mortgage News cards: one per row on phones, two by two on tablets and small laptops, four across on wide screens. */
@media (min-width: 1200px) {
  .press__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .press__grid--4 .press__item { padding: 20px 18px 10px; }
  .press__grid--4 .press__title { font-size: 18px; }
}

/* Compact form (Home): same items and links, no icons, tighter cards. Links keep their 44px tap height. */
.press--compact { gap: 18px; }
.press--compact .press__icon { display: none; }
.press--compact .press__item { gap: 6px; padding: 16px 16px 6px; }
.press--compact .press__title { font-size: 17px; }
.press--compact .press__item p { font-size: 14px; line-height: 1.5; }
@media (min-width: 1024px) {
  .press--compact { gap: 22px; padding: 44px 40px; }
  .press--compact .press__group, .press--compact .press__grid { gap: 12px; }
  .press--compact .press__item { padding: 18px 18px 8px; }
}

/* ---------- Steps ---------- */
.steps { display: grid; gap: 12px; counter-reset: step; }
.step {
  position: relative; padding: 20px 20px 20px 74px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 18px; top: 18px; width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--blue); color: #fff;
  font-family: var(--display); font-weight: 900; font-size: 18px;
}
.step h3 { font-size: 19px; margin-bottom: 4px; }
.step p { color: var(--body); font-size: 15px; line-height: 1.55; }

@media (min-width: 640px) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step { padding: 78px 24px 24px; }
  .step::before { left: 24px; top: 24px; }
}

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 14px; }
.checklist li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.55; color: var(--body); }
.checklist svg { width: 24px; height: 24px; color: var(--check); }
.checklist b { color: var(--ink); font-weight: 800; }

/* ---------- Quotes ---------- */
.quote {
  display: grid; gap: 14px; align-content: space-between; padding: 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
}
.quote__mark { height: 18px; font-family: var(--display); font-weight: 900; font-size: 46px; line-height: 0.6; color: var(--accent); }
.quote blockquote { margin: 0; font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.38; letter-spacing: -0.01em; color: var(--ink); }
.quote figcaption { padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13px; font-weight: 700; color: var(--muted); }

@media (min-width: 1024px) { .quote { padding: 26px; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
  transition: border-color var(--t);
}
.faq details[open] { border-color: var(--tint-line); }
.faq summary {
  position: relative; display: flex; align-items: center; min-height: 60px; padding: 14px 62px 14px 20px;
  border-radius: var(--r); cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 900; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--link); }
.faq summary::before {
  content: ""; position: absolute; right: 14px; top: 50%; width: 32px; height: 32px; margin-top: -16px;
  border-radius: 50%; background: var(--tint);
}
.faq summary::after {
  content: ""; position: absolute; right: 25px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2.5px solid var(--link); border-bottom: 2.5px solid var(--link); border-radius: 1px;
  transform: rotate(45deg); transition: transform var(--t);
}
.faq details[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.faq__a { padding: 0 20px 20px; max-width: 68ch; color: var(--body); font-size: 15px; line-height: 1.6; }

/* ---------- Page head (inner pages) ---------- */
.pagehead { padding-block: 32px 12px; }
.pagehead::before { width: 380px; height: 380px; right: -170px; top: -200px; background: rgba(0, 100, 229, 0.18); }
.pagehead .wrap { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; }
.pagehead .wrap > * { min-width: 0; }
.pagehead .h1 { font-size: clamp(32px, 8.6vw, 56px); max-width: 19ch; }
/* A heading that holds the one long word "SamBatayneh.tv" (the TV page and the News page): a little smaller on
   the narrowest phones, so the word is never broken in two. The same size as any other page from about 372px up. */
.pagehead .h1--word { font-size: clamp(26px, 8.6vw, 56px); }
.pagehead .btn-row { width: 100%; }
.pagehead .lede { max-width: 60ch; }
/* One smaller line under the lede (the loans page: Sam works with every kind of home buyer). */
.pagehead__also { max-width: 60ch; font-size: 15px; line-height: 1.55; font-weight: 600; color: var(--body); }
/* The same line used as a pointer above a grid of cards (loans page, "Low down payment options"). */
.section-head + .pagehead__also { max-width: 72ch; margin: 0 0 20px; }
.section-head + .pagehead__also .link { display: inline-block; padding-block: 6px; }
.chips {
  display: flex; gap: 8px; overflow-x: auto; justify-self: stretch;
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: none; min-height: 44px; padding-inline: 16px; white-space: nowrap; transition: border-color var(--t), color var(--t), background var(--t); }
.chips a:hover { border-color: var(--blue); color: var(--link); background: var(--card); }

@media (min-width: 1024px) {
  .pagehead { padding-block: 68px 20px; }
  .pagehead .wrap { gap: 18px; }
  .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* ---------- Loan limits: headline numbers ---------- */
.limits { display: grid; gap: 12px; }
.limit {
  display: grid; gap: 8px; align-content: start; padding: 22px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
}
.limit__label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.limit__num {
  font-family: var(--display); font-weight: 900; font-size: clamp(32px, 9vw, 42px);
  letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums;
}
.limit__note { font-size: 14px; line-height: 1.5; color: var(--body); }
.limit--blue { background: var(--blue); border-color: transparent; box-shadow: var(--shadow-glow); color: #fff; }
.limit--blue .limit__label, .limit--blue .limit__note { color: rgba(255, 255, 255, 0.92); }

@media (min-width: 640px) { .limits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .limits { gap: 16px; } .limit { padding: 28px 24px; } }

/* ---------- Loan limits: table ---------- */
/* If a table is ever wider than its box, it scrolls sideways inside the box and is never cut off (site audit Q2:
   on a 320px phone the loan limits table needed about 296px and had 278px, and the extra was clipped). */
.table { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest); }
.table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 12px 8px; text-align: right; vertical-align: middle; font-size: 13px; line-height: 1.35; }
.table th:first-child { padding-left: 16px; text-align: left; }
.table td:last-child, .table thead th:last-child { padding-right: 16px; }
.table thead th {
  background: var(--thead); border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.table tbody th, .table tbody td { border-bottom: 1px solid var(--line-soft); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody th { font-weight: 800; color: var(--ink); }
.table tbody th small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.table tbody td { font-weight: 700; color: var(--body); white-space: nowrap; }
.table tbody tr { transition: background var(--t); }
.table tbody tr:hover { background: var(--wash); }

@media (min-width: 640px) {
  .table th, .table td { padding: 14px 22px; font-size: 15px; }
  .table th:first-child { padding-left: 24px; }
  .table td:last-child, .table thead th:last-child { padding-right: 24px; }
  .table thead th { font-size: 12px; }
  .table tbody th small { font-size: 12.5px; }
}

/* ---------- Loan limits: ladder ---------- */
.ladder { display: grid; }
.rung { position: relative; padding: 0 0 24px 36px; }
.rung:last-child { padding-bottom: 0; }
.rung::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: -8px; width: 3px; border-radius: 3px; background: var(--rail); }
.rung:last-child::before { display: none; }
.rung::after { content: ""; position: absolute; left: 0; top: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--card); border: 5px solid var(--blue); }
.rung h3 { font-size: 19px; margin-bottom: 4px; }
.rung p { font-size: 15px; line-height: 1.6; color: var(--body); }

/* ---------- Calculator ---------- */
.calc { display: grid; gap: 14px; }
.calc > * { min-width: 0; }
.calc__form { gap: 18px; }
.calc__out { display: grid; gap: 12px; align-content: start; }
.calc__two { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; }
.calc__three { display: grid; gap: 12px; padding-top: 12px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field__label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
legend.field__label { margin-bottom: 6px; }
.field__box {
  display: flex; align-items: center; gap: 6px; height: 54px; padding: 0 14px;
  background: var(--field); border: 1.5px solid var(--field-line); border-radius: 14px; cursor: text;
  transition: border-color var(--t), box-shadow var(--t);
}
.field__box:hover { border-color: var(--link); }
/* The field's own focus ring: a real outline in the theme's focus colour, so it shows in dark mode and in Windows
   high-contrast mode, where borders' colours and shadows are dropped (site audit Q5). The input inside has no
   outline of its own, because this box is what is seen to take the focus. */
.field__box:focus-within { border-color: var(--focus); outline: 3px solid var(--focus); outline-offset: 2px; }
.field__affix { flex: none; font-weight: 800; color: var(--muted); }
.field input {
  flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  font: 800 18px var(--text); color: var(--ink); font-variant-numeric: tabular-nums;
}
.field input::placeholder { color: var(--muted); font-weight: 600; opacity: 1; }
.field__hint { font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--muted); }
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--shell); border-radius: 14px; }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: grid; place-items: center; height: 46px; border-radius: 10px;
  font-size: 15px; font-weight: 800; color: var(--body); white-space: nowrap;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.seg label:hover span { color: var(--link); }
.seg input:checked + span { background: var(--seg-on); color: var(--link); box-shadow: var(--shadow-rest); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.calc__more { padding-top: 4px; border-top: 1px solid var(--line-soft); }
.calc__more summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 10px;
  cursor: pointer; list-style: none; font-size: 14px; font-weight: 800; color: var(--link);
}
.calc__more summary::-webkit-details-marker { display: none; }
.calc__more summary::before {
  content: "+"; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint); font-size: 16px; line-height: 1;
}
.calc__more[open] summary::before { content: "\2212"; }
/* The loan size check: a small label (a heading for screen readers, set like the card's other small labels) and
   the verdict under it in the heading type. The verdict is a live region, so a screen reader says it when it changes. */
.calc__sizehead { font-family: var(--text); line-height: 1.6; }
.card .calc__verdict { font-family: var(--display); font-weight: 900; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.calc__rows.calc__rows { gap: 0; }
.calc__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.calc__rows > div:first-child { padding-top: 0; }
.calc__rows > div:last-child { padding-bottom: 0; border-bottom: 0; }
.calc__rows dt { font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--body); }
.calc__rows dd { flex: none; margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (min-width: 640px) { .calc__three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .calc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 24px; align-items: start; }
  .calc__form { padding: 28px; }
  .calc__out { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------- Social ---------- */
.social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.social a {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 64px; padding: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.social a:hover { transform: translateY(var(--lift)); border-color: var(--blue); box-shadow: var(--shadow-hover); }
.social__icon {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--solid); color: var(--on-solid); transition: background var(--t);
}
.social a:hover .social__icon { background: var(--blue); }
.social__icon svg { width: 20px; height: 20px; }
.social__text { display: grid; min-width: 0; }
.social__name { font-size: 14px; font-weight: 800; line-height: 1.25; }
.social__handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--muted); }

@media (min-width: 640px) {
  .social { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .social a { gap: 14px; padding: 14px 16px; }
  .social__name { font-size: 15px; }
  .social__handle { font-size: 13px; }
}
@media (min-width: 1024px) { .social { gap: 16px; } }

/* ---------- Link list (related pages) ---------- */
.jump { display: grid; gap: 10px; }
.jump a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; min-height: 60px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
  font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--ink);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t), color var(--t);
}
.jump a:hover { transform: translateY(var(--lift)); border-color: var(--blue); box-shadow: var(--shadow-hover); color: var(--link); }
.jump svg { flex: none; width: 18px; height: 18px; color: var(--link); }

@media (min-width: 640px) { .jump { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jump { gap: 16px; } .jump a { padding: 14px 20px; } }

/* "Sam also works with": a small plain list of links at the foot of each of the ten Who pages. No cards, no icons. */
.also { display: grid; gap: 4px; padding-top: 20px; border-top: 1px solid var(--line); }
.also__label { margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; color: var(--muted); }
.also__links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.also__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--link); }
.also__links a:hover { color: var(--link-hover); text-decoration: underline; }
/* The same list under a heading of its own, without the rule above it (refinance page, "Who Sam works with") */
.also--plain { padding-top: 0; border-top: 0; }

/* ---------- Refinance page ---------- */
/* The page is built from the pieces above (page head, cards, loan programs, steps, FAQ). The one new piece is the
   limit box in each region card of "Refinancing by region": the county's name and its 2026 loan limit on one line,
   one line per county (Silicon Valley has two, the Central Coast three). The figure never wraps. */
.card__limits { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--wash); border: 1px solid var(--line-soft); }
.card__limits li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--muted); }
.card__limits b { font-family: var(--display); font-weight: 900; font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); white-space: nowrap; }
/* A region card is opened by its own address (/refinance/#los-angeles): keep its heading clear of the sticky header */
#regions .card { scroll-margin-top: 8px; }

/* ---------- Economic calendar: the "Coming up" list ---------- */
/* One row per release in one card. Phones: the date above the name. From 640px: the date in a column of its own.
   The data point blocks on that page are plain cards with the card's own dl styles, so they need nothing here. */
.agenda { overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest); }
.agenda li { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.agenda li > * { min-width: 0; }
.agenda li:last-child { border-bottom: 0; }
.agenda__when { font-size: 14px; font-weight: 800; line-height: 1.4; color: var(--link); }
.agenda__when small { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.agenda__what { font-size: 15px; line-height: 1.5; color: var(--body); }
.agenda__what b { display: block; font-weight: 800; color: var(--ink); }

@media (min-width: 640px) {
  .agenda li { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 16px 24px; }
}

/* ---------- Economic calendar: "The latest numbers" ---------- */
/* One tile per data point: the name, the figure (large), the rest of the reading, the period, the release date, the
   next release and the publisher link. Stacked one per row on phones, two per row from 640px, three from 1024px.
   Every tile is sized by the grid and its text wraps, so nothing can be wider than the screen. */
.latest { display: grid; gap: 12px; }
.reading {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
}
.reading__name { font-family: var(--text); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; color: var(--muted); }
.reading__num {
  font-family: var(--display); font-weight: 900; font-size: clamp(30px, 8.6vw, 36px);
  letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; text-wrap: balance;
}
.reading__rest { font-size: 14px; line-height: 1.5; color: var(--body); }
.reading__meta { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--body); }
.reading__meta span { display: block; }
.reading__src { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--muted); }
.reading__src .link { display: inline-block; padding-block: 6px; }

@media (min-width: 640px) { .latest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .latest { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .reading { padding: 24px; }
}

/* ---------- SamBatayneh.tv ---------- */
/* The TV set on /tv/: a drawing in ONE colour, the text colour of .tvset (currentColor everywhere). On the site's
   light background that is the dark ink; on a dark background add .tvset--on-dark and the whole set turns white.
   Top to bottom: two thin antenna rods with ball tips on a little dome (one small SVG), a thick rounded bezel around
   a 16:9 screen, a short neck and a flat stand. The screen holds the picture (the still or the video) on top and
   the two-row ticker band across the bottom.
   Centred and up to 760px wide on computers; on phones it runs to 16px from each edge of the screen. */
.tvset {
  --tv: var(--blue);   /* Sam, Nov 11: "The TV should be in blue": the set is logo blue, not ink */
  display: grid; justify-items: center; gap: 14px;
  width: calc(100% + 8px); max-width: 760px; margin-inline: -4px; color: var(--tv);
}
.tvset--on-dark { --tv: #fff; }   /* the logo's lighter blue, so it shows on the dark band */
.tvset__draw { display: grid; justify-items: center; width: 100%; }
.tvset__draw > * { min-width: 0; }
.tvset__ears { width: 36%; }
.tvset__ears svg { width: 100%; height: auto; }
.tvset__bezel { width: 100%; padding: clamp(10px, 3.2vw, 22px); border-radius: clamp(18px, 5.4vw, 38px); background: currentColor; }
.tvset__screen {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; container-type: inline-size;
  overflow: hidden; aspect-ratio: 16 / 9; border-radius: clamp(8px, 2.6vw, 18px); background: #0a1628;
}
/* The picture area: the still or the video, whole and 16:9, centred on the screen's dark navy. contain, never cover,
   so the caption line at the bottom of the picture is never cut off. */
.tvset__pic { position: relative; min-width: 0; min-height: 0; }
.tvset__pic img, .tvset__pic video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }

/* The ticker: a band across the bottom of the screen, inside the bezel, 13% of the screen's height (never under 34px,
   so it can be read on a phone). Two rows, each a fixed tab and a line of text crawling right to left. Sizes follow
   the screen's own width (cqw), so the letters grow and shrink with the TV. The text is written twice in a row and
   the pair slides left by one copy (-50%), so it loops with no gap. Each row's time comes from build.py (--tk-time),
   worked out from the length of its text. No movement under prefers-reduced-motion: the text shows from its start. */
.tvticker {
  position: relative; min-width: 0; overflow: hidden;
  height: 34px; height: max(7.3125cqw, 34px);
  background: #050d1a; color: #fff;
  font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-align: left;
  font-size: 10px; font-size: clamp(10px, 1.9cqw, 15px);
}
.tvticker__rows { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); height: 100%; }
.tvticker__row { display: flex; min-width: 0; overflow: hidden; }
.tvticker__row + .tvticker__row { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.tvticker__tab {
  flex: none; display: grid; place-items: center; width: 7.8em;
  background: var(--blue); color: #fff; font-size: 0.9em; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap;
}
.tvticker__row--coming .tvticker__tab { background: var(--blue-soft); color: var(--navy); }
.tvticker__row--coming .tvticker__track { color: #d6e6ff; }
.tvticker__crawl { flex: 1 1 0; min-width: 0; overflow: hidden; }
.tvticker__track {
  display: flex; align-items: center; width: max-content; height: 100%;
  animation: tvticker var(--tk-time, 90s) linear infinite; will-change: transform;
}
.tvticker__track span { flex: none; white-space: pre; }
@keyframes tvticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tvset__neck { width: 11%; height: clamp(10px, 2.8vw, 20px); background: currentColor; }
.tvset__stand { width: 40%; height: clamp(8px, 2vw, 14px); border-radius: 5px; background: currentColor; }
/* Under the stand: the small line naming what is on ("Latest: ..."), then the caption. */
.tvset__cap { display: grid; justify-items: center; gap: 4px; font-size: 13px; font-weight: 700; line-height: 1.5; text-align: center; color: var(--muted); }
a.tvset__draw { border-radius: clamp(18px, 5.4vw, 38px); }

/* Home's TV band: the same TV, white, alone on a full-width dark navy band between the hero and the region tiles.
   Eyebrow above; one line and one button under the stand. Nothing sits on or over the TV, and no sticker goes here.
   On phones the TV runs to 16px from each edge (the .tvset rule above); from 640px it is centred, up to 760px wide. */
.tvband {
  margin-bottom: 20px; padding-block: 56px 60px;
  background: var(--blue); background: var(--grad-dark); color: #fff;
}
.tvband__in { display: grid; justify-items: center; gap: 22px; text-align: center; }
.tvband__in > * { min-width: 0; }
.tvband__eyebrow { color: #e5f1ff; }
.tvband__eyebrow::before { background: #e5f1ff; }
.tvband .tvset__bezel { box-shadow: 0 0 90px rgba(0, 100, 229, 0.45); }
.tvband__line { max-width: 560px; font-size: 17px; font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.tvband :focus-visible { outline-color: #fff; }
/* The small "Episode page" link under the button: white and underlined on the dark band, 44px tall. */
.tvband__ep {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: -10px;
  font-size: 14px; font-weight: 800; color: #fff;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.tvband__ep:hover { color: #e5f1ff; }
.tvband__ep svg { flex: none; width: 16px; height: 16px; }

/* The presenters: five small cards (picture, "AI presenter" label, name, role). Two across on phones, three on
   tablets, five on desktop. Every card is sized by the grid. */
.cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.presenter {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 6px 6px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
}
.presenter picture { width: 100%; }
.presenter img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center top; border-radius: var(--r-sm); background: var(--tint); }
.presenter__tag {
  margin: 4px 6px 0; padding: 3px 9px; border-radius: 999px; background: var(--tint); color: var(--link);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4;
}
.presenter__name { padding-inline: 6px; font-size: 19px; line-height: 1.2; }
.presenter__role { padding-inline: 6px; font-size: 14px; line-height: 1.45; color: var(--body); }
.tvnote p { font-weight: 600; }

/* The small line under the TV naming what is on ("Latest: ..."), above the caption. Ink on the page, white on Home's
   dark band; both follow the theme through the tokens. */
.tvset__now { font-size: 14px; line-height: 1.45; color: var(--ink); }
.tvset--on-dark .tvset__now { color: rgba(255, 255, 255, 0.92); }

/* The Episodes row on /tv/, directly under the TV. On a phone it is one row that scrolls sideways, running to the
   screen's edges, each card about three quarters of the screen wide so the next one peeks in. From 640px it wraps
   into a grid of three, from 1024px four. A card keeps its column's width, so one episode alone is one tidy card,
   not a stretched one. Card: the 16:9 poster (play mark in the middle, "Latest" top left, the length bottom right:
   fixed colours, because they sit on a picture), then the show's name, the date and the desk. The card whose
   episode is on the TV has a blue ring and a blue play mark. No sticker goes here. */
.episodes {
  display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
}
.episode { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: min(78%, 300px); min-width: 0; scroll-snap-align: start; }
.episode__play {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 6px 6px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
  color: var(--body); transition: box-shadow var(--t), border-color var(--t);
}
.episode__play:hover { border-color: var(--blue); box-shadow: var(--shadow-hover); }
.episode__play[aria-current="true"] { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue), var(--shadow-rest); }
.episode__pic { position: relative; display: block; overflow: hidden; margin-bottom: 6px; aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: #0a1628; }
.episode__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.episode__mark { position: absolute; inset: 0; display: grid; place-items: center; }
.episode__mark svg {
  box-sizing: border-box; width: 52px; height: 52px; padding: 13px 11px 13px 15px; border-radius: 50%;
  background: rgba(5, 13, 26, 0.74); color: #fff; transition: background var(--t);
}
.episode__play:hover .episode__mark svg, .episode__play[aria-current="true"] .episode__mark svg { background: var(--blue); }
.episode__tag, .episode__len { position: absolute; color: #fff; font-weight: 800; line-height: 1.4; }
.episode__tag { top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--blue); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.episode__len { right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 7px; background: rgba(5, 13, 26, 0.82); font-size: 12px; font-variant-numeric: tabular-nums; }
.episode__show { padding-inline: 6px; font-size: 18px; line-height: 1.25; color: var(--ink); }
.episode__meta { padding-inline: 6px; font-size: 14px; line-height: 1.45; color: var(--body); }
.episode__read {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 12px;
  font-size: 14px; font-weight: 800; color: var(--link);
}
.episode__read:hover { color: var(--link-hover); }
.episode__read svg { flex: none; width: 16px; height: 16px; }
/* Under a card: "Episode page" and, if the day has one, "Read the article", side by side; they wrap if they must. */
.episode__links { display: flex; flex-wrap: wrap; column-gap: 2px; }

/* An episode's watch page, /tv/<date>-<show>/. Its heading uses the article page's smaller heading; the big TV is
   the same drawing as on /tv/; under it one reading column, up to 760px wide and centred under the TV: the
   description, the collapsed transcript, the previous and next episodes, "All episodes" and the closing note.
   Everything is sized by the column and the text wraps. Colours come from the theme tokens. No sticker goes here. */
.article--watch { margin-inline: auto; }
.watch__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 14px; font-weight: 800; color: var(--link);
}
.watch__link:hover { color: var(--link-hover); }
.watch__link svg { flex: none; width: 16px; height: 16px; }
/* Previous and next episode: two quiet cards (one column on a phone, side by side from 640px, "next" on the right),
   then "All episodes" on a row of its own. */
.epnav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; }
.epnav__a {
  display: grid; gap: 2px; width: 100%; min-width: 0; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
  transition: box-shadow var(--t), border-color var(--t);
}
.epnav__a:hover { border-color: var(--blue); box-shadow: var(--shadow-hover); }
.epnav__k { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; color: var(--muted); }
.epnav__v { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--ink); }
/* The transcript: closed until asked for, in the look of the FAQ rows. Its line sits above its text, in small print. */
.transcript {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
  transition: border-color var(--t);
}
.transcript[open] { border-color: var(--tint-line); }
.transcript > summary {
  position: relative; display: flex; align-items: center; min-height: 60px; padding: 14px 62px 14px 20px;
  border-radius: var(--r); cursor: pointer; list-style: none; color: var(--ink);
  font-family: var(--display); font-weight: 900; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em;
}
.transcript > summary::-webkit-details-marker { display: none; }
.transcript > summary:hover { color: var(--link); }
.transcript > summary::before {
  content: ""; position: absolute; right: 14px; top: 50%; width: 32px; height: 32px; margin-top: -16px;
  border-radius: 50%; background: var(--tint);
}
.transcript > summary::after {
  content: ""; position: absolute; right: 25px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2.5px solid var(--link); border-bottom: 2.5px solid var(--link); border-radius: 1px;
  transform: rotate(45deg); transition: transform var(--t);
}
.transcript[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
.transcript__body { display: grid; gap: 12px; padding: 0 20px 20px; }
.transcript__body p { min-width: 0; font-size: 15px; line-height: 1.65; color: var(--body); overflow-wrap: break-word; }
.transcript__body .transcript__note { font-size: 12.5px; font-weight: 600; line-height: 1.6; color: var(--muted); }

@media (min-width: 640px) {
  .tvset { width: 100%; margin-inline: auto; }
  .cast { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .episodes {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
    overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none;
  }
  .episode { width: auto; }
  .epnav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .epnav__a[rel="next"] { grid-column: 2; text-align: right; }
  .epnav > .watch__link { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .tvband { margin-bottom: 32px; padding-block: 88px 92px; }
  .tvband__in { gap: 28px; }
  .tvband__line { font-size: 19px; }
  .cast { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .episodes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- News ---------- */
/* /news/ and the "Latest from SamBatayneh.tv" blocks are plain cards in the site's own grid, so they need nothing
   here. This part is the article page, /news/<slug>/: a headline smaller than a section page's (headlines are full
   sentences), a byline, and one reading column, up to 760px wide, holding the Key numbers table, the body sections,
   the questions, the player or link, the sources and the disclosure line. Everything is sized by the column and
   the text wraps, so nothing can be wider than the screen. No sticker goes inside the column. */
.pagehead--article .h1 { font-size: clamp(28px, 7vw, 44px); line-height: 1.08; letter-spacing: -0.028em; max-width: 26ch; }
.pagehead--article .eyebrow { align-items: flex-start; line-height: 1.5; }
.pagehead--article .eyebrow::before { margin-top: 7px; }
.byline { display: grid; gap: 2px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--muted); }
.byline b { font-weight: 800; color: var(--ink); }
.byline span { display: block; }
.article { display: grid; gap: 32px; max-width: 760px; }
.article > * { min-width: 0; }
.article__part { display: grid; gap: 14px; }
.article__part > * { min-width: 0; }
.article__part > .h2 { font-size: clamp(23px, 6vw, 30px); letter-spacing: -0.022em; line-height: 1.16; }
.article__part > p { font-size: 17px; line-height: 1.65; color: var(--body); }
.article__part > .source-note { margin-top: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.article__part > .tvset { margin-inline: auto; }
.sources { display: grid; gap: 10px; padding-left: 20px; list-style: disc; font-size: 15px; line-height: 1.55; color: var(--body); }
.sources li::marker { color: var(--accent); }
/* Key numbers: the loan limits table's look, with text that wraps. What the number is (and the period it covers),
   the reading, and the publisher as a link to its own page. */
.table--keys th, .table--keys td { text-align: left; vertical-align: top; }
.table--keys tbody td { white-space: normal; font-weight: 600; }
.table--keys tbody td:nth-child(2) { font-weight: 800; color: var(--ink); }
.table--keys tbody th { font-weight: 700; }
.table--keys .link { font-weight: 700; }

@media (min-width: 640px) {
  .table--keys tbody td:nth-child(2) { white-space: nowrap; }
}
@media (min-width: 1024px) {
  .article { gap: 40px; }
  .article__part { gap: 16px; }
  .article__part > p { font-size: 18px; }
}

/* ---------- CTA band ---------- */
.cta {
  position: relative; overflow: hidden; display: grid; gap: 20px; padding: 32px 22px;
  border-radius: var(--r-lg); background: var(--blue); color: #fff;
  box-shadow: 0 20px 50px rgba(0, 100, 229, 0.28);
}
.cta::before { content: ""; position: absolute; width: 300px; height: 300px; right: -120px; bottom: -160px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.cta > * { position: relative; min-width: 0; }
.cta__copy { display: grid; gap: 10px; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, 0.92); }
.cta .btn { justify-self: start; }

@media (min-width: 1024px) {
  .cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 56px 48px; }
}

/* ---------- Footer ---------- */
.footer { margin-top: 28px; padding-block: 32px 28px; background: var(--footer); border-top: 1px solid var(--line); }
.footer__top { display: grid; gap: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.footer__id { display: grid; gap: 16px; justify-items: start; align-content: start; min-width: 0; }
.footer__logo { display: block; max-width: 100%; }
.footer__logo img { width: 240px; height: auto; }
.footer__who { max-width: 46ch; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--body); }
.footer__ids { font-size: 14px; font-weight: 600; line-height: 1.65; color: var(--body); }
.footer__ids b { color: var(--ink); font-weight: 800; white-space: nowrap; }
/* Every page is linked here, so all of them can be reached on a phone without the menus. */
.footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; min-width: 0; }
.footer__group { display: grid; align-content: start; justify-items: start; min-width: 0; }
.footer__label { margin-bottom: 2px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.footer__group a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 800; line-height: 1.3; transition: color var(--t); }
.footer__group a:hover { color: var(--link); }
.footer__label--more { margin-top: 12px; }   /* the "More" label above the nine other Who pages */
.ehl { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.ehl svg { flex: none; width: 44px; height: 44px; }
.ehl span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; }
.legal { display: grid; gap: 12px; max-width: 920px; padding-top: 24px; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
/* The "Privacy" link at the end of the footer's advertising line: underlined, so it reads as a link in small print. */
.legal__link { color: var(--body); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; white-space: normal; transition: color var(--t); }   /* may wrap: "Do Not Sell or Share My Personal Information" is wider than a 320px phone's column */
.legal__link:hover { color: var(--link); }
/* The privacy page (/privacy/): plain parts, each a small heading and its paragraphs, in one readable column. */
.privacy { display: grid; gap: 28px; max-width: 760px; }
.privacy__part { display: grid; gap: 10px; scroll-margin-top: 88px; }
.privacy__part p, .privacy__list { font-size: 15.5px; line-height: 1.65; color: var(--body); }
.privacy__list { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.privacy code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; font-weight: 700; color: var(--ink); }
.privacy .link { overflow-wrap: anywhere; }
.draft { width: fit-content; padding: 7px 12px; border-radius: 10px; background: var(--draft-bg); color: var(--draft-ink); font-weight: 800; }
.footer__art { margin-top: 12px; font-size: 12px; font-weight: 600; line-height: 1.6; color: var(--muted); }
/* The double footer. .legal__label: the small label above OriginPoint's disclosures. .owner: Sam's own block, the
   last text on every page, under a thin line. Calm muted text in both themes; its first line a little stronger. */
.legal__label { margin-bottom: 0; }
.owner {
  display: grid; gap: 6px; max-width: 920px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.65; color: var(--muted);
}
.owner__first { font-weight: 800; color: var(--body); }
/* The ™ mark: small and raised, and it never changes the height of its line (no position, no negative margin). */
.tm { font-size: 0.6em; line-height: 0; vertical-align: 0.45em; font-weight: 800; letter-spacing: 0; }

/* Four link groups: two columns on phones and tablets, four on desktop. */
@media (min-width: 1024px) {
  .footer { margin-top: 40px; padding-block: 48px 40px; }
  .footer__top { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); align-items: start; gap: 48px; }
  .footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Phone tab bar ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px));
  background: var(--tabs-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border-top: 1px solid var(--tabs-line);
}
.tabs > a, .more > summary {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; font-size: 11px; font-weight: 800; line-height: 1.2; color: var(--muted);
  transition: color var(--t);
}
.tabs > a:focus-visible, .more > summary:focus-visible { outline-offset: -3px; border-radius: 12px; }
.tabs > a svg, .more > summary svg { width: 23px; height: 23px; }
.tabs > a span, .more > summary span { white-space: nowrap; }
.tabs > a.is-active, .more.is-active > summary, .more[open] > summary { color: var(--link); }
.tabs > a.is-active::before, .more.is-active > summary::before, .more[open] > summary::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px;
  border-radius: 0 0 3px 3px; background: var(--blue);
}

/* "More" sheet: every page, grouped. It opens upward from the tab bar. */
.more { min-width: 0; }
.more > summary { height: var(--tabs-h); cursor: pointer; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 100%;
  display: grid; gap: 18px; padding: 22px var(--gutter) 22px;
  max-height: calc(100vh - var(--tabs-h) - 72px);
  max-height: calc(100dvh - var(--tabs-h) - 72px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -18px 48px rgba(10, 22, 40, 0.24);
}
.sheet__group { display: grid; gap: 8px; }
.sheet__label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.sheet__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sheet__links a {
  display: flex; align-items: center; min-width: 0; min-height: 48px; padding: 8px 12px;
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--ink);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.sheet__links a:hover { border-color: var(--blue); color: var(--link); }
.sheet__links a.is-active { background: var(--tint); border-color: var(--tint-line); color: var(--link); }

/* The narrowest phones: slightly smaller links, so "SamBatayneh.tv" stays on one line in its half of the sheet */
@media (max-width: 359px) { .sheet__links a { padding-inline: 10px; font-size: 13px; } }
@media (min-width: 640px) { .sheet__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 1024px) { .tabs { display: none; } }

/* ---------- Stickers ---------- */
/* Sam's sticker pack (the trimmed copies in assets/stickers/web2/). Decoration only: empty alt, aria-hidden, lazy,
   and they can't be tapped.
   PLACEMENT (Sam, Nov 11: "you don't have to have them so uniform the way they are right now. And have them
   actually make sense to each section"). Each sticker sits beside the words it is about, and the sets are not
   uniform: one sticker, a pair or a cluster of three, in three sizes, some with a slight tilt.
   Still tidy: nothing in this part positions a sticker by hand, layers it or pulls it with a negative margin, and
   the only transform is a tilt of 4 degrees (the build checks all of that and stops if it finds more). Every
   sticker is a square box of its own in the normal flow of the page, with the artwork centred inside it, and the
   gap around it is wider than a tilted corner reaches (about 5px on the largest), so a sticker can never sit on
   top of text, a card, a picture, a button or another sticker. The picture carries its real width and height and
   the box is square, so nothing moves while a sticker loads.
   The patterns (build.py places every sticker with one of them, and checks each built page):
     1. Sticker set    .stick-set > .sticker--set: 1 to 3 stickers. A set sits beside a heading (.stick-headrow:
                       above the heading on phones, at the right end of the heading row on a wide screen), on an
                       inner page's heading (.pagehead), at the end of a hero's text column, under the ID card
                       (.hero__side), or in a row of its own inside a section.
     2. Card corner    .card__top > .sticker--corner: the same top right slot in every card of a grid.
     3. Sticker wall   .stick-wall > .sticker--wall: an even grid of every sticker (Home). Since Nov 11 it sits
                       closed inside the "Sticker pack" block's <details>, under one wall row (.stick-wall--row) of
                       eight hand-picked stickers that is always shown. See "Sticker pack" at the end of this part.
     4. Tile corner    .tiles > .tile > .sticker--tile: the region's sticker on the picture of its region tile,
                       in the same top right corner of every tile. The one pattern that sits on a picture. It is
                       still not placed by hand: the sticker shares the picture's grid cell and is aligned to that
                       cell's top right, with an even margin. The name and link are in the row below the picture.
   Nothing here moves, so there is nothing to switch off for reduced motion. */

/* A safety net only: nothing in this part reaches past the page edge. */
main, .footer { overflow-x: clip; }
.hero__copy, .idcard, .program, .footer__id { position: relative; }

.sticker {
  display: block; flex: none; width: 72px; max-width: 100%; aspect-ratio: 1 / 1;
  filter: drop-shadow(0 1px 1px rgba(10, 22, 40, 0.14)) drop-shadow(0 3px 6px rgba(10, 22, 40, 0.14));
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
.sticker picture { display: block; width: 100%; height: 100%; }
/* Three-part selector on purpose: it has to win over ".card img", ".hero img" and the like. */
.sticker picture .sticker__img {
  display: block; position: static; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: center;
  border-radius: 0; background: none; box-shadow: none; transform: none; transition: none;
}

/* 1. Sticker set: one, two or three stickers in a small group. Three sizes, and an optional slight tilt.
   The widest set on a phone is 96 + 72 + 72 and two gaps, 268px, which fits a 320px screen's 288px column. */
.stick-set { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 14px; max-width: 100%; }
.stick-set--center { justify-content: center; }
/* Sam, Nov 11: no set is pushed out to the right edge. A set that used to end its row is centred in it instead
   (under the ID card, above a closing band, after the steps). */
.stick-set--end { justify-content: center; }
.sticker--s { width: 56px; }
.sticker--m { width: 72px; }
.sticker--l { width: 96px; }
.sticker--tl { transform: rotate(-4deg); }
.sticker--tr { transform: rotate(4deg); }
/* A set in a row of its own: above a row of pictures, above the closing band, after the steps */
.wrap > .stick-set--center, .stick-set--closing { margin-bottom: 16px; }
.stick-set--after { margin-top: 16px; }
/* Under the ID card: the card and the set under it share the hero's second column */
.hero__side { display: grid; gap: 14px; min-width: 0; }
.hero__side > * { min-width: 0; }

/* Beside a heading. On phones the set is the first row, above the heading block. */
.stick-headrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 22px; }
.stick-headrow > * { min-width: 0; }
.stick-headrow > .section-head { margin-bottom: 0; }
.stick-headrow > .stick-set { justify-self: start; }
.program .stick-headrow { margin-bottom: 0; }

/* 2. Card corner. The sticker ends the row that holds the card's icon. The row is as tall as the sticker whether
   or not a card has one, so the cards in a grid line up. */
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.sticker--corner { width: 56px; }

/* 3. The Home sticker wall: every sticker in an even grid on a light panel. Same cell, sticker centred, upright. */
.stick-wall {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  justify-items: center; align-items: center;
  padding: 16px 12px; border: 1px solid var(--wall-line); border-radius: var(--r-lg);
  background: var(--wall-bg);
  box-shadow: inset 0 1px 0 var(--wall-hi), var(--shadow-rest);
}
.stick-wall .sticker { width: 100%; max-width: 96px; }

/* 4. Tile corner. The sticker takes the picture's own cell of the tile grid (row 1) and sits at that cell's top
   right, inset evenly by its margin: the same corner, inset and width on every tile, upright. "position: relative"
   moves nothing (there are no offsets); it only keeps the sticker painted above the picture while the picture
   zooms on hover. The shadow is a little deeper than on a plain background so the sticker reads on any picture. */
.tile > .sticker--tile {
  grid-column: 1; grid-row: 1; justify-self: end; align-self: start;
  position: relative; width: 64px; margin: 10px;
  filter: drop-shadow(0 1px 2px rgba(10, 22, 40, 0.3)) drop-shadow(0 5px 12px rgba(10, 22, 40, 0.3));
}

@media (min-width: 640px) {
  .stick-set { gap: 14px 18px; }
  .stick-wall { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; padding: 22px 20px; }
}

@media (min-width: 1024px) {
  /* The three sizes on a wide screen */
  .stick-set { gap: 16px 20px; }
  .sticker--s { width: 72px; }
  .sticker--m { width: 96px; }
  .sticker--l { width: 128px; }
  .wrap > .stick-set--center, .stick-set--closing { margin-bottom: 22px; }
  .stick-set--after { margin-top: 22px; }

  /* Beside a heading: the set at the right end of the heading row, in a column of its own */
  /* Sam, Nov 11: the set sits right beside the heading text, not out at the far edge of the page */
  .stick-headrow { grid-template-columns: minmax(0, max-content) auto; justify-content: start; column-gap: 48px; align-items: center; margin-bottom: 32px; }
  .stick-headrow > * { grid-column: 1; grid-row: 1; }
  .stick-headrow > .stick-set { grid-column: 2; justify-self: start; flex-wrap: nowrap; }
  /* In a two-column section the heading sits in the narrow left column, so its set stays above it */
  .split > .stick-headrow { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
  .split > .stick-headrow > * { grid-column: 1; grid-row: auto; }
  .split > .stick-headrow > .stick-set { justify-self: start; flex-wrap: wrap; }
  .split > .stick-headrow > .section-head { position: static; }

  /* Inner page heading: the page's own set in a second column, level with the breadcrumb, eyebrow and heading */
  /* Sam, Nov 11: the set sits right beside the heading itself, not out at the far edge of the page. The first
     column is as wide as the heading; everything under the heading spans both columns. */
  .pagehead .wrap { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 48px; }
  .pagehead .wrap > * { grid-column: 1 / -1; }
  .pagehead .wrap > .crumbs, .pagehead .wrap > .eyebrow, .pagehead .wrap > .h1 { grid-column: 1; }
  /* The set shares the heading's own row (breadcrumb, label, heading: the third row) and is centred on it */
  .pagehead .wrap > .stick-set { grid-column: 2; grid-row: 3; align-self: center; justify-self: start; flex-wrap: nowrap; }

  .stick-wall { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 18px; padding: 30px 28px; }

  /* Tile corner on the TV page's row of five narrower tiles: the same corner, a smaller sticker and inset */
  .tiles--5 > .tile > .sticker--tile { width: 52px; margin: 8px; }
}

/* Narrower desktops: the page heading's own set one size down, so three stickers still fit beside the heading */
@media (min-width: 1024px) and (max-width: 1279px) {
  .pagehead .wrap { column-gap: 32px; }
  .pagehead .sticker--s { width: 56px; }
  .pagehead .sticker--m { width: 72px; }
  .pagehead .sticker--l { width: 96px; }
}

/* Sticker pack (Home; Sam, Nov 11: "There's no reason to have 100 stickers just sitting there"). A small heading
   and one line; one wall row of eight hand-picked stickers; a <details>, closed, that holds the full wall; and the
   download link with its small print. Every colour is a theme token, so it reads in light and dark.
   These rules come after the wall's own rules on purpose: the row is a .stick-wall too (same panel, same cells)
   and only changes the number of columns. The row never wraps: the stickers that do not fit are hidden.
   4 across on a phone, 5 from 480px, 6 from 640px, all 8 from 1024px. */
.stickpack__head { display: grid; gap: 4px; margin-bottom: 14px; }
.stickpack__head p { font-size: 15px; color: var(--muted); }
.stick-wall--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stick-wall--row > .sticker:nth-child(n+5) { display: none; }
@media (min-width: 480px) {
  .stick-wall--row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stick-wall--row > .sticker:nth-child(5) { display: block; }
}
@media (min-width: 640px) {
  .stick-wall--row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stick-wall--row > .sticker:nth-child(6) { display: block; }
}
@media (min-width: 1024px) {
  .stick-wall--row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .stick-wall--row > .sticker:nth-child(n+7) { display: block; }
}
/* "See all 101 stickers" / "Hide the stickers": the summary holds both lines and shows the one that is true.
   The mark in front is a plus that becomes a minus (plain characters: nothing here is turned or moved). */
.stickpack__all { margin-top: 10px; }
.stickpack__all > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px 6px 4px;
  border-radius: 12px; font-size: 14px; font-weight: 800; color: var(--link); cursor: pointer; list-style: none;
}
.stickpack__all > summary::-webkit-details-marker { display: none; }
.stickpack__all > summary:hover { color: var(--link-hover); }
.stickpack__all > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.stickpack__all > summary::before {
  content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--tint); color: var(--link);
  font-size: 17px; font-weight: 800; line-height: 1;
}
.stickpack__all[open] > summary::before { content: "\2212"; }
.stickpack__hide { display: none; }
.stickpack__all[open] .stickpack__see { display: none; }
.stickpack__all[open] .stickpack__hide { display: inline; }
.stickpack__all > .stick-wall { margin-top: 8px; }
.stickpack__get { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.stickpack__terms { font-size: 12.5px; line-height: 1.6; font-weight: 600; color: var(--muted); }

/* ---------- Gear ---------- */
/* Home, near the bottom: six small product pictures (AI-made mock-ups with the SB mark) in light rounded cards, the
   item name under each. Pictures and names only: nothing here is a link or a button.
   Six pieces, each picture a front and a back (3:2): one to a row on phones, two on tablets, three on desktop.
   Every card is sized by the grid, so the row can never be wider than the screen. */
.gear { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.gear__item {
  display: grid; gap: 8px; align-content: start; min-width: 0; padding: 6px 6px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-rest);
}
.gear__item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); background: var(--tint); }
.gear__name { padding-inline: 2px; font-size: 12.5px; font-weight: 800; line-height: 1.25; text-align: center; color: var(--ink); }

@media (min-width: 640px) {
  .gear { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gear__item { padding: 8px 8px 12px; }
  .gear__name { font-size: 14px; }
}
@media (min-width: 1024px) {
  .gear { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- Motion ---------- */
/* Sections fade up as they scroll in. Only when scripts run (html.js), so nothing is hidden without them. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease, border-color var(--t), box-shadow var(--t); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js a.reveal.is-in:hover { transform: translateY(var(--lift)); }

@media (prefers-reduced-motion: reduce) {
  :root { --t: 0s; --lift: 0px; --zoom: 1; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .tvticker__track { animation: none; transform: none; }
}

/* The NMLS Consumer Access address is a live link (Sam, Nov 11): underlined and in the link colour so it reads as one. */
a[href^="https://www.nmlsconsumeraccess.org"] { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Wider page on large screens (Sam, Nov 11: "is there too much space to the right and the left?") ----------
   The content column was 1120px at every desktop width, which left about 400px empty on each side of a 1920px
   monitor. From 1360px up the column is 1280px. Text blocks keep their own reading widths (ch units). */
@media (min-width: 1360px) { :root { --max: 1280px; } }

/* ---------- Scroll helper (two round buttons, bottom left) ---------- */
.scrollhelp { display: none; }
.js .scrollhelp {
  display: flex; flex-direction: column; gap: 8px; position: fixed; z-index: 40;
  left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.js .scrollhelp.is-on { opacity: 1; visibility: visible; }
.scrollhelp__btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--link);
  box-shadow: var(--shadow-rest);
}
.scrollhelp__btn[hidden] { display: none; }
.scrollhelp__btn:hover { border-color: var(--blue); }
.scrollhelp__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.scrollhelp__btn svg { width: 20px; height: 20px; }
@media (min-width: 1024px) { .js .scrollhelp { left: 20px; bottom: 24px; } }
/* Sam, Nov 11: "I don't see the helper". White with a logo-blue outline and arrow (Sam: "not as heavy"), and on wide screens it sits
   just left of the page column instead of the far corner of the monitor. */
.scrollhelp__btn { background: #fff; border: 2px solid var(--blue); color: var(--blue); width: 48px; height: 48px; box-shadow: 0 4px 12px rgba(0, 100, 229, 0.18); }
.scrollhelp__btn svg { width: 22px; height: 22px; }
@media (min-width: 1360px) { .js .scrollhelp { left: max(20px, calc((100vw - var(--max)) / 2 - 76px)); bottom: 32px; } }
@media (prefers-reduced-motion: reduce) { .js .scrollhelp { transition: none; } }
@media print { .scrollhelp { display: none !important; } }

/* ---------- Header: the SB TV picture beside "SamBatayneh.tv", and more room between items on wide screens ----------
   Sam, Nov 11: "use the little SBTV thing ... in the header right next to the thing. And give them some breathing
   room up there." The picture shows from 1180px up, where the row has room; the wider page (1360px up) lets the
   items spread out. */
.nav__tvlink { display: inline-flex; align-items: center; gap: 6px; }
.nav__tvlink picture { display: none; line-height: 0; }
.nav .nav__tvlink .nav__tv { display: block; width: 26px; height: 26px; max-width: none; object-fit: contain; border-radius: 0; }
/* Dark theme: the picture's antenna and outline are near-black, so they get a thin light outline to stay readable
   on the dark header. Same art, no new file. Written twice, like the dark tokens (picked dark, or the device's). */
:root[data-theme="dark"] .nav .nav__tvlink .nav__tv { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.7)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav .nav__tvlink .nav__tv { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.7)); }
}
@media (min-width: 1180px) and (max-width: 1359px) {
  .nav__tvlink picture { display: block; }
  .nav a, .menu > summary { padding-inline: 5px; }
  .nav__tvlink { gap: 4px; }
}
@media (min-width: 1360px) {
  .nav__tvlink picture { display: block; }
  .nav { gap: 2px; }
  .nav a, .menu > summary { padding-inline: 11px; font-size: 15px; }
  .menu__panel a { padding-inline: 14px; font-size: 15px; }
  .nav .nav__tvlink .nav__tv { width: 34px; height: 34px; }
  .brand { padding-right: 24px; }
}

/* ---------- The station's blue ".tv" (Sam, Nov 11: always blue, everywhere) ---------- */
.tvdot { color: var(--accent); }
.tvband .tvdot, .cta .tvdot { color: #6aa9ff; }           /* on the dark navy and blue bands, the lighter logo blue reads */
.btn--primary .tvdot { color: inherit; }                   /* on a blue button the words stay white */

.tvname { white-space: nowrap; }                             /* the name and its .tv never split or gap apart */
/* Home hero: every region named under the pills (Sam, Nov 11: "I don't want to exclude wine country and all that") */
.hero__regions { margin: 14px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--muted); }
.hero__regions a { color: var(--link); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hero__regions a:hover { text-decoration: underline; }

/* Sam, Nov 11: dark mode is black and the light logo blue ("make it black and this light blue color"). Black page,
   near-black cards, white words; the logo blue carries the buttons, the bands, the links, the lines under the header
   and the tile strips. No navy. */

/* App-like bars (Sam, Nov 12): on phones and tablets the header and the bottom tab bar slide away while the page is
   scrolled down and slide back on any scroll up. The script (build.py, "App-like bars") adds .tuck. */
@media (max-width: 1023.98px) {
  .header, .tabs { transition: transform 0.26s ease; will-change: transform; }
  .header.tuck { transform: translateY(-110%); }
  .tabs.tuck { transform: translateY(110%); }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) { .header, .tabs { transition: none; } }