/* ============================================================
   SIS — site.css (shared design system)
   Summit Intake Systems LLC · rebuild 2026-07-03 · owned by §1
   STATUS: FROZEN after §1 sign-off. §2 -> assets/home.css,
   §3 -> assets/pages.css. Do not edit this file.
   Contents: design tokens (one token block) + shared components
   (nav, footer, buttons, cards, pills, section heads, forms,
   proof strip, reveal animations, responsive, parallax, nav-dd).
   ============================================================ */
/* ============================================================
   SIS v5 — Design System
   Summit Intake Systems LLC
   - CSS-gated animations (no FOUC, no FOIC)
   - WCAG-AA contrast
   - Vanilla CSS, no build step
   ============================================================ */

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.6;
  color:var(--text-1);background:var(--ink-000);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}

/* --- Tokens --- */
:root{
  /* 1 · Neutrals — dark scale (bg / surface / border steps) */
  --ink-000:#060608;--ink-050:#0a0a0e;--ink-100:#111117;--ink-150:#17171f;
  --ink-200:#1e1e28;--ink-300:#2a2a38;--ink-400:#3a3a4a;--ink-500:#5a5a6e;
  --ink-600:#7a7a90;--ink-700:#9a9ab0;--ink-800:#c0c0d0;--ink-900:#e8e8f0;

  /* 2 · Brand — gold identity (pills, accents, brand buttons) */
  --brand:#c9a14a;--brand-hover:#e0c878;
  --brand-dim:rgba(201,161,74,0.15);--brand-glow:rgba(201,161,74,0.25);

  /* 3 · Conversion accent — RESERVED: audit CTAs / audit entry points ONLY.
        Never use for nav, decorative accents, or non-audit buttons. */
  --action:#e8b654;--action-hover:#f0c96e;
  --action-dim:rgba(232,182,84,0.15);--action-glow:rgba(232,182,84,0.28);

  /* 4 · Semantic — ONE red (--danger), one green, one amber */
  --ok:#45a37a;--warn:#d8931f;--danger:#dd6a55;
  --ok-dim:rgba(69,163,122,0.12);--warn-dim:rgba(216,147,31,0.12);--danger-dim:rgba(221,106,85,0.12);

  /* 5 · Audit score bands (tokenized; JS band map is frozen — §2 scope) */
  --band-1:#d95440;--band-2:#d8931f;--band-3:#4a8dc9;--band-4:#45a37a;

  /* 6 · Text scale — all four defined (fixes undefined --text-4) */
  --text-1:var(--ink-900);--text-2:var(--ink-700);
  --text-3:#6c6c84;  /* AA on --ink-000 */
  --text-4:#8a8aa4;  /* placeholders, disabled, de-emphasized */

  /* 7 · Surfaces & borders */
  --border:var(--ink-300);--border-subtle:var(--ink-200);
  --surface:var(--ink-100);--surface-raised:var(--ink-150);

  /* 8 · Type scale — modular, 6 steps (h1 display clamp stays on the h1 rule) */
  --fs-1:0.75rem;          /* xs — pills, meta */
  --fs-2:0.875rem;         /* sm — buttons, nav, small copy */
  --fs-3:1rem;             /* base body */
  --fs-4:1.125rem;         /* lead / h4 */
  --fs-5:clamp(1.25rem,2vw,1.75rem);            /* h3 */
  --fs-6:clamp(1.75rem,3vw + 0.5rem,3rem);      /* h2 */

  /* 9 · Spacing scale */
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:72px;--s8:100px;

  /* 10 · Radii — 2 steps */
  --radius:12px;--radius-lg:20px;

  /* 11 · Shadows — 2 steps */
  --shadow-1:0 8px 24px rgba(0,0,0,0.35);
  --shadow-2:0 24px 80px rgba(0,0,0,0.45);

  /* 12 · Layout & motion */
  --maxw:1200px;--maxw-narrow:800px;
  --gutter:var(--s4);--pad-section:var(--s8);--pad-section-sm:var(--s7);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --dur-fast:0.2s;--dur-med:0.4s;--dur-slow:0.8s;

  /* --- LEGACY ALIASES — keep old pages rendering; do NOT use in new code.
         §2/§3: migrate uses to the tokens above, then these can be pruned. --- */
  --gold:var(--brand);--gold-light:var(--brand-hover);
  --gold-dim:var(--brand-dim);--gold-glow:var(--brand-glow);
  --blue:#3b82f6;--blue-light:#60a5fa;
  --blue-dim:rgba(59,130,246,0.15);--blue-glow:rgba(59,130,246,0.25);
  --purple:#9333ea;--purple-light:#a78bfa;
  --purple-dim:rgba(147,51,234,0.15);--purple-glow:rgba(147,51,234,0.25);
  --green:#34d399;--green-dim:rgba(52,211,153,0.12);
  --red:var(--danger);--red-dim:var(--danger-dim);  /* 3 reds -> one --danger */
  --cream:#f8f5ef;
  --glass-bg:rgba(17,17,23,0.6);--glass-border:rgba(255,255,255,0.06);
  --glass-blur:16px;
  --r-sm:6px;--r-md:var(--radius);--r-lg:var(--radius-lg);--r-xl:28px;--r-full:9999px;
}

