/* BClear Rx site styles. Every value is a token from theme.css; the components are shared
   with the BClear Aligner site (src/BClear.Web), with Rx additions at the end.
   Layout uses logical properties (inline/block, start/end) throughout so the Arabic
   (RTL) site needs no separate stylesheet. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--surface-100);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}

[dir="rtl"] body { font-family: var(--font-arabic); letter-spacing: 0; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-700); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; color: var(--ink-900); font-family: var(--font-display); }
[dir="rtl"] :is(h1, h2, h3, h4) { font-family: var(--font-arabic); }
p { margin: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: var(--space-4); top: -60px; z-index: 100;
  background: var(--surface-100); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
}
.skip-link:focus { top: var(--space-4); }

/* ---------------------------------------------------------------- Type */

.overline {
  font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--brand-700); margin-bottom: var(--space-3); display: block; text-transform: uppercase;
}
.display-2xl, .display-l, .display-m, .heading-m, .heading-s { font-family: var(--font-display); }
.display-2xl { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; }
.display-l { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.015em; }
.display-m { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.heading-m { font-size: 18px; line-height: 26px; font-weight: 600; }
.heading-s { font-size: 16px; line-height: 22px; font-weight: 600; }
.body-l { font-size: 18px; line-height: 30px; color: var(--ink-600); }
.body-s { font-size: 14px; line-height: 22px; color: var(--ink-500); }
.numeric { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-500); }
.text-brand { color: var(--brand-700); }
/* A lead paragraph directly under a heading. */
:is(.display-2xl, .display-l, .display-m) + .body-l { margin-top: var(--space-3); }

@media (min-width: 900px) {
  .display-2xl { font-size: 56px; line-height: 64px; letter-spacing: -0.025em; }
  .display-l { font-size: 36px; line-height: 44px; letter-spacing: -0.02em; }
  .display-m { font-size: 26px; line-height: 34px; letter-spacing: -0.015em; }
}
[dir="rtl"] :is(.display-2xl, .display-l, .display-m, .overline) { letter-spacing: 0; }
/* Arabic letterforms need more room above and below than Latin at the same size. */
[dir="rtl"] .display-2xl { line-height: 1.3; }
[dir="rtl"] :is(.display-l, .display-m) { line-height: 1.45; }
[dir="rtl"] body { line-height: 1.8; }
[dir="rtl"] .overline { font-size: 13px; text-transform: none; }

/* ------------------------------------------------------------- Layout */

.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--space-5));
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 900px) {
  .container { max-width: calc(var(--content-max) + 2 * var(--space-7)); padding-inline: var(--space-7); }
}

.section { padding-block: var(--space-8); }
@media (min-width: 900px) { .section { padding-block: var(--space-9); } }
.section--tint { background: var(--brand-050); }
.section--sand { background: var(--sand-100); }
.section--wash { background: var(--gradient-wash); }
.section--tight { padding-block: var(--space-7); }

.section-head { max-width: 720px; margin-bottom: var(--space-6); }
.section-head .body-l { margin-top: var(--space-3); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
.section-head--row > div { max-width: 720px; }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid { gap: var(--space-6); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* --------------------------------------------------------- Utility bar */

.utility-bar { background: var(--surface-inverse); color: var(--ink-inverse); font-size: 13px; line-height: 20px; }
.utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 36px; }
.utility-bar a { color: var(--ink-inverse); text-decoration: none; }
.utility-bar a:hover { text-decoration: underline; }
.utility-bar__links { display: flex; gap: var(--space-5); }
.utility-bar .lang-switch { font-weight: 500; }
/* The audience switch (For dentists / For patients): a pill, so it reads as a toggle. */
.utility-bar .audience-switch {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3);
  border: 1px solid rgba(245, 248, 250, 0.45); border-radius: var(--radius-pill); font-weight: 500;
}
.utility-bar .audience-switch:hover { background: rgba(245, 248, 250, 0.12); text-decoration: none; }
.audience-switch svg { width: 14px; height: 14px; }
.drawer__panel .audience-switch { display: flex; align-items: center; gap: var(--space-2); color: var(--brand-700); }
.utility-bar__note { display: inline-flex; align-items: center; gap: var(--space-2); }
.utility-bar__note svg { width: 14px; height: 14px; color: var(--brand-500); }
@media (max-width: 599px) { .utility-bar__note { display: none; } .utility-bar__inner { justify-content: flex-end; } }

