/* =============================================================================
   BuyerFirst Funnel — Template CSS v1.0.0
   Design system extracted from elite-funnel-v2.css + extended for Joomla 6.
   Accent color overrides are injected via CSS custom properties in index.php
   based on template params (accent_primary / accent_secondary / accent_tertiary).
   ============================================================================= */

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:   #07111a;
  --bg2:  #0b1622;

  /* Panel surfaces */
  --panel:  rgba(10,22,34,.76);
  --panel2: rgba(14,27,40,.92);

  /* Borders */
  --line:        rgba(113,208,255,.16);
  --line-strong: rgba(113,208,255,.28);

  /* Typography */
  --text:  #f4f8fb;
  --muted: #a9bccd;

  /* Accents — overridden by index.php from template params */
  --accent:  #69d7ff;
  --accent2: #9bf0ff;
  --accent3: #7fffe0;

  /* Semantic */
  --danger: #ff9f9f;
  --ok:     #bcffe6;

  /* Elevation */
  --shadow: 0 0 0 1px rgba(113,208,255,.10), 0 24px 70px rgba(0,0,0,.36);

  /* Geometry */
  --radius:    26px;
  --radius-sm: 18px;
  --max:       1200px;
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 12% 12%, rgba(105,215,255,.18), transparent 22%),
    radial-gradient(circle at 88% 10%, rgba(127,255,224,.08), transparent 18%),
    linear-gradient(180deg, #07111a 0%, #081420 45%, #061019 100%);
  overflow-x: hidden;
}

/* Grid overlay (toggled via .body--overlay class set in index.php) */
body.body--overlay::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; opacity: .4;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, #000 35%, transparent 80%);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ── Layout ──────────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr;          gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr);   gap: 18px; }

/* ── Topbar ──────────────────────────────────────────────────────────────────── */
.topbar {
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(7,17,26,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.topbar--sticky {
  position: sticky; top: 0; z-index: 100;
}

.topbar-inner {
  min-height: 78px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}

/* ── Brand ───────────────────────────────────────────────────────────────────── */
.brand {
  display: flex; align-items: center; gap: 14px;
  font-weight: 900; letter-spacing: .02em;
}

.brand-mark {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(105,215,255,.24), rgba(255,255,255,.06));
  border: 1px solid rgba(105,215,255,.25);
  box-shadow: var(--shadow);
  font-size: 20px; color: #e8fbff;
}

.brand-text small {
  display: block; font-size: .74rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}

/* ── Nav ─────────────────────────────────────────────────────────────────────── */
.nav { display: flex; gap: 12px; flex-wrap: wrap; }

/* Joomla menu module outputs a <ul> — style it flat */
.nav ul, .nav .mod-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.nav ul li, .nav .mod-menu li { margin: 0; }
.nav ul li a, .nav .mod-menu li a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-weight: 700; font-size: .9rem; transition: .2s ease;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
}
.nav ul li.active a, .nav .mod-menu li.current a {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 70%, #e8ffff 100%);
  color: #03131a; border-color: transparent;
  box-shadow: 0 16px 34px rgba(87,213,255,.22);
}
.nav ul li a:hover, .nav .mod-menu li a:hover { transform: translateY(-1px); }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  appearance: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 999px;
  font-weight: 800; letter-spacing: .01em;
  font-family: inherit; font-size: 1rem;
  transition: .2s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 70%, #e8ffff 100%);
  color: #03131a; box-shadow: 0 16px 34px rgba(87,213,255,.22);
}
.btn-secondary {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
}