/* --- Typography --- */
h1,h2,h3,h4,h5,h6{
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  font-weight:600;line-height:1.15;color:var(--text-1);
}
h1{font-size:clamp(2.75rem,6vw + 1rem,6.5rem);letter-spacing:-0.045em;line-height:1.05}
h2{font-size:var(--fs-6);letter-spacing:-0.02em}
h3{font-size:var(--fs-5);letter-spacing:-0.01em}
h4{font-size:var(--fs-4)}
p{color:var(--text-2);max-width:640px}
.lead{font-size:var(--fs-4);line-height:1.7}
.sm{font-size:var(--fs-2)}
.xs{font-size:var(--fs-1)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:0.8125rem}
.accent{color:var(--gold)}
.accent-blue{color:var(--blue-light)}
.accent-purple{color:var(--purple-light)}

/* --- Skip link --- */
.skip-link{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip-link:focus{
  position:fixed;top:12px;left:12px;width:auto;height:auto;
  padding:10px 16px;background:var(--gold);color:var(--ink-000);
  border-radius:var(--r-full);z-index:1000;font-weight:600;
}

/* --- Focus rings --- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 4px var(--gold-glow)}

/* --- Layout --- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:var(--maxw-narrow);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--pad-section) 0}

.section-sm{padding:var(--pad-section-sm) 0}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-5{margin-top:48px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.mb-5{margin-bottom:48px}
.hidden{display:none !important}

/* --- Navigation --- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;
  transition:padding var(--dur-med) var(--ease-out),
             background var(--dur-med) var(--ease-out),
             backdrop-filter var(--dur-med) var(--ease-out);
}
.nav.scrolled{
  padding:10px 0;background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--glass-border);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1rem;color:var(--text-1)}
.nav-brand .mark{
  width:32px;height:32px;border-radius:8px;
  background:var(--gold);color:var(--ink-000);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
}
.nav-brand small{font-weight:400;color:var(--text-3);font-size:0.75rem;margin-left:2px;display:block}
.nav-logo{height:36px;width:auto;display:block}
.footer .nav-logo{height:32px}

.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:0.875rem;color:var(--text-2);transition:color var(--dur-fast)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text-1)}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-phone{font-size:0.8125rem;color:var(--text-2);font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:6px}

/* Mobile nav — <details> based, works with JS off */
.nav-mobile{display:none}
.nav-mobile summary{list-style:none;cursor:pointer;width:28px;height:28px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:2px}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile summary::marker{content:''}
.nav-toggle span{display:block;height:2px;background:var(--text-1);border-radius:1px;transition:all var(--dur-fast)}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.875rem;font-weight:500;
  padding:12px 24px;border-radius:var(--r-full);
  transition:all var(--dur-fast) var(--ease-out);
  white-space:nowrap;border:1px solid transparent;
}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* .btn-primary = conversion accent. RESERVED for audit CTAs / audit entry points ONLY. */
.btn-primary{background:var(--action);color:var(--ink-000);box-shadow:0 0 0 0 var(--action-glow)}
.btn-primary:hover{background:var(--action-hover);box-shadow:0 0 24px 4px var(--action-glow);transform:translateY(-1px)}
/* .btn-brand = gold identity button (former .btn-primary, visually unchanged) */
.btn-brand{background:var(--brand);color:var(--ink-000);box-shadow:0 0 0 0 var(--brand-glow)}
.btn-brand:hover{background:var(--brand-hover);box-shadow:0 0 24px 4px var(--brand-glow);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text-1);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}
.btn-dark{background:var(--surface-raised);color:var(--text-1);border:1px solid var(--border-subtle)}
.btn-dark:hover{background:var(--ink-200);border-color:var(--border);transform:translateY(-1px)}
.btn-lg{padding:16px 32px;font-size:1rem}
.btn-sm{padding:8px 16px;font-size:0.8125rem}

