:root {
  --ink:#0f172a;
  --muted:#536175;
  --brand:#102a36;
  --brand2:#143d4d;
  --accent:#2f8f83;
  --soft:#eef7f7;
  --soft2:#f7fafb;
  --line:#d8e3e8;
  --white:#ffffff;
  --shadow:0 1.125rem 2.75rem rgba(15,23,42,.08);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 4%, rgba(47,143,131,.16), transparent 32%),
    linear-gradient(180deg, #eef7f7 0%, #ffffff 48%, #ffffff 100%);
  font-size:1rem;
}
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline:.1875rem solid var(--accent);
  outline-offset:.1875rem;
}
.skip-link {
  position:absolute;
  left:-999rem;
  top:.75rem;
  background:var(--brand);
  color:white;
  padding:.75rem 1rem;
  border-radius:.75rem;
  z-index:1000;
  font-weight:900;
}
.skip-link:focus { left:.75rem; }
.wrap { max-width:72.5rem; margin:0 auto; padding:0 1.5rem; }
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(.875rem);
  background:rgba(238,247,247,.88);
  border-bottom:.0625rem solid rgba(216,227,232,.78);
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.125rem;
  padding:1.125rem 0;
}
.brand {
  font-size:1.75rem;
  font-weight:900;
  color:var(--brand);
  letter-spacing:-.04em;
}
.nav-links {
  display:flex;
  align-items:center;
  gap:1rem;
  font-weight:800;
  font-size:.875rem;
}
.btn {
  display:inline-block;
  border:0;
  border-radius:.75rem;
  background:var(--accent);
  color:white !important;
  padding:.8125rem 1.125rem;
  font-weight:900;
  box-shadow:0 .75rem 1.375rem rgba(47,143,131,.20);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform:translateY(-.0625rem); box-shadow:0 1rem 1.875rem rgba(47,143,131,.28); text-decoration:none; }
.btn.secondary { background:var(--brand); box-shadow:0 .75rem 1.375rem rgba(16,42,54,.18); }
.btn.light { background:white; color:var(--brand) !important; border:.0625rem solid var(--line); box-shadow:none; }
.hero { padding:4.875rem 0 3.625rem; }
.page-hero { padding:4.25rem 0 2.5rem; }
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:#dff4f1;
  color:#0f665c;
  border:.0625rem solid #bde8e2;
  padding:.5rem .75rem;
  border-radius:999rem;
  font-weight:900;
  font-size:.8125rem;
}
h1 {
  margin:1.125rem 0 1.25rem;
  max-width:62.5rem;
  font-size:clamp(2.625rem, 7vw, 4.875rem);
  line-height:.96;
  letter-spacing:-.065em;
}
.page-hero h1 { font-size:clamp(2.5rem, 5.6vw, 4.25rem); }
.lede {
  max-width:53rem;
  color:var(--muted);
  font-size:1.375rem;
  line-height:1.55;
  margin:0;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.875rem; }
