/* ==========================================================================
   Marquette Digital Group — Design System
   Single source of truth for every page, static and WordPress.
   Replaces: index.html inline <style>, pricing.html inline <style>,
             service.css, theme home.css, theme service.css.
   --------------------------------------------------------------------------
   Architecture note: surfaces (.s-ink / .s-paper / ...) redefine a small set
   of context variables. Components read those variables and never need
   per-surface overrides. Adding a new surface does not require touching
   any component.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* --- ink (dark) surfaces --- */
  --ink-900:#080B12;
  --ink-850:#0B0F18;
  --ink-800:#0E131D;
  --ink-700:#151B28;
  --ink-600:#1D2534;
  --ink-500:#283143;

  /* --- paper (light) surfaces --- */
  --paper:#FFFFFF;
  --paper-2:#F6F8FC;
  --paper-3:#EDF1F8;

  /* --- brand --- */
  --gold:#E8B54B;          /* primary accent, buttons + dark-context text */
  --gold-hi:#FFD37A;       /* hover / highlight */
  --gold-deep:#C9922F;
  --gold-ink:#785311;      /* accessible gold-family text on light surfaces */
  --gold-wash:rgba(232,181,75,.12);

  --steel:#24406F;         /* secondary brand blue */
  --steel-2:#5C7AB0;
  --steel-3:#A9BEDF;
  --steel-wash:rgba(36,64,111,.08);

  /* --- semantic --- */
  --ok:#3E9C6B;
  --warn:#C98A2E;

  /* --- type --- */
  --font-display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --fs-display:clamp(2.75rem,5.6vw,4.25rem);
  --fs-h1:clamp(2.35rem,4.6vw,3.5rem);
  --fs-h2:clamp(1.95rem,3.4vw,2.75rem);
  --fs-h3:clamp(1.15rem,1.6vw,1.35rem);
  --fs-lede:clamp(1.05rem,1.5vw,1.2rem);
  --fs-body:1rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fs-eyebrow:.75rem;

  /* --- space (4px base) --- */
  --sp-1:.25rem;  --sp-2:.5rem;   --sp-3:.75rem;  --sp-4:1rem;
  --sp-5:1.5rem;  --sp-6:2rem;    --sp-7:2.5rem;  --sp-8:3rem;
  --sp-9:4rem;    --sp-10:5rem;   --sp-11:6rem;   --sp-12:8rem;

  --sec-y:clamp(4.25rem,7.5vw,7rem);   /* vertical rhythm for every section */
  --gutter:clamp(1.25rem,4vw,2rem);
  --maxw:1160px;
  --maxw-narrow:760px;

  /* --- radius --- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* --- motion --- */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.42s;

  /* --- chrome --- */
  --bar-h:0px;             /* announcement bar height, set by .has-announce */
  --nav-h:72px;
}
:root:has(.announce){--bar-h:40px}
@media(max-width:640px){:root{--nav-h:64px} :root:has(.announce){--bar-h:34px}}

/* --------------------------------------------------------- 2. SURFACES */
/* Each surface defines the contract that every component reads. */
.s-ink,.s-ink-2,.s-paper,.s-paper-2,.s-paper-3{
  background:var(--surface);
  color:var(--fg);
}
.s-ink{
  --surface:var(--ink-900);
  --fg:#F4F7FC; --fg-mid:#A7B1C4; --fg-lo:#828DA0;
  --rule:rgba(148,163,196,.16);
  --rule-strong:rgba(148,163,196,.30);
  --card:var(--ink-800);
  --card-bd:rgba(148,163,196,.16);
  --card-bd-hi:rgba(232,181,75,.42);
  --card-sh:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 44px -12px rgba(0,0,0,.6);
  --accent-fg:var(--gold);
  --chip:rgba(148,163,196,.10);
}
.s-ink-2{
  --surface:var(--ink-850);
  --fg:#F4F7FC; --fg-mid:#A7B1C4; --fg-lo:#828DA0;
  --rule:rgba(148,163,196,.16);
  --rule-strong:rgba(148,163,196,.30);
  --card:var(--ink-700);
  --card-bd:rgba(148,163,196,.18);
  --card-bd-hi:rgba(232,181,75,.42);
  --card-sh:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 44px -12px rgba(0,0,0,.6);
  --accent-fg:var(--gold);
  --chip:rgba(148,163,196,.10);
}
.s-paper{
  --surface:var(--paper);
  --fg:#0A1120; --fg-mid:#4A5670; --fg-lo:#616A7B;
  --rule:rgba(16,28,54,.10);
  --rule-strong:rgba(16,28,54,.20);
  --card:#FFFFFF;
  --card-bd:rgba(16,28,54,.10);
  --card-bd-hi:rgba(36,64,111,.34);
  --card-sh:0 1px 2px rgba(16,24,40,.04), 0 14px 32px -10px rgba(16,24,40,.12);
  --accent-fg:var(--gold-ink);
  --chip:rgba(36,64,111,.06);
}
.s-paper-2{
  --surface:var(--paper-2);
  --fg:#0A1120; --fg-mid:#4A5670; --fg-lo:#616A7B;
  --rule:rgba(16,28,54,.10);
  --rule-strong:rgba(16,28,54,.20);
  --card:#FFFFFF;
  --card-bd:rgba(16,28,54,.09);
  --card-bd-hi:rgba(36,64,111,.34);
  --card-sh:0 1px 2px rgba(16,24,40,.04), 0 14px 32px -10px rgba(16,24,40,.10);
  --accent-fg:var(--gold-ink);
  --chip:rgba(36,64,111,.06);
}
.s-paper-3{
  --surface:var(--paper-3);
  --fg:#0A1120; --fg-mid:#4A5670; --fg-lo:#616A7B;
  --rule:rgba(16,28,54,.12);
  --rule-strong:rgba(16,28,54,.22);
  --card:#FFFFFF;
  --card-bd:rgba(16,28,54,.10);
  --card-bd-hi:rgba(36,64,111,.34);
  --card-sh:0 1px 2px rgba(16,24,40,.04), 0 14px 32px -10px rgba(16,24,40,.10);
  --accent-fg:var(--gold-ink);
  --chip:rgba(36,64,111,.06);
}

/* ------------------------------------------------------ 3. RESET & BASE */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--bar-h) + 16px);
  /* Horizontal clipping belongs on <html>, never on <body>. Setting
     overflow-x on body makes body its own scroll container, which silently
     breaks every IntersectionObserver using the viewport as root — i.e. the
     scroll-reveal below would leave the whole page at opacity:0. */
  overflow-x:hidden;
}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  background:var(--ink-900);
  color:#F4F7FC;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
::selection{background:rgba(232,181,75,.28)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--gold);color:#0A1120;padding:.75rem 1.25rem;
  font-weight:700;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

/* ------------------------------------------------------- 4. TYPOGRAPHY */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.022em;
  text-wrap:balance;
  color:var(--fg,inherit);
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.012em}
h4{font-size:1.0625rem;line-height:1.3}
p{color:var(--fg-mid,inherit)}
.display{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.028em}
.lede{
  font-size:var(--fs-lede);line-height:1.6;color:var(--fg-mid);
  max-width:60ch;text-wrap:pretty;
}
/* Use when the semantically correct heading level differs from the visual
   size the design calls for, e.g. a card heading that must be an h2 for the
   outline but should still read as an h3. */
.as-h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.012em}
.t-sm{font-size:var(--fs-sm)}
.t-xs{font-size:var(--fs-xs)}
.t-mid{color:var(--fg-mid)}
.t-lo{color:var(--fg-lo)}
.t-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* gold emphasis inside headings */
.hl{color:var(--gold)}
.s-paper .hl,.s-paper-2 .hl,.s-paper-3 .hl{color:var(--steel)}

/* eyebrow label */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-fg);
  margin-bottom:var(--sp-4);
}
.eyebrow::before{
  content:"";width:18px;height:1px;background:currentColor;opacity:.6;flex:none;
}
.eyebrow.no-rule::before{display:none}

/* -------------------------------------------------------- 5. LAYOUT */
.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.wrap-narrow{max-width:var(--maxw-narrow)}
section{padding-block:var(--sec-y)}
section.tight{padding-block:clamp(2.5rem,4.5vw,3.75rem)}
section.flush-top{padding-top:0}
section.flush-bottom{padding-bottom:0}

