@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-primary: #0f6e52;
  --color-accent: #2fbf8c;
  --color-ink: #191b26;
  --color-body: #3b3f4e;
  --color-muted: #6b7081;
  --color-bg: #f4f5f8;
  --color-surface: #ffffff;
  --color-border: #e4e6ec;
  --color-tint: #f6f7f9;
  --color-dark: #0a4d39;
  --color-dark-2: #0e634a;
  --color-on-dark: #eceef3;
  --color-on-dark-muted: #bcd6cf;
  --color-on-dark-accent: #2fbf8c;
  --color-primary-soft: #e7f2ee;
  --color-primary-strong: #0b5a43;
  --color-success: #0f6e52;
  --color-warn: #a15c07;
  --color-warn-soft: #fff4df;
  --color-danger: #b42318;
  --color-danger-soft: #fdecea;
  --color-info: #1d4ed8;
  --color-info-soft: #eaf0ff;
  --color-draft: #fff8db;
  --color-bar: #2563eb;
  --color-bar-strong: #1d4ed8;
  --color-bar-soft: #dbeafe;
  --color-badge: #d97706;
  --color-accent-soft: #e6f7f1;
  --color-link: #0f6e52;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-raised: 0 18px 40px -18px rgba(16, 24, 40, 0.28);
  --space-page: 16px;
  --space-page-wide: 40px;
  --space-gap: 16px;
  --space-gap-wide: 24px;
  --size-content: 1120px;
  --size-prose: 760px;
}

/* base/base.css */
/* Document typography for html, pdf and slides. Mobile first: phone sizes are the
   defaults, wider screens adjust with min-width queries. Only theme variables are used. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.doc {
  max-width: var(--size-content);
  margin: 0 auto;
  padding: 24px var(--space-page) 48px;
}
@media (min-width: 768px) {
  .doc { padding: 48px var(--space-page-wide) 72px; }
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-ink);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 1.6em 0 0.5em;
}
h1 { font-size: 2rem; letter-spacing: -0.035em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }
h5, h6 { font-size: 1rem; font-weight: 700; }
@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 1.9rem; }
  h3 { font-size: 1.3rem; }
}
.doc > :first-child, main > :first-child { margin-top: 0; }

.header-section-number { color: var(--color-primary); margin-right: 0.35em; }

p, ul, ol, dl, pre, blockquote, .table-wrap { margin: 0 0 1em; }
ul, ol { padding-left: 1.4em; }
li { margin: 0.25em 0; }
li > ul, li > ol { margin: 0.25em 0; }

a { color: var(--color-link); text-underline-offset: 0.15em; }
strong { color: var(--color-ink); font-weight: 700; }
img { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--color-border); margin: 2.2em 0; }

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-tint);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.08em 0.35em;
}
pre {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

/* eyebrow + lead: `# Title {eyebrow="Website packages"}` and `{.lead}` before a paragraph */
.eyebrow {
  margin: 2em 0 0.4em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 0; }
.lead { font-size: 1.08rem; color: var(--color-muted); max-width: 52em; }
@media (min-width: 768px) {
  .lead { font-size: 1.2rem; }
}
.center { text-align: center; }
.muted, .small { color: var(--color-muted); }
.small { font-size: 0.875rem; }

/* base/components.css */
/* Components shared by every output (mkdocs too): tables, badges, callouts, drafts,
   icons, page breaks. Blocks add their own styles in their style.css. */

/* ---------- tables (styled like the build-your-own tables) ---------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  line-height: 1.45;
}
.table-wrap th, .table-wrap td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap th {
  background: var(--color-dark);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.table-wrap td strong { color: var(--color-ink); }
@media (min-width: 768px) {
  .table-wrap th, .table-wrap td { padding: 16px 20px; }
}
/* `{.plain}` before a table: light header; `{.zebra}`: striped rows; `{.compact}`: tighter */
.table-wrap table.plain th { background: var(--color-tint); color: var(--color-muted); }
.table-wrap table.zebra tbody tr:nth-child(even) td { background: var(--color-tint); }
.table-wrap table.compact th, .table-wrap table.compact td { padding: 8px 12px; }

/* ---------- badges: [Recommended]{.badge .success} ---------- */
.badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-pill);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: 0.15em;
  white-space: nowrap;
  background: var(--color-tint);
  color: var(--color-body);
}
.badge.success, .badge.recommended { background: var(--color-primary-soft); color: var(--color-primary); }
.badge.solid { background: var(--color-primary); color: #fff; }
.badge.dark { background: var(--color-dark); color: #fff; }
.badge.warn { background: var(--color-warn-soft); color: var(--color-warn); }
.badge.danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge.info { background: var(--color-info-soft); color: var(--color-info); }
.badge.outline { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.badge.lower { text-transform: none; letter-spacing: 0; font-size: 0.85em; }

/* chips: [then ₹6,000 / year]{.chip} */
.chip {
  display: inline-block;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-sm);
  background: var(--color-tint);
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.92em;
}
.chip.success { background: var(--color-primary-soft); color: var(--color-primary); }

/* highlighted text: [important]{.mark} */
.mark { background: var(--color-primary-soft); color: var(--color-primary-strong); padding: 0 0.2em; border-radius: 4px; }

/* ---------- note boxes: blockquotes, ::: {.callout}, ::: callout ---------- */
blockquote, .callout {
  margin: 1.2em 0;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}
blockquote { border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
blockquote > :last-child, .callout > :last-child { margin-bottom: 0; }
blockquote strong, .callout strong { color: inherit; }

/* ---------- drafts kept with export.drafts=flag ---------- */
.draft {
  background: var(--color-draft);
  border-left: 4px dashed #d97706;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.6em 0.9em;
  margin: 1em 0;
}
.draft::before {
  content: "DRAFT";
  display: block;
  margin-bottom: 0.4em;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #b45309;
}
.draft[data-note]::before { content: "DRAFT \00B7  " attr(data-note); }
.draft > :last-child { margin-bottom: 0; }
.draft-inline { background: #fde68a; border-bottom: 1px dashed #d97706; padding: 0 0.15em; }

/* ---------- icons (inline SVG from blocks) ---------- */
.icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.icon svg { width: 100%; height: 100%; }

/* ---------- page breaks: ::: {.page-break} ::: (pdf only) ---------- */
.page-break { display: none; }

/* ---------- info tips: (i) button + popover (interactive HTML, see web.js) ---------- */
.tip { display: inline-block; vertical-align: middle; margin-left: 0.3em; line-height: 1; }
.tip-btn {
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.62em;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.65;
  cursor: pointer;
  vertical-align: middle;
}
.tip-btn:hover, .tip-btn[aria-expanded="true"] { opacity: 1; }
.tip-pop {
  position: fixed;
  z-index: 40;
  min-width: 280px;
  max-width: min(92vw, 440px);
  padding: 12px 14px 10px;
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
}
.tip-pop[hidden] { display: none; }
.tip-title { margin: 0; font-weight: 700; color: var(--color-ink); }
.tip-pop table { width: 100%; margin: 8px 0 0; border-collapse: collapse; font-size: 0.85rem; }
.tip-pop th, .tip-pop td { padding: 5px 6px; border-bottom: 1px solid var(--color-border); text-align: right; white-space: nowrap; color: var(--color-ink); }
.tip-pop th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.tip-pop th:first-child, .tip-pop td:first-child { text-align: left; }
.tip-pop tbody tr:last-child td { border-bottom: 0; }
.tip-pop tr.is-current td { font-weight: 700; color: var(--color-primary); }
.tip-pop td:last-child { font-weight: 700; }
.tip-pop p { margin: 0; }
/* text hints: a compact dark tooltip, not a card */
.tip-pop.tip-text {
  min-width: 0;
  max-width: min(84vw, 280px);
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-dark);
  color: var(--color-on-dark);
  box-shadow: 0 6px 18px -6px rgba(16, 24, 40, 0.35);
  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 500;
}
.tip-pop.tip-text strong, .tip-pop.tip-text a { color: #fff; }
.tip-hint { margin-left: 0.35em; }
.tip[hidden] { display: none; }
.tip-hint .tip-btn { font-size: 0.7rem; color: var(--color-muted); }

/* ---------- heading illustration: {image="..."} on a heading puts eyebrow + title in a row with the art ---------- */
.heading-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 3em; }
.heading-text { flex: 1 1 auto; min-width: 0; }
.heading-row .eyebrow { margin-top: 0; }
.heading-art { flex: none; width: min(36%, 340px); max-height: 170px; object-fit: contain; border-radius: var(--radius-lg); }   /* whole illustration, never cropped */
@media (max-width: 759px) { .heading-art { display: none; } }

/* ---------- detail level (interactive HTML): the pinned control and what each level hides ---------- */
.detail-level {
  position: fixed;
  top: 62px;              /* below the site header */
  right: 16px;
  z-index: 60;
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}
.detail-level button {
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.detail-level button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
/* settings: the gear on the control and its "Packages shown" panel */
.detail-level .detail-gear { display: inline-flex; align-items: center; padding: 6px 9px; color: var(--color-muted); }
.detail-level .detail-gear[aria-expanded="true"] { background: var(--color-tint); color: var(--color-ink); }
.settings-pop {
  position: fixed;
  top: 106px;
  right: 16px;
  z-index: 61;
  min-width: 230px;
  padding: 12px 14px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}
.settings-pop[hidden] { display: none; }
.settings-title { margin: 0 0 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.settings-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.9rem; font-weight: 600; color: var(--color-ink); cursor: pointer; }
.settings-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.settings-row input:disabled { cursor: default; opacity: 0.6; }
.is-plan-hidden { display: none !important; }
/* rows above the level are hidden, except in a custom-mix step the visitor unfolded */
html[data-detail="1"] [data-level="2"]:not([data-unfolded]), html[data-detail="1"] [data-level="3"]:not([data-unfolded]),
html[data-detail="2"] [data-level="3"]:not([data-unfolded]) { display: none !important; }
html[data-detail="1"] .tip-hint, html[data-detail="1"] .byo-details, html[data-detail="1"] .badge-always,
html[data-detail="1"] .calc-option-details, html[data-detail="1"] .calc-option-always,
html[data-detail="2"] .byo-details, html[data-detail="2"] .calc-option-details { display: none !important; }
/* level 1 also hides the yearly fees and the descriptions: package summaries, section leads,
   compare notes and the "then" chips, item descriptions, the yearly rows of the totals */
html[data-detail="1"] .pkg-then, html[data-detail="1"] .pkg-price .tip, html[data-detail="1"] .pkg-highlights, html[data-detail="1"] .lead,
html[data-detail="1"] .pkg-breakdown, html[data-detail="2"] .pkg-breakdown,
html[data-detail="1"] .cmp-then, html[data-detail="1"] .cmp-note, html[data-detail="1"] .cmp-years,
html[data-detail="1"] .cmp-sticky-plan strong,
html[data-detail="1"] .byo-desc-inline, html[data-detail="1"] .byo-table .byo-desc, html[data-detail="1"] .byo-req-desc,
html[data-detail="1"] .calc-total-then, html[data-detail="1"] .calc-bar-then { display: none !important; }
@media (max-width: 759px) {
  .detail-level { top: auto; bottom: 74px; right: 10px; }   /* above the sticky total bar */
  .settings-pop { top: auto; bottom: 120px; right: 10px; }
  .detail-level button { padding: 5px 9px; font-size: 0.72rem; }
}

/* block packages/style.css */
/* Package cards: name, summary, big first-year price and the yearly chip. A tap on the card
   opens its highlights, breakdown and button. Phones: one column, recommended first. */
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-gap);
  margin: 24px 0 18px;
  align-items: stretch;   /* equal heights: prices, chips and chevrons line up across cards */
}
.pkg-card {
  position: relative;
  container-type: inline-size;   /* narrow cards (four columns) stack the tile above the name */
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  break-inside: avoid;
}
.pkg-card.is-recommended {
  order: -1;
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-raised);
  margin-top: 10px;
  background: color-mix(in srgb, var(--color-primary-soft) 45%, var(--color-surface));
}
.pkg-badge .icon { width: 0.9em; height: 0.9em; margin-right: 5px; vertical-align: -0.1em; }
.pkg-badge .icon svg { width: 100%; height: 100%; }
.pkg-badge {
  position: absolute;
  top: 0;
  left: 22px;
  transform: translateY(-50%);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-badge);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 1;
}

.pkg-card-head { position: relative; display: flex; flex-direction: column; flex: 0 0 auto; padding: 22px 22px 18px; }
/* all cards collapsed: the heads stretch so prices, chips and chevrons line up at the bottom;
   once a card is open, heads keep their natural height and collapsed cards sit at the top */
.pkg-grid:not(.has-open) .pkg-card-head { flex: 1 1 auto; }
.pkg-grid.has-open .pkg-card:not(.is-open) { align-self: start; }
.pkg-card-head[role="button"] { cursor: pointer; padding-bottom: 30px; }
.pkg-card-head[role="button"]:hover { background: var(--color-tint); border-radius: var(--radius-lg); }
.pkg-card.is-open .pkg-card-head[role="button"] { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.pkg-card-head:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* icon tile beside the name and summary */
.pkg-head-row { display: flex; align-items: flex-start; gap: 14px; }
.pkg-head-text { flex: 1 1 auto; min-width: 0; }
.pkg-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary); }
.pkg-icon .icon, .pkg-icon svg { width: 26px; height: 26px; display: block; }
.is-recommended .pkg-icon { background: var(--color-surface); }
@container (max-width: 300px) {
  .pkg-head-row { flex-direction: column; gap: 12px; }
}
.pkg-name { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }
.is-recommended .pkg-name { color: var(--color-primary); }
.pkg-summary { margin: 4px 0 0; color: var(--color-muted); font-size: 0.95rem; line-height: 1.45; }
/* the amount with the "first year" pill beside it (+ the (i)); pushed to the bottom of the head */
.pkg-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: auto 0 0; padding-top: 18px; }
.pkg-price-meta { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pkg-price-meta:empty { display: none; }
.pkg-pill { display: inline-block; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); font-size: 0.8rem; font-weight: 700; line-height: 1.3; }
.is-recommended .pkg-pill { background: var(--color-surface); }
.pkg-amount { font-size: 2.3rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--color-ink); }
.is-recommended .pkg-amount { color: var(--color-primary); }
.pkg-period:not(.pkg-pill) { color: var(--color-muted); font-size: 0.92rem; }
.pkg-price .tip { color: var(--color-muted); }
.pkg-then {
  display: inline-block;
  align-self: flex-start;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-tint);
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.is-recommended .pkg-then { background: var(--color-surface); color: var(--color-primary); }

.pkg-card-chevron {
  position: absolute;
  right: 22px;
  bottom: 14px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.pkg-card.is-open .pkg-card-chevron { transform: rotate(225deg); bottom: 10px; }

/* open cards: highlights at the top, breakdown + button pinned to the bottom of the card */
.pkg-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0 22px 20px; border-top: 1px solid var(--color-border); }
.pkg-card-body[hidden] { display: none; }
.pkg-highlights { list-style: none; margin: 16px 0 0; padding: 0; }
.pkg-highlights li { display: flex; gap: 10px; margin: 0 0 9px; line-height: 1.4; color: var(--color-ink); }
.pkg-hl { display: flex; flex-direction: column; min-width: 0; }
.pkg-note { margin-top: 1px; color: var(--color-muted); font-size: 0.86em; line-height: 1.35; }
.pkg-highlights .icon { color: var(--color-primary); margin-top: 0.05em; flex: none; }
/* breakdown + button sit in a footer that takes the free space: buttons line up across cards */
.pkg-card-foot { display: flex; flex-direction: column; margin-top: auto; padding-top: 14px; }
.pkg-breakdown { margin: 0; padding-top: 14px; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.82rem; }
.pkg-highlights { margin-bottom: 0; }
.pkg-cta {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-dark);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pkg-breakdown + .pkg-cta { margin-top: 14px; }
.is-recommended .pkg-cta { background: var(--color-primary); }
.pkg-cta:hover { filter: brightness(1.1); }

@media (min-width: 760px) {
  .pkg-grid { grid-template-columns: repeat(min(var(--pkg-count), 2), 1fr); gap: var(--space-gap-wide); }
  .pkg-card.is-recommended { order: 0; margin-top: 0; }
  .pkg-card-head { padding: 28px 26px 22px; }
  .pkg-card-head[role="button"] { padding-bottom: 32px; }
  /* two lines reserved for the name and the summary so the prices sit at one height */
  .pkg-name { min-height: 2.4em; }
  .pkg-summary:not([hidden]) { min-height: 2.9em; }
  .pkg-card-body { padding: 0 26px 24px; }
  .pkg-amount { font-size: 2.6rem; }
}
@media (min-width: 1100px) {
  .pkg-grid { grid-template-columns: repeat(var(--pkg-count), 1fr); }
}
.pkg-from { font-size: 0.5em; font-weight: 600; letter-spacing: 0; opacity: 0.75; }

/* perks strip under the cards: what every package includes */
.pkg-perks { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 28px; padding: 14px 18px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.pkg-perks li { display: inline-flex; align-items: center; gap: 10px; color: var(--color-ink); font-weight: 600; font-size: 0.92rem; }
.pkg-perks .icon { color: var(--color-primary); display: inline-flex; }
@media (min-width: 760px) {
  .pkg-perks { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 0; padding: 14px 0; }
  .pkg-perks li { padding: 0 22px; }
  .pkg-perks li + li { border-left: 1px solid var(--color-border); }
}

/* block chooser/style.css */
/* "Not sure which to choose?" row (icon, title, lead, WhatsApp button) with the question
   tiles beneath. Interactive HTML at Simple folds the tiles under the row. */
.chooser {
  margin: 22px 0 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  break-inside: avoid;
}
.chooser-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; }
.chooser-toggle {
  display: flex;
  flex: 1 1 240px;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: default;
}
.chooser-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary); }
.chooser-icon .icon, .chooser-icon svg { width: 22px; height: 22px; display: block; }
.chooser-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.chooser-title { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--color-ink); }
.chooser-lead { color: var(--color-muted); font-size: 0.92rem; line-height: 1.4; }
.chooser-chevron { display: none; flex: none; width: 10px; height: 10px; margin: 0 6px 4px 0; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: rotate(45deg); transition: transform 0.2s; }
.chooser-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.chooser-cta .icon { display: inline-flex; }
.chooser-cta .icon svg { width: 18px; height: 18px; }
a.chooser-cta:hover { filter: brightness(1.08); text-decoration: none; }
.chooser-body { padding: 0 18px 18px; }
.chooser-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.chooser-item { padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-tint); }
.chooser-question { margin: 0 0 6px; color: var(--color-body); line-height: 1.45; }
.chooser-answer { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 700; text-decoration: none; }
a.chooser-answer:hover { text-decoration: underline; }
@media (min-width: 760px) {
  .chooser-row { padding: 18px 22px; }
  .chooser-title { font-size: 1.2rem; }
  .chooser-body { padding: 0 22px 22px; }
  .chooser-grid { grid-template-columns: repeat(min(var(--chooser-count), 3), 1fr); gap: 14px; }
  .chooser-item { padding: 16px 18px; }
}

/* Simple: the row toggles the tiles; the other levels always show them */
html[data-detail="1"] .chooser-toggle { cursor: pointer; }
html[data-detail="1"] .chooser-chevron { display: inline-block; }
html[data-detail="1"] .chooser.is-open .chooser-chevron { transform: rotate(225deg); margin-bottom: -2px; }
html[data-detail="1"] .chooser:not(.is-open) .chooser-body { display: none; }

/* block compare/style.css */
/* Comparison matrix. Phones: scrolls sideways with the feature column pinned. */
.cmp {
  margin: 28px 0 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: visible;   /* the header strip sticks to the viewport; .cmp-scroll does the clipping */
}
.cmp-scroll { overflow-x: auto; padding: 18px 0 8px; border-radius: var(--radius-lg); }
.cmp-table { width: 100%; min-width: calc(180px + var(--cmp-cols) * 120px); border-collapse: separate; border-spacing: 0; }
.cmp-table th, .cmp-table td { padding: 14px 12px; border-bottom: 1px solid var(--color-border); text-align: center; vertical-align: middle; }
.cmp-table thead th { border-bottom: 1px solid var(--color-border); padding-top: 22px; padding-bottom: 20px; vertical-align: top; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }

.cmp-corner, .cmp-feature, .cmp-group-label {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-surface);
  text-align: left !important;
  min-width: 170px;
  padding-left: 18px !important;
}
.cmp-plan { position: relative; }
.cmp-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-badge);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cmp-name { display: block; font-size: 1.15rem; font-weight: 800; color: var(--color-ink); }
.cmp-amount { display: block; margin-top: 4px; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-ink); line-height: 1.15; }
.cmp-period { display: block; font-size: 0.8rem; font-weight: 500; color: var(--color-muted); }
.cmp-then { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--color-tint); font-size: 0.82rem; font-weight: 600; color: var(--color-ink); }
.is-rec .cmp-name, .is-rec .cmp-amount { color: var(--color-primary); }
.is-rec .cmp-then { background: var(--color-surface); color: var(--color-primary); }

.cmp-table .is-rec { background: var(--color-primary-soft); }
.cmp-group th, .cmp-group td { border-bottom: 0; padding-top: 22px; padding-bottom: 4px; }
.cmp-group-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.cmp-feature { font-weight: 400; }
.cmp-label { display: block; color: var(--color-ink); font-weight: 600; line-height: 1.3; }
.cmp-note { display: block; margin-top: 2px; color: var(--color-muted); font-size: 0.82rem; line-height: 1.35; }
.cmp-cell strong { color: var(--color-ink); font-weight: 700; }
.cmp-cell.is-rec strong { color: var(--color-primary); }
.cmp-best td { color: var(--color-muted); font-size: 0.9rem; }
.cmp-best td.is-rec { color: var(--color-primary); font-weight: 700; }

.cmp .tick, .cmp .none { width: 1.9em; height: 1.9em; border-radius: 50%; padding: 5px; vertical-align: middle; }
.cmp .tick { background: var(--color-primary); color: #fff; }
.cmp .none { background: var(--color-tint); color: var(--color-muted); }
.cmp .is-rec .none { background: var(--color-surface); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 760px) {
  .cmp-scroll { padding: 22px 14px 10px; }
  .cmp-corner, .cmp-feature, .cmp-group-label { min-width: 240px; }
  .cmp-amount { font-size: 2rem; }
}
.cmp-years th, .cmp-years td { border-top: 2px solid var(--color-border); }
.cmp-amount .tip { font-size: 0.5em; vertical-align: 0.35em; }

/* collapsed matrix: `top` rows first, the rest behind a "Show all N features" pill under the card */
.cmp.is-collapsed .cmp-more { display: none; }
.cmp-block { margin: 28px 0 32px; }
.cmp-block .cmp { margin: 0; }
.cmp-toggle { margin: 16px 0 0; text-align: center; }
.cmp-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.cmp-toggle-btn::after { content: "\25BE"; font-size: 0.8em; }
.cmp-toggle-btn[aria-expanded="true"]::after { content: "\25B4"; }
.cmp-toggle-btn:hover { background: var(--color-primary-soft); }

/* Desktop: the bundle names (and prices) pin to the top of the screen once the table's own
   header has scrolled away. The strip takes no room (height 0) and the script sizes its
   columns from the header cells and toggles .is-pinned. */
.cmp-sticky { display: none; }
@media (min-width: 760px) {
  .cmp-sticky { display: block; position: sticky; top: 0; z-index: 3; height: 0; overflow: visible; }
  .cmp-sticky-track {
    display: grid;
    justify-content: start;
    visibility: hidden;
    opacity: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: opacity 0.15s;
  }
  .cmp.is-pinned .cmp-sticky-track { visibility: visible; opacity: 1; }
  .cmp-sticky-plan { padding: 9px 8px 8px; text-align: center; line-height: 1.2; }
  .cmp-sticky-plan.is-rec { background: var(--color-primary-soft); }
  .cmp-sticky-name { display: block; font-size: 0.88rem; font-weight: 700; color: var(--color-ink); }
  .cmp-sticky-plan strong { display: block; margin-top: 1px; font-size: 0.85rem; color: var(--color-ink); }
  .cmp-sticky-plan.is-rec .cmp-sticky-name, .cmp-sticky-plan.is-rec strong { color: var(--color-primary); }
}

/* phones: bundle names pinned to the top of the screen; each feature is a label line with the
   values on the line beneath, scrolling sideways under the label (which stays at the left). */
@media (max-width: 759px) {
  .cmp { --cmp-col: 96px; }
  .cmp-sticky {
    display: block;
    position: sticky;
    top: 0;
    z-index: 3;
    overflow: hidden;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .cmp-sticky-track { display: grid; grid-template-columns: repeat(var(--cmp-cols), var(--cmp-col)); justify-content: end; will-change: transform; }  /* right-aligned; spare room stays on the left */
  .cmp-sticky-plan { padding: 10px 6px 8px; text-align: center; line-height: 1.2; }
  .cmp-sticky-plan.is-rec { background: var(--color-primary-soft); }
  .cmp-sticky-name { display: block; font-size: 0.78rem; font-weight: 700; color: var(--color-ink); }
  .cmp-sticky-plan.is-rec .cmp-sticky-name, .cmp-sticky-plan.is-rec strong { color: var(--color-primary); }
  .cmp-sticky-plan strong { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--color-ink); }

  .cmp-scroll { padding: 0 0 6px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .cmp-table { min-width: calc(var(--cmp-cols) * var(--cmp-col)); border-spacing: 0; }
  .cmp-table thead { display: none; }                          /* the strip is the header */
  .cmp-table tbody { display: block; }
  /* a flexible spacer column on the left keeps the label at the left edge and pushes the
     values to the right; it collapses to nothing when the columns need all the width */
  .cmp-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cmp-cols), var(--cmp-col)); }
  .cmp-table tbody td:first-of-type { grid-column: 2; }
  .cmp-table tr[hidden] { display: none; }
  .cmp-table tbody th, .cmp-table tbody td { display: block; border-bottom: 0; }
  .cmp-corner, .cmp-feature, .cmp-group-label {
    grid-column: 1 / -1;
    position: sticky;
    left: 0;
    justify-self: start;
    width: min(100%, calc(100vw - 34px));
    min-width: 0;
    max-width: none;
    padding: 12px 14px 4px !important;
    background: none;
    text-shadow: none;
  }
  .cmp-group th.cmp-group-label { padding-top: 16px !important; padding-bottom: 0 !important; }
  .cmp-table tbody .cmp-group td { display: none; }
  .cmp-table tbody td.cmp-cell { font-size: 0.9rem; overflow-wrap: anywhere; }
  .cmp-cell strong { white-space: normal; }
  .cmp-table tbody td { padding: 4px 8px 12px; text-align: center; border-bottom: 0; }
  .cmp-table tbody tr:not(.cmp-group) { border-bottom: 1px solid var(--color-border); }
  .cmp-table tbody tr:last-child { border-bottom: 0; }
  .cmp-years th, .cmp-best th { padding-top: 14px !important; }
  .cmp-years { border-top: 2px solid var(--color-border); }
  .cmp-years td { padding-top: 8px; }
  .cmp-best td { font-size: 0.82rem; }
  .cmp-note { font-size: 0.8rem; }
  .cmp .tick, .cmp .none { width: 1.6em; height: 1.6em; padding: 4px; }
}

/* "What's the difference?" row: the matrix unfolds beneath it */
.cmp-fold { margin: 22px 0 26px; }
.cmp-fold-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  color: var(--color-ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.cmp-fold-btn > .icon { color: var(--color-primary); display: inline-flex; }
.cmp-fold-title { flex: 1 1 auto; }
.cmp-fold-chevron { width: 10px; height: 10px; margin: 0 6px 4px 0; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: rotate(45deg); transition: transform 0.2s; }
.cmp-fold.is-open .cmp-fold-chevron { transform: rotate(225deg); margin-bottom: -2px; }
.cmp-fold-body { display: none; }
.cmp-fold.is-open .cmp-fold-body { display: block; }
.cmp-fold .cmp-block, .cmp-fold .cmp-fold-body > .cmp { margin-top: 14px; }
@media (min-width: 760px) { .cmp-fold-btn { padding: 16px 22px; } }

/* block build-your-own/style.css */
/* Build your own. Phones: each option row becomes a stacked card with labelled prices. */
.byo { margin: 24px 0 32px; }
.byo-step { margin: 0 0 28px; break-inside: avoid; }
.byo-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 1.25rem; }
.byo-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
}
.byo-note { margin: 10px 0 0; color: var(--color-muted); font-size: 0.88rem; }
.byo-summary { font-weight: 600; }
.byo-price strong { color: var(--color-ink); white-space: nowrap; }
.byo-col-label, .byo-desc-inline { display: none; }

