/**
 * Pricing — `/pricing/`.
 *
 * Ported from the Claude Design artboard `Pricing.dc.html`. Only what that
 * artboard does and the shared layer does not; grounds, heads, buttons, the
 * FAQ accordion and the check glyph all come from `product.css`.
 *
 * The page is mostly tables and cards, and almost all of it is figures. Two
 * rules follow from that and run through this file:
 *
 *   - Nothing is sized so that a number can reflow as it changes. The cells
 *     and the card prices reserve their space, because a layout that jumps
 *     while you drag a slider reads as broken.
 *   - Both tables scroll inside their own box rather than widening the page.
 *     On a phone they scroll sideways within the band and the page itself
 *     never does.
 *
 * TWO CARD FAMILIES, AND THEY ARE NOT THE SAME THING. `.zpr-card` is a
 * calculator readout — four of them on One Click Upsell, two on ShopRank — and
 * `.is-here` on one means "this is the band you are in", which the slider
 * moves. `.zpr-plan` is a plan you choose, and `.is-popular` on one is a fixed
 * recommendation. They look alike on purpose and behave nothing alike.
 *
 * Both loud states are the same dark card, which is the artboard's: the OCU
 * band the slider lands in and the Pages plan flagged "most popular" are the
 * one card the reader is meant to look at, whether the page picked it or the
 * marketing team did. ShopRank's `.is-here` is the exception and keeps a
 * yellow ring — it marks the free plan beside an already-dark Scale card, so
 * darkening it would say nothing.
 */

/* ==========================================================================
   §1 TITLE BAND
   A lid on the tab strip rather than a section, so it closes tight.
   ========================================================================== */

.zpr-open .zpx-wrap { padding:96px 48px 40px; }
.zpr-open__head { margin-bottom:0; }
.zpr-open__head .zpx-h2 { margin:0; font-size:clamp(34px,4vw,62px); letter-spacing:-0.028em; line-height:1.02; }

/* ==========================================================================
   §2 TABS AND PANELS
   ========================================================================== */

.zpr-band .zpx-wrap { padding:0 48px 64px; }

.zpr-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding-block:32px; }
.zpr-tab {
	display:inline-flex; align-items:center; gap:12px;
	padding:10px 20px 10px 12px; border-radius:var(--r-pill);
	border:1px solid var(--ink-200); background:var(--surface);
	font:inherit; font-size:15px; font-weight:800; letter-spacing:-0.01em; color:var(--ink-700);
	cursor:pointer;
	transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.zpr-tab:hover { border-color:var(--ink-300); color:var(--ink-900); }
.zpr-tab[aria-selected="true"] { background:var(--blue-900); border-color:transparent; color:#fff; }
.zpr-tab__well {
	display:flex; align-items:center; justify-content:center;
	width:34px; height:34px; flex:0 0 auto;
	border-radius:50%; background:var(--blue-900);
	transition:background var(--dur-base) var(--ease-out);
}
.zpr-tab[aria-selected="true"] .zpr-tab__well { background:rgba(255,255,255,.12); }
.zpr-tab__mark {
	display:block; width:20px; height:20px;
	background-repeat:no-repeat; background-position:center; background-size:contain;
}
/* The marks are not optically centred in their own viewBoxes; nudge each. */
#zpr-tab-perfectmatch .zpr-tab__mark { translate:1px 0; }
#zpr-tab-pages .zpr-tab__mark { translate:0 1px; }
#zpr-tab-shoprank .zpr-tab__mark { translate:-1px 0; }
#zpr-tab-ocu .zpr-tab__mark { translate:1px 0; }

.zpr-panel > * + * { margin-top:26px; }

/* The head each panel opens with: a centred eyebrow, headline and paragraph,
   above the calculator or the plan row rather than beside it. */
.zpr-chead,
.zpr-phead { margin-bottom:30px; }
.zpr-chead .zpx-head,
.zpr-phead .zpx-head { margin-bottom:12px; }
.zpr-chead__body,
.zpr-phead__body { max-width:720px; margin:0 auto; text-align:center; }
.zpr-chead__body p,
.zpr-phead__body p { margin:0; font-size:16px; line-height:1.6; color:var(--ink-600); }

/* ==========================================================================
   THE CALCULATORS
   ========================================================================== */

.zpr-calc {
	padding:24px 28px; border-radius:18px;
	border:1px solid var(--ink-200); background:var(--surface);
	box-shadow:0 6px 20px rgba(13,31,78,.07);
	display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,400px);
	gap:32px; align-items:center;
}

.zpr-calc__readout {
	display:flex; align-items:baseline; justify-content:space-between; gap:16px;
	margin:0 0 10px; font-size:13px; font-weight:800;
	letter-spacing:.04em; text-transform:uppercase; color:var(--ink-600);
}
.zpr-calc__readout label { font:inherit; }
.zpr-calc__readout strong {
	font-size:32px; font-weight:900; letter-spacing:-0.035em; line-height:1;
	text-transform:none; color:var(--ink-900);
	font-variant-numeric:tabular-nums;
}

.zpr-calc__note { margin:14px 0 0; font-size:11.5px; line-height:1.45; color:var(--ink-500); max-width:46ch; }

/* The tick rail under ShopRank's slider. Absolutely positioned inside a fixed
   22px strip so the ticks cannot push the note below them around, and each
   tick is placed by its share of the track. */
.zpr-ticks { position:relative; height:22px; margin-top:6px; }
.zpr-tick { position:absolute; display:flex; flex-direction:column; gap:4px; }
.zpr-tick--start { align-items:flex-start; }
.zpr-tick--mid   { align-items:center; transform:translateX(-50%); }
.zpr-tick--end   { align-items:flex-end; transform:translateX(-100%); }
.zpr-tick__mark { width:1px; height:6px; background:var(--ink-300); }
.zpr-tick__label { font-size:10px; font-weight:700; letter-spacing:.02em; color:var(--ink-400); white-space:nowrap; }

.zpr-cells { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }

.zpr-cell { padding:11px 13px; border-radius:12px; border:1px solid var(--ink-200); background:var(--ink-050); }
.zpr-cell--pay { background:var(--blue-900); border-color:var(--blue-900); color:#fff; }
.zpr-cell--roi { background:var(--yellow-200); border-color:#e8dca8; }

.zpr-cell__k {
	margin:0 0 6px; font-size:10px; font-weight:800;
	letter-spacing:.11em; text-transform:uppercase; color:var(--ink-500);
}
.zpr-cell--pay .zpr-cell__k { color:var(--zip-yellow); }
.zpr-cell--roi .zpr-cell__k { color:#8a5a00; }

/* `min-height` and tabular figures together are what stop the row twitching
   as the slider moves through values of different widths. */
.zpr-cell__v {
	margin:0; font-size:25px; font-weight:900; letter-spacing:-0.035em; line-height:1;
	font-variant-numeric:tabular-nums; min-height:25px;
}
.zpr-cell--pay .zpr-cell__v { color:var(--zip-yellow); }
.zpr-cell--roi .zpr-cell__v { color:#8a5a00; }
.zpr-cell__s { margin:5px 0 0; font-size:11.5px; line-height:1.35; color:var(--ink-600); }
.zpr-cell--pay .zpr-cell__s { color:rgba(255,255,255,.62); }
.zpr-cell--roi .zpr-cell__s { color:#7a5200; }
/* Toggled by script when the discount line has nothing to say. Not every reset
   in the stack styles `[hidden]` on a `<p>`. */
.zpr-cell__s[hidden] { display:none; }

/* ==========================================================================
   CALCULATOR CARDS
   ========================================================================== */

.zpr-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:stretch; }
/* ShopRank's pair, not a row of four: two wide cards, centred under the
   calculator rather than stretched across it. */
.zpr-cards--sr {
	grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
	gap:18px; max-width:880px; margin-inline:auto;
}

.zpr-card {
	position:relative; display:flex; flex-direction:column; justify-content:space-between;
	padding:28px 24px 26px; border-radius:18px;
	border:1px solid var(--ink-200); background:var(--surface);
	box-shadow:var(--sh-1);
	transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.zpr-card.is-here { border-color:var(--zip-yellow); box-shadow:0 0 0 2px rgba(255,215,72,.4), 0 18px 40px rgba(13,31,78,.10); }

.zpr-card__badge {
	position:absolute; top:-11px; left:20px;
	display:none; padding:5px 12px; border-radius:var(--r-pill);
	background:var(--zip-yellow); color:var(--ink-900);
	font-size:9.5px; font-weight:900; letter-spacing:.11em; text-transform:uppercase;
	box-shadow:0 6px 16px rgba(255,215,72,.34);
}
.zpr-card.is-here > .zpr-card__badge { display:inline-flex; }

.zpr-card__range {
	margin:0 0 10px; font-size:10px; font-weight:800;
	letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-400);
}
.zpr-card__name { margin:0 0 13px; font-size:17px; font-weight:800; letter-spacing:-0.018em; color:var(--ink-900); }

.zpr-card__price { display:flex; align-items:baseline; flex-wrap:wrap; row-gap:2px; margin:0; min-width:0; }
.zpr-card__from { font-size:13px; font-weight:700; margin-right:4px; color:var(--ink-500); }
/* Not every reset in the stack styles `[hidden]`, and this one is toggled by
   script on the card the slider lands in. */
.zpr-card__from[hidden] { display:none; }
.zpr-card__amount {
	font-size:34px; font-weight:900; letter-spacing:-0.04em; line-height:1;
	color:var(--ink-900); font-variant-numeric:tabular-nums;
}
.zpr-card__per { font-size:13px; font-weight:600; margin-left:3px; color:var(--ink-500); }

.zpr-card__annual { margin:7px 0 0; font-size:12.5px; font-weight:800; color:var(--zip-royal); }
.zpr-card__band { margin:6px 0 0; font-size:13px; line-height:1.45; font-weight:700; color:var(--ink-500); }
.zpr-card__meta { margin:7px 0 0; font-size:13.5px; line-height:1.4; color:var(--ink-600); }
.zpr-card__plus { margin:22px 0 0; font-size:15px; font-weight:900; letter-spacing:-0.01em; color:var(--ink-900); }

/* The OCU cards put the band line and the "billed on" line tight under the
   price, where ShopRank's pair spaces them. Same elements, different rhythm —
   the OCU row is four narrow columns and cannot afford the air. */
[data-zpr-panel="ocu"] .zpr-card__band { margin:11px 0 0; font-size:14px; color:var(--ink-800); }
[data-zpr-panel="ocu"] .zpr-card__meta { margin:4px 0 16px; font-size:12.5px; color:var(--ink-500); }
[data-zpr-panel="ocu"] .zpr-card__list { padding-top:18px; margin-top:18px; border-top:1px solid var(--ink-200); }

.zpr-card__list,
.zpr-plan__list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.zpr-card__list li,
.zpr-plan__list li { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.4; color:var(--ink-700); }
.zpr-card__tick,
.zpr-plan__tick { flex:0 0 auto; margin-top:2px; color:var(--blue-500); }

.zpr-card__allin {
	margin:14px 0 0; font-size:12px; font-weight:700; line-height:1.4; color:var(--zip-royal);
}
.zpr-card__cta,
.zpr-plan__cta { width:100%; text-align:center; margin-top:22px; }

/* The tier card you are in gets the loud button and the other three stay
   outlined — the artboard's rule, and the second half of the "this one is
   yours" signal the yellow ring starts. Scoped to the OCU panel: ShopRank's
   pair is a plan choice rather than a slider readout and keeps its own. */
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__cta {
	border-color:transparent; background:var(--grad-ocu); color:#fff;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px rgba(240,48,90,.28);
}
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__cta:hover,
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__cta:focus {
	background:var(--grad-ocu); color:#fff; filter:brightness(1.07); transform:translateY(-1px);
}

/* THE DARK CARD. Two cards wear it and they mean different things, which is
   why the selector is a pair rather than one class:

   `.zpr-card--on` is ShopRank's Scale card, dark whatever the slider says
   because it is the plan being recommended, not a readout — hence a badge that
   is not gated on `.is-here` like the others.

   `[data-zpr-panel="ocu"] .zpr-card.is-here` is the OCU band the slider landed
   in. It used to be a yellow ring on white; the artboard draws it as this same
   dark card, lift and all, and it is the treatment the Zipify Pages panel's
   "most popular" plan already uses one tab over. A ring reads as an outline
   among four equal white cards; the dark ground reads as the answer. The
   ShopRank pair keeps the ring — `.zpr-card--sr.is-here` is the free plan, and
   a dark free card beside a dark Scale card says nothing. */
.zpr-card--on,
[data-zpr-panel="ocu"] .zpr-card.is-here {
	border-color:var(--blue-900); background:var(--blue-900); transform:translateY(-4px);
	box-shadow:0 0 0 3px rgba(255,215,72,.3), 0 22px 48px rgba(13,31,78,.3);
}
.zpr-card--on > .zpr-card__badge { display:inline-flex; }
.zpr-card--on .zpr-card__range,
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__range  { color:rgba(255,255,255,.55); }
.zpr-card--on .zpr-card__from,
.zpr-card--on .zpr-card__amount,
.zpr-card--on .zpr-card__annual,
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__from,
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__amount,
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__name,
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__allin { color:var(--zip-yellow); }
.zpr-card--on .zpr-card__per,
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__per    { color:rgba(255,255,255,.6); }
.zpr-card--on .zpr-card__band   { color:rgba(255,255,255,.75); }
.zpr-card--on .zpr-card__plus   { color:#fff; }
.zpr-card--on .zpr-card__list li,
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__list li { color:rgba(255,255,255,.86); }
.zpr-card--on .zpr-card__tick,
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__tick   { color:var(--zip-yellow); }

/* The OCU card's own rhythm on the dark ground: the band line is full white
   rather than ShopRank's muted grey — it carries the revenue range, which is
   the line the reader came for — and the rule above the feature list has to
   lighten with everything else. */
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__band { color:#fff; }
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__meta { color:rgba(255,255,255,.62); }
[data-zpr-panel="ocu"] .zpr-card.is-here .zpr-card__list { border-top-color:rgba(255,255,255,.16); }

/* The free card's "You're here" badge reads on white, so it inverts. */
.zpr-card--sr:not(.zpr-card--on) > .zpr-card__badge { background:var(--blue-900); color:#fff; box-shadow:var(--sh-2); }

/* ==========================================================================
   PLAN CARDS
   Three for Zipify Pages, four for PerfectMatch, and the popular one is a
   dark card rather than a ringed white one.
   ========================================================================== */

.zpr-billing { display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 0 34px; }
.zpr-billing__save {
	margin:0; font-size:12px; font-weight:800;
	letter-spacing:.1em; text-transform:uppercase; color:var(--zip-royal);
}
.zpr-modes { display:inline-flex; padding:4px; border-radius:var(--r-pill); background:#e9ecf3; }
.zpr-mode {
	padding:9px 20px; border:0; border-radius:var(--r-pill); cursor:pointer;
	font:inherit; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
	background:transparent; color:var(--ink-600);
	transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.zpr-mode[aria-pressed="true"] { background:var(--surface); color:var(--ink-900); box-shadow:0 1px 3px rgba(13,31,78,.12); }

.zpr-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.zpr-plans--four { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }

.zpr-plan {
	position:relative; display:flex; flex-direction:column; justify-content:space-between;
	padding:34px 30px; border-radius:22px;
	border:1px solid var(--ink-200); background:var(--surface);
	box-shadow:var(--sh-1);
}
.zpr-plans--four .zpr-plan { padding:30px 22px; }

.zpr-plan.is-popular {
	border-color:transparent; background:var(--grad-zipify); color:var(--fg-on-dark);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.17), 0 24px 60px rgba(13,31,78,.24);
}
.zpr-plan__flag {
	position:absolute; top:-12px; left:28px;
	padding:6px 14px; border-radius:var(--r-pill);
	background:var(--zip-yellow); color:var(--ink-900);
	font-size:10px; font-weight:900; letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
	box-shadow:0 6px 16px rgba(255,215,72,.32);
}

.zpr-plan__name {
	margin:0 0 14px; font-size:12px; font-weight:800;
	letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-500);
}
.zpr-plan__price { display:flex; align-items:baseline; gap:8px; margin:0 0 10px; }
.zpr-plan__amount {
	font-size:44px; font-weight:900; letter-spacing:-0.03em; line-height:1;
	color:var(--ink-900); font-variant-numeric:tabular-nums;
}
.zpr-plans--four .zpr-plan__amount { font-size:38px; }
/* "$1,069.20" is four glyphs longer than "$99" and will not sit on one line at
   the full size. Set server-side from the rendered price and re-set on toggle. */
.zpr-plan__amount--long { font-size:32px; }
.zpr-plan__per { font-size:14px; font-weight:600; white-space:nowrap; color:var(--ink-500); }

.zpr-plan__annual { margin:0 0 6px; font-size:14px; font-weight:800; color:#1a7f4b; }
.zpr-plan__for {
	margin:0 0 24px; padding-bottom:24px; border-bottom:1px solid var(--ink-200);
	font-size:15px; line-height:1.5; color:var(--ink-600);
}
.zpr-plan__head { margin:18px 0 12px; font-size:15px; font-weight:900; letter-spacing:-0.01em; color:var(--ink-900); }
.zpr-plan__list { gap:11px; margin:0; }
.zpr-plan__list li { font-size:15px; line-height:1.5; }
.zpr-plan__trial { margin:14px 0 0; font-size:13px; font-weight:700; text-align:center; color:var(--ink-500); }

.zpr-plan.is-popular .zpr-plan__name   { color:var(--zip-yellow); }
.zpr-plan.is-popular .zpr-plan__amount { color:#fff; }
.zpr-plan.is-popular .zpr-plan__per    { color:rgba(255,255,255,.6); }
.zpr-plan.is-popular .zpr-plan__annual { color:var(--zip-yellow); }
.zpr-plan.is-popular .zpr-plan__for    { color:rgba(255,255,255,.7); border-bottom-color:rgba(255,255,255,.14); }
.zpr-plan.is-popular .zpr-plan__head   { color:#fff; }
.zpr-plan.is-popular .zpr-plan__list li { color:rgba(255,255,255,.84); }
.zpr-plan.is-popular .zpr-plan__tick   { color:var(--zip-yellow); }
.zpr-plan.is-popular .zpr-plan__trial  { color:rgba(255,255,255,.7); }

/* ==========================================================================
   TABLES
   `<details>` rather than a scripted toggle, so the full ladder is in the DOM
   and readable with no JavaScript at all.
   ========================================================================== */

.zpr-all { border-radius:16px; border:1px solid var(--ink-200); background:var(--ink-050); overflow:hidden; }
.zpr-all__summary {
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:18px 24px; cursor:pointer; list-style:none;
	font-size:15px; font-weight:800; color:var(--zip-royal);
}
.zpr-all__summary::-webkit-details-marker { display:none; }
.zpr-all__sign { font-weight:700; transition:transform var(--dur-fast) var(--ease-out); }
.zpr-all[open] .zpr-all__sign { transform:rotate(45deg); }
.zpr-all__scroll { overflow-x:auto; background:var(--surface); border-top:1px solid var(--ink-200); }

.zpr-table { width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
.zpr-table--sr { min-width:560px; }
.zpr-table th {
	padding:12px 24px; text-align:left; border-bottom:1px solid var(--ink-200);
	font-size:10px; font-weight:800; letter-spacing:var(--ls-eyebrow);
	text-transform:uppercase; color:var(--ink-500);
}
.zpr-table td { padding:12px 24px; border-bottom:1px solid var(--ink-100); color:var(--ink-700); font-variant-numeric:tabular-nums; }
.zpr-table tr:last-child td { border-bottom:0; }
.zpr-table__price { font-weight:800; color:var(--ink-900); }
.zpr-table tr.is-here td { background:var(--yellow-200); color:#7a5200; }
.zpr-table tr.is-here .zpr-table__price { color:#8a5a00; }

/* ==========================================================================
   FOOTNOTES
   ========================================================================== */

.zpr-footnote { margin:18px 0 0; font-size:13px; line-height:1.55; color:var(--ink-500); }
/* A plan grid centres its footnote under the row; the calculators' sit left. */
.zpr-footnote--center { max-width:880px; margin-inline:auto; text-align:center; }

/* ==========================================================================
   §3 THE PLUS PANEL
   Sits inside a gradient frame drawn as a padded parent, so the outer and
   inner radii stay concentric. Same construction as Agency Partners §5, and
   the flat variant below reuses it for each calculator's closing note.
   ========================================================================== */

.zpr-plusband .zpx-wrap { padding-block:96px; }
/* Toggled by script on the three tabs the artboard does not show it on. */
[data-zpr-plus][hidden] { display:none; }

.zpr-frame {
	position:relative; padding:3px; border-radius:26px;
	background:linear-gradient(135deg,var(--zip-yellow) 0%,#f0a030 45%,#fd3e5d 100%);
	box-shadow:0 0 0 1px rgba(255,215,72,.28), 0 24px 60px rgba(13,31,78,.16);
}
.zpr-frame--plus { border-radius:30px; background:var(--grad-plus); box-shadow:0 26px 60px rgba(253,62,93,.16), 0 6px 16px rgba(13,31,78,.08); }
.zpr-frame__inner { padding:30px 32px; border-radius:23px; background:var(--surface); }
.zpr-frame__inner--split {
	padding:52px 44px; border-radius:27px;
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:center;
}
.zpr-frame__flag {
	position:absolute; top:-11px; left:30px; z-index:2;
	display:inline-flex; align-items:center; padding:5px 13px;
	border-radius:var(--r-pill); background:var(--zip-yellow); color:var(--ink-900);
	font-size:10px; font-weight:900; letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
	box-shadow:0 6px 16px rgba(255,215,72,.34);
}
.zpr-frame__flag--plus { top:-14px; left:44px; padding:7px 16px; font-size:11px; background:var(--grad-plus); }

/* Each calculator's closing note: the same frame, but flat yellow rather than
   a gradient, and a row rather than a stack. On One Click Upsell it names the
   ROI the panel turns on; on ShopRank, that the scan costs nothing. */
.zpr-frame--flat {
	border-radius:22px; background:var(--zip-yellow);
	box-shadow:0 0 0 1px rgba(255,215,72,.3), 0 18px 44px rgba(13,31,78,.12), 0 0 40px rgba(255,215,72,.18);
}
.zpr-frame--flat .zpr-frame__inner { border-radius:19px; }
.zpr-frame__inner--row { display:flex; align-items:flex-start; gap:16px; padding:26px 28px; }
.zpr-frame__glyph {
	display:flex; align-items:center; justify-content:center;
	width:40px; height:40px; flex:0 0 auto; border-radius:11px;
	background:var(--blue-900); color:var(--zip-yellow);
}
.zpr-frame__glyph svg { width:20px; height:20px; }
.zpr-frame__title { margin:0 0 6px; font-size:18px; font-weight:900; letter-spacing:-0.018em; color:var(--ink-900); }
.zpr-frame__body { margin:0; font-size:15px; line-height:1.55; color:var(--ink-600); }

.zpr-plus__brand { display:flex; align-items:center; gap:12px; margin:0 0 18px; }
.zpr-plus__mark {
	display:block; width:42px; height:42px; flex:0 0 auto; border-radius:12px;
	background-color:var(--blue-900); background-repeat:no-repeat;
	background-position:center; background-size:20px auto;
}
.zpr-plus__label { font-size:11px; font-weight:800; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:#8a5a00; }
.zpr-plus__cta { display:flex; flex-wrap:wrap; gap:12px; }
.zpr-plus__stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0; }
/* Figure over label, `dt` first in the DOM — as everywhere else in this port. */
.zpr-plus__stat {
	display:flex; flex-direction:column-reverse; gap:8px;
	padding:24px; border-radius:18px;
	border:1px solid var(--ink-200); background:var(--ink-050); text-align:center;
}
.zpr-plus__statvalue { margin:0; font-size:34px; font-weight:900; letter-spacing:-0.025em; line-height:1; color:var(--zip-royal); }
.zpr-plus__statlabel { font-size:14px; line-height:1.45; color:var(--ink-600); }

/* ==========================================================================
   §4 FAQ, §5 CLOSE
   ========================================================================== */

.zpr-faqband .zpx-wrap { padding-block:96px; }
/* The artboard centres the eyebrow over a left-aligned heading here, unlike
   every other head in the port. Kept: the questions below it are left-aligned
   too, and a centred heading over a left column reads as a mistake. */
.zpr-faqhead { margin-bottom:34px; }
.zpr-faqhead .zpx-eyebrow { text-align:center; }
.zpr-faqhead .zpx-h2 { margin:0; font-size:clamp(28px,3.2vw,40px); letter-spacing:-0.022em; line-height:1.06; }
[data-zpr-faq][hidden] { display:none; }

.zpr-close .zpx-wrap { padding-block:112px; text-align:center; }
/* The one yellow glow in the port — the artboard warms the close after a page
   of tables. `zpx_section_open()` only moves the gradient's centre. */
.zpr-close.zpx-band--glow::after { background:radial-gradient(760px 380px at var(--zpx-glow-at,50% 0%),rgba(255,215,72,.14),transparent 70%); }
.zpr-close .zpx-h2 { font-size:clamp(32px,4vw,56px); letter-spacing:-0.028em; line-height:1.02; }
.zpr-close__cta { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:36px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1100px) {
	.zpr-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.zpr-calc { grid-template-columns:minmax(0,1fr); gap:22px; }
	.zpr-plans--four { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}

@media (max-width:900px) {
	.zpr-plans { grid-template-columns:minmax(0,1fr); gap:26px; }
	.zpr-frame__inner--split { grid-template-columns:1fr; gap:32px; padding:36px 28px; }
}

@media (max-width:719px) {
	.zpr-open .zpx-wrap { padding:88px 20px 32px; }
	.zpr-band .zpx-wrap { padding:0 20px 56px; }
	.zpr-plusband .zpx-wrap,
	.zpr-faqband .zpx-wrap,
	.zpr-close .zpx-wrap { padding-block:64px; }

	.zpr-cards,
	.zpr-plans--four { grid-template-columns:minmax(0,1fr); }
	.zpr-cells { grid-template-columns:minmax(0,1fr); }
	.zpr-plus__stats { grid-template-columns:minmax(0,1fr); }
	/* One per row, so centring no longer balances a 2x2 block — it just floats
	   each figure away from the text edge the rest of the frame shares. */
	.zpr-plus__stat { text-align:left; }
	.zpr-card--on { transform:none; }
	.zpr-tabs { gap:8px; }
	.zpr-tab { gap:9px; padding:7px 18px 7px 8px; font-size:14px; }
	.zpr-tab__well { width:26px; height:26px; }
	.zpr-tab__mark { width:16px; height:16px; }
	.zpr-frame__inner--row { padding:22px 20px; }
}