/* Design system: frosted glass panels over soft scarlet and gray.
   Type styles, spacing and radii follow the landing page design skill (Tailwind type steps,
   spacing tokens, one typeface: Manrope; Geist Mono only for times and numbers).
   The glass look was requested explicitly: the page base stays a flat color, and the color behind
   the glass comes from blurred solid shapes (.sky), not CSS gradients. */

:root {
  /* Scarlet, gray, black and white: Ohio State colors, without any university marks. */
  --bg: #f4f4f5;
  --glass: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-soft: rgba(255, 255, 255, 0.4);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 1px 1px rgba(10, 10, 10, 0.04), 0 12px 32px -12px rgba(10, 10, 10, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --blur: blur(22px) saturate(160%);
  --surface: var(--glass-soft);
  --surface-2: rgba(255, 255, 255, 0.64);
  --raised: var(--glass-strong);
  --fg: #0a0a0a;
  --muted: #52525b;
  --faint: #85858e;
  --line: rgba(10, 10, 10, 0.09);
  --line-strong: rgba(10, 10, 10, 0.17);
  --accent: #bb0000;
  --accent-hover: #990000;
  --accent-fg: #ffffff;
  --accent-soft: rgba(187, 0, 0, 0.08);
  --btn: #bb0000; --btn-hover: #990000; --btn-fg: #ffffff;
  --me: #bb0000;
  --me-fg: #ffffff;
  --them: rgba(255, 255, 255, 0.88);
  --them-fg: #0a0a0a;
  --ok: #15803d;
  --warn: #a16207;
  --warn-soft: rgba(234, 179, 8, 0.16);
  --danger: #c2410c;
  --danger-soft: rgba(234, 88, 12, 0.12);
  --shadow: var(--glass-shadow);
  --hero-from: #000000;
  --hero-to: #666666;
  --tag-muted: rgba(10, 10, 10, 0.24);
  --sky-1: #ff8a8a; --sky-2: #c4c4ca; --sky-3: #ffc9c9; --sky-4: #a8a8b0; --sky-op: 0.55;

  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px; --s-300: 24px;
  --s-400: 32px; --s-500: 40px; --s-600: 48px; --s-700: 64px; --s-800: 80px; --s-900: 96px;

  --r-sm: 2px; --r: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #181818;
    --glass: rgba(30, 30, 32, 0.55); --glass-strong: rgba(36, 36, 38, 0.75); --glass-soft: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.11);
    --glass-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 16px 40px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --surface-2: rgba(255, 255, 255, 0.09);
    --fg: #f4f4f5; --muted: #a1a1aa; --faint: #74747c; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
    --accent: #ff5a5a; --accent-hover: #ff7a7a; --accent-fg: #140404; --accent-soft: rgba(255, 90, 90, 0.12); --btn: #c8102e; --btn-hover: #a50d26; --btn-fg: #ffffff;
    --me: #b30000; --me-fg: #ffffff; --them: rgba(255, 255, 255, 0.09); --them-fg: #f4f4f5;
    --ok: #4ade80; --warn: #facc15; --warn-soft: rgba(250, 204, 21, 0.12); --danger: #fb923c; --danger-soft: rgba(251, 146, 60, 0.12);
    --hero-from: #ffffff; --hero-to: #9b9b9b; --tag-muted: rgba(244, 244, 245, 0.26);
    --sky-1: #8b0000; --sky-2: #3f3f46; --sky-3: #a11a1a; --sky-4: #2a2a2e; --sky-op: 0.55;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #181818;
  --glass: rgba(30, 30, 32, 0.55); --glass-strong: rgba(36, 36, 38, 0.75); --glass-soft: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.11);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 16px 40px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --surface-2: rgba(255, 255, 255, 0.09);
  --fg: #f4f4f5; --muted: #a1a1aa; --faint: #74747c; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
  --accent: #ff5a5a; --accent-hover: #ff7a7a; --accent-fg: #140404; --accent-soft: rgba(255, 90, 90, 0.12); --btn: #c8102e; --btn-hover: #a50d26; --btn-fg: #ffffff;
  --me: #b30000; --me-fg: #ffffff; --them: rgba(255, 255, 255, 0.09); --them-fg: #f4f4f5;
  --ok: #4ade80; --warn: #facc15; --warn-soft: rgba(250, 204, 21, 0.12); --danger: #fb923c; --danger-soft: rgba(251, 146, 60, 0.12);
  --hero-from: #ffffff; --hero-to: #9b9b9b; --tag-muted: rgba(244, 244, 245, 0.26);
  --sky-1: #8b0000; --sky-2: #3f3f46; --sky-3: #a11a1a; --sky-4: #2a2a2e; --sky-op: 0.55;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-900); }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; font-style: normal; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, dd, small { text-wrap: pretty; }
em, i, cite { font-style: normal; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-md); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.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; }

/* ---------- text styles ---------- */
.heading-1 { font-size: 60px; line-height: 60px; font-weight: 600; letter-spacing: -0.02em; }
.heading-2 { font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; }
.heading-3 { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.015em; }
.heading-4 { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; }
.heading-5 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.heading-6 { font-size: 20px; line-height: 28px; font-weight: 600; }
.title-1 { font-size: 20px; line-height: 28px; font-weight: 500; }
.title-2 { font-size: 18px; line-height: 28px; font-weight: 500; }
.title-3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.title-4 { font-size: 14px; line-height: 20px; font-weight: 500; }
.title-5 { font-size: 12px; line-height: 16px; font-weight: 500; }
.body-1 { font-size: 16px; line-height: 24px; font-weight: 600; }
.body-2 { font-size: 16px; line-height: 24px; font-weight: 500; }
.body-3 { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-4 { font-size: 14px; line-height: 20px; font-weight: 600; }
.body-5 { font-size: 14px; line-height: 20px; font-weight: 500; }
.body-6 { font-size: 14px; line-height: 20px; font-weight: 400; }
.button-lg { font-size: 18px; line-height: 28px; font-weight: 600; }
.button-md { font-size: 16px; line-height: 24px; font-weight: 600; }
.button-sm { font-size: 14px; line-height: 20px; font-weight: 600; }
.button-xsm { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-1 { font-size: 14px; line-height: 20px; font-weight: 500; }
.caption-2 { font-size: 14px; line-height: 20px; font-weight: 400; }
.caption-3 { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-4 { font-size: 12px; line-height: 16px; font-weight: 500; }
.caption-5 { font-size: 12px; line-height: 16px; font-weight: 400; }

@media (max-width: 720px) {
  .heading-1 { font-size: 36px; line-height: 40px; }
  .heading-2 { font-size: 30px; line-height: 36px; }
  .heading-3 { font-size: 30px; line-height: 36px; }
  .heading-4 { font-size: 24px; line-height: 32px; }
}

/* ---------- layout ---------- */
.container { width: 100%; max-width: 1152px; margin: 0 auto; padding-left: max(var(--s-200), env(safe-area-inset-left)); padding-right: max(var(--s-200), env(safe-area-inset-right)); }
@media (min-width: 720px) { .container { padding-left: var(--s-400); padding-right: var(--s-400); } }
.section { padding-top: var(--s-900); padding-bottom: var(--s-900); }
@media (max-width: 720px) { .section { padding-top: var(--s-700); padding-bottom: var(--s-700); } }
.section-head { display: grid; gap: var(--s-200); max-width: 680px; margin-bottom: var(--s-600); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-75); color: var(--accent); }
.skip { position: absolute; left: var(--s-200); top: var(--s-200); z-index: 100; padding: var(--s-75) var(--s-100); background: var(--fg); color: var(--bg); border-radius: var(--r-lg); transform: translateY(-200%); transition: transform 300ms var(--ease); text-decoration: none; }
.skip:focus { transform: translateY(0); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-75); padding: var(--s-75) var(--s-100); min-height: 40px; border-radius: var(--r-lg); border: 1px solid transparent; background: var(--btn); color: var(--btn-fg); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 300ms var(--ease), transform 300ms var(--ease), border-color 300ms var(--ease); }
.btn:hover { background: var(--btn-hover); transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.secondary { background: var(--raised); color: var(--fg); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--surface); }
.btn.ghost { background: transparent; color: var(--fg); border-color: transparent; }
.btn.ghost:hover { background: var(--surface); }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.small { min-height: 32px; padding: var(--s-50) var(--s-100); }
.btn .ph { font-size: 18px; }

/* ---------- navigation ---------- */
.nav-wrap { position: fixed; top: var(--s-200); left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 var(--s-200); pointer-events: none; }
.nav { pointer-events: auto; display: flex; align-items: center; gap: var(--s-300); padding: var(--s-75) var(--s-75) var(--s-75) var(--s-200); border-radius: var(--r-2xl); border: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--shadow); max-width: 100%; }
.brand { display: inline-flex; align-items: center; gap: var(--s-75); text-decoration: none; white-space: nowrap; }
.brand svg { width: 24px; height: 24px; }
.nav-links { display: flex; align-items: center; gap: var(--s-50); list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-flex; padding: var(--s-75) var(--s-100); border-radius: var(--r-lg); text-decoration: none; color: var(--muted); transition: color 300ms var(--ease), background-color 300ms var(--ease); }
.nav-links a:hover { color: var(--fg); background: var(--surface); }
.nav-links a[aria-current="page"], .nav-links a.is-active { color: var(--fg); background: var(--surface); }
.menu-toggle { display: none; width: 40px; height: 40px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--raised); cursor: pointer; position: relative; }
.menu-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--fg); transition: transform 500ms var(--ease); }
.menu-toggle span:nth-child(1) { transform: translateY(-4px); }
.menu-toggle span:nth-child(2) { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(0) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 40; background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); padding: 112px var(--s-300) var(--s-400); display: flex; flex-direction: column; gap: var(--s-75); opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease); }
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a[aria-current="page"] { color: var(--accent); }
.mobile-menu a { text-decoration: none; padding: var(--s-100) 0; opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.mobile-menu.open a { opacity: 1; transform: translateY(0); }
.mobile-menu .btn { margin-top: var(--s-300); }
@media (max-width: 860px) {
  .nav { width: 100%; justify-content: space-between; gap: var(--s-100); }
  .nav-links, .nav .nav-cta { display: none; }
  .menu-toggle { display: inline-block; }
}
@media (min-width: 861px) { .mobile-menu { display: none; } }

/* ---------- cards, forms ---------- */
.card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s-300); }
.card.flat { background: var(--surface); border-color: transparent; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-50); min-width: 0; }
.field label { color: var(--fg); }
.field .hint { color: var(--muted); }
.input { width: 100%; min-height: 40px; padding: var(--s-75) var(--s-100); border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--raised); transition: border-color 300ms var(--ease); font-size: 16px; line-height: 24px; }
.input:hover { border-color: var(--faint); }
.input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
textarea.input { min-height: 96px; resize: vertical; }
.field.invalid .input { border-color: var(--danger); }
.field .error { color: var(--danger); display: none; }
.field.invalid .error { display: block; }
.form-msg { padding: var(--s-100) var(--s-200); border-radius: var(--r-lg); display: none; }
.form-msg.show { display: block; }
.form-msg.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.form-msg.err { background: var(--danger-soft); color: var(--danger); }
.pill { display: inline-flex; align-items: center; gap: var(--s-50); padding: var(--s-25) var(--s-75); border-radius: var(--r-full); border: 1px solid currentColor; white-space: nowrap; }
.pill.ok { color: var(--ok); }
.pill.warn { color: var(--warn); }
.pill.neutral { color: var(--muted); }

/* ---------- chat (shared by hero, demo, dashboard transcripts) ---------- */
.phone { display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-3xl); box-shadow: var(--shadow); overflow: hidden; min-height: 0; }
.phone-top { display: flex; align-items: center; gap: var(--s-100); padding: var(--s-200) var(--s-300); border: 0; box-shadow: 0 1px 0 var(--line); }
.avatar { width: 40px; height: 40px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--btn); color: var(--btn-fg); flex: none; }
.phone-name { display: grid; min-width: 0; }
.phone-name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-clock { margin-left: auto; color: var(--muted); white-space: nowrap; }
.log { flex: 1; overflow-y: auto; padding: var(--s-200); display: flex; flex-direction: column; gap: var(--s-75); scroll-behavior: smooth; }
.day { align-self: center; color: var(--muted); padding: var(--s-50) 0; }
.msg { max-width: 84%; padding: var(--s-75) var(--s-100); border-radius: var(--r-3xl); white-space: pre-wrap; overflow-wrap: anywhere; animation: rise 500ms var(--ease) both; }
.msg.me { align-self: flex-end; background: var(--me); color: var(--me-fg); border-bottom-right-radius: var(--r-md); }
.msg.ai { align-self: flex-start; background: var(--them); color: var(--them-fg); border-bottom-left-radius: var(--r-md); }
.msg-meta { color: var(--muted); align-self: flex-start; padding-left: var(--s-75); }
.msg-meta.right { align-self: flex-end; padding: 0 var(--s-75) 0 0; }
.typing { display: inline-flex; gap: var(--s-50); padding: var(--s-50) var(--s-25); }
.typing span { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--muted); animation: blink 1.2s var(--ease) infinite; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
.chips { display: flex; gap: var(--s-75); overflow-x: auto; padding: var(--s-25) var(--s-200) var(--s-100); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.slot-row { display: flex; flex-wrap: wrap; gap: var(--s-75); align-self: flex-start; max-width: 92%; }
.chip { flex: none; white-space: nowrap; padding: var(--s-50) var(--s-100); border-radius: var(--r-full); border: 1px solid var(--line-strong); background: var(--raised); cursor: pointer; transition: border-color 300ms var(--ease), background-color 300ms var(--ease), transform 300ms var(--ease); }
.chip:hover { border-color: var(--accent); background: var(--surface); }
.chip:active { transform: scale(0.98); }
.chip.slot { border-color: var(--accent); color: var(--accent); font-family: var(--mono); }
.chip[disabled] { opacity: 0.5; cursor: not-allowed; }
.composer { display: flex; gap: var(--s-75); padding: var(--s-100); border: 0; box-shadow: 0 -1px 0 var(--line); }
.composer .input { border-radius: var(--r-full); padding-left: var(--s-200); }
.composer .btn { border-radius: var(--r-full); }

/* ---------- skeletons, empty states ---------- */
.skeleton { background: var(--surface-2); border-radius: var(--r-lg); animation: pulse 1.6s var(--ease) infinite; }
.empty { display: grid; justify-items: start; gap: var(--s-75); padding: var(--s-300); border-radius: var(--r-xl); border: 1px dashed var(--line-strong); color: var(--muted); }
.empty .ph { font-size: 24px; color: var(--accent); }

/* ---------- reveals ---------- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.tagline .w { color: var(--tag-muted); transition: color 600ms var(--ease); }
.tagline .w.on { color: var(--fg); }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .reveal { transform: none; transition: opacity 600ms linear; }
  .mobile-menu a, .menu-toggle span, .btn, .chip { transition: opacity 300ms linear; }
  .tagline .w { color: var(--fg); transition: none; }
  .log { scroll-behavior: auto; }
}

/* ---------- footer ---------- */
.footer { border: 0; box-shadow: 0 -1px 0 var(--line); padding: var(--s-600) 0 var(--s-500); color: var(--muted); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-200); }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--s-300); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--fg); text-decoration: underline; }

/* ---------- glass layer ---------- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky i { position: absolute; display: block; border-radius: var(--r-full); filter: blur(90px); opacity: var(--sky-op); will-change: transform; }
.sky i:nth-child(1) { width: 48vmax; height: 48vmax; top: -16vmax; left: -14vmax; background: var(--sky-1); animation: drift 38s var(--ease) infinite alternate; }
.sky i:nth-child(2) { width: 42vmax; height: 42vmax; top: 18vh; right: -16vmax; background: var(--sky-2); animation: drift 46s var(--ease) infinite alternate-reverse; }
.sky i:nth-child(3) { width: 30vmax; height: 30vmax; bottom: -10vmax; left: 22vw; background: var(--sky-3); animation: drift 52s var(--ease) infinite alternate; }
.sky i:nth-child(4) { width: 24vmax; height: 24vmax; top: 48vh; left: -8vmax; background: var(--sky-4); animation: drift 44s var(--ease) infinite alternate-reverse; }
@keyframes drift { to { transform: translate(6vmax, 5vmax) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .sky i { animation: none; } }

.card, .phone, .nav, .stat, .timeline li, .faq details, .lst, .item, .appbar, .savebar, .convo-btn, .seg, .glass {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.card, .phone { background: var(--glass); }
.nav, .appbar, .savebar { background: var(--glass-strong); }
.card.flat, .stat, .timeline li, .faq details, .lst, .convo-btn { background: var(--glass-soft); box-shadow: inset 0 1px 0 var(--glass-border); }
.item { background: var(--glass-soft); box-shadow: none; }
.timeline li.win { background: var(--accent-soft); }
.input, .chip, .slot-list span { background: var(--glass-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn { box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--btn) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn.secondary, .btn.ghost { box-shadow: none; }
.btn.secondary { background: var(--glass-strong); border-color: var(--glass-border); }
.btn.secondary:hover { background: var(--surface-2); }
.msg.ai { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); }
.mobile-menu { background: var(--glass-strong); }
.eyebrow .dot-accent { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--accent); }
.accent-text { color: var(--accent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .phone, .nav, .appbar, .savebar { background: var(--bg); }
}

/* ---------- niche color themes ----------
   Student housing keeps the scarlet, gray, black and white base above.
   Restoration: gray, warm white yellow, deep blue. Med spas: cobalt blue, sage green, white. */
