/* ============================================================
   CLINIQ public site, design layer v2 (loads after site.css).

   Principles
   1. Two rooms. The patient site and the clinic site each have their own header, footer emphasis and one primary
      action, joined by a single quiet door ("For clinics" / "Patient site").
   2. One page, one job. The first screen says what this is, what to do now, and what it will cost you (no account,
      nothing stored). Results appear where you search.
   3. Plain words, one idea per section, generous space, content before decoration.
   Prefix .p-  (page sections)   .s-  (shared header and footer, unchanged names)
   ============================================================ */
:root {
  --p-radius: 24px;
  --p-radius-sm: 18px;
  --p-section: clamp(56px, 9vw, 104px);
}

/* ============================================================
   AUDIENCE THEMES. One attribute, <html data-audience="patient|clinic">, switches the whole public site.
     patient  the teal end of the brand: airy, mint-tinted, welcoming
     clinic   the blue end of the brand: cool, a deep navy hero, "a professional tool"
   Each theme sets: accent colours, page tint, ticket glow, hero glow. Dark mode has its own values per audience.
   Components never name a colour; they use var(--color-primary), var(--s-accent-text) and the --a-* tokens.
   ============================================================ */
:root {
  --a-glow: #c8f1e6;                       /* soft light behind the patient hero */
  --a-band: linear-gradient(150deg, #0a1a3f 0%, #12307a 62%, #1b44bf 100%);
  --a-chip-teal-fg: #0f766e; --a-chip-teal-bg: #d9f3ec; --a-chip-teal-bg-hover: #c4ece0;
  --a-chip-blue-fg: #1d4ed8; --a-chip-blue-bg: #e3ebff; --a-chip-blue-bg-hover: #d2e0ff;
}
/* ---- patient (light) ---- */
:root[data-audience="patient"] {
  --color-bg: #f5fbf9; --color-surface-2: #ebf6f3; --color-primary-soft: #d9f3ec;
  --color-border: #d9e8e4; --color-border-strong: #bcd3cd;
}
/* ---- clinic (light) ---- */
:root[data-audience="clinic"] {
  --color-primary: #1d4ed8; --color-primary-dark: #1e3a8a; --color-primary-light: #3b82f6; --color-primary-soft: #e3ebff;
  --s-accent: #1d4ed8; --s-accent-text: #1d4ed8; --s-ticket-num: #8fb0ff;
  --color-bg: #f5f7ff; --color-surface-2: #ebeffd; --color-border: #dbe2f5; --color-border-strong: #bfcaea;
  --status-serving: #1d4ed8; --status-serving-soft: #e3ebff;
}
/* ---- patient (dark) ---- */
@media (prefers-color-scheme: dark) {
  :root[data-audience="patient"]:not([data-theme="light"]) {
    --color-bg: #07161a; --color-surface: #0d1f24; --color-surface-2: #0a191d; --color-primary-soft: rgba(20, 184, 166, .16);
    --color-border: #17343a; --color-border-strong: #24494f; --a-glow: rgba(20, 184, 166, .2);
  }
  :root[data-audience="clinic"]:not([data-theme="light"]) {
    --color-primary: #3563e9; --color-primary-dark: #2a50c4; --color-primary-light: #6f95ff; --color-primary-soft: rgba(96, 137, 255, .16);
    --s-accent: #6f95ff; --s-accent-text: #8fb0ff; --s-ticket-num: #8fb0ff; --s-ticket-bg: #050a1c;
    --color-bg: #0a1124; --color-surface: #101a33; --color-surface-2: #0c152b; --color-border: #1f2d52; --color-border-strong: #2c3f70;
    --status-serving: #8fb0ff; --status-serving-soft: rgba(96, 137, 255, .16);
    --a-band: linear-gradient(150deg, #060d22 0%, #0c1f56 62%, #143491 100%);
  }
}
:root[data-audience="patient"][data-theme="dark"] {
  --color-bg: #07161a; --color-surface: #0d1f24; --color-surface-2: #0a191d; --color-primary-soft: rgba(20, 184, 166, .16);
  --color-border: #17343a; --color-border-strong: #24494f; --a-glow: rgba(20, 184, 166, .2);
}
:root[data-audience="clinic"][data-theme="dark"] {
  --color-primary: #3563e9; --color-primary-dark: #2a50c4; --color-primary-light: #6f95ff; --color-primary-soft: rgba(96, 137, 255, .16);
  --s-accent: #6f95ff; --s-accent-text: #8fb0ff; --s-ticket-num: #8fb0ff; --s-ticket-bg: #050a1c;
  --color-bg: #0a1124; --color-surface: #101a33; --color-surface-2: #0c152b; --color-border: #1f2d52; --color-border-strong: #2c3f70;
  --status-serving: #8fb0ff; --status-serving-soft: rgba(96, 137, 255, .16);
  --a-band: linear-gradient(150deg, #060d22 0%, #0c1f56 62%, #143491 100%);
}
/* the switch link wears the colour of the room it leads to */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --a-chip-teal-fg: #2dd4bf; --a-chip-teal-bg: rgba(20, 184, 166, .16); --a-chip-teal-bg-hover: rgba(20, 184, 166, .26);
    --a-chip-blue-fg: #8fb0ff; --a-chip-blue-bg: rgba(96, 137, 255, .18); --a-chip-blue-bg-hover: rgba(96, 137, 255, .28); }
}
:root[data-theme="dark"] { --a-chip-teal-fg: #2dd4bf; --a-chip-teal-bg: rgba(20, 184, 166, .16); --a-chip-teal-bg-hover: rgba(20, 184, 166, .26);
  --a-chip-blue-fg: #8fb0ff; --a-chip-blue-bg: rgba(96, 137, 255, .18); --a-chip-blue-bg-hover: rgba(96, 137, 255, .28); }

/* ------------------------------------------------------------ header v2 */
.s-header { border-top: 3px solid var(--color-primary); }
.s-header .s-wrap { gap: 6px; }
.s-brand-tag {
  margin-left: 10px; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .01em;
  background: var(--color-primary-soft); color: var(--s-accent-text);
}
.s-door {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 8px 15px; border-radius: 999px;
  font-size: var(--text-md); font-weight: 700; text-decoration: none; white-space: nowrap;
  color: var(--d-fg); background: var(--d-bg); transition: background .15s, transform .15s;
}
.s-door--clinic  { --d-fg: var(--a-chip-blue-fg); --d-bg: var(--a-chip-blue-bg); --d-bg-hover: var(--a-chip-blue-bg-hover); }
.s-door--patient { --d-fg: var(--a-chip-teal-fg); --d-bg: var(--a-chip-teal-bg); --d-bg-hover: var(--a-chip-teal-bg-hover); }
.s-header .s-actions { margin-left: 0; }   /* the door carries the auto margin, so door + actions sit together on the right */
.s-door:hover { background: var(--d-bg-hover); color: var(--d-fg); }
.s-door svg { flex: none; width: 14px; height: 14px; transition: transform .15s; }
.s-door:hover svg { transform: translateX(2px); }
.s-door--back:hover svg { transform: translateX(-2px); }
.s-door:focus-visible { outline: 2px solid var(--d-fg); outline-offset: 2px; }
/* Phones: the door sits right next to the logo, so the other room is always one tap away. */
@media (max-width: 820px) {
  .s-brand-tag { display: none; }
  .s-door { margin-left: 2px; padding: 7px 12px; font-size: var(--text-sm); }
  .s-header .s-actions { margin-left: auto; }
}
@media (max-width: 380px) { .s-header .s-wrap { gap: 4px; } .s-door { padding: 7px 10px; } .s-door svg { display: none; } }

/* ------------------------------------------------------------ footer v2 */
.s-footer { border-top: 1px solid var(--color-border); padding-block: clamp(36px, 6vw, 64px) calc(28px + env(safe-area-inset-bottom, 0px)); margin-top: 0; }
.s-footer .s-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 5vw, 64px); align-items: start; }
.s-footer-col h2 { margin: 0 0 10px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.s-footer-col { display: flex; flex-direction: column; }
.s-footer-col a { color: var(--color-text-secondary); text-decoration: none; font-weight: 500; font-size: var(--text-md); padding: 6px 0; }
.s-footer-col a:hover { color: var(--s-accent-text); }
.s-footer .s-fine-print { grid-column: 1 / -1; }
@media (max-width: 760px) { .s-footer .s-wrap { grid-template-columns: 1fr 1fr; } .s-footer .s-wrap > :first-child { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ shared bits */
.p-eyebrow { margin: 0 0 14px; font-size: var(--text-md); font-weight: 700; color: var(--s-accent-text); letter-spacing: .01em; }
.p-section { padding-block: var(--p-section); }
.p-section--tight { padding-block: clamp(36px, 6vw, 64px); }
.p-title { margin: 0 0 12px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(1.75rem, 4vw, 2.75rem); text-wrap: balance; }
.p-sub { margin: 0; max-width: 38em; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--color-text-secondary); }
.p-head { margin-bottom: clamp(28px, 4vw, 48px); }
.p-head--center { text-align: center; } .p-head--center .p-sub { margin-inline: auto; }
.p-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--s-accent-text); flex: none; }
.p-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--p-radius); padding: clamp(22px, 3vw, 32px); }

/* ------------------------------------------------------------ PATIENT HOME: hero with the finder built in */
.p-hero { padding: clamp(44px, 8vw, 92px) 0 clamp(26px, 4vw, 40px); text-align: center;
  background: radial-gradient(72% 70% at 50% -12%, var(--a-glow), transparent 72%); }
.p-hero .s-h1 { max-width: 15em; margin-inline: auto; font-size: clamp(2.25rem, 6.4vw, 4.25rem); }
.p-hero .s-h1 span { display: block; color: var(--color-text-secondary); }
.p-hero .s-lead { margin-inline: auto; max-width: 34em; }
.p-hero .s-search {
  max-width: 700px; margin: clamp(26px, 4vw, 40px) auto 16px; min-height: 64px; padding: 7px; text-align: left;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px -12px rgba(15, 23, 42, .18);
}
.p-hero .s-search input { font-size: 1.0625rem; min-height: 48px; }
.p-hero .s-search .s-btn { min-height: 50px; padding-inline: 26px; }
.p-filters { display: grid; justify-items: center; gap: 10px; max-width: 820px; margin: 0 auto; }
.p-filters__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 100%; }
.p-filters .s-chip { min-height: 40px; padding-inline: 16px; font-size: var(--text-md); }
.p-filters__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); margin-right: 2px; }
.p-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--color-text-secondary); font-size: var(--text-md); }
.p-trust li { display: inline-flex; align-items: center; gap: 8px; }
.p-trust svg { color: var(--s-accent-text); flex: none; }
@media (max-width: 640px) {
  .p-filters { justify-items: stretch; }
  .p-filters__row { justify-content: flex-start; }
  .p-filters__row--scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--s-gutter) * -1); padding: 2px var(--s-gutter) 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .p-filters__row--scroll::-webkit-scrollbar { display: none; }
  .p-filters__row--scroll > * { flex: none; }
  .p-hero .s-search { border-radius: 22px; }
  .p-trust { flex-direction: column; align-items: center; gap: 8px; }
}