/* --- Cards --- */
.card{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);padding:28px;
  transition:border-color var(--dur-med) var(--ease-out),
             transform var(--dur-med) var(--ease-out),
             box-shadow var(--dur-med) var(--ease-out);
}
.card:hover{border-color:rgba(201,161,74,0.45);transform:translateY(-4px);box-shadow:0 0 0 1px rgba(201,161,74,0.4),0 14px 44px rgba(0,0,0,0.42),0 0 28px rgba(201,161,74,0.10)}
.card-gold:hover{border-color:var(--gold);box-shadow:0 12px 40px rgba(201,161,74,0.1)}
.card-blue:hover{border-color:var(--blue);box-shadow:0 12px 40px rgba(59,130,246,0.1)}
.card-purple:hover{border-color:var(--purple);box-shadow:0 12px 40px rgba(147,51,234,0.1)}
.card-glass{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
}

/* --- Pills --- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.75rem;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;
  padding:6px 14px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--border-subtle);
  color:var(--text-2);
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite}
.pill-gold{background:var(--gold-dim);color:var(--gold);border-color:rgba(201,161,74,0.3)}
.pill-gold .dot{background:var(--gold)}
.pill-blue{background:var(--blue-dim);color:var(--blue-light);border-color:rgba(59,130,246,0.3)}
.pill-blue .dot{background:var(--blue-light)}
.pill-purple{background:var(--purple-dim);color:var(--purple-light);border-color:rgba(147,51,234,0.3)}
.pill-purple .dot{background:var(--purple-light)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* --- Section heads --- */
.section-head{margin-bottom:48px}
.section-head.center{text-align:center}
.section-head.center p{margin:12px auto 0}
.section-head p{margin-top:12px;font-size:1.0625rem}

/* --- Hero --- */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  padding-top:100px;padding-bottom:60px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%,rgba(201,161,74,0.06),transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 30%,rgba(59,130,246,0.04),transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 80%,rgba(147,51,234,0.03),transparent 50%),
    var(--ink-000);
}
.hero-bg::after{
  content:'';position:absolute;inset:0;opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px 128px;
}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-content{max-width:580px}
.hero-sub{font-size:1.125rem;line-height:1.7;color:var(--text-2);margin:20px 0 32px;max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.hero-meta{display:flex;flex-wrap:wrap;gap:20px;font-size:0.8125rem;color:var(--text-2);font-family:'JetBrains Mono',monospace}
.hero-meta span{display:flex;align-items:center;gap:6px}
.hero-meta span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* --- Proof strip --- */
.proof-strip{
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);
  padding:16px 0;overflow:hidden;
}
.proof-strip-inner{display:flex;align-items:center;gap:40px;animation:marquee 30s linear infinite}
.proof-strip:hover .proof-strip-inner{animation-play-state:paused}
.proof-strip .label{font-size:0.6875rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.proof-strip .item{font-size:0.875rem;color:var(--text-2);white-space:nowrap}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.proof-strip-inner{animation:none}}

/* --- Stats --- */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.stat-num{font-size:clamp(2rem,4vw,3.5rem);font-weight:700;font-family:'Inter Tight',sans-serif;color:var(--gold);line-height:1}
.stat-label{font-size:0.8125rem;color:var(--text-3);margin-top:8px}

/* --- Lane tabs (ARIA tablist) --- */
.lane-tabs-wrap{display:flex;flex-direction:column;align-items:center;width:100%}
.lane-tabs{
  display:flex;gap:4px;padding:4px;background:var(--surface);
  border-radius:var(--r-full);border:1px solid var(--border-subtle);
  width:fit-content;margin-bottom:48px;
}
.lane-tab{
  padding:10px 24px;border-radius:var(--r-full);
  font-size:0.875rem;font-weight:500;color:var(--text-3);
  transition:all var(--dur-fast);cursor:pointer;background:transparent;
}
.lane-tab:hover{color:var(--text-1)}
.lane-tab[aria-selected="true"][data-lane="gold"]{background:var(--gold-dim);color:var(--gold)}
.lane-tab[aria-selected="true"][data-lane="blue"]{background:var(--blue-dim);color:var(--blue-light)}
.lane-tab[aria-selected="true"][data-lane="purple"]{background:var(--purple-dim);color:var(--purple-light)}
.lane-panel[aria-hidden="true"]{display:none}
.lane-panel{width:100%;animation:lane-fade-in 400ms var(--ease-out)}
@keyframes lane-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.lane-panel{animation:none}}

