/* TeamFlow public site.
   Tokens mirror src/styles.css so the site and the dashboard are one system.
   Light is the reference. Three theme states, as in the app: bare :root is
   light, the media query covers "system", and [data-theme] wins over both. */

:root {
  --accent: #6d28d9;
  --accent-strong: #5b21b6;
  --accent-soft: #ede9fe;
  --accent-rgb: 109, 40, 217;
  --success: #16a34a;
  --success-bg: #dcfce7;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --warning: #d97706;
  --warning-bg: #fef3c7;
  --info: #2563eb;
  --info-bg: #dbeafe;
  --idle: #8a8aa3;
  --idle-bg: #eeeef4;

  --bg: #f5f5fa;
  --bg-radial: #ebe6fb;
  --surface: #ffffff;
  --surface-2: #f7f6fc;
  --surface-3: #efedf8;
  --text: #1b1830;
  --text-2: #4a4762;
  --muted: #7b7891;
  --line: #e5e4ef;
  --line-soft: #eeedf5;
  --link: #6d28d9;
  --shadow: rgba(46, 28, 90, 0.08);
  --header: #ffffff;

  --radius: 14px;
  --radius-sm: 9px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --container: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #8b5cf6;
    --accent-strong: #7c3aed;
    --accent-soft: #2e1f52;
    --accent-rgb: 139, 92, 246;
    --success: #36c98f;
    --success-bg: #123c31;
    --danger: #f35d7b;
    --danger-bg: #4b1f31;
    --warning: #e7a93c;
    --warning-bg: #4a3619;
    --info: #60a5fa;
    --info-bg: #1e2a4a;
    --idle: #8790a5;
    --idle-bg: #2a2340;

    --bg: #10091f;
    --bg-radial: #2b1747;
    --surface: #160d29;
    --surface-2: #1d1234;
    --surface-3: #251740;
    --text: #f7f2ff;
    --text-2: #d7c9ea;
    --muted: #9f91b7;
    --line: #3b2858;
    --line-soft: #2a1b42;
    --link: #c4a7ff;
    --shadow: rgba(3, 0, 12, 0.32);
    --header: #160d29;
  }
}

:root[data-theme="dark"] {
  --accent: #8b5cf6;
  --accent-strong: #7c3aed;
  --accent-soft: #2e1f52;
  --accent-rgb: 139, 92, 246;
  --success: #36c98f;
  --success-bg: #123c31;
  --danger: #f35d7b;
  --danger-bg: #4b1f31;
  --warning: #e7a93c;
  --warning-bg: #4a3619;
  --info: #60a5fa;
  --info-bg: #1e2a4a;
  --idle: #8790a5;
  --idle-bg: #2a2340;

  --bg: #10091f;
  --bg-radial: #2b1747;
  --surface: #160d29;
  --surface-2: #1d1234;
  --surface-3: #251740;
  --text: #f7f2ff;
  --text-2: #d7c9ea;
  --muted: #9f91b7;
  --line: #3b2858;
  --line-soft: #2a1b42;
  --link: #c4a7ff;
  --shadow: rgba(3, 0, 12, 0.32);
  --header: #160d29;
}

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(1200px 620px at 72% -220px, var(--bg-radial), transparent 72%);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font);
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
/* The eleven-gate rail is the widest view on the site, so it gets its own width. */
.wrap-wide { max-width: 1400px; margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--surface); padding: 10px 14px; border-radius: var(--radius-sm); }
.skip:focus { left: 16px; top: 12px; }
.hidden { display: none !important; }
/* Several rules below set display on elements the billing toggle hides, so the
   attribute needs to outrank them. */
[hidden] { display: none !important; }

/* ---------- The mascot lockup (docs/mockups/lockup-side.jpg) ----------
   Cat on the left, the handwritten note to its upper right, and the arrow
   beneath the note curving down-left with its head pointing at the cat. */
