/* Meridian design system — AK Teck brand, dark-first. Blueprint 03
   section 07's slate-biased neutral ramp and clay-for-regulatory-states
   rule are preserved in spirit (clay stays exclusive to consent states;
   valid/attention/blocked stay a semantic trio separate from the brand
   accent, always paired with an icon and a word, never colour alone) —
   only which theme is the unconditional default has changed. The
   near-black ground, electric-blue accent, and silver/steel tones below
   are sampled from the AK Teck logo, not invented; every value here was
   checked against the WCAG AA formula (4.5:1 for text, 3:1 for large
   text/icons/UI components) rather than trusted on sight — a "premium"
   dark palette that fails contrast isn't premium, it's illegible. The
   light theme (Blueprint 03's original slate-neutral system) is now the
   secondary variant, applied under prefers-color-scheme: light. */

/* Self-hosted from /static/fonts — latin subset, woff2, the same
   families/weights this app loaded from Google Fonts before.
   IBM Plex Serif is deliberately not included: the --font-serif
   variable below is declared but var(--font-serif) is never applied by
   any rule in this file, so it was dead weight even when loaded from
   Google Fonts. License: src/web/static/fonts/LICENSES (SIL OFL 1.1). */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  --ground: #050608;
  --surface: #0b0f14;
  --raised: #11161d;
  /* Text/link/nav-active/icon colour: AK Teck's "bright" electric blue,
     used as-is — 7.9:1 against --ground, well clear of AA. */
  --accent: #00acf5;
  /* A separate, deliberately darker blue for filled button backgrounds:
     --accent is too light to hold 4.5:1 for white button text, so solid
     fills use this value instead (5.2:1 white-on-fill, 3.7:1 against
     --surface for the non-text UI-component threshold). */
  --accent-deep: #0072b3;
  /* Decorative-only (gradient stops, glow shadows) — AK Teck's "deep
     royal blue". Never used as a foreground/text colour: it fails AA
     entirely on a dark ground (2.8:1). */
  --accent-glow: #0052b8;
  /* Reserved for the AI-status indicator only, per the brief's own
     "blue used strategically for... AI indicators" — never body text. */
  --cyan: #22d3ee;
  --steel: #c7ccd3;
  --steel-light: #dde3e8;
  --avatar-text: var(--accent);
  --clay: #e0865e;
  --ink: #f5f7fa;
  --ink-muted: #9aa5b1;
  --border: #202832;

  --valid: #3dbd82;
  --attention: #d9a441;
  --blocked: #e5645c;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius: 4px;
  --radius-bubble: 6px;

  /* A single control-height scale, used everywhere instead of ad hoc
     38px/40px/44px literals — sm for auxiliary chips, md for topbar
     controls and nav rows, lg for the 44px accessible-touch-target
     floor on primary actions. */
  --control-height-sm: 36px;
  --control-height-md: 40px;
  --control-height-lg: 44px;

  --transition-fast: 150ms ease;

  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #f6f8fa;
    --surface: #ffffff;
    --raised: #e3e9ef;
    --accent: #1a67d1;
    --accent-deep: #0d4fb0;
    --accent-glow: #1a67d1;
    --cyan: #0891b2;
    --steel: #9aa3ad;
    --steel-light: #ced3d9;
    --avatar-text: var(--accent-deep);
    --clay: #b5502a;
    --ink: #141a21;
    --ink-muted: #4b5563;
    --border: #d6dde5;

    --valid: #2e7d4f;
    /* #9a6a08 measured 4.44:1 against --ground (#f6f8fa) via axe-core —
       just under WCAG AA's 4.5:1 floor. This token was defined but never
       actually rendered by any axe-tested page until the Leads
       consent-status badge (macros.html's consent_badge) exercised it
       for the first time. #704b05 measures ~7.3:1 against the same
       background — meets AAA, not just the AA floor. */
    --attention: #704b05;
    --blocked: #b3312c;
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark light;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

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

a {
  color: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* App shell: a fixed-width sidebar beside a flexible main column. This
   is the "component library" the AK Teck brief asks for, built with
   plain CSS grid/flex rather than a JS framework — see macros.html for
   the Jinja-macro half of that same idea. */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-3);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  padding: 0 var(--space-2);
}