/* --- Service filter chips --- */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:center;margin-bottom:32px}
.filter-chip{
  padding:8px 18px;border-radius:var(--r-full);
  font-size:0.8125rem;font-weight:500;color:var(--text-2);
  background:transparent;border:1px solid var(--border-subtle);
  cursor:pointer;transition:all var(--dur-fast);
}
.filter-chip:hover{border-color:var(--border);color:var(--text-1)}
.filter-chip.is-active{background:var(--gold-dim);border-color:rgba(201,161,74,0.3);color:var(--gold)}
.filter-select{
  padding:8px 14px;border-radius:var(--r-full);font-size:0.8125rem;
  background:var(--surface);border:1px solid var(--border-subtle);color:var(--text-2);
}

/* --- Pricing tiers --- */
.tier{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-xl);padding:36px;
  transition:border-color var(--dur-med) var(--ease-out),
             transform var(--dur-med) var(--ease-out),
             box-shadow var(--dur-med) var(--ease-out);
  display:flex;flex-direction:column;
}
.tier:hover{border-color:var(--border);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.3)}
.tier.featured{
  border-color:var(--gold);
  box-shadow:0 0 40px rgba(201,161,74,0.1);
  position:relative;
}
.tier.featured::before{
  content:'Most Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;
  padding:4px 16px;border-radius:var(--r-full);
  background:var(--gold);color:var(--ink-000);white-space:nowrap;
}
.tier-name{font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-2);margin-bottom:8px}
.tier-price{font-size:2rem;font-weight:700;color:var(--text-1)}
.tier-price .per{font-size:0.875rem;font-weight:400;color:var(--text-3)}
.tier-features{margin:24px 0;flex-grow:1}
.tier-features li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.875rem;color:var(--text-2);padding:6px 0;
}
.tier-features li svg{width:16px;height:16px;stroke:var(--gold);stroke-width:2.5;fill:none;flex-shrink:0;margin-top:2px}

/* --- Steps --- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{position:relative;padding:24px}
.step-n{font-size:0.6875rem;font-weight:600;font-family:'JetBrains Mono',monospace;color:var(--gold);margin-bottom:12px}
.step h4{margin-bottom:8px}
.step p{font-size:0.875rem;color:var(--text-2)}
.step:not(:last-child)::after{content:'';position:absolute;top:36px;right:-12px;width:24px;height:1px;background:var(--border)}

/* --- FAQ (multi-open) --- */
.faq-item{border-bottom:1px solid var(--border-subtle)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;font-weight:500;font-size:1rem;color:var(--text-1);
  padding:20px 0;text-align:left;transition:color var(--dur-fast);
}
.faq-q:hover{color:var(--gold)}
.faq-chevron{width:20px;height:20px;stroke:var(--text-3);stroke-width:2;fill:none;flex-shrink:0;margin-left:16px;transition:transform var(--dur-fast)}
.faq-item.open .faq-chevron{transform:rotate(45deg);stroke:var(--gold)}
.faq-a{font-size:0.9375rem;color:var(--text-2);line-height:1.7;padding-bottom:20px}
.faq-a[hidden]{display:none}

/* --- Forms --- */
.sis-form{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:0.8125rem;font-weight:500;color:var(--text-2)}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--text-1);
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-md);padding:12px 14px;
  transition:border-color var(--dur-fast);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.field textarea{resize:vertical;min-height:96px;font-family:inherit}
.form-status{font-size:0.875rem;margin-top:8px;min-height:1.4em}
.form-status--success{color:var(--green)}
.form-status--error{color:var(--red)}
.section-cta-form{background:linear-gradient(180deg,var(--ink-050),var(--ink-000))}

/* --- Guarantee badge --- */
.guarantee{
  background:linear-gradient(135deg,rgba(201,161,74,0.18),rgba(201,161,74,0.02));
  border:1px solid rgba(201,161,74,0.15);
  border-radius:var(--r-xl);padding:48px;text-align:center;
}

/* --- Demo panel --- */
.demo-panel{
  position:relative;
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,0.4);
}
.demo-pill{
  position:absolute;top:12px;right:12px;
  font-size:0.6875rem;font-weight:500;padding:4px 10px;border-radius:var(--r-full);
  background:var(--gold-dim);color:var(--gold);
  border:1px solid rgba(201,161,74,0.3);z-index:2;
}
.demo-bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid var(--border-subtle);
  background:var(--ink-050);
}
.demo-dot{width:8px;height:8px;border-radius:50%}
.demo-url{font-size:0.6875rem;font-family:'JetBrains Mono',monospace;color:var(--text-3);margin-left:auto}
.demo-body{padding:20px}
.demo-msg{display:flex;gap:10px;margin-bottom:14px;transition:opacity 0.5s var(--ease-out),transform 0.5s var(--ease-out)}
.demo-avatar{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.6875rem;font-weight:600;flex-shrink:0;
}
.demo-avatar-user{background:var(--ink-300);color:var(--text-1)}
.demo-avatar-ai{background:var(--gold-dim);color:var(--gold)}
.demo-bubble{background:var(--ink-150);border-radius:12px;padding:10px 14px;font-size:0.8125rem;color:var(--text-1);max-width:280px;line-height:1.5}
.demo-bubble-ai{background:rgba(201,161,74,0.18);border:1px solid rgba(201,161,74,0.12)}
.demo-time{font-size:0.625rem;color:var(--text-3);margin-top:4px}
.demo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-subtle);border-top:1px solid var(--border-subtle)}
.demo-stat{background:var(--surface);padding:16px;text-align:center}
.demo-stat-num{font-size:1.25rem;font-weight:700;color:var(--gold);font-family:'Inter Tight',sans-serif}
.demo-stat-label{font-size:0.625rem;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-3);margin-top:4px}

/* On JS-ready: hide msgs initially so the hero-demo loop reveals them */
body.js-loaded .demo-msg{opacity:0;transform:translateY(12px)}
body.js-loaded .demo-msg.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  body.js-loaded .demo-msg{opacity:1 !important;transform:none !important}
}

/* --- Footer --- */
.footer{
  border-top:1px solid var(--border-subtle);
  padding:80px 0 40px;background:var(--ink-050);
}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;margin-bottom:60px}
.footer h5{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-3);margin-bottom:16px}
.footer a{display:block;font-size:0.875rem;color:var(--text-2);padding:4px 0;transition:color var(--dur-fast)}
.footer a:hover{color:var(--gold)}
.footer-brand p{font-size:0.875rem;color:var(--text-3);line-height:1.6;margin-top:12px;max-width:300px}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:24px;border-top:1px solid var(--border-subtle);
  font-size:0.75rem;color:var(--text-3);
}

/* --- ROI estimator --- */
.roi-estimator{background:var(--ink-050)}
.roi-controls{margin:32px 0}
.roi-label{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:1rem;color:var(--text-2);font-weight:500}
.roi-label output{font-family:'Inter Tight',sans-serif;font-size:1.5rem;font-weight:700;color:var(--gold)}
.roi-controls input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;max-width:480px;height:6px;
  background:var(--ink-200);border-radius:3px;outline:none;
}
.roi-controls input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--gold);cursor:pointer;border:none;box-shadow:0 0 0 4px rgba(201,161,74,0.12);
}
.roi-controls input[type="range"]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;border:none;
}
.roi-controls input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--gold-glow)}
.roi-output{
  display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:center;
  padding:24px 32px;background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);margin-top:24px;
}
.roi-output-label{font-size:0.875rem;color:var(--text-2)}
.roi-output-value{
  font-family:'Inter Tight',sans-serif;font-weight:700;color:var(--gold);
  font-size:clamp(1.5rem,3vw,2.25rem);
}
.roi-disclaimer{color:var(--text-3);margin-top:16px;max-width:560px;margin-left:auto;margin-right:auto;text-align:center}

/* --- Tools vs Us table --- */
.compare-table{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);overflow:hidden;margin-top:32px;
}
.compare-table .ct-cell{padding:18px 20px;border-bottom:1px solid var(--border-subtle);font-size:0.9375rem;color:var(--text-2)}
.compare-table .ct-cell:nth-child(3n){border-right:none}
.compare-table .ct-cell:not(:nth-child(3n)){border-right:1px solid var(--border-subtle)}
.compare-table .ct-head{background:var(--ink-150);font-weight:600;color:var(--text-1);font-size:0.875rem;text-transform:uppercase;letter-spacing:0.05em}
.compare-table .ct-us{color:var(--text-1)}
.compare-table .ct-us strong{color:var(--gold)}

