/* =========================================================================
   Modern Playbook
   =========================================================================
   One stylesheet, no build step, no framework. Tokens first, then base, then
   components in roughly the order they appear down the page.

   Palette A, "Clean Optimist": a white page with soft blue and green fades in
   the corners, white cards lifting off it on ink-tinted shadows. Sections are
   separated by spacing and by the cards themselves, never by solid bands —
   the one exception is the final CTA, which is deliberately the single dark
   object on the page.

   Every text pairing carries its measured contrast ratio on white in a
   comment. If you add a pairing, measure it (see _tmp-contrast.mjs) — do not
   eyeball it.
   ========================================================================= */

/* ---------- fonts --------------------------------------------------------
   Self-hosted, latin subset, variable. Two files cover every weight on the
   page, which is why there are no separate bold files. font-display: swap so
   a slow font never blocks first paint; the fallback stacks are chosen for
   similar x-heights so the swap is not violent.

   Self-hosting rather than the Google Fonts <link> saves two third-party
   connections on first load (googleapis for the CSS, gstatic for the files),
   which on a page that sells speed is the whole point.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ------------------------------------------------------- */
:root {
  color-scheme: light;

  /* ---- ink -------------------------------------------------------------
     Ratios are against white (#fff). The page ground --bg is a hair darker
     and every ratio below still clears the same threshold on it. */
  --ink-0: #15181d;   /* 17.6:1  headings */
  --ink-1: #242a33;   /* 14.5:1  body */
  --ink-2: #5b6472;   /*  6.0:1  muted body, captions */
  --ink-3: #8b93a2;   /*  3.1:1  FAILS as text. Decorative only: slot labels,
                                 the dots in the device chrome. Never carries
                                 information a visitor needs. */

  /* ---- surfaces -------------------------------------------------------- */
  --surface: #ffffff;   /* cards, panels, the header plate */
  --bg:      #f6f9fd;   /* the page ground inside the device, input wells */
  --line:    #e6ebf2;   /* hairlines */
  --line-2:  #eef2f8;   /* fainter hairlines, skeleton bars */

  /* ---- blue, the primary ----------------------------------------------
     The brief's #1676ff is 4.1:1 on white: fine for the H1 accent (large
     text needs 3:1), for icons and for fills, but it FAILS for small text and
     for white button labels. So small blue text and the button gradient use
     the deeper stops. Do not lighten them. */
  --blue-500: #1676ff;  /*  4.1:1  H1 accent, icons, fills, focus ring */
  --blue-550: #1169f0;  /*  4.9:1  the button gradient's LIGHT stop */
  --blue-600: #0b5bd6;  /*  6.0:1  small blue text, link hover, button dark stop */
  --blue-050: #e8f1ff;  /* tint */
  --blue-100: #cfe1ff;  /* tint, stronger */

  /* ---- green, for reviews and positive signals -------------------------
     2.7:1 on white, so it is never text. Green text is --green-ink. */
  --green-500: #16b364;
  --green-050: #e4f7ee;
  --green-ink: #06502f; /* 10.3:1 */

  /* Gold: stars, and the #1 slot in the device. Never text. */
  --gold-400: #e3a008;
  --violet-500: #7c3aed; /* fills only: the AI Search tile in the Services menu */
  --violet-600: #6d28d9;
  --gold-050: #fbeec4;

  /* ---- type ------------------------------------------------------------ */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --fs-h1:   clamp(2.1rem, 1.1rem + 3.9vw, 3.3rem);
  --fs-h2:   clamp(1.6rem, 1.1rem + 1.9vw, 2.2rem);
  --fs-h2-sm:clamp(1.4rem, 1rem + 1.5vw, 1.95rem);
  --fs-h3:   1.12rem;
  --fs-lead: 1.1rem;
  --fs-body: 1rem;
  --fs-sm:   .93rem;
  --fs-micro:.84rem;

  /* ---- rhythm ---------------------------------------------------------- */
  --maxw: 1120px;
  --pad-x: 20px;
  --header-h: 64px;
  --sec-y: clamp(52px, 6vw, 72px);
  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 11px;
  --radius-pill: 999px;

  /* ---- shadows ---------------------------------------------------------
     Layered and ink-tinted (the navy of the brand, not neutral black), at low
     opacity. A flat grey rgba(0,0,0,.1) box-shadow is the tell of a template;
     tinting it the colour of the page's own ink is what makes a card look lit
     rather than pasted. */
  --shadow-soft: 0 1px 2px rgba(21, 40, 74, .05), 0 6px 18px rgba(21, 40, 74, .07);
  --shadow-lift: 0 2px 6px rgba(21, 40, 74, .06), 0 18px 44px rgba(21, 40, 74, .10);
  --shadow-pop:  0 4px 10px rgba(21, 40, 74, .08), 0 28px 60px rgba(21, 40, 74, .14);
  --shadow-blue: 0 10px 22px rgba(22, 118, 255, .30);

  /* Easing. A mild overshoot on hovers reads as "optimistic"; entrances use
     the plain ease-out so nothing the visitor is reading wobbles. */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The sticky header would otherwise cover the target of every in-page link. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;              /* nothing may scroll sideways, ever */
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-1);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-left:  max(0px, env(safe-area-inset-left, 0px));
  padding-right: max(0px, env(safe-area-inset-right, 0px));
}

/* The fades. Four soft radial gradients, blue and green, at 10-13% alpha,
   pinned to the viewport corners. A fixed element gets its own compositor
   layer, so scrolling never repaints it; it is drawn once and slid. No solid
   colour bands anywhere else — this is the only thing colouring the ground. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(840px 580px at 9% 1%,   rgba(22, 118, 255, .13), transparent 60%),
    radial-gradient(780px 580px at 95% 7%,  rgba(22, 179, 100, .13), transparent 60%),
    radial-gradient(760px 620px at 90% 70%, rgba(22, 118, 255, .10), transparent 62%),
    radial-gradient(740px 600px at 3% 88%,  rgba(22, 179, 100, .10), transparent 62%);
}

img, svg, video, canvas { max-width: 100%; }
img { height: auto; display: block; }
svg { display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink-0);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--blue-600); text-underline-offset: 3px; }
a:hover { color: var(--ink-0); }

/* One focus treatment for the whole site. :focus-visible only, so a mouse
   click never leaves a ring behind, but every keyboard path is visible. */
:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--blue-100); color: var(--ink-0); }

.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, visible only once focused. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink-0); color: #fff; padding: 10px 16px;
  border-radius: 10px; font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease-out);
}
.skip:focus { top: 12px; color: #fff; }

/* ---------- layout ------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left:  max(var(--pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
}
.section { padding-block: var(--sec-y); }

/* ---------- type helpers ------------------------------------------------- */
.h2 { font-size: var(--fs-h2); font-weight: 800; }
.h2--sm { font-size: var(--fs-h2-sm); }
.h3 { font-size: var(--fs-h3); font-weight: 700; }

.lead  { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }

/* The eyebrow: a small blue label with a green dot, which is how the
   prototype signposts every section. Set in the deeper blue because the
   brand blue is 4.1:1 and 12px type needs 4.5. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-500);
  flex: none;
}

/* ---------- buttons ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  /* Never transition-all. Only what moves, plus the colours that swap. */
  transition: transform .22s var(--ease-spring),
              box-shadow .22s var(--ease-out),
              background-color .16s linear,
              border-color .16s linear,
              color .16s linear;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .06s; }

.btn--primary {
  /* The light stop is the lightest blue in the brand hue that still carries
     white at 4.5:1 (#1169f0, 4.9:1); the dark stop is the hover blue. The
     brief's flat #1676ff would fail for the label. */
  background: linear-gradient(135deg, var(--blue-550), var(--blue-600));
  color: #fff;
  box-shadow: 0 1px 2px rgba(11, 91, 214, .25), 0 6px 16px rgba(22, 118, 255, .22);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--blue-600), #0a50bd);
  color: #fff;
  box-shadow: var(--shadow-blue);
}

.btn--ghost {
  background: rgba(255, 255, 255, .7);
  color: var(--ink-0);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--surface);
  border-color: var(--blue-500);
  color: var(--blue-600);
  box-shadow: var(--shadow-soft);
}

/* On the dark final band the ghost needs re-lighting. */
.btn--onink {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
}
.btn--onink:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .4); }

.btn--block { width: 100%; }
.btn--sm { padding: 10px 18px; font-size: var(--fs-sm); }

.ctagroup { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ---------- header ------------------------------------------------------- */
.header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  background: rgba(246, 249, 253, .86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-2);
  transition: background-color .2s linear, box-shadow .2s linear, border-color .2s linear;
}
/* Scrolled: the plate firms up and lifts. The height never changes — a
   sticky bar that shrinks moves the whole document under it and that shift
   counts toward CLS. */
.header[data-scrolled] {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(21, 40, 74, .03), 0 8px 24px rgba(21, 40, 74, .06);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: max(var(--pad-x), env(safe-area-inset-left, 0px));
}

/* The lockup: the real MP monogram as an image, the wordmark as live text.
   Live text rather than the full logo PNG because at a 64px bar the
   three-line lockup would be illegible, and because text stays crisp,
   selectable and translatable. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-0);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.logo:hover { color: var(--ink-0); }
.logo:hover .logo__mark { transform: translateY(-1px); }
.logo__mark {
  flex: none;
  width: 180px; height: 32px;   /* the wide lockup is 1400x248, so 5.65:1 */
  transition: transform .22s var(--ease-spring);
}
.footer .logo__mark { width: 158px; height: 28px; }

.nav { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.nav a {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color .14s linear, color .14s linear;
}
.nav a:hover { background: var(--blue-050); color: var(--ink-0); }
.nav .btn { display: none; }        /* the drawer's own CTA; desktop has .header__cta */
/* `.nav a` outranks `.btn--primary`, which would leave the drawer's button
   label in muted ink on blue. Restate the button's own colours here. */
.nav .btn--primary, .nav .btn--primary:hover { background: linear-gradient(135deg, var(--blue-550), var(--blue-600)); color: #fff; }

.header .btn { padding: 11px 20px; font-size: .95rem; }
.header__cta { margin-left: auto; }

/* Mobile nav toggle, hidden on desktop where the links are inline. */
.navtoggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink-0);
}
.navtoggle:hover { background: var(--surface); border-color: var(--blue-500); }

@media (max-width: 860px) {
  .navtoggle { display: inline-flex; margin-left: auto; }
  .header__cta { margin-left: 0; padding: 10px 16px; }
  .nav { margin-left: 0; }
  .nav {
    position: fixed;
    inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px var(--pad-x) 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    /* Collapsed by default. Transform rather than display so it can animate,
       and visibility so it leaves the tab order when closed. */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform .24s var(--ease-out), opacity .18s linear, visibility 0s .24s;
  }
  .nav[data-open] {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform .26s var(--ease-spring), opacity .18s linear, visibility 0s;
  }
  .nav a { padding: 13px 12px; font-size: 1.05rem; }
  .nav .btn { display: inline-flex; margin-top: 10px; }
}
@media (max-width: 400px) {
  .header__cta { display: none; }   /* the drawer carries it instead */
}

/* ---------- services menu ------------------------------------------------
   A button in the bar opens a small panel with the three service pages.
   Hover or click on desktop, a plain list inside the phone drawer. */
.nav__group { position: relative; }
.nav__btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border: 0; border-radius: 10px;
  background: transparent; font: inherit; font-size: .92rem; font-weight: 500;
  color: var(--ink-2); cursor: pointer;
  transition: background-color .14s linear, color .14s linear;
}
.nav__btn:hover, .nav__btn[aria-expanded="true"] { background: var(--blue-050); color: var(--ink-0); }
.nav__btn svg { width: 14px; height: 14px; transition: transform .2s var(--ease-out); }
.nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu {
  position: absolute; left: 0; top: calc(100% + 8px);
  min-width: 280px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(-6px); visibility: hidden;
  transition: opacity .16s linear, transform .2s var(--ease-out), visibility 0s .2s;
}
.nav__group[data-open] .menu {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .16s linear, transform .22s var(--ease-spring), visibility 0s;
}
.nav .menu a {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center;
  padding: 9px 10px; border-radius: 10px; color: var(--ink-0); text-decoration: none;
}
.nav .menu a:hover { background: var(--blue-050); color: var(--ink-0); }
/* The tiles are spans too, so the text rules below are scoped with
   :not(.menu__ic); an unscoped `.menu a span` once un-centred and greyed
   the icons. Solid saturated tiles, white glyph, one colour per service. */
.menu__ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); box-shadow: 0 1px 2px rgba(11, 91, 214, .25); }
.menu__ic--green { background: linear-gradient(135deg, var(--green-500), var(--green-ink)); box-shadow: 0 1px 2px rgba(6, 80, 47, .25); }
.menu__ic--violet { background: linear-gradient(135deg, var(--violet-500), var(--violet-600)); box-shadow: 0 1px 2px rgba(109, 40, 217, .25); }
.menu__ic svg { width: 19px; height: 19px; display: block; }
.menu a > span:not(.menu__ic) { display: block; min-width: 0; }
.menu a b { display: block; font-size: .9rem; font-weight: 700; color: var(--ink-0); }
.menu a > span:not(.menu__ic) > span { display: block; margin-top: 1px; font-size: .76rem; font-weight: 400; color: var(--ink-2); }
.nav a[aria-current="page"], .nav__group[data-current] .nav__btn { color: var(--ink-0); font-weight: 600; }
@media (max-width: 860px) {
  .nav__group { display: contents; }
  .nav__btn { display: none; }
  .menu { position: static; min-width: 0; padding: 0 0 6px; border: 0; box-shadow: none; opacity: 1; transform: none; visibility: visible; }
  .nav .menu a { padding: 11px 12px; }
}

/* ---------- inner-page hero --------------------------------------------
   Copy left, the page's scene right: the matching "What we do" animation,
   scaled up to the column by motion.js (--k = column width / 340). */
.phero { padding-block: 44px 56px; }
.phero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 860px) { .phero__grid { grid-template-columns: 1fr; gap: 30px; } }
.phero h1 {
  margin: 14px 0 16px;
  font-size: clamp(2rem, 1.1rem + 3vw, 2.9rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.025em;
}
.phero .lead { max-width: 42ch; }
.phero .ctagroup { margin-top: 24px; }
.phero__art { position: relative; width: 100%; max-width: 560px; justify-self: end; aspect-ratio: 340 / 150; }
@media (max-width: 860px) { .phero__art { justify-self: stretch; max-width: none; } }
.phero__art .illo {
  position: absolute; left: 0; top: 0; width: 340px; height: 150px; margin: 0;
  transform-origin: top left; transform: scale(var(--k, 1));
  box-shadow: var(--shadow-lift); border-color: var(--line);
}

/* ---------- steps (a real sequence) ------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 30px; }
.step { padding: 22px 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.step__n {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue-600); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .9rem;
}
.step h3 { margin: 12px 0 6px; font-size: var(--fs-h3); font-weight: 700; }
.step p { font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- icon cards ("what you get") --------------------------------- */
.ic { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 11px; background: var(--blue-050); color: var(--blue-600); }
.ic svg { width: 22px; height: 22px; }
.card--green .ic { background: var(--green-050); color: var(--green-ink); }

/* ---------- comparison table (pricing) ---------------------------------- */
.compare { margin-top: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow: hidden; }
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); font-size: var(--fs-sm); }
.compare thead th { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: var(--bg); }
.compare thead th:last-child { color: var(--blue-600); }
.compare tbody th { font-weight: 600; color: var(--ink-0); }
.compare tbody td { color: var(--ink-1); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .yes { color: var(--green-ink); font-weight: 600; }
.compare .no { color: var(--ink-2); }
@media (max-width: 720px) { .compare { overflow-x: auto; } .compare table { min-width: 560px; } }

/* ---------- facts (about) ------------------------------------------------ */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; margin-top: 26px; }
.facts div { padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.facts dd { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-0); }

/* A single tier on a service page sits centred and narrow. */
.tiers--one { grid-template-columns: 1fr; max-width: 380px; }

/* ---------- hero ---------------------------------------------------------
   Copy left, the device right. The device is the one memorable object on the
   page; everything around it is kept quiet so it can be. */
.hero { position: relative; overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 44px;
  align-items: center;
  padding-block: 56px 72px;
}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 36px; padding-block: 36px 48px; }
}

.hero__h1 {
  margin: 16px 0;
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.025em;
}
/* 4.1:1 on white. Fine here: this is display type, well over the 3:1 that
   large text needs. The same colour is not used for small text anywhere. */
.hero__h1 .hl { color: var(--blue-500); }

.hero__sub {
  max-width: 36ch;
  margin-bottom: 26px;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  list-style: none;
}
.trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-2);
}
.trust svg { width: 17px; height: 17px; flex: none; color: var(--green-500); }

.founder {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 22px;
  font-size: var(--fs-micro);
  color: var(--ink-2);
}

/* ---- image slots ----
   Every place a real photograph or screenshot goes later is marked the same
   way: a dashed outline on a faint diagonal hatch, with its final box size
   reserved, so dropping the real file in shifts nothing. */
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  border: 1.5px dashed #bcd0ec;
  border-radius: 14px;
  background:
    repeating-linear-gradient(45deg, rgba(22, 118, 255, .04), rgba(22, 118, 255, .04) 10px,
                              transparent 10px, transparent 20px);
  color: var(--ink-3);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
}
/* The founder's photograph, deliberately small: a 44px disc in the hero
   line, 56px in the About chip, 96px at most on the About page. The owner
   does not want a large portrait anywhere. */
.founder__img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--surface), 0 2px 8px rgba(21, 40, 74, .18); }
.founder--chip { margin: 0 0 18px; font-size: var(--fs-sm); line-height: 1.35; }
.founder--chip .founder__img { width: 56px; height: 56px; }
.founder--chip b { display: block; color: var(--ink-0); font-weight: 700; }
.founder__img--lg { display: block; width: 96px; height: 96px; margin: 0 auto 18px; }
.phero__center { max-width: 64ch; margin-inline: auto; text-align: center; }
.phero__center .eyebrow { justify-content: center; }
.phero__center .lead { margin-inline: auto; }
.phero__center .ctagroup { justify-content: center; }
.slot--avatar {
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ---- the device ----
   A browser frame holding a Google results page, at the width of a phone
   screen: the search pill, the tab row, an AI Overview, a map strip and a
   four-row local pack. Everything in it is real text and CSS — nothing is an
   image except the brand's own M on the client's row. The client's row is
   the one that moves. */
.device {
  position: relative;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.device__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 12px;
}
.device__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.device__url {
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px solid var(--line-2);
  font-size: .72rem;
  color: var(--ink-2);
}

/* The page inside the browser. Google's page is white; the device frame is
   also white, so the stage takes a hairline and the faint ground to read as
   a page within a window. */
.stage {
  padding: 12px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  font-family: var(--font);     /* the Google page is a sans UI, not display type */
  color: var(--ink-1);
}

.gtop { display: flex; align-items: center; gap: 12px; }
.gtop__g { flex: none; width: 26px; height: 26px; }
.search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  font-size: .9rem;
  color: var(--ink-0);
}
.search svg { flex: none; width: 15px; height: 15px; color: var(--ink-2); }
.search__x { margin-left: auto; color: var(--ink-3); font-size: .9rem; }

.tabs {
  display: flex;
  gap: 16px;
  margin: 10px 0 0;
  padding: 0 2px;
  border-bottom: 1px solid var(--line-2);
  font-size: .76rem;
  color: var(--ink-2);
}
.tabs span { padding: 4px 0 7px; }
.tabs span:first-child {
  color: var(--blue-600);
  font-weight: 600;
  border-bottom: 2.5px solid var(--blue-500);
  margin-bottom: -1px;
}

.pack__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 12px 0 8px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-0);
}
.pack__head small { font-size: .72rem; font-weight: 500; color: var(--ink-2); }

/* The map. An inline SVG in Google's map language — land, a river, a park,
   white streets, one yellow A-road with its green shield, and the pins, yours
   in blue. A few hundred bytes, no request, fixed height so nothing shifts. */
.mapwrap { height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); }
.map { width: 100%; height: 100%; display: block; }

/* The local pack: four fixed 60px slots on a 68px pitch, so the moving row
   has known geometry and nothing reflows. */
.pack {
  --slot: 60px;
  --gap: 8px;
  position: relative;
  height: calc(4 * var(--slot) + 3 * var(--gap));
  margin-top: 10px;
}
.row {
  position: absolute;
  left: 0; right: 0;
  height: var(--slot);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  will-change: transform;
}
.row:nth-child(1) { top: 0; }
.row:nth-child(2) { top: calc(1 * (var(--slot) + var(--gap))); }
.row:nth-child(3) { top: calc(2 * (var(--slot) + var(--gap))); }
.row:nth-child(4) { top: calc(3 * (var(--slot) + var(--gap))); }
.row > div:first-child { min-width: 0; }   /* lets the text column shrink so the pills never clip */
.row__name { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--ink-0); line-height: 1.2; white-space: nowrap; }
.row__meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: .72rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.row__meta > span:last-child { flex: none; }
.row__name { overflow: hidden; text-overflow: ellipsis; }
.row__meta b { font-weight: 600; color: var(--ink-1); }
.row__stars { display: inline-flex; flex: none; gap: 1px; }
.row__stars svg { flex: none; width: 11px; height: 11px; }
.row__stars svg path { fill: #d7dde8; }
.row__stars svg[data-on] path { fill: var(--gold-400); }
.row__open { color: var(--green-ink); font-weight: 600; }
.row__shut { color: #b3261e; font-weight: 600; }
.row__acts { display: flex; gap: 6px; }
.row__acts span {
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: .68rem;
  font-weight: 600;
  color: var(--blue-600);
}
/* Narrow desktop and small tablets (the device shares the row with the copy
   and is only ~440px wide): one pill per row, so the meta line keeps its words. */
@media (min-width: 861px) and (max-width: 960px) {
  .row__acts { display: none; }                  /* the device is ~430px here: no room for pills at all */
}
@media (min-width: 961px) and (max-width: 1120px) {
  .row__acts span:last-child { display: none; }
}
/* Narrow phones: the pills go (as in Google's own mobile pack), the meta line
   is allowed a second line and the slot grows to hold it, and the AI Overview
   reserves three lines instead of two. hero.js reads --slot at runtime. */
@media (max-width: 440px) {
  .row__acts { display: none; }
  .pack { --slot: 66px; }
  .row__meta { flex-wrap: wrap; row-gap: 1px; white-space: normal; overflow: visible; }
}

/* The client's row. Resting position is slot 1 — the state for no-JS,
   reduced-motion and Save-Data visitors, and the state the loop returns to.
   hero.js writes only transform and opacity to the row itself. */
.row--you {
  top: 0;
  z-index: 4;
  border: 1.5px solid var(--blue-500);
  background: linear-gradient(90deg, var(--blue-050), #fff 55%);
  box-shadow: 0 8px 22px rgba(22, 118, 255, .22);
  will-change: transform;
}
.row--you .row__name { color: var(--ink-0); }
.row__logo { flex: none; width: 22px; height: 22px; }
.row__tick { flex: none; width: 14px; height: 14px; color: var(--blue-500); transition: opacity .3s linear; }
.row__tick[data-hidden] { opacity: 0; }
.row__rank {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--blue-600);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.row__rank svg { width: 10px; height: 10px; }

/* The "More businesses" line that ends Google's local pack. Also the strip
   of page the floating card is allowed to overlap. */
.pack__more {
  display: flex; align-items: center; justify-content: flex-start; gap: 4px;
  height: 34px; margin-top: 8px; padding: 0 180px 0 4px;   /* right padding = the floating card's footprint, so the text is never under it */
  font-size: .74rem; font-weight: 600; color: var(--blue-600);
}
.pack__more svg { width: 14px; height: 14px; }

/* The Google Business Profile card: the prototype's floating card, off the
   bottom-right corner of the frame, and the one dark object in the hero so
   it stands out from the white results page. The brand ink, a blue glow,
   white text and gold stars. Fixed box; its numbers tick with the climb. */
.gbp {
  position: absolute;
  right: -14px;
  top: calc(100% - 64px);      /* over the "More businesses" line and the frame padding, never a row */
  width: 206px;
  padding: 12px 14px 13px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1d2230, var(--ink-0) 70%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(21, 40, 74, .18), 0 18px 44px rgba(21, 40, 74, .22), 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 10px 30px rgba(22, 118, 255, .22);
}
@media (max-width: 860px) {
  .gbp { right: 6px; top: calc(100% - 26px); }       /* phones: over the frame padding only, below the "More businesses" line */
  .pack__more { padding-right: 4px; }
  .hero__grid { padding-bottom: 148px; }
}
.gbp__top { display: flex; align-items: center; gap: 9px; }
.gbp__logo { flex: none; width: 26px; height: 26px; }
.gbp__name { display: flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: .84rem; font-weight: 700; line-height: 1.15; color: #fff; white-space: nowrap; }
.gbp__tick { width: 13px; height: 13px; color: #6aa9ff; }
.gbp__kind { margin-top: 1px; font-size: .64rem; color: #aeb6c6; }   /* 7.4:1 on the ink */
.gbp__rate { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.gbp__rate b { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.gbp__stars { display: inline-flex; flex: none; gap: 1px; }
.gbp__stars svg { flex: none; width: 13px; height: 13px; }
.gbp__stars svg path { fill: rgba(255, 255, 255, .22); }
.gbp__stars svg[data-on] path { fill: var(--gold-400); }
.gbp__count { margin-top: 4px; font-size: .7rem; color: #c6cdd9; }    /* 10.2:1 on the ink */
/* Room beneath the device for the overhang (card height ~112 minus the 64 inside the frame). */
.hero__grid { padding-bottom: 120px; }

/* ---------- section heads ------------------------------------------------ */
.shead { max-width: 40ch; }
.shead .eyebrow { margin-bottom: 12px; }
.shead h2 { font-size: var(--fs-h2); font-weight: 800; }
.shead p { margin-top: 12px; font-size: 1.02rem; color: var(--ink-2); }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .eyebrow { justify-content: center; }
/* Desktop: a section header is two columns, heading left and its answer
   right, bottom-aligned, so the row is used and the cards below span it.
   On phones it stacks. Centred headers and headers without a paragraph
   (the FAQ, the story) opt out. */
@media (min-width: 861px) {
  .shead:not(.shead--center):not(.shead--stack) { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  .shead:not(.shead--center):not(.shead--stack) > .eyebrow { grid-column: 1; grid-row: 1; }
  .shead:not(.shead--center):not(.shead--stack) > h2 { grid-column: 1; grid-row: 2; }
  .shead:not(.shead--center):not(.shead--stack) > p { grid-column: 2; grid-row: 1 / 3; align-self: end; margin-top: 0; max-width: 50ch; padding-bottom: 4px; }
  /* Header-left, content-right sections: the FAQ and the About story. */
  .split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 64px; align-items: start; }
  .split > .shead { max-width: 36ch; }
  .split > .faq, .split > .story { margin-top: 6px; max-width: none; }
}

/* ---------- problem ------------------------------------------------------ */
.problem { max-width: 720px; margin-inline: auto; text-align: center; }
.problem .eyebrow { justify-content: center; }
.problem h2 { margin: 12px 0 10px; font-size: var(--fs-h2-sm); font-weight: 800; }
.problem p { font-size: 1.05rem; color: var(--ink-2); }

/* ---------- cards -------------------------------------------------------- */
.cards3 {
  display: grid;
  /* Each animated scene needs about 290px of width; below that the columns
     drop to two, then one, rather than squeezing the scenes. */
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 34px;
}
.cards3--four { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }   /* four short cards in one row on desktop */

.card {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card h3 { margin-bottom: 7px; font-size: var(--fs-h3); font-weight: 700; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; }
.card p { font-size: var(--fs-sm); color: var(--ink-2); }

/* ---- the three card animations ----
   Each is HTML, inline SVG and CSS keyframes that move only transform and
   opacity. The BASE styles are the finished frame: under prefers-reduced-
   motion the global rule collapses every animation to .001ms and the base
   is what remains, and it is also what the loop lands on. Animations run
   only while the card carries data-play, which motion.js sets while the
   card is on screen and the tab is visible. */
.illo {
  position: relative;
  height: 150px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--blue-050), #f7fbff);
  border: 1px solid var(--line-2);
  overflow: hidden;
  font-family: var(--font);
}
.card--green .illo { background: linear-gradient(160deg, var(--green-050), #f6fcf8); }
.anim * { animation-play-state: paused; }
.anim[data-play] * { animation-play-state: running; }

/* -- Review Growth: 6s -- */
.rg__phone {
  position: absolute; left: 18px; top: 16px;
  width: 104px; height: 170px;
  padding: 5px; border-radius: 16px;
  background: var(--ink-0);
}
.rg__screen { height: 100%; border-radius: 12px; background: #fff; padding: 14px 7px 0; overflow: hidden; }
.rg__sms {
  padding: 7px 8px; border-radius: 10px; background: var(--green-050);
  font-size: 7.6px; line-height: 1.35; color: var(--green-ink);
  animation: rgSms 6s var(--ease-out) infinite;
}
.rg__from { display: block; margin-bottom: 3px; font-size: 6.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.rg__link { display: block; margin-top: 4px; font-weight: 600; color: var(--blue-600); }
@keyframes rgSms { 0% { opacity: 0; transform: translateY(10px); } 8%, 100% { opacity: 1; transform: none; } }

.rg__card {
  position: absolute; left: 138px; right: 18px; top: 40px;
  padding: 10px 12px 11px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft);
  animation: rgCard 6s var(--ease-out) infinite;
}
@keyframes rgCard { 0%, 14% { opacity: 0; transform: translateY(8px); } 22%, 100% { opacity: 1; transform: none; } }
.rg__biz { display: flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; color: var(--ink-0); }
.rg__biz img { width: 16px; height: 16px; }
.rg__rate { margin-top: 1px; font-size: .64rem; color: var(--ink-2); }
.rg__stars { display: flex; gap: 3px; margin-top: 7px; }
.rg__stars svg { width: 18px; height: 18px; color: var(--gold-400); animation: rgStar 6s var(--ease-spring) infinite; }
.rg__stars svg:nth-child(2) { animation-name: rgStar2; }
.rg__stars svg:nth-child(3) { animation-name: rgStar3; }
.rg__stars svg:nth-child(4) { animation-name: rgStar4; }
.rg__stars svg:nth-child(5) { animation-name: rgStar5; }
@keyframes rgStar  { 0%, 34% { opacity: .22; transform: scale(.85); } 38% { opacity: 1; transform: scale(1.2); } 42%, 100% { opacity: 1; transform: none; } }
@keyframes rgStar2 { 0%, 39% { opacity: .22; transform: scale(.85); } 43% { opacity: 1; transform: scale(1.2); } 47%, 100% { opacity: 1; transform: none; } }
@keyframes rgStar3 { 0%, 44% { opacity: .22; transform: scale(.85); } 48% { opacity: 1; transform: scale(1.2); } 52%, 100% { opacity: 1; transform: none; } }
@keyframes rgStar4 { 0%, 49% { opacity: .22; transform: scale(.85); } 53% { opacity: 1; transform: scale(1.2); } 57%, 100% { opacity: 1; transform: none; } }
@keyframes rgStar5 { 0%, 54% { opacity: .22; transform: scale(.85); } 58% { opacity: 1; transform: scale(1.2); } 62%, 100% { opacity: 1; transform: none; } }
.rg__post, .rg__done {
  margin-top: 9px; padding: 5px 0; border-radius: 7px; text-align: center;
  font-size: .66rem; font-weight: 700;
}
.rg__post { background: var(--blue-600); color: #fff; opacity: 0; animation: rgPost 6s linear infinite; }   /* base: finished = posted */
.rg__done { position: absolute; left: 12px; right: 12px; bottom: 11px; display: flex; align-items: center; justify-content: center; gap: 5px; background: var(--green-050); color: var(--green-ink); animation: rgDone 6s linear infinite; }
.rg__done svg { width: 12px; height: 12px; }
@keyframes rgPost { 0%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes rgDone { 0%, 66% { opacity: 0; } 70%, 100% { opacity: 1; } }

.rg__count {
  position: absolute; right: 18px; top: 12px;
  display: flex; align-items: center; gap: 4px;
  padding: 3px 9px 3px 7px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--line);
  font-size: .64rem; color: var(--ink-2);
}
.rg__nums { position: relative; display: inline-block; width: 1.9em; text-align: right; }
.rg__nums b { font-weight: 700; color: var(--ink-0); font-variant-numeric: tabular-nums; }
.rg__na { position: absolute; right: 0; top: 0; opacity: 0; animation: rgNa 6s linear infinite; }   /* base: finished = 113 showing */
.rg__nb { animation: rgNb 6s linear infinite; }
@keyframes rgNa { 0%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes rgNb { 0%, 72% { opacity: 0; } 76%, 100% { opacity: 1; } }
.rg__plus {
  position: absolute; right: 4px; top: -4px;
  font-size: .62rem; font-weight: 800; color: var(--green-ink);
  opacity: 0;
  animation: rgPlus 6s var(--ease-out) infinite;
}
@keyframes rgPlus { 0%, 72% { opacity: 0; transform: none; } 76% { opacity: 1; transform: translateY(-4px); } 92%, 100% { opacity: 0; transform: translateY(-18px); } }

/* -- SEO: a 6s drop-and-climb, three searches over 18s -- */
.anim--seo { background: #eeeae2; }   /* map land: if any browser ever letterboxes the SVG, the gap is land, not blue */
.seo__map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.seo__kw {
  position: absolute; left: 12px; top: 12px;
  display: grid; align-items: center;            /* every keyword in the same cell, so the pill fits the longest */
  height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft);
  font-size: .66rem; font-weight: 600; color: var(--ink-0); white-space: nowrap;
}
.seo__kw span { grid-area: 1 / 1; animation: seoKw 18s linear infinite; }
.seo__kw span + span { opacity: 0; }             /* base: one keyword showing */
.seo__kw span:nth-child(2) { animation-name: seoKw2; }
.seo__kw span:nth-child(3) { animation-name: seoKw3; }
@keyframes seoKw  { 0%, 31% { opacity: 1; } 33%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes seoKw2 { 0%, 32% { opacity: 0; } 34%, 64% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes seoKw3 { 0%, 65% { opacity: 0; } 67%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* The rank badge is an odometer. The four numbers stack in a clipped box
   and slide up together; the box is taller than the type and soft-masked
   top and bottom, so a moving digit dissolves at the edge rather than being
   cut flat, and the arrow hops as each number lands. Base position shows #1.
   The map crop beneath keeps this corner on land, not on the river. */
.seo__rank {
  position: absolute; right: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 9px; border-radius: var(--radius-pill);
  background: var(--blue-600); color: #fff;
  font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(11, 91, 214, .25), 0 5px 12px rgba(11, 91, 214, .22);
}
.seo__rank svg { width: 11px; height: 11px; animation: seoHop 6s var(--ease-spring) infinite; }
@keyframes seoHop {
  0%, 22%, 29%, 42%, 49%, 57%, 64%, 100% { transform: none; }
  25%, 45%, 60% { transform: translateY(-3px); }
}
.seo__digits {
  display: block; height: 1.4em; line-height: 1.4em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.seo__digits b {
  display: block; height: 1.4em; line-height: 1.4em;
  transform: translateY(-4.2em);
  animation: seoOdo 6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes seoOdo {
  0%, 22%   { transform: translateY(0); }
  28%, 42%  { transform: translateY(-1.4em); }
  48%, 57%  { transform: translateY(-2.8em); }
  63%, 100% { transform: translateY(-4.2em); }
}
.seo__pin { position: absolute; left: 58%; top: 50%; width: 26px; height: 36px; margin: -30px 0 0 -13px; }
.seo__pinsvg { position: relative; width: 26px; height: 36px; animation: seoDrop 6s cubic-bezier(.3, 1.4, .5, 1) infinite; filter: drop-shadow(0 4px 6px rgba(21, 40, 74, .3)); }
@keyframes seoDrop { 0% { opacity: 0; transform: translateY(-34px); } 6% { opacity: 1; } 14%, 100% { opacity: 1; transform: none; } }
.seo__ring {
  position: absolute; left: 50%; bottom: -3px;
  width: 26px; height: 10px; margin-left: -13px; border-radius: 50%;
  background: rgba(26, 115, 232, .35);
  opacity: 0;
  animation: seoRing 6s var(--ease-out) infinite;
}
@keyframes seoRing { 0%, 60% { opacity: 0; transform: scale(.4); } 66% { opacity: .9; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(2.6); } }

/* -- AI Search: six platforms take turns, 9s -- */
.ai__q {
  position: absolute; left: 14px; right: 14px; top: 12px;
  padding: 7px 11px; border-radius: 12px 12px 12px 3px;
  background: #fff; border: 1px solid var(--line);
  font-size: .7rem; font-weight: 600; color: var(--ink-0);
}
.ai__logos { position: absolute; left: 14px; right: 14px; top: 56px; display: flex; justify-content: space-between; align-items: center; }
.ai__logo { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #fff; border: 1px solid var(--line); color: #000; animation: aiTurn 9s var(--ease-out) infinite; }
.ai__logo svg { width: 18px; height: 18px; }
.ai__logo:nth-child(2) { animation-delay: 1.5s; }
.ai__logo:nth-child(3) { animation-delay: 3s; }
.ai__logo:nth-child(4) { animation-delay: 4.5s; }
.ai__logo:nth-child(5) { animation-delay: 6s; }
.ai__logo:nth-child(6) { animation-delay: 7.5s; }
@keyframes aiTurn { 0%, 1% { opacity: .45; transform: none; } 4%, 14% { opacity: 1; transform: translateY(-4px) scale(1.14); } 18%, 100% { opacity: .45; transform: none; } }
.ai__chips { position: absolute; left: 14px; right: 14px; top: 102px; height: 32px; }
.ai__chip {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 7px; border-radius: 12px 12px 3px 12px;
  background: var(--ink-0); color: #fff;
  font-size: .66rem; white-space: nowrap;
  opacity: 0; animation: aiChip 9s var(--ease-out) infinite;
}
.ai__chip svg { width: 13px; height: 13px; color: #fff; }
.ai__chip b { font-weight: 700; color: #fff; }
.ai__chip:first-child { opacity: 1; }
.ai__chip:nth-child(2) { animation-delay: 1.5s; }
.ai__chip:nth-child(3) { animation-delay: 3s; }
.ai__chip:nth-child(4) { animation-delay: 4.5s; }
.ai__chip:nth-child(5) { animation-delay: 6s; }
.ai__chip:nth-child(6) { animation-delay: 7.5s; }
@keyframes aiChip { 0%, 2% { opacity: 0; transform: translateY(5px); } 5%, 14% { opacity: 1; transform: none; } 17%, 100% { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ai__logo { opacity: 1; } }

/* ---------- guarantee ---------------------------------------------------- */
.guarantee {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 26px;
  align-items: center;
  padding: 38px;
  background: linear-gradient(120deg, var(--green-050), var(--blue-050));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (max-width: 760px) {
  .guarantee { grid-template-columns: 1fr; padding: 28px; text-align: center; }
  .guarantee .btn { justify-self: center; }
}
.guarantee__shield {
  width: 64px; height: 64px;
  margin: 0 auto;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--green-500);
  box-shadow: 0 8px 20px rgba(22, 179, 100, .28);
}
.guarantee__shield svg { width: 34px; height: 34px; color: #fff; }
.guarantee h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem); font-weight: 800; }
.guarantee p { max-width: 52ch; margin-top: 8px; font-size: .98rem; color: var(--green-ink); }

/* ---------- pricing ------------------------------------------------------ */
.tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 720px;
  margin: 34px auto 0;
}
/* Desktop: the two tiers use the full content width, not a 720px island. */
@media (min-width: 861px) { .tiers:not(.tiers--one) { max-width: none; gap: 24px; } }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }

.tier {
  position: relative;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-out);
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tier--pop { border: 2px solid var(--blue-500); }
.tier__flag {
  position: absolute;
  top: -12px; left: 26px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--blue-600);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tier h2, .tier h3 { margin-bottom: 4px; font-size: var(--fs-h3); font-weight: 700; }
.tier__price {
  margin: 8px 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -.03em;
  color: var(--ink-0);
}
.tier__price span { font-size: .9rem; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.tier ul { display: grid; gap: 9px; margin: 14px 0 20px; list-style: none; }
.tier li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; color: var(--ink-1); }
.tier li svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--green-500); }
.pnote {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-micro);
  color: var(--ink-2);
  text-align: center;
}

/* ---------- about -------------------------------------------------------- */
/* Same two-column rhythm as .shead on desktop: the founder chip, eyebrow and
   heading left, the copy right. Stacks on phones. */
.about { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 861px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  .about__body { max-width: 52ch; padding-bottom: 4px; }
  .about__body p:first-child { margin-top: 0; }
}
.about h2 { margin-top: 12px; font-size: var(--fs-h2-sm); font-weight: 800; }
.about__body p { margin-top: 14px; font-size: 1.02rem; color: var(--ink-2); }
.about__body p + p { margin-top: 12px; }

/* ---------- faq ---------------------------------------------------------- */
.faq { max-width: 760px; margin-top: 30px; }
.faq details { padding: 4px 0; border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-0);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-600); }
.faq .pl { position: relative; flex: none; width: 22px; height: 22px; }
.faq .pl::before, .faq .pl::after {
  content: '';
  position: absolute;
  background: var(--blue-500);
  border-radius: 2px;
}
.faq .pl::before { top: 10px; left: 3px; right: 3px; height: 2px; }
.faq .pl::after  { left: 10px; top: 3px; bottom: 3px; width: 2px; transition: opacity .2s linear, transform .2s var(--ease-out); }
.faq details[open] .pl::after { opacity: 0; transform: rotate(90deg); }
.faq details p { padding: 0 2px 18px; font-size: var(--fs-sm); color: var(--ink-2); }
.faq details p + p { margin-top: 10px; }

/* ---------- final cta ---------------------------------------------------- */
/* The one dark object on the page, so it reads as the full stop. */
.final {
  position: relative;
  overflow: hidden;
  padding: 52px;
  border-radius: var(--radius-lg);
  background: var(--ink-0);
  color: #fff;
  text-align: center;
}
.final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 50% -20%, rgba(22, 118, 255, .5), transparent 60%);
}
.final > * { position: relative; }
.final__logo { width: 158px; height: 28px; margin: 0 auto 22px; }
.final h2 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.4rem); font-weight: 800; color: #fff; }
.final p { max-width: 46ch; margin: 12px auto 26px; color: #c6cdd9; }   /* 10.2:1 on --ink-0 */
@media (max-width: 760px) { .final { padding: 40px 24px; } }

/* ---------- footer ------------------------------------------------------- */
.footer { padding-block: 48px 40px; color: var(--ink-2); }
.footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.footer__brand { max-width: 260px; }
.footer__brand .logo { margin-bottom: 12px; }
.footer__brand p { font-size: .88rem; color: var(--ink-2); }
.footer h3 {
  margin: 0 0 12px;
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer ul a { font-size: .9rem; color: var(--ink-2); text-decoration: none; }
.footer ul a:hover { color: var(--ink-0); text-decoration: underline; }
.footer__reg { max-width: 60ch; margin-top: 28px; font-size: .78rem; color: var(--ink-2); }
.footer__reg + .footer__reg { margin-top: 6px; }

/* ---------- sticky mobile cta -------------------------------------------- */
/* Phones only, and only once the hero's own button has scrolled away, so the
   screen never carries two copies of the same call to action. */
.stickycta {
  position: fixed;
  left: 12px; right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: none;
  transform: translateY(130%);
  transition: transform .3s var(--ease-out);
}
.stickycta[data-show] { transform: none; }
.stickycta .btn { box-shadow: var(--shadow-pop), var(--shadow-blue); }
@media (max-width: 720px) { .stickycta { display: block; } }

/* ---------- reveal ------------------------------------------------------- */
/* Below the fold only; the hero is visible at rest. Applied by JS only — the
   class does nothing until [data-reveal-ready] is set on <html>, so with JS
   off or broken every block is simply visible. */
[data-reveal-ready] .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
[data-reveal-ready] .reveal[data-in] { opacity: 1; transform: none; }

/* ---------- reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal-ready] .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .tier:hover { transform: none; }
}


/* ---------- generated pages: areas, industries, insights, legal ---------- */
.meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-2); }
.meta a { color: var(--ink-1); }
.prose { max-width: 70ch; margin-inline: auto; }
.prose .lead { font-size: 1.12rem; color: var(--ink-1); }
.prose h2 { margin-top: 36px; font-size: 1.32rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink-0); }
.prose p { margin-top: 12px; font-size: 1.02rem; line-height: 1.68; color: var(--ink-1); }
.prose a { color: var(--blue-600); }
.related { margin-top: 40px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.related h2 { margin: 0 0 10px; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.related ul { list-style: none; display: grid; gap: 8px; }
.related a { font-weight: 600; color: var(--blue-600); text-decoration: none; }
.related a:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); color: var(--ink-1); box-shadow: var(--shadow-soft); }
.chips li svg { width: 15px; height: 15px; color: var(--blue-600); flex: none; }
.footer__contact { display: grid; gap: 6px; margin-top: 12px; font-size: .88rem; }
.footer__contact a { color: var(--ink-1); text-decoration: none; }
.footer__contact a:hover { color: var(--ink-0); text-decoration: underline; }
@media (min-width: 861px) {
  .footer__row { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: 30px 28px; }
  .footer__brand { max-width: 280px; }
}


/* ---------- cookie consent ------------------------------------------------ */
.consent {
  position: fixed; left: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 95;
  max-width: 400px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.consent[hidden] { display: none; }
.consent p { font-size: var(--fs-sm); color: var(--ink-1); }
.consent p b { color: var(--ink-0); }
.consent a { color: var(--blue-600); }
.consent__btns { display: flex; gap: 8px; margin-top: 12px; }
.consent .btn { padding: 9px 16px; font-size: .9rem; }
@media (max-width: 720px) {
  .consent { right: 12px; max-width: none; bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 66px); } /* clears the sticky CTA */
}