/* Generated by gtm/_tools/site.py from packages/ui/src/tokens.ts. Do not edit. */
:root {
  --bg: #F7F7F5;
  --surface: #FFFFFF;
  --surfaceRaised: #FFFFFF;
  --surfaceSunken: #EFEFEC;
  --border: #E3E3DF;
  --borderStrong: #CDCDC8;
  --text: #111110;
  --textSecondary: #52524F;
  --textMuted: #6B6B66;
  --success: #1E7B46;
  --successSoft: #DDF3E5;
  --warning: #8A5A00;
  --warningSoft: #FBEFD2;
  --danger: #B3261E;
  --onDanger: #FFFFFF;
  --dangerSoft: #FADCDA;
  --overlay: rgba(17, 17, 16, 0.45);
  --accent: #4F46E5;
  --onAccent: #FFFFFF;
  --accentSoft: rgba(79, 70, 229, 0.12);
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 20px;
  --sp6: 24px; --sp8: 32px; --sp10: 40px; --sp12: 48px; --sp16: 64px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
  --bg: #111110;
  --surface: #1B1B1A;
  --surfaceRaised: #2C2C2A;
  --surfaceSunken: #111110;
  --border: #2C2C2A;
  --borderStrong: #454542;
  --text: #F7F7F5;
  --textSecondary: #CDCDC8;
  --textMuted: #A8A8A3;
  --success: #5FD48E;
  --successSoft: #123521;
  --warning: #F0C060;
  --warningSoft: #3A2B08;
  --danger: #F2766D;
  --onDanger: #2B0806;
  --dangerSoft: #3E1512;
  --overlay: rgba(0, 0, 0, 0.6);
  --accent: #A5B4FC;
  --onAccent: #1E1B4B;
  --accentSoft: rgba(165, 180, 252, 0.18);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size:18px;line-height:26px;font-weight:400;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--sp5); }
@media (min-width: 1100px) { .wrap { max-width: 1200px; padding: 0 var(--sp8); } }
header.top { border-bottom: 1px solid var(--border); background: var(--surface); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: var(--sp4); }
.wordmark { display: inline-flex; align-items: center; gap: var(--sp2); min-height: 48px; color: var(--text); text-decoration: none; font-size:20px;line-height:26px;font-weight:600; }
.wordmark .dot { width: 12px; height: 12px; border-radius: var(--r-pill); background: var(--accent); }
nav.site a { color: var(--textSecondary); text-decoration: none; margin-left: var(--sp4); font-size:16px;line-height:22px;font-weight:400; padding: var(--sp3) 0; display: inline-block; min-height: 48px; min-width: 48px; text-align: center; line-height: 24px; }
nav.site a:hover, nav.site a[aria-current] { color: var(--text); }
.hero { padding: var(--sp12) 0 var(--sp8); }
.hero h1 { font-size:36px;line-height:42px;font-weight:700;letter-spacing:-0.4px; margin: 0 0 var(--sp4); max-width: 24ch; }
.hero p.sub { font-size:20px;line-height:26px;font-weight:600; font-weight: 400; color: var(--textSecondary); margin: 0 0 var(--sp5); max-width: 56ch; }
.price { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp3); background: var(--accentSoft); border: 1px solid var(--accent); border-radius: var(--r-lg); padding: var(--sp3) var(--sp4); font-size:18px;line-height:26px;font-weight:600; }
.price .tag { color: var(--accent); }
.soon { margin-top: var(--sp3); color: var(--textMuted); font-size:16px;line-height:22px;font-weight:400; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp3); margin: var(--sp2) 0 var(--sp3); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--sp6); border-radius: var(--r-lg); background: var(--accent); color: var(--onAccent); text-decoration: none; font-size:18px;line-height:26px;font-weight:600; }
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn.quiet { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.cta-note { margin: 0; font-size:18px;line-height:26px;font-weight:600; color: var(--text); }
.proof { margin: var(--sp3) 0 var(--sp4); font-size:18px;line-height:26px;font-weight:600; color: var(--text); }
.limit { margin: var(--sp3) 0 0; color: var(--textSecondary); font-size:16px;line-height:22px;font-weight:400; }
figure.sample { margin: var(--sp6) 0 0; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
figure.sample .frame { height: 460px; padding: var(--sp4); background: var(--surfaceSunken); }
figure.sample img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; }
figure.sample figcaption { padding: var(--sp3) var(--sp4); color: var(--textSecondary); font-size:16px;line-height:22px;font-weight:400; }
/* Hero: copy left, the sample right, from 1100px up. Below that it stacks. */
.hero-grid { display: grid; gap: var(--sp6); }
@media (min-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp12); align-items: start; }
  .hero h1 { max-width: 18ch; }
  .hero-grid figure.sample { margin: 0; max-width: none; }
  .hero-grid figure.sample .frame { height: 560px; }
}
@media (min-width: 1700px) { .hero-grid figure.sample .frame { height: 640px; } }
/* "Why it is different": accordions on narrow screens, the card grid from 900px. */
.why-acc { display: grid; gap: var(--sp2); }
.why-acc details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.why-acc summary { cursor: pointer; padding: var(--sp3) var(--sp4); min-height: 48px; font-size:18px;line-height:26px;font-weight:600; display: flex; align-items: center; }
.why-acc details p { margin: 0; padding: 0 var(--sp4) var(--sp4); color: var(--textSecondary); }
.grid.why-grid { display: none; }
@media (min-width: 900px) { .why-acc { display: none; } .grid.why-grid { display: grid; } }
.compare { overflow-x: auto; margin: var(--sp5) 0; }
.compare table { border-collapse: collapse; width: 100%; }
.compare caption { text-align: left; color: var(--textSecondary); padding-bottom: var(--sp2); }
.compare th, .compare td { border: 1px solid var(--border); padding: var(--sp2) var(--sp3); text-align: left; vertical-align: top; }
.compare thead th { background: var(--surfaceSunken); }
.downloads { margin: var(--sp5) 0; padding: var(--sp4) var(--sp5); background: var(--accentSoft); border: 1px solid var(--accent); border-radius: var(--r-lg); }
.downloads ul { margin: 0; padding-left: 1.2em; }
.downloads li { margin: 0 0 var(--sp2); }
.downloads a { display: inline-block; min-height: 48px; line-height: 48px; }
/* The App Store button (only while gtm/<dir>/site/release.json says the iPhone app is live). Neutral,
   not the accent, so the web app stays the first thing to press; no Apple artwork. */