@media (max-width: 759px) {
  /* the options of a step are one grouped list: a caption says whether to pick one or any */
  .byo-step > .byo-choose { display: block; margin: -4px 0 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
  .byo-table { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
  .byo-table table, .byo-table tbody, .byo-table tr, .byo-table td { display: block; width: 100%; }
  .byo-table thead { display: none; }
  .byo-table tr {
    margin: 0;
    padding: 12px 14px 12px 16px;
    background: none;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: inset 3px 0 0 transparent;
  }
  .byo-table tr:first-child { border-top: 0; }
  .byo-table td { padding: 0; border: 0; }
  .byo-table td.byo-desc { display: none; }
  .byo-desc-inline { display: block; margin: 4px 0 0; color: var(--color-muted); font-size: 0.92rem; }
  /* prices sit to the right of the title (stacked when a step has several price columns) */
  .byo-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-content: start; }
  .byo-table td.byo-name { grid-column: 1; grid-row: 1 / span 4; }
  .byo-table td.byo-price { grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding: 0 0 6px; margin: 0; border: 0; white-space: nowrap; }
  .byo-table td.byo-price:last-child { padding-bottom: 0; }
  .byo-col-label { display: block; color: var(--color-muted); font-size: 0.72rem; line-height: 1.2; }
  .byo-price .byo-first-included { font-size: 0.75rem; }
  .byo-addons .byo-col-label, .byo-quantity .byo-col-label { display: none; }  /* a lone "Price" caption says nothing */
  .byo-table tr.byo-option.is-checked { background: var(--color-primary-soft); box-shadow: inset 3px 0 0 var(--color-primary); }
  .byo-option.is-checked td { background: none; box-shadow: none; }
  .byo-addons .calc-qty { display: flex; justify-content: flex-end; margin-top: 8px; }
}
@media (min-width: 760px) {
  .byo-title { font-size: 1.5rem; gap: 14px; }
  .byo-table .byo-name { white-space: normal; max-width: 38%; }
  .byo-table .byo-name label, .byo-table .byo-name > [data-field="name"] { white-space: nowrap; }  /* the name stays on one line */
  .byo-table .byo-name .byo-details { white-space: normal; max-width: 32em; }
  .byo-table .byo-desc { width: 44%; }
}

.byo-choose { display: none; }

/* calculator=yes (interactive): selectable rows, the applicable dependent column, totals */
.byo-option { cursor: pointer; }
.byo-option td { transition: background 0.15s; }
.byo-option:hover td { background: var(--color-tint); }
.byo-option.is-checked td { background: var(--color-primary-soft); }
.byo-option.is-checked td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
.byo-option label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.byo-option input { accent-color: var(--color-primary); width: 1.1em; height: 1.1em; margin: 0; flex: none; }
.byo-option[hidden] { display: none; }
.byo-price.is-muted strong, .byo-price.is-muted .byo-col-label { color: var(--color-muted); font-weight: 500; }
.byo-price.is-active strong, th.byo-price.is-active { color: var(--color-primary); }
th.byo-price.is-active { box-shadow: inset 0 -2px 0 var(--color-primary); }
.byo-addons .calc-qty { margin-left: 14px; vertical-align: middle; }
.byo-addons .calc-qty[hidden] { display: none; }
.byo-included { color: var(--color-primary); }
.byo-calc .byo-summary { margin-bottom: 0; }
.byo-calc .calc-summary { position: static; margin-top: 18px; }
.byo-calc .calc-bar { display: flex; margin-top: 16px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.byo-bundles-title { margin-top: 32px; }
.byo-bundles td.byo-inside { color: var(--color-muted); font-size: 0.9rem; }
.byo-bundles tr.is-rec td { background: var(--color-primary-soft); }
.byo-bundles td strong { white-space: nowrap; }

/* "Start from" package picker and the required rows (renewal) under a step */
.byo-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.byo-start-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin-right: 4px; }
.byo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.byo-chip:hover { border-color: var(--color-primary); }
.byo-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.byo-chip-badge { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.byo-chip.is-active .byo-chip-badge { color: #fff; opacity: 0.85; }
.byo-chip-blank { font-weight: 600; color: var(--color-muted); }

.byo-req {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 10px 0 0;
  padding: 12px 16px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.byo-req.is-checked { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-soft); }
.byo-req-text { flex: 1 1 240px; }
.byo-req-desc { display: block; color: var(--color-muted); font-size: 0.88rem; }
.byo-req-price { margin-left: auto; white-space: nowrap; }
.byo-req-note strong { color: var(--color-ink); }

/* step intros, unnumbered info steps, quantity steps, pick-up-to warnings */
.byo-intro { margin: -6px 0 14px; color: var(--color-muted); }
.byo-intro p { margin: 0 0 6px; }
.byo-title-extra { font-size: 0.8rem; font-weight: 600; color: var(--color-muted); letter-spacing: 0; margin-left: 6px; }
.byo-info .byo-title { font-size: 1.1rem; }
.byo-qty-row .calc-qty { margin-left: 14px; vertical-align: middle; }
.byo-first-included { display: block; color: var(--color-muted); font-size: 0.82rem; font-weight: 400; }
.byo-warn { color: var(--color-primary); font-weight: 600; }
.byo-warn[hidden] { display: none; }

/* hints and extended descriptions */
.byo-hint { display: block; margin-top: 2px; color: var(--color-muted); font-size: 0.82rem; font-style: italic; }
.byo-details {
  margin: 8px 0 2px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.86rem;
  line-height: 1.4;
}
/* phones: the card border already marks the selected row; no inset stripe down the cell */
@media (max-width: 759px) {
  .byo-table .byo-option.is-checked td:first-child { box-shadow: none; }
  .byo-table td.byo-name .byo-details { margin-top: 10px; }
}
.byo-details[hidden] { display: none; }
.byo-details:not([hidden]):not(.is-static) { animation: byo-open 0.25s ease-out; }
@keyframes byo-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.byo-req-text .byo-details { margin-top: 6px; }
.byo-name .tip-hint { vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .byo-details:not([hidden]) { animation: none; } }

/* always-on badge next to the name */
.badge-always {
  display: inline-block;
  margin: 0 0 0 8px;
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-tint);
  color: var(--color-ink);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}
.badge-always[hidden] { display: none; }
@media (max-width: 759px) { .badge-always { display: inline-block; margin: 4px 0 0; } }

/* small desktops and tablets: the Recommended badge drops under the name so the name column
   stays narrow and the description keeps its width */
@media (min-width: 760px) and (max-width: 1023px) {
  .byo-table .byo-name label { display: inline-grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; white-space: normal; vertical-align: top; }
  .byo-table .byo-name label > [data-field="name"] { white-space: nowrap; }
  .byo-table .byo-name label .badge { grid-column: 2; justify-self: start; margin-top: 4px; }
  .byo-table .byo-name .badge-always:not([hidden]) { display: block; width: max-content; margin: 4px 0 0 1.9em; }
}

/* rows above the detail level fold into a pill under the step; a tap unfolds them */
.byo-more-btn {
  display: inline-flex;
  align-items: center;
  margin: 10px 0 0;
  padding: 7px 14px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}
.byo-more-btn:hover { background: var(--color-primary-soft); }
.byo-more-btn[hidden] { display: none; }
.byo-step.is-folded-all .byo-table, .byo-step.is-folded-all > .byo-choose { display: none; }
.byo-step.is-folded-all .byo-more-btn { margin-top: 0; }

/* block calculator/style.css */
.calc { margin: 28px 0 32px; scroll-margin-top: 16px; }
.calc-title { margin: 0 0 14px; }
.calc-table { margin-bottom: 14px; }

.calc-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-gap); }
.calc-choices, .calc-summary {
  padding: 18px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.calc-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 16px; background: var(--color-tint); border-radius: var(--radius-pill); }
.calc-tab {
  flex: 1;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--color-muted);
  cursor: pointer;
}
.calc-tab.is-active { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-card); }

.calc-group { margin: 0 0 18px; padding: 0; border: 0; }
.calc-group:last-child { margin-bottom: 0; }
.calc-group legend { padding: 0; margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }

.calc-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.calc-option:hover { border-color: var(--color-primary); }
.calc-option.is-checked { border: 2px solid var(--color-primary); padding: 11px 13px; background: var(--color-primary-soft); }
.calc-option input { accent-color: var(--color-primary); width: 1.1em; height: 1.1em; margin: 0; }
.calc-option-name { flex: 1; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; color: var(--color-ink); }
.calc-option-price { color: var(--color-ink); font-weight: 700; white-space: nowrap; }
.calc-qty { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.calc-qty button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-surface);
  font: inherit; font-weight: 700; cursor: pointer;
}