/* --- Leak diagram --- */
.leak-diagram{width:100%;max-width:880px;margin:24px auto 0;display:block}
.leak-step{opacity:0;transition:opacity 400ms var(--ease-out)}
.leak-diagram.is-in .leak-step{opacity:1}
.leak-diagram .leak-row--red line{stroke:var(--red);stroke-width:2;stroke-dasharray:4 4}
.leak-diagram .leak-row--gold line{stroke:var(--gold);stroke-width:2.5}
.leak-diagram .leak-row--red circle{fill:rgba(248,113,113,0.12);stroke:var(--red);stroke-width:2}
.leak-diagram .leak-row--gold circle{fill:rgba(201,161,74,0.18);stroke:var(--gold);stroke-width:2}
.leak-diagram text{font-family:'Inter','Inter Tight',sans-serif;font-size:14px;fill:var(--text-1);text-anchor:middle}
.leak-diagram .leak-row--red text.leak-leak{fill:var(--red);font-weight:600}
/* Per-step storytelling delays */
.leak-diagram.is-in .leak-row--red .leak-step[data-step="0"]{transition-delay:0ms}
.leak-diagram.is-in .leak-row--red .leak-step[data-step="1"]{transition-delay:220ms}
.leak-diagram.is-in .leak-row--red .leak-step[data-step="2"]{transition-delay:440ms}
.leak-diagram.is-in .leak-row--red .leak-step[data-step="3"]{transition-delay:660ms}
.leak-diagram.is-in .leak-row--gold .leak-step[data-step="0"]{transition-delay:1500ms}
.leak-diagram.is-in .leak-row--gold .leak-step[data-step="1"]{transition-delay:1720ms}
.leak-diagram.is-in .leak-row--gold .leak-step[data-step="2"]{transition-delay:1940ms}
.leak-diagram.is-in .leak-row--gold .leak-step[data-step="3"]{transition-delay:2160ms}
.leak-diagram.is-in .leak-row--gold .leak-step[data-step="4"]{transition-delay:2380ms}
/* Leak node pulses red then settles */
@keyframes leak-pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.leak-diagram.is-in .leak-step--leak{animation:leak-pulse 700ms 960ms 2 var(--ease-out)}
@media (prefers-reduced-motion: reduce){
  .leak-diagram .leak-row line,
  .leak-diagram .leak-row circle,
  .leak-diagram .leak-row text{opacity:1;transition:none}
}

/* --- Booking iframe wrapper --- */
.booking-frame{position:relative;min-height:600px;border-radius:var(--r-lg);overflow:hidden}
.booking-frame iframe{display:block;width:100%;min-height:600px;border:0;border-radius:var(--r-lg)}
.booking-skeleton{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--text-3);font-size:0.875rem;
}
.booking-frame--failed iframe{display:none}
.booking-frame--failed::after{
  content:'Booking widget is taking a while. Call (850) 977-5843 or email hello@summit-intake.com to book.';
  display:block;padding:32px;color:var(--text-2);text-align:center;
  background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r-lg);
}

/* --- Reveal animations (CSS-gated by body.js-loaded) --- */
.reveal,.reveal-left,.reveal-right,.reveal-scale,
.stagger-children > *,
.hero-word,.hero-sub,.hero-ctas,.hero-meta,.demo-panel{
  transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);
  will-change:opacity,transform;
}
body.js-loaded .reveal{opacity:0;transform:translateY(30px)}
body.js-loaded .reveal-left{opacity:0;transform:translateX(-40px)}
body.js-loaded .reveal-right{opacity:0;transform:translateX(40px)}
body.js-loaded .reveal-scale{opacity:0;transform:scale(0.95)}
body.js-loaded .stagger-children > *{opacity:0;transform:translateY(30px)}
body.js-loaded .hero-word{display:inline-block;opacity:0;transform:translateY(20px)}
body.js-loaded .hero-sub,
body.js-loaded .hero-ctas,
body.js-loaded .hero-meta{opacity:0;transform:translateY(15px)}
body.js-loaded .demo-multi{opacity:0;transform:translateX(40px)}

body.js-loaded .reveal.is-in,
body.js-loaded .reveal-left.is-in,
body.js-loaded .reveal-right.is-in,
body.js-loaded .reveal-scale.is-in,
body.js-loaded .stagger-children.is-in > *,
body.js-loaded .hero-word.is-in{opacity:1;transform:none}

body.js-loaded .stagger-children.is-in > *:nth-child(1){transition-delay:0ms}
body.js-loaded .stagger-children.is-in > *:nth-child(2){transition-delay:80ms}
body.js-loaded .stagger-children.is-in > *:nth-child(3){transition-delay:160ms}
body.js-loaded .stagger-children.is-in > *:nth-child(4){transition-delay:240ms}
body.js-loaded .stagger-children.is-in > *:nth-child(5){transition-delay:320ms}
body.js-loaded .stagger-children.is-in > *:nth-child(n+6){transition-delay:400ms}

@media (prefers-reduced-motion: reduce){
  body.js-loaded .reveal,
  body.js-loaded .reveal-left,
  body.js-loaded .reveal-right,
  body.js-loaded .reveal-scale,
  body.js-loaded .stagger-children > *,
  body.js-loaded .hero-word,
  body.js-loaded .hero-sub,
  body.js-loaded .hero-ctas,
  body.js-loaded .hero-meta,
  body.js-loaded .demo-panel{opacity:1 !important;transform:none !important;transition:none !important}
}

/* --- Responsive --- */
@media(max-width:1024px){
  body{--pad-section:72px;--pad-section-sm:52px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-content{max-width:100%}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:not(:last-child)::after{display:none}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .compare-table{font-size:0.875rem}
}
@media(max-width:768px){
  body{--pad-section:52px;--pad-section-sm:36px;--gutter:16px}
  .nav-links,.nav-phone{display:none}
  .nav-mobile{display:block}
  .nav-mobile[open] .nav-links{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;right:0;bottom:0;
    width:100%;height:100vh;
    background:rgba(6,6,8,0.97);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    padding:96px 28px 32px;gap:8px;
    border-bottom:none;
    z-index:99;
    overflow-y:auto;
    animation:nav-drawer-in 280ms var(--ease-out);
  }
  .nav-mobile[open] .nav-links a{
    color:var(--text-1);
    font-size:1.25rem;font-weight:500;
    padding:14px 4px;
    border-bottom:1px solid var(--border-subtle);
    transition:color var(--dur-fast),padding-left var(--dur-fast);
  }
  .nav-mobile[open] .nav-links a:hover,
  .nav-mobile[open] .nav-links a:focus-visible{
    color:var(--gold);padding-left:8px;
  }
  /* Hamburger -> X when open */
  .nav-mobile[open] .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--gold)}
  .nav-mobile[open] .nav-toggle span:nth-child(2){opacity:0}
  .nav-mobile[open] .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--gold)}
  .nav-mobile summary{position:relative;z-index:101}
  body.nav-drawer-open{overflow:hidden}
  @keyframes nav-drawer-in{
    from{opacity:0;transform:translateX(12px)}
    to{opacity:1;transform:translateX(0)}
  }
  @media (prefers-reduced-motion: reduce){
    .nav-mobile[open] .nav-links{animation:none}
  }
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr;gap:16px}
  .hero{min-height:auto;padding-top:120px;padding-bottom:40px}
  .hero-meta{flex-direction:column;gap:8px}
  .tier{padding:24px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
  .proof-strip-inner{gap:24px}
  .compare-table{grid-template-columns:1fr;font-size:0.9375rem}
  .compare-table .ct-cell{border-right:none !important}
}
@media(max-width:480px){
  h1{font-size:2.25rem}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%;justify-content:center}
  .lane-tabs{flex-direction:column;width:100%}
  .lane-tab{text-align:center}
}


/* --- Cursor-aware glow (hover-capable devices, after JS load) --- */
@media (hover: hover) and (pointer: fine){
  body.js-loaded .card,
  body.js-loaded .tier,
  body.js-loaded .demo-panel{position:relative;overflow:hidden}
  body.js-loaded .card::after,
  body.js-loaded .tier::after,
  body.js-loaded .demo-panel::after{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(circle 280px at var(--mouse-x,50%) var(--mouse-y,50%),rgba(201,161,74,0.13),transparent 60%);
    opacity:0;transition:opacity 250ms var(--ease-out);
  }
  body.js-loaded .card:hover::after,
  body.js-loaded .tier:hover::after,
  body.js-loaded .demo-panel:hover::after{opacity:1}
}
@media (prefers-reduced-motion: reduce){
  body.js-loaded .card::after,
  body.js-loaded .tier::after,
  body.js-loaded .demo-panel::after{display:none}
}


