/* SouthCoast Processing: one stylesheet for the whole site.
   Phone first, then desktop at 900px. Switzer self-hosted. Motion lives in the page scripts;
   this file is the landed state of every page, so the site is complete without any script. */

@font-face {
  font-family: "Switzer";
  src: url("/fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/Switzer-VariableItalic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #0b0b0c;
  --muted: rgba(0, 0, 0, 0.62);
  --paper: #ffffff;
  --soft: #f5f5f7;
  --teal: #006394;
  --teal-ink: #004f77;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --gutter: 20px;
  --display: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 14px;
  --shadow-sheet:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 24px 48px -12px rgba(0, 0, 0, 0.22),
    0 60px 100px -30px rgba(0, 0, 0, 0.18);
  --shadow-lift: 0 18px 40px -10px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }
/* The top bar is sticky, so anything scrolled into view by the keyboard or an anchor lands below it, not under it. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h, 72px) + 12px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
html, body { overflow-x: clip; }
main, .foot { overflow-x: clip; }
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
p, li { text-wrap: pretty; }
.lede, .chapter-text, .big-line, .leader-power, .promise h3 { text-wrap: balance; }
h1, h2, h3 { margin: 0; }
h1, h2 { font-weight: 560; letter-spacing: -0.035em; line-height: 0.96; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: var(--gutter); top: -60px;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 200;
}
.skip:focus-visible { top: 12px; outline: 3px solid var(--teal); outline-offset: 2px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
/* On the black surfaces the teal ring would sit at 2.4:1 against the black; the ring is white there (WCAG 1.4.11). */
.tile-ink :focus-visible, .on-ink :focus-visible, .top.dark :focus-visible { outline-color: #fff; }

/* ---------- Top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.top { transition: background-color 0.3s ease; }
.top.dark { background: rgba(11, 11, 12, 0.88); }
.top.dark .top-links a { color: rgba(255, 255, 255, 0.74); }
.top.dark .top-links a:hover, .top.dark .top-links a[aria-current="page"] { color: #fff; }
.top.dark .top-links a.cta { color: #fff; border-color: #fff; }
.top.dark .top-links a.cta:hover { background: #fff; color: var(--ink); }
.top.dark .menu { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.brand { display: block; line-height: 0; }
.brand img { width: 168px; height: auto; }
.top-links { display: none; list-style: none; margin: 0; padding: 0; gap: 28px; align-items: center; }
.top-links a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--muted); }
.top-links a:hover { color: var(--ink); }
.top-links a[aria-current="page"] { color: var(--ink); }
.top-links a.cta { color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 9px 16px; }
.top-links a.cta:hover { background: var(--ink); color: #fff; }
.menu {
  font-weight: 500; font-size: 15px; color: var(--ink);
  background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px;
}
.menu-panel {
  position: fixed; left: 0; right: 0; top: var(--nav-h, 64px); z-index: 99;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 4px var(--gutter) 22px;
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.25);
}
.menu-panel[hidden] { display: none; }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel a {
  display: block; padding: 15px 0; text-decoration: none;
  font-size: 24px; font-weight: 560; letter-spacing: -0.025em; line-height: 1.1;
  border-bottom: 1px solid var(--line);
}
.menu-panel a[aria-current="page"] { color: var(--teal); }
.menu-panel li:last-child a { border-bottom: 0; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none;
  font-weight: 540; font-size: 16px; letter-spacing: -0.01em; line-height: 1;
  border: 1px solid var(--ink); cursor: pointer;
}
.btn:hover { background: #2a2a2d; border-color: #2a2a2d; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-teal { background: var(--teal); border-color: var(--teal); }
.btn-teal:hover { background: var(--teal-ink); border-color: var(--teal-ink); }
.btn[disabled] { opacity: 0.6; cursor: default; }
.on-ink .btn { background: #fff; color: var(--ink); border-color: #fff; }
.on-ink .btn:hover { background: #e6e6e9; border-color: #e6e6e9; }
.on-ink .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.on-ink .btn-ghost:hover { background: #fff; color: var(--ink); }
.more {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; border: 1px solid var(--ink);
  color: var(--ink); background: transparent; text-decoration: none;
  font-weight: 540; font-size: 16px; letter-spacing: -0.01em; line-height: 1;
}
.more::after { content: "\203A"; font-size: 1.25em; line-height: 0.8; }
.more:hover { background: var(--ink); color: #fff; }
.on-ink .more { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.on-ink .more:hover { background: #fff; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 28px; }

/* ---------- Page opener ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 36px var(--gutter) 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hero h1 { font-size: clamp(46px, 13.6vw, 62px); }
.lede { margin-top: 18px; max-width: 32ch; color: var(--muted); font-size: 17px; line-height: 1.42; }
.hero .actions { margin-top: 26px; }
.hero-stage {
  flex: 1 1 auto;
  position: relative;
  margin-top: 34px;
  min-height: 440px;
  perspective: 1400px;
  perspective-origin: 50% 20%;
}
.wordmark { width: 196px; height: auto; margin-bottom: 26px; }

/* Text-only opener (About, Pricing, legal) */
.hero-text { min-height: 0; padding-top: 56px; padding-bottom: 8px; }
.hero-text .lede { max-width: 38ch; }
.hero-split .section-copy { margin-top: 32px; }

/* ---------- The screen object: a sheet of real BREEZE ---------- */
.screen {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sheet);
  transform-style: preserve-3d;
  will-change: transform;
}
.screen img { width: 100%; height: auto; }
.screen-desktop { display: none; }
.screen-phone { display: block; }
.hero-stage .screen-phone {
  position: absolute; left: 7%; right: 7%; top: 0;
  transform: rotateX(9deg) rotateY(-7deg) rotateZ(1.5deg) translateY(14px);
  transform-origin: 50% 0;
}

/* ---------- Chapters: one pinned viewport each, scroll drives the sequence ---------- */
.chapter { position: relative; }
.pin {
  min-height: calc(100svh - var(--nav-h, 0px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 16px;
  padding: 24px var(--gutter) 32px;
}
.chapter-copy-col { display: contents; }
.chapter-head { order: 1; }
/* A headline that scrolls ahead of its pinned sequence (Home's BREEZE tile), so the pinned viewport holds only the list and the screen. */
.lead-head { padding: 56px var(--gutter) 0; }
.lead-head + .pin { min-height: 0; padding-top: 24px; padding-bottom: 28px; row-gap: 16px; }
.lead-head + .pin .features { margin-top: 0; gap: 10px; }
.lead-head + .pin .features span { line-height: 1.35; }
.lead-head + .pin .actions { margin-top: 18px; }
.stage { order: 2; align-self: center; }
.chapter-text { order: 3; max-width: 36ch; font-size: 16px; line-height: 1.4; }
.chapter h2 { font-size: clamp(34px, 10vw, 46px); max-width: 12ch; }
.stage {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 30%;
}
.stage .screen { width: 86%; margin-left: auto; display: grid; transform: rotateY(-6deg) rotateX(3deg); transform-origin: 100% 50%; }
.stage .screen .frame { grid-area: 1 / 1; }
.stage .screen .frame img { width: 100%; }
/* On a phone each chapter has to fit the screen while it is pinned, so the app's phone screen is shown at 4:5,
   cropped from the top, where the part that matters is. Desktop frames are the full capture. */
.stage .screen:not(.screen-crop) .frame { aspect-ratio: 1 / 1; overflow: hidden; }
.stage .screen:not(.screen-crop) .frame img { height: 100%; object-fit: cover; object-position: 50% 0; }
/* Square since 2026-10-08 (4:5 before): in Safari on an iPhone the page gets about 575px under the bar, and at 4:5 the
   GALE and SCP Mortgage AI chapters ran about 50px over, so they never pinned and their sequences played below the fold.
   Each chapter's window starts where its own content starts in the redesigned app's taller phone screens. */
#scp-mortgage-ai .stage .screen:not(.screen-crop) .frame img { object-position: 50% 100%; }
#loan-intelligence .stage .screen:not(.screen-crop) .frame img { object-position: 50% 100%; }
#sideline .stage .screen:not(.screen-crop) .frame img { object-position: 50% 100%; }

/* The five documents, in flight (shown only when the script runs them) */
.docs { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 10%; z-index: 3; width: 58%; pointer-events: none; display: none; }
.js .docs { display: block; }
.docs li {
  /* White paper, so the rows read against the app's silver screen (they vanished into it as gray on gray, found 2026-10-08) */
  border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.42), 0 2px 4px rgba(0, 0, 0, 0.14);
  will-change: transform, opacity;
}
.docs li img { display: block; width: 100%; height: auto; }
.docs li + li { margin-top: 10px; }

/* What lifts out of the screen */
.lift {
  position: absolute; z-index: 4;
  font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  color: var(--ink);
  text-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
  will-change: transform, opacity;
}
.lift-amount { left: 8%; bottom: 21%; font-size: clamp(36px, 11vw, 50px); max-width: 88%; white-space: nowrap; }
.lift-amount .per { font-size: 0.42em; font-weight: 500; color: var(--muted); margin-left: 0.08em; letter-spacing: -0.02em; }
/* On a phone the figure lifts out as a chip on the document chips' white paper, seated over the screen's own income
   row (the label and the figure), with the tabs above it and the button below it showing: solid, so it covers the
   screen's figure instead of doubling it. Desktop lifts the bare figure. */
@media (max-width: 899px) {
  .lift-amount {
    left: 7%; bottom: 25%;
    font-size: clamp(30px, 9vw, 40px);
    padding: 11px 16px 12px;
    background: #fff; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 8px;
    box-shadow: var(--shadow-lift); text-shadow: none;
  }
}
.lift-question, .lift-cite, .lift-badge {
  font-size: 17px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.3;
  max-width: 26ch; padding: 13px 16px; border-radius: 18px; text-shadow: none;
  box-shadow: var(--shadow-lift);
}
/* Anchored to the screen's bottom edge on a phone, so a five-line question never hangs below the screen onto the text. */
.lift-question { right: 2%; bottom: 9%; background: var(--teal); color: #fff; border-bottom-right-radius: 6px; }
.lift-incoming { right: auto; left: 2%; top: 4%; bottom: auto; background: #e9e9ec; color: var(--ink); border-radius: 18px; border-bottom-left-radius: 6px; }
.lift-cite { left: 8%; bottom: 16%; background: #fff; color: var(--teal); border: 1px solid rgba(0, 99, 148, 0.25); border-bottom-left-radius: 6px; }
.lift-badge { left: 8%; bottom: 16%; background: var(--ink); color: #fff; border-bottom-left-radius: 6px; }

/* ---------- Tiles: the Home page is a stack of these, each one section, one idea, one motion ---------- */
.tile { position: relative; padding: 72px var(--gutter) 64px; overflow: hidden; }
.tile-soft { background: var(--soft); }
.tile-ink { background: var(--ink); color: #fff; }
.tile-ink .muted, .on-ink .lede { color: rgba(255, 255, 255, 0.74); }
.tile-copy { max-width: 36ch; }
.tile h2 { font-size: clamp(36px, 10.5vw, 48px); max-width: 13ch; }
.tile .lede { margin-top: 16px; }
.tile .actions { margin-top: 22px; }
.tile-stage { position: relative; margin-top: 40px; perspective: 1400px; perspective-origin: 50% 30%; }
.tile-center { text-align: center; }
.tile-center .tile-copy, .tile-center .lede { margin-left: auto; margin-right: auto; }
.tile-center .tile-copy h2 { margin-left: auto; margin-right: auto; }
.tile-center .actions { justify-content: center; }


/* Home BREEZE tile: three features on one screen */
.features { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.features li { border-top: 1px solid var(--line); padding-top: 14px; }
.features b { display: block; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; line-height: 1.15; }
.features span { display: block; margin-top: 4px; color: var(--muted); font-size: 16px; line-height: 1.4; }
.features li { border-top-width: 2px; border-top-color: var(--line); transition: border-color 0.35s ease; }
.features li.on { border-top-color: var(--teal); }
.tile-stage .screen { display: grid; width: 100%; transform: rotateY(-6deg) rotateX(3deg); transform-origin: 100% 50%; }
.tile-stage .screen-phone, .tile-stage .screen-desktop { display: none; }
.tile-stage .screen-phone { display: grid; }
.tile-text { margin-top: 18px; display: grid; gap: 14px; max-width: 44ch; font-size: 17px; line-height: 1.5; }
.tile-stage .screen .frame { grid-area: 1 / 1; }

/* Plain copy sections */
.section { padding: 64px var(--gutter); }
.section h2 { font-size: clamp(32px, 9vw, 42px); max-width: 16ch; }
.section .lede { margin-top: 16px; }
.section-copy { margin-top: 22px; max-width: 60ch; display: grid; gap: 16px; font-size: 17px; line-height: 1.5; }
.section-copy p { max-width: 60ch; }
.section-copy .lede { margin-top: 0; }
/* A quiet inventory: one line per item, hairlines between, no markers, no cards. */
.plain-list { list-style: none; margin: 4px 0; padding: 0; border-top: 1px solid var(--line); max-width: 60ch; }
.plain-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.big-line { font-size: clamp(30px, 8.6vw, 40px); font-weight: 560; letter-spacing: -0.035em; line-height: 1.02; max-width: 18ch; text-wrap: balance; }
.quiet { color: var(--muted); }

/* A status list, drawn as type (the sideline story) */
.status { list-style: none; margin: 28px 0 0; padding: 0; max-width: 420px; }
.status li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.35; }
.status li::before { content: ""; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--teal); justify-self: center; }
.status li.open::before { background: transparent; border: 2px solid var(--line-strong); width: 8px; height: 8px; }
.status li b { font-weight: 560; }
.status li span { display: block; color: var(--muted); font-size: 15px; }
.bubble {
  display: inline-block; margin-top: 22px; padding: 13px 16px; max-width: 28ch;
  background: var(--soft); border-radius: 18px; border-bottom-left-radius: 6px;
  font-size: 17px; line-height: 1.35;
}
.bubble-out { background: var(--teal); color: #fff; border-radius: 18px; border-bottom-right-radius: 6px; border-bottom-left-radius: 18px; }

/* ---------- Leadership (About): each person steps out of their sheet; name, title and bio in one column beside them ----------
   The three portraits share one canvas (1040 x 1380) with the eyes and chins on the same lines, so one geometry fits all.
   The sheet begins at the eye line (--sheet-top of the portrait's height); the head rises above it into open space. */
.leader {
  position: relative; padding: 48px var(--gutter) 24px; border-top: 1px solid var(--line);
  --sheet-top: 30.7%; --sheet-r: 14px;
}
.leader:first-of-type { border-top: 0; }
.leader-name { font-size: clamp(40px, 8.2vw + 17px, 72px); letter-spacing: -0.045em; line-height: 0.92; }
.portrait-col { position: relative; max-width: 440px; }
/* The sheet is the portrait's box, gutter to gutter, so it sits on the page's grid. The person's canvas is wider
   (the sheet is its middle 73%) and overflows the sides, clipped to the sheet; the head alone rises above it. */
.portrait { position: relative; width: 100%; aspect-ratio: 759 / 1380; }
.sheet {
  position: absolute; left: 0; right: 0; top: var(--sheet-top); bottom: 0;
  border-radius: var(--sheet-r);
  background: linear-gradient(180deg, #e9ebef 0%, #d9dde2 100%);
  box-shadow: var(--shadow-sheet);
  transform-origin: 50% 100%;
}
/* The person is clipped by their own clip-path (the sheet's width, the sheet's bottom corners), never by a parent box,
   because iOS stops redrawing a moving picture inside a clipped container. The canvas is 137% of the sheet's width, so
   the sheet is its middle 73%: a 13.5% inset on each side. */
.subject { position: absolute; inset: 0; }
.subject img {
  position: absolute; left: -18.5%; top: 0; width: 137%; max-width: none; height: auto;
  clip-path: inset(0 13.5% 0 13.5% round 0 0 var(--sheet-r) var(--sheet-r));
}
/* The sheet's hairline edge is one ring drawn in two pieces that never overlap (the line is translucent, so a doubled
   stretch would read darker). The sides and bottom sit over the person, so the edge stays continuous where a shoulder
   meets it. The top edge and its corner arcs sit behind the person, on the subject's underlay, so the head rises past
   them into open space instead of wearing the line across the eyes (found 2026-10-11). */
.subject::before { content: ""; position: absolute; left: 0; right: 0; top: var(--sheet-top); bottom: 0; border: 1px solid var(--line); border-radius: var(--sheet-r); pointer-events: none; clip-path: inset(0 0 calc(100% - var(--sheet-r)) 0); }
.portrait::after { content: ""; position: absolute; left: 0; right: 0; top: var(--sheet-top); bottom: 0; border: 1px solid var(--line); border-radius: var(--sheet-r); pointer-events: none; clip-path: inset(var(--sheet-r) 0 0 0); }
/* The step-out: with the script running, the sheet starts low and faint and the person starts down inside it;
   when the section arrives (page-about.js adds "in") the sheet settles and the person rises out. Plain CSS
   transitions; the clip's bottom inset moves with the person so the bottom edge never leaves the sheet's bottom. */
.js .portrait.rise .sheet { opacity: 0; transform: translateY(34px) scale(0.97); transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .portrait.rise .subject img {
  transform: translateY(46%);
  clip-path: inset(0 13.5% 46% 13.5% round 0 0 var(--sheet-r) var(--sheet-r));
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, clip-path 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}
.js .portrait.rise.in .sheet { opacity: 1; transform: none; }
.js .portrait.rise.in .subject img { transform: none; clip-path: inset(0 13.5% 0 13.5% round 0 0 var(--sheet-r) var(--sheet-r)); }
.leader-copy { margin-top: 28px; }
.leader-title { margin-top: 12px; font-size: 20px; font-weight: 500; letter-spacing: -0.012em; color: var(--muted); }
/* The superpower runs the width of the copy column (no cap of its own; Scott, 2026-10-11: capped at 22ch it broke into
   three short lines beside an empty column). Balanced wrapping keeps its two lines even. */
.leader-power { margin-top: 22px; font-size: clamp(22px, 6vw, 26px); font-weight: 560; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.leader-power small { font-size: inherit; font-weight: 500; letter-spacing: inherit; color: var(--muted); }
.leader-bio { margin-top: 22px; display: grid; gap: 14px; max-width: 58ch; font-size: 17px; line-height: 1.5; }
.leader-bio a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.leader-bio a:hover { color: var(--ink); }

/* ---------- Pricing ---------- */
.fees { width: 100%; border-collapse: collapse; margin-top: 10px; }
.fees caption { text-align: left; color: var(--muted); font-size: 15px; padding: 0 0 14px; }
.fees th, .fees td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.fees thead th { font-size: 14px; font-weight: 540; color: var(--muted); padding-bottom: 10px; }
.fees tbody th { font-weight: 500; font-size: 17px; line-height: 1.3; padding-right: 16px; }
.fees td { text-align: right; font-weight: 600; font-size: 26px; letter-spacing: -0.03em; white-space: nowrap; width: 1%; }
.promises { display: grid; gap: 40px; margin-top: 8px; }
.promise h3 { font-size: clamp(26px, 7.4vw, 32px); font-weight: 560; letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; text-wrap: balance; }
.promise p { margin-top: 12px; max-width: 56ch; font-size: 17px; line-height: 1.5; }
.price-big { font-size: clamp(72px, 22vw, 120px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.9; }
.price-big small { display: block; margin-top: 14px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--muted); line-height: 1.35; max-width: 30ch; }

/* ---------- Partnership form ---------- */
.ask { padding: 48px var(--gutter) 64px; }
.ask h1 { font-size: clamp(40px, 11.5vw, 56px); }
.form-card {
  margin-top: 32px; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-sheet); padding: 24px 22px 26px;
}
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 22px; }
.steps span { height: 3px; border-radius: 3px; background: var(--line); }
.steps span.done, .steps span.active { background: var(--teal); }
.step { display: none; }
.step.active { display: block; }
.step-num { font-size: 14px; font-weight: 540; color: var(--muted); }
.step h2 { margin-top: 8px; font-size: clamp(26px, 7.4vw, 32px); letter-spacing: -0.03em; line-height: 1.05; }
.field { margin-top: 20px; }
.field label { display: block; font-size: 15px; font-weight: 540; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink);
  padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%230b0b0c' stroke-width='1.6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.form-actions .btn { flex: 1 1 auto; }
.form-error { margin-top: 14px; color: #b3261e; font-size: 15px; }
.form-error[hidden] { display: none; }
.done-mark { width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 99, 148, 0.1); display: grid; place-items: center; color: var(--teal); margin-bottom: 18px; }
.done-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ask-aside { margin-top: 28px; display: grid; gap: 14px; max-width: 48ch; color: var(--muted); font-size: 16px; line-height: 1.5; }
.ask-aside b { color: var(--ink); font-weight: 560; }

/* ---------- Long-form pages (legal) ---------- */
.legal .hero-text { padding-top: 48px; }
.legal .hero-text h1 { font-size: clamp(36px, 9.5vw, 48px); letter-spacing: -0.03em; line-height: 1.02; }
.legal .hero-text .lede { margin-top: 10px; font-size: 17px; }
.prose { padding: 8px var(--gutter) 72px; max-width: calc(68ch + 2 * var(--gutter)); }
.prose h2 { font-size: clamp(26px, 7.4vw, 32px); font-weight: 560; letter-spacing: -0.03em; line-height: 1.08; margin: 44px 0 14px; }
.prose h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin: 28px 0 10px; }
.prose p, .prose li { font-size: 17px; line-height: 1.55; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 12px 0; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--teal); }
.prose a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ink); }
.prose a.long-url { word-break: break-all; }
.prose address { font-style: normal; line-height: 1.6; }
.prose .stamp-line { margin-top: 28px; color: var(--muted); }
.prose .notice { margin: 20px 0; padding: 22px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--soft); }
.prose .notice p { font-size: 16px; line-height: 1.6; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.summary {
  margin: 8px 0 28px; padding: 22px 22px 8px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px;
}
.summary h2 { margin: 0 0 12px; font-size: 24px; }
.summary ul { margin-bottom: 14px; }
.toc { margin: 0 0 24px; }
.toc details { border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; }
.toc summary { cursor: pointer; padding: 14px 0; font-weight: 560; font-size: 17px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--muted); }
.toc details[open] summary::after { content: "\2212"; }
.toc ul { list-style: none; padding: 0 0 12px; margin: 0; columns: 1; }
.toc li { padding: 7px 0; border-top: 1px solid var(--line); }
.toc a { text-decoration: none; color: var(--teal-ink); font-size: 16px; }
.toc a:hover { text-decoration: underline; }

/* ---------- Footer: the compliance lines, set quietly and completely. One column on a phone. ---------- */
.foot {
  margin-top: 0;
  border-top: 1px solid var(--line);
  padding: 28px var(--gutter) 36px;
  color: var(--muted); font-size: 15px; line-height: 1.45;
}
.foot-note { margin-bottom: 26px; max-width: 48ch; font-size: 14px; }
/* The client door: one line at the head of the footer, right after the "Bring us a loan." tile, apart from the disclosures. */
.foot-login { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.foot-login p { margin: 0; color: var(--ink); font-weight: 500; font-size: 16px; }
.foot a.foot-login-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ink);
  color: var(--ink); font-weight: 500; font-size: 15px; line-height: 1.2; text-decoration: none;
}
.foot a.foot-login-btn:hover { background: var(--ink); color: #fff; }
.foot h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.35; color: var(--ink); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.foot-col p { margin: 0; }
.foot-follow { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.foot-follow a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.foot-follow a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.foot-follow svg { width: 15px; height: 15px; fill: currentColor; }
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.foot a:hover { color: var(--ink); }
/* The phone number dials on a tap but reads as plain text: no underline, no color change, in any state. */
.foot a.foot-tel, .foot a.foot-tel:hover, .foot a.foot-tel:active, .foot a.foot-tel:visited { color: inherit; text-decoration: none; }
.foot-legal {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
  display: grid; gap: 8px;
}
.foot-nmls { color: var(--ink); font-weight: 600; }
.foot-links { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; }

/* ---------- Cookie consent (markup and ids are shared with cookie-consent.js; do not rename) ---------- */
.cookie-card {
  position: fixed; bottom: 16px; right: 16px; left: 16px; z-index: 10000;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.06);
  padding: 20px 20px 18px;
  transform: translateY(16px); opacity: 0; visibility: hidden;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}
.cookie-card.visible { transform: translateY(0); opacity: 1; visibility: visible; }
.cookie-card-text { font-size: 15px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.cookie-card-text a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 2px; }
.cookie-card-buttons { display: flex; gap: 10px; }
.cookie-btn {
  flex: 1; padding: 11px 14px; border-radius: 999px; cursor: pointer; text-align: center;
  font-size: 15px; font-weight: 540; letter-spacing: -0.01em; white-space: nowrap;
}
.cookie-btn-manage { color: var(--ink); background: transparent; border: 1px solid var(--line-strong); }
.cookie-btn-manage:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.cookie-btn-accept { color: #fff; background: var(--ink); border: 1px solid var(--ink); }
.cookie-btn-accept:hover { background: #2a2a2d; border-color: #2a2a2d; }
.cookie-prefs { display: none; margin-bottom: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cookie-prefs.open { display: block; }
.cookie-pref-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; }
.cookie-pref-label { display: flex; flex-direction: column; gap: 1px; }
.cookie-pref-name { font-size: 15px; font-weight: 540; color: var(--ink); }
.cookie-pref-note { font-size: 13px; color: var(--muted); }
.cookie-toggle { position: relative; display: inline-block; width: 40px; height: 24px; flex-shrink: 0; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; }
.cookie-slider { position: absolute; cursor: pointer; inset: 0; background: rgba(0, 0, 0, 0.18); transition: 0.25s; border-radius: 24px; }
.cookie-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; transition: 0.25s; border-radius: 50%; }
.cookie-toggle input:checked + .cookie-slider { background: var(--teal); }
.cookie-toggle input:focus-visible + .cookie-slider { outline: 3px solid var(--teal); outline-offset: 2px; }
.cookie-toggle input:checked + .cookie-slider:before { transform: translateX(16px); }
.cookie-toggle.always-on .cookie-slider { background: var(--teal); opacity: 0.5; cursor: default; }
.cookie-toggle.always-on .cookie-slider:before { transform: translateX(16px); }
.cookie-prefs .cookie-btn-accept { width: 100%; margin: 12px 0 10px; }

/* ---------- Page-specific pieces ---------- */
.home-open { padding-top: 56px; padding-bottom: 48px; min-height: calc(100svh - var(--nav-h, 64px)); }
.stage-wide { position: relative; margin: 40px auto 0; width: min(100%, 1100px); perspective: 1800px; perspective-origin: 50% 0; }
.stage-wide .screen { display: none; transform: rotateX(8deg); transform-origin: 50% 0; }
.stage-wide .screen-phone { display: block; width: 86%; margin: 0 auto; }
.home-open h1 { font-size: clamp(42px, 12vw, 58px); max-width: 13ch; margin: 0 auto; }
.home-open .lede { max-width: 36ch; }
/* A tablet held upright (700 to 899 wide) gets the headline on two lines and a wider lede, instead of the
   phone column sitting narrow in the middle of the screen (2026-10-09). */
@media (min-width: 700px) and (max-width: 899px) {
  .home-open .tile-copy { max-width: 100%; }
  .home-open h1 { max-width: none; font-size: clamp(50px, 7.6vw, 58px); }
  .home-open .lede { max-width: 56ch; font-size: 19px; margin-top: 20px; }
}
.screen-crop .frame { aspect-ratio: 4 / 3; overflow: hidden; }
.screen-crop .frame img { height: 100%; object-fit: cover; object-position: 50% 0; }
/* Phone captures of the redesigned app (2026-10-08): the loan header runs about 500px deep, so each window
   starts where the feature's own content starts: the qualifying income, the question and answer, the lender's file. */
.screen-crop .frame[data-frame="gale"] img { object-position: 50% 76%; }
.screen-crop .frame[data-frame="mai"] img { object-position: 50% 100%; }
.screen-crop .frame[data-frame="intel"] img { object-position: 50% 88%; }
.ask-aside a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.step .ask-aside { margin-top: 12px; max-width: none; }

/* ---------- Reveal: elements marked data-reveal rise in once when they enter the viewport ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal="2"] { transition-delay: 0.08s; }
.js [data-reveal="3"] { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .portrait.rise .sheet, .js .portrait.rise .subject img { opacity: 1; transform: none; }
  .js .portrait.rise .subject img { clip-path: inset(0 13.5% 0 13.5% round 0 0 var(--sheet-r) var(--sheet-r)); }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  :root { --gutter: 48px; }
  body { font-size: 18px; }
  .brand img { width: 214px; }
  .top { padding: 18px var(--gutter); }
  .top-links { display: flex; }
  .menu { display: none; }
  .menu-panel { display: none; }

  .hero {
    display: grid; grid-template-columns: minmax(0, 50%) minmax(0, 50%); align-items: center;
    column-gap: 24px;
    padding: 24px var(--gutter) 0; min-height: calc(100svh - 72px);
  }
  .wordmark { width: 250px; margin-bottom: 34px; }
  .hero h1 { font-size: clamp(64px, 7vw, 104px); letter-spacing: -0.045em; line-height: 0.92; max-width: 11ch; }
  .lede { margin-top: 26px; font-size: 21px; max-width: 32ch; }
  .hero .actions { margin-top: 34px; }
  .hero-stage { margin-top: 0; min-height: 560px; align-self: stretch; perspective: 2200px; perspective-origin: 20% 40%; }
  .screen-desktop { display: block; }
  .screen-phone { display: none; }
  .hero-stage .screen-desktop {
    position: absolute; left: 0; top: 14%; width: 124%;
    transform: rotateY(-16deg) rotateX(5deg) rotateZ(0.5deg);
    transform-origin: 0 50%;
    border-radius: 18px;
  }
  .hero-text { display: block; min-height: 0; padding-top: 96px; padding-bottom: 16px; }
  .hero-text h1 { max-width: 12ch; }
  .hero-text .lede { max-width: 46ch; }
  .hero-split { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); column-gap: 64px; align-items: start; padding-bottom: 40px; }
  .hero-split .section-copy { margin-top: 14px; }

  .pin {
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 40px;
    padding: 48px var(--gutter) 56px;
    align-items: center;
  }
  .chapter-copy-col { display: flex; flex-direction: column; justify-content: center; gap: 34px; order: 1; }
  .lead-head { padding: 88px var(--gutter) 0; }
  .lead-head + .pin { min-height: calc(100svh - var(--nav-h, 0px)); padding-top: 32px; }
  .chapter-head, .chapter-text { order: initial; }
  .stage { order: 2; perspective: 2400px; perspective-origin: 30% 40%; }
  .chapter h2 { font-size: clamp(48px, 4.2vw, 64px); letter-spacing: -0.045em; max-width: 18ch; }
  .chapter-text { font-size: 20px; max-width: 34ch; }
  .stage .screen { width: 100%; transform: rotateY(-9deg) rotateX(3deg); transform-origin: 100% 50%; border-radius: 18px; }
  .stage .screen:not(.screen-crop) .frame { aspect-ratio: auto; overflow: visible; }
  .stage .screen:not(.screen-crop) .frame img { height: auto; object-fit: fill; }

  .docs { width: 34%; top: 12%; left: -6%; }
  .docs li + li { margin-top: 14px; }

  .lift-amount { left: -10%; bottom: 22%; font-size: clamp(80px, 7.8vw, 116px); letter-spacing: -0.05em; }
  .lift-question, .lift-cite, .lift-badge { font-size: 21px; max-width: 28ch; padding: 18px 24px; border-radius: 24px; }
  .lift-question { right: 4%; top: 14%; bottom: auto; border-bottom-right-radius: 8px; }
  .lift-incoming { right: auto; left: -4%; top: 10%; border-radius: 24px; border-bottom-left-radius: 8px; }
  .lift-cite { left: -6%; bottom: 20%; border-bottom-left-radius: 8px; }
  .lift-badge { left: -6%; bottom: 22%; border-bottom-left-radius: 8px; }

  .tile { padding: 120px var(--gutter) 110px; }
  .tile h2 { font-size: clamp(52px, 4.8vw, 76px); letter-spacing: -0.045em; max-width: 14ch; }
  .tile-copy { max-width: 44ch; }
  /* The closing tile's headline is one long sentence; give it room for two lines instead of four. */
  .tile-ink.tile-center .tile-copy { max-width: 64ch; }
  .tile-ink.tile-center h2 { max-width: 20ch; }
  .tile .lede { font-size: 22px; max-width: 40ch; }
  .tile .actions { margin-top: 34px; }
  .tile-stage { margin-top: 56px; perspective: 2400px; }
  .tile-split { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 58%); column-gap: 48px; align-items: center; }
  .tile-split .tile-stage { margin-top: 0; }
  .tile-split .tile-copy { max-width: 44ch; }
  .tile-split h2 { font-size: clamp(44px, 3.9vw, 60px); max-width: 14ch; }
  .tile-split.tile-split-rev .tile-copy { order: 2; }
  .tile-split.tile-split-rev .tile-stage { order: 1; }


  .features { margin-top: 28px; gap: 14px; }
  .features b { font-size: 22px; }
  .features span { font-size: 17px; }
  .tile-stage .screen { transform: rotateY(-10deg) rotateX(3deg); border-radius: 18px; }
  .tile-stage .screen-phone { display: none; }
  .tile-stage .screen-desktop { display: grid; }
  .tile-text { font-size: 19px; gap: 16px; }

  .section { padding: 110px var(--gutter); }
  .section-grid { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%); column-gap: 48px; align-items: start; }
  .section h2 { font-size: clamp(44px, 4vw, 60px); letter-spacing: -0.045em; max-width: 16ch; }
  .section-copy { margin-top: 32px; font-size: 20px; gap: 20px; }
  .section-grid .section-copy { margin-top: 10px; }
  .big-line { font-size: clamp(44px, 4.4vw, 68px); max-width: 20ch; }
  .status { margin-top: 0; max-width: 460px; }
  .status li { font-size: 19px; }
  .status li span { font-size: 16px; }
  .bubble { font-size: 19px; }

  /* The portrait column is written once (--pw) so the copy can start on the sheet's top line: the name sits at eye level,
     the head above it in open space. 36vw - 35px is 36% of the content width between the two 48px gutters. */
  .leader {
    display: grid; grid-template-columns: var(--pw) minmax(0, 1fr); column-gap: 64px; align-items: start;
    padding: 56px var(--gutter) 80px; --sheet-r: 18px; --pw: min(36vw - 35px, 420px);
  }
  .leader-name { font-size: clamp(56px, 6vw, 92px); letter-spacing: -0.05em; line-height: 0.9; }
  .portrait-col { align-self: stretch; max-width: none; }
  .leader-copy { margin-top: 0; padding-top: calc(var(--pw) * 0.558 - 10px); }
  .leader-title { margin-top: 14px; font-size: 26px; }
  .leader-power { font-size: clamp(26px, 2.2vw, 32px); }
  /* The bio reads at the legal pages' measure and a notch larger, so the copy column fills the room beside the
     portrait instead of leaving the right quarter of a laptop screen empty (Scott, 2026-10-11). */
  .leader-bio { font-size: 21px; gap: 18px; max-width: 66ch; }

  .fees th, .fees td { padding: 20px 0; }
  .fees tbody th { font-size: 21px; }
  .fees td { font-size: 34px; }
  .promises { gap: 0; }
  .promise { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%); column-gap: 48px; align-items: start; padding: 44px 0; border-top: 1px solid var(--line-strong); }
  .promise:first-child { padding-top: 0; border-top: 0; }
  .promise:last-child { padding-bottom: 0; }
  .promise h3 { font-size: clamp(32px, 2.8vw, 40px); max-width: 14ch; }
  .promise p { font-size: 19px; margin-top: 6px; max-width: 52ch; }
  .price-big { font-size: clamp(120px, 11vw, 176px); }
  .price-big small { font-size: 19px; }

  .ask { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%); column-gap: 56px; align-items: start; padding: 96px var(--gutter) 120px; }
  .ask h1 { font-size: clamp(52px, 4.6vw, 72px); letter-spacing: -0.045em; max-width: 12ch; }
  .form-card { margin-top: 0; padding: 32px 32px 34px; border-radius: 22px; }
  .step h2 { font-size: clamp(30px, 2.6vw, 36px); }
  .form-actions .btn { flex: 0 0 auto; }
  .ask-aside { font-size: 18px; }

  .prose { padding: 16px var(--gutter) 120px; }
  .legal .hero-text, .legal .prose { max-width: calc(72ch + 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
  .legal .hero-text { padding-top: 72px; }
  .legal .hero-text h1 { font-size: clamp(44px, 4.2vw, 60px); max-width: none; }
  .legal .hero-text .lede { font-size: 19px; max-width: none; }
  .prose h2 { font-size: clamp(30px, 2.6vw, 38px); margin-top: 56px; }
  .prose p, .prose li { font-size: 18px; }
  .summary { padding: 28px 28px 12px; }
  .summary h2 { font-size: 28px; }
  .toc ul { columns: 2; column-gap: 28px; }
  .toc li { break-inside: avoid; }

  .foot { padding: 44px var(--gutter) 48px; font-size: 14px; }
  .foot h3 { font-size: 14px; margin-bottom: 6px; }
  .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
  .foot-follow { gap: 12px; }
  .foot-legal { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; }
  .foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 0 auto; }

  .cookie-card { left: auto; right: 24px; bottom: 24px; width: 380px; padding: 22px 24px 20px; }

  .home-open { padding-top: 56px; padding-bottom: 80px; min-height: calc(100svh - var(--nav-h, 72px)); }
  .stage-wide { margin-top: 56px; perspective: 2600px; }
  .stage-wide .screen-phone { display: none; }
  .stage-wide .screen-desktop { display: block; border-radius: 18px; }
  .home-open .tile-copy { max-width: 100%; }
  .home-open h1 { font-size: clamp(56px, 5.8vw, 84px); letter-spacing: -0.045em; line-height: 0.92; max-width: none; }
  .home-open .lede { font-size: 24px; max-width: 64ch; margin-top: 22px; }
  .screen-crop .frame { aspect-ratio: 16 / 10; }
  .screen-crop .frame img { object-position: 50% 0 !important; }
}

@media (min-width: 1300px) {
  .wrap { max-width: 1320px; margin-left: auto; margin-right: auto; }
}

/* About on a wide monitor: the hero and the three chapters keep the 1440 laptop layout (1344px of content between the
   gutters) and sit centered on anything wider, instead of hugging the left edge with the right half of the screen
   empty (Scott, 2026-10-11, on a 27-inch screen). Home's opener centers itself the same way. Only the gutters grow. */
@media (min-width: 1440px) {
  .hero-split, .leader {
    padding-left: max(var(--gutter), calc((100% - 1344px) / 2));
    padding-right: max(var(--gutter), calc((100% - 1344px) / 2));
  }
}

/* On a desktop tall enough to hold the whole portrait, it rides beside the bio instead of leaving the column empty. */
@media (min-width: 900px) and (min-height: 880px) {
  .portrait { position: sticky; top: calc(var(--nav-h, 72px) + 24px); }
}