.sec-head{max-width:720px;margin-bottom:var(--sp-8)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head .lede{margin-top:var(--sp-4)}
.sec-head.center .lede{margin-inline:auto}

.grid{display:grid;gap:var(--sp-5)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:960px){
  .g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}
}

/* two-column feature row (copy + media), alternating */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.split + .split{margin-top:clamp(3.5rem,7vw,6rem)}
.split.reverse .split-media{order:-1}
@media(max-width:900px){
  .split{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .split.reverse .split-media{order:0}
}

/* --------------------------------------------------------- 6. BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-display);font-weight:700;font-size:.9375rem;
  letter-spacing:-.005em;line-height:1;
  padding:.95rem 1.5rem;border-radius:var(--r-sm);
  border:1px solid transparent;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform .18s var(--ease),box-shadow var(--dur) var(--ease);
}
.btn svg{width:17px;height:17px;flex:none;stroke-width:2.25;transition:transform .28s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:var(--gold);color:#0A1120;border-color:var(--gold);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -8px rgba(232,181,75,.55);
}
.btn-primary:hover{background:var(--gold-hi);border-color:var(--gold-hi);box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 14px 30px -8px rgba(232,181,75,.65)}
.btn-primary:hover svg{transform:translateX(3px)}

.btn-secondary{
  background:transparent;color:var(--fg);border-color:var(--rule-strong);
}
.btn-secondary:hover{border-color:var(--fg);background:var(--chip)}

.btn-solid{ /* high-contrast alt on dark: white button */
  background:#fff;color:#0A1120;border-color:#fff;
}
.btn-solid:hover{background:#EDF1F8;border-color:#EDF1F8}

.btn-lg{padding:1.125rem 1.9rem;font-size:1rem}
.btn-sm{padding:.7rem 1.1rem;font-size:.875rem}
.btn-block{width:100%}

/* text link with arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-weight:700;font-size:.9375rem;
  color:var(--accent-fg);
}
.link-arrow svg{width:16px;height:16px;stroke-width:2.25;transition:transform .28s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

.cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.cta-row.center{justify-content:center}
.cta-note{
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-lo);
}
@media(max-width:520px){
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
  .cta-row.center{align-items:center}
}

/* --------------------------------------------------- 7. ANNOUNCEMENT BAR */
.announce{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--bar-h);padding:.3rem 1rem;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 48%,var(--gold-hi));
  color:#0A1120;text-align:center;line-height:1.25;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.7rem,2.2vw,.82rem);letter-spacing:.04em;
}
.announce b{font-weight:800}
.announce svg{width:15px;height:15px;flex:none;stroke-width:2.4;transition:transform .28s var(--ease)}
.announce:hover svg{transform:translateX(3px)}
.announce .short{display:none}
@media(max-width:640px){
  .announce .long{display:none}
  .announce .short{display:inline}
}

/* ---------------------------------------------------------- 8. HEADER */
.site-header{
  position:fixed;inset:var(--bar-h) 0 auto 0;z-index:50;
  height:var(--nav-h);
  background:rgba(8,11,18,.72);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid rgba(148,163,196,.12);
  transition:background .3s,border-color .3s;
}
.site-header.scrolled{background:rgba(8,11,18,.94);border-bottom-color:rgba(148,163,196,.2)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);height:100%}
.brand{display:flex;align-items:center;gap:.6rem;color:#F4F7FC;flex:none}
.brand svg{height:30px;width:auto}
.brand-name{
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  letter-spacing:-.024em;white-space:nowrap;
}
@media(max-width:400px){.brand-name{font-size:.94rem}}

.nav-links{display:flex;align-items:center;gap:.25rem}
.nav-links > li > a,.nav-links > li > button{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.55rem .7rem;border-radius:var(--r-sm);
  font-size:.9375rem;font-weight:500;color:#C3CBDA;
  transition:color .2s,background .2s;
}
.nav-links > li > a:hover,.nav-links > li > button:hover,
.nav-links > li > a[aria-current="page"]{color:#fff;background:rgba(148,163,196,.10)}
.nav-links svg.chev{width:14px;height:14px;stroke-width:2.4;transition:transform .25s var(--ease)}
.nav-item.open .chev{transform:rotate(180deg)}
.nav-actions{display:flex;align-items:center;gap:.75rem;flex:none}
.nav-phone{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.82rem;color:#C3CBDA;
  padding:.5rem .6rem;border-radius:var(--r-sm);
}
.nav-phone svg{width:15px;height:15px;stroke-width:2}
.nav-phone:hover{color:#fff}
@media(max-width:1080px){.nav-phone span{display:none}}
@media(max-width:900px){.nav-links,.nav-phone{display:none}}

/* mega dropdown */
.nav-item{position:relative}
.mega{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:min(680px,calc(100vw - 2rem));
  background:var(--ink-800);
  border:1px solid rgba(148,163,196,.18);
  border-radius:var(--r-lg);
  box-shadow:0 28px 70px -20px rgba(0,0,0,.85);
  padding:var(--sp-5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
/* Open state is driven entirely by JS (.open), not a bare :hover.
   The panel sits 10px below the button (see top: calc(100% + 10px) above);
   that gap belongs to no hoverable element, so a pure-CSS :hover trigger
   loses state and permanently kills pointer-events the instant the mouse
   crosses it. mdg.js opens on mouseenter and closes on mouseleave with a
   short grace delay instead, so crossing the gap does not close the menu. */
.nav-item.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-head{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.14em;
  text-transform:uppercase;color:#828DA0;margin-bottom:var(--sp-4);
}
.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem}
.mega-item{
  display:flex;gap:.8rem;padding:.7rem .8rem;border-radius:var(--r-md);
  transition:background .2s;
}
.mega-item:hover{background:rgba(148,163,196,.09)}
.mega-icon{
  flex:none;width:34px;height:34px;border-radius:8px;
  display:grid;place-items:center;
  background:rgba(232,181,75,.10);border:1px solid rgba(232,181,75,.22);
}
.mega-icon svg{width:17px;height:17px;stroke:var(--gold);stroke-width:1.9;fill:none}
.mega-title{display:block;font-weight:600;font-size:.9375rem;color:#F4F7FC;line-height:1.3}
.mega-desc{display:block;font-size:.8125rem;color:#98A2B4;line-height:1.45;margin-top:.15rem}
.mega-foot{
  margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:1px solid rgba(148,163,196,.14);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
}
.mega-foot p{font-size:.875rem;color:#98A2B4}

/* mobile menu */
.burger{
  display:none;width:42px;height:42px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;
  border:1px solid rgba(148,163,196,.22);color:#F4F7FC;
}
.burger svg{width:20px;height:20px;stroke-width:2}
@media(max-width:900px){.burger{display:inline-flex}}
.drawer-scrim{
  position:fixed;inset:0;z-index:70;background:rgba(4,6,11,.72);
  opacity:0;pointer-events:none;transition:opacity .3s;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:71;
  width:min(86vw,340px);background:var(--ink-850);
  border-left:1px solid rgba(148,163,196,.16);
  transform:translateX(101%);transition:transform .34s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-5);
  padding-right:max(var(--sp-5),env(safe-area-inset-right));
  padding-bottom:max(var(--sp-6),env(safe-area-inset-bottom));
}
.drawer.open{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-6)}
.drawer-close{width:42px;height:42px;border-radius:var(--r-sm);border:1px solid rgba(148,163,196,.22);display:grid;place-items:center;color:#F4F7FC}
.drawer-close svg{width:20px;height:20px;stroke-width:2}
.drawer a{display:block;padding:.7rem 0;color:#C3CBDA;font-size:1.02rem;font-weight:500}
.drawer a:hover{color:#fff}
.drawer-label{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.14em;
  text-transform:uppercase;color:#828DA0;margin:var(--sp-5) 0 .35rem;
}
.drawer-svc{font-size:.9375rem !important;color:#9AA4B6 !important;padding:.5rem 0 !important}
.drawer .btn{margin-top:var(--sp-5)}
.drawer-foot{margin-top:auto;padding-top:var(--sp-6);border-top:1px solid rgba(148,163,196,.14)}

/* body offset for fixed chrome */
/* Offsets the fixed announce bar + header. MUST stay scoped to <main>:
   WordPress puts a "page" class on <body> for every Page, so a bare .page
   selector matched the body too and applied this offset twice, leaving a
   ~112px dead gap under the header on every page of the live site. */
main.page{padding-top:calc(var(--nav-h) + var(--bar-h))}

/* scroll progress */
.progress{position:fixed;top:calc(var(--nav-h) + var(--bar-h));left:0;right:0;height:2px;z-index:49;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi))}

/* ------------------------------------------------------------ 9. HERO */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(2rem,4vw,3.5rem) clamp(3.5rem,7vw,6rem);
}
.hero::before{ /* soft brand glow, single subtle light source */
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(1100px,130%);aspect-ratio:1;
  left:50%;top:-42%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(36,64,111,.42) 0%,rgba(36,64,111,.14) 38%,transparent 66%);
}
.hero::after{ /* fine grid, adds engineered texture without noise */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(148,163,196,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,196,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 78%);
}
.hero > .wrap{position:relative;z-index:1}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4rem);
  /* Top-aligned, not centred. When one column is much taller than the other
     (the offer pages put a tall pricing card beside short copy) centring shoved
     the copy ~190px down the page, which read as a big empty gap under the
     header. Starting both columns at the top keeps every hero consistent. */
  align-items:start;
}
@media(max-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}
}
.hero h1{margin-bottom:var(--sp-5)}
.hero .lede{margin-bottom:var(--sp-6)}
.hero .cta-row{margin-bottom:var(--sp-5)}

/* trust pill above the headline */
.hero-pill{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.42rem .5rem .42rem .42rem;margin-bottom:var(--sp-5);
  border:1px solid rgba(148,163,196,.2);border-radius:var(--r-pill);
  background:rgba(148,163,196,.07);
  font-size:.8125rem;color:#C3CBDA;
}
.hero-pill b{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.22rem .55rem;border-radius:var(--r-pill);
  background:var(--gold);color:#0A1120;font-weight:800;font-size:.6875rem;
  letter-spacing:.06em;text-transform:uppercase;
}
.hero-pill svg{width:14px;height:14px;stroke-width:2.4}

/* verifiable-claims strip under the hero */
.hero-strip{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:var(--sp-6);
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);
}
@media(max-width:820px){.hero-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-4)}}
.hero-strip-item{display:flex;gap:.65rem;align-items:flex-start}
.hero-strip-item svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--gold);stroke-width:2;fill:none}
.hero-strip-item b{display:block;font-family:var(--font-display);font-size:.9375rem;font-weight:700;color:var(--fg)}
.hero-strip-item span{display:block;font-size:.8125rem;color:var(--fg-lo);line-height:1.45;margin-top:.15rem}

/* ---------------------------------------------------------- 10. CARDS */
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--card-bd);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  box-shadow:var(--card-sh);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.card-hover:hover{transform:translateY(-4px);border-color:var(--card-bd-hi)}
.card h3{margin-bottom:var(--sp-3)}
.card p{font-size:var(--fs-sm);line-height:1.65}
.card-icon{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  margin-bottom:var(--sp-5);
  background:var(--gold-wash);border:1px solid rgba(232,181,75,.26);
}
.card-icon svg{width:21px;height:21px;stroke:var(--gold);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s-paper .card-icon,.s-paper-2 .card-icon,.s-paper-3 .card-icon{
  background:var(--steel-wash);border-color:rgba(36,64,111,.18);
}
.s-paper .card-icon svg,.s-paper-2 .card-icon svg,.s-paper-3 .card-icon svg{stroke:var(--steel)}
.card-index{
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;
  color:var(--fg-lo);margin-bottom:var(--sp-3);display:block;
}
.card-foot{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--rule)}

/* linked card: whole card is clickable via a stretched anchor */
.card-link::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* checklist */
.checks{display:grid;gap:.7rem}
.checks li{position:relative;padding-left:1.9rem;font-size:var(--fs-sm);line-height:1.55;color:var(--fg-mid)}
.checks li::before{
  content:"";position:absolute;left:0;top:.15rem;width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--gold-wash);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B54B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:.72rem;background-repeat:no-repeat;background-position:center;
}
.s-paper .checks li::before,.s-paper-2 .checks li::before,.s-paper-3 .checks li::before{
  background-color:rgba(36,64,111,.09);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324406F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.checks li b{color:var(--fg);font-weight:600}

/* cross list (for "what you get today" vs "without us") */
.crosses li::before{
  background-color:rgba(148,163,196,.10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* ------------------------------------------------ 11. STATS & TRUST BARS */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
@media(max-width:760px){.stats{grid-template-columns:minmax(0,1fr)}}
.stat{
  padding:var(--sp-6);border:1px solid var(--card-bd);border-radius:var(--r-lg);
  background:var(--card);box-shadow:var(--card-sh);
}
.stat-fig{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.25rem,4.2vw,3rem);line-height:1;letter-spacing:-.03em;
  color:var(--fg);
}
.stat-fig sup{font-size:.45em;font-weight:700;top:-.7em;margin-left:.1em}
.stat-label{display:block;margin-top:var(--sp-3);font-size:var(--fs-sm);line-height:1.55;color:var(--fg-mid)}
.stat-src{
  display:block;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-lo);
}

/* horizontal fact strip */
.factbar{border-block:1px solid var(--rule)}
.factbar .wrap{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4) var(--sp-8);
  padding-block:var(--sp-5);
}
.fact{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-mid);
}
.fact svg{width:15px;height:15px;flex:none;stroke:var(--accent-fg);stroke-width:2.2;fill:none}

/* --------------------------------------------------------- 12. PROCESS */
.steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);
  counter-reset:step;
}
@media(max-width:860px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{
  position:relative;padding:var(--sp-6);
  background:var(--card);border:1px solid var(--card-bd);border-radius:var(--r-lg);
  box-shadow:var(--card-sh);
}
.step-num{
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--gold);color:#0A1120;
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  margin-bottom:var(--sp-5);
}
.step-time{
  display:inline-block;margin-bottom:var(--sp-3);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:var(--r-pill);
  background:var(--chip);color:var(--fg-mid);
}
.step h3{margin-bottom:var(--sp-3)}
.step p{font-size:var(--fs-sm)}
/* connector line on desktop */
@media(min-width:861px){
  .steps{position:relative}
  .steps::before{
    content:"";position:absolute;top:calc(var(--sp-6) + 22px);left:12%;right:12%;height:1px;
    background:linear-gradient(90deg,transparent,var(--rule-strong) 12%,var(--rule-strong) 88%,transparent);
    z-index:0;
  }
  .step{z-index:1}
}

/* ------------------------------------------------- 13. PRODUCT MOCKUPS */
/* Browser frame — used to present real UI without stock photography. */
.frame{
  border-radius:var(--r-xl);overflow:hidden;
  background:var(--ink-800);
  border:1px solid rgba(148,163,196,.2);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 40px 80px -30px rgba(0,0,0,.85);
}
.s-paper .frame,.s-paper-2 .frame,.s-paper-3 .frame{
  border-color:rgba(16,28,54,.12);
  box-shadow:0 2px 4px rgba(16,24,40,.05),0 32px 64px -24px rgba(16,24,40,.28);
}
.frame-bar{
  display:flex;align-items:center;gap:.45rem;padding:.7rem .9rem;
  background:var(--ink-700);border-bottom:1px solid rgba(148,163,196,.14);
}
.s-paper .frame-bar,.s-paper-2 .frame-bar,.s-paper-3 .frame-bar{
  background:var(--paper-3);border-bottom-color:rgba(16,28,54,.08);
}
.frame-dot{width:9px;height:9px;border-radius:50%;background:rgba(148,163,196,.34);flex:none}
.s-paper .frame-dot,.s-paper-2 .frame-dot,.s-paper-3 .frame-dot{background:rgba(16,28,54,.16)}
.frame-url{
  margin-left:.5rem;flex:1;min-width:0;
  font-family:var(--font-mono);font-size:.6875rem;color:var(--fg-lo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(148,163,196,.09);border-radius:var(--r-pill);padding:.28rem .7rem;
}
.s-paper .frame-url,.s-paper-2 .frame-url,.s-paper-3 .frame-url{background:rgba(16,28,54,.05)}
.frame-body{padding:0}
.frame-body img,.frame-body video{width:100%;display:block}
/* 16:9 embed inside a frame */
.frame-video{position:relative;aspect-ratio:16/9;background:#000}
.frame-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Phone frame — for texting/mobile demos */
.phone{
  width:min(280px,100%);margin-inline:auto;
  border-radius:34px;padding:10px;
  background:linear-gradient(160deg,#222B3B,#0E131D);
  border:1px solid rgba(148,163,196,.26);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
}
.phone-screen{
  border-radius:26px;overflow:hidden;background:var(--ink-850);
  min-height:400px;padding:var(--sp-5) var(--sp-4);
  display:flex;flex-direction:column;gap:.7rem;
}
.phone-note{
  text-align:center;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;color:#828DA0;margin-bottom:.35rem;
}
.bubble{
  max-width:82%;padding:.65rem .85rem;border-radius:16px;
  font-size:.8125rem;line-height:1.45;
}
.bubble-in{align-self:flex-start;background:rgba(148,163,196,.14);color:#D6DCE8;border-bottom-left-radius:5px}
.bubble-out{align-self:flex-end;background:var(--gold);color:#0A1120;font-weight:500;border-bottom-right-radius:5px}
.bubble-meta{
  align-self:center;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.08em;text-transform:uppercase;color:#828DA0;margin:.2rem 0;
}

/* ------------------------------------------------------ 14. COMPARISON */
.compare{
  border:1px solid var(--card-bd);border-radius:var(--r-lg);overflow:hidden;
  background:var(--card);box-shadow:var(--card-sh);
}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{
  padding:1rem 1.15rem;text-align:left;font-size:var(--fs-sm);
  border-bottom:1px solid var(--rule);vertical-align:middle;
}
.compare thead .col-us{position:relative}
.compare thead .col-us::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi))}
.compare thead th{
  font-family:var(--font-display);font-weight:700;font-size:.875rem;
  color:var(--fg);background:var(--chip);
  border-bottom:1px solid var(--rule-strong);
  vertical-align:bottom;
}
.compare thead th:first-child{font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-lo);font-weight:500}
.compare tbody tr:last-child td{border-bottom:0}
.compare td:first-child{font-weight:600;color:var(--fg)}
.compare .col-us{background:var(--gold-wash);position:relative}
.s-paper .compare .col-us,.s-paper-2 .compare .col-us,.s-paper-3 .compare .col-us{background:rgba(232,181,75,.10)}
.compare thead .col-us{color:var(--fg)}
.compare-mark{display:inline-flex;align-items:center;gap:.45rem}
.compare-mark svg{width:16px;height:16px;flex:none;stroke-width:2.6;fill:none}
.compare-yes svg{stroke:var(--ok)}
.compare-no svg{stroke:var(--fg-lo)}
.compare-hint{display:none}
@media(max-width:720px){
  .compare-hint{
    display:block;margin-bottom:.6rem;text-align:center;
    font-size:var(--fs-sm);color:var(--fg-lo);
  }
}
@media(max-width:720px){
  .compare{overflow-x:auto}
  .compare table{min-width:560px}
}

/* Value anchor: shows what a build normally costs next to what you pay,
   so "free" reads as valuable rather than cheap. Used on the free-build offer. */
.value-anchor{
  margin-top:var(--sp-4);padding:.6rem .8rem;
  border:1px dashed var(--card-bd-hi,var(--card-bd));border-radius:var(--r-md,10px);
  background:var(--chip);
  font-size:var(--fs-sm);line-height:1.5;color:var(--fg-mid);
}
.value-anchor b{color:var(--fg);font-weight:700}
.value-anchor b.free{
  color:var(--gold);font-family:var(--font-display);
  font-size:1.15em;font-weight:800;letter-spacing:-.01em;
}

/* --------------------------------------------------------- 15. PRICING */
.plans{display:grid;gap:var(--sp-5);align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--card-bd);
  border-radius:var(--r-lg);padding:var(--sp-6);
  box-shadow:var(--card-sh);
}
.plan-featured{
  border-color:rgba(232,181,75,.5);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 22px 50px -14px rgba(232,181,75,.30);
}
.plan-badge{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  padding:.32rem .8rem;border-radius:var(--r-pill);
  background:var(--gold);color:#0A1120;
  font-family:var(--font-mono);font-size:.625rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.plan-name{
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;
  color:var(--fg);display:block;
}
.plan-who{font-style:italic;color:var(--accent-fg);font-size:var(--fs-sm);margin-top:.4rem}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem;margin-top:var(--sp-5)}
.plan-fig{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.5rem,4vw,3.15rem);line-height:1;letter-spacing:-.03em;color:var(--fg);
}
.plan-per{flex:1 0 100%;font-size:var(--fs-sm);color:var(--fg-lo);font-weight:500;margin-top:.3rem}
.plan-was{
  font-size:1.15rem;color:var(--fg-lo);text-decoration:line-through;
  text-decoration-thickness:2px;font-weight:600;
}
.plan-terms{margin-top:.5rem;font-size:var(--fs-xs);color:var(--fg-lo)}
.plan-desc{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--fg-mid)}
.plan-rule{height:1px;background:var(--rule);margin:var(--sp-5) 0}
.plan-inc{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-lo);margin-bottom:var(--sp-4);display:block;
}
.plan .checks{margin-bottom:var(--sp-6)}
.plan .btn{margin-top:auto}
.plan-foot{margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--fg-lo);text-align:center}

/* billing toggle */
.billing{
  display:inline-flex;align-items:center;gap:.25rem;padding:.28rem;
  border:1px solid var(--card-bd);border-radius:var(--r-pill);background:var(--card);
  margin-inline:auto;
}
.billing button{
  padding:.55rem 1.15rem;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:700;font-size:.875rem;color:var(--fg-mid);
  transition:background .25s,color .25s;
}
.billing button[aria-pressed="true"]{background:var(--gold);color:#0A1120}
.billing-save{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-fg);margin-left:.4rem;
}

/* ----------------------------------------------------- 16. TESTIMONIALS */
.quote{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--card-bd);
  border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--card-sh);
}
.quote-stars{display:flex;gap:.12rem;margin-bottom:var(--sp-4)}
.quote-stars svg{width:16px;height:16px;fill:var(--gold);stroke:none}
.quote blockquote{
  font-family:var(--font-display);font-weight:600;font-size:1.08rem;
  line-height:1.4;letter-spacing:-.012em;color:var(--fg);
}
.quote-body{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--fg-mid)}
.quote-who{
  margin-top:auto;padding-top:var(--sp-5);
  display:flex;align-items:center;gap:.75rem;
}
.quote-avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--chip);border:1px solid var(--card-bd);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--fg-mid);
}
.quote-name{display:block;font-weight:600;font-size:.9375rem;color:var(--fg)}
.quote-meta{display:block;font-size:var(--fs-xs);color:var(--fg-lo);margin-top:.1rem}

/* placeholder state, used until real proof exists */
.proof-empty{
  border:1px dashed var(--rule-strong);border-radius:var(--r-lg);
  padding:clamp(2rem,5vw,3.5rem);text-align:center;background:var(--chip);
}
.proof-empty h3{margin-bottom:var(--sp-3)}
.proof-empty p{max-width:52ch;margin-inline:auto;font-size:var(--fs-sm)}

/* ------------------------------------------------------------- 17. FAQ */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:1.35rem .25rem;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  line-height:1.35;letter-spacing:-.012em;color:var(--fg);
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-fg)}
.faq summary svg{
  width:20px;height:20px;flex:none;stroke:var(--fg-lo);stroke-width:2.2;fill:none;
  transition:transform .3s var(--ease),stroke .2s;
}
.faq details[open] summary svg{transform:rotate(45deg);stroke:var(--accent-fg)}
.faq details > div{padding:0 .25rem 1.5rem}
.faq p{font-size:var(--fs-sm);line-height:1.7;max-width:68ch}
.faq p + p{margin-top:.75rem}

.faq-aside{
  margin-top:var(--sp-7);padding:var(--sp-6);
  border:1px solid var(--card-bd);border-radius:var(--r-lg);background:var(--card);
  box-shadow:var(--card-sh);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;
  max-width:820px;margin-inline:auto;
}
.faq-aside h3{margin-bottom:.35rem}
.faq-aside p{font-size:var(--fs-sm)}

