/* ============================================================
   Banker Jack — marketing site shared styles
   Single source for all bankerjack.ai pages. Tokens mirror the
   Banker Jack Design System (v1.0.0); layout per README →
   "Marketing surfaces": bar 880 · content 720 · feed 880;
   prose 60ch, rows full-width; Courteous Colouring on the bar CTA.
   ============================================================ */

@font-face { font-family:"Geist"; src:url("../meet/fonts/Geist-Variable.woff2") format("woff2-variations"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Source Serif 4"; src:url("../meet/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations"); font-weight:200 900; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("../meet/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"); font-weight:100 800; font-display:swap; }
@font-face { font-family:"Roboto Slab"; src:url("../meet/fonts/roboto-slab-latin-wght-normal.woff2") format("woff2-variations"); font-weight:100 900; font-display:swap; }

:root {
  --bg: oklch(0.993 0.004 132); --bg-sunken: oklch(0.978 0.005 132); --bg-raised: oklch(1 0 132);
  --bg-hover: oklch(0.965 0.006 132);
  --border: oklch(0.915 0.006 132); --border-strong: oklch(0.855 0.008 132);
  --fg: oklch(0.205 0.010 132); --fg-muted: oklch(0.445 0.008 132); --fg-subtle: oklch(0.615 0.007 132); --fg-faint: oklch(0.755 0.006 132);
  --lime: #cdf3af; --lime-hover: oklch(from var(--lime) calc(l - 0.03) c h); --lime-ink: oklch(0.28 0.08 132);
  --lime-ring: oklch(from var(--lime) l calc(c + 0.02) h / 0.55);
  --amber: oklch(0.825 0.120 75); --amber-ink: oklch(0.36 0.09 65);
  --font-sans: "Geist", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-wordmark: "Roboto Slab", Georgia, serif;
  --fs-12:0.75rem; --fs-13:0.8125rem; --fs-14:0.875rem; --fs-15:0.9375rem; --fs-24:1.5rem; --fs-30:1.875rem; --fs-40:2.5rem; --fs-56:3.5rem;
  --lh-tight:1.15; --lh-snug:1.3; --lh-normal:1.5;
  --tracking-tight:-0.018em; --tracking-snug:-0.008em; --tracking-wide:0.02em;
  --r-xs:3px; --r-sm:5px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-enter:220ms; --dur-exit:180ms;
}

/* ---------- base ---------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-sans); font-size:var(--fs-15); line-height:var(--lh-normal); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:inherit; }
:where(a,button):focus-visible { outline:none; box-shadow:0 0 0 3px var(--lime-ring); border-radius:var(--r-md); }
::selection { background:oklch(from var(--lime) l c h / 0.55); color:var(--fg); }

/* ---------- containers (marketing width ladder) ---------- */
.page-narrow { max-width:720px; margin:0 auto; padding:0 24px; }
.page { max-width:880px; margin:0 auto; padding:0 24px; }
section { margin-top:88px; }
.hero { padding-top:72px; }

/* ---------- sticky top bar + Courteous Colouring ---------- */
.bar-shell { position:sticky; top:0; background:var(--bg); z-index:50; border-bottom:1px solid transparent; transition:border-color var(--dur-exit) var(--ease); }
.bar-shell.scrolled { border-bottom-color:var(--border); }
.bar-shell .topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:880px; margin:0 auto; padding:14px 24px; }
.wordmark img { height:34px; width:auto; display:block; }
.nav-links { display:flex; gap:18px; align-items:center; font-size:var(--fs-13); color:var(--fg-muted); flex-wrap:wrap; }
.nav-links a { text-decoration:none; white-space:nowrap; }
.nav-links a:hover { color:var(--fg); }
.nav-links .here { color:var(--fg); font-weight:560; white-space:nowrap; }

.cta.bar-cta { height:32px; padding:0 14px; font-size:var(--fs-13); margin-left:8px;
  background:var(--bg-raised); border-color:var(--border-strong); color:var(--fg);
  transition:background var(--dur-enter) var(--ease), border-color var(--dur-enter) var(--ease), color var(--dur-enter) var(--ease); }
.cta.bar-cta:hover { background:var(--bg-hover); }
.bar-shell.take-lime .cta.bar-cta { background:var(--lime); border-color:oklch(from var(--lime) calc(l - 0.08) c h); color:var(--lime-ink); }
.bar-shell.take-lime .cta.bar-cta:hover { background:var(--lime-hover); }

/* ---------- type ---------- */
.display { font-family:var(--font-serif); font-weight:420; font-size:clamp(2.2rem, 6.5vw, var(--fs-56)); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); margin:0; }
h2.sect { font-family:var(--font-serif); font-weight:440; font-size:clamp(1.5rem, 4.5vw, var(--fs-30)); line-height:var(--lh-snug); letter-spacing:var(--tracking-tight); margin:0 0 12px; }
.sub { font-family:var(--font-serif); font-weight:440; font-size:clamp(1.25rem, 3.5vw, var(--fs-24)); line-height:var(--lh-snug); letter-spacing:var(--tracking-snug); margin:0; }
.lede { color:var(--fg-muted); max-width:60ch; }
.prose-cap { max-width:60ch; }
.eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:0.02em; color:var(--fg-subtle); margin-bottom:12px; }
.num { font-family:var(--font-mono); font-size:0.85em; font-variant-numeric:tabular-nums; }

/* ---------- CTA ---------- */
.cta { height:40px; padding:0 20px; border-radius:var(--r-md); font-size:var(--fs-14); font-weight:560; display:inline-flex; align-items:center; background:var(--lime); border:1px solid oklch(from var(--lime) calc(l - 0.08) c h); color:var(--lime-ink); cursor:pointer; font-family:var(--font-sans); text-decoration:none; transition:background var(--dur-exit) var(--ease); }
.cta:hover { background:var(--lime-hover); }
.cta-note { margin-left:12px; font-size:var(--fs-13); color:var(--fg-subtle); }
.cta-row { margin-top:28px; display:flex; align-items:center; flex-wrap:wrap; gap:10px 0; }
/* quiet onward link — points to a sibling page without competing with the CTA */
.onward { margin-top:24px; font-size:var(--fs-13); color:var(--fg-subtle); max-width:60ch; }
.onward a { color:var(--fg-muted); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border-strong); transition:color var(--dur-exit) var(--ease); }
.onward a:hover { color:var(--fg); }

/* ---------- rows (full-width by doctrine) ---------- */
.fact { display:flex; gap:16px; padding:14px 0; border-top:1px solid var(--border); align-items:baseline; }
.fact .n { font-family:var(--font-mono); font-size:var(--fs-15); font-weight:520; min-width:110px; text-align:right; font-variant-numeric:tabular-nums; flex:none; }
.fact .d { font-size:var(--fs-13); color:var(--fg-muted); }
.job { padding:20px 0; border-top:1px solid var(--border); }
.job .role { font-weight:560; font-size:var(--fs-14); margin-bottom:4px; }
.job .desc { font-size:var(--fs-14); color:var(--fg-muted); }
.row-item { display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--border); }
.row-item .who { font-weight:560; font-size:var(--fs-14); min-width:110px; flex:none; }
.row-item .what { font-size:var(--fs-14); color:var(--fg-muted); }
.titem { display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--border); align-items:flex-start; }
.titem svg { flex:none; width:16px; height:16px; color:var(--fg-muted); margin-top:2px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.titem .t { font-weight:560; font-size:var(--fs-14); }
.titem .d { font-size:var(--fs-13); color:var(--fg-muted); margin-top:2px; }

/* ---------- work feed (the wide proof moment) ---------- */
.feed-wrap { max-width:880px; margin:72px auto 0; padding:0 24px; }
.feed { border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-raised); overflow:hidden; }
.feed-head { display:flex; align-items:center; gap:8px; padding:12px 16px; font-size:var(--fs-13); font-weight:560; }
.feed-head .count { color:var(--fg-subtle); font-variant-numeric:tabular-nums; margin-left:2px; }
.feed-head.mid { border-top:1px solid var(--border); }
.dot-lime { width:6px; height:6px; border-radius:50%; background:var(--lime); flex:none; }
.dot-amber { width:6px; height:6px; border-radius:50%; background:var(--amber); flex:none; }
.frow { display:flex; align-items:center; gap:14px; min-height:48px; padding:6px 16px; border-top:1px solid var(--border); font-size:var(--fs-14); }
.feed-head + .frow { border-top:none; }
.frow .t { font-family:var(--font-mono); font-size:11px; color:var(--fg-subtle); width:44px; flex:none; }
.frow .d { flex:1; min-width:0; }
.frow .amt { font-family:var(--font-mono); font-size:12px; color:var(--fg-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.frow.waiting { background:var(--bg-sunken); }
.frow.waiting .badge { font-size:var(--fs-12); color:var(--amber-ink); white-space:nowrap; }
.feed-cap { text-align:center; margin-top:14px; font-size:var(--fs-13); color:var(--fg-subtle); }

/* ---------- chat moment (+ rotor) ---------- */
.chat-card { margin-top:56px; }
.chat-cap { text-align:center; margin-top:14px; font-size:var(--fs-13); color:var(--fg-subtle); }
.chat { border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-raised); padding:16px; min-height:150px; }
.chat .tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.02em; color:var(--fg-subtle); margin-bottom:10px; }
.msg { display:flex; gap:10px; margin-top:10px; }
.msg.user { justify-content:flex-end; }
.bubble { max-width:52ch; padding:8px 12px; border-radius:var(--r-md); font-size:var(--fs-14); background:var(--bg-raised); border:1px solid var(--border); }
.msg.user .bubble { background:var(--bg-sunken); }
.avatar { width:24px; height:24px; flex:none; border-radius:var(--r-sm); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; background:var(--bg-raised); position:relative; }
.avatar svg { width:16px; height:16px; }
.avatar .dot { position:absolute; right:-2px; bottom:-2px; width:6px; height:6px; border-radius:50%; background:var(--lime); border:1px solid var(--bg); }
.msg.arrive { animation: msg-arrive 220ms var(--ease); }
@keyframes msg-arrive { from { opacity:0; transform:translateY(6px); } }
.typing { display:inline-flex; gap:4px; padding:6px 2px; }
.typing span { width:5px; height:5px; border-radius:50%; background:var(--fg-subtle); animation: typing-pulse 900ms infinite var(--ease); }
.typing span:nth-child(2) { animation-delay:150ms; }
.typing span:nth-child(3) { animation-delay:300ms; }
@keyframes typing-pulse { 0%,60%,100% { opacity:0.3 } 30% { opacity:1 } }
.moment-segs { display:flex; gap:6px; margin-top:12px; }
.moment-segs button { flex:1; height:18px; padding:0; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; }
.moment-segs button i { display:block; width:100%; height:3px; border-radius:2px; background:var(--border); overflow:hidden; position:relative; }
.moment-segs button i b { position:absolute; inset:0; background:var(--fg-subtle); transform:scaleX(0); transform-origin:left; }

/* ---------- proposal card (depicted product moment; non-interactive) ----------
   Controls are rendered as static chips, never buttons: the card is an
   illustration (role="img"), so nothing here is clickable and nothing takes
   the lime — lime stays reserved for the page's own CTA. */
.proposal { border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-raised); overflow:hidden; margin-top:20px; }
.proposal-head { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border); font-size:var(--fs-13); flex-wrap:wrap; }
.proposal-head .ph-title { font-weight:560; }
.proposal-head .ph-meta { margin-left:auto; color:var(--fg-subtle); font-family:var(--font-mono); font-size:11px; }
.proposal-body { padding:4px 16px 0; }
.pline { display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); font-size:var(--fs-14); }
.pline .pl-label { flex:1; min-width:0; }
.pline .pl-code { font-family:var(--font-mono); font-size:11px; color:var(--fg-subtle); }
.pline .pl-amt { font-family:var(--font-mono); font-size:var(--fs-13); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pline.credit { border-bottom:none; border-top:1px solid var(--border-strong); font-weight:560; }
.pmeta { display:flex; flex-wrap:wrap; gap:2px 20px; padding:12px 0 0; font-size:var(--fs-13); color:var(--fg-muted); }
.pmeta .k { color:var(--fg-subtle); margin-right:6px; }
.proposal-why { margin:12px 0 0; padding:10px 12px; background:var(--bg-sunken); border-radius:var(--r-sm); font-size:var(--fs-13); color:var(--fg-muted); }
.proposal-why b { color:var(--fg); font-weight:560; }
.proposal-actions { display:flex; gap:8px; padding:14px 16px; flex-wrap:wrap; }
.pbtn { height:30px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--bg); color:var(--fg-muted); font-size:var(--fs-13); display:inline-flex; align-items:center; }
.pbtn.strong { border-color:var(--border-strong); color:var(--fg); font-weight:560; }
.proposal-cap { margin-top:12px; font-size:var(--fs-13); color:var(--fg-subtle); max-width:60ch; }

/* ---------- client quote (proof) ----------
   GUARDRAIL: only ever populated with a real client's own words, their real
   name, and their permission. Never invented, never composite, never edited
   into something they did not say. If there is no real quote, the block does
   not appear on the page. */
.quote { margin:0; padding:24px 0; border-top:1px solid var(--border); }
.quote p { margin:0; }
.quote .qt { font-family:var(--font-serif); font-weight:440; font-size:var(--fs-24); line-height:var(--lh-snug); letter-spacing:var(--tracking-snug); }
.quote .qby { margin-top:12px; font-size:var(--fs-13); color:var(--fg-subtle); }
.quote .qby b { color:var(--fg); font-weight:560; }

/* ---------- terminal (agentic) ---------- */
.term { border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-sunken); padding:14px 16px; font-family:var(--font-mono); font-size:12.5px; margin-top:8px; }
.term .prompt { color:var(--fg-subtle); margin-right:6px; }
.term-line { color:var(--fg); }
.term-out { color:var(--fg-muted); margin-top:8px; white-space:pre-wrap; }

/* ---------- pricing ---------- */
.price-row { display:flex; align-items:baseline; gap:16px; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.pct { font-family:var(--font-serif); font-weight:420; font-size:var(--fs-40); letter-spacing:var(--tracking-tight); }
.price-min { margin-left:auto; text-align:right; font-size:var(--fs-13); color:var(--fg-muted); }

/* ---------- footer ---------- */
.footer { border-top:1px solid var(--border); margin-top:96px; }
.footer-inner { padding:24px 0; font-size:var(--fs-12); color:var(--fg-subtle); display:flex; flex-wrap:wrap; gap:6px 14px; }
.footer-inner a { color:inherit; }

/* ---------- responsive ---------- */
@media (max-width:600px) {
  section { margin-top:64px; }
  .hero { padding-top:48px; }
  .feed-wrap { margin-top:56px; }
  .frow .amt { display:none; }
  .row-item { flex-direction:column; gap:4px; }
  .row-item .who { min-width:0; }
  .nav-links { gap:12px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .bar-shell, .bar-cta { transition:none; }
  .msg.arrive { animation:none; }
  .typing span { animation:none; opacity:0.7; }
}