/* talk.css — TALK-1 (v17.17.82): the "How a conversation goes" card is a flowchart on a stage that builds itself as the
   visitor scrolls (motion-landing.js initFlow): icon nodes pop in, each connector wipes down (--wipe, a transform) with a
   dot travelling it, the branch forks, the counts appear, the mail drops. Complete without the script: every node shows.
   Tokens only (the .stage class remaps them to the dark set); transform and opacity are the only animated properties.
   The glow is a separate halo element that fades, never an animated shadow. */
.flow-card{gap:12px;padding:20px 20px;border-color:var(--border)}
.fc-top{display:flex;justify-content:space-between;gap:12px}
.fc-top .label{color:var(--text2)}
.fc-top .label:first-child{color:var(--accent)}
.fc{display:flex;flex-direction:column;align-items:center}
.fc-row{display:flex;justify-content:center;width:100%}
.fc-two{display:grid;grid-template-columns:1fr 1fr;justify-items:center}
.gn{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:118px;transform-origin:center}
.gn-ic{position:relative;z-index:1;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--card);border:1.5px solid var(--border2);color:var(--accent)}
.gn-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gn-halo{position:absolute;top:-10px;inset-inline:0;margin-inline:auto;width:74px;height:74px;border-radius:50%;background:var(--accent-glow);filter:blur(10px);opacity:0}
.gn b{font:600 13px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--text);text-align:center}
.gn-count{position:absolute;top:-6px;inset-inline-end:14px;z-index:2;min-width:26px;padding:2px 7px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:700 12px/1.4 var(--font-mono);text-align:center;font-style:normal;transform-origin:center}
.gn-decide .gn-ic{border-radius:14px;transform:rotate(45deg);border-color:var(--accent)}
.gn-decide .gn-ic svg{transform:rotate(-45deg)}
.gn-gate .gn-ic{border-color:var(--accent);background:var(--accent-wash)}
.gn-out .gn-ic{border-style:dashed}
.gl{position:relative;width:2px;height:20px;background:var(--border2)}
.gl::before{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(var(--wipe,1))}
.gl-dot{position:absolute;inset-inline-start:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:0}
.fc-fork{position:relative;display:grid;grid-template-columns:1fr 1fr;justify-items:center;height:26px}
.gl-h{position:absolute;top:0;inset-inline:25%;height:2px;background:var(--border2)}
.gl-h::before{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:center;transform:scaleX(var(--wipe,1))}
.fc-fork .gl{height:100%}
.fc-mail{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--border2);color:var(--accent);transform-origin:top center}
.fc-mail svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.fc-mail span{display:flex;flex-direction:column;min-width:0}
.fc-mail b{font:600 14px/1.3 var(--font-display);color:var(--text)}
.fc-mail small{font:500 11px/1.4 var(--font-mono);letter-spacing:.08em;color:var(--text2)}
.flow-card .pipe-cap{color:var(--text2)}
@media (min-width:900px){.flow-card{padding:28px 30px}.gn{width:136px}.gn-ic{width:60px;height:60px}.gn-halo{width:80px;height:80px}.gl{height:24px}.fc-fork{height:28px}.how.talking{min-height:100vh;display:flex;align-items:center;padding-block:72px 32px}.how.talking .wrap{width:100%}.how.talking .steps{margin-top:26px}.how.talking .step{padding:14px 0}}