/* 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. */

/* A stand-in for Caveat with Caveat's width, used only while the real face
   is in flight. size-adjust: 82% is measured, not guessed: the string in the
   hero note renders 66.2px in Caveat and 80.7px in the fallbacks, and
   66.2/80.7 is 0.82. Matching the metrics means the swap moves nothing,
   which is worth having on its own: an unmatched swap is layout shift. */
@font-face {
  font-family: "Caveat fallback";
  src: local("Bradley Hand"), local("Segoe Print"), local("Comic Sans MS"),
       local("DejaVu Sans"), local("Arial");
  size-adjust: 82%;
  font-display: swap;
}

:root {
  /* Two accent roles, because one value cannot serve both. --accent is the
     accent as ink: text, icons, rules, read against a page surface.
     --accent-fill is the accent as a surface with a white label on it. They
     pull in opposite directions -- ink wants distance from the background,
     fill wants distance from white -- and holding them in one token is what
     put eleven elements under 4.5:1 in dark mode. In light mode the two are
     the same value, which is why nothing here changes. */
  --accent: #6d28d9;
  --accent-strong: #5b21b6;
  --accent-soft: #ede9fe;
  --accent-rgb: 109, 40, 217;
  --accent-fill: #6d28d9;
  --accent-fill-hover: #5b21b6;
  --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", "Caveat fallback", cursive;
  --container: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Ink lightens, fill darkens. #a78bfa clears 4.5:1 on every dark
       surface the site paints (5.4:1 on --accent-soft, the worst of them);
       white on #7c3aed is 5.7:1. The old single #8b5cf6 was 4.06-4.41
       either way round, which is the whole of the contrast failure. */
    --accent: #a78bfa;
    --accent-strong: #8b5cf6;
    --accent-soft: #2e1f52;
    --accent-rgb: 167, 139, 250;
    --accent-fill: #7c3aed;
    --accent-fill-hover: #6d28d9;
    --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: #a78bfa;
  --accent-strong: #8b5cf6;
  --accent-soft: #2e1f52;
  --accent-rgb: 167, 139, 250;
  --accent-fill: #7c3aed;
  --accent-fill-hover: #6d28d9;
  --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; max-width: 100%; }
.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); }
/* The note may give before the page does. Caveat is a condensed hand and
   every fallback on the stack renders the same string about 22% wider, so
   while the web font is in flight this note was 80px where Caveat makes it
   66px. With both children flex: none the row could not absorb that, and a
   390px phone scrolled sideways for the few hundred milliseconds before the
   swap. Two things stop it: the metric-matched fallback below, which makes
   the two renderings the same width, and this, which lets the note shrink
   whatever font resolves. The <br> in the markup still sets the intended
   break; wrapping only happens under pressure. */
.lockup-note { flex: 0 1 auto; min-width: 0; 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;
  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-fill); border-color: var(--accent-fill); color: #fff; }
.btn-primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.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 .stat-name { 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-fill); 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-fill); 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; }

/* A button that reads as the link it behaves like: switching the signup form
   between the plan picker and the invite code is navigation within the page,
   not a second thing to submit. */
.linky { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linky:hover { color: var(--text); }
.linky:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- 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; }
}

/* ---------- Client guides (/clients/, /clients/<tool>/) ----------
   Generated pages that reuse the legal-page shell. Two things they add:
   a way back up to the index, and a snippet nobody has to select by hand.
   Every command on these pages is meant to be pasted somewhere, so the
   copy control sits on the block rather than under it. */
.crumb { font-size: 13px; font-weight: 600; color: var(--muted); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.crumb + h1 { margin-top: 8px; }

.snip { position: relative; margin-top: 16px; }
.snip pre { margin: 0; padding-right: 88px; }
/* The button overlays the block, so it must not sit on the first line of
   a one-line command: the padding above reserves the column for it. */
.copy { position: absolute; top: 8px; right: 8px; padding: 4px 11px; font: 600 12px/1.6 var(--font); color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.copy:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); }
.copy:active { transform: translateY(1px); }

.legal-doc .snip + p, .legal-doc .snip + ul, .legal-doc .snip + ol { margin-top: 14px; }
.legal-doc h3 + .snip { margin-top: 12px; }
.legal-doc ol { margin-top: 14px; display: grid; gap: 10px; counter-reset: step; }
.legal-doc ol li { counter-increment: step; }
.legal-doc ol li::before { content: counter(step); left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.12); color: var(--accent); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

.clients-index { margin-top: 30px; max-width: 980px; }
.clients-index .tools { margin-top: 22px; }
.clients-index .fine-print { margin-top: 22px; }

@media (max-width: 560px) {
  .snip pre { padding-right: 14px; padding-top: 38px; }
  .copy { top: 6px; right: 6px; }
}