/* =============================================================================
   Clisyp AI — PipelineSync brand theme (v6)
   -----------------------------------------------------------------------------
   The dark, animated look of pipelinesync.net: a near-black canvas (#05070c)
   with drifting orange/blue/cyan orbs, a 64px hairline grid and a faint noise
   layer. Panels are white-gradient cards on --bg-elev with hairline borders;
   tiles light up with a pointer-following spotlight. Type is Geist with
   Geist Mono uppercase labels. One loud control per view: the orange pill.

   The first block below is the brand token set, verbatim. The second block
   maps the app's older token names onto it so every component follows.
   Contrast pairs are checked in test/ui-design.js.
   ========================================================================== */

:root {
  color-scheme: dark;
  /* Surfaces */
  --bg: #05070c;
  --bg-elev: #0a0e17;
  --bg-elev-2: #0f1522;
  --surface: rgba(255, 255, 255, 0.025);
  --surface-2: rgba(255, 255, 255, 0.045);
  --line: rgba(148, 163, 184, 0.13);
  --line-2: rgba(148, 163, 184, 0.22);
  /* Text */
  --text: #f1f4f9;
  --text-2: #aeb8c7;
  --text-3: #8591a3;
  /* Brand */
  --brand: #ff7a1a;
  --brand-2: #ffab5e;
  --blue: #5b8cff;
  --cyan: #3fd0ee;
  --green: #34d399;
  --grad: linear-gradient(115deg, #ffc285 0%, #ff7a1a 38%, #7a9bff 78%, #5b8cff 100%);
  --grad-soft: linear-gradient(135deg, rgba(255, 122, 26, 0.16), rgba(91, 140, 255, 0.12));
  /* Shape and depth */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px rgba(255, 122, 26, 0.25), 0 12px 40px -10px rgba(255, 122, 26, 0.45);
  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Type */
  --font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- semantic states (text in the colour, 10% fill, 32% border) ---- */
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.1);
  --amber-line: rgba(251, 191, 36, 0.32);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.1);
  --red-line: rgba(248, 113, 113, 0.32);
  --green-soft: rgba(52, 211, 153, 0.1);
  --green-line: rgba(52, 211, 153, 0.32);
  --info: #8fb0ff;
  --info-soft: rgba(91, 140, 255, 0.1);
  --line-cyan: rgba(91, 140, 255, 0.32);

  /* ---- older names, mapped onto the brand tokens ---- */
  --bg-sunk: #0a0e17;
  --line-strong: rgba(148, 163, 184, 0.22);
  --hairline: var(--line);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  --glass-blur: blur(16px) saturate(140%);
  --ink: #f1f4f9;
  --ink-2: #aeb8c7;
  --ink-3: #8591a3;
  --ink-soft: var(--text-2);
  --muted: #aeb8c7;
  --faint: #8591a3;
  --deco: #4a5568;
  --emerald: var(--green);
  --rose: var(--red);
  --violet: #a78bfa;
  --brand-strong: #ffa357;
  --brand-ink: #1a0a00;
  --brand-soft: rgba(255, 122, 26, 0.1);
  --brand-line: rgba(255, 122, 26, 0.32);
  --ember: var(--brand);
  --ember-soft: rgba(255, 122, 26, 0.1);
  --ember-line: rgba(255, 122, 26, 0.32);
  --req: #ffab5e;
  --navy: #8fb0ff;
  --navy-soft: rgba(91, 140, 255, 0.12);
  --navy-line: rgba(91, 140, 255, 0.32);
  --steel-soft: rgba(91, 140, 255, 0.1);
  --sync-orange: #ff7a1a;
  --sky: #5b8cff;
  --mist: #f1f4f9;
  --void: #05070c;

  /* ---- gradients + glow ---- */
  --grad-accent: var(--grad);
  --grad-ember: linear-gradient(180deg, #ffa357, #ff7a1a);
  --grad-bar: linear-gradient(90deg, #ff7a1a, #7a9bff 70%, #5b8cff);
  --glow-o: var(--shadow-glow);
  --glow-b: 0 0 0 1px rgba(91, 140, 255, 0.3), 0 12px 40px -10px rgba(91, 140, 255, 0.45);

  /* ---- type ---- */
  --display: var(--font);
  --body: var(--font);
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);     /* card titles 17-20px */
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);      /* app section titles 20-24px */
  --fs-2xl: clamp(1.75rem, 1.5rem + 1vw, 2rem);         /* app page titles 28-32px */

  /* ---- spacing ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* ---- radii (controls are pills) ---- */
  --r-sm: 10px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- elevation ---- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --sh-3: var(--shadow);
  --ring: 0 0 0 3px rgba(255, 122, 26, 0.18);
  --focus: #ffab5e;
  --tap: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --scroll-thumb: rgba(148, 163, 184, 0.28);
}

/* =============================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--bg);
  color-scheme: dark;
}
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text-2);
  /* Transparent so the fixed orb layer (z-index -2) shows; html carries --bg */
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font); font-weight: 600; color: var(--text);
  line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); line-height: 1.05; letter-spacing: -0.045em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); letter-spacing: -0.01em; }
p { margin: 0 0 0.75em; }
a { color: var(--brand-2); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
::selection { background: rgba(255, 122, 26, 0.4); color: #fff; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 4px; }
/* The main region receives programmatic focus on stage changes for screen readers;
   a full-viewport outline is not a useful indicator, so suppress it there. */
#main-content:focus { outline: none; }

/* Slim scrollbars with the brand orange→blue thumb */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(160deg, var(--brand), var(--blue));
  border-radius: 10px; border: 2px solid var(--bg);
}
*::-webkit-scrollbar-track { background: transparent; }

/* =============================================================================
   Atmosphere — drifting orbs, 64px masked grid, faint noise
   ========================================================================== */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; opacity: 1; transition: opacity 0.6s var(--ease); }
/* App screens keep the orbs quiet so data stays readable */
body.app-screen .aurora { opacity: 0.55; }
.orb-bg {
  position: absolute; border-radius: 50%;
  width: 56vmax; height: 56vmax;
  filter: blur(90px);
  opacity: 0.45;
}
.orb-bg.a { left: -20vmax; top: -24vmax;
  background: radial-gradient(circle, rgba(255, 122, 26, 0.55), rgba(255, 122, 26, 0.12) 45%, transparent 66%);
  animation: nAuroraA 26s var(--ease) infinite alternate; }
.orb-bg.b { right: -20vmax; top: -22vmax;
  background: radial-gradient(circle, rgba(91, 140, 255, 0.5), rgba(91, 140, 255, 0.12) 45%, transparent 66%);
  animation: nAuroraB 30s var(--ease) infinite alternate; }
.orb-bg.c { left: 18vw; bottom: -34vmax; width: 60vmax; height: 60vmax; opacity: 0.3;
  background: radial-gradient(circle, rgba(63, 208, 238, 0.4), transparent 62%);
  animation: nAuroraC 22s var(--ease) infinite alternate; }
@keyframes nAuroraA { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(8vw, 6vh, 0) scale(1.1); } }
@keyframes nAuroraB { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-8vw, 8vh, 0) scale(1.08); } }
@keyframes nAuroraC { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-6vw, -6vh, 0) scale(1.12); } }
.grid-underlay {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, black 30%, transparent 78%);
}
/* Noise texture over the whole canvas */
.grid-underlay::after {
  content: ""; position: fixed; inset: 0; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: none; -webkit-mask-image: none;
}

/* Screen-reader only */
.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;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  background: var(--bg-elev); color: var(--text);
  padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }
.noscript {
  max-width: 420px; margin: 18vh auto; padding: 32px 28px;
  background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  text-align: center;
}
.noscript h1 { font-size: 20px; margin-bottom: 8px; letter-spacing: -0.025em; }
.noscript p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }

/* =============================================================================
   Panels — white-gradient card on --bg-elev, hairline border, deep shadow
   ========================================================================== */
