/* Landscape letter. Sizes are in "u" = 1/1056 of the page width (1u = 1px on an 11in page at 96 dpi). */
html, body { margin: 0; padding: 0; background: #fff; }
:root {
  --u: calc(100vw / 1056);
  --ink-1: #16283c; --ink-2: #2c3e50; --ink-3: #5a6b7c; --ink-deep: #0b1b2b;
  --blue-1: #29a8e0; --blue-2: #1b8fcb; --tint: #e9f3fb; --hair: #d3e2ee; --on-dark-3: #a9c2d6;
  font-family: Barlow, Helvetica, Arial, sans-serif; color: var(--ink-1);
  --rp: 1.5; --fs: 9;
}
.page { box-sizing: border-box; width: 100vw; height: calc(816 * var(--u)); display: flex; flex-direction: column; overflow: hidden; break-after: page; page-break-after: always; background: #fff; }
.page:last-child { break-after: auto; page-break-after: auto; }
.page > * { flex-shrink: 0; }

.head { background: var(--ink-deep); color: #fff; padding: calc(13 * var(--u)) calc(38 * var(--u)) calc(11 * var(--u)); display: flex; align-items: flex-end; justify-content: space-between; gap: calc(24 * var(--u)); }
.head-title { font-size: calc(26 * var(--u)); font-weight: 800; letter-spacing: -0.02em; }
.head-kicker { margin-top: calc(5 * var(--u)); font-weight: 700; font-size: calc(10 * var(--u)); letter-spacing: 0.24em; color: var(--blue-1); text-transform: uppercase; }
.head-stamp { font-weight: 700; font-size: calc(8.5 * var(--u)); letter-spacing: 0.28em; color: var(--on-dark-3); text-transform: uppercase; text-align: right; }

.eyebrow { font-weight: 700; font-size: calc(9 * var(--u)); letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue-1); }
.top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: calc(28 * var(--u)); padding: calc(12 * var(--u)) calc(38 * var(--u)) 0; }
.kv { display: flex; flex-direction: column; margin-top: calc(6 * var(--u)); }
.kv-row { display: flex; justify-content: space-between; gap: calc(10 * var(--u)); padding: calc(3 * var(--u)) 0; border-bottom: 1px solid var(--hair); font-size: calc(10.5 * var(--u)); }
.kv-k { color: var(--ink-2); }
.kv-v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.basis { font-size: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); }
.basis thead tr, .sched thead tr { font-weight: 700; font-size: calc(7.5 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--ink-deep); }
.basis th { text-align: right; padding: calc(5 * var(--u)); font-weight: 700; }
.basis th:first-child { text-align: left; padding-left: calc(8 * var(--u)); }
.basis th.dt { text-align: left; }
.basis th:last-child { padding-right: calc(8 * var(--u)); }
.basis td { padding: calc(3 * var(--u)) calc(5 * var(--u)); border-bottom: 1px solid var(--hair); text-align: right; }
.basis td:first-child { text-align: left; padding-left: calc(8 * var(--u)); }
.basis td.dt { text-align: left; color: var(--ink-2); }
.basis td:last-child { padding-right: calc(8 * var(--u)); }
.basis .letter { font-weight: 800; color: var(--blue-1); margin-right: calc(6 * var(--u)); }
.basis tr.total { font-weight: 700; background: var(--tint); }
.basis tr.pct { font-weight: 600; }

.sched-wrap { padding: calc(12 * var(--u)) calc(38 * var(--u)) 0; }
.sched { font-size: calc(var(--fs) * var(--u)); }
.sched th { text-align: right; font-weight: 700; padding: calc(2 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)); }
.sched thead tr:first-child th { padding-top: calc(5 * var(--u)); padding-bottom: calc(2 * var(--u)); text-align: center; }
.sched th.l { text-align: left; padding-left: calc(8 * var(--u)); }
.sched th.grp { color: var(--blue-1); border-left: 1px solid var(--ink-2); }
.sched th.det { border-left: 1px solid var(--ink-2); padding-right: calc(8 * var(--u)); }
.sched th.bl { border-left: 1px solid var(--ink-2); }
.sched th.end { padding-right: calc(8 * var(--u)); }
.sched td { padding: calc(var(--rp) * var(--u)) calc(4 * var(--u)); border-bottom: 1px solid var(--hair); text-align: right; }
.sched td:first-child { text-align: left; padding-left: calc(8 * var(--u)); white-space: nowrap; }
.sched td.mute { color: var(--ink-3); }
.sched td.b { font-weight: 700; }
.sched td.end { padding-right: calc(8 * var(--u)); }
.sched tr.catch { background: var(--tint); font-weight: 600; }
.sched tr.total { background: var(--tint); font-weight: 700; }
.sched td.neg { color: var(--ink-3); }