/* results sit directly under the search they belong to */
.p-find { border: 0; background: none; }
.p-results { background: var(--color-surface-2); border-top: 1px solid var(--color-border); padding-block: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 72px); scroll-margin-top: var(--s-header-h); }
.p-results__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px; }
.p-results__head h2 { margin: 0; font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; }
.p-results__head .s-note { margin: 4px 0 0; color: var(--color-text-secondary); font-size: var(--text-md); min-height: 1.5em; }
.p-legend { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--text-md); color: var(--color-text-secondary); }
.p-legend .p-mini { flex: none; display: inline-block; min-width: 3.4em; padding: 3px 10px; border-radius: 8px; background: var(--s-ticket-bg); color: var(--s-ticket-num); font-weight: 800; font-size: var(--text-md); text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.p-results .s-clinic { border-radius: var(--p-radius-sm); transition: box-shadow .2s, border-color .2s; }
.p-results .s-clinic:hover { border-color: var(--color-border-strong); box-shadow: 0 10px 30px -14px rgba(15, 23, 42, .25); }
.p-results .s-fine { margin-top: 22px; }

/* ------------------------------------------------------------ PATIENT HOME: two ways to see a doctor */
.p-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 24px); }
.p-way { display: flex; flex-direction: column; gap: 6px; }
.p-way h3 { margin: 14px 0 0; font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; }
.p-way > p { margin: 0 0 8px; color: var(--color-text-secondary); }
.p-way ol { list-style: none; counter-reset: w; margin: 10px 0 0; padding: 18px 0 0; border-top: 1px solid var(--color-border); display: grid; gap: 14px; }
.p-way li { counter-increment: w; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--color-text-secondary); }
.p-way li::before { content: counter(w); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--text-md); background: var(--color-primary-soft); color: var(--s-accent-text); }
.p-way li b { color: var(--color-text); font-weight: 700; }
@media (max-width: 760px) { .p-ways { grid-template-columns: minmax(0, 1fr); } }