:root[data-niche="restoration"] {
  --bg: #f7f5ee;
  --glass: rgba(255, 253, 245, 0.6); --glass-strong: rgba(255, 253, 245, 0.82); --glass-soft: rgba(255, 253, 245, 0.42);
  --fg: #0f172a; --muted: #4b5563; --faint: #8a8f99;
  --accent: #1e3a8a; --accent-hover: #172e6e; --accent-fg: #ffffff; --accent-soft: rgba(30, 58, 138, 0.09);
  --btn: #1e3a8a; --btn-hover: #172e6e; --btn-fg: #ffffff;
  --me: #1e3a8a; --me-fg: #ffffff;
  --sky-1: #fde68a; --sky-2: #cbd5e1; --sky-3: #fef3c7; --sky-4: #93a5cf; --sky-op: 0.6;
  --glow: rgba(30, 58, 138, 0.15);
}
:root[data-niche="med-spas"] {
  --bg: #f6f8f4;
  --glass: rgba(255, 255, 255, 0.6); --glass-strong: rgba(255, 255, 255, 0.82); --glass-soft: rgba(255, 255, 255, 0.42);
  --fg: #0b1726; --muted: #4a5a52; --faint: #869088;
  --accent: #0047ab; --accent-hover: #003a8c; --accent-fg: #ffffff; --accent-soft: rgba(0, 71, 171, 0.08);
  --btn: #0047ab; --btn-hover: #003a8c; --btn-fg: #ffffff;
  --me: #0047ab; --me-fg: #ffffff;
  --ok: #3f6b48;
  --sky-1: #b7c9a8; --sky-2: #9fb8f2; --sky-3: #dfe8d6; --sky-4: #8fae95; --sky-op: 0.6;
  --glow: rgba(0, 71, 171, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root[data-niche="restoration"]:not([data-theme="light"]) {
    --bg: #131209; --glass: rgba(30, 30, 34, 0.55); --glass-strong: rgba(36, 36, 42, 0.75); --glass-soft: rgba(255, 255, 255, 0.05);
    --fg: #f5f3ea; --muted: #a8a99f; --faint: #77786f;
    --accent: #8aa8ff; --accent-hover: #a9c0ff; --accent-fg: #0b1430; --accent-soft: rgba(138, 168, 255, 0.12);
    --btn: #2a4fb5; --btn-hover: #2344a0; --btn-fg: #ffffff; --me: #2a4fb5; --me-fg: #ffffff;
    --sky-1: #6b5413; --sky-2: #3a3f4a; --sky-3: #1e3a8a; --sky-4: #2b2b27; --sky-op: 0.55;
    --glow: rgba(138, 168, 255, 0.13);
  }
  :root[data-niche="med-spas"]:not([data-theme="light"]) {
    --bg: #181818; --glass: rgba(30, 32, 30, 0.55); --glass-strong: rgba(36, 38, 36, 0.75); --glass-soft: rgba(255, 255, 255, 0.05);
    --fg: #f2f5f1; --muted: #a3b0a6; --faint: #73807a;
    --accent: #7ea6ff; --accent-hover: #9dbcff; --accent-fg: #071a3d; --accent-soft: rgba(126, 166, 255, 0.12);
    --btn: #1f5fd1; --btn-hover: #1a52b5; --btn-fg: #ffffff; --me: #1f5fd1; --me-fg: #ffffff;
    --ok: #8fd19e;
    --sky-1: #3d5a40; --sky-2: #0047ab; --sky-3: #2c3a2e; --sky-4: #4f6b55; --sky-op: 0.5;
    --glow: rgba(126, 166, 255, 0.13);
  }
}
:root[data-niche="restoration"][data-theme="dark"] {
  --bg: #131209; --glass: rgba(30, 30, 34, 0.55); --glass-strong: rgba(36, 36, 42, 0.75); --glass-soft: rgba(255, 255, 255, 0.05);
  --fg: #f5f3ea; --muted: #a8a99f; --faint: #77786f;
  --accent: #8aa8ff; --accent-hover: #a9c0ff; --accent-fg: #0b1430; --accent-soft: rgba(138, 168, 255, 0.12);
  --btn: #2a4fb5; --btn-hover: #2344a0; --btn-fg: #ffffff; --me: #2a4fb5; --me-fg: #ffffff;
  --sky-1: #6b5413; --sky-2: #3a3f4a; --sky-3: #1e3a8a; --sky-4: #2b2b27; --sky-op: 0.55;
  --glow: rgba(138, 168, 255, 0.13);
}
:root[data-niche="med-spas"][data-theme="dark"] {
  --bg: #181818; --glass: rgba(30, 32, 30, 0.55); --glass-strong: rgba(36, 38, 36, 0.75); --glass-soft: rgba(255, 255, 255, 0.05);
  --fg: #f2f5f1; --muted: #a3b0a6; --faint: #73807a;
  --accent: #7ea6ff; --accent-hover: #9dbcff; --accent-fg: #071a3d; --accent-soft: rgba(126, 166, 255, 0.12);
  --btn: #1f5fd1; --btn-hover: #1a52b5; --btn-fg: #ffffff; --me: #1f5fd1; --me-fg: #ffffff;
  --ok: #8fd19e;
  --sky-1: #3d5a40; --sky-2: #0047ab; --sky-3: #2c3a2e; --sky-4: #4f6b55; --sky-op: 0.5;
  --glow: rgba(126, 166, 255, 0.13);
}

/* ---------- cursor glow ----------
   A soft circle of the page's main color follows the mouse and fades into the background.
   (A gradient here was asked for explicitly; it sits behind content and only moves by transform.) */
:root { --glow: rgba(187, 0, 0, 0.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-niche]) { --glow: rgba(255, 90, 90, 0.13); } }
:root[data-theme="dark"]:not([data-niche]) { --glow: rgba(255, 90, 90, 0.13); }
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: -1; width: 380px; height: 380px; margin: -190px 0 0 -190px;
  border-radius: var(--r-full); pointer-events: none; opacity: 0;
  background: radial-gradient(circle closest-side, var(--glow), transparent);
  transition: opacity 600ms var(--ease); will-change: transform;
}
.cursor-glow.on { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }