/* Dr.life brand system
   Gradient 180deg #EC3E2C -> #ED67A6 (wordmark accent, primary buttons,
   thin accent rules only). Text #333333, secondary #888888,
   surfaces #FFFFFF on #F2F2F2, hairlines #ECECEC, 14px radius. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #333333;
  --muted: #888888;
  --surface: #ffffff;
  --bg: #f2f2f2;
  --line: #ececec;
  --grad: linear-gradient(180deg, #ec3e2c 0%, #ed67a6 100%);
  --grad-45: linear-gradient(160deg, #ec3e2c 0%, #ed67a6 100%);
  --r: 14px;
  --r-lg: 22px;
  --shadow-xs: 0 1px 2px rgba(51, 51, 51, .04);
  --shadow-sm: 0 1px 2px rgba(51, 51, 51, .03), 0 4px 14px rgba(51, 51, 51, .04);
  --shadow-md: 0 2px 6px rgba(51, 51, 51, .03), 0 16px 40px rgba(51, 51, 51, .06);
  --shadow-lg: 0 8px 24px rgba(51, 51, 51, .06), 0 40px 90px rgba(51, 51, 51, .13);
  --sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }
a { color: inherit; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 780px; }
.section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
@media (min-width: 800px) { .section { padding: 104px 0; } .section-tight { padding: 64px 0; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; letter-spacing: -.022em; color: var(--ink); }
h1 { font-size: clamp(34px, 6.4vw, 56px); line-height: 1.1; letter-spacing: -.03em; }
h2 { font-size: clamp(27px, 4.6vw, 40px); line-height: 1.16; }
h3 { font-size: clamp(19px, 2.4vw, 22px); line-height: 1.3; }
h4 { font-size: 17px; line-height: 1.4; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(18px, 2.3vw, 21px); line-height: 1.6; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 1.6; }
.tiny { font-size: 13px; line-height: 1.6; }
.center { text-align: center; }
.measure { max-width: 640px; }
.measure-wide { max-width: 760px; }
.center .measure, .center .measure-wide { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad);
}
.center .eyebrow::before { display: none; }
.center .eyebrow { justify-content: center; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.rule { height: 2px; width: 44px; border-radius: 2px; background: var(--grad); border: 0; margin: 0 0 24px; }
.center .rule { margin-left: auto; margin-right: auto; }

/* ---------- wordmark ---------- */
/* Lockup: the glyph is centred on the CAP HEIGHT of "Dr.life", not on the
   line box, which is what makes an icon look like it is riding high next to
   its wordmark. Aligning to the baseline and pushing the glyph back down by
   half its overhang puts the two on one line. 29px is the brand guide's
   stated minimum for the glyph. */
/* One font-size drives the whole lockup. The glyph and the cap-height nudge
   are both in em, so scaling `.wm` scales the mark without breaking the
   alignment. Centring on the line box would leave the glyph riding high next
   to the letters, because the font's ascent and descent are not symmetric. */
.wm {
  /* Baseline alignment does the work: an SVG's baseline is its bottom edge, so
     the bottom of the glyph lands on the text baseline by itself, at any size,
     with no hand-tuned offset to keep in step with the glyph size. */
  display: inline-flex; align-items: baseline; gap: .24em;
  text-decoration: none; color: var(--ink); font-size: 28px;
  /* The box carries the font's descender below the baseline, but "Dr.life"
     has no descenders, so that space is empty and the visible mark sits high
     by half of it. This recentres it. It depends on the font's descent alone,
     not on the glyph size, so it stays correct if the glyph is resized. The
     lowercase spelling adds ascenders on the l and the f, which rise above
     the D. That is above the cap line, not below the baseline, so it changes
     the silhouette and nothing about this alignment. */
  transform: translateY(.0556em);
}
.wm-glyph {
  /* Sized in WHOLE PIXELS on purpose. At a fractional size the browser snaps
     the SVG raster to the device grid, which lifted the artwork about .4px
     inside its own box and left the icon visibly floating above the letters.
     Roughly 1.2x the wordmark size: the icon overhangs at the top only, since
     the bottom sits on the baseline. */
  width: 34px; height: 34px; flex: 0 0 auto; color: var(--ink);
  /* The bottom corners are rounded, so resting the lowest point exactly on the
     baseline reads as floating: less mass reaches the line than under a flat
     letter. A 1px overshoot settles it, the same trick the typeface uses on
     the round "e". Whole pixels, so the raster stays crisp. */
  position: relative; top: 1px;
}
.wm-text { font-size: 1em; font-weight: 700; letter-spacing: -.03em; line-height: 1; }

