/* ============================================================================
   MinuteBridge marketing site — app-matched design system.

   THE TOKEN VALUES BELOW ARE GENERATED. Edit src/webapp/public/theme.css and
   run `npm run theme`; do not hand-edit them here. (They were a hand-copied
   duplicate until 2026-08-06, with the usual result: the app re-themed and
   the site didn't. `npm run theme:check` now fails when they drift.)

   The site stays fully static and self-contained — a marketing page must not
   go grey because the app is down — which is why it holds a copy at all
   rather than linking the app's stylesheet. Structure and the site-only
   tokens are hand-maintained; only values are substituted.
   Dark mode: the app resolves a data-theme attribute; the site has no JS,
   so the same dark token values ride prefers-color-scheme instead.
   ============================================================================ */
:root {
  --accent: #3a5a86;
  --on-accent: #fffdf9;
  --accent-text: var(--accent);

  --ink: #1c1b18;
  --muted: #797263;
  --faint: #a49b89;
  --line: #d9d3c5;
  --line-strong: #cfc7b4;
  --bg: #f6f5f2;
  --surface: #fffdf9;
  --surface-2: #f2eee4;

  --ok: #3f7d55;  --warn: #a9791f;  --stop: #b4483f;

  /* the app's title bar. It is a GRADIENT, not the accent — the site read as
     a different product while it painted its bar with the outgoing-call
     glyph blue. (The matching <meta name="theme-color"> can't live here: a
     meta tag holds no var(), so build-theme stamps the pages directly.) */
  --chrome: linear-gradient(120deg,#1b2632 0%,#33475c 68%,#3d6b6c 100%);
  --chrome-fg: #faf9f6;

  --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);
  --good-soft: color-mix(in srgb, var(--ok)   13%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);

  /* the knobs the state colours below are MIXED with. The app derives its
     swipe grounds and legends rather than stating them, and the generated
     values it hands us are those formulas verbatim — so the site has to
     declare the same three inputs or the mixes are invalid and every
     property that reads one silently falls back to nothing. */
  --tint-base: var(--surface); --tint-amt: 16%; --legend-amt: 72%;

  /* the app's amber notice (drives the DRAFT banners) */
  --amber-bg: color-mix(in srgb, var(--warn) var(--tint-amt), var(--tint-base)); --amber-fg: color-mix(in srgb, var(--warn) var(--legend-amt), var(--ink));
  /* the app's swipe-right "log" green (drives the hero mock's swipe layer) */
  --green-bg: color-mix(in srgb, var(--ok)   var(--tint-amt), var(--tint-base)); --green-fg: color-mix(in srgb, var(--ok)   var(--legend-amt), var(--ink));

  --r: 8px;
  --r-sm: 5px;

  --shadow: 0 1px 2px rgba(28,27,24,.05), 0 4px 14px -6px rgba(28,27,24,.12);
  --shadow-open: 0 12px 34px -22px rgba(28,27,24,.55);

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #4c6d99;
    --on-accent: #fffdf9;
    --accent-text: #6d94c8;

    --ink: #e6ecec;
    --muted: #8c9a9e;
    --faint: #7a888c;
    --line: #28343c;
    --line-strong: #35444d;
    --bg: #141c22;
    --surface: #1c262d;
    --surface-2: #222e35;

    --ok: #6fae7f;  --warn: #d0a24a;  --stop: #d97a70;

    --chrome: linear-gradient(120deg,#101820 0%,#233444 68%,#2c4f50 100%);
    --chrome-fg: #faf9f6;

    /* dark tints toward black, and harder — mixing a dark ground toward the
       SHEET desaturates it, and an amber that has stopped reading as amber
       has stopped doing its job */
    --tint-base: #000; --tint-amt: 24%; --legend-amt: 100%;

    --amber-bg: color-mix(in srgb, var(--warn) var(--tint-amt), var(--tint-base)); --amber-fg: color-mix(in srgb, var(--warn) var(--legend-amt), var(--ink));
    --green-bg: color-mix(in srgb, var(--ok)   var(--tint-amt), var(--tint-base)); --green-fg: color-mix(in srgb, var(--ok)   var(--legend-amt), var(--ink));

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px -6px rgba(0,0,0,.55);
  }
  :root { color-scheme: dark; }
}

/* ---- base ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--sans); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* ---- the app's top bar ------------------------------------------------------
   Same two declarations the app's own <header> carries, so the site's bar and
   the product's bar are the same object. It was a flat --accent band, which
   under the current palette resolves to the OUTGOING-CALL glyph blue: a
   status colour doing duty as chrome. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--chrome); color: var(--chrome-fg);
}
.topbar-inner {
  max-width: 1020px; margin: 0 auto; min-height: 52px;
  padding: 10px 20px; display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand img { width: 30px; height: 30px; flex: none; display: block; }
.brand b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.topbar .tagline { font-size: 12px; opacity: .85; }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar .status {
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  padding: 4px 11px; border-radius: 999px;
}
.topbar a.top-link { color:inherit; font-size:13px; font-weight:600; text-decoration:none; opacity:.9; }
.topbar a.top-link:hover { opacity:1; text-decoration:underline; }

/* ---- shared app components (status pills, chips — copied idiom) ------------ */
.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .01em;
        padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.good { background: var(--good-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.live { background: var(--accent-soft); color: var(--accent-text); }

/* ---- buttons (the app's save-button idiom) --------------------------------- */
/* base carries a transparent 1px border so <a> and <button> variants share
   an identical box; solid/ghost set their own border-color */
.btn {
  display: inline-block; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; -webkit-appearance: none;
  padding: 12px 20px; border: 1px solid transparent; border-radius: var(--r-sm); white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow); }
.btn.solid:hover { background: color-mix(in srgb, var(--accent) 88%, #000); border-color: color-mix(in srgb, var(--accent) 88%, #000); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.btn.ghost:hover { background: var(--surface-2); }

/* ---- early-access modal (native <dialog>, app idiom) ----------------------- */
.ea-dialog { position: fixed; inset: 0; margin: auto; height: fit-content;
  max-height: calc(100vh - 32px); overflow: auto;
  border: none; padding: 0; border-radius: var(--r); width: min(440px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px -20px rgba(16,24,40,.5); }
.ea-dialog::backdrop { background: rgba(16,24,40,.45); }
.ea-form { position: relative; padding: clamp(20px, 4vw, 28px); display: flex; flex-direction: column; gap: 12px; }
.ea-form h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.ea-sub { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ea-close { position: absolute; top: 12px; right: 12px; border: none; background: none; color: var(--faint);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); }
.ea-close:hover { background: var(--surface-2); color: var(--ink); }
.ea-field { display: flex; flex-direction: column; gap: 5px; }
.ea-field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.ea-opt { font-weight: 500; color: var(--faint); }
.ea-field input, .ea-field textarea, .ea-field select { font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; width: 100%; }
.ea-field textarea { resize: vertical; min-height: 64px; }
/* native select: kill the platform chrome, draw our own caret */
.ea-field select { -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.ea-field input:focus, .ea-field textarea:focus, .ea-field select:focus { outline: 2px solid var(--accent-text); outline-offset: 1px;
  border-color: var(--accent-text); background-color: var(--surface); }
/* honeypot — off-screen, bots fill it, humans never see it */
.ea-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ea-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.ea-status { margin: 4px 0 0; font-size: 13px; font-weight: 600; min-height: 18px; }
.ea-status.ok { color: var(--ok); }
.ea-status.err { color: var(--stop); }
.ea-submit[disabled] { opacity: .6; cursor: default; }

/* ---- landing layout -------------------------------------------------------- */
main.page { max-width: 1020px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) 16px 40px; }

.hero { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); align-items: center; }
@media (min-width: 880px) { .hero { grid-template-columns: 1fr 400px; } }
.hero-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.eyebrow { align-self: flex-start; font-size: 12px; }
h1 {
  margin: 0; font-size: clamp(1.9rem, 5vw, 2.75rem); font-weight: 800;
  line-height: 1.12; letter-spacing: -.02em; max-width: 18ch; text-wrap: balance;
}
.lede { margin: 0; max-width: 56ch; font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.62; color: var(--muted); }
/* the tagline carries the app's green "ready to log" status edge */
.detail { margin: 0; padding-left: 12px; border-left: 3px solid var(--ok);
          font-size: 1rem; font-weight: 650; line-height: 1.5; color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.or { font-size: .9rem; color: var(--muted); }
.or a { color: var(--accent-text); }

/* ---- the hero product mock: the review queue in the app's own idiom -------- */
.app-mock {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-open), var(--shadow); overflow: hidden;
  max-width: 430px; width: 100%; margin: 0 auto; justify-self: center;
}
/* the mock is the product quoted inside the page, so its header is the
   product's header — same gradient, same foreground */
.mock-header {
  background: var(--chrome); color: var(--chrome-fg); min-height: 40px;
  padding: 9px 14px; display: flex; align-items: center; gap: 9px;
}
.mock-header img { width: 22px; height: 22px; flex: none; }
.mock-header b { font-size: 13px; font-weight: 700; }
.mock-header .crm { font-size: 11px; opacity: .85; }
.mock-body { padding: 10px 12px 12px; }
.day-sep { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
           color: var(--faint); padding: 4px 4px 8px; }
/* the call card, faithfully: 3px status edge, dir glyph, identity, meta */
.mcall { position: relative; background: var(--surface); border: 1px solid var(--line);
         border-left: 3px solid transparent; border-radius: var(--r);
         margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow); }
.mcall:last-child { margin-bottom: 0; }
.mcall.tier-green { border-left-color: var(--ok); }
.mcall.needs-review { border-left-color: var(--warn); }
.mcall-head { position: relative; z-index: 1; background: var(--surface);
              display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.dir { flex: none; width: 22px; display: grid; place-items: center;
       font-size: 18px; font-weight: 900; line-height: 1; }
.dir.in { color: var(--ok); } .dir.out { color: var(--accent-text); }
.dir.vm { color: var(--stop); font-size: 13px; }
.mcall-mid { display: block; flex: 1 1 auto; min-width: 0; }
.mcall-who { display: block; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcall-sub { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-bottom { display: flex; align-items: center; gap: 6px; min-height: 18px; margin-top: 4px; overflow: hidden; }
/* the CONFIRMED single match. Neutral on purpose, matching the app's
   .matched-pill: the briefcase carries the "one confirmed case" semantics and
   colour stays reserved for actions, so a matched row doesn't compete with the
   green that means ready-to-log. The candidate .hchip below is a different
   thing — an unresolved choice — and keeps its accent. */
.case-name { font-size: 11.5px; font-weight: 650; color: var(--ink);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hchip { flex: 0 1 auto; min-width: 0; border: 1px solid var(--accent-line); color: var(--accent-text);
         background: var(--accent-soft); border-radius: 999px; padding: 2px 9px;
         font-size: 10.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcall-meta { flex: none; align-self: flex-start; margin-left: auto; display: flex; flex-direction: column;
              align-items: flex-end; gap: 5px; text-align: right; color: var(--muted); font-size: 11px; white-space: nowrap; }
/* the mid-swipe card: content slid right, the green log layer revealed */
.mcall.swiping .mcall-head { transform: translateX(122px); }
.swipe-layer { position: absolute; inset: 0; display: flex; align-items: center;
               justify-content: flex-start; padding-left: 16px;
               background: var(--green-bg); color: var(--green-fg);
               font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.mock-hint { text-align: center; font-size: 11px; color: var(--faint); padding-top: 10px; }

/* ---- extra app tokens used by the feature mockups (copied from theme.css) -- */
:root { --dashed-line: var(--line-strong);
  --guess-bg: color-mix(in srgb, var(--guess-line) var(--tint-amt), var(--tint-base)); --guess-line: #c8a24d; --guess-fg: #7a5d17; }
@media (prefers-color-scheme: dark) { :root {
  --dashed-line: var(--line-strong);
  --guess-bg: color-mix(in srgb, var(--guess-line) var(--tint-amt), var(--tint-base)); --guess-line: #a8863a; --guess-fg: #d9c07a; } }

/* ---- dark-mode nudges for the mockups (light mode renders unchanged) -------
   On the dark ground, panels whose background is --bg vanish into the page,
   the excluded SMS bubbles all but disappear, and the paper-and-ink hero
   illustration loses its dark handset entirely. Lift each just enough. */
@media (prefers-color-scheme: dark) {
  .app-mock, .mk-frame { background: color-mix(in srgb, var(--surface) 60%, var(--bg)); }
  .mk-bubble.unsel { opacity: .68; }
  .s-ring .step-tile { background: color-mix(in srgb, var(--accent) 26%, transparent); }
}

/* ---- feature showcase: alternating text + app-idiom mockup rows ------------- */
.feature-row { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center;
  margin-top: clamp(30px, 5vw, 52px); }
@media (min-width: 820px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); }
  .feature-row.flip .feature-mock { order: -1; }
}
.feature-text .lead-chip { display: inline-block; margin-bottom: 12px; font-size: 11px; }
.feature-text h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 800;
  letter-spacing: -.01em; line-height: 1.2; }
.feature-text p { margin: 0; color: var(--muted); line-height: 1.62; font-size: 15px; }
.feature-text p + p { margin-top: 10px; }
.feature-text code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em; background: var(--accent-soft); color: var(--accent-text);
  padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.feature-mock { min-width: 0; }

/* a lighter mockup shell (the app's list ground, no phone header) */
.mk-frame { background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px; }
.mk-cap { font-size: 11px; color: var(--faint); text-align: center; padding-top: 10px; }

/* SMS thread + per-message selection (one thread → two matters) */
.mk-route { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); padding: 2px 2px 10px; }
.mk-thread { display: flex; flex-direction: column; gap: 6px; }
.mk-bubble { max-width: 84%; padding: 7px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.35;
  position: relative; }
.mk-bubble.in { align-self: flex-start; background: color-mix(in srgb, var(--ok) 16%, var(--surface));
  color: var(--ink); border-bottom-left-radius: 4px; }
.mk-bubble.out { align-self: flex-end; background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--ink); border-bottom-right-radius: 4px; }
.mk-bubble.unsel { opacity: .45; outline: 2px dashed var(--dashed-line); outline-offset: 1px; background: var(--surface-2); color: var(--muted); }
.mk-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  border-radius: 999px; padding: 2px 8px; }
.mk-tag.a { color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.mk-tag.b { color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }

/* short-code phrase: a resting field with the ⚡ expand chip beneath it */
.mk-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.mk-field { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 11px; font-size: 13.5px; color: var(--ink); min-height: 40px; }
.mk-field .caret { color: var(--faint); }
.mk-qp { display: block; width: 100%; margin-top: 6px; text-align: left; background: var(--accent-soft);
  border: 1px solid var(--accent-line); color: var(--accent-text); border-radius: var(--r-sm);
  padding: 7px 10px; font-size: 12.5px; font-weight: 600; }
.mk-qp .bolt { margin-right: 4px; }

/* time-entry row + follow-up task toggle (templates + scheduling) */
.mk-time { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 4px 0 12px; }
.mk-pill { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.mk-pill .pfx, .mk-pill .sfx { color: var(--muted); }
.mk-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.mk-track { width: 30px; height: 18px; border-radius: 10px; background: var(--ok); position: relative; flex: none; }
.mk-track::after { content: ""; position: absolute; top: 2px; left: 14px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mk-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ok);
  background: var(--good-soft); color: var(--ok); border-radius: 999px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 650; }
.mk-toggle .plus { font-weight: 800; }
.mk-due { font-size: 12px; color: var(--muted); margin-top: 8px; }
.mk-due b { color: var(--ink); font-weight: 650; }

/* variable chips for the template mockup */
.mk-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mk-var { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
  color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 6px; padding: 2px 7px; }

/* running-timer card (cross-device) */
.mk-timer { display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--r);
  padding: 12px 14px; box-shadow: var(--shadow); }
.mk-timer + .mk-timer { margin-top: 10px; }
.mk-clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px; letter-spacing: .01em; color: var(--ink); }
.mk-timer .who { font-weight: 650; font-size: 13.5px; }
.mk-timer .sub { color: var(--muted); font-size: 12px; }
.mk-run { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  font-weight: 700; color: var(--ok); }
.mk-run .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.mk-devices { display: flex; gap: 8px; justify-content: center; margin-top: 12px; font-size: 11px; color: var(--muted); }
.mk-devices span { display: inline-flex; align-items: center; gap: 5px; }

/* suggestion chips row (smart matching) — reuses .hchip; adds the variants */
.mk-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.hchip.history { border-style: dashed; background: var(--amber-bg); border-color: var(--warn); color: var(--amber-fg); }
.hchip.neighbor { border-style: dashed; background: var(--guess-bg); border-color: var(--guess-line); color: var(--guess-fg); }
.match-hint { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }

/* the OPEN call card — the entry interface itself (the app's .call.open
   idiom: accent frame, lifted shadow, tinted header, form below a hairline) */
.mk-open { background: var(--surface); border: 1px solid var(--accent-line); border-left: 3px solid var(--ok);
  border-radius: var(--r); box-shadow: var(--shadow-open); overflow: hidden; }
.mk-open-head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--accent-soft); }
.mk-open-form { padding: 12px 13px 14px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 11px; }
.mk-matched { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 650; color: var(--accent-text); background: var(--accent-soft);
  border: 1px solid var(--accent-line); padding: 4px 11px; border-radius: 999px; }
.mk-open .mk-time { margin: 8px 0 0; }
.mk-open .mk-field { font-size: 12.5px; }
/* the "matter rate" micro-hint floating above the rate pill — the app's own
   cue that the rate came from the matter, not typed in */
.mk-pill.rate { position: relative; }
.mk-pill.rate .hint { position: absolute; bottom: calc(100% + 3px); left: 9px;
  font-size: 9px; font-weight: 600; letter-spacing: .02em; color: var(--faint); white-space: nowrap; }

/* case-documents mockup (faxes, text media, voicemail filed to the matter) */
.mk-doc { display: flex; align-items: center; gap: 9px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px;
  font-size: 12.5px; font-weight: 600; color: var(--ink); min-width: 0;
  box-shadow: var(--shadow); }
.mk-doc + .mk-doc { margin-top: 6px; }
.mk-doc .ico { flex: none; }
/* filenames wrap rather than ellipsis — the client's name is the payload,
   and it's the tail an ellipsis would eat on a phone */
.mk-doc .fname { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.mk-doc .src { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }

/* the queue callout band */
.queue-band { margin-top: clamp(36px, 6vw, 56px); background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r);
  box-shadow: var(--shadow); padding: clamp(22px, 4vw, 32px); }
.queue-band h3, .queue-band h2 { margin: 0 0 10px; font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; }
.queue-band p { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.62; font-size: 15px; }
.queue-band .anytime { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; }
.queue-band .anytime span { font-size: 12px; font-weight: 650; color: var(--accent-text);
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 5px 12px; }

/* ---- sections -------------------------------------------------------------- */
.section { margin-top: clamp(36px, 6vw, 56px); }
.section-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                 color: var(--faint); padding: 0 4px 12px; }
.steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { background: var(--surface); border: 1px solid var(--line);
            border-left: 3px solid transparent; border-radius: var(--r);
            padding: 16px; box-shadow: var(--shadow); }
.steps li.s-ring   { border-left-color: var(--accent); }
.steps li.s-review { border-left-color: var(--warn); }
.steps li.s-bill   { border-left-color: var(--ok); }
.step-tile { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
             font-size: 15px; font-weight: 800; line-height: 1; margin-bottom: 10px; }
.s-ring   .step-tile { background: var(--accent-soft); color: var(--accent-text); }
.s-review .step-tile { background: var(--warn-soft);   color: var(--warn); }
.s-bill   .step-tile { background: var(--good-soft);   color: var(--ok); }
.steps h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.steps p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.steps .sweep { color: var(--stop); font-weight: 700; }

.trust { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .trust { grid-template-columns: 1fr 1fr; } }
.trust li { display: flex; gap: 12px; align-items: flex-start;
            background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
            padding: 14px 16px; box-shadow: var(--shadow); }
.trust .tick { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
               background: var(--good-soft); color: var(--ok); font-size: 13px; font-weight: 900; margin-top: 1px; }
.trust div { font-size: 13.5px; line-height: 1.55; color: var(--muted); min-width: 0; }
.trust b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 2px; }

/* the retired-hero illustration, kept as a quiet accent (Tom decides: keep /
   move / retire — it's this one block) */
.accent-plate { margin: 0 auto; max-width: 320px; padding: 18px 22px 10px; opacity: .92; }
.accent-plate img { display: block; width: 100%; height: auto; }

.cta-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
            box-shadow: var(--shadow); padding: clamp(20px, 4vw, 28px);
            display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.cta-card .cta-lead { flex: 1 1 260px; min-width: 0; }
.cta-card .cta-lead b { font-size: 16px; }
.cta-card .cta-lead p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }

/* ---- footer ---------------------------------------------------------------- */
.foot {
  max-width: 1020px; margin: 0 auto; padding: 18px 16px 28px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
  font-size: 12px; color: var(--muted);
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent-text); text-decoration: underline; }

/* ---- legal pages (privacy / terms) ----------------------------------------- */
main.doc {
  max-width: 760px; margin: clamp(20px, 4vw, 36px) auto 40px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: clamp(22px, 5vw, 44px);
}
.doc h1 { font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 800; letter-spacing: -.01em;
          line-height: 1.2; margin: 0 0 6px; max-width: none; }
.doc .date { font-size: 11.5px; font-weight: 700; color: var(--faint);
             letter-spacing: .05em; text-transform: uppercase; }
.doc h2 { font-size: 1.05rem; font-weight: 700; margin: 26px 0 8px; color: var(--ink); }
.doc p, .doc li { font-size: .95rem; line-height: 1.65; color: var(--ink); }
.doc li { margin-bottom: 6px; }
.doc .muted { color: var(--muted); }
.doc b { color: var(--ink); }
/* the app's amber notice carries the DRAFT banner */
.draft { background: var(--amber-bg); color: var(--amber-fg); border-radius: var(--r-sm);
         padding: 10px 14px; font-size: .85rem; font-weight: 600; margin-bottom: 20px; }
.doc .foot { max-width: none; padding: 14px 0 0; margin-top: 30px; }

/* ---- integration landing pages (mycase- / clio-ringcentral-integration) -----
   These reuse the landing layout above. index.html styles its section
   headings as <div class="section-title"> + <h3>, which is fine for a page
   with one h1 and no ranking job to do; the integration pages need a real
   h2/h3 outline for search engines, so the same look is defined here against
   the heading tags instead. Tokens only — no new colors, radii, or shadows. */
.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--accent-text); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { padding: 0 6px; color: var(--faint); }

.lp-h2 { margin: 0 0 10px; font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 800;
         letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.lp-sub { margin: 0 0 18px; max-width: 66ch; color: var(--muted); line-height: 1.62; font-size: 15px; }
.lp-sub + .lp-sub { margin-top: -8px; }

.lp-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .lp-grid { grid-template-columns: 1fr 1fr; } }

.lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
           box-shadow: var(--shadow); padding: clamp(15px, 2.6vw, 20px); min-width: 0; }
.lp-card + .lp-card { margin-top: 14px; }
.lp-grid .lp-card + .lp-card { margin-top: 0; }
.lp-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.lp-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.lp-card p + p { margin-top: 8px; }
.lp-card b { color: var(--ink); }
.lp-card code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                font-size: .88em; background: var(--surface-2); border: 1px solid var(--line);
                border-radius: 4px; padding: 1px 5px; }

/* the trust list carries the "what gets written" checklists, with a real h3 */
.trust h3 { display: block; color: var(--ink); font-size: 14px; font-weight: 700;
            margin: 0 0 2px; line-height: 1.35; }
.trust.one-up { grid-template-columns: 1fr; }
@media (min-width: 700px) { .trust.one-up { grid-template-columns: 1fr; } }

/* the cross-links row at the foot of a landing page */
.lp-links { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; }
.lp-links a { font-size: 12.5px; font-weight: 650; color: var(--accent-text); text-decoration: none;
              background: var(--accent-soft); border: 1px solid var(--accent-line);
              border-radius: 999px; padding: 6px 13px; }
.lp-links a:hover { text-decoration: underline; }