/* Public booking site in David's design (bergen-scheduler-mockup/bergen-booking-v2.html). Classes only: the CSP forbids inline styles. */

/* Poppins, self-hosted (SIL Open Font License, fonts/OFL.txt): the CSP allows no outside fonts. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-700.woff2) format('woff2'); }

:root {
  --purple: #5b2d86;
  --purple-deep: #3f1c62;
  --purple-soft: #efe8f6;
  /* One shade deeper than the mockup's #2f8f2a, so white button text meets the 4.5:1 contrast minimum. */
  --green: #2a8126;
  --green-deep: #256f21;
  --green-soft: #e6f4e4;
  --amber: #b45f06;
  --amber-soft: #fdf1df;
  --ink: #1f1a26;
  --ink-2: #5a5364;
  --ink-3: #8b8494;
  --line: #e2dde8;
  --bg: #f3f1f6;
  --card: #ffffff;
  --field: #ffffff;
  --chip: #f8f6fb;
  --chip-line: #d9d2e3;
  --sel: #5b2d86;
  --sel-ink: #ffffff;
  /* Text on the green and purple fills: white here, dark in dark mode, where the fills turn pale. */
  --on-fill: #ffffff;
  --shadow: 0 10px 30px rgba(63, 28, 98, 0.12);
  color-scheme: light;
}

