/* ==========================================================================
   Thredo — marketing site, v2
   --------------------------------------------------------------------------
   The ground, the type and the restraint carry the page. The product is the
   picture: a real conversation, played once, with the journey line beneath.

   Dark first. The bare :root is the dark palette; [data-theme="light"] is
   the full light palette. Every colour on the page is a token so both
   themes resolve as a set. Yellow is the Thredo signal — the word that
   matters, the moment happening now, the dot — never a button, never a
   decoration.

   Contents
     1  Fonts and tokens
     2  Base
     3  Header, mega menus, mobile sheet
     4  Buttons
     5  Hero and the conversation
     6  Sections
     7  Footer
     8  Motion
   ========================================================================== */

/* 1 — Fonts and tokens ==================================================== */

@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('/assets/fonts/newsreader-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('/assets/fonts/newsreader-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 300 500; font-display: swap;
  src: url('/assets/fonts/newsreader-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cal Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/cal-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans Variable'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Sans Variable'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* The ground: near-black with a warm bias, never flat #000. */
  --ground:    #121311;
  --ground-2:  #171815;
  --surface:   #1B1C19;
  --surface-2: #22231F;
  --ink:       #ECEAE3;
  --ink-2:     #A7A49C;
  --ink-3:     #76746E;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  /* The signal. */
  --signal:      #FFD400;
  --signal-soft: rgba(255,212,0,.14);
  --on-signal:   #0E0F17;

  /* Buttons are the ink inverted — the signal is not a button. */
  --btn:       #F1EFE8;
  --btn-ink:   #0E0F17;
  --btn-hover: #FFFFFF;

  /* Paper: the conversation cards are a screen, white in both themes. */
  --paper:       #FFFFFF;
  --paper-2:     #F3F2EE;
  --paper-ink:   #0E0F17;
  --paper-ink-2: #6E6A65;
  --paper-line:  rgba(14,15,23,.08);

  --grain-opacity: .09;
  --grain-blend: overlay;
  --field-alpha: .13;

  --font: 'DM Sans Variable', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-brand: 'Cal Sans', var(--font);

  --radius-pill: 999px;
  --radius: 12px;
  --radius-card: 20px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 160ms;

  --max: 1240px;
  --gutter: clamp(16px, 4vw, 48px);

  /* Aliases for the rules ported from thredo.css (section 9). The old names
     resolve to the new tokens so every page reads as one system. */
  --canvas: var(--ground); --subtle: var(--surface-2); --paper-old: var(--ground);
  --line-solid: var(--line-2);
  --lime: var(--signal); --lime-soft: var(--signal-soft); --on-lime: var(--on-signal);
  --primary: var(--btn); --primary-hover: var(--btn-hover);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-md: 10px; --radius-band: 24px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.25); --shadow-sm: 0 2px 8px -1px rgba(0,0,0,.3);
  --shadow-md: 0 6px 16px -4px rgba(0,0,0,.35); --shadow-lg: 0 12px 28px -6px rgba(0,0,0,.45); --shadow-xl: 0 20px 44px -8px rgba(0,0,0,.5);
  --ease-out: var(--ease); --ease-in: cubic-bezier(.55,0,1,.45); --dur-fast: 120ms; --dur-slow: 480ms; --rise: 14px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground:    #F4F2EC;
  --ground-2:  #ECE9E1;
  --surface:   #FFFFFF;
  --surface-2: #F8F7F3;
  --ink:       #0E0F17;
  --ink-2:     #615E58;
  --ink-3:     #8F8B84;
  --line:      rgba(14,15,23,.09);
  --line-2:    rgba(14,15,23,.16);
  --signal-soft: rgba(255,212,0,.22);
  --btn:       #0E0F17;
  --btn-ink:   #FFFFFF;
  --btn-hover: #26272B;
  --grain-opacity: .05;
  --grain-blend: multiply;
  --field-alpha: .16;
}

/* 2 — Base ================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
svg[hidden] { display: none; }
/* The icon set is drawn with round caps by inheritance; the mark keeps its blunt caps. */
svg { stroke-linecap: round; stroke-linejoin: round; }
.brand svg { stroke-linecap: butt; stroke-linejoin: miter; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 10px 14px; background: var(--btn); color: var(--btn-ink); border-radius: var(--radius-pill); font-weight: 500; }
.skip:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Paper grain over the ground, under the content. */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
.page { position: relative; z-index: 1; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Type scale */
.display, h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(44px, 6.2vw, 80px); line-height: 1.0; letter-spacing: -0.03em; font-variation-settings: 'opsz' 72; }
h2 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.015em; }
.sig { color: var(--signal); font-style: italic; font-variation-settings: 'opsz' 72; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 18px; }
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; margin: 0; }
p { margin: 0; text-wrap: pretty; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }

/* 3 — Header ============================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  transition: background-color var(--dur) ease, border-color var(--dur) ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { background: color-mix(in srgb, var(--ground) 86%, transparent); border-color: var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header-row { display: flex; align-items: center; gap: 8px; height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-brand); font-size: 22px; line-height: 1; color: var(--ink); margin-right: 28px; }
.brand svg { width: 24px; height: 24px; border-radius: 5px; }
.brand-sub { font-family: var(--font); font-size: 11px; color: var(--ink-3); letter-spacing: .02em; margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: static; }
.nav-item.anchored { position: relative; }
.nav-item.anchored .mega { top: calc(100% + 8px); left: 0; translate: 0 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  transition: color var(--dur) ease, background-color var(--dur) ease;
}
.nav-link:hover, .nav-item.open > .nav-link, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link .caret { width: 12px; height: 12px; transition: transform var(--dur) ease; opacity: .7; }
.nav-item.open > .nav-link .caret { transform: rotate(180deg); }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.theme-toggle { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--ink-2); transition: color var(--dur) ease, background-color var(--dur) ease; }
.theme-toggle:hover { color: var(--ink); background: var(--surface-2); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
:root[data-theme="light"] .theme-toggle .moon { display: block; }
:root[data-theme="light"] .theme-toggle .sun { display: none; }

/* Mega menus — one dark card under the bar, 160ms in. */
.mega {
  position: absolute; top: calc(76px - 6px); left: 50%; translate: -50% 0;
  min-width: 320px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-card);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.2);
  padding: 22px;
  animation: mega-in var(--dur) var(--ease) both;
}
.mega[hidden] { display: none; }
.mega.wide { width: min(1040px, calc(100vw - 2 * var(--gutter))); }
.mega.channels { width: min(640px, calc(100vw - 2 * var(--gutter))); }
.mega-h.gap { margin-top: 14px; }
.mega-grid { display: grid; gap: 28px; }
.mega-grid.cols-3 { grid-template-columns: 1.1fr 1.1fr 1fr; }
.mega-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.mega-h { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 10px 12px; }
.mega-link {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start;
  padding: 10px 12px; border-radius: 14px;
  transition: background-color var(--dur) ease;
}
.mega-link:hover { background: var(--surface-2); }
.mega-link .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ground-2); border: 1px solid var(--line); color: var(--ink); }
.mega-link .ic svg { width: 18px; height: 18px; }
.mega-link .ic img { width: 20px; height: 20px; }
.mega-link b { display: block; font-weight: 500; font-size: 15px; color: var(--ink); line-height: 1.3; }
.mega-link small { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.mega-link .new { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 2px 6px; border-radius: 4px; background: var(--signal); color: var(--on-signal); vertical-align: 2px; }
.mega-feature {
  background: var(--ground-2); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px; min-height: 100%;
}
.mega-feature .mega-h { margin-left: 0; }
.mega-feature p { color: var(--ink-2); font-size: 14px; }
.mega-feature .display { font-size: 24px; line-height: 1.1; }
.mega-feature .more { margin-top: auto; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.mega-feature .more svg { width: 14px; height: 14px; }
.mega-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-2); }
.mega-foot a { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.mega-foot a svg { width: 14px; height: 14px; }

/* Mobile sheet */
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 50%; place-items: center; color: var(--ink); }
.nav-toggle svg { width: 20px; height: 20px; }
@media (max-width: 1023px) {
  .header-row { height: 64px; }
  .brand { margin-right: auto; }
  .nav-toggle { display: grid; }
  .header-right .btn, .header-right .nav-action { display: none; }
  .nav {
    display: none; position: fixed; inset: 64px 0 0 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground); overflow-y: auto; padding: 8px var(--gutter) 40px;
    border-top: 1px solid var(--line);
  }
  .nav.open { display: flex; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-link { width: 100%; justify-content: space-between; padding: 16px 0; font-size: 18px; border-radius: 0; }
  .mega, .nav-item.anchored .mega { position: static; translate: 0 0; min-width: 0; width: auto !important; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 12px; background: transparent; animation: none; }
  .mega.wide { width: auto; }
  .mega-grid, .mega-grid.cols-3, .mega-grid.cols-2 { grid-template-columns: 1fr; gap: 10px; }
  .mega-feature { display: none; }
  .mega-h { margin-left: 0; }
  .mega-link { padding: 8px 0; }
  .nav-mobile-ctas { display: grid; gap: 10px; padding-top: 20px; }
}
@media (min-width: 1024px) { .nav-mobile-ctas { display: none; } }

/* 4 — Buttons ============================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease, transform 80ms ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--btn); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-outline { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.nav-action { padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--ink-2); border-radius: var(--radius-pill); white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1180px) { .header-right .btn-outline { display: none; } .brand { margin-right: 16px; } }
.nav-action:hover { color: var(--ink); }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
.link svg { width: 14px; height: 14px; transition: transform var(--dur) ease; }
.link:hover svg { transform: translateX(2px); }

/* 5 — Hero and the conversation =========================================== */

.hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 104px); }
.hero .field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.hero-copy { max-width: 620px; }
.hero-copy .lead { margin-top: 24px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 16px; font-size: 14px; color: var(--ink-3); }
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 640px; }
}

/* The conversation card: paper, like a screen. */
.convo {
  background: var(--paper); color: var(--paper-ink);
  border-radius: var(--radius-card); border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.12);
  padding: 18px 18px 20px; max-width: 520px; margin-left: auto;
  font-size: 15px; line-height: 1.45;
}
.convo-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px; border-bottom: 1px solid var(--paper-line); margin-bottom: 14px; font-size: 13px; color: var(--paper-ink-2); }
.convo-head img { width: 20px; height: 20px; }
.convo-head b { color: var(--paper-ink); font-weight: 500; }
.convo-head .dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.msgs { display: grid; gap: 10px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; }
.msg.in { background: var(--paper-2); border-bottom-left-radius: 6px; justify-self: start; }
.msg.out { background: var(--paper-ink); color: var(--paper); border-bottom-right-radius: 6px; justify-self: end; }
.msg .who { display: block; font-size: 11px; color: var(--paper-ink-2); margin-bottom: 3px; letter-spacing: .02em; }
.msg.out .who { color: rgba(255,255,255,.55); }
.msg.human { background: #2E6B4E; }
.tool { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 12.5px; color: var(--paper-ink-2); padding: 6px 10px 6px 8px; border: 1px solid var(--paper-line); border-radius: var(--radius-pill); }
.tool img { width: 16px; height: 16px; }
.tool .tick { width: 14px; height: 14px; color: #047857; }

/* The journey line under it: four moments, yellow marks the one happening now. */
.journey { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; position: relative; }
.journey::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 5px; height: 1px; background: var(--line-2); }
.journey li { list-style: none; text-align: center; font-size: 12px; color: var(--ink-3); position: relative; padding-top: 18px; letter-spacing: .02em; }
.journey li::before { content: ''; position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--ground); border: 1px solid var(--line-2); transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease; }
.journey li.done { color: var(--ink-2); }
.journey li.done::before { background: var(--ink-2); border-color: var(--ink-2); }
.journey li.now { color: var(--ink); }
.journey li.now::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-soft); }
.journey { padding: 0; max-width: 520px; margin-left: auto; }
@media (max-width: 1023px) { .convo, .journey { margin-left: 0; } }

/* 6 — Sections ============================================================ */

section.block { padding: clamp(64px, 9vw, 128px) 0; border-top: 1px solid var(--line); }
.block-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 64px); }
.block-head .lead { margin-top: 16px; }
.block-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.block-head.center .lead { margin-left: auto; margin-right: auto; }

/* Channel strip */
.strip { padding: 28px 0; border-top: 1px solid var(--line); }
.strip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.strip p { font-size: 14px; color: var(--ink-3); margin-right: auto; }
.strip a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color var(--dur) ease; }
.strip a:hover { color: var(--ink); }
.strip img { width: 18px; height: 18px; opacity: .9; }

/* Pillars: three jobs on one thread. */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.pillar { padding: 28px 28px 0 0; position: relative; }
.pillar + .pillar { padding-left: 28px; border-left: 1px solid var(--line); }
.pillar .n { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); margin-bottom: 22px; position: relative; }
.pillar.now .n { background: var(--signal); box-shadow: 0 0 0 5px var(--signal-soft); }
.pillar h3 { margin-bottom: 12px; }
.pillar p { color: var(--ink-2); max-width: 36ch; }
.pillar .ex { margin-top: 22px; font-size: 14px; display: grid; gap: 8px; }
.pillar .ex span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.pillar .ex span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); flex: none; }
.pillars::before { content: ''; position: absolute; left: 0; right: 0; top: 32px; height: 1px; background: var(--line-2); }
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; }
  .pillars::before { display: none; }
  .pillar + .pillar { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 28px; }
}

/* Two-up: copy beside a paper card */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.two .block-head { margin-bottom: 0; }
.two.flip > :first-child { order: 2; }
@media (max-width: 960px) { .two { grid-template-columns: 1fr; } .two.flip > :first-child { order: 0; } }

/* Handover card: a human joins mid-thread. */
.handover { max-width: 520px; }
.handover .joined { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--paper-ink-2); justify-self: center; margin: 4px 0; }
.handover .joined .av { width: 22px; height: 22px; border-radius: 50%; background: var(--signal); color: var(--on-signal); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.flag { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 12.5px; font-weight: 500; color: var(--paper-ink); padding: 6px 10px; border-radius: var(--radius-pill); background: var(--signal-soft); border: 1px solid rgba(255,212,0,.5); }
.flag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }

/* Steps */
.moments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.moment { padding-top: 20px; border-top: 1px solid var(--line-2); position: relative; }
.moment::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.moment.now::before { background: var(--signal); box-shadow: 0 0 0 4px var(--signal-soft); }
.moment b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; margin-bottom: 8px; }
.moment p { color: var(--ink-2); font-size: 15px; }
.moments.three { grid-template-columns: repeat(3, 1fr); }
.moment .num { display: block; font-size: 12px; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 8px; }
.moment .small { display: block; margin-top: 8px; color: var(--ink-3); }
@media (max-width: 860px) { .moments, .moments.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .moments, .moments.three { grid-template-columns: 1fr; } }

/* Integrations */
.logos { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(32px, 5vw, 56px); }
.logos span { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; color: var(--ink-2); background: var(--surface); }
.logos img { width: 20px; height: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px; }
.card h3 { font-size: 22px; margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: 15px; }
.card .ex { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; display: grid; gap: 6px; }
.card .ex i { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--ink); }
.card .ex span { color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.card .ex span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }
.card .link { margin-top: 18px; font-size: 14px; }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }

/* Pricing teaser + close */
.teaser { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line-2); border-radius: var(--radius-card); background: var(--surface); }
.teaser .display { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; }
.teaser p { color: var(--ink-2); margin-top: 8px; }
@media (max-width: 760px) { .teaser { grid-template-columns: 1fr; } }

.close { text-align: center; padding: clamp(80px, 12vw, 160px) 0; border-top: 1px solid var(--line); }
.close h2 { font-size: clamp(40px, 6vw, 88px); max-width: 16ch; margin: 0 auto; }
.close .lead { margin: 24px auto 0; max-width: 46ch; }
.close .hero-ctas { justify-content: center; }

/* 7 — Footer ============================================================== */

.site-footer { border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 80px) 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(6, 1fr); gap: 32px 24px; }
.footer-brand p { color: var(--ink-2); font-size: 14px; margin-top: 14px; max-width: 26ch; }
.footer-col .footer-h { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.footer-col a { display: block; font-size: 14px; color: var(--ink-2); padding: 5px 0; transition: color var(--dur) ease; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.footer-bottom .status { display: inline-flex; align-items: center; gap: 8px; }
.footer-bottom .status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2FBF71; }
.footer-bottom nav { display: flex; gap: 18px; }
.footer-bottom nav a:hover { color: var(--ink); }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* 8 — Motion ============================================================== */

@keyframes mega-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The hero conversation plays once, on load: each line arrives, then the
   journey marks the moment. After 3s the page is at rest. */
.convo [data-t] { animation: rise .55s var(--ease) both; }
.convo [data-t="1"] { animation-delay: .3s; }
.convo [data-t="2"] { animation-delay: 1.1s; }
.convo [data-t="3"] { animation-delay: 1.9s; }
.convo [data-t="4"] { animation-delay: 2.7s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* 9 — Ported from thredo.css ============================================= */
/* The inner-page components (pricing tiers, blog prose, legal, FAQ, the
   channel pages' threads). Brought over verbatim, resolved through the
   aliases above, then corrected below where the old system's white cards
   on paper do not read on the dark ground. */

.bordered  { border-bottom: 1px solid var(--line); }
.grid { display: grid; gap: var(--s3); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); }
.g-6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.h2-lg    { font-size: clamp(32px, 4.1vw, 52px); line-height: 1.05; }
.faint { color: var(--ink-3); }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.2;
}
.btn-primary, .btn-lime {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(38,38,38,.24);
}
.btn-primary:hover, .btn-lime:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-primary:active, .btn-lime:active { box-shadow: inset 0 1px 0 rgba(0,0,0,.08); }
.btn-ghost {
  background: var(--surface); color: var(--ink); border-color: rgba(14,15,23,.10);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { background: var(--subtle); color: var(--ink); }
.link-underline { border-bottom: 1px solid var(--ink); padding-bottom: 2px; font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 500; }
.site-nav a { color: var(--ink-2); transition: color var(--dur-fast) var(--ease-out); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav .btn-primary, .site-nav .btn-primary:hover { color: #fff; }
.site-nav .nav-action { font-weight: 600; color: var(--ink); }
.nav-sep { width: 1px; height: 20px; background: var(--line-solid); }
.nav-dd { position: relative; display: flex; align-items: center; height: 64px; }
.nav-dd-btn {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-dd:hover .nav-dd-btn, .nav-dd:focus-within .nav-dd-btn { color: var(--ink); }
.nav-dd-caret { width: 10px; height: 10px; flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: translateY(1px); }
.nav-dd-panel {
  display: none; position: absolute; top: 100%; left: -10px; margin-top: -8px;
  min-width: 220px; padding: 6px; z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  animation: pop-in var(--dur-fast) var(--ease-out) both;
}
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { display: block; }
.nav-dd-panel a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.nav-dd-panel a:hover { background: var(--subtle); color: var(--ink); }
.footer-legal {
  margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
}
.footer2 { border-top: 1px solid var(--line); padding: 48px 0 36px; background: var(--canvas); }
.footer2-cols { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 24px; }
.footer2-brand { display: flex; flex-direction: column; gap: 10px; padding-right: 16px; }
.footer2-brand .brand { font-size: 17px; }
.footer2-brand p { font-size: 13px; color: var(--ink-2); max-width: 24ch; }
.footer2-col { display: flex; flex-direction: column; gap: 2px; }
.footer2-h { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.footer2-col a { font-size: 13.5px; color: var(--ink-2); padding: 4px 0; }
.footer2-col a:hover { color: var(--ink); }
.footer2-legal {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
}
.footer2-legal nav { display: flex; gap: 18px; }
.footer2-legal a { font-size: 13px; color: var(--ink-2); }
.footer2-legal a:hover { color: var(--ink); }
@media (max-width: 1000px) { .footer2-cols { grid-template-columns: repeat(3, 1fr); } .footer2-brand { grid-column: span 3; } }
@media (max-width: 560px) { .footer2-cols { grid-template-columns: repeat(2, 1fr); } .footer2-brand { grid-column: span 2; } }
.card-tight { padding: var(--s3); }
.stat-value { font-family: var(--font-display); font-size: 44px; font-weight: 400; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-label { margin-top: 10px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: var(--subtle); color: var(--ink-2);
}
.badge-soon { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-3); }
.thread { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-xs); }
.thread-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
}
.thread-body { padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.msg-in  { background: var(--canvas); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-out { background: var(--ink); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-meta { font-size: 11.5px; color: var(--ink-3); margin: 2px 0 8px; }
.msg-meta.out { align-self: flex-end; }
.thread-foot {
  padding: 12px 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: var(--s2);
  font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.faq { border-top: 1px solid var(--line-solid); }
.faq details { border-bottom: 1px solid var(--line-solid); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  padding: 20px 0; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; list-style: none; transition: color var(--dur-fast) var(--ease-out);
}
.faq summary:hover { color: var(--ink-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  color: var(--ink-3); transition: transform var(--dur) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 22px; color: var(--ink-2); max-width: 68ch; }
.faq summary h3 { display: inline; font: inherit; margin: 0; }
.step-num { font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.def-list { margin: 0; display: grid; grid-template-columns: 1fr auto; }
.def-list dt, .def-list dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line-solid); font-size: 14px; }
.def-list dd { text-align: right; font-variant-numeric: tabular-nums; }
.ranked { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ranked > li { margin: 0; }
.channel-icon { width: 28px; height: 28px; flex: none; }
.channel-card { display: flex; flex-direction: column; gap: var(--s2); }
.bullets { padding-left: 1.1em; margin: 0; }
.bullets li + li { margin-top: var(--s2); }
.tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); align-items: stretch; }
.tier {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s3);
  display: flex; flex-direction: column; box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.tier:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tier > :last-child { margin-top: auto; padding-top: var(--s3); }
.tier-featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-sm); }
.tier-price { font-family: var(--font-display); font-size: 38px; font-weight: 400; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.tier-features { list-style: none; margin: var(--s3) 0 0; padding: 0; font-size: 14px; }
.tier-features li { padding: 8px 0; border-top: 1px solid var(--line-solid); color: var(--ink-2); }
.tier h2 .label { display: inline-flex; align-items: center; gap: 8px; }
.tier-mark { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tier-mark .fill-lime { fill: var(--lime); }
.toggle { display: inline-flex; border: 1px solid var(--line-solid); border-radius: 999px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-xs); }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle label { padding: 9px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink-2); transition: background var(--dur-fast), color var(--dur-fast); }
.toggle input:checked + label { background: var(--primary); color: #fff; }
.toggle input:focus-visible + label { outline: 2px solid #A3A3A3; outline-offset: -2px; }
.fx-switch { display: inline-flex; align-items: center; gap: var(--s1); }
.fx-switch[hidden] { display: none; }
.tier-price, .fx-amt { white-space: nowrap; }
.tier-price.fx-rs { font-variant-numeric: normal; }
.compare th:first-child, .compare td:first-child { width: 34%; }
.compare td { color: var(--ink-2); }
.compare tbody th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); font-weight: 600; }
.tick-rule { position: relative; height: 12px; border-top: 1px solid var(--line-solid); }
.tick-rule::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background-image: repeating-linear-gradient(to right, var(--line-solid) 0 1px, transparent 1px 64px);
}
.tick-rule::after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 12px; background: var(--ink); }
.eyebrow-row { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s2); }
.eyebrow-row .label { color: var(--ink-2); }
.eyebrow-mark { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-linecap: round; }
.usage-figure svg { display: block; width: 100%; height: auto; }
.usage-bar { fill: none; stroke: var(--ink); stroke-width: 1; }
.usage-fill { fill: var(--lime); }
.usage-cells { stroke: var(--line-solid); stroke-width: 1; }
.usage-tick { stroke: var(--ink-3); stroke-width: 1; }
.usage-axis { font-family: var(--font); font-size: 14px; font-weight: 500; fill: var(--ink-2); }
@media (max-width: 640px) { .usage-cells, .usage-axis, .usage-tick { display: none; } }
@media (max-width: 1200px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .compare-scroll { overflow-x: auto; }
  .compare { min-width: 760px; }
}
.input, .textarea, .select {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid rgba(14,15,23,.10); border-radius: var(--radius);
  padding: 11px 14px; box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { border-radius: var(--radius); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: #A3A3A3; box-shadow: 0 0 0 2px rgba(163,163,163,.5); }
.textarea { min-height: 132px; resize: vertical; }
.mono-line {
  font-family: var(--mono); font-size: 14px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line-solid); border-radius: var(--radius); padding: 10px 12px;
}
.code {
  display: block; background: var(--ink); color: #F7F6F5;
  border-radius: var(--radius); padding: 16px 18px;
  font-family: var(--mono); font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre;
}
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s8); }
.legal-toc { position: sticky; top: 92px; align-self: start; font-size: 13px; }
.legal-toc ol { list-style: none; margin: var(--s2) 0 0; padding: 0; counter-reset: toc; }
.legal-toc li { padding: 5px 0; }
.legal-toc a { color: var(--ink-2); }
.legal-toc a:hover { color: var(--ink); }
.legal-body { max-width: 68ch; }
.legal-body h1 { margin-bottom: var(--s2); }
.legal-body h2 { font-size: 22px; margin: var(--s8) 0 var(--s2); scroll-margin-top: 92px; padding-top: var(--s2); border-top: 1px solid var(--line-solid); }
.legal-body h3 { font-size: 15px; margin: var(--s3) 0 var(--s1); }
.legal-body p { margin: 0 0 var(--s2); color: var(--ink-2); line-height: 1.7; }
.legal-body strong { color: var(--ink); }
.legal-body ul, .legal-body ol { margin: 0 0 var(--s2); padding-left: 1.3em; color: var(--ink-2); line-height: 1.7; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-body table { margin: var(--s2) 0 var(--s3); }
.legal-body td { color: var(--ink-2); vertical-align: top; }
@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .legal-toc { position: static; }
}
.post-head { border-bottom: 1px solid var(--line); }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 28px; }
.prose h2 { font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; margin-top: var(--s8); }
.prose h3 { font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; margin-top: var(--s6); }
.prose h2 + * { margin-top: var(--s2); }
.prose h3 + * { margin-top: var(--s1); }
.prose h2 + h3 { margin-top: var(--s3); }
.prose p, .prose li { font-size: 17px; line-height: 1.65; }
.prose ul, .prose ol { padding-left: 1.25em; margin-bottom: 0; }
.prose li + li { margin-top: var(--s2); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 600; }
.prose .callout {
  border-left: 3px solid var(--lime); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s2) var(--s3); font-size: 17px; line-height: 1.6;
}
.prose .callout + * { margin-top: var(--s4); }
.prose > .callout { margin-top: var(--s4); }
.prose .table-wrap { overflow-x: auto; }
.prose .table-wrap + * { margin-top: var(--s4); }
.prose > .table-wrap { margin-top: var(--s4); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-solid); }
.prose th { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.prose td:not(:first-child), .prose th:not(:first-child) { white-space: nowrap; }
.post-list { display: grid; gap: var(--s2); }
.post-card {
  display: block; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); padding: var(--s3);
  box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.post-card h2 { font-size: 19px; font-weight: 400; letter-spacing: -0.01em; }
.post-card p { margin-top: var(--s1); }
.post-card .label { margin-bottom: var(--s1); display: block; }
.post-updated { border-top: 1px solid var(--line-solid); padding-top: var(--s3); }
.prose > .post-updated { margin-top: var(--s8); }
.prose > .faq { margin-top: var(--s4); }
.post-head + section { padding-top: var(--s8); }
.mini-thread { border-left: 2px solid var(--lime); padding-left: var(--s2); margin: var(--s2) 0; }
.mini-thread p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; }
.mini-thread .q { color: var(--ink-2); font-style: italic; }
.mini-thread .a { font-weight: 500; }
.sol-icon { display: block; color: var(--ink); margin-bottom: 10px; }
.sol-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.sol-card {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--s3); text-decoration: none; color: inherit; box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.sol-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.prose .sol-card, .prose .sol-card h2, .prose .sol-card p { text-decoration: none; }
.sol-card h2 { font-size: 19px; margin: 0 0 6px; }
.sol-card p { font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) { .sol-cards { grid-template-columns: minmax(0, 1fr); } }
.mt-1{margin-top:var(--s1)}
.mt-2{margin-top:var(--s2)}
.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}
.mt-6{margin-top:var(--s6)}
.mt-8{margin-top:var(--s8)}
.divider { height: 1px; background: var(--line-solid); border: 0; margin: var(--s6) 0; }
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  section { padding: var(--s8) 0; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 64px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    padding: var(--s2) var(--gutter) var(--s3);
  }
  .site-nav.open { display: flex; animation: pop-in var(--dur) var(--ease-out) both; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line-solid); font-size: 16px; }
  .site-nav .btn { margin-top: var(--s2); border-bottom: 0; }
  .nav-sep { display: none; }
  .nav-dd { height: auto; display: block; }
  .nav-dd-btn { display: none; }
  .nav-dd-panel { display: block; position: static; margin: 0; padding: 0; min-width: 0; border: 0; box-shadow: none; background: none; animation: none; }
  .nav-dd-panel a { padding: 12px 0; border-bottom: 1px solid var(--line-solid); border-radius: 0; font-size: 16px; }
  .g2, .g3, .g4, .g-7-5, .g-6-6 { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .display { font-size: clamp(36px, 9vw, 48px); }
  .msg { max-width: 88%; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-value { font-size: 34px; }
}
@media print {
  .site-header, .site-footer, .footer2, .btn { display: none; }
  body { background: #fff; }
}
.js-motion .thread-body > * { opacity: 0; }
.js-motion .thread.is-in .thread-body > * { animation: msg-in 0.42s var(--ease-out) both; }
.js-motion .thread.is-in .thread-body > *:nth-child(1) { animation-delay: 0.10s; }
.js-motion .thread.is-in .thread-body > *:nth-child(2) { animation-delay: 0.22s; }
.js-motion .thread.is-in .thread-body > *:nth-child(3) { animation-delay: 0.70s; }
.js-motion .thread.is-in .thread-body > *:nth-child(4) { animation-delay: 0.82s; }
.js-motion .thread.is-in .thread-body > *:nth-child(5) { animation-delay: 1.25s; }
.js-motion .thread.is-in .thread-body > *:nth-child(6) { animation-delay: 1.37s; }
.js-motion .thread.is-in .thread-body > *:nth-child(7) { animation-delay: 1.80s; }
.js-motion .thread.is-in .thread-body > *:nth-child(8) { animation-delay: 1.92s; }
.js-motion .thread.is-in .thread-body > *:nth-child(9) { animation-delay: 2.35s; }
.link-underline {
  border-bottom: 0; background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur) var(--ease-out), color var(--dur-fast);
}
.link-underline:hover { background-size: 30% 1px; }
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion [data-reveal-group]:not(.is-in) > *,
  .js-motion [data-enter],
  .js-motion .thread-body > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js-motion .dot2-work, .js-motion .announce-dot, .js-motion .st-dot.live { animation: none; }
  .card:hover, .logo-chip:hover, .tier:hover, .post-card:hover, .sol-card:hover, .btn:active { transform: none; }
}
.board2 {
  max-width: var(--max); margin: 0 auto;
  padding: var(--s2) var(--gutter) var(--s8);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px;
}
.board2 > section {
  grid-column: 1 / -1; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-band);
  padding: clamp(24px, 3.2vw, 44px); box-shadow: var(--shadow-xs);
}
.board2 > section.bg-canvas { background: var(--surface); }
.board2 section .wrap { padding: 0; max-width: none; }
@media (min-width: 1000px) {
  .board2 > #does         { grid-column: span 7; }
  .board2 > #understand   { grid-column: span 5; }
  .board2 > #handoff      { grid-column: span 7; }
  .board2 > #integrations { grid-column: span 5; }
}
.close2 { background: var(--ink); color: #F7F6F5; text-align: center; padding: var(--s12) 0; }
.close2 h2 { color: inherit; }
.close2 .lead { color: #B9BCC0; margin-left: auto; margin-right: auto; }
.close2 .muted { color: #B9BCC0; }
.close2 .faint { color: #8B8E93; }
.close2 .measure, .close2 .measure-sm { margin-left: auto; margin-right: auto; }
.btn-on-dark { background: #F7F6F5; color: var(--ink); border-color: #F7F6F5; }
.btn-on-dark:hover { background: #E8E7E3; border-color: #E8E7E3; color: var(--ink); }
.vertical2 .mini .q { background: var(--canvas); border-radius: 12px; border-bottom-left-radius: 4px; padding: 8px 12px; font-size: 13.5px; align-self: flex-start; }
.vertical2 .mini .a { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-2); padding-left: 2px; }
a.vertical2 h3 .sol-icon { margin: 0; }
.board2 > #handoff .wrap { display: flex; flex-direction: column; height: 100%; }
.board2 > #handoff .transcript2 { margin-top: auto; margin-bottom: auto; }
.board2 > section > .wrap.grid { display: grid; }
.board2 > section .card { box-shadow: none; }
.board2 > section .card:hover { transform: none; box-shadow: none; }
.board2 > section.post-body { padding: clamp(28px, 4vw, 56px); }
.close2 .btn-ghost { background: transparent; color: #F7F6F5; border-color: rgba(247,246,245,.28); box-shadow: none; }
.close2 .btn-ghost:hover { background: rgba(247,246,245,.08); color: #F7F6F5; }
.close2 .link-underline, .close2 .link { color: #F7F6F5; background-image: linear-gradient(#F7F6F5, #F7F6F5); }
.close2 .small { color: #8B8E93; }
main > section#hero, main > section.post-head { padding-top: var(--s8); }
@media (max-width: 900px) { .board2 { padding-left: var(--gutter); padding-right: var(--gutter); } }

/* 9b — Corrections on the dark ground ===================================== */
.board2, .bordered { background: transparent; box-shadow: none; }
section.bordered { border-top: 1px solid var(--line); padding: clamp(56px, 8vw, 112px) 0; }
.close2 { background: transparent; color: var(--ink); border-top: 1px solid var(--line); }
.close2 .display, .close2 h2 { color: var(--ink); }
/* The old button rules came over too; the new ones win. Yellow is not a button. */
.btn-primary, .btn-lime, .btn-on-dark { background: var(--btn); color: var(--btn-ink); border-color: transparent; box-shadow: none; }
.btn-primary:hover, .btn-lime:hover, .btn-on-dark:hover { background: var(--btn-hover); color: var(--btn-ink); }
.btn-outline, .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; }
.btn-outline:hover, .btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.label { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.answer, .callout, .tier, .post-card, .channel-card, .thread, .def-list { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: none; }
.prose, .post-body, .legal-section { color: var(--ink); }
.prose a, .post-body a, .link-underline { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
code, .code { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.msg-in { background: var(--paper-2); color: var(--paper-ink); }
.msg-out { background: var(--paper-ink); color: var(--paper); }
.thread { background: var(--paper); color: var(--paper-ink); }
.thread .msg-meta, .thread .faint { color: var(--paper-ink-2); }
.input, input, textarea, select { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.compare-checked { padding-top: 24px; padding-bottom: 24px; }

/* 10 — Pricing ============================================================ */
/* Five plans as a ladder, not five cramped cards: one row each, the price,
   what a reply costs, and the step up from the row above. Growth carries
   the signal. */
.page-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 48px); }
.page-hero .lead { margin-top: 20px; }
.page-hero h1 { max-width: 14ch; }
.seg { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); }
.seg button { padding: 8px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color var(--dur) ease, color var(--dur) ease; }
.seg button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.seg button small { font-size: 12px; opacity: .75; margin-left: 6px; }
.plans { border-top: 1px solid var(--line-2); margin-top: 24px; }
.plan { display: grid; grid-template-columns: 1.1fr .9fr 1.5fr auto; gap: 24px 32px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); position: relative; }
.plan.popular::before { content: ''; position: absolute; left: calc(-1 * var(--gutter)); top: -1px; bottom: -1px; width: 3px; background: var(--signal); }
.plan-name { font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: -0.02em; line-height: 1; margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-name .tag { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--signal); color: var(--on-signal); }
.plan-fit { font-size: 14px; color: var(--ink-2); max-width: 26ch; }
.plan-price b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 44px; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price small { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.plan-price .per { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.plan-price .per em { font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-adds { display: grid; gap: 7px; font-size: 14px; color: var(--ink-2); margin: 0; padding: 0; list-style: none; }
.plan-adds li { display: flex; gap: 10px; align-items: baseline; }
.plan-adds li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); flex: none; position: relative; top: -2px; }
.plan-adds .plus { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.plan-adds .plus::before { display: none; }
.plan > .btn { justify-self: end; }
@media (max-width: 960px) {
  .plan { grid-template-columns: 1fr 1fr; }
  .plan-adds, .plan > .btn { grid-column: 1 / -1; }
  .plan > .btn { justify-self: start; }
}
.plans-note { margin-top: 16px; font-size: 13px; color: var(--ink-3); }

.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
/* Fixed layout: five equal plan columns whatever their longest cell says,
   the feature column a little wider. Without it the browser gave Scale the
   width of "All ten, plus custom API" and pushed Enterprise to the far edge. */
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; table-layout: fixed; }
.cmp col.feature { width: 19%; }
.cmp th, .cmp td { white-space: normal; overflow-wrap: anywhere; }
.cmp th, .cmp td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cmp tbody th { font-weight: 500; color: var(--ink); width: 180px; }
.cmp td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .pop { color: var(--ink); }
.cmp thead .pop { color: var(--ink); }
.cmp thead .pop::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 8px; vertical-align: 1px; }

.counts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.counts dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0 24px; border-top: 1px solid var(--line-2); }
.counts dt, .counts dd { padding: 14px 0; border-bottom: 1px solid var(--line); margin: 0; }
.counts dt { color: var(--ink); }
.counts dd { color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.counts dd.one { color: var(--ink); }
.counts dd.one::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 8px; vertical-align: 1px; }
@media (max-width: 860px) { .counts { grid-template-columns: 1fr; } }

.usage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(24px, 3vw, 36px); }
.usage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.usage-head b { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.usage-head span { font-size: 13px; color: var(--ink-3); }
.meter { height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.meter i { display: block; height: 100%; width: 80%; background: var(--signal); border-radius: inherit; }
.usage p { margin-top: 18px; color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.choice { border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px; }
.choice b { display: block; font-weight: 500; }
.choice small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 640px) { .choices { grid-template-columns: 1fr; } }

.addons { border-top: 1px solid var(--line-2); }
.addon { display: grid; grid-template-columns: 1fr 2fr auto; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.addon b { font-weight: 500; }
.addon span { color: var(--ink-2); font-size: 15px; }
.addon em { font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .addon { grid-template-columns: 1fr auto; } .addon span { grid-column: 1 / -1; } }
section.block[data-first] { padding-top: 0; border-top: 0; }

/* 11 — How it works ======================================================= */
/* Four steps on one thread. The rail is the Thread as structure: one line
   down the page, a node per step, the step you are living in (watching the
   first few) carrying the signal. Each step shows its screen on paper. */
.hero-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
@media (max-width: 960px) { .hero-split { grid-template-columns: 1fr; align-items: start; } }
.ledger { border-top: 1px solid var(--line-2); font-size: 15px; }
.ledger div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ledger div span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger div.sum { color: var(--ink); font-weight: 500; }
.ledger div.sum span:last-child { color: var(--ink); }
.ledger-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.ledger-h { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }

.rail { list-style: none; margin: 0; padding: 0; position: relative; }
.rail::before { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.stage { display: grid; grid-template-columns: 180px 1fr 1.15fr; gap: 32px clamp(28px, 4vw, 56px); padding: clamp(40px, 6vw, 72px) 0 clamp(40px, 6vw, 72px) 36px; position: relative; border-top: 1px solid var(--line); align-items: start; }
.stage:first-child { border-top: 0; }
.stage::before { content: ''; position: absolute; left: 0; top: calc(clamp(40px, 6vw, 72px) + 6px); width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.stage.done::before { background: var(--ink-2); }
.stage.now::before { background: var(--signal); box-shadow: 0 0 0 5px var(--signal-soft); }
.stage-meta { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); line-height: 1.6; }
.stage-meta b { display: block; color: var(--ink-2); font-weight: 600; }
.stage-copy h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 14px; }
.stage-copy p { color: var(--ink-2); max-width: 44ch; }
.stage-copy ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.stage-copy li { display: flex; gap: 10px; }
.stage-copy li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); flex: none; margin-top: 8px; }
@media (max-width: 1100px) { .stage { grid-template-columns: 1fr 1.15fr; } .stage-meta { grid-column: 1 / -1; } }
@media (max-width: 760px) { .stage { grid-template-columns: 1fr; padding-left: 28px; } }

/* Paper screens: what the product shows at that step. */
.screen { background: var(--paper); color: var(--paper-ink); border-radius: 16px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 24px 60px -28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.12); font-size: 14px; overflow: hidden; }
.screen-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--paper-line); font-size: 12.5px; color: var(--paper-ink-2); }
.screen-h b { color: var(--paper-ink); font-weight: 500; }
.screen-body { padding: 14px 16px 16px; }
.screen-field { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--paper-line); border-radius: 10px; font-family: var(--mono); font-size: 13px; color: var(--paper-ink); }
.screen-field .go { margin-left: auto; font-family: var(--font); font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: var(--paper-ink); color: var(--paper); }
.progress { margin: 12px 0 4px; font-size: 12.5px; color: var(--paper-ink-2); display: flex; justify-content: space-between; }
.progress + .bar { height: 4px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 66%; background: var(--signal); }
.rows { margin: 12px 0 0; padding: 0; list-style: none; display: grid; }
.rows li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--paper-line); font-size: 13.5px; }
.rows li:first-child { border-top: 0; }
.rows .src { font-family: var(--mono); font-size: 12.5px; }
.rows .n { color: var(--paper-ink-2); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.rows .act { font-size: 12.5px; color: var(--paper-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.rows .stale { color: #B45309; font-size: 11.5px; margin-left: 6px; }
.rows li.two { grid-template-columns: 1fr auto; }
.pill { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--paper-line); color: var(--paper-ink-2); }
.pill.live { background: var(--signal-soft); border-color: rgba(255,212,0,.6); color: var(--paper-ink); }
.pill.live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 6px; vertical-align: 1px; }
.pill.wait { color: #B45309; border-color: rgba(180,83,9,.3); }
.screen-foot { padding: 10px 16px 14px; font-size: 12.5px; color: var(--paper-ink-2); border-top: 1px solid var(--paper-line); }
.snippet { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--paper-ink); color: var(--paper); font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre; overflow-x: auto; }
.snippet i { font-style: normal; background: rgba(255,212,0,.22); border-radius: 3px; padding: 0 3px; }
.thread-msgs { display: grid; gap: 10px; padding: 14px 16px; }
.compose { display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 10px 12px; border: 1px solid var(--paper-line); border-radius: 12px; color: var(--paper-ink-2); font-size: 13px; }
.compose .take { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--paper-ink); padding: 5px 10px; border: 1px solid var(--paper-line); border-radius: 999px; white-space: nowrap; }

.faq { border-top: 1px solid var(--line-2); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font); color: var(--ink-3); font-size: 22px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details > *:not(summary) { color: var(--ink-2); max-width: 64ch; padding-bottom: 18px; }
.faq details a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.faq-note { margin-top: 24px; font-size: 14px; color: var(--ink-3); }
.faq-note a { color: var(--ink); }

/* Customers: real ones, as themselves, on a slow belt. The logos read as
   ink on paper and as light on the dark ground; nothing is recoloured by
   hand. The belt is three copies of the set, moved by one set's width, so
   the loop has no seam; it pauses under the pointer and stands still for
   anyone who asked for less motion. */
.customers { padding: 22px 0; border-top: 1px solid var(--line); overflow: hidden; }
.customers .wrap { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(24px, 4vw, 56px); }
.customers p { font-size: 13px; color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.track { display: flex; align-items: center; gap: clamp(48px, 6vw, 96px); width: max-content; animation: belt 42s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.track a { display: inline-flex; align-items: center; height: 36px; opacity: .72; transition: opacity var(--dur) ease; flex: none; }
.track a:hover { opacity: 1; }
.customers img { height: 22px; width: auto; filter: grayscale(1) invert(1) brightness(1.1); }
.customers img.tall { height: 30px; }
.customers img.keep { filter: grayscale(1) brightness(1.25); }
:root[data-theme="light"] .customers img { filter: grayscale(1); }
:root[data-theme="light"] .customers img.keep { filter: grayscale(1) invert(1); }
@keyframes belt { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 3)); } }
@media (prefers-reduced-motion: reduce) { .track { animation: none; } }
@media (max-width: 640px) { .customers .wrap { grid-template-columns: 1fr; gap: 12px; } }

/* 12 — Channels =========================================================== */
/* One template: the channel's own conversation beside the headline, three
   figures where the channel has them, then what it does there and what is
   worth knowing, as facts on rules rather than cards. */
.ch-hero { align-items: center; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line-2); margin-top: clamp(32px, 4vw, 48px); }
.stat { padding-top: 18px; }
.stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; gap: 0; } .stat { padding: 14px 0; border-bottom: 1px solid var(--line); } }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 3vw, 40px); border-top: 1px solid var(--line-2); }
.facts.two { grid-template-columns: 1fr 1fr; }
.fact { padding: 22px 0 26px; border-bottom: 1px solid var(--line); }
.fact h3 { font-size: 21px; margin-bottom: 8px; }
.fact p { color: var(--ink-2); font-size: 15px; }
.fact .note { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 860px) { .facts, .facts.two { grid-template-columns: 1fr; } }
.convo .convo-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--paper-line); font-size: 12px; color: var(--paper-ink-2); display: flex; justify-content: space-between; gap: 12px; }
.chan-list { border-top: 1px solid var(--line-2); }
.chan { display: grid; grid-template-columns: 44px 1fr 1.6fr auto; gap: 20px 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); color: inherit; transition: background-color var(--dur) ease; }
.chan:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.chan .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); }
.chan .ic img { width: 22px; height: 22px; }
.chan h3 { font-size: 24px; }
.chan p { color: var(--ink-2); font-size: 15px; }
.chan .live { font-size: 13px; color: var(--ink-3); white-space: nowrap; text-align: right; }
.chan .live b { display: block; color: var(--ink); font-weight: 500; }
@media (max-width: 760px) { .chan { grid-template-columns: 44px 1fr; } .chan p, .chan .live { grid-column: 2; } .chan .live { text-align: left; } }
.soon { margin-top: 18px; font-size: 14px; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.soon .tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-2); }
.example { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); padding: 22px 24px; }
.example table { width: 100%; border-collapse: collapse; font-size: 15px; }
.example td { padding: 10px 0; border-top: 1px solid var(--line); }
.example tr:first-child td { border-top: 0; }
.example td:last-child { color: var(--ink-2); text-align: right; }
.prose-block { max-width: 72ch; }
.prose-block h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 16px; }
.prose-block p { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; margin-top: 14px; }
.prose-block .lead { color: var(--ink); }
.prose-block + .prose-block { margin-top: clamp(40px, 6vw, 72px); }
.prose-block a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.cats { border-top: 1px solid var(--line-2); }
.cats div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cats div span:last-child { color: var(--ink-2); text-align: right; }
.group-h { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 26px 0 8px; }
.chan.tool { grid-template-columns: 44px 1fr 2.2fr; }
.chan .ic.letter { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
@media (max-width: 760px) { .chan.tool { grid-template-columns: 44px 1fr; } }
.block-head .muted[data-gap] { margin-top: 14px; }
.prose-block .def-list, .prose-block .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px 24px; margin-top: 18px; }
.prose-block .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
@media (max-width: 760px) { .prose-block .grid { grid-template-columns: 1fr; } }

/* 13 — Articles: posts, solutions, compare ================================ */
/* One reading layout. The head carries the breadcrumb, the headline, the
   standfirst and the date; the body is a measured column with a contents
   rail beside it that follows the reader; the pieces inside (callouts,
   mini-threads, lists) are set on rules and paper, never in cards. These
   rules come after the ported ones on purpose, so they win. */
.post-head { padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 44px); background: transparent; border: 0; }
.post-head .crumb { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 18px; }
.post-head .crumb::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.post-head .crumb a { color: inherit; }
.post-head h1 { max-width: 20ch; font-size: clamp(38px, 5vw, 64px); }
.post-head .standfirst { margin-top: 22px; max-width: 60ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--ink-2); }
.post-head .post-date { margin-top: 20px; font-size: 14px; color: var(--ink-3); display: flex; gap: 10px; }
.post-body { padding: 0 0 clamp(56px, 8vw, 112px); background: transparent; border: 0; border-top: 1px solid var(--line); }
.article { display: grid; grid-template-columns: minmax(0, 68ch) 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; padding-top: clamp(36px, 5vw, 64px); }
.toc { position: sticky; top: 96px; font-size: 14px; max-width: 260px; }
.toc p { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-2); }
.toc li a { display: block; padding: 6px 0 6px 16px; color: var(--ink-2); margin-left: -1px; border-left: 1px solid transparent; transition: color var(--dur) ease, border-color var(--dur) ease; }
.toc li a:hover { color: var(--ink); }
.toc li a.is-current { color: var(--ink); border-left-color: var(--signal); }
@media (max-width: 960px) { .article { grid-template-columns: 1fr; } .toc { position: static; max-width: none; } .toc:empty { display: none; } }
.prose { font-size: 17.5px; line-height: 1.65; color: var(--ink); max-width: none; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 2.2em; margin-bottom: .5em; scroll-margin-top: 96px; }
.prose h3 { font-size: 22px; margin-top: 1.8em; margin-bottom: .4em; }
.prose p { color: var(--ink); }
.prose p.small, .prose .small { font-size: 14px; color: var(--ink-3); }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.prose a:hover { text-decoration-color: var(--ink); }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--ink-3); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.prose .callout { background: transparent; border: 0; border-left: 2px solid var(--signal); padding: 4px 0 4px 22px; margin: 2em 0; font-size: 19px; line-height: 1.5; color: var(--ink); border-radius: 0; box-shadow: none; }
.prose blockquote { margin: 2em 0; padding: 0 0 0 22px; border-left: 2px solid var(--line-2); font-family: var(--font-display); font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; }
.prose .mini-thread { background: var(--paper); color: var(--paper-ink); border-radius: 16px; padding: 16px 18px; display: grid; gap: 10px; font-size: 15px; margin: 1.6em 0; border: 0; box-shadow: 0 20px 50px -28px rgba(0,0,0,.55); }
.prose .mini-thread p { margin: 0; max-width: 86%; padding: 9px 13px; border-radius: 14px; color: inherit; }
.prose .mini-thread .q { background: var(--paper-2); border-bottom-left-radius: 5px; justify-self: start; }
.prose .mini-thread .a { background: var(--paper-ink); color: var(--paper); border-bottom-right-radius: 5px; justify-self: end; }
.prose .faq { margin-top: 1.5em; max-width: none; }
.prose .faq details > *:not(summary) { font-size: 16.5px; }
.prose .faq .answer { background: transparent; border: 0; padding: 0; box-shadow: none; }
.prose .post-updated { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid var(--line); }
.prose .def-list, .prose .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px 24px; }
.prose .sol-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 2em; }
.prose .sol-card { display: block; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: inherit; text-decoration: none; transition: border-color var(--dur) ease; }
.prose .sol-card:hover { border-color: var(--ink-3); }
.prose .sol-card h2 { font-size: 24px; margin: 14px 0 6px; }
.prose .sol-card p { font-size: 15px; color: var(--ink-2); }
.prose .sol-icon { width: 28px; height: 28px; filter: invert(1); }
:root[data-theme="light"] .prose .sol-icon { filter: none; }
@media (max-width: 860px) { .prose .sol-cards { grid-template-columns: 1fr; } }
.post-list { border-top: 1px solid var(--line-2); margin-top: 8px; }
.post-row { display: grid; grid-template-columns: 180px 1fr; gap: 16px 40px; padding: 28px 0; border-bottom: 1px solid var(--line); color: inherit; }
.post-row:hover h2 { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-3); }
.post-row .tags { font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.post-row h2 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 8px; }
.post-row p { color: var(--ink-2); font-size: 15.5px; max-width: 64ch; }
@media (max-width: 720px) { .post-row { grid-template-columns: 1fr; gap: 8px; } }
/* Compare */
.tag-line { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.tag-line::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 8px; vertical-align: 1px; }
.more-in { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.more-in ul { margin: 0; padding-left: 1.1em; }
.ranked { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); counter-reset: rank; }
.ranked li.card { background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 24px 0 24px 56px; position: relative; box-shadow: none; counter-increment: rank; }
.ranked li.card::before { content: counter(rank, decimal-leading-zero); position: absolute; left: 0; top: 26px; font-family: var(--font-display); font-size: 22px; color: var(--ink-3); }
.ranked li.card h3 { font-size: 24px; margin-bottom: 6px; }
.ranked li.card p { color: var(--ink-2); }
.block table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.block table th, .block table td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.block table thead th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.block table tbody th { font-weight: 500; color: var(--ink); }
.block table td { color: var(--ink-2); }
.block .table-wrap, .block .cmp-scroll { overflow-x: auto; }

/* 14 — Forms, legal, the short pages ====================================== */
.form { display: grid; gap: 16px; margin-top: 28px; max-width: 560px; }
.form .field { display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.form .input, .form .textarea { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; transition: border-color var(--dur) ease; }
.form .input:focus, .form .textarea:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--signal-soft); }
.form .textarea { min-height: 140px; resize: vertical; }
.form .input::placeholder, .form .textarea::placeholder { color: var(--ink-3); }
.form-note { font-size: 13px; color: var(--ink-3); }
.contacts { border-top: 1px solid var(--line-2); }
.contacts div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contacts a { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.01em; color: var(--ink); }
.contacts a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-3); }
.contacts p { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.aside-note { margin-top: 20px; font-size: 14px; color: var(--ink-3); }
.aside-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose { font-size: 16px; }
.legal-prose h2 { font-size: 26px; }
.legal-prose section > * + * { margin-top: 1em; }
.legal-prose section + section { margin-top: 2.4em; }
.legal-prose p, .legal-prose li { color: var(--ink-2); }
.legal-prose strong { color: var(--ink); }
.legal-prose table { font-size: 14px; }
.legal-prose address { font-style: normal; line-height: 1.7; }
.toc ol li a.is-current, .toc ol li a:hover { color: var(--ink); }
.prose-block .lead + p { margin-top: 14px; }
.two[data-top], .hero-split[data-top] { align-items: start; }
.contacts-inline a { font-family: var(--font-display); font-size: 22px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-3); }
.example .muted { color: var(--ink-2); font-size: 15px; }
.two > .prose-block + .prose-block { margin-top: 0; }