.glass, .card, .call, .gate-card, .doc, .consent-card,
.booking .card, .success-card, .unlock-panel, .review-group, .loader {
  position: relative;
  background: var(--glass), rgba(10, 14, 23, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
/* Panels inside another panel: an inner tile */
.glass-deep, .unlock-panel, .review-group {
  background: var(--glass), var(--bg-elev-2);
  border-radius: var(--r-lg);
}
/* Corner marks on key panels — an orange tick and a hairline tick */
.hud-frame::before, .hud-frame::after {
  content: ""; position: absolute; pointer-events: none; z-index: 2;
}
.hud-frame::before { top: -1px; left: 28px; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand), transparent); box-shadow: 0 0 12px rgba(255, 122, 26, 0.7); }
.hud-frame::after { bottom: -1px; right: 28px; width: 40px; height: 1px; background: var(--line-2); }
.specular { position: relative; }
.specular::before { content: none; }
.card > *, .call > *, .gate-card > *, .doc > * { position: relative; z-index: 1; }

/* Pointer-following spotlight + gradient border on interactive tiles.
   public/motion.js sets --mx/--my; touch and reduced motion skip it. */
.gap-card, .change-card, .stat, .priority-action { position: relative; isolation: isolate; }
.gap-card::before, .change-card::before, .stat::before, .priority-action::before,
.gap-card::after, .change-card::after, .stat::after, .priority-action::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.3s var(--ease); z-index: -1;
}
.gap-card::before, .change-card::before, .stat::before, .priority-action::before {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 122, 26, 0.1), transparent 60%);
}
.gap-card::after, .change-card::after, .stat::after, .priority-action::after {
  padding: 1px; z-index: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 122, 26, 0.7), rgba(91, 140, 255, 0.45) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (hover: hover) and (pointer: fine) {
  .gap-card:hover::before, .change-card:hover::before, .stat:hover::before, .priority-action:hover::before,
  .gap-card:hover::after, .change-card:hover::after, .stat:hover::after, .priority-action:hover::after { opacity: 1; }
}

/* =============================================================================
   Type utilities
   ========================================================================== */
.lede { font-size: var(--fs-md); color: var(--text-2); }
.sub { color: var(--text-2); font-size: var(--fs-sm); }
.small { font-size: var(--fs-sm); }
.muted { color: var(--text-2); }
.txt-err { color: var(--red); }
.mono { font-family: var(--mono); }
/* Gradient text — reserved for one word or phrase per hero heading */
.accent {
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: accent-shift 8s ease-in-out infinite;
}
@keyframes accent-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* Mono labels — the signature: eyebrows, table headers, KPI labels, meta */
.kicker, .pick-label, .tbl th, .stat .l, .day .dow, .steps-count, .call-status {
  font-family: var(--mono); font-weight: 500; font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.meta { color: var(--text-3); font-size: var(--fs-sm); }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.mb12 { margin-bottom: 12px; }
.inline-block { display: inline-block; }

/* Eyebrow — a pill with a pulsing orange dot */
.telem, .telemetry-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 13px 6px 11px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-2);
}
.telem .d, .telemetry-chip .dot {
  position: relative; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(255, 122, 26, 0.8);
}
.telem .d::after, .telemetry-chip .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--brand);
  animation: telem-ping 2s var(--ease) infinite;
}
.telem.cy, .telemetry-chip.cy { color: var(--text-2); }
@keyframes telem-ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes telem-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* =============================================================================
   Buttons — pills; orange gradient primary with a sheen, glass ghost
   ========================================================================== */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  font-family: var(--font); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em;
  border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.3s var(--ease), color 0.2s var(--ease), background-color 0.25s var(--ease);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.8125rem; }

/* Primary: the one loud control per view */
.btn-primary {
  color: var(--brand-ink);
  background: var(--grad-ember);
  border-color: rgba(255, 194, 133, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 30px -10px rgba(255, 122, 26, 0.8);
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-primary:hover:not(:disabled) {
  color: var(--brand-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(255, 122, 26, 0.35), 0 16px 44px -10px rgba(255, 122, 26, 0.95);
}
.btn-primary:hover:not(:disabled)::after { transform: translateX(120%); transition: transform 0.7s var(--ease); }
/* Blue secondary */
.btn-dark, .btn-amber {
  color: var(--text);
  background: rgba(91, 140, 255, 0.1);
  border-color: rgba(91, 140, 255, 0.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-dark:hover:not(:disabled), .btn-amber:hover:not(:disabled) { background: rgba(91, 140, 255, 0.18); border-color: rgba(91, 140, 255, 0.6); color: #fff; box-shadow: var(--glow-b); }
/* Ghost */
.btn-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.05); }
/* End call */
.btn-end {
  color: var(--red);
  background: transparent;
  border-color: var(--red-line);
}
.btn-end:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn-row-center { justify-content: center; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03); color: var(--text-2);
  cursor: pointer; font-size: 1.1rem;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.icon-btn:hover { border-color: rgba(255, 255, 255, 0.35); color: var(--text); background: rgba(255, 255, 255, 0.05); }
.icon-btn svg { width: 20px; height: 20px; display: block; }

/* =============================================================================
   Forms
   ========================================================================== */
.field { margin-bottom: 14px; }
.field label, .field .label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-2);
  margin-bottom: 7px;
}
.field .hint { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; margin-top: 6px; }
.req, .nullbadge {
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: var(--r-pill); text-transform: uppercase; white-space: nowrap;
}
.req { color: var(--req); background: var(--ember-soft); border: 1px solid var(--ember-line); }
.nullbadge { color: var(--navy); background: var(--steel-soft); border: 1px solid var(--navy-line); }
.field.is-null > label { color: var(--navy); }
.field-warn { color: var(--amber); font-size: var(--fs-sm); margin-top: 6px; }
.field input[type="text"], .field input[type="email"], .field input[type="number"],
.field input[type="password"], .field input:not([type]), .field select, .field textarea,
.ro-field {
  width: 100%; min-height: var(--tap);
  padding: 10px 14px;
  font-family: var(--font); font-size: 0.9375rem; color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238591a3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field select option { background: var(--bg-elev); color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(148, 163, 184, 0.34); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: rgba(255, 122, 26, 0.55);
  box-shadow: var(--ring);
  background: rgba(255, 255, 255, 0.045);
}
.field input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.ro-field {
  display: flex; align-items: center;
  color: var(--text);
  border-style: dashed;
  overflow: hidden; text-overflow: ellipsis;
}
.form-error, .call-note.err {
  color: var(--red); background: var(--red-soft);
  border: 1px solid var(--red-line); border-radius: var(--r);
  padding: 10px 14px; font-size: var(--fs-sm); margin: 10px 0 0;
}
.checkline {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin: 14px 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  font-size: 0.9375rem; cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.checkline:hover { border-color: var(--line-2); background: var(--surface-2); }
.checkline input[type="checkbox"] {
  width: 22px; height: 22px; margin: 1px 0 0; flex: none;
  accent-color: var(--brand); cursor: pointer;
}
/* Turnstile slot */
.cf-turnstile { display: flex; justify-content: center; margin: 4px 0; }
#turnstile-widget { min-height: 65px; }

/* "Heard on the call" helper */
.heard {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 12px;
  font-size: var(--fs-sm); color: var(--text-2);
  background: var(--info-soft);
  border: 1px dashed var(--line-cyan); border-radius: var(--r);
}
.heard b { color: var(--info); font-weight: 600; }
.heard span { color: var(--text-3); }

/* =============================================================================
   Notices, badges, chips, key-values
   ========================================================================== */
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; margin: 14px 0;
  font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface);
}
.notice svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.notice.info { border-color: var(--line-cyan); background: var(--info-soft); }
.notice.info svg { color: var(--info); }
.notice a { font-weight: 600; }
.call-note {
  padding: 10px 14px; margin: 10px 0 0;
  font-size: var(--fs-sm); color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 0.71875rem; font-weight: 500; letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-2);
  color: var(--text-2);
}
.chip.kb { color: var(--navy); background: var(--steel-soft); border-color: var(--navy-line); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.kv {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 2px; border-bottom: 1px solid var(--line);
  font-size: 0.93rem;
}
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--text-2); font-weight: 400; flex: none; }
.kv .v { font-variant-numeric: tabular-nums; }
.kv .v { color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
/* The zero-touch "what Clisyp captured" list inside the collapsed details on the short card. */
.kv-list { margin-top: 4px; }
.kv-list .kv:last-child { border-bottom: 0; }
.badge-mode {
  font-family: var(--mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: var(--r-pill); text-transform: uppercase;
  color: var(--info); background: var(--info-soft); border: 1px solid var(--line-cyan);
}
/* Toast — deep navy glass slab */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + var(--safe-b)); z-index: 300;
  transform: translateX(-50%) translateY(20px);
  max-width: min(92vw, 480px);
  padding: 13px 20px; border-radius: var(--r-lg);
  font-size: 0.9rem; font-weight: 500; color: var(--ink); text-align: center;
  background: rgba(10, 14, 23, 0.94);
  border: 1px solid var(--line-2);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--sh-2);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-txt { color: inherit; }

/* =============================================================================
   App shell — glass topbar, step rail, footer
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 12px;
  min-height: 72px;
  padding: 10px clamp(16px, 3vw, 28px);
  background: rgba(5, 7, 12, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { display: flex; align-items: center; }
.brand-logo { display: inline-flex; align-items: center; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.userchip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
}
.userchip-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.userchip-av svg { display: block; width: 100%; height: 100%; }
.userchip-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.userchip-name b { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.userchip-name small { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* Step rail */
.steps { padding: 14px clamp(12px, 3vw, 28px) 0; }
.steps-count { margin: 0 0 8px; }
.steps-now { color: var(--text); font-weight: 500; margin-left: 8px; }
.steps-rail { display: flex; gap: 6px; }
.step {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--text-3); font-weight: 500;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
  min-width: 0;
}
.step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2);
}
.step .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.done { color: var(--ink-2); }
.step.done .n { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
.step.active {
  color: var(--text); border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.05);
}
.step.active .n {
  background: var(--grad-ember);
  border-color: transparent; color: var(--brand-ink);
  box-shadow: 0 0 12px rgba(255, 122, 26, 0.55);
}
.steps-bar { height: 3px; margin: 10px clamp(12px, 3vw, 28px) 0; border-radius: 3px; background: var(--line); overflow: hidden; }
.steps-bar span { display: block; height: 100%; border-radius: 3px;
  background: var(--grad-bar);
  box-shadow: 0 0 12px rgba(255, 122, 26, 0.5);
  transition: width 0.9s var(--ease); }
.footer {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 12px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--text-3);
  border-top: 1px solid var(--line);
  background: rgba(5, 7, 12, 0.72);
}
.footer a { color: var(--text-3); }
.footer a:hover { color: var(--brand-2); }

/* =============================================================================
   Entry gate
   ========================================================================== */
body.entry-screen { height: 100dvh; overflow: hidden; position: relative; }
body.entry-screen #app { height: 100dvh; }
/* Login screen: the PipelineSync S-mark alone, pinned to the upper-left corner. */
.gate-logo { position: absolute; top: clamp(14px, 3vh, 28px); left: clamp(16px, 3vw, 32px); z-index: 6; }
.gate-logo .ps-mark { display: inline-flex; }
.gate-brand { text-align: center; max-width: 560px; }
.gate-brand-inner { display: flex; flex-direction: column; align-items: center; }
/* The AI's name, above the hero heading — the Clisyp star-mark is gone,
   the name stays: "Clisyp AI" in the brand gradient. */
