/* ============================================================
   VeroWeb Co. — Design System
   Built from Brand Identity Standards v1.3
   ============================================================ */

/* ---------- Tokens (Brand Standards v1.3) ----------
   v1.3 separates the master identity blue from surface-optimised UI action
   blues. Blue 500 is the logo. Blue 600 is every action on a light surface.
   Blue 400 is every action on a dark surface. Never mix them up. */
:root{
  --ink:#02060F; --white:#FFFFFF;

  /* Blue family */
  --blue-600:#0054FC;   /* light-surface links, CTAs, selected states */
  --blue-500:#2E6BFF;   /* master identity blue — mark + "Web" only      */
  --blue-400:#4F83FF;   /* dark-surface links, icons, CTAs               */
  --blue-100:#DCE8FF;   /* selection fills, badges, quiet blue surfaces  */
  --blue:var(--blue-600);        /* default action = light surface       */
  --logo-blue:var(--blue-500);

  /* Surfaces */
  --cloud:#F7F9FC; --blue-mist:#F2F6FF; --midnight:#0A1224;

  /* Secondary */
  --deep-cobalt:#173BA8; --aqua:#18B7E9; --violet:#7567F8;

  /* Text — split by surface. Slate is 2.40:1 on Ink; never use it on dark. */
  --text-light-primary:#02060F;
  --text-light-secondary:#454D61;   /* Slate 700 */
  --text-light-tertiary:#6B7280;    /* Gray 500  */
  --text-dark-primary:#FFFFFF;
  --text-dark-secondary:#98A2B3;    /* Dark Secondary — 7.87:1 on Ink */
  --slate:var(--text-light-secondary);
  --gray-500:var(--text-light-tertiary);
  --line-200:#D6DAE1;
  /* Interactive controls (inputs, secondary buttons) need a 3:1 boundary per
     WCAG 1.4.11. Line 200 is 1.40:1 on white, so controls use Line Strong.
     Line 200 stays for decorative dividers and card edges, which are exempt. */
  --line-strong:#7F8798;

  /* Status — paired by surface */
  --success:#117A52; --success-dark:#34D399;
  --warning:#8A5A00; --warning-dark:#F5B942;
  --error:#C83B4B;   --error-dark:#FB7185;
  --info:#1467CC;    --info-dark:#60A5FA;

  --radius-xs:6px; --radius-sm:10px; --radius-md:14px;
  --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;

  --sp-2xs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px; --sp-lg:24px;
  --sp-xl:32px; --sp-2xl:48px; --sp-3xl:64px; --sp-4xl:96px; --sp-5xl:128px;

  --shadow-xs:0 1px 2px rgba(2,6,15,.06);
  --shadow-sm:0 4px 14px rgba(2,6,15,.08);
  --shadow-md:0 12px 32px rgba(2,6,15,.10);
  --shadow-lg:0 24px 60px rgba(2,6,15,.14);
  --shadow-dark:0 18px 50px rgba(0,0,0,.28);

  --motion-fast:180ms; --motion-med:320ms; --motion-slow:560ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --container-max:1280px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:90px; scroll-padding-bottom:96px}
body{
  margin:0; font-family:"Inter",Arial,Helvetica,system-ui,sans-serif;
  font-size:16px; line-height:1.6; color:var(--ink); background:var(--white);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;letter-spacing:-.03em}
p{margin:0}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:16px}
table{border-collapse:collapse;width:100%}

.skip-link{position:absolute;left:-999px;top:0;z-index:1000;background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;font-weight:600}
.skip-link:focus{left:0}
/* #main takes tabindex="-1" so the skip link actually moves focus, not just the
   viewport. The ring is suppressed because the whole page would be outlined. */
main:focus{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px;border-radius:var(--radius-xs)}
/* Blue 600 is only 3.55:1 against Ink. On dark fields the ring switches to
   Blue 400 (5.82:1) so keyboard focus stays visible. */
.bg-ink :focus-visible,.site-footer :focus-visible,.cta-block :focus-visible,
.risk-band :focus-visible,.sticky-cta :focus-visible,.pullquote :focus-visible{
  outline-color:var(--blue-400)
}

/* ---------- Type ---------- */
h1,.h1{font-size:clamp(2.5rem,5vw,4.25rem);line-height:1.05;letter-spacing:-.038em}
h2,.h2{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.12;letter-spacing:-.032em;font-weight:650}
h3,.h3{font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1.18;letter-spacing:-.026em;font-weight:650}
h4,.h4{font-size:1.5rem;line-height:1.28;letter-spacing:-.02em;font-weight:600}
h5,.h5{font-size:1.2rem;line-height:1.35;letter-spacing:-.015em;font-weight:600}
h6,.h6{font-size:1rem;line-height:1.4;letter-spacing:-.01em;font-weight:600}
.lead{font-size:clamp(1.075rem,1.5vw,1.3rem);line-height:1.6;font-weight:400;color:var(--slate)}
.body-lg{font-size:1.125rem;line-height:1.65;color:var(--slate)}
.body{font-size:1rem;line-height:1.65;color:var(--slate)}
.small{font-size:.875rem;line-height:1.55}
.caption{font-size:.75rem;line-height:1.5;letter-spacing:.01em;color:var(--gray-500)}
.overline{font-size:.75rem;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--blue);display:block}
.on-dark .overline,.overline.on-dark{color:var(--blue-400)}

/* ---------- Layout ---------- */
.container{max-width:var(--container-max);margin:0 auto;padding:0 24px}
@media(min-width:1440px){.container{padding:0 80px}}
section{padding:var(--sp-4xl) 0}
@media(max-width:640px){section{padding:var(--sp-3xl) 0}}
.grid{display:grid;gap:var(--sp-lg)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.bg-cloud{background:var(--cloud)}
.bg-mist{background:var(--blue-mist)}
.bg-ink{background:var(--ink);color:var(--text-dark-primary)}
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4,.bg-ink h5{color:var(--text-dark-primary)}
/* Safety net: Slate is only 2.40:1 on Ink, so any body class landing on a dark
   field must fall back to the Dark Secondary token. */
.bg-ink .body,.bg-ink .body-lg,.bg-ink .lead,.bg-ink .small,.bg-ink .caption{color:var(--text-dark-secondary)}

/* ---------- Motion utilities ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--motion-slow) var(--ease-out),transform var(--motion-slow) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal-d1{transition-delay:80ms} .reveal-d2{transition-delay:160ms}
.reveal-d3{transition-delay:240ms} .reveal-d4{transition-delay:320ms}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:8px 26px;border-radius:var(--radius-pill);font-size:15px;font-weight:600;line-height:1;border:1px solid transparent;transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease);white-space:nowrap}
.btn-sm{min-height:44px;padding:6px 20px;font-size:14px}
/* Light surface: Blue 600 fill + White text (5.72:1) */
.btn-primary{background:var(--blue-600);color:#fff}
.btn-primary:hover{background:#0047DB}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--ink)}
/* Icon-only phone CTA keeps a 44px square target at every width. */
.nav-phone-cta{min-width:44px}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}

/* Dark surface: Blue 400 fill + INK text (5.82:1). Per v1.3 p.90 this is
   clearer than white on a dark blue — do not substitute white text here. */
.bg-ink .btn-primary,.risk-band .btn-primary,.cta-block .btn-primary,.site-footer .btn-primary{
  background:var(--blue-400);color:var(--ink)
}
.bg-ink .btn-primary:hover,.risk-band .btn-primary:hover,.cta-block .btn-primary:hover,.site-footer .btn-primary:hover{
  background:#6E99FF
}
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.btn-on-dark:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-arrow{transition:transform var(--motion-fast) var(--ease);flex:none}
.btn:hover .btn-arrow{transform:translateX(4px)}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--blue)}
.link-arrow svg{transition:transform var(--motion-fast) var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--line-200);box-shadow:var(--shadow-xs)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:11px}
.brand-desc{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-light-secondary);border-left:1px solid var(--line-200);padding-left:11px;white-space:nowrap;line-height:1}
@media(max-width:1100px){.brand-desc{display:none}}
.brand img{height:34px;width:auto;display:block}
@media(max-width:400px){.brand img{height:30px}}
.nav-links{display:flex;align-items:center;gap:var(--sp-xl)}
.nav-links>a,.nav-trigger{font-size:15px;font-weight:500;letter-spacing:-.005em;padding:6px 2px;transition:color var(--motion-fast) var(--ease)}
.nav-links>a:hover,.nav-trigger:hover,.nav-links>a[aria-current],.nav-trigger[aria-current]{color:var(--blue-600)}
.nav-cta{display:flex;align-items:center;gap:var(--sp-sm)}
.nav-mobile-cta{display:none}

/* --- Services dropdown --- */
.nav-item{position:relative}
.nav-item-row{display:inline-flex;align-items:center;gap:2px}
.nav-sub-toggle{background:none;border:none;padding:4px;min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;color:inherit;border-radius:var(--radius-xs)}
.nav-chev{transition:transform var(--motion-med) var(--ease)}
.has-menu:hover .nav-chev,.has-menu:focus-within .nav-chev{transform:rotate(180deg)}
.nav-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px) scale(.98);
  width:340px;opacity:0;visibility:hidden;pointer-events:none;transform-origin:top center;
  transition:opacity var(--motion-med) var(--ease-out),transform var(--motion-med) var(--ease-out),visibility 0s linear var(--motion-med);
}
.nav-menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-menu-inner{background:#fff;border:1px solid var(--line-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:10px;display:grid;gap:2px;overflow:hidden}
.has-menu:hover .nav-menu,.has-menu:focus-within .nav-menu,.has-menu.is-open .nav-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);
  transition:opacity var(--motion-med) var(--ease-out),transform var(--motion-med) var(--ease-out),visibility 0s;
}
.nav-menu-item{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:var(--radius-sm);transition:background var(--motion-fast) var(--ease)}
.nav-menu-item:hover,.nav-menu-item:focus-visible{background:var(--blue-mist)}
.nmi-icon{flex:none;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--blue-mist);display:flex;align-items:center;justify-content:center;color:var(--blue-600);transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.nav-menu-item:hover .nmi-icon{background:var(--blue-600);color:#fff}
.nmi-text{display:grid;gap:2px;min-width:0}
.nmi-text strong{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.nmi-text span{font-size:12.5px;color:var(--gray-500);line-height:1.4}
.nav-menu-all{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:11px 12px;border-top:1px solid var(--line-200);font-size:13.5px;font-weight:600;color:var(--blue-600)}
.nav-menu-all svg{transition:transform var(--motion-fast) var(--ease)}
.nav-menu-all:hover svg{transform:translateX(4px)}

/* --- Animated hamburger -----------------------------------------------
   Concept A: bar ends are cut to the angle of the V in the logomark, so the
   glyph leans forward like the mark does. Middle bar is Blue 600 (light
   surface). On open the outer bars cross into an X and the blue one takes
   one of the two strokes, so the brand colour survives the transition. */
.nav-toggle{display:none;background:none;border:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.nav-burger{display:block;width:22px;height:16px;position:relative}
.nav-burger i{
  display:block;position:absolute;left:0;height:2.6px;background:var(--ink);
  /* the 4px horizontal offset at top vs bottom is the V angle */
  clip-path:polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  transition:transform var(--motion-med) var(--ease-out),
             opacity 160ms var(--ease),
             width var(--motion-med) var(--ease-out),
             clip-path var(--motion-med) var(--ease-out),
             border-radius var(--motion-med) var(--ease-out);
}
.nav-burger i:nth-child(1){top:0;width:22px}
.nav-burger i:nth-child(2){top:6.7px;width:17.2px;background:var(--blue-600)}
.nav-burger i:nth-child(3){top:13.4px;width:12.3px}
.nav-toggle:hover .nav-burger i:nth-child(2){width:22px}
.nav-toggle:hover .nav-burger i:nth-child(3){width:17.2px}

/* open: outer bars cross, blue bar becomes the second stroke of the X */
.site-header.nav-open .nav-burger i{clip-path:none;border-radius:1.4px;width:22px}
.site-header.nav-open .nav-burger i:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
.site-header.nav-open .nav-burger i:nth-child(2){transform:rotate(-45deg)}
.site-header.nav-open .nav-burger i:nth-child(3){opacity:0;transform:translateY(-6.7px) rotate(45deg)}

/* --- Mobile --- */
@media(max-width:940px){
  .nav-toggle{display:inline-flex}
  .nav-cta .btn{display:none}
  /* backdrop-filter on .site-header makes it the containing block for
     fixed children, so inset:...0 collapses the height. Pin top/left/right
     and give an explicit height instead. dvh accounts for mobile browser
     chrome; the vh line is the fallback. */
  .nav-links{
    position:fixed;top:78px;left:0;right:0;
    height:calc(100vh - 78px);
    height:calc(100dvh - 78px);
    background:#fff;display:block;
    padding:var(--sp-lg) 24px calc(var(--sp-4xl) + env(safe-area-inset-bottom));
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity var(--motion-med) var(--ease-out),transform var(--motion-med) var(--ease-out),visibility 0s linear var(--motion-med);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  /* opaque header while the panel is open so nothing shows through the top bar */
  .site-header.nav-open{background:#fff;backdrop-filter:none}
  .site-header.nav-open .nav-links{opacity:1;visibility:visible;transform:none;transition:opacity var(--motion-med) var(--ease-out),transform var(--motion-med) var(--ease-out),visibility 0s}
  .nav-links>*{opacity:0;transform:translateY(8px);transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
  .site-header.nav-open .nav-links>*{opacity:1;transform:none}
  .site-header.nav-open .nav-links>*:nth-child(1){transition-delay:60ms}
  .site-header.nav-open .nav-links>*:nth-child(2){transition-delay:100ms}
  .site-header.nav-open .nav-links>*:nth-child(3){transition-delay:140ms}
  .site-header.nav-open .nav-links>*:nth-child(4){transition-delay:180ms}
  .site-header.nav-open .nav-links>*:nth-child(5){transition-delay:220ms}
  .site-header.nav-open .nav-links>*:nth-child(6){transition-delay:260ms}
  /* :not(.btn) keeps the CTA out of this rule; it was inheriting
     justify-content:space-between and padding:16px 0, which killed the
     button's centring and side padding. */
  .nav-links>a:not(.btn),.nav-item-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;border-bottom:1px solid var(--line-200);font-size:18px;font-weight:500}
  .nav-trigger{flex:1;padding:0;font-size:18px}
  .nav-sub-toggle{width:44px;height:44px;margin:-14px 0}
  .nav-item{position:static}
  /* The desktop open-state rule is 0,3,0 and outranks a bare .nav-menu here,
     so its translate(-50%) has to be cancelled at matching specificity or the
     panel sits half off-screen. */
  .nav-menu,
  .has-menu:hover .nav-menu,
  .has-menu:focus-within .nav-menu,
  .has-menu.is-open .nav-menu{
    position:static;width:auto;left:auto;right:auto;top:auto;
    transform:none;opacity:1;visibility:visible;pointer-events:auto;
    box-shadow:none;
    display:grid;transition:grid-template-rows var(--motion-med) var(--ease-out);
  }
  .nav-menu,
  .has-menu:hover .nav-menu,
  .has-menu:focus-within .nav-menu{grid-template-rows:0fr}
  .has-menu.is-open .nav-menu{grid-template-rows:1fr}
  .nav-menu::before{display:none}
  /* grid-template-rows:0fr clips the panel visually, but its links stayed in
     the tab order and the accessibility tree. visibility removes them while the
     row is collapsed, and is delayed on the way out so the slide still shows. */
  .nav-menu-inner{min-height:0;border:none;box-shadow:none;border-radius:0;background:transparent;padding:0;visibility:hidden;transition:padding var(--motion-med) var(--ease-out),visibility 0s linear var(--motion-med)}
  .has-menu.is-open .nav-menu-inner{padding:10px 0 14px;visibility:visible;transition:padding var(--motion-med) var(--ease-out),visibility 0s}
  .nav-menu-item{padding:12px 10px;border-radius:var(--radius-sm);background:var(--cloud);margin-bottom:6px}
  .nmi-text strong{font-size:15.5px}
  .nav-menu-all{border-top:none;padding:10px}
  .has-menu:hover .nav-chev{transform:none}
  .has-menu.is-open .nav-chev{transform:rotate(180deg)}
  .nav-mobile-cta{
    display:inline-flex;justify-content:center;align-items:center;
    width:100%;min-height:52px;padding:8px 26px;margin-top:var(--sp-xl);
    border-bottom:none !important;font-size:16px;
  }
}
@media(prefers-reduced-motion:reduce){
  .nav-menu,.nav-menu-inner,.nav-burger i,.nav-chev,.nav-links,.nav-links>*{transition:none !important}
}

/* ---------- HERO (editorial, asymmetric) ---------- */
/* Hero is deliberately shorter than the viewport so the proof bar peeks above
   the fold. A hero that exactly fills the screen reads as a finished page and
   suppresses scrolling. */
.hero{position:relative;padding:var(--sp-3xl) 0 var(--sp-2xl);overflow:hidden}
@media(min-height:900px){.hero{padding:var(--sp-4xl) 0 var(--sp-3xl)}}
.hero::before{
  content:"";position:absolute;top:-320px;right:-220px;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,84,252,.10) 0%,rgba(0,84,252,0) 68%);pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-4xl);align-items:center;position:relative}
@media(max-width:1040px){.hero-grid{grid-template-columns:1fr;gap:var(--sp-2xl)}}
.hero h1{max-width:15ch}
.hero h1 .accent{color:var(--blue);position:relative;white-space:nowrap}
.hero .lead{margin-top:var(--sp-lg);max-width:50ch}
.hero-actions{display:flex;gap:var(--sp-md);margin-top:var(--sp-xl);flex-wrap:wrap}
.hero-meta{display:flex;gap:var(--sp-lg);margin-top:var(--sp-2xl);flex-wrap:wrap;align-items:center}
.hero-meta span{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--slate);font-weight:500}
.hero-meta svg{color:var(--blue);flex:none}
/* inline-block, not inline-flex: the content is one sentence, and flex gaps
   were splitting it into three items with 8px gaps between them. */
.price-flag{display:inline-block;background:var(--blue-mist);border-radius:var(--radius-pill);
  padding:9px 20px;margin-bottom:var(--sp-lg);font-size:14px;line-height:1.45;color:var(--slate)}
.price-flag b{color:var(--ink);font-weight:700}

/* ===== HERO SYSTEM DIAGRAM =====
   A lead-signal travels the circuit and each capability illuminates as it
   passes. Node timings are derived from the signal's real position along the
   path (pathLength is normalised to 1000), so light and signal stay in sync. */
.hero-visual{
  position:relative;border-radius:var(--radius-xl);background:var(--blue-mist);
  padding:clamp(18px,3vw,34px);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hero-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(2,6,15,.06) 1.2px,transparent 1.2px);
  background-size:26px 26px;
}
.sysdiagram{position:relative;z-index:1;width:100%;max-width:540px;height:auto;overflow:visible}

/* static appearance */
.sd-name{font-family:"Inter",sans-serif;font-size:13.5px;font-weight:600;fill:var(--ink)}
.sd-sub{font-family:"Inter",sans-serif;font-size:10.5px;font-weight:500;fill:var(--gray-500)}
.sd-tag{font-family:"Inter",sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.16em;fill:var(--gray-500)}
.sd-card{fill:#fff;stroke:var(--line-200);stroke-width:1.5}
.sd-chip{fill:var(--blue-mist)}
.sd-glyph{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sd-track{fill:none;stroke:var(--line-200);stroke-width:2}
.sd-mark{fill:var(--ink)}
.sd-v{fill:none;stroke:#fff;stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.sd-v2{fill:none;stroke:var(--blue-500);stroke-width:13.5;stroke-linecap:butt;stroke-linejoin:round}
.sd-halo{fill:none;stroke:var(--blue);stroke-width:2;opacity:0}

/* entrance */
@keyframes sdDraw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes sdRise{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes sdFade{from{opacity:0}to{opacity:1}}
@keyframes sdVDraw{from{stroke-dashoffset:96}to{stroke-dashoffset:0}}
@keyframes sdSlashIn{from{opacity:0;transform:translate(-10px,10px)}to{opacity:1;transform:none}}
/* ambient + signal */
@keyframes sdAura{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.12);opacity:.75}}
@keyframes sdComet{to{stroke-dashoffset:var(--end)}}
/* illumination */
@keyframes sdCardLit{0%{stroke:#D6DAE1}4%{stroke:#0054FC}17%{stroke:#0054FC}32%{stroke:#D6DAE1}100%{stroke:#D6DAE1}}  /* light surface: Blue 600 */
@keyframes sdLift{0%{transform:none}4%{transform:translateY(-5px)}17%{transform:translateY(-5px)}32%{transform:none}100%{transform:none}}
@keyframes sdChipLit{0%{fill:#F2F6FF}4%{fill:#0054FC}17%{fill:#0054FC}32%{fill:#F2F6FF}100%{fill:#F2F6FF}}
@keyframes sdGlyphLit{0%{stroke:#0054FC}4%{stroke:#FFFFFF}17%{stroke:#FFFFFF}32%{stroke:#0054FC}100%{stroke:#0054FC}}
@keyframes sdHaloPulse{0%{opacity:0;transform:scale(.5)}5%{opacity:.45}24%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}

.sd-aura{transform-box:fill-box;transform-origin:center;animation:sdAura 10s var(--ease) infinite}
.sd-track{stroke-dasharray:1000;animation:sdDraw 1.1s var(--ease-out) .15s both}
/* three stacked strokes fake a comet with a fading tail; all share a leading edge */
.sd-comet{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;animation:sdComet 7s linear 1.65s infinite}
.sd-comet.c1{stroke-dasharray:16 984;stroke-dashoffset:16;--end:-984}
.sd-comet.c2{stroke-dasharray:48 952;stroke-dashoffset:48;--end:-952;opacity:.36}
.sd-comet.c3{stroke-dasharray:104 896;stroke-dashoffset:104;--end:-896;opacity:.13}
.sd-node{transform-box:fill-box;transform-origin:center;animation:sdRise .62s var(--ease-out) var(--e) both}
.sd-node-in{transform-box:fill-box;transform-origin:center;animation:sdLift 7s var(--ease) var(--d) infinite}
.sd-node-in .sd-card{animation:sdCardLit 7s var(--ease) var(--d) infinite}
.sd-node-in .sd-chip{animation:sdChipLit 7s var(--ease) var(--d) infinite}
.sd-node-in .sd-glyph{animation:sdGlyphLit 7s var(--ease) var(--d) infinite}
.sd-node-in .sd-halo{transform-box:fill-box;transform-origin:center;animation:sdHaloPulse 7s var(--ease) var(--d) infinite}
.sd-core{transform-box:fill-box;transform-origin:center;animation:sdRise .7s var(--ease-out) .8s both}
.sd-v{stroke-dasharray:96;animation:sdVDraw .68s var(--ease-out) 1s both}
.sd-v2{transform-box:fill-box;animation:sdSlashIn .5s var(--ease-out) 1.45s both}
.sd-tag{animation:sdFade .6s ease 1.85s both}

@media(prefers-reduced-motion:reduce){
  .sd-aura,.sd-node,.sd-node-in,.sd-core,.sd-v2,.sd-tag{animation:none !important;opacity:1 !important;transform:none !important}
  .sd-track,.sd-v{animation:none !important;stroke-dashoffset:0 !important}
  .sd-comet,.sd-halo{display:none}
}

/* ---------- Marquee proof strip ---------- */
.proofbar{border-top:1px solid var(--line-200);border-bottom:1px solid var(--line-200);padding:var(--sp-lg) 0;background:var(--cloud)}
.proofbar-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-lg);flex-wrap:wrap}
.proof-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-500)}
.proof-items{display:flex;gap:var(--sp-2xl);flex-wrap:wrap}
.proof-items div{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.proof-items svg{color:var(--blue);flex:none}

/* ---------- Problem: editorial numbered list ---------- */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-4xl);align-items:start}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:var(--sp-2xl)}}
.split-sticky{position:sticky;top:120px}
@media(max-width:940px){.split-sticky{position:static}}
.numlist{border-top:1px solid var(--line-200)}
.numrow{display:grid;grid-template-columns:64px 1fr;gap:var(--sp-lg);padding:var(--sp-xl) 0;border-bottom:1px solid var(--line-200);transition:background var(--motion-fast) var(--ease)}
.numrow .n{font-size:14px;font-weight:700;color:var(--blue);padding-top:4px;letter-spacing:.04em}
.numrow h4{margin-bottom:8px}
.numrow p{color:var(--slate);font-size:16px}
.numrow .cost{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--ink);background:var(--blue-mist);padding:5px 12px;border-radius:var(--radius-pill)}
@media(max-width:560px){.numrow{grid-template-columns:1fr;gap:8px}}

/* ---------- Services: alternating editorial rows ---------- */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4xl);align-items:center;padding:var(--sp-3xl) 0;border-bottom:1px solid var(--line-200)}
.svc-row:last-child{border-bottom:none}
.svc-row:nth-child(even) .svc-visual{order:-1}
@media(max-width:940px){.svc-row{grid-template-columns:1fr;gap:var(--sp-xl);padding:var(--sp-2xl) 0}.svc-row:nth-child(even) .svc-visual{order:0}}
.svc-copy .svc-index{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.08em;margin-bottom:var(--sp-md);display:block}
.svc-copy h3{margin-bottom:var(--sp-md)}
.svc-copy p{color:var(--slate);max-width:46ch}
.svc-list{margin-top:var(--sp-lg);display:grid;gap:10px}
.svc-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.svc-list svg{color:var(--blue);flex:none;margin-top:3px}
.svc-visual{background:var(--blue-mist);border-radius:var(--radius-xl);padding:var(--sp-xl);aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.svc-visual.dark{background:var(--ink)}
.svc-visual svg{width:100%;height:auto;max-height:100%}

/* ===== SERVICE PANEL MOTION =====
   Each panel animates a small story, and only while the row is on screen
   (the .is-in class is added by IntersectionObserver). Nothing loops off-screen. */
.svc-visual svg{width:100%;height:auto;max-height:100%}

/* 01 — the page assembles, then a visitor clicks the CTA */
@keyframes wdIn{0%{opacity:0;transform:translateX(-14px)}10%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-14px)}}
@keyframes wdCursor{0%,40%{opacity:0;transform:translate(78px,46px)}47%{opacity:1;transform:translate(50px,28px)}63%{opacity:1;transform:translate(0,0) scale(1)}69%{transform:translate(0,0) scale(.84)}76%,88%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(0,0) scale(1)}}
@keyframes wdRipple{0%,63%{opacity:0;transform:scale(.5)}71%{opacity:.45;transform:scale(1)}86%,100%{opacity:0;transform:scale(1.75)}}
.svc-row.is-in .wd-el{transform-box:fill-box;animation:wdIn 6.5s var(--ease-out) infinite;animation-delay:var(--e,0s)}
.svc-row.is-in .wd-cursor{transform-box:fill-box;transform-origin:top left;animation:wdCursor 6.5s var(--ease-out) infinite}
.svc-row.is-in .wd-ripple{transform-box:fill-box;transform-origin:center;animation:wdRipple 6.5s var(--ease-out) infinite}

/* 02 — the identity resolves: V draws, slash lands, system fills in */
@keyframes brV{0%{stroke-dashoffset:150}18%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:150}}
@keyframes brSlash{0%,13%{opacity:0;transform:translate(-11px,11px)}25%,86%{opacity:1;transform:none}100%{opacity:0;transform:translate(-11px,11px)}}
@keyframes brPop{0%{opacity:0;transform:scale(.7)}14%,86%{opacity:1;transform:none}100%{opacity:0;transform:scale(.7)}}
.svc-row.is-in .br-v{stroke-dasharray:150;animation:brV 7s var(--ease-out) infinite}
.svc-row.is-in .br-slash{transform-box:fill-box;animation:brSlash 7s var(--ease-out) infinite}
.svc-row.is-in .br-el{transform-box:fill-box;transform-origin:center;animation:brPop 7s var(--ease-out) infinite;animation-delay:var(--e,0s)}

/* 03 — a query is typed, results land, your result climbs to #1, AI cites you */
@keyframes seoType{0%{transform:scaleX(0)}13%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes seoCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes seoRow{0%{opacity:0;transform:translateY(10px)}20%{opacity:1;transform:translateY(0)}40%{transform:translateY(0)}56%,88%{transform:translateY(56px)}100%{opacity:0;transform:translateY(56px)}}
@keyframes seoRise{0%{opacity:0;transform:translateY(10px)}20%{opacity:1;transform:translateY(0)}40%{transform:translateY(0)}56%,88%{transform:translateY(-112px)}100%{opacity:0;transform:translateY(-112px)}}
@keyframes seoHi{0%,42%{fill:#0A1224}58%,88%{fill:#4F83FF}100%{fill:#0A1224}}
@keyframes seoCite{0%,64%{opacity:0;transform:translateY(12px)}72%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(12px)}}
.svc-row.is-in .seo-type{transform-box:fill-box;transform-origin:left center;animation:seoType 8s var(--ease-out) infinite}
.svc-row.is-in .seo-caret{animation:seoCaret .9s steps(1) infinite}
.svc-row.is-in .seo-row{transform-box:fill-box;animation:seoRow 8s var(--ease-out) infinite;animation-delay:var(--e,0s)}
.svc-row.is-in .seo-you{transform-box:fill-box;animation:seoRise 8s var(--ease-out) infinite}
.svc-row.is-in .seo-you-bg{animation:seoHi 8s var(--ease-out) infinite}
.svc-row.is-in .seo-cite{transform-box:fill-box;animation:seoCite 8s var(--ease-out) infinite}

/* 04 — one lead travels the workflow, pausing at the human checkpoint */
@keyframes auDot{0%{opacity:0;transform:translate(0,0)}6%{opacity:1;transform:translate(0,0)}24%{transform:translate(0,99px)}42%{transform:translate(0,99px)}58%{transform:translate(191px,99px)}76%{transform:translate(191px,99px)}92%{opacity:1;transform:translate(191px,197px)}100%{opacity:0;transform:translate(191px,197px)}}
@keyframes auGlow{0%{opacity:0}4%{opacity:1}17%{opacity:1}27%{opacity:0}100%{opacity:0}}
@keyframes auHold{0%,60%{opacity:0}64%{opacity:1}74%{opacity:1}80%,100%{opacity:0}}
@keyframes auFlow{to{stroke-dashoffset:-42}}
.svc-row.is-in .au-dot{transform-box:fill-box;animation:auDot 7s var(--ease) infinite}
.svc-row.is-in .au-glow{animation:auGlow 7s var(--ease) infinite;animation-delay:var(--d,0s)}
.svc-row.is-in .au-hold{animation:auHold 7s var(--ease) infinite}
.svc-row.is-in .au-line{stroke-dasharray:5 7;animation:auFlow 2.4s linear infinite}

@media(prefers-reduced-motion:reduce){
  .svc-row.is-in .wd-el,.svc-row.is-in .wd-cursor,.svc-row.is-in .wd-ripple,
  .svc-row.is-in .br-v,.svc-row.is-in .br-slash,.svc-row.is-in .br-el,
  .svc-row.is-in .seo-type,.svc-row.is-in .seo-caret,.svc-row.is-in .seo-row,
  .svc-row.is-in .seo-you,.svc-row.is-in .seo-you-bg,.svc-row.is-in .seo-cite,
  .svc-row.is-in .au-dot,.svc-row.is-in .au-glow,.svc-row.is-in .au-hold,.svc-row.is-in .au-line{
    animation:none !important;opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important
  }
  .wd-cursor,.wd-ripple,.au-dot,.au-hold{display:none}
}

/* ---------- Process timeline ---------- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-lg);margin-top:var(--sp-2xl)}
.timeline::before{content:"";position:absolute;top:19px;left:0;right:0;height:2px;background:var(--line-200)}
.timeline-fill{position:absolute;top:19px;left:0;height:2px;background:var(--blue);width:0;transition:width 1.4s var(--ease-out)}
.timeline.is-in .timeline-fill{width:100%}
@media(max-width:820px){.timeline{grid-template-columns:1fr;gap:var(--sp-xl)}.timeline::before,.timeline-fill{display:none}}
.tl-step{position:relative;padding-top:0}
.tl-dot{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--line-200);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--gray-500);position:relative;z-index:2;transition:border-color var(--motion-med) var(--ease),color var(--motion-med) var(--ease),background var(--motion-med) var(--ease)}
.timeline.is-in .tl-dot{border-color:var(--blue);color:#fff;background:var(--blue)}
.tl-step h4{font-size:1.2rem;margin:var(--sp-lg) 0 8px}
.tl-step p{font-size:15px;color:var(--slate)}
.tl-step .tl-time{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--blue)}

/* ---------- PRICING ---------- */
/* Risk-reversal band — the free homepage offer */
.risk-band{display:flex;align-items:center;gap:var(--sp-2xl);flex-wrap:wrap;justify-content:space-between;background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:var(--sp-2xl);margin-bottom:var(--sp-2xl);position:relative;overflow:hidden}
.risk-band::after{content:"";position:absolute;top:-120px;right:-80px;width:420px;height:420px;background:radial-gradient(circle,rgba(0,84,252,.30) 0%,rgba(0,84,252,0) 70%);pointer-events:none}
.risk-band>*{position:relative;z-index:1}
.rb-copy{max-width:60ch}
.risk-band h3{color:#fff;margin:12px 0 10px}
.risk-band p{color:var(--text-dark-secondary)}
.rb-steps{display:flex;gap:var(--sp-lg);flex-wrap:wrap;margin-top:var(--sp-lg)}
.rb-step{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:#fff}
.rb-num{width:23px;height:23px;border-radius:50%;background:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
/* opacity:.8 put this at 4.43:1 over the band's blue glow. Full-strength Dark
   Secondary is 6.20:1 in the same place. */
.rb-fine{margin-top:var(--sp-md);font-size:13px;color:var(--text-dark-secondary) !important}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg);align-items:stretch}
@media(max-width:1080px){.pricing-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.plan{background:#fff;border:1px solid var(--line-200);border-radius:var(--radius-lg);padding:var(--sp-xl);display:flex;flex-direction:column;position:relative;transition:transform var(--motion-med) var(--ease),box-shadow var(--motion-med) var(--ease)}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.plan.featured{border:2px solid var(--blue)}
.plan-tag{position:absolute;top:-13px;left:var(--sp-xl);background:var(--blue);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 14px;border-radius:var(--radius-pill)}
.plan h3{margin-bottom:6px}
.plan .plan-for{color:var(--gray-500);font-size:15px;min-height:72px}
@media(max-width:1080px){.plan .plan-for{min-height:0}}
.seo-clarifier{max-width:74ch;margin:var(--sp-2xl) auto 0;text-align:center;font-size:14.5px;line-height:1.65;color:var(--slate);background:var(--cloud);border:1px solid var(--line-200);border-radius:var(--radius-md);padding:var(--sp-lg) var(--sp-xl)}
.seo-clarifier strong{color:var(--ink)}
.plan-price{display:flex;align-items:baseline;gap:8px;margin:var(--sp-lg) 0 var(--sp-xs)}
.plan-price .amt{font-size:3rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.plan-price .per{font-size:14px;color:var(--gray-500);font-weight:500}
.plan-note{font-size:13px;color:var(--gray-500);margin-bottom:var(--sp-lg)}
.plan ul{display:grid;gap:12px;margin:var(--sp-lg) 0;padding-top:var(--sp-lg);border-top:1px solid var(--line-200)}
.plan ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5}
.plan ul svg{color:var(--blue);flex:none;margin-top:3px}
.plan .btn{margin-top:auto;width:100%}

.addon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-lg);margin-top:var(--sp-lg)}
@media(max-width:1040px){.addon-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.addon-grid{grid-template-columns:1fr}}
.addon{background:#fff;border:1px solid var(--line-200);border-radius:var(--radius-md);padding:var(--sp-xl);transition:border-color var(--motion-fast) var(--ease),transform var(--motion-fast) var(--ease)}
.addon:hover{border-color:var(--ink);transform:translateY(-2px)}
.addon.recurring{background:var(--ink);border-color:var(--ink);color:#fff}
.addon.recurring .addon-price,.addon.recurring h4{color:#fff}
.addon.recurring p,.addon.recurring li{color:var(--text-dark-secondary)}
.addon.recurring svg.tick{color:var(--blue-400)}
.addon .kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:10px}
.addon.recurring .kicker{color:var(--blue-400)}
.addon h4{font-size:1.15rem;margin-bottom:8px}
.addon-price{font-size:1.9rem;font-weight:700;letter-spacing:-.03em;margin:var(--sp-md) 0 4px}
.addon-price small{font-size:13px;font-weight:500;color:var(--gray-500);letter-spacing:0}
.addon.recurring .addon-price small{color:var(--text-dark-secondary)}
.addon p{font-size:14px;color:var(--slate);line-height:1.55}
.addon ul{margin-top:var(--sp-md);display:grid;gap:8px}
.addon ul li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--slate);line-height:1.5}
.addon ul svg{flex:none;margin-top:3px;color:var(--blue)}

.pricing-foot{margin-top:var(--sp-2xl);padding:var(--sp-xl);background:var(--blue-mist);border-radius:var(--radius-lg);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-lg);flex-wrap:wrap}
.pricing-foot p{max-width:56ch}

/* ---------- Sample / placeholder badge ---------- */

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line-200)}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:var(--sp-lg) 44px var(--sp-lg) 0;font-size:1.075rem;font-weight:600;color:var(--ink);position:relative;letter-spacing:-.015em;line-height:1.4}
.faq-q::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-70%) rotate(45deg);transition:transform var(--motion-med) var(--ease)}
.faq-item.open .faq-q::after{transform:translateY(-20%) rotate(225deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--motion-med) var(--ease)}
.faq-a p{padding:0 var(--sp-2xl) var(--sp-lg) 0;color:var(--slate);font-size:15.5px;line-height:1.65}

/* ---------- CTA ---------- */
.cta-block{border-radius:var(--radius-xl);padding:var(--sp-4xl) var(--sp-2xl);text-align:center;position:relative;overflow:hidden}
.cta-block::after{content:"";position:absolute;bottom:-160px;left:50%;transform:translateX(-50%);width:620px;height:340px;background:radial-gradient(ellipse,rgba(0,84,252,.4) 0%,rgba(0,84,252,0) 70%);pointer-events:none}
.cta-block>*{position:relative;z-index:1}
.cta-block h2{max-width:19ch;margin:0 auto}
.cta-block p{max-width:52ch;margin:var(--sp-md) auto 0;color:var(--text-dark-secondary)}
.cta-actions{display:flex;gap:var(--sp-md);justify-content:center;margin-top:var(--sp-xl);flex-wrap:wrap}
/* Same reason as .rb-fine: .85 opacity read 4.32:1 over the CTA glow. */
.cta-fine{margin-top:var(--sp-lg);font-size:13px;color:var(--text-dark-secondary)}

/* ---------- Section head ---------- */
.section-head{max-width:660px;margin-bottom:var(--sp-3xl)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .overline{margin-bottom:var(--sp-md)}
.section-head p{margin-top:var(--sp-md)}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-lg);flex-wrap:wrap;margin-bottom:var(--sp-3xl)}
.head-row .section-head{margin-bottom:0}

/* ---------- Icon box ---------- */
.icon-box{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--blue-mist);display:flex;align-items:center;justify-content:center;color:var(--blue);flex:none}
.icon-box.on-dark{background:rgba(255,255,255,.08);color:var(--blue-400)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--text-dark-secondary);padding:var(--sp-4xl) 0 var(--sp-lg)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-2xl);padding-bottom:var(--sp-3xl)}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer-brand img{height:68px;width:auto;margin-bottom:var(--sp-lg)}
.footer-brand p{max-width:34ch;color:var(--text-dark-secondary);font-size:15px}
.footer-col h6{color:#fff;margin-bottom:var(--sp-md);font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.footer-col li{margin-bottom:10px}
.footer-col a{display:inline-block;line-height:1.7;color:var(--text-dark-secondary);font-size:14.5px;transition:color var(--motion-fast) var(--ease)}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid rgba(255,255,255,.12);padding-top:var(--sp-lg);font-size:13px;color:var(--text-dark-secondary)}
.footer-legal{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The tagline used to sit inside the Legal nav landmark. It is not a
   destination, so it moved out; this keeps the row rendering identically. */
.footer-legal-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer-legal a{color:var(--text-dark-secondary);text-decoration:underline;text-underline-offset:3px}
.footer-legal a:hover{color:var(--text-dark-primary)}
/* WCAG 2.2.2 Pause, Stop, Hide: the service illustrations loop indefinitely
   next to body copy, so stopping them cannot depend on an OS-level setting.
   Styled as a sibling of the legal links so the footer row is unchanged. */
.motion-control{display:inline-flex;align-items:center;gap:10px}
.motion-toggle{font:inherit;color:var(--text-dark-secondary);background:none;border:0;padding:2px 0;min-height:24px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.motion-toggle:hover{color:var(--text-dark-primary)}
@media(max-width:640px){.footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}}

/* ---------- WHY VEROWEB — differentiators + honest comparison ---------- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-lg)}
@media(max-width:860px){.why-grid{grid-template-columns:1fr}}
.why-card{background:#fff;border:1px solid var(--line-200);border-radius:var(--radius-lg);padding:var(--sp-xl);display:flex;gap:var(--sp-lg);align-items:flex-start;transition:border-color var(--motion-fast) var(--ease),transform var(--motion-fast) var(--ease)}
.why-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.why-card h4,.why-card .h4{margin-bottom:8px;font-size:1.25rem}
.why-card p{color:var(--slate);font-size:15.5px;line-height:1.6}
.why-num{font-size:13px;font-weight:700;color:var(--blue-600);letter-spacing:.06em;flex:none;padding-top:5px;width:26px}

.compare-wrap{margin-top:var(--sp-2xl);border:1px solid var(--line-200);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare{min-width:660px;font-size:14.5px}
.compare th,.compare td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-200);vertical-align:top}
.compare thead th{background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:none}
.compare thead th.is-us{background:var(--blue-600)}
.compare tbody tr:last-child td{border-bottom:none}
.compare tbody tr:nth-child(even){background:var(--cloud)}
.compare td:first-child{font-weight:600;color:var(--ink);width:28%}
.compare td.is-us{background:var(--blue-mist);font-weight:600;color:var(--ink)}
.compare tbody tr:nth-child(even) td.is-us{background:#E9F0FF}
.compare td:not(:first-child):not(.is-us){color:var(--slate)}
.compare-note{padding:14px 18px;background:var(--cloud);font-size:13px;color:var(--gray-500);border-top:1px solid var(--line-200)}

/* ---------- WHY TRUST US — structural guarantees ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)}
@media(max-width:960px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.trust-grid{grid-template-columns:1fr}}
.trust-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);padding:var(--sp-xl);transition:border-color var(--motion-fast) var(--ease),background var(--motion-fast) var(--ease)}
.trust-card:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07)}
.trust-card h4,.trust-card .h4{font-size:1.15rem;color:var(--text-dark-primary);margin:var(--sp-md) 0 8px}
.trust-card p{color:var(--text-dark-secondary);font-size:14.5px;line-height:1.6}
.trust-icon{width:42px;height:42px;border-radius:var(--radius-sm);background:rgba(79,131,255,.14);display:flex;align-items:center;justify-content:center;color:var(--blue-400)}
.trust-honest{margin-top:var(--sp-2xl);border:1px dashed rgba(255,255,255,.25);border-radius:var(--radius-md);padding:var(--sp-xl);display:flex;gap:var(--sp-lg);align-items:flex-start}
.trust-honest svg{color:var(--blue-400);flex:none;margin-top:2px}
.trust-honest p{color:var(--text-dark-secondary);font-size:15px;line-height:1.65;max-width:74ch}
.trust-honest strong{color:var(--text-dark-primary)}

/* ---------- Next steps (final CTA) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg);margin:var(--sp-2xl) auto 0;max-width:900px;text-align:left}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{display:flex;gap:14px;align-items:flex-start}
.step-n{width:30px;height:30px;border-radius:50%;background:var(--blue-400);color:var(--ink);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.step h4,.step .h4{font-size:1rem;color:var(--text-dark-primary);margin-bottom:4px}
.step p{font-size:14px;color:var(--text-dark-secondary);line-height:1.55;margin:0 !important}

/* ---------- SUB-PAGE COMPONENTS ---------- */
.page-hero{position:relative;padding:var(--sp-3xl) 0 var(--sp-2xl);background:var(--cloud);border-bottom:1px solid var(--line-200);overflow:hidden}
.page-hero::before{content:"";position:absolute;top:-260px;right:-180px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(0,84,252,.09) 0%,rgba(0,84,252,0) 68%);pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{max-width:19ch;margin-top:14px}
.page-hero .lead{margin-top:var(--sp-lg);max-width:60ch}
.page-hero .hero-actions{display:flex;gap:var(--sp-md);flex-wrap:wrap;margin-top:var(--sp-xl)}
.page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-4xl);align-items:center}
@media(max-width:980px){.page-hero-grid{grid-template-columns:1fr;gap:var(--sp-2xl)}}

/* The page-hero radial glow lifts the backdrop enough that Gray 500 lands at
   ~4.0:1 on 13px text. Slate 700 holds 6.99:1 in the same spot. */
.breadcrumb{font-size:13px;color:var(--text-light-secondary)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.breadcrumb a{color:var(--text-light-secondary)}
.breadcrumb a:hover{color:var(--blue-600)}
.breadcrumb li::after{content:"/";margin-left:7px;color:var(--gray-500)}
.breadcrumb li:last-child::after{content:none}
.breadcrumb [aria-current]{color:var(--ink);font-weight:600}

.prose{max-width:70ch}
.prose p+p{margin-top:var(--sp-md)}
.prose h3{margin-top:var(--sp-xl);margin-bottom:var(--sp-sm)}

.checklist{display:grid;gap:12px}
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.55}
.checklist svg{color:var(--blue-600);flex:none;margin-top:3px}
.bg-ink .checklist svg{color:var(--blue-400)}
.bg-ink .checklist li{color:var(--text-dark-secondary)}

.callout{border-left:3px solid var(--blue-600);background:var(--blue-mist);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--sp-lg) var(--sp-xl);margin-top:var(--sp-xl)}
.callout p{color:var(--slate);font-size:15.5px;line-height:1.65}
.callout strong{color:var(--ink)}

.deliverables{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-lg)}
@media(max-width:760px){.deliverables{grid-template-columns:1fr}}
.deliverable{border:1px solid var(--line-200);border-radius:var(--radius-md);padding:var(--sp-lg) var(--sp-xl);background:#fff}
.deliverable h4,.deliverable .h4{font-size:1.05rem;margin-bottom:6px}
.deliverable p{font-size:14.5px;color:var(--slate);line-height:1.55}


.faq-group{max-width:820px;margin:0 auto var(--sp-3xl)}
.faq-group>h3{margin-bottom:var(--sp-sm);padding-bottom:var(--sp-sm);border-bottom:2px solid var(--ink);font-size:1.3rem}

/* ---------- FORMS ---------- */
.form-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-4xl);align-items:start}
@media(max-width:940px){.form-wrap{grid-template-columns:1fr;gap:var(--sp-2xl)}}
.form{display:grid;gap:var(--sp-lg)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-lg)}
@media(max-width:620px){.form-row{grid-template-columns:1fr}}
.field{display:grid;gap:7px}
.field label{font-size:14px;font-weight:500;color:var(--ink)}
.field .req{color:var(--error)}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:13px 15px;border:1px solid var(--line-strong);
  border-radius:12px;background:#fff;color:var(--ink);
  transition:border-color var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.55}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--text-light-secondary)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(0,84,252,.16)}
/* The soft halo above reads as a hover-ish state. Keyboard focus gets the same
   crisp 2px ring every other control on the site uses. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--blue-600);outline-offset:2px;box-shadow:none
}
.field ::placeholder{color:var(--gray-500);opacity:1}
.field .hint{font-size:12.5px;color:var(--gray-500)}
/* Validation messaging. Errors are announced through the form's live region and
   tied to the field with aria-describedby; this is only their appearance. */
.field .field-error{display:none;font-size:12.5px;font-weight:600;color:var(--error);align-items:center;gap:6px}
.field.has-error .field-error{display:flex}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--error)}
.field.has-error input:focus,.field.has-error select:focus,.field.has-error textarea:focus{border-color:var(--error);box-shadow:0 0 0 3px rgba(200,59,75,.18)}
/* Pulls the note up against the first row; .form's 24px grid gap is meant for
   separating fields, not for an instruction line. */
.form-required-note{font-size:13px;color:var(--text-light-secondary);margin-bottom:calc(var(--sp-xs) - var(--sp-lg))}
/* Deliberately not display:none when empty. Some screen readers skip a live
   region that was undisplayed at the moment its text arrived; an empty <p>
   with no margin already occupies no space. */
.form-status{margin:0 0 var(--sp-sm);font-size:14.5px;font-weight:600;color:var(--error)}
.form-aside{background:var(--cloud);border:1px solid var(--line-200);border-radius:var(--radius-lg);padding:var(--sp-xl)}
.form-aside h3{font-size:1.2rem;margin-bottom:var(--sp-lg)}
.form-aside ol{display:grid;gap:var(--sp-lg)}
.form-aside ol li{display:flex;gap:13px;align-items:flex-start}
.form-aside ol li>span{width:26px;height:26px;border-radius:50%;background:var(--blue-600);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.form-aside li strong{display:block;font-size:15px;margin-bottom:2px}
.form-aside li p{font-size:14px;color:var(--slate);line-height:1.5}
.form-direct{margin-top:var(--sp-xl);padding-top:var(--sp-lg);border-top:1px solid var(--line-200);font-size:14.5px;color:var(--slate)}
.form-direct a{color:var(--blue-600);font-weight:600}

/* ---------- STICKY CTA ----------
   Makes conversion independent of scroll depth. Appears once the hero has
   scrolled away, hides again when the final CTA or footer is on screen so the
   visitor never sees two competing versions of the same action. */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  background:var(--ink);border-top:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-dark);
  transform:translateY(100%);visibility:hidden;
  transition:transform var(--motion-med) var(--ease),visibility 0s linear var(--motion-med);
}
.sticky-cta.is-visible{transform:none;visibility:visible;transition:transform var(--motion-med) var(--ease),visibility 0s}
.sticky-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-lg);padding-top:12px;padding-bottom:12px}
.sticky-cta-copy{font-size:14.5px;color:var(--text-dark-secondary);line-height:1.4}
.sticky-cta-copy strong{color:var(--text-dark-primary);font-weight:600}
.sticky-cta-actions{display:flex;align-items:center;gap:8px;flex:none}
/* dark surface -> Blue 400 fill + Ink text (v1.3 p.90) */
.sticky-cta .btn-primary{background:var(--blue-400);color:var(--ink)}
.sticky-cta .btn-primary:hover{background:#6E99FF}
.sticky-cta-close{
  background:none;border:none;color:var(--text-dark-secondary);
  width:40px;height:40px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease);
}
.sticky-cta-close:hover{background:rgba(255,255,255,.09);color:var(--text-dark-primary)}
@media(max-width:680px){
  .sticky-cta-copy{display:none}
  .sticky-cta-inner{gap:8px}
  .sticky-cta-actions{flex:1}
  .sticky-cta .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .sticky-cta{transition:none}
  .sticky-cta.is-visible{transition:none}
}

/* ---------- LEGAL / POLICY PAGES ---------- */
.policy-updated{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-lg);font-size:14px;font-weight:600;color:var(--slate);background:#fff;border:1px solid var(--line-200);border-radius:var(--radius-pill);padding:8px 16px}
.policy-updated svg{color:var(--blue-600)}
.policy-wrap{display:grid;grid-template-columns:260px 1fr;gap:var(--sp-4xl);align-items:start}
@media(max-width:940px){.policy-wrap{grid-template-columns:1fr;gap:var(--sp-2xl)}}
.policy-toc{position:sticky;top:110px;background:var(--cloud);border:1px solid var(--line-200);border-radius:var(--radius-md);padding:var(--sp-lg)}
@media(max-width:940px){.policy-toc{position:static}}
.policy-toc h2{margin-bottom:var(--sp-md);letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:var(--gray-500)}
.policy-toc ol{display:grid;gap:9px;list-style:none;margin:0;padding:0;counter-reset:none}
.policy-toc a{font-size:13.5px;line-height:1.4;color:var(--slate)}
.policy-toc a:hover{color:var(--blue-600)}
.policy-body{max-width:74ch}
.policy-section{padding:0 0 var(--sp-2xl)}
.policy-section+.policy-section{border-top:1px solid var(--line-200);padding-top:var(--sp-2xl)}
.policy-section h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(1.4rem,2.2vw,1.8rem);margin-bottom:var(--sp-md);scroll-margin-top:100px}
.policy-num{flex:none;font-size:13px;font-weight:700;color:var(--blue-600);letter-spacing:.04em}
.policy-section h3{font-size:1.1rem;margin:var(--sp-lg) 0 var(--sp-xs)}
.policy-section p{color:var(--slate);line-height:1.7;font-size:16px}
.policy-section p+p{margin-top:var(--sp-md)}
.policy-section a{color:var(--blue-600);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.policy-list{margin:var(--sp-md) 0 0;display:grid;gap:9px}
.policy-list li{position:relative;padding-left:22px;color:var(--slate);line-height:1.65;font-size:15.5px}
.policy-list li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--blue-600)}

/* reCAPTCHA disclosure — Google requires this wording wherever the badge is hidden */
.recaptcha-notice{font-size:12.5px;line-height:1.55;color:var(--gray-500);margin-top:var(--sp-sm)}
.recaptcha-notice a{color:var(--slate);text-decoration:underline;text-underline-offset:2px}
.recaptcha-notice a:hover{color:var(--blue-600)}
.recaptcha-box{margin-top:var(--sp-xs)}

/* ---------- FOUNDER BIO ---------- */
.bio{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-4xl);align-items:start}
@media(max-width:900px){.bio{grid-template-columns:1fr;gap:var(--sp-2xl)}}
.bio-portrait{position:sticky;top:120px}
@media(max-width:900px){.bio-portrait{position:static;max-width:400px}}
.bio-portrait figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--cloud);box-shadow:var(--shadow-md)}
.bio-portrait img{display:block;width:100%;height:auto}
.bio-id{margin-top:var(--sp-lg)}
.bio-id h3{margin-bottom:4px}
.bio-id>p{color:var(--gray-500);font-weight:600;font-size:15px}
.bio-id .checklist{margin-top:var(--sp-lg);gap:10px}
.bio-id .checklist li{font-size:14.5px}
.bio-copy .prose{max-width:64ch}
.bio-copy .prose+.pullquote,.bio-copy .pullquote+.prose{margin-top:var(--sp-xl)}

.pullquote{
  margin:var(--sp-xl) 0 0;padding:var(--sp-xl) var(--sp-2xl);
  background:var(--ink);border-radius:var(--radius-lg);position:relative;overflow:hidden;
}
.pullquote::before{
  content:"";position:absolute;top:-90px;right:-60px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(79,131,255,.28) 0%,rgba(79,131,255,0) 70%);pointer-events:none;
}
.pullquote blockquote{margin:0}
.pullquote blockquote p{
  position:relative;z-index:1;margin:0;color:var(--text-dark-primary);
  font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.35;font-weight:650;letter-spacing:-.02em;
}
.pullquote blockquote p::before{content:"\201C";color:var(--blue-400);margin-right:2px}
.pullquote blockquote p::after{content:"\201D";color:var(--blue-400)}
/* Framed as borrowed wisdom, not authored by Keith. */
.pullquote figcaption{
  position:relative;z-index:1;margin-top:var(--sp-md);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dark-secondary);
}
@media(max-width:560px){.pullquote{padding:var(--sp-lg)}}

/* ---------- BROWSER FRAME (client work) ----------
   Vero Ink chrome on the brand radius scale, so a client's screenshot reads as
   a VeroWeb deliverable rather than a floating image. */
.browser{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--ink);
  border:1px solid var(--ink);box-shadow:var(--shadow-lg);
  transition:transform var(--motion-med) var(--ease),box-shadow var(--motion-med) var(--ease);
}
a.browser,.browser a{display:block}
.browser-bar{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.09);
}
.browser-dots{display:flex;gap:6px;flex:none}
.browser-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.20);display:block}
.browser-dots i:first-child{background:rgba(255,255,255,.32)}
.browser-url{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.07);border-radius:var(--radius-pill);
  padding:5px 13px;font-size:12px;color:var(--text-dark-secondary);
  font-weight:500;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.browser-url svg{flex:none;color:var(--blue-400);opacity:.85}
.browser-tag{
  flex:none;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);background:var(--blue-400);border-radius:var(--radius-pill);padding:4px 10px;
}
.browser-shot{display:block;width:100%;height:auto;background:var(--cloud)}
@media(max-width:560px){
  .browser-bar{padding:9px 11px;gap:8px}
  .browser-tag{display:none}
  .browser-url{font-size:11px;padding:4px 10px}
}
@media(prefers-reduced-motion:reduce){
}

/* Work cards: image leads, copy follows */
.work-card{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-3xl);align-items:center;padding:var(--sp-3xl) 0;border-bottom:1px solid var(--line-200)}
.work-card:last-of-type{border-bottom:none}
.work-card:nth-of-type(even) .work-visual{order:-1}
@media(max-width:940px){
  .work-card{grid-template-columns:1fr;gap:var(--sp-xl);padding:var(--sp-2xl) 0}
  .work-card:nth-of-type(even) .work-visual{order:0}
}
.work-card h2 a:hover,.work-card h3 a:hover{color:var(--blue-600)}
.work-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--sp-lg)}
.work-meta span{font-size:12.5px;font-weight:600;color:var(--ink);background:var(--blue-mist);border-radius:var(--radius-pill);padding:5px 12px}

/* ---------- RESPONSIVE CORRECTIONS ---------- */

/* The hero diagram scales with its container, so text set in viewBox units
   becomes illegible on phones (13.5px renders at ~8px on a 375px screen).
   Drop the supporting labels and enlarge the rest to compensate. */
@media(max-width:760px){
  .sd-sub{display:none}
  .sd-name{font-size:23px}
  .sd-tag{font-size:19px}
  .sd-node .sd-name{dominant-baseline:middle}
}
@media(max-width:760px){
  .sd-node-in .sd-card{height:64px}
}

/* Large decorative padding costs too much of a 320px viewport. */
/* Hero rhythm on phones: the 78px sticky header already eats the top of the
   viewport, so the hero does not need desktop-scale padding on top of it. */
@media(max-width:640px){
  .hero{padding:var(--sp-xl) 0 var(--sp-2xl)}
  .price-flag{border-radius:var(--radius-md);padding:10px 14px;font-size:13.5px;margin-bottom:var(--sp-md)}
  .hero .lead{margin-top:var(--sp-md)}
  .hero-actions{margin-top:var(--sp-lg);gap:10px}
  .hero-actions .btn{width:100%}
  .hero-meta{flex-direction:column;align-items:flex-start;gap:10px;margin-top:var(--sp-xl)}
  .hero-visual{padding:16px;margin-top:var(--sp-xl)}
}

@media(max-width:560px){
  .cta-block{padding:var(--sp-3xl) var(--sp-lg)}
  .risk-band{padding:var(--sp-xl) var(--sp-lg)}
  .plan{padding:var(--sp-lg)}
  .form-aside{padding:var(--sp-lg)}
  .trust-honest{padding:var(--sp-lg)}
  .seo-clarifier{padding:var(--sp-lg)}
  .pricing-foot{padding:var(--sp-lg)}
  .deliverable{padding:var(--sp-lg)}
}

/* WCAG 2.2 target size, and the industry 44px norm. */
.sticky-cta-close{width:44px;height:44px}

/* Long unbroken strings (emails, URLs) must not force a horizontal scrollbar. */
.footer-col a,.form-direct a,.prose a,.faq-a p a{overflow-wrap:break-word}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{overflow-wrap:break-word}

/* ---------- Utilities ---------- */
.text-center{text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- PRINT ----------
   People print pricing pages and policies. Strip the chrome, drop the ink,
   and surface link targets so a printed page is still usable. */
@media print{
  .site-header,.sticky-cta,.site-footer,.nav-links,.hero-visual,.svc-visual,
  .browser,.cta-block,.policy-toc,.bio-portrait{display:none !important}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.45}
  .container{max-width:none;padding:0}
  section{padding:12pt 0;break-inside:avoid}
  h1,h2,h3{break-after:avoid;color:#000}
  .bg-ink,.bg-cloud,.bg-mist,.card,.plan,.addon,.deliverable{background:#fff !important;color:#000 !important;border:1px solid #999}
  .bg-ink *,.trust-card *{color:#000 !important}
  a{color:#000;text-decoration:underline}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .faq-a{max-height:none !important}
  .policy-wrap,.bio,.split,.form-wrap{display:block}
  .reveal{opacity:1 !important;transform:none !important}
}

/* --- Homepage proof strip: category confirmation directly under the hero --- */
.proof-strip{padding-top:var(--sp-2xl)}
@media(max-width:640px){.proof-strip{padding-top:var(--sp-xl)}}
.proof-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px}
.proof-cap h3{font-size:17px;font-weight:600;letter-spacing:-.012em;color:var(--ink);margin:0}

/* --- Phone CTA ("Let's Talk" -> tel:) ---
   Labelled on wide viewports. Once the bar runs out of room it collapses to
   a square icon-only button, including on mobile where it is the one CTA that
   stays in the top bar. The label is only ever hidden visually, never removed,
   so the accessible name stays "Let's Talk" at every width. */
.nav-phone-icon{display:none}
@media(max-width:1100px){
  .nav-cta .btn.nav-phone-cta{display:inline-flex;width:44px;padding:0;flex:none}
  .nav-phone-icon{display:block}
  .nav-phone-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/* ---------- Reduced motion, chosen in the page ----------
   Mirrors the three prefers-reduced-motion blocks above for visitors who
   toggle motion off in the footer instead of in their OS. Kept last in the
   file so it wins over the animation declarations at equal importance. */
html.reduce-motion *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
html.reduce-motion .reveal{opacity:1 !important;transform:none !important}
html.reduce-motion .sd-aura,html.reduce-motion .sd-node,html.reduce-motion .sd-node-in,
html.reduce-motion .sd-core,html.reduce-motion .sd-v2,html.reduce-motion .sd-tag{
  animation:none !important;opacity:1 !important;transform:none !important
}
html.reduce-motion .sd-track,html.reduce-motion .sd-v{animation:none !important;stroke-dashoffset:0 !important}
html.reduce-motion .sd-comet,html.reduce-motion .sd-halo{display:none}
html.reduce-motion .svc-row.is-in .wd-el,html.reduce-motion .svc-row.is-in .wd-cursor,
html.reduce-motion .svc-row.is-in .wd-ripple,html.reduce-motion .svc-row.is-in .br-v,
html.reduce-motion .svc-row.is-in .br-slash,html.reduce-motion .svc-row.is-in .br-el,
html.reduce-motion .svc-row.is-in .seo-type,html.reduce-motion .svc-row.is-in .seo-caret,
html.reduce-motion .svc-row.is-in .seo-row,html.reduce-motion .svc-row.is-in .seo-you,
html.reduce-motion .svc-row.is-in .seo-you-bg,html.reduce-motion .svc-row.is-in .seo-cite,
html.reduce-motion .svc-row.is-in .au-dot,html.reduce-motion .svc-row.is-in .au-glow,
html.reduce-motion .svc-row.is-in .au-hold,html.reduce-motion .svc-row.is-in .au-line{
  animation:none !important;opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important
}
html.reduce-motion .wd-cursor,html.reduce-motion .wd-ripple,
html.reduce-motion .au-dot,html.reduce-motion .au-hold{display:none}