/* The one glyph in the app drawn from the actual AK Teck brand mark:
   two overlapping chevrons in accent blue over steel, echoing the
   logo's A/K letterforms without shipping the raster file into a
   header it wasn't sized for. */
.brand-glyph {
  display: block;
  flex: none;
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-wordmark .name {
  font-weight: 600;
  font-size: 17px;
}
.brand-wordmark .by-line {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-2) var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 14px;
  min-height: var(--control-height-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav-item:hover {
  background: var(--raised);
  color: var(--ink);
}
.nav-item.active {
  /* 8%, not a rounder 10-15% — the lighter tint keeps --accent-as-text
     at 4.8:1 against the light theme's white sidebar; a stronger tint
     measurably fails AA there (verified: 14% gives 4.42:1). */
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.nav-icon {
  display: inline-flex;
  flex: none;
  transition: opacity var(--transition-fast);
}
.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Available vs. coming-later (section 9): dim the icon only — it is
   decorative (aria-hidden), so opacity carries no contrast obligation.
   The label text is deliberately left at full --ink-muted contrast
   (already 7:1+ against both themes' grounds): dimming *text* to signal
   "coming soon" is exactly the contrast-vs-decoration tradeoff section
   12 rules out, so the "Soon" badge plus the quieter icon carry the
   distinction instead. */
.nav-item.coming-soon .nav-icon {
  opacity: 0.55;
}
.nav-item.coming-soon:hover .nav-icon {
  opacity: 0.9;
}
.nav-badge {
  margin-left: auto;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--ink-muted);
  flex: none;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}
.ai-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0 var(--space-2);
}
.ai-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  margin-top: 5px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 70%, transparent);
  flex: none;
}
.ai-status-line {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.ai-status-detail {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 2px 0 0 0;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--control-height-md);
  height: var(--control-height-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  flex: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.sidebar-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  max-width: 320px;
  padding: 0 var(--space-3);
  height: var(--control-height-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--ink-muted);
}
.topbar-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
}
.topbar-search input::placeholder {
  color: var(--ink-muted);
}
.topbar-search input:disabled {
  cursor: not-allowed;
}

.ask-ak-teck-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.ask-ak-teck-btn:hover {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  border-color: var(--accent);
}

.user-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--ink-muted);
  flex: none;
}
.user-chip .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--raised);
  color: var(--avatar-text);
  font-size: 11px;
  font-weight: 600;
}

.sidebar-backdrop {
  display: none;
}

main {
  max-width: 880px;
  padding: var(--space-5);
}

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 8px 0 24px -8px rgba(0, 0, 0, 0.4);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-toggle {
    display: inline-flex;
  }
  .sidebar-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 40;
  }
}

@media (max-width: 600px) {
  main {
    padding: var(--space-3);
  }
  .topbar {
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .topbar-search {
    display: none;
  }
  .ask-ak-teck-btn span,
  .user-chip .chip-name {
    display: none;
  }
}

h1.display {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 var(--space-1) 0;
}

.subhead {
  color: var(--ink-muted);
  font-size: 13px;
  margin: 0 0 var(--space-5) 0;
}

/* Queue card (Blueprint 03 section 07): 3.5px left stripe in the
   semantic colour, a border and no shadow — elevation is spent on
   modals only, never on cards. */
.queue-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3.5px solid var(--ink-muted);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.queue-card[data-kind="escalated"] {
  border-left-color: var(--blocked);
}
.queue-card[data-kind="consent"] {
  border-left-color: var(--attention);
}
.queue-card[data-kind="drafted"] {
  border-left-color: var(--valid);
}

/* Spotlight: the one deliberate moment of visual weight, reserved for
   the single most urgent card. Every other card stays flat — this is
   not a shadow-and-gradient treatment applied uniformly like a generic
   SaaS card kit. */
.queue-card[data-spotlight="true"] {
  box-shadow: 0 4px 24px -8px color-mix(in srgb, var(--accent) 35%, transparent);
  padding: var(--space-5);
}
.queue-card[data-spotlight="true"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2.5px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
}
.queue-card[data-spotlight="true"] .title {
  font-size: 21px;
}

.queue-card .label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2) 0;
}
.queue-card .label svg {
  flex: none;
}
.queue-card[data-kind="escalated"] .label svg {
  color: var(--blocked);
}
.queue-card[data-kind="consent"] .label svg {
  color: var(--attention);
}
.queue-card[data-kind="drafted"] .label svg {
  color: var(--valid);
}

