/* The public pages (spec 013, mockups 1 and 8; spec 014, price list): the landing page, the paused page, the policy pages and the price list.
   TASK-2026-163 (lane W1): drawn from the shared tokens (static/css/tokens.css) and nothing else. No colour, size, radius or shadow is typed here: a colour is a token,
   a size is a token or a step of the 4px scale, a corner is 2px, a line is 1px, and nothing carries a shadow (the dialog is the only thing that floats).
   The pages are the roomy density (data-density="roomy" on .pb-page): 48px controls, 56px rows, 32px card padding, 64px card headers.
   Website grounds may use the brand's gradient (rp-grad-deep): the hero. Logical sides throughout; the only physical sides are the lockup's mark (always on the right)
   and the shapes drawn from borders.
   Public pages only; the owner page, the shop and the console load none of this except the sign-up screens, which load it after app.css (signup_ui.js). */

/* ── Site names for token roles ─────────────────────────────────────────────────────────────────────────────────────────────────── */
html[data-theme] {
  /* The tinted band under alternate sections (this was `--paper`, a name the print tokens now own). The dark look uses the tint too: the sunken colour is the page ground there. */
  --site-band: var(--tint);
  /* The sample charts: the series colour and the quiet one beside it, from the brand's chart steps (teal-700, teal-400, teal-200). */
  --lp-series: var(--teal-700);
  --lp-series-soft: var(--teal-200);
  /* TASK-2026-213: one content width for every public page (a wide screen no longer leaves wide empty sides) and one fluid side gutter: 16px on a phone, 32px from about 1280px. */
  --site-max: 1360px;
  --site-gutter: clamp(16px, 2.5vw, 32px);
  --site-measure: 70ch;
}
html[data-theme="retailpower-dark"] {
  --lp-series: var(--teal-400);
  --lp-series-soft: var(--teal-700);
}

.pb-num, .rp-num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.ic { width: var(--icon-sm); height: var(--icon-sm); flex: none; vertical-align: -0.2em; stroke-width: var(--icon-stroke); }
html[dir="rtl"] .mir { transform: scaleX(-1); }

/* ── The page, its width and the lockup ─────────────────────────────────────────────────────────────────────────────────────────── */
/* app.css locks the body on computer screens for the shop's fixed frame; the public pages scroll the window itself (TASK-2026-182) */
body:has(> .pb-page) { overflow: visible; }
.pb-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-size: var(--fs-body-lg); line-height: 1.6; }
.pb-page > main, .pb-page > section { flex: none; }
/* The quiet pages (policies, paused, the sign-up screens) stand on the tinted band, so their white cards read as cards. */
.pb-bare { background: var(--site-band); }
.pb-wrap { width: 100%; max-width: var(--site-max); margin-inline: auto; padding-inline: var(--site-gutter); box-sizing: border-box; }
.pb-brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.pb-brand:hover { color: inherit; }
/* A lockup with its tagline is never smaller than 40px (brand book, Logo). The mark is on the physical right whatever the page's direction. */
.pb-lockup { height: 40px; }   /* the header and the footer carry the same 40px lockup (TASK-2026-213); the header's has no tagline */
/* On the teal band the lockup is the brand's white version: white mark, white name, white tagline. */
.pb-bar:not(.is-slim) .pb-lockup { --lk-mark: var(--on-fill); --lk-mark-2: var(--on-fill); --lk-name: var(--on-fill); --lk-tagline: var(--on-fill); }
.pb-bar:not(.is-slim) .rp-lk-fallback-name { color: var(--on-fill); }
.pb-bar:not(.is-slim) .rp-lk-fallback-mark .rp-b1, .pb-bar:not(.is-slim) .rp-lk-fallback-mark .rp-b2 { fill: var(--on-fill); }

/* ── Small parts: status tag, text, language button ─────────────────────────────────────────────────────────────────────────── */
/* The status badge: one fixed box (120 x 24, 2px, 1px line, 13px at 400), never a pill. A word that does not fit is cut with an ellipsis. */
.pb-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); box-sizing: border-box; inline-size: var(--badge-w); block-size: var(--badge-h); padding-inline: var(--space-2);
  border: var(--border-width) solid var(--tint-strong); border-radius: var(--radius); background: var(--tint); color: var(--brand); font-size: var(--fs-small); font-weight: 400; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-pill.is-muted { background: var(--neutral-status-tint); border-color: var(--neutral-status-line); color: var(--neutral-status); }
