/* Talkgate site stylesheet.
   1. Design tokens, generated from brand/tokens.json (version 2). Do not hand-edit this block.
   2. Base and brand components (from brand/components.css, revised for the light site).
   3. Layout: rhythm, sections, grids, cards, prose, lists, tables, bands, diagrams.
   4. Nav and footer.
   5. Home page pieces: the hero call card, the gate diagram, the four steps, the marquee.
   6. Breakpoints and reduced motion.
   Glass: the light theme is frosted glass over a quiet ambient backdrop (owner, 8 Oct 2026). Cards, panels,
   tables, the nav and diagrams share one recipe, set by the --glass tokens and re-set on the dark band.
   Light is forced on by <html data-theme="light">; the dark tokens remain for a future switch. */

/* ===== 1. Tokens ===== */
:root {
  color-scheme: light dark;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --surface: #faf9fb;
  --surface-raised: #ffffff;
  --surface-ink: #2a1433;
  --line: #e4e1e9;
  --line-strong: #94828b;
  --ink: #2a1433;
  --ink-muted: #6b5a66;
  --on-ink: #faf3f1;
  --on-ink-muted: #c9b6c2;
  --signal: #ff6a5c;
  --on-signal: #2a1433;
  --signal-text: #c23b2b;
  --signal-soft: #ffe5e0;
  --wire: #7d4f91;
  --wire-soft: #f3f4f8;
  --ok: #1f7a4d;
  --danger: #a31212;
  --link: var(--signal-text);
  --shadow-float: 0 8px 24px -4px #2a143326, 0 2px 6px #2a143314;
  --focus-ring: 0 0 0 2px #faf3f1, 0 0 0 4px #7d4f91;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #170b1d;
    --surface-raised: #22122b;
    --surface-ink: #0e0612;
    --line: #3a2745;
    --line-strong: #78637f;
    --ink: #f5ecf1;
    --ink-muted: #b9a7b5;
    --on-ink: #f5ecf1;
    --on-ink-muted: #b9a7b5;
    --signal: #ff7a6b;
    --on-signal: #2a1433;
    --signal-text: #ff8f82;
    --signal-soft: #3d1a1c;
    --wire: #c39ad4;
    --wire-soft: #2d1a38;
    --ok: #5ad38f;
    --danger: #ff8a80;
    --link: var(--signal-text);
    --shadow-float: 0 12px 32px -4px #000000b3;
    --focus-ring: 0 0 0 2px #170b1d, 0 0 0 4px #c39ad4;
  }
}
:root[data-theme="dark"] {
  --surface: #170b1d;
  --surface-raised: #22122b;
  --surface-ink: #0e0612;
  --line: #3a2745;
  --line-strong: #78637f;
  --ink: #f5ecf1;
  --ink-muted: #b9a7b5;
  --on-ink: #f5ecf1;
  --on-ink-muted: #b9a7b5;
  --signal: #ff7a6b;
  --on-signal: #2a1433;
  --signal-text: #ff8f82;
  --signal-soft: #3d1a1c;
  --wire: #c39ad4;
  --wire-soft: #2d1a38;
  --ok: #5ad38f;
  --danger: #ff8a80;
  --link: var(--signal-text);
  --shadow-float: 0 12px 32px -4px #000000b3;
  --focus-ring: 0 0 0 2px #170b1d, 0 0 0 4px #c39ad4;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Site-level measures. Section height and the glass recipe are set here and re-set by context:
   the dark band swaps every glass token for its dark equivalent, so one rule serves both grounds. */
:root {
  --section-y: 112px;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-blur: blur(18px) saturate(150%);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-edge-lift: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 0 0 1px rgba(42, 20, 51, 0.06), 0 12px 32px -14px rgba(42, 20, 51, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-shadow-lift: 0 0 0 1px rgba(42, 20, 51, 0.08), 0 20px 40px -16px rgba(42, 20, 51, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --chip: rgba(255, 255, 255, 0.7);
  --hairline: rgba(42, 20, 51, 0.08);
  --panel: #f3f4f8;
  --radius-card: 10px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5l4.5 4.5L9 12.5'/%3E%3C/svg%3E");
}

/* ===== 2. Base and brand components ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 27px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* The ambient backdrop: glass needs something behind it. A fixed layer under everything with four
   very large, very soft colour fields (plum, coral, plum, blue-grey) on the page ground, and a grid so
   faint it reads as paper rather than pattern. It never moves and never takes a click. */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(max(46vw, 420px) max(34vw, 340px) at 4% 6%, rgba(125, 79, 145, 0.10), rgba(125, 79, 145, 0) 70%),
    radial-gradient(max(40vw, 380px) max(30vw, 300px) at 96% 18%, rgba(255, 106, 92, 0.06), rgba(255, 106, 92, 0) 70%),
    radial-gradient(max(52vw, 460px) max(36vw, 360px) at 84% 96%, rgba(91, 107, 140, 0.06), rgba(91, 107, 140, 0) 70%),
    radial-gradient(max(38vw, 360px) max(28vw, 280px) at 10% 84%, rgba(125, 79, 145, 0.06), rgba(125, 79, 145, 0) 70%),
    var(--surface);
}
body::after {
  background-image: linear-gradient(rgba(42, 20, 51, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 20, 51, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
p { margin: 0; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
strong { font-weight: 600; }
.tm-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.tm-wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--space-6); }
.tm-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.tm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* Eyebrow */
.tm-eyebrow { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.tm-ink .tm-eyebrow { color: var(--on-ink-muted); }

/* Button */
.tm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; line-height: 1; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color 120ms, border-color 120ms, color 120ms, transform 120ms var(--ease-out); }
.tm-btn:active { transform: scale(0.98); }
.tm-btn-primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.tm-btn-primary:hover { background: var(--signal-text); border-color: var(--signal-text); color: var(--surface-raised); }
[data-theme="dark"] .tm-btn-primary:hover { color: var(--on-signal); filter: brightness(1.08); }
.tm-btn-quiet { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.tm-btn-quiet:hover { background: var(--surface-raised); border-color: var(--ink); }
.tm-ink .tm-btn-quiet { color: var(--on-ink); border-color: var(--on-ink-muted); }
.tm-ink .tm-btn-quiet:hover { background: transparent; border-color: var(--on-ink); }
.tm-btn-link { height: auto; padding: 0; background: none; border: 0; color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-family: var(--font-body); font-size: 17px; font-weight: 600; }
.tm-btn-sm { height: 40px; padding: 0 var(--space-4); font-size: 15px; }

/* Arrow link: the way out of a card or a grid. Coral text, no underline until hover, an arrow
   drawn from the identity's line icon set. Add the class to any <a>; nothing else is needed. */
.tm-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.005em; color: var(--signal-text); text-decoration: none; }
.tm-more::after { content: ""; flex: 0 0 auto; width: 15px; height: 15px; background-color: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform 160ms var(--ease-out); }
.tm-more:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.tm-more:hover::after { transform: translateX(3px); }
@supports not ((mask: url("")) or (-webkit-mask: url(""))) { .tm-more::after { content: "\2192"; width: auto; height: auto; background: none; } }
.tm-band .tm-more { color: var(--signal); }

/* Skip link: off-canvas until focused */
.tm-skip { position: absolute; top: -200px; left: var(--space-4); z-index: 100; padding: var(--space-3) var(--space-4); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; text-decoration: none; }
.tm-skip:focus-visible { top: var(--space-4); }

/* ===== 3. Layout ===== */

/* Sections: open ground over the ambient backdrop, alternating with a translucent white band
   (is-tint) that lets the backdrop show through, and at most once a page a dark band (tm-band).
   A hairline separates two ground sections; a band carries its own hairline top and bottom. */
.tm-section { position: relative; padding-block: var(--section-y); border-top: 1px solid var(--hairline); }
main > :first-child { border-top: 0; }
.tm-section.is-tint { background: rgba(255, 255, 255, 0.45); border-top-color: var(--hairline); border-bottom: 1px solid var(--hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.tm-section.is-tint + .tm-section { border-top-color: transparent; }

/* Hero: left-aligned, sized to its content. A hero never has a line above it. */
.tm-hero { position: relative; padding-block: var(--space-24); overflow: hidden; }
.tm-hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding-inline: var(--space-6); display: grid; gap: var(--space-6); }
.tm-hero h1 { font-size: 64px; line-height: 68px; font-weight: 700; letter-spacing: -0.025em; }
.tm-hero .tm-lede { font-size: 20px; line-height: 30px; color: var(--ink-muted); max-width: 600px; }
.tm-hero .tm-row { margin-top: var(--space-2); }
.tm-hero.is-centred { text-align: center; }
.tm-hero.is-centred .tm-hero-inner { justify-items: center; }
.tm-hero.is-centred .tm-row { justify-content: center; }
/* The backdrop glyph: one of the gateposts from the mark, very large, in a faint blue-grey, clipped by
   the hero. It sits under the copy and is never read. */
.tm-hero-glyph { position: absolute; z-index: 0; left: 50%; top: 50%; width: 560px; height: 560px; transform: translate(-760px, -58%); pointer-events: none; fill: rgba(91, 107, 140, 0.07); }
.tm-hero.is-split .tm-hero-glyph { transform: translate(-700px, -54%); }
/* Hero media: a light looping video (or its poster) behind the copy and the call card. A thin
   wash over the whole frame, and a heavier one from the left edge to about 45% of the width so
   the h1 and lede keep 4.5:1 on the empty side of the picture. One colour at two strengths, so
   there is no banding to see. Reduced motion shows the poster only; phones show the poster at
   low strength, since a video behind 40 characters of copy is noise. */
.tm-hero-media { display: none; }
.tm-hero.has-video .tm-hero-media:has(video, img) { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--surface); }
.tm-hero-media video, .tm-hero-media .tm-hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; }
.tm-hero-media .tm-hero-poster { display: none; }
.tm-hero-media:has(video, img)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(250, 249, 251, 0.35); }
.tm-hero-media:has(video, img)::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(250, 249, 251, 0.96) 0%, rgba(250, 249, 251, 0.92) 34%, rgba(250, 249, 251, 0.35) 52%, rgba(250, 249, 251, 0) 62%); }
.tm-hero-media:has(video, img) ~ .tm-hero-glyph { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tm-hero-media video { display: none; }
  .tm-hero-media .tm-hero-poster { display: block; }
}
@media (max-width: 720px) {
  .tm-hero-media video { display: none; }
  .tm-hero-media .tm-hero-poster { display: block; opacity: 0.45; }
}

/* Section header: eyebrow, h2, optional lede. Wide enough for a headline, narrow enough to read. */
.tm-section-header { display: grid; gap: var(--space-3); max-width: 680px; margin-bottom: var(--space-12); }
.tm-section-header h2 { font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -0.018em; }
.tm-section-header .tm-lede { margin-top: var(--space-1); font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.tm-section-header + * { margin-top: 0; }

/* Grids. tm-grid alone is fluid (auto-fit); the is-N variants are fixed so a row always fills.
   is-5 is for a strip of five icon cards and becomes a single column of compact rows on tablets. */
.tm-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.tm-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tm-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tm-grid.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.tm-grid > .is-lead { grid-column: span 2; }
.tm-grid-note { margin-top: var(--space-8); max-width: 68ch; }
.tm-note { margin-top: var(--space-8); }

/* 12-column grid helper (kept for the pages that place cards by span) */
.tm-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.tm-span-3 { grid-column: span 3; }
.tm-span-4 { grid-column: span 4; }
.tm-span-5 { grid-column: span 5; }
.tm-span-6 { grid-column: span 6; }
.tm-span-7 { grid-column: span 7; }
.tm-span-8 { grid-column: span 8; }
.tm-span-12 { grid-column: span 12; }
.tm-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); align-items: start; }
.tm-two-col.is-wide-figure { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }

/* Card. Frosted glass: white at 62 percent over the backdrop, blurred and lifted a little, a white
   edge, an ink hairline outside it and a 1px highlight along the top. The icon sits on a glass chip.
   Content sets the height; a row of cards shares one height. Hover lifts 2px and deepens the shadow. */
.tm-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-8); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); border-radius: var(--radius-card); box-shadow: var(--glass-shadow); color: var(--ink); transition: border-color 160ms, transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.tm-card h3 { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.014em; color: var(--ink); }
.tm-card h3 a { color: inherit; text-decoration: none; }
.tm-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.tm-card p { font-size: 16px; line-height: 25px; color: var(--ink-muted); }
.tm-card p a:not(.tm-more) { color: var(--link); }
.tm-card .tm-icon { box-sizing: border-box; width: 48px; height: 48px; padding: 11px; flex: 0 0 auto; background: var(--chip); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 10px -6px rgba(42, 20, 51, 0.18); stroke: var(--wire); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--space-3); }
.tm-card .tm-more { margin-top: auto; padding-top: var(--space-3); }
.tm-card .tm-list { font-size: 16px; line-height: 25px; color: var(--ink-muted); }
.tm-card .tm-caption { margin-top: auto; }
a.tm-card { text-decoration: none; }
a.tm-card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tm-card:hover { border-color: var(--glass-edge-lift); transform: translateY(-2px); box-shadow: var(--glass-shadow-lift); }
  .tm-card:hover .tm-more::after { transform: translateX(3px); }
}
/* Bento: the twelve-column grid with cards of mixed widths and a scene in some of them.
   Rows share a height; a scene sits at the foot of its card. */
