/* ============================================================
   FABRIC CONTROL — shared stylesheet (azurefabriccontrol.com)
   Dobler navy identity. Used by all pages.
   ============================================================ */
:root{
  --navy:#1B2A4A; --navy-900:#131F38; --navy-800:#22345A; --navy-700:#2E4269;
  --accent:#5B9BD5; --accent-600:#3E80BF; --accent-100:#DEEBF7; --accent-050:#EEF5FC;
  --ink:#1C2436; --slate:#5A6577; --line:#E3E8F0; --line-navy:#38507E;
  --mist:#F5F8FC; --success:#1D9E75; --success-bg:#E1F5EE; --amber:#BA7517; --amber-bg:#FAEEDA;
  --radius:10px; --radius-lg:16px; --maxw:1160px;
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--navy)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent-600)}
.center{text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:15px;padding:13px 24px;border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--navy-900)}
.btn-primary:hover{background:#6EA8DE;box-shadow:0 6px 18px rgba(91,155,213,.35)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-600)}
.btn-on-navy{background:transparent;color:#fff;border-color:var(--line-navy)}
.btn-on-navy:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{font-size:16px;padding:15px 30px}
.btn-block{width:100%;justify-content:center}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--navy);letter-spacing:-.02em}
.brand .mark{width:30px;height:30px;flex:none}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:15px;color:var(--slate);font-weight:500;transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--navy)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-login{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--navy);padding:9px 18px;border:1.5px solid var(--line);border-radius:var(--radius);transition:border-color .15s,color .15s}
.nav-login:hover{border-color:var(--accent);color:var(--accent-600)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:6px}
.burger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;transition:.2s}

/* generic section */
section{padding:88px 0}
.sec-head{max-width:720px;margin-bottom:52px}
.sec-head.center{margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);margin:16px 0 16px}
.sec-head p{font-size:18px;color:var(--slate)}
.mist{background:var(--mist)}

/* page hero (interior) */
.page-hero{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:76px 0}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 380px at 84% 12%,rgba(91,155,213,.2),transparent 70%);pointer-events:none}
.page-hero .eyebrow{color:var(--accent);margin-bottom:16px}
.page-hero h1{color:#fff;font-size:clamp(32px,4.4vw,50px);line-height:1.1;margin-bottom:18px;max-width:820px}
.page-hero p{font-size:19px;color:#C6D0E2;max-width:640px}

/* footer */
footer{background:var(--navy-900);color:#93A0BC;padding:60px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:42px}
.foot-brand .brand{color:#fff;margin-bottom:14px}
.foot-brand p{font-size:14px;color:#93A0BC;max-width:300px}
.foot-col h4{font-family:var(--font-display);font-size:13px;font-weight:600;color:#fff;letter-spacing:.5px;margin-bottom:16px;text-transform:uppercase}
.foot-col a{display:block;font-size:14.5px;color:#93A0BC;margin-bottom:11px;transition:color .15s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid #2A3A5C;padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13.5px}
.foot-bottom a:hover{color:var(--accent)}

/* cards / grids reused */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px}
.card .ic{width:50px;height:50px;border-radius:12px;background:var(--accent-050);border:1px solid var(--accent-100);display:flex;align-items:center;justify-content:center;color:var(--accent-600);margin-bottom:18px}
.card h3{font-size:19px;margin-bottom:10px}
.card p{font-size:15px;color:var(--slate)}
.hover-lift{transition:border-color .2s,transform .2s,box-shadow .2s}
.hover-lift:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,42,74,.08)}

/* check list */
.checks{list-style:none;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:10px;font-size:15px;align-items:flex-start}
.checks li svg{color:var(--success);flex:none;margin-top:3px}
.xlist li svg{color:var(--slate)}

/* pills / badges */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px}
.pill-free{background:var(--success-bg);color:#0F6E56}
.pill-trial{background:var(--accent-050);color:var(--accent-600)}
.pill-amber{background:var(--amber-bg);color:#854F0B}

/* stat band */
.band-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-family:var(--font-display);font-size:clamp(28px,3.6vw,40px);font-weight:600;color:var(--accent-600);letter-spacing:-.02em}
.stat .lbl{font-size:14px;color:var(--slate);margin-top:6px}

/* cta band */
.cta{background:var(--navy);color:#fff;position:relative;overflow:hidden;text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 380px at 50% 0%,rgba(91,155,213,.16),transparent 70%);pointer-events:none}
.cta h2{color:#fff;font-size:clamp(28px,3.4vw,38px);margin-bottom:16px}
.cta p{color:#C6D0E2;font-size:18px;max-width:560px;margin:0 auto 30px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg)}
table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
table.cmp th,table.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
table.cmp thead th{background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:600;font-size:14px}
table.cmp thead th:first-child{border-top-left-radius:0}
table.cmp tbody tr:nth-child(even){background:var(--mist)}
table.cmp td.feat-name{font-weight:500;color:var(--ink)}
table.cmp td.yes{color:var(--success);font-weight:600}
table.cmp td.no{color:var(--slate)}
table.cmp .col-hl{background:var(--accent-050)}
table.cmp thead th.col-hl{background:var(--accent-600)}

/* img slot */
.img-slot{width:100%;height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#7C8CAC;font-size:12px;text-align:center;padding:16px;border-radius:12px;border:1px solid var(--line-navy);background:#22345A;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 12px,transparent 12px,transparent 24px)}
.img-slot b{font-family:var(--font-display);font-size:13px;color:#9FB0CE}
.img-slot.light{background:var(--mist);border:1px dashed var(--line);color:var(--slate)}
.img-slot.light b{color:var(--navy)}

/* responsive */
@media(max-width:900px){
  .grid-2,.grid-3,.grid-4,.band-inner{grid-template-columns:1fr}
  .band-inner{grid-template-columns:repeat(2,1fr);gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .nav-links,.nav-login{display:none}
  .burger{display:block}
  .nav-links.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:20px 28px;gap:18px}
  section{padding:60px 0}
}
@media(max-width:520px){.band-inner,.foot-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}