/* Pricing and packaging builder, in Blueprint Equity Design System v4.
   Every rule is scoped under #pp-root. Tokens only (tokens.css); the bp- classes are the site's own
   components.css. The tool-* classes are the Build Team tools' layer (Tools repo, shared/v4/tool.css),
   carried over for the parts this tool uses, and the pp-* rules are the internal tool's own, as it
   ships them. The tool is a paper slab on the article's raised sheet, so its panels read raised. */

#pp-root { scroll-margin-top: 88px; }
#pp-root *, #pp-root *::before, #pp-root *::after { box-sizing: border-box; }

/* ── The tool layer (tool.css) ──────────────────────────────────────────── */
#pp-root .tool { display: flex; flex-direction: column; background: var(--bg-page); color: var(--fg-1); }
#pp-root .tool input, #pp-root .tool textarea, #pp-root .tool select, #pp-root .tool button { font-family: var(--font-sans); }
#pp-root .tool textarea { resize: vertical; }
#pp-root .tool ::placeholder { color: var(--fg-2); opacity: .8; }

#pp-root .tool-body { flex: 1; display: flex; align-items: stretch; min-width: 0; }
#pp-root .tool-rail { flex: 0 0 236px; background: var(--bg-raised); border-right: 1px solid var(--rule); }
/* Sticks below the site nav while it is showing, and follows it when it tucks away. */
#pp-root .tool-rail__inner { position: sticky; top: var(--ws-nav-offset, 0px); transition: top var(--ws-nav-ease, 0s); display: flex; flex-direction: column; gap: 2px; padding: 24px 14px 32px; }

/* A step. The current one takes the system's current-page dot and weight; a done step says so with
   a filled status dot at the end. */
#pp-root .tool-step {
  position: relative; appearance: none; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px;
  padding: 8px 10px 8px 22px; border-radius: var(--radius-press);
  font: 400 14px/1.3 var(--font-sans); color: var(--fg-1); text-align: left;
  transition: background-color .12s ease;
}
#pp-root .tool-step:hover { background: var(--bg-sunken); }
#pp-root .tool-step__n { flex: none; min-width: 18px; font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
#pp-root .tool-step__label { flex: 1; min-width: 0; }
#pp-root .tool-step__done { flex: none; width: 7px; height: 7px; border-radius: var(--radius-dot); box-shadow: inset 0 0 0 1.5px var(--rule-input); }
#pp-root .tool-step[data-done="true"] .tool-step__done { background: var(--status-positive); box-shadow: none; }
#pp-root .tool-step[aria-current="step"] { font-weight: 600; }
#pp-root .tool-step[aria-current="step"]::before {
  content: ""; position: absolute; left: 9px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: var(--radius-dot); background: var(--bp-primary);
}

#pp-root .tool-main { flex: 1 1 0; min-width: 0; padding: 40px 40px 64px; }
#pp-root .tool-main__inner { max-width: 1180px; margin: 0 auto; }

/* A step's opening: its title and one paragraph. No label above it. */
#pp-root .tool-head { display: grid; gap: 12px; margin-bottom: 32px; }
#pp-root .tool-title { margin: 0; font: 600 34px/1.08 var(--font-sans); letter-spacing: -.025em; text-wrap: balance; }
#pp-root .tool-title .bp-accent { color: var(--fg-accent); }
#pp-root .tool-intro { margin: 0; max-width: 64ch; font: 400 16px/1.6 var(--font-sans); color: var(--fg-2); }
#pp-root .tool-figure { font: 300 56px/.9 var(--font-sans); letter-spacing: -.04em; color: var(--fg-accent); font-variant-numeric: tabular-nums; }

/* Panels. Square, raised, no border: one grouping each. */
#pp-root .tool-stack { display: flex; flex-direction: column; gap: 24px; }
#pp-root .tool-panel { background: var(--bg-raised); color: var(--fg-1); padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
#pp-root .tool-panel--tight { padding: 20px 24px 24px; gap: 14px; }
/* The one panel per view that carries the point. Ink, flat: the colours re-point for its contents. */
#pp-root .tool-panel--ink {
  background: var(--bg-inverse); color: var(--fg-inverse);
  --fg-1: var(--fg-inverse); --fg-2: var(--fg-inverse-2);
  --rule: var(--rule-inverse); --rule-input: rgba(255, 248, 242, 0.42); --rule-strong: var(--fg-inverse);
  --fg-link: var(--fg-inverse-link); --fg-accent: var(--bp-primary-soft); --focus: var(--bp-primary-soft);
  --status-positive: #6fcf97; --status-warning: #e0a64a; --status-negative: #f08a80;
  --bg-sunken: rgba(255, 248, 242, 0.08);
}
#pp-root .tool-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#pp-root .tool-panel__title { margin: 0; font: 600 18px/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--fg-1); }
#pp-root .tool-panel__meta { font: 400 13px/1.45 var(--font-sans); color: var(--fg-2); }

/* Fields: a label above, an underline to write on. */
#pp-root .tool-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#pp-root .tool-label { font: 600 12.5px/1.3 var(--font-sans); letter-spacing: .005em; color: var(--fg-1); }
#pp-root .tool-label--muted { color: var(--fg-2); }
#pp-root .tool-hint { font: 400 13px/1.45 var(--font-sans); color: var(--fg-2); }
#pp-root .tool-input {
  width: 100%; min-width: 0; margin: 0;
  border: 0; border-bottom: 1px solid var(--rule-input); border-radius: 0;
  background: transparent; color: var(--fg-1);
  padding: 8px 0 9px; font: 400 16px/1.45 var(--font-sans);
  transition: border-color .12s ease;
}
#pp-root .tool-input:hover { border-bottom-color: var(--rule-strong); }
#pp-root .tool-input:focus, #pp-root .tool-input:focus-visible { outline: none; border-bottom: 2px solid var(--focus); padding-bottom: 8px; }
#pp-root textarea.tool-input { line-height: 1.5; }
#pp-root .tool-input--lg { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
#pp-root .tool-input--num { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
#pp-root .tool-input--sm { font-size: 14px; padding: 5px 0 6px; }
#pp-root .tool-input--sm:focus { padding-bottom: 5px; }
#pp-root .tool-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
#pp-root .tool-row > .tool-input { flex: 1; }

/* A small icon button (move left, move right, remove), always with a title. */
#pp-root .tool-icon-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-press);
  background: transparent; color: var(--fg-2); cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
#pp-root .tool-icon-btn:hover { background: var(--bg-sunken); color: var(--fg-1); }

/* Add a row: a text action with a plus, in the link colour. */
#pp-root .tool-add {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; padding: 6px 0; cursor: pointer;
  font: 500 14px/1.2 var(--font-sans); color: var(--fg-link);
}
#pp-root .tool-add:hover { text-decoration: underline; text-underline-offset: 3px; }
#pp-root button.bp-more { border: 0; background-color: transparent; padding-inline: 0; cursor: pointer; }

/* Interface icons: Lucide at 1.5px, as masks so they take the text colour. */
#pp-root .tool-ico {
  display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
#pp-root .tool-ico--left  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
#pp-root .tool-ico--right { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
#pp-root .tool-ico--x     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
#pp-root .tool-ico--plus  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E"); }
#pp-root .tool-ico--download { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
#pp-root .tool-ico--print { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v8H6z'/%3E%3C/svg%3E"); }

/* ── This tool's own parts (pp-) ────────────────────────────────────────── */
#pp-root .pp { font-feature-settings: "tnum" 1; }
#pp-root input[type=number]::-webkit-inner-spin-button { opacity: 0.4; }
#pp-root input[type=range] { accent-color: var(--bp-primary); width: 100%; margin: 0; }
#pp-root [draggable=true] { cursor: grab; }
#pp-root [draggable=true]:active { cursor: grabbing; }

/* The rail, in its four groups. A step that still needs something takes the warning dot where a
   finished one has its green one. */
#pp-root .pp-rail-group { display: flex; flex-direction: column; gap: 2px; }
#pp-root .pp-rail-group + .pp-rail-group { margin-top: 18px; }
#pp-root .pp-rail-group__name { padding: 0 10px 6px 22px; }
#pp-root .tool-step[data-attn="true"] .tool-step__done { background: var(--status-warning); box-shadow: none; }
#pp-root .pp-rail-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; padding: 0 10px 0 22px; }
#pp-root .pp-reset { appearance: none; border: 0; background: transparent; padding: 6px 0; text-align: left; cursor: pointer; font: 500 13px/1.3 var(--font-sans); color: var(--fg-2); }
#pp-root .pp-reset:hover { color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; }
#pp-root .pp-reset[data-armed="true"] { color: var(--status-negative); }

/* The work, with the question for the team beside it. */
#pp-root .pp-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
#pp-root .pp-ask__q { margin: 0; font: 600 22px/1.3 var(--font-sans); letter-spacing: -0.01em; }
#pp-root .pp-ask__t { margin: 0; font: 400 15px/1.6 var(--font-sans); color: var(--fg-2); }
#pp-root .pp-ask__t b { font-weight: 600; color: var(--fg-1); }

/* An option to choose, or a step to jump to: pressed, so soft corners. The chosen one is outlined in ink. */
#pp-root .pp-option { appearance: none; border: 2px solid transparent; border-radius: var(--radius-press); background: var(--bg-page); color: var(--fg-1); padding: 14px 16px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; transition: border-color .12s ease; }
#pp-root .pp-option:hover { border-color: var(--rule); }
#pp-root .pp-option[aria-pressed="true"] { border-color: var(--fg-1); }
#pp-root .pp-option__t { font: 600 16px/1.3 var(--font-sans); }
#pp-root .pp-option__sub { font: 400 14px/1.5 var(--font-sans); color: var(--fg-2); }

/* Toggles are the system's filter buttons, without the gap it leaves below. */
#pp-root .pp .bp-filter { margin: 0; gap: 6px; }
#pp-root .pp-seg--sm button { padding: 6px 10px; font-size: 13px; }

/* What sits inside a raised panel sits on the page's own ground. */
#pp-root .pp-tile { background: var(--bg-page); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#pp-root .pp-inline { display: flex; align-items: baseline; gap: 6px; }
/* A tier's swatch: the colour its line takes in the chart. */
#pp-root .pp-swatch { flex: none; width: 10px; height: 10px; border-radius: var(--radius-mark); }
#pp-root .pp-tier-name { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Tables drawn as div grids: runtime.js cannot loop inside a real <table>. */
#pp-root .pp-thead { padding: 0 0 8px; border-bottom: 1px solid var(--rule-strong); align-items: end; }
#pp-root .pp-trow { border-bottom: 1px solid var(--rule); align-items: center; }
#pp-root .pp-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Status lines that may wrap: the dot stays on the first line. */
#pp-root .pp-says { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font: 400 15px/1.6 var(--font-sans); }
#pp-root .pp-say { align-items: flex-start; font-weight: 400; }
#pp-root .pp-say::before { margin-top: calc(0.5lh - 4px); }
#pp-root .pp-say b { font-weight: 600; }

/* The board. Tier columns are raised panels; each holds a sunken well its features are dragged
   into, and a feature floats while it is held. */
