/* Balanik v2 — subpages (features, integrations, one page per ad platform).
   Builds on base.css (tokens, type roles, pill, ghost, badge, card) and site-chrome.css (the .hn nav and
   .ft footer, shared with the theme pages). Namespaced .pg-*; nothing here redefines a token.
   Rules kept from design-system.md: six type sizes, one filled pill per viewport (page.js hides the nav
   pill while another pill is on screen), violet only for interactive things and 13px eyebrows,
   pastel icon badges with 20px line icons, no device mocks (the homepage carries those). */

.pg-main { display: block; }
.pg-main p { margin: 0; }

/* the nav pill steps aside while the page's own pill is on screen (page.js) */
.hn .hn__pill { transition: opacity .2s var(--ease), visibility 0s linear 0s; }
.hn.hn--quiet .hn__pill { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
/* on a phone there's no room to keep the hidden pill's space: take it out of the row */
@media (max-width: 639px) { .hn.hn--quiet .hn__pill { display: none; } }
.hn__links a[aria-current="page"] { color: var(--violet); }

/* ------------------------------------------------------------------ breadcrumbs */
.pg-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; padding: 0; list-style: none; font: 500 var(--t-small)/1.4 var(--font); color: var(--fog); }
.pg-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--haze); }
.pg-crumbs a { color: var(--fog); }
.pg-crumbs a:hover { color: var(--violet); }

/* ------------------------------------------------------------------ page hero */
.pg-hero { padding: 72px 0 var(--section); }
.pg-hero__inner { max-width: 860px; }
.pg-hero .im-eyebrow { margin: 0 0 18px; }
.pg-hero .im-hero { text-wrap: balance; }
.pg-hero__sub { margin-top: 28px !important; max-width: 640px; }
.pg-hero .im-cta { margin-top: 36px; }
.pg-hero__meta { margin-top: 20px !important; }

/* jump links: plain text links in a row, not buttons */
.pg-jump { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 48px 0 0; padding: 0; list-style: none; }
.pg-jump a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 10px;
  border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--mist);
  color: var(--ink); font: 500 var(--t-body)/1 var(--font); transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pg-jump a:hover { border-color: var(--violet-mist); color: var(--violet); text-decoration: none; }
.pg-jump svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--violet); }

/* ------------------------------------------------------------------ feature groups */
.pg-group { padding: 0 0 var(--section); scroll-margin-top: 88px; }
/* the grid is also the .im-wrap, so the divider is drawn inside the gutters rather than as a border */
.pg-group__grid {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 72px; align-items: start; padding-top: 56px;
  background: linear-gradient(var(--haze), var(--haze)) no-repeat center top / calc(100% - 2 * var(--gutter)) 1px;
}
.pg-group__head { position: sticky; top: 112px; }
.pg-group__head .im-badge { margin-bottom: 24px; }
.pg-group__head .im-eyebrow { margin: 0 0 12px; }
.pg-group__head .im-h2 { text-wrap: balance; }
.pg-group__intro { margin-top: 20px !important; }
.pg-group__more { margin-top: 24px; }

.pg-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.pg-item .im-h3 { font-size: var(--t-body); line-height: 1.4; font-weight: 500; letter-spacing: 0; }
.pg-item p { margin-top: 6px !important; color: var(--storm); text-wrap: pretty; }
.pg-item a { font-weight: 500; }

/* "What it doesn't do": the honest list, quieter */
.pg-limits { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--haze); }
.pg-limits li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--haze); color: var(--storm); }
.pg-limits li::before { content: "–"; color: var(--fog); font-weight: 500; }

/* ------------------------------------------------------------------ integration tiles */
.pg-cat { padding: 0 0 var(--section); scroll-margin-top: 88px; }
.pg-cat__head { margin-bottom: 40px; border-top: 1px solid var(--haze); padding-top: 56px; }
.pg-cat__head > * { max-width: 680px; }
.pg-cat__head .im-eyebrow { margin: 0 0 12px; }
.pg-cat__head .im-body { margin-top: 16px !important; }
.pg-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pg-tile { position: relative; display: flex; flex-direction: column; gap: 0; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); padding: 28px; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.pg-tile .im-badge { margin-bottom: 20px; }
.pg-tile .im-h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pg-tile__how { margin-top: 4px !important; font: 500 var(--t-small)/1.4 var(--font); letter-spacing: .01em; color: var(--fog); }
.pg-tile__text { margin-top: 14px !important; color: var(--storm); }
.pg-tile__go { margin-top: auto; padding-top: 20px; }
.pg-tile--link:hover { border-color: var(--violet-mist); transform: translateY(-2px); }
/* the whole tile is clickable when it has a page; the visible link stays the accessible name */
.pg-tile--link .pg-tile__go a::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.pg-tile--link .pg-tile__go a:focus-visible { outline: none; }
.pg-tile--link:has(a:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.pg-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--r-pill); font: 500 13px/1 var(--font); letter-spacing: .01em; white-space: nowrap; }
.pg-tag--free { background: var(--mint); color: var(--mint-ink); }
.pg-tag--beta { background: var(--sun); color: var(--sun-ink); }
.pg-tag--plain { background: var(--lilac); color: var(--violet); }

/* ------------------------------------------------------------------ one integration page */
.pg-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: 72px; align-items: start; }
.pg-block { padding: 0 0 var(--section); }
.pg-block__head { border-top: 1px solid var(--haze); padding-top: 56px; margin-bottom: 32px; }
.pg-block__head .im-eyebrow { margin: 0 0 12px; }
.pg-block__head .im-body { margin-top: 16px !important; max-width: 640px; }

.pg-steps { list-style: none; margin: 0; padding: 0; counter-reset: pg; display: grid; gap: 0; }
.pg-steps li { counter-increment: pg; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--haze); color: var(--storm); }
.pg-steps li:first-child { border-top: 1px solid var(--haze); }
.pg-steps li::before { content: counter(pg); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lilac); color: var(--violet); font: 500 var(--t-small)/1 var(--font); font-variant-numeric: tabular-nums; }
.pg-steps b { font-weight: 500; color: var(--ink); }
.pg-steps code, .pg-code { font: 500 var(--t-small)/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--ink); background: var(--lilac); border-radius: 6px; padding: 1px 6px; }

.pg-facts { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); padding: 28px; position: sticky; top: 112px; }
.pg-facts .im-badge { margin-bottom: 20px; }
.pg-facts dl { margin: 0; display: grid; gap: 0; }
.pg-facts dt { font: 500 var(--t-small)/1.4 var(--font); letter-spacing: .01em; color: var(--fog); padding-top: 16px; }
.pg-facts dt:first-child { padding-top: 0; }
.pg-facts dd { margin: 4px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--mist); color: var(--ink); }
.pg-facts dd:last-child { border-bottom: 0; padding-bottom: 0; }

.pg-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
.pg-checks li { position: relative; padding-left: 32px; color: var(--storm); }
.pg-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mint); }
.pg-checks li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 5px; height: 9px; border-right: 2px solid var(--mint-ink); border-bottom: 2px solid var(--mint-ink); transform: rotate(45deg); }
.pg-checks--no li::before { background: var(--mist); }
.pg-checks--no li::after { left: 6px; top: 12px; width: 8px; height: 0; border-right: 0; border-bottom: 2px solid var(--fog); transform: none; }

.pg-note { margin-top: 24px !important; padding: 18px 20px; border-radius: var(--r-card); background: var(--lilac); color: var(--storm); }
.pg-note b { font-weight: 500; color: var(--ink); }

.pg-related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }

/* ------------------------------------------------------------------ guides (articles) */
.pg-article { padding: 56px 0 var(--section); }
.pg-article__inner { max-width: 760px; margin: 0 auto; }
.pg-article .pg-crumbs { margin-bottom: 24px; }
.pg-article__eyebrow { margin: 0 0 16px !important; }
.pg-article__title { font-size: var(--t-h2); line-height: 1.1; font-weight: 300; letter-spacing: -.03em; color: var(--ink); margin: 0; text-wrap: balance; }
.pg-article__meta { margin-top: 16px !important; }
.pg-article__lead { margin-top: 28px !important; font-size: var(--t-h3); line-height: 1.5; color: var(--storm); }
.pg-article__body { margin-top: 48px; }
.pg-article__body > * + * { margin-top: 20px !important; }
.pg-article__body h2 { font-size: var(--t-num); line-height: 1.2; font-weight: 400; letter-spacing: -.02em; color: var(--ink); margin: 56px 0 0 !important; text-wrap: balance; }
.pg-article__body h3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 500; color: var(--ink); margin: 36px 0 0 !important; }
.pg-article__body p, .pg-article__body li { color: var(--storm); text-wrap: pretty; }
.pg-article__body ul, .pg-article__body ol { padding-left: 22px; }
.pg-article__body li + li { margin-top: 8px; }
.pg-article__body strong { font-weight: 500; color: var(--ink); }
.pg-article__body a:not(.im-ghost):not(.im-pill) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.pg-formula { padding: 20px 24px; border-radius: var(--r-card); background: var(--lilac); color: var(--ink); font-size: var(--t-h3); line-height: 1.4; font-weight: 500; font-variant-numeric: tabular-nums; }
.pg-formula small { display: block; margin-top: 6px; font-size: var(--t-small); font-weight: 500; color: var(--storm); letter-spacing: .01em; }

.pg-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); overflow: hidden; }
.pg-table caption { caption-side: top; text-align: left; padding: 0 0 10px; font-size: var(--t-small); font-weight: 500; color: var(--fog); letter-spacing: .01em; }
.pg-table th, .pg-table td { padding: 12px 18px; text-align: left; border-top: 1px solid var(--mist); color: var(--storm); }
.pg-table thead th { border-top: 0; font-size: var(--t-small); font-weight: 500; color: var(--fog); letter-spacing: .01em; background: var(--cloud); }
.pg-table td:last-child, .pg-table th:last-child { text-align: right; }
.pg-table tr.is-total td { font-weight: 500; color: var(--ink); background: var(--cloud); }
.pg-table .neg { color: var(--coral-ink); }
.pg-table .pos { color: var(--mint-ink); }
.pg-table-wrap { overflow-x: auto; }

.pg-invision { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 24px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--mist); box-shadow: var(--shadow-soft); }
.pg-invision .im-h3 { font-size: var(--t-body); font-weight: 500; }
.pg-invision p { margin-top: 6px !important; }
.pg-invision .im-ghost { margin-top: 12px; }

.pg-guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pg-guide { position: relative; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); padding: 28px; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.pg-guide:hover { border-color: var(--violet-mist); transform: translateY(-2px); }
.pg-guide .im-small { display: block; margin-bottom: 10px; }
.pg-guide .im-h3 { text-wrap: balance; }
.pg-guide p { margin-top: 10px !important; color: var(--storm); }
.pg-guide a { color: inherit; }
.pg-guide a::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.pg-guide a:hover { text-decoration: none; }
.pg-guide--tool { grid-column: 1 / -1; background: var(--lilac); border-color: var(--lilac); }

/* ------------------------------------------------------------------ help centre (support docs) */
.pg-docs { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 760px); gap: 64px; justify-content: center; padding-top: 56px; padding-bottom: var(--section); }
.pg-docs__nav { position: sticky; top: 104px; align-self: start; max-height: calc(100vh - 128px); overflow: auto; padding-right: 8px; }
.pg-docs__nav p { margin: 16px 0 6px !important; font-size: var(--t-small); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--violet); }
.pg-docs__nav p:first-child { margin-top: 0 !important; }
.pg-docs__nav ul { list-style: none; margin: 0; padding: 0; }
.pg-docs__nav a { display: block; padding: 4px 10px; margin-left: -10px; border-radius: 8px; color: var(--storm); font-size: var(--t-small); line-height: 1.4; font-weight: 500; letter-spacing: .01em; }
.pg-docs__nav a:hover { color: var(--violet); background: var(--lilac); text-decoration: none; }
.pg-docs__nav a[aria-current="page"] { color: var(--violet); background: var(--lilac); }
.pg-docs .pg-article__inner { margin: 0; max-width: none; }
.pg-docs .pg-steps { margin-top: 8px; }
.pg-docs code { overflow-wrap: anywhere; }
.pg-ui { font-weight: 500; color: var(--ink); } /* names of buttons, tabs and fields in the plugin */

.pg-search { position: relative; max-width: 560px; margin-top: 36px; }
.pg-search input { width: 100%; height: 56px; padding: 0 20px 0 52px; border: 1px solid var(--haze); border-radius: var(--r-pill); background: var(--paper); font: 400 var(--t-body)/1 var(--font); color: var(--ink); box-shadow: var(--shadow-soft); }
.pg-search input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--lilac); }
.pg-search svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--fog); stroke-width: 1.75; stroke-linecap: round; }
.pg-search__none { margin-top: 24px !important; }

.pg-doclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-doc { position: relative; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); padding: 22px 24px; transition: border-color .2s var(--ease); }
.pg-doc:hover { border-color: var(--violet-mist); }
.pg-doc a { color: var(--ink); font-weight: 500; }
.pg-doc a::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.pg-doc a:hover { text-decoration: none; }
.pg-doc p { margin-top: 6px !important; font-size: var(--t-small); line-height: 1.45; color: var(--fog); }

.pg-faq { border-top: 1px solid var(--haze); }
.pg-faq details { border-bottom: 1px solid var(--haze); }
.pg-faq summary { list-style: none; cursor: pointer; position: relative; padding: 22px 48px 22px 0; font-size: var(--t-body); font-weight: 500; color: var(--ink); }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: var(--t-h3); font-weight: 300; color: var(--violet); }
.pg-faq details[open] summary::after { content: "−"; }
.pg-faq details > div { padding: 0 48px 24px 0; color: var(--storm); }
.pg-faq details > div > * + * { margin-top: 12px !important; }

/* Contact form */
.pg-form { display: grid; gap: 20px; }
.pg-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pg-form__field { margin: 0; display: grid; gap: 8px; }
.pg-form__field label { font-size: var(--t-small); font-weight: 500; color: var(--ink); letter-spacing: .01em; }
.pg-form__field label span { font-weight: 400; color: var(--fog); }
.pg-form input, .pg-form select, .pg-form textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--haze); border-radius: 12px; background: var(--paper); font: 400 var(--t-body)/1.5 var(--font); color: var(--ink); }
.pg-form textarea { resize: vertical; min-height: 180px; }
.pg-form input:focus, .pg-form select:focus, .pg-form textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--lilac); }
.pg-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pg-form__note { color: var(--fog); }
.pg-form__status { margin: 0; padding: 14px 18px; border-radius: 12px; font-size: var(--t-small); }
.pg-form__status.is-sent { background: var(--mint); color: var(--mint-ink); }
.pg-form__status.is-error { background: var(--coral); color: var(--coral-ink); }
.pg-form__status a { color: inherit; text-decoration: underline; }
.pg-form__send { justify-self: start; border: 0; cursor: pointer; }
.pg-form__send:disabled { opacity: .6; cursor: default; }
@media (max-width: 639px) { .pg-form__row { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1100px) { .pg-doclist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .pg-docs { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; }
  .pg-docs__nav { position: static; max-height: none; order: 2; border-top: 1px solid var(--haze); padding-top: 24px; }
}
@media (max-width: 639px) { .pg-doclist { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: start; margin-top: 40px; }
.calc__form { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.calc__group { grid-column: 1 / -1; margin: 8px 0 -4px; font-size: var(--t-small); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--violet); }
.calc__group:first-child { margin-top: 0; }
.calc__field { display: grid; gap: 8px; min-width: 0; }
.calc__field--wide { grid-column: 1 / -1; }
.calc__field label { font-size: var(--t-small); font-weight: 500; letter-spacing: .01em; color: var(--ink); }
.calc__input { position: relative; display: flex; align-items: center; }
.calc__input span { position: absolute; left: 14px; color: var(--fog); font-size: var(--t-body); pointer-events: none; }
.calc__input span.is-suffix { left: auto; right: 14px; }
.calc__input input {
  width: 100%; height: 48px; padding: 0 14px 0 30px; border: 1px solid var(--haze); border-radius: 12px; background: var(--paper);
  font: 400 var(--t-body)/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; transition: border-color .2s, box-shadow .2s;
}
.calc__input input.has-suffix { padding: 0 34px 0 14px; }
.calc__input input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--lilac); }
.calc__hint { font-size: var(--t-small); color: var(--fog); line-height: 1.4; }

.calc__out { position: sticky; top: 112px; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); padding: 28px; box-shadow: var(--shadow-soft); }
.calc__big { margin: 6px 0 0 !important; font-size: var(--t-h2); line-height: 1; font-weight: 300; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__rows { list-style: none; margin: 24px 0 0; padding: 0; }
.calc__rows li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--mist); color: var(--storm); font-variant-numeric: tabular-nums; }
.calc__rows li b { font-weight: 500; color: var(--ink); }
.calc__verdict { margin-top: 18px !important; padding: 14px 16px; border-radius: 12px; font-size: var(--t-small); line-height: 1.45; font-weight: 500; }
.calc__verdict.is-ok { background: var(--mint); color: var(--mint-ink); }
.calc__verdict.is-bad { background: var(--coral); color: var(--coral-ink); }
.calc__verdict.is-idle { background: var(--lilac); color: var(--violet); }

@media (max-width: 1100px) { .pg-guides { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc__out { position: static; } }
@media (max-width: 639px) {
  .calc__form { grid-template-columns: 1fr; padding: 22px 18px; }
  .calc__big { font-size: var(--t-num); }
  .pg-article__lead { font-size: var(--t-body); }
}

/* ------------------------------------------------------------------ close */
.pg-close { padding: 0 0 var(--section); }
.pg-close__panel { text-align: center; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-panel); padding: 80px 48px; }
.pg-close__panel .im-body { margin-top: 16px !important; }
.pg-close__panel .im-cta { justify-content: center; margin-top: 32px; }

/* footer sample-data line sits with the address row */
.ft .ft-bottom p + p { flex-basis: 100%; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .pg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-group__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 48px; }
  .pg-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); column-gap: 48px; }
}
@media (max-width: 900px) {
  .pg-group__grid, .pg-cols { grid-template-columns: 1fr; row-gap: 36px; }
  .pg-group__head, .pg-facts { position: static; }
  .pg-cols .pg-facts { order: -1; }
}
@media (max-width: 767px) {
  .pg-hero { padding: 40px 0 var(--section); }
  .pg-list, .pg-checks, .pg-tiles { grid-template-columns: 1fr; }
  .pg-list { gap: 28px; }
  .pg-group__grid, .pg-cat__head, .pg-block__head { padding-top: 40px; }
  .pg-close__panel { padding: 56px 24px; }
  .pg-jump { margin-top: 36px; }
}

/* ---------- guide: profit tools compared (figures + subscription calculator) ---------- */
.cmp-fig { margin: 32px 0 !important; }
.cmp-fig figcaption { margin-top: 10px; font-size: var(--t-small); line-height: 1.45; color: var(--fog); letter-spacing: .01em; }
.cmp-svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.cmp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cmp-chart { max-width: 640px; margin: 0 auto; }
@media (max-width: 639px) { .cmp-pair { grid-template-columns: minmax(0, 1fr); } }
.cmp-bg { fill: var(--paper); stroke: var(--mist); }
.cmp-panel--ours .cmp-bg { fill: var(--lilac); stroke: var(--violet-mist, var(--mist)); }
.cmp-h { font-size: 19px; font-weight: 500; fill: var(--ink); }
.cmp-t { font-size: 15px; font-weight: 500; fill: var(--ink); }
.cmp-s { font-size: 14px; fill: var(--storm); }
.cmp-c { font-size: 13px; font-weight: 500; fill: var(--ink); }
.cmp-box { fill: var(--cloud); stroke: var(--haze); }
.cmp-box--cloud { fill: var(--paper); stroke: var(--fog); stroke-dasharray: 5 4; }
.cmp-box--ours { fill: var(--paper); stroke: var(--violet); }
.cmp-chip { fill: var(--lilac); }
.cmp-chip--mint { fill: var(--mint); }
.cmp-arrow, .cmp-head { fill: none; stroke: var(--violet); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cmp-axis path { stroke: var(--haze); stroke-width: 1.5; fill: none; }
.cmp-axis text { font-size: 13px; font-weight: 500; fill: var(--fog); letter-spacing: .01em; }
.cmp-step { fill: none; stroke: var(--fog); stroke-width: 3; stroke-linejoin: round; }
.cmp-flat { fill: none; stroke: var(--violet); stroke-width: 4; stroke-linecap: round; }
.cmp-dot { fill: var(--fog); }
.cmp-dot--ours { fill: var(--violet); }
.cmp-lbl { font-size: 14px; font-weight: 500; fill: var(--storm); }
.cmp-lbl--ours { fill: var(--violet); }
.cmp-table td:last-child { white-space: nowrap; }

.saver { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 28px 0 !important; }
.saver__form, .saver__out { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); padding: 24px; }
.saver__out { box-shadow: var(--shadow-soft); }
.saver__form { display: grid; gap: 18px; align-content: start; }
.saver__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }
.saver__presets button { height: 34px; padding: 0 14px; border: 1px solid var(--haze); border-radius: var(--r-pill); background: var(--paper); font: 500 var(--t-small)/1 var(--font); color: var(--storm); cursor: pointer; }
.saver__presets button:hover { border-color: var(--violet); color: var(--violet); }
.saver__presets button[aria-pressed="true"] { background: var(--lilac); border-color: var(--violet); color: var(--violet); }
.saver__range { display: flex; align-items: center; gap: 14px; }
.saver__range input { flex: 1; accent-color: var(--violet); }
.saver__range output { min-width: 64px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.saver__sub { margin-top: 6px !important; color: var(--mint-ink); font-weight: 500; }
.saver__bars { display: grid; gap: 10px; margin: 22px 0 14px !important; }
.saver__bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--t-small); color: var(--storm); font-variant-numeric: tabular-nums; }
.saver__bar b { font-weight: 500; color: var(--ink); }
.saver__track { height: 12px; border-radius: 6px; background: var(--cloud); overflow: hidden; }
.saver__track i { display: block; height: 100%; border-radius: 6px; background: var(--fog); transition: width .35s var(--ease); }
.saver__bar--ours .saver__track i { background: var(--violet); }
@media (max-width: 720px) { .saver { grid-template-columns: minmax(0, 1fr); } }
/* waterfall: net sales to what you keep (guide: Analytics alternatives) */
.wf-in { fill: var(--fog); }
.wf-out { fill: var(--coral); }
.wf-keep { fill: var(--violet); }
.wf-v { font-size: 13px; font-weight: 500; fill: var(--storm); font-variant-numeric: tabular-nums; }
.wf-v--keep { fill: var(--violet); }
.wf-l { font-size: 12px; font-weight: 500; fill: var(--fog); letter-spacing: .01em; }
.wf-l--keep { fill: var(--violet); }