/* ================================================================
   BW Logger - broadcastwitch.com (v4, violet)
   Light, minimal indie-app landing: violet-cast paper, ink text, a
   deep violet accent with amber used only for glints. The demo stays
   a dark app window framed with mac chrome. Type: Bricolage Grotesque
   / Instrument Sans / IBM Plex Mono. Fonts are self-hosted, so the
   site makes no third-party requests.

   Two greens inside the demo are deliberate and must NOT be swapped
   to violet: .bus-btn.pvw is the preview bus, and on every vision
   mixer ever built preview is green and program is red. Recolouring
   it would make the mock lie to the one audience that would notice.
   ================================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-var.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/instrument-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  /* Paper carries a faint violet cast rather than being neutral white, so the
     accent looks native to the page instead of dropped on top of it. */
  --bg: #fbfafd;
  --bg-alt: #f4f2fa;
  --card: #ffffff;
  --line: #eae6f3;
  --line2: #ded8ee;
  --ink: #17141f;
  --dim: #5c5670;
  --faint: #6b6480;
  /* --violet-deep is the text-safe weight (10.3:1 on --bg); --violet is the
     brighter mark colour, still 7.2:1, so both clear WCAG AA for body text. */
  --violet: #6a2cc9;
  --violet-deep: #4b1d9e;
  --violet-tint: #f2ecfd;
  --violet-line: #ddcdf6;
  --rec: #e02b22;
  /* Amber is the spotlight against the violet dark: used only on glints and
     never for text, so its low contrast on paper never matters. */
  --amber: #c98a1e;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Instrument Sans", -apple-system, "Helvetica Neue", sans-serif;
  --disp: "Bricolage Grotesque", "Instrument Sans", sans-serif;
  --maxw: 1120px;
  --shadow-sm: 0 1px 2px rgba(23,20,31,.05);
  --shadow-md: 0 2px 8px rgba(23,20,31,.06), 0 12px 32px rgba(23,20,31,.06);
  --shadow-lg: 0 4px 12px rgba(23,20,31,.08), 0 32px 80px rgba(23,20,31,.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; }
::selection { background: #ddcdf6; color: #2a0f57; }

h1, h2, h3 { font-family: var(--disp); line-height: 1.06; margin: 0; color: var(--ink); }
h1 { font-size: clamp(40px, 5.4vw, 64px); font-weight: 800; letter-spacing: -1.2px; }
h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.7px; }
h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.1px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 800px; }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 26px;
  padding: 13px 26px;
  background: rgba(251,250,253,.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); background: rgba(251,250,253,.95); }

.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--disp); font-size: 19px; font-weight: 700;
  letter-spacing: -0.3px; text-decoration: none; color: var(--ink);
}
.logo em { font-style: normal; color: var(--violet-deep); }
/* The mark is drawn with currentColor so it inherits from here, not from the
   wordmark's ink. Miter joins are the whole character of it: the B-half and the
   W are the same zigzag, one rotated a quarter turn, so the corners have to
   stay sharp or the rhyme disappears. */
.logo svg { color: var(--violet); flex: none; }

.site-nav { display: flex; gap: 26px; margin-left: auto; }
.site-nav a {
  font-size: 14.5px; font-weight: 500; color: var(--dim);
  text-decoration: none; transition: color .2s;
}
.site-nav a:hover { color: var(--ink); }

