/* services styles (Style A). Loaded after /style.css.
   Service, industry and hire detail pages (page-template.mjs). Every selector is scoped .svc-*.
   Calm, minimal layout: one centered reading column (720px) with a few wider visual sections.
   Mobile first: base rules are for phones, wider layouts at 640 / 900 / 1024px. */

.svc-page {
  --svc-text: #3b4256;
  --svc-soft: #f6f7fb;
  --svc-border: #e4e7ef;
  --svc-col: 720px;
  --svc-wide: 1080px;
}
.svc-page h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.028em; }
.svc-page h3 { font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; }

/* ---------- shared bits ---------- */
.svc-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.svc-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--svc-text); }
.svc-ticks svg, .svc-card svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.svc-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--accent); }
.svc-link:hover { color: var(--accent-hover); }
.svc-link svg, .svc-related svg, .svc-cue svg { flex: none; transition: transform 0.15s; }
.svc-link:hover svg, .svc-related a:hover svg { transform: translateX(3px); }
.svc-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 99px; background: var(--accent-tint); color: var(--accent-hover); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* "Read more" disclosure */
.svc-more { margin-top: 4px; }
.svc-more summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 16px; color: var(--accent); }
.svc-more summary::-webkit-details-marker { display: none; }
.svc-more summary::after { content: ''; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
.svc-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.svc-more summary:hover { color: var(--accent-hover); }
.svc-more .svc-more-close, .svc-more[open] .svc-more-open { display: none; }
.svc-more[open] .svc-more-close { display: inline; }
.svc-more-body { display: flex; flex-direction: column; gap: 18px; padding: 6px 0 8px; }

/* ---------- hero ---------- */
.svc-hero { background: var(--white); padding-bottom: 48px; border-bottom: 1px solid var(--svc-border); }
.svc-crumbs { padding-top: 18px; align-items: center; }
.svc-crumbs a, .svc-crumbs span[aria-current] { display: inline-flex; align-items: center; min-height: 32px; }
.svc-hero-grid { display: grid; gap: 40px; padding-top: 20px; }
.svc-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.svc-tagline { font-size: 15px; font-weight: 500; color: var(--accent-hover); }
.svc-hero h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.035em; max-width: 20ch; }
.svc-lead { font-size: 18px; line-height: 1.6; color: var(--svc-text); max-width: 58ch; }
.svc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.svc-proofs { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
.svc-proofs li { font-size: 15px; font-weight: 500; }
@media (max-width: 479px) {
  .svc-actions { width: 100%; }
  .svc-actions .button { width: 100%; }
}

/* Hero drawing: one window on a cobalt tint block, plus one small card. */
.svc-art { position: relative; min-width: 0; padding: 20px 20px 0; border-radius: 16px; background: var(--accent-tint); overflow: hidden; }
.svc-win, .svc-code { position: relative; border: 1px solid #d7ddff; border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--white); overflow: hidden; }
.svc-win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--svc-border); }
.svc-win-bar i { width: 8px; height: 8px; border-radius: 99px; background: var(--svc-border); }
.svc-win-bar span { margin-left: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-win-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px 28px; }
.svc-win-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.svc-win-nav b { font-family: var(--display); font-size: 14px; white-space: nowrap; }
.svc-win-nav > span { display: flex; gap: 12px; font-size: 12px; color: var(--muted); overflow: hidden; }
.svc-win-nav > span span { white-space: nowrap; }
.svc-win-hero { display: flex; justify-content: space-between; gap: 16px; padding: 18px; border-radius: 10px; background: var(--svc-soft); }
.svc-win-hero > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.svc-win-hero b { font-family: var(--display); font-size: clamp(18px, 2vw, 22px); line-height: 1.18; letter-spacing: -0.02em; max-width: 16ch; }
.svc-win-hero em { font-style: normal; padding: 8px 12px; border-radius: 8px; background: var(--accent); color: var(--white); font-size: 12px; font-weight: 600; }
.svc-win-arch { flex: none; align-self: flex-end; width: 84px; height: 96px; border-radius: 42px 42px 10px 10px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.svc-win-arch.has-art { background: #f1e6d4; }
.svc-win-arch svg { width: 64px; height: 64px; }
.svc-win-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.svc-win-tiles i { height: 44px; border-radius: 8px; background: var(--svc-soft); }
.svc-win--store .svc-win-tiles i { height: 64px; }
.svc-win--store .t1 { background: #f3e6d8; }
.svc-win--store .t2 { background: #dcefe4; }
.svc-win--store .t3 { background: #e7e4f6; }
/* A whole storefront screenshot in the window. The chrome above it stays CSS, so the window edge
   and address bar keep their hairlines at any zoom and only the page content costs bytes. */
.svc-win--shot .svc-win-shot { line-height: 0; }
.svc-win--shot .svc-win-shot img { width: 100%; height: auto; display: block; }

.svc-art-card { position: absolute; right: 16px; bottom: 16px; width: min(240px, 72%); }
.svc-card { background: var(--white); border: 1px solid var(--svc-border); border-radius: 12px; padding: 14px 16px; box-shadow: 0 18px 40px -24px rgba(10, 14, 26, 0.35); font-size: 13px; color: var(--ink); }
.svc-card > b { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.svc-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.svc-card li { display: flex; align-items: center; gap: 8px; }
.svc-card li svg { width: 15px; height: 15px; margin: 0; }
.svc-card li.on { font-weight: 600; color: var(--accent-hover); }
.svc-card-panel li { padding: 5px 8px; border-radius: 6px; }
.svc-card-panel li i { width: 10px; height: 10px; border: 1.5px solid var(--line-strong); border-radius: 3px; }
.svc-card-panel li.on { background: var(--accent-wash); }
.svc-card-panel li.on i { border-color: var(--accent); background: var(--accent); }
.svc-card-map li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
.svc-card-map code { font-family: var(--mono); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-card-map li code:last-child { color: var(--ink); }
.svc-card-map span { color: var(--accent); }
.svc-card-serp small { display: block; font-size: 11px; color: var(--green); }
.svc-card-serp strong { display: block; margin: 4px 0 8px; font-size: 15px; color: var(--accent-hover); }
.svc-card-serp i { display: block; height: 6px; margin-top: 6px; border-radius: 9px; background: var(--svc-border); }
.svc-card-serp i:last-child { width: 70%; }
.svc-card-toggles li { justify-content: space-between; }
.svc-card-toggles em { position: relative; flex: none; width: 28px; height: 16px; border-radius: 99px; background: var(--line-strong); }
.svc-card-toggles em::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 99px; background: #fff; }
.svc-card-toggles em.on { background: var(--accent); }
.svc-card-toggles em.on::after { left: 14px; }
.svc-card-order { display: flex; gap: 10px; align-items: flex-start; }
.svc-card-order strong { display: block; font-size: 13px; }
.svc-card-order small { font-size: 12px; color: var(--muted); }

.svc-code { background: var(--ink); border-color: var(--ink-line); }
.svc-code .svc-win-bar { border-color: var(--ink-line); }
.svc-code .svc-win-bar i { background: var(--ink-line); }
.svc-code .svc-win-bar span { color: var(--muted-dark); }
.svc-code pre { margin: 0; padding: 18px 18px 96px; overflow: hidden; font-family: var(--mono); font-size: 12px; line-height: 1.9; color: var(--body-dark); white-space: pre; }
.svc-code .k { color: var(--accent-light); }
.svc-code .s { color: #9fd8b5; }
.svc-code .t { color: #f0c48a; }
.svc-code .c { color: #8792ab; font-style: italic; }

/* ---------- on this page ---------- */
.svc-subnav { position: sticky; top: 68px; z-index: 20; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--svc-border); }
.svc-subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.svc-subnav .wrap::-webkit-scrollbar { display: none; }
.svc-subnav a { flex: none; display: inline-flex; align-items: center; min-height: 50px; padding: 0 14px; font-size: 15px; font-weight: 500; color: var(--svc-text); border-bottom: 2px solid transparent; }
.svc-subnav a:first-child { padding-left: 0; }
.svc-subnav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.svc-subnav a:focus-visible { outline-offset: -3px; }

/* ---------- section frame ---------- */
.svc-sec, .svc-cta { scroll-margin-top: 120px; }
.svc-sec { padding-block: 52px; }
.svc-white { background: var(--white); }
.svc-soft { background: var(--svc-soft); }
.svc-dark { background: var(--ink); color: var(--white); }
.svc-dark h2, .svc-dark h3 { color: var(--white); }
.svc-dark .svc-intro { color: var(--body-dark); }
.svc-dark .svc-eyebrow { color: var(--accent-light); }
.svc-head { display: flex; flex-direction: column; gap: 12px; max-width: var(--svc-col); margin-inline: auto; }
.svc-sec--wide .svc-head { max-width: var(--svc-wide); }
.svc-sec--wide .svc-head > * { max-width: var(--svc-col); }
.svc-eyebrow { font-size: 15px; font-weight: 600; color: var(--accent); }
.svc-intro { font-size: 17px; line-height: 1.65; color: var(--svc-text); }
.svc-body { margin: 28px auto 0; min-width: 0; }
.svc-body--col { max-width: var(--svc-col); }
.svc-body--wide { max-width: var(--svc-wide); }
@media (min-width: 900px) {
  .svc-prose .svc-lede { font-size: 19px; }
  .svc-sec { padding-block: 84px; }
  .svc-body { margin-top: 36px; }
}

/* ---------- overview ---------- */
.svc-prose { display: flex; flex-direction: column; gap: 12px; }
.svc-prose p { font-size: 17px; line-height: 1.75; color: var(--svc-text); }
.svc-prose .svc-lede { font-size: 18px; line-height: 1.65; color: var(--ink); }

/* ---------- journey: soft tinted path ---------- */
.svc-path { list-style: none; margin: 0; padding: 8px 20px; border-radius: 16px; background: var(--accent-wash); border: 1px solid #dfe4ff; }
.svc-path li { position: relative; padding: 16px 0 16px 28px; }
.svc-path li + li { border-top: 1px solid #dfe4ff; }
.svc-path li::before { content: ''; position: absolute; left: 0; top: 23px; width: 10px; height: 10px; border-radius: 99px; border: 2px solid var(--accent); background: var(--white); }
.svc-path li.on::before { background: var(--accent); }
.svc-path li.on h3 { color: var(--accent-hover); }
.svc-path p { margin-top: 4px; font-size: 16px; line-height: 1.6; color: var(--svc-text); }
@media (min-width: 640px) { .svc-path { padding: 8px 28px; } }

/* ---------- what's included: icon + title + one line (tap to read the full line) ---------- */
.svc-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.svc-features li { border: 1px solid var(--svc-border); border-radius: 14px; background: var(--white); transition: border-color 0.15s; }
.svc-features li:hover { border-color: #c9d1ff; }
.svc-features summary { list-style: none; display: flex; gap: 14px; align-items: flex-start; min-height: 44px; padding: 16px 18px; }
.svc-features summary::-webkit-details-marker { display: none; }
.svc-features summary:focus-visible { outline-offset: -3px; border-radius: 14px; }
.svc-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); }
.svc-icon svg { width: 17px; height: 17px; }
.svc-feature-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 4px; }
.svc-feature-line { display: block; font-size: 16px; line-height: 1.55; color: var(--svc-text); }
.svc-features summary::after { content: ''; flex: none; align-self: center; width: 7px; height: 7px; margin: 0 4px 0 auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
.svc-features details[open] summary::after { transform: rotate(-135deg); }
.svc-features details:not([open]) .svc-feature-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
@media (min-width: 768px) { .svc-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* ---------- product callouts (the one dark section) ---------- */
.svc-callouts { display: grid; gap: 32px; align-items: center; }
.svc-callout-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.svc-callout-list li { display: flex; gap: 14px; align-items: flex-start; }
.svc-callout-list p { margin-top: 2px; font-size: 16px; line-height: 1.55; color: var(--body-dark); }
@media (max-width: 639px) { .svc-callouts .product-mock { display: none; } }
@media (min-width: 960px) { .svc-callouts { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.svc-ba-switch { margin-bottom: 20px; }
.svc-sec .segmented { background: var(--svc-border); }
.svc-sec .segmented button { color: var(--svc-text); }
.svc-dark .segmented { background: #1a2033; }
.svc-dark .segmented button { color: var(--body-dark); }
.svc-sec .segmented button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.svc-white .ba-list li, .svc-soft .ba-list li { background: var(--white); border-color: var(--svc-border); color: var(--svc-text); }
.svc-white .ba-list strong, .svc-soft .ba-list strong { color: var(--ink); }
.svc-white .ba-list li span:last-child small, .svc-soft .ba-list li span:last-child small { color: var(--accent); }
.svc-white .ba-shot > div, .svc-soft .ba-shot > div { border: 1px solid var(--svc-border); }

/* ---------- process: simple numbered list ---------- */
.svc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.svc-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; }
.svc-steps-n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 99px; background: var(--accent); color: var(--white); font-weight: 700; font-size: 15px; }
.svc-steps h3 { padding-top: 6px; }
.svc-steps p { margin-top: 4px; font-size: 16px; line-height: 1.6; color: var(--svc-text); }
.svc-steps-time { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--muted); }

/* ---------- platforms ---------- */
.svc-platforms { display: grid; gap: 14px; }
.svc-platforms article { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; border: 1px solid var(--svc-border); border-radius: 14px; background: var(--white); }
.svc-platforms article.on { border-color: #c9d1ff; box-shadow: inset 0 3px 0 var(--accent); }
.svc-platform-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-platform-head h3 { font-size: 21px; }
.svc-platform-best { font-size: 16px; color: var(--svc-text); }
.svc-platforms .svc-more summary { font-size: 15px; min-height: 40px; color: var(--muted); }
.svc-platforms .svc-more p { font-size: 16px; line-height: 1.6; color: var(--svc-text); }
.svc-platforms .svc-link { margin-top: auto; }
@media (min-width: 900px) { .svc-platforms { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; } }

/* ---------- local SEO ---------- */
.svc-local { display: grid; gap: 28px; align-items: center; }
.svc-ticks--list { gap: 14px; }
.svc-ticks--list li { font-size: 17px; font-weight: 500; color: var(--ink); }
.svc-local .map-mock { background: var(--white); border-color: var(--svc-border); border-radius: 16px; }
@media (min-width: 900px) { .svc-local { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; } }

/* ---------- pricing ---------- */
.svc-tiers { display: grid; gap: 14px; }
.svc-tiers article { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--svc-border); border-radius: 16px; background: var(--white); }
.svc-tiers article.on { border: 2px solid var(--accent); padding: 23px; }
.svc-tier-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-tier-head h3 { font-size: 21px; }
.svc-tier-for { font-size: 16px; line-height: 1.55; color: var(--svc-text); }
.svc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.svc-price strong { font-family: var(--display); font-size: 36px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.svc-price small, .svc-from { font-size: 15px; font-weight: 500; color: var(--muted); }
.svc-tiers .svc-ticks { gap: 8px; padding-top: 14px; border-top: 1px solid var(--svc-border); }
.svc-tiers .svc-ticks li { font-size: 15px; }
.svc-tiers .button { margin-top: auto; width: 100%; }
@media (min-width: 960px) { .svc-tiers { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; } }
.svc-price-foot { display: flex; flex-direction: column; gap: 10px; max-width: var(--svc-wide); margin: 24px auto 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.svc-cue { padding: 14px 18px; border-radius: 12px; background: var(--accent-wash); color: var(--svc-text); font-size: 16px; line-height: 1.6; }
.svc-cue strong { color: var(--ink); }
.svc-cue a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 600; color: var(--accent); text-decoration: none; }
.svc-cue a:hover { color: var(--accent-hover); }

/* ---------- related ---------- */
.svc-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.svc-related a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 16px 18px; border: 1px solid var(--svc-border); border-radius: 12px; background: var(--white); transition: border-color 0.15s; }
.svc-related a:hover { border-color: var(--accent); }
.svc-related a > span { display: flex; flex-direction: column; gap: 2px; }
.svc-related strong { font-size: 17px; }
.svc-related small { font-size: 15px; line-height: 1.5; color: var(--svc-text); }
.svc-related svg { color: var(--accent); }
.svc-local-note { margin-top: 20px; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ---------- FAQ ---------- */
.svc-faq { border-top: 1px solid var(--svc-border); }
.svc-faq details { border-bottom: 1px solid var(--svc-border); }
.svc-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: '+'; flex: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 99px; background: var(--accent-tint); color: var(--accent); font-size: 20px; font-weight: 500; line-height: 1; }
.svc-faq details[open] summary::after { content: '−'; background: var(--accent); color: var(--white); }
.svc-faq summary:hover { color: var(--accent-hover); }
.svc-faq details p { padding: 0 48px 20px 0; font-size: 16px; line-height: 1.7; color: var(--svc-text); }
.svc-faq-more { margin-top: 20px; font-size: 16px; color: var(--svc-text); }
@media (max-width: 639px) { .svc-faq details p { padding-right: 0; } }

/* ---------- closing CTA (light: the site footer below is dark) ---------- */
.svc-cta { background: var(--accent-wash); border-top: 1px solid #dfe4ff; }
.svc-cta-grid { display: grid; gap: 32px; align-items: start; padding-block: 56px; }
.svc-cta-copy { display: flex; flex-direction: column; gap: 18px; }
.svc-cta h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.svc-cta-copy > p { color: var(--svc-text); font-size: 17px; line-height: 1.65; max-width: 52ch; }
.svc-cta .quote-form { border-radius: 16px; border-color: var(--svc-border); box-shadow: 0 30px 60px -44px rgba(10, 14, 26, 0.45); }
.svc-cta .quote-form p, .svc-cta .quote-form .subtle { color: var(--muted); font-size: 13px; }
.svc-cta .quote-form #status:not(:empty) { color: var(--ink); }

/* ---------- figures ----------
   Diagrams are flat SVGs with no text baked in. Every label and caption below is real HTML,
   so it is readable, translatable and editable without touching the artwork. Each <img> carries
   its own width and height, so the slot is reserved before the file arrives and nothing shifts. */
.svc-fig { margin: 0; min-width: 0; }
.svc-fig-art { position: relative; }
.svc-fig img { display: block; width: 100%; height: auto; }
.svc-fig figcaption { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.svc-fig-labels { list-style: none; margin: 0; padding: 0; }
.svc-fig-labels li { font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--ink); }

/* Overview: prose with a graphic beside it on wide screens, under it on narrow ones. */
.svc-prose--art { display: grid; gap: 32px; }
.svc-prose--art > div { min-width: 0; }
.svc-fig--side { max-width: 460px; margin-inline: auto; }
@media (min-width: 900px) {
  .svc-prose--art { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
  .svc-fig--side { max-width: none; }
}

/* Capped and centred: several of these files are nearly square, and at full section width they
   would tower over the list they illustrate. */
/* Photographs sit in a framed card so a screenshot reads as a screen rather than as a cutout
   floating on the section background. */
.svc-fig--photo .svc-fig-art { border: 1px solid var(--svc-border); border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: 0 24px 50px -36px rgba(10, 14, 26, 0.45); }
.svc-fig--photo .svc-fig-art img { width: 100%; height: auto; display: block; }
.svc-fig--photo.svc-fig--full .svc-fig-art { padding: 0; border-color: var(--svc-border); background: var(--white); }
.svc-fig--photo .svc-fig-art { position: relative; }
.svc-fig-label { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 4px 10px; border-radius: 99px; background: rgba(10, 14, 26, 0.82); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.svc-fig--pair { display: grid; gap: 14px; }
.svc-fig--pair figcaption { grid-column: 1 / -1; margin-top: 0; }
@media (min-width: 640px) { .svc-fig--pair { grid-template-columns: 1fr 1fr; gap: 16px; } }

.svc-fig--full { max-width: 600px; margin: 36px auto 0; }
.svc-fig--full .svc-fig-art { padding: 24px; border: 1px solid var(--svc-border); border-radius: 18px; background: var(--white); }
.svc-soft .svc-fig--full .svc-fig-art { background: var(--white); }
.svc-white .svc-fig--full .svc-fig-art { background: var(--svc-soft); border-color: transparent; }

/* Process: the five-node flow sits above the written steps, with the step titles placed over the
   space the artwork leaves for them. Node centres in the 1200-wide file are 100, 350, 600, 850
   and 1100, which is 8.333% + 20.833% per step. Below 900px the written list says it better. */
.svc-fig--flow { display: none; }
@media (min-width: 900px) {
  .svc-fig--flow { display: block; position: relative; margin-bottom: 52px; }
  /* The file reserves y 140–320 for captions; we only need down to 160, so the art box is
     cropped there and the labels are placed against that cropped height. */
  .svc-fig--flow .svc-fig-art { aspect-ratio: 1200 / 200; overflow: hidden; }
  .svc-fig--flow .svc-fig-labels li { position: absolute; top: calc(160 / 200 * 100%); left: calc(8.3333% + var(--i) * 20.8333%); width: 19%; transform: translateX(-50%); text-align: center; }
  .svc-steps--narrow { max-width: var(--svc-col); margin-inline: auto; }
}

/* Pricing: the four site packages as a rising ladder. Block centres in the 800-wide file are
   145, 315, 485 and 655, which is 18.125% + 21.25% per step. */
/* The ladder stands for the four site-wide packages, which are not the same thing as this page's
   tiers above it — so it is grouped with the "compare all packages" line, not left floating. */
.svc-packs { display: grid; gap: 20px; align-items: center; padding: 22px 24px; border: 1px solid var(--svc-border); border-radius: 18px; background: var(--white); }
.svc-packs .svc-cue { margin: 0; }
@media (min-width: 760px) { .svc-packs { grid-template-columns: 340px minmax(0, 1fr); gap: 32px; } }
.svc-fig--ladder { position: relative; max-width: 340px; margin: 0 auto; }
.svc-fig--ladder .svc-fig-labels li { position: absolute; top: 86%; left: calc(18.125% + var(--i) * 21.25%); transform: translateX(-50%); white-space: nowrap; font-size: 12px; }

/* The map's leader lines are deliberately unlabelled: the paragraph beside it names the places,
   and inventing pin labels for a simplified silhouette would put cities in the wrong states. */
.svc-local-band { display: grid; gap: 24px; align-items: center; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--svc-border); }
.svc-local-band .svc-local-note { margin: 0; }
@media (min-width: 760px) { .svc-local-band { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; } }
.svc-fig--map { max-width: 300px; margin-inline: auto; }

/* Motion: scroll-driven, so nothing runs off-screen and nothing needs JavaScript.
   Labels stagger by widening each one's range a little further than the last. */
@keyframes svc-fig-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes svc-label-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes svc-label-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc-fig-art { animation: svc-fig-in 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
    .svc-fig-labels li { animation: svc-label-rise 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) both; animation-timeline: view(); animation-range: entry 0% cover calc(22% + var(--i) * 7%); }
    .svc-fig--flow .svc-fig-labels li, .svc-fig--ladder .svc-fig-labels li { animation-name: svc-label-in; }
  }
}

/* ---------- wide screens ---------- */
@media (min-width: 1024px) {
  .svc-hero { padding-bottom: 64px; }
  .svc-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; padding-top: 32px; }
  .svc-art { padding: 32px 32px 0; }
  .svc-art-card { right: 24px; bottom: 24px; width: 240px; }
  .svc-cta-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; padding-block: 84px; }
  .svc-cta-copy { position: sticky; top: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-link svg, .svc-related svg, .svc-cue svg, .svc-more summary::after, .svc-related a, .svc-features summary::after, .svc-features li { transition: none; }
  .svc-fig-art, .svc-fig-labels li { animation: none !important; }
}