.tm-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.tm-bento > .tm-card { grid-column: span 4; }
.tm-bento > .tm-span-3 { grid-column: span 3; }
.tm-bento > .tm-span-4 { grid-column: span 4; }
.tm-bento > .tm-span-5 { grid-column: span 5; }
.tm-bento > .tm-span-6 { grid-column: span 6; }
.tm-bento > .tm-span-7 { grid-column: span 7; }
.tm-bento > .tm-span-8 { grid-column: span 8; }
.tm-bento > .tm-span-12 { grid-column: span 12; }
.tm-card.has-scene { padding-bottom: var(--space-6); }
.tm-card .tm-scene { margin-top: var(--space-4); }
.tm-card .tm-scene + .tm-more { margin-top: var(--space-4); }
.tm-card.is-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr); gap: var(--space-4) var(--space-8); align-items: stretch; }
.tm-card.is-wide .tm-card-main { display: flex; flex-direction: column; gap: var(--space-3); }
.tm-card.is-wide .tm-scene { margin: 0; align-self: stretch; }

/* Scenes: a small dark product frame inside a card, with one thing happening in it. Built from
   text, a few boxes and a line or two; the status colours are the dark-theme values. */
.tm-scene { --ok: #5ad38f; --wire: #c39ad4; position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4); background: var(--surface-ink); color: var(--on-ink); border-top: 3px solid var(--signal); border-radius: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; overflow: hidden; }
.tm-scene-head { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line-strong); font-family: var(--font-display); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-muted); }
.tm-scene-head .tm-data { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; }
.tm-scene-line { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-2); color: var(--on-ink-muted); font-family: var(--font-body); font-size: 14px; line-height: 20px; }
.tm-scene-line.is-agent { color: var(--on-ink); }
.tm-scene-line .tm-scene-who { font-family: var(--font-mono); font-size: 11px; line-height: 20px; color: var(--on-ink-muted); }
.tm-scene-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 6px var(--space-2); border-radius: var(--radius-sm); color: var(--on-ink-muted); }
.tm-scene-row.is-filled { background: var(--signal); color: var(--on-signal); }
.tm-scene-row.is-filled .tm-scene-tag { color: var(--on-signal); }
.tm-scene-row.is-open { border: 1px dashed var(--line-strong); }
.tm-scene-row .tm-scene-tag { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tm-scene-row .is-ok { color: var(--ok); }
.tm-scene-row .is-hot { color: var(--signal); }
.tm-scene-status { display: inline-flex; align-items: center; gap: 6px; }
.tm-scene-status::before { content: ""; width: 7px; height: 7px; background: var(--ok); }
.tm-scene-status.is-hot::before { background: var(--signal); }
.tm-scene-status.is-wait::before { background: var(--on-ink-muted); }
.tm-scene-toast { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3); background: #3b1f47; border: 1px solid var(--line-strong); border-left: 3px solid var(--signal); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--on-ink); }
.tm-scene-toast .tm-icon { width: 28px; height: 28px; padding: 5px; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); stroke: var(--on-ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin: 0; }
.tm-scene-toast strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--on-ink); }
.tm-scene-toast span { color: var(--on-ink-muted); }
.tm-scene-ladder { display: grid; gap: 4px; }
.tm-scene-ladder > span { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; color: var(--on-ink-muted); }
.tm-scene-ladder > span.is-done { color: var(--on-ink); }
.tm-scene-ladder > span.is-done i { background: var(--ok); }
.tm-scene-ladder > span.is-now { color: var(--on-ink); }
.tm-scene-ladder > span.is-now i { background: var(--signal); animation: tm-pulse 1400ms ease-in-out infinite; }
.tm-scene-ladder i { display: block; width: 8px; height: 8px; margin-left: 2px; background: var(--line-strong); }
.tm-scene-wave { display: flex; align-items: center; gap: 3px; height: 40px; }
.tm-scene-wave i { display: block; flex: 0 0 auto; width: 4px; height: 100%; background: var(--wire); border-radius: 2px; transform: scaleY(var(--h, 0.5)); transform-origin: center; }
.tm-scene-wave i:nth-child(3n) { background: var(--on-ink); }
.tm-scene-wave.is-live i { animation: tm-wavebar 900ms ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -90ms); }
@keyframes tm-wavebar { from { transform: scaleY(0.18); } to { transform: scaleY(var(--h, 0.8)); } }
.tm-scene-check { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-2); align-items: center; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--on-ink); }
.tm-scene-check i { display: block; width: 14px; height: 14px; border: 1px solid var(--line-strong); border-radius: 2px; }
.tm-scene-check.is-done i { background: var(--ok); border-color: var(--ok); -webkit-mask: none; }
.tm-scene-check.is-done i::after { content: ""; display: block; width: 4px; height: 8px; margin: 1px 0 0 4px; border: solid var(--surface-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tm-scene-foot { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line-strong); color: var(--on-ink-muted); }
.tm-scene-foot strong { color: var(--ok); font-weight: 500; }
.tm-scene-foot .is-hot { color: var(--signal); }

/* Beam: a short bright segment travelling along a route. Put the class on a path with
   pathLength="1"; it needs no script. One per diagram is plenty. */
.tm-beam { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.12 1; stroke-dashoffset: 1.12; animation: tm-beam 2800ms var(--ease-in-out) infinite; }
@keyframes tm-beam { to { stroke-dashoffset: -0.12; } }

/* The gate, large, on a dark band: the home page's one big moment. The SVG's tokens are
   re-pointed so wire is pale, boxes are dark and the text is on-ink. */
.tm-gate-band { --wire: #c39ad4; --ink: var(--on-ink); --surface: #3b1f47; --ink-muted: var(--on-ink-muted); }
.tm-gate-band .tm-section-header { max-width: 760px; }
.tm-gate-band .tm-diagram { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; padding: 0; max-width: 1120px; margin: 0 auto; }
@media (max-width: 860px) { .tm-gate-band .tm-diagram { overflow-x: auto; } .tm-gate-band .tm-diagram svg { min-width: 860px; } .tm-gate-band .tm-diagram .tm-caption { text-align: left; } }
.tm-gate-band .tm-diagram .tm-caption { text-align: center; max-width: none; margin-top: var(--space-6); }
.tm-gate-band .tm-gate-dest.is-hit { stroke: var(--signal); }
.tm-gate-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--line-strong); }
.tm-gate-legend > div { display: grid; gap: var(--space-2); font-size: 16px; line-height: 25px; color: var(--on-ink-muted); }
.tm-gate-legend strong { font-family: var(--font-display); font-size: 20px; line-height: 26px; color: var(--on-ink); }
/* A lead card spans two columns. With an aside (a short list), it lays out in two halves. */
.tm-card.is-lead h3 { font-size: 30px; line-height: 36px; letter-spacing: -0.016em; }
.tm-card.is-lead > p { max-width: 58ch; }
.tm-card.is-lead.has-aside { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6) var(--space-12); align-items: start; }
.tm-card-main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.tm-card-main .tm-more { margin-top: var(--space-3); }
.tm-card-aside { margin: 0; padding-top: var(--space-1); }
.tm-card-aside .tm-list-title { display: block; font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); }
/* An icon card: a strip entry with an icon, a name and one short line. Whole card is the link. */
.tm-card.is-icon { padding: var(--space-6); gap: var(--space-2); }
.tm-card.is-icon h3 { font-size: 21px; line-height: 27px; }
.tm-card.is-icon p { font-size: 15px; line-height: 23px; }
.tm-card.is-icon .tm-icon { margin-bottom: var(--space-3); }
.tm-card.is-icon .tm-more { font-size: 14px; }

/* Prose: running text 65ch wide */
.tm-prose { max-width: 65ch; display: grid; gap: var(--space-4); }
.tm-prose p { font-size: 17px; line-height: 27px; }
.tm-prose h2 { font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -0.018em; margin-top: var(--space-8); }
.tm-prose .tm-eyebrow { margin-top: var(--space-8); }
.tm-prose .tm-eyebrow + h2 { margin-top: calc(var(--space-2) - var(--space-4)); }
.tm-prose > :first-child, .tm-prose > .tm-eyebrow:first-child + h2 { margin-top: 0; }
.tm-prose h3 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; margin-top: var(--space-4); }
.tm-prose h4 { font-size: 20px; line-height: 26px; font-weight: 600; margin-top: var(--space-2); }
.tm-prose .tm-lede { font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.tm-prose code { font-family: var(--font-mono); font-size: 14px; padding: 1px var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); }
.tm-caption { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); max-width: 72ch; }
.tm-data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 400; font-variant-numeric: tabular-nums; }
.tm-ink .tm-caption, .tm-band .tm-caption { color: var(--on-ink-muted); }
.tm-sip-heading { font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -0.018em; }

/* Lists: square bullets in wire, no icons, no ticks. Capped so a line never runs past 70ch. */
.tm-list { list-style: square; margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); max-width: 68ch; }
.tm-list li::marker { color: var(--wire); }
.tm-list.is-plain { list-style: none; padding-left: 0; }
.tm-list.is-plain > li + li { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.tm-list.is-two-col { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
.tm-two-col .tm-list { max-width: none; }

/* Numbered flows and steps */
.tm-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.tm-flow li { counter-increment: step; display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--line-strong); font-size: 16px; line-height: 25px; color: var(--ink-muted); }
.tm-flow li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--wire); }
.tm-flow strong { display: block; font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); }
.tm-steps { list-style: none; margin: 0; padding: 0; max-width: 720px; display: grid; gap: var(--space-4); counter-reset: step; }
.tm-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 17px; line-height: 27px; }
.tm-steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 14px; line-height: 27px; color: var(--wire); font-variant-numeric: tabular-nums; }
.tm-steps strong { font-weight: 600; }
.tm-rules { margin-top: var(--space-12); }
.tm-review dd { margin: 0; }
.tm-telephony-cards { margin-top: var(--space-8); }

/* Stat */
.tm-stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tm-stat { padding: var(--space-6) var(--space-6) var(--space-6) 0; display: grid; gap: var(--space-1); border-left: 1px solid var(--line); padding-left: var(--space-6); }
.tm-stat:first-child { border-left: 0; padding-left: 0; }
.tm-stat .tm-figure { font-family: var(--font-mono); font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.tm-stat .tm-figure.is-signal { color: var(--signal-text); }
.tm-stat .tm-label { font-size: 15px; line-height: 23px; color: var(--ink); }
.tm-stat .tm-caption { font-size: 13px; line-height: 18px; }

/* Quote */
.tm-quote { display: grid; gap: var(--space-4); max-width: 760px; padding-left: var(--space-6); border-left: 3px solid var(--signal); }
.tm-quote blockquote { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.tm-quote figcaption { font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.tm-quote figcaption strong { color: var(--ink); font-weight: 600; }

/* Form */
.tm-form { display: grid; gap: var(--space-4); max-width: 520px; }
.tm-field { display: grid; gap: var(--space-2); }
.tm-field label { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 20px; }
.tm-field .tm-help { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.tm-input, .tm-textarea, .tm-select { font: inherit; font-size: 17px; line-height: 24px; width: 100%; padding: var(--space-3) var(--space-4); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.tm-input::placeholder, .tm-textarea::placeholder { color: var(--ink-muted); }
.tm-textarea { min-height: 120px; resize: vertical; }
.tm-field.is-error .tm-input, .tm-field.is-error .tm-textarea { border-color: var(--danger); }
.tm-error { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--danger); }
.tm-ok { font-size: 15px; line-height: 23px; font-weight: 600; color: var(--ok); }

/* Tables: for integration and comparison matrices */
.tm-table-wrap { overflow-x: auto; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); border-radius: var(--radius-card); box-shadow: var(--glass-shadow); }
.tm-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 23px; }
.tm-table caption { text-align: left; padding: var(--space-4); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); caption-side: bottom; }
.tm-table th { text-align: left; font-family: var(--font-body); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-strong); vertical-align: bottom; }
.tm-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.tm-table tbody tr:last-child td { border-bottom: 0; }
.tm-table th:first-child, .tm-table td:first-child { font-weight: 600; color: var(--ink); }
.tm-table .is-ok { color: var(--ok); font-weight: 600; }
.tm-table .is-muted { color: var(--ink-muted); }