/* -------------------------------------------------------- 18. CTA BAND */
.cta-band{position:relative;overflow:hidden;text-align:center}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 110%,rgba(232,181,75,.20),transparent 62%);
}
.cta-band > .wrap{position:relative;z-index:1}
.cta-band h2{max-width:18ch;margin-inline:auto}
.cta-band .lede{margin:var(--sp-5) auto var(--sp-7)}

/* slim gold offer band */
.offer-band{
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 48%,var(--gold-hi));
  padding-block:0;
}
.offer-band .wrap{
  display:flex;align-items:center;justify-content:center;gap:.6rem 1.4rem;
  flex-wrap:wrap;text-align:center;padding-block:1.1rem;
}
.offer-band p{
  margin:0;color:#0A1120;font-family:var(--font-display);font-weight:700;
  font-size:clamp(.92rem,2.2vw,1.05rem);
}
.offer-band a{color:#0A1120;font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------------------------------------------------------- 19. FOOTER */
.site-footer{background:var(--ink-850);border-top:1px solid rgba(148,163,196,.14);color:#A7B1C4}
.footer-top{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:var(--sp-7) var(--sp-6);padding-block:clamp(3rem,6vw,4.5rem);
}
@media(max-width:900px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.footer-top{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}}
.footer-brand .brand{margin-bottom:var(--sp-4)}
.footer-brand p{font-size:var(--fs-sm);max-width:34ch;line-height:1.65}
.footer-contact{margin-top:var(--sp-5);display:grid;gap:.55rem}
.footer-contact a,.footer-contact span{
  display:inline-flex;align-items:center;gap:.55rem;font-size:var(--fs-sm);color:#A7B1C4;
}
.footer-contact svg{width:15px;height:15px;flex:none;stroke:#828DA0;stroke-width:2;fill:none}
.footer-contact a:hover{color:#fff}
/* h3, not h4: these follow an h2 in the page above, and jumping a level
   breaks the document outline for screen readers. */
.footer-col h3{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#828DA0;margin-bottom:var(--sp-4);
}
.footer-col ul{display:grid;gap:.6rem}
.footer-col a{font-size:var(--fs-sm);color:#A7B1C4;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(148,163,196,.14);padding-block:var(--sp-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  font-size:var(--fs-xs);color:#828DA0;
}
.footer-bottom nav{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.footer-bottom a:hover{color:#A7B1C4}

/* -------------------------------------------- 20. STICKY MOBILE ACTION */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:none;gap:.6rem;padding:.7rem var(--gutter);
  padding-bottom:max(.7rem,env(safe-area-inset-bottom));
  background:rgba(8,11,18,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(148,163,196,.16);
  transform:translateY(110%);transition:transform .34s var(--ease);
}
.mobile-cta.show{transform:none}
.mobile-cta .btn{flex:1;padding-inline:.75rem}
.mobile-cta .btn-secondary{flex:0 0 auto;color:#F4F7FC;border-color:rgba(148,163,196,.3)}
@media(max-width:760px){.mobile-cta{display:flex}}
@media(max-width:760px){body.has-mobile-cta{padding-bottom:76px}}

/* ---------------------------------------------------- 21. MISC PATTERNS */
/* pill row of trades / service areas */
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tags li{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-mid);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:.42rem .7rem;background:var(--card);
}

/* founder / signature block */
.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:820px){.founder{grid-template-columns:minmax(0,1fr)}}
/* Blocks that used to carry the founder portrait. With the picture gone the
   two-column grid would strand the copy in a half-width column with dead
   space beside it, so collapse to one readable measure instead. */
.hero-grid.grid-solo,.founder.grid-solo{
  grid-template-columns:minmax(0,1fr);
  max-width:var(--maxw-narrow);margin-inline:auto;
}
.founder-portrait{
  aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--card-bd);background:var(--card);
  display:grid;place-items:center;text-align:center;padding:var(--sp-6);
}
.founder-portrait img{width:100%;height:100%;object-fit:cover}
.founder-sig{
  margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--rule);
}
.founder-sig b{display:block;font-family:var(--font-display);font-size:1rem;color:var(--fg)}
.founder-sig span{display:block;font-size:var(--fs-xs);color:var(--fg-lo);margin-top:.15rem}

/* callout / note box */
.note{
  border-left:3px solid var(--gold);border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--chip);padding:var(--sp-5) var(--sp-6);
}
.note p{font-size:var(--fs-sm)}
.note strong{color:var(--fg)}

/* article body (blog + legal) */
.prose{max-width:70ch;margin-inline:auto}
.prose > * + *{margin-top:1.15rem}
.prose h2{font-size:clamp(1.5rem,2.6vw,1.9rem);margin-top:2.75rem}
.prose h3{font-size:1.2rem;margin-top:2rem}
.prose p,.prose li{font-size:1.0625rem;line-height:1.75;color:var(--fg-mid)}
.prose ul,.prose ol{display:grid;gap:.6rem;padding-left:1.3rem}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li::marker{color:var(--fg-lo)}
.prose a{color:var(--accent-fg);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--fg);font-weight:600}
.prose blockquote{
  border-left:3px solid var(--gold);padding-left:var(--sp-5);
  font-family:var(--font-display);font-size:1.2rem;line-height:1.45;color:var(--fg);
}
.prose hr{border:0;border-top:1px solid var(--rule);margin-block:2.5rem}

/* post meta + cards */
.post-meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center;
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-lo);
}
.post-card{display:flex;flex-direction:column;height:100%}
.post-card h3{margin-bottom:var(--sp-3)}
.post-card .link-arrow{margin-top:auto;padding-top:var(--sp-5)}

/* ------------------------------------------------------- 22. ANIMATION */
/* Fail-safe scroll reveal.
   .reveal is VISIBLE by default. It is only hidden once mdg.js has confirmed
   it is running AND that its observer actually fires (html.reveal-armed). If
   the script is blocked, errors, or the observer is defeated by a layout quirk,
   the content simply shows — it can never end up permanently at opacity:0,
   which is the failure this site shipped once already. */
.reveal{opacity:1;transform:none}
html.reveal-armed .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.reveal-armed .reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.07s}
.reveal-d2{transition-delay:.14s}
.reveal-d3{transition-delay:.21s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ------------------------------------------------------- 23. UTILITIES */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.hide-sm{display:initial}
@media(max-width:640px){.hide-sm{display:none}}
.mt-0{margin-top:0}
.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)}
.mt-8{margin-top:var(--sp-8)}

/* ------------------------------------------------- 24. FIVE-STAGE FLOW */
.flow{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--sp-4);position:relative;
}
.flow-step{
  position:relative;z-index:1;padding:var(--sp-5);
  background:var(--card);border:1px solid var(--card-bd);border-radius:var(--r-lg);
  box-shadow:var(--card-sh);
}
.flow-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;margin-bottom:var(--sp-4);
  background:var(--gold-wash);border:1px solid rgba(232,181,75,.3);
  font-family:var(--font-mono);font-size:.75rem;font-weight:500;color:var(--accent-fg);
}
.s-paper .flow-num,.s-paper-2 .flow-num,.s-paper-3 .flow-num{
  background:var(--steel-wash);border-color:rgba(36,64,111,.2);color:var(--steel);
}
.flow-step h3{font-size:1.02rem;margin-bottom:.5rem}
.flow-step p{font-size:.875rem;line-height:1.55}
@media(min-width:1001px){
  .flow::before{
    content:"";position:absolute;z-index:0;
    top:calc(var(--sp-5) + 17px);left:10%;right:10%;height:1px;
    background:linear-gradient(90deg,transparent,var(--rule-strong) 10%,var(--rule-strong) 90%,transparent);
  }
}
@media(max-width:1000px){.flow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.flow{grid-template-columns:minmax(0,1fr)}}

/* hero media column keeps the phone from stretching on wide screens */
.hero-media{display:grid;place-items:center}
.split-copy .checks li{font-size:var(--fs-sm)}
.mb-6{margin-bottom:var(--sp-6)}

/* ------------------------------------------- 25. SMALL-SCREEN CORRECTIONS */
/* On phones the sticky bottom bar and the drawer both carry the CTA, so the
   header keeps only the brand and the burger. Without this the nav button
   pushes the burger off the right edge. */
