/*
Theme Name: Creative Score
Theme URI: https://www.creativescore.ai/
Author: Creative Score
Description: Lightweight block theme for creativescore.ai. Built from the approved homepage mockup (30 Oct 2026). No page builder, no framework, one stylesheet. Brand: Inter; #5423E7 purple, #F98500 orange, gradient #A875FF > #FF59C8 > #F98500.
Version: 1.1.3
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: creativescore
*/

/* ===== Mockup styles (ported 1:1 from mockup/styles.css) ===== */
:root {
  --purple: var(--wp--preset--color--purple, #5423E7);
  --purple-700: var(--wp--preset--color--purple-700, #3B2CAF);
  --purple-50: var(--wp--preset--color--purple-50, #F4F0FF);
  --lavender: var(--wp--preset--color--lavender, #C9B6FF);
  --orange: var(--wp--preset--color--orange, #F98500);
  --orange-600: #E07600;
  --ink: var(--wp--preset--color--ink, #14121C);
  --ink-2: var(--wp--preset--color--ink-2, #334155);
  --muted: var(--wp--preset--color--muted, #55606F);
  --dark: var(--wp--preset--color--dark, #0F0D17);
  --dark-2: var(--wp--preset--color--dark-2, #1B1726);
  --line: var(--wp--preset--color--line, #E4E1EC);
  --white: #fff;
  --grad: var(--wp--preset--gradient--brand, linear-gradient(135deg, #A875FF 0%, #FF59C8 50%, #F98500 100%));
  --radius: 14px;
  --wrap: 1180px;
  --pad: clamp(1rem, 4vw, 2rem);
  --space: clamp(3.5rem, 8vw, 6rem);
  --focus: 0 0 0 3px var(--white), 0 0 0 6px var(--purple);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  font-family: var(--wp--preset--font-family--inter, "Inter"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--white);
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--ink); line-height: 1.15; margin: 0 0 .6em; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: var(--purple); text-underline-offset: 3px; }
a:hover { color: var(--purple-700); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 760px; }
.center { text-align: center; }

/* Skip link */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--white); color: var(--ink); padding: .75rem 1rem; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Placeholders: clearly marked, never mistaken for real copy */
.ph {
  display: inline-block; background: #FFF4D6; color: #5A3D00; border: 1.5px dashed #C98A00;
  border-radius: 6px; padding: .15em .5em; font-size: .92em; font-weight: 500; line-height: 1.45;
}
.ph--inline { display: inline; padding: .05em .35em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ph--block { display: block; padding: 1.5rem; font-size: 1.125rem; font-weight: 600; margin: 0 auto 1rem; max-width: 520px; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 0; border-radius: 10px; padding: .85rem 1.35rem; min-height: 48px; white-space: nowrap;
}
.btn--primary { background: var(--orange); color: var(--ink); }
.btn--primary:hover { background: #FF9A26; color: var(--ink); }
.btn--sm { padding: .55rem 1rem; min-height: 42px; font-size: .9375rem; }
.btn--lg { padding: 1rem 1.75rem; font-size: 1.125rem; }

/* Header */
.site-header { background: var(--dark); color: var(--white); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; flex-wrap: wrap; }
.logo { display: inline-flex; padding: .25rem; }
.logo img { display: block; width: 125px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.site-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav ul a { color: #E8E4F3; text-decoration: none; font-size: .9375rem; font-weight: 500; padding: .35rem .1rem; }
.site-nav ul a:hover { color: var(--white); text-decoration: underline; }
.nav-toggle {
  display: none; align-items: center; gap: .5rem; background: transparent; color: var(--white);
  border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: .5rem .8rem; font: inherit; font-weight: 600; min-height: 44px; cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: "";
}
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }

@media (max-width: 900px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; width: 100%; padding: .5rem 0 1rem; flex-direction: column; align-items: stretch; gap: 1rem; }
  .js .site-nav.is-open { display: flex; }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav ul a { display: block; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* Hero */
.hero {
  background:
    radial-gradient(60% 70% at 85% 20%, rgba(84,35,231,.45), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(249,133,0,.18), transparent 70%),
    var(--dark);
  color: #D9D4E6;
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lavender); margin-bottom: 1rem; }
.eyebrow--dark { color: var(--purple); }
.hero h1 { color: var(--white); font-size: clamp(2.125rem, 4.6vw, 3.5rem); font-weight: 800; }
.grad-text { white-space: nowrap; }
@media (max-width: 380px) { .grad-text { white-space: normal; } }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); max-width: 36em; color: #D9D4E6; }

.signup { margin: 1.75rem 0 1rem; max-width: 520px; }
.signup label { display: block; font-weight: 600; color: var(--white); margin-bottom: .4rem; font-size: .9375rem; }
.signup__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.signup input {
  flex: 1 1 220px; min-width: 0; min-height: 48px; font: inherit; color: var(--ink);
  background: var(--white); border: 2px solid transparent; border-radius: 10px; padding: .7rem .9rem;
}
.signup input::placeholder { color: #6B6680; }
.signup input:focus-visible { border-color: var(--purple); box-shadow: 0 0 0 3px var(--lavender); }
.signup .btn { flex: 0 0 auto; }
.signup__note { margin: .6rem 0 0; font-size: .875rem; }
.hero-secondary { font-size: .9375rem; margin-bottom: 1.5rem; }
.hero a:not(.btn) { color: var(--lavender); }
.hero a:not(.btn):hover { color: var(--white); }
.proof { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; margin: 0; }
.proof__stars { color: #FEC42D; font-size: 1.1rem; }

/* Report illustration */
.report {
  margin: 0; background: var(--dark-2); border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  padding: 1.25rem; color: #E8E4F3; box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.report__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.report__title { font-weight: 700; color: var(--white); }
.chip { font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: rgba(255,255,255,.1); color: #E8E4F3; }
.report__body { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; }
.dial { position: relative; width: 120px; height: 120px; }
.dial svg { display: block; }
.dial__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; }
.dial__num { font-size: 2.25rem; font-weight: 800; color: var(--white); line-height: 1; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.bars li { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: .6rem; font-size: .8125rem; }
.bars i { display: block; height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--grad); border-radius: inherit; }
.report__fixes { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.report__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--lavender); margin-bottom: .5rem; }
.report__fixes ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .35rem; font-size: .9375rem; }
.report__cap { margin-top: 1rem; font-size: .75rem; color: #BDB6CF; }

/* Sections */
.section { padding: var(--space) 0; }
.section--tint { background: var(--purple-50); }
.section--dark { background: var(--dark); color: #D9D4E6; }
.section--dark h2 { color: var(--white); }
.section--dark .limits { border-left: 3px solid var(--orange); padding-left: 1rem; color: #E8E4F3; }
.section-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; }
.section-sub { max-width: 40em; margin-bottom: 2rem; }
.slot { margin: 2rem 0 0; font-size: .9375rem; color: var(--muted); }

.cards { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.card h3 { font-size: 1.125rem; }
.card p { margin: 0; font-size: .975rem; }
.card--use { border-top: 4px solid var(--purple); }
.icon {
  width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--purple-50);
  fill: none; stroke: var(--purple); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem;
}

.steps { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.step { counter-increment: step; background: var(--white); border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--line); }
.step::before {
  content: counter(step); display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--purple); color: var(--white); font-weight: 800; margin-bottom: 1rem;
}
.step h3 { font-size: 1.125rem; }
.step p { margin: 0; font-size: .975rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Contact: demo booking (link to Calendly, no third-party script) */
.booking { margin-top: 1.5rem; }
.booking__note { margin: .6rem 0 0; font-size: .875rem; color: var(--muted); }
/* About: founder card (initials avatar, no photo) */
.founder { display: flex; gap: 1.25rem; align-items: flex-start; margin: 1.5rem 0; padding: 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.founder__avatar { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--purple); color: var(--white); font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; }
.founder__name { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--dark); }
.founder__role { margin: .15rem 0 .75rem; font-size: .9375rem; font-weight: 600; color: var(--purple); }
.founder__body > p:last-child { margin-bottom: 0; }
.address { color: var(--muted); font-size: .9375rem; }
@media (max-width: 520px) { .founder { flex-direction: column; gap: 1rem; padding: 1.25rem; } }
/* Mirrored split (Home, For brands): visual left, text right on desktop; DOM order (text first) on mobile */
.split--mirror > :first-child { order: 2; }
.split--mirror > :last-child { order: 1; }
@media (max-width: 1000px) { .split--mirror > :first-child, .split--mirror > :last-child { order: 0; } }

.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.quotes--3 { grid-template-columns: repeat(3, 1fr); }
.quote { display: flex; flex-direction: column; }
.quote__rating { color: #B36200; letter-spacing: .1em; margin: 0 0 .75rem; font-size: 1rem; }
.quote__name { font-weight: 700; color: var(--ink); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.quote { margin: 0; background: var(--white); border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--line); }
.quote blockquote { margin: 0 0 1rem; font-size: 1.0625rem; }
.quote figcaption { font-size: .875rem; margin-top: auto; color: var(--muted); }
.quote blockquote p { margin: 0; color: var(--ink); font-feature-settings: "calt" 0, "liga" 0; font-variant-ligatures: none; }

.cta-band { background: var(--grad); padding: var(--space) 0; }
.cta-band h2 { color: var(--ink); font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 800; }
.cta-band p { color: var(--ink); max-width: 34em; margin: 0 auto 1.75rem; font-weight: 500; }
.cta-band .btn--primary { background: var(--ink); color: var(--white); }
.cta-band .btn--primary:hover { background: #000; color: var(--white); }
.cta-band .btn:focus-visible { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--ink); }

/* Footer */
.site-footer { background: var(--dark); color: #C9C3D8; padding: 3rem 0; font-size: .9375rem; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; align-items: start; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.5rem; }
.site-footer a { color: #E8E4F3; }
.footer-tag { margin: .75rem 0 0; }
.footer-meta { margin: 0; }

/* Responsive */
@media (max-width: 1000px) {
  .quotes--3 { grid-template-columns: 1fr; max-width: 640px; }
  .hero-grid, .split { grid-template-columns: 1fr; }
  .report { max-width: 560px; }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .cards--3, .steps, .quotes { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cards--4 { grid-template-columns: 1fr; gap: .85rem; }
  .cards--4 .card { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; padding: 1.15rem; }
  .cards--4 .icon { grid-row: span 2; margin: 0; }
  .cards--4 .card h3 { margin-bottom: .3em; }
  .signup .btn { flex: 1 1 100%; }
  .report__body { grid-template-columns: 1fr; justify-items: center; }
  .bars { width: 100%; }
  .bars li { grid-template-columns: 6.5rem 1fr; }
}


/* ===== WordPress block mapping =====
   Block markup reuses the mockup class names (section, wrap, card, ...).
   The rules below only bridge core block markup to those styles. */
.wp-site-blocks { padding: 0; }
.site-main, .page-content { margin: 0; }
.wp-block-group { box-sizing: border-box; }
.skip-link.screen-reader-text:focus { background: var(--white); color: var(--ink); font-weight: 600; border-radius: 8px; box-shadow: var(--focus); }

/* Buttons: core/button gets the .btn look; styles: default (orange), ghost, dark, text-link */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 0; }
.wp-block-button { margin: 0; }
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.6;
  border: 0; border-radius: 10px; padding: .85rem 1.35rem; min-height: 48px; white-space: nowrap;
  background: var(--orange); color: var(--ink); font-size: 1.0625rem;
}
.wp-block-button__link:hover { background: #FF9A26; color: var(--ink); }
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover { box-shadow: inset 0 0 0 2px var(--white); color: var(--white); }
.wp-block-button.is-style-ghost .wp-block-button__link:focus-visible { box-shadow: var(--focus); }
.wp-block-button.is-style-dark .wp-block-button__link { background: var(--ink); color: var(--white); }
.wp-block-button.is-style-dark .wp-block-button__link:hover { background: #000; color: var(--white); }
.section .wp-block-button.is-style-ghost .wp-block-button__link { color: var(--purple); box-shadow: inset 0 0 0 2px var(--purple); }
.section--dark .wp-block-button.is-style-ghost .wp-block-button__link { color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.wp-block-button.is-style-text-link .wp-block-button__link { background: none; color: var(--purple); padding: 0; min-height: 0; text-decoration: underline; font-weight: 500; }
.cta-band .wp-block-button__link { background: var(--ink); color: var(--white); font-size: 1.125rem; padding: 1rem 1.75rem; }
.cta-band .wp-block-button__link:hover { background: #000; color: var(--white); }
.cta-band .wp-block-button__link:focus-visible { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--ink); }
.center .wp-block-buttons, .cta-band .wp-block-buttons { justify-content: center; }
.hero .wp-block-buttons { margin-top: 1.75rem; }
.button-row { margin-top: 2rem; }

/* Header: logo image block + Navigation block */
.site-header .header-inner { flex-wrap: nowrap; }
.site-header .logo { margin: 0; padding: .25rem; }
.site-header .logo a { display: inline-flex; border-radius: 6px; }
.site-header .logo img { display: block; width: 125px; height: auto; aspect-ratio: 125 / 40; }
.site-header .wp-block-navigation { font-size: .9375rem; font-weight: 500; color: #E8E4F3; }
.site-header .wp-block-navigation .wp-block-navigation__container { gap: 1.25rem; align-items: center; }
.site-header .wp-block-navigation-item__content { color: #E8E4F3; text-decoration: none; padding: .35rem .1rem; }
.site-header .wp-block-navigation-item__content:hover { color: var(--white); text-decoration: underline; }
.site-header .nav-cta { margin-left: .25rem; }
.site-header .nav-cta .wp-block-navigation-item__content {
  background: var(--orange); color: var(--ink); font-weight: 700; border-radius: 10px;
  padding: .55rem 1rem; min-height: 42px; display: inline-flex; align-items: center; white-space: nowrap;
}
.site-header .nav-cta .wp-block-navigation-item__content:hover { background: #FF9A26; color: var(--ink); text-decoration: none; }
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
  align-items: center; gap: .5rem; background: transparent; color: var(--white);
  border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: .5rem .8rem; font: inherit; font-weight: 600; min-height: 44px; cursor: pointer;
}
.site-header .wp-block-navigation__responsive-container-close { position: static; margin-left: auto; display: inline-flex; }
/* Collapse at 900px like the mockup (core collapses at 600px). */
@media (min-width: 600px) and (max-width: 900px) {
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
  .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--dark); color: var(--white); padding: 1rem var(--pad) 2rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 1.5rem; align-items: stretch; }
.site-header .is-menu-open .wp-block-navigation__container { gap: 0; align-items: stretch; width: 100%; }
.site-header .is-menu-open .wp-block-navigation-item { width: 100%; }
.site-header .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 1.0625rem; }
.site-header .is-menu-open .nav-cta { margin: 1.25rem 0 0; }
.site-header .is-menu-open .nav-cta .wp-block-navigation-item__content { justify-content: center; border: 0; padding: .85rem 1rem; }
.site-header .wp-block-navigation__responsive-dialog { width: 100%; }
.site-header .wp-block-navigation__responsive-close { max-width: var(--wrap); margin: 0 auto; }

/* Hero (core blocks) */
.hero h1 { margin-bottom: .6em; }
.hero .wp-block-group.hero-copy > * + * { margin-top: 0; }
.proof::before { content: "★" / ""; color: #FEC42D; font-size: 1.1rem; }
.hero--page { padding: clamp(3rem, 7vw, 5rem) 0; }
.hero--page .hero-copy { max-width: 820px; }
.hero--page h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); }

/* Cards as Group blocks; icons are CSS masks so editors only pick a class */
.cards { margin: 2rem 0 0; }
.cards > .card { margin: 0; }
.cards--auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card > :last-child { margin-bottom: 0; }
.card .card-title { font-size: 1.125rem; margin: 0 0 .6em; font-weight: 700; }
.card[class*="icon-"]::before {
  content: ""; display: block; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 1rem;
  background: var(--purple-50) no-repeat center / 24px 24px; background-image: var(--icon);
}
.icon-clock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.icon-lines { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3C/svg%3E"); }
.icon-tick { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E"); }
.icon-eye { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.icon-heading { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v16M18 4v16M6 12h12'/%3E%3C/svg%3E"); }
.icon-heart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z'/%3E%3C/svg%3E"); }
.icon-globe { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E"); }

/* Steps as Group blocks */
.steps > .step { margin: 0; }

/* Lists and text sections */
.prose { max-width: 760px; }
.prose > * + .wp-block-heading { margin-top: 2.25rem; }
.check-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; }
.check-list li { position: relative; padding-left: 2rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--purple-50) no-repeat center / 14px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E"); }
.section--dark .ph { color: #5A3D00; }

/* Pricing placeholder plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 2rem; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.plan > * { margin: 0; }
.plan .plan-name { font-size: 1.125rem; }
.plan .plan-for { font-weight: 600; color: var(--ink); }
.plan .wp-block-buttons { margin-top: auto; padding-top: .5rem; }
.plan .wp-block-button, .plan .wp-block-button__link { width: 100%; }

/* FAQ accordion (core/details) */
.faq { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.faq .wp-block-details { border-bottom: 1px solid var(--line); padding: 0; margin: 0; }
.faq .wp-block-details summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; font-weight: 700; color: var(--ink); position: relative; font-size: 1.0625rem;
}
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: .6rem; height: .6rem; margin-top: -.45rem;
  border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple); transform: rotate(45deg); transition: transform .15s;
}
.faq .wp-block-details[open] summary::after { transform: rotate(-135deg); margin-top: -.1rem; }
.faq .wp-block-details summary:focus-visible { border-radius: 6px; }
.faq .wp-block-details > :not(summary) { margin: 0 0 1.1rem; max-width: 46em; }
.faq-group + .faq-group { margin-top: 3rem; }
.faq-group .wp-block-heading { font-size: 1.375rem; margin-bottom: .25rem; }

/* Placeholders that stand in for a whole component */
.ph-component { margin: 2rem 0 0; }
.ph-component.ph--block { max-width: none; text-align: left; font-size: 1rem; font-weight: 500; }
.quote--placeholder { max-width: 760px; }

/* Footer: core/navigation without overlay */
.site-footer .logo { margin: 0; }
.site-footer .logo a { display: inline-flex; padding: .25rem; border-radius: 6px; }
.site-footer .logo img { display: block; width: 125px; height: auto; aspect-ratio: 125 / 40; }
.site-footer .wp-block-navigation .wp-block-navigation__container { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.5rem; }
.site-footer .wp-block-navigation-item__content { color: #E8E4F3; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .wp-block-navigation-item__content:hover { color: var(--white); }

/* 404 */
.not-found { padding: var(--space) 0; }

@media (max-width: 720px) {
  .cards--2 { grid-template-columns: 1fr; }
}

/* Mobile: icon cards keep the icon left of the text (mockup <=520px layout) */
@media (max-width: 520px) {
  .cards--4 .card[class*="icon-"]::before { grid-row: span 2; margin: 0; }
}
/* Menu button: three bars before the "Menu" label, as in the mockup */
.site-header .wp-block-navigation__responsive-container-open::before {
  content: ""; display: block; width: 18px; height: 2px; background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; margin: 0 .15rem;
}
/* Hero link colour must not leak into buttons */
.hero a.wp-block-button__link, .hero a.wp-block-button__link:hover { color: var(--ink); }
.hero .is-style-ghost a.wp-block-button__link, .hero .is-style-ghost a.wp-block-button__link:hover { color: var(--white); }

/* ---------- Pricing v2: three cards, one recommended, compare table in a disclosure ---------- */
.pricing-intro { text-align: center; max-width: 40em; margin: .75rem auto 0; }
.plans--v2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; margin-top: 2.5rem; }
.plans--v2 .plan { padding: 1.75rem; gap: .9rem; position: relative; }
.plans--v2 .plan-name { font-size: 1.375rem; }
.plans--v2 .plan-for { font-weight: 500; color: var(--ink-2); min-height: 3em; }
.plans--v2 .plan-price { font-size: 2.25rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); border-top: 1px solid var(--line); padding-top: .9rem; }
.plans--v2 .plan-price .per { color: var(--muted); font-size: .9375rem; font-weight: 400; letter-spacing: 0; }
.plans--v2 .plan-annual { margin-top: -.35rem; color: var(--muted); font-size: .9375rem; }
.plans--v2 .plan .check-list { margin: 0; }
.plans--v2 .plan .check-list li { font-size: .9375rem; }
.plans--v2 .plan--featured { border: 2px solid var(--purple); box-shadow: 0 20px 50px rgba(84,35,231,.14); padding-top: 2.25rem; }
.plans--v2 .plan-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--purple); color: var(--white); font-size: .8125rem; font-weight: 700;
  letter-spacing: .02em; padding: .3rem .85rem; border-radius: 999px; white-space: nowrap;
}
.plan-more { max-width: 760px; margin: 1.75rem auto 0; text-align: center; color: var(--ink-2); font-size: 1rem; }
.plan-more a { font-weight: 600; }
.compare { max-width: 980px; margin: 2rem auto 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.compare > summary {
  cursor: pointer; list-style: none; padding: 1rem 1.25rem; font-weight: 700; color: var(--purple-700);
  display: flex; justify-content: center; align-items: center; gap: .6rem; border-radius: var(--radius);
}
.compare > summary::-webkit-details-marker { display: none; }
.compare > summary::after {
  content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -.25rem; transition: transform .15s;
}
.compare[open] > summary::after { transform: rotate(-135deg); margin-top: .2rem; }
.compare > summary:focus-visible { outline: none; box-shadow: var(--focus); }
.compare > :not(summary) { margin: 0; padding: 0 1.25rem 1.25rem; }
.compare-scroll { overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 560px; }
.compare caption { text-align: left; color: var(--muted); font-size: .875rem; padding: 0 0 .75rem; }
.compare th, .compare td { padding: .65rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-size: 1rem; color: var(--ink); }
.compare thead th.is-featured { color: var(--purple-700); }
.compare tbody th { font-weight: 600; color: var(--ink); }
.compare .yes::before { content: "✓ "; color: var(--purple); font-weight: 700; }
@media (max-width: 900px) {
  .plans--v2 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; gap: 1.75rem; }
  .plans--v2 .plan--featured { order: -1; }
  .plans--v2 .plan-for { min-height: 0; }
}

/* Hero v2 (1 Nov 2026): bigger primary CTA, agency-demo outline button, ad + score card, logo slot */
.signup .btn--hero { background: #F98500; color: var(--ink); font-size: 1.0625rem; padding: 1rem 1.6rem; min-height: 54px; box-shadow: 0 8px 24px rgba(249,133,0,.28); }
.signup .btn--hero:hover { background: #FF9A26; color: var(--ink); }
.signup .btn--hero:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dark), 0 0 0 6px #FFFFFF; }
.signup .signup__row input { min-height: 54px; }
.report--ad .report__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.25rem; align-items: start; }
.report__ad { display: block; margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.report__ad img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.report__side { display: grid; gap: 1rem; justify-items: start; }
.report--ad .report__fixes { margin-top: 0; padding-top: 0; border-top: 0; }
.report--ad .report__fixes ol { font-size: .875rem; color: #E8E4F3; }
.chip--example { background: #FFE7C7; color: #5A2E00; font-weight: 700; }
.logo-slot { margin: clamp(2rem, 4vw, 3rem) 0 0; text-align: center; }
.logo-slot .ph { display: inline-block; }
@media (max-width: 520px) {
  .report--ad .report__body { grid-template-columns: 1fr; justify-items: stretch; }
  .report__ad { max-width: 280px; margin: 0 auto; width: 100%; }
  .report__side { grid-template-columns: auto 1fr; align-items: center; justify-items: stretch; }
  .report__side .dial { width: 96px; height: 96px; }
  .report__side .dial svg { width: 96px; height: 96px; }
  .report__side .dial__num { font-size: 1.875rem; }
}
@media (max-width: 380px) {
  .report__side { grid-template-columns: 1fr; justify-items: center; }
}

/* Fix (1 Nov 2026): core's ":not(.has-background) ... .is-menu-open" rule out-ranked the dark overlay, giving a white panel and an invisible white Close button. */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--dark); color: var(--white); }

/* ===== Visual pages (1 Nov 2026): Use cases and How it works =====
   Ad report cards (.adr), heatmap overlay (.heat), A/B compare (.ab), real scores in colour (.pl),
   step visuals (.sv). Every visual is labelled "Illustrative example"; values are illustrative UI. */

/* Gradient key phrase in page H1s: allow wrapping on narrow screens, gradient restarts per line */
.hero--page .grad-text { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 720px) { .hero--page .grad-text { white-space: normal; } }

/* Use-case rows: copy one side, visual the other; alternates on desktop, stacks on mobile */
.uc-row { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.uc-row.split--mirror { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.uc-copy { max-width: 34rem; }
.uc-copy .section-title { margin-bottom: .9rem; }
.uc-copy .uc-label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--purple); margin: 1.4rem 0 .35rem; }
.uc-copy p { margin: 0; }
.uc-copy .check-list { margin-top: .5rem; gap: .5rem; }
.uc { scroll-margin-top: 80px; }
.uc-jumpbar { background: var(--white); border-bottom: 1px solid var(--line); padding: 1rem 0; }
.uc-jump { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.uc-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .9rem; border-radius: 999px; border: 1px solid #D9CEFB; background: var(--purple-50); color: var(--purple-700); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.uc-jump a:hover { background: #E9E1FF; color: var(--ink); }

/* Ad report card */
.adr { width: 100%; max-width: 640px; }
.adr__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: start; }
.adr--tall .adr__body { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.adr--wide .adr__body { grid-template-columns: 1fr; }
.adr--wide .adr__side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.25rem; }
.adr--wide .adr__scoreline { grid-column: 1; }
.adr--wide .adr__bars { grid-column: 1; }
.adr--wide .adr__fixes { grid-column: 2; grid-row: 1 / span 2; }
.adr__media { position: relative; margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.adr__img, .adr__img img { display: block; width: 100%; height: auto; }
.adr__tag { position: absolute; left: .5rem; top: .5rem; z-index: 2; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; padding: .2rem .55rem; border-radius: 999px; background: rgba(15,13,23,.82); color: var(--white); }
.adr__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(15,13,23,.7); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }
.adr__play::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 16px solid var(--white); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.adr__side { display: grid; gap: 1rem; min-width: 0; }
.adr__scoreline { display: flex; align-items: center; gap: 1rem; }
.adr__scoreline .report__label { margin: 0 0 .35rem; }
.dial--sm .dial__num { font-size: 1.75rem; }
.adr__status { display: inline-block; margin: 0; font-size: .8125rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; }
.adr__status--pass { background: #DDF5E6; color: #0B5A2A; }
.adr__status--fail { background: #FFE6D1; color: #8A3B00; }
.adr__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.adr__bars li { display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr 1.75rem; align-items: center; gap: .6rem; font-size: .8125rem; color: #E8E4F3; }
.adr__bars b { font-weight: 700; text-align: right; color: var(--white); }
.adr__track { display: block; height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.adr__track i { position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--grad); border-radius: inherit; }
.adr__fixes ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .875rem; color: #E8E4F3; }
.adr .report__label { color: var(--lavender); }

/* Heatmap overlay: blurred radial spots (red = likely seen first, fading to green/clear = likely missed) */
.heat { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; }
.heat span {
  position: absolute; left: var(--x); top: var(--y); width: var(--r); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; opacity: var(--o, .8);
  background: radial-gradient(circle, rgba(230,20,20,.95) 0%, rgba(255,140,0,.85) 28%, rgba(255,230,0,.7) 46%, rgba(60,200,90,.45) 62%, rgba(60,200,90,0) 72%);
}
.heat-key { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font-size: .75rem; color: #D9D4E6; }
.heat-key i { flex: 1 1 auto; max-width: 160px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #E61414, #FF8C00, #FFE600, #3CC85A, rgba(60,200,90,.15)); }

/* A/B compare */
.ab__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.ab__label { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 700; color: var(--white); }
.ab__score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; margin-top: .85rem; }
.ab__score .dial__num { font-size: 1.375rem; }
.ab .adr__bars li { grid-template-columns: 1fr 1.6rem; grid-template-areas: "a b" "t t"; gap: .15rem .4rem; }
.ab .adr__bars .adr__attr { grid-area: a; }
.ab .adr__bars b { grid-area: b; }
.ab .adr__bars .adr__track { grid-area: t; }

.ws__pic img { display: block; width: 48px; height: 48px; object-fit: cover; }

/* How it works: step visuals inside the step cards */
.steps--visual .step { display: flex; flex-direction: column; }
.sv { margin: 0 0 1.25rem; border-radius: 12px; background: var(--dark-2); color: #E8E4F3; padding: 1rem; min-height: 190px; position: relative; font-size: .8125rem; }
.sv .chip--example { position: absolute; right: .6rem; top: .6rem; font-size: .6875rem; }
.sv__drop { margin-top: 1.6rem; border: 2px dashed rgba(201,182,255,.55); border-radius: 10px; padding: .9rem; display: grid; grid-template-columns: 44px 1fr; gap: .75rem; align-items: center; }
.sv__drop .ws__pic img { width: 44px; height: 60px; border-radius: 6px; object-fit: cover; }
.sv__drop p { margin: 0; }
.sv__drop b { display: block; color: var(--white); font-size: .875rem; }
.sv__types { margin: .75rem 0 0; color: #D9D4E6; }
.sv__opts { list-style: none; margin: 1.6rem 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sv__opts li { padding: .3rem .7rem; border-radius: 999px; background: rgba(255,255,255,.08); color: #E8E4F3; }
.sv__opts li.is-on { background: var(--lavender); color: var(--ink); font-weight: 700; }
.sv__prog { height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.sv__prog i { display: block; height: 100%; width: 62%; background: var(--grad); border-radius: inherit; }
.sv__note { margin: .6rem 0 0; color: #D9D4E6; }
.sv__mini { margin-top: 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; }
.sv__mini ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.sv__re { display: inline-block; margin-top: .75rem; padding: .2rem .6rem; border-radius: 999px; background: #DDF5E6; color: #0B5A2A; font-weight: 700; }

/* How it works: report visual beside the report cards */
.report-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: 2rem; }
.report-split .cards { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-split .adr { position: sticky; top: 90px; }
.heatmaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.heatmaps figure { margin: 0; }
.heatmaps .adr__media { border-radius: 8px; box-shadow: none; }
.heatmaps figcaption { margin-top: .3rem; font-size: .75rem; color: #D9D4E6; }

/* CTA band: outline button on the gradient */
.cta-band .wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.cta-band .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: rgba(20,18,28,.08); color: var(--ink); }
.cta-band .wp-block-button.is-style-ghost .wp-block-button__link:focus-visible { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 3px var(--white), 0 0 0 6px var(--ink); }

@media (max-width: 1000px) {
  .uc-row, .uc-row.split--mirror { grid-template-columns: 1fr; }
  .uc-copy { max-width: 40rem; }
  .adr { max-width: 640px; }
  .report-split { grid-template-columns: 1fr; }
  .report-split .adr { position: static; }
}
@media (max-width: 720px) {
  .report-split .cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .adr__body, .adr--tall .adr__body { grid-template-columns: 1fr; }
  .adr--tall .adr__media { max-width: 240px; width: 100%; margin: 0 auto; }
  .adr--square .adr__media { max-width: 320px; width: 100%; margin: 0 auto; }
  .adr--wide .adr__side { grid-template-columns: 1fr; }
  .adr--wide .adr__fixes { grid-column: 1; grid-row: auto; }
  .adr__bars li { grid-template-columns: 6.25rem 1fr 1.6rem; }
  .ab__grid { gap: .6rem; }
  .ab__score { grid-template-columns: 1fr; justify-items: center; }
  .report { padding: 1rem; }
  .heatmaps { gap: .35rem; }
}
@media (max-width: 380px) {
}
.heat--miss { mix-blend-mode: normal; }
.heat--miss span { background: radial-gradient(circle, rgba(60,90,255,.75) 0%, rgba(60,90,255,.45) 40%, rgba(60,90,255,0) 70%); }
/* Review fixes: heatmap readable on dark ads too; tag clear of headlines; workspace bars */
.heat { mix-blend-mode: normal; opacity: .62; }
.heat--miss { opacity: .7; }
.adr__tag { top: auto; left: auto; right: .5rem; bottom: .5rem; }
.adr__mediawrap { min-width: 0; }
.adr .adr__tag { position: static; display: inline-block; margin: 0 0 .5rem; background: rgba(255,255,255,.1); color: #E8E4F3; }
@media (max-width: 560px) {
  .adr--tall .adr__mediawrap, .adr--square .adr__mediawrap { max-width: 320px; width: 100%; margin: 0 auto; }
  .adr--tall .adr__mediawrap { max-width: 240px; }
}

/* Home e-commerce cards: illustrative visual at the top of each card (even heights) */
.cards--visual { align-items: stretch; }
.cards--visual > .card { display: flex; flex-direction: column; }
.hv { margin: 0 0 1.25rem; }
.hv__frame { border-radius: 12px; overflow: hidden; background: #F4F2F8; border: 1px solid var(--line); }
.hv__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.hv__img, .hv__img img { display: block; width: 100%; height: 100%; }
.hv__img img { object-fit: cover; object-position: center top; }
.hv--listing .hv__img img { object-position: center; }
.hv__badge { position: absolute; z-index: 2; right: .6rem; bottom: .6rem; display: inline-flex; align-items: baseline; gap: .1rem; padding: .3rem .6rem; border-radius: 10px; background: var(--dark); color: #E8E4F3; font-size: .75rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.hv__badge b { font-size: 1.125rem; color: var(--white); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hv__feedhead { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; background: var(--white); font-size: .8125rem; color: var(--ink); }
.hv__feedhead small { display: block; font-size: .6875rem; color: var(--muted); }
.hv__avatar { width: 28px; height: 28px; border-radius: 50%; background: #1F4D3A; color: #FFC46B; display: grid; place-items: center; font-weight: 800; font-size: .8125rem; }
.hv__feedfoot { display: flex; gap: .4rem; padding: .55rem .7rem; background: var(--white); }
.hv__feedfoot i { display: block; height: 8px; width: 22%; border-radius: 99px; background: #E3DFEC; }
.hv__tile { display: grid; gap: .35rem; padding: .6rem .7rem; background: var(--white); font-size: .8125rem; color: var(--ink); }
.hv__tile i { display: block; height: 8px; width: 40%; border-radius: 99px; background: #E3DFEC; }
.hv__bar { display: flex; gap: .3rem; padding: .5rem .7rem; background: #E9E5F1; }
.hv__bar i { width: 8px; height: 8px; border-radius: 50%; background: #C9C2DA; }
.hv figcaption { margin-top: .5rem; }
.hv__chip { font-size: .6875rem; }
/* Even heights: every frame is the same height; the creative fills what is left */
.hv__frame { height: 270px; display: flex; flex-direction: column; }
.hv__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }

/* Area-of-interest boxes on the creative */
.aoi { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px dashed rgba(255,255,255,.95); border-radius: 6px; box-shadow: 0 0 0 1px rgba(15,13,23,.5); }
.aoi span { position: absolute; left: 2px; top: 2px; padding: .05rem .4rem; border-radius: 4px; background: rgba(15,13,23,.85); color: var(--white); font-size: .6875rem; font-weight: 700; white-space: nowrap; }

.hv--email .hv__badge { top: .6rem; bottom: auto; }
.aoi span.down { top: calc(100% + 3px); left: -2px; }
.aoi span.up { top: auto; bottom: calc(100% + 3px); left: -2px; }

/* Real Creative Score reports (our own ads, analysed 1 Nov 2026) */
.chip--real { background: #DDF5E6; color: #0B5A2A; font-weight: 700; }
.sv .chip--real { position: absolute; right: .6rem; top: .6rem; font-size: .6875rem; }
.adr__rating, .report__rating { margin: .2rem 0 0; font-size: .875rem; font-weight: 700; color: #D7F26B; }
.adr__barlabel { margin: 0 0 -.4rem; }
.report__admedia .adr__tag { position: static; display: inline-block; margin: 0 0 .5rem; background: rgba(255,255,255,.1); color: #E8E4F3; }
.report--real .report__ad img { aspect-ratio: 1 / 1; }
.report--real .report__side { gap: .6rem; }
.report--real .report__rating { margin-top: -.4rem; }
.report--real .report__fixes ol { font-size: .8125rem; }
.adr--video .adr__media { margin-top: .25rem; }
.hv__avatar--cs { background: #5423E7; color: #fff; font-size: .6875rem; }
.sv--shot { min-height: 0; padding: 2.6rem .6rem .6rem; }
.sv__shot, .sv__shot img { display: block; width: 100%; height: auto; border-radius: 8px; }
.heatmaps__note { margin: .5rem 0 0; font-size: .75rem; color: #D9D4E6; }
.real-shots { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 2.5rem; align-items: start; }
.shot { margin: 0; border-radius: 14px; background: var(--dark); padding: .6rem; box-shadow: 0 10px 30px rgba(15,13,23,.18); }
.shot__img, .shot__img img { display: block; width: 100%; height: auto; border-radius: 8px; }
.shot figcaption { margin: .6rem .25rem .2rem; font-size: .8125rem; color: #E8E4F3; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
@media (max-width: 900px) { .real-shots { grid-template-columns: 1fr; } }
.report--real .report__rating { justify-self: start; text-align: left; }

/* Real report clips composed as layered tiles (Garry, 1 Nov 2026: clip the heatmap, score and chart; no full screenshots) */
.icon-compare { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='7' height='16' rx='1.5'/%3E%3Crect x='14' y='4' width='7' height='16' rx='1.5'/%3E%3C/svg%3E"); }
.icon-refresh { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-4.9L4 8'/%3E%3Cpath d='M4 3v5h5'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.3 4.9L20 16'/%3E%3Cpath d='M20 21v-5h-5'/%3E%3C/svg%3E"); }
.icon-gauge { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17a8 8 0 1 1 16 0'/%3E%3Cpath d='M12 17l4-5'/%3E%3C/svg%3E"); }
.icon-tag { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E"); }
.icon-users { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18.5 14a6.5 6.5 0 0 1 3 6'/%3E%3C/svg%3E"); }
.icon-download { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235423E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E"); }
.rc__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.rc__img, .rc__img img { display: block; width: 100%; height: auto; }
.rc__ad { grid-column: 1 / 9; grid-row: 1 / 3; position: relative; z-index: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.rc__ad .adr__tag { position: absolute; left: .5rem; top: .5rem; right: auto; bottom: auto; margin: 0; background: rgba(15,13,23,.85); color: var(--white); }
.rc__tile { position: relative; border-radius: 12px; overflow: hidden; background: #393937; box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.14); }
.rc__gauge { grid-column: 7 / 13; grid-row: 1; z-index: 3; margin-top: 1.25rem; }
.rc__bars { grid-column: 6 / 13; grid-row: 2; z-index: 4; align-self: end; margin-bottom: -.25rem; }
.rc__barlist { display: none; }
.rc--radar .rc__ad { grid-column: 1 / 8; grid-row: 1 / 3; }
.rc--radar .rc__gauge { grid-column: 7 / 13; grid-row: 1; margin-top: .5rem; }
.rc--radar .rc__radar { grid-column: 8 / 13; grid-row: 2; z-index: 2; }
.rc--radar .rc__bars { grid-column: 3 / 13; grid-row: 3; margin-top: -2.5rem; align-self: start; }
.rc--tall .rc__ad { grid-column: 1 / 7; }
.rc--tall .rc__gauge, .rc--tall .rc__bars { grid-column: 6 / 13; }
.rc .report__fixes ol { font-size: .875rem; color: #E8E4F3; }
.rc .report__fixes { margin-top: 1.25rem; }
/* A/B with clips */
.ab__item { position: relative; min-width: 0; }
.ab__item .rc__ad { border-radius: 10px; }
.ab__gauge { width: 72%; margin: -2.25rem 0 0 auto; position: relative; z-index: 3; }
.ab__eye { margin: .6rem 0 0; font-size: .75rem; color: #D9D4E6; }
/* Real scores in the app's default colours (light card) */
.pl { margin: 0; width: 100%; max-width: 600px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 1.25rem; box-shadow: 0 20px 50px rgba(84,35,231,.10); color: var(--ink); }
.pl__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.pl__title { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--dark); }
.pl__rows { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.pl__row { --c: #CEE949; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "p n s" "p t t"; gap: .4rem .75rem; align-items: center; padding: .6rem; border-radius: 12px; background: #F8F7FB; }
.pl__row--average { --c: #DBB53A; }
.pl__thumb { grid-area: p; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; }
.pl__pic img { display: block; width: 52px; height: 52px; object-fit: cover; object-position: center top; }
.pl__name { grid-area: n; font-size: .875rem; font-weight: 600; color: var(--ink); min-width: 0; }
.pl__track { grid-area: t; display: block; height: 10px; border-radius: 99px; background: #ECE9F3; overflow: hidden; }
.pl__bar { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.pl__score { grid-area: s; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pl__score b { font-size: 1.125rem; color: var(--ink); }
.pl__rating { font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--c); color: #1A1A12; }
.pl__key { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0; font-size: .8125rem; color: var(--muted); }
.pl__sw { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--ink); }
.pl__sw::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: #CEE949; }
.pl__sw--average::before { background: #DBB53A; }
.pl__cap { color: var(--muted); }
/* How it works */
.sv--clips { padding: 2.4rem .8rem .8rem; }
.sv__stack { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.sv__radar { grid-column: 1 / 10; grid-row: 1; }
.sv__gauge { grid-column: 6 / 13; grid-row: 1; margin-top: 45%; z-index: 2; }
.heatmaps__title { margin: 1.25rem 0 0; }
.heatmaps--six { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .6rem; }
.heatmaps--six .rc__ad { border-radius: 8px; box-shadow: none; }
.report-split .rc { position: sticky; top: 90px; }
.cards--icons .card { display: flex; flex-direction: column; }
.src-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-top: 2rem; }
.src-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.75rem; }
.src-item { border-top: 2px solid rgba(201,182,255,.35); padding-top: 1rem; }
.src-item h3 { color: var(--white); font-size: 1.0625rem; margin: 0 0 .45rem; }
.src-item p { margin: 0; font-size: .9375rem; color: #D9D4E6; }
.src-item:last-child { grid-column: 1 / -1; }
.src-vis { margin: 0; background: var(--dark-2); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 1.25rem; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.src-vis__stack { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.src-vis__table { grid-column: 1 / 11; grid-row: 1; }
.src-vis__radar { grid-column: 5 / 13; grid-row: 2; margin-top: -3rem; z-index: 2; }
.src-vis__gauge { grid-column: 1 / 7; grid-row: 2; margin-top: 2rem; z-index: 3; align-self: start; }
.section--dark .limits { margin-top: 2.5rem; max-width: 52rem; }
.plan-all { max-width: 760px; margin: 1.5rem auto 0; text-align: center; font-weight: 600; color: var(--ink); }
@media (max-width: 1000px) {
  .report-split .rc { position: static; }
  .src-split { grid-template-columns: 1fr; }
  .src-vis { max-width: 640px; }
}
@media (max-width: 600px) {
  .rc__stage { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .rc__ad, .rc--radar .rc__ad { grid-column: 1 / 13; grid-row: 1; }
  .rc--tall .rc__ad { grid-column: 2 / 12; }
  .rc__gauge, .rc--radar .rc__gauge, .rc--tall .rc__gauge { grid-column: 5 / 13; grid-row: 2; margin-top: -3rem; }
  .rc--radar .rc__radar { grid-column: 1 / 13; grid-row: 3; }
  .rc__bars, .rc--radar .rc__bars, .rc--tall .rc__bars { display: none; }
  .rc__barlist { display: grid; grid-column: 1 / 13; margin-top: .25rem; }
  .src-list { grid-template-columns: 1fr; }
  .src-item:last-child { grid-column: auto; }
  .pl { padding: 1rem; }
  .pl__row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .pl__thumb, .pl__pic img { width: 44px; height: 44px; }
}
@media (max-width: 380px) {
  .pl__row { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "p n" "p s" "t t"; }
  .pl__thumb, .pl__pic img { width: 40px; height: 40px; }
}
/* Option B tweaks */
.rc--radar .rc__bars { grid-column: 5 / 13; margin-top: -3rem; }
@media (max-width: 600px) { .rc__barlist { margin: .5rem 0 .75rem; } }
.src-vis__gauge { grid-column: 1 / 6; margin-top: 5.5rem; }
/* Home e-commerce cards: real ads with their real Attention heatmap */
.hv--real .hv__img img { object-position: center; }
.hv__tag { position: absolute; z-index: 2; left: .6rem; top: .6rem; margin: 0; background: rgba(15,13,23,.85); color: var(--white); }
.hv figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.hv__tag { right: auto; bottom: auto; font-size: .6875rem; line-height: 1.4; }
/* Option A (Garry, 1 Nov 2026): recommendations full width below the image and the scores */
.adr--real > .adr__fixes { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.adr--real > .adr__fixes ol { font-size: .9375rem; }
.adr--real .adr__body { align-items: start; }
.hv--landing .hv__media { background: #0F0D17; }
.hv--landing .hv__img img { object-fit: contain; }
/* Product ad (listing3): show the whole ad, never a crop of it */
.hv--listing3 .hv__media { background: #EDE5DA; }
.hv--listing3 .hv__img img { object-fit: contain; }
/* Keep the ad's headline and 'Shop now' button clear: chip bottom-left (over the cloth), badge top-right (over the plain wall) */
.hv--listing3 .hv__tag { top: auto; bottom: .6rem; }
.hv--listing3 .hv__badge { top: .6rem; bottom: auto; }

/* Plan summaries and credits (scannable versions of the old plan paragraphs; facts from the Pricing page) */
.plan-sum { margin: 1.5rem auto 0; text-align: center; }
.plan-sum p { margin: 0; }
.plan-sum__name { font-weight: 700; color: var(--purple-700); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.plan-sum__price { font-size: 1.15rem; color: var(--ink); margin-top: .25rem !important; }
.plan-sum__amount { font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; margin-right: .2rem; }
.plan-sum__alt { color: var(--muted); margin-top: .4rem !important; font-size: .95rem; }
.plan-tiles, .credit-costs { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; }
.plan-tiles { grid-template-columns: 1fr; }
.plan-tile { display: flex; align-items: flex-start; gap: .75rem; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.plan-tile__icon { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--purple-50); color: var(--purple); box-sizing: border-box; }
.section--tint .plan-tile__icon { background: #EAE3FF; }
.plan-tile__text { display: flex; flex-direction: column; gap: .1rem; }
.plan-tile__big { color: var(--ink); font-size: 1.05rem; line-height: 1.3; }
.plan-tile__small { color: var(--muted); font-size: .92rem; line-height: 1.4; }
.plan-sum + .wp-block-buttons, .plan-sum + .button-row { margin-top: 1.75rem; }
@media (min-width: 600px) { .plan-tiles { grid-template-columns: 1fr 1fr; } }
.plan-sum--home { max-width: 100%; }
.pcs { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
.pc { --accent: var(--purple); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 2.1rem 1rem 1.25rem; box-shadow: 0 10px 30px -18px rgba(84, 35, 231, .45); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.pc::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--accent); }
.pc--free { --accent: #A875FF; } .pc--solo { --accent: #C26BF0; } .pc--pro { --accent: var(--grad); } .pc--agency { --accent: #FF59C8; } .pc--enterprise { --accent: var(--orange); }
.pc:hover, .pc:focus-within { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(84, 35, 231, .55); }
@media (prefers-reduced-motion: reduce) { .pc { transition: none; } .pc:hover, .pc:focus-within { transform: none; } }
.pc--pro { border: 2px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad) border-box; }
.pc__badge { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); background: var(--purple-700); color: var(--white); font-size: .75rem; font-weight: 700; padding: .15rem .7rem .2rem; border-radius: 0 0 10px 10px; white-space: nowrap; }
.pc__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--purple-50); color: var(--purple); }
.pc__svg { width: 26px; height: 26px; }
.pc__name { margin: .2rem 0 0; font-size: 1.15rem; color: var(--ink); }
.pc__price { margin: 0; color: var(--muted); line-height: 1.1; }
.pc__price strong { display: block; font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pc--enterprise .pc__price strong { font-size: 1.9rem; }
.pc__unit { font-size: .9rem; }
.pc__pill { margin: .2rem 0 0; background: #EFEAFF; color: var(--purple-700); font-weight: 700; font-size: .85rem; padding: .3rem .75rem; border-radius: 999px; }
.pc__cta { margin-top: auto; width: 100%; white-space: normal; text-align: center; font-size: .95rem; padding: .7rem .8rem; }
.pc .pc__pill { margin-bottom: .6rem; }
@media (min-width: 600px) { .pcs { grid-template-columns: repeat(2, 1fr); } .pc:last-child { grid-column: 1 / -1; } }
@media (min-width: 900px) { .pcs { grid-template-columns: repeat(6, 1fr); } .pc, .pc:last-child { grid-column: span 2; } .pc:nth-child(n+4) { grid-column: span 3; } }
@media (min-width: 1100px) {
  .plan-sum--home { width: min(1240px, calc(100vw - 2 * var(--pad))); max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
  .pcs { grid-template-columns: repeat(5, 1fr); } .pc, .pc:last-child, .pc:nth-child(n+4) { grid-column: auto; } .pc { padding-inline: .85rem; } .pc__cta { font-size: .875rem; padding-inline: .5rem; }
}
.plan-sum--home .plan-sum__alt { margin-top: 1rem !important; }
.credits__lead { margin: 0 0 1rem; color: var(--ink-2); }
.credit-costs { grid-template-columns: 1fr 1fr; margin-top: 0; }
.credit-cost { display: flex; flex-direction: column; gap: .2rem; background: var(--purple-50); border-radius: var(--radius); padding: 1rem 1.1rem; }
.credit-cost__name { font-weight: 700; color: var(--purple-700); font-size: .95rem; }
.credit-cost__n { color: var(--ink-2); }
.credit-cost__n strong { font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1.1; margin-right: .2rem; }
.credits__sub { font-size: 1.1rem; margin: 2rem 0 .75rem; color: var(--ink); }
.topups { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .95rem; }
.topups th, .topups td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--line); }
.topups tbody tr:last-child th, .topups tbody tr:last-child td { border-bottom: 0; }
.topups thead th { background: var(--purple-50); color: var(--ink); font-size: .85rem; font-weight: 700; }
.topups tbody th { font-weight: 700; color: var(--ink); }
.topups td { color: var(--ink-2); }
.topups td:nth-child(2) { font-weight: 700; color: var(--ink); white-space: nowrap; }
.credits__note { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 0; color: var(--muted); font-size: .95rem; }
.credits__tick { width: 18px; height: 18px; color: var(--purple); flex: none; }
@media (max-width: 420px) { .topups th, .topups td { padding: .6rem .5rem; font-size: .88rem; } }

/* Integrations: Coming soon page (live) */
.soon-badge { display: inline-block; margin: 0 0 1rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(201,182,255,.14); box-shadow: inset 0 0 0 1px rgba(201,182,255,.55); color: var(--lavender); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.soon-badge--sm { margin: 0 .4rem 0 0; padding: .15rem .55rem; font-size: .6875rem; vertical-align: .15em; background: var(--purple-50); color: var(--purple-700); box-shadow: inset 0 0 0 1px #CDBFFF; }
.hero .soon-badge--sm { background: rgba(201,182,255,.14); color: var(--lavender); box-shadow: inset 0 0 0 1px rgba(201,182,255,.55); }
.soon-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.soon-note { color: #D9D4E6; max-width: 36em; margin-bottom: 1.5rem; }
.soon-visual { margin: 0; justify-self: center; width: min(100%, 400px); }
.soon-visual img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
@media (min-width: 900px) { .soon-split { grid-template-columns: 1.2fr .8fr; } }

/* Integrations full guide (DRAFT only, not published) */
.draft-flag { display: inline-block; margin: 0 0 1rem; padding: .35rem .7rem; border-radius: 6px; background: #FFE9A8; color: var(--ink); font-weight: 700; font-size: .875rem; }
mark.ph { background: #FFE9A8; color: var(--ink); padding: 0 .2em; border-radius: 3px; box-shadow: inset 0 0 0 1px #E0B400; }
.todo-line { font-size: .875rem; }
.todo { display: inline-block; margin-right: .3rem; padding: .1rem .45rem; border-radius: 4px; background: #B42318; color: #fff; font-weight: 700; }
.guide-btns { margin: 1.25rem 0 .5rem; }
.guide-btns .btn { display: inline-block; padding: .85rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.guide-btns .btn--primary { background: var(--orange); color: var(--ink); }
.guide-btns .btn--ghost-dark { color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.guide h3 { margin-top: 2rem; }
.guide .muted, .guide-hero .small { font-size: .9375rem; }
.guide .muted { color: var(--muted); margin-top: -.5rem; }
.prompt { margin: 1rem 0 1.75rem; border-radius: var(--radius); background: var(--dark); color: #E9E5F5; overflow: hidden; }
.prompt__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .6rem .6rem 1rem; background: var(--dark-2); }
.prompt__title { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lavender); }
.copy-btn { font: inherit; font-size: .875rem; font-weight: 700; padding: .45rem .9rem; border: 0; border-radius: 999px; background: var(--orange); color: var(--ink); cursor: pointer; }
.copy-btn:hover { background: #FF9A26; }
.copy-btn:focus-visible, .prompt pre:focus-visible { outline: none; box-shadow: var(--focus); }
.prompt pre { margin: 0; padding: 1rem; white-space: pre-wrap; word-break: break-word; font-size: .9rem; line-height: 1.55; }
.table-wrap { overflow-x: auto; }
.guide-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: .6rem .5rem; border-bottom: 1px solid var(--line); }
.guide-table thead th { color: var(--ink); }
.guide-final { margin-top: 2rem; padding: 1.25rem; border-radius: var(--radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.soon-line { margin: 1.25rem 0 .5rem; }

/* Integrations v2 (1 Nov 2026): 'How it will work' strip, generic chat panel (no third-party look) and the waitlist form */
.ai-flow { border-top: 1px solid rgba(255,255,255,.08); }
.ai-flow__intro { max-width: 40em; color: #D9D4E6; font-size: 1.0625rem; }
.ai-steps { list-style: none; counter-reset: aistep; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-step { counter-increment: aistep; background: var(--dark-2); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 1.25rem 1.25rem 1.4rem; position: relative; }
.ai-step::before { content: counter(aistep); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--purple); color: var(--white); font-weight: 800; margin-bottom: .85rem; }
.ai-step h3 { color: var(--white); font-size: 1.125rem; margin: 0 0 .4rem; }
.ai-step p { margin: 0; color: #D9D4E6; font-size: .975rem; }
.chat { margin: 2rem auto 0; max-width: 760px; background: var(--dark-2); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.chat__bar { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.chat__dots { display: inline-flex; gap: .35rem; }
.chat__dots i { width: .6rem; height: .6rem; border-radius: 50%; background: rgba(255,255,255,.22); }
.chat__title { font-size: .875rem; font-weight: 600; color: #D9D4E6; }
.chat__body { display: grid; gap: 1rem; padding: 1.25rem; }
.chat__msg { border-radius: 16px; padding: .9rem 1rem; max-width: 100%; }
.chat__msg p { margin: 0; }
.chat__msg--you { justify-self: end; max-width: 26rem; background: var(--purple); color: var(--white); border-bottom-right-radius: 4px; }
.chat__msg--cs { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #E8E4F3; border-bottom-left-radius: 4px; }
.chat__who { display: flex; align-items: center; gap: .45rem; font-size: .8125rem; font-weight: 700; margin-bottom: .45rem !important; color: inherit; }
.chat__msg--cs .chat__who img { width: 20px; height: auto; background: var(--white); border-radius: 6px; padding: 3px; box-sizing: content-box; }
.chat__file { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem !important; padding: .3rem .6rem; border-radius: 8px; background: rgba(255,255,255,.16); font-size: .8125rem; font-weight: 600; }
.chat__file svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.chat__result { display: grid; gap: 1rem 1.25rem; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: center; margin: .25rem 0 .9rem; }
.chat__media { position: relative; }
.chat .adr__tag { position: static; display: inline-block; margin: 0 0 .5rem; background: rgba(255,255,255,.1); color: #E8E4F3; }
.chat .adr__bars li { grid-template-columns: 8.25rem minmax(0, 1fr) 1.75rem; }
.chat__img img { display: block; width: 100%; height: auto; border-radius: 12px; }
.chat__score { display: flex; align-items: baseline; gap: .3rem; margin-bottom: .75rem !important; color: #E8E4F3; }
.chat__score b { font-size: 2.25rem; font-weight: 800; color: var(--white); line-height: 1; }
.chat__reply { color: #E8E4F3; }
@media (max-width: 900px) { .ai-steps { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .chat__result { grid-template-columns: 1fr; } .chat__body { padding: 1rem; } .chat__msg--you { max-width: 100%; } }

.waitlist { scroll-margin-top: 80px; }
.waitlist .section-title:focus { outline: none; }
.waitlist .section-title:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; border-radius: 4px; }
.wl { margin-top: 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 4vw, 2rem); }
.wl-req { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--muted); }
.wl-field { margin: 0 0 1.25rem; }
.wl-field label { display: block; font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
.wl-opt { font-weight: 400; color: var(--muted); }
.wl-hint { margin: 0 0 .35rem; font-size: .9375rem; color: var(--muted); }
.wl-field input[type="text"], .wl-field input[type="email"] { display: block; width: 100%; box-sizing: border-box; min-height: 48px; padding: .7rem .9rem; font: inherit; color: var(--ink); background: var(--white); border: 2px solid #8A8496; border-radius: 10px; }
.wl-field input:focus-visible { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--lavender); }
.wl-field input[aria-invalid="true"] { border-color: #B3261E; }
.wl-err { margin: 0 0 .35rem; color: #B3261E; font-weight: 700; font-size: .9375rem; }
.wl-check { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: start; }
.wl-check .wl-err { grid-column: 1 / -1; }
.wl-check input { width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--purple); }
.wl-check input[aria-invalid="true"] { outline: 2px solid #B3261E; outline-offset: 2px; }
.wl-check input:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.wl-check label { font-weight: 400; margin: 0; color: var(--ink-2); }
.wl-privacy { font-size: .9375rem; color: var(--muted); margin: 0 0 1.25rem; }
.wl-actions { margin: 0; }
.wl-submit { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.wl-submit[disabled] { opacity: .75; cursor: progress; }
.wl-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.wl-summary { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 3px solid #B3261E; border-radius: 10px; background: #FDF2F1; }
.wl-summary:focus { outline: 3px solid var(--purple); outline-offset: 2px; }
.wl-summary__title { font-size: 1.125rem; margin: 0 0 .5rem; color: var(--ink); }
.wl-summary ul { margin: 0; padding-left: 1.2rem; }
.wl-summary a { color: #B3261E; font-weight: 700; }
.wl-status:empty { display: none; }
.wl-done { outline: none; }
.wl-done h3 { font-size: 1.375rem; margin: 0 0 .4rem; }
.wl-done p { margin: 0; }
.wl-done:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; border-radius: 6px; }
.wl-fail { margin-top: 1.25rem; padding: 1rem 1.25rem; border-left: 4px solid #B3261E; background: #FDF2F1; border-radius: 6px; color: var(--ink); }
.wl-fail p { margin: 0; }
.wl-noscript { margin: 1rem 0 0; }

/* Integrations waitlist fallback (no web app URL set yet; rendered by functions.php) */
.wl-fallback { margin-top: 1rem; }
.wl-fallback p { margin: 0 0 1.25rem; }
.wl-fallback .wl-fallback__btn { margin: 0; }
.wl-fallback .btn { overflow-wrap: anywhere; }

/* Pricing plan buttons (1.1.2): Solo, Pro and Agency "Get started" all orange #F98500, like Home.
   The page content keeps is-style-ghost on Solo and Agency; this overrides it inside plan cards only.
   Pro keeps its Recommended badge and featured card. */
.plans .plan .wp-block-button.is-style-ghost .wp-block-button__link { background: var(--orange); color: var(--ink); box-shadow: none; }
.plans .plan .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: #FF9A26; color: var(--ink); box-shadow: none; }
.plans .plan .wp-block-button.is-style-ghost .wp-block-button__link:focus-visible { box-shadow: var(--focus); }

/* Home pricing 3-up (PROPOSAL, 1 Nov 2026, pending Garry's approval): reuses the Pricing page plans--v2 cards */
.plan-intro { margin: 1rem auto 0; max-width: 40em; color: var(--ink-2); }
.plan-free-cta { margin-top: 1rem; }
.plans--home .plan { text-align: left; box-shadow: 0 10px 30px -18px rgba(84, 35, 231, .45); }
.plans--home .plan-for { min-height: 0; }
.plans--home .plan-pill { align-self: flex-start; background: #EFEAFF; color: var(--purple-700); font-weight: 700; font-size: .875rem; padding: .3rem .8rem; border-radius: 999px; }
.plans--home .plan--featured { box-shadow: 0 20px 50px rgba(84,35,231,.18); }
.plans--home + .plan-more { margin-top: 1.75rem; }
.plan-note { margin: .75rem auto 0; color: var(--muted); font-size: .95rem; text-align: center; }
.plan-compare { margin: .75rem 0 0; text-align: center; font-weight: 600; }
@media (min-width: 901px) {
  .plans--home { width: min(1040px, calc(100vw - 2 * var(--pad))); max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
}