/* The mockup's night palette, chosen by the visitor's own light or dark setting. */
@media (prefers-color-scheme: dark) {
  :root {
    --purple: #a67ed6;
    --purple-deep: #c9aee6;
    --purple-soft: #2c2140;
    --green: #5fc75a;
    --green-deep: #7fdc7a;
    --green-soft: #1d3a1b;
    --amber: #f0b25a;
    --amber-soft: #3d2c12;
    --ink: #f1edf6;
    --ink-2: #c1b9cc;
    --ink-3: #8f889b;
    --line: #332b40;
    --bg: #151020;
    --card: #1e1729;
    --field: #251d33;
    --chip: #251d33;
    --chip-line: #3b3149;
    --sel: #a67ed6;
    --sel-ink: #151020;
    --on-fill: #151020;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
  .logoicon { filter: grayscale(1) brightness(0) invert(1); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
a { color: var(--purple); }
a[href^="tel:"] { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
img { max-width: 100%; }
.ic { display: block; width: 20px; height: 20px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Phones: one screen that fills the window, as in the mockup. */
.page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--card); }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 8px; color: var(--purple); text-decoration: none; }
.logoicon { display: block; flex-shrink: 0; width: auto; height: 24px; }
.logotext { color: var(--ink-2); font-size: 15px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.logotext em { color: var(--purple); font-style: normal; }
@media (max-width: 430px) { .logotext .g { display: none; } }
.top-right { display: flex; align-items: center; gap: 18px; }
.callbtn {
  flex-shrink: 0; padding: 7px 10px; border-radius: 6px; background: var(--green); color: var(--on-fill);
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.callbtn:hover { background: var(--green-deep); color: var(--on-fill); }

.band {
  margin: 0; padding: 9px 12px; background: linear-gradient(90deg, var(--purple-deep), var(--purple));
  color: var(--on-fill); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-align: center; text-transform: uppercase;
}

.screen { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.content { display: flex; flex-direction: column; gap: 14px; }
@media (prefers-reduced-motion: no-preference) { .screen { animation: slide-in 0.18s ease-out; } }
@keyframes slide-in { from { opacity: 0.4; transform: translateX(6px); } to { opacity: 1; transform: none; } }

.q { font-size: 22px; font-weight: 700; }
/* The start screen's heading sits lower, as in the mockup. */
.q.start { margin-top: 22px; }
.sub { margin: 0; color: var(--ink-2); font-size: 13px; }
.note { margin: 0; color: var(--ink-2); font-size: 12px; }
/* Only while the public test gate is on: the start page says it is an internal test site. */
.testing { margin: 0; padding: 10px 12px; border: 1px solid var(--amber); border-radius: 8px; background: var(--amber-soft); color: var(--ink); font-size: 13px; }
.testing b { color: var(--amber); }

.social { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 4px; color: var(--ink-2); font-size: 13px; }
.social b { color: var(--amber); letter-spacing: 1px; }

.opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--chip-line); border-radius: 8px; background: var(--chip); color: var(--ink);
  text-align: left; text-decoration: none;
}
.opt:hover { border-color: var(--purple); color: var(--ink); }
.opt b { display: block; font-size: 14px; font-weight: 600; }
.opt small { display: block; color: var(--ink-2); font-size: 12px; }
.opt-text { min-width: 0; }
/* The start choices' icon and arrow are for wide screens only; phones keep the mockup's plain cards. */
.opt-icon, .opt-go { display: none; }
/* A choice as David's cards: the ring is the real radio button, so the choice works and shows with no script. */
fieldset.opts { min-width: 0; margin: 0; padding: 0; border: 0; }
label.opt { position: relative; cursor: pointer; }
.pick {
  appearance: none; display: grid; flex: none; place-content: center; width: 18px; height: 18px; margin: 2px 0 0;
  border: 2px solid var(--chip-line); border-radius: 50%; background: var(--field);
}
.pick::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--purple); transform: scale(0); }
.pick:checked { border-color: var(--purple); }
.pick:checked::after { transform: scale(1); }
.opt:has(.pick:checked) { border-color: var(--purple); background: var(--purple-soft); }
/* People on the number: David's initials in place of the ring, wherever the card itself can show the choice. */
.av {
  display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--purple); color: var(--on-fill); font-size: 11px; font-weight: 700;
}
@supports selector(:has(*)) {
  .opt:has(.pick:focus-visible) { outline: 2px solid var(--purple); outline-offset: 2px; }
  .pick:focus-visible { outline: none; }
  .opt.member .pick { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; opacity: 0; cursor: pointer; }
}
.row { display: flex; gap: 8px; }
.row .field { min-width: 0; }
textarea.field { min-height: 7em; resize: vertical; }
/* Date of birth as Month, Day, Year boxes: narrow enough to sit in one row on a 320px phone, the year a little wider. */
fieldset.dob { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.dob legend { padding: 0; margin-bottom: 6px; }
.dob-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; max-width: 20rem; }
.dob-part { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.dob-part .field { text-align: center; font-variant-numeric: tabular-nums; }
/* The typed email shows only while "Use a different email" is chosen; a browser without :has always shows it. */
.ask:has(.pick[value="typed"]:not(:checked)) .reveal { display: none; }

.primary {
  display: block; width: 100%; padding: 14px; border: 0; border-radius: 8px; background: var(--green); color: var(--on-fill);
  font: inherit; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
}
.primary:hover { background: var(--green-deep); color: var(--on-fill); }
.secondary {
  width: 100%; padding: 12px; border: 1.5px solid var(--chip-line); border-radius: 8px; background: none;
  color: var(--purple); font: inherit; font-weight: 600; cursor: pointer;
}
.secondary:hover { border-color: var(--purple); }
.phone-address { margin-bottom: 10px; font-size: 15px; }
.phone-address:disabled { opacity: 0.65; cursor: default; }
.phone-address-status { min-height: 1.5em; margin: 0 0 8px; color: var(--ink-2); font-size: 14px; }

/* A question screen: the progress row and bar, the question, one field, Next. */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-2); font-size: 12px; }
.back { color: var(--purple); font-weight: 600; text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: 4px; }
.inline { display: inline; margin: 0; }
.restart { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-weight: 500; text-decoration: underline; cursor: pointer; }
.prog { display: flex; gap: 4px; }
.prog span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.prog span.on { background: var(--purple); }
.prog span.done { background: var(--green); }
.ask { display: flex; flex-direction: column; gap: 14px; }
.q-head { display: flex; flex-direction: column; gap: 4px; }
/* ink-2, not the mockup's paler ink-3: an 11px label still needs 4.5:1. */
.seclabel { margin: 0; color: var(--ink-2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.field {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--chip-line); border-radius: 8px;
  background: var(--field); color: var(--ink); font: inherit; font-size: 17px;
}
/* A transparent outline keeps a visible ring in Windows high-contrast mode, where shadows are dropped. */
.field:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); outline: 2px solid transparent; }
.field[aria-invalid="true"] { border-color: var(--amber); }
.err { margin: 0; color: var(--amber); font-size: 13px; font-weight: 600; }
.hint { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--purple-soft); font-size: 12px; }
.hint p { margin: 0; }
.hint b { color: var(--purple-deep); }
.splitopt { padding: 9px; font-weight: 500; text-align: left; }
/* Address suggestions, drawn by address-suggest.js under the street box; each row is a 44px-plus tap target. */
.suggest-list { margin: -8px 0 0; padding: 4px; list-style: none; border: 1.5px solid var(--chip-line); border-radius: 8px; background: var(--field); }
.suggest-opt { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.suggest-opt b { color: var(--ink); font-weight: 600; }
.suggest-opt small { color: var(--ink-2); font-size: 13px; }
.suggest-opt:hover, .suggest-opt[aria-selected="true"] { background: var(--purple-soft); outline: 2px solid transparent; }
.suggest-opt[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--purple); }
#addr-search-group:not([hidden]), #addr-details:not([hidden]) { display: flex; flex-direction: column; gap: 8px; }
#addr-details:not([hidden]) { gap: 12px; }
.address-summary { margin: 0; padding: 12px 14px; border: 1px solid var(--chip-line); border-radius: 8px; background: var(--chip); font-size: 15px; }
.address-manual { font-size: 14px; }
/* Six digits, spaced so each can be checked against the text at a glance. */
.field.code { font-size: 24px; font-weight: 600; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
/* David's six code boxes, drawn by code-boxes.js over the single field above. */
.otp { display: flex; gap: 6px; }
.otp-box {
  flex: 1; min-width: 0; padding: 12px 0; border: 1.5px solid var(--chip-line); border-radius: 8px;
  background: var(--field); color: var(--ink); font: inherit; font-size: 22px; font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
}
.otp-box:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); outline: 2px solid transparent; }
.otp-box[aria-invalid="true"] { border-color: var(--amber); }
/* A button that reads as a link: it posts (sending a text is never a link) but sits quietly under the form. */
.link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--purple); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* The plan questions' search: the box and its "Find my plan" button on one line. */
.plan-search { display: flex; gap: 8px; }
.plan-search .field { flex: 1; min-width: 0; }
.plan-search .secondary { flex: none; width: auto; }
/* David's chips for the common plans. Each holds a real radio button, so a tap chooses it with no script. */
fieldset.chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: block; padding: 10px 14px; border: 1.5px solid var(--chip-line); border-radius: 999px;
  background: var(--chip); color: var(--ink); font-size: 14px; font-weight: 500;
}
.chip:hover span { border-color: var(--purple); }
.chip input:checked + span { border-color: var(--sel); background: var(--sel); color: var(--sel-ink); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }
/* The plan picked, drawn by plan-search.js in place of the search: its name, and "change" to search again. */
.picked { align-items: center; justify-content: space-between; border-color: var(--purple); background: var(--purple-soft); }
.picked .link { align-self: center; }
/* What a page or its script hides (plan-search.js, the picker's extra times) stays hidden, whatever display its own rule gives it. */
.ask [hidden] { display: none; }
/* David's "Pick a time": the visit and patient, three filters, the week, and each day's times as chips. */
.ctx { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--purple-soft); font-size: 13px; }
.ctx b { font-weight: 600; }
.ctx a { flex: none; font-weight: 600; }
.filters { display: grid; gap: 6px; }
.filters [hidden] { display: none; }
.filter-row { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; }
.filter-row label { min-width: 0; }
.filter-row select {
  width: 100%; min-width: 0; padding: 9px 6px; border: 1.5px solid var(--chip-line); border-radius: 8px;
  background: var(--field); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; text-overflow: ellipsis;
}
.filters .secondary { padding: 8px; font-size: 13px; }
.weeknav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.weeknav a, .weeknav .off {
  display: grid; flex: none; place-items: center; width: 36px; height: 36px; border: 1px solid var(--chip-line); border-radius: 6px;
  background: var(--chip); color: var(--ink); font-size: 18px; text-decoration: none;
}
.weeknav .off { opacity: 0.35; }
fieldset.week { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
.wday { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wday-h { margin: 0 0 2px; padding-bottom: 4px; border-bottom: 2px solid var(--line); color: var(--ink-2); font-size: 11px; line-height: 1.15; text-align: center; }
.wday-h b { display: block; color: var(--ink); font-size: 15px; }
.wday.today .wday-h { border-color: var(--purple); }
.wday-none { margin: 0; color: var(--ink-2); font-size: 11px; text-align: center; }
.slot { position: relative; display: block; cursor: pointer; }
.slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.slot span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 5px 2px;
  border: 1.5px solid var(--chip-line); border-radius: 7px; background: var(--chip); color: var(--ink); font-variant-numeric: tabular-nums;
}
.slot b { font-size: 12.5px; font-weight: 600; line-height: 1; }
.slot small { font-size: 9.5px; letter-spacing: 0.03em; line-height: 1; }
.slot:hover span { border-color: var(--purple); }
.slot input:checked + span { border-color: var(--sel); background: var(--sel); color: var(--sel-ink); }
.slot input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }
a.more {
  display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1.5px dashed var(--chip-line); border-radius: 7px;
  background: var(--purple-soft); color: var(--purple); font-size: 12px; font-weight: 600; text-decoration: none;
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; color: var(--ink-2); font-size: 11px; }
.legend b { color: var(--ink); }
.nores { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--amber); border-radius: 8px; background: var(--amber-soft); font-size: 13px; }
.nores p { margin: 0; }
/* David's coverage message: green when we accept the plan, amber for self-pay, purple while we check. */
.verdict { display: grid; gap: 6px; padding: 14px; border: 1px solid; border-radius: 10px; }
.verdict.good { border-color: var(--green); background: var(--green-soft); }
.verdict.warn { border-color: var(--amber); background: var(--amber-soft); }
.verdict.neutral { border-color: var(--purple); background: var(--purple-soft); }
.verdict h2 { font-size: 16px; }
.verdict p { margin: 0; font-size: 13px; }
.verdict .price { font-size: 26px; font-weight: 700; }
.verdict .price span { font-size: 13px; font-weight: 500; }
/* The answers behind the message, each with its change link. */
.summary { display: grid; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.summary dt { color: var(--ink-2); font-size: 11px; }
.summary dd { margin: 0; font-size: 13px; font-weight: 600; }
.summary .link { margin-left: 6px; font-size: 12px; }
/* David's review card: one row per fact with its icon, or the doctor's initials; labels in ink-2 for contrast, as the footer. */
.rv { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.rv > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.rv small { display: block; color: var(--ink-2); font-size: 11px; }
.rv b { font-weight: 600; overflow-wrap: anywhere; }
.rv .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--purple); }
.rv > .dwith { grid-template-columns: 36px minmax(0, 1fr); align-items: start; }
.davfb { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--purple-soft); color: var(--purple); font-size: 12px; font-weight: 700; }
.rv > .ed { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; }
.rv > .ed .link { font-size: 12px; }
.docpick { margin-top: 6px; }
.docpick select { padding: 8px 10px; font-size: 13px; }
.yourdet { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.yourdet summary { color: var(--purple); font-size: 14px; font-weight: 600; cursor: pointer; }
.yourdet summary .note { font-weight: 400; }
.yourdet .rv { margin-top: 8px; padding: 0; border: 0; }
.yourdet > .note { margin-top: 10px; }
.yourdet .note .link { font-size: 12px; }
.ok { display: flex; gap: 8px; align-items: center; margin: 0; padding: 9px 12px; border: 1px solid var(--green); border-radius: 8px; background: var(--green-soft); font-size: 12px; }
.again { align-self: center; }

.doc { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.doc h2 { margin-top: 8px; font-size: 16px; font-weight: 600; }
.doc p { margin: 0; }
.doc ul { margin: 0; padding-left: 20px; }
.doc li { margin-bottom: 4px; }

/* ink-2, not the mockup's paler ink-3: small print still needs 4.5:1 against the card. */
.foot {
  display: flex; flex-direction: column; align-items: center; padding: 2px 18px 18px;
  color: var(--ink-2); font-size: 10.5px; line-height: 1.5; text-align: center;
}
.foot-info { display: flex; flex-direction: column; align-items: center; }
.foot-contact, .foot-links { display: block; }
/* Phones: the address is the footer's one line to read, so it is set at body-text size, not in the small print. */
.foot-contact { margin-bottom: 4px; color: var(--ink); font-size: 16px; }

/* Tablets and up: header, band and footer across the page; on tablets the question sits in a card. */
@media (min-width: 40rem) {
  .page { background: transparent; }
  .top { padding: 14px 24px; }
  .logo { gap: 10px; }
  .logoicon { height: 30px; }
  .logotext { font-size: 18px; }
  .callbtn { padding: 10px 16px; border-radius: 8px; font-size: 14px; }
  .band { padding: 12px; font-size: 13px; }

  .screen {
    flex: none; gap: 18px; width: min(760px, calc(100% - 48px)); margin: 40px auto;
    padding: 36px 44px 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow);
  }
  .content { gap: 18px; }
  .q { font-size: 30px; }
  .q.start { margin-top: 0; }
  .sub { font-size: 16px; }
  .note { font-size: 14px; }
  .social { justify-content: flex-start; margin: 0; font-size: 14px; }

  .opt { padding: 14px 18px; border-radius: 10px; }
  .opt b { font-size: 16px; }
  .opt small { font-size: 14px; }
  .opts.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pair .opt { align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; }
  .pair .opt:hover { background: var(--purple-soft); }
  .pair .opt b { font-size: 17px; }
  .pair .opt-text { flex: 1; }
  .opt-icon {
    display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 50%; background: var(--purple-soft); color: var(--purple);
  }
  .opt-go { display: flex; flex-shrink: 0; color: var(--purple); }

  .primary { width: auto; align-self: flex-start; padding: 14px 32px; }
  .nav { font-size: 13px; }
  .ask { gap: 16px; }
  .seclabel { font-size: 12px; }
  .field { font-size: 18px; }
  .err { font-size: 14px; }
  .hint { padding: 12px 14px; font-size: 13px; }
  .secondary { font-size: 15px; }
  fieldset.chips { gap: 8px; }
  .chip span { padding: 10px 16px; font-size: 15px; }
  .ctx { font-size: 14px; }
  .filter-row select { padding: 10px 8px; font-size: 14px; }
  .weeknav { font-size: 15px; }
  fieldset.week { gap: 8px; }
  .wday { gap: 6px; }
  .wday-h { font-size: 12px; }
  .wday-h b { font-size: 17px; }
  .slot span { min-height: 48px; }
  .slot b { font-size: 14px; }
  .slot small { font-size: 11px; }
  .legend { font-size: 12.5px; }
  .nores { font-size: 14px; }
  .verdict { gap: 8px; padding: 16px 18px; }
  .verdict h2 { font-size: 18px; }
  .verdict p, .summary dd { font-size: 15px; }
  .verdict .price { font-size: 30px; }
  .verdict .price span, .summary .link { font-size: 14px; }
  .summary { padding: 14px 18px; }
  .summary dt { font-size: 12px; }
  .rv { padding: 14px 18px; }
  .rv > div { font-size: 15px; }
  .rv small { font-size: 12px; }
  .ok { font-size: 13px; }
  .doc { gap: 12px; font-size: 15px; }
  .doc h2 { font-size: 18px; }

  .foot {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; margin-top: auto;
    padding: 20px 24px; border-top: 1px solid var(--line); background: var(--card); font-size: 12.5px; text-align: left;
  }
  .foot-info { align-items: flex-start; gap: 2px; }
  .foot-contact { margin-bottom: 0; color: inherit; font-size: inherit; }
}

/* Desktop: no card, the page itself is the screen. Sizes here are rem, and the root size grows with the window from 1024px to 2560px wide. */
@media (min-width: 64rem) {
  html { font-size: clamp(1rem, calc(0.6667rem + 0.5208vw), 1.5rem); }
  .page { background: var(--card); }
  .top, .foot { padding-inline: max(2rem, calc((100% - 70rem) / 2)); }
  .top { padding-block: 1rem; }
  .logo { gap: 0.625rem; }
  .logoicon { height: 2rem; }
  .logotext { font-size: 1.1875rem; }
  .top-right { gap: 1.125rem; }
  .callbtn { padding: 0.6875rem 1.125rem; border-radius: 0.5rem; font-size: 0.9375rem; }
  .band { padding: 0.8125rem; font-size: 0.8125rem; }

  .screen {
    flex: 1; justify-content: center; gap: 1.25rem; width: min(47.5rem, 100% - 4rem); margin: 0 auto;
    padding: 3rem 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .content { gap: 1.125rem; }
  .q { font-size: 2rem; }
  .sub { font-size: 1.0625rem; }
  .note, .social { font-size: 0.9375rem; }
  .opt { padding: 0.875rem 1.125rem; border-radius: 0.625rem; }
  .opt b { font-size: 1.0625rem; }
  .opt small { font-size: 0.9375rem; }
  .opts.pair { gap: 1rem; }
  .pair .opt { gap: 1rem; padding: 1.125rem 1.25rem; border-radius: 0.75rem; }
  .pair .opt b { font-size: 1.125rem; }
  .opt-icon { width: 2.75rem; height: 2.75rem; }
  .opt-icon .ic { width: 1.375rem; height: 1.375rem; }
  .opt-go .ic { width: 1.25rem; height: 1.25rem; }
  .primary { padding: 1rem 2.5rem; border-radius: 0.5rem; font-size: 1rem; }
  .nav { font-size: 0.8125rem; }
  .ask { gap: 1.125rem; }
  .q-head { gap: 0.375rem; }
  .seclabel { font-size: 0.75rem; }
  .field { padding: 0.875rem 1rem; border-radius: 0.5rem; font-size: 1.125rem; }
  .err { font-size: 0.875rem; }
  .hint { gap: 0.5rem; padding: 0.875rem 1.125rem; border-radius: 0.5rem; font-size: 0.875rem; }
  .secondary { padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.9375rem; }
  .pick { width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; }
  .pick::after { width: 0.5rem; height: 0.5rem; }
  .av { width: 2rem; height: 2rem; font-size: 0.75rem; }
  .row { gap: 0.5rem; }
  .field.code { max-width: 16rem; font-size: 1.625rem; }
  .otp { max-width: 24rem; gap: 0.5rem; }
  .otp-box { padding: 0.875rem 0; border-radius: 0.5rem; font-size: 1.625rem; }
  .link { font-size: 0.875rem; }
  .plan-search { gap: 0.5rem; }
  fieldset.chips { gap: 0.5rem; }
  .chip span { padding: 0.625rem 1rem; font-size: 0.9375rem; }
  .ctx { padding: 0.625rem 0.875rem; border-radius: 0.5rem; font-size: 0.9375rem; }
  .filters, .filter-row { gap: 0.5rem; }
  .filter-row select { padding: 0.625rem 0.5rem; border-radius: 0.5rem; font-size: 0.9375rem; }
  .weeknav { font-size: 1rem; }
  .weeknav a, .weeknav .off { width: 2.5rem; height: 2.5rem; border-radius: 0.375rem; font-size: 1.25rem; }
  fieldset.week, .wday { gap: 0.5rem; }
  .wday-h { font-size: 0.8125rem; }
  .wday-h b { font-size: 1.125rem; }
  .slot span { min-height: 3.25rem; border-radius: 0.5rem; }
  .slot b { font-size: 0.9375rem; }
  .slot small { font-size: 0.75rem; }
  a.more { min-height: 3.25rem; border-radius: 0.5rem; font-size: 0.875rem; }
  .legend { font-size: 0.875rem; }
  .nores { padding: 1rem 1.25rem; border-radius: 0.5rem; font-size: 0.9375rem; }
  .verdict { gap: 0.5rem; padding: 1rem 1.25rem; border-radius: 0.75rem; }
  .verdict h2 { font-size: 1.25rem; }
  .verdict p, .summary dd { font-size: 1rem; }
  .verdict .price { font-size: 2rem; }
  .verdict .price span, .summary .link { font-size: 0.9375rem; }
  .summary { gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 0.75rem; }
  .summary dt { font-size: 0.8125rem; }
  .doc { gap: 0.75rem; font-size: 1rem; }
  .doc h2 { font-size: 1.1875rem; }
  .foot { gap: 0.625rem 2rem; padding-block: 1.5rem; font-size: 0.8125rem; }
  .foot-info { gap: 0.125rem; }
}