/* ==========================================================================
   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;

  /* Every hue below is the same as before — only the saturation came down,
     so the brand still reads as orange, it just stopped glowing. Fill colours
     are dark enough for white text to pass AA (4.5:1); the -text variants are
     for coloured text on white. */

  --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, #101013);

  /* 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(251, 146, 60, .09), transparent 60%),
    radial-gradient(ellipse 55% 45% at 100% 62%, rgba(13, 148, 136, .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(251, 146, 60, .16), transparent 62%),
    radial-gradient(ellipse 42% 50% at 98% 100%, rgba(13, 148, 136, .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);
}
/* violet eyebrow — AI sections only */
.eyebrow--ai {
  color: var(--ai-text);
  background: var(--ai-light);
  border-color: rgba(var(--ai-rgb), .20);
}

.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;
  /* Without this a flex item refuses to shrink below its content width, so on
     a narrow phone the row grew past the viewport and pushed the hamburger
     off-screen instead of tightening up. */
  min-width: 0;
}

.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;
  min-width: 0;
}

/* Two wordmarks, one shown at a time.
   "Tube Sites Submitter" is roughly 175px at this size. Add the logo mark,
   the Download button and the hamburger and the header needs about 455px —
   more than a 390px phone has, so the last item in the row ended up outside
   the viewport.

   The rule is deliberately tied to the hamburger, not to a guessed phone
   width: THE MOMENT THE NAV COLLAPSES, THE SHORT MARK TAKES OVER. Below
   1119px the row has to hold logo + Download + hamburger, and only "TSS"
   leaves that comfortable at every size. Above it the nav is inline and there
   is room for the full name.

   The full name stays in the SVG's aria-label, so screen readers and search
   engines always get it. */
.logo__short { display: none; }
@media (max-width: 1119px) {
  .logo__full  { display: none; }
  .logo__short { display: inline; letter-spacing: .02em; }
  .logo        { font-size: 1.25rem; }
  /* Last-resort guard: if anything ever grows here again, the name truncates
     instead of shoving the hamburger off the screen. */
  .logo__name  { overflow: hidden; text-overflow: ellipsis; min-width: 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; }

/* margin-left:auto pins the actions to the right edge without depending on the
   nav taking up the slack — at mobile the nav is absolutely positioned and out
   of the flow, so there is nothing between the logo and the buttons. */
.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  /* On a dark header at .08/.18 this button was almost invisible next to a
     solid orange CTA — people could not find the navigation at all. */
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: #fff;
  flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .22); }
body.nav-open .nav-toggle {
  background: rgba(var(--primary-rgb), .90);
  border-color: rgba(var(--primary-rgb), .90);
}
.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%, 268px), 1fr));
  gap: 18px;
  margin: 0 auto 36px;
  max-width: var(--container);   /* fits 4 audience cards on one row */
  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;
}
/* 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;
}
.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); }

/* A card that is itself a link (Quick Help). Flex column so the "Read tip"
   line sits on the baseline of every card regardless of excerpt length —
   ragged bottoms are what makes a grid of cards look unfinished. */
.card--link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.card--link h3 { color: var(--ink); transition: color var(--t); }
.card--link:hover h3 { color: var(--primary-text); }
.card--link p { flex: 1; }
.card__more {
  margin-top: 14px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--primary-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card__more svg { width: 14px; height: 14px; transition: transform var(--t); }
.card--link:hover .card__more svg { transform: translateX(4px); }

/* ---------- Illustration ----------
   An illustration is not a screenshot, so it gets no browser frame and no
   border. Three things make it feel placed rather than pasted:

     1. a coloured aura behind it, tinted per section, so the artwork sits in
        a pool of its own colour instead of on flat grey
     2. a soft mask on the outer edge, so the rectangle dissolves into the page
        instead of stopping on a straight line
     3. a slow float, which gives a flat graphic a sense of depth

   --illus-glow is set per section; it defaults to the primary. */
.illus {
  --illus-glow: rgba(var(--primary-rgb), .16);
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
  isolation: isolate;
}
.illus::before {
  content: "";
  position: absolute;
  inset: 6% 2%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--illus-glow) 0%, transparent 68%);
  filter: blur(34px);
  pointer-events: none;
}
.illus img {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  /* feather only the outermost few per cent — enough to kill the hard edge,
     not enough to eat any of the artwork */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
  animation: illusFloat 9s var(--ease, ease-in-out) infinite;
}
.illus--teal { --illus-glow: rgba(45, 128, 121, .20); }
.illus--ai   { --illus-glow: rgba(var(--ai-rgb), .20); }

/* A wide, information-dense diagram cannot live in half a column — at that
   size its labels are unreadable. This variant gives it the full container. */
.illus--wide { margin-top: 52px; }
.illus--wide img { max-width: 1180px; }
@media (min-width: 1120px) {
  .illus--wide img { width: 100%; margin: 0; }
}
.illus__cap {
  margin: 14px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: .92rem;
  color: var(--muted);
}

@keyframes illusFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@media (min-width: 1120px) {
  /* let it breathe past the column on desktop, where the grid is the constraint */
  .illus img { max-width: none; width: calc(100% + 72px); margin: -24px -36px; }
}
@media (max-width: 700px) {
  .illus img { max-width: 470px; }
  .illus::before { filter: blur(24px); }
}
@media (prefers-reduced-motion: reduce) {
  .illus img { animation: none; }
}

/* ---------- Plan picker (renewal) ----------
   Radio buttons styled as cards. The native input stays in the DOM and keeps
   its focus ring — a div with a click handler would lose keyboard access and
   screen-reader semantics for no visual gain. */
.planpick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 620px;
  margin: 0 auto;
}
.planpick__opt {
  position: relative;
  display: block;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 16px;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.planpick__opt:hover { border-color: rgba(var(--primary-rgb), .45); transform: translateY(-2px); }
.planpick__opt input {
  position: absolute;
  top: 12px; left: 12px;
  accent-color: var(--primary);
}
.planpick__opt:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12);
}
.planpick__opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }
/* :has() is well supported now, but a browser without it must still show the
   choice — the server round-trip adds .is-on, which needs no :has(). */
.planpick__opt.is-on { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12); }
.planpick__body { display: block; }
.planpick__name { display: block; font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.planpick__price { display: block; margin-top: 4px; font-size: .92rem; color: var(--primary-text); font-weight: 600; }

.notice--ok {
  background: var(--accent-light);
  border-color: rgba(45, 128, 121, .28);
  color: var(--accent-text);
}

@media (max-width: 640px) {
  .planpick { grid-template-columns: 1fr; }
  .planpick__opt { text-align: left; padding-left: 44px; }
  .planpick__opt input { top: 50%; transform: translateY(-50%); left: 16px; }
}

/* ---------- Latest tips (Support) ---------- */
.latest {
  margin-top: 30px;
  padding: 22px 26px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.latest__label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.latest__list { list-style: none; margin: 0; padding: 0; }
.latest__list li + li { margin-top: 2px; border-top: 1px solid var(--border); }
.latest__list a {
  display: block;
  padding: 11px 0;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t), padding-left var(--t);
}
.latest__list a:hover { color: var(--primary-text); padding-left: 6px; }

.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); }


/* narrower text column, used for FAQ and legal copy */
.container--narrow { max-width: 820px; }

/* server-side error summary above a form */
.form-error {
  display: none;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 20px;
  border: 1px solid rgba(220, 38, 38, .3);
  border-radius: var(--r-md, 10px);
  background: rgba(220, 38, 38, .08);
  color: #B91C1C;
  font-size: .9rem;
  line-height: 1.5;
}
.form-error.is-visible { display: flex; }
.form-error svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }

/* honeypot — must be invisible to people but present for bots.
   display:none is skipped by some bots, so hide it off-canvas instead. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* helper text under a form field */