.pb-pill .ic { flex: none; }
.pb-meta { font-size: var(--fs-small); color: var(--muted); }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.pb-lang { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; block-size: var(--control); padding-inline: var(--space-3); border: var(--border-width) solid transparent; border-radius: var(--radius);
  background: transparent; color: inherit; font: inherit; font-size: var(--fs-body); cursor: pointer; text-decoration: none; transition: color var(--duration-quick) var(--ease-standard), background-color var(--duration-quick) var(--ease-standard); }
.pb-lang:hover { background: var(--tint); color: var(--brand); }
.pb-lang:focus-visible { outline: 0; border-color: var(--focus); }

/* Buttons on the public pages are the roomy 48px; Almarai has 400 and 700 only, so a filled button is 700 and the rest 400. */
.pb-page .btn, .su-card .btn { height: var(--rp-control); min-width: 0; padding: 0 var(--space-5); gap: var(--space-2); font-size: var(--fs-body); }   /* the app's narrow-screen rule shrinks .btn to 0.76rem; a public button never goes under the 14px body size */
.pb-page .btn-lg { font-size: var(--fs-body-lg); }
.pb-page .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.pb-page .btn-secondary:hover:not([aria-disabled="true"]) { border-color: var(--brand); color: var(--brand); background: var(--surface); }
.btn-primary[aria-disabled="true"] { opacity: 1; background: var(--sunken); border-color: var(--line); color: var(--muted); }
.btn-ghost { background: transparent; color: var(--brand); border-color: transparent; }
.btn-ghost:hover:not([aria-disabled="true"]) { background: var(--tint); color: var(--brand); border-color: transparent; }

/* ── The landing page's top bar: a teal band at the top, a slim surface bar after the first screen ──────────────────────────────── */
.pb-bar { position: sticky; top: 0; z-index: 40; background: var(--teal-800); color: var(--on-fill); border-bottom: var(--border-width) solid var(--teal-700); }
.pb-bar.is-slim { background: var(--surface); color: var(--text); border-bottom-color: var(--line); }
.pb-bar-in { display: flex; align-items: center; gap: var(--space-6); block-size: var(--rp-header); }
.pb-bar.is-slim .pb-bar-in { block-size: var(--header); }
.pb-nav { display: flex; gap: var(--space-1); margin-inline-start: var(--space-2); }
.pb-nav a { display: inline-flex; align-items: center; block-size: var(--control); padding-inline: var(--space-3); color: inherit; text-decoration: none; font-size: var(--fs-body); border-radius: var(--radius);
  transition: background-color var(--duration-quick) var(--ease-standard); }
.pb-nav a:hover { color: inherit; background: var(--teal-700); }
.pb-bar.is-slim .pb-nav a:hover { color: var(--brand); background: var(--tint); }
.pb-bar-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
.pb-bar .pb-lang:hover { background: var(--teal-700); color: var(--on-fill); }
.pb-bar.is-slim .pb-lang:hover { background: var(--tint); color: var(--brand); }
/* On the band the focus line is the light on-fill colour: the focus colour would melt into the teal. */
.pb-bar:not(.is-slim) :focus-visible { outline-color: var(--on-fill); }
.pb-bar:not(.is-slim) .pb-lang:focus-visible, .pb-bar:not(.is-slim) .btn:focus-visible:not(:disabled) { border-color: var(--on-fill); }
.pb-signin { background: transparent; border-color: var(--teal-300); color: var(--on-fill); font-weight: 400; }
.pb-signin:hover:not([aria-disabled="true"]) { background: var(--teal-700); border-color: var(--on-fill); color: var(--on-fill); }
.pb-bar.is-slim .pb-signin { color: var(--text); border-color: var(--line-strong); background: var(--surface); }
.pb-bar.is-slim .pb-signin:hover:not([aria-disabled="true"]) { background: var(--surface); border-color: var(--brand); color: var(--brand); }
.pb-cta { background: var(--on-fill); color: var(--teal-800); border-color: var(--on-fill); font-weight: 700; }
.pb-cta:hover:not([aria-disabled="true"]) { background: var(--teal-100); border-color: var(--teal-100); color: var(--teal-800); }
.pb-bar.is-slim .pb-cta { background: var(--fill); border-color: transparent; color: var(--on-fill); }
.pb-bar.is-slim .pb-cta:hover:not([aria-disabled="true"]) { background: var(--fill-hover); border-color: transparent; color: var(--on-fill); }
.pb-bar.is-slim .btn-primary:focus-visible { border-color: var(--focus-on-fill); }

/* ── The hang tag ("store name") in the hero and in the sign-up panel: a flat teal tag with a square hole ──────────────────────── */
.pb-tag { position: relative; display: inline-flex; flex-direction: column; gap: var(--space-1); min-width: 176px; padding: var(--space-8) var(--space-6) var(--space-4); color: var(--on-fill); background: var(--fill);
  border-radius: var(--radius); text-align: start; }
.pb-tag small { font-size: var(--fs-small); color: var(--teal-100); }
.pb-tag b { font-size: var(--fs-title); line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.pb-tag-hole { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-6); width: var(--space-3); height: var(--space-3); border-radius: var(--radius); background: var(--teal-800); }

/* ── Footer ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.pb-foot { margin-top: auto; background: var(--surface); border-top: var(--border-width) solid var(--line); }
.pb-foot-in { max-width: var(--site-max); margin: 0 auto; padding: var(--space-6) var(--site-gutter); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-10); }
.pb-foot-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-inline-start: auto; }
.pb-foot-links a { color: var(--muted); text-decoration: none; font-size: var(--fs-body); }
.pb-foot-links a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.pb-foot.is-slim .pb-foot-in { padding-block: var(--space-4); }

/* ── A single message on a quiet page (the paused page, a policy not yet published) ───────────────────────────────────────────── */
.pb-state { flex: 1; display: grid; place-items: center; padding: var(--space-16) var(--space-8); }
.pb-state-card { width: 100%; max-width: 560px; background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pb-state-top { padding: var(--rp-pad) var(--rp-pad) var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.pb-state-top h1 { margin: 0; font-size: var(--fs-display-s); line-height: 1.3; font-weight: 700; display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.pb-state-bar { padding: var(--space-2) var(--rp-pad) var(--rp-pad); display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── The quiet bar and the notes on the policy and sign-up pages ──────────────────────────────────────────────────────────────── */
.su-bar { background: var(--surface); border-bottom: var(--border-width) solid var(--line); }
.su-bar-in { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); block-size: var(--rp-header); display: flex; align-items: center; gap: var(--space-4); box-sizing: border-box; }
.su-bar-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body); color: var(--muted); }
.su-link { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.su-textbtn { background: none; border: var(--border-width) solid transparent; border-radius: var(--radius); padding: var(--space-2) 0; font: inherit; font-weight: 700; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; gap: var(--space-2); }
.su-textbtn:focus-visible { outline: 0; border-color: var(--focus); }
.su-textbtn[aria-disabled="true"] { color: var(--muted); text-decoration: none; cursor: default; }
/* A note is a tinted box with a 1px line on every side and the tone in its icon: no coloured stripe down one side. */
.su-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); background: var(--tint); border: var(--border-width) solid var(--tint-strong); border-radius: var(--radius); }
.su-note.is-warn { background: var(--warning-tint); border-color: var(--warning-line); }
.su-note.is-warn .ic { color: var(--warning); }
.su-note.is-bad { background: var(--danger-tint); border-color: var(--danger-line); }
.su-note.is-bad .ic { color: var(--danger); }
.su-note .ic { margin-top: var(--space-1); flex: none; color: var(--brand); }

/* ── The policy reader ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.pp-shell { flex: 1; width: 100%; max-width: var(--site-max); margin: 0 auto; padding: var(--space-12) var(--site-gutter) var(--space-16); box-sizing: border-box; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.pp-side { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.pp-docs { display: flex; flex-direction: column; gap: var(--space-1); }
.pp-doc { display: flex; align-items: center; gap: var(--space-3); min-height: var(--rp-control); padding-inline: var(--space-3); color: var(--muted); text-decoration: none; border: var(--border-width) solid transparent; border-radius: var(--radius); }
.pp-doc:hover { background: var(--tint); color: var(--brand); }
/* The open document is the strong tint with brand text at 700: no stripe down its edge. */
.pp-doc.is-on { background: var(--tint-strong); color: var(--brand); font-weight: 700; }
.pp-doc span { flex: 1; }
.pp-doc-main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.pp-head { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: var(--border-width) solid var(--line); }
.pp-head h1 { margin: 0; font-size: var(--fs-display-s); line-height: 1.3; font-weight: 700; }
.pp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.pp-vers { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pp-chip { display: inline-flex; align-items: center; min-height: var(--control-sm); padding-inline: var(--space-3); border: var(--border-width) solid var(--line-strong); border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: var(--fs-small); }
.pp-chip:hover { border-color: var(--brand); color: var(--brand); }
.pp-chip[aria-current="true"] { background: var(--tint-strong); color: var(--brand); font-weight: 700; }
.pp-toc { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-5); border-top: var(--border-width) solid var(--line); }
.pp-toc small { margin-bottom: var(--space-2); }
.pp-toc-i { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-2) var(--space-1); color: var(--muted); text-decoration: none; font-size: var(--fs-body); border-radius: var(--radius); }
.pp-toc-i:hover { color: var(--brand); background: var(--tint); }
.pp-toc-i em { flex: none; width: 1.6em; font-style: normal; font-size: var(--fs-small); color: var(--muted); }
.pp-sec { scroll-margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.pp-sec h2 { margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: 1.4; display: flex; align-items: center; gap: var(--space-3); }
.pp-sec h2 .ic { color: var(--brand); width: var(--icon); height: var(--icon); }
.pp-sec h2 em { flex: none; display: grid; place-items: center; width: var(--control-sm); height: var(--control-sm); box-sizing: border-box; border-radius: var(--radius); border: var(--border-width) solid var(--line-strong); color: var(--brand); font-style: normal; font-weight: 700; font-size: var(--fs-small); }
.pp-sec .pb-pill { align-self: flex-start; }
.pp-doc-main .pp-sec { border-top: var(--border-width) solid var(--line); padding: var(--space-8) 0 var(--space-6); }
.pp-doc-main .pp-head + .pp-sec { border-top: 0; padding-top: var(--space-3); }
/* The page is wide (TASK-2026-213) but a line of legal text stays about 70 characters: the sections keep their width, the text inside them keeps its measure. */
.pp-text :is(p, ul, ol, blockquote) { max-inline-size: var(--site-measure); }

/* The hero is the brand's deep ground (rp-grad-deep) with a faint set of diagonal lines one step from it, fading toward the bottom. Nothing sits under the lines. */
/* A colour sample is a garment colour (Black, Navy, Beige, Olive, White): the one place the page shows a colour that is not the brand's, and it is data, set in the template. */

/* ── The price list (spec 014 T075, mockup 1): scoped to the page ──────────────────────────────────────────────────────────────── */
.pr-page .num { font-variant-numeric: tabular-nums; }
.pr-page .price-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); padding-block: var(--space-12) var(--space-8); }
.pr-page .price-head h1 { margin: 0 0 var(--space-2); font-size: var(--fs-display-s); font-weight: 700; line-height: 1.3; }
.pr-page .price-head p { margin: 0; font-size: var(--fs-body-lg); color: var(--muted); }
/* The period switch: two joined chips in one 1px frame, the chosen one the strong tint (brand book, tabs and segments). */
.pr-page .price-period { display: inline-flex; border: var(--border-width) solid var(--line-strong); background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.pr-page .price-period a { display: inline-flex; align-items: center; gap: var(--space-2); block-size: var(--rp-control); padding-inline: var(--space-5); text-decoration: none; color: var(--text); font-size: var(--fs-body); border-inline-start: var(--border-width) solid var(--line-strong); }
.pr-page .price-period a:first-child { border-inline-start: 0; }
.pr-page .price-period a:hover { color: var(--brand); background: var(--tint); }
.pr-page .price-period a[aria-pressed="true"] { background: var(--tint-strong); color: var(--brand); font-weight: 700; }
.pr-page .price-period small { font-size: var(--fs-caption); margin-inline-start: var(--space-1); }
.pr-page .plans, .pr-page .cmp-grid { --lead: 22%; }
.pr-page .plans { display: grid; grid-template-columns: var(--lead) repeat(var(--n, 4), minmax(0, 1fr)); align-items: stretch; }
.pr-page .plans-lead { padding-inline-end: var(--space-6); display: flex; flex-direction: column; justify-content: flex-end; padding-block-end: var(--space-6); }
.pr-page .plan { position: relative; display: flex; flex-direction: column; padding: var(--space-8) var(--space-5) var(--space-6); border-inline-start: var(--border-width) solid var(--line); border-top: var(--border-width) solid var(--line); background: var(--surface); min-width: 0; }
.pr-page .plan:last-child { border-inline-end: var(--border-width) solid var(--line); }
/* The recommended plan: the tint and a 1px brand edge (an outline drawn inside the box, not a focus ring), and the label above it. */
.pr-page .plan.is-rec { background: var(--tint); outline: var(--border-width) solid var(--brand); outline-offset: calc(-1 * var(--border-width)); }
.pr-page .plan-rec { position: absolute; inset-block-start: calc(-1 * var(--border-width)); inset-inline: calc(-1 * var(--border-width)); transform: translateY(-100%); padding: var(--space-1) var(--space-5); background: var(--fill); color: var(--on-fill); font-size: var(--fs-small); font-weight: 700; border-radius: var(--radius) var(--radius) 0 0; }
.pr-page .plan h2 { margin: 0; font-size: var(--fs-title); font-weight: 700; }
.pr-page .plan-for { margin: var(--space-1) 0 var(--space-5); font-size: var(--fs-body); color: var(--muted); }
.pr-page .plan-from { display: block; min-height: 1.3em; font-size: var(--fs-small); color: var(--muted); }
.pr-page .plan-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); color: var(--text); }
.pr-page .plan-price .num { font-size: var(--fs-display-s); font-weight: 700; line-height: 1.25; }
.pr-page .plan-price small { font-size: var(--fs-body); color: var(--muted); }
.pr-page .plan-year { margin: var(--space-2) 0 var(--space-5); min-height: 2.9em; font-size: var(--fs-small); line-height: 1.7; color: var(--muted); }
.pr-page .plan-year b { color: var(--success); font-weight: 700; white-space: nowrap; }
.pr-page .plan .btn { margin-top: auto; width: 100%; }
.pr-page .plan-feats { display: none; }
.pr-page .cmp { padding-block: 0 var(--space-2); }
.pr-page .cmp-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-body); }
.pr-page .cmp-grid col.lead { width: var(--lead); }
.pr-page .cmp-grid thead { position: static; background: transparent; }
.pr-page .cmp-grid thead th { background: var(--bg); height: var(--rp-header); padding: var(--space-3) var(--space-5); font-size: var(--fs-body); font-weight: 700; color: var(--text); border-bottom: var(--border-width) solid var(--line-strong); white-space: normal; }
.pr-page .cmp-grid thead th:first-child { padding-inline-start: 0; }
.pr-page .cmp-grid tbody th, .pr-page .cmp-grid td { height: var(--rp-row); padding: var(--space-3) var(--space-5); border-bottom: var(--border-width) solid var(--line); vertical-align: middle; white-space: normal; line-height: 1.5; max-width: none; overflow: visible; text-overflow: clip; }
.pr-page .cmp-grid tbody th { padding-inline-start: 0; text-align: start; font-weight: 400; font-size: var(--fs-body); background: transparent; color: var(--text); }
.pr-page .cmp-grid td { color: var(--text); }
.pr-page .cmp-grid td.is-rec, .pr-page .cmp-grid thead th.is-rec { background: var(--tint); }
.pr-page .cmp-grid tr.cmp-group th { padding-top: var(--space-6); font-size: var(--fs-small); font-weight: 700; color: var(--muted); border-bottom: var(--border-width) solid var(--line-strong); }
.pr-page .cmp-grid tbody tr:hover { background: transparent; }
.pr-page .cmp-grid tbody tr:last-child > * { border-bottom: var(--border-width) solid var(--line-strong); }
.pr-page .yes { display: inline-block; width: var(--icon-sm); height: var(--icon-sm); color: var(--brand); vertical-align: middle; }
.pr-page .no { color: var(--muted); }
.pr-page .pf { position: relative; display: inline-block; }
.pr-page .pf-name { border: var(--border-width) solid transparent; border-radius: var(--radius); background: none; padding: 0; font: inherit; color: inherit; text-align: start; cursor: help; text-decoration: underline dotted var(--muted); text-underline-offset: 5px; }
.pr-page .pf-name:focus-visible { outline: 0; border-color: var(--focus); }
/* A feature's one-line explanation floats over the table, so it is the one thing here that takes the float shadow. */
.pr-page .pf-tip { position: absolute; z-index: 20; inset-block-start: calc(100% + var(--space-2)); inset-inline-start: 0; width: max-content; max-width: 260px; padding: var(--space-2) var(--space-3); background: var(--surface); color: var(--text); border: var(--border-width) solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-float); font-size: var(--fs-small); line-height: 1.6; white-space: normal; visibility: hidden; }
.pr-page .pf:hover .pf-tip, .pr-page .pf-name:focus-visible + .pf-tip, .pr-page .pf-name[aria-expanded="true"] + .pf-tip { visibility: visible; }
.pr-page .price-section { padding-block: var(--space-12) 0; }
.pr-page .plan > .info-tip, .pr-page .cmp > .info-tip, .pr-page .price-section > .info-tip { position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-4); margin: 0; }
.pr-page .cmp, .pr-page .price-section { position: relative; }
.pr-page .price-section > .info-tip { inset-block-start: calc(var(--space-12) + var(--space-2)); inset-inline-end: 0; }
.pr-page .cmp > .info-tip { inset-block-start: var(--space-2); inset-inline-end: 0; }
.pr-page .cmp-title { margin: var(--space-10) 0 var(--space-3); font-size: var(--fs-title); font-weight: 700; }
.pr-page .price-vat { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; font-size: var(--fs-small); color: var(--muted); }
.pr-page .price-vat .ic { flex: none; }
.pr-page .price-section h2 { margin: 0 0 var(--space-4); font-size: var(--fs-title); font-weight: 700; }
.pr-page .addons { display: flex; flex-wrap: wrap; gap: 0; margin: 0; border-top: var(--border-width) solid var(--line); border-bottom: var(--border-width) solid var(--line); }
.pr-page .addons > div { flex: 1 1 200px; padding: var(--space-4) var(--space-5); border-inline-start: var(--border-width) solid var(--line); }
.pr-page .addons > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.pr-page .addons dt { font-size: var(--fs-body); color: var(--muted); margin: 0 0 var(--space-1); }
.pr-page .addons dd { margin: 0; font-size: var(--fs-body-lg); font-weight: 700; }
.pr-page .addons dd small { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.pr-page .faq { border-top: var(--border-width) solid var(--line); max-width: 820px; }
.pr-page .faq details { border-bottom: var(--border-width) solid var(--line); }
.pr-page .faq summary { cursor: pointer; padding: var(--space-4) 0; font-size: var(--fs-body-lg); font-weight: 700; line-height: 1.6; }
.pr-page .faq details p { margin: 0 0 var(--space-4); font-size: var(--fs-body-lg); line-height: 1.8; color: var(--muted); }
.pr-page .faq details p a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* The quote dialog: it floats, so it carries the float shadow and the brand scrim; its parts are the roomy header, body and footer. */
.pr-page .quote { margin: auto; max-height: calc(100dvh - var(--space-8)); overflow: auto; box-sizing: border-box; width: min(var(--dialog-w), calc(100vw - var(--space-8))); padding: 0; border: var(--border-width) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-float); }
.pr-page .quote::backdrop { background: var(--scrim); }
.pr-page .quote-head { display: flex; align-items: center; min-height: var(--rp-header); padding-inline: var(--rp-pad); border-bottom: var(--border-width) solid var(--line); }
.pr-page .quote-head h2 { margin: 0; font-size: var(--fs-body-lg); font-weight: 700; }
.pr-page .quote-body { padding: var(--rp-pad); display: grid; gap: var(--space-4); }
.pr-page .quote .form-group { margin: 0; }
.pr-page .quote .form-group label { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); }
.pr-page .quote input { height: var(--rp-control); box-sizing: border-box; }
.pr-page .quote input[aria-invalid="true"] { border-color: var(--danger); }
.pr-page .quote-err { margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--danger); }
.pr-page .quote-err:empty { display: none; }
.pr-page .quote-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--rp-pad); border-top: var(--border-width) solid var(--line); }
.pr-page .quote-form-note { margin: 0; color: var(--success); font-size: var(--fs-small); }
.pr-page .pr-wrap { width: 100%; max-width: var(--site-max); margin: 0 auto; padding-inline: var(--site-gutter); box-sizing: border-box; }
.pr-page .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── The narrower layouts ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
}
@media (max-width: 1000px) {
  .pb-nav { display: none; }
}
@media (max-width: 900px) {
  .pr-page .plans { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .pr-page .plans-lead { padding: 0 0 var(--space-2); }
  .pr-page .plan { border: var(--border-width) solid var(--line); }
  .pr-page .plan.is-rec { margin-top: var(--space-8); }
  .pr-page .plan-rec { inset-inline: calc(-1 * var(--border-width)); }
  .pr-page .plan-year { min-height: 0; }
  .pr-page .plan-from:empty { display: none; }
  .pr-page .plan .btn { margin-top: 0; }
  .pr-page .plan-feats { display: block; list-style: none; margin: var(--space-5) 0 0; padding: 0; border-top: var(--border-width) solid var(--line); }
  .pr-page .plan-feats li { display: grid; grid-template-columns: var(--icon) minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--line); font-size: var(--fs-body); line-height: 1.55; }
  .pr-page .plan-feats li:last-child { border-bottom: 0; }
  .pr-page .plan-feats li.is-off { color: var(--muted); }
  .pr-page .plan-feats .pf-val { text-align: end; color: var(--muted); max-width: 12em; }
  .pr-page .plan-feats .pf { display: block; }
  .pr-page .plan-feats .pf-tip { position: static; width: auto; max-width: none; margin-top: var(--space-2); box-shadow: none; display: block; }
  .pr-page .plan-feats .pf-name[aria-expanded="false"] + .pf-tip { position: absolute; }
  .pr-page .plan-feats li.pf-group { display: block; padding-top: var(--space-5); font-size: var(--fs-small); font-weight: 700; color: var(--muted); border-bottom: var(--border-width) solid var(--line-strong); }
  .pr-page .cmp { display: none; }
}
@media (max-width: 860px) {
  .pp-shell { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-4) var(--space-12); gap: var(--space-5); }
  .pp-side { position: static; gap: var(--space-3); min-width: 0; }
  .pp-docs { flex-direction: row; overflow-x: auto; max-width: 100%; }
  .pp-doc { white-space: nowrap; }
  .pp-head h1 { font-size: var(--fs-heading); }
  .pp-toc { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); }
  .pp-toc small { flex: 1 0 100%; margin: 0; }
  .pp-toc-i { border: var(--border-width) solid var(--line); padding: var(--space-1) var(--space-3); background: var(--surface); }
  .pp-toc-i em { width: auto; }
}
@media (max-width: 640px) {
  .pb-bar-in { gap: var(--space-2); }
  .pb-bar-end { gap: var(--space-1); }
  .pb-bar-end .pb-signin { display: none; }
  .pb-state { padding: var(--space-8) var(--space-4); }
  .pb-state-top, .pb-state-bar { padding-inline: var(--space-5); }
  .pb-state-top h1 { font-size: var(--fs-heading); }
  .pb-foot-links { margin-inline-start: 0; }
  .pr-page .price-head { padding-block: var(--space-6) var(--space-5); }
  .pr-page .price-head h1 { font-size: var(--fs-heading); }
  .pr-page .price-period { width: 100%; box-sizing: border-box; }
  .pr-page .price-period a { flex: 1; justify-content: center; padding-inline: var(--space-2); }
  .pr-page .plan { padding: var(--space-5) var(--space-4); }
  .pr-page .addons > div { flex-basis: 100%; border-inline-start: 0; padding-inline: 0; border-top: var(--border-width) solid var(--line); }
  .pr-page .addons > div:first-child { border-top: 0; }
  .pr-page .quote-foot { flex-direction: column-reverse; }
}
@media (prefers-reduced-motion: reduce) { .pb-nav a, .pb-lang { transition: none; } }