/* ==========================================================================
   conv-a — pricing hub (pricing.html) and offers (deals.html). Prefix: pr-
   ========================================================================== */

/* page-level */
.pr-page [hidden] { display: none !important; }

/* ---------- hero: starting-price ledger ---------- */
.pr-hero { padding-bottom: 72px; }
.pr-hero__help { margin-top: 18px; font-size: 0.92rem; color: var(--muted); }
.pr-ledger { position: relative; padding: 22px 24px 18px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.pr-ledger::before { content: ""; position: absolute; inset: 10px; z-index: -1; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); transform: rotate(-2.2deg) translate(-8px, 10px); opacity: 0.7; }
.pr-ledger__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--line-2); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.pr-ledger__head strong { color: var(--ink); font-weight: 500; }
.pr-ledger__list, .pr-incs, .pr-terms, .pr-steps3 { list-style: none; margin: 0; padding: 0; }
.pr-ledger__list li + li a { border-top: 1px solid var(--line); }
.pr-ledger__list a { display: flex; align-items: center; gap: 12px; padding: 11px 2px; color: var(--ink-2); transition: color 0.2s, padding 0.3s var(--ease); }
.pr-ledger__list a:hover { color: var(--ink); padding-left: 6px; }
.pr-ledger__list a:hover .pr-ledger__price { color: var(--accent); }
.pr-ledger__n { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); width: 18px; flex: none; }
.pr-ledger__name { display: flex; flex-direction: column; font-weight: 540; font-size: 0.97rem; color: var(--ink); line-height: 1.25; }
.pr-ledger__name small { font-family: var(--mono); font-size: 0.7rem; font-weight: 400; color: var(--faint); margin-top: 2px; }
.pr-ledger__dots { flex: 1; min-width: 12px; height: 1px; align-self: center; background-image: linear-gradient(90deg, var(--line-2) 50%, transparent 50%); background-size: 6px 1px; }
.pr-ledger__price { font-family: var(--mono); font-size: 0.98rem; color: var(--ink); white-space: nowrap; transition: color 0.2s; }
.pr-ledger__price i { font-style: normal; font-size: 0.7rem; color: var(--faint); margin-right: 2px; }
.pr-ledger__price small { font-size: 0.74rem; color: var(--faint); }
.pr-ledger__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 0.82rem; color: var(--muted); }
.pr-ledger__foot span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.72rem; }
.pr-ledger__foot svg { width: 14px; height: 14px; }
.pr-ledger__foot a { color: var(--accent); font-weight: 560; }

/* ---------- sticky numbered sub-nav ---------- */
.pr-subnav a { display: inline-flex; align-items: baseline; gap: 7px; }
.pr-subnav a b { font-family: var(--mono); font-size: 0.68rem; font-weight: 400; color: var(--faint); transition: color 0.2s; }
.pr-subnav a.is-active b, .pr-subnav a:hover b { color: var(--accent); }

/* ---------- principles band ---------- */
.pr-principles { padding: 56px 0 72px; }
.pr-facts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.pr-fact { padding: 24px 24px 26px; border-right: 1px solid var(--line); }
.pr-fact:last-child { border-right: 0; }
.pr-fact > svg { width: 22px; height: 22px; color: var(--accent); }
.pr-fact h3 { font-size: 1.02rem; font-weight: 580; letter-spacing: -0.02em; margin: 14px 0 6px; }
.pr-fact p { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }

/* ---------- product sections ---------- */
.pr-sec { position: relative; padding: 104px 0; border-top: 1px solid var(--line); }
.pr-sec--alt { background: color-mix(in srgb, var(--bg-2) 55%, var(--bg)); }
.pr-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px 48px; margin-bottom: 44px; }
.pr-head__text { flex: 1 1 520px; max-width: 680px; }
.pr-head__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.pr-head__aside:empty { display: none; }
.pr-num { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pr-num b { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 999px; font-weight: 500; letter-spacing: 0.02em; background: var(--inv-bg); color: var(--inv-ink); }
.pr-head h2 { font-size: clamp(2.1rem, 4vw, 3.15rem); letter-spacing: -0.048em; line-height: 1.02; margin: 16px 0 14px; }
.pr-head p { color: var(--muted); font-size: 1.05rem; max-width: 640px; }
.pr-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 0.86rem; color: var(--ink-2); }
.pr-meta span { display: inline-flex; align-items: center; gap: 7px; }
.pr-meta svg { width: 16px; height: 16px; color: var(--accent); }
.pr-head .toggle-wrap { margin: 0; justify-content: flex-end; }
.pr-head .billing-toggle button { padding: 8px 16px; font-size: 0.88rem; }
.pr-aside-note { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--muted); }
.pr-foot { margin-top: 26px; font-size: 0.88rem; color: var(--muted); max-width: 920px; }
.pr-foot a { color: var(--accent); font-weight: 560; white-space: nowrap; }
.pr-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pr-fair { color: inherit; font-weight: 600; text-decoration: underline dotted; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.pr-fair:hover { color: var(--accent); }
.plan--featured .pr-fair { text-decoration-color: var(--inv-muted); }

/* plan cards inside the hub: a touch more compact than on product pages */
.pr-sec .plan { padding: 28px 22px 24px; }
.pr-sec .plan__desc { min-height: 2.9em; }
.pr-sec .plan__price { margin-top: 18px; }
.pr-sec .plan__price .amt { font-size: 2.8rem; }
.pr-billed { margin-top: 4px; min-height: 1.4em; font-size: 0.84rem; color: var(--muted); }
.pr-billed b { color: var(--green); font-weight: 560; }
.pr-renew { margin-top: 3px; font-family: var(--mono); font-size: 0.74rem; color: var(--faint); }
.pr-sec .plan .btn { margin: 20px 0 22px; }
/* the cards of a row share one set of row tracks, so a two-line description in one card
   doesn't push its price, button and feature list below the others */
@supports (grid-template-rows: subgrid) {
  .pr-sec .pricing > .plan { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .pr-sec .pricing > .plan .plan__desc { min-height: 0; }
  .pr-sec .pricing > .plan > .btn { align-self: start; }
  .pr-sec .pricing > .plan > .plan__more { justify-self: start; align-self: start; }
}
.pr-sec .plan--featured .plan__ribbon { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.plan--featured .pr-billed { color: var(--inv-muted); }
.plan--featured .pr-billed b { color: color-mix(in srgb, var(--green) 65%, var(--inv-ink)); }
.plan--featured .pr-renew { color: color-mix(in srgb, var(--inv-muted) 85%, transparent); }

.pr-swipe { display: none; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.pr-swipe svg { width: 14px; height: 14px; }

/* expandable comparison tables */
.pr-compare { margin-top: 30px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.pr-compare > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; font-weight: 580; color: var(--ink); transition: background 0.2s; }
.pr-compare > summary::-webkit-details-marker { display: none; }
.pr-compare > summary:hover { background: var(--bg); }
.pr-compare > summary small { margin-left: 8px; font-family: var(--mono); font-size: 0.74rem; font-weight: 400; color: var(--faint); }
.pr-compare > summary .ic { width: 18px; height: 18px; color: var(--muted); transition: transform 0.35s var(--ease); }
.pr-compare[open] > summary .ic { transform: rotate(180deg); }
.pr-compare .table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.pr-compare .compare th[scope="row"] { font-weight: 400; text-align: left; color: var(--muted); }
.pr-compare .compare tbody tr:last-child > * { border-bottom: 0; }
.pr-compare .compare thead th:first-child, .pr-compare .compare tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--card); }
.pr-compare .compare tr.group th { position: sticky; left: 0; z-index: 1; text-align: left; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); background: var(--bg); white-space: nowrap; }
.pr-compare .compare tr.group td { background: var(--bg); }

/* data tables (reseller, SSL, VPS, dedicated) */
.pr-tablewrap { position: relative; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow-x: auto; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.pr-table th, .pr-table td { padding: 17px 18px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.pr-table thead th { padding-top: 13px; padding-bottom: 13px; font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); background: var(--bg); white-space: nowrap; }
.pr-table tbody tr:last-child > * { border-bottom: 0; }
.pr-table tbody tr { transition: background 0.2s; }
.pr-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 3.5%, transparent); }
.pr-table tbody tr.is-hl { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pr-table tbody tr.is-hl > th { box-shadow: inset 3px 0 0 var(--accent); }
.pr-table .num { font-family: var(--mono); font-size: 0.88rem; color: var(--ink); white-space: nowrap; }
.pr-table .pr-dim { color: var(--muted); }
.pr-name strong { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 1rem; font-weight: 580; color: var(--ink); letter-spacing: -0.015em; }
.pr-name small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: var(--faint); }
.pr-name .badge { font-size: 0.68rem; padding: 2px 8px; }
.pr-table .pr-price { text-align: right; white-space: nowrap; }
.pr-price strong { font-size: 1.3rem; font-weight: 560; letter-spacing: -0.04em; color: var(--ink); }
.pr-price .amt { display: inline-block; }
.pr-price > small { font-size: 0.82rem; color: var(--muted); }
.pr-price .pr-sub { display: block; margin-top: 2px; font-family: var(--mono); font-size: 0.7rem; color: var(--faint); }
.pr-sv { font-style: normal; white-space: nowrap; }
.pr-sv::before { content: "\00a0·\00a0"; }
.pr-table .pr-act { width: 1%; text-align: right; white-space: nowrap; }
.pr-table .pr-act .btn { min-width: 92px; }
.pr-free-row { background: color-mix(in srgb, var(--green) 5%, transparent); }
.pr-table--ded td:not(.pr-price):not(.pr-act) { font-size: 0.87rem; }
.pr-table--ded tbody tr.is-hidden { display: none; }
/* seven columns: price and button take only what they need, so storage and locations
   get room to sit on one or two lines instead of four */
.pr-table--ded th, .pr-table--ded td { padding-left: 14px; padding-right: 14px; }
.pr-table--ded td[data-label="Memory"] { min-width: 104px; }
.pr-table--ded td.pr-stack { min-width: 196px; }
.pr-table--ded td[data-label="Locations"] { min-width: 152px; }
.pr-table--ded .pr-ready { padding: 4px 9px; font-size: 0.69rem; letter-spacing: -0.01em; }
.pr-table--ded .pr-price, .pr-table--ded .pr-act { width: 1%; }
.pr-table--ded .pr-name strong { white-space: nowrap; }
.pr-nw { white-space: nowrap; }
.pr-stack small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); }
.pr-srv { display: flex; align-items: center; gap: 14px; }
.pr-srv .server__chip { width: 42px; height: 42px; border-radius: 10px; font-size: 0.58rem; }
.pr-ready { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: 0.72rem; white-space: nowrap; background: var(--green-soft); color: var(--green); }
.pr-ready svg { width: 13px; height: 13px; }
.pr-ready--bto { background: color-mix(in srgb, var(--amber) 14%, transparent); color: color-mix(in srgb, var(--amber) 70%, var(--ink)); }
.pr-empty { padding: 28px; text-align: center; color: var(--muted); }

/* filter chips (dedicated) */
.pr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.pr-filters > svg { width: 18px; height: 18px; color: var(--faint); margin-right: 4px; }
.pr-filter { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 0.88rem; font-weight: 520; color: var(--muted); transition: color 0.2s, border-color 0.2s, background 0.2s; }
.pr-filter span { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); }
.pr-filter:hover { color: var(--ink); border-color: var(--line-2); }
.pr-filter.is-active { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-ink); }
.pr-filter.is-active span { color: var(--inv-muted); }

/* chips row under the reseller table */
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pr-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 0.86rem; color: var(--ink-2); }
.pr-chips svg { width: 14px; height: 14px; color: var(--green); }

/* email: cards + example aside */
.pr-email { display: grid; grid-template-columns: 1fr 250px; gap: 14px; align-items: stretch; }
.pr-example { display: flex; flex-direction: column; gap: 12px; padding: 26px 22px; border-radius: var(--radius-lg); border: 1px dashed var(--line-2); background: var(--card); }
.pr-example__k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.pr-example p strong { font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.3; display: block; }
.pr-example dl { margin: 4px 0 0; display: grid; gap: 0; }
.pr-example dl div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.86rem; }
.pr-example dt { color: var(--muted); }
.pr-example dd { margin: 0; font-family: var(--mono); color: var(--ink); white-space: nowrap; }
.pr-example .link { margin-top: auto; font-size: 0.9rem; }

/* SSL callout */
.pr-callout { margin: 18px 0 0; }
.pr-callout strong { color: var(--ink); }

/* VPS / dedicated footers: add-on price list + link cards */
.pr-vps-foot { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; margin-top: 14px; }
.pr-addons-inline { padding: 22px 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.pr-addons-inline h3 { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.pr-addons-inline ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.pr-addons-inline li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-2); }
.pr-addons-inline { display: flex; flex-direction: column; }
.pr-addons-inline__note { margin-top: auto; padding-top: 14px; font-size: 0.8rem; color: var(--faint); }
.pr-addons-inline li b { font-family: var(--mono); font-size: 0.84rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.pr-links { display: grid; gap: 8px; align-content: start; }
.pr-links a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: border-color 0.2s, transform 0.3s var(--ease); }
.pr-links a:hover { border-color: var(--accent); transform: translateY(-2px); }
.pr-links a > svg:first-child { width: 36px; height: 36px; padding: 8px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.pr-links a > svg:last-child { width: 16px; height: 16px; margin-left: auto; color: var(--faint); transition: transform 0.3s var(--ease), color 0.2s; }
.pr-links a:hover > svg:last-child { transform: translateX(3px); color: var(--accent); }
.pr-links strong { display: block; font-size: 0.95rem; font-weight: 580; }
.pr-links small { display: block; font-size: 0.82rem; color: var(--muted); }

/* domains */
.pr-dsearch { max-width: 680px; margin: 0 0 22px; }
.pr-tlds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pr-tld { position: relative; display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: border-color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s; }
.pr-tld:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.pr-tld__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-height: 30px; }
.pr-tld__top .badge { font-size: 0.66rem; padding: 2px 8px; }
.pr-tld__name { font-size: 1.55rem; font-weight: 560; letter-spacing: -0.04em; line-height: 1.1; }
.pr-tld__reg { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.pr-tld__reg strong { font-size: 1.3rem; font-weight: 560; letter-spacing: -0.035em; }
.pr-tld__reg small { font-size: 0.8rem; color: var(--muted); }
.pr-tld dl { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 3px; }
.pr-tld dl div { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; }
.pr-tld dt { color: var(--muted); }
.pr-tld dd { margin: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--ink); }
.pr-tld--jump dl div:first-child dd { color: color-mix(in srgb, var(--amber) 75%, var(--ink)); }
.pr-tld__note { margin-top: 8px; font-family: var(--mono); font-size: 0.7rem; color: var(--faint); }
/* cards in a row share row tracks: a "Free with hosting" badge or a note in one card keeps
   the prices and renewal lines of its neighbours on the same line */
@supports (grid-template-rows: subgrid) {
  .pr-tlds > .pr-tld { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .pr-tld__top { align-self: start; }
}

/* add-ons price lists + support tiers */
.pr-pricelists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pr-pricelist { padding: 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pr-pricelist h3 { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; font-weight: 580; letter-spacing: -0.02em; margin-bottom: 10px; }
.pr-pricelist h3 svg { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.pr-pricelist li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-2); }
.pr-pricelist li span small { display: block; font-size: 0.78rem; color: var(--faint); }
.pr-pricelist li b { font-family: var(--mono); font-size: 0.84rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.pr-subhead { margin: 56px 0 18px; font-size: 1.5rem; letter-spacing: -0.035em; }
.pr-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pr-tier { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.pr-tier__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pr-tier__top h3 { font-size: 1.15rem; font-weight: 580; letter-spacing: -0.025em; }
.pr-tier__price strong { font-size: 1.5rem; font-weight: 560; letter-spacing: -0.04em; }
.pr-tier__price small { font-size: 0.8rem; color: var(--muted); }
.pr-tier__sub { font-size: 0.9rem; color: var(--muted); }
.pr-tier .check-list { gap: 8px; margin-bottom: 6px; }
.pr-tier .check-list li { font-size: 0.88rem; }
.pr-tier .btn, .pr-tier__inc { margin-top: auto; align-self: flex-start; }
.pr-tier__inc { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 0.88rem; font-weight: 560; }
.pr-tier--free { background: color-mix(in srgb, var(--green) 4%, var(--card)); }

/* included-free list */
.pr-inc-head { max-width: 720px; margin-bottom: 44px; }
.pr-incs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--line); }
.pr-inc { display: grid; grid-template-columns: 26px 40px 1fr auto; align-items: start; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.pr-inc__n { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); padding-top: 11px; }
.pr-inc__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); color: var(--accent); }
.pr-inc__icon svg { width: 19px; height: 19px; }
.pr-inc h3 { font-size: 1.02rem; font-weight: 580; letter-spacing: -0.02em; margin: 2px 0 4px; }
.pr-inc p { font-size: 0.88rem; color: var(--muted); }
.pr-inc__val { margin-top: 4px; padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: 0.7rem; white-space: nowrap; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); }
.pr-inc__val--free { color: var(--green); background: var(--green-soft); border-color: transparent; }

/* ---------- estimator ---------- */
.pr-est { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.pr-est__main { min-width: 0; padding: 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pr-est__presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pr-est__presets > span, .pr-est__label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }
.pr-chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 0.86rem; font-weight: 520; color: var(--ink-2); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.pr-chip:hover { border-color: var(--ink); color: var(--ink); }
.pr-chip.is-active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.pr-est__lines { display: grid; }
.pr-line { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 118px 34px; grid-template-areas: "prod price price rm" "plan term qty ." "extra extra extra ."; align-items: center; gap: 12px 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pr-line__prod { grid-area: prod; }
.pr-line > .pr-field--plan { grid-area: plan; }
.pr-line > .pr-field--term { grid-area: term; }
.pr-line > .pr-qty { grid-area: qty; }
.pr-line__price { grid-area: price; }
.pr-line__rm { grid-area: rm; justify-self: end; }
.pr-line__extra { grid-area: extra; }
.pr-line.is-new { animation: pr-in 0.5s var(--ease); }
@keyframes pr-in { from { opacity: 0; transform: translateY(8px); } }
.pr-line__prod { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pr-line__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.pr-line__icon svg { width: 18px; height: 18px; }
.pr-line__prod strong { display: block; font-size: 0.93rem; font-weight: 580; line-height: 1.25; }
.pr-line__prod small { display: block; font-size: 0.74rem; color: var(--faint); line-height: 1.3; }
.pr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-field > span { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.pr-field select { width: 100%; height: 40px; padding: 0 30px 0 11px; border-radius: 10px; border: 1px solid var(--line); background-color: var(--bg); font-size: 0.88rem; color: var(--ink); outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9aa2' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; text-overflow: ellipsis; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.pr-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.pr-step { display: flex; align-items: center; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.pr-step button { width: 32px; height: 100%; flex: none; display: grid; place-items: center; color: var(--muted); transition: background 0.2s, color 0.2s; }
.pr-step button:hover { background: var(--bg-2); color: var(--ink); }
.pr-step button svg { width: 14px; height: 14px; }
.pr-step input { width: 100%; min-width: 0; height: 100%; border: 0; background: none; text-align: center; font-family: var(--mono); font-size: 0.9rem; color: var(--ink); outline: none; -moz-appearance: textfield; }
.pr-step input::-webkit-outer-spin-button, .pr-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-step:focus-within { border-color: var(--accent); }
.pr-line__price { text-align: right; }
.pr-line__price strong { display: block; font-size: 1.08rem; font-weight: 560; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pr-line__price small { display: block; font-family: var(--mono); font-size: 0.68rem; color: var(--faint); line-height: 1.4; }
.pr-line__price s { color: var(--faint); font-weight: 400; font-size: 0.86rem; margin-right: 4px; }
.pr-line__rm { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--faint); transition: background 0.2s, color 0.2s; }
.pr-line__rm:hover { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }
.pr-line__rm svg { width: 15px; height: 15px; }
.pr-line__extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: -2px; font-size: 0.82rem; color: var(--muted); }
.pr-line__extra:empty { display: none; }
.pr-line__extra label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pr-line__extra input { width: 16px; height: 16px; accent-color: var(--accent); }
.pr-line__perk { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 520; }
.pr-line__perk svg { width: 14px; height: 14px; }
.pr-est__empty { display: flex; align-items: center; gap: 14px; padding: 28px 4px; color: var(--muted); border-bottom: 1px solid var(--line); }
.pr-est__empty svg { width: 30px; height: 30px; color: var(--faint); flex: none; }
.pr-est__add { padding-top: 18px; }
.pr-est__addbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pr-add { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px dashed var(--line-2); font-size: 0.87rem; font-weight: 520; color: var(--ink-2); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.pr-add svg { width: 16px; height: 16px; color: var(--accent); }
.pr-add:hover { border-style: solid; border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.pr-est__noscript { margin-top: 16px; color: var(--muted); }

.pr-sum { position: sticky; top: calc(var(--nav-h) + 64px); padding: 26px; border-radius: var(--radius-lg); background: var(--inv-bg); color: var(--inv-muted); box-shadow: var(--shadow-lg); }
.pr-sum__print { display: none; }
.pr-sum h3 { font-size: 1.1rem; color: var(--inv-ink); margin-bottom: 16px; letter-spacing: -0.02em; }
.pr-sum__rows { display: grid; gap: 9px; padding-bottom: 16px; border-bottom: 1px dashed color-mix(in srgb, var(--inv-ink) 22%, transparent); font-size: 0.9rem; }
.pr-sum__rows > div { display: flex; justify-content: space-between; gap: 12px; }
.pr-sum__rows > div[hidden] { display: none; }
.pr-sum__rows b { font-family: var(--mono); font-weight: 500; font-size: 0.86rem; color: var(--inv-ink); white-space: nowrap; }
.pr-sum__disc b, .pr-sum__disc span { color: color-mix(in srgb, var(--green) 70%, var(--inv-ink)); }
.pr-sum__total { margin: 16px 0 18px; }
.pr-sum__total small { font-size: 0.82rem; }
.pr-sum__total strong { display: block; margin-top: 2px; color: var(--inv-ink); font-size: clamp(2.2rem, 3.4vw, 2.7rem); font-weight: 520; letter-spacing: -0.055em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pr-sum__kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; margin: 0 0 20px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--inv-ink) 14%, transparent); }
.pr-sum__kpis div { display: flex; flex-direction: column; justify-content: space-between; padding: 10px; background: var(--inv-bg); }
.pr-sum__kpis div:first-child { border-radius: 12px 0 0 12px; }
.pr-sum__kpis dt { font-size: 0.68rem; line-height: 1.3; color: var(--inv-muted); }
.pr-sum__kpis dd { margin: 4px 0 0; font-family: var(--mono); font-size: 0.8rem; color: var(--inv-ink); white-space: nowrap; }
.pr-sum__kpis { background: none; border: 1px solid color-mix(in srgb, var(--inv-ink) 14%, transparent); }
.pr-sum__kpis div + div { border-left: 1px solid color-mix(in srgb, var(--inv-ink) 14%, transparent); }
.pr-sum__kpis div:first-child { border-radius: 0; }
.pr-sum .btn--primary { background: var(--accent); color: #fff; }
.pr-sum .btn--primary:hover { background: var(--accent-2); }
.pr-sum__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pr-sum__row2 .btn { padding: 0 10px; color: var(--inv-ink); border-color: color-mix(in srgb, var(--inv-ink) 22%, transparent); background: transparent; }
.pr-sum__row2 .btn:hover { border-color: var(--inv-ink); }
.pr-sum .btn svg { width: 15px; height: 15px; }
.pr-sum .btn:hover svg { transform: none; }
.pr-sum__note { margin-top: 14px; font-size: 0.76rem; line-height: 1.5; }

/* billing FAQ side contacts */
.pr-faq-contact { display: grid; gap: 8px; margin-top: 28px; max-width: 360px; }
.pr-faq-contact a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); font-family: var(--mono); font-size: 0.86rem; color: var(--ink); transition: border-color 0.2s; }
.pr-faq-contact a:hover { border-color: var(--accent); }
.pr-faq-contact svg { width: 20px; height: 20px; color: var(--accent); }
.pr-faq-contact small { display: block; font-family: var(--font); font-size: 0.76rem; color: var(--muted); }

/* pay-with list (FAQ column) */
.pr-paywith { margin-top: 24px; max-width: 360px; }
.pr-paywith > span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.pr-paywith > span svg { width: 15px; height: 15px; }
.pr-paywith ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pr-paywith li { padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); font-family: var(--mono); font-size: 0.74rem; color: var(--ink-2); }

/* ==========================================================================
   deals.html
   ========================================================================== */
.pr-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pr-jump a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 0.9rem; font-weight: 540; color: var(--ink); transition: border-color 0.2s, background 0.2s; }
.pr-jump a:hover { border-color: var(--ink); }
.pr-jump a span { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); }

/* example order (hero visual) */
.pr-order { padding: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.pr-order__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--bg); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.pr-order__bar b { color: var(--ink); font-weight: 500; }
.pr-order__body { padding: 8px 20px 4px; }
.pr-order__line { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pr-order__line strong { font-size: 0.95rem; font-weight: 560; }
.pr-order__line small { grid-column: 1; font-size: 0.8rem; color: var(--muted); }
.pr-order__line > span { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font-family: var(--mono); font-size: 0.88rem; color: var(--ink); white-space: nowrap; }
.pr-order__line s { display: block; font-size: 0.74rem; color: var(--faint); }
.pr-order__free { color: var(--green) !important; font-weight: 600; }
.pr-order__sum { padding: 12px 20px 16px; display: grid; gap: 6px; font-size: 0.88rem; }
.pr-order__sum div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.pr-order__sum b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.pr-order__sum .pr-order__total { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line-2); color: var(--ink); font-weight: 580; }
.pr-order__sum .pr-order__total b { font-size: 1.15rem; }
.pr-order__foot { display: flex; align-items: center; gap: 10px; padding: 13px 20px; background: var(--accent-soft); color: var(--ink-2); font-size: 0.84rem; }
.pr-order__foot svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.pr-order-wrap { position: relative; padding: 24px 0 30px; }
.pr-order-tag { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 0.82rem; font-weight: 560; color: var(--ink); white-space: nowrap; animation: bob 7s ease-in-out infinite; }
.pr-order-tag svg { width: 16px; height: 16px; color: var(--green); }
/* the tags sit on the card's edge, clear of the bar text and the footer note (bob lifts them 8px) */
.pr-order-tag--a { top: -4px; right: 22px; }
.pr-order-tag--b { bottom: -6px; left: 28px; animation-delay: -3s; }

/* standing offers bento */
.pr-offers .tile { gap: 10px; }
.pr-offer__k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pr-offer__k svg { width: 16px; height: 16px; color: var(--accent); }
.pr-offers .tile h3 { font-size: 1.35rem; }
.pr-offers .pr-offer--hero h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.04em; line-height: 1.1; }
.pr-offer__cta { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 560; color: var(--accent); }
.pr-offer__cta svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.pr-offer__cta:hover svg { transform: translateX(3px); }
.pr-offer__fine { font-size: 0.8rem !important; color: var(--faint) !important; }
/* the three small "pay less" tiles share row tracks: a two-line title in one of them keeps
   the big figures, text and links of all three on the same lines */
@supports (grid-template-rows: subgrid) {
  .pr-payless .bento > .tile:not(.tile--w3) { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
  .pr-payless .bento > .tile:not(.tile--w3) > .pr-offer__cta { align-self: end; justify-self: start; }
}
.pr-domchips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 4px; }
.pr-domchip { padding: 16px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.pr-domchip b { display: block; font-size: 1.4rem; font-weight: 560; letter-spacing: -0.04em; color: var(--ink); }
.pr-domchip span { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-family: var(--mono); font-size: 0.82rem; }
.pr-domchip s { color: var(--faint); }
.pr-domchip em { font-style: normal; color: var(--green); font-weight: 500; }
.pr-domchip small { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--faint); }
.pr-mini { width: 100%; border-collapse: collapse; margin: 8px 0 2px; font-size: 0.88rem; }
.pr-mini th, .pr-mini td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.pr-mini th:first-child, .pr-mini td:first-child { text-align: left; }
.pr-mini th + th, .pr-mini td + td { padding-left: 14px; }
.pr-mini thead th { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.pr-mini td { font-family: var(--mono); font-size: 0.84rem; color: var(--ink); }
.pr-mini td:first-child { font-family: var(--font); font-weight: 540; }
.pr-mini s { color: var(--faint); }
.pr-mini .pr-save { color: var(--green); }
.pr-big { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 2px; }
.pr-big strong { font-size: clamp(2.2rem, 3.6vw, 2.8rem); font-weight: 520; letter-spacing: -0.06em; line-height: 1; color: var(--ink); }
.pr-big s { font-family: var(--mono); font-size: 0.92rem; color: var(--faint); }
.pr-big small { font-size: 0.86rem; color: var(--muted); }

/* the maths table */
.pr-maths .pr-table td.pr-save { color: var(--green); }
.pr-maths .pr-table tr.is-hl .pr-save { font-weight: 600; }
@media (min-width: 1041px) {
  .pr-maths .pr-table thead th:last-child, .pr-maths .pr-table td.pr-save { text-align: right; }
}
.pr-maths__note { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.pr-maths__note div { padding: 18px 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); }
.pr-maths__note strong { display: block; margin-bottom: 4px; font-size: 0.95rem; color: var(--ink); }

/* coupons */
.pr-coupons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pr-coupon { --notch: 11px; position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.pr-coupon:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pr-coupon__top { position: relative; padding: 22px 22px 20px; border-bottom: 1px dashed var(--line-2); }
.pr-coupon__top::before, .pr-coupon__top::after { content: ""; position: absolute; bottom: calc(var(--notch) * -1); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.pr-coupon__top::before { left: calc(var(--notch) * -1 - 1px); clip-path: inset(0 0 0 50%); }
.pr-coupon__top::after { right: calc(var(--notch) * -1 - 1px); clip-path: inset(0 50% 0 0); }
.pr-sec--alt .pr-coupon__top::before, .pr-sec--alt .pr-coupon__top::after { background: color-mix(in srgb, var(--bg-2) 55%, var(--bg)); }
.pr-coupon__disc { display: flex; align-items: baseline; gap: 8px; }
.pr-coupon__disc strong { font-size: 2.6rem; font-weight: 520; letter-spacing: -0.06em; line-height: 1; color: var(--ink); }
.pr-coupon__disc span { font-size: 0.9rem; color: var(--muted); }
.pr-coupon__prod { display: inline-flex; margin-top: 12px; }
.pr-coupon__top h3 { margin-top: 12px; min-height: 2.6em; font-size: 1.08rem; font-weight: 580; letter-spacing: -0.02em; line-height: 1.3; }
.pr-coupon__body { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; flex: 1; }
.pr-code { display: flex; align-items: stretch; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft); overflow: hidden; }
.pr-code code { flex: 1; display: flex; align-items: center; padding: 0 14px; border: 0; background: none; font-family: var(--mono); font-size: 1rem; font-weight: 500; letter-spacing: 0.08em; color: var(--accent); }
.pr-code button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-left: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); font-size: 0.84rem; font-weight: 560; color: var(--accent); transition: background 0.2s; }
.pr-code button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pr-code button svg { width: 15px; height: 15px; }
.pr-coupon__ex { font-size: 0.86rem; color: var(--ink-2); }
.pr-coupon__terms { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.pr-coupon__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.82rem; }
.pr-coupon__meta span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); }
.pr-coupon__meta svg { width: 14px; height: 14px; }
.pr-coupon__meta a { color: var(--accent); font-weight: 560; white-space: nowrap; }
/* coupons in a row share their two row tracks, so the dashed tear line sits at one height */
@supports (grid-template-rows: subgrid) {
  .pr-coupons > .pr-coupon { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}
/* below 1180px a coupon is too narrow for the expiry and the link on one line; put them on
   two lines in every card, not just in the ones with a long link */
@media (max-width: 1180px) {
  .pr-coupon__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.pr-coupons-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 26px; border-radius: var(--radius-lg); border: 1px dashed var(--line-2); color: var(--muted); }
.pr-coupons-empty svg { width: 26px; height: 26px; color: var(--faint); flex: none; }
.pr-coupons-empty a { color: var(--accent); font-weight: 560; }
.pr-coupons-note { margin-top: 18px; font-size: 0.86rem; color: var(--muted); }
.pr-campaign { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 24px; margin-bottom: 18px; padding: 24px 26px; border-radius: var(--radius-lg); background: var(--inv-bg); color: var(--inv-muted); }
.pr-campaign h3 { color: var(--inv-ink); font-size: 1.25rem; letter-spacing: -0.025em; }
.pr-campaign p { font-size: 0.92rem; margin-top: 4px; }
.pr-campaign > svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--inv-ink); }
.pr-campaign .btn { background: var(--accent); color: #fff; }

/* offer terms */
.pr-terms { counter-reset: t; display: grid; border-top: 1px solid var(--line); }
.pr-terms li { counter-increment: t; display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 0.97rem; }
.pr-terms li::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); font-size: 0.78rem; color: var(--faint); padding-top: 3px; }
.pr-terms li strong { color: var(--ink); }
.pr-terms a { color: var(--accent); font-weight: 560; }

