:root {
  --c-text: #0F172A;
  --c-muted: #475569;
  --c-border: #E2E8F0;
  --c-primary: #2563EB;
  --c-secondary: #10B981;
  --c-bg: #FFFFFF;
  --c-bg-alt: #F8FAFC;
  --shadow: 0 12px 30px rgba(2,6,23,.08);
  --radius: 18px;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px; --s-11: 96px; --s-12: 120px;

  /* Fluid type */
  --fs-hero: clamp(40px, 6vw, 64px);
  --fs-h2: clamp(28px, 3.4vw, 42px);
  --fs-h3: clamp(20px, 2.2vw, 24px);
  --fs-body: clamp(16px, 1.2vw, 18px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Segoe UI Emoji","Apple Color Emoji",sans-serif;
  color:var(--c-text); background:var(--c-bg); line-height:1.7; font-size:var(--fs-body);
}
.container{max-width:1120px;margin:0 auto;padding:0 var(--s-6)}
.container-narrow{max-width:760px;margin:0 auto;padding:0 var(--s-6)}
.container-wide{max-width:1280px;margin:0 auto;padding:0 var(--s-6)}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border-bottom:1px solid var(--c-border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:10px}
.logo{display:inline-flex;align-items:center;gap:12px;font-weight:800;color:var(--c-primary);text-decoration:none;letter-spacing:-.02em}
.logo img{height:28px;width:auto;display:block}
#nav a{margin:0 14px;color:var(--c-muted);text-decoration:none;font-weight:600}
#nav a.active{color:var(--c-primary)}
#nav a:hover{color:var(--c-primary)}
.hamburger{display:none;font-size:24px;background:transparent;border:0}
.controls{display:flex;align-items:center;gap:10px}

.btn{background:var(--c-primary);color:#fff;text-decoration:none;font-weight:800;padding:12px 18px;border-radius:14px;display:inline-block;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(37,99,235,.16);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.muted{background:#111827;color:#e5e7eb;box-shadow:none}
.btn.outline{background:transparent;color:var(--c-primary);border:2px solid var(--c-primary);box-shadow:none}
.btn.small{padding:8px 12px;font-size:14px}
.btn.ghost{background:transparent;color:var(--c-text);border:1px dashed var(--c-border)}

.hero{position:relative;overflow:hidden;padding:var(--s-11) 0 var(--s-9);color:var(--c-text);background:linear-gradient(180deg,#fff,var(--c-bg-alt) 70%,#fff 100%)}
.hero h1{font-size:var(--fs-hero);line-height:1.05;letter-spacing:-.03em;margin:0 0 var(--s-4)}
.subhead{font-size:clamp(18px,1.6vw,20px);color:var(--c-muted);max-width:820px;margin:0 auto var(--s-6)}
.hero-ctas{display:flex;gap:var(--s-4);justify-content:center;flex-wrap:wrap;margin-top:var(--s-4)}

.section{padding:clamp(var(--s-9), 8vw, var(--s-12)) 0;background:var(--c-bg)}
.section.alt{background:var(--c-bg-alt)}
.section-header{margin:0 0 var(--s-7) 0;text-align:center}
.section-header h2{font-size:var(--fs-h2);line-height:1.15;margin:0}
.section-header p{color:var(--c-muted);max-width:760px;margin:var(--s-3) auto 0}

.grid{display:grid;gap:var(--s-7)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--s-7);box-shadow:var(--shadow)}

.hairline{height:1px;background:linear-gradient(90deg,transparent,#e5e7eb,transparent);margin:var(--s-10) 0}

.hiw{counter-reset:step}
.hiw .step{display:grid;grid-template-columns:44px 1fr;gap:var(--s-5);align-items:start;background:#fff;border:1px solid var(--c-border);border-radius:16px;padding:var(--s-6);box-shadow:var(--shadow)}
.hiw .step::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));color:#fff;font-weight:800;margin-top:2px;grid-column:1}
.hiw .step > *{grid-column:2}
.hiw .step h3{margin:0;font-size:var(--fs-h3)}
.hiw .step p{margin:.25rem 0 0;color:var(--c-muted)}
.hiw .step + .step{margin-top:var(--s-5)}

.pricing .billing-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 var(--s-7);color:var(--c-muted)}
.switch{position:relative;width:64px;height:34px;display:inline-block;vertical-align:middle}
.switch input{display:none}
.slider{position:absolute;inset:0;background:#e5e7eb;border-radius:999px;transition:background .2s}
.slider::before{content:"";position:absolute;width:28px;height:28px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s;box-shadow:var(--shadow)}
.switch input:checked + .slider{background:var(--c-primary)}
.switch input:checked + .slider::before{transform:translateX(30px)}

.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--c-border);border-radius:14px;overflow:hidden}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--c-border);text-align:left}
.table th{background:#f8fafc}
.table tr:last-child td{border-bottom:none}

.contact-form{max-width:680px;margin:var(--s-6) auto 0;background:#fff;border:1px solid var(--c-border);border-radius:16px;padding:var(--s-6);box-shadow:var(--shadow)}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
label span{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
input,textarea,select{width:100%;padding:12px;border:1px solid var(--c-border);border-radius:12px;font:inherit}
input:focus,textarea:focus,select:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(37,99,235,.15);outline:none}
.status{margin-top:10px;color:var(--c-secondary);min-height:1.2em}

.measure{max-width:68ch}

.site-footer{border-top:1px solid var(--c-border);background:#fff;padding:var(--s-9) 0;margin-top:var(--s-11)}
.footer-grid{display:grid;grid-template-columns:2fr 2fr 1fr;gap:var(--s-7);align-items:center}
.footer-grid .links a{display:inline-block;margin-right:12px;color:var(--c-muted);text-decoration:none}
.footer-grid .links a:hover{color:var(--c-primary)}
.copyright{color:var(--c-muted);font-size:14px;margin:12px 0 0;text-align:center}

/* Mobile nav open */
body.nav-open #nav{display:block;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--c-border);padding:8px 16px;z-index:60}
body.nav-open #nav a{display:block;padding:10px 8px;margin:0;color:var(--c-text)}
body.nav-open .site-header{box-shadow:0 10px 25px rgba(2,6,23,.08)}

@media(max-width:1024px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
  #nav{display:none}
  .hamburger{display:inline-block}
}

/* --- v7.1 color & mobile upgrades --- */
:root{
  --grad-hero: radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,.12), transparent 50%),
               radial-gradient(900px 500px at 80% 10%, rgba(16,185,129,.10), transparent 55%);
  --grad-accent: linear-gradient(90deg, var(--c-primary), var(--c-secondary));
}
.hero{background:var(--grad-hero), linear-gradient(180deg,#fff,var(--c-bg-alt) 70%,#fff 100%)}
.btn{background-image: var(--grad-accent); box-shadow: 0 10px 28px rgba(37,99,235,.20); min-height: 44px;}
.btn.outline{border-width:2px; border-image: var(--grad-accent) 1; background:transparent; color: var(--c-text);}
.card{background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg, rgba(37,99,235,.35), rgba(16,185,129,.35)) border-box; border:1px solid transparent;}
.section-header h2{position:relative; display:inline-block; padding-bottom:6px;}
.section-header h2::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; background: var(--grad-accent); border-radius:999px; opacity:.7;}
a{color:var(--c-primary)} a:hover{opacity:.92}
button, .btn, a{ -webkit-tap-highlight-color: rgba(37,99,235,.18); touch-action: manipulation; }
input, select, textarea { min-height: 44px; }
#nav a{ padding: 12px 10px; }
.hamburger{ font-size: 26px; }
@supports(padding:max(0px)){ .site-footer{ padding-bottom: max(var(--s-9), env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; scroll-behavior:auto!important;} }

/* --- v7.2 people-first --- */
:root { --focus: 2px solid #0ea5e9; }

/* Accessible focus outlines */
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 6px; }

/* Skip link for screen readers & keyboard */
.skip-link{position:absolute;left:-999px;top:-999px;background:#111827;color:#fff;padding:10px 14px;border-radius:10px;z-index:9999}
.skip-link:focus{left:12px;top:12px}

/* Trust badges */
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--c-border);border-radius:999px;padding:8px 12px;background:#fff;box-shadow:0 6px 14px rgba(2,6,23,.05);font-weight:600;color:var(--c-muted)}
.badge .dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--c-primary),var(--c-secondary))}

/* Back-to-top button (mobile-friendly) */
.back-to-top{position:fixed;right:16px;bottom:16px;z-index:60;background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));color:#fff;border:none;border-radius:999px;padding:10px 12px;box-shadow:0 10px 28px rgba(2,6,23,.25);display:none;min-width:44px;min-height:44px}
.back-to-top.show{display:inline-flex;align-items:center;justify-content:center}
.back-to-top:focus-visible{outline-color:#fff}

/* FAQ clarity */
details[data-q]{border:1px solid var(--c-border); border-radius:12px; background:#fff; margin:10px 0; box-shadow:var(--shadow);}
details[data-q] summary{list-style:none; cursor:pointer; padding:14px 16px; font-weight:600; display:flex; align-items:center; gap:10px;}
details[data-q] summary::-webkit-details-marker{display:none}
details[data-q] summary .chev{display:inline-block; width:10px; height:10px; border-right:2px solid var(--c-muted); border-bottom:2px solid var(--c-muted); transform:rotate(-45deg); transition:transform .2s ease}
details[data-q][open] summary .chev{transform:rotate(45deg)}
details[data-q] summary:hover{background:#F1F5F9}
details[data-q] > div{padding:0 16px 16px 38px; color:var(--c-muted)}

/* Switch visibility & active labels */
.switch, .slider{cursor:pointer}
.billing-toggle .state{font-weight:600; opacity:.6; transition:opacity .15s}
.billing-toggle .state.active{opacity:1; color:var(--c-text)}

/* v7.4: prevent nav wrapping and add hover underline */
.nav{ gap: 12px; }
#nav{ display:flex; align-items:center; gap:18px; white-space:nowrap; flex:1; justify-content:center; }
#nav a{ margin:0; padding:10px 10px; position:relative }
#nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:2px;
  background: linear-gradient(90deg,var(--c-primary),var(--c-secondary));
  transform: scaleX(0); transform-origin:center; transition: transform .18s ease-in-out;
}
#nav a:hover::after, #nav a.active::after{ transform: scaleX(1); }

/* Scroll-reveal */
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; will-change: opacity, transform; }
.reveal.in-view{ opacity:1; transform:none; }

@media(max-width:720px){
  #nav{ display:none; }
  body.nav-open #nav{ display:block; }
  body.nav-open #nav a{ display:block; padding:12px 8px; margin:0; }
}

/* v8: wide sections + richer components */
.container-edge{max-width:1400px;margin:0 auto;padding:0 var(--s-6)}
.pricing-hero{padding:var(--s-10) 0 var(--s-8);background:radial-gradient(900px 420px at 20% -10%, rgba(37,99,235,.12), transparent 60%), radial-gradient(800px 460px at 80% -10%, rgba(16,185,129,.10), transparent 60%)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7);align-items:stretch}
.plan{position:relative;background:#fff;border:1px solid var(--c-border);border-radius:22px;padding:var(--s-7);box-shadow:var(--shadow);}
.plan.pop{border-color:rgba(37,99,235,.45);box-shadow:0 20px 60px rgba(37,99,235,.15)}
.ribbon{position:absolute;top:14px;right:14px;background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em}
.price{font-size:clamp(28px,3.4vw,36px);font-weight:800;letter-spacing:-.02em;margin:10px 0 4px}
.per{color:var(--c-muted);font-weight:600}
.plan ul{margin:14px 0 0 0;padding-left:20px}
.plan li{margin:8px 0}
.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-8)}
.addon{background:#fff;border:1px dashed var(--c-border);border-radius:16px;padding:var(--s-6);text-align:center}
.addon h4{margin:0 0 6px 0}

/* Billing toggle statuses */
.billing-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 var(--s-7);color:var(--c-muted)}
.billing-toggle .state{font-weight:700;opacity:.6}
.billing-toggle .state.active{opacity:1;color:var(--c-text)}

/* Compare table enhancements */
.table-wrap{overflow:auto;border-radius:16px;border:1px solid var(--c-border);box-shadow:var(--shadow);}
.table{min-width:720px}
.table thead th{position:sticky;top:0;background:#f8fafc;z-index:1}
.table tr:hover td{background:#fcfeff}
.table td, .table th{white-space:nowrap}
@media(max-width:760px){
  .pricing-grid{grid-template-columns:1fr}
  .addons{grid-template-columns:1fr}
  .table{min-width:auto}
}

/* Contact two-column */
.contact-shelf{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:start}
.reason-card{background:#fff;border:1px solid var(--c-border);border-radius:16px;padding:var(--s-6);box-shadow:var(--shadow)}
.reason-list{display:grid;gap:10px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--c-border);padding:8px 12px;border-radius:999px;background:#fff;font-weight:600}
@media(max-width:900px){ .contact-shelf{grid-template-columns:1fr} }

/* Calculator sliders */
.slider-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin:8px 0}
input[type=range]{width:100%}
.metric{display:flex;gap:10px;align-items:baseline}
.metric .big{font-size:clamp(24px,3vw,32px);font-weight:800}
.metric .unit{color:var(--c-muted);font-weight:600}
.card.kpi{display:flex;align-items:center;justify-content:space-between}

/* v9: dark mode tokens */
.theme-dark{
  --c-text:#E5E7EB; --c-muted:#9CA3AF; --c-border:#1F2937; --c-bg:#0B1220; --c-bg-alt:#0F172A;
  --shadow: 0 12px 30px rgba(0,0,0,.45);
}
.theme-dark .card{background:#0f172a;border-color:#1f2937}
.theme-dark .section.alt{background:#0b1220}
.theme-dark .table th{background:#0b1220}
.theme-dark .site-header{background:rgba(11,18,32,.8); border-color:#1f2937}
.theme-dark .site-footer{background:#0b1220; border-top-color:#1f2937}
.theme-dark .btn.outline{color:#E5E7EB}
.theme-dark .badge{background:#0b1220; border-color:#1f2937}
.theme-dark .addon{background:#0b1220; border-color:#1f2937}
.theme-dark .reason-card{background:#0b1220; border-color:#1f2937}
.theme-dark .contact-form{background:#0b1220; border-color:#1f2937}
.theme-dark .table-wrap{border-color:#1f2937}
.theme-dark .table tr:hover td{background:#111827}

/* v9: nav overflow "More" menu */
.more{position:relative}
.more > button{background:transparent;border:none;color:var(--c-text);font-weight:700;padding:10px 10px;border-radius:10px;cursor:pointer}
.more-menu{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--c-border);border-radius:14px;box-shadow:var(--shadow);display:none;min-width:200px;z-index:80}
.theme-dark .more-menu{background:#0b1220}
.more-menu a{display:block;padding:10px 14px;color:var(--c-text);text-decoration:none}
.more-menu a:hover{background:#F1F5F9}
.theme-dark .more-menu a:hover{background:#111827}
.more.open .more-menu{display:block}

/* v9: micro-interactions */
.btn{transition:transform .15s ease, box-shadow .15s ease, filter .2s}
.btn:active{transform:translateY(1px); filter:saturate(1.08)}
.plan:hover{transform:translateY(-2px); transition:transform .2s ease}