/* AdPylon — home page styles. No framework; tokens first, then sections.
   Breakpoints: 1024 / 768 / 480.

   Color semiotics — each hue has exactly one job, so the eye learns the code fast:
   - Ink (deep navy)      authority, control room, "your money is safe here"
   - Amber                ACTION ONLY. Every amber surface is a signup path.
   - Blue → Teal          Google → Bing. Their blend is the "bridge": two engines, one system.
   - Green                gain: conversions won, money kept, checks passed
   - Coral                loss: waste, risk, the cost of the status quo
   - Warm paper           approachable, human — not a cold enterprise gray */

:root {
  --ink-950: #070c18;
  --ink-900: #0b1220;
  --ink-800: #111a2e;
  --ink-700: #1a2440;
  --ink-line: #26324f;
  --text: #0f172a;
  --text-muted: #4a5568;
  --text-on-dark: #e9edf6;
  --muted-on-dark: #a3aec4;
  --paper: #f7f6f2;
  --paper-tint: #efede6;
  --card: #ffffff;
  --line: #e3e0d7;

  --cta: #ffb020;
  --cta-hover: #ffc247;
  --cta-glow: rgb(255 176 32 / 0.45);

  --google: #4f8bff;
  --bing: #22d3b6;
  --bridge: linear-gradient(90deg, var(--google), var(--bing));

  --gain: #3ddc84;          /* on dark */
  --gain-ink: #15803d;      /* on light */
  --loss: #ff6b5e;          /* on dark */
  --loss-ink: #c2352b;      /* on light */
  --trust-ink: #2457d6;     /* eyebrows on light */

  --focus: #4f8bff;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 10px 30px -14px rgb(15 23 42 / 0.2);
  --header-h: 68px;
  --gutter: 24px;
  --section-y: clamp(72px, 9vw, 120px);

  /* UI glyphs (masks: they take the text color via currentColor) */
  --ico-arrow-r: 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%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ico-arrow-l: 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%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
  --ico-check: 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%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ico-replay: 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%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6L3.5 8.5'/%3E%3Cpath d='M3.5 3.5v5h5'/%3E%3C/svg%3E");
  --badge-yes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23dcefe2'/%3E%3Cg fill='none' stroke='%2315803d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/g%3E%3C/svg%3E");
  --badge-no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23f8e1de'/%3E%3Cg fill='none' stroke='%23c2352b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7'/%3E%3C/g%3E%3C/svg%3E");
  --badge-meh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ebe8e0'/%3E%3Cg fill='none' stroke='%237a7567' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12h8'/%3E%3C/g%3E%3C/svg%3E");
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(1.875rem, 3.2vw + 0.6rem, 3rem); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
svg { flex-shrink: 0; }

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

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  /* Respect notches in landscape (viewport-fit=cover) */
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px; top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--cta);
  color: var(--ink-900);
  font-weight: 700;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; }

/* Shared keyframes (status dots, tour panels, demo) */
@keyframes pulse { to { box-shadow: 0 0 0 8px rgb(61 220 132 / 0); } }
@keyframes slide-in { from { opacity: 0; transform: translateY(-10px); } }

/* ---------- Glyphs ----------
   Arrows, checks and replay are drawn icons, not font characters, so they
   line up and keep one stroke weight everywhere. Color comes from the text. */
.btn-arrow::after, .footer-contact::after, .scan-replay::before {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  -webkit-mask: var(--ico-arrow-r) center / contain no-repeat;
  mask: var(--ico-arrow-r) center / contain no-repeat;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1rem/1.2 var(--font-body);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  text-wrap: balance;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }
/* Hover styles live in @media (hover: hover) so a tap on a phone doesn't leave a button stuck "hovered". */
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: 0.9375rem; }
.btn-lg { min-height: 56px; padding: 14px 30px; font-size: 1.0625rem; }
.btn-block { width: 100%; }

/* Amber = the only "go" signal on the page. */
.btn-primary {
  background: var(--cta);
  color: var(--ink-950);
  box-shadow: 0 10px 30px -12px var(--cta-glow), inset 0 -2px 0 rgb(0 0 0 / 0.12);
}
@media (hover: hover) {
  .btn-primary:hover {
    background: var(--cta-hover);
    box-shadow: 0 16px 40px -12px var(--cta-glow), inset 0 -2px 0 rgb(0 0 0 / 0.12);
  }
}
.btn-arrow::after { transition: transform .2s ease; }
@media (hover: hover) { .btn-arrow:hover::after { transform: translateX(4px); } }

.btn-outline { border-color: var(--text); color: var(--text); background: transparent; }
@media (hover: hover) { .btn-outline:hover { background: var(--text); color: var(--paper); } }

.btn-light { background: #fff; color: var(--ink-950); }
@media (hover: hover) { .btn-light:hover { background: var(--paper-tint); } }

.btn-ghost-dark { border-color: rgb(255 255 255 / 0.25); color: #fff; background: transparent; }
@media (hover: hover) { .btn-ghost-dark:hover { border-color: #fff; background: rgb(255 255 255 / 0.06); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(247 246 242 / 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink-950);
  text-decoration: none;
}
.brand-mark { width: 32px; height: 32px; }
.brand-name { font: 800 1.25rem/1 var(--font-display); letter-spacing: -0.02em; }

.nav-panel {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-inline-start: auto;
}

.nav-links { display: flex; gap: 4px; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
@media (hover: hover) { .nav-links a:hover { color: var(--text); background: var(--paper-tint); } }

/* ---------- Language menu (js/locale-menu.js), same on every page ----------
   Trigger: flag + code (desktop header) or flag + full name (menus, footer, auth).
   Panel: every language by its own name in a 2-column grid, current one checked. */
.locale { position: relative; display: inline-flex; align-items: center; }
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: 600 0.875rem var(--font-body);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
@media (hover: hover) { .lang-trigger:hover { border-color: #cfcabd; box-shadow: 0 6px 16px -10px rgb(15 23 42 / 0.35); } }
.locale.is-open .lang-trigger { border-color: var(--text); }
.flag {
  flex: none;
  width: 22px; height: 16.5px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(15 23 42 / 0.14), 0 1px 2px rgb(15 23 42 / 0.12);
}
.lang-trigger .lang-code { font-weight: 700; letter-spacing: 0.04em; }
.lang-trigger .lang-name { display: none; }
.lang-chevron { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0.6; transition: transform .2s ease; }
.locale.is-open .lang-chevron { transform: rotate(180deg); }

.lang-pop {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: min(460px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 30px 60px -24px rgb(15 23 42 / 0.4), 0 10px 20px -12px rgb(15 23 42 / 0.2);
  transform-origin: top right;
  animation: lang-in .16s cubic-bezier(.2,.7,.2,1);
}
.locale.is-up .lang-pop { top: auto; bottom: calc(100% + 8px); transform-origin: bottom right; }
@keyframes lang-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.lang-pop-title {
  margin: 6px 10px 8px;
  color: var(--text-muted);
  font: 700 0.6875rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; max-height: min(420px, 60vh); overflow-y: auto; outline: none; }
.lang-list [role="option"] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9375rem;
  outline: none;
}
.lang-list .lang-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* The flag already identifies each row; the code stays for screen-free type-ahead only */
.lang-list .lang-code { display: none; }
.lang-list [role="option"].is-active { background: var(--paper-tint); }
.lang-list [role="option"]:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.lang-list [aria-selected="true"] { background: rgb(79 139 255 / 0.08); }
.lang-list [aria-selected="true"] .lang-name { font-weight: 700; }
.lang-check { display: none; width: 16px; height: 16px; fill: none; stroke: var(--trust-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lang-list [aria-selected="true"] .lang-check { display: block; }

/* Phones: two narrow columns; long names wrap instead of being cut */
@media (max-width: 480px) {
  .lang-list .lang-name { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  .lang-list [role="option"] { padding-block: 6px; }
}
/* Rows follow the page direction (flags line up); each name keeps its own direction */
[dir="rtl"] .lang-list .lang-name[dir="ltr"] { text-align: end; }

/* Dark surfaces (site footer, demo top bar): ink trigger, same light panel */
:is(.site-footer, .demo-top) .lang-trigger { border-color: rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.04); color: #fff; }
@media (hover: hover) { :is(.site-footer, .demo-top) .lang-trigger:hover { border-color: rgb(255 255 255 / 0.4); } }
:is(.site-footer, .demo-top) .locale.is-open .lang-trigger { border-color: #fff; }
:is(.site-footer, .demo-top) .flag { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2); }
/* Footer and sign-in pages show the full name; the footer opens upward */
:is(.site-footer, .locale-auth) .lang-trigger .lang-code { display: none; }
:is(.site-footer, .locale-auth) .lang-trigger .lang-name { display: inline; }
.site-footer .locale { margin-bottom: 8px; }
.site-footer .lang-pop, .locale-auth .lang-pop { inset-inline-end: auto; inset-inline-start: 0; transform-origin: bottom left; }
.locale-auth { margin-top: 16px; }

.header-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.header-actions .btn { white-space: nowrap; }
.nav-toggle { flex: none; }
.nav-login-item { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  place-items: center;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bar { position: relative; }
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; inset-inline-start: 0; }
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }
.is-open .nav-toggle-bar { background: transparent; }
.is-open .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.is-open .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }

/* Without JS these controls can't work, so they aren't offered. */
.no-js .locale,
.no-js .sticky-cta { display: none; }

/* ---------- Shared section bits ---------- */
.section { padding-block: var(--section-y); }
.section-tint { background: var(--paper-tint); }
.section-ink { background: var(--ink-950); color: var(--text-on-dark); }
.section-ink h2 { color: #fff; }

.section-head {
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.section-head-left { margin-inline: 0; text-align: start; }
.section-sub { margin-top: 16px; color: var(--text-muted); font-size: 1.125rem; }
.section-ink .section-sub { color: var(--muted-on-dark); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--trust-ink);
  font: 700 0.8125rem/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 3px;
  border-radius: 2px;
  background: var(--bridge);
}
.eyebrow-on-dark { color: #9fbcff; }
.eyebrow-loss { color: var(--loss-ink); }
.eyebrow-loss::before { background: var(--loss-ink); }
.eyebrow-gain { color: var(--gain); }
.eyebrow-gain::before { background: var(--gain); }

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

.micro-note {
  margin-top: 16px;
  color: var(--muted-on-dark);
  font-size: 0.9375rem;
}

/* Green check = something you gain */
.check-list li {
  position: relative;
  padding-inline-start: 30px;
  margin-top: 10px;
}
.check-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 0.2em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgb(21 128 61 / 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Scroll reveal (JS only — content is never hidden without it).
   Uses the `translate` property, not `transform`, so it never fights a card's own transform. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .8s ease, translate .9s cubic-bezier(.16,1,.3,1);
}
.js [data-reveal].is-revealed { opacity: 1; translate: none; }

/* Section heads: eyebrow, title, subtitle rise one after another and come into focus */
.js .section-head[data-reveal] { opacity: 1; translate: none; }
.js .section-head[data-reveal] > * {
  opacity: 0;
  translate: 0 22px;
  filter: blur(8px);
  transition: opacity .8s ease, translate .9s cubic-bezier(.16,1,.3,1), filter .8s ease;
}
.js .section-head[data-reveal] > :nth-child(2) { transition-delay: .08s; }
.js .section-head[data-reveal] > :nth-child(3) { transition-delay: .16s; }
.js .section-head[data-reveal].is-revealed > * { opacity: 1; translate: none; filter: none; }

/* Card grids: cards enter in a cascade (--i is set by main.js) */
.js [data-stagger][data-reveal] { opacity: 1; translate: none; }
.js [data-stagger][data-reveal] > * {
  opacity: 0;
  translate: 0 36px;
  scale: 0.97;
  transition: opacity .7s ease, translate .9s cubic-bezier(.16,1,.3,1), scale .9s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-stagger][data-reveal].is-revealed > * { opacity: 1; translate: none; scale: none; }
/* After the cascade, hover transitions must not wait for the delay */
.js [data-stagger][data-reveal].is-settled > * { transition-delay: 0s; }

/* Scroll progress: a thin Google→Bing line under the header (width set by effects.js) */
.site-header::after {
  content: "";
  position: absolute;
  inset-inline-start: 0; inset-inline-end: 0; bottom: -1px;
  height: 2px;
  background: var(--bridge);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.is-scrolled { background: rgb(247 246 242 / 0.94); box-shadow: 0 10px 30px -18px rgb(15 23 42 / 0.35); }

/* Scroll-spy: the nav link for the section on screen */
.nav-links a.is-current { color: var(--text); }
@media (min-width: 1025px) {
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: "";
    position: absolute;
    inset-inline-start: 12px; inset-inline-end: 12px; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--bridge);
    transform: scaleX(0);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .nav-links a.is-current::after { transform: scaleX(1); }
}

/* Leaving the hero: the copy drifts up and fades (--out set by effects.js, desktop only) */
@media (min-width: 1025px) {
  .js .hero-copy { opacity: calc(1 - var(--out, 0) * 0.85); translate: 0 calc(var(--out, 0) * -48px); }
  .js .hero-stage { translate: 0 calc(var(--out, 0) * -24px); }
}

/* Final CTA opens from an inset card to full width as it arrives (--open set by effects.js) */
.js .final-cta {
  clip-path: inset(0 calc((1 - var(--open, 1)) * 3vw) round calc((1 - var(--open, 1)) * 40px));
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal] > * { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; }
  .js .hero-copy, .js .hero-stage { opacity: 1; translate: none; }
  .js .final-cta { clip-path: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px) clamp(72px, 9vw, 128px);
  background:
    radial-gradient(55% 65% at 8% 0%, rgb(79 139 255 / 0.28), transparent 70%),
    radial-gradient(50% 60% at 100% 30%, rgb(34 211 182 / 0.2), transparent 70%),
    radial-gradient(40% 50% at 30% 110%, rgb(255 176 32 / 0.1), transparent 70%),
    var(--ink-950);
  color: var(--text-on-dark);
}
/* Faint control-room grid */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 3.4vw + 1.2rem, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.hero-sub {
  max-width: 34em;
  margin: 24px 0 34px;
  color: var(--muted-on-dark);
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-line);
  color: var(--text-on-dark);
  font-size: 0.9375rem;
  font-weight: 600;
}
.hero-chips li { display: inline-flex; align-items: center; gap: 8px; }
.chip-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgb(61 220 132 / 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%233ddc84' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ---------- Header login + "no credit card" assurance ---------- */
.header-login { border-width: 1px; border-color: var(--line); background: var(--card); }
@media (hover: hover) { .header-login:hover { border-color: var(--text); background: var(--card); color: var(--text); } }
.hero .hero-assure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}
.hero .hero-assure::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgb(61 220 132 / 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%233ddc84' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
@media (max-width: 480px) {
  /* Room for Log in + Sign up free + menu: keep the logo, drop the wordmark */
  .site-header .brand-name { display: none; }
  .site-header .brand { min-width: 44px; justify-content: center; }
  .header-login { padding-inline: 12px; }
  .hero .hero-assure { font-size: 0.9375rem; align-items: flex-start; }
}

/* ---------- Hero: auto-playing Report X-ray ----------
   Final state is the default (no JS / reduced motion); .is-playing animates into it.
   Coral = money lost, green = selling, amber only on the signup CTA. */
.scan {
  position: relative;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgb(26 36 64 / 0.94), rgb(13 20 37 / 0.97));
  box-shadow: 0 40px 100px -40px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.06);
  color: var(--text-on-dark);
}
.scan::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgb(79 139 255 / 0.7), rgb(38 50 79 / 0.6) 40%, rgb(34 211 182 / 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.scan-body { display: grid; gap: 12px; }
.scan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scan-title { color: #fff; font: 800 1.125rem var(--font-display); }
.scan-status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.06); font: 600 0.75rem var(--font-mono); }
.scan-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gain); }
.scan.is-playing .scan-dot { background: var(--bing); animation: pulse 1.2s ease-out infinite; }
.scan-live { display: none; color: var(--bing); }
.scan-finished { color: var(--gain); }
.scan.is-playing .scan-live { display: inline; }
.scan.is-playing .scan-finished { display: none; }
.scan-account { color: var(--muted-on-dark); font-size: 0.8125rem; }

.scan-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 14px; border: 1px solid rgb(255 107 94 / 0.35); border-radius: var(--radius-sm); background: rgb(255 107 94 / 0.08); }
.scan-total-label { color: #ffc9c3; font-weight: 600; font-size: 0.9375rem; }
.scan-total-value { color: var(--loss); font: 800 2.25rem/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.scan-table { position: relative; overflow: hidden; }
.scan-cols { display: flex; justify-content: space-between; padding: 0 10px 6px; color: var(--muted-on-dark); font: 600 0.75rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.scan-rows { display: grid; gap: 4px; }
.scan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.03);
  font-size: 0.875rem;
  transition: background-color .35s ease, color .35s ease, opacity .35s ease;
}
.scan-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-cost { font-variant-numeric: tabular-nums; color: var(--muted-on-dark); }
.scan-tag { min-width: 64px; padding: 2px 8px; border-radius: 999px; font: 700 0.75rem var(--font-mono); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
/* Found state (default / after the scan passes) */
.scan-row.is-wasted { background: rgb(255 107 94 / 0.1); }
.scan-row.is-wasted .scan-tag { background: rgb(255 107 94 / 0.18); color: #ffb4ad; }
.scan-row.is-good { background: rgb(61 220 132 / 0.08); }
.scan-row.is-good .scan-tag { background: rgb(61 220 132 / 0.16); color: var(--gain); }
/* While playing: rows wait dimmed until the scan line reaches them */
.scan.is-playing .scan-row:not(.is-hit) { background: rgb(255 255 255 / 0.03); color: var(--muted-on-dark); }
.scan.is-playing .scan-row:not(.is-hit) .scan-tag { opacity: 0; }
.scan-line { display: none; }
.scan.is-playing .scan-line {
  display: block;
  position: absolute;
  inset-inline-start: 0; inset-inline-end: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--bing), transparent);
  box-shadow: 0 0 18px 4px rgb(34 211 182 / 0.45);
  animation: scan-sweep 2.52s linear 0.5s both;
}
@keyframes scan-sweep { from { transform: translateY(24px); } to { transform: translateY(var(--scan-h, 260px)); } }

.scan-stats { display: grid; gap: 6px; }
.scan-stat {
  position: relative;
  padding: 9px 12px 9px 34px;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.05);
  font-weight: 700;
  font-size: 0.9375rem;
}
/* Animate only when appearing; hiding at the start of a replay is instant. */
.scan-stat.is-shown { transition: opacity .4s ease, transform .4s ease; }
.scan-stat::before { content: ""; position: absolute; inset-inline-start: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 3px; }
.stat-block::before { background: var(--loss); }
.stat-scale::before { background: var(--gain); }
.stat-bing::before { background: var(--bing); }
.scan.is-playing .scan-stat:not(.is-shown) { opacity: 0; transform: translateY(8px); }

.scan-cta { display: grid; gap: 8px; }
.scan-cta .btn { width: 100%; }
.scan.is-playing .scan-cta .btn { box-shadow: none; }
.scan.is-done .scan-cta .btn { animation: cta-glow 1.6s ease-out 1; }
@keyframes cta-glow { 0% { box-shadow: 0 0 0 0 rgb(255 176 32 / 0.6); } 100% { box-shadow: 0 0 0 16px rgb(255 176 32 / 0); } }
.scan-note { color: var(--muted-on-dark); font-size: 0.8125rem; text-align: center; }
.scan-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: #9fbcff;
  font: 600 0.8125rem var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.scan-replay::before { width: 1em; height: 1em; -webkit-mask-image: var(--ico-replay); mask-image: var(--ico-replay); }
.no-js .scan-replay { display: none; }
/* Before the animation starts, hide the results so the final state doesn't flash.
   Fail-safe: if the script never runs, they appear after 3s anyway. */
.js .scan:not(.is-ready) .scan-tag,
.js .scan:not(.is-ready) .scan-stats,
.js .scan:not(.is-ready) .scan-total-value { visibility: hidden; animation: scan-failsafe 0s 3s forwards; }
@keyframes scan-failsafe { to { visibility: visible; } }
.js .scan:not(.is-ready) .scan-row { background: rgb(255 255 255 / 0.03); }
.js .scan:not(.is-ready) .scan-finished { visibility: hidden; }

@media (max-width: 480px) {
  /* The scan below shows the same proof; bring it closer to the first screen */
  .hero .hero-chips { display: none; }
  .scan { padding: 16px; }
  .scan-total-value { font-size: 1.875rem; }
  .scan-row { grid-template-columns: minmax(0, 1fr) auto; }
  .scan-row .scan-tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .scan-row .scan-cost { grid-column: 1; grid-row: 2; font-size: 0.8125rem; }
}

/* ==========================================================
   Depth & light: aurora, 3D hero stage, product showcase, bridge, card sheen.
   Only transform/opacity animate (GPU-friendly). Reduced motion = static.
   ========================================================== */

/* Aurora: slow, blurred light in the engine colors behind the hero */
.hero-aurora { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; filter: blur(60px); opacity: 0.55; }
.hero-aurora i { position: absolute; display: block; border-radius: 50%; }
.hero-aurora i:nth-child(1) { width: 46vw; height: 46vw; inset-inline-start: -6vw; top: -10vw; background: radial-gradient(circle, rgb(79 139 255 / 0.55), transparent 65%); animation: aurora-a 22s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(2) { width: 40vw; height: 40vw; inset-inline-end: -8vw; top: 4vw; background: radial-gradient(circle, rgb(34 211 182 / 0.45), transparent 65%); animation: aurora-b 26s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(3) { width: 30vw; height: 30vw; inset-inline-start: 30vw; top: 22vw; background: radial-gradient(circle, rgb(255 176 32 / 0.18), transparent 65%); animation: aurora-c 30s ease-in-out infinite alternate; }
@keyframes aurora-a { to { transform: translate3d(8vw, 6vw, 0) scale(1.15); } }
@keyframes aurora-b { to { transform: translate3d(-10vw, 8vw, 0) scale(0.9); } }
@keyframes aurora-c { to { transform: translate3d(-12vw, -6vw, 0) scale(1.2); } }
.hero-grid { z-index: 1; }

/* Hero stage: the scan floats in 3D with two engine chips at different depths */
.hero-stage { position: relative; perspective: 1600px; --px: 0; --py: 0; }
.hero-stage::after { content: ""; position: absolute; inset-inline-start: 10%; inset-inline-end: 10%; bottom: -36px; height: 60px; border-radius: 50%; background: radial-gradient(ellipse, rgb(79 139 255 / 0.35), transparent 70%); filter: blur(18px); pointer-events: none; }
.hero-stage .scan {
  transform: rotateY(calc(-9deg + var(--px) * 6deg)) rotateX(calc(4deg - var(--py) * 4deg));
  transition: transform .25s ease-out;
  box-shadow: 0 60px 120px -50px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.03), inset 0 1px 0 rgb(255 255 255 / 0.06);
}

/* Product showcase */
.showcase { position: relative; overflow: clip; background: linear-gradient(180deg, var(--card), var(--paper) 70%); }
.showcase::before {
  content: "";
  position: absolute;
  left: 50%; top: 38%;
  width: 70%; height: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgb(79 139 255 / 0.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.show-frame { margin: 0; overflow: hidden; border: 1px solid rgb(15 23 42 / 0.12); border-radius: 16px; background: #fff; box-shadow: 0 50px 100px -40px rgb(15 23 42 / 0.45), 0 18px 36px -18px rgb(15 23 42 / 0.25); }
.show-frame img { display: block; width: 100%; height: auto; }
.show-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #f3f2ee; }
.show-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ded9cd; }
.show-bar i:nth-child(1) { background: #ff6b5e; } .show-bar i:nth-child(2) { background: #ffbd2e; } .show-bar i:nth-child(3) { background: #28c840; }
.show-bar span { margin-inline-start: 12px; color: var(--text-muted); font: 600 0.75rem var(--font-mono); }

/* ---------- Scroll story ----------
   Desktop: steps scroll on the left while the product frame stays pinned on the right.
   --merge (0→1): Google and Bing panels slide in from the sides and become one screen.
   --p (0→1): progress through the active step; the screenshot drifts (parallax).
   --story-p (0→1): fill of the progress rail. All set by effects.js; defaults show the end state. */
.story { position: relative; max-width: 1320px; margin: clamp(36px, 5vw, 64px) auto 0; padding-inline: var(--gutter); }
.story-steps { display: grid; gap: 48px; counter-reset: story; }
.story-step { counter-increment: story; }
.story-num::before { content: counter(story, decimal-leading-zero); }
.story-num { display: block; margin-bottom: 10px; background: var(--bridge); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 0.875rem var(--font-mono); letter-spacing: 0.08em; }
.story-step h3 { font: 800 clamp(1.5rem, 1.2vw + 1rem, 2rem)/1.15 var(--font-display); letter-spacing: -0.02em; }
.story-step p { margin-top: 12px; max-width: 34em; color: var(--text-muted); font-size: 1.0625rem; }
.story-inline { margin-top: 22px; }
.story-stage { display: none; }

@media (min-width: 1025px) {
  .story { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 64px; }
  .story-steps { grid-column: 1; grid-row: 1; gap: 0; padding-inline-start: 32px; }
  .story-step { display: flex; flex-direction: column; justify-content: center; min-height: 78svh; transition: opacity .5s ease; }
  .story-step:first-child { min-height: 100svh; }
  .js .story-step:not(.is-active) { opacity: 0.28; }
  .story-inline { display: none; }

  /* Progress rail */
  .story-steps { position: relative; }
  .story-steps::before, .story-steps::after { content: ""; position: absolute; inset-inline-start: 0; top: 18svh; bottom: 18svh; width: 2px; border-radius: 2px; }
  .story-steps::before { background: var(--line); }
  .story-steps::after { background: linear-gradient(var(--google), var(--bing)); transform: scaleY(var(--story-p, 1)); transform-origin: 50% 0; }

  .story-stage {
    display: block;
    grid-column: 2; grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + max(24px, (100svh - var(--header-h) - 540px) / 2));
    align-self: start;
    margin-top: 12svh;
  }
  /* The frame appears only after the two engine panels have met (merge ≥ 0.72) */
  .story-frame {
    position: relative;
    opacity: clamp(0, (var(--merge, 1) - 0.72) * 3.6, 1);
    scale: calc(0.9 + clamp(0, (var(--merge, 1) - 0.72) * 3.6, 1) * 0.1);
  }
  /* The window is shorter than the screenshot, so the shot can drift up inside it */
  .story-shots { position: relative; aspect-ratio: 1440 / 800; overflow: hidden; background: #f3f2ee; }
  .story-shot {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    opacity: 0;
    scale: 1.04;
    transform-origin: 50% 0;
    translate: 0 calc(var(--p, 0) * -11.1%);
    transition: opacity .6s ease, scale .9s cubic-bezier(.16,1,.3,1);
  }
  .story-shot.is-active { opacity: 1; scale: 1; }

  /* Google + Bing merge */
  .story-merge { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .engine {
    position: absolute;
    top: 26%;
    width: 44%;
    display: grid;
    gap: 12px;
    padding: 20px 22px 24px;
    border: 1px solid var(--ink-line);
    border-top: 3px solid var(--google);
    border-radius: 16px;
    background: var(--ink-900);
    color: #fff;
    box-shadow: 0 40px 80px -30px rgb(7 12 24 / 0.6);
    /* fully visible while sliding in, gone by merge 0.78 */
    opacity: clamp(0, (0.78 - var(--merge, 1)) * 6, 1);
  }
  /* m2 reaches 1 at merge 0.7: the panels meet in the middle, then fade */
  .story-merge { --m2: min(1, calc(var(--merge, 1) / 0.7)); }
  /* A flash of Google→Bing light at the moment they meet */
  .story-merge::after {
    content: "";
    position: absolute;
    inset-inline-start: 15%; inset-inline-end: 15%; top: 10%; bottom: 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(79 139 255 / 0.45), rgb(34 211 182 / 0.25) 55%, transparent);
    filter: blur(20px);
    opacity: clamp(0, 1 - max(var(--merge, 1) - 0.74, 0.74 - var(--merge, 1)) * 7, 1);
  }
  .engine b { display: flex; align-items: center; gap: 10px; font: 700 1rem var(--font-body); }
  .engine b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--google); box-shadow: 0 0 12px var(--google); }
  .engine i { display: block; height: 9px; border-radius: 5px; background: rgb(255 255 255 / 0.1); }
  .engine i:nth-of-type(1) { width: 92%; } .engine i:nth-of-type(2) { width: 70%; } .engine i:nth-of-type(3) { width: 82%; }
  .engine-g { inset-inline-start: calc(var(--m2) * 28%); translate: calc((1 - var(--m2)) * -30%) 0; rotate: calc((1 - var(--m2)) * -6deg); }
  .engine-b { inset-inline-end: calc(var(--m2) * 28%); translate: calc((1 - var(--m2)) * 30%) 0; rotate: calc((1 - var(--m2)) * 6deg); border-top-color: var(--bing); }
  .engine-b b::before { background: var(--bing); box-shadow: 0 0 12px var(--bing); }
}
@media (max-width: 600px) {
  /* Phone-sized shots: a narrow frame, cropped so each step stays short */
  .story-inline { max-width: 340px; margin-inline: auto; }
  .story-inline picture { display: block; max-height: 520px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
}
.show-cta { display: flex; justify-content: center; margin-top: clamp(48px, 7vw, 88px); }

/* Final CTA: Google and Bing platforms joined by a bridge of light */
.cta-bridge { display: block; width: min(520px, 90%); height: auto; margin: 0 auto 18px; filter: drop-shadow(0 20px 30px rgb(0 0 0 / 0.45)); }

/* Card sheen: soft light follows the pointer (vars set by effects.js) */
.feature, .kit-card {
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgb(79 139 255 / 0.10), transparent 45%);
}
.kit-card { background-color: var(--paper); }
.feature { background-color: var(--card); }

@media (max-width: 1024px) {
  .hero-stage .scan { transform: none; }
}
@media (max-width: 768px) {
  .hero-aurora { opacity: 0.4; }
  .show-bar span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aurora i { animation: none; }
}

/* ==========================================================
   Hero impact: full-screen stage, glowing title, moving floor grid,
   two "ghost" consoles (Google, Bing) merging behind the one AdPylon panel,
   a rotating light border, and a staged entrance. Motion respects
   prefers-reduced-motion via the global rule at the end of this file.
   ========================================================== */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@media (min-width: 1025px) and (min-height: 700px) {
  .hero { display: grid; align-items: center; min-height: calc(100svh - var(--header-h)); padding-block: 40px 88px; }
}
.hero::before { opacity: 0.6; mask-image: radial-gradient(70% 55% at 50% 15%, #000 20%, transparent); }

.hero h1 {
  font-size: clamp(2.75rem, 4.4vw + 0.8rem, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, #ffffff 35%, #cfe0ff 72%, #a6efe1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 34px rgb(79 139 255 / 0.28));
}
@media (forced-colors: active) { .hero h1 { background: none; color: CanvasText; filter: none; } }

/* Floor: a perspective grid gliding toward the horizon */
.hero-floor {
  position: absolute;
  inset-inline-start: -30%; inset-inline-end: -30%; bottom: -4%;
  height: 52%;
  perspective: 520px;
  pointer-events: none;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 80%);
  mask-image: linear-gradient(to top, #000 5%, transparent 80%);
}
.hero-floor-grid {
  position: absolute;
  inset: -100% 0 0;
  transform-origin: 50% 100%;
  transform: rotateX(74deg);
  background-image:
    linear-gradient(rgb(79 139 255 / 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgb(34 211 182 / 0.3) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: floor-glide 3.5s linear infinite;
}
@keyframes floor-glide { to { transform: rotateX(74deg) translateY(64px); } }

/* Ghost consoles behind the panel */
.hero-stage .scan { z-index: 1; }
.ghost {
  position: absolute;
  z-index: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  width: 74%;
  height: 58%;
  padding: 18px;
  border: 1px solid;
  border-radius: 18px;
  background: rgb(17 26 46 / 0.6);
  pointer-events: none;
}
.ghost-g {
  top: -9%; inset-inline-start: -16%;
  color: var(--google);
  border-color: rgb(79 139 255 / 0.5);
  box-shadow: 0 0 70px -12px rgb(79 139 255 / 0.55);
  transform: rotate(-6deg);
  animation: ghost-g 1.3s 0.35s cubic-bezier(.2,.7,.2,1) both;
}
.ghost-b {
  bottom: -8%; inset-inline-end: -12%;
  color: var(--bing);
  border-color: rgb(34 211 182 / 0.5);
  box-shadow: 0 0 70px -12px rgb(34 211 182 / 0.5);
  transform: rotate(5deg);
  animation: ghost-b 1.3s 0.35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ghost-g { from { opacity: 0; transform: translate(-60px, -30px) rotate(-12deg); } }
@keyframes ghost-b { from { opacity: 0; transform: translate(60px, 30px) rotate(11deg); } }
.ghost-bar { width: 38%; height: 10px; border-radius: 4px; background: currentColor; opacity: 0.8; }
.ghost-row { height: 12px; border-radius: 4px; background: rgb(255 255 255 / 0.07); }
.ghost-row:nth-child(3) { width: 82%; } .ghost-row:nth-child(4) { width: 64%; } .ghost-row:nth-child(5) { width: 74%; }

/* Rotating light around the AdPylon panel */
.hero-stage .scan::before {
  padding: 1.5px;
  background: conic-gradient(from var(--angle), rgb(79 139 255 / 0.95), rgb(38 50 79 / 0.25) 22%, rgb(34 211 182 / 0.95) 50%, rgb(38 50 79 / 0.25) 72%, rgb(79 139 255 / 0.95));
  animation: spin-light 6s linear infinite;
}
@keyframes spin-light { to { --angle: 360deg; } }

/* Staged entrance */
.js .hero-copy > * { animation: hero-rise 0.8s cubic-bezier(.2,.7,.2,1) both; }
.js .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.js .hero-copy > :nth-child(3) { animation-delay: 0.18s; }
.js .hero-copy > :nth-child(4) { animation-delay: 0.28s; }
.js .hero-copy > :nth-child(5) { animation-delay: 0.36s; }
.js .hero-copy > :nth-child(6) { animation-delay: 0.44s; }
.js .hero-stage { animation: stage-in 1s 0.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes stage-in { from { opacity: 0; transform: translateY(32px) scale(0.97); } }

@media (min-width: 1025px) {
  /* Leave room for the ghosts above and below the panel */
  .hero-stage { transform: scale(0.9); }
  .ghost-g { top: -5%; }
  .ghost-b { bottom: -5%; }
}
@media (max-width: 1024px) {
  .ghost { display: none; }
  .hero-floor { opacity: 0.4; height: 40%; }
}

/* ---------- Free toolkit section ---------- */
.kit-section { background: var(--card); border-bottom: 1px solid var(--line); }
.kit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kit-card { display: grid; align-content: start; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.kit-card-featured { border-color: rgb(21 128 61 / 0.35); box-shadow: 0 30px 60px -36px rgb(21 128 61 / 0.45); }
.kit-card h3 { font-size: 1.375rem; font-weight: 800; }
.kit-card > p { color: var(--text-muted); }
.kit-mock { display: grid; gap: 8px; margin-bottom: 6px; padding: 16px; border-radius: var(--radius); background: var(--ink-950); color: var(--text-on-dark); font-size: 0.875rem; }
.kit-line { display: grid; gap: 2px; padding: 8px 10px; border-inline-start: 3px solid; border-radius: 4px; background: rgb(255 255 255 / 0.04); }
.kit-line span { font-weight: 700; }
.kit-line small { font-size: 0.75rem; }
.kit-bad { border-color: var(--loss); }
.kit-bad small { color: #ffb4ad; }
.kit-good { border-color: var(--gain); }
.kit-good small { color: var(--gain); }
.kit-kpi { display: grid; gap: 2px; }
.kit-kpi small { color: var(--muted-on-dark); font-size: 0.75rem; }
.kit-kpi strong { color: var(--gain); font: 800 1.375rem/1.1 var(--font-display); }
.kit-card:nth-child(2) .kit-kpi strong { color: var(--loss); }
.kit-term { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--ink-line); }
.kit-term em { color: #8fb4ff; font-style: normal; font-weight: 600; font-size: 0.75rem; white-space: nowrap; }
.kit-blur { filter: blur(3px); opacity: 0.7; }
.kit-bars { display: grid; gap: 6px; }
.kit-bars i { display: block; width: var(--w); height: 8px; border-radius: 4px; background: var(--bridge); }
.kit-rows { color: var(--muted-on-dark); font-size: 0.8125rem; }
.kit-lock { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--text-muted); font: 600 0.75rem var(--font-mono); }
.kit-lock::before {
  content: ""; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kit-cta { display: grid; justify-items: center; gap: 10px; margin-top: 32px; text-align: center; }
.kit-cta p { max-width: 60ch; color: var(--text-muted); font-size: 0.9375rem; }
@media (max-width: 1024px) { .kit-grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; } }

/* ---------- Trust row (text only) ---------- */
.trust { padding-block: 26px; border-bottom: 1px solid var(--line); background: var(--card); }
.trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; }
.trust-title { color: var(--text-muted); font: 600 0.9375rem/1.4 var(--font-body); letter-spacing: 0; }
.trust-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 0; }
.trust-list li { color: var(--text); font: 800 1.125rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.trust-list li + li::before { content: "·"; margin: 0 14px; color: #b3ad9f; font-weight: 400; }

/* ---------- Problem ledger: loss vs gain ---------- */
.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1000px;
  margin-inline: auto;
}
.ledger-col { padding: 32px; border-radius: var(--radius-lg); }
.ledger-col h3 { margin-bottom: 8px; font-size: 1.375rem; }
.ledger-loss {
  border: 1px dashed rgb(194 53 43 / 0.35);
  background: rgb(255 107 94 / 0.06);
  color: #5b3a37;
}
.ledger-loss h3 { color: var(--loss-ink); }
.ledger-gain {
  background: var(--ink-950);
  color: var(--text-on-dark);
  box-shadow: 0 30px 60px -30px rgb(7 12 24 / 0.6);
}
.ledger-gain h3 { color: #fff; }
.mark-list li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid rgb(0 0 0 / 0.06); }
.ledger-gain .mark-list li { border-color: var(--ink-line); }
.mark-list li:first-child { border-top: 0; }
.mark-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 14px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background-position: center;
  background-size: 22px;
  background-repeat: no-repeat;
}
.mark-list-loss li { text-decoration: line-through; text-decoration-color: rgb(194 53 43 / 0.35); }
.mark-list-loss li::before {
  background-color: rgb(194 53 43 / 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7.5 7.5l7 7M14.5 7.5l-7 7' stroke='%23c2352b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.mark-list-gain li::before {
  background-color: rgb(61 220 132 / 0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%233ddc84' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Features ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  counter-reset: feat;
}
.feature {
  position: relative;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  counter-increment: feat;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--bridge);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
@media (hover: hover) { .feature:hover { border-color: #cfcabd; box-shadow: 0 24px 50px -24px rgb(15 23 42 / 0.35); } /* no lift: moving the hit area makes hover flicker */ }
@media (hover: hover) { .feature:hover::before { transform: scaleX(1); } }
.feature::after {
  content: counter(feat, decimal-leading-zero);
  position: absolute;
  top: 24px; inset-inline-end: 24px;
  color: #b3ad9f;
  font: 600 0.8125rem var(--font-mono);
}
.feature-icon {
  width: 48px; height: 48px;
  padding: 11px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--ink-700), var(--ink-950) 70%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 22px -12px rgb(7 12 24 / 0.7);
  fill: none; stroke: #e9edf6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Two-tone: Google blue and Bing teal carry meaning inside the icons too */
.feature-icon .i-g, .toolkit-card .i-g { stroke: var(--google); }
.feature-icon .i-b, .toolkit-card .i-b { stroke: var(--bing); }
.feature-icon .i-fill-b { fill: rgb(34 211 182 / 0.35); stroke: var(--bing); }
.feature-icon .i-dot { fill: #e9edf6; stroke: none; }
.feature-icon .i-dot-g { fill: var(--google); stroke: none; }
.feature h3 { margin-bottom: 10px; }
.feature p { color: var(--text-muted); font-size: 1rem; }

/* ---------- Audiences ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tier {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.tier-label {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--paper-tint);
  font: 700 0.75rem/1.6 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tier h3 { font-size: clamp(1.5rem, 1.2vw + 1rem, 1.875rem); font-weight: 800; }
.tier-body { margin: 12px 0 8px; color: var(--text-muted); }
.tier .check-list { flex: 1; margin-bottom: 28px; }
.tier .btn { align-self: flex-start; }

.tier--featured {
  position: relative;
  border-color: transparent;
  background:
    radial-gradient(80% 60% at 100% 0%, rgb(79 139 255 / 0.25), transparent 70%),
    var(--ink-950);
  color: var(--text-on-dark);
}
.tier--featured .tier-label { background: var(--bridge); color: var(--ink-950); }
.tier--featured h3 { color: #fff; }
.tier--featured .tier-body { color: var(--muted-on-dark); }
.tier--featured .check-list li::before,
.plan--featured .check-list li::before { filter: none; }
.tier--featured .check-list li::before {
  background-color: rgb(61 220 132 / 0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%233ddc84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Pricing ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.plan h3 { font-size: 1.375rem; }
.plan-desc { margin-top: 6px; color: var(--text-muted); font-size: 1rem; min-height: 3.2em; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 20px 0 24px; min-width: 0; }
/* Words like "Индивидуально" must wrap instead of pushing the card wider */
.price-amount { min-width: 0; font: 800 3.25rem/1 var(--font-display); letter-spacing: -0.04em; overflow-wrap: anywhere; hyphens: auto; }
.price-period { color: var(--text-muted); font-weight: 600; }
.plan .check-list { margin-top: 20px; }
.plan .check-list li { font-size: 0.9375rem; }

.plan--featured {
  border: 2px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--bridge) border-box;
  box-shadow: 0 30px 70px -30px rgb(36 87 214 / 0.45);
  transform: translateY(-8px);
}
.plan-badge {
  position: absolute;
  top: -14px; inset-inline-start: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ink-950);
  color: #fff;
  font: 700 0.75rem/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guarantees {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin-top: 44px;
}
.guarantees li { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.guarantees svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--gain-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pricing-note { max-width: 62ch; margin: 18px auto 0; color: var(--text-muted); text-align: center; font-size: 0.9375rem; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 820px; }
.faq details { border-bottom: 1px solid #d6d2c6; }
.faq details:first-child { border-top: 1px solid #d6d2c6; }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 16px 48px 16px 0;
  font: 600 1.125rem/1.35 var(--font-display);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 8px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -8px;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq details p { max-width: 68ch; padding: 0 48px 22px 0; color: var(--text-muted); }

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 10vw, 136px);
  background:
    radial-gradient(60% 80% at 15% 120%, rgb(79 139 255 / 0.3), transparent 70%),
    radial-gradient(60% 80% at 85% 120%, rgb(34 211 182 / 0.25), transparent 70%),
    var(--ink-950);
  color: var(--text-on-dark);
  text-align: center;
}
.final-cta-inner { position: relative; max-width: 860px; }
.final-cta h2 {
  color: #fff;
  font-size: clamp(2.375rem, 4.6vw + 0.6rem, 4rem);
  letter-spacing: -0.04em;
}
.final-cta-sub { margin: 18px auto 28px; max-width: 36em; color: var(--muted-on-dark); font-size: 1.1875rem; }
.cta-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 900px;
  margin: 0 auto 34px;
  counter-reset: cs;
  text-align: start;
}
.cta-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: rgb(17 26 46 / 0.7);
  font-size: 0.9375rem;
  font-weight: 600;
  counter-increment: cs;
}
.cta-steps li::before {
  content: counter(cs);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bridge);
  color: var(--ink-950);
  font: 800 0.8125rem var(--font-display);
}

/* ---------- Footer ---------- */
.site-footer { padding-block: 48px 28px; background: var(--ink-900); color: var(--muted-on-dark); font-size: 0.9375rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.footer-brand { display: grid; gap: 8px; align-content: start; }
.footer-brand .brand-name { color: #fff; font-size: 1.25rem; }
.footer-contact { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #9fbcff; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .footer-contact:hover { color: #fff; } }
.footer-h { margin-bottom: 6px; color: #fff; font-weight: 700; font-size: 0.875rem; }
.footer-links { display: grid; gap: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; min-width: 44px; text-decoration: none; }
@media (hover: hover) { .footer-links a:hover { color: #fff; } }
.footer-bottom { display: grid; gap: 8px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ink-line); }
.footer-disclaimer { max-width: 90ch; color: #7f8aa3; font-size: 0.8125rem; }
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-links a { min-height: 44px; }
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { display: none; }

/* ---------- Provider sign-in buttons (signup/login pages only) ----------
   White with the provider mark, per Google/Microsoft branding. Not amber:
   the amber CTAs on the home page all lead to the signup page first. */
.btn-google {
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  font-weight: 600;
}
@media (hover: hover) { .btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgb(60 64 67 / 0.3); } }
.g-logo { width: 20px; height: 20px; }
/* ---------- Product tour ---------- */
.tour { max-width: 960px; margin-inline: auto; }
.tour-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.tour-tabs [role="tab"] {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-muted);
  font: 600 0.9375rem var(--font-body);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
@media (hover: hover) { .tour-tabs [role="tab"]:hover { color: var(--text); border-color: #cfcabd; } }
.tour-tabs [role="tab"][aria-selected="true"] { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.no-js .tour-tabs { display: none; }

.tour-screen {
  position: relative;
  padding: 52px clamp(20px, 4vw, 40px) clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 40px 80px -40px rgb(15 23 42 / 0.35);
}
.tour-chrome { position: absolute; top: 20px; inset-inline-start: 22px; display: flex; gap: 7px; }
.tour-chrome span { width: 11px; height: 11px; border-radius: 50%; background: var(--paper-tint); border: 1px solid var(--line); }
.tour-panel + .tour-panel { margin-top: 36px; padding-top: 36px; border-top: 1px dashed var(--line); }
.js .tour-panel + .tour-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.tour-panel[hidden] { display: none; }
.js .tour-panel:not([hidden]) { animation: slide-in .4s cubic-bezier(.2,.7,.2,1); }
.tour-panel-title { margin-bottom: 16px; font-size: 1.25rem; }
.tour-rule { margin: -6px 0 18px; color: var(--text-muted); font-size: 0.9375rem; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diff-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.diff-table th, .diff-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: start; }
.diff-table thead th { color: var(--text-muted); font: 600 0.75rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.diff-table tbody th { font-weight: 600; }
.diff-table td { white-space: nowrap; }

/* Status cells: green = in sync, coral = problem, amber-free warning uses ink */
.ok, .bad, .warn { font-weight: 600; }
.ok { color: var(--gain-ink); }
.bad { color: var(--loss-ink); }
.warn { color: #8a5a00; }
.diff-table .ok::before, .diff-table .bad::before, .diff-table .warn::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

/* Mock buttons inside the tour look clickable-ish but never amber (not a real action). */
.tour-action {
  display: inline-flex;
  margin-top: 20px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink-950);
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
}

.hour-list li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas: "time bar" "time label";
  gap: 6px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.hour-list time { grid-area: time; color: var(--text-muted); font: 600 0.875rem/1.6 var(--font-mono); }
.hour-bar {
  grid-area: bar;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--google) 0 var(--g), var(--bing) var(--g) 100%);
}
.hour-list li > span:last-child { grid-area: label; color: var(--text-muted); font-size: 0.875rem; }
.tour-result {
  display: inline-flex;
  margin-top: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(21 128 61 / 0.1);
  color: var(--gain-ink);
  font-weight: 700;
}

.mail {
  padding: 20px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--google);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.mail-from { color: var(--text-muted); font: 600 0.8125rem var(--font-mono); }
.mail-subject { margin: 6px 0 10px; font-size: 1.125rem; }
.mail-body { color: var(--text-muted); }
.mail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.mail-btn {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-weight: 600;
  font-size: 0.9375rem;
}
.mail-btn-yes { background: var(--google); border-color: var(--google); color: #fff; }

.policy-list li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.policy-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 0.95em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.16;
}
.policy-list li::after {
  content: "";
  position: absolute;
  inset-inline-start: 6px; top: calc(0.95em + 6px);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Comparison ---------- */
.compare-wrap {
  max-width: 1040px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
}
.compare { width: 100%; min-width: 620px; border-collapse: collapse; }
.compare th, .compare td { padding: 16px 20px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font: 700 0.9375rem var(--font-body); color: var(--text-muted); }
.compare tbody th { font-weight: 600; }
.compare .col-us { background: rgb(79 139 255 / 0.06); }
.compare thead .col-us {
  color: var(--ink-950);
  font: 800 1.0625rem var(--font-display);
  box-shadow: inset 0 3px 0 var(--google);
}
.compare td { font-size: 0.9375rem; }
.compare :is(.yes, .no, .meh)::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-inline-end: 10px;
  vertical-align: -5px;
  background: var(--badge-yes) center / contain no-repeat;
}
.compare .yes { color: var(--gain-ink); font-weight: 700; }
.compare .no { color: var(--text-muted); }
.compare .no::before { background-image: var(--badge-no); }
.compare .meh { color: var(--text-muted); }
.compare .meh::before { background-image: var(--badge-meh); }
.compare .neutral { color: var(--text-muted); }

/* ---------- Security ---------- */
.sec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.sec-item {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.sec-item svg {
  width: 48px; height: 48px;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: rgb(21 128 61 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(21 128 61 / 0.14);
  fill: none; stroke: var(--gain-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sec-item h3 { margin-bottom: 8px; font-size: 1.125rem; }
.sec-item p { color: var(--text-muted); font-size: 0.9375rem; }
.sec-link { margin-top: 24px; text-align: center; }
.sec-link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--trust-ink);
  font-weight: 600;
}

/* ---------- Reverse-trial banner ---------- */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 820px;
  margin: -16px auto 44px;
  padding: 14px 22px;
  border-radius: var(--radius);
  text-wrap: balance;
  background: rgb(21 128 61 / 0.08);
  border: 1px solid rgb(21 128 61 / 0.25);
  color: #14532d;
  font-weight: 600;
  text-align: center;
}
.trial-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gain-ink); box-shadow: 0 0 0 4px rgb(21 128 61 / 0.18); }

@media (max-width: 1024px) {
  .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .trial-banner { border-radius: var(--radius); text-align: start; justify-content: flex-start; }
  .compare th, .compare td { padding: 12px 14px; }
}
@media (max-width: 480px) {
  .sec-grid { grid-template-columns: 1fr; }
  .tour-tabs { justify-content: flex-start; }
}

/* ---------- ≤1024: tablet ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-grid, .price-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .plan--featured { transform: none; }
  .plan-desc { min-height: 0; }

  /* Collapsible nav (JS only; without JS links stay hidden and the page scrolls) */
  .nav-toggle { display: grid; }
  .no-js .nav-toggle { display: none; }
  .header-actions { margin-inline-start: auto; }
  .nav-panel {
    position: absolute;
    top: 100%; inset-inline-start: 0; inset-inline-end: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 12px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 30px -20px rgb(15 23 42 / 0.25);
  }
  .is-open .nav-panel { display: flex; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a { width: 100%; min-height: 48px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 1.0625rem; }
  /* Inside the mobile menu: full-width trigger with the language name; panel drops in place */
  .site-header .locale { width: 100%; flex-wrap: wrap; }
  .site-header .lang-trigger { width: 100%; justify-content: flex-start; }
  .site-header .lang-trigger .lang-code { display: none; }
  .site-header .lang-trigger .lang-name { display: inline; flex: 1; text-align: start; }
  .site-header .lang-pop { position: static; width: 100%; margin-top: 8px; box-shadow: none; animation: none; }
}

/* ---------- ≤768: large phone ---------- */
@media (max-width: 768px) {
  :root { --gutter: 20px; --header-h: 64px; }
  /* Prevent iOS from zooming when a text field is focused. */
  input[type="text"], input[type="email"], input[type="number"], input[type="tel"],
  input[type="search"], select, textarea { font-size: 16px; }
  .feature-grid, .ledger { grid-template-columns: 1fr; }
  .trust-inner { flex-direction: column; }
  .ledger-col { padding: 24px; }

  .js .sticky-cta {
    position: fixed;
    inset-inline-start: 12px; inset-inline-end: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 18px;
    border: 1px solid var(--ink-line);
    border-radius: 999px;
    background: rgb(7 12 24 / 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-on-dark);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 16px 40px -10px rgb(0 0 0 / 0.5);
    transform: translateY(140%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .js .sticky-cta.is-visible { transform: none; }
}

/* ---------- ≤480: small phone (360 baseline) ---------- */
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  body { font-size: 1rem; }
  .header-inner { gap: 12px; }
  .brand-name { font-size: 1.125rem; }
  /* Keep the hero CTA above the fold on a 360×640 screen (barra do navegador inclusa). */
  .hero { padding-block: 40px 56px; }
  .hero h1 { font-size: 2.125rem; }
  .hero-sub { margin: 16px 0 22px; font-size: 1.0625rem; }
  .hero .cta-row .btn, .final-cta .cta-row .btn { width: 100%; }
  .feature, .tier, .plan { padding: 24px 20px; }
  .tier .btn { align-self: stretch; }
  .badge { padding-inline-end: 12px; font-size: 0.875rem; }
  .faq details p { padding-inline-end: 0; }
  .guarantees { flex-direction: column; align-items: flex-start; }
  .cta-steps { flex-direction: column; align-items: stretch; }
  /* Header CTA is a repeated action: keep it one line on small screens. */
  .header-actions .btn { padding-inline: 14px; font-size: 0.875rem; }
}

/* ==========================================================
   Phone & tablet polish
   ========================================================== */
.cta-steps li::before { flex: none; }
.sec-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--radius); }

@media (max-width: 1024px) {
  .cta-steps { grid-template-columns: 1fr; max-width: 520px; }
}

@media (max-width: 768px) {
  /* Inputs and selects at 16px so iOS Safari doesn't zoom on focus */

  /* Hero: tighter rhythm so the first screen reaches the CTA */
  .hero { padding-block: 40px 56px; }
  .hero .eyebrow { font-size: 0.75rem; letter-spacing: 0.05em; }
  .hero-sub { margin: 18px 0 24px; }
  .hero-chips { margin-top: 22px; padding-top: 18px; }

  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Features: compact cards (icon beside title) */
  .feature { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 20px; }
  .feature-icon { margin: 0; }
  .feature h3 { margin: 0; font-size: 1.125rem; }
  .feature p { grid-column: 1 / -1; margin-top: 12px; }
  .feature::after { top: 16px; inset-inline-end: 16px; }

  /* Tour tabs: one swipeable row instead of a ragged wrap */
  .tour-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .tour-tabs::-webkit-scrollbar { display: none; }
  /* Fade the right edge so a cut-off tab reads as "swipe for more" */
  .tour-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .tour-tabs [role="tab"] { flex: none; scroll-snap-align: start; }
  .tour-screen { padding: 44px 16px 20px; }

  /* Data tables become labelled rows (no clipped columns) */
  .diff-table thead, .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .diff-table, .diff-table tbody, .diff-table tr, .compare, .compare tbody, .compare tr { display: block; width: 100%; min-width: 0; }
  .diff-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .diff-table th, .diff-table td { padding: 0; border: 0; white-space: normal; }
  .diff-table tbody th { grid-column: 1 / -1; }
  .diff-table td[data-label] { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 0.875rem; }
  .diff-table td[data-label]::after {
    content: attr(data-label);
    display: block;
    order: -1;
    width: 100%;
    color: var(--text-muted);
    font: 600 0.6875rem var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .diff-table .ok, .diff-table .bad, .diff-table .warn { gap: 6px; }

  .compare-wrap { overflow: visible; }
  .compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px; border-bottom: 1px solid var(--line); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare th, .compare td { padding: 0; border: 0; }
  .compare tbody th { grid-column: 1 / -1; font-size: 1rem; }
  .compare td { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 10px; border-radius: var(--radius-sm); background: var(--paper); font-size: 0.875rem; }
  .compare td.col-us { background: rgb(79 139 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(79 139 255 / 0.25); }
  .compare td::before { margin: 0; }
  .compare td[data-label]::after {
    content: attr(data-label);
    display: block;
    order: -1;
    width: 100%;
    color: var(--text-muted);
    font: 600 0.6875rem/1.3 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Security: four short cards in a swipeable row with a peek of the next one */
  .sec-scroll {
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  .sec-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; gap: 12px; }
  .sec-item { scroll-snap-align: start; }

  .cta-steps li { font-size: 0.875rem; }
}

@media (max-width: 600px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(2.375rem, 9.5vw, 2.75rem); }
  .btn-lg { padding-inline: 18px; font-size: 1rem; }
  .compare tr { grid-template-columns: 1fr 1fr; }
  .compare td.col-us { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Tour → live demo link ---------- */
.btn-ink { background: var(--ink-950); color: #fff; }
@media (hover: hover) { .btn-ink:hover { background: var(--ink-700); } }
.tour-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 28px; text-align: center; }
.tour-more p { color: var(--text-muted); font-size: 0.9375rem; }

/* Small laptops (1025–1199px): long nav labels (Russian, Spanish, Portuguese…) need the room,
   so the header keeps only the logo mark and tightens the links. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .site-header .brand-name { display: none; }
  .site-header .brand { min-width: 44px; justify-content: center; }
  .header-inner { gap: 16px; }
  .nav-panel { gap: 12px; }
  .nav-links a { padding-inline: 8px; font-size: 0.875rem; }
}

/* Narrow phones: long "Log in" + "Start free" labels (German, Russian, Spanish…)
   don't fit next to the menu button, so Log in moves into the menu. */
@media (max-width: 400px) {
  .js .header-login { display: none; }
  .js .nav-login-item { display: list-item; }
}

/* ==========================================================
   Languages (set on <html lang/dir> by js/i18n.js and src/view.php)
   ========================================================== */

/* Native system fonts for scripts the display font doesn't cover. Latin brand
   names and figures keep Bricolage / the UI font; the rest falls through. */
:root:lang(zh) { --font-script: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC"; }
:root:lang(ja) { --font-script: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP"; }
:root:lang(ko) { --font-script: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR"; }
:root:lang(ar) { --font-script: "Segoe UI", "Geeza Pro", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma; }
:root:lang(hi) { --font-script: "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", "Mangal"; }
:root:is(:lang(zh), :lang(ja), :lang(ko), :lang(ar), :lang(hi)) {
  --font-display: "Bricolage Grotesque", var(--font-script), ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, var(--font-script), sans-serif;
}
/* Tight tracking and compact line height suit Latin headlines only: connected (Arabic)
   and tall (Devanagari) scripts and CJK need normal spacing and more room. */
:root:is(:lang(zh), :lang(ja), :lang(ko), :lang(ar), :lang(hi)) * { letter-spacing: normal !important; }
:root:is(:lang(ar), :lang(hi)) :is(h1, h2, h3, .scan-total-value, .price-amount) { line-height: 1.35; }
:root:is(:lang(ar), :lang(hi)) body { line-height: 1.75; }
:root:is(:lang(zh), :lang(ja)) { line-break: strict; }
:root:lang(ko) { word-break: keep-all; }
/* Headlines: break between phrases, never inside a word. Japanese gets the browser's
   phrase segmentation; Chinese headlines break at spaces and punctuation only. */
:root:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
:root:lang(zh) :is(h1, h2, h3) { word-break: keep-all; overflow-wrap: anywhere; }

/* Right-to-left (Arabic): layout already uses logical properties; these are the
   pieces with a direction of their own. */
/* (pseudo-elements can't go inside :is(), so they are listed one by one) */
[dir="rtl"] .btn-arrow::after, [dir="rtl"] .footer-contact::after, [dir="rtl"] .link-btn::after,
[dir="rtl"] .tasks-next::after, [dir="rtl"] .toolkit-open::after, [dir="rtl"] .auth-back::before,
[dir="rtl"] .tool-back::before { scale: -1 1; }
[dir="rtl"] .site-header::after { transform-origin: 100% 50%; }
[dir="rtl"] .demo-select { background-position: left 12px center; }
[dir="rtl"] .lang-pop { transform-origin: top left; }
[dir="rtl"] .demo-select { padding: 0 14px 0 34px; }
[dir="rtl"] .tour-tabs { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); }
[dir="rtl"] .demo-nav ul { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); }
/* Brand names, amounts and code-like labels stay left-to-right inside Arabic text */
[dir="rtl"] :is(.scan-total-value, .price-amount, .tile-value) { direction: ltr; unicode-bidi: isolate; }
@media (hover: hover) { [dir="rtl"] .btn-arrow:hover::after { transform: translateX(-4px); } }