/* ─── FRAME LAYER ────────────────────────────────────────────────────
   After Trident: hairline rails down the content edges with small pastel
   squares where sections meet, a faint isometric grid in the alt bands,
   numbered section labels, and a halftone ring behind product visuals.
   The glyph fog at the foot of some sections is js/field.js (fog mode). */

:root { --rail: max(16px, calc(50% - var(--maxw) / 2 - 8px)); }

.section, .stack-bar { position: relative; }
.section > *:not(.field-canvas) { position: relative; z-index: 1; }

/* Alt bands: a soft dot field that fades out from the middle. */
.section-alt { background: var(--bg-2); }
.section-alt::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(20, 20, 19, .13) 1px, transparent 1.4px);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, transparent 55%, #000 95%);
  mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, transparent 55%, #000 95%);
}

/* Section labels: small spaced capitals in the sans. */
.kicker, .eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim-text);
}

/* Halftone rings: the one motif that recurs behind every product moment. */
.bench-visual, .door, .usp, .form-card-wrap, .agent-stage { position: relative; }
.bench-visual::before, .door::before, .agent-stage::before, .join-layout > :last-child::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -16% -12%;
  background-image: radial-gradient(rgba(20, 20, 19, .17) 1px, transparent 1.4px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, transparent 50%, #000 66%, transparent 97%);
  mask-image: radial-gradient(closest-side, transparent 50%, #000 66%, transparent 97%);
}
.agent-stage::before { inset: 4% 26%; }
.join-layout > :last-child { position: relative; }


/* Hero chat: keep the dot ring above the chat, fade it out before the bottom. */
.agent-stage::before {
  -webkit-mask-image: radial-gradient(closest-side, transparent 50%, #000 66%, transparent 97%), linear-gradient(#000 38%, transparent 56%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(closest-side, transparent 50%, #000 66%, transparent 97%), linear-gradient(#000 38%, transparent 56%);
  mask-composite: intersect;
}