/* Header mark, deliberately larger than the footer's. */
.site-header .wm { font-size: 36px; }
.site-header .wm-glyph { width: 43px; height: 43px; }
.wm-dot {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wm-sub { font-size: 12px; color: var(--muted); letter-spacing: .02em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background-image: var(--grad); color: #fff;
  /* A tight contact shadow plus a soft lift. A single wide red shadow reads
     as a halo around the pill rather than as depth. */
  box-shadow: 0 1px 2px rgba(168, 36, 26, .18), 0 5px 14px rgba(236, 62, 44, .15);
}
.btn-primary:hover { box-shadow: 0 2px 4px rgba(168, 36, 26, .2), 0 9px 22px rgba(236, 62, 44, .19); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-xs); }
.btn-ghost:hover { box-shadow: var(--shadow-sm); }
.btn-sm { padding: 10px 18px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .btn-row { justify-content: center; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #ec3e2c; outline-offset: 3px; border-radius: 8px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-in { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.nav { display: none; margin-left: auto; align-items: center; gap: 4px; }
.nav a {
  text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500;
  padding: 8px 12px; border-radius: 999px; transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { color: var(--ink); background: #f7f7f7; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.header-cta { display: none; }
@media (min-width: 940px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}
.nav-toggle {
  margin-left: auto; width: 42px; height: 42px; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; color: var(--ink);
}
.mobile-nav { display: none; border-top: 1px solid var(--line); background: #fff; }
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 10px 0 18px; }
/* Scoped to the link list on purpose. Unscoped, `.mobile-nav a` outranks
   `.btn` and strips the CTA of its flex centring, its padding and its pill,
   leaving the label jammed against the left edge with a hairline through it. */
.mobile-nav ul a { display: block; padding: 12px 2px; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-nav ul li:last-child a { border-bottom: 0; }
.mobile-nav .btn { margin-top: 16px; padding-top: 15px; padding-bottom: 15px; font-size: 16.5px; }

/* ---------- hero ---------- */
.hero { padding: 56px 0 8px; }
@media (min-width: 800px) { .hero { padding: 84px 0 24px; } }
.hero-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.06fr .94fr; gap: 56px; } }
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 30px; max-width: 560px; }
.hero-note { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.dot-grad { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); flex: 0 0 auto; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 24px;
}

/* ---------- phone mockup ---------- */
.phone-stage { display: flex; justify-content: center; position: relative; }
.phone-wrap { position: relative; }
.phone {
  width: min(310px, 84vw);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 46px;
  padding: 9px;
  box-shadow: var(--shadow-lg);
}
.phone-tilt { transform: rotate(-2.2deg); }
@media (min-width: 940px) { .phone { width: 320px; } }
.phone-screen {
  position: relative; border-radius: 38px; overflow: hidden;
  background: #fafafa; border: 1px solid #f4f4f4;
}
.phone-island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 22px; border-radius: 999px; background: #333; z-index: 3;
}
.status-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 6px; font-size: 12px; font-weight: 600; color: var(--ink);
}
.status-bar .bars { display: flex; align-items: flex-end; gap: 2px; }
.status-bar .bars i { display: block; width: 3px; background: var(--ink); border-radius: 1px; }
.status-bar .bars i:nth-child(1) { height: 4px; }
.status-bar .bars i:nth-child(2) { height: 6px; }
.status-bar .bars i:nth-child(3) { height: 8px; }
.status-bar .bars i:nth-child(4) { height: 10px; }
.battery { width: 20px; height: 10px; border: 1.4px solid var(--ink); border-radius: 3px; position: relative; }
.battery::after { content: ""; position: absolute; inset: 1.6px; right: 6px; background: var(--ink); border-radius: 1px; }

