/* Effective Marketer: homepage styles.
   Concept A after the Apple guidelines pass, light (Petar's pick, 16 Oct 2026).
   Content runs up to 1440px wide with margins that grow with the screen. Every section after
   the first screen is a compact two-column band where the heading sits beside its evidence.
   On phones the page is built around one action: the website box and a full-width button sit
   in the first screen, and a bar keeps the button one tap away.
   Orange only on things you can tap; Google's yellow marks "your brand".
   Sizes: every length is a multiple of --u (see .site > *). From 1024px to 1440px wide the whole
   page is the 1440px design scaled down, so nothing moves or wraps; tablets and phones (below
   1024px) keep their own layouts at real size. The layout answers to the width of .site
   (container queries, cqi units), the same as the mockup.
   Design source: ../../homepage.html (the reviewed mockup, with its desktop/phone preview). */

/* ---------- Font: Plus Jakarta Sans, served from this site (no request to Google) ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  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;
}

:root {
  color-scheme: light;
  /* Palette */
  --bg: #FFFFFF; --bg-alt: #F5F7FB; --surface: #FFFFFF;
  --ink: #0B1B3F; --ink-2: #475467; --ink-3: #344054;
  --line: #E4E7EC; --line-2: #D0D5DD; --chip: #F1F4F9;
  --band: #0B1B3F; --band-ink: #FFFFFF; --band-ink-2: #C9D1E3;
  --accent: #FF7A1A; --accent-ink: #0B1B3F; --focus-ring: rgba(255, 122, 26, .3);
  --ok: #0E9F6E; --good-bg: #E7F6EC; --good-ink: #05603A;
  --field: #FFFFFF; --field-ink: #0B1B3F; --field-ph: #667085; --field-line: #D0D5DD;
  --poster: #0B1B3F; --poster-ink: #FFFFFF;
  /* Google look-alikes stay white, as they are on Google */
  --g-bg: #FFFFFF; --g-ink: #202124; --g-ink-2: #475467; --g-line: #DFE1E5; --g-sep: #E8EAED;
  --g-icon: #5F6368; --g-icon-2: #9AA0A6; --g-hi: #FFF7E0; --g-mark: #FFE04F;
  --g-mark-edge: #E9C440; --g-mark-halo: rgba(255, 224, 79, .5);
  /* Type */
  --font: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-google: Arial, Helvetica, sans-serif;
  /* Motion: the same soft, springy ease as the Evobody logo */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  /* The length unit (see .site > *); 1px outside the page */
  --u: 1px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--font); }
/* The page answers to its own width (container queries, cqi units). Nothing else on the page may be a size container. */
.site { container: site / inline-size; overflow: clip; background: var(--bg); }
/* One length unit, --u: every size on the page is a multiple of it (hairlines and pill radii aside).
   From 1024px to 1440px wide it shrinks with the page (1px at 1440px), so the page is the 1440px
   design scaled down. Above 1440px it stays 1px and the margins grow. Below 1024px it is 1px:
   tablets and phones keep their own layouts at real size.
   Set on the children of .site, so 100cqi is the width of .site. Lengths built from --u are set
   here too: on :root they would keep 1px. */
.site > * {
  --u: min(1px, calc(100cqi / 1440));
  --gutter: clamp(20 * var(--u), 5cqi, 80 * var(--u));
  --sec-y: clamp(40 * var(--u), 4.5cqi, 56 * var(--u));
  --col-gap: clamp(32 * var(--u), 5cqi, 80 * var(--u));
  --shadow: 0 1px calc(2 * var(--u)) rgba(11, 27, 63, .05), 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(11, 27, 63, .06);
  --shadow-lg: 0 calc(16 * var(--u)) calc(48 * var(--u)) rgba(11, 27, 63, .14);
  font-size: calc(16 * var(--u));
}
@container site (max-width: 1023.98px) {
  .site > * { --u: 1px; }
}
/* Icons keep their width and height attributes, in --u */
.site svg[width="12"] { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.site svg[width="14"] { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.site svg[width="15"] { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.site svg[width="16"] { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.site svg[width="18"] { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.site svg[width="20"] { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.site svg[width="22"] { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.site svg[width="28"] { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.site svg.logo-mark { width: calc(30 * var(--u)); height: calc(28 * var(--u)); }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
a { color: inherit; }
.wrap { max-width: calc(1600 * var(--u)); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-2); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: calc(3 * var(--u)) solid var(--accent); outline-offset: calc(3 * var(--u)); }

/* ---------- Menu ---------- */
.nav { border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); padding-block: calc(18 * var(--u)); }
.logo { display: flex; align-items: center; gap: calc(5 * var(--u)); text-decoration: none; font-weight: 700; font-size: calc(20 * var(--u)); letter-spacing: -0.02em; color: var(--ink); }
.logo-mark { flex: none; overflow: visible; transform: translateY(1px); }
/* Logo hover: the pointer glides onto the suggestion and clicks it, then glides back when the mouse leaves */
.lm-move { transition: transform .6s var(--ease-out); }
.lm-press, .lm-pill, .lm-ripple { transform-box: fill-box; }
.lm-press { transform-origin: 0 0; }
.lm-pill, .lm-ripple { transform-origin: center; }
.lm-ripple { opacity: 0; }
.logo:hover .lm-move, .logo:focus-visible .lm-move { transform: translate(-5px, -1.5px); }
.logo:hover .lm-press, .logo:focus-visible .lm-press { animation: lm-press .42s .4s var(--ease-out) both; }
.logo:hover .lm-pill, .logo:focus-visible .lm-pill { animation: lm-pill .42s .4s var(--ease-out) both; }
.logo:hover .lm-ripple, .logo:focus-visible .lm-ripple { animation: lm-ripple .55s .52s ease-out both; }
@keyframes lm-press { 0% { transform: scale(1); } 45% { transform: scale(.8); } 100% { transform: scale(1); } }
@keyframes lm-pill { 0% { transform: scale(1); } 45% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes lm-ripple { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: calc(26 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; }
.links a { display: inline-flex; align-items: center; min-height: calc(44 * var(--u)); text-decoration: none; }
.links a.quiet { color: var(--ink-2); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); min-height: calc(44 * var(--u)); border: 0; border-radius: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(26 * var(--u)); font: 700 calc(17 * var(--u))/1.2 var(--font); background: var(--accent); color: var(--accent-ink); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn.sm { padding: 0 calc(18 * var(--u)); font-size: calc(15 * var(--u)); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* ---------- Type ---------- */
/* The line above the headline reads like a Google suggestion: what you typed in regular, Google's completion in bold */
.kicker { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4 * var(--u)) calc(14 * var(--u)); }
.kicker-q { font-family: var(--font-google); font-size: calc(15 * var(--u)); color: var(--g-ink); }
.kicker-q b { font-weight: 700; }
.kicker-not { padding-left: calc(14 * var(--u)); border-left: 1px solid var(--line-2); font-size: calc(12 * var(--u)); font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow { font-size: calc(13 * var(--u)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
/* Desktop headline: two lines, "Be in the dropdown," / "before the search results." (the <br> in the HTML),
   sized so the second line fits its column: 3.6cqi is 52px at 1440px and 56px from about 1556px up */
.h1 { font-size: clamp(38 * var(--u), 3.6cqi, 56 * var(--u)); line-height: 1.1; font-weight: 700; letter-spacing: -0.035em; }
.h2 { font-size: clamp(26 * var(--u), 2.8cqi, 36 * var(--u)); line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; }
.lead { font-size: calc(19 * var(--u)); color: var(--ink-2); max-width: 34em; }

/* ---------- First screen ---------- */
.hero { padding-block: calc(56 * var(--u)) calc(64 * var(--u)); }
/* Two columns on desktop, never wrapped (tablets wrap them, see below 1024px) */
.row { display: flex; flex-wrap: nowrap; align-items: center; gap: calc(56 * var(--u)); }
.col { flex: 1 1 calc(440 * var(--u)); min-width: 0; display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.hero-visual { gap: calc(14 * var(--u)); }

.field { margin: 0; display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)); border: 1.5px solid var(--field-line); border-radius: calc(16 * var(--u)); background: var(--field); box-shadow: var(--shadow); }
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 calc(4 * var(--u)) var(--focus-ring); }
.field .in { flex: 1 1 calc(220 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); padding-left: calc(12 * var(--u)); color: var(--field-ph); }
.field input { flex: 1; min-width: 0; border: 0; outline: calc(2 * var(--u)) solid transparent; font-family: inherit; font-size: calc(18 * var(--u)); padding: calc(14 * var(--u)) 0; color: var(--field-ink); background: transparent; }
.field input::placeholder { color: var(--field-ph); }
/* The country, inside the box after a thin line: "Country" until one is chosen (main.js guesses it). The words are
   drawn; the real list sits on top, invisible, so phones open their own picker. The website part may shrink so the
   three always share one line on desktop. */
.field .in { min-width: 0; }
.field .fc { position: relative; flex: none; display: flex; align-items: center; gap: calc(7 * var(--u)); margin-block: calc(8 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(16 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; color: var(--ink); white-space: nowrap; }
.field .fc::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line-2); }
.field .fc svg { flex: none; color: var(--ink-2); }
.field .fc select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.field .fc.is-empty .fc-v { color: var(--ink-2); }
.field .fc:hover svg { color: var(--ink); }
.field .fc:has(select:focus-visible) { background: var(--bg-alt); }
/* Sent without a country: the country lights up, with a short note under the box */
.field .fc.is-ask { background: var(--g-hi); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--accent); }
.field .fc.is-ask::before { opacity: 0; }
.field-msg { margin-top: calc(-8 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; color: #B42318; }
.cta .field-msg { margin-top: 0; color: #FFFFFF; }
/* The first box is the one thing to do: a Google-yellow glow (yellow means "you", as in the dropdown), lifted off the page */
.hero .field { border-color: var(--g-mark-edge); box-shadow: 0 0 0 calc(6 * var(--u)) var(--g-mark-halo), 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(11, 27, 63, .16); }
.hero .field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 calc(5 * var(--u)) var(--focus-ring), 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(11, 27, 63, .16); }
.hero .field .in { color: var(--ink); }
.hero .field input { font-size: calc(19 * var(--u)); padding-block: calc(16 * var(--u)); }
.hero .field input::placeholder { color: var(--ink-2); }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(20 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; color: var(--ink-2); }
.ticks li { display: flex; align-items: center; gap: calc(7 * var(--u)); }
.ticks svg { color: var(--ok); }

.video { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: calc(20 * var(--u)); overflow: hidden; background: var(--poster); box-shadow: var(--shadow); }
.video > .gs.mini { position: absolute; top: 9%; left: 50%; transform: translateX(-50%); width: 74%; }
/* The play button is white so the website box keeps the only orange button in the first screen */
.play { position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%); width: calc(78 * var(--u)); height: calc(78 * var(--u)); border-radius: 50%; border: 0; background: var(--poster-ink); color: var(--poster); display: flex; align-items: center; justify-content: center; box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .35); cursor: pointer; }
.video-meta { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(16 * var(--u)); display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--u)); color: var(--poster-ink); font-size: calc(14 * var(--u)); font-weight: 700; }
.dur { padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .16); }
.cursor { display: inline-block; vertical-align: middle; position: relative; top: calc(7 * var(--u)); left: calc(-6 * var(--u)); margin: calc(-10 * var(--u)) calc(-16 * var(--u)) calc(-10 * var(--u)) 0; filter: drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .35)); }
/* With a file in data-video, the box plays the intro in place of the picture: muted, in the video's
   16:9 shape, with "Sound on" in the corner and the line under the box (see Videos below).
   Without one, or if the file doesn't load, the picture shows. */
.video[data-video]:not([data-video=""]) { aspect-ratio: 16 / 9; }
.video[data-video]:not([data-video=""]) > :is(.gs, .play, .video-meta) { display: none; }
.video-player { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; background: var(--poster); object-fit: contain; }
/* Sound on/off: just a white speaker in the corner, no button shape (Petar: "a simple sound icon without
   background ... more premium"). A soft shadow keeps it visible on light and dark frames; the words are
   for screen readers only. Bottom right: the intro's own captions sit bottom left. */
.sound { position: absolute; right: calc(10 * var(--u)); bottom: calc(10 * var(--u)); z-index: 4; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: transparent; color: #FFFFFF; opacity: .92; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)) drop-shadow(0 0 8px rgba(0, 0, 0, .3)); cursor: pointer; transition: transform .15s var(--ease-out), opacity .15s var(--ease-out); }
.sound:hover { opacity: 1; transform: scale(1.08); }
.sound span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* The line sits right under the box: it takes back the column's gap */
.video + .vline { margin-top: calc(-14 * var(--u)); }

.value-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: calc(20 * var(--u)); }
.vs-item { display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); }
.vs-item + .vs-item { border-left: 1px solid var(--line); }
.vs-item b { font-size: calc(24 * var(--u)); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.vs-item span { font-size: calc(13 * var(--u)); line-height: 1.35; color: var(--ink-2); }

/* ---------- Google look-alikes ---------- */
.gs { background: var(--g-bg); color: var(--g-ink); border: 1px solid var(--g-line); border-radius: calc(24 * var(--u)); box-shadow: var(--shadow); padding: calc(14 * var(--u)) 0 calc(12 * var(--u)); font-family: var(--font-google); }
.gs-q { display: flex; align-items: center; gap: calc(14 * var(--u)); margin: 0 calc(14 * var(--u)); padding: calc(13 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--g-line); border-radius: 999px; font-size: calc(18 * var(--u)); }
.gs-q svg { color: var(--g-icon); flex: none; }
.caret { width: calc(2 * var(--u)); height: calc(22 * var(--u)); background: var(--g-ink); }
.gs ul { list-style: none; margin: calc(10 * var(--u)) 0 0; padding: 0; font-size: calc(16 * var(--u)); }
.gs li { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(32 * var(--u)); }
.gs li svg { color: var(--g-icon-2); flex: none; }
.gs li.hi { background: var(--g-hi); }
.gs mark { background: var(--g-mark); color: var(--g-ink); font-weight: 700; border-radius: calc(4 * var(--u)); padding: 1px calc(5 * var(--u)); }
.gs.mini { border-radius: calc(20 * var(--u)); padding: 0; overflow: hidden; box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .3); }
.gs.mini .gs-q { margin: 0; border: 0; border-radius: 0; padding: calc(12 * var(--u)) calc(16 * var(--u)); font-size: calc(15 * var(--u)); }
.gs.mini ul { margin: 0; border-top: 1px solid var(--g-sep); padding: calc(4 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(14 * var(--u)); }
.gs.mini li { display: block; padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)) calc(42 * var(--u)); }

/* ---------- Videos: they play by themselves, muted, while on screen; no pause button ---------- */
/* A clip in a rounded frame with a soft shadow, the line right under it */
.film { margin: 0; min-width: 0; }
.film-frame { position: relative; aspect-ratio: 16 / 10; border-radius: calc(20 * var(--u)); overflow: hidden; background: var(--line); box-shadow: var(--shadow-lg); }
.film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
/* The line under a video, as on Evobody (.vbar): it fills as the video plays, and a tap or a drag
   goes to any part (a slider for the keyboard). 3 units thin at rest; 5 with a knob at the end
   while you point at it, tab to it or drag it. The box around it is the hit area. */
.vline { --p: 0; position: relative; height: calc(22 * var(--u)); border-radius: 999px; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.vline::before { content: ""; }
.vline::before, .vline i { position: absolute; left: 0; top: 50%; height: calc(3 * var(--u)); margin-top: calc(-1.5 * var(--u)); border-radius: 999px; transition: height .15s var(--ease-out), margin-top .15s var(--ease-out); }
.vline::before { right: 0; background: var(--line-2); }
.vline i { width: calc(var(--p) * 100%); background: var(--ink); }
.vline i::after { content: ""; position: absolute; top: 50%; right: calc(-6 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-top: calc(-6 * var(--u)); border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .15s var(--ease-out); }
/* Keyboard focus: the site's orange ring, drawn inside the hit area so it stays off the video */
.vline:focus-visible { outline: calc(3 * var(--u)) solid var(--accent); outline-offset: calc(-3 * var(--u)); }
.vline:focus-visible::before, .vline:focus-visible i, .vline.drag::before, .vline.drag i { height: calc(5 * var(--u)); margin-top: calc(-2.5 * var(--u)); }
.vline:focus-visible i::after, .vline.drag i::after { transform: none; }
@media (hover: hover) {
  .vline:hover::before, .vline:hover i { height: calc(5 * var(--u)); margin-top: calc(-2.5 * var(--u)); }
  .vline:hover i::after { transform: none; }
}

/* ---------- Sections after the first screen ---------- */
.sec { padding-block: var(--sec-y); }
.alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

/* Where you'll show up: the clip of Google's page on the left, what each part is on the right,
   centred against the clip by the empty rows above and below */
.where {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto auto 1fr;
  grid-template-areas: "film ." "film head" "film l1" "film l2" "film l3" "film .";
  column-gap: var(--col-gap);
}
.where-head { grid-area: head; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding-bottom: calc(8 * var(--u)); }
.where .film, .where .gpage { grid-area: film; align-self: center; }
.l1 { grid-area: l1; } .l2 { grid-area: l2; } .l3 { grid-area: l3; }
.l { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(4 * var(--u)); padding-block: calc(12 * var(--u)); }
.l b { font-size: calc(18 * var(--u)); line-height: 1.3; }
.l.us b { font-size: calc(22 * var(--u)); letter-spacing: -0.02em; }
/* Facts as chips instead of sentences: a green tick for us, a grey cross for the others */
.facts { list-style: none; margin: calc(4 * var(--u)) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.facts li { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u)); border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.4; }
.facts li svg { flex: none; }
.facts .yes { background: var(--good-bg); box-shadow: none; color: var(--good-ink); }
.tag { padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: calc(12 * var(--u)); font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.l.us .tag { background: var(--g-mark); box-shadow: none; color: var(--g-ink); }

/* Proof: what to type into Google, the numbers, the guarantee */
.proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: calc(28 * var(--u)) var(--col-gap); }
.proof-text { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.proof-lead { font-size: calc(17 * var(--u)); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
/* What they'll see: a small Google list with our line in it, marked "That's us" */
.peek { margin: calc(6 * var(--u)) 0 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); max-width: calc(540 * var(--u)); }
.peek-cap { font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.peek-box { padding-bottom: calc(10 * var(--u)); border: 1px solid var(--g-line); border-radius: calc(24 * var(--u)); background: var(--g-bg); box-shadow: var(--shadow); font-family: var(--font-google); color: var(--g-ink); overflow: hidden; }
.peek-q { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(13 * var(--u)) calc(20 * var(--u)); margin-bottom: calc(6 * var(--u)); border-bottom: 1px solid var(--g-sep); font-size: calc(16 * var(--u)); }
.peek-q svg, .peek-row svg { flex: none; color: var(--g-icon); }
.peek-row svg { color: var(--g-icon-2); }
.peek-caret { flex: none; width: calc(1.5 * var(--u)); height: 1.15em; margin-left: calc(-10 * var(--u)); background: var(--g-ink); animation: peek-blink 1.1s steps(1) infinite; }
@keyframes peek-blink { 50% { opacity: 0; } }
.peek-row { display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(42 * var(--u)); padding: calc(6 * var(--u)) calc(20 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: 1.35; }
.peek-us { background: var(--g-hi); box-shadow: inset calc(3 * var(--u)) 0 0 var(--g-mark); }
.peek-us span { min-width: 0; }
.peek-us b { font-weight: 700; }
.peek-us em { margin-left: auto; flex: none; padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: var(--g-mark); color: var(--ink); font-family: var(--font); font-size: calc(12 * var(--u)); font-style: normal; font-weight: 700; }
.peek-ghost i { display: block; width: 52%; height: calc(9 * var(--u)); border-radius: 999px; background: var(--g-sep); }
.peek-ghost i.short { width: 36%; }
/* "Where you'll show up": a still Google page, with the suggestions on top (with us), then the ads, then the results */
.gpage { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: calc(22 * var(--u)); padding: calc(28 * var(--u)); border: 1px solid var(--line); border-radius: calc(20 * var(--u)); background: var(--surface); box-shadow: var(--shadow-lg); }
.gpage .peek-box { margin-bottom: calc(4 * var(--u)); }
.gp-ad, .gp-res { display: flex; flex-direction: column; gap: calc(9 * var(--u)); padding-inline: calc(10 * var(--u)); }
.gp-ad b { font-family: var(--font-google); font-size: calc(13 * var(--u)); font-weight: 700; color: var(--g-ink); }
.gp-ad i, .gp-res i { display: block; width: 88%; height: calc(9 * var(--u)); border-radius: 999px; background: var(--g-sep); }
.gp-ad i.t, .gp-res i.t { width: 56%; height: calc(13 * var(--u)); background: var(--line-2); }
.gp-ad i.short, .gp-res i.short { width: 62%; }
.gp-res + .gp-res { opacity: .5; }
.proof-side { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.chips { display: flex; flex-direction: column; gap: calc(10 * var(--u)); font-family: var(--font-google); }
.chip-q { display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(48 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-bg); color: var(--g-ink); font-size: calc(16 * var(--u)); text-decoration: none; box-shadow: 0 1px calc(2 * var(--u)) rgba(11, 27, 63, .06); width: 100%; font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip-q:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.chip-q svg { color: var(--g-icon); flex: none; }
/* The Copy button inside each search: yellow like a Google highlight, green once copied */
.chip-q .copy { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)) calc(11 * var(--u)); border-radius: 999px; background: var(--g-mark); color: var(--ink); font-family: var(--font); font-size: calc(13 * var(--u)); font-weight: 700; line-height: 1.2; transition: background-color .2s ease, color .2s ease; }
.chip-q .copy svg { color: currentColor; }
.chip-q:hover .copy { background: var(--g-mark-edge); }
.chip-q .copy-ok, .chip-q.is-copied .copy-ic { display: none; }
.chip-q.is-copied .copy-ok { display: block; }
.chip-q.is-copied .copy { background: var(--good-bg); color: var(--good-ink); }
.chips-how { margin: 0; font-size: calc(14 * var(--u)); line-height: 1.45; color: var(--ink-2); }
.guarantee { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--line); border-radius: calc(16 * var(--u)); background: var(--bg-alt); }
.guarantee p { font-size: calc(15 * var(--u)); color: var(--ink-2); }
.guarantee b { color: var(--ink); }
.shield { flex: none; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--good-bg); color: var(--good-ink); display: flex; align-items: center; justify-content: center; }

/* Quick answers: a quiet reference list beside its heading, then the box again */
.faq-wrap { display: grid; grid-template-columns: minmax(calc(180 * var(--u)), 0.3fr) minmax(0, 1fr); align-items: start; gap: calc(20 * var(--u)) var(--col-gap); }
.faq-title { font-size: clamp(22 * var(--u), 2cqi, 28 * var(--u)); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 clamp(24 * var(--u), 3cqi, 48 * var(--u)); }
.faq-col { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); min-height: calc(48 * var(--u)); padding-block: calc(10 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--ink-2); transition: transform .2s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 calc(30 * var(--u)) calc(14 * var(--u)) 0; font-size: calc(15 * var(--u)); color: var(--ink-2); }
.cta { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: calc(20 * var(--u)) calc(40 * var(--u)); margin-top: calc(20 * var(--u)); padding: clamp(24 * var(--u), 3.5cqi, 40 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--band); color: var(--band-ink); }
.cta-text { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.cta-title { font-size: clamp(22 * var(--u), 2.2cqi, 28 * var(--u)); line-height: 1.18; font-weight: 700; letter-spacing: -0.025em; }
.cta-note { font-size: calc(14 * var(--u)); color: var(--band-ink-2); }
.cta .field { border-color: transparent; }

/* ---------- Footer ---------- */
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)) calc(24 * var(--u)); padding-block: calc(24 * var(--u)); font-size: calc(14 * var(--u)); color: var(--ink-2); }
.foot-l { display: flex; flex-direction: column; gap: calc(4 * var(--u)); max-width: calc(560 * var(--u)); }
.foot-l b { font-size: calc(16 * var(--u)); color: var(--ink); }
.foot-l a { color: var(--ink); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 calc(20 * var(--u)); }
.foot nav a { display: inline-flex; align-items: center; min-height: calc(44 * var(--u)); color: var(--ink-2); }

/* ---------- Phones: the button stays one tap away once the boxes scroll off screen ---------- */
.mbar { display: none; }

/* ---------- Simple pages (not found, the spots page stand-in) ---------- */
.page { min-height: 60vh; display: flex; align-items: center; }
.page .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--u)); padding-block: calc(64 * var(--u)); }
.page .h2 { max-width: 20em; }
.page p { max-width: 36em; color: var(--ink-2); }

/* ---------- Desktop, 1024px and wider: keeps the scaled copy exact ---------- */
@container site (min-width: 1024px) {
  /* The three figures' hairlines are inset shadows: a 1px border doesn't shrink with the page,
     and the room it took would cost the texts their 1440px line breaks */
  .value-strip { border: 0; padding: calc(1 * var(--u)); box-shadow: inset 0 0 0 1px var(--line); }
  .vs-item + .vs-item { border-left: 0; padding-left: calc(19 * var(--u)); box-shadow: inset 1px 0 0 var(--line); }
  /* The website boxes: the font's "normal" line height is rounded to whole pixels, so it's set in --u */
  .field input { line-height: calc(23 * var(--u)); }
  .hero .field input { line-height: calc(24 * var(--u)); }
}

/* ---------- Narrower pages (container queries: the width of .site) ---------- */
/* Tablets and phones, below 1024px: the first screen's columns wrap, the headline wraps freely
   at its own size, and the quick answers go under their heading */
@container site (max-width: 1023.98px) {
  .row { flex-wrap: wrap; }
  .h1 { font-size: clamp(38 * var(--u), 4.4cqi, 56 * var(--u)); }
  .h1 br { display: none; }
  .faq-wrap { grid-template-columns: minmax(0, 1fr); }
}
@container site (max-width: 900px) {
  .where { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "film" "l1" "l2" "l3"; }
  .where-head { padding-bottom: calc(20 * var(--u)); }
  .l { padding-block: calc(8 * var(--u)) calc(12 * var(--u)); }
  .l1 { padding-top: calc(24 * var(--u)); }
  .proof, .cta { grid-template-columns: minmax(0, 1fr); }
}
@container site (max-width: 760px) {
  .links { gap: calc(16 * var(--u)); font-size: calc(14 * var(--u)); }
  .links .hide-sm { display: none; }
  .gs li { padding-inline: calc(20 * var(--u)); }
  .play { width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
  .value-strip { grid-template-columns: minmax(0, 1fr); }
  .vs-item { flex-direction: row; align-items: baseline; gap: calc(12 * var(--u)); }
  .vs-item + .vs-item { border-left: 0; border-top: 1px solid var(--line); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq-col + .faq-col { border-top: 0; }
  .mbar { display: block; position: sticky; bottom: 0; z-index: 20; padding: calc(10 * var(--u)) max(16 * var(--u), env(safe-area-inset-right, 0px)) calc(10 * var(--u) + env(safe-area-inset-bottom, 0px)) max(16 * var(--u), env(safe-area-inset-left, 0px)); background: rgba(255, 255, 255, .94); background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(calc(12 * var(--u))); backdrop-filter: blur(calc(12 * var(--u))); border-top: 1px solid var(--line); box-shadow: 0 calc(-8 * var(--u)) calc(24 * var(--u)) rgba(11, 27, 63, .08); visibility: hidden; transform: translateY(100%); transition: transform .25s ease, visibility 0s linear .25s; }
  .mbar.on { visibility: visible; transform: none; transition: transform .25s ease; }
  .mbar .btn { width: 100%; padding-block: calc(14 * var(--u)); }
}
/* Phones: the first screen is the headline, the website box and the video, nothing else */
@container site (max-width: 520px) {
  .nav .wrap { padding-block: calc(6 * var(--u)); min-height: calc(56 * var(--u)); }
  .links { display: none; }
  .hero { padding-block: calc(14 * var(--u)) calc(28 * var(--u)); }
  /* One column, in the order a phone visitor needs it: what this is, the box, the video */
  .row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: calc(14 * var(--u)); }
  .col { display: contents; }
  .kicker { order: 1; flex-direction: column; gap: calc(2 * var(--u)); }
  .kicker-not { padding-left: 0; border-left: 0; }
  .h1 { order: 2; font-size: calc(32 * var(--u)); }
  .lead { display: none; }
  .hero .field { order: 3; }
  .field .in { flex-basis: 100%; }
  .field input { padding-block: calc(12 * var(--u)); }
  .field .btn { flex: 1 1 100%; padding-block: calc(15 * var(--u)); }
  .field .fc { flex: 1 1 100%; min-height: calc(46 * var(--u)); margin: calc(-4 * var(--u)) 0 0; padding: 0 calc(12 * var(--u)); }
  .field .fc::before { left: calc(12 * var(--u)); right: calc(12 * var(--u)); top: 0; bottom: auto; width: auto; height: 1px; }
  .field .fc-chev { margin-left: auto; }
  /* The three promises as one quiet line under the button */
  .ticks { order: 5; gap: 0; font-size: calc(12 * var(--u)); }
  .ticks li { gap: 0; }
  .ticks svg { display: none; }
  .ticks li + li::before { content: "·"; margin-inline: calc(6 * var(--u)); }
  /* Video: a real player shape right under the box, scaled so nothing overlaps */
  .video { order: 6; aspect-ratio: 4 / 3; }
  .video > .gs.mini { top: calc(12 * var(--u)); width: 88%; }
  .video .gs.mini .gs-q { gap: calc(10 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); font-size: calc(13 * var(--u)); }
  .video .gs.mini ul { padding: calc(3 * var(--u)) 0 calc(4 * var(--u)); font-size: calc(12 * var(--u)); }
  .video .gs.mini li { padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) calc(36 * var(--u)); }
  .play { bottom: 20%; }
  .video-meta { left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(10 * var(--u)); font-size: calc(12 * var(--u)); }
  .dur { padding: calc(2 * var(--u)) calc(8 * var(--u)); }
  .video + .vline { order: 6; }
  /* The three figures: one short line each */
  .value-strip { order: 7; margin-top: calc(6 * var(--u)); }
  .vs-item { align-items: baseline; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); }
  .vs-item b { font-size: calc(18 * var(--u)); }
  .vs-item span { font-size: calc(13 * var(--u)); }
  .where-head { padding-bottom: calc(16 * var(--u)); }
  /* The clip: a square frame, which plays the square cut (main.js picks it from the frame's shape) */
  .film-frame { aspect-ratio: 1; }
  .l { padding-block: calc(6 * var(--u)) calc(10 * var(--u)); }
  .l2 b, .l3 b { display: none; }
  /* The still Google page: shorter on phones, with one ad and one result */
  .gpage { gap: calc(16 * var(--u)); padding: calc(16 * var(--u)); }
  .gp-ad i:last-child, .gp-res + .gp-res { display: none; }
  .proof { gap: calc(22 * var(--u)); }
  .chips { gap: calc(8 * var(--u)); }
  .chip-q { min-height: calc(46 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); }
  .faq-wrap { gap: calc(14 * var(--u)); }
  .cta { margin-top: calc(12 * var(--u)); padding: calc(22 * var(--u)); }
  .foot .wrap { padding-block: calc(20 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .peek-caret { animation: none; }
  .faq summary svg, .mbar, .mbar.on, .lm-move, .vline::before, .vline i, .vline i::after, .sound { transition: none; }
  .logo:hover .lm-move, .logo:focus-visible .lm-move { transform: none; }
  .logo:hover .lm-press, .logo:hover .lm-pill, .logo:hover .lm-ripple,
  .logo:focus-visible .lm-press, .logo:focus-visible .lm-pill, .logo:focus-visible .lm-ripple { animation: none; }
}