/*
Theme Name: Tube Sites Submitter
Theme URI: https://www.tubesitessubmitter.com/
Author: Tube Sites Submitter
Description: Blog theme matching the Tube Sites Submitter website. Same design system, same header and footer.
Version: 1.1
License: Proprietary
Text Domain: tss
*/

/* ==========================================================================
   Tube Sites Submitter — Design System
   ========================================================================== */

:root {
  /* ---------- Brand palette: orange · black · gray · white ---------- */
  --bg: #F7F7F8;                  /* page background — light gray */
  --bg-rgb: 247, 247, 248;
  --card: #FFFFFF;                /* cards, panels, header */
  --card-rgb: 255, 255, 255;

  --primary: #BC5924;             /* orange — buttons, icons, logo mark */
  --primary-text: #9A491D;        /* darker orange for TEXT (AA contrast on white) */
  --primary-dark: #7F3D1A;        /* link hover */
  --primary-light: #FCF3EE;       /* soft orange wash */
  --primary-rgb: 188, 89, 36;

  --accent-2: #E5985F;            /* lighter orange — first gradient stop */
  --accent-2-rgb: 229, 152, 95;

  --ink: #1F1F23;                 /* black — footer, CTA band, icon boxes */
  --ink-2: #29292E;
  --ink-rgb: 31, 31, 35;
  --gradient-ink: linear-gradient(135deg, #29292E, #09090B);

  /* secondary accent — teal. Complementary to orange, keeps the page from
     being one-note without fighting the CTAs for attention. */
  --accent: #2D8079;
  --accent-text: #28716B;
  --accent-light: #F1F9F8;
  --accent-rgb: 45, 128, 121;

  /* third accent — muted violet, reserved for AI. Never used on a CTA:
     orange stays the only colour that means "click me". */
  --ai: #7E5CCC;
  --ai-text: #5C3DA4;
  --ai-light: #F3EFFA;
  --ai-rgb: 126, 92, 204;

  --gradient: linear-gradient(90deg, var(--accent-2), var(--primary));
  --gradient-diag: linear-gradient(135deg, var(--ink), var(--ink-2));   /* black CTA band */
  --gradient-soft: linear-gradient(135deg, rgba(var(--accent-2-rgb), .10), rgba(var(--primary-rgb), .08));
  --on-primary: #FFFFFF;
  --tint: #FAFAFA;

  --text: #0B0B0C;                /* black */
  --text-muted: #6B7280;          /* gray */
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --success: #16A34A;
  --amber: #F59E0B;

  /* Radii */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow: 0 4px 16px rgba(15, 23, 42, .06);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, .12);
  --shadow-primary: 0 8px 24px rgba(var(--primary-rgb), .28);

  /* Layout */
  --container: 1180px;
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: .25s var(--ease);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse 60% 45% at 0% 12%,   rgba(229, 152, 95, .09), transparent 60%),
    radial-gradient(ellipse 55% 45% at 100% 62%, rgba(45, 128, 121, .07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(var(--primary-rgb), .12);
  overflow-x: hidden;
}

/* nothing may push the page sideways on small screens */
img, svg, video, table, pre { max-width: 100%; }

img, svg { max-width: 100%; display: block; }
a { color: var(--primary-text); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--primary-dark); }
button { font-family: inherit; }

h1, h2, h3, h4, h5 {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  line-height: 1.18;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
h3 { font-size: clamp(1.08rem, 1.6vw, 1.22rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; color: var(--text-muted); }

::selection { background: rgba(var(--accent-2-rgb), .18); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.section { padding: 76px 0; position: relative; }

/* subtle colour wash so light sections aren't flat gray */
.section--glow::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 55% at 4% 0%,   rgba(229, 152, 95, .16), transparent 62%),
    radial-gradient(ellipse 42% 50% at 98% 100%, rgba(45, 128, 121, .12), transparent 62%);
}
.section--glow > .container { position: relative; z-index: 1; }
.section--tight { padding: 48px 0; }
.section--alt { background: linear-gradient(180deg, #FFFFFF 0%, #FEFCFA 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-head { max-width: 700px; margin: 0 auto 42px; text-align: center; }
.section-head p { font-size: 1.02rem; margin: 0; }
.section-head--left { margin-left: 0; text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #3F3F46;
  background: #F4F4F5;
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: var(--r-full);
  margin-bottom: 20px;
}
/* orange eyebrow — use sparingly, for the hero and the main CTA sections */
.eyebrow--accent {
  color: var(--primary-text);
  background: var(--primary-light);
  border-color: rgba(var(--primary-rgb), .18);
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: .935rem;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
}

.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--primary {
  background: var(--gradient);
  color: var(--on-primary);
  box-shadow: var(--shadow-primary);
}
.btn--primary:hover { color: var(--on-primary); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--primary-rgb), .36); }

.btn--outline {
  background: var(--card);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn--outline:hover { color: var(--primary-text); border-color: var(--primary-text); transform: translateY(-2px); box-shadow: var(--shadow); }

.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { color: var(--primary-text); background: var(--primary-light); }

.btn--lg { padding: 15px 30px; font-size: 1rem; border-radius: var(--r-lg); }
.btn--sm { padding: 9px 16px; font-size: .875rem; }
.btn--block { width: 100%; }

/* secondary button on the dark header */
.header .btn--outline {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
  box-shadow: none;
}
.header .btn--outline:hover { background: rgba(255, 255, 255, .15); color: #fff; border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(11, 11, 12, .90);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.header.is-scrolled {
  background: rgba(9, 9, 11, .97);
  border-bottom-color: #29292E;
  box-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: -.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.header .logo, .header .logo:hover { color: #fff; }
.logo:hover { color: var(--text); }
svg.logo__mark {
  width: 34px;
  height: 34px;
  background: none;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), .30);
  flex-shrink: 0;
}
.header svg.logo__mark { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
@media (max-width: 767px) { svg.logo__mark { width: 30px; height: 30px; } }

.logo__mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--gradient);
  display: grid;
  place-items: center;
  color: var(--on-primary);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: -.03em;
  box-shadow: var(--shadow-primary);
}

.nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nav a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 9px;
  border-radius: var(--r-sm);
  white-space: nowrap;          /* keep "How It Works" / "For Creators" on one line */
  transition: color var(--t), background var(--t);
}
.nav a { color: #A1A1AA; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav a.is-active { color: #E5985F; font-weight: 600; }

.header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: #fff;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }
body.nav-open .nav-toggle .icon-menu { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 100px 0 88px;
  text-align: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: -20% -10% auto;
  height: 780px;
  z-index: 0;
  pointer-events: none;
}
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  animation: drift 26s var(--ease) infinite alternate;
}
.hero__blob--b { animation-duration: 32s; animation-delay: -6s; }
.hero__blob--c { animation-duration: 38s; animation-delay: -12s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -4%, 0) scale(1.12); }
}
.hero__blob--a { width: 480px; height: 480px; background: rgba(var(--accent-2-rgb), .34); top: 8%;  left: 4%; }
.hero__blob--b { width: 520px; height: 520px; background: rgba(var(--accent-rgb), .18);   top: 0;    right: 2%; }
.hero__blob--c { width: 380px; height: 380px; background: rgba(var(--ink-rgb), .10);      top: 42%;  left: 42%; }

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
}

.hero .container { position: relative; z-index: 1; }
.hero h1 { max-width: 880px; margin: 0 auto .7rem; }
.hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  max-width: 620px;
  margin: 0 auto 2.1rem;
  color: var(--text-muted);
}
.hero__note { font-size: .875rem; color: var(--text-muted); margin: 18px 0 0; }
.hero__note strong { color: var(--text); font-weight: 600; }

/* ---------- Audience cards ---------- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
  margin: 0 auto 36px;
  max-width: 1020px;
  text-align: left;
}

.audience-card {
  position: relative;
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 22px 22px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  color: inherit;
}
.audience-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.audience-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-soft);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.audience-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(var(--primary-rgb), .28); color: inherit; }
.audience-card:hover::before { transform: scaleX(1); }
.audience-card:hover::after { opacity: 1; }
.audience-card > * { position: relative; z-index: 1; }
.audience-card h3 { margin-bottom: .4rem; }
.audience-card p { font-size: .945rem; margin-bottom: 1rem; }
.audience-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .885rem;
  font-weight: 600;
  color: var(--primary-text);
}
.audience-card__link svg { width: 15px; height: 15px; transition: transform var(--t); }
.audience-card:hover .audience-card__link svg { transform: translateX(4px); }

.icon-box {
  width: 44px; height: 44px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: var(--gradient-ink);
  color: #fff;
  box-shadow: 0 6px 18px rgba(var(--ink-rgb), .22);
}
/* orange icon box — reserved for the three audience cards in the hero */
.icon-box--accent {
  background: var(--gradient);
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), .26);
}
.icon-box svg { width: 21px; height: 21px; }
.icon-box--soft {
  background: var(--accent-light);
  color: var(--accent-text);
  border: 1px solid rgba(var(--accent-rgb), .16);
  box-shadow: none;
}
.icon-box--lg { width: 56px; height: 56px; border-radius: var(--r-lg); }
.icon-box--lg svg { width: 27px; height: 27px; }

/* ==========================================================================
   FACT BAR
   Two hard numbers + one "Unlimited" cluster (saying the word once instead of
   three times) + a dark strip for the platform note.
   ========================================================================== */
.factbar {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF8F2 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.factbar__main {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) 1.2fr;
}

/* ---- the two counted numbers ---- */
.factbar__nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 26px 28px;
}
.fact { text-align: center; }
.fact__num {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text);
}
.fact__num--accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fact__label {
  display: block;
  margin-top: 7px;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--text-muted);
}

/* ---- the unlimited cluster ---- */
.factbar__unlimited {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 28px;
  border-left: 1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 120% at 0% 50%, rgba(var(--primary-rgb), .07), transparent 65%);
}

.unl__head { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.unl__sign {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--gradient);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), .30);
}
.unl__word {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -.025em;
  color: var(--text);
}

.unl__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 22px;
  border-left: 1px dashed var(--border-strong);
  display: grid;
  gap: 6px;
}
.unl__list li {
  position: relative;
  padding-left: 24px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.unl__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent-light);
}
.unl__list li::after {
  content: '';
  position: absolute;
  left: 3px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ---- dark strip: platform + AI, side by side ---- */
.factbar__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  padding: 13px 24px;
  background: linear-gradient(90deg, #17171C, #0C0C0E);
  color: #A1A1AA;
  font-size: .88rem;
}
.factbar__foot-item { display: inline-flex; align-items: center; gap: 10px; }
.factbar__foot-sep { width: 1px; height: 18px; background: #3F3F46; }
.factbar__foot strong { color: #fff; font-weight: 600; }
.factbar__foot svg { width: 17px; height: 17px; color: var(--accent-2); flex-shrink: 0; }

@media (max-width: 1023px) {
  .factbar__main { grid-template-columns: 1fr; }
  .factbar__unlimited { border-left: none; border-top: 1px solid var(--border); }
}

@media (max-width: 767px) {
  .factbar__nums { padding: 22px 18px; }
  .factbar__unlimited { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 18px; }
  .unl__list { border-left: none; padding-left: 0; }
  .unl__list li { white-space: normal; }
  .factbar__foot { flex-direction: column; gap: 9px; font-size: .8rem; padding: 14px 18px; text-align: center; }
  .factbar__foot-item { align-items: flex-start; text-align: left; }
  .factbar__foot-sep { width: 42px; height: 1px; }
}

/* ---------- Generic cards ---------- */
/* Fluid grids — reflow automatically on tablets, no breakpoint needed */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(var(--primary-rgb), .13), var(--shadow-md);
  border-color: rgba(var(--primary-rgb), .30);
}
.card h3 { margin-bottom: .45rem; font-size: 1.12rem; }
.card p { font-size: .945rem; margin: 0; }
.card--static:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }

.badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-full);
  vertical-align: middle;
  margin-left: 8px;
}
.badge--soon { background: #F4F4F5; color: #3F3F46; }
.badge--new  { background: #DCFCE7; color: #166534; }

/* Check list */
.check-list { list-style: none; margin: 16px 0 0; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: .93rem;
  color: var(--text-muted);
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 5px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-light);
}
.check-list li::after {
  content: '';
  position: absolute;
  left: 3.5px; top: 8.5px;
  width: 11px; height: 11px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.check-list li strong { color: var(--text); font-weight: 600; }

/* bonus line — orange gift marker */
.check-list li.is-bonus { color: var(--text); font-weight: 500; }
.check-list li.is-bonus::before { background: var(--primary-light); }
.check-list li.is-bonus::after { background: var(--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E") center / 11px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E") center / 11px no-repeat; }
.check-list li.is-bonus em { font-style: normal; color: var(--primary-text); font-weight: 700; }

/* ---------- Split feature rows ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.split + .split { margin-top: 76px; }
.split--reverse .split__media { order: -1; }
.split__body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.split__body p { font-size: 1.02rem; }

.mock {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--tint);
}
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.mock__title { margin-left: 10px; font-size: .78rem; color: var(--text-muted); font-weight: 500; }
.mock__body { padding: 20px; }

/* mock internals */
.mrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 9px;
  background: var(--tint);
}
.mrow:last-child { margin-bottom: 0; }
.mrow__ico { width: 26px; height: 26px; border-radius: 7px; background: #F4F4F5; flex-shrink: 0; display: grid; place-items: center; color: #3F3F46; }
.mrow__ico svg { width: 14px; height: 14px; }
.mrow__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mrow__t { display: block; font-size: .8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__s { display: block; font-size: .72rem; color: var(--text-muted); }
.pill { font-size: .66rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-full); text-transform: uppercase; letter-spacing: .04em; }
.pill--ok { background: #F4F4F5; color: #3F3F46; }
.pill--run { background: var(--accent-light); color: var(--accent-text); }
.pill--wait { background: #F4F4F5; color: #52525B; }
.bar { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }


/* ==========================================================================
   APP WINDOW — mirrors the real TSS interface: Windows title bar, toolbar
   and a data grid with per-site upload results.
   ========================================================================== */
.appwin {
  background: #FFFFFF;
  border: 1px solid #CBD0D6;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---- title bar ---- */
.appwin__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 6px 8px 11px;
  background: linear-gradient(180deg, #F3F4F6, #E8EAED);
  border-bottom: 1px solid #CBD0D6;
}
.appwin__ico {
  width: 17px; height: 17px;
  border-radius: 4px;
  background: var(--gradient);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.appwin__ico svg { width: 9px; height: 9px; color: #fff; }
.appwin__title {
  font-size: 12px;
  font-weight: 600;
  color: #3F3F46;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: auto;
}
.appwin__ctrls { display: flex; align-items: stretch; flex-shrink: 0; }
.appwin__ctrls i {
  width: 30px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #52525B;
  font-style: normal;
  font-size: 10px;
}
.appwin__ctrls i.is-close { color: #fff; background: #E11D48; border-radius: 3px; }

/* ---- toolbar ---- */
.appwin__tools {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  background: #FAFAFA;
  border-bottom: 1px solid #E5E7EB;
}
.appwin__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid #D4D4D8;
  border-radius: 5px;
  background: #fff;
  color: #3F3F46;
  font-size: 11.5px;
  font-weight: 500;
}
.appwin__btn svg { width: 11px; height: 11px; }
.appwin__btn--go { background: var(--gradient); border-color: transparent; color: #fff; font-weight: 600; }
.appwin__meter { margin-left: auto; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.appwin__meter b { color: var(--text); font-weight: 700; }

/* ---- data grid ---- */
.appgrid { width: 100%; border-collapse: collapse; }
.appgrid th, .appgrid td {
  padding: 6px 10px;
  text-align: left;
  border-right: 1px solid #EDEEF0;
  border-bottom: 1px solid #EDEEF0;
  white-space: nowrap;
}
.appgrid th {
  background: linear-gradient(180deg, #FAFAFA, #F1F2F4);
  font-size: 11px;
  font-weight: 600;
  color: #52525B;
  border-bottom-color: #D4D4D8;
}
.appgrid td { color: #3F3F46; }
.appgrid tr:last-child td { border-bottom: none; }
.appgrid th:last-child, .appgrid td:last-child { border-right: none; }
.appgrid tbody tr:nth-child(even) { background: #FBFBFC; }
.appgrid tbody tr.is-sel { background: rgba(var(--primary-rgb), .09); box-shadow: inset 2px 0 0 var(--primary); }
.appgrid__n { color: #A1A1AA; width: 1%; font-variant-numeric: tabular-nums; }
.appgrid__site { font-weight: 500; color: var(--text); }
.appgrid__time { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 11.5px; }

.appgrid__mode {
  display: inline-grid;
  place-items: center;
  width: 17px; height: 17px;
  border-radius: 4px;
  background: #F4F4F5;
  color: #52525B;
  font-size: 10px;
  font-weight: 700;
}
.appgrid__mode--a { background: rgba(var(--accent-rgb), .14); color: var(--accent-text); }

.res { font-weight: 600; font-size: 11.5px; }
.res--ok   { color: var(--accent-text); }
.res--run  { color: var(--primary-text); }
.res--wait { color: #71717A; }

.pbar { display: block; width: 84px; height: 5px; border-radius: 99px; background: #E5E7EB; overflow: hidden; }
.pbar > i { display: block; height: 100%; border-radius: 99px; background: var(--gradient); }
.pbar--done > i { background: var(--accent); }

/* ---- status bar ---- */
.appwin__status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 11px;
  background: #F7F7F8;
  border-top: 1px solid #E5E7EB;
  font-size: 11.5px;
  color: var(--text-muted);
}
.appwin__status b { color: var(--text); font-weight: 600; }
.appwin__status span:last-child { margin-left: auto; }

@media (max-width: 767px) {
  .appwin { font-size: 11.5px; }
  .appwin__tools { flex-wrap: wrap; }
  .appwin__meter { margin-left: 0; width: 100%; }
  .appgrid th:nth-child(5), .appgrid td:nth-child(5),
  .appgrid th:nth-child(1), .appgrid td:nth-child(1) { display: none; }
  .appwin__status { flex-wrap: wrap; gap: 6px 12px; }
  .appwin__status span:last-child { margin-left: 0; }
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 16%;
  right: 16%;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--accent-2-rgb), .3), rgba(var(--primary-rgb), .3));
  z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; }
.step__num {
  width: 60px; height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 2px solid var(--border-strong);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform var(--t), box-shadow var(--t);
}
.step:hover .step__num { transform: translateY(-4px) scale(1.05); border-color: var(--primary); color: var(--primary-text); box-shadow: var(--shadow-primary); }
.step h3 { margin-bottom: .4rem; }
.step p { font-size: .945rem; margin: 0; }

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.plan--featured {
  border-color: rgba(var(--primary-rgb), .4);
  box-shadow: var(--shadow-md);
  position: relative;
}
.plan__tag {
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--on-primary);
  background: var(--gradient);
  padding: 5px 12px;
  border-radius: var(--r-full);
  margin-bottom: 14px;
}
.plan__tag--ghost { background: #F4F4F5; color: #3F3F46; }
.plan__name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.15rem; margin-bottom: 6px; }
.plan__desc { font-size: .89rem; margin-bottom: 20px; min-height: 42px; }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--text);
}
.plan__period { font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 500; color: var(--text-muted); }
.plan__save { font-size: .84rem; color: var(--success); font-weight: 600; min-height: 22px; margin-bottom: 22px; }
.plan .btn { margin-bottom: 24px; }
.plan .check-list { margin-top: 0; }

/* Comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); }
table.compare { width: 100%; border-collapse: collapse; min-width: 620px; }
table.compare th, table.compare td { padding: 15px 20px; text-align: left; font-size: .92rem; border-bottom: 1px solid var(--border); }
table.compare thead th { background: var(--tint); font-family: 'Poppins', sans-serif; font-size: .86rem; letter-spacing: .01em; }
table.compare td:not(:first-child), table.compare th:not(:first-child) { text-align: center; }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare tbody tr:hover { background: var(--tint); }
table.compare td { color: var(--text-muted); }
table.compare td:first-child { color: var(--text); font-weight: 500; }
.tick { color: var(--accent); font-weight: 700; }
table.compare th.is-best,
table.compare td.is-best { background: rgba(var(--primary-rgb), .06); }
table.compare th.is-best { color: var(--primary-text); box-shadow: inset 0 2px 0 var(--primary); }
.dash { color: var(--border-strong); }

/* ---------- Blog ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.filter {
  font-size: .875rem;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t);
}
.filter:hover { border-color: var(--text); color: var(--text); }
.filter.is-active { background: var(--ink); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(var(--ink-rgb), .22); }

.post {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  color: inherit;
}
.post:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(var(--primary-rgb), .25); color: inherit; }
.post__thumb {
  height: 168px;
  background: var(--gradient-soft);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.post__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--primary-rgb), .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--primary-rgb), .07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.post__thumb svg { width: 46px; height: 46px; color: var(--primary-text); opacity: .85; position: relative; z-index: 1; }
.post__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post__meta { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--text-muted); margin-bottom: 12px; }
.post__cat {
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent-light);
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.post h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.post p { font-size: .92rem; margin-bottom: 1rem; }
.post__more { margin-top: auto; font-size: .875rem; font-weight: 600; color: var(--primary-text); display: inline-flex; align-items: center; gap: 6px; }
.post__more svg { width: 14px; height: 14px; transition: transform var(--t); }
.post:hover .post__more svg { transform: translateX(4px); }
.post.is-hidden { display: none; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.faq__item.is-open { border-color: rgba(var(--primary-rgb), .3); box-shadow: var(--shadow); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .985rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  color: var(--text);
}
.faq__q svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--text-muted); transition: transform var(--t), color var(--t); }
.faq__item.is-open .faq__q svg { color: var(--primary-text); }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__a > div { padding: 0 22px 20px; }
.faq__a p { margin: 0; font-size: .945rem; }

/* ---------- Forms ---------- */
.form { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: .945rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--card);
  border-color: var(--primary-text);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__note { font-size: .82rem; color: var(--text-muted); margin: 14px 0 0; }
.form-alert {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 18px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
}
.form-alert.is-visible { display: flex; }
.form-alert svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  padding: 52px 44px;
  text-align: center;
  background: var(--gradient-diag);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--primary-rgb), .16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--primary-rgb), .16) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 75%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: .5rem; }
.cta-band p { color: rgba(255, 255, 255, .86); font-size: 1.05rem; max-width: 560px; margin: 0 auto 28px; }
.cta-band .btn--primary { background: var(--gradient); color: var(--on-primary); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
.cta-band .btn--primary:hover { filter: brightness(1.06); color: var(--on-primary); }
.cta-band .btn--outline { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .45); }
.cta-band .btn--outline:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: #fff; }
.cta-band__note { font-size: .85rem; color: rgba(255, 255, 255, .78); margin: 18px 0 0; }

/* Cross-sell band */
.crosssell {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.crosssell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient);
}
.crosssell h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.crosssell p { margin-bottom: 22px; }

/* ---------- Page header ---------- */
.page-head {
  position: relative;
  padding: 76px 0 56px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--card), var(--bg));
  border-bottom: 1px solid var(--border);
}
.page-head::before {
  content: '';
  position: absolute;
  top: -160px; left: 50%;
  transform: translateX(-50%);
  width: 720px; height: 380px;
  background: radial-gradient(ellipse, rgba(var(--accent-2-rgb), .16), transparent 70%);
  filter: blur(50px);
}
.page-head .container { position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(2rem, 4vw, 3rem); max-width: 880px; margin: 0 auto .6rem; }
.page-head p { max-width: 660px; margin: 0 auto; font-size: 1.05rem; }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  border-top: 1px solid var(--ink);
  padding: 52px 0 0;
  color: #A1A1AA;
}
.footer .logo { color: #fff; }
.footer .logo:hover { color: #fff; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 36px;
  padding-bottom: 40px;
}
.footer__brand p { font-size: .92rem; max-width: 300px; margin: 16px 0 20px; color: #A1A1AA; }
.footer h4 {
  font-family: 'Poppins', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer li a { font-size: .92rem; color: #A1A1AA; }
.footer li a:hover { color: var(--accent-2); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid #29292E;
  font-size: .87rem;
  color: #71717A;
}
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #29292E;
  border-radius: var(--r-sm);
  color: #A1A1AA;
  transition: all var(--t);
}
.footer__social a:hover { color: #fff; background: var(--primary); border-color: var(--primary); transform: translateY(-2px); }
.footer__social svg { width: 17px; height: 17px; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   DARK HERO  (homepage)
   Black stage, white headline, orange CTA — carries the weight the old site had.
   Add .hero--dark to the hero and .has-dark-hero to <body>.
   ========================================================================== */
.hero--dark {
  margin-top: -1px;
  background:
    radial-gradient(ellipse 65% 55% at 18% -5%,  rgba(188, 89, 36, .30), transparent 62%),
    radial-gradient(ellipse 55% 55% at 88% 8%,   rgba(45, 128, 121, .20), transparent 62%),
    radial-gradient(ellipse 90% 50% at 55% 108%, rgba(229, 152, 95, .16), transparent 62%),
    radial-gradient(ellipse 80% 60% at 50% -10%, #1F1F23 0%, transparent 60%),
    linear-gradient(168deg, #141419 0%, #0C0C0E 55%, #16161B 100%);
  color: #fff;
  border-bottom: 1px solid #29292E;
  padding-top: 64px;
  padding-bottom: 104px;          /* room for the overlapping stats card */
}
.hero--dark h1 { color: #fff; }
.hero--dark .hero__sub { color: #A1A1AA; }
.hero--dark .hero__note { color: #71717A; }
.hero--dark .hero__note strong { color: #fff; }

.hero--dark .eyebrow--accent {
  color: #EDB58A;
  background: rgba(var(--primary-rgb), .16);
  border-color: rgba(var(--primary-rgb), .38);
}

.hero--dark .hero__grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .055) 1px, transparent 1px);
}
.hero--dark .hero__blob { opacity: .75; }
.hero--dark .hero__blob--a { background: rgba(var(--primary-rgb), .55); }
.hero--dark .hero__blob--b { background: rgba(var(--accent-rgb), .30); }
.hero--dark .hero__blob--c { background: rgba(229, 152, 95, .22); }

/* glass cards on the dark stage */
.hero--dark .audience-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  border-color: rgba(255, 255, 255, .10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}
.hero--dark .audience-card h3 { color: #fff; }
.hero--dark .audience-card p  { color: #A1A1AA; }
.hero--dark .audience-card__link { color: #E5985F; }
.hero--dark .audience-card::after { background: linear-gradient(135deg, rgba(var(--primary-rgb), .18), transparent 70%); }
.hero--dark .audience-card:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(var(--primary-rgb), .55);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
}

/* secondary button has to read on black */
.hero--dark .btn--outline {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  border-color: rgba(255, 255, 255, .24);
  box-shadow: none;
}
.hero--dark .btn--outline:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; }

/* ---------- stats card lifted over the hero seam ---------- */
.section--overlap {
  position: relative;
  z-index: 2;
  margin-top: -58px;
  padding-top: 0;
}
.section--overlap .factbar { box-shadow: 0 24px 60px rgba(0, 0, 0, .20); }

@media (max-width: 767px) {
  .hero--dark { padding-top: 44px; padding-bottom: 92px; }
  .section--overlap { margin-top: -56px; }
}


/* ==========================================================================
   DARK SECTION
   Black needs to appear in the MIDDLE of the page too, otherwise the black
   hero and black footer read as two separate sites with a white one between.
   ========================================================================== */
.section--dark {
  background:
    radial-gradient(ellipse 55% 75% at 10% 0%,   rgba(188, 89, 36, .20), transparent 62%),
    radial-gradient(ellipse 50% 70% at 92% 100%, rgba(45, 128, 121, .16), transparent 62%),
    linear-gradient(160deg, #17171C 0%, #0C0C0E 52%, #141419 100%);
  color: #fff;
  border-top: 1px solid #1F1F23;
  border-bottom: 1px solid #1F1F23;
  overflow: hidden;
}
.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 10%, transparent 78%);
  pointer-events: none;
}
.section--dark > .container { position: relative; z-index: 1; }

.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }
.section--dark p,
.section--dark .check-list li { color: #A1A1AA; }
.section--dark .check-list li strong { color: #fff; }
.section--dark .check-list li::before { background: rgba(var(--accent-rgb), .18); }
.section--dark a:not(.btn) { color: #E5985F; }

.section--dark .eyebrow {
  background: rgba(255, 255, 255, .06);
  color: #D4D4D8;
  border-color: rgba(255, 255, 255, .13);
}
.section--dark .eyebrow--accent {
  background: rgba(var(--primary-rgb), .16);
  color: #EDB58A;
  border-color: rgba(var(--primary-rgb), .36);
}

.section--dark .card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  border-color: rgba(255, 255, 255, .09);
  box-shadow: none;
}
.section--dark .card:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(var(--primary-rgb), .45);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}

.section--dark .steps::before {
  background: linear-gradient(90deg, rgba(var(--primary-rgb), .55), rgba(var(--accent-2-rgb), .25));
}
.section--dark .step__num {
  background: #131316;
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
.section--dark .step:hover .step__num { border-color: var(--primary); color: #E5985F; }

.section--dark .mock { background: #141416; border-color: #29292E; box-shadow: 0 20px 48px rgba(0, 0, 0, .5); }
.section--dark .mock__bar { background: #1A1A1D; border-bottom-color: #29292E; }
.section--dark .mock__title { color: #A1A1AA; }
.section--dark .mock__dot { background: #3F3F46; }
.section--dark .mrow { background: #1A1A1D; border-color: #29292E; }
.section--dark .mrow__t { color: #fff; }
.section--dark .mrow__s { color: #A1A1AA; }
.section--dark .mrow__ico { background: #29292E; color: #D4D4D8; }
.section--dark .bar { background: #29292E; }

.section--dark .btn--outline {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  border-color: rgba(255, 255, 255, .24);
  box-shadow: none;
}
.section--dark .btn--outline:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; }

/* ---------- closing CTA flows straight into the footer, no light gap ---------- */
.section--flush { border-bottom: none; }
.section--flush .cta-band {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 8px 0 0;
}
.section--flush .cta-band::after { display: none; }
.section--flush .cta-band .btn--primary { background: var(--gradient); color: var(--on-primary); box-shadow: var(--shadow-primary); }
.section--flush .cta-band .btn--outline { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .24); }

/* footer sits on the same black so the bottom reads as one block */
/* footer + closing CTA read as one lit black block, not a hole */
.footer {
  background:
    radial-gradient(ellipse 50% 90% at 12% 0%,  rgba(188, 89, 36, .16), transparent 62%),
    radial-gradient(ellipse 45% 80% at 90% 30%, rgba(45, 128, 121, .12), transparent 62%),
    linear-gradient(180deg, #131318 0%, #0A0A0C 100%);
  border-top: 1px solid #1F1F23;
}
.section--flush {
  border-bottom: none;
  background:
    radial-gradient(ellipse 60% 90% at 20% 100%, rgba(188, 89, 36, .22), transparent 62%),
    radial-gradient(ellipse 50% 80% at 85% 0%,   rgba(45, 128, 121, .16), transparent 62%),
    linear-gradient(180deg, #17171C 0%, #131318 100%);
}

/* ==========================================================================
   RESPONSIVE
   Breakpoints:  1200 large laptop · 1023 tablet (nav → hamburger) · 767 phone
   ========================================================================== */
.nav__mobile-cta { display: none; }

/* ---------- ≤1200px — small laptops: tighten the nav, keep it on one row ---------- */
@media (max-width: 1200px) {
  .header__inner { gap: 18px; }
  .nav a { padding: 8px 8px; font-size: .855rem; }
  .logo { font-size: 1.05rem; gap: 8px; }
  .logo__mark { width: 31px; height: 31px; font-size: .72rem; }
  .header__actions { gap: 8px; }
  .header__actions .btn { padding: 9px 14px; font-size: .85rem; }
}

/* ---------- ≤1119px — tablets: hamburger menu ----------
   Switching early keeps the full "Tube Sites Submitter" wordmark visible
   instead of hiding the brand name to make room for the nav. */
@media (max-width: 1119px) {
  :root { --header-h: 66px; }

  .logo { font-size: 1.1rem; }
  .nav-toggle { display: inline-flex; }
  .header__inner { gap: 12px; justify-content: space-between; }
  .header__actions .btn { padding: 11px 16px; font-size: .9rem; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: #0B0B0C;
    border-bottom: 1px solid #29292E;
    padding: 14px 20px 24px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t), opacity var(--t), visibility var(--t);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.nav-open .nav { transform: none; opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .nav a { padding: 13px 14px; font-size: 1rem; border-radius: var(--r); }
  .nav a.is-active { background: rgba(var(--primary-rgb), .16); }
  .nav__mobile-cta { display: flex; margin-top: 14px; }
  .header__actions .btn--outline { display: none; }

  /* backdrop behind the open menu */
  body.nav-open::after {
    content: '';
    position: fixed;
    inset: var(--header-h) 0 0;
    background: rgba(15, 23, 42, .35);
    z-index: 99;
    animation: fadeIn .2s var(--ease);
  }

  /* layout */
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--reverse .split__media { order: 0; }
  .split + .split { margin-top: 64px; }
  .crosssell { grid-template-columns: 1fr; gap: 28px; padding: 38px 30px; }
  .steps::before { display: none; }

  /* spacing */
  .section { padding: 72px 0; }
  .section--tight { padding: 52px 0; }
  .hero { padding: 64px 0 60px; }
  .page-head { padding: 60px 0 48px; }
  .cta-band { padding: 52px 32px; }
  .footer { padding-top: 52px; }
  .footer__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); row-gap: 34px; padding-bottom: 40px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand p { max-width: 460px; }
}

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ---------- ≤767px — phones ---------- */
@media (max-width: 767px) {
  :root { --header-h: 62px; }

  .container { padding: 0 18px; }

  /* type scale */
  h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.2; }
  h2 { font-size: clamp(1.5rem, 6vw, 1.85rem); }
  h3 { font-size: 1.12rem; }
  body { font-size: 15.5px; }
  .hero__sub, .page-head p, .section-head p { font-size: 1rem; }

  /* spacing */
  .section { padding: 56px 0; }
  .section--tight { padding: 40px 0; }
  .hero { padding: 44px 0 48px; }
  .page-head { padding: 44px 0 36px; }
  .section-head { margin-bottom: 36px; }
  .grid { gap: 16px; }

  /* nav / header */
  .logo { font-size: 1rem; }
  .logo__mark { width: 30px; height: 30px; font-size: .7rem; }
  .header__actions .btn { padding: 10px 14px; font-size: .86rem; }
  .nav-toggle { width: 40px; height: 40px; }

  /* hero: lighter background for performance */
  .hero__blob { filter: blur(60px); opacity: .42; }
  .hero__blob--a { width: 260px; height: 260px; }
  .hero__blob--b { width: 280px; height: 280px; }
  .hero__blob--c { display: none; }
  .hero__grid { background-size: 40px 40px; }

  /* cards */
  .card { padding: 24px 20px; }
  .audience-card { padding: 24px 20px 22px; }
  .icon-box { width: 44px; height: 44px; margin-bottom: 14px; }
  .icon-box svg { width: 21px; height: 21px; }

  /* buttons — full width, comfortable tap targets */
  .btn-row { flex-direction: column; gap: 10px; }
  .btn-row .btn { width: 100%; }
  .btn { min-height: 46px; }
  .btn--lg { padding: 14px 24px; font-size: .96rem; }

  /* stats */

  /* pricing */
  .plan { padding: 28px 22px; }
  .plan__price { font-size: 2.15rem; }
  .plan__desc { min-height: 0; }

  /* forms — 16px prevents iOS auto-zoom on focus */
  .form { padding: 22px 18px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field input, .field select, .field textarea { font-size: 16px; padding: 13px 14px; }
  .field textarea { min-height: 120px; }

  /* faq */
  .faq__q { padding: 15px 16px; font-size: .94rem; }
  .faq__a > div { padding: 0 16px 18px; }

  /* blog */
  .post__thumb { height: 140px; }
  .filters { gap: 8px; }
  .filter { padding: 8px 14px; font-size: .83rem; }

  /* cta + cross-sell */
  .cta-band { padding: 40px 22px; border-radius: var(--r-lg); }
  .cta-band p { font-size: .98rem; }
  .crosssell { padding: 30px 22px; border-radius: var(--r-lg); }

  /* table hint */
  .table-wrap { position: relative; }
  .table-wrap::after {
    content: 'Swipe to compare →';
    display: block;
    padding: 10px 16px;
    font-size: .78rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--tint);
  }

  /* footer */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; text-align: center; gap: 10px; }

  .hide-xs { display: none; }
}

/* ---------- ≤400px — very small phones ---------- */
@media (max-width: 400px) {
  .container { padding: 0 15px; }
  .footer__grid { grid-template-columns: 1fr; }
  .plan__price { font-size: 1.95rem; }
}

/* ---------- landscape phones: shorter vertical rhythm ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 36px 0 40px; }
  .section { padding: 48px 0; }
  .nav { max-height: calc(100dvh - var(--header-h)); }
}

/* ---------- touch devices: no hover lift (prevents sticky hover state) ---------- */
@media (hover: none) {
  .card:hover,
  .audience-card:hover,
  .post:hover,
  .plan:hover,
  .btn:hover { transform: none; }
  .audience-card:active,
  .card:active,
  .post:active { transform: scale(.99); }
}

/* ==========================================================================
   FEATURES PAGE COMPONENTS
   Built on the same tokens as the homepage — no new colours or type scales.
   ========================================================================== */

/* ---------- hero support points ---------- */
.keypoints {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  gap: 12px;
  max-width: 900px;
  margin: 30px auto 0;
}
.keypoint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}
.keypoint svg { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; }

/* ---------- workflow line ---------- */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}
.flow__step {
  flex: 1 1 128px;
  min-width: 122px;
  max-width: 175px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 12px 15px;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.flow__step:hover { transform: translateY(-4px); border-color: rgba(var(--primary-rgb), .35); box-shadow: var(--shadow); }
.flow__ico {
  width: 36px; height: 36px;
  margin: 0 auto 10px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--gradient-ink);
  color: #fff;
}
.flow__step:nth-child(4n+1) .flow__ico { background: var(--gradient); }
.flow__ico svg { width: 17px; height: 17px; }
.flow__t { display: block; font-size: .82rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.flow__arrow { align-self: center; color: var(--border-strong); flex-shrink: 0; }
.flow__arrow svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .flow__arrow { transform: rotate(90deg); } .flow__step { flex-basis: 130px; } }

/* ---------- fan-out diagram: one video -> many destinations ---------- */
.fanout { display: grid; justify-items: center; gap: 12px; text-align: center; }
.fanout__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  font-size: .95rem;
}
.fanout__pill svg { width: 18px; height: 18px; color: var(--primary); }
.fanout__hub {
  background: var(--gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-primary);
  font-family: 'Poppins', sans-serif;
  padding: 14px 28px;
}
.fanout__hub svg { color: #fff; }
.fanout__link { width: 2px; height: 26px; background: linear-gradient(180deg, var(--border-strong), rgba(var(--primary-rgb), .5)); border-radius: 2px; }
.fanout__spread {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 10px;
  margin-top: 4px;
}
.dest {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 13px 10px;
  box-shadow: var(--shadow-xs);
  font-size: .78rem;
  color: var(--text-muted);
  transition: transform var(--t), border-color var(--t);
}
.dest:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .4); }
.dest__ico {
  width: 26px; height: 26px;
  margin: 0 auto 7px;
  border-radius: 7px;
  background: var(--accent-light);
  color: var(--accent-text);
  display: grid;
  place-items: center;
}
.dest__ico svg { width: 13px; height: 13px; }
.dest b { display: block; color: var(--text); font-size: .82rem; font-weight: 600; }
.dest--more { display: grid; place-items: center; background: var(--tint); border-style: dashed; font-weight: 600; color: var(--text); }

/* ---------- parallel threads ---------- */
.threads {
  display: grid;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.thread { display: grid; grid-template-columns: minmax(96px, 130px) 1fr auto; gap: 12px; align-items: center; font-size: .82rem; }
.thread__n { font-weight: 600; color: var(--text); white-space: nowrap; }
.thread__s { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.thread .pbar { width: 100%; }

/* ---------- schedule / queue ---------- */
.sched {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sched__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  background: var(--tint);
  border-bottom: 1px solid var(--border);
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
}
.sched__head svg { width: 15px; height: 15px; color: var(--primary); }
.sched__row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: .86rem; }
.sched__row:last-child { border-bottom: none; }
.sched__time { width: 88px; flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary-text); }
.sched__what { flex: 1; min-width: 0; color: var(--text); }
.sched__what small { display: block; color: var(--text-muted); font-size: .78rem; font-weight: 400; }

/* ---------- maintained database panel ---------- */
.dbp {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.dbp__search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--tint);
  color: var(--text-muted);
  font-size: .85rem;
}
.dbp__search svg { width: 15px; height: 15px; }
.dbp__row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--border); font-size: .86rem; }
.dbp__row:last-child { border-bottom: none; }
.dbp__name { flex: 1; color: var(--text); font-weight: 500; }
.dbp__meta { color: var(--text-muted); font-size: .78rem; white-space: nowrap; }
.dbp__foot { padding: 11px 18px; background: var(--tint); font-size: .82rem; color: var(--text-muted); text-align: center; }

/* ---------- automation stack diagram ---------- */
.stack { display: grid; gap: 14px; }
.stack__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: 12px;
}
.stack__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  transition: transform var(--t), border-color var(--t);
}
.stack__item:hover { transform: translateY(-3px); border-color: rgba(var(--primary-rgb), .35); }
.stack__item svg { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; }
.stack__down { display: grid; place-items: center; color: var(--border-strong); }
.stack__down svg { width: 22px; height: 22px; }
.stack__out {
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--gradient);
  color: #fff;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  box-shadow: var(--shadow-primary);
}

/* ---------- honesty notice ---------- */
.notice {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb), .22);
}
.notice svg { width: 20px; height: 20px; color: var(--accent-text); flex-shrink: 0; margin-top: 2px; }
.notice p { margin: 0; font-size: .92rem; color: #134E4A; }
.notice strong { color: #28716B; }
.section--dark .notice { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .3); }
.section--dark .notice p { color: #CCFBF1; }
.section--dark .notice strong { color: #5EEAD4; }

/* ---------- trust figures ---------- */
.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 14px;
}
.trust__item {
  padding: 22px 20px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  text-align: center;
}
.trust__n {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.trust__l { display: block; margin-top: 6px; font-size: .84rem; color: #A1A1AA; }

/* ---------- screenshot callouts ---------- */
.shot { position: relative; }
.callout {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  font-size: .85rem;
}
.callout__n {
  width: 21px; height: 21px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
}
.callout b { display: block; color: var(--text); font-weight: 600; }
.callout span { color: var(--text-muted); }
.callout-list { display: grid; gap: 10px; margin-top: 16px; }

/* profile panel graphic */
.profiles {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.profiles__head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 18px; background: var(--tint);
  border-bottom: 1px solid var(--border);
  font-size: .84rem; font-weight: 600;
}
.profiles__head svg { width: 15px; height: 15px; color: var(--primary); }
.profiles__site { padding: 13px 18px; border-bottom: 1px solid var(--border); }
.profiles__site:last-child { border-bottom: none; }
.profiles__name { font-size: .88rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.profiles__accs { display: flex; flex-wrap: wrap; gap: 7px; }
.acc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--tint); border: 1px solid var(--border);
  font-size: .76rem; color: var(--text-muted);
}
.acc i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.acc--wait i { background: var(--amber); }

/* ==========================================================================
   PROSE — long-form article body (WordPress post content, legal pages)
   ========================================================================== */
.prose { max-width: 720px; margin: 0 auto; font-size: 1.04rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-top: 2em; margin-bottom: .5em; }
.prose h3 { font-size: clamp(1.1rem, 1.8vw, 1.28rem); margin-top: 1.6em; margin-bottom: .4em; }
.prose p { color: var(--text-muted); margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { color: var(--text-muted); padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose img,
.prose figure img { border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.prose figure { margin: 1.8em 0; }
.prose figcaption { margin-top: 10px; font-size: .84rem; color: var(--text-muted); text-align: center; }
.prose blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--primary);
  color: var(--text);
  font-size: 1.08rem;
}
.prose blockquote p { color: var(--text); }
.prose code {
  background: #F4F4F5;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: .88em;
  color: var(--primary-text);
}
.prose pre {
  background: #0B0B0C;
  color: #E4E4E7;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  overflow-x: auto;
  font-size: .86rem;
  line-height: 1.6;
}
.prose pre code { background: none; border: none; color: inherit; padding: 0; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2.4em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.prose th, .prose td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.prose th { background: var(--tint); font-family: 'Poppins', sans-serif; font-size: .88rem; }

/* article meta strip */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 18px;
  font-size: .86rem;
  color: var(--text-muted);
}

/* pagination */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 44px; }
.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 600;
}
.pagination .page-numbers:hover { border-color: var(--primary); color: var(--primary-text); }
.pagination .page-numbers.current { background: var(--gradient); border-color: transparent; color: #fff; }

/* ---------- WordPress card tweaks ---------- */
.post__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 .45rem;
}
.post__thumb--img { padding: 0; background: none; }
.post__thumb--img::after { display: none; }
.post__thumb--img img { width: 100%; height: 100%; object-fit: cover; }
.filters a.filter { text-decoration: none; }
a.eyebrow { text-decoration: none; }
.wp-caption { max-width: 100%; }
.alignleft { float: left; margin: 0 1.4em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.4em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* ---- AI accent, synced from the main site ---- */
/* violet eyebrow — AI sections only */
.eyebrow--ai {
  color: var(--ai-text);
  background: var(--ai-light);
  border-color: rgba(var(--ai-rgb), .20);
}
/* violet icon box — AI features only, never a call to action */
.icon-box--ai {
  background: linear-gradient(135deg, #9B80D8, var(--ai));
  box-shadow: 0 6px 18px rgba(var(--ai-rgb), .26);
}
.icon-box--ai-soft {
  background: var(--ai-light);
  color: var(--ai-text);
  border: 1px solid rgba(var(--ai-rgb), .16);
  box-shadow: none;
}
.section--dark .eyebrow--ai {
  background: rgba(var(--ai-rgb), .18);
  color: #C7B4F0;
  border-color: rgba(var(--ai-rgb), .38);
}
.section--dark .icon-box--ai-soft {
  background: rgba(var(--ai-rgb), .16);
  color: #C7B4F0;
  border-color: rgba(var(--ai-rgb), .30);
}

/* narrower column for article copy */
.container--narrow { max-width: 820px; }

/* pagination extras WordPress emits */
.pagination .page-numbers.dots { border-color: transparent; background: none; }
.pagination .page-numbers.next,
.pagination .page-numbers.prev { font-weight: 700; }

/* post tag list under an article */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--border); }
.tag {
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--tint);
  font-size: .8rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.tag:hover { border-color: var(--primary); color: var(--primary-text); }

/* article meta row above the headline */
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; font-size: .84rem; color: var(--text-muted); }

/* ==========================================================================
   BLOG LAYOUT + SIDEBAR
   Styles WordPress's own widget markup (widget_categories, widget_links,
   widget_recent_entries, tagcloud, widget_media_image …) so the existing
   Blogroll, Links, Recent Posts and the Tubes Booster banner keep working.
   ========================================================================== */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 44px;
  align-items: start;
}
.layout__main { min-width: 0; }

.sidebar { display: grid; gap: 20px; position: sticky; top: calc(var(--header-h) + 20px); }

.widget {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-size: .9rem;
}
.widget__title,
.widget h2,
.widget h4 {
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 14px;
}
.widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.widget li { line-height: 1.5; }
.widget li a {
  display: block;
  padding: 6px 0;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease;
}
.widget li a:hover { color: var(--primary-text); }
.widget li + li { border-top: 1px solid var(--border); }
.widget li .count,
.widget li .post-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* nested lists (category children) */
.widget li ul { margin-top: 2px; padding-left: 14px; }

/* search widget */
.widget .search-form,
.sidebar .search-form { display: flex; gap: 8px; }
.widget .search-field {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--tint);
  font: inherit;
  font-size: .88rem;
  color: var(--text);
}
.widget .search-field:focus { outline: none; border-color: var(--primary); background: var(--card); }
.widget .search-submit {
  padding: 9px 14px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-size: .84rem;
  font-weight: 650;
  cursor: pointer;
}

/* tag cloud */
.widget .tagcloud { display: flex; flex-wrap: wrap; gap: 7px; }
.widget .tagcloud a {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--tint);
  color: var(--text-muted);
  text-decoration: none;
  font-size: .78rem !important;
  transition: border-color .2s ease, color .2s ease;
}
.widget .tagcloud a:hover { border-color: var(--primary); color: var(--primary-text); }

/* image widgets — the Tubes Booster banner lives in one of these */
.widget img { display: block; max-width: 100%; height: auto; border-radius: var(--r); }
.widget_media_image { padding: 0; overflow: hidden; border: 1px solid var(--border); }
.widget_media_image img { border-radius: 0; }

/* recent posts / recent comments read better without the divider rules */
.widget_recent_entries li a { padding: 7px 0; color: var(--text); font-weight: 500; }
.widget_recent_entries .post-date { display: block; font-size: .78rem; color: var(--text-muted); }

/* calendar, if it is ever used */
.widget table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.widget table th, .widget table td { padding: 4px; text-align: center; border: 1px solid var(--border); }

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; gap: 40px; }
  .sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}