.queue-card .title {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
}
/* Typographic urgency, not just the amber stripe (section 6: distinguish
   urgency with more than colour) — 3 days or fewer gets underlined
   emphasis in the same semantic colour. */
.days-left-critical {
  color: var(--attention);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.queue-card .body {
  font-size: 15px;
  margin: 0 0 var(--space-3) 0;
}

.queue-card .meta {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3) 0;
}

.actions {
  display: flex;
  gap: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-lg);
  min-width: var(--control-height-lg);
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.btn-primary {
  /* --accent-deep, not --accent: white text on --accent measures ~2.6:1,
     well under AA, despite this file's own top-of-file doctrine already
     reserving --accent-deep for exactly this case (see command-bar-send,
     .cta-button). --accent-deep measures 5.2:1 dark / 7.6:1 light. */
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #ffffff;
}
.btn-escape {
  background: transparent;
}
/* A real, honest disabled state — Call/Dismiss aren't wired to
   anything yet, and looking identical to a working button is its own
   small dishonesty. Cursor + reduced opacity, never removed from the
   tab order or hidden (Blueprint 03: visible and greyed, never hidden). */
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Consent chip: icon + word + date, never colour alone. */
.consent-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  min-height: 28px;
  padding: 2px var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.consent-chip svg {
  flex: none;
}
.consent-chip[data-status="active"] {
  color: var(--valid);
  border-color: var(--valid);
}
.consent-chip[data-status="attention"] {
  color: var(--attention);
  border-color: var(--attention);
}
.consent-chip[data-status="blocked"] {
  color: var(--blocked);
  border-color: var(--blocked);
}
/* Same chip, reused for the DSR queue's deadline urgency rather than
   consent status — data-urgency keeps the two vocabularies distinct even
   though the visual treatment and semantic colors are shared. */
.consent-chip[data-urgency="ok"] {
  color: var(--valid);
  border-color: var(--valid);
}
.consent-chip[data-urgency="attention"] {
  color: var(--attention);
  border-color: var(--attention);
}
.consent-chip[data-urgency="overdue"] {
  color: var(--blocked);
  border-color: var(--blocked);
}

/* AI marker: outlined badge, never filled — annotates, doesn't decorate. */
.ai-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--space-2);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}
.ai-marker svg {
  flex: none;
  color: var(--steel);
}

/* Blocked banner: names the rule and the remedy, never a bare refusal. */
.blocked-banner {
  border: 1px solid var(--blocked);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface);
}
.blocked-banner .rule {
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
}
.blocked-banner .remedy {
  margin: 0;
  color: var(--ink-muted);
}

/* Locked field: visible and greyed, never hidden. */
.locked-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--ink-muted);
  font-size: 13px;
}

.empty-state {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--ink-muted);
}
.empty-state svg {
  color: var(--steel);
  margin-bottom: var(--space-3);
}
.empty-state p {
  margin: 0;
}

/* Trust badge (privacy page): a real compliance fact — Canadian data
   residency (C-14) — surfaced visually, not a decorative stat. Plain
   inline icon + text, not a bordered box — quieted so it doesn't read
   as a second button next to the real CTA. --valid measures 4.74:1 in
   the light theme, under the 7:1 AAA bar this file targets for newly
   touched UI, so this uses --ink-muted instead (8.1:1 dark / 7.1:1
   light) — the same neutral token already used for the hero subhead
   and every other secondary-text role on this page. */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: var(--space-5);
}
.trust-badge svg {
  flex: none;
}

