/* ==========================================================================
   SAFEGO — Design System
   Fonts: Plus Jakarta Sans (display/headings) + Inter (body/UI)
   Palette: Navy (trust, authority) + Verify Green (confirmation, safety)
   ========================================================================== */

@import url('fonts.css');

:root{
  /* ---- Navy scale (primary / trust) ---- */
  --navy-50:#F2F5FA;
  --navy-100:#E2E8F2;
  --navy-200:#B9C5DC;
  --navy-300:#8A9CBE;
  --navy-400:#536A95;
  --navy-500:#2F4570;
  --navy-600:#162F58;
  --navy-700:#0E2348;
  --navy-800:#0A1B38;
  --navy-900:#06112A;
  --navy-950:#040B1F;

  /* ---- Verify scale (accent / confirmation) ---- */
  --verify-50:#E8FBF1;
  --verify-100:#C6F4DA;
  --verify-200:#8FE7B7;
  --verify-300:#52D690;
  --verify-400:#1FC274;
  --verify-500:#00A661;
  --verify-600:#008C52;
  --verify-700:#006E41;
  --verify-800:#005232;
  --verify-900:#003822;

  /* ---- Semantic tokens ---- */
  --bg:#ffffff;
  --fg:var(--navy-800);
  --muted:var(--navy-400);
  --border:var(--navy-100);
  --radius:0.875rem;

  /* ---- Layout ---- */
  --container-max:1280px;
  --container-pad:1.5rem;
  --header-h:72px;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:160ms;
  --dur:240ms;
  --dur-slow:420ms;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--fg);
  background:var(--bg);
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  letter-spacing:-0.02em;
  margin:0;
  font-weight:800;
  color:var(--navy-800);
}
p{ margin:0; }
.text-balance{ text-wrap:balance; }
.brand-image{ width:180px; height:auto; }
.site-footer .brand-image{ padding:8px 12px; border-radius:8px; background:#fff; }
.form-honeypot{ position:absolute !important; left:-9999px !important; }
.field-error{ display:block; margin-top:.35rem; color:#a52222; font-size:12px; font-weight:700; }
.form-status{ min-height:24px; color:var(--navy-400); font-size:14px; }
.form-status.success{ color:var(--verify-700); font-weight:700; }
.form-status.error{ color:#a52222; font-weight:700; }
.input[aria-invalid="true"]{ border-color:#a52222; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* Focus visibility — accessibility floor */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--verify-500);
  outline-offset:2px;
  border-radius:6px;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}
.section-pad{ padding-top:96px; padding-bottom:96px; }
.section-pad-sm{ padding-top:64px; padding-bottom:64px; }
@media (max-width:768px){
  .section-pad{ padding-top:64px; padding-bottom:64px; }
  .section-pad-sm{ padding-top:44px; padding-bottom:44px; }
}

.grid{ display:grid; gap:1.25rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-12{ grid-template-columns:repeat(12,1fr); }
@media (max-width:980px){
  .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-12{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}

.col-span-4{ grid-column:span 4; }
.col-span-5{ grid-column:span 5; }
.col-span-6{ grid-column:span 6; }
.col-span-7{ grid-column:span 7; }
.col-span-8{ grid-column:span 8; }
.col-span-12{ grid-column:span 12; }
@media (max-width:980px){
  .col-span-4,.col-span-5,.col-span-6,.col-span-7,.col-span-8,.col-span-12{ grid-column:1 / -1; }
}
.order-1{ order:1; } .order-2{ order:2; }
@media (max-width:980px){
  .lg-order-1{ order:1; } .lg-order-2{ order:2; }
}

.flex{ display:flex; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.items-end{ align-items:flex-end; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.flex-wrap{ flex-wrap:wrap; }
.flex-col{ flex-direction:column; }
.gap-1{ gap:.375rem; } .gap-2{ gap:.5rem; } .gap-3{ gap:.75rem; } .gap-4{ gap:1rem; } .gap-5{ gap:1.25rem; } .gap-6{ gap:1.5rem; } .gap-8{ gap:2rem; }

.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.max-w-xl{ max-width:42rem; }
.max-w-2xl{ max-width:48rem; }
.max-w-3xl{ max-width:58rem; }

/* ==========================================================================
   Color & background utilities
   ========================================================================== */
.bg-white{ background:#fff; }
.bg-navy-50{ background:var(--navy-50); }
.bg-navy-50-soft{ background:rgba(242,245,250,.5); }
.text-navy-800{ color:var(--navy-800); }
.text-navy-500{ color:var(--navy-400); }
.text-navy-400{ color:var(--navy-300); }
.text-white{ color:#fff; }
.text-white-70{ color:rgba(255,255,255,.72); }
.text-white-55{ color:rgba(255,255,255,.55); }
.text-verify-600{ color:var(--verify-500); }
.text-verify-700{ color:var(--verify-700); }
.text-verify-300{ color:var(--verify-300); }

.gradient-navy{
  background:linear-gradient(180deg,var(--navy-800) 0%, var(--navy-700) 60%, var(--navy-600) 100%);
}
.gradient-soft{
  background:linear-gradient(180deg,#F7F9FC 0%, #ffffff 100%);
}
.border-y{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.border-b{ border-bottom:1px solid var(--border); }
.border-t{ border-top:1px solid var(--border); }
.relative{ position:relative; }
.overflow-hidden{ overflow:hidden; }

/* Dot grid texture for dark sections */
.dot-grid{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:22px 22px;
}

/* ==========================================================================
   Typography scale
   ========================================================================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--verify-700);
  font-family:'Inter',sans-serif;
}
.eyebrow.on-dark{ color:var(--verify-300); }
.eyebrow::before{ content:""; display:inline-block; width:24px; height:1px; background:var(--verify-600); }
.eyebrow.on-dark::before{ background:var(--verify-400); }

.h1-hero{ font-size:48px; line-height:1.04; }
.h1-hero .accent{ color:var(--verify-500); }
@media (min-width:768px){ .h1-hero{ font-size:68px; } }

.h1-section{ font-size:44px; line-height:1.04; }
@media (min-width:768px){ .h1-section{ font-size:64px; } }

.h2{ font-size:36px; line-height:1.1; font-weight:800; }
@media (min-width:768px){ .h2{ font-size:44px; } }

.h3{ font-size:30px; line-height:1.15; font-weight:800; }
@media (min-width:768px){ .h3{ font-size:40px; } }

.h4{ font-size:18px; font-weight:700; color:var(--navy-800); }

.lead{ font-size:17px; line-height:1.65; color:var(--navy-400); }
.lead-lg{ font-size:19px; line-height:1.6; color:var(--navy-400); }
@media (min-width:768px){ .lead-lg{ font-size:18px; } }

.intro{ margin-top:1.25rem; }
.heading-block{ max-width:42rem; }
.heading-block.wide{ max-width:58rem; }
.heading-block .h2{ margin-top:1rem; color:var(--navy-800); }
.heading-block.on-dark .h2{ color:#fff; }
.heading-block .lead{ margin-top:1.25rem; }
.heading-block.on-dark .lead{ color:rgba(255,255,255,.7); }

/* ==========================================================================
   Buttons — sized for thumbs (Fitts's Law: min 44px target)
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:14px; line-height:1;
  border-radius:10px; padding:14px 22px; min-height:48px;
  border:1px solid transparent; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--verify-500); color:#fff;
  box-shadow:0 6px 18px -8px rgba(0,166,97,.55);
}
.btn-primary:hover{ background:var(--verify-600); transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(0,166,97,.55); }
.btn-ghost{ background:transparent; color:var(--navy-800); border-color:var(--navy-100); }
.btn-ghost:hover{ border-color:var(--navy-800); background:var(--navy-50); }
.btn-on-dark{ background:#fff; color:var(--navy-800); }
.btn-on-dark:hover{ background:var(--navy-100); transform:translateY(-1px); }
.btn-block{ width:100%; }
.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn .icon-circle{
  width:28px; height:28px; border-radius:999px; background:var(--navy-800); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.link-arrow{ display:inline-flex; align-items:center; gap:6px; color:var(--verify-500); font-weight:600; font-size:14px; }
.link-arrow svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ==========================================================================
   Shadows / surfaces
   ========================================================================== */
.shadow-soft{ box-shadow:0 1px 2px rgba(10,27,56,.04), 0 12px 32px -12px rgba(10,27,56,.12); }
.shadow-card{ box-shadow:0 1px 2px rgba(10,27,56,.04), 0 8px 24px -16px rgba(10,27,56,.18); }
.shadow-deep{ box-shadow:0 30px 80px -30px rgba(10,27,56,.45); }

.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.75rem; box-shadow:0 1px 2px rgba(10,27,56,.04), 0 8px 24px -16px rgba(10,27,56,.18);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card-link:hover{ border-color:var(--verify-200); box-shadow:0 30px 80px -30px rgba(10,27,56,.35); transform:translateY(-2px); }
.card-num{ font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--navy-300); font-weight:700; }

.icon-tile{
  display:inline-flex; width:44px; height:44px; border-radius:12px;
  background:var(--verify-50); color:var(--verify-700);
  align-items:center; justify-content:center; flex-shrink:0;
}
.icon-tile svg{ width:20px; height:20px; }
.icon-tile.lg{ width:64px; height:64px; border-radius:16px; }
.icon-tile.lg svg{ width:28px; height:28px; }

.check-dot{
  margin-top:2px; width:20px; height:20px; border-radius:999px;
  background:var(--verify-50); color:var(--verify-700);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.check-dot svg{ width:11px; height:11px; }

.bullet-dot{ width:6px; height:6px; border-radius:999px; background:var(--verify-500); flex-shrink:0; margin-top:8px; }

/* ==========================================================================
   Header / Navigation
   Jakob's Law: standard top-nav pattern users already know from countless
   SaaS sites — logo left, primary nav center, actions right.
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:60; width:100%;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.scrolled{ border-bottom-color:var(--navy-100); box-shadow:0 1px 2px rgba(10,27,56,.04); }
.nav-row{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav-links{ display:none; align-items:center; gap:2rem; }
.nav-link{
  font-size:15px; font-weight:500; color:rgba(10,27,56,.8);
  transition:color var(--dur) var(--ease); padding:8px 0; position:relative;
}
.nav-link:hover, .nav-link.active{ color:var(--navy-800); }
.nav-link.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--verify-500); border-radius:2px;
}
.nav-actions{ display:none; align-items:center; gap:.75rem; }

@media (min-width:1024px){
  .nav-links{ display:flex; }
  .nav-actions{ display:flex; }
  .nav-burger{ display:none; }
}

.logo{ display:flex; align-items:center; gap:8px; }
.logo svg{ width:34px; height:34px; flex-shrink:0; }
.logo-text{ font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; font-size:22px; letter-spacing:-0.02em; color:var(--navy-800); }
.logo-text .go{ color:var(--verify-500); }
.logo.on-dark .logo-text{ color:#fff; }

/* Solutions dropdown — Hick's Law: grouped under one menu item rather
   than 4 separate top-level links, reducing primary choices to scan */
.has-dropdown{ position:relative; }
.dropdown-trigger{
  display:flex; align-items:center; gap:6px; font-size:15px; font-weight:500;
  color:rgba(10,27,56,.8); background:none; border:none; padding:8px 0;
  transition:color var(--dur) var(--ease);
}
.dropdown-trigger:hover{ color:var(--navy-800); }
.dropdown-trigger.active{ color:var(--navy-800); }
.dropdown-trigger.active svg{ color:var(--verify-600); }
.dropdown-trigger svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.has-dropdown.open .dropdown-trigger svg{ transform:rotate(180deg); }
.dropdown-panel{
  position:absolute; left:50%; transform:translateX(-50%); top:100%; padding-top:12px;
  width:440px; opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events:none;
}
.has-dropdown.open .dropdown-panel,
.has-dropdown:hover .dropdown-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.dropdown-inner{
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 30px 80px -30px rgba(10,27,56,.45);
  padding:8px; display:grid; grid-template-columns:1fr 1fr; gap:2px;
}
.dropdown-item{ display:flex; flex-direction:column; gap:2px; padding:12px 16px; border-radius:10px; transition:background var(--dur) var(--ease); }
.dropdown-item:hover{ background:var(--navy-50); }
.dropdown-item.active{ background:var(--verify-50); }
.dropdown-item.active .title{ color:var(--verify-700); }
.dropdown-item .title{ font-size:15px; font-weight:600; color:var(--navy-800); }
.dropdown-item .desc{ font-size:13px; color:var(--navy-300); }

.nav-burger{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  background:none; border:none; color:var(--navy-800); margin-right:-8px;
}
.nav-burger svg{ width:26px; height:26px; }

.mobile-nav{
  display:none; border-top:1px solid var(--border); background:#fff;
}
.mobile-nav.open{ display:block; }
.mobile-nav .container{ padding-top:1rem; padding-bottom:1.25rem; display:flex; flex-direction:column; gap:2px; }
.mobile-nav a{ padding:12px 8px; border-radius:10px; font-weight:500; color:var(--navy-800); }
.mobile-nav a:hover{ background:var(--navy-50); }
.mobile-nav a.active{ background:var(--verify-50); color:var(--verify-700); font-weight:700; }
.mobile-nav .btn-primary{ margin-top:.75rem; }
.mobile-group-label{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--navy-300); font-weight:700; padding:14px 8px 4px; }

@media (min-width:1024px){ .mobile-nav{ display:none !important; } }

/* ==========================================================================
   Hero patterns
   ========================================================================== */
.hero{ position:relative; overflow:hidden; }
.hero-grid{ display:grid; gap:3rem; align-items:center; padding-top:64px; padding-bottom:80px; }
@media (min-width:1024px){
  .hero-grid{ grid-template-columns:7fr 5fr; padding-top:96px; padding-bottom:80px; }
  .hero-grid.audience{ grid-template-columns:6fr 6fr; }
}
@media (max-width:1023px){ .hero-grid{ padding-top:48px; padding-bottom:56px; } }

.hero-visual{
  position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 80px -30px rgba(10,27,56,.45);
}
.hero-visual.wide{ aspect-ratio:4/3; }
.hero-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,17,42,.7), rgba(10,27,56,.08) 55%, transparent);
}

.live-card{
  position:absolute; left:20px; top:20px; right:20px; z-index:2;
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  border-radius:12px; padding:12px 16px; display:flex; align-items:center; gap:12px;
  box-shadow:0 8px 24px -16px rgba(10,27,56,.3);
}
.live-dot-wrap{ position:relative; width:10px; height:10px; }
.live-dot{ position:relative; width:10px; height:10px; border-radius:999px; background:var(--verify-500); display:block; }
.live-dot-ring{
  position:absolute; inset:0; border-radius:999px; background:rgba(31,194,116,.4);
  animation:pulseRing 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulseRing{ 0%{ transform:scale(.9); opacity:.7; } 100%{ transform:scale(2.4); opacity:0; } }
.live-card .meta{ flex:1; }
.live-card .meta .label{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--navy-300); font-weight:700; }
.live-card .meta .value{ font-size:14px; font-weight:700; color:var(--navy-800); margin-top:2px; }
.badge-verified{ font-size:12px; font-weight:700; color:var(--verify-700); background:var(--verify-50); padding:5px 9px; border-radius:8px; }

.pill-row{ position:absolute; left:20px; right:20px; bottom:20px; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pill{
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border-radius:10px; padding:9px 10px;
  display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--navy-800);
  box-shadow:0 8px 24px -16px rgba(10,27,56,.3);
}
.pill svg{ width:14px; height:14px; color:var(--verify-700); flex-shrink:0; }

.hero-checks{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1.75rem; row-gap:.75rem; font-size:13px; color:var(--navy-400); }
.hero-checks span{ display:inline-flex; align-items:center; gap:8px; }
.hero-checks svg{ width:16px; height:16px; color:var(--verify-500); flex-shrink:0; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem; }

/* ==========================================================================
   Trust marquee — Jakob's Law: "trusted by" logo strips are a familiar
   social-proof convention
   ========================================================================== */
.trust-strip{ border-top:1px solid var(--border); background:#fff; }
.trust-strip .container{ padding-top:1.75rem; padding-bottom:1.75rem; display:flex; flex-direction:column; gap:1.25rem; align-items:center; }
@media (min-width:768px){ .trust-strip .container{ flex-direction:row; align-items:stretch; } }
.trust-label{
  font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--navy-300); font-weight:700;
  white-space:nowrap; flex-shrink:0;
}
@media (min-width:768px){ .trust-label{ align-self:center; padding-right:2rem; border-right:1px solid var(--border); } }
.marquee-wrap{ flex:1; overflow:hidden; width:100%; }
.marquee-track{
  display:flex; align-items:center; gap:3rem; white-space:nowrap; width:max-content;
  animation:marquee 36s linear infinite;
}
.marquee-track span{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:18px; color:var(--navy-200); letter-spacing:-0.01em; }
@keyframes marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ==========================================================================
   Animations on entry (fade-up / fade-in)
   Use sparingly — orchestrated hero entrance only (per design guidance)
   ========================================================================== */
.fade-up{ animation:fadeUp .7s var(--ease) both; }
.fade-in{ animation:fadeIn .8s var(--ease) both; }
.fade-in-delay{ animation:fadeIn .8s var(--ease) both; animation-delay:.15s; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  position:relative; overflow:hidden; border-radius:18px; color:#fff; padding:2.5rem;
}
@media (min-width:768px){ .cta-band{ padding:4rem; } }
.cta-band .dot-grid{ opacity:.6; }
.cta-grid{ display:grid; gap:2rem; align-items:center; position:relative; }
@media (min-width:1024px){ .cta-grid{ grid-template-columns:8fr 4fr; } }
.cta-actions{ display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:640px) and (max-width:1023px){ .cta-actions{ flex-direction:row; } }
@media (min-width:1024px){ .cta-actions{ align-items:flex-end; } }
.cta-actions .btn{ justify-content:center; }
@media (min-width:640px){ .cta-actions .btn{ flex:none; } }

/* ==========================================================================
   Stats band (dark)
   ========================================================================== */
.stat-card{
  padding:1.75rem; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.stat-value{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:40px; letter-spacing:-0.02em; color:var(--verify-300); line-height:1; }
@media (min-width:768px){ .stat-value{ font-size:48px; } }
.stat-label{ margin-top:.5rem; font-size:14px; color:rgba(255,255,255,.7); line-height:1.5; }

/* ==========================================================================
   Numbered steps (How it works)
   ========================================================================== */
.step{ display:flex; gap:1rem; }
.step-num{
  flex-shrink:0; width:36px; height:36px; border-radius:999px; background:var(--navy-800); color:#fff;
  font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif;
}
.step h4{ font-size:17px; }
.step p{ margin-top:.25rem; font-size:15px; color:var(--navy-400); line-height:1.6; }

/* ==========================================================================
   Audience cards
   ========================================================================== */
.audience-card{
  display:block; border-radius:18px; overflow:hidden; border:1px solid var(--border); background:#fff;
  box-shadow:0 1px 2px rgba(10,27,56,.04), 0 8px 24px -16px rgba(10,27,56,.18);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.audience-card:hover{ box-shadow:0 30px 80px -30px rgba(10,27,56,.45); transform:translateY(-2px); }
.audience-card .thumb{ aspect-ratio:16/9; overflow:hidden; }
.audience-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.audience-card:hover .thumb img{ transform:scale(1.05); }
.audience-card .body{ padding:1.75rem; }
.audience-card h4{ margin-top:.75rem; font-size:22px; }
.audience-card ul{ margin-top:1rem; display:flex; flex-direction:column; gap:.5rem; }
.audience-card li{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--navy-500); }
.audience-card .explore{ margin-top:1.25rem; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--verify-700); }
.audience-card .explore svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.audience-card:hover .explore svg{ transform:translateX(3px); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial{
  padding:1.75rem; border-radius:14px; background:#fff; border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(10,27,56,.04), 0 8px 24px -16px rgba(10,27,56,.18);
  display:flex; flex-direction:column; height:100%;
}
.testimonial .mark{ font-family:'Plus Jakarta Sans',sans-serif; font-size:34px; color:var(--verify-500); line-height:1; }
.testimonial blockquote{ margin:.25rem 0 0; font-size:15.5px; line-height:1.65; color:var(--navy-600); flex:1; }
.testimonial figcaption{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.testimonial .name{ font-size:14px; font-weight:700; color:var(--navy-800); }
.testimonial .role{ font-size:13px; color:var(--navy-300); }

/* ==========================================================================
   Module rows (Platform page)
   ========================================================================== */
.module-row{ padding-top:3.5rem; padding-bottom:3.5rem; border-top:1px solid var(--border); }
.module-row:first-of-type{ border-top:none; }
.module-grid{ display:grid; gap:3rem; align-items:center; }
@media (min-width:1024px){ .module-grid{ grid-template-columns:6fr 6fr; } }
.module-eyebrow-row{ display:flex; align-items:center; gap:.75rem; }
.module-tag{ font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--navy-300); font-weight:700; }
.module-row h3{ margin-top:1rem; font-size:34px; }
@media (min-width:768px){ .module-row h3{ font-size:40px; } }
.module-tagline{ margin-top:.75rem; color:var(--verify-700); font-size:16px; font-weight:700; }
.module-desc{ margin-top:1.25rem; font-size:16px; color:var(--navy-400); line-height:1.65; max-width:36rem; }
.module-list{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.75rem; }
.module-list li{ display:flex; align-items:flex-start; gap:.75rem; font-size:15px; color:var(--navy-600); }
.module-media{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 30px 80px -30px rgba(10,27,56,.45); }
.module-media img{ width:100%; height:100%; object-fit:cover; }
.module-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top right, rgba(10,27,56,.3), transparent 60%); }

/* ==========================================================================
   Integration tiles
   ========================================================================== */
.int-tile{
  aspect-ratio:1; border-radius:14px; border:1px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-weight:600; color:var(--navy-700); font-size:14px; box-shadow:0 1px 2px rgba(10,27,56,.04), 0 8px 24px -16px rgba(10,27,56,.18);
  transition:border-color var(--dur) var(--ease);
}
.int-tile:hover{ border-color:var(--verify-300); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.billing-toggle{
  display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:999px;
  background:#fff; border:1px solid var(--border); box-shadow:0 1px 2px rgba(10,27,56,.04), 0 8px 24px -16px rgba(10,27,56,.18);
}
.billing-toggle button{
  border:none; background:none; padding:10px 18px; border-radius:999px; font-size:14px; font-weight:700;
  color:var(--navy-700); display:flex; align-items:center; gap:8px; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.billing-toggle button.active{ background:var(--navy-800); color:#fff; }
.billing-toggle .save-tag{ font-size:11px; font-weight:800; padding:2px 6px; border-radius:6px; background:var(--verify-50); color:var(--verify-700); }
.billing-toggle button.active .save-tag{ background:rgba(31,194,116,.2); color:var(--verify-300); }

.price-card{
  position:relative; padding:2rem; border-radius:18px; border:1px solid var(--border); background:#fff;
  box-shadow:0 1px 2px rgba(10,27,56,.04), 0 8px 24px -16px rgba(10,27,56,.18);
}
.price-card.highlight{ border-color:var(--verify-500); box-shadow:0 30px 80px -30px rgba(10,27,56,.45); }
.price-card .badge{
  position:absolute; top:-12px; left:2rem; background:var(--verify-500); color:#fff; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; padding:5px 12px; border-radius:999px;
}
.price-card h3{ font-size:22px; }
.price-card .tagline{ margin-top:.5rem; font-size:14px; color:var(--navy-400); line-height:1.55; min-height:42px; }
.price-row{ margin-top:1.75rem; display:flex; align-items:flex-end; gap:8px; }
.price-amount{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:44px; color:var(--navy-800); letter-spacing:-0.02em; line-height:1; }
.price-unit{ font-size:13px; color:var(--navy-400); padding-bottom:8px; }
.price-billing{ margin-top:4px; font-size:12px; color:var(--verify-700); font-weight:700; }
.price-cta{ margin-top:1.75rem; width:100%; }
.price-included{ margin-top:1.75rem; padding-top:1.75rem; border-top:1px solid var(--border); }
.price-included .label{ font-size:12px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--navy-300); }
.price-included ul{ margin-top:1rem; display:flex; flex-direction:column; gap:.75rem; }
.price-included li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--navy-600); }

.compare-table-wrap{ overflow-x:auto; background:#fff; border-radius:18px; border:1px solid var(--border); box-shadow:0 1px 2px rgba(10,27,56,.04), 0 8px 24px -16px rgba(10,27,56,.18); }
.compare-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
.compare-table thead{ background:rgba(242,245,250,.6); }
.compare-table th{
  text-align:left; padding:1rem 1.5rem; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--navy-300); font-weight:700;
}
.compare-table td{ padding:1rem 1.5rem; border-top:1px solid var(--border); color:var(--navy-500); }
.compare-table td:first-child{ font-weight:600; color:var(--navy-800); }

/* ==========================================================================
   FAQ Accordion — Postel's Law applied to interaction: be lenient about
   how/where users click (whole row toggles), strict/clear in the answer.
   ========================================================================== */
.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-trigger{
  width:100%; text-align:left; background:none; border:none; padding:1.25rem 0;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; font-weight:800; color:var(--navy-800);
}
.accordion-trigger svg{ width:18px; height:18px; flex-shrink:0; color:var(--navy-300); transition:transform var(--dur) var(--ease); }
.accordion-item.open .accordion-trigger svg{ transform:rotate(180deg); color:var(--verify-600); }
.accordion-content{
  max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease);
}
.accordion-content-inner{ padding-bottom:1.25rem; font-size:15px; color:var(--navy-400); line-height:1.65; }

/* ==========================================================================
   Forms — generous spacing & large targets (Doherty/Fitts)
   ========================================================================== */
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:13px; font-weight:700; color:var(--navy-700); }
.field .hint{ font-size:12px; color:var(--navy-300); }
.input, .textarea, .select{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:13px 14px;
  font-family:inherit; font-size:14px; color:var(--navy-800); background:#fff;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder{ color:var(--navy-300); }
.input:focus, .textarea:focus, .select:focus{ border-color:var(--verify-400); box-shadow:0 0 0 3px rgba(31,194,116,.15); outline:none; }
.textarea{ resize:vertical; min-height:130px; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A9CBE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }

.form-card{ padding:2rem; border-radius:18px; background:#fff; border:1px solid var(--border); box-shadow:0 1px 2px rgba(10,27,56,.04), 0 8px 24px -16px rgba(10,27,56,.18); }
@media (min-width:768px){ .form-card{ padding:2.5rem; } }
.form-grid{ display:grid; gap:1.25rem; }
@media (min-width:768px){ .form-grid{ grid-template-columns:1fr 1fr; } }

.contact-info-item{ display:flex; align-items:flex-start; gap:12px; }
.contact-info-item .icon{ width:40px; height:40px; border-radius:10px; background:var(--navy-50); color:var(--navy-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item .icon svg{ width:17px; height:17px; }
.contact-info-item .label{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--navy-300); font-weight:700; }
.contact-info-item .value{ font-size:15px; font-weight:700; color:var(--navy-800); margin-top:2px; }

.success-state{ padding:2.5rem 0; text-align:center; }
.success-state .icon-tile{ width:56px; height:56px; border-radius:999px; margin:0 auto; }
.success-state .icon-tile svg{ width:28px; height:28px; }
.success-state h3{ margin-top:1.25rem; font-size:26px; }
.success-state p{ margin-top:.75rem; max-width:30rem; margin-left:auto; margin-right:auto; color:var(--navy-400); line-height:1.6; }
.modal-body iframe{ width:100%; aspect-ratio:16 / 9; border:0; display:block; }
.legal-card h2{ margin-top:2.25rem; font-size:1.55rem; }
.legal-card h2:first-child{ margin-top:0; }
.legal-card h3{ margin-top:1.5rem; font-size:1.08rem; }
.legal-card p{ margin-top:.85rem; color:var(--navy-500); line-height:1.75; }
.legal-card ul{ margin-top:.85rem; padding-left:1.25rem; list-style:disc; color:var(--navy-500); line-height:1.75; }
.legal-card a{ color:var(--verify-700); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ==========================================================================
   Toast (lightweight feedback — Doherty Threshold: instant confirmation)
   ========================================================================== */
.toast-host{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:200; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast{
  pointer-events:auto; min-width:260px; max-width:340px; background:var(--navy-800); color:#fff; border-radius:12px;
  padding:14px 16px; font-size:14px; box-shadow:0 30px 80px -30px rgba(10,27,56,.6);
  display:flex; align-items:flex-start; gap:10px; transform:translateY(12px); opacity:0;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast.error{ background:#7A2222; }
.toast svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; color:var(--verify-300); }
.toast.error svg{ color:#FFB3B3; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:linear-gradient(180deg,var(--navy-800) 0%, var(--navy-700) 60%, var(--navy-600) 100%); color:#fff; }
.footer-top{ display:grid; gap:2.5rem; padding-bottom:3.5rem; border-bottom:1px solid rgba(255,255,255,.1); }
@media (min-width:1024px){ .footer-top{ grid-template-columns:5fr 7fr; } }
.footer-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
@media (min-width:768px){ .footer-cols{ grid-template-columns:repeat(4,1fr); } }
.footer-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.5); font-weight:700; }
.footer-col ul{ margin-top:1rem; display:flex; flex-direction:column; gap:.75rem; }
.footer-col a{ font-size:14px; color:rgba(255,255,255,.8); transition:color var(--dur) var(--ease); }
.footer-col a:hover{ color:#fff; }
.footer-blurb{ margin-top:1.25rem; font-size:15px; color:rgba(255,255,255,.7); line-height:1.6; max-width:30rem; }
.footer-form{ margin-top:1.75rem; display:flex; gap:8px; max-width:30rem; }
.footer-form input{
  flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); border-radius:10px;
  padding:13px 14px; font-size:14px; color:#fff;
}
.footer-form input::placeholder{ color:rgba(255,255,255,.4); }
.footer-form button{ flex-shrink:0; }
.footer-bottom{ padding-top:2rem; display:flex; flex-direction:column; gap:1.25rem; align-items:flex-start; justify-content:space-between; }
@media (min-width:768px){ .footer-bottom{ flex-direction:row; align-items:center; } }
.social-row{ display:flex; gap:10px; }
.social-row a{
  width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; transition:border-color var(--dur) var(--ease);
}
.social-row a:hover{ border-color:var(--verify-400); }
.social-row svg{ width:16px; height:16px; }

/* ==========================================================================
   Misc
   ========================================================================== */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--navy-800); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:100;
}
.skip-link:focus{ left:0; }

/* Video modal */
.modal-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(6,17,42,.9); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:1rem;
}
.modal-overlay.open{ display:flex; }
.modal-close{
  position:absolute; top:1.25rem; right:1.25rem; background:none; border:none; color:rgba(255,255,255,.8);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ color:#fff; }
.modal-close svg{ width:28px; height:28px; }
.modal-body{ width:100%; max-width:960px; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -30px rgba(10,27,56,.6); aspect-ratio:16/9; background:#000; }
.modal-body iframe, .modal-body video{ width:100%; height:100%; border:0; }

/* Section divider helper */
.divider{ height:1px; background:var(--border); }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Sticky nav offset for in-page anchors */
[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }