/* ============================================================================
   ADVERTISERS PAGE — additions for the redesign (advertisers.php)
   ============================================================================

   Loads AFTER assets/css/style.css. Additions only: everything is scoped
   under body.adv-page and uses adv- classes, so nothing here can leak into
   other classic pages. Sections that reuse the live page's markup (flip
   cards, .box, ad-format tabs, accordion, blog cards) get at most a nudge.

   BLUE AND WHITE (review, Nov 2026: "only blue and white theme all over
   the page"), with two exceptions the next review asked for: the hero
   (S1) and the ad formats (S5) keep their original colours (green ticks
   and health icon, the purple glow, the theme's grey/blue tab icons and
   the yellow tutorial illustration). Sections 2 and 3 use the flat theme
   blue (--theme-color) for the icon tiles, not the deep/navy shades,
   which read as a different palette from the rest of the theme (the
   Campaign Health Score card stays navy on purpose). Section 11 repaints the
   other sitewide theme pieces this page uses (step icons, blog links,
   login/register modals). Header, footer and seasonal strip: sitewide,
   left alone.

   1. Tokens           5. Why-choose tweaks   9. Final CTA band
   2. Shared bits      6. Niche marquee       10. Reveal + reduced motion
   3. Hero + cards     7. Steps / buttons
   4. Features 3x3     8. (removed)           11. Theme repaint
   ============================================================================ */

/* 1. Tokens ---------------------------------------------------------------- */
.adv-page {
  --adv-blue: var(--theme-color, #3B82F6);
  --adv-deep: #1E40AF;
  --adv-ink: var(--title-color, #141D38);
  --adv-navy: #172554;
  --adv-sky: #93C5FD;
  --adv-muted: #475A86;
  --adv-green: #16a34a;   /* S1 hero only (rolled back, see header) */
  --adv-line: #dbe5fb;
  --adv-soft: #F4F9FF;
  --adv-r: 20px;
  --adv-shadow: 0 18px 44px rgba(59, 130, 246, .16);
}

/* 2. Shared bits ----------------------------------------------------------- */
.adv-page .adv-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
  color: var(--adv-blue); background: rgba(59, 130, 246, .1);
  padding: 7px 14px; border-radius: 99px; margin-bottom: 18px;
}
.adv-page .adv-badge {
  display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; background: #fff; color: var(--adv-deep);
  padding: 3px 10px; border-radius: 99px;
}
.adv-page .adv-link { font-weight: 700; color: var(--adv-blue); text-decoration: none; }
.adv-page .adv-link i { transition: transform .25s; margin-left: 4px; }
.adv-page .adv-link:hover i { transform: translateX(4px); }
.adv-page .adv-sample { display: block; font-size: 11px; opacity: .75; margin-top: 10px; }

/* Icon tile: a Font Awesome icon on a flat theme-blue square. Stands in
   for the theme's multicolour 3D illustrations in sections 2 and 3. Flat
   --theme-color, not a blue-to-navy gradient: the dark end looked off-theme. */
.adv-page .adv-icon {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
  background: var(--adv-blue); color: #fff; font-size: 24px;
  box-shadow: 0 10px 22px -8px rgba(59, 130, 246, .55);
}

/* Buttons show the copy's own casing ("Create a Free Advertiser Account",
   lowercase "a"; change list, 6 Nov 2026): the theme uppercases .th-btn
   and some wrappers capitalise every word. Sections only: the sitewide
   header's LOGIN / REGISTER buttons keep the theme's casing. */
.adv-page section .th-btn { text-transform: none; }

/* Outline + white variants of the theme's .th-btn. */
.adv-page .th-btn.adv-btn-outline {
  background: transparent; color: var(--adv-blue); box-shadow: inset 0 0 0 2px var(--adv-blue);
}
.adv-page .th-btn.adv-btn-outline:hover { background: var(--adv-blue); color: #fff; }
.adv-page .th-btn.adv-btn-white { background: #fff; color: var(--adv-deep); }
.adv-page .th-btn.adv-btn-white:hover { background: var(--adv-ink); color: #fff; }

/* 3. Hero + cards ---------------------------------------------------------- */
.adv-page .adv-hero {
  padding: 70px 0 60px; overflow: hidden;
  background:
    radial-gradient(600px 320px at 85% 20%, rgba(59, 130, 246, .12), transparent 70%),
    radial-gradient(500px 260px at 0% 100%, rgba(98, 80, 201, .08), transparent 70%);
}
.adv-page .adv-hero__title { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.12; margin-bottom: 20px; }
.adv-page .adv-hero__lead { font-size: 18px; max-width: 540px; margin-bottom: 30px; }
.adv-page .adv-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.adv-page .adv-ticks {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 600; color: var(--adv-ink);
}
.adv-page .adv-ticks i { color: var(--adv-green); margin-right: 4px; }

/* Floating cards (from the marketing team's second mock): a two-column
   grid, the right column dropped 34px so the pairs stagger, every card
   bobbing on its own phase (negative delays). The fifth spans both
   columns. Transform-only animation, so nothing reflows. */
.adv-page .adv-float {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start;
  max-width: 520px; margin: 0 auto; padding-bottom: 14px;
}
.adv-page .adv-float__card {
  background: #fff; border: 1px solid var(--adv-line); border-radius: 16px; padding: 16px 20px;
  box-shadow: 0 14px 40px rgba(60, 40, 140, .14); font-weight: 700; color: var(--adv-ink);
  animation: advBob 5s ease-in-out infinite;
}
.adv-page .adv-float__card small { display: block; color: var(--adv-muted); font-weight: 600; font-size: 13px; margin-top: 2px; }
.adv-page .adv-float__card em {
  font-style: normal; font-family: "Righteous", sans-serif; font-weight: 400; font-size: 26px;
  font-variant-numeric: tabular-nums;
}
.adv-page .adv-float__card > i { color: var(--adv-blue); }
.adv-page .adv-float__card--4 > i { color: var(--adv-green); }
.adv-page .adv-float__card--2 { margin-top: 34px; animation-delay: -1s; }
.adv-page .adv-float__card--3 { animation-delay: -2s; }
.adv-page .adv-float__card--5 { margin-top: 34px; animation-delay: -1.5s; }
.adv-page .adv-float__card--4 { grid-column: 1 / -1; animation-delay: -3s; }
@media (max-width: 575px) {
  .adv-page .adv-float { gap: 12px; }
  .adv-page .adv-float__card { padding: 12px 14px; }
  .adv-page .adv-float__card em { font-size: 22px; }
}

/* 4. Features: 3x3 grid ---------------------------------------------------- */
/* Nine equal cells (change list, 6 Nov 2026), 2 per row on tablets, 1 on
   phones. Campaign Health Score is card one, the same as the rest apart
   from its "New" badge (review, 6 Nov 2026; before: a navy 2x2 hero tile
   with a sample widget, then a navy cell with a gauge). */
.adv-page .adv-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.adv-page .adv-bento__item {
  background: #fff; border: 1px solid var(--adv-line); border-radius: var(--adv-r); padding: 22px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.adv-page .adv-bento__item:hover { transform: translateY(-6px); border-color: var(--adv-blue); box-shadow: var(--adv-shadow); }
.adv-page .adv-bento__item .adv-icon { margin-bottom: 14px; transition: transform .3s; }
.adv-page .adv-bento__item:hover .adv-icon { transform: scale(1.08) rotate(-3deg); }
.adv-page .adv-bento__item h3 { font-size: 19px; margin: 0 0 6px; }
.adv-page .adv-bento__item p { font-size: 15px; margin: 0; line-height: 1.5; }
@media (max-width: 991px) { .adv-page .adv-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .adv-page .adv-bento { grid-template-columns: 1fr; } }

/* "New" badge on the Campaign Health Score card: the only thing setting it
   apart from the other eight (review, 6 Nov 2026). A theme-blue pill with
   a slow light sweep, plus a soft blue ring on the card. */
.adv-page .adv-bento__item--new { position: relative; border-color: rgba(59, 130, 246, .45); box-shadow: 0 0 0 4px rgba(59, 130, 246, .08); }
.adv-page .adv-new {
  position: absolute; top: 18px; right: 18px; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 99px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: linear-gradient(120deg, var(--adv-blue), #60A5FA);
  box-shadow: 0 8px 18px -6px rgba(59, 130, 246, .7);
}
.adv-page .adv-new::after {   /* light sweep */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: skewX(-20deg); animation: advSweep 3.2s ease-in-out infinite;
}
.adv-page .adv-new i { animation: advTwinkle 1.6s ease-in-out infinite; }
@keyframes advSweep   { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes advTwinkle { 50% { transform: scale(1.25) rotate(15deg); } }

/* 4b. "Built for every kind of advertiser": five static cards ----------
   Everything visible, nothing animated (review, Nov 2026). One row of five
   on wide screens; below that the cards wrap and centre (3 + 2, 2 + 2 + 1),
   one per row on phones. */
.adv-page .adv-aud__grid {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
}
.adv-page .adv-aud__card {
  flex: 0 1 calc((100% - 80px) / 5); min-width: 0;
  background: #fff; border: 1px solid var(--adv-line); border-top: 4px solid var(--adv-blue);
  border-radius: var(--adv-r); padding: 26px 22px; text-align: center;
  box-shadow: 0 12px 30px rgba(30, 64, 175, .08);
}
.adv-page .adv-aud__card .adv-icon { margin: 0 auto 16px; }
.adv-page .adv-aud__card h3 { font-size: 20px; margin: 0 0 8px; }
.adv-page .adv-aud__card p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--adv-muted); }
@media (max-width: 1199px) { .adv-page .adv-aud__card { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 767px)  { .adv-page .adv-aud__card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 575px)  { .adv-page .adv-aud__card { flex-basis: 100%; } }

/* 5. Why choose: compact tiles ---------------------------------------------- */
/* Replaces the live page's 280px hover cards. Two blues, alternating, so
   the 3x3 grid reads as a checkerboard rather than one flat block. */
.adv-page .adv-why { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.adv-page .adv-why__tile {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px;
  border-radius: 20px; padding: 20px 22px; color: #fff;
  box-shadow: 0 12px 28px rgba(30, 64, 175, .18);
  transition: transform .3s, box-shadow .3s;
}
.adv-page .adv-why__tile { background: linear-gradient(150deg, var(--adv-blue), var(--adv-deep)); }
.adv-page .adv-why__tile:nth-child(even) { background: linear-gradient(150deg, var(--adv-deep), var(--adv-navy)); }
.adv-page .adv-why__tile::after {
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); transition: transform .4s;
}
.adv-page .adv-why__tile:hover { transform: translateY(-4px); box-shadow: 0 20px 38px rgba(20, 29, 56, .2); }
.adv-page .adv-why__tile:hover::after { transform: scale(1.3); }
.adv-page .adv-why__ic {
  position: relative; z-index: 1; flex: none; width: 76px; height: 76px; border-radius: 20px;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; font-size: 28px;
  transition: transform .35s;
}
.adv-page .adv-why__tile:hover .adv-why__ic { transform: scale(1.06) rotate(-4deg); }
.adv-page .adv-why__tile > div { position: relative; z-index: 1; }
.adv-page .adv-why__tile h3 { color: #fff; font-size: 19px; margin: 0 0 4px; }
.adv-page .adv-why__tile p { color: rgba(255, 255, 255, .9); font-size: 14px; line-height: 1.5; margin: 0; }
@media (max-width: 1199px) { .adv-page .adv-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .adv-page .adv-why { grid-template-columns: 1fr; gap: 12px; } .adv-page .adv-why__tile { padding: 16px; } .adv-page .adv-why__ic { width: 60px; height: 60px; font-size: 24px; } }

/* 6. Niches: chip marquee --------------------------------------------------- */
/* Right after S2 (review, 6 Nov 2026), as a slow scrolling strip. Two
   copies of the list in one track; sliding the track by -50% moves it
   exactly one copy, so the loop is seamless. Transform-only; edges fade
   out; hover/focus pauses it. Earlier it was a static wrapping chip cloud
   after the blog (half the theme's section padding, kept short). */
.adv-page .adv-niches { padding: calc(var(--section-space) / 2) 0; overflow: hidden; }
.adv-page .adv-niches .title-area { margin-bottom: 26px; }
.adv-page .adv-niches__more { margin: 22px 0 0; }
.adv-page .adv-marq {
  padding: 8px 0 14px;   /* room for the chips' hover lift and shadow */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.adv-page .adv-marq__track { display: flex; width: max-content; animation: advMarquee 45s linear infinite; }
.adv-page .adv-marq:hover .adv-marq__track, .adv-page .adv-marq:focus-within .adv-marq__track { animation-play-state: paused; }
.adv-page .adv-chips { list-style: none; margin: 0; padding: 0 7px; display: flex; gap: 14px; }
.adv-page .adv-chips a {
  display: flex; align-items: center; gap: 10px; padding: 7px 20px 7px 7px; border-radius: 99px; white-space: nowrap;
  background: #fff; border: 1px solid var(--adv-line); color: var(--adv-ink); font-weight: 700; font-size: 16px;
  text-decoration: none; transition: transform .25s, background .25s, color .25s, box-shadow .25s;
}
.adv-page .adv-chips__ic {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(59, 130, 246, .1); color: var(--adv-blue); font-size: 14px; font-weight: 800;
  transition: background .25s, color .25s;
}
.adv-page .adv-chips a:hover, .adv-page .adv-chips a:focus-visible {
  background: var(--adv-blue); color: #fff; transform: translateY(-4px); box-shadow: var(--adv-shadow);
}
.adv-page .adv-chips a:hover .adv-chips__ic, .adv-page .adv-chips a:focus-visible .adv-chips__ic { background: #fff; color: var(--adv-blue); }
@keyframes advMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .adv-page .adv-marq { -webkit-mask-image: none; mask-image: none; }
  .adv-page .adv-marq__track { width: auto; justify-content: center; }
  .adv-page .adv-chips { flex-wrap: wrap; justify-content: center; max-width: 1100px; }
  .adv-page .adv-chips[aria-hidden] { display: none; }
}
@media (max-width: 575px) { .adv-page .adv-chips { gap: 10px; } .adv-page .adv-chips a { font-size: 14px; padding-right: 14px; } }

/* 7. Steps / buttons ------------------------------------------------------- */
.adv-page .adv-steps li span b { display: block; font-size: 13px; color: var(--adv-blue); text-transform: uppercase; letter-spacing: .05em; }
.adv-page .adv-note { font-size: 14px; color: var(--adv-muted); font-style: italic; margin: 6px 0 0 50px; }
.adv-page .adv-btnrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* 8. Requirements popup: removed (7 Nov 2026, the page has no form). The
   number is kept so the section numbers below still match the TOC. */

/* 9. Final CTA band -------------------------------------------------------- */
/* Two columns on the deep-blue gradient: copy + actions + facts, and a
   "campaign one click from launch" card whose cursor clicks Launch and
   pops the "submitted" toast on a loop. The loop is one 6s keyframe set
   shared by cursor, button and toast so the three stay in step. */
.adv-page .adv-final { padding: 80px 0 100px; }
.adv-page .adv-final__band {
  position: relative; overflow: hidden; border-radius: 32px; padding: 60px 56px; color: #fff;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(255, 255, 255, .16), transparent 70%),
    radial-gradient(420px 300px at 0% 100%, rgba(23, 37, 84, .55), transparent 70%),
    linear-gradient(120deg, #1E40AF, #3B82F6 60%, #60A5FA);
  box-shadow: 0 30px 70px rgba(30, 64, 175, .35);
}
.adv-page .adv-final__band::before {   /* faint dotted texture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.adv-page .adv-final__band > * { position: relative; }
.adv-page .adv-final__copy h2 { color: #fff; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.12; margin: 0 0 12px; }
.adv-page .adv-final__copy p { color: rgba(255, 255, 255, .9); font-size: 19px; margin: 0 0 28px; }
.adv-page .adv-final__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.adv-page .adv-final__go { position: relative; font-size: 17px; padding-left: 34px; padding-right: 34px; }
.adv-page .adv-final__go i { margin-left: 8px; transition: transform .25s; }
.adv-page .adv-final__go:hover i { transform: translateX(4px); }
/* Attention ring, pulsing outward. On a wrapper, not on the button: .th-btn
   uses its own ::before/::after for the hover fill and clips them with
   overflow:hidden, so a ring there was both hidden and tinted the button. */
.adv-page .adv-final__ring { position: relative; display: inline-flex; border-radius: 99px; }
.adv-page .adv-final__ring::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  border: 2px solid rgba(255, 255, 255, .7); animation: advRing 2.4s ease-out infinite; pointer-events: none;
}
/* The theme's hover fill is blue (::before/::after); on this white button
   the hover should go dark, so hide the fill and colour the button itself. */
.adv-page .adv-final__go::before, .adv-page .adv-final__go::after { display: none; }
.adv-page .adv-final__go { background: #fff; color: var(--adv-deep); border-color: #fff; }
.adv-page .btn-wrap2 .adv-final__go:hover { background: var(--adv-ink); color: #fff; border-color: var(--adv-ink); }

.adv-page .adv-final__visual { position: relative; padding: 10px 0 70px; }
.adv-page .adv-launch {
  background: #fff; color: var(--adv-ink); border-radius: 22px; padding: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 51, .35); max-width: 420px; margin-left: auto; transform: rotate(-1.5deg);
}
.adv-page .adv-launch__head { display: flex; align-items: center; font-weight: 800; padding-bottom: 14px; border-bottom: 1px solid var(--adv-line); }
.adv-page .adv-launch__head i { color: var(--adv-blue); margin-right: 6px; }
.adv-page .adv-launch__head em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--adv-muted); }
.adv-page .adv-launch__steps { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.adv-page .adv-launch__steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--adv-muted); }
.adv-page .adv-launch__steps i {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px;
  background: var(--adv-soft); color: var(--adv-muted);
}
.adv-page .adv-launch__steps .is-done { color: var(--adv-ink); }
.adv-page .adv-launch__steps .is-done i { background: var(--adv-blue); color: #fff; }
.adv-page .adv-launch__steps .is-now { color: var(--adv-blue); }
.adv-page .adv-launch__steps .is-now i { background: var(--adv-blue); color: #fff; box-shadow: 0 0 0 5px rgba(59, 130, 246, .18); }
.adv-page .adv-launch__formats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.adv-page .adv-launch__formats span {
  font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 8px;
  background: var(--adv-soft); color: var(--adv-muted); border: 1px solid var(--adv-line);
}
.adv-page .adv-launch__formats .is-on { background: rgba(59, 130, 246, .1); color: var(--adv-blue); border-color: var(--adv-blue); }
.adv-page .adv-launch__btn {
  position: relative; text-align: center; font-weight: 800; color: #fff; padding: 13px; border-radius: 12px;
  background: linear-gradient(90deg, var(--adv-blue), var(--adv-deep));
  animation: advPress 6s ease-in-out infinite;
}
.adv-page .adv-launch__btn > i:first-of-type { margin-left: 6px; }
.adv-page .adv-launch__cursor {
  position: absolute; right: 22%; bottom: -34px; font-size: 26px; color: var(--adv-ink);
  filter: drop-shadow(0 2px 3px rgba(23, 37, 84, .35));
  -webkit-text-stroke: 1.5px #fff;
  animation: advCursor 6s ease-in-out infinite;
}
.adv-page .adv-launch__toast {
  position: absolute; left: -10px; bottom: 0; display: flex; align-items: center; gap: 12px;
  background: #fff; color: var(--adv-ink); border-radius: 16px; padding: 12px 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 51, .3);
  animation: advToast 6s ease-in-out infinite;
}
.adv-page .adv-launch__toast span {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--adv-blue); color: #fff;
}
.adv-page .adv-launch__toast b { display: block; font-size: 14px; }
.adv-page .adv-launch__toast small { font-size: 12px; color: var(--adv-muted); }

@keyframes advRing   { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.18, 1.4); } }
/* 0–35% cursor travels in, 40% clicks (button dips), 45–85% toast shows, then resets. */
@keyframes advCursor { 0% { transform: translate(60px, 50px); opacity: 0; } 15% { opacity: 1; } 35% { transform: translate(0, 0); } 40% { transform: translate(0, 0) scale(.85); } 45%, 85% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(60px, 50px); opacity: 0; } }
@keyframes advPress  { 0%, 37%, 45%, 100% { transform: scale(1); } 40% { transform: scale(.96); } }
@keyframes advToast  { 0%, 42% { opacity: 0; transform: translateY(14px) scale(.96); } 48%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(14px) scale(.96); } }

@media (max-width: 991px) {
  .adv-page .adv-final__band { grid-template-columns: 1fr; padding: 44px 32px; gap: 30px; }
  .adv-page .adv-launch { margin: 0 auto; }
  .adv-page .adv-final__visual { max-width: 460px; margin: 0 auto; width: 100%; }
}
@media (max-width: 575px) {
  .adv-page .adv-final { padding: 56px 0 70px; }
  .adv-page .adv-final__band { padding: 34px 20px; border-radius: 24px; }
  .adv-page .adv-final__visual { display: none; }
  .adv-page .adv-final__ctas > *, .adv-page .adv-final__go { width: 100%; justify-content: center; text-align: center; }
}

/* 10. Reveal + reduced motion ---------------------------------------------- */
/* Only hidden once JS has marked the page (html.adv-js), so without JS — or
   if main.js fails — everything is simply visible. */
.adv-js .adv-page .adv-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; transition-delay: var(--d, 0s); }
.adv-js .adv-page .adv-reveal.is-in { opacity: 1; transform: none; }

@keyframes advFloat { 50% { transform: translateY(-12px); } }
@keyframes advBob   { 50% { transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  .adv-page *, .adv-page *::before, .adv-page *::after { animation: none !important; transition: none !important; }
  .adv-js .adv-page .adv-reveal { opacity: 1; transform: none; }
  .adv-page .adv-launch__toast { opacity: 1; transform: none; }
  .adv-page .adv-launch__cursor { display: none; }
}

/* 11. Theme repaint (blue and white only) ---------------------------------- */
/* Sitewide theme pieces this page reuses, recoloured here (page-scoped, so
   assets/css/style.css stays untouched). */
/* S1 (hero) and S5 (#ad-formats) are skipped: rolled back to the theme.
   The exclusions sit inside :where() so they add NO specificity: a bare
   :not(#ad-formats) counts as an ID and beat the white-text rule below,
   which hid the Why Choose descriptions (blue-grey on blue). */
.adv-page section:where(:not(.adv-hero):not(#ad-formats)), .adv-page .modal-content { color: var(--adv-ink); }
.adv-page section:where(:not(.adv-hero):not(#ad-formats)) p { color: var(--adv-muted); }
.adv-page .adv-why__tile p, .adv-page .adv-final p { color: rgba(255, 255, 255, .9); }

/* Ad-format tabs (S5) are deliberately NOT repainted: the Nov 2026 review
   rolled them back to the theme's own colours. */

/* Step icons sit on black until hover. */
.adv-page .ihome { background: var(--adv-blue); }
.adv-page .listicon li:hover .ihome { background: var(--adv-deep); }

/* Blog "Read more" links and their divider are grey. */
.adv-page .blog-card .line-btn { color: var(--adv-blue); }
.adv-page .blog-card .line-btn::before { background: var(--adv-blue); }
.adv-page .blog-card .blog-bottom { border-color: var(--adv-line); }

/* Login / register / meeting modals (includes/modals.php): dark buttons,
   grey borders and text. */
.adv-page .toplogin .sin-button { background: var(--adv-blue); border-color: var(--adv-blue); }
.adv-page .toplogin .sin-button:hover { background: var(--adv-deep); border-color: var(--adv-deep); }
.adv-page .toplogin .signup-box { border-color: var(--adv-line); }
.adv-page .toplogin .signup-box .nametitle, .adv-page .title-name { color: var(--adv-ink); }
.adv-page .toplogin .signup-box p { color: var(--adv-muted); }
.adv-page .toplogin .modal-header { border-bottom-color: var(--adv-line); }
.adv-page .modal-content { border-color: var(--adv-line); }
/* Theme text that is set straight to black. */
.adv-page .faq-text, .adv-page .listicon li, .adv-page .modal-dialog { color: var(--adv-ink); }
.adv-page .faq-text, .adv-page .toplogin p { color: var(--adv-muted); }