/* Privacy page (C-10) */
.privacy-section {
  margin-bottom: var(--space-6);
}
.privacy-section h2 {
  font-size: 17px;
  margin-bottom: var(--space-3);
}
.privacy-officer {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.privacy-officer dt {
  color: var(--ink-muted);
}
.privacy-officer dd {
  margin: 0;
}
.subprocessor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.subprocessor-table th,
.subprocessor-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.subprocessor-table th {
  color: var(--ink-muted);
  font-weight: 500;
}

/* Conversation view */
.conversation-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 720px) {
  .conversation-layout {
    grid-template-columns: 1fr;
  }
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bubble {
  max-width: 80%;
  padding: var(--space-3);
  border-radius: var(--radius-bubble);
  border: 1px solid var(--border);
}
.bubble[data-direction="inbound"] {
  background: var(--surface);
  align-self: flex-start;
}
.bubble[data-direction="outbound"] {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  align-self: flex-end;
}
.bubble .timestamp {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

.consent-rail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  position: sticky;
  top: var(--space-4);
}
.consent-rail h2 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3) 0;
}
.consent-rail dl {
  margin: 0;
}
.consent-rail dt {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--space-3);
}
.consent-rail dd {
  margin: var(--space-1) 0 0 0;
  font-size: 14px;
}
@media (max-width: 720px) {
  .consent-rail {
    position: static;
  }
}

.composer {
  margin-top: var(--space-5);
}
.composer textarea {
  width: 100%;
  min-height: 88px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 15px;
  background: var(--surface);
  color: var(--ink);
}
.composer .footer-note {
  font-size: 12px;
  color: var(--ink-muted);
  margin: var(--space-2) 0;
}

/* Command bar (Dashboard): the "Ask AK Teck" input is deliberately
   disabled — no free-text-to-action AI layer exists yet, and a disabled
   input is honest where a fake response would not be. The chips below
   it are real buttons; app.js routes each to either a real scroll
   target or an honest "not available yet" toast — never a canned AI
   reply. */
.command-bar {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  overflow: hidden;
}
/* Ties the command bar to the same "this is the important AI moment"
   visual language as the queue's spotlight card, rather than looking
   like an unrelated search box bolted onto the page. */
.command-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
}
.command-bar-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3) 0;
}

/* A small reusable AI-identity badge — the one recurring visual cue
   that ties every AI touchpoint (command bar, this eyebrow) back to
   the brand accent, instead of a bare icon floating on its own. */
.ai-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  flex: none;
}

.command-bar-input {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ground);
  margin-bottom: var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.command-bar-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.command-bar-input input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
}
.command-bar-input input::placeholder {
  color: var(--ink-muted);
}
.command-bar-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent-deep);
  color: #ffffff;
  flex: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.command-bar-send:hover {
  background: var(--accent-glow);
}
.command-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* Each real chip is its own tiny <form> (so it can POST query_text
   without JS) — display:contents lets the button inside participate in
   the flex-wrap row as if the form weren't there. */
.command-chips form {
  display: contents;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--raised));
}

/* Today-at-a-glance metrics — real, org-scoped counts only. */
.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.metric-icon {
  display: inline-flex;
  color: var(--accent);
}
.metric-value {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.metric-label {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.dashboard-columns {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 860px) {
  .dashboard-columns {
    grid-template-columns: 1fr;
  }
}

.dashboard-sidecol {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.side-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
}
.side-panel h2 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3) 0;
}
.side-panel-empty {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.activity-item {
  border-radius: var(--radius);
  margin: 0 calc(var(--space-2) * -1);
}
.activity-link {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition-fast);
}
.activity-link:hover {
  background: var(--raised);
}
.activity-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--valid);
  flex: none;
}
.activity-item[data-outcome="escalated"] .activity-dot {
  background: var(--blocked);
}
.activity-summary {
  font-size: 13px;
  margin: 0 0 3px 0;
  color: var(--ink);
}
.activity-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.activity-time {
  font-size: 11.5px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.activity-outcome-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
}
.activity-flag {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--blocked);
}

.showings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.showing-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.showing-time {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--accent);
}
.showing-address {
  font-size: 13px;
}

/* Coming-soon pages (section 10): a product-oriented placeholder, not a
   bare "not built" notice — states what the section will do, grounded
   in this codebase's real constraints, without promising anything
   undesigned. */
.coming-soon-state {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  max-width: 480px;
}
.coming-soon-state svg {
  color: var(--steel);
  margin-bottom: var(--space-4);
}
.coming-soon-description {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Leads list: a plain data table + a lightweight search form, the first
   of each in this codebase — kept to the existing token scale rather
   than introducing a new visual language. */
.leads-search {
  display: flex;
  gap: var(--space-2);
  max-width: 420px;
  margin: var(--space-4) 0;
}
.leads-search input {
  flex: 1;
  height: var(--control-height-md);
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th {
  text-align: left;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.data-table tr:last-child td {
  border-bottom: none;
}
.data-table a {
  color: var(--ink);
  text-decoration: none;
}
.data-table a:hover {
  color: var(--accent);
}
.dsr-verify-form {
  display: flex;
  gap: var(--space-2);
}
.settings-section {
  margin: var(--space-6) 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.settings-form {
  margin-top: var(--space-4);
}
.settings-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.settings-inline-add {
  display: flex;
  gap: var(--space-2);
  max-width: 420px;
  margin: var(--space-2) 0 var(--space-3);
}
.settings-inline-add input {
  flex: 1;
  height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--ground);
  color: var(--ink);
  font-size: 13px;
}
.settings-tag-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.approval-content {
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin: var(--space-2) 0;
  white-space: pre-wrap;
}
.approval-meta-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3);
}
.approval-meta-list dt {
  font-weight: 500;
}
.approval-decide-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.approval-decide-form label {
  font-size: 13px;
  color: var(--ink-muted);
}
.approval-decide-form input {
  flex: 1;
  max-width: 320px;
  height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--ground);
  color: var(--ink);
  font-size: 13px;
}
.settings-tag-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px var(--space-2);
  font-size: 13px;
}
.dsr-verify-form input {
  width: 140px;
  height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--ground);
  color: var(--ink);
  font-size: 13px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: 13px;
}
.pagination-status {
  color: var(--ink-muted);
}
.pagination-link {
  color: var(--accent);
  text-decoration: none;
}
.pagination-link[aria-disabled="true"] {
  color: var(--ink-muted);
  pointer-events: none;
}

/* Calendar: a plain server-rendered month grid, no JS calendar library. */
.calendar-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: var(--space-4);
}
.calendar-grid th {
  text-align: left;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.calendar-day {
  vertical-align: top;
  height: 96px;
  padding: var(--space-2);
  border: 1px solid var(--border);
}
.calendar-day.outside-month {
  color: var(--ink-muted);
  background: var(--raised);
}
.calendar-day-number {
  display: block;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}
.calendar-showing {
  display: block;
  font-size: 12px;
  padding: 1px var(--space-1);
  margin-bottom: 2px;
  border-radius: var(--radius);
  border-left: 3px solid var(--steel);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-showing[data-status="requested"] {
  border-left-color: var(--attention);
}
.calendar-showing[data-status="confirmed"] {
  border-left-color: var(--valid);
}
.calendar-showing[data-status="cancelled"] {
  border-left-color: var(--blocked);
  text-decoration: line-through;
}

/* Property microsite builder form. */
.microsite-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 560px;
  margin-top: var(--space-4);
}
.microsite-form label {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: var(--space-3);
}
.microsite-form input,
.microsite-form textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
}

/* The standalone public microsite page — no app-shell chrome. */
.microsite-public {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}
.microsite-price {
  font-size: 20px;
  color: var(--accent);
  font-weight: 500;
}
.microsite-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.microsite-photos img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.microsite-description {
  line-height: 1.7;
  color: var(--ink);
}
.microsite-specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
}
.microsite-specs dt {
  color: var(--ink-muted);
  font-size: 13px;
}

/* Awaiting-activation banner (base.html, authenticated pages only) — see
   .impeccable/surfaces/signup-readiness.md option (b). No new tokens:
   Surface background, the one shared Border colour, Body-sized --ink
   text (comfortably past the 7:1 rule in both themes), and the same
   --accent link colour every other link in the app already uses. Not
   dismissible — it reflects real account state, not a one-time notice. */
