/* ===========================
   Brand tokens
   =========================== */
:root {
  --teal: #9BD4C7;        /* Primary */
  --navy: #01335B;        /* Secondary */
  --yellow: #FFC940;      /* Accent 1 */
  --light-blue: #96BCDC;  /* Accent 2 */
  --soft-red: #EB827B;    /* Accent 3 */
  --red: #EE423C;         /* Accent 4 */
  --gray-200: #D9D9D9;    /* Accent 5 */
  --gray-600: #8C8C8C;    /* Accent 6 */

  --bg: #ffffff;
  --text: #0b2239;
  --muted: #5b6c80;
  --card: #f7fafb;
  --ring: rgba(1, 51, 91, 0.15);
}

/* ===========================
   Resets / Base
   =========================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
}

a { color: var(--navy); }

/* ===========================
   Header
   =========================== */
.trust-header { border-bottom: 1px solid rgba(0,0,0,.06); background: #fff; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.header-inner { display: flex; align-items: center; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo img { height: 36px; width: auto; display: block; }
.spacer { flex: 1; }
.top-link {
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  background: var(--yellow);
  border: 1px solid transparent;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 1px 10px rgba(1,51,91,.06);
  transition: transform .02s ease-in-out, box-shadow .2s ease, filter .15s ease;
}
.top-link:hover { filter: brightness(0.95); box-shadow: 0 2px 14px rgba(1,51,91,.18); }

/* ===========================
   Hero (2-column, mobile-first)
   =========================== */
.hero {
  padding: 48px 16px;
  background: linear-gradient(120deg, rgba(155,212,199,.25), rgba(150,188,220,.18));
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.hero h1 { margin: 0 0 8px; font-size: clamp(28px, 3.6vw, 44px); color: var(--navy); letter-spacing: .3px; }
.hero p { margin: 0; max-width: 70ch; color: var(--muted); }
.hero-actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;      /* stack on mobile */
  gap: 24px;
  align-items: center;
}
.hero-col { min-width: 0; }

/* Badges panel (right column) */
.badges-panel {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 0;
}
.badge-img { height: 65px; width: auto; display: inline-block; }
.badge-img.sm { height: 45px; }
.badge-img.xl { height: clamp(40px, 6vw, 100px); }  /* scales up on larger screens */

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.2fr 0.8fr; }  /* text | badges */
  .badges-panel { justify-content: flex-end; }        /* push badges to the right */
}
.badge-row { float: right; }
/* ===========================
   Buttons
   =========================== */
.btn {
  appearance: none;
  border: 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .02s ease-in-out, box-shadow .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 1px 10px rgba(1,51,91,.06);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { box-shadow: 0 2px 14px rgba(1,51,91,.18); }
.btn-ghost { background: #fff; color: var(--navy); border: 1px solid rgba(1,51,91,.18); }
.btn-ghost:hover { background: var(--teal); border-color: transparent; }

/* ===========================
   Layout / Sections
   =========================== */
main { padding: 32px 16px 64px; }
section { margin: 32px 0; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card {
  grid-column: span 12;
  background: var(--card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(1,51,91,.04);
}
.card h2 { margin: 0 0 6px; font-size: clamp(18px, 2.2vw, 22px); color: var(--navy); }
.card p { margin: 6px 0 0; color: var(--muted); }

@media (min-width: 800px) {
  .card--half { grid-column: span 6; }
  .card--third { grid-column: span 4; }
}

/* ===========================
   Policies (summaries only)
   =========================== */
.policy-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 12px; }
.policy {
  grid-column: span 12;
  background: #fff;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.policy h3 { margin: 0; font-size: 16px; color: var(--text); }
.policy p { margin: 6px 0 0; color: var(--muted); max-width: 65ch; }
@media (min-width: 800px) { .policy { grid-column: span 6; } }

/* ===========================
   SOC2 / HIPAA
   =========================== */
#soc2 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
#soc2 > .card { grid-column: span 12; }

/* HubSpot form wrapper */
.hs-form-wrap { margin-top: 12px; }
.hs-form-frame { min-height: 480px; display: block; }
.hs-form-wrap iframe {
  width: 100% !important;
  border: 0 !important;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(1,51,91,.06);
}

/* ===========================
   Footer
   =========================== */
footer {
  color: #fff;
  position: relative;
  background: linear-gradient(225deg, #021728 0%, #01335B 100%);
  overflow: hidden;
  isolation: isolate;
  min-height: 96px;
  border-top: 4px solid var(--teal);
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-links a { color: #fff; text-decoration: none; font-weight: 700; }
.footer-links a:hover { text-decoration: underline; }

/* ===========================
   Utilities / A11y
   =========================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}