#pp-root .pp-tier { padding: 20px 20px 16px; gap: 10px; }
#pp-root .pp-zone { outline: 2px dashed transparent; outline-offset: -2px; transition: outline-color .12s ease, background-color .12s ease; }
#pp-root .pp-zone[data-hot="true"] { outline-color: var(--focus); background: var(--wash-blue); }
#pp-root .pp-drop { flex-grow: 1; background: var(--bg-sunken); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 180px; }
#pp-root .pp-chip { background: var(--bg-page); padding: 6px 4px 6px 12px; display: flex; align-items: center; gap: 2px; min-height: 44px; }
#pp-root .pp-chip:active { box-shadow: var(--shadow-float); }
#pp-root .pp-chip[data-dragging="true"] { opacity: 0.35; box-shadow: none; }
#pp-root .pp-chip__name { font: 600 14px/1.3 var(--font-sans); }
#pp-root .pp-chip__group { font: 400 12px/1.3 var(--font-sans); color: var(--fg-2); }
#pp-root .pp-chip--sm { display: inline-flex; align-items: baseline; gap: 6px; min-height: 0; padding: 6px 12px; font: 600 13px/1.3 var(--font-sans); }
#pp-root .pp-chip__price { font-weight: 500; color: var(--fg-2); }

/* A live readout beside a slider. */
#pp-root .pp-readout { font: 600 15px/1.2 var(--font-sans); color: var(--fg-accent); font-variant-numeric: tabular-nums; }

/* What a customer pays. */
#pp-root .pp-total { font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--fg-1); }
#pp-root .pp-lines { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--rule); }
#pp-root .pp-line { display: flex; gap: 12px; align-items: baseline; font: 400 14px/1.4 var(--font-sans); }
#pp-root .pp-line > span:first-child { flex-grow: 1; color: var(--fg-2); }
#pp-root .pp-line > span:last-child { font-weight: 600; }
#pp-root .pp-line--foot { padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; }
#pp-root .pp-key { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.3 var(--font-sans); }
#pp-root .pp-key__line { width: 14px; height: 3px; }

/* Still open on the pricing page: each a status line that goes to its step. */
#pp-root .pp-open { appearance: none; border: 0; background: transparent; padding: 2px 0; text-align: left; cursor: pointer; color: var(--fg-1); }
#pp-root .pp-open:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── The pricing page: the deliverable. A printed document in Design System v4: white US Letter,
   0.9in margins, title 34pt, dek 13pt, headings 15pt, body 10.5pt, tables 9pt, title-block keys
   7.5pt small caps. On screen it is the same sheet, white on the cream page, at the width it
   prints: portrait for three tiers, landscape for four (app.js says which, sets the @page size
   and counts the pages). Sizes are in points so the screen and the page lay out alike. The sheet
   pins its own colours so it stays paper whatever is around it. ─────────────────────────────── */
#pp-root .pp-sheet {
  --fg-1: #1F232D; --fg-2: #5B6070; --rule: #E0E0E2; --rule-strong: #1F232D; --data-focus: #3958FF;
  box-sizing: border-box; width: 100%; max-width: 8.5in; margin: 0 auto; padding: 0.9in;
  background: #FFFFFF; color: var(--fg-1);
  font: 400 10.5pt/16pt var(--font-sans); font-variant-numeric: tabular-nums lining-nums;
}
#pp-root .pp-sheet[data-orient="landscape"] { max-width: 11in; }
#pp-root .pp-sheet > * + * { margin-top: 30pt; }
#pp-root .pp-sheet h2, #pp-root .pp-sheet h3, #pp-root .pp-sheet p, #pp-root .pp-sheet ul { margin: 0; }
/* The design system sizes every bare <p> as body copy; these take their box's. */
#pp-root .pp-plan__terms p { font: inherit; color: inherit; }

#pp-root .pp-sheet__head { display: flex; align-items: flex-start; gap: 24pt; break-inside: avoid; }
#pp-root .pp-sheet__titles { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10pt; }
#pp-root .pp-sheet__title { font: 600 34pt/34pt var(--font-sans); letter-spacing: -0.03em; text-wrap: balance; }
#pp-root .pp-sheet__dek { font: 400 13pt/18pt var(--font-sans); color: var(--fg-2); max-width: 46ch; }
#pp-root .pp-sheet .bp-titleblock--stack { flex: 0 0 auto; width: 216pt; }
#pp-root .pp-sheet .bp-tb__cell { padding: 4pt 8pt 4pt 0; gap: 1pt; }
#pp-root .pp-sheet .bp-tb__k { font-size: 7.5pt; line-height: 9pt; }
#pp-root .pp-sheet .bp-tb__v { font-size: 9pt; line-height: 12pt; white-space: normal; }