.disclaimer { margin: auto calc(38 * var(--u)) 0; padding-top: calc(8 * var(--u)); font-size: calc(9 * var(--u)); line-height: 1.4; color: var(--ink-3); }
.disclaimer b { color: var(--ink-2); }
.foot { border-top: 1px solid var(--hair); margin-top: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(38 * var(--u)); display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: calc(8.5 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
/* Project tier badge: Core (outline), Standard (blue), Premium (navy). On the dark header they invert. */
.tier { display: inline-block; font-weight: 800; font-size: calc(8 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(10 * var(--u)); border: 1px solid; white-space: nowrap; vertical-align: 1px; }
.tier-core { color: #5a6b7c; border-color: #5a6b7c; background: #fff; }
.tier-standard { color: #1b8fcb; border-color: #1b8fcb; background: #e9f3fb; }
.tier-premium { color: #fff; border-color: #0b1b2b; background: #0b1b2b; }
.tier-other { color: #16283c; border-color: #16283c; background: #fff; }
.head .tier { margin-left: calc(10 * var(--u)); }
.head .tier-core { color: #a9c2d6; border-color: #a9c2d6; background: transparent; }
.head .tier-standard { color: #0b1b2b; border-color: #29a8e0; background: #29a8e0; }
.head .tier-premium { color: #0b1b2b; border-color: #fff; background: #fff; }
.head .tier-other { color: #fff; border-color: #fff; background: transparent; }
.tier + .tier { margin-left: calc(6 * var(--u)); }
.head .tier + .tier { margin-left: calc(6 * var(--u)); }
.foot-right { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.foot-partner { height: calc(18 * var(--u)); width: auto; display: block; }
.foot-logo { height: calc(18 * var(--u)); width: auto; display: block; }
@media print { @page { margin: 0; } }

/* Safety net: a long schedule with several studies gets tighter rows. */
.page.dense { --rp: 1; --fs: 8.5; }
.page.dense .top { padding-top: calc(8 * var(--u)); }
.page.sparse { --rp: 0.5; --fs: 8; }
.page.sparse .kv-row { padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); }

.sched tr.collapsed td { font-style: italic; }

/* The PDF service prints the page number 39-59 px above the sheet bottom. The footer band is tall enough to hold it (the
   logo and copyright stay at the bottom), so the number never lands on content above the band. */
.foot { box-sizing: border-box; min-height: calc(62 * var(--u)); padding: 0 calc(38 * var(--u)) calc(10 * var(--u)); align-items: flex-end; }
.foot-logo, .foot-partner { height: calc(30 * var(--u)); }

/* the header text column can shrink, so a long name is fitted (fitHeads in app.js) instead of widening the page */
.head > div:first-child { min-width: 0; flex: 1 1 auto; }

.head-stamp { max-width: 38%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* a long client name takes two lines at most */

/* long unbroken text (a very long name or URL) breaks instead of widening the page */
.page { overflow-wrap: anywhere; }

/* ---- Revision: fixed year and without-study columns (grey), with-study columns light blue, benefit columns left white ---- */
.sched { table-layout: fixed; }
.sched col.c-year { width: calc(112 * var(--u)); }
.sched col.c-wo { width: calc(86 * var(--u)); }
.sched td.g { background: #e6eaee; }
.sched td.w { background: #dbecf9; }
.sched td.b2 { font-weight: 700; }
.sched td.d { background: #fff; }
.sched td.d.b, .sched td.d.end { color: var(--ink-1); }
.sched td.end { font-weight: 700; color: var(--blue-2); }
.sched td.y { white-space: nowrap; font-weight: 600; }
.sched td.y .ytag { display: inline-block; margin-left: calc(4 * var(--u)); font-size: calc(6 * var(--u)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-2); }
.sched th.g { background: #3b4a5a; }
.sched tr.catch, .sched tr.total { background: transparent; }
.sched tr.catch td.y { color: var(--ink-1); }
.sched tr.total td { font-weight: 700; border-top: 1px solid var(--ink-1); }
.sched tr.total td.g { background: #d7dce2; }
.sched tr.total td.w { background: #c8e0f3; }
.sched th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
.sched thead tr:first-child th.det { background: var(--ink-1); color: #fff; }

/* year and without-study columns white; the detail of benefit columns grey (with-study stays light blue) */
.sched td.g { background: #fff; }
.sched td.d { background: #e6eaee; }
.sched th.g { background: transparent; }
.sched tr.total td.g { background: #fff; }
.sched tr.total td.d { background: #d7dce2; }
.sched td.g.mute { color: var(--ink-3); }

/* ---- Brand fonts: Poppins body, Montserrat 600 labels and table headers, League Spartan bold headlines; Barlow stays for figures and the client name. */
html, body, button, input, select, textarea { font-family: Poppins, Helvetica, Arial, sans-serif; }
.head-title { font-family: "League Spartan", "Poppins", Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.head-kicker { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.head-stamp { font-family: Barlow, Helvetica, Arial, sans-serif; }
.eyebrow { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.kv-v { font-family: Barlow, Helvetica, Arial, sans-serif; }
table td:not(:first-child) { font-family: Barlow, Helvetica, Arial, sans-serif; }
.basis thead tr, .sched thead tr { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.basis th { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.basis th:first-child { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.basis th.dt { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.basis th:last-child { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.sched th { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.sched thead tr:first-child th { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.sched th.l { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.sched th.grp { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.sched th.det { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.sched th.bl { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.sched th.end { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.foot { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.tier { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.head-stamp { font-family: Barlow, Helvetica, Arial, sans-serif; }
.sched td.y .ytag { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.sched th.g { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.sched th { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.sched thead tr:first-child th.det { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.sched th.g { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }

/* ---- Brand colors: deep navy #002e5b, slate navy #283a54, brand blue #2381bf, medium blue #0b5697. */
:root { --ink-1: #002e5b; --ink-2: #283a54; --ink-deep: #002e5b; --blue-1: #2381bf; --blue-2: #0b5697; }
.tier-standard { color: #0b5697; border-color: #0b5697; }
.tier-premium { border-color: #002e5b; background: #002e5b; }
.tier-other { color: #002e5b; border-color: #002e5b; }
.head .tier-standard { color: #002e5b; border-color: #2381bf; background: #2381bf; }
.head .tier-premium { color: #002e5b; }