/* Dark band: one per page at most. <section class="tm-section tm-band"> */
.tm-ink { background: var(--surface-ink); color: var(--on-ink); }
.tm-ink a { color: var(--on-ink-muted); text-decoration: none; }
.tm-ink a:hover { color: var(--on-ink); text-decoration: underline; }
.tm-band { background: radial-gradient(70% 90% at 100% 0%, rgba(125, 79, 145, 0.34), rgba(125, 79, 145, 0) 62%), radial-gradient(55% 70% at 0% 100%, rgba(255, 106, 92, 0.07), rgba(255, 106, 92, 0) 60%), var(--surface-ink); color: var(--on-ink); border-top-color: transparent;
  --glass: rgba(255, 255, 255, 0.06); --glass-strong: rgba(255, 255, 255, 0.08); --glass-edge: rgba(255, 255, 255, 0.12); --glass-edge-lift: rgba(255, 255, 255, 0.22);
  --glass-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16), 0 16px 36px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-shadow-lift: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 22px 44px -18px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --chip: rgba(255, 255, 255, 0.08); --hairline: rgba(255, 255, 255, 0.14); }
.tm-band .tm-card .tm-icon { stroke: #c39ad4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.tm-band + .tm-section { border-top-color: transparent; }
.tm-band a { color: var(--on-ink-muted); }
.tm-band a:hover { color: var(--on-ink); }
.tm-band .tm-eyebrow { color: var(--on-ink-muted); }
.tm-band .tm-lede, .tm-band .tm-card p, .tm-band .tm-stat .tm-caption { color: var(--on-ink-muted); }
.tm-band .tm-card, .tm-band .tm-card h3 { color: var(--on-ink); }
.tm-band .tm-stats, .tm-band .tm-stat { border-color: var(--line-strong); }
.tm-band .tm-stat .tm-figure, .tm-band .tm-stat .tm-label { color: var(--on-ink); }
.tm-band .tm-stat .tm-figure.is-signal { color: var(--signal); }
.tm-band .tm-btn-quiet { color: var(--on-ink); border-color: var(--on-ink-muted); }
.tm-band .tm-btn-quiet:hover { background: transparent; border-color: var(--on-ink); }
.tm-band .tm-list li::marker { color: var(--on-ink-muted); }

/* Diagrams: SVG built from the identity's own parts, on a glass panel */
.tm-diagram { margin: 0; min-width: 0; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); border-radius: var(--radius-card); box-shadow: var(--glass-shadow); padding: var(--space-8); }
.tm-diagram svg { display: block; width: 100%; height: auto; }
.tm-diagram .tm-caption { margin-top: var(--space-4); }
.tm-frame { background: var(--surface-ink); border-radius: var(--radius-card); padding: var(--space-4); box-shadow: 0 18px 40px -18px rgba(42, 20, 51, 0.45); }
.tm-frame img, .tm-frame svg { border-radius: var(--radius-sm); }

/* Integration logos: every logo is the brand's square icon, never a wordmark, centred on a white
   square tile with a hairline, in both themes, so a vendor's colours sit on the ground they were drawn
   for. Same tile size across a grid, the icon contained with padding. No backdrop blur: there are
   dozens of them and the marquee moves, so they are kept cheap to paint. */
.tm-logo-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tm-logo-grid li { display: grid; place-items: center; align-content: center; gap: var(--space-1); aspect-ratio: 1; padding: var(--space-4); text-align: center; background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: var(--radius-card); box-shadow: var(--glass-shadow); font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 600; color: var(--ink); }
.tm-logo-grid a { color: inherit; text-decoration: none; }
.tm-logo-grid a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tm-logo-grid .tm-caption { font-family: var(--font-body); }
.tm-logo-tile, .tm-logo-grid .tm-logo-tile { background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.95); border-radius: var(--radius-card); box-shadow: 0 0 0 1px rgba(42, 20, 51, 0.07), 0 8px 20px -12px rgba(42, 20, 51, 0.2), inset 0 1px 0 #ffffff; transition: box-shadow 160ms; }
.tm-logo-grid .tm-logo-tile { padding: 12px; gap: var(--space-2); color: #2a1433; }
.tm-logo-tile:hover, .tm-logo-grid .tm-logo-tile:hover { box-shadow: 0 0 0 1px rgba(42, 20, 51, 0.12), 0 14px 28px -14px rgba(42, 20, 51, 0.28), inset 0 1px 0 #ffffff; }
.tm-logo-tile img, .tm-logo-icon { display: block; box-sizing: border-box; width: 56px; height: 56px; padding: 4px; object-fit: contain; object-position: center; background: #ffffff; filter: none; }
.tm-logo-grid .tm-logo-tile .tm-logo-name { font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 600; color: #2a1433; }
.tm-logo-grid .tm-logo-tile .tm-caption { color: #6b5a66; font-size: 13px; line-height: 18px; }
.tm-logo-grid.is-wall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tm-logo-grid.is-wall + .tm-caption { margin-top: var(--space-6); }
.tm-logo-cell { display: flex; align-items: center; gap: var(--space-3); min-width: 150px; }
.tm-logo-cell img { display: block; flex: 0 0 32px; box-sizing: border-box; width: 32px; height: 32px; object-fit: contain; object-position: center; padding: 3px; background: #ffffff; border: 1px solid var(--hairline); border-radius: 6px; }
.tm-logo-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
.tm-logo-tile.is-ink { background: var(--surface-ink); border-color: rgba(255, 255, 255, 0.12); }
.tm-logo-tile.is-icon { gap: var(--space-4); }
.tm-logo-tile .tm-app-icon { width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--surface-ink); display: grid; place-items: center; }

/* Photography: real places, desaturated toward plum, square-cornered with a line edge. A band
   carries one as a background under a plum overlay so on-ink text keeps 4.5:1. */
.tm-photo { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; border: 1px solid var(--hairline); border-radius: 0; background: var(--panel); }
.tm-photo-figure { margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.tm-photo-figure.is-wide { margin-top: var(--space-12); }
.tm-photo-figure.is-wide .tm-photo { aspect-ratio: 2 / 1; }
.tm-hero .tm-photo-figure { grid-column: 1 / -1; margin-top: var(--space-6); }
.tm-band.has-photo { isolation: isolate; overflow: hidden; --on-ink-muted: #ddd0d8; }
.tm-band-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; object-fit: cover; object-position: center; }
.tm-band.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(42, 20, 51, 0.74); }
.tm-band.has-photo > .tm-wrap { position: relative; z-index: 2; }
.tm-band.has-photo .tm-prose { max-width: 58ch; }
.tm-band-credit { margin-top: var(--space-6); }

/* ===== 4. Nav and footer ===== */
/* The nav is white glass. Saturation is held at 120 percent here (not 150) and the white at 80 percent,
   so passing over the dark band it greys rather than turning lilac. */
.tm-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); border-bottom: 1px solid var(--hairline); box-shadow: 0 8px 24px -20px rgba(42, 20, 51, 0.35); }
.tm-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); height: 72px; display: flex; align-items: center; gap: var(--space-8); }
.tm-brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.tm-wordmark { display: block; height: 28px; width: auto; }
.tm-nav-toggle { display: none; margin-left: auto; }
.tm-nav-menu { display: contents; }
.tm-nav-links { display: flex; gap: var(--space-6); margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.tm-nav-links a { position: relative; display: inline-block; padding: var(--space-3) 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; transition: color 120ms; }
.tm-nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 160ms var(--ease-out); }
.tm-nav-links a:hover::after, .tm-nav-links a:focus-visible::after { transform: scaleX(1); }
.tm-nav-links a[aria-current="page"]::after { height: 3px; background: var(--signal); transform: scaleX(1); }
.tm-nav .tm-btn-primary { font-size: 15px; }

.tm-footer { padding-block: var(--space-16); }
.tm-footer-inner { max-width: 1200px; margin: 0 auto; padding-inline: var(--space-6); display: grid; gap: var(--space-12); grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
.tm-footer h4, .tm-footer-heading { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-muted); }
.tm-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-size: 15px; line-height: 23px; }
.tm-footer .tm-about { font-size: 15px; line-height: 23px; color: var(--on-ink-muted); max-width: 320px; margin-top: var(--space-4); }
.tm-footer .tm-wordmark { height: 24px; }
.tm-footer-base { max-width: 1200px; margin: var(--space-12) auto 0; padding: var(--space-6) var(--space-6) 0; border-top: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); font-size: 13px; line-height: 18px; color: var(--on-ink-muted); }
.tm-footer-base .tm-data { color: var(--on-ink-muted); }