.calc-summary { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-on-dark); }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc-total span { color: var(--color-on-dark-muted); }
.calc-total strong { color: #fff; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
.calc-total-then { margin-top: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--color-dark-2); }
.calc-total-then strong { font-size: 1.2rem; color: var(--color-on-dark-accent); }
.calc-note { margin: 10px 0 0; color: var(--color-on-dark-muted); font-size: 0.85rem; }
.calc-lines { list-style: none; margin: 14px 0 0; padding: 0; }
.calc-lines li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--color-dark-2); }
.calc-line-name { color: #fff; font-weight: 600; }
.calc-line-amount { color: #fff; font-weight: 700; }
.calc-line-detail { grid-column: 1 / -1; color: var(--color-on-dark-muted); font-size: 0.8rem; }

.calc-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.calc-btn {
  flex: 1 1 auto;
  padding: 11px 14px;
  border: 1px solid var(--color-dark-2);
  border-radius: var(--radius-md);
  background: var(--color-dark-2);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.calc-btn:hover { filter: brightness(1.15); }
.calc-btn-wa { background: var(--color-primary); border-color: var(--color-primary); }

/* phones: totals stay visible at the bottom while choosing */
.calc-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-dark);
  color: var(--color-on-dark-muted);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}
.calc-bar strong { color: #fff; font-size: 1.25rem; }
.calc-bar-item { display: flex; align-items: baseline; gap: 10px; }
.calc-bar-then strong { font-size: 0.95rem; color: var(--color-on-dark-accent); }
.calc-bar-then { display: none; }
@media (min-width: 480px) { .calc-bar-then { display: flex; } }

@media (min-width: 860px) {
  .calc-layout { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: start; gap: var(--space-gap-wide); }
  .calc-choices, .calc-summary { padding: 24px; }
  .calc-summary { position: sticky; top: 16px; }
  .calc-bar { display: none; }
}

/* panel title (the chosen package or "Your custom mix"), included lines, the (i) tip */
.calc-panel-title { margin: 0 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-on-dark-accent); }
.calc-line-amount.is-included { color: var(--color-on-dark-accent); font-weight: 600; font-size: 0.85rem; }
.calc-summary .tip-btn { color: var(--color-on-dark-muted); }
.calc-summary .tip-btn:hover, .calc-summary .tip-btn[aria-expanded="true"] { color: #fff; }

/* a changed total counts up or down and pulses once */
@keyframes calc-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); color: var(--color-on-dark-accent); }
  100% { transform: scale(1); }
}
.calc-total strong, .calc-bar strong { display: inline-block; transform-origin: right center; font-variant-numeric: tabular-nums; }
.calc-total strong.is-pulse, .calc-bar strong.is-pulse { animation: calc-pulse 0.55s ease-out; }
@media (prefers-reduced-motion: reduce) { .calc-total strong.is-pulse, .calc-bar strong.is-pulse { animation: none; } }
.calc-option-details { flex-basis: 100%; padding-left: 1.9em; color: var(--color-muted); font-size: 0.85rem; line-height: 1.4; }
.calc-option .tip-hint .tip-btn { color: var(--color-muted); }
.calc-option-always { display: inline-block; padding: 1px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-tint); font-size: 0.72rem; font-weight: 600; color: var(--color-ink); }
.calc-more { display: block !important; padding: 6px 0 0 !important; border-bottom: 0 !important; }
.calc-more-btn { padding: 0; border: 0; background: none; color: var(--color-on-dark-muted); font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline dotted; }
.calc-lines-more { margin-top: 4px; }
.calc-lines-more[hidden] { display: none; }