.store { display: grid; gap: var(--sp2); margin: var(--sp4) 0 var(--sp3); padding: var(--sp4); max-width: 56ch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.store .store-btn { justify-self: start; gap: var(--sp2); background: var(--text); color: var(--bg); }
.store .store-btn .ico { width: 20px; height: 20px; flex: none; }
.store .store-note { margin: 0; color: var(--textSecondary); font-size:16px;line-height:22px;font-weight:400; }
.store .store-note strong { color: var(--text); }
article.doc .store { margin: 0 0 var(--sp6); }
article.doc .store p { margin: 0; }
@media (max-width: 600px) { .store .store-btn { justify-self: stretch; } }
.madeby { border-top: 1px solid var(--border); background: var(--surfaceSunken); padding: var(--sp4) 0; }
.madeby p { margin: 0; color: var(--text); }
section { padding: var(--sp8) 0; border-top: 1px solid var(--border); }
section h2 { font-size:28px;line-height:34px;font-weight:700;letter-spacing:-0.2px; margin: 0 0 var(--sp5); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp5); }
figure.shot { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
/* Phone frames (780 x 1688) and desktop frames (1512 x 793) share a row, so the image is
   shown whole inside a fixed-height box rather than cropped to one aspect ratio. */
figure.shot .frame { height: 420px; padding: var(--sp4); background: var(--surfaceSunken); border-bottom: 1px solid var(--border); }
figure.shot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; }
figure.shot figcaption { padding: var(--sp3) var(--sp4) var(--sp4); margin-top: auto; }
figure.shot figcaption b { display: block; font-size:18px;line-height:26px;font-weight:600; margin-bottom: var(--sp1); }
figure.shot figcaption span { color: var(--textSecondary); font-size:16px;line-height:22px;font-weight:400; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp5); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp5); }
.card h3 { font-size:20px;line-height:26px;font-weight:600; margin: 0 0 var(--sp2); }
.card p { margin: 0; color: var(--textSecondary); }
ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp3); max-width: 64ch; }
ol.steps li { position: relative; padding-left: var(--sp10); min-height: 32px; }
ol.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--accent); color: var(--onAccent); display: grid; place-items: center; font-size:18px;line-height:24px;font-weight:600; }
.plain { max-width: 64ch; }
.plain p { margin: 0 0 var(--sp3); }
.plain .big { font-size:28px;line-height:34px;font-weight:700;letter-spacing:-0.2px; margin-bottom: var(--sp3); }
.note { background: var(--surfaceSunken); border-radius: var(--r-md); padding: var(--sp4); color: var(--textSecondary); font-size:16px;line-height:22px;font-weight:400; max-width: 64ch; }
footer.bottom { border-top: 1px solid var(--border); padding: var(--sp8) 0 var(--sp12); color: var(--textMuted); font-size:16px;line-height:22px;font-weight:400; }
footer.bottom .links a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; margin-right: var(--sp4); }
footer.bottom p { margin: 0 0 var(--sp2); max-width: 72ch; }
/* policy pages */
article.doc { padding: var(--sp8) 0 var(--sp12); }
article.doc > * { max-width: 68ch; }
article.doc > .printable { max-width: none; }
article.doc h1 { font-size:36px;line-height:42px;font-weight:700;letter-spacing:-0.4px; margin: 0 0 var(--sp5); }
article.doc h2 { font-size:28px;line-height:34px;font-weight:700;letter-spacing:-0.2px; margin: var(--sp8) 0 var(--sp3); }
article.doc h3 { font-size:20px;line-height:26px;font-weight:600; margin: var(--sp6) 0 var(--sp2); }
article.doc p, article.doc li { margin: 0 0 var(--sp3); }
article.doc ul { padding-left: 1.2em; }
article.doc code { background: var(--surfaceSunken); border-radius: var(--r-sm); padding: 0 4px; font-size: 0.95em; }
article.doc .meta { color: var(--textMuted); font-size:16px;line-height:22px;font-weight:400; margin-bottom: var(--sp6); }
@media (max-width: 600px) {
  .hero { padding-top: var(--sp8); }
  .hero h1 { font-size: 30px; line-height: 36px; }
  figure.shot .frame { height: 320px; }
  /* Screens swipe sideways inside their own strip instead of stacking into a 1,700px column. */
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp3); padding-bottom: var(--sp3); -webkit-overflow-scrolling: touch; }
  .shots figure.shot { flex: 0 0 78%; scroll-snap-align: start; }
  section { padding: var(--sp6) 0; }
  header.top .wrap { flex-wrap: wrap; padding-top: var(--sp2); padding-bottom: var(--sp2); }
  nav.site a { margin-left: 0; margin-right: var(--sp4); }
}

/* ---- the print sheet: gtm/_tools/printsheet.css, shared with the PDFs */
/* The Kehr & Co. print sheet: one stylesheet for the printable templates, wherever they appear.
 *
 *   - gtm/_tools/pdfs.mjs inlines it into the no-signup PDFs (/pdf/<slug>.pdf and -large-print);
 *   - gtm/_tools/site.py appends it to each site's style.css for the on-page template and example.
 *
 * It is the same design as packages/export/src/logic/report.ts: serif title, accent band, tinted
 * pill subtitle, small-caps section headings, tinted table headers, zebra rows, the "Kehr&Co."
 * wordmark top right and "Made by Kehr&Co." in the footer. Edit the look here and nowhere else;
 * re-run `python3 gtm/_tools/site.py && node gtm/_tools/pdfs.mjs && python3 gtm/_tools/site.py`.
 *
 * Everything is scoped to `.ks` (the sheet). Colours are tokens on `.ks`; the per-app accent and
 * its tints come from `data-app`. Sizes are tokens too: the defaults below are the standard PDF
 * (Letter landscape, 10.5pt), `.ks-large` is the large-print PDF, and site.py overrides them for
 * the screen (16px minimum) while browser printing keeps these defaults. */

.ks {
  /* neutral ramp from packages/ui/src/tokens.ts */
  --k-n50: #F7F7F5; --k-n200: #E3E3DF; --k-n300: #CDCDC8; --k-n400: #A8A8A3;
  --k-n600: #5F5F5B; --k-n800: #2C2C2A; --k-n900: #1B1B1A; --k-n950: #111110;
  --k-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --k-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* the per-app accent and its tints (overridden per app below) */
  --k-accent: #1f7a72;
  --k-tint-pill: rgba(31,122,114,0.1); --k-tint-th: rgba(31,122,114,0.09);
  --k-tint-rule: rgba(31,122,114,0.28); --k-tint-thline: rgba(31,122,114,0.3);
  /* sizes: the standard PDF */
  --k-fs: 10.5pt; --k-row: 0.4in; --k-pad: 0; --k-band: 7px;
  --k-head-pad: 12px 0 10px; --k-gap: 12px; --k-brand: 15pt; --k-h1: 23pt; --k-h1-lh: 1.08;
  --k-pill: 9pt; --k-pill-gap: 6px; --k-meta: 8.5pt; --k-h: 9pt; --k-lab: 9pt;
  --k-text-m: 6px 0 8px; --k-block-m: 14px; --k-table-m: 10px; --k-cell: 5px 8px;
  --k-th: 7.75pt; --k-th-ls: 0.6px; --k-foot: 8pt; --k-foot-m: 10px; --k-foot-p: 8px; --k-brand-foot: 10pt;
  --k-fields-gap: 28px; --k-blocks-gap: 36px; --k-twin-gap: 24px;
}
.ks[data-app="symptoms"] { --k-accent: #1f7a72; --k-tint-pill: rgba(31,122,114,0.1); --k-tint-th: rgba(31,122,114,0.09); --k-tint-rule: rgba(31,122,114,0.28); --k-tint-thline: rgba(31,122,114,0.3); }
.ks[data-app="meds"] { --k-accent: #b5532f; --k-tint-pill: rgba(181,83,47,0.1); --k-tint-th: rgba(181,83,47,0.09); --k-tint-rule: rgba(181,83,47,0.28); --k-tint-thline: rgba(181,83,47,0.3); }
.ks[data-app="care"] { --k-accent: #9a6a22; --k-tint-pill: rgba(154,106,34,0.1); --k-tint-th: rgba(154,106,34,0.09); --k-tint-rule: rgba(154,106,34,0.28); --k-tint-thline: rgba(154,106,34,0.3); }
.ks.ks-large {
  --k-fs: 16pt; --k-row: 0.55in;
  --k-head-pad: 14px 0 12px; --k-gap: 16px; --k-brand: 20pt; --k-h1: 30pt;
  --k-pill: 12.5pt; --k-pill-gap: 8px; --k-meta: 11pt; --k-h: 12.5pt; --k-lab: 13pt;
  --k-text-m: 8px 0 10px; --k-block-m: 18px; --k-table-m: 14px; --k-cell: 7px 8px;
  --k-th: 10.5pt; --k-th-ls: 0.3px; --k-foot: 10.5pt; --k-foot-m: 14px; --k-foot-p: 10px; --k-brand-foot: 13pt;
}

.ks, .ks * { box-sizing: border-box; }
.ks {
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  font-family: var(--k-sans); color: var(--k-n950); background: #fff;
  font-size: var(--k-fs); line-height: 1.35; font-variant-numeric: normal;
  border-top: var(--k-band) solid var(--k-accent); padding: var(--k-pad);
  text-align: left;
}
.ks .brand { font-family: var(--k-serif); font-weight: 600; letter-spacing: -0.3px; color: var(--k-n900); white-space: nowrap; }
.ks .brand i { font-style: italic; font-weight: 500; color: var(--k-accent); padding: 0 1px; }

/* header: serif title and the pill on the left, the wordmark and the site on the right */
.ks .ks-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: var(--k-head-pad); margin: 0 0 var(--k-gap); border-bottom: 1px solid var(--k-n300); }
.ks .ks-head .brand { font-size: var(--k-brand); }
.ks .ks-head-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ks .ks-title { font-family: var(--k-serif); font-size: var(--k-h1); line-height: var(--k-h1-lh); font-weight: 600; margin: 0; letter-spacing: -0.5px; color: var(--k-n950); }
.ks .ks-pill { display: inline-block; margin: var(--k-pill-gap) 0 0; padding: 2px 10px; border-radius: 999px; background: var(--k-tint-pill); color: var(--k-accent); font-weight: 600; font-size: var(--k-pill); }
.ks .ks-meta { color: var(--k-n600); font-size: var(--k-meta); white-space: nowrap; }
.ks .ks-intro { margin: 0 0 var(--k-gap); color: var(--k-n600); font-size: var(--k-lab); }
.ks .ks-lp { display: none; }
.ks .ks-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ks.ks-large .ks-lp { display: inline; }

/* small-caps section headings with a tinted rule */
.ks .ks-h { display: flex; align-items: center; gap: 10px; font-family: var(--k-sans); font-size: var(--k-h); line-height: 1.35; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; margin: 0 0 4px; color: var(--k-accent); break-after: avoid; }
.ks .ks-h::after { content: ""; flex: 1; height: 1px; background: var(--k-tint-rule); }

/* fields: a small-caps label and a rule to write on (or, filled in, the value sitting on it) */
.ks .fields { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; column-gap: var(--k-fields-gap); margin: 0 0 var(--k-gap); }
.ks .field { display: flex; align-items: flex-end; gap: 8px; margin: 0; min-height: var(--k-row); break-inside: avoid; }
.ks .field.wide { grid-column: 1 / -1; }
.ks .lab { color: var(--k-n600); font-weight: 600; font-size: var(--k-lab); white-space: nowrap; padding-bottom: 3px; }
.ks .rule { flex: 1; border-bottom: 1px solid var(--k-n400); height: 1px; }
.ks .val { flex: 1; min-width: 0; border-bottom: 1px solid var(--k-n400); padding: 0 2px 2px; color: var(--k-n950); }
.ks .text { margin: var(--k-text-m); line-height: 1.5; }
.ks .text b { color: var(--k-n600); font-size: var(--k-lab); font-weight: 600; }

/* headings with writing lines */
.ks .blocks { display: grid; grid-template-columns: 1fr; column-gap: var(--k-blocks-gap); }
.ks .blocks.cols2 { grid-template-columns: 1fr 1fr; }
.ks .block { break-inside: avoid; margin-bottom: var(--k-block-m); }
.ks .line { height: var(--k-row); border-bottom: 1px solid var(--k-n400); margin: 0; }
.ks .line.val { height: auto; min-height: var(--k-row); display: flex; align-items: flex-end; padding: 4px 2px 3px; line-height: 1.4; }

/* tables: tinted small-caps header, zebra rows, writing rows at --k-row */
.ks table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0 0 var(--k-table-m); border: 0; break-inside: auto; }
/* The frame is drawn on the cells, not the table: a table box border would also paint along any empty space left on a page when a row moves to the next one. */
.ks th:first-child, .ks td:first-child { border-left: 1px solid var(--k-n300); }
.ks th:last-child, .ks td:last-child { border-right: 1px solid var(--k-n300); }
.ks thead th { border-top: 1px solid var(--k-n300); }
.ks thead tr:first-child th:first-child { border-top-left-radius: 7px; } .ks thead tr:first-child th:last-child { border-top-right-radius: 7px; }
.ks tbody tr:last-child td:first-child { border-bottom-left-radius: 7px; } .ks tbody tr:last-child td:last-child { border-bottom-right-radius: 7px; }
.ks table.whole { break-inside: avoid; }
.ks thead { display: table-header-group; }
.ks tr { break-inside: avoid; }
.ks th, .ks td { text-align: left; padding: var(--k-cell); border-bottom: 1px solid var(--k-n200); vertical-align: top; }
.ks td { overflow-wrap: anywhere; }
.ks th { overflow-wrap: normal; hyphens: none; }
.ks .nb { white-space: nowrap; }
.ks th + th, .ks td + td { border-left: 1px solid var(--k-n200); }
.ks tbody tr:last-child td { border-bottom: 1px solid var(--k-n300); }
.ks tbody tr:nth-child(even) td { background: var(--k-n50); }
.ks tbody td { height: var(--k-row); }
.ks th { background: var(--k-tint-th); color: var(--k-accent); font-weight: 700; font-size: var(--k-th); line-height: 1.25; text-transform: uppercase; letter-spacing: var(--k-th-ls); border-bottom: 1px solid var(--k-tint-thline); vertical-align: bottom; }
.ks .ks-swipe { display: none; } /* the phone-only "scroll sideways" hint; the page shows it when a table overflows */
.ks .twin { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--k-twin-gap); align-items: start; break-inside: avoid; }

/* footer: the disclaimer line and "Made by Kehr&Co." */
.ks .ks-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: var(--k-foot-m); padding-top: var(--k-foot-p); border-top: 1px solid var(--k-n300); color: var(--k-n600); font-size: var(--k-foot); line-height: 1.35; break-inside: avoid; }
.ks .ks-foot .made { font-size: var(--k-foot); color: var(--k-n800); white-space: nowrap; }
.ks .ks-foot .made .brand { font-size: var(--k-brand-foot); }

/* ---- printable templates: the sheet on the page (the sheet design is printsheet.css above) */
.printable { margin: var(--sp10) 0; padding: var(--sp5); border: 0; border-radius: var(--r-xl); background: var(--surfaceSunken); }
.printable + .printable { margin-top: var(--sp6); }
.sheet-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp3) var(--sp5); margin: 0 0 var(--sp4); }
.sheet-bar-end { justify-content: flex-end; }
.sheet-bar p { margin: 0; max-width: 60ch; color: var(--textSecondary); font-size: 16px; line-height: 22px; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: var(--sp2); }
.sheet-actions .btn { min-height: 48px; padding: 0 var(--sp5); font-size: 16px; line-height: 22px; gap: var(--sp2); }
.sheet-actions button.btn { font-family: inherit; cursor: pointer; }
.sheet-actions button.btn:not(.quiet) { border: 0; }
.sheet-actions .btn[hidden] { display: none; }
.sheet-actions .btn .ico { width: 18px; height: 18px; flex: none; }
@media screen {
  .printable .ks {
    --k-fs: 17px; --k-row: 46px; --k-band: 8px;
    --k-pad: clamp(24px, 4.5vw, 56px) clamp(18px, 5vw, 64px) clamp(24px, 4vw, 48px);
    --k-head-pad: 0 0 18px; --k-gap: 22px; --k-brand: 22px; --k-h1: clamp(26px, 2.6vw, 34px); --k-h1-lh: 1.12;
    --k-pill: 16px; --k-pill-gap: 10px; --k-meta: 16px; --k-h: 16px; --k-lab: 16px;
    --k-text-m: 8px 0 14px; --k-block-m: 22px; --k-table-m: 18px; --k-cell: 9px 10px;
    --k-th: 16px; --k-th-ls: 0.04em; --k-foot: 16px; --k-foot-m: 18px; --k-foot-p: 14px; --k-brand-foot: 19px;
    --k-fields-gap: 32px; --k-blocks-gap: 40px; --k-twin-gap: 24px;
    max-width: 1056px; margin: 0 auto; border-radius: 4px;
    box-shadow: 0 1px 2px rgba(17,17,16,.08), 0 6px 18px rgba(17,17,16,.08), 0 22px 48px -18px rgba(17,17,16,.22);
  }
  /* Letter landscape from the width where the sheet reads as a page; fluid below it. */
  @media (min-width: 1100px) { .printable .ks { aspect-ratio: 11 / 8.5; } }
  .printable .ks .ks-pill { padding: 3px 12px; }
  .printable .ks th { line-height: 1.2; }
  /* On screen the browser sizes the columns: the PDF's widths still apply where they fit, and a
     header word never splits. A table wider than the sheet scrolls inside it. */
  .printable .ks table { table-layout: auto; }
  .printable .ks td { overflow-wrap: break-word; }
  .printable .ks .ks-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .printable .ks .ks-scroll:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; }
  .printable .ks .ks-tw { position: relative; }
  .printable .ks .ks-tw.overflows .ks-swipe { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--k-n600); font-size: 16px; line-height: 22px; }
  .printable .ks .ks-tw.overflows .ks-swipe::after { content: "\2192"; color: var(--k-accent); font-weight: 700; }
  .printable .ks .ks-tw.overflows .ks-scroll { padding-bottom: 6px; }
  .printable .ks .ks-tw.overflows::after { content: ""; position: absolute; top: 30px; right: 0; bottom: 6px; width: 28px; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), rgba(17,17,16,.10)); border-radius: 0 7px 7px 0; }
  .printable .ks .ks-scroll::-webkit-scrollbar { height: 8px; }
  .printable .ks .ks-scroll::-webkit-scrollbar-thumb { background: var(--k-n300); border-radius: 8px; }
}
@media screen and (max-width: 760px) {
  .printable { margin: var(--sp8) calc(-1 * var(--sp5)); padding: var(--sp4) var(--sp3); border-radius: 0; }
  .sheet-actions { width: 100%; }
  .sheet-actions .btn { flex: 1 1 auto; }
  .printable .ks { --k-row: 44px; --k-fs: 17px; }
  .printable .ks .ks-head { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .printable .ks .ks-head-right { flex-direction: row; align-items: baseline; gap: 10px; text-align: left; }
  .printable .ks .fields, .printable .ks .blocks.cols2, .printable .ks .twin { grid-template-columns: 1fr; }
  /* On a phone each field is its label over a full-width rule, so a long label never squeezes it. */
  .printable .ks .field { display: grid; grid-template-columns: 1fr; gap: 2px; min-height: 0; padding-top: 10px; }
  .printable .ks .lab { white-space: normal; padding-bottom: 0; }
  .printable .ks .field .rule { height: 34px; }
  .printable .ks .field .val { padding: 6px 2px 6px; }
  /* On a phone a wide table keeps a readable width and scrolls inside the sheet rather than
     crushing every column; no word is ever split across lines. */
  .printable .ks .ks-tw[data-cols="5"] table { min-width: 520px; }
  .printable .ks .ks-tw[data-cols="6"] table { min-width: 620px; }
  .printable .ks .ks-tw[data-cols="7"] table { min-width: 720px; }
  .printable .ks .ks-tw[data-cols="8"] table { min-width: 820px; }
  .printable .ks .ks-tw[data-cols="9"] table { min-width: 900px; }
  .printable .ks .ks-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media print {
  /* Only the sheet pages get the landscape page and the running footer (a named page); every
     other page prints as the browser would. */
  @page sheet {
    size: Letter landscape; margin: 0.5in;
    @bottom-left { content: "Made by Kehr&Co."; font: 7.5pt -apple-system, "Helvetica Neue", Arial, sans-serif; color: #5F5F5B; }
    @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 7.5pt -apple-system, "Helvetica Neue", Arial, sans-serif; color: #5F5F5B; }
  }
  header.top, footer.bottom, nav, .no-print, .cta-row, .madeby, .downloads, .sheet-bar { display: none !important; }
  html, body { background: #fff !important; color: #000; }
  body.has-sheet main.wrap { max-width: none; padding: 0; }
  body.has-sheet article.doc { padding: 0; }
  body.has-sheet article.doc > *:not(.printable) { display: none !important; }
  .printable { page: sheet; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  /* Only the blank template prints, unless the example's own Print button asked for the example. */
  html:not([data-print="example"]) .printable#example { display: none !important; }
  html[data-print="example"] .printable#template { display: none !important; }
  .printable .ks { box-shadow: none; border-radius: 0; max-width: none; margin: 0; }
  .printable .ks .ks-scroll { overflow: visible; }
  /* The running footer in the page margin says "Made by Kehr&Co." and the page number. */
  .printable .ks .ks-foot .made { display: none; }
}
/* A black-and-white printer: the accent turns to black and the tints to light grey, so the
   band, the headings and the table header still read as structure. */
@media print and (monochrome) {
  .ks[data-app] { --k-accent: #000; --k-tint-pill: #fff; --k-tint-th: #ececec; --k-tint-rule: #999; --k-tint-thline: #777; }
  .ks .ks-pill { box-shadow: inset 0 0 0 1px #000; }
}
@media print {
  /* each sheet's rows at the height its PDF was fitted to (gtm/_tools/printsheet-fit.json) */
  .printable .ks[data-fit="20"] { --k-row: 0.20in; }
  .printable .ks[data-fit="22"] { --k-row: 0.22in; }
  .printable .ks[data-fit="24"] { --k-row: 0.24in; }
  .printable .ks[data-fit="26"] { --k-row: 0.26in; }
  .printable .ks[data-fit="28"] { --k-row: 0.28in; }
  .printable .ks[data-fit="30"] { --k-row: 0.30in; }
  .printable .ks[data-fit="32"] { --k-row: 0.32in; }
  .printable .ks[data-fit="34"] { --k-row: 0.34in; }
  .printable .ks[data-fit="36"] { --k-row: 0.36in; }
  .printable .ks[data-fit="38"] { --k-row: 0.38in; }
  .printable .ks[data-fit="40"] { --k-row: 0.40in; }
  .printable .ks[data-fit="42"] { --k-row: 0.42in; }
  .printable .ks[data-fit="44"] { --k-row: 0.44in; }
  .printable .ks[data-fit="46"] { --k-row: 0.46in; }
  .printable .ks[data-fit="48"] { --k-row: 0.48in; }
  .printable .ks[data-fit="50"] { --k-row: 0.50in; }
  .printable .ks[data-fit="52"] { --k-row: 0.52in; }
  .printable .ks[data-fit="54"] { --k-row: 0.54in; }
  .printable .ks[data-fit="56"] { --k-row: 0.56in; }
  .printable .ks[data-fit="58"] { --k-row: 0.58in; }
  .printable .ks[data-fit="60"] { --k-row: 0.60in; }
}