/* Ilias Systems. One typeface (Geist, OFL, hosted in /fonts). Graphite palette.
   Motion that plays by itself: the hero grid (js/grid.js), the call card (js/call-card.js),
   the scroll thread (js/thread.js), the Monday report (js/report.js),
   the band week row, and the small "System online" dot. All are off with reduce
   motion. Everything else only moves when someone hovers, taps, or opens something.
   The consent box, policy pages, and footer links may be restyled here but never hidden.
   Colors: every color is a variable below. Orange is only for buttons, links, active
   states, chart highlights and small marks, never for headings or big text. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;     /* native checkboxes, number boxes and scrollbars render dark */
  /* Base, surface and borders: the darker "v2" palette, site-wide since 2026-11-09.
     Previous values, to revert: --bg #121418, --surface/--panel #1B1F24, --border #2A3038, --line #23282F. */
  --bg: #0A0A0C;          /* page: text 17.8:1, secondary 8.4:1, orange 7.6:1 */
  --surface: #1A1D22;     /* form fields: text 15.2:1, secondary 7.2:1; field border 3.6:1 against it */
  --panel: #1A1D22;       /* panels and cards: 1.17:1 against the page; text 15.2:1, secondary 7.2:1, orange 6.5:1 */
  --raised: #232830;      /* tiles and cards inside panels: text 13.3:1, secondary 6.3:1, orange 5.68:1 */
  --selected: #2E343D;    /* selected toggle fill: text 11.3:1 */
  --border: #3A3F48;      /* 1px panel borders: 1.87:1 against the page, 1.64:1 against panels (decorative) */
  --line: #1F2227;        /* section dividers */
  --v2-hairline: #4A4F58;  /* the hero steps row's connecting line (decorative) */
  --text: #F2F3F5;        /* body text and headings: 17.8:1 on the page */
  --muted: #A3AAB5;       /* secondary text: 8.4:1 on the page, 7.2:1 on panels */
  --lead: #B8BEC8;        /* the grid hero's sub-line, a touch brighter than --muted */
  --accent: #FF7A1A;      /* safety orange: buttons, links, active states, chart highlights, small marks. 7.6:1 on the page. Never headings or big text. */
  --accent-hover: #FF9442;
  --on-accent: #121418;   /* text on orange: 7.07:1 (8.40:1 on the hover orange) */
  --accent-tint: #3A2118; /* dark orange tint behind icons and "Booked" pills */
  --accent-glow: color-mix(in srgb, var(--accent) 18%, transparent);   /* soft focus glow */
  --chart: #6C7684;       /* chart bars, sparklines, rail icons: 3.22:1 on tiles (--raised), 3.60:1 on panels, 4.01:1 on the page */
  --field: #6B7482;       /* form field borders: 4.2:1 on the page, 3.6:1 on panels and fields */
  --error: #FF7A7A;       /* 7.8:1 on the page, 6.7:1 on panels */
  --ok: #3FB871;          /* "System online" dot */
  /* Status pills: dark tinted backgrounds, light text */
  --pill-ok: #FFB089;     /* on --accent-tint: 8.4:1 */
  --pill-neutral: #D5D9DF;/* on --border: 9.4:1 */
  --pill-wait: #F0D29A;   /* on --pill-wait-bg: 9.5:1 */
  --pill-wait-bg: #352B1A;
  --pill-wait-edge: #8C7448;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 72rem;
  --gutter: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  font-kerning: normal;
}
img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Heading scale: the bigger the heading, the lighter the weight. Page titles use Geist Light
   (300), section headings Regular (400), card headings SemiBold (600). Body text stays 400 at
   18px. Only the logo stays heavy (800). */
h1, h2, h3 { color: var(--text); margin: 0; }
h1 { font-weight: 300; font-size: clamp(2.4rem, 8.5vw, 4.2rem); line-height: 1.1; letter-spacing: -0.03em; max-width: 15ch; }
h2 { font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 0.9rem; }
h3 { font-weight: 600; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 0.6rem; }
p { margin: 0 0 1rem; max-width: 36em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 44rem; }
.narrow > h1 { margin-bottom: 1.25rem; }
.narrow > p > .button { margin-top: 0.5rem; }   /* 404: the button never crowds the title */
.section { padding: 4rem 0; }
/* Section dividers: the hero's thin line + node dot motif (still, no motion) */
.section { position: relative; }
.section + .section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.section + .section::after {
  content: ""; position: absolute; top: -4px; width: 7px; height: 7px; border-radius: 50%;
  left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background: var(--bg); border: 1.5px solid var(--accent);
}
.band::before, .band::after { display: none; }
.small { font-size: 0.95rem; color: var(--muted); }

.skip-link {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 30;
  background: var(--accent); color: var(--on-accent); padding: 0.6rem 0.9rem; border-radius: 4px;
}
.skip-link:focus { top: 0.5rem; color: var(--on-accent); }

/* Header and text logo */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.brand {
  font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em;
  color: var(--text); text-decoration: none;
}
.brand::after { content: "."; color: var(--accent); }  /* the logo: off-white name, orange dot */
.brand:hover { color: var(--text); text-decoration: none; }
.site-header { position: relative; z-index: 20; }
.nav-desktop { display: flex; gap: 1.5rem; align-items: center; }
.nav-mobile { display: none; }
/* Header nav: off-white links, orange on hover and for the current page (current page is also underlined) */
.nav-desktop a { padding: 0.75rem 0; font-weight: 600; text-decoration: none; color: var(--text); }
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
/* "Call or text (972) 891-3103": one line, only the number is the (tel:) link */
.header-call { font-weight: 600; white-space: nowrap; }

/* Short orange rule under the main headline */
.rule { display: block; width: 3.5rem; height: 3px; background: var(--accent); margin: 1.5rem 0; border: 0; }

/* Main button: the only button style on the site */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.85rem 1.6rem;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 6px;
  font: inherit; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.button[disabled] { opacity: 0.7; cursor: wait; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 2rem 0 0; max-width: none; }
.cta-links { font-weight: 600; }

/* Hero */
.hero { padding: 3.5rem 0 4rem; position: relative; isolation: isolate; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 32em; }
@media (min-width: 60rem) {
  .hero { padding: 5.5rem 0 6rem; }
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4.5rem; }
  .hero h1 { font-size: clamp(3.2rem, 4.9vw, 4.4rem); max-width: 17ch; }
}

/* Services: two panels */
.services { display: grid; gap: 2.5rem; }
.service { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem 1.5rem; }
.service p:last-child { margin-bottom: 0; }
@media (min-width: 48rem) { .services { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .service { padding: 2rem; } }
@media (min-width: 60rem) { .services { grid-template-columns: repeat(3, 1fr); } }   /* three services side by side */

/* How it works: two step tracks. Status dots joined by thin connector lines. */
.tracks { display: grid; gap: 3rem; margin-top: 2rem; }
@media (min-width: 60rem) { .tracks { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.track h3 { display: flex; align-items: center; gap: 0.6rem; color: var(--text); font-size: 1.3rem; margin-bottom: 1.25rem; }
.track h3::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); flex: none; }
.flow { list-style: none; margin: 0; padding: 0; }
.flow-step { position: relative; padding: 0 0 1rem 2rem; }
.flow-step:last-child { padding-bottom: 0; }
/* status dot */
.flow-step::before {
  content: ""; position: absolute; left: 0.2rem; top: 1.35rem; z-index: 1;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
}
/* connector line to the next step's dot */
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; left: calc(0.55rem - 1px); top: 1.7rem; bottom: -1.35rem;
  width: 2px; background: var(--border);
}
.flow-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; }
.flow-card h4 { margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.flow-card p { margin: 0; font-size: 1rem; line-height: 1.55; }

/* Shared panel ("system card") */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; }
.panel h3 { color: var(--text); font-size: 1.15rem; margin-bottom: 0.4rem; }
.panel p:last-child { margin-bottom: 0; }

/* Built to follow the rules */
.rules { list-style: none; margin: 1.5rem 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .rules { grid-template-columns: 1fr 1fr; } }
.rule-item h3 { display: flex; align-items: center; gap: 0.6rem; }
.rule-item h3::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); flex: none; }

/* FAQ: native details/summary, works without JavaScript */
.narrow-faq { max-width: 52rem; }
.faq { margin-top: 1.5rem; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0; font-weight: 700; font-size: 1.1rem; min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.65rem; height: 0.65rem; margin-right: 0.3rem;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-25%) rotate(45deg); transition: transform 0.15s ease-out;
}
.faq details[open] summary::after { transform: translateY(15%) rotate(-135deg); }
.faq summary:hover { color: var(--accent); }
.faq details p { margin: 0 0 1.25rem; max-width: 40em; }

/* Calculator */
.calc { margin-top: 2rem; }
.calc-fields { display: grid; gap: 0 1.5rem; }
@media (min-width: 40rem) { .calc-fields { grid-template-columns: 1fr 1fr; } }
.hint { font-size: 0.95rem; color: var(--muted); margin: -0.2rem 0 0.4rem; }
input[type="number"] {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--field); border-radius: 6px; padding: 0.75rem 0.85rem; min-height: 52px;
}
.calc-result { margin: 0.5rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 1.15rem; }
.calc-result strong { color: var(--text); font-weight: 700; }

/* Form */
.form { margin-top: 2.5rem; }
.field { margin-bottom: 1.4rem; }
.field label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
input[type="text"], input[type="tel"], input[type="email"], textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--field); border-radius: 6px; padding: 0.75rem 0.85rem; min-height: 52px;
}
input:focus-visible, textarea:focus-visible { outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.error { color: var(--error); font-weight: 700; margin: 0.4rem 0 0; }
.consent { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 0.6rem; }
.consent input { width: 1.4rem; height: 1.4rem; margin: 0.2rem 0 0; flex: none; accent-color: var(--accent); }
/* Same size and color as the rest of the form (compliance.md section 5). */
.consent label { font-weight: 400; margin: 0; color: var(--text); font-size: 1rem; line-height: 1.55; }
.consent-links { margin: 0 0 1.75rem 2.25rem; font-size: 1rem; }
.button + .consent-links { margin: 0.9rem 0 0; }   /* Privacy Policy and SMS Terms, directly under the submit button */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; font-weight: 700; }
.form-status:empty { display: none; }

/* Contact page motion (js/contact-motion.js, js/form.js) */
.form { position: relative; }
.form-progress { position: absolute; top: 0; bottom: 0; left: -1.1rem; width: 2px; background: var(--line); border-radius: 1px; }   /* along the form's left edge */
.form-progress-fill { display: block; height: 100%; background: var(--accent); border-radius: 1px; transform-origin: 50% 0; transform: scaleY(0); }
@media (max-width: 30rem) { .form-progress { left: -0.75rem; } }
.form .field input:not([type="checkbox"]):focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }   /* soft glow on the active field */
.button.is-done, .button.is-done[disabled] { opacity: 1; cursor: default; min-width: 6.5rem; }
.send-check { width: 1.4rem; height: 1.4rem; display: block; margin: 0 auto; }
.send-check path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* What happens next: three steps on a thin line; lit steps get an orange dot. */
.next-steps { margin-top: 2.5rem; }
.next-steps h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 5px; top: 0.9rem; bottom: 0.9rem; width: 1.5px; background: var(--border); }
.step { position: relative; padding: 0.55rem 0.6rem 0.55rem 1.9rem; border-radius: 6px; color: var(--text); }
.step::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--accent); box-sizing: border-box; }
.steps.is-waiting .step:not(.is-lit) { color: var(--muted); }
.steps.is-waiting .step:not(.is-lit)::before { background: var(--bg); border-color: var(--border); }
.step:hover { background: var(--panel); }
.step:hover::before { box-shadow: 0 0 0 4px var(--accent-glow); }
@media (min-width: 60rem) {
  .contact-wrap { max-width: 64rem; }
  .contact-wrap > p { max-width: 44rem; }
  .contact-grid { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 17rem); gap: 4rem; align-items: start; }
  .contact-grid .next-steps { position: sticky; top: 6rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .form-progress-fill { transition: transform 0.45s ease; }
  .form .field input, .form textarea { transition: border-color 0.2s ease, box-shadow 0.25s ease; }
  .button.is-done .send-check path { animation: draw-check 0.5s ease-out both; }
  .step { transition: color 0.4s ease, background-color 0.2s ease; }
  .step::before { transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.2s ease; }
  .step:hover { transform: translateX(2px); transition: color 0.4s ease, background-color 0.2s ease, transform 0.2s ease; }
}
@keyframes draw-check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Policy pages */
.policy { padding-top: 3.5rem; padding-bottom: 4rem; }
.policy h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 0.75rem; }
.policy h2 { font-size: 1.35rem; margin: 2.25rem 0 0.6rem; }
.policy ul { padding-left: 1.25rem; max-width: 36em; }
.policy li { margin-bottom: 0.35rem; }
.terms { max-width: 36em; }
.terms dt { font-weight: 700; color: var(--text); margin-top: 1.4rem; }
.terms dd { margin: 0.25rem 0 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 2.5rem 0 3rem; font-size: 1rem; }
.site-footer p { margin: 0 0 0.5rem; }
.site-footer a { display: inline-block; padding: 0.35rem 0; }
.footer-name { font-weight: 700; color: var(--text); letter-spacing: -0.02em; }

/* Phone call/text bar: always visible on phones */
.mobile-bar { display: none; }
@media (max-width: 47.99rem) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
  .nav-mobile summary {
    list-style: none; cursor: pointer; font-weight: 700; color: var(--text);
    padding: 0.6rem 0.9rem; border: 1px solid var(--border); border-radius: 6px; min-height: 44px;
    display: flex; align-items: center; gap: 0.5rem;
  }
  .nav-mobile summary::-webkit-details-marker { display: none; }
  .nav-mobile summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); }
  .nav-mobile[open] summary::after { transform: translateY(20%) rotate(-135deg); }
  .nav-mobile nav {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--bg);
    border-bottom: 1px solid var(--border); padding: 0.5rem var(--gutter) 1rem; display: grid;
  }
  .nav-mobile nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--line); font-weight: 600; text-decoration: none; color: var(--text); }
  .nav-mobile nav a:hover { color: var(--accent); }
  .nav-mobile nav a:last-child { border-bottom: 0; }
  .nav-mobile .menu-call { padding: 0.8rem 0; font-weight: 600; color: var(--text); }
  .nav-mobile .menu-call a { padding: 0.6rem 0; border-bottom: 0; }
  .nav-mobile nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
  .mobile-bar {
    display: flex; align-items: center; gap: 0.25rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: var(--bg); border-top: 1px solid var(--border);
    padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom));
  }
  .mobile-bar a:not(.button) { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; padding: 0 0.6rem; font-weight: 700; }
  .mobile-bar .button { margin-left: auto; min-height: 44px; padding: 0.55rem 1rem; font-size: 0.98rem; }
  body { padding-bottom: 4.5rem; }
}

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

/* ---------- Shared helpers ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sample-head h3 { margin: 0; font-size: 1.15rem; color: var(--text); letter-spacing: -0.01em; }

/* App-style dashboard */
.app-frame { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.app-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--border); background: var(--panel); }
.app-dots { display: flex; gap: 5px; }
.app-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.app-title { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.app-body { display: flex; }
.app-rail { display: none; flex-direction: column; gap: 0.6rem; padding: 0.9rem 0.6rem; border-right: 1px solid var(--border); background: var(--panel); }
.app-rail i { width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 1.5px solid var(--chart); opacity: 0.55; }
.app-rail i.on { background: var(--accent); border-color: var(--accent); opacity: 1; }
@media (min-width: 40rem) { .app-rail { display: flex; } }
.app-main { flex: 1; min-width: 0; padding: 1rem; }
.range-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.range { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 1rem; }
.range label { padding: 0.4rem 0.85rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: var(--muted); min-height: 36px; display: flex; align-items: center; }
.range label + label { border-left: 1px solid var(--border); }
#r7:checked ~ .range label[for="r7"], #r30:checked ~ .range label[for="r30"] { background: var(--selected); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
#r7:focus-visible ~ .range label[for="r7"], #r30:focus-visible ~ .range label[for="r30"] { outline: 3px solid var(--accent); outline-offset: -3px; }
#r7:checked ~ .data-30, #r30:checked ~ .data-7 { display: none; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin: 0 0 1rem; }
.kpi { border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.8rem; background: var(--raised); }
.kpi dt { font-size: 0.82rem; color: var(--muted); line-height: 1.25; }
.kpi dd { margin: 0.25rem 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
.num { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.spark { width: 64px; height: 22px; flex: none; }
.spark polyline { fill: none; stroke: var(--chart); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart { margin: 0 0 1.25rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 0.9rem 0.4rem; }
.chart figcaption { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 700; color: var(--muted); margin-bottom: 0.4rem; }
.legend { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; }
.legend i { width: 0.7rem; height: 0.7rem; border-radius: 2px; background: var(--accent); }
.bars-svg { width: 100%; height: auto; display: block; }
.bars-svg .wd { fill: var(--chart); }
.bars-svg .wk { fill: var(--accent); }
.bars-svg .axis { stroke: var(--border); stroke-width: 1; }
.bars-svg text { font: 600 9px var(--font); fill: var(--muted); }
.feed-title { font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--text); }
.feed { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 8px; }
.feed-row { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 0.6rem; align-items: center; padding: 0.6rem 0.8rem; font-size: 0.88rem; line-height: 1.35; }
.feed-row + .feed-row { border-top: 1px solid var(--line); }
.feed-time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.arrow { color: var(--muted); }
.tag { font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
/* Status pills: dark tinted backgrounds, light text (8.4:1, 9.4:1, 9.5:1) */
.tag-ok { color: var(--pill-ok); border-color: var(--accent); background: var(--accent-tint); }
.tag-neutral { color: var(--pill-neutral); border-color: var(--chart); background: var(--border); }
.tag-wait { color: var(--pill-wait); border-color: var(--pill-wait-edge); background: var(--pill-wait-bg); }
@media (max-width: 30rem) { .feed-row { grid-template-columns: 1fr auto; } .feed-path { grid-column: 1 / -1; grid-row: 2; } }

/* Calculator: slider + number box, big result, slipped-vs-total bar */
.dual { display: grid; grid-template-columns: 1fr 7.5rem; gap: 0.75rem; align-items: center; }
.slider { width: 100%; accent-color: var(--accent); min-height: 44px; }
.calc-big-note { display: inline-block; font-size: 0.95rem; font-weight: 600; letter-spacing: 0; color: var(--muted); vertical-align: 0.35em; }
.calc-big { font-size: clamp(2.4rem, 9vw, 3.4rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--text); margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.slip-bar { height: 12px; background: var(--selected); border-radius: 999px; overflow: hidden; }
.slip-fill { display: block; height: 100%; width: 0; background: var(--accent); }
.slip-caption { font-size: 0.95rem; color: var(--muted); margin: 0.4rem 0 1rem; }

/* ---------- Hero: AI call transcript card (js/call-card.js) ---------- */
/* Lives in the left column under the buttons. The full transcript is the default HTML
   (and the reduce-motion view); the script plays it once after load, then shows Replay. */
.live-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.call-card { position: relative; z-index: 1; margin: 2rem 0 0; max-width: 31rem; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 0.9rem 1rem 0.95rem; }
.call-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; margin-bottom: 0.7rem; }
.call-title { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.replay-link { margin-left: auto; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0.3rem 0; min-height: 32px; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.replay-link:hover { color: var(--accent-hover); }
.call { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.msg { position: relative; max-width: 85%; padding: 0.45rem 0.7rem; border-radius: 0.9rem; font-size: 0.86rem; line-height: 1.4; transition: color 0.35s ease, background-color 0.35s ease; }
.msg.ai { justify-self: start; background: var(--raised); color: var(--text); border-bottom-left-radius: 0.25rem; }
.msg.lead { justify-self: end; background: var(--selected); color: var(--text); border-bottom-right-radius: 0.25rem; }
/* While playing: a message keeps its space but is invisible; typing dots show where it will appear */
.msg.is-wait, .call-done.is-wait, .call-done.is-wait span { color: transparent; background-color: transparent; }
.msg.is-typing::before {
  content: ""; position: absolute; top: 0; width: 2.7rem; height: 1.8rem; border-radius: 0.9rem;
  background-image: radial-gradient(circle at 0.75rem 50%, var(--muted) 2.5px, transparent 3px), radial-gradient(circle at 1.35rem 50%, var(--muted) 2.5px, transparent 3px), radial-gradient(circle at 1.95rem 50%, var(--muted) 2.5px, transparent 3px);
}
.msg.ai.is-typing::before { left: 0; background-color: var(--raised); }
.msg.lead.is-typing::before { right: 0; background-color: var(--selected); }
@media (prefers-reduced-motion: no-preference) {
  .msg.is-typing::before { animation: typing 0.9s ease-in-out infinite; }
}
@keyframes typing { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.call-done { margin: 0.75rem 0 0; font-size: 0.86rem; font-weight: 700; color: var(--text); transition: color 0.4s ease; max-width: none; }
.call-done span { color: var(--accent); }
.call-card .note { margin: 0.55rem 0 0; font-size: 0.8rem; color: var(--muted); }

/* ---------- Hover and press states (no glow, no gradients) ---------- */
.panel, .flow-card, .kpi, .faq summary, .range label, .tab-list label { transition: border-color 0.12s ease-out, transform 0.08s ease-out; }
.panel:hover, .flow-card:hover, .kpi:hover { border-color: var(--accent); }
.button { transition: background-color 0.12s ease-out, border-color 0.12s ease-out, transform 0.08s ease-out; }
.button:active, .tab-list label:active, .range label:active { transform: scale(0.98); }

/* ---------- "See it in action": 3 tabs, no JavaScript needed ---------- */
.tabs { margin-top: 1.75rem; }
.tab-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tab-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.tab-list label {
  cursor: pointer; font-weight: 700; padding: 0.6rem 1rem; min-height: 44px; display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--bg);
}
.tab-list label:hover { border-color: var(--accent); }
#tab-dash:checked ~ .tab-list label[for="tab-dash"],
#tab-text:checked ~ .tab-list label[for="tab-text"],
#tab-report:checked ~ .tab-list label[for="tab-report"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#tab-dash:focus-visible ~ .tab-list label[for="tab-dash"],
#tab-text:focus-visible ~ .tab-list label[for="tab-text"],
#tab-report:focus-visible ~ .tab-list label[for="tab-report"] { outline: 3px solid var(--accent); outline-offset: 3px; }
.tab-panel { display: none; }
#tab-dash:checked ~ .panel-dash, #tab-text:checked ~ .panel-text, #tab-report:checked ~ .panel-report { display: block; }
.panel-dash .app { max-width: 60rem; }
.panel-report .report-panel { max-width: 34rem; }
.sample-head h3 { margin: 0; font-size: 1.15rem; color: var(--text); letter-spacing: -0.01em; }

/* dashboard: all 5 tiles in one row on desktop, numbers never wrap */
@media (min-width: 64rem) { .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.num { white-space: nowrap; }
.online { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .status-dot { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- Band: "How it starts" ---------- */
/* One large panel card. Text: off-white headline and body 14.9:1 on the panel. */
.section + .band { border-top: 0; }
.band-card {
  display: grid; gap: 2rem; align-items: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 2.25rem 1.5rem;
}
.band-text p { color: var(--text); }
@media (min-width: 860px) {
  .band-card { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: 3rem; padding: 3rem; }
}
/* Week row: seven day slots that fill like jobs getting booked (js/band-week.js).
   The HTML is a still, partly filled row; that is what reduce motion shows. */
.week { display: block; width: 100%; max-width: 21rem; height: auto; justify-self: end; }
.week .slot-box { fill: var(--raised); stroke: var(--border); stroke-width: 1.5; }
.week .slot-fill { fill: var(--accent); opacity: 0; transition: opacity 0.9s ease; }
.week .check { fill: none; stroke: var(--on-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.7s ease 0.4s; }
.week .is-booked .slot-fill, .week .is-checked .check { opacity: 1; }
@media (max-width: 859px) { .week { justify-self: start; } }

/* ---------- Phone mockup: a real phone shape, pure CSS + inline SVG ---------- */
.phone-col { max-width: 23rem; }
.name-try { margin-bottom: 1.25rem; }
.name-try label { display: block; font-weight: 700; margin-bottom: 0.2rem; }
.name-try .hint { margin: 0 0 0.45rem; }
.name-try input {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--field); border-radius: 6px; padding: 0.7rem 0.85rem; min-height: 48px;
}
.iphone { margin: 0; width: 100%; max-width: 20.5rem; }
/* Dark-mode messages screen. Phone-only colors live here as --ph-* variables. */
.iphone {
  --ph-frame: #0B0C0E; --ph-edge: #3A414B; --ph-screen: #000000; --ph-ink: #F2F3F5;
  --ph-dim: #8E8E93;   /* timestamps and placeholder: 6.4:1 on the screen */
  --ph-rule: #1C1C1E; --ph-bubble: #26262A; --ph-avatar: #4A5361; --ph-field: #3A3A3C;
  --ph-sent: #1E7E34;  /* the lead's own reply, SMS green: --ph-ink on it is 4.63:1 */
}
.iphone-body {
  position: relative; aspect-ratio: 9 / 19; border-radius: 3.2rem; padding: 0.75rem;
  background: var(--ph-frame);
  box-shadow: 0 0 0 1px var(--ph-edge), 0 0 0 3px var(--ph-frame), 0 24px 48px -12px rgb(0 0 0 / 0.6), 0 4px 10px rgb(0 0 0 / 0.4);
}
/* side buttons: volume (left, two) and power (right) */
.iphone-body::before, .iphone-body::after { content: ""; position: absolute; width: 4px; background: var(--ph-edge); }
.iphone-body::before { left: -6px; top: 22%; height: 9%; border-radius: 3px 0 0 3px; box-shadow: 0 calc(20.5rem * 0.24) 0 var(--ph-edge); }
.iphone-body::after { right: -6px; top: 27%; height: 14%; border-radius: 0 3px 3px 0; }
.iphone-screen {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: var(--ph-screen); border-radius: 2.5rem; overflow: hidden;
}
.notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 42%; height: 1.65rem; background: var(--ph-frame); border-radius: 0 0 1.1rem 1.1rem; z-index: 2; }
.status { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 1.4rem 0 1.6rem; height: 2.1rem; flex: none; }
.st-time { font-weight: 700; font-size: 0.85rem; color: var(--ph-ink); }
.st-icons { display: flex; gap: 0.25rem; align-items: center; }
.st-icons svg { height: 0.62rem; width: auto; fill: var(--ph-ink); }
.st-icons .bat-shell { fill: none; stroke: var(--ph-ink); stroke-width: 1; }
.msg-head {
  flex: none; display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.85rem 0.6rem; border-bottom: 1px solid var(--ph-rule);
}
.mh-back svg { width: 0.6rem; height: 1rem; fill: none; stroke: var(--ph-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mh-who { display: grid; justify-items: center; gap: 0.15rem; min-width: 0; }
.avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--ph-avatar); color: var(--ph-ink); font-weight: 700; font-size: 0.85rem; }
.msg-name { font-size: 0.78rem; color: var(--ph-ink); font-weight: 600; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-actions { display: flex; gap: 0.7rem; }
.mh-actions svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--ph-ink); stroke-width: 1.6; stroke-linejoin: round; }
.phone-label { justify-content: center; display: flex; margin: 0.5rem 0 0; font-size: 0.75rem; }
.thread { flex: 1; list-style: none; margin: 0; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.86rem; line-height: 1.38; overflow: hidden; }
.stamp { align-self: center; font-size: 0.7rem; color: var(--ph-dim); margin: 0.35rem 0 0.2rem; }
.bub { position: relative; max-width: 82%; padding: 0.5rem 0.75rem; border-radius: 1.1rem; overflow-wrap: anywhere; }
.bub.in { align-self: flex-start; background: var(--ph-bubble); color: var(--ph-ink); }
.bub.in::before { content: ""; position: absolute; bottom: 0; left: -0.35rem; width: 0.9rem; height: 1rem; background: var(--ph-bubble); border-bottom-right-radius: 0.8rem 0.7rem; }
.bub.in::after { content: ""; position: absolute; bottom: 0; left: -0.55rem; width: 0.55rem; height: 1rem; background: var(--ph-screen); border-bottom-right-radius: 0.55rem; }
.bub.out { align-self: flex-end; background: var(--ph-sent); color: var(--ph-ink); }
.bub.out::before { content: ""; position: absolute; bottom: 0; right: -0.35rem; width: 0.9rem; height: 1rem; background: var(--ph-sent); border-bottom-left-radius: 0.8rem 0.7rem; }
.bub.out::after { content: ""; position: absolute; bottom: 0; right: -0.55rem; width: 0.55rem; height: 1rem; background: var(--ph-screen); border-bottom-left-radius: 0.55rem; }
.compose { flex: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem 0.4rem; border-top: 1px solid var(--ph-rule); }
.cmp-icon svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--ph-dim); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.cmp-field { flex: 1; font-size: 0.8rem; color: var(--ph-dim); border: 1px solid var(--ph-field); border-radius: 999px; padding: 0.35rem 0.75rem; }
.home-bar { flex: none; align-self: center; width: 36%; height: 4px; border-radius: 999px; background: var(--ph-ink); margin: 0.3rem 0 0.45rem; }
.iphone figcaption { text-align: center; font-size: 0.9rem; color: var(--muted); margin-top: 1.1rem; }
@media (min-width: 48rem) {
  .panel-text { display: none; }
  #tab-text:checked ~ .panel-text { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 20.5rem); gap: 3rem; align-items: start; }
  .panel-text .phone-col { display: contents; }
}

/* sample labels and Monday report */
.sample-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 1.1rem; }
.sample-label { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.9rem; color: var(--muted); }
.sample-label::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1.5px solid var(--accent); flex: none; }
.report-period { font-size: 0.95rem; color: var(--muted); margin-bottom: 0.5rem; }
.report { margin: 0; }
.report div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-top: 1px solid var(--line); }
.report div:first-child { border-top: 0; }
.report dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-link { margin: 1.75rem 0 0; font-weight: 700; }

/* chart: fixed height bars; day labels as plain text */
.bars-svg { width: 100%; height: 7.5rem; display: block; }
.bar-labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-align: center; padding: 0.3rem 0 0.2rem; }

/* tabs on phones: one row you can swipe */
@media (max-width: 47.99rem) {
  .tab-list { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px 4px; margin-left: -4px; scrollbar-width: none; }
  .tab-list::-webkit-scrollbar { display: none; }
  .tab-list label { flex: none; white-space: nowrap; font-size: 0.95rem; padding: 0.55rem 0.9rem; }
}
.app-bar { min-width: 0; }
.app-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.online { white-space: nowrap; flex: none; }
@media (max-width: 30rem) { .app-dots { display: none; } }

/* ---------- Hero v2: headline type and the steps row (the grid hero below builds on these) ---------- */
.hero.hero-v2 { overflow: hidden; padding: 1.75rem 0 2.5rem; }
.hero-v2 h1 { font-weight: 300; font-size: clamp(2.3rem, 9.6vw, 3.3rem); line-height: 1.12; letter-spacing: -0.03em; max-width: 14ch; }
.hero-v2 .lead { margin: 1rem 0 0; max-width: 30em; font-size: 1.1rem; }
.hero-v2 .cta-row { margin-top: 1.25rem; }
.hero-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 0; margin: 1rem 0 0; padding: 0; font-size: 0.85rem; color: var(--muted); }
.hero-steps li + li::before { content: "·"; margin: 0 0.5rem; color: var(--accent); }
@media (min-width: 60rem) {
  .hero.hero-v2 { padding: 4.5rem 0 4rem; }
  .hero-v2 h1 { font-size: clamp(3.6rem, 5.4vw, 5.2rem); line-height: 1.1; }
  .hero-v2 .lead { margin-top: 1.4rem; font-size: 1.3rem; }
  .hero-v2 .cta-row { margin-top: 1.8rem; }
}

/* ---------- Hero grid (js/grid-loader.js, js/grid.js) ---------- */
/* No object: a low-camera perspective grid fills the hero behind centered text, with a glowing
   horizon line just under the steps row. Its
   poster (the grid's first frame) is shown top-aligned and scaled to the hero's width, nudged by
   js/grid-loader.js so its horizon lines up, and stays for reduce motion, data saver, or no
   WebGL. A very soft, wide shadow drawn by the grid sits behind the headline, sub-line, button
   and steps; the bottom of the hero fades into the page.
   On phones the hero fills the first screen between the header and the call bar. */
.hero.hero-tron { overflow: hidden; display: flex; flex-direction: column; padding: 2.5rem 0 0; background: var(--bg);
  min-height: calc(100svh - 4.25rem - 1px); }
.tron-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* The bottom 16% fades into the page, eased so it flattens out and is fully the page color
     just before the hero ends: the next section rises out of it with no line or shade change.
     (Only the mask's opacity matters; --bg is just an opaque color here.) */
  --tron-fade: linear-gradient(to bottom, var(--bg) 84%, color-mix(in srgb, var(--bg) 72%, transparent) 89%,
    color-mix(in srgb, var(--bg) 38%, transparent) 93%, color-mix(in srgb, var(--bg) 10%, transparent) 96.5%, transparent 98.5%);
  -webkit-mask-image: var(--tron-fade); mask-image: var(--tron-fade);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tron-poster, .tron-canvas { position: absolute; left: 0; top: 0; display: block; width: 100%; }
.tron-canvas { height: 100%; }
.tron-poster { height: auto; }   /* always scaled to the hero's width, top-aligned (rendered taller than any hero) */
.tron-canvas { opacity: 0; transition: opacity 1s ease; }
.tron-scene.is-live .tron-canvas { opacity: 1; }
.hero-tron .hero-copy { width: 100%; text-align: center; }
.hero-tron h1 { margin: 0 auto; text-shadow: 0 0 1.5rem var(--bg); }   /* a faint dark glow behind the letters */
.hero-tron .lead { margin-left: auto; margin-right: auto; max-width: 24em; color: var(--lead); }
.hero-tron .cta-row { justify-content: center; margin-bottom: 0; }
/* The five steps: a quiet stepper (orange dots on a hairline, labels under), not links. */
.hero-tron .hero-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; max-width: 26rem; margin: 1.5rem auto 0; font-size: 0.8rem; line-height: 1.3; letter-spacing: 0.01em; cursor: default; }
.hero-tron .hero-steps li { position: relative; padding-top: 1rem; text-align: center; }
.hero-tron .hero-steps li::before { content: ""; position: absolute; top: 0.2rem; left: 50%; width: 6px; height: 6px; margin: 0 0 0 -3px; border-radius: 50%; background: var(--accent); }
.hero-tron .hero-steps li + li::after { content: ""; position: absolute; top: calc(0.2rem + 2.5px); right: calc(50% + 7px); width: calc(100% - 14px); height: 1px; background: var(--v2-hairline); }
@media (max-width: 47.99rem) {
  /* Phones: tighter spacing so the floor gets about 40% of the first screen. */
  .hero.hero-tron { padding-top: 1.5rem; min-height: calc(100svh - 4.25rem - 1px - 3.85rem - env(safe-area-inset-bottom, 0px)); }
  .hero-tron h1 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); max-width: none; }
  .hero-tron .lead { margin-top: 0.75rem; font-size: 1rem; line-height: 1.5; }
  .hero-tron .cta-row { margin-top: 1rem; }
  .hero-tron .hero-steps { margin-top: 1rem; }
}
@media (min-width: 60rem) {
  /* A compact text block, so the horizon sits a little above mid-hero and the grid fills about 45% of it. */
  .hero.hero-tron { padding-top: clamp(1.5rem, calc(55svh - 412px), 8rem); min-height: min(calc(100svh - 4.25rem - 1px), 60rem); }   /* top space grows with the screen's height, so the horizon stays near 55% */
  .hero-tron h1 { max-width: 16ch; font-size: clamp(3.4rem, 4.8vw, 4.6rem); line-height: 1.08; }
  .hero-tron .lead { max-width: 28em; margin-top: 1rem; line-height: 1.5; }
  .hero-tron .cta-row { margin-top: 1.4rem; }
  .hero-tron .hero-steps { max-width: 30rem; margin-top: 1.25rem; font-size: 0.85rem; }
}

/* The example call card, just below the hero */
.call-band { padding: 0.5rem 0 1.5rem; }
.call-band-title { max-width: 34rem; margin: 0 auto 0.75rem; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
.call-band .call-card { margin: 0 auto; max-width: 34rem; }

/* ---------- Scroll thread (js/thread.js) ---------- */
/* A thin orange line, drawn as the visitor scrolls. It grows out of the "Lead response
   system" panel's left edge, steps into the left margin, and runs down to the closing
   "Book a 15-minute call" button. Decorative only; reduce motion shows it fully drawn. */
main { position: relative; }
.scroll-thread { position: absolute; inset: 0; pointer-events: none; z-index: 2; }   /* above the band card so the line reaches the button; it only draws in the margin */
.thread-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.thread-path { fill: none; stroke: url(#thread-fade); stroke-width: 1.5; }   /* fades in from the panel */
.thread-svg stop { stop-color: var(--accent); }
.thread-node.thread-start { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }   /* the small node where it starts */
.thread-node { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--border); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.thread-node.is-on, .thread-node.thread-start.is-on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---------- Monday report: arrives like an email (js/report.js) ---------- */
/* The finished report is the default HTML; the script plays it once when the tab is shown. */
.mail-head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--raised); font-size: 0.9rem; font-weight: 700; color: var(--text); transition: opacity 0.5s ease, transform 0.5s ease; }
.mail-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); flex: none; }
.report-charts { display: flex; gap: 1.25rem; align-items: flex-end; margin: 1rem 0 0.3rem; }
.report-bars { width: 9.6rem; height: 3rem; }
.report-bars rect { fill: var(--chart); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.45s ease; }
.report-bars rect.wk { fill: var(--accent); }
.report-spark { width: 7.5rem; height: 3rem; }
.report-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease; }
.report-note { font-size: 0.85rem; color: var(--muted); margin: 0.2rem 0 0.6rem; }
.report-highlight { margin: 0; padding: 0.55rem 0.75rem; border-left: 2px solid var(--accent); background: var(--raised); color: var(--text); font-weight: 700; font-size: 0.95rem; transition: opacity 0.6s ease; }
.report-panel.is-instant, .report-panel.is-instant * { transition: none !important; }   /* reset to the start without animating */
.report-spark polyline { transition-delay: 0.9s; }
.report-highlight { transition-delay: 2s; }
.report-panel.is-before .mail-head { opacity: 0; transform: translateY(-0.6rem); }
.report-panel.is-before .report-bars rect { transform: scaleY(0); }
.report-panel.is-before .report-spark polyline { stroke-dashoffset: 1; }
.report-panel.is-before .report-highlight { opacity: 0; }