/* Genius Acquisition — design system v3. One stylesheet, no build step. */

/* Inter, served from this site (no request to Google). */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600 700; font-style: normal; font-display: swap; src: url("../fonts/Inter-SemiBold.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 500 600; font-style: normal; font-display: swap; src: url("../fonts/InterDisplay-SemiBold.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 700 800; font-style: normal; font-display: swap; src: url("../fonts/InterDisplay-Bold.woff") format("woff"); }

:root {
  --ink: #0c1b3f;
  --ink-2: #26365c;
  --slate: #55627d;
  --muted: #6b7891;
  --paper: #ffffff;
  --mist: #f4f6fb;
  --mist-2: #eaeef6;
  --line: #dfe5ef;
  --line-strong: #c5cfdf;
  --night: #0c1b3f;
  --night-2: #13265a;

  --violet: #3b6cff;
  --violet-ink: #2650e6;
  --violet-tint: #ecf1ff;
  --blue: #3b6cff;
  --cyan: #22c79a;
  --cyan-tint: #e4f8f1;
  --green: #0e7a52;
  --green-tint: #e5f5ee;
  --red: #b42840;
  --red-tint: #fdedf0;
  --amber: #9a5b00;

  /* Brand: navy + electric blue from the logo, with a light touch of mint. */
  --brand-gradient: linear-gradient(100deg, #3b6cff 0%, #5a8bff 55%, #7db0ff 100%);
  --brand-gradient-light: linear-gradient(92deg, #7f9cff 0%, #a9cbff 62%, #8ff0d0 100%);
  --button-gradient: linear-gradient(100deg, #4673ff 0%, #2f5bf2 100%);
  --spark: #3b6cff;
  --mint: #2ed3a4;
  --space: #081331;
  --space-2: #0c1b3f;

  --font-display: "Inter Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --shadow-1: 0 1px 2px rgba(12, 27, 63, .06), 0 2px 8px rgba(12, 27, 63, .05);
  --shadow-2: 0 2px 4px rgba(12, 27, 63, .05), 0 18px 40px -18px rgba(12, 27, 63, .30);
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--violet-ink); text-underline-offset: 3px; }
a:hover { color: var(--violet-ink); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; margin: 0; color: var(--ink); }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); line-height: 1.03; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.7rem, 3.3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.035em; }
h3 { font-size: 1.12rem; line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); z-index: 100; }
.skip-link:focus { top: 12px; color: #fff; }
.gradient-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.5) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, background-color .2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.logo { display: block; width: auto; }
.brand:hover { color: var(--ink); }
.nav { display: flex; align-items: center; gap: 22px; }
.nav-link { color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav-link:hover { color: var(--ink); }
.lang-switch { display: inline-flex; padding: 3px; background: var(--mist); border-radius: 999px; font-size: .78rem; font-weight: 600; }
.lang-switch a { padding: 4px 9px; border-radius: 999px; color: var(--slate); text-decoration: none; }
.lang-switch a[aria-current="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }
/* Home: the header sits on the night sky. */
.page-home .site-header { background: #081331; }
.page-home .site-header.is-scrolled { border-bottom-color: rgba(255,255,255,.08); }
.page-home .site-header .brand, .page-home .site-header .brand:hover { color: #fff; }
.page-home .site-header, .night, .hx, .site-footer.is-dark { --spark: #4f7dff; }
.page-home .nav-link { color: #c9d3ee; }
.page-home .nav-link:hover { color: #fff; }
.page-home .lang-switch { background: rgba(255,255,255,.08); }
.page-home .lang-switch a { color: #a9b6d8; }
.page-home .lang-switch a[aria-current="true"] { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
@media (max-width: 820px) { .nav .nav-link { display: none; } .nav { gap: 10px; } .site-header .logo { height: 38px; } }
@media (max-width: 400px) { .nav .btn-small { display: none; } }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: 600 1rem/1 var(--font-body); padding: 15px 22px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s; }
.btn-primary { background: var(--button-gradient); color: #fff; box-shadow: 0 8px 22px -10px rgba(59, 108, 255, .6); }
.btn-primary:hover { background: var(--button-gradient); filter: brightness(1.08); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(59, 108, 255, .75); }
.btn-glow { box-shadow: 0 8px 26px -8px rgba(58, 92, 255, .8), 0 0 0 1px rgba(255,255,255,.08) inset; }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { color: var(--ink); transform: translateY(-1px); }
.btn-small { padding: 10px 14px; font-size: .9rem; border-radius: 10px; }
.btn-block { width: 100%; }
.btn .spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn.is-busy .spinner { display: inline-block; }
.btn.is-busy { cursor: progress; transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Scan form ---------- */
.scan-modes { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); }
.scan-mode { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--slate); font: 500 .9rem var(--font-body); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.scan-mode[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }
.scan-field { display: flex; gap: 6px; padding: 6px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: calc(var(--r) + 6px); box-shadow: var(--shadow-2); transition: border-color .15s, box-shadow .15s; }
.scan-field:focus-within { border-color: var(--violet); box-shadow: 0 0 0 5px var(--violet-tint), var(--shadow-2); }
.scan-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.05rem; color: var(--ink); padding: 12px 14px; }
.scan-field input::placeholder { color: var(--muted); }
.scan-hint { margin-top: 10px; font-size: .88rem; color: var(--slate); }
.scan-examples { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .86rem; color: var(--slate); }
.scan-examples button { font: inherit; color: var(--ink-2); background: transparent; border: 1px dashed var(--line-strong); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.scan-examples button:hover { border-style: solid; border-color: var(--violet); color: var(--violet-ink); }
.scan-options { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .9rem; color: var(--slate); }
.scan-options label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.scan-options select { font: inherit; font-size: .9rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 7px 10px; }
.field-error { margin-top: 10px; color: var(--red); font-weight: 500; font-size: .95rem; }
.busy-note { display: none; margin-top: 12px; color: var(--violet-ink); font-weight: 500; font-size: .95rem; }
.scan-form.is-busy .busy-note { display: block; }
.trust-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; list-style: none; font-size: .9rem; color: var(--slate); }
.trust-row li { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg { color: var(--green); flex: none; }

/* On the night sky (home). */
.scan-form--dark { max-width: 780px; margin: 0 auto; }
.scan-form--dark .scan-modes { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.scan-form--dark .scan-mode { color: #a9b6d8; }
.scan-form--dark .scan-mode:hover { color: #fff; }
.scan-form--dark .scan-mode[aria-pressed="true"] { background: #fff; color: var(--ink); }
.scan-form--dark .scan-field { background: rgba(12, 24, 64, .78); border: 1px solid rgba(140, 165, 255, .32); border-radius: 22px; padding: 7px; box-shadow: 0 0 0 6px rgba(47,107,255,.07), 0 24px 70px -24px rgba(47,107,255,.7), 0 0 90px -20px rgba(59,108,255,.4); }
.scan-form--dark .scan-field:focus-within { border-color: rgba(127, 156, 255, .85); box-shadow: 0 0 0 6px rgba(127,156,255,.16), 0 24px 70px -24px rgba(47,107,255,.8), 0 0 90px -20px rgba(59,108,255,.45); }
.scan-form--dark .scan-field input { color: #fff; font-size: 1.1rem; }
.scan-form--dark .scan-field input::placeholder { color: #7f8bb3; }
.scan-form--dark .scan-field .btn { border-radius: 16px; padding: 16px 24px; }
.scan-form--dark .scan-hint, .scan-form--dark .scan-options, .scan-form--dark .trust-row, .scan-form--dark .scan-examples { color: #a9b6d8; justify-content: center; }
.scan-deliverables { margin-top: 10px; font-size: .86rem; color: var(--slate); letter-spacing: .01em; }
.scan-deliverables span { font-weight: 600; color: var(--ink-2); margin-right: 4px; }
.scan-form--dark .scan-deliverables { color: #93a1c9; }
.scan-form--dark .scan-deliverables span { color: #dbe3ff; }
.scan-market { margin-top: 12px; font-size: .86rem; color: var(--slate); }
.scan-market summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; padding: 4px 10px; border-radius: 999px; transition: background-color .2s; }
.scan-market summary::-webkit-details-marker { display: none; }
.scan-market summary:hover { background: var(--mist); }
.scan-market b { font-weight: 600; color: var(--ink-2); }
.scan-market-edit { text-decoration: underline; text-underline-offset: 3px; }
.scan-market[open] .scan-market-edit { display: none; }
.scan-market select { display: block; margin: 6px auto 0; max-width: 100%; font: inherit; font-size: .84rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px; }
.scan-form--dark .scan-market { text-align: center; color: #93a1c9; }
.scan-form--dark .scan-market summary:hover { background: rgba(255,255,255,.06); }
.scan-form--dark .scan-market b { color: #dbe3ff; }
.scan-form--dark .scan-market select { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.2); }
.scan-form--dark .scan-market select option { color: var(--ink); }
.scan-form--dark .scan-examples button { color: #dbe3ff; border-color: rgba(255,255,255,.24); }
.scan-form--dark .scan-examples button:hover { border-color: #8ff0d0; color: #fff; background: rgba(143,240,208,.08); }
.scan-form--dark .scan-options select { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.2); }
.scan-form--dark .scan-options select option { color: var(--ink); }
.scan-form--dark .trust-row svg { color: #4fe0b0; }
.scan-form--dark .busy-note { color: #c4d4ff; }
.scan-form--dark .field-error { color: #ff9aa9; }
@media (max-width: 560px) {
  .scan-modes { display: flex; width: 100%; } .scan-mode { flex: 1; justify-content: center; padding: 9px 6px; font-size: .84rem; } .scan-mode svg { display: none; }
  .scan-field { flex-direction: column; border-radius: var(--r-lg); } .scan-field .btn { width: 100%; }
  .scan-form--dark .scan-field { border-radius: 18px; }
}

/* ---------- Provenance markers ---------- */
.prov { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; letter-spacing: .01em; color: var(--slate); white-space: nowrap; }
.prov::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; }
.prov-observed::before { background: var(--ink); }
.prov-estimated::before { border: 1.5px solid var(--ink); }
.prov-ai { color: var(--violet-ink); }
.prov-ai::before { background: linear-gradient(90deg, var(--violet) 50%, transparent 50%); border: 1.5px solid var(--violet); }
.prov-test { color: #0f8a68; }
.prov-test::before { background: var(--cyan); border-radius: 2px; transform: rotate(45deg); width: 8px; height: 8px; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-tint { background: var(--mist); }
.section-night { background: var(--night); color: #cbd6ea; }
.section-night h2, .section-night h3 { color: #fff; }
.section-head { max-width: 44rem; margin-bottom: clamp(30px, 5vw, 52px); }
.section-head p { margin-top: 14px; font-size: 1.1rem; color: var(--slate); }
.section-night .section-head p { color: #a9b8d4; }

/* ---------- Shared bits ---------- */
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--violet-ink); margin-bottom: 18px; }
.kicker .rays { width: 22px; height: 22px; }
.center { text-align: center; }
.section-head.center { margin-left: auto; margin-right: auto; }
.eyebrow { font: 600 .8rem var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--violet); margin-bottom: 14px; }
.grad { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin-top: 16px; font-size: 1.1rem; color: var(--slate); max-width: 34em; }

/* ---------- Night sky (hero, proof, final) ---------- */
.hx, .night { position: relative; overflow: hidden; background: var(--space); color: #b6c2e2; }
.hx .grad, .night .grad { background: var(--brand-gradient-light); -webkit-background-clip: text; background-clip: text; }
.hx-sky { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 45% at 12% 0%, rgba(59, 108, 255, .42), transparent 70%),
    radial-gradient(45% 40% at 92% 6%, rgba(70, 230, 190, .13), transparent 70%),
    radial-gradient(70% 45% at 50% 62%, rgba(47, 107, 255, .26), transparent 72%); }
.hx-sky::before { content: ""; position: absolute; inset: 0; opacity: .55; animation: twinkle 7s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.2px 1.2px at 24px 38px, #fff, transparent), radial-gradient(1px 1px at 140px 90px, #d9e4ff, transparent),
    radial-gradient(1.4px 1.4px at 210px 22px, #fff, transparent), radial-gradient(1px 1px at 80px 160px, #e3ebff, transparent),
    radial-gradient(1.2px 1.2px at 260px 190px, #fff, transparent), radial-gradient(1px 1px at 180px 250px, #d9e4ff, transparent);
  background-size: 300px 300px; mask-image: linear-gradient(#000 40%, transparent); -webkit-mask-image: linear-gradient(#000 40%, transparent); }
.hx-sky::after { content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(rgba(140, 165, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 165, 255, .12) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(60% 50% at 50% 30%, #000, transparent); -webkit-mask-image: radial-gradient(60% 50% at 50% 30%, #000, transparent); }
@keyframes twinkle { from { opacity: .35; } to { opacity: .7; } }
.night .wrap, .hx .wrap { position: relative; }
.night h2, .night h3, .hx h1 { color: #fff; }
.night .section-head p, .night .lede { color: #a9b6d8; }

/* ---------- Hero ---------- */
.hx { padding: clamp(36px, 7vw, 96px) 0 clamp(56px, 8vw, 104px); }
@media (max-width: 560px) { .pill { font-size: .8rem; padding: 7px 14px; border-radius: 16px; line-height: 1.35; text-align: left; } .hx-sub { margin-bottom: 26px; } .scan-form--dark .scan-hint { font-size: .84rem; } }
.hx-inner { text-align: center; max-width: 960px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #dbe3ff; font-size: .88rem; font-weight: 500; backdrop-filter: blur(6px); }
.pill svg { color: #8ff0d0; }
.hx h1 { margin: 22px auto 0; max-width: 17ch; font-size: clamp(2.35rem, 5.8vw, 4.5rem); line-height: 1.04; }
.hx h1 .grad { display: inline; }
.hx-sub { margin: 22px auto 34px; max-width: 40em; font-size: clamp(1.04rem, 1.6vw, 1.2rem); color: #b6c2e2; }

/* ---------- Demo: one diagnostic per kind of business ---------- */
.demo { margin-top: clamp(56px, 7vw, 88px); }
.demo-title { text-align: center; margin: 0 auto 10px; max-width: 22ch; font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: #fff; }
.demo-label { text-align: center; color: #93a1c9; font-size: .95rem; margin-bottom: 16px; }
.demo-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.demo-tabs button { position: relative; overflow: hidden; font: 500 .93rem var(--font-body); color: #c9d3ee; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); padding: 9px 17px; border-radius: 999px; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
.demo-tabs button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.demo-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 10px 30px -10px rgba(127, 156, 255, .7); }
.demo-tabs button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--brand-gradient); }
.demo.is-auto .demo-tabs button[aria-selected="true"]::after { animation: tabTimer 6s linear forwards; }
@keyframes tabTimer { to { width: 100%; } }

.demo-stage { position: relative; perspective: 1600px; }
.demo-stage::before { content: ""; position: absolute; left: 15%; right: 15%; bottom: -40px; height: 120px; background: radial-gradient(closest-side, rgba(47,107,255,.55), transparent); filter: blur(30px); pointer-events: none; }
.demo-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr); align-items: center; }
.demo-panel[hidden] { display: none; }

.demo-main { grid-column: 2; position: relative; z-index: 2; background: #fff; color: var(--ink); border-radius: 18px; overflow: hidden; text-align: left;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -30px rgba(0,0,0,.7), 0 0 120px -30px rgba(58,92,255,.6); }
.dm-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--mist); }
.dm-dots { display: flex; gap: 5px; } .dm-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.dm-title { display: inline-flex; align-items: center; gap: 6px; font: 600 .88rem var(--font-display); }
.dm-tag { margin-left: auto; font-size: .7rem; font-weight: 600; color: var(--slate); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 8px; background: var(--paper); white-space: nowrap; }
.dm-body { position: relative; padding: 20px 22px 6px; }
.dm-head { margin-bottom: 14px; }
.dm-biz { font: 600 1.15rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dm-query { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--mist); font-size: .83rem; color: var(--slate); }
.dm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.dm-stats div { padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column-reverse; gap: 2px; }
.dm-stats dt { font-size: .74rem; line-height: 1.3; color: var(--slate); display: flex; gap: 6px; align-items: baseline; }
.dm-stats dt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.dm-stats dd { margin: 0; font: 700 1.6rem/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.s-red dt::before { background: #e5484d; } .s-blue dt::before { background: #3b6cff; } .s-sky dt::before { background: #7db0ff; } .s-mint dt::before { background: var(--mint); }
.dm-count { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.dm-count b { font: 600 2.5rem/1 var(--font-display); letter-spacing: -0.04em; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dm-count span { font-size: .8rem; color: var(--slate); }
.dm-rows { list-style: none; display: grid; gap: 8px; }
.dm-rows li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 12px; border-radius: 12px; background: var(--mist); border-left: 3px solid var(--line-strong); }
.dm-rows p { font-size: .93rem; line-height: 1.45; color: var(--ink-2); }
.dm-kind { justify-self: start; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; margin-top: 1px; }
.r-p1 { border-left-color: #e5484d !important; } .r-p1 .dm-kind { background: #fdecee; color: #b42840; }
.r-pos { border-left-color: #3b6cff !important; } .r-pos .dm-kind { background: var(--violet-tint); color: var(--violet-ink); }
.r-seo { border-left-color: #2f6bff !important; } .r-seo .dm-kind { background: #e8efff; color: #1f4fd1; }
.r-offer { border-left-color: #f0a020 !important; } .r-offer .dm-kind { background: #fff3dc; color: #8a5200; }
.r-maps { border-left-color: #22c79a !important; } .r-maps .dm-kind { background: var(--cyan-tint); color: #0b7a5e; }
.r-angle { border-left-color: #12a272 !important; } .r-angle .dm-kind { background: var(--green-tint); color: var(--green); }
.dm-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; margin-top: 14px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--slate); }
.dm-foot b { color: var(--ink); }
.dm-foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--violet); white-space: nowrap; }
.dm-foot a:hover svg { transform: translateX(3px); } .dm-foot a svg { transition: transform .2s; }

.demo-side { position: relative; z-index: 1; width: 100%; max-width: 300px; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.95); color: var(--ink); text-align: left; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); opacity: .9; }
.demo-left { grid-column: 1; grid-row: 1; justify-self: end; margin-right: -36px; padding-right: 52px; transform: rotateY(16deg) translateZ(-70px); transform-origin: right center; }
.demo-right { grid-column: 3; grid-row: 1; justify-self: start; margin-left: -36px; padding-left: 52px; transform: rotateY(-16deg) translateZ(-70px); transform-origin: left center; }
.ds-title { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.demo-left ul, .ds-angles { list-style: none; }
.demo-left li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: .84rem; }
.demo-left li span { font-weight: 600; min-width: 0; line-height: 1.25; }
.demo-left li.is-you span { color: var(--violet); }
.badge { font-size: .67rem; font-weight: 600; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.b-ads { background: var(--ink); color: #fff; } .b-maps { background: var(--cyan-tint); color: #0b7a5e; } .b-org { background: var(--violet-tint); color: var(--violet-ink); } .b-you { background: var(--red-tint); color: var(--red); }
.ds-angles li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 7px 0; font-size: .83rem; }
.ds-angles li span { font-weight: 600; }
.ds-angles li b { font-weight: 600; color: var(--slate); }
.ds-angles li i { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--ink) var(--w), var(--mist-2) var(--w)); }
.ds-angles li.is-open b { color: var(--green); }
.ds-angles li.is-open i { background: repeating-linear-gradient(90deg, #12a272 0 6px, transparent 6px 11px); opacity: .7; }

/* Switching example: the report "re-scans". */
.demo-panel.is-entering .demo-main { animation: panelIn .5s cubic-bezier(.2,.7,.2,1) both; }
.demo-panel.is-entering .demo-side { animation: sideIn .6s .1s ease both; }
.demo-panel.is-entering .dm-rows li { animation: rowIn .45s cubic-bezier(.2,.7,.2,1) both; }
.demo-panel.is-entering .dm-rows li:nth-child(1) { animation-delay: .15s; } .demo-panel.is-entering .dm-rows li:nth-child(2) { animation-delay: .27s; }
.demo-panel.is-entering .dm-rows li:nth-child(3) { animation-delay: .39s; } .demo-panel.is-entering .dm-rows li:nth-child(4) { animation-delay: .51s; }
.demo-panel.is-entering .dm-body::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--brand-gradient); box-shadow: 0 0 18px 4px rgba(47,107,255,.35); animation: beam 1s ease forwards; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes sideIn { from { opacity: 0; } }
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } }
@keyframes beam { from { top: 0; opacity: 1; } to { top: 100%; opacity: 0; } }

@media (max-width: 1080px) {
  .demo-panel { grid-template-columns: minmax(0, 1fr); max-width: 660px; margin: 0 auto; }
  .demo-main { grid-column: 1; }
  .demo-side { display: none; }
}
@media (max-width: 640px) {
  .demo-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 22px; padding: 2px var(--gutter) 8px; scrollbar-width: none; }
  .demo-tabs::-webkit-scrollbar { display: none; }
  .demo-tabs button { flex: none; }
  .dm-body { padding: 16px 16px 4px; }
  .dm-rows li { grid-template-columns: 1fr; gap: 6px; }
  .dm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-foot { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
  .dm-dots { display: none; }
}

/* ---------- The research an agency would do ---------- */
.agency { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.race { margin-top: 30px; display: grid; gap: 12px; max-width: 470px; }
.race-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: .9rem; }
.race-row span { font-weight: 600; }
.race-row b { font-weight: 500; font-size: .86rem; color: var(--slate); }
.race-row:last-child b { color: var(--violet-ink); font-weight: 600; }
.race-bar { position: relative; height: 10px; border-radius: 99px; background: var(--mist-2); overflow: hidden; }
.race-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; transition: width 2.4s cubic-bezier(.3,.6,.3,1); }
.race-slow::after { background: repeating-linear-gradient(90deg, #b8c3d6 0 8px, #d5dce8 8px 14px); }
.race-fast::after { background: var(--brand-gradient); transition-duration: .7s; }
.race.is-in .race-slow::after, html:not(.js) .race-slow::after { width: 100%; }
.race.is-in .race-fast::after, html:not(.js) .race-fast::after { width: 8%; }
.tasks { list-style: none; display: grid; gap: 4px; padding: 18px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.tasks li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-weight: 500; color: var(--muted); transition: color .35s ease, background-color .35s ease; transition-delay: calc(var(--i) * 260ms); }
.tick { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: transparent; transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease; transition-delay: inherit; }
.tasks.is-in li, html:not(.js) .tasks li { color: var(--ink); }
.tasks.is-in li:last-child { background: var(--violet-tint); }
.tasks.is-in .tick, html:not(.js) .tasks .tick { background: var(--brand-gradient); border-color: transparent; color: #fff; transform: scale(1.05); }
@media (max-width: 900px) { .agency { grid-template-columns: 1fr; } }

/* ---------- Outcomes ---------- */
.outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.outcome { position: relative; overflow: hidden; padding: 26px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease, opacity .5s ease; }
.outcome::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-gradient); opacity: 0; transition: opacity .25s; }
.outcome:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.outcome:hover::before { opacity: 1; }
.o-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 18px; color: #fff; background: var(--brand-gradient); box-shadow: 0 12px 26px -12px rgba(47,107,255,.7); }
.outcome h3 { margin-bottom: 8px; font-size: 1.1rem; }
.outcome p { color: var(--slate); font-size: .96rem; }
@media (max-width: 1000px) { .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .outcomes { grid-template-columns: 1fr; gap: 10px; } .outcome { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; padding: 18px; } .o-icon { grid-row: span 2; margin: 0; } .outcome h3 { margin-bottom: 4px; } }

/* ---------- Evidence ---------- */
.sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; overflow: hidden; }
.source { padding: 28px; background: #0b1a45; transition: background-color .3s; }
.source:hover { background: #102358; }
.source > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; color: #a9c0ff; background: rgba(127,156,255,.1); border: 1px solid rgba(127,156,255,.28); transition: background .3s, color .3s; }
.source:hover > span { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.source h3 { font-size: 1.05rem; margin-bottom: 6px; }
.source p { font-size: .93rem; color: #93a1c9; }
@media (max-width: 860px) { .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } .source { padding: 22px; } }
@media (max-width: 480px) { .sources { grid-template-columns: 1fr; } }

.chain { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.chain-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; padding: 20px 24px; }
.chain-row + .chain-row { border-top: 1px solid var(--line); }
.chain-row > .prov { padding-top: 4px; }
.chain-row .lead { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.9vw, 1.32rem); letter-spacing: -0.02em; line-height: 1.3; }
.chain-note { margin-top: 12px; font-size: .86rem; color: var(--slate); }
.chain-dark { max-width: 860px; margin: clamp(36px, 5vw, 56px) auto 0; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow: 0 30px 80px -40px rgba(47,107,255,.6); backdrop-filter: blur(4px); }
.chain-dark .chain-row + .chain-row { border-top-color: rgba(255,255,255,.08); }
.chain-dark p { color: #d5ddf5; } .chain-dark .lead { color: #fff; }
.chain-dark .prov { color: #a9b6d8; }
.chain-dark .prov-observed::before { background: #fff; }
.chain-dark .prov-ai { color: #a9bfff; } .chain-dark .prov-ai::before { border-color: #a9bfff; background: linear-gradient(90deg, #a9bfff 50%, transparent 50%); }
.chain-dark .prov-test { color: #8ff0d0; }
.night .chain-note { color: #7f8bb3; }
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .chain-row { grid-template-columns: 1fr; gap: 6px; padding: 18px; } }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 940px; margin: 0 auto; align-items: stretch; }
.plan { border: 1px solid var(--line); border-radius: 22px; padding: 32px; background: var(--paper); display: flex; flex-direction: column; gap: 16px; }
.plan-featured { position: relative; color: #c9d3ee; border: 1px solid transparent; background: linear-gradient(var(--space-2), var(--space)) padding-box, var(--brand-gradient) border-box; box-shadow: 0 30px 70px -30px rgba(58,92,255,.6); }
.plan-featured h3, .plan-featured .price { color: #fff; }
.plan .price { font: 600 2.7rem/1 var(--font-display); letter-spacing: -0.04em; }
.plan .price small { font: 500 .95rem var(--font-body); color: var(--slate); letter-spacing: 0; }
.plan-featured .price small { color: #9fb0cf; }
.plan ul { list-style: none; display: grid; gap: 9px; font-size: .97rem; }
.plan li { display: flex; gap: 10px; }
.plan li svg { flex: none; margin-top: 4px; color: var(--green); }
.plan-featured li svg { color: #4fe0b0; }
.plan .btn { margin-top: auto; }
.plan-quote { margin-top: 4px; padding-left: 12px; border-left: 3px solid #8ff0d0; color: #dbe3ff; font-size: .95rem; }
.plan-note { margin-top: auto; font-size: .87rem; color: var(--slate); }
.plan-featured .plan-note { color: #9fb0cf; }
.radar-line { margin-top: 24px; font-size: .95rem; color: var(--slate); }
@media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan { padding: 24px 20px; } .plan .btn { white-space: normal; text-align: center; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--shadow-1); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 20px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg); transition: transform .2s; flex: none; margin-top: -4px; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq details p { padding: 0 20px 18px; color: var(--ink-2); }

/* ---------- Final call ---------- */
.final { text-align: center; }
.final h2 { margin: 0 auto; max-width: 17ch; font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
.final .lede { margin: 16px auto 30px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 48px; font-size: .92rem; color: var(--slate); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; }
.site-footer .brand { margin-bottom: 14px; }
.link-button { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; }
.link-button:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Cookie banner: one compact bar ---------- */
.consent { position: fixed; z-index: 80; left: 50%; bottom: 14px; width: min(860px, calc(100% - 24px)); transform: translate(-50%, 12px); padding: 12px 12px 12px 18px; border-radius: 14px; background: rgba(8, 19, 49, .96); color: #c9d3ee; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px -16px rgba(8,19,49,.55); backdrop-filter: blur(8px); --spark: #4f7dff; opacity: 0; transition: opacity .25s ease, transform .25s ease; max-height: calc(100vh - 28px); overflow-y: auto; }
.consent.is-open { opacity: 1; transform: translate(-50%, 0); }
.consent.is-ch [data-only="eu"], .consent.is-eu [data-only="ch"] { display: none; }
.consent-main { display: flex; align-items: center; gap: 16px; }
.consent-text { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: .86rem; line-height: 1.4; }
.consent-text svg { flex: none; }
.consent-text > span { flex: 1 1 220px; min-width: 0; }
.consent-text a { color: #fff; text-underline-offset: 3px; white-space: nowrap; }
.consent-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.consent-btn { min-width: 104px; min-height: 38px; padding: 8px 16px; border-radius: 10px; font: 600 .88rem var(--font-body); color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: background-color .2s, border-color .2s; }
.consent-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
.consent-btn.is-main { background: var(--button-gradient); border-color: transparent; }
.consent-more, .consent-skip { padding: 4px 2px; background: none; border: 0; color: #aebbd8; font: 500 .82rem var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.consent-more:hover, .consent-skip:hover { color: #fff; }
.consent-skip { display: block; margin: -4px 0 6px auto; }
.consent-prefs { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.consent-prefs[hidden] { display: none; }
.consent-cat { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; cursor: pointer; }
.consent-cat input { width: 18px; height: 18px; margin-top: 2px; accent-color: #4f7dff; flex: none; }
.consent-cat b { display: block; color: #fff; }
.consent-cat small { color: #9fb0cf; }
.consent-prefs .consent-btn { justify-self: end; }
@media (max-width: 640px) { .consent { padding: 12px; bottom: 10px; } .consent-main { flex-direction: column; align-items: stretch; gap: 10px; } .consent-actions { justify-content: space-between; } .consent-actions .consent-btn { flex: 1; max-width: 60%; } .consent-prefs .consent-btn { justify-self: stretch; } }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Processing ---------- */
.processing { padding: clamp(36px, 6vw, 72px) 0 90px; }
.processing .wrap { max-width: 740px; }
.processing h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
.processing-sub { margin: 12px 0 26px; color: var(--slate); }
.processing-sub strong { color: var(--ink); }
.progress { height: 6px; background: var(--mist-2); border-radius: 3px; overflow: hidden; margin-bottom: 28px; }
.progress span { display: block; height: 100%; background: var(--brand-gradient); border-radius: 3px; transition: width .6s ease; }
.checks { list-style: none; display: grid; gap: 10px; }
.check { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--muted); transition: border-color .3s, box-shadow .3s, background-color .3s; }
.check-label { font-weight: 500; }
.check-label small { display: block; margin-top: 3px; font-size: .86rem; font-weight: 400; color: var(--violet-ink); min-height: 1.3em; transition: opacity .25s; }
.check-label small.is-fading { opacity: 0; }
.check:not([data-state="active"]) .check-label small { display: none; }
.check-result:empty { display: none; }
.check-result { font: 600 .95rem var(--font-display); color: var(--ink); text-align: right; }
.check-icon { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); position: relative; }
.check[data-state="active"] { color: var(--ink); border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-tint); }
.check[data-state="active"] .check-icon { border-color: var(--violet); border-right-color: transparent; animation: spin .9s linear infinite; }
.check[data-state="done"] { color: var(--ink); background: var(--mist); }
.check[data-state="done"] .check-icon { background: var(--ink); border-color: var(--ink); }
.check[data-state="done"] .check-icon::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check-result:not(:empty) { animation: pop .35s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } }
.processing-foot { margin-top: 24px; font-size: .9rem; color: var(--slate); }
@media (max-width: 560px) { .check { grid-template-columns: 30px minmax(0, 1fr); } .check-result { grid-column: 2; text-align: left; } }

/* ---------- Report ---------- */
.report-head { padding: clamp(28px, 5vw, 52px) 0 30px; background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%); border-bottom: 1px solid var(--line); }
.crumb { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--violet-ink); background: var(--violet-tint); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.report-head h1 { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 22ch; }
.report-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--slate); font-size: .95rem; }
.report-meta strong { color: var(--ink); font-weight: 600; }
.confirm { margin-top: 16px; display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); max-width: 50rem; font-size: .97rem; }
.confirm .prov { padding-top: 3px; }

.market { margin-top: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.market-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-weight: 600; flex-wrap: wrap; }
.market-title span { font-size: .85rem; color: var(--slate); font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat { padding: 18px 20px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat dt { font-size: .82rem; color: var(--slate); }
.stat dd { margin: 4px 0 0; font: 600 1.9rem/1.1 var(--font-display); letter-spacing: -0.03em; }
.stat dd small { font: 500 .85rem var(--font-body); color: var(--slate); letter-spacing: 0; }
.stat dd.alert { color: var(--red); }
.market-line { padding: 14px 20px; background: var(--night); color: #fff; font-family: var(--font-display); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.market-line a { color: #fff; font-family: var(--font-body); font-size: .9rem; }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat + .stat { border-left: 0; }
  .stat { border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.report-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); padding-top: 40px; padding-bottom: 100px; }
.report-nav { position: sticky; top: 88px; align-self: start; }
.report-nav ol { list-style: none; display: grid; gap: 2px; }
.report-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-size: .93rem; }
.report-nav a:hover, .report-nav a.is-current { background: var(--mist); color: var(--ink); }
.report-nav .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 .72rem var(--font-display); background: var(--mist-2); color: var(--slate); flex: none; }
.report-nav a.is-current .n { background: var(--ink); color: #fff; }
.report-nav .lock { margin-left: auto; width: 13px; height: 13px; color: var(--muted); }
@media (max-width: 960px) {
  .report-layout { grid-template-columns: minmax(0, 1fr); }
  .report-nav { position: sticky; top: 68px; z-index: 20; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .report-nav ol { display: flex; gap: 6px; }
  .report-nav a { white-space: nowrap; border: 1px solid var(--line); background: var(--paper); }
}

.chapter { padding-bottom: 54px; scroll-margin-top: 140px; }
.chapter + .chapter { border-top: 1px solid var(--line); padding-top: 46px; }
.chapter-head { margin-bottom: 20px; }
.chapter-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--slate); margin-bottom: 8px; }
.chapter-head .eyebrow .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 600 .72rem var(--font-display); }
.chapter-head h2 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); }
.chapter-head p { margin-top: 8px; color: var(--slate); max-width: 44rem; }
.note { margin-top: 14px; font-size: .88rem; color: var(--slate); }
.count-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--ink-2); background: var(--mist); border-radius: 999px; padding: 4px 10px; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow-2); }
.card h3 { font-size: 1.05rem; }
.card .domain { font-size: .86rem; color: var(--slate); word-break: break-all; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; border-radius: 999px; padding: 3px 9px; border: 1px solid var(--line); color: var(--ink-2); background: var(--paper); white-space: nowrap; }
.chip-ads { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-maps { background: var(--cyan-tint); border-color: transparent; color: #0b7a5e; }
.chip-org { background: var(--violet-tint); border-color: transparent; color: var(--violet-ink); }
.chip-dim { color: var(--muted); border-style: dashed; }
.chip-strong { background: var(--green-tint); border-color: transparent; color: var(--green); }
.kv { display: grid; gap: 9px; font-size: .9rem; border-top: 1px solid var(--line); padding-top: 12px; margin: 0; }
.kv dt { font-size: .76rem; font-weight: 600; color: var(--slate); }
.kv dd { margin: 1px 0 0; overflow-wrap: anywhere; }
.quote { font-family: var(--font-display); font-weight: 500; font-size: .98rem; line-height: 1.4; color: var(--ink); }
.card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--violet-ink); text-decoration: none; }
.card-link svg { width: 14px; height: 14px; }

/* Locked content: real placeholders, never the hidden text */
.lock-icon { width: 15px; height: 15px; flex: none; }
.locked { position: relative; border: 1px dashed var(--line-strong); background: repeating-linear-gradient(135deg, var(--paper) 0 9px, var(--mist) 9px 18px); color: var(--slate); text-decoration: none; }
a.locked:hover { border-color: var(--violet); color: var(--ink); }
.locked .ghost { display: block; height: .8em; border-radius: 4px; background: var(--mist-2); margin: 7px 0; }
.ghost.w40 { width: 40%; } .ghost.w60 { width: 60%; } .ghost.w75 { width: 75%; } .ghost.w90 { width: 90%; }
.locked-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); font-size: .95rem; }
.locked-name { filter: blur(0); }
.locked-row { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--r); }
.locked-row + .locked-row { margin-top: 8px; }
.locked-row .ghost { flex: 1; margin: 0; max-width: 220px; }
.more-tile { display: grid; place-items: center; text-align: center; min-height: 120px; border-radius: var(--r-lg); padding: 18px; gap: 4px; }
.more-tile strong { font: 600 1.6rem var(--font-display); color: var(--ink); }

/* Ads */
.ad { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ad-top { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--slate); }
.ad-top strong { color: var(--ink); }
.ad-sponsored { font-size: .72rem; font-weight: 700; color: var(--ink); }
.ad h3 { font: 600 1.02rem/1.35 var(--font-body); letter-spacing: 0; color: #1a3fb0; }
.ad p { font-size: .92rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ad-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8rem; color: var(--slate); }
.ad-angle { display: flex; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); font-size: .85rem; }
.history { margin-top: 16px; display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); background: var(--night); color: #cbd6ea; flex-wrap: wrap; }
.history strong { font: 600 1.9rem/1 var(--font-display); color: #fff; letter-spacing: -0.03em; }
.history p { flex: 1; min-width: 200px; font-size: .95rem; }
.history p b { color: #fff; }

/* Angles */
.angle-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.angle-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.angle-top h3 { font-size: 1.15rem; }
.share { font: 600 1.5rem var(--font-display); letter-spacing: -0.03em; }
.bar { height: 8px; background: var(--mist-2); border-radius: 4px; overflow: hidden; margin: 10px 0 12px; }
.bar span { display: block; height: 100%; background: var(--ink); border-radius: 4px; width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.bar.is-own span { background: var(--violet); }
.examples { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.examples li { padding: 10px 12px; background: var(--mist); border-radius: var(--r-sm); font-size: .92rem; }
.examples li small { display: block; color: var(--slate); font-size: .78rem; margin-bottom: 2px; }
.angles-list { display: grid; gap: 10px; }
.angle-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 4px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.angle-row .bar { grid-column: 1 / -1; margin: 4px 0 0; height: 6px; }
.angle-row small { grid-column: 1 / -1; color: var(--slate); font-size: .85rem; }
.own-tag { font-size: .74rem; font-weight: 600; color: var(--violet-ink); background: var(--violet-tint); border-radius: 999px; padding: 2px 8px; margin-left: 8px; white-space: nowrap; }
.genius-card { position: relative; border-radius: var(--r-lg); padding: 22px; background: var(--paper); border: 1px solid transparent; background-image: linear-gradient(var(--paper), var(--paper)), var(--brand-gradient); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: var(--shadow-1); }
.genius-card h3 { font-size: 1.2rem; margin: 8px 0 6px; }
.genius-card .hook { font-family: var(--font-display); font-size: 1.05rem; color: var(--violet-ink); margin-bottom: 10px; }
.genius-card p { color: var(--ink-2); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

/* Gap + opportunity */
.finding { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.finding-title { padding: 20px 22px 4px; }
.finding-title h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.02em; }
.finding .chain { border: 0; border-radius: 0; box-shadow: none; }
.opportunity { border: 0; box-shadow: var(--shadow-2); position: relative; }
.opportunity::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand-gradient); }
.opportunity .finding-title { padding-top: 26px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.hook-line { font-family: var(--font-display); font-weight: 600; }
details.evidence { border-top: 1px solid var(--line); }
details.evidence summary { cursor: pointer; list-style: none; padding: 14px 22px; font-weight: 600; font-size: .93rem; display: flex; justify-content: space-between; gap: 12px; }
details.evidence summary::-webkit-details-marker { display: none; }
details.evidence summary::after { content: "+"; font: 600 1.2rem/1 var(--font-display); color: var(--slate); }
details.evidence[open] summary::after { content: "−"; }
.evidence-list { list-style: none; padding: 0 22px 18px; display: grid; gap: 8px; }
.evidence-list li { padding: 11px 13px; background: var(--mist); border-radius: var(--r-sm); font-size: .92rem; }
.evidence-list .src { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--slate); margin-bottom: 3px; }
.evidence-list .src strong { color: var(--ink); }
.locked-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.locked-topics a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; border: 1px dashed var(--line-strong); color: var(--ink-2); text-decoration: none; font-size: .88rem; font-weight: 500; background: var(--paper); }
.locked-topics a:hover { border-color: var(--violet); color: var(--ink); }

/* Paywall */
.paywall { border-radius: 22px; overflow: hidden; background: var(--night); color: #cbd6ea; box-shadow: var(--shadow-2); scroll-margin-top: 140px; position: relative; }
.paywall::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand-gradient); }
.paywall-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
.paywall-buy .btn { white-space: normal; text-align: center; }
.paywall-main { padding: clamp(24px, 4vw, 40px); }
.paywall-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: .86rem; font-weight: 600; color: #8ff0d0; }
.paywall h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.1rem); max-width: 22ch; }
.paywall-lists { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.paywall-lists h3 { color: #9fb0cf; font: 600 .82rem var(--font-body); letter-spacing: .02em; margin-bottom: 10px; }
.paywall-lists ul { list-style: none; display: grid; gap: 8px; font-size: .95rem; }
.paywall-lists li { display: flex; gap: 9px; align-items: flex-start; }
.paywall-lists li svg { flex: none; margin-top: 3px; }
.seen svg { color: #4fe0b0; }
.left svg { color: #7f9cff; }
.left li { color: #fff; }
.paywall-buy { padding: clamp(24px, 4vw, 40px); background: rgba(255,255,255,.04); border-left: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.paywall-buy .price { font: 600 2.8rem/1 var(--font-display); color: #fff; letter-spacing: -0.04em; }
.paywall-buy small { color: #9fb0cf; font-size: .87rem; }
.paywall-buy form { display: grid; gap: 10px; }
.accept { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; line-height: 1.45; color: #b6c2e2; cursor: pointer; }
.accept input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: #4f7dff; }
.accept a, .consent-note a { color: #c4d4ff; }
.consent-note { font-size: .78rem; line-height: 1.45; color: #9fb0cf; }
.paywall-buy input[type=email] { font: inherit; padding: 13px 14px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; }
.paywall-buy input::placeholder { color: #8fa2c2; }
.notice { padding: 12px 14px; border-radius: var(--r); font-size: .93rem; }
.notice-ok { background: rgba(79,224,176,.12); color: #c9f7e6; }
.notice-error { background: var(--red-tint); color: var(--red); }
.notice-info { background: var(--violet-tint); color: var(--violet-ink); margin-bottom: 24px; }
@media (max-width: 860px) { .paywall-inner { grid-template-columns: 1fr; } .paywall-buy { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); } }
@media (max-width: 520px) { .paywall-lists { grid-template-columns: 1fr; } }

/* Sticky mobile CTA */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--night); color: #fff; box-shadow: 0 16px 40px -12px rgba(12,27,63,.6); transform: translateY(140%); transition: transform .3s ease; }
.sticky-cta.is-visible { transform: none; }
.sticky-cta p { font-size: .88rem; line-height: 1.3; }
.sticky-cta b { display: block; font-family: var(--font-display); font-size: 1rem; }
@media (max-width: 960px) { .sticky-cta { display: flex; } body.has-sticky { padding-bottom: 84px; } }

/* Data used (proof) */
.proof { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.proof > summary { cursor: pointer; list-style: none; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.proof > summary::-webkit-details-marker { display: none; }
.proof > summary h2 { font-size: 1.15rem; }
.proof > summary span { font-size: .88rem; color: var(--slate); }
.proof > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg); transition: transform .2s; flex: none; }
.proof[open] > summary::after { transform: rotate(-135deg); }
.proof-body { padding: 0 22px 22px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs button { font: 500 .9rem var(--font-body); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.serp { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.serp-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--mist); border-bottom: 1px solid var(--line); font-size: .9rem; }
.serp-block { padding: 4px 0; }
.serp-block + .serp-block { border-top: 1px solid var(--line); }
.serp-block h3 { font: 600 .76rem var(--font-body); color: var(--slate); letter-spacing: 0; padding: 8px 14px 2px; }
.serp-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 14px; font-size: .9rem; }
.serp-row .rk { color: var(--muted); font-size: .8rem; }
.serp-row .who { min-width: 0; }
.serp-row .who strong { font-weight: 600; }
.serp-row .who span { display: block; color: var(--slate); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp-row .tag { font-size: .76rem; font-weight: 600; color: var(--slate); white-space: nowrap; }
.serp-row.is-own { background: var(--violet-tint); }
.serp-row.is-own strong { color: var(--violet-ink); }
.serp-status { margin: 0; padding: 11px 14px; font-weight: 600; font-size: .9rem; border-top: 1px solid var(--line); }
.serp-status.absent { background: var(--red-tint); color: var(--red); }
.serp-status.present { background: var(--violet-tint); color: var(--violet-ink); }
.keyword-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; color: var(--ink); background: var(--paper); font-weight: 500; text-decoration: none; font-size: .92rem; }
.keyword-chip:hover { border-color: var(--ink); color: var(--ink); }
.keyword-chip span { font-size: .78rem; color: var(--slate); }
.keywords { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; font-size: .9rem; color: var(--slate); }
.dir-list { list-style: none; display: grid; gap: 8px; }
.dir-list li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); }
.dir-list span { color: var(--slate); font-size: .88rem; }
.about { list-style: disc; padding-left: 20px; color: var(--slate); display: grid; gap: 6px; font-size: .92rem; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }

/* Tables */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 580px; }
table.data th, table.data td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-size: .8rem; color: var(--slate); font-weight: 600; background: var(--mist); }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.is-own td { background: var(--violet-tint); }

/* Action plan + Radar */
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.action { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; background: var(--paper); }
.action h3 { font-size: 1.02rem; margin-bottom: 10px; }
.action h3 span { color: var(--slate); font-weight: 500; }
.action p { font-size: .92rem; margin-top: 8px; color: var(--ink-2); }
.action p strong { color: var(--ink); }
@media (max-width: 900px) { .actions { grid-template-columns: 1fr; } }
.radar-cta { padding: clamp(24px, 4vw, 40px); border-radius: 22px; background: var(--night); color: #cbd6ea; }
.radar-cta h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.1rem); max-width: 20ch; }
.radar-cta p { margin-top: 12px; max-width: 40rem; }

.empty { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 22px; background: var(--paper); }
.empty h3 { font-size: 1.05rem; margin-bottom: 6px; }
.empty p { color: var(--slate); font-size: .95rem; }

/* Reveal on scroll (report only, subtle) */
.js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Failure, legal, admin */
.narrow { max-width: 760px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gutter); }
.narrow h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 10px; }
.narrow h2 { font-size: 1.25rem; margin-top: 38px; scroll-margin-top: 90px; }
.narrow h3 { font-size: 1.02rem; margin-top: 22px; }
.narrow p, .narrow ul, .narrow table { margin-top: 12px; color: var(--ink-2); }
.narrow ul { padding-left: 1.2em; display: grid; gap: 6px; }
.narrow .updated { color: var(--slate); font-size: .92rem; margin-top: 0; }
.narrow .intro { font-size: 1.08rem; color: var(--ink); }
.legal-card { margin-top: 18px; padding: 18px 20px; border-radius: var(--r); background: var(--mist); border: 1px solid var(--line); }
.legal-card p { margin-top: 4px; }
.legal-card p:first-child { margin-top: 0; }
.legal-toc { margin-top: 24px; padding: 16px 20px; border-left: 3px solid var(--violet); background: var(--paper); font-size: .95rem; }
.legal-toc ol { padding-left: 1.2em; display: grid; gap: 4px; }
.narrow table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.narrow th, .narrow td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
.narrow th { font-weight: 600; color: var(--ink); }
.table-scroll { overflow-x: auto; }
.placeholder { background: #fff6d6; padding: 0 4px; border-radius: 3px; }
.admin-table td, .admin-table th { white-space: nowrap; }

/* Mobile: locked competitors become compact rows so the free preview stays short. */
@media (max-width: 560px) {
  .card.locked { padding: 13px 16px; display: flex; align-items: center; justify-content: flex-start; }
  .card.locked .ghost { display: none; }
  .cards .card.locked + .card.locked { margin-top: -4px; }
}

/* ---------- See · Understand · Act ---------- */
.see-act { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; position: relative; counter-reset: none; }
.see-act::before { content: ""; position: absolute; top: 46px; left: 16%; right: 16%; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 14px); z-index: 0; }
.see-act li { position: relative; z-index: 1; padding: 26px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 10px; transition: transform .25s ease, box-shadow .25s ease, opacity .5s ease; }
.see-act li:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.sa-num { position: absolute; top: 18px; right: 20px; font: 700 2.4rem/1 var(--font-display); color: var(--mist-2); }
.sa-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: var(--brand-gradient); box-shadow: 0 12px 26px -12px rgba(59,108,255,.7); }
.see-act h3 { font-size: 1.3rem; }
.see-act p { color: var(--slate); font-size: .97rem; flex: 1; }
.see-act .prov { align-self: flex-start; }
@media (max-width: 860px) { .see-act { grid-template-columns: 1fr; } .see-act::before { display: none; } }

/* ---------- What Genius understood (+ correction) ---------- */
.understood { margin: 18px 0 22px; padding: 14px 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.understood.is-new { animation: pop .4s ease; }
.understood-text { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: .98rem; color: var(--ink); }
.understood-fix { margin-top: 8px; }
.understood-fix summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--violet); list-style: none; display: inline-block; }
.understood-fix summary::-webkit-details-marker { display: none; }
.understood-fix form { display: grid; gap: 8px; margin-top: 10px; }
.understood-fix label { font-size: .9rem; color: var(--ink-2); }
.understood-fix textarea { font: inherit; font-size: .95rem; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); resize: vertical; }
.understood-fix .btn { justify-self: start; }
.understood-fix small { color: var(--slate); font-size: .8rem; }
.report-head .understood { max-width: 780px; }

/* ---------- Report v3.5: roles, platforms, ad examples, teasers, guarantee ---------- */
.chip-role { background: var(--mist); color: var(--ink-2); border: 1px solid var(--line); }
.chip-role.is-alt { background: #fff3dc; color: #8a5200; border-color: #f6dca8; }
.platforms { margin-top: 18px; padding: 14px 16px; border-radius: var(--r); border: 1px dashed var(--line-strong); background: var(--paper); }
.platforms p { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.platforms ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.platforms li { display: inline-flex; gap: 8px; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--mist); font-size: .86rem; }
.platforms li span { color: var(--slate); font-size: .78rem; }
.ad-examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; }
.ad-examples figure { margin: 0; padding: 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); }
.ad-examples img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; background: var(--mist); }
.ad-examples figcaption { margin-top: 8px; font-size: .8rem; color: var(--slate); }
.prov-now { color: #8a5200; }
.prov-now::before { background: #f0a020; border-radius: 2px; }
.metric-line { font-size: .92rem; color: var(--ink-2); }
.teasers { margin-top: 22px; padding: 20px; border-radius: var(--r-lg); background: var(--mist); border: 1px solid var(--line); display: grid; gap: 10px; }
.teasers-title { font: 600 1.05rem var(--font-display); color: var(--ink); }
.teaser { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.teaser:hover { border-color: var(--violet); transform: translateX(2px); color: var(--ink); }
.teaser svg { grid-row: span 2; color: var(--violet); }
.teaser-cat { font-size: .76rem; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: .04em; }
.teaser-text { font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ghost-inline { display: inline-block; flex: 1; max-width: 260px; height: .8em; border-radius: 4px; background: linear-gradient(90deg, var(--mist-2), #dfe6f3, var(--mist-2)); filter: blur(1.5px); }
.teasers .btn { justify-self: start; margin-top: 4px; }
.paywall-sub { margin-top: 8px; color: #b6c2e2; font-size: 1rem; }
.paywall-lists .left li.is-key span { color: #fff; font-weight: 600; }
.guarantee { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; line-height: 1.45; color: #dbe3ff; padding: 10px 12px; border-radius: 10px; background: rgba(46, 211, 164, .08); border: 1px solid rgba(46, 211, 164, .25); }
.guarantee svg { color: var(--mint); flex: none; margin-top: 2px; }
.report-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--slate); }
.report-foot h3 { font-size: .95rem; margin-bottom: 6px; }
.report-foot ul { padding-left: 1.1em; display: grid; gap: 4px; margin-bottom: 10px; }

/* ---------- "Report a problem" (discreet) and what Genius could not conclude ---------- */
.problem { padding: 8px 22px 14px; font-size: .84rem; color: var(--slate); }
.problem summary { cursor: pointer; width: fit-content; list-style: none; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.problem summary::-webkit-details-marker { display: none; }
.problem summary:hover { color: var(--ink-2); }
.problem form { display: grid; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--mist); max-width: 520px; }
.problem fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.problem fieldset label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); cursor: pointer; }
.problem-comment { display: grid; gap: 4px; width: 100%; min-width: 0; }
.problem-comment input { width: 100%; min-width: 0; }
.problem-comment input { font: inherit; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); min-height: 40px; }
.problem .btn { justify-self: start; }
.problem-thanks { color: var(--green); font-weight: 500; }
.report-foot .problem { padding: 4px 0 0; }
.prov-contrast { color: #2348c8; }
.prov-contrast::before { background: linear-gradient(90deg, var(--ink) 50%, var(--violet) 50%); }
.insufficient { margin-top: 16px; padding: 14px 18px; border-radius: var(--r); border: 1px dashed var(--line-strong); font-size: .92rem; color: var(--ink-2); }
.insufficient summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.insufficient ul { margin: 10px 0 6px; padding-left: 1.1em; display: grid; gap: 6px; }
.insufficient p { color: var(--slate); font-size: .86rem; }
.problem [hidden] { display: none !important; }
.chip-priority.is-p1 { background: rgba(46, 211, 164, .14); border-color: rgba(15, 138, 104, .35); color: #0b6e53; }
.chip-priority.is-p3 { color: var(--slate); }
.quote-orig { display: block; margin-top: 3px; font-size: .78rem; font-style: normal; color: var(--slate); font-weight: 400; }
.quote-orig span { font-style: italic; }
.teaser-text.is-clear { font-weight: 600; color: var(--ink); line-height: 1.35; }

/* ---------- Your Genius plan ---------- */
.gplan { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.gplan-step { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); transition: border-color .2s, background-color .2s; }
.gplan-step:first-child { border-color: var(--violet); box-shadow: 0 10px 30px -18px rgba(59, 108, 255, .5); }
.gplan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.gplan-when { font: 700 .78rem var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--violet-ink); }
.gplan-step h3 { font-size: 1.12rem; display: flex; gap: 10px; align-items: baseline; }
.gplan-n { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .82rem; }
.gplan-do { padding: 12px 14px; border-radius: 12px; background: var(--violet-tint); border: 1px solid #d6e0ff; }
.gplan-do-label { font: 700 .74rem var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--violet-ink); margin-bottom: 4px; }
.gplan-do p { font-size: .96rem; color: var(--ink); }
.gplan-do .hook-line { display: block; margin-top: 6px; }
.gplan-why { font-size: .93rem; color: var(--ink-2); }
.gplan-why > summary { cursor: pointer; color: var(--violet-ink); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.gplan-why > summary::-webkit-details-marker { display: none; }
.gplan-why > summary::after { content: "+"; font-weight: 700; }
.gplan-why[open] > summary::after { content: "–"; }
.gplan-why p { margin-top: 6px; }
.gplan-done { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font: 600 .9rem var(--font-body); cursor: pointer; }
.gplan-done-box { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-strong); color: transparent; transition: background-color .2s, border-color .2s, color .2s; }
.gplan-step.is-done { background: #f2fbf6; border-color: #a6e3c3; box-shadow: none; }
.gplan-step.is-done h3 { color: var(--slate); }
.gplan-step.is-done .gplan-done { border-color: #a6e3c3; color: #1d7a4b; }
.gplan-step.is-done .gplan-done-box { background: #22a565; border-color: #22a565; color: #fff; }
.gplan-more { display: inline-block; margin-top: 8px; font-size: .88rem; }
.gplan-watch { margin-top: 18px; padding: 16px 18px; border-radius: var(--r); background: var(--mist); font-size: .92rem; }
.gplan-watch h3 { font-size: .98rem; margin-bottom: 6px; }
.gplan-watch ul { padding-left: 1.1em; display: grid; gap: 4px; }
@media (max-width: 640px) { .gplan-step { padding: 16px; } }

/* ---------- Diagnosis (top of the report) ---------- */
.diagnosis { margin-top: 22px; padding: 22px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(12, 27, 63, .35); }
.diag-kicker { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 600; color: var(--violet-ink); text-transform: uppercase; letter-spacing: .05em; }
.diagnosis h2 { font-size: clamp(1.35rem, 3.6vw, 1.85rem); line-height: 1.2; margin: 8px 0 6px; }
.diagnosis h2 strong { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.diag-sub { color: var(--ink-2); font-size: 1rem; }
.diagnosis .stats { margin-top: 16px; }
.diag-places { margin-top: 10px; font-size: .82rem; color: var(--slate); }
.diagnosis .btn { margin-top: 16px; }
.proof-divider { margin: 56px 0 8px; padding-top: 28px; border-top: 1px solid var(--line); }
.proof-divider h2 { font-size: 1.35rem; }
.proof-divider p { color: var(--slate); margin-top: 6px; max-width: 60ch; }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.stats-4 .stat { padding: 14px 16px; }
.stats-4 .stat dd { font-size: 1.6rem; }
@media (max-width: 900px) { .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paywall-single { grid-template-columns: 1fr; }
.paywall-single li span b { color: #fff; font-weight: 600; }
.paywall-single li span { color: #b6c2e2; }
.paywall-single ul { gap: 12px; }

/* ---------- Ready-to-use assets (paid) ---------- */
.asset-h { font-size: 1rem; margin: 6px 0 10px; }
.paid-by { color: #0b6e53; font-weight: 500; }
.asset-neg { margin: 12px 0 20px; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.assets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.asset-card { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); display: grid; gap: 12px; align-content: start; }
.asset-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.copy-btn { font: 600 .8rem var(--font-body); color: var(--violet-ink); background: var(--violet-tint); border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; cursor: pointer; min-height: 32px; }
.copy-btn:hover { border-color: var(--violet); }
.copy-btn.is-done { color: #0b6e53; background: rgba(46, 211, 164, .14); }
.gad-preview { position: relative; padding: 36px 14px 14px; border-radius: var(--r); background: var(--mist); }
.gad-sponsored { font-size: .75rem; font-weight: 700; color: var(--ink); margin-right: 8px; }
.gad-url { font-size: .8rem; color: var(--slate); }
.gad-title { margin-top: 6px; color: var(--violet-ink); font-size: 1.05rem; line-height: 1.3; }
.gad-desc { margin-top: 4px; font-size: .9rem; color: var(--ink-2); }
.asset-copy { font-size: .9rem; }
.asset-copy ol { padding-left: 1.3em; margin: 4px 0 10px; display: grid; gap: 3px; }
.asset-copy small, .asset-copy li small { color: var(--slate); font-size: .72rem; margin-left: 4px; }
.asset-note { font-size: .88rem; color: var(--ink-2); }
.mad-preview { border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; }
.mad-text { padding: 12px 14px; font-size: .94rem; white-space: pre-line; }
.mad-visual { padding: 26px 14px; background: linear-gradient(135deg, var(--mist), #e6ecfb); color: var(--slate); font-size: .86rem; font-style: italic; text-align: center; }
.mad-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--mist); font-size: .9rem; }
.mad-cta { flex: none; font-size: .8rem; font-weight: 600; padding: 6px 10px; border-radius: 6px; background: #e4e8f0; }
.week { list-style: none; padding: 0; display: grid; gap: 12px; }
.week-post { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); }
.week-day { display: grid; gap: 6px; align-content: start; justify-items: start; }
.week-hook { font-weight: 600; }
.week-text { white-space: pre-line; margin-top: 4px; font-size: .95rem; }
.week-cta { margin-top: 6px; font-weight: 600; color: var(--violet-ink); }
@media (max-width: 640px) { .week-post { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Free: preview of the deliverables ---------- */
.deliver { margin-top: 28px; }
.deliver h3 { font-size: 1.15rem; margin-bottom: 4px; }
.deliver > p { color: var(--slate); }
.deliver-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.deliver-card { position: relative; display: grid; gap: 10px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: var(--ink); overflow: hidden; }
.deliver-card:hover { border-color: var(--violet); color: var(--ink); }
.deliver-mock { display: grid; gap: 6px; padding: 12px; border-radius: var(--r); background: var(--mist); filter: blur(.6px); }
.deliver-mock .ghost { height: 9px; border-radius: 4px; background: #d9e0ee; display: block; }
.deliver-mock .ghost.t { height: 12px; background: #b9c8f5; width: 85%; }
.deliver-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.deliver-days span { padding: 8px 4px; border-radius: 8px; background: var(--paper); font-size: .7rem; text-align: center; color: var(--slate); }
.deliver-card strong { display: flex; gap: 8px; align-items: center; font-size: .98rem; }
.deliver-card strong svg { color: var(--violet); flex: none; }
.deliver-card small { color: var(--slate); font-size: .85rem; line-height: 1.4; }
.market-facts { margin-top: 12px; display: grid; gap: 6px; padding-left: 0; list-style: none; }
.market-facts li { display: flex; gap: 8px; align-items: flex-start; font-size: .97rem; color: var(--ink-2); }
.market-facts li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--violet); }
.deliver + .paywall { margin-top: 28px; }
.kw-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.kw-list li { padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); display: grid; gap: 4px; }
.kw-list li div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kw-list p { font-size: .9rem; color: var(--ink-2); }
@media (max-width: 640px) { .week-day { grid-auto-flow: column; justify-content: start; align-items: center; } .week-day .copy-btn { margin-left: auto; } }

/* ---------- Market in figures ---------- */
.mkt-stats .stat dd small { font-size: .8rem; }
.stat dd small.stat-unit { display: block; margin-top: 2px; }
.share-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.share-list li { display: grid; grid-template-columns: minmax(90px, 180px) 1fr 52px; gap: 10px; align-items: center; font-size: .92rem; }
.share-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.share-bar { height: 10px; border-radius: 99px; background: var(--mist-2); overflow: hidden; }
.share-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--brand-gradient); transition: width .8s ease; }
.share-list li.is-own .share-name { font-weight: 700; color: var(--ink); }
.share-list li.is-own .share-bar span { background: var(--red, #d93a3a); }
.share-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.mkt-note, .mkt-source { margin-top: 8px; font-size: .8rem; color: var(--slate); }
.mkt-source { margin-top: 18px; }
.season { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 120px; padding: 8px 0; }
.season-col { min-width: 0; display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; justify-items: center; gap: 4px; }
.season-bar { width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px; background: #c9d5f6; align-self: end; }
.season-bar.is-peak { background: var(--violet); }
.season-col small { font-size: .66rem; color: var(--slate); max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.season-tip { font-weight: 600; color: var(--ink-2); }
@media (max-width: 640px) { .share-list li { grid-template-columns: 96px 1fr 46px; font-size: .86rem; } }
.kw-figures { font-weight: 600; color: var(--ink) !important; }
.budget-card { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; padding: 20px; margin-bottom: 22px; border-radius: var(--r-lg); background: var(--night); color: #cbd6ea; }
.budget-kicker { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #8ff0d0; }
.budget-main { font: 600 1.6rem/1.2 var(--font-display); color: #fff; margin: 6px 0 8px; }
.budget-main span { font: 500 1rem var(--font-body); color: #9fb0cf; }
.budget-card p { font-size: .93rem; }
.calc { padding: 14px; border-radius: var(--r); background: rgba(255,255,255,.06); display: grid; gap: 8px; align-content: start; }
.calc label { font-size: .9rem; color: #fff; font-weight: 600; }
.calc-row { display: flex; align-items: center; gap: 8px; }
.calc-row input { width: 90px; font: inherit; padding: 9px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; min-height: 42px; }
.calc-out { color: #dbe3ff; }
.bonus-box { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: var(--r-lg); background: rgba(46, 211, 164, .1); border: 1px solid rgba(15, 138, 104, .3); }
@media (max-width: 760px) { .budget-card { grid-template-columns: 1fr; } }

/* ===================== v4.1 — Verdict first ===================== */
.verdict { padding: clamp(20px, 3.5vw, 32px); position: relative; overflow: hidden; }
.verdict::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand-gradient); }
.verdict h2 { font-size: clamp(1.45rem, 3.8vw, 2.05rem); line-height: 1.18; letter-spacing: -0.02em; max-width: 30ch; }
.verdict-scope { color: var(--slate); font-size: .92rem; margin-top: 4px; }
.verdict-label { margin-top: 20px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--slate); }
.proof-tiles { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.proof-tiles li { padding: 14px 16px; border-radius: var(--r); background: var(--mist); border: 1px solid var(--line); display: grid; gap: 4px; align-content: start; }
.proof-tiles b { font: 700 clamp(1.5rem, 3.4vw, 1.9rem)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.proof-tiles span { font-size: .88rem; line-height: 1.4; color: var(--ink-2); }
.proof-tiles li.is-alert { background: var(--red-tint); border-color: #f4c9d1; }
.proof-tiles li.is-alert b { color: var(--red); }
.proof-tiles li.is-wide b { font-size: 1.05rem; line-height: 1.3; letter-spacing: 0; }
.verdict-first { margin-top: 4px; }
.vf-title { margin-top: 8px; font: 600 clamp(1.1rem, 2.6vw, 1.3rem)/1.3 var(--font-display); color: var(--ink); padding-left: 14px; border-left: 3px solid var(--violet); }
.vf-why { margin-top: 8px; color: var(--ink-2); font-size: .95rem; }
.verdict .btn { margin-top: 18px; }
@media (max-width: 640px) {
  .proof-tiles { grid-template-columns: 1fr; }
  .proof-tiles li { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
  .proof-tiles b { min-width: 3.2ch; }
}

/* Locked priorities shown as work areas */
.worksites .teaser { grid-template-columns: 28px 1fr; }
.worksites .ws-state { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--violet-tint); color: var(--violet-ink); }
.worksites .teaser.is-open .ws-state { background: var(--green-tint); color: var(--green); }
.worksites .teaser.is-open { background: transparent; border-style: dashed; }
.worksites .teaser svg { grid-row: auto; color: inherit; }

/* Paywall extras */
.paywall-bonus { font-size: .86rem; color: #8ff0d0; font-weight: 500; }
.final-unlock { margin-top: 30px; padding: 22px; border-radius: var(--r-lg); background: var(--violet-tint); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.final-unlock p { font-weight: 600; color: var(--ink); max-width: 46ch; }

/* Market: "up to" before a figure */
.stat dd small.stat-pre { font-size: .8rem; display: block; margin-bottom: 2px; }

/* Visibility, search by search */
.vis-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vis-list li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 6px 16px; align-items: center; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); }
.vis-search strong { display: block; font-weight: 600; line-height: 1.3; }
.vis-search small { color: var(--slate); font-size: .82rem; }
.vis-who { font-size: .88rem; color: var(--ink-2); line-height: 1.4; }
.vis-you { justify-self: end; display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.vis-list li.is-missed { border-left: 3px solid var(--red); }
.vis-list li.is-missed .vis-you { background: var(--red-tint); color: var(--red); }
.vis-list li.is-seen .vis-you { background: var(--green-tint); color: var(--green); }
@media (max-width: 720px) {
  .vis-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .vis-who { grid-column: 1 / -1; grid-row: 2; }
}
.vis-actions { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.vis-actions li { overflow-wrap: anywhere; }
.vis-actions li { padding: 12px 16px; border-radius: var(--r); background: var(--mist); }
.vis-actions strong { display: block; }
.vis-actions p { margin-top: 2px; font-size: .92rem; color: var(--ink-2); }
.page-offer { margin-top: 14px; display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r-lg); border: 1px solid #cbd8ff; background: linear-gradient(120deg, var(--violet-tint), #f6fbff); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.page-offer:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--ink); }
.page-offer b { display: block; font: 600 1.02rem/1.35 var(--font-display); }
.page-offer small { display: block; margin-top: 4px; color: var(--ink-2); font-size: .88rem; line-height: 1.45; }
.page-offer > svg { color: var(--violet-ink); }
.po-mock { width: 64px; height: 76px; border-radius: 8px; background: #fff; border: 1px solid var(--line); padding: 9px 8px; display: grid; gap: 6px; align-content: start; box-shadow: var(--shadow-1); }
.po-mock i { display: block; height: 6px; border-radius: 3px; background: var(--mist-2); }
.po-mock i:first-child { height: 9px; width: 80%; background: var(--violet); opacity: .55; }
.po-mock i:nth-child(3) { width: 70%; }
@media (max-width: 520px) { .page-offer { grid-template-columns: 1fr auto; } .po-mock { display: none; } }
.vis-page-link { margin-top: 12px; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }

/* Page plan (paid) */
.page-plan { max-width: 760px; }
.serp-preview { position: relative; padding: 36px 16px 14px; border-radius: var(--r); background: var(--mist); margin-bottom: 14px; }
.serp-preview small { color: var(--slate); font-size: .82rem; }
.serp-preview strong { display: block; color: var(--violet-ink); font-weight: 500; font-size: 1.08rem; line-height: 1.3; }
.serp-preview p { font-size: .9rem; color: var(--ink-2); margin-top: 2px; }
.pp-label { margin-top: 14px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }
.pp-h1 { font: 700 1.3rem/1.25 var(--font-display); margin-top: 4px; }
.pp-intro { margin-top: 4px; color: var(--ink-2); }
.pp-sections { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.pp-sections strong { display: block; }
.pp-sections span { color: var(--ink-2); font-size: .93rem; }
.pp-proof { margin: 6px 0 0; padding-left: 20px; color: var(--ink-2); }

/* Genius Radar offer (paid report only) */
.radar-offer { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 26px; align-items: center; position: relative; overflow: hidden; }
.radar-offer::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(143, 240, 208, .25); box-shadow: 0 0 0 40px rgba(143, 240, 208, .05), 0 0 0 80px rgba(143, 240, 208, .03); pointer-events: none; }
.radar-kicker { display: inline-flex; gap: 7px; align-items: center; font-size: .86rem; font-weight: 600; color: #8ff0d0; margin-top: 0 !important; }
.radar-deal { font-size: 1.02rem; color: #fff; }
.radar-deal b { font: 700 1.5rem var(--font-display); color: #8ff0d0; margin-right: 6px; }
.radar-form { display: grid; gap: 8px; position: relative; z-index: 1; }
.radar-form label { font-size: .86rem; color: #b6c2e2; }
.radar-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radar-row input { flex: 1 1 200px; font: inherit; padding: 12px 14px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: #fff; min-width: 0; }
.radar-row input::placeholder { color: #8fa2c2; }
.radar-form .consent-note { font-size: .78rem; color: #8fa2c2; margin: 0 !important; }
.radar-form .consent-note a { color: #b6c2e2; }
@media (max-width: 760px) { .radar-offer { grid-template-columns: 1fr; } }

/* ===================== v4.1 — Home: brand, motion, clarity ===================== */
/* Hero aurora: two slow brand-coloured lights behind the headline. */
.hx-aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hx-aurora i { position: absolute; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; border-radius: 50%; filter: blur(70px); opacity: .38; }
.hx-aurora i:first-child { left: -8vw; top: -12vw; background: radial-gradient(closest-side, #3b6cff, transparent); animation: auroraA 18s ease-in-out infinite alternate; }
.hx-aurora i:last-child { right: -10vw; top: 4vw; background: radial-gradient(closest-side, #2ed3a4, transparent); opacity: .22; animation: auroraB 22s ease-in-out infinite alternate; }
@keyframes auroraA { to { transform: translate(14vw, 8vw) scale(1.12); } }
@keyframes auroraB { to { transform: translate(-12vw, 10vw) scale(.92); } }

/* What Genius analyzes: a calm scrolling strip under the form. */
.hx-sources { margin: 30px auto 0; max-width: 820px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hx-marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.hx-sources:hover .hx-marquee { animation-play-state: paused; }
.hx-marquee ul { list-style: none; display: flex; gap: 10px; padding: 0 5px; margin: 0; }
.hx-marquee li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 7px 13px; border-radius: 999px; font-size: .86rem; color: #c9d3ee; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.hx-marquee li svg { color: #8ff0d0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Demo card, verdict format */
.dm-scan { position: absolute; inset: 47px 0 0 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,.92); backdrop-filter: blur(3px); font: 600 .95rem var(--font-display); color: var(--ink); opacity: 0; pointer-events: none; transition: opacity .25s; }
.demo-main.is-scanning .dm-scan { opacity: 1; }
.dm-scan-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 0 rgba(59,108,255,.6); animation: pulseDot 1s ease-out infinite; }
@keyframes pulseDot { to { box-shadow: 0 0 0 14px rgba(59,108,255,0); } }
.dm-verdict { font: 700 clamp(1.08rem, 2.2vw, 1.3rem)/1.3 var(--font-display); letter-spacing: -0.015em; color: var(--ink); margin-bottom: 14px; }
.dm-proofs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.dm-proofs li { padding: 10px 12px; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); display: grid; gap: 3px; align-content: start; }
.dm-proofs b { font: 700 1.45rem/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.dm-proofs li > span { font-size: .76rem; line-height: 1.35; color: var(--slate); }
.dm-proofs li.is-alert { background: var(--red-tint); border-color: #f4c9d1; }
.dm-proofs li.is-alert b { color: var(--red); }
.dm-first { padding: 12px 14px; border-radius: 12px; border: 1px solid #cbd8ff; background: linear-gradient(120deg, var(--violet-tint), #fff); }
.dm-label { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--violet-ink); }
.dm-first-title { margin-top: 4px; font: 600 1rem/1.35 var(--font-display); color: var(--ink); }
.dm-why { margin-top: 3px; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
.dm-locked { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.dm-locked li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--line-strong); background: repeating-linear-gradient(135deg, var(--paper) 0 9px, var(--mist) 9px 18px); font-size: .82rem; color: var(--ink-2); }
.dm-locked li svg { color: var(--violet); flex: none; }
.dm-locked li b { font-weight: 600; white-space: nowrap; }
.dm-locked li i { flex: 1; height: 8px; border-radius: 4px; background: var(--mist-2); min-width: 30px; }
.demo-panel.is-entering .dm-proofs li { animation: rowIn .45s cubic-bezier(.2,.7,.2,1) both; }
.demo-panel.is-entering .dm-proofs li:nth-child(2) { animation-delay: .1s; } .demo-panel.is-entering .dm-proofs li:nth-child(3) { animation-delay: .2s; }
.demo-panel.is-entering .dm-first { animation: rowIn .45s .3s cubic-bezier(.2,.7,.2,1) both; }
.demo-panel.is-entering .dm-locked li { animation: rowIn .45s .42s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width: 560px) {
  .dm-proofs { grid-template-columns: 1fr; }
  .dm-proofs li { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
  .dm-proofs b { min-width: 3.4ch; }
  .dm-locked li b { white-space: normal; }
}

/* Brand glow under the pointer */
.glow-card { position: relative; isolation: isolate; }
.glow-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(59,108,255,.10), transparent 60%); }
.glow-card:hover::after { opacity: 1; }

/* How it works: stepper */
.how { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 4vw, 44px); align-items: start; }
.how-steps { display: grid; gap: 10px; }
.how-steps button { position: relative; overflow: hidden; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; text-align: left; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .25s, box-shadow .25s, transform .25s; }
.how-steps button:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.how-steps button[aria-selected="true"] { border-color: #b9caff; box-shadow: 0 18px 40px -26px rgba(59,108,255,.6); }
.how-num { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--mist); color: var(--slate); transition: background .25s, color .25s; }
.how-steps button[aria-selected="true"] .how-num { background: var(--brand-gradient); color: #fff; box-shadow: 0 12px 26px -12px rgba(59,108,255,.7); }
.how-txt b { display: block; font: 600 1.08rem/1.3 var(--font-display); }
.how-txt small { display: block; margin-top: 4px; color: var(--slate); font-size: .92rem; line-height: 1.5; }
.how-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--brand-gradient); }
.how.is-auto .how-steps button[aria-selected="true"] .how-progress { animation: tabTimer 5.5s linear forwards; }
.how-stage { padding: clamp(18px, 3vw, 28px); border-radius: 22px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-2); min-height: 100%; }
#how .how-steps button { background: var(--mist); border-color: transparent; }
#how .how-steps button[aria-selected="true"] { background: var(--paper); border-color: #b9caff; }
#how .how-num { background: var(--paper); }
.how-panel.is-entering { animation: panelIn .45s cubic-bezier(.2,.7,.2,1) both; }
.how-sources { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.how-sources li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--mist); }
.how-sources li > svg { flex: none; color: var(--violet-ink); margin-top: 2px; }
.how-sources b { display: block; font-size: .93rem; }
.how-sources small { display: block; color: var(--slate); font-size: .82rem; line-height: 1.4; }
.how-stage .race { margin-top: 18px; max-width: none; }
.how-chain { box-shadow: none; }
.how-plan { list-style: none; display: grid; gap: 10px; }
.how-plan li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); border-left: 3px solid var(--violet); }
.how-plan li.is-locked { border-left-color: var(--line-strong); border-style: dashed; background: repeating-linear-gradient(135deg, var(--paper) 0 9px, var(--mist) 9px 18px); }
.hp-when { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-ink); }
.how-plan b { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.how-plan small { color: var(--slate); }
.how-plan i { display: block; height: 8px; width: 60%; border-radius: 4px; background: var(--mist-2); }
@media (max-width: 860px) {
  .how { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .how-steps button { grid-template-columns: 1fr; padding: 12px; justify-items: start; }
  .how-txt small { display: none; }
  .how-txt b { font-size: .92rem; }
  .how-num { width: 36px; height: 36px; border-radius: 11px; }
}
@media (max-width: 520px) { .how-sources { grid-template-columns: 1fr; } }

/* What the plan contains */
.inside-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.inside-card { padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 10px; transition: transform .25s, box-shadow .25s; }
.inside-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.inside-card h3 { font-size: 1.18rem; margin-top: 6px; }
.inside-card > p { color: var(--slate); font-size: .95rem; }
.inside-mock { border-radius: 16px; background: var(--mist); padding: 16px; display: grid; gap: 8px; align-content: start; min-height: 170px; position: relative; overflow: hidden; }
.mock-line { display: block; height: 9px; border-radius: 5px; background: var(--mist-2); }
.mock-line.t { height: 13px; width: 85%; background: #b9caff; }
.mock-line.s { width: 60%; }
.mock-sponsored { font-size: .74rem; font-weight: 700; color: var(--ink); }
.mock-copy { justify-self: end; margin-top: 6px; font-size: .78rem; font-weight: 600; color: var(--violet-ink); background: #fff; border-radius: 999px; padding: 4px 12px; box-shadow: var(--shadow-1); }
.mock-url { display: block; height: 8px; width: 45%; border-radius: 4px; background: #bfe6d6; }
.mock-h { justify-self: start; font: 700 .72rem var(--font-display); color: #fff; background: var(--ink); border-radius: 6px; padding: 2px 7px; margin-top: 4px; }
.mock-budget { background: var(--night); color: #cbd6ea; }
.mock-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8ff0d0; }
.mock-big { font: 700 1.7rem/1.1 var(--font-display); color: #fff; letter-spacing: -0.03em; }
.mock-big small { font: 500 .85rem var(--font-body); color: #9fb0cf; letter-spacing: 0; }
.mock-budget label { font-size: .84rem; color: #cbd6ea; display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.mock-budget label b { color: #fff; white-space: nowrap; }
.mock-budget input[type=range] { width: 100%; accent-color: #4f7dff; }
.mock-budget .calc-out { font-weight: 600; color: #fff; font-size: .92rem; min-height: 2.6em; }
.inside-more { margin-top: 22px; text-align: center; color: var(--slate); }
@media (max-width: 900px) { .inside-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* Pricing guarantee */
.plan-guarantee { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: #c9d3ee; }
.plan-guarantee svg { flex: none; margin-top: 3px; color: #4fe0b0; }
.plan-guarantee b { color: #fff; }
.plan-featured .btn { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .hx-aurora i, .hx-marquee { animation: none !important; }
}

/* ===================== v4.2 — a calmer free page ===================== */
.more-row { margin-top: 12px; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 13px 16px; border-radius: var(--r); background: var(--violet-tint); border: 1px solid #d6e0ff; color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.more-row:hover { border-color: var(--violet); transform: translateX(2px); color: var(--ink); }
.more-lock { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--violet-ink); }
.more-text b { display: block; font-weight: 600; line-height: 1.35; }
.more-text small { display: block; color: var(--ink-2); font-size: .86rem; margin-top: 1px; }
.more-go { color: var(--violet-ink); }
.teasers .more-row { margin-top: 0; background: var(--paper); }
.name-cloud { margin-top: 18px; }
.name-cloud > p { font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.name-cloud ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.name-cloud li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); font-weight: 600; font-size: .9rem; }
.nc-ads { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--ink); color: #fff; }
.platforms-more { margin-top: 18px; }
.platforms-more summary { cursor: pointer; font-weight: 600; color: var(--slate); font-size: .92rem; }

.share-val { white-space: nowrap; }

/* Free analyses used: the way to more analyses */
.quota-card { max-width: 640px; margin: 0 auto; padding: 22px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); text-align: center; display: grid; gap: 10px; justify-items: center; box-shadow: var(--shadow-2); }
.quota-card--dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #c9d3ee; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.quota-title { font: 600 1.15rem/1.3 var(--font-display); color: var(--ink); }
.quota-card--dark .quota-title { color: #fff; }
.quota-sub { font-size: .86rem; color: var(--slate); }
.quota-card--dark .quota-sub { color: #9fb0cf; }
.quota-link { font-size: .9rem; font-weight: 600; }
.quota-card--dark .quota-link { color: #a9c0ff; }
.vf-more { margin-top: 6px; font-size: .88rem; color: var(--slate); }
.paywall-buy small.paywall-bonus { color: #9fb0cf; }

/* ===================== Admin ===================== */
.admin { padding: 32px var(--gutter) 80px; }
.admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.admin-kicker { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-ink); }
.admin-head h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.admin-period { font-size: .9rem; color: var(--slate); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.admin-period a { padding: 4px 10px; border-radius: 999px; text-decoration: none; border: 1px solid var(--line); color: var(--ink-2); }
.admin-period a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.admin-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.admin-tabs a { white-space: nowrap; padding: 10px 14px; border-radius: 10px 10px 0 0; text-decoration: none; color: var(--slate); font-weight: 600; font-size: .95rem; }
.admin-tabs a[aria-current] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--violet); }
.admin-start { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .7fr); gap: 10px 12px; align-items: end; padding: 16px; border-radius: 16px; background: var(--violet-tint); border: 1px solid #d6e0ff; margin-bottom: 22px; }
.admin-start label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.admin-start input[type=text], .admin-start select, .admin-filter input, .admin-filter select { width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; }
.admin-check { grid-column: 1 / 3; display: flex !important; gap: 8px; align-items: center; margin: 0 !important; font-size: .92rem !important; }
.admin-start .btn { justify-self: end; }
@media (max-width: 760px) { .admin-start { grid-template-columns: 1fr; } .admin-check { grid-column: auto; } .admin-start .btn { justify-self: stretch; } }
.admin-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.admin-kpis div { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); display: grid; gap: 4px; }
.admin-kpis span { font-size: .8rem; color: var(--slate); font-weight: 600; }
.admin-kpis b { font: 700 1.6rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.admin-kpis small { font-size: .78rem; color: var(--muted); }
@media (max-width: 980px) { .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-card { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); margin-bottom: 18px; }
.admin-card h2 { font-size: 1.12rem; margin-bottom: 6px; }
.admin-note { color: var(--slate); font-size: .92rem; margin-bottom: 12px; }
.admin-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.admin-funnel li { display: grid; grid-template-columns: 170px minmax(0, 1fr) 50px 48px; gap: 10px; align-items: center; font-size: .92rem; }
.af-bar { height: 12px; border-radius: 99px; background: var(--mist-2); overflow: hidden; }
.af-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand-gradient); }
.admin-funnel b { text-align: right; } .admin-funnel small { color: var(--slate); text-align: right; }
@media (max-width: 600px) { .admin-funnel li { grid-template-columns: 1fr 44px 40px; } .af-bar { grid-column: 1 / -1; grid-row: 2; } }
.admin-chart { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; height: 180px; align-items: end; padding-top: 18px; }
.admin-chart span { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.admin-chart i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: #b9caff; }
.admin-chart b { position: absolute; top: 0; font-size: .75rem; }
.admin-chart small { font-size: .66rem; color: var(--slate); }
.admin-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-filter input { flex: 1 1 220px; width: auto; }
.admin-filter select { width: auto; }
.admin-table td { vertical-align: top; }
.admin-table small { color: var(--slate); }
.admin-tag { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--violet-tint); color: var(--violet-ink); }
.admin-step { display: inline-block; margin: 0 4px 4px 0; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); white-space: nowrap; }
.admin-step.is-good { background: var(--green-tint); color: var(--green); border-color: #bfe6d6; }
.admin-step.is-bad { background: var(--red-tint); color: var(--red); border-color: #f4c9d1; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.admin-actions form { margin: 0; }
.admin-pages { margin-top: 14px; }
.admin-pages nav ul, .admin-pages ul { list-style: none; display: flex; gap: 8px; padding: 0; }
.admin-warning { background: #fff8e6; border-color: #f1dca8; }
.admin-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .admin-grid { grid-template-columns: 1fr; } }
.admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.admin-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.admin-list b { font-variant-numeric: tabular-nums; }
.admin-pages { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--slate); font-size: .9rem; }
.admin-site { min-width: 280px; max-width: 460px; }
.admin-site small { display: block; margin-top: 3px; line-height: 1.4; }
.admin-verdict { color: var(--ink-2) !important; font-style: italic; }

/* v4.5 — one field, one button */
.scan-form--simple .scan-field { margin-top: 0; }
.scan-under { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; font-size: .9rem; color: var(--slate); }
.scan-form--dark .scan-under { color: #a9b6d8; }
.scan-idea-link { background: none; border: 0; padding: 0; font: inherit; color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.scan-form--dark .scan-idea-link { color: #a9c0ff; }

.zone-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.zone-badge.is-local { background: var(--green-tint); border-color: #bfe6d6; color: var(--green); }
.understood-fix select { width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; margin-bottom: 10px; }

/* ===================== v4.5 — customer space ===================== */
.account { padding: clamp(36px, 6vw, 72px) 0 80px; background: var(--mist); min-height: 60vh; }
.account-wrap { max-width: 640px; }
.account-wide { max-width: 860px; }
.account-kicker { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-ink); }
.account h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 6px 0 8px; }
.account-lead { color: var(--slate); }
.account-sent { margin-top: 18px; }
.account-form { margin-top: 22px; padding: 20px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.account-form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.account-row { display: flex; gap: 8px; flex-wrap: wrap; }
.account-row input { flex: 1 1 220px; font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; min-width: 0; }
.account-note { margin-top: 14px; font-size: .88rem; color: var(--slate); }
.account-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.account-new { margin: 22px 0; padding: 20px; border-radius: 18px; background: var(--paper); border: 1px solid #cbd8ff; box-shadow: var(--shadow-1); display: grid; gap: 10px; }
.account-new.is-empty { border-color: var(--line); }
.account-new-title { font: 600 1.12rem var(--font-display); }
.account-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.account-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.account-list small { display: block; color: var(--slate); font-size: .84rem; margin-top: 2px; }
.account-state { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--mist); white-space: nowrap; }
.account-state.is-paid { background: var(--green-tint); color: var(--green); }
@media (max-width: 560px) { .account-list li { grid-template-columns: 1fr auto; } .account-list li .btn { grid-column: 1 / -1; } }
.keep { margin-top: 26px; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1.1fr); gap: 16px; align-items: center; }
.keep h2 { font-size: 1.12rem; }
.keep p { color: var(--slate); font-size: .93rem; margin-top: 4px; }
.keep-row { display: flex; gap: 8px; flex-wrap: wrap; }
.keep-row input { flex: 1 1 200px; font: inherit; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line-strong); min-width: 0; }
.keep-tips { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: .84rem; color: var(--slate); }
.keep-tips input { margin-top: 3px; }
@media (max-width: 760px) { .keep { grid-template-columns: 1fr; } }

/* ===================== v4.6 — ready-to-use material ===================== */
.card a.domain-link { display: inline-flex; align-items: center; gap: 4px; color: var(--violet-ink); text-decoration: none; }
.card a.domain-link:hover { text-decoration: underline; }
.name-cloud li a { color: inherit; text-decoration: none; }
.name-cloud li a:hover { color: var(--violet-ink); text-decoration: underline; }

/* Copyable lines with their length */
.cl { display: grid; gap: 6px; }
.cl-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: .86rem; }
.cl-h span { color: var(--muted); font-size: .76rem; }
.cl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: cl; }
.cl-text { min-width: 0; overflow-wrap: anywhere; }
.cl-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--mist); font-size: .9rem; line-height: 1.4; }
.cl-n { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-copy { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--violet-ink); cursor: pointer; font-weight: 700; }
.cl-copy:hover { border-color: var(--violet); }
.cl-copy.is-done { color: #0b6e53; background: rgba(46, 211, 164, .14); border-color: transparent; }

/* Meta ads: feed preview + variants */
.meta-ads { display: grid; gap: 18px; }
.meta-ad { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); }
.meta-ad-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.meta-ad-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px; align-items: start; }
.meta-ad-copy { display: grid; gap: 16px; }
.meta-ad-facts { display: grid; gap: 8px; margin: 0; font-size: .88rem; }
.meta-ad-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.meta-ad-facts dt { color: var(--slate); font-weight: 600; }
.meta-ad-facts dd { margin: 0; color: var(--ink-2); }
.fb-wrap { display: grid; gap: 10px; position: sticky; top: 90px; }
.fb-post { position: relative; border-radius: 14px; border: 1px solid var(--line); background: #fff; overflow: hidden; box-shadow: 0 14px 34px -22px rgba(12, 27, 63, .45); font-family: var(--font-body); color: var(--ink); }
.fb-post.is-swap { animation: fbswap .35s ease; }
@keyframes fbswap { from { opacity: .35; } to { opacity: 1; } }
.fb-top { display: flex; gap: 9px; align-items: center; padding: 12px 12px 6px; }
.fb-top b { display: block; font-size: .9rem; }
.fb-top small { display: inline-flex; align-items: center; gap: 4px; color: var(--slate); font-size: .74rem; }
.fb-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-gradient); color: #fff; font-weight: 700; }
.fb-text { padding: 2px 12px 10px; font-size: .9rem; line-height: 1.38; }
.fb-visual { position: relative; aspect-ratio: 1.6 / 1; max-height: 260px; display: grid; place-items: center; padding: 26px; text-align: center; background: linear-gradient(140deg, #e9efff 0%, #f4f6fb 45%, #e3f7f0 100%); color: #3b4a6b; font-size: .86rem; font-style: italic; line-height: 1.45; }
.fb-visual.fb-video { aspect-ratio: 4 / 5; max-height: 300px; }
.fb-visual.fb-carousel { aspect-ratio: 1.25 / 1; background: linear-gradient(90deg, #e9efff 0 78%, #dfe6f7 78% 100%); }
.fb-format { position: absolute; top: 10px; left: 10px; font-style: normal; font-size: .7rem; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.85); color: #1c2b4a; }
.fb-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: var(--mist); }
.fb-link span:first-child { display: grid; gap: 1px; min-width: 0; }
.fb-link small { color: var(--slate); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-link b { font-size: .92rem; line-height: 1.25; }
.fb-link em { font-style: normal; color: var(--slate); font-size: .8rem; }
.fb-link .fb-desc { font-size: .78rem; white-space: normal; }
.fb-cta { flex: none; padding: 7px 12px; border-radius: 6px; background: var(--line); font-weight: 600; font-size: .8rem; }
.fb-shuffle { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 40px; border-radius: 10px; border: 1px dashed var(--line-strong); background: var(--paper); color: var(--violet-ink); font: 600 .86rem var(--font-body); cursor: pointer; }
.fb-shuffle:hover { border-color: var(--violet); border-style: solid; }
.library { margin-top: 18px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); background: var(--violet-tint); border: 1px solid #d6e0ff; scroll-margin-top: 90px; }
.library-h { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.library p:not(.library-h) { font-size: .88rem; color: var(--ink-2); margin-top: 2px; }
.library ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.library a { display: inline-flex; gap: 6px; align-items: center; min-height: 38px; padding: 7px 14px; border-radius: 999px; background: var(--paper); border: 1px solid #c9d6ff; color: var(--violet-ink); font-weight: 600; font-size: .88rem; text-decoration: none; }
.library a:hover { border-color: var(--violet); }
@media (max-width: 860px) {
  .meta-ad-grid { grid-template-columns: 1fr; }
  .fb-wrap { position: static; max-width: 380px; width: 100%; margin: 0 auto; }
  .library { grid-template-columns: 1fr; }
  .library ul { justify-content: flex-start; }
}

/* Google Ads Editor export */
.export-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--r-lg); border: 1px solid #cfe9df; background: var(--green-tint); }
.export-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--paper); color: var(--green); }
.export-bar p { font-size: .86rem; color: var(--ink-2); margin-top: 2px; }
.export-bar .btn { display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 640px) { .export-bar { grid-template-columns: 1fr; } .export-icon { display: none; } }

/* Channel kit */
.kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.kit-text { white-space: pre-line; font-size: .94rem; line-height: 1.5; }
.kit-target { padding: 12px 14px; border-radius: var(--r); background: var(--mist); font-size: .92rem; margin-bottom: 12px; }
.kit-seq { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 12px; border-left: 2px solid var(--violet-tint); }
.kit-seq li { position: relative; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); display: grid; gap: 10px; }
.kit-seq li::before { content: ""; position: absolute; left: -30px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--paper); }
.asset-top .cl-n { margin-left: auto; }
/* Written by the model (ad angle, message timing, categories): long labels wrap instead of overflowing on a phone. */
.meta-ad-head .chip, .asset-top .chip, .asset-note .chip { white-space: normal; max-width: 100%; min-width: 0; }
.kit-text, .kit-target, .meta-ad-facts dd { overflow-wrap: anywhere; }

/* Free page: the ready-to-publish preview */
.deliver-kicker { display: inline-flex; gap: 7px; align-items: center; font-size: .82rem; font-weight: 700; color: var(--violet-ink); background: var(--violet-tint); padding: 5px 11px; border-radius: 999px; margin-bottom: 10px; }
.deliver-card.is-wide { grid-column: span 2; }
@media (max-width: 560px) { .deliver-card.is-wide { grid-column: auto; } }
.deliver-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.deliver-card:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(12, 27, 63, .5); }
.deliver-mock { filter: none; }
.deliver-mock .ghost { filter: blur(.5px); }
.dm-row { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink); min-width: 0; }
.dm-row b { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row small { display: block; font-size: .68rem; color: var(--slate); }
.dm-row svg { color: var(--red); flex: none; }
.dm-avatar { width: 26px; height: 26px; font-size: .78rem; }
.dm-fb { background: #fff; border: 1px solid #e3e6ea; }
.dm-visual { height: 58px; border-radius: 8px; background: linear-gradient(140deg, #dfe7ff, #e6f7f1); }
.dm-linkbar { justify-content: space-between; padding: 6px 8px; border-radius: 8px; background: #f0f2f5; }
.dm-btn { width: 56px; height: 16px; border-radius: 4px; background: #dfe3e8; flex: none; }
.dm-file { justify-self: start; display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; padding: 4px 9px; border-radius: 999px; background: var(--green-tint); color: var(--green); font-size: .72rem; font-weight: 700; }
.dm-chat { gap: 8px; }
.dm-bubble { display: grid; gap: 5px; width: 82%; padding: 8px 10px; border-radius: 12px 12px 12px 4px; background: var(--paper); }
.dm-bubble.is-them { justify-self: end; width: 60%; border-radius: 12px 12px 4px 12px; background: #dbe5ff; }
@media (prefers-reduced-motion: reduce) { .deliver-card:hover { transform: none; } }
.paywall-lists li span b { color: #fff; font-weight: 600; }
.paywall-lists li span { color: #b6c2e2; }
.paywall-lists .right li svg { color: #8ff0d0; }
.own-ads-teaser { margin-top: 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); text-decoration: none; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2a4fd6 0%, var(--night) 60%); box-shadow: 0 18px 34px -24px rgba(12, 27, 63, .7); transition: transform .2s ease; }
.own-ads-teaser:hover { color: #fff; transform: translateY(-2px); }
.own-ads-teaser small { display: block; margin-top: 3px; color: #b6c2e2; font-size: .87rem; line-height: 1.4; }
.oat-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #8ff0d0; }
.own-ads-teaser > svg { color: #8ff0d0; }
@media (prefers-reduced-motion: reduce) { .own-ads-teaser:hover { transform: none; } }

/* Home: the plan's material */
.mock-file { justify-self: start; display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: var(--green-tint); color: var(--green); font-size: .74rem; font-weight: 700; }
.mock-meta { padding: 12px; gap: 10px; }
.mock-meta .fb-post { box-shadow: 0 10px 24px -18px rgba(12, 27, 63, .5); }
.mock-meta .fb-text { font-size: .84rem; min-height: 2.8em; }
.mock-meta .fb-link b { font-size: .84rem; }
.mock-meta .fb-shuffle { min-height: 36px; font-size: .8rem; }
.mock-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 4px; }
.mock-days span { padding: 7px 0; border-radius: 8px; text-align: center; font-size: .7rem; color: var(--muted); background: var(--paper); }
.mock-days span.is-on { color: #fff; background: var(--violet); font-weight: 700; }
.mock-chat { gap: 9px; }
.mock-tabs { display: flex; gap: 6px; }
.mock-tabs span { font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--paper); color: var(--slate); }
.mock-tabs span.is-on { background: var(--ink); color: #fff; }
.mock-bubble { display: grid; gap: 6px; width: 80%; padding: 9px 11px; border-radius: 12px 12px 12px 4px; background: var(--paper); }
.mock-bubble.is-them { justify-self: end; width: 58%; border-radius: 12px 12px 4px 12px; background: #dbe5ff; }

/* Paid plan being built */
.deep-wait { margin: 0 0 26px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--night); color: #cbd6ea; position: relative; overflow: hidden; }
.deep-wait::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-gradient); }
.dw-head { display: flex; align-items: center; gap: 10px; }
.dw-head b { color: #fff; font-size: 1.02rem; }
.dw-time { margin-left: auto; font: 600 .95rem var(--font-body); font-variant-numeric: tabular-nums; color: #8ff0d0; }
.dw-pulse { width: 10px; height: 10px; border-radius: 50%; background: #2ed3a4; box-shadow: 0 0 0 0 rgba(46, 211, 164, .6); animation: dwpulse 1.6s ease-out infinite; flex: none; }
@keyframes dwpulse { to { box-shadow: 0 0 0 12px rgba(46, 211, 164, 0); } }
.dw-lead { margin-top: 10px; color: #dbe3f5; }
.dw-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; font-size: .93rem; }
.dw-list li { display: flex; gap: 10px; align-items: flex-start; }
.dw-list svg { flex: none; margin-top: 2px; color: #8ff0d0; }
.dw-note { margin-top: 14px; font-size: .88rem; color: #9fb0cf; }
.dw-slow { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.07); color: #fff; font-size: .9rem; }
.processing-admin { display: block; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--violet-tint); color: var(--violet-ink); font-size: .9rem; font-weight: 600; }
.angle-row .angle-quotes { grid-column: 1 / -1; margin-top: 6px; }
.proof-divider p { color: var(--slate); margin-top: 6px; }

/* ===================== v4.9 — the paid plan being written ===================== */
.build { margin: 0 0 30px; padding: clamp(18px, 3vw, 26px); border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, #1d3a9e 0%, var(--night) 55%); color: #cbd6ea; position: relative; overflow: hidden; scroll-margin-top: 90px; box-shadow: 0 24px 50px -30px rgba(12, 27, 63, .8); }
.build::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-gradient); }
.build-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; }
.build-kicker { display: flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; color: #8ff0d0; }
.build-kicker .dw-time { margin-left: auto; }
.build h2 { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-top: 6px; }
.build-lead { margin-top: 8px; color: #c9d4ee; font-size: .95rem; line-height: 1.5; }
.build-now { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); }
.build-steps { display: flex; gap: 5px; margin-bottom: 10px; }
.build-steps i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); }
.build-steps i.is-done { background: #8ff0d0; }
.build-steps i.is-active { background: linear-gradient(90deg, #8ff0d0, #4f7dff, #8ff0d0); background-size: 200% 100%; animation: buildflow 1.6s linear infinite; }
@keyframes buildflow { to { background-position: -200% 0; } }
.build-now p { display: grid; gap: 2px; }
.build-count { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9fb0cf; }
.build-now b { color: #fff; font-size: 1rem; }
.build-now small { color: #8fb2ff; font-size: .88rem; min-height: 1.3em; }
.build-mail { margin-top: 14px; display: grid; gap: 10px; font-size: .92rem; }
.build-mail > p { display: flex; gap: 9px; align-items: flex-start; }
.build-mail > p svg { flex: none; margin-top: 2px; color: #8ff0d0; }
.build-mail b { color: #fff; word-break: break-all; }
.build-change summary { cursor: pointer; color: #8fb2ff; font-weight: 600; width: fit-content; }
.build-change form, .build-ask span { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.build-ask { display: grid; gap: 4px; }
.build-ask label { color: #dbe3f5; }
.build-mail input[type=email] { flex: 1 1 220px; min-width: 0; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: #fff; }
.build-mail input::placeholder { color: #8fa2c2; }
.build-ok { color: #fff; }
.build-slow { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; }
@media (max-width: 600px) { .build-main { grid-template-columns: 1fr; justify-items: center; text-align: left; } .build-main .build-text { justify-self: stretch; } }

/* The Genius spark writing a page (reusable) */
.sw { position: relative; width: 112px; height: 124px; flex: none; }
.sw-page { position: absolute; inset: 6px; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px -14px rgba(0,0,0,.55); padding: 14px 12px; display: grid; align-content: start; gap: 9px; overflow: hidden; }
/* A soft light sweeps the page while it is written. */
.sw-page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(59,108,255,.08) 50%, transparent 70%); background-size: 250% 100%; animation: buildflow 2.4s linear infinite; }
.sw-title, .sw-line { display: block; height: 7px; border-radius: 4px; background: #c9d6ff; transform-origin: left center; transform: scaleX(0); }
.sw-title { height: 10px; width: 62%; background: #3b6cff; animation: swline 6s ease-in-out infinite; }
.sw-line.l1 { width: 92%; animation: swline 6s ease-in-out infinite .9s; }
.sw-line.l2 { width: 78%; animation: swline 6s ease-in-out infinite 1.8s; }
.sw-line.l3 { width: 88%; animation: swline 6s ease-in-out infinite 2.7s; }
.sw-line.l4 { width: 54%; animation: swline 6s ease-in-out infinite 3.6s; }
.sw-tick { position: absolute; right: 10px; bottom: 10px; width: 18px; height: 18px; border-radius: 50%; background: #2ed3a4; transform: scale(0); animation: swtick 6s ease-in-out infinite; }
.sw-tick::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* The pen: its tip runs along each line exactly while that line is drawn (same 6 s loop, same easing per segment). */
.sw-pen { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(8, 19, 49, .35)); animation: swpen 6s ease-in-out infinite; }
@keyframes swpen {
    0% { transform: translate(15px, 4px); opacity: 1; }
    14% { transform: translate(62px, 4px); }
    15% { transform: translate(15px, 21.5px); }
    29% { transform: translate(85px, 21.5px); }
    30% { transform: translate(15px, 37.5px); }
    44% { transform: translate(74px, 37.5px); }
    45% { transform: translate(15px, 53.5px); }
    59% { transform: translate(82px, 53.5px); }
    60% { transform: translate(15px, 69.5px); }
    74% { transform: translate(56px, 69.5px); }
    80% { transform: translate(77px, 75px); opacity: 1; }
    90% { transform: translate(77px, 75px); opacity: 1; }
    96% { transform: translate(77px, 75px); opacity: 0; }
    99% { transform: translate(15px, 4px); opacity: 0; }
    100% { transform: translate(15px, 4px); opacity: 1; }
}
@keyframes swline { 0% { transform: scaleX(0); } 14% { transform: scaleX(1); } 88% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes swtick { 0%, 74% { transform: scale(0); } 80% { transform: scale(1.15); } 84%, 90% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .sw-title, .sw-line { transform: scaleX(1); animation: none; }
    .sw-tick { transform: scale(1); animation: none; }
    .sw-pen { animation: none; transform: translate(56px, 69.5px); }
    .build-steps i.is-active, .sw-page::after { animation: none; }
}

/* Locks become "being written" marks while the plan is written */
.writing-mark { display: inline-flex; gap: 2px; align-items: center; height: var(--s, 15px); }
.writing-mark i { width: calc(var(--s, 15px) / 4.5); height: calc(var(--s, 15px) / 4.5); border-radius: 50%; background: currentColor; opacity: .3; animation: writingdot 1.2s infinite; }
.writing-mark i:nth-child(2) { animation-delay: .2s; }
.writing-mark i:nth-child(3) { animation-delay: .4s; }
@keyframes writingdot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.deliver.is-building .deliver-card { cursor: default; }
.deliver.is-building .deliver-mock .ghost { background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); background-size: 200% 100%; animation: buildflow 1.8s linear infinite; }
.deliver-kicker.is-writing { color: var(--green); background: var(--green-tint); }
@media (prefers-reduced-motion: reduce) { .writing-mark i, .deliver.is-building .deliver-mock .ghost { animation: none; opacity: .7; } }
[hidden] { display: none !important; }
.build .sw { transform: scale(1.12); transform-origin: center; margin: 6px; }

/* ===================== v5.0 — paid report, easier to digest ===================== */
html, body { overflow-x: clip; } /* Nothing written by a model or a competitor can ever widen the page. */
.quick-access { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-top: 2px; }
.quick-access a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 600; font-size: .94rem; text-decoration: none; transition: border-color .15s, transform .15s; }
.quick-access a > svg:first-child { color: var(--violet); }
.quick-access a > svg:last-child { color: var(--muted); }
.quick-access a:hover { border-color: var(--violet); transform: translateY(-1px); }
@media (max-width: 520px) { .quick-access { grid-template-columns: 1fr 1fr; } .quick-access a { grid-template-columns: 1fr; gap: 6px; padding: 12px; } .quick-access a > svg:last-child { display: none; } }
@media (prefers-reduced-motion: reduce) { .quick-access a:hover { transform: none; } }
.next-tests { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--violet-tint); border: 1px solid #d6e0ff; }
.next-tests h3 { font-size: 1.02rem; }
.next-tests > p { font-size: .9rem; color: var(--ink-2); margin-top: 4px; }
.next-tests ul { margin: 10px 0 0; padding-left: 1.1em; display: grid; gap: 8px; }
.next-tests li span { display: block; font-size: .9rem; color: var(--ink-2); margin-top: 2px; }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.offer-list li { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) minmax(0, 190px); gap: 14px; align-items: baseline; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); font-size: .92rem; }
.offer-list li.is-own { background: var(--violet-tint); border-color: #d6e0ff; }
.offer-promise { color: var(--ink-2); overflow-wrap: anywhere; }
.offer-price { color: var(--muted); font-size: .88rem; text-align: right; overflow-wrap: anywhere; }
.offer-price.has-price { color: var(--green); font-weight: 600; }
@media (max-width: 640px) { .offer-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .offer-promise { grid-column: 1 / -1; grid-row: 2; } .offer-price { grid-row: 1; grid-column: 2; } }
.show-more { margin-top: 10px; }
.show-more > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--line-strong); color: var(--violet-ink); font-weight: 600; font-size: .9rem; list-style: none; }
.show-more > summary::-webkit-details-marker { display: none; }
.show-more > summary::after { content: "▾"; font-size: .8rem; }
.show-more[open] > summary::after { content: "▴"; }
.show-more[open] > summary { margin-bottom: 10px; }

/* Swipeable rows: one card at a time on phones (the next one peeks out), with dots and arrows saying there is more. */
.swipe { position: relative; min-width: 0; }
.swipe-track { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: none; position: relative; }
.swipe-track::-webkit-scrollbar { display: none; }
.swipe-slide { flex: 0 0 88%; min-width: 0; scroll-snap-align: start; }
.swipe-track.cards > .swipe-slide > * { height: 100%; }
.swipe[data-swipe=always] .swipe-slide { flex-basis: 100%; }
@media (max-width: 860px) { .swipe[data-swipe=always] .swipe-slide { flex-basis: 92%; } }
@media (min-width: 900px) {
  .swipe[data-swipe=mobile] .swipe-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); overflow: visible; padding: 0; }
  .swipe[data-swipe=mobile] .swipe-nav { display: none; }
}
.swipe { scroll-margin-top: 136px; }
.swipe-intro { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .86rem; color: var(--slate); }
.swipe-intro svg { color: var(--violet); }
.swipe-nav { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; min-width: 0; }
.swipe-tabs { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.swipe-tabs::-webkit-scrollbar { display: none; }
.swipe-tab { flex: none; min-height: 38px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.swipe-tab:hover { border-color: var(--violet); }
.swipe-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.swipe-arrow { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; }
.swipe-arrow:disabled { opacity: .35; cursor: default; }
.swipe-arrow:not(:disabled):hover { border-color: var(--violet); color: var(--violet-ink); }
.swipe-more { display: none; width: 100%; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; min-height: 48px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--violet); background: var(--violet-tint); color: var(--violet-ink); font: inherit; font-weight: 700; cursor: pointer; }
.swipe.is-ready .swipe-more { display: flex; }
.swipe-more:hover { background: var(--paper); }
.swipe-more.is-back svg { transform: rotate(180deg); }
.swipe.is-single .swipe-intro, .swipe.is-single .swipe-more { display: none; }
@media (min-width: 900px) { .swipe[data-swipe=mobile] .swipe-intro, .swipe[data-swipe=mobile].is-ready .swipe-more { display: none; } }
.swipe.is-single .swipe-slide { flex-basis: 100%; }

/* The week of posts: day tabs */
.week-tabs { display: grid; gap: 12px; }
.week-days { display: none; }
.week-tabs.is-tabs .week-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.week-days button { display: grid; gap: 2px; justify-items: center; padding: 10px 6px; min-height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; }
.week-days button b { font-size: .92rem; }
.week-days button small { font-size: .72rem; color: var(--slate); }
.week-days button[aria-selected=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.week-days button[aria-selected=true] small { color: #b6c2e2; }
.week-days button:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.week-tabs .week-post { display: grid; grid-template-columns: 1fr; gap: 8px; }
.week-top { display: flex; align-items: center; gap: 8px; }
.week-top .copy-btn { margin-left: auto; }
.week-tabs.is-tabs .week-top strong { display: none; }

/* Competitors: filters, the 6 that matter as cards, the others as compact rows */
.comp-meta-note { margin: -4px 0 14px; font-size: .9rem; color: var(--slate); }
.comp-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 14px; }
.comp-filters::-webkit-scrollbar { display: none; }
.comp-filters button { flex: none; display: inline-flex; gap: 6px; align-items: center; min-height: 38px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 600 .86rem var(--font-body); cursor: pointer; }
.comp-filters button span { color: var(--muted); font-weight: 600; }
.comp-filters button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.comp-filters button.is-on span { color: #b6c2e2; }
.comp-more-title { margin: 22px 0 10px; font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.comp-rows { display: grid; gap: 6px; }
.comp-row { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.comp-row[open] { border-color: var(--line-strong); }
.comp-row > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; min-height: 52px; }
.comp-row > summary::-webkit-details-marker { display: none; }
.comp-row > summary::after { content: "▾"; color: var(--muted); font-size: .8rem; margin-left: 4px; flex: none; }
.comp-row[open] > summary::after { content: "▴"; }
.comp-row-name { display: grid; min-width: 0; flex: 1; }
.comp-row-name b { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-row-name small { color: var(--slate); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-row-tags { display: flex; gap: 4px; flex: none; }
.comp-row-tags .chip { font-size: .72rem; padding: 3px 8px; }
.comp-row-body { padding: 0 14px 14px; display: grid; gap: 10px; }
.comp-row-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .88rem; }
.comp-row-links a { display: inline-flex; gap: 4px; align-items: center; color: var(--violet-ink); }
.comp-empty { margin-top: 10px; color: var(--slate); }

/* The evidence behind the plan, folded by topic */
/* minmax(0, 1fr) and min-width: 0: a wide row inside (filters, bars, long names) must never widen the card past the screen. */
.proof-folds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.proof-fold { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); min-width: 0; }
.proof-folds-watch { margin: 8px 0 40px; }
.proof-fold.is-key { border-color: color-mix(in srgb, var(--violet) 35%, var(--line)); box-shadow: 0 6px 24px -18px color-mix(in srgb, var(--violet) 60%, transparent); }
.proof-fold.is-key > summary b { color: var(--violet-ink); }
.proof-fold > summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; min-height: 64px; }
.proof-fold > summary::-webkit-details-marker { display: none; }
.proof-fold > summary::after { content: ""; flex: none; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg); transition: transform .2s; }
.proof-fold[open] > summary::after { transform: rotate(-135deg); }
.proof-fold > summary .n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 700; }
.proof-fold > summary b { display: block; font-size: 1.02rem; color: var(--ink); }
.proof-fold > summary > span:not(.n) { min-width: 0; }
.proof-fold > summary small { display: block; color: var(--slate); font-size: .88rem; margin-top: 2px; }
.proof-fold > summary:hover b { color: var(--violet-ink); }
.proof-fold-body { padding: 0 18px 18px; min-width: 0; }
.proof-fold-body > .chapter { padding-top: 0; margin-top: 0; border-top: 0; }
.proof-fold-body .chapter-head .eyebrow, .proof-fold-body .chapter-head h2 { display: none; }
@media (max-width: 560px) { .proof-fold > summary { padding: 14px; } .proof-fold-body { padding: 0 14px 14px; } }
@media print { .proof-fold > summary::after { display: none; } }
.proof-fold-body > .chapter { padding-bottom: 0; }
@media (max-width: 400px) { .week-days button { padding: 8px 2px; } .week-days button b { font-size: .8rem; overflow-wrap: anywhere; } .week-days button small { font-size: .66rem; } }

/* Home: after the order */
.after-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.after-steps li { position: relative; display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-1); }
.after-steps b { font-size: 1.02rem; }
.after-steps small { color: var(--slate); font-size: .92rem; line-height: 1.45; }
.after-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-gradient); color: #fff; font-weight: 700; margin-bottom: 4px; }
@media (max-width: 900px) { .after-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .after-steps { grid-template-columns: 1fr; } .after-steps li { grid-template-columns: auto 1fr; column-gap: 12px; padding: 16px; } .after-n { grid-row: span 2; margin: 0; } }

/* A quoted promise as a proof tile: the quote on top, the explanation under it (never squeezed side by side). */
@media (max-width: 760px) { .proof-tiles li.is-wide { grid-template-columns: 1fr; gap: 4px; } }
/* Free scan: the competitors step says the paid plan goes further. */
.check-more { grid-column: 2 / -1; display: flex; gap: 6px; align-items: flex-start; margin-top: -6px; font-size: .8rem; color: var(--violet-ink); line-height: 1.4; }
.check-more svg { flex: none; margin-top: 2px; }
/* No website yet: the site comes first. */
.site-first { margin-top: 16px; padding: 20px 22px; border-radius: 22px; background: var(--paper); border: 1px solid #d6e0ff; box-shadow: var(--shadow-1); display: grid; gap: 10px; }
.site-first h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.site-first p { color: var(--ink-2); }
.site-first p b { color: var(--violet-ink); }
.site-first ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .94rem; }
.site-first li { display: flex; gap: 8px; align-items: flex-start; }
.site-first li svg { flex: none; margin-top: 3px; color: var(--green); }
.site-first .btn { justify-self: start; display: inline-flex; gap: 6px; align-items: center; }
.site-first-more { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--violet-ink); font-size: .92rem; }
.site-first + .diagnosis { margin-top: 16px; }
.site-first { margin-top: 18px; }

/* The SEO page explained in plain words: what SEO is, what this page can do, and that Google decides. */
.seo-explain { margin: 0 0 16px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--violet-tint); border: 1px solid color-mix(in srgb, var(--violet) 22%, transparent); }
.seo-explain p { color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.seo-explain .seo-explain-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--violet-ink); font-weight: 700; font-size: 1rem; }
.seo-explain .seo-explain-note { margin-top: 8px; font-size: .86rem; color: var(--slate); }

/* The plan being written sits above everything after payment. */
.build-top { padding-top: 18px; }
.build-top .build { margin-bottom: 8px; }

/* A lead to confirm: honest, never alarming. */
.chip.chip-confirm { background: #fff6e0; border-color: #f3dca4; color: #8a5a00; }
.next-tests li span b { color: var(--ink); }

/* Facebook & Instagram: the ad generator, put forward like a product of its own. */
.gen-hero { position: relative; overflow: hidden; margin-bottom: 18px; padding: clamp(20px, 3.4vw, 30px); border-radius: 22px; color: #cbd6ea;
  background: radial-gradient(110% 130% at 100% 0%, #3b2aa8 0%, transparent 55%), radial-gradient(120% 140% at 0% 0%, #1d3a9e 0%, var(--night) 60%);
  box-shadow: 0 24px 50px -30px rgba(12, 27, 63, .8); }
.gen-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-gradient); }
.gen-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9fe7c9; }
.gen-eyebrow .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); font: 700 .72rem var(--font-display); letter-spacing: 0; }
.gen-hero h2 { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: #fff; font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.15; }
.gen-hero h2 svg { flex: none; color: #ffd36b; }
.gen-hero p { margin-top: 10px; max-width: 46rem; font-size: 1rem; line-height: 1.55; }
.gen-stats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; }
.gen-stats li { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.gen-stats b { display: block; color: #fff; font: 700 1.5rem/1.1 var(--font-display); }
.gen-stats span { font-size: .84rem; color: #b9c6e0; }
@media (max-width: 420px) { .gen-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.meta-ads .fb-shuffle { min-height: 48px; border: 0; border-radius: 12px; background: var(--button-gradient); color: #fff; font-size: .95rem; box-shadow: 0 10px 24px -14px rgba(64, 99, 255, .9); }
.meta-ads .fb-shuffle:hover { filter: brightness(1.06); border: 0; }

/* Section bands: same shape as the ad generator, one hue per chapter. */
.gen-hero.is-plan { background: radial-gradient(110% 130% at 100% 0%, #2a56d6 0%, transparent 55%), radial-gradient(120% 140% at 0% 0%, #1d3a9e 0%, var(--night) 60%); }
.gen-hero.is-google { background: radial-gradient(110% 130% at 100% 0%, #0e7c7b 0%, transparent 55%), radial-gradient(120% 140% at 0% 0%, #0f4f6b 0%, var(--night) 62%); }
.gen-hero.is-google .gen-eyebrow { color: #8ff0e0; }
.gen-hero.is-watch { background: radial-gradient(110% 130% at 100% 0%, #9a4f12 0%, transparent 52%), radial-gradient(120% 140% at 0% 0%, #3b2a6b 0%, var(--night) 62%); }
.gen-hero.is-watch .gen-eyebrow { color: #ffcf8a; }
.gen-hero.is-plan .gen-eyebrow { color: #9fe7c9; }
.gen-hero .gen-progress { margin-top: 16px; }
.gen-progress-label { display: flex; justify-content: space-between; font-size: .86rem; color: #c9d6f2; margin-bottom: 6px; }
.gen-progress-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.gen-progress-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #5be3b0, #4f7dff); transition: width .35s ease; }

.watch { padding-bottom: 40px; }
.watch-top { margin-top: 14px; }
.proof-folds-watch { margin: 14px 0 0; }
.watch-fold > summary { min-height: 58px; }
.watch-fold > summary .n { background: #9a4f12; }
.watch-fold:not([open]) > summary { background: #fff8ee; border-radius: var(--r-lg); }
.watch-fold:not([open]) > summary b { color: #8a4a12; }

.gen-hero.is-social { background: radial-gradient(110% 130% at 100% 0%, #a3216b 0%, transparent 52%), radial-gradient(120% 140% at 0% 0%, #4a1f7a 0%, var(--night) 62%); }
.gen-hero.is-social .gen-eyebrow { color: #ffb3d9; }
.gen-hero.is-kit { background: radial-gradient(110% 130% at 100% 0%, #13795b 0%, transparent 52%), radial-gradient(120% 140% at 0% 0%, #0f4f4a 0%, var(--night) 62%); }
.gen-hero.is-kit .gen-eyebrow { color: #9fe7c9; }
.gen-hero.is-seo { background: radial-gradient(110% 130% at 100% 0%, #0b7fb0 0%, transparent 52%), radial-gradient(120% 140% at 0% 0%, #13407a 0%, var(--night) 62%); }
.gen-hero.is-seo .gen-eyebrow { color: #9ee3ff; }
.seo-note { margin: 0 0 16px; font-size: .9rem; color: var(--slate); }
.fb-shuffle.is-main { border: 0; background: var(--button-gradient); color: #fff; }
.fb-shuffle.is-main:hover { filter: brightness(1.06); }

/* Previews are our own mock-ups, labelled as such (never a copy of Facebook's or Google's interface). */
.mock-tag { position: absolute; top: 10px; right: 10px; z-index: 1; font: 600 .68rem/1 var(--font-body); color: var(--slate); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 8px; pointer-events: none; }
.fb-post .fb-top { padding-right: 72px; }
.mock-meta .fb-post .mock-tag { top: 6px; right: 6px; }

/* Where a ready-to-use piece stands: ready, one last step, or a prerequisite first (App\Scan\AssetStatus). */
.gen-hero p.gen-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: .92rem; }
.gen-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-weight: 700; font-size: .84rem; background: rgba(159, 231, 201, .16); color: #9fe7c9; border: 1px solid rgba(159, 231, 201, .35); }
.gen-status.is-last_step .gen-status-pill { background: rgba(127, 176, 255, .14); color: #b9d2ff; border-color: rgba(127, 176, 255, .38); }
.gen-status.is-blocked .gen-status-pill { background: rgba(255, 170, 170, .14); color: #ffc2c2; border-color: rgba(255, 170, 170, .38); }
.gen-status-note { color: #dbe4f4; flex: 1 1 260px; min-width: 0; }
.calc-hint { margin-top: 8px; font-size: .82rem; opacity: .8; }
.pp-todo { background: #fff4d6; color: #7a4b00; border-radius: 4px; padding: 0 3px; font-weight: 600; }

/* ===================== v5.8 — the paid plan by channel ===================== */
/* The top: the plan is ready, what was prepared, counted, one tap from each section. */
.plan-ready { margin-top: 22px; padding: clamp(20px, 3.5vw, 30px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(12, 27, 63, .35); position: relative; overflow: hidden; }
.plan-ready::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand-gradient); }
.plan-ready h2 { font-size: clamp(1.5rem, 3.8vw, 2.1rem); line-height: 1.15; margin: 8px 0 6px; letter-spacing: -0.02em; }
.plan-ready-lead { color: var(--ink-2); max-width: 44rem; }
.ready-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; margin-top: 18px; }
.ready-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--mist); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s, background-color .15s; }
.ready-tile:hover { border-color: var(--violet); background: var(--paper); transform: translateY(-2px); }
.ready-tile > svg:last-child { color: var(--muted); }
.rt-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--paper); color: var(--violet); border: 1px solid var(--line); }
.rt-body { min-width: 0; }
.rt-body b { font: 700 1.55rem/1 var(--font-display); color: var(--ink); }
.rt-unit { font-weight: 600; font-size: .95rem; }
.rt-body small { display: block; margin-top: 3px; color: var(--slate); font-size: .84rem; }
.plan-doc { margin-top: 16px; display: grid; justify-items: start; gap: 8px; }
.plan-doc .btn { display: inline-flex; gap: 8px; align-items: center; }
.plan-doc small { color: #a9b6d8; font-size: .86rem; }
.plan-doc-end { margin-top: 18px; justify-items: center; }
@media (max-width: 640px) {
  .plan-doc { justify-items: stretch; }
  .plan-doc .plan-doc-btn { width: 100%; }
  .plan-doc small { text-align: center; }
}
.plan-progress { margin-top: 16px; max-width: 420px; }
.plan-progress .gen-progress-label { color: var(--slate); }
.plan-progress .gen-progress-bar { background: var(--mist-2); }

/* What the data says about the channel, then the rule of thumb. */
.channel-insight { margin: 4px 0 18px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--violet-tint); border: 1px solid #d6e0ff; }
.ci-data { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; color: var(--ink); }
.ci-data svg { flex: none; margin-top: 3px; color: var(--violet); }
.ci-rule { margin-top: 6px; color: var(--ink-2); font-size: .92rem; }

/* A recommended action: short, with its "done" tick; details on demand. */
.action-list { display: grid; gap: 12px; margin-bottom: 22px; }
.action-card { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-1); min-width: 0; scroll-margin-top: 140px; transition: background-color .2s, border-color .2s; }
.action-card h3 { font-size: 1.08rem; line-height: 1.3; }
.action-top { display: flex; flex-wrap: wrap; gap: 6px; }
.action-line { display: grid; gap: 2px; font-size: .95rem; color: var(--ink-2); }
.action-k { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.action-line.is-advice { padding: 10px 12px; border-radius: var(--r); background: var(--mist); color: var(--ink); }
.action-line.is-advice .action-k { color: var(--violet-ink); }
.action-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 4px; }
.action-more { flex: 1 1 100%; }
.action-more > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--violet-ink); font-weight: 600; font-size: .9rem; list-style: none; min-height: 32px; }
.action-more > summary::-webkit-details-marker { display: none; }
.action-more > summary::after { content: "+"; font-weight: 700; }
.action-more[open] > summary::after { content: "−"; }
.action-more-body { display: grid; gap: 8px; padding-top: 8px; font-size: .92rem; color: var(--ink-2); min-width: 0; }
.action-card.is-test { border-style: dashed; }
.action-card.is-done { background: #f2fbf6; border-color: #a6e3c3; box-shadow: none; }
.action-card.is-done h3 { color: var(--slate); }
.action-card.is-done .gplan-done { border-color: #a6e3c3; color: #1d7a4b; }
.action-card.is-done .gplan-done-box { background: #22a565; border-color: #22a565; color: #fff; }
.action-foot .gplan-done { min-height: 40px; }

/* Publishing in three steps, then the files. */
.guide-steps { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: gs; }
.guide-steps li { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; padding: 14px 8px 12px; border-radius: 14px; background: var(--mist); border: 1px solid var(--line); counter-increment: gs; }
.guide-steps li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -7px; width: 8px; height: 8px; border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.gs-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--green); border: 1px solid #cfe9df; margin-bottom: 4px; }
.guide-steps b { font-size: .92rem; }
.guide-steps small { font-size: .78rem; color: var(--slate); }
.guide-steps.is-in .gs-icon { animation: gs-pop .5s ease both; }
.guide-steps.is-in li:nth-child(2) .gs-icon { animation-delay: .15s; }
.guide-steps.is-in li:nth-child(3) .gs-icon { animation-delay: .3s; }
@keyframes gs-pop { from { transform: scale(.6); opacity: .2; } 60% { transform: scale(1.12); opacity: 1; } to { transform: scale(1); } }
.export-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.export-actions .btn { display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 720px) {
  .export-bar { grid-template-columns: auto minmax(0, 1fr); }
  .export-actions { grid-column: 1 / -1; justify-content: stretch; }
  .export-actions .btn { flex: 1 1 200px; justify-content: center; }
}

/* The keywords: the bar is the monthly demand, a tap opens why and the bids. */
.kw-box { margin: 18px 0 22px; }
.kw-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kw-head .asset-h { margin: 0; }
.kw-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-filter { font: 600 .82rem var(--font-body); min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.kw-filter[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.kw-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kw-bars li[hidden] { display: none; }
.kw-row { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); min-width: 0; }
.kw-row > summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; min-height: 52px; }
.kw-row > summary::-webkit-details-marker { display: none; }
.kw-row[open] { border-color: color-mix(in srgb, var(--violet) 40%, var(--line)); }
.kw-name { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; }
.kw-name strong { overflow-wrap: anywhere; }
.kw-bar { height: 10px; border-radius: 6px; background: var(--mist-2); overflow: hidden; }
.kw-bar span { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--brand-gradient); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.kw-vol { font-size: .84rem; color: var(--slate); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-detail { padding: 0 14px 12px; display: grid; gap: 4px; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 560px) {
  .kw-row > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .kw-bar { grid-column: 1 / -1; grid-row: 2; }
}
.asset-fold > summary { cursor: pointer; color: var(--violet-ink); font-weight: 600; font-size: .9rem; padding: 8px 0; }

/* The Meta composer: pick each part, the preview changes, copy the version you like. */
.composer { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.composer-h { font-weight: 700; font-size: .92rem; }
.composer-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: center; }
.composer-label { font-size: .82rem; color: var(--slate); font-weight: 600; }
.composer-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.composer-pick { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font: 700 .9rem var(--font-body); cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; }
.composer-pick:hover { border-color: var(--violet); transform: translateY(-1px); }
.composer-pick[aria-pressed=true] { background: var(--violet); border-color: var(--violet); color: #fff; }
.composer-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.composer-actions .fb-shuffle, .composer-copy { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.composer-copy { border-radius: 10px; }

/* Tabs inside a section (social networks, competitive watch). Without JavaScript, every panel shows. */
.section-tabs { display: grid; gap: 14px; margin-top: 16px; min-width: 0; }
.section-tablist { display: none; }
.section-tabs.is-tabs > .section-tablist { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.section-tablist::-webkit-scrollbar { display: none; }
.section-tablist [role=tab] { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font: 600 .9rem var(--font-body); cursor: pointer; white-space: nowrap; }
.section-tablist [role=tab] small { font-size: .76rem; padding: 1px 7px; border-radius: 999px; background: var(--mist-2); color: var(--slate); }
.section-tablist [role=tab][aria-selected=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.section-tablist [role=tab][aria-selected=true] small { background: rgba(255,255,255,.16); color: #fff; }
.section-tablist [role=tab]:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.tab-panel, [data-tab-panel] { min-width: 0; }
.tab-panel > .chapter, .tab-panel > section { padding-bottom: 0; }
.tab-panel .chapter-head .eyebrow { display: none; }
.tab-lead { color: var(--ink-2); margin-bottom: 10px; }
.watch-tabs .tab-panel .chapter-head h2 { font-size: 1.15rem; }

/* A sub-part of a section (the Google Maps profile inside "Website & SEO"). */
.sub-block { margin: 26px 0 18px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 140px; }
.sub-head { margin-bottom: 12px; }
.sub-kicker { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--green); }
.sub-head h3 { font-size: 1.2rem; margin: 4px 0; }
.sub-head p { color: var(--ink-2); }
.market-fold, .vis-fold { margin-top: 18px; }
.report-foot .foot-note { color: var(--slate); font-size: .86rem; }

@media (prefers-reduced-motion: reduce) {
  .kw-bar span { transition: none; }
  .guide-steps.is-in .gs-icon { animation: none; }
  .ready-tile:hover, .composer-pick:hover { transform: none; }
}
@media print {
  .section-tablist, .kw-filters, .composer, .plan-doc, .action-foot .gplan-done { display: none !important; }
  .section-tabs [data-tab-panel] { display: block !important; }
  /* Printing or saving as PDF (Safari on iPhone fires no beforeprint): blocks still waiting for the scroll show anyway. */
  .js [data-reveal], [data-anim] { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .chapter > *, .paywall, .keep { opacity: 1 !important; visibility: visible !important; }
  /* The report prints as it looks: its dark background and its gradient words (which are drawn by their background). */
  html, body.page-dark, .page-dark * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.page-dark { background: #081331 !important; }
  /* The bar that follows the reader on screen would be printed over every page. */
  .sticky-cta { display: none !important; }
  /* What the animations had not shown yet (hidden inline until scrolled to): shown, even when the phone prints without warning the page. */
  main [style*="visibility: hidden"] { visibility: visible !important; }
  main [style*="opacity: 0;"] { opacity: 1 !important; }
  /* The folds of the report print open (where the browser allows it without script), the forms do not print. */
  .proof-fold::details-content { content-visibility: visible !important; display: block !important; }
  details.problem, .understood-fix, .consent { display: none !important; }
  /* Drawings that only make sense while they move (the page drawing itself, the confetti): not printed as empty frames. */
  .pagebuild6, .confetti6 { display: none !important; }
  /* Bars drawn when they come into view: printed at their real length. */
  [data-width] { width: var(--w) !important; }
  .vr-bar i { width: var(--w) !important; transform: none !important; }
  /* Gradient words print as a plain colour (a gradient behind clipped text prints with a box around it). */
  .grad, .gradient-text, .page-report .grad, .page-report h2 .grad { background: none !important; -webkit-text-fill-color: #9fbcff !important; color: #9fbcff !important; }
  /* A card, an ad, a price box: never cut in two by a page break. */
  .action-card, .asset-card, .export-bar, .guide-steps, .ready-tile, .stat, .serp6, .fb-post, .ad, .paywall-buy, .pb6-wrap, .value-recap, .kw-row, .comp-row, .card, figure { break-inside: avoid; }
}

/* ===================== v5.8 — free analysis: what waits in the plan ===================== */
.card.is-locked { background: var(--mist); }
.card.is-locked .domain { display: inline-flex; gap: 5px; align-items: center; color: var(--slate); }
.locked-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px dashed var(--line-strong); background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.locked-list:hover { border-color: var(--violet); }
.locked-names { display: flex; flex-wrap: wrap; gap: 6px; }
.locked-name { height: 26px; border-radius: 999px; background: linear-gradient(90deg, var(--mist-2), #dfe5f1, var(--mist-2)); filter: blur(.4px); }
.locked-text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; }
.locked-text b { font-size: 1rem; }
.locked-text small { grid-column: 2; color: var(--slate); font-size: .88rem; }
.locked-cta { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--violet-ink); }

/* A taste of the ad generator, with the business's own name. */
.ad-teaser .chapter-head p { max-width: 46rem; }
.teaser-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.teaser-main { align-self: start; }
.teaser-main .fb-visual { aspect-ratio: 1.9 / 1; }
.teaser-locked { position: relative; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); overflow: hidden; min-height: 220px; text-decoration: none; color: var(--ink); }
.teaser-blur { position: absolute; inset: 0; display: grid; align-content: start; gap: 8px; padding: 14px; filter: blur(3px); opacity: .7; }
.tb-top { display: flex; gap: 8px; align-items: center; }
.tb-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-gradient); }
.tb-line { display: block; height: 10px; border-radius: 6px; background: var(--mist-2); width: 90%; }
.tb-visual { display: block; height: 90px; border-radius: 10px; background: linear-gradient(140deg, #e9efff, #e3f7f0); }
.teaser-lock { position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-2); text-align: center; }
.teaser-lock small { color: var(--slate); }
.teaser-locked:hover .teaser-lock { outline: 2px solid var(--violet); }
.teaser-foot { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--violet-tint); }
.teaser-foot p { flex: 1 1 320px; color: var(--ink-2); font-size: .95rem; }
.teaser-foot .btn { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 760px) {
  .teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser-main { grid-column: 1 / -1; }
  .teaser-locked { min-height: 150px; }
}
.sub-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.sub-stats li { padding: 8px 12px; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); }
.sub-stats b { font: 700 1.1rem var(--font-display); color: var(--ink); margin-right: 2px; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: .9rem; color: var(--ink-2); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: .82rem; background: var(--green-tint); color: var(--green); border: 1px solid #bfe6d4; }
.status-line.is-last_step .status-pill { background: #e8eeff; color: #2346c8; border-color: #c9d6ff; }
.status-line.is-blocked .status-pill { background: var(--red-tint); color: var(--red); border-color: #f3c5cd; }
.meta-ad-copy > summary { cursor: pointer; color: var(--violet-ink); font-weight: 600; font-size: .92rem; padding: 10px 0; }
.watch-tabs .tab-panel .chapter-head h2 { display: none; }
#watch-list .chapter-head { display: none; }

/* ===================== v5.9 — swipe rows: an animated hint instead of a sentence ===================== */
.swipe-intro { display: none; }
.swipe { margin-bottom: 26px; }
.swipe-hint { display: none; flex: none; width: 44px; height: 38px; position: relative; color: var(--violet); }
@media (pointer: coarse) { .swipe.is-ready .swipe-hint { display: block; } }
.swipe-hand { position: absolute; top: 8px; left: 18px; animation: swipe-hand 1.8s ease-in-out 0.6s 3 both; }
.swipe-hint::before { content: ""; position: absolute; top: 18px; left: 4px; width: 34px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--violet) 45%, transparent)); opacity: 0; animation: swipe-trail 1.8s ease-in-out 0.6s 3 both; }
@keyframes swipe-hand { 0%, 100% { transform: translateX(0) rotate(0); } 45% { transform: translateX(-14px) rotate(-8deg); } 60% { transform: translateX(-14px) rotate(-8deg); } }
@keyframes swipe-trail { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }
.swipe.is-nudging .swipe-track { scroll-snap-type: none; }
.swipe-more[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .swipe-hand, .swipe-hint::before { animation: none; } }

/* The composer: the label above, the five choices on one row, the chosen version written right there. */
.composer-row { grid-template-columns: 1fr; gap: 6px; }
.composer-picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 300px; }
.composer-pick { width: auto; height: 40px; }
.composer-live { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); font-size: .92rem; color: var(--ink); }
.composer-live .cl-head { font-weight: 700; }
.composer-live .cl-desc { color: var(--slate); font-size: .86rem; }
.composer-live .is-flash { animation: cl-flash .7s ease; }
@keyframes cl-flash { from { background: color-mix(in srgb, var(--violet) 22%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .composer-live .is-flash { animation: none; } }
/* For inspiration: the Meta Ad Library searches, stacked on every screen. */
.library { grid-template-columns: 1fr; }
.library ul { justify-content: flex-start; }

/* Tabs as a band: says there are several views, and the others glow once when it comes into view. */
.section-tabs.is-tabs > .section-tablist { align-items: center; padding: 6px; border-radius: 999px; background: var(--violet-tint); border: 1px solid #d6e0ff; }
.tablist-label { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--violet-ink); }
.section-tablist [role=tab] { border-color: transparent; }
.section-tablist [role=tab][aria-selected=false] { background: var(--paper); border-color: #d6e0ff; }
.section-tablist.is-nudge [role=tab][aria-selected=false] { animation: tab-glow 1.2s ease-in-out 2; }
@keyframes tab-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 35%, transparent); border-color: var(--violet); } }
@media (prefers-reduced-motion: reduce) { .section-tablist.is-nudge [role=tab] { animation: none; } }
.radar-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.radar-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; color: #dbe4f4; font-size: .95rem; }
.radar-list svg { margin-top: 3px; color: #9fe7c9; }
.radar-list li.is-next { margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(159, 231, 201, .35); }
.radar-list b { color: #fff; }
.bonus-box { margin-top: 18px; }

/* ===================== v5.9 — free analysis: the paid plan's chapters, locked in place ===================== */
.gen-stats li.is-locked { border-style: dashed; }
.lk-num { display: inline-flex; align-items: center; gap: 6px; }
.lk-num > span { filter: blur(6px); opacity: .7; user-select: none; }
.lk-num svg { color: #b9d2ff; }
.gen-status.is-locked .gen-status-pill { background: rgba(127, 176, 255, .14); color: #b9d2ff; border-color: rgba(127, 176, 255, .38); }

/* "Your full plan": the paid tiles, locked, revealed one after the other. */
.plan-preview { margin-top: 18px; padding: clamp(20px, 3.5vw, 28px); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--violet-tint), var(--paper) 70%); border: 1px solid #d6e0ff; }
.plan-preview h2 { font-size: clamp(1.3rem, 3.2vw, 1.75rem); line-height: 1.2; margin: 8px 0 6px; }
.ready-tiles.is-locked .ready-tile { background: var(--paper); }
.rt-lock { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e8eeff; color: #2346c8; }
.js .ready-tiles.is-locked .ready-tile { opacity: 0; transform: translateY(8px); }
.js .plan-preview.is-in .ready-tile, .js .plan-preview:not([data-reveal]) .ready-tile { animation: tile-in .45s ease forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
@keyframes tile-in { to { opacity: 1; transform: none; } }

/* A locked part: the blurred shape of the real thing, what it is, and how to get it. */
.lk-block { position: relative; display: grid; min-height: 150px; margin: 12px 0; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.lk-block:hover { border-color: var(--violet); }
.lk-skeleton { display: grid; align-content: start; gap: 10px; padding: 18px; filter: blur(3px); opacity: .75; }
.lk-line { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--mist-2), #dde4f0); }
.lk-block.is-ad .lk-line:first-child { height: 16px; background: #c9d7fb; }
.lk-block.is-post .lk-skeleton { gap: 8px; }
.lk-block.is-rows .lk-line { height: 30px; border-radius: 12px; width: 100% !important; }
.lk-block.is-slim { min-height: 110px; }
.lk-over { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 16px; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.85) 60%); }
.lk-badge { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #e8eeff; color: #2346c8; box-shadow: 0 6px 18px -10px rgba(35, 70, 200, .45); }
.lk-over b { font-size: 1rem; max-width: 34ch; }
.lk-over small { color: var(--slate); font-size: .88rem; max-width: 46ch; }
.lk-cta { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; font-weight: 700; color: var(--violet-ink); font-size: .92rem; }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.lk-grid .lk-block { margin: 0; }
.btn-locked { display: inline-flex; gap: 6px; align-items: center; background: var(--paper); color: var(--slate); border: 1px dashed var(--line-strong); }
.btn-locked:hover { color: var(--violet-ink); border-color: var(--violet); }
.export-bar.is-locked { background: var(--mist); border-color: var(--line); }
.export-bar.is-locked .export-icon { color: #2346c8; background: #e8eeff; }
.guide-steps.is-locked .gs-icon { color: var(--slate); border-color: var(--line); }
.kw-row.is-static { padding: 10px 14px; }
.kw-static { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto; gap: 12px; align-items: center; }
.kw-row.is-static .kw-detail { padding: 6px 0 0; }
@media (max-width: 560px) { .kw-static { grid-template-columns: minmax(0, 1fr) auto; } .kw-static .kw-bar { grid-column: 1 / -1; grid-row: 2; } }

/* The generator, shown locked under the example ad. */
.teaser-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.teaser-label { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.composer.is-locked { position: relative; text-decoration: none; color: var(--ink); }
.composer.is-locked .composer-picks { filter: grayscale(1); opacity: .45; }
.composer.is-locked .composer-pick { display: grid; place-items: center; }
.composer-lock-note { display: inline-flex; justify-content: center; padding: 8px 12px; border-radius: 10px; background: #e8eeff; color: #2346c8; font-weight: 700; font-size: .86rem; }
.composer.is-locked:hover .composer-lock-note { outline: 2px solid #f1d9a0; }
.composer.is-locked .composer-h svg { color: #2346c8; }

/* Social: the days of the week, then the posts, locked. */
.lk-week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.lk-week span { display: grid; place-items: center; min-height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); font-weight: 600; color: var(--slate); }
.lk-week span:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Competitive watch: the tabs as they will be, locked, and the others as blurred rows. */
.section-tabs.is-locked { margin-top: 18px; }
.lk-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid #d6e0ff; background: var(--paper); color: var(--slate); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.lk-tab:hover { color: var(--violet-ink); border-color: var(--violet); }
.section-tabs.is-locked > .section-tablist { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.lk-rows { display: grid; gap: 8px; }
.lk-row { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--mist); }
.lk-name { display: block; height: 14px; border-radius: 6px; background: #d5ddeb; filter: blur(2px); }
.lk-chip { display: block; width: 46px; height: 18px; border-radius: 999px; background: #e3e9f3; filter: blur(1px); }
.lk-row .lk-name { margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .js .ready-tiles.is-locked .ready-tile { opacity: 1; transform: none; animation: none; } }
/* Processing screen: what the full plan adds, revealed one by one while the free analysis runs. */
.soon { margin-top: 22px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.soon-h { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--violet-ink); }
.soon-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.soon-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: .92rem; color: var(--ink-2); opacity: 0; transform: translateY(6px); animation: tile-in .5s ease forwards; animation-delay: calc(var(--i) * 1.2s + .6s); }
.soon-list svg { margin-top: 2px; color: var(--violet); }
.soon-list b { color: var(--ink); margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .soon-list li { opacity: 1; transform: none; animation: none; } }
/* v5.9 — free meta: the example ad spans the row on phones; the locked generator sits under the three ads. */
#meta .composer.is-locked { margin-top: 14px; }
@media (max-width: 760px) {
  .teaser-col { grid-column: 1 / -1; }
}
/* Locked blocks grow with their text: the blurred shape and the overlay share one grid cell, nothing is clipped. */
.lk-block > .lk-skeleton, .lk-block > .lk-over { grid-area: 1 / 1; }
.lk-block > .lk-over { position: relative; inset: auto; }
.watch-ghost { min-height: 0; }
@media (max-width: 760px) { .watch-ghost { display: none; } }
/* v5.9.1 — the generator's total: every combination, counted up once, in a glowing band. */
.gen-total { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 14px; align-items: center; margin: 12px 0 0 !important; max-width: none !important; padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(100deg, rgba(91, 108, 255, .28), rgba(31, 199, 166, .18)); border: 1px solid rgba(160, 175, 255, .45); box-shadow: 0 0 0 0 rgba(120, 140, 255, .0); overflow: hidden; }
.gen-total::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; }
.gen-total.is-in::after { animation: gt-shine 1.6s .9s ease-out 1 forwards; }
@keyframes gt-shine { to { transform: translateX(100%); } }
.gt-eq { color: #9fb0ff; font: 700 1.6rem/1 var(--font-display); }
.gt-figure { display: grid; justify-items: start; line-height: 1; }
.gt-figure small { color: #b9c6e0; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.gt-num { color: #fff; font: 800 clamp(2rem, 6vw, 2.6rem)/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gt-text { display: grid; gap: 2px; min-width: 0; }
.gt-text strong { color: #fff; font-size: 1.02rem; }
.gt-text small { color: #c4cfe6; font-size: .84rem; line-height: 1.4; }
@media (max-width: 480px) {
  .gen-total { grid-template-columns: auto minmax(0, 1fr); }
  .gt-eq { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gen-total.is-in::after { animation: none; } }
/* v5.9.2 — a locked figure is a clear lock badge (the same yellow badge as the locked blocks), never a blurred blur. */
.lk-num > span.lk-pill { filter: none; opacity: 1; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e8eeff; color: #2346c8; box-shadow: 0 6px 18px -8px rgba(47, 91, 242, .45); }
.lk-num .lk-pill svg { color: #2346c8; }
.gen-stats li.is-locked { border-color: rgba(127, 176, 255, .35); }
/* v5.9.3 — no box to tick at checkout: the refund guarantee and a secure-payment seal. */
.secure-pay { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.secure-seal { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(46, 211, 164, .14); color: #2ed3a4; }
.secure-pay > span:last-child { display: grid; gap: 1px; }
.secure-pay b { color: #fff; font-size: .95rem; }
.secure-pay small { color: #9fb0cf; font-size: .82rem; }
/* v5.10 — the views of a section as a fixed icon bar: every view visible at once, nothing scrolls sideways. */
.section-tabs.is-tabs > .section-tablist.seg-tabs { display: grid; grid-template-columns: repeat(var(--seg, 4), minmax(0, 1fr)); gap: 4px; padding: 5px; overflow: visible; border-radius: 18px; background: #e3e9f7; border: 0; }
.seg-tabs [role=tab], .seg-tabs .seg-locked { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 64px; padding: 8px 4px; border: 0; border-radius: 14px; background: transparent; color: #3d4d70; font: 600 .8rem/1.15 var(--font-body); text-align: center; white-space: normal; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.seg-tabs [role=tab] svg, .seg-tabs .seg-locked svg { color: #6b7a99; }
.seg-tabs [role=tab] small, .seg-tabs .seg-locked small { padding: 0; background: none; color: var(--violet-ink); font: 700 .72rem/1 var(--font-body); }
.seg-tabs [role=tab][aria-selected=true] { background: var(--paper); color: var(--ink); box-shadow: 0 2px 10px -3px rgba(12, 27, 63, .3); }
.seg-tabs [role=tab][aria-selected=true] svg { color: var(--violet); }
.seg-tabs [role=tab][aria-selected=true] small { background: none; color: var(--violet-ink); }
.seg-tabs [role=tab]:hover:not([aria-selected=true]) { background: rgba(255, 255, 255, .5); }
.seg-tabs .seg-locked small { color: #9a5b00; }
.seg-tabs .seg-locked:hover { background: rgba(255, 255, 255, .55); }
@media (min-width: 761px) { .seg-tabs [role=tab], .seg-tabs .seg-locked { grid-auto-flow: column; justify-content: center; gap: 8px; min-height: 50px; font-size: .9rem; } }
/* v5.10 — the price in its own band (big, centered, a small rocket takes off), its real reference, where the plan arrives. */
.price-band { position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 16px 16px; border-radius: 18px; text-align: center; overflow: hidden;
  background: linear-gradient(120deg, #3b6cff 0%, #4d8dff 45%, #2ed3a4 120%); box-shadow: 0 18px 40px -20px rgba(59, 108, 255, .9); }
.price-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; }
.price-band.is-in::after { animation: gt-shine 1.4s .5s ease-out 1 forwards; }
.paywall-buy .price-band .price { margin: 0; color: #fff; font: 800 clamp(2.9rem, 9vw, 3.6rem)/1 var(--font-display); letter-spacing: -.045em; }
.pb-sub { margin: 0; color: rgba(255, 255, 255, .88); font-size: .86rem; font-weight: 600; }
.pb-rocket { position: absolute; right: 16px; top: 14px; display: grid; place-items: center; color: #fff; opacity: .95; transform: rotate(35deg); }
.pb-rocket i { position: absolute; left: 50%; top: 100%; width: 6px; height: 0; margin-left: -3px; border-radius: 3px; background: linear-gradient(#ffd36b, rgba(255, 211, 107, 0)); }
.price-band.is-in .pb-rocket { animation: pb-launch 1.1s .3s cubic-bezier(.3, .7, .3, 1) both, pb-float 3.2s 1.5s ease-in-out infinite; }
.price-band.is-in .pb-rocket i { animation: pb-flame 1.1s .3s ease-out both; }
@keyframes pb-launch { 0% { transform: translate(-6px, 18px) rotate(35deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(0, 0) rotate(35deg); opacity: .95; } }
@keyframes pb-float { 0%, 100% { transform: translate(0, 0) rotate(35deg); } 50% { transform: translate(2px, -4px) rotate(35deg); } }
@keyframes pb-flame { 0% { height: 0; } 40% { height: 22px; } 100% { height: 8px; } }
.price-anchor { margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .2); color: #dbe5fa; font-size: .9rem; line-height: 1.45; text-align: center; }
.deliver-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(46, 211, 164, .1); color: #cfe9e0; font-size: .86rem; line-height: 1.45; }
.deliver-note svg { flex: none; margin-top: 2px; color: #2ed3a4; }
@media (prefers-reduced-motion: reduce) { .price-band.is-in .pb-rocket, .price-band.is-in .pb-rocket i, .price-band.is-in::after { animation: none; } .pb-rocket i { height: 8px; } }
.seg-tabs [role=tab][aria-selected=false] { background: transparent; border-color: transparent; }
.seg-tabs [role=tab][aria-selected=false]:hover { background: rgba(255, 255, 255, .5); }
.section-tablist.seg-tabs.is-nudge [role=tab][aria-selected=false] { animation: seg-glow 1.2s ease-in-out 2; }
@keyframes seg-glow { 0%, 100% { background: transparent; } 50% { background: rgba(255, 255, 255, .75); } }

/* v5.10.2 — paywall layout: plan | buy, the time comparison under the plan on wide screens, after the buy column on phones. */
.paywall-inner { grid-template-areas: "main buy" "recap buy"; grid-template-rows: auto 1fr; }
.paywall-main { grid-area: main; }
.paywall-buy { grid-area: buy; }
.value-recap { grid-area: recap; align-self: end; display: grid; gap: 10px; margin: 0 clamp(20px, 3.4vw, 40px) clamp(20px, 3.4vw, 36px); padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.vr-h { margin: 0 0 2px; color: #9fb0cf; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.vr-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px; gap: 14px; align-items: center; }
.vr-who { color: #cbd6ea; font-size: .9rem; font-weight: 600; }
.vr-bar { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.vr-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: rgba(182, 195, 222, .45); transition: width 1.1s cubic-bezier(.3, .7, .3, 1); }
.value-recap.is-in .vr-bar i { width: var(--w); }
.vr-row b { color: #b6c3de; font: 600 .92rem/1.2 var(--font-body); text-align: right; }
.vr-row.is-genius .vr-who { color: #fff; }
.vr-row.is-genius .vr-bar i { min-width: 14px; background: linear-gradient(90deg, #3b6cff, #2ed3a4); box-shadow: 0 0 12px rgba(46, 211, 164, .7); }
.vr-row.is-genius b { color: #fff; font-weight: 700; }
.vr-row.is-genius b span { color: #9fe7c9; }
@media (max-width: 860px) {
  .paywall-inner { grid-template-areas: "main" "buy" "recap"; grid-template-rows: none; }
  .value-recap { margin: 0; border-radius: 0; border-width: 1px 0 0; padding: 18px 20px 22px; }
}
@media (max-width: 560px) {
  .vr-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .vr-bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .vr-bar i { transition: none; } }
/* The price band is a button when payment is open. */
button.price-band { width: 100%; border: 0; cursor: pointer; font: inherit; color: #fff; transition: transform .15s, box-shadow .15s; }
button.price-band:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -18px rgba(59, 108, 255, 1); }
button.price-band:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button.price-band .price { display: block; margin: 0; color: #fff; font: 800 clamp(2.9rem, 9vw, 3.6rem)/1 var(--font-display); letter-spacing: -.045em; }
button.price-band .pb-sub { display: block; }
.pb-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .2); color: #fff; font-size: .86rem; font-weight: 700; }
/* v5.10.2 — rocket in the corner, above the price (never over it); time comparison: label and value, bar under. */
.price-band { padding-top: 28px; }
.pb-rocket { right: 12px; top: 8px; }
.paywall-buy .price-band .price, button.price-band .price { font-size: clamp(2.6rem, 7vw, 3.3rem); }
.vr-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
.vr-bar { grid-column: 1 / -1; grid-row: 2; height: 8px; }
.vr-who { font-size: .88rem; }
.vr-row b { font-size: .88rem; }
.value-recap { gap: 12px; }
/* v5.10.3 — the buy column, uncluttered: price, one short line, the button, three one-line reassurances. */
.price-anchor { padding: 0; border: 0; background: none; color: #cfe0ff; font-size: .95rem; font-weight: 600; }
.buy-trust { list-style: none; display: grid; gap: 8px; margin: 4px 0 0; padding: 0; }
.buy-trust li { display: flex; align-items: center; gap: 10px; color: #dbe5fa; font-size: .92rem; font-weight: 500; line-height: 1.3; }
.buy-trust svg { flex: none; color: #2ed3a4; }
.paywall-bonus { color: #9fe7c9 !important; font-weight: 600; }

/* =====================================================================================================
   v6 — "Genius en mouvement": more night blue, less to read, things that move and react.
   Animations: js/motion.js (GSAP + ScrollTrigger + Lottie). Nothing here hides content without motion.
   ===================================================================================================== */
.motion [data-anim] { opacity: 0; visibility: hidden; }
.caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: currentColor; animation: caret6 1s steps(1) infinite; }
@keyframes caret6 { 50% { opacity: 0; } }
.you-ring { transform-box: fill-box; transform-origin: center; animation: ring6 1.8s ease-out infinite; }
@keyframes ring6 { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.sc6-dots { display: flex; gap: 5px; flex: none; }
.sc6-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .22); }

/* Dark pages: the header sits on the night sky, like the home page. */
.page-dark .site-header { background: #081331; }
.page-dark .site-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, .08); }
.page-dark .site-header .brand, .page-dark .site-header .brand:hover { color: #fff; }
.page-dark .site-header { --spark: #4f7dff; }
.page-dark .nav-link { color: #c9d3ee; }
.page-dark .nav-link:hover { color: #fff; }
.page-dark .lang-switch { background: rgba(255, 255, 255, .08); }
.page-dark .lang-switch a { color: #a9b6d8; }
.page-dark .lang-switch a[aria-current="true"] { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }

/* ---------- Home: hero ---------- */
.h6-hero { padding: clamp(28px, 5vw, 72px) 0 clamp(48px, 7vw, 92px); }
.h6-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.h6-hero-copy { min-width: 0; }
.h6-hero h1 { margin: 20px 0 0; max-width: 12ch; font-size: clamp(2.4rem, 5.4vw, 4.3rem); }
.h6-hero .hx-sub { margin: 18px 0 28px; max-width: 32em; }
.h6-hero .scan-form--dark { margin: 0; max-width: 580px; }
.h6-hero .scan-form--dark .scan-under { justify-content: flex-start; }
@media (max-width: 900px) {
  .h6-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .h6-hero-copy { text-align: center; }
  .h6-hero h1, .h6-hero .hx-sub, .h6-hero .scan-form--dark { margin-left: auto; margin-right: auto; }
  .h6-hero .scan-form--dark .scan-under { justify-content: center; }
}
@media (max-width: 520px) {
  .h6-hero .scan-field { flex-direction: column; }
  .h6-hero .scan-field .btn { width: 100%; }
}

/* The scene: a little window where Genius works on its own, on three generic websites. */
.h6-scene { position: relative; width: 100%; max-width: 460px; justify-self: center; padding: 14px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85), 0 0 90px -30px rgba(59, 108, 255, .55); }
.sc6-top { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.sc6-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--ink); font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.sc6-url svg { flex: none; color: var(--green); }
.sc6-bar { margin: 12px 4px 0; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sc6-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3b6cff, #2ed3a4); transform-origin: 0 50%; transform: scaleX(.4); }
.sc6-label { margin: 10px 4px 0; min-height: 1.5em; color: #fff; font-weight: 600; font-size: .95rem; }
.sc6-stage { position: relative; margin-top: 10px; height: 250px; }
.sc6-pane { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; opacity: 0; visibility: hidden; }
.sc6-pane.is-on { opacity: 1; visibility: visible; }
.sc6-map { display: block; width: 100%; height: 100%; }
.sc6-count { position: absolute; left: 10px; top: 10px; display: flex; align-items: baseline; gap: 7px; padding: 8px 12px; border-radius: 14px; background: rgba(8, 19, 49, .86); border: 1px solid rgba(255, 255, 255, .12); color: #cbd6ea; font-size: .8rem; }
.sc6-count b { font: 800 1.6rem/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.sc6-pane.is-radar { display: grid; place-items: center; }
.sc6-radar { width: min(230px, 86%); aspect-ratio: 1; }
.sc6-pane.is-plan { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 4px; }
.sc6-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc6-tile { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 14px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #fff; font-weight: 600; font-size: .86rem; line-height: 1.25; }
.sc6-tile svg { flex: none; color: #2ed3a4; }
.sc6-ready { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font: 700 1.05rem var(--font-display); }
.sc6-check { width: 40px; height: 40px; flex: none; }
.sc6-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 4px 2px; font-size: .78rem; color: #7f8bb3; }
.sc6-steps { display: flex; gap: 6px; }
.sc6-steps i { width: 6px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .2); transition: width .3s, background-color .3s; }
.sc6-steps i.is-on { width: 18px; background: #3b6cff; }
@media (max-width: 900px) { .h6-scene { max-width: 420px; } .sc6-stage { height: 230px; } }

/* ---------- Home: the time race ---------- */
.h6-race { padding: clamp(52px, 7vw, 92px) 0; background: linear-gradient(180deg, #0c1b3f 0%, #081331 100%); }
.h6-race h2 { margin: 0 auto; max-width: 22ch; text-align: center; font-size: clamp(1.75rem, 4vw, 2.9rem); line-height: 1.12; }
.h6-race h2 s { color: #8593a8; text-decoration-thickness: 3px; text-decoration-color: #ff6b81; }
.race6 { display: grid; gap: 12px; max-width: 760px; margin: clamp(26px, 4vw, 44px) auto 0; }
.r6-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who txt" "bar bar"; gap: 8px 12px; align-items: baseline; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.r6-who { grid-area: who; color: #a9b6d8; font-size: .92rem; font-weight: 500; }
.r6-row b { grid-area: txt; text-align: right; color: #fff; font: 600 1rem var(--font-display); }
.r6-bar { grid-area: bar; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.r6-bar i { display: block; height: 100%; width: var(--w); min-width: 14px; border-radius: inherit; background: #55627d; }
.r6-row.is-genius { background: rgba(59, 108, 255, .13); border-color: rgba(127, 156, 255, .5); box-shadow: 0 0 50px -20px rgba(59, 108, 255, .8); }
.r6-row.is-genius .r6-who { color: #fff; font-weight: 700; }
.r6-row.is-genius .r6-bar i { background: linear-gradient(90deg, #3b6cff, #2ed3a4); box-shadow: 0 0 12px rgba(46, 211, 164, .7); }
.r6-row.is-genius b { color: #8ff0d0; }

/* ---------- Home: three steps on one line ---------- */
.h6-how .section-head { margin-bottom: clamp(30px, 4vw, 52px); }
.how6 { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 36px); max-width: 980px; margin: 0 auto; }
.how6-line { position: absolute; left: 16.6%; width: 66.8%; top: 31px; height: 2px; overflow: visible; pointer-events: none; }
.how6-line path { fill: none; stroke: #b8c8ff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.how6 li { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; }
.how6-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--night); color: #8ff0d0; box-shadow: 0 14px 30px -16px rgba(12, 27, 63, .7); transition: transform .35s, box-shadow .35s, background-color .35s; }
.how6 li.is-on .how6-icon { background: linear-gradient(140deg, #3b6cff, #2347c9); color: #fff; transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(59, 108, 255, .85); }
.how6-n { position: absolute; z-index: 2; top: -8px; left: calc(50% + 22px); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--line); font: 700 .78rem var(--font-display); color: var(--ink); }
.how6 b { margin-top: 8px; font: 600 1.2rem/1.25 var(--font-display); color: var(--ink); }
.how6 small { max-width: 24ch; color: var(--slate); font-size: .98rem; line-height: 1.45; }
@media (max-width: 760px) {
  .how6 { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 420px; }
  .how6-line { left: 31px; top: 32px; width: 2px; height: calc(100% - 64px); }
  .how6-line { display: none; }
  .how6 li { grid-template-columns: 64px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 16px; row-gap: 2px; align-items: center; }
  .how6-icon { grid-row: span 2; }
  .how6 b { margin-top: 0; align-self: end; }
  .how6 small { align-self: start; max-width: none; }
  .how6-n { left: 46px; top: -6px; }
}

/* ---------- Home: what Genius finds ---------- */
.h6-find { padding: clamp(64px, 9vw, 112px) 0; }
.h6-find .section-head { margin-bottom: clamp(22px, 3vw, 34px); }
.h6-find .section-head p { color: #a9b6d8; }
.find6 { max-width: 980px; margin: 0 auto; }
.find6-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 auto 18px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.find6-tabs::-webkit-scrollbar { display: none; }
.find6-tabs button { flex: none; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #c9d3ee; font: 600 .92rem var(--font-body); cursor: pointer; transition: background-color .2s, color .2s; }
.find6-tabs button:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.find6-tabs button[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--ink); }
@media (max-width: 760px) { .find6-tabs { justify-content: flex-start; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 2px var(--gutter); } }
.find6-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; padding: 14px; border-radius: 26px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.find6-panel[hidden] { display: none; }
@media (max-width: 760px) { .find6-panel { grid-template-columns: minmax(0, 1fr); padding: 10px; border-radius: 22px; } }
.find6-big { padding: 22px; border-radius: 18px; color: #cbd6ea; background: radial-gradient(120% 120% at 0% 0%, #1d3a9e 0%, #0c1b3f 72%); }
.find6-biz { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #fff; font-weight: 600; }
.find6-tag { flex: none; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); color: #9fb0cf; font-size: .72rem; font-weight: 600; }
.find6-num b { display: block; margin-top: 16px; color: #fff; font: 800 clamp(4.2rem, 13vw, 6.4rem)/.88 var(--font-display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.find6-label { margin-top: 10px; max-width: 24ch; color: #fff; font: 600 1.12rem/1.3 var(--font-display); }
.find6-chips { display: grid; gap: 8px; margin-top: 18px; }
.find6-chips span { display: block; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); font-size: .88rem; line-height: 1.35; }
.find6-chips b { margin-right: 4px; color: #fff; font-family: var(--font-display); }
.find6-chips .is-alert { background: rgba(255, 107, 129, .14); color: #ffd3da; }
.find6-chips .is-alert b { color: #ff9aaa; }
.find6-list { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; background: #fff; color: var(--ink); }
.find6-q { display: flex; align-items: center; gap: 6px; color: var(--slate); font-size: .85rem; }
.find6-q svg { flex: none; }
.find6-list ul { list-style: none; display: grid; gap: 8px; }
.find6-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--mist); font-weight: 600; font-size: .95rem; }
.find6-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find6-list li.is-you { background: var(--violet-tint); box-shadow: inset 0 0 0 1.5px #b8c8ff; }
.find6-lock { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); color: var(--violet-ink); font-weight: 600; font-size: .92rem; text-decoration: none; }
.find6-lock span { flex: 1; }
.find6-lock:hover { border-style: solid; border-color: var(--violet); }

/* ---------- Home: the plan's cards ---------- */
.h6-plan .section-head { margin-bottom: clamp(26px, 4vw, 44px); }
.plan6-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.p6-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 14px 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .2s, box-shadow .2s; }
.p6-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.p6-card h3 { margin-top: 10px; font-size: 1.14rem; }
.p6-card > p { color: var(--slate); font-size: .95rem; line-height: 1.45; }
.p6-mock { position: relative; display: grid; gap: 8px; align-content: center; min-height: 176px; padding: 14px; border-radius: 16px; background: var(--mist); overflow: hidden; }
.mock-watch { background: var(--night); }
.mw-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.mw-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .12); color: #fff; font: 700 .8rem var(--font-display); font-style: normal; }
.mw-line { display: block; height: 9px; width: var(--w); border-radius: 5px; background: rgba(255, 255, 255, .22); }
.mw-row em { font-style: normal; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.mw-row em.b-ads { background: #fff; color: var(--ink); }
.mock-week6, .mock-kit6 { align-content: start; }
.mw6-days, .mk6-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mw6-days button, .mk6-tabs button { flex: 1; min-height: 36px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--slate); font: 600 .82rem var(--font-body); cursor: pointer; transition: background-color .2s, color .2s; }
.mw6-days button[aria-selected="true"], .mk6-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.mw6-post { margin-top: 6px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: .92rem; line-height: 1.45; min-height: 4.6em; }
.mk6-pane { display: grid; gap: 4px; margin-top: 6px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: .9rem; color: var(--slate); }
.mk6-pane b { color: var(--ink); }
.plan6-nav { display: none; }
.plan6-dots { display: flex; justify-content: center; gap: 6px; }
.plan6-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--line-strong); transition: width .25s, background-color .25s; }
.plan6-dots i.is-on { width: 20px; background: var(--violet); }
.plan6-more { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: var(--ink-2); font-weight: 500; text-align: center; }
.plan6-more svg { flex: none; color: var(--violet); }
@media (max-width: 760px) {
  .plan6-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scrollbar-width: none; }
  .plan6-track::-webkit-scrollbar { display: none; }
  .p6-card { flex: 0 0 84%; scroll-snap-align: center; }
  .p6-card:hover { transform: none; }
  .plan6-nav { display: block; margin-top: 8px; }
}

/* ---------- Home: pricing on the night sky ---------- */
.h6-price { padding: clamp(64px, 9vw, 112px) 0; }
.h6-price .section-head { margin-bottom: clamp(26px, 4vw, 44px); }
.price6 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 18px; max-width: 940px; margin: 0 auto; align-items: stretch; }
@media (max-width: 760px) { .price6 { grid-template-columns: minmax(0, 1fr); } .p6-paid { order: -1; } }
.p6-free, .p6-paid { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 30px); border-radius: 24px; color: #cbd6ea; }
.p6-free { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.p6-paid { background: linear-gradient(var(--space-2), var(--space)) padding-box, var(--brand-gradient) border-box; border: 1px solid transparent; box-shadow: 0 30px 70px -30px rgba(58, 92, 255, .65); }
.p6-free h3, .p6-paid h3 { color: #fff; font-size: 1.15rem; }
.p6-zero { color: #fff; font: 700 3rem/1 var(--font-display); letter-spacing: -.04em; }
.p6-zero small { font: 500 .95rem var(--font-body); color: #9fb0cf; letter-spacing: 0; }
.p6-free ul, .p6-paid ul { list-style: none; display: grid; gap: 10px; font-size: .97rem; }
.p6-free li, .p6-paid li { display: flex; gap: 10px; align-items: flex-start; }
.p6-free li svg, .p6-paid li svg { flex: none; margin-top: 4px; color: #4fe0b0; }
.p6-guarantee { color: #9fe7c9; font-size: .9rem; font-weight: 600; }
.p6-free .btn, .p6-paid .btn { margin-top: auto; }
.btn-ghost-dark { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .22); }
.btn-ghost-dark:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .1); }
.pb6-wrap { perspective: 800px; touch-action: manipulation; }
a.price-band { color: #fff; text-decoration: none; }
a.price-band:hover { color: #fff; }
.pb6 .price { display: block; color: #fff; font: 800 clamp(2.8rem, 8vw, 3.4rem)/1 var(--font-display); letter-spacing: -.045em; }
.pb6 .pb-sub { display: block; }
.motion [data-tilt] .pb-rocket { animation: none !important; }
.motion [data-tilt] .pb-rocket i { animation: none !important; height: 10px; }
.h6-faq .faq summary { font-size: 1.02rem; }

/* ---------- Free analysis: one block, on the night sky ---------- */
.proc6 { min-height: calc(100svh - 68px); padding: clamp(14px, 3vw, 40px) 0 40px; }
.proc6-wrap { position: relative; max-width: 560px; display: grid; gap: 14px; }
.proc6-card { display: flex; flex-direction: column; padding: 16px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85), 0 0 90px -30px rgba(59, 108, 255, .5); }
.p6-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .8rem; color: #9fb0cf; }
.p6-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #dbe3ff; font-weight: 600; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ed3a4; box-shadow: 0 0 0 0 rgba(46, 211, 164, .6); animation: live6 1.6s infinite; }
@keyframes live6 { 70% { box-shadow: 0 0 0 7px rgba(46, 211, 164, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 211, 164, 0); } }
.p6-site { margin-top: 10px; color: #fff; font-size: clamp(1.3rem, 5vw, 1.7rem); line-height: 1.15; letter-spacing: -.025em; overflow-wrap: anywhere; }
.p6-bar { margin-top: 12px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.p6-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b6cff, #2ed3a4); transition: width .8s cubic-bezier(.3, .7, .3, 1); }
.p6-label { margin-top: 12px; min-height: 2.9em; color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.p6-label small { display: block; margin-bottom: 2px; color: #7db0ff; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.p6-stage { position: relative; margin-top: 8px; height: clamp(240px, 42svh, 320px); }
.p6-scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; }
.proc6-card:not(.is-motion)[data-scene="site"] [data-scene-pane="site"],
.proc6-card:not(.is-motion)[data-scene="map"] [data-scene-pane="map"],
.proc6-card:not(.is-motion)[data-scene="radar"] [data-scene-pane="radar"],
.proc6-card:not(.is-motion)[data-scene="plan"] [data-scene-pane="plan"] { opacity: 1; visibility: visible; }
.p6-win { flex: 1; display: flex; flex-direction: column; border-radius: 16px; background: #f7f9fd; overflow: hidden; }
.p6-winbar { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: #e7ecf5; }
.p6-winbar .sc6-dots i { background: #c3cbdb; }
.p6-url { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--ink); font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.p6-url svg { flex: none; color: var(--green); }
.p6-winbody { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.p6-winbody .sk { display: block; border-radius: 6px; background: #dfe5f0; }
.p6-winbody .sk.nav { height: 10px; background: #e9edf5; }
.p6-winbody .sk.h { height: 16px; width: 86%; margin-top: 6px; background: #b9c6de; }
.p6-winbody .sk.h.s { width: 58%; margin-top: 0; }
.p6-winbody .sk.p { height: 8px; width: 92%; }
.p6-winbody .sk.p.s { width: 70%; }
.p6-winbody .sk.btn { height: 26px; width: 44%; margin-top: 4px; border-radius: 8px; background: var(--violet); }
.p6-winbody .sk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; }
.p6-winbody .sk.card { height: 44px; background: #e6ebf4; }
.p6-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #2ed3a4; box-shadow: 0 0 18px 4px rgba(46, 211, 164, .55); opacity: 0; }
.p6-map { width: 100%; height: 100%; border-radius: 16px; }
.p6-mapchip { position: absolute; left: 10px; top: 10px; display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 14px; background: rgba(8, 19, 49, .86); border: 1px solid rgba(255, 255, 255, .12); color: #cbd6ea; font-size: .8rem; }
.p6-mapchip b { color: #fff; font: 800 1.7rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.p6-scene[data-scene-pane="radar"] { align-items: center; }
.p6-radar { width: min(240px, 78%); aspect-ratio: 1; }
.p6-blips { position: absolute; inset: 0; list-style: none; pointer-events: none; }
.p6-blips li { position: absolute; max-width: 46%; padding: 6px 10px; border-radius: 12px; background: rgba(8, 19, 49, .9); border: 1px solid rgba(125, 176, 255, .35); color: #dbe5fa; font-size: .76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .3s, box-shadow .3s, color .3s; }
.p6-blips li:nth-child(1) { left: 0; top: 6%; } .p6-blips li:nth-child(2) { right: 0; top: 20%; }
.p6-blips li:nth-child(3) { left: 0; bottom: 16%; } .p6-blips li:nth-child(4) { right: 0; bottom: 4%; }
.p6-blips li.is-hit { border-color: #2ed3a4; color: #fff; box-shadow: 0 0 22px -6px rgba(46, 211, 164, .9); }
.p6-scene[data-scene-pane="plan"] { gap: 16px; }
.p6-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p6-tile { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 14px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: .86rem; line-height: 1.25; }
.p6-tile svg { flex: none; color: #2ed3a4; }
.p6-tile b { font-weight: 600; }
.p6-ready { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font: 700 1.05rem var(--font-display); }
.proc6-card.is-motion .p6-ready { opacity: 0; visibility: hidden; }
.p6-check { width: 64px; height: 64px; flex: none; }
.p6-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.p6-stats div { min-width: 0; padding: 9px 6px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); text-align: center; }
.p6-stats b { display: block; color: #fff; font: 750 1.35rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.p6-stats small { display: block; color: #9fb0cf; font-size: .74rem; line-height: 1.2; }
.proc6-foot { color: #8fa0c4; font-size: .86rem; text-align: center; }
.proc6 .understood { margin: 0; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.proc6 .understood-text, .report-head.is-night .understood-text { color: #e4ebff; }
.proc6 .understood .prov-ai, .report-head.is-night .understood .prov-ai { color: #9fbaff; }
.proc6 .understood-fix summary, .report-head.is-night .understood-fix summary { color: #9fbaff; }
.proc6 .understood-fix label, .report-head.is-night .understood-fix label, .proc6 .understood-fix small, .report-head.is-night .understood-fix small { color: #b6c2e2; }
.proc6 .processing-admin { margin: 0; }
@media (max-width: 420px) { .proc6-card { padding: 12px; border-radius: 22px; } .p6-stage { height: clamp(220px, 38svh, 300px); } }

/* ---------- Reports: the head on the night sky, the plan as glass tiles ---------- */
.report-head.is-night { position: relative; overflow: hidden; background: var(--space); border-bottom: 0; color: #b6c2e2; }
.report-head.is-night .wrap { position: relative; }
.report-head.is-night .crumb { background: rgba(255, 255, 255, .08); color: #c9d6ff; }
.report-head.is-night h1 { color: #fff; }
.report-head.is-night .report-meta { color: #9fb0cf; }
.report-head.is-night .report-meta strong { color: #fff; }
.report-head.is-night .zone-badge { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
.report-head.is-night .zone-badge.is-local { background: rgba(46, 211, 164, .14); border-color: rgba(46, 211, 164, .35); color: #9ff0d4; }
.report-head.is-night .understood { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.report-head.is-night .plan-preview, .report-head.is-night .plan-ready { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; }
.report-head.is-night .plan-preview h2, .report-head.is-night .plan-ready h2 { color: #fff; }
.report-head.is-night .plan-ready-lead { color: #b6c2e2; }
.report-head.is-night .diag-kicker { color: #8ff0d0; }
.report-head.is-night .ready-tile { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #fff; }
.report-head.is-night .ready-tile:hover { background: rgba(255, 255, 255, .1); border-color: rgba(127, 156, 255, .6); }
.report-head.is-night .rt-icon { background: rgba(59, 108, 255, .2); border-color: rgba(127, 156, 255, .35); color: #9fbaff; }
.report-head.is-night .rt-body b { color: #fff; }
.report-head.is-night .rt-body small { color: #9fb0cf; }
.report-head.is-night .ready-tile > svg:last-child { color: #7f8bb3; }
.report-head.is-night .rt-lock { background: rgba(127, 176, 255, .16); color: #b9d2ff; }
.report-head.is-night .plan-doc .btn-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .22); }
.report-head.is-night .site-first { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #cbd6ea; }
.report-head.is-night .site-first h2 { color: #fff; }
/* Phones: the plan's pieces as a 2-column grid of figures, their one-line explanation kept for wider screens. */
@media (max-width: 640px) {
  .report-head .ready-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .report-head .ready-tile { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: start; gap: 8px; padding: 12px; }
  .report-head .ready-tile .rt-icon { width: 32px; height: 32px; border-radius: 10px; }
  .report-head .ready-tile .rt-body { grid-column: 1 / -1; grid-row: 2; }
  .report-head .ready-tile .rt-body small { display: none; }
  .report-head .ready-tile .rt-unit { display: block; margin-top: 4px; font-size: .86rem; line-height: 1.25; }
  .report-head .ready-tile > svg:last-child, .report-head .ready-tile .rt-lock { grid-column: 2; grid-row: 1; justify-self: end; }
  .report-head .plan-ready-lead { font-size: .95rem; }
}

/* Reports: what used to be long now opens on demand. */
.budget-why { margin-top: 8px; }
.budget-why summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: #9fbaff; font-size: .9rem; font-weight: 600; list-style: none; }
.budget-why summary::-webkit-details-marker, .pp-more summary::-webkit-details-marker { display: none; }
.budget-why summary::after, .pp-more summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .2s; }
.budget-why[open] summary::after, .pp-more[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.budget-why p { margin-top: 8px; }
.pp-more { margin-top: 14px; }
.pp-more summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--violet-tint); color: var(--violet-ink); font-weight: 600; font-size: .92rem; list-style: none; }
.pp-more[open] summary { margin-bottom: 8px; }
@media print { .motion [data-anim] { opacity: 1 !important; visibility: visible !important; } }
.h6-race h2 s { white-space: nowrap; }
.p6-mock { min-height: 236px; }
/* Dark pages end on the night sky too. */
.page-dark .site-footer { background: #081331; border-top-color: rgba(255, 255, 255, .08); color: #9fb0cf; --spark: #4f7dff; }
.page-dark .site-footer .brand, .page-dark .site-footer .brand:hover { color: #fff; }
.page-dark .site-footer a, .page-dark .site-footer .link-button { color: #c9d3ee; }
.page-dark .site-footer a:hover, .page-dark .site-footer .link-button:hover { color: #fff; }
.how6-line path { stroke: #c9d6ff; stroke-width: 2; stroke-dasharray: none; }
/* Free report: the locked pieces of a chapter, one compact list (one line each) instead of a block each. */
.lk-stack { display: grid; margin: 14px 0 0; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); overflow: hidden; box-shadow: var(--shadow-1); }
.lk-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; color: var(--ink); text-decoration: none; transition: background-color .15s; }
.lk-item + .lk-item { border-top: 1px solid var(--line); }
.lk-item:hover { background: var(--mist); color: var(--ink); }
.lk-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--night); color: #8ff0d0; }
.lk-tx { min-width: 0; display: grid; gap: 2px; }
.lk-tx b { font-size: .95rem; line-height: 1.3; }
.lk-tx small { color: var(--slate); font-size: .84rem; line-height: 1.35; }
.lk-pad { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e8eeff; color: #2346c8; }
@media (max-width: 760px) { .plan6-track { align-items: flex-start; } }

/* ---------- v6.1 — the free analysis never looks still ---------- */
.p6-eta b { color: #dbe3ff; font-weight: 600; font-variant-numeric: tabular-nums; }
.p6-hint { margin-top: 4px; min-height: 1.35em; color: #9fb0cf; font-size: .82rem; line-height: 1.35; }
.p6-label { min-height: 1.4em; }
.p6-writing { display: grid; gap: 7px; padding: 4px 6px; overflow: hidden; }
.p6-writing i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, rgba(125, 176, 255, .55), rgba(46, 211, 164, .45)); transform: scaleX(0); transform-origin: 0 50%; }
.p6-tile { transition: border-color .35s, box-shadow .35s, background-color .35s; }
.p6-tile.is-glow { border-color: rgba(46, 211, 164, .65); background: rgba(46, 211, 164, .1); box-shadow: 0 0 26px -8px rgba(46, 211, 164, .7); }

/* ---------- v6.1 — reports: pictures that play ---------- */
/* The Google page writing itself. */
.serp6 { position: relative; margin: 14px 0; padding: 14px; border-radius: 20px; background: var(--night); background-image: radial-gradient(120% 100% at 100% 0%, rgba(14, 124, 123, .35), transparent 60%); color: #cbd6ea; cursor: pointer; }
.serp6-q { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: .95rem; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); min-width: 0; }
.serp6-q svg { flex: none; color: var(--violet); }
.serp6-q span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp6-list { display: grid; gap: 8px; margin-top: 12px; }
.serp6-row { position: relative; display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.serp6-tag { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b9d2ff; }
.serp6-l { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .2); }
.serp6-l.is-t { height: 12px; background: rgba(125, 176, 255, .55); }
.serp6-l.is-blur { filter: blur(2px); background: rgba(255, 255, 255, .35); }
.serp6-row small { color: #8fa0c4; font-size: .76rem; }
.serp6-row.is-org { opacity: .55; }
.serp6-row.is-org .serp6-l.is-t { background: rgba(255, 255, 255, .3); }
.serp6-row.is-you { background: #fff; border-color: #b8c8ff; color: var(--ink); }
.serp6-row.is-you .serp6-tag { color: var(--violet-ink); }
.serp6-h { color: #1a0dab; font-size: 1rem; line-height: 1.3; }
.serp6-d { color: var(--ink-2); font-size: .88rem; line-height: 1.4; }
.serp6-row.is-you small { color: var(--green); }
.serp6-row.is-you .serp6-l.is-blur { background: var(--mist-2); }
.serp6-badge { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #e8eeff; color: #2346c8; font-size: .72rem; font-weight: 700; }
.serp6-badge.is-ready { background: var(--green-tint); color: var(--green); }
.serp6-cap { margin-top: 8px; text-align: right; color: #7f8bb3; font-size: .72rem; }

/* The 375 versions, as reels. */
.reels6 { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 8px; margin: 14px 0; padding: 16px 12px; border-radius: 20px; background: var(--night); background-image: radial-gradient(120% 120% at 0% 0%, #3b2a8f 0%, transparent 60%); color: #cbd6ea; cursor: pointer; }
.reel6 { display: grid; justify-items: center; gap: 6px; }
.reel6 small { font-size: .7rem; font-weight: 600; color: #9fb0cf; }
.reel6-win { width: 48px; height: 52px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: inset 0 8px 10px -8px rgba(12, 27, 63, .35), inset 0 -8px 10px -8px rgba(12, 27, 63, .35); }
.reel6-strip span { display: grid; place-items: center; height: 52px; color: var(--ink); font: 800 1.5rem/1 var(--font-display); }
.reel6.is-concept .reel6-win { background: #e9e3ff; }
.reel6-x, .reel6-eq { padding-bottom: 14px; color: #9fb0cf; font: 700 1.1rem var(--font-display); }
.reel6-total { display: grid; justify-items: center; padding: 0 4px 2px; }
.reel6-total b { color: #fff; font: 800 2.2rem/1 var(--font-display); letter-spacing: -.04em; }
.reel6-total small { color: #c9b6ff; font-size: .72rem; font-weight: 700; }
@media (max-width: 420px) { .reel6-win { width: 40px; height: 46px; } .reel6-strip span { height: 46px; font-size: 1.3rem; } .reels6 { gap: 5px; } }

/* The SEO page drawing itself. */
.pagebuild6 { position: relative; margin: 14px 0; border-radius: 18px; border: 1px solid var(--line); background: #f7f9fd; overflow: hidden; box-shadow: var(--shadow-1); cursor: pointer; }
.pg6-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #e7ecf5; }
.pg6-bar .sc6-dots i { background: #c3cbdb; }
.pg6-url { flex: 1; min-width: 0; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--slate); font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg6-body { display: grid; gap: 8px; padding: 16px 16px 20px; }
.pg6-tag { justify-self: start; padding: 2px 7px; border-radius: 6px; background: var(--ink); color: #fff; font: 700 .72rem var(--font-display); }
.pg6-l { display: block; height: 9px; width: 92%; border-radius: 5px; background: #dfe5f0; }
.pg6-l.is-h { height: 15px; width: 84%; background: #b9c6de; }
.pg6-l.is-h.s { width: 56%; }
.pg6-l.s { width: 66%; }
.pg6-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.pg6-blocks i { display: block; height: 52px; border-radius: 10px; background: #e6ebf4; }
.pg6-btn { display: block; width: 40%; height: 28px; border-radius: 8px; background: var(--violet); }
.pg6-badge { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #e8eeff; color: #2346c8; font-size: .78rem; font-weight: 700; box-shadow: var(--shadow-1); }

/* The week of posts: the days light up in turn. */
.lk-week.is-live span { animation: wk6 4.8s infinite; }
.lk-week.is-live span:first-child { background: var(--paper); color: var(--slate); border-color: var(--line); }
.lk-week.is-live span:nth-child(2) { animation-delay: 1.2s; }
.lk-week.is-live span:nth-child(3) { animation-delay: 2.4s; }
.lk-week.is-live span:nth-child(4) { animation-delay: 3.6s; }
@keyframes wk6 { 0%, 22% { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); } 27%, 100% { background: var(--paper); color: var(--slate); border-color: var(--line); transform: none; } }
/* The skeletons of locked pieces breathe a little: something is there. */
.lk-skeleton .lk-line { background: linear-gradient(90deg, var(--mist-2) 0%, #f6f8fd 50%, var(--mist-2) 100%); background-size: 200% 100%; animation: sk6 2.4s ease-in-out infinite; }
@keyframes sk6 { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* The plan's tiles, at the top of the report, arrive one after the other. */
.motion .report-head .ready-tile { animation: rt6 .55s cubic-bezier(.3, .7, .3, 1) both; }
.motion .report-head .ready-tile:nth-child(2) { animation-delay: .08s; } .motion .report-head .ready-tile:nth-child(3) { animation-delay: .16s; }
.motion .report-head .ready-tile:nth-child(4) { animation-delay: .24s; } .motion .report-head .ready-tile:nth-child(5) { animation-delay: .32s; }
.motion .report-head .ready-tile:nth-child(6) { animation-delay: .4s; }
@keyframes rt6 { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.motion .report-head .rt-lock { animation: lk6 3.6s 1.2s ease-in-out infinite; }
@keyframes lk6 { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(14deg); } 92% { transform: rotate(-12deg); } 95% { transform: rotate(8deg); } }
@media (max-width: 560px) { .reels6 .reel6-eq { display: none; } .reels6 .reel6-total { flex-basis: 100%; margin-top: 4px; } }
.pg6-badge { top: 54px; bottom: auto; }
.p6-hint { min-height: 2.7em; }
.p6-mapchip b.is-wait { letter-spacing: .08em; animation: wait6 1.2s ease-in-out infinite; }
@keyframes wait6 { 50% { opacity: .35; } }
.serp6-badge { position: static; justify-self: start; margin-top: 2px; }

/* ---------- v6.2 — things that float, follow and answer the hand ---------- */
.h6-scene-zone { position: relative; width: 100%; max-width: 460px; justify-self: center; }
.h6-scene-zone .h6-scene { max-width: none; }
.float6 { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(15, 30, 72, .82); border: 1px solid rgba(143, 168, 255, .35); color: #e4ebff; font-size: .8rem; font-weight: 600; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.float6 svg { color: #8ff0d0; flex: none; }
.motion .float6 { opacity: 0; }
.f6-1 { left: -22px; top: 74px; }
.f6-2 { right: -26px; top: 46%; }
.f6-3 { left: -14px; bottom: 54px; }
.f6-4 { right: 18px; top: -16px; }
@media (max-width: 900px) { .f6-1 { left: 4px; top: 66px; } .f6-2 { right: 4px; } .f6-3 { left: 6px; bottom: 44px; } .f6-4 { right: 10px; top: -14px; } .float6 { font-size: .74rem; padding: 6px 10px; } }
.pb6-wrap { position: relative; }
.f6-a { left: -10px; top: -16px; }
.f6-b { right: -6px; bottom: -14px; }
/* Light under the pointer: on cards, and on the night sections. */
.p6-card, .find6-big, .reels6, .ready-tile, .gen-hero { position: relative; }
.glare6 { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .16), transparent 60%); }
.is-lit > .glare6 { opacity: 1; }
.spot6 { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(79, 125, 255, .16), transparent 62%); }
.spot6.is-on { opacity: 1; }
.night > .wrap, .hx > .wrap, .report-head.is-night > .wrap { z-index: 1; }
/* Animated by script: their own transform transitions would fight it. */
@media (pointer: fine) { .motion .btn, .motion .p6-card, .motion .ready-tile, .motion button.price-band { transition-property: box-shadow, background-color, border-color, filter, color; } .motion .p6-card:hover, .motion .ready-tile:hover { transform: none; } }
.btn:active { scale: .97; }
/* Titles rising word by word. */
.w6 { display: inline-block; will-change: transform; }
/* The hero arrives with the page (no script needed, so nothing flashes). */
.motion .h6-hero .pill, .motion .h6-hero h1, .motion .h6-hero .hx-sub, .motion .h6-hero .scan-form { animation: rise6 .8s cubic-bezier(.2, .7, .2, 1) both; }
.motion .h6-hero h1 { animation-delay: .08s; } .motion .h6-hero .hx-sub { animation-delay: .18s; } .motion .h6-hero .scan-form { animation-delay: .28s; }
.motion .h6-scene-zone { animation: rise6 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise6 { from { opacity: 0; transform: translateY(18px); } }
/* After the click: three steps, a line joining them. */
.pay-steps { --line: 1; position: relative; list-style: none; display: grid; gap: 12px; margin: 6px 0 0; padding: 0; }
.pay-steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(#3b6cff, #2ed3a4); transform: scaleY(var(--line)); transform-origin: top; opacity: .7; }
.pay-steps li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; }
.ps-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #13265a; border: 1px solid rgba(127, 156, 255, .45); color: #8ff0d0; }
.pay-steps b { display: block; color: #fff; font-size: .92rem; line-height: 1.25; }
.pay-steps small { display: block; color: #9fb0cf; font-size: .82rem; line-height: 1.3; }
/* Confetti, once. */

.confetti6 { position: absolute; z-index: 5; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }
/* Reading progress on long reports. */
.read6 { position: fixed; left: 0; right: 0; top: 68px; z-index: 60; height: 3px; pointer-events: none; }
.read6 i { display: block; height: 100%; background: linear-gradient(90deg, #3b6cff, #2ed3a4); transform: scaleX(0); transform-origin: 0 50%; }
.pg6-badge.is-ready { background: var(--green-tint); color: var(--green); }
.f6-1 { left: -30px; top: 150px; } .f6-2 { right: -34px; top: 58%; } .f6-3 { left: -20px; bottom: 70px; }
@media (max-width: 900px) { .f6-1 { left: 8px; top: auto; bottom: 92px; } .f6-2 { right: 8px; top: 62%; } .f6-3 { display: none; } }
/* The "no website yet" block, on the night sky: light text (it was written for a white background). */
.report-head.is-night .site-first p { color: #cbd6ea; }
.report-head.is-night .site-first p b { color: #8ff0d0; }
.report-head.is-night .site-first li { color: #e4ebff; }
.report-head.is-night .site-first li svg { color: #4fe0b0; }
.report-head.is-night .site-first-more { color: #9fbaff; }
.report-head.is-night .site-first-more:hover { color: #fff; }

/* ---------- v6.2.2 — readability pass (contrast measured on every page) ---------- */
.gen-stats span { color: #dbe3f4; }
.gen-hero p { color: #dde5f5; }
.gen-hero .gen-status-note { color: #dde5f5; }
.price-band { background: linear-gradient(120deg, #2f5bf2 0%, #3b6cff 50%, #17a37f 125%); }
.price-band .price, .price-band .pb-sub { text-shadow: 0 1px 2px rgba(8, 19, 49, .35); }
.pb-sub { color: #fff; }
.cl-n, .chip-dim { color: var(--slate); }
/* The plan being written sits on the same night sky as the report's head (full width, no white strip between). */
.page-dark main > .build-top { position: relative; background: var(--space); box-shadow: 0 0 0 100vmax var(--space); clip-path: inset(0 -100vmax); padding-bottom: 8px; }
.page-dark main > .build-top .notice-info { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #dbe5fa; }
.page-dark main > .build-top .notice-info a { color: #9fbaff; }
/* "Being written" marks inside the yellow lock pills: dark dots that can be seen. */
.lk-pill .writing-mark, .lk-pad .writing-mark, .serp6-badge .writing-mark, .pg6-badge .writing-mark, .lk-badge .writing-mark { color: #2346c8; }
.writing-mark i { opacity: .55; }
@media (max-width: 640px) {
  .report-head .ready-tile .rt-body small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: .74rem; line-height: 1.3; }
}

/* ---------- v6.4 — the plan being written comes alive ---------- */
.build-pen { position: relative; width: 112px; height: 112px; flex: none; }
.build-pen-lottie { position: absolute; inset: -8px; }
.build-pen-lottie.is-ready + .sw { visibility: hidden; }
@media (max-width: 560px) { .build-main { grid-template-columns: 1fr; justify-items: center; text-align: center; } .build-kicker { justify-content: center; } }
.build-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
@media (min-width: 760px) { .build-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bb-tile { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 8px; align-items: center; padding: 12px; border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #9fb0cf; transition: border-color .4s, background-color .4s, box-shadow .4s, color .4s; }
.bb-tile b { font-size: .86rem; line-height: 1.25; font-weight: 600; }
.bb-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .06); color: #7f8bb3; transition: background-color .4s, color .4s; }
.bb-state { position: relative; width: 26px; height: 26px; display: grid; place-items: center; }
.bb-dots { display: none; gap: 3px; } .bb-dots i { width: 4px; height: 4px; border-radius: 50%; background: #8ff0d0; animation: writingdot 1.2s infinite; }
.bb-dots i:nth-child(2) { animation-delay: .2s; } .bb-dots i:nth-child(3) { animation-delay: .4s; }
.bb-check { position: absolute; inset: 0; opacity: 0; }
.bb-lines { position: absolute; left: 12px; right: 12px; bottom: 6px; display: none; gap: 3px; }
.bb-lines i { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(125, 176, 255, .7), rgba(46, 211, 164, .6)); transform-origin: 0 50%; animation: bbline 2.4s ease-in-out infinite; }
.bb-lines i:nth-child(2) { width: 70%; animation-delay: .6s; }
@keyframes bbline { 0% { transform: scaleX(0); } 45%, 70% { transform: scaleX(1); } 100% { transform: scaleX(0); opacity: .2; } }
.bb-tile.is-active { color: #fff; border-color: rgba(127, 156, 255, .6); background: rgba(59, 108, 255, .14); box-shadow: 0 0 30px -10px rgba(59, 108, 255, .8); }
.bb-tile.is-active .bb-ic { background: rgba(59, 108, 255, .3); color: #fff; }
.bb-tile.is-active .bb-dots { display: inline-flex; }
.bb-tile.is-active .bb-lines { display: grid; }
.bb-tile.is-done { color: #e4ebff; border-color: rgba(46, 211, 164, .24); background: rgba(46, 211, 164, .045); }
.bb-tile.is-done .bb-ic { background: rgba(46, 211, 164, .18); color: #8ff0d0; }
.bb-tile.is-done .bb-check { opacity: 1; }
.bb-tile.is-active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%); background-size: 250% 100%; animation: buildflow 2.2s linear infinite; pointer-events: none; }

/* ---------- v6.4 — tabs with a sliding pill ---------- */
.has-pill6 { position: relative; }
.has-pill6 > [role="tab"] { position: relative; z-index: 1; }
.tabpill6 { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; pointer-events: none; }
.find6-tabs.has-pill6 [role="tab"][aria-selected="true"] { background: transparent; border-color: transparent; }
.find6-tabs .tabpill6 { background: #fff; }
.seg-tabs.has-pill6 [role="tab"][aria-selected="true"] { background: transparent; box-shadow: none; }
.seg-tabs .tabpill6 { border-radius: 12px; background: var(--paper); box-shadow: 0 2px 10px -3px rgba(12, 27, 63, .3); }
.week-days.has-pill6 button[aria-selected="true"] { background: transparent; border-color: transparent; }
.week-days .tabpill6 { border-radius: 14px; background: var(--ink); }

/* ---------- v6.4 — small things that make it feel made with care ---------- */
.btn svg:last-child, .locked-cta svg, .find6-lock > svg:last-child, .lk-cta svg, .card-link svg, .go svg { transition: transform .25s cubic-bezier(.3, .7, .3, 1); }
.btn:hover svg:last-child, .locked-list:hover .locked-cta svg, .find6-lock:hover > svg:last-child, .lk-block:hover .lk-cta svg { transform: translateX(4px); }
.btn-primary { overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; }
.btn-primary:hover::after { transform: translateX(120%); }
.nav-link, .site-footer nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s ease, color .2s; text-decoration: none; }
.nav-link:hover, .site-footer nav a:hover { background-size: 100% 1px; text-decoration: none; }
.how6 li:hover .how6-icon svg, .p6-card:hover .p6-mock svg, .lk-item:hover .lk-ic svg { animation: bob6 .6s ease; }
@keyframes bob6 { 30% { transform: translateY(-3px) rotate(-6deg); } 60% { transform: translateY(1px) rotate(4deg); } }
.flow6 { position: absolute; top: 28px; z-index: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #2ed3a4; box-shadow: 0 0 12px rgba(46, 211, 164, .9); pointer-events: none; opacity: 0; }
.net6 { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.toast6 { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 90; transform: translateX(-50%); padding: 11px 18px; border-radius: 999px; background: #0c1b3f; color: #fff; font-size: .92rem; font-weight: 600; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; white-space: nowrap; }
.odo6 { display: inline-flex; align-items: baseline; justify-content: center; }
.odo6-col { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.odo6-strip { display: block; }
.odo6-strip span { display: block; height: 1em; line-height: 1; }
.bb-tile { grid-template-columns: 34px minmax(0, 1fr) 26px; grid-template-areas: "ic . st" "lb lb lb"; row-gap: 10px; align-items: center; padding-bottom: 16px; }
.bb-ic { grid-area: ic; } .bb-state { grid-area: st; } .bb-tile b { grid-area: lb; }

/* v6.4.1 — the end of the free analysis: each tile ticks itself off (the check takes the icon's place, never over the text). */
.p6-tile { position: relative; }
.p6-tile b { min-width: 0; hyphens: auto; }
.p6-tile svg { transition: opacity .2s, transform .3s; }
.p6-tile.is-done svg { opacity: 0; transform: scale(.4); }
.p6-tile::after { content: ""; position: absolute; left: 11px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: #2ed3a4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1a3a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; opacity: 0; transform: scale(.2); transition: opacity .2s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.p6-tile.is-done { border-color: rgba(46, 211, 164, .55); background: rgba(46, 211, 164, .1); }
.p6-tile.is-done::after { opacity: 1; transform: none; }
.p6-label.is-done [data-step-n] { display: none; }
.p6-label.is-done span { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.p6-label.is-done span::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; background: #2ed3a4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1a3a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
@media (prefers-reduced-motion: reduce) { .p6-tile::after { transition: none; } }
.p6-label.is-done + .p6-hint { visibility: hidden; }
/* v6.4.1 — on phones the floating labels never cover the scene: two of them, sitting on the card's top edge. */
@media (max-width: 900px) {
  .h6-scene-zone .f6-1, .h6-scene-zone .f6-3 { display: none; }
  .h6-scene-zone .f6-2 { left: 14px; right: auto; top: -15px; }
  .h6-scene-zone .f6-4 { right: 14px; top: -15px; }
  .h6-scene-zone { margin-top: 10px; }
}

/* v6.5 — the reading bar, easier to see. */
.read6 { height: 5px; }
.read6 i { border-radius: 0 99px 99px 0; box-shadow: 0 0 12px rgba(46, 211, 164, .55); }

/* v6.5 — three locked ads (no example ad): one tidy row of three, on every screen. */
.teaser-grid.is-all-locked { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .teaser-grid.is-all-locked { gap: 8px; }
  .teaser-grid.is-all-locked .teaser-locked { min-height: 128px; border-radius: 12px; }
  .teaser-grid.is-all-locked .teaser-blur { padding: 10px; gap: 6px; }
  .teaser-grid.is-all-locked .teaser-lock { width: calc(100% - 12px); padding: 10px 4px; gap: 3px; border-radius: 12px; }
  .teaser-grid.is-all-locked .teaser-lock b { font-size: .9rem; white-space: nowrap; }
  .teaser-grid.is-all-locked .teaser-lock small { font-size: .74rem; line-height: 1.2; }
  /* An example ad and two locked: the two side by side, the same height. */
  .teaser-grid:not(.is-all-locked) .teaser-locked { min-height: 132px; }
}

/* v6.5 — the free week: Monday offered and open, the three other days locked. */
.fw-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.fw-day { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--slate); text-decoration: none; }
.fw-day b { font-size: .95rem; color: inherit; }
.fw-day small { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; }
.fw-day.is-open { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 10px 24px -14px rgba(11, 26, 58, .8); }
.fw-day.is-open small { color: #8ff0d0; font-weight: 600; }
.fw-day.is-locked { background: var(--mist); }
.fw-day.is-locked:hover { border-color: var(--violet); color: var(--ink); }
.fw-day.is-locked .lock-ic, .fw-day.is-locked svg { color: #2346c8; }
.fw-post { margin-top: 12px; border-color: rgba(46, 211, 164, .45); box-shadow: 0 0 0 4px rgba(46, 211, 164, .08); }
.fw-post { grid-template-columns: 1fr; gap: 8px; }

/* v6.5 — The 30-day plan, at the end of the paid report: a progress ring, four weeks on a path, steps to tick off. */
.plan30 { position: relative; }
.p30-progress { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; padding: 14px 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 14px 30px -24px rgba(12, 27, 63, .5); }
.p30-progress p { display: grid; gap: 2px; margin: 0; color: var(--ink); }
.p30-progress p b { font: 700 1.15rem var(--font-display); font-variant-numeric: tabular-nums; }
.p30-progress small { color: var(--slate); font-size: .86rem; }
.p30-ring { position: relative; flex: none; width: 58px; height: 58px; display: grid; place-items: center; }
.p30-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.p30-ring circle { fill: none; stroke: #e6ebf5; stroke-width: 5; }
.p30-ring .p30-arc { stroke: #2ed3a4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p30, 0)); transition: stroke-dashoffset .7s cubic-bezier(.2, .8, .2, 1); }
.p30-ring b { position: relative; font: 700 .82rem var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.p30-weeks { --rail: 1; position: relative; list-style: none; display: grid; gap: 14px; margin: 16px 0 0; padding: 0 0 0 22px; }
.p30-weeks::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: #e3e8f2; }
.p30-weeks::after { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #3b6cff, #2ed3a4); transform-origin: 50% 0; transform: scaleY(var(--rail)); }
.p30-week { position: relative; padding: 16px 16px 10px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.p30-week::before { content: ""; position: absolute; left: -22px; top: 18px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid #3b6cff; z-index: 1; transition: background-color .3s, border-color .3s; }
.p30-week.is-complete::before { background: #2ed3a4; border-color: #2ed3a4; }
.p30-whead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.p30-wnum { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2650e6; }
.p30-whead h3 { flex: 1 1 auto; min-width: 0; margin: 0; font: 700 1.08rem var(--font-display); color: var(--ink); }
.p30-wcount { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--mist); color: var(--slate); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.p30-week.is-complete .p30-wcount { background: #dff7ee; color: var(--green); }
.p30-wlead { margin: 4px 0 6px; color: var(--slate); font-size: .9rem; }
.p30-steps { list-style: none; margin: 0; padding: 0; }
.p30-step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid #edf1f7; }
.p30-box { position: absolute; left: 0; top: 12px; width: 30px; height: 30px; margin: 0; opacity: 0; cursor: pointer; }
.p30-tick { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; border: 2px solid #c6cfdf; background: var(--paper); cursor: pointer; transition: background-color .25s, border-color .25s; }
.p30-tick svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s .05s ease-out; }
.p30-box:focus-visible + .p30-tick { outline: 3px solid var(--violet); outline-offset: 2px; }
.p30-step:hover .p30-tick { border-color: #2ed3a4; }
.p30-step.is-done .p30-tick { background: #2ed3a4; border-color: #2ed3a4; }
.p30-step.is-done .p30-tick svg { stroke-dashoffset: 0; }
.p30-body { display: grid; gap: 3px; min-width: 0; }
.p30-day { justify-self: start; padding: 1px 8px; border-radius: 999px; background: #ecf1ff; color: #2650e6; font-size: .72rem; font-weight: 700; }
.p30-title { font-weight: 650; color: var(--ink); line-height: 1.35; cursor: pointer; transition: color .25s; }
.p30-text { margin: 0; color: var(--slate); font-size: .9rem; line-height: 1.45; }
.p30-go { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: .85rem; font-weight: 600; color: var(--violet-ink, #2650e6); text-decoration: none; }
.p30-go:hover { text-decoration: underline; }
.p30-step.is-done .p30-title { color: var(--slate); text-decoration: line-through; text-decoration-color: rgba(46, 211, 164, .8); text-decoration-thickness: 2px; }
.p30-step.is-done .p30-text, .p30-step.is-done .p30-day { opacity: .6; }
.p30-note { margin: 12px 0 0; color: var(--slate); font-size: .82rem; text-align: center; }
@media (min-width: 900px) { .p30-weeks { padding-left: 30px; } .p30-weeks::before, .p30-weeks::after { left: 10px; } .p30-week::before { left: -27px; } .p30-week { padding: 18px 22px 12px; } }
@media (prefers-reduced-motion: reduce) { .p30-ring .p30-arc, .p30-tick, .p30-tick svg { transition: none; } }

/* v6.5.1 — the home scene ends like the free analysis: each tile ticks itself off, the title says "ready". */
.sc6-tile { position: relative; transition: border-color .35s, background-color .35s; }
.sc6-tile svg { transition: opacity .2s, transform .3s; }
.sc6-tile::after { content: ""; position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #2ed3a4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1a3a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; opacity: 0; transform: scale(.2); transition: opacity .2s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.sc6-tile.is-done { border-color: rgba(46, 211, 164, .55); background: rgba(46, 211, 164, .1); }
.sc6-tile.is-done svg { opacity: 0; transform: scale(.4); }
.sc6-tile.is-done::after { opacity: 1; transform: none; }
.sc6-label.is-done span { display: inline-flex; align-items: center; gap: 8px; }
.sc6-label.is-done span::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #2ed3a4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1a3a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.h6-scene.is-still .sc6-tile::after { opacity: 1; transform: none; }
.h6-scene.is-still .sc6-tile svg { opacity: 0; }

/* =====================================================================================================================
   v7 — The reports at night. The same night as the home page: the page reads on --space; cards are a lighter veil
   with a fine outline; white is kept for real-world objects (a Google page, a Facebook ad, a LinkedIn post), so that
   white means "what your customers will see". Tokens are remapped here, and restored inside .is-real.
   ===================================================================================================================== */
body.page-report, body.page-home {
  --ink: #e8eefb; --ink-2: #c9d4ee; --slate: #b6c4e3; --muted: #93a3c8;
  --paper: rgba(255, 255, 255, .055); --mist: rgba(255, 255, 255, .04); --mist-2: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .11); --line-strong: rgba(255, 255, 255, .22);
  --violet-ink: #9dbbff; --violet-tint: rgba(127, 176, 255, .13);
  --cyan-tint: rgba(46, 211, 164, .13); --green: #6fe3b9; --green-tint: rgba(46, 211, 164, .12);
  --red: #ff9db4; --red-tint: rgba(255, 122, 154, .12); --amber: #ffcf8a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .25); --shadow-2: 0 18px 40px -20px rgba(0, 0, 0, .7);
  background: var(--space); color: var(--ink);
}
/* Real-world objects keep the day palette. */
body.page-report .is-real, body.page-home .is-real,
body.page-report .fb-post, body.page-home .fb-post,
body.page-report .week-post, body.page-home .week-post,
body.page-report .gad-preview, body.page-home .gad-preview,
body.page-report .pagebuild6, body.page-home .pagebuild6,
body.page-report .serp6, body.page-home .serp6,
body.page-report .miss7-item, body.page-home .miss7-item,
body.page-report .sc6-url, body.page-home .sc6-url,
body.page-report .p6-url, body.page-home .p6-url,
body.page-report .find6-list, body.page-home .find6-list,
body.page-report .find6-tabs button[aria-selected="true"], body.page-home .find6-tabs button[aria-selected="true"],
body.page-report .p6-card, body.page-home .p6-card,
body.page-report .mw6-days button, body.page-home .mw6-days button,
body.page-report .mk6-tabs button, body.page-home .mk6-tabs button,
body.page-report .mw6-post, body.page-home .mw6-post,
body.page-report .mk6-pane, body.page-home .mk6-pane,
body.page-report .how6-n, body.page-home .how6-n,
body.page-report .serp6-q, body.page-home .serp6-q,
body.page-report .pg6-url, body.page-home .pg6-url,
body.page-report .mock-copy, body.page-home .mock-copy,
body.page-report .dm-fb, body.page-home .dm-fb,
body.page-report .sw-page, body.page-home .sw-page,
body.page-report .po-mock, body.page-home .po-mock,
body.page-report .demo-main, body.page-home .demo-main,
body.page-report .demo-tabs button[aria-selected="true"], body.page-home .demo-tabs button[aria-selected="true"],
body.page-report .reel6-win, body.page-home .reel6-win {
  --ink: #0c1b3f; --ink-2: #26365c; --slate: #55627d; --muted: #6b7891;
  --paper: #ffffff; --mist: #f4f6fb; --mist-2: #eaeef6; --line: #dfe5ef; --line-strong: #c5cfdf;
  --violet-ink: #2650e6; --violet-tint: #ecf1ff; --cyan-tint: #e4f8f1; --green: #0e7a52; --green-tint: #e5f5ee;
  --red: #b42840; --red-tint: #fdedf0; --amber: #9a5b00;
  --shadow-1: 0 1px 2px rgba(12, 27, 63, .06), 0 2px 8px rgba(12, 27, 63, .05);
  background-color: #fff; color: var(--ink);
}
/* Titles: the home page gradient. */
.page-report .grad { background: var(--brand-gradient-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Titles: white, with their one important word in the gradient (span.grad, App\Support\Title::em). */
.page-report .gen-hero h2, .page-report .plan30 h2, .page-report .plan30-locked h2, .page-report .paywall h2, .page-report .plan-ready h2, .page-report .radar-cta h2 { background: none; color: #fff; -webkit-text-fill-color: currentColor; }
.page-report h2 .grad { display: inline; -webkit-text-fill-color: transparent; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Chapter openings: no coloured band any more, the title carries the chapter (number, eyebrow, gradient title). */
.page-report .gen-hero { background: none !important; padding: 0; border-radius: 0; overflow: visible; margin-bottom: 18px; color: var(--slate); }
.page-report .gen-hero::before { display: none; }
.page-report .gen-eyebrow { color: var(--muted) !important; letter-spacing: .12em; font-size: .76rem; }
.page-report .gen-eyebrow .n { width: 26px; height: 26px; border-radius: 9px; background: var(--brand-gradient-light); color: #0b1a3a; font-size: .8rem; }
.page-report .gen-hero h2 { display: block; margin-top: 10px; font-size: clamp(1.6rem, 6.4vw, 2.2rem); letter-spacing: -.02em; }
.page-report .gen-hero h2 svg { display: none; }
.page-report .gen-hero p, .page-report .gen-hero .gen-status-note { color: var(--slate); }
.page-report .gen-status-pill { background: rgba(46, 211, 164, .12); color: #8ff0d0; border-color: rgba(46, 211, 164, .35); }
.page-report .gen-status.is-locked .gen-status-pill, .page-report .gen-status.is-last_step .gen-status-pill { background: rgba(127, 176, 255, .1); color: #b9d2ff; border-color: rgba(127, 176, 255, .32); }
.page-report .gen-stats li { background: var(--paper); border: 1px solid var(--line); }
.page-report .gen-stats li.is-locked { border-style: dashed; border-color: rgba(127, 176, 255, .3); }
.page-report .gen-stats span { color: var(--slate); }
.page-report .lk-pill { background: rgba(127, 176, 255, .14); color: #b9d2ff; }

/* ---------- v7 building blocks (free and paid) ---------- */
.v7-block { margin-top: 16px; padding: 18px 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.v7-block > h3 { color: #fff; font-size: 1.05rem; }
.v7-sub { margin-top: 4px; color: var(--slate); font-size: .9rem; }
.v7-sub b { color: #fff; }
.v7-note { margin-top: 10px; color: var(--muted); font-size: .78rem; }
.v7-label { margin: 22px 0 8px; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.maps7 { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: #c9d4ee; font-size: .88rem; line-height: 1.45; }
.maps7 svg { flex: none; margin-top: 2px; color: #8fb8ff; }
.maps7 b { color: #fff; }

/* The verdict at the top of the free analysis */
.v7-verdict { margin-top: 22px; }
.v7-verdict-h { color: #fff; font-size: clamp(1.45rem, 5.6vw, 2.1rem); line-height: 1.2; letter-spacing: -.02em; max-width: 34em; }
.v7-ring-row { margin-top: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.v7-ring { position: relative; width: 96px; height: 96px; }
.v7-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.v7-ring circle { fill: none; stroke-width: 8; }
.v7-ring .bg { stroke: rgba(255, 255, 255, .1); }
.v7-ring .arc { stroke: url(#v7rg); stroke-linecap: round; stroke-dasharray: 100; }
.v7-ring b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; font: 800 1.45rem/1.05 var(--font-display); }
.v7-ring b small { display: block; color: var(--slate); font: 600 .62rem var(--font-body); }
.v7-ring-txt { color: var(--slate); font-size: .95rem; }
.v7-ring-txt b { color: #fff; }
.v7-stats { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.v7-stat { position: relative; min-width: 0; padding: 12px 34px 12px 12px; border-radius: 14px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .11); }
.v7-stat b { display: block; color: #fff; font: 800 1.35rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v7-stat > span { display: block; margin-top: 2px; color: var(--slate); font-size: .78rem; line-height: 1.3; }
@media (max-width: 520px) { .v7-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v7-stat { padding: 11px 26px 11px 10px; } .v7-stat b { font-size: 1.15rem; } }
.v7-tip-btn { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: var(--slate); font: 700 .7rem/1 var(--font-body); cursor: pointer; }
.v7-tip-btn[aria-expanded="true"] { background: #fff; color: var(--space); }
.v7-tip { position: absolute; z-index: 20; left: 0; right: auto; top: calc(100% + 8px); width: min(240px, 78vw); padding: 10px 12px; border-radius: 12px; background: #fff; color: #0c1b3f; font-size: .8rem; line-height: 1.4; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .6); }
.v7-stat:nth-child(2) .v7-tip { left: 50%; transform: translateX(-50%); }
.v7-stat:nth-child(3) .v7-tip { left: auto; right: 0; }
.v7-source { margin-top: 14px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .8rem; }

/* Google page 1, search by search */
.rank7-q { margin-top: 10px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rank7-q::-webkit-scrollbar { display: none; }
.rank7-q button { flex: none; border: 1px solid var(--line); background: transparent; color: var(--slate); border-radius: 999px; padding: 6px 12px; font: 600 .84rem var(--font-body); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.rank7-q button.is-on { background: #fff; color: #0c1b3f; border-color: #fff; }
.rank7-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.rank7-row { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid transparent; font-size: .92rem; }
.rank7-row .pos { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 800; font-size: .76rem; }
.rank7-row .nm { flex: 1; min-width: 0; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank7-row .nm small { color: inherit; opacity: .8; font-weight: 500; }
.rank7-row.is-named .nm { color: #b9d2ff; }
.rank7-row .badge { flex: none; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; background: rgba(127, 176, 255, .14); color: #b9d2ff; }
.rank7-row .badge.is-ads { background: var(--blue); color: #fff; }
.rank7-row .badge.is-maps { background: rgba(46, 211, 164, .16); color: #8ff0d0; }
.rank7-row.is-you { background: rgba(255, 122, 154, .1); border: 1px dashed rgba(255, 122, 154, .6); }
.rank7-row.is-you .pos { background: #ff7a9a; color: #fff; }
.rank7-row.is-you .nm { color: #ffc6d4; }
.rank7-row.is-you .badge { background: rgba(255, 122, 154, .18); color: #ffc6d4; }
.rank7-gap { padding: 1px 10px 1px 42px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.rank7-say { margin-top: 10px; color: var(--ink); font-size: .88rem; line-height: 1.45; }
.rank7-say b { color: #fff; }
.rank7-vol { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; }

/* What Genius saw: findings that stack as you scroll */
.seen7 { margin-top: 16px; display: grid; gap: 14px; }
.seen7-card { position: sticky; top: 132px; padding: 18px 16px; border-radius: 18px; background: #13285e; border: 1px solid rgba(127, 176, 255, .25); box-shadow: 0 -12px 30px -16px rgba(0, 0, 0, .8); transform-origin: 50% 0; }
.seen7-card:nth-child(2) { top: 144px; background: #172e6a; }
.seen7-card:nth-child(3) { top: 156px; background: #0f3c49; border-color: rgba(46, 211, 164, .35); }
.seen7-card small { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.seen7-card p { margin-top: 6px; color: #fff; font: 700 1.05rem/1.35 var(--font-display); }

/* The Google page, in white */
.page-report .serp6 { padding: 0; border-radius: 18px; background: #fff !important; background-image: none !important; border: 0; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9); }
.serp6-bar { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid #e6eaf2; }
.serp6-bar .serp6-q { flex: 1; min-width: 0; margin: 0; background: #f1f3f8; box-shadow: none; }
.serp6-replay { flex: none; border: 1px solid #dfe5ef; background: #fff; color: #55627d; border-radius: 999px; padding: 6px 11px; font: 600 .78rem var(--font-body); cursor: pointer; }
.page-report .serp6-list { margin: 0; padding: 12px; gap: 10px; }
.page-report .serp6-row { position: relative; background: #fff; border: 1px solid #edf0f6; color: #0c1b3f; padding-right: 46px; }
.page-report .serp6-row.is-org { opacity: 1; }
.page-report .serp6-tag { color: #0c1b3f; }
.page-report .serp6-tag span { color: #6b7891; font-weight: 600; letter-spacing: 0; text-transform: none; }
.page-report .serp6-tag.is-free { color: #6b7891; }
.page-report .serp6-l { background: #e3e8f2; }
.page-report .serp6-l.is-t { background: #b9c9f5; }
.page-report .serp6-row small { color: #6b7891; }
.page-report .serp6-row.is-you { border: 2px dashed #2ed3a4; background: #f0fbf7; }
.page-report .serp6-cap { margin: 0; padding: 0 12px 10px; color: #8a96b0; }
.serp6-hot { position: absolute; top: 50%; right: 10px; width: 26px; height: 26px; margin-top: -13px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; font: 800 .78rem/1 var(--font-body); cursor: pointer; box-shadow: 0 0 0 0 rgba(59, 108, 255, .5); animation: hot7 2s infinite; }
@keyframes hot7 { 70% { box-shadow: 0 0 0 9px rgba(59, 108, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 108, 255, 0); } }
.serp6-hot.is-seen { animation: none; background: #0c1b3f; }
.serp6-say { margin: 0 12px 10px; padding: 11px 13px; border-radius: 12px; background: #0c1b3f; color: #fff; font-size: .86rem; min-height: 3.2em; }

/* What a first test costs */
/* The click price: a real slider on the range Google gives, cheap (green) to expensive (pink). */
.sim7 input.sim7-cpc[type=range] { --p: 0; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin-top: 8px; background: transparent; cursor: pointer; }
.sim7-cpc::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, rgba(46, 211, 164, .7), rgba(127, 176, 255, .6) 60%, rgba(255, 122, 154, .7)); }
.sim7-cpc::-moz-range-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, rgba(46, 211, 164, .7), rgba(127, 176, 255, .6) 60%, rgba(255, 122, 154, .7)); }
.sim7-cpc::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -8px; border-radius: 50%; background: #2ed3a4; background: color-mix(in srgb, #ff7a9a calc(var(--p) * 100%), #2ed3a4); border: 4px solid var(--space); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); cursor: grab; }
.sim7-cpc::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #2ed3a4; background: color-mix(in srgb, #ff7a9a calc(var(--p) * 100%), #2ed3a4); border: 4px solid var(--space); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); cursor: grab; }
.sim7-cpc:active::-webkit-slider-thumb { cursor: grabbing; }
.sim7-cpc:focus-visible { outline: 2px solid #b9d2ff; outline-offset: 4px; border-radius: 99px; }
.sim7-ends { margin-top: 4px; display: flex; justify-content: space-between; color: var(--muted); font-size: .74rem; }
.sim7-row { margin-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sim7-row label { color: #fff; font-weight: 600; font-size: .92rem; }
.sim7-row output { color: #fff; font: 800 1.3rem var(--font-display); font-variant-numeric: tabular-nums; }
.sim7 input[type=range] { width: 100%; margin-top: 10px; height: 28px; accent-color: #2ed3a4; }
.sim7-out { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sim7-out div { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.sim7-out b { display: block; color: #fff; font: 800 1.45rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.sim7-cap { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 196, 87, .1); border: 1px solid rgba(255, 196, 87, .3); color: #ffe2a8; font-size: .86rem; line-height: 1.45; }
.sim7-cap b { color: #fff; }
.sim7-out span { color: var(--slate); font-size: .78rem; }

/* The first ad */
.why7 { margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(46, 211, 164, .08); border: 1px solid rgba(46, 211, 164, .25); color: var(--ink); font-size: .92rem; }
.why7 b { color: #8ff0d0; }
.ad7 { margin-top: 14px; max-width: 520px; }
.ad7-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ad7-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--slate); font-weight: 600; font-size: .84rem; text-decoration: none; }
.ad7-chip.is-on { background: #fff; color: #0c1b3f; border-color: #fff; }
.ad7-chip.is-locked:hover { border-color: rgba(127, 176, 255, .5); color: #fff; }
.page-report .fb-post { border-radius: 16px; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9); }
.reels7 .reels6 { background: rgba(255, 255, 255, .04); background-image: none; border: 1px solid var(--line); }

/* The search they miss */
.miss7-q { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); color: var(--slate); font-size: .9rem; }
.miss7-q b { color: #fff; }
.miss7-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.miss7-list li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; }
.miss7-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: .84rem; background: #0c1b3f; color: #fff; font-weight: 800; }
.miss7-body { min-width: 0; display: grid; gap: 2px; }
.miss7-item .miss7-body b { color: #1a0dab; }
.miss7-item small { color: #6b7891; font-size: .78rem; overflow-wrap: anywhere; }
.miss7-tag { justify-self: start; margin-top: 4px; padding: 2px 8px; border-radius: 99px; background: #e6f7f0; color: #0e7a52; font-size: .72rem; font-weight: 700; }
.miss7-you { background: rgba(255, 122, 154, .1); }
.miss7-you .miss7-n { background: #ff7a9a; }
.miss7-you b { color: #fff; }
.miss7-you small { color: #ffc6d4; font-size: .8rem; }
.miss7-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.miss7-line rect { fill: none; stroke: #ff7a9a; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
.miss7-plan { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(127, 176, 255, .14); color: #b9d2ff; font-size: .76rem; font-weight: 700; text-decoration: none; }
.miss7-say { margin-top: 12px; color: var(--slate); font-size: .92rem; }
.miss7-say b { color: #fff; }

/* The 30-day plan, locked in the free analysis: its title only */
.plan30-locked { display: block; margin-top: 34px; padding: 20px 18px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px dashed rgba(127, 176, 255, .35); text-decoration: none; color: var(--slate); transition: border-color .2s, background-color .2s; }
.plan30-locked:hover { border-color: rgba(127, 176, 255, .6); background: rgba(255, 255, 255, .06); }
.plan30-locked h2 { margin-top: 10px; font-size: clamp(1.5rem, 6vw, 2rem); }
.plan30-locked p { margin-top: 6px; }
.plan30-locked .gen-status-pill { margin-top: 12px; background: rgba(127, 176, 255, .1); color: #b9d2ff; border: 1px solid rgba(127, 176, 255, .32); }

/* ---------- v7 night: existing components ---------- */
/* What used the ink as a background: selected tabs become white pills with night text, small badges become blue. */
.page-report .skip-link { background: #fff; color: #0c1b3f; }
.page-report .tabs button[aria-selected="true"], .page-report .swipe-tab.is-active, .page-report .week-days button[aria-selected=true],
.page-report .comp-filters button.is-on, .page-report .kw-filter[aria-pressed=true], .page-report .section-tablist [role=tab][aria-selected=true],
.page-report .mock-tabs span.is-on, .page-report .fw-day.is-open, .page-report .lk-week span:first-child { background: #fff; border-color: #fff; color: #0c1b3f; }
.page-report .fw-day.is-open small { color: #0e7a52; }
.page-report .week-days .tabpill6 { background: #fff; }
.page-report .chip-ads, .page-report .nc-ads, .page-report .b-ads, .page-report .mock-h, .page-report .pg6-tag { background: var(--blue); border-color: var(--blue); color: #fff; }
.page-report .chip-maps { color: #8ff0d0; }
.page-report .check[data-state="done"] .check-icon, .page-report .report-nav a.is-current .n, .page-report .chapter-head .eyebrow .n,
.page-report .gplan-n, .page-report .proof-fold > summary .n { background: #fff; border-color: #fff; color: #0c1b3f; }
.page-report .bar span { background: var(--blue); }
.page-report .paid-by { color: #8ff0d0; }
.page-report .p30-wnum { color: #9dbbff; }
.page-report .serp6-cap { color: #6b7891; }
/* The chapter navigation, at night. */
.page-report .report-nav a { color: var(--slate); }
.page-report .report-nav a:hover, .page-report .report-nav a.is-current { background: rgba(255, 255, 255, .08); color: #fff; }
.page-report .report-nav .n { background: rgba(255, 255, 255, .1); color: var(--ink); }
@media (max-width: 1023px) { .page-report .report-nav { background: rgba(8, 19, 49, .92); border-bottom-color: rgba(255, 255, 255, .08); } }
/* Locked pieces: a veil of night, a blue lock. */
.page-report .lk-over { background: linear-gradient(180deg, rgba(8, 19, 49, .2), rgba(8, 19, 49, .82)); }
.page-report .lk-line, .page-report .lk-skeleton .lk-line { background: linear-gradient(90deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .08) 100%); background-size: 200% 100%; }
.page-report .lk-block.is-ad .lk-line:first-child { background: rgba(127, 176, 255, .35); }
.page-report .lk-over b { color: #fff; }
.page-report .lk-badge, .page-report .lk-pad, .page-report .lk-num > span.lk-pill { background: rgba(127, 176, 255, .16); color: #b9d2ff; box-shadow: none; }
.page-report .lk-num .lk-pill svg, .page-report .lk-pill .writing-mark, .page-report .lk-pad .writing-mark, .page-report .lk-badge .writing-mark { color: #b9d2ff; }
.page-report .lk-row { background: rgba(255, 255, 255, .05); }
.page-report .lk-name { background: rgba(255, 255, 255, .22); }
.page-report .lk-chip { background: rgba(255, 255, 255, .14); }
.page-report .teaser-lock { background: rgba(14, 31, 70, .92); color: #fff; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .8); }
.page-report .tb-line { background: rgba(255, 255, 255, .14); }
.page-report .tb-visual { background: linear-gradient(140deg, rgba(127, 176, 255, .25), rgba(46, 211, 164, .2)); }
/* Segmented tabs (watch, competitors). */
.page-report .section-tabs.is-tabs > .section-tablist.seg-tabs { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.page-report .seg-tabs [role=tab], .page-report .seg-tabs .seg-locked { color: var(--slate); }
.page-report .seg-tabs [role=tab] svg, .page-report .seg-tabs .seg-locked svg { color: var(--muted); }
.page-report .seg-tabs .seg-locked small { color: #b9d2ff; }
.page-report .seg-tabs [role=tab][aria-selected=true] { background: #fff; color: #0c1b3f; }
.page-report .seg-tabs [role=tab][aria-selected=true] svg { color: var(--blue); }
.page-report .seg-tabs [role=tab][aria-selected=true] small { color: #2650e6; }
.page-report .seg-tabs .tabpill6 { background: #fff; }
.page-report .seg-tabs.has-pill6 [role=tab][aria-selected=true] { background: transparent; }
.page-report .seg-tabs [role=tab]:hover:not([aria-selected=true]), .page-report .seg-tabs .seg-locked:hover { background: rgba(255, 255, 255, .06); }
/* The 375 wheels: white windows keep night digits. */
.page-report .reel6-strip span { color: #0c1b3f; }
.page-report .reel6.is-concept .reel6-win { background: #e9e3ff; }
/* Contrast: white on a deeper blue, greys a touch darker on white. */
.page-report .chip-ads, .page-report .nc-ads, .page-report .b-ads, .page-report .mock-h, .page-report .pg6-tag, .rank7-row .badge.is-ads { background: #2f5bf2; border-color: #2f5bf2; }
.page-report .serp6-tag span, .page-report .serp6-tag.is-free, .page-report .serp6-cap, .page-report .serp6-row small, .miss7-item small { color: #5a6782; }
.page-report .week-days button[aria-selected=true] small, .page-report .lk-week span:first-child small { color: #55627d; }
.page-report .price-band .pb-sub { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
/* Gradient-bordered cards need an opaque inside at night. */
.page-report .genius-card { background-image: linear-gradient(#0f2250, #0f2250), var(--brand-gradient-light); }
.page-report .genius-card .hook { color: #b9d2ff; }
.miss7-you { border: 1.5px dashed rgba(255, 122, 154, .7); }
.miss7-q { flex-wrap: nowrap; align-items: flex-start; }
.miss7-q svg { flex: none; margin-top: 3px; }
.page-report .report-head h1 .grad { display: inline; }
.page-report .watch .watch-top { grid-template-columns: minmax(0, 560px); }

/* ---------- v7: the home page all at night (its sections follow one another without a band of white) ---------- */
.page-home main { background: var(--space); }
.page-home .night .section-head p, .page-home .night .lede { color: var(--slate); }
.page-home .h6-how, .page-home .h6-plan, .page-home .h6-faq { background: var(--space); border-top: 1px solid rgba(255, 255, 255, .05); }
.page-home .faq details { background: var(--paper); border-color: var(--line); }
.page-home .faq summary { color: #fff; }
.page-home .faq details p { color: var(--slate); }
.page-home .p6-card h3 { color: #0c1b3f; }
.page-home .skip-link { background: #fff; color: #0c1b3f; }
.page-home .p6-paid li { color: #eef3ff; }
.page-home .p6-guarantee { color: #b5f5df; }
.reels7-note b { color: #fff; }

/* ---------- v7.2 The free analysis, at a glance: small tiles on two rows, one tap to each chapter ---------- */
.sum7 { max-width: 860px; margin-top: 20px; }
.sum7-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sum7-head h2 { color: #fff; font-size: 1.05rem; letter-spacing: -.01em; }
.sum7-meta { flex: none; color: var(--muted); font-size: .74rem; font-weight: 600; }
.sum7-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .sum7-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sum7-item { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 10px 9px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .11); text-decoration: none; color: inherit; transition: background-color .2s, border-color .2s, transform .2s; }
.sum7-item:hover { background: rgba(255, 255, 255, .09); border-color: rgba(127, 176, 255, .45); }
.sum7-item:active { transform: scale(.97); }
.sum7-item:focus-visible { outline: 2px solid #b9d2ff; outline-offset: 2px; }
.sum7-top { display: flex; align-items: center; justify-content: space-between; }
.sum7-n { position: relative; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--brand-gradient-light); color: #0b1a3a; font: 800 .74rem var(--font-display); }
.sum7-ic { color: #b9d2ff; display: grid; }
.sum7-item b { color: #fff; font-size: .84rem; font-weight: 650; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
/* Small phones (320–380 px): a tile name such as « Concurrents » stays on one line instead of breaking mid-word. */
@media (max-width: 380px) { .sum7-grid { gap: 6px; } .sum7-item { padding: 9px 7px 8px; } .sum7-item b { font-size: .76rem; letter-spacing: -.01em; } }
.sum7-item small { color: #8ff0d0; font-size: .68rem; font-weight: 700; }
.sum7-item.is-locked { border-style: dashed; border-color: rgba(127, 176, 255, .45); background: rgba(127, 176, 255, .05); }
.sum7-item.is-locked .sum7-n { background: transparent; color: #b9d2ff; border: 1px dashed rgba(127, 176, 255, .6); }
.sum7-item.is-locked small { color: #b9d2ff; }
.sum7-seen { position: absolute; right: -5px; bottom: -5px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: #2ed3a4; color: #06281f; box-shadow: 0 0 0 2px var(--space); transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.sum7-item.is-seen .sum7-seen { transform: scale(1); }
.sum7 .v7-source { margin-top: 10px; }
/* The chapter reached from the summary lights up for a moment, so the eye lands on it. */
.gen-hero.is-arrived .gen-eyebrow .n, .plan30-locked.is-arrived .gen-eyebrow .n { animation: sum7-arrive 1.2s ease-out; }
@keyframes sum7-arrive { 0% { box-shadow: 0 0 0 0 rgba(143, 240, 208, .7); } 100% { box-shadow: 0 0 0 14px rgba(143, 240, 208, 0); } }
@media (prefers-reduced-motion: reduce) { .sum7-seen, .sum7-item { transition: none; } .gen-hero.is-arrived .gen-eyebrow .n, .plan30-locked.is-arrived .gen-eyebrow .n { animation: none; } }
/* The status that sells the plan: filled with the brand gradient, a link to unlock it. */
.gen-status.is-promo .gen-status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 0; background: var(--brand-gradient-light); color: #0b1a3a; font-weight: 750; text-decoration: none; line-height: 1.3; box-shadow: 0 10px 28px -14px rgba(143, 240, 208, .8); transition: transform .2s, box-shadow .2s; }
.gen-status.is-promo .gen-status-pill:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(143, 240, 208, .9); }
.gen-status.is-promo .gen-status-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gen-status.is-promo .gen-status-pill svg { flex: none; color: #0b1a3a; }
.rank7-lead { margin-top: 4px; color: var(--slate); font-size: .88rem; line-height: 1.45; }
.rank7-lead b { color: #fff; }
.miss7-title { margin-top: 3px; color: #3c4a66; font-size: .82rem; line-height: 1.4; }
.miss7-open { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: #1f4fd8; font-size: .78rem; font-weight: 700; text-decoration: none; }
.miss7-open:hover { text-decoration: underline; }
.comp-rows.is-capped:not(.is-open):not(.is-filtered) .comp-row.is-more { display: none; }
.comp-more-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(127, 176, 255, .45); background: rgba(127, 176, 255, .1); color: #b9d2ff; font: 700 .9rem var(--font-body); cursor: pointer; }
.comp-more-btn:hover { background: rgba(127, 176, 255, .18); }
.comp-more-btn:focus-visible { outline: 2px solid #b9d2ff; outline-offset: 3px; }
.comp-more-btn[hidden] { display: none; }
/* Free analysis: the week is written on both networks; the one that fits is open, the other one waits in the plan. */
.net7 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.net7-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: .86rem; text-decoration: none; }
.net7-chip.is-on { background: #fff; color: #0c1b3f; }
.net7-chip.is-locked { border: 1px dashed rgba(127, 176, 255, .55); color: #b9d2ff; background: rgba(127, 176, 255, .06); }
.net7-chip.is-locked small { color: var(--slate); font-weight: 600; }
.net7-chip.is-locked:hover { background: rgba(127, 176, 255, .14); }
.page-report .comp-filters button.is-on span { color: #4a5878; }
/* "weeks", struck through: a drawn line across the whole words (the native line-through only showed between them). */
.h6-race h2 s { position: relative; display: inline-block; text-decoration: none; color: #8593a8; -webkit-text-fill-color: #8593a8; }
.h6-race h2 s::after { content: ""; position: absolute; left: -.06em; right: -.06em; top: 54%; height: .09em; min-height: 3px; border-radius: 3px; background: #ff6b81; transform: rotate(-3deg); }
/* "Did you mean …?": one tap to analyze the address Genius found. */
.scan-suggest { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(143, 240, 208, .55); background: rgba(46, 211, 164, .12); color: #8ff0d0; font: 700 .92rem var(--font-body); cursor: pointer; }
.scan-suggest:hover { background: rgba(46, 211, 164, .2); }
.scan-suggest:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.scan-form:not(.scan-form--dark) .scan-suggest { color: #0e7a52; border-color: #0e7a52; background: #e9f8f2; }
/* Switzerland: "See more", underlined in the text, opens the choices (refusing included). */
.consent-inline { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.consent-inline:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.consent-policy { margin: 4px 0 8px; font-size: .85rem; }
/* /admin, analyses on a phone: one card per analysis, everything stacked (date, journey, site…), nothing off-screen. */
@media (max-width: 760px) {
    .table-scroll:has(.admin-scans) { overflow-x: visible; border: 0; }
    table.data.admin-scans, .admin-scans tbody, .admin-scans tr, .admin-scans td { display: block; width: 100%; min-width: 0; }
    .admin-scans td.admin-site { min-width: 0; }
    .admin-scans thead { display: none; }
    .admin-scans tr { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
    .admin-scans td { padding: 4px 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
    .admin-scans td.admin-date { font-weight: 700; }
    .admin-scans td[data-label]::before { content: attr(data-label) " : "; color: var(--slate); font-size: .78rem; font-weight: 600; }
    .admin-scans td.admin-journey:empty::after, .admin-scans td.admin-journey:not(:has(span))::after { content: "aucune étape après l’analyse"; color: var(--slate); font-size: .8rem; }
    .admin-scans .admin-site small { display: block; white-space: normal; }
    .admin-scans .admin-actions .btn { flex: 1 1 auto; }
}
.admin-scans .admin-site small { display: block; }

/* ---------- v7.9 — the free analysis says why when it takes longer ---------- */
.p6-slow { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 2px; padding: 10px 13px; border-radius: 12px; background: rgba(125, 176, 255, .1); border: 1px solid rgba(125, 176, 255, .32); color: #dbe5ff; font-size: .86rem; line-height: 1.4; }
.p6-slow::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: #7db0ff; box-shadow: 0 0 0 0 rgba(125, 176, 255, .6); animation: slow7 1.8s ease-out infinite; }
@keyframes slow7 { 70%, 100% { box-shadow: 0 0 0 8px rgba(125, 176, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .p6-slow::before { animation: none; } }
.admin-timing.is-slow { color: #9a4b00 !important; }
.admin-timing.is-slow b { font-weight: 600; }

/* ---------- v7.9 — rather not wait: the link by email ---------- */
.wait7 { margin-top: 14px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(160, 180, 255, .22); color: #dbe3f5; font-size: .93rem; line-height: 1.45; }
.wait7-form { display: grid; gap: 10px; }
.wait7-form label b { color: #fff; }
.wait7-row { display: flex; flex-wrap: wrap; gap: 8px; }
.wait7-row input { flex: 1 1 220px; min-width: 0; min-height: 46px; font: inherit; font-size: 1rem; padding: 10px 13px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; }
.wait7-row input::placeholder { color: #8fa2c2; }
.wait7-row input:focus-visible { outline: 2px solid #7db0ff; outline-offset: 2px; }
.wait7-row .btn { flex: 0 0 auto; min-height: 46px; }
.wait7-form small { color: #9fb0cf; font-size: .8rem; }
.wait7-form small a { color: #b9cdff; }
.wait7 .field-error { margin: 0; color: #ff9aa9; }
.wait7-ok { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: #e6ecfa; }
.wait7-ok svg { flex: none; margin-top: 2px; color: #8ff0d0; }
.wait7-ok b { color: #fff; overflow-wrap: anywhere; }
@media (max-width: 460px) { .wait7-row .btn { flex: 1 1 100%; } }

.p6-slow a { color: #b9cdff; font-weight: 600; white-space: nowrap; }

/* ---------- v7.10 — what the price buys, said under it ---------- */
.price-band .pb-what { display: block; margin: 2px 0 4px; color: #fff; font-size: .8rem; font-weight: 500; letter-spacing: .01em; opacity: .92; text-wrap: balance; text-shadow: 0 1px 2px rgba(8, 19, 49, .35); }

/* v7.11 — the hero's promise: the hook ("Plus de clients ?") big and white, read first, as in the ads;
   the answer under it, smaller, in the gradient; "en premier." never split over two lines. */
.h6-hero h1 { max-width: none; font-size: clamp(1.7rem, 3.1vw, 2.6rem); line-height: 1.12; text-wrap: balance; }
.h6-hero h1 .h1-ask { display: inline-block; color: #fff; font-size: 1.66em; line-height: 1.02; letter-spacing: -.035em; padding-bottom: .04em; }
.h6-hero h1 .h1-answer { display: block; margin-top: .12em; }
.h6-hero h1 .nw { white-space: nowrap; }
.h6-hero .hx-sub { text-wrap: pretty; }

/* v7.15 — "Rather not wait?" in the progress card itself, seen without scrolling: one tap opens the field */
.proc6-card .wait7 { margin: 12px 0 2px; padding: 0; background: none; border: 0; }
.wait7-drop > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: rgba(46, 211, 164, .1); border: 1px solid rgba(46, 211, 164, .38); color: #e8fff7; font-size: .9rem; line-height: 1.3; cursor: pointer; list-style: none; }
.wait7-drop > summary::-webkit-details-marker { display: none; }
.wait7-drop > summary svg { flex: none; color: #8ff0d0; }
.wait7-drop > summary span { flex: 1; min-width: 0; }
.wait7-drop > summary b { color: #fff; }
.wait7-drop > summary:hover { background: rgba(46, 211, 164, .16); }
.wait7-drop > summary:focus-visible { outline: 2px solid #8ff0d0; outline-offset: 2px; }
.wait7-chev { flex: none; width: 8px; height: 8px; border-right: 2px solid #8ff0d0; border-bottom: 2px solid #8ff0d0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.wait7-drop[open] > summary .wait7-chev { transform: rotate(-135deg) translate(-2px, 0); }
.wait7-drop .wait7-form { margin-top: 10px; }
.proc6-card .wait7-form label { color: #c9d5ee; font-size: .88rem; }
.proc6-card .wait7-ok { padding: 11px 14px; border-radius: 12px; background: rgba(46, 211, 164, .1); border: 1px solid rgba(46, 211, 164, .38); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .wait7-chev { transition: none; } }

/* v7.16 — the free analysis names the next competitors on the locked list (their details stay in the plan) */
.lk-named { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .92rem; color: var(--ink); }
.page-report .lk-named { color: #fff; }
/* v7.16 — the paid wait: the clock says what it counts */
.build-kicker .dw-time-wrap { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; color: #9fb0cf; font-size: .8rem; font-weight: 600; }
.build-kicker .dw-time-wrap .dw-time { margin-left: 0; }
.dw-head .dw-time-wrap { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; color: #9fb0cf; font-size: .8rem; font-weight: 600; }
.dw-head .dw-time-wrap .dw-time { margin-left: 0; }

/* v7.16 — the 30-day plan: "Not for me" sets a step aside (it leaves the count, the plan never forces a channel) */
.p30-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.p30-acts .p30-go { margin-top: 0; }
.p30-skip { padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: none; color: #b9c6e6; font: 600 .78rem var(--font-body); cursor: pointer; }
.p30-skip:hover { border-color: rgba(255, 255, 255, .45); color: #fff; }
.p30-skip:focus-visible { outline: 2px solid #b9d2ff; outline-offset: 2px; }
.p30-step.is-skipped .p30-body > *:not(.p30-acts), .p30-step.is-skipped .p30-tick, .p30-step.is-skipped .p30-go { opacity: .45; }
.p30-step.is-skipped .p30-title { text-decoration: line-through; }

/* v7.16 — what is ready, what is left to do: a plain status next to each deliverable */
.ad-status { display: flex; gap: 7px; align-items: flex-start; margin: 6px 0 0; font-size: .84rem; line-height: 1.4; }
.ad-status svg { flex: none; margin-top: 2px; }
.ad-status.is-todo { color: #ffd38a; }
.ad-status.is-ok { color: #8ff0d0; }
.rt-status { display: block; margin-top: 4px; font-size: .74rem; font-weight: 600; color: #8ff0d0; }
.rt-status.is-todo { color: #ffd38a; }

/* v7.16 — the Genius diagnosis at the top of the paid plan: three lines before the deliverables */
.diag7 { display: grid; gap: 10px; margin: 16px 0 20px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(127, 176, 255, .3); }
.diag7-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 14px; margin: 0; color: #e6ecfa; font-size: .98rem; line-height: 1.45; }
.diag7-k { color: #8fb2ff; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-top: .2em; }
.diag7-row a { color: #fff; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(127, 176, 255, .6); text-underline-offset: 3px; }
@media (max-width: 560px) { .diag7-row { grid-template-columns: minmax(0, 1fr); } }

/* v7.16 — the home hero says what is free and what is paid */
.hx-offer { margin: 12px 0 0; color: #9fb0cf; font-size: .86rem; line-height: 1.45; }
.hx-offer b { color: #fff; font-weight: 650; }
@media (max-width: 900px) { .h6-hero .hx-offer { text-align: center; } }

/* v7.16 — the paid wait on a phone: "Time elapsed" on its own line under the thanks, never squeezed beside it */
@media (max-width: 560px) {
  .build-kicker { flex-wrap: wrap; row-gap: 4px; }
  .build-kicker .dw-time-wrap { margin-left: 0; flex-basis: 100%; justify-content: center; white-space: nowrap; }
}

/* v7.20 — a volume Google does not give, said in words. */
.kw-unmeasured { margin: 10px 0 0; font-size: .86rem; color: var(--slate); }
.kw-rare { margin: 12px 0 0; font-size: .9rem; color: var(--slate); }
.kw-rare b { color: inherit; font-weight: 700; }

/* v7.22 — the website changes, as a bonus of the SEO chapter. */
.site-bonus { margin-top: 26px; }
.site-bonus .asset-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-bonus { background: rgba(46, 211, 164, .14); color: #8ff0d0; border-color: rgba(46, 211, 164, .35); }

/* v7.24 — the paid plan's Google page shows the competitors' real ads. */
.serp6-row.is-named .serp6-h { font-size: .95rem; }
.serp6-row.is-named .serp6-tag span { font-weight: 700; }

/* v7.25 — the free analysis shows how the plan is put online, as in the plan, smaller and locked. */
.guide-steps.is-compact { gap: 6px; margin: 6px 0 10px; }
.guide-steps.is-compact li { padding: 10px 6px 9px; border-radius: 12px; }
.guide-steps.is-compact .gs-icon { width: 30px; height: 30px; margin-bottom: 2px; }
.guide-steps.is-compact b { font-size: .84rem; }
.guide-steps.is-compact small { font-size: .72rem; }
.export-bar.is-compact { gap: 10px 12px; padding: 12px 14px; margin-bottom: 12px; }
.export-bar.is-compact .export-icon { width: 34px; height: 34px; }
.export-bar.is-compact b { font-size: .95rem; }
.export-bar.is-compact p { font-size: .8rem; }
.export-bar.is-compact .btn { padding: 9px 12px; font-size: .84rem; }
.export-bar.is-teaser .btn .lock { flex: none; }

/* v7.26 — the locked setup blocks of the free analysis: the buttons under the text at every width (never a narrow text column). */
.export-bar.is-teaser { grid-template-columns: auto minmax(0, 1fr); }
.export-bar.is-teaser .export-actions { grid-column: 1 / -1; justify-content: flex-start; }
@media (max-width: 640px) { .export-bar.is-teaser .export-actions .btn { flex: 1 1 200px; justify-content: center; } }

/* v7.26 — under the pay button: what happens and what comes with it, as aligned tiles (2 by 2, the last one across). */
.pay-tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; }
.pay-tiles li { display: grid; justify-items: center; align-content: center; gap: 7px; text-align: center; padding: 13px 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.pay-tiles li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pay-tiles .ps-ic { width: 32px; height: 32px; }
.pay-tiles b { display: block; color: #fff; font-size: .86rem; line-height: 1.3; font-weight: 600; text-wrap: balance; }
.pay-tiles small { display: block; color: #9fb0cf; font-size: .76rem; line-height: 1.3; }
.pay-tiles li.is-good { border-color: rgba(46, 211, 164, .3); background: rgba(46, 211, 164, .06); }
.pay-tiles li.is-good .ps-ic { color: #2ed3a4; border-color: rgba(46, 211, 164, .45); }

/* ======================================================================================================================
   v7.31 — The reports, new design (v9). Scoped to body.report-v9 (free and paid). One calm column of chapters on night
   blue, each on its own band: one big title, one picture read at a glance (Google on a phone, the site map), what is
   offered, one line for what waits in the plan. Google's four colours only as signals.
   ==================================================================================================================== */
body.report-v9, body.home-v9 {
  --v9-night: #071230; --v9-night-2: #0a1838; --v9-panel: #10214d; --v9-panel-2: #172c63; --v9-offer: #0e2156;
  --v9-line: rgba(255, 255, 255, .09); --v9-fg: #f3f6ff; --v9-muted: #a7b4d6; --v9-faint: #8794bd;
  --v9-mint: #8ff0d0; --v9-red: #ff7a93; --v9-gold: #ffc46b;
  --g1: #4285f4; --g2: #ea4335; --g3: #fbbc05; --g4: #34a853;
  background: var(--v9-night);
}
body.report-v9 main { background: var(--v9-night); }

/* Things come in as the visitor scrolls: a short rise, staggered (only with JS; without it everything is there). */
.js body.report-v9 [data-v9-in], .js body.home-v9 [data-v9-in] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 80ms); }
.js body.report-v9 [data-v9-in].is-in, .js body.home-v9 [data-v9-in].is-in { opacity: 1; transform: none; }

/* --- Header --- */
.v9-head { padding: clamp(30px, 6vw, 60px) 0 clamp(40px, 6vw, 60px); text-align: center; }
.v9-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0 0 20px; color: var(--v9-muted); font-size: .88rem; }
.v9-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #dbe4ff; font-weight: 500; }
.v9-head h1 { margin: 0 auto; max-width: 15ch; color: #fff; font-size: clamp(2.3rem, 7.2vw, 3.9rem); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.v9-for { margin-top: 14px; color: var(--v9-muted); font-size: 1.02rem; }
.v9-for b { color: #fff; font-weight: 600; }
body.report-v9 .v9-head .sum7 { max-width: 880px; margin: 32px auto 0; text-align: left; }
body.report-v9 .sum7-head h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); letter-spacing: -.02em; }
body.report-v9 .sum7-meta { font-size: .82rem; }
body.report-v9 .sum7-grid { margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { body.report-v9 .sum7-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { body.report-v9 .sum7-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
body.report-v9 .sum7-item { gap: 8px; padding: 15px; border-radius: 22px; background: var(--v9-panel); border-color: transparent; }
body.report-v9 .sum7-item:hover { background: var(--v9-panel-2); border-color: transparent; }
body.report-v9 .sum7-item b { font-size: 1rem; color: #fff; }
body.report-v9 .sum7-item small { color: var(--v9-mint); font-size: .82rem; font-weight: 600; }
body.report-v9 .sum7-item.is-locked small { color: #a9c1ff; }
body.report-v9 .sum7-item.is-locked .sum7-seen { display: none; }
body.report-v9 .sum7-n { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
body.report-v9 .sum7-ic { color: #a9c1ff; }
body.report-v9 .v7-source { margin-top: 14px; color: var(--v9-faint); }
body.report-v9 .v9-head .understood { max-width: 880px; margin: 14px auto 0; text-align: left; background: rgba(255, 255, 255, .04); border: 1px solid var(--v9-line); border-radius: 20px; box-shadow: none; }
body.report-v9 .v9-head .site-first { max-width: 760px; margin: 24px auto 0; text-align: left; }
/* Paid: the plan is ready, under the title (its own title and kicker are said by the header). */
body.report-v9 .v9-head .plan-ready { max-width: 880px; margin: 28px auto 0; padding: 0; background: none; border: 0; box-shadow: none; text-align: left; }
body.report-v9 .v9-head .plan-ready > .diag-kicker, body.report-v9 .v9-head .plan-ready > h2 { display: none; }
body.report-v9 .v9-head .diag7 { border-radius: 22px; background: var(--v9-panel); border: 0; }
body.report-v9 .v9-head .plan-doc { justify-content: center; text-align: center; }
body.report-v9 .v9-head .ready-tiles { gap: 10px; }
body.report-v9 .v9-head .ready-tile { border-radius: 22px; background: var(--v9-panel); border-color: transparent; }

/* --- The bar --- */
.v9-bar { position: sticky; top: var(--v9-top, 68px); z-index: 40; background: rgba(7, 18, 48, .9); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-block: 1px solid var(--v9-line); }
.v9-bar-in { display: flex; align-items: center; gap: 10px; padding-block: 8px; }
.v9-chips { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.v9-chips::-webkit-scrollbar { display: none; }
.v9-chips a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--v9-muted); font-size: .88rem; font-weight: 500; text-decoration: none; transition: background .25s, color .25s; }
.v9-chips a:hover { color: #fff; }
.v9-chips a.is-on { background: #fff; color: var(--v9-night); }
.v9-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.v9-dot { background: linear-gradient(135deg, #7f9cff, #8ff0d0); }
.v9-cta.btn { flex: none; min-height: 40px; padding: 0 16px; gap: 6px; white-space: nowrap; }
.v9-progress { height: 3px; display: flex; }
.v9-progress span { flex: 1; transform: scaleX(0); transform-origin: left; background: linear-gradient(95deg, #7f9cff 0%, #a9cbff 45%, #8ff0d0 100%); background-size: 400% 100%; }
.v9-progress span:nth-child(2) { background-position: 33.33% 0; } .v9-progress span:nth-child(3) { background-position: 66.66% 0; } .v9-progress span:nth-child(4) { background-position: 100% 0; }

/* --- The chapters: one calm column, each on its own band --- */
.v9-body { padding-bottom: 8px; }
body.report-v9 .v9-body > section, body.report-v9 .v9-body > .report-foot, body.report-v9 .v9-body > .bonus-box, body.report-v9 .v9-body > details { width: min(760px, calc(100% - 2 * max(18px, env(safe-area-inset-left, 0px)))); margin-inline: auto; }
body.report-v9 .v9-body > .chapter { padding-block: clamp(68px, 10vw, 112px); margin: 0 auto; border: 0; scroll-margin-top: calc(var(--v9-top, 68px) + 56px); }
body.report-v9 .v9-body > .chapter + .chapter { border-top: 0; padding-top: clamp(68px, 10vw, 112px); }
body.report-v9 .v9-body > .chapter:nth-of-type(even) { background: var(--v9-night-2); box-shadow: 0 0 0 100vmax var(--v9-night-2); clip-path: inset(0 -100vmax); }
.v9-col { width: 100%; }
.v9-stack { display: flex; flex-direction: column; gap: 14px; }
.v9-ch-head { max-width: 680px; margin: 0 auto clamp(30px, 5vw, 46px); text-align: center; }
.v9-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--v9-muted); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.v9-eyebrow .v9-dot { width: 8px; height: 8px; }
.v9-ch-head h2 { color: #fff; font-size: clamp(2.15rem, 6.8vw, 3.5rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.v9-lede { margin: 14px auto 0; max-width: 30em; color: var(--v9-muted); font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.5; }
.v9-lede b { color: #fff; font-weight: 600; }
.v9-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; }
.v9-pill.is-ok { background: rgba(143, 240, 208, .12); color: var(--v9-mint); }
.v9-pill.is-lock { background: rgba(127, 156, 255, .13); color: #c4d3ff; }
.v9-card { padding: clamp(20px, 3.4vw, 28px); border-radius: 26px; background: var(--v9-panel); }
.v9-card-h, .v9-card h3 { margin: 0 0 16px; color: #fff; font-size: 1.15rem; letter-spacing: -.02em; }
.v9-label { margin: 18px 0 0; color: var(--v9-muted); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.v9-say { margin: 0; color: var(--v9-muted); text-align: center; }
.v9-say b { color: #fff; font-weight: 600; }

/* One line for what waits in the plan. */
.v9-lockline { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 16px 20px; border: 1px dashed rgba(143, 176, 255, .38); border-radius: 22px; color: var(--v9-fg); text-decoration: none; transition: background .2s, border-color .2s; }
.v9-lockline:hover { background: rgba(127, 156, 255, .06); border-color: rgba(143, 176, 255, .7); color: var(--v9-fg); }
.v9-lockline > svg { color: #a9c1ff; }
.v9-ll-t { min-width: 0; color: var(--v9-muted); }
.v9-ll-t b { color: #fff; font-weight: 600; }
.v9-lockline em { grid-column: 2; font-style: normal; color: #a9c1ff; font-size: .88rem; font-weight: 600; white-space: nowrap; }
@media (min-width: 600px) { .v9-lockline { grid-template-columns: auto minmax(0, 1fr) auto; } .v9-lockline em { grid-column: 3; } }
.v9-names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.v9-names b, .v9-names i { padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .07); font-size: .8rem; font-weight: 600; font-style: normal; }
.v9-names i { color: transparent; text-shadow: 0 0 7px rgba(255, 255, 255, .55); user-select: none; }
.v9-card .v9-lockline { margin-top: 18px; }

/* --- Google on a phone: today (chapter 1), then with the plan (chapter 2) --- */
.v9-phone-scene { display: grid; justify-items: center; gap: 18px; }
.v9-when { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: .9rem; font-weight: 700; }
.v9-when.is-now { background: rgba(255, 255, 255, .08); color: #dbe4ff; }
.v9-when.is-plan { background: rgba(143, 240, 208, .13); color: var(--v9-mint); }
.v9-phone { position: relative; width: min(312px, 84vw); padding: 10px; border-radius: 50px; background: linear-gradient(150deg, #2e3a5c, #0b1226 62%); box-shadow: 0 0 0 1.5px rgba(160, 180, 255, .28), 0 60px 120px -40px rgba(0, 0, 0, .85), 0 0 140px -20px rgba(79, 123, 255, .45); }
.v9-screen { position: relative; height: 548px; border-radius: 40px; overflow: hidden; background: #fff; color: #202124; text-align: left; }
.v9-island { position: absolute; top: 10px; left: 50%; z-index: 5; width: 90px; height: 26px; margin-left: -45px; border-radius: 14px; background: #05070d; }
.v9-scroll { padding: 48px 14px 18px; }
.v9-scroll.is-moving { transition: transform 5.4s cubic-bezier(.45, 0, .2, 1); }
.v9-q { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 11px 14px; border-radius: 999px; box-shadow: 0 1px 6px rgba(32, 33, 36, .22); font-size: 14px; font-weight: 500; }
.v9-tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v9-gmark { display: inline-flex; gap: 2px; flex: none; }
.v9-gmark i { width: 6px; height: 6px; border-radius: 50%; background: var(--g1); }
.v9-gmark i:nth-child(2) { background: var(--g2); } .v9-gmark i:nth-child(3) { background: var(--g3); } .v9-gmark i:nth-child(4) { background: var(--g4); }
.v9-caret { width: 2px; height: 16px; flex: none; background: #202124; animation: v9-blink 1s steps(1) infinite; }
@keyframes v9-blink { 50% { opacity: 0; } }
.v9-gtabs { display: flex; gap: 16px; margin: 12px 2px 2px; padding-bottom: 9px; border-bottom: 1px solid #ecedf1; color: #5f6368; font-size: 12px; }
.v9-gtabs b { color: #1a73e8; font-weight: 600; box-shadow: 0 10px 0 -7px #1a73e8; }
.v9-res { padding: 13px 2px; border-bottom: 1px solid #f1f2f5; }
.v9-ad { display: block; margin-bottom: 7px; font-size: 11.5px; font-weight: 700; color: #202124; }
.v9-site { display: flex; align-items: center; gap: 9px; }
.v9-fav { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #eef1f7; color: #3c4043; font-size: 11px; font-weight: 800; }
.v9-fav:empty { background: #eef1f7 radial-gradient(circle, #c5cbd8 0 4px, transparent 4.5px); }
.v9-fav.is-you, .v9-res.is-you .v9-fav { background: linear-gradient(135deg, #4f7bff, #7f9cff); color: #fff; }
.v9-site > span { display: grid; min-width: 0; line-height: 1.25; }
.v9-site b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v9-site small { color: #5f6368; font-size: 11px; }
.v9-bl { filter: blur(3.5px); user-select: none; }
.v9-t { display: block; height: 11px; margin-top: 10px; border-radius: 6px; background: #9db1f0; }
.v9-l { display: block; height: 7px; margin-top: 7px; border-radius: 4px; background: #e7eaf0; }
.v9-h { display: block; margin-top: 8px; color: #1a0dab; font-size: 15px; line-height: 1.3; font-weight: 600; }
.v9-d { display: block; margin-top: 5px; color: #4d5156; font-size: 12.5px; line-height: 1.4; }
.v9-res.is-you { margin: 8px -4px; padding: 13px 12px; border: 2px solid #4f7bff; border-radius: 18px; background: #f2f5ff; }
.v9-stamp { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: calc(100% - 24px); margin-inline: auto; padding: 12px 18px; border-radius: 999px; background: #e0334f; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; box-shadow: 0 18px 36px -12px rgba(224, 51, 79, .8); opacity: 0; transform: translateY(18px) scale(.9); transition: opacity .45s, transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.v9-stamp.is-good { background: #12a36f; box-shadow: 0 18px 36px -12px rgba(18, 163, 111, .8); }
.v9-stamp.is-mid { background: #c27a00; box-shadow: 0 18px 36px -12px rgba(194, 122, 0, .8); }
.v9-screen::after { content: ""; position: absolute; inset: auto 0 0; z-index: 4; height: 120px; background: linear-gradient(transparent, rgba(255, 255, 255, .96) 70%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.v9-phone.is-done .v9-stamp { opacity: 1; transform: none; }
.v9-phone.is-done .v9-screen::after { opacity: 1; }
.v9-mine-in { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .75s cubic-bezier(.2, .8, .2, 1), opacity .5s .15s; }
.v9-mine-in > div { min-height: 0; }
.js .v9-phone[data-v9-play="ad"]:not(.is-landed) .v9-mine-in { grid-template-rows: 0fr; opacity: 0; }
html:not(.js) .v9-stamp { opacity: 1; transform: none; }
.v9-res.is-mine { position: relative; margin: 12px -4px 2px; padding: 13px 12px; border: 2px solid #2ed3a4; border-radius: 18px; background: #f0fbf6; box-shadow: 0 16px 32px -18px rgba(46, 211, 164, .9); }
.v9-res.is-mine .v9-t { background: #1a0dab; opacity: .75; }
.v9-res.is-mine .v9-l { background: #d5eee4; }
.v9-tag { position: absolute; right: 8px; top: -13px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #0d1c48; color: var(--v9-mint); font-size: 11.5px; font-weight: 700; }
.v9-under { margin: 0; color: var(--v9-muted); font-size: .95rem; text-align: center; }
.v9-under b { color: #fff; font-weight: 600; }

/* The competitor analyzed in full, in three figures. */
.v9-rival-id { display: flex; align-items: center; gap: 12px; }
.v9-av { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: #fff; color: #0d1c48; font-size: 20px; font-weight: 800; }
.v9-rival-id > span { display: grid; min-width: 0; }
.v9-rival-id b { color: #fff; font-size: 1.15rem; }
.v9-rival-id small { color: var(--v9-muted); font-size: .88rem; overflow-wrap: anywhere; }
.v9-facts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.v9-facts div { display: grid; align-content: start; gap: 2px; padding: 14px 8px; border-radius: 18px; background: rgba(255, 255, 255, .05); text-align: center; }
.v9-facts b { color: #fff; font-size: clamp(1.35rem, 5.4vw, 1.85rem); line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.v9-facts span { color: var(--v9-muted); font-size: .8rem; line-height: 1.3; }

/* What buyers type. */
.v9-kw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.v9-kw + .v9-kw { margin-top: 16px; }
.v9-kw b { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.v9-kw > span { color: var(--v9-muted); font-size: .88rem; white-space: nowrap; }
.v9-kw-bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.v9-kw-bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(95deg, #7f9cff 0%, #a9cbff 45%, #8ff0d0 100%); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .2s; }
.js .v9-card:not(.is-in) .v9-kw-bar i { transform: scaleX(0); }

/* Three steps joined by a line that draws itself. */
.v9-steps-card h3 { text-align: center; }
.v9-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; text-align: center; }
.v9-steps::before { content: ""; position: absolute; left: 17%; right: 17%; top: 23px; height: 2px; background: linear-gradient(95deg, #7f9cff 0%, #a9cbff 45%, #8ff0d0 100%); transform-origin: left; transition: transform 1.2s ease .2s; }
.js .v9-steps:not(.is-in)::before { transform: scaleX(0); }
.v9-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; }
.v9-step-ic { width: 48px; height: 48px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 50%; background: var(--v9-panel-2); border: 1px solid var(--v9-line); color: #dbe4ff; }
.v9-steps b { color: #fff; font-size: .98rem; font-weight: 600; }
.v9-steps small { color: var(--v9-muted); font-size: .8rem; line-height: 1.35; }
.v9-steps-go { display: grid; justify-items: center; gap: 10px; margin-top: 22px; text-align: center; }
.v9-steps-go p { margin: 0; color: var(--v9-muted); font-size: .88rem; }

/* The Meta ad. */
.v9-adtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.v9-adtabs span, .v9-adtabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; }
.v9-adtabs span { background: #fff; color: var(--v9-night); }
.v9-adtabs a { background: rgba(255, 255, 255, .06); color: var(--v9-muted); }
body.report-v9 .v9-fb { width: 100%; max-width: 460px; margin-inline: auto; border-radius: 22px; overflow: hidden; box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .75); }
body.report-v9 .v9-fb-visual { background: radial-gradient(120% 120% at 20% 10%, #e9efff 0%, #f6f8ff 45%, #e6f8f1 100%); }
.v9-angle { display: grid; justify-items: center; gap: 12px; max-width: 460px; margin: 4px auto 0; text-align: center; }
.v9-angle p { margin: 0; color: var(--v9-muted); font-size: .95rem; }
.v9-angle b { color: #fff; font-weight: 600; }
.v9-copy.btn { gap: 8px; }

/* The week of posts. */
.v9-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v9-days > * { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 18px; background: rgba(255, 255, 255, .06); color: var(--v9-muted); text-decoration: none; }
.v9-days b { font-weight: 600; }
.v9-days small { font-size: .75rem; font-weight: 600; }
.v9-days .is-open { background: #fff; color: var(--v9-night); }
.v9-days .is-open small { color: #0f8a5f; }
.v9-post { padding: 18px 18px 14px; border-radius: 24px; background: #fff; color: #1d2226; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7); }
.v9-post-top { display: flex; align-items: center; gap: 10px; }
.v9-post-av { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #4f7bff, #7f9cff); color: #fff; font-weight: 700; }
.v9-post-top > span { display: grid; min-width: 0; }
.v9-post-top b { font-size: .95rem; }
.v9-post-top small { color: #666; font-size: .8rem; }
.v9-post-copy.btn { margin-left: auto; min-height: 38px; padding: 0 14px; gap: 6px; background: #0a66c2; color: #fff; border: 0; }
.v9-post-body { margin-top: 12px; font-size: .97rem; line-height: 1.5; }
.v9-post-body p { margin: 0 0 10px; }
.v9-post-hook { font-weight: 700; font-size: 1.05rem; }
.js .v9-post-body.is-cut { max-height: 10.5em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.v9-more { display: none; padding: 0; border: 0; background: none; color: #666; font: 600 .88rem/1.4 inherit; cursor: pointer; }
.js .v9-more { display: inline; }

/* The search the business misses, and the page to add. */
.v9-query { display: grid; justify-items: center; gap: 10px; text-align: center; }
.v9-qpill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 12px 18px; border-radius: 999px; background: #fff; color: #202124; font-weight: 600; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7); }
.v9-qpill svg { color: #1a73e8; flex: none; }
.v9-qpill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v9-query p { margin: 0; color: var(--v9-muted); }
.v9-query p b { color: #fff; font-weight: 600; }
.v9-tree { text-align: center; }
.v9-tree h3 { margin-bottom: 0; }
.v9-root { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 16px; border-radius: 14px; background: #fff; color: #202124; font-size: .95rem; font-weight: 700; max-width: 100%; overflow-wrap: anywhere; }
.v9-root svg { color: #1a73e8; flex: none; }
.v9-branches { position: relative; display: grid; gap: 10px; align-items: start; margin-top: 44px; }
.v9-branches::before { content: ""; position: absolute; top: -24px; left: var(--l); right: var(--r); height: 2px; background: rgba(255, 255, 255, .22); }
.v9-branches::after { content: ""; position: absolute; top: -44px; left: 50%; width: 2px; height: 20px; background: rgba(255, 255, 255, .22); }
.v9-br { position: relative; display: grid; justify-items: center; min-width: 0; }
.v9-br::before { content: ""; position: absolute; top: -24px; left: 50%; width: 2px; height: 24px; background: rgba(255, 255, 255, .22); }
.v9-br.is-new::before { background: var(--v9-mint); transform-origin: top; transition: transform .5s ease .7s; }
.js .v9-tree:not(.is-in) .v9-br.is-new::before { transform: scaleY(0); }
.v9-pg-old { width: 100%; max-width: 64px; aspect-ratio: .78; display: grid; align-content: start; gap: 5px; padding: 9px 8px; border-radius: 10px; background: rgba(255, 255, 255, .1); }
.v9-pg-old i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.v9-pg-old i:first-child { width: 70%; background: rgba(255, 255, 255, .4); }
.v9-br small { margin-top: 8px; color: var(--v9-faint); font-size: .75rem; }
.v9-pg-new { width: 100%; display: grid; justify-items: start; gap: 4px; padding: 14px; border: 2px dashed var(--v9-mint); border-radius: 18px; background: rgba(143, 240, 208, .08); text-align: left; transition: opacity .5s ease 1s, transform .6s cubic-bezier(.3, 1.5, .5, 1) 1s; }
.js .v9-tree:not(.is-in) .v9-pg-new { opacity: 0; transform: scale(.85); }
.v9-tree.is-in .v9-pg-new { animation: v9-halo 2.4s ease 1.8s 2; }
@keyframes v9-halo { 0% { box-shadow: 0 0 0 0 rgba(143, 240, 208, .45); } 100% { box-shadow: 0 0 0 18px rgba(143, 240, 208, 0); } }
.v9-pg-new small { color: var(--v9-mint); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v9-pg-new b { color: #fff; font-size: .95rem; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.v9-pg-new span { color: var(--v9-muted); font-size: .8rem; }

/* The 30-day plan, locked: four weeks along a line that draws itself. */
.v9-weeks { position: relative; display: flex; flex-direction: column; gap: 16px; padding-left: 34px; color: inherit; text-decoration: none; }
.v9-weeks::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #7f9cff 0%, #a9cbff 45%, #8ff0d0 100%); transform-origin: top; transition: transform 1.6s ease .2s; }
.js .v9-weeks:not(.is-in)::before { transform: scaleY(0); }
.v9-week { position: relative; display: grid; gap: 8px; }
.v9-week::before { content: ""; position: absolute; left: -30px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--v9-night-2); border: 2px solid var(--v9-muted); }
.v9-week b { color: #a9c1ff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.v9-task { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.v9-box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--v9-faint); }
.v9-blur { display: block; width: var(--w, 60%); height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .14); }

/* --- The offer: centred, what the buyer gets as tiles, the price and the payment tiles below --- */
body.report-v9 .v9-body > .paywall { margin: 0 auto; padding-block: clamp(72px, 10vw, 120px); background: var(--v9-offer); box-shadow: 0 0 0 100vmax var(--v9-offer); clip-path: inset(0 -100vmax); border-radius: 0; overflow: visible; color: #cbd6ea; scroll-margin-top: calc(var(--v9-top, 68px) + 56px); }
body.report-v9 .paywall::before { display: none; }
body.report-v9 .paywall-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "buy"; grid-template-rows: none; }
body.report-v9 .paywall-main { padding: 0; text-align: center; }
body.report-v9 .paywall-kicker { justify-content: center; color: var(--v9-mint); }
body.report-v9 .paywall h2 { margin-inline: auto; max-width: 14ch; color: #fff; font-size: clamp(2.15rem, 6.8vw, 3.5rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
body.report-v9 .paywall-sub { margin: 14px auto 0; color: var(--v9-muted); font-size: 1.1rem; }
.v9-gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 860px; margin: 34px auto 0; padding: 0; list-style: none; text-align: left; }
/* No tile left alone on its row: a last odd one takes the whole row (two columns on phones, three on wider screens). */
.v9-gets li:nth-child(odd):last-child { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
@media (min-width: 760px) {
  .v9-gets { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .v9-gets li, .v9-gets li:nth-child(odd):last-child { grid-column: span 2; grid-template-columns: none; align-items: start; }
  .v9-gets li:nth-child(3n+1):last-child { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .v9-gets li:nth-child(3n+1):nth-last-child(2), .v9-gets li:nth-child(3n+2):last-child { grid-column: span 3; }
}
.v9-gets li { position: relative; display: grid; align-content: start; gap: 10px; padding: 18px 16px; border-radius: 22px; background: rgba(255, 255, 255, .06); }
.v9-gets b { color: #fff; font-size: .98rem; line-height: 1.3; font-weight: 600; padding-right: 18px; }
.v9-get-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; }
.v9-get-ic { background: linear-gradient(135deg, rgba(127, 156, 255, .22), rgba(143, 240, 208, .14)); color: #c4d3ff; }
.v9-get-ok { position: absolute; right: 12px; top: 12px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(143, 240, 208, .16); color: var(--v9-mint); }
body.report-v9 .paywall-buy { width: 100%; max-width: 520px; margin: 0 auto; padding: 36px 0 0; background: none; border: 0; justify-self: center; }

/* Keep the analysis, and the footer. */
body.report-v9 .v9-body > .keep { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; margin: 0 auto; padding-block: clamp(56px, 8vw, 88px); border: 0; border-radius: 0; background: none; text-align: center; }
body.report-v9 .keep h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -.025em; }
body.report-v9 .keep p { color: var(--v9-muted); font-size: 1rem; }
body.report-v9 .keep form { width: 100%; max-width: 560px; }
body.report-v9 .keep-row button { flex: 1 1 auto; }
body.report-v9 .keep-tips { justify-content: center; text-align: left; }
body.report-v9 .v9-body > .report-foot { margin-top: 0; padding-block: 28px 40px; border-top: 1px solid var(--v9-line); text-align: center; color: var(--v9-faint); }
body.report-v9 .report-foot .problem summary { margin-inline: auto; }

/* --- The paid plan in the same look: centred chapter openings, one surface for every block, all its detail kept --- */
body.report-v9 .gen-hero { max-width: 680px; margin: 0 auto clamp(28px, 4vw, 40px); text-align: center; box-shadow: none; transform: none !important; }
body.report-v9 .gen-hero .glare6 { display: none; }
body.report-v9 .gen-hero .gen-eyebrow { justify-content: center; gap: 6px; color: var(--v9-muted); font-size: .8rem; letter-spacing: .1em; }
body.report-v9 .gen-hero .gen-eyebrow::before { content: ""; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: linear-gradient(135deg, #7f9cff, #8ff0d0); }
body.report-v9 .gen-hero .gen-eyebrow .n { display: none; }
body.report-v9 .gen-hero h2 { margin-top: 12px; color: #fff; font-size: clamp(2.05rem, 6.4vw, 3.3rem); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
body.report-v9 .gen-hero h2 > svg { display: none; }
body.report-v9 .gen-hero p { margin-inline: auto; color: var(--v9-muted); font-size: clamp(1rem, 1.6vw, 1.12rem); }
body.report-v9 .gen-hero .gen-status, body.report-v9 .gen-hero .gen-stats { justify-content: center; }
body.report-v9 .gen-stats { display: flex; flex-wrap: wrap; justify-content: center; }
body.report-v9 .gen-stats li { flex: 1 1 140px; max-width: 220px; border-radius: 20px; background: var(--v9-panel); border-color: transparent; }
body.report-v9 .v7-block, body.report-v9 .v9-body .cards .card, body.report-v9 .kw-box, body.report-v9 .export-bar, body.report-v9 .why7,
body.report-v9 .miss7, body.report-v9 .action-card, body.report-v9 .asset-card, body.report-v9 .proof-fold, body.report-v9 .bonus-box { background: var(--v9-panel); border: 1px solid transparent; border-radius: 24px; box-shadow: none; }
body.report-v9 .v7-block + .v7-block { margin-top: 14px; }
body.report-v9 .v7-label { margin-top: 26px; color: var(--v9-muted); letter-spacing: .08em; }
body.report-v9 .serp6 { border-radius: 24px; box-shadow: 0 40px 100px rgba(0, 0, 0, .45); }
body.report-v9 .guide-steps { position: relative; align-items: start; margin: 6px 0 14px; padding: 18px 8px 4px; border-radius: 24px; background: var(--v9-panel); }
body.report-v9 .guide-steps::before { content: ""; position: absolute; left: 17%; right: 17%; top: 40px; height: 2px; background: linear-gradient(95deg, #7f9cff 0%, #a9cbff 45%, #8ff0d0 100%); }
body.report-v9 .guide-steps li { align-content: start; background: none; border: 0; padding: 0 4px 14px; }
body.report-v9 .guide-steps li:not(:last-child)::after { display: none; }
body.report-v9 .guide-steps .gs-icon { position: relative; z-index: 1; width: 44px; height: 44px; margin-bottom: 8px; background: var(--v9-panel-2); color: #dbe4ff; border: 1px solid var(--v9-line); }
body.report-v9 .guide-steps b { color: #fff; }
body.report-v9 .guide-steps small { color: var(--v9-muted); }
body.report-v9 .v9-body > .plan30 .gen-hero { margin-bottom: 26px; }
body.report-v9 .v9-body > .radar-cta { margin-block: 0 clamp(40px, 6vw, 64px); border-radius: 28px; }
body.report-v9 .v9-body > .bonus-box { margin-block: 0 40px; padding: 22px; }
body.report-v9 .v9-paid-visual { margin: 0 auto 26px; }

@media (max-width: 520px) { .v9-cta.btn { min-height: 38px; padding: 0 12px; font-size: .88rem; } .v9-chips a { padding: 8px 11px; font-size: .84rem; } }
@media (prefers-reduced-motion: reduce) {
  .js body.report-v9 [data-v9-in] { opacity: 1; transform: none; transition: none; }
  .v9-progress span, .v9-steps::before, .v9-weeks::before, .v9-br.is-new::before, .v9-pg-new, .v9-kw-bar i, .v9-mine-in, .v9-stamp, .v9-scroll.is-moving { transition: none !important; }
  .v9-caret { animation: none; }
  .v9-tree.is-in .v9-pg-new { animation: none; }
}
@media print {
  .v9-bar { display: none; }
  body.report-v9 .v9-body > .chapter:nth-of-type(even), body.report-v9 .v9-body > .paywall { box-shadow: none; clip-path: none; }
  .js body.report-v9 [data-v9-in] { opacity: 1; transform: none; }
}
body.report-v9 .v9-copy.btn { background: #fff; color: var(--v9-night); border: 0; }
body.report-v9 .v9-copy.btn:hover { background: #e8eeff; }
/* On a phone the site map reads downwards: a trunk on the left, today's pages in one small row, the new pages under it. */
@media (max-width: 560px) {
  .v9-tree { text-align: left; }
  .v9-tree h3 { text-align: center; }
  .v9-tree .v9-root { display: flex; width: max-content; margin-inline: auto; }
  .v9-branches { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; margin: 20px 0 0 4px; padding-left: 30px; }
  .v9-branches::after { display: none; }
  .v9-branches::before { top: -20px; bottom: 34px; left: 10px; right: auto; width: 2px; height: auto; }
  .v9-br { justify-items: start; }
  .v9-br::before { top: 50%; left: -20px; width: 20px; height: 2px; }
  .v9-br.is-new::before { transform-origin: left; }
  .js .v9-tree:not(.is-in) .v9-br.is-new::before { transform: scaleX(0); }
  .v9-br:not(.is-new) { display: flex; align-items: center; gap: 10px; }
  .v9-br:not(.is-new) + .v9-br:not(.is-new) { display: none; }
  .v9-pg-old { width: 34px; padding: 6px 5px; gap: 3px; }
  .v9-pg-old i { height: 3px; }
  .v9-br small { margin: 0; }
  .v9-br:not(.is-new) small::after { content: attr(data-more); }
}

/* The competitor's message and prices, and what the plan holds on the others: light lines, never boxes. */
.v9-rival-more { display: grid; gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--v9-line); }
.v9-rival-more div { display: grid; gap: 4px; }
.v9-rival-more dt { display: inline-flex; align-items: center; gap: 7px; color: var(--v9-muted); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.v9-rival-more dd { margin: 0; color: #fff; font-size: 1rem; line-height: 1.45; }
.v9-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; color: var(--v9-muted); font-size: .88rem; }
.v9-what > span { display: inline-flex; align-items: center; gap: 6px; }
.v9-what svg { color: #a9c1ff; }
body.report-v9 .v9-stamp { font-size: 14px; padding: 11px 15px; }
body.report-v9 .v9-head .plan-ready::before, body.report-v9 .v9-head .plan-ready::after { display: none; }

/* ======================================================================================================================
   v7.31 — The home page, new design (v9): the reports' look. The words of the ad that converts, the two phones (Google
   today, then with the plan), what the plan holds, three steps, the price, the questions.
   ==================================================================================================================== */
body.home-v9 { background: var(--v9-night); }
body.home-v9 main { background: var(--v9-night); }
.h9-hero { position: relative; padding-block: clamp(40px, 8vw, 88px) clamp(48px, 7vw, 80px); text-align: center; background: radial-gradient(70% 60% at 50% 0%, rgba(79, 123, 255, .28), transparent 70%), var(--v9-night); }
.h9-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 8px 16px; border-radius: 999px; background: rgba(79, 123, 255, .14); border: 1px solid rgba(125, 176, 255, .4); color: #dbe4ff; font-size: .9rem; font-weight: 500; }
.h9-chip svg { color: #7db0ff; }
.h9-hero h1 { max-width: 15ch; margin: 0 auto; color: #fff; font-size: clamp(2.4rem, 7.6vw, 4.2rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.h9-hero h1 .grad { display: block; }
.h9-offer { margin: 18px 0 0; color: var(--v9-muted); font-size: 1.08rem; }
.h9-offer b { color: #fff; font-weight: 600; }
.h9-form { max-width: 620px; margin: 28px auto 0; text-align: left; }
.h9-band { padding-block: clamp(68px, 10vw, 112px); background: var(--v9-night); }
.h9-band.is-alt { background: var(--v9-night-2); }
.h9-band.is-offer { background: var(--v9-offer); }
.h9-band.is-final { background: radial-gradient(70% 80% at 50% 100%, rgba(79, 123, 255, .25), transparent 70%), var(--v9-night-2); }
body.home-v9 .v9-ch-head h2 { font-size: clamp(2.05rem, 6.4vw, 3.3rem); }
.h9-phones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; justify-items: center; }
@media (min-width: 860px) { .h9-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.h9-note { margin: 28px 0 0; color: var(--v9-faint); font-size: .85rem; text-align: center; }
.h9-steps { max-width: 760px; margin: 0 auto; }
.h9-price { max-width: 480px; margin: 0 auto; text-align: center; }
.h9-cmp { display: grid; gap: 8px; }
.h9-cmp div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .06); text-align: left; }
.h9-cmp span { color: var(--v9-muted); }
.h9-cmp s { position: relative; color: #b6c3de; font-weight: 600; text-decoration: none; white-space: nowrap; }
.h9-cmp s::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 3px; border-radius: 2px; background: #ff6b81; transform: rotate(-4deg); }
.h9-cmp .is-me { padding-block: 18px; background: linear-gradient(95deg, rgba(79, 123, 255, .35), rgba(46, 211, 164, .22)); }
.h9-cmp .is-me span { color: #fff; font-weight: 600; }
.h9-cmp .is-me b { color: #fff; font-size: clamp(2.6rem, 11vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.h9-once { margin: 18px 0 0; color: #dbe4ff; font-weight: 600; }
.h9-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--v9-muted); font-size: .9rem; }
.h9-trust li { display: inline-flex; align-items: center; gap: 6px; }
.h9-trust svg { color: var(--v9-mint); }
.h9-go.btn { width: 100%; margin-top: 24px; min-height: 56px; }
.h9-faq { max-width: 760px; margin: 0 auto; }
body.home-v9 .h9-faq details { border-radius: 18px; background: var(--v9-panel); border-color: transparent; }
body.home-v9 .h9-faq summary { color: #fff; }
body.home-v9 .h9-faq p { color: var(--v9-muted); }
@media (prefers-reduced-motion: reduce) { .js body.home-v9 [data-v9-in] { opacity: 1; transform: none; transition: none; } }
.h9-chip { font-size: .86rem; padding: 8px 14px; }
.h9-cmp s { font-size: .92rem; }
.h9-cmp div > span:first-child { flex: 0 1 auto; }
.admin-h3 { margin: 22px 0 8px; font-size: 1rem; }
/* Printed (or saved as PDF from the browser): everything shown at once, the phone illustrations left out. */
@media print {
  .js body.report-v9 [data-v9-in], .js body.home-v9 [data-v9-in] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .v9-phone-scene { display: none !important; }
  .js .v9-tree:not(.is-in) .v9-pg-new, .v9-pg-new { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .js .v9-steps:not(.is-in)::before, .js .v9-weeks:not(.is-in)::before { transform: none; }
}
@media print { .v9-mine-in { grid-template-rows: 1fr !important; opacity: 1 !important; } .v9-stamp { opacity: 1 !important; transform: none !important; } }
.v9-phone[data-v9-play="scroll"] .v9-scroll { padding-bottom: 96px; }

/* --- Face to face (v9): the competitor buyers see most against the business, like a match poster --- */
.v9-duel { position: relative; overflow: hidden; padding: 28px 14px 16px; border-radius: 30px; background: radial-gradient(60% 46% at 18% 0%, rgba(127, 156, 255, .32), transparent 72%), radial-gradient(60% 46% at 82% 0%, rgba(255, 122, 147, .2), transparent 72%), linear-gradient(180deg, #14295e, #0f1f4a 70%); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.v9-duel::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #7f9cff, #a9cbff 40%, #8ff0d0 60%, #ff7a93); }
.v9-duel-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 6px; }
.v9-duel-top > .v9-vs { margin-top: 8px; }
.v9-fighter { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.v9-fighter b { max-width: 100%; color: #fff; font-size: 1.08rem; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.v9-fighter small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v9-muted); font-size: .8rem; }
.v9-fav-big { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 22px; font-size: 28px; font-weight: 800; }
.v9-fighter.is-them .v9-fav-big { background: #fff; color: #0d1c48; box-shadow: 0 0 0 6px rgba(127, 156, 255, .18), 0 20px 44px -16px rgba(127, 156, 255, .85); }
.v9-fighter.is-you .v9-fav-big { background: linear-gradient(135deg, #7f9cff, #8ff0d0); color: #071230; box-shadow: 0 0 0 6px rgba(255, 122, 147, .15), 0 20px 44px -16px rgba(255, 122, 147, .65); }
.v9-vs { width: 54px; height: 54px; padding: 2px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #7f9cff, #8ff0d0); box-shadow: 0 0 34px rgba(143, 240, 208, .35); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) .35s, opacity .4s .35s; }
.v9-vs span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background: #10214f; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .03em; }
.v9-duel-rows { display: grid; gap: 8px; margin-top: 24px; }
.v9-duel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 13px 8px; border-radius: 18px; background: rgba(255, 255, 255, .05); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d) * 160ms + 650ms); }
.v9-dl { max-width: 92px; color: var(--v9-muted); font-size: .7rem; font-weight: 700; line-height: 1.25; letter-spacing: .07em; text-align: center; text-transform: uppercase; }
.v9-dv { display: grid; justify-items: center; gap: 2px; min-width: 0; text-align: center; }
.v9-dv b { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v9-dv small { color: var(--v9-muted); font-size: .74rem; }
.v9-dv i { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.v9-dv.is-win i { background: rgba(143, 240, 208, .2); color: var(--v9-mint); }
.v9-dv.is-lose b { color: var(--v9-red); }
.v9-dv.is-lose i { background: rgba(255, 122, 147, .18); color: var(--v9-red); }
.v9-duel-more { display: grid; gap: 12px; margin: 16px 0 0; padding: 14px 6px 2px; border-top: 1px solid var(--v9-line); }
.v9-duel-more div { display: grid; gap: 4px; }
.v9-duel-more dt { display: inline-flex; align-items: center; gap: 7px; color: var(--v9-muted); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.v9-duel-more dd { margin: 0; color: #fff; line-height: 1.45; }
.js [data-v9-duel]:not(.is-in) .v9-fighter.is-them { opacity: 0; transform: translateX(-26px); }
.js [data-v9-duel]:not(.is-in) .v9-fighter.is-you { opacity: 0; transform: translateX(26px); }
.js [data-v9-duel]:not(.is-in) .v9-vs { opacity: 0; transform: scale(.3); }
.js [data-v9-duel]:not(.is-in) .v9-duel-row { opacity: 0; transform: translateY(12px); }
@media (min-width: 640px) { .v9-duel { padding: 34px 26px 20px; } .v9-dl { max-width: 140px; font-size: .74rem; } .v9-dv b { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .v9-fighter, .v9-vs, .v9-duel-row { transition: none !important; } }
@media print { [data-v9-duel] .v9-fighter, [data-v9-duel] .v9-vs, [data-v9-duel] .v9-duel-row { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* v9: the step-by-step guide, shown as the document itself (the PDF's navy header, its numbered steps). The sheet rises
   and settles when it comes into view, then its steps appear one by one. */
.v9-guide { position: relative; overflow: hidden; padding: 22px 18px 0; border-radius: 26px; background: radial-gradient(70% 60% at 100% 0%, rgba(143, 240, 208, .14), transparent 70%), var(--v9-panel); }
.v9-guide-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.v9-guide-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #7f9cff, #8ff0d0); color: #071230; }
.v9-guide-k { margin: 0 0 2px; color: var(--v9-mint); font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.v9-guide-head h3 { margin: 0; color: #fff; font-size: 1.12rem; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.v9-guide-sheet { position: relative; margin: 20px 6px 0; padding: 0 0 18px; border-radius: 14px 14px 0 0; background: #fff; color: #18213d; box-shadow: 0 -2px 0 rgba(255, 255, 255, .1), 0 30px 60px -20px rgba(0, 0, 0, .7); transform: rotate(-1.5deg); transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.v9-guide.is-open .v9-guide-sheet { margin-bottom: 18px; border-radius: 14px; }
.v9-gs-top { display: grid; gap: 4px; padding: 16px 18px 15px; border-radius: 14px 14px 0 0; background: #0e1b46; }
.v9-gs-top small { color: #8ff0d0; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.v9-gs-top b { color: #fff; font-size: 1.02rem; line-height: 1.25; letter-spacing: -.01em; }
.v9-gs-steps { display: grid; gap: 11px; margin: 0; padding: 16px 18px 0; list-style: none; }
.v9-gs-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; font-size: .95rem; font-weight: 600; line-height: 1.3; transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d) * 110ms + 450ms); }
.v9-gs-steps i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #3f63f0; color: #fff; font-size: .78rem; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.v9-gs-steps li.is-fade { opacity: .35; -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 95%); mask-image: linear-gradient(180deg, #000 10%, transparent 95%); }
.v9-gs-lock { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 18px 0; padding: 11px 14px; border-radius: 999px; background: #eef2ff; color: #2b3f8f; font-size: .9rem; text-decoration: none; transition: background .2s; }
.v9-gs-lock:hover { background: #e2e8ff; color: #2b3f8f; }
.v9-gs-lock b { color: #18213d; }
.v9-gs-go { display: flex; width: fit-content; margin: 16px 18px 0; }
.js [data-v9-guide]:not(.is-in) .v9-guide-sheet { opacity: 0; transform: translateY(46px) rotate(-5deg); }
.js [data-v9-guide]:not(.is-in) .v9-gs-steps li:not(.is-fade) { opacity: 0; transform: translateX(-10px); }
@media (min-width: 640px) { .v9-guide { padding: 26px 26px 0; } .v9-guide-sheet { margin: 22px 30px 0; } .v9-guide.is-open .v9-guide-sheet { margin-bottom: 26px; } }
@media (prefers-reduced-motion: reduce) { .v9-guide-sheet, .v9-gs-steps li { transition: none !important; } }
@media print { [data-v9-guide] .v9-guide-sheet, [data-v9-guide] .v9-gs-steps li { opacity: 1 !important; transform: none !important; transition: none !important; } .v9-gs-steps li.is-fade { opacity: .35 !important; } }