/* ═══════════════════════════════════════════════════════════════
   NexEra — interior page system
   ───────────────────────────────────────────────────────────────
   Loaded AFTER css/styles.css on every page except index.html.
   styles.css supplies the tokens (--navy/--mint/--muted), the
   #navbar, .btn, .section/.section-inner and .form-* rules; this
   file only adds what interior pages need on top.

   index.html must never load this file: it owns the hero canvas
   and the vapor-condense text effect, and nothing here should be
   able to reach .section-label / .section-title on that page.
   ═══════════════════════════════════════════════════════════════ */

/* ── Static backdrop ─────────────────────────────────────────────
   Interior pages do not run the hero canvas (that lives in main.js
   alongside the vapor effect). This is a cheap fixed stand-in so
   the pages sit in the same room as the home page.

   NOT `background-attachment: fixed` on the body: that forces a full
   main-thread repaint on every scroll frame, iOS Safari does not honour it,
   and it leaves stale tiles behind fixed-position chrome. A fixed pseudo
   layer under the content is composited once and costs nothing to scroll. */
body.pg { background: var(--navy); }

body.pg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 12% -8%,   rgba(0, 245, 160, 0.10), transparent 62%),
    radial-gradient(760px 560px at 92% 4%,    rgba(28, 42, 84, 0.85),  transparent 60%),
    radial-gradient(1100px 800px at 50% 108%, rgba(0, 245, 160, 0.05), transparent 65%);
}

/* Everything the reader sees sits above that layer. .section and .pg-footer
   already carry z-index:1; the hero needs it stated explicitly. */
.page-hero { z-index: 1; }

/* ── Page hero ───────────────────────────────────────────────── */
.page-hero {
  position: relative;
  padding: 148px 32px 64px;
  overflow: hidden;
  text-align: center;
}

.page-hero-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.5;
  pointer-events: none;
}
.page-hero-glow--left  { top: -220px; left: -160px;  background: rgba(0, 245, 160, 0.22); }
.page-hero-glow--right { top: -180px; right: -180px; background: rgba(28, 42, 84, 0.95); }

.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}

.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 18px;
}
.page-hero-eyebrow::before,
.page-hero-eyebrow::after {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--mint);
  opacity: 0.7;
}

.page-hero-title {
  font-size: clamp(32px, 5.4vw, 60px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1px;
  margin-bottom: 18px;
}

.page-hero-sub {
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto;
}

.breadcrumb {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--muted);
}
.breadcrumb li + li::before { content: '/'; margin-right: 8px; opacity: 0.45; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--mint); }
.breadcrumb .is-current { color: var(--white); }

/* ── Prose ───────────────────────────────────────────────────── */
.prose { max-width: 760px; }
.prose p { color: var(--muted); font-size: 16px; line-height: 1.85; margin-bottom: 20px; }
.prose p strong { color: var(--white); font-weight: 600; }
.prose h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--white);
  margin: 40px 0 14px;
  letter-spacing: -0.2px;
}
.prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0 0 22px; padding-left: 0; list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  color: var(--muted);
  line-height: 1.75;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 11px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px rgba(0, 245, 160, 0.6);
}

/* ── Card grids ──────────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: rgba(22, 32, 64, 0.42);
  border: 1px solid rgba(0, 245, 160, 0.12);
  border-radius: 14px;
  padding: 26px 24px;
  transition: border-color var(--ease), transform var(--ease), background var(--ease);
}
.card:hover {
  border-color: var(--border-hover);
  background: rgba(22, 32, 64, 0.62);
  transform: translateY(-3px);
}
.card h4 {
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 9px;
  color: var(--white);
  letter-spacing: -0.1px;
}
.card p { font-size: 14.5px; color: var(--muted); line-height: 1.72; }

.card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 245, 160, 0.1);
  border: 1px solid rgba(0, 245, 160, 0.22);
  color: var(--mint);
  margin-bottom: 16px;
}
.card-icon svg { width: 20px; height: 20px; }

/* ── Numbered timeline (installation process) ────────────────── */
.timeline { position: relative; margin-top: 8px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 23px; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(0, 245, 160, 0.55), rgba(0, 245, 160, 0.16) 70%, transparent);
}

