/* VIDEO+ — site styles.

   The design language is lifted straight from the extension's own panel, because the
   two should feel like one product: near-black glass, one cyan-to-violet accent, fully
   round pills, light-weight wordmark, and a drifting colour field behind everything.

   The field's colours are not fixed. app.js samples the demo video and writes them into
   --lv1/--lv2/--lv3, so the page is lit by the thing it is selling. */

:root {
  --bg:     #05070b;
  --ink:    #eef2f7;
  --dim:    #98a3b3;
  --faint:  #6b7787;
  --line:   rgba(255,255,255,.10);
  --panel:  rgba(255,255,255,.045);
  --c1:     #7fe3ff;
  --c2:     #b49cff;
  --grad:   linear-gradient(135deg, #7fe3ff, #b49cff);

  /* Live colours, overwritten by the demo. These are the fallbacks. */
  --lv1: #2a86c4;
  --lv2: #b49cff;
  --lv3: #ff8a33;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- ambient field */
.field { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.field i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .58;
  transition: background 1.2s linear;
}
.f1 { width: 52vw; height: 46vh; left: -10vw; top: -6vh;   background: var(--lv1); animation: d1 21s ease-in-out infinite; }
.f2 { width: 48vw; height: 44vh; right: -8vw; top: 4vh;    background: var(--lv2); animation: d2 27s ease-in-out infinite; }
.f3 { width: 60vw; height: 40vh; left: 14vw;  top: 38vh;   background: var(--lv3); animation: d3 33s ease-in-out infinite; }

@keyframes d1 { 0%,100% { transform: translate(0,0) } 50% { transform: translate(6vw, 5vh) } }
@keyframes d2 { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-5vw, 7vh) } }
@keyframes d3 { 0%,100% { transform: translate(0,0) } 50% { transform: translate(4vw,-6vh) } }

/* The scrim is what turns loose colour into "glass". Without it the blobs read as a
   cheap gradient background instead of light behind a surface. */
.scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(5,7,11,.12), rgba(5,7,11,.78) 62%),
    linear-gradient(180deg, rgba(5,7,11,.42), rgba(5,7,11,.86));
  backdrop-filter: blur(48px) saturate(1.25);
  -webkit-backdrop-filter: blur(48px) saturate(1.25);
}
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

nav, main, footer { position: relative; z-index: 3; }

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 720px; }
.center { text-align: center; }
.band { padding: 92px 0; }
.band.final { padding: 104px 0 120px; }

h1, h2, h3 { margin: 0; letter-spacing: -.012em; font-weight: 500; }
h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.12; font-weight: 300; }
h1 em { font-style: normal; color: var(--c1); font-weight: 300; }
h2 { font-size: clamp(25px, 3.2vw, 34px); line-height: 1.22; margin-bottom: 16px; }
h3 { font-size: 17px; margin-bottom: 9px; font-weight: 600; }

.body { color: var(--dim); font-size: 16.5px; margin: 0 auto; }
.body.narrow { max-width: 620px; }
.lede { color: var(--dim); font-size: clamp(16px, 2vw, 19px); max-width: 620px; margin: 20px auto 0; }
.fineprint { color: var(--faint); font-size: 13px; }
.fineprint a { color: var(--dim); }

/* ---------------------------------------------------------------- nav */
nav {
  display: flex; align-items: center; gap: 22px;
  padding: 16px 24px; max-width: 1060px; margin: 0 auto;
}
.brand {
  font-size: 21px; font-weight: 250; letter-spacing: .012em;
  color: var(--ink); text-decoration: none; margin-right: auto;
}
.brand span { color: var(--c1); font-weight: 300; }
.navlinks { display: flex; gap: 22px; }
.navlinks a { color: var(--dim); text-decoration: none; font-size: 14.5px; transition: color .15s; }
.navlinks a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 12px 22px; border-radius: 999px;
  color: #08121c; background: var(--grad);
  transition: transform .14s ease, filter .14s ease, opacity .14s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.btn-sm  { font-size: 13.5px; padding: 8px 16px; }
.btn-lg  { font-size: 16px; padding: 14px 28px; }
.btn-block { display: flex; width: 100%; margin-top: 20px; }
.btn-ghost {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line);
}
/* Until the store URL is filled in, the button says so rather than leading nowhere. */
.btn[data-pending] { opacity: .55; cursor: default; }
.btn[data-pending]:hover { transform: none; filter: none; }

.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 16px;
}

/* ---------------------------------------------------------------- hero */
.hero { padding: 54px 24px 40px; text-align: center; max-width: 1060px; margin: 0 auto; }

.trust {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap;
}
.trust li { color: var(--faint); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.trust li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--grad); flex: none;
}

/* ---------------------------------------------------------------- live demo */
.demo { margin: 56px auto 0; max-width: 860px; }

.demo-stage { position: relative; padding: 44px 30px; }

/* The spill. A tiny canvas blown up and blurred -- which is, give or take, exactly what
   the extension does to the page behind your player. */
.glow {
  position: absolute; left: 8%; right: 8%; top: 12%; bottom: 12%;
  width: 84%; height: 76%;
  filter: blur(58px); opacity: .95;
  transition: opacity .45s ease;
  border-radius: 40px;
}
.demo-stage[data-on="0"] .glow { opacity: 0; }

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.09);
}
.bar {
  position: absolute; left: 0; right: 0; height: 12.5%;
  background: #000; overflow: hidden;
}
.bar.top { top: 0; } .bar.bot { bottom: 0; }
.bar canvas {
  width: 100%; height: 100%; display: block;
  filter: blur(9px); transform: scale(1.15);
  opacity: 1; transition: opacity .45s ease;
}
.demo-stage[data-on="0"] .bar canvas { opacity: 0; }

.film { position: absolute; left: 0; right: 0; top: 12.5%; bottom: 12.5%; }
.film canvas { width: 100%; height: 100%; display: block; }

.demo-bar {
  display: flex; align-items: center; gap: 14px;
  margin: 20px auto 0; max-width: 560px;
  padding: 12px 16px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--line);
}
.switch {
  flex: none; width: 42px; height: 25px; border-radius: 999px; border: 0; padding: 0;
  cursor: pointer; position: relative; background: rgba(255,255,255,.14);
  transition: background .2s;
}
.switch[aria-checked="true"] { background: var(--grad); }
.knob {
  position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; transition: transform .2s cubic-bezier(.3,.8,.3,1);
}
.switch[aria-checked="true"] .knob { transform: translateX(17px); }
.demo-label { display: flex; flex-direction: column; line-height: 1.3; margin-right: auto; }
.demo-label strong { font-size: 14px; font-weight: 600; }
.demo-label span { font-size: 12.5px; color: var(--faint); }
.demo-hint { font-size: 12.5px; color: var(--faint); }

/* ---------------------------------------------------------------- cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.card {
  padding: 24px 22px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--line);
}
.card p { color: var(--dim); font-size: 14.5px; margin: 0; }

.ico { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 16px; position: relative; overflow: hidden; }
.ico-bars { background: #0c1017; }
.ico-bars::before, .ico-bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px; background: var(--grad);
}
.ico-bars::before { top: 0; } .ico-bars::after { bottom: 0; }
.ico-glow { background: #0c1017; }
.ico-glow::before {
  content: ""; position: absolute; inset: 10px; border-radius: 6px;
  background: #0c1017; box-shadow: 0 0 16px 5px rgba(127,227,255,.75);
}
.ico-dim { background: var(--grad); }
.ico-dim::before {
  content: ""; position: absolute; inset: 0; background: rgba(4,6,10,.78);
}
.ico-dim::after {
  content: ""; position: absolute; inset: 11px; border-radius: 5px; background: var(--grad);
}

/* ---------------------------------------------------------------- sites */
.sites {
  list-style: none; margin: 34px 0 22px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
}
.sites li {
  padding: 8px 15px; border-radius: 999px; font-size: 13.5px; color: var(--dim);
  background: var(--panel); border: 1px solid var(--line);
}
.sites li.more { color: var(--c1); border-color: rgba(127,227,255,.3); }