/* referral + alerts */
.pr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pr-panel { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pr-panel h3 { font-size: 1.5rem; letter-spacing: -0.035em; line-height: 1.15; }
.pr-panel > p { color: var(--muted); }
.pr-panel--dark { background: var(--space); border-color: transparent; color: rgba(255, 255, 255, 0.7); background-image: radial-gradient(90% 80% at 100% 0%, rgba(80, 110, 255, 0.35), transparent 60%); }
.pr-panel--dark h3 { color: #fff; }
.pr-panel--dark > p { color: rgba(255, 255, 255, 0.7); }
.pr-panel--dark .pr-offer__k { color: rgba(255, 255, 255, 0.55); }
.pr-panel--dark .pr-offer__k svg { color: #9fb0ff; }
/* three steps as one numbered list: a row each, so no step is squeezed into a 160px column */
.pr-steps3 { display: grid; margin: 6px 0 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.pr-steps3 li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 12px 16px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); }
.pr-steps3 li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pr-steps3 li b { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; color: #9fb0ff; }
.pr-panel--dark .btn--white { align-self: flex-start; margin-top: auto; }
.pr-alert { display: flex; gap: 8px; margin-top: 4px; }
.pr-alert .field { flex: 1; margin: 0; }
.pr-alert .btn { height: auto; min-height: 48px; }
.pr-alert-note { font-size: 0.8rem; color: var(--faint); }
.pr-alert-note a { color: var(--accent); }
.pr-panel .form-status { margin-top: 0; }

/* ---------- print: the estimate only ---------- */
@media print {
  /* print the estimate on paper colours even when the dark theme is on */
  html.pr-print, html.pr-print[data-theme] { color-scheme: light; --bg: #fff; --bg-2: #f4f4f1; --card: #fff; --ink: #0b0b0d; --ink-2: #34343a; --muted: #55555c; --faint: #85858d; --line: #d9d8d2; --line-2: #c9c8c1; --accent: #2b4bff; --accent-soft: #e8ecff; --green: #0f9f58; --green-soft: #e3f6ec; }
  html.pr-print body > *:not(main), html.pr-print main > *:not(#estimate) { display: none !important; }
  html.pr-print body { background: #fff; color: #000; }
  html.pr-print #estimate { padding: 0; border: 0; background: #fff; }
  html.pr-print .pr-head__aside, html.pr-print .pr-est__presets, html.pr-print .pr-est__add, html.pr-print .pr-line__rm, html.pr-print .pr-sum__actions, html.pr-print .pr-step button { display: none !important; }
  html.pr-print .pr-est { grid-template-columns: 1fr; }
  html.pr-print .pr-est__main, html.pr-print .pr-sum { position: static; box-shadow: none; border: 1px solid #ccc; background: #fff; color: #333; }
  html.pr-print .pr-sum h3, html.pr-print .pr-sum b, html.pr-print .pr-sum strong, html.pr-print .pr-sum dd { color: #000 !important; }
  html.pr-print .pr-sum { --inv-bg: #fff; --inv-ink: #000; --inv-muted: #555; }
  html.pr-print .pr-sum__print { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 0.8rem; }
  html.pr-print .reveal, html.pr-print .split .w > span { opacity: 1 !important; transform: none !important; }
  html.pr-print .pr-field select { border: 0; background: none; padding: 0; height: auto; }
  html.pr-print .pr-sum__kpis, html.pr-print .pr-sum__kpis div { background: #fff !important; border-color: #ccc !important; }
  html.pr-print .pr-sum__kpis dt, html.pr-print .pr-sum__note, html.pr-print .pr-sum__total small { color: #555 !important; }
}

/* ---------- responsive ---------- */
/* the dedicated table has the most columns, so it turns into stacked rows before the others */
@media (min-width: 1041px) and (max-width: 1180px) {
  .pr-table--ded thead { display: none; }
  .pr-table--ded, .pr-table--ded tbody, .pr-table--ded tr, .pr-table--ded th, .pr-table--ded td { display: block; }
  .pr-table--ded tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
  .pr-table--ded tbody tr:last-child { border-bottom: 0; }
  .pr-table--ded tbody tr > * { padding: 0; border: 0; }
  .pr-table--ded td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-family: var(--mono); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  .pr-table--ded .pr-name { grid-column: 1 / -1; }
  .pr-table--ded tbody tr > .pr-price { grid-column: 1 / 3; width: auto; text-align: left; padding-top: 14px; border-top: 1px dashed var(--line); }
  .pr-table--ded tbody tr > .pr-act { grid-column: 3 / -1; display: flex; align-items: center; justify-content: flex-end; width: auto; padding-top: 14px; border-top: 1px dashed var(--line); }
  .pr-table--ded .pr-act .btn { min-width: 112px; height: 42px; }
  .pr-table--ded td.pr-price::before { display: none; }
  .pr-table--ded td { white-space: normal; min-width: 0 !important; }
  .pr-table--ded tbody tr.is-hidden { display: none; }
}
@media (max-width: 1100px) {
  /* three mail plans need the full width; the worked example moves below them */
  .pr-email { grid-template-columns: 1fr; }
  /* label, title and link on the left; the three figures on the right */
  .pr-example { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; align-content: center; column-gap: 40px; row-gap: 8px; }
  .pr-example > * { grid-column: 1; }
  .pr-example dl { grid-column: 2; grid-row: 1 / span 3; margin: 0; align-self: center; }
  .pr-example .link { margin-top: 4px; }
  .pr-table th, .pr-table td { padding-left: 13px; padding-right: 13px; }
  .pr-price .pr-sub { white-space: normal; max-width: 170px; margin-left: auto; }
  /* the saving gets its own line rather than a dangling "· save" */
  .pr-sv { display: block; }
  .pr-sv::before { content: none; }
}
@media (max-width: 980px) {
  .pr-sec { padding: 84px 0; }
  .pr-facts { grid-template-columns: 1fr 1fr; }
  .pr-fact:nth-child(2) { border-right: 0; }
  .pr-fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pr-head__aside { align-items: flex-start; }
  .pr-head .toggle-wrap { justify-content: flex-start; }
  .pr-vps-foot { grid-template-columns: 1fr; }
  .pr-tlds { grid-template-columns: repeat(3, 1fr); }
  .pr-pricelists, .pr-tiers { grid-template-columns: 1fr; }
  .pr-pricelists { gap: 10px; }
  .pr-incs { grid-template-columns: 1fr; }
  .pr-est { grid-template-columns: 1fr; }
  .pr-sum { position: static; }
  .pr-coupons { grid-template-columns: 1fr 1fr; }
  .pr-duo { grid-template-columns: 1fr; }
  .pr-maths__note { grid-template-columns: 1fr; }
}
/* tables turn into stacked rows below 1040px */
@media (max-width: 1040px) {
  .pr-table thead { display: none; }
  .pr-table, .pr-table tbody, .pr-table tr, .pr-table th, .pr-table td { display: block; }
  .pr-table tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
  .pr-table tbody tr:last-child { border-bottom: 0; }
  .pr-table tbody tr > * { padding: 0; border: 0; }
  .pr-table tbody tr.is-hl > th { box-shadow: none; }
  .pr-table tbody tr.is-hl { box-shadow: inset 3px 0 0 var(--accent); }
  .pr-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-family: var(--mono); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  .pr-table .pr-name { grid-column: 1 / -1; min-width: 0 !important; }
  .pr-table tbody tr > .pr-price { grid-column: 1 / 3; width: auto; text-align: left; padding-top: 14px; border-top: 1px dashed var(--line); }
  .pr-table tbody tr > .pr-act { grid-column: 3 / -1; display: flex; align-items: center; justify-content: flex-end; width: auto; padding-top: 14px; border-top: 1px dashed var(--line); }
  .pr-table .pr-act .btn { min-width: 112px; height: 42px; }
  .pr-table td.pr-price::before { display: none; }
  .pr-table td.num, .pr-table td { white-space: normal; min-width: 0 !important; }
  .pr-table td[data-label="Covers"] { grid-column: span 2; }
  .pr-price .pr-sub { max-width: none; margin-left: 0; }
  .pr-table--vps tbody tr { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pr-table--vps tbody tr > .pr-price { grid-column: 1 / 4; }
  .pr-table--vps tbody tr > .pr-act { grid-column: 4 / -1; }
  .pr-maths .pr-table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-maths .pr-table tbody tr > .pr-price { grid-column: 1 / 3; }
  .pr-maths .pr-table tbody tr > td:last-child { padding-top: 14px; border-top: 1px dashed var(--line); }
  /* the big figure here is the three-year total, so it keeps its label */
  .pr-maths .pr-table td.pr-price::before { display: block; }
}
@media (max-width: 820px) {
  .pr-hero .page-hero__grid { gap: 48px; }
}
/* tablets: style.css stacks 3-plan rows into one narrow centred column here; on the hub they
   become the same swipeable row as on phones, two cards in view and the third peeking in */
@media (min-width: 641px) and (max-width: 820px) {
  .pr-sec .pricing--3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 14px) / 2.15); max-width: none; margin: 0 -24px; padding: 16px 24px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pr-sec .pricing--3::-webkit-scrollbar { display: none; }
  .pr-sec .pricing--3 > .plan { scroll-snap-align: start; }
  .pr-sec .pricing--3 > .plan:hover { transform: none; }
  .pr-sec .pricing--3 + .pr-swipe { display: flex; }
}
/* tablets: stacked rows put the four specs two to a row, so none is squeezed under 200px */
@media (min-width: 641px) and (max-width: 1000px) {
  .pr-table--ded tbody tr > td:not(.pr-price):not(.pr-act) { grid-column: span 2; }
}
/* style.css turns every .pricing grid into 2 columns at 1100px, which leaves the third card of a
   3-plan row on its own; keep 3-plan rows in 3 columns until style.css stacks them at 820px */
@media (min-width: 821px) and (max-width: 1100px) {
  .pr-sec .pricing--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-sec .pricing--3 .plan__price .amt { font-size: clamp(2.2rem, 4.4vw, 3rem); }
}
@media (max-width: 640px) {
  .pr-hero { padding-bottom: 48px; }
  .pr-ledger { padding: 18px 16px 14px; }
  .pr-ledger::before { display: none; }
  .pr-ledger__name { font-size: 0.92rem; }
  .pr-principles { padding: 40px 0 52px; }
  .pr-facts { grid-template-columns: 1fr; }
  .pr-fact { display: grid; grid-template-columns: 22px 1fr; gap: 4px 14px; border-right: 0; border-bottom: 1px solid var(--line); padding: 18px; }
  .pr-fact > svg { grid-row: span 2; margin-top: 1px; }
  .pr-fact h3 { margin: 0; }
  /* plan cards become a swipeable row */
  .pr-sec .pricing { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; max-width: none; margin: 0 -16px; padding: 16px 16px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pr-sec .pricing::-webkit-scrollbar { display: none; }
  .pr-sec .pricing > .plan { scroll-snap-align: start; }
  .pr-sec .plan:hover { transform: none; }
  .pr-swipe { display: flex; }
  .pr-fact:last-child { border-bottom: 0; }
  .pr-sec { padding: 68px 0; }
  .pr-head { margin-bottom: 30px; }
  .pr-head .billing-toggle { max-width: 100%; }
  .pr-head .billing-toggle button { padding: 7px 11px; font-size: 0.82rem; }
  .pr-meta { font-size: 0.82rem; }
  .pr-compare > summary { padding: 16px 18px; }
  .pr-compare > summary small { display: block; margin: 2px 0 0; }
  .pr-compare .compare { min-width: 640px; font-size: 0.86rem; }
  .pr-compare .compare th, .pr-compare .compare td { padding: 12px 12px; }
  .pr-compare .compare thead th:first-child, .pr-compare .compare tbody th[scope="row"] { width: 200px; min-width: 200px; max-width: 200px; font-size: 0.8rem; line-height: 1.35; box-shadow: 1px 0 0 var(--line); }
  /* filter chips stay on one line and scroll sideways instead of wrapping into three rows */
  .pr-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 18px; padding: 2px 16px; scrollbar-width: none; }
  .pr-filters::-webkit-scrollbar { display: none; }
  .pr-filter { flex: none; }
  .pr-compare .compare tr.group th { font-size: 0.66rem; }
  .pr-example { display: flex; }
  .pr-addons-inline { padding: 18px; }
  .pr-addons-inline ul { grid-template-columns: 1fr; }
  .pr-chips { gap: 6px; }
  .pr-chips li { padding: 6px 11px; font-size: 0.8rem; }
  .pr-tlds { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pr-tld { padding: 16px 14px 14px; }
  .pr-tld__top { flex-direction: column; gap: 6px; min-height: 0; }
  .pr-tld__name { font-size: 1.35rem; }
  .pr-tld__reg strong { font-size: 1.15rem; }
  .pr-tld dl div { flex-direction: column; gap: 0; }
  .pr-inc { grid-template-columns: 40px 1fr; gap: 12px; }
  .pr-inc__n { display: none; }
  .pr-inc__val { grid-column: 2; justify-self: start; margin-top: 0; }
  .pr-est__main { padding: 16px; }
  /* term gets the full width so "12 months · ₹189" isn't cut off; quantity shares a row with the line total */
  .pr-line { grid-template-columns: 104px minmax(0, 1fr) 30px; grid-template-areas: "prod prod rm" "plan plan plan" "term term term" "qty price price" "extra extra extra"; gap: 10px; }
  .pr-field select, .pr-step input { font-size: 16px; }
  .pr-line__price { align-self: end; text-align: right; padding-bottom: 2px; }
  .pr-sum { padding: 22px 18px; }
  .pr-sum__kpis { grid-template-columns: 1fr; }
  .pr-sum__kpis div { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; }
  .pr-sum__kpis div + div { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--inv-ink) 14%, transparent); }
  .pr-sum__kpis dd { margin: 0; }
  .pr-coupons { grid-template-columns: 1fr; }
  .pr-domchips { grid-template-columns: 1fr; }
  .pr-domchip { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; }
  .pr-domchip span { margin: 0; }
  .pr-domchip small { margin: 0; }
  .pr-panel { padding: 24px 20px; }
  .pr-steps3 { grid-template-columns: 1fr; }
  /* six narrow tracks: specs sit two (VPS: three) to a row, the price takes two thirds of
     the last row and the button the remaining third, so nothing pokes out of its cell */
  .pr-table tbody tr, .pr-table--vps tbody tr, .pr-maths .pr-table tbody tr { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 18px; }
  .pr-table tbody tr > td { grid-column: span 3; }
  .pr-table tbody tr > .pr-price, .pr-table--vps tbody tr > .pr-price { grid-column: 1 / 5; }
  .pr-table tbody tr > .pr-act, .pr-table--vps tbody tr > .pr-act { grid-column: 5 / -1; }
  .pr-table .pr-act .btn { width: 100%; min-width: 0; padding-left: 10px; padding-right: 10px; }
  .pr-table td[data-label="Covers"], .pr-table td[data-label="Issued in"] { grid-column: 1 / -1; }
  /* dedicated: memory beside the wider storage cell, then locations beside ready-in */
  .pr-table--ded td[data-label="Memory"] { grid-column: span 2; }
  .pr-table--ded td.pr-stack { grid-column: span 4; }
  .pr-table--vps tbody tr > td { grid-column: span 2; }
  .pr-table--vps td[data-label="≈ Per hour"] { grid-column: span 4; }
  .pr-maths .pr-table tbody tr > td { grid-column: span 2; }
  .pr-maths .pr-table tbody tr > .pr-price { grid-column: 1 / 4; }
  .pr-maths .pr-table tbody tr > td:last-child { grid-column: 4 / -1; }
  .pr-maths .pr-table td[data-label]::before { white-space: nowrap; letter-spacing: 0.05em; }
  .pr-terms li { grid-template-columns: 30px 1fr; gap: 8px; font-size: 0.94rem; }
  .pr-alert { flex-direction: column; }
  .pr-order-tag { display: none; }
  .pr-order-wrap { padding: 0; }
  .pr-mini thead th { white-space: normal; line-height: 1.3; vertical-align: bottom; }
  .pr-mini th + th, .pr-mini td + td { padding-left: 10px; }
  .pr-mini td { font-size: 0.78rem; }
  .pr-campaign { grid-template-columns: 1fr; }
}

/* deals: the two hosting offers share a row on desktop; on tablets each takes the full width,
   and the fifth "ways to pay less" tile spans the row instead of leaving a hole */
@media (min-width: 641px) and (max-width: 980px) {
  .pr-offers--deals .bento > .tile { grid-column: span 2; }
  .pr-payless .bento > .tile:last-child { grid-column: span 2; }
  /* the two price-table tiles need the full width for their four columns */
  .pr-payless .bento > .tile--w3 { grid-column: span 2; }
  /* an odd last coupon takes the full row instead of sitting alone in one column */
  .pr-coupons > .pr-coupon:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- visual QA pass ---------- */
.pr-head h2 { text-wrap: balance; }
/* deal-alerts card: its closing link sits on the same baseline as the referral card's button */
.pr-panel > .link:last-child { margin-top: auto; }
/* closing CTA headline on the conversion pages: no single word left on the last line */
.cv-cta h2, .cv-cta p { text-wrap: balance; }
.pr-hero h1 { text-wrap: balance; }
/* coupon / offer card titles: no single word ("more") on the last line */
.pr-coupon h3, .pr-offer h3 { text-wrap: balance; }