/* ------------------------------------------------------------- Header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface-100) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 68px; }
@media (min-width: 900px) { .site-header__inner { min-height: 80px; } }

.brand-link { display: inline-flex; flex: none; }
.brand-link img { width: 118px; height: auto; }
@media (min-width: 900px) { .brand-link img { width: 132px; } }

.nav { display: none; margin-inline-start: auto; align-items: center; gap: var(--space-1); }
.nav a:not(.btn) {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--space-3); color: var(--ink-900); text-decoration: none;
  font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 500;
}
.nav a:not(.btn):hover { color: var(--brand-700); }
.nav a:not(.btn)[aria-current="page"] { color: var(--brand-700); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: var(--space-3); bottom: 6px; height: 3px;
  background: var(--brand-500); border-radius: var(--radius-pill);
}
.nav .btn { margin-inline-start: var(--space-3); }

.nav-toggle {
  margin-inline-start: auto; width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: var(--surface-100); color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (min-width: 1080px) { .nav { display: flex; } .nav-toggle { display: none; } }
.nav a, .btn { white-space: nowrap; }

.drawer {
  position: fixed; inset: 0; z-index: 60; background: var(--overlay);
  display: none;
}
.drawer.is-open { display: block; }
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(320px, 86vw);
  background: var(--surface-100); padding: var(--space-5); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto;
  animation: drawer-in var(--dur-slow) var(--ease-enter);
}
.drawer__panel a:not(.btn) {
  color: var(--ink-900); text-decoration: none; padding: var(--space-3) 0;
  font-family: var(--font-display); font-weight: 500;
  border-bottom: 1px solid var(--border-subtle);
}
.drawer__panel a[aria-current="page"] { color: var(--brand-700); }
.drawer__panel .drawer__minor { font-size: 14px; color: var(--ink-600); }
.drawer__close { align-self: flex-end; }
@keyframes drawer-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
[dir="rtl"] .drawer__panel { animation-name: drawer-in-rtl; }
@keyframes drawer-in-rtl { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------- Button */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 500;
  border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--sm { min-height: 40px; padding: 0 var(--space-5); font-size: 14px; }
.btn--full { width: 100%; }

.btn--primary { background: var(--action-500); color: var(--on-action); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--action-600); box-shadow: var(--shadow-brand); transform: translateY(-2px); }
.btn--primary:active { background: var(--action-700); box-shadow: var(--shadow-sm); transform: none; }

.btn--secondary { background: var(--surface-100); color: var(--ink-900); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-200); border-color: var(--ink-600); }

.btn--ghost { background: transparent; color: var(--brand-700); }
.btn--ghost:hover { background: var(--brand-100); }

.btn--danger { background: var(--danger-500); color: #ffffff; }
.btn--danger:hover { filter: brightness(0.92); }

.btn--on-dark { background: transparent; color: var(--ink-inverse); border-color: var(--ink-inverse); }
.btn--on-dark:hover { background: rgba(245, 248, 250, 0.1); }

[dir="rtl"] .btn { letter-spacing: 0; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 500;
  color: var(--brand-700); text-decoration: none;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-standard); }
.link-arrow:hover svg { transform: translateX(3px); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(3px); }

/* -------------------------------------------------------------- Badge */

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2);
  border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge--neutral { background: var(--surface-300); color: var(--ink-900); }
