/* ==========================================================================
   LUMBEN — For Professionals (selector + clinic page)
   templates/public/professionals/selector.html, clinics.html

   Same palette as the dentist page (templates/public/are-you-dentist.html):
   navy #1B3A6B, deep navy #0d2240, ice #EEF5FF, accent #5B8FD4. Headings are
   Lovelo (lovelo.css), everything else Outfit. Sizes are px because the theme
   sets html { font-size: 15px }.
   ========================================================================== */

.pro-page {
  --pro-navy: #1B3A6B;
  --pro-navy-hover: #122C52;
  --pro-deep: #0d2240;
  --pro-deeper: #0a1a33;
  --pro-ice: #EEF5FF;
  --pro-ice-line: #d4e6f8;
  --pro-accent: #5B8FD4;      /* decorative / on navy only */
  --pro-accent-text: #2c64a8; /* small text on light: 5.6:1 */
  --pro-blue: #2c64a8;        /* emphasised heading phrase */
  --pro-cyan: #6cc6f0;        /* glow, active lines — on navy only */
  --pro-on-navy: #b9d3ee;     /* body text on navy: 7.0:1 */
  --pro-on-navy-em: #8ec5f0;  /* emphasis on navy: 7.9:1 */
  --pro-ink: #111;
  --pro-ink-2: #555;          /* 7.4:1 */
  --pro-line: #e2e2de;
  --pro-bg: #f5f5f3;
  --pro-radius: 24px;
  --pro-radius-sm: 16px;
  --pro-ease: cubic-bezier(.4, 0, .2, 1);
  --pro-ease-out: cubic-bezier(.2, .7, .2, 1);
  --pro-chat-clearance: 112px;
  overflow: visible;
  overflow-x: clip; /* theme overflow-x:hidden on body breaks sticky + scroll-margin */
}

@media (prefers-reduced-motion: no-preference) {
  html:has(body.pro-page) { scroll-behavior: smooth; }
}
/* Keyboard focus and anchor jumps stop above the fixed navbar and clear the Lupi button. */
html:has(body.pro-page) { scroll-padding-top: 96px; scroll-padding-bottom: var(--pro-chat-clearance, 112px); }

.pro-page .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;
}

.pro-page a:focus-visible,
.pro-page button:focus-visible,
.pro-page summary:focus-visible,
.pro-page [tabindex]:focus-visible {
  outline: 3px solid #4bb0e8;
  outline-offset: 3px;
  border-radius: 8px;
}
.pro-page h2[tabindex="-1"]:focus { outline: none; }

/* ── Type ────────────────────────────────────────────────────────────────── */
.pro-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 16px;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pro-accent-text);
}
.pro-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pro-accent); }

.pro-h1 {
  margin: 0 0 20px;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--pro-deep);
  text-wrap: balance;
}
.pro-h2 {
  margin: 0;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--pro-ink);
  font-weight: 300;
  text-wrap: balance;
}
/* The emphasised phrase sits on its own line, in Lumben blue. */
.pro-h1 em, .pro-h2 em { display: block; font-style: italic; color: var(--pro-blue); }
.pro-h2--light { color: #fff; }

.pro-section { padding: 72px 0; background: var(--pro-bg); }
.pro-section--white { background: #fff; }
.pro-section-head { max-width: 760px; margin-bottom: 36px; }
.pro-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.pro-section-lead { margin: 16px 0 0; font-size: 16px; line-height: 1.7; color: var(--pro-ink-2); max-width: 620px; }

/* ── Buttons & links ─────────────────────────────────────────────────────── */
.pro-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 28px;
  border-radius: 30px; border: 1.5px solid transparent;
  font-size: 14px; font-weight: 500; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: background-color .22s var(--pro-ease), color .22s var(--pro-ease), border-color .22s var(--pro-ease);
}
.pro-btn:hover { text-decoration: none; }
.pro-btn--primary { background: var(--pro-navy); color: #fff; }
.pro-btn--primary:hover { background: var(--pro-navy-hover); color: #fff; }
.pro-btn--baby-blue { background: var(--pro-cyan); color: var(--pro-deep); }
.pro-btn--baby-blue:hover { background: #8bd4f4; color: var(--pro-deep); }
.pro-demo-cta { display: flex; justify-content: center; margin-top: 28px; }
.pro-btn--outline { background: transparent; color: var(--pro-navy); border-color: var(--pro-navy); }
.pro-btn--outline:hover { background: var(--pro-navy); color: #fff; }
.pro-btn--light { background: #fff; color: var(--pro-navy); }
.pro-btn--light:hover { background: var(--pro-ice); color: var(--pro-navy); }
.pro-btn--block { width: 100%; }

.pro-textlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--pro-accent-text);
  text-decoration: underline; text-underline-offset: 3px;
}
.pro-textlink:hover { color: var(--pro-navy); }

.pro-arrow { display: inline-block; transition: transform .22s var(--pro-ease); }
.pro-btn:hover .pro-arrow, .pro-textlink:hover .pro-arrow { transform: translateX(4px); }

.pro-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pro-checklist li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: var(--pro-ink-2); }
.pro-checklist li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pro-ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231B3A6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.pro-checklist--light li { color: #dbe7f5; }
.pro-checklist--light li::before { background-color: rgba(255, 255, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23B5D4F4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.pro-disclaimer { margin: 28px 0 0; font-size: 13px; line-height: 1.6; color: var(--pro-ink-2); }
.pro-disclaimer--center { text-align: center; }

.pro-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 30px;
  background: var(--pro-ice); border: 1px solid var(--pro-ice-line);
  font-size: 12.5px; font-weight: 500; color: var(--pro-navy);
}
.pro-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Hero (shared) ───────────────────────────────────────────────────────── */
/* The navbar is fixed and ~72px tall; the theme's 160px top padding left a
   gap that pushed the selector cards below the fold. */
.pro-hero { padding-top: 124px; padding-bottom: 48px; }
.pro-hero .bg-circle-dotted { pointer-events: none; }
.pro-hero > .container { position: relative; z-index: 1; }
.pro-hero-lead {
  max-width: 600px; margin: 0;
  font-size: 17px; line-height: 1.7; color: var(--pro-ink-2);
}

/* ── Selector ────────────────────────────────────────────────────────────── */
.pro-hero--selector { padding-bottom: 32px; }
.pro-h1--selector { max-width: 960px; margin-bottom: 16px; }
.pro-section--choices { padding: 8px 0 72px; }

.pro-choice-grid {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 20px;
}
.pro-choice {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
  padding: 32px 34px 32px;
  border-radius: var(--pro-radius);
  border: 1.5px solid var(--pro-ice-line);
  transition: flex-grow .38s var(--pro-ease-out), transform .3s var(--pro-ease-out), box-shadow .28s var(--pro-ease), border-color .28s var(--pro-ease);
}
.pro-choice--dentist { background: var(--pro-ice); }
.pro-choice--clinic { background: var(--pro-deep); border-color: var(--pro-deep); }
.pro-choice:hover, .pro-choice:focus-within { box-shadow: 0 18px 40px rgba(13, 34, 64, .12); transform: translateY(-4px); }
.pro-choice--dentist:hover, .pro-choice--dentist:focus-within { border-color: var(--pro-accent); }
.pro-choice--clinic:hover, .pro-choice--clinic:focus-within { border-color: var(--pro-accent); box-shadow: 0 18px 44px rgba(13, 34, 64, .3), 0 0 0 1px rgba(108, 198, 240, .25); }
.pro-choice:has(.pro-stretched:focus-visible) { outline: 3px solid #4bb0e8; outline-offset: 4px; }
.pro-choice:has(.pro-stretched:focus-visible) .pro-stretched:focus-visible { outline: none; }

.pro-choice__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pro-choice__icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pro-choice--dentist .pro-choice__icon { background: #fff; }
.pro-choice--clinic .pro-choice__icon { background: rgba(255, 255, 255, .1); }
.pro-choice__icon svg { width: 23px; height: 23px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pro-choice--dentist .pro-choice__icon svg { stroke: var(--pro-navy); }
.pro-choice--clinic .pro-choice__icon svg { stroke: #B5D4F4; }

.pro-choice__tag { margin: 0; padding: 6px 14px; border-radius: 30px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em; }
.pro-choice--dentist .pro-choice__tag { background: #fff; color: var(--pro-navy); }
.pro-choice--clinic .pro-choice__tag { background: rgba(255, 255, 255, .12); color: #fff; }

.pro-choice__title { margin: 4px 0 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; text-wrap: balance; }
.pro-choice--dentist .pro-choice__title { color: var(--pro-navy); }
.pro-choice--clinic .pro-choice__title { color: #fff; }
.pro-choice__text { margin: 0; font-size: 15.5px; line-height: 1.65; }
.pro-choice--dentist .pro-choice__text { color: var(--pro-ink-2); }
.pro-choice--clinic .pro-choice__text { color: var(--pro-on-navy); }

/* Card preview: Lupi on a soft stage beside the three steps. The preview is
   always visible; hover / focus only brings it forward. Layers, outermost
   first: glow · parallax (GSAP pointer follow) · float (CSS idle loop) ·
   image (GSAP hover beat). Each layer owns one transform, so none fight. */
.pro-preview {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 12px 18px 12px 12px; border-radius: 18px;
}
.pro-choice--dentist .pro-preview { background: #fff; border: 1px solid var(--pro-ice-line); }
.pro-choice--clinic .pro-preview { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }

.pro-mascot { position: relative; aspect-ratio: 1; border-radius: 14px; isolation: isolate; }
.pro-choice--dentist .pro-mascot { background: radial-gradient(circle at 50% 55%, #dcebff 0%, #f3f8ff 55%, #fff 75%); }
.pro-choice--clinic .pro-mascot { background: radial-gradient(circle at 50% 55%, rgba(108, 198, 240, .22) 0%, rgba(108, 198, 240, .06) 50%, transparent 72%); }
.pro-mascot__glow {
  position: absolute; inset: 14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 198, 240, .75) 0%, rgba(108, 198, 240, .18) 50%, transparent 72%);
  opacity: .3; transition: opacity .35s var(--pro-ease);
}
.pro-mascot__parallax { position: absolute; inset: 5%; }
.pro-mascot__float { position: relative; width: 100%; height: 100%; }
.pro-mascot picture { position: relative; z-index: 1; display: block; }
.pro-mascot img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 10px 12px rgba(13, 34, 64, .22));
  transition: transform .35s var(--pro-ease-out);
}
.pro-choice--clinic .pro-mascot img { filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .4)); }

/* Dentist Lupi: a scan ring pulses from the lens. */
.pro-mascot__scan {
  position: absolute; z-index: 2; left: 64%; top: 51%; width: 30%; aspect-ratio: 1;
  border-radius: 50%; border: 2px solid var(--pro-cyan);
  transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
}
/* Sparkles: a few data points around the lens, or around the greeting. */
.pro-mascot__spark {
  position: absolute; z-index: 2; width: 7px; height: 7px; border-radius: 50%;
  background: #bfe8ff; box-shadow: 0 0 10px 2px rgba(108, 198, 240, .8);
  opacity: 0; transform: scale(.3); pointer-events: none;
}
.pro-mascot--review .pro-mascot__spark--1 { left: 86%; top: 30%; }
.pro-mascot--review .pro-mascot__spark--2 { left: 94%; top: 50%; width: 5px; height: 5px; }
.pro-mascot--review .pro-mascot__spark--3 { left: 82%; top: 70%; }
.pro-mascot--welcome .pro-mascot__spark--1 { left: 2%; top: 26%; }
.pro-mascot--welcome .pro-mascot__spark--2 { left: 10%; top: 12%; width: 5px; height: 5px; }
.pro-mascot--welcome .pro-mascot__spark--3 { left: 86%; top: 10%; }

.pro-choice:is(:hover, :focus-within) .pro-mascot__glow { opacity: .6; }
/* Without GSAP the hover beat is a plain lift; with it, JS plays a richer one. */
html:not(.pro-gsap) .pro-choice:is(:hover, :focus-within) .pro-mascot img { transform: translateY(-4px) scale(1.05); }
/* GSAP drives these transforms frame by frame; a CSS transition on top would lag them. */
html.pro-gsap .pro-mascot img { transition: none; }
html.pro-intro [data-anim], html.pro-intro [data-anim] * { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .pro-mascot__float { animation: mascotFloat 5.5s ease-in-out infinite; }
  .pro-choice--clinic .pro-mascot__float { animation-delay: -2.4s; }
  .pro-mascot__glow { animation: mascotGlow 5.5s ease-in-out infinite; }
  .pro-choice:is(:hover, :focus-within) .pro-mascot__scan { animation: mascotScan 1.6s ease-out infinite; }
  .pro-choice:is(:hover, :focus-within) .pro-mascot__spark { animation: mascotSpark 1.8s ease-in-out infinite; }
  .pro-choice:is(:hover, :focus-within) .pro-mascot__spark--2 { animation-delay: .3s; }
  .pro-choice:is(:hover, :focus-within) .pro-mascot__spark--3 { animation-delay: .6s; }
  .pro-choice-grid.is-offscreen .pro-mascot__float,
  .pro-choice-grid.is-offscreen .pro-mascot__glow { animation-play-state: paused; }
}
@keyframes mascotFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.6deg); }
  50% { transform: translate3d(0, -6px, 0) rotate(.6deg); }
}
@keyframes mascotGlow {
  0%, 100% { transform: scale(.96); }
  50% { transform: scale(1.06); }
}
@keyframes mascotScan {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.55); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes mascotSpark {
  0%, 100% { opacity: 0; transform: scale(.3); }
  40% { opacity: 1; transform: scale(1); }
  70% { opacity: .6; transform: scale(.8); }
}

.pro-preview__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* A connector runs through the step dots and fills top-down on hover. */
.pro-preview__steps::before, .pro-preview__steps::after {
  content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1.5px; border-radius: 2px;
}
.pro-preview__steps::before { background: currentColor; opacity: .18; }
.pro-preview__steps::after {
  background: var(--pro-accent); transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--pro-ease-out);
}
.pro-choice--dentist .pro-preview__steps { color: var(--pro-navy); }
.pro-choice--clinic .pro-preview__steps { color: #dbe7f5; }
.pro-choice--clinic .pro-preview__steps::after { background: var(--pro-cyan); }
.pro-choice:is(:hover, :focus-within) .pro-preview__steps::after { transform: scaleY(1); }
.pro-preview__steps li {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; line-height: 1.3; font-weight: 500;
  opacity: .8; transition: opacity .25s var(--pro-ease), transform .25s var(--pro-ease);
}
.pro-preview__dot {
  flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor;
  transition: background-color .25s var(--pro-ease), box-shadow .25s var(--pro-ease);
}
.pro-choice--dentist .pro-preview__dot { background: #fff; }
.pro-choice--clinic .pro-preview__dot { background: #172c4d; }
.pro-choice:is(:hover, :focus-within) .pro-preview__steps li { opacity: 1; transform: translateX(3px); }
.pro-choice:is(:hover, :focus-within) .pro-preview__dot { background: currentColor; box-shadow: 0 0 0 3px rgba(91, 143, 212, .2); }
.pro-choice:is(:hover, :focus-within) .pro-preview__steps li:nth-child(2),
.pro-choice:is(:hover, :focus-within) .pro-preview__steps li:nth-child(2) .pro-preview__dot { transition-delay: .12s; }
.pro-choice:is(:hover, :focus-within) .pro-preview__steps li:nth-child(3),
.pro-choice:is(:hover, :focus-within) .pro-preview__steps li:nth-child(3) .pro-preview__dot { transition-delay: .24s; }

/* Entrance: hidden only while JS is about to animate. If the script never
   runs, the fallback reveals everything after 2.5s; reduced motion never hides. */
.pro-h1__line { display: inline-block; }
.pro-anim [data-anim] { opacity: 0; animation: proAnimFailsafe .01s 2.5s forwards; }
@keyframes proAnimFailsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pro-anim [data-anim] { opacity: 1 !important; }
}

.pro-choice__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  min-height: 48px; padding: 12px 26px; border-radius: 30px;
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.pro-choice--dentist .pro-choice__cta { background: var(--pro-navy); color: #fff; }
.pro-choice--clinic .pro-choice__cta { background: #fff; color: var(--pro-deep); }
.pro-page .pro-choice__cta:hover, .pro-page .pro-choice__cta:focus { text-decoration: none; }
.pro-choice:is(:hover, :focus-within) .pro-arrow { transform: translateX(5px); }
/* The CTA's hit area covers the whole card; the link stays one real <a>. */
.pro-stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.pro-choice .pro-stretched::after { border-radius: var(--pro-radius); }

/* Wide screens: the active card takes ~55% of the row. Text keeps a fixed
   measure so it never re-wraps while the width changes. */
@media (min-width: 1200px) and (hover: hover) {
  .pro-choice > .pro-choice__title, .pro-choice > .pro-choice__text { max-width: 430px; }
  .pro-choice-grid:has(.pro-choice:is(:hover, :focus-within)) .pro-choice { flex-grow: .9; }
  .pro-choice-grid:has(.pro-choice:is(:hover, :focus-within)) .pro-choice:is(:hover, :focus-within) { flex-grow: 1.1; }
}

/* ── Clinic hero ─────────────────────────────────────────────────────────── */
.pro-hero--clinic { padding-bottom: 40px; }
.pro-hero--clinic .pro-h1 { font-size: clamp(30px, 3.2vw, 46px); }
.pro-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 48px; align-items: center;
}
.pro-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 20px; }
.pro-visual-caption { margin: 12px 0 0; text-align: right; font-size: 12px; color: #6b7480; }

.pro-visual { position: relative; margin: 0; aspect-ratio: 1.22 / 1; }
.pro-visual__desk {
  position: absolute; left: 0; top: 0; width: 100%;
  background: #fff; border: 1px solid var(--pro-line); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(13, 34, 64, .14);
  overflow: hidden;
}
.pv-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid #eef1f6; }
.pv-bar > span { width: 8px; height: 8px; border-radius: 50%; background: #dfe5ee; }
.pv-bar b { margin-left: 8px; font-size: 11.5px; font-weight: 500; color: var(--pro-navy); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-status { margin-left: auto; padding: 4px 10px; border-radius: 20px; font-size: 10.5px; font-style: normal; font-weight: 500; white-space: nowrap; }
.pv-status--review { background: #fff4e0; color: #8a5300; }
.pv-body { display: grid; grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); gap: 12px; padding: 12px; }
.pv-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; align-content: start; }
.pv-cases li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 8px; align-items: center;
  padding: 8px; border-radius: 11px; border: 1px solid #eef1f6; font-size: 10.5px; color: var(--pro-ink-2);
}
.pv-cases li.is-active { background: var(--pro-ice); border-color: var(--pro-ice-line); }
.pv-cases i {
  grid-row: span 2; width: 24px; height: 24px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pro-navy); color: #fff; font-style: normal; font-size: 9.5px;
}
.pv-cases span { color: var(--pro-ink); font-weight: 500; line-height: 1.25; }
.pv-cases em { font-style: normal; color: var(--pro-accent-text); }
.pv-cases em.is-ready { color: #146c43; }
.pv-cases li.pv-trace { grid-template-columns: auto minmax(0, 1fr); border-style: dashed; color: var(--pro-navy); }
.pv-trace svg { width: 16px; height: 16px; fill: none; stroke: var(--pro-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-trace span { font-weight: 400; color: var(--pro-navy); }
.pv-review { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-width: 0; }
.pv-xray { width: 100%; height: 100%; min-height: 140px; object-fit: cover; display: block; border-radius: 10px; background: #000; }
.pv-review__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pv-label { margin: 0; font-size: 10.5px; color: var(--pro-ink-2); }
.pv-actions { display: flex; gap: 6px; }
.pv-actions span { padding: 4px 10px; border-radius: 20px; font-size: 10px; border: 1px solid var(--pro-ice-line); color: var(--pro-navy); }
.pv-actions span:first-child { background: var(--pro-navy); border-color: var(--pro-navy); color: #fff; }

.pro-visual__intake, .pro-visual__report {
  position: absolute; margin: 0;
  background: #fff; border: 1px solid var(--pro-line); border-radius: 16px;
  box-shadow: 0 22px 48px rgba(13, 34, 64, .2);
  overflow: hidden;
}
.pro-visual__intake { left: -3%; top: 60%; width: 42%; }
.pro-visual__report { right: -2%; top: 61%; width: 52%; }
.pro-visual__intake img, .pro-visual__report img { display: block; width: 100%; height: auto; }
.pv-layer-head {
  display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--pro-navy);
  border-bottom: 1px solid #eef1f6;
}
.pv-layer-head svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-layer-head--ready { color: #146c43; }

.pro-visual__chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 14px;
  font-size: 12px; font-weight: 500;
  box-shadow: 0 12px 30px rgba(13, 34, 64, .18);
}
.pro-visual__chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pro-visual__chip--video { right: 6%; bottom: 0; background: var(--pro-navy); color: #fff; }

/* One entrance per layer, then a slow drift on the floating patient layer. */
@media (prefers-reduced-motion: no-preference) {
  .pro-js .pro-visual > * { animation: pvIn .7s var(--pro-ease-out) both; }
  .pro-js .pro-visual > .pro-visual__intake { animation: pvIn .7s .15s var(--pro-ease-out) both, pvDrift 7s 1s ease-in-out infinite alternate; }
  .pro-js .pro-visual > .pro-visual__report { animation-delay: .3s; }
  .pro-js .pro-visual > .pro-visual__chip { animation-delay: .45s; }
  .pro-js .pro-visual.is-offscreen > * { animation-play-state: paused; }
}
@keyframes pvIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes pvDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -6px, 0); } }

/* ── Clinic hub ──────────────────────────────────────────────────────────── */
.pro-hub {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px; align-items: center;
}
.pro-hub__stage {
  position: relative; aspect-ratio: 1 / .9; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 50%, #1a4277 0%, var(--pro-deep) 58%, var(--pro-deeper) 100%);
}
/* The real dentist workspace, barely visible, is the backdrop. */
.pro-hub__backdrop {
  position: absolute; left: 50%; top: 50%; width: 150%; max-width: none; height: auto; z-index: -1;
  transform: translate(-50%, -50%); opacity: .13; filter: grayscale(1);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.pro-hub__stage::before, .pro-hub__stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%);
}
.pro-hub__stage::before { width: 52%; aspect-ratio: 1; border: 1px solid rgba(181, 212, 244, .14); }
.pro-hub__stage::after { width: 82%; aspect-ratio: 1; border: 1px dashed rgba(181, 212, 244, .12); }
.pro-hub__lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* Lines stop at Lupi instead of running through the artwork. */
  -webkit-mask-image: radial-gradient(circle at 50% 49%, transparent 0 19%, #000 24%);
  mask-image: radial-gradient(circle at 50% 49%, transparent 0 19%, #000 24%);
}
.pro-hub__lines line {
  stroke: rgba(181, 212, 244, .24); stroke-width: 1.2; stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
  transition: stroke .3s var(--pro-ease), opacity .3s var(--pro-ease);
}
.pro-hub__lines line.is-active { stroke: var(--pro-cyan); stroke-dasharray: none; stroke-width: 1.6; }

.pro-hub__core {
  position: absolute; left: 50%; top: 49%; width: 36%;
  transform: translate(-50%, -50%); text-align: center; z-index: 1;
}
.pro-hub__core-label {
  display: inline-block; margin: 2px 0 0; padding: 5px 12px; border-radius: 20px;
  background: rgba(13, 34, 64, .72); border: 1px solid rgba(181, 212, 244, .18);
  font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: #dbe7f5; white-space: nowrap;
}

/* Lupi: the supplied transparent artwork, with CSS-only idle motion. The float
   lives on the image and the acknowledgement on the wrapper, so changing node
   never restarts the loop. */
.pro-lupi { position: relative; width: 100%; aspect-ratio: 1; transition: transform .22s var(--pro-ease); }
.pro-lupi.is-ack { transform: scale(1.018) rotate(-.6deg); }
.pro-lupi picture { display: block; position: relative; z-index: 1; }
.pro-lupi__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(3, 12, 26, .45)); }
.pro-lupi__glow {
  position: absolute; inset: 8%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(108, 198, 240, .9) 0%, rgba(108, 198, 240, .25) 45%, transparent 70%);
  opacity: .28;
}
.pro-lupi::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 6%; z-index: 0;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent);
}
.pro-lupi__sweep {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
  -webkit-mask: url("../img/professionals/lupi-clinic-hub-560.webp") center / contain no-repeat;
  mask: url("../img/professionals/lupi-clinic-hub-560.webp") center / contain no-repeat;
  opacity: 0;
}
.pro-lupi__sweep::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translate3d(-120%, 0, 0);
}
@media (prefers-reduced-motion: no-preference) {
  .pro-js .pro-lupi__img { animation: lupiClinicFloat 6s ease-in-out infinite; }
  .pro-js .pro-lupi__glow { animation: lupiClinicGlow 6s ease-in-out infinite; }
  .pro-js .pro-lupi::after { animation: lupiClinicShadow 6s ease-in-out infinite; }
  .pro-js .pro-lupi__sweep { opacity: 1; }
  .pro-js .pro-lupi__sweep::before { animation: lupiClinicSweep 14s 2s ease-in-out infinite; }
  .pro-js .pro-hub.is-offscreen .pro-lupi__img,
  .pro-js .pro-hub.is-offscreen .pro-lupi__glow,
  .pro-js .pro-hub.is-offscreen .pro-lupi::after,
  .pro-js .pro-hub.is-offscreen .pro-lupi__sweep::before { animation-play-state: paused; }
}
@keyframes lupiClinicFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.35deg); }
  50% { transform: translate3d(0, -7px, 0) rotate(.35deg); }
}
@keyframes lupiClinicGlow {
  0%, 100% { opacity: .22; transform: scale(.98); }
  50% { opacity: .35; transform: scale(1.035); }
}
@keyframes lupiClinicShadow {
  0%, 100% { opacity: 1; transform: scaleX(1); }
  50% { opacity: .7; transform: scaleX(.88); }
}
@keyframes lupiClinicSweep {
  0%, 12% { transform: translate3d(-120%, 0, 0); }
  30%, 100% { transform: translate3d(320%, 0, 0); }
}

.pro-hub__nodes { position: absolute; inset: 0; z-index: 2; }
.pro-hub__node {
  position: absolute; left: var(--x); top: var(--y); width: 148px;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 4px; border: 0; background: none; cursor: pointer;
  color: #dbe7f5; text-align: center;
}
.pro-hub__node-icon {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 34, 64, .85); border: 1px solid rgba(181, 212, 244, .32);
  transition: background-color .22s var(--pro-ease), border-color .22s var(--pro-ease), box-shadow .22s var(--pro-ease), transform .22s var(--pro-ease);
}
.pro-hub__node-icon svg { width: 21px; height: 21px; fill: none; stroke: #B5D4F4; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pro-hub__node-label {
  padding: 3px 8px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.3; font-weight: 500;
  background: rgba(13, 34, 64, .6);
}
.pro-hub__node:hover .pro-hub__node-icon { border-color: var(--pro-cyan); transform: translateY(-2px); }
.pro-hub__node[aria-selected="true"] { color: #fff; }
.pro-hub__node[aria-selected="true"] .pro-hub__node-icon {
  background: #fff; border-color: #fff;
  box-shadow: 0 0 0 5px rgba(108, 198, 240, .3), 0 10px 24px rgba(0, 0, 0, .3);
}
.pro-hub__node[aria-selected="true"] .pro-hub__node-icon svg { stroke: var(--pro-navy); }
.pro-hub__node[aria-selected="true"] .pro-hub__node-label { font-weight: 600; background: rgba(255, 255, 255, .14); box-shadow: inset 0 -2px 0 var(--pro-cyan); }
.pro-hub__node:focus-visible { outline: 3px solid #4bb0e8; outline-offset: 2px; border-radius: 14px; }

/* Nodes appear once, in order, when the hub scrolls into view. */
@media (prefers-reduced-motion: no-preference) {
  .pro-js .pro-hub[data-reveal="pending"] .pro-hub__node { opacity: 0; }
  .pro-js .pro-hub[data-reveal="done"] .pro-hub__node { animation: hubNodeIn .5s var(--pro-ease-out) both; }
  .pro-js .pro-hub[data-reveal="done"] .pro-hub__node:nth-child(2) { animation-delay: .07s; }
  .pro-js .pro-hub[data-reveal="done"] .pro-hub__node:nth-child(3) { animation-delay: .14s; }
  .pro-js .pro-hub[data-reveal="done"] .pro-hub__node:nth-child(4) { animation-delay: .21s; }
  .pro-js .pro-hub[data-reveal="done"] .pro-hub__node:nth-child(5) { animation-delay: .28s; }
}
@keyframes hubNodeIn { from { opacity: 0; } to { opacity: 1; } }

/* One shared panel: every node's content sits in the same cell, so the panel
   keeps the height of the tallest one and never jumps. */
.pro-js .pro-hub__panels { display: grid; }
.pro-js .pro-hub__panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .24s var(--pro-ease), transform .24s var(--pro-ease), visibility 0s .24s; }
.pro-js .pro-hub__panel.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity .24s var(--pro-ease), transform .24s var(--pro-ease), visibility 0s; }
.pro-hub__panel { align-self: center; }
.pro-hub__panel:not(.is-active) { margin-bottom: 32px; }
.pro-js .pro-hub__panel:not(.is-active) { margin-bottom: 0; }
.pro-hub__panel:focus-visible { outline: 3px solid #4bb0e8; outline-offset: 6px; border-radius: 12px; }
.pro-hub__count { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--pro-accent-text); }
.pro-hub__title { margin: 0 0 12px; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; color: var(--pro-navy); }
.pro-hub__text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--pro-ink-2); max-width: 540px; }
.pro-hub__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

.pro-shot { margin: 22px 0 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--pro-line); background: #fff; box-shadow: 0 16px 40px rgba(13, 34, 64, .1); }
.pro-shot img { display: block; width: 100%; height: auto; }
.pro-shot figcaption { padding: 9px 14px; font-size: 12px; color: #6b7480; border-top: 1px solid #eef1f6; }

.pro-chipflow { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; max-width: 460px; }
.pro-chipflow li {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--pro-ice); border: 1px solid var(--pro-ice-line);
  font-size: 14.5px; font-weight: 500; color: var(--pro-navy);
}
.pro-chipflow li + li::before {
  content: ""; position: absolute; left: 33px; top: -11px; width: 1.5px; height: 10px; background: var(--pro-accent);
}
.pro-chipflow li:last-child { background: var(--pro-navy); border-color: var(--pro-navy); color: #fff; }
.pro-chipflow__icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: #fff;
}
.pro-chipflow__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--pro-navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Roles: one compact switcher under the hub. */
.pro-roles {
  margin-top: 40px; padding: 20px 24px; border-radius: 20px;
  background: var(--pro-bg);
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 14px 24px; align-items: center;
}
.pro-roles__title { margin: 0; font-size: 17px; line-height: 1.25; color: var(--pro-navy); }
.pro-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 30px; background: #fff; border: 1.5px solid var(--pro-line); }
.pro-seg__btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 16px; border: 0; border-radius: 30px;
  background: transparent; color: var(--pro-ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background-color .2s var(--pro-ease), color .2s var(--pro-ease);
}
.pro-seg__btn:hover { color: var(--pro-navy); }
.pro-seg__btn[aria-selected="true"] { background: var(--pro-navy); color: #fff; }
.pro-seg__btn[aria-selected="true"]::before { content: "✓"; font-size: 12px; }
.pro-roles__panels { display: grid; gap: 10px; }
.pro-roles__panel { margin: 0; font-size: 15px; line-height: 1.6; color: var(--pro-ink); }
.pro-js .pro-roles__panels { gap: 0; }
.pro-js .pro-roles__panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .2s var(--pro-ease), visibility 0s .2s; }
.pro-js .pro-roles__panel.is-active { visibility: visible; opacity: 1; transition: opacity .2s var(--pro-ease), visibility 0s; }

/* ── Dark bands (ÜTS, trust) ─────────────────────────────────────────────── */
.pro-band { padding: 52px 0; background: var(--pro-deep); }
.pro-band--trust { background: var(--pro-deeper); }
.pro-band__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pro-band__title { margin: 0 0 14px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; color: #fff; text-wrap: balance; }
.pro-band__title em { display: block; font-style: italic; color: var(--pro-on-navy-em); }
.pro-band__text { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--pro-on-navy); max-width: 520px; }
.pro-band__text--small { font-size: 14px; }
.pro-band__note {
  display: inline-block; margin: 16px 0 0; padding: 6px 14px; border-radius: 30px;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px;
}
.pro-band__list { grid-template-columns: 1fr 1fr; gap: 14px 24px; }

.pro-trust__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.pro-trust__grid li {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 14.5px; line-height: 1.4; color: #fff;
}
.pro-trust__grid li::before {
  content: ""; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255, 255, 255, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v6c0 4.2-2.9 7.6-7 9-4.1-1.4-7-4.8-7-9V6l7-3z' fill='none' stroke='%23B5D4F4' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 12l2 2 4-4' fill='none' stroke='%23B5D4F4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat;
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.pro-pricing { background: var(--pro-bg); }
.pro-billing {
  display: none; /* shown once JS can switch prices (.pro-js) */
  margin-top: 26px; padding: 5px; gap: 4px;
  border-radius: 40px; background: #fff; border: 1.5px solid var(--pro-line);
}
.pro-js .pro-billing { display: inline-flex; }
.pro-billing__btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border-radius: 30px; border: 0;
  background: transparent; color: var(--pro-ink-2);
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.pro-billing__btn[aria-pressed="true"] { background: var(--pro-navy); color: #fff; }
/* Not colour alone: the selected option also gets a check mark. */
.pro-billing__btn[aria-pressed="true"]::before { content: "✓"; font-size: 13px; }
.pro-billing__save { padding: 3px 9px; border-radius: 20px; background: var(--pro-ice); color: var(--pro-navy); font-size: 11.5px; }

.pro-plans { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pro-plan {
  position: relative; display: flex; flex-direction: column; gap: 20px;
  padding: 34px 28px 26px; border-radius: var(--pro-radius);
  background: #fff; border: 1.5px solid var(--pro-line);
}
/* Featured plan stands out by colour and shadow, not offset, so every CTA lines up. */
.pro-plan--featured {
  background: var(--pro-navy); border-color: var(--pro-navy);
  box-shadow: 0 24px 56px rgba(13, 34, 64, .22);
}
.pro-plan__badge {
  position: absolute; top: -14px; left: 28px; margin: 0;
  padding: 6px 14px; border-radius: 20px;
  background: #fff; color: var(--pro-navy); border: 1.5px solid var(--pro-navy);
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.pro-plan__name { margin: 0; font-size: 20px; color: var(--pro-navy); }
.pro-plan--featured .pro-plan__name { color: #fff; }
.pro-price { margin: 0; display: flex; align-items: baseline; gap: 4px; color: var(--pro-ink); }
.pro-price__amount { font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.pro-price__period { font-size: 15px; color: var(--pro-ink-2); }
.pro-price__sub { margin: 8px 0 0; font-size: 13.5px; color: var(--pro-ink-2); }
.pro-plan--featured .pro-price { color: #fff; }
.pro-plan--featured .pro-price__period,
.pro-plan--featured .pro-price__sub { color: var(--pro-on-navy); }

.pro-pricing .pro-only-annual { display: none; }
.pro-pricing[data-billing="annual"] .pro-only-annual { display: revert; }
.pro-pricing[data-billing="annual"] p.pro-only-annual.pro-price { display: flex; }
.pro-pricing[data-billing="annual"] .pro-only-monthly { display: none; }
.pro-js .pro-nojs-only { display: none; }

.pro-plan__capacity {
  list-style: none; margin: 0; padding: 14px 0; display: grid; gap: 5px;
  border-top: 1px solid #eef1f6; border-bottom: 1px solid #eef1f6;
  font-size: 15px; font-weight: 500; color: var(--pro-navy);
}
.pro-plan--featured .pro-plan__capacity { color: #fff; border-color: rgba(255, 255, 255, .14); }
.pro-plan .pro-checklist { flex: 1; align-content: start; gap: 9px; }
.pro-plan .pro-checklist li { font-size: 14px; }
.pro-plan--featured .pro-checklist li { color: #dbe7f5; }
.pro-plan--featured .pro-checklist li::before { background-color: rgba(255, 255, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23B5D4F4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pro-plan__foot { display: grid; gap: 10px; margin-top: auto; }
.pro-plan__setup { margin: 0; min-height: 2.6em; font-size: 12px; line-height: 1.3; text-align: center; color: #6b7480; }
.pro-plan--featured .pro-plan__setup { color: var(--pro-on-navy); }

.pro-founding { margin-top: 22px; border-radius: 18px; background: var(--pro-ice); border: 1.5px dashed var(--pro-accent); }
.pro-founding > summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
  min-height: 56px; padding: 14px 24px; cursor: pointer; list-style: none;
}
.pro-founding > summary::-webkit-details-marker { display: none; }
.pro-founding__tag { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pro-accent-text); }
.pro-founding__lead { font-size: 14px; color: var(--pro-ink-2); }
.pro-founding__toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--pro-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.pro-founding__toggle .pro-arrow { transition: transform .22s var(--pro-ease); }
.pro-founding[open] .pro-founding__toggle .pro-arrow { transform: rotate(90deg); }
.pro-founding__body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px 28px; align-items: start; padding: 0 24px 20px; }
.pro-founding__body .pro-checklist li::before { background-color: #fff; }
.pro-founding__body p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--pro-ink-2); }
.pro-founding__body .pro-textlink { grid-column: 2; }

.pro-enterprise {
  margin-top: 16px; padding: 22px 28px; border-radius: 20px;
  background: var(--pro-deep); color: var(--pro-on-navy);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.pro-enterprise__title { margin: 0 0 6px; font-size: 18px; color: #fff; }
.pro-enterprise p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 640px; }
.pro-enterprise .pro-btn { flex-shrink: 0; }

.pro-pricing-note { margin: 16px 0 0; text-align: center; font-size: 13px; line-height: 1.6; color: var(--pro-ink-2); }

.pro-compare { margin-top: 24px; border-radius: var(--pro-radius); background: #fff; border: 1.5px solid var(--pro-line); }
.pro-compare > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 16px 28px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 500; color: var(--pro-navy);
}
.pro-compare > summary::-webkit-details-marker { display: none; }
.pro-compare > summary::after { content: "+"; font-size: 22px; line-height: 1; }
.pro-compare[open] > summary::after { content: "−"; }
.pro-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid #eef1f6; }
.pro-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.pro-table th, .pro-table td { padding: 13px 16px; text-align: center; border-bottom: 1px solid #eef1f6; color: var(--pro-ink-2); vertical-align: middle; }
.pro-table thead th { font-size: 13px; font-weight: 600; color: var(--pro-navy); background: #fff; position: sticky; top: 0; }
.pro-table th[scope="row"], .pro-table thead th:first-child { text-align: left; font-weight: 400; color: var(--pro-ink); position: sticky; left: 0; background: #fff; min-width: 220px; z-index: 1; }
.pro-table thead th:first-child { z-index: 2; font-weight: 600; color: var(--pro-navy); }
.pro-table thead th:nth-child(3), .pro-table td:nth-child(3) { background: #f5f9ff; }
.pro-table__group th { text-align: left !important; padding-top: 22px; font-size: 12px; font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--pro-accent-text) !important; background: #fff; }
.pro-yes { color: #146c43; font-weight: 700; font-size: 16px; }
.pro-no { color: #9aa3ad; }
.pro-addons { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; padding: 28px; border-top: 1px solid #eef1f6; }
.pro-addons__title { margin: 0 0 14px; font-size: 16px; color: var(--pro-navy); }
.pro-addons__list { margin: 0; display: grid; gap: 8px; }
.pro-addons__list div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px dashed #e4e9f0; font-size: 14px; }
.pro-addons__list dt { font-weight: 400; color: var(--pro-ink-2); }
.pro-addons__list dd { margin: 0; font-weight: 500; color: var(--pro-ink); white-space: nowrap; }
.pro-addons p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--pro-ink-2); }

/* ── Enquiry form (field styles mirror the dentist application form) ─────── */
.pro-enquiry { background: var(--pro-bg); }
.pro-steps-line {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--pro-accent-text);
}
.pro-steps-line li { display: inline-flex; align-items: center; gap: 10px; }
.pro-steps-line li + li::before { content: "→"; color: var(--pro-accent); letter-spacing: 0; }
.pro-form .form-group { margin-bottom: 22px; }
.pro-form .entry-box label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--pro-ink); }
.pro-page .pro-form .form-control {
  display: block; width: 100%; min-height: 50px; margin-top: 0 !important;
  padding: 12px 16px; border-radius: 14px !important;
  background-color: #fff; border: 1.5px solid var(--pro-line); color: var(--pro-ink); font-size: 15px;
}
.pro-page .pro-form textarea.form-control { min-height: 130px; resize: vertical; }
.pro-page .pro-form .form-control:focus { border-color: var(--pro-accent); outline: 3px solid rgba(75, 176, 232, .35); outline-offset: 1px; }
.pro-page .fd-req { color: #c53030; font-weight: 700; }
.pro-page .fd-optional { opacity: .65; font-weight: 400; }
.pro-page .fd-req-note { font-size: 12.5px; color: var(--pro-ink-2); margin: 0; }
.pro-page .fd-field-error { display: block; font-size: 13px; color: #c53030; margin-top: 6px; }
.pro-page .has-error .form-control { border-color: rgba(197, 48, 48, .6) !important; }
.pro-page .fd-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px !important; border-radius: 30px !important; padding-left: 18px !important;
}
.pro-page .fd-select option { color: #111; }
.pro-page .fd-alert { padding: 14px 18px; border-radius: 12px; font-size: 14px; }
.pro-page .fd-alert--error { background: rgba(197, 48, 48, .07); border: 1px solid rgba(197, 48, 48, .3); color: #a12828; }
.pro-page .fd-success { text-align: center; padding: 48px 24px; max-width: 520px; margin: 0 auto; background: #fff; border-radius: var(--pro-radius); border: 1.5px solid var(--pro-line); }
.pro-page .fd-success__icon { font-size: 44px; margin-bottom: 14px; }
.pro-page .fd-success__title { font-size: 22px; margin-bottom: 10px; color: var(--pro-navy); }
.pro-page .fd-success__text { font-size: 15px; line-height: 1.7; color: var(--pro-ink-2); margin: 0; }
.pro-form-privacy { margin: 8px 0 0; font-size: 13px; color: var(--pro-ink-2); }
.pro-form-privacy a { color: var(--pro-accent-text); text-decoration: underline; }
.pro-form .form-control::placeholder { color: #8a929c !important; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.pro-faq { max-width: 880px; border-top: 1px solid var(--pro-line); }
.pro-faq details { border-bottom: 1px solid var(--pro-line); }
.pro-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 60px; padding: 16px 4px; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 500; color: var(--pro-ink);
}
.pro-faq summary::-webkit-details-marker { display: none; }
.pro-faq summary::after {
  content: "+"; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pro-ice); color: var(--pro-navy); font-size: 18px; line-height: 1;
}
.pro-faq details[open] summary::after { content: "−"; background: var(--pro-navy); color: #fff; }
.pro-faq details p { margin: 0 0 22px; padding-right: 52px; font-size: 15px; line-height: 1.75; color: var(--pro-ink-2); }

/* Clear the Lupi button at the very bottom of the page. */
.pro-page .wrapper > .pro-section:last-child { padding-bottom: calc(72px + 40px); }

/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pro-page *, .pro-page *::before, .pro-page *::after { transition: none !important; animation: none !important; }
  .pro-btn:hover .pro-arrow, .pro-textlink:hover .pro-arrow, .pro-choice:is(:hover, :focus-within) .pro-arrow,
  .pro-choice:is(:hover, :focus-within) .pro-preview__steps li, .pro-choice:hover, .pro-choice:focus-within,
  html:not(.pro-gsap) .pro-choice:is(:hover, :focus-within) .pro-mascot img { transform: none; }
  .pro-lupi.is-ack { transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  /* Tablet hub: Lupi above a vertical node list, panel beside it. */
  .pro-hub { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .pro-hub__stage { aspect-ratio: auto; padding: 22px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .pro-hub__stage::before, .pro-hub__stage::after, .pro-hub__lines { display: none; }
  .pro-hub__core { position: static; transform: none; width: 150px; }
  .pro-hub__core-label { white-space: normal; }
  .pro-hub__nodes { position: static; width: 100%; display: grid; gap: 6px; }
  .pro-hub__node {
    position: static; transform: none; width: 100%;
    flex-direction: row; justify-content: flex-start; gap: 12px; padding: 6px 8px; border-radius: 14px; text-align: left;
  }
  .pro-hub__node-icon { width: 40px; height: 40px; flex-shrink: 0; }
  .pro-hub__node-label { background: none; padding: 0; font-size: 13.5px; }
  .pro-hub__node[aria-selected="true"] { background: rgba(255, 255, 255, .08); }
  .pro-hub__node[aria-selected="true"] .pro-hub__node-label { background: none; box-shadow: none; }
  .pro-hub__node[aria-selected="true"] .pro-hub__node-icon { box-shadow: 0 0 0 3px rgba(108, 198, 240, .3); }
  .pro-roles { grid-template-columns: 1fr; }
  .pro-founding__body { grid-template-columns: 1fr; }
  .pro-founding__body .pro-textlink { grid-column: auto; }
}

/* Two narrow cards side by side on tablets: Lupi above the steps. */
@media (min-width: 768px) and (max-width: 991px) {
  .pro-choice .pro-preview { grid-template-columns: 1fr; gap: 6px; padding: 12px 16px 16px; }
  .pro-choice .pro-mascot { width: 128px; }
}

/* Two-column hero on small laptops: a taller canvas so the floating layers
   sit below the review panel instead of on top of it. */
@media (min-width: 992px) and (max-width: 1199px) {
  .pro-visual { aspect-ratio: 1 / 1.1; }
  .pro-visual__intake { top: 65%; width: 44%; }
  .pro-visual__report { top: 67%; width: 54%; }
}

@media (max-width: 991px) {
  .pro-section { padding: 60px 0; }
  .pro-preview { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
  .pro-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .pro-visual { max-width: 640px; }
  .pro-visual-caption { text-align: left; }
  .pro-plans { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .pro-plan__setup { min-height: 0; }
  .pro-band__grid { grid-template-columns: 1fr; gap: 26px; }
  .pro-enterprise { flex-direction: column; align-items: flex-start; }
  .pro-addons { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .pro-hero { padding-top: 104px; padding-bottom: 36px; }
  .pro-hero-lead { font-size: 16px; }
  .pro-choice-grid { flex-direction: column; }
  .pro-choice { padding: 26px 22px 24px; }
  .pro-section--choices { padding-bottom: 56px; }

  /* Hero visual: stacked instead of overlapping. */
  .pro-visual {
    aspect-ratio: auto; height: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;
  }
  .pro-visual__desk, .pro-visual__intake, .pro-visual__report, .pro-visual__chip { position: static; width: auto; }
  .pro-visual__desk { grid-column: 1 / -1; }
  .pv-body { grid-template-columns: 1fr; }
  .pv-cases { grid-template-columns: 1fr 1fr; }
  .pv-cases li:not(.is-active):not(.pv-trace) { display: none; }
  .pro-visual__chip { grid-column: 1 / -1; justify-self: start; }

  /* Mobile hub: compact Lupi header, horizontal node list, one panel. */
  .pro-hub { grid-template-columns: 1fr; gap: 20px; }
  .pro-hub__stage { flex-direction: column; padding: 18px 0 14px; border-radius: 22px; }
  .pro-hub__core { width: 116px; }
  .pro-hub__core-label { font-size: 11px; }
  .pro-hub__nodes {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 14px 6px;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pro-hub__nodes::-webkit-scrollbar { display: none; }
  .pro-hub__node {
    flex: 0 0 auto; width: auto; max-width: 220px; scroll-snap-align: start;
    gap: 8px; padding: 6px 12px 6px 6px; border-radius: 30px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(181, 212, 244, .2);
  }
  .pro-hub__node-icon { width: 34px; height: 34px; }
  .pro-hub__node-icon svg { width: 17px; height: 17px; }
  .pro-hub__node-label { font-size: 13px; white-space: nowrap; }
  .pro-hub__node[aria-selected="true"] { background: #fff; border-color: #fff; }
  .pro-hub__node[aria-selected="true"] .pro-hub__node-label { color: var(--pro-navy); }
  .pro-hub__node[aria-selected="true"] .pro-hub__node-icon { background: var(--pro-ice); border-color: var(--pro-ice); box-shadow: none; }
  .pro-shot { margin-top: 18px; }

  .pro-band { padding: 44px 0; }
  .pro-band__list, .pro-trust__grid { grid-template-columns: 1fr; }
  .pro-roles { padding: 18px; }
  .pro-seg { display: flex; }
  .pro-seg__btn { flex: 1 1 auto; justify-content: center; padding: 8px 12px; }
  .pro-founding > summary { padding: 14px 18px; }
  .pro-founding__toggle { margin-left: 0; }
  .pro-founding__body { padding: 0 18px 18px; }
  .pro-enterprise { padding: 22px 20px; }
  .pro-compare > summary { padding: 16px 20px; }
  .pro-addons { padding: 22px 20px; }
  .pro-billing { display: none; }
  .pro-js .pro-billing { display: flex; width: 100%; max-width: 380px; margin-left: auto; margin-right: auto; }
  .pro-billing__btn { flex: 1; justify-content: center; padding: 10px 12px; }
  .pro-faq details p { padding-right: 0; }
}

@media (max-width: 420px) {
  .pro-preview { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding-right: 14px; }
  .pro-price__amount { font-size: 40px; }
  .pro-cta-row .pro-btn { width: 100%; }
  .pro-visual { grid-template-columns: 1fr; }
}