/* iClinic landing — the whole design system (direction C "Kết hợp": a light
   editorial page with one dark "night" room for AI).
   Fonts are declared in the <head> partial (landing/_src/partials/head.html) so
   their URLs are versioned; this file must never url() an /assets/ path. */

/* ---------------------------------------------------------------- tokens */
:root {
  --ink: #0b1a2f;
  --ink-70: rgb(11 26 47 / 0.72);
  --ink-50: rgb(11 26 47 / 0.5);
  --ink-12: rgb(11 26 47 / 0.12);
  --ink-06: rgb(11 26 47 / 0.06);
  --ink-04: rgb(11 26 47 / 0.04);
  --ink-hover: #1d3454;
  --brand: #1763b8;
  --brand-deep: #0f477f;
  --mint: #27c9b3;
  --teal: #0d6b5e;
  --night: #060d1a;
  --night-label: #9fb3c8;
  --night-accent: #7fe3d4;
  --mist: #f4f6f9;
  --foot: #fafbfc;
  --soon-bg: #fff4e0;
  --soon: #8a5300;
  /* The partner clinic's own green and page tint, from phongkhamhieploi.vn. Used only for the partner. */
  --hl: #17614f;
  --hl-deep: #0d4a3c;
  --hl-mist: #f6fcfa;
  --danger: #b42318;
  --serif: Newsreader, 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --sans: Inter, 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 10px 40px rgba(6, 20, 40, 0.08);
  --shadow-tile:
    0 19px 21px rgba(6, 20, 40, 0.04), 0 76px 38px rgba(6, 20, 40, 0.03),
    0 170px 51px rgba(6, 20, 40, 0.02);
  --lift: 0 8px 20px rgb(11 26 47 / 0.18);
  /* Safe-area insets (viewport-fit=cover): the notch or camera of a phone turned on its side, or the
     status bar of a foldable's cover screen, can sit on one side only. Content keeps clear of both
     with the larger one, so the layout stays centred; a fixed bar uses its own side where it can.
     The top inset is the status bar a page draws under (a foldable's cover screen, a home-screen web
     app): the header grows by it, and --hdr-b is the header's bottom edge for everything pinned below. */
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --inset: max(var(--sl), var(--sr));
  --gut: 24px;
  --pad: max(var(--gut), var(--inset));
  --wrap: min(100% - 2 * var(--pad), 1280px);
  --dock-h: 68px;
  --hdr-h: 76px;
  --hdr-b: calc(var(--st) + var(--hdr-h));
}

/* ------------------------------------------------------------------ base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--st) + 96px);
  scroll-padding-bottom: calc(var(--dock-h) + 40px);
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  font-synthesis-weight: none;
  text-wrap: pretty;
  overflow-x: clip;
}
html:has(dialog[open]) {
  overflow: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
/* One feel for every control: whatever a hover, press or focus changes eases over the same
   0.2s. A component that needs more (an icon turning, an underline fading in) adds its own
   transition for that part and does not restate this one. */
a,
button {
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    text-decoration-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}
h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
  margin: 0;
}
em {
  font-style: italic;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* i18n.js contract: only the language in html[data-lang-pref] is shown. */
html:not([data-lang-pref='en']) [data-lang='en'],
html[data-lang-pref='en'] [data-lang='vi'] {
  display: none !important;
}
.ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The keyboard ring is an outline, not a box-shadow: many controls draw their own look with
   box-shadow (a pill's hairline border, a hover shadow) and would hide a shadow ring. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 12px;
}
.wrap {
  width: var(--wrap);
  margin-inline: auto;
}
.skip {
  position: fixed;
  left: max(12px, var(--sl));
  top: -80px;
  z-index: 100;
  background: #fff;
  border-radius: 40px;
  padding: 12px 18px;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  transition: top 0.2s var(--ease);
}
.skip:focus {
  top: calc(var(--st) + 12px);
}

/* ------------------------------------------------------------ type + atoms */
.eyebrow {
  font: 600 12px/1.5 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.h1 {
  font: 400 clamp(44px, 7.6vw, 108px) / 1.04 var(--serif);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h2 {
  font: 400 clamp(40px, 4.6vw, 64px) / 1.1 var(--serif);
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-top: 14px;
}
.h1 em,
.h2 em {
  color: var(--brand-deep);
  white-space: nowrap;
}
.lede {
  font: 400 clamp(18px, 1.7vw, 22px) / 1.5 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink-70);
  max-width: 640px;
  margin: 22px auto 0;
  text-wrap: balance;
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
}
.link .ico {
  width: 18px;
  height: 18px;
  transition: transform 0.2s var(--ease);
}
.link:hover {
  text-decoration-color: currentColor;
}
.link:hover .ico[class] {
  transform: translateX(3px);
}
.ctx {
  color: var(--brand);
}
.ctx:hover {
  color: var(--brand-deep);
}
.ctx .ico {
  width: 16px;
  height: 16px;
}
.prose a:not(.pill),
.inline-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgb(23 99 184 / 0.3);
}
.prose a:not(.pill):hover,
.inline-link:hover {
  color: var(--brand-deep);
  text-decoration-color: currentColor;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font: 600 15.5px/1 var(--sans);
  white-space: nowrap;
}
.pill:disabled {
  opacity: 0.55;
  pointer-events: none;
}
.pill .ico {
  width: 18px;
  height: 18px;
}
/* Buttons darken and lift on hover; chips, tabs and rows only tint. */
.pill-ink {
  background: var(--ink);
  color: #fff;
}
.pill-ink:hover {
  background: var(--ink-hover);
  box-shadow: var(--lift);
}
.pill-line {
  box-shadow: inset 0 0 0 1px var(--ink-12);
}
.pill-line:hover {
  background: #fff;
  box-shadow:
    inset 0 0 0 1px var(--ink),
    var(--lift);
}
.pill-brand {
  background: var(--brand);
  color: #fff;
}
.pill-brand:hover {
  background: var(--brand-deep);
  box-shadow: var(--lift);
}
.pill-white {
  background: #fff;
  color: var(--ink);
}
.pill-white:hover {
  background: var(--night-accent);
}
.pill-glass {
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  color: #fff;
}
.pill-glass:hover {
  background: rgb(255 255 255 / 0.16);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4);
}
.send {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
}
.send:not([aria-disabled='true']):hover {
  background: var(--brand-deep);
}
.send .ico {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  transition: transform 0.2s var(--ease);
}
.round-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
.round-btn:hover {
  background: var(--ink-06);
}
/* Movement on hover is for real pointers that have not asked for less motion, so a tap never
   leaves a button raised and nothing jumps for people who turned animation off. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pill:hover,
  .dock-ask:hover {
    transform: translateY(-2px);
  }
  .send:not([aria-disabled='true']):hover .i-send {
    transform: translateY(-2px);
  }
  .logo:hover img {
    transform: scale(1.08);
  }
  .acc-btn[aria-expanded='false']:hover .ico {
    transform: translateY(2px);
  }
}
/* Pressed: every button, chip and round control sinks a little. */
.pill:active,
.send:not([aria-disabled='true']):active,
.round-btn:active,
.tile-pause:active,
.tile-more:active,
.rv-btn:active,
.rv-pick:active,
.menu-btn:active,
.dock-ask:active,
.starter:active,
.jump a:active,
.lang-switch button:active,
.chat-new:active,
.ibtn:active,
.src:active,
.chip-q:active,
.tab:active,
.follow button:active {
  transform: scale(0.97);
}
/* A full-width row sinks less than a pill does, or it would visibly shrink. */
.switch:active {
  transform: scale(0.99);
}
.mono {
  font-family: var(--mono);
}
/* Squircle tiles (Chromium); a plain radius elsewhere. */
.sq {
  border-radius: var(--r, 40px);
}
@supports (corner-shape: superellipse(1.3)) {
  .sq {
    corner-shape: superellipse(1.3);
    border-radius: calc(var(--r, 40px) * 1.194);
  }
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 11.5px/1.5 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgb(39 201 179 / 0.18);
}
.status-beta {
  color: var(--brand-deep);
}
.status-beta::before {
  background: var(--brand);
  box-shadow: 0 0 0 4px rgb(23 99 184 / 0.16);
}
.status-soon {
  color: var(--soon);
}
.status-soon::before {
  background: #f0a63a;
  box-shadow: 0 0 0 4px rgb(240 166 58 / 0.2);
}

/* ---------------------------------------------------------------- header */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  padding-top: var(--st);
  z-index: 40;
  transition:
    background 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
/* Nearly solid: a lighter frost shows the text scrolling under it. */
.hdr.is-scrolled {
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 var(--ink-06);
}
.hdr-in {
  width: min(100% - 2 * max(56px, var(--inset)), 1360px);
  margin-inline: auto;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  gap: 28px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 26px/1 var(--serif);
  letter-spacing: -0.02em;
  border-radius: 10px;
}
.logo img {
  width: 34px;
  height: 34px;
  transition: transform 0.3s var(--ease);
}
.nav {
  display: flex;
  gap: 4px;
  margin-inline: auto;
}
.nav a {
  font: 600 12px/1.5 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
  padding: 11px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.nav a:hover {
  color: var(--ink);
  background: var(--ink-06);
}
.nav a[aria-current] {
  color: var(--ink);
  background: var(--ink-04);
}
.hdr-cta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hdr-cta .pill {
  height: 44px;
  font-size: 14.5px;
  padding: 0 20px;
}
.menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  font: 600 14.5px/1 var(--sans);
  box-shadow: inset 0 0 0 1px var(--ink-12);
}
.menu-btn:hover {
  background: var(--ink-06);
  box-shadow: inset 0 0 0 1px var(--ink-50);
}
.menu {
  width: min(100% - max(8px, var(--sl)) - max(8px, var(--sr)), 520px);
  max-width: none;
  max-height: calc(100dvh - var(--st) - 16px);
  margin: calc(var(--st) + 8px) max(8px, var(--sr)) auto auto;
  padding: 12px 20px 28px;
  border: 0;
  border-radius: 32px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(6, 20, 40, 0.25);
  overflow-y: auto;
}
.menu::backdrop {
  background: rgb(6 13 26 / 0.36);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.menu[open] {
  animation: menu-in 0.32s var(--ease);
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}
.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  margin-bottom: 12px;
}
.menu-nav {
  display: flex;
  flex-direction: column;
}
.menu-link {
  display: block;
  padding: 8px 4px;
  font: 400 34px/1.2 var(--serif);
  letter-spacing: -0.03em;
  border-radius: 10px;
}
.menu-link:hover {
  color: var(--brand-deep);
}
.menu-link[aria-current='page'] {
  color: var(--brand-deep);
  font-style: italic;
}
.menu-cta {
  display: grid;
  gap: 8px;
  margin: 28px 0 20px;
}
.menu .lang-switch {
  justify-content: center;
}
/* A short window (a phone on its side, a foldable's cover screen) cannot hold seven 34px links, two
   buttons and the language switch: the links shrink, and a wide short one sets them in two columns. */
@media (max-height: 760px) {
  .menu-link {
    padding: 4px;
    font-size: 28px;
  }
  .menu-top {
    margin-bottom: 8px;
  }
  .menu-cta {
    margin: 20px 0 14px;
  }
}
@media (max-height: 560px) and (min-width: 560px) {
  .menu-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
  .menu-cta {
    grid-auto-flow: column;
    margin: 16px 0 12px;
  }
}

/* ----------------------------------------------------------- lang switch */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ink-12);
}
.lang-switch button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font: 500 14px/1 var(--sans);
  color: var(--ink-70);
}
.lang-switch button:not([aria-pressed='true']):hover {
  background: var(--ink-06);
  color: var(--ink);
}
.lang-switch button[aria-pressed='true'] {
  background: var(--ink);
  color: #fff;
}
html:not(.js) .lang-switch {
  display: none;
}
/* The header's copy is smaller than the footer's; it sits beside the 44px pills. */
.hdr-lang {
  margin-right: 6px;
  padding: 3px;
}
.hdr-lang button {
  min-height: 32px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ hero */
.hero,
.page-hero {
  padding: calc(var(--st) + 12px) max(24px, var(--inset)) 0;
}
.hero-panel {
  position: relative;
  border-radius: 48px;
  padding: 150px 32px 88px;
  text-align: center;
  background:
    radial-gradient(55% 45% at 18% 12%, #dfeafa 0%, transparent 70%),
    radial-gradient(45% 50% at 88% 22%, #e2f5f1 0%, transparent 70%),
    radial-gradient(70% 60% at 50% 100%, #eef3f9 0%, transparent 70%), #f3f6fa;
}
.page-hero .hero-panel {
  padding: 168px 32px 104px;
}
.page-hero .eyebrow {
  margin-bottom: 20px;
}
.page-hero .h1 {
  font-size: clamp(44px, 6.6vw, 96px);
}
.page-hero .lede {
  max-width: 720px;
}
.page-hero .hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
/* Home: the question on the left, real screens of the product on the right. */
.hero .hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 150px 48px 96px;
  text-align: left;
}
.hero .eyebrow {
  margin-bottom: 20px;
}
.hero .h1 {
  font-size: clamp(44px, 5vw, 78px);
}
.hero .lede {
  margin: 24px 0 0;
  max-width: 500px;
  text-wrap: pretty;
}
.ask {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 76px;
  max-width: 560px;
  margin-top: 36px;
  padding: 0 12px 0 28px;
  background: #fff;
  border-radius: 38px;
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px var(--ink-06);
  text-align: left;
  transition: box-shadow 0.2s var(--ease);
}
.ask:focus-within {
  box-shadow:
    var(--shadow-soft),
    0 0 0 2px var(--ink);
}
.ask-field {
  position: relative;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.ask input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 18px/1.5 var(--sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ask input:focus-visible,
.ask-row input:focus-visible {
  outline: none;
}
.ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  font: 400 18px/1.5 var(--sans);
  letter-spacing: -0.02em;
  color: var(--ink-50);
  transition: opacity 0.2s var(--ease);
}
.ph-ex {
  display: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ph-ex.is-on {
  display: block;
  animation: ph-in 0.5s var(--ease);
}
@keyframes ph-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.ask input:not(:placeholder-shown) + .ph {
  opacity: 0;
}
.scene {
  position: relative;
  padding-bottom: 56px;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s var(--ease),
    visibility 0s 0.6s;
}
.slide.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease);
}
.scene-foot {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The door from the hero to every screen, in the same white chip as the pause button beside it.
   Only where the stage sits below the question (1100px and narrower); a wide screen already
   shows it beside the question. */
.tile-more {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 2px 8px rgba(6, 20, 40, 0.1),
    0 0 0 1px var(--ink-06);
  font: 600 14px/1.3 var(--sans);
  color: var(--ink);
}
.tile-more:hover {
  background: var(--mist);
}
.tile-more .ico {
  width: 16px;
  height: 16px;
}
.tile-pause,
.rv-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow:
    0 2px 8px rgba(6, 20, 40, 0.1),
    0 0 0 1px var(--ink-06);
}
.tile-pause:hover,
.rv-btn:hover {
  background: var(--mist);
}
.tile-pause .ico,
.rv-btn .ico {
  width: 16px;
  height: 16px;
}
.tile-pause .i-play,
.tile-pause[aria-pressed='true'] .i-pause,
.rv-btn .i-play,
.rv-btn[aria-pressed='true'] .i-pause {
  display: none;
}
.tile-pause[aria-pressed='true'] .i-play,
.rv-btn[aria-pressed='true'] .i-play {
  display: block;
}
html:not(.js) .tile-pause {
  display: none;
}
.starters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 580px;
  margin: 22px 0 0;
}
.starter {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.75);
  box-shadow: inset 0 0 0 1px var(--ink-12);
  font: 500 15px/1.3 var(--sans);
  color: var(--ink-70);
}
.starter:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-50);
}
.human {
  margin-top: 22px;
  font-size: 15px;
  color: var(--ink-70);
}
.human a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-12);
}
.human a:hover {
  color: var(--brand-deep);
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------ partner clinic */
/* The partner is the one place the page borrows another hue: the clinic's own green, taken from its signboard
   and its site. Two seals overlap (iClinic's and the clinic's), and the same pair is the footer's. */
.partner {
  padding: 0 0 120px;
}
.partner-card {
  --r: 48px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 72px 64px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(60% 90% at 100% 0%, rgb(127 227 212 / 0.2), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgb(255 255 255 / 0.07), transparent 70%),
    linear-gradient(155deg, var(--hl) 0%, var(--hl-deep) 100%);
}
.seals {
  display: flex;
  margin-bottom: 36px;
}
.seal {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--hl);
}
.seal + .seal {
  margin-left: -14px;
}
.seal img {
  width: 54%;
  height: 54%;
}
.seal:last-child img {
  width: 100%;
  height: 100%;
}
.partner-card .eyebrow {
  color: rgb(255 255 255 / 0.72);
}
.partner-card .h2 {
  font-size: clamp(36px, 4vw, 56px);
}
.partner-card .h2 em {
  color: var(--night-accent);
}
.partner-lede {
  max-width: 540px;
  margin-top: 24px;
  font-size: 18px;
  color: rgb(255 255 255 / 0.84);
}
.partner-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 32px;
}
.partner-note {
  max-width: 320px;
  font-size: 15px;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.74);
}
.partner-note a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The clinic's own photos, set as one stepped plate: the front door (its sign is the proof) and a doctor at work,
   overlapping on the wall beside the door. Everything is a percentage of the plate's width, so it scales whole. The
   address and hours sit under it as a caption, in the card's own type, not in a second card. */
.partner-side {
  display: grid;
  gap: 28px;
  width: 100%;
  max-width: 560px;
}
.partner-plate {
  --r: 28px;
  position: relative;
  aspect-ratio: 540 / 480;
}
.partner-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--hl-deep);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.14),
    0 28px 50px -22px rgb(0 0 0 / 0.6);
}
.partner-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partner-photo-front {
  top: 0;
  left: 0;
  width: 72%;
  aspect-ratio: 960 / 1024;
}
.partner-photo-doctor {
  right: 0;
  bottom: 0;
  width: 40%;
  aspect-ratio: 3 / 4;
}
.partner-credit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58%;
  font-size: 12.5px;
  line-height: 1.3;
  color: rgb(255 255 255 / 0.62);
}
.partner-legend {
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}
.pl-name {
  font: 700 16px/1.35 var(--sans);
  color: #fff;
}
.pl-name span {
  font-weight: 500;
  color: rgb(255 255 255 / 0.7);
}
.pl-rows {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 18px 28px;
  margin: 16px 0 0;
}
.pl-rows dt {
  font: 600 11.5px/1.7 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}
.pl-rows dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.92);
}
/* In the hero: a small line under the ask box, so the first screen already says who it runs for. */
.partner-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.7);
  box-shadow: inset 0 0 0 1px var(--ink-06);
  font: 500 14px/1.3 var(--sans);
  color: var(--ink-70);
}
.partner-chip img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.partner-chip b {
  font-weight: 600;
  color: var(--hl);
}
.partner-chip .ico {
  width: 16px;
  height: 16px;
}
.partner-chip:hover {
  background: #fff;
  color: var(--ink);
}

/* ------------------------------------------------------ module explorer */
.modules {
  padding: 112px 0 128px;
}
.sec-head {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}
.sec-lede {
  color: var(--ink-70);
  max-width: 440px;
  justify-self: end;
}
.md {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
}
/* One card per feature, in the order a patient meets them. Each carries its own hue (.m-*), the same
   one its stage and panel use, so the eye learns which colour is which. */
.rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
html:not(.js) .rail {
  display: none;
}
.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 116px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ink-06);
  text-align: left;
}
.tab-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--m-soft);
  color: var(--m);
}
.tab-t {
  font: 600 15px/1.28 var(--sans);
  color: var(--ink);
  text-wrap: balance;
}
.tab .n {
  position: absolute;
  top: 14px;
  right: 14px;
  font: 500 11.5px/1 var(--mono);
  color: var(--ink-50);
}
.tab:hover {
  background: var(--m-soft);
}
.tab[aria-selected='true'] {
  background: var(--m-soft);
  box-shadow:
    0 0 0 2px var(--m),
    0 18px 34px -18px var(--m-glow);
}
.tab[aria-selected='true'] .tab-ic {
  background: var(--m);
  color: #fff;
}
.panels {
  display: grid;
  gap: 96px;
  min-width: 0;
}
html.js .mod-panel:not(.is-on) {
  display: none;
}
.mod-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
html.js .mod-panel.is-on {
  animation: panel-in 0.45s var(--ease);
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
/* A real screenshot in place of a drawn frame: never wider than its own size,
   and scaled down to the tile's height where the tile is a fixed square. */
.d-text h3 {
  font: 500 36px/1.12 var(--sans);
  letter-spacing: -0.03em;
  margin: 18px 0;
  text-wrap: balance;
}
.d-text > p:not(.status) {
  color: var(--ink-70);
  font-size: 18px;
  margin-bottom: 22px;
}
.d-text > p.list-label {
  margin: 6px 0 12px;
  font-size: 11.5px;
  color: var(--ink-50);
}
.d-text .has-list {
  margin-bottom: 22px;
  color: var(--ink-70);
  font-size: 16.5px;
  line-height: 1.5;
}
.d-text .soon-list {
  margin-bottom: 22px;
}
.d-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

/* ------------------------------------------------------------ chat parts */
/* The live conversation's bubbles, answer card, chips and hand-off. --on is the text colour's channels,
   so rgb(var(--on) / .5) is "half-strength text". */
.chat {
  --on: 11 26 47;
  --strong: var(--ink);
  --link: var(--brand);
  --link-hover: var(--brand-deep);
  --accent: var(--brand);
  --accent-tint: rgb(23 99 184 / 0.1);
  --card-bg: #fff;
  --card-ring: 0 0 0 1px var(--ink-06), var(--shadow-soft);
  --bubble-bg: var(--brand);
  --bubble-fg: #fff;
  --bubble-ring: none;
  --chip-bg: #fff;
  --chip-fill: rgb(255 255 255 / 0.75);
}
.ic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  color: var(--night-accent);
}
.ic .ico {
  width: 17px;
  height: 17px;
}
.msg-u {
  align-self: flex-end;
  max-width: 85%;
  font: 500 14.5px/1.55 var(--mono);
  background: var(--bubble-bg);
  box-shadow: var(--bubble-ring);
  border-radius: 14px;
  padding: 10px 14px;
  color: var(--bubble-fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.dots {
  display: inline-flex;
  gap: 4px;
}
.dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  animation: dot 1.2s var(--ease) infinite;
}
.dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dot {
  50% {
    opacity: 0.3;
    transform: translateY(-2px);
  }
}
.card {
  position: relative;
  background: var(--card-bg);
  box-shadow: var(--card-ring);
  border-radius: 22px;
  padding: 24px 26px 16px;
  color: rgb(var(--on) / 0.9);
  font-size: 16px;
  line-height: 1.62;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 24px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent);
}
.card-body p {
  margin: 0 0 10px;
}
.card-body ul,
.card-body ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.card-body li {
  margin: 4px 0;
}
.card-body li::marker {
  color: var(--accent);
}
.card-body strong {
  color: var(--strong);
  font-weight: 600;
}
.card-body a {
  color: var(--link);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--on) / 0.08);
}
.src {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px 0 7px;
  border-radius: 999px;
  background: rgb(var(--on) / 0.07);
  font: 500 13px/1 var(--sans);
  color: var(--strong);
  white-space: nowrap;
}
.src:hover {
  background: rgb(var(--on) / 0.14);
  box-shadow: inset 0 0 0 1px rgb(var(--on) / 0.22);
}
.src .s {
  display: inline-flex;
}
.src .s i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-left: -7px;
  background: var(--chip-bg);
  box-shadow: 0 0 0 1px rgb(var(--on) / 0.18);
  color: var(--accent);
}
.src .s i:first-child {
  margin-left: 0;
  color: var(--link);
}
.src .s .ico {
  width: 12px;
  height: 12px;
}
.ibtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgb(var(--on) / 0.72);
}
button.ibtn:hover {
  background: rgb(var(--on) / 0.08);
  color: var(--strong);
}
.ibtn[aria-pressed='true'] {
  color: var(--accent);
  background: var(--accent-tint);
}
.ibtn .ico {
  width: 17px;
  height: 17px;
}
.acts .t {
  margin-left: auto;
  font: 400 12px/1 var(--mono);
  color: rgb(var(--on) / 0.5);
}
.follow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.follow button,
.chip-q {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 22px;
  text-align: left;
  background: var(--chip-fill);
  box-shadow: inset 0 0 0 1px rgb(var(--on) / 0.18);
  color: rgb(var(--on) / 0.84);
  font-size: 14.5px;
  line-height: 1.4;
}
.follow button:hover,
.chip-q:hover {
  background: rgb(var(--on) / 0.07);
  box-shadow: inset 0 0 0 1px rgb(var(--on) / 0.4);
  color: var(--strong);
}
.handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(120deg, rgb(39 201 179 / 0.14), rgb(23 99 184 / 0.16));
  box-shadow: inset 0 0 0 1px rgb(127 227 212 / 0.22);
}
.handoff p {
  flex: 1 1 220px;
  color: var(--strong);
  font-weight: 500;
  font-size: 15.5px;
}
.handoff-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.handoff .pill {
  height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
}

/* ------------------------------------------------------------ accordions */
/* ---------------------------------------------------------------- reviews */
.reviews {
  --star: #f2a516;
  --star-off: #d9dfe7;
  padding: 0 0 150px;
}
/* Two reviews side by side (one on a narrow screen). --per is the one place that says how many;
   reviews.js reads it. The cards are drawn by the stage, so they stay still while the reviews
   change, and every review sits in the same row, so the row is as tall as the tallest review and
   the page never jumps when one replaces another. */
.rv-stage {
  --per: 2;
  display: grid;
  grid-template-columns: repeat(var(--per), minmax(0, 1fr));
  column-gap: 20px;
  touch-action: pan-y;
}
.rv-card {
  --r: 36px;
  grid-area: 1 / 1;
  background: var(--mist);
}
.rv-card + .rv-card {
  grid-column: 2;
}
.rv-slide {
  --r: 36px;
  --lag: 0ms;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: clamp(24px, 3.2vw, 44px);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.25s var(--ease),
    visibility 0s 0.25s;
}
.rv-slide[data-slot='1'] {
  --lag: 140ms;
  grid-column: 2;
}
.rv-slide.is-on {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s var(--ease) var(--lag);
}
.rv-who {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rv-ava {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.rv-ava::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
/* Initials under the photo, in three of the site's tints so neighbours never look alike. */
.rv-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #e3ecf7;
  color: var(--brand-deep);
  font-weight: 600;
  line-height: 1;
}
.rv-face[data-tone='1'] {
  background: #e1f6f2;
  color: var(--teal);
}
.rv-face[data-tone='2'] {
  background: var(--soon-bg);
  color: var(--soon);
}
.rv-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rv-ava .rv-face {
  font-size: 19px;
  box-shadow:
    0 0 0 3px #fff,
    0 6px 18px rgb(11 26 47 / 0.12);
}
.rv-id {
  display: grid;
  min-width: 0;
}
.rv-name {
  font: 600 16px/1.3 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-meta {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-50);
}
/* Short quotes are set large and long ones small (build.mjs sizes each language), so every card
   reads as one block. The opening mark hangs in the margin. */
.rv-quote {
  position: relative;
  margin: 0;
  font-family: var(--serif);
  letter-spacing: -0.02em;
}
.rv-quote [data-size='xl'] {
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.08;
  font-style: italic;
}
.rv-quote [data-size='l'] {
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.16;
}
.rv-quote [data-size='m'] {
  font-size: clamp(23px, 2.1vw, 29px);
  line-height: 1.24;
}
.rv-quote [data-size='s'] {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.36;
  letter-spacing: -0.01em;
}
.rv-mark {
  position: absolute;
  left: -0.5em;
  color: var(--brand);
  font-style: normal;
}
.rv-rest {
  color: transparent;
}
/* The caret takes no width, so typing never moves a line break. */
.rv-typed::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-right: -2px;
  vertical-align: -0.1em;
  background: var(--brand);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.is-typing .rv-typed::after {
  opacity: 1;
}
.rv-body {
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-70);
}
.is-live .rv-body {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.is-live .is-typed .rv-body {
  opacity: 1;
}
.rv-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: auto;
}
.rv-stars {
  display: flex;
  gap: 4px;
}
.rv-star {
  --c: var(--star);
  --i: 0;
  width: 24px;
  height: 24px;
  fill: var(--c);
  stroke: var(--c);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.rv-star:nth-child(2) {
  --i: 1;
}
.rv-star:nth-child(3) {
  --i: 2;
}
.rv-star:nth-child(4) {
  --i: 3;
}
.rv-star:nth-child(5) {
  --i: 4;
}
.rv-star.is-off,
.is-live .rv-slide:not(.is-rated) .rv-star {
  --c: var(--star-off);
}
.rv-note {
  font-size: 13px;
  color: var(--ink-50);
}
.rv-foot {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  margin-top: 16px;
}
.rv-ctrls {
  display: flex;
  flex: none;
  gap: 8px;
}
/* Everyone who wrote a review, in one line: pick a face to read what they wrote. */
.rv-line {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 4px;
  padding: 4px 40px 4px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 56px), transparent);
}
.rv-line::-webkit-scrollbar {
  display: none;
}
.rv-pick {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.rv-pick .rv-face {
  width: 40px;
  height: 40px;
  font-size: 14px;
  opacity: 0.6;
  filter: saturate(0);
  transform: scale(0.86);
  transition:
    opacity 0.3s var(--ease),
    filter 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.rv-pick[aria-current='true'] .rv-face {
  opacity: 1;
  filter: none;
  transform: none;
}
@media (hover: hover) {
  .rv-pick:hover .rv-face {
    opacity: 1;
    filter: none;
  }
}
/* A ring runs once around each face on screen while its review is read; when it closes, the next
   reviews open. Pausing pauses the ring, so nothing else keeps time. */
@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.rv-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--brand-deep) var(--p), var(--ink-12) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.rv-pick[aria-current='true'] .rv-ring {
  opacity: 1;
}
.rv-pick.is-counting .rv-ring {
  animation: rv-count var(--dwell, 6s) linear forwards;
}
.is-paused .rv-ring {
  animation-play-state: paused;
}
@keyframes rv-count {
  from {
    --p: 0%;
  }
  to {
    --p: 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .rv-slide.is-on .rv-id {
    animation: rv-rise 0.5s var(--ease) calc(0.2s + var(--lag)) both;
  }
  .rv-slide.is-on .rv-mark {
    animation: rv-rise 0.5s var(--ease) calc(0.32s + var(--lag)) both;
  }
  .rv-slide.is-on .rv-ava::after {
    animation: rv-ping 0.9s ease-out calc(0.5s + var(--lag)) both;
  }
  .is-rated .rv-star:not(.is-off) {
    animation: rv-pop 0.55s var(--ease) calc(var(--i) * 95ms) both;
    transition:
      fill 0.12s linear calc(var(--i) * 95ms + 80ms),
      stroke 0.12s linear calc(var(--i) * 95ms + 80ms);
  }
}
@keyframes rv-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes rv-ping {
  from {
    box-shadow: 0 0 0 0 rgb(39 201 179 / 0.4);
  }
  to {
    box-shadow: 0 0 0 12px rgb(39 201 179 / 0);
  }
}
@keyframes rv-pop {
  0% {
    transform: scale(0.3) rotate(-30deg);
  }
  60% {
    transform: scale(1.25) rotate(8deg);
  }
  100% {
    transform: none;
  }
}
/* Until reviews.js has taken over (or if it never loads), every review is simply listed. */
.rv-carousel:not(.is-live) .rv-stage {
  gap: 20px;
}
.rv-carousel:not(.is-live) .rv-card,
.rv-carousel:not(.is-live) .rv-foot {
  display: none;
}
.rv-carousel:not(.is-live) .rv-slide {
  grid-area: auto;
  visibility: visible;
  opacity: 1;
  background: var(--mist);
}

.acc {
  border-top: 1px solid var(--ink-12);
}
.acc-item {
  border-bottom: 1px solid var(--ink-12);
}
.acc-btn {
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  text-align: left;
  font: 500 21px/1.35 var(--sans);
  letter-spacing: -0.015em;
}
.acc-btn:hover {
  color: var(--brand-deep);
}
.acc-btn .ico {
  transition: transform 0.3s var(--ease);
}
.acc-btn[aria-expanded='true'] .ico {
  transform: rotate(180deg);
}
html:not(.js) .acc-btn .ico {
  display: none;
}
html.js .acc-panel {
  display: none;
}
html.js .acc-item.is-open .acc-panel {
  display: block;
  animation: panel-in 0.35s var(--ease);
}
.acc-panel {
  padding: 0 64px 28px 0;
  color: var(--ink-70);
  font-size: 17.5px;
}
.acc-panel p + p,
.acc-panel p + ul,
.acc-panel ul + p,
.acc-panel p + ol {
  margin-top: 12px;
}
.acc-panel ul,
.acc-panel ol {
  margin-block: 0;
  padding-left: 22px;
}
.acc-panel li + li {
  margin-top: 6px;
}
.acc-panel a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.acc-panel strong {
  color: var(--ink);
}
.ask-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  border-bottom: 1px solid var(--ink-12);
}
.ask-row input {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 21px/1.35 var(--sans);
  letter-spacing: -0.015em;
}
.ask-row input::placeholder {
  color: var(--ink-50);
  opacity: 1;
}
.ask-row:focus-within {
  box-shadow: 0 2px 0 var(--ink);
}
.ask-row .send {
  width: 44px;
  height: 44px;
}

/* ---------------------------------------------------------------- footer */
.foot {
  margin-top: 0;
  padding: 200px 0 calc(var(--dock-h) + 96px);
  background: var(--foot);
  text-align: center;
}
.foot-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.foot-nav a {
  font: 400 clamp(32px, 3.8vw, 54px) / 1.18 var(--serif);
  letter-spacing: -0.03em;
  padding: 0 10px;
  border-radius: 10px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  text-underline-offset: 8px;
}
.foot-nav a:hover {
  text-decoration-color: currentColor;
}
.foot-nav a[aria-current='page'] {
  font-style: italic;
  color: var(--brand-deep);
}
/* The word is about 2.6em wide: the second term lets it shrink with a very narrow window instead of
   pushing the whole page sideways (the 120px floor alone does that below 314px). */
.wordmark {
  margin: 150px 0 60px;
  font: 400 min(clamp(120px, 24vw, 360px), calc((100vw - 40px) / 2.7)) / 0.9 var(--serif);
  letter-spacing: -0.055em;
  user-select: none;
}
.credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  font: 500 15px/1.4 var(--sans);
  color: var(--ink-70);
}
.credit-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.credit-line img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.credit-line .ico {
  width: 16px;
  height: 16px;
}
.credit-line:hover {
  color: var(--ink);
}
.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 28px;
  margin-top: 40px;
  font-size: 15px;
  color: var(--ink-70);
}
.legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}
.legal a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------ dock */
/* Not an input: the page has one ask box, and this is the way back to it. */
.dock {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 0 1px var(--ink-12),
    0 10px 40px rgba(6, 20, 40, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(16px) scale(0.6);
  transition:
    transform 0.48s var(--ease),
    opacity 0.3s var(--ease),
    visibility 0s 0.48s;
}
.dock.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  transition:
    transform 0.48s var(--ease),
    opacity 0.3s var(--ease);
}
.dock-ask {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 600 15.5px/1 var(--sans);
  white-space: nowrap;
}
.dock-ask:hover {
  background: var(--ink-hover);
  box-shadow: var(--lift);
}
.dock-ask .ico {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------- the ask box and its conversation */
/* One input per page; the conversation opens right under it, light like the page around it.
   On the home page opening it folds the hero's pitch away (.is-asking, set by ask.js) and the
   box is pinned under the header while the thread scrolls beneath. */
.ask-unit {
  text-align: left;
}
.ask-unit.is-open .starters,
.ask-unit.is-open .human {
  display: none;
}
.ask-unit.is-open .ask {
  margin-top: 0;
  max-width: none;
}
/* The box is pinned under the header while the thread scrolls. Once it is stuck (ask.js sets
   .is-stuck) it sits on a frosted plate that reads as part of the header. */
.hero .ask-unit.is-open > .ask-pin {
  position: sticky;
  top: var(--hdr-b);
  z-index: 3;
  margin-inline: calc(50% - 50vw);
  padding: 8px calc(50vw - 50%) 14px;
}
.hero .ask-unit.is-stuck > .ask-pin {
  background: rgb(255 255 255 / 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
}
.ask-unit {
  scroll-margin-top: calc(var(--hdr-b) + 12px);
}
.hero .hero-panel.is-asking {
  grid-template-columns: minmax(0, 1fr);
  padding-top: calc(var(--hdr-h) + 40px);
  padding-bottom: 56px;
}
.is-asking .scene,
.is-asking .eyebrow,
.is-asking .lede {
  display: none;
}
/* The headline stays in the page for screen readers while the conversation has the room. */
.is-asking .h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.is-asking .hero-copy {
  width: min(100%, 760px);
  margin-inline: auto;
}
.ask .count,
.ask-row .count {
  align-self: center;
  font: 400 12px/1 var(--mono);
  color: var(--ink-50);
}
.count.is-over {
  color: var(--danger);
}
.ask-unit .send .i-stop,
.ask-unit.is-busy .send .i-send {
  display: none;
}
.ask-unit.is-busy .send .i-stop {
  display: block;
}
.ask-unit .send[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
}
.ask-alert:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgb(180 35 24 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(180 35 24 / 0.2);
  color: var(--danger);
  font-size: 14.5px;
}
.ask-alert button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.chat {
  margin-top: 20px;
  animation: chat-in 0.4s var(--ease);
}
.chat[hidden] {
  display: none;
}
@keyframes chat-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.chat [data-show] {
  display: none;
}
.chat[data-mode='ai'] [data-show='ai'],
.chat[data-mode='faq'] [data-show='faq'] {
  display: inline;
}
.chat-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 44px;
}
.chat-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.chat-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ink-50);
}
.chat[data-mode='ai'] .chat-dot {
  background: var(--mint);
  box-shadow: 0 0 0 4px rgb(39 201 179 / 0.2);
}
.chat-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font: 500 14px/1 var(--sans);
  color: var(--ink-70);
}
.chat-new .ico {
  width: 16px;
  height: 16px;
}
.chat-new:hover {
  background: var(--ink-06);
  color: var(--ink);
}
.chat-banner {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--ink-04);
  color: var(--ink-70);
  font-size: 14px;
}
.chat-banner .ico {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ink-50);
}
.chat[data-banner='paused'] [data-banner-for='paused'] {
  display: flex;
}
.chat-empty {
  padding: 16px 0 8px;
}
.chat-hello {
  font: 400 clamp(22px, 2.4vw, 28px) / 1.2 var(--serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.chat-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.chat.has-log .chat-empty {
  display: none;
}
.chat-log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0 0;
}
.chat-log:empty {
  padding: 0;
}
.chat .msg-u {
  font: 500 15.5px/1.5 var(--sans);
  border-radius: 20px 20px 6px 20px;
}
.chat .msg-a {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 12.5px/1.4 var(--mono);
  color: rgb(var(--on) / 0.62);
}
.msg-label .ico {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.chat .card::before {
  content: none;
}
.chat .handoff {
  background: linear-gradient(120deg, var(--brand-deep), var(--brand));
  box-shadow: none;
}
.chat .handoff p {
  color: #fff;
}
.card .w {
  opacity: 0;
  animation: w-in 0.2s var(--ease) forwards;
  animation-delay: calc(var(--i) * 14ms);
}
@keyframes w-in {
  to {
    opacity: 1;
  }
}
.src-list {
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px dashed rgb(var(--on) / 0.12);
}
.src-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--link);
  font-size: 14.5px;
}
.src-list a:hover,
.fb-note a:hover {
  color: var(--link-hover);
}
.src-list small {
  color: rgb(var(--on) / 0.55);
  font: 400 12px/1 var(--mono);
}
.fb-note {
  width: 100%;
  font-size: 14px;
  color: rgb(var(--on) / 0.74);
}
.fb-note a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.safety {
  padding: 18px 20px;
  border-radius: 20px;
  background: rgb(180 35 24 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(180 35 24 / 0.22);
  color: var(--danger);
  font-weight: 500;
}
.ctx-chip:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}
.ctx-chip > span {
  padding: 5px 4px 5px 12px;
  border-radius: 999px 0 0 999px;
  background: var(--accent-tint);
  color: var(--brand-deep);
  font: 600 12.5px/1.2 var(--sans);
}
.ctx-chip button {
  width: 36px;
  height: 30px;
  border-radius: 0 999px 999px 0;
  display: grid;
  place-items: center;
  background: var(--accent-tint);
  color: var(--brand-deep);
}
.ctx-chip button:hover {
  background: rgb(23 99 184 / 0.2);
}
.ctx-chip button .ico {
  width: 14px;
  height: 14px;
}
.chat-note {
  margin: 24px 4px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-50);
}
.chat-note a {
  color: var(--ink-70);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chat-note a:hover {
  color: var(--ink);
}

/* ------------------------------------------------------- product stages */
/* A real capture of the product on a coloured stage. Each feature has one hue (.m-*), set on its tab,
   panel, section and stage together: --m is the strong colour (icons, rings), --m-soft the tint,
   --m-mid the glow behind the screen, --m-glow the same glow as a shadow. */
.m-sun {
  --m: #a85f00;
  --m-soft: #fff1d1;
  --m-mid: rgb(246 194 91 / 0.62);
  --m-glow: rgb(214 140 20 / 0.45);
}
.m-blue {
  --m: #1763b8;
  --m-soft: #e1edff;
  --m-mid: rgb(111 164 235 / 0.6);
  --m-glow: rgb(23 99 184 / 0.4);
}
.m-teal {
  --m: #0b6b5d;
  --m-soft: #d6f4ee;
  --m-mid: rgb(60 200 177 / 0.55);
  --m-glow: rgb(13 150 130 / 0.4);
}
.m-green {
  --m: #17703a;
  --m-soft: #ddf5e3;
  --m-mid: rgb(98 202 130 / 0.55);
  --m-glow: rgb(30 140 70 / 0.4);
}
.m-violet {
  --m: #5a3fd0;
  --m-soft: #ebe6ff;
  --m-mid: rgb(145 126 242 / 0.55);
  --m-glow: rgb(90 63 208 / 0.4);
}
.m-rose {
  --m: #b82049;
  --m-soft: #ffe3e9;
  --m-mid: rgb(245 124 150 / 0.55);
  --m-glow: rgb(200 40 80 / 0.4);
}
.m-night {
  --m: #0d6b5e;
  --m-soft: #d9f7f2;
  --m-mid: rgb(39 201 179 / 0.5);
  --m-glow: rgb(39 201 179 / 0.45);
}
.stage {
  --r: 40px;
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 0.74;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgb(11 26 47 / 0.08) 1px, transparent 0) 0 0 / 18px 18px,
    radial-gradient(85% 75% at 100% 0%, var(--m-mid), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, var(--m-mid), transparent 66%),
    var(--m-soft);
}
/* The AI stage is the page's dark room in small: the night colour with the mint and blue glows. */
.stage.m-night {
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.08) 1px, transparent 0) 0 0 / 18px 18px,
    radial-gradient(80% 70% at 100% 0%, rgb(39 201 179 / 0.4), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgb(23 99 184 / 0.5), transparent 66%),
    var(--night);
}
/* The screen is set larger than the stage and bleeds off its right and bottom edges, so the type
   stays readable and the app looks like it goes on. The callouts sit on the stage, not the screen. */