.badge--brand { background: var(--brand-100); color: var(--brand-700); }
.badge--sand { background: var(--sand-200); color: var(--ink-900); }
.badge--success { background: var(--success-100); color: var(--success-500); }
.badge--danger { background: var(--danger-100); color: var(--danger-500); }
.badge--warning { background: var(--warning-100); color: var(--warning-500); }

/* --------------------------------------------------------------- Card */

.card {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-5); color: var(--ink-900); text-decoration: none;
}
@media (min-width: 900px) { .card { padding: var(--space-6); } }
a.card, .card--interactive {
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
a.card:hover, .card--interactive:hover { border-color: var(--brand-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.tile__icon {
  width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--brand-100); color: var(--brand-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.tile__icon svg { width: 22px; height: 22px; }

.card > .badge { align-self: flex-start; }

.card__foot {
  margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--brand-700);
}
.card__foot svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- Hero */

.hero { background: var(--gradient-wash); padding-block: var(--space-7) var(--space-8); overflow-x: clip; }
@media (min-width: 900px) { .hero { padding-block: var(--space-9); } }
.hero__inner { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); } }
.hero h1 { max-width: 15ch; }
.hero .body-l { margin-top: var(--space-4); max-width: 46ch; }
.hero__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Hero photo: a soft rounded frame on a sand disc, underlined by the smile from the mark. */
.hero__media { position: relative; margin: 0; justify-self: center; width: min(520px, 100%); }
.hero__media::before {
  content: ""; position: absolute; z-index: 0; inset-block-start: -6%; inset-inline-end: -8%;
  width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--sand-200);
}
.hero__media img {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 608 / 576; object-fit: cover;
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg);
}
.hero__smile { position: absolute; z-index: 2; inset-inline-start: 28%; width: 44%; bottom: -40px; color: var(--brand-500); }

.hero__facts {
  list-style: none; margin: var(--space-7) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--border-subtle);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
}
.hero__facts li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 22px; color: var(--ink-600); }
.hero__facts svg { width: 18px; height: 18px; color: var(--brand-700); flex: none; }

.page-hero { background: var(--gradient-wash); padding-block: var(--space-8) var(--space-7); border-bottom: 1px solid var(--border-subtle); }
.page-hero .body-l { margin-top: var(--space-3); max-width: 64ch; }
.breadcrumb { font-size: 14px; line-height: 20px; margin-bottom: var(--space-4); color: var(--ink-500); }
.breadcrumb a { color: var(--ink-600); }

/* ----------------------------------------------------- Feature list */

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.checks .step-title { display: block; color: var(--ink-900); font-weight: 500; }
.checks li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--ink-600); }
.checks svg { width: 22px; height: 22px; flex: none; margin-top: 3px; padding: 3px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); }

.media-frame { margin: 0; }
.media-frame img { width: 100%; border-radius: var(--radius-xl); object-fit: cover; }

/* ------------------------------------------------------------ FAQ */

.faq-group + .faq-group { margin-top: var(--space-7); }
.faq-group > h2 { margin-bottom: var(--space-4); }
.faq { border-bottom: 1px solid var(--border-subtle); }
.faq:first-of-type { border-top: 1px solid var(--border-subtle); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-5); font-family: var(--font-display); font-size: 17px; line-height: 26px; font-weight: 500; color: var(--ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-700); }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--brand-700); transition: transform var(--dur-base) var(--ease-standard); }
.faq[open] summary svg { transform: rotate(45deg); }
.faq__answer { padding-bottom: var(--space-5); max-width: 68ch; color: var(--ink-600); }

/* ------------------------------------------------- Comparison table */

.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 24px; }
.compare th, .compare td { padding: var(--space-4); text-align: start; vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.compare thead th { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink-900); border-bottom: 2px solid var(--border-default); }
.compare thead th.compare__us { color: var(--brand-700); }
.compare tbody th { font-weight: 500; color: var(--ink-900); width: 22%; }
.compare td { color: var(--ink-600); }
.compare .compare__us { background: var(--brand-050); }
.compare thead .compare__us { border-start-start-radius: var(--radius-md); border-start-end-radius: var(--radius-md); }
@media (max-width: 599px) { .compare th, .compare td { padding: var(--space-3) var(--space-2); font-size: 14px; line-height: 22px; } }