/* The tiers: square columns split by hairlines, rows aligned across them by a subgrid so every
   price sits on one line. The popular tier is outlined in ink and says so once; its price is the
   page's one blue. */
#pp-root .pp-plans { display: grid; grid-template-rows: repeat(7, auto); border-top: 1px solid var(--rule-strong); break-inside: avoid; }
#pp-root .pp-plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; padding: 12pt 12pt 14pt; }
#pp-root .pp-plan + .pp-plan { border-left: 1px solid var(--rule); }
/* The outer columns sit on the text edge unless the outline needs the room. */
#pp-root .pp-plan:first-child:not([data-popular="true"]) { padding-left: 0; }
#pp-root .pp-plan:last-child:not([data-popular="true"]) { padding-right: 0; }
#pp-root .pp-plan[data-popular="true"] { outline: 1.5pt solid var(--rule-strong); outline-offset: -1.5pt; }
#pp-root .pp-plan__flag { font: 600 9pt/12pt var(--font-sans); }
#pp-root .pp-plan[data-popular="true"] .pp-plan__flag { padding-bottom: 6pt; }
#pp-root .pp-plan__name { font: 600 15pt/19pt var(--font-sans); letter-spacing: -0.01em; }
#pp-root .pp-plan__for { padding-top: 3pt; font: 400 9pt/13pt var(--font-sans); color: var(--fg-2); }
#pp-root .pp-plan__price { padding-top: 12pt; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5pt; }
#pp-root .pp-plan__fig { font: 300 28pt/30pt var(--font-sans); letter-spacing: -0.035em; font-variant-numeric: proportional-nums lining-nums; }
#pp-root .pp-plan[data-popular="true"] .pp-plan__fig { color: var(--data-focus); }
#pp-root .pp-plan__unit { font: 400 14pt/18pt var(--font-sans); letter-spacing: -0.01em; color: var(--fg-2); }
#pp-root .pp-plan__terms { padding-top: 4pt; display: flex; flex-direction: column; gap: 2pt; font: 400 9pt/13pt var(--font-sans); color: var(--fg-2); }
#pp-root .pp-plan__inherit { margin-top: 12pt; padding-top: 8pt; border-top: 1px solid var(--rule); font: 600 9pt/13pt var(--font-sans); }
#pp-root .pp-plan__feats { list-style: none; padding: 4pt 0 0; font: 400 9pt/13pt var(--font-sans); }
#pp-root .pp-plan__feats li { padding: 4pt 0; border-bottom: 1px solid var(--rule); }
#pp-root .pp-plan__feats li:last-child { border-bottom: 0; }

/* Add-ons, usage and the comparison: v4 tables, built from divs laid out as CSS tables (the
   template cannot hold a <table>), so a comparison that runs onto a second page repeats its header
   there. Sentence-case 600 headers over a full-ink rule, hairlines between rows, no fills. */
#pp-root .pp-sec__h { font: 600 15pt/19pt var(--font-sans); letter-spacing: -0.01em; padding-bottom: 8pt; break-after: avoid; }
#pp-root .pp-table { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; font: 400 9pt/13pt var(--font-sans); }
#pp-root .pp-table__head { display: table-header-group; break-inside: avoid; break-after: avoid; }
#pp-root .pp-table__body { display: table-row-group; }
#pp-root .pp-tr { display: table-row; break-inside: avoid; }
#pp-root .pp-tr > * { display: table-cell; padding: 4pt 12pt 4pt 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
#pp-root .pp-tr > :last-child { padding-right: 0; }
#pp-root .pp-table__head .pp-tr > * { padding: 0 12pt 5pt 0; border-bottom: 2px solid var(--rule-strong); vertical-align: bottom; font-weight: 600; color: var(--fg-2); }
#pp-root .pp-table__head .pp-tr > :last-child { padding-right: 0; }
/* A feature group: its name on a row of its own, running across the empty cells. */
#pp-root .pp-tr[data-group="true"] > * { padding-top: 10pt; font-weight: 600; white-space: nowrap; overflow: visible; }
#pp-root .pp-tr[data-group="true"] { break-after: avoid; }
#pp-root .pp-table .is-key { font-weight: 600; }
#pp-root .pp-table .is-note { color: var(--fg-2); }
#pp-root .pp-table .is-num { text-align: right; }
#pp-root .pp-table .is-mid { text-align: center; }
#pp-root .pp-check { display: inline-block; width: 11pt; height: 11pt; vertical-align: -2pt; color: var(--fg-1); }
#pp-root .pp-no { color: var(--fg-2); }