.activation-banner {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.activation-banner p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.activation-banner a {
  color: var(--accent);
  margin-left: var(--space-1);
}

.toast {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: 13px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 100;
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* AI Assistant workspace (Phase 3): the 3-column layout — sessions
   drawer, chat thread, context panel. Reuses the same tokens/components
   (--accent, .ai-glyph, .command-bar-send) as the Dashboard's command
   bar rather than a second visual language. */
.assistant-workspace {
  display: grid;
  grid-template-columns: 200px 1fr 260px;
  gap: var(--space-5);
  align-items: start;
  height: calc(100vh - 220px);
  min-height: 480px;
}
@media (max-width: 1024px) {
  .assistant-workspace {
    grid-template-columns: 180px 1fr;
    height: auto;
  }
  .assistant-context {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .assistant-workspace {
    grid-template-columns: 1fr;
  }
}

.assistant-sessions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  overflow-y: auto;
}
.assistant-new-chat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: border-color var(--transition-fast);
}
.assistant-new-chat:hover {
  border-color: var(--accent);
}
.session-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.session-item:hover {
  background: var(--raised);
  color: var(--ink);
}
.session-item.active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.assistant-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.chat-thread .empty-state {
  margin: auto;
  border: none;
}

.chat-message {
  display: flex;
  gap: var(--space-2);
  max-width: 85%;
}
.chat-message[data-role="assistant"] {
  align-self: flex-start;
}
.chat-message[data-role="user"] {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  font-size: 11px;
  font-weight: 600;
}
.chat-avatar-user {
  background: var(--raised);
  color: var(--avatar-text);
}
.chat-avatar-assistant {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.chat-bubble {
  padding: var(--space-3);
  border-radius: var(--radius-bubble);
  border: 1px solid var(--border);
  background: var(--ground);
}
.chat-message[data-role="user"] .chat-bubble {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.chat-bubble p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
}
.chat-timestamp {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.chat-cards {
  list-style: none;
  margin: var(--space-3) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chat-cards a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
}
.chat-cards a:hover {
  border-color: var(--accent);
}
.chat-cards a span {
  color: var(--ink-muted);
  text-align: right;
}
.chat-error {
  align-self: center;
  border: 1px solid var(--blocked);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  color: var(--blocked);
  font-size: 13px;
}

.chat-composer {
  border-top: 1px solid var(--border);
  padding: var(--space-3);
}
.chat-composer-input {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ground);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.chat-composer-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.chat-composer-input input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
}
.chat-composer-input input::placeholder {
  color: var(--ink-muted);
}
.chat-thinking {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0 var(--space-3);
  font-size: 12.5px;
  color: var(--ink-muted);
}
.chat-thinking-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: chat-thinking-pulse 1.1s ease-in-out infinite;
}
.chat-thinking-dot:nth-child(2) {
  animation-delay: 0.15s;
}
.chat-thinking-dot:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes chat-thinking-pulse {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

.assistant-context {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
  height: 100%;
  overflow-y: auto;
}
.assistant-context h2 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3) 0;
}
.context-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.context-cards a {
  display: block;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  transition: border-color var(--transition-fast);
}
.context-cards a:hover {
  border-color: var(--accent);
}
.context-cards a strong {
  display: block;
  margin-bottom: 2px;
}
.context-cards a span {
  color: var(--ink-muted);
}

/* Public pages (landing, capture form) — no authenticated app-shell, just
   the shared design tokens above applied to a simple centred layout. */
.public-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.public-login-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.public-login-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.public-main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
}
.cta-button {
  display: inline-block;
  background: var(--accent-deep);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 0 var(--space-5);
  height: var(--control-height-lg);
  line-height: var(--control-height-lg);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  margin-top: var(--space-4);
}
.hero {
  margin-bottom: var(--space-7);
}
.hero-copy {
  min-width: 0;
}
/* Hero exception (DESIGN.md Typography Hierarchy) — the one heading in
   the system larger than the standard 28px Display step, scoped so it
   never touches the bare h1.display rule the other 15 templates use. */
.hero h1.display {
  font-size: 36px;
}
@media (max-width: 600px) {
  .hero h1.display {
    font-size: 28px;
  }
}