/* ===== 5. Home page pieces ===== */

/* Home hero: copy left, a call in progress right */
.tm-hero.is-split .tm-hero-inner { max-width: 1200px; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--space-16); align-items: center; }
.tm-hero-copy { display: grid; gap: var(--space-6); min-width: 0; }
.tm-hero.is-split h1 { font-size: 60px; line-height: 64px; }

/* The call card: a dark product frame with the lintel across the top. Always on surface-ink,
   so the status colours inside it are the dark-theme values in both themes. */
.tm-call { --ok: #5ad38f; margin: 0; position: relative; background: var(--surface-ink); color: var(--on-ink); border: 1px solid var(--surface-ink); border-top: 4px solid var(--signal); border-radius: var(--radius-card); box-shadow: 0 24px 48px -20px rgba(42, 20, 51, 0.5); padding: var(--space-6); display: grid; gap: var(--space-4); font-size: 15px; line-height: 23px; }
.tm-call-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-strong); font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-muted); }
.tm-call-status { display: inline-flex; align-items: center; gap: var(--space-2); }
.tm-call-dot { display: inline-block; width: 8px; height: 8px; background: var(--ok); }
.tm-call.is-live .tm-call-dot { animation: tm-pulse 1400ms ease-in-out infinite; }
.tm-call-timer { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--on-ink-muted); }
.tm-call-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); transition: opacity 250ms; }
.tm-call-line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); align-items: start; color: var(--on-ink-muted); }
.tm-call-line.is-agent { color: var(--on-ink); }
.tm-call-who { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 23px; color: var(--on-ink-muted); }
.tm-call-line.is-agent .tm-call-who { color: var(--on-ink); }
.tm-call-text { position: relative; display: block; }
.tm-call-ghost { visibility: hidden; }
.tm-call-typed { position: absolute; inset: 0; }
.tm-call-line.is-typing .tm-call-typed::after { content: ""; display: inline-block; width: 2px; height: 0.85em; margin-left: 2px; vertical-align: -0.1em; background: var(--on-ink-muted); animation: tm-blink 900ms steps(1) infinite; }
.tm-wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; visibility: hidden; }
.tm-wave i { display: block; width: 3px; height: 100%; background: var(--on-ink); transform: scaleY(0.3); transform-origin: center; }
.tm-call-line.is-speaking .tm-wave { visibility: visible; }
.tm-call-line.is-speaking .tm-wave i { animation: tm-wave 620ms ease-in-out infinite alternate; }
.tm-call-line.is-speaking .tm-wave i:nth-child(2) { animation-delay: -180ms; animation-duration: 540ms; }
.tm-call-line.is-speaking .tm-wave i:nth-child(3) { animation-delay: -360ms; animation-duration: 700ms; }
.tm-call-line.is-speaking .tm-wave i:nth-child(4) { animation-delay: -90ms; animation-duration: 500ms; }
.tm-call-line.is-speaking .tm-wave i:nth-child(5) { animation-delay: -270ms; animation-duration: 640ms; }
.tm-call-result { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; padding-top: var(--space-3); border-top: 1px solid var(--line-strong); font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; transition: opacity 300ms var(--ease-out); }
.tm-call-result strong { color: var(--ok); }
.tm-call.is-live .tm-call-line:not(.is-on) { visibility: hidden; }
.tm-call.is-live .tm-call-result:not(.is-on) { opacity: 0; }
.tm-call.is-resetting .tm-call-lines, .tm-call.is-resetting .tm-call-result { opacity: 0; }
@keyframes tm-wave { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@keyframes tm-blink { 50% { opacity: 0; } }
@keyframes tm-pulse { 50% { opacity: 0.35; } }

/* The gate diagram: the conversation moves between the posts, a dot carries the call from the
   caller through the gate to each destination in turn. */
.tm-gate-talk { animation: tm-dash10 900ms linear infinite; }
.tm-gate-dest { transition: stroke 200ms, stroke-width 200ms; }
.tm-gate-dest.is-hit { stroke: var(--ink); stroke-width: 3; }
.tm-gate-dot { transition: opacity 200ms; }
.tm-flow-dash { animation: tm-dash8 1200ms linear infinite; }
@keyframes tm-dash10 { to { stroke-dashoffset: -10; } }
@keyframes tm-dash8 { to { stroke-dashoffset: -8; } }

/* How it works: four numbered steps, icons that draw on */
.tm-how { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
.tm-how li { counter-increment: step; display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--line-strong); font-size: 16px; line-height: 25px; color: var(--ink-muted); }
.tm-how li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--wire); }
.tm-how .tm-icon { width: 32px; height: 32px; stroke: var(--wire); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tm-how strong { display: block; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); }
.tm-how p { margin: 0; }

/* Integration logos as a slow marquee, built by the script from the logo partial: two rows,
   opposite ways, paused on hover or focus. Each row is one set of tiles followed by three copies,
   so a move of half the row loops cleanly. Full bleed; the no-script fallback is the plain grid. */
