/* Family Loan Agreement: Direction A, "Private Bank", with no italics anywhere.
   Warm paper, deep ink, one ledger green used only on the thing you press next (and the one green band on home).

   Type scale, one list for the whole site (px at 1440; the display sizes clamp down on phones):
     12  mono labels (Plex Mono 500, uppercase, tracked .08em)      .label, table heads (11)
     14  small print, footer                                         .small
     16  UI secondary, hints, table figures                          .field-hint, .pt
     18  body (17 on phones)                                         body
     21  lede                                                        .lede
     26  h3, card titles in the display face                         .h3
     34–48  h2                                                       .h2
     40–64  h1                                                       .h1
     48–88  the home headline                                        .display
   Faces: Instrument Serif (roman only) for display, Inter Tight for UI, Newsreader for the agreement and long
   figures, Plex Mono for labels. Spacing on an 8 px grid (4 inside controls). Hairlines: 1 px, one colour
   (--rule), with ink only under a table's heads. Tabular lining figures for every number. */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-400.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-400-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/inter-tight.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/inter-tight-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/newsreader.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/newsreader-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/plex-mono-500.woff2) format("woff2"); }

:root {
  --paper: #F4F0E8;
  --panel: #ECE6DA;
  --sheet: #FFFDF9;
  --ink: #16140F;
  --ink-2: #39352D;
  --muted: #625C51;
  --rule: #D8D0C1;
  --rule-2: #A89E8C;
  --accent: #24493D;
  --accent-hover: #183329;
  --mark: #EDE5D3;
  --error: #9B2C1F;

  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --book: "Newsreader", "Iowan Old Style", Georgia, serif;
  --ui: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --section: clamp(72px, 8.4vw, 120px); /* 120 between sections at 1440, 72 on phones */
  --ring: 0 0 0 4px rgba(36, 73, 61, .2);
  --paper-shadow: 0 0 0 1px rgba(60, 45, 20, .06), 0 1px 1px rgba(40, 30, 10, .05), 0 3px 6px -2px rgba(40, 30, 10, .07),
    0 14px 28px -12px rgba(40, 30, 10, .14), 0 40px 72px -36px rgba(40, 30, 10, .24);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none; }
em, i, cite, dfn, address { font-style: normal; }
img, svg { display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; box-shadow: 0 0 0 7px rgba(36, 73, 61, .12); }
/* headings and notes that take focus from the script (tabindex=-1) show no ring: they are not controls */
[tabindex="-1"]:focus { outline: none; box-shadow: none; }
h1, h2, h3, .figure-l { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, .pt, .rates, .summary, .card-result { font-variant-numeric: tabular-nums lining-nums; }
[hidden] { display: none !important; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 16px; top: -64px; z-index: 50; background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 2px; }
.skip:focus { top: 8px; }

/* ---------- Header and footer ---------- */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--ink);
  font: 500 19px/1 var(--book); letter-spacing: -.005em; }
.brand .mark { color: var(--accent); width: 28px; height: 28px; flex: none; }
.site-foot { border-top: 1px solid var(--rule); margin-top: var(--section); padding: 48px 0 40px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; }
.foot-main p { margin: 16px 0 0; max-width: 56ch; }
.foot-main .brand { font-size: 17px; }
.foot-main .brand .mark { width: 24px; height: 24px; }
.foot-help { display: grid; grid-template-columns: 1fr; align-content: start; justify-items: start; }
.foot-help a, .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.foot-help a:hover, .foot-legal a:hover { color: var(--ink); text-decoration: underline; }
.foot-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 24px; align-items: center; border-top: 1px solid var(--rule); padding-top: 16px; }
.foot-legal .copy { margin-left: auto; font: 500 12px/1 var(--mono); letter-spacing: .04em; }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 28px;
  border: 0; border-radius: 2px; background: var(--accent); color: #fff; text-decoration: none; cursor: pointer;
  font: 500 17px/1 var(--ui); letter-spacing: .005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(22, 20, 15, .16), 0 6px 14px -8px rgba(24, 51, 41, .5);
  transition: background-color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease); }
.btn:hover { background: var(--accent-hover); }
.btn > * { pointer-events: none; }
.btn:active { transform: translateY(1px); background: #10261E; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.btn-ink { background: var(--ink); }
.btn-ink:hover { background: #000; }
.btn .arrow { width: 18px; height: 1px; background: currentColor; position: relative; transition: width .25s var(--ease); }
.btn .arrow::after { content: ""; position: absolute; right: 0; top: 0; width: 8px; height: 8px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transform-origin: 100% 0; }
.btn:hover .arrow { width: 26px; }
.btn-quiet { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px;
  border: 1px solid var(--rule-2); border-radius: 2px; background: transparent; color: var(--ink); text-decoration: none;
  font: 500 17px/1 var(--ui); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.btn-quiet:hover { border-color: var(--ink); background: rgba(22, 20, 15, .03); }
.btn-quiet:active { transform: translateY(1px); background: rgba(22, 20, 15, .07); }
.link { display: inline-flex; align-items: center; min-height: 44px; font: 500 16px/1.2 var(--ui); color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .25em;
  text-decoration-thickness: 1px; text-decoration-color: var(--rule-2); text-align: left; }
.link:hover { text-decoration-color: var(--ink); }
.link.quiet { color: var(--muted); font-size: 15px; }

/* ---------- Type ---------- */
h1, h2, h3 { margin: 0; font-weight: 400; }
.display { font: 400 clamp(48px, 6.2vw, 88px)/.98 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.h1 { font: 400 clamp(40px, 4.4vw, 64px)/1.02 var(--display); letter-spacing: -.016em; text-wrap: balance; }
.h2 { font: 400 clamp(34px, 3.4vw, 48px)/1.05 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.h3 { font: 400 26px/1.15 var(--display); letter-spacing: -.005em; }
.lede { font: 400 clamp(18px, 1.5vw, 21px)/1.55 var(--ui); color: var(--ink-2); max-width: 36em; margin: 0; text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 32em; margin: 0; }
.label { font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- The agreement sheet (8.5 x 11, scales with its column) ---------- */
.sheet-wrap { container-type: inline-size; }
.sheet { position: relative; background: var(--sheet); color: #1A1814; aspect-ratio: 8.5 / 11; width: 100%;
  padding: max(28px, 11.76cqw) max(22px, 11.76cqw);
  border: 1px solid var(--rule); box-shadow: 0 1px 0 rgba(22, 20, 15, .04), 0 24px 48px -28px rgba(40, 30, 10, .22);
  font: 400 max(13px, 1.96cqw)/1.5 var(--book); font-optical-sizing: auto; font-variant-numeric: tabular-nums lining-nums; }
.sheet .ag-head { text-align: center; padding-bottom: 1.2em; margin-bottom: 1.4em; border-bottom: 1px solid #CFC7B8; }
.sheet .ag-kind { font: 500 .7em/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1em; }
.sheet .ag-title { font: 400 2.5em/1 var(--display); letter-spacing: -.01em; margin: 0 0 .35em; }
.sheet .ag-title-sm { font-size: 1.9em; text-align: left; }
.sheet .ag-sub { margin: 0; font-size: 1.05em; color: #3A362E; }
.sheet .ag-part { margin: 0 0 1em; position: relative; }
.sheet .ag-part h3 { font: 600 1em/1.4 var(--book); margin: 0 0 .2em; }
.sheet .ag-part p { margin: 0; text-wrap: pretty; }
.sheet .ag-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4em; margin-top: 2.6em; position: relative; }
.sheet .ag-witness { margin-top: 1.6em; }
.sheet .ag-witness h3 { grid-column: 1 / -1; font: 600 1em/1.4 var(--book); margin: 0 0 -1.6em; }
.sheet .ag-sig { display: grid; grid-template-columns: 1fr auto; column-gap: 1em; font-size: .86em; color: #3A362E; align-content: start; }
.sheet .ag-line { grid-column: 1 / -1; display: block; height: 2.4em; border-bottom: 1px solid #1A1814; margin-bottom: .45em; }
.sheet .ag-line-short { height: 1.8em; }
.sheet .ag-date { color: var(--muted); }
.sheet .blank { display: inline-block; min-width: 6em; padding: 0 .3em; border-bottom: 1px solid var(--muted); color: var(--muted); font-size: .88em; line-height: 1.3; }
.sheet .ag-notary p { margin: 1em 0 0; color: #3A362E; }
.sheet .ag-notary-space { margin-top: 1.6em; height: 24em; border: 1px dashed #BDB3A1; }
.sheet .ag-notary { position: relative; }
.sheet-n { position: absolute; bottom: max(14px, 4.5cqw); left: 0; right: 0; text-align: center;
  font: 500 max(10px, 1.3cqw)/1 var(--mono); letter-spacing: .1em; color: var(--muted); margin: 0; }

/* Payment table: right-aligned money, tabular figures, hairline rows, smaller cents. */
.pt { width: 100%; border-collapse: collapse; }
.pt caption { text-align: left; caption-side: top; padding: 0 0 .9em; }
.pt th { font: 500 11px/1.25 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  text-align: right; padding: 0 0 .7em .9em; vertical-align: bottom; border-bottom: 1px solid var(--ink); }
.pt td { text-align: right; padding: .62em 0 .62em .9em; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.pt th:first-child, .pt td:first-child { padding-left: 0; color: var(--muted); }
.pt th:nth-child(2), .pt td:nth-child(2) { text-align: left; padding-left: 1.4em; }
.pt .th-narrow { display: none; }
.pt .c { font-size: .8em; color: var(--muted); letter-spacing: .01em; }
.pt .pt-fold td { text-align: center; color: var(--muted); padding: .5em 0; font-size: .92em;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(22, 20, 15, .04) 6px 7px); }
.pt tfoot td { border-bottom: 0; border-top: 1px solid var(--ink); font-weight: 600; padding-top: .8em; }
.pt tfoot td .c { font-weight: 400; }
.sheet .pt { font-size: .9em; }
.sheet .pt caption { font: 400 1.6em/1.1 var(--display); color: #1A1814; padding-bottom: 1em; }
.sheet .pt th { font-size: max(9.5px, .62em); }
.ui-table .pt { font: 400 15px/1.3 var(--ui); }
.ui-table .pt caption { font: 400 21px/1.2 var(--display); color: var(--ink); padding-bottom: 16px; }

/* ---------- Home ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 72px; align-items: center;
  padding-top: clamp(40px, 5vw, 72px); padding-bottom: var(--section); }
.hero .display { margin-bottom: 32px; max-width: 9.5em; }
.hero .lede { margin-bottom: 40px; }
.hero-act .btn { margin-bottom: 16px; }

.stage { margin: 0; position: relative; display: grid; }
/* The sample sheet sits behind the card, top left, so only its head shows above the card (no text beside it): it is
   cut just under its head rule, at a height that scales with its width, and the card starts there. */
.stage-sheet { grid-area: 1 / 1; width: 62%; justify-self: start; aspect-ratio: 1 / .43; overflow: hidden; align-self: start; }
.stage-sheet .sheet { box-shadow: none; }
.stage-card { grid-area: 1 / 1; align-self: start; justify-self: end; width: 100%; margin-top: 0; position: relative; z-index: 1;
  background: var(--sheet); border-radius: 3px; padding: 28px 28px 8px; box-shadow: var(--paper-shadow); }
.hero-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end;
  margin: 0 0 24px; padding: 16px 0 20px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hero-ctl[hidden] { display: none !important; }
.ctl { margin: 0; padding: 0; border: 0; min-width: 0; }
.ctl-amount { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.ctl-l { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; padding: 0; float: none; }
.ctl-v { font: 500 15px/1 var(--ui); color: var(--ink); justify-self: end; }
.ctl-amount .range { grid-column: 1 / -1; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--ink), var(--ink)) 0 / var(--fill, 19%) 100% no-repeat, var(--rule); border-radius: 1px; }
.range::-moz-range-track { height: 2px; background: var(--rule); border-radius: 1px; }
.range::-moz-range-progress { height: 2px; background: var(--ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%;
  background: var(--sheet); border: 1px solid var(--ink); box-shadow: 0 1px 3px rgba(40, 30, 10, .25); transition: transform .15s var(--ease); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--sheet); border: 1px solid var(--ink); box-shadow: 0 1px 3px rgba(40, 30, 10, .25); }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range:focus-visible { outline: none; box-shadow: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); border-color: var(--accent); }
.range:focus-visible::-moz-range-thumb { box-shadow: var(--ring); border-color: var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--paper); padding: 2px; gap: 2px; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border-radius: 1px;
  font: 500 14px/1 var(--ui); color: var(--ink-2); white-space: nowrap; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.seg label:hover span { color: var(--ink); background: rgba(22, 20, 15, .05); }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ctl-years .seg label { min-height: 44px; display: flex; align-items: center; }
.tick { animation: tick .32s var(--ease); }
@keyframes tick { from { opacity: .55; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.stage-card .pt tbody tr:last-child td { border-bottom: 0; }
.stage-card .pt { font-size: 14px; }
.stage-card .pt caption { text-wrap: balance; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; }
.figure { margin: 0 0 24px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.figure-n { font: 300 64px/1 var(--book); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.figure-n .c { font-size: .5em; color: var(--muted); letter-spacing: 0; }
.figure-l { font-size: 16px; color: var(--muted); }
.stage figcaption { grid-column: 1; margin-top: 24px; font: 400 17px/1.5 var(--book); color: var(--ink-2); max-width: 34em; }

.band { border-top: 1px solid var(--rule); padding-top: var(--section); padding-bottom: var(--section); }
.band + .band { border-top: 1px solid var(--rule); }
.wrap.band { border-top: 0; position: relative; }
.wrap.band::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--rule); }
.band-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; }
.band-grid > .h2 { position: sticky; top: 32px; align-self: start; }
.covers { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.covers-list { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: c; }
.covers-list li { counter-increment: c; display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 16px 0;
  border-top: 1px solid var(--rule); font-size: 18px; line-height: 1.5; }
.covers-list li:last-child { border-bottom: 1px solid var(--rule); }
.covers-list li::before { content: counter(c, decimal-leading-zero); font: 500 12px/2.2 var(--mono); color: var(--muted); letter-spacing: .04em; }
.covers > :first-child { position: sticky; top: 32px; align-self: start; }
.covers .sheet { aspect-ratio: auto; }

#h-irs { max-width: 12em; margin-bottom: 48px; }
.tax-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.tax-items li { padding: 24px 32px 32px 0; }
.tax-items li + li { padding-left: 32px; border-left: 1px solid var(--rule); }
.tax-items h3 { font: 400 26px/1.15 var(--display); margin: 0 0 16px; }
.tax-items p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.tax-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; align-items: center;
  border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 16px; }
.tax-foot p { margin: 0; font-size: 15px; color: var(--muted); }
.tax-foot a { font-size: 15px; font-weight: 500; display: inline-flex; min-height: 44px; align-items: center; }

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  min-height: 72px; padding: 16px 0; font: 400 24px/1.25 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 13px; height: 13px; margin-right: 4px;
  background: linear-gradient(var(--ink), var(--ink)) center / 13px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 13px no-repeat;
  transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 48px 24px 0; color: var(--ink-2); font-size: 17px; max-width: 40em; }
.faq summary:focus-visible { outline-offset: 0; }

/* ---------- Forms (shared) ---------- */
fieldset { border: 0; margin: 0 0 40px; padding: 0; min-width: 0; }
legend, .field-label { display: block; font: 600 16px/1.3 var(--ui); padding: 0; margin: 0 0 12px; color: var(--ink); }
.opt { font-weight: 400; color: var(--muted); }
.field { margin: 0 0 32px; }
.field-hint { margin: -4px 0 12px; font-size: 15px; color: var(--muted); }
.field-error { margin: -4px 0 12px; font: 600 15px/1.4 var(--ui); color: var(--error); }
.field.has-error .input { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.input { font: 400 18px/1.2 var(--ui); color: var(--ink); background: var(--sheet); border: 1px solid var(--rule-2); border-radius: 2px;
  min-height: 52px; padding: 0 14px; width: 100%; max-width: 420px; font-variant-numeric: tabular-nums lining-nums; }
.input { transition: border-color .15s var(--ease), box-shadow .15s var(--ease); box-shadow: inset 0 1px 2px rgba(40, 30, 10, .06); }
.input:hover { border-color: var(--ink-2); }
.input:focus, .input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.field.has-error .input:focus { box-shadow: 0 0 0 4px rgba(155, 44, 31, .16); }
input[type="date"].input { max-width: 240px; -webkit-appearance: none; appearance: none; display: flex; align-items: center; }
input[type="date"].input::-webkit-date-and-time-value { text-align: left; }
.input-n, input[type="number"].input { width: 104px; }
.select { -webkit-appearance: none; appearance: none; padding-right: 44px; max-width: 320px;
  background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316140F' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center; }
.affix { position: relative; max-width: 260px; }
.affix > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; pointer-events: none; }
.affix .input { padding-left: 30px; }
.affix-r { max-width: 160px; }
.affix-r > span { left: auto; right: 14px; }
.affix-r .input { padding-left: 14px; padding-right: 34px; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cards-3 { grid-template-columns: 1fr; }
.cards-3 .card-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; }
.cards-3 .card-result .sub { margin-top: 0; }
.cards-1 { grid-template-columns: 1fr; }
.card { position: relative; display: block; cursor: pointer; }
.card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.card-body { display: grid; gap: 12px; align-content: start; height: 100%; padding: 20px 24px 24px; background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 2px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.card-top { display: flex; align-items: center; gap: 12px; font: 600 17px/1.25 var(--ui); }
.dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--rule-2); position: relative; background: #fff; }
.dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .2s var(--ease); }
.card-result { font: 400 19px/1.35 var(--book); color: var(--ink); padding-left: 30px; }
.card-result:empty { display: none; }
.card-result .c { font-size: .75em; color: var(--muted); }
.card-result .sub { display: block; font: 400 15px/1.4 var(--ui); color: var(--muted); margin-top: 4px; }
.cards-1 .card-result { font: 400 16px/1.45 var(--ui); color: var(--muted); }
.card:hover .card-body { border-color: var(--rule-2); }
.card input:checked + .card-body { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.card input:checked + .card-body .dot { border-color: var(--ink); }
.card input:checked + .card-body .dot::after { transform: scale(1); }
.card input:focus-visible + .card-body { outline: 3px solid var(--accent); outline-offset: 3px; }

.taps { display: flex; flex-wrap: wrap; gap: 8px; }
.tap { position: relative; }
.tap input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tap span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--rule-2);
  border-radius: 2px; font: 500 15px/1 var(--ui); transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); white-space: nowrap; cursor: pointer; }
.tap:hover span { border-color: var(--ink); }
.tap input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tap input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.other-years { margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.other-years .field-error { flex-basis: 100%; order: -1; margin: 0; }

.switches { display: grid; gap: 8px; }
.switch { display: inline-flex; align-items: center; gap: 16px; min-height: 48px; cursor: pointer; font: 500 17px/1.3 var(--ui); position: relative; }
.switch input { position: absolute; opacity: 0; width: 44px; height: 28px; margin: 0; cursor: pointer; }
.sw { flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--rule); border: 1px solid var(--rule-2); position: relative; transition: background-color .2s var(--ease); }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s var(--ease); }
.switch input:checked + .sw { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .sw::after { transform: translateX(18px); }
.switch input:focus-visible + .sw { outline: 3px solid var(--accent); outline-offset: 3px; }

.summary { margin: 8px 0 0; padding: 24px 0 0; border-top: 1px solid var(--rule); font: 400 clamp(19px, 1.5vw, 21px)/1.5 var(--book); text-wrap: pretty; }
.summary:empty { display: none; }
.step > .summary { margin-bottom: 40px; } /* the answer, then the next question */
.summary b { font-weight: 500; }
.note { margin: 0 0 16px; padding: 16px 20px; background: var(--sheet); border: 1px solid var(--rule-2); font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 40em; }
/* A rate over the chosen state's limit: the one note that asks for a change, so it carries the error colour on its edge. */
.note.note-warn { border-left: 3px solid var(--error); color: var(--ink); }
.notice { margin: 0 0 24px; padding: 12px 16px; background: var(--mark); color: var(--ink-2); font-size: 15px; line-height: 1.5; border-radius: 2px; }

/* ---------- The maker ---------- */
.q-layout { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 80px; padding-top: 40px; }
.steps { margin: 0 0 40px; }
.steps .label { margin: 0 0 12px; color: var(--ink); }
.steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 6px; }
.steps li { flex: 1 1 auto; }
.steps a { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 12px 12px 4px 0; border-top: 2px solid var(--rule);
  font: 400 13px/1.2 var(--ui); color: var(--muted); text-decoration: none; white-space: nowrap; }
.steps .sn { display: none; }
.steps a:hover { color: var(--ink); }
.steps a.done { color: var(--ink-2); border-top-color: var(--ink); }
.steps a[aria-current] { color: var(--ink); font-weight: 600; border-top-color: var(--accent); }
.q-back { margin: 0 0 8px; }
.q-back a { font: 500 15px/1 var(--ui); color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.q-back a:hover { color: var(--ink); }
.q-title:focus { outline: none; }
.q-hint { margin: 16px 0 40px; color: var(--ink-2); font-size: 18px; max-width: 34em; }
.q-hint:empty { display: none; }
.q-title:has(+ .q-hint:empty) { margin-bottom: 32px; } /* a step with no hint keeps the space under its question */
.party { border-top: 1px solid var(--rule); padding-top: 24px; }
.party legend { float: left; width: 100%; margin-bottom: 16px; font: 400 26px/1.15 var(--display); }
.party legend + * { clear: both; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pair .field { margin-bottom: 24px; }
.pair.second { border-top: 1px dashed var(--rule); padding-top: 24px; }
.pair .remove { grid-column: 1 / -1; margin: -8px 0 16px; color: var(--muted); font-size: 15px; }
.party .add { margin-top: -8px; }
.q-actions { display: flex; align-items: center; gap: 24px; margin-top: 40px; flex-wrap: wrap; }
.see { display: none; }
.start-over { margin: 48px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }

.live { position: sticky; top: 24px; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.q-main { min-width: 0; }
.live-table { background: var(--sheet); border: 1px solid var(--rule); padding: 24px 24px 8px; }
.live-table.is-empty { padding: 0; border-style: dashed; border-color: var(--rule-2); background: transparent; }
.live-empty { margin: 0; padding: 24px; color: var(--muted); font-size: 16px; }
.excerpt { background: var(--sheet); border: 1px solid var(--rule); padding: 24px 28px; font: 400 16px/1.55 var(--book); }
.excerpt .label { display: block; margin: 0 0 12px; font-weight: 500; }
.excerpt .ag-part, .excerpt .ag-sign { background: var(--mark); margin: 0 -12px 8px; padding: 12px; }
.excerpt .ag-part h3 { font: 600 16px/1.4 var(--book); margin: 0 0 4px; }
.excerpt .ag-part p { margin: 0; }
.excerpt .ag-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; font-size: 14px; }
.excerpt .ag-sig { display: grid; }
.excerpt .ag-line { display: block; height: 28px; border-bottom: 1px solid var(--ink); margin-bottom: 4px; }
.excerpt .ag-date { color: var(--muted); }
.excerpt .ag-witness h3 { grid-column: 1 / -1; font: 600 15px/1.4 var(--book); }
.excerpt .blank { color: var(--muted); border-bottom: 1px solid var(--muted); padding: 0 .3em; font-size: .9em; }

.flash { animation: flash .6s var(--ease); }
@keyframes flash { from { opacity: .4; } to { opacity: 1; } }

.drawer { position: fixed; inset: 0; z-index: 40; background: var(--paper); overflow-y: auto; padding: 0 0 40px; }
.drawer.open { animation: up .3s var(--ease); }
@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { position: sticky; top: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter); z-index: 1; }
.drawer-body { padding: 24px var(--gutter) 0; }
.drawer-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bar { display: none; }

/* ---------- The agreement page ---------- */
.ag-intro { padding: 56px 0 40px; display: grid; gap: 20px; max-width: 760px; }
.ag-intro .note, .ag-intro .notice, .rail .note { margin: 0; }
.todo { padding: 16px 20px; border: 1px solid var(--rule-2); background: var(--sheet); }
.todo .h3 { font-size: 22px; margin-bottom: 8px; }
.todo ul { margin: 0; padding: 0; list-style: none; }
.todo li { border-top: 1px solid var(--rule); }
.todo a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
.ag-layout { display: grid; grid-template-columns: minmax(0, 880px) minmax(300px, 1fr); gap: 48px; align-items: start; }
.pages { display: grid; gap: 32px; }
.rail { position: sticky; top: 32px; display: grid; gap: 40px; }
.actions { display: grid; gap: 12px; }
.actions .btn, .actions .btn-quiet { width: 100%; padding: 0 16px; }
.before h2 { font: 400 28px/1.1 var(--display); margin: 0 0 8px; }
.before ol { list-style: none; counter-reset: b; padding: 0; margin: 0; }
.before li { counter-increment: b; display: grid; grid-template-columns: 36px 1fr; padding: 16px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.before li::before { content: counter(b, decimal-leading-zero); font: 500 12px/2.1 var(--mono); color: var(--muted); }
.print-block { display: none; }

.pages [data-part] { cursor: pointer; border-radius: 2px; transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.part-link { position: absolute; top: -.2em; right: 0; z-index: 1; font: 500 11px/1 var(--ui); letter-spacing: .02em; color: var(--accent);
  background: var(--sheet); padding: 5px 8px; border: 1px solid var(--accent); border-radius: 2px; text-decoration: none;
  opacity: 0; transform: translateY(2px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.part-link::before { content: ""; position: absolute; inset: -12px -8px; }
.part-link:focus-visible { opacity: 1; transform: none; outline-offset: 2px; }
.pages [data-part]:has(.part-link:focus-visible) { box-shadow: 0 0 0 .5em var(--sheet), 0 0 0 calc(.5em + 3px) var(--accent); background: var(--sheet); }
.pages [data-part]:hover, .pages [data-part].tapped {
  box-shadow: 0 0 0 .5em var(--sheet), 0 0 0 calc(.5em + 1px) var(--rule-2); background: var(--sheet); outline: none; }
.pages [data-part]:hover .part-link, .pages [data-part].tapped .part-link { opacity: 1; transform: none; }
.pages .sheet-table { aspect-ratio: 8.5 / 11; }
/* Above phone widths the agreement's pages scale exactly with their width (no minimum type size), so each screen
   page holds what the PDF page holds. */
@media (min-width: 721px) {
  .pages .sheet { font-size: 1.96cqw; padding: 11.76cqw; }
  .pages .sheet .pt th { font-size: .62em; }
}
/* The same column widths on every page of the payment table (fixed layout). */
.sheet-table .pt { table-layout: fixed; }
.sheet-table .pt th:nth-child(1) { width: 7%; }
.sheet-table .pt th:nth-child(2) { width: 19%; }
.sheet-table .pt th:nth-child(3) { width: 18%; }
.sheet-table .pt th:nth-child(4) { width: 16%; }
.sheet-table .pt th:nth-child(5) { width: 19.5%; }
.sheet-table .pt th:nth-child(6) { width: 20.5%; }
.head-start .hs-short { display: none; }
.sheet .pt td { padding-top: .42em; padding-bottom: .42em; line-height: 1.35; }

/* Dialogs */
.dlg-box { border: 1px solid var(--rule-2); border-radius: 2px; padding: 0; background: var(--sheet); color: var(--ink);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-shadow: 0 40px 80px -30px rgba(20, 15, 5, .45); }
.dlg-box::backdrop { background: rgba(28, 24, 16, .45); }
.dlg-box[open] { animation: rise .3s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dlg { padding: 32px 32px 24px; display: grid; gap: 16px; }
.dlg h2 { font: 400 34px/1.05 var(--display); letter-spacing: -.01em; }
.dlg h2:focus { outline: none; }
.dlg p { margin: 0; color: var(--ink-2); font-size: 17px; }
.dlg .field { margin: 0; }
.dlg .input { max-width: none; }
.dlg .row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.dlg .small { max-width: none; border-top: 1px solid var(--rule); padding-top: 16px; }
.stale { opacity: .38; transition: opacity .2s var(--ease); }
.site-head .head-start { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--ui); color: var(--ink); }
.closing { text-align: left; }
.closing .lede { margin: 16px 0 32px; max-width: 34em; }
.calc-more { margin-top: 16px; }
.dlg .disclaimer { border-top: 1px solid var(--rule); padding-top: 16px; color: var(--ink-2); font-size: 17px; }
.dlg .done { font: 500 17px/1.5 var(--ui); color: var(--accent); }
.dlg .done:focus { outline: none; }
.ts:empty { display: none; }

/* ---------- Help, policy and 404 pages ---------- */
.doc-body { max-width: 760px; padding-top: clamp(48px, 7vw, 96px); }
.doc-body > .lede { margin: 24px 0 0; font-size: clamp(19px, 1.6vw, 22px); }
.doc-body section { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--rule); }
.doc-body section > .h2 { margin-bottom: 24px; }
.doc-body p { margin: 0 0 16px; color: var(--ink-2); max-width: 40em; text-wrap: pretty; }
.doc-body a:not(.btn):not(.btn-quiet) { color: var(--ink); }
.numbered { list-style: none; counter-reset: n; margin: 0; padding: 0; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 48px 1fr; padding: 16px 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
.numbered li:last-child { border-bottom: 1px solid var(--rule); }
.numbered li::before { content: counter(n, decimal-leading-zero); font: 500 12px/2.2 var(--mono); color: var(--muted); }
.items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.items li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.items li p { margin: 0; }
.items strong { color: var(--ink); font-weight: 600; }
.aside { font-size: 15px; color: var(--muted) !important; }
.rate-card { background: var(--sheet); border: 1px solid var(--rule); padding: 8px 24px; margin: 0 0 16px; max-width: 520px; }
.rates { width: 100%; border-collapse: collapse; font-size: 17px; }
.rates th, .rates td { padding: 16px 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; }
.rates thead th { font: 500 11px/1.25 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); padding: 8px 0 12px; }
.rates td, .rates thead th:last-child { text-align: right; }
.rates td { font: 300 30px/1 var(--book); }
.rates tr:last-child th, .rates tr:last-child td { border-bottom: 0; }
.page-cta { margin: 64px 0 0 !important; }
.related { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--rule); }
.related ul { list-style: none; margin: 16px 0 0; padding: 0; }
.related a { display: inline-flex; align-items: center; min-height: 44px; }
.prose .h1 { margin-bottom: 32px; }
.prose p { font-size: 18px; }
.nf-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px !important; }
.calc-form { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.calc .summary { margin-top: 8px; }
.calc-table { margin-top: 32px; background: var(--sheet); border: 1px solid var(--rule); padding: 24px 24px 8px; overflow-x: auto; }
.calc-table:empty { display: none; }
.calc .page-cta { margin-top: 32px !important; }

/* ---------- Design lift (2026-10-30): one grid, one band, a desk for the document, rails on wide pages ---------- */
/* Home: a 12-column grid. Hero 6/6, covers 5/7. */
.hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.hero-copy { grid-column: 1 / span 6; padding-right: 24px; }
.stage { grid-column: 7 / -1; }
.covers { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.covers > :first-child { grid-column: 1 / span 5; padding-right: 24px; }
.covers > .covers-sheet { grid-column: 7 / -1; }
.covers .sheet { box-shadow: var(--paper-shadow); border: 0; }
/* Questions: the heading over its list, never alone in a column. */
.qs .h2 { margin-bottom: 40px; }
.qs .faq summary { font-size: 26px; min-height: 80px; }
.qs .faq details p { max-width: 44em; }
.closing { padding-bottom: 0; }
/* Header: the start link is a small outlined button from tablet up. */
.site-head .head-start { text-decoration: none; }
@media (min-width: 721px) {
  .site-head .head-start { padding: 0 18px; border: 1px solid var(--ink); border-radius: 2px; transition: background-color .2s var(--ease), color .2s var(--ease); }
  .site-head .head-start:hover { background: var(--ink); color: var(--paper); }
}

/* The agreement on a desk: true-proportion sheets with a layered paper shadow. */
.desk { background: var(--panel); border-radius: 4px; padding: 40px; box-shadow: inset 0 1px 2px rgba(40, 30, 10, .06); min-width: 0; }
.desk .pages { gap: 40px; }
.desk .sheet { border: 0; box-shadow: var(--paper-shadow); }
.ag-bar { display: none; }
.rail .before li { font-size: 15px; }

/* The maker's progress header (phones) */
.steps-now, .progress { display: none; }

/* Help pages and the calculator: a ~680 px reading column and a sticky rail. */
.doc-grid { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 320px); justify-content: space-between; column-gap: 64px; }
.doc-grid .doc-body { max-width: 680px; }
.doc-rail { padding-top: clamp(48px, 7vw, 96px); }
.doc-rail > * { position: sticky; top: 32px; }
.doc-rail { display: grid; align-content: start; gap: 32px; }
.doc-rail > .toc { position: static; }
.doc-rail > .make-card { position: sticky; top: 32px; }
.toc { border-top: 1px solid var(--rule); padding-top: 16px; }
.toc .label { display: block; margin: 0 0 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: flex; align-items: center; min-height: 40px; padding: 4px 0; font-size: 15px; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.toc li { min-height: 44px; display: flex; align-items: center; }
.make-card { background: var(--sheet); border-radius: 3px; padding: 28px; box-shadow: var(--paper-shadow); display: grid; gap: 12px; }
.make-card p { margin: 0 0 8px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.make-card .btn { width: 100%; }
.doc-body > .lede, .calc-head .lede { text-wrap: pretty; }
.calc-answer .figure { margin: 0 0 8px; padding-top: 24px; border-top: 1px solid var(--rule); }
.calc-answer .figure + .summary { border-top: 0; padding-top: 8px; font-size: 19px; }
.calc-answer .summary { margin-top: 24px; }
.calc-answer .figure-n .c { font-size: .5em; color: var(--muted); }
.calc-answer .figure-n { font-size: 56px; }
.calc-answer .figure { display: grid; gap: 8px; }
.calc-head .lede { margin-top: 24px; }
.items + .aside { margin-top: 16px; }

/* The plain disclaimer (D83): readable size, body ink, wherever an agreement is made, checked or downloaded. */
.foot-main .foot-disclaimer { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.disclaimer-start { margin: 0 0 32px; font-size: 16px; }
.rail-disclaimer { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.na-links { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--rule); }
.na-links li { border-bottom: 1px solid var(--rule); }
.na-links a { display: flex; align-items: center; min-height: 48px; }
.na .na-disclaimer { font-size: 16px; color: var(--ink-2); }
.doc-body.na > .lede { margin-bottom: 32px; }

/* ---------- Home story (quality pass 2): why, then how, then what's in it; the cost is one quiet row ---------- */
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; margin-bottom: 56px; }
.sec-head .h2 { grid-column: 1 / span 6; }
.sec-head .lede { grid-column: 7 / -1; align-self: end; font-size: 19px; }
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 0; row-gap: 0;
  border-top: 1px solid var(--rule); }
.why-grid li { grid-column: span 2; padding: 32px 40px 40px 0; border-bottom: 1px solid var(--rule); }
.why-grid li:nth-child(4), .why-grid li:nth-child(5) { grid-column: span 3; border-bottom: 0; }
.why-grid h3 { font: 400 26px/1.15 var(--display); letter-spacing: -.005em; margin: 0 0 12px; }
.why-grid p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.why-grid a { color: var(--ink); }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: how; }
.how-steps > li { counter-increment: how; display: grid; grid-template-rows: auto auto 1fr; align-content: start; }
.how-steps > li > h3 { font: 400 26px/1.15 var(--display); margin: 28px 0 10px; display: flex; gap: 12px; align-items: baseline; }
.how-steps > li > h3::before { content: counter(how, decimal-leading-zero); font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.how-steps > li > p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.how-vis { position: relative; height: 320px; overflow: hidden; border-radius: 6px; background: var(--panel); padding: 28px 28px 0;
  box-shadow: inset 0 0 0 1px rgba(60, 45, 20, .06); }
.how-vis::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(rgba(236, 230, 218, 0), var(--panel)); pointer-events: none; }
.mini-q, .mini-table { background: var(--sheet); border-radius: 3px; box-shadow: var(--paper-shadow); padding: 20px 20px 16px; }
.how-vis .mini-step { margin: 0 0 10px; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.how-vis .mini-title { margin: 0 0 16px; color: var(--ink); font: 400 24px/1.1 var(--display); }
.how-vis .mini-card { display: flex; color: var(--ink); gap: 10px; align-items: flex-start; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 2px; font-size: 14px; line-height: 1.35; }
.mini-card b { display: block; font-weight: 600; }
.mini-card .num { display: block; font: 400 15px/1.4 var(--book); color: var(--ink-2); }
.mini-card.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mini-dot { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--rule-2); background: #fff; }
.mini-card.on .mini-dot { border-color: var(--ink); box-shadow: inset 0 0 0 3px #fff; background: var(--ink); }
.mini-table .pt { font: 400 13px/1.3 var(--ui); }
.mini-table .pt caption { font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; }
.mini-table .pt th { font-size: 9.5px; }
.mini-table .pt th:nth-child(4), .mini-table .pt td:nth-child(4) { display: none; }
.how-sheet { padding: 28px 40px 0; }
.how-sheet .sheet { aspect-ratio: auto; border: 0; box-shadow: var(--paper-shadow); }
.cost { padding-top: 0; padding-bottom: var(--section); }
.cost-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline;
  padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cost-row .h3 { grid-column: 1 / span 4; font-size: 26px; }
.mini-table .pt .th-wide, .stage-card .pt .th-wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stage-card .pt .th-narrow, .mini-table .pt .th-narrow { display: inline; }
.stage-card .pt th { white-space: nowrap; }
.doc-body section > .h2 + .items, .doc-body section > .h2 + .numbered { border-top: 0; }
.doc-body section > .h2 + .items li:first-child { padding-top: 0; }
.cost-row p { grid-column: 5 / -1; margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 44em; }
.cost + .band::before { display: none; }
.cost + .band { padding-top: 0; }
/* Tonal bands: "How it works" and the closing sit on the panel tone; the sections either side need no rule. */
.tone { background: var(--panel); padding: var(--section) 0; }
.tone .how-vis { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(60, 45, 20, .07); }
.tone .how-vis::after { background: linear-gradient(rgba(244, 240, 232, 0), var(--paper)); }
.tone + .band::before { display: none; }
.closing-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.closing-in > div { grid-column: 1 / span 7; }
.closing .cost-line { margin-top: 16px; }
.closing .h2 { font-size: clamp(40px, 4.4vw, 64px); max-width: 12em; }
.closing .lede { margin: 16px 0 32px; max-width: 34em; }
.closing .cost-note { grid-column: 9 / -1; margin: 0; padding-top: 20px; border-top: 1px solid var(--rule-2); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
body.home .site-foot { margin-top: 0; }
/* the sample agreement beside "What your agreement covers": the first parts, fading out */
.covers-sheet .sheet { max-height: 980px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
/* on-screen tables: headers in the UI face, one line, short where the column is narrow */
.ui-table .pt th { font: 600 11px/1.25 var(--ui); letter-spacing: .03em; }
.stage-card .pt th, .mini-table .pt th { white-space: nowrap; }
.stage-card .pt caption, .mini-table .pt caption { font: 600 11px/1.3 var(--ui); letter-spacing: .03em; }
.stage-card { padding: 32px 32px 12px; }
/* Why: the reasons beside the whole sample agreement (one agreement on the page, not two) */
.why-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.why-text { grid-column: 1 / span 5; position: sticky; top: 32px; }
.why-text .lede { margin: 20px 0 40px; font-size: 19px; }
.why-sheet { grid-column: 7 / -1; }
.why-sheet .sheet { aspect-ratio: auto; border: 0; box-shadow: var(--paper-shadow); }
.why-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.why-list li { padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.why-list h3 { font: 400 24px/1.15 var(--display); margin: 0 0 8px; }
.why-list p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.why-list a { color: var(--ink); }
/* step 03 shows the end of the agreement: the signature lines */
.how-sign { display: flex; flex-direction: column; justify-content: flex-start; }
.how-sign::after { top: 0; bottom: auto; background: linear-gradient(var(--paper), rgba(244, 240, 232, 0)) !important; }
.how-sign .sheet-wrap { flex: none; }
/* details */
.live-table .pt .th-wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.live-table .pt .th-narrow { display: inline; }
.card-result .main { text-wrap: balance; }
.sheet .pt .c { color: #4A453B; }
.stage-card { padding-top: 36px; }
.calc-answer .figure { padding-top: 24px; }
.mini-table .pt { font-size: 14px; }
/* Round 4 */
/* step 03: only the last part and the signatures, at a size you can read */
.how-sign .ag-head, .how-sign .ag-part:not([data-part="signing"]) { display: none; }
.how-sign .sheet { padding: 24px 24px 28px; font-size: 12.5px; }
.how-sign .sheet .ag-sign { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
.how-sign::after { display: none; }
/* step 02: date, payment and what's left, readable */
.mini-table .pt { font-size: 14px; }
.mini-table .pt th:nth-child(1), .mini-table .pt td:nth-child(1), .mini-table .pt th:nth-child(5), .mini-table .pt td:nth-child(5) { display: none; }
.mini-table .pt .pt-fold td:first-child { display: table-cell; }
.mini-table .pt th:nth-child(2), .mini-table .pt td:nth-child(2) { padding-left: 0; }
/* one caption style for on-screen tables: the display face */
.stage-card .pt caption, .mini-table .pt caption { font: 400 19px/1.2 var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); padding-bottom: 14px; }
/* the folded rows: a plain dashed row, not a hatch */
.pt .pt-fold td { background: none; border-bottom: 1px dashed var(--rule-2); }
/* choice cards: one per row, so the result reads on one line */
.cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.card-body { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 16px; }
.card-top { display: contents; }
.card-result { grid-column: 2; padding-left: 0; }
/* the closing, centred */
.closing-in { display: block; text-align: center; }
.closing-in > div { max-width: 640px; margin: 0 auto; }
.closing .h2, .closing .lede { margin-left: auto; margin-right: auto; }
.closing .cost-line { margin-left: auto; margin-right: auto; }
/* the question steps and the agreement: a slim footer (the guides stay in the full footer elsewhere) */
body.app .foot-help { display: none; }
body.app .site-foot { margin-top: 64px; padding-top: 32px; }
/* the action green, a touch richer: a soft top light on the one colour */
.btn { background: linear-gradient(180deg, #2B5547, var(--accent) 60%); }
.btn:hover { background: linear-gradient(180deg, #23493C, var(--accent-hover) 60%); }
.btn-ink { background: var(--ink); }
.btn-ink:hover { background: #000; }
.btn:active { background: #10261E; }

/* Entry motion */
/* a short settle on load that never hides anything: content is readable at first paint (no opacity) */
@keyframes settle { from { transform: translateY(6px); } to { transform: none; } }
.hero-copy > *, .stage { animation: settle .5s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .04s; } .hero-copy > :nth-child(3) { animation-delay: .08s; } .stage { animation-delay: .1s; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero, .covers, .band-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .band-grid > .h2, .covers-sheet { position: static; }
  .covers-sheet { max-width: 680px; }
  .covers > :first-child { position: static; }
  .stage { max-width: 680px; }
  .q-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  /* the agreement's pages need their full width to show the PDF's pages at a readable size: the side column goes below */
  .ag-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rail { position: static; max-width: 600px; }
  .pages { max-width: 784px; }
  .actions .btn { font-size: 16px; }
  .site-foot .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .q-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .q-layout > .q-main { max-width: 640px; }
  .live { display: none; }
  .see { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 24px; }
  .q-agree { display: none; }
  .ag-layout { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; max-width: 600px; }
  .pages { max-width: 784px; }
}
@media (max-width: 720px) {
  /* phones: the answer (the summary) right under the question, above the choices, so the Next bar never hides it */
  .step:not([hidden]) { display: flex; flex-direction: column; }
  .step > .q-title, .step > .q-hint { order: -2; }
  .step > .summary { order: -1; margin: 0 0 24px; }
  body { font-size: 17px; }
  .site-head .wrap { min-height: 64px; }
  .hero { padding-top: 40px; gap: 40px; }
  .hero .display { margin-bottom: 24px; }
  .hero .lede { margin-bottom: 32px; }
  .hero-act .btn { width: 100%; }
  .stage-sheet { display: none; }
  .stage-card { width: 100%; margin-top: 0; padding: 20px 16px 4px; }
  .figure-n { font-size: 48px; }
  .stage figcaption { font-size: 16px; }
  .tax-items { grid-template-columns: 1fr; }
  .tax-items li, .tax-items li + li { padding: 24px 0; border-left: 0; }
  .tax-items li + li { border-top: 1px solid var(--rule); }
  #h-irs { margin-bottom: 32px; }
  .covers-list li { grid-template-columns: 40px 1fr; font-size: 17px; }
  .faq summary { font-size: 21px; }
  .faq details p { padding-right: 0; }
  .foot-legal .copy { margin-left: 0; flex-basis: 100%; padding-top: 8px; }

  .steps { margin-bottom: 24px; }
  .steps ol { display: flex; flex-wrap: wrap; gap: 0 16px; }
  .steps li { display: flex; align-items: center; flex: none; }
  .steps a { border-top: 0; padding: 0; min-height: 44px; justify-content: center; font-size: 14px; flex-direction: row; align-items: center; }
  .steps a[aria-current] .st { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
  .q-layout { padding-top: 24px; }
  .q-hint { margin-bottom: 32px; font-size: 17px; }
  .pair { grid-template-columns: 1fr; }
  .cards, .cards-3 { grid-template-columns: 1fr; gap: 8px; }
  .card-body { grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 12px; padding: 16px 16px; }
  .card-top { display: contents; }
  .card-result { grid-column: 2; padding-left: 0; font-size: 18px; }
  fieldset { margin-bottom: 32px; }
  .tap span { padding: 0 16px; }
  .summary { font-size: 20px; padding-top: 20px; }
  .q-actions { display: none; }
  .bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--rule); }
  .bar .btn { flex: 1; }
  body.has-bar { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  body.has-bar .site-foot { margin-top: 64px; }

  .ag-intro { padding: 32px 0 24px; }
  .pages { gap: 16px; margin: 0 -8px; }
  .sheet { padding: 28px 20px 40px; }
  .sheet .ag-sign { grid-template-columns: 1fr; gap: 1.6em; }
  .sheet-table { padding-left: 12px !important; padding-right: 12px !important; }
  /* phones: one-line headers ("Pays down"), larger figures */
  .pt .th-wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pt .th-narrow { display: inline; }
  .pt th { white-space: nowrap; }
  .sheet .pt { font-size: 12px; }
  .sheet-table .pt th:nth-child(2) { width: 22.5%; }
  .sheet-table .pt th:nth-child(3) { width: 19%; }
  .sheet-table .pt th:nth-child(4) { width: 17%; }
  .sheet-table .pt th:nth-child(5) { width: 20%; }
  .sheet-table .pt th:nth-child(6) { width: 21.5%; }
  .head-start .hs-long { display: none; }
  .head-start .hs-short { display: inline; }
  .sheet .pt caption { font-size: 22px; }
  .sheet .pt th { font-size: 10px; letter-spacing: .02em; padding-left: .45em; }
  .sheet .pt td { padding-left: .3em; }
  .pt th:first-child, .pt td:first-child { display: none; }
  .pt .pt-fold td:first-child { display: table-cell; }
  .sheet .pt th:nth-child(2), .sheet .pt td:nth-child(2), .ui-table .pt th:nth-child(2), .ui-table .pt td:nth-child(2) { padding-left: 0; }
  .ui-table .pt { font-size: 13px; }
  .ui-table .pt th { font-size: 10px; letter-spacing: .03em; padding-left: .55em; }
  .ui-table .pt td { padding-left: .55em; }
  .stage-card .pt th:nth-child(4), .stage-card .pt td:nth-child(4), .stage-card .pt th:nth-child(5), .stage-card .pt td:nth-child(5) { display: none; }
  .drawer .live-table { padding: 16px 12px 4px; }
  .drawer .ui-table .pt { font-size: 13px; }
  .drawer .ui-table .pt th { font-size: 10px; letter-spacing: .02em; padding-left: .45em; }
  .drawer .ui-table .pt td { padding-left: .45em; }
  .drawer .excerpt { padding: 20px 16px; }
  .part-link { top: -.4em; }
  .dlg { padding: 24px 20px 20px; }
  .dlg h2 { font-size: 30px; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-table { padding: 16px 0 4px; border-left: 0; border-right: 0; background: none; }
  .calc-table .pt { font-size: 12.5px; }
  .calc-table .pt th { font-size: 10px; letter-spacing: .02em; padding-left: .35em; }
  .calc-table .pt td { padding-left: .35em; }
  .rate-card { padding: 4px 16px; }
  .rates td { font-size: 26px; }
}
@media (max-width: 380px) { .tap span { padding: 0 13px; } }

@media (min-width: 1101px) {
  /* the calculator: the answer rides beside the form and the table */
  .calc-grid-page { max-width: none; display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 360px); justify-content: space-between;
    column-gap: 64px; grid-template-areas: "head ." "form answer" "rest answer"; }
  .calc-head { grid-area: head; }
  .calc-grid-page > .calc-form { grid-area: form; }
  .calc-answer { grid-area: answer; align-self: start; position: sticky; top: 32px; margin-top: 48px; background: var(--sheet);
    border-radius: 3px; padding: 32px; box-shadow: var(--paper-shadow); }
  .calc-answer .figure { padding-top: 0; }
  .calc-answer .figure { border-top: 0; }
  .calc-answer .summary { font-size: 18px; }
  .calc-answer .page-cta { margin-top: 24px !important; }
  .calc-answer .btn { width: 100%; padding: 0 16px; font-size: 16px; }
  .calc-rest { grid-area: rest; }
  .doc-grid .page-cta { display: none; }
}
@media (max-width: 1100px) {
  .hero-copy, .stage, .covers > :first-child, .covers > .covers-sheet { grid-column: 1 / -1; padding-right: 0; }
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-rail { display: none; }
  .desk { padding: 40px; }
}
@media (max-width: 900px) {
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 640px; }
}
@media (max-width: 720px) {
  .stage-card { margin-top: 0; width: 100%; padding: 20px 16px 4px; box-shadow: 0 0 0 1px rgba(60, 45, 20, .07), 0 12px 32px -16px rgba(40, 30, 10, .25); }
  .stage figcaption { padding-left: 0; }
  .figure-n { font-size: 52px; }
  .hero-ctl { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 0 16px; }
  .ctl-years .seg { display: flex; }
  .ctl-years .seg label { flex: 1; }
  .ctl-years .seg span { width: 100%; padding: 0 6px; }
  .qs .faq summary { font-size: 21px; min-height: 72px; }
  .qs .h2 { margin-bottom: 24px; }
  /* the maker: "Step 3 of 7 · Payments" and a thin bar; the list of steps opens behind it */
  .steps { position: relative; margin-bottom: 16px; }
  .steps > #step-count { display: none; }
  .steps-now { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 44px; padding: 0;
    background: none; border: 0; color: var(--ink); cursor: pointer; text-align: left; }
  .steps-now .label { color: var(--ink); }
  .chev { width: 8px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translateY(-3px);
    transition: transform .2s var(--ease); margin-right: 4px; }
  .steps.open .chev { transform: rotate(-135deg) translateY(-1px); }
  .progress { display: block; height: 2px; background: var(--rule); border-radius: 1px; overflow: hidden; }
  .progress span { display: block; height: 100%; background: var(--accent); transition: width .3s var(--ease); }
  .steps ol { display: none; }
  .steps.open ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .steps.open li { border-top: 1px solid var(--rule); }
  .steps.open .sn { display: inline; color: var(--muted); font: 500 12px/1 var(--mono); width: 20px; }
  .steps.open a { justify-content: flex-start; gap: 0; }
  .q-back { margin: 8px 0 0; }
  .card-body { padding: 20px 18px; }
  .card-top { font-size: 17px; }
  .card-result { font-size: 19px; }
  /* the Next bar carries the chosen plan's figure */
  .bar { flex-direction: column; gap: 8px; box-shadow: 0 -8px 24px -16px rgba(40, 30, 10, .3); }
  .bar-sum { margin: 0; font: 400 17px/1.3 var(--book); color: var(--ink); text-align: center; }
  .bar-sum .c { font-size: .8em; color: var(--muted); }
  body.has-bar { padding-bottom: max(calc(88px + env(safe-area-inset-bottom)), var(--bar-h, 0px)); }
  /* the agreement: the desk runs edge to edge, the actions move to a sticky bar */
  .desk { margin: 0 calc(-1 * var(--gutter)); padding: 16px 8px; border-radius: 0; }
  .desk .pages { margin: 0; gap: 16px; }
  .ag-bar { display: flex; flex-direction: row; gap: 8px; }
  .ag-bar .btn-quiet { flex: none; padding: 0 16px; font-size: 16px; background: var(--paper); }
  .ag-bar .btn { flex: 1; padding: 0 12px; font-size: 16px; }
  .rail .actions { display: none; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  /* 1024: the hero keeps two columns, the sample card beside the headline */
  .hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; gap: 0 24px; align-items: start; }
  .hero-copy { grid-column: 1 / span 6; padding-top: 24px; }
  .ctl-years .seg { display: flex; }
  .ctl-years .seg label { flex: 1; }
  .ctl-years .seg span { width: 100%; padding: 0 6px; }
  .stage { grid-column: 7 / -1; max-width: none; }
  .hero .display { font-size: 60px; }
  .stage-card { padding: 32px 24px 8px; }
  .stage-card .pt th:nth-child(4), .stage-card .pt td:nth-child(4), .stage-card .pt th:nth-child(5), .stage-card .pt td:nth-child(5) { display: none; }
  .hero-ctl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 1100px) {
  .sec-head .h2, .sec-head .lede { grid-column: 1 / -1; }
  .why-text, .why-sheet { grid-column: 1 / -1; position: static; }
  .why-sheet { max-width: 680px; margin-top: 48px; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid li, .why-grid li:nth-child(4), .why-grid li:nth-child(5) { grid-column: span 1; border-bottom: 1px solid var(--rule); }
  .why-grid li:nth-child(5) { border-bottom: 0; grid-column: 1 / -1; }
  .how-steps { gap: 24px; }
  .cost-row .h3, .cost-row p { grid-column: 1 / -1; }
  .closing-in > div { grid-column: 1 / -1; }
  .closing .cost-note { grid-column: 1 / span 8; margin-top: 48px; }
  .cost-row { row-gap: 8px; }
}
@media (max-width: 720px) {
  .sec-head { margin-bottom: 32px; }
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why-grid li { padding: 24px 0 28px; }
  .why-grid li:nth-child(4) { border-bottom: 1px solid var(--rule); }
  .why-grid h3, .how-steps > li > h3 { font-size: 24px; }
  .how-vis { height: 260px; padding: 20px 16px 0; }
  .how-sheet { padding: 20px 20px 0; }
  .how-steps { gap: 48px; }
  .mini-table .pt th:nth-child(5), .mini-table .pt td:nth-child(5) { display: none; }
  .why-sheet .sheet { max-height: 720px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
  .closing-in > div, .closing .cost-note { grid-column: 1 / -1; }
  .closing .cost-note { margin-top: 40px; }
  .covers-sheet .sheet { max-height: 760px; }
  .stage-card { padding: 24px 18px 6px; }
  .sheet .pt tfoot td { padding-left: .45em; }
  .how-sign { height: auto; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .why-text { grid-column: 1 / span 6; position: sticky; }
  .why-sheet { grid-column: 7 / -1; margin-top: 0; max-width: none; }
}
@media (max-width: 960px) {
  .why-text { max-width: 640px; }
  .why-sheet { width: 100%; max-width: 680px; }
}
@media (max-width: 720px) {
  .taps:has(input[name="years"]), .taps:has(input[name="c-years"]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .taps:has(input[name="years"]) .tap span, .taps:has(input[name="c-years"]) .tap span { width: 100%; justify-content: center; padding: 0 8px; }
  .calc .page-cta .btn { width: 100%; padding: 0 16px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Print: printing is part of the paid file ---------- */
@media print {
  .site-head, .site-foot, .page-cta, .related, .bar { display: none !important; }
  body.has-bar { padding-bottom: 0 !important; }
  @page { size: letter; margin: 1in; }
  html, body { background: #fff !important; }
  body.app > * { display: none !important; }
  body.app > .print-block { display: block !important; font: 400 14pt/1.4 Georgia, serif; color: #000; margin: 0; }
  /* The view the paid PDF is made from (/agreement/?pdf=1, honoured only off the production host until the paid
     file is built): every sheet on its own US Letter page, nothing else. */
  @page pdf { size: letter; margin: 0; }
  body.app.pdf-view > .print-block { display: none !important; }
  body.app.pdf-view > main { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .pdf-view .ag-intro, .pdf-view .rail, .pdf-view .part-link, .pdf-view noscript { display: none !important; }
  .pdf-view .ag-layout, .pdf-view .pages { display: block !important; margin: 0 !important; max-width: none !important; }
  .pdf-view .sheet-wrap { page: pdf; width: 8.5in; break-after: page; }
  .pdf-view .sheet { width: 8.5in; height: 11in; aspect-ratio: auto; border: 0; box-shadow: none; overflow: hidden; }
}

/* The phone sheet with the whole agreement: the part this step fills is marked. */
.sheet.sheet-flow { aspect-ratio: auto; }
.sheet .here { background: var(--mark); box-shadow: 0 0 0 .6em var(--mark); border-radius: 1px; }
.own-rate { margin-top: 16px; }
.pages:empty { aspect-ratio: 8.5 / 11; } /* room for the first page before the script fills it (no layout shift) */

/* Terms: the warranty and liability paragraphs are set apart so a reader can't miss them (conspicuous, not capitals). */
.terms .conspicuous { font-weight: 600; color: var(--ink); border-left: 3px solid var(--rule-2); padding-left: 16px; }
/* Step 1: the line that says pressing Next means agreeing to the terms (body size, links that look like links). */
.agree-terms { margin: 32px 0 0; font-size: 16px; color: var(--ink-2); }
.agree-terms a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* When the side column drops below the pages (1100 px and under), the state-limit warning also shows above them, where
   it is read before the agreement; on wide screens the side column beside the pages carries it. */
@media (min-width: 1101px) { .ag-intro .usury-top { display: none; } }
.ag-intro .usury-top { margin-top: 16px; }