.field__hint {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--text-muted);
}


/* ==========================================================================
   LIVE ELEMENTS
   Two components that give the page a pulse. Both use REAL data: the marquee
   lists tube sites that are actually in the TSS database, and the run panel
   uses the status vocabulary the application itself prints.
   ========================================================================== */

/* ---------- platform chip groups ----------
   Platform names are set as plain text, never as logos: naming a product to
   say what yours works with is fine, borrowing its trademark is not. */
.platforms {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.pgroup {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.pgroup__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.pgroup__head svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
.pgroup__head h3 { font-size: 1rem; margin: 0; }
.pgroup__sub {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--tint);
  font-size: .82rem;
  color: var(--text);
  white-space: nowrap;
}
.chip--live { border-color: rgba(var(--accent-rgb), .28); background: var(--accent-light); color: var(--accent-text); }

.section--dark .pgroup { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); box-shadow: none; }
.section--dark .chip { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #E4E4E7; }
.section--dark .chip--live { background: rgba(var(--accent-rgb), .18); border-color: rgba(var(--accent-rgb), .34); color: #7FD4CB; }

/* ---------- marquee of supported tube sites ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 10px;
  animation: marquee-scroll 46s linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 58s; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--card);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee__item--more {
  border-color: rgba(var(--primary-rgb), .28);
  background: var(--primary-light);
  color: var(--primary-text);
  font-weight: 650;
}
.section--dark .marquee__item {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .10);
  color: #A1A1AA;
}
.section--dark .marquee__item--more {
  background: rgba(var(--primary-rgb), .18);
  border-color: rgba(var(--primary-rgb), .38);
  color: #EDB58A;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- animated distribution run ---------- */
.run {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.run__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--tint);
}
.run__file {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: .88rem;
  color: var(--text);
  min-width: 0;
}
.run__file svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
.run__count {
  margin-left: auto;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}
.run__count b { color: var(--accent-text); font-weight: 700; }

.run__list { max-height: 268px; overflow: hidden; }
.run__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.run__row:last-child { border-bottom: none; }
.run__site {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run__state {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: .72rem;
  font-weight: 650;
  white-space: nowrap;
  background: #F4F4F5;
  color: #71717A;
  transition: background .3s ease, color .3s ease;
}
.run__state::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.run__row.is-running .run__state { background: rgba(var(--primary-rgb), .12); color: var(--primary-text); }
.run__row.is-running .run__state::before { animation: run-pulse 1s ease-in-out infinite; }
.run__row.is-done    .run__state { background: rgba(var(--accent-rgb), .14); color: var(--accent-text); }

.run__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  background: var(--tint);
  font-size: .76rem;
  color: var(--text-muted);
}
.run__bar {
  flex: 1;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--border);
  overflow: hidden;
}
.run__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  background: var(--accent);
  transition: width .45s ease;
}

@keyframes run-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .run__row.is-running .run__state::before { animation: none; }
  .run__bar i { transition: none; }
}


/* ==========================================================================
   REAL APP SCREENSHOTS
   Official Tube Sites Submitter screenshots, framed to sit next to the
   hand-built .appwin mockups without a visual seam.
   ========================================================================== */
.shot { display: block; margin: 0; }

.shot__frame {
  position: relative;
  border: 1px solid #B4B4B4;
  border-radius: 7px;          /* matches the Windows 11 window corner of the app itself */
  overflow: hidden;
  background: #F0F0F0;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
  transition: transform .35s ease, box-shadow .35s ease;
}
.shot__frame img {
  display: block;
  width: 100%;
  height: auto;
}
.shot__frame:hover { transform: translateY(-3px); box-shadow: 0 26px 56px rgba(15, 23, 42, .24); }

/* small orange label pinned to the top-right of the frame */
.shot__tag {
  position: absolute;
  top: 10px; right: 10px;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), .35);
  pointer-events: none;
}

/* violet tag — used when the screenshot shows an AI feature */
.shot__tag--ai {
  background: var(--ai);
  box-shadow: 0 4px 12px rgba(var(--ai-rgb), .35);
}

.shot__cap {
  margin-top: 12px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}
.shot__cap strong { color: var(--text); font-weight: 600; }

/* on dark sections the light screenshot needs a lighter edge and a soft halo */
.section--dark .shot__frame,
.hero--dark .shot__frame {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
.section--dark .shot__cap,
.hero--dark .shot__cap { color: rgba(255, 255, 255, .62); }
.section--dark .shot__cap strong,
.hero--dark .shot__cap strong { color: #fff; }

/* screenshots are wide; keep them readable when they stack on small screens */
@media (max-width: 900px) {
  .shot__frame { border-radius: 8px; }
  .shot__frame:hover { transform: none; }
  .shot__tag { top: 7px; right: 7px; padding: 3px 8px; font-size: .66rem; }
  .shot__cap { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .shot__frame { transition: none; }
  .shot__frame:hover { transform: none; }
}

/* ---------- 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__thumb--img { padding: 0; }
.post__thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.post__thumb--img::after { display: none; }
.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 ---------- */
.hidden { display: none !important; }
.checkout-card { max-width: 560px; margin: 0 auto; }
.checkout-card--wide { max-width: 720px; }
.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; }
.field--radios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.field--radios__title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
}
.field--radios label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  margin: 0;
}
.field--radios input[type="radio"] {
  width: auto;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
.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.7fr repeat(5, minmax(0, 1fr));
  gap: 24px 28px;
  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__bottom-links a {
  color: #A1A1AA;
  text-decoration: none;
  transition: color var(--t);
}
.footer__bottom-links a:hover { color: var(--accent-2); }

/* ---------- Discord community band ----------
   Discord blurple is used only for the mark and the glow. The button stays in
   our own primary, so the band still reads as our page rather than as an ad
   for someone else's product. */
.discord {
  --discord: #5865F2;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 38px 42px;
  border-radius: var(--r-xl, 22px);
  background: linear-gradient(135deg, #1E1F26 0%, #24243040 60%, #1E1F26 100%), var(--ink);
  border: 1px solid rgba(88, 101, 242, .30);
  color: #fff;
}
.discord::before {
  content: "";
  position: absolute;
  top: -70%;
  right: -8%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(88, 101, 242, .34) 0%, transparent 68%);
  pointer-events: none;
}
.discord__mark {
  position: relative;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--discord);
  box-shadow: 0 12px 30px rgba(88, 101, 242, .38);
}
.discord__mark svg { width: 44px; height: 44px; fill: #fff; }
.discord__body { position: relative; flex: 1; min-width: 0; }
.discord__body h2 { color: #fff; font-size: 1.5rem; margin: 0 0 8px; }
.discord__body p { color: #C7C7CE; margin: 0; font-size: .98rem; max-width: 56ch; }
.discord__cta { position: relative; flex-shrink: 0; }

@media (max-width: 800px) {
  .discord { flex-direction: column; align-items: flex-start; gap: 22px; padding: 30px 26px; }
  .discord__body p { max-width: none; }
  .discord__cta .btn { width: 100%; justify-content: center; }
}
.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(234, 88, 12, .30), transparent 62%),
    radial-gradient(ellipse 55% 55% at 88% 8%,   rgba(13, 148, 136, .20), transparent 62%),
    radial-gradient(ellipse 90% 50% at 55% 108%, rgba(251, 146, 60, .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(251, 146, 60, .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(234, 88, 12, .20), transparent 62%),
    radial-gradient(ellipse 50% 70% at 92% 100%, rgba(13, 148, 136, .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 .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);
}

.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(234, 88, 12, .16), transparent 62%),
    radial-gradient(ellipse 45% 80% at 90% 30%, rgba(13, 148, 136, .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(234, 88, 12, .22), transparent 62%),
    radial-gradient(ellipse 50% 80% at 85% 0%,   rgba(13, 148, 136, .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; }

  /* ABSOLUTE, not fixed — and this is not a style choice.
     .header carries backdrop-filter, and per spec a non-none backdrop-filter
     establishes a containing block for fixed AND absolutely positioned
     descendants. A `position: fixed` menu inside it therefore resolves its
     offsets against the 66px-tall header box instead of the viewport, and on
     several mobile browsers ends up clipped to that strip — invisible.
     Anchoring to the header on purpose with top:100% avoids the trap entirely
     and gives the same result on every engine. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 101;                 /* above the backdrop below (99) */
    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); }

/* ---------- 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: var(--accent-text); }
.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; }

/* ---------- renewal strip (pricing page) ---------- */
.renewbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  max-width: 720px;
  margin: 34px auto 0;
  padding: 16px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.renewbar__ico {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  background: var(--primary-light);
  color: var(--primary-text);
  border: 1px solid rgba(var(--primary-rgb), .16);
}
.renewbar__ico svg { width: 18px; height: 18px; }
.renewbar__txt { flex: 1; min-width: 200px; font-size: .9rem; color: var(--text-muted); }
.renewbar__txt b { display: block; color: var(--text); font-weight: 600; font-size: .95rem; margin-bottom: 2px; }
@media (max-width: 640px) { .renewbar { flex-direction: column; align-items: flex-start; text-align: left; } .renewbar .btn { width: 100%; } }

/* ==========================================================================
   TUBE SITE SIDE
   Generic illustrations of what TSS fills in on the other end: an upload form
   and a creator profile. Deliberately unbranded and content-free — no real
   site's UI, no logos, no imagery.
   ========================================================================== */

/* ---------- browser chrome ---------- */
.browser {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-md);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--tint);
  border-bottom: 1px solid var(--border);
}
.browser__dots { display: flex; gap: 5px; flex-shrink: 0; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); display: block; }
.browser__url {
  flex: 1;
  min-width: 0;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--card);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser__body { padding: 20px; }