/* --------------------------------------------------- Factor cards */

.factor h3 { margin-top: var(--space-2); }
.factor p { font-size: 15px; line-height: 24px; }

/* -------------------------------------------------------- Chips */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5);
  border-radius: var(--radius-pill); background: var(--surface-100); border: 1px solid var(--border-default);
  font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink-900); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
a.chip:hover { border-color: var(--brand-500); background: var(--brand-050); }
.chip svg { width: 18px; height: 18px; color: var(--brand-700); }

/* ------------------------------------------------------------- Filters */

.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.tabs a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4);
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--ink-900);
  text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 500;
}
.tabs a:hover { background: var(--surface-200); }
.tabs a[aria-current="true"] { background: var(--brand-100); border-color: var(--brand-700); color: var(--brand-700); }

.tabs__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  margin-inline-start: var(--space-2); border-radius: var(--radius-pill); background: var(--surface-300);
  font-size: 12px; line-height: 1; color: var(--ink-600);
}
.tabs a[aria-current="true"] .tabs__count { background: var(--surface-100); color: var(--brand-700); }

/* --------------------------------------------------------------- Table */

.table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-100); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.table th {
  text-align: start; background: var(--surface-200); color: var(--ink-900); font-size: 12px; line-height: 16px;
  font-weight: 500; letter-spacing: 0.02em; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--ink-600); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-200); }
.table td.num, .table th.num { text-align: end; }
.table .strong { color: var(--ink-900); font-weight: 500; }

/* ------------------------------------------------------------ CTA band */

.cta-band { background: var(--gradient-brand); color: var(--ink-inverse); border-radius: var(--radius-2xl); padding: var(--space-7) var(--space-5); position: relative; overflow: hidden; }
@media (min-width: 900px) { .cta-band { padding: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } }
.cta-band h2 { color: var(--ink-inverse); }
.cta-band p { color: var(--ink-inverse); margin-top: var(--space-3); max-width: 52ch; }
.cta-band .row { margin-top: var(--space-5); position: relative; }
@media (min-width: 900px) { .cta-band .row { margin-top: 0; flex: none; } }
.cta-band .chip { background: transparent; border-color: rgba(245, 248, 250, 0.4); color: var(--ink-inverse); }
.cta-band a.chip:hover { background: rgba(245, 248, 250, 0.1); border-color: var(--ink-inverse); }
.cta-band .chip svg { color: var(--brand-500); }

/* Sand callout: the warm counterpart of the CTA band. */
.callout { background: var(--sand-200); border-radius: var(--radius-2xl); padding: var(--space-7) var(--space-5); }
@media (min-width: 900px) { .callout { padding: var(--space-8); } }

/* ------------------------------------------------------------- Footer */

/* A page that ends on a section: the footer's top margin supplies the gap. */
main > .section:last-child { padding-bottom: 0; }

.site-footer { background: var(--surface-inverse); color: var(--ink-inverse); padding-block: var(--space-8) var(--space-6); margin-top: var(--space-9); }
.site-footer a { color: var(--ink-inverse); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
.site-footer__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .site-footer__grid > :first-child { grid-column: auto; } }
.site-footer h2 { color: var(--ink-inverse); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; margin-bottom: var(--space-3); text-transform: uppercase; }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 22px; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer p { font-size: 14px; line-height: 22px; max-width: 36ch; }
.site-footer__logo { width: 132px; margin-bottom: var(--space-4); }
.site-footer__countries { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.site-footer__countries span {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3);
  border: 1px solid rgba(245, 248, 250, 0.3); border-radius: var(--radius-pill); font-size: 13px; line-height: 22px;
}
.site-footer__base { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(245, 248, 250, 0.18); font-size: 14px; line-height: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.site-footer__legal { display: flex; gap: var(--space-5); }

/* ----------------------------------------------------------- Empty state */

.empty { text-align: center; padding: var(--space-8) var(--space-5); color: var(--ink-500); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); }

/* ----------------------------------------------------------- Rx: header */

/* BClear Rx is the clinical, technical sibling of the patient site: a deep navy header and
   hero, sky-blue accents, light content sections below. */
.utility-bar { background: var(--brand-900); border-bottom: 1px solid rgba(245, 248, 250, 0.08); }
.site-header { background: color-mix(in srgb, var(--surface-inverse) 96%, transparent); border-bottom-color: rgba(245, 248, 250, 0.08); }
.nav a:not(.btn) { color: var(--ink-inverse); }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: #ffffff; }
.site-header .nav-toggle { background: transparent; border-color: rgba(245, 248, 250, 0.4); color: var(--ink-inverse); }

/* Logo: the BClear Rx lockup; white ink on the navy header and footer. */
.rx-lockup { display: inline-flex; flex: none; }
.rx-lockup img { width: 136px; height: auto; }
@media (min-width: 900px) { .rx-lockup img { width: 164px; } }
.rx-lockup--footer { width: 164px; height: auto; margin-bottom: var(--space-4); }

/* ------------------------------------------------------------- Rx: hero */

.rx-hero {
  background: radial-gradient(120% 80% at 85% 10%, rgba(0, 167, 225, 0.18) 0%, transparent 60%), var(--gradient-brand);
  color: var(--ink-inverse); padding-block: var(--space-8); overflow-x: clip;
}
@media (min-width: 900px) { .rx-hero { padding-block: var(--space-9); } }
.rx-hero__inner { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .rx-hero__inner { grid-template-columns: 1.15fr 1fr; gap: var(--space-8); } }
.rx-hero h1 { color: #ffffff; max-width: 18ch; }
.rx-hero .overline { color: var(--brand-500); }
.rx-hero .body-l { color: var(--ink-inverse); margin-top: var(--space-4); max-width: 48ch; opacity: 0.92; }
.rx-hero .hero__facts { border-top-color: rgba(245, 248, 250, 0.16); }
.rx-hero .hero__facts li { color: var(--ink-inverse); }
.rx-hero .hero__facts svg { color: var(--brand-500); }

/* Home hero: the headline, then the real PlanStudio screen, which overlaps the band below. */
.rx-hero--screen { padding-bottom: 0; }
.rx-hero__copy { max-width: 820px; }
.rx-hero__copy h1 { max-width: 20ch; }
.rx-screen {
  position: relative; z-index: 1; margin: var(--space-7) 0 calc(-1 * var(--space-8));
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-200);
  border: 1px solid rgba(245, 248, 250, 0.18); box-shadow: 0 30px 80px rgba(11, 34, 48, 0.45);
}
.rx-screen img { width: 100%; height: auto; }
@media (min-width: 900px) { .rx-screen { border-radius: var(--radius-xl); margin-bottom: calc(-1 * var(--space-9)); } }

/* What every case gives you: four items under the hero screen. */
.rx-deliver-band { background: var(--brand-050); padding: calc(var(--space-8) + var(--space-6)) 0 var(--space-7); }
@media (min-width: 900px) { .rx-deliver-band { padding-top: calc(var(--space-9) + var(--space-7)); } }
.rx-deliver { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .rx-deliver { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .rx-deliver { grid-template-columns: repeat(4, 1fr); } }
.rx-deliver li { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-3); align-items: start; }
.rx-deliver strong { display: block; color: var(--ink-900); font-family: var(--font-display); font-weight: 600; }
.rx-deliver li > span:last-child > span { font-size: 15px; line-height: 24px; color: var(--ink-600); }
.rx-deliver__foot {
  margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--brand-100);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); color: var(--ink-600);
}
.rx-deliver__price { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--ink-900); }

/* A product screen inside a content section. */
.shot { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); background: var(--surface-200); }
.shot img { width: 100%; height: auto; }
.shot figcaption { padding: var(--space-3) var(--space-4); font-size: 14px; line-height: 22px; color: var(--ink-500); background: var(--surface-100); border-top: 1px solid var(--border-subtle); }

/* ----------------------------------------------------------- Rx: content */

.path-card .checks { margin-top: var(--space-2); }
.path-card .card__foot { border-top-color: var(--border-subtle); }

/* Five steps in a row on wide screens, numbered by a counter. */
.rx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: rx-step; }
@media (min-width: 700px) { .rx-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .rx-steps { grid-template-columns: repeat(5, 1fr); } }
.rx-steps li {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-100); border: 1px solid var(--brand-100);
}
.rx-steps li::before {
  counter-increment: rx-step; content: counter(rx-step); position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-5);
  font-family: var(--font-display); font-size: 32px; line-height: 1; font-weight: 600; color: var(--brand-100);
}
.rx-steps p { font-size: 15px; line-height: 24px; color: var(--ink-600); }

.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5) var(--space-6); }
@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-grid li { display: flex; gap: var(--space-4); align-items: flex-start; }
.feature-grid .tile__icon { flex: none; }
.feature-grid p { margin-top: var(--space-1); font-size: 15px; line-height: 24px; color: var(--ink-600); }

@media (min-width: 1080px) { .feature-grid--four { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) { .feature-grid--two { grid-template-columns: repeat(2, 1fr) !important; } }

.note { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--sand-100); color: var(--ink-900); font-size: 15px; line-height: 24px; }
.note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--brand-700); }

.path-card .row { margin-top: auto; gap: var(--space-5); }

/* The workflow: numbered steps joined by a line. */
.timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; display: grid; gap: var(--space-7); }
.timeline > li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-5); }
.timeline > li:not(:last-child)::before {
  content: ""; position: absolute; inset-inline-start: 23px; top: 56px; bottom: calc(-1 * var(--space-7) + 8px);
  width: 2px; background: var(--brand-100);
}
.timeline__num {
  width: 48px; height: 48px; border-radius: 50%; background: var(--surface-inverse); color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 18px;
}
.timeline p { margin-top: var(--space-3); color: var(--ink-600); }

/* The case form's steps, or any short numbered list with a bold lead. */
.wizard { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: wizard; }
.wizard li {
  position: relative; display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 36px);
  border-radius: var(--radius-md); background: var(--surface-100); border: 1px solid var(--border-subtle);
}
.wizard li::before {
  counter-increment: wizard; content: counter(wizard); position: absolute; inset-inline-start: var(--space-4); top: var(--space-4);
  width: 26px; height: 26px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
}
.wizard strong { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); }
.wizard span { font-size: 15px; line-height: 24px; color: var(--ink-600); }

/* ------------------------------------------------- Rx: pricing, cases */

.select {
  font-family: inherit; font-size: 16px; line-height: 24px; color: var(--ink-900); background: var(--surface-100);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-height: 44px;
}
.select:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.pricing-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.country-picker { display: flex; flex-direction: column; gap: var(--space-1); }

.bundle-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .bundle-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.bundle {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-5);
  background: var(--surface-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.bundle--featured { border: 2px solid var(--brand-500); box-shadow: var(--shadow-md); }
.bundle__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.bundle__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.bundle__price .numeric { font-family: var(--font-display); font-size: 36px; line-height: 44px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.02em; }
.bundle__unit { color: var(--ink-500); }
.bundle .checks { margin-bottom: auto; }

.price-teaser { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.price-teaser p { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.price-teaser__amount { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 600; color: var(--ink-900); }

.demo-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .demo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .demo-grid { grid-template-columns: repeat(3, 1fr); } }
.demo-card__art { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }

.site-footer { background: var(--brand-900); }

/* ------------------------------------------------------ Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}