/* Ultra Video Downloader for Skool: design v3.
 *
 * The v2 design with two additions: a dark/light theme switch and brand logos
 * for the supported browsers. Every colour comes from the tokens below; the
 * theme is set by data-theme on <html> (see the script in v3/index.html).
 * v2.css is left as it was so the two designs can be compared side by side.
 *
 * No web fonts (German GDPR rulings on Google Fonts) and no external requests.
 */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b18;
  --bg-2: #0b1124;
  --card: rgba(255, 255, 255, .045);
  --card-hover: rgba(255, 255, 255, .07);
  --card-shadow: none;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --dashed: rgba(255, 255, 255, .18);
  --soft: rgba(255, 255, 255, .06);
  --soft-hover: rgba(255, 255, 255, .1);
  --text: #eef2ff;
  --text-2: #d7defa;
  --muted: #a5b0cc;
  --dim: #7d88a6;
  --link: #8fb0ff;
  --kicker: #9fb6ff;
  --header-bg: rgba(7, 11, 24, .72);
  --menu-bg: #0b1124;
  --chip-bg: rgba(13, 19, 40, .82);
  --chip-shadow: 0 18px 40px rgba(0, 0, 0, .4);
  --shot-shadow: 0 50px 100px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 80px rgba(91, 140, 255, .25);
  --ico-bg: rgba(91, 140, 255, .14);
  --ico-color: #a9c0ff;
  --us-cell: rgba(91, 140, 255, .1);
  --us-text: #fff;
  --toggle-on-bg: #fff;
  --toggle-on-text: #0b1124;
  --pro-bg: linear-gradient(180deg, rgba(91, 140, 255, .16), rgba(157, 107, 255, .08));
  --pro-border: rgba(143, 176, 255, .45);
  --announce-bg: linear-gradient(90deg, rgba(91, 140, 255, .18), rgba(157, 107, 255, .18));
  --announce-accent: #b8c9ff;
  --glow-a: #2b4dff;
  --glow-b: #7a3dff;
  --glow-opacity: .55;
  --body-text: #c9d2ee;
  --good: #4fd98f;
  --good-on-light: #0f8a4a;
  --soon-bg: rgba(91, 140, 255, .16);
  --soon-text: #a9c0ff;
  --planned-bg: rgba(255, 255, 255, .07);
  --grad: linear-gradient(100deg, #5b8cff 0%, #9d6bff 55%, #38d6c4 100%);
  --blue: #5b8cff;
  --teal: #38d6c4;
  --radius: 18px;
  --wrap: 1180px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fc;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-hover: #fbfcff;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);
  --line: #e2e7f1;
  --line-strong: #c9d2e6;
  --dashed: #c9d2e6;
  --soft: rgba(14, 20, 38, .045);
  --soft-hover: rgba(14, 20, 38, .08);
  --text: #0e1426;
  --text-2: #29324d;
  --muted: #4d5874;
  --dim: #6b7590;
  --link: #2f5bdb;
  --kicker: #4357d1;
  --header-bg: rgba(255, 255, 255, .8);
  --menu-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, .94);
  --chip-shadow: 0 18px 40px rgba(30, 40, 90, .16);
  --shot-shadow: 0 40px 80px rgba(30, 40, 90, .22), 0 0 0 1px rgba(14, 20, 38, .06);
  --ico-bg: #eef2ff;
  --ico-color: #3f5fe0;
  --us-cell: #eef3ff;
  --us-text: #0e1426;
  --toggle-on-bg: #0e1426;
  --toggle-on-text: #fff;
  --pro-bg: linear-gradient(180deg, #f2f5ff, #f8f3ff);
  --pro-border: #b9c8ff;
  --announce-bg: linear-gradient(90deg, #e8eeff, #f1eaff);
  --announce-accent: #4357d1;
  --glow-a: #8fb0ff;
  --glow-b: #d2b8ff;
  --glow-opacity: .5;
  --body-text: #2c3550;
  --good: #12a150;
  --soon-bg: #e8eeff;
  --soon-text: #3f5fe0;
  --planned-bg: #eef0f5;
  --grad: linear-gradient(100deg, #3d6bff 0%, #7c4dff 55%, #0fa596 100%);
  --blue: #3d6bff;
  --teal: #0fa596;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color .25s ease, color .25s ease;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.glow { position: absolute; inset: 0 0 auto 0; height: 1100px; pointer-events: none; overflow: hidden; z-index: 0; }
.glow::before, .glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--glow-opacity); }
.glow::before { width: 720px; height: 720px; left: -180px; top: -220px; background: var(--glow-a); }
.glow::after { width: 640px; height: 640px; right: -160px; top: 40px; background: var(--glow-b); opacity: calc(var(--glow-opacity) * .75); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 24px; border-radius: 14px; font-weight: 750; font-size: 16px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 30px rgba(91, 140, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover { box-shadow: 0 14px 40px rgba(157, 107, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-ghost { background: var(--soft); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--soft-hover); }
.btn-sm { padding: 10px 16px; font-size: 14px; border-radius: 12px; }
.btn svg { width: 18px; height: 18px; }

/* ---------- Announcement + header ---------- */
.announce { position: relative; z-index: 2; text-align: center; font-size: 14px; padding: 9px 16px; background: var(--announce-bg); border-bottom: 1px solid var(--line); }
.announce a { color: var(--text); font-weight: 650; text-decoration: none; }
.announce a span { color: var(--announce-accent); }

.site-header {
  position: sticky; top: 0; z-index: 40; background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { height: 68px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; font-weight: 800; line-height: 1.12; margin-right: auto; }
.brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(91, 140, 255, .35); }
.brand small { display: block; font-size: 12px; font-weight: 550; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav a:hover { color: var(--text); }
.nav .btn { color: #fff; }
.actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  background: var(--soft); color: var(--text); border: 1px solid var(--line);
}
.icon-btn:hover { background: var(--soft-hover); }
.icon-btn svg { width: 20px; height: 20px; }
/* Show the icon for the theme you'd switch TO. */
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
.nav-toggle { display: none; }
@media (max-width: 920px) {
  .nav-toggle { display: inline-grid; }
  .nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--menu-bg); border-bottom: 1px solid var(--line); padding: 8px 16px 18px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 14px; border: 0; }
}

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 1; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: start; padding-top: 76px; padding-bottom: 64px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px;
  background: var(--soft); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--text-2);
}
.pill b { background: var(--grad); color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; }
.hero h1 { font-size: clamp(34px, 4.1vw, 52px); line-height: 1.04; letter-spacing: -0.04em; margin: 22px 0 16px; font-weight: 900; }
/* A soft glow behind the coloured words makes them pop without making the line bigger. */
.hero h1 .grad-text { filter: drop-shadow(0 6px 24px rgba(124, 92, 255, .35)); }
:root[data-theme="light"] .hero h1 .grad-text { filter: drop-shadow(0 6px 20px rgba(91, 110, 255, .22)); }
.hero .lead { font-size: 20px; color: var(--muted); margin: 0 0 32px; max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 26px 0 0; color: var(--body-text); font-size: 15px; font-weight: 550; }
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* Browser logo row above the hero image. It is the same height as the pill
   on the left (and has the same gap below it as the pill), so the image's
   top edge lines up with the top of the headline. */
.hero-right { min-width: 0; }
.logo-row {
  display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px;
  list-style: none; margin: 0 0 22px; padding: 0; min-height: 40px; align-items: center;
}
.logo-row li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 7px; border-radius: 11px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); font-size: 13px; font-weight: 650; color: var(--text-2);
}
.logo-row li.later { opacity: .7; }
.logo-row li small { font-weight: 600; color: var(--dim); font-size: 11px; }
@media (max-width: 1180px) and (min-width: 1001px) { .logo-row li small { display: none; } }
@media (max-width: 1000px) { .logo-row { justify-content: flex-start; flex-wrap: wrap; } }
.blogo { width: 18px; height: 18px; flex: none; fill: currentColor; }

.visual { position: relative; perspective: 1600px; }
.visual .shot { border-radius: 18px; transform: rotateY(-9deg) rotateX(4deg); transform-origin: left center; box-shadow: var(--shot-shadow); }
.chip {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; color: var(--text);
  background: var(--chip-bg); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--chip-shadow); font-size: 14px; font-weight: 650; white-space: nowrap; animation: float 6s ease-in-out infinite;
}
.chip small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.chip .dot { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 11px; font-weight: 850; flex: none; }
.chip.c1 { left: -26px; bottom: 34px; }
.chip.c2 { right: -14px; top: 26px; animation-delay: -2s; }
.chip.c3 { right: 24px; bottom: -26px; animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; padding-top: 48px; gap: 48px; }
  .visual .shot { transform: none; }
  .chip.c1 { left: 8px; bottom: -20px; }
  .chip.c2 { right: 8px; top: 12px; }
  .chip.c3 { display: none; }
}
@media (max-width: 480px) { .chip { font-size: 12px; padding: 8px 10px; } .chip .dot { width: 26px; height: 26px; } .logo-row li { font-size: 13px; padding: 6px 10px 6px 7px; } }

/* ---------- Badge marquee ---------- */
.badges { position: relative; z-index: 1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.badges-track { display: flex; gap: 14px; width: max-content; padding: 18px 0; animation: scroll 42s linear infinite; }
.badges:hover .badges-track { animation-play-state: paused; }
.badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--soft); font-size: 14px; font-weight: 650; color: var(--text-2);
}
.badge svg { width: 18px; height: 18px; color: var(--teal); flex: none; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 72px; box-shadow: var(--card-shadow); }
.stat { background: var(--bg-2); padding: 26px 22px; text-align: center; }
.stat strong { display: block; font-size: clamp(30px, 4vw, 42px); font-weight: 850; letter-spacing: -0.03em; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Sections ---------- */
section.block { position: relative; z-index: 1; padding: 104px 0; }
.head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--kicker); }
.head h2 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; margin: 12px 0 14px; font-weight: 850; }
.head p { color: var(--muted); font-size: 19px; margin: 0; }
@media (max-width: 640px) { section.block { padding: 72px 0; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); transition: background .2s ease, border-color .2s ease; }
.card:hover { background: var(--card-hover); border-color: var(--line-strong); }
.ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--ico-bg); color: var(--ico-color); margin-bottom: 16px; }
.ico svg { width: 24px; height: 24px; }

/* ---------- Bento features ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento .card { padding: 28px; overflow: hidden; }
.bento h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -0.01em; }
.bento p { margin: 0; color: var(--muted); }
.b-lg { grid-column: span 4; display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; }
.b-md, .b-third { grid-column: span 2; }
.b-lg img { border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3), 0 0 0 1px var(--line); }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-lg { grid-column: span 2; grid-template-columns: 1fr; }
  .b-md, .b-third { grid-column: span 1; }
}
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .b-lg, .b-md, .b-third { grid-column: span 1; } }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { counter-increment: s; padding: 18px 18px 26px; }
.steps img { border-radius: 12px; margin-bottom: 20px; box-shadow: 0 0 0 1px var(--line); }
.steps h3 { display: flex; gap: 12px; align-items: center; margin: 0 0 8px; font-size: 20px; }
.steps h3::before {
  content: counter(s); width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-size: 16px; font-weight: 850;
}
.steps p { margin: 0; color: var(--muted); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* ---------- Use cases ---------- */
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.uses .card { padding: 26px; }
.uses h3 { margin: 0 0 8px; font-size: 19px; }
.uses p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 960px) { .uses { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .uses { grid-template-columns: 1fr; } }

/* ---------- Comparison ---------- */
.compare-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: var(--card-shadow); }
table.compare { width: 100%; min-width: 580px; border-collapse: collapse; }
.compare th, .compare td { padding: 17px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }
.compare thead th { font-size: 15px; color: var(--muted); font-weight: 700; }
.compare thead th.us { color: #fff; background: linear-gradient(180deg, #5b8cff, #6f6bff); }
.compare td.us { background: var(--us-cell); font-weight: 750; color: var(--us-text); }
.compare th[scope="row"] { font-weight: 600; }
.compare td { color: var(--muted); }
.yes { color: var(--good) !important; font-weight: 750; }
.yes::before { content: "✓ "; }
.footnote { font-size: 14px; color: var(--dim); margin: 14px 2px 0; }

/* ---------- Pricing ---------- */
.toggle { display: inline-flex; padding: 5px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); margin: 0 auto 36px; }
.toggle button { border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; font-size: 15px; padding: 9px 18px; border-radius: 10px; cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--toggle-on-bg); color: var(--toggle-on-text); }
.toggle .save { color: var(--good); font-size: 13px; margin-left: 6px; }
:root[data-theme="dark"] .toggle button[aria-pressed="true"] .save { color: var(--good-on-light); }
.center { text-align: center; }
.prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 880px; margin: 0 auto; }
.price { position: relative; padding: 34px; display: flex; flex-direction: column; }
.price.pro { background: var(--pro-bg); border: 1px solid var(--pro-border); box-shadow: 0 30px 80px rgba(91, 140, 255, .18); }
.price .tag { position: absolute; top: -14px; right: 28px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.price h3 { margin: 0; font-size: 19px; color: var(--text-2); }
.amount { font-size: 58px; font-weight: 850; letter-spacing: -0.04em; line-height: 1; margin: 14px 0 6px; }
.amount .per { font-size: 18px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.price .sub { color: var(--muted); margin: 0; min-height: 28px; }
.price ul { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 12px; flex: 1; }
.price li { display: flex; gap: 10px; }
.price li::before { content: "✓"; color: var(--good); font-weight: 850; }
.price .btn { width: 100%; }
.promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; padding: 0; margin: 30px auto 0; max-width: 1020px; }
.promise li { padding: 18px; display: flex; gap: 12px; font-size: 15px; color: var(--muted); }
.promise strong { display: block; color: var(--text); }
.promise svg { width: 22px; height: 22px; color: var(--good); flex: none; margin-top: 2px; }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; max-width: 480px; } .promise { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .promise { grid-template-columns: 1fr; } }

/* ---------- Browsers (rendered by ../site.js) ---------- */
.browser-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; }
.browser {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 10px; border-radius: 16px; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); text-align: center;
}
a.browser:hover { border-color: var(--pro-border); }
.browser strong { font-size: 16px; }
.browser-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 850; }
.browser-ico.has-logo { border-radius: 0; background: none; }
.browser-ico.has-logo svg { width: 40px; height: 40px; fill: currentColor; }
.status { font-size: 12px; font-weight: 750; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.status.live { background: rgba(79, 217, 143, .15); color: var(--good); }
.status.soon { background: var(--soon-bg); color: var(--soon-text); }
.status.planned { background: var(--planned-bg); color: var(--muted); }
@media (max-width: 860px) { .browser-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 400px) { .status { font-size: 11px; padding: 2px 7px; } }

/* ---------- Reviews (rendered by ../site.js) ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 0; box-shadow: var(--card-shadow); }
.review .stars { color: #f5a623; letter-spacing: 2px; }
.review blockquote { margin: 10px 0 14px; }
.review figcaption { color: var(--muted); font-size: 14px; }
.reviews-empty { max-width: 720px; margin: 0 auto; text-align: center; padding: 34px 26px; border: 1px dashed var(--dashed); border-radius: var(--radius); background: var(--card); }
.reviews-empty p { color: var(--muted); margin: 8px 0 18px; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0 22px; box-shadow: var(--card-shadow); }
.faq summary { cursor: pointer; list-style: none; padding: 19px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--kicker); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--muted); }

/* ---------- Final CTA (dark in both themes, for contrast) ---------- */
.final {
  position: relative; overflow: hidden; text-align: center; border-radius: 28px; padding: 72px 24px; color: #eef2ff;
  background: radial-gradient(600px 300px at 20% 0%, rgba(91, 140, 255, .5), transparent 60%), radial-gradient(600px 300px at 90% 100%, rgba(157, 107, 255, .45), transparent 60%), #0d1430;
  border: 1px solid rgba(255, 255, 255, .09);
}
.final h2 { font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -0.03em; line-height: 1.06; margin: 0 0 14px; font-weight: 850; }
.final .grad-text { background: linear-gradient(100deg, #5b8cff 0%, #9d6bff 55%, #38d6c4 100%); -webkit-background-clip: text; background-clip: text; }
.final p { color: #c9d2ee; font-size: 19px; margin: 0 0 30px; }

/* ---------- Footer ---------- */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 44px 0 110px; color: var(--dim); font-size: 14px; }
.site-footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px; margin-bottom: 18px; }
.site-footer .brand { margin-right: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: none;
  padding: 10px; border-radius: 18px; background: var(--chip-bg); border: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--chip-shadow);
  align-items: center; justify-content: space-between; gap: 12px; font-size: 14px;
}
.mobile-cta span { color: var(--muted); padding-left: 6px; line-height: 1.3; }
.mobile-cta strong { color: var(--text); display: block; }
@media (max-width: 760px) { .mobile-cta { display: flex; } }

/* ---------- Scroll reveal (only when JS runs) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .chip, .badges-track { animation: none; }
  .badges-track { flex-wrap: wrap; width: auto; justify-content: center; padding: 18px 16px; }
  .badges-track [aria-hidden="true"] { display: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card { transition: none; }
}

/* ---------- Article (guide pages) ---------- */
.article { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; padding: 56px 16px 40px; }
.article .crumbs { font-size: 14px; color: var(--dim); }
.article .crumbs a { color: var(--muted); }
.article h1 { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.08; letter-spacing: -0.03em; margin: 16px 0 16px; font-weight: 850; }
.article .meta { color: var(--dim); font-size: 14px; margin-bottom: 28px; }
.article h2 { font-size: 28px; letter-spacing: -0.02em; line-height: 1.2; margin: 48px 0 12px; }
.article h3 { font-size: 20px; margin: 28px 0 8px; }
.article p, .article li { color: var(--body-text); }
.article li { margin-bottom: 6px; }
.article img { border-radius: 14px; margin: 22px 0; box-shadow: 0 0 0 1px var(--line); }
.article .callout { padding: 20px 22px; margin: 26px 0; border-radius: 14px; background: var(--us-cell); border: 1px solid var(--pro-border); }
.article table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 16px; }
.article .table-wrap { overflow-x: auto; }
.article th, .article td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article th { color: var(--muted); }
.article .toc { padding: 18px 22px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.article .toc strong { display: block; margin-bottom: 6px; }
.article .toc ol { margin: 0; padding-left: 20px; }
.related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.related a { display: block; padding: 18px 20px; text-decoration: none; color: var(--text); font-weight: 700; }
.related a span { display: block; font-weight: 500; color: var(--muted); font-size: 15px; margin-top: 4px; }
@media (max-width: 640px) { .related { grid-template-columns: 1fr; } }

/* ---------- SEO "about" text block on the home page ---------- */
.about-text { max-width: 820px; margin: 0 auto; }
.about-text h2 { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.02em; margin: 0 0 14px; }
.about-text h3 { font-size: 20px; margin: 26px 0 8px; }
.about-text p { color: var(--muted); }
.guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.guides a { display: block; padding: 20px; text-decoration: none; color: var(--text); font-weight: 750; }
.guides a span { display: block; color: var(--muted); font-weight: 500; font-size: 15px; margin-top: 4px; }
@media (max-width: 860px) { .guides { grid-template-columns: 1fr; } }

/* Contact line in every footer (Safepay requires contact details on the site). */
.footer-contact { margin: 0 0 10px; color: var(--muted); }
.footer-contact a { color: var(--text); }