.tl-step {
  position: relative;
  padding-left: 74px;
  padding-bottom: 38px;
}
.tl-step:last-child { padding-bottom: 0; }

.tl-num {
  position: absolute;
  left: 0; top: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  background: var(--mint);
  box-shadow: 0 0 0 6px rgba(13, 17, 32, 1), 0 0 26px rgba(0, 245, 160, 0.4);
}

.tl-when {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mint);
  background: rgba(0, 245, 160, 0.09);
  border: 1px solid rgba(0, 245, 160, 0.22);
  border-radius: 100px;
  padding: 4px 11px;
  margin-bottom: 10px;
}

.tl-step h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--white);
}
.tl-step p { font-size: 15px; color: var(--muted); line-height: 1.75; }

/* ── Split "who does what" table ─────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.split-col {
  border-radius: 14px;
  padding: 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 13, 22, 0.5);
}
.split-col--ours {
  border-color: rgba(0, 245, 160, 0.28);
  background: rgba(0, 245, 160, 0.045);
}
.split-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--mint);
}
.split-col--yours h4 { color: var(--muted); }
.split-col ul { list-style: none; }
.split-col li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 13px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}
.split-col li:last-child { margin-bottom: 0; }
.split-col li::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(0, 245, 160, 0.14);
  border: 1px solid rgba(0, 245, 160, 0.4);
}
.split-col li::after {
  content: '';
  position: absolute;
  left: 5px; top: 8.5px;
  width: 5px; height: 8px;
  border: solid var(--mint);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}

/* ── Calculator ──────────────────────────────────────────────── */
.calc-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(10, 13, 22, 0.7);
  border: 1px solid rgba(0, 245, 160, 0.14);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.calc-tab {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 11px 20px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  transition: background var(--ease), color var(--ease);
}
.calc-tab:hover { color: var(--white); }
.calc-tab[aria-pressed="true"] {
  background: var(--mint);
  color: var(--navy);
  box-shadow: 0 4px 18px rgba(0, 245, 160, 0.28);
}

.calc-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 28px;
  align-items: start;
}

.calc-panel {
  background: rgba(10, 13, 22, 0.55);
  border: 1px solid rgba(0, 245, 160, 0.14);
  border-radius: 16px;
  padding: 30px 28px;
}
.calc-panel h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}
.calc-panel .calc-panel-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 26px;
}

.calc-field { margin-bottom: 26px; }
.calc-field:last-child { margin-bottom: 0; }

.calc-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
}
.calc-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  background: var(--mint);
  border-radius: 100px;
  padding: 3px 12px;
  font-variant-numeric: tabular-nums;
}

.calc-hint { font-size: 12.5px; color: var(--muted); margin-top: 9px; line-height: 1.6; }

/* range slider — same look in both engines */
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--mint) 0%, var(--mint) var(--fill, 0%),
              rgba(255, 255, 255, 0.11) var(--fill, 0%), rgba(255, 255, 255, 0.11) 100%);
  outline: none;
  cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--white);
  border: 4px solid var(--mint);
  cursor: grab;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: transform var(--ease);
}
.calc-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.calc-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 4px solid var(--mint);
  cursor: grab;
}
.calc-slider:focus-visible { box-shadow: 0 0 0 3px rgba(0, 245, 160, 0.35); }

.calc-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