.stage-fig {
  position: absolute;
  top: 16%;
  left: 6%;
  width: 120%;
}
/* Where a screen keeps what it is about decides how it is cropped. The default (above) shows the left
   of the screen and lets the right bleed off the stage; the three variants are for the captures whose point is
   somewhere else, so the stage never cuts it off. */
/* Everything on it matters (the stock alerts' chips and the overview's counts sit at the right edge). */
.stage-fig.is-whole {
  left: 4%;
  width: 96%;
}
/* The totals and the Thu tiền button are at the right; the item names, at the left, stay in. */
.stage-fig.is-right {
  left: auto;
  right: -2%;
  width: 112%;
}
/* The AI panel is the right 38% of the screen, so it is anchored to the stage's right edge and it is the page
   behind it that gets cropped. */
.stage-fig.is-panel {
  left: auto;
  right: -3%;
  width: 132%;
}
.stage-win {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 36px 60px -26px rgb(6 20 40 / 0.55),
    0 0 0 1px rgb(11 26 47 / 0.1);
}
.callout {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  background: #fff;
  font: 600 13.5px/1.2 var(--sans);
  color: var(--ink);
  white-space: nowrap;
  box-shadow:
    0 14px 28px -10px rgb(6 20 40 / 0.4),
    0 0 0 1px rgb(11 26 47 / 0.06);
}
.callout .ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--m-soft);
  color: var(--m);
}
.callout .ico {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
.c-a {
  top: 5%;
  left: 6%;
}
.c-b {
  bottom: 7%;
  left: 6%;
}
/* The patient app: three phones side by side, the middle one set lower and cut by the stage's edge. */
.stage-fig.is-phones {
  container-type: inline-size;
  inset: 0;
  width: auto;
}
/* An iPhone 18 Pro Max drawn to Apple's published measurements, in points (--pt is one point at the drawn size,
   --w the phone's width): a 440 × 956 screen with 62 pt corners (Xcode's device profile) in a body of 78.0 ×
   163.4 mm, 471 × 986 pt, so the edge is 15.5 pt all round: a 4 pt silver aluminium rim round black glass. */
.pbez {
  --w: 28cqw;
  --pt: calc(var(--w) / 471);
  position: absolute;
  width: var(--w);
  aspect-ratio: 780 / 1634;
  padding: calc(11.5 * var(--pt));
  border: calc(4 * var(--pt)) solid transparent;
  border-radius: calc(77.5 * var(--pt));
  background:
    linear-gradient(#0b0f16 0 0) padding-box,
    linear-gradient(140deg, #f4f5f7, #b4bac4 24%, #e8eaee 50%, #a3aab5 76%, #f6f7f9) border-box;
  box-shadow:
    0 36px 56px -22px rgb(6 20 40 / 0.6),
    0 0 0 0.5px rgb(11 26 47 / 0.24);
}
.pbez img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(62 * var(--pt));
  object-fit: cover;
}
/* The Dynamic Island, level with the status bar's clock. Apple gives no size: a side-by-side photo of the phones
   puts it a quarter narrower than the 17 Pro's 126 × 37 pt. */
.pbez::before {
  content: '';
  position: absolute;
  top: calc((11.5 + 17) * var(--pt));
  left: 50%;
  width: calc(96 * var(--pt));
  height: calc(37 * var(--pt));
  margin-left: calc(-48 * var(--pt));
  border-radius: calc(18.5 * var(--pt));
  background: #000;
}
.pbez-a {
  left: 6%;
  top: 10%;
}
.pbez-b {
  left: 36%;
  top: 23%;
}
.pbez-c {
  left: 66%;
  top: 10%;
}
.pbez-solo {
  --w: 34cqw;
  left: 33%;
  top: 9%;
}
.stage-ph .c-a {
  top: 8%;
  right: 5%;
  left: auto;
}
.stage-ph .c-b {
  bottom: 9%;
  left: 5%;
}
/* The hero's stage: one per example question, swapped by site.js like the slides it replaces. */
.stage-slides {
  position: relative;
  aspect-ratio: 1 / 0.8;
}
.stage-slides .stage-fig {
  top: 17%;
  left: 4%;
  width: 97%;
}
/* The hero stage is the smallest one on the page, so a staff screen is set larger in it than
   anywhere else (the table text stays about 11px) and its right edge bleeds off the stage. The
   phones slide keeps its own composition. */
.stage-slides .stage-fig:not(.is-phones) {
  width: 124%;
}
.stage-slides .stage {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  box-shadow:
    0 0 0 6px #fff,
    0 26px 48px -14px rgba(6, 20, 40, 0.38);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .mod-panel.is-on .callout,
  .slide.is-on .callout {
    animation: callout-in 0.55s var(--ease) 0.15s backwards;
  }
  html.js .mod-panel.is-on .c-b,
  .slide.is-on .c-b {
    animation-delay: 0.28s;
  }
}
@keyframes callout-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}
/* On the feature pages the stage sits beside the text, alternating sides; it takes the wider column
   either way, as it does in the home page's explorer, so the same screen reads the same size. */
.duo-card .stage {
  margin-top: 32px;
}

/* --------------------------------------------------------- iPhone Duo */
/* The phone drawn to Apple's published measurements, in points (--pt is one point at the drawn size): an inner
   screen of 951 × 669 open like a book and an outer one of 466 × 678, in a body of 991 × 709 (6.48 × 4.64 in)
   whose edge is a 4 pt titanium rim round black glass. Open, it is one flat body and screen (.fd-body), so
   nothing runs down the middle. While it folds (.is-folding) the body shows only its right half, and a flap
   hinged at the centre lies over the left: the flap's back is the inner screen's left half and its front the
   outer screen, so turning the flap over folds the phone.
   --open, 0 folded to 1 open, comes from the scroll (site.js); without it the phone is open. --a is the flap's
   angle and --f how far the phone has turned, eased from 0 to 1, which brings it down from the larger size it
   is drawn at while folded (--zoom). On the way the phone turns up to 32° to show its right side (--yaw), as a
   product shot does, so --v is the flap's angle as the viewer sees it; the phone moves to keep its outline
   centred and is drawn a little smaller while turned, so the half nearer the viewer fits. The light is at the viewer: a face darkens as it turns away, the halves shade each other by the
   hinge, and the shadow on the stage is as wide as the phone's footprint. Only transforms, opacity and colour
   change. */
.fold {
  --a: calc(var(--open, 1) * 180deg);
  --f: calc((1 - cos(var(--a))) / 2);
  --yaw: calc(32deg * sin(var(--a)));
  --v: calc(var(--a) + var(--yaw));
  padding: 104px 0 24px;
}
.fold-head {
  margin-bottom: 32px;
  text-align: center;
}
.fold-stage {
  --r: 40px;
  --zoom: 1;
  --L: min(720px, 100cqw);
  container-type: inline-size;
  position: relative;
  overflow: clip;
  padding: 56px 24px;
  background:
    radial-gradient(circle at 1px 1px, rgb(11 26 47 / 0.07) 1px, transparent 0) 0 0 / 18px 18px,
    radial-gradient(70% 80% at 100% 0%, rgb(111 164 235 / 0.42), transparent 62%),
    radial-gradient(60% 70% at 0% 100%, rgb(39 201 179 / 0.22), transparent 66%),
    #eaf1fb;
}
.fold-dev {
  --pt: calc(var(--L) / 991);
  --rim: calc(4 * var(--pt));
  --t: calc(31 * var(--pt));
  position: relative;
  width: var(--L);
  aspect-ratio: 991 / 709;
  margin: 0 auto;
  perspective: calc(4800 * var(--pt));
  transform: scale(calc((1 - (1 - 1 / var(--zoom)) * var(--f)) * (1 - 0.1 * sin(var(--a)))))
    translateX(calc(-25% * (cos(var(--yaw)) + min(0, cos(var(--v))))));
}
/* The shadow on the stage: the right half while the flap is up, growing left as the flap comes down. Its box
   sits well inside the phone's outline, so no corner of it shows past the phone's. */
.fold-dev::before {
  content: '';
  position: absolute;
  inset: calc(40 * var(--pt));
  border-radius: calc(40 * var(--pt));
  box-shadow:
    0 calc(40 * var(--pt)) calc(80 * var(--pt)) calc(2 * var(--pt)) rgb(6 20 40 / 0.5),
    0 calc(14 * var(--pt)) calc(28 * var(--pt)) calc(26 * var(--pt)) rgb(6 20 40 / 0.24);
  transform-origin: 100% 50%;
  transform: scaleX(calc(0.5 + max(0, -0.5 * cos(var(--a)))));
}
.fd-body,
.fd-face {
  border: var(--rim) solid transparent;
  background:
    linear-gradient(#0b0f16 0 0) padding-box,
    linear-gradient(140deg, #9ba4b4, #3d4554 24%, #1d232d 50%, #4b5464 76%, #a6afbe) border-box;
}
.fd-body {
  position: absolute;
  inset: 0;
  border-radius: calc(75 * var(--pt));
}
/* Folded flat, the body hides under the flap altogether, so the flap's rounder hinge corners show. */
.is-folding .fd-body {
  clip-path: inset(0 0 0 50%);
  opacity: clamp(0, var(--open) * 25, 1);
  transform: rotateY(calc(-1 * var(--yaw)));
}
/* Everything turns about the hinge: the body's right half (.fd-slab, the slab under its screen) by --yaw, and
   the flap by --v. */
.fd-slab,
.fd-flap {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  visibility: hidden;
}
.fd-slab {
  transform: rotateY(calc(-1 * var(--yaw)));
}
.fd-flap {
  transform: rotateY(calc(-1 * var(--v)));
}
.is-folding .fd-slab,
.is-folding .fd-flap {
  visibility: visible;
}
.fd-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
/* Each half is a slab --t thick (5.2 mm): the flap's inner screen lies on the hinge's plane, so it is flush with
   the body's once open, its outer screen is --t above it, and the body's slab is --t below its screen. Two
   titanium plates inside each slab fill its sides where they show past the near face. */
.fd-front {
  transform: translateZ(var(--t));
  border-radius: calc(24 * var(--pt)) calc(70 * var(--pt)) calc(70 * var(--pt)) calc(24 * var(--pt));
}
.fd-slab::before,
.fd-slab::after,
.fd-flap::before,
.fd-flap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(24 * var(--pt)) calc(72 * var(--pt)) calc(72 * var(--pt)) calc(24 * var(--pt));
  background: #4f5764;
  transform: translateZ(calc(var(--t) * 0.08));
}
.fd-flap::after {
  transform: translateZ(calc(var(--t) * 0.92));
}
.fd-slab::before,
.fd-slab::after {
  border-radius: 0 calc(75 * var(--pt)) calc(75 * var(--pt)) 0;
  transform: translateZ(calc(var(--t) * -0.08));
}
.fd-slab::after {
  transform: translateZ(calc(var(--t) * -0.92));
}
.fd-back {
  transform: rotateY(180deg);
  border-right-width: 0;
  border-radius: calc(75 * var(--pt)) 0 0 calc(75 * var(--pt));
}
.fd-screen {
  position: absolute;
  overflow: hidden;
  background: #fff;
}
.fd-screen img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-width: none;
}
.fd-in {
  inset: calc(16 * var(--pt));
  border-radius: calc(55 * var(--pt));
}
.fd-in img,
.fd-out img {
  width: 100%;
}
.fd-in-l {
  top: calc(16 * var(--pt));
  bottom: calc(16 * var(--pt));
  right: 0;
  width: calc(475.5 * var(--pt));
  border-radius: calc(55 * var(--pt)) 0 0 calc(55 * var(--pt));
}
.fd-in-l img {
  width: 200%;
}
/* The flap's free edge, the slab's titanium side at right angles to it. Seen square on it runs the phone's whole
   height, darker at the ends where its corners turn away; seen at a slant those corners show as the plates
   instead, so it shortens by up to the 70 pt corner radius at each end. It darkens as it turns away. (The body's
   side is only ever seen at a slant, so its plates draw it.) */
.fd-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--t);
  border-radius: calc(var(--t) / 6);
  background:
    linear-gradient(rgb(6 13 26 / 0.45), transparent 9%, transparent 91%, rgb(6 13 26 / 0.45)),
    linear-gradient(90deg, #262c37, #7c8595 20%, #c5ccd6 46%, #8a93a2 66%, #2c333f);
  transform-origin: 100% 50%;
  transform: rotateY(90deg) scaleY(calc(1 - 140 / 709 * sqrt(1 - sin(var(--v)) * sin(var(--v)))));
}
.fd-edge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(6 13 26);
  opacity: calc(0.6 * (1 - sin(var(--v))));
}
/* The outer screen: tight corners on the hinge side, round ones on the other. */
.fd-out {
  top: calc(11.5 * var(--pt));
  left: calc(10.5 * var(--pt));
  width: calc(466 * var(--pt));
  height: calc(678 * var(--pt));
  border-radius: calc(10 * var(--pt)) calc(55 * var(--pt)) calc(55 * var(--pt)) calc(10 * var(--pt));
}
/* A face turning away from the light darkens, and so does the screen under the flap. */
.fd-face::after,
.fd-in::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--rim));
  border-radius: inherit;
  background: rgb(6 13 26);
  pointer-events: none;
}
.fd-in::after {
  inset: 0;
  opacity: calc((1 + cos(var(--a))) * 0.12);
}
.fd-front::after {
  opacity: calc((1 - cos(var(--v))) * (1 - cos(var(--v))) * 0.7);
}
.fd-back::after {
  right: 0;
  opacity: calc((1 + cos(var(--v))) * (1 + cos(var(--v))) * 0.7);
}
/* The two halves shade each other on both sides of the hinge, most with the flap upright. The light is at the
   viewer, so the flap's own shadow falls behind it and only this shows. */