/* ---------------------------------------------------------------- site table
   Replaces a flat wall of name-tags. A tag told you a site was supported; this tells
   you WHAT is supported on it, which is the actual question. */
.sitegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.sitecol {
  padding: 24px 24px 20px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--line);
}
.sitecol-h {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c1); margin-bottom: 14px;
}
.sitecol dl { margin: 0; }
.sitecol dt { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-top: 13px; }
.sitecol dt:first-child { margin-top: 0; }
.sitecol dd { margin: 2px 0 0; font-size: 13.5px; color: var(--dim); line-height: 1.45; }

.sitenote { margin-top: 22px; display: grid; gap: 10px; }
.sitenote p {
  margin: 0; font-size: 14px; color: var(--dim); line-height: 1.55;
  padding: 13px 16px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.sitenote p b { color: var(--ink); }
.sitenote .nope { border-color: rgba(255,150,120,.18); background: rgba(255,120,90,.05); }
.sitenote .nope a { color: var(--c1); }

/* ---------------------------------------------------------------- presets */
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.preset {
  padding: 20px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--line);
  /* Column layout so the numbers line up across all three cards regardless of how
     long each description runs -- they are meant to be compared. */
  display: flex; flex-direction: column;
}
.preset p { flex: 1; }
.preset-free { border-color: rgba(127,227,255,.24); }
.preset b { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.preset b span {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; padding: 2px 7px;
  border-radius: 999px; color: #08121c; background: var(--grad);
}
.preset b span.free {
  background: rgba(255,255,255,.12); color: var(--dim);
}
.preset p { color: var(--dim); font-size: 13.5px; margin: 9px 0 12px; line-height: 1.5; }
.preset-nums { font-size: 11.5px; color: var(--faint); letter-spacing: .01em; }

@media (max-width: 880px) {
  .sitegrid { grid-template-columns: 1fr; }
  .presets  { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------- supported marquee */
.marquee {
  margin: 34px 0 10px; display: grid; gap: 10px;
  /* Fade both ends so the loop never shows a hard edge entering or leaving. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.mq-row { overflow: hidden; }
.mq-track {
  display: flex; gap: 10px; width: max-content;
  animation: mq 46s linear infinite;
}
.mq-rev .mq-track { animation-duration: 58s; animation-direction: reverse; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mq-item {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 9px 16px 9px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 13.5px; color: var(--dim);
  background: var(--panel); border: 1px solid var(--line);
}
.mq-item i {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 11px; font-weight: 700; color: #08121c;
  background: var(--grad);
}

/* ---------------------------------------------------------------- preset previews
   Each card shows its own setting AS LIGHT. The glow's size and opacity are the
   preset's actual reach and strength, so the three cards differ by exactly as much
   as the modes themselves do. */
.presets-head { text-align: center; margin-top: 56px; }
.presets-head h3 { font-size: 21px; font-weight: 500; margin-bottom: 10px; }
.presets-head p {
  color: var(--dim); font-size: 15px; max-width: 620px; margin: 0 auto; line-height: 1.6;
}
.presets-head b { color: var(--ink); }

.preset-demo {
  position: relative; height: 104px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 50%, #0b0f15, #05070b);
  margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
}
.pd-glow {
  position: absolute; border-radius: 50%;
  background: conic-gradient(from 210deg, #2a86c4, #b49cff, #ff8a33, #2a86c4);
}
.pd-frame {
  position: relative; z-index: 1; width: 96px; height: 54px; border-radius: 6px;
  background: linear-gradient(103deg, #0d3e5e, #1c6f9e 34%, #c8702f 74%, #6d2418);
  box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10);
}
/* reach -> blur + size, strength -> opacity. Same axis the real presets move on. */
.preset-demo[data-mode="subtle"]   .pd-glow { width: 132px; height: 78px; filter: blur(20px); opacity: .38; }
.preset-demo[data-mode="balanced"] .pd-glow { width: 162px; height: 96px; filter: blur(26px); opacity: .48; }
.preset-demo[data-mode="cinema"]   .pd-glow { width: 212px; height: 124px; filter: blur(32px); opacity: .80; }

/* The numbers row now carries its own reach bar, so the figure and the bar agree. */
.preset-nums { position: relative; padding-top: 16px; }
.preset-nums i {
  position: absolute; top: 7px; left: 0; height: 4px; border-radius: 999px;
  background: var(--grad); display: block;
}
.preset-nums::before {
  content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 4px;
  border-radius: 999px; background: rgba(255,255,255,.09);
}
.preset b span { letter-spacing: .09em; }

@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
}

/* ---------------------------------------------------------------- controls */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

.ticks { list-style: none; margin: 22px 0 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  color: var(--dim); font-size: 14.5px; line-height: 1.5;
}
.ticks li b { color: var(--ink); font-weight: 600; }
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--grad);
}

.panel-shot {
  border-radius: 22px; padding: 16px 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
}
.ps-head { font-size: 17px; font-weight: 250; padding: 4px 10px 14px; }
.ps-head span { color: var(--c1); }
.ps-cap {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--faint); padding: 14px 10px 6px;
}
.ps-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px; border-radius: 12px; font-size: 14px; color: var(--ink);
}
.ps-row:hover { background: rgba(255,255,255,.04); }
.sw {
  width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.14);
  position: relative; flex: none;
}
.sw.on { background: var(--grad); }
.sw::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff;
}
.sw.on::after { transform: translateX(14px); }

