/* Service page design ("Clean light"). Used by the service pages that follow docs/SERVICE-PAGE-DESIGN.md.
   Palette: navy, white, light grey, ONE blue. Single-colour line icons, no gradients except the faint hero wash,
   no shadow heavier than 0 1px 3px. Every class starts with sp- (or is scoped under .sp / body.sp-page) so nothing leaks into the shared header/footer. */
/* Same REM font as the rest of the site, served from /fonts (preloaded in the page head) so the text does not reflow when it arrives */
@font-face { font-family: "REM"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/rem/rem-latin-wght-normal.woff2) format("woff2"); }
body.sp-page { padding-top: 60px; }
/* Pages on this design only: no claim bar, no Technical SEO popup, no second CTA band from the shared footer.
   They are injected late by include.js, so hide them by selector (the rule is in the first paint, nothing flashes). */
body.sp-page :is(#sticky-cta-banner, #reopen-banner-btn, #tech-seo-popup, #popup-overlay, #footer-placeholder #contact) { display: none !important; }

.sp {
  --navy: #0a132d; --ink: #0b1430; --text: #2a3550; --muted: #4b5568;
  --blue: #1558d6; --blue-dark: #0f46ad; --blue-tint: #eaf1fd;
  --line: #e1e7f0; --grey: #f5f7fa; --bar: #dfe6f1;
  color: var(--text); background: #fff; font-size: 17px; line-height: 1.65; overflow-x: clip;
}
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
/* explicit resets (zero specificity) so the page looks the same before and after the Tailwind CDN script adds its own */
:where(.sp) :is(h1, h2, h3, p, ul, ol, table, figure) { margin: 0; padding: 0; }
:where(.sp) :is(ul, ol) { list-style: none; }
:where(.sp) :is(svg, img) { display: block; max-width: 100%; }
.sp :is(h1, h2, h3) { letter-spacing: -0.02em; line-height: 1.15; font-weight: 800; color: var(--ink); }
.sp a:focus-visible, .sp summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.sp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.sp-narrow { max-width: 800px; }
.sp [id] { scroll-margin-top: 76px; }

/* buttons: one primary blue, one outline */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 10px; font-weight: 700; font-size: 17px; line-height: 1.25; text-decoration: none; text-align: center; border: 2px solid transparent; transition: background-color .15s ease, border-color .15s ease; }
.sp-btn-primary { background: var(--blue); color: #fff; }
.sp-btn-primary:hover { background: var(--blue-dark); }
.sp-btn-outline { border-color: #b8c4d9; color: var(--ink); background: #fff; }
.sp-btn-outline:hover { border-color: var(--blue); color: var(--blue-dark); }
.sp-btn-lg { min-height: 58px; padding: 0 36px; font-size: 18px; }

/* hero */
.sp-hero { padding: 56px 0 64px; background: linear-gradient(#fff, #f1f6fd); }
.sp-hero-grid { display: grid; gap: 44px; }
.sp-hero-grid > * { min-width: 0; }
.sp .sp-hero h1 { font-size: clamp(2.5rem, 6.4vw, 3.9rem); line-height: 1.06; }
.sp-hero h1 span { display: block; color: var(--blue); }
.sp-answer { margin-top: 22px; font-size: 18px; color: var(--text); max-width: 38em; }
.sp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 30px; }

/* hero illustration: light line style, inline HTML/SVG, no numbers */
.sp-visual { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sp-win { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(10,19,45,.08); }
.sp-win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--grey); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.sp-win-bar span { width: 9px; height: 9px; border-radius: 50%; background: #cdd5e2; }
.sp-win-bar b { margin-left: 8px; font-weight: 600; letter-spacing: .02em; }
.sp-win-body { padding: 14px; display: grid; gap: 10px; }
.sp-flow { display: block; margin: 2px 0; }
.sp-ln { display: block; height: 8px; width: var(--w, 100%); border-radius: 4px; background: var(--bar); }
.sp-ln-b { height: 12px; background: #c3cfe3; }
.sp-ln-blue { background: var(--blue-soft, #8db1f7); }
.sp-lab { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sp-blue-line { fill: var(--blue-tint); stroke: var(--blue); stroke-width: 3; }
.sp-blue-stroke { fill: none; stroke: var(--blue); }
/* feed table -> Shopping card */
.sp-feed { max-width: 520px; }
.sp-feed table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.sp-feed th { text-align: left; padding: 8px 12px; font-weight: 600; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.sp-feed th:first-child, .sp-feed td:first-child { width: 38%; }
.sp-feed td { padding: 9px 12px; color: var(--ink); border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-feed td.sp-miss { color: #6b7686; }
.sp-scard { width: 100%; max-width: 380px; display: grid; grid-template-columns: 124px 1fr; gap: 14px; align-items: center; padding: 14px; background: #fff; border: 1px solid #b9ccf3; border-radius: 14px; box-shadow: 0 1px 3px rgba(10,19,45,.1); }
.sp-scard-img { display: grid; place-items: center; height: 124px; background: var(--grey); border-radius: 10px; }
.sp-scard-img svg { width: 92px; height: auto; }
.sp-scard-title { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.3; }
.sp-scard-store { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.sp-scard ul { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.sp-scard li { padding: 2px 8px; border-radius: 999px; background: var(--blue-tint); color: #0f3d94; font-size: 11.5px; font-weight: 600; }
/* JavaScript SEO: raw HTML -> rendered page */
.sp-code { display: grid; gap: 4px; padding: 14px; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
.sp-code code { font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-code em { margin-top: 6px; font: normal 600 12.5px/1.4 inherit; font-family: inherit; color: #6b7686; }
.sp-page-nav { display: flex; align-items: center; gap: 8px; }
.sp-page-nav .sp-ln { height: 7px; }
.sp-page-row { display: grid; grid-template-columns: 1fr 120px; gap: 12px; align-items: start; }
.sp-page-row > div { display: grid; gap: 7px; }
.sp-img { display: grid; place-items: center; height: 76px; border-radius: 8px; background: var(--blue-tint); }
.sp-img svg { width: 40px; height: 40px; }
.sp-chips { display: flex; gap: 6px; }
.sp-chips i { width: 54px; height: 18px; border-radius: 9px; border: 1.5px solid #9db7ec; }
/* site speed: load timeline + three dials */
.sp-frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sp-frame { display: grid; gap: 5px; align-content: start; height: 70px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.sp-frame .sp-ln { height: 5px; }
.sp-frame .sp-img { height: 22px; border-radius: 4px; }
.sp-track { position: relative; height: 6px; margin: 2px 0 0; border-radius: 3px; background: var(--bar); }
.sp-track::before { content: ""; position: absolute; inset: 0 22% 0 0; border-radius: 3px; background: var(--blue); }
.sp-track::after { content: ""; position: absolute; top: -5px; left: calc(78% - 8px); width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
.sp-dials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 6px; }
.sp-dial { display: grid; justify-items: center; gap: 2px; padding-top: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sp-dial svg { width: 88px; height: 52px; }
.sp-dial .sp-trk { fill: none; stroke: var(--bar); stroke-width: 8; stroke-linecap: round; }
.sp-dial .sp-val { fill: none; stroke: var(--blue); stroke-width: 8; stroke-linecap: round; }
/* Elementor: stacked blocks -> clean heading outline */
.sp-blocks { display: grid; gap: 8px; padding: 14px 14px 18px; }
.sp-block { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 1.5px solid #c3cfe3; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 600; color: var(--muted); }
.sp-block:nth-child(1) { margin-left: 0; margin-right: 38px; } .sp-block:nth-child(2) { margin-left: 26px; margin-right: 8px; }
.sp-block:nth-child(3) { margin-left: 8px; margin-right: 30px; } .sp-block:nth-child(4) { margin-left: 34px; margin-right: 0; }
.sp-block svg { flex: none; color: var(--blue); }
.sp-outline { padding: 14px 18px 16px; display: grid; gap: 4px; }
.sp-outline p { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: 13px; color: var(--ink); }
.sp-outline p::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.sp-outline .sp-l1 { margin-left: 22px; font-weight: 500; } .sp-outline .sp-l1::before { background: #8db1f7; }
.sp-outline .sp-l2 { margin-left: 44px; font-weight: 500; color: var(--muted); } .sp-outline .sp-l2::before { background: #c3cfe3; }
.sp-outline .sp-l0 { font-weight: 700; }
/* health: product page with sources and a reviewed-by line */
.sp-prod { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; }
.sp-prod .sp-img { height: 112px; background: var(--grey); }
.sp-prod .sp-img svg { width: 62px; height: 62px; }
.sp-prod > div { display: grid; gap: 8px; padding-top: 4px; }
.sp-src { margin-top: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--grey); display: grid; gap: 9px; }
.sp-src > div { display: flex; align-items: center; gap: 9px; }
.sp-src svg { flex: none; color: var(--blue); }
.sp-rev { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.sp-rev .sp-av { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-tint); border: 1.5px solid var(--blue); }
.sp-rev .sp-ln { width: 90px; }
/* SEO audit: report sheet with a prioritised checklist */
.sp-sheet { display: grid; gap: 12px; padding: 18px; }
.sp-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sp-sheet-head b { font-size: 15px; color: var(--ink); }
.sp-sheet-head .sp-ln { width: 64px; }
.sp-chk { display: grid; grid-template-columns: 64px 18px 1fr; gap: 10px; align-items: center; }
.sp-chk .sp-ln { height: 9px; }
.sp-chk .sp-box { width: 18px; height: 18px; border-radius: 5px; border: 2px solid #9db7ec; }
.sp-prio { display: inline-grid; place-items: center; height: 22px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.sp-hi { background: var(--blue); color: #fff; } .sp-md { background: var(--blue-tint); color: #0f3d94; } .sp-lo { background: var(--grey); color: var(--muted); border: 1px solid var(--line); }

/* client logos: static strip */
.sp-logos { background: #fff; padding: 28px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sp-logos-label { text-align: center; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.sp-logos .sp-wrap { max-width: 1320px; }
.sp-logos ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sp-chip { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 16px; background: var(--grey); border: 1px solid var(--line); border-radius: 10px; }
.sp-chip img { height: 20px; width: auto; max-width: none; opacity: .85; }
.sp-word { font-size: 14px; font-weight: 800; letter-spacing: .01em; color: var(--navy); }

/* sections: white and very light grey, alternating */
.sp-sec { padding: 64px 0; }
.sp-grey { background: var(--grey); }
.sp-white { background: #fff; }
.sp .sp-sec h2 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
.sp-h2c { margin-bottom: 36px; }
.sp-two { display: grid; gap: 22px; }
.sp-prose { display: grid; gap: 18px; font-size: 18px; }

/* numbered cards (problems, how it works) and deliverables share one grid */
.sp-grid { display: grid; gap: 16px; }
.sp-card { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 3px rgba(10,19,45,.05); }
.sp-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sp-n { font-size: 15px; font-weight: 800; letter-spacing: .06em; color: var(--blue); }
.sp-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--blue-tint); color: var(--blue); flex: none; }
.sp-card h3 { font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
.sp-card p { color: var(--muted); font-size: 16px; }
.sp-recv li { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.sp-recv p { color: var(--ink); font-weight: 600; font-size: 16.5px; line-height: 1.45; padding-top: 8px; }

/* case study card with thumbnail */
.sp-case { display: grid; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 3px rgba(10,19,45,.06); }
.sp-case-thumb { display: block; position: relative; overflow: hidden; background: var(--grey); aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line); }
.sp-case-thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 42%; transform: scale(var(--zoom, 1)); }
.sp-case-thumb svg { width: 100%; height: 100%; }
.sp-case-copy { padding: 28px 24px 32px; }
.sp-case-copy h2 { margin-bottom: 14px; }
.sp-case-copy p { font-size: 17px; margin-bottom: 24px; }
.sp-case-copy strong { color: var(--ink); }
.sp-case-links { display: flex; flex-wrap: wrap; gap: 12px; }
.sp-case-links .sp-btn { padding-top: 12px; padding-bottom: 12px; }

/* fit: neutral, blue ticks */
.sp-fit { display: grid; gap: 16px; }
.sp-fit > div { padding: 28px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.sp-fit-no { background: var(--grey) !important; }
.sp-fit h3 { font-size: 20px; margin-bottom: 14px; }
.sp-fit li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 16px; }
.sp-fit li svg { flex: none; margin-top: 3px; }
.sp-fit-yes li svg { color: var(--blue); }
.sp-fit-no li svg { color: #5b6577; }

/* faq */
.sp-faqs { display: grid; gap: 12px; }
.sp-faq { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.sp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 22px; cursor: pointer; list-style: none; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); margin-top: -4px; }
.sp-faq[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.sp-faq[open] { border-color: #b9ccf3; }
.sp .sp-faq h3 { font-size: 17px; line-height: 1.35; }
.sp-faq p { padding: 0 22px 20px; color: var(--muted); }

/* related links */
.sp-related { padding: 56px 0; background: #fff; border-top: 1px solid var(--line); }
.sp .sp-related h2 { font-size: 1.6rem; margin-bottom: 22px; }
.sp-rel-cols { display: grid; gap: 22px; }
.sp .sp-related h3 { font-size: 15px; letter-spacing: 0; margin-bottom: 4px; color: var(--muted); }
.sp-related a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-dark); text-decoration: underline; font-size: 16px; }

/* final CTA: the one strong colour block on the page */
.sp-final { padding-top: 72px; text-align: center; color: #d5dff5; background: var(--navy); }
.sp-final .sp-wrap { padding-bottom: 72px; } /* inner padding on purpose: include.js zeroes the padding-bottom of any last-child <section> */
.sp .sp-final h2 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); max-width: 18em; margin: 0 auto; }
.sp-final p { margin: 18px auto 30px; max-width: 34em; font-size: 18px; }
.sp .sp-final a:focus-visible { outline-color: #fff; }

@media (min-width: 720px) {
  .sp-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-grid > :last-child:nth-child(odd) { grid-column: span 2; }
  .sp-fit { grid-template-columns: 1fr 1fr; }
  .sp-rel-cols { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (min-width: 960px) {
  .sp-hero { padding: 72px 0 88px; }
  .sp-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
  .sp-sec { padding: 96px 0; }
  .sp-two { grid-template-columns: 5fr 7fr; gap: 64px; }
  .sp-grid { grid-template-columns: repeat(6, 1fr); gap: 20px; }
  .sp-grid > *, .sp-grid > :last-child:nth-child(odd) { grid-column: span 2; }
  .sp-grid > :last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
  .sp-grid > :nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
  .sp-grid > :nth-last-child(2):nth-child(3n+1) + * { grid-column: 4 / span 2; }
  .sp-case { grid-template-columns: 1fr 1fr; align-items: center; gap: 8px; padding: 12px; }
  .sp-case-thumb { border-radius: 12px; border: 1px solid var(--line); }
  .sp-case-copy { padding: 44px; }
}
@media (max-width: 520px) {
  .sp-scard { grid-template-columns: 92px 1fr; }
  .sp-scard-img { height: 92px; }
  .sp-scard-img svg { width: 66px; }
  .sp-feed th:nth-child(4), .sp-feed td:nth-child(4) { display: none; }
  .sp-feed th:first-child, .sp-feed td:first-child { width: 46%; }
  .sp-hero-cta .sp-btn, .sp-case-links .sp-btn { width: 100%; }
  .sp-page-row { grid-template-columns: 1fr 88px; }
  .sp-prod { grid-template-columns: 88px 1fr; }
  .sp-prod .sp-img { height: 88px; }
}
@media (prefers-reduced-motion: reduce) { .sp * { transition: none !important; } }