.burger { display: none; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 15.5px;
  padding: 13px 24px; border-radius: 999px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s, box-shadow .2s, background .2s, border-color .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  color: #fff;
  background: #17191c;
  border-color: #17191c;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: #000; box-shadow: var(--shadow-md); }
.btn-ghost {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line2);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--faint); }
.btn-lg { padding: 15px 30px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn-header { margin-left: 4px; padding: 9px 18px; font-size: 14px; }
.btn-sub { font-family: var(--mono); font-size: .85em; font-weight: 600; }
.btn-primary .btn-sub { color: #cbb0f5; }

/* ---------------- Hero ---------------- */
.hero {
  position: relative; overflow: hidden;
  padding: 84px 0 0;
  background:
    radial-gradient(760px 380px at 50% -80px, #f0e9fc, transparent 70%),
    var(--bg);
}
.hero-copy { text-align: center; max-width: 800px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600;
  color: var(--violet-deep);
  padding: 7px 15px; border-radius: 999px;
  background: var(--violet-tint); border: 1px solid var(--violet-line);
  margin-bottom: 26px;
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 3px rgba(106,44,201,.18);
  animation: pulse 1.6s infinite;
  flex-shrink: 0;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.hero h1 .hl { color: var(--violet-deep); }
.hero-sub {
  font-size: 18px; color: var(--dim); max-width: 640px;
  margin: 22px auto 30px;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.trust {
  list-style: none; display: flex; gap: 10px 26px; flex-wrap: wrap; justify-content: center;
  padding: 0; margin: 22px 0 0;
}
.trust li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dim); }
.trust svg { width: 15px; height: 15px; color: var(--violet); flex-shrink: 0; }

/* ---------------- App window + demo ---------------- */
.hero-shot { margin-top: 56px; max-width: 980px; }
.window {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line2);
  box-shadow: var(--shadow-lg);
  background: #e8e8e3;
}
.window-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #f2f2ee, #e6e6e1);
  border-bottom: 1px solid #d5d5cd;
}
.wdot { width: 12px; height: 12px; border-radius: 50%; }
.wdot-r { background: #ff5f57; border: 1px solid #e0443e; }
.wdot-y { background: #febc2e; border: 1px solid #d89e24; }
.wdot-g { background: #28c840; border: 1px solid #1eaa33; }
.window-title {
  flex: 1; text-align: center;
  font-size: 12.5px; font-weight: 500; color: #7a7d80;
}
.demo-pause {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: none; border: 1px solid #cfcfc7; border-radius: 7px;
  color: #5c6066; cursor: pointer;
}
.demo-pause:hover { background: #fff; color: var(--ink); }
.demo-pause svg { width: 13px; height: 13px; }
body.anim-paused .pulse,
body.anim-paused .rdot { animation-play-state: paused; }
.demo-caption { font-size: 13px; color: var(--faint); text-align: center; margin: 16px 6px 0; }

/* Demo (dark app UI, unchanged aesthetic) */
.demo { background: #10161c; transition: opacity .4s; }
.demo.demo-fade { opacity: 0; }

.demo-top {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 11px 16px; background: #04060a;
  font-family: var(--mono);
}
.demo-brand {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.4px; color: #edf2f4;
}
.demo-conn { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #93a4b0; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #5c6c78; }
.dot.ok { background: #7c4dde; box-shadow: 0 0 8px rgba(124,77,222,.6); }
.demo-rec { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.rdot {
  width: 9px; height: 9px; border-radius: 50%; background: #ff2a20;
  box-shadow: 0 0 9px rgba(255,42,32,.7);
  animation: pulse 1.2s infinite;
}
.rec-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: #ff2a20; }
.demo-rec .tc { font-size: 15px; font-weight: 500; color: #fff; }

.demo-bus {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  padding: 12px 16px 10px;
  background: #0e1319;
  border-bottom: 1px solid #000;
}
.bus-btn {
  aspect-ratio: 1.55 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; border: 1px solid #10151a;
  background: linear-gradient(180deg, #f0f3f4, #c3c9cd);
  color: #171d22;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(0,0,0,.5);
  transition: background .12s, box-shadow .12s, color .12s;
}
.bus-btn.pgm {
  background: linear-gradient(180deg, #ff5b50, #e01b10);
  color: #fff; border-color: #6e0c06;
  box-shadow: 0 0 14px rgba(255,42,32,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.bus-btn.pvw {
  background: linear-gradient(180deg, #46d860, #1fa53a);
  color: #06270f; border-color: #135a26;
  box-shadow: 0 0 14px rgba(56,208,74,.5), inset 0 1px 0 rgba(255,255,255,.4);
}

.demo-split { display: grid; grid-template-columns: 1fr 1.15fr; }
.demo-sec-label {
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 1.8px;
  color: #5c6c78; padding: 9px 16px 5px;
}
.demo-log-wrap { border-right: 1px solid #000; background: #10161c; min-width: 0; }
.demo-log {
  height: 176px; overflow: hidden;
  padding: 2px 16px 10px;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.9;
}
.log-line { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; animation: logIn .25s ease; }
@keyframes logIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.log-line .lt { color: #5c6c78; flex-shrink: 0; }
.log-line .lk {
  font-weight: 600; font-size: 9px; letter-spacing: .8px;
  padding: 1px 6px; border-radius: 3px; flex-shrink: 0;
}
.lk-cut { color: #ffd7cd; background: rgba(255,42,32,.16); }
.lk-auto { color: #ffe1bd; background: rgba(255,176,42,.16); }
.lk-dsk { color: #d3c2ff; background: rgba(147,112,255,.16); }
.lk-mkr { color: #c2e8ff; background: rgba(80,170,255,.16); }
.lk-ssrc { color: #c8f5d2; background: rgba(56,208,74,.14); }
.log-line .lx { color: #93a4b0; overflow: hidden; text-overflow: ellipsis; }

.demo-tl-wrap { background: #0e1319; min-width: 0; }
.demo-tl { position: relative; padding: 4px 16px 14px; height: 176px; }
.tl-track { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.tl-name {
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .5px;
  color: #5c6c78; width: 30px; flex-shrink: 0; text-align: right;
}
.tl-lane { position: relative; flex: 1; border-radius: 4px; background: #070a0d; border: 1px solid #000; }
.tl-mkr .tl-lane { height: 16px; background: transparent; border-color: transparent; }
.tl-dsk .tl-lane { height: 26px; }
.tl-v1 .tl-lane { height: 94px; }
.tl-clip {
  position: absolute; top: 2px; bottom: 2px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  overflow: hidden;
}
.tl-clip .clip-label {
  font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: rgba(0,0,0,.72);
  padding: 2px 4px; white-space: nowrap;
}
.tl-marker {
  position: absolute; top: 2px; width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px; border: 1px solid rgba(0,0,0,.55);
}
.tl-head {
  position: absolute; top: 20px; bottom: 10px; left: 46px; width: 1.5px;
  background: #ff2a20;
  box-shadow: 0 0 8px rgba(255,42,32,.8);
  pointer-events: none;
}
.tl-head::before {
  content: ""; position: absolute; top: -5px; left: -4px;
  border: 5px solid transparent; border-top-color: #ff2a20;
  border-bottom: none;
}

/* ---------------- Compat + personas ---------------- */
.compat {
  display: flex; align-items: center; justify-content: center; gap: 11px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 26px; padding-bottom: 0;
  border-top: 1px solid var(--line);
}
.compat-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px;
  color: var(--faint); text-transform: uppercase;
}
.compat-item {
  font-size: 14px; font-weight: 600; color: var(--dim);
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow-sm);
}
.compat-sep { width: 1px; height: 20px; background: var(--line2); margin: 0 6px; }

.personas {
  display: flex; align-items: baseline; justify-content: center; gap: 6px 10px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 34px;
  font-size: 13.5px; color: var(--faint);
}
.personas span { margin-right: 4px; }
.personas em {
  font-style: normal; color: var(--dim); font-weight: 500;
}
.personas em + em::before { content: "\00b7\00a0"; color: var(--line2); margin-right: 6px; }

/* ---------------- Sections ---------------- */
.section { padding: 92px 0; }
.section.alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--violet-deep); margin: 0 0 14px;
}
.sec-head { margin-bottom: 44px; }
.sec-head.center { text-align: center; }
.sec-head h2 { margin-bottom: 14px; }
.lead { font-size: 16.5px; color: var(--dim); max-width: 620px; margin: 0; }
.sec-head.center .lead { margin: 0 auto; }

/* Reveal-on-scroll only hides content when JS is confirmed running (html.js
   is added by main.js line 1), so no-JS visitors and failed script loads
   still see the whole page. */
/* Reveal-on-scroll. The slight blur is the whole trick: content resolves into
   focus instead of sliding in, so sections read as appearing rather than
   arriving. Kept to 3px because anything more looks like a loading state. */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px) scale(.995); filter: blur(3px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}
.js [data-reveal].revealed { opacity: 1; transform: none; filter: none; }

/* Screen-reader-only text */
.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;
}

/* ---------------- How it works ---------------- */
.how-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: start; }
.how-left h2 { margin-bottom: 30px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-n {
  font-family: var(--disp); font-size: 18px; font-weight: 700; color: var(--violet-deep);
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--violet-line); border-radius: 12px;
  background: var(--violet-tint);
}
.steps h3 { margin-bottom: 4px; }
.steps p { margin: 0; font-size: 14.5px; color: var(--dim); }

.capture-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 30px; box-shadow: var(--shadow-md);
}
.capture-card > h3 { font-size: 19px; margin-bottom: 16px; letter-spacing: -0.3px; }
.capture-list { list-style: none; margin: 0 0 22px; padding: 0; }
.capture-list li {
  position: relative; padding: 9px 0 9px 28px;
  font-size: 14.5px; color: var(--dim);
  border-top: 1px solid var(--line);
}
.capture-list li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--violet); border-bottom: 2px solid var(--violet);
  transform: rotate(-45deg);
}
.fmt-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fmt-badge {
  display: flex; flex-direction: column; gap: 0;
  padding: 9px 15px; border-radius: 12px;
  background: var(--bg-alt); border: 1px solid var(--line);
}
.fmt-name { font-family: var(--disp); font-size: 14px; font-weight: 700; }
.fmt-file { font-family: var(--mono); font-size: 11px; color: var(--violet-deep); }
.capture-note { font-size: 13px; color: var(--faint); margin: 16px 0 0; }

/* ---------------- Pricing ---------------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 28px 26px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.price-card.featured {
  border-color: var(--violet);
  box-shadow: 0 0 0 1px var(--violet), var(--shadow-md);
}
.price-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; letter-spacing: .2px;
  color: #fff; background: var(--violet-deep);
  padding: 5px 15px; border-radius: 999px; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.price-plan { font-size: 14px; font-weight: 600; color: var(--dim); margin-bottom: 14px; }
.price-row { display: flex; align-items: baseline; gap: 12px; }
.price-old {
  font-family: var(--disp); font-size: 21px; font-weight: 600; color: var(--faint);
  text-decoration: line-through; text-decoration-color: rgba(224,43,34,.6); text-decoration-thickness: 2px;
}
.price-now { font-family: var(--disp); font-size: 48px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.featured .price-now { color: var(--violet-deep); }
.price-custom { font-size: 36px; }
.price-per { font-size: 13px; color: var(--faint); margin: 7px 0 12px; }
.price-save {
  display: inline-block; align-self: flex-start;
  font-size: 12.5px; font-weight: 600;
  color: var(--violet-deep); background: var(--violet-tint); border: 1px solid var(--violet-line);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 18px;
}
.price-feats { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.price-feats li {
  position: relative; padding: 7px 0 7px 25px;
  font-size: 14px; color: var(--dim);
}
.price-feats li::before {
  content: ""; position: absolute; left: 1px; top: 13px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--violet); border-bottom: 2px solid var(--violet);
  transform: rotate(-45deg);
}
.assure {
  list-style: none; padding: 24px 0 0; margin: 34px 0 0;
  display: flex; justify-content: center; gap: 14px 32px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
.assure li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--dim); }
.assure svg { width: 16px; height: 16px; color: var(--violet-deep); flex-shrink: 0; }

/* ---------------- Features ---------------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feat {
  padding: 22px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, border-color .25s;
}
.feat:hover { border-color: var(--violet-line); box-shadow: var(--shadow-md); }
.feat h3 { margin-bottom: 6px; }
.feat p { font-size: 14px; color: var(--dim); margin: 0; }

/* ---------------- FAQ ---------------- */
.faq-list details {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); margin-bottom: 10px; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.faq-list details[open] { border-color: var(--violet-line); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 22px; cursor: pointer; list-style: none;
  font-family: var(--disp); font-weight: 600; font-size: 16px; letter-spacing: -0.2px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--violet-deep); }
.faq-chev {
  width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg); transition: transform .25s;
}
details[open] .faq-chev { transform: rotate(225deg); border-color: var(--violet); }
.faq-list details p { margin: 0; padding: 0 22px 19px; font-size: 14.5px; color: var(--dim); }

/* ---------------- CTA band ---------------- */
.ctaband {
  padding: 104px 0 116px; text-align: center;
  background: radial-gradient(680px 320px at 50% 115%, #e2f3e7, transparent 75%), var(--bg);
}
.ctaband h2 { margin: 0 0 28px; }
.ctaband-sub { font-size: 13.5px; color: var(--faint); margin: 16px 0 0; }

/* ---------------- Footer ---------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-alt); padding: 34px 0 28px; }
.footer-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.footer-row .logo { font-size: 16px; }
.footer-nav { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.footer-nav a { font-size: 13.5px; color: var(--dim); text-decoration: none; }
.footer-nav a:hover { color: var(--violet-deep); }
.footer-by { font-size: 12.5px; color: var(--faint); margin: 0; }
.footer-legal { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.footer-legal p { font-size: 11.5px; color: var(--faint); margin: 0; max-width: 860px; }

/* ---------------- Legal pages ---------------- */
.legal { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; }
.legal h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 8px; }
.legal-updated { font-family: var(--mono); font-size: 12.5px; color: var(--faint); margin: 0 0 44px; }
.legal h2 { font-size: 21px; margin: 42px 0 12px; letter-spacing: -0.4px; }
.legal h3 { font-size: 16px; margin: 24px 0 8px; }
.legal p, .legal li { font-size: 15px; color: var(--dim); line-height: 1.7; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--violet-deep); text-decoration: none; border-bottom: 1px solid var(--violet-line); }
.legal a:hover { border-bottom-color: var(--violet-deep); }
.legal-callout {
  background: var(--violet-tint); border: 1px solid var(--violet-line); border-radius: 12px;
  padding: 14px 18px; font-size: 14px; color: var(--ink); margin: 0 0 16px;
}
.legal-callout p { font-size: 14px; }
.legal-callout p:last-child { margin-bottom: 0; }

/* ---------------- Mobile sticky buy bar ---------------- */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251,251,249,.97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(23,20,31,.08);
  transform: translateY(105%);
  /* visibility keeps the hidden bar out of the keyboard tab order */
  visibility: hidden;
  transition: transform .3s ease, visibility 0s .3s;
}
.buybar.show { transform: none; visibility: visible; transition: transform .3s ease; }
.buybar p { margin: 0; font-size: 14px; color: var(--dim); }
.buybar strong { font-family: var(--disp); font-size: 19px; color: var(--ink); }
.buybar .btn { padding: 10px 22px; font-size: 15px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1020px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .price-card.featured { order: -1; }
}

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(251,251,249,.98); border-bottom: 1px solid var(--line);
    padding: 8px 0; box-shadow: var(--shadow-md);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 13px 26px; font-size: 15px; }
  .site-header { gap: 12px; padding: 11px 16px; }
  .logo { font-size: 17px; }
  .btn-header { display: none; }
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4.5px;
    width: 40px; height: 40px; padding: 10px; flex-shrink: 0;
    background: var(--card); border: 1px solid var(--line2); border-radius: 10px;
    cursor: pointer; margin-left: auto;
  }
  .burger span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
  .burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .hero { padding-top: 56px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-shot { margin-top: 40px; }
  .demo-split { grid-template-columns: 1fr; }
  .demo-log-wrap { border-right: none; border-bottom: 1px solid #000; }
  .demo-log { height: 120px; }
  .compat { gap: 8px; }
  .compat-sep { display: none; }
  .feat-grid { grid-template-columns: 1fr; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-nav { margin-left: 0; }
  .buybar { display: flex; }
  .ctaband { padding-bottom: 150px; }
}

/* ---------------- Signature line + spark ----------------
   "A little production magic" is the house line, so it is set as a maker's
   mark rather than a headline: small, letterspaced, flanked by hairlines that
   fade out. It sits under the h1 without competing with it. */
.signature {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 20px auto 0;
  font-family: var(--disp);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.7px; text-transform: uppercase;
  color: var(--violet-deep);
}
.signature::before, .signature::after {
  content: ""; height: 1px; width: 40px; flex: none;
  background: linear-gradient(90deg, transparent, #cdb8ef);
}
.signature::after { transform: scaleX(-1); }

.spark { flex: none; width: 14px; height: 14px; color: var(--violet); }
.spark path { fill: currentColor; }

/* One slow twinkle, well apart, so it reads as a glint rather than a blinking
   widget. transform-box/origin keep the scale centred on the glyph. */
@keyframes twinkle {
  0%, 88%, 100% { transform: scale(1) rotate(0deg); opacity: .9; }
  93%           { transform: scale(1.35) rotate(18deg); opacity: 1; }
}
.spark--live { animation: twinkle 7s ease-in-out infinite; transform-origin: center; }

/* ---------------- The pass ----------------
   A light sweep across the primary button on hover: a hand moving over the
   trick. Runs once per hover, never loops, and is purely decorative. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.20) 50%, transparent 62%);
  transform: translateX(-130%);
}
.btn-primary:hover::after { animation: pass .8s cubic-bezier(.33,.7,.4,1); }
@keyframes pass { to { transform: translateX(130%); } }

/* ---------------- A little more magic ----------------
   Scattered glints around the hero and CTA band, on the same slow twinkle as
   the signature spark: staggered delays so only one glints at a time. They sit
   behind the text, never intercept the pointer, and vanish on small screens. */
.hero-copy, .ctaband .container { position: relative; }
.magic-field { position: absolute; inset: 0; pointer-events: none; }
.magic-star { position: absolute; width: 13px; height: 13px; color: var(--violet); opacity: .55; }
.magic-star path { fill: currentColor; }
.magic-star.s1 { top: 16%; left: -3%; animation: twinkle 8s ease-in-out 1.2s infinite; }
.magic-star.s2 { top: 5%; right: -1%; width: 10px; height: 10px; color: var(--amber); opacity: .5; animation: twinkle 9s ease-in-out 4s infinite; }
.magic-star.s3 { top: 52%; left: -8%; width: 16px; height: 16px; opacity: .4; animation: twinkle 10s ease-in-out 6.5s infinite; }
.magic-star.s4 { top: 40%; right: -6%; animation: twinkle 11s ease-in-out 2.8s infinite; }
.magic-star.s5 { top: 86%; right: 2%; width: 9px; height: 9px; opacity: .45; animation: twinkle 9s ease-in-out 7.8s infinite; }
.magic-star.c1 { top: 10%; left: 16%; animation: twinkle 9s ease-in-out 1.6s infinite; }
.magic-star.c2 { top: 26%; right: 15%; width: 10px; height: 10px; color: var(--amber); opacity: .5; animation: twinkle 8s ease-in-out 5.2s infinite; }
.magic-star.c3 { top: 74%; left: 24%; width: 9px; height: 9px; opacity: .4; animation: twinkle 10s ease-in-out 3.4s infinite; }
@media (max-width: 860px) { .magic-star { display: none; } }

/* The headline highlight gets an occasional sheen passing through it, like
   light catching the letterforms. The glint must be a LIGHTER tint of the base
   colour, never a different hue: a contrasting hue reads as a rendering fault
   rather than as light. Gradient ends match the base exactly so the text looks
   untouched whenever the sheen is off-screen. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1 .hl {
    background: linear-gradient(100deg, var(--violet-deep) 0 42%, #a874f2 50%, var(--violet-deep) 58% 100%);
    background-size: 250% 100%;
    background-position: 110% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hl-glint 9s ease-in-out 2s infinite;
  }
}
@keyframes hl-glint {
  0%, 80%, 100% { background-position: 110% 0; }
  90% { background-position: -10% 0; }
}

/* Sparkle dust in the demo: a tiny burst where a clip lands on the timeline,
   sweeping the cut into place. Spawned by main.js, removed after one run. */
.tl-dust {
  position: absolute; width: 6px; height: 6px; pointer-events: none; z-index: 3;
  color: #7fe0a2; background: currentColor;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: dust .7s ease-out forwards;
}
@keyframes dust {
  from { transform: translate(0, 0) scale(.6) rotate(0deg); opacity: .95; }
  to { transform: translate(var(--dx, 8px), var(--dy, -10px)) scale(0) rotate(60deg); opacity: 0; }
}

/* ---------------- Atmosphere ----------------
   Two cheap layers that stop a flat light page reading as a template.

   1. Grain. A single inline feTurbulence, tiled by the browser, at very low
      opacity. It sits above the backgrounds and below everything else, so the
      paper has tooth without touching text sharpness.
   2. Aurora. A slow violet-and-amber wash drifting behind the hero, like a
      gel slowly changing on a cyc. 40s, so it is never caught moving. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 620px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(420px 300px at 22% 30%, rgba(106,44,201,.13), transparent 70%),
    radial-gradient(380px 260px at 78% 18%, rgba(201,138,30,.10), transparent 70%),
    radial-gradient(520px 340px at 55% 70%, rgba(75,29,158,.09), transparent 72%);
  filter: blur(14px);
  animation: aurora 40s ease-in-out infinite alternate;
}
.hero > * { position: relative; z-index: 1; }
@keyframes aurora {
  0%   { transform: translate3d(-2%, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(1%, -1%, 0) scale(1.02); }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .buybar { display: none !important; }
}