/* ---------- generic upload form ---------- */
.uform { display: grid; gap: 13px; }
.uform__title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  margin-bottom: 2px;
}
.uform__row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; }
.uform__label { font-size: .78rem; color: var(--text-muted); text-align: right; }
.uform__field {
  position: relative;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--tint);
  font-size: .8rem;
  color: var(--text);
  overflow: hidden;
}
.uform__field--tall { min-height: 58px; }

/* the value is revealed left-to-right, as if it were being typed in */
.uform__val {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width .55s ease, opacity .2s ease;
}
.uform__field.is-filled { border-color: rgba(var(--accent-rgb), .45); background: var(--accent-light); }
.uform__field.is-filled .uform__val { max-width: 100%; opacity: 1; }
.uform__field--tall .uform__val { white-space: normal; }

.uform__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.utag {
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent-text);
  font-size: .72rem;
  font-weight: 600;
}
.uform__btn {
  justify-self: start;
  margin-left: 104px;
  padding: 8px 18px;
  border-radius: var(--r-sm);
  background: var(--border-strong);
  color: var(--card);
  font-size: .8rem;
  font-weight: 650;
  transition: background .3s ease;
}
.uform.is-done .uform__btn { background: var(--accent); color: #fff; }

.uform__by {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  margin-left: 104px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--primary-text);
}
.uform__by svg { width: 13px; height: 13px; }

/* ---------- generic creator profile on a tube site ---------- */
.tprofile { display: block; }
.tprofile__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tprofile__avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--gradient-diag);
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.tprofile__avatar svg { width: 24px; height: 24px; }
.tprofile__name { font-weight: 700; font-size: .98rem; color: var(--text); }
.tprofile__bio { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.tprofile__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  background: var(--primary-light);
  border: 1px solid rgba(var(--primary-rgb), .3);
  color: var(--primary-text);
  font-size: .76rem;
  font-weight: 650;
}
.tprofile__link svg { width: 12px; height: 12px; }

.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vthumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(var(--ink-rgb), .10), rgba(var(--ink-rgb), .04));
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  position: relative;
}
.vthumb svg { width: 20px; height: 20px; opacity: .5; }
.vthumb--new { border-color: rgba(var(--accent-rgb), .45); background: var(--accent-light); color: var(--accent-text); }
.vthumb__badge {
  position: absolute;
  top: 5px; left: 5px;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
}

@media (max-width: 560px) {
  .uform__row { grid-template-columns: 1fr; gap: 5px; }
  .uform__label { text-align: left; }
  .uform__btn, .uform__by { margin-left: 0; }
}

/* ---------- optional add-on band (VPS) ---------- */
.addon {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 26px 30px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.addon__tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--primary-light);
  border: 1px solid rgba(var(--primary-rgb), .24);
  color: var(--primary-text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.addon h3 { font-size: 1.15rem; margin: 0 0 8px; }
.addon p { margin: 0; font-size: .93rem; color: var(--text-muted); max-width: 60ch; }
.addon__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.addon__list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .86rem;
  color: var(--text);
}
.addon__list li::before {
  content: '';
  width: 15px; height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .16);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(#000, #000);
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.addon__list li::before { background: var(--accent); }
.addon__cta { display: grid; gap: 8px; justify-items: stretch; text-align: center; }
.addon__note { font-size: .74rem; color: var(--text-muted); }

@media (max-width: 820px) {
  .addon { grid-template-columns: 1fr; padding: 22px; }
  .addon__cta { justify-items: start; text-align: left; }
}

/* ==========================================================================
   RHYTHM BREAKERS
   Every page was hero -> card grid -> card grid -> CTA. These four components
   exist to interrupt that: a dark hero, a big-number band, a vertical timeline
   and a single-sentence statement.
   ========================================================================== */

/* ---------- dark page hero, for pages that should feel different ---------- */
.page-head--dark {
  position: relative;
  overflow: hidden;
  background: var(--gradient-diag);
  color: #fff;
  border-bottom: none;
}
.page-head--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(var(--primary-rgb), .30), transparent 60%),
    radial-gradient(760px 380px at 90% 110%, rgba(var(--accent-rgb), .22), transparent 62%);
  pointer-events: none;
}
.page-head--dark::after {
  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: 46px 46px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 40%, #000, transparent);
          mask-image: radial-gradient(closest-side at 50% 40%, #000, transparent);
  pointer-events: none;
}
.page-head--dark > .container { position: relative; z-index: 1; }
.page-head--dark h1 { color: #fff; }
.page-head--dark p { color: rgba(255, 255, 255, .78); }
.page-head--dark .eyebrow--accent {
  background: rgba(var(--primary-rgb), .18);
  color: #EDB58A;
  border-color: rgba(var(--primary-rgb), .38);
}
.page-head--dark .keypoint {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: #E4E4E7;
}
.page-head--dark .btn--outline { border-color: rgba(255,255,255,.28); color: #fff; }
.page-head--dark .btn--outline:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.45); }

/* ---------- big-number band ---------- */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--border);
  box-shadow: var(--shadow-sm);
}
.figure {
  padding: 30px 24px;
  background: var(--card);
  text-align: center;
}
.figure__n {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.figure__l {
  display: block;
  margin-top: 9px;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.section--dark .figures { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.10); box-shadow: none; }
.section--dark .figure { background: #141416; }
.section--dark .figure__l { color: #A1A1AA; }

/* ---------- vertical timeline ---------- */
.timeline { display: grid; gap: 0; max-width: 760px; margin: 0 auto; }
.tl {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
  padding-bottom: 30px;
}
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 46px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--border-strong), var(--border));
}
.tl:last-child::before { display: none; }
.tl__n {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gradient);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), .28);
  position: relative;
  z-index: 1;
}
.tl__body { padding-top: 5px; }
.tl__body h3 { font-size: 1.06rem; margin: 0 0 6px; }
.tl__body p { margin: 0; color: var(--text-muted); font-size: .94rem; }
.tl__meta {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb), .22);
  color: var(--accent-text);
  font-size: .76rem;
  font-weight: 650;
}
.section--dark .tl::before { background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.06)); }
.section--dark .tl__body p { color: #A1A1AA; }
.section--dark .tl__meta { background: rgba(var(--accent-rgb), .18); border-color: rgba(var(--accent-rgb), .34); color: #7FD4CB; }

/* ---------- single-sentence statement ---------- */
.statement {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 6px 0 6px 30px;
  border-left: 4px solid var(--primary);
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--text);
}
.statement em { font-style: normal; color: var(--primary-text); }
.statement__by {
  display: block;
  margin-top: 16px;
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}
.section--dark .statement { color: #fff; border-left-color: var(--primary); }
.section--dark .statement em { color: #EDB58A; }
.section--dark .statement__by { color: #A1A1AA; }

@media (max-width: 640px) {
  .statement { padding-left: 20px; }
  .tl { grid-template-columns: 38px 1fr; gap: 15px; }
  .tl__n { width: 38px; height: 38px; font-size: .95rem; }
  .tl::before { left: 18px; top: 40px; }
}

/* ==========================================================================
   LEGAL DOCUMENT
   Long-form contract text. Optimised for finding a clause, not for reading
   end to end: numbered headings, a contents list and generous line height.
   ========================================================================== */
.legal { font-size: .96rem; line-height: 1.75; color: var(--text); }
.legal__intro { color: var(--text-muted); }
.legal h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.18rem;
  margin: 40px 0 14px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal h2:first-of-type { margin-top: 34px; }
.legal__n {
  flex-shrink: 0;
  min-width: 34px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.18rem;          /* same size as the heading it belongs to */
  font-weight: 700;
  color: var(--text);          /* part of the heading, not an accent */
  padding-top: 0;
}
.legal__n::after { content: '.'; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.legal ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  color: var(--text-muted);
}
.legal ul li::before {
  content: '';
  position: absolute;
  left: 8px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
.legal a { color: var(--primary-text); }

@media (max-width: 700px) {
  .toc__list { columns: 1; }
  .legal h2 { font-size: 1.08rem; }
  .legal__n { font-size: 1.08rem; min-width: 28px; }
}

/* ---------- terms acceptance on the pricing page ---------- */
.accept {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.accept:hover { border-color: var(--border-strong); }
.accept.is-ok { border-color: rgba(var(--accent-rgb), .5); background: var(--accent-light); }

/* Not accepted, and they tried to buy. Deliberately restrained: the border and
   the checkbox carry the signal, the text stays readable and black. */
.accept.is-error {
  border-color: #DC2626;
  animation: accept-shake .4s ease;
}
.accept.is-error input { outline: 2px solid #DC2626; outline-offset: 3px; }

@keyframes accept-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  45%      { transform: translateX(6px); }
  70%      { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .accept.is-error { animation: none; }
}
.accept input {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  accent-color: var(--primary);
  cursor: pointer;
}
.accept__txt { font-size: .92rem; line-height: 1.6; color: var(--text); }
.accept__txt a { color: var(--primary-text); font-weight: 600; }
.accept__note { display: block; margin-top: 5px; font-size: .8rem; color: var(--text-muted); }

/* buttons stay inert until the box is ticked */
/* Buy buttons always look active. If the Terms are not accepted the click
   scrolls to the checkbox and turns it red instead of doing nothing. */
.accept-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
  max-width: 720px;
  padding: 0;
  font-size: .88rem;
  font-weight: 600;
  color: #B91C1C;
  text-align: center;
}
.accept-hint.is-on { display: flex; }
.accept-hint svg { width: 16px; height: 16px; flex-shrink: 0; }

/* If JavaScript never runs, .reveal must not hide content. The class is added
   by main.js on <html>; without JS it is absent and everything shows. */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }