/* Platapode: shared design tokens and base reset, used by every page. */

:root {
  --bg: #FFFFFF;
  --bg-1: #F6F5F1;
  --bg-2: #EEEBE3;
  --bg-3: #E5E1D5;
  --ink: #14151A;
  --ink-dim: rgba(20,21,26,0.68);
  --ink-mute: rgba(20,21,26,0.6);   /* was .42; darkened to meet WCAG AA 4.5:1 on white and sand */
  --rule: rgba(20,21,26,0.10);
  --rule-strong: rgba(20,21,26,0.20);
  --accent: #C93412;
  --accent-2: #D5301A;
  --accent-dim: rgba(201,52,18,0.10);
  --accent-blue: #2E5266;
  --accent-blue-dim: rgba(46,82,102,0.10);
  --sand: #8F7314;
  --navy: #0E1A30;
  --terracotta: #B8672E;
  --terracotta-dim: rgba(184,103,46,0.16);
  --on-accent: #FFFFFF;
  --good: #2F8F5B;
  --good-dim: rgba(47,143,91,0.12);
  --ease: cubic-bezier(.16,.8,.28,1);
  --container: 1240px;
  --tint: rgba(20, 21, 26, 0.05);
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; }

/* Approved Platapode logo (raster master) */
.brand-mark { display: block; height: 17px; width: auto; flex: none; }

/* Inner pages — match the home page's card and label style
   (forms: red top edge = action; legal/confirmation pages: navy top edge; no heavy shadows) */
body .pf-card, body .aq-card { box-shadow: none; border-top: 3px solid var(--accent-2); }
body .lg-card, body .ty-card { box-shadow: none; border-top: 3px solid var(--navy); }
body .pf-eyebrow, body .aq-eyebrow, body .pf-group-label,
body .pf-field label, body .aq-field label, body .lg-eyebrow { font-size: 11.5px; }
body .pf-field label.pf-choice { font-size: 13.5px; }
body .aq-progress-top { font-size: 11px; }
/* Long/pricing forms: no empty gap or divider above the first group */
body .pf-card > .pf-group:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

/* Readability pass — form question labels in sentence case, hints secondary, placeholders AA contrast */
body .pf-field > label:not(.pf-choice),
body .aq-field > label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  color: var(--ink);
}
body .pf-field .hint { color: var(--ink-dim); }
body input::placeholder, body textarea::placeholder { color: rgba(20,21,26,0.6) !important; opacity: 1; }
@media (max-width: 360px) { body .pf-card input::placeholder { font-size: 13.5px; } }

/* Form submit buttons: navy with white text, same as every primary button on a light background (27 Sept) */
body .pf-submit, body .aq-submit, body .audit-form .audit-submit {
  background: var(--navy);
  color: #fff;
  box-shadow: none;
}
body .pf-submit:hover, body .aq-submit:hover, body .audit-form .audit-submit:hover {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 0 26px rgba(14,26,48,.35);
}

/* Forms: when a required answer is missed, the browser scrolls to it. Keep the question
   itself in view above the box (and clear of the bottom bar), not cut off at the top. */
input, select, textarea { scroll-margin-top: 110px; scroll-margin-bottom: 100px; }
/* audit B5: readable group labels */
body .pf-group-label{color:#D12F1A}
/* audit handoff 2: the trust strip line keeps the look it had as a heading */
.trust-item .trust-h3{font-family:var(--font-heading);font-weight:700;font-size:1.17em;margin:0}
/* contrast (approved 27 Sept): links on navy bands */
.suits-navy .see-also a{color:#F2A08A}

/* Line under the hero "Request a Review" (approved 27 Sept) */
.cta-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); max-width: 34em; }

/* "What the review looks at" on the Request a Review page (moved 27 Sept) */
.rv-block { margin-top: clamp(36px,5vw,56px); max-width: 880px; }
.rv-eyebrow { font: 600 11.5px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: #C93412; margin: 0 0 6px; }
.rv-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(14,26,48,.12); }
.rv-list li { padding: 14px 0; border-bottom: 1px solid rgba(14,26,48,.12); }
.rv-list h3 { margin: 0 0 3px; font-family: var(--font-heading); font-weight: 500; font-size: 17px; color: var(--ink); }
.rv-list p { margin: 0; color: #5b6272; font-size: 14px; line-height: 1.55; }
@media (min-width: 760px) { .rv-list { grid-template-columns: repeat(3,1fr); column-gap: 36px; } }

/* =========================================================
   Navy first screen on the campaign pages (approved 27 Sept, D1)
   Same navy as the "Who it suits" band. Trust strip turns white.
========================================================= */
body.page-navy-hero .hero-section { background: #0E1A30; }
body.page-navy-hero .field-scrim { display: none; }
body.page-navy-hero .hero-section .hero-headline { color: #f3ede2; }
body.page-navy-hero .hero-section .highlight { color: #C93412; }
body.page-navy-hero .hero-section .hero-subheadline, body.page-navy-hero .hero-section .cta-note, body.page-navy-hero .hero-section .hero-focus { color: #aeb6c4; }
body.page-navy-hero .hero-section .hero-focus strong { color: #f3ede2; }
body.page-navy-hero .hero-section .service-tag { color: #e9e4da; }
html body.page-navy-hero .hero-section .back-link { color: #c9c3b8 !important; border: 0; background: transparent; min-height: 0; padding: 0; font-weight: 500; font-size: 14px; }
html body.page-navy-hero .hero-section .back-link .back-ar { color: #D97757; }
html body.page-navy-hero .hero-section .back-link:hover { color: #f3ede2 !important; text-decoration: underline !important; text-underline-offset: 4px; }
body.page-navy-hero .hero-section .hero-call-link { color: #d8d2c7; }
body.page-navy-hero .hero-section .btn-primary { background: #D97757; color: #0E1A30; }
body.page-navy-hero .hero-section .btn-primary .ar { color: #0E1A30; }
body.page-navy-hero .hero-section .btn-primary:hover { background: #E0784F; box-shadow: 0 0 26px rgba(217,119,87,.35); }
body.page-navy-hero .stencil--hero { opacity: .55; }
html body.page-navy-hero .trust-section--navy { background: #fff !important; border-bottom: 1px solid rgba(14,26,48,.1); }
html body.page-navy-hero .trust-section--navy .trust-item .trust-h3, html body.page-navy-hero .trust-section--navy .trust-highlight { color: #0E1A30 !important; }
html body.page-navy-hero .trust-section--navy .trust-item .trust-h3 .t-plus, html body.page-navy-hero .trust-section--navy .trust-icon { color: #C93412 !important; }
html body.page-navy-hero .trust-section--navy .trust-item p, html body.page-navy-hero .trust-section--navy .trust-compact, html body.page-navy-hero .trust-section--navy .trust-worldwide-line { color: #5b6272 !important; }
html body.page-navy-hero .trust-section--navy .trust-item { border-right-color: rgba(14,26,48,.12); }
/* Search hero animation */
.sx { --ln: #e9e4da; --hi: #E0784F; width: 100%; max-width: 400px; margin: 0 auto; }
.sx-bar { display: flex; align-items: center; gap: 6px; border: 2px solid var(--ln); border-radius: 999px; padding: 12px 18px; font: 500 15px/1.2 var(--font-body, system-ui, sans-serif); color: var(--ln); background: rgba(255,255,255,.04); }
.sx-q { white-space: nowrap; overflow: hidden; }
.sx-caret { width: 2px; height: 18px; background: var(--hi); animation: sxBlink 1s steps(1) infinite; }
.sx-bar svg { margin-left: auto; width: 22px; height: 22px; fill: none; stroke: var(--ln); stroke-width: 2; flex: none; }
.sx-res { margin: 18px 0 0 40px; display: grid; gap: 12px; }
.sx-row { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; row-gap: 6px; align-items: center; border: 2px solid var(--ln); border-radius: 8px; padding: 10px 14px; opacity: 0; transform: translateY(8px); position: relative; }
.sx-row i { grid-row: span 2; width: 24px; height: 24px; border: 2px solid var(--ln); border-radius: 50%; }
.sx-row b { display: block; height: 2px; background: var(--ln); width: 85%; }
.sx-row b.s { width: 55%; opacity: .6; }
.sx-row em { position: absolute; right: 12px; top: 8px; font: 600 10px/1 system-ui, sans-serif; letter-spacing: .08em; color: var(--hi); font-style: normal; }
.sx-hit { border-color: var(--hi); }
.sx-hit i { border-color: var(--hi); }
.sx-hit b { background: var(--hi); }
.sx.show .sx-row { animation: sxRow .5s cubic-bezier(.22,1,.36,1) forwards; }
.sx.show .sx-row:nth-child(2) { animation-delay: .12s; }
.sx.show .sx-row:nth-child(3) { animation-delay: .24s; }
.sx.show .sx-row:nth-child(4) { animation-delay: .36s; }
@keyframes sxRow { to { opacity: 1; transform: none; } }
@keyframes sxBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sx-row { opacity: 1; transform: none; } .sx-caret { animation: none; } }
html body.page-navy-hero .trust-section--navy .trust-icon-au { color: #0E1A30 !important; }
html body.page-navy-hero .trust-section--navy .trust-icon-globe { color: #C93412 !important; background: #fff !important; }
body.page-navy-hero .hero-section .service-tag::before { background: #D97757; box-shadow: 0 0 0 4px rgba(217,119,87,.14); }

/* Homepage blue on the campaign pages' dark sections; phones: blue behind the text only (approved 27 Sept) */
body.page-navy-hero .hero-section, body.page-navy-hero .suits-navy {
  background: radial-gradient(120% 90% at 78% 10%, rgba(48,94,152,.34) 0%, rgba(22,42,72,.14) 40%, transparent 70%), linear-gradient(180deg, #0a1224 0%, #060c1a 55%, #04070f 100%) !important;
}
body.page-navy-hero #signalField { opacity: .38; }
@media (max-width: 860px) {
  body.page-navy-hero .hero-section { background: #fff !important; overflow: hidden; }
  body.page-navy-hero .hero-container { position: relative; z-index: 2; padding-bottom: 30px; }
  body.page-navy-hero .hero-container::before { content: ""; position: absolute; top: -200px; bottom: 0; left: -100vw; right: -100vw; z-index: -1;
    background: radial-gradient(90% 60% at 80% 12%, rgba(48,94,152,.34) 0%, rgba(22,42,72,.14) 45%, transparent 75%), linear-gradient(180deg, #0a1224 0%, #060c1a 60%, #04070f 100%); }
  body.page-navy-hero .field-wrap { display: none; }
  body.page-navy-hero .hero-sig { margin-top: 34px !important; }
  body.page-navy-hero .sx { --ln: #0E1A30; --hi: #C93412; }
  body.page-navy-hero .sx-bar { background: #fff; }
}

/* Campaign pages under "Google Ads Management" in the menu (approved 27 Sept) */
@media (min-width: 861px) { .nav-ga-wrap .nav-cta-menu { right: auto; min-width: 210px; } }
/* Phones: light Plotti sits above the blue text panel */
@media (max-width: 860px) { body.page-navy-hero .stencil--hero { z-index: 3; } }

/* "Who it suits" as a card: option B layout with the plain heading and text (approved 27 Sept) */
html body.page-navy-hero .suits-navy { background: #F6F5F1 !important; padding: clamp(40px,6vw,72px) 0 !important; }
html body.page-navy-hero .suits-navy .account-intro-layout { background: radial-gradient(120% 90% at 78% 10%, rgba(48,94,152,.34) 0%, rgba(22,42,72,.14) 40%, transparent 70%), linear-gradient(180deg, #0a1224 0%, #060c1a 55%, #04070f 100%); border-radius: 6px; border-top: 3px solid #D97757; padding: clamp(28px,5vw,60px) !important; }
html body.page-navy-hero .suits-navy .account-intro-copy { max-width: 620px; }
html body.page-navy-hero .suits-navy .suits-cta { margin-top: 24px; }
html body.page-navy-hero .suits-navy .suits-cta .btn-primary { display: inline-flex !important; width: auto !important; justify-content: flex-start !important; background: transparent !important; box-shadow: none !important; padding: 0 0 3px !important; min-height: 0; border-radius: 0; border-bottom: 1px solid #D97757; color: #f3ede2 !important; font-weight: 500; }
html body.page-navy-hero .suits-navy .suits-cta .btn-primary .ar { color: #D97757 !important; }
html body.page-navy-hero .suits-navy .suits-cta .btn-primary:hover { color: #fff !important; border-bottom-color: #f3ede2; }
html body.page-navy-hero .suits-navy .suits-cta { align-items: flex-start !important; }

/* Campaign heroes: quiet "Request a Review" link; Search box overlaps the blue edge on phones (approved 27 Sept) */
body.page-navy-hero .hero-link { margin: 22px 0 0; }
body.page-navy-hero .hero-link a { color: #f3ede2; text-decoration: none; border-bottom: 1px solid #D97757; padding-bottom: 3px; font-weight: 500; font-size: 15px; transition: color .2s, border-color .2s; }
body.page-navy-hero .hero-link a span { color: #D97757; margin-left: 4px; }
body.page-navy-hero .hero-link a:hover { color: #fff; border-bottom-color: #f3ede2; }
@media (max-width: 860px) {
  body.page-navy-hero .hero-section:has(.sx) .hero-container { padding-bottom: 110px !important; }
  body.page-navy-hero .hero-section:has(.sx) .hero-sig { margin-top: -86px !important; position: relative; z-index: 4; }
  body.page-navy-hero .sx-bar { box-shadow: 0 12px 30px rgba(4,7,15,.25); }
}
@media (max-width: 860px) { body.page-navy-hero .sx-row { background: #fff; } }

body.page-navy-hero .hero-sub2 { margin: 10px 0 0; color: #8f98aa; font-size: 15px; line-height: 1.6; max-width: 34em; }
/* Campaign hero animations (shared). Colours follow --ln (lines) and --hi (accent). */
.vz { --ln: #e9e4da; --hi: #E0784F; width: 100%; max-width: 400px; margin: 0 auto; }
.vz * { box-sizing: border-box; }
.vz b { display: block; height: 2px; background: var(--ln); border-radius: 1px; width: 100%; opacity: .75; }
.vz b.s { width: 60%; opacity: .45; }
.vz b.h { height: 3px; width: 70%; opacity: 1; }
.vz em { font: 600 9px/1 system-ui, sans-serif; letter-spacing: .08em; color: var(--hi); font-style: normal; }
@media (max-width: 860px) { body.page-navy-hero .vz { --ln: #0E1A30; --hi: #C93412; } }
/* Display: a website whose ad slots fill one by one */
.vz-win { border: 2px solid var(--ln); border-radius: 8px; overflow: hidden; }
.vz-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 2px solid var(--ln); }
.vz-bar i { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--ln); }
.vz-bar b { margin-left: 8px; width: 45%; opacity: .45; }
.vz-body { display: grid; grid-template-columns: 1fr 34%; gap: 12px; padding: 12px; }
.vz-main { display: grid; gap: 7px; align-content: start; }
.vz-img { height: 54px; border: 2px solid var(--ln); border-radius: 4px; opacity: .6; margin: 3px 0; }
.vz-side { display: grid; gap: 10px; align-content: start; }
.vz-slot { position: relative; border: 2px dashed var(--ln); border-radius: 5px; opacity: .3; height: 72px; transition: opacity .5s, border-color .5s; }
.vz-slot.s2 { height: 52px; }
.vz-banner { margin: 0 12px 12px; height: 34px; }
.vz-slot .ad { position: absolute; inset: 6px; display: grid; grid-template-columns: 22px 1fr; gap: 5px 8px; align-content: center; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s cubic-bezier(.22,1,.36,1); }
.vz-slot .ad i { grid-row: span 2; width: 22px; height: 22px; border: 2px solid var(--ln); border-radius: 3px; }
.vz-slot em { position: absolute; top: 5px; right: 6px; opacity: 0; transition: opacity .4s; }
.vz-banner .ad { grid-template-columns: 16px 1fr; } .vz-banner .ad i { width: 16px; height: 16px; grid-row: span 1; } .vz-banner .ad b.s { display: none; }
.vz.show .vz-slot { opacity: 1; border-style: solid; }
.vz.show .vz-slot .ad { opacity: 1; transform: none; }
.vz.show .vz-slot em { opacity: 1; }
.vz.show .vz-slot.s2, .vz.show .vz-slot.s2 .ad, .vz.show .vz-slot.s2 em { transition-delay: .7s; }
.vz.show .vz-slot.s3, .vz.show .vz-slot.s3 .ad, .vz.show .vz-slot.s3 em { transition-delay: 1.4s; }
.vz-slot.hi { border-color: var(--hi); } .vz-slot.hi .ad i, .vz-slot.hi .ad b { border-color: var(--hi); background: var(--hi); } .vz-slot.hi .ad i { background: transparent; }
@media (prefers-reduced-motion: reduce) { .vz .vz-slot, .vz .vz-slot .ad, .vz .vz-slot em { opacity: 1; transform: none; transition: none; border-style: solid; } }
.vz-banner .ad b { width: 82%; }
/* YouTube: a short ad plays before the video */
.vz-yt .vz-player { position: relative; border: 2px solid var(--ln); border-radius: 10px; padding: 12px; }
.vz-yt .vz-screen { position: relative; aspect-ratio: 16/9; border: 2px solid var(--ln); border-radius: 6px; overflow: hidden; }
.vz-yt .vz-play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%,-50%); opacity: .9; transition: opacity .5s; }
.vz-yt .vz-play svg { width: 100%; height: 100%; fill: none; stroke: var(--ln); stroke-width: 2; stroke-linejoin: round; }
.vz-yt .vz-adcard { position: absolute; left: 10px; bottom: 10px; width: 46%; display: grid; grid-template-columns: 26px 1fr; gap: 5px 8px; align-items: center; padding: 8px; border: 2px solid var(--hi); border-radius: 5px; background: rgba(4,7,15,.35); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s cubic-bezier(.22,1,.36,1); }
.vz-yt .vz-adcard i { grid-row: span 2; width: 26px; height: 26px; border: 2px solid var(--hi); border-radius: 4px; }
.vz-yt .vz-adcard b { background: var(--hi); }
.vz-yt .vz-adtag { position: absolute; left: 10px; top: 9px; opacity: 0; transition: opacity .4s; }
.vz-yt .vz-skip { position: absolute; right: 10px; bottom: 10px; width: 54px; height: 20px; border: 1.5px solid var(--ln); border-radius: 3px; opacity: 0; transition: opacity .4s 1.6s; }
.vz-yt .vz-track { position: relative; height: 4px; margin-top: 12px; border-radius: 2px; background: rgba(233,228,218,.18); }
.vz-yt .vz-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--hi); }
.vz-yt .vz-row { display: flex; gap: 8px; margin-top: 10px; } .vz-yt .vz-row b { width: 30%; } .vz-yt .vz-row b.s { width: 18%; }
.vz-yt.show .vz-play { opacity: .15; }
.vz-yt.show .vz-adcard, .vz-yt.show .vz-adtag { opacity: 1; transform: none; }
.vz-yt.show .vz-skip { opacity: .8; }
.vz-yt.show .vz-fill { width: 38%; transition: width 3.6s linear; }
@media (max-width: 860px) { body.page-navy-hero .vz-yt .vz-track { background: rgba(14,26,48,.12); } body.page-navy-hero .vz-yt .vz-adcard { background: #fff; } }
@media (prefers-reduced-motion: reduce) { .vz-yt .vz-adcard, .vz-yt .vz-adtag, .vz-yt .vz-skip { opacity: 1; transform: none; } .vz-yt .vz-fill { width: 38%; } }
/* Shopping: product cards arrive under a search */
.vz-shop .vz-q { display: flex; align-items: center; gap: 8px; border: 2px solid var(--ln); border-radius: 999px; padding: 10px 16px; font: 500 14px/1.2 system-ui, sans-serif; color: var(--ln); }
.vz-shop .vz-q svg { margin-left: auto; width: 20px; height: 20px; fill: none; stroke: var(--ln); stroke-width: 2; flex: none; }
.vz-shop .vz-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.vz-shop .vz-card { position: relative; border: 2px solid var(--ln); border-radius: 6px; padding: 8px; display: grid; gap: 6px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s cubic-bezier(.22,1,.36,1); }
.vz-shop .vz-card .ph { aspect-ratio: 1; border: 2px solid var(--ln); border-radius: 4px; opacity: .7; }
.vz-shop .vz-card b.p { width: 40%; height: 3px; opacity: 1; }
.vz-shop .vz-card em { position: absolute; top: 12px; left: 12px; opacity: .9; }
.vz-shop .vz-card.hi { border-color: var(--hi); } .vz-shop .vz-card.hi .ph { border-color: var(--hi); } .vz-shop .vz-card.hi b.p { background: var(--hi); }
.vz-shop.show .vz-card { opacity: 1; transform: none; }
.vz-shop.show .vz-card:nth-child(2) { transition-delay: .25s; } .vz-shop.show .vz-card:nth-child(3) { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .vz-shop .vz-card { opacity: 1; transform: none; } }
/* Search Partners: one search, the ad shows on Google and on partner sites */
.vz-sp .vz-q { display: flex; align-items: center; gap: 8px; border: 2px solid var(--ln); border-radius: 999px; padding: 10px 16px; font: 500 14px/1.2 system-ui, sans-serif; color: var(--ln); }
.vz-sp .vz-q svg { margin-left: auto; width: 20px; height: 20px; fill: none; stroke: var(--ln); stroke-width: 2; flex: none; }
.vz-sp .vz-links { display: block; width: 100%; height: 34px; }
.vz-sp .vz-links path { fill: none; stroke: var(--ln); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .5; }
.vz-sp .vz-sites { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.vz-sp .vz-site { border: 2px solid var(--ln); border-radius: 6px; overflow: hidden; }
.vz-sp .vz-site .top { display: flex; gap: 3px; padding: 5px 6px; border-bottom: 2px solid var(--ln); }
.vz-sp .vz-site .top i { width: 4px; height: 4px; border-radius: 50%; border: 1.5px solid var(--ln); }
.vz-sp .vz-site .bd { padding: 7px; display: grid; gap: 5px; }
.vz-sp .vz-ad { position: relative; border: 2px solid var(--ln); border-radius: 4px; padding: 6px; display: grid; gap: 4px; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s cubic-bezier(.22,1,.36,1); }
.vz-sp .vz-ad { padding-right: 22px; }
.vz-sp .vz-ad em { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); font-size: 8px; }
.vz-sp .vz-site.g .vz-ad { border-color: var(--hi); } .vz-sp .vz-site.g .vz-ad b { background: var(--hi); }
.vz-sp.show .vz-ad { opacity: 1; transform: none; }
.vz-sp.show .vz-site:nth-child(2) .vz-ad { transition-delay: .6s; } .vz-sp.show .vz-site:nth-child(3) .vz-ad { transition-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) { .vz-sp .vz-ad { opacity: 1; transform: none; } }
/* Performance Max: one campaign, lines out to Google's channels */
.vz-pm { position: relative; }
.vz-pm svg.vz-net { display: block; width: 100%; height: auto; overflow: visible; }
.vz-pm .ln { fill: none; stroke: var(--ln); stroke-width: 1.5; opacity: .35; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset .9s ease, opacity .9s; }
.vz-pm .nd rect, .vz-pm .nd circle, .vz-pm .nd path { fill: none; stroke: var(--ln); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vz-pm .nd { opacity: .35; transition: opacity .5s; }
.vz-pm .core rect { fill: none; stroke: var(--hi); stroke-width: 2.5; }
.vz-pm .core path { fill: none; stroke: var(--hi); stroke-width: 2; stroke-linecap: round; }
.vz-pm.show .ln { stroke-dashoffset: 0; opacity: .75; }
.vz-pm.show .nd { opacity: 1; }
.vz-pm.show .d2 { transition-delay: .25s; } .vz-pm.show .d3 { transition-delay: .5s; } .vz-pm.show .d4 { transition-delay: .75s; } .vz-pm.show .d5 { transition-delay: 1s; } .vz-pm.show .d6 { transition-delay: 1.25s; }
@media (prefers-reduced-motion: reduce) { .vz-pm .ln { stroke-dashoffset: 0; opacity: .75; } .vz-pm .nd { opacity: 1; } }
/* Demand Gen: a feed on a phone, an image/video ad slides into it */
.vz-dg .vz-phone { width: 62%; margin: 0 auto; border: 2px solid var(--ln); border-radius: 22px; padding: 14px 10px 18px; }
.vz-dg .vz-notch { width: 34%; height: 5px; margin: 0 auto 12px; border-radius: 3px; border: 1.5px solid var(--ln); }
.vz-dg .vz-feed { position: relative; height: 250px; overflow: hidden; }
.vz-dg .vz-stack { display: grid; gap: 10px; transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.vz-dg .vz-post { border: 2px solid var(--ln); border-radius: 6px; padding: 8px; display: grid; gap: 6px; opacity: .55; }
.vz-dg .vz-post .ph { height: 58px; border: 2px solid var(--ln); border-radius: 4px; }
.vz-dg .vz-post.ad { position: relative; opacity: 1; border-color: var(--hi); }
.vz-dg .vz-post.ad .ph { border-color: var(--hi); position: relative; height: 80px; }
.vz-dg .vz-post.ad .ph::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%,-50%); border-left: 14px solid var(--hi); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.vz-dg .vz-post.ad b.h { background: var(--hi); }
.vz-dg .vz-post.ad em { position: absolute; top: 12px; right: 12px; }
.vz-dg .vz-stack { transform: translateY(0); }
.vz-dg.show .vz-stack { transform: translateY(-142px); }
@media (prefers-reduced-motion: reduce) { .vz-dg .vz-stack { transform: translateY(-142px); transition: none; } }
/* App: ad -> install -> the app gets used */
.vz-app { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.vz-app .vz-phone { border: 2px solid var(--ln); border-radius: 20px; padding: 12px 10px 16px; }
.vz-app .vz-notch { width: 34%; height: 5px; margin: 0 auto 10px; border-radius: 3px; border: 1.5px solid var(--ln); }
.vz-app .vz-card { position: relative; border: 2px solid var(--hi); border-radius: 6px; padding: 8px; display: grid; grid-template-columns: 30px 1fr; gap: 6px 8px; align-items: center; }
.vz-app .vz-card i { grid-row: span 2; width: 30px; height: 30px; border: 2px solid var(--hi); border-radius: 8px; }
.vz-app .vz-card b { background: var(--hi); }
.vz-app .vz-card em { position: absolute; top: 6px; right: 7px; }
.vz-app .vz-inst { margin-top: 10px; height: 22px; border: 2px solid var(--ln); border-radius: 11px; position: relative; overflow: hidden; }
.vz-app .vz-inst span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--hi); opacity: .85; }
.vz-app .vz-lines { margin-top: 10px; display: grid; gap: 6px; }
.vz-app .vz-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.vz-app .vz-grid i { aspect-ratio: 1; border: 2px solid var(--ln); border-radius: 7px; opacity: .45; }
.vz-app .vz-grid i.me { opacity: 0; border-color: var(--hi); transform: scale(.6); transition: opacity .4s 1.8s, transform .4s 1.8s; }
.vz-app .vz-use { margin-top: 12px; display: grid; gap: 6px; }
.vz-app .vz-use b { width: 0; transition: width .6s; background: var(--hi); opacity: 1; }
.vz-app.show .vz-inst span { width: 100%; transition: width 1.5s ease; }
.vz-app.show .vz-grid i.me { opacity: 1; transform: none; }
.vz-app.show .vz-use b { width: 90%; transition-delay: 2.4s; } .vz-app.show .vz-use b:nth-child(2) { width: 70%; transition-delay: 2.7s; } .vz-app.show .vz-use b:nth-child(3) { width: 80%; transition-delay: 3s; }
@media (prefers-reduced-motion: reduce) { .vz-app .vz-inst span { width: 100%; } .vz-app .vz-grid i.me { opacity: 1; transform: none; } .vz-app .vz-use b { width: 80%; } }
/* Landing pages: the ad, then the page it sends people to, checked */
.vz-lp .vz-ad { position: relative; width: 62%; margin: 0 0 0 auto; border: 2px solid var(--hi); border-radius: 6px; padding: 9px 10px; display: grid; gap: 6px; }
.vz-lp .vz-ad b { background: var(--hi); } .vz-lp .vz-ad em { position: absolute; top: 7px; right: 8px; }
.vz-lp .vz-link { display: block; width: 100%; height: 34px; }
.vz-lp .vz-link path { fill: none; stroke: var(--ln); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .55; }
.vz-lp .vz-link path.hd { stroke-dasharray: none; }
.vz-lp .vz-page { border: 2px solid var(--ln); border-radius: 8px; overflow: hidden; }
.vz-lp .vz-lpbar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 2px solid var(--ln); }
.vz-lp .vz-lpbar i { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--ln); }
.vz-lp .vz-lpbar b { margin-left: 8px; width: 45%; opacity: .45; }
.vz-lp .vz-lpb { padding: 12px 14px 14px; display: grid; gap: 9px; }
.vz-lp .vz-row { display: grid; grid-template-columns: 1fr 18px; align-items: center; gap: 10px; }
.vz-lp .vz-row > div { display: grid; gap: 5px; }
.vz-lp .vz-img { height: 44px; border: 2px solid var(--ln); border-radius: 4px; opacity: .55; }
.vz-lp .vz-btn { height: 22px; width: 44%; border: 2px solid var(--ln); border-radius: 4px; transition: border-color .4s, background .4s; }
.vz-lp .vz-h { height: 3px; width: 72%; background: var(--ln); border-radius: 2px; transition: background .4s; }
.vz-lp .vz-chk { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ln); opacity: .35; position: relative; transition: opacity .4s, border-color .4s; }
.vz-lp .vz-chk::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--hi); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.vz-lp.show .vz-chk { opacity: 1; border-color: var(--hi); }
.vz-lp.show .vz-chk::after { transform: rotate(45deg) scale(1); }
.vz-lp.show .vz-h { background: var(--hi); }
.vz-lp.show .vz-btn { border-color: var(--hi); }
.vz-lp.show .r2 .vz-chk, .vz-lp.show .r2 .vz-chk::after { transition-delay: .5s; }
.vz-lp.show .r3 .vz-chk, .vz-lp.show .r3 .vz-chk::after, .vz-lp.show .vz-btn { transition-delay: 1s; }
.vz-lp.show .r4 .vz-chk, .vz-lp.show .r4 .vz-chk::after { transition-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) { .vz-lp .vz-chk { opacity: 1; border-color: var(--hi); } .vz-lp .vz-chk::after { transform: rotate(45deg) scale(1); } }
/* Landing pages page (approved 27 Sept) */
.lp-sec { padding: clamp(48px,7vw,84px) 0; }
.lp-stone { background: #F6F5F1; }
.lp-cols { display: grid; gap: 36px; }
@media (min-width: 861px) { .lp-cols { grid-template-columns: 1.2fr 1fr; column-gap: 72px; align-items: start; } }
.lp-h3 { font: 600 11.5px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: #C93412; margin: 6px 0 14px; }
.lp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(14,26,48,.12); }
.lp-list li { padding: 14px 0 14px 26px; border-bottom: 1px solid rgba(14,26,48,.12); position: relative; color: #2b2f3a; font-size: 15.5px; line-height: 1.5; }
.lp-list li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 10px; height: 2px; background: #C93412; }
.lp-narrow { max-width: 720px; }
.lp-quote { font-family: var(--font-heading); font-weight: 400; font-size: clamp(22px,2.6vw,30px); line-height: 1.3; color: var(--ink); max-width: 28ch; margin: 0; padding-left: 18px; border-left: 2px solid var(--accent-2); text-wrap: balance; }
.crumbs--end { margin-top: 28px; }
.nav-cta-menu a.nav-sep { border-top: 1px solid rgba(14,26,48,.18); }

/* Related links ("See also:"), approved 27 Sept: same look as the old Performance Max "See also" line */
.rel-line { margin: clamp(28px,4vw,40px) 0 0; font-size: 15px; color: var(--ink-mute); }
.rel-line a { display: table; margin-top: 4px; padding: 4px 0; color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
.rel-line + .back-bottom, .rel-line + .crumbs--end { margin-top: 18px; }
.ar-end { padding: 0 0 clamp(40px,6vw,64px); }
.bl-rel { margin-bottom: clamp(40px,6vw,64px); }

/* 27 Sept: Landing pages hero line, and "See also" links to blog posts in navy (service links stay terracotta) */
.hero-sub2 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #e0784f; }
.hero-sub2 a:hover { color: #fff; }
/* See also: every blog link (posts and the Blog page) in navy, all others stay red (30 Sept, Maya) */
.rel-line a[href*="blog/"] { color: var(--navy, #0E1A30); }
/* Footer columns "Campaigns" / "From the blog" (27 Sept, L4) */
.foot-col h2 { margin: 0 0 12px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.foot-col a { font-size: 14px; color: var(--ink-dim); text-decoration: none; display: inline-flex; min-height: 28px; align-items: center; }
.foot-col a:hover { color: var(--accent-2); }
/* Contact: quiet link to the service under the email (27 Sept, L7) */
.ct-svc { margin: 10px 0 0; font-size: 14px; }
.ct-svc a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
.ct-svc a span { color: var(--accent); }
.ct-svc a:hover { color: var(--ink); }
/* Footer: Campaigns / From the blog on a soft shaded panel (27 Sept, option B) */
.footer-grid:has(.foot-more) { grid-template-columns: 1.3fr .8fr 1.4fr; }
.foot-more { display: grid; grid-template-columns: 1fr; gap: 32px; background: #F3F1EC; padding: 22px 24px; border-radius: 3px; }
@media (max-width: 900px) { .footer-grid:has(.foot-more) { grid-template-columns: 1fr 1fr; } .foot-more { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-grid:has(.foot-more) { grid-template-columns: 1fr; } .foot-more { grid-template-columns: 1fr; gap: 22px; margin: 0 -20px; padding: 22px 20px; border-radius: 0; } .foot-col ul { flex-direction: row; flex-wrap: wrap; gap: 0 22px; } .foot-col a { min-height: 40px; } }
/* Footer From the blog: small photo beside each post (29 Sept) */
.fm-row { display: flex !important; align-items: center; gap: 12px; margin: 0 0 10px; }
.fm-row img { flex: none; width: 64px; height: 42px; object-fit: cover; }
/* In-post jump links without the red underline (29 Sept) */
.plain-links a { text-decoration: none !important; color: inherit !important; border: 0 !important; background: none !important; }
.plain-links a:hover, .plain-links a:focus-visible { text-decoration: underline !important; text-decoration-color: currentColor !important; }

/* Menu: non-clickable "Campaign types" / "Other" labels above the campaign links, which sit in a smaller size (29 Sept, Maya) */
.nav-menu-h { display: block; font: 600 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); cursor: default; user-select: none; }
@media (min-width: 861px) {
  .nav-menu-h { position: relative; padding: 14px 16px 8px; }
  .nav-links .nav-ga-wrap .nav-cta-menu a { font-size: 13.5px; padding: 8px 16px; }
  .nav-links .nav-ga-wrap .nav-menu-h + a { border-top: 0; }
}
@media (max-width: 860px) {
  .nav-menu-h { padding: 12px 0 4px 14px; }
  .nav-links .nav-ga-wrap .nav-cta-menu a { font-size: 14px; padding: 8px 0 8px 14px; border-bottom: 0; }
}
/* Phones (29 Sept, Maya): campaign list folds away under "Google Ads Management" and opens with the arrow beside it,
   so Why Us, Blog, Contact and Request a Review sit apart from it; the two review options only show on desktop hover. */
.nav-sub-toggle { display: none; }
@media (max-width: 860px) {
  .nav-ga-wrap { flex-direction: row !important; flex-wrap: wrap; align-items: center; }
  .nav-ga-wrap > a { flex: 1; }
  .nav-sub-toggle { display: block; width: 44px; height: 44px; margin: -8px -10px -8px 0; border: 0; background: none; cursor: pointer; position: relative; }
  .nav-sub-toggle::after { content: ""; position: absolute; left: 17px; top: 14px; width: 9px; height: 9px; border-right: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink); transform: rotate(45deg); transition: transform .2s; }
  .nav-ga-wrap.open .nav-sub-toggle::after { transform: rotate(-135deg); top: 19px; }
  .nav-ga-wrap .nav-cta-menu { display: none; flex-basis: 100%; }
  .nav-ga-wrap.open .nav-cta-menu { display: flex; }
  .nav-cta-wrap:not(.nav-ga-wrap) .nav-cta-menu { display: none; }
  /* Phones (29 Sept, Maya): the side line stops at App; Landing pages sits below a straight full-width line, styled like Why Us */
  .nav-ga-wrap .nav-cta-menu { border-left: 0 !important; margin-left: 0 !important; }
  .nav-ga-wrap .nav-cta-menu > :not(.nav-sep) { margin-left: 2px; box-shadow: inset 1px 0 0 rgba(14,26,48,.18); }
  .nav-links .nav-ga-wrap .nav-cta-menu a:not(.nav-sep) { font-size: 13px; }
  .nav-links .nav-ga-wrap .nav-cta-menu a.nav-sep { margin: 10px 0 0; padding: 12px 0 9px; border-top: 1px solid rgba(14,26,48,.18); font-size: 13.5px; font-weight: 500; color: rgba(20,21,26,.86); box-shadow: none; }
}
/* Phones (29 Sept, Maya approved): the open menu fills the screen below the header, so no page text peeks out under it */
@media (max-width: 860px) {
  .nav-links.is-open { height: calc(100vh - 60px); height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; border-bottom: 0; }
  body:has(.nav-links.is-open) { overflow: hidden; }
}
/* Desktop menu: stronger line and a little space above Landing pages (30 Sept, Maya approved option A) */
@media (min-width: 861px) { .nav-links .nav-ga-wrap .nav-cta-menu a.nav-sep { border-top: 1px solid rgba(14,26,48,.38) !important; margin-top: 6px; } }
/* Contact page on phones (30 Sept, Maya approved option B): Plotti small beside the heading, so the form sits higher */
@media (max-width: 760px) { .audit-intro:has(.ct-stencil) { position: relative; } .ct-stencil { position: absolute !important; right: 0; top: 0; width: 96px !important; height: auto !important; margin: 0 !important; } }

/* Guide link above See also on campaign pages (30 Sept, Maya approved B) */
.rel-line.rel-read{margin-bottom:6px}

/* See also / Read links smaller (30 Sept, Maya approved B) */
.rel-line{font-size:13px}
.rel-line a{margin-top:2px}

/* Landing pages: hero builds in like the other campaign heroes, plus line drawing in the grey section (30 Sept, Maya approved A + movement) */
.vz-lp .vz-link,.vz-lp .vz-page,.vz-lp .vz-row{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s cubic-bezier(.22,1,.36,1)}
.vz-lp.show .vz-link,.vz-lp.show .vz-page,.vz-lp.show .vz-row{opacity:1;transform:none}
.vz-lp.show .vz-page{transition-delay:.25s}.vz-lp.show .r1{transition-delay:.5s}.vz-lp.show .r2{transition-delay:.75s}.vz-lp.show .r3{transition-delay:1s}.vz-lp.show .r4{transition-delay:1.25s}
.vz-lp.show .r1 .vz-chk,.vz-lp.show .r1 .vz-chk::after,.vz-lp.show .vz-h{transition-delay:1.1s}.vz-lp.show .r2 .vz-chk,.vz-lp.show .r2 .vz-chk::after{transition-delay:1.5s}.vz-lp.show .r3 .vz-chk,.vz-lp.show .r3 .vz-chk::after,.vz-lp.show .vz-btn{transition-delay:1.9s}.vz-lp.show .r4 .vz-chk,.vz-lp.show .r4 .vz-chk::after{transition-delay:2.3s}
@media (prefers-reduced-motion: reduce){.vz-lp .vz-link,.vz-lp .vz-page,.vz-lp .vz-row{opacity:1;transform:none}}
.lp-wire-grid{display:grid;gap:28px}
@media (min-width:861px){.lp-wire-grid{grid-template-columns:minmax(0,1fr) 40%;column-gap:clamp(32px,5vw,72px);align-items:center}}
.lp-wire{margin:0;background:#fff;border:1px solid rgba(14,26,48,.08);padding:clamp(18px,3vw,36px)}
.lp-wire svg{display:block;width:100%;height:auto;max-height:320px}

/* Footer link to /this-is-an-seo-page/ (30 Sept, Maya approved) */
.fb-seo{color:inherit;text-decoration:underline;text-decoration-color:rgba(20,21,26,.3);text-underline-offset:3px}
.fb-seo:hover{color:var(--accent-2)}

/* Blog: "Google Ads guides" heading (30 Sept, Maya approved) */
.bl-grid .bl-sec{grid-column:1/-1;margin:clamp(20px,3vw,36px) 0 0;padding-top:clamp(18px,2.5vw,28px);border-top:1px solid rgba(14,26,48,.12);font:600 12px/1 var(--font-mono,"IBM Plex Mono",monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* Story posts (not the On Google Ads ones): quiet links, faint grey line, red on hover (30 Sept, Maya approved A) */
.ar-body.is-story a,.ar-body p a,.ar-body li a,.ar-body blockquote a{color:#2A3A5C;text-decoration:underline;text-decoration-color:rgba(14,26,48,.22);text-decoration-thickness:1px;text-underline-offset:3px}
.ar-body.is-story a:hover,.ar-body.is-story a:focus-visible,.ar-body p a:hover,.ar-body p a:focus-visible,.ar-body li a:hover,.ar-body li a:focus-visible{color:#0E1A30;text-decoration-color:#C93412}

/* Menu: "Services" dropdown with a clickable "Google Ads Management" heading above "Campaign types" (30 Sept, Maya approved option B) */
.nav-links .nav-ga-wrap .nav-cta-menu a.nav-menu-top { display: block; font: 600 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; text-decoration: none; }
.nav-links .nav-ga-wrap .nav-cta-menu a.nav-menu-top:hover { color: var(--accent); }
.nav-menu-ar { color: var(--accent); letter-spacing: 0; margin-left: 6px; }
@media (min-width: 861px) {
  .nav-links .nav-ga-wrap .nav-cta-menu a.nav-menu-top { padding: 14px 16px 10px; border-bottom: 1px solid rgba(14,26,48,.18); }
  .nav-links .nav-ga-wrap .nav-menu-top + .nav-menu-h { padding-top: 8px; }
}
@media (max-width: 860px) {
  .nav-links .nav-ga-wrap .nav-cta-menu a.nav-menu-top { padding: 12px 0 4px 14px; border: 0; }
  .nav-links .nav-ga-wrap .nav-menu-top + .nav-menu-h { padding-top: 8px; }
}