.gate-name {
  margin: 0 0 14px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  letter-spacing: -0.025em;
}
.gate-kicker {
  margin: 0 0 8px;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted, #B7C3DE);
}
.gate-name .accent { color: var(--ember, #F97A1A); }
/* The entry hero — display size, held so the gate still fits one viewport */
.gate-brand h1 { margin: 0 0 12px; font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.gate-brand h1 .accent {
  color: transparent;
}
.gate-brand .lede { margin-bottom: 14px; }
.gate-trust { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.trust-item { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.trust-item .d { background: var(--green); box-shadow: 0 0 10px rgba(52, 211, 153, 0.8); }
.trust-item .d::after { border-color: var(--green); }
.gate-side { width: 100%; display: flex; justify-content: center; }
.gate-card { width: 100%; max-width: 480px; padding: clamp(20px, 4vw, 34px); }
.gate-card h2 { margin-bottom: 4px; }
.gate-card .sub { margin-bottom: 18px; }
.gate-card form { margin-top: 6px; }
.gate-note { text-align: center; color: var(--text-3); font-size: var(--fs-xs); margin: 14px 0 0; }

/* =============================================================================
   Consent
   ========================================================================== */
.consent-card {
  max-width: 560px; margin: 0 auto;
  padding: clamp(24px, 5vw, 40px);
  text-align: left;
}
.consent-card h2 { margin-bottom: 6px; }
.consent-card > p { color: var(--text-2); }

/* =============================================================================
   Discovery call
   ========================================================================== */
.intake-wrap {
  display: flex; gap: 18px; align-items: stretch;
  width: 100%;
}
.intake-wrap.call-only { justify-content: center; }
.call {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: clamp(16px, 3vw, 30px);
}
.call-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.call-head .who { display: flex; align-items: center; gap: 12px; }
.call-head .who b { font-size: 1.0625rem; font-weight: 600; color: var(--text); display: block; letter-spacing: -0.025em; }
.call-head .who .small { display: block; }
.call-head-right { display: flex; gap: 8px; align-items: center; }
.call-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.nova-stepper { margin: 6px 0 4px; }
/* The orb — presence meter: a rotating particle globe drawn by public/orb.js into
   .orb-globe. No disc behind it; the canvas overhangs the box so the voice waves and the
   state glow are never clipped. The state classes below only tune the element itself. */
.voice-orb-container { display: flex; justify-content: center; }
.orb {
  position: relative;
  width: clamp(140px, 24vmin, 196px); height: clamp(140px, 24vmin, 196px);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.orb-globe { position: absolute; inset: -14%; width: 128%; height: 128%; display: block; pointer-events: none; }
.orb.idle { opacity: 0.92; }
/* The measured microphone level still lands on these bars (app.js paintMicLevel), and the
   globe reads it from #orb[data-level]; the bars themselves stay hidden. */
.orb-center { position: absolute; inset: 0; pointer-events: none; }
.orb-center .wave { display: none; }
.orb-center .wave span, .orb-center .wave.active span { display: block; }

/* Live subtitles */
.nova-live { width: 100%; max-width: 640px; text-align: center; }
.nova-live-main { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nova-question {
  font-family: var(--display); font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem); font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.35; color: var(--text); text-wrap: balance;
  /* One phrase at a time (captionChunks in app.js): two lines held, so the call never scrolls. */
  min-height: 2.7em;
}
.nova-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; }
.nova-wave-bar {
  width: 5px; border-radius: 3px;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sync-orange) 100%);
  animation: nova-wave-bounce 1.1s ease-in-out infinite;
  transform-origin: center;
}
.nova-wave-live .nova-wave-bar { animation-play-state: running; }
.nova-wave:not(.nova-wave-live) .nova-wave-bar, .call:not(.nova-wave-live) .nova-wave-bar { animation-play-state: paused; opacity: 0.45; }
@keyframes nova-wave-bounce { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
.line { font-size: 0.95rem; line-height: 1.5; }
.line.you {
  color: var(--text-2);
  padding: 10px 18px; border-radius: var(--r-lg); max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
}
.line.you.empty { color: var(--faint); border-style: dashed; background: transparent; }
.call-status { margin-top: 10px; }
.call-note { max-width: 640px; width: 100%; }
.call-summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--fs-sm);
}
/* Controls pinned at the bottom of the call panel */
.call-controls {
  flex: none;
  padding-top: 14px; margin-top: 8px;
  border-top: 1px solid var(--line);
  background: transparent;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.call-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.call-row:last-child { margin-bottom: 0; }
.chat-input { display: flex; gap: 8px; margin-top: 4px; }
.chat-input textarea {
  flex: 1; min-height: var(--tap); max-height: 120px;
  padding: 11px 16px; border-radius: var(--r);
  font-family: var(--font); font-size: 0.9375rem; color: var(--text);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-2);
  resize: none;
}
.chat-input textarea::placeholder { color: var(--text-3); }
.chat-input textarea:focus { outline: none; border-color: rgba(255, 122, 26, 0.55); box-shadow: var(--ring); }

/* =============================================================================
   Loaders
   ========================================================================== */
.loader {
  max-width: 560px; margin: 0 auto; width: 100%;
  padding: clamp(28px, 5vw, 48px); text-align: center;
}
.loader h2 { margin: 18px 0 6px; }
.nova-empty { max-width: 560px; margin: 0 auto; padding: clamp(28px, 5vw, 48px); text-align: center; }
.nova-empty h2 { margin-bottom: 18px; }
.scanline-sweep { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.scanline-sweep::after { content: none; }
.lstep {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 10px 18px; border-radius: var(--r-pill);
  font-size: 0.875rem; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lstep .ic {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-2); border-top-color: var(--brand);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.lstep.active { border-color: var(--line-2); color: var(--text); background: rgba(255, 255, 255, 0.05); }
.lstep.done .ic { border-color: var(--green); background: var(--green); animation: none; }
.lstep.error .ic { border-color: var(--red); background: var(--red); animation: none; }
.progressbar {
  margin-top: 16px; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--line);
}
.progressbar > div {
  height: 100%; border-radius: 999px;
  background: var(--grad-bar);
  box-shadow: 0 0 12px rgba(255, 122, 26, 0.5);
  transition: width 0.6s var(--ease);
}

/* =============================================================================
   Review signals
   ========================================================================== */
.review-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.review-header h2 { margin: 0; }
.review-group { padding: clamp(16px, 3vw, 26px); margin-bottom: 16px; }
.review-group h3 { font-size: var(--fs-lg); margin-bottom: 14px; }
.review-grid { display: grid; gap: 12px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review-full { grid-column: 1 / -1; }
/* Editable tables */
.tbl-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; background: transparent; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tbl th {
  text-align: left; padding: 10px 12px;
  font-size: 0.65625rem;
  background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:hover td { background: rgba(255, 255, 255, 0.025); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl-edit input, .tbl-edit select {
  width: 100%; min-height: 40px; padding: 8px 10px;
  font-family: var(--font); font-size: 0.875rem; color: var(--text);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.tbl-edit input:focus, .tbl-edit select:focus { outline: none; border-color: rgba(255, 122, 26, 0.55); box-shadow: var(--ring); }
.tbl .del, .del {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: transparent; color: var(--faint); font-size: 1.2rem; line-height: 1;
  cursor: pointer; transition: all 0.18s ease;
}
.tbl .del:hover, .del:hover { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
.col-price { width: 110px; } .col-pre { width: 150px; } .col-del { width: 52px; }
.col-vol { width: 120px; } .col-tracked { width: 130px; }
.action-keep { color: var(--green); font-weight: 600; }
.action-upgrade { color: var(--info); font-weight: 600; }
.action-replace { color: var(--amber); font-weight: 600; }
.action-consolidate { color: var(--violet); font-weight: 600; }

/* =============================================================================
   Blueprint document
   ========================================================================== */
.doc { padding: clamp(20px, 4vw, 44px); }
.doc-head { margin-bottom: 8px; }
.doc-head .kicker { margin-bottom: 8px; display: block; }
.doc-head h2 { font-size: var(--fs-2xl); margin-bottom: 6px; }
.doc h3.sec {
  display: flex; align-items: center; gap: 12px;
  margin: 32px 0 14px; padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xl);
}
.doc h3.sec:first-of-type { border-top: 0; padding-top: 6px; }
/* Icon tile — orange-tinted fill, 28% orange border, light-orange glyph */
.sn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  font-size: 0.8125rem; font-weight: 600; font-family: var(--mono); color: var(--brand-2);
  background: linear-gradient(135deg, rgba(255, 122, 26, 0.2), rgba(255, 122, 26, 0.06));
  border: 1px solid rgba(255, 122, 26, 0.28);
}
.doc ul, .doc ol { margin: 0 0 1em; padding-left: 1.4em; color: var(--text-2); }
.doc li { margin-bottom: 0.45em; }
.doc li::marker { color: var(--brand); }
.doc p { color: var(--text-2); }
.gap-analysis-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0; }
.gap-card, .change-card {
  padding: 22px; border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.gap-card h4, .change-card h4 { font-size: 1.0625rem; margin-bottom: 8px; }
.gap-card p, .change-card p { font-size: 0.875rem; color: var(--text-2); margin: 0; }
.gap-card { border-top: 2px solid var(--red-line); }
.change-card { border-top: 2px solid var(--green-line); }
@media (hover: hover) {
  .gap-card:hover, .change-card:hover, .stat:hover, .priority-action:hover {
    box-shadow: var(--shadow);
    transform: translateY(-4px);
  }
}
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
/* KPI tile — tabular number, mono label */
.stat {
  padding: 20px 18px; text-align: left; border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.stat .k {
  font-size: 1.5rem; font-weight: 600; color: var(--text);
  letter-spacing: -0.025em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat .k.am { color: var(--brand-2); }
.stat .l { margin-top: 8px; line-height: 1.5; }
.count-up { font-variant-numeric: tabular-nums; }
.priority-actions-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; }
.priority-action {
  padding: 20px; border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.priority-action h4 { font-size: 1rem; margin-bottom: 6px; color: var(--text); }
.priority-action p { margin: 0; }
/* Pipeline stage flow */
.stage-flow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin: 14px 0; padding: 16px;
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); overflow-x: auto;
}
.stage {
  padding: 7px 14px; border-radius: var(--r-pill); white-space: nowrap;
  font-family: var(--mono); font-size: 0.71875rem; font-weight: 500; color: var(--text-2);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-2);
}
.stage.won { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.stage.lost { color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
.stage.pipeline-sla-stage { color: var(--req); border-color: var(--ember-line); background: var(--ember-soft); }
.sla-badge {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--brand-ink); background: var(--brand);
  padding: 2px 8px; border-radius: var(--r-pill); margin-right: 6px; vertical-align: 2px;
}
.pipeline-flow-connector { display: inline-flex; flex: none; }
.pipeline-connector-svg { width: 32px; height: 18px; }
/* Cost of inaction */
.coa-item {
  padding: 14px 18px; margin-bottom: 10px; border-radius: var(--r-lg);
  background: var(--red-soft); border: 1px solid var(--red-line);
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline;
}
.coa-item .t { font-weight: 600; color: var(--text); }
.coa-item .v { font-family: var(--mono); font-weight: 600; color: var(--red); text-align: right; font-variant-numeric: tabular-nums; }
.coa-item .b { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--text-2); }
.coa-total {
  margin: 16px 0; padding: 16px 20px; border-radius: var(--r-lg);
  font-size: 1.02rem; text-align: center;
  background: var(--red-soft);
  border: 1px solid var(--red-line);
}
.coa-total b { color: var(--red); }
.compliance-flag {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; margin-bottom: 8px; border-radius: var(--r);
  background: var(--ember-soft); border: 1px solid var(--ember-line);
  font-size: 0.9rem;
}
.compliance-flag .code {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; flex: none;
  color: var(--req); background: var(--surface-2);
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--ember-line);
}
.doc-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-sm); }
/* Delivery moment: a light beam across the top of the delivered panel */
.nova-celebrate { border-color: var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow); }
.nova-celebrate::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 171, 94, 0.9), rgba(91, 140, 255, 0.7), transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: beam 4s var(--ease) infinite;
}
@keyframes beam { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } }
.nova-celebrate::after { content: none; }
/* Success + unlock panels */
.success-card { padding: clamp(22px, 3vw, 28px); margin-top: 18px; border-color: var(--green-line); }
.success-card h3 { color: var(--green); margin-bottom: 10px; }
.unlock-panel { padding: clamp(18px, 3vw, 28px); margin-top: 18px; }
.unlock-title { font-size: var(--fs-md); margin-bottom: 14px; }
.grid-2 { display: grid; gap: 12px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.code {
  font-family: var(--mono); letter-spacing: 0.35em; text-align: center;
  font-size: 1.3rem !important; font-weight: 700;
  background: var(--grad-accent);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: accent-shift 8s ease-in-out infinite;
}

/* =============================================================================
   Booking
   ========================================================================== */
.booking { width: 100%; }
.booking .card { padding: clamp(20px, 4vw, 36px); max-width: 720px; margin: 0 auto; }
.booking-embed-card { max-width: 860px !important; }
.pick-label { margin: 18px 0 10px; }
.day-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 64px; padding: 10px 4px;
  border-radius: var(--r-lg); cursor: pointer;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line);
  color: var(--text-2);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.day:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-4px); }