/* The page counter's copy: the sheet laid out bare at the printed width. */
#pp-root .pp-sheet--bare { max-width: none !important; padding: 0 !important; margin: 0 !important; }

/* ── Smaller screens ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  #pp-root .pp-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  #pp-root .tool-body { flex-direction: column; }
  #pp-root .tool-rail { flex: none; border-right: 0; border-bottom: 1px solid var(--rule); }
  #pp-root .tool-rail__inner { position: static; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px 12px; gap: 8px; }
  #pp-root .pp-rail-group { flex-direction: row; }
  #pp-root .pp-rail-group + .pp-rail-group { margin-top: 0; }
  #pp-root .pp-rail-group__name { display: none; }
  #pp-root .pp-rail-foot { flex-direction: row; align-items: center; gap: 12px; margin: 0 0 0 8px; padding: 0; white-space: nowrap; }
  #pp-root .tool-step { width: auto; flex: none; white-space: nowrap; }
  #pp-root .tool-main { padding: 28px 16px 48px; }
  #pp-root .tool-panel { padding: 22px 20px 24px; }
  #pp-root .tool-title { font-size: 28px; }
  /* Tables drawn as grids keep their columns and scroll sideways. */
  #pp-root .pp-scroll { overflow-x: auto; }
  #pp-root .pp-scroll > [role="row"] { min-width: 680px; }
}
@media (max-width: 700px) {
  /* Inline grids (tier columns, field pairs) stack. */
  #pp-root .pp-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
/* `screen and`: a printed page is narrower than 760px too. */
@media screen and (max-width: 760px) {
  #pp-root .pp-sheet:not(.pp-sheet--bare) { padding: 24px 16px; }
  #pp-root .pp-sheet:not(.pp-sheet--bare) .pp-sheet__head { flex-direction: column; }
  #pp-root .pp-sheet:not(.pp-sheet--bare) .bp-titleblock--stack { width: 100%; }
  #pp-root .pp-sheet:not(.pp-sheet--bare) .pp-plans { grid-template-columns: minmax(0, 1fr) !important; }
  #pp-root .pp-sheet:not(.pp-sheet--bare) .pp-plan { padding-left: 12pt; padding-right: 12pt; }
  #pp-root .pp-sheet:not(.pp-sheet--bare) .pp-plan + .pp-plan { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@page {
  size: letter portrait;
  margin: 0.9in;
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font: 400 8pt/11pt 'Plus Jakarta Sans', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    color: #5B6070;
  }
}
@media print {
  #pp-root .no-print { display: none !important; }
  /* On the pricing page step (app.js sets the class), the sheet is the whole printout: everything
     that neither holds it nor sits inside it goes, and what holds it gives up its padding and fill. */
  html.pp-print-sheet, html.pp-print-sheet body { background: #FFFFFF !important; }
  html.pp-print-sheet body *:not(:has(.pp-sheet)):not(.pp-sheet):not(.pp-sheet *) { display: none !important; }
  html.pp-print-sheet body *:has(.pp-sheet) {
    display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    max-width: none !important; min-height: 0 !important; background: #FFFFFF !important;
    box-shadow: none !important; overflow: visible !important; position: static !important;
  }
  #pp-root .pp-sheet { max-width: none !important; padding: 0; margin: 0; }
}