/* Say What Marketing v2. Design system: Amplemarket (primary), Gleap (secondary),
   in the Say What house colours from the logo: navy #122835, emerald #0aa88f, gold #c9a866. */

:root {
  --ink: #122835;           /* logo navy: text, primary buttons, dark bands, hero frame */
  --charcoal: #1c3441;
  --midnight: #0b3f3a;      /* poster card: deep emerald */
  --indigo-deep: #173a47;
  --white: #ffffff;
  --cream: #f7f4ec;
  --cream-2: #fcfaf5;
  --ash: #5f6b72;
  --stone: #aab1b3;
  --pearl: #e9e6dd;
  /* service tints from the logo family: SEO emerald, Ads gold, web navy-sky, reporting clay */
  --pink: #d6e3ec;
  --mint: #cdeee5;
  --yellow: #f4e6bf;
  --violet: #f0dccd;
  --aqua: #c4efe6;
  --phoenix: #c9a866;       /* the one warm accent: logo gold */
  --lime: #0aa88f;          /* live dots: logo emerald */
  --gold-lo: #a08048;
  --gold-hi: #e4cc88;

  /* saturated taxonomy markers for tiny diamonds only; pastels stay flat surfaces */
  --mint-mark: #0aa88f;
  --yellow-mark: #c29a4e;
  --pink-mark: #3f6f8f;
  --violet-mark: #c07a55;

  --hair: rgba(18, 40, 53, 0.09);
  --hair-dark: rgba(255, 255, 255, 0.1);
  --inset: rgba(17, 17, 17, 0.05) 0 0 0 1px inset;
  --shadow-sm: rgba(17, 17, 17, 0.02) 0 -6px 6px 0, rgba(17, 17, 17, 0.01) 0 -23px 9px 0;
  --shadow-xl: rgba(17, 17, 17, 0.12) 0 26px 60px -6px, rgba(17, 17, 17, 0.02) 0 28px 28px -14px, rgba(17, 17, 17, 0.04) 0 6px 6px -3px, rgba(17, 17, 17, 0.04) 0 1px 1px -0.5px;
  --shadow-soft: rgba(17, 17, 17, 0.04) 0 1px 2px 0, rgba(17, 17, 17, 0.04) 0 4px 8px 0, rgba(17, 17, 17, 0.04) 0 0 1px 0;
  --shadow-glass: rgba(16, 24, 40, 0.12) 0 18px 55px 0;

  --grad-phoenix: radial-gradient(386.06% 162.79% at 3.77% -12.1%, #0aa88f 0%, #fbf3dc 31.14%, #e4cc88 81.98%);

  --font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', cursive;

  --r-sm: 4px;
  --r-btn: 8px;
  --r-card: 12px;
  --r-pill: 9999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(80px, 11vw, 120px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--yellow); color: var(--ink); }

.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.center { text-align: center; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-btn); text-decoration: none; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible { outline-color: #fff; }

/* ---------- Type ---------- */
.hero-title, .h2, .h3, .h-sub, .big-quote p, .big-statement { font-weight: 400; text-wrap: balance; }
.hero-title em, .h2 em, .h3 em { font-style: italic; }

/* heading-lg: 56px / 1.0 / -0.05em at desktop; heading (44px, -0.04em) on phones */
.hero-title {
  font-size: clamp(2.75rem, 1.9rem + 2.2vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
}
@media (max-width: 760px) { .hero-title { letter-spacing: -0.04em; } }
.h2 {
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 20ch;
  margin-inline: auto;
}
.h3 {
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.h-sub {
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.017em;
}
.lede {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ash);
  max-width: 40ch;
  margin-inline: auto;
}
.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ash);
}
.poster {
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 0.6rem + 7.2vw, 5.25rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
}

em.u {
  font-style: italic;
  padding-bottom: 0.08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 40 3, 80 2, 118 6 S 170 10, 197 4' fill='none' stroke='%23111111' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% 0.28em;
}

.section-head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: clamp(40px, 6vw, 56px); position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-btn);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-out);
}
.btn .i { width: 16px; height: 16px; transition: transform 0.25s var(--ease-out); }
.btn:hover .i { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }
.btn-sm { height: 38px; padding: 0 14px; font-size: 15px; }
.btn-lg { height: 52px; padding: 0 22px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #1f4153; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--pearl); }
.btn-pearl { background: var(--pearl); color: var(--ink); }
.btn-pearl:hover { background: #dfdbd0; }
.btn-outline { background: #fff; color: var(--ink); box-shadow: rgba(17, 17, 17, 0.14) 0 0 0 1px inset; }
.btn-outline:hover { background: var(--cream); }
/* quiet pointer to the same action: same "Gratis scan" name as the buttons, set as an
   ink text link, so mid-page the poster stays the only filled CTA */
.scan-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.scan-link > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(17, 17, 17, 0.28);
  transition: text-decoration-color 0.25s ease;
}
.scan-link .i { width: 16px; height: 16px; flex: none; transition: transform 0.25s var(--ease-out); }
.scan-link:hover > span { text-decoration-color: var(--ink); }
.scan-link:hover .i { transform: translateX(3px); }
.scan-link-lg { font-size: 17px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  max-width: var(--maxw);
  height: 64px;
  margin: 0 auto;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: var(--r-card);
  transition: max-width 0.6s var(--ease-out), margin 0.6s var(--ease-out), height 0.6s var(--ease-out), padding 0.6s var(--ease-out), background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}
.site-header.is-floating .nav {
  max-width: 940px;
  height: 56px;
  margin-top: 12px;
  padding: 0 8px 0 14px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: var(--shadow-xl), var(--inset);
}
.site-header.is-floating.is-dark .nav {
  background: rgba(18, 40, 53, 0.86);
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.45) 0 20px 50px -10px, rgba(255, 255, 255, 0.08) 0 0 0 1px inset;
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
/* the logo megaphone on its own navy tile, in every context */
.brand-mark { width: 34px; height: 34px; flex: none; border-radius: 8px; overflow: hidden; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand-light .brand-mark { box-shadow: rgba(255, 255, 255, 0.14) 0 0 0 1px inset; }
/* wordmark set like the logo: SAY WHAT over a spaced MARKETING between gold dashes */
.brand-name { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.brand-name span { display: inline-flex; align-items: center; gap: 5px; font-size: 8.5px; font-weight: 600; letter-spacing: 0.34em; margin-right: -0.34em; /* trailing tracking would push the word off-centre */ }
.brand-name span::before, .brand-name span::after { content: ""; width: 8px; height: 1.5px; background: var(--phoenix); }
.brand-name span::after { margin-left: -0.34em; }

.nav-links { display: flex; gap: 4px; }
.nav-links a {
  padding: 8px 12px;
  border-radius: var(--r-btn);
  font-size: 15px;
  text-decoration: none;
  color: rgba(17, 17, 17, 0.72);
  transition: color 0.2s, background-color 0.2s;
}
.nav-links a:hover { color: var(--ink); background: rgba(17, 17, 17, 0.05); }
.is-dark .nav-links a { color: rgba(255, 255, 255, 0.7); }
.is-dark .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.nav-actions { display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; padding: 3px; border-radius: var(--r-btn); box-shadow: rgba(17, 17, 17, 0.14) 0 0 0 1px inset; }
.lang button {
  border: 0;
  background: transparent;
  height: 30px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ash);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.is-dark .lang { box-shadow: rgba(255, 255, 255, 0.18) 0 0 0 1px inset; }
.is-dark .lang button { color: rgba(255, 255, 255, 0.6); }
.is-dark .lang button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.is-dark .nav-cta { background: #fff; color: var(--ink); }

.menu-btn { display: none; width: 40px; height: 40px; border: 0; border-radius: var(--r-btn); background: transparent; cursor: pointer; place-items: center; }
.menu-btn .i { width: 22px; height: 22px; }
.menu-btn .i-shut { display: none; }
.menu-open .menu-btn .i-open { display: none; }
.menu-open .menu-btn .i-shut { display: block; }

.mobile-menu {
  pointer-events: auto;
  display: none;
  flex-direction: column;
  gap: 2px;
  max-width: 940px;
  margin: 8px auto 0;
  padding: 10px;
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xl), var(--inset);
}
.mobile-menu a:not(.btn) { padding: 12px; border-radius: var(--r-btn); font-size: 17px; text-decoration: none; }
.mobile-menu a:not(.btn):hover { background: var(--cream); }
.menu-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 12px 2px 2px 12px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ash); }
.menu-open .mobile-menu { display: flex; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(112px, 16vw, 164px) 0 clamp(64px, 8vw, 96px); overflow: clip; }
/* the copy sits above the bloom that rises behind the form */
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }

.announce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--hair) 0 0 0 1px inset;
  font-size: 13px;
  text-decoration: none;
  transition: box-shadow 0.25s, transform 0.25s var(--ease-out);
}
.announce:hover { transform: translateY(-1px); box-shadow: rgba(17, 17, 17, 0.2) 0 0 0 1px inset; }
.announce .i { width: 14px; height: 14px; }
.announce-tag { background: var(--ink); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-pill); }

.hero-title { margin: 28px 0 20px; }
.hero-sub { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.35; letter-spacing: -0.02em; color: var(--ash); max-width: 34ch; }

/* email-capture component: one white 48px field, 1px hairline, 12px radius, ink button joined inside at the right */
.capture {
  display: flex;
  align-items: center;
  gap: 4px;
  width: min(460px, 100%);
  margin-top: 32px;
  padding: 0 4px 0 0;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.capture:focus-within { border-color: rgba(17, 17, 17, 0.5); box-shadow: rgba(17, 17, 17, 0.06) 0 0 0 4px; }
.capture input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-card) 0 0 var(--r-card);
  background: transparent;
  font-size: 16px;
  line-height: 48px;
  outline: none;
}
.capture input::placeholder { color: var(--ash); }
.capture .btn { flex: none; height: 40px; }

.hero-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 16px; font-size: 13px; color: var(--ash); }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--stone); margin-right: 10px; }

.dot-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; }
.dot-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lime); animation: ping 2.4s var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

/* hero media: an example of the free scan, the thing the owner actually receives */
.hero-stage { position: relative; margin-top: clamp(48px, 7vw, 72px); }

/* the bloom: the house hero gradient (emerald edges, gold core, cream highlights) as one full-bleed band.
   It rises under the copy, runs off both edges, and the top of the frame sits in its core. */
.hero-bloom {
  position: absolute;
  z-index: 0;
  left: calc(50% - 50vw - 40px);
  top: -300px;
  width: calc(100vw + 80px);
  height: 760px;
  pointer-events: none;
  background:
    radial-gradient(24% 46% at 1% 54%, #0aa88f 0%, rgba(10, 168, 143, 0.6) 38%, rgba(10, 168, 143, 0) 74%),
    radial-gradient(15% 34% at 99% 60%, rgba(10, 168, 143, 0.8) 0%, rgba(10, 168, 143, 0) 72%),
    radial-gradient(40% 26% at 50% 40%, #e6d197 0%, rgba(230, 209, 151, 0.75) 45%, rgba(230, 209, 151, 0) 80%),
    radial-gradient(26% 40% at 19% 50%, rgba(201, 168, 102, 0.85) 0%, rgba(201, 168, 102, 0) 70%),
    radial-gradient(28% 42% at 83% 46%, #d9bd7c 0%, rgba(217, 189, 124, 0) 70%),
    radial-gradient(30% 30% at 31% 34%, #fbf3dc 0%, rgba(251, 243, 220, 0) 72%),
    radial-gradient(30% 30% at 69% 32%, #fbf3dc 0%, rgba(251, 243, 220, 0) 72%),
    radial-gradient(22% 30% at 38% 44%, rgba(10, 168, 143, 0.3) 0%, rgba(10, 168, 143, 0) 70%);
  /* film grain: a noise tile thins the colour pixel by pixel, so the grain lives only in the colour */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.3 0 0 0 0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(to bottom, transparent 0%, #000 30%, #000 62%, transparent 100%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.3 0 0 0 0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(to bottom, transparent 0%, #000 30%, #000 62%, transparent 100%);
  -webkit-mask-size: 200px 200px, 100% 100%;
  mask-size: 200px 200px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* the frame: the system's black media container (12px radius, full container width) kept to a
   thin rim, not a bezel. A faint top light and a soft shadow set it into the bloom. */
.hero-media {
  position: relative;
  z-index: 1;
  padding: 6px;
  border-radius: var(--r-card);
  background: var(--ink);
  box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset, rgba(255, 255, 255, 0.07) 0 0 0 1px inset, rgba(17, 17, 17, 0.12) 0 0 0 1px, var(--shadow-xl);
}
.app { background: #fff; border-radius: 6px; overflow: hidden; text-align: left; font-size: 13px; line-height: 1.3; color: var(--ink); }
.app .i { width: 14px; height: 14px; }

.app-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; height: 50px; padding: 0 12px 0 14px; background: var(--cream-2); border-bottom: 1px solid var(--hair); }
.app-ws { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app-logo { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--ink); }
.app-logo { overflow: hidden; }
.app-logo img { display: block; width: 100%; height: 100%; }
.app-ws-name { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-tabs { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-btn); background: var(--pearl); }
.app-tabs span { padding: 5px 12px; border-radius: 6px; font-size: 12px; color: var(--ash); white-space: nowrap; }
.app-tabs .on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: var(--inset), rgba(17, 17, 17, 0.06) 0 1px 2px; }
.app-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.app-range { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 9px; border-radius: var(--r-btn); background: #fff; box-shadow: var(--inset); font-size: 12px; font-weight: 500; white-space: nowrap; }
.app-range .i { width: 13px; height: 13px; color: var(--ash); }
.app-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--charcoal); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }

/* example label: next to the site name, quiet but always on screen */
.ex-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--pearl);
  color: rgba(17, 17, 17, 0.72);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
}

.app-main { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.app-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; background: var(--cream-2); border-right: 1px solid var(--hair); }
.app-rail i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-btn); color: var(--ash); }
.app-rail i.on { background: #fff; color: var(--ink); box-shadow: var(--inset); }
.app-rail .i { width: 16px; height: 16px; }
.app-content { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 18px 16px; }

/* scan report: header, three points, contact line. Ink and Ash only; the diamonds are the
   service markers, stripes mark what is lost. */
.scan-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.scan-head-l { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.scan-title { font-size: 22px; font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; }
.scan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--ash); }
.scan-sent { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px 0 7px; border-radius: var(--r-pill); background: var(--pearl); color: var(--ink); font-size: 11px; font-weight: 500; }
.scan-sent i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.scan-checked { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.scan-checked li { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-pill); box-shadow: var(--inset); font-size: 12px; white-space: nowrap; }
.scan-checked .i { width: 12px; height: 12px; stroke-width: 2.4; }
.scan-checked li.scan-checked-l { padding: 0 2px 0 0; box-shadow: none; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); }

/* the three points share rows (subgrid), so titles, figures, visuals and fixes line up across */
.scan-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 12px; }
.sp { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 12px; min-width: 0; padding: 14px 16px 16px; border-radius: 10px; background: #fff; box-shadow: var(--inset); }
.sp-top { display: flex; align-items: center; gap: 8px; }
.sp-tag { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }
.sp-tag .diamond { width: 8px; height: 8px; margin: 0; }
.sp-num { font-size: 11px; font-weight: 500; color: var(--ash); font-variant-numeric: tabular-nums; }
.app .sp-chev { display: none; width: 14px; height: 14px; color: var(--ash); }
.sp-title { font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; min-height: 2.5em; text-wrap: balance; }
.sp-metric { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sp-metric b { flex: none; font-size: 30px; font-weight: 400; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.sp-metric span { font-size: 12px; line-height: 1.3; color: var(--ash); }
/* the three small visuals share one height and one baseline */
.sp-viz { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 50px; }
.sp-fix { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--hair); }
.sp-fix-l { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); }
.sp-fix p { font-size: 13px; line-height: 1.4; }
.sp-chips { display: flex; flex-wrap: wrap; align-self: end; gap: 6px; }
.sp-chips span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--pearl); font-size: 11px; font-weight: 500; white-space: nowrap; }
.sp-chips span + span { background: transparent; box-shadow: var(--inset); color: var(--ash); }

/* 01: positions 1 to 20 on two pages; the top 3 is the goal, "jij" is where the site is */
.rank-track { flex-direction: row; align-items: flex-end; gap: 6px; }
.rt-page { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rt-page > span { font-size: 11px; line-height: 1; color: var(--ash); }
.rt-cells { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.rt-cells i { position: relative; height: 16px; border-radius: 3px; background: var(--pearl); }
.rt-cells i.goal { background: var(--ink); }
.rt-cells i.you { background: #fff; box-shadow: var(--ink) 0 0 0 1.5px inset; }
.rt-cells em, .lb-bar em span { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); padding: 3px 5px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 10px; font-style: normal; font-weight: 600; line-height: 1; white-space: nowrap; }

/* 02: the ad budget, split by what people searched for */
.split-bar { display: flex; gap: 2px; height: 16px; }
.split-bar i { border-radius: 3px; }
.split-bar i:first-child { flex: 69; background: var(--ink); }
.split-bar i:last-child { flex: 31; background: repeating-linear-gradient(135deg, rgba(17, 17, 17, 0.5) 0 1.5px, transparent 1.5px 4px), var(--pearl); }
.split-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; line-height: 1; color: var(--ash); font-variant-numeric: tabular-nums; }
.split-key > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.split-key i { width: 8px; height: 8px; border-radius: 2px; background: var(--ink); }
.split-key i.x { background: repeating-linear-gradient(135deg, rgba(17, 17, 17, 0.6) 0 1.5px, transparent 1.5px 3px), var(--pearl); }

/* 03: load time against the 3 second goal; the stripes are the seconds too many */
.lb-bar { position: relative; display: flex; gap: 2px; height: 16px; border-radius: 3px; background: var(--pearl); }
.lb-bar i { border-radius: 3px; }
.lb-bar i:first-child { width: calc(50% - 1px); background: var(--ink); }
.lb-bar i:nth-child(2) { width: calc(36.7% - 1px); background: repeating-linear-gradient(135deg, rgba(17, 17, 17, 0.5) 0 1.5px, transparent 1.5px 4px), #e2e1df; }
.lb-bar em { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 0; border-left: 1.5px solid var(--ink); }
.lb-scale { display: flex; justify-content: space-between; font-size: 11px; line-height: 1; color: var(--ash); font-variant-numeric: tabular-nums; }

.scan-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--cream-2); box-shadow: var(--inset); }
.scan-foot .app-avatar { width: 26px; height: 26px; }
.scan-foot p { min-width: 0; font-size: 13px; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-foot b { font-weight: 500; color: var(--ink); }

/* SERP bits, used by the SEA panel */
.serp-label { font-size: 11px; font-weight: 700; color: var(--ink); }
.serp-url { font-size: 12px; color: var(--ash); }
.serp-title { font-size: 17px; color: #1d5a7a; letter-spacing: -0.01em; line-height: 1.25; }
.serp-desc { font-size: 13px; color: var(--ash); line-height: 1.4; }

/* floating annotation cards */
.note-card {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 240px;
  padding: 12px 16px 12px 14px;
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xl), var(--inset);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ash);
  text-align: left;
  transform: rotate(var(--rot, 0deg));
  animation: bob 7s ease-in-out infinite alternate;
}
.note-card b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -8px; } }
.note-ico { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--ink); color: #fff; flex: none; }
.note-ico .i { width: 11px; height: 11px; stroke-width: 3; }

/* hero annotations. Below 1360px they form a row of flat cards under the frame. */
.hero-stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero-media { flex: 1 0 100%; }
.hero-stage .note-card { position: relative; inset: auto; transform: none; animation: none; max-width: none; flex: 1 1 200px; margin-top: 4px; box-shadow: var(--hair) 0 0 0 1px inset; }

/* Wide screens: the frame spans the container and the cards stay inside it. Each card overlaps
   a frame edge by 40px where the report is empty: the open stretch of the top bar right of the
   tabs, and a widened bottom margin under the contact line. */
@media (min-width: 1200px) {
  .hero-stage {
    --note-w: 224px;
    --note-in: 40px;
    display: block;
    margin-top: 88px;
  }
  .hero-stage .note-card { position: absolute; width: var(--note-w); margin: 0; }
  .hero-stage .note-a { left: 44px; top: calc(100% - var(--note-in)); }
  .hero-stage .note-b { left: calc(50% + 200px); bottom: calc(100% - var(--note-in)); }
  .hero-stage .note-c { right: 44px; top: calc(100% - var(--note-in)); }
  .hero-stage .app-content { padding-bottom: calc(var(--note-in) + 4px); }
  .hero-stage + .media-note { margin-top: 64px; }
}

.diamond { width: 10px; height: 10px; margin-top: 4px; border-radius: 2px; transform: rotate(45deg); flex: none; }
.d-mint { background: var(--mint-mark); }
.d-yellow { background: var(--yellow-mark); }
.d-pink { background: var(--pink-mark); }
.d-violet { background: var(--violet-mark); }
.d-stone { background: var(--stone); }

.media-note { position: relative; z-index: 1; margin-top: 28px; text-align: center; font-size: 12px; color: var(--ash); }

/* ---------- Fact row (sourced research in logo-wall form) ---------- */
.tools { padding-top: clamp(24px, 4vw, 40px); }
/* one white card (12px radius, hairline edge) split into cells by hairline dividers */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 40px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  overflow: hidden;
}
.fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 188px;
  padding: clamp(32px, 3.4vw, 44px) clamp(14px, 1.6vw, 20px) 28px;
  text-align: center;
}
.fact + .fact { border-left: 1px solid var(--hair); }
.fact-num {
  font-size: clamp(2.5rem, 1.9rem + 1.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
}
.fact-line { max-width: 31ch; font-size: 15px; line-height: 1.4; color: var(--ash); text-wrap: balance; }
.fact-src { margin-top: 20px; font-size: 12px; line-height: 1.45; color: var(--ash); text-align: center; }
.fact-you .fact-num { font-style: italic; }
.fact-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.fact-link .i { width: 14px; height: 14px; transition: transform 0.25s var(--ease-out); }
.fact-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fact-link:hover .i { transform: translateX(3px); }

/* ---------- Problem ---------- */
.big-quote { max-width: 760px; margin: 0 auto; }
.big-quote p, .big-statement {
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.028em;
}
.problem { padding-top: clamp(48px, 7vw, 80px); }
.big-quote figcaption { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ash); }

.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(56px, 8vw, 88px); }
.pain-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-card); background: #fff; box-shadow: var(--inset), var(--shadow-sm); }
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); }
.tag .diamond { margin-top: 0; width: 8px; height: 8px; }
.pain-card h3 { font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; }
.pain-card p { font-size: 15px; color: var(--ash); line-height: 1.5; }
/* the next step after the three pains: the same quiet ink pointer used mid-page */
.pain-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 20px; margin-top: 32px; text-align: center; }
.pain-next p { font-size: 16px; line-height: 1.4; color: var(--ash); }
.pain-next p span { display: inline-block; }

/* ---------- Dark sections ---------- */
.dark { background: var(--ink); color: #fff; }
.dark .lede, .dark .eyebrow { color: rgba(255, 255, 255, 0.6); }

/* ---------- Calculator ---------- */
.calc-stage { position: relative; max-width: 1000px; margin: 0 auto; }
/* no overflow clipping: on wide screens the two notes hang over the card's left and right edge */
.calc {
  --calc-pad: clamp(24px, 3.6vw, 40px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-card);
  box-shadow: rgba(0, 0, 0, 0.6) 0 40px 90px -20px;
}
/* inputs: two instruments that share the panel height, split by a hairline */
.calc-inputs { padding: var(--calc-pad); display: flex; flex-direction: column; }
.calc-field { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 28px 0; }
.calc-field + .calc-field { border-top: 1px solid var(--hair); }
.calc-field:last-child { padding-bottom: 0; }
/* label over value, the same pattern as the result column */
.calc-label { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.calc-label label { font-size: 15px; line-height: 1.35; text-wrap: balance; }
/* subheading: 28px / 1.1 / -0.02em. Inputs stay one size so only the result is large. */
.calc-label output { font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-scale { display: flex; justify-content: space-between; margin-top: 2px; font-size: 12px; line-height: 1; color: var(--ash); font-variant-numeric: tabular-nums; }
/* under the search-volume slider: most owners don't know this number, and the scan looks it up */
.calc-hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 14px; line-height: 1.35; color: var(--ash); text-wrap: pretty; }
.calc-hint .i { width: 14px; height: 14px; margin-top: 2px; color: var(--ink); }
.calc-hint b { font-weight: 500; color: var(--ink); }

input[type="range"] {
  --p: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 12px 0 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--ink) var(--p), var(--pearl) var(--p)); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: rgba(0, 0, 0, 0.16) 0 2px 8px;
  transition: transform 0.2s var(--ease-out);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--pearl); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--ink); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }

.calc-result { display: flex; flex-direction: column; padding: var(--calc-pad); background: var(--cream-2); border-left: 1px solid var(--hair); border-radius: 0 var(--r-card) var(--r-card) 0; }
.calc-scenario { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: calc(15px * 1.3 + 16px); padding-bottom: 16px; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.calc-scenario-k { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); }
/* the output: one readout, label over the yearly figure, with the scan button right under it.
   Below them the example results page; the working lives on the receipt card. */
.calc-main { flex: 1 1 auto; display: flex; flex-direction: column; }
.calc-out { container-type: inline-size; flex: 1 1 auto; display: flex; flex-direction: column; }
.calc-row { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px 0; }
.calc-r-label { font-size: 14px; line-height: 1.3; color: var(--ash); text-wrap: balance; }
.calc-big { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
/* heading-lg: 56px / 1.0 / -0.05em, the one large figure on the card, one unbroken line.
   The cap in cqi keeps the widest possible result (EUR 2.640.000 at both slider maximums) inside the column. */
.calc-money { font-size: min(3.5rem, 15cqi); line-height: 1; letter-spacing: -0.05em; }
.calc-act { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.calc-act .btn { max-width: 100%; height: auto; min-height: 44px; padding: 12px 16px; white-space: normal; text-align: left; line-height: 1.2; }
.calc-act .btn span { text-wrap: balance; }
/* what the scan asks for, one quiet line under the button */
.calc-needs { font-size: 13px; line-height: 1.35; color: var(--ash); }

/* Example results page, under a hairline: the query and the example label on top, then spots 1 to 3,
   a page break and spot 14. The visitor's site is outlined in ink at the goal (spot 2) and dashed at
   spot 14 now, with the rank badges of the hero's rank tracker (goal filled, now outlined). A thin ink
   bracket runs from now up to the goal. Each group's share of the clicks sits on its right. */
.calc-ex { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair); }
.serp { max-width: 460px; padding: 12px 14px 14px; background: #fff; border: 1px solid rgba(17, 17, 17, 0.12); border-radius: var(--r-card); }
.serp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.serp-q { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 28px; padding: 0 12px 0 10px; border-radius: var(--r-pill); box-shadow: var(--inset); font-size: 12px; line-height: 1; white-space: nowrap; }
.serp-q .i { width: 13px; height: 13px; color: var(--ash); }
.serp-q span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.serp-grid { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-rows: repeat(3, 26px) 20px 26px; column-gap: 8px; }
.serp-r { grid-column: 2; display: flex; align-items: center; gap: 8px; min-width: 0; height: 26px; padding: 0 8px 0 4px; border-radius: 6px; font-size: 13px; line-height: 1; }
.serp-r1 { grid-row: 1; }
.serp-goal { grid-row: 2; }
.serp-r3 { grid-row: 3; }
.serp-now { grid-row: 5; }
.serp-r b { display: grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 4px; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ash); }
.serp-r i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--pearl); }
.serp-bar { flex: 0 1 auto; width: var(--w); height: 8px; border-radius: var(--r-pill); background: var(--pearl); }
.serp-site { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.serp-r em { flex: none; margin-left: auto; padding-left: 6px; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.serp-goal { box-shadow: var(--ink) 0 0 0 1.5px inset; }
.serp-goal b { background: var(--ink); color: #fff; }
.serp-goal i { background: var(--ink); }
.serp-now { outline: 1px dashed var(--stone); outline-offset: -1px; color: var(--ash); }
.serp-now b { box-shadow: var(--ink) 0 0 0 1.5px inset; color: var(--ink); }
.serp-now i { background: none; box-shadow: var(--stone) 0 0 0 1px inset; }
.serp-now .serp-site { font-weight: 400; color: var(--ash); }
.serp-p2 { grid-column: 2; grid-row: 4; display: flex; align-items: center; gap: 8px; padding-left: 4px; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }
.serp-p2::after { content: ''; flex: 1 1 auto; border-top: 1px dashed var(--stone); }
/* from the middle of spot 14 to the middle of spot 2: dot at now, arrowhead touching the goal row */
.serp-move { grid-column: 1; grid-row: 2 / 6; position: relative; margin: 12px -2px 12px 0; border: 1.5px solid var(--ink); border-right: 0; border-radius: 6px 0 0 6px; }
.serp-move::before, .serp-move::after { content: ''; position: absolute; }
.serp-move::before { right: -3px; bottom: -3.75px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.serp-move::after { right: -6px; top: -4.75px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--ink); }
.serp-share { grid-column: 3; display: block; padding-left: 12px; border-left: 1px solid rgba(17, 17, 17, 0.16); white-space: nowrap; }
.serp-share span { display: block; font-size: 11px; line-height: 1.2; color: var(--ash); }
.serp-share b { display: block; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
/* each share is label over value: the caption level with the row above, the figure level with the
   visitor's row (spot 2 for the top 3, spot 14 for page 2) */
.serp-share-top { grid-row: 1 / 4; margin: 2px 0; padding-top: 4px; }
.serp-share-top b { margin-top: 9px; }
.serp-share-p2 { grid-row: 4 / 6; margin-top: 2px; padding-top: 1px; }
.serp-share-p2 b { margin-top: 6px; color: var(--ash); }
/* narrow phones: no site icons, and each caption on two lines so the site name keeps its full width;
   the page break row grows to hold the two-line caption beside it */
@media (max-width: 460px) {
  .serp { padding: 12px 12px 12px; }
  .serp-grid { grid-template-rows: repeat(3, 26px) 30px 26px; column-gap: 6px; }
  .serp-r { gap: 7px; padding-right: 7px; font-size: 12px; }
  .serp-r i { display: none; }
  .serp-r em { padding-left: 4px; }
  .serp-share { padding-left: 10px; }
  .serp-share span { max-width: 6.4em; white-space: normal; text-wrap: balance; }
  .serp-share-top { padding-top: 0; }
  .serp-share-top b { margin-top: 2px; }
  .serp-share-p2 { padding-top: 2px; }
  .serp-share-p2 b { margin-top: 4px; }
}

/* Annotation cards, each pinned to what it explains: "new customers only" beside the
   customer value and "could come out lower" beside the yearly figure. White, hairline, 12px
   radius, no shadow, no motion. Narrow screens: flat inside the card, under their value.
   The working and the source are one caption line under the frame.
   From 1300px both values carry the same hairline leader (dot at the value, line to the note).
   The card is 1000px in a 1200px container, so 100px of margin each side: the local note
   hangs 96px over the card's right edge and ends 4px inside the container.
   The customer-value note sits on the open right side of its field, flush with the slider's
   right end, so the input column ends right under the second slider. Each leader shrinks as its
   value grows and keeps 20px or more at the slider maximums (EUR 5.000 and EUR 2.640.000). */
.calc-fig { display: contents; }
.calc-fig .calc-money { flex: none; }
.calc-lead { display: none; }
.calc-note {
  position: relative;
  z-index: 2;
  display: block;
  align-self: flex-start;
  max-width: min(100%, 300px);
  margin: 16px 0 0;
  padding: 10px 14px 11px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: none;
  transform: none;
  animation: none;
  text-wrap: pretty;
}
.calc-note-local { order: 1; margin-top: 8px; }

/* Caption line under the frame, one hairline the card's width: the source and guarantee on the
   left, the live working on the right, on one baseline. White 12px caption type on the dark band;
   the assumption keeps its tag as a hairline pill. If the working outgrows the line (slider
   maximums) it wraps between its parts, right-aligned, its first line still on the baseline.
   Once the card is one column, the working comes first, left-aligned, and the source follows. */
.calc-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 32px; margin-top: 20px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 12px; line-height: 1.5; color: #fff; }
.calc-src { flex: none; max-width: 100%; margin: 0; }
.calc-formula { flex: 0 1 auto; min-width: 0; margin: 0; text-align: right; text-wrap: balance; font-variant-numeric: tabular-nums; }
.calc-formula .f-part { white-space: nowrap; }
.calc-math-tag { display: inline-block; margin-left: 2px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--r-pill); font-size: 11px; line-height: 15px; white-space: nowrap; vertical-align: 1px; }
@media (max-width: 980px) {
  .calc-foot { flex-direction: column; align-items: flex-start; }
  .calc-formula { order: -1; text-align: left; text-wrap: pretty; }
}

@media (min-width: 1300px) {
  .calc { --note-w: 200px; --note-out: 96px; position: relative; grid-template-rows: repeat(3, auto); }
  .calc-note { width: var(--note-w); padding: 11px 14px 12px; text-wrap: wrap; }
  /* both columns share three rows (heading, first field, second field), so the result label sits
     level with the first slider's label, and the example results page level with the second field,
     under one hairline that runs through both columns */
  .calc-inputs, .calc-result { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; }
  .calc-main { align-self: start; }
  .calc-out { flex: none; }
  .calc-row { padding: 30px 0 24px; }
  .calc-act { padding-bottom: 28px; }
  .calc-ex { margin-top: 0; }
  /* input column: the first field starts at the top of its row, so its label is level with the
     label over the figure; the second field sits in the middle of its row, beside the example */
  .calc-inputs input[type="range"] { margin-top: 24px; }
  .calc-field:not(:last-child) { justify-content: flex-start; }
  .calc-field:last-child { position: relative; justify-content: center; }
  /* customer value: label over "value, leader", the note on the right above the slider's end */
  .calc-field:last-child .calc-label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 0; }
  .calc-field:last-child .calc-label label { grid-column: 1 / -1; max-width: calc(100% - var(--note-w) - 24px); }
  .calc-label .calc-lead { margin: 2px var(--note-w) 0 14px; }
  /* bottom edge 13px above the slider (scale 14px + slider 28px under it) */
  .calc-note-value { position: absolute; right: 0; bottom: 55px; margin: 0; transform: rotate(1.5deg); }
  /* the label above the figure stops short of the note that overlaps this column */
  .calc-row-total .calc-r-label { max-width: calc(100% - (var(--note-w) - var(--note-out) - var(--calc-pad)) - 4px); text-wrap: balance; }
  .calc-fig { display: flex; align-items: center; position: relative; }
  .calc-lead {
    display: block;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 1px;
    margin: 4px calc(var(--note-w) - var(--note-out) - var(--calc-pad)) 0 14px;
    background: rgba(17, 17, 17, 0.28);
  }
  .calc-lead::before { content: ''; position: absolute; left: 0; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
  /* top edge level with the label over the figure, so the note ends above the button */
  .calc-note-local {
    position: absolute;
    top: -26px;
    right: calc(-1 * (var(--calc-pad) + var(--note-out)));
    margin: 0;
    transform: rotate(-1.5deg);
  }
}
.agitate .lede { text-wrap: balance; }

/* on this dark band all type is white; Ash only appears on the white card */
.agitate .eyebrow, .agitate .lede { color: #fff; }

/* closing statement hangs off the calculator card's left edge */
.ag-foot { max-width: 1000px; margin: 0 auto; }
.ag-close { max-width: 560px; margin-top: clamp(80px, 10vw, 120px); }
.ag-close .big-statement { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem); line-height: 1.12; letter-spacing: -0.03em; }
.ag-close figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 14px; color: #fff; }
.ag-next { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.ag-next .i { width: 16px; height: 16px; transform: rotate(90deg); transition: transform 0.25s var(--ease-out); }
.ag-next:hover { text-decoration: underline; text-underline-offset: 3px; }
.ag-next:hover .i { transform: rotate(90deg) translateX(3px); }

/* ---------- Services stack ---------- */
.stack { --lift: 30px; position: relative; padding-top: calc(var(--lift) * 3 + 8px); }
.stack-tabs { position: absolute; inset: 0 0 auto; }
.stack-tab {
  --d: 0;
  position: absolute;
  top: calc(var(--lift) * (3 - var(--d)) + 8px);
  left: calc(var(--d) * 3.2%);
  right: calc(var(--d) * 3.2%);
  z-index: calc(5 - var(--d));
  height: 72px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 20px;
  border: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: #fff;
  box-shadow: var(--inset), rgba(17, 17, 17, 0.03) 0 -4px 10px;
  font-size: 14px;
  color: var(--ash);
  text-align: left;
  cursor: pointer;
  transition: top 0.55s var(--ease-out), left 0.55s var(--ease-out), right 0.55s var(--ease-out), color 0.3s, background-color 0.3s;
}
.stack-tab .diamond { margin-top: 3px; width: 9px; height: 9px; }
.stack-tab:not([aria-selected="true"]):hover { background: var(--cream-2); color: var(--ink); }
.stack-tab[aria-selected="true"] {
  z-index: 10;
  padding: 22px clamp(20px, 4vw, 48px) 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: default;
}
/* the plain name leads; the trade term follows quietly */
.stack-tab[aria-selected="true"] :is(.st-sep, .st-desc) { font-weight: 400; color: var(--ash); }
.stack-card {
  --pad-x: clamp(20px, 4vw, 48px);
  --pad-b: clamp(24px, 4vw, 48px);
  position: relative;
  z-index: 6;
  padding: 72px var(--pad-x) var(--pad-b);
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xl), var(--inset);
}
.stack-panel { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.stack-panel[hidden] { display: none; }
.stack-panel.enter .panel-copy, .stack-panel.enter .stage { animation: rise 0.6s var(--ease-out) both; }
.stack-panel.enter .stage { animation-delay: 80ms; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.services .lede { max-width: 48ch; text-wrap: balance; }

.panel-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.panel-copy > p { color: var(--ash); font-size: 16px; line-height: 1.55; max-width: 42ch; }

.scribble-click { position: absolute; right: 3%; top: -48px; z-index: 12; width: 150px; pointer-events: none; }
.scribble-click span { display: block; font-family: var(--font-hand); font-size: 28px; font-weight: 600; line-height: 1; transform: rotate(-8deg); text-align: right; padding-right: 4px; }
.scribble-click svg { width: 110px; height: 82px; margin-left: 6px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* phones: the folder stack becomes a 2x2 grid so all four services show at once */
@media (max-width: 760px) {
  .stack { padding-top: 0; }
  .scribble-click { display: none; }
  .stack-tabs { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .stack-tab, .stack-tab[aria-selected="true"] {
    position: static;
    z-index: auto;
    height: auto;
    min-height: 66px;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border-radius: var(--r-card);
    background: #fff;
    box-shadow: var(--inset);
    font-size: 15px;
    font-weight: 400;
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
  }
  .stack-tab .diamond { margin-top: 5px; }
  .st-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .st-name { font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
  .st-sep { display: none; }
  .st-desc { font-size: 13px; line-height: 1.3; color: var(--ash); }
  .stack-tab[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; cursor: default; }
  .stack-tab[aria-selected="true"] .st-desc { color: rgba(255, 255, 255, 0.66); }
  .stack-card { padding-top: clamp(24px, 4vw, 48px); }
  .stack-panel { grid-template-columns: 1fr; }
}

/* mocks */
.tint-mint { background: var(--mint); }
.tint-yellow { background: var(--yellow); }
.tint-pink { background: var(--pink); }
.tint-violet { background: var(--violet); }

/* bleed panels: copy left; the stage takes about 60% of the card and runs to the card's right
   and bottom edges. The product frame on it runs off the right edge (clipped by the stage), and
   the annotation cards sit outside the clip so they can overlap the frame's edges. */
.panel-bleed { grid-template-columns: minmax(0, 1fr) calc(0.62 * (100% + 2 * var(--pad-x)) - var(--pad-x)); }
.stage {
  --sp: clamp(20px, 3.4vw, 40px);
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0 calc(-1 * var(--pad-x)) calc(-1 * var(--pad-b)) 0;
}
.stage-bleed { flex: 1; overflow: hidden; padding: 22px 0 40px var(--sp); border-radius: var(--r-card) 0 var(--r-card) 0; }
.shot {
  --bleed: 140px;
  width: calc(100% + var(--bleed));
  padding: 5px;
  border-radius: var(--r-card);
  background: var(--ink);
  box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 inset, rgba(17, 17, 17, 0.12) 0 0 0 1px, rgba(17, 17, 17, 0.1) 0 16px 32px -12px;
}
.shot .app { border-radius: 7px; }
/* tabs follow the site name, so an annotation on the top edge lands on the clipped end of the bar */
.shot .app-top { grid-template-columns: auto auto minmax(0, 1fr); }
.shot-fit .app-top { grid-template-columns: minmax(0, 1fr) auto; }

/* rank tracker: position line (1 at the top), the top 3 in SEO mint, page 1 / page 2 fold,
   numbered work moments on the line, keyword table; a Maps panel runs off the edge */
.rt-body { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 16px; min-width: 0; padding: 16px 18px 18px; }
.rt-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rt-head b { font-size: 15px; font-weight: 500; letter-spacing: -0.015em; white-space: nowrap; }
.rt-kw { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 28px; padding: 0 8px 0 9px; border-radius: var(--r-btn); background: #fff; box-shadow: var(--inset); font-size: 12px; font-weight: 500; white-space: nowrap; }
.rt-kw .i { width: 13px; height: 13px; color: var(--ash); }
.rt-chart { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: 128px auto; gap: 6px 8px; }
.rt-y { position: relative; }
.rt-y span { position: absolute; right: 0; top: var(--y); transform: translateY(-50%); font-size: 10px; line-height: 1; color: var(--ash); font-variant-numeric: tabular-nums; }
.rt-plot { position: relative; border-bottom: 1px solid var(--hair); }
.rt-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rt-area { fill: rgba(17, 17, 17, 0.04); }
.rt-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rt-band { position: absolute; inset: 0 0 auto; height: 15%; display: flex; align-items: center; padding-left: 8px; border-radius: 3px; background: rgba(10, 168, 143, 0.18); font-style: normal; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.rt-fold { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--stone); font-style: normal; }
.rt-fold span { position: absolute; right: 2px; font-size: 10px; line-height: 1; color: var(--ash); }
.rt-fold span:first-child { bottom: 4px; }
.rt-fold span:last-child { top: 4px; }
.rt-mark, .rt-now { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink); }
.rt-mark { display: grid; place-items: center; width: 16px; height: 16px; box-shadow: 0 0 0 2px #fff; color: #fff; font-style: normal; font-size: 9px; font-weight: 700; line-height: 1; }
.rt-now { width: 10px; height: 10px; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--ink); }
.rt-x { grid-column: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); font-size: 10px; line-height: 1; color: var(--ash); }
.rt-events { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-left: 26px; font-size: 11px; line-height: 1.2; color: var(--ash); }
.rt-events li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rt-events i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-size: 8px; font-weight: 700; line-height: 1; }
.rt-table { display: flex; flex-direction: column; }
.rt-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px 56px 60px; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-bottom: 1px solid var(--hair); font-size: 13px; }
.rt-row:last-child { border-bottom: 0; }
.rt-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-th { height: 26px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); }
.rt-row.sel { border-radius: 6px; border-bottom-color: transparent; background: var(--cream); }
.rt-pos { justify-self: start; display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--pearl); font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-pos.top { background: var(--mint); }
.rt-up { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; font-variant-numeric: tabular-nums; }
.shot .rt-up .i { width: 13px; height: 13px; stroke-width: 2.6; }
.rt-spark { width: 60px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.rt-spark polyline { vector-effect: non-scaling-stroke; }
.rt-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--hair); }
.rt-side b { font-size: 13px; font-weight: 500; white-space: nowrap; }
.rt-map { width: 100%; height: auto; }
.rt-map rect { fill: var(--cream); }
.rt-map .park { fill: rgba(10, 168, 143, 0.22); }
.rt-map .road { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; }
.rt-map .pin { fill: var(--stone); stroke: #fff; stroke-width: 2; }
.rt-map .pin.you { fill: var(--ink); }

/* annotation cards on the frame's edges: the example move over the top edge (above the
   clipped end of the top bar), the weekly check over the left edge (above the empty foot of
   the rail) */
.stage .note-card { z-index: 3; }
.rank-note { top: 30px; right: 28px; flex-direction: column; align-items: flex-start; gap: 5px; width: 200px; padding: 12px 16px 14px; --rot: 2deg; }
.rn-kw { font-size: 12px; line-height: 1.2; color: var(--ash); }
.rn-move { display: flex; align-items: center; gap: 8px; font-size: 26px; line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rn-move s { color: var(--ash); text-decoration-thickness: 1.5px; text-decoration-color: rgba(17, 17, 17, 0.35); }
.rn-move .i { width: 18px; height: 18px; color: var(--ash); }
.rank-note .rn-move b { display: inline-grid; place-items: center; min-width: 38px; height: 32px; margin: 0; padding: 0 10px; border-radius: var(--r-pill); background: var(--mint); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.rn-sub { font-size: 12px; line-height: 1.3; color: var(--ash); }
.week-note { left: calc(var(--sp) - 170px); bottom: 48px; width: 232px; --rot: -2deg; }

/* the other services: the same stage and frame; the frame still runs off the edge, but its
   content keeps a right margin as wide as the bleed, so nothing is cut */
.shot-fit { --bleed: 64px; }
.shot-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px calc(var(--bleed) + 18px) 20px 18px; }
.stage-center { display: flex; flex-direction: column; }
.stage-center .web-mock { flex: 1; padding-right: var(--sp); }
.edge-note { top: 30px; right: 28px; width: 236px; --rot: 2deg; }

@media (max-width: 980px) {
  .panel-bleed { grid-template-columns: minmax(0, 1fr); }
  .shot { --bleed: 56px; }
  .rt-body { grid-template-columns: minmax(0, 1fr); padding-right: calc(var(--bleed) + 18px); }
  .rt-side, .week-note { display: none; }
  .rank-note, .edge-note { right: 16px; }
  .shot .app-top { grid-template-columns: minmax(0, 1fr) auto; }
}
/* phones: the stage becomes a band across the foot of the card, edge to edge, and the frame
   sits wholly inside it, so nothing runs past the card or the screen. The keyword table keeps
   three columns (no trend). The annotation card moves to the frame's bottom edge so the
   example label at the top stays clear. */
@media (max-width: 760px) {
  .stage { --sp: 12px; margin: 0 calc(-1 * var(--pad-x)) calc(-1 * var(--pad-b)); }
  .stage-bleed { padding: 16px var(--sp) 84px; border-radius: 0 0 var(--r-card) var(--r-card); }
  .stage-center { padding-bottom: 24px; }
  .stage-center .web-mock { padding-right: 0; }
  .shot, .shot-fit { --bleed: 0px; padding: 4px; }
  .rt-body { padding: 14px calc(var(--bleed) + 14px) 14px 14px; }
  .rt-head b { font-size: 14px; }
  .rt-chart { grid-template-rows: 108px auto; }
  .rt-events { padding-left: 0; gap: 6px 12px; }
  .rt-row { grid-template-columns: minmax(0, 1fr) 50px 58px; gap: 8px; padding: 0 6px; font-size: 12px; }
  .rt-row > :nth-child(4) { display: none; }
  .rank-note, .edge-note { top: auto; bottom: 14px; right: 12px; }
  .rank-note { width: 196px; padding: 10px 14px 12px; }
  .edge-note { width: 220px; }
  .shot-body { padding: 14px calc(var(--bleed) + 14px) 16px 14px; }
  .rn-move { font-size: 22px; }
  .rank-note .rn-move b { height: 28px; font-size: 19px; }
}
/* example flag: first thing on every demo panel, same size as the panel's column header, in ink */
.mock-flag {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 6px 12px 6px 9px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--inset);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.mock-flag svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.ad-preview { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 10px; box-shadow: var(--inset); }
.ad-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ad-stats div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: var(--cream); }
.ad-stats span { font-size: 12px; color: var(--ash); line-height: 1.25; }
.ad-stats b { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.budget-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--ash); margin-bottom: 8px; }
.meter { height: 8px; border-radius: var(--r-pill); background: var(--pearl); overflow: hidden; }
.meter i { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--ink); }

.web-mock { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 32px); }
.phone { width: 176px; flex: none; padding: 12px 10px 16px; border-radius: 26px; background: #fff; box-shadow: var(--shadow-xl), rgba(17, 17, 17, 0.12) 0 0 0 1px inset; display: flex; flex-direction: column; gap: 10px; }
.ph-notch { width: 54px; height: 6px; margin: 0 auto 4px; border-radius: var(--r-pill); background: var(--ink); }
.ph-nav { display: flex; justify-content: space-between; padding: 0 4px; }
.ph-nav i { display: block; height: 7px; border-radius: 4px; background: var(--pearl); }
.ph-nav i:first-child { width: 48px; background: var(--ink); }
.ph-nav i:last-child { width: 18px; }
.ph-hero { display: flex; flex-direction: column; gap: 6px; padding: 14px 10px; border-radius: 12px; background: var(--cream); }
.ph-hero b { font-size: 15px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.ph-hero span { font-size: 11px; color: var(--ash); }
.ph-hero em { align-self: flex-start; margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 6px; background: var(--ink); color: #fff; }
.ph-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph-cards i { height: 42px; border-radius: 8px; background: var(--pearl); }
.web-scores { display: flex; flex-direction: column; gap: 10px; }
.score, .score-line { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-soft); }
.score { position: relative; }
.score svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.score circle { fill: none; stroke-width: 6; }
.ring-bg { stroke: var(--pearl); }
.ring-fg { stroke: #0aa88f; stroke-linecap: round; stroke-dasharray: 169.6; stroke-dashoffset: 3.4; }
.score b { position: absolute; left: 14px; width: 52px; text-align: center; font-size: 17px; font-weight: 600; }
.score span, .score-line span { font-size: 13px; color: var(--ash); }
.score-line b { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; min-width: 92px; }

.report-mock .rm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--ash); }
.rm-head b { font-size: 15px; font-weight: 500; color: var(--ink); }
.rm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rm-kpis div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: var(--cream); }
.rm-kpis span { font-size: 12px; color: var(--ash); line-height: 1.25; }
.rm-kpis b { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.rm-chart { display: flex; align-items: flex-end; gap: 5px; height: 90px; }
.rm-chart i { flex: 1; height: var(--h); border-radius: 3px; background: var(--violet); }
.rm-chart i:last-child { background: var(--violet-mark); }
.rm-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--cream-2); box-shadow: var(--inset); }
.rm-note p { font-size: 13px; line-height: 1.45; color: var(--ink); }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }

/* ---------- Poster band ---------- */
.poster-section { padding-top: 0; }
.poster-band {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 40px);
  padding: clamp(72px, 10vw, 120px) 24px;
  border-radius: var(--r-card);
  background: var(--midnight); /* flat deep emerald: no washes, no ornaments */
  color: #fff;
  text-align: center;
}
/* one gradient word per poster: brushed logo gold. A brand moment, not a pastel blend;
   no glow, no ornaments. */
.poster-band .grad {
  background: linear-gradient(90deg, var(--gold-lo) 0%, var(--gold-hi) 45%, #b89858 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.poster-act { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.poster-micro { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); max-width: 52ch; }
.poster-band :focus-visible { outline-color: #fff; }

/* ---------- Audience ---------- */
.aud { padding: 8px; border-radius: var(--r-card); background: #fff; box-shadow: var(--inset), var(--shadow-sm); }
.aud-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.aud-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 10px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--cream);
  color: var(--ash);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
/* hand-drawn line illustrations: black outline, a few hatch strokes for fill, and a light
   pencil wobble from the shared #pencil filter. They stay full ink in every state. */
.sketch-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.aud-ill { width: 100%; max-width: 128px; aspect-ratio: 6 / 5; height: auto; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: url(#pencil); transition: transform 0.5s var(--ease-out); }
.aud-ill .hatch, .aud-ill .re { stroke-width: 1.15; }
.aud-tab > span { padding-bottom: 6px; background: no-repeat center bottom / 0 5px; transition: color 0.3s, background-size 0.4s var(--ease-out); }
.aud-tab:hover { color: var(--ink); }
.aud-tab:hover .aud-ill { transform: translateY(-2px) rotate(-1.5deg); }
.aud-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: rgba(17, 17, 17, 0.1) 0 0 0 1px inset, var(--shadow-soft); }
.aud-tab[aria-selected="true"] > span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.4 C 24 2.6, 52 2.2, 72 4 S 92 6.4, 98 3.2' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 5px;
}
.aud-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); padding: clamp(28px, 4.5vw, 48px); }
.aud-panel[hidden] { display: none; }
.aud-panel.enter > * { animation: rise 0.6s var(--ease-out) both; }
.aud-panel.enter > * + * { animation-delay: 80ms; }
.aud-left { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.aud-left .h3 { max-width: 15ch; }
.aud-point + .aud-point { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hair); }
.aud-point h4 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 8px; }
.aud-point p { font-size: 15px; line-height: 1.5; color: var(--ash); }

/* phones: all five business types visible at once, three over two */
@media (max-width: 760px) {
  .aud-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .aud-tab { grid-column: span 2; justify-content: flex-start; gap: 6px; padding: 12px 6px; font-size: 13px; line-height: 1.2; text-align: center; }
  .aud-tab:nth-child(n+4) { grid-column: span 3; }
  .aud-tab .aud-ill { order: -1; max-width: 64px; stroke-width: 2.6; }
  .aud-ill .hatch, .aud-ill .re { stroke-width: 1.6; }
  .aud-tab > span { padding-bottom: 5px; }
  .aud-panel { grid-template-columns: 1fr; }
}

/* ---------- Promises bento ---------- */
.promises { padding-top: clamp(8px, 2vw, 24px); }

/* statement row: alone on its row, narrow left-aligned column, hairline + caption */
.statement { max-width: 640px; margin: 0 0 clamp(96px, 12vw, 136px); }
.statement-text { font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.25rem); font-weight: 400; line-height: 1.12; letter-spacing: -0.03em; text-wrap: pretty; }
.statement figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.4; color: var(--ash); }
.statement-by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.statement figcaption b { font-weight: 500; color: var(--ink); }

.promises .lede { max-width: 64ch; text-wrap: pretty; }

/* the note hangs off the heading's left edge, so it can never sit on a word */
.prom-head { position: relative; }
.hand-note { position: absolute; right: calc(100% + 12px); top: -20px; font-family: var(--font-hand); font-size: 30px; font-weight: 600; line-height: 1; white-space: nowrap; transform: rotate(-10deg); color: var(--ink); pointer-events: none; }
.js .hand-note.reveal { transform: translateY(24px) rotate(-10deg); }
.js .hand-note.reveal.in { transform: rotate(-10deg); }
@media (max-width: 860px) {
  .hand-note { right: auto; left: -2px; top: -38px; font-size: 28px; }
}
/* the bento's own band: white, full-bleed, after the statement row. Its tiles are the cream
   wash (the reference's neutral bento tile), so they read apart from the white step cards on
   the cream canvas below. */
.promises { padding-bottom: 0; }
.prom-band { background: #fff; padding: var(--section-y) 0; }

/* promises: a 3 x 2 grid of equal tiles, each sized by its content. The figure is the anchor
   (heading-lg: 56px, weight 400, line-height 1, -0.05em), its one-line label sits straight under
   it and a small category marker closes the tile, so no tile carries an empty lower half.
   Colour codes services only: the report promise wears the report violet and the four-services
   tile carries the four service markers; promises that hold for every service are cream. */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 20px; border-radius: var(--r-card); background: var(--cream); box-shadow: var(--inset); }
.tile.t-violet { background: var(--violet); box-shadow: none; }
.tile-num {
  display: block;
  font-size: clamp(2.75rem, 2rem + 1.9vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: lining-nums;
  margin-left: -0.04em;
}
.tile-num small { font-size: 0.5em; font-weight: 400; letter-spacing: -0.02em; margin-left: 0.04em; }
.tile-label { margin-top: 12px; font-size: 18px; line-height: 1.3; letter-spacing: -0.018em; color: var(--ink); text-wrap: pretty; }
.tile-foot { margin-top: auto; padding-top: 20px; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.2; color: rgba(17, 17, 17, 0.72); }
.tile-foot .diamond { margin: 0; width: 8px; height: 8px; }
.tile-marks { display: inline-flex; gap: 5px; }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.step { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-card); background: #fff; box-shadow: var(--inset), var(--shadow-sm); }
.step-top { display: flex; justify-content: space-between; align-items: center; min-height: 24px; }
.step-num { font-size: 13px; font-weight: 500; color: var(--ash); font-variant-numeric: tabular-nums; }
.step-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--pearl); }
.step h3 { margin-top: 20px; font-size: 22px; font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.step p { font-size: 15px; line-height: 1.5; color: var(--ash); }
/* the first step is where the owner starts: the featured card shadow over the same hairline, no ink edge */
.step:first-child { box-shadow: var(--hair) 0 0 0 1px inset, var(--shadow-xl); }
.step:first-child .step-num { color: var(--ink); }
.center-cta { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- FAQ ---------- */
/* one centred 760px column on the same axis as the poster and the field below it: open rows
   divided by white hairlines (the dark band's --hair-dark), no filled boxes. Questions are
   body-lg (20px, -0.02em, weight 400); the answer sits under its question in the band's one
   secondary colour, and the open/close mark is a small ringed plus that turns into a cross. */
/* the dark end of the page (FAQ + footer) has one secondary text colour: white at 60%, the
   spec's ghost-button text on dark (Ash is too dim on #111). Primary text stays white. */
.faq, .site-footer { --on-dark-2: rgba(255, 255, 255, 0.6); }
.faq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--hair-dark); }
.faq-item { border-bottom: 1px solid var(--hair-dark); }
.faq-item h3 { font-weight: 400; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
}
.faq-q:focus-visible { outline-offset: 2px; }
.faq-ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.18) 0 0 0 1px inset; color: var(--on-dark-2); transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; }
.faq-ico .i { width: 16px; height: 16px; transition: transform 0.4s var(--ease-out); }
.faq-q:hover .faq-ico { box-shadow: rgba(255, 255, 255, 0.5) 0 0 0 1px inset; color: #fff; }
.faq-item.open .faq-ico { background: #fff; box-shadow: none; color: var(--ink); }
.faq-item.open .faq-ico .i { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.45s var(--ease-out), visibility 0.45s; }
.faq-a > div { overflow: hidden; }
.faq-item.open .faq-a { grid-template-rows: 1fr; visibility: visible; }
.faq-a p { padding: 0 56px 28px 0; font-size: 16px; line-height: 1.6; color: var(--on-dark-2); max-width: 62ch; text-wrap: pretty; }
/* the sceptic's question (open by default): the answer ends on the brief's four promises,
   white facts with a small check, two by two; one column on phones */
.faq-trust .faq-a p { padding-bottom: 18px; }
.faq-promises { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 36px; padding: 0 0 28px; }
.faq-promises li { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.35; color: #fff; }
.faq-promises .i { width: 16px; height: 16px; margin-top: 2px; stroke-width: 2.4; color: var(--on-dark-2); }
@media (max-width: 520px) {
  .faq-q { gap: 16px; padding: 20px 0; font-size: 18px; letter-spacing: -0.015em; }
  .faq-a p { padding-right: 0; padding-bottom: 24px; font-size: 15px; }
  .faq-promises { padding-bottom: 24px; }
  .faq-promises li { font-size: 15px; }
}

/* ---------- Footer / CTA ---------- */
/* FAQ and footer share the ink band with no seam and no rule between them. The FAQ ends on its
   own closing line ("Staat je vraag er niet bij?"); the close is its own stage after that. The
   room sits above the shout, not below it, as on the reference footer (about 220px over the
   poster, 100px under the ask): about 235px of dark from the FAQ's last line to the poster's
   letters and 100px from the strip under the field (the last thing in the ask) to the footer
   rule at 1440 (about 140 / 80 on phones). The shout starts a new beat instead of trailing the FAQ, and the ask leads
   straight into the footer instead of floating in a void. The poster is about 1.2x the 460px
   field and sits 28px above it, so headline and field land as one unit. */
.faq { padding-bottom: 0; }
.faq .lede { color: var(--on-dark-2); }
.faq-end { margin-top: 32px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--on-dark-2); }
.faq-end a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; overflow-wrap: anywhere; transition: text-decoration-color 0.25s ease; }
.faq-end a:hover { text-decoration-color: #fff; }
.site-footer { padding: 0 0 32px; box-shadow: 0 -2px 0 var(--ink); } /* the shadow closes any sub-pixel seam with the FAQ at fractional zoom */
.site-footer [hidden] { display: none !important; }
.cta-block { display: flex; flex-direction: column; align-items: center; padding-top: clamp(136px, 16vw, 228px); text-align: center; }
/* the closing shout, set as a poster block: 64px at desktop, weight 900, uppercase, -0.03em
   tracking, 0.88 leading and word spaces pulled in by 0.05em, so the two lines ("KLAAR OM
   GEVONDEN / TE WORDEN?", the most even two-line break) lock into one dense block about 675px
   wide over the 460px field. On phones the same block breaks into three near-equal lines (KLAAR
   OM / GEVONDEN / TE WORDEN?) sized so the widest line runs the width of the field (about 58px
   at 390). DM Sans at its largest optical size (opsz 40, the automatic pick at this size) is
   spaced so tightly that 900-weight caps touch (AA, LA, EV, VO); its text optical size (opsz 20)
   keeps the same letters with open sidebearings, so every letter stands apart at this tracking,
   checked pixel by pixel at 1440 and 390, 1x and 2x. The one exception is A next to A: their flat
   feet have no sidebearing at all, so the AA in KLAAR gets a small optical kern (.kern) instead
   of loosening the whole line.
   The negative margin trims the line box below the caps, so the field sits close under the letters */
.poster-footer { font-size: clamp(2.5rem, calc((100vw - 2 * var(--gutter)) * 0.162), 4rem); line-height: 0.88; letter-spacing: -0.03em; word-spacing: -0.05em; font-variation-settings: 'opsz' 20; max-width: 11em; margin-bottom: -0.1em; text-wrap: balance; }
.poster-footer .kern { margin-right: 0.018em; } /* just enough to part the flat A feet; more reads as a word gap */
/* same gold word as the mid-page poster */
.poster-footer .grad {
  background: linear-gradient(90deg, var(--gold-lo) 0%, var(--gold-hi) 45%, #b89858 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the ask: the hero's .capture component, same size and shape (460px, one 48px field, 1px
   hairline, 12px radius, button joined inside at the right, same label), in the reference
   footer's dark skin: a Charcoal field (#272625, as measured on amplemarket.com) with a grey
   hairline and a white button. No colour: the chrome stays achromatic like the rest of the band.
   As on the reference footer, the field sits on a slightly lifted neutral plate (white at 5% on
   #111, so #1d1d1d) that runs on below it as one thin strip with a single centred 13px line.
   Headline, field and that line are the whole ask: nothing sits loose underneath it. */
.scan { display: flex; flex-direction: column; align-items: center; width: min(460px, 100%); }
.scan-unit { display: flex; flex-direction: column; width: 100%; margin-top: 28px; border-radius: var(--r-card); background: rgba(255, 255, 255, 0.05); }
.scan-unit .capture { position: relative; z-index: 1; width: 100%; margin-top: 0; }

.capture-dark { background: var(--charcoal); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
.capture-dark:focus-within { border-color: rgba(255, 255, 255, 0.5); box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 4px; }
.capture-dark.is-invalid { border-color: #ff8a73; }
.capture-dark input { color: #fff; caret-color: #fff; }
.capture-dark input::placeholder { color: var(--on-dark-2); }
.capture-dark input::selection { background: rgba(255, 255, 255, 0.28); color: #fff; }
/* one field on show at a time; the next one slides in where the last one was */
.scan-slot { display: flex; flex: 1 1 auto; min-width: 0; }
.scan-slot.enter input { animation: slot-in 0.5s var(--ease-out); }
@keyframes slot-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
/* browser autofill keeps the dark field instead of painting it pale */
.capture-dark input:-webkit-autofill,
.capture-dark input:-webkit-autofill:hover,
.capture-dark input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  box-shadow: 0 0 0 1000px var(--charcoal) inset;
  transition: background-color 9999s ease 0s;
}

/* the strip: one centred 13px line that carries the whole deal, "1 E-mail > 2 Website > 3 gratis
   verbeterpunten binnen 48 uur": the two steps, both named from the start, then what arrives.
   Small arrows join the parts. A step is todo (ringed number, secondary name), current (white
   disc, white name: the visible label of the field on show) or done (a check, the answer in
   white, cut short with an ellipsis if long, and "Wijzig"). When the line does not fit (phones,
   a long answer) main.js sets .is-wrapped and the promise takes a second centred line in the
   same strip, without its arrow. */
.scan-tray { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 4px; padding: 10px 12px 11px; font-size: 13px; line-height: 18px; color: var(--on-dark-2); }
.scan-steps { display: flex; flex: 0 1 auto; justify-content: center; align-items: center; min-width: 0; }
.sstep { display: flex; flex: none; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; transition: color 0.25s ease; }
.tray-arrow { width: 12px; height: 12px; margin-left: 7px; stroke-width: 2; }
.sstep-mark { position: relative; display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.3) 0 0 0 1px inset; font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; }
.sstep-mark .i { display: none; width: 11px; height: 11px; stroke-width: 2.6; }
.sstep-val, .sstep-edit { display: none; }
.sstep[data-state="current"] { color: #fff; }
.sstep[data-state="current"] .tray-arrow { color: var(--on-dark-2); }
.sstep[data-state="current"] .sstep-mark { background: #fff; box-shadow: none; color: var(--ink); }
.sstep[data-state="done"] { flex: 0 1 auto; }
.sstep[data-state="done"] .sstep-mark { background: rgba(255, 255, 255, 0.14); box-shadow: none; color: #fff; }
.sstep[data-state="done"] .sstep-n,
.sstep[data-state="done"] .sstep-label { display: none; }
.sstep[data-state="done"] .sstep-mark .i { display: block; }
.sstep[data-state="done"] .sstep-val { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: #fff; }
.sstep[data-state="done"] .sstep-edit { display: block; }
.sstep-edit { flex: none; margin: -6px 0; padding: 6px 0; border: 0; background: none; font-size: inherit; line-height: inherit; color: var(--on-dark-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; cursor: pointer; transition: color 0.25s ease, text-decoration-color 0.25s ease; }
.sstep-edit:hover { color: #fff; text-decoration-color: #fff; }
.tray-mail { flex: 0 1 auto; min-width: 0; text-align: center; text-wrap: balance; }
.scan-promise { display: flex; flex: none; align-items: center; gap: 7px; white-space: nowrap; }
.scan-tray.is-wrapped .scan-promise { flex: 1 0 100%; justify-content: center; white-space: normal; text-align: center; text-wrap: balance; }
.scan-tray.is-wrapped .scan-promise .tray-arrow { display: none; }
.scan-live { max-width: 520px; }
.capture .btn:disabled { cursor: progress; opacity: 0.7; }
/* an error joins the strip inside the unit, on its own centred line */
.scan-error { padding: 0 16px 12px; font-size: 13px; line-height: 18px; text-align: center; color: #ff9d88; text-wrap: balance; }
.scan-error:empty { display: none; }
.scan-error a { color: #fff; text-underline-offset: 3px; }
.scan-live { width: 100%; }
.scan-status { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 16px; border-radius: var(--r-card); background: var(--charcoal); box-shadow: rgba(255, 255, 255, 0.06) 0 0 0 1px inset; text-align: left; font-size: 14px; line-height: 1.5; color: var(--on-dark-2); }
#scanDone { margin-top: 28px; } /* takes the field's place */
.scan-status-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #fff; color: var(--ink); }
.scan-status-icon .i { width: 15px; height: 15px; }
.scan-status-title { margin-bottom: 2px; font-size: 15px; font-weight: 500; color: #fff; }
.scan-status-title:focus { outline: none; }
.scan-status b { font-weight: 500; color: #fff; overflow-wrap: anywhere; }
.scan-status a { color: #fff; text-underline-offset: 3px; overflow-wrap: anywhere; }
.scan-copy { margin-top: 10px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-btn); background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 13px; cursor: pointer; transition: background-color 0.25s ease; }
.scan-copy:hover { background: rgba(255, 255, 255, 0.18); }

.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 32px; margin-top: clamp(80px, 7vw, 100px); padding-top: 48px; border-top: 1px solid var(--hair-dark); }
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-brand p { font-size: 14px; line-height: 1.55; color: var(--on-dark-2); max-width: 34ch; }
.brand-light { color: #fff; }
.footer-col h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col span { font-size: 15px; color: var(--on-dark-2); text-decoration: none; transition: color 0.25s ease; }
.footer-col a:hover { color: #fff; }
.contact-list li { display: flex; align-items: center; gap: 10px; }
.contact-list .i { width: 16px; height: 16px; color: var(--on-dark-2); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; font-size: 13px; color: var(--on-dark-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: #fff; }

/* ---------- Floating CTA (Gleap glass) ---------- */
.float-cta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: var(--shadow-glass), var(--inset);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.55s var(--ease-out);
}
.float-cta.show { opacity: 1; transform: none; pointer-events: auto; }
.float-arrow { width: 32px; height: 32px; border-radius: var(--r-btn); display: grid; place-items: center; background: var(--ink); color: #fff; }
.float-arrow .i { width: 16px; height: 16px; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--delay, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* phones and tablets: the scan button stays in the bar, the language switch moves into the menu */
  .nav-links, .nav-actions > .lang { display: none; }
  .menu-btn { display: grid; }
  .app-top { grid-template-columns: minmax(0, 1fr) auto; }
  .app-tabs { display: none; }
  .app-main { grid-template-columns: minmax(0, 1fr); }
  .app-rail { display: none; }
  .scan-head { flex-direction: column; align-items: flex-start; }
  .scan-checked { justify-content: flex-start; }
  .media-note { margin-top: 20px; }
  .calc { grid-template-columns: 1fr; }
  .calc-result { border-left: 0; border-top: 1px solid var(--hair); border-radius: 0 0 var(--r-card) var(--r-card); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .fact-grid { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
  .fact { min-height: 0; gap: 10px; padding: 26px 12px 22px; }
  .fact:nth-child(odd) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .fact-num { font-size: 2.5rem; }
  .fact-line { font-size: 14px; }
  .pain-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .web-mock { flex-direction: column; }
  .web-scores { width: 100%; }
  .hero-media { padding: 4px; }
  .app { border-radius: 8px; }
  .app-content { gap: 12px; padding: 14px 12px 12px; }
  .scan-points { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
  .sp { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; }
  .sp-title { min-height: 0; }
  .sp-chips { align-self: flex-start; }
  .sp-viz { max-width: 380px; }
  /* on a phone the report opens on point 01; 02 and 03 are folded to their headline */
  .app .sp-chev { display: block; }
  .sp:first-child .sp-chev { transform: rotate(180deg); }
  .sp:not(:first-child) { gap: 6px; }
  .sp:not(:first-child) :is(.sp-metric, .sp-viz, .sp-fix, .sp-chips) { display: none; }
  .scan-foot { display: none; }
  /* annotations become one short row of pills under the frame */
  .hero-stage { gap: 8px; }
  .hero-stage .note-card { flex: 0 1 auto; align-items: center; gap: 7px; margin-top: 6px; padding: 5px 11px 5px 5px; border-radius: var(--r-pill); }
  .hero-stage .note-card b { margin: 0; font-size: 12px; font-weight: 500; white-space: nowrap; }
  .hero-stage .note-card b + span { display: none; }
  .hero-stage .note-ico { margin: 0; }
}

@media (max-width: 520px) {
  .tile { padding: 18px 16px 16px; }
  .tile-label { margin-top: 8px; font-size: 15px; }
  .tile-foot { padding-top: 16px; font-size: 13px; }
  .tile-marks { gap: 4px; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { gap: 36px 16px; }
  .footer-grid .footer-col:last-child { grid-column: 1 / -1; }
  .capture .btn { padding: 0 14px; }
  .capture input { padding: 0 12px; }
  .faq-promises { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero-proof li + li::before { display: none; }
  .announce { font-size: 12px; gap: 6px; padding-right: 10px; }
  .announce .i { display: none; }
  .app-top { gap: 10px; height: 46px; padding: 0 10px; }
  .app-range { display: none; }
  .scan-head { gap: 8px; padding-bottom: 12px; }
  .scan-title { font-size: 20px; }
  .scan-checked { display: none; }
  .sp-metric b { font-size: 26px; }
  .ad-stats, .rm-kpis { grid-template-columns: 1fr 1fr; }
  .ad-stats div:last-child, .rm-kpis div:last-child { grid-column: 1 / -1; }
  .float-cta { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
  /* phone bar: brand, a compact scan button, menu */
  .nav { gap: 12px; }
  .nav-actions { gap: 4px; }
  .site-header.is-floating .nav { padding-right: 4px; }
  .brand-name { font-size: 16px; }
  .nav-cta { height: 36px; padding: 0 12px; font-size: 14px; }
}

/* narrow phones: the wordmark stacks so the scan button keeps its full label */
@media (max-width: 385px) {
  .nav .brand { gap: 8px; }
  .nav .brand-name { font-size: 15px; }
}

/* very narrow phones: stack the capture, keeping the field its full 48px */
@media (max-width: 340px) {
  .capture { flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 4px; }
  .capture input { flex: none; border-radius: var(--r-card) var(--r-card) 0 0; }
  .capture .btn { margin: 0 4px; }
}

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