/* results */
.calc-results {
  position: sticky;
  top: 96px;
  border-radius: 16px;
  padding: 30px 26px;
  background: linear-gradient(160deg, rgba(0, 245, 160, 0.11), rgba(10, 13, 22, 0.82) 58%);
  border: 1px solid rgba(0, 245, 160, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.calc-results-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 8px;
}
.calc-big {
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.calc-big-unit { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.calc-range { font-size: 13px; color: var(--muted); margin-bottom: 24px; font-variant-numeric: tabular-nums; }

.calc-rows { border-top: 1px solid rgba(255, 255, 255, 0.09); padding-top: 18px; }
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 13.5px;
  padding: 7px 0;
}
.calc-row span { color: var(--muted); }
.calc-row b { color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-row--total {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  margin-top: 10px;
  padding-top: 14px;
  font-size: 14.5px;
}
.calc-row--total b { color: var(--mint); }
.calc-row--muted b { color: var(--muted); font-weight: 500; }

.calc-cta { margin-top: 24px; }

.calc-note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.calc-disclaimer {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 13, 22, 0.55);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
}
.calc-disclaimer strong { color: var(--white); }

/* per-business-type reference cards */
/* These are real controls — clicking one loads it into the calculator. They
   used to be divs with cursor:default, so the highlighted card read as an
   arbitrary difference rather than as "this one is selected". */
.pot-card {
  position: relative;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
}
.pot-card:focus-visible {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(0, 245, 160, 0.35);
}

/* Says out loud what the highlight means. In normal flow, not absolutely
   positioned: reserving a fixed corner for it forced padding-right on the
   title and broke "Gas Stations & Convenience Stores" over four lines. Every
   card reserves this row, only the selected one inks it, so the four titles
   wrap identically and selecting one causes no reflow. */
.pot-badge {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--mint);
  border-radius: 100px;
  padding: 3px 9px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.pot-card--active .pot-badge { opacity: 1; transform: translateY(0); }

.pot-card .pot-figure {
  font-size: 22px;
  font-weight: 800;
  color: var(--mint);
  letter-spacing: -0.6px;
  margin: 10px 0 4px;
  font-variant-numeric: tabular-nums;
}
.pot-card .pot-unit { font-size: 12px; color: var(--muted); }
.pot-card--active {
  border-color: var(--mint);
  background: rgba(0, 245, 160, 0.08);
  box-shadow: 0 0 0 1px rgba(0, 245, 160, 0.3),
              0 0 34px rgba(0, 245, 160, 0.15),
              0 14px 40px rgba(0, 0, 0, 0.4);
}
.pot-card .pot-figure { transition: color 0.3s ease; }

/* ── Accordion (FAQs) ────────────────────────────────────────── */
.acc-item {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(10, 13, 22, 0.45);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--ease), background var(--ease);
}
.acc-item[data-open="true"] {
  border-color: rgba(0, 245, 160, 0.35);
  background: rgba(0, 245, 160, 0.035);
}

.acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--white);
  padding: 19px 22px;
  line-height: 1.5;
}
.acc-q:hover { color: var(--mint); }

.acc-icon {
  flex: none;
  width: 22px; height: 22px;
  position: relative;
}
.acc-icon::before,
.acc-icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--mint);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.acc-icon::before { width: 12px; height: 2px; }
.acc-icon::after  { width: 2px; height: 12px; }
.acc-item[data-open="true"] .acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.acc-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.acc-item[data-open="true"] .acc-a { grid-template-rows: 1fr; }
.acc-a > div { overflow: hidden; }
.acc-a p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
  padding: 0 22px 20px;
}
.acc-a p + p { padding-top: 0; }

/* ── CTA band ────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: 24px;
  padding: 58px 44px;
  background: linear-gradient(150deg, rgba(0, 245, 160, 0.14), rgba(22, 32, 64, 0.7) 62%);
  border: 1px solid rgba(0, 245, 160, 0.3);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
}
.cta-band h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.12;
  margin-bottom: 14px;
}
.cta-band p {
  font-size: 16px;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 30px;
  line-height: 1.75;
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Stat strip ──────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stat {
  text-align: center;
  padding: 24px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 245, 160, 0.14);
  background: rgba(10, 13, 22, 0.5);
}
.stat b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--mint);
  letter-spacing: -1px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 12.5px; color: var(--muted); display: block; margin-top: 7px; line-height: 1.5; }

/* ── Interior footer ─────────────────────────────────────────── */
.pg-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  background: rgba(10, 13, 22, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 54px 32px 34px;
}
.pg-footer-inner { max-width: var(--max-w); margin: 0 auto; }
.pg-footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pg-footer-brand img { height: 32px; width: auto; margin-bottom: 16px; }
.pg-footer-brand p { font-size: 13.5px; color: var(--muted); line-height: 1.75; max-width: 300px; }
.pg-footer h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 15px;
}
.pg-footer ul { list-style: none; }
.pg-footer ul li { margin-bottom: 9px; }
.pg-footer ul a { font-size: 13.5px; color: var(--muted); }
.pg-footer ul a:hover { color: var(--mint); }
.pg-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 24px;
}
.pg-footer-bottom p { font-size: 12px; color: var(--muted); line-height: 1.7; }

/* ── Utilities ───────────────────────────────────────────────── */
.u-center      { text-align: center; }
.u-mt-40       { margin-top: 40px; }
.u-mt-28       { margin-top: 28px; }
.u-mb-40       { margin-bottom: 40px; }
.u-narrow      { max-width: 700px; margin-left: auto; margin-right: auto; }
.section--tight { padding-top: 28px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .calc-layout { grid-template-columns: 1fr; }
  .calc-results { position: static; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats  { grid-template-columns: repeat(2, 1fr); }
  .pg-footer-top { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}

@media (max-width: 768px) {
  .page-hero { padding: 122px 20px 44px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .tl-step { padding-left: 60px; padding-bottom: 32px; }
  .tl-num { width: 40px; height: 40px; font-size: 13.5px; }
  .timeline::before { left: 19px; }
  .calc-panel { padding: 24px 20px; }
  .calc-results { padding: 26px 22px; }
  .cta-band { padding: 44px 24px; border-radius: 18px; }
  .pg-footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .calc-tabs { width: 100%; }
  .calc-tab { flex: 1; padding: 11px 12px; font-size: 12.5px; }
}

/* Respect the same motion preference the home page does */
@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
  .acc-a { transition: none; }
}

/* ── Lead-form state ─────────────────────────────────────────────
   Shared by every [data-lead-form]. Carried over from css/kiosk.css,
   which the kiosk page no longer needs now that it uses this system. */
.k-status { font-size: 13.5px; min-height: 1.3em; margin-top: 12px; line-height: 1.6; }
.k-status.ok  { color: var(--mint); }
.k-status.err { color: #FF8A70; }
.k-status a   { color: inherit; text-decoration: underline; }

input.k-bad, select.k-bad, textarea.k-bad {
  border-color: #FF6A4D !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 77, 0.14) !important;
}

.k-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Kiosk walkthrough video ─────────────────────────────────────
   The source is portrait 720x1280 (9:16). At width:100% in a 1120px
   container that paints roughly 1030x1830 and swallows the page, so
   the frame is given a definite WIDTH and aspect-ratio derives the height.
   Sizing off height instead does not work here: a block-level box with
   width:auto stretch-fits its container, which beats the ratio and just
   letterboxes a wide black box.
   The three-way min() bounds it on both axes — 42vh of width is 74vh of
   height once the 9:16 ratio is applied, so short laptop viewports are
   covered without a separate max-height. */
.k-video-frame {
  /* The constraint is that the whole portrait video is visible AT ONCE once
     you have scrolled to it — not that it fits under the page hero, which it
     never can. So the budget is only what shares the screen WITH the frame:
     72px of fixed navbar it must clear, 30+30 card padding, and 18+22 for the
     caption, plus slack. Do not add the hero or the section margins here. */
  --k-chrome: 196px;

  width: min(348px, 82vw, calc((100vh - var(--k-chrome)) * 9 / 16));
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 245, 160, 0.45);
  background: #05070E;
  /* NexEra-green bloom: a tight ring, a close glow and a wide falloff, so the
     frame reads as lit rather than outlined. */
  box-shadow:
    0 0 0 1px rgba(0, 245, 160, 0.22),
    0 0 26px rgba(0, 245, 160, 0.34),
    0 0 70px rgba(0, 245, 160, 0.20),
    0 0 130px rgba(0, 245, 160, 0.10),
    0 26px 80px rgba(0, 0, 0, 0.6);
}

.k-video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #05070E;
}

/* The card around the video is trimmed: at 56px top and bottom it ate
   another 56px of the height budget and left the frame smaller for no gain. */
.k-video-section .section-inner { padding: 30px; }

@media (max-width: 768px) {
  /* A phone is tall and scrolling one screen for a portrait video is normal,
     so the column width governs here rather than the viewport-height budget. */
  .k-video-frame { width: min(330px, 86vw); }
  .k-video-section .section-inner { padding: 22px; }
}

/* ── Converge diagram ────────────────────────────────────────────
   Function cards feeding curved wires into a single node: "all of these
   become one machine". The wire geometry cannot be expressed in CSS
   because it depends on where the cards actually land, so pages.js
   measures the anchors and writes the path data; everything here is the
   look, and the whole graphic degrades to a plain card grid if that JS
   never runs or the viewport is too narrow to route wires through. */
.cv { position: relative; }

.cv-grid {
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  gap: 18px;
  align-items: start;
}
.cv-col { display: grid; gap: 18px; }

.cv-card {
  position: relative;
  z-index: 1;
  background: rgba(22, 32, 64, 0.5);
  border: 1px solid rgba(0, 245, 160, 0.14);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.cv-card:hover {
  border-color: rgba(0, 245, 160, 0.45);
  background: rgba(22, 32, 64, 0.7);
  box-shadow: 0 0 26px rgba(0, 245, 160, 0.12);
}
.cv-card .card-icon { width: 38px; height: 38px; margin-bottom: 12px; }
.cv-card .card-icon svg { width: 18px; height: 18px; }
.cv-card h4 { font-size: 15.5px; font-weight: 700; color: var(--white); margin-bottom: 5px; }
.cv-card p  { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* the wires live over the whole block, under the cards */
.cv-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.cv-wire       { fill: none; stroke: rgba(0, 245, 160, 0.22); stroke-width: 1.4; }
.cv-wire-pulse { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round;
                 filter: drop-shadow(0 0 6px rgba(0, 245, 160, 0.9)); }
.cv-node       { fill: var(--mint); filter: drop-shadow(0 0 10px rgba(0, 245, 160, 0.95)); }
.cv-node-ring  { fill: none; stroke: rgba(0, 245, 160, 0.5); stroke-width: 1.2; }

.cv-out {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 34px auto 0;
  text-align: center;
  padding: 26px 30px;
  border-radius: 16px;
  border: 1px solid rgba(0, 245, 160, 0.32);
  background: linear-gradient(160deg, rgba(0, 245, 160, 0.10), rgba(10, 13, 22, 0.85) 62%);
  box-shadow: 0 0 40px rgba(0, 245, 160, 0.10), 0 20px 50px rgba(0, 0, 0, 0.45);
}
.cv-out-eyebrow {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--mint); margin-bottom: 10px;
}
.cv-out h3 { font-size: 22px; font-weight: 800; color: var(--white); margin-bottom: 8px; letter-spacing: -0.3px; }
.cv-out p  { font-size: 14px; color: var(--muted); line-height: 1.7; }

/* Narrow: no gutter to route wires through, so it becomes a plain stack.
   pages.js watches the same 900px and skips drawing entirely. */
@media (max-width: 900px) {
  .cv-grid { grid-template-columns: 1fr; }
  .cv-wires { display: none; }
  .cv-out { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cv-wire-pulse { display: none; }
}