.fd-in::before,
.fd-in-l::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  z-index: 1;
  background: linear-gradient(90deg, rgb(6 13 26 / 0.3), rgb(6 13 26 / 0.06) 40%, transparent);
  transform-origin: 0 50%;
  transform: scaleX(calc(0.35 * sin(var(--a))));
  pointer-events: none;
}
.fd-in-l::before {
  left: 0;
  width: 100%;
  background: linear-gradient(270deg, rgb(6 13 26 / 0.3), rgb(6 13 26 / 0.06) 40%, transparent);
  transform-origin: 100% 50%;
}
/* Scroll-driven (.is-scrub, set by site.js unless motion is reduced or the window is short): the section is
   90svh longer than a screen, and the heading and stage stay on screen while the page goes through that length,
   which turns the phone. The stage takes the height left under the heading, and the phone is drawn to fit it
   folded at --zoom. */
.fold.is-scrub .fold-track {
  height: calc(100svh + 90svh);
}
.fold.is-scrub .fold-pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100svh;
  padding: calc(var(--hdr-b) + 12px) 0 24px;
}
.fold.is-scrub .fold-head {
  flex: none;
  margin-bottom: 24px;
}
.fold.is-scrub .fold-stage {
  --zoom: 1.2;
  --L: min(720px * var(--zoom), 100cqw * var(--zoom), 100cqh * 991 / 709);
  container-type: size;
  flex: 1 1 0;
  max-height: 720px;
  padding: 44px 24px;
}
.fold.is-scrub .fold-dev {
  position: absolute;
  top: calc(50% - var(--L) * 709 / 991 / 2);
  left: calc(50% - var(--L) / 2);
}
.fold.is-scrub .fold-dev,
.fold.is-scrub .fold-dev::before,
.fold.is-scrub .fd-body,
.fold.is-scrub .fd-slab,
.fold.is-scrub .fd-flap,
.fold.is-scrub .fd-edge,
.fold.is-scrub .fd-in::before,
.fold.is-scrub .fd-in-l::before {
  will-change: transform;
}
.fold.is-scrub .fd-face::after,
.fold.is-scrub .fd-edge::after,
.fold.is-scrub .fd-in::after {
  will-change: opacity;
}
@media (max-width: 760px) {
  .fold {
    padding-top: 80px;
  }
  .fold-stage {
    padding: 36px 8px;
  }
  .fold.is-scrub .fold-stage {
    --zoom: 1.6;
    padding: 32px 8px;
  }
}

/* ----------------------------------------------------------- inner pages */
.section {
  padding: 112px 0;
}
.section + .section,
.modules + .section {
  padding-top: 0;
}
.section-head {
  max-width: 760px;
  margin-bottom: 44px;
}
.section-head p:not(.eyebrow, .updated) {
  margin-top: 20px;
  color: var(--ink-70);
  font-size: 19px;
}
.section-head .updated {
  margin-top: 16px;
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
.jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}
.jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.75);
  box-shadow: inset 0 0 0 1px var(--ink-12);
  font: 500 14.5px/1 var(--sans);
  color: var(--ink-70);
}
.jump a:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-50);
}
.jump .n {
  font: 500 11.5px/1 var(--mono);
  color: var(--ink-50);
}
.has-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.has-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}
.has-list .ico {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  color: var(--teal);
  stroke-width: 2.2;
}
.soon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.soon-list li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--soon-bg);
  color: var(--soon);
  font: 600 13px/1.3 var(--sans);
}
.list-label {
  margin-bottom: 12px;
  font: 600 11.5px/1.5 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.mini {
  padding: 28px 26px;
  border-radius: 28px;
  background: var(--mist);
}
.mini .ico {
  width: 22px;
  height: 22px;
  color: var(--brand);
}
.mini h3 {
  margin: 18px 0 8px;
  font: 600 18px/1.3 var(--sans);
  letter-spacing: -0.01em;
}
.mini p {
  color: var(--ink-70);
  font-size: 15.5px;
}
.status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.status-table caption {
  text-align: left;
  padding-bottom: 18px;
  color: var(--ink-70);
  font-size: 15px;
}
.status-table th,
.status-table td {
  padding: 22px 20px 22px 0;
  border-bottom: 1px solid var(--ink-12);
  text-align: left;
  vertical-align: top;
}
.status-table thead th {
  padding-block: 12px;
  font: 600 11.5px/1.5 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  border-bottom-color: var(--ink);
}
.status-table tbody th {
  font-weight: 600;
  width: 30%;
}
.status-table td small {
  display: block;
  margin-top: 6px;
  color: var(--ink-70);
  font-size: 14.5px;
}
.status-table .src-cell {
  width: 30%;
  color: var(--ink-70);
  font-size: 15px;
}
.status-table .link {
  min-height: 36px;
  font-size: 14.5px;
}
.prose {
  max-width: 720px;
  font-size: 17.5px;
}
.prose h2 {
  margin: 64px 0 16px;
  font: 400 clamp(30px, 3vw, 40px) / 1.15 var(--serif);
  letter-spacing: -0.025em;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose h3 {
  margin: 32px 0 10px;
  font: 600 19px/1.35 var(--sans);
}
.prose p,
.prose ul,
.prose ol {
  margin: 0 0 14px;
  color: var(--ink-70);
}
.prose ul,
.prose ol {
  padding-left: 22px;
}
.prose li + li {
  margin-top: 6px;
}
.prose strong {
  color: var(--ink);
}
.sec-note {
  margin-top: 28px;
  color: var(--ink-70);
  font-size: 15px;
}
.updated {
  font: 400 13px/1.5 var(--mono);
  color: var(--ink-50);
}
.split {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 64px;
  align-items: start;
}

/* ------------------------------------------------------------ legal pages */
/* Terms, privacy and the patient-app notices: the index sits beside the text and stays in view, a
   short version comes first, and each clause is a <section id> so the index and links can reach it. */
.legal-doc {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.legal-rail {
  position: sticky;
  top: calc(var(--st) + 112px);
}
.legal-index {
  margin-top: 28px;
}
.legal-index-h {
  font: 600 12px/1.5 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.legal-index ol {
  margin: 10px -12px 0;
  padding: 0;
  list-style: none;
}
.legal-index a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-70);
}
.legal-index a:hover {
  background: var(--ink-04);
  color: var(--ink);
}
.legal-brief {
  margin-bottom: 56px;
  padding: 30px 36px 18px;
  border-radius: 28px;
  background: var(--mist);
}
.legal-brief ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.legal-brief li {
  padding: 16px 0;
  border-top: 1px solid var(--ink-12);
  font: 400 clamp(19px, 1.7vw, 22px) / 1.4 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.legal-body .prose {
  max-width: none;
}
.legal-clause + .legal-clause {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--ink-12);
}
.legal-body .prose h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 2.6vw, 36px);
}
/* The app notices open with the one sentence the app puts above its sections, and close with a pointer. */
.legal-lead {
  margin-bottom: 48px;
  font: 400 clamp(21px, 2vw, 25px) / 1.45 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.legal-lead p {
  color: inherit;
}
.legal-note {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--ink-12);
  font-size: 15.5px;
}
/* Text keeps a readable line; the data ledger below may use the full column. */
.legal-clause > :not(.flow-list) {
  max-width: 720px;
}
/* The data ledger: each way this site meets a visitor's data, traced from what is taken to where it ends up. */
.flow-list {
  margin: 28px 0 0;
  border-bottom: 1px solid var(--ink-12);
}
.flow {
  padding: 28px 0;
  border-top: 1px solid var(--ink-12);
}
.flow h3 {
  margin: 0 0 18px;
  font: 400 clamp(21px, 2vw, 25px) / 1.3 var(--serif);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.flow dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px 28px;
  margin: 0;
}
.flow dt {
  margin-bottom: 6px;
  font: 600 11.5px/1.5 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.flow dd {
  margin: 0;
  color: var(--ink-70);
  font-size: 15.5px;
  line-height: 1.55;
}
/* The analytics on/off: the whole row is the button, so it is easy to hit and its state is also written out. */
.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 60px;
  margin: 8px 0 16px;
  padding: 12px 20px;
  border-radius: 20px;
  background: var(--mist);
  text-align: left;
  font-weight: 600;
  color: var(--ink);
}
.switch:hover {
  background: var(--ink-06);
}
.switch-state {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-70);
}
.switch[aria-checked='true'] .switch-off,
.switch[aria-checked='false'] .switch-on {
  display: none;
}
.switch-track {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--ink-50);
  transition: background-color 0.2s var(--ease);
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: transform 0.2s var(--ease);
}
.switch[aria-checked='true'] .switch-track {
  background: var(--brand);
}
.switch[aria-checked='true'] .switch-track::after {
  transform: translateX(20px);
}
/* Needs the script; without it the Google add-on link beside it is the way to opt out. */
html:not(.js) .switch {
  display: none;
}
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.duo-card {
  display: flex;
  flex-direction: column;
  padding: 40px 36px 36px;
  border-radius: 36px;
  background: var(--mist);
}
.duo-card h2 {
  margin: 14px 0 14px;
  font: 400 clamp(30px, 3vw, 42px) / 1.12 var(--serif);
  letter-spacing: -0.025em;
}
.duo-card h2 em {
  color: var(--brand-deep);
}
.duo-card > p:not(.eyebrow) {
  color: var(--ink-70);
}
.duo-card .has-list {
  margin-top: 24px;
}
/* The cards wrap by what the longest one needs (the email address, about 353px with its padding) and the
   last card in a row grows to fill it, so no row is left half empty and no address spills out of its card. */
.channels {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 64px;
}
.channel {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px;
  border-radius: 28px;
  background: var(--mist);
}
.channel .ico {
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
  color: var(--brand);
}
.channel b {
  font-size: 18px;
  overflow-wrap: anywhere;
}
.channel span {
  color: var(--ink-70);
  font-size: 15px;
}
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 20px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field.full {
  grid-column: 1 / -1;
}
.field label {
  font-weight: 600;
  font-size: 15px;
}
.field label .opt {
  font-weight: 400;
  color: var(--ink-70);
}
.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--mist);
  box-shadow: inset 0 0 0 1px var(--ink-12);
  font-size: 16px;
  transition: box-shadow 0.2s var(--ease);
}
.field textarea {
  min-height: 136px;
  resize: vertical;
}
.field input:not(:focus-visible, [aria-invalid='true']):hover,
.field textarea:not(:focus-visible, [aria-invalid='true']):hover {
  box-shadow: inset 0 0 0 1px var(--ink-50);
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px var(--ink);
  background: #fff;
}
.field [aria-invalid='true'] {
  box-shadow: inset 0 0 0 2px var(--danger);
}
.field-err {
  color: var(--danger);
  font-size: 14px;
}
.field-err:empty {
  display: none;
}
.consent {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ink-70);
  font-size: 15px;
}
.consent input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--ink);
}
.form-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.form-msg {
  font-size: 15px;
}
.form-msg.is-ok {
  color: var(--teal);
  font-weight: 600;
}
.form-msg.is-err {
  color: var(--danger);
}
/* What the visitor sees in place of the fields once the request is sent (contact.js adds .is-sent). */
.form-done {
  display: none;
  grid-column: 1 / -1;
  justify-items: start;
  gap: 14px;
  padding: 36px 32px;
  border-radius: 28px;
  background: var(--mist);
}
.form.is-sent > :not(.form-done) {
  display: none;
}
.form.is-sent > .form-done {
  display: grid;
}
.form-done .ico {
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: 10px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
}
.form-done-h {
  font: 400 clamp(26px, 2.4vw, 34px) / 1.15 var(--serif);
  letter-spacing: -0.025em;
}
.form-done-h:focus {
  outline: none;
}
.form-done p {
  color: var(--ink-70);
  overflow-wrap: anywhere;
}
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.ask-solo {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: left;
}

.faq-groups {
  max-width: 920px;
}
.faq-more {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 40px;
  color: var(--ink-70);
}
.faq-more .link {
  color: var(--brand);
}
.section-head .jump {
  justify-content: flex-start;
  margin-top: 28px;
}
.faq-group + .faq-group {
  margin-top: 88px;
}
.faq-group-h {
  margin-bottom: 18px;
  font: 400 clamp(28px, 2.6vw, 36px) / 1.15 var(--serif);
  letter-spacing: -0.025em;
  scroll-margin-top: calc(var(--st) + 112px);
}
.field-hint {
  color: var(--ink-70);
  font-size: 14px;
}
.consent-err {
  grid-column: 1 / -1;
  margin-top: -10px;
}
.pc-q {
  width: fit-content;
  max-width: 82%;
  margin: 10px 14px 0 auto;
  padding: 8px 12px;
  border-radius: 14px 14px 4px 14px;
  background: #0b5fdf;
  color: #fff;
}
.pc-a {
  margin: 10px 30px 0 14px;
  padding: 10px 12px;
  border-radius: 14px 14px 14px 4px;
  background: #fff;
}
.pc-a b {
  font-weight: 600;
}
.pc-note {
  margin: 8px 30px 0 14px;
  font-size: 11px;
  color: #5a6d84;
}

/* ---------------------------------------------------------- responsive */
/* The full header (nav, language switch, two pills) needs about 1135px of page in Vietnamese, so it
   gives way to Menu a little above that (a 17px classic scrollbar counts against the width). */