.tm-marquee { overflow: hidden; display: grid; gap: var(--space-4); padding-block: var(--space-4); }
.tm-marquee > .tm-logo-grid { max-width: 1200px; margin: 0 auto; padding-inline: var(--space-6); }
.tm-marquee-row { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: tm-marquee 96s linear infinite; }
.tm-marquee-row.is-reverse { animation-direction: reverse; }
.tm-marquee:hover .tm-marquee-row, .tm-marquee:focus-within .tm-marquee-row { animation-play-state: paused; }
.tm-marquee-row li { flex: 0 0 auto; width: 128px; height: 128px; margin-right: var(--space-4); display: grid; place-items: center; align-content: center; gap: var(--space-2); padding: var(--space-3); text-align: center; background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.95); border-radius: var(--radius-card); box-shadow: 0 0 0 1px rgba(42, 20, 51, 0.07), 0 8px 20px -12px rgba(42, 20, 51, 0.2); font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 600; color: #2a1433; }
.tm-marquee-row a { color: inherit; text-decoration: none; }
.tm-marquee-row .tm-caption { font-family: var(--font-body); }
.tm-marquee-row .tm-logo-name { font-size: 14px; line-height: 18px; }
@keyframes tm-marquee { to { transform: translateX(-50%); } }

/* Spotlight on cards: a soft white sheen on the glass under the pointer. Pointer devices only. */
.is-spotlight .tm-card { isolation: isolate; --spot: rgba(255, 255, 255, 0.8); }
.tm-band .is-spotlight .tm-card { --spot: rgba(255, 255, 255, 0.07); }
@media (hover: hover) and (pointer: fine) {
  .is-spotlight .tm-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 200ms; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--spot) 0%, transparent 70%); }
  .is-spotlight .tm-card:hover::before { opacity: 1; }
}

/* Scroll reveal. Hidden only once the head script has put js on <html>, never under reduce,
   and only until is-done, after which the element is back to its own styles (so hover works). */
html.js:not(.reduce) main .tm-section .tm-section-header:not(.is-done),
html.js:not(.reduce) main .tm-section .tm-card:not(.is-done),
html.js:not(.reduce) main .tm-section .tm-flow > li:not(.is-done),
html.js:not(.reduce) main .tm-section .tm-steps > li:not(.is-done),
html.js:not(.reduce) main .tm-section .tm-how > li:not(.is-done),
html.js:not(.reduce) main .tm-section .tm-diagram:not(.is-done),
html.js:not(.reduce) main .tm-section .tm-prose:not(.is-done),
html.js:not(.reduce) main .tm-section .tm-quote:not(.is-done),
html.js:not(.reduce) main .tm-section .tm-stats:not(.is-done),
html.js:not(.reduce) main .tm-section .tm-table-wrap:not(.is-done),
html.js:not(.reduce) main .tm-section .tm-logo-grid > li:not(.is-done),
html.js:not(.reduce) main .tm-section .tm-form:not(.is-done) { opacity: 0; transform: translateY(14px); }
html.js:not(.reduce) main .tm-section .is-in:not(.is-done) { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }

/* Draw-on lines. Any stroke with class tm-draw and pathLength="1" inside a [data-draw] box
   is hidden until the box enters view, then draws from its start. */
html.js:not(.reduce) [data-draw]:not(.is-drawn):not(.is-settled) .tm-draw { stroke-dasharray: 1 2; stroke-dashoffset: 1.05; }
html.js:not(.reduce) [data-draw].is-drawn:not(.is-settled) .tm-draw { stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ease-out); transition-delay: var(--d, 0ms); }

/* ===== 6. Breakpoints: 1100, 1024, 900, 720, 600, 480 ===== */
@media (max-width: 1100px) {
  .tm-grid.is-5 { grid-template-columns: minmax(0, 1fr); }
  .tm-grid.is-5 > .tm-card.is-icon { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "icon title" "icon body"; column-gap: var(--space-4); row-gap: var(--space-1); align-items: start; padding: var(--space-4) var(--space-6); }
  .tm-grid.is-5 > .tm-card.is-icon .tm-icon { grid-area: icon; margin: 0; }
  .tm-grid.is-5 > .tm-card.is-icon h3 { grid-area: title; }
  .tm-grid.is-5 > .tm-card.is-icon p { grid-area: body; }
}
@media (max-width: 1024px) {
  .tm-nav-toggle { display: inline-flex; }
  .tm-nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: var(--space-4) var(--space-6) var(--space-6); background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-float); }
  .tm-nav-menu.is-open { display: grid; gap: var(--space-4); }
  .tm-nav-links { flex-direction: column; gap: 0; margin-left: 0; }
  .tm-nav-links a { display: block; padding: var(--space-3) 0; font-size: 17px; }
  .tm-nav-links a[aria-current="page"]::after { right: auto; width: var(--space-6); }
  .tm-nav-menu .tm-btn { width: 100%; }
  .tm-hero.is-split .tm-hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .tm-hero.is-split .tm-call { max-width: 560px; }
  .tm-hero-glyph { transform: translate(-80vw, -60%); }
  .tm-hero.is-split .tm-hero-glyph { transform: translate(-80vw, -70%); }
  .tm-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-bento > .tm-card, .tm-bento > [class*="tm-span-"] { grid-column: span 6; }
  .tm-bento > .tm-span-8, .tm-bento > .tm-span-12 { grid-column: span 12; }
  .tm-cols { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tm-span-4, .tm-span-3 { grid-column: span 3; }
  .tm-span-5, .tm-span-6, .tm-span-7, .tm-span-8, .tm-span-12 { grid-column: span 6; }
  .tm-two-col.is-wide-figure { grid-template-columns: minmax(0, 1fr); }
  .tm-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-footer-inner { grid-template-columns: repeat(3, 1fr); }
  .tm-footer-inner > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .tm-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd count without a lead card: the last card takes the whole row instead of standing alone */
  .tm-grid.is-3:not(:has(.is-lead)) > :last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 720px) {
  :root { --section-y: 72px; }
  .tm-hero { padding-block: var(--space-16); }
  .tm-hero h1, .tm-hero.is-split h1 { font-size: 48px; line-height: 52px; letter-spacing: -0.02em; }
  .tm-section-header { margin-bottom: var(--space-8); }
  .tm-section-header h2, .tm-prose h2, .tm-sip-heading { font-size: 32px; line-height: 38px; }
  .tm-two-col { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .tm-cols { grid-template-columns: minmax(0, 1fr); }
  .tm-cols > * { grid-column: auto; }
  .tm-grid.is-2 { grid-template-columns: minmax(0, 1fr); }
  .tm-list.is-two-col { grid-template-columns: minmax(0, 1fr); }
  .tm-card { padding: var(--space-6); }
  .tm-card.is-lead.has-aside, .tm-card.is-wide { grid-template-columns: minmax(0, 1fr); }
  .tm-bento > .tm-card, .tm-bento > [class*="tm-span-"] { grid-column: span 12; }
  .tm-gate-legend { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .tm-card.is-lead h3 { font-size: 26px; line-height: 32px; }
  .tm-diagram { padding: var(--space-4); }
  .tm-photo-figure.is-wide { margin-top: var(--space-8); }
  .tm-photo-figure.is-wide .tm-photo { aspect-ratio: 3 / 2; }
  .tm-footer-inner { grid-template-columns: 1fr 1fr; }
  .tm-footer-inner > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .tm-grid, .tm-grid.is-3, .tm-grid.is-4 { grid-template-columns: minmax(0, 1fr); }
  .tm-grid > .is-lead, .tm-grid.is-3:not(:has(.is-lead)) > :last-child:nth-child(odd) { grid-column: auto; }
  .tm-how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .tm-hero h1, .tm-hero.is-split h1 { font-size: 40px; line-height: 44px; }
  .tm-row .tm-btn { width: 100%; }
  .tm-stats { grid-template-columns: 1fr; }
  .tm-stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .tm-stat:first-child { border-top: 0; }
  .tm-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-footer-inner { grid-template-columns: 1fr; }
  .tm-call { padding: var(--space-4); }
  .tm-call-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tm-call-who { line-height: 18px; }
  .tm-grid.is-5 > .tm-card.is-icon { padding: var(--space-4); }
}

/* Motion: almost none, and none at all when the reader asks for less. The marquee becomes a
   grid, the call card shows its final state, lines are drawn. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .tm-marquee { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-6); }
  .tm-marquee-row { animation: none; width: auto; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-4); }
  .tm-marquee-row li { width: auto; height: auto; aspect-ratio: 1; margin: 0; }
  .tm-marquee-row [data-dup] { display: none; }
  .tm-wave i, .tm-gate-talk, .tm-flow-dash, .tm-call-dot, .tm-call-typed::after { animation: none !important; }
  html.js [data-draw] .tm-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .tm-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) { .tm-marquee-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) and (max-width: 480px) { .tm-marquee-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== 7. Glass fallback, hosting options, API and MCP ===== */

/* Without backdrop blur, glass becomes a near-opaque white panel so text keeps its contrast. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, 0.92); --glass-strong: rgba(255, 255, 255, 0.95); }
  .tm-nav { background: rgba(255, 255, 255, 0.96); }
  .tm-band { --glass: rgba(255, 255, 255, 0.08); --glass-strong: rgba(255, 255, 255, 0.1); }
}

/* Two ways to run it: an option card is a glass card with a short tag, the name, a few rows of
   label and value, and a "Best for" panel at its foot. Rows are hairline-ruled, labels in mono. */
.tm-option { gap: var(--space-4); }
.tm-option-tag { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.tm-card.tm-option h3 { font-size: 30px; line-height: 36px; letter-spacing: -0.016em; }
.tm-card.tm-option > p:not(.tm-option-tag):not(.tm-bestfor) { font-size: 17px; line-height: 27px; color: var(--ink-muted); max-width: 52ch; }
.tm-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.tm-rows li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); font-size: 16px; line-height: 24px; color: var(--ink); }
.tm-rows li:last-child { border-bottom: 1px solid var(--hairline); }
.tm-rows .tm-rows-label { font-family: var(--font-mono); font-size: 13px; line-height: 24px; color: var(--ink-muted); }
.tm-card .tm-bestfor, .tm-bestfor { margin-top: auto; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4); background: var(--chip); border: 1px solid var(--hairline); border-left: 3px solid var(--wire); border-radius: 6px; font-size: 16px; line-height: 24px; color: var(--ink); }
.tm-bestfor strong { display: block; margin-bottom: var(--space-1); font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.tm-option-note { margin-top: var(--space-8); max-width: 72ch; font-size: 17px; line-height: 27px; color: var(--ink); }
.tm-option-note strong { font-weight: 600; }

/* The MCP server: a capability list (plum ticks) and a safety list (ink squares), each in a glass card.
   Items are hairline-ruled rows so eight of them stay easy to scan. */
.tm-checklist { list-style: none; margin: 0; padding: 0; display: grid; }
.tm-checklist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 16px; line-height: 24px; color: var(--ink); }
.tm-checklist li:first-child { border-top: 0; padding-top: 0; }
.tm-checklist li::before { content: ""; width: 5px; height: 10px; margin: 5px 0 0 5px; border: solid var(--wire); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tm-checklist.is-safety li::before { width: 8px; height: 8px; margin: 8px 0 0 3px; border: 0; background: var(--ink); transform: none; }
.tm-checklist strong { font-weight: 600; }
.tm-card .tm-checklist + .tm-scene { margin-top: var(--space-4); }

@media (max-width: 720px) {
  .tm-rows li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tm-card.tm-option h3 { font-size: 26px; line-height: 32px; }
}

/* the promo film */
.tm-hero-note { margin-top: var(--space-4); }
.tm-film .tm-section-header { margin-bottom: var(--space-8); }
.tm-film-frame { margin: 0; display: grid; gap: var(--space-3); }
.tm-film-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; background: #2a1433; box-shadow: 0 0 0 1px rgba(42, 20, 51, 0.08), 0 24px 60px -24px rgba(42, 20, 51, 0.35); }

/* Conversations: a glass grid of one-line examples on the home page. The tag is caption text
   over a hairline, the channel above the sector; never a pill. */
.tm-convos { list-style: none; margin: 0; padding: 0; }
.tm-card.tm-convo { padding: var(--space-6); gap: var(--space-3); }
.tm-convo-tag { display: grid; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.tm-convo-tag span:first-child { color: var(--ink); }
.tm-card.tm-convo .tm-convo-line { font-size: 17px; line-height: 26px; color: var(--ink); }
.tm-card.tm-convo .tm-caption { font-size: 13px; line-height: 18px; }

/* partner briefing form: spam trap and outcome line */
.tm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tm-form-status { min-height: 1.5em; margin: var(--space-2) 0 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.tm-form-status.is-ok { color: var(--ok); font-weight: 600; }
.tm-form-status.is-error { color: var(--danger); font-weight: 600; }