/* Rundplan — the pricing page (2026-10-20, round 4; below the cards round 9). Loaded after
   styles.css and docs.css; the chrome (header, pills, outro) comes from there. Order on the page:
   the hero band → three self-calculating plan cards (the owner's approved mock: docs/local/mocks/
   starter-card-v3.html) → ways to save → what counts as an organization → in every plan →
   getting started → questions. From 1400 px the page takes the home page's frame (up to 1440 px). */

.page-pricing, .page-request {
  --font-display: "Segoe UI Variable Display", "SF Pro Display", -apple-system, BlinkMacSystemFont, var(--font);
  --pc-save: #0f3d24;             /* the "You save" column */
  --pc-line: #d7e5ee;             /* the segments' faint border */
  /* the small navy check (lucide "check", stroke 2.5) the cards' lines and "In every plan" mark with */
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (min-width: 1400px) { .page-pricing { --wrap: 1440px; } }

/* ── Hero: the home page's dusk as the page's top band (not a card) ─────
   The same ground as the home hero (scene.css .stage): the hero blue with a light where the words
   sit, then dawn blue fading into the white page — here over the band's own height. */
.pr-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(56px, 7vw, 112px) 0 clamp(120px, 13vw, 190px);
  color: #eef4fa;
  background:
    radial-gradient(48vw 360px at 18% 46%, rgba(35, 68, 104, 0.95), rgba(35, 68, 104, 0) 72%),
    radial-gradient(34vw 300px at 72% 56%, rgba(90, 169, 230, 0.16), rgba(90, 169, 230, 0) 70%),
    linear-gradient(180deg, var(--hero-blue) 0%, #0c1e37 60%, #577fa6 80%, #c6d7e7 92%, #ffffff 100%);
}
/* the orbits: four fine rings on one tilted plane, each turning slowly, a small light on each — the
   lights trace ellipses. Still under reduced motion. */
/* round 4: the calculator left the hero, so the orbits take its place on the right (their centre at
   ~72 % of the width, a little below the band's middle) and the words keep the left */
.pr-orbits {
  position: absolute; z-index: -1; pointer-events: none;
  left: calc(72% - 560px); top: calc(56% - 560px); width: 1120px; height: 1120px;
  perspective: 1600px;
}
.orbit-plane { position: absolute; inset: 0; transform: rotateX(70deg) rotateZ(-16deg); transform-style: preserve-3d; }
.orbit {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1.5px solid rgba(207, 234, 255, 0.13);
  transform: translate(-50%, -50%);
  animation: pr-orbit 120s linear infinite;
}
.orbit i { position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: rgba(143, 205, 251, 0.75); box-shadow: 0 0 10px rgba(143, 205, 251, 0.6); }
.o1 { width: 380px; height: 380px; animation-duration: 70s; }
.o2 { width: 600px; height: 600px; animation-duration: 110s; animation-direction: reverse; }
.o3 { width: 830px; height: 830px; animation-duration: 160s; }
.o4 { width: 1080px; height: 1080px; animation-duration: 220s; animation-direction: reverse; border-color: rgba(207, 234, 255, 0.08); }
@keyframes pr-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }

.pr-hero-copy { position: relative; }
.pr-hero h1 {
  max-width: 13ch;
  color: #eef4fa; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.034em;
  text-wrap: balance;
}
/* from 1100 px the title takes two lines, not three (BG 2026-10-20); phones keep the 13ch */
@media (min-width: 1100px) { .pr-hero h1 { max-width: 16ch; } }
.pr-sub { margin-top: 22px; max-width: 34ch; font-size: clamp(1.15rem, 1rem + 0.55vw, 1.45rem); line-height: 1.4; color: #c3d0dd; text-wrap: balance; }
.pr-terms { margin-top: 14px; font-size: 0.95rem; line-height: 1.5; color: #a9bacb; }

/* ── The three plans: self-calculating cards ───────────────────────────── */
.pr-plans { position: relative; z-index: 1; margin-top: calc(-1 * clamp(56px, 7vw, 96px)); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan {
  container-type: inline-size;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--white); border: 1px solid var(--rim); border-radius: 20px;
  box-shadow: 0 18px 44px rgba(8, 20, 36, 0.14), var(--raised-soft);
  overflow: hidden;
}
.pc-band { padding: 16px 20px 12px; }
.plan-name { font-size: 1rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }

/* the dark two-column row: the price, what you save. 60/40 (round 6), so the price's two-row line
   ("€16,020 total · 36 months ·" / "monthly instalments · excl. VAT") stays inside its cell down to
   the 330 px cards at 1100 px */
.pc-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.pc-col { padding: 14px 20px 13px; min-width: 0; }
.pc-pay { background: var(--hero-blue); }
.pc-save { background: var(--pc-save); }
.pc-ttl { margin-bottom: 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.pc-big { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-big small { font-size: 0.8rem; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, 0.7); }
.pc-save .pc-big { color: #9fe3b4; }
.pc-save .pc-big.is-extra { color: #ffb4a3; }
.pc-under { margin-top: 6px; font-size: 0.76rem; line-height: 1.35; color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }
/* the price's line: two rows, each kept whole (broken after the months) */
.pc-under .ln { display: block; white-space: nowrap; }

.pc-body { flex: 1; display: flex; flex-direction: column; padding: 14px 20px 18px; }
.pc-mini { margin: 14px 0 8px; padding: 0; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.pc-body > .pc-mini:first-child { margin-top: 0; }
.pc-mini span { font-weight: 500; }

/* the compact slider: a thin track, a transparent native thumb, and over it a squircle that shows
   the value (pricing.js places it); dark navy with white text, as the button (round 6). All three
   sliders share one handle, 52 × 34 px (round 7): it holds "500" and "−15%" alike; the native thumb
   takes the same width, so the handle sits exactly over it. */
.pc-range { position: relative; height: 40px; margin-top: 2px; }
.pc-range input {
  position: absolute; inset: 0; width: 100%; height: 40px; margin: 0;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.pc-range input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #dbe7ef; }
.pc-range input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 52px; height: 34px; margin-top: -14px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; }
.pc-range input::-moz-range-track { height: 6px; border-radius: 3px; background: #dbe7ef; }
.pc-range input::-moz-range-thumb { width: 52px; height: 34px; border: 0; border-radius: 11px; background: transparent; }
.pc-range input:focus { outline: none; }
.pc-val {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  width: 52px; height: 34px; border-radius: 11px; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--hero-blue); border: 2px solid var(--white); box-shadow: 0 1px 4px rgba(0, 40, 60, 0.3);
  color: var(--white); font-weight: 800; font-size: 0.84rem; font-variant-numeric: tabular-nums;
}
.pc-range:has(input:focus-visible) .pc-val { outline: 3px solid var(--sky-300); outline-offset: 2px; }
.pc-ends { display: flex; justify-content: space-between; margin-top: 2px; font-size: 0.72rem; color: var(--muted); }

/* payment and contract (round 6, BG 2026-10-20): 3-position sliders on the organizations slider's
   track and handle. The handle shows a percent: dearer in the warm tone, cheaper in green, both the
   light shades that read on navy. The words under the track: left, centre, right. */
.pc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px; margin-top: 14px; }
.pc-step-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.pc-step-group legend.pc-mini { margin-top: 0; }
.pc-step .pc-val.plus { color: #ffb4a3; }
.pc-step .pc-val.minus { color: #9fe3b4; }
.pc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2px; font-size: 0.72rem; color: var(--muted); }
.pc-steps span { white-space: nowrap; }
.pc-steps span:nth-child(2) { text-align: center; }
.pc-steps span:nth-child(3) { text-align: right; }
/* payment's third position on a 12-month contract: there is no "whole contract" apart from the year */
.pc-steps span.is-off { color: #b3c1cd; }
/* a narrow card (three in a row at 1100–1400 px, phones): the two sliders stack, so the payment
   words ("1 month · 12 months · 36 months") keep their room */
@container (max-width: 399px) {
  .pc-pair { grid-template-columns: minmax(0, 1fr); }
}
/* The price keeps ONE size (1.9rem) at every count, every payment and every card width (BG
   2026-10-20, round 12: no smaller figure from €1,000 up). The cell is laid out for the widest it
   gets — "1.415 € /Monat", Institution at 500 with the sport add-on and monthly instalments — and
   for the widest small line ("11 328 € összesen · 24 hónap ·"); what gives way at narrower cards is
   the split, the side padding, the save figure and the small lines, never the price. Measured in
   all four languages at every slider position from the 304 px card of a 320 px phone up. */
/* cards under 440 px (1240–1400 px windows, larger phones): 57/43, the save figure at 1.6rem */
@container (max-width: 439px) {
  .pc-two { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); }
  .pc-save .pc-big { font-size: 1.6rem; }
}
/* narrow cards (1100–1240 px, phones): 56/44 with less side padding and smaller small lines */
@container (max-width: 379px) {
  .pc-two { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
  .pc-col { padding-left: 12px; padding-right: 12px; }
  .pc-under { font-size: 0.7rem; }
}
/* the smallest phones (a 320 px window, a 304 px card): the price cell takes 60 % */
@container (max-width: 319px) {
  .pc-two { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
  .pc-col { padding-left: 10px; padding-right: 10px; }
  .pc-under { font-size: 0.66rem; }
  .pc-ttl { letter-spacing: 0.08em; }
  .pc-save .pc-big { font-size: 1.15rem; }
}

/* the switch rows (round 6: no "Add-ons" heading; the names say "add-on"). The price stands on the
   right in two lines: the amount on the name's line (the same size and line height, so the baselines
   meet), "/month" on the sub-text's line. */
/* round 8: the add-ons stand a little apart from the sliders (about twice the gap above "Payment per") */
.pc-rows { display: grid; margin-top: 20px; }
.pc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rim); font-size: 0.9rem; line-height: 1.55; cursor: pointer; }
.pc-rows .pc-row:first-child { border-top: 0; }
.pc-row.is-included { cursor: default; }
.pc-row .t { flex: 1; min-width: 0; }
.pc-row .t b { font-weight: 700; color: var(--ink); }
.pc-row .t small { display: block; font-size: 0.74rem; line-height: 1.35; color: var(--muted); }
.pc-row .amt {
  align-self: flex-start; display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pc-row .amt small { font-weight: 500; color: var(--muted); font-size: 0.74rem; line-height: 1.35; }
.pc-row.is-included .amt { font-weight: 600; color: var(--green); }
/* the partner row (round 7): its saving stands where an add-on's price stands, in the savings green.
   It has no second line, so it sits over the row's top right and the sub-text keeps the full width
   (one row on the 440 px card) */
.pc-row.is-partner { position: relative; }
.pc-row .amt.is-save { position: absolute; top: 9px; right: 0; color: var(--green); }
.sw {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; margin: 0;
  width: 40px; height: 24px; border-radius: 999px; background: #cfdbe6; cursor: pointer;
  transition: background-color 0.15s ease;
}
.sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left 0.15s ease;
}
.sw:checked { background: var(--hero-blue); }
.sw:checked::after { left: 19px; }
/* an add-on the plan includes (Poster Studio on Institution): locked on */
.sw:disabled { cursor: default; opacity: 0.5; }
.sw:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 2px; }

/* the plan's own lines and the button */
.pc-facts { margin: 12px 0 16px; }
/* round 7: the text starts where the add-on names start (the switch's 40 px + the row's 10 px gap);
   the marker is a small navy check (lucide "check", as a mask) in the switch column, centred on the
   first line */
.pc-facts li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--rim); font-size: 0.86rem; line-height: 1.4; }
/* the check itself is one value (--check, set on the page), shared with "In every plan" (round 9) */
.pc-facts li::before, .included li::before {
  content: ""; flex: none; width: 40px; height: 1.4em;
  background: var(--hero-blue);
  -webkit-mask: var(--check) center / 15px 15px no-repeat;
  mask: var(--check) center / 15px 15px no-repeat;
}
.pc-cta {
  display: block; margin-top: auto; padding: 13px; border-radius: 999px; text-align: center; text-decoration: none;
  background: var(--hero-blue); color: var(--white); font-weight: 700;
  box-shadow: 0 6px 16px rgba(8, 20, 36, 0.22);
}
.pc-cta:hover { background: #163257; }
.pc-cta:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .sw, .sw::after { transition: none; } }

/* ── The (i) beside a name (round 9): a small round button, the detail in a box under it ────
   The markup is partials/info.html, the behaviour src/info.js. The box takes the language menu's
   look (white, the rim, radius 16, the soft raised shadow); the text is the page's own size and
   colour. Without JavaScript the button stays hidden and the detail reads as a plain line. */
.info { position: relative; display: inline-block; vertical-align: baseline; }
/* a name with its (i): the (i) stays on the name's right even when a narrow tile wraps the name */
.sv-head, .st-name { display: flex; align-items: baseline; }
.sv-head > b, .st-name > b { min-width: 0; }
.sv-head > .info, .st-name > .info { flex: none; }
.info-btn {
  display: none; place-items: center; position: relative; top: -2px;
  width: 24px; height: 24px; margin-left: 8px; padding: 0; vertical-align: middle;
  border-radius: 999px; border: 1px solid var(--sky-200); background: var(--sky-50); color: var(--sky-700);
  font: 700 0.8rem/1 var(--font); letter-spacing: 0; text-transform: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
html.js .info-btn { display: inline-grid; }
.info-btn:hover { background: var(--sky-100); border-color: var(--sky-500); color: var(--sky-900); }
.info-btn[aria-expanded="true"] { background: var(--hero-blue); border-color: var(--hero-blue); color: var(--white); }
.info-btn:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 2px; }
.info-pop {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: -10px;
  width: max-content; max-width: min(340px, calc(100vw - 24px));
  padding: 12px 16px; border-radius: 16px; border: 1px solid var(--rim);
  background: var(--white); box-shadow: var(--raised-soft);
  font-size: 17px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; text-align: left;   /* the body's own size */
  color: var(--text); white-space: normal; text-wrap: pretty;
  transform: translateX(var(--shift, 0px));
}
.info-pop.is-up { top: auto; bottom: calc(100% + 8px); }
html.js .info-pop:not(.is-open) { display: none; }
/* without JavaScript: the detail is a plain line under the name */
html:not(.js) .info { display: block; flex-basis: 100%; }
html:not(.js) .sv-head, html:not(.js) .st-name { flex-wrap: wrap; }
html:not(.js) .info-pop { position: static; display: block; width: auto; max-width: none; padding: 0; border: 0; box-shadow: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .info-btn { transition: none; } }

/* ── Below the cards (round 9, BG 2026-10-20): the home page's rhythm ─────────────────────────
   Every section: the home's container (1120 px; from 1400 px the page's 1440 frame, as the cards,
   the header and the closing block, so the sections keep the cards' edges), the home's space
   between sections (its "How you start" and "Your data stays yours"), the home's h2.
   Cards are the home's tile; a badge is one shape in two tones (sky = a plan, green = a saving). */
.pr-sec { padding-top: clamp(72px, 10vw, 128px); }
.pr-tile { background: var(--white); border: 1px solid var(--sky-100); border-radius: 16px; box-shadow: var(--raised); }
.badge {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  background: var(--sky-50); color: var(--sky-800);
  font-size: 0.9rem; font-weight: 700; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.badge.is-save { background: #f0fdf4; color: var(--green); }   /* green-700 on green-50: 4.8:1 */

/* ways to save: one tile, two rows — the name and its (i), the badge on the name's line at the
   right (where a card puts an add-on's price), the sentence under them across the full width */
.save-list { margin-top: 32px; padding: 0 clamp(20px, 3vw, 32px); }
.save-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 24px;
  padding: 22px 0;
}
.save-list li + li { border-top: 1px solid var(--sky-100); }
.sv-head b { font-weight: 700; color: var(--ink); }
.save-list .badge { grid-column: 2; grid-row: 1; justify-self: end; }
.sv-text { grid-column: 1 / -1; color: var(--text); text-wrap: pretty; }

/* what counts as an organization: the definition in the page's own size with its (i), then the three
   examples in one row — the same 20 px gap as the plan cards, so their edges line up with the cards'
   — each the name, the count, the plan's badge at the foot (the three badges stand level) */
.pr-lead { margin-top: 16px; color: var(--text); text-wrap: pretty; }
.examples { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.examples li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 24px; }
.ex-who { font-weight: 700; color: var(--ink); }
.ex-count { margin-bottom: 14px; color: var(--text); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.examples .badge { margin-top: auto; }

/* in every plan: the cards' navy check and their ruled lines, in two columns read top to bottom
   (--rows from the build: the left column's length), so the rules of the two columns stand level;
   one column on phones */
.included {
  margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 6), auto); grid-auto-flow: column; column-gap: clamp(32px, 4vw, 64px);
}
.included li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--sky-100); color: var(--text); }
.included li::before { width: 20px; height: 1.55em; }

/* getting started: six tiles on the plan cards' columns (3 × 2; 2 × 3 at tablet width, one column on
   phones) — the name with the pilot's (i), the price in the accent blue (sky-700, 5.9:1), one sentence */
.start-tiles { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.start-tiles li { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; }
.st-name b { font-weight: 700; color: var(--ink); }
.st-price { font-size: 1.3rem; font-weight: 700; line-height: 1.3; color: var(--sky-700); font-variant-numeric: tabular-nums; }
.st-text { margin-top: 4px; color: var(--text); text-wrap: pretty; }

/* narrow tiles keep their one-line figures: the examples' badge ("Network · €306 a month", 193 px)
   and the pilot's price ("€199, credited when you sign", 300 px at 1.3rem) step down a size when
   the tile's inside is narrower than they are (three tiles at 1100 px, tablets, small phones) */
.examples li, .start-tiles li { container-type: inline-size; }
@container (max-width: 194px) { .examples .badge { padding: 3px 9px; font-size: 0.82rem; } }
@container (max-width: 300px) { .st-price { font-size: 1.15rem; } }
@container (max-width: 266px) { .st-price { font-size: 1.1rem; } }

/* questions: the accordion as before (native <details>, a + that turns into −); round 9 gives the
   question a hover (the accent blue, the sign darker); the focus ring is the site's sky-500 ring */
.pr-faq details { border-bottom: 1px solid var(--sky-100); }
.pr-faq h2 + details { margin-top: 28px; border-top: 1px solid var(--sky-100); }
.pr-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; font-weight: 600; color: var(--ink);
  transition: color 0.15s ease;
}
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--sky-600); }
.pr-faq details[open] summary::after { content: "−"; }
.pr-faq summary:hover { color: var(--sky-700); }
.pr-faq summary:hover::after { color: var(--sky-800); }
.pr-faq summary:focus-visible { border-radius: 8px; }
.pr-faq details p { padding: 0 0 18px; max-width: 70ch; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .pr-faq summary { transition: none; } }

/* ── The request page (/pricing/request/, round 8; one step, round 10) ─────────────────────────
   The page's head (the title, one line), then two cards in the normal container: from 1100 px
   "Your details" (the form) on the left and "Your selection" on the right, sticky under the header;
   below 1100 px the selection first, then the form, full width. Both cards are the pricing page's
   tile (the home's tile). */
.rq-main { padding-bottom: clamp(40px, 6vw, 80px); }
/* without a valid choice: one card — the line, and the way back as the white pill */
.rq-fallback { max-width: 640px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.rq-fallback[hidden] { display: none; }
.rq-fallback p { color: var(--ink); font-weight: 600; }
.rq-head h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.rq-lead { margin-top: 10px; color: var(--text); }
.rq-grid {
  margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 24px;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "details sel"; align-items: start;
}
.rq-sel { grid-area: sel; position: sticky; top: calc(var(--header-h) + 24px); }
.rq-details { grid-area: details; }
.rq-card { padding: clamp(20px, 2.6vw, 32px); }
.rq-card h2 { font-size: 1.35rem; }
/* the selection's header: the title, the plan as a badge, "Change" on the right as the site's
   secondary button (the white pill) */
/* (the title and the badge wrap as one group, so on a phone "Change" stays on their right) */
.rq-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rq-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.rq-change.pill { flex: none; min-height: 40px; padding: 0 18px; }
.rq-change.pill:hover { background: var(--sky-50); }
@media (max-width: 1099px) {
  .rq-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sel" "details"; }
  .rq-sel { position: static; }
}
/* no Digipart band on this page (the person is already writing to us): the outro keeps only its
   footer, on the page foot's own dark blue, with the outro's rounded top */
.page-request { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.page-request .rq-main { flex: 1 0 auto; }   /* a short page (the fallback card) keeps the footer at the foot */
.page-request .outro { margin-top: clamp(48px, 7vw, 96px); background: var(--night); }
.page-request .outro::before { display: none; }
.page-request .site-footer { margin-top: 0; border-top: 0; }
/* the selection: label left in the text's weight, value right in semibold (round 10), a hairline
   between rows; then the result in a light panel at the text's size, the price itself big */
.rq-list { margin-top: 16px; border-top: 1px solid var(--sky-100); }
.rq-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; }
.rq-list li + li { border-top: 1px solid var(--sky-100); }
.rq-what { min-width: 0; color: var(--text); }
.rq-amt { flex: none; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rq-price {
  margin: 8px 0 0; padding: 18px 20px; display: grid; gap: 8px;
  border-radius: 16px; background: var(--sky-50); border: 1px solid var(--sky-100);
}
.rq-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rq-row dt { min-width: 0; color: var(--text); }
.rq-row dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rq-row.is-main dt { font-weight: 700; color: var(--ink); }
.rq-row.is-main dd { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.rq-row.is-main .rq-per { margin-left: 4px; font-size: 17px; font-weight: 600; letter-spacing: 0; }
.rq-row.is-save dd { color: var(--green); }   /* green-700 on sky-50: 4.7:1 */
/* the form (round 10): labels at the text's size, dark; "optional" a muted word after the label
   (slate-600, 7.6:1); fields with a border that reads as a field (3.4:1, as WCAG asks of a control's
   edge); a field that needs attention: a red edge and one short red line under it (red-700, 6.5:1) */
.rq-form { margin-top: 20px; display: grid; gap: 18px; }
.rq-field { display: grid; gap: 6px; }
.rq-field label { font-weight: 600; color: var(--ink); }
.rq-opt { margin-left: 4px; font-weight: 400; color: var(--muted); }
.rq-field input, .rq-field textarea {
  width: 100%; padding: 11px 14px; border: 1px solid #7b8ea3; border-radius: 12px;
  background: var(--white); color: var(--text); font: inherit;
  transition: border-color 0.15s ease;
}
.rq-field input:hover, .rq-field textarea:hover { border-color: var(--sky-700); }
.rq-field textarea { resize: vertical; min-height: 104px; }
.rq-field input:focus-visible, .rq-field textarea:focus-visible { border-color: var(--sky-600); outline: 3px solid var(--sky-500); outline-offset: 1px; border-radius: 12px; }
.rq-field [aria-invalid="true"] { border-color: #b91c1c; }
.rq-error { color: #b91c1c; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .rq-field input, .rq-field textarea { transition: none; } }
/* "Send request": the plan cards' "Choose <Plan>" button, the form card's full width */
.rq-send {
  display: block; width: 100%; margin-top: 6px; padding: 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--hero-blue); color: var(--white); font: inherit; font-weight: 700; text-align: center;
  box-shadow: 0 6px 16px rgba(8, 20, 36, 0.22);
}
.rq-send:hover { background: #163257; }
.rq-send:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 3px; }
.rq-send:disabled { cursor: progress; opacity: 0.7; }   /* while the request is on its way */
/* the one line above the button when the server refused the request (check the details / too many) */
.rq-send-error { margin-bottom: -6px; text-align: center; text-wrap: balance; }
.rq-send-error[hidden] { display: none; }
/* the honeypot (request.js): a field people never see or reach — off screen rather than display:none,
   which some robots skip; aria-hidden on its box keeps it from screen readers, tabindex −1 from the keyboard */
.rq-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* sent (request.js): the form card holds the title and one line; the selection card stays */
.rq-sent h2:focus { outline: none; }
.rq-sent p { margin-top: 10px; color: var(--text); }

/* ── The contact page (/contact/, round 12) ───────────────────────────────────────────────────
   The request page's frame and form (the head, the tile, the fields, the button, the sent state,
   no Digipart band), one card wide. The mail card is the page without JavaScript and comes back
   above the form when a send fails. */
.ct-card, .ct-mail { max-width: 720px; margin-top: clamp(24px, 3vw, 36px); }
.ct-mail[hidden], .ct-card[hidden] { display: none; }
html:not(.js) .ct-card { display: none; }
.ct-mail-text { margin-top: 10px; color: var(--text); }
.ct-mail-link { margin-top: 16px; }
.ct-mail h2:focus { outline: none; }
/* the pricing page's questions end with the way to this page */
.pr-faq-more { margin-top: 24px; color: var(--text); }
.pr-faq-more a { color: var(--sky-700); font-weight: 600; text-underline-offset: 3px; }
.pr-faq-more a:hover { color: var(--sky-900); }
.pr-faq-more a:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 2px; border-radius: 4px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
/* below 1100 px the three cards no longer fit side by side: one column, one card wide */
@media (max-width: 1099px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 440px; gap: 24px; }
}
/* tablet width (the plan cards stack here): getting started goes 2 × 3; the three examples stay in one
   row with a little less side padding */
@media (max-width: 1099px) {
  .start-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .examples li { padding: 20px 16px; }
}
/* the three examples: one row down to 768 px (a tablet's width), a column below */
@media (max-width: 767px) {
  .examples { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .examples li { padding: 20px 24px; }
}
/* phones (the page's own phone width, as the cards' snap row) */
@media (max-width: 699px) {
  .included { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .start-tiles { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .save-list { padding-inline: 20px; }
  .save-list li { column-gap: 12px; }
  .examples li, .start-tiles li { padding-inline: 20px; }
}

/* the tab strip exists for phones only */
.plan-tabs { display: none; }

/* PHONES (< 700 px): one card in view at a time — a horizontal snap row, each card the window's width
   less 8 px a side, 8 px between cards; the tab strip above it (sticky under the header) scrolls to
   a card and marks the one in view (pricing.js) */
@media (max-width: 699px) {
  .plan-tabs {
    position: sticky; top: var(--header-h); z-index: 2;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
    margin: 0 8px 10px; padding: 4px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.94); border: 1px solid var(--pc-line);
    box-shadow: 0 6px 18px rgba(8, 20, 36, 0.12);
  }
  .plan-tab {
    min-height: 40px; padding: 0 6px; border: 0; border-radius: 10px; cursor: pointer;
    background: transparent; color: var(--muted);
    font: inherit; font-size: 0.88rem; font-weight: 700;
  }
  .plan-tab.is-on { background: var(--hero-blue); color: var(--white); }
  .plan-tab:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 1px; }
  .pr-plans .wrap.plans {
    width: 100%; max-width: none; margin: 0;
    display: flex; gap: 8px; align-items: stretch;
    padding: 0 8px 18px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 8px;
    scrollbar-width: none;
  }
  .pr-plans .wrap.plans::-webkit-scrollbar { display: none; }
  .plans > .plan { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
}