/* block stats/style.css */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 24px 0 28px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-border);
  break-inside: avoid;
}
.stat { display: flex; flex-direction: column; gap: 2px; padding: 18px 16px; background: var(--color-surface); }
.stat-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--color-primary); }
.stat-label { color: var(--color-ink); font-weight: 600; line-height: 1.35; }
.stat-note { color: var(--color-muted); font-size: 0.85rem; }
.stats-dark { background: var(--color-dark-2); border-color: var(--color-dark); }
.stats-dark .stat { background: var(--color-dark); }
.stats-dark .stat-value { color: var(--color-on-dark-accent); }
.stats-dark .stat-label { color: #fff; }
.stats-dark .stat-note { color: var(--color-on-dark-muted); }
@media (min-width: 760px) {
  .stats { grid-template-columns: repeat(min(var(--stats-count), 4), 1fr); }
  .stat { padding: 24px 22px; }
  .stat-value { font-size: 2.4rem; }
}

/* block callout/style.css */
.callout-title { margin: 0 0 4px; font-weight: 700; }
.callout-info { background: var(--color-info-soft); color: var(--color-info); }
.callout-warn { background: var(--color-warn-soft); color: var(--color-warn); }
.callout-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.callout-dark { background: var(--color-dark); color: var(--color-on-dark); }
.callout-plain { background: var(--color-surface); color: var(--color-body); border: 1px solid var(--color-border); }
.callout { break-inside: avoid; }
@media (min-width: 760px) {
  .callout { padding: 18px 24px; font-size: 1.05rem; }
}

/* base/web.css */
/* HTML page chrome: header, table of contents, footer. */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header-inner, .site-footer-inner {
  max-width: var(--size-content);
  margin: 0 auto;
  padding: 14px var(--space-page);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}
.site-logo { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.site-logo img { display: block; height: 28px; width: auto; }
.site-doc { color: var(--color-muted); font-size: 0.85rem; }

.doc-toc {
  margin: 0 0 32px;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.doc-toc-title { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.doc-toc ol { list-style: none; margin: 0; padding: 0; }
.doc-toc li { margin: 4px 0; }
.doc-toc .toc-l2 { padding-left: 1em; }
.doc-toc .toc-l3 { padding-left: 2em; font-size: 0.92rem; }
.doc-toc a { color: var(--color-ink); text-decoration: none; }
.doc-toc a:hover { color: var(--color-primary); }
.doc-toc a span { color: var(--color-primary); font-weight: 700; }

.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); font-size: 0.85rem; }
.site-footer-inner { flex-direction: column; align-items: flex-start; padding-top: 20px; padding-bottom: 28px; }
.site-footer strong { color: var(--color-ink); }

@media (min-width: 768px) {
  .site-header-inner, .site-footer-inner { padding-left: var(--space-page-wide); padding-right: var(--space-page-wide); }
}
@media print {
  .site-header, .calc-share, .calc-bar, .pkg-cta { display: none; }
  body { background: #fff; }
}

/* --combine: one section per file, a sticky bar of file titles */
.parts-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.parts-nav-inner {
  max-width: var(--size-content);
  margin: 0 auto;
  padding: 8px var(--space-page);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.parts-nav a {
  flex: none;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: var(--color-body);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.parts-nav a:hover { background: var(--color-tint); color: var(--color-ink); }
.parts-nav a.is-active { background: var(--color-primary-soft); color: var(--color-primary); }
.parts-nav-inner { scroll-behavior: smooth; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html, .parts-nav-inner { scroll-behavior: auto; } }
.doc-part { scroll-margin-top: 56px; }
.doc-part > :first-child, .doc-part > .eyebrow:first-child + h1 { margin-top: 0; }
.doc-part + .doc-part { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--color-border); }
@media (min-width: 768px) {
  .parts-nav-inner { padding-left: var(--space-page-wide); padding-right: var(--space-page-wide); }
}

/* ---------- web density: about 15 percent tighter than print (this file is loaded last,
   html output only; block style.css files keep the roomier sizes for print and slides).
   Gaps between sections (heading margins, rules, page padding) are left as in print. ---------- */
html { font-size: 14px; }   /* rem base: every rem-sized heading, price and control shrinks with it */
body { font-size: 13px; }   /* body and description text a notch below the headings */
.lead { font-size: 0.98rem; }
.pkg-summary, .byo-desc-inline, .byo-req-desc, .cmp-note, .byo-intro, .byo-note { font-size: 0.86rem; }
/* more air above headings: sections and steps breathe */
h1, h2 { margin-top: 2.4em; }
h3, h4 { margin-top: 2em; }
.eyebrow { margin-top: 3em; }
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 0; }
.doc > :first-child, main > :first-child, .doc-part > :first-child { margin-top: 0; }
.byo-step { margin-bottom: 34px; }
.byo-info { margin-top: 36px; }
.byo-bundles-title { margin-top: 36px; }
.lead { font-size: 1.02rem; }
.table-wrap th, .table-wrap td { padding: 10px 12px; }
.table-wrap thead th { font-size: 0.74rem; }

.eyebrow::after { content: ""; display: inline-block; width: 48px; height: 2px; margin-left: 12px; vertical-align: middle; background: var(--color-primary); opacity: 0.35; }

/* package cards */
.pkg-grid { margin: 20px 0 24px; }
.pkg-card-head { padding: 18px 18px 16px; }
.pkg-card-head[role="button"] { padding-bottom: 28px; }
.pkg-name { font-size: 1.25rem; }
.pkg-icon { width: 42px; height: 42px; }
@media (min-width: 1100px) {   /* four narrow columns: smaller names, three summary lines reserved */
  .pkg-name { font-size: 1.12rem; }   /* two lines reserved by the block css */
}
.pkg-icon .icon, .pkg-icon svg { width: 24px; height: 24px; }
.pkg-summary { font-size: 0.88rem; }
.pkg-price { padding-top: 12px; }
.pkg-amount { font-size: 2rem; }
.pkg-then { margin-top: 10px; padding: 5px 10px; font-size: 0.88rem; }
.pkg-card-body { padding-bottom: 16px; }
.pkg-cta { margin-top: 12px; padding: 10px 14px; }

/* chooser, stats */
.chooser { margin: 22px 0 26px; }
.stats { margin: 20px 0 24px; }

/* compare matrix */
.cmp, .cmp-block { margin: 22px 0 26px; }
.cmp-block .cmp { margin: 0; }
.cmp-scroll { padding: 14px 0 6px; }
.cmp-table th, .cmp-table td { padding: 11px 10px; }
.cmp-table thead th { padding-top: 18px; padding-bottom: 14px; }
.cmp-name { font-size: 1.05rem; }
.cmp-amount { font-size: 1.4rem; }
.cmp-then { margin-top: 6px; padding: 3px 9px; font-size: 0.8rem; }
.cmp-group th, .cmp-group td { padding-top: 16px; padding-bottom: 2px; }
.cmp-toggle { margin-top: 12px; }
.cmp-toggle-btn { padding: 8px 16px; }

/* build your own */
.byo { margin: 20px 0 26px; }
.byo-title { font-size: 1.15rem; margin-bottom: 10px; }
.byo-num { width: 1.8em; height: 1.8em; }
.byo-intro { margin: -4px 0 10px; }
.byo-start { margin-bottom: 16px; }
.byo-chip { padding: 8px 14px; }
.byo-req { padding: 10px 14px; }
.byo-option label { gap: 8px; }
.byo-bundles-title { margin-top: 24px; }

/* calculator / totals panel */
.calc { margin: 22px 0 26px; }
.calc-choices, .calc-summary { padding: 16px 14px; }
.calc-option { padding: 10px 12px; }
.calc-option.is-checked { padding: 9px 11px; }
.calc-total strong { font-size: 1.65rem; }
.calc-total-then strong { font-size: 1.1rem; }
.calc-total-then { padding-bottom: 10px; }
.calc-lines li { padding: 6px 0; }
.calc-share { margin-top: 12px; }
.calc-btn { padding: 9px 12px; font-size: 0.88rem; }
.calc-bar { padding: 10px 14px; }
.calc-bar strong { font-size: 1.1rem; }
.byo-calc .calc-summary { margin-top: 14px; }

@media (min-width: 760px) {
  .table-wrap th, .table-wrap td { padding: 13px 16px; }
  .pkg-card-head { padding: 22px 22px 18px; }
  .pkg-card-head[role="button"] { padding-bottom: 30px; }
  .pkg-card-body { padding: 0 22px 20px; }
  .pkg-amount { font-size: 2.25rem; }
  .cmp-scroll { padding: 16px 12px 8px; }
  .cmp-amount { font-size: 1.7rem; }
  .byo-title { font-size: 1.3rem; }
}
@media (min-width: 768px) {
  h1 { font-size: 2.55rem; }
  h2 { font-size: 1.65rem; }
  h3 { font-size: 1.2rem; }
  .lead { font-size: 1.05rem; }
}
@media (min-width: 860px) {
  .calc-choices, .calc-summary { padding: 20px; }
}