/* Talkgate illustrations.
   Hero figures and small inline diagrams built from the identity's own parts: the two quotation
   marks as gateposts, the coral bar as the lintel, and the conversation passing between them as a
   line with a travelling dot. Every colour is a token from site.css, so the same SVG works in light
   and dark. Each hero scene is 560 x 400 and sits on its own glass stage (white at 70 percent, a hairline
   edge) with a faint grey 32px dot grid. Nothing in a figure is tinted pink or plum; plum is for strokes.
   Strokes are 2.5px (3px for the main path), nodes r=6, labels 13px mono with real clearance.
   Every figure is complete at rest: the only motion is the main path drawing on once when the figure
   enters view, the dot travelling it, and sound bars pulsing, all off under prefers-reduced-motion. */

/* ===== Hero with an illustration: copy left, figure right, stacked on narrow screens ===== */
.tm-hero.has-illo .tm-hero-inner {
  max-width: 1200px;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-12);
  align-items: center;
}
.tm-hero-copy { display: grid; gap: var(--space-6); min-width: 0; }
.tm-hero.has-illo h1 { font-size: 56px; line-height: 60px; }
.tg-illo { margin: 0; min-width: 0; display: grid; gap: var(--space-3); }
.tg-illo .tg-art { display: block; width: 100%; height: auto; }
.tg-illo figcaption { max-width: 42ch; }

@media (max-width: 1024px) {
  .tm-hero.has-illo .tm-hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-10, 40px); }
  .tm-hero.has-illo h1 { font-size: 48px; line-height: 52px; letter-spacing: -0.02em; }
  .tg-illo { max-width: 560px; }
}
@media (max-width: 480px) {
  .tm-hero.has-illo h1 { font-size: 40px; line-height: 44px; }
}

/* ===== Drawing vocabulary: tokens only ===== */
.tg-art { font-family: var(--font-mono); font-variant-numeric: tabular-nums; overflow: visible; }
.tg-art text { font-size: 13px; font-weight: 500; fill: var(--ink-muted); }
.tg-art .tg-title { fill: var(--ink); }
.tg-art .tg-on { fill: var(--surface-raised); }                                   /* text or marks on a wire fill */

/* The stage every hero scene sits on, with its dot grid */
.tg-art .tg-stage { fill: #ffffff; fill-opacity: 0.7; stroke: rgba(42, 20, 51, 0.1); stroke-width: 1; }
.tg-art .tg-grid-dot { fill: #c9c7d1; fill-opacity: 0.55; }
.tg-art .tg-stage { rx: 10px; ry: 10px; }
.tg-illo .tg-art { border-radius: 10px; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 12px 32px -14px rgba(42, 20, 51, 0.22); }

/* Panels, cards and devices */
.tg-art .tg-panel { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.tg-art .tg-card { fill: var(--surface-raised); stroke: var(--line); stroke-width: 1; }
.tg-art .tg-device { fill: var(--surface-raised); stroke: var(--wire); stroke-width: 2.5; stroke-linejoin: round; }
.tg-art .tg-bound { fill: var(--panel); stroke: var(--wire); stroke-width: 2.5; stroke-linejoin: round; }
.tg-art .tg-slot { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.tg-art .tg-ph { fill: var(--line); }                                             /* a placeholder line of text */
.tg-art .tg-fill-wire { fill: var(--wire); }
.tg-art .tg-shade { fill: var(--line); }

/* The gate: real glyph paths from the mark, the lintel in signal */
.tg-art .tg-post { fill: var(--wire); }
.tg-art .tg-lintel { fill: none; stroke: var(--signal); stroke-width: 3.4; stroke-linecap: round; }

/* Lines. The main path is the conversation; everything else is wiring */
.tg-art .tg-main { fill: none; stroke: var(--wire); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tg-art .tg-line { fill: none; stroke: var(--wire); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tg-art .tg-faint { fill: none; stroke: var(--line); stroke-width: 2.5; stroke-linecap: round; }
.tg-art .tg-dotted { fill: none; stroke: var(--ink-muted); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.1 7; }
.tg-art .tg-strike { fill: none; stroke: var(--ink-muted); stroke-width: 2.5; stroke-linecap: round; }
.tg-art .tg-tick { fill: none; stroke: var(--wire); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tg-art .tg-node { fill: var(--surface-raised); stroke: var(--wire); stroke-width: 2.5; }

/* The living parts */
.tg-art .tg-bar { fill: var(--wire); transform-box: fill-box; transform-origin: center; }
.tg-art .tg-dot { fill: var(--signal); offset-distance: 0%; offset-rotate: 0deg; }

/* Small route diagrams on the platform's telephony cards */
.tg-mini { display: block; width: 100%; max-width: 320px; height: auto; margin-bottom: var(--space-2); }

/* The residency diagram on the security page sits inside .tm-diagram, which supplies the glass */
.tg-residency { display: block; width: 100%; height: auto; }

/* Category glyphs on the integrations headings: a line icon beside a word, never alone */
.tg-h2 { display: flex; align-items: flex-start; gap: var(--space-3); }
.tg-h2-icon { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 9px; stroke: var(--wire); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) { .tg-h2-icon { margin-top: 6px; } }

/* ===== Motion: the main path draws on once when the figure enters view, then only the dot and the bars.
   Nothing starts hidden: without JS, without is-in, or under reduced motion, every line is already drawn. ===== */
@media (prefers-reduced-motion: no-preference) {
  .tg-illo.is-in .tg-draw {
    stroke-dasharray: 1 1;
    animation: tg-draw 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .tg-illo.is-in .tg-dot {
    animation: tg-travel var(--t, 6s) linear 1s infinite;
  }
  .tg-illo.is-in .tg-bar {
    animation: tg-pulse 1.3s ease-in-out infinite alternate;
    animation-delay: var(--d, 0s);
  }
  @keyframes tg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes tg-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
  @keyframes tg-pulse { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
}