/* =========================================================================
   Product reel (hero "video") — scenes scale with the frame via cqw units
   ========================================================================= */
.reel {
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 16 / 11; container-type: inline-size;
  background:
    radial-gradient(80% 70% at 85% 0%, rgba(41,171,226,.28), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(232,65,47,.2), transparent 60%),
    linear-gradient(160deg, #0d1829, #060b15);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-glow);
}
.reel::before { /* scanline sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 4px);
}
.reel-stage { position: absolute; inset: 0; font-size: 2.3cqw; }
.scene {
  position: absolute; inset: 0; padding: 8% 7% 11%;
  display: flex; flex-direction: column; justify-content: center; gap: .55em;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s;
}
.scene.on { opacity: 1; visibility: visible; transition: opacity .4s; }
.s-kick { font-family: var(--font-head); font-weight: 600; font-size: .78em; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan-bright); }
.s-kick.hot { color: var(--red-soft); }
.s-title { font-family: var(--font-head); font-weight: 700; font-size: 2.05em; line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.s-title em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-title em.hot { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; }
.s-vis { margin-top: .5em; display: grid; gap: .45em; }

.pop { opacity: 0; }
.scene.on .pop { animation: popIn .55s var(--ease) both; animation-delay: calc(var(--i, 0) * .13s + .15s); }
@keyframes popIn { from { opacity: 0; transform: translateY(.9em) scale(.97); } to { opacity: 1; transform: none; } }
.reel.paused .scene.on, .reel.paused .scene.on * { animation-play-state: paused !important; }

.r-row { display: flex; align-items: center; gap: .7em; padding: .55em .8em; border-radius: .6em; background: rgba(255,255,255,.045); border: 1px solid var(--line); font-size: .92em; }
.r-row b { font-weight: 600; }
.r-row .sub { color: var(--muted-2); font-size: .86em; }
.r-row .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-av { width: 2.1em; height: 2.1em; border-radius: .5em; flex: none; display: grid; place-items: center; background: var(--grad-brand); color: #04121f; font-family: var(--font-head); font-weight: 700; font-size: .85em; }
.r-av.hot { background: var(--grad-hot); color: #fff; }
.r-tag { flex: none; font-family: var(--font-head); font-weight: 600; font-size: .74em; padding: .3em .7em; border-radius: 999px; background: rgba(41,171,226,.16); color: var(--cyan-bright); }
.r-tag.hot { background: rgba(232,65,47,.18); color: var(--red-soft); }
.r-tag.ok { background: rgba(40,200,120,.16); color: #5fe0a0; }
.r-tag.warm { background: rgba(254,188,46,.16); color: #ffd073; }

/* intro / outro */
.s-center { align-items: center; text-align: center; }
.s-logo { width: 5.4em; height: auto; filter: drop-shadow(0 .4em 1.4em rgba(41,171,226,.55)); }
.scene.on .s-logo { animation: logoIn .9s var(--ease) both; }
@keyframes logoIn { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
.s-brand { font-family: var(--font-head); font-weight: 700; font-size: 3em; letter-spacing: -.02em; line-height: 1; }
.s-brand b { color: var(--red-soft); }
.s-strap { color: var(--muted); font-size: 1.1em; }

/* big counter */
.s-count { font-family: var(--font-head); font-weight: 700; font-size: 3.3em; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.s-chips { display: flex; flex-wrap: wrap; gap: .45em; }
.s-chip { font-family: var(--font-head); font-weight: 600; font-size: .8em; padding: .4em .85em; border-radius: 999px; border: 1px solid rgba(41,171,226,.35); background: rgba(41,171,226,.1); color: var(--cyan-bright); }
.s-chip.hot { border-color: rgba(232,65,47,.4); background: rgba(232,65,47,.12); color: var(--red-soft); }

.r-arrow { color: var(--muted-2); flex: none; }

/* DID grid */
.did-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35em; }
.did-grid span { font-family: var(--font-head); font-size: .74em; text-align: center; padding: .45em .2em; border-radius: .45em; background: rgba(41,171,226,.1); border: 1px solid rgba(41,171,226,.22); color: #cfe9ff; white-space: nowrap; opacity: 0; }
.scene.on .did-grid span { animation: popIn .4s var(--ease) both; animation-delay: calc(var(--i) * .06s + .2s); }

/* disconnect scrub */
.scene.on .scrub { animation: popIn .55s var(--ease) both, scrub .6s var(--ease) forwards; animation-delay: calc(var(--i) * .13s + .15s), calc(var(--i) * .1s + 1.1s); }
@keyframes scrub {
  40% { background: rgba(232,65,47,.22); border-color: rgba(232,65,47,.6); }
  100% { background: rgba(232,65,47,.08); border-color: rgba(232,65,47,.35); }
}
.scene.on .scrub b { animation: scrubNum .5s var(--ease) forwards; animation-delay: calc(var(--i) * .1s + 1.1s); }
@keyframes scrubNum { to { opacity: .4; text-decoration: line-through; } }
.scrub .r-tag { visibility: hidden; }
.scene.on .scrub .r-tag { animation: showTag .01s both; animation-delay: calc(var(--i) * .1s + 1.2s); }
@keyframes showTag { to { visibility: visible; } }

[data-swap] { transition: color .3s; }
[data-swap].done { color: #5fe0a0; }

/* ratio bars */
.ratio { display: grid; grid-template-columns: 4.2em 1fr 3em; align-items: center; gap: .6em; font-size: .92em; }
.ratio .track { height: .95em; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.ratio .fill { height: 100%; width: 0; border-radius: inherit; }
.scene.on .ratio .fill { animation: fillW 1s var(--ease) both; animation-delay: calc(var(--i) * .15s + .3s); }
@keyframes fillW { from { width: 0; } to { width: var(--w); } }
.ratio .pct { font-family: var(--font-head); font-weight: 700; text-align: right; }
.fill.hot { background: var(--grad-hot); } .fill.warm { background: linear-gradient(90deg,#ffd073,#febc2e); } .fill.cold { background: var(--grad-brand); }

/* toggle switches */
.sw { flex: none; width: 2.4em; height: 1.35em; border-radius: 999px; background: rgba(255,255,255,.14); position: relative; }
.sw::after { content: ""; position: absolute; top: .15em; left: .15em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; }
.sw.on { background: var(--cyan); } .sw.on::after { transform: translateX(1.05em); }
.scene.on .sw.flip { animation: flipOn .2s both; animation-delay: calc(var(--i) * .3s + 1s); }
.scene.on .sw.flip::after { animation: knob .3s var(--ease) both; animation-delay: calc(var(--i) * .3s + 1s); }
@keyframes flipOn { to { background: var(--cyan); } }
@keyframes knob { to { transform: translateX(1.05em); } }
.scene.on .sw.flipoff { animation: flipOff .2s both; animation-delay: calc(var(--i) * .3s + 1s); }
.scene.on .sw.flipoff::after { animation: knobOff .3s var(--ease) both; animation-delay: calc(var(--i) * .3s + 1s); }
@keyframes flipOff { from { background: var(--cyan); } to { background: rgba(255,255,255,.14); } }
@keyframes knobOff { from { transform: translateX(1.05em); } to { transform: none; } }

/* recording */
.rec { display: flex; align-items: center; gap: .7em; padding: .8em 1em; border-radius: .7em; background: rgba(255,255,255,.045); border: 1px solid var(--line); }
.rec-dot { width: .8em; height: .8em; border-radius: 50%; background: var(--red); box-shadow: 0 0 .8em var(--red); animation: blink 1s steps(2) infinite; flex: none; }
@keyframes blink { 50% { opacity: .25; } }
.rec-wave { flex: 1; display: flex; align-items: center; gap: .18em; height: 2.4em; }
.rec-wave i { flex: 1; border-radius: 2px; background: var(--grad-brand); height: 30%; animation: eq 1s ease-in-out infinite; }
.rec-wave i:nth-child(3n) { animation-duration: .8s; } .rec-wave i:nth-child(4n+1) { animation-duration: 1.25s; } .rec-wave i:nth-child(5n+2) { animation-delay: -.4s; }
.rec-time { font-family: var(--font-head); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }

/* AI verify */
.bubble { padding: .6em .85em; border-radius: .8em .8em .8em .2em; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--muted); font-size: .92em; }
.ck-dot { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; background: rgba(40,200,120,.18); color: #5fe0a0; font-size: .8em; font-weight: 700; }

/* typed summary */
.typed { min-height: 4.4em; padding: .75em .9em; border-radius: .7em; background: rgba(41,171,226,.07); border: 1px solid rgba(41,171,226,.22); color: #d9ebff; font-size: .92em; line-height: 1.45; }
.typed::after { content: "\258D"; color: var(--cyan-bright); animation: blink .8s steps(2) infinite; }

/* good / bad */
.gb { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.gb > div { padding: .7em .8em; border-radius: .7em; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: .86em; }
.gb h5 { margin: 0 0 .45em; font-family: var(--font-head); font-size: .92em; letter-spacing: .08em; text-transform: uppercase; }
.gb .good h5 { color: #5fe0a0; } .gb .bad h5 { color: var(--red-soft); }
.gb p { margin: 0 0 .3em; color: var(--muted); }

/* back office tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55em; }
.tile { padding: .9em .8em; border-radius: .8em; background: linear-gradient(160deg, rgba(41,171,226,.14), rgba(255,255,255,.03)); border: 1px solid rgba(41,171,226,.25); }
.tile svg { width: 1.8em; height: 1.8em; color: var(--cyan-bright); margin-bottom: .4em; display: block; }
.tile b { display: block; font-family: var(--font-head); font-size: 1.05em; }
.tile span { color: var(--muted-2); font-size: .78em; }

/* wallboard */
.wb { display: grid; grid-template-columns: 1.25fr 1fr; gap: .7em; align-items: center; }
.wb-stats { display: grid; gap: .4em; }
.wb-stat { padding: .45em .7em; border-radius: .55em; background: rgba(255,255,255,.045); border: 1px solid var(--line); }
.wb-stat b { display: block; font-family: var(--font-head); font-size: 1.35em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wb-stat span { color: var(--muted-2); font-size: .74em; text-transform: uppercase; letter-spacing: .1em; }

/* reel chrome */
.reel-progress { position: absolute; left: 4%; right: 4%; bottom: 3.5%; z-index: 4; display: flex; gap: 4px; }
.reel-progress button { flex: 1; min-width: 0; height: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.reel-progress i { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); position: relative; overflow: hidden; }
.reel-progress i::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--cyan-bright); }
.reel-progress .done i::after { width: 100%; }
.reel-progress .cur i::after { animation: segFill var(--d, 2800ms) linear forwards; }
.reel.paused .reel-progress .cur i::after { animation-play-state: paused; }
@keyframes segFill { to { width: 100%; } }
.reel-toggle { position: absolute; top: 3.2%; right: 3%; z-index: 4; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(7,13,24,.6); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.reel-toggle svg { width: 14px; height: 14px; }
.reel-toggle .i-play { display: none; } .reel-toggle.is-paused .i-play { display: block; } .reel-toggle.is-paused .i-pause { display: none; }
.reel-badge { position: absolute; top: 4.4%; left: 4%; z-index: 4; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.reel-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }

@media (max-width: 620px) {
  .reel { aspect-ratio: 4 / 5; }
  .reel-stage { font-size: 3.7cqw; }
  .scene { padding: 14% 6% 14%; }
}

/* =========================================================================
   RPM gauge
   ========================================================================= */
.rpm { position: relative; width: 100%; }
.rpm svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 9; }
.g-red { fill: none; stroke: var(--red); stroke-width: 9; }
.g-tick { stroke: rgba(255,255,255,.4); stroke-width: 1; } .g-tick.M { stroke: rgba(255,255,255,.85); stroke-width: 2; } .g-tick.r { stroke: var(--red-soft); }
.g-num { fill: var(--muted); font: 700 10px var(--font-head); text-anchor: middle; } .g-num.r { fill: var(--red-soft); }
.g-cap { fill: var(--muted-2); font: 600 6.5px var(--font-head); letter-spacing: .12em; text-anchor: middle; }
.g-needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(-90deg); transition: transform .9s cubic-bezier(.34,1.45,.64,1); }
.g-needle path { fill: var(--red-soft); }
.g-hub { fill: #0b1322; stroke: var(--red-soft); stroke-width: 2.5; }
.redline .g-red { animation: redPulse .45s ease-in-out infinite alternate; }
@keyframes redPulse { from { stroke: var(--red); } to { stroke: #ffb199; } }
.redline-flag { font-family: var(--font-head); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--red-soft); text-align: center; visibility: hidden; }
.redline .redline-flag { visibility: visible; animation: blink .5s steps(2) infinite; }

/* =========================================================================
   Platform modules (home + features)
   ========================================================================= */
.module-group + .module-group { margin-top: 64px; }
.module-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.module-head h3 { font-size: 1.5rem; margin: 0; }
.module-head span { color: var(--muted-2); font-size: .95rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card.sm { padding: 24px; }
.card.sm h3 { font-size: 1.1rem; }
.card.sm p { font-size: .93rem; }
.card .badge { position: absolute; top: 18px; right: 18px; font-family: var(--font-head); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(232,65,47,.16); color: var(--red-soft); }
.card .badge.ai { background: rgba(41,171,226,.16); color: var(--cyan-bright); }

.wallboard { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: center; }
.wallboard .wb-stat { padding: 10px 14px; }
.wallboard .wb-stat b { font-size: 1.5rem; }
.wallboard .wb-stat span { font-size: .7rem; }
.wallboard .redline-flag { font-size: .9rem; margin-top: 8px; }

@media (max-width: 980px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-4 { grid-template-columns: 1fr; } .wallboard { grid-template-columns: 1fr; } }

/* grid children must be allowed to shrink below their nowrap content */
.split > *, .hero-grid > * { min-width: 0; }
@media (max-width: 620px) { .split-media .did-grid { grid-template-columns: repeat(2, 1fr); } }
.mock-body > * { min-width: 0; }
@media (max-width: 620px) { .split-media { padding: 16px; } .split-media .mock-body { font-size: 15px !important; } }
.hero-grid:has(.reel) { grid-template-columns: 1fr 1.12fr; gap: 48px; }
@media (max-width: 980px) { .hero-grid:has(.reel) { grid-template-columns: 1fr; } .hero-visual:has(.reel) { min-height: 0; } }

.price-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
@media (max-width: 620px) { .price-grid--2 { grid-template-columns: 1fr; } }
.price-grid--2 .plan.featured::before { content: "Everything included"; }

/* =========================================================================
   Inbound AI visual — the neural graphic + live-call cards from the old site
   ========================================================================= */
.inbound-media { padding: 0; background: none; border: 0; box-shadow: none; }
.inbound-visual { position: relative; min-height: 460px; display: grid; place-items: center; }
.inbound-visual .neural { min-height: 460px; width: 100%; }
.inbound-visual .neural svg { max-height: 440px; }
.inbound-card { position: absolute; left: 0; bottom: 4%; width: min(282px, 78%); animation: floatyC 6s ease-in-out infinite; }
.inbound-card.two { left: auto; right: 0; top: 2%; bottom: auto; width: min(268px, 76%); animation-delay: -3s; }
@keyframes floatyC { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 620px) {
  .inbound-visual { display: block; min-height: 0; }
  .inbound-visual .neural { height: 190px; min-height: 0; margin-bottom: 4px; }
  .inbound-visual .neural svg { max-height: 190px; }
  .inbound-card, .inbound-card.two { display: block; position: static; transform: none; width: 100%; animation: none; margin-top: 12px; }
}

/* Facts & FAQ page */
.facts-block { padding: 26px 28px; border-radius: var(--radius); background: linear-gradient(165deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); margin-bottom: 16px; }
.facts-block h2 { font-size: 1.3rem; margin-bottom: 10px; }
.facts-block p { color: var(--muted); margin-bottom: 10px; }
.facts-block p:last-child, .facts-block ul { margin-bottom: 0; }
@media (max-width: 620px) { .facts-block { padding: 20px 18px; } }