@media(max-width:900px){
  .nav-actions .btn{display:none}
  .nav{gap:var(--sp-4)}
  .brand svg{height:26px}
}
@media(max-width:640px){
  /* Footer links render ~19px tall, which is a fiddly tap target on a phone.
     Padding grows the hit area to ~29px while the reduced gap keeps the
     visual rhythm roughly where it was. Inline links inside prose are left
     alone -- WCAG 2.5.8 exempts targets that sit within a sentence. */
  .footer-col ul{gap:.2rem}
  .footer-col a{display:inline-block;padding-block:.3rem}
  .footer-contact{gap:.25rem}
  .footer-contact a{padding-block:.3rem}
  /* The email is 42 characters and cannot fit one line on a 375px screen.
     Break it at the <wbr> after the @ rather than mid-domain, which otherwise
     reads as "...group.co / m". */
  .footer-contact a[href^="mailto:"]{font-size:.8125rem;overflow-wrap:normal;word-break:normal}
  .footer-bottom nav a{display:inline-block;padding-block:.3rem}
  .display{font-size:clamp(2.4rem,10.5vw,3.1rem)}
  .hero{padding-block:clamp(2.25rem,7vw,3rem) clamp(3rem,8vw,4rem)}
  .hero-pill{
    gap:.45rem;padding:.35rem .7rem .35rem .35rem;
    font-size:.75rem;line-height:1.3;align-items:center;
  }
  .hero-pill b{font-size:.625rem;padding:.2rem .45rem;white-space:nowrap}
  .lede{font-size:1.0625rem}
  .cta-note{font-size:.6875rem;letter-spacing:.05em}
  .sec-head{margin-bottom:var(--sp-7)}
  .card,.stat,.step,.plan,.quote{padding:var(--sp-5)}
  .faq summary{font-size:.9375rem;padding-block:1.15rem}
  .faq-aside{flex-direction:column;align-items:flex-start}
  .faq-aside .cta-row{width:100%}
  .founder-portrait{aspect-ratio:4/3}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
}
/* the announcement bar and the sticky bar must never both eat the same space */
@media(max-width:760px){
  .mobile-cta .btn-secondary{padding-inline:1rem}
}

/* --------------------------------------------- 26. PRO PLAN BANNER (pricing) */
/* Two entry-level plans sit side by side; the growth plan gets its own
   full-width banner underneath so it reads as an upgrade, not a third option. */
.plans-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);align-items:stretch}
@media(max-width:820px){.plans-duo{grid-template-columns:minmax(0,1fr)}}

.plan-banner{
  margin-top:var(--sp-5);padding:clamp(1.75rem,4vw,2.75rem);
  background:var(--card);border:1px solid var(--card-bd);border-radius:var(--r-lg);
  box-shadow:var(--card-sh);position:relative;overflow:hidden;
}
.plan-banner::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--steel),var(--steel-2),var(--gold));
}
.plan-banner-top{
  display:grid;grid-template-columns:minmax(0,1.35fr) auto;gap:var(--sp-6);
  align-items:center;padding-bottom:var(--sp-6);border-bottom:1px solid var(--rule);
}
@media(max-width:760px){.plan-banner-top{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}}
.plan-banner-price{text-align:right}
@media(max-width:760px){.plan-banner-price{text-align:left}}
.plan-banner-price .plan-price{justify-content:flex-end;margin-top:0}
@media(max-width:760px){.plan-banner-price .plan-price{justify-content:flex-start}}
.plan-banner-price .plan-per{text-align:right}
@media(max-width:760px){.plan-banner-price .plan-per{text-align:left}}
.plan-banner-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem var(--sp-7);margin-top:var(--sp-6);
}
@media(max-width:640px){.plan-banner-grid{grid-template-columns:minmax(0,1fr)}}
.plan-banner-foot{
  margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;
}
.plan-banner-foot p{font-size:var(--fs-xs);color:var(--fg-lo);max-width:52ch}

/* add-on row */
.addons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
@media(max-width:760px){.addons{grid-template-columns:minmax(0,1fr)}}
.addon{padding:var(--sp-5);border:1px solid var(--card-bd);border-radius:var(--r-md);background:var(--card)}
.addon b{display:block;font-family:var(--font-display);font-size:1rem;color:var(--fg)}
.addon span{display:block;font-family:var(--font-mono);font-size:.9rem;color:var(--accent-fg);margin-top:.3rem}
.addon p{font-size:var(--fs-xs);margin-top:.5rem}

/* ------------------------------------------------------ 27. DEMO GALLERY */
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,3.5vw,2.5rem)}
@media(max-width:860px){.demo-grid{grid-template-columns:minmax(0,1fr)}}
.demo-copy{margin-top:var(--sp-5)}
.demo-copy h3{margin-bottom:.5rem}
.demo-copy p{font-size:var(--fs-sm);line-height:1.65}

/* ------------------------------------------- 28. LONG-STRING OVERFLOW GUARD */
/* A 42-character email address in a legal list item was pushing the terms page
   21px wider than a 375px viewport. Unbreakable strings (emails, URLs, long
   slugs) must wrap rather than force the page to scroll sideways. */
p,li,blockquote,td,th,summary,h1,h2,h3,h4,dd,dt{overflow-wrap:break-word}
.prose a,.note a,.faq a,.footer-contact a,.compare a{overflow-wrap:anywhere}

/* =========================================================================
   29. INTERACTIVE SERVICE DEMOS
   One bespoke widget per service, replacing the YouTube embeds. Each renders
   a meaningful state with no JS at all; mdg.js layers the interaction on top.
   Every control is a real <button>/<input> so keyboard and screen-reader
   users get the same behaviour as a mouse.
   ========================================================================= */
.demo{width:100%;max-width:520px;margin-inline:auto;position:relative}
.demo-hint{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  margin-top:var(--sp-4);text-align:center;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-lo);
}
.demo-hint svg{width:13px;height:13px;stroke-width:2.2;fill:none;flex:none}
.demo-screen{padding:var(--sp-5);display:grid;gap:.7rem}

/* shared: a tappable option row used by several widgets */
.demo-opt{
  display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  padding:.7rem .8rem;border-radius:var(--r-md);
  border:1px solid var(--card-bd);background:var(--chip);color:var(--fg);
  font-size:.8125rem;line-height:1.35;
  transition:border-color .2s,background .2s,transform .12s;
}
.demo-opt:hover{border-color:var(--card-bd-hi)}
.demo-opt[aria-pressed="true"],.demo-opt.is-on{
  border-color:var(--gold);background:var(--gold-wash);
}
.demo-out{
  margin-top:.2rem;padding:.85rem .9rem;border-radius:var(--r-md);
  background:var(--chip);border:1px solid var(--card-bd);
  font-size:.8125rem;line-height:1.5;color:var(--fg-mid);
}
.demo-out b{color:var(--fg);display:block;margin-bottom:.2rem;font-size:.875rem}
.demo-out.is-good{border-color:rgba(62,156,107,.5);background:rgba(62,156,107,.10)}
.demo-out.is-warn{border-color:rgba(232,181,75,.5);background:var(--gold-wash)}

/* --- 1. conversion website: browser + chat launcher ---------------------- */
.demo-site{background:var(--ink-850);min-height:300px;position:relative;padding:0}
.demo-site-page{padding:var(--sp-5) var(--sp-5) 4.5rem;display:grid;gap:.55rem}
.demo-site-bar{height:9px;border-radius:99px;background:rgba(148,163,196,.18)}
.demo-site-bar.w70{width:70%} .demo-site-bar.w45{width:45%} .demo-site-bar.w85{width:85%}
.demo-site-hero{
  height:64px;border-radius:var(--r-md);margin-bottom:.4rem;
  background:linear-gradient(120deg,rgba(36,64,111,.5),rgba(148,163,196,.12));
}
.demo-site-btn{
  width:96px;height:26px;border-radius:6px;background:var(--gold);
  margin-top:.4rem;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.6rem;color:#0A1120;
}
.demo-chat-launch{
  position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;
  background:var(--gold);display:grid;place-items:center;z-index:2;
  box-shadow:0 8px 22px -6px rgba(232,181,75,.7);
}
.demo-chat-launch svg{width:20px;height:20px;stroke:#0A1120;stroke-width:2.2;fill:none}
.demo-chat{
  position:absolute;right:14px;bottom:68px;left:14px;z-index:3;
  background:var(--ink-700);border:1px solid var(--card-bd);border-radius:var(--r-md);
  padding:.8rem;display:grid;gap:.5rem;
  opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.demo-site.is-open .demo-chat{opacity:1;transform:none;pointer-events:auto}
.demo-chat-head{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-lo);
}

/* --- 3. review funnel: star rating that branches ------------------------- */
.demo-stars{display:flex;gap:.3rem;justify-content:center;margin:.3rem 0 .2rem}
.demo-star{
  width:40px;height:40px;display:grid;place-items:center;border-radius:8px;
  transition:transform .15s var(--ease),background .2s;
}
.demo-star svg{width:26px;height:26px;fill:rgba(148,163,196,.22);stroke:none;transition:fill .18s}
.demo-star:hover{background:var(--chip);transform:translateY(-2px)}
.demo-star.lit svg{fill:var(--gold)}
.demo-ask{text-align:center;font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;color:var(--fg);margin-bottom:.1rem}

/* --- 4. booking: calendar grid ------------------------------------------ */
.demo-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.demo-cal-month{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--fg)}
.demo-cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.demo-day{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-lo);text-align:center;padding-bottom:.15rem;
}
.demo-slot{
  padding:.5rem .2rem;border-radius:7px;font-size:.72rem;font-weight:600;
  border:1px solid var(--card-bd);background:var(--chip);color:var(--fg-mid);
  transition:border-color .18s,background .18s,color .18s,transform .12s;
}
.demo-slot:hover:not(:disabled){border-color:var(--gold);color:var(--fg);transform:translateY(-1px)}
.demo-slot:disabled{opacity:.32;text-decoration:line-through;cursor:not-allowed}
.demo-slot.is-picked{background:var(--gold);border-color:var(--gold);color:#0A1120}

/* --- 5. sms follow-up: sequence timeline --------------------------------- */
.demo-seq{display:grid;gap:0;position:relative;margin-top:.2rem}
.demo-seq-row{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;padding:.55rem 0;
  opacity:.32;transition:opacity .3s var(--ease);
}
.demo-seq-row.on{opacity:1}
.demo-seq-row.cancelled{opacity:.28}
.demo-seq-row.cancelled .demo-seq-body b{text-decoration:line-through}
.demo-seq-dot{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--chip);border:1px solid var(--card-bd);
  font-family:var(--font-mono);font-size:.6rem;color:var(--fg-lo);
}
.demo-seq-row.on .demo-seq-dot{background:var(--gold);border-color:var(--gold);color:#0A1120;font-weight:700}
.demo-seq-body b{display:block;font-size:.8125rem;color:var(--fg);font-weight:600}
.demo-seq-body span{display:block;font-size:.75rem;color:var(--fg-lo);line-height:1.45;margin-top:.1rem}
.demo-toggle{display:flex;gap:.3rem;padding:.25rem;border-radius:var(--r-pill);
  background:var(--chip);border:1px solid var(--card-bd);margin-bottom:.6rem}
.demo-toggle button{
  flex:1;padding:.45rem .6rem;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:700;font-size:.75rem;color:var(--fg-mid);
  transition:background .2s,color .2s;
}
.demo-toggle button[aria-pressed="true"]{background:var(--gold);color:#0A1120}

/* --- 6. campaigns: picker + message preview ------------------------------ */
.demo-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.2rem}
.demo-chip{
  padding:.45rem .75rem;border-radius:var(--r-pill);font-size:.75rem;font-weight:600;
  border:1px solid var(--card-bd);background:var(--chip);color:var(--fg-mid);
  transition:border-color .2s,background .2s,color .2s;
}
.demo-chip:hover{border-color:var(--card-bd-hi);color:var(--fg)}
.demo-chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0A1120}

/* --- 7. local seo: search results before/after --------------------------- */
.demo-search{
  display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;
  border-radius:var(--r-pill);background:var(--chip);border:1px solid var(--card-bd);
  font-size:.8125rem;color:var(--fg-mid);margin-bottom:.6rem;
}
.demo-search svg{width:14px;height:14px;stroke:var(--fg-lo);stroke-width:2.2;fill:none;flex:none}
.demo-result{
  padding:.6rem .7rem;border-radius:var(--r-md);border:1px solid transparent;
  transition:background .25s,border-color .25s,transform .25s var(--ease);
}
.demo-result b{display:block;font-size:.8125rem;color:var(--steel-3);font-weight:600}
.s-paper .demo-result b,.s-paper-2 .demo-result b{color:var(--steel)}
.demo-result span{display:block;font-size:.7rem;color:var(--fg-lo);margin-top:.1rem}
.demo-result.is-you{background:var(--gold-wash);border-color:rgba(232,181,75,.45)}
.demo-result.is-you b{color:var(--gold)}
.s-paper .demo-result.is-you b{color:var(--gold-ink)}
.demo-rank{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-lo);margin:.5rem 0 .25rem;display:block;
}

/* --- 8. inbox: channel tabs + thread ------------------------------------- */
.demo-rows{display:grid;gap:.35rem}
.demo-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;
  padding:.6rem .7rem;border-radius:var(--r-md);text-align:left;width:100%;
  border:1px solid transparent;background:var(--chip);
  transition:border-color .2s,background .2s;
}
.demo-row:hover{border-color:var(--card-bd-hi)}
.demo-row[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash)}
.demo-row-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:var(--card-bd);flex:none}
.demo-row-ic svg{width:13px;height:13px;stroke:var(--fg);stroke-width:2;fill:none}
.demo-row b{display:block;font-size:.8125rem;color:var(--fg);font-weight:600}
.demo-row span{display:block;font-size:.7rem;color:var(--fg-lo);margin-top:.05rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.demo-row i{font-style:normal;font-family:var(--font-mono);font-size:.6rem;color:var(--fg-lo)}

/* --- 9. business phone: routing ------------------------------------------ */
.demo-call{
  text-align:center;padding:var(--sp-5) var(--sp-4);border-radius:var(--r-lg);
  background:var(--chip);border:1px solid var(--card-bd);
}
.demo-call-who{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--fg)}
.demo-call-sub{font-size:.75rem;color:var(--fg-lo);margin-top:.2rem}
.demo-call-num{font-family:var(--font-mono);font-size:.8rem;color:var(--gold);margin-top:.5rem}
.demo-route{display:grid;gap:.4rem;margin-top:.6rem}
.demo-route-step{
  display:flex;align-items:center;gap:.55rem;font-size:.78rem;color:var(--fg-mid);
  padding:.5rem .65rem;border-radius:var(--r-md);background:var(--chip);
  border:1px solid var(--card-bd);
}
.demo-route-step svg{width:14px;height:14px;stroke:var(--gold);stroke-width:2.2;fill:none;flex:none}

@media(prefers-reduced-motion:reduce){
  .demo-chat,.demo-seq-row,.demo-result,.demo-slot,.demo-star{transition:none}
}
@media(max-width:520px){
  .demo{max-width:100%}
  .demo-screen{padding:var(--sp-4)}
  .demo-star{width:34px;height:34px}
  .demo-star svg{width:22px;height:22px}
}

/* ------------------------------------------- 30. DEMO TOUR (our-work page) */
/* Nine stacked demos read as a long, passive list. A tab strip turns it into
   something the visitor steers: one system on stage at a time, each labelled
   by the problem it solves rather than by its feature name. */
.tour-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;
  margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.tour-tab{
  padding:.55rem .95rem;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:700;font-size:.8125rem;
  border:1px solid var(--card-bd);background:var(--chip);color:var(--fg-mid);
  transition:border-color .2s,background .2s,color .2s;
}
.tour-tab:hover{border-color:var(--card-bd-hi);color:var(--fg)}
.tour-tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#0A1120}
.tour-stage{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center;
  border:1px solid var(--card-bd);border-radius:var(--r-xl);
  background:var(--card);box-shadow:var(--card-sh);
  padding:clamp(1.5rem,3.5vw,2.75rem);
}
@media(max-width:860px){
  .tour-stage{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  /* Stacked, the copy sat first and pushed the interactive demo ~450px down
     the page, so tapping a tab changed something the visitor could not see.
     Put the demo directly under the tabs and let the words follow it. */
  .tour-fig{order:-1}
}
.tour-panel[hidden]{display:none}
.tour-eyebrow{
  display:block;font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-fg);margin-bottom:.6rem;
}
.tour-copy h3{font-size:clamp(1.35rem,2.3vw,1.8rem);line-height:1.16;margin-bottom:.7rem}
.tour-copy > p{font-size:var(--fs-sm);line-height:1.7;margin-bottom:var(--sp-5)}
.tour-worth{
  display:flex;gap:.6rem;align-items:flex-start;
  padding:.8rem .9rem;border-radius:var(--r-md);margin-bottom:var(--sp-5);
  background:var(--gold-wash);border:1px solid rgba(232,181,75,.3);
}
.tour-worth svg{width:16px;height:16px;flex:none;margin-top:2px;stroke:var(--accent-fg);stroke-width:2.2;fill:none}
.tour-worth span{font-size:var(--fs-sm);line-height:1.55;color:var(--fg)}
.tour-fig{display:grid;place-items:center;min-width:0}

/* Replay is a pure motion affordance — with reduced motion the thread is
   already fully visible, so the control would be inert. Hide it instead. */
@media(prefers-reduced-motion:reduce){
  [data-replay]{display:none}
}


/* =========================================================================
   32. MOBILE OPTIMISATION
   Paid-social traffic is overwhelmingly mobile and impatient. The rules this
   section implements, from mobile landing-page research:
     - one dominant CTA above the fold, not two competing ones
     - trust signals above the fold (cold traffic needs credibility instantly)
     - a visual in the first screen, not 700px down
     - far tighter vertical rhythm: 136px of dead space between sections on a
       375px screen made the homepage 26 screens long
     - a persistent thumb-reachable CTA
   ========================================================================= */

/* --- compact trust row, sits directly under the hero CTA ----------------- */
.hero-trust{
  display:flex;flex-wrap:wrap;gap:.45rem 1rem;margin-top:var(--sp-5);padding:0;
}
.hero-trust li{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8125rem;font-weight:500;color:var(--fg-mid);
}
.hero-trust svg{
  width:15px;height:15px;flex:none;stroke:var(--gold);stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.lede-more{display:inline}

@media(max-width:760px){
  /* ---- rhythm: the single biggest win on a phone --------------------- */
  :root{--sec-y:2.75rem}
  section{padding-block:var(--sec-y)}
  .sec-head{margin-bottom:var(--sp-6)}
  .sec-head .lede{margin-top:var(--sp-3)}
  .grid{gap:var(--sp-4)}
  .stats,.steps,.plans,.plans-duo,.flow,.demo-grid{gap:var(--sp-4)}
  .split + .split{margin-top:var(--sp-8)}
  .mt-8{margin-top:var(--sp-6)}
  .mt-7{margin-top:var(--sp-5)}

  /* ---- hero: headline, proof and one CTA inside the first screen ------ */
  .hero{padding-block:var(--sp-6) var(--sp-7)}
  .hero-grid{gap:var(--sp-6)}
  .hero h1{margin-bottom:var(--sp-4)}
  .hero .lede{margin-bottom:var(--sp-5);font-size:1rem;line-height:1.55}
  .lede-more{display:none}          /* the extra sentence is desktop-only */
  .hero .cta-row{margin-bottom:0;gap:.75rem}

  /* one dominant CTA: the secondary becomes a quiet text link */
  .hero .cta-row .btn-secondary{
    width:auto;align-self:center;padding:.5rem .25rem;
    background:none;border:0;color:var(--gold);
    font-size:.9375rem;text-decoration:underline;text-underline-offset:4px;
  }
  .hero .cta-row .btn-secondary:hover{background:none;transform:none}
  .hero .cta-note{display:none}     /* replaced by .hero-trust */
  .hero-trust{margin-top:var(--sp-4);gap:.4rem .9rem}
  .hero-trust li{font-size:.78rem}

  /* pull the product visual up into view */
  .hero-media{margin-top:var(--sp-5)}
  .hero-strip{margin-top:var(--sp-7);padding-top:var(--sp-5);gap:var(--sp-4) var(--sp-4)}
  .hero-strip-item b{font-size:.875rem}
  .hero-strip-item span{font-size:.75rem}

  /* ---- density ------------------------------------------------------- */
  .card,.stat,.step,.quote{padding:var(--sp-5)}
  .card-icon{width:38px;height:38px;margin-bottom:var(--sp-4)}
  .card-icon svg{width:18px;height:18px}
  .card h3{font-size:1rem}
  .card p{font-size:.9rem;line-height:1.6}
  .lede{font-size:1rem;line-height:1.6}
  .faq summary{padding-block:1rem}
  .faq details > div{padding-bottom:1.15rem}
  .note{padding:var(--sp-4) var(--sp-5)}
  .prose > * + *{margin-top:1rem}
  .prose h2{margin-top:2rem}
  .prose p,.prose li{font-size:1rem;line-height:1.7}

  /* ---- tour: horizontal tab strip instead of a wrapping pile ---------- */
  .tour-tabs{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    padding-bottom:.5rem;scrollbar-width:none;
  }
  .tour-tabs::-webkit-scrollbar{display:none}
  .tour-tab{flex:none;scroll-snap-align:start}
  .tour-stage{padding:var(--sp-4)}
  .tour-copy h3{font-size:1.3rem}
  /* tab strip is the panel label, so keep it close to the demo it drives */
  .tour-tabs{margin-bottom:var(--sp-4)}
}

/* --- persistent thumb CTA: show it sooner and give it the offer --------- */
@media(max-width:760px){
  .mobile-cta{padding:.6rem var(--gutter);gap:.5rem}
  .mobile-cta .btn{font-size:.9rem;padding-block:.9rem}
  .mobile-cta-note{
    position:absolute;top:-1.4rem;left:0;right:0;text-align:center;
    font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--fg-lo);
    background:rgba(8,11,18,.94);padding:.25rem 0;
  }
}

@media(max-width:760px){
  /* ---- services: nine stacked full-height cards was 3.8 screens on a phone.
     A two-up grid with clamped copy turns it into a scannable menu; the whole
     card is already a link, so the detail is one tap away on the service page. */
  #services .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  #services .card{padding:var(--sp-4)}
  #services .card-icon{width:32px;height:32px;border-radius:9px;margin-bottom:.65rem}
  #services .card-icon svg{width:16px;height:16px}
  #services .card-index{font-size:.5625rem;margin-bottom:.3rem;letter-spacing:.06em}
  #services .card h3{font-size:.875rem;line-height:1.25;margin-bottom:.35rem}
  #services .card p{
    font-size:.75rem;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  #services .card .link-arrow{
    margin-top:.5rem;font-size:.6875rem;
  }
  #services .card .link-arrow svg{width:12px;height:12px}

  /* ---- problem stats: three stacked tiles -> one compact row ------------ */
  #problem .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  #problem .stat{padding:var(--sp-4) .6rem;text-align:center}
  #problem .stat-fig{font-size:1.6rem}
  #problem .stat-label{font-size:.6875rem;line-height:1.4;margin-top:.4rem}
  #problem .stat-src{
    font-size:.5rem;letter-spacing:.03em;margin-top:.5rem;padding-top:.5rem;line-height:1.35;
  }

  /* ---- five-stage flow: two-up rather than one long column ------------- */
  #system .flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  #system .flow-step{padding:var(--sp-4)}
  #system .flow-num{width:28px;height:28px;margin-bottom:.6rem;font-size:.65rem}
  #system .flow-step h3{font-size:.9rem}
  #system .flow-step p{font-size:.78rem;line-height:1.45}
}

/* Ad landing pages keep their CTA in the header (no burger, single path), so
   at very small widths the brand wordmark has to give way rather than push the
   button off-screen. The logo mark still links home. */
@media(max-width:360px){
  .nav-compact .brand-name{display:none}
  .nav-compact .btn{padding-inline:1rem}
}

/* The footer phone number is inline in a sentence (so WCAG 2.5.8 exempts it),
   but it's a phone number on a mobile ad page — give it a real tap height. */
@media(max-width:760px){
  .footer-bottom a[href^="tel:"]{display:inline-block;padding-block:.35rem}
}

/* --------------------------------------------- 33. CHAT WIDGET PLACEMENT */
/* The GoHighLevel bubble collided with the sticky CTA bar on phones. It cannot
   be fixed from here: <chat-widget> is a static-positioned host and the real
   bubble (.lc_text-widget) lives inside a shadow root, which external CSS
   cannot reach. mdg.js injects a stylesheet into that shadow root instead —
   see the "chat widget offset" block there. Hiding the host is not an option
   either, since the conversation panel lives in the same element. */