@media (max-width: 1160px) {
  .nav,
  .hdr-login,
  .hdr-lang {
    display: none;
  }
  .menu-btn {
    display: inline-flex;
  }
  .hdr-in {
    width: calc(100% - 2 * max(20px, var(--inset)));
    gap: 12px;
    justify-content: space-between;
  }
  .hdr-cta {
    gap: 8px;
  }
}
@media (max-width: 1100px) {
  .tile-more {
    display: inline-flex;
  }
  .hero .hero-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    padding: 132px 40px 72px;
  }
  .scene {
    width: min(100%, 680px);
    margin-inline: auto;
  }
}
/* Four cards in the auto-filling .cards grid fall to 3 + 1 once the page is a little under 1100px wide
   (a foldable unfolded on its side): two by two instead, until the grid has room for all four in a row. */
@media (min-width: 761px) and (max-width: 1135px) {
  .cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Six cards read as two rows of three wherever three fit; below that the auto-fill grid takes over. */
@media (min-width: 900px) {
  .cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1000px) {
  .rv-stage {
    --per: 1;
  }
  .rv-card + .rv-card {
    display: none;
  }
  .rv-slide[data-slot='1'] {
    grid-column: 1;
  }
  /* One review has the whole width now, so its quote is set larger for the same share of the card. */
  .rv-quote [data-size='xl'] {
    font-size: clamp(44px, 8vw, 68px);
  }
  .rv-quote [data-size='l'] {
    font-size: clamp(28px, 4.6vw, 38px);
  }
  .rv-quote [data-size='m'] {
    font-size: clamp(23px, 3.6vw, 29px);
  }
  .rv-quote [data-size='s'] {
    font-size: clamp(19px, 2.7vw, 22px);
  }
  .sec-head,
  .partner-card,
  .mod-panel,
  .split,
  .duo {
    /* minmax(0, …): a plain 1fr never goes below its content, so a fixed-width phone mockup stretched the page. */
    grid-template-columns: minmax(0, 1fr);
  }
  .sec-lede {
    justify-self: start;
  }
  .md {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .rail {
    display: flex;
    overflow-x: auto;
    padding: 4px 4px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .tab {
    flex: 0 0 156px;
    min-height: 104px;
    scroll-snap-align: start;
  }
  .legal-doc {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .legal-rail {
    position: static;
  }
  /* The index becomes a row of chips that slides sideways, like the module tabs. */
  .legal-index ol {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .legal-index a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--mist);
    font-size: 14.5px;
    white-space: nowrap;
  }
}
/* The partner card stacks at 1000px (above, with the other two-column blocks), which leaves its photos on the left of a wide empty card at 951px:
   from 861px the copy and the photos stay side by side, a little tighter. */
@media (min-width: 861px) and (max-width: 1000px) {
  .partner-card {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    padding: 56px 40px;
  }
}
@media (max-width: 640px) {
  :root {
    --gut: 16px;
    --dock-h: 60px;
  }
  .channel b {
    font-size: 16px;
  }
  .reviews {
    padding-bottom: 100px;
  }
  .rv-card,
  .rv-slide {
    --r: 28px;
  }
  .rv-ava {
    width: 52px;
    height: 52px;
  }
  .rv-mark {
    position: static;
  }
  .rv-foot {
    flex-wrap: wrap;
  }
  .rv-line {
    order: -1;
    flex-basis: 100%;
    justify-content: safe center;
    padding-inline: 0;
    mask-image: none;
  }
  .rv-ctrls {
    margin-left: auto;
  }
  body {
    font-size: 16px;
  }
  :root {
    --hdr-h: 64px;
  }
  .hdr-in {
    width: calc(100% - 2 * max(16px, var(--inset)));
    height: var(--hdr-h);
  }
  .logo {
    font-size: 23px;
  }
  .logo img {
    width: 30px;
    height: 30px;
  }
  .hdr-cta .pill {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }
  .menu-btn span {
    display: none;
  }
  .menu-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .hero,
  .page-hero {
    padding: calc(var(--st) + 8px) max(8px, var(--inset)) 0;
  }
  .hero-panel {
    border-radius: 36px;
  }
  .hero .hero-panel {
    gap: 44px;
    padding: 104px 16px 36px;
  }
  .page-hero .hero-panel {
    padding: 112px 16px 64px;
  }
  .hero .eyebrow,
  .page-hero .eyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
    line-height: 1.7;
  }
  .h1 {
    font-size: clamp(42px, 13vw, 60px);
    line-height: 1.08;
  }
  .page-hero .h1 {
    font-size: clamp(40px, 12vw, 56px);
  }
  .h1 em,
  .h2 em {
    white-space: normal;
  }
  .scene {
    width: 100%;
    margin-left: 0;
    padding-bottom: 0;
  }
  .scene-foot {
    position: static;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .ask {
    height: auto;
    min-height: 64px;
    margin-top: 28px;
    align-items: flex-start;
    padding: 10px 10px 10px 20px;
    border-radius: 32px;
  }
  .ask-field {
    min-height: 84px;
    align-items: flex-start;
  }
  .ask input,
  .ph {
    font-size: 16px;
  }
  .ask input {
    padding-top: 11px;
  }
  .ph {
    align-items: flex-start;
    padding-top: 11px;
    line-height: 1.45;
  }
  .ph-ex {
    white-space: normal;
  }
  .send {
    width: 44px;
    height: 44px;
  }
  /* One row that scrolls sideways, so the product screen comes into the
     first view instead of four stacked chips pushing it down. The next chip peeks out as the cue. */
  .starters {
    flex-wrap: nowrap;
    gap: 8px;
    margin-inline: -16px;
    padding: 4px 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .starter {
    flex: none;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 14px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .partner {
    padding-bottom: 80px;
  }
  .partner-card {
    --r: 32px;
    gap: 36px;
    padding: 36px 22px 24px;
  }
  .seals {
    margin-bottom: 28px;
  }
  .partner-plate {
    --r: 20px;
  }
  .partner-legend {
    padding-top: 18px;
  }
  .pl-rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .modules {
    padding: 80px 0 88px;
  }
  .sec-head {
    margin-bottom: 36px;
    gap: 16px;
  }
  .d-text h3 {
    font-size: 28px;
  }

  .msg-u {
    font-size: 13.5px;
  }
  .card {
    padding: 20px 18px 12px;
    font-size: 15.5px;
  }
  .handoff .pill {
    flex: 1;
  }
  .acc-btn,
  .ask-row input {
    font-size: 18px;
  }
  .acc-panel {
    padding-right: 0;
  }
  .foot {
    padding: 120px 0 calc(var(--dock-h) + 72px);
  }
  .foot-nav a {
    font-size: 32px;
  }
  .wordmark {
    margin: 90px 0 40px;
  }
  .credits {
    flex-direction: column;
  }
  .dock {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .hero .hero-panel.is-asking {
    padding: calc(var(--hdr-h) + 20px) 16px 36px;
  }
  .ask-unit.is-open .ask {
    min-height: 56px;
    align-items: center;
  }
  .ask-unit.is-open .ask-field {
    min-height: 44px;
    align-items: center;
  }
  .ask-unit.is-open .ask input {
    padding-top: 0;
  }
  .ask-unit.is-open .ph {
    align-items: center;
    padding-top: 0;
  }
  .ask-unit.is-open .ph-ex {
    white-space: nowrap;
  }
  .section {
    padding: 80px 0;
  }
  .status-table thead {
    display: none;
  }
  .status-table,
  .status-table tbody,
  .status-table tr,
  .status-table th,
  .status-table td {
    display: block;
    width: auto !important;
  }
  .status-table tr {
    padding: 22px 0;
    border-bottom: 1px solid var(--ink-12);
  }
  .status-table th,
  .status-table td {
    padding: 4px 0;
    border: 0;
  }
  .form {
    grid-template-columns: 1fr;
  }
  .field textarea {
    min-height: 104px;
  }
  .form-done {
    padding: 28px 22px;
  }
  .duo-card {
    padding: 32px 22px 24px;
    border-radius: 28px;
  }
  .legal-brief {
    margin-bottom: 40px;
    padding: 24px 22px 10px;
    border-radius: 24px;
  }
  .legal-clause + .legal-clause {
    margin-top: 44px;
    padding-top: 36px;
  }
  .switch {
    padding: 12px 16px;
  }
}
@media (max-width: 700px) {
  .stage-fig {
    width: 152%;
  }
  .stage-fig.is-right {
    width: 170%;
  }
  .stage-fig.is-panel {
    width: 190%;
  }
  .stage-slides .stage-fig,
  .stage-slides .stage-fig:not(.is-phones) {
    width: 152%;
  }
  .callout {
    gap: 7px;
    padding: 5px 12px 5px 5px;
    font-size: 12px;
  }
  .callout .ic {
    width: 24px;
    height: 24px;
  }
  .callout .ico {
    width: 13px;
    height: 13px;
  }
}
@media (max-width: 360px) {
  .hdr-demo {
    display: none;
  }
}
/* Touch: a finger needs 44px; the mouse layouts above stay tighter on purpose. Left alone on
   purpose: links inside a sentence (WCAG 2.5.8 exempts them) and form labels (a tap on one
   goes to its field). */
@media (pointer: coarse) {
  .partner-chip,
  .credit-line,
  .logo,
  .lang-switch button,
  .src,
  .status-table .link {
    min-height: 44px;
  }
  .foot-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* The header switch's own 44px buttons already match the pills beside it. */
  .hdr-lang {
    padding: 0;
  }
  .ibtn {
    width: 44px;
    height: 44px;
  }
}
/* A printed terms or privacy page is the text alone, on plain paper. */
@media print {
  .hdr,
  .dock,
  .foot,
  .skip,
  .legal-index,
  .switch {
    display: none !important;
  }
  .page-hero .hero-panel {
    padding: 0 0 24px;
    background: none;
  }
  .legal-doc {
    display: block;
  }
  .legal-brief {
    background: none;
    border: 1px solid var(--ink-12);
  }
  .legal-clause {
    break-inside: avoid-page;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .card .w {
    opacity: 1;
  }
  .dock {
    transform: translateX(-50%);
  }
  /* Reviews change only when asked, so there is no rotation to pause and no ring to run. */
  .rv-btn[data-pause] {
    display: none;
  }
  .rv-pick[aria-current='true'] .rv-ring {
    --p: 100%;
  }
}