/* ── Surface cards ───────────────────────────────────────────────────────────── */
.surface {
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.surface::after {
  content: ""; position: absolute; right: -80px; bottom: -90px;
  width: 260px; height: 260px; border-radius: 999px;
  background: radial-gradient(circle, rgba(105,215,255,.12), transparent 68%);
  pointer-events: none;
}

.panel { padding: 24px; }

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.hero { padding: 76px 0 26px; }
.hero-grid {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: 22px; align-items: stretch;
}
.hero-copy { padding: 42px; }
.hero-card  { padding: 24px; }

/* ── Typography ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, p { margin: 0; }

h1 {
  margin: 18px 0 16px;
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  line-height: .94; letter-spacing: -.045em;
  max-width: 12ch;
}
h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.55rem);
  line-height: 1.02; letter-spacing: -.03em;
  margin-bottom: 12px;
}
h3 { font-size: 1.08rem; margin-bottom: 8px; }

.lead  { font-size: 1.15rem; line-height: 1.72; color: #d5e4ef; max-width: 62ch; }
.micro { font-size: .98rem;  line-height: 1.65; color: var(--muted); }
.quote { font-size: 1.06rem; line-height: 1.8;  color: #e8f3fa; }

/* ── Eyebrow / kicker ────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(105,215,255,.08); border: 1px solid rgba(105,215,255,.18);
  color: #d8f6ff; font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
}

.kicker {
  color: var(--accent2); font-size: .86rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}

/* ── Inline meta / pills ─────────────────────────────────────────────────────── */
.inline-meta, .hero-actions, .nav-row { display: flex; gap: 12px; flex-wrap: wrap; }
.inline-meta  { margin-top: 18px; }
.hero-actions { margin-top: 24px; }

.inline-meta span, .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: #d8ebf8; font-weight: 700;
}

/* ── Stat grid ───────────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat {
  padding: 18px; border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.stat strong { display: block; font-size: 1.68rem; margin-bottom: 4px; }

/* ── Sections ────────────────────────────────────────────────────────────────── */
.section { padding: 22px 0 74px; }

/* ── List ────────────────────────────────────────────────────────────────────── */
ul.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
ul.list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
ul.list li:last-child { border-bottom: none; }

.check {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #03202a; font-weight: 900;
}

/* ── Callout / divider ───────────────────────────────────────────────────────── */
.callout {
  margin-top: 16px; padding: 18px; border-radius: 16px;
  background: rgba(105,215,255,.06);
  border: 1px solid rgba(105,215,255,.12);
  color: #dff8ff;
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  margin-top: 16px;
}

/* ── Form shell ──────────────────────────────────────────────────────────────── */
.form-shell { padding: 0; overflow: hidden; }
.form-head  { padding: 24px 24px 0; }
.form-body  { padding: 24px; }