.p-faq { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--color-border); }
.p-faq details { border-bottom: 1px solid var(--color-border); }
.p-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: rotate(45deg); transition: transform .2s; }
.p-faq details[open] summary::after { transform: rotate(-135deg); }
.p-faq summary:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; border-radius: 8px; }
.p-faq details p { margin: 0 0 22px; max-width: 42em; color: var(--color-text-secondary); }

.p-browse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 5vw, 64px); }
.p-browse h3 { margin: 0 0 12px; font-size: var(--text-md); font-weight: 700; color: var(--color-muted); }
.p-browse .s-links { margin: 0; }
@media (max-width: 760px) { .p-browse { grid-template-columns: minmax(0, 1fr); } }

/* the quiet door to the clinic side */
.p-door { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(24px, 4vw, 40px);
  border-radius: var(--p-radius); border: 1px solid var(--color-border);
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface) 70%); }
.p-door h2 { margin: 0 0 6px; font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 800; letter-spacing: -.02em; }
.p-door p { margin: 0; max-width: 34em; color: var(--color-text-secondary); }

/* ------------------------------------------------------------ CLINIC SITE: hero */
.p-chero { padding-block: clamp(40px, 7vw, 88px) clamp(32px, 5vw, 64px); }
.p-chero .s-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 72px); align-items: center; }
.p-chero .s-lead { max-width: 33em; }
.p-chero { position: relative; color: #fff; background: radial-gradient(60% 90% at 86% 18%, rgba(96, 137, 255, .38), transparent 62%), var(--a-band); }
.p-chero .p-eyebrow { color: #b3c8ff; }
.p-chero .s-h1 { color: #fff; }
.p-chero .s-lead { color: rgba(255, 255, 255, .86); }
.p-chero .s-btn--primary { background: #fff; border-color: #fff; color: #102a6b; }
.p-chero .s-btn--primary:hover { background: #e8efff; border-color: #e8efff; color: #102a6b; }
.p-chero .s-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.p-chero .s-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.p-chero .p-cta__alt { color: rgba(255, 255, 255, .84); }
.p-chero .p-cta__alt a { color: #fff; }
.p-chero .p-caption { color: rgba(255, 255, 255, .74); }
.p-chero .p-screen { border-color: rgba(255, 255, 255, .16); box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .65); }
.p-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }
.p-cta__alt { font-size: var(--text-md); color: var(--color-text-secondary); }
.p-cta__alt a { color: var(--s-accent-text); font-weight: 700; text-underline-offset: 3px; }
.p-screen { padding: clamp(16px, 2.4vw, 24px); border-radius: 28px; background: #0b1220; border: 1px solid #1e293b; box-shadow: 0 30px 60px -28px rgba(11, 18, 32, .55); }
.p-screen__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: #94a3b8; font-size: var(--text-sm); font-weight: 600; }
.p-screen__dots { display: inline-flex; gap: 6px; } .p-screen__dots i { width: 9px; height: 9px; border-radius: 50%; background: #334155; }
.s-ticket-stack { grid-template-columns: minmax(0, 1fr); }   /* let long doctor names truncate instead of widening the page */
.p-screen .s-ticket-stack { gap: 10px; }
.p-screen .s-ticket { background: #131c2e; }
.p-caption { margin: 12px 0 0; text-align: center; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 900px) { .p-chero .s-wrap { grid-template-columns: minmax(0, 1fr); } .p-screen { max-width: 520px; } }

/* outcomes: what changes for you, before any feature list */
.p-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 24px); margin: 0; padding: 0; list-style: none; }
.p-outcome h3 { margin: 16px 0 6px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.p-outcome p { margin: 0; color: var(--color-text-secondary); }
@media (max-width: 820px) { .p-outcomes { grid-template-columns: minmax(0, 1fr); } }

/* getting started */
.p-start { background: var(--color-surface-2); border-block: 1px solid var(--color-border); }
.p-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 24px); margin: 0; padding: 0; list-style: none; counter-reset: st; }
.p-step { counter-increment: st; position: relative; }
.p-step::before { content: counter(st); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 800; font-size: 1.0625rem; }
.p-step h3 { margin: 0 0 6px; font-size: 1.1875rem; font-weight: 800; letter-spacing: -.015em; }
.p-step p { margin: 0; color: var(--color-text-secondary); }
.p-review { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px 18px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.p-review svg { flex: none; margin-top: 2px; color: var(--s-accent-text); }
.p-review b { color: var(--color-text); }
@media (max-width: 820px) { .p-steps { grid-template-columns: minmax(0, 1fr); } }

/* features by role: tabs with a no-JS fallback (every role stacked) */
.p-tablist { display: none; gap: 6px; padding: 5px; width: max-content; max-width: 100%; margin: 0 0 24px; overflow-x: auto; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 999px; scrollbar-width: none; }
.p-tabs.is-js .p-tablist { display: flex; }
.p-tab { flex: none; min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: none; color: var(--color-text-secondary); font: 700 var(--text-md)/1 var(--font-sans); cursor: pointer; transition: background .15s, color .15s; }
.p-tab:hover { color: var(--color-text); }
.p-tab[aria-selected="true"] { background: var(--color-surface); color: var(--s-accent-text); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.p-tab:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }
.p-panel + .p-panel { margin-top: 40px; }
.p-tabs.is-js .p-panel + .p-panel { margin-top: 0; }
.p-panel[hidden] { display: none; }
.p-panel__title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.p-tabs.is-js .p-panel__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.p-panel__sub { margin: 0 0 18px; color: var(--color-muted); }
.p-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(12px, 2vw, 20px); margin: 0; padding: 0; list-style: none; }
.p-feat { padding: 22px; border-radius: var(--p-radius-sm); background: var(--color-surface); border: 1px solid var(--color-border); }
.p-feat b { display: block; margin-bottom: 6px; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.p-feat span { color: var(--color-text-secondary); }

/* the patient's view of you */
.p-seen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 6vw, 72px); align-items: center; }
.p-points { display: grid; gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; }
.p-points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--color-text-secondary); }
.p-points .p-icon { width: 44px; height: 44px; border-radius: 12px; }
.p-points b { display: block; color: var(--color-text); font-weight: 700; }
.p-seen__card { pointer-events: none; user-select: none; }
.p-seen__card .s-clinic { box-shadow: 0 24px 50px -24px rgba(15, 23, 42, .35); }
@media (max-width: 900px) { .p-seen { grid-template-columns: minmax(0, 1fr); } }

/* closing call to action */
.p-final { text-align: center; padding: clamp(40px, 7vw, 80px) clamp(20px, 4vw, 40px); border-radius: 32px; background: var(--color-primary); color: #fff; }
:root[data-audience="clinic"] .p-final { background: var(--a-band); }
.p-final h2 { color: #fff; margin: 0 0 10px; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.p-final p { margin: 0 auto 26px; max-width: 32em; color: rgba(255, 255, 255, .92); font-size: 1.0625rem; }
.p-final .p-cta { justify-content: center; margin: 0; }
.p-final .s-btn--primary { background: #fff; color: #102a6b; }
:root[data-audience="patient"] .p-final .s-btn--primary { color: var(--color-primary-dark); }
.p-final .s-btn--primary:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.p-final .s-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.p-final .s-btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .1); }

/* gentle entrance, never blocks content, off when motion is reduced */
@media (prefers-reduced-motion: no-preference) {
  .p-hero > .s-wrap > *, .p-chero .s-wrap > * { animation: p-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .p-hero > .s-wrap > *:nth-child(2) { animation-delay: .05s; } .p-hero > .s-wrap > *:nth-child(3) { animation-delay: .1s; }
  .p-hero > .s-wrap > *:nth-child(4) { animation-delay: .15s; } .p-hero > .s-wrap > *:nth-child(5) { animation-delay: .2s; }
  .p-chero .s-wrap > *:nth-child(2) { animation-delay: .12s; }
  @keyframes p-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ============================================================
   Fidelity: examples of the product keep the product's own colours, even inside the clinic room.
   - "How patients see you" is a patient-side screen, so it uses the patient (teal) palette.
   - The waiting-room screen is a product screen, so its numbers stay teal.
   ============================================================ */
.p-seen__card {
  --color-primary: #0f766e; --color-primary-dark: #0d5f58; --color-primary-light: #14b8a6; --color-primary-soft: #d9f3ec;
  --s-accent: #0f766e; --s-accent-text: #0f766e; --s-ticket-num: #2dd4bf;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-seen__card { --color-primary-soft: rgba(20, 184, 166, .16); --s-accent-text: #2dd4bf; --s-accent: #14b8a6; --s-ticket-bg: #060b16; }
}
:root[data-theme="dark"] .p-seen__card { --color-primary-soft: rgba(20, 184, 166, .16); --s-accent-text: #2dd4bf; --s-accent: #14b8a6; --s-ticket-bg: #060b16; }
.p-screen { --s-ticket-num: #2dd4bf; }