@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/iserif-normal.woff2?v=5) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/iserif-italic.woff2?v=5) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/isans-normal.woff2?v=5) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bone: #F3EEE4; --paper: #FAF7F0; --white: #FFFEFB; --stone: #E7E0D2;
  --ink: #13201A; --ink-2: #3F4B44; --ink-3: #5A665E;
  --forest: #0E1F17; --forest-2: #16301F; --on-dark: #EEE7DA; --on-dark-2: #BDB8AD;
  --brass: #B39463; --brass-ink: #7A5C32; --brass-light: #CDB17F;
  --ok: #1E6B45; --ok-bg: #E2F0E7; --warn: #8A5A00; --warn-bg: #F8EDD5; --bad: #9A2A1F; --bad-bg: #F6E1DD; --info-bg: #E6ECEF;
  --rule: rgb(19 32 26 / .13); --rule-strong: rgb(19 32 26 / .28); --rule-dark: rgb(238 231 218 / .16);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 4.5vw, 64px); --max: 1240px; --sec: clamp(64px, 8vw, 112px); --r: 10px;
  --shadow: 0 1px 2px rgb(14 31 23 / .06), 0 12px 32px -12px rgb(14 31 23 / .18);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bone); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; overflow-wrap: break-word; }
h1, h2 { font-family: var(--serif); letter-spacing: -.012em; line-height: 1.04; }
h3, h4 { font-family: var(--sans); font-weight: 600; line-height: 1.3; letter-spacing: -.003em; }
h1 { font-size: clamp(42px, 6vw, 80px); }
h2 { font-size: clamp(32px, 3.8vw, 52px); }
h3 { font-size: 19px; }
h4 { font-size: 16px; }
h1 em, h2 em { color: var(--brass-ink); }
.dark h1 em, .dark h2 em { color: var(--brass-light); }
:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 3px; }
.dark :focus-visible, .utility :focus-visible, .foot :focus-visible, .review-bar :focus-visible, .trust-band :focus-visible { outline-color: var(--brass-light); }
[hidden] { display: none !important; } /* the hidden attribute always wins over a component's display (buttons a script reveals stayed visible without it) */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--forest); color: var(--on-dark); padding: 12px 18px; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.narrow { max-width: 760px; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 40em; }
.dark .lede, .dark .muted { color: var(--on-dark-2); }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }
.eyebrow { font: 600 12.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); margin: 0 0 16px; }
.dark .eyebrow { color: var(--brass-light); }
.draft { background: #FFF1A8; color: #3A2E00; outline: 1px dashed #B08A00; padding: 0 2px; border-radius: 2px; }
.dark .draft { background: #5A4A00; color: #FFF6C8; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--forest); color: var(--on-dark); border: 1px solid var(--forest); font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s; white-space: nowrap; }
.btn:hover { background: var(--forest-2); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn.ghost:hover { border-color: var(--ink); }
.dark .btn { background: var(--on-dark); color: var(--forest); border-color: var(--on-dark); }
.dark .btn.ghost { background: transparent; color: var(--on-dark); border-color: var(--rule-dark); }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tlink { font-weight: 600; text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.tlink:hover { text-decoration-color: currentColor; }
.card, .note, .lede, p { overflow-wrap: break-word; }
.card a, td a { overflow-wrap: anywhere; }
p > .tlink:only-child { display: inline-block; padding: 10px 0; }

/* Header */
.utility { background: var(--forest); color: var(--on-dark-2); font-size: 13.5px; }
.utility .wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; min-height: 36px; align-items: center; } /* wraps at large text sizes instead of running off the screen */
.utility a { text-decoration: none; color: var(--on-dark); display: inline-flex; align-items: center; min-height: 36px; white-space: nowrap; }
.utility a:hover { text-decoration: underline; }
.hdr { position: sticky; top: 0; z-index: 50; background: rgb(250 247 240 / .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.hdr .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo { font: 400 27px/1 var(--serif); text-decoration: none; letter-spacing: -.01em; flex: none; }
.logo b { font-weight: 400; color: var(--brass-ink); }
.nav { display: flex; gap: 2px; align-items: center; flex: 1; }
.nav > a.nav-call { display: none; } /* phone menu only; must out-rank .nav > a */
.nav > details:nth-last-of-type(-n+2) .menu { left: auto; right: 0; } /* the last menus open leftward, inside the viewport */
.nav > details, .nav > a { position: relative; }
.nav summary, .nav > a { list-style: none; cursor: pointer; padding: 10px 12px; border-radius: 8px; font-weight: 500; font-size: 15px; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.nav summary:hover, .nav > a:hover, .nav details[open] summary { background: var(--stone); }
.nav [aria-current="page"], .nav .on > summary { color: var(--brass-ink); }
.menu { position: absolute; left: 0; top: calc(100% + 8px); background: var(--white); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); padding: 14px; width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.menu.one { width: 320px; grid-template-columns: 1fr; }
.menu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.menu a:hover { background: var(--bone); }
.menu b { display: block; font-weight: 600; font-size: 15px; }
.menu span { display: block; font-size: 13.5px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.menu .menu-group { grid-column: 1 / -1; border-top: 1px solid var(--rule); margin-top: 6px; padding: 10px 0 0; }
.menu .menu-h { font: 600 12.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); margin: 0 12px 2px; }
.menu .menu-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 2px; }
.menu .menu-group a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 500; font-size: 14.5px; }
.menu .all { grid-column: 1 / -1; border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 12px; font-weight: 600; font-size: 14px; }
.hdr-cta { display: flex; gap: 16px; align-items: center; flex: none; }
.hdr-start { font-weight: 600; font-size: 15px; text-decoration: none; padding: 10px 4px; }
.hdr-start:hover { text-decoration: underline; }
.utility .show-sm { display: none; }
.burger { display: none; background: none; border: 1px solid var(--rule-strong); border-radius: 8px; min-height: 44px; padding: 0 14px; font: 600 14px var(--sans); color: var(--ink); cursor: pointer; }
@media (max-width: 1080px) {
  .burger { display: inline-flex; align-items: center; margin-left: auto; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 20px; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow: auto; overscroll-behavior: contain; }
  .nav.open { display: flex; }
  .nav > a.nav-call { display: flex; align-items: center; min-height: 48px; margin: 4px 0 8px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 10px; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--white); }
  .nav > a.nav-search { border-color: var(--rule); font-weight: 500; } /* not a lookalike of the urgent-call button */
  .menu, .menu.one { position: static; width: auto; box-shadow: none; border: 0; grid-template-columns: 1fr; padding: 0 0 8px 8px; background: transparent; }
  .hdr-cta .btn, .hdr-start { display: none; }
  .utility .show-sm { display: inline-flex; }
  .hdr .wrap { gap: 12px; }
  .utility .wrap { justify-content: space-between; gap: 4px 12px; }
}
@media (max-width: 600px) { .utility .hide-sm { display: none; } }
@media (max-width: 1080px) { .utility .hide-md { display: none; } } /* Search: in the utility bar on desktop, at the top of the phone menu below that */

/* Sticky mobile CTA */
.mcta { display: none; }
@media (max-width: 1080px) {
  .mcta { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 10px; background: rgb(250 247 240 / .97); border-top: 1px solid var(--rule); }
  .mcta .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
  html { scroll-padding-bottom: 88px; }
  body { padding-bottom: 72px; }
}

/* Sections */
.sec { padding-block: var(--sec); }
.sec.tight { padding-block: calc(var(--sec) * .6); }
.sec.paper { background: var(--paper); }
.sec.white { background: var(--white); }
.dark { background: var(--forest); color: var(--on-dark); }
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head h2 + p { margin-top: 18px; }
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(48px, 6vw, 80px); }
.hero h1 { max-width: 13em; }
.hero .lede { margin-top: 24px; }
.crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 20px; }
.crumbs a { text-decoration: none; display: inline-block; padding: 10px 0; }
.crumbs a:hover { text-decoration: underline; }

/* Grids */
.g2, .g3, .g4 { display: grid; gap: clamp(16px, 2vw, 28px); }
@media (max-width: 1200px) { .g3.examples { grid-template-columns: 1fr; } } /* each worked example has a 3-column table */
@media (min-width: 621px) and (max-width: 900px) { .g3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } } /* no lone half-width card on tablets */
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.rev > :first-child { order: 2; }
.split.even { grid-template-columns: 1fr 1fr; }
.split.top { align-items: start; }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: 1fr 1fr; } .split, .split.even { grid-template-columns: 1fr; } .split.rev > :first-child { order: 0; } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); padding: clamp(20px, 2.2vw, 28px); }
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.dark .card { background: var(--forest-2); border-color: var(--rule-dark); }
a.card { text-decoration: none; display: block; transition: border-color .2s, transform .2s; }
a.card:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.card .more { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 15px; color: var(--brass-ink); }
.num { font: 400 clamp(40px, 4vw, 56px)/1 var(--serif); }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding: 8px 0 8px 28px; position: relative; border-top: 1px solid var(--rule); }
.ticks li:first-child { border-top: 0; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.dark .ticks li { border-color: var(--rule-dark); }
.dark .ticks li::before { border-color: var(--brass-light); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.steps > li { counter-increment: s; position: relative; padding: 0 0 26px 52px; }
.steps > li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; background: var(--forest); color: var(--on-dark); display: grid; place-items: center; font: 600 14px var(--sans); }
.steps > li::after { content: ""; position: absolute; left: 16.5px; top: 36px; bottom: 4px; width: 1px; background: var(--rule-strong); }
.steps > li:last-child::after { display: none; }
.steps h3 { margin-bottom: 4px; }
.steps p { margin: 0; color: var(--ink-2); }

/* Product frames (screenshots) */
.shot { margin: 0; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.shot .bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-3); }
.shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--stone); }
.shot .bar span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot img { width: 100%; }
.shot-open { display: block; position: relative; }
.shot-zoom { display: none; }
@media (max-width: 620px) { .shot-zoom { display: inline-flex; align-items: center; position: absolute; right: 10px; bottom: 10px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgb(14 31 23 / .82); color: #fff; font-size: 13px; font-weight: 600; } }
.shot figcaption { padding: 10px 14px; font-size: 13.5px; color: var(--ink-3); border-top: 1px solid var(--rule); }
.phone { max-width: 300px; border-radius: 28px; border: 8px solid var(--forest); box-shadow: var(--shadow); overflow: hidden; margin: 0 auto; background: var(--white); }
.shots-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 20px; align-items: end; }
@media (max-width: 700px) { .shots-pair { grid-template-columns: 1fr; } }

/* Tour (walk-through) */
.tour > *, .split > *, .g2 > *, .g3 > *, .g4 > * { min-width: 0; }
.card li, .card a { overflow-wrap: anywhere; }
.tour { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.tour ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tour button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.tour button:hover { background: var(--paper); }
.tour button[aria-selected="true"] { background: var(--white); border-color: var(--rule); box-shadow: var(--shadow); }
.tour button:focus-visible { outline: 2px solid var(--brass-ink); }
.tour b { display: block; font-weight: 600; }
.tour small { display: block; color: var(--ink-3); font-size: 14px; margin-top: 2px; line-height: 1.45; }
.tour .panes > [hidden] { display: none; }
@media (max-width: 860px) { .tour { grid-template-columns: 1fr; } .tour ol { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .tour li { scroll-snap-align: start; } }

/* Tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--white); }
/* Phones: a three-column reference table reads as one block per row (name, fee, how it's charged) instead of
   scrolling sideways with one or two words a line. */
@media (max-width: 620px) {
  .stack-sm table, .stack-sm tbody, .stack-sm tr, .stack-sm td { display: block; width: 100%; }
  .stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-sm tr { padding: 14px 16px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
  .stack-sm td { padding: 0; border: 0; }
  .stack-sm td.fee { order: -1; font-weight: 600; }
  .stack-sm td.fee, .stack-sm td[data-label] { overflow-wrap: break-word; }
  .stack-sm td:first-child { order: -2; }
  .stack-sm tr:last-child { border-bottom: 0; }
}
/* A table wider than its box: shadows at the edges that still have columns to scroll to (set by the site script). */
.tbl-wrap.scrolls { background: linear-gradient(to right, var(--white) 30%, rgb(255 255 255 / 0)) left / 32px 100% no-repeat local, linear-gradient(to left, var(--white) 30%, rgb(255 255 255 / 0)) right / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgb(14 31 23 / .16), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgb(14 31 23 / .16), transparent) right / 12px 100% no-repeat scroll, var(--white); }
.tbl-wrap.scrolls table, .tbl-wrap.scrolls thead, .tbl-wrap.scrolls tbody, .tbl-wrap.scrolls tr { background: transparent; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; background: var(--paper); font-size: 14px; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 600; background: var(--paper); }
caption { text-align: left; padding: 12px 14px; font-weight: 600; caption-side: top; }

/* Pills, notes */
.pill { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--stone); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.note { border-left: 3px solid var(--brass); background: var(--paper); padding: 16px 20px; border-radius: 0 8px 8px 0; max-width: 72ch; }
.note p:last-child { margin: 0; }
.where { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.where > div { border-radius: var(--r); padding: 20px; }
.where .in { background: var(--ok-bg); }
.where .out { background: var(--info-bg); }
.where h3 { margin-bottom: 8px; font-size: 16px; }
.where ul { margin: 0; padding-left: 18px; }
@media (max-width: 620px) { .where { grid-template-columns: 1fr; } }

/* FAQ */
.faq details { border-top: 1px solid var(--rule); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 24px var(--sans); color: var(--brass-ink); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 18px; color: var(--ink-2); max-width: 44em; }

/* Forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.form .wide { grid-column: 1 / -1; }
.form label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.form .opt { font-weight: 400; color: var(--ink-3); }
.form input, .form select, .form textarea { width: 100%; min-height: 48px; padding: 10px 14px; font: 400 16px var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--rule-strong); border-radius: 8px; }
.form textarea { min-height: 110px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--brass-ink); outline-offset: 0; border-color: transparent; }
.form .err { color: var(--bad); font-size: 14px; margin: 6px 0 0; }
.form [aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.form .hp { position: absolute; left: -9999px; }
.form .hint { font-size: 14px; color: var(--ink-2); margin: -2px 0 8px; }
.form .form-req { margin: 0; }
.form-errsum { border-left-color: var(--bad); background: var(--bad-bg); max-width: none; scroll-margin-top: 96px; }
.form-errsum:focus { outline: 2px solid var(--brass-ink); outline-offset: 2px; }
.form-errsum .form-eh { font: 600 17px/1.3 var(--sans); margin: 0; color: var(--ink); }
.form-errsum p { margin: 6px 0 0; }
.form-errsum ul { margin: 6px 0 0; padding-left: 20px; }
.form-errsum a { display: inline-block; padding: 10px 0; }
.form-box { background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: clamp(20px, 3vw, 36px); scroll-margin-top: 96px; }
@media (max-width: 620px) { .form { grid-template-columns: 1fr; } }

/* Logos strip */
.logos { display: flex; flex-wrap: wrap; gap: 12px 36px; align-items: center; color: var(--ink-3); font: 600 15px var(--sans); }

/* Calculator */
.calc output { font: 400 34px/1.1 var(--serif); display: block; }
.calc .res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .calc .res { grid-template-columns: 1fr; } }

/* CTA band */
.cta-band { text-align: left; }
.cta-band h2 { max-width: 16em; }

/* Footer */
.foot { background: var(--forest); color: var(--on-dark-2); padding-block: 64px 40px; font-size: 15px; }
.foot .cols { display: grid; grid-template-columns: 1.4fr repeat(6, 1fr); gap: 28px; }
.foot .foot-h { color: var(--on-dark); margin: 0 0 12px; font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.foot li a { display: inline-block; padding: 6px 0; min-height: 32px; }
.foot .legal a { display: inline-block; padding: 8px 0; }
.foot a { text-decoration: none; color: var(--on-dark-2); }
.foot a:hover { color: var(--on-dark); text-decoration: underline; }
.foot .legal { border-top: 1px solid var(--rule-dark); margin-top: 48px; padding-top: 24px; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
.foot .logo { color: var(--on-dark); }
.foot .logo b { color: var(--brass-light); }
@media (max-width: 1000px) { .foot .cols { grid-template-columns: 1fr 1fr 1fr; } .foot .cols > :first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot .cols { grid-template-columns: 1fr 1fr; } }

.review-bar { background: #3A2E00; color: #FFF6C8; padding: 8px var(--gutter); font-size: 13.5px; text-align: center; }
.review-bar a { color: inherit; font-weight: 600; }
.review-bar a { display: inline-block; padding: 6px 0; }
.sec-nav a { display: inline-block; padding: 8px 0; }
@media (max-width: 620px) { .btn { white-space: normal; text-align: center; } td, th { overflow-wrap: break-word; } }
@media print { .utility, .hdr, .mcta, .foot, .review-bar { display: none !important; } body { background: #fff; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Round 3: hero note, close-up screenshots, trust band, policy demo, guarantees */
.hero-note { margin-top: 14px; color: var(--ink-2); max-width: 40em; font-size: 16px; }
.shot.crop { margin-inline: auto; width: 100%; }
.shot.crop img { width: 100%; height: auto; }
.trust-band { background: var(--forest); color: var(--on-dark); padding-block: 28px; }
.trust-band .tb { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 24px; }
.trust-band b { display: block; font: 400 22px/1.15 var(--serif); color: var(--on-dark); }
.trust-band span { display: block; font-size: 13px; color: var(--on-dark-2); margin-top: 4px; line-height: 1.35; }
@media (max-width: 1000px) { .trust-band .tb { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trust-band .tb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdemo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); }
.pdemo h3 { margin-bottom: 14px; }
.pdemo > *, .pdemo-opt > div { min-width: 0; }
.pdemo label { display: block; font-weight: 600; font-size: 15px; margin: 18px 0 8px; }
.pdemo input[type=range] { width: 100%; accent-color: var(--forest); min-height: 32px; }
.pdemo output { font-variant-numeric: tabular-nums; }
.pdemo-opt { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); margin-bottom: 10px; }
.pdemo-opt b { display: block; }
.pdemo-opt span.small { display: block; margin-top: 2px; }
.pdemo-opt .pill { flex: none; }
@media (max-width: 760px) { .pdemo { grid-template-columns: 1fr; } }
.guarantees .card h3 { font-size: 17px; }
@media (max-width: 1080px) { .js .mcta { transform: translateY(110%); transition: transform .25s; } .js .mcta.on { transform: none; } }
.plan .actions { gap: 14px; }
.struggle blockquote { margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--rule-strong); color: var(--ink-2); font-style: italic; }
.struggle cite { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); margin-top: 6px; }
/* Phones and narrow windows: 44px targets for the controls people tap most, and the bottom bar steps aside while a form field is in use. */
@media (max-width: 1080px) {
  .btn.sm { min-height: 44px; }
  .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .foot li a { padding: 10px 0; min-height: 44px; }
  .foot .legal a { padding: 12px 0; }
  .pdemo input[type=range] { min-height: 44px; }
  .js .mcta.on.typing { transform: translateY(110%); }
  form label:has(> input[type=checkbox]) { padding: 10px 0; min-height: 44px; }
  form label > input[type=checkbox] { width: 20px !important; height: 20px; flex: none; margin-top: 2px !important; }
}
/* Landscape phones: the sticky header and the bottom bar together covered a third of the screen. The header
   stays (it holds the menu); the bar's two actions are already in the header and the hero. */
@media (max-width: 1080px) and (max-height: 500px) { .mcta { display: none; } }
/* Without the site script the bar can't step aside (for the hero, or while a field is in use) and covered the
   end of form error summaries, so it only appears once the script has run. */
html:not(.js) .mcta { display: none; }
/* Tap targets in long guides: contents links, footnote markers and in-page section links. */
nav.toc li > a.tlink, .bg-toc li > a.tlink { display: block; padding: 10px 0; }
sup > a.tlink { display: inline-block; padding: 4px 5px; margin: -4px 0; } /* at least 24px, without overlapping the next footnote or the line below */
nav.sec-nav a.tlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
/* /search (f-search.ts) */
.srch-res{scroll-margin-top:96px;outline:none}.srch-form{max-width:640px;margin-bottom:12px}.srch-form label{display:block;font-weight:600;margin-bottom:8px}
.srch-row{display:flex;flex-wrap:wrap;gap:10px}.srch-row input{flex:1 1 220px;min-width:0;min-height:48px;padding:10px 14px;font:inherit;font-size:16px;border:1px solid var(--rule-strong);border-radius:8px;background:var(--white);color:inherit}.srch-row .btn{min-height:48px}
.srch-res{margin-top:40px}.srch-h{font-size:28px;margin-bottom:12px}.srch-group{margin-top:28px}.srch-group h3{font-size:20px;margin-bottom:6px}
.srch-list{list-style:none;padding:0;margin:0;max-width:760px}.srch-list li{padding:14px 0;border-top:1px solid var(--rule)}
.srch-a{display:block;min-height:44px;text-decoration:none;color:inherit}.srch-t{display:block;font-weight:600;font-size:18px;text-decoration:underline;text-underline-offset:3px}.srch-u{display:block;font-size:14px;color:var(--ink-3);overflow-wrap:anywhere}
.srch-snip{margin-top:6px;font-size:15px;overflow-wrap:anywhere}.srch-res mark{background:var(--warn-bg);color:var(--ink);box-shadow:inset 0 -2px 0 var(--brass);padding:0 1px;border-radius:2px}
.srch-hubs{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.srch-hubs a{display:block;min-height:44px;padding:14px 16px;border:1px solid var(--rule-strong);border-radius:8px;text-decoration:none;color:inherit}.srch-hubs b,.srch-hubs span{display:block}.srch-hubs span{font-size:15px;margin-top:2px}
.srch-empty{max-width:640px}.srch-tips{margin:10px 0 0;padding-left:20px}.srch-tips li{min-height:44px;display:list-item;padding:10px 0 0}.srch-more{margin-top:28px}
/* Wave 4 visual polish. Eyebrows and ledes don't leave one word on a line of its own, and a hero phrase marked
   .keep stays together on wide screens (it still wraps inside itself on a phone). */
.eyebrow { text-wrap: balance; }
.lede, .hero-note { text-wrap: pretty; }
.hero h1 .keep { display: inline-block; }
/* Vertical rhythm: two sections in a row on the same background are one section's spacing apart, not two (the
   gap read as a hole, twice the break between sections that change color). After a tight section, a little
   space is added back. Sections that draw their own top rule (the comparison pages' areas) are left alone. */
.sec:not(.paper, .white, .dark, .trust-band) + .sec:not(.paper, .white, .dark, .trust-band, [style*="border-top"]),
.sec.paper + .sec.paper:not([style*="border-top"]), .sec.white + .sec.white:not([style*="border-top"]) { padding-top: 0; }
.sec.tight:not(.paper, .white, .dark, .trust-band) + .sec:not(.paper, .white, .dark, .trust-band, [style*="border-top"]),
.sec.tight.paper + .sec.paper:not([style*="border-top"]), .sec.tight.white + .sec.white:not([style*="border-top"]) { padding-top: calc(var(--sec) * .4); }
/* The hero has the page background, so a plain section straight after it gets the same treatment. */
.hero + .sec:not(.paper, .white, .dark, .trust-band) { padding-top: calc(var(--sec) * .4); }
/* Link cards: "Read more" / "Open" sits on the bottom edge, so it lines up across a row of cards of different lengths. */
a.card:has(> .more) { display: flex; flex-direction: column; }
a.card:has(> .more) > .more { margin-top: auto; padding-top: 12px; align-self: flex-start; }
/* Pricing plan cards: each element's spacing is set in the markup (margins no longer collapse), and the actions
   sit on the bottom edge, level across the three plans. */
.card.plan { display: flex; flex-direction: column; }
.card.plan > p { margin: 0; }
.card.plan > .actions { margin-top: auto; padding-top: 20px; }
/* /resources: its cards in labeled groups, with a jump list. */
.res-nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: -12px; }
.res-group { margin-top: clamp(36px, 4vw, 56px); scroll-margin-top: 88px; }
.res-group > h2 { font-size: 28px; margin-bottom: 20px; }
.res-group > .ticks { max-width: 40em; }
/* Desktop dropdowns: a menu taller than the window scrolls inside itself (the header is sticky, so the page
   couldn't be scrolled to reach its end), and the Free tools links sit in three even columns. */
@media (min-width: 1081px) {
  .menu { max-height: calc(100vh - 116px); max-height: calc(100dvh - 116px); overflow-y: auto; overscroll-behavior: contain; }
  .menu:has(.menu-group) { width: 620px; } /* three link columns without wrapping "Amex GBT and Egencia" */
  .menu .menu-group ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}