/* Service page template, used by all nine service pages (Google Ads first). Shared pieces live in site.css, which loads first. */

/* ---------- 01 Hero: the campaign stack (the split hero and stack mechanics are in site.css) ----------
   A search ad, a cost-per-lead trend and a new lead, as glass cards at three depths. An illustration with no real client data. */
.stack__layer--search { left: 0; top: 2%; width: 86%; transform: translateZ(10px); }
.stack__layer--chart { right: 0; top: 37%; width: 76%; transform: translateZ(60px); }
.stack__layer--lead { left: 6%; bottom: 3%; width: 58%; transform: translateZ(110px); }
.stack__layer--chart .stack__card { animation-delay: -2.7s; }
.stack__layer--lead .stack__card { animation-delay: -5.3s; }
.stack__query { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.86); }
.stack__query .sf-icon { width: 16px; height: 16px; color: var(--sf-fg-accent); }
.stack__ad { display: grid; gap: 5px; margin-top: 14px; }
.stack__sponsored { font-size: 0.6875rem; font-weight: var(--sf-fw-bold); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.7); }
.stack__brand { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); }
.stack__headline { font-size: 1rem; font-weight: var(--sf-fw-semibold); color: #B9C8FF; }
.stack__skeleton { display: block; height: 7px; margin-top: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.stack__skeleton--short { width: 64%; }
.stack__label { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; font-weight: var(--sf-fw-semibold); color: rgba(255, 255, 255, 0.86); }
.stack__trend .sf-icon { width: 18px; height: 18px; color: #3FBF87; transform: scaleY(-1); }
.stack__chart { display: block; width: 100%; height: 88px; margin-top: 10px; overflow: visible; }
.stack__area { fill: url(#art-grad); opacity: 0.18; }
.stack__line { fill: none; stroke: url(#art-grad); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stack__axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.6); }
.stack__card--lead { display: flex; align-items: center; gap: 12px; }
.stack__check { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(63, 191, 135, 0.16); color: #3FBF87; }
.stack__check .sf-icon { width: 20px; height: 20px; }
.stack__lead { display: grid; gap: 2px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); }
.stack__lead strong { font-size: 0.9375rem; color: var(--sf-white); }
/* Up to 1239px the stack is narrower than its full 460px (phones, tablets and smaller desktops): a taller stack
   and smaller type, so the three cards overlap less and no line is hidden. This block comes after the rules it overrides. */
@media (max-width: 1239px) {
  .stack { aspect-ratio: 1 / 1.14; }
  .stack__layer--search { width: 94%; top: 0; }
  .stack__layer--chart { width: 82%; top: 38%; }
  .stack__layer--lead { left: 5%; width: 68%; bottom: 0; }
  .stack__card { padding: 12px 14px; }
  .stack__headline { font-size: 0.875rem; }
  .stack__chart { height: 70px; }
}

/* ---------- 02 Sound familiar ---------- */
.pains { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 640px) { .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pains { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pain { display: flex; flex-direction: column; gap: 20px; min-height: 164px; }
.pain .sf-icon-tile { color: var(--sf-fg-accent); }
.pain__text { font-size: 1.125rem; font-weight: var(--sf-fw-semibold); line-height: 1.35; }

/* ---------- 03 What's included: four across, then three across on wide screens ---------- */
.included { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .included { grid-template-columns: repeat(2, minmax(0, 1fr)); } .included > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .included { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .included > * { grid-column: span 3; }
  .included > :nth-child(n + 5), .included > :last-child { grid-column: span 4; }
}
/* Eight items (AI Automation): no full-width last card, then two even rows of four.
   The two-column override stops at 1023px so it cannot beat the span 3 below. */
@media (min-width: 640px) and (max-width: 1023px) { .included:has(> :nth-child(8)) > :last-child { grid-column: auto; } }
@media (min-width: 1024px) { .included:has(> :nth-child(8)) > * { grid-column: span 3; } }
.feature .sf-icon-tile { color: var(--sf-fg-accent); }
.feature__title { margin-top: 18px; font-size: 1.125rem; font-weight: var(--sf-fw-semibold); line-height: 1.35; }
.feature__text { margin-top: 6px; color: var(--sf-fg-body); }

/* ---------- 05 What you get ---------- */
/* The report insides: labels and shapes only, no numbers, until a real anonymised report arrives. */
.report__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.report__kpi { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); font-size: 0.8125rem; color: var(--sf-fg-muted); }
.report__kpi i { display: block; width: 70%; height: 16px; border-radius: 4px; background: var(--sf-gradient-brand); opacity: 0.85; }
.report__chart { display: block; width: 100%; height: 110px; margin-top: 18px; }
.report__bars { fill: color-mix(in srgb, var(--sf-electric-blue) 22%, transparent); }
.report__line { fill: none; stroke: url(#art-grad); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.report__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.report__notes strong { display: block; margin-bottom: 8px; font-size: 0.8125rem; }
.report__notes i { display: block; height: 7px; margin-top: 6px; border-radius: 4px; background: var(--sf-border-strong); opacity: 0.6; }
.report__notes i.short { width: 60%; }
@media (max-width: 559px) { .report__notes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 06 Tools ---------- */
.tools-band { padding-block: clamp(40px, 5vw, 64px); }
/* Light theme: after a Cloud band the short strip joins it, instead of stuttering white (Google Ads "Tools we use").
   Its eyebrow dash is in site.css. */
:root[data-theme="light"] .sf-light + .tools-band { --sf-bg: var(--sf-cloud); }
.tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 780px; margin: 16px 0 0; padding: 0; list-style: none; }
/* Three across from 720px: below that the longest names (e.g. Google Search Console) crowd or run past the tile. */
@media (min-width: 720px) { .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 07 Proof ---------- */
.proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.proof .case .sf-card__media { aspect-ratio: 16 / 9; }
/* The testimonial panel is as tall as the case card beside it, so the quote sits large in the middle, under a quote mark. */
.proof .quote-card { justify-content: center; gap: 28px; }
.proof .quote-card .sf-quote__text { font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.375rem); line-height: 1.2; }
@media (min-width: 1024px) {
  .proof { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .proof .case { display: flex; flex-direction: column; }
  .proof .quote-card .sf-quote__cite { margin-top: 12px; }
}

/* ---------- 09 Works best with ---------- */
.connected { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 768px) { .connected { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.connected .sf-card { display: flex; flex-direction: column; }
.connected__title { margin-top: 10px; font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
.connected__text { flex: 1; margin-top: 8px; color: var(--sf-fg-body); }
.connected .sf-link-arrow { margin-top: 22px; }

/* ---------- 10 Engagement ---------- */
.engage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 768px) { .engage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.engage .sf-icon-tile { color: var(--sf-fg-accent); }
.engage__title { margin-top: 18px; font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
.engage__text { margin-top: 8px; color: var(--sf-fg-body); }

/* ======================================================================
   The other eight service pages use the same blocks. Below: their hero stacks, their unique blocks
   and the small variations on shared blocks. Illustrations only: no client data, no numbers.
   ====================================================================== */

/* ---------- Hero stack: three generic depths (a = back, b = middle, c = front) ---------- */
.stack__layer--a { left: 0; top: 2%; width: 86%; transform: translateZ(10px); }
.stack__layer--b { right: 0; top: 40%; width: 72%; transform: translateZ(60px); }
.stack__layer--c { left: 6%; bottom: 3%; width: 62%; transform: translateZ(110px); }
.stack__layer--b .stack__card { animation-delay: -2.7s; }
.stack__layer--c .stack__card { animation-delay: -5.3s; }
/* The same tighter layout wherever the stack is narrower than 460px (see the Google Ads block above). */
@media (max-width: 1239px) {
  .stack[class*="stack--"] { aspect-ratio: 1 / 1.16; }
  .stack__layer--a { width: 94%; top: 0; }
  .stack__layer--b { width: 80%; top: 42%; }
  .stack__layer--c { left: 5%; width: 72%; bottom: 0; }
  .stack[class*="stack--"] .stack__card { padding: 12px 14px; }
  /* WordPress and AI: the middle card sits lower, clear of the Get a quote button and the last chat bubble. */
  .stack--wp .stack__layer--b { top: 54%; }
  .stack--ai .stack__layer--b { top: 46%; }
}
/* Small phones: the cards wrap onto more lines as the stack narrows, so every stack gets a fixed, taller height (it overrides the ratio). */
@media (max-width: 389px) { .stack { height: 440px; } }
@media (max-width: 359px) { .stack { height: 470px; } }
/* Shared bits inside the glass cards */
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.8125rem; font-weight: var(--sf-fw-semibold); color: rgba(255, 255, 255, 0.86); }
.sc-muted { font-weight: var(--sf-fw-regular); color: rgba(255, 255, 255, 0.62); }
.sc-lines { display: grid; gap: 6px; }
.sc-lines i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.sc-lines i.short { width: 62%; }
.sc-pill { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 14px; border-radius: 999px; background: var(--sf-gradient-cta, var(--sf-gradient-brand)); color: var(--sf-white); font-size: 0.75rem; font-weight: var(--sf-fw-semibold); white-space: nowrap; }
.sc-pill--ghost { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
.sc-note { display: flex; align-items: center; gap: 12px; }
.sc-note__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(70, 119, 255, 0.18); color: #B9C8FF; }
.sc-note__icon--ok { background: rgba(63, 191, 135, 0.16); color: #3FBF87; }
.sc-note__icon .sf-icon { width: 18px; height: 18px; }
.sc-note__text { display: grid; gap: 2px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); }
.sc-note__text strong { font-size: 0.9375rem; color: var(--sf-white); }
.sc-up .sf-icon { width: 18px; height: 18px; color: #3FBF87; }
/* Brand: lockup, palette and type */
.sc-logo { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; }
.sc-logo__mark { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px 12px 12px 2px; background: linear-gradient(135deg, #EE6C4D, #3D5A80); }
.sc-logo__mark::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: rgba(14, 18, 36, 0.9); }
.sc-logo__word { font-size: 1.375rem; font-weight: var(--sf-fw-extrabold); letter-spacing: -0.02em; }
.sc-swatches { display: flex; gap: 6px; margin-top: 14px; }
.sc-swatches span { flex: 1; height: 34px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); }
.sc-type { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.sc-type__aa { font: 400 2.25rem/1 var(--sf-font-serif); font-style: italic; color: #B9C8FF; }
.sc-type__names { display: grid; font-size: 0.75rem; color: rgba(255, 255, 255, 0.66); }
.sc-type__names strong { font-size: 0.9375rem; color: var(--sf-white); }
/* Meta: feed post and funnel */
.sc-post__head { display: flex; align-items: center; gap: 10px; }
.sc-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #4677FF, #8C4DFF); }
.sc-post__who { display: grid; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.62); }
.sc-post__who strong { font-size: 0.8125rem; color: var(--sf-white); }
.sc-post__img { height: 110px; margin: 12px 0; border-radius: 10px; background: radial-gradient(circle at 70% 30%, rgba(200, 183, 255, 0.5), transparent 45%), linear-gradient(135deg, #243063, #3B2A6B); }
.sc-post__foot { display: flex; align-items: center; gap: 12px; }
.sc-post__foot .sc-lines { flex: 1; }
.sc-funnel ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.sc-funnel li { width: var(--w); margin-inline: auto; padding: 8px 10px; border-radius: 8px; background: linear-gradient(90deg, rgba(70, 119, 255, 0.34), rgba(140, 77, 255, 0.34)); text-align: center; font-size: 0.75rem; font-weight: var(--sf-fw-semibold); }
@media (max-width: 559px) { .sc-post__img { height: 80px; } }
/* The Shop now button sits on the left of the post, and the funnel card stays narrow, so the funnel never covers the button.
   Below 1240px the funnel also sits a little higher, clear of the order card. */
.stack--meta .sc-post__foot { flex-direction: row-reverse; }
@media (max-width: 1239px) { .stack--meta .stack__layer--b { top: 38%; width: 66%; } }
/* WordPress: browser and checkout */
.sc-browser { padding: 0; overflow: hidden; }
.sc-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); }
.sc-browser__bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.sc-browser__bar em { margin-left: 10px; font-style: normal; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.62); }
.sc-browser__body { display: grid; gap: 12px; justify-items: start; padding: 14px 16px 16px; }
.sc-browser__hero { width: 100%; height: 64px; border-radius: 8px; background: linear-gradient(135deg, rgba(70, 119, 255, 0.4), rgba(140, 77, 255, 0.3)); }
.sc-browser__body .sc-lines { width: 100%; }
.sc-pay__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sc-pay__list span { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; font-size: 0.8125rem; font-weight: var(--sf-fw-semibold); }
.sc-pay__list span:first-child { border-color: rgba(200, 183, 255, 0.6); background: rgba(140, 77, 255, 0.18); }
/* Shopify: product and upsell */
.sc-product { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.sc-product__img { aspect-ratio: 1; border-radius: 10px; background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.35), transparent 40%), linear-gradient(160deg, #3D5A80, #1F2A44); }
.sc-product__info { display: grid; gap: 12px; justify-items: start; }
.sc-product__info .sc-lines { width: 100%; }
.sc-upsell__row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.sc-thumb { width: 42px; height: 42px; border-radius: 8px; background: linear-gradient(160deg, #3D5A80, #1F2A44); }
.sc-thumb--b { background: linear-gradient(160deg, #8C4DFF, #3B2A6B); }
.sc-plus { color: rgba(255, 255, 255, 0.6); }
.sc-upsell__row .sc-pill { margin-left: auto; }
/* Custom software: dashboard and code */
.sc-dash { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.sc-dash__side { display: grid; align-content: start; gap: 10px; padding-top: 4px; }
.sc-dash__side i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.sc-dash__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sc-dash__tiles span { height: 40px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); }
.sc-dash__tiles span:first-child { background: linear-gradient(135deg, rgba(70, 119, 255, 0.35), rgba(140, 77, 255, 0.3)); }
.sc-dash__chart { display: block; width: 100%; height: 60px; margin-top: 10px; overflow: visible; }
.sc-dash__chart path { fill: none; stroke: url(#art-grad); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sc-code pre { margin: 10px 0 0; font: 0.75rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255, 255, 255, 0.86); white-space: pre-wrap; }
.sc-code .k { color: #B9C8FF; }
.sc-code .c { color: rgba(255, 255, 255, 0.55); }
/* AI: chat and workflow */
.sc-chat { display: grid; gap: 8px; }
.sc-bubble { max-width: 86%; margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 0.8125rem; line-height: 1.4; }
.sc-bubble--in { justify-self: start; border-bottom-left-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.sc-bubble--out { justify-self: end; border-bottom-right-radius: 4px; background: linear-gradient(135deg, rgba(70, 119, 255, 0.55), rgba(140, 77, 255, 0.55)); }
.sc-flow__row { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.sc-flow__row > i { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(185, 200, 255, 0.2), rgba(185, 200, 255, 0.7)); }
.sc-flow__node { display: grid; justify-items: center; gap: 6px; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.72); }
.sc-flow__node em { font-style: normal; }
.sc-flow__node .sf-icon { box-sizing: content-box; width: 16px; height: 16px; padding: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #B9C8FF; }
.sc-flow__node--ai .sf-icon { background: linear-gradient(135deg, #4677FF, #8C4DFF); color: var(--sf-white); }
@media (max-width: 559px) { .sc-bubble { font-size: 0.75rem; } .sc-product { grid-template-columns: 72px 1fr; } }

/* ---------- "What you get" sheets: a checklist, brand guidelines and an automation log ---------- */
.sheet__rows, .log__rows { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.sheet__rows li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); font-size: 0.9375rem; font-weight: var(--sf-fw-semibold); }
.sheet__rows .sf-icon { width: 18px; height: 18px; color: var(--sf-fg-success); }
.sheet__rows i { justify-self: end; width: 40%; height: 7px; border-radius: 4px; background: var(--sf-border-strong); opacity: 0.5; }
.guide__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.guide__grid > div { display: grid; gap: 10px; align-content: space-between; min-height: 120px; padding: 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); font-size: 0.8125rem; color: var(--sf-fg-muted); }
.guide__logo .sc-logo__mark::after { background: var(--sf-bg-raised); }
.guide__swatches { display: flex; gap: 5px; }
.guide__swatches span { flex: 1; height: 38px; border-radius: 6px; }
.guide__aa { font: italic 400 2.75rem/1 var(--sf-font-serif); color: var(--sf-fg); }
.guide__usage i { display: block; height: 7px; border-radius: 4px; background: var(--sf-border-strong); opacity: 0.6; }
.guide__usage i.short { width: 60%; }
.log__rows li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); }
.log__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--sf-electric-blue) 12%, transparent); color: var(--sf-fg-accent); }
.log__icon .sf-icon { width: 17px; height: 17px; }
.log__what { display: grid; font-size: 0.8125rem; color: var(--sf-fg-muted); }
.log__what strong { font-size: 0.9375rem; color: var(--sf-fg); }
.log__state { font-size: 0.75rem; font-weight: var(--sf-fw-semibold); color: var(--sf-fg-success); }
@media (max-width: 559px) { .guide__grid { grid-template-columns: minmax(0, 1fr); } .log__state { display: none; } }

/* ---------- Shared-block variations ---------- */
.connected--2 { max-width: 880px; }
@media (min-width: 768px) { .connected--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.engage__price { margin-top: 10px; font-size: 1.75rem; font-weight: var(--sf-fw-extrabold); letter-spacing: -0.02em; }
.engage__price span { display: block; font-size: var(--sf-fs-label); font-weight: var(--sf-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-fg-muted); }
.engage__note { margin-top: 18px; font-size: var(--sf-fs-small); color: var(--sf-fg-muted); }

/* ---------- Unique blocks ---------- */
/* Brand: the final CTA keeps "first impression" on one line, so "impression" is never left alone under the 16ch cap.
   From 360px only: at 320px the pair is wider than the column. */
@media (min-width: 360px) { .final__keep { white-space: nowrap; } }
/* Brand: deliverables, then before and after */
.deliverables { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .deliverables { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.deliverable { display: flex; flex-direction: column; }
.deliverable__title { font-size: 1.125rem; font-weight: var(--sf-fw-bold); }
.deliverable__text { flex: 1; margin-top: 6px; color: var(--sf-fg-body); }
.deliverable__formats { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--sf-border); font-size: 0.8125rem; font-weight: var(--sf-fw-semibold); letter-spacing: 0.04em; color: var(--sf-fg-accent); }
.before-after { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .before-after { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.before-after__item { margin: 0; }
.before-after__frame { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--sf-radius-md); }
.before-after__item figcaption { margin-top: 10px; font-size: var(--sf-fs-label); font-weight: var(--sf-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-fg-muted); }
/* Meta: the funnel. Each stage sits a step deeper, like the funnel narrowing away from you. The step is a top offset on
   cards stretched to the row, so a stage with more text can never rise above the one before it. */
.funnel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .funnel { grid-template-columns: repeat(4, minmax(0, 1fr)); } .funnel__stage { margin-top: calc(var(--i) * 26px); } }
.funnel__stage { display: flex; flex-direction: column; border-top: 3px solid transparent; border-image: var(--sf-gradient-brand) 1; border-image-slice: 1 0 0; }
.funnel__n { font: 600 0.8125rem/1 var(--sf-font-sans); letter-spacing: 0.1em; color: var(--sf-fg-muted); }
.funnel__title { margin-top: 14px; font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
.funnel__goal { flex: 1; margin-top: 6px; color: var(--sf-fg-body); }
.funnel__meta { display: grid; gap: 8px; margin: 18px 0 0; font-size: 0.875rem; }
.funnel__meta dt { font-size: var(--sf-fs-label); font-weight: var(--sf-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-fg-muted); }
.funnel__meta dd { margin: 2px 0 0; font-weight: var(--sf-fw-semibold); }
/* SEO: phases and local */
.phases { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; counter-reset: phase; }
@media (min-width: 900px) { .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The accent is mixed with fg so the small label keeps 4.5:1 on its purple tint in light theme (it stays lavender in dark). */
.phase__when { display: inline-block; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sf-growth-purple) 10%, transparent); font-size: 0.8125rem; font-weight: var(--sf-fw-semibold); color: color-mix(in srgb, var(--sf-fg-accent) 80%, var(--sf-fg)); }
.phase__title { margin-top: 16px; font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
.phase__list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.phase__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--sf-fg-body); }
.phase__list .sf-icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--sf-fg-accent); }
.local-seo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.local-seo > div { flex: 1 1 320px; }
.local-seo .sf-icon-tile { color: var(--sf-fg-accent); }
.local-seo__title { font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
.local-seo__text { margin-top: 8px; max-width: 70ch; color: var(--sf-fg-body); }
/* WordPress: payments row */
.pay-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 980px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .pay-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* WordPress or Shopify */
.compare__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .compare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare__col { display: flex; flex-direction: column; }
.compare__col--current { border-color: transparent; background: linear-gradient(var(--sf-bg-raised), var(--sf-bg-raised)) padding-box, var(--sf-gradient-brand) border-box; }
.compare__title { font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
/* align-content keeps the rows packed at the top when the list is stretched to match the other card. */
.compare__list { flex: 1; align-content: start; margin-top: 18px; font-size: 1rem; }
.compare__col .sf-link-arrow { margin-top: 22px; }
/* Shopify: order value levers */
.levers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .levers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .levers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lever .sf-icon-tile { color: var(--sf-fg-accent); }
.lever__title { margin-top: 18px; font-size: 1.125rem; font-weight: var(--sf-fw-bold); }
.lever__text { margin-top: 6px; color: var(--sf-fg-body); }
/* Custom software: tech grid and ownership */
.tech-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tech-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.own { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .own { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.own__card { display: flex; flex-direction: column; }
.own__card .sf-icon-tile { color: var(--sf-fg-accent); }
.own__title { margin-top: 18px; font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
.own__text { flex: 1; margin-top: 8px; color: var(--sf-fg-body); }
.own__card .sf-link-arrow { margin-top: 20px; }
/* AI: before and after, and the estimate */
.flowcmp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 768px) { .flowcmp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flowcmp__col--after { border-color: transparent; background: linear-gradient(var(--sf-bg-raised), var(--sf-bg-raised)) padding-box, var(--sf-gradient-brand) border-box; }
.flowcmp__title { font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
.flowcmp__list { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.flowcmp__list li { display: flex; align-items: flex-start; gap: 10px; }
.flowcmp__list .sf-icon { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.flowcmp__col--before .sf-icon { color: var(--sf-fg-muted); }
.flowcmp__col--before li { color: var(--sf-fg-muted); }
.flowcmp__col--after .sf-icon { color: var(--sf-fg-accent); }
.roi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1024px) { .roi { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); align-items: start; gap: 40px; } }
.roi__title { margin-top: 12px; font-size: var(--sf-fs-h3); line-height: var(--sf-lh-h3); font-weight: var(--sf-fw-bold); letter-spacing: -0.01em; }
.roi__text { margin-top: 10px; color: var(--sf-fg-body); }
.roi__form .sf-field + .sf-field { margin-top: 16px; }
.roi__out { display: grid; gap: 12px; padding: 20px; border-radius: var(--sf-radius-md); background: var(--sf-hover); }
.roi__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Stack the two figures wherever the output column is narrow (phones, and the three-column card from 1024px), so the largest total still fits. */
@media (max-width: 559px), (min-width: 1024px) { .roi__figures { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.roi__value { display: block; font-size: clamp(2rem, 1.7rem + 1.2vw, 2.75rem); font-weight: var(--sf-fw-extrabold); line-height: 1; letter-spacing: -0.03em; }
/* Muted text nudged towards fg, so it keeps 4.5:1 on the tinted panel in both themes. */
.roi__label { display: block; margin-top: 8px; font-size: 0.8125rem; color: color-mix(in srgb, var(--sf-fg-muted) 85%, var(--sf-fg)); }
.roi__small { margin: 4px 0 0; font-size: 0.8125rem; color: color-mix(in srgb, var(--sf-fg-muted) 85%, var(--sf-fg)); }

/* ---------- Video Editing ---------- */
/* The timeline tracks and playhead inside the page's editor mockups. The page's own CSS (video-editing.css) builds its
   one timeline kit, .ve-timeline, on these; everything else on that page lives there too. */
.sc-track { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; }
.sc-track em { font-style: normal; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.62); }
.sc-track > span { position: relative; display: flex; gap: 3px; height: 22px; }
.sc-track--video i { flex: 0 0 var(--w); border-radius: 4px; background: linear-gradient(135deg, rgba(70, 119, 255, 0.55), rgba(140, 77, 255, 0.5)); }
.sc-track--text i { position: absolute; left: var(--x); top: 5px; width: var(--w); height: 12px; border-radius: 3px; background: rgba(200, 183, 255, 0.45); }
.sc-track--music > span { align-items: center; gap: 2px; }
.sc-track--music i { flex: 1; height: var(--h); border-radius: 2px; background: rgba(63, 191, 135, 0.55); }
.sc-playhead { position: absolute; left: 52%; top: 34px; bottom: 12px; width: 2px; border-radius: 1px; background: var(--sf-white); box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }
.sc-playhead::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 2px; background: var(--sf-white); transform: rotate(45deg); }
@media (max-width: 559px) { .sc-track { grid-template-columns: 36px 1fr; } }