.lockup { display: flex; align-items: flex-start; gap: 6px; }
.lockup-main { display: flex; flex-direction: column; align-items: center; gap: 18px; flex: none; }
.lockup img { image-rendering: pixelated; width: var(--cat, 196px); height: var(--cat, 196px); }
.lockup-note { flex: none; padding-top: calc(var(--cat, 196px) * 0.14); }
.lockup .hand {
  display: block; font-family: var(--font-hand); color: var(--accent); font-weight: 700;
  font-size: var(--note, 27px); line-height: 1.06; white-space: nowrap;
  transform: rotate(-8deg); transform-origin: left bottom;
}
/* The arrow scales with the note rather than its width attribute, so the
   lockup shrinks as one piece on narrow screens. */
.lockup-arrow { display: block; width: calc(var(--note, 27px) * 3.1); height: auto; color: var(--accent); margin: 4px 0 0 calc(var(--note, 27px) * -0.5); }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--header) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 22px; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 44px; height: 44px; image-rendering: pixelated; }
.wordmark { font-size: 27px; font-weight: 800; letter-spacing: 0.005em; color: var(--text); line-height: 1; text-transform: uppercase; }
/* Who made this, next to the product name. Small, muted and the first
   thing to go when the header runs out of room. */
.by-lab { flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-left: -12px; }
.by-lab:hover { color: var(--accent); text-decoration: none; }
.site-nav { display: flex; gap: 4px; margin: 0 auto; }
.site-nav a { padding: 8px 17px; border-radius: 999px; color: var(--text-2); font-size: 15px; font-weight: 600; }
.site-nav a:hover { color: var(--accent); background: var(--surface-2); text-decoration: none; }
.site-nav a.is-on { background: var(--accent-soft); color: var(--accent); }
.head-actions { display: flex; gap: 10px; align-items: center; flex: none; margin-left: auto; }
.site-nav ~ .head-actions { margin-left: 0; }

.icon-btn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid transparent; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--text-2); }
.icon-btn:hover { background: var(--surface-2); color: var(--accent); }
.icon-btn .sun { display: none; }
:root[data-theme="dark"] .icon-btn .moon { display: none; }
:root[data-theme="dark"] .icon-btn .sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .moon { display: none; }
  :root:not([data-theme="light"]) .icon-btn .sun { display: block; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 19px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-outline { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); }
.btn-outline:hover { background: var(--accent-soft); }
.btn-lg { padding: 15px 28px; font-size: 16px; border-radius: 12px; }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ---------- Hero ---------- */
.hero { padding: 54px 0 30px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 44px; align-items: center; }
.eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.eyebrow i { color: rgba(var(--accent-rgb), 0.5); font-style: normal; }
.hero h1 { margin-top: 18px; font-size: clamp(40px, 5.6vw, 66px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; max-width: 15ch; }
.hero-lede { margin-top: 20px; font-size: 19.5px; line-height: 1.5; color: var(--text-2); max-width: 52ch; }
.hero-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-reassure { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.hero-reassure i { color: var(--line); font-style: normal; }
.hero-art { display: flex; justify-content: center; }
.hero-art .lockup { --cat: 212px; --note: 29px; }
.pill { border: 1px solid rgba(var(--accent-rgb), 0.32); border-radius: 999px; background: var(--surface); color: var(--accent); padding: 9px 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }

/* ---------- Stat cards ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 42px; }
.stat { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px var(--shadow); padding: 20px 22px; }
.badge { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex: none; }
.badge svg { width: 25px; height: 25px; }
.tone-purple { background: var(--accent-soft); color: var(--accent); }
.tone-blue { background: var(--info-bg); color: var(--info); }
.tone-green { background: var(--success-bg); color: var(--success); }
.tone-amber { background: var(--warning-bg); color: var(--warning); }
.stat-body { min-width: 0; }
.stat-body h3 { font-size: 14.5px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.stat-figure { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.stat-figure b { font-size: 31px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.delta { font-size: 13.5px; font-weight: 700; color: var(--success); display: inline-flex; align-items: center; gap: 2px; }
.stat-body small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }

/* ---------- Dashboard preview: board + activity ---------- */
.preview { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 20px; margin-top: 20px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px var(--shadow); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 13px; padding: 18px 22px 14px; }
.panel-head .badge { width: 40px; height: 40px; border-radius: 12px; }
.panel-head .badge svg { width: 20px; height: 20px; }
.panel-head h2 { font-size: 18px; font-weight: 700; }
.panel-head small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; font-weight: 400; }
.panel-link { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 13.5px; white-space: nowrap; }

.board-scroll { overflow-x: auto; padding: 0 18px 20px; }
.board { display: flex; align-items: stretch; min-width: 660px; }
.board-arrow { flex: none; display: grid; place-items: center; width: 20px; color: var(--line); }
.col { flex: 1 1 0; min-width: 0; border-radius: var(--radius-sm); padding-bottom: 8px; }
.col.is-focus { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.col-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; background: var(--surface-2); border-radius: var(--radius-sm); margin-bottom: 10px; }
.col.is-focus .col-head { background: var(--accent-soft); }
.col-head span { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-head b { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--idle); }
.dot-idle { background: var(--idle); }
.dot-info { background: var(--info); }
.dot-accent { background: var(--accent); }
.dot-warning { background: var(--warning); }
.dot-success { background: var(--success); }
.col-cards { display: grid; gap: 10px; padding: 0 6px; }
.card-tk { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px 12px; box-shadow: 0 2px 6px var(--shadow); }
.card-tk-top { display: flex; align-items: center; gap: 8px; }
.card-tk-top b { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.card-tk p { margin-top: 5px; font-size: 13px; color: var(--text-2); line-height: 1.35; }
.avatar { margin-left: auto; width: 23px; height: 23px; border-radius: 50%; flex: none; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

.activity { display: grid; padding: 0 20px 14px; }
.act { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; }
.act + .act { border-top: 1px solid var(--line-soft); }
.act .badge { width: 38px; height: 38px; border-radius: 12px; }
.act .badge svg { width: 19px; height: 19px; }
.act-body { min-width: 0; flex: 1; }
.act-body h3 { font-size: 14px; font-weight: 700; letter-spacing: 0; }
.act-body p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.act time { flex: none; font-size: 12.5px; color: var(--muted); white-space: nowrap; padding-top: 1px; }

/* ---------- Four-feature row ---------- */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 34px; padding-bottom: 8px; }
.feature { display: flex; gap: 14px; padding: 0 26px; }
.feature + .feature { border-left: 1px solid var(--line); }
.feature:first-child { padding-left: 0; }
.feature > svg { flex: none; color: var(--accent); margin-top: 2px; }
.feature h3 { font-size: 15px; font-weight: 700; }
.feature p { font-size: 13.5px; color: var(--muted); margin-top: 3px; }

/* ---------- Sections ---------- */
.section { padding: 78px 0; }
.section + .section { border-top: 1px solid var(--line-soft); }
.section h2 { font-size: clamp(27px, 3.1vw, 35px); font-weight: 800; letter-spacing: -0.028em; }
.section-lede { margin-top: 13px; color: var(--text-2); font-size: 17px; max-width: 62ch; }
.section-head { max-width: 64ch; }
.fine-print { margin-top: 24px; font-size: 13.5px; color: var(--muted); max-width: 72ch; }

/* ---------- The eleven-gate rail ---------- */
.rail-frame { margin-top: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 36px var(--shadow); overflow: hidden; }
.rail-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.rail-bar h3 { font-size: 14.5px; font-weight: 700; }
.rail-bar p { color: var(--muted); font-size: 12.5px; }
.rail-counts { margin-left: auto; display: flex; gap: 15px; flex-wrap: wrap; }
.rail-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 0 0; }
.rail { display: grid; grid-template-columns: repeat(11, minmax(104px, 1fr)); min-width: 1080px; padding: 0 14px 18px; }
.gate { position: relative; padding: 16px 7px 0; min-width: 0; }
.gate + .gate { border-left: 1px dashed var(--line); }
.gate-head { display: flex; align-items: center; gap: 7px; }
.gate-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--idle); flex: none; }
.gate-name { font-size: 11.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-rule { height: 3px; border-radius: 2px; background: var(--line); margin: 11px 0 14px; }
.gate.done .gate-dot { background: var(--success); }
.gate.done .gate-rule { background: color-mix(in srgb, var(--success) 42%, var(--line)); }
.gate.done .gate-name { color: var(--text); }
.gate.live .gate-dot { background: var(--info); box-shadow: 0 0 0 4px var(--info-bg); }
.gate.live .gate-rule { background: var(--info); }
.gate.live .gate-name { color: var(--text); }
.gate.audit .gate-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.gate.audit .gate-rule { background: var(--accent); }
.gate.audit .gate-name { color: var(--accent); font-weight: 800; }
.gate-slot { display: grid; gap: 8px; min-height: 84px; align-content: start; }

.tk { display: block; padding: 8px 9px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--idle); }
.tk b { display: block; font-size: 11px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.tk span { display: block; font-size: 11.5px; color: var(--text-2); line-height: 1.3; margin-top: 2px; }
.tk.ok { border-left-color: var(--success); background: color-mix(in srgb, var(--success-bg) 45%, var(--surface)); }
.tk.run { border-left-color: var(--info); background: color-mix(in srgb, var(--info-bg) 45%, var(--surface)); }
.tk.au { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }

.rail-rework { display: grid; grid-template-columns: repeat(11, minmax(104px, 1fr)); min-width: 1080px; padding: 0 14px 14px; }
.rw { position: relative; height: 40px; }
.rw-line { position: absolute; left: 25%; right: 25%; top: 0; bottom: 18px; border: 1.5px dashed var(--danger); border-top: 0; border-radius: 0 0 10px 10px; }
.rw-line::before { content: ""; position: absolute; left: -4.5px; top: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--danger); }
.rw-label { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--danger); }
.rail-foot { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 11px 20px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.key { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-2); font-size: 12.5px; }
.key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--idle); }
.key.ok i { background: var(--success); }
.key.run i { background: var(--info); }
.key.wait i { background: var(--warning); }
.key.au i { background: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .rail .gate-rule { transform-origin: left center; animation: fill 380ms cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i) * 55ms); }
  .rail .tk { animation: land 300ms ease both; animation-delay: calc(var(--i) * 55ms + 160ms); }
}
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes land { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Split prose + evidence ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 56px; align-items: start; }
.prose p + p { margin-top: 15px; }
.prose p { color: var(--text-2); max-width: 54ch; }
.prose strong { color: var(--text); font-weight: 700; }

.zoom { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px var(--shadow); padding: 22px 22px 18px; }
.zoom-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.zoom-gate { min-width: 0; padding: 0; }
.zoom-gate + .zoom-gate { border-left: 0; }
.zoom-gate .gate-head { margin-bottom: 9px; }
.zoom-gate .gate-name { font-size: 12.5px; }
.zoom-gate .gate-rule { margin: 0 0 12px; }
.zoom-note { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; gap: 10px; align-items: flex-start; }
.zoom-note svg { flex: none; color: var(--danger); margin-top: 2px; }
.zoom-note p { font-size: 13.5px; color: var(--text-2); }

/* ---------- Clients ---------- */
.clients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.client { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px var(--shadow); padding: 22px 24px; }
.client-head { display: flex; align-items: center; gap: 12px; }
.client-head .avatar { margin: 0; width: 38px; height: 38px; font-size: 15px; border-radius: 12px; }
.client-head h3 { font-size: 16px; font-weight: 700; }
.client-head small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.client > p { margin-top: 14px; font-size: 14px; color: var(--text-2); }
.client-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; gap: 16px; }
.client-foot span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.client-foot b { color: var(--text); }

/* ---------- Contract ---------- */
.contract { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px var(--shadow); overflow: hidden; }
.contract > div { padding: 26px 30px 28px; }
.contract > div:first-child { border-right: 1px solid var(--line); }
.contract h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.contract ul { margin-top: 14px; display: grid; gap: 9px; }
.contract li { display: flex; gap: 9px; font-size: 14.5px; color: var(--text-2); align-items: baseline; }
.contract li svg { flex: none; transform: translateY(2px); }
.allow h3 { color: var(--success); }
.deny h3 { color: var(--danger); }

/* ---------- Billing toggle and plans ---------- */
.billing { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.billing-opt { border: 0; background: transparent; color: var(--text-2); cursor: pointer; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.billing-opt.is-on { background: var(--surface); color: var(--accent); box-shadow: 0 2px 8px var(--shadow); }
.billing-opt em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--success); background: var(--success-bg); padding: 2px 7px; border-radius: 999px; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px var(--shadow); padding: 26px 28px 28px; }
.plan.is-featured { border-color: rgba(var(--accent-rgb), 0.45); }
.plan-tag { position: absolute; top: -11px; right: 22px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
.plan h3 { font-size: 19px; font-weight: 700; }
.plan > p { margin-top: 6px; color: var(--muted); font-size: 14px; }
.plan-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.plan-price b { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.plan-price span { color: var(--muted); font-size: 14.5px; font-weight: 600; }
.plan-save { margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--success); }
.plan ul { margin-top: 20px; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-2); align-items: baseline; }
.plan li svg { flex: none; color: var(--accent); transform: translateY(2px); }
.plan li b { color: var(--text); font-weight: 700; }
.plan .btn { margin-top: 24px; width: 100%; }

/* Plan picker on the signup form */
.picker { display: grid; gap: 12px; margin-top: 14px; }
.pick { display: block; cursor: pointer; position: relative; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick-body { display: flex; align-items: flex-start; gap: 13px; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.pick input:checked + .pick-body { border-color: var(--accent); background: var(--accent-soft); }
.pick input:focus-visible + .pick-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; margin-top: 2px; display: grid; place-items: center; background: var(--surface); }
.pick input:checked + .pick-body .pick-mark { border-color: var(--accent); }
.pick input:checked + .pick-body .pick-mark::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.pick-text { flex: 1; min-width: 0; }
.pick-text b { display: block; font-size: 14.5px; font-weight: 700; }
.pick-text small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.pick-cost { flex: none; text-align: right; }
.pick-cost b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.pick-cost small { display: block; color: var(--muted); font-size: 11.5px; }

/* Two ways to accept an invite, stacked and separated. */
.lede + .path { margin-top: 26px; }
.path + .path { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.path h2 { font-size: 16.5px; font-weight: 700; }
.path > p { margin-top: 6px; color: var(--text-2); font-size: 14.5px; max-width: 52ch; }
.path > .btn { margin-top: 18px; }

/* ---------- Footer ---------- */
.site-foot { flex: none; border-top: 1px solid var(--line); background: var(--surface); padding: 46px 0 52px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-grid h4 { font-size: 12.5px; font-weight: 700; color: var(--text); }
.foot-grid ul { margin-top: 12px; display: grid; gap: 9px; }
.foot-grid a { font-size: 13.5px; color: var(--text-2); }
.foot-grid a:hover { color: var(--accent); }
.foot-brand p { margin-top: 14px; color: var(--muted); font-size: 13px; max-width: 32ch; }
.foot-legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12.5px; display: flex; gap: 16px; flex-wrap: wrap; }
/* The legal row is one muted line; a link in it reads as a link on hover
   rather than shouting in accent colour next to plain text. */
.foot-legal a { color: var(--text-2); }
.foot-legal a:hover { color: var(--accent); }

/* ---------- Forms ---------- */
.page-narrow { padding: 48px 0 76px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: 46px; align-items: start; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 38px var(--shadow); padding: 30px 32px 32px; }
.card h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.card > p.lede { margin-top: 11px; color: var(--text-2); font-size: 15.5px; max-width: 48ch; }
.field { display: block; margin-top: 22px; }
.field > span { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
.field > small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.field input { width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 15px; }
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.fieldset { margin-top: 26px; border: 0; padding: 0; }
.fieldset legend { padding: 0; font-size: 13.5px; font-weight: 700; }
.fieldset-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.form-foot { margin-top: 26px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.form-foot small { color: var(--muted); font-size: 12.5px; }

.aside h2 { font-size: 16px; font-weight: 700; }
.aside ol { margin-top: 16px; display: grid; gap: 16px; counter-reset: s; }
.aside ol li { position: relative; padding-left: 30px; font-size: 14px; color: var(--text-2); counter-increment: s; }
.aside ol li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.aside ol li b { color: var(--text); font-weight: 700; }
.aside .fine { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

.note { margin-top: 22px; padding: 15px 17px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); display: flex; gap: 12px; align-items: flex-start; }
.note > svg { flex: none; margin-top: 2px; }
.note h3 { font-size: 14.5px; font-weight: 700; }
.note p { margin-top: 5px; font-size: 14px; color: var(--text-2); }
.note p code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
.note .btn { margin-top: 13px; }
.note.bad { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger-bg) 42%, var(--surface)); }
.note.bad h3, .note.bad > svg { color: var(--danger); }
.note.warn { border-color: color-mix(in srgb, var(--warning) 40%, var(--line)); background: color-mix(in srgb, var(--warning-bg) 48%, var(--surface)); }
.note.warn h3, .note.warn > svg { color: var(--warning); }
.note.good { border-color: color-mix(in srgb, var(--success) 38%, var(--line)); background: color-mix(in srgb, var(--success-bg) 42%, var(--surface)); }
.note.good h3, .note.good > svg { color: var(--success); }
.note.info > svg { color: var(--accent); }

.spin { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin 720ms linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.secret { margin-top: 24px; }
.secret-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.secret-head h2 { font-size: 16px; font-weight: 700; }
.secret-head .once { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warning); background: var(--warning-bg); padding: 3px 9px; border-radius: 999px; }
.secret-box { margin-top: 11px; display: flex; gap: 10px; align-items: center; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: var(--radius-sm); background: var(--surface-2); padding: 12px 13px; }
.secret-box code { flex: 1; min-width: 0; font-size: 13.5px; word-break: break-all; color: var(--text); }
.secret-box .btn { flex: none; padding: 7px 13px; font-size: 13px; }
.kv { margin-top: 20px; display: grid; gap: 10px; }
.kv div { display: flex; gap: 12px; font-size: 14px; align-items: baseline; }
.kv dt { width: 120px; flex: none; color: var(--muted); font-size: 13px; font-weight: 600; }
.kv dd { margin: 0; color: var(--text); font-weight: 600; word-break: break-all; }

pre { background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

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

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .preview { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
  .hero-art .lockup { --cat: 156px; --note: 23px; }
  .site-nav a { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art { justify-content: flex-start; order: -1; }
  .hero-art .lockup { --cat: 118px; --note: 20px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .feature:nth-child(3) { padding-left: 0; border-left: 0; }
  .split, .form-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .clients { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 820px) {
  .site-nav { display: none; }
  .by-lab { display: none; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  .section { padding: 56px 0; }
  .hero { padding: 34px 0 14px; }
  .hero h1 { font-size: clamp(32px, 9vw, 42px); max-width: none; }
  .hero-art .lockup { --cat: 100px; --note: 17px; }
  .hero-lede { font-size: 17px; }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .features { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .feature { padding: 0; border-left: 0 !important; }
  .contract { grid-template-columns: minmax(0, 1fr); }
  .contract > div { padding: 22px 20px; }
  .contract > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .zoom-rail { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rail-rework { display: none; }
  .card { padding: 24px 20px 26px; }
  .kv dt { width: 100px; }
  .panel-head { padding: 16px 16px 12px; }
  .board-scroll { padding: 0 14px 18px; }
  .activity { padding: 0 16px 12px; }
  .plan { padding: 22px 20px 24px; }
  .pick-body { padding: 13px 14px; }
}
@media (max-width: 520px) {
  /* The header is the one row that cannot wrap, so it shrinks instead. */
  .site-head .wrap { gap: 10px; height: 64px; padding: 0 14px; }
  .brand { gap: 8px; }
  .brand img { width: 32px; height: 32px; }
  .wordmark { font-size: 18px; }
  .head-actions { gap: 6px; }
  .head-actions .btn { padding: 8px 12px; font-size: 13px; gap: 6px; }
  .icon-btn { width: 32px; height: 32px; }
  .head-actions .hide-xs { display: none; }
}
@media (max-width: 460px) {
  .hero-cta .btn { flex: 1 1 auto; }
  .billing { width: 100%; }
  .billing-opt { flex: 1; justify-content: center; padding: 8px 10px; }
}

@media (max-width: 359px) {
  /* Below the narrowest common phone the mark carries the brand on its own. */
  .wordmark { display: none; }
}

/* ---------- FAQ (#faq) ----------
   Two columns of plain question-and-answer, never a disclosure widget: the
   answers are what an answer engine quotes, so they stay in the rendered
   text rather than behind a summary the crawler has to open. */
.faq { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.faq-item h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.012em; color: var(--text); }
.faq-item p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); }

@media (max-width: 760px) {
  .faq { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- Works with your tools (#clients) ----------
   Eleven rows, not eleven cards: the reader is scanning for their own
   editor's name and one word about whether it is automatic. Each row is
   the whole link, so the target is a row rather than a word. */
.tools { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tools-cmd { margin-top: 26px; }
.tool { display: flex; flex-direction: column; gap: 7px; padding: 13px 16px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 2px 8px var(--shadow); color: var(--text); }
.tool:hover { border-color: rgba(var(--accent-rgb), 0.45); text-decoration: none; }
.tool-top { display: flex; align-items: baseline; gap: 10px; }
.tool b { font-size: 14.5px; font-weight: 700; }
.tool i { font-size: 12.5px; font-style: normal; color: var(--muted); margin-left: auto; text-align: right; white-space: nowrap; }
.tool code { font-size: 12px; color: var(--text-2); background: var(--surface-2); border-radius: 6px; padding: 4px 8px; overflow-x: auto; white-space: nowrap; }
.tool.is-auto { border-color: rgba(var(--accent-rgb), 0.45); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.tool.is-auto i { color: var(--accent); font-weight: 700; }

@media (max-width: 980px) {
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tools { grid-template-columns: 1fr; }
}

/* ---------- Legal pages (/privacy/, /terms/) ----------
   A legal page is read in two ways: scanned for one clause, or read
   through once. So the contents list is a real column that stays on
   screen while the document scrolls, and every heading is a link target
   the reader can send to somebody else. Measure is capped at 72ch
   because a policy is long-form prose, not a marketing column. */
.legal { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 34px; }
.legal-head { max-width: 62ch; }
.legal-head h1 { font-size: clamp(32px, 4.2vw, 44px); font-weight: 800; letter-spacing: -0.035em; }
.legal-head .lede { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.legal-dates { margin-top: 18px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.legal-dates b { color: var(--text-2); font-weight: 700; }

.legal-toc { position: sticky; top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px var(--shadow); padding: 18px 20px 20px; }
.legal-toc h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.legal-toc ol { margin-top: 12px; display: grid; gap: 8px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.35; color: var(--text-2); }
.legal-toc a::before { content: counter(toc); flex: none; width: 17px; color: var(--muted); font-weight: 700; font-size: 12px; text-align: right; }
.legal-toc a:hover { color: var(--accent); text-decoration: none; }

.legal-doc { max-width: 72ch; }
.legal-doc section { scroll-margin-top: 20px; }
.legal-doc section + section { margin-top: 38px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.legal-doc h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.022em; }
.legal-doc h3 { margin-top: 24px; font-size: 15.5px; font-weight: 700; }
.legal-doc p { margin-top: 13px; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.legal-doc p strong, .legal-doc li strong { color: var(--text); font-weight: 700; }
.legal-doc ul { margin-top: 14px; display: grid; gap: 10px; }
.legal-doc li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.legal-doc li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.55); }
.legal-doc a { text-decoration: underline; text-underline-offset: 2px; }
.legal-doc code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }

/* A fact only Steve can supply is loud on purpose: an unfilled placeholder
   in a published policy has to be impossible to skim past. */
.tbc { background: var(--warning-bg); color: var(--warning); border: 1px dashed color-mix(in srgb, var(--warning) 55%, var(--line)); border-radius: 5px; padding: 1px 6px; font-size: 0.92em; font-weight: 700; }

.legal-table { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.legal-table table { border-collapse: collapse; width: 100%; min-width: 440px; }
.legal-table th, .legal-table td { text-align: left; padding: 11px 14px; font-size: 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.legal-table th { font-weight: 700; color: var(--text); background: var(--surface-2); white-space: nowrap; }
.legal-table td { color: var(--text-2); }
.legal-table tr:last-child td { border-bottom: 0; }

@media (max-width: 980px) {
  /* minmax(0, ...) and not 1fr: a grid track sized auto takes its minimum
     from its widest content, so the scrollable table inside would push the
     whole page wider than the phone instead of scrolling in its own box. */
  .legal { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .legal-toc { position: static; }
}
@media (max-width: 560px) {
  .legal-doc section + section { margin-top: 30px; padding-top: 26px; }
  .legal-doc h2 { font-size: 20px; }
}