/* HARRY LANDING: the shared base. Each design (designs/a.css, b.css, c.css) adds its own look on top; js/page.js loads
   the one site.config.json "design" picks and sets the colors (--bg, --primary-text, ...) and the two font stacks
   (--font-display, --font-body) from the same place. The values below are fallbacks only. Large type, strong contrast,
   visible focus, no motion (except the split layout's calm canvas example, which a Pause button stops and
   prefers-reduced-motion turns into one still frame). */

/* ── Fonts: self-hosted (fonts/NOTICE.txt). Only the families the active design uses are downloaded. ── */
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('fonts/lexend-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/newsreader-display-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/newsreader-display-italic-latin.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/schibsted-grotesk-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('fonts/roboto-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #F6FAF9;
  --surface: #FFFFFF;
  --text: #1B2B3A;
  --muted: #3A4A58;
  --border: #C9DEDB;
  --primary: #0B5563;
  --primary-2: #0B5563;
  --primary-hover: #074450;
  --primary-text: #FFFFFF;
  --primary-soft: #E1F1EF;
  --accent: #F2B33D;
  --accent-soft: #FFF1D6;
  --accent-text: #6B4100;
  --hero-bg: #DDF0EE;
  --hero-text: #1B2B3A;
  --hero-muted: #3A4A58;
  --hero-accent: #0B5563;
  --hero-focus: #9A4A00;
  --focus: #9A4A00;
  --placeholder: #9A4A00;
  --art-1: #F4B942;
  --art-2: #C3E4E0;
  --art-3: #9BD1C7;
  --art-4: #6CB5A6;

  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --radius: 14px;
  --gutter: 16px;
  --wrap: 74rem;
  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.25rem;          /* 20px body text */
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* Before the config and the design's stylesheet have loaded (or without JavaScript) the content stays hidden, so nobody
   sees empty buttons or the bare base styles. */
html:not(.ready) [data-needs-config] { display: none !important; }
[hidden] { display: none !important; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (min-width: 700px) {
  :root { --gutter: 32px; }
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
svg { flex: none; }

a { color: var(--primary); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--primary-hover); text-decoration-thickness: 0.14em; }

:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}
main:focus, .call:focus { outline: none; }

/* A placeholder that must be filled before launch ({{...}} in the config): quiet in preview, loud in the release check. */
mark.todo {
  background: none;
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--placeholder);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.icon { width: 1em; height: 1em; fill: currentColor; }
.nowrap { white-space: nowrap; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 12px 18px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--text);
  border-radius: 10px;
  font-weight: 700;
}
.skip:focus { top: 12px; }

.fallback {
  margin: 32px auto;
  max-width: 40rem;
  padding: 20px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.375rem;
}

/* ── Plain defaults every design builds on (and what shows if a design's stylesheet cannot load) ── */
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.wordmark, .subhead, .top-call { display: none; }
.lockup { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; }
.brand-tag { color: var(--muted); font-size: 1.125rem; line-height: 1.35; }
.mark {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50% 50% 50% 10px; background: var(--primary); color: var(--primary-text);
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1;
}

.hero { padding: 24px 0 32px; }
h1 { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.25rem); line-height: 1.12; }
h1 em { font-style: normal; white-space: nowrap; }   /* keeps "Call Harry." on one line */
.zip { margin-bottom: 12px; font-weight: 700; }
.intro { margin-top: 14px; max-width: 40ch; }

.call { margin-top: 24px; }
.call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 84px;
  padding: 12px 28px;
  border: 2px solid transparent;    /* visible in Windows high-contrast mode */
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-text);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}
.call-btn:hover { background: var(--primary-hover); color: var(--primary-text); }
.call-btn:focus-visible { outline-offset: 4px; }
.call-icon-wrap { display: grid; place-items: center; }
.call-icon { width: 32px; height: 32px; fill: currentColor; }
.call-number {
  display: inline-block;
  margin-top: 12px;
  color: inherit;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.call-number:hover { color: inherit; text-decoration: underline; }
.call-meta { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; font-size: 1.125rem; }
.ai-note { margin-top: 16px; font-weight: 700; }
.alt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.chat-jump, .text-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 700; }
.chat-jump .icon { width: 1.1em; height: 1.1em; }

/* Decorative drawings: each design turns on its own. */
.art > svg { display: none; width: 100%; height: auto; }
.art text { font-family: var(--font-display); }

/* The QR code: computers only (on a phone the button itself calls). */
.qr { display: none; margin: 0; }
@media (min-width: 960px) {
  .qr:not([hidden]) { display: flex; align-items: center; gap: 16px; }
}
.qr-code { flex: none; width: 132px; height: 132px; background: #FFFFFF; border-radius: 10px; }
.qr-code svg { display: block; width: 100%; height: 100%; }
.qr figcaption { font-size: 1.0625rem; line-height: 1.45; }

/* The two required notices: plain readable text (18px), no box. */
.notices { margin-top: 28px; font-size: 1.125rem; line-height: 1.55; }
.notices p + p { margin-top: 8px; }

/* What Harry can do: a checklist (the check is drawn with CSS: a circle and a turned corner). */
.can { padding: 48px 0 0; }
.can-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px 40px; }
.can-list li { position: relative; padding-left: 46px; }
.can-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
}
.can-list li::after {
  content: '';
  position: absolute;
  left: 11px;
  top: calc(0.12em + 6px);
  width: 8px;
  height: 14px;
  border: solid var(--primary-text);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.steps { padding: 48px 0 0; }
.step-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 24px; }
.step h3 { font-size: 1.375rem; line-height: 1.25; margin-bottom: 6px; }
.step-icon { display: none; }
.step-icon svg { width: 100%; height: 100%; fill: currentColor; }

.chat { padding-top: 48px; scroll-margin-top: 16px; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); line-height: 1.2; }
.chat-text > p { margin-top: 8px; max-width: 40ch; }
.chat-card { display: grid; gap: 20px; }

.talk-btn {
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  margin: 16px 0 0;
  padding: 10px 28px;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.talk-btn:hover { background: var(--primary-soft); }
.talk-hint { margin-top: 10px; font-weight: 700; }

/* Harry's chat widget fills this box; it needs at least 480px of height for its Start card and its chat. */
.chat-box {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 600px;
  max-height: calc(100vh - 32px);
  min-height: 480px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
@supports (height: 100dvh) {
  .chat-box { max-height: calc(100dvh - 32px); }
}

.foot { margin-top: 64px; padding: 32px 0 40px; font-size: 1.125rem; }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 0; padding: 0; list-style: none; }
.foot a { font-weight: 700; }
.foot-notes p { margin-top: 10px; }
.foot .wordmark { display: none; }

/* ── Layouts (site.config.json design.layouts; js/page.js sets data-layout and data-start on <html>) ──
   call-first: the round-2 page; none of the pieces below show. The talk-first layouts (data-start="talk") lead with
   Harry himself: inline-top puts his widget right under the headline; sidebar has a big "Talk to Harry" button (the
   widget is its own sidebar). Both: the phone as the clear second way in, the two notices in their own band after
   "what Harry can do", and less copy (no subhead, intro, steps or header phone). Each design styles the look. */
.talk, .top-chat, .or-call, .notes-band { display: none; }

html[data-start="talk"] .subhead,
html[data-start="talk"] .intro,
html[data-start="talk"] .call,
html[data-start="talk"] .alt-actions,
html[data-start="talk"] .hero .notices,
html[data-start="talk"] .top-call,
html[data-start="talk"] .top .brand-tag,
html[data-start="talk"] .qr,
html[data-start="talk"] .foot-repeat { display: none; }
html[data-start="talk"] .or-call,
html[data-start="talk"] .notes-band { display: block; }
html[data-layout="inline-top"] .top-chat { display: block; }
html[data-layout="sidebar"] .talk { display: block; }

/* The widget could not come up on this page (or the chat is off): no empty box, no dead button; the big Call button
   (with the number, hours and TTY) is back in their place. */
html.widget-off .talk,
html.widget-off .top-chat,
html.widget-off .or-call { display: none; }
html.widget-off[data-start="talk"] .call { display: flex; }
html.widget-off[data-layout="inline-top"] .call { justify-content: center; }

.talk:focus, .top-chat:focus { outline: none; }

/* "Talk to Harry" (sidebar): as big as the round-2 call button. */
.talk { margin-top: 26px; }
.talk-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 88px;
  padding: 12px 32px;
  border: 2px solid transparent;    /* visible in Windows high-contrast mode */
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-text);
  font: inherit;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
}
.talk-cta:hover { background: var(--primary-hover); }
.talk-cta:focus-visible { outline-offset: 4px; }
.talk-icon-wrap { display: grid; place-items: center; }
.talk-icon { width: 34px; height: 34px; fill: currentColor; }
.talk-cta-hint { margin-top: 12px; max-width: 34ch; font-size: 1.125rem; line-height: 1.45; }
@media (min-width: 640px) {
  .talk-cta { width: auto; }
}

/* inline-top: Harry's widget, big, right under the headline (the widget itself needs at least 480px of height). */
/* Sized so that on a laptop (800px tall) and a phone the "Or call" line under it is still on the first screen. */
.top-chat { margin-top: 16px; }
.top-chat .chat-box {
  height: clamp(480px, calc(100vh - 360px), 680px);
  max-height: none;
}
@supports (height: 100svh) {
  .top-chat .chat-box { height: clamp(480px, calc(100svh - 360px), 680px); }
}

/* The phone, clearly the second way in: "Or call Harry: (912) 400-4580", hours and TTY under it. */
.or-call { margin-top: 14px; }
.or-call-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font-size: 1.375rem; font-weight: 700; line-height: 1.3; }
.or-call-number {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.or-call-number:hover { color: inherit; text-decoration: underline; }
.or-call-number .icon { width: 0.8em; height: 0.8em; }
.or-call-meta { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; font-size: 1.125rem; }
@media (max-width: 599px) {
  .or-call-line { gap: 2px 10px; font-size: 1.125rem; }
  .or-call-number { gap: 8px; font-size: 1.625rem; }
}

/* The two notices in their own band (talk-first layouts): plain readable text (18px), never fine print. */
.notes-band { padding-top: 48px; }
.band-notices { font-size: 1.125rem; line-height: 1.55; }
.band-notices p + p { margin-top: 10px; }

/* The sidebar layout under 900px is the widget's launcher in the corner: the footer's last line stays clear of it. */
@media (max-width: 899px) {
  html[data-layout="sidebar"] .foot { padding-bottom: 120px; }
}

/* ── split: Harry's widget and his canvas, two equal columns ──
   From 1000px: the widget (left) and the canvas example (right) side by side, the same height. The phone sits in the
   header with the hours and TTY beside it; there is no "Or call" block. Under 1000px: one column, the widget first, then
   the example; under 700px the example's stage is folded (its step rail keeps moving) until the visitor presses
   "See how Harry helps". With the example off (html.cdemo-off) the page is one column, like inline-top. */
.cdemo, .cdemo-mock, .top-meta { display: none; }
.top-phone { display: flex; align-items: center; gap: 18px; min-width: 0; }
html[data-layout="split"] .top-call { display: inline-flex; }
html[data-layout="split"] .top-meta { display: block; }
html[data-layout="split"] .top-chat { display: block; }
html[data-layout="split"] .or-call { display: none; }
html[data-layout="split"] .cdemo,
html[data-layout="split"] .cdemo-mock { display: block; }
html.cdemo-off .cdemo,
html.cdemo-off .cdemo-mock { display: none; }
html.widget-off[data-layout="split"] .top-chat { display: none; }   /* the big Call button takes the widget's place */
html[data-layout="split"] .top-chat .chat-box { height: clamp(480px, calc(100vh - 360px), 680px); }
@supports (height: 100svh) {
  html[data-layout="split"] .top-chat .chat-box { height: clamp(480px, calc(100svh - 360px), 680px); }
}
@media (min-width: 1000px) {
  html[data-layout="split"] .hero-text {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "zip zip" "head head" "note mock" "chat canvas";
    column-gap: 40px;
    align-items: start;
  }
  html[data-layout="split"] .hero-text > .zip { grid-area: zip; justify-self: start; }
  html[data-layout="split"] .hero-text > h1 { grid-area: head; }
  html[data-layout="split"] .hero-text > .ai-note { grid-area: note; }
  html[data-layout="split"] .hero-text > .cdemo-mock { grid-area: mock; }
  html[data-layout="split"] .hero-text > .top-chat,
  html[data-layout="split"] .hero-text > .call { grid-area: chat; }
  html[data-layout="split"] .hero-text > .cdemo { grid-area: canvas; align-self: stretch; }
  /* The two columns share one height: the widget's box sets it, the canvas fills it. */
  html[data-layout="split"] .top-chat .chat-box { height: clamp(520px, calc(100vh - 282px), 700px); }
  html.cdemo-off[data-layout="split"] .hero-text { display: block; }
  html.cdemo-off[data-layout="split"] .top-chat { max-width: 880px; }
  html[data-layout="split"] .hero-text > .cdemo-mock { justify-self: start; }
}
@supports (height: 100svh) {
  @media (min-width: 1000px) {
    html[data-layout="split"] .top-chat .chat-box { height: clamp(520px, calc(100svh - 282px), 700px); }
  }
}

/* ── Canvas example (split; js/canvas-demo.js steps it, words from site.config.json canvasDemo) ──
   The spirit of entratus.net's homepage signal line: a calm "monitor" with a dotted canvas, stations on one line and
   light flowing along the part already done, a waveform for Harry talking. Each step draws its scene in (skeleton cards,
   generic labels), then the next; back to the first after the last. Only transform and opacity move (and a shimmer on
   the skeleton bars). Colors are the design's tokens. Every base style below is the scene's FINAL, still state: the
   keyframes only animate FROM the start, so with motion off (prefers-reduced-motion: every animation and transition is
   switched off at the end of this file) the still step shows fully drawn. */
.cdemo { --cdemo-ease: cubic-bezier(0.2, 0.7, 0.2, 1); min-width: 0; color: var(--hero-text); text-align: left; }
.cdemo :focus-visible { outline-color: var(--hero-focus); }
.cdemo-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: 22px 26px 20px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(30rem 20rem at 85% -10%, color-mix(in srgb, var(--art-2) 24%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--hero-text) 7%, transparent), color-mix(in srgb, var(--hero-text) 2%, transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--hero-text) 16%, transparent),
    0 32px 80px -36px color-mix(in srgb, var(--art-2) 80%, transparent);
}
.cdemo-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--hero-muted) 24%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
}

.cdemo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cdemo-live {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hero-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--hero-accent) 20%, transparent);
  animation: cdemo-blink 2.4s ease-in-out infinite;
}
.cdemo .cdemo-eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-muted);
}
.cdemo-badge {
  padding: 1px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hero-text) 32%, transparent);
  font-size: 1rem;
  line-height: 1.6;
}
.cdemo-pause {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-left: auto;
  padding: 6px 16px 6px 12px;
  border: 1px solid color-mix(in srgb, var(--hero-text) 26%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--hero-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
}
.cdemo-pause:hover { background: color-mix(in srgb, var(--hero-text) 8%, transparent); }
.cdemo-pause svg { width: 18px; height: 18px; fill: currentColor; }
.cdemo-i-play, .cdemo-pause.is-play .cdemo-i-pause { display: none; }
.cdemo-pause.is-play .cdemo-i-play { display: block; }

/* The rail: five stations on one line; the line lights up to the current one, small lights flowing along it. */
.cdemo-rail-wrap { position: relative; }
.cdemo-rail { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.cdemo-stop { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.cdemo-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--hero-bg);
  color: var(--hero-muted);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hero-text) 24%, transparent);
  transition: background-color 0.8s var(--cdemo-ease), color 0.8s var(--cdemo-ease), box-shadow 0.8s var(--cdemo-ease);
}
.cdemo-node::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  opacity: 0;
  transition: opacity 0.8s var(--cdemo-ease);
}
.cdemo-node::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--art-3);
  opacity: 0;
}
.cdemo-node svg { position: relative; width: 22px; height: 22px; fill: currentColor; }
.cdemo-short { font-size: 1.0625rem; line-height: 1.3; color: var(--hero-muted); transition: color 0.8s var(--cdemo-ease); }
.cdemo-stop.is-done .cdemo-node {
  background-color: color-mix(in srgb, var(--art-3) 20%, var(--hero-bg));
  color: var(--hero-accent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--art-3) 50%, transparent);
}
.cdemo-stop.is-now .cdemo-node {
  color: var(--primary-text);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--art-3) 16%, transparent), 0 10px 28px -8px var(--art-1);
}
.cdemo-stop.is-now .cdemo-node::before { opacity: 1; }
.cdemo-stop.is-now .cdemo-node::after { animation: cdemo-ring 2.6s var(--cdemo-ease) 0.6s infinite; }
.cdemo-stop.is-now .cdemo-short { color: var(--hero-text); }
.cdemo-track { position: absolute; left: 10%; right: 10%; top: 18px; height: 10px; }
.cdemo-track::before,
.cdemo-fill::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--hero-text) 16%, transparent);
}
.cdemo-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--cdemo-progress, 0) * 100%);
  overflow: hidden;
  transition: width 1.2s var(--cdemo-ease);
}
.cdemo-fill::before {
  background: linear-gradient(90deg, var(--art-3), color-mix(in srgb, var(--art-3) 55%, var(--art-4)));
  box-shadow: 0 0 10px color-mix(in srgb, var(--art-3) 70%, transparent);
}
.cdemo-fill i { position: absolute; inset: 0; animation: cdemo-flow 3.3s linear infinite; }
.cdemo-fill i:nth-child(2) { animation-delay: -1.1s; }
.cdemo-fill i:nth-child(3) { animation-delay: -2.2s; }
.cdemo-fill i::after {
  content: '';
  position: absolute;
  right: 0;
  top: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hero-text);
  box-shadow: 0 0 8px 2px var(--art-3);
}

/* The step's title: all five in one place, the current one fades up. */
.cdemo-titles { display: grid; }
.cdemo-title {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 0.6vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--cdemo-ease), transform 0.45s var(--cdemo-ease);
}
.cdemo-title.is-on { opacity: 1; transform: none; transition-duration: 0.8s; transition-delay: 0.2s; }

/* The stage: one scene at a time, its pieces rising in one after another. */
.cdemo-body { display: flex; flex: 1; flex-direction: column; gap: 14px; min-height: 0; }
.cdemo-stage { position: relative; display: grid; flex: 1; min-height: 250px; }
.cdemo-scene {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--cdemo-ease), visibility 0s linear 0.45s;
}
.cdemo-scene.is-on { opacity: 1; visibility: visible; transition: opacity 0.7s var(--cdemo-ease) 0.15s, visibility 0s; }
.cdemo-in { opacity: 0; transform: translateY(14px); transition: opacity 0.35s var(--cdemo-ease), transform 0.35s var(--cdemo-ease); }
.is-on .cdemo-in { opacity: 1; transform: none; transition-duration: 0.8s; transition-delay: 0.25s; }
.is-on .cdemo-in.cdemo-d1 { transition-delay: 0.45s; }
.is-on .cdemo-in.cdemo-d2 { transition-delay: 0.65s; }
.is-on .cdemo-in.cdemo-d3 { transition-delay: 0.85s; }

.cdemo-card {
  min-width: 0;
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hero-text) 10%, transparent), 0 24px 50px -28px rgba(0, 0, 0, 0.6);
}
.cdemo-name { font-size: 1.125rem; font-weight: 500; line-height: 1.25; }
.cdemo-label, .cdemo-note, .cdemo-sub { margin: 0; font-size: 1.0625rem; line-height: 1.4; color: var(--muted); }
.sk {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--primary-soft) 35%, color-mix(in srgb, var(--primary-soft) 35%, var(--surface)) 50%, var(--primary-soft) 65%);
  background-size: 300% 100%;
  background-position: 100% 0;
}
.is-on .sk { animation: cdemo-shimmer 2.8s linear infinite; }
.sk-thin { height: 9px; }
.w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; }
.w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; }
.cdemo-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-text);
}
.cdemo-tile svg { width: 26px; height: 26px; fill: currentColor; }
.cdemo-tile-sm { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.cdemo-tile-sm svg { width: 22px; height: 22px; }

/* 0. Your zip code */
.cdemo-map {
  position: relative;
  flex: none;
  width: clamp(130px, 34%, 190px);
  aspect-ratio: 1;
  border-radius: 22px;
  overflow: hidden;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--primary) 18%, transparent) 1px, transparent 0);
  background-size: 14px 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hero-text) 10%, transparent), 0 24px 50px -28px rgba(0, 0, 0, 0.6);
}
.cdemo-blob { position: absolute; border-radius: 50%; background: var(--primary-soft); }
.cdemo-blob.b1 { width: 64%; height: 48%; left: -12%; top: 8%; }
.cdemo-blob.b2 { width: 62%; height: 62%; right: -18%; bottom: -14%; }
.cdemo-blob.b3 { width: 30%; height: 26%; left: 22%; bottom: 10%; opacity: 0.8; }
.cdemo-road { position: absolute; border-radius: 4px; background: var(--surface); }
.cdemo-road.r1 { left: -10%; right: -10%; top: 60%; height: 7px; transform: rotate(-12deg); }
.cdemo-road.r2 { top: -10%; bottom: -10%; left: 38%; width: 7px; transform: rotate(8deg); }
.cdemo-road.r3 { left: 52%; right: -10%; top: 26%; height: 5px; transform: rotate(18deg); }
.cdemo-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -48px 0 0 -27px;
  fill: var(--primary);
  filter: drop-shadow(0 8px 6px color-mix(in srgb, var(--primary) 35%, transparent));
}
.is-on .cdemo-pin { animation: cdemo-drop 0.9s var(--cdemo-ease) 0.55s both; }
.cdemo-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 26px;
  margin: -6px 0 0 -32px;
  border-radius: 50%;
  border: 2px solid var(--art-1);
  opacity: 0;
}
.is-on .cdemo-ripple { animation: cdemo-ripple 2.8s ease-out 1.3s infinite; }
.is-on .cdemo-ripple-2 { animation-delay: 2.7s; }
.cdemo-zipcard { display: flex; flex: 0 1 260px; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
.cdemo-digits { display: flex; gap: 7px; }
.cdemo-digits i {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  max-width: 38px;
  height: 46px;
  border-radius: 10px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--border);
}
.cdemo-digits i::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.is-on .cdemo-digits i::after { animation: cdemo-pop 0.5s var(--cdemo-ease) both; }
.is-on .cdemo-digits i:nth-child(1)::after { animation-delay: 1s; }
.is-on .cdemo-digits i:nth-child(2)::after { animation-delay: 1.25s; }
.is-on .cdemo-digits i:nth-child(3)::after { animation-delay: 1.5s; }
.is-on .cdemo-digits i:nth-child(4)::after { animation-delay: 1.75s; }
.is-on .cdemo-digits i:nth-child(5)::after { animation-delay: 2s; }

/* 1. Plans near you */
.cdemo-plans { display: flex; flex-direction: column; gap: 12px; width: min(100%, 480px); }
.cdemo-plan { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.cdemo-plan:nth-child(2) .cdemo-tile { background: linear-gradient(135deg, var(--primary-2), var(--primary)); }
.cdemo-plan:nth-child(3) .cdemo-tile { background: linear-gradient(135deg, var(--accent), var(--primary-2)); }
.cdemo-plan-text { display: flex; flex: 1; flex-direction: column; gap: 9px; min-width: 0; }
.cdemo-chips { display: flex; flex: none; gap: 6px; }
.sk-chip { width: 50px; height: 26px; border-radius: 999px; background: var(--primary-soft); }

/* 2. Your medicines, checked */
.cdemo-meds { display: flex; flex-direction: column; width: min(100%, 480px); padding: 8px 20px 16px; }
.cdemo-med { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cdemo-lines { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.cdemo-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--primary-text);
}
.cdemo-check svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cdemo-check path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.is-on .cdemo-check { animation: cdemo-checked 0.5s var(--cdemo-ease) both; }
.is-on .cdemo-check path { animation: cdemo-draw 0.6s var(--cdemo-ease) both; }
.is-on .cdemo-med:nth-child(1) .cdemo-check, .is-on .cdemo-med:nth-child(1) .cdemo-check path { animation-delay: 1s; }
.is-on .cdemo-med:nth-child(2) .cdemo-check, .is-on .cdemo-med:nth-child(2) .cdemo-check path { animation-delay: 1.7s; }
.is-on .cdemo-med:nth-child(3) .cdemo-check, .is-on .cdemo-med:nth-child(3) .cdemo-check path { animation-delay: 2.4s; }
.cdemo-note { margin-top: 12px; }

/* 3. Costs and benefits, side by side (bars, never numbers; no column is singled out) */
.cdemo-compare {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  column-gap: 14px;
  width: min(100%, 540px);
  padding: 8px 20px 10px;
}
.cdemo-c-head { padding: 10px 0; font-size: 1.0625rem; font-weight: 500; border-bottom: 1px solid var(--border); }
.cdemo-c-label { padding: 12px 0; font-size: 1.0625rem; line-height: 1.3; color: var(--muted); }
.cdemo-c-cell { display: flex; align-items: center; gap: 6px; min-width: 0; height: 100%; padding: 12px 0; }
.cdemo-c-label, .cdemo-c-cell { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.cdemo-compare > :nth-last-child(-n+4) { border-bottom: 0; }
.cdemo-bar { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--art-3), var(--primary)); transform-origin: left center; }
.is-on .cdemo-bar { animation: cdemo-grow 1s var(--cdemo-ease) 0.7s both; }
.is-on .cdemo-bar.cdemo-d1 { animation-delay: 0.9s; }
.is-on .cdemo-bar.cdemo-d2 { animation-delay: 1.1s; }
.is-on .cdemo-bar.cdemo-d3 { animation-delay: 1.3s; }
.is-on .cdemo-bar.cdemo-d4 { animation-delay: 1.5s; }
.cdemo-perks svg { width: 22px; height: 22px; fill: var(--primary); }
.cdemo-dash { width: 18px; height: 3px; border-radius: 2px; background: var(--border); }
.is-on .cdemo-perks { animation: cdemo-fade 0.7s var(--cdemo-ease) 1.6s both; }
.is-on .cdemo-perks.cdemo-d4 { animation-delay: 1.8s; }
.is-on .cdemo-perks.cdemo-d5 { animation-delay: 2s; }

/* 4. A licensed agent can follow up */
.cdemo-agent { display: flex; flex-direction: column; gap: 18px; width: min(100%, 460px); padding: 22px; }
.cdemo-agent-top { display: flex; align-items: center; gap: 16px; }
.cdemo-avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-text);
}
.cdemo-avatar svg { width: 32px; height: 32px; fill: currentColor; }
.cdemo-avatar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--art-3); opacity: 0; }
.is-on .cdemo-avatar::after { animation: cdemo-ring 2.6s var(--cdemo-ease) 0.9s infinite; }
.cdemo-agent-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cdemo-agent .cdemo-name { font-size: 1.25rem; }
.cdemo-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cdemo-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background-color: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--border);
  color: var(--primary);
}
.cdemo-slot svg { flex: none; width: 20px; height: 20px; fill: currentColor; }
.cdemo-slot .sk { flex: 1; }
.cdemo-slot-on { background-color: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.cdemo-slot-on .sk { background: color-mix(in srgb, var(--primary) 22%, var(--surface)); }
.is-on .cdemo-slot-on { animation: cdemo-pick 0.7s var(--cdemo-ease) 1.9s both; }

/* Harry talking, and one line. */
.cdemo-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--hero-text) 12%, transparent);
}
.cdemo-wave { display: flex; flex: none; align-items: center; gap: 3px; height: 26px; }
.cdemo-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--art-3); opacity: 0.8; transform: scaleY(0.5); animation: cdemo-wave 1.1s ease-in-out infinite alternate; }
.cdemo-wave i:nth-child(3n+1) { transform: scaleY(0.35); animation-delay: -0.25s; }
.cdemo-wave i:nth-child(3n+2) { transform: scaleY(0.75); animation-delay: -0.6s; animation-duration: 1.4s; }
.cdemo-wave i:nth-child(4n) { transform: scaleY(0.95); animation-delay: -0.9s; animation-duration: 0.9s; }
.cdemo .cdemo-foot-line { margin: 0; font-size: 1.125rem; line-height: 1.4; color: var(--hero-muted); }

/* Anything paused (the Pause button, off screen, a hidden tab) holds every small loop where it is. */
.cdemo.is-paused *, .cdemo.is-paused *::before, .cdemo.is-paused *::after { animation-play-state: paused !important; }