/* --- Multi-flow demo (homepage / services / pricing) --- */
.demo-multi{display:flex;flex-direction:column;gap:14px;max-width:520px;width:100%;margin:0 auto}
.demo-tabs{display:flex;gap:4px;padding:4px;background:var(--surface);border-radius:var(--r-full);border:1px solid var(--border-subtle);width:fit-content;margin:0 auto;flex-wrap:wrap;max-width:100%;justify-content:center}
.demo-tab{padding:8px 14px;border-radius:var(--r-full);font-size:0.8125rem;font-weight:500;color:var(--text-3);background:transparent;border:none;cursor:pointer;transition:color var(--dur-fast),background var(--dur-fast);font-family:inherit;white-space:nowrap}
.demo-tab:hover{color:var(--text-1)}
.demo-tab[aria-selected="true"]{background:var(--gold-dim);color:var(--gold)}
.demo-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.demo-multi .demo-panel{margin:0;transition:opacity 200ms var(--ease-out)}
.demo-multi.is-switching .demo-panel{opacity:0.4}
@media(max-width:768px){
  .demo-tab{padding:6px 10px;font-size:0.75rem}
}

/* Tier hover hint for pricing-page demo wiring */
.tier[data-flow]{cursor:pointer}


/* ============================================================
   v5.2 §1 — Intro overlay (home only)
   ============================================================ */
.intro-overlay{display:none}
body.js-loaded .intro-overlay{display:flex;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;background:var(--ink-000);pointer-events:none;transition:opacity 350ms var(--ease-in-out)}
body.js-loaded .intro-overlay[data-intro-state="done"]{opacity:0}
body.js-loaded .intro-overlay .intro-logo{display:block;width:240px;height:auto;max-width:60vw;transform-origin:center center;will-change:transform,opacity}
body.js-loaded.intro-running main,
body.js-loaded.intro-running nav .nav-links,
body.js-loaded.intro-running nav .nav-phone,
body.js-loaded.intro-running nav .nav-actions,
body.js-loaded.intro-running nav .nav-mobile,
body.js-loaded.intro-running nav .nav-brand{opacity:0;transition:opacity 400ms var(--ease-out)}
body.js-loaded.intro-done main,
body.js-loaded.intro-done nav .nav-links,
body.js-loaded.intro-done nav .nav-phone,
body.js-loaded.intro-done nav .nav-actions,
body.js-loaded.intro-done nav .nav-mobile,
body.js-loaded.intro-done nav .nav-brand{opacity:1}
@media (prefers-reduced-motion: reduce){
  body.js-loaded .intro-overlay{display:none !important}
  body.js-loaded.intro-running main,
  body.js-loaded.intro-running nav .nav-brand,
  body.js-loaded.intro-running nav .nav-links,
  body.js-loaded.intro-running nav .nav-phone,
  body.js-loaded.intro-running nav .nav-actions,
  body.js-loaded.intro-running nav .nav-mobile{opacity:1 !important;transition:none !important}
}

/* ============================================================
   v5.2 §2 — Parallax background layers (every page)
   ============================================================ */
.bg-glow,.bg-grid{display:none}
body.js-loaded .bg-glow,
body.js-loaded .bg-grid{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;will-change:transform}
body.js-loaded .bg-glow{background:radial-gradient(800px circle at 75% 20%, rgba(201,161,74,0.18), transparent 70%)}
body.js-loaded .bg-grid{background-image:linear-gradient(45deg, rgba(255,255,255,0.18) 1px, transparent 1px),linear-gradient(135deg, rgba(255,255,255,0.18) 1px, transparent 1px);background-size:80px 80px;top:-200px;bottom:-200px}
@media (prefers-reduced-motion: reduce){
  body.js-loaded .bg-glow,
  body.js-loaded .bg-grid{transform:none !important}
}

/* v6.8 §2.5 — Per-page illustration parallax layer (slow-scroll background art) */
.bg-illustration{display:none}
body.js-loaded .bg-illustration{display:block;position:fixed;inset:0;z-index:-2;pointer-events:none;will-change:transform;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0.18;-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);top:-200px;bottom:-200px}
@media (prefers-reduced-motion: reduce){body.js-loaded .bg-illustration{transform:none !important}}


/*navdd-inline*/
.nav-dd{position:relative;display:inline-flex;align-items:center}
.nav-dd>a::after{content:"\25BE";font-size:.7em;margin-left:5px;opacity:.65}
.nav-dd-menu{position:absolute;top:100%;left:0;display:none;flex-direction:column;gap:2px;background:var(--surface,#111117);border:1px solid var(--border,#2a2a38);border-radius:10px;padding:8px;min-width:184px;box-shadow:0 14px 34px rgba(0,0,0,.45);z-index:60}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{display:flex}
.nav-dd-menu a{padding:8px 12px;border-radius:6px;white-space:nowrap;font-size:.95em}
.nav-dd-menu a:hover{background:rgba(255,255,255,.06);color:var(--gold,#c9a14a)}