/* corlan-mobile.css: the phone design (owner 2026-10-08: "the mobile version is
   trash, spacing way off, on every page"; "if the phone version needs a
   different design I'm fine with that").

   Loaded on every page by corlan-nav.js (privacy and terms link it directly),
   after each page's own styles, so these rules are the phone layer: one
   spacing rhythm, one type scale, stacked cards, full-width calls to action.
   Desktop light mode is untouched: the phone rules sit inside the 640px
   query, and the dark mode repairs at the end apply only to dark. Pages set
   spacing inline, so the selectors match the inline values the pages use.
   The navbar, the mock product screens and the hero sample card keep their
   own phone rules. */

@media (max-width: 640px) {
  /* ── rhythm: sections ────────────────────────────────────────────────── */
  [style*="padding:104px 64px"]:not([data-navbar] *),
  [style*="padding:120px 64px"]:not([data-navbar] *),
  [style*="padding:96px 64px"]:not([data-navbar] *),
  [style*="padding:88px 64px"]:not([data-navbar] *),
  [style*="padding:84px 64px"]:not([data-navbar] *),
  [style*="padding:80px 64px"]:not([data-navbar] *),
  [style*="padding:72px 64px"]:not([data-navbar] *),
  [style*="padding:64px 64px"]:not([data-navbar] *),
  [data-sec],
  [style*="padding: 104px 64px"]:not([data-navbar] *),
  [style*="padding: 120px 64px"]:not([data-navbar] *),
  [style*="padding: 96px 64px"]:not([data-navbar] *),
  [style*="padding: 88px 64px"]:not([data-navbar] *),
  [style*="padding: 84px 64px"]:not([data-navbar] *),
  [style*="padding: 80px 64px"]:not([data-navbar] *),
  [style*="padding: 72px 64px"]:not([data-navbar] *),
  [style*="padding: 64px 64px"]:not([data-navbar] *) {
    padding: 36px 20px !important;
  }
  /* the first band under the menu starts close to it */
  [data-hero-pad] { padding: 28px 20px 36px !important; }
  /* slim bands (step bars, strips) keep their height, lose the desktop gutter */
  [style*="padding:22px 64px"]:not([data-navbar]),
  [style*="padding:18px 64px"]:not([data-navbar]),
  [style*="padding:0 64px"]:not([data-navbar]),
  [style*="padding: 22px 64px"]:not([data-navbar]),
  [style*="padding: 18px 64px"]:not([data-navbar]),
  [style*="padding: 0 64px"]:not([data-navbar]) { padding-left: 20px !important; padding-right: 20px !important; }

  /* ── rhythm: inside a section ────────────────────────────────────────── */
  [style*="margin-top:80px"]:not([data-mockup] *),
  [style*="margin-top:72px"]:not([data-mockup] *),
  [style*="margin-top:64px"]:not([data-mockup] *),
  [style*="margin-top:56px"]:not([data-mockup] *),
  [style*="margin-top:48px"]:not([data-mockup] *),
  [style*="margin-top: 80px"]:not([data-mockup] *),
  [style*="margin-top: 72px"]:not([data-mockup] *),
  [style*="margin-top: 64px"]:not([data-mockup] *),
  [style*="margin-top: 56px"]:not([data-mockup] *),
  [style*="margin-top: 48px"]:not([data-mockup] *) { margin-top: 28px !important; }
  [style*="margin-top:44px"]:not([data-mockup] *),
  [style*="margin-top:40px"]:not([data-mockup] *),
  [style*="margin-top:38px"]:not([data-mockup] *),
  [style*="margin-top:36px"]:not([data-mockup] *),
  [style*="margin-top: 44px"]:not([data-mockup] *),
  [style*="margin-top: 40px"]:not([data-mockup] *),
  [style*="margin-top: 38px"]:not([data-mockup] *),
  [style*="margin-top: 36px"]:not([data-mockup] *) { margin-top: 24px !important; }
  [style*="margin:40px auto 0"], [style*="margin: 40px auto 0"] { margin-top: 24px !important; }
  [style*="gap:90px"]:not([data-mockup] *),
  [style*="gap:80px"]:not([data-mockup] *),
  [style*="gap:72px"]:not([data-mockup] *),
  [style*="gap:64px"]:not([data-mockup] *),
  [style*="gap:56px"]:not([data-mockup] *),
  [style*="gap:48px"]:not([data-mockup] *),
  [style*="gap: 90px"]:not([data-mockup] *),
  [style*="gap: 80px"]:not([data-mockup] *),
  [style*="gap: 72px"]:not([data-mockup] *),
  [style*="gap: 64px"]:not([data-mockup] *),
  [style*="gap: 56px"]:not([data-mockup] *),
  [style*="gap: 48px"]:not([data-mockup] *) { gap: 28px !important; }
  [style*="gap:44px"]:not([data-mockup] *),
  [style*="gap:40px"]:not([data-mockup] *),
  [style*="gap:36px"]:not([data-mockup] *),
  [style*="gap: 44px"]:not([data-mockup] *),
  [style*="gap: 40px"]:not([data-mockup] *),
  [style*="gap: 36px"]:not([data-mockup] *) { gap: 20px !important; }

  /* ── type: one phone scale ───────────────────────────────────────────── */
  h1:not([data-mockup] *), [data-hero-h1] { font-size: 32px !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; }
  h2:not([data-mockup] *), [data-h2]:not([data-mockup] *) { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
  [style*="font-size:44px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size:40px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size:36px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size:34px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size: 44px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size: 40px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size: 36px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size: 34px"]:not([data-mockup] *):not([data-hero-card] *) { font-size: 26px !important; line-height: 1.15 !important; }
  [style*="font-size:30px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size:28px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size: 30px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size: 28px"]:not([data-mockup] *):not([data-hero-card] *) { font-size: 23px !important; line-height: 1.2 !important; }
  [style*="font-size:26px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size:24px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size: 26px"]:not([data-mockup] *):not([data-hero-card] *),
  [style*="font-size: 24px"]:not([data-mockup] *):not([data-hero-card] *) { font-size: 20px !important; line-height: 1.25 !important; }
  p[style*="font-size:19px"],
  p[style*="font-size:18px"],
  p[style*="font-size:17px"],
  p[style*="font-size: 19px"],
  p[style*="font-size: 18px"],
  p[style*="font-size: 17px"] {
    font-size: 16px !important; line-height: 1.55 !important;
  }
  p:not([data-mockup] *) { max-width: 100% !important; }

  /* ── cards ───────────────────────────────────────────────────────────── */
  [style*="padding:56px 64px"],
  [style*="padding:40px;"]:not([data-mockup] *),
  [style*="padding:40px\""]:not([data-mockup] *),
  [style*="padding: 56px 64px"],
  [style*="padding: 40px;"]:not([data-mockup] *) { padding: 24px 20px !important; }
  [style*="padding:30px 32px 30px 0"],
  [style*="padding:24px 28px 24px 0"],
  [style*="padding: 30px 32px 30px 0"],
  [style*="padding: 24px 28px 24px 0"] { padding: 18px 0 !important; }
  [style*="padding:30px 28px 30px 24px"],
  [style*="padding: 30px 28px 30px 24px"] { padding: 18px 16px !important; }

  /* chart panels on the insight cards size to their content (a fixed desktop
     height clipped the wrapped text on a phone) */
  a[style*="height:262px"],
  a[style*="height: 262px"] { height: auto !important; }
  a[style*="height:262px"] > div,
  a[style*="height: 262px"] > div { flex: none !important; }
  a[style*="height:262px"] > div:last-child:is(#_, *),
  a[style*="height: 262px"] > div:last-child:is(#_, *) { flex-wrap: nowrap !important; }
  /* the source line wraps rather than cutting off ("Source: Cor...") */
  a[style*="height:262px"] > div:last-child > span:first-child,
  a[style*="height: 262px"] > div:last-child > span:first-child {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  }
  /* the charts inside those panels keep their own columns (the pages' phone
     rule turns every grid into one column, which stacked the bars on top of
     their labels); :is(#_, *) lifts these above that rule */
  a[style*="height:262px"] [style*="grid-template-columns:104px minmax(0,1fr)"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: 104px minmax(0,1fr)"]:is(#_, *) { grid-template-columns: 104px minmax(0,1fr) !important; }
  a[style*="height:262px"] [style*="grid-template-columns:10px minmax(0,1fr)"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: 10px minmax(0,1fr)"]:is(#_, *) { grid-template-columns: 10px minmax(0,1fr) !important; }
  a[style*="height:262px"] [style*="grid-template-columns:1fr 1fr"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: 1fr 1fr"]:is(#_, *) { grid-template-columns: 1fr 1fr !important; }
  a[style*="height:262px"] [style*="grid-template-columns:1fr 1fr 1fr"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: 1fr 1fr 1fr"]:is(#_, *) { grid-template-columns: 1fr 1fr 1fr !important; }
  a[style*="height:262px"] [style*="grid-template-columns:1fr 70px"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: 1fr 70px"]:is(#_, *) { grid-template-columns: 1fr 70px !important; }
  a[style*="height:262px"] [style*="grid-template-columns:22px minmax(0,1fr) auto"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: 22px minmax(0,1fr) auto"]:is(#_, *) { grid-template-columns: 22px minmax(0,1fr) auto !important; }
  a[style*="height:262px"] [style*="grid-template-columns:30px 1fr"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: 30px 1fr"]:is(#_, *) { grid-template-columns: 30px 1fr !important; }
  a[style*="height:262px"] [style*="grid-template-columns:3fr 2fr"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: 3fr 2fr"]:is(#_, *) { grid-template-columns: 3fr 2fr !important; }
  a[style*="height:262px"] [style*="grid-template-columns:92px 1fr"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: 92px 1fr"]:is(#_, *) { grid-template-columns: 92px 1fr !important; }
  a[style*="height:262px"] [style*="grid-template-columns:repeat(10, 1fr)"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: repeat(10, 1fr)"]:is(#_, *) { grid-template-columns: repeat(10, 1fr) !important; }
  a[style*="height:262px"] [style*="grid-template-columns:repeat(2, 1fr)"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: repeat(2, 1fr)"]:is(#_, *) { grid-template-columns: repeat(2, 1fr) !important; }
  a[style*="height:262px"] [style*="grid-template-columns:repeat(3, 1fr)"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: repeat(3, 1fr)"]:is(#_, *) { grid-template-columns: repeat(3, 1fr) !important; }
  a[style*="height:262px"] [style*="grid-template-columns:repeat(4, 1fr)"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: repeat(4, 1fr)"]:is(#_, *) { grid-template-columns: repeat(4, 1fr) !important; }
  a[style*="height:262px"] [style*="grid-template-columns:repeat(5, 1fr)"]:is(#_, *),
  a[style*="height: 262px"] [style*="grid-template-columns: repeat(5, 1fr)"]:is(#_, *) { grid-template-columns: repeat(5, 1fr) !important; }
  /* the library on a phone: the first card keeps its chart, the rest read as a
     clean list of notes (title, summary, date) instead of a wall of charts */
  [style*="grid-template-columns:repeat(3, 1fr)"] > article:not(:first-child) > a[style*="height:262px"],
  [style*="grid-template-columns: repeat(3, 1fr)"] > article:not(:first-child) > a[style*="height: 262px"] { display: none !important; }
  /* filter tabs stay one row and scroll sideways */
  [data-filter-tabs] {
    flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important;
    align-items: flex-end !important; gap: 22px !important; overflow-x: auto; scrollbar-width: none;
    margin-top: 24px !important;
  }
  [data-filter-tabs]::-webkit-scrollbar { display: none; }
  [data-filter-tabs] > * { flex: none !important; width: auto !important; }
  /* a section title with a link beside it: the link sits under the title */
  div[style*="align-items:flex-end; justify-content:space-between"]:not([data-navbar] *):not([data-mockup] *),
  div[style*="align-items: flex-end; justify-content: space-between"]:not([data-navbar] *):not([data-mockup] *) {
    flex-direction: column !important; align-items: flex-start !important; gap: 12px !important;
  }

  /* ── comparison tables stack into labelled rows (labels set by corlan-nav.js) */
  table[data-stack] { min-width: 0 !important; table-layout: auto !important; }
  table[data-stack] thead { display: none !important; }
  table[data-stack], table[data-stack] tbody, table[data-stack] tr { display: block !important; width: 100% !important; }
  table[data-stack] tr { padding: 14px 0 !important; border-bottom: 1px solid var(--border); }
  table[data-stack] td, table[data-stack] tbody th {
    display: block !important; width: auto !important; padding: 0 !important; border: 0 !important; text-align: left !important;
  }
  table[data-stack] td[data-label]::before {
    content: attr(data-label); display: block; margin: 10px 0 2px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-muted);
  }
  /* term tables (5 or 6 columns) swipe sideways; the program column stays put */
  /* a short figures table in a post (3 or 4 columns of numbers) stays a table, set tight */
  table[data-compact] { font-size: 13px !important; }
  table[data-compact] th, table[data-compact] td { padding: 10px 8px !important; }
  table[data-compact] th:first-child, table[data-compact] td:first-child { padding-left: 12px !important; }
  table[data-compact] th:last-child, table[data-compact] td:last-child { padding-right: 12px !important; }
  table[data-swipe] { display: table !important; min-width: 980px !important; width: 980px !important; font-size: 13.5px !important; }
  table[data-swipe] td, table[data-swipe] th { padding-left: 10px !important; padding-right: 10px !important; }
  table[data-swipe] td:first-child, table[data-swipe] th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--bg); min-width: 128px;
  }

  /* easy to tap: the legal pages' footer links and the "fill it in yourself" link */
  footer > a { display: inline-block; padding: 10px 0; }
  button[data-quinn-use-form] { padding: 10px 0 !important; margin: -10px 0 !important; }

  /* ── calls to action: full width, stacked, easy to tap ───────────────── */
  a[style*="padding:15px 30px"]:not([data-navbar] *),
  a[style*="padding:15px 28px"]:not([data-navbar] *),
  a[style*="padding:14px 28px"]:not([data-navbar] *),
  a[style*="padding:16px 32px"]:not([data-navbar] *),
  a[style*="padding: 15px 30px"]:not([data-navbar] *),
  a[style*="padding: 15px 28px"]:not([data-navbar] *),
  a[style*="padding: 14px 28px"]:not([data-navbar] *),
  a[style*="padding: 16px 32px"]:not([data-navbar] *) {
    display: block !important; width: 100% !important; box-sizing: border-box; text-align: center;
  }
  div[style*="display:flex"]:has(> a[style*="padding:15px 30px"]),
  div[style*="display:flex"]:has(> a[style*="padding:15px 28px"]),
  div[style*="display: flex"]:has(> a[style*="padding: 15px 30px"]),
  div[style*="display: flex"]:has(> a[style*="padding: 15px 28px"]) { flex-direction: column; gap: 10px !important; }

  /* ── the animated components size to their content on a phone ───────── */
  corlan-quinn-tour, corlan-what-we-place, corlan-rails { min-height: 0 !important; }
  corlan-rails { margin-top: 24px !important; }
}

@media (max-width: 380px) {
  h1:not([data-mockup] *), [data-hero-h1] { font-size: 29px !important; }
  h2:not([data-mockup] *), [data-h2]:not([data-mockup] *) { font-size: 24px !important; }
}

/* Tablets: the Platform comparison held an 820px minimum width, so on a
   768px screen its last column (Corlan) was cut off at the edge. Between
   phone and desktop it fits the screen. */
@media (min-width: 641px) and (max-width: 900px) {
  [data-compare] { min-width: 0 !important; }
}

/* Dark mode repairs (all widths). Text the pages and the rate tables set in a
   fixed dark ink sat dark-on-dark once the theme went dark (the program terms
   tables, a few paragraphs, the lender survey chips). In dark mode those inks
   follow the theme's text colour, except on white cards and buttons and in the
   product mockups. */
[data-theme="dark"] [style*="color:oklch(0.16 0.02 258)"]:not([data-mockup] *):not([style*="background:#fff"]):not([style*="background:#fff"] *):not([style*="background: #fff"]):not([style*="background: #fff"] *):not([style*="background:white"]):not([style*="background:white"] *),
[data-theme="dark"] [style*="color: oklch(0.16 0.02 258)"]:not([data-mockup] *):not([style*="background:#fff"]):not([style*="background:#fff"] *):not([style*="background: #fff"]):not([style*="background: #fff"] *):not([style*="background:white"]):not([style*="background:white"] *),
[data-theme="dark"] [style*="color:oklch(0.24 0.03 258)"]:not([data-mockup] *):not([style*="background:#fff"]):not([style*="background:#fff"] *):not([style*="background: #fff"]):not([style*="background: #fff"] *):not([style*="background:white"]):not([style*="background:white"] *),
[data-theme="dark"] [style*="color: oklch(0.24 0.03 258)"]:not([data-mockup] *):not([style*="background:#fff"]):not([style*="background:#fff"] *):not([style*="background: #fff"]):not([style*="background: #fff"] *):not([style*="background:white"]):not([style*="background:white"] *),
[data-theme="dark"] [style*="color:oklch(0.25 0.02 258)"]:not([data-mockup] *):not([style*="background:#fff"]):not([style*="background:#fff"] *):not([style*="background: #fff"]):not([style*="background: #fff"] *):not([style*="background:white"]):not([style*="background:white"] *),
[data-theme="dark"] [style*="color: oklch(0.25 0.02 258)"]:not([data-mockup] *):not([style*="background:#fff"]):not([style*="background:#fff"] *):not([style*="background: #fff"]):not([style*="background: #fff"] *):not([style*="background:white"]):not([style*="background:white"] *),
[data-theme="dark"] [style*="color:oklch(0.3 0.03 258)"]:not([data-mockup] *):not([style*="background:#fff"]):not([style*="background:#fff"] *):not([style*="background: #fff"]):not([style*="background: #fff"] *):not([style*="background:white"]):not([style*="background:white"] *),
[data-theme="dark"] [style*="color: oklch(0.3 0.03 258)"]:not([data-mockup] *):not([style*="background:#fff"]):not([style*="background:#fff"] *):not([style*="background: #fff"]):not([style*="background: #fff"] *):not([style*="background:white"]):not([style*="background:white"] *) {
  color: var(--ink) !important;
}
[data-theme="dark"] [style*="border-bottom:2px solid oklch(0.16 0.02 258)"],
[data-theme="dark"] [style*="border-bottom: 2px solid oklch(0.16 0.02 258)"] {
  border-bottom-color: var(--ink-muted) !important;
}

/* ── the phone pass (owner 2026-10-12): product on screen, less to read,
   set in the house system (DESIGN-SYSTEM.md): hairlines, eyebrows, clause numbers ── */
#corlan-phone-bar { display: none; }
@media (max-width: 640px) {
  /* the desk bar: fixed, dark chrome like the nav, squared */
  #corlan-phone-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--nav-bg, oklch(0.13 0.018 258));
    border-top: 1px solid oklch(1 0 0 / .08); }
  #corlan-phone-bar a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 46px;
    font: 600 12px/1 'General Sans', 'Open Sans', Arial, sans-serif; letter-spacing: 1.6px; text-transform: uppercase;
    border-radius: 2px; text-decoration: none; }
  #corlan-phone-bar [data-bar-submit] { background: #fff; color: oklch(0.16 0.02 258); }
  #corlan-phone-bar [data-bar-call] { border: 1px solid oklch(1 0 0 / .28); color: #fff; }
  #corlan-phone-bar [hidden] { display: none; }
  html.has-phone-bar body { padding-bottom: 68px; }

  /* sections carry a clause number in place of the short accent rule */
  body { counter-reset: corlan-sec; }
  [data-sec]:has(h2) > :empty:is([style*="width:40px"],[style*="width: 40px"]):is([style*="height:2px"],[style*="height: 2px"]),
  [data-sec]:has(h2) > * > :empty:is([style*="width:40px"],[style*="width: 40px"]):is([style*="height:2px"],[style*="height: 2px"]),
  [data-sec]:has(h2) > * > * > :empty:is([style*="width:40px"],[style*="width: 40px"]):is([style*="height:2px"],[style*="height: 2px"]) {
    width: auto !important; height: auto !important; background: none !important; margin: 0 0 14px !important;
    display: flex !important; align-items: center; gap: 10px; }
  /* a centred section keeps its number centred over the heading */
  [data-sec]:has(h2) :empty:is([style*="width:40px"],[style*="width: 40px"]):is([style*="height:2px"],[style*="height: 2px"])[style*="margin:0 auto"], [data-sec]:has(h2) :empty[style*="width: 40px"][style*="margin: 0px auto"] {
    justify-content: center; margin: 0 auto 14px !important; }
  [data-sec]:has(h2) :empty:is([style*="width:40px"],[style*="width: 40px"]):is([style*="height:2px"],[style*="height: 2px"])::before {
    counter-increment: corlan-sec; content: counter(corlan-sec, decimal-leading-zero); font: 600 11px/1 'General Sans', 'Open Sans', Arial, sans-serif;
    letter-spacing: 2.5px; color: oklch(0.56 0.14 255); font-variant-numeric: tabular-nums; }
  [data-sec]:has(h2) :empty:is([style*="width:40px"],[style*="width: 40px"]):is([style*="height:2px"],[style*="height: 2px"])::after {
    content: ''; flex: 1; max-width: 48px; height: 1px; background: var(--border, #dde2e8); }

  /* headings tighter; figures tabular */
  [data-sec] h2 { letter-spacing: -0.03em !important; }
  [data-sec] [style*="font-variant-numeric"], [data-matrix-card], #corlan-phone-bar { font-variant-numeric: tabular-nums; }

  /* no card shadows on a phone (the house rule) */
  [data-hero-card], [data-card] { box-shadow: none !important; }

  /* folded sections: a ruled ledger row with a chevron */
  [data-phone-fold]:not([data-open]) [data-fold-hide] { display: none !important; }
  [data-fold-toggle], [data-collapse-toggle], [data-limit-toggle] {
    display: flex; align-items: center; gap: 12px; width: 100%; margin: 18px 0 0; padding: 15px 0;
    background: none; border: 0; border-top: 1px solid var(--ink, #111); border-bottom: 1px solid var(--border, #dde2e8);
    border-radius: 0; font: 600 11px/1.3 'General Sans', 'Open Sans', Arial, sans-serif; letter-spacing: 2px;
    text-transform: uppercase; color: var(--ink, #111); cursor: pointer; text-align: left; }
  [data-fold-toggle]::after, [data-collapse-toggle]::after, [data-limit-toggle]::after {
    content: ''; margin-left: auto; width: 7px; height: 7px; flex: none; border-right: 1.5px solid oklch(0.56 0.14 255);
    border-bottom: 1.5px solid oklch(0.56 0.14 255); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
  [data-fold-toggle][aria-expanded="true"]::after, [data-collapse-toggle][aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px); }
  [data-phone-collapse]:not([data-open]) { display: none !important; }
  [data-phone-limit]:not([data-open]) > [data-limit-hide] { display: none !important; }

  /* long paragraphs: three lines, then an eyebrow More */
  p[data-clamp]:not([data-clamp-open]) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  [data-more] { display: inline-block; margin: 8px 0 0; padding: 4px 0; background: none; border: 0;
    border-bottom: 1px solid oklch(0.56 0.14 255 / .5); font: 600 11px/1.2 'General Sans', 'Open Sans', Arial, sans-serif;
    letter-spacing: 2px; text-transform: uppercase; color: oklch(0.5 0.14 255); cursor: pointer; }

  /* the coverage matrix: one ruled row per asset class, its sources as squared tags */
  table[data-matrix-ready] { display: none !important; }
  [data-matrix-cards] { display: block; padding: 4px 16px 16px; }
  [data-matrix-card] { padding: 14px 0 12px; border-top: 1px solid var(--border, #dde2e8); }
  [data-matrix-card]:first-child { border-top: 1px solid var(--ink, #111); }
  [data-matrix-card] b { display: block; font: 700 15px/1.25 'General Sans', 'Open Sans', Arial, sans-serif; letter-spacing: -0.01em; color: var(--ink, #111); }
  [data-matrix-card] div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
  [data-matrix-card] span { font: 600 10.5px/1 'General Sans', 'Open Sans', Arial, sans-serif; letter-spacing: 1.2px;
    text-transform: uppercase; padding: 6px 8px; border: 1px solid var(--border, #dde2e8); border-radius: 2px; color: var(--ink-muted, #556); }

  /* headline facts read two across, set like a term sheet */
  [data-facts] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-facts] > div { border-right: none !important; padding: 16px 12px 16px 0 !important; border-bottom: 1px solid var(--border, #dde2e8); }

  /* the module rail (platform): a vertical ledger on a phone, not a 760px strip */
  [style*="repeat(7,1fr)"][style*="min-width:760px"] { min-width: 0 !important; }
  [style*="repeat(7,1fr)"][style*="min-width:760px"] > div:first-child {
    top: 22px !important; bottom: 22px; left: 7px !important; right: auto !important; width: 1px; height: auto !important; }
  [style*="repeat(7,1fr)"][style*="min-width:760px"] > div:not(:first-child) {
    flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 16px;
    padding: 0 !important; min-height: 44px; border-bottom: 1px solid var(--border, #dde2e8); }
  [style*="repeat(7,1fr)"][style*="min-width:760px"] > div:not(:first-child) > span:last-child {
    margin-top: 0 !important; font-size: 14px !important; }

  /* the team: a directory, a small square headshot beside the name and title */
  [data-grid3]:has(> div > img[src*="headshots/"]) { gap: 0 !important; border-bottom: 1px solid var(--border, #dde2e8); }
  [data-grid3] > div:has(> img[src*="headshots/"]) {
    display: grid !important; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-content: start;
    padding: 20px 0; border-top: 1px solid var(--border, #dde2e8); }
  [data-grid3] > div:has(> img[src*="headshots/"]):first-child { border-top: 1px solid var(--ink, #111); }
  [data-grid3] > div > img[src*="headshots/"] { grid-row: 1 / span 2; width: 76px !important; align-self: start; }
  [data-grid3] > div:has(> img[src*="headshots/"]) > div:nth-of-type(1) { grid-column: 2; margin-top: 10px !important; align-self: end; }
  [data-grid3] > div:has(> img[src*="headshots/"]) > div:nth-of-type(2) { grid-column: 2; align-self: start;
    font-size: 11px !important; letter-spacing: 1.6px; text-transform: uppercase; margin-top: 6px !important; }
  [data-grid3] > div:has(> img[src*="headshots/"]) > p,
  [data-grid3] > div:has(> img[src*="headshots/"]) > p ~ * { grid-column: 1 / -1; }

  [data-grid3] > div:has(> img[src*="headshots/"]) > [data-more] { justify-self: start; }

  /* choice buttons: squared, not pills (the house rule) */
  [data-sec] button[style*="border-radius:999px"] { border-radius: 2px !important; }

  /* text on the 20px gutter: a hero padded inside an already padded section (lender
     survey sat 40px in) drops its own side padding, and the register and sign-in
     panels pad like every other card */
  [data-sec] > [data-hero-pad] { padding-left: 0 !important; padding-right: 0 !important; }
  [data-reg-portal] { padding: 24px 20px !important; }

  /* the hero sample card: the typed rows fit at phone width */
  [data-hero-card] [data-sizer-loop] { min-height: 0 !important; padding: 18px 16px !important; }
  [data-hero-card] [data-sizer-loop] [style*="justify-content:space-between"] { font-size: 12.5px !important; gap: 10px !important; }
  [data-hero-card] [data-sizer-loop] [style*="font-size:34px"] { font-size: 28px !important; }
}
@media (min-width: 641px) { [data-matrix-cards], [data-fold-toggle], [data-more], [data-collapse-toggle], [data-limit-toggle] { display: none !important; } }

/* Dark mode (owner 2026-10-15): a clear white hairline between sections, so the navy
   panels read as separate sections instead of running together. Light mode unchanged. */
[data-theme="dark"] [data-sec] { border-top: 1px solid oklch(1 0 0 / 0.34) !important; }
[data-theme="dark"] [data-sec][data-footer] { border-top-color: oklch(1 0 0 / 0.4) !important; }
[data-theme="dark"] [data-rail] { border-bottom: 1px solid oklch(1 0 0 / 0.18); }

/* Review 2026-10-18: hero sample cards render their finished state, not a typing loop that
   leaves labels with no values (these mirror each page's own reduced-motion rule). */
[data-sizer-loop] .sz-in { display: none !important; }
[data-sizer-loop] .sz-out, [data-sizer-loop] .sz-out * { opacity: 1 !important; animation: none !important; }
[data-ladder] *, [data-lsa] * { animation: none !important; opacity: 1 !important; transform: none !important; }
[data-close-loop] * { animation: none !important; }
[data-close-loop] .cl-s { opacity: 1 !important; }
[data-close-loop] .cl-d { background: oklch(0.56 0.14 255) !important; }
[data-close-loop] .cl-p { opacity: 0 !important; }
[data-close-loop] .cl-b { opacity: 1 !important; }

/* Review 2026-10-18: one set of design rules on every page.
   - no decorative accent bar above headings on desktop (the phone keeps it as the section number)
   - no card shadows; square chips; one top rule on feature cards (2px ink, like the tables)
   - no moving or graph-paper textures behind the footer
   - figures in tables line up */
@media (min-width: 641px) {
  [data-sec] :empty:is([style*="width:40px"],[style*="width: 40px"]):is([style*="height:2px"],[style*="height: 2px"]) { display: none !important; }
}
[data-hero-card], [data-card], [data-sec] [style*="box-shadow:0 20px 44px"], [data-sec] [style*="box-shadow:0 12px 28px"] { box-shadow: none !important; }
button[style*="border-radius:999px"], a[style*="border-radius:999px"], span[style*="border-radius:999px"] { border-radius: 2px !important; }
[style*="border-top:3px solid oklch(0.56 0.14 255)"] { border-top: 2px solid var(--ink, #111) !important; }
[data-drift], [data-sweep] { display: none !important; }
table, [data-matrix], [data-post-table] { font-variant-numeric: tabular-nums; }

/* Headshots display smaller (owner, 2026-10-18): one modest square everywhere */
img[src*="headshots/"][style*="width:100%"] { width: 168px !important; max-width: 100%; height: auto; }
[data-lead] { grid-template-columns: 200px 1fr !important; }
[data-lead] > img[src*="headshots/"] { width: 200px !important; }
@media (max-width: 640px) {
  img[src*="headshots/"][style*="width:100%"] { width: 120px !important; }
  [data-lead] { grid-template-columns: 1fr !important; }
  [data-lead] > img[src*="headshots/"] { width: 140px !important; }
}

/* Dark mode: a soft white glow lifts the boxes off the background (owner, 2026-10-19).
   [data-box] is set by corlan-nav.js on every bordered panel. */
html[data-theme="dark"] :is([data-card], [data-hero-card], [data-rail-card], [data-box]) {
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 36px -6px rgba(255,255,255,.26) !important;
}

/* Consistency pass (2026-10-19): one type rhythm, one box corner, one phone gutter.
   Values come from the site-wide audit; the majority value wins. */
h1 { letter-spacing: -0.03em !important; }
[data-sec] :is(h2[style*="font-size:40px"], h2[style*="font-size: 40px"]) { letter-spacing: -0.022em !important; line-height: 1.1 !important; }
[data-sec] :is(h2[style*="font-size:40px"], h2[style*="font-size: 40px"]) + p { font-size: 17px !important; line-height: 1.6 !important; margin-top: 14px !important; }
[data-card], [data-box], [data-hero-card] { border-radius: 2px !important; }
@media (min-width: 641px) {
  h1 { line-height: 1.05 !important; }
}
@media (max-width: 640px) {
  [data-sec]:not([data-footer]) { padding-left: 20px !important; padding-right: 20px !important; }
  [data-sec] h2 + p { line-height: 1.6 !important; }
}

/* Phone: no clause numbers over the headings (owner, 2026-10-21, "looks AI"); the heading stands alone.
   Same selectors as the clause-number rule above so this one wins. */
@media (max-width: 640px) {
  html body [data-sec]:has(h2) :empty:is([style*="width:40px"],[style*="width: 40px"]):is([style*="height:2px"],[style*="height: 2px"]),
  html body [data-sec] :empty:is([style*="width:40px"],[style*="width: 40px"]):is([style*="height:2px"],[style*="height: 2px"]) { display: none !important; }

  /* Phone: smaller boxes and visuals (owner, 2026-10-21). Sample cards and the interactive panels scale down;
     padded cards lose their desktop padding. */
  [data-hero-card] { zoom: .84; }
  corlan-quinn-tour, corlan-what-we-place, corlan-rails { zoom: .88; }
  :is([data-card], [data-box]):is([style*="padding:36px"], [style*="padding: 36px"], [style*="padding:34px"], [style*="padding: 34px"], [style*="padding:40px"], [style*="padding: 40px"]) {
    padding: 22px 20px !important; }
}

/* Header and content share one column edge (owner, 2026-10-23): the bar's contents sit on the
   same 1280px column as every section, so the logo lines up with the text and tables below it. */
@media (min-width: 1101px) {
  nav[data-rail],
  [data-sec]:not([style*="padding:0;"]):not([style*="padding:0 "]):not([style*="padding: 0"]) {
    padding-left: max(64px, calc((100% - 1280px) / 2)) !important; padding-right: max(64px, calc((100% - 1280px) / 2)) !important; }
}
@media (max-width: 640px) {
  /* rates tables: the pinned first column keeps the funding-source shading */
  table[data-swipe] tr[data-source-row] td:first-child, table[data-swipe] tr[data-source-head] td { background: var(--panel) !important; }
}
@media (max-width: 1100px) {
  /* a shaded, bordered box never loses its inside padding when grid items are flattened */
  body [data-sec] [style*="background:var(--panel)"][style*="border:1px solid var(--border)"]:not(table *) { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Shadows on every box, light and dark (owner, 2026-10-23; replaces "light mode stays flat" and the
   no-shadow-on-a-phone rule). Light: a soft grey drop. Dark: the white glow above. */
html:not([data-theme="dark"]) :is([data-card], [data-hero-card], [data-rail-card], [data-box]) {
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 14px 34px -14px rgba(16,24,40,.24) !important;
}
@media (max-width: 640px) {
  html:not([data-theme="dark"]) :is([data-card], [data-hero-card], [data-rail-card], [data-box]) {
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 24px -12px rgba(16,24,40,.22) !important;
  }
  html[data-theme="dark"] :is([data-card], [data-hero-card], [data-rail-card], [data-box]) {
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 8px 26px -6px rgba(255,255,255,.22) !important;
  }
}