.day .dow { font-size: 0.625rem; }
.day .dnum { font-size: 1.25rem; font-weight: 600; color: var(--text); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.day.sel {
  background: var(--ember-soft);
  border-color: rgba(255, 122, 26, 0.55); color: var(--text);
  box-shadow: var(--shadow-glow);
}
.day.sel .dnum { color: var(--req); }
.slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slot {
  min-height: var(--tap); padding: 10px;
  border-radius: var(--r); cursor: pointer;
  font-family: var(--mono); font-size: 0.875rem; font-weight: 500;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); color: var(--text-2);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.slot:hover:not(:disabled) { border-color: var(--line-2); color: var(--text); background: var(--surface-2); transform: translateY(-2px); }
.slot:disabled { opacity: 0.35; cursor: not-allowed; }
.slot.sel {
  background: var(--navy-soft);
  border-color: var(--navy); color: var(--info);
  box-shadow: var(--glow-b);
}
.meetings-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-elev); }
.meetings-embed iframe { width: 100%; height: min(640px, 62dvh); border: 0; display: block; }

/* =============================================================================
   Done
   ========================================================================== */
.done-card { max-width: 600px; margin: 0 auto; padding: clamp(26px, 5vw, 44px); text-align: center; }
.done-list { text-align: left; margin: 18px 0 6px; }
.rounded-full { border-radius: var(--r-pill); }
.relative { position: relative; }
.openai { color: var(--text-2); }

/* Accordion (the "what Clisyp captured" details) */
details.mt8 {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
details.mt8[open] { background: var(--surface-2); border-color: var(--line-2); }
details.mt8 > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--tap); padding: 10px 16px; cursor: pointer; list-style: none;
  color: var(--text); font-weight: 500;
}
details.mt8 > summary::-webkit-details-marker { display: none; }
details.mt8 > summary::after {
  content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; font-family: var(--mono); font-size: 1rem;
  color: var(--text-2); border: 1px solid var(--line-2);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
details.mt8[open] > summary::after {
  transform: rotate(45deg); color: var(--brand-2);
  background: rgba(255, 122, 26, 0.12); border-color: rgba(255, 122, 26, 0.28);
}
details.mt8 > .kv-list { padding: 0 16px 8px; }

/* Scroll reveal — only armed by public/motion.js, so content is never left hidden */
.rv-armed .rv { opacity: 0; transform: translateY(28px); }
.rv-armed .rv.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--rv-d, 0ms); }

/* =============================================================================
   Centered, quiet workspace — the app shell.
   The page never scrolls: body.app-screen is locked to the dynamic viewport,
   and each view's panel scrolls internally when its content overflows.
   Long call content remains left-aligned inside its panel.
   ========================================================================== */
body.app-screen { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.app-screen #app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.app-screen .main {
  flex: 1 1 auto; min-height: 0; width: 100%;
  max-width: 1120px; margin-inline: auto;
  display: flex; flex-direction: column;
  padding: 0 clamp(12px, 3vw, 28px) clamp(10px, 2vh, 20px);
  overflow: hidden;
  text-align: left;
}
body.app-screen .steps, body.app-screen .steps-bar { flex: none; }
/* Each view's panel is the scroll container — the page itself never moves */
body.app-screen .main > .card,
body.app-screen .main > .doc,
body.app-screen .main > .booking,
body.app-screen .main > .intake-wrap {
  flex: 1 1 auto; min-height: 0; width: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  margin-top: 14px;
}
body.app-screen .main > .card { padding: clamp(18px, 3vw, 30px); }
body.app-screen .footer { flex: none; }
/* The call panel manages its own interior: subtitles scroll, controls stay put */
body.app-screen .main > .intake-wrap { overflow: visible; display: flex; }
body.app-screen .main > .intake-wrap > .call { overflow: hidden; }
.intake-wrap.call-only { max-width: 760px; margin-inline: auto; width: 100%; }
/* Review form columns */
.review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Decorative background overlays are removed */
body::before, body::after { display: none; }

/* Entry gate: one centered column, locked to the viewport */
body.entry-screen .gate {
  height: 100dvh; max-height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 3vh, 30px);
  padding: clamp(16px, 4vh, 40px) clamp(16px, 4vw, 32px);
  width: 100%; max-width: 1120px; margin-inline: auto;
}
body.entry-screen .gate-side { min-height: 0; width: 100%; display: flex; justify-content: center; }
body.entry-screen .gate-card { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }

/* =============================================================================
   Responsive refinements
   ========================================================================== */
/* Small phones: compact the rail, keep tap targets */
@media (max-width: 560px) {
  .step { flex: 0 0 auto; justify-content: center; padding: 8px; }
  .step .label { display: none; }
  .step.active { flex: 1 1 auto; min-width: 0; }
  .step.active .label { display: inline; }
  .steps-count { font-size: var(--fs-xs); }
  .userchip-name small { display: none; }
  .userchip { padding: 6px; }
  .topbar .btn { padding: 8px 12px; }
  .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row { grid-template-columns: 1fr; }
  .priority-actions-grid { grid-template-columns: 1fr; }
  .gap-analysis-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .day-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .day:nth-child(n+5) { margin-top: 0; }
}
/* Review stacks on narrow screens */
@media (max-width: 700px) {
  .review-grid { grid-template-columns: minmax(0, 1fr); }
  .call { padding: 16px; }
}
/* Short viewports: compact the gate so everything fits without scrolling */
/* Narrow phones get the same compaction (tall but narrow screens) */
@media (max-width: 560px), (max-height: 740px) {
  body.entry-screen .gate { gap: 10px; justify-content: flex-start; padding-top: max(12px, env(safe-area-inset-top)); overflow-y: auto; }
  .gate-name { font-size: 1.2rem; margin-bottom: 8px; }
  .gate-brand h1 { font-size: 1.5rem; margin: 0 0 4px; }
  .gate-brand .lede { font-size: 0.9rem; margin-bottom: 8px; }
  /* Kept on phones (most ad traffic): free, how long, what they get. Just smaller. */
  .gate-trust { gap: 6px; margin-top: 2px; }
  .gate-trust .trust-item { font-size: 0.68rem; padding: 3px 8px; }
  .gate-logo { top: 12px; left: 14px; }
  .gate-logo img { height: 30px; width: auto; }
  body.entry-screen .gate-brand { padding-top: 34px; }
  .gate-card { padding: 18px; }
  .notice { margin: 10px 0; padding: 10px 12px; }
}
/* Very small phones */
@media (max-width: 359px) {
  .btn-row .btn { flex: 1 1 100%; }
  .call-row .btn { flex: 1 1 100%; }
}
/* The call controls stay pinned above the keyboard on phones */
@media (max-width: 899px) {
  .call-controls { position: sticky; bottom: 0; z-index: 5;
    padding-bottom: calc(10px + var(--safe-b)); }
  .intake-wrap { flex-direction: column; }
}
/* Tablet */
@media (min-width: 680px) {
  .chat-input { max-width: 560px; margin-inline: auto; width: 100%; }
  .day-strip { gap: 10px; }
}
/* Desktop */
@media (min-width: 900px) {
  .intake-wrap { gap: 22px; }
  .gate-card { padding: 34px 36px; }
  .consent-card { padding: 40px 44px; }
  .doc { padding: 44px 52px; }
}
/* Wide desktop */
@media (min-width: 1140px) {
  body.app-screen .main { padding-inline: 28px; }
}

/* =============================================================================
   Motion, contrast, print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nova-wave-bar { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .aurora { display: none; }
  .accent, .stat .k, .code { animation: none; background-position: 0% 50%; }
  .rv-armed .rv { opacity: 1 !important; transform: none !important; filter: none !important; }
  .btn-primary::after, .nova-celebrate::before { display: none; }
}
@media (forced-colors: active) {
  .card, .call, .gate-card, .doc, .consent-card, .booking .card,
  .success-card, .unlock-panel, .review-group, .loader {
    background: Canvas; border: 2px solid CanvasText;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .btn, .day, .slot, .chip, .step { border: 1px solid ButtonText; }
  .btn-primary { background: ButtonFace; color: ButtonText; box-shadow: none; }
  .aurora, .grid-underlay, .specular::before, .hud-frame::before, .hud-frame::after { display: none; }
  .gap-card::before, .gap-card::after, .change-card::before, .change-card::after,
  .stat::before, .stat::after, .priority-action::before, .priority-action::after { display: none; }
}
@media print {
  .rv-armed .rv { opacity: 1 !important; transform: none !important; filter: none !important; }
  .aurora, .grid-underlay, .topbar, .footer, .steps, .steps-bar, .btn-row, .call-controls, .toast { display: none !important; }
  body.app-screen, body.app-screen #app, body.app-screen .main { height: auto; overflow: visible; display: block; }
  .card, .doc { background: #fff; color: #111; border: 1px solid #999; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .doc { overflow: visible; }
}

/* =============================================================================
   Brand lockup (PipelineSync S-mark + wordmark)
   The S-mark raster is rendered white with the site's own nav treatment:
   brightness(0) invert(1) plus an ember drop-shadow glow.
   ========================================================================== */
.ps-lockup { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.ps-lockup-mark { display: inline-flex; flex-shrink: 0; }
.ps-mark-img {
  display: block;
  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(249, 122, 26, 0.55));
}
.ps-wordmark { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.ps-wordmark-name { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; }
.ps-wordmark-sub { font-family: var(--mono); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
/* On a small header keep the short product name, not a clipped lockup. */
@media (max-width: 479px) {
  body.app-screen .topbar .ps-wordmark-sub { display: none; }
  body.app-screen .topbar .ps-wordmark-name { font-size: 16px !important; }
  body.app-screen .topbar .ps-lockup { gap: 0.35rem; }
  body.app-screen .topbar .ps-lockup-mark svg { height: 24px; width: auto; }
  body.app-screen .topbar .ps-lockup-mark img { height: 24px; width: auto; }
}

/* =============================================================================
   Runtime state classes
   ========================================================================== */
/* Orb lifecycle states (the orb is always the deep navy disc) */
/* Orb lifecycle states: colour, spin and waves per state live in public/orb.js */
.orb.speaking, .orb.listening, .orb.live, .orb.thinking, .orb.ready, .orb.complete, .orb.error {}
/* Horizontal check field variant */
.field-check { flex-direction: row; align-items: center; }
.field-check label { margin-bottom: 0; }
/* A checkbox line inside a field keeps its text next to the box, not spread to the far edge. */
.field .checkline { justify-content: flex-start; font-weight: 400; color: var(--text-2); }
/* Placeholders so every runtime class the app toggles has a rule */
.filled {}
.null {}
.pending {}
.complete {}
.ready {}

/* =============================================================================
   Terms checkbox on the entry gate, and the Terms and Conditions page
   ========================================================================== */
.terms-check { margin: 4px 0 6px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.terms-check a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 171, 94, 0.45); }
.terms-check input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px; }

.legal-page { min-height: 100dvh; display: flex; flex-direction: column; }
.legal-top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 72px; padding: 10px clamp(16px, 3vw, 28px);
  background: rgba(5, 7, 12, 0.72);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.legal-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; letter-spacing: -0.025em; }
.legal-brand:hover { text-decoration: none; color: var(--text); }
.legal-brand img { width: 32px; height: 32px; filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 122, 26, 0.55)); }
.legal-wrap {
  width: 100%; max-width: 1080px; margin: 0 auto; flex: 1;
  padding: clamp(32px, 6vw, 72px) clamp(16px, 3vw, 24px) 48px;
  display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr);
}
.legal-head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); margin: 14px 0 10px; }
.legal-head .lede { max-width: 62ch; }
.legal-head .meta { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.legal-toc { align-self: start; padding: 20px; }
.legal-toc ol { margin: 10px 0 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: var(--fs-sm); }
.legal-toc li::marker { color: var(--text-3); font-family: var(--mono); font-size: 0.75rem; }
.legal-toc a { color: var(--text-2); }
.legal-toc a:hover { color: var(--brand-2); }
.legal-body { padding: clamp(22px, 4vw, 44px); min-width: 0; }
.legal-body section + section { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.legal-body h2 { display: flex; align-items: center; gap: 12px; font-size: var(--fs-xl); scroll-margin-top: 96px; }
.legal-body h2 .sn { width: 34px; height: 34px; font-size: 0.75rem; }
.legal-body p, .legal-body li { max-width: 68ch; }
.legal-body ul { margin: 0 0 0.75em; padding-left: 1.3em; display: grid; gap: 6px; }
.legal-body li::marker { color: var(--brand); }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
@media (min-width: 900px) {
  .legal-wrap { grid-template-columns: 260px minmax(0, 1fr); }
  .legal-head { grid-column: 1 / -1; }
  .legal-toc { position: sticky; top: 96px; }
}
@media print {
  .legal-top, .legal-toc, .legal-foot { display: none !important; }
  .legal-body { background: #fff; color: #111; border: 0; box-shadow: none; }
}

/* =============================================================================
   Motion system (public/motion/*.js). Only transform and opacity move.
   Every hiding rule below hangs off a class that boot.js removes within 5s.
   ========================================================================== */
/* GSAP owns the element while it animates: its CSS transitions are switched off. */
.m-busy, .m-busy::before, .m-busy::after { transition: none !important; }

/* First-load intro: the shell is hidden until intro.js has set its start states. The sign-in
   form is only faded (not visibility:hidden), so it can take focus and typing from frame one. */
html.intro :is(.topbar, .steps, .steps-bar, .main, .footer, .gate-logo, .gate-brand, .legal-top, .legal-wrap) { opacity: 0; visibility: hidden; }
html.intro .gate-side { opacity: 0; }
/* Later loads and reduced motion: a 0.3s fade of the page (opacity only). */
html.m-fade #app, html.m-fade .legal-wrap { opacity: 0; }

/* Page wipe: a full-screen panel in the app background colour. */
.wipe-panel {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background: var(--bg); visibility: hidden; will-change: transform;
}
html.wipe-in::after { content: ""; position: fixed; inset: 0; z-index: 9990; background: var(--bg); }

/* Letter-roll splitter (titles only): one-line, overflow-hidden boxes holding two copies.
   --lr-lh is the heading's own line height; the extra .2em keeps descenders unclipped. */
.lr { display: inline; }
.lr-w { display: inline-block; white-space: nowrap; }
.lr-c { display: inline-block; vertical-align: top; overflow: hidden; height: calc(var(--lr-lh, 1.2em) + 0.2em); margin-bottom: -0.2em; }
.lr-s { display: block; will-change: transform; }
.lr-a, .lr-b { display: block; height: calc(var(--lr-lh, 1.2em) + 0.2em); line-height: var(--lr-lh, 1.2em); }

/* Nav hover: each label letter-rolls on hover and keyboard focus. Pure CSS. */
.nr { display: inline; }
.nr-w { display: inline-block; white-space: nowrap; }
.nr-c { display: inline-block; vertical-align: top; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.nr-a, .nr-b {
  display: block; height: 1.25em;
  transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--i, 0) * 15ms);
}
.nr-host:hover, .nr-host:focus-visible { text-decoration: none; }
.nr-host:hover :is(.nr-a, .nr-b), .nr-host:focus-visible :is(.nr-a, .nr-b) { transform: translateY(-100%); }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .nr-a, .nr-b { transition: none; }
  .nr-host:hover :is(.nr-a, .nr-b), .nr-host:focus-visible :is(.nr-a, .nr-b) { transform: none; }
}

/* Glow cursor (cursor.js adds html.glow-on on fine pointers only). The glow shows only where
   the cursor is "none": clickables get the pointer, readable text and inputs the text cursor. */
.glow-cursor {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 26, 0.3) 0%, rgba(255, 122, 26, 0) 72%);
  filter: blur(6px); visibility: hidden; opacity: 0; will-change: transform;
}
html.glow-on body { cursor: none; }
html.glow-on :is(a, button, [role="button"], select, summary, label, .day, .slot, input[type="checkbox"], input[type="radio"]) { cursor: pointer; }
html.glow-on :is(input:not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable], .doc, .nova-live, .line, .call-status, .legal-body, .legal-head, .lede, .notice, .kv, .success-card, .consent-card > p, .done-card, iframe) { cursor: text; }
html.glow-on :is(.doc, .legal-body) :is(a, button) { cursor: pointer; }
html.glow-on .call-body { cursor: default; }
html.glow-on .call-body :is(.nova-live, .line) { cursor: text; }

/* Success confirmation: a small check that scales in (chat.js). */
.toast-check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; border-radius: 50%;
  background: var(--green); color: #052e1f; font-size: 11px; font-weight: 700; line-height: 1;
}
/* The send button's hover sheen only when there is something to send. */
.chat-input:has(textarea:placeholder-shown) .btn-primary::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .glow-cursor { display: none; }
  html.glow-on body { cursor: auto; }
}
@media print, (forced-colors: active) {
  .wipe-panel, .glow-cursor, .orb-intro, html.wipe-in::after { display: none !important; }
}

/* =============================================================================
   The journey stage as a header pill, and the call as a phone-shaped panel.
   The call fills the height between header and footer, about a phone wide, and
   nothing inside it scrolls: the orb, the caption and the wave shrink with the
   window height instead.
   ========================================================================== */
.stage-pill {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--fs-xs); white-space: nowrap;
}
.stage-pill-count { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.stage-pill .steps-now { margin: 0; color: var(--text); font-weight: 600; }
.topbar { gap: 12px; }
@media (max-width: 720px) {
  .stage-pill-count { display: none; }
  .userchip-name { display: none; }
}

.intake-wrap.call-only { max-width: 440px; }
body.app-screen .main > .intake-wrap.call-only { margin-top: clamp(8px, 1.5dvh, 14px); }
body.app-screen .main > .intake-wrap.call-only > .call { height: 100%; padding: clamp(12px, 2dvh, 22px) clamp(14px, 3vw, 22px); }
.call-only .call-head { padding-bottom: 8px; margin-bottom: 4px; }
.call-only .call-body {
  overflow: hidden; justify-content: space-evenly;
  gap: clamp(4px, 1.2dvh, 12px); padding: 4px 0;
}
.call-only .nova-stepper { margin: 0; flex: 0 1 auto; min-height: 0; }
/* The globe's canvas overhangs its box by 14% on each side (the glow): that margin is reserved, so
   the caption never sits on top of it. */
.call-only { --orb: clamp(64px, 19dvh, 180px); }
/* The orb is sized from the room actually left in the call body (a size container), so a taller
   control area can never push it under the caption. */
.call-only .call-body { container-type: size; }
/* The orb takes what is left after the caption, the wave, the answer line and the status (about
   260px), never more than --orb, so the conversation always fits. */
.call-only .call-body { --orb-now: clamp(0px, calc((100cqh - 320px) / 1.3), var(--orb)); }
.call-only .orb { width: var(--orb-now); height: var(--orb-now); }
.call-only .nova-stepper { flex: none; margin: calc(var(--orb-now) * 0.15) 0; }
/* As the room runs out, the least important parts go first: the helper status line, then the
   waveform and the orb. Clisyp's line and the caller's words always stay. */
@container (max-height: 419px) {
  .call-only .call-status { display: none; }
  .call-only .call-body { --orb-now: clamp(0px, calc((100cqh - 240px) / 1.3), var(--orb)); }
}
@container (max-height: 329px) {
  .call-only .nova-stepper, .call-only .nova-wave { display: none; }
  .call-only .call-body .call-note { -webkit-line-clamp: 1; line-clamp: 1; max-height: calc(1.35em + 12px); }
  /* The caller's words shrink to one line, so an error with Retry always has room. */
  .call-only .line.you { padding: 4px 12px; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
  .call-only .nova-question { min-height: 0; }
}
body.app-screen[data-stage="intake"] .footer { display: none; }
.call-only .live-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.call-only .live-row .btn { flex: none; width: 100%; padding: 9px 12px; min-height: 42px; font-size: 0.9rem; }
@media (max-height: 700px) {
  .call-only { --orb: clamp(56px, 14dvh, 120px); }
  .call-only .line.you.empty { display: none; }
}
.call-only .nova-live-main { gap: clamp(4px, 1dvh, 10px); }
.call-only .nova-question { font-size: clamp(1rem, 0.85rem + 1.1dvh, 1.375rem); }
.call-only .nova-wave { height: clamp(20px, 4.5dvh, 44px); }
.call-only .line.you { padding: 8px 14px; font-size: 0.9rem; max-height: 4.6em; overflow: hidden; }
.call-only .call-status { margin-top: 0; }
.call-only .call-note {
  font-size: var(--fs-sm); line-height: 1.35; padding: 6px 12px; margin: 0; flex: none;
  /* A notice never takes more than two lines here (the full text is in its title attribute). */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  max-height: calc(2 * 1.35em + 12px);
}
.call-only .call-controls { flex: none; }
@media (max-width: 560px) {
  body.app-screen .main { padding-inline: 0; padding-bottom: 0; }
  .intake-wrap.call-only { max-width: none; }
  body.app-screen .main > .intake-wrap.call-only { margin-top: 0; }
  body.app-screen .main > .intake-wrap.call-only > .call { border-radius: 0; border-left: 0; border-right: 0; }
}
/* An error is never clipped: its Retry button must always be reachable. */
.call-only .call-body .call-note.err { display: flex; align-items: center; justify-content: space-between; gap: 10px; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; max-height: none; }

/* =============================================================================
   The Clisyp AI orb (motion/orb-intro.js): the first-load intro, and the small
   orb that stays beside "Clisyp AI" on the sign-in screen.
   ========================================================================== */
.orb-intro { position: fixed; inset: 0; z-index: 9999; background: #06080d; cursor: pointer; transition: background-color 0.6s ease-in; }
.orb-intro.orb-intro-reveal { background-color: rgba(6, 8, 13, 0); pointer-events: none; }
.orb-intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb-intro-text {
  position: absolute; left: 0; right: 0; text-align: center; opacity: 0; transform: translateY(8px);
  /* In at 1.6s, held about two seconds so it can be read, out at 3.5s before the orb flies. */
  animation: orbIntroTextIn 0.6s 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards, orbIntroTextOut 0.35s 3.5s ease-in forwards;
}
.orb-intro-name { font-family: 'Space Grotesk', var(--font), sans-serif; font-weight: 600; font-size: clamp(30px, 4.5vw, 48px); color: #f0954a; letter-spacing: 0.04em; }
.orb-intro-tag { font-family: 'Space Grotesk', var(--font), sans-serif; font-size: clamp(14px, 1.5vw, 18px); color: #aeb4c2; letter-spacing: 0.08em; margin-top: 6px; }
@keyframes orbIntroTextIn { to { opacity: 1; transform: none; } }
@keyframes orbIntroTextOut { from { opacity: 1; transform: none; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .orb-intro { display: none; } }

/* The small orb, left of "Clisyp AI". Hidden while the intro's orb is still flying to it. */
.gate-name { display: inline-flex; align-items: center; gap: 0.35em; }
.gate-orb { width: 1.9em; height: 1.9em; margin: -0.45em -0.15em -0.45em -0.45em; display: block; flex: none; }
html.orb-intro-on .gate-orb { opacity: 0; }

/* =============================================================================
   The conversation, calm and minimal: one clean sans (Inter) for everything
   in the call, Clisyp's line in medium weight, a short grey status in sentence
   case, quiet outlined controls, and orange only for Send.
   ========================================================================== */
.call-only .call { font-family: "Inter", var(--font); }
.call-only .call-head { border-bottom-color: rgba(255, 255, 255, 0.06); }
.call-only .call-head .who > div { display: flex; align-items: baseline; gap: 8px; }
.call-only .call-head .who b { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; display: inline; }
.call-only .call-head .who .small { display: inline; font-size: 0.8125rem; color: var(--text-3); }
.call-only .call-head .who .small::before { content: "·"; margin-right: 8px; color: var(--text-3); }

.call-only .nova-question {
  font-family: "Inter", var(--font); font-weight: 500;
  color: #eceef3; letter-spacing: -0.015em; line-height: 1.4;
}
.call-only .line.you {
  font-size: 0.9375rem; color: #c9ced8; line-height: 1.45;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; padding: 9px 16px;
}
.call-only .line.you.empty { background: none; border: 0; color: var(--text-3); font-size: 0.875rem; padding: 4px 0; }
/* The status reads as a quiet caption, not a shouted label. */
.call-only .call-status {
  font-family: "Inter", var(--font); font-size: 0.8125rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text-3);
}
.call-only .call-note { font-family: "Inter", var(--font); border-radius: 12px; }

/* Controls: quiet outlines; the state reads from the label and a soft fill when something is on. */
.call-only .call-controls .btn {
  font-family: "Inter", var(--font); font-weight: 500; letter-spacing: 0;
  border-radius: 12px; box-shadow: none;
}
.call-only .live-row .btn, .call-only .call-row .btn-ghost {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); color: #d7dbe3;
}
.call-only .live-row .btn:hover:not(:disabled), .call-only .call-row .btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none;
}
.call-only .live-row .btn-dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.call-only .live-row .btn-end { color: #f2a3a3; border-color: rgba(242, 110, 110, 0.35); }
.call-only .live-row .btn-end:hover:not(:disabled) { background: rgba(242, 110, 110, 0.08); border-color: rgba(242, 110, 110, 0.6); color: #ffc0c0; }
.call-only .chat-input textarea {
  font-family: "Inter", var(--font); font-size: 0.9375rem; border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.12);
}
/* A notice really clamps at two lines (one when tight): the shared .call-note rule sets
   display: flow-root, which turns line-clamp off, so this one has to be more specific. */
.call-only .call-body .call-note:not(.err) {
  display: -webkit-box; -webkit-box-orient: vertical; max-height: calc(2 * 1.35em + 14px);
  /* Clip at the text, not the padding, so the line after the ellipsis never peeks through. */
  overflow: clip; overflow-clip-margin: content-box;
}
@container (max-height: 329px) {
  .call-only .call-body .call-note:not(.err) { max-height: calc(1.35em + 14px); }
}

/* =============================================================================
   Orb-first call: Clisyp's line is spoken, not shown (it stays for screen
   readers), so the orb is the centrepiece and its colour says who is talking.
   ========================================================================== */
.call-only { --orb: clamp(120px, 36dvh, 300px); }
/* Without the caption and the waveform the orb only shares the body with the caller's words,
   the status and a notice (about 150px). */
.call-only .call-body { --orb-now: clamp(0px, calc((100cqh - 150px) / 1.3), var(--orb)); justify-content: center; }
@container (max-height: 419px) {
  .call-only .call-body { --orb-now: clamp(0px, calc((100cqh - 96px) / 1.3), var(--orb)); }
  .call-only .call-status { display: block; }
  .call-only .call-body { gap: 4px; }
}
@container (max-height: 329px) {
  .call-only .nova-stepper { display: block; }
}
@container (max-height: 180px) {
  .call-only .nova-stepper { display: none; }
}
/* The status is the orb's label: a little larger, and tinted like the orb. */
.call-only .call-status { font-size: 0.9375rem; font-weight: 500; color: var(--text-2); transition: color 0.25s ease; }
.call-only .call-status[data-state="speaking"] { color: #ff9a4d; }
.call-only .call-status[data-state="listening"] { color: #7fb0ff; }
.call-only .call-status[data-state="thinking"] { color: #c9a27a; }
.call-only .call-status[data-state="error"] { color: #e08a8a; }
/* The orb simply takes whatever height is left: its box grows to fill the body (flex), stays
   square, and never exceeds --orb. No height estimate, so a notice or the caller's words can
   come and go without anything overflowing or overlapping. Its glow overhangs the globe by 14%
   on each side, which the 76% inner size leaves room for. */
.call-only .call-body { justify-content: flex-start; }
.call-only .call-body .nova-stepper {
  display: flex; flex: 1 1 0; min-height: 0; margin: 0; width: 100%;
  align-items: center; justify-content: center;
}
.call-only .voice-orb-container { height: 100%; max-height: var(--orb); aspect-ratio: 1; align-items: center; }
.call-only .call-body .orb { width: 76%; height: 76%; }

/* Booking after the PDF: the download confirmation and the lead's own figure head the calendar. */
.booking-pdf-note { margin: 0 0 10px; font-size: 0.85rem; color: var(--text-2, #9fb3cf); }
.book-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 16px; padding: 12px 16px; border-radius: var(--r-md, 12px);
  border: 1px solid var(--line); background: rgba(247, 122, 10, 0.08);
}
.book-banner b { display: block; font-size: 0.95rem; color: var(--text); }
.book-banner span { font-size: 0.85rem; color: var(--text-2, #9fb3cf); }
@media (max-width: 520px) { .book-banner { flex-direction: column; align-items: flex-start; } }

/* In-app browser note on the gate (Facebook / Instagram / Messenger / LINE / TikTok). */
.iab-note { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-md, 12px);
  border: 1px solid rgba(247, 122, 10, 0.45); background: rgba(247, 122, 10, 0.08); font-size: 0.875rem; line-height: 1.45; }
.iab-note b { color: var(--text); }
.iab-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Clisyp's line, shown when the lead types or has muted her. */
.nova-question.typed-q { font-size: 0.98rem; line-height: 1.45; color: var(--text); margin: 0 0 8px; }
/* The blocked-microphone help is read in full, never clamped like the other notes. */
.call-only .call-body .call-note.mic-help { -webkit-line-clamp: unset; line-clamp: unset; max-height: none; overflow: visible; display: block; }
.linklike { background: none; border: 0; padding: 0; color: var(--cyan, #36b7c9); text-decoration: underline; cursor: pointer; font: inherit; }

/* Draft placeholders on the privacy policy: impossible to miss until they are filled in. */
.legal-body mark.todo { background: #ffd54a; color: #1a1300; padding: 0 4px; border-radius: 4px; font-weight: 600; }

/* Booking on phones: the calendar is what matters, so the copy above it shrinks to the heading and
   the scheduler gets most of the screen instead of scrolling inside a short frame. */
@media (max-width: 560px) {
  .booking-embed-card h2 { font-size: 1.15rem; margin-bottom: 6px; }
  .booking-embed-card .sub, .booking-embed-card > .small.muted { display: none; }
  .meetings-embed iframe { height: max(560px, calc(100dvh - 150px)); }
}

/* The optional marketing box sits under the required Terms box, quieter so it never reads as required. */
.optin-check { margin-top: 8px; font-size: 0.86rem; opacity: 0.9; }