/* US Funeral Expense: own front end (SPEC Design). Crimson Pro + Jost, ivory / evergreen / sage / brass. No framework. */
@font-face { font-family: "Crimson Pro"; src: url("/assets/fonts/crimsonpro-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/assets/fonts/crimsonpro-var-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/jost-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --paper: #FBF8F2; --white: #FFFFFF; --ink: #1E3B33; --ink-2: #2C5246; --text: #2A2F33; --muted: #5C6468;
  --sage: #E9EEE8; --sage-2: #D6E0D7; --brass: #8A6A2C; --brass-soft: #C9AE73; --line: #DCD5C8; --line-2: #EAE4D8;
  --danger: #9B2C2C; --danger-bg: #FBEDEA; --ok-bg: #EAF2EC;
  --serif: "Crimson Pro", "Iowan Old Style", Georgia, serif; --sans: "Jost", "Segoe UI", system-ui, sans-serif;
  --frame: 1200px; --gut: clamp(20px, 4vw, 48px); --r: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 1.125rem/1.62 var(--sans); }
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-2); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brass-soft); outline-offset: 2px; }
h1, h2, h3 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.frame { max-width: var(--frame); margin: 0 auto; padding-inline: var(--gut); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: 10px 16px; z-index: 10; }
.skip:focus { left: 12px; top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); font-weight: 400; }
.small { font-size: .95rem; color: var(--muted); }
.cite { display: block; font: 500 .82rem/1.4 var(--sans); letter-spacing: .02em; color: var(--brass); margin-top: .35em; }
.eyebrow { font: 500 .8rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem; }
.eyebrow a { color: var(--brass); }
.display { font: 500 clamp(2.6rem, 6.2vw, 4.9rem)/1.04 var(--serif); letter-spacing: -.012em; margin-bottom: .35em; }
.display-s { font: 500 clamp(2.2rem, 4.6vw, 3.5rem)/1.08 var(--serif); letter-spacing: -.01em; }
.section-h { font: 500 clamp(1.7rem, 3vw, 2.35rem)/1.15 var(--serif); }
.center { text-align: center; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.3rem); color: #3B4246; max-width: 44rem; }
.textlink { font-weight: 500; }

/* utility strip (letter-spaced, after MetLife) */
.util { background: var(--ink); color: #E8EEE9; font: 500 .74rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.util-row { display: flex; justify-content: space-between; gap: 16px; padding-block: 9px; }
.util p { margin: 0; }
.util-free { color: var(--brass-soft); white-space: nowrap; }
.pgrid-hint { display: none; }

/* masthead: wordmark | descriptor (after Vanguard) */
.mast { background: var(--white); border-bottom: 1px solid var(--line); }
.mast-row { display: flex; align-items: center; gap: 18px; min-height: 84px; flex-wrap: wrap; padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 38px; height: 38px; color: var(--ink); flex: none; }
.brand-word { font: 600 1.6rem/1 var(--serif); letter-spacing: -.005em; white-space: nowrap; }
.mast-rule { width: 1px; height: 30px; background: var(--line); }
.mast-desc { color: var(--muted); font-size: .98rem; }
.mast-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.mast-nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.mast-nav a { text-decoration: none; color: var(--text); font-weight: 500; font-size: 1rem; padding-block: 6px; border-bottom: 2px solid transparent; }
.mast-nav a:hover { color: var(--ink); border-bottom-color: var(--brass-soft); }
.mast-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.mast-nav .mast-folder { border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 16px; color: var(--ink); white-space: nowrap; }
.mast-nav .mast-folder:hover, .mast-nav .mast-folder.is-on { background: var(--ink); color: var(--white); border-bottom-color: var(--ink); }

/* preview note: brass hairlines, not a coloured banner */
.preview { background: var(--paper); border-bottom: 1px solid var(--line); }
.preview-row { display: flex; align-items: baseline; gap: 14px; padding-block: 11px; }
.preview p { margin: 0; font-size: .98rem; }
.preview-tag { flex: none; font: 600 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); border: 1px solid var(--brass-soft); padding: 5px 8px 4px; border-radius: 3px; }

/* buttons, chips */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 26px; border-radius: var(--r); font: 500 1.05rem/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid var(--ink); transition: background .15s, color .15s; }
.btn-solid { background: var(--ink); color: var(--white); }
.btn-solid:hover { background: var(--ink-2); color: var(--white); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--sage); color: var(--ink); }
.btn-quiet { background: transparent; border-color: var(--line); color: var(--text); min-height: 44px; padding: 8px 16px; font-size: .98rem; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--white); }
.chips { margin-top: 2.2rem; }
.chips-label { font-size: .95rem; color: var(--muted); margin-bottom: .6rem; }
.chips ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.chip { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); background: var(--white); border-radius: 999px; text-decoration: none; color: var(--text); font-size: .98rem; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* hero: centred serif (after MetLife) */
.hero { background: var(--white); border-bottom: 1px solid var(--line-2); }
.hero-in { text-align: center; padding-block: clamp(56px, 9vw, 112px) clamp(48px, 7vw, 88px); }
.hero .lede { margin-inline: auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 1.8rem; }
.hero .chips ul { justify-content: center; }

/* bands */
.band { padding-block: clamp(56px, 8vw, 104px); }
.band-sage { background: var(--sage); }
.band-paper { background: var(--paper); border-block: 1px solid var(--line-2); }
.given { display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.given-art { margin: 0; }
.given-art svg { width: 100%; height: auto; display: block; }
.art-disc { fill: var(--white); }
.art-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.art-stem { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.art-leaf path { fill: var(--ink-2); }
.art-leaf path:nth-child(even) { fill: #4F7465; }
.art-dot { fill: var(--brass-soft); }
.given-list { list-style: none; counter-reset: g; margin: 1.6rem 0 1.4rem; padding: 0; display: grid; gap: 1.4rem; }
.given-list li { counter-increment: g; position: relative; padding-left: 3.2rem; }
.given-list li::before { content: counter(g); position: absolute; left: 0; top: -.15em; font: italic 500 2.2rem/1 var(--serif); color: var(--brass); }
.given-list h3 { font: 600 1.3rem/1.2 var(--serif); margin-bottom: .25em; }
.given-list p { margin-bottom: .2em; }

.steps { padding-block: clamp(56px, 8vw, 104px); }
.steps-list { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.steps-list li { border-top: 1px solid var(--ink); padding-top: 1.2rem; }
.numeral { display: block; font: italic 400 2.6rem/1 var(--serif); color: var(--brass); margin-bottom: .6rem; }
.steps-list h3 { font: 600 1.4rem/1.2 var(--serif); }

.example-head { max-width: 46rem; margin-bottom: 1.8rem; }
.example-more { margin-top: 1.6rem; }

.quote-feature { padding-block: clamp(56px, 8vw, 96px); }
.pull { margin: 0 auto; max-width: 52rem; text-align: center; }
.pull blockquote { margin: 0; }
.pull blockquote p { font: italic 400 clamp(1.6rem, 3.2vw, 2.4rem)/1.3 var(--serif); color: var(--ink); }
.pull figcaption { color: var(--muted); font-size: 1rem; }

/* plans */
.plans { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: clamp(20px, 3vw, 36px); align-items: start; }
.plans-page { grid-template-columns: 1fr 1fr; margin-block: 2rem 1rem; max-width: 900px; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.plan h2, .plan h3 { font: 600 1.45rem/1.2 var(--serif); }
.plan-pass { border-top: 4px solid var(--ink); }
.plan-opt { font: 500 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); vertical-align: middle; margin-left: 6px; }
.plan-price { font: 500 2.6rem/1 var(--serif); color: var(--ink); margin: .2em 0 .15em; font-variant-numeric: lining-nums; }
.plan-price span { font: 400 1rem var(--sans); color: var(--muted); }
.plan-alt { color: var(--muted); }
.plan ul { padding-left: 1.1rem; margin: 1rem 0; }
.plan li { margin-bottom: .35rem; }
.plan-preview { background: var(--ok-bg); border-left: 3px solid var(--ink); padding: 10px 14px; font-weight: 500; margin: 0; }

.never { padding-block: clamp(56px, 8vw, 96px); max-width: 860px; }
.honest b { color: var(--ink); font-weight: 600; }
.never-list { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .6rem; }
.never-list li { padding-left: 2rem; position: relative; }
.never-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 14px; border: 1.5px solid var(--brass); border-radius: 50%; background: linear-gradient(45deg, transparent 45%, var(--brass) 45%, var(--brass) 55%, transparent 55%); }

/* page heads */
.pagehead { background: var(--white); border-bottom: 1px solid var(--line-2); padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 48px); }
.pagehead .chips { margin-top: 1.6rem; }

/* the Ledger */
.result { padding-block: 40px 8px; }
.result-head { margin-bottom: 1rem; }
.example-flag { display: inline-block; background: var(--sage); border-radius: 4px; padding: 6px 12px; font-size: .98rem; }
.ledger-wrap { overflow-x: auto; background:
  linear-gradient(90deg, var(--white) 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat local,
  linear-gradient(270deg, var(--white) 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(30,59,51,.22), rgba(30,59,51,0)) left / 12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(30,59,51,.22), rgba(30,59,51,0)) right / 12px 100% no-repeat scroll,
  var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.ledger caption { caption-side: top; text-align: left; padding: 14px 20px 0; font: 500 .78rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.ledger th, .ledger td { padding: 10px 20px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.ledger thead th { font: 600 .8rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-top: 18px; }
.ledger tbody th { font-weight: 400; }
.ledger .num { text-align: right; white-space: nowrap; font-family: var(--serif); font-size: 1.15rem; min-width: 8.5rem; }
.ledger thead .num { font-family: var(--sans); font-size: .8rem; }
.ledger-item { width: 50%; }
.ledger-group th { font: 600 .76rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); padding-top: 20px; background: #FDFBF7; }
.ledger-sub th, .ledger-sub td { font-style: italic; color: var(--muted); border-bottom: 1px solid var(--line); }
.ledger .is-missing span { font: italic .98rem var(--serif); color: var(--danger); border-bottom: 1px dotted var(--danger); }
.ledger .is-in-package span { font: italic .98rem var(--serif); color: var(--muted); }
.ledger-total th, .ledger-total td { border-top: 3px double var(--ink); border-bottom: 0; padding-top: 16px; padding-bottom: 16px; }
.ledger-total th { font: 600 1.3rem/1.2 var(--serif); color: var(--ink); }
.ledger-total .num { font-size: 1.65rem; font-weight: 600; color: var(--ink); }
.ledger-flag { display: block; font: 500 .8rem/1.3 var(--sans); color: var(--danger); white-space: normal; }
.ledger-diff th, .ledger-diff td { border-bottom: 0; color: var(--muted); font-size: .98rem; padding-bottom: 18px; }
.ledger-diff .num { font-size: 1.05rem; }
.ledger-scrollhint { display: none; margin: .5rem 0 0; font: 500 .85rem/1.3 var(--sans); color: var(--muted); }
.ledger-wrap.is-overflow + .ledger-scrollhint { display: block; }
.ledger-note { margin-top: .9rem; font-size: 1rem; max-width: 52rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 1.2rem; }

/* Rule cards */
.notes { padding-block: 40px 16px; }
.rulecards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.rulecards-wide { grid-template-columns: 1fr; max-width: 900px; }
.rulecard { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: 0 var(--r) var(--r) 0; padding: 22px 26px; }
.rulecard h2, .rulecard h3 { font: 600 1.35rem/1.2 var(--serif); }
.rulecard-cite { font: 600 .82rem/1.3 var(--sans); letter-spacing: .02em; margin-bottom: .6rem; }
.rulecard-cite a { color: var(--brass); }
.rulecard-n { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ink); color: var(--white); letter-spacing: 0; margin-right: 6px; }
.rulecard blockquote { margin: .4rem 0 1rem; padding-left: 1rem; border-left: 1px solid var(--brass-soft); }
.rulecard blockquote p { font: italic 400 1.18rem/1.45 var(--serif); color: #24332E; margin: 0; }
.rights { padding-block: 40px 64px; display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.aside-note { background: var(--sage); border-radius: var(--r); padding: 24px; position: sticky; top: 20px; }
.aside-note .section-h { font-size: 1.4rem; }

/* entry form: the price grid */
.entry { padding-block: 40px 64px; }
.entry-top { display: grid; grid-template-columns: 1fr 15rem; gap: 20px; margin-bottom: 1.4rem; max-width: 760px; }
.field label, .panel label { display: block; font-weight: 500; margin-bottom: 6px; }
input[type="text"], input:not([type]), .field input, .panel input:not([type="checkbox"]), .inline-form input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #BDB5A6; border-radius: 4px; background: var(--white); font: 400 1.05rem var(--sans); color: var(--text); }
input[aria-invalid="true"] { border: 2px solid var(--danger); background: var(--danger-bg); }
.field-err { color: var(--danger); font-size: .92rem; margin: 4px 0 0; }
.grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.pgrid { --cols: minmax(16rem, 1fr) 10rem 10rem; min-width: 100%; }
.pgrid.lists-1 { --cols: minmax(16rem, 1fr) 10rem; }
.pgrid.lists-3 { --cols: minmax(16rem, 1fr) repeat(3, 9.5rem); }
.pgrid.lists-4 { --cols: minmax(15rem, 1fr) repeat(4, 9rem); }
.pgrid.lists-5 { --cols: minmax(15rem, 1fr) repeat(5, 8.5rem); }
.pgrid-head, .pgrid-row { display: grid; grid-template-columns: var(--cols); gap: 0 12px; padding: 10px 16px; align-items: center; }
.pgrid-head { position: sticky; top: 0; background: var(--ink); color: var(--white); border-radius: var(--r) var(--r) 0 0; }
.pgrid-corner { font: 500 .78rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.pgrid-name input { min-height: 40px; background: #FFFFFF; font-weight: 500; }
.pgrid-group { margin: 0; padding: 14px 16px 6px; font: 600 .76rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); background: #FDFBF7; border-top: 1px solid var(--line-2); }
.pgrid-group .muted { text-transform: none; letter-spacing: 0; font: italic 400 .95rem var(--serif); margin-left: 6px; }
.pgrid-row { border-top: 1px solid var(--line-2); }
.pgrid-row:not(.is-ticked) .pgrid-item label { color: var(--muted); }
.pgrid-row.is-ticked { background: #F7FAF7; box-shadow: inset 3px 0 0 var(--ink); }
.pgrid-item { display: flex; gap: 12px; align-items: flex-start; }
.pgrid-item input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--ink); flex: none; }
.pgrid-item label { font-weight: 500; cursor: pointer; }
.help { display: block; font-weight: 400; font-size: .9rem; color: var(--muted); }
.cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.money { display: flex; align-items: center; border: 1px solid #BDB5A6; border-radius: 4px; background: var(--white); padding-left: 10px; }
.money:focus-within { outline: 3px solid var(--brass-soft); outline-offset: 1px; }
.money input { border: 0; min-height: 44px; padding: 8px 10px 8px 4px; width: 100%; font: 400 1.05rem var(--serif); font-variant-numeric: lining-nums tabular-nums; text-align: right; background: transparent; }
.money input:focus { outline: none; }
.money input[aria-invalid="true"] { background: var(--danger-bg); }
.entry-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6rem; }
.pointprice { margin-top: 1rem; font-size: .98rem; color: var(--muted); }
.alert { background: var(--danger-bg); border-left: 4px solid var(--danger); padding: 12px 16px; border-radius: 0 4px 4px 0; }
.notice { background: var(--ok-bg); border-left: 4px solid var(--ink); padding: 12px 16px; border-radius: 0 4px 4px 0; }

/* save box, folder */
.savebox { margin-top: 2rem; background: var(--sage); border-radius: var(--r); padding: 24px 28px; max-width: 760px; }
.savebox h3 { font: 600 1.35rem/1.2 var(--serif); }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.panel > * + * { margin-top: .8rem; }
.panel-h { font: 600 1.4rem/1.2 var(--serif); }
.narrow { max-width: 640px; margin-block: 32px 64px; }
.folder-none, .folder { padding-block: 32px 64px; }
.folder-ways { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.keylink { background: var(--white); border: 1.5px dashed var(--brass-soft); border-radius: var(--r); padding: 20px 24px; margin: 1.2rem 0; }
.keylink-row { display: flex; gap: 10px; margin: 0; }
.mono { font-family: ui-monospace, Consolas, monospace !important; font-size: .95rem !important; }
.saved { list-style: none; margin: 1.2rem 0; padding: 0; border-top: 1px solid var(--line); }
.saved-row { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.saved-name { font: 600 1.25rem var(--serif); }
.saved-row .small { margin: 0; }
.saved-tot { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .98rem; }
.saved-tot b { font: 600 1.1rem var(--serif); color: var(--ink); }
.folder-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.inline-form { display: flex; gap: 10px; align-items: center; }
.inline-form label { font-weight: 500; }
.inline-form input { width: 14rem; }
.tickline { display: flex; gap: 10px; align-items: flex-start; }
.tickline input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--ink); }

/* Paper Check */
.seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; margin-top: 1.4rem; }
.seg a { padding: 11px 18px; text-decoration: none; font-weight: 500; color: var(--ink); }
.seg a + a { border-left: 1.5px solid var(--ink); }
.seg a[aria-current="page"] { background: var(--ink); color: var(--white); }
.ticks { list-style: none; margin: 1.2rem 0 1.6rem; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.ticks li { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); align-items: flex-start; }
.ticks li:last-child { border-bottom: 0; }
.ticks input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--ink); flex: none; }
.ticks label { cursor: pointer; }
.asklist { list-style: none; counter-reset: a; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 14px; max-width: 900px; }
.asklist li { counter-increment: a; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: 0 var(--r) var(--r) 0; padding: 16px 20px 14px 56px; position: relative; }
.asklist li::before { content: counter(a); position: absolute; left: 18px; top: 12px; font: italic 600 1.7rem/1 var(--serif); color: var(--brass); }
.ask-what { font-weight: 500; margin-bottom: .3em; }
.ask-q { font: italic 400 1.15rem/1.4 var(--serif); color: var(--ink); margin-bottom: .2em; }

/* prose pages */
.prose { padding-block: 40px 72px; max-width: 820px; }
.prose h2 { font: 600 1.6rem/1.2 var(--serif); margin-top: 1.6em; }
.prose h3 { font: 600 1.25rem/1.25 var(--serif); margin-top: 1.4em; }
.prose li { margin-bottom: .5rem; }
.cols { columns: 2; column-gap: 32px; }
.cols li { break-inside: avoid; }

/* footer */
.foot { background: var(--ink); color: #DCE5DF; margin-top: 0; }
.foot a { color: var(--white); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 32px; padding-block: 56px 32px; font-size: 1rem; }
.foot-brand { font: 600 1.5rem/1 var(--serif); color: var(--white); }
.foot-head { font: 600 .76rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-soft); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot strong { color: var(--white); font-weight: 500; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255,255,255,.18); padding-block: 18px 26px; font-size: .95rem; }
.foot-base p { margin: 0; }

/* error page */
.is-error .pagehead { min-height: 40vh; }

@media (max-width: 1080px) {
  .mast-nav { margin-left: 0; width: 100%; justify-content: space-between; border-top: 1px solid var(--line-2); padding-top: 8px; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plans-head { grid-column: 1 / -1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .rights { grid-template-columns: 1fr; }
  .aside-note { position: static; }
}
@media (max-width: 760px) {
  body { font-size: 1.0625rem; }
  .util-row { justify-content: center; text-align: center; }
  .util-free, .util-more { display: none; }
  .pgrid-hint { display: inline; }
  .mast-row { gap: 10px 14px; }
  .brand-word { font-size: 1.35rem; }
  .brand-mark { width: 32px; height: 32px; }
  .mast-rule { display: none; }
  .mast-desc { font-size: .9rem; flex-basis: 100%; margin-top: -6px; }
  .mast-nav { flex-wrap: wrap; gap: 8px; }
  .mast-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; width: 100%; }
  .mast-nav .mast-folder { width: 100%; text-align: center; }
  .preview-row { flex-direction: column; gap: 6px; }
  .hero-actions .btn { width: 100%; }
  .given { grid-template-columns: 1fr; }
  .given-art { max-width: 220px; margin-inline: auto; }
  .steps-list { grid-template-columns: 1fr; }
  .plans, .plans-page, .folder-ways { grid-template-columns: 1fr; }
  .rulecards { grid-template-columns: 1fr; }
  .rulecard { padding: 18px 18px; }
  .ledger th, .ledger td { padding: 9px 8px; }
  .ledger th:first-child, .ledger td:first-child { padding-left: 12px; }
  .ledger .num { min-width: 5.2rem; font-size: .98rem; }
  .ledger tbody th, .ledger tfoot th { min-width: 7.5rem; font-size: .98rem; }
  .ledger-total .num { font-size: 1.15rem; }
  .ledger-item { width: auto; }
  .entry-top { grid-template-columns: 1fr; }
  .grid-wrap { overflow: visible; border: 0; background: transparent; }
  .pgrid-head { display: block; position: static; border-radius: var(--r); padding: 14px; }
  .pgrid-corner { display: block; margin-bottom: 8px; }
  .pgrid-name { display: block; margin-top: 8px; }
  .pgrid-row { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 10px; padding: 14px; background: var(--white); }
  .pgrid-row.is-ticked { background: #F7FAF7; }
  .pgrid-item { grid-column: 1 / -1; }
  .cell-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; font-size: .85rem; color: var(--muted); margin-bottom: 3px; }
  .pgrid-group { background: transparent; border-top: 0; padding-inline: 2px; }
  .entry-actions .btn { width: 100%; }
  .saved-row { grid-template-columns: 1fr; gap: 8px; }
  .inline-form { flex-wrap: wrap; }
  .inline-form input { width: 100%; }
  .keylink-row { flex-direction: column; }
  .seg { display: flex; flex-direction: column; width: 100%; }
  .seg a + a { border-left: 0; border-top: 1.5px solid var(--ink); }
  .cols { columns: 1; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-base { flex-direction: column; }
}
@media print {
  .util, .mast, .preview, .foot, .entry, .savebox, .result-actions, .chips, .pagehead .lede, .skip, .notes .rulecard-cite a::after { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .pagehead, .ledger-wrap, .rulecard { border: 0; }
  .rulecards { grid-template-columns: 1fr; }
  .rulecard { break-inside: avoid; }
}
/* ---------- v1.1.0: AdEngine banner (adengine.us) ----------
   One quiet labelled slot between the main content and the evergreen footer, on the two guide pages only (the controllers
   opt in). The label and the reserved height are on the <ins>, so when tag.js (or ae-size.js) hides a slot it cannot fill,
   the label, the reserved space and the margins go with it. 110px = 16px label + 4px gap + 90px banner; 270px on phones
   (300x250). The guide pages end with 64-72px of padding and the footer has no top margin, so the space sits below the
   <ins>. display stays here, never !important (tag.js hides an unfilled slot with an inline display:none). */
.ae-slot { padding-inline: var(--gut); }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 0 auto 56px; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 500 11px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; margin: 0 auto 40px; } }
@media print { .ae-slot { display: none; } }