:root{
  --bg:#0b0b0d;
  --txt:#111;
  --muted:#6b7280;
  --card:#ffffff;
  --line:#e7e7ea;
  --accent:#111;
  --soft:#f6f6f7;
  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  margin:0;color:var(--txt);background:var(--soft);
}

a{color:inherit}
.wrap{max-width:1400px;margin:0 auto;padding:0 28px;}
@media (max-width:520px){.wrap{padding:0 18px;}}

.header{background:var(--bg);color:#fff; position:sticky; top:0; z-index:50;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0;
}
.brand{display:flex; flex-direction:column; gap:4px;}
.brand h1{margin:0; font-size:1.25rem; letter-spacing:.2px; font-weight:820}
.brand .tag{margin:0; color:rgba(255,255,255,.72); font-size:1rem}

/* desktop nav */
.nav{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.nav a{
  color:#fff; text-decoration:none; font-weight:750; opacity:.9;
  padding:10px 12px; border-radius:999px;
}
.nav a:hover{opacity:1; background:rgba(255,255,255,.08)}

/* burger */
.burger{
  display:none; border:1px solid rgba(255,255,255,.16);
  background:transparent; color:#fff; border-radius:12px;
  padding:10px 12px; cursor:pointer;
}
.burger:focus{outline:2px solid rgba(255,255,255,.35); outline-offset:2px;}
.burger .lines{display:flex; flex-direction:column; gap:5px;}
.burger .lines span{display:block; width:22px; height:2px; background:#fff; border-radius:2px;}

.mobile-menu{
  display:none;
  border-top:1px solid rgba(255,255,255,.12);
  padding:10px 0 18px;
}
.mobile-menu a{
  display:block; padding:12px 10px;
  border-radius:12px; text-decoration:none; font-weight:750; opacity:.92;
}
.mobile-menu a:hover{opacity:1; background:rgba(255,255,255,.08)}
.mobile-menu.is-open{display:block;}

@media (max-width:860px){
  .nav{display:none;}
  .burger{display:inline-flex; align-items:center; gap:10px;}
}

.main{padding:56px 0 84px;}
/* ensure “big page feel” even with little content */
.page-min{
  min-height:calc(100vh - 86px - 84px); /* header approx + footer padding */
}

.grid{
  display:grid; gap:26px;
  grid-template-columns: 1.2fr .8fr;
  align-items:start;
}
@media (max-width:1020px){ .grid{grid-template-columns:1fr;} }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow);
}

.hero{padding:44px; position:relative; overflow:hidden;}
.hero:before{
  content:"";
  position:absolute; inset:-200px -200px auto auto;
  width:520px; height:520px;
  background:radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 60%);
  transform:translate(40px, -40px);
  pointer-events:none;
}
.kicker{color:var(--muted); margin:0 0 12px 0; font-weight:650}
.hero h2{
  margin:0 0 14px 0;
  font-size:2.15rem;
  letter-spacing:-.02em;
  line-height:1.08;
}
.hero p{margin:0 0 14px 0; color:#1f2937; line-height:1.7; font-size:1.05rem}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; align-items:center}

.btn{
  display:inline-block;
  background:var(--accent); color:#fff;
  padding:14px 18px;
  border-radius:14px;
  text-decoration:none; font-weight:850;
  border:1px solid rgba(0,0,0,.08);
}
.btn:hover{filter:brightness(1.08)}
.btn.secondary{
  background:#fff; color:#111; border:1px solid var(--line);
}
.btn.secondary:hover{background:#fafafa}

.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.badge{
  background:#f2f2f3;
  border:1px solid var(--line);
  padding:9px 12px;
  border-radius:999px;
  font-size:.95rem;
  color:#111;
}

.small{font-size:1rem; color:var(--muted); line-height:1.75}
.h3{margin:0 0 12px 0; font-size:1.2rem; letter-spacing:-.01em}
.list{margin:12px 0 0 0; padding-left:18px; color:#1f2937; line-height:1.8; font-size:1.05rem}

.hr{height:1px; background:var(--line); margin:24px 0}

.table{width:100%; border-collapse:separate; border-spacing:0; margin-top:18px; overflow:hidden; border-radius:14px}
.table th,.table td{border-bottom:1px solid var(--line); padding:14px 12px; text-align:center}
.table th{background:#fafafa; font-weight:900}
.table tr td:first-child,.table tr th:first-child{border-left:1px solid var(--line)}
.table tr td:last-child,.table tr th:last-child{border-right:1px solid var(--line)}
.table thead tr th{border-top:1px solid var(--line)}
.table tbody tr:last-child td{border-bottom:1px solid var(--line)}
.table tbody tr:hover td{background:#fcfcfc}

.section-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.pill{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 12px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:#111; font-weight:800; font-size:.95rem;
}

.footer{background:var(--bg); color:rgba(255,255,255,.88); padding:26px 0; font-size:1rem}
.footer a{color:#fff; text-decoration:underline}

/* utility */
.mt-0{margin-top:0}


/* Mobile-friendly tables: horizontal scroll */
.table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px}
.table-wrap::-webkit-scrollbar{height:10px}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18); border-radius:999px}
.table{min-width:720px}
@media (max-width:520px){.table{min-width:680px}}

/* FAQ toggles */
.faq{display:grid; gap:12px}
.faq-item{border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden}
.faq-q{width:100%; text-align:left; padding:16px 16px; font-weight:900; border:0; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px}
.faq-q:hover{background:#fbfbfb}
.faq-q .chev{transition:transform .2s ease; opacity:.75}
.faq-item.is-open .faq-q .chev{transform:rotate(180deg)}
.faq-a{display:none; padding:0 16px 16px 16px; color:#1f2937; line-height:1.75}
.faq-item.is-open .faq-a{display:block}

/* Floating mobile CTA */
.fab-cta{
  display:none;
  position:fixed;
  left:14px; right:14px; bottom:14px;
  z-index:60;
}
.fab-cta a{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  padding:14px 16px;
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}
.fab-cta a:hover{filter:brightness(1.08)}
@media (max-width:860px){
  .fab-cta{display:block;}
  /* add breathing room so content isn't hidden behind the floating button */
  .main{padding-bottom:120px;}
}