/* ---------------------------------------------------------------- pricing */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 38px; }
.tier {
  padding: 28px 26px; border-radius: 22px;
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.tier-pro {
  border-color: rgba(127,227,255,.28);
  background: linear-gradient(165deg, rgba(127,227,255,.07), rgba(180,156,255,.04));
}
.tier-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.pill {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .1em;
  padding: 3px 8px; border-radius: 999px; color: #08121c; background: var(--grad);
}
.price { font-size: 40px; font-weight: 300; margin-top: 10px; letter-spacing: -.02em; }
.price-sub { color: var(--faint); font-size: 13px; margin-bottom: 6px; }
.tier .ticks { flex: 1; }
.tier .fineprint { margin: 10px 0 0; }

/* ---------------------------------------------------------------- faq */
details {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
details summary {
  cursor: pointer; list-style: none; padding: 17px 34px 17px 0;
  font-size: 16px; font-weight: 500; position: relative;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint);
  transform: rotate(45deg); transition: transform .2s;
}
details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
details p { color: var(--dim); font-size: 15px; margin: 0 0 18px; padding-right: 20px; }

/* ---------------------------------------------------------------- footer */
footer { border-top: 1px solid var(--line); padding: 44px 0 54px; margin-top: 20px; }
.foot { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot-brand { font-size: 19px; display: block; margin-bottom: 8px; }
.foot .fineprint { margin: 0; max-width: 320px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.foot-links a { color: var(--dim); text-decoration: none; font-size: 14px; }
.foot-links a:hover { color: var(--ink); }
.legal { margin-top: 34px; max-width: 720px; line-height: 1.6; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 880px) {
  .cards  { grid-template-columns: 1fr; }
  .split  { grid-template-columns: 1fr; gap: 34px; }
  .tiers  { grid-template-columns: 1fr; }
  .band   { padding: 68px 0; }
}
@media (max-width: 620px) {
  .navlinks { display: none; }
  .demo-stage { padding: 24px 6px; }
  .demo-hint { display: none; }
  .hero { padding-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .field i { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- privacy page */
.doc { padding: 60px 0 90px; }
.doc h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 10px; }
.doc h2 { font-size: 19px; margin: 34px 0 10px; }
.doc p, .doc li { color: var(--dim); font-size: 15.5px; }
.doc ul { padding-left: 20px; }
.doc .updated { color: var(--faint); font-size: 13.5px; margin-bottom: 28px; }
.doc a { color: var(--c1); }