/* The client desk. Served from /banking-academy/static/client.css, loaded AFTER
   portal.css on client pages only; the operator portal never loads it.

   HOW THE RE-SKIN WORKS
   The client templates were written in Tailwind's zinc/amber classes on a
   dark ground. Rather than rewrite every class on every page -- and leave the
   pages nobody touched looking like the old desk -- the head partial points
   Tailwind's zinc, amber, red, emerald, blue and sky scales at the CSS
   variables below. The class names keep their ROLE (zinc-950 is the page,
   zinc-900 a card, zinc-100 primary text, amber-500 the one primary fill) and
   the variables decide what that role looks like in each theme.

   So: never use a zinc/amber class for a different role than the one listed
   here, or it will look right in one theme and wrong in the other.

     zinc-950  page ground           zinc-900  card surface
     zinc-800  hairline / hover      zinc-700  strong border
     zinc-600  border only           zinc-500  faint text (still >= 4.5:1)
     zinc-400  muted text            zinc-300  secondary text
     zinc-200  strong text           zinc-100  primary text
     amber-500 accent fill           amber-400 accent as text/link
     amber-300 warning text          amber-200 warning text (strong)

   Every text role clears 4.5:1 on both the ground and a card, in both themes.
   The accent variables (--acc*) are written per client by client_theme.py. */

:root {
  color-scheme: light;
  --z50: 10 14 21;
  --z100: 17 23 34;
  --z200: 40 48 64;
  --z300: 59 68 84;
  --z400: 86 96 114;
  --z500: 98 108 124;
  --z600: 170 178 190;
  --z700: 211 216 224;
  --z800: 232 235 240;
  --z900: 255 255 255;
  --z950: 245 246 248;
  /* Form-field outline: >= 3:1 on page and card (WCAG 1.4.11), in both themes. */
  --field: 134 143 157;

  --warn: 138 82 0;
  --warn-soft: 214 138 0;
  --bad: 180 35 24;
  --bad-soft: 217 45 32;
  --good: 6 118 71;
  --good-soft: 18 183 106;
  --info: 29 78 216;
  --info-soft: 46 107 230;

  --shadow-card: 0 1px 2px rgb(15 23 34 / .04), 0 1px 1px rgb(15 23 34 / .03);
  --shadow-lift: 0 1px 2px rgb(15 23 34 / .05), 0 8px 24px -8px rgb(15 23 34 / .12);
  --radius: 14px;

  /* Fallback accent, in case the per-client <style> is missing. */
  --acc: 36 71 127; --acc-fg: 255 255 255; --acc-hover: 31 61 109;
  --acc-text: 36 71 127; --acc-soft: 36 71 127;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --z50: 247 249 251;
    --z100: 238 241 245;
    --z200: 221 226 232;
    --z300: 196 203 213;
    --z400: 164 173 186;
    --z500: 150 160 173;
    --z600: 61 70 83;
    --z700: 43 51 62;
    --z800: 29 35 44;
    --z900: 18 22 29;
    --z950: 11 14 19;
    --field: 98 110 125;

    --warn: 245 196 107;
    --warn-soft: 245 196 107;
    --bad: 252 165 165;
    --bad-soft: 239 68 68;
    --good: 110 231 183;
    --good-soft: 16 185 129;
    --info: 147 197 253;
    --info-soft: 96 165 250;

    --shadow-card: 0 0 0 1px rgb(255 255 255 / .02);
    --shadow-lift: 0 0 0 1px rgb(255 255 255 / .03), 0 12px 32px -12px rgb(0 0 0 / .6);
  }
}

/* ── Base ─────────────────────────────────────────────────────────────── */

.cx {
  background: rgb(var(--z950));
  color: rgb(var(--z100));
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cx h1, .cx h2, .cx h3 { text-wrap: balance; letter-spacing: -0.012em; }
.cx .tabular-nums, .cx .num { font-variant-numeric: tabular-nums; }

/* portal.css paints these for the dark operator portal. */
.cx a:focus-visible, .cx button:focus-visible, .cx input:focus-visible,
.cx select:focus-visible, .cx textarea:focus-visible, .cx summary:focus-visible,
.cx [tabindex]:focus-visible {
  box-shadow: 0 0 0 2px rgb(var(--z900)), 0 0 0 4px rgb(var(--acc-text));
}
.cx .skip-link { background: rgb(var(--z100)); color: rgb(var(--z900)); }
/* Every text-like field gets an outline that is visible against page and card. Focus keeps
   its own accent border; checkboxes and radios are drawn by the browser. */
.cx :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=submit]):not([type=button]), select, textarea):not(:focus) {
  border-color: rgb(var(--field));
}
.cx ::-webkit-scrollbar-track { background: transparent; }
.cx ::-webkit-scrollbar-thumb { background: rgb(var(--z700)); border-radius: 8px; }
.cx ::-webkit-scrollbar-thumb:hover { background: rgb(var(--z600)); }

/* Any element filled with the accent carries the accent's own text colour,
   whatever text class the template gave it -- a pale brand colour needs ink,
   a deep one needs white, and client_theme.py decided which. */
.cx .bg-amber-500 { color: rgb(var(--acc-fg)); }
.cx .bg-amber-500:hover, .cx .hover\:bg-amber-400:hover { background: rgb(var(--acc-hover)); }

/* ── Shell ────────────────────────────────────────────────────────────── */

.cx-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 1024px) {
  /* The sidebar's paint is drawn on the grid itself, so the column stays
     filled below the first screen whatever the page height. */
  .cx-shell {
    grid-template-columns: 17rem minmax(0, 1fr);
    background: linear-gradient(90deg, rgb(var(--z900)) 0 calc(17rem - 1px),
                                rgb(var(--z800)) calc(17rem - 1px) 17rem, transparent 17rem);
  }
}
.cx-side {
  display: none;
  position: sticky; top: 0; height: 100vh;
  flex-direction: column;
  border-right: 1px solid rgb(var(--z800));
  background: rgb(var(--z900));
}
@media (min-width: 1024px) { .cx-side { display: flex; } }

.cx-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  height: 3.75rem; padding: 0 1rem;
  background: rgb(var(--z900) / .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgb(var(--z800));
}
/* Native skip-link navigation must leave the main content below the sticky
   phone/tablet header, including when JavaScript is unavailable. */
.cx #main { scroll-margin-top: 3.75rem; }
@media (min-width: 1024px) {
  .cx-top { display: none; }
  .cx #main { scroll-margin-top: 0; }
}

.cx-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cx-mark {
  flex: none; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 10px;
  background: rgb(var(--acc)); color: rgb(var(--acc-fg));
  font-weight: 700; font-size: .8125rem; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06);
}
.cx-mark.lg { width: 3.5rem; height: 3.5rem; border-radius: 16px; font-size: 1.125rem; }
.cx-logo { flex: none; height: 2.25rem; width: auto; max-width: 8.5rem; object-fit: contain; }
.cx-logo-picture { display: block; flex: none; }
.cx-logo.lg { height: 3.5rem; max-width: 12rem; }
.cx-client { font-weight: 650; font-size: .9375rem; line-height: 1.2; color: rgb(var(--z100));
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-product { font-size: .75rem; color: rgb(var(--z400)); line-height: 1.2; }

.cx-nav { display: flex; flex-direction: column; gap: 1.25rem; padding: 1rem .75rem; overflow-y: auto; }
.cx-nav-group > p {
  padding: 0 .75rem .375rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgb(var(--z500));
}
.cx-nav a {
  display: flex; align-items: center; gap: .625rem;
  min-height: 2.5rem; padding: 0 .75rem; border-radius: 10px;
  font-size: .875rem; font-weight: 500; color: rgb(var(--z300));
}
.cx-nav a:hover { background: rgb(var(--z800) / .7); color: rgb(var(--z100)); }
.cx-nav a[aria-current="page"] {
  background: rgb(var(--acc-soft) / .10); color: rgb(var(--acc-text)); font-weight: 600;
}
.cx-nav a svg { width: 1.125rem; height: 1.125rem; flex: none; opacity: .85; }
.cx-nav .cx-count {
  margin-left: auto; min-width: 1.375rem; height: 1.375rem; padding: 0 .375rem;
  display: inline-grid; place-items: center; border-radius: 999px;
  font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums;
  background: rgb(var(--acc)); color: rgb(var(--acc-fg));
}

/* Phone / tablet sheet. Same links as the sidebar. */
.cx-sheet {
  position: fixed; inset: 3.75rem 0 0 0; z-index: 29;
  background: rgb(var(--z900)); overflow-y: auto;
  border-top: 1px solid rgb(var(--z800));
}
.cx-sheet.closed { display: none; }
@media (min-width: 1024px) { .cx-sheet, .cx-sheet.closed { display: none; } }
.cx-sheet .cx-nav a { min-height: 2.875rem; font-size: 1rem; }

.cx-main { min-width: 0; display: flex; flex-direction: column; }
.cx-page { width: 100%; max-width: 76rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
@media (min-width: 640px) { .cx-page { padding: 2rem 1.5rem 3.5rem; } }
@media (min-width: 1024px) { .cx-page { padding: 2.5rem 2.5rem 4rem; } }
.cx-stack > * + * { margin-top: 1.5rem; }
@media (min-width: 1024px) { .cx-stack > * + * { margin-top: 2rem; } }

.cx-foot {
  margin-top: auto; border-top: 1px solid rgb(var(--z800));
  padding: 1rem; font-size: .75rem; color: rgb(var(--z400));
}

/* ── Surfaces ─────────────────────────────────────────────────────────── */

.cx-card {
  background: rgb(var(--z900)); border: 1px solid rgb(var(--z800));
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.cx-card-h {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid rgb(var(--z800));
}
.cx-card-h h2 { font-size: .9375rem; font-weight: 650; color: rgb(var(--z100)); }
@media (max-width: 639px) { .cx-card-h { padding-left: 1rem; padding-right: 1rem; } }

.cx-eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgb(var(--z400));
}
.cx-h1 { font-size: 1.625rem; line-height: 1.2; font-weight: 700; color: rgb(var(--z100)); }
@media (min-width: 1024px) { .cx-h1 { font-size: 2rem; } }
.cx-lede { font-size: .9375rem; line-height: 1.6; color: rgb(var(--z300)); max-width: 62ch; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.cx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.5rem; padding: 0 1rem; border-radius: 10px;
  font-size: .875rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.cx-btn:active { transform: translateY(1px); }
.cx-btn svg { width: 1rem; height: 1rem; flex: none; }
.cx-btn-primary { background: rgb(var(--acc)); color: rgb(var(--acc-fg)); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.cx-btn-primary:hover { background: rgb(var(--acc-hover)); }
/* Border is the field token (>= 3:1 on cards in both themes); z700 was 1.43:1. */
.cx-btn-quiet { background: rgb(var(--z900)); color: rgb(var(--z100)); border-color: rgb(var(--field)); }
.cx-btn-quiet:hover { background: rgb(var(--z800)); }
.cx-btn-lg { height: 3rem; padding: 0 1.375rem; font-size: .9375rem; border-radius: 12px; }
@media (max-width: 639px) { .cx-btn { min-height: 44px; } }

/* The mark pair. Interested is the positive choice and says so; Not relevant
   is quiet. Side by side, never stacked -- stacking doubled every row. */
.cx-mark-pair { display: inline-flex; gap: .375rem; flex-wrap: nowrap; }
.cx-mk {
  display: inline-flex; align-items: center; gap: .375rem;
  height: 2.25rem; padding: 0 .75rem; border-radius: 9px;
  font-size: .8125rem; font-weight: 600; white-space: nowrap;
  border: 1px solid rgb(var(--field)); background: rgb(var(--z900)); color: rgb(var(--z200));
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cx-mk svg { width: .9375rem; height: .9375rem; flex: none; }
.cx-mk:hover { background: rgb(var(--z800)); color: rgb(var(--z100)); }
.cx-mk-yes { border-color: rgb(var(--acc-text) / .45); color: rgb(var(--acc-text)); }
.cx-mk-yes:hover { background: rgb(var(--acc)); border-color: rgb(var(--acc)); color: rgb(var(--acc-fg)); }
.cx-mk-lg { height: 3rem; padding: 0 1.25rem; font-size: .9375rem; border-radius: 12px; }
@media (max-width: 639px) { .cx-mk { height: 2.75rem; } }

/* ── Status pills (text + dot: colour is never the only carrier) ──────── */

.cx .bdg { border-radius: 999px; padding: .1875rem .625rem; font-weight: 600; font-size: .75rem; }
.cx .bdg-amber   { color: rgb(var(--warn)); border-color: rgb(var(--warn-soft) / .35); background: rgb(var(--warn-soft) / .10); }
.cx .bdg-blue    { color: rgb(var(--acc-text)); border-color: rgb(var(--acc-text) / .30); background: rgb(var(--acc-soft) / .08); }
.cx .bdg-emerald { color: rgb(var(--good)); border-color: rgb(var(--good-soft) / .35); background: rgb(var(--good-soft) / .10); }
.cx .bdg-red     { color: rgb(var(--bad)); border-color: rgb(var(--bad-soft) / .35); background: rgb(var(--bad-soft) / .08); }
.cx .bdg-zinc    { color: rgb(var(--z300)); border-color: rgb(var(--z700)); background: rgb(var(--z800) / .6); }

/* ── Shared primitives from portal.css, re-pointed at the tokens ─────── */

.cx .hcell { color: rgb(var(--z400)); font-weight: 600; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; padding: .75rem 1rem; }
.cx .cell { padding: .875rem 1rem; }
.cx .cell-r, .cx .tv, .cx .dd, .cx .clamp3 { color: rgb(var(--z100)); }
.cx .mut, .cx .dt { color: rgb(var(--z400)); }
.cx .lnk { color: rgb(var(--acc-text)); font-size: .8125rem; }
.cx .lnk:hover { color: rgb(var(--acc-text)); text-decoration: underline; text-underline-offset: 2px; }
.cx .btn-ghost, .cx .btn-row, .cx .mark-btn {
  border-color: rgb(var(--z700)); color: rgb(var(--z100)); background: rgb(var(--z900));
}
.cx .btn-ghost:hover, .cx .btn-row:hover, .cx .mark-btn:hover { background: rgb(var(--z800)); }
.cx .cb { accent-color: rgb(var(--acc)); }
.cx .portal-table thead th { background: rgb(var(--z900)); border-bottom: 1px solid rgb(var(--z800)); }
.cx .preview-bar { background: rgb(var(--warn-soft) / .12); border-bottom: 1px solid rgb(var(--warn-soft) / .35); }

/* Lead table. The action column stays pinned to the right edge (see the note
   in portal.css); only its paint changes. */
.cx .lead-table tbody tr { transition: background-color 100ms ease; }
.cx .lead-table tbody tr:hover { background: rgb(var(--z950)); }
.cx .lead-table tbody tr:hover .lead-actions { background: rgb(var(--z950)); }
.cx .lead-table .lead-actions {
  background: rgb(var(--z900));
  box-shadow: -10px 0 10px -10px rgb(15 23 34 / .18);
  white-space: nowrap;
}
.cx .lead-table .lead-name { color: rgb(var(--z100)); font-weight: 600; }
.cx .lead-table .lead-company { min-width: 12rem; max-width: 17rem; }
.cx .lead-table .lead-why { min-width: 15rem; max-width: 24rem; }
.cx .lead-table .lead-contact { min-width: 14rem; max-width: 17rem; }
.cx .lead-table .lead-contact .mut { white-space: normal; overflow-wrap: anywhere; }
.cx .lead-table .lead-name:hover { color: rgb(var(--acc-text)); }

/* ── Home ─────────────────────────────────────────────────────────────── */

.cx-progress { height: .5rem; border-radius: 999px; background: rgb(var(--z800)); overflow: hidden; }
.cx-progress > span { display: block; height: 100%; border-radius: inherit; background: rgb(var(--acc)); min-width: .5rem; }
.cx-progress.zero > span { background: rgb(var(--z600)); }
/* Width by class, not a style attribute (CSP); 5% steps. */
.cx-progress > span.w-pct-0 { width: 0%; }
.cx-progress > span.w-pct-5 { width: 5%; }
.cx-progress > span.w-pct-10 { width: 10%; }
.cx-progress > span.w-pct-15 { width: 15%; }
.cx-progress > span.w-pct-20 { width: 20%; }
.cx-progress > span.w-pct-25 { width: 25%; }
.cx-progress > span.w-pct-30 { width: 30%; }
.cx-progress > span.w-pct-35 { width: 35%; }
.cx-progress > span.w-pct-40 { width: 40%; }
.cx-progress > span.w-pct-45 { width: 45%; }
.cx-progress > span.w-pct-50 { width: 50%; }
.cx-progress > span.w-pct-55 { width: 55%; }
.cx-progress > span.w-pct-60 { width: 60%; }
.cx-progress > span.w-pct-65 { width: 65%; }
.cx-progress > span.w-pct-70 { width: 70%; }
.cx-progress > span.w-pct-75 { width: 75%; }
.cx-progress > span.w-pct-80 { width: 80%; }
.cx-progress > span.w-pct-85 { width: 85%; }
.cx-progress > span.w-pct-90 { width: 90%; }
.cx-progress > span.w-pct-95 { width: 95%; }
.cx-progress > span.w-pct-100 { width: 100%; }

.cx-person { display: flex; align-items: center; gap: .875rem; }
.cx-avatar { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-items: center;
  background: rgb(var(--z800)); color: rgb(var(--z200)); font-weight: 700; font-size: .875rem; }

.cx details > summary { cursor: pointer; list-style: none; }
.cx details > summary::-webkit-details-marker { display: none; }

/* ── Review mode ──────────────────────────────────────────────────────── */

.cx-review { max-width: 46rem; margin: 0 auto; }
.cx-review-card { border-radius: calc(var(--radius) + 6px); border: 1px solid rgb(var(--z800));
  background: rgb(var(--z900)); box-shadow: var(--shadow-lift); }
.cx-kbd { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .3rem;
  border-radius: 6px; border: 1px solid rgb(var(--z700)); background: rgb(var(--z950));
  font: 600 .75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(var(--z400)); }

/* ── Login ────────────────────────────────────────────────────────────── */

.cx-login { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .cx-login { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.cx-login-art {
  display: none; position: relative; overflow: hidden;
  background: rgb(var(--acc)); color: rgb(var(--acc-fg));
}
@media (min-width: 1024px) { .cx-login-art { display: flex; flex-direction: column; justify-content: space-between; padding: 3rem; } }
.cx-login-art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--acc-fg) / .08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--acc-fg) / .08) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(90% 80% at 80% 20%, #000, transparent 75%);
          mask-image: radial-gradient(90% 80% at 80% 20%, #000, transparent 75%);
}
.cx-login-art > * { position: relative; }
.cx-login-art .cx-mark { background: rgb(var(--acc-fg)); color: rgb(var(--acc)); }
.cx-input {
  width: 100%; height: 3rem; padding: 0 1rem; border-radius: 12px;
  background: rgb(var(--z900)); border: 1px solid rgb(var(--z700)); color: rgb(var(--z100));
  font-size: 1rem; letter-spacing: .02em;
}
.cx-input:focus { outline: none; border-color: rgb(var(--acc-text)); box-shadow: 0 0 0 4px rgb(var(--acc-soft) / .15); }

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

/* ── Pages written before the revamp ─────────────────────────────────────
   The branch pages (Team, Wording, Requests, Assistant, Replies, Sending,
   Mailbox) filled their fields with zinc-800 and their secondary buttons with
   zinc-700: quiet on the old dark ground, heavy and "disabled-looking" on the
   light one. These rules restyle them by role, so every page shares one form
   language without its template being rewritten. */
.cx input.bg-zinc-800, .cx textarea.bg-zinc-800, .cx select.bg-zinc-800,
.cx input.bg-zinc-950, .cx textarea.bg-zinc-950, .cx select.bg-zinc-950 {
  background: rgb(var(--z900)); border-color: rgb(var(--z700)); border-radius: 10px;
}
.cx input.bg-zinc-800:focus, .cx textarea.bg-zinc-800:focus, .cx select.bg-zinc-800:focus,
.cx input.bg-zinc-950:focus, .cx textarea.bg-zinc-950:focus, .cx select.bg-zinc-950:focus {
  border-color: rgb(var(--acc-text)); box-shadow: 0 0 0 4px rgb(var(--acc-soft) / .15);
}
.cx button.bg-zinc-700, .cx a.bg-zinc-700, .cx button.bg-zinc-800, .cx a.bg-zinc-800 {
  background: rgb(var(--z900)); border: 1px solid rgb(var(--z700)); color: rgb(var(--z100)); border-radius: 10px; font-weight: 600;
}
.cx button.bg-zinc-700:hover, .cx a.bg-zinc-700:hover, .cx button.bg-zinc-800:hover, .cx a.bg-zinc-800:hover {
  background: rgb(var(--z800));
}
.cx button.bg-amber-500, .cx a.bg-amber-500 { border-radius: 10px; font-weight: 600; }
.cx main h1.text-xl { font-size: 1.625rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.012em; }
@media (min-width: 1024px) { .cx main h1.text-xl { font-size: 2rem; } }
.cx main h1.text-xl + p { font-size: .9375rem; line-height: 1.6; max-width: 70ch; }

/* ── Feedback after an action ─────────────────────────────────────────── */
/* Phones: under the top bar, not at the bottom. At the bottom it sat over the
   review screen's Interested button -- the very next thing the thumb reaches
   for -- for twelve seconds. Laptops: bottom right, away from the content. */
.cx-toast-region { position: fixed; z-index: 50; left: .75rem; right: .75rem; top: 4.25rem;
  display: flex; justify-content: center; pointer-events: none; }
@media (min-width: 1024px) { .cx-toast-region { top: auto; left: auto; right: 1.5rem; bottom: 1.5rem; justify-content: flex-end; } }
.cx-toast { pointer-events: auto; display: flex; align-items: center; gap: .75rem; width: 100%; max-width: 30rem;
  padding: .875rem 1rem; border-radius: 14px; font-size: .875rem; line-height: 1.4;
  background: rgb(var(--z900)); border: 1px solid rgb(var(--z700)); box-shadow: var(--shadow-lift);
  animation: cx-toast-in 180ms ease-out; }
.cx-toast-ic { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: rgb(var(--z800)); color: rgb(var(--z300)); }
.cx-toast-good .cx-toast-ic { background: rgb(var(--good-soft) / .14); color: rgb(var(--good)); }
.cx-toast-error { border-color: rgb(var(--bad) / .45); }
.cx-toast-x { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; color: rgb(var(--z400)); }
.cx-toast-x:hover { background: rgb(var(--z800)); color: rgb(var(--z100)); }
@media (max-width: 639px) { .cx-toast-x { width: 2.75rem; height: 2.75rem; } }
@keyframes cx-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── First-visit welcome, help, plain-words page intros ───────────────── */
.cx-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .8125rem; color: rgb(var(--z300)); }
.cx-legend span { display: inline-flex; align-items: center; gap: .5rem; }
/* ════════════════════════════════════════════════════════════════════════
   PREMIUM LAYER (round 5). Typeface, scale and depth. Loaded last so it
   refines the rules above rather than competing with them.
   ════════════════════════════════════════════════════════════════════════ */

/* Geist, self-hosted (static/fonts, OFL): the official variable release from
   Vercel's `geist` package, one file per family covering every weight. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/banking-academy/static/fonts/Geist-Variable.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/banking-academy/static/fonts/GeistMono-Variable.woff2") format("woff2"); }

:root {
  --font-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Depth in three layers: a hairline, a contact shadow, and a long soft one. */
  --shadow-card: 0 0 0 1px rgb(15 23 34 / .035), 0 1px 2px rgb(15 23 34 / .05), 0 4px 12px -4px rgb(15 23 34 / .06);
  --shadow-lift: 0 0 0 1px rgb(15 23 34 / .04), 0 2px 4px rgb(15 23 34 / .05), 0 16px 40px -12px rgb(15 23 34 / .18);
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-card: 0 0 0 1px rgb(255 255 255 / .03), inset 0 1px 0 rgb(255 255 255 / .03);
    --shadow-lift: 0 0 0 1px rgb(255 255 255 / .05), inset 0 1px 0 rgb(255 255 255 / .04), 0 24px 48px -16px rgb(0 0 0 / .7);
  }
}

.cx {
  font-family: var(--font-sans);
  font-feature-settings: normal;
  font-size: 15px;
  /* Geist is spaced for reading at text sizes; tracking is tightened only on
     display type below. Negative tracking on body text made small bold words
     collide ("Tiong" read as "Tlong"). */
  letter-spacing: 0;
  /* A barely-there wash so the page ground is not flat grey. */
  background:
    radial-gradient(1200px 600px at 85% -10%, rgb(var(--acc-soft) / .05), transparent 60%),
    rgb(var(--z950));
  background-attachment: fixed;
}
.cx .font-mono, .cx .lnk-m, .cx code, .cx kbd, .cx .cx-kbd { font-family: var(--font-mono); letter-spacing: 0; }
.cx h1, .cx h2, .cx h3 { letter-spacing: -0.022em; }

/* Type scale: one display size, one title size, then the body scale. */
.cx-h1 { font-size: 1.875rem; line-height: 1.12; font-weight: 600; letter-spacing: -0.032em; }
@media (min-width: 1024px) { .cx-h1 { font-size: 2.5rem; } }
.cx main h1.text-xl { font-size: 1.875rem; line-height: 1.12; font-weight: 600; letter-spacing: -0.032em; }
@media (min-width: 1024px) { .cx main h1.text-xl { font-size: 2.5rem; } }
.cx-lede { font-size: 1rem; line-height: 1.6; }
.cx-eyebrow { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; }
.cx-card-h h2 { font-size: .9375rem; font-weight: 600; letter-spacing: -0.012em; }
.cx section > h2.text-lg, .cx section h2.text-lg { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.024em; }

/* Numbers set like a financial report: tabular, tight, a touch heavier. */
/* Surfaces: hairline border via shadow, a highlight along the top edge. */
.cx-card, .cx-review-card {
  border-color: rgb(var(--z800) / .9);
}
.cx-card, .cx-review-card { box-shadow: var(--shadow-card); }
.cx-review-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .9), transparent);
}
.cx-review-card { position: relative; }
@media (prefers-color-scheme: dark) {
  .cx-review-card::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .12), transparent); }
}

/* Buttons: a soft top light and a crisp edge on the primary; quiet buttons
   read as physical keys, not outlines. */
.cx-btn { font-weight: 550; letter-spacing: 0; border-radius: 11px; }
.cx-btn-primary {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(255 255 255 / 0) 55%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 0 0 1px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .12), 0 4px 10px -4px rgb(var(--acc) / .45);
}
.cx-btn-primary:hover { background-image: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / 0) 55%); }
.cx-btn-quiet { box-shadow: 0 1px 2px rgb(15 23 34 / .06), inset 0 -1px 0 rgb(15 23 34 / .04); }
.cx-mk { font-weight: 550; border-radius: 10px; box-shadow: 0 1px 2px rgb(15 23 34 / .05); }
@media (prefers-color-scheme: dark) {
  .cx-btn-quiet, .cx-mk { box-shadow: inset 0 1px 0 rgb(255 255 255 / .04); }
}

/* Sidebar: brand block with more presence; active item as a raised tab. */
.cx-mark { border-radius: 11px; font-family: var(--font-sans); font-weight: 650; letter-spacing: -0.01em;
  background-image: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0)); }
.cx-client { font-weight: 600; letter-spacing: -0.014em; }
.cx-nav a { font-weight: 500; letter-spacing: 0; }
.cx-nav a[aria-current="page"] { background: rgb(var(--z900)); color: rgb(var(--z100));
  box-shadow: 0 0 0 1px rgb(var(--z800)), 0 1px 2px rgb(15 23 34 / .06); }
.cx-nav a[aria-current="page"] svg { color: rgb(var(--acc-text)); opacity: 1; }
.cx-side { background: rgb(var(--z950) / .6); }
@media (min-width: 1024px) {
  .cx-shell { background: linear-gradient(90deg, rgb(var(--z950)) 0 calc(17rem - 1px),
                                           rgb(var(--z800)) calc(17rem - 1px) 17rem, transparent 17rem); }
}
.cx-nav-group > p { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; font-weight: 500; }

/* Pills: slimmer, with the dot doing the colour work. */
.cx .bdg { font-weight: 550; letter-spacing: 0; }

/* Inputs: calm at rest, clearly alive on focus. */
.cx-input, .cx input.bg-zinc-800, .cx textarea.bg-zinc-800, .cx input.bg-zinc-950, .cx textarea.bg-zinc-950, .cx input[type="search"] {
  box-shadow: inset 0 1px 2px rgb(15 23 34 / .04);
}

/* Table: airier rows, a header set in small caps of the mono. */
.cx .hcell { font-family: var(--font-mono); font-weight: 500; font-size: .75rem; letter-spacing: .12em; }
.cx .cell { padding-top: 1rem; padding-bottom: 1rem; }

/* Workspace rhythm: a quiet orientation line, then the task at hand. */
.cx-workspace-bar {
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4rem; padding: 0 2.5rem; border-bottom: 1px solid rgb(var(--z800));
  color: rgb(var(--z400)); font-size: .8125rem;
}
.cx-workspace-bar ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.cx-workspace-bar li + li::before { content: "/"; padding: 0 .75rem; color: rgb(var(--z500)); }
.cx-workspace-bar a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 550; color: rgb(var(--z200)); }
.cx-workspace-bar a:hover { color: rgb(var(--acc-text)); }
@media (min-width: 1024px) { .cx-workspace-bar { display: flex; } }
.cx-menu-open { overflow: hidden; }
.cx-review-form { position: relative; }
.cx-review-dock {
  position: sticky; bottom: 1rem; z-index: 20; margin: 1rem 0 0;
  padding: 1rem 1.25rem .5rem; border: 1px solid rgb(var(--z700));
  border-radius: var(--radius); background: rgb(var(--z900));
  box-shadow: 0 -4px 20px rgb(15 23 34 / .04), var(--shadow-lift);
}
.cx-review-reassurance { margin-bottom: .75rem; text-align: center; color: rgb(var(--z300)); font-size: .8125rem; }
.cx-review-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cx-review-dock-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: rgb(var(--z400)); font-size: .75rem; }
.cx-review-dock-foot a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: .8125rem; font-weight: 550; color: rgb(var(--acc-text)); }
.cx-review-dock-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cx-review-dock button { min-width: 0; padding-left: .75rem; padding-right: .75rem; }
.cx-review-card { scroll-margin-bottom: 12rem; }
.cx-review-card textarea { scroll-margin-bottom: 12rem; }
.cx [data-approve-draft]:disabled {
  background: rgb(var(--z800)); color: rgb(var(--z400)); box-shadow: none;
  cursor: not-allowed; border: 1px solid rgb(var(--z700));
}
.cx-draft-unsaved .cx-draft-save-note { color: rgb(var(--warn)); }
.cx-approved-email summary { cursor: pointer; border-radius: inherit; border-bottom: 0; }
.cx-approved-email[open] summary { border-bottom: 1px solid rgb(var(--z800)); }
.cx-approved-email[open] summary svg:last-child { transform: rotate(90deg); }
@media (max-width: 639px) {
  .cx-review-dock { bottom: .5rem; padding: .875rem .875rem max(.375rem, env(safe-area-inset-bottom)); }
  .cx-review-dock .cx-btn-lg, .cx-review-dock .cx-mk-lg { font-size: .875rem; height: 48px; }
  .cx-review-dock-foot { font-size: .75rem; }
  .cx-review-dock-foot a { font-size: .75rem; }
  .cx-send-summary .text-2xl { font-size: 1.25rem; overflow-wrap: anywhere; }
  /* Sixteen-pixel fields avoid automatic focus zoom on iPhones. */
  .cx input:not([type="checkbox"]):not([type="hidden"]), .cx select, .cx textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx *, .cx *::before, .cx *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Company briefs: readable evidence, a clear first message and a useful rail. */
.cx-company-profile { min-width: 0; }
.cx-brief-breadcrumb { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; font-size:.8125rem; color:rgb(var(--z400)); }
.cx-brief-breadcrumb > a { margin-right:auto; }
.cx-brief-breadcrumb a { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; color:rgb(var(--acc-text)); }
.cx-brief-breadcrumb > div { display:flex; gap:.25rem; }
.cx-brief-breadcrumb > div a { justify-content:center; min-width:44px; border:1px solid transparent; border-radius:4px; }
.cx-brief-breadcrumb > div a:hover,.cx-brief-breadcrumb > div a:focus-visible { border-color:rgb(var(--z700)); background:rgb(var(--z900)); }
.cx-brief-breadcrumb svg { width:1rem; height:1rem; }
.cx-company-hero { position:relative; overflow:hidden; border-radius:12px; padding:2.25rem; background:rgb(var(--acc)); color:rgb(var(--acc-fg)); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.cx-company-hero-copy { max-width:45rem; min-width:0; z-index:1; }
.cx-brief-kicker { font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; opacity:.82; margin-bottom:1rem; }
.cx-company-hero h1 { color:inherit; font-size:clamp(1.85rem,3vw,3rem); line-height:1.18; overflow-wrap:anywhere; }
.cx-company-meta { font-size:.875rem; line-height:1.7; margin-top:1.125rem; opacity:.9; }
.cx-company-meta span { padding:0 .5rem; opacity:.55; }
.cx-company-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.75rem; }
.cx-company-hero-actions a { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.5rem 1rem; background:rgb(var(--acc-fg)); color:rgb(var(--acc)); font-size:.8125rem; font-weight:600; border-radius:4px; }
.cx-company-hero-actions a.cx-company-hero-quiet { background:transparent; color:inherit; padding-inline:.25rem; }
.cx-company-hero-actions svg { width:1rem; height:1rem; }
.cx-company-seal { position:relative; flex:none; display:grid; place-items:center; width:8.5rem; height:8.5rem; border:1px solid currentColor; border-radius:50%; opacity:.3; font-family:var(--font-display,serif); font-size:4rem; }
.cx-company-seal:before,.cx-company-seal:after { content:""; position:absolute; inset:-.6rem; border:1px solid currentColor; border-radius:50%; }
.cx-company-seal:after { inset:-1.3rem; opacity:.45; }
.cx-brief-sections { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem 1.25rem; padding:1rem 0; margin-bottom:1.5rem; border-bottom:1px solid rgb(var(--z700)); }
.cx-brief-sections a { display:inline-flex; align-items:center; min-height:44px; font-size:.8125rem; font-weight:600; color:rgb(var(--z300)); }
.cx-brief-sections a:hover { color:rgb(var(--acc-text)); }
.cx-brief-sections > span { margin-left:auto; }
.cx-brief-layout { display:grid; grid-template-columns:minmax(0,1fr) 18rem; grid-template-areas:"why contact" "draft rail" "outreach rail" "decision rail"; align-items:start; gap:1.5rem; }
.cx-brief-layout > #why-this-lead { grid-area:why; }
.cx-brief-layout > #contact { grid-area:contact; }
.cx-brief-layout > #message-draft { grid-area:draft; }
.cx-brief-layout > #outreach { grid-area:outreach; }
.cx-brief-layout > #decision { grid-area:decision; }
.cx-brief-rail { grid-area:rail; display:flex; flex-direction:column; gap:1.5rem; min-width:0; }
.cx-company-profile section { scroll-margin-top:5rem; min-width:0; }
.cx-brief-section-title { padding:1.5rem 1.75rem; border-bottom:1px solid rgb(var(--z800)); }
.cx-brief-section-title .cx-eyebrow { font-size:.75rem; letter-spacing:.14em; margin-bottom:.625rem; }
.cx-brief-section h2,.cx-brief-rail h2,.cx-contact-card h2 { font-size:1.125rem; font-weight:650; line-height:1.45; }
.cx-brief-section-title > p:last-child { color:rgb(var(--z400)); font-size:.875rem; margin-top:.375rem; line-height:1.6; }
.cx-selection-note { padding:1.5rem 1.75rem; background:rgb(var(--acc-soft) / .045); }
.cx-selection-note > p { font-size:1rem; line-height:1.8; margin-top:.625rem; color:rgb(var(--z200)); }
.cx-brief-label { display:block; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgb(var(--z400)); }
.cx-evidence-list article { display:flex; align-items:flex-start; gap:1rem; padding:1.25rem 1.75rem; border-top:1px solid rgb(var(--z800)); }
.cx-evidence-number { display:grid; place-items:center; flex:none; width:1.875rem; height:1.875rem; background:rgb(var(--acc-soft) / .1); color:rgb(var(--acc-text)); border-radius:50%; font-size:.75rem; font-weight:650; }
.cx-evidence-list h3 { font-size:.875rem; font-weight:600; }
.cx-evidence-list p { margin:.35rem 0 .65rem; font-size:.875rem; line-height:1.65; color:rgb(var(--z300)); }
.cx-ai-reading { padding:1.5rem 1.75rem; border-top:1px solid rgb(var(--z800)); }
.cx-ai-reading h3 { font-weight:600; }
.cx-ai-reading ul,.cx-brief-checks ul { list-style:disc; padding-left:1.1rem; margin-top:1rem; font-size:.875rem; line-height:1.75; color:rgb(var(--z300)); }
.cx-ai-reading li + li,.cx-brief-checks li + li { margin-top:.625rem; }
.cx-brief-editor-body { padding:1.5rem 1.75rem; }
.cx-brief-angle { padding:1rem 1.125rem; background:rgb(var(--z950)); border-left:2px solid rgb(var(--acc-text)); }
.cx-brief-angle p { font-size:.875rem; line-height:1.7; margin-top:.5rem; color:rgb(var(--z300)); }
.cx-brief-draft-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; font-size:.75rem; color:rgb(var(--z400)); margin:1.25rem 0; }
.cx-brief-field { display:flex; flex-direction:column; gap:.5rem; min-width:0; margin-bottom:1.25rem; }
.cx-brief-field label { font-size:.75rem; font-weight:600; color:rgb(var(--z300)); }
.cx-brief-field input,.cx-brief-field textarea,.cx-brief-field select { width:100%; min-width:0; background:rgb(var(--z900)); border:1px solid rgb(var(--z700)); color:rgb(var(--z100)); border-radius:5px; padding:.8rem .875rem; font:inherit; font-size:.9375rem; line-height:1.7; }
.cx-brief-field input,.cx-brief-field select { min-height:44px; }
.cx-brief-field textarea { resize:vertical; }
.cx-draft-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.cx-draft-tools > p { font-size:.75rem; color:rgb(var(--z400)); }
.cx-company-profile [data-form-feedback][role="alert"] { color:rgb(var(--bad)); }
.cx-company-profile [data-form-feedback] a { color:rgb(var(--acc-text)); text-decoration:underline; text-underline-offset:3px; }
.cx-draft-tools > div { display:flex; flex-wrap:wrap; gap:.625rem; }
.cx-draft-refresh { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid rgb(var(--z800)); }
.cx-draft-refresh form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem; }
.cx-draft-refresh .cx-brief-field { flex:1; min-width:10rem; margin-bottom:0; }
.cx-draft-refresh .cx-btn { min-height:51px; }
.cx-company-profile button:disabled { opacity:.55; cursor:not-allowed; }
.cx-brief-caption { color:rgb(var(--z400)); font-size:.75rem; line-height:1.7; margin-top:.75rem; }
.cx-draft-history,.cx-brief-method { border-top:1px solid rgb(var(--z800)); margin-top:1.5rem; padding-top:1rem; font-size:.8125rem; }
.cx-draft-history summary,.cx-brief-method summary,.cx-brief-recovery summary { min-height:44px; display:list-item; align-content:center; cursor:pointer; font-weight:600; color:rgb(var(--z300)); }
.cx-draft-history article { border-top:1px solid rgb(var(--z800)); padding:1rem 0; }
.cx-draft-history h3 { color:rgb(var(--z400)); font-size:.75rem; margin-bottom:.625rem; }
.cx-draft-history pre,.cx-brief-recovery pre { font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:.75rem; }
.cx-brief-method p { margin-top:.75rem; line-height:1.75; color:rgb(var(--z400)); }
.cx-brief-method a { text-decoration:underline; text-underline-offset:3px; color:rgb(var(--acc-text)); }
.cx-brief-decision { display:flex; align-items:center; flex-wrap:wrap; gap:.625rem; border-top:1px solid rgb(var(--z800)); margin-top:1.5rem; padding-top:1.25rem; }
.cx-brief-rail > section,.cx-contact-card { padding:1.5rem; }
.cx-brief-rail .cx-eyebrow,.cx-contact-card .cx-eyebrow { font-size:.75rem; letter-spacing:.13em; margin-bottom:.65rem; }
.cx-brief-person { display:flex; align-items:center; gap:.75rem; padding:1.25rem 0; margin-top:.25rem; border-bottom:1px solid rgb(var(--z800)); }
.cx-brief-person h3 { font-size:.875rem; font-weight:600; }
.cx-brief-person p { font-size:.75rem; line-height:1.5; color:rgb(var(--z400)); margin-top:.25rem; }
.cx-contact-card dl { display:flex; flex-direction:column; gap:1.25rem; margin-top:1.25rem; }
.cx-contact-card dt { color:rgb(var(--z400)); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.35rem; }
.cx-contact-card dd { font-size:.875rem; line-height:1.65; overflow-wrap:anywhere; }
.cx-contact-card dd a,.cx-brief-sources a { color:rgb(var(--acc-text)); text-decoration:underline; text-underline-offset:3px; }
.cx-contact-card dd span { display:block; margin-top:.5rem; font-size:.75rem; color:rgb(var(--z400)); }
.cx-contact-card svg,.cx-brief-sources svg { display:inline-block; width:1rem; height:1rem; }
.cx-brief-sources h3 { font-size:.875rem; font-weight:600; line-height:1.6; margin:1rem 0 .5rem; }
.cx-brief-sources p { font-size:.8125rem; color:rgb(var(--z400)); line-height:1.75; }
.cx-brief-sources a { display:inline-flex; gap:.5rem; align-items:center; font-size:.8125rem; margin-top:1rem; min-height:36px; }
.cx-brief-alert,.cx-brief-success { margin:1rem 0; padding:1rem; border:1px solid rgb(var(--bad) / .3); border-radius:6px; background:rgb(var(--bad-soft) / .06); font-size:.875rem; line-height:1.7; }
.cx-brief-success { border-color:rgb(var(--good) / .3); background:rgb(var(--good-soft) / .06); }
.cx-brief-recovery { padding:1rem; margin-bottom:1rem; }
.cx-brief-alert > div { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }
.cx-lead-open { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; font-size:.8125rem; font-weight:650; color:rgb(var(--acc-text)); text-decoration:underline; text-underline-offset:4px; }
.cx-lead-open svg { width:1rem; height:1rem; }
.cx-lead-list-intro { border-top:3px solid rgb(var(--acc-text)); padding:1.5rem 0 .25rem; }
.cx-lead-list-intro .cx-h1 { font-size:clamp(1.75rem,3vw,2.5rem); }
.cx-reply-summary > :last-child { grid-column:1 / -1; }
@media (min-width:1024px) { .cx-reply-summary > :last-child { grid-column:auto; } }
@media (max-width:1199px) { .cx-brief-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"why" "contact" "draft" "outreach" "decision" "rail"; } .cx-brief-rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:639px) {
  .cx-company-hero { padding:1.5rem; }
  .cx-company-seal { position:absolute; right:-3rem; top:-2rem; opacity:.08; width:10rem; height:10rem; }
  .cx-company-hero h1 { font-size:1.875rem; }
  .cx-company-meta { font-size:.8125rem; }
  .cx-company-hero-actions { gap:.5rem; }
  .cx-brief-sections { gap:.15rem 1rem; }
  .cx-brief-sections a { font-size:.75rem; }
  .cx-brief-sections > span { margin-left:0; }
  .cx-brief-section-title,.cx-brief-editor-body,.cx-selection-note,.cx-ai-reading { padding:1.25rem; }
  .cx-evidence-list article { padding:1.125rem 1.25rem; }
  .cx-brief-rail { display:flex; }
  .cx-brief-field input,.cx-brief-field textarea,.cx-brief-field select { font-size:16px; }
  .cx-draft-tools > div { width:100%; }
  .cx-draft-tools .cx-btn { flex:1; }
  .cx-draft-refresh form { align-items:stretch; }
  .cx-draft-refresh form > button { width:100%; }
}
.cx .cx-desktop-leads { display:none; }
.cx .cx-mobile-leads { display:grid; grid-template-columns:minmax(0,1fr); }
.cx [data-lead-href] { cursor:pointer; }
.cx .cx-mobile-leads > li { min-width:0; transition:background-color .15s ease; }
.cx .cx-mobile-leads > li:hover { background:rgb(var(--z950)); }
.cx .cx-mobile-leads .card-link { font-size:1rem; line-height:1.4; }
@media (min-width:768px) and (max-width:1199px) {
  .cx .cx-mobile-leads { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cx .cx-mobile-leads > li { border:1px solid rgb(var(--z800)); }
}
@media (min-width:1200px) {
  .cx .cx-desktop-leads { display:block; }
  .cx .cx-mobile-leads { display:none; }
}

/* Emails sent: five numbers on one row from a laptop up (F21). The Tailwind
   build has no lg:grid-cols-5, so the fifth card wrapped onto its own row. */
@media (min-width: 1024px) { .cx-send-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Reply classification: the chosen kind is announced (aria-pressed) and drawn
   with a check mark as well as colour. */
.cx-kind[aria-pressed="true"]::before { content: "\2713"; margin-right: .375rem; font-weight: 700; }
/* Links inside prose remain identifiable without relying on their colour. */
.cx main p a:not(.cx-btn) { text-decoration: underline; text-underline-offset: .15em; }
/* Sign-in: the "Show code" toggle beside the field. */
.cx-reveal { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; border-radius: 10px;
  font-size: .8125rem; font-weight: 600; color: rgb(var(--acc-text)); }
.cx-reveal:hover { background: rgb(var(--z800)); }
/* Home: the practice material, folded away below today's work. */
.cx-practice > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: 1rem 1.25rem; border: 1px solid rgb(var(--z800)); border-radius: var(--radius);
  background: rgb(var(--z900)); font-weight: 600; color: rgb(var(--z200)); }
.cx-practice > summary small { font-weight: 500; color: rgb(var(--z400)); }
.cx-practice[open] > summary { margin-bottom: 1.5rem; }
.cx-practice > section + section { margin-top: 2rem; }

/* Homepage: a compact working desk, with status and data kept explicit. */
.home-desk { display: grid; gap: 24px; }
.home-desk svg { width: 18px; height: 18px; flex: none; }
.home-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 4px 0 6px; }
.home-heading h1 { font-size: clamp(30px, 3.1vw, 44px); font-weight: 650; line-height: 1.12; letter-spacing: -.035em; margin: 12px 0 16px; }
.home-heading p:last-child { color: rgb(var(--z400)); font-size: 14px; line-height: 1.7; }
.home-heading > .cx-btn { margin-top: 6px; }
.home-focus { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 1px solid rgb(var(--acc-soft) / .28); border-left: 3px solid rgb(var(--acc)); border-radius: 14px; background: rgb(var(--acc-soft) / .055); }
.home-focus-icon, .home-hermes-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgb(var(--acc-soft) / .1); color: rgb(var(--acc-text)); flex: none; }
.home-focus-icon svg, .home-hermes-icon svg { width: 22px; height: 22px; }
.home-focus-copy { flex: 1; min-width: 0; }
.home-focus h2 { font-size: 19px; line-height: 1.35; font-weight: 650; margin: 6px 0; }
.home-focus p:last-child { font-size: 12px; line-height: 1.6; color: rgb(var(--z400)); }
.home-focus .cx-btn { flex: none; }
.home-connections { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid rgb(var(--z700)); border-radius: 14px; background: rgb(var(--z900)); }
.home-connection { display: flex; gap: 10px; align-items: center; padding: 17px 15px; min-width: 0; border-radius: 12px; }
.home-connection + .home-connection { border-left: 1px solid rgb(var(--z800)); }
.home-connection:hover { background: rgb(var(--z950)); }
.home-tool-icon { color: rgb(var(--z400)); display: grid; place-items: center; }
.home-connection > span:nth-child(2) { flex: 1; min-width: 0; }
.home-connection strong { font-size: 12px; font-weight: 650; display: block; }
.home-connection small { display: block; font-size: 12px; color: rgb(var(--z400)); margin-top: 4px; overflow-wrap: anywhere; }
.home-status { font-size: 12px; font-weight: 600; color: rgb(var(--z400)); white-space: nowrap; padding: 4px 6px; border: 1px solid rgb(var(--z700)); border-radius: 5px; }
.home-status.is-connected { color: rgb(var(--good)); border-color: rgb(var(--good) / .24); background: rgb(var(--good) / .06); }
.home-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.home-section-title h2 { font-size: 16px; font-weight: 650; }
.home-section-title > span { font-size: 12px; color: rgb(var(--z400)); }
.home-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid rgb(var(--z700)); background: rgb(var(--z900)); border-radius: 14px; }
.home-metrics > a { min-width: 0; display: grid; gap: 12px; padding: 20px; border-radius: 12px; }
.home-metrics > a + a { border-left: 1px solid rgb(var(--z800)); }
.home-metrics > a:hover { background: rgb(var(--z950)); }
.home-metrics > a > span { font-size: 12px; font-weight: 600; color: rgb(var(--z300)); }
.home-metrics strong { font-size: 32px; line-height: 1; font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.home-metrics small { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; color: rgb(var(--z400)); line-height: 1.5; }
.home-metrics small svg { width: 13px; height: 13px; }
.home-data-note { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.6; color: rgb(var(--z400)); margin-top: 11px; }
.home-data-note svg { width: 14px; height: 14px; margin-top: 1px; }
.home-work-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,1fr); gap: 20px; align-items: start; }
.home-panel { min-width: 0; padding: 24px; background: rgb(var(--z900)); border: 1px solid rgb(var(--z700)); border-radius: 16px; box-shadow: var(--shadow-card); }
.home-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-panel-heading .cx-eyebrow { margin-bottom: 7px; }
.home-panel h2 { font-size: 20px; font-weight: 650; line-height: 1.3; }
.home-panel p { font-size: 12px; line-height: 1.75; color: rgb(var(--z400)); }
.home-panel-intro { margin-top: 12px; }
.home-text-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 12px; line-height: 1.5; font-weight: 600; color: rgb(var(--acc-text)); }
.home-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-text-link svg { width: 14px; height: 14px; }
.home-prospect-list { list-style: none; padding: 0; margin: 17px -10px 8px; }
.home-prospect-list li + li { border-top: 1px solid rgb(var(--z800)); }
.home-prospect-list a { display: flex; align-items: center; gap: 13px; padding: 20px 10px; min-width: 0; border-radius: 9px; }
.home-prospect-list a:hover { background: rgb(var(--z950)); }
.home-company-mark, .home-member-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; color: rgb(var(--acc-text)); background: rgb(var(--acc-soft) / .07); border: 1px solid rgb(var(--acc-soft) / .16); font-size: 15px; font-weight: 600; }
.home-prospect-info { flex: 1; min-width: 0; }
.home-prospect-info strong { display: block; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.home-prospect-info > span { display: block; font-size: 12px; line-height: 1.6; color: rgb(var(--z400)); margin: 5px 0; overflow-wrap: anywhere; }
.home-prospect-info small { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: rgb(var(--z400)); font-size: 12px; line-height: 1.5; }
.home-example { font-size: 12px; padding: 2px 5px; border: 1px solid rgb(var(--z700)); border-radius: 4px; color: rgb(var(--z400)); }
.home-prospect-arrow { color: rgb(var(--acc-text)); }
.home-panel-foot { display: flex; align-items: flex-start; gap: 9px; border-top: 1px solid rgb(var(--z800)); padding-top: 17px; font-size: 12px; color: rgb(var(--z400)); line-height: 1.7; }
.home-panel-foot svg { width: 15px; height: 15px; margin-top: 2px; }
.home-research-rail { display: grid; gap: 20px; }
.home-hermes { background: linear-gradient(135deg,rgb(var(--z900)) 35%,rgb(var(--acc-soft) / .065)); }
.home-hermes .cx-eyebrow { margin-top: 21px; }
.home-hermes h2 { font-size: 27px; line-height: 1.2; margin: 9px 0 13px; letter-spacing: -.025em; }
.home-hermes .cx-btn { display: flex; margin: 21px 0 5px; width: 100%; font-size: 12px; }
.home-hermes > .home-text-link { justify-content: center; width: 100%; }
.home-crm h2 { font-size: 16px; }
.home-crm .home-panel-heading > svg { color: rgb(var(--acc-text)); }
.home-crm > p { margin-top: 12px; }
.home-crm p.home-coverage-state { color: rgb(var(--z200)); font-weight: 600; }
.home-crm-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.home-crm-counts dt { font-size: 12px; color: rgb(var(--z400)); }
.home-crm-counts dd { font-size: 23px; font-weight: 650; margin-top: 6px; }
.home-bottom-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,1fr); gap: 20px; }
.home-team-list { list-style: none; padding: 0; margin-top: 17px; }
.home-team-list li { display: flex; align-items: center; gap: 11px; padding: 14px 0; }
.home-team-list li + li { border-top: 1px solid rgb(var(--z800)); }
.home-member-mark { width: 32px; height: 32px; font-size: 12px; border-radius: 50%; }
.home-team-list strong { font-size: 12px; font-weight: 600; line-height: 1.6; }
.home-team-list strong span { font-weight: 400; color: rgb(var(--z400)); }
.home-team-list small { display: block; font-size: 12px; color: rgb(var(--z400)); line-height: 1.7; margin-top: 4px; }
.home-team-empty { padding: 24px 0 3px; }
.home-team-empty p { font-weight: 600; color: rgb(var(--z200)); }
.home-team-empty > span { display: block; font-size: 12px; color: rgb(var(--z400)); line-height: 1.7; margin: 6px 0 8px; }
.home-mail > p { margin-top: 15px; }
.home-mail .home-panel-heading > svg { color: rgb(var(--acc-text)); }
.home-mail-links { display: grid; margin-top: 17px; border-top: 1px solid rgb(var(--z800)); }
.home-mail-links a { display: flex; align-items: center; gap: 9px; padding: 15px 0; border-bottom: 1px solid rgb(var(--z800)); font-size: 12px; font-weight: 600; }
.home-mail-links a > :last-child { margin-left: auto; }
.home-mail-links a > span { background: rgb(var(--z950)); padding: 2px 7px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.home-mail .home-mail-note { display: flex; gap: 7px; font-size: 12px; }
.home-mail-note svg { width: 14px; height: 14px; margin-top: 2px; }
.home-empty { text-align: center; padding: 40px 16px; }
.home-empty-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 20px; border-radius: 12px; color: rgb(var(--acc-text)); background: rgb(var(--acc-soft) / .07); }
.home-empty h3 { font-size: 16px; font-weight: 600; }
.home-empty p { margin: 10px auto 20px; max-width: 300px; }
.home-practice { border: 1px solid rgb(var(--z700)); border-radius: 13px; background: rgb(var(--z900)); }
.home-practice summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 15px 20px; cursor: pointer; font-size: 12px; font-weight: 600; border-radius: 13px; }
.home-practice summary > span { display: flex; align-items: center; gap: 9px; flex: 1; }
.home-practice summary > small { color: rgb(var(--z400)); font-size: 12px; font-weight: 400; }
.home-practice[open] summary > svg { transform: rotate(90deg); }
.home-practice > div { padding: 0 20px 20px; }
.home-practice p { font-size: 12px; color: rgb(var(--z400)); line-height: 1.7; margin-bottom: 16px; }
.home-practice ul { list-style: none; padding: 0; margin-bottom: 16px; }
.home-practice li a { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 12px; border-top: 1px solid rgb(var(--z800)); }
.home-practice li small { color: rgb(var(--z400)); margin-left: auto; }
@media (max-width: 1200px) {
  .home-connection { flex-wrap: wrap; }
  .home-status { margin-left: 28px; }
  .home-focus { flex-wrap: wrap; }
  .home-focus > .cx-btn { margin-left: 62px; }
  .home-metrics > a { padding: 17px; }
  .home-work-grid, .home-bottom-grid { grid-template-columns: minmax(0,1.5fr) minmax(260px,1fr); }
  .home-panel { padding: 20px; }
  .home-panel-heading { flex-wrap: wrap; gap: 5px 12px; }
}
@media (max-width: 760px) {
  .home-desk { gap: 20px; }
  .home-work-grid, .home-bottom-grid { grid-template-columns: minmax(0,1fr); }
  .home-research-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-metrics > a:nth-child(3) { border-left: 0; }
  .home-metrics > a:nth-child(n+3) { border-top: 1px solid rgb(var(--z800)); }
  .home-connections { grid-template-columns: minmax(0,1fr); }
  .home-connection { flex-wrap: nowrap; padding: 14px 16px; }
  .home-connection + .home-connection { border-left: 0; border-top: 1px solid rgb(var(--z800)); }
  .home-status { margin-left: 0; }
}
@media (max-width: 480px) {
  .home-heading { display: block; }
  .home-heading > .cx-btn { margin-top: 20px; }
  .home-heading h1 { font-size: 34px; }
  .home-desktop-break { display: none; }
  .home-focus { padding: 20px; gap: 14px; align-items: flex-start; }
  .home-focus-icon { width: 36px; height: 36px; }
  .home-focus h2 { font-size: 17px; }
  .home-focus > .cx-btn { width: 100%; margin-left: 0; font-size: 12px; }
  .home-section-title { display: block; }
  .home-section-title > span { display: block; margin-top: 6px; }
  .home-metrics > a { padding: 16px; gap: 12px; }
  .home-metrics > a > span { font-size: 12px; }
  .home-metrics small { align-items: flex-start; font-size: 12px; }
  .home-research-rail { grid-template-columns: minmax(0,1fr); }
  .home-prospect-list a { gap: 10px; padding: 18px 10px; }
  .home-company-mark { width: 34px; height: 34px; font-size: 12px; }
  .home-practice summary { flex-wrap: wrap; gap: 8px; }
  .home-practice summary > small { order: 3; width: 100%; padding-left: 27px; }
}