.progress {
  margin-top: 16px;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
}
.progress-step {
  padding: 11px 12px; border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  font-size: .86rem; font-weight: 700; color: var(--muted);
}
.progress-step.active {
  background: rgba(105,215,255,.08);
  border-color: rgba(105,215,255,.24);
  color: #dff8ff;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.span-2 { grid-column: span 2; }

label { display: grid; gap: 8px; }
label span { color: #d9edf9; font-size: .9rem; font-weight: 700; }

input, select, textarea {
  width: 100%; color: var(--text);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px; padding: 15px 16px;
  font: inherit; outline: none; transition: .2s ease;
}
textarea { min-height: 132px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px rgba(105,215,255,.08);
}
select option { background: #0b1622; color: var(--text); }

.step { display: none; }
.step.active { display: block; }

.step-nav {
  display: flex; justify-content: space-between;
  gap: 12px; margin-top: 18px; flex-wrap: wrap;
}
.step-nav .right { display: flex; gap: 12px; flex-wrap: wrap; }

.status { min-height: 22px; margin-top: 12px; color: var(--danger); font-size: .95rem; }
.status.success { color: var(--ok); }

.dynamic-copy {
  margin-top: 16px; padding: 16px; border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.scorecard {
  padding: 20px; border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  display: grid; gap: 8px;
}
.scorecard strong { font-size: 1.6rem; }

/* ── Reveal animation ────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(.99);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.footer {
  padding: 26px 0 52px;
  color: var(--muted); font-size: .94rem;
}

/* ── Schedule iframe ─────────────────────────────────────────────────────────── */
.schedule-frame {
  width: 100%; min-height: 760px; border: 0;
  border-radius: 20px; background: #0b1621;
  margin-top: 18px; display: block;
}

/* ── Joomla pagination ───────────────────────────────────────────────────────── */
.pagination { display: flex; gap: 8px; list-style: none; margin: 24px 0; padding: 0; flex-wrap: wrap; }
.pagination li a,
.pagination li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: 12px; font-weight: 700; font-size: .9rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted); transition: .2s ease;
}
.pagination li.active span,
.pagination li a:hover {
  background: rgba(105,215,255,.10);
  border-color: rgba(105,215,255,.24);
  color: #dff8ff;
}

/* ── Joomla system messages ──────────────────────────────────────────────────── */
.system-unpublished, #system-message-container { margin: 16px 0; }
.alert { padding: 16px 20px; border-radius: 16px; font-size: .95rem; margin-bottom: 12px; }
.alert-message, .alert-info    { background: rgba(105,215,255,.08); border: 1px solid rgba(105,215,255,.18); color: #dff8ff; }
.alert-notice, .alert-warning  { background: rgba(255,200,100,.08); border: 1px solid rgba(255,200,100,.2);  color: #ffeebb; }
.alert-error,  .alert-danger   { background: rgba(255,100,100,.08); border: 1px solid rgba(255,100,100,.2);  color: #ffcccc; }
.alert-success                 { background: rgba(100,255,200,.08); border: 1px solid rgba(100,255,200,.2);  color: #bbffe8; }
.alert button.close { background: none; border: none; cursor: pointer; color: inherit; float: right; font-size: 1.2rem; line-height: 1; padding: 0 4px; }

/* ── Content styles (articles rendered via com_content) ──────────────────────── */
.item-page h1 { margin: 0 0 20px; }
.item-page p  { margin: 0 0 16px; line-height: 1.72; color: var(--muted); }
.item-page ul, .item-page ol { padding-left: 1.5rem; margin: 0 0 16px; line-height: 1.72; color: var(--muted); }
.item-page a  { color: var(--accent2); }
.item-page a:hover { text-decoration: underline; }
.item-page code { font-size: .9em; background: rgba(255,255,255,.06); border-radius: 6px; padding: 2px 6px; }
.item-page pre  { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 14px; padding: 20px; overflow-x: auto; }

/* ── Accessibility ───────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid, .grid-2, .grid-3, .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .hero { padding-top: 42px; }
  .hero-copy, .hero-card, .panel, .form-body, .form-head { padding: 20px; }
  .btn { width: 100%; }
  .nav { display: none; }
  .topbar-inner { min-height: 68px; }
}

/* ── Print ───────────────────────────────────────────────────────────────────── */
@media print {
  .topbar, .nav, .footer, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}


/* =============================================================================
   SP Page Builder Pro v6 integration — tpl_bffunnel v1.1.5
   SP Page Builder v6 output structure:
     .sppb-section (outermost, full-width)
       .sppb-container (max-width container, or .sppb-container-fluid for full-bleed)
         .sppb-row (flex row)
           .sppb-col-sm-* (Bootstrap-style columns, 1-12)
   Custom CSS Class field available on: Section, Column, and Addons.
   Row Class field: Section Settings > Advanced > Custom CSS Class
   Column Class field: Column Settings > Advanced > Custom CSS Class
   ============================================================================= */

/* ── Strip SP Page Builder v6 default chrome on funnel pages ───────────────── */

/* Kill SP Page Builder white page background */
body.bf-sppage,
body.bf-sppage .sppb-page-wrapper {
  background: none !important;
}

/* Remove default section padding SP Page Builder v6 adds — our bf-* classes control it */
body.bf-sppage .sppb-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* SP Page Builder v6 container — override max-width only when we apply bf-container */
body.bf-sppage .sppb-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ── Funnel section classes — apply to Section > Custom CSS Class ──────────── */

/* bf-section: standard content section vertical spacing */
.bf-section {
  padding-top: 22px !important;
  padding-bottom: 74px !important;
}

/* bf-hero: hero section top spacing */
.bf-hero {
  padding-top: 76px !important;
  padding-bottom: 26px !important;
}

/* bf-container: constrain row content to 1200px with side padding
   Apply to Section Custom CSS Class for rows that should NOT be full-bleed */
.bf-container > .sppb-container,
.bf-container > .sppb-container-inner {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* bf-fullbleed: edge-to-edge, no container constraints */
.bf-fullbleed > .sppb-container,
.bf-fullbleed > .sppb-container-fluid {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* bf-bg-dark: subtle dark section background with accent borders */
.bf-bg-dark {
  background: rgba(10,22,34,.76) !important;
  border-top: 1px solid rgba(113,208,255,.10) !important;
  border-bottom: 1px solid rgba(113,208,255,.10) !important;
}

/* ── Grid layout overrides — apply to Section Custom CSS Class ─────────────── */
/* SP Page Builder v6 uses Bootstrap 12-col grid (sppb-col-sm-*).
   These grid helpers override the flex layout for specific funnel layouts. */

/* bf-grid-hero: asymmetric 2-col hero (1.08fr / 0.92fr)
   Apply to Section, then set columns to 6+6 in SP — the CSS overrides widths */
.bf-grid-hero > .sppb-container > .sppb-row,
.bf-grid-hero > .sppb-container-inner > .sppb-row {
  display: grid !important;
  grid-template-columns: 1.08fr 0.92fr !important;
  gap: 22px !important;
  align-items: stretch !important;
}
.bf-grid-hero > .sppb-container > .sppb-row > [class*="sppb-col"],
.bf-grid-hero > .sppb-container-inner > .sppb-row > [class*="sppb-col"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* bf-grid-2: equal 2-col */
.bf-grid-2 > .sppb-container > .sppb-row,
.bf-grid-2 > .sppb-container-inner > .sppb-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}
.bf-grid-2 > .sppb-container > .sppb-row > [class*="sppb-col"],
.bf-grid-2 > .sppb-container-inner > .sppb-row > [class*="sppb-col"] {
  width: auto !important; max-width: none !important;
  flex: none !important; padding: 0 !important;
}

/* bf-grid-3: 3-col equal */
.bf-grid-3 > .sppb-container > .sppb-row,
.bf-grid-3 > .sppb-container-inner > .sppb-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}
.bf-grid-3 > .sppb-container > .sppb-row > [class*="sppb-col"],
.bf-grid-3 > .sppb-container-inner > .sppb-row > [class*="sppb-col"] {
  width: auto !important; max-width: none !important;
  flex: none !important; padding: 0 !important;
}

/* Collapse all bf-grid layouts to single column below 980px */
@media (max-width: 980px) {
  .bf-grid-hero > .sppb-container > .sppb-row,
  .bf-grid-hero > .sppb-container-inner > .sppb-row,
  .bf-grid-2 > .sppb-container > .sppb-row,
  .bf-grid-2 > .sppb-container-inner > .sppb-row,
  .bf-grid-3 > .sppb-container > .sppb-row,
  .bf-grid-3 > .sppb-container-inner > .sppb-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── Column surface card — apply to Column Custom CSS Class ────────────────── */

/* bf-surface: dark glass card */
.bf-surface {
  background: linear-gradient(180deg, var(--panel), var(--panel2)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 24px !important;
  height: 100%;
}
.bf-surface::after {
  content: "";
  position: absolute; right: -80px; bottom: -90px;
  width: 260px; height: 260px; border-radius: 999px;
  background: radial-gradient(circle, rgba(105,215,255,.12), transparent 68%);
  pointer-events: none;
}

/* bf-surface-hero: hero column — more padding */
.bf-surface-hero {
  padding: 42px !important;
}

/* ── SP Page Builder v6 addon resets ───────────────────────────────────────── */

/* Text Block addon */
.sppb-addon-text-block { color: var(--text) !important; }
.sppb-addon-text-block h1 { font-size: clamp(2.8rem,5vw,5.4rem); line-height:.94; letter-spacing:-.045em; margin:18px 0 16px; color: var(--text); }
.sppb-addon-text-block h2 { font-size: clamp(1.7rem,2.6vw,2.55rem); line-height:1.02; letter-spacing:-.03em; margin-bottom:12px; color: var(--text); }
.sppb-addon-text-block h3 { font-size: 1.08rem; margin-bottom:8px; color: var(--text); }
.sppb-addon-text-block p  { color: var(--muted); line-height: 1.72; margin-bottom: 16px; }
.sppb-addon-text-block a  { color: var(--accent2); }

/* Heading addon */
.sppb-addon-title h1,
.sppb-addon-title h2,
.sppb-addon-title h3,
.sppb-addon-title h4 { color: var(--text) !important; }

/* Button addon */
.sppb-btn { border-radius: 999px !important; font-weight: 800 !important; min-height: 52px !important; font-family: inherit !important; }
.sppb-btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 70%, #e8ffff 100%) !important;
  color: #03131a !important; border: none !important;
  box-shadow: 0 16px 34px rgba(87,213,255,.22) !important;
}
.sppb-btn-secondary, .sppb-btn-default {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--text) !important;
}

/* Image addon */
.sppb-addon-single-image img { border-radius: var(--radius-sm); }

/* Raw HTML addon — ensure dark theme doesn't bleed through */
.sppb-addon-raw-html { color: var(--text); }

/* ── Reveal animation — apply .reveal to Column Custom CSS Class ───────────── */
/* template.js IntersectionObserver handles .reveal -> .in transition */