/* Hero visual (desktop only, 900px+): a decorative, non-interactive
   preview built from the real .consent-rail component — the same markup
   and CSS classes conversation.html uses — filled with static, generic
   sample content and tagged "Example" so nobody mistakes it for a real
   client (PRODUCT.md's "never fabricate" principle governs a tagged
   mock the same as a real surface: it must not be mistakable for one).
   Hidden below 900px, where the hero stays the single column it is
   today. aria-hidden since it duplicates no information a screen-reader
   user needs and contains nothing focusable. */
.hero-visual {
  display: none;
}
.hero-visual-tag {
  align-self: flex-start;
  font-size: 13px;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px var(--space-3);
}
.hero-visual-contact {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.hero-visual .consent-rail {
  /* The real component is sticky inside a scrolling conversation layout;
     here it's a static sample with nothing to pin against. */
  position: static;
}
@media (min-width: 900px) {
  .hero {
    /* Bleed wider than the shared 720px .public-main column (style.css
       ~:1804) so the consent-rail visual has room beside the copy — the
       one section on the landing page allowed past 720px. Everything
       below the hero (.pricing, .how-it-works, .promise, the footer)
       stays inside the normal .public-main column, untouched. Fixed
       pixel values, not vw-based, so a vertical scrollbar can never push
       this past the viewport edge: 852px is the widest this can safely
       get at the tightest case in this tier (exactly 900px, where only
       132px of extra room exists before the public-main padding's 24px
       gutter is lost) — margin-left/right of -90px accounts for both
       that bleed and .public-main's own 24px inset. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    column-gap: var(--space-6);
    align-items: center;
    width: 852px;
    margin-left: -90px;
    margin-right: -90px;
  }
  .hero-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
}
@media (min-width: 1240px) {
  .hero {
    /* Past 1240px there's enough room to reach the "about 1080px at
       most" ceiling: 720 (public-main) + 2*180 bleed = 1080px total,
       margin accounts for the same 24px public-main inset as above
       (-180 - 24 = -204). */
    width: 1080px;
    margin-left: -204px;
    margin-right: -204px;
  }
}
.pricing,
.promise {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  margin-top: var(--space-6);
}
/* Subheading token (DESIGN.md Typography Hierarchy) — same role already
   used for .privacy-section h2; these two h2s previously had no rule at
   all and fell to the browser default, reading too close in weight to
   h1.display. */
.pricing h2,
.promise h2,
.how-it-works h2 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
/* Meta token (DESIGN.md Typography Hierarchy), scoped to .pricing only —
   not a bare .meta rule, since settings.html/privacy.html/today.html
   also use class="meta" and must not be affected by this fix. */
.pricing .meta {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-muted);
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-top: var(--space-4);
}
.price {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.price span {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-muted);
}
.promise-list {
  padding-left: var(--space-5);
  color: var(--ink-muted);
}
.promise-list li {
  margin-bottom: var(--space-2);
}
.how-it-works {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  margin-top: var(--space-6);
}
.how-it-works-list {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.how-it-works-list li {
  font-size: 15px;
  color: var(--ink-muted);
}
.how-it-works-title {
  margin: 0 0 var(--space-1) 0;
  color: var(--ink);
  font-weight: 600;
}
.how-it-works-list p:last-child {
  margin: 0;
}
.public-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-muted);
}
.public-footer a {
  color: var(--ink);
  text-decoration: none;
}
.public-footer a:hover,
.public-footer a:focus-visible {
  color: var(--accent);
}
@media (max-width: 600px) {
  .public-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.capture-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.capture-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.capture-form label {
  font-weight: 500;
  margin-top: var(--space-3);
}
.capture-form input[type="text"],
.capture-form input[type="email"] {
  height: var(--control-height-md);
  padding: 0 var(--space-3);
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}
.consent-checkbox {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 13px;
}
.consent-checkbox input {
  margin-top: 3px;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  max-width: 380px;
  margin: 0 auto;
}
.auth-switch {
  margin-top: var(--space-5);
  color: var(--ink-muted);
  font-size: 14px;
}
.form-error {
  background: color-mix(in srgb, var(--blocked) 12%, transparent);
  color: var(--blocked);
  border: 1px solid var(--blocked);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin: var(--space-4) 0 0;
  font-size: 14px;
}