/* The mock-only caption (features.showCanvasMockNote): plainly not part of the page. */
.cdemo-mock {
  margin-top: 8px;
  padding: 6px 14px;
  border: 1.5px dashed var(--placeholder);
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.4;
}

/* Phones: the rail stays (the labels go to screen readers; the big title says the step), the stage folds. */
.cdemo-toggle { display: none; }
@media (max-width: 699px) {
  .cdemo-panel { gap: 16px; padding: 18px 16px 16px; border-radius: 20px; }
  .cdemo-short {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cdemo-node { width: 44px; height: 44px; }
  .cdemo-track { top: 17px; }
  .cdemo-title { font-size: 1.375rem; }
  .cdemo-head { flex-wrap: nowrap; gap: 10px; }
  .cdemo-live { display: none; }
  .cdemo .cdemo-eyebrow { letter-spacing: 0.08em; white-space: nowrap; }
  /* The Pause button keeps its spoken label (aria-label); on a phone it is the round icon alone, on the header's row. */
  .cdemo-pause { justify-content: center; width: 44px; padding: 0; }
  .cdemo-pause-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cdemo-body { display: none; }
  .cdemo.is-open .cdemo-body { display: flex; }
  .cdemo-stage { min-height: 280px; }
  .cdemo-scene { gap: 12px; }
  .cdemo-map { width: 108px; border-radius: 18px; }
  .cdemo-pin { width: 44px; height: 44px; margin: -40px 0 0 -22px; }
  .cdemo-zipcard { flex: 1 1 auto; gap: 12px; padding: 14px 14px 16px; }
  .cdemo-digits { gap: 5px; }
  .cdemo-digits i { height: 40px; border-radius: 8px; }
  .cdemo-label, .cdemo-note, .cdemo-sub, .cdemo-c-head, .cdemo-c-label, .cdemo .cdemo-foot-line { font-size: 1.125rem; }
  .cdemo-compare { grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); column-gap: 8px; padding: 6px 14px 8px; }
  .cdemo-c-label { overflow-wrap: normal; }
  .cdemo-plan { padding: 12px 14px; gap: 12px; }
  .cdemo-chips { display: none; }
  .cdemo-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 10px 20px;
    border: 1px solid color-mix(in srgb, var(--hero-text) 30%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--hero-text) 7%, transparent);
    color: var(--hero-text);
    font: inherit;
    font-size: 1.125rem;
    font-weight: 500;
    cursor: pointer;
  }
  .cdemo-toggle:hover { background: color-mix(in srgb, var(--hero-text) 12%, transparent); }
  .cdemo-chev { width: 26px; height: 26px; fill: currentColor; transition: transform 0.3s var(--cdemo-ease); }
  .cdemo.is-open .cdemo-chev { transform: rotate(180deg); }
}

@keyframes cdemo-blink { 50% { opacity: 0.35; } }
@keyframes cdemo-ring { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.6); opacity: 0; } }
@keyframes cdemo-flow { from { transform: translateX(-100%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { transform: translateX(0); opacity: 0; } }
@keyframes cdemo-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes cdemo-drop { from { transform: translateY(-26px); opacity: 0; } }
@keyframes cdemo-ripple { from { transform: scale(0.4); opacity: 0.7; } to { transform: scale(2.4); opacity: 0; } }
@keyframes cdemo-pop { from { transform: scale(0); } 60% { transform: scale(1.15); } to { transform: scale(1); } }
@keyframes cdemo-checked { from { background-color: var(--primary-soft); color: var(--primary); } }
@keyframes cdemo-draw { from { stroke-dashoffset: 1; } }
@keyframes cdemo-grow { from { transform: scaleX(0); } }
@keyframes cdemo-fade { from { opacity: 0; } }
@keyframes cdemo-pick { from { background-color: var(--bg); box-shadow: inset 0 0 0 1.5px var(--border); } }
@keyframes cdemo-wave { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .cdemo-fill i { display: none; }   /* the flowing lights; the still frame keeps the lit line */
}

@media (forced-colors: active) {
  .call-btn, .text-btn, .talk-btn, .chat-jump, .top-call, .talk-cta { border: 2px solid ButtonText; }
  .mark { border: 2px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .chat, .skip, .qr, .art, .top-call, .talk, .top-chat { display: none !important; }
}