.app-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px 12px; border-bottom: 1px solid var(--line); background: #fff;
}
.app-bar .wm-glyph { width: 20px; height: 20px; }
.app-bar .name { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.app-bar .status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }

.thread { padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 10px; background: #fafafa; }
.thread-scroll { max-height: 460px; overflow: hidden; }
.msg {
  max-width: 84%; padding: 11px 14px; border-radius: var(--r);
  font-size: 13.5px; line-height: 1.5;
}
.msg.them { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: var(--shadow-xs); }
.msg.me { align-self: flex-end; background-image: var(--grad); color: #fff; border-bottom-right-radius: 5px; }
.msg.doc { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: var(--shadow-xs); }
.msg-from { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 3px; letter-spacing: .02em; }
.msg-from.ai { color: #ec3e2c; }
.sys {
  align-self: center; text-align: center; font-size: 11.5px; color: var(--muted);
  padding: 5px 12px; background: #fff; border: 1px solid var(--line); border-radius: 999px;
}
.sys strong { color: var(--ink); font-weight: 600; }

.photo-bubble {
  align-self: flex-end; width: 66%; border-radius: var(--r); border-bottom-right-radius: 5px;
  overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-xs);
}
.photo-frame {
  height: 96px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #f4f4f5 0%, #ededee 55%, #e7e7e9 100%);
  color: #b9b9bd;
}
.photo-cap { padding: 7px 11px; font-size: 11px; color: var(--muted); }

.call-card {
  align-self: flex-start; width: 88%; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px; box-shadow: var(--shadow-xs);
  display: flex; align-items: center; gap: 11px;
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background-image: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
}
.avatar-plain { background: #f2f2f2; color: var(--muted); background-image: none; }
.call-card .who { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.call-card .when { display: block; font-size: 11.5px; color: var(--muted); }
.pill-btn {
  margin-left: auto; padding: 7px 14px; border-radius: 999px;
  background-image: var(--grad); color: #fff; font-size: 12px; font-weight: 600;
}

.composer {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px 16px;
  background: #fff; border-top: 1px solid var(--line);
}
.composer .field {
  flex: 1; height: 34px; border-radius: 999px; background: #f4f4f5;
  display: flex; align-items: center; padding: 0 14px; font-size: 12.5px; color: #b3b3b6;
}
.composer .send { width: 34px; height: 34px; border-radius: 50%; background-image: var(--grad); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff; }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid { gap: 20px; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.card-pad-lg { padding: 30px 28px; }
.card h3 { margin-bottom: 10px; }
.card-badge {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 16px;
  border: 1px solid var(--line); background: #fbfbfb; color: #ec3e2c;
  display: flex; align-items: center; justify-content: center;
}
.card-foot {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
}
.card p { color: var(--muted); font-size: 16px; }

.rung-num {
  font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 14px;
}
.vignette {
  margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.mini {
  font-size: 12.5px; line-height: 1.45; padding: 9px 12px; border-radius: 11px;
  border: 1px solid var(--line); background: #fbfbfb; color: var(--ink);
}
.mini.me { align-self: flex-end; background-image: var(--grad); color: #fff; border-color: transparent; max-width: 86%; }
.mini.them { align-self: flex-start; background: #fff; max-width: 90%; }
.mini-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.mini-row .who { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.mini-row .when { display: block; font-size: 11px; color: var(--muted); }
.track { height: 5px; border-radius: 5px; background: #f0f0f0; overflow: hidden; margin: 2px 2px 0; }
.track i { display: block; height: 100%; width: 62%; border-radius: 4px; background: var(--grad); }

/* ---------- continuity rows ---------- */
.rows { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.row {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 22px; border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
@media (min-width: 720px) { .row { padding: 26px 28px; gap: 20px; } }
.row-icon {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  border: 1px solid var(--line); background: #fbfbfb;
  display: flex; align-items: center; justify-content: center; color: #ec3e2c;
}
.row h4 { margin: 0 0 3px; }
.row p { color: var(--muted); font-size: 15.5px; margin: 0; max-width: 62ch; }

/* ---------- pills ---------- */
.pill-group + .pill-group { margin-top: 34px; }
.pill-label { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.pill-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.pills li {
  padding: 10px 17px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  font-size: 15px; font-weight: 500;
}

/* ---------- split ---------- */
.split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 60px; } .split.reverse > :first-child { order: 2; } }

/* profile switcher mockup */
.switcher { max-width: 340px; margin: 0 auto; }
.switcher-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; }
.switcher-head span { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.profile {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  border-top: 1px solid var(--line);
}
.profile .who { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.profile .meta { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.profile .check { margin-left: auto; color: #ec3e2c; display: flex; }
.profile.active { background: #fcfcfc; }

/* ---------- form ---------- */
.form-card { padding: 26px 22px; }
@media (min-width: 720px) { .form-card { padding: 34px 32px; } }
.field-row { display: grid; gap: 14px; margin-bottom: 14px; }
@media (min-width: 620px) { .field-row.two { grid-template-columns: 1.4fr 1fr; } }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.field input, .field select {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line);
  background: #fbfbfb; transition: border-color .15s ease, background-color .15s ease;
}
.field input::placeholder { color: #bdbdbd; }
.field input:focus, .field select:focus { background: #fff; border-color: #ddd; outline-offset: 2px; }
.form-note { margin-top: 14px; font-size: 13.5px; color: var(--muted); text-align: center; }
.form-error {
  margin-bottom: 16px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid #f6d7d3; background: #fdf4f3; color: #b93a2b; font-size: 14.5px;
}

/* ---------- cta band ---------- */
.cta-band { position: relative; overflow: hidden; }
.accent-top { height: 3px; background: var(--grad); border-radius: 3px 3px 0 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 48px 0 40px; margin-top: 8px; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.2fr 2fr; gap: 48px; } }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (min-width: 620px) { .footer-nav { grid-template-columns: repeat(3, 1fr); } }
.footer-nav h5 { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-nav a { text-decoration: none; font-size: 15px; color: var(--ink); }
.footer-nav a:hover { color: #ec3e2c; }
.footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.disclaimer { font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 720px; }

/* ---------- misc ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.checklist .tick { flex: 0 0 auto; margin-top: 3px; color: #ec3e2c; display: flex; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 34px 16px 0; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 8px 18px 0; color: var(--muted); font-size: 16px; }

.stat-row { display: grid; gap: 18px; }
@media (min-width: 700px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat { padding: 22px 24px; }
.stat .num { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .lab { font-size: 14.5px; color: var(--muted); margin-top: 4px; }

.note-line { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--muted); margin-top: 16px; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.js .seq > * { opacity: 0; transform: translateY(10px); }
.js .seq.in > * { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.js .seq.in > *:nth-child(1) { transition-delay: 0.04s; }
.js .seq.in > *:nth-child(2) { transition-delay: 0.13s; }
.js .seq.in > *:nth-child(3) { transition-delay: 0.22s; }
.js .seq.in > *:nth-child(4) { transition-delay: 0.31s; }
.js .seq.in > *:nth-child(5) { transition-delay: 0.40s; }
.js .seq.in > *:nth-child(6) { transition-delay: 0.49s; }
.js .seq.in > *:nth-child(7) { transition-delay: 0.58s; }
.js .seq.in > *:nth-child(8) { transition-delay: 0.67s; }
.js .seq.in > *:nth-child(9) { transition-delay: 0.76s; }
.js .seq.in > *:nth-child(10) { transition-delay: 0.85s; }
.js .seq.in > *:nth-child(11) { transition-delay: 0.94s; }
.js .seq.in > *:nth-child(12) { transition-delay: 1.03s; }
.js .seq.in > *:nth-child(13) { transition-delay: 1.12s; }
.js .seq.in > *:nth-child(14) { transition-delay: 1.21s; }
.js .seq.in > *:nth-child(15) { transition-delay: 1.30s; }
.js .seq.in > *:nth-child(16) { transition-delay: 1.39s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .seq > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; background: #fff; padding: 12px 18px;
  border-radius: 0 0 12px 0; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- home chat stage ---------- */
.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;
}

.stage {
  display: flex; align-items: center;
  min-height: calc(100svh - 72px - 150px);
  padding: 52px 0 64px;
}
@media (min-width: 800px) { .stage { padding: 40px 0 72px; } }
.stage .wrap { width: 100%; }
.stage-in { max-width: 720px; margin: 0 auto; text-align: center; }

.stage-glyph { display: block; color: var(--ink); margin: 0 auto 26px; width: 46px; }
.stage-glyph .wm-glyph { width: 46px; height: 46px; transform: none; }
/* The headline is three words now, so it can carry the brand's full 56px
   on desktop without wrapping. */
.stage-in h1 { font-size: clamp(34px, 6vw, 56px); margin-bottom: 18px; }
.stage-lead { max-width: 500px; margin: 0 auto; font-size: clamp(16.5px, 2vw, 19px); }
/* Space above the chat bar. It has to live on the wrapper: on .stage-lead it
   loses to `p:last-child { margin-bottom: 0 }` and silently does nothing. */
.stage-open { margin-bottom: 40px; }
@media (min-width: 800px) { .stage-open { margin-bottom: 52px; } }

/* the chat bar */
.ask {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 26px;
  padding: 7px 7px 7px 20px; box-shadow: var(--shadow-md);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ask:focus-within { border-color: #e0e0e0; box-shadow: var(--shadow-lg); }
.ask-input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 16.5px; color: var(--ink); padding: 12px 0; line-height: 1.4;
}
.ask-input::placeholder { color: #b5b5b8; }
@media (max-width: 460px) { .ask-input { font-size: 16px; } .ask { padding-left: 16px; } }
.ask-send {
  flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background-image: var(--grad); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(168, 36, 26, .18), 0 4px 11px rgba(236, 62, 44, .16);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.ask-send:hover { box-shadow: 0 2px 4px rgba(168, 36, 26, .2), 0 7px 17px rgba(236, 62, 44, .2); }
.ask-send:active { transform: scale(.94); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.chip {
  font: inherit; font-size: 13px; line-height: 1.3; color: var(--muted); cursor: pointer;
  padding: 7px 13px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  transition: color .16s ease, border-color .16s ease, transform .16s ease;
}
.chip:hover { color: var(--ink); border-color: #e2e2e2; }
.chip:active { transform: translateY(1px); }

.stage-note {
  margin: 34px 0 0; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted);
}

.stage-links {
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
}
.stage-links a {
  text-decoration: none; font-size: 15px; color: var(--muted);
  transition: color .16s ease;
}
.stage-links a:hover { color: var(--ink); }

/* the answer thread that appears after you press enter */
.thread-live { text-align: left; display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.thread-live .bubble.reply a { color: #d8392a; text-decoration: underline; text-underline-offset: 2px; }
.thread-live .bubble.reply a:hover { color: #b9301f; }
.thread-live .bubble.reply p:last-child { margin-bottom: 0; }
.thread-live .bubble {
  padding: 14px 18px; border-radius: var(--r); font-size: 16px; line-height: 1.6;
  opacity: 0; transform: translateY(8px); animation: bubble-in .45s ease forwards;
}
.thread-live .bubble.you {
  align-self: flex-end; max-width: 88%; background-image: var(--grad); color: #fff;
  border-bottom-right-radius: 5px;
}
.thread-live .bubble.reply {
  align-self: stretch; background: var(--surface); border: 1px solid var(--line);
  border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm); padding: 20px 22px;
}
.thread-live .bubble.reply p { margin-bottom: .9em; }
.thread-live .bubble.reply .msg-from { font-size: 12px; margin-bottom: 8px; }
@keyframes bubble-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .thread-live .bubble { animation: none; opacity: 1; transform: none; }
}

.typing { display: inline-flex; gap: 5px; align-items: center; padding: 4px 0; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: #d6d6d9;
  animation: typing 1.1s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: .6; } }

.inline-form { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.inline-form input {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
  padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line); background: #fbfbfb;
}
.inline-form input:focus { background: #fff; border-color: #ddd; }
.inline-form .btn { flex: 0 0 auto; }
@media (max-width: 520px) { .inline-form .btn { width: 100%; } }

.footer-slim { padding: 30px 0 34px; }
.footer-slim .disclaimer { max-width: 640px; margin: 0 auto 12px; text-align: center; }
.footer-slim-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0;
}
.footer-slim-links a { text-decoration: none; }
.footer-slim-links a:hover { color: #ec3e2c; }

/* ---------- late overrides (source order matters) ---------- */
[hidden] { display: none !important; }

/* The .nav-toggle block is declared after the header media query, so it needs
   its own query to stay hidden on desktop. */
@media (min-width: 940px) { .nav-toggle { display: none; } }

/* A red outline on a text field reads as an error. Ring the field instead. */
.ask-input:focus-visible,
.inline-form input:focus-visible,
.field input:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: #efb3ab;
  box-shadow: 0 0 0 3px rgba(236, 62, 44, .13);
}
.ask-input:focus-visible { box-shadow: none; }

/* ---------- one-pager alignment ---------- */
/* The app puts the glyph inside the ask bar. */
.ask { padding-left: 14px; }
.ask-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: block; }
@media (max-width: 460px) { .ask { padding-left: 12px; } .ask-icon { width: 26px; height: 26px; border-radius: 7px; } }

/* Service pills, tinted the way the product deck sets them. */
.pills li {
  background: #fdf0f1; border-color: #fbe2e4; color: #d8392a;
  box-shadow: none; font-weight: 600;
}

/* Provider-choice vignette (continuity) */
.choice { max-width: 360px; margin: 0 auto; }
.choice .msg.them { max-width: 100%; }
.choice-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 2px; }
.choice-btn {
  padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.choice-btn.primary { background-image: var(--grad); color: #fff; border-color: transparent; }

/* Model adjudication diagram */
.flow { display: grid; gap: 12px; }
.flow-node {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 18px; box-shadow: var(--shadow-xs);
}
.flow-node .k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.flow-node .v { display: block; font-size: 15.5px; margin-top: 4px; }
.flow-models { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.flow-models span {
  font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  background: #fdf0f1; color: #d8392a; border: 1px solid #fbe2e4;
}
.flow-arrow { justify-self: center; color: #e2989a; display: flex; }

/* Two phones side by side, the way the product deck lays the thread out. */
.phone-pair { display: grid; gap: 40px 28px; justify-items: center; }
.phone-pair > div { display: flex; flex-direction: column; height: 100%; }
.phone-pair .phone-cap { margin-top: auto; padding-top: 30px; }
@media (min-width: 900px) { .phone-pair { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.phone-cap {
  margin: 30px auto 0; max-width: 300px; text-align: center;
  font-size: 15px; line-height: 1.5; color: var(--muted);
}

.footer-slim-mark { display: flex; justify-content: center; margin: 0 0 18px; }

/* ---------- in-app profile picker mockup ---------- */
.profile-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 5px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: 11px; font-weight: 600; color: var(--ink);
}
.profile-pill .avatar { width: 18px; height: 18px; font-size: 8.5px; }
.profile-pill svg { color: var(--muted); }

.phone-body { padding: 12px 14px 16px; background: #fafafa; }
.picker {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  box-shadow: var(--shadow-md); overflow: hidden;
}
.picker-label {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); padding: 11px 13px 8px;
}
.picker-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-top: 1px solid var(--line);
}
.picker-row .avatar { width: 28px; height: 28px; font-size: 11px; }
.picker-row .who { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.picker-row .meta { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.picker-row.active { background: #fcfcfc; }
.picker-row .check { margin-left: auto; color: #ec3e2c; display: flex; }

.phone-ask {
  margin-top: 14px; display: flex; align-items: center; gap: 7px;
  padding: 5px 5px 5px 9px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs);
}
.phone-ask .icon { width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto; }
.phone-ask .txt { flex: 1; min-width: 0; font-size: 11.5px; color: #b5b5b8; }
.phone-ask .send {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background-image: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.phone-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.phone-chips span {
  font-size: 10.5px; line-height: 1.3; padding: 5px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--muted);
}

/* ---------- owner dashboard ---------- */
.admin-gate { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.admin-card { width: 100%; max-width: 380px; padding: 32px 28px; text-align: left; }
.admin-h1 { font-size: 26px; margin-bottom: 20px; }
.admin-tag {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: #fbfbfb;
}
.admin-main { padding: 34px 22px 0; }
.admin-main section { margin-bottom: 44px; }
.admin-h2 { font-size: 20px; margin-bottom: 16px; }
.admin-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-head .admin-h2 { margin: 0; }
.admin-head .btn { margin-left: auto; }

.admin-stats { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .admin-stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .admin-stats { grid-template-columns: repeat(4, 1fr); } }
.admin-stats .stat .sub { font-size: 13px; color: var(--muted); margin-top: 8px; }

.admin-two { display: grid; gap: 32px; }
@media (min-width: 900px) { .admin-two { grid-template-columns: 1fr 1fr; } }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.admin-table thead th {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: #fbfbfb; white-space: nowrap;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .nowrap { white-space: nowrap; }
.admin-table .num-col { text-align: right; white-space: nowrap; }
.admin-table .q { max-width: 460px; line-height: 1.5; }
.admin-table a { color: #d8392a; text-decoration: none; }
.admin-table a:hover { text-decoration: underline; }
.admin-empty { padding: 22px; color: var(--muted); font-size: 15px; }
.admin-note { font-size: 13px; color: var(--muted); margin-top: 12px; max-width: 640px; }
.admin-pw { padding: 24px; max-width: 420px; display: grid; gap: 14px; }
.admin-pw .btn { justify-self: start; }
.form-done {
  margin: 0 0 4px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid #e2e9dd; background: #f6faf3; color: #4a7a3c; font-size: 14.5px;
}

/* ---------- articles ---------- */
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.article h1 { margin-bottom: 20px; }
.article-standfirst { margin-bottom: 26px; }
.byline {
  font-size: 14px; color: var(--muted); margin: 0 0 40px;
  padding-bottom: 26px; border-bottom: 1px solid var(--line);
}

.prose { font-size: 17.5px; line-height: 1.75; }
.prose h2 {
  font-size: clamp(22px, 3vw, 27px); line-height: 1.25;
  margin: 44px 0 16px;
}
.prose p { margin-bottom: 1.25em; }
.prose a { color: #d8392a; text-decoration: underline; text-underline-offset: 2px; }
.article-list-check { margin: 26px 0 30px; gap: 11px; }
.article-list-check .tick { color: #ec3e2c; font-size: 20px; line-height: 1.2; margin-top: 0; }

.article-note { padding: 24px 26px; margin: 44px 0 0; }
.article-note h2 { font-size: 17px; margin: 0 0 12px; }
.article-note p { font-size: 15px; line-height: 1.65; color: var(--muted); margin-bottom: .9em; }
.article-note p:last-child { margin-bottom: 0; }

.sources { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--line); }
.sources h2 { font-size: 19px; margin-bottom: 18px; }
.sources ol { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.sources li { font-size: 15px; line-height: 1.6; color: var(--muted); }
.sources a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.sources a:hover { color: #d8392a; }

.article-list { display: grid; gap: 18px; }
.article-card { padding: 28px 26px; }
.article-card h2 { font-size: clamp(20px, 2.6vw, 24px); margin: 6px 0 12px; }
.article-card h2 a { text-decoration: none; }
.article-card h2 a:hover { color: #d8392a; }
.article-card p { font-size: 16px; }
.article-more { margin-top: 16px; font-size: 15px; font-weight: 600; }
.article-more a { color: #d8392a; text-decoration: none; }
.article-more a:hover { text-decoration: underline; }

/* ---------- article pagination ---------- */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 36px; flex-wrap: wrap;
}
.pager-step {
  font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink);
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-xs);
}
.pager-step:hover { border-color: #e2e2e2; color: #d8392a; }
.pager-step.disabled { color: #c4c4c6; background: transparent; box-shadow: none; border-color: transparent; }
.pager-nums { display: flex; align-items: center; gap: 4px; }
.pager-num {
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14.5px; text-decoration: none; color: var(--muted);
}
.pager-num:hover { color: var(--ink); background: #f3f3f3; }
.pager-num.current { color: var(--ink); font-weight: 700; background: #fff; border: 1px solid var(--line); }
.article-card h3 a { text-decoration: none; }
.article-card h3 a:hover { color: #d8392a; }