/* ============================================================
   AfterCall — design system
   One stylesheet for the whole app. Both themes live here as
   token sets; everything below the token blocks is theme-agnostic.
   ============================================================ */

/* ---------- Tokens: dark (default) ---------- */
:root,
[data-theme="dark"] {
  --bg:             #000000;
  --bg-glow:        #121217;
  --surface:        #050506;
  --surface-hover:  #131315;
  --surface-raised: #09090a;
  /* with the fills this close to black, the borders are what carry the
     structure — so they're a shade stronger than a lighter theme would need */
  --border:         #202025;
  --border-strong:  #35353d;
  --border-glow:    #4e4e5b;
  /* Brighter across the board (Round: "the white looks a bit faint") —
     --text goes to true white, and --muted/--dim both come up a good
     step so body copy and small labels read as a strong white/grey
     rather than washed out, while keeping the same three-tier hierarchy
     (text > muted > dim) relative to each other. */
  --text:           #ffffff;
  --text-muted:     #a6a6b3;
  --text-dim:       #75757f;
  --invert-bg:      #ffffff;
  --invert-text:    #08080a;
  --grid-line:      rgba(255, 255, 255, 0.022);
  --shadow:         0 1px 2px rgba(0,0,0,.6), 0 12px 32px rgba(0,0,0,.45);
  --shadow-sm:      0 1px 2px rgba(0,0,0,.5);
  --shadow-lg:      0 24px 70px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
  --focus:          rgba(255,255,255,.55);
  --inner-hi:       rgba(255,255,255,.035);
  --aurora-a:       rgba(255,255,255,.055);
  --aurora-b:       rgba(255,255,255,.028);
  --scrim:          rgba(0,0,0,.62);
  --skeleton:       rgba(255,255,255,.05);
  --skeleton-hi:    rgba(255,255,255,.11);
  /* film grain: lighter grains over a dark page, so screen-blend it */
  /* grain shows more against true black, so less of it */
  --grain-opacity:  .10;
  --grain-blend:    screen;
  --hero-sheen:     #ffffff;
  --scan:           rgba(255,255,255,.055);
  --tick:           rgba(255,255,255,.22);
  /* one accent, used sparingly: the payoff word, the record button, the
     active nav rail. A splash of colour in an otherwise mono UI reads as
     a deliberate signal rather than decoration precisely because it's rare. */
  --accent:         #7c9eff;
  --accent-2:       #b98bff;
}

/* ---------- Tokens: light ---------- */
[data-theme="light"] {
  --bg:             #f6f6f7;
  --bg-glow:        #ededf0;
  --surface:        #ffffff;
  --surface-hover:  #f1f1f3;
  --surface-raised: #ffffff;
  --border:         #e4e4e8;
  --border-strong:  #cbcbd3;
  --border-glow:    #9c9ca6;
  --text:           #08080a;
  --text-muted:     #6a6a75;
  --text-dim:       #9b9ba5;
  --invert-bg:      #08080a;
  --invert-text:    #ffffff;
  --grid-line:      rgba(0, 0, 0, 0.028);
  --shadow:         0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.07);
  --shadow-sm:      0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:      0 24px 70px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  --focus:          rgba(0,0,0,.5);
  --inner-hi:       rgba(255,255,255,.9);
  --aurora-a:       rgba(0,0,0,.045);
  --aurora-b:       rgba(0,0,0,.022);
  --scrim:          rgba(20,20,24,.34);
  --skeleton:       rgba(0,0,0,.055);
  --skeleton-hi:    rgba(0,0,0,.11);
  /* on a near-white page the same grain has to darken instead, and far less
     of it, or it reads as a dirty screen rather than texture */
  --grain-opacity:  .085;
  --grain-blend:    multiply;
  --hero-sheen:     #9a9aa6;
  --scan:           rgba(0,0,0,.045);
  --tick:           rgba(0,0,0,.2);
  --accent:         #4f6df5;
  --accent-2:       #8b5cf6;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  transition: background-color .25s ease, color .25s ease;
}

/* Film grain — stops large flat areas reading as unpainted canvas.
   Generated inline as SVG turbulence, so there's no image to load. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Slow-drifting light bloom — gives the page a top-left light source
   rather than a flat fill, and never sits still enough to feel dead. */
body::after {
  content: '';
  position: fixed;
  top: -38vh;
  left: -10vw;
  width: 120vw;
  height: 110vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(46% 46% at 26% 42%, var(--aurora-a) 0%, transparent 62%),
    radial-gradient(40% 40% at 62% 30%, var(--aurora-b) 0%, transparent 66%);
  filter: blur(36px);
  animation: drift 40s ease-in-out infinite alternate;
}

@keyframes drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 5%, 0) scale(1.02); }
}

a { color: inherit; }

::selection {
  background: var(--invert-bg);
  color: var(--invert-text);
}

/* Scrollbars, restrained */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--border-glow); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

:focus-visible {
  outline: 1.5px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Auth pages — one card, nothing else competing
   ============================================================ */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 2rem 1.15rem 3rem;
  position: relative;
  z-index: 1;
  /* .auth-aura below deliberately bleeds past the card (160% of this
     container) for a soft, off-edge glow -- same recipe as .ws-aura
     inside .workspace-showcase. That container clips it with
     overflow:hidden; this one didn't, so on a real phone width the
     bleed became actual horizontal overflow and pushed/zoomed the whole
     page out instead of just glowing behind the card. Clip it the same
     way .workspace-showcase already does. */
  overflow: hidden;
}

/* Round 20: same soft violet bloom as the homepage's .ws-aura, sized down
   for a single card instead of a full section. Sits behind the card and
   the footnote below it — see the z-index bump on both further down. */
.auth-aura {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 160%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  filter: blur(34px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 26%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 12%, transparent) 46%,
    transparent 70%
  );
}

.auth-card,
.auth-foot {
  position: relative;
  z-index: 1;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 1.9rem 1.75rem 1.6rem;
  /* A quiet glow ring on top of .panel-tech's own border, so the card
     reads as lit by the aura behind it instead of sitting flat over it. */
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
    0 0 40px color-mix(in srgb, var(--accent) 16%, transparent);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}

/* The sidebar's .brand-mark is plain and shared across the whole app —
   this only recolors the one on the auth pages, the same agent-core
   gradient used everywhere else the app wants to feel "premium" (the
   homepage's workspace demo, the reply page's draft button). */
.auth-brand .brand-mark {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Carries its own bottom margin now that there's no sub-line beneath it —
   on these pages the heading ("Log in" / "Create account") is the entire
   instruction, and anything more read as marketing on a page people only
   want to get past. */
.auth-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.auth-sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

/* Round: the login/signup tagline reuses .promo-tagline (already the
   record/reply pages' "one line, one shine-word" style) instead of a new
   class -- this just pulls it up snug under .auth-title (which already
   carries its own 1.5rem bottom margin) and gives it room before the
   form starts. */
.auth-tagline {
  display: block;
  margin: -1rem 0 1.6rem;
  line-height: 1.4;
}

.auth-error {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: 9px;
  background: var(--surface-hover);
  padding: 0.7rem 0.85rem;
  font-size: 0.865rem;
  line-height: 1.45;
  margin-bottom: 1.2rem;
}

.auth-error svg {
  width: 15px; height: 15px; flex-shrink: 0;
  margin-top: 0.12rem;
  stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* Same shape as .auth-error, tinted with the app's one accent colour
   instead of neutral — "this went well" reuses the same violet the rest
   of the app already uses for good news (Premium, checkmarks), rather
   than introducing a separate green. */
.auth-success {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-strong));
  border-left-width: 3px;
  border-left-color: var(--accent-2);
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-hover));
  padding: 0.7rem 0.85rem;
  font-size: 0.865rem;
  line-height: 1.5;
  margin-bottom: 1.2rem;
  color: var(--text);
}

.auth-success svg {
  width: 15px; height: 15px; flex-shrink: 0;
  margin-top: 0.12rem;
  stroke: var(--accent-2); fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.auth-form { display: grid; gap: 0.95rem; }

.auth-field { display: grid; gap: 0.35rem; }

.auth-field > span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.auth-field input {
  font-family: inherit;
  font-size: 16px;                 /* 16px stops iOS zooming the page on focus */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.65rem 0.8rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-field input:focus {
  outline: none;
  border-color: var(--border-glow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-glow) 20%, transparent);
}

.auth-field small {
  font-size: 0.76rem;
  color: var(--text-dim);
}

/* Sits right under the password field rather than beside "Password" —
   thumb-friendly on mobile, and it doesn't crowd the label the way an
   inline link would. Negative margin pulls it up against the field
   above instead of reading as its own separate row. */
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: -0.45rem;
  font-size: 0.8rem;
}

.auth-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.auth-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth-row a {
  color: var(--text-muted);
  text-decoration: none;
}

.auth-row a:hover {
  color: var(--text);
  text-decoration: underline;
}

.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.3rem;
  padding: 0.7rem 1.05rem;
}

.auth-alt {
  font-size: 0.865rem;
  color: var(--text-muted);
  text-align: center;
  margin: 1.25rem 0 0;
}

.auth-foot {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
  max-width: 380px;
  margin: 0;
}

/* ============================================================
   Legal pages (Privacy / Terms) — standalone, no sidebar shell.
   Reuses the auth pages' aura + panel-tech recipe, just widened
   for readable prose instead of a narrow form card.
   ============================================================ */
.legal-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.4rem 1.15rem 3.5rem;
  position: relative;
  z-index: 1;
}

.legal-aura {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 160%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  filter: blur(38px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 10%, transparent) 46%,
    transparent 70%
  );
}

.legal-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.legal-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.legal-brand .brand-mark {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
}
.legal-brand .brand-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
}

.legal-card {
  width: 100%;
  padding: 2rem 2.1rem 2.3rem;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
    0 0 40px color-mix(in srgb, var(--accent) 12%, transparent);
}

.legal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 0.4rem;
}

.legal-updated {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 1.6rem;
}

.legal-body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-dim);
}
.legal-body h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.7rem 0 0.6rem;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 1rem; }
.legal-body ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.legal-body li { margin-bottom: 0.5rem; }
.legal-body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.legal-body strong { color: var(--text); }

.legal-foot {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.legal-foot a { color: var(--text-muted); text-decoration: none; }
.legal-foot a:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 640px) {
  .legal-card { padding: 1.6rem 1.3rem 1.8rem; }
  .legal-title { font-size: 1.4rem; }
}

/* ============================================================
   Signed-in account row in the sidebar footer
   ============================================================ */
.account-row-mini {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
}

.account-avatar {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--invert-bg);
  color: var(--invert-text);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
}

.account-email {
  flex: 1;
  min-width: 0;
  font-size: 0.775rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A Premium account's name gets a quiet violet tint here — the one place
   in the whole shell that's always visible, so it reads as a standing
   perk rather than something you have to go looking for. Never listed as
   a line item on the pricing page itself; it's just what being on
   Premium already looks like once you are. */
.account-email-pro {
  color: var(--accent-2);
  font-weight: 550;
}

/* ---------- Billing link, sidebar footer ---------- */
/* Deliberately louder than a normal nav item — this is the one upsell
   surface in the whole sidebar, so it carries its own glow in the app's
   real accent violet (same tokens as every other violet element) rather
   than blending in as just another link. */
.billing-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.6rem;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--text);
  font-size: 0.73rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.billing-link:hover,
.billing-link.active {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 32%, transparent);
}

.billing-link .nav-icon {
  width: 15px; height: 15px;
  flex-shrink: 0;
  stroke: var(--accent-2);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 50%, transparent));
}

/* Once an account is actually Premium, the link itself carries the
   agent-core gradient rather than the plain violet-tinted outline —
   quietly confirming "you already have this" every time it's seen. */
.billing-link-pro {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

.billing-link-pro:hover,
.billing-link-pro.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  filter: brightness(1.08);
}

.billing-link-pro .crown-icon-sm {
  stroke: #fff;
}

.crown-icon-sm {
  width: 15px; height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logout-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: color .14s ease, background-color .14s ease;
}

.logout-btn:hover { color: var(--text); background: var(--surface-hover); }

.logout-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Shell ---------- */
.shell {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  column-gap: 0.5rem;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* The sidebar is only 100vh tall, but its column must read as a continuous
   rail no matter how long the page is — so the surface is painted fixed. */
.shell::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 208px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Sidebar ---------- */
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.6rem 0.5rem;
  gap: 0.55rem;
  position: sticky;
  z-index: 1;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* soft light bloom behind the wordmark */
.sidebar::before {
  content: '';
  position: absolute;
  top: -90px;
  left: -40px;
  width: 260px;
  height: 220px;
  background: radial-gradient(circle, var(--bg-glow) 0%, transparent 70%);
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.55rem;
  position: relative;
}

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--invert-bg);
  color: var(--invert-text);
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.brand-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

.sidebar-section { display: grid; gap: 0.1rem; }

/* Dashboard-only: the Status filter row has 4 buttons where every other
   sidebar section has 2-4 full-width rows — stacking these as full rows
   too was the single biggest reason the sidebar needed to scroll on the
   dashboard specifically. A tight 2-column grid of smaller buttons keeps
   the same four filters clickable in about half the vertical space. */
.status-filter-grid {
  display: flex;
  gap: 0.25rem;
}

/* Icon + count only, no label — a hover title carries the full name.
   Four filters that used to be four full-width rows now sit in one
   compact strip, which is what actually closes the sidebar's scroll gap
   on the dashboard (the only page with this extra section). */
.status-filter {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.4rem 0.2rem;
}

.status-filter .nav-icon {
  width: 14px;
  height: 14px;
}

.status-filter .nav-count {
  margin-left: 0;
  font-size: 0.68rem;
}

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 0.6rem;
  margin-bottom: 0.3rem;
}

/* A section title that also carries the "New" flag — the eyebrow keeps its
   own look, the row just gives the flag a place to sit that never competes
   with a nav item's label for space. */
.eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.6rem;
  margin-bottom: 0.3rem;
}

.eyebrow-row .eyebrow {
  padding: 0;
  margin-bottom: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.36rem 0.6rem;
  border-radius: 8px;
  font-size: 0.83rem;
  font-weight: 450;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  font-family: inherit;
  width: 100%;
  /* .sidebar-section is a grid, and a grid item's default min-width is its
     content's un-shrunk size — without this, a long label (e.g. "Reply
     assistant agent") forces the whole row wider than the sidebar rather
     than letting .nav-label's own ellipsis do its job. */
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  position: relative;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

/* Sliding accent rail on the active row */
.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 99px;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height .22s cubic-bezier(.2,.8,.2,1);
}

.nav-item:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* The one spot in the sidebar that should never be ambiguous: which page
   you're on. The accent rail plus a slightly stronger border make it
   readable at a glance, not just a shade darker than its neighbours. */
.nav-item.active {
  background: var(--surface-hover);
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
  font-weight: 550;
}

.nav-item.active::before { height: 17px; }

.nav-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}

/* Only needed on a nav item that also carries a trailing badge (a count or
   the "New" tag) — lets the label give way (ellipsis) before it ever pushes
   that badge out of the sidebar, regardless of the row's font-weight. */
.nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.nav-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  color: var(--text-dim);
  font-weight: 500;
}

.nav-item.active .nav-count { color: var(--text-muted); }

/* Small "New" flag — sits in the eyebrow row next to a section title, not
   inside the nav item itself, so it never has to compete with a long label
   for horizontal space. */
.nav-tag-new {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  flex-shrink: 0;
}

.nav-badge {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--invert-bg);
  color: var(--invert-text);
  display: grid;
  place-items: center;
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 0.38rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.theme-toggle {
  display: flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
}

.theme-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.22rem 0.4rem;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}

.theme-opt:hover { color: var(--text-muted); }

.theme-opt.active {
  background: var(--surface-hover);
  color: var(--text);
}

.theme-opt svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.sidebar-note {
  font-size: 0.65rem;
  line-height: 1.45;
  color: var(--text-dim);
  opacity: .75;
  padding: 0 0.6rem;
}

.sidebar-footer-meta {
  display: grid;
  gap: 0.16rem;
}

.sidebar-legal-links {
  font-size: 0.65rem;
  color: var(--text-dim);
  opacity: .75;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  /* Match .sidebar-note's left inset directly above it — without this the
     "Powered by Claude" line and the Privacy/Terms line sit on two
     different left edges, which reads as misaligned/uneven. */
  padding: 0 0.6rem;
}
.sidebar-legal-links a { color: inherit; text-decoration: none; }
.sidebar-legal-links a:hover { text-decoration: underline; color: var(--text-muted); }
.sidebar-legal-links .legal-dot { opacity: .55; }

/* ============================================================
   Marketing page (logged-out "/") — a lightweight standalone layout,
   deliberately not the app shell (.shell/.sidebar/.main): a visitor here
   has no session yet, so there's no sidebar to show. Reuses the same
   content sections (via {% include %} partials) as the logged-in
   homepage, just with its own simple top nav instead of a sidebar.
   ============================================================ */
.marketing-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Turned genuinely translucent (was 92% opaque -- background,
   the real page content, so a near-black background against a near-black
   nav read as a flat, solid banner no matter how much blur sat behind
   it). Lower opacity + a touch of extra saturation/brightness is what
   actually reads as "glass" the way a frosted-panel SaaS nav does --
   content now visibly drifts and blurs underneath it on scroll instead
   of just disappearing behind a solid bar. */
.marketing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.1rem 2.3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-strong) 55%, transparent);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(18px) saturate(1.6) brightness(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.6) brightness(1.04);
  z-index: 20;
}

.marketing-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

/* Real in-page links only (#offer / #trust / #faq all exist on this same
   page) -- centred between brand and actions, flat text style like a
   modern SaaS nav rather than boxed buttons, so they read as navigation
   and not more CTAs competing with "Get started free". */
.marketing-nav-links {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  margin: 0 auto;
}
.marketing-nav-links a {
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.marketing-nav-links a:hover { color: var(--text); }

.marketing-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.marketing-main {
  max-width: min(94vw, 1680px);
  width: 100%;
  margin: 0 auto;
  padding: 2.3rem;
  display: grid;
  gap: 1.3rem;
  align-content: start;
  flex: 1;
}

/* A soft violet glow behind the hero, bleeding up under the sticky nav.
   Two jobs at once: makes the page read as more "AI product" premium on
   load (per Singh's ask to feel more futuristic/high-end), and gives the
   nav's glass/blur effect something with actual colour to show through --
   without this the nav's translucency was real but invisible against a
   flat near-black page. Scoped to the public landing page only, not the
   logged-in homepage's plainer hero. */
.landing-hero {
  position: relative;
}
.landing-hero::before {
  content: '';
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, 100vw);
  height: 460px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 20%, transparent) 0%, color-mix(in srgb, var(--accent-2) 10%, transparent) 45%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}

.landing-hero-cta-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

.landing-hero-note {
  margin-top: 0.7rem;
  font-size: 0.79rem;
  color: var(--text-dim);
}

.landing-example-section {
  margin: 0.6rem 0 0.4rem;
}

/* "Bigger and more advanced" per Singh's follow-up ask -- scoped to this
   one section (not the shared .example-grid rule) so the Listener/Closer
   showcases below, which reuse the same base classes, keep their own
   sizing untouched. The richer 7-field result already makes this taller
   than before; this bumps the type scale and spacing to match so it
   reads as deliberately larger, not just longer. */
.landing-example-lg .example-grid { gap: 2.5rem; }
.landing-example-lg .example-raw {
  padding: 1.6rem 1.75rem;
  font-size: 0.94rem;
  line-height: 1.95;
}
.landing-example-lg .example-out {
  padding: 0.8rem 1.75rem 1.6rem;
}
.landing-example-lg .example-title { font-size: 1.2rem; }
.landing-example-lg .example-out .field-row {
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 1.2rem;
  padding: 0.95rem 0;
  font-size: 0.95rem;
}
.landing-example-lg .example-out .field-label { font-size: 0.68rem; }

@media (max-width: 900px) {
  .landing-example-lg .example-out .field-row { grid-template-columns: 1fr; }
}


/* Small, credible "whole system" strip -- replaces the old interactive
   note-paste demo right under the hero. Deliberately plain: a single
   label line plus a row of small icon+name chips, not another big
   showcase (offer_section.html further down the page already does the
   full, detailed version of this same "five agents, one account"
   pitch). No Claude mention here, matching the site's positioning rule. */
.landing-system-strip {
  margin: 0.4rem 0 0.6rem;
  text-align: center;
}

.system-strip-label {
  margin: 0 0 1.1rem;
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--text-muted);
}

.system-strip-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.system-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}
.system-chip svg {
  width: 15px;
  height: 15px;
  stroke: var(--accent-2);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .system-strip-row { gap: 0.5rem; }
  .system-chip { padding: 0.5rem 0.85rem; font-size: 0.79rem; }
}


@media (max-width: 720px) {
  .marketing-nav { padding: 0.9rem 1.15rem; }
  .marketing-nav-links { display: none; }
  .marketing-main { padding: 1.15rem; }
  .landing-hero-cta-row { flex-wrap: wrap; }
}

/* Below this, "AfterCall" + both nav buttons no longer fit on one row at
   their normal size — .marketing-nav is a plain flex row with no wrap, so
   without this the actions block was the one thing on the whole page
   actually forcing horizontal overflow (found by bisecting each top-level
   section's contribution to document.body.scrollWidth on a 390px phone). */
@media (max-width: 480px) {
  .marketing-nav { padding: 0.8rem 0.9rem; gap: 0.5rem; }
  .marketing-nav-brand .brand-name { font-size: 0.9rem; }
  .marketing-nav-actions { gap: 0.4rem; }
  .marketing-nav-actions .btn {
    padding: 0.5rem 0.7rem;
    font-size: 0.76rem;
  }
}

/* ---------- Main ---------- */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 2rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 98.5%, transparent);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  z-index: 20;
}

.topbar-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.03rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.topbar-sub {
  font-size: 0.79rem;
  color: var(--text-dim);
  margin-top: 0.05rem;
}

.content {
  padding: 2.3rem;
  max-width: 940px;
  width: 100%;
  display: grid;
  gap: 1.3rem;
  align-content: start;
}

/* The capture page carries a proof rail and a worked example side by side,
   so it runs wider than the working pages — fluid so it actually fills a
   wide window instead of stranding a band of empty space beside it. */
.content-wide { max-width: min(94vw, 1680px); }

/* ---------- Panels ---------- */
.panel {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--inner-hi);
  transition: border-color .2s ease;
}

.panel:hover { border-color: var(--border-strong); }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}

.panel-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.count-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.06rem 0.42rem;
}

/* ---------- Form controls ---------- */
textarea {
  width: 100%;
  min-height: 400px;
  resize: vertical;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem;
  line-height: 1.8;
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  transition: border-color .16s ease, box-shadow .16s ease;
}

textarea::placeholder { color: var(--text-dim); }

textarea:focus {
  outline: none;
  border-color: var(--border-glow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-glow) 22%, transparent);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, opacity .15s ease, transform .1s ease;
}

button:active:not(:disabled) { transform: translateY(0.5px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 550;
  padding: 0.68rem 1.25rem;
  border-radius: 9px;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--invert-bg);
  color: var(--invert-text);
}
.btn-primary:hover:not(:disabled) { opacity: .87; }
.btn-primary:disabled { opacity: .42; cursor: default; }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.btn-ghost:disabled { opacity: .45; cursor: default; }

.btn-sm {
  font-size: 0.79rem;
  padding: 0.4rem 0.75rem;
  border-radius: 7px;
}

.btn-lg {
  font-size: 1rem;
  padding: 0.85rem 1.7rem;
  border-radius: 10px;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.mono-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* A plain-language walkthrough right on the composer itself — the hero
   tagline sets up the idea, this makes the three actual steps unmissable
   for someone landing here with zero context. */
.how-it-works {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  column-gap: 0.85rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.how-it-works .step {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.how-it-works .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-hover));
  color: var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.how-it-works svg {
  width: 12px;
  height: 12px;
  stroke: var(--text-dim);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---------- Capture: voice memo, handwritten photo, document ---------- */
.capture-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

/* Both capture buttons are an invitation rather than a utility, so they
   break from the ghost-button pattern used everywhere else: a filled pill,
   tinted with the accent, sized up so they're the first thing the eye lands
   on above the textarea. */
.capture-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.35rem;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface-hover));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-strong));
}

.capture-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface-hover));
  border-color: var(--accent);
  color: var(--text);
}

.capture-btn:disabled { opacity: .6; cursor: default; }

.capture-btn.recording,
.capture-btn.busy {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 26%, var(--surface-hover));
}

.capture-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* A pulsing icon reads as "working" without needing separate spinner
   markup — same trick as the record button's pulsing dot. */
.capture-btn.busy svg {
  animation: capture-pulse 1.15s ease-in-out infinite;
}

@keyframes capture-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

#record-btn .rec-dot { background: var(--accent); }

.rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

#record-btn.recording .rec-dot {
  opacity: 1;
  animation: rec-pulse 1.15s ease-in-out infinite;
}

@keyframes rec-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50%      { opacity: .45; box-shadow: 0 0 0 4px transparent; }
}

/* ---------- Camera modal: take a fresh photo, not pick one from disk ---------- */
.camera-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, black 72%, transparent);
  backdrop-filter: blur(6px);
}

.camera-modal-inner {
  width: 100%;
  max-width: 520px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.4));
}

.camera-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-viewport video,
.camera-viewport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  background: color-mix(in srgb, black 55%, transparent);
}

.camera-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.camera-controls .btn-primary {
  padding: 0.7rem 1.6rem;
}

.camera-fallback-link {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.9rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.81rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.camera-fallback-link:hover { color: var(--text-muted); }

/* ---------- Result fields ---------- */
.result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  padding-bottom: 0.95rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.result-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.type-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.field-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 1.2rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.55;
}

.field-row:last-of-type { border-bottom: none; }

.field-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-top: 0.22rem;
}

.field-value { min-width: 0; word-wrap: break-word; }
.field-value ul { margin: 0; padding-left: 1.05rem; display: grid; gap: 0.28rem; }
.field-value li::marker { color: var(--text-dim); }

.stage-pill {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: var(--invert-bg);
  color: var(--invert-text);
  font-weight: 600;
}

.text-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.85rem 0.95rem;
  font-size: 0.87rem;
  line-height: 1.62;
  white-space: pre-wrap;
}

.raw-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.8rem 0.9rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
  color: var(--text-muted);
}

.divider-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.9rem;
  margin-top: 0.6rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.action-status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-right: auto;
  word-break: break-all;
}

/* Destructive action sits apart from the safe ones, so it's never a mis-click */
.divider-actions .js-delete { margin-right: auto; }

/* ---------- Alerts ---------- */
.alert {
  display: none;
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: 9px;
  background: var(--surface);
  padding: 0.8rem 1rem;
  font-size: 0.87rem;
}

/* ---------- Follow-up rows ---------- */
.followup-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--border);
}
.followup-row:last-child { border-bottom: none; }

.followup-meta { min-width: 0; flex: 1; }
.followup-title { font-weight: 550; font-size: 0.9rem; }
.followup-sub { font-size: 0.79rem; color: var(--text-dim); margin-top: 0.08rem; }

.due-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Strict B&W hierarchy: solid = urgent, outlined = today, dim = later */
.due-overdue {
  background: var(--invert-bg);
  color: var(--invert-text);
  border-color: var(--invert-bg);
  font-weight: 600;
}

.due-today {
  color: var(--text);
  border-color: var(--border-glow);
}

/* ---------- Note history ---------- */
.note-item { border-bottom: 1px solid var(--border); }
.note-item:last-child { border-bottom: none; }

.note-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.82rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: 8px;
  transition: background-color .14s ease;
}
.note-item summary::-webkit-details-marker { display: none; }
.note-item summary:hover { background: var(--surface-hover); }

.disclosure {
  width: 13px; height: 13px; flex-shrink: 0;
  stroke: var(--text-dim); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.note-item[open] .disclosure { transform: rotate(90deg); }

.note-title { font-weight: 500; font-size: 0.9rem; flex: 1; min-width: 0; }

/* Fixed pill width so every title starts on the same column */
.note-item summary .type-pill,
.recent-row .type-pill {
  min-width: 138px;
  text-align: center;
}
.note-date {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.71rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.note-detail {
  padding: 0.3rem 0 1rem;
  animation: reveal .22s ease;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Recent strip (new-note page) ----------
   A div wrapping a link plus a delete button now, rather than one big
   <a> — a button can't nest inside a link, and this is the row that
   was missing any way to delete a note without going to /dashboard. */
.panel-head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.recent-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: 8px;
  border-bottom: 1px solid var(--border);
  transition: background-color .14s ease;
}
.recent-row:last-child { border-bottom: none; }
.recent-row:hover { background: var(--surface-hover); }

.recent-row-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Quiet until the row is actually being looked at — a Delete button
   sitting there permanently would be the loudest thing in the list. */
.recent-row-delete {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .14s ease;
}
.recent-row:hover .recent-row-delete,
.recent-row:focus-within .recent-row-delete,
.recent-row-delete.btn-danger-armed {
  opacity: 1;
}

.recent-row.removing {
  animation: row-out .28s ease forwards;
  overflow: hidden;
}

.recent-title {
  flex: 1;
  min-width: 0;
  font-size: 0.885rem;
  font-weight: 450;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Empty states ---------- */
.empty-state {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: 2.4rem 1rem;
  color: var(--text-dim);
}

.empty-state strong {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
}

.empty-state span { font-size: 0.81rem; }

.empty-mark {
  width: 34px; height: 34px;
  border: 1px dashed var(--border-strong);
  border-radius: 9px;
  display: grid; place-items: center;
  margin-bottom: 0.3rem;
}
.empty-mark svg {
  width: 15px; height: 15px;
  stroke: var(--text-dim); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.hidden { display: none !important; }

/* ============================================================
   Machine texture — instrument-panel cues, used sparingly.
   Corner registration ticks, a live status pulse, and a scan
   sweep while Claude is actually working. Behaviour, not decoration.
   ============================================================ */
.panel-tech { position: relative; display: flex; flex-direction: column; }

.panel-tech::before,
.panel-tech::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border-color: var(--tick);
  border-style: solid;
  border-width: 0;
}

.panel-tech::before {
  top: 9px;
  left: 9px;
  border-top-width: 1px;
  border-left-width: 1px;
  border-top-left-radius: 3px;
}

.panel-tech::after {
  bottom: 9px;
  right: 9px;
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-bottom-right-radius: 3px;
}

.live-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: live-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}

@keyframes live-ping {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* A band sweeps the skeleton while the model is reading — the one moment
   in the app where something is genuinely being processed. */
#skeleton { position: relative; overflow: hidden; }

#skeleton::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -140px;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--scan) 50%, transparent 100%);
  animation: scan-sweep 1.9s linear infinite;
}

@keyframes scan-sweep {
  to { top: 100%; }
}

/* Title resolving out of noise once the result lands */
.decoding {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: -0.01em;
}

/* ============================================================
   Hero — what this thing is, in five seconds
   ============================================================ */
/* Tighter underneath than it used to be: with the two promo banners gone
   the composer follows the hero directly, and the gap only has to read as
   deliberate rather than as a hole where something was removed. Top
   padding now lives on .content-home instead — see that rule below for
   why the hero itself carries almost none. */
.hero {
  padding: 0.15rem 0 0.7rem;
  max-width: 980px;
}

.hero h1 { text-wrap: balance; }
.hero p { max-width: 660px; }

/* Every other page keeps its header aligned with the sidebar wordmark for
   free, because a shared .topbar sits right at the top of .main with its
   own small padding. The homepage opts out of that topbar so the hero can
   run full-width — but .content's generic 2.3rem top padding then stacked
   with the hero's own, landing the "Runs on Claude" eyebrow ~60px below
   "AfterCall" instead of level with it, which read as a mistake rather
   than a choice the moment you landed on the page after logging in.
   This matches .content's padding to .topbar's instead, so the two
   headers line up like they do everywhere else in the app. */
/* Trimmed further so the "Runs on Claude" eyebrow's own vertical
   center lands on the same line as the AfterCall wordmark in the
   sidebar beside it — was still ~14px lower even after the first pass
   at this (see the .shell comment below for the matching horizontal fix). */
.content-home { padding-top: 0.3rem; }

/* Extra breathing room so the composer below reads as its own moment,
   not a continuation of the hero text. */
.content-wide { gap: 3rem; padding-bottom: 2.6rem; }

/* Tightened further on the homepage only: less breathing room here
   means the next section (the before/after compare) peeks up into
   view on load instead of the composer looking like a clean, complete
   stopping point that discourages scrolling further. */
.content-wide.content-home {
  gap: 1.5rem;
  padding-bottom: 1.1rem;
}

/* The Claude credential is the one piece of borrowed trust that's genuinely
   earned here, so it's a real badge rather than a whisper of grey text. */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.42rem 0.9rem 0.42rem 0.75rem;
  margin-bottom: 0.9rem;
  box-shadow: inset 0 1px 0 var(--inner-hi);
}

.hero-eyebrow svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
  stroke: none;
}

.hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.042em;
  margin: 0 0 0.8rem;
  /* A light band sweeps the letterforms once on load, then settles into a
     soft top-down gradient. One pass only — a looping shimmer reads as a
     cheap web template, a single sweep reads as polish. */
  background-image: linear-gradient(
    100deg,
    var(--text) 0%,
    var(--text) 40%,
    var(--hero-sheen) 50%,
    var(--text) 60%,
    var(--text-muted) 128%
  );
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-sweep 2.1s cubic-bezier(.22,.7,.2,1) .3s 1 both;
}

@keyframes hero-sweep {
  from { background-position: 130% 0; }
  to   { background-position: 0% 0; }
}

.hero h1 em,
.ws-head h2 em,
.record-copy h2 em,
.trust-head h2 em,
.faq-head h2 em,
.showcase-head h2 em,
.plan-name em {
  font-style: normal;
  /* the one word that carries colour on the whole page — everything else
     signals through weight, so this alone is enough to feel deliberate.
     A bright highlight drifts through the gradient on a loop and a soft
     colour glow sits behind the letters — the one overtly "AI product"
     flourish on an otherwise plain page. */
  background-image: linear-gradient(
    100deg,
    var(--accent) 0%,
    var(--accent-2) 35%,
    #ffffff 50%,
    var(--accent-2) 65%,
    var(--accent) 100%
  );
  background-size: 250% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 50%, transparent));
  box-shadow: inset 0 -0.09em 0 color-mix(in srgb, var(--accent) 45%, transparent);
  animation: em-shine 3.4s ease-in-out infinite;
}

@keyframes em-shine {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}


@media (prefers-reduced-motion: reduce) {
  .hero h1 em,
  .ws-head h2 em,
  .record-copy h2 em,
  .trust-head h2 em,
  .faq-head h2 em,
  .showcase-head h2 em,
  .plan-name em { animation: none; background-position: 30% 0; }
}

/* The whole pitch, in five words either side of an arrow — bold enough
   that someone skimming gets it without reading the sentence below it. */
.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.85rem;
}

.hero-tagline svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

/* ============================================================
   Worked example — showing beats claiming
   ============================================================ */
.example-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  background: none;
  border: none;
  padding: 0.3rem 0.15rem;
  box-shadow: inset 0 -0.07em 0 color-mix(in srgb, var(--accent) 40%, transparent);
}

.example-toggle:hover {
  box-shadow: inset 0 -0.07em 0 var(--accent);
}

.example-toggle svg {
  width: 13px;
  height: 13px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.example-toggle.open svg { transform: rotate(180deg); }

.example-grid {
  display: grid;
  /* the structured result is far taller than the scrap it came from, so the
     input gets less width and both sides centre against each other — stretching
     the short one to match just leaves a void */
  grid-template-columns: minmax(0, 0.82fr) auto minmax(0, 1.18fr);
  gap: 2.1rem;
  align-items: stretch;
}

/* Labels stay pinned to the top so the two sides read as a pair; only the
   scrap of input floats to the middle of the taller result beside it. */
.example-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.example-raw { margin-block: auto; }

.example-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}

.example-raw {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.35rem 1.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--text-dim);
  white-space: pre-wrap;
}

.example-out {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 1.5rem 1.3rem;
  background: var(--surface-raised);
}

.example-out .field-row {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.05rem;
  padding: 0.85rem 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.example-out .field-label { font-size: 0.64rem; letter-spacing: 0.11em; }
.example-out ul { padding-left: 1rem; gap: 0.2rem; }

.example-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.65rem 0 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.15rem;
}

.example-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
}

.example-arrow {
  align-self: center;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  flex-shrink: 0;
}

.example-arrow svg {
  width: 14px; height: 14px;
  stroke: var(--text-muted); fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   Landing page: the two dedicated agent showcases (Listener, Closer)
   brought back from the old homepage sections of the same name, now
   living on the public landing page instead. Reuses .example-grid /
   .example-col / .example-out / .field-row wholesale -- same visual
   language as the note demo directly above these two sections, just
   with a mic/waveform visual on one side (Listener) and a drafted
   reply on the other (Closer) instead of raw-note-to-fields.
   ============================================================ */
.landing-showcase-section {
  margin: 3.6rem 0;
}

.showcase-head {
  max-width: 640px;
  margin: 0 auto 2.4rem;
  text-align: center;
}
.showcase-eyebrow { margin-bottom: 1.1rem; }
.showcase-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.8rem;
  text-wrap: balance;
}
.showcase-sub {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--text-muted);
  text-wrap: pretty;
}

.listener-visual-col {
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.8rem 1.5rem;
}
.listener-visual-col .mono-meta { text-align: center; }

.example-out .text-block { margin-top: 0.9rem; }


/* ============================================================
   Scroll-reveal — generic fade-up applied to whatever marketing
   section carries [data-reveal], gated by IntersectionObserver in
   the interactive-polish script. Falls back to fully visible with no
   transition for reduced-motion and no-JS, so the page is never stuck
   showing a half-hidden section.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Landing page: interactive before/after demo
   The raw-note side plays back like a typed message (blinking caret
   during the type-out), the result side dims to "thinking" for a
   beat, then its fields drop in one at a time rather than all at
   once -- makes the same static example actually feel like it just
   ran, without needing a real Claude call for an anonymous visitor.
   ============================================================ */
.demo-try-row { margin: 1.1rem 0 0; }

.demo-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--accent);
  margin-left: 1px;
  opacity: 0;
}
.demo-caret.is-on {
  opacity: 1;
  animation: demo-caret-blink 0.9s step-end infinite;
}
@keyframes demo-caret-blink { 50% { opacity: 0; } }

.demo-run-btn {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.demo-run-btn svg { width: 14px; height: 14px; fill: currentColor; }

.example-out .example-fields {
  transition: opacity .2s ease, filter .2s ease;
}
.example-out.is-thinking .example-fields {
  opacity: 0.32;
  filter: blur(1.5px);
}

.example-fields .field-row { opacity: 0; }
.example-fields .field-row.is-in {
  animation: content-fade-up .45s ease forwards;
}

.demo-disclaimer {
  margin: 1rem 0 0;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-dim);
}

.demo-cta {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}
.demo-cta:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .demo-caret { display: none; }
  .example-out.is-thinking .example-fields { opacity: 1; filter: none; }
  .example-fields .field-row { opacity: 1; animation: none; }
}

/* ============================================================
   Proof points — the Fireflies contrast, without naming them
   ============================================================ */
/* ============================================================
   "Try one" — loads a real messy note, so a demo needs no typing
   ============================================================ */
.try-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}

.try-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-right: 0.15rem;
}

.try-chip {
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.34rem 0.8rem;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}

.try-chip:hover {
  color: var(--text);
  border-color: var(--border-glow);
  background: var(--surface-hover);
}

/* Reply page's "First time here" row now lives inline in the
   divider-actions bar, next to the Draft a reply button, instead of on
   its own full row below the form — that's what was making this panel
   run so much longer than it needed to. Text-only chips (no icons, same
   as the homepage's) and a smaller label/chip size keep the label and
   all three chips together on one line rather than the label wrapping
   onto its own row above them. */
#reply-try-row {
  margin: 0;
  padding: 0;
  border-top: none;
  flex-wrap: nowrap;
  gap: 0.4rem;
  min-width: 0;
}
#reply-try-row .try-label {
  flex-shrink: 0;
  white-space: nowrap;
}
#reply-try-row .try-chip {
  flex-shrink: 0;
  font-size: 0.74rem;
  padding: 0.3rem 0.6rem;
}

/* The try-row sits before .action-status inside .divider-actions, which
   still carries the auto-margin that groups both of them on the left
   with the Draft/Start-a-follow-up button pushed to the right — see
   .action-status below. On a narrow panel there isn't room for the try
   row and the button on the same line, so the whole row (label + chips,
   which stay together) wraps as one unit onto its own line instead of
   the label splitting away from its chips. */
@media (max-width: 720px) {
  #reply-try-row { flex-wrap: wrap; flex-basis: 100%; }
}

/* The reply form column isn't wide enough for the try-row and the Draft
   button to share a line, so .reply-actions-row wraps them onto two lines
   almost always (not just under 720px). .divider-actions' own 0.6rem gap
   reads fine as *horizontal* spacing between inline items, but is too
   tight once it's the *vertical* gap between the wrapped try-row and the
   button sitting right underneath it -- Singh's "too close" feedback.
   Bumping just row-gap (not column-gap, which stays tight and correct
   for the try-row's own label+chips) gives the button real breathing
   room above it without touching any other .divider-actions usage. */
.reply-actions-row {
  row-gap: 1rem;
}

/* Composer on the left, the case for AfterCall running down the right —
   the rail grows a little past its old fixed width so it still reads as
   a proportionate column now that the page runs wider. */
.capture-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 3.4rem;
  /* stretch, not start — the rail (agent + 3 reasons) used to top-align
     with the composer and then fall short of it at the bottom, leaving a
     dead gap under the rail that the composer kept filling on its own.
     See .proof-rail below for how the extra height gets used. */
  align-items: stretch;
}

/* ---------- Homepage composer: full-width stack ----------
   Used to be a two-column grid: composer on the left, the agent teaser +
   three proof points stacked in a narrow rail on the right. That capped
   the notes textarea at roughly a third of the page width no matter how
   wide the window was, and buried the rail in a side column most people's
   eyes skipped straight past. It's a single full-width column now — the
   composer runs the same width as the workspace showcase and everything
   else below it — with the agent teaser and the three proof points moved
   into one row underneath as their own cards, read left to right the way
   every other section on this page is read, instead of scanned top to
   bottom in a sidebar. record.html still uses .capture-grid/.proof-rail
   as its own two-column layout, untouched by any of this. */
.capture-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.capture-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* The agent teaser is a fundamentally different kind of object than the
   three proof points below it — a live interactive demo, not a one-line
   reason — so it gets its own full-width banner instead of being squeezed
   into a quarter-width box next to three plainer cards (that read as
   uneven, one mismatched box among a matched set). Its existing glow/
   gradient border already reads as "the one boxed thing that matters";
   here it just goes horizontal — eyebrow, message, arrow, reply and the
   link all in a single row — instead of stacked vertically. */
.capture-features .rail-agent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  padding: 1.05rem 1.4rem;
}
.capture-features .rail-agent-eyebrow { margin-bottom: 0; flex-shrink: 0; }
.capture-features .rail-agent-msg,
.capture-features .rail-agent-reply {
  flex: 1;
  min-width: 0;
  min-height: unset;
}
.capture-features .rail-agent-arrow { flex-shrink: 0; }
/* This link used to trail the message/reply bubbles on their same line,
   which left its down-arrow sitting off at the box's right edge — fine
   when the box was a narrow rail, but once it went full-width above an
   even three-column row (see .capture-proof-row below) that arrow no
   longer pointed at anything. Giving it a full-width line of its own and
   centering it puts the arrow above the middle of that row instead, so
   "see what's next" actually reads as pointing at the reasons below. */
.capture-features .rail-agent-link {
  flex: 1 0 100%;
  justify-content: center;
  margin-top: 0.85rem;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--border);
  border-left: none;
  white-space: nowrap;
}

/* The three proof points keep the matched-card treatment that used to
   apply to all four boxes — now it's an even row of exactly three. */
.capture-proof-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.capture-proof-row .proof-item {
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--inner-hi);
  padding: 1.3rem 1.25rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.capture-proof-row .proof-item:last-child { border: 1px solid var(--border-strong); padding: 1.3rem 1.25rem; }
.capture-proof-row .proof-item:hover { border-color: color-mix(in srgb, var(--accent) 32%, var(--border-strong)); transform: translateY(-2px); }

@media (max-width: 1180px) {
  .capture-proof-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .capture-features .rail-agent-msg,
  .capture-features .rail-agent-reply { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .capture-proof-row { grid-template-columns: 1fr; }
}

/* The composer is the page's one job, so this page's panels drop the boxed
   card treatment entirely — a shade of background does the separating that
   a border used to, and the eye has one fewer outline competing for it. */
.content-wide .panel {
  border: none;
  background: var(--surface);
  box-shadow: none;
  padding: 2.4rem;
}

/* Homepage composer only: a little less vertical padding, same
   reasoning as .content-wide.content-home above. */
.content-wide.content-home .panel {
  padding: 1.4rem 2.4rem 1.6rem;
}

/* Homepage composer only: the whole box (title through the try-row) needs
   to fit on screen the moment someone logs in, with no scrolling required
   to see it's actually usable. The 400px default above was the single
   biggest reason it didn't -- still resize:vertical, so anyone who wants
   more writing room can just drag it taller themselves. Bumped from 195px
   after Singh's feedback that the box read as too short/rectangular --
   260px gives real writing room without pushing the composer back below
   the fold the way the full 400px default did. */
.content-home #notes {
  min-height: 260px;
}

/* Flex column filling the composer's full height (via align-items:stretch
   on .capture-grid above) with the gaps between the agent card and the
   three reasons doing the work of reaching the bottom — rather than each
   row staying its own fixed size and leaving empty space underneath the
   last one, the way a plain top-aligned stack did. */
.proof-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
  height: 100%;
  padding-top: 0.5rem;
}

/* Lightweight benefit rows rather than three boxed cards — they read as
   supporting reasons alongside the composer, not a second thing to look at.
   Spacing between rows now comes from the flex column's own distribution,
   not a fixed margin, so it can grow or shrink to reach the bottom. */
.proof-item {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  transition: none;
}

.proof-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.proof-item:hover { border-color: var(--border); transform: none; }

.proof-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-hover));
  display: grid;
  place-items: center;
  margin-bottom: 0.9rem;
}

.proof-icon svg {
  width: 14px; height: 14px;
  stroke: var(--accent); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.proof-title {
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
}

.proof-body {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-dim);
}

.trust-line {
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--text-dim);
  text-align: center;
  padding: 0.2rem 0 0.4rem;
  max-width: 620px;
  margin: 0 auto;
}

/* ============================================================
   Site footer — Product/Resources/Legal/Connect, in the app's own
   dark/violet scheme rather than a generic light marketing block.
   Boxed like every other homepage section (faq-section, ai-stack-section)
   so it reads as one more piece of this page, not a bolted-on template.
   ============================================================ */
.site-footer {
  margin-top: 0.6rem;
  padding: 2.2rem 2.4rem 1.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface-raised);
}

.site-footer-top {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--border);
}

.site-footer-brand {
  max-width: 260px;
  flex-shrink: 0;
}

.site-footer-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.site-footer-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.site-footer-tag {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-dim);
}

.site-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  flex: 1;
  max-width: 640px;
}

.site-footer-col {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.site-footer-heading {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.15rem;
}

.site-footer-col a {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .14s ease;
}

.site-footer-col a:hover {
  color: var(--text);
}

.site-footer-social {
  display: flex;
  gap: 0.55rem;
}

.site-footer-social-link {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--surface-hover);
  color: var(--text-muted);
  transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}

.site-footer-social-link:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-hover));
}

.site-footer-social-link svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.site-footer-social-link svg.icon-stroke {
  fill: none;
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Deliberately quiet — one small line among many, not its own paragraph.
   The real "Powered by Claude" selling point lives in the AI-stack
   section above; this is just the credit line, kept present but minor. */
.site-footer-powered {
  opacity: 0.75;
}

@media (max-width: 860px) {
  .site-footer { padding: 1.8rem 1.4rem 1.2rem; }
  .site-footer-top { flex-direction: column; gap: 1.8rem; }
  .site-footer-brand { max-width: none; }
  .site-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}

@media (max-width: 520px) {
  .site-footer-cols { grid-template-columns: 1fr; gap: 1.4rem; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  /* The bottom row wraps to two lines at this width, which is just enough
     extra height to tuck the last line under the fixed phone tab bar —
     .content's normal 5.5rem clearance (sized for one line) isn't quite
     enough once this section stacks. */
  .site-footer { margin-bottom: 2rem; }
}

/* ============================================================
   Sidebar search
   ============================================================ */
.side-search {
  position: relative;
  padding: 0 0.15rem;
}

.side-search svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 13px; height: 13px;
  stroke: var(--text-dim); fill: none;
  stroke-width: 1.9; stroke-linecap: round;
  pointer-events: none;
}

.side-search input {
  width: 100%;
  font-family: inherit;
  font-size: 0.83rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.33rem 2.1rem 0.33rem 2rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.side-search input::placeholder { color: var(--text-dim); }

.side-search input:focus {
  outline: none;
  border-color: var(--border-glow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-glow) 20%, transparent);
}

.side-search .kbd {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.kbd {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.63rem;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.1rem 0.32rem;
  line-height: 1.45;
}

/* ============================================================
   Command palette (⌘K)
   ============================================================ */
.cmdk-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1.25rem 1.25rem;
  animation: fade-in .16s ease;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.cmdk {
  width: 100%;
  max-width: 580px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--inner-hi);
  overflow: hidden;
  animation: cmdk-in .2s cubic-bezier(.2,.9,.25,1);
}

@keyframes cmdk-in {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.cmdk-field {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.cmdk-field svg {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: var(--text-dim); fill: none;
  stroke-width: 1.8; stroke-linecap: round;
}

.cmdk-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

.cmdk-field input::placeholder { color: var(--text-dim); }

.cmdk-list {
  max-height: 46vh;
  overflow-y: auto;
  padding: 0.4rem;
}

.cmdk-group {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.6rem 0.7rem 0.35rem;
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.885rem;
  color: var(--text-muted);
  scroll-margin: 0.5rem;
}

.cmdk-item .ci-icon {
  width: 14px; height: 14px; flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: .8;
}

.cmdk-item .ci-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmdk-item .ci-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.cmdk-item.selected {
  background: var(--surface-hover);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.cmdk-item.selected .ci-sub { color: var(--text-muted); }

.cmdk-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.86rem;
}

.cmdk-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}

.cmdk-foot span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ============================================================
   Toasts
   ============================================================ */
.toast-stack {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 300;
  display: grid;
  gap: 0.55rem;
  justify-items: end;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 380px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 0.68rem 0.9rem;
  font-size: 0.855rem;
  color: var(--text);
  pointer-events: auto;
  animation: toast-in .26s cubic-bezier(.2,.9,.25,1);
}

.toast.leaving { animation: toast-out .2s ease forwards; }

.toast svg {
  width: 14px; height: 14px; flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.toast-msg { min-width: 0; word-break: break-word; }

/* A 'premium' toast — the free-plan-limit nudge — gets the same violet
   glow language as the billing page's Premium card and the sidebar's
   crown link, so "you're at a limit" reads as an on-brand upsell rather
   than a generic warning. */
.toast-premium {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  box-shadow: var(--shadow), 0 0 22px color-mix(in srgb, var(--accent) 20%, transparent);
}
.toast-premium svg {
  color: var(--accent);
}
.toast-upgrade-link {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}
.toast-upgrade-link:hover {
  filter: brightness(1.08);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px) scale(.98); }
}

/* ============================================================
   Stat strip + activity sparkline
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.stat-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 0.9rem 1rem;
  box-shadow: inset 0 1px 0 var(--inner-hi);
  transition: border-color .18s ease, transform .18s ease;
}

.stat-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.stat-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 0.3rem;
}

/* ---------- Admin analytics dashboard ---------- */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  align-items: start;
}
@media (max-width: 900px) {
  .two-col-grid { grid-template-columns: 1fr; }
}

.analytics-rows { display: flex; flex-direction: column; }

.analytics-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.analytics-row:last-child { border-bottom: none; }

.analytics-row-path {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-row-count {
  flex-shrink: 0;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
}

.spark-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
}

.spark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 48px;
  flex: 1;
  min-width: 0;
  max-width: 330px;
}

.spark-bar {
  flex: 1;
  min-width: 3px;
  max-width: 16px;
  min-height: 4px;
  border-radius: 3px;
  background: var(--border-strong);
  transition: background-color .18s ease;
  animation: bar-rise .5s cubic-bezier(.2,.9,.25,1) backwards;
}

.spark-bar[data-empty="1"] { background: var(--border); }
.spark-bar:hover { background: var(--text); }
.spark-bar.today { background: var(--text); }

@keyframes bar-rise {
  from { height: 2px !important; opacity: .4; }
}

/* ============================================================
   Loading skeleton
   ============================================================ */
.sk-line {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    var(--skeleton) 0%,
    var(--skeleton-hi) 50%,
    var(--skeleton) 100%
  );
  background-size: 220% 100%;
  animation: shimmer 1.35s linear infinite;
}

@keyframes shimmer {
  from { background-position: 140% 0; }
  to   { background-position: -60% 0; }
}

.sk-stack { display: grid; gap: 0.75rem; }
.sk-row { display: grid; grid-template-columns: 116px 1fr; gap: 1rem; align-items: center; }

.thinking {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.1rem;
}

.thinking-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: rec-pulse 1.1s ease-in-out infinite;
}

/* ============================================================
   Staggered reveal for freshly cleaned results
   ============================================================ */
.reveal > * {
  animation: reveal-up .34s cubic-bezier(.2,.9,.25,1) backwards;
}
.reveal > *:nth-child(1)  { animation-delay: .02s; }
.reveal > *:nth-child(2)  { animation-delay: .05s; }
.reveal > *:nth-child(3)  { animation-delay: .08s; }
.reveal > *:nth-child(4)  { animation-delay: .11s; }
.reveal > *:nth-child(5)  { animation-delay: .14s; }
.reveal > *:nth-child(6)  { animation-delay: .17s; }
.reveal > *:nth-child(7)  { animation-delay: .20s; }
.reveal > *:nth-child(8)  { animation-delay: .23s; }
.reveal > *:nth-child(9)  { animation-delay: .26s; }
.reveal > *:nth-child(10) { animation-delay: .29s; }
.reveal > *:nth-child(n+11) { animation-delay: .32s; }

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Destructive action — signalled by type, not colour
   ============================================================ */
.btn-danger-armed {
  background: var(--invert-bg);
  color: var(--invert-text);
  border-color: var(--invert-bg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.note-item.removing {
  animation: row-out .28s ease forwards;
  overflow: hidden;
}

@keyframes row-out {
  to { opacity: 0; transform: translateX(-10px); max-height: 0; padding: 0; margin: 0; }
}

/* ============================================================
   Textarea fill meter
   ============================================================ */
.meter {
  height: 2px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
  margin-top: 0.7rem;
}

.meter-fill {
  height: 100%;
  width: 0;
  background: var(--text-muted);
  border-radius: 99px;
  transition: width .2s ease, background-color .2s ease;
}

.meter-fill.hot { background: var(--text); }
.meter-fill.over-limit { background: var(--accent); }

/* Free-plan character cap nudge — sits right under the meter row so it's
   impossible to miss without needing to hit "Clean my notes" first. */
.char-limit-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding: 0.55rem 0.8rem;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: 0.8rem;
  color: var(--text-muted);
}
.char-limit-notice svg {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: var(--accent); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.char-limit-notice a {
  margin-left: auto;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}
.char-limit-notice a:hover { filter: brightness(1.08); }

.no-results {
  padding: 1.6rem 0.5rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.86rem;
}

/* ============================================================
   Contacts list
   ============================================================ */
.account-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.7rem;
  margin: 0 -0.7rem;
  border-radius: 10px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background-color .14s ease;
}

.account-row:last-of-type { border-bottom: none; }
.account-row:hover { background: var(--surface-hover); }
.account-row:hover .acc-chevron { transform: translateX(2px); opacity: .9; }

.acc-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--invert-bg);
  color: var(--invert-text);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: var(--shadow-sm);
}

.acc-avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  font-size: 1.35rem;
}

.acc-main { flex: 1; min-width: 0; }

.acc-name {
  font-weight: 550;
  font-size: 0.94rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-sub {
  font-size: 0.79rem;
  color: var(--text-dim);
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-stage { flex-shrink: 0; }

/* Inline link from a note through to its account */
.acc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: border-color .14s ease;
}

.acc-link svg {
  width: 11px; height: 11px;
  stroke: var(--text-dim); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .14s ease;
}

.acc-link:hover { border-color: var(--text); }
.acc-link:hover svg { stroke: var(--text); }

.acc-chevron {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: var(--text-dim); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .55;
  transition: transform .16s ease, opacity .16s ease;
}

/* ============================================================
   Pipeline board (CRM deal stages)
   ============================================================ */
.pipeline-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 0.85rem;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 0.4rem;
}

.pipeline-col {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.85rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--inner-hi);
  min-width: 0;
}

.pipeline-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.15rem 0.2rem 0.8rem;
}

.pipeline-col-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.pipeline-col-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 60px;
  border-radius: 10px;
  transition: background-color .12s ease, box-shadow .12s ease;
}

.pipeline-col-body.drag-over {
  background: var(--surface-hover);
  box-shadow: inset 0 0 0 1.5px var(--border-glow);
}

.pipeline-col-empty {
  display: none;
  padding: 1rem 0.4rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.pipeline-col-empty.show { display: block; }

.pipeline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 0.75rem 0.8rem;
  cursor: grab;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.pipeline-card:hover { border-color: var(--border-strong); }
.pipeline-card.dragging { opacity: .45; transform: scale(.98); cursor: grabbing; }

.pipeline-card.removing {
  animation: row-out .22s ease forwards;
  overflow: hidden;
}

.pipeline-card-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pipeline-card .acc-avatar { width: 28px; height: 28px; font-size: 0.78rem; border-radius: 7px; }

/* Small icon-only button — same recipe as .modal-close, reused here for the
   pipeline card's delete action, and armed the same way .btn-danger-armed
   signals a destructive confirm elsewhere (dashboard note deletion). */
.card-icon-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  cursor: pointer;
}
.card-icon-btn:hover { color: var(--text); background: var(--surface-hover); }
.card-icon-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.card-icon-btn.btn-danger-armed {
  color: var(--invert-text);
  background: var(--invert-bg);
}

.pipeline-card-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 550;
  font-size: 0.88rem;
  color: inherit;
  text-decoration: none;
}
.pipeline-card-name:hover { text-decoration: underline; }

.pipeline-card-sub {
  font-size: 0.76rem;
  color: var(--text-dim);
  margin-top: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.pipeline-stage-select {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.3rem 0.4rem;
  max-width: 100%;
}
.pipeline-stage-select:hover { border-color: var(--border-strong); color: var(--text); }
.pipeline-stage-select:focus { outline: none; border-color: var(--border-glow); }

/* ---------- Lead-capture modal ---------- */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, black 72%, transparent);
  backdrop-filter: blur(6px);
}

.lead-modal-inner {
  width: 100%;
  max-width: 440px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 1.35rem;
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.4));
}

.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, black 72%, transparent);
  backdrop-filter: blur(6px);
}

.consent-modal-inner {
  width: 100%;
  max-width: 460px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 1.35rem;
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.4));
}

.consent-copy {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 1rem;
}

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
  margin-bottom: 1.1rem;
}
.consent-check input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  accent-color: var(--accent-2);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.modal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
}
.modal-close:hover { color: var(--text); background: var(--surface-hover); }
.modal-close svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round;
}

.modal-body { display: grid; gap: 0.85rem; }

.form-field { display: grid; gap: 0.35rem; }

.form-field > span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 16px;                 /* 16px stops iOS zooming the page on focus */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.65rem 0.8rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--border-glow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-glow) 20%, transparent);
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.2rem;
}

@media (max-width: 820px) {
  .pipeline-board {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
}

/* ============================================================
   Reply assistant
   ============================================================ */
#kb-panel { margin-bottom: 1rem; }

.kb-hint,
.panel-hint {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0.9rem 0 0.8rem;
}

#kb-textarea { min-height: 260px; }

.pipeline-hint { margin-top: 0; margin-bottom: 1rem; }

#new-lead-fields { margin: 0.9rem 0; }
#new-lead-fields .panel-hint { margin-top: 0; }

.reply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* ---------- Reply vs. follow-up segmented toggle ---------- */
.mode-toggle {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
.mode-toggle button {
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 550;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: color .14s ease, background-color .14s ease;
}
.mode-toggle button:hover { color: var(--text); }
.mode-toggle button.active {
  color: var(--invert-text);
  background: var(--invert-bg);
}

/* ---------- Reply assistant's own "how it works" — its own separate
   panel stacked directly under "Suggested reply" in the same column, not
   tucked inside that box, and doubling as the answer to "what does saving
   actually do" (Pipeline logging). ---------- */
.reply-result-col {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  min-width: 0;
}

.reply-howto-panel .how-it-works {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.reply-grid textarea {
  min-height: 340px;
}

.reply-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.85rem;
  margin: 0.9rem 0;
}

.reply-grid #reply-text { min-height: 220px; }

@media (max-width: 980px) {
  .reply-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .reply-controls { grid-template-columns: 1fr; }
}

/* ============================================================
   Reply assistant, premium pass — this was the plainest working page
   next to how much atmosphere the homepage got. Same tokens as
   everywhere else (the agent gradient, the accent glow), just brought
   here: a dim ambient bloom behind the whole page, icons on the panel
   titles and toggle instead of bare text, and a "ready" glow on the
   result panel once there's actually a reply sitting in it.
   ============================================================ */
.reply-page {
  position: relative;
  isolation: isolate;
}

.reply-page::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 640px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  filter: blur(64px);
  background: radial-gradient(
    ellipse 60% 100% at 50% 0%,
    color-mix(in srgb, var(--accent) 11%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 6%, transparent) 45%,
    transparent 75%
  );
}

.kb-toggle-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: var(--accent-2);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel-title-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.panel-title-icon.icon-stroke {
  stroke: var(--text-dim);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.panel-title-icon.icon-fill { fill: var(--accent-2); stroke: none; }

/* The segmented toggle picks up a faint accent border too, so it doesn't
   read as the same neutral grey pill every other toggle in the app uses
   — small, but this is the control that decides which job the agent runs. */
.reply-page .mode-toggle {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

/* Once a reply actually lands, the panel around it gets the same glow
   treatment record_detail.html's priority panel uses — stronger here
   since this is the one payoff moment on the page. */
.reply-result-col #reply-result-panel.panel-priority {
  box-shadow:
    var(--shadow-sm), inset 0 1px 0 var(--inner-hi),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 32px color-mix(in srgb, var(--accent) 15%, transparent);
}

.try-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.try-chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.try-chip:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
  .try-chip:active { transform: none; }
}

/* ============================================================
   Account header
   ============================================================ */
.account-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.account-header-main { min-width: 0; }

.account-header-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.account-tags {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
}

/* ============================================================
   Relationship timeline
   ============================================================ */
.timeline {
  position: relative;
  padding-left: 1.35rem;
}

/* the spine */
.timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}

.tl-entry {
  position: relative;
  padding: 0 0 1.5rem 0;
}

.tl-entry:last-child { padding-bottom: 0; }

.tl-marker {
  position: absolute;
  left: -1.35rem;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1.5px solid var(--border-strong);
  box-sizing: border-box;
}

/* an open follow-up gets a filled marker — you can scan the spine for them */
.tl-marker.tl-open {
  background: var(--text);
  border-color: var(--text);
}

.tl-body { min-width: 0; }

.tl-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.tl-title {
  font-weight: 550;
  font-size: 0.92rem;
  flex: 1;
  min-width: 0;
}

.tl-summary {
  font-size: 0.885rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.tl-followup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
}

.tl-more { margin-top: 0.6rem; }

.tl-more summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.25rem 0;
  transition: color .14s ease;
}

.tl-more summary::-webkit-details-marker { display: none; }
.tl-more summary:hover { color: var(--text-muted); }
.tl-more[open] summary .disclosure { transform: rotate(90deg); }
.tl-more .disclosure { width: 11px; height: 11px; }

/* ============================================================
   Bottom tab bar — phone only
   ============================================================ */
.tabbar { display: none; }

/* Phone-only menu button and its wrapper around .brand — display: contents
   on desktop means the wrapper has zero layout effect there, so .brand
   sits exactly where it always did; the mobile media query below turns it
   into an actual row. */
.mobile-menu-btn { display: none; }
.sidebar-topline { display: contents; }

@media (max-width: 820px) {
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: grid;
    /* minmax(0,…) not 1fr — 1fr floors at the label's width and widens the page */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    /* clear the home indicator on modern phones */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    padding: 0.6rem 0.3rem 0.65rem;
    text-decoration: none;
    color: var(--text-dim);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  .tab svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tab.active { color: var(--text); }

  .tab span:not(.tab-badge),
  .tab { min-width: 0; }

  .tab-badge {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--invert-bg);
    color: var(--invert-text);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 600;
    display: grid;
    place-items: center;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  /* minmax(0,…) plus min-width:0 below is what actually lets these shrink —
     grid and flex children default to min-width:auto, so they refuse to go
     narrower than their content and quietly widen the whole page instead. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell::before { display: none; }

  /* Collapsed to a single row (the brand plus the menu button, via
     .sidebar-topline) until tapped open. Everything that used to live
     here permanently — search, Business workspace, Note types, billing,
     the account row — showed up ahead of the composer and the hero on
     every visit, which is what made the page feel like it opened on
     "the dashboard" instead of on AfterCall itself. New note / Record /
     Dashboard / Contacts stay out of this menu entirely — they're
     already the bottom tab bar. */
  .sidebar {
    min-width: 0;
    position: sticky;
    top: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.3rem;
    height: auto;
    max-height: 100dvh;
    overflow-y: auto;
    padding: 0.8rem 1.1rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .sidebar.is-open {
    position: fixed;
    inset: 0;
    height: 100dvh;
    max-height: none;
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));
    background: var(--surface);
  }

  .sidebar-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .brand { padding: 0; }
  .brand-mark { width: 23px; height: 23px; border-radius: 6px; font-size: .78rem; }
  .brand-name { font-size: 0.95rem; }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface-hover);
    color: var(--text);
    cursor: pointer;
  }
  .mobile-menu-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-menu-btn .icon-close { display: none; }
  .sidebar.is-open .mobile-menu-btn .icon-open { display: none; }
  .sidebar.is-open .mobile-menu-btn .icon-close { display: inline-flex; }

  .sidebar > .sidebar-workspace { display: none; }

  /* Collapsed: everything below the top line is hidden outright rather
     than squeezed into pill rows — reading them at all needs the full
     open menu now, not a sideways scroll competing with the composer
     for the very first thing you see. */
  .sidebar:not(.is-open) > .side-search,
  .sidebar:not(.is-open) > .sidebar-section,
  .sidebar:not(.is-open) .sidebar-footer {
    display: none;
  }

  /* Open: reads like the desktop sidebar's own list, just full-screen —
     no pill styling, no horizontal scroll, nothing left half-hidden. */
  .sidebar.is-open .eyebrow,
  .sidebar.is-open .sidebar-note {
    display: block;
  }
  .sidebar.is-open .eyebrow-row { display: flex; }
  .sidebar.is-open .sidebar-footer { display: grid; }

  /* Stops the page scrolling underneath the full-screen menu (iOS in
     particular will still rubber-band the body without this). */
  body.mobile-menu-open { overflow: hidden; height: 100dvh; }

  .side-search { width: 100%; min-width: 0; }
  .side-search input { min-width: 0; }
  .side-search .kbd { display: none; }
  .brand { min-width: 0; }
  .main { min-width: 0; }
  .topbar { min-width: 0; }
  .topbar > div { min-width: 0; }
  .topbar-title, .topbar-sub { overflow-wrap: anywhere; }

  /* Title plus action buttons won't fit one phone line, and buttons don't
     shrink — so the row wraps rather than widening the page. */
  .topbar {
    padding: 0.9rem 1.15rem;
    flex-wrap: wrap;
    gap: 0.65rem;
  }
  .topbar > div { flex-wrap: wrap; min-width: 0; }
  .topbar-title { font-size: 0.98rem; }
  .note-item summary,
  .note-title,
  .followup-title,
  .acc-name { overflow-wrap: anywhere; }
  .content {
    padding: 1.15rem 1.15rem 5.5rem;   /* room for the tab bar */
  }

  .field-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof { grid-template-columns: 1fr; }
  .capture-grid { grid-template-columns: 1fr; }
  .example-grid { grid-template-columns: 1fr; gap: 1rem; }
  .example-arrow { transform: rotate(90deg); justify-self: center; }
  .example-raw { margin-block: 0; }
  .example-out .field-row { grid-template-columns: 1fr; }

  .toast-stack { left: 1rem; right: 1rem; bottom: 5.2rem; justify-items: stretch; min-width: 0; }
  .toast { max-width: none; }
  .cmdk-backdrop { padding-top: 8vh; }
  body::after { display: none; }

  /* Matches the laptop page now: title first, a little scroll to the
     composer, then everything else in the same order it already sits in
     the document. The old order here put every marketing section ahead
     of the composer and the hero dead last, purely because they were
     added after this rule was written and defaulted to order: 0 — this
     just removes the reorder rather than re-numbering it, since plain
     document order is already the order we want. */
  .content-wide { display: flex; flex-direction: column; }
  .hero { padding-top: 1.4rem; }

  /* Rows built for a wide screen pack a title, pills and a button onto one
     line, none of which shrink. On a phone they wrap instead. */
  .followup-row,
  .account-row,
  .note-item summary,
  .tl-head,
  .divider-actions,
  .panel-head { flex-wrap: wrap; }

  .followup-meta,
  .acc-main,
  .note-title,
  .tl-title { flex: 1 1 100%; min-width: 0; }

  .note-item summary .type-pill,
  .recent-row .type-pill { min-width: 0; }

  .acc-chevron { display: none; }
  .acc-stage { display: none; }
  .note-date { margin-left: auto; }

  .recent-row { flex-wrap: wrap; gap: 0.4rem 0.6rem; }
  .recent-title { flex: 1 1 100%; white-space: normal; }

  .spark { max-width: none; }

  .example-out .field-row { grid-template-columns: 1fr; }
  .raw-block, .text-block, .example-raw { overflow-wrap: anywhere; }

  .hero h1 { font-size: 1.9rem; }
  .hero p  { font-size: 0.94rem; }

  textarea { min-height: 200px; font-size: 16px; }  /* 16px stops iOS zooming on focus */
}

@media (max-width: 820px) {
  .account-row .acc-stage { display: none; }
  .account-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  /* two-up keeps the four numbers glanceable instead of a long scroll */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .stat-card { padding: 0.75rem 0.8rem; }
  .stat-value { font-size: 1.3rem; }
  .acc-chevron { display: none; }
  .note-item summary .type-pill,
  .recent-row .type-pill { min-width: 0; }
}

/* ============================================================
   Record a meeting — a heavier, separate capture mode from the
   quick voice memo: real audio, the whole meeting, transcribed by
   Deepgram and summarized by Claude. See templates/record.html
   and templates/record_detail.html.
   ============================================================ */
.record-hero {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.record-hero-controls {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.record-hero-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1;
  min-width: 220px;
}

/* Idle state now uses the same agent gradient .btn-agent uses on the
   reply page — this button launches the Listening agent, same as that
   one launches the reply agent, so it gets the same "this runs an agent"
   visual language instead of a flat black/white button. Recording itself
   still turns solid red below: that's a safety-relevant "this is live"
   signal, not decoration, so it stays untouched. */
.record-btn-lg {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
    0 8px 22px color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 0.9rem 1.6rem;
  border-radius: 11px;
  font-size: 1rem;
  font-weight: 600;
  gap: 0.6rem;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.record-btn-lg:hover:not(:disabled) {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent),
    0 12px 30px color-mix(in srgb, var(--accent) 42%, transparent);
}
.record-btn-lg:disabled { opacity: .42; cursor: default; transform: none; }

.record-btn-lg .rec-dot { background: #fff; }
.record-btn-lg.recording .rec-dot {
  opacity: 1;
  animation: rec-pulse 1.15s ease-in-out infinite;
}
.record-btn-lg.recording {
  background: #c0392b;
  color: #fff;
  box-shadow: none;
}

/* The hero panel itself glows red while actually recording — live status
   should be obvious glancing at the page, not just reading the button. */
.record-hero.is-recording {
  border-color: color-mix(in srgb, #c0392b 45%, var(--border-strong));
  box-shadow:
    var(--shadow-sm), inset 0 1px 0 var(--inner-hi),
    0 0 0 1px color-mix(in srgb, #c0392b 22%, transparent),
    0 0 32px color-mix(in srgb, #c0392b 18%, transparent);
}

.record-timer {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.record-status {
  max-width: 34ch;
}

.record-hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: stretch;
  width: 1px;
  background: var(--border);
  position: relative;
}
.record-hero-divider span {
  position: absolute;
  background: var(--surface-raised);
  padding: 0.4rem 0;
}

.record-hero-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 260px;
}

/* .btn is white-space:nowrap by default, which let this button's long
   label push past its own column and spill outside the card. It's the
   one button whose text needs to wrap, so it opts back in here. */
.record-hero-upload .btn {
  width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.3;
}

@media (max-width: 720px) {
  .record-hero-divider { display: none; }
  .record-hero-controls { gap: 1.1rem; }
}

/* Compact echo of the homepage's pulsing-mic-with-waveform visual (see
   .record-mic / .record-wave under the Listening agent showcase) — same
   "an agent is always listening" language, scaled down to sit beside the
   record button instead of duplicating a whole showcase on a utility
   page. Steps aside the moment a recording is actually live, since the
   level meter takes over telling that story. */
.record-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.record-hero-visual .record-mic { width: 46px; height: 46px; }
.record-hero-visual .record-mic-core { width: 38px; height: 38px; }
.record-hero-visual .record-mic-core svg { width: 17px; height: 17px; }
.record-hero-visual .record-wave { display: none; }

.record-hero.is-recording .record-hero-visual { display: none; }

@media (max-width: 560px) {
  .record-hero-visual { display: none; }
}

.meeting-list { display: flex; flex-direction: column; }

.meeting-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
  transition: background-color .14s ease;
}
.meeting-row:last-child { border-bottom: none; }
.meeting-row:hover { background: var(--surface-hover); }

.meeting-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim);
}
.meeting-status-dot.status-processing {
  background: var(--accent);
  animation: rec-pulse 1.15s ease-in-out infinite;
}
.meeting-status-dot.status-complete { background: #3fb950; }
.meeting-status-dot.status-error { background: #c0392b; }

.meeting-row-main { flex: 1; min-width: 0; }
.meeting-row-title {
  font-weight: 500;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meeting-row-sub { margin-top: 0.1rem; }

.empty-mark.spin svg { animation: spin 1.1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Compact strip carrying over what the old full-section Listening/
   Business agent showcases used to sell on the homepage, now that those
   sections only live there as the shorter five-agents card grid. Sits
   right under the existing promo-strip -- a slim row, not a stacked
   block above or below the page's main content. */
.agent-highlight-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.3rem;
}

.agent-highlight-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  flex-shrink: 0;
}

.agent-highlight-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
}

.agent-highlight-chip .check-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--accent);
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 640px) {
  .agent-highlight-row { gap: 0.45rem; }
  .agent-highlight-chip { font-size: 0.76rem; }
}

/* ---------- Record a meeting: showcase (premium badge, tagline, promo) ---------- */
.promo-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

.premium-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.promo-tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Same recipe as .hero h1 em, tuned for inline use at a smaller size — the
   one violet flourish this page gets, on the one word worth lingering on. */
.shine-word {
  font-style: normal;
  background-image: linear-gradient(
    100deg,
    var(--accent) 0%,
    var(--accent-2) 35%,
    #ffffff 50%,
    var(--accent-2) 65%,
    var(--accent) 100%
  );
  background-size: 250% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent));
  animation: em-shine 3.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .shine-word { animation: none; background-position: 30% 0; }
}

.chip-accent {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: 0.08rem 0.5rem;
  white-space: nowrap;
}

.panel-priority {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface-raised)), var(--surface-raised) 55%);
}

/* ---------- Record a meeting: "it's working" live feedback ---------- */
.level-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 22px;
}

.level-bar {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  transition: height .09s ease;
}

.live-caption-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface-raised)), var(--surface-raised) 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 22px color-mix(in srgb, var(--accent-2) 10%, transparent);
}

.live-caption-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.live-caption-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.live-caption-badge .live-dot {
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
}

.live-caption-wrap .raw-block {
  max-height: 140px;
  overflow-y: auto;
  color: var(--text);
  scroll-behavior: smooth;
}

.live-caption-interim {
  color: var(--text-dim);
  font-style: italic;
}

.live-caption-cursor {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent-2);
  animation: live-caption-blink 1s step-end infinite;
}

@keyframes live-caption-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .live-caption-cursor { animation: none; opacity: .6; }
}

/* ---------- Homepage promo banners (Record + Reply Assistant Agent) ----------
   Stacked as one grid child so both sit close together under a single
   gap, rather than each claiming the page's full section spacing. */
.promo-stack {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.home-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-raised));
  text-decoration: none;
  color: inherit;
  transition: border-color .16s ease, background-color .16s ease;
}

.home-promo:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-raised));
}

.home-promo-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.92rem;
  font-weight: 500;
}

.home-promo-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.home-promo-arrow svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- Record a meeting: wide layout, boxed cards kept ----------
   This page borrows the homepage's wide content + capture-grid/proof-rail
   layout (record-hero + recordings list on the left, three feature call-
   outs on the right, in the space that used to sit empty). Unlike the
   homepage, this page keeps its panels as visible bordered cards, so this
   overrides .content-wide .panel's border-stripping for this page only. */
.record-page .panel {
  border: 1px solid var(--border);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--inner-hi);
  padding: 2rem;
}

/* Same dim ambient bloom as .reply-page — this page had the same gap: a
   promo strip and a proof rail already carried some polish, but the page
   itself sat flat next to how much atmosphere the homepage got. */
.record-page {
  position: relative;
  isolation: isolate;
}

.record-page::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 640px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  filter: blur(64px);
  background: radial-gradient(
    ellipse 60% 100% at 50% 0%,
    color-mix(in srgb, var(--accent) 11%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 6%, transparent) 45%,
    transparent 75%
  );
}

.record-main-col {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}


/* ============================================================
   Business workspace showcase — the homepage's second act

   Everything above this on the page is the notes composer people came
   for. This is the part that has to earn attention it wasn't given, so
   it doesn't describe the agent in three feature boxes — it runs the
   agent live, on a loop, and lets the output do the arguing. The whole
   block is one distinct "zone": its own surface, its own violet aura,
   deliberately not another .panel, so scrolling into it feels like
   arriving somewhere rather than reading one more card.
   ============================================================ */
.workspace-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 1.4rem;
  padding: 3.2rem 2.4rem 2.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 7%, var(--surface-raised)) 0%,
    var(--surface-raised) 58%
  );
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--inner-hi);
}

/* Soft violet bloom behind the heading — the same "there's something
   powerful in here" cue the record button and hero word use, at scale. */
.ws-aura {
  position: absolute;
  top: -44%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 135%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  /* sits above the section's own background but under its content — at
     z-index:-1 the section background painted straight over it. */
  z-index: 0;
  opacity: 0.7;
  filter: blur(30px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 14%, transparent) 44%,
    transparent 68%
  );
}

.ws-head,
.ws-flow,
.ws-actions { position: relative; z-index: 1; }

.ws-head {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.ws-eyebrow { margin-bottom: 1.2rem; }

.ws-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin: 0 0 0.95rem;
  text-wrap: balance;
}

/* The hook line — the one bit of copy allowed to be a question, because
   naming the problem is what makes the demo underneath mean anything. */
.ws-hook {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--accent);
  margin: 0 0 0.65rem;
}

.ws-sub {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------- The live flow ---------- */
.ws-flow {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ws-node { width: 100%; }

.ws-node-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

/* Reads as a received message: squared-off bottom-left corner, plain
   surface, nothing claiming to be clever — it's just what they sent. */
.ws-bubble {
  min-height: 3.15rem;
  padding: 0.85rem 1.05rem;
  border: 1px solid var(--border-strong);
  border-radius: 14px 14px 14px 4px;
  background: var(--surface-hover);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* The connector doubles as the arrow: a hairline rail that a violet packet
   travels down, with a chevron at the bottom so the direction of the whole
   flow is unmistakable even in a still screenshot. The rail clips the
   packet; the chevron sits outside that clip, hence the inner element. */
.ws-wire {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.75rem 0;
}

.ws-wire-rail {
  position: relative;
  display: block;
  width: 2px;
  height: 40px;
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 35%, var(--border-strong)) 25%,
    color-mix(in srgb, var(--accent) 55%, var(--border-strong)) 100%
  );
}

.ws-wire::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid color-mix(in srgb, var(--accent) 60%, var(--border-strong));
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 60%, var(--border-strong));
  transform: rotate(45deg);
  border-radius: 0 0 2px 0;
}

.ws-pulse {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 22px;
  border-radius: 6px;
  opacity: 0;
  transform: translate(-50%, -22px);
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  filter: drop-shadow(0 0 7px var(--accent));
}

.ws-wire.is-firing .ws-pulse { animation: ws-travel 0.6s ease-in-out forwards; }

@keyframes ws-travel {
  0%   { opacity: 0; transform: translate(-50%, -22px); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 40px); }
}

.ws-agent {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1.2rem 0.7rem 0.72rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--inner-hi);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.ws-agent.is-working {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 0 34px color-mix(in srgb, var(--accent) 32%, transparent);
}

.ws-agent-core {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 42%, transparent);
}

.ws-agent-core svg { width: 17px; height: 17px; fill: #fff; stroke: none; }

.ws-agent.is-working .ws-agent-core { animation: ws-core-pulse 1.05s ease-in-out infinite; }

@keyframes ws-core-pulse {
  0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 38%, transparent); }
  50%      { box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 72%, transparent); }
}

.ws-agent-meta { text-align: left; line-height: 1.25; }
.ws-agent-name { font-weight: 600; font-size: 0.88rem; letter-spacing: -0.01em; }

.ws-agent-state {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.67rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.3s ease;
}

.ws-agent.is-working .ws-agent-state { color: var(--accent); }

/* The payoff. Mirrored corner (sent, not received) and the only element
   on the page allowed to actually glow — this is the thing being sold. */
/* Waits as a faint ghost rather than nothing at all: the space is reserved
   either way (so the page never jumps mid-loop), and a dim outline reads as
   "the reply lands here" instead of as a hole in the layout. */
.ws-node-out {
  opacity: 0.16;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.ws-node-out.is-on { opacity: 1; transform: none; }

.ws-draft {
  min-height: 5.5rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  border-radius: 14px 14px 4px 14px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
  font-size: 0.95rem;
  line-height: 1.55;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
    0 0 26px color-mix(in srgb, var(--accent) 26%, transparent),
    0 16px 44px color-mix(in srgb, var(--accent) 24%, transparent);
}

.ws-caret {
  display: none;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.17em;
  background: var(--accent);
  animation: ws-blink 0.9s steps(1) infinite;
}

.ws-caret.is-on { display: inline-block; }

@keyframes ws-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* The quiet closing argument: they didn't just get a reply, they got a
   customer on a board without typing anything. */
.ws-logged {
  width: 100%;
  margin-top: 1.4rem;
  opacity: 0.13;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.ws-logged.is-on { opacity: 1; transform: none; }

.ws-logged-label {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
}

.ws-logged-label svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ws-logged-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  /* lifted off the section's own surface rather than flush with it — this
     is the closing argument of the whole demo, so it shouldn't recede */
  background: var(--surface-hover);
  box-shadow: var(--shadow), inset 0 1px 0 var(--inner-hi);
}

.ws-logged-text { flex: 1; min-width: 0; line-height: 1.3; }
.ws-logged-name { font-weight: 600; font-size: 0.9rem; }
.ws-logged-sub { font-size: 0.76rem; color: var(--text-dim); }

.ws-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 2.3rem;
}

.ws-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}

.ws-link:hover { color: var(--text); }

.ws-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.ws-link:hover svg { transform: translateX(3px); }

@media (max-width: 820px) {
  .workspace-showcase { padding: 2.4rem 1.25rem 2rem; border-radius: 14px; }
  .ws-head { margin-bottom: 2rem; }
}

/* Corner home for the agent status — see the comment above
   .ws-agent-corner in index.html. Sized down from the default .ws-agent
   (built for sitting inline in a flow) to read as a header badge instead. */
.ws-agent-corner {
  position: absolute;
  top: 2.9rem;
  right: 2.4rem;
  z-index: 2;
}
.ws-agent-corner .ws-agent {
  padding: 0.5rem 0.9rem 0.5rem 0.55rem;
  gap: 0.6rem;
}
.ws-agent-corner .ws-agent-core { width: 28px; height: 28px; }
.ws-agent-corner .ws-agent-core svg { width: 14px; height: 14px; }
.ws-agent-corner .ws-agent-name { font-size: 0.78rem; }
.ws-agent-corner .ws-agent-state { font-size: 0.6rem; }

@media (max-width: 820px) {
  .ws-agent-corner { display: none; }
}

/* The rail that used to end at the agent pill now runs straight through
   to the next one, forming a single connector between the two chat
   bubbles instead of two half-rails with a pill wedged between them. */
.ws-wire-mid { margin-bottom: 0; }
.ws-wire-mid::after { display: none; }

/* ============================================================
   Trust section — deliberately NOT another bordered glowing panel like
   the showcases either side of it. Sits straight on the page background
   (a pill-shaped fact strip, then a plain card grid) so the page gets a
   third visual rhythm instead of three boxes in a row. Every claim here
   is something actually true of this codebase (Claude, Deepgram, no
   card required) — no invented stats, logos, or reviews.
   ============================================================ */
/* ============================================================
   Bridge section between the notes composer and the business-workspace
   showcase — see the comment above <section id="proof"> in index.html.
   A plain before/after now: what a day looks like without this versus
   with it, in general terms — no agent named, no system diagram.
   ============================================================ */
.proof-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 1.4rem;
  padding: 2.8rem 2.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--inner-hi);
}

.proof-aura {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 130%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  filter: blur(30px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent-2) 24%, transparent) 0%,
    color-mix(in srgb, var(--accent) 12%, transparent) 46%,
    transparent 70%
  );
}

.proof-head,
.proof-grid { position: relative; z-index: 1; }

.proof-head {
  max-width: 560px;
  margin: 0 auto 2rem;
  text-align: center;
}

.proof-eyebrow { margin-bottom: 1.1rem; }

.proof-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 0.7rem;
  text-wrap: balance;
}

.proof-sub {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

@media (max-width: 820px) {
  .proof-section { padding: 2.2rem 1.4rem; }
}

/* A before/after read instead of a system diagram — the point isn't "one
   agent doing four jobs" anymore (the section below this one already
   covers every agent and feature on its own), it's the time back. Kept
   general on purpose: no agent named here, just what changes day to day. */
.compare {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.6rem;
  max-width: 800px;
  margin: 0 auto;
}

.compare-col {
  display: grid;
  gap: 0.95rem;
  padding: 1.5rem 1.6rem;
  border-radius: 14px;
}

.compare-before {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  opacity: 0.8;
}

.compare-after {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 10%, var(--surface-raised)) 0%,
    var(--surface-raised) 70%
  );
  border: 1px solid var(--border-glow);
  box-shadow: var(--shadow-sm);
}

.compare-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.compare-after .compare-label { color: var(--accent-2); }

.compare-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.compare-after .compare-row { color: var(--text); }

.compare-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  flex-shrink: 0;
}

.compare-arrow svg {
  width: 17px;
  height: 17px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 720px) {
  .compare { grid-template-columns: 1fr; }
  .compare-arrow { transform: rotate(90deg); justify-self: center; }
}

.trust-section {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-top: 0.4rem;
}

.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--inner-hi);
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.trust-chip-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: var(--accent-2);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-chip-icon.icon-fill { fill: var(--accent-2); stroke: none; }

.trust-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}

.trust-head {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.trust-eyebrow { margin-bottom: 1.1rem; }

.trust-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.8rem;
  text-wrap: balance;
}

.trust-sub {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--text-muted);
  text-wrap: pretty;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.trust-card {
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-raised);
  padding: 1.4rem 1.35rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--inner-hi);
  transition: border-color 0.2s ease, transform 0.2s ease;
  opacity: 0;
  animation: content-fade-up .5s ease forwards;
}
.trust-grid .trust-card:nth-child(1) { animation-delay: .05s; }
.trust-grid .trust-card:nth-child(2) { animation-delay: .1s; }
.trust-grid .trust-card:nth-child(3) { animation-delay: .15s; }
.trust-grid .trust-card:nth-child(4) { animation-delay: .2s; }

.trust-card:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-strong));
  transform: translateY(-2px);
}

.trust-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
  margin-bottom: 0.95rem;
}

.trust-card-icon svg { width: 18px; height: 18px; }
.trust-card-icon svg.icon-fill { fill: #fff; stroke: none; }
.trust-card-icon svg.icon-stroke {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
  color: var(--text);
}

.trust-card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.58;
  color: var(--text-muted);
}

@media (max-width: 820px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-dot { display: none; }
  .trust-bar { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .trust-card { animation: none; opacity: 1; }
  .trust-card:hover { transform: none; }
}

/* ============================================================
   Recording agent showcase — a deliberately different shape from the
   workspace section above it (side-by-side copy + visual, not a
   centered live-flow simulation) so the two don't read as the same
   feature twice. Different icon language too: mic + waveform instead
   of the reply agent's spark, and its own "Listening agent" name so
   it's obviously a second, separate agent. See templates/record.html.
   ============================================================ */
.record-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 1.4rem;
  padding: 3rem 2.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-2) 7%, var(--surface-raised)) 0%,
    var(--surface-raised) 62%
  );
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--inner-hi);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  align-items: center;
  gap: 2.6rem;
}

/* Bloom sits off to the side behind the visual, not centered top — the
   workspace section's aura is symmetrical and centered, this one is
   deliberately lopsided so the two sections don't feel interchangeable
   at a glance. */
.record-aura {
  position: absolute;
  top: 50%;
  right: -12%;
  transform: translateY(-50%);
  width: min(520px, 66%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  filter: blur(34px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent-2) 28%, transparent) 0%,
    color-mix(in srgb, var(--accent) 13%, transparent) 46%,
    transparent 70%
  );
}

.record-copy,
.record-visual { position: relative; z-index: 1; }

.record-eyebrow { margin-bottom: 1.15rem; }

.record-copy h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.7rem;
  text-wrap: balance;
}

.record-hook {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent-2);
  margin: 0 0 0.65rem;
}

.record-sub {
  margin: 0 0 1.3rem;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.record-points {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.record-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.record-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---------- The visual: pulsing mic, a live waveform, an extraction card ---------- */
.record-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}

.record-mic {
  position: relative;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
}

/* Same expand-and-fade recipe as .live-dot::after, just bigger and
   doubled up with a staggered delay for a slow "sonar" read — an
   always-listening state, not a one-off shimmer. */
.record-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
  animation: record-ping 2.6s cubic-bezier(.2,.6,.3,1) infinite;
}
.record-ring-2 { animation-delay: 1.3s; }

@keyframes record-ping {
  0%   { transform: scale(0.7); opacity: .8; }
  100% { transform: scale(2.15); opacity: 0; }
}

.record-mic-core {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent-2) 50%, transparent);
}
.record-mic-core svg { width: 23px; height: 23px; fill: #fff; stroke: none; }

.record-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
}
.record-wave span {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  animation: record-wave-bounce 1.2s ease-in-out infinite;
}
.record-wave span:nth-child(1) { height: 8px;  animation-delay: 0s; }
.record-wave span:nth-child(2) { height: 16px; animation-delay: .1s; }
.record-wave span:nth-child(3) { height: 24px; animation-delay: .2s; }
.record-wave span:nth-child(4) { height: 12px; animation-delay: .3s; }
.record-wave span:nth-child(5) { height: 20px; animation-delay: .4s; }
.record-wave span:nth-child(6) { height: 10px; animation-delay: .5s; }
.record-wave span:nth-child(7) { height: 16px; animation-delay: .6s; }

@keyframes record-wave-bounce {
  0%, 100% { transform: scaleY(0.4); opacity: .65; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

.record-card {
  width: 100%;
  max-width: 250px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--inner-hi);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.55rem;
}

.record-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 0.1rem;
}

.record-card-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: rec-pulse 1.3s ease-in-out infinite;
}

/* Each row reveals once on load — a single staggered sweep, same
   philosophy as the hero headline: it should read as polish, not as a
   looping demo of itself. */
.record-card-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.81rem;
  color: var(--text-muted);
  opacity: 0;
  animation: content-fade-up .5s ease forwards;
}
.record-card-row:nth-child(2) { animation-delay: .35s; }
.record-card-row:nth-child(3) { animation-delay: .6s; }
.record-card-row:nth-child(4) { animation-delay: .85s; }

.record-card-row .check-icon { width: 14px; height: 14px; margin-top: 0; }

@media (max-width: 900px) {
  .record-showcase { grid-template-columns: 1fr; padding: 2.4rem 1.5rem; }
  .record-visual { order: -1; }
  .record-sub { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .record-ring,
  .record-wave span,
  .record-card-dot { animation: none; }
  .record-card-row { animation: none; opacity: 1; }
}

/* ============================================================
   FAQ — same showcase treatment as the workspace section above it
   (aura glow, centered head, em-shine word) so the two read as one
   family, then a two-column grid of native <details> accordions.
   Native details/summary means zero JS and free keyboard/AT support —
   the chevron rotate and border highlight are the only custom bits.
   ============================================================ */
.faq-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 1.4rem;
  padding: 3.2rem 2.4rem 2.8rem;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 6%, var(--surface-raised)) 0%,
    var(--surface-raised) 55%
  );
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--inner-hi);
}

.faq-aura {
  position: absolute;
  top: -48%;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 120%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  filter: blur(30px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 26%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 12%, transparent) 46%,
    transparent 70%
  );
}

.faq-head,
.faq-grid { position: relative; z-index: 1; }

.faq-head {
  max-width: 640px;
  margin: 0 auto 2.3rem;
  text-align: center;
}

.faq-eyebrow { margin-bottom: 1.2rem; }

.faq-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.85rem;
  text-wrap: balance;
}

.faq-sub {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.faq-item {
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 var(--inner-hi);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  animation: content-fade-up .5s ease both;
}
.faq-grid .faq-item:nth-child(1) { animation-delay: .04s; }
.faq-grid .faq-item:nth-child(2) { animation-delay: .08s; }
.faq-grid .faq-item:nth-child(3) { animation-delay: .12s; }
.faq-grid .faq-item:nth-child(4) { animation-delay: .16s; }
.faq-grid .faq-item:nth-child(5) { animation-delay: .2s; }
.faq-grid .faq-item:nth-child(6) { animation-delay: .24s; }
.faq-grid .faq-item:nth-child(7) { animation-delay: .28s; }
.faq-grid .faq-item:nth-child(8) { animation-delay: .32s; }

.faq-item:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
}

/* The one open by default (or whichever one a visitor has open) gets the
   same "this is the important thing" violet outline + glow the Pro
   pricing card and the record button use elsewhere — consistent language
   for "this is highlighted" across the whole app. */
.faq-item[open] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 7%, var(--surface-raised)) 0%,
    var(--surface-raised) 70%
  );
  box-shadow:
    inset 0 1px 0 var(--inner-hi),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 16%, transparent);
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--text);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 12px;
}

.faq-chevron {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease, stroke 0.2s ease;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  stroke: var(--accent-2);
}

.faq-answer {
  margin: 0;
  padding: 0 1.25rem 1.15rem;
  font-size: 0.87rem;
  line-height: 1.62;
  color: var(--text-muted);
}

@media (max-width: 820px) {
  .faq-section { padding: 2.4rem 1.25rem 2rem; border-radius: 14px; }
  .faq-head { margin-bottom: 1.8rem; }
  .faq-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-wire.is-firing .ws-pulse,
  .ws-agent.is-working .ws-agent-core,
  .ws-caret {
    animation: none;
  }
  .ws-caret.is-on { opacity: 1; }
}

/* ---------- Rail teaser: the agent, in miniature, above the fold ----------
   Lives in the space the proof rail leaves empty beside the taller
   composer. It's the only boxed thing in a rail of borderless rows, so it
   reads as a different kind of object — a live thing rather than another
   reason — without shouting over the composer that owns this screen. */
.rail-agent {
  display: block;
  /* .proof-rail (a flex column with justify-content: space-between) now
     supplies the gap below this so the whole rail reaches the bottom of
     the composer — a fixed margin here would just stack on top of that
     and throw the spacing off. */
  margin: 0;
  padding: 1rem 1rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
  border-radius: 13px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 9%, var(--surface-raised)) 0%,
    var(--surface-raised) 70%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent),
    0 8px 26px color-mix(in srgb, var(--accent) 15%, transparent);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.rail-agent:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
    0 12px 34px color-mix(in srgb, var(--accent) 26%, transparent);
}

.rail-agent-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.rail-agent-eyebrow svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }

.rail-agent-msg,
.rail-agent-reply {
  display: block;
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 0.55rem 0.7rem;
  border-radius: 10px 10px 10px 3px;
  min-height: 2.4rem;
}

.rail-agent-msg {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.rail-agent-reply {
  border-radius: 10px 10px 3px 10px;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-strong));
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
  min-height: 3.4rem;
}

.rail-agent-arrow {
  display: grid;
  place-items: center;
  height: 22px;
}

.rail-agent-arrow svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 70%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.25s ease;
  opacity: 0.4;
}

.rail-agent-arrow.is-firing svg { animation: rail-arrow 0.6s ease-in-out; }

@keyframes rail-arrow {
  0%   { opacity: 0.4; transform: translateY(-3px); }
  50%  { opacity: 1;   transform: translateY(2px); }
  100% { opacity: 0.4; transform: translateY(-3px); }
}

.rail-agent-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.18s ease;
}

.rail-agent:hover .rail-agent-link { color: var(--accent); }

.rail-agent-link svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.rail-agent:hover .rail-agent-link svg { transform: translateY(2px); }

@media (prefers-reduced-motion: reduce) {
  .rail-agent-arrow.is-firing svg { animation: none; }
  .rail-agent:hover { transform: none; }
}

/* ============================================================
   Reply Assistant Agent — premium treatment

   Every other AI moment in the app (the homepage's live business
   workspace demo) already earns its "sharp, futuristic" reputation
   through the violet accent, a glow, and a literal agent-core icon. This
   page is where that same agent actually lives day to day, yet none of
   that language had reached it — it was the plainest page in the app.
   Everything below reuses the exact same tokens and the exact same
   agent-core icon rather than inventing a second visual style.
   ============================================================ */

.reply-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem 0.42rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-hover));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-strong));
  color: var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reply-agent-badge .live-dot { background: var(--accent); }

/* Reflects the actual /reply/generate request in flight — not just a
   static "agent ready" label — so the topbar pill and the empty-state
   agent pill below both tell the truth about what's happening. */
.reply-agent-badge.is-working {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.reply-agent-badge.is-working .live-dot { animation-duration: 0.7s; }

/* Panel-head agent status chip — same top-right slot the plain "Ready"
   chip always occupied, now telling the truth through all three states
   (standing by / drafting / ready) instead of only the last one. Replaces
   the old centered .ws-agent pill that used to sit in the empty state
   below and made this panel taller than "Their message" beside it. */
.agent-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.agent-status-chip .live-dot { display: none; }

.agent-status-chip.is-working {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.agent-status-chip.is-working .live-dot {
  display: inline-block;
  background: var(--accent);
}

.agent-status-chip.is-ready {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border));
}


/* Mode toggle: the active state gets the agent's own gradient instead of
   the flat invert-bg every other toggle in the app uses. This is the one
   control that decides which of the agent's two jobs actually runs. */
.reply-page .mode-toggle button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 42%, transparent);
}

/* The page's one real CTA — reuses the agent-core gradient from the
   homepage demo rather than the app's flat invert-bg button, since this
   is the button that actually runs the agent, not just a form submit. */
.btn-agent {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
    0 8px 22px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn-agent svg {
  width: 14px; height: 14px;
  fill: #fff; stroke: none;
  flex-shrink: 0;
}

.btn-agent:hover:not(:disabled) {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent),
    0 12px 30px color-mix(in srgb, var(--accent) 42%, transparent);
}

.btn-agent:disabled:not(.is-drafting) { opacity: .5; box-shadow: none; transform: none; }

/* While the agent is actually working — a moving gradient sweep and a
   spinning sparkle instead of the usual "disabled = faded out" look, so
   the button reads as "busy" rather than "broken." */
.btn-agent.is-drafting {
  opacity: 1;
  cursor: wait;
  background-image: linear-gradient(
    100deg,
    var(--accent) 0%,
    var(--accent-2) 35%,
    #ffffff 50%,
    var(--accent-2) 65%,
    var(--accent) 100%
  );
  background-size: 250% 100%;
  animation: btn-agent-thinking 1.3s ease-in-out infinite;
}

.btn-agent.is-drafting svg { animation: agent-icon-spin 1s linear infinite; }

@keyframes btn-agent-thinking {
  0%   { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

@keyframes agent-icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-agent.is-drafting { animation: none; background-position: 30% 0; }
  .btn-agent.is-drafting svg { animation: none; }
}

/* Empty state: the agent-core sparkle (the same icon and gradient as the
   homepage demo) standing by and gently pulsing, rather than a generic
   dashed inbox icon — this panel should read as "an agent is here,
   waiting," not "nothing has happened yet." */
.agent-idle-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  animation: agent-idle-pulse 2.6s ease-in-out infinite;
}

.agent-idle-mark svg { width: 18px; height: 18px; fill: #fff; stroke: none; }

/* Actively working (transcribing, summarizing) — the same agent-core mark
   as the idle state, but the sparkle itself spins, so "the agent is here"
   becomes "the agent is doing something" without swapping to a generic
   spinner icon that breaks the visual language. */
.agent-idle-mark.agent-thinking svg { animation: agent-icon-spin 1.6s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .agent-idle-mark.agent-thinking svg { animation: none; }
}

@keyframes agent-idle-pulse {
  0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); }
  50%      { box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 58%, transparent); }
}

/* The drafted reply itself — the actual payoff of the page — gets the
   same glowing bordered box as the homepage demo's drafted-reply bubble,
   so what you get out of this page looks as premium as what sold it to
   you. Scoped to this page's #reply-text specifically rather than
   .text-block generally, which is shared by plainer, non-agent surfaces
   elsewhere (contact timelines, the homepage's own note result). */
.reply-page #reply-text {
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .agent-idle-mark { animation: none; }
}

/* ============================================================
   Billing / pricing page
   ------------------------------------------------------------
   Reachable any time from the sidebar (never forced at login — people
   should see the app first). Two cards, deliberately large and plain-
   spoken, built around one goal Singh gave directly: someone looking at
   this page should think "premium is worth it," not just "here are two
   options." Reuses the app's existing premium visual language rather
   than inventing a new one — the auth page's aura/glow recipe for the
   Pro card, the homepage's em-shine for its glowing word, .btn-agent for
   its button — the same discipline every round since round 18 has used.
   ============================================================ */

.content-billing {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 3rem;
}

.billing-hero {
  text-align: center;
  max-width: 640px;
  margin: 0.5rem auto 2.6rem;
  display: grid;
  justify-items: center;
}

.billing-hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.7rem;
  color: var(--text);
}

.billing-hero p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* Monthly/annual switch — display only, doesn't touch billing/enforcement.
   "Save 20%" lives on the Annual button itself so it stands out where
   someone's about to click, rather than being stamped on the price line. */
.billing-cycle-toggle {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.2rem;
  margin: 0 auto 2.2rem;
  padding: 0.3rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--inner-hi);
}

.billing-cycle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-dim);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.billing-cycle-btn.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-hover));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.billing-save-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: start;
}

/* Free / Pro / Business, side by side. Business deliberately doesn't get
   the Pro card's lift + glow treatment (see .pricing-card-business below)
   so Pro still reads as the one card the eye lands on first. */
.pricing-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.pricing-card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2.2rem 2rem 2rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--inner-hi);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pricing-card-head { margin-bottom: 1.6rem; }

.plan-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.9rem;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.plan-price-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.plan-price-period {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.plan-blurb {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.plan-features {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  flex: 1;
}

.plan-features li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.plan-features-pro li {
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--text);
  font-weight: 500;
}

.plan-features-pro li::before { content: none; }

.check-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  stroke: var(--accent-2);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.x-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  stroke: var(--text-dim);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

/* ---------- Hostinger-style comparison rows (2026-09-09) ----------
   Every plan card now lists the SAME feature rows in the SAME order, so a
   visitor can scan straight across the three cards instead of reading each
   list top-to-bottom on its own. A row that plan doesn't include shows a
   plain dash + dimmed text (not an X — this isn't an error, it's just "not
   in this plan"), matching the reference pricing table Singh sent. Real
   product limits only — nothing here is fabricated. */
.dash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--text-dim);
  opacity: 0.6;
  font-weight: 700;
  line-height: 1;
}

.plan-features-compare li.feature-no,
.plan-features-pro.plan-features-compare li.feature-no,
.plan-features-business.plan-features-compare li.feature-no {
  color: var(--text-dim);
  font-weight: 400;
  opacity: 0.62;
}

/* The one thing Free doesn't have, set apart from the checked list of
   things it does — a dashed rule and dimmer text so the ✕ above it can't
   be misread as "you don't get this either." Everything above the rule
   is included (checked, with its limit); only this line, below the
   rule, is what's actually missing. */
.plan-feature-limit {
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
  color: var(--text-dim);
}

.plan-cta-row { margin-top: auto; }

.plan-current-badge {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 550;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: 9px;
  padding: 0.68rem 1rem;
}

.plan-current-badge-pro {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.plan-cta-spacer { height: 2.55rem; }

.btn-block { width: 100%; }

/* ---------- The Pro card itself ---------- */
.pricing-card-pro {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-strong));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 8%, var(--surface-raised)) 0%,
    var(--surface-raised) 60%
  );
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 0 55px color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translateY(-8px);
}

.pro-ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  padding: 0.36rem 0.95rem;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent);
  white-space: nowrap;
}

.pricing-card-pro .plan-name svg.crown-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: var(--accent-2);
  stroke-width: 1.9;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent));
}

/* ---------- The Business card ---------- */
/* Sits next to Pro's violet lift-and-glow with a plain graphite border and
   a quiet "Full access" tag instead of a shouting ribbon — on purpose.
   Pro is the card that's supposed to win the eye as "Most popular"; a
   second card competing for that same attention would just split it.
   Business earns its own $5/mo instead by looking like the serious, no-
   compromise option sitting calmly beside the popular one — genuinely
   unlimited everywhere Pro still caps (recordings), plus the two things
   that matter once someone's running this as part of a real operation. */
.pricing-card-business {
  border-color: var(--border-glow);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text) 5%, var(--surface-raised)) 0%,
    var(--surface-raised) 65%
  );
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--inner-hi);
}

.business-ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-glow);
  border-radius: 999px;
  padding: 0.34rem 0.9rem;
  white-space: nowrap;
}

.pricing-card-business .plan-name svg.infinity-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: var(--text);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-features-business li {
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--text);
  font-weight: 500;
}

.plan-current-badge-business {
  color: var(--text);
  border-color: var(--border-glow);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* A confident, dark CTA rather than the Pro card's filled violet button —
   Business's job is to look like the obvious "no more thinking about it"
   choice for someone who already knows they need it, not to out-shout Pro. */
.btn-business {
  background: var(--invert-bg);
  color: var(--invert-text);
  border: 1px solid var(--invert-bg);
  font-weight: 600;
}

.btn-business:hover {
  background: color-mix(in srgb, var(--invert-bg) 88%, transparent);
}

@media (max-width: 1180px) {
  .pricing-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card-pro { transform: none; }
  .billing-hero h1 { font-size: 1.65rem; }
}

/* ============================================================
   Global micro-interactions — small, cheap, felt everywhere.
   A button that visibly presses down and page content that eases in
   with a slight stagger reads as "considered" rather than "instant/flat,"
   without touching layout, colour, or any single page's own styling.
   ============================================================ */

/* Every button gets a real "press" — a slight scale-down the instant you
   click, settling back on release. Placed at the end of the file so it
   wins over any earlier :hover rule when both are active at once (the
   moment of an actual click). */
.btn:active:not(:disabled) {
  transform: scale(0.97);
  transition: transform .08s ease;
}

.btn-agent:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

/* Direct children of the main content grid (the hero, a panel, a whole
   grid of panels) ease in with a slight upward drift and a short
   per-section stagger, so a page arrives a beat at a time instead of
   snapping in all at once. Values are intentionally small — this should
   read as "smooth," never as a loading show. */
.content > * {
  animation: content-fade-up .45s ease both;
}
.content > *:nth-child(1) { animation-delay: 0s; }
.content > *:nth-child(2) { animation-delay: .05s; }
.content > *:nth-child(3) { animation-delay: .1s; }
.content > *:nth-child(4) { animation-delay: .15s; }
.content > *:nth-child(5) { animation-delay: .2s; }
.content > *:nth-child(n+6) { animation-delay: .22s; }

@keyframes content-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled),
  .btn-agent:active:not(:disabled) { transform: none; }
  .content > * { animation: none; }
}


/* ============================================================
   AI stack — credibility section replacing the old Listening-agent
   showcase slot. Deliberately the opposite shape from the two sections
   above it (both a lopsided text-left/visual-right split with a big gap
   between): this one is a single centered column up top, then one wide
   grid spanning the full section edge to edge, so the page doesn't read
   as three copies of the same layout in a row.
   ============================================================ */
.ai-stack-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 1.4rem;
  padding: 3rem 2.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 7%, var(--surface-raised)) 0%,
    var(--surface-raised) 55%
  );
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--inner-hi);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  text-align: center;
}

.ai-stack-aura {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 130%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  filter: blur(40px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 10%, transparent) 46%,
    transparent 72%
  );
}

.ai-stack-head { position: relative; z-index: 1; max-width: 680px; }
.ai-stack-eyebrow { margin-left: auto; margin-right: auto; }

.ai-stack-sub {
  margin-top: 0.9rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.ai-stack-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  max-width: 900px;
}

.ai-stack-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  box-shadow: inset 0 1px 0 var(--inner-hi);
  /* Flex items default to min-width:auto (refuse to shrink below their
     unwrapped content width) — harmless when every pill was a short phrase,
     but the longer capability pills here ("Understands context, not
     keywords") are wide enough on their own to force the whole section
     wider than a phone viewport, same overflow class as .nav-label
     elsewhere. min-width:0 lets a long pill wrap its own text instead. */
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.ai-stack-pill svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--accent);
}

/* The real name carries more weight than the capability list around
   it — that's the actual credibility claim, everything else is what
   it buys you. */
.ai-stack-pill-lead {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-hover));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
}

.ai-stack-foot {
  position: relative;
  z-index: 1;
  max-width: 560px;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-style: italic;
}

@media (max-width: 720px) {
  .ai-stack-section { padding: 2.2rem 1.4rem; }
}

/* Small monospace name tag identifying which of the five agents each
   card/banner is — added once the Business and Listening agents lost
   their own dedicated homepage sections, so their names still show up
   somewhere. Sits right above each card's own heading, no layout change
   otherwise. */
.offer-agent-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 0.35rem;
}

/* ============================================================
   Offer section — "what do we have to offer", every agent and feature
   together, none of them singled out. Three different shapes on purpose
   (bento grid, full-width banner, stat strip) so it doesn't read as one
   more copy of the sections above it.
   ============================================================ */
.offer-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 1.4rem;
  padding: 3rem 2.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--inner-hi);
}

.offer-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 40%, transparent 92%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 40%, transparent 92%);
}

.offer-aura {
  position: absolute;
  top: -30%;
  left: -10%;
  width: min(620px, 90%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  filter: blur(36px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 11%, transparent) 46%,
    transparent 70%
  );
}

.offer-head,
.offer-bento,
.offer-banner,
.offer-stats { position: relative; z-index: 1; }

.offer-head {
  max-width: 560px;
  margin: 0 auto 2.2rem;
  text-align: center;
}

.offer-eyebrow { margin-bottom: 1.1rem; }

.offer-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 0.7rem;
  text-wrap: balance;
}

.offer-sub {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

.offer-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.offer-card {
  position: relative;
  overflow: hidden;
  grid-column: span 1;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-hover);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.offer-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-sm);
}

.offer-card-big { grid-column: span 2; }
.offer-card-wide { grid-column: span 2; }

.offer-card-glow {
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.35;
  filter: blur(26px);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 72%);
}

.offer-card-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  margin-bottom: 0.85rem;
}

.offer-card-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.offer-card-icon-a {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-hover));
}
.offer-card-icon-a svg { stroke: var(--accent); }

.offer-card-icon-b {
  background: color-mix(in srgb, var(--accent-2) 14%, var(--surface-hover));
}
.offer-card-icon-b svg { stroke: var(--accent-2); }

.offer-card h3 {
  position: relative;
  z-index: 1;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
  color: var(--text);
}

.offer-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.58;
  color: var(--text-muted);
}

.offer-card-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.offer-card-tags span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
}

.offer-banner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.3rem 1.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-2) 8%, var(--surface-hover)) 0%,
    var(--surface-hover) 65%
  );
  margin-bottom: 1.6rem;
}

.offer-banner-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--accent-2) 16%, var(--surface-hover));
}

.offer-banner-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1.8;
}

.offer-banner-copy { flex: 1 1 auto; min-width: 0; }

.offer-banner-copy h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.3rem;
  color: var(--text);
}

.offer-banner-copy p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.offer-banner-tags {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.offer-banner-tags span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  text-align: center;
}

.offer-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
}

.offer-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.offer-stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background-image: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.offer-stat-label {
  font-size: 0.74rem;
  color: var(--text-dim);
  text-align: center;
}

.offer-stat-div {
  width: 1px;
  height: 32px;
  background: var(--border);
}

@media (max-width: 900px) {
  .offer-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-card-big { grid-column: span 2; }
  .offer-card-wide { grid-column: span 1; }
}

@media (max-width: 820px) {
  .offer-section { padding: 2.4rem 1.5rem; }
  .offer-bento { grid-template-columns: 1fr; }
  .offer-card-big,
  .offer-card-wide { grid-column: span 1; }
  .offer-banner { flex-wrap: wrap; }
  .offer-banner-tags { flex-direction: row; }
  .offer-stats { gap: 1.3rem; }
  .offer-stat-num { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .offer-card { transition: none; }
  .offer-card:hover { transform: none; }
}

/* Fills whatever gap .capture-grid's stretch alignment opens up under the
   try-row, instead of leaving it blank. margin-top: auto rather than a
   fixed height, since the gap's size depends on the proof-rail's own
   height and shouldn't need retuning if that ever changes. A single
   cycling status line — simplest version of "show it working" for the
   note itself, nothing else on it. */
.panel-tech-footer {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.panel-tech-footer .live-dot { background: var(--accent-2); color: var(--accent-2); }

.panel-tech-status-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
  transition: opacity 0.22s ease;
}