/* SmileReply marketing site — hero (desktop).
   Built to the 1536 x 1024 hero mockup: positions, sizes and colours are measured from it, so the
   desktop layout uses fixed pixel values on purpose. Responsive breakpoints come later. */

:root {
  --ink: #0d1b3e;
  --ink-2: #1c2a45;
  --body: #66758d;
  --muted: #8491a6;
  --blue: #1f7cf2;
  --blue-soft: #eaf2fd;
  --line: #e7edf6;
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 1280px;
  background: #f8fbfd;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-family: inherit; cursor: pointer;
  /* Plus Jakarta Sans draws its letters a little low in the line box, so labels that are mostly
     lowercase read as sitting low. 2px of bottom padding lifts the centred label 1px, which
     evens the space above and below the letters (measured on all four buttons). */
  padding-bottom: 2px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.btn--primary {
  color: #fff;
  background: linear-gradient(90deg, #289dfc 0%, #1c7af3 100%);
  box-shadow: 0 10px 26px rgba(29, 125, 245, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(29, 125, 245, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn--ghost {
  color: #1f73e8;
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid #a9c8f3;
}
.btn--ghost:hover { border-color: #6aa6f2; background: #fff; }
.btn:focus-visible { outline: 3px solid rgba(31, 124, 242, 0.35); outline-offset: 3px; }

.btn--nav { height: 53px; font-size: 16px; font-weight: 500; letter-spacing: -0.005em; }
.btn--nav-demo { width: 167px; }
.btn--nav-trial { width: 175px; box-shadow: 0 8px 20px rgba(29, 125, 245, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); }

.btn--hero { height: 56px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.btn--hero-trial { width: 235px; }
.btn--hero-demo { width: 220px; }

/* ---------- navigation ---------- */
.nav {
  position: relative; z-index: 5;
  height: 96px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(15, 35, 80, 0.075);
}
.nav__inner {
  max-width: 1536px; height: 100%; margin: 0 auto;
  padding: 4px 64px 0 76px;
  display: grid; grid-template-columns: 508px auto 1fr; align-items: center;
}
.nav__logo img { width: 211px; height: auto; }
.nav__links { display: flex; align-items: center; gap: 42px; }
.nav__links a {
  font-size: 17px; font-weight: 500; letter-spacing: -0.005em;
  color: #1a2744; text-decoration: none;
}
.nav__links a:hover { color: var(--blue); }
.nav__actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
/* For practices already on SmileReply: a quiet text link, so it never competes with the two asks. */
.nav__signin {
  margin-right: 10px; font-size: 17px; font-weight: 500; letter-spacing: -0.005em;
  color: #1a2744; text-decoration: none; white-space: nowrap;
}
.nav__signin:hover { color: var(--blue); }
.nav__links a { white-space: nowrap; }
/* A small laptop: the logo's 508px column (lined up with the hero below) leaves no room for the
   links, Sign in and both buttons, so it narrows here and the links close up a little. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .nav__inner { grid-template-columns: 340px auto 1fr; }
  .nav__links { gap: 32px; }
}

/* ---------- ?nav=navy: the top bar in the dashboard sidebar's own #06183e ----------
   A variant to look at side by side, not a second stylesheet: everything the dark ground
   breaks is restated here and nothing else moves. The wordmark swaps to the light cut the
   dashboard already uses on that same navy, rather than a filtered version of the dark one,
   which would take the tooth mark's blues with it. */
:root[data-nav="navy"] .nav {
  background: #06183e;
  border-bottom-color: rgba(255, 255, 255, 0.09);
}
/* The light wordmark is swapped in by CSS rather than shipped as a second <img> that the
   default page hides: a hidden <img> is still fetched, and this one is its own 25KB copy --
   the hero's dashboard mock uses the same picture at a different path, so it does not even
   share a cache entry with it. Declared this way, the file is only ever requested when the
   navy bar is actually asked for. */
:root[data-nav="navy"] .nav__logo img { content: url("assets/review/smilereply-logo-light.png?v=f56416efe9"); }
:root[data-nav="navy"] .nav__links a { color: rgba(255, 255, 255, 0.84); }
:root[data-nav="navy"] .nav__links a:hover { color: #fff; }
:root[data-nav="navy"] .nav__signin { color: rgba(255, 255, 255, 0.84); }
:root[data-nav="navy"] .nav__signin:hover { color: #fff; }
:root[data-nav="navy"] .btn--nav-demo {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.34);
}
:root[data-nav="navy"] .btn--nav-demo:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ---------- ?nav=float: the bar as a card resting on the page ----------
   The bar keeps its 96px of height so nothing below it moves; the height simply becomes 14px
   of air and an 82px card, inset 32px from the page edges and carrying its own shadow.

   The artwork has to move for it. Everything above 904 is drawn by <main>, which starts
   BELOW the bar, so the page behind a floating bar is flat #f8fbfd while the hero right
   under it is already tinted -- a step of 33 at the right hand side, on both sides of the
   card. So in this variant the same single image is hung off <body> from the page's very
   top instead, and it runs unbroken behind the bar, the hero and the band. <html> is given a
   background of its own or the browser would propagate body's to the canvas and resolve its
   position against that rather than against body's box. */
:root[data-nav="float"] { background: #f8fbfd; }
:root[data-nav="float"] body {
  background: #f8fbfd url("assets/hero-gradient.webp?v=515dc628b3") 100% 0 / max(100%, 1536px) auto no-repeat;
}
:root[data-nav="float"] main { background: none; }
:root[data-nav="float"] .nav {
  height: 96px; padding: 14px 32px 0;
  background: none; border-bottom: 0;
}
:root[data-nav="float"] .nav__inner {
  height: 82px; max-width: 1536px; padding: 0 28px 0 36px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 8px 26px rgba(18, 46, 102, 0.075), 0 1px 3px rgba(18, 46, 102, 0.05);
}

/* ---------- hero ---------- */
/* The hero gradient artwork (assets/hero-gradient.webp, 1536x1024). Its left side is near-white
   and its colour begins just right of the headline, so laid across the whole hero, anchored top
   right, it runs out past the panel's left edge and stops short of the text. The base colour is
   the artwork's own left-side white, so there is no seam where it ends.

   It lives on <main>, not on .hero, so that it is ONE painted image spanning the hero and the
   band beneath it. Painted twice -- once in the hero, once again in a pseudo-element under it --
   the two rasterisations of the same scaled picture do not land identically, and the join showed
   as a faint rule: measured, a constant +3 lightening at the hero's last row, immune to changing
   the mask, the base colour or the offset by a pixel either way, because it is a resampling
   phase difference rather than a misalignment. One image cannot disagree with itself. */
main {
  position: relative;
  /* Two layers over the base colour: the artwork, and a wash of the base colour that fades IN
     across the artwork's last fifth.

     The painting is 1536x1024 and simply ends. Wherever its foot lands -- just under the stage
     on a tablet, lower down on a desktop -- its bottom row of pixels meets #f8fbfd edge to edge,
     and a pale lavender meeting a pale blue in one step reads as a ruled line across the page.
     The second layer cannot be sized "auto": a gradient has no intrinsic size, so auto would
     stretch it over the whole of main. It is given the artwork's own box instead -- the same
     width, and that width over the image's 1536/1024 = 1.5 aspect -- so the fade finishes
     exactly where the picture does, at every width.

     vw and not %, and this is the whole trick: in background-size a percentage resolves against
     the matching dimension, so the 100% in the HEIGHT slot was a percentage of main's height --
     six thousand pixels of page -- and the fade box came out four times too tall. It was there,
     it was just still fully transparent at the only place it had to be doing something. Below
     1536px both forms give the same 1536px anyway; above it, vw counts the scrollbar and the
     artwork does not, so the fade finishes some ten pixels late, by which point the section
     below has long since painted over both. */
  background:
    linear-gradient(to bottom, rgba(248, 251, 253, 0) 80%, #f8fbfd 100%)
      100% 0 / max(100vw, 1536px) calc(max(100vw, 1536px) / 1.5) no-repeat,
    url("assets/hero-gradient.webp?v=515dc628b3") 100% 0 / max(100%, 1536px) auto no-repeat,
    #f8fbfd;
}
.hero {
  position: relative;
  min-height: 808px;
  /* NOT clipped. The panel's shadow is 0 40px 90px, so it reaches 130px below a panel that
     ends 78px above the hero's foot -- clipping cut it off at that foot and the missing
     shadow read as a faint rule across the join, +3 to +4 and only under the panel's own
     column. Nothing else in here paints outside: the site mock and the phone screens are
     clipped by their own containers, and a pixel diff of the whole page with and without
     this showed a difference in one place only, the 45 rows of shadow that now finish. */
}
.hero__inner {
  position: relative;
  max-width: 1536px; margin: 0 auto;
  padding: 55px 64px 0 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) 687px; align-items: start;
}

/* copy column */
.hero__copy { padding-top: 33px; }
/* Small label above the headline -- the page's H1 for search. Written in normal case, shown in caps. */
.hero__eyebrow {
  margin: 0 0 8px 2px;
  font-size: 13px; line-height: 20px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--blue);
}
.hero__title {
  margin: 0;
  font-size: 68px; line-height: 72px; font-weight: 800;
  letter-spacing: -0.044em; word-spacing: 7px;
  color: var(--ink);
}
.hero__line { display: block; white-space: nowrap; }
.hero__accent {
  background: linear-gradient(90deg, #1da3f4 0%, #1c86f0 45%, #2067eb 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-bottom: 6px;   /* keeps the descenders inside the painted gradient */
}

.hero__lead {
  margin: 21px 0 0 2px;
  font-size: 20.9px; line-height: 30px; font-weight: 400; letter-spacing: -0.012em;
  color: var(--body);
  max-width: 572px;   /* room on the right: the longest line was 492px, +20px, +25px, then +35px */
}
.hero__lead-line { display: inline; }   /* wraps naturally inside the max-width above */

/* three benefits */
.benefits { display: flex; align-items: center; gap: 20px; margin: 30px 0 0 1px; }
.benefit { display: flex; align-items: center; gap: 10px; }
.benefit__icon {
  flex: none; width: 51px; height: 51px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #eef5fe 0%, #e6f0fd 100%);
}
.benefit__icon svg {
  width: 25px; height: 25px;
  fill: none; stroke: #2b7ef1; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* the chair is artwork rather than a sprite icon; it lies low and wide, so it runs a touch larger */
.benefit--qualified .benefit__icon img { width: 30px; height: auto; }
/* the 4px the text moved in towards its icon, given back on its right so the icons keep their spacing */
.benefit__text { display: flex; flex-direction: column; line-height: 22px; padding-right: 4px; }
.benefit__top { font-size: 14px; font-weight: 500; color: var(--ink-2); letter-spacing: -0.005em; }
.benefit__bottom { font-size: 13.6px; font-weight: 400; color: #5d6a82; letter-spacing: -0.005em; white-space: nowrap; }

.hero__cta { display: flex; gap: 18px; margin-top: 48px; margin-left: -1px; }

/* visual column */
.hero__visual { position: relative; width: 687px; }
.panel {
  position: relative;
  width: 687px; height: 675px;
  border-radius: 36px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  /* The panel gradient artwork (assets/panel-gradient.webp), cropped to the card inside the
     supplied image. Cover keeps it undistorted; it is a touch wider than the panel, so a sliver of
     each side is trimmed rather than the artwork being squashed. */
  /* A white wash over the top keeps the progress bar on clean white, as in the mockup; the
     gradient shows from below it. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0px, rgba(255, 255, 255, 0.9) 115px, rgba(255, 255, 255, 0) 240px),
    url("assets/panel-gradient.webp?v=d301e338b4") center / cover no-repeat,
    #eef5fe;
  box-shadow: 0 40px 90px rgba(35, 85, 170, 0.09), 0 2px 8px rgba(35, 85, 170, 0.04);
}

/* stepper */
.steps {
  position: absolute; top: 33px; left: 0; right: 0;
  display: grid; grid-template-columns: repeat(4, 171px); justify-content: center;
}
.step { position: relative; display: flex; flex-direction: column; align-items: center; }
/* The line to the next step is a progress bar: it fills blue across its stage (hero-scenes.js). */
.step__bar {
  position: absolute; top: 17.5px; left: calc(50% + 31px); width: 109px; height: 5px;
  border-radius: 3px; background: var(--line); overflow: hidden; pointer-events: none;
}
.step__bar i {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #2596fb 0%, #1b7cf2 100%);
  transform: scaleX(0); transform-origin: 0 50%;
}
/* the numbers jump the animation to their stage */
.step { cursor: pointer; }
.step__num { transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
.step:not(.step--active):not(.step--done):hover .step__num, .step:not(.step--active):not(.step--done):focus-visible .step__num { background: #dce8fb; color: #1b7cf2; }
.step:focus-visible { outline: none; }
.step:focus-visible .step__num { box-shadow: 0 0 0 3px rgba(31, 124, 242, 0.35); }
.step__num {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 500; color: #2a3651;
  background: #e9f0fb;
}
.step--active .step__num {
  color: #fff; font-weight: 600;
  background: linear-gradient(180deg, #2596fb 0%, #1b7cf2 100%);
  box-shadow: 0 6px 14px rgba(29, 125, 245, 0.28);
}
.step__label {
  margin-top: 7px;
  font-size: 14.8px; font-weight: 500; color: #7d8aa2; letter-spacing: -0.01em; white-space: nowrap;
}
.step--active .step__label { color: #16213d; font-weight: 700; }
/* a stage already played keeps its blue circle */
.step--done .step__num {
  color: #fff; font-weight: 600;
  background: linear-gradient(180deg, #2596fb 0%, #1b7cf2 100%);
}

/* where the coded phone goes: centred horizontally in the panel */
.panel__phone { position: absolute; left: 0; right: 0; margin-inline: auto; top: 131px; width: 328px; height: 510px; display: flex; justify-content: center; }

/* floating booking card + arrow */
.float-card {
  position: absolute; left: 506px; top: 422px;
  width: 212px; height: 75px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(35, 85, 170, 0.12), 0 1px 3px rgba(35, 85, 170, 0.06);
}
.float-card__icon {
  flex: none; width: 45px; height: 45px; border-radius: 11px;
  display: grid; place-items: center; background: var(--blue-soft);
}
.float-card__icon svg {
  width: 23px; height: 23px;
  fill: none; stroke: #2b7ef1; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.float-card__text {
  font-size: 14.6px; line-height: 21px; font-weight: 500; color: var(--ink-2);
  letter-spacing: -0.01em; white-space: nowrap;
}
.float-card__text--3 { line-height: 19px; }   /* three short lines fit the card as it is */

.float-arrow {
  position: absolute; left: 498px; top: 506px; width: 80px; height: 72px;
  fill: none; stroke: #3b8bf3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- hero phone: frame 1, a practice's website and the patient intake form ----------
   The phone is 262 x 510 with a 246 x 494 screen. Inside it, .iw is the real intake widget
   (web/submit) laid out at its native 372px width and scaled by 246/372 = 0.66129, so every
   size below is the real form's own value. Classes are prefixed iw- to stay clear of the site's. */
.iphone {
  position: relative; flex: none;
  width: 262px; height: 510px; padding: 8px;
  border-radius: 46px;
  background: linear-gradient(145deg, #30343b 0%, #121418 55%, #0b0c0f 100%);
  box-shadow:
    inset 0 0 0 1.5px #464b54,
    inset 0 0 0 3px #0a0b0d,
    0 30px 60px rgba(22, 45, 95, 0.22),
    0 8px 18px rgba(22, 45, 95, 0.12);
}
.iphone__btn { position: absolute; width: 3px; background: #2a2e35; }
.iphone__btn--action   { left: -2px; top: 94px;  height: 22px; border-radius: 2px 0 0 2px; }
.iphone__btn--vol-up   { left: -2px; top: 132px; height: 40px; border-radius: 2px 0 0 2px; }
.iphone__btn--vol-down { left: -2px; top: 182px; height: 40px; border-radius: 2px 0 0 2px; }
.iphone__btn--power    { right: -2px; top: 146px; height: 64px; border-radius: 0 2px 2px 0; }
.iphone__screen {
  position: relative; width: 246px; height: 494px;
  border-radius: 38px; overflow: hidden; isolation: isolate;
  background: #f9fbff;
}
.iphone__island {
  position: absolute; top: 9px; left: 50%; z-index: 20;
  width: 74px; height: 21px; margin-left: -37px;
  border-radius: 12px; background: #050607;
}

/* the widget, native size, scaled into the screen */
.iw {
  --brand: #0C8EDF;
  --brand-dark: color-mix(in srgb, var(--brand) 82%, #000);
  --brand-soft: color-mix(in srgb, var(--brand) 20%, #fff);
  --cream: color-mix(in srgb, var(--brand) 3%, #fff);
  --iw-line: color-mix(in srgb, var(--brand) 12%, #fff);
  --iw-ink: #2a2d33;
  --iw-muted: #6c7079;
  position: absolute; top: 0; left: 0;
  width: 372px; height: 747px;
  transform: scale(0.66129); transform-origin: 0 0;
  background: var(--cream); color: var(--iw-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: normal; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.iw svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iw svg .fill { fill: currentColor; stroke: none; }
.iw img { display: block; max-width: none; }

.iw-status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 25; background: #fff;
  height: 50px; padding: 7px 30px 0 36px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 600; color: #111;
}
.iw-status__icons { display: flex; align-items: center; gap: 6px; }
.iw-status svg { fill: #111; stroke: none; }
.iw-sig { width: 18px; height: 12px; }
.iw-wifi { width: 16px; height: 12px; }
.iw-batt { width: 27px; height: 13px; }

.iw-main { position: relative; flex: 1 1 auto; min-height: 0; }
.iw-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 5;
  width: 2rem; height: 2rem; display: grid; place-items: center; color: var(--iw-muted);
}
.iw-close svg { width: 1.15rem; height: 1.15rem; stroke-width: 2; }

/* screens sit on top of each other and crossfade */
.iw-screen {
  position: absolute; inset: 0; padding: 0 1.45rem;
  opacity: 0; transform: translateX(18px); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* staggered, so two screens' text never overlaps: the old one fades out fast, the new one
   comes in just after it */
.iw-screen.is-active { opacity: 1; transform: none; transition-delay: 0.16s; }
.iw-screen.is-leaving {
  opacity: 0; transform: translateX(-18px);
  transition: opacity 0.18s ease, transform 0.3s ease; transition-delay: 0s;
}
.iw-screen--intro { padding-top: 1.35rem; }

.iw-head { position: relative; margin: 0 -1.45rem; padding: 1.1rem 1.45rem 0.5rem; }
.iw-back {
  position: absolute; left: 1.35rem; top: 1rem; width: 2rem; height: 2rem;
  display: grid; place-items: center; color: var(--iw-ink);
}
.iw-back svg { width: 1.3rem; height: 1.3rem; stroke-width: 2; }
.iw-progress { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.iw-dots { display: flex; gap: 0.4rem; }
.iw-dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 22%, #fff); }
.iw-dot.on { background: var(--brand); }
.iw-steplabel { font-size: 0.8rem; color: var(--iw-muted); }

.iw-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: calc(0.6875rem - 1px); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: 999px;
}
.iw-badge__ico { width: 0.95rem; height: 0.95rem; color: var(--brand-dark); }

.iw-title {
  font-weight: 700; letter-spacing: -0.02em;
  font-size: 1.7rem; line-height: 1.2; color: var(--iw-ink); margin: calc(0.85rem - 1px) 0 0.55rem;
}
.iw-sub { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--iw-muted); }
.iw-hl { font-weight: 600; }

.iw-ba {
  position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 450 / 170;
  margin: calc(1.15rem - 2px) 0 1.15rem; background: color-mix(in srgb, var(--brand) 14%, #fff);
}
.iw-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iw-ba__label {
  position: absolute; bottom: 0.65rem; font-size: calc(0.6875rem - 1px); font-weight: 600; letter-spacing: 0.04em;
  color: #fff; background: rgba(60, 45, 30, 0.72); padding: 0.25rem 0.6rem; border-radius: 999px;
}
.iw-ba__label--before { left: 0.65rem; }
.iw-ba__label--after { right: 0.65rem; background: var(--brand); }

.iw-steps { background: #fff; border: 1px solid var(--iw-line); border-radius: 12px; overflow: hidden; margin-bottom: 1.25rem; }
.iw-step {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.9rem;
  font-size: 0.875rem; font-weight: 600; color: var(--iw-ink);
}
.iw-step + .iw-step { border-top: 1px solid var(--iw-line); }
.iw-step__num {
  flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand);
  font-size: 0.85rem; font-weight: 700; line-height: 1;
}

.iw-cta {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--brand); color: #fff; border-radius: 14px;
  font-weight: 600; font-size: 0.975rem; padding: calc(0.95rem - 1px);
  transition: background-color 0.15s, transform 0.15s, opacity 0.25s;
}
.iw-cta svg { width: 1.1rem; height: 1.1rem; color: #fff; stroke-width: 2; }
.iw-cta.is-disabled { opacity: 0.45; }
.iw-cta.is-hover { background: var(--brand-dark); transform: translateY(-1px); }
.iw-cta.is-pressed { background: var(--brand-dark); transform: scale(0.97); }

.iw-photo-demo {
  position: relative; margin: 1.15rem 0; border-radius: 14px; overflow: hidden; aspect-ratio: 2 / 1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, #fff), color-mix(in srgb, var(--brand) 22%, #fff));
}
.iw-photo-demo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* the take-photos screen: the three example shots under the demo photo */
.iw-screen--photo .iw-title { font-size: calc(1.7rem - 2px); }
.iw-screen--photo .iw-cta { margin-bottom: 10px; }
.iw-examples { display: flex; gap: 0.5rem; margin-bottom: 1.15rem; }
.iw-pex { flex: 1; min-width: 0; text-align: center; }
.iw-pex img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--iw-line); }
.iw-pex span { display: block; margin-top: 0.3rem; font-size: 0.66rem; font-weight: 600; color: var(--iw-muted); }

/* the camera screen -- the real form's capture card (web/submit), same sizes and shapes */
.iw-screen--capture { padding-top: 1.4rem; }
.iw-cap__count { text-align: center; font-size: 0.8rem; color: var(--iw-muted); }
.iw-cap__title { margin: 0.3rem 0; text-align: center; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; color: var(--iw-ink); }
.iw-cap__sub { margin: 0 0 1.1rem; text-align: center; font-size: 0.875rem; letter-spacing: -0.005em; color: var(--iw-muted); }   /* the side-photo lines fit on one line, so the viewfinder never shifts */
.iw-cap__view { position: relative; margin-bottom: 1.1rem; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #14161c; }
.iw-cap__cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* dashed mouth-framing guide -- helps the patient sit close enough */
.iw-cap__example { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3; width: 4.14rem; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 9px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
.iw-cap__example img { position: static; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.iw-cap__example span { display: block; padding: 0.18rem 0; background: rgba(16, 18, 26, 0.72); color: #fff; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; }
.iw-cap__hint {
  position: absolute; left: 50%; z-index: 3; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem;
  border-radius: 999px; background: rgba(20, 22, 30, 0.6); color: #fff;
  font-size: calc(0.72rem - 1px); font-weight: 400; white-space: nowrap;
}
.iw-cap__hint--top { bottom: 0.9rem; }
.iw-cap__hint--tl { top: 0.6rem; left: 0.3rem; transform: none; padding: calc(0.35rem - 1px) calc(0.75rem - 1px); }
.iw-cap__hint svg { width: 0.95rem; height: 0.95rem; }
.iw-cap__upload { display: block; margin-top: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--brand); text-decoration: underline; }
.iw-capsteps { display: flex; align-items: flex-start; justify-content: center; margin-top: calc(1.2rem + 15px); }
.iw-capstep { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.iw-capstep__dot { display: flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border: 1.5px solid #d8ccbb; border-radius: 50%; background: #fff; color: var(--iw-muted); font-size: 0.75rem; font-weight: 700; line-height: 1; }
.iw-capstep__label { font-size: 0.66rem; color: var(--iw-muted); }
.iw-capstep.on .iw-capstep__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.iw-capstep.on .iw-capstep__label { color: var(--iw-ink); font-weight: 600; }
.iw-capstep__line { flex: 1; max-width: 1.75rem; margin-top: 0.95rem; border-top: 1.5px dashed color-mix(in srgb, var(--brand) 28%, #fff); }
/* The shutter: a short white snap over the whole screen for each shot, so the viewfinder is
   back before the next one. */
.iw-flash { position: absolute; inset: 0; z-index: 28; border-radius: 38px; background: #fff; opacity: 0; pointer-events: none; }
.iw-flash.is-snap { animation: iw-snap 420ms cubic-bezier(0.3, 0.7, 0.35, 1); }
@keyframes iw-snap {
  0% { opacity: 0; }
  8% { opacity: 0.95; }
  30% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* the review screen: all five shots taken, each a thumbnail under the guide photo */
.iw-screen--review .iw-title { font-size: calc(1.7rem - 2px); }
.iw-screen--review .iw-photo-demo { aspect-ratio: 16 / 10; }   /* the same size as the viewfinder it follows */

/* Camera -> photos (hero-phone.js landPhotos): the pictures dissolve into each other in place while
   the text hands over in turn -- the camera's goes first, the photos screen's follows. */
.iw-screen--capture.is-landing > * { opacity: 0; transition: opacity 150ms ease-in; }
.iw-screen--capture.is-landing > .iw-cap__view { transition: opacity 340ms ease-in-out; }
.iw-screen--review.is-landing { opacity: 1; transform: none; transition: none; }
.iw-screen--review.is-landing > * { animation: iw-land-in 280ms ease-out 150ms both; }
.iw-screen--review.is-landing > .iw-photo-demo { animation: iw-land-photo 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes iw-land-in { from { opacity: 0; } }
@keyframes iw-land-photo {
  from { opacity: 0; transform: translateY(var(--land-dy, 0px)); }
  50% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
.iw-thumbs { display: flex; gap: 0.4rem; margin-bottom: 1.15rem; }
/* The optional records line under the thumbnails, at the real form's own numbers
   (web/submit/styles.css .records__open). Deliberately the quietest thing on the step: it is
   for the minority seeking a second opinion, and must not read as a photo slot left unfilled. */
.iw-records {
  display: flex; align-items: center; gap: 8px; margin: -0.35rem 0 0.8rem; padding: 10px 12px;
  border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc;
  font-size: 12px; color: #475569;
}
.iw-records svg { flex: none; width: 15px; height: 15px; }
.iw-thumb { flex: 1; min-width: 0; text-align: center; }
.iw-thumb span { display: block; margin-bottom: 0.3rem; font-size: 0.66rem; font-weight: 600; color: var(--iw-ink); }
.iw-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; border: 1.5px solid var(--brand); }

.iw-foot {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.9rem 1.45rem 0.4rem; font-size: 0.75rem; color: var(--iw-muted);
}
.iw-foot > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.iw-foot svg { width: 0.9rem; height: 0.9rem; color: var(--brand); }
.iw-dotsep { color: color-mix(in srgb, var(--brand) 40%, #fff); }
.iw-privlink { text-decoration: underline; text-underline-offset: 2px; }
.iw-home::after { content: ""; width: 134px; height: 5px; border-radius: 3px; background: #111; }

/* the tap: hand pointer (moved by hero-phone.js) and a ripple where the finger lands */
.iw-hand {
  position: absolute; left: 0; top: 0; z-index: 30;
  width: 34px; height: 34px; pointer-events: none;
  opacity: 0; transform: translate(260px, 520px);
  transition: transform 900ms cubic-bezier(0.45, 0.05, 0.25, 1), opacity 300ms ease;
  filter: drop-shadow(0 3px 5px rgba(15, 30, 60, 0.28));
}
.iw-hand.is-visible { opacity: 1; }
.iw-hand svg {
  display: block; width: 34px; height: 34px;
  transform-origin: 11px 3px; transition: transform 0.12s ease;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.iw-hand.is-tapping svg { transform: scale(0.86); }
.iw-hand__under { stroke: #fff; stroke-width: 4.2; }
.iw-hand__over { stroke: #13203a; stroke-width: 1.7; }
.iw-ripple {
  position: absolute; left: 0; top: 0; z-index: 29;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: rgba(31, 127, 246, 0.35);
  opacity: 0; pointer-events: none;
}
.iw-ripple.is-on { animation: iw-ripple 0.55s ease-out; }
@keyframes iw-ripple {
  0% { opacity: 0.9; transform: scale(0.25); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* ---------- hero phone: the practice's website, the pill, and the form as a sheet ----------
   Frame 1 now opens on a mock mobile website for "Sunshine Dental" so a visitor sees where the
   form lives: the page scrolls, the SmileReply pill is tapped, and the intake form slides up.
   Native 372px sizes; the section at the top follows the supplied design (measured and scaled
   x0.363), the sections below continue it. ds- is the dental site, iw- the phone and form. */

/* the site */
.iw-site {
  position: absolute; top: 50px; left: 0; right: 0; bottom: 0; overflow: hidden;
  background: #fff; color: #1f2430;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ds-page { position: relative; will-change: transform; }

.ds-header {
  height: 52px; padding: 0 17px 0 17px;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-bottom: 1px solid #eef1f5;
}
.ds-logo { height: 30px; width: auto; }
.ds-menu { display: flex; flex-direction: column; gap: 4.5px; width: 19px; }
.ds-menu i { display: block; height: 2.6px; border-radius: 2px; background: #2b3140; }

.ds-hero {
  position: relative; height: 299px; overflow: hidden;
  border-radius: 0 0 16px 16px; background: #eef2f6;
}
.ds-hero__img { position: absolute; left: 26px; top: -92px; width: 480px; height: auto; }
.ds-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(247, 249, 252, 0.97) 0%, rgba(247, 249, 252, 0.9) 34%, rgba(247, 249, 252, 0.45) 52%, rgba(247, 249, 252, 0) 66%);
}
.ds-hero__copy { position: relative; z-index: 2; padding: 60px 0 0 20px; }
.ds-hero__title {
  font-size: 26px; line-height: 27px; font-weight: 800; letter-spacing: -0.035em; color: #111a2c;
}
.ds-hero__sub { margin: 9px 0 0; font-size: 14.5px; line-height: 20px; font-weight: 400; color: #5b6472; }

.ds-cards {
  position: relative; z-index: 3; margin: -30px 15px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
}
.ds-card {
  height: 117px; padding-top: 12px; border-radius: 11px; background: #fff;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 8px 20px rgba(20, 40, 80, 0.07), 0 1px 3px rgba(20, 40, 80, 0.05);
}
.ds-card__ic { width: 56px; height: 56px; border-radius: 50%; background: #eaf3ff; display: grid; place-items: center; color: #2878e6; }
.ds-card__ic svg { width: 32px; height: 32px; stroke-width: 1.7; }
/* illustrated icons: the artwork carries its own circle, so it fills the round tile */
.ds-card__ic--img { overflow: hidden; background: none; }
.ds-card__ic--img img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ds-card__label { margin-top: 9px; font-size: 12.5px; line-height: 15px; font-weight: 500; color: #1f2430; text-align: center; }

.ds-rule { display: block; width: 36px; height: 2.6px; border-radius: 2px; background: #2878e6; }
.ds-h2 { margin: 16px 0 0; font-size: 23px; line-height: 27px; font-weight: 800; letter-spacing: -0.03em; color: #111a2c; }
.ds-p { margin: 10px 0 0; font-size: 14px; line-height: 20.5px; color: #5b6472; }

.ds-about { position: relative; isolation: isolate; overflow: hidden; padding: 27px 22px 6px; }
.ds-about::after {
  content: ""; position: absolute; right: -70px; top: 10px; z-index: -1;
  width: 170px; height: 170px; border-radius: 50%; background: #f1f6fd;
}
.ds-list { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ds-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: #1f2430; }
.ds-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #eaf3ff; display: grid; place-items: center; color: #2878e6; }
.ds-tick svg { width: 13px; height: 13px; stroke-width: 2.4; }

.ds-treat { padding: 32px 15px 0; }
.ds-treat .ds-rule, .ds-treat .ds-h2 { margin-left: 7px; }
.ds-rows { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.ds-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 12px;
  border: 1px solid #edf1f7; border-radius: 13px; background: #fff;
  box-shadow: 0 4px 12px rgba(20, 40, 80, 0.04);
}
.ds-row__ic { flex: none; width: 42px; height: 42px; border-radius: 11px; background: #eaf3ff; display: grid; place-items: center; color: #2878e6; }
.ds-row__ic svg { width: 22px; height: 22px; }
/* illustrated icons carry their own circle, so the list's tiles go round to match them (and the cards above) */
.ds-rows .ds-row__ic { border-radius: 50%; }
.ds-row__ic--img { overflow: hidden; background: none; }
.ds-row__ic--img img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ds-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-row__text strong { font-size: 13.5px; font-weight: 700; color: #1f2430; }
.ds-row__text span { font-size: 12px; color: #6b7482; }
.ds-row__chev { flex: none; width: 16px; height: 16px; color: #9aa3b2; stroke-width: 2; }

.ds-cta {
  margin: 30px 15px 0; padding: 24px 20px 22px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #3b8ff7 0%, #2273ea 100%);
  box-shadow: 0 12px 26px rgba(34, 115, 234, 0.25);
}
.ds-cta__title { font-size: 20px; line-height: 24px; font-weight: 800; letter-spacing: -0.02em; }
.ds-cta__p { margin: 7px 0 16px; font-size: 13px; line-height: 19px; color: rgba(255, 255, 255, 0.86); }
.ds-cta__btn {
  display: inline-block; padding: 11px 20px; border-radius: 999px; background: #fff;
  font-size: 13.5px; font-weight: 700; color: #2273ea;
}

.ds-foot { margin-top: 30px; padding: 22px 22px 60px; border-top: 1px solid #eef1f5; }
.ds-foot__logo { height: 24px; width: auto; }
.ds-foot__links { display: flex; gap: 18px; margin-top: 14px; font-size: 12.5px; font-weight: 500; color: #5b6472; }
.ds-foot__copy { margin-top: 10px; font-size: 11.5px; color: #9aa3b2; }

/* SmileReply's floating pill (the launcher from web/submit, at its real sizes) */
.iw-pill {
  position: absolute; right: 22px; bottom: 44px; z-index: 8;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--brand); color: #fff; border-radius: 999px;
  padding: 0.85rem calc(1.3rem + 2px) 0.85rem calc(1.3rem - 2px);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600; font-size: 0.95rem; white-space: nowrap;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--brand) 40%, transparent);
  transition: transform 0.15s ease, opacity 0.25s ease, background-color 0.15s ease;
}
.iw-pill__ico { width: 1.265rem; height: 1.265rem; color: #fff; }
.iw-pill.is-pressed { transform: scale(0.95); background: var(--brand-dark); }
.iw-pill.is-hidden { opacity: 0; transform: scale(0.9); }

/* the form, sliding up over the page */
/* the dim covers the status bar too and the sheet starts well below it, like an iOS sheet: the
   practice's page stays visible behind the dim, and the form's content fills the sheet instead of
   leaving empty space above the footer (128 leaves ~22px under the intro screen's button) */
.iw-dim {
  position: absolute; inset: 0; z-index: 26;
  background: rgba(15, 23, 42, 0.28); opacity: 0; transition: opacity 0.4s ease;
}
.iw-dim.is-on { opacity: 1; }
.iw-sheet {
  position: absolute; top: 128px; left: 0; right: 0; bottom: 0; z-index: 27;
  display: flex; flex-direction: column; padding-bottom: 30px;
  background: var(--cream); border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.14);
  transform: translateY(102%); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.iw-sheet.is-open { transform: none; }

.iw-home { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; height: 30px; display: grid; place-items: center; }

/* ---------- hero panel: switching frames (hero-scenes.js) ---------- */
/* Between frames the panel cuts to a line of text -- a beat, so the phone does not jump straight
   into the dashboard. The stepper above stays visible, and its marker moves during the cut. */
.panel__cut {
  position: absolute; left: 0; right: 0; top: 104px; bottom: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 0 90px; text-align: center;
  background: none;                      /* the panel's own background shows through, as in the opening */
  opacity: 0; pointer-events: none; transition: opacity 0.45s ease;
}
.panel__cut.is-on { opacity: 1; }

/* ---------- hero panel, frame 4: the patient's plan and booking (hero-book.js) ----------
   The phone from frame 3, showing the real portal screen 2 captured at its 372px width (see the
   markup). Native px inside .bk, scaled into the phone like .cw. */
.panel__book { position: absolute; left: 0; right: 0; margin-inline: auto; top: 131px; width: 328px; height: 510px; display: flex; justify-content: center; }
.panel__book.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.panel__book { transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.bk {
  position: absolute; top: 0; left: 0; width: 372px; height: 747px; overflow: hidden;
  transform: scale(0.66129); transform-origin: 0 0; background: #fff;
}
.bk .iw-status svg { fill: #111; stroke: none; }
.bk .iw-home { display: none; }   /* the home indicator would sit over the page's booking bar */
.bk img { display: block; max-width: none; }
.bk-view { position: absolute; top: 50px; left: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; }
.bk-page { position: absolute; top: 0; left: 0; width: 372px; will-change: transform; }
.bk-page__img { width: 372px; height: auto; }
.bk-chrome { position: absolute; left: 0; width: 372px; height: auto; pointer-events: none; }
.bk-mark { position: absolute; left: 0; width: 1px; pointer-events: none; }

/* the before/after, live: the "before" state underneath, the "after" state clipped from --bk-pos */
@property --bk-pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.bk-ba { position: absolute; overflow: hidden; --bk-pos: 50%; }
.bk-ba img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk-ba__after { clip-path: inset(0 0 0 var(--bk-pos)); }
.bk-ba__divider {
  position: absolute; top: 0; bottom: 0; left: var(--bk-pos); z-index: 4; width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.bk-ba__handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 41.6px; height: 41.6px; border-radius: 50%;
  background: #fff; color: #1c7df7; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.bk-ba__handle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* the gallery: two cases in a strip, slid across by a flick; the footer's dots follow */
/* clip-path, not overflow: hidden. The track inside is transformed (it slides to the second
   result), which promotes it to its own compositor layer -- and a composited layer is not
   clipped by an ancestor's border-radius, so the overlay's corners came out square on top of
   the page's rounded ones. clip-path clips the layer itself. The radius is set per element in
   the markup; inherit it here so the two cannot drift. */
.bk-gal { position: absolute; overflow: hidden; clip-path: inset(0 round inherit); }
@supports not (clip-path: inset(0 round inherit)) {
  .bk-gal { clip-path: inset(0 round 12px); }
}
.bk-gal__track { display: flex; width: 200%; height: 100%; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.bk-gal__track img { width: 50%; height: 100%; }
.bk-gal.is-next .bk-gal__track { transform: translateX(-50%); }
/* the second result is live, so the finger can drag it once the arrow brings it in: a full
   "before" underneath and a full "after" clipped from --gal-pos, like the plan's own slider
   above, with the gallery's smaller handle (2.2rem in the portal, against 2.6rem) */
@property --gal-pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.bk-gba { position: relative; flex: none; width: 50%; height: 100%; overflow: hidden; --gal-pos: 50%; }
.bk-gba img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk-gba__after { clip-path: inset(0 0 0 var(--gal-pos)); }
.bk-gba__divider {
  position: absolute; top: 0; bottom: 0; left: var(--gal-pos); z-index: 4; width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.bk-gba__handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 35.2px; height: 35.2px; border-radius: 50%;
  background: #fff; color: #1c7df7; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.bk-gba__handle svg { width: 16.8px; height: 16.8px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bk-galfoot { position: absolute; }
.bk-galfoot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk-galfoot__next { opacity: 0; transition: opacity 0.35s ease 0.15s; }
.bk-gal.is-next ~ .bk-galfoot .bk-galfoot__next { opacity: 1; }

/* "Choose a time" pressed: the button darkens a touch, as a tap does */
.bk-press { position: absolute; border-radius: 12px; background: rgba(15, 23, 42, 0); pointer-events: none; transition: background-color 0.15s ease; }
.bk-press.is-on { background: rgba(15, 23, 42, 0.08); }

/* ---------- hero panel, paused (hero-scenes.js) ----------
   A click under the stepper pauses; a play button over a light veil says how to carry on. */
.panel__paused {
  position: absolute; left: 0; right: 0; top: 99px; bottom: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(248, 251, 253, 0.35); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  cursor: pointer; animation: hero-paused-in 0.25s ease both;
}
@keyframes hero-paused-in { from { opacity: 0; } }
.panel__paused[hidden] { display: none; }   /* display:flex above would otherwise override hidden */
.panel__play {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: #fff; color: var(--blue);
  box-shadow: 0 16px 36px rgba(31, 124, 242, 0.22), 0 2px 6px rgba(15, 30, 60, 0.08);
  transition: transform 0.15s ease;
}
.panel__play svg { width: 40px; height: 40px; margin-left: -2px; fill: currentColor; }   /* the triangle's centre of mass on the circle's centre */
.panel__paused:hover .panel__play { transform: scale(1.05); }
.panel__paused-label {
  padding: 6px 12px; border-radius: 999px; background: rgba(13, 27, 62, 0.72); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
}
.panel { cursor: pointer; }
.panel .steps { cursor: default; }

/* ---------- hero panel, the close (hero-scenes.js outro) ----------
   The last line, centred in the space under the stepper, on the panel's own background. */
.panel__outro {
  position: absolute; left: 0; right: 0; top: 99px; bottom: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel__outro.is-on { opacity: 1; transform: none; }
.panel__outro.is-leaving { opacity: 0; transform: translateY(-16px); transition: opacity 0.5s ease, transform 0.6s ease; }
.outro__title {
  margin: 0; display: flex; flex-direction: column; align-items: center; white-space: nowrap;
  font-size: 38px; line-height: 44px; font-weight: 800; letter-spacing: -0.045em; word-spacing: 3px;
  color: var(--ink);
}
.outro__sub { margin: 16px 0 0; font-size: 15.5px; line-height: 22px; font-weight: 500; color: var(--body); letter-spacing: -0.01em; }
.panel__outro .outro__sub { opacity: 0; transition: opacity 0.6s ease 0.35s; }
.panel__outro.is-on .outro__sub { opacity: 1; }

/* ---------- hero panel, the opening (hero-intro.js) ----------
   Three statements over the panel's own background, one after another in the same place, with
   the stepper greyed out above. Measured from the opening mockups. */
.steps .step { transition: opacity 0.5s ease; }
.steps.is-idle .step { opacity: 0.55; }
.steps.is-idle .step__num { color: #2a3651; font-weight: 500; background: #e9f0fb; box-shadow: none; }
.steps.is-idle .step__label { color: #7d8aa2; font-weight: 500; }

.panel__intro { position: absolute; inset: 0; z-index: 4; pointer-events: none; visibility: hidden; }
.panel__intro.is-on { visibility: visible; }
.panel__intro.is-resetting, .panel__intro.is-resetting * { transition: none !important; }

.intro__line {
  position: absolute; left: 0; right: 0; top: 336px; margin: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  font-size: 40px; line-height: 45px; font-weight: 800; letter-spacing: -0.045em; word-spacing: 3px;
  color: var(--ink); white-space: nowrap;
  opacity: 0; transform: translateY(calc(-50% + 16px));
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* the second and third phases' text and icons are centred in the space under the stepper -- from
   its bottom (99px) to the panel's (675px), so on 387px -- the third lifted 7px with its row, whose
   chair tile reaches further down. The two-line opening statement sits on the same two lines as
   the first two lines of the statement after it, so the text does not shift between them. */
.intro__line--two { top: 313.5px; }
.intro__line--three { top: 329px; }
.intro__line.is-in { opacity: 1; transform: translateY(-50%); }
.intro__line.is-out {
  opacity: 0; transform: translateY(calc(-50% - 22px));
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.4, 0, 0.6, 1);
}
.intro__accent {
  background: linear-gradient(90deg, #1da3f4 0%, #1c86f0 45%, #2067eb 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-bottom: 4px; margin-bottom: -4px;      /* the descenders stay inside the painted gradient */
}

.intro__icons { position: absolute; left: 0; right: 0; top: 467px; height: 0; transform: translateY(var(--row-y, 0px)); }
.intro__icons.is-four { --row-y: -7px; }
.intro__tile, .intro__arrow {
  position: absolute; top: 0; transform: translate(-50%, -50%);
  transition: left 0.9s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.5s ease;
}
.intro__tile {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 26px rgba(40, 95, 175, 0.08), 0 1px 2px rgba(40, 95, 175, 0.05);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0;
}
.intro__tile svg { width: 38px; height: 38px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.intro__tile svg .fill { fill: var(--blue); stroke: none; }
.intro__tile--chair { width: 99px; height: 99px; border-radius: 24px; box-shadow: 0 16px 36px rgba(31, 124, 242, 0.18), 0 2px 4px rgba(31, 124, 242, 0.08); }
.intro__tile--chair img { width: 58px; height: auto; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.intro__tile--chair:not(.is-in) img { transform: scale(0.9); }
.intro__tile svg, .intro__arrow svg { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.intro__tile:not(.is-in) svg { transform: scale(0.9); }
.intro__tile.is-in, .intro__arrow.is-in { opacity: 1; }
.intro__arrow { width: 24px; height: 24px; opacity: 0; }
.intro__arrow svg { display: block; width: 24px; height: 24px; fill: none; stroke: #5d9ef3; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.intro__arrow:not(.is-in) svg { transform: translateX(-6px); }

.panel__intro.is-leaving .intro__line.is-in,
.panel__intro.is-leaving .intro__icons {
  opacity: 0; transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.4, 0, 0.6, 1);
}
.panel__intro.is-leaving .intro__line.is-in { transform: translateY(calc(-50% - 22px)); }
.panel__intro.is-leaving .intro__icons { transform: translateY(calc(var(--row-y, 0px) - 22px)); }
.intro__icons { transition: opacity 0.45s ease, transform 0.9s cubic-bezier(0.45, 0.05, 0.25, 1); }

/* above the line, the matching icon from the opening's row, on the same frosted tile */
.panel__cut-icon {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 26px rgba(40, 95, 175, 0.08), 0 1px 2px rgba(40, 95, 175, 0.05);
}
.panel__cut-icon svg { width: 38px; height: 38px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.panel__cut-icon svg .fill { fill: var(--blue); stroke: none; }
.panel__cut-text {   /* the opening statements' type (.intro__line), 5px smaller */
  max-width: 440px;   /* two balanced lines, as at the larger size */
  margin: 0; font-size: 35px; line-height: 40px; font-weight: 800; letter-spacing: -0.045em; word-spacing: 3px;
  color: var(--ink); text-wrap: balance;
}
.panel__phone { transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
/* The window resizes to whatever part of the dashboard is being shown (hero-review.js sets
   --fit-ms to match the camera move), so a zoomed-in card is framed to its own edges. */
.panel__desk {
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    width var(--fit-ms, 900ms) cubic-bezier(0.45, 0.05, 0.25, 1),
    height var(--fit-ms, 900ms) cubic-bezier(0.45, 0.05, 0.25, 1),
    left var(--fit-ms, 900ms) cubic-bezier(0.45, 0.05, 0.25, 1),
    top var(--fit-ms, 900ms) cubic-bezier(0.45, 0.05, 0.25, 1);
}
.panel__phone.is-hidden, .panel__desk.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.float-card, .float-arrow { transition: opacity 0.5s ease; }
.float-card.is-off, .float-arrow.is-off { opacity: 0; }

/* ---------- hero panel, frame 2: the dentist grades the submission ----------
   A window holding the real dashboard's grading screen (web/dash) at its native 1280px width.
   Sizes inside .dw are the dashboard's own (its rem values at 16px). hero-review.js moves a
   "camera" (a transform on .dw) and the mouse. Classes are prefixed dw- to stay clear of the
   site's .btn, .badge, .nav and .steps. */
.panel__desk { position: absolute; left: 22px; top: 118px; width: 643px; height: 532px; }
.panel__desk.is-resetting * { transition: none !important; }

.browser {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.07), 0 30px 60px rgba(22, 45, 95, 0.2), 0 8px 18px rgba(22, 45, 95, 0.1);
}
.browser__view { position: absolute; inset: 0; overflow: hidden; background: #f9f9ff; }

/* the dashboard, native size */
.dw {
  --ui-accent: #0071f5; --ui-accent-strong: #0060d0; --ui-accent-soft: #e7f2fe;
  --nav-bg: #06183e; --nav-ink: #d9e2f2; --nav-icon: #9fb3d1; --nav-active: rgba(255, 255, 255, 0.1); --nav-accent: #4da2ff;
  --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --line: #e3e8ef;
  position: absolute; top: 0; left: 0; width: 1280px; height: 2000px;
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  transform-origin: 0 0; transform: scale(0.5023);
  transition: transform 900ms cubic-bezier(0.45, 0.05, 0.25, 1);
  background: #f9f9ff; color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; line-height: 1.55; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.dw svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dw img { display: block; max-width: none; }
.dw [hidden] { display: none !important; }
.dw p { margin: 0; }

.dw-side { display: flex; flex-direction: column; padding: 24px 16px; background: var(--nav-bg); }
.dw-brand { padding: 4px 8px 28px; }
.dw-brand img { width: 164px; height: auto; }
.dw-nav { display: grid; gap: 2px; }
.dw-nav__item { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--nav-ink); font-weight: 500; }
.dw-nav__item svg { width: 22px; height: 22px; stroke: var(--nav-icon); stroke-width: 1.6; }
.dw-nav__item.is-active { background: var(--nav-active); color: var(--nav-accent); font-weight: 600; }
.dw-nav__item.is-active svg { stroke: var(--nav-accent); }
.dw-nav__item.is-active::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ui-accent); }
.dw-nav__badge {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
}

.dw-main { position: relative; min-width: 0; }
.dw-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 32px 32px 20px; }
.dw-user { display: flex; align-items: center; gap: 12px; }
.dw-user__who { display: grid; line-height: 1.3; }
.dw-user__who strong { font-weight: 600; }
.dw-user__who small { font-size: 13px; color: var(--muted); }
.dw-avatar {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: var(--ui-accent-soft); color: var(--ui-accent); font-size: 13px; font-weight: 700;
}
.dw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dw-avatar--lg { width: 52px; height: 52px; font-size: 16px; }
.dw-s-new { background: var(--ui-accent-soft); color: var(--ui-accent); }
.dw-content { padding: 0 32px 40px; }
.dw-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; }

.dw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, transform 0.12s;
}
.dw-btn svg { width: 17px; height: 17px; }
.dw-btn--lg { padding: 10px 17px; font-size: 13.5px; }
.dw-btn--lg svg { width: 15px; height: 15px; }
.dw-btn--block { width: 100%; padding: 12px; font-size: 15px; }
.dw-btn--primary { background: var(--ui-accent); border-color: transparent; color: #fff; }
.dw-btn--primary.is-hover { background: var(--ui-accent-strong); }

/* grading */
.dw-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.dw-back svg { width: 16px; height: 16px; }
/* The real screen hangs the meta buttons 31px below the subtitle; at this width they would run into
   it, so they sit a little lower here. */
.dw-gtop { position: relative; margin-bottom: 58px; }
.dw-gtitle { font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.dw-gsubtitle { margin-top: 4px !important; color: var(--muted); }
.dw-gmeta { position: absolute; right: 0; bottom: -46px; display: flex; align-items: center; gap: 14px; }
.dw-gmeta__info { padding: 7px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; color: var(--muted); }
.dw-grade { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: 20px; align-items: start; }
.dw-gcard { padding: 24px; }
.dw-gh { margin-bottom: 20px; font-size: 17px; font-weight: 700; }
.dw-pid { display: flex; align-items: center; gap: 14px; }
.dw-pid > div { display: grid; gap: 4px; }
.dw-pid strong { font-size: 17px; font-weight: 700; }
.dw-pline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.dw-pline svg { width: 15px; height: 15px; }
.dw-sep { height: 1px; margin: 20px 0; background: var(--line); }
.dw-gsub { margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.dw-hint { margin-bottom: 12px !important; font-size: 13px; color: var(--muted); }
.dw-concern { margin-bottom: 20px !important; padding: 14px 16px; border-radius: 12px; background: var(--ui-accent-soft); color: var(--ink-2); }
.dw-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.dw-pcell { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 10px; background: #eef1f6; }
.dw-pcell img, .dw-pmain img { width: 100%; height: 100%; object-fit: cover; }
.dw-pcell.is-active { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.dw-pmain { position: relative; height: 208px; overflow: hidden; margin-bottom: 16px; border-radius: 14px; }
.dw-pnav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.9); font-size: 16px; line-height: 1; }
.dw-pnav--l { left: 10px; }
.dw-pnav--r { right: 10px; }

.dw-gstep { padding: 20px 0; border-top: 1px solid var(--line); }
.dw-gh + .dw-gstep { padding-top: 0; border-top: 0; }
.dw-gstep h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.dw-gstep h3 + .dw-hint { margin-top: -6px !important; }
.dw-sel {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color 0.15s, transform 0.12s;
}
.dw-sel.is-open { border-color: var(--ui-accent); }
.dw-sel__val { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dw-sel__ph { font-size: 14px; color: var(--muted); }
.dw-sel__picked { display: none; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.dw-sel.has-value .dw-sel__ph { display: none; }
.dw-sel.has-value .dw-sel__picked { display: inline-flex; }
.dw-sel__caret { width: 18px; height: 18px; margin-left: auto; stroke: var(--muted) !important; transition: transform 0.15s; }
.dw-sel.is-open .dw-sel__caret { transform: rotate(180deg); }
.dw-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; padding: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.04);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.16s, transform 0.16s;
}
.dw-sel.is-open .dw-menu { opacity: 1; transform: none; }
.dw-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; transition: background-color 0.12s; }
.dw-opt.is-hover { background: #f8fafc; }
.dw-opt.is-selected { background: var(--ui-accent-soft); }
.dw-opt__icon { flex: none; width: 28px; height: 28px; border-radius: 7px; object-fit: contain; }
.dw-opt__check { width: 18px; height: 18px; margin-left: auto; stroke: var(--ui-accent) !important; stroke-width: 2.4 !important; opacity: 0; }
.dw-opt.is-selected .dw-opt__check { opacity: 1; }
.dw-sav { flex: none; display: grid; place-items: center; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; background: #eef2f7; }
.dw-sav img { width: 100%; height: 100%; object-fit: cover; }
.dw-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; background: #f1f5f9; font-size: 13px; font-weight: 600; }
.dw-chip img { width: 20px; height: 20px; border-radius: 5px; }
.dw-chip b { color: var(--muted); font-weight: 700; }
.dw-empty { font-size: 13px; color: var(--muted); }

.dw-pblock.is-in, .dw-findings.is-in { animation: dw-in 0.35s ease; }
@keyframes dw-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dw-pblock__title { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; font-size: 15px; font-weight: 700; }
.dw-pblock__title img { width: 36px; height: 36px; }
.dw-ptabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.dw-ptab { margin-bottom: -1px; padding: 10px 14px; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 600; color: var(--muted); }
.dw-ptab.is-active { color: var(--ui-accent); border-bottom-color: var(--ui-accent); }
.dw-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dw-plan {
  position: relative; display: grid; align-content: start; gap: 6px; padding: 14px;
  border: 1.5px solid var(--line); border-radius: 14px; transition: border-color 0.15s, background-color 0.15s, transform 0.12s;
}
.dw-plan.is-hover { border-color: #cbd5e1; }
.dw-plan.is-selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.dw-plan__radio { position: absolute; top: 14px; left: 14px; width: 18px; height: 18px; border: 2px solid #cbd5e1; border-radius: 50%; transition: border-color 0.15s, box-shadow 0.15s; }
.dw-plan.is-selected .dw-plan__radio { border-color: var(--ui-accent); box-shadow: inset 0 0 0 3px var(--ui-accent); }
.dw-plan__head { padding-left: 28px; font-size: 14px; font-weight: 700; }
.dw-plan__desc { padding-left: 28px; font-size: 12px; color: var(--muted); }
.dw-plan__row { display: flex; align-items: center; gap: 6px; padding-left: 28px; font-size: 13px; color: var(--ink-2); }
.dw-plan__row svg { width: 15px; height: 15px; stroke: var(--muted); }

.dw-delivery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 16px; }
.dw-dopt { display: flex; gap: 12px; padding: 16px; border: 1.5px solid var(--line); border-radius: 14px; transition: border-color 0.15s, background-color 0.15s, transform 0.12s; }
.dw-dopt.is-hover { border-color: #cbd5e1; }
.dw-dopt.is-selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); }

/* The delivery spotlight (hero-review.js spotlight): everything around the delivery section fades,
   and the backgrounds, borders and shadows it sits within (the card, the dashboard, the window)
   dissolve, leaving the section itself on the panel. */
/* The callout over the lone delivery section: laid over the whole panel (hero-review.js sets its
   offset and --card-top, the window's top edge in panel px), measured from the mockup. */
.dw-callout { position: absolute; left: 0; top: 0; width: 687px; height: 675px; pointer-events: none; }
.dw-callout__plane {
  position: absolute; left: 50%; top: calc(var(--card-top, 275px) - 130px); width: 44px; height: auto;
  margin-left: -22px; opacity: 0; transform: translateY(8px) scale(0.92);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.dw-callout__text {
  position: absolute; left: 0; right: 0; top: calc(var(--card-top, 275px) - 81px); margin: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap;
  font-size: 27px; line-height: 31px; font-weight: 800; letter-spacing: -0.035em; color: var(--ink);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease 0.15s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.dw-callout__arrows { position: absolute; left: 0; top: calc(var(--card-top, 275px) - 62px); width: 687px; height: 96px; overflow: visible; }
.dw-callout__arrows path { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* each line stays invisible until it starts drawing: an undrawn round-capped line still shows a dot */
.dw-callout__line { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.7s cubic-bezier(0.45, 0.05, 0.35, 1) 0.45s, opacity 0s linear 0.45s; }
.dw-callout__head { opacity: 0; transition: opacity 0.25s ease 1.05s; }
.dw-callout.is-on .dw-callout__plane, .dw-callout.is-on .dw-callout__text { opacity: 1; transform: none; }
.dw-callout.is-on .dw-callout__line { stroke-dashoffset: 0; opacity: 1; }
.dw-callout.is-on .dw-callout__head { opacity: 1; }

.dw-callout.is-leaving .dw-callout__plane, .dw-callout.is-leaving .dw-callout__text,
.dw-callout.is-leaving .dw-callout__arrows {
  opacity: 0; transform: translateY(-8px); transition: opacity 0.85s ease, transform 1.1s ease;
}
.dw-callout__arrows { transition: opacity 0.85s ease, transform 1.1s ease; }

/* The Personal Video moment (hero-review.js showPersonal): hero-review.js places the thumbnail, the
   arrow and the burst against the Personal Video option. */
.dw-personal { position: absolute; left: 0; top: 0; width: 687px; height: 675px; pointer-events: none; }
.dw-personal__thumb {
  position: absolute; padding: 10px; border-radius: 16px; background: #fff;
  box-shadow: 0 18px 40px rgba(30, 64, 130, 0.16), 0 2px 6px rgba(30, 64, 130, 0.08);
  opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: 50% 100%;
  transition: opacity 0.9s ease 0.35s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.dw-personal__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #e9eefb; }
/* the Generated Video option on its own keeps a white card under it */
.dw-personal__arrow { position: absolute; left: 0; top: 0; overflow: visible; }
.dw-personal__arrow path { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dw-personal__line { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.6s cubic-bezier(0.45, 0.05, 0.35, 1) 1.15s, opacity 0s linear 1.15s; }
.dw-personal__head { opacity: 0; transition: opacity 0.25s ease 1.7s; }
.dw-personal__burst { position: absolute; width: 36px; height: 24px; overflow: visible; opacity: 0; transform: scale(0.6); transform-origin: 30% 80%; }
.dw-personal__burst path { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; }
.dw-personal.is-on .dw-personal__thumb { opacity: 1; transform: none; }
.dw-personal.is-on .dw-personal__line { stroke-dashoffset: 0; opacity: 1; }
.dw-personal.is-on .dw-personal__head { opacity: 1; }
.dw-personal.is-leaving > * { opacity: 0 !important; transition: opacity 0.5s ease !important; }
.dw-personal.is-lit .dw-personal__burst { opacity: 1; transform: none; transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* the option itself, lit while the pointer rests on it */
.dw-dopt { transition: border-color 0.35s, background-color 0.35s, transform 0.12s; }
.dw-dopt.is-feature { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.dw-dopt__icon { transition: background-color 0.35s, color 0.35s; }
.dw-dopt.is-feature .dw-dopt__icon { background: #d8e9fd; color: var(--ui-accent); }
.dw-dopt.is-feature .dw-dopt__icon--ai { background: var(--ui-accent); color: #fff; }   /* Generated Video's icon is already solid blue */

.dw-gone { opacity: 0 !important; transition: opacity 0.7s ease !important; }
.dw-bare {
  background-color: transparent !important; border-color: transparent !important; box-shadow: none !important;
  transition: background-color 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease !important;
}
.dw-dopt__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #f1f5f9; color: var(--muted); }
.dw-dopt__icon--ai { background: var(--ui-accent); color: #fff; }
.dw-dopt__icon svg { width: 21px; height: 21px; }
.dw-dopt strong { display: block; font-size: 14px; font-weight: 700; }
.dw-dopt small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* Generated Video's findings: the teeth map and the concern chips */
.dw-findings { margin: 4px 0 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.dw-findings__title { margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.dw-tmap { margin-bottom: 17.6px; padding: 16px 18.4px 18.4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dw-tmap__title { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-accent); }
.dw-tmap__active { margin-top: 5.6px !important; font-size: 12.8px; font-weight: 600; color: var(--ink); }
.dw-tmap__active.is-empty { font-weight: 500; color: var(--muted); }
.dw-tmap__stage { max-width: 520px; margin: 14.4px auto 3.2px; padding: 15px 0 5px; }
.dw-tmap__frame { position: relative; }
.dw-tmap__frame img { width: 100%; height: auto; }
.dw-tmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dw .dw-tmap__svg polygon { fill: var(--ui-accent); fill-opacity: 0; stroke: none; mix-blend-mode: multiply; transition: fill-opacity 0.15s; }
.dw .dw-tmap__svg polygon.is-hover { fill-opacity: 0.28; }
.dw .dw-tmap__svg polygon.is-on { fill-opacity: 0.72; }
.dw .dw-tmnum { fill: var(--ink); stroke: #fff; stroke-width: 2.4px; paint-order: stroke; stroke-linejoin: round; font-size: 9px; font-weight: 700; }
/* The real button sits 80px left of the image, inside a wider card; here the card hugs the image,
   so the button sits on the image's lower-left corner to stay inside it, as it looks on screen. */
.dw-tmap__selall {
  position: absolute; left: 2px; bottom: -7.6px; z-index: 3; padding: 4.8px 10.4px;
  border: 1px solid var(--line); border-radius: 7.2px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); opacity: 0.4; transition: opacity 0.15s;
}
.dw-tmap__selall.is-ready { opacity: 1; }
.dw-notes { padding: 11.2px 12.8px; border: 1px solid #dbeafe; border-radius: 12px; background: #eff6ff; }
/* "Why the treatment fits" -- the same box in the form's amber, under the concerns */
.dw-notes--reason { margin-top: 9.6px; border-color: #fde68a; background: #fefce8; }
.dw-notes--reason .dw-notes__head { color: #b45309; }
.dw-notes__head { display: block; margin-bottom: 8.8px; font-size: 11.2px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #2563eb; }
.dw-notes__chips { display: flex; flex-wrap: wrap; gap: 6.4px; margin-bottom: 9px; }
.dw-fchip {
  display: inline-flex; align-items: center; gap: 4.8px; padding: 4.5px 4.8px 4.5px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13.1px; color: var(--ink);
  transition: opacity 0.18s, transform 0.18s, box-shadow 0.15s;
}
.dw-fchip.is-active { box-shadow: 0 0 0 2px var(--ui-accent); }
.dw-fchip.is-removing { opacity: 0; transform: scale(0.85); }
.dw-fchip b { display: grid; place-items: center; width: 18.4px; height: 18.4px; border-radius: 50%; font-size: 15.2px; font-weight: 600; line-height: 1; color: var(--muted); transition: background-color 0.12s, color 0.12s; }
.dw-fchip b.is-hover { background: #fee2e2; color: #dc2626; }
.dw-fchip__teeth {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16.8px; height: 16.8px; margin-left: 1.6px; padding: 0 4.5px;
  border-radius: 999px; background: var(--ui-accent); color: #fff; font-size: 10.6px; font-weight: 700;
}
.dw-notes__add { display: block; padding: 6.7px 9.6px; border: 1px dashed rgba(100, 116, 139, 0.4); border-radius: 8px; background: rgba(255, 255, 255, 0.55); font-size: 13.1px; color: #94a3b8; }
.dw-notes__add.is-over { border-color: rgba(239, 68, 68, 0.45); color: #ef4444; }
.dw-notes__add.is-full { opacity: 0.5; }

.dw-gbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.dw-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ui-accent); }
.dw-link svg { width: 16px; height: 16px; }
.dw-gbar__send { display: flex; gap: 10px; }
.dw .is-pressed { transform: scale(0.98); }

/* the mouse */
.dw-cursor {
  position: absolute; left: 0; top: 0; z-index: 10; width: 20px; height: 20px; pointer-events: none;
  opacity: 0; transform: translate(320px, 320px);
  transition: transform 800ms cubic-bezier(0.45, 0.05, 0.25, 1), opacity 300ms ease;
  filter: drop-shadow(0 2px 3px rgba(15, 30, 60, 0.3));
}
.dw-cursor.is-visible { opacity: 1; }
.dw-cursor svg { display: block; width: 20px; height: 20px; transform-origin: 3px 2px; transition: transform 0.12s ease; }
.dw-cursor path { fill: #111; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
.dw-cursor.is-clicking svg { transform: scale(0.84); }
.dw-click {
  position: absolute; left: 0; top: 0; z-index: 9; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: rgba(0, 113, 245, 0.32); opacity: 0; pointer-events: none;
}
.dw-click.is-on { animation: iw-ripple 0.5s ease-out; }

/* Fast-forward: hero-review.js speeds its own waits, moves and framing; these are the few
   transitions it does not set itself, shortened to keep up. */
.panel__desk.is-ff .dw-click.is-on { animation-duration: 0.18s; }
.panel__desk.is-ff .dw-fchip, .panel__desk.is-ff .dw-cursor svg,
.panel__desk.is-ff .dw .dw-tmap__svg polygon { transition-duration: 0.05s; }
.dw-ff {
  position: absolute; top: 12px; right: 12px; z-index: 11; pointer-events: none;
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px;
  border-radius: 999px; background: rgba(15, 23, 42, 0.72); color: #fff;
  font: 600 11px/1 Inter, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  opacity: 0; transform: translateY(-3px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.dw-ff svg { width: 13px; height: 13px; fill: currentColor; }
.panel__desk.is-ff .dw-ff { opacity: 1; transform: none; }
.panel__desk.is-ff .dw-ff svg { animation: dw-ff 0.6s ease-in-out infinite; }
@keyframes dw-ff { 50% { opacity: 0.45; } }

/* ---------- hero panel, frame 3: the patient watches their consult ----------
   The same phone as frame 1, showing the text message, the patient portal (web/portal) at phone
   width, and the consult video as its scenes. Native 372px sizes; cw- keeps it clear of the
   form's iw- classes, though the phone shell, status bar, hand and ripple are shared. */
.panel__consult { position: absolute; left: 0; right: 0; margin-inline: auto; top: 131px; width: 328px; height: 510px; display: flex; justify-content: center; }
.panel__consult.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.panel__consult { transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

.cw {
  --brand: #0C8EDF;
  --cw-ink: #131d40;
  /* the consult player's own palette: the Boutique ink and the two tints brand.js derives
     from #0C8EDF (--brand-ink for text on paper, --brand-tile for what icons sit on) */
  --cw-ink2: #1d1a17;
  /* The headline face the "Modern" setting draws in. On the live pages it is registered as
     "SR Head" from our own Figtree cut with size-adjust: 94% and its weights mapped one step
     up; here it is plain Figtree, so the weights are written out at the value that PAINTS
     (the page asks a serif for 400, which in a sans has to be Medium). */
  --cw-head: Figtree, system-ui, sans-serif;
  --cw-bink: #0a72b4;
  --cw-tile: #cbe9fb;
  --cw-quiet: #76848c;
  --cw-muted: #5b6577;
  --cw-line: #e6ecf6;
  position: absolute; top: 0; left: 0;
  width: 372px; height: 747px;
  transform: scale(0.66129); transform-origin: 0 0;
  background: #f4f6fc; color: var(--cw-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: normal; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.cw svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the status bar's icons are solid, as on the phone in frame 1 -- .cw svg would outline them */
.cw .iw-status svg { fill: #111; stroke: none; }
.cw svg .fill { fill: currentColor; stroke: none; }
.cw img { display: block; max-width: none; }

.cw-screen { position: absolute; top: 50px; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.cw-screen.is-on { opacity: 1; }

/* 1. the text message */
.cw-screen--sms { background: #fff; }
.cw-sms__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem 0.7rem; border-bottom: 1px solid var(--cw-line); background: rgba(246, 247, 251, 0.96); }
.cw-sms__back { width: 1.15rem; height: 1.15rem; color: var(--brand); stroke-width: 2.2; }
.cw-sms__who { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; }
.cw-sms__av { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: 0.7rem; font-weight: 700; }
.cw-sms__thread { padding: 1.1rem 0.9rem; }
.cw-sms__day { display: block; text-align: center; margin-bottom: 0.9rem; font-size: 0.7rem; color: #98a1b3; }
.cw-bubble {
  max-width: 88%; padding: 0.7rem 0.9rem; border-radius: 18px 18px 18px 5px;
  background: #eceef3; color: #10162a; font-size: 0.93rem; line-height: 1.45;
}
.cw-bubble__link { display: block; margin-top: 0.35rem; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.cw-sms__meta { display: block; margin-top: 0.35rem; font-size: 0.66rem; color: #98a1b3; }

/* 2. their portal, screen 1 -- web/portal's phone layout (its @media 640 block) */
.cw-screen--portal { overflow: hidden; background: #fff; }
/* ONE topbar for every screen that has one. The practice's header does not change between
   the portal and the player -- both live pages draw it at exactly these numbers -- so drawing
   it two ways made the logo and the patient's initial jump as the animation moved between
   scenes. The -5px on the logo is the artwork's own left whitespace. */
.cw-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 0; padding: 14.6px 16px 0; }
/* `.cw img { max-width: none }` above is the more specific of the two, so the clamp needs the
   extra class or it silently does nothing -- which is how these two scenes drew the same logo
   at two widths in the first place. */
.cw .cw-topbar__logo { height: 42.6px; width: auto; max-width: 171px; margin-left: -5px; object-fit: contain; }
.cw-topbar__av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cw-tile); color: var(--cw-bink); font-size: 11px; font-weight: 600; }
.cw-main { padding: 1.1rem 1.25rem 0.4rem; }
/* The portal's hero as it is today: a small-caps welcome over the patient's name, the
   sentence under it, and the practice's colour on the words that matter. Headline style
   "Modern" -- the page's own sans rather than the boutique serif. */
/* The eyebrow and the gap under it are portal 1's own (boutique.css .hero__greeting and
   .bq-hi at phone width): 9.52px at 600 on 0.24em, with 6.4px of air below. Portal 2's hero
   follows the same pair, so the patient meets one line, not three versions of it. */
.cw-eyebrow { margin: calc(0.35rem + 10px) 0 0; font-size: 9.52px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--brand); }
.cw-hi { margin: 6.4px 0 0; font-family: var(--cw-head); font-size: calc(1.85rem - 1px);
  line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; color: var(--cw-ink); }
.cw-title { margin: 0.35rem 0 0; font-family: var(--cw-head); font-size: calc(1.32rem - 3px);
  line-height: 1.12; font-weight: 400; letter-spacing: -0.015em; color: var(--cw-ink); }
.cw-accent { color: var(--brand); font-style: italic; }
.cw-sub { margin: 0.7rem 0 0; padding-right: 20px; font-size: 0.875rem; line-height: 1.6; color: #5b6577; }

/* who prepared it: portrait, a hairline, then the three lines */
.cw-doc { display: flex; align-items: center; gap: 1rem; margin: 1.1rem 1.25rem 0 calc(1.25rem + 10px); }
.cw-doc__face { flex: none; width: calc(4rem + 6px); height: calc(4rem + 6px); border-radius: 50%;
  object-fit: cover; object-position: center top; }
.cw-doc__body { min-width: 0; padding-left: calc(1rem - 12px); border-left: 1px solid var(--iw-line); }
.cw-doc__eyebrow { margin: 0 0 0.45rem; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.17em;
  text-transform: uppercase; color: #8b93a3; }
.cw-doc__name { margin: 0; font-family: var(--cw-head); font-size: 1.12rem; font-weight: 400; letter-spacing: -0.012em; color: var(--cw-ink); }
.cw-doc__title { margin: 0.1rem 0 0; font-size: 0.8rem; font-weight: 300; color: #8b93a3; }
.cw-media { position: relative; margin-top: 1.2rem; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 1.125rem; background: #0f172a; }
.cw-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-media__haze { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 40, 0.12) 0%, rgba(10, 18, 40, 0.5) 100%); }
.cw-cta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: calc(0.85rem - 1px) calc(1.4rem - 1px); border-radius: 999px;
  background: var(--brand); color: #fff; font-size: calc(0.9rem - 1px); font-weight: 400; white-space: nowrap;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--brand) 40%, transparent); transition: transform 0.15s ease, background-color 0.15s ease;
}
.cw-cta svg { width: 0.95rem; height: 0.95rem; color: #fff; }
.cw-cta.is-pressed { transform: translate(-50%, -50%) scale(0.96); background: var(--brand-dark); }
.cw-side { margin: 1.35rem 1.25rem 0; padding: 1.15rem 1rem 0.4rem; border-radius: 1.1rem;
  background: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); }
.cw-side h3 { margin: 0 0 0.6rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: #6b7280; }
.cw-disc { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0; }
.cw-disc__ic { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }
.cw-disc__ic svg { width: 1.15rem; height: 1.15rem; }
/* one tile colour, the practice's -- the real page stopped colouring each row differently */
.cw-disc__ic--a, .cw-disc__ic--b, .cw-disc__ic--c {
  background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); }
.cw-disc + .cw-disc { border-top: 1px solid var(--iw-line); }
.cw-disc__tx { display: grid; gap: 0.1rem; min-width: 0; }
.cw-disc__tx strong { font-size: 0.95rem; font-weight: 600; color: var(--cw-ink); }
.cw-disc__tx small { font-size: 0.78rem; color: #6b7280; }
.cw-disc__go { width: 1.05rem; height: 1.05rem; margin-left: auto; color: #b6c0d2; }

/* 3. the consult player -- web/consult's phone layout, in the Boutique design with the
   "Modern" headline style. The sizes are the live player's own, measured at 372px, so the
   mock and the page a patient actually opens stay the same drawing. */
.cw-screen--player { overflow: hidden; background: #f1f7fb; padding: 0 16px; }
/* the screen's gutter is for its content; the shared topbar brings its own */
.cw-screen--player .cw-topbar { margin: 0 -16px; }
/* the stepper */
.cw-steps { display: flex; margin: 0 -8px; padding: 44px 0 0; }
.cw-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cw-step:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 1px; background: #dbe4ea; }
.cw-step i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px #d7e1e8; color: #8797a1; font-size: 13.6px; font-style: normal; font-weight: 600; }
.cw-step span { font-size: 11.52px; font-weight: 500; line-height: 14px; color: #7e8f9a; white-space: nowrap; }
.cw-step.is-active i { background: var(--brand); box-shadow: none; color: #fff; }
.cw-step.is-active span { color: var(--cw-ink2); }

/* who prepared it -- the same row as portal 1's, at the player's sizes */
.cw-prep { display: flex; align-items: center; gap: 16px; margin-top: 45.3px; padding-left: 14.4px; }
.cw-prep__img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center top; }
.cw-prep__tx { display: block; min-width: 0; }
.cw-prep__eyebrow { display: block; margin: 2px 0 10px; font-size: 9.08px; font-weight: 600; line-height: 11px; letter-spacing: 0.17em; text-transform: uppercase; white-space: nowrap; color: var(--cw-bink); }
.cw-prep__name { display: block; font-family: var(--cw-head); font-size: 20px; font-weight: 400; line-height: 25px; letter-spacing: -0.012em; color: var(--cw-ink2); }
.cw-prep__role { display: block; margin-top: 1px; font-size: 13px; font-weight: 300; line-height: 15px; color: var(--cw-quiet); }

/* the practice's numbers: four columns divided by hairlines, on a breath of the brand */
.cw-stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin: 15.5px 4px 0; padding: 10px 0; border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.cw-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; min-width: 0; padding: 0 6px; }
.cw-stat + .cw-stat { border-left: 1px solid #dde6ec; }
.cw-stat__ic { width: 24px; height: 24px; color: var(--cw-bink); stroke-width: 1.6; }
/* The Google mark keeps its own colours. Qualified with `svg` to outrank `.cw svg` above,
   which is the MORE specific of the two and was stroking every one of its four paths in the
   page's ink -- the same reason the player's own stylesheet reaches for !important here. */
.cw svg.cw-stat__g { width: 22px; height: 22px; stroke: none; }
.cw-stat__stars { font-size: 15px; line-height: 24px; letter-spacing: 2px; color: var(--cw-bink); }
.cw-stat b { font-family: var(--cw-head); font-size: 20px; font-weight: 400; line-height: 21px; color: var(--cw-ink2); }
.cw-stat small { font-size: 8px; line-height: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #a3a6a8; }

.cw-vid {
  position: relative; margin-top: 22.9px; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 16px; background: #0b1020; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
  transition: margin 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.6s ease;
}
.cw-vid__el { width: 100%; height: 100%; object-fit: cover; display: block; background: #0b1020; }
.cw-vid__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transition: opacity 0.3s ease;
}
.cw-vid__play svg { width: 26px; height: 26px; margin-left: 4px; color: var(--brand); }
.cw-vid.is-playing .cw-vid__play { opacity: 0; }
.cw-vid__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.5rem; padding: 1.7rem 0.95rem 0.7rem;
  background: linear-gradient(to top, rgba(10, 18, 32, 0.78), rgba(10, 18, 32, 0));
  color: #fff; transition: opacity 0.4s ease;
}
.cw-vid__ic { width: 0.95rem; height: 0.95rem; flex: none; }
.cw-vid__cc { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 3px; padding: 0 0.2rem; }
.cw-vid__time { font-size: 0.78rem; white-space: nowrap; }
.cw-vid__track { position: relative; flex: 1; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); }
.cw-vid__track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: #fff; }
.cw-take { display: flex; align-items: flex-start; gap: 13px; margin-top: 28px; padding-bottom: 14px; border-bottom: 1px solid #e2eaef; }
.cw-take__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--cw-tile); color: var(--cw-bink); }
.cw-take__ic svg { width: 18px; height: 18px; }
.cw-take__tx { display: block; min-width: 0; }
.cw-take__tx small { display: block; margin: 2px 0 6px; font-size: 8.5px; font-weight: 500; line-height: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cw-bink); }
/* one line, as it is on the page. nowrap is a guard, not the fit: at the page's own size in
   the page's own face there is room for it. */
.cw-take__tx strong { display: block; font-family: var(--cw-head); font-size: 17px; font-weight: 400; line-height: 19.7px; letter-spacing: -0.012em; white-space: nowrap; color: var(--cw-ink2); }

/* Once it is playing, the page falls away and the consult fills the phone. It keeps its own
   shape against black rather than being cropped to the phone's -- the findings and the pricing
   are wide graphics, and cover would cut their edges off. */
.cw-fade { transition: opacity 0.5s ease; }
.cw-screen--player.is-full .cw-fade { opacity: 0; }
.cw-vid.is-full {
  position: absolute; inset: 0; z-index: 4; margin: 0; border-radius: 0; aspect-ratio: auto;
  background: #0b1020; box-shadow: none;
}
.cw-vid.is-full .cw-vid__el { object-fit: contain; background: #0b1020; }
/* full-screen, the controls sit at the foot of the phone rather than under the picture */
.cw-vid.is-full .cw-vid__bar { padding-bottom: 2.2rem; background: linear-gradient(to top, rgba(10, 18, 32, 0.9), rgba(10, 18, 32, 0)); }

/* the portal's white-out and 3-2-1 as the consult starts */
.cw-countdown {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(244, 246, 252, 0.93); backdrop-filter: blur(6px);
  /* Its own rounded corners: a backdrop-filter layer is not clipped by the screen's radius.
     .cw is scaled 0.66129 into the screen, so the radius has to be written PRE-scale -- at a
     flat 38px it painted as 25px, squarer than the screen, and the overlay's corners spilled
     onto the bezel as four white wedges. 38 / 0.66129 = 57.46. */
  border-radius: 57.5px;
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.cw-countdown.is-on { opacity: 1; }
.cw-countdown__n { font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--brand); letter-spacing: -0.03em; }
.cw-countdown.is-on .cw-countdown__n { animation: cw-pulse 1s ease-out; }
@keyframes cw-pulse {
  0% { transform: scale(0.6); opacity: 0; }
  30% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.cw-countdown__t { margin-top: 1rem; font-size: 1.05rem; font-weight: 700; color: var(--cw-ink); }
.cw-countdown { flex-direction: column; display: flex; align-items: center; justify-content: center; text-align: center; }
.cw-countdown__h { margin-top: 0.3rem; font-size: 0.85rem; color: #5b6577; }

/* The consult, laid over the phone's own player slot. */
.panel__player {
  position: absolute; z-index: 7; overflow: hidden; border-radius: 10px; background: #0b1020;
  opacity: 0; pointer-events: none;
  transform-origin: 0 0;                     /* scaled on to the slot, see layOut() */
  transition: opacity 0.35s ease;
}
.panel__player.is-on { opacity: 1; }
.panel__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b1020; }
/* the consult's subtitles, as the player draws them */
.panel__caps {
  position: absolute; left: 0; right: 0; bottom: 8.5%; z-index: 4;   /* as the player sets them */
  display: flex; justify-content: center; padding: 0 5%; text-align: center; pointer-events: none;
}
.panel__caps.is-empty { display: none; }
.panel__caps span {
  display: inline-block; max-width: 94%; padding: 0.12em 0.42em 0.26em;
  border-radius: 0.34em; background: #204fad; color: #fff;
  font-family: Montserrat, "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 8px; font-weight: 400; line-height: 1.3; letter-spacing: 0.002em;
}

@media (prefers-reduced-motion: reduce) {
  .iw-screen, .iw-hand, .iw-cta, .iw-pill, .iw-sheet, .iw-dim { transition: none; }
}


/* ---------- section 2: the gap ----------
   Three statements on a pale band, directly under the hero. No product, no picture: this is the
   only place on the page that describes the problem, and it earns its keep by being read in one
   pass. The marks are the hero's own -- the same tile, the same stroke, and literally the same
   chair artwork -- so the two sections read as one page rather than two designs. */
/* The band does not re-paint the hero's artwork any more -- it fades IN over it. Transparent
   where it starts, so what shows is the one image continuing, and its own colour by 260px
   down, which is far enough that the hero's last row (near-white at the edges, deep blue two
   thirds over) is given up gradually rather than at a line. */
.gap {
  position: relative;
  background: linear-gradient(180deg,
    rgba(243, 248, 254, 0) 0px, rgba(243, 248, 254, 1) 260px, #e9f2fd 100%);
}
.gap__inner { position: relative; z-index: 1; max-width: 1536px; margin: 0 auto; padding: 76px 80px 104px; }
/* The section's content sits on a white ground: square-edged, opaque where it starts and 10%
   by the foot, so the band and the hero's dissolve still read around and through it. It is
   the content column inset another 40px, not the page, so the background stays visible down
   both sides. z-index -1 keeps it inside .gap__inner's own stacking context -- behind the
   copy, still above the section's dissolve. */
.gap__inner::before {
  content: ""; position: absolute; z-index: -1; inset: 5px 55px 5px;
  border-radius: 24px 24px 0 0;   /* rounded where it arrives, square where it fades out */
  pointer-events: none;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.1) 100%);
}
/* the hero's own eyebrow, to the letter -- written in normal case, shown in caps */
.gap__eyebrow {
  margin: 0 0 10px; text-align: center;
  font-size: 13px; line-height: 20px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue);
}
.gap__title {
  margin: 0; text-align: center;
  font-size: 41px; line-height: 50px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink);
}
.gap__cols {
  list-style: none; margin: 62px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* the rules run the height of the row, which is the tallest column -- as they do in the mock */
.gap__col { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 46px; }
.gap__col + .gap__col { border-left: 1px solid rgba(31, 124, 242, 0.15); }
.gap__icon {
  flex: none; display: grid; place-items: center; width: 73.6px; height: 73.6px; border-radius: 18.4px;
  background: linear-gradient(180deg, #eef5fe 0%, #e4eefc 100%);
}
.gap__icon svg {
  width: 41.4px; height: 41.4px;
  fill: none; stroke: #2b7ef1; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* Stroke width is in the viewBox's units, so a mark drawn larger is also drawn HEAVIER -- at
   41.4px each unit paints 1.725px. These are set to the weight they should reach the screen
   at, not to a multiplier of each other:
     calendar  1.45 x 1.725 = 2.5px      the cursor's arrow  1.3  -> 2.24px
     its rays  1.55 x 1.725 = 2.67px     -- open lines, so they need a touch more than the
                                            arrow, which is closed and gains weight from both
                                            sides of its own outline. */
.gap__col:nth-child(1) .gap__icon svg { stroke-width: 1.45; }
.gap__col:nth-child(2) .gap__icon svg { stroke-width: 1.3; }
.gap__col:nth-child(2) .gap__icon svg .ray { stroke-width: 1.55; }
/* the chair lies low and wide, so it runs larger than a sprite mark -- the hero's own allowance */
.gap__icon--art img { width: 49.7px; height: auto; }
.gap__lead { margin: 28px 0 0; font-size: 20px; line-height: 27px; font-weight: 700; letter-spacing: -0.018em; color: var(--ink); }
.gap__body { margin: 13px 0 0; max-width: 20.5em; font-size: 17.5px; line-height: 29px; font-weight: 400; letter-spacing: -0.006em; color: var(--body); }

/* ---------- section 3: how it works ----------
   The four steps at full size, with REAL screens out of the running app rather than drawn
   stand-ins -- a dentist who is later shown the actual product should recognise it. Steps 1
   and 4 are the patient's, so they are framed in a handset; 2 and 3 are the practice's and
   the consult itself, so they sit flat. The shots run off the bottom of their cards, which
   says "there is more of this" without asking a marketing page to show all of it. */
/* Starts on the colour the band above it ENDS on (#e9f2fd, measured, not guessed) and
   reaches its own paper 190px down, so the two sections meet without a line. */
.hiw { background: linear-gradient(180deg, #e9f2fd 0%, #f4f8fd 190px); }
/* The heading is ranged left against the first card's own edge rather than centred over all
   four. */
.hiw__head { margin: 0 0 52px; }
/* No panel: the steps sit on the band itself, on the page's own 1536/80 measure so the
   heading lines up with the sections above rather than being inset by a card's padding. */
.hiw__inner { max-width: 1536px; margin: 0 auto; padding: 91px 80px 99px; }
/* the hero's own eyebrow, to the letter */
.hiw__eyebrow {
  margin: 0 0 10px;
  font-size: 13px; line-height: 20px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue);
}
.hiw__title {
  margin: 0;
  font-size: 46px; line-height: 54px; font-weight: 700; letter-spacing: -0.032em; color: var(--ink);
}

.hiw__steps {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.hiw__step { position: relative; padding-top: 22px; }
.hiw__num {
  position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 0 0 6px #fff, 0 6px 16px rgba(31, 124, 242, 0.3);
}
.hiw__card {
  position: relative; z-index: 1; height: 504px; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 44px 26px 0; border-radius: 24px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(22, 45, 95, 0.05),
              0 18px 44px rgba(22, 45, 95, 0.06), 0 2px 6px rgba(22, 45, 95, 0.04);
}
.hiw__lead { margin: 0; text-align: center; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.021em; color: var(--ink); }
.hiw__body { margin: 10px 0 0; text-align: center; font-size: 15px; line-height: 26px; color: var(--body); }

/* The stills in these cards must be delivered at exactly 2x the width they are DISPLAYED at
   -- 548px for the flat panels (274px content box) and 382px for the handset shots (a 203px
   frame less 6px of bezel each side). A capture straight off the app is 4-6x that, and the
   browser downscales it by ~0.25 with its fast filter, which undersamples thin strokes and
   makes the small UI text in them visibly break up. At 2x the reduction is a clean 2:1 at
   DPR 1 and nothing at all at DPR 2. Resample with Lanczos, not by handing the browser a
   bigger file. */
/* The shots hang off the BOTTOM of their cards rather than being pushed down by the copy
   above them: margin-top: auto pins each one to the card's foot, so a title or a sentence that
   runs a line longer moves nothing, and every screen still runs past the edge and reads as
   continuing below the fold. */
.hiw__shot { margin-top: auto; height: 316px; overflow: hidden; }
/* flat panels: the practice's screen and the consult, as they are */
.hiw__shot--flat img {
  display: block; width: 100%; height: 326px; object-fit: cover; object-position: top;
  border-radius: 13px; box-shadow: 0 16px 34px rgba(22, 45, 95, 0.16);
}
/* ...except step 2, whose capture is the grading panel photographed ON WHITE, corners and
   all. Rounding it again clips a 13px arc out of that white margin and the lift paints a
   grey crescent just outside it -- against a white card, all you see is the crescent. The
   panel in the picture already has its own corner and border; it needs no second one. */
.hiw__step:nth-child(2) .hiw__shot--flat img { border-radius: 0; box-shadow: none; }
/* the handset, the hero's phone at this card's size */
.hiw__phone {
  position: relative; display: block; width: 203px; margin: 0 auto; padding: 6px;
  border-radius: 32px;
  background: linear-gradient(145deg, #30343b 0%, #121418 55%, #0b0c0f 100%);
  box-shadow: inset 0 0 0 1px #464b54, inset 0 0 0 2px #0a0b0d, 0 20px 40px rgba(22, 45, 95, 0.2);
}
.hiw__phone img { display: block; width: 100%; height: auto; border-radius: 26px; }

/* Step 1 only. The form is shorter than the handset, so left alone it finishes above the
   shot's cut and leaves a strip of the page's own background showing under it. Its last row
   sits at 0.749 of the shot's height, so the window is opened 16px and the handset's own
   drop taken off to land that row exactly on the card's bottom edge -- measured, not
   guessed, and re-measured when the handset widened. */
.hiw__step:first-child .hiw__phone { margin-top: 0; }

/* ---------- section 5: what the patient receives ----------
   The showpiece, and the only section that takes the brand as its whole ground rather than as
   an accent. Both shots are the real product: the consult player with its takeaways filled in,
   and the payment options off the patient's own plan page. */
.wpr {
  background: #1667d6 url("assets/wpr/bg.webp?v=1cbe8102b4") center / cover no-repeat;
  color: #fff;
}
.wpr__inner {
  max-width: 1536px; margin: 0 auto; padding: 116px 80px 124px;
  display: grid; grid-template-columns: minmax(0, 1fr) 672px; align-items: center; gap: 44px;
}
.wpr__copy { max-width: 620px; }
.wpr__title {
  /* a step above the page's other section headings (46/54), since this section is the
     showpiece. Line-height scales with it at the same 1.174 ratio, or the two lines close up. */
  margin: 0; font-size: 53px; line-height: 62px; font-weight: 700; letter-spacing: -0.04em;
  color: #fff;
}
.wpr__lead {
  margin: 26px 0 0; max-width: 560px;
  font-size: 19px; line-height: 31px; font-weight: 400; letter-spacing: -0.006em;
  color: rgba(255, 255, 255, 0.92);
}
.wpr__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 15px; }
.wpr__list li {
  display: flex; align-items: center; gap: 15px;
  font-size: 18px; line-height: 26px; letter-spacing: -0.008em; color: #fff;
}
.wpr__tick {
  flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.wpr__tick svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wpr__cta {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 40px;
  padding: 13px 34px 13px 13px; border-radius: 999px;
  background: #fff; color: var(--ink); text-decoration: none;
  font-size: 19px; font-weight: 700; letter-spacing: -0.014em;
  box-shadow: 0 16px 34px rgba(8, 42, 100, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wpr__cta:hover { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(8, 42, 100, 0.26); }
/* the rule above sets display, which outranks the UA's [hidden] -- so say it here too,
   and the button parks on one attribute rather than on a deleted block of CSS */
.wpr__cta[hidden] { display: none; }
.wpr__play {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: #fff;
}
.wpr__play svg { width: 18px; height: 18px; margin-left: 2px; }
.wpr__play svg .fill { fill: currentColor; stroke: none; }

/* The laptop. Straight on, as the reference is -- and flat, because a 3D turn puts the
   element on a compositor layer that is rasterised BEFORE it is transformed, which softens
   real UI text badly (measured at less than half the edge contrast). */
/* The art is one object now. The simulation used to sit behind the laptop's top-right
   shoulder, which is why the laptop was held to 88% and pushed down 112px; the smile plan
   carries that before/after as it scrolls, so the laptop takes the whole column. */
.wpr__art { position: relative; }
.wpr__laptop { position: relative; z-index: 2; width: 100%; }
.wpr__lid {
  padding: 11px 11px 12px; border-radius: 15px 15px 5px 5px;
  background: linear-gradient(158deg, #3c424a 0%, #16191e 58%, #0b0d10 100%);
  box-shadow: inset 0 0 0 1.4px #5c626c, inset 0 0 0 2.8px #0a0b0d,
              0 44px 84px rgba(6, 30, 78, 0.42), 0 10px 24px rgba(6, 30, 78, 0.22);
}
/* The screen cycles through three stills. The first is in flow and sets the height; the
   other two are laid over it and the three cross-fade on a 15s loop, 5s each with a 0.8s
   dissolve. White underneath, because two images fading past each other both sit below
   full opacity for a moment and the lid's black would show through the dip. */
.wpr__screens { position: relative; border-radius: 5px; overflow: hidden; background: #fff; }
.wpr__screen { display: block; width: 100%; height: auto; }
.wpr__screen + .wpr__screen { position: absolute; inset: 0; }
/* A 20s loop: portal 5s, consultation 5s, smile plan 10s, with 0.8s dissolves. The plan
   gets the double slot because it is the one that scrolls -- it has the most page to show,
   and at 5s the travel reads as a blur rather than as someone reading it. Each slide keeps
   its own keyframes rather than sharing one set on a delay, because the slots differ; the
   three opacities still sum to 1 at every moment, so no dissolve dips to the lid's black. */
.wpr__screen { opacity: 0; animation: 20s linear infinite both; }
.wpr__screen:nth-child(1) { animation-name: wpr-scr-1; }
.wpr__screen:nth-child(2) { animation-name: wpr-scr-2; }
.wpr__screen:nth-child(3) { animation-name: wpr-scr-3; }
@keyframes wpr-scr-1 {           /*  0.0 - 5.0s  */
  0%, 21%   { opacity: 1; }
  25%, 96%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes wpr-scr-2 {           /*  5.0 - 10.0s  */
  0%, 21%   { opacity: 0; }
  25%, 46%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes wpr-scr-3 {           /* 10.0 - 20.0s  */
  0%, 46%   { opacity: 0; }
  50%, 96%  { opacity: 1; }
  100%      { opacity: 0; }
}
/* The smile plan is the whole page, not a screenful, and it scrolls from its top -- practice
   logo and all -- to its foot while it is up: still for the dissolve in, 8.4s of travel,
   still again for the dissolve out. 64.03% is the image's own height less the screen's, over
   the image's height -- a ratio of the two assets' shapes, so it holds at any width the
   section is drawn at. */
.wpr__screen--scroll { overflow: hidden; }
.wpr__screen--scroll img {
  display: block; width: 100%; height: auto;
  animation: wpr-plan-scroll 20s linear infinite both;
}
@keyframes wpr-plan-scroll {
  0%, 53%   { transform: translateY(0); }   /* a beat at the top after the dissolve ends at 50% */
  92%, 100% { transform: translateY(-64.03%); }
}

/* The tap on the portal's start button. Both marks are placed at the button's own centre in
   the capture -- 33.69% across, 56.99% down, measured off the live page at the width it was
   shot at -- and sized as a share of the screen, so they stay on the button however wide the
   section is drawn. Everything happens inside slide 1's 5s: the cursor arrives, presses, and
   both are gone by 4.2s, which is when the consultation starts dissolving in behind it. */
.wpr__cursor, .wpr__tap { position: absolute; z-index: 2; opacity: 0; }
/* Each tap is placed at its own button's centre in its own capture, measured off the page at
   the width it was shot at. The second one runs on the same keyframes five seconds later --
   the loop's slots are 5s, so a delay is all that differs -- which puts it on the takeaways'
   button at 8.5s and away by 9.2s, when the smile plan starts dissolving in. */
.wpr__cursor--a, .wpr__tap--a { left: 33.69%; top: 56.99%; }
.wpr__cursor--b, .wpr__tap--b { left: 80.90%; top: 73.14%; }
.wpr__cursor {
  width: 4.6%; aspect-ratio: 1;
  animation: wpr-cursor 20s linear infinite both;
}
.wpr__cursor svg {
  display: block; width: 100%; height: 100%;
  fill: #fff; stroke: #1b2437; stroke-width: 1.3; stroke-linejoin: round;
  filter: drop-shadow(0 1.5px 3px rgba(12, 30, 66, 0.38));
}
/* the tip of the pointer, not its box, is what has to land on the button */
/* No dwell over the button: the press starts the instant the pointer arrives. The wait that
   used to sit between them is spent before it appears instead, so the screen still holds its
   five seconds -- hidden to 2.0s, in by 2.2s, travelling to 3.6s, pressed, gone by 4.2s. */
@keyframes wpr-cursor {
  0%, 10%   { opacity: 0; transform: translate(-22.5%, -10.83%) translate(250%, 210%); }
  11%       { opacity: 1; transform: translate(-22.5%, -10.83%) translate(250%, 210%);
              animation-timing-function: cubic-bezier(0.5, 0.02, 0.3, 1); }   /* eased BOTH ends: a
              strong ease-out arrives at ~60% of the travel time and creeps the rest, which
              is the dwell by another name */
  18%       { opacity: 1; transform: translate(-22.5%, -10.83%) translate(0, 0) scale(1); }
  19%       { opacity: 1; transform: translate(-22.5%, -10.83%) translate(0, 0) scale(0.86); }
  20%       { opacity: 1; transform: translate(-22.5%, -10.83%) translate(0, 0) scale(1); }
  21%, 100% { opacity: 0; transform: translate(-22.5%, -10.83%) translate(0, 0) scale(1); }
}
/* The hero's own tap: a soft disc that swells and fades -- same 0.25 -> 1.9, same 0.55s
   ease-out (2.75% of this loop). The hero blooms brand blue because it taps a white message
   bubble; both buttons here ARE that blue, so the bloom is white instead. Same weight
   against its ground, which is the point of it. */
.wpr__tap {
  width: 4.05%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: wpr-tap 20s linear infinite both;
}
@keyframes wpr-tap {
  0%, 17.9%    { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  18%          { opacity: 0.9; transform: translate(-50%, -50%) scale(0.25);
                 animation-timing-function: ease-out; }   /* fires with the press, at 3.6s */
  20.75%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}
/* AFTER both animation shorthands, which reset animation-delay to 0 and would otherwise win
   on source order at equal specificity. */
.wpr__cursor--b, .wpr__tap--b { animation-delay: 5s; }

/* The smile plan's chat bubble, to the portal's own measurements -- 58px circle, 26px in from
   each edge, a 28px mark and a 20px badge on a 2px white ring -- all restated as shares of
   the 1440x806 the page was shot at, so it sits where the real one does at any width. It
   shares slide 3's keyframes, so it is there for exactly as long as that screen is. */
.wpr__fab {
  position: absolute; z-index: 2; right: 1.806%; bottom: 3.226%;
  width: 4.028%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: #0C8EDF; color: #fff;
  box-shadow: 0 2.4% 5.9% rgba(20, 16, 12, 0.3);
  opacity: 0; animation: wpr-scr-3 20s linear infinite both;
}
.wpr__fab svg {
  width: 48.3%; height: 48.3%;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .wpr__screen, .wpr__screen--scroll img, .wpr__cursor, .wpr__tap, .wpr__fab { animation: none; }
  .wpr__screen, .wpr__cursor, .wpr__tap, .wpr__fab { opacity: 0; }
  .wpr__screen:nth-child(2) { opacity: 1; }   /* the consultation, as it was before */
}
/* the deck, wider than the lid and tapering, the way a laptop reads from straight on */
.wpr__base {
  position: relative; width: 111%; margin-left: -5.5%; height: 15px;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, #e2e6ec 0%, #aeb5bf 34%, #7b828d 100%);
  box-shadow: 0 16px 26px rgba(6, 30, 78, 0.3);
}
/* the dip a thumb opens it by */
.wpr__notch {
  position: absolute; left: 50%; top: 0; width: 15%; height: 5px; margin-left: -7.5%;
  border-radius: 0 0 7px 7px; background: rgba(12, 20, 34, 0.3);
}

/* ---------- section 10: pricing ----------
   Two cards on white, the group one filled so the multi-location plan is where the eye lands.
   The currency control is a native <select> dressed as a pill: two options today and a third
   when the UK arrives, and a real select keeps the keyboard and mobile behaviour for free. */
/* The hero's own gradient artwork, mirrored. In the hero its colour sits to the RIGHT of the
   headline; flipped, it gathers on the left, which is where the white Practice card stands --
   so that card is lifted off a wash of blue while the filled Group card keeps a paler ground
   to read against. One image, no second asset: scaleX(-1) on a pseudo-element. */
.prc { position: relative; background: #f8fbfd; }
.prc::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* stretched to the section's full height rather than left at its own. The artwork is
     1024px tall and this section is taller, so an auto height ended 88px short and the
     base colour took over at a visible step -- measured at 15 units. The blob is soft
     enough that the vertical scale cannot be seen, and it holds at any section height. */
  background: url("assets/hero-gradient.webp?v=515dc628b3") 100% 0 / max(100%, 1536px) 100% no-repeat;
  transform: scaleX(-1);
}
.prc__inner { position: relative; z-index: 1; max-width: 1536px; margin: 0 auto; padding: 108px 80px 116px; }
.prc__title {
  margin: 0; text-align: center;
  font-size: 46px; line-height: 54px; font-weight: 700; letter-spacing: -0.032em; color: var(--ink);
}
.prc__accent { color: var(--blue); }
.prc__sub { margin: 14px 0 0; text-align: center; font-size: 19px; line-height: 30px; color: var(--body); }
/* Only a phone breaks this line; see the ≤560 block. */
.prc__sub-br { display: none; }

.prc__cur { position: relative; width: max-content; margin: 26px auto 0; }
.prc__cur-lab {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.prc__cur-sel {
  appearance: none; -webkit-appearance: none;
  padding: 9px 38px 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer;
}
.prc__cur-sel:hover { border-color: #cfdcef; }
.prc__cur-sel:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.prc__cur-chev {
  position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  pointer-events: none; fill: none; stroke: var(--muted); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.prc__cards {
  margin: 44px auto 0; max-width: 1060px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch;
}
.prc__card {
  display: flex; flex-direction: column;
  padding: 34px 34px 32px; border-radius: 24px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 44px rgba(22, 45, 95, 0.05);
}
.prc__card--group {
  color: #fff;
  background: linear-gradient(152deg, #2a8bff 0%, #1f7cf2 46%, #145fd0 100%);
  box-shadow: 0 26px 60px rgba(20, 80, 190, 0.26);
}
.prc__label {
  align-self: flex-start; padding: 6px 13px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
.prc__card--group .prc__label { background: rgba(255, 255, 255, 0.2); color: #fff; }
.prc__name {
  margin: 18px 0 0;
  font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -0.028em; color: var(--ink);
}
.prc__card--group .prc__name { color: #fff; }
.prc__price {
  margin: 6px 0 0;
  font-size: 46px; line-height: 56px; font-weight: 800; letter-spacing: -0.035em; color: var(--blue);
}
.prc__card--group .prc__price { color: #fff; }
.prc__per { margin: 2px 0 0; font-size: 15px; line-height: 24px; color: var(--muted); }
.prc__card--group .prc__per { color: rgba(255, 255, 255, 0.82); }
.prc__meta {
  margin: 16px 0 0; padding-bottom: 22px; border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 26px; color: var(--body);
}
.prc__card--group .prc__meta { color: rgba(255, 255, 255, 0.88); border-bottom-color: rgba(255, 255, 255, 0.22); }
.prc__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 15px; }
.prc__list li {
  display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 12px;
  font-size: 16px; line-height: 26px; color: var(--ink-2);
}
.prc__card--group .prc__list li { color: #fff; }
.prc__tick {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--blue-soft); color: var(--blue);
}
.prc__card--group .prc__tick { background: rgba(255, 255, 255, 0.2); color: #fff; }
.prc__tick svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
/* the button sits on the card's foot however long the list above it runs */
.prc__cta {
  margin-top: auto; display: block; text-align: center; text-decoration: none;
  padding: 16px 20px; border-radius: 999px;
  border: 1.5px solid #a9c8f3; color: var(--blue); background: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.prc__list + .prc__cta { margin-top: 30px; }
.prc__cta:hover { background: var(--blue-soft); transform: translateY(-1px); }
.prc__cta--solid { border-color: #fff; background: #fff; }
.prc__cta--solid:hover { background: #f2f7ff; border-color: #f2f7ff; }
.prc__foot { margin: 30px 0 0; text-align: center; font-size: 15px; line-height: 25px; color: var(--muted); }

/* ---------- section 11: FAQ ----------
   Two columns: the ask on the left with a photograph under it, the answers on the right. The
   rows are <details> with a shared name, so one-open-at-a-time is the browser's own behaviour
   and the section works with no script; older browsers just allow more than one open. */
.faq { background: #fff; }
.faq__inner {
  max-width: 1536px; margin: 0 auto; padding: 104px 80px 112px;
  display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 76px; align-items: start;
}
/* the page's section eyebrow, to the letter -- same as .gap__eyebrow and .hiw__eyebrow */
.faq__eyebrow {
  margin: 0 0 10px;
  font-size: 13px; line-height: 20px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue);
}
.faq__title {
  margin: 0;
  font-size: 46px; line-height: 54px; font-weight: 700; letter-spacing: -0.035em; color: var(--ink);
}
.faq__accent { color: var(--blue); }
.faq__sub { margin: 16px 0 0; font-size: 18px; line-height: 29px; color: var(--body); max-width: 360px; }

/* the photograph carries its own blue shape and its own transparency, so it needs no card */
.faq__art { position: relative; margin: 34px 0 0; }
.faq__art img { display: block; width: 100%; height: auto; }
.faq__pill {
  position: absolute; left: -10px; bottom: 34px; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px 13px 13px; border-radius: 16px;
  background: #fff; box-shadow: 0 14px 34px rgba(22, 45, 95, 0.13), 0 1px 3px rgba(22, 45, 95, 0.06);
  font-size: 14.5px; line-height: 20px; font-weight: 500; color: var(--ink-2);
  /* wide enough for the line to stay whole -- at 250px it broke after "your" and left
     "practice." alone on a second line */
  max-width: max-content;
}
.faq__pill-ic {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 11px; background: var(--blue-soft); color: var(--blue);
}
.faq__pill-ic svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* the rows */
.faq__list { display: grid; gap: 14px; }
.faq__item {
  border-radius: 18px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.18s ease, background-color 0.18s ease;
}
.faq__item[open] {
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px #d8e8fd, inset 3px 0 0 0 var(--blue);
}
.faq__q {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; gap: 18px;
  padding: 22px 26px; cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; border-radius: 18px; }
.faq__ic {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--blue-soft); color: var(--blue);
}
.faq__ic svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.faq__ic svg .fill { fill: currentColor; stroke: none; }
.faq__qt { font-size: 19px; line-height: 27px; font-weight: 700; letter-spacing: -0.016em; color: var(--ink); }
/* the plus, drawn rather than set: the upright bar goes when the row opens */
.faq__sign { position: relative; width: 22px; height: 22px; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--blue); border-radius: 1px;
}
.faq__sign::before { width: 17px; height: 2.2px; margin: -1.1px 0 0 -8.5px; }
.faq__sign::after {
  width: 2.2px; height: 17px; margin: -8.5px 0 0 -1.1px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.faq__item[open] .faq__sign::after { transform: scaleY(0); opacity: 0; }
.faq__a { padding: 0 26px 24px 88px; }
.faq__a p { margin: 0; font-size: 16.5px; line-height: 27px; color: var(--body); }

/* ---------- section 12: closing CTA ----------
   A short band, not a full screen: the page has already made its case by here, so this is a
   door rather than another room. One button, because both of the page's CTAs go to the same
   place and offering a choice between identical destinations only makes people hesitate. */
.cta {
  background: #1667d6 url("assets/cta/bg.webp?v=137d9b8da4") center / cover no-repeat;
  color: #fff;
}
.cta__inner { max-width: 1536px; margin: 0 auto; padding: 86px 80px 90px; text-align: center; }
.cta__title {
  /* no measure: both lines are meant to hold on one line each, and they fit the content box
     even at the 1280px the body is floored at */
  margin: 0 auto;
  font-size: 46px; line-height: 54px; font-weight: 700; letter-spacing: -0.032em; color: #fff;
}
.cta__sub {
  margin: 18px auto 0;
  font-size: 19px; line-height: 30px; color: rgba(255, 255, 255, 0.86);
}
.cta__btn {
  display: inline-block; margin-top: 34px;
  padding: 17px 40px; border-radius: 999px;
  background: #fff; color: var(--blue); text-decoration: none;
  font-size: 17px; font-weight: 700; letter-spacing: -0.012em;
  box-shadow: 0 16px 36px rgba(8, 42, 100, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta__btn:hover { transform: translateY(-1px); box-shadow: 0 20px 42px rgba(8, 42, 100, 0.28); }

/* ---------- section 13: footer ---------- */
/* Navy, the dashboard sidebar's own #06183e, so the page ends on the product's darkest
   surface rather than fading out. */
.ft { background: #06183e; color: #9fb2cd; }
.ft__inner {
  max-width: 1536px; margin: 0 auto;
  /* The link columns are placed by giving the grid extra RIGHT padding and a wide column gap,
     rather than by a spacer column: a spacer would still take a gap before it, and the sums
     do not leave room for both. The bottom bar keeps the normal 80px, so its rule still spans
     the full measure as it does in the design. */
  padding: 68px 200px 56px 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0 210px; align-items: start;
}
.ft__logo { display: block; width: 196px; height: auto; }
.ft__tag { margin: 22px 0 0; font-size: 17px; line-height: 27px; color: #e6edf8; }
.ft__where { margin: 12px 0 0; font-size: 14.5px; line-height: 22px; color: #8ca0bd; }
.ft__social { display: flex; align-items: center; gap: 18px; margin: 26px 0 0; }
/* Hidden until the social accounts exist (2026-10-13). To show them again, delete this line and
   turn the .ft__soc spans in each page's footer into links to the real pages. */
.ft__social { display: none; }
.ft__soc { display: grid; place-items: center; width: 22px; height: 22px; color: #a8bcd8; }
.ft__soc svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ft__soc svg .fill { fill: currentColor; stroke: none; }

.ft__h {
  margin: 0 0 18px;
  font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; color: #fff;
}
.ft__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ft__col a {
  font-size: 16px; line-height: 24px; color: #bccbe2; text-decoration: none;
  transition: color 0.15s ease;
}
.ft__col a:hover { color: #fff; }

/* the bottom rule spans the content, not the page, so it lines up with everything above it */
.ft__bar {
  max-width: 1536px; margin: 0 auto; padding: 24px 80px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.ft__copy { margin: 0; font-size: 14.5px; line-height: 22px; color: #7e93b2; }
.ft__demo {
  font-size: 14.5px; line-height: 22px; color: #bccbe2;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.ft__demo:hover { color: #fff; }


/* =============================================================================
   MOBILE AND TABLET
   =============================================================================
   The site was built desktop-only -- `body { min-width: 1280px }` above says so
   outright -- and everything up to here assumes a 1536px measure with 80px
   gutters. This layer unlocks that floor and restacks each section. It is
   deliberately the LAST thing in the file so every rule wins on source order
   without needing weight it has not earned.

   THE BREAKPOINT IS 1279px, not something phone-sized, because the floor bites
   the moment the viewport is narrower than 1280 and the result is a page that
   scrolls sideways. Anything below the floor has to be handled, or a 1024px
   laptop gets the worst of both.

   Three tiers:
     <= 1279px   structural -- every multi-column grid becomes one column
     700-1279px  puts the card grids back to 2 or 3 across, where there is room
     <= 560px    type and spacing only; the structure is already right

   THE HERO PANEL cannot reflow. It is a fixed 687x675 stage with dozens of
   absolutely-positioned, px-sized parts animating inside it, so it is SCALED:
   .hero__visual clips and .panel is transformed by --hs. CSS cannot divide a
   length by a length to get the unitless number scale() needs, so fit.js
   measures the column and sets --hs exactly; the stepped queries at the bottom
   are the no-JS fallback and each is sized for the NARROWEST screen in its
   bucket, which is why they leave a little air at the top of each one.

   This is the pass that makes the page usable on a phone, not the pass that
   makes it beautiful on one. Fine-tuning is expected.
   ========================================================================== */

@media (max-width: 1279px) {
  body { min-width: 0; }
  /* The hero artwork keeps its 1536px width here and runs off the left rather than scaling to
     the viewport, which would shrink the gradient away to nothing. That is already what the
     base rule's max(100%, 1536px) does at every width below 1536, so there is no second
     declaration for it -- there was one, and because background-size is per-LAYER it also
     overwrote the height of the fade layer beside the artwork, leaving the fade stretched over
     the whole of main instead of over the picture. */

  /* ---------- nav ---------- */
  .nav { height: 72px; }
  .nav__inner { grid-template-columns: auto 1fr; padding: 0 28px; gap: 12px; }
  .nav__links { display: none; }
  .nav__logo img { width: 168px; }
  .nav__actions { gap: 12px; }
  .btn--nav { height: 44px; font-size: 15px; }
  .nav__signin { margin-right: 6px; font-size: 15px; }
  .btn--nav-demo { display: none; }   /* the CTA band repeats it; the bar has no room */
  .btn--nav-trial { width: 148px; }

  /* ---------- hero ---------- */
  /* min-height only. NOT clipped, for the reason the desktop rule gives: the stage's shadow is
     0 44px 90px and reaches past the hero's foot, so a clip cuts it off square and the missing
     shadow reads as a faint rule across the join -- which is exactly what showed up either side
     of the last button. Nothing in here needs the clip: the stage, the site mock and the phone
     screens are each clipped by their own container. */
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); padding: 44px 28px 0; }
  /* The stage sits under the lead, not under everything.

     Stacked, the old order made a reader scroll past a promise, three benefits and two buttons
     before seeing the product -- and asked them to press "Start free trial" while the thing on
     trial was still off screen. The desktop layout puts the copy and the stage side by side, so
     the product IS beside the promise; this is the nearest one column gets to that.

     display:contents lifts the copy's children into the hero grid so the stage can take a place
     among them. They share a wrapper for the two-column desktop layout, which does not apply at
     this width. */
  .hero__copy { display: contents; }
  .hero__eyebrow { order: 1; }
  .hero__title { order: 2; }
  .hero__lead { order: 3; }
  .hero__visual { order: 4; }
  .benefits { order: 5; }
  .hero__cta { order: 6; }
  .hero__title { font-size: 52px; line-height: 58px; letter-spacing: -0.034em; word-spacing: 3px; }
  /* Each line was its own unbreakable block. Once the column is the whole page
     they have to flow, or the longest ("visitors into patients") sets a measure
     nothing else can meet. */
  .hero__line { display: inline; white-space: normal; }
  .hero__lead { font-size: 19px; line-height: 29px; margin-top: 18px; max-width: 34em; }
  .hero__cta { margin-top: 36px; }

  .hero__visual {
    --hs: 1;                            /* fit.js overwrites this with the exact fit */
    width: 100%;
    /* Centred, not left-aligned. The panel is a fixed 687px box that is SCALED, so its layout
       width never changes and the clip box is the full column: wherever the scale lands below
       the column width the stage sat against the left edge with the slack piled up on the
       right. Flex-centring the 687px box and scaling it about its own top centre keeps the two
       in step -- scaled down the result still fills the column exactly, scaled up it grows from
       the middle. */
    display: flex; justify-content: center;
    height: calc(675px * var(--hs));
    margin: 42px auto 0;
    /* NOT clipped, which is what the desktop does too.

       This box used to clip, rounded to the panel's own radius so the panel's shadow did not
       show in the corner gaps. But the floating note is a sibling of the panel, not a child --
       it has to be, because it sits 31px PAST the panel's right edge and the panel clips its
       own children. A clip here cut that overhang off, and the whole of it whenever the panel
       filled the column. The panel still clips itself, so all this box was holding back was a
       shadow the desktop lets through. */
  }
  /* flex: none, because the box being centred is a flex ITEM now. Its 687px is the scene's
     authored size and the whole point of scaling it; left to shrink to the column the panel
     laid out at the column's width and was then scaled again on top of that, so the stage
     came out at the square of the fit -- half size on a phone. */
  .panel { flex: none; transform: scale(var(--hs)); transform-origin: top center; }
  /* The floating note and its arrow belong to the scene but live outside the panel, so nothing
     scales or moves them: at 1x on a left-aligned panel they happened to land right, and the
     moment the panel was scaled and centred they stayed where they were and sat over the phone.

     They are placed against the panel's PAINTED box rather than its layout box. That box is
     centred, so its left edge is 50% - 343.5px * hs (343.5 being half of 687), and a part of
     the scene authored at x sits at 50% + (x - 343.5px) * hs. Scaling from that same top-left
     corner then takes care of the size. */
  .float-card {
    left: calc(50% + (506px - 343.5px) * var(--hs));
    top: calc(422px * var(--hs));
    transform: scale(var(--hs)); transform-origin: top left;
  }
  .float-arrow {
    left: calc(50% + (498px - 343.5px) * var(--hs));
    top: calc(506px * var(--hs));
    transform: scale(var(--hs)); transform-origin: top left;
  }

  /* ---------- the gap ---------- */
  .gap__inner { padding: 60px 28px 70px; }
  .gap__inner::before { inset: 5px 0 5px; border-radius: 20px 20px 0 0; }
  .gap__title { font-size: 34px; line-height: 42px; }
  .gap__cols { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .gap__col { padding: 0; }
  /* the rules ran between columns; stacked, they run between rows instead */
  .gap__col + .gap__col {
    border-left: 0; border-top: 1px solid rgba(31, 124, 242, 0.15);
    margin-top: 34px; padding-top: 34px;
  }
  .gap__body { max-width: 30em; }

  /* ---------- what your patient receives ---------- */
  .wpr__inner { grid-template-columns: minmax(0, 1fr); padding: 66px 28px 72px; gap: 44px; }
  .wpr__copy { max-width: none; }
  .wpr__title { font-size: 38px; line-height: 45px; }
  .wpr__title br { display: none; }
  .wpr__lead { font-size: 18px; line-height: 28px; }
  /* The laptop's base lip is drawn 111% wide at -5.5% (.wpr__base), which stays
     inside the page while the laptop lives in its own 672px column. Full width,
     it pokes out past the gutter and the whole PAGE scrolls sideways by 10px.
     88% is the widest the lid can be with the lip still landing inside it. */
  .wpr__laptop { width: 88%; margin-inline: auto; }

  /* ---------- how it works ---------- */
  .hiw__inner { padding: 66px 28px 72px; }
  .hiw__head { margin-bottom: 42px; }
  .hiw__title { font-size: 34px; line-height: 42px; }
  /* Four across becomes one, held to a card's own width so the step visuals --
     resampled to exactly 2x a 274px box -- are never upscaled into mush. */
  .hiw__steps { grid-template-columns: minmax(0, 1fr); gap: 46px; max-width: 340px; margin: 0 auto; }
  .hiw__card { height: auto; padding: 44px 22px 0; }
  /* The card is a fixed 504px on desktop and the shot is pinned to its foot by margin-top:
     auto, which leaves a generous gap under the copy. Here the card hugs its content, so
     there is no slack for that auto margin to take and the shot sat hard against the last
     line of the description. 22px, stated. */
  .hiw__shot { margin-top: 22px; }

  /* ---------- pricing ---------- */
  .prc__inner { padding: 68px 28px 74px; }
  .prc__title { font-size: 34px; line-height: 42px; }
  .prc__sub { font-size: 18px; }
  .prc__cards { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 520px; }
  .prc__card { padding: 28px 24px 28px; }
  .prc__name { font-size: 26px; line-height: 34px; }
  .prc__price { font-size: 40px; line-height: 48px; }

  /* ---------- FAQ ---------- */
  .faq__inner { grid-template-columns: minmax(0, 1fr); padding: 66px 28px 72px; gap: 38px; }
  .faq__title { font-size: 34px; line-height: 42px; }
  .faq__art { max-width: 470px; }

  /* ---------- closing CTA ---------- */
  .cta__inner { padding: 64px 28px 68px; }
  .cta__title { font-size: 34px; line-height: 42px; }
  .cta__sub { font-size: 18px; line-height: 28px; }

  /* ---------- footer ---------- */
  .ft__inner { grid-template-columns: minmax(0, 1fr); gap: 34px 0; padding: 52px 28px 38px; }
  .ft__bar { padding: 22px 28px 36px; flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Tablet and small laptop. Structure is stacked above; here there is room to put
   the CARD grids back across, which keeps those sections from becoming a very
   long single file of boxes on a screen that is not short of width. The
   copy-plus-visual sections (hero, wpr, faq) stay stacked: their second column
   is a fixed-width stage or a photograph, and squeezing it beside the copy is
   what made the page desktop-only in the first place. */
@media (min-width: 700px) and (max-width: 1279px) {
  /* The links take the slack between the logo and the buttons and sit in the middle of it,
     rather than tucking up against the wordmark with a hole on the right. */
  .nav__links { display: flex; justify-content: center; gap: 30px; }
  .nav__inner { grid-template-columns: auto 1fr auto; padding: 0 40px; }

  .hero__inner { padding: 50px 40px 0; }
  .hero__title { font-size: 60px; line-height: 66px; }
  /* The hero's foot. The buttons are the last thing in it and the section under them opens
     with a card edge 5px down, so without this a button sits all but on that edge. It used to
     be the three benefit lines holding the two apart; they are hidden here now. */
  /* Centred, like the stage above them -- the copy is the only thing ranged left at this
     width, and a pair of buttons sitting under the middle of a centred panel but hard
     against the left gutter read as having come loose from it. The -1px the base rule uses
     to optically align the first button with the headline's stem goes with the ranging. */
  .hero__cta { flex-direction: row; justify-content: center; margin-bottom: 48px; margin-left: 0; }
  .btn--hero { font-size: 19px; }   /* 16px is a desktop label beside a desktop headline */
  .btn--hero-trial { width: 235px; }
  .btn--hero-demo { width: 220px; }
  /* Gone here too, for the reason the phone rule gives: stacked, the three points are three
     rows between the promise and what comes next, saying in six words what the stage above
     them shows. They were sized and centred for this width first; they still read as a row of
     labels under a picture that has already made the point. The scaling that fitted them is
     gone with them -- it has nothing left to size. */
  .benefits { display: none; }

  /* The white ground is a CARD here, as it is on a desktop and on a phone -- inset from the
     page by the 40px every other section on this width keeps, so the band's own blue carries
     on down both sides. It ran edge to edge, which read as the page changing colour rather than
     as a panel sitting on it. The copy then needs 22px of its own inside that edge, so the
     section's padding is the 40 plus that; the columns give the same 22 back off their inner
     padding, which leaves the three measures the width they already had. */
  .gap__inner { padding: 70px 62px 84px; }
  .gap__inner::before { inset: 5px 40px 5px; }
  .gap__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gap__col { padding: 0 21px; }
  .gap__lead { font-size: 19px; }
  .gap__body { font-size: 16.5px; }
  .gap__col + .gap__col {
    border-left: 1px solid rgba(31, 124, 242, 0.15); border-top: 0;
    margin-top: 0; padding-top: 0;
  }

  .wpr__inner { padding: 78px 40px 86px; }
  /* Ten more on each section heading at this width. The stacked sizes were set for a phone and
     then let run up to 1279, where a 34px line over a full tablet column reads as a label
     rather than as the top of a section. Line heights keep the ratio they were given rather
     than the number, or a heading two lines deep would set solid. */
  .wpr__title { font-size: 48px; line-height: 57px; }
  /* Three lines, not four. 560px is the width this paragraph is given beside the laptop on a
     desktop; with the laptop below it instead there is a column's worth of blue to its right
     and no reason to hold it that short. 620px is the width at which the fourth line -- four
     words and a full stop, hanging under three full ones -- goes back up: it sets 577/594/596,
     all but flush, and the longest of those three still fits the column at the foot of this
     band, so it holds at three the whole way across. */
  .wpr__lead { max-width: 620px; }
  .wpr__laptop { margin-top: 10px; }
  .hiw__inner { padding: 78px 40px 86px; }
  .hiw__title { font-size: 44px; line-height: 54px; }
  /* 64px between the two columns, not 24: at this width the cards are wide enough that a
     narrow gutter made them read as one block split by a seam rather than as two cards. */
  .hiw__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; max-width: 700px; }
  .prc__inner { padding: 82px 40px 88px; }
  .prc__title { font-size: 44px; line-height: 54px; }
  .prc__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
  .faq__inner { padding: 78px 40px 86px; }
  .faq__title { font-size: 44px; line-height: 54px; }
  .faq__art { max-width: 560px; }
  .cta__inner { padding: 74px 40px 78px; }
  .ft__inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 90px; padding: 58px 40px 44px; }
  .ft__bar { padding: 22px 40px 40px; flex-direction: row; align-items: center; }
}

/* The bar's second button, back again -- but only once there is room for it.

   Logo, links and both buttons want 828px plus the 40px gutters, and the bar is full at about
   860. Below that something has to give, and every way of giving was worse than dropping the
   repeat: squeezed, the wordmark crushed to 69px; with the links taking the slack instead,
   "How it works" broke onto three lines. The CTA band and the foot both ask for a demo, so the
   bar does not have to. */
@media (min-width: 880px) and (max-width: 1279px) {
  .btn--nav-demo { display: inline-flex; }
}

/* Phone: the stacking above already applies, so this is type, air and the two
   controls that have to become full width to be tappable. */
@media (max-width: 560px) {
  .nav { height: 66px; }
  .nav__inner { padding: 0 18px; }
  .nav__logo img { width: 152px; }
  .btn--nav { height: 42px; font-size: 14px; }
  .btn--nav-trial { width: 138px; }

  .hero__inner { padding: 26px 18px 0; }
  /* Both a few points down from the tablet sizes: at this width the eyebrow was wrapping onto a
     second line and the headline was the loudest thing on the page by some distance. */
  .hero__eyebrow { font-size: 9px; line-height: 15px; }
  .hero__title { font-size: 31px; line-height: 36px; }
  /* Every description paragraph on the page goes down a point together: the hero's, the
     "why practices" lead, the pricing and FAQ sub-lines and the closing CTA's. The bold
     statement leads (.gap__lead, .hiw__lead) are not these -- they are headline weight doing a
     headline's job -- so they keep their size. */
  .hero__lead { font-size: 15px; line-height: 24px; }
  .benefits { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 26px; }
  .hero__cta { flex-direction: column; gap: 12px; margin-top: 32px; }
  .btn--hero, .btn--hero-trial, .btn--hero-demo { width: 100%; }
  .hero__visual { margin-top: 23px; }

  /* Clear of the hero's last button rather than butting straight onto it: the white ground
     starts where the section starts, so without this the band changed colour under the thumb. */
  .gap { margin-top: 20px; }
  /* A card the width of the stage above it, not a full-bleed band.

     Full width, the white ground met both edges of the phone and the gradient stopped dead at
     the section's top -- which read as the page changing paper rather than a panel sitting on
     it. Inset to the same 18px the stage uses, the background runs down both sides and the two
     blocks line up as one column. The copy takes another 20px inside so it is not against the
     card's own edge. */
  .gap__inner::before { inset: 0 18px; border-radius: 20px 20px 0 0; }
  .gap__inner { padding: 44px 38px 52px; }
  /* A point above the hero's eyebrow: this one sits on white with a long title under it, where
     the hero's sits on colour under a much bigger headline. */
  .gap__eyebrow { font-size: 10px; line-height: 16px; }
  .hiw__eyebrow { font-size: 10px; line-height: 16px; }
  .faq__eyebrow { font-size: 10px; line-height: 16px; }
  .gap__title { font-size: 25px; line-height: 32px; }
  /* balance, so a card heading does not leave one word alone on its second line. The browser
     picks the break that evens the lines instead of filling the first one -- which turns
     "...a big first / step" into two halves. Ignored by anything that does not know the
     property, which simply wraps as before. */
  .gap__lead { font-size: 18px; line-height: 25px; text-wrap: balance; }
  /* The marks are 20% down on the desktop sizes. The tile, its corner and the glyph all take the
     same factor, so the mark keeps its proportion inside the tile: 73.6 -> 58.9, 18.4 -> 14.7,
     41.4 -> 33.1, and the chair's own allowance 49.7 -> 39.8. */
  .gap__icon { width: 58.9px; height: 58.9px; border-radius: 14.7px; }
  .gap__icon svg { width: 33.1px; height: 33.1px; }
  .gap__icon--art img { width: 39.8px; }
  .gap__body { font-size: 15px; line-height: 24px; }
  /* Once display:contents lifts these into the grid, each one's own margin is ADDED to the
     grid's gap instead of being absorbed by a wrapper: the title and the description ended up
     60px apart (34 + 26) and the list sat 68px under the laptop (34 + 34). So the gap is the
     only thing spacing them now, at 19px, with a little put back where a junction wants more:
     19 under the title, 34 under the description, 39 under the laptop. */
  .wpr__inner { padding: 38px 18px 54px; gap: 19px; }
  .wpr__lead { margin-top: 0; }
  .wpr__art { margin-top: 15px; }
  .wpr__list { margin-top: 20px; }
  /* These five run at 27/34. The reality section's title is deliberately not among them -- it
     is the one that sits on its own white card, and it stays at 25. */
  .wpr__title { font-size: 27px; line-height: 34px; }
  .wpr__lead { font-size: 16px; line-height: 26px; }
  /* The laptop moves up between the description and the list.

     Stacked, the list ran to five rows before the thing it describes appeared, so the reader
     took all five on trust and met the product afterwards. Shown first, each line is a caption
     for something already on screen. Same move as the hero's stage, and the same mechanism:
     display:contents lifts the copy's children into the section's grid so the art can take a
     place among them -- they share a wrapper for the two-column desktop layout, which does not
     apply here. */
  .wpr__copy { display: contents; }
  .wpr__title { order: 1; }
  .wpr__lead { order: 2; }
  .wpr__art { order: 3; }
  .wpr__list { order: 4; }
  .wpr__cta { order: 5; }
  .wpr__list li { font-size: 15px; line-height: 23px; }
  /* The lid's bezel is drawn in fixed pixels, so shrinking the laptop to a phone made the frame
     twice the share of it that the design has at full size -- a chunky black border around a
     small screen. Every part of the casing comes down by the same factor as the laptop itself:
     the bezel 11 -> 6, its corners 15 -> 9, the base lip 15 -> 8 and the thumb notch 5 -> 3. */
  .wpr__lid {
    padding: 6px 6px 7px; border-radius: 9px 9px 3px 3px;
    box-shadow: inset 0 0 0 1px #5c626c, inset 0 0 0 2px #0a0b0d,
                0 22px 42px rgba(6, 30, 78, 0.38), 0 6px 14px rgba(6, 30, 78, 0.2);
  }
  .wpr__screens { border-radius: 3px; }
  .wpr__base { height: 8px; border-radius: 0 0 7px 7px; box-shadow: 0 9px 15px rgba(6, 30, 78, 0.28); }
  .wpr__notch { height: 3px; border-radius: 0 0 4px 4px; }
  .hiw__inner { padding: 48px 18px 54px; }
  .hiw__title { font-size: 27px; line-height: 34px; }
  .prc__inner { padding: 50px 18px 56px; }
  .prc__title { font-size: 27px; line-height: 34px; }
  .prc__sub { font-size: 16px; }
  /* One sentence per line here. The break carries a space in front of it, so where it is
     hidden the two sentences still have a gap between them -- the mistake that joined
     "What yourpatient receives" in the section above. */
  .prc__sub-br { display: inline; }
  .prc__cards { margin-top: 34px; }   /* 10 less between the currency control and the cards */
  /* Both cards: the line under the plan name and every feature row, at one size. */
  .prc__meta, .prc__list li { font-size: 15px; line-height: 24px; }
  .faq__inner { padding: 48px 18px 54px; }
  .faq__title { font-size: 27px; line-height: 34px; }
  .faq__sub { font-size: 15px; line-height: 25px; }
  /* The questions and their answers: the question down 2, the answer to the page's 15px. */
  .faq__qt { font-size: 17px; line-height: 25px; }
  .faq__a p { font-size: 15px; line-height: 25px; }
  .cta__inner { padding: 46px 18px 50px; }
  .cta__title { font-size: 27px; line-height: 34px; }
  .cta__sub { font-size: 15px; line-height: 25px; }
  .ft__inner { padding: 40px 18px 30px; }
  /* Only the first column. Stacked, the brand block runs straight into Product; Legal
     already reads as part of the same list and wants no extra. */
  .ft__brand + .ft__col { margin-top: 20px; }
  .ft__bar { padding: 18px 18px 28px; }
}

/* No-JS fallback for the hero stage. fit.js sets --hs exactly; these only have
   to stop the panel overflowing if it never runs, so each is sized for the
   narrowest screen in its bucket. */
@media (max-width: 800px) { .hero__visual { --hs: 0.94; } }
@media (max-width: 720px) { .hero__visual { --hs: 0.87; } }
@media (max-width: 640px) { .hero__visual { --hs: 0.75; } }
@media (max-width: 560px) { .hero__visual { --hs: 0.64; } }
@media (max-width: 480px) { .hero__visual { --hs: 0.55; } }
@media (max-width: 420px) { .hero__visual { --hs: 0.49; } }
@media (max-width: 380px) { .hero__visual { --hs: 0.43; } }
@media (max-width: 340px) { .hero__visual { --hs: 0.37; } }

/* ==========================================================================
   Phone menu
   Below 700px the bar holds the logo and one control. The links are already
   hidden there; the two buttons join them behind a hamburger, and the panel is
   built from the page's own links by nav.js. Above 700px none of this exists:
   the button is display:none, so nothing can open.
   ========================================================================== */
/* On a phone the painting shows its LEFT edge instead of its right.

   It is one 1536px image and a phone sees 375 of it. Anchored right, that slice averages 231 of
   255 -- a visible blue cast behind the headline. The left edge measures 252, so the same asset,
   shifted, is very nearly white there. Nothing is flipped and no second file exists: at this
   width the slice is too narrow for the gradient's direction to read, so only its colour
   changes. */
@media (max-width: 699px) {

  /* The phone shows the painting's near-white LEFT edge, and the blue comes back as a wash we
     draw instead. The painting is one fixed image: on a phone you see whichever 375px of it you
     point at, and no slice has both a white headline and colour around the stage. The colours
     below are sampled from the painting itself -- rgb(217,235,254) on its right side, the
     violet-leaning rgb(217,227,253) higher up -- so this reads as the same artwork rather than a
     blue someone chose separately.
     It is painted by MAIN, not by the hero, and measured in pixels. On the hero it could not do both jobs at once: it has to be strongest across the stage, and
     the stage now finishes at 87% of a hero that is only ~700px tall -- so any layer heavy
     enough to reach it was still painting at the hero's foot, where a background stops dead and
     leaves a straight line under the last button. Main carries on past that boundary, and the
     section below starts transparent, so the same layer simply runs out somewhere in the first
     50px of it with nothing to mark the join.

     Pixels, not percentages, because the hero's height moves with its own content -- it lost
     ~280px when the benefit lines went -- and a percentage that was centred on the stage
     yesterday is centred above it today. These are measured from the top of main: the stage
     occupies roughly 270-603px at phone width. */
  main {
    background:
      radial-gradient(125% 290px at 104% 437px,
        rgba(196, 224, 253, 0.95) 0%, rgba(210, 233, 254, 0.72) 34%,
        rgba(226, 240, 254, 0.3) 62%, rgba(236, 245, 255, 0) 82%) 0 0 / 100% auto no-repeat,
      radial-gradient(80% 150px at 102% 105px,
        rgba(211, 220, 252, 0.6) 0%, rgba(219, 228, 253, 0.26) 48%,
        rgba(228, 236, 254, 0) 76%) 0 0 / 100% auto no-repeat,
      #f8fbfd url("assets/hero-gradient.webp?v=515dc628b3") 0 0 / 1536px auto no-repeat;
  }
}

/* The three benefit lines are desktop's, where they sit beside the headline and cost nothing.
   Stacked on a phone they are three more rows between the promise and the button, saying in
   six words what the stage above them shows. The stage earns that space; they do not. */
@media (max-width: 699px) {
  .benefits { display: none; }

  /* One ask in the hero, and it is the smaller one.

     Two buttons stacked full width is a choice between two blues the moment the outlined one is
     the same size as the filled one -- and the trial is still offered in the menu and again at
     the foot. The demo takes the filled treatment because it is now the only thing to press;
     an outline says "the other one first", and there is no other one. */
  .btn--hero-trial { display: none; }
  .btn--hero-demo {
    color: #fff;
    background: linear-gradient(90deg, #289dfc 0%, #1c7af3 100%);
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(29, 125, 245, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .btn--hero-demo:hover {
    background: linear-gradient(90deg, #289dfc 0%, #1c7af3 100%);
    border-color: transparent;
  }
}

.navburger { display: none; }

@media (max-width: 699px) {
  /* The trial button goes: at this width it crowded the logo and was the only
     thing in the bar a reader could hit by accident while scrolling. It is the
     first item in the menu instead, and the hero repeats it a screen below. */
  .btn--nav-trial { display: none; }
  .nav__actions { display: none; }
  .nav__inner { grid-template-columns: auto 1fr; }

  /* Every number here is whole, and chosen so the ones derived from them are whole too.

     The bars were already 2px each, but the space around them was not landing on the pixel
     grid: 3 bars of 2 and 2 gaps of 5 is 16px inside a 42px content box, and the 13px that
     centres it put each bar on a different subpixel offset -- so one rendered crisp and its
     neighbours antialiased across an extra row, which reads as a thicker top line. At 2px bars
     and 4px gaps the block is 14px in a 38px box, centred by a clean 12, and all three land the
     same way.

     10% down on both the button and the icon: 44 -> 40 (rounded from 39.6 to keep that whole
     number), the corner 12 -> 11, the bars 20 -> 18. */
  .navburger {
    display: grid; place-items: center; justify-self: end;
    width: 40px; height: 40px; padding: 0;      /* still inside the comfortable tap range */
    border: 1px solid var(--line, #e6eaf2); border-radius: 11px;
    background: #fff; color: #0b1220; cursor: pointer;
  }
  .navburger__bars { display: grid; gap: 4px; width: 18px; }
  .navburger__bars i {
    height: 2px; border-radius: 2px; background: currentColor;
    transition: transform 0.18s ease, opacity 0.12s ease;
  }
  /* The three bars become a cross, so the control says which state it is in. 6px, not 7:
     centre to centre is now the bar plus the gap. */
  .navburger.is-open .navburger__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .navburger.is-open .navburger__bars i:nth-child(2) { opacity: 0; }
  .navburger.is-open .navburger__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Under the bar, not over the whole screen: the page stays visible behind it,
     which keeps a tap outside feeling like a way out. */
  .navmenu {
    position: fixed; z-index: 90; top: 72px; left: 0; right: 0;   /* nav.js measures the real bar */
    display: grid; gap: 10px; padding: 18px 28px 24px;
    background: #fff; border-bottom: 1px solid var(--line, #e6eaf2);
    box-shadow: 0 18px 40px rgba(16, 28, 56, 0.12);
  }
  .navmenu[hidden] { display: none; }
  .navmenu__links { display: grid; }
  .navmenu__links a {
    padding: 14px 2px; font-size: 17px; font-weight: 600; color: #0b1220;
    text-decoration: none; border-bottom: 1px solid #f0f3f8;
  }
  .navmenu__links a:last-child { border-bottom: 0; }
  .navmenu__btn { width: 100%; height: 50px; font-size: 16px; }
  /* The page behind must not scroll under an open panel. */
  .nav-open, .nav-open body { overflow: hidden; }
}