.hero-proof {
  display:flex;
  flex-wrap:wrap;
  gap:.875rem;
  margin-top:1.875rem;
  color:#46556a;
  font-weight:800;
  font-size:.875rem;
}
.proof-item {
  display:flex;
  align-items:center;
  gap:.5rem;
  background:rgba(255,255,255,.78);
  border:.0625rem solid var(--line);
  padding:.5625rem .75rem;
  border-radius:999rem;
}
.dot { width:.5625rem; height:.5625rem; border-radius:999rem; background:var(--accent); display:inline-block; }
section { padding:3.625rem 0; }
section.alt { background:linear-gradient(180deg, var(--soft2), #fff); border-top:.0625rem solid var(--line); border-bottom:.0625rem solid var(--line); }
.section-head { max-width:51.25rem; margin-bottom:1.75rem; }
.section-head h2 {
  font-size:clamp(2rem, 4.6vw, 3.25rem);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:0 0 .875rem;
}
.section-head p { color:var(--muted); font-size:1.1875rem; line-height:1.55; margin:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15.625rem,1fr)); gap:1.125rem; }
.grid.three { grid-template-columns:repeat(auto-fit,minmax(18.75rem,1fr)); }
.card {
  background:var(--white);
  border:.0625rem solid var(--line);
  border-radius:1.25rem;
  padding:1.5rem;
  box-shadow:var(--shadow);
}
.card h3 {
  margin:0 0 .625rem;
  color:var(--brand);
  font-size:1.3125rem;
  letter-spacing:-.02em;
}
.card p, .card li {
  color:var(--muted);
  line-height:1.55;
  font-size:1rem;
}
.card p { margin:0; }
.card ul { padding-left:1.25rem; margin:.75rem 0 0; }
.card-link { display:block; color:inherit; height:100%; }
.card-link:hover { text-decoration:none; transform:translateY(-.0625rem); }
.number {
  display:inline-flex;
  width:2.125rem;
  height:2.125rem;
  border-radius:.6875rem;
  align-items:center;
  justify-content:center;
  background:#e0f4f1;
  color:#0f665c;
  font-weight:900;
  margin-bottom:.875rem;
}
.use-case { border-top:.3125rem solid var(--accent); }
.use-case small {
  display:inline-block;
  font-weight:900;
  color:#0f665c;
  background:#e0f4f1;
  padding:.3125rem .5625rem;
  border-radius:999rem;
  margin-bottom:.75rem;
}
.split {
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(20rem, .95fr);
  gap:1.75rem;
  align-items:start;
}
.feature-list { display:grid; gap:.75rem; margin-top:1rem; }
.feature-row {
  display:grid;
  grid-template-columns:2rem 1fr;
  gap:.75rem;
  align-items:start;
  padding:.875rem;
  border:.0625rem solid var(--line);
  border-radius:1rem;
  background:white;
}
.check {
  width:1.75rem;
  height:1.75rem;
  border-radius:999rem;
  background:#dff4f1;
  color:#0f665c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.feature-row strong { display:block; margin-bottom:.25rem; color:var(--brand); }
.feature-row span { color:var(--muted); line-height:1.45; }
.panel {
  background:var(--brand);
  color:white;
  border-radius:1.625rem;
  padding:1.75rem;
  box-shadow:0 1.25rem 3.125rem rgba(16,42,54,.22);
}
.panel h2, .panel h3 { color:white; font-size:1.75rem; margin:0 0 .75rem; letter-spacing:-.03em; }
.panel p, .panel li { color:#d8e8ec; }
.panel ul { margin:.875rem 0 0; padding-left:1.25rem; }
.compare {
  overflow-x:auto;
  border:.0625rem solid var(--line);
  border-radius:1.125rem;
  background:white;
  box-shadow:var(--shadow);
}
table { width:100%; border-collapse:collapse; min-width:47.5rem; }
caption {
  text-align:left;
  padding:1rem;
  font-weight:900;
  color:var(--brand);
  background:#f3f8f9;
  border-bottom:.0625rem solid var(--line);
}
th, td { text-align:left; padding:1rem; border-bottom:.0625rem solid var(--line); vertical-align:top; }
th { background:#f3f8f9; color:var(--brand); font-size:.875rem; text-transform:uppercase; letter-spacing:.04em; }
td { color:var(--muted); line-height:1.45; }
td strong { color:var(--brand); }
.cta {
  background:linear-gradient(135deg, var(--brand) 0%, #194e5f 100%);
  color:white;
  border-radius:1.875rem;
  padding:2.375rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  box-shadow:0 1.375rem 3.4375rem rgba(16,42,54,.24);
}
.cta h2 { margin:0 0 .625rem; font-size:2.375rem; letter-spacing:-.04em; }
.cta p { margin:0; color:#dbe8ec; max-width:45rem; line-height:1.5; font-size:1.125rem; }
.faq details {
  background:white;
  border:.0625rem solid var(--line);
  border-radius:1rem;
  padding:1.125rem 1.25rem;
  box-shadow:0 .625rem 1.75rem rgba(15,23,42,.04);
}
.faq details + details { margin-top:.75rem; }
.faq summary { cursor:pointer; font-weight:900; color:var(--brand); font-size:1.125rem; }
.faq p { color:var(--muted); line-height:1.55; margin-bottom:0; }
.content {
  background:white;
  border:.0625rem solid var(--line);
  border-radius:1.25rem;
  padding:1.75rem;
  box-shadow:var(--shadow);
}
.content h2 { font-size:2rem; letter-spacing:-.035em; margin-top:0; color:var(--brand); }
.content h3 { font-size:1.35rem; margin-top:1.5rem; color:var(--brand); }
.content p, .content li { color:var(--muted); line-height:1.65; }
.breadcrumbs { color:var(--muted); font-size:.9rem; margin-bottom:1rem; }
.breadcrumbs a { font-weight:800; }
footer {
  padding:2rem 0;
  border-top:.0625rem solid var(--line);
  color:var(--muted);
  font-size:.875rem;
}
.footer-row { display:flex; justify-content:space-between; gap:1.125rem; flex-wrap:wrap; }
.footer-links { display:flex; gap:1rem; flex-wrap:wrap; }
@media (max-width: 56.25rem) {
  .split, .cta { grid-template-columns:1fr; display:block; }
  .panel { margin-top:1.25rem; }
  .cta .btn { margin-top:1.125rem; }
  .nav-links a:not(.btn) { display:none; }
}
@media (max-width: 35rem) {
  .hero { padding-top:3.25rem; }
  h1 { font-size:2.75rem; }
  .lede { font-size:1.1875rem; }
  .cta { padding:1.625rem; }
}