/* ===== Design tokens ===== */
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-body: 16px;
  --lh-body: 1.5;
  --fs-h1: clamp(2.2rem, 3.2vw + 1rem, 3.2rem);
  --fs-h2: clamp(1.6rem, 1.6vw + 1rem, 2rem);
  --fs-h3: 1.5rem;

  --brand: #005a9c;
  --brand-600: #003d69;
  --accent: #e87722;

  --text: #222;
  --text-2: #555;
  --bg: #fff;
  --bg-alt: #f4f7f9;
  --border: #dce1e6;
  --active-bg: rgba(0, 90, 156, 0.14); /* subtle but visible tint for active nav */

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #eaeaea;
    --text-2: #b9c0c7;
    --bg: #0b0f14;
    --bg-alt: #0f141a;
    --border: #26303a;
    --brand: #5fb0ff;
    --brand-600: #3a86c7;
    --accent: #ff9b4b;
    --active-bg: rgba(95, 176, 255, 0.22);
    color-scheme: dark;
  }
}

/* ===== Base ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ul {
  list-style: none;
}

/* Code styles */
code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}
code {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: 6px;
  font-size: 0.92rem; /* slightly smaller inline code */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal; /* allow wrapping */
}
pre {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  overflow: auto;
  line-height: 1.5;
  white-space: pre-wrap; /* wrap long lines */
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 0.9rem; /* smaller block code */
}
pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}
h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
p {
  margin-bottom: var(--space-2);
  color: var(--text-2);
}

/* Screen reader helpers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-2);
  background: var(--brand);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: var(--space-2);
}
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ===== Layout ===== */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}
section {
  padding: var(--space-8) 0;
}
.text-center {
  text-align: center;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid transparent;
  padding: 10px 18px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    transform 0.06s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--brand-600);
  color: #fff;
  text-decoration: none;
}
.btn-secondary {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--brand);
  color: #fff;
  text-decoration: none;
}

/* ===== Header ===== */
.global-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) 0;
  transition: box-shadow 0.2s ease;
}
.global-header.is-sticky {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.logo-img {
  display: block;
  height: 56px; /* make logo more prominent and consistent */
  max-height: 56px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

.logo-link {
  display: inline-flex;
  align-items: center;
}

.main-nav ul {
  display: flex;
  gap: var(--space-3);
}
.main-nav a {
  color: var(--text);
  font-weight: 600;
  padding: var(--space-1) 0;
}

/* Current page highlight */
.main-nav a.is-active,
.main-nav a[aria-current="page"] {
  background: var(--active-bg);
  border-radius: 8px;
  padding: 8px 10px; /* add horizontal padding for chip-like look */
}
.header-actions {
  display: flex;
  gap: var(--space-2);
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--text-2);
  color: var(--text);
  font-size: 1.5rem;
  padding: 0 var(--space-1);
  border-radius: 6px;
}

/* ===== Footer ===== */
.global-footer {
  background: #1d2430;
  color: #e7ebf0;
  padding-top: var(--space-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}
.footer-col h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: var(--space-2);
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.footer-col a {
  color: #c9d3dc;
}
.footer-col a:hover {
  color: #fff;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: var(--space-4);
  padding: var(--space-3) 0;
  text-align: center;
  color: #a9b5c0;
}
.footer-bottom p {
  margin: 0;
}

/* ===== Homepage sections ===== */
/* Hero */
.hero-section {
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
  background:
    radial-gradient(900px 360px at 50% -40%, rgba(0,90,156,0.14), transparent 70%);
}
.hero-content { max-width: 820px; margin-inline: auto; }

/* Modern split hero */
.hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}
.hero-copy h1 { margin-bottom: var(--space-2); }
.hero-copy .subhead { margin-bottom: var(--space-3); text-align: left; }
.hero-copy .mini-scanner { justify-content: flex-start; }
/* Free Scan dedicated section */
.scan-cta { background: transparent; padding-top: var(--space-3); padding-bottom: var(--space-5); }
.scan-card {
  max-width: 980px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  padding: var(--space-3);
}
.scan-card .mini-scanner { justify-content: center; margin-top: 0; }
.scan-card .mini-scanner{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.scan-card .mini-scanner input[type="url"]{ min-width: 380px; }
.note-badges{ display:inline-flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-start; margin-top:0; margin-left:12px; }
.badge-note{ display:inline-flex; align-items:center; gap:6px; font-size:.9rem; color:#0b4a7a; background:#e9f3ff; border:1px solid #cfe2ff; padding:6px 10px; border-radius:999px; white-space:nowrap; }
.quick-benefits { display:flex; gap:18px; padding:0; list-style:none; color: var(--text-2); margin: 6px 0 0; }
.quick-benefits li::before{ content:"✔"; color: var(--brand); margin-right:6px; }

.hero-visual {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--space-3);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.hero-visual .badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.badge { font-size: .8rem; border:1px solid var(--border); padding:4px 8px; border-radius:999px; color: var(--text-2); }
.hero-visual .panel {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: var(--space-2);
  background: var(--bg-alt);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.04),
    rgba(0,0,0,0.04) 1px,
    transparent 1px,
    transparent 16px
  );
}
.bars { display:flex; gap:8px; align-items:flex-end; height:80px; margin-top:8px; }
.bar { width:16px; border-radius:4px; opacity:.9; }
.bar--critical { background:#c61a09; }
.bar--major { background:#e6881a; }
.bar--minor { background:#38a169; }
.bar--info { background:#3b82f6; }
.h-35{ height:35%; }
.h-50{ height:50%; }
.h-60{ height:60%; }
.h-85{ height:85%; }
.legend { display:flex; gap:12px; align-items:center; margin-top:8px; padding-left:0; list-style:none; color: var(--text-2); }
.legend li{ display:flex; align-items:center; gap:6px; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.critical{ background:#c61a09; }
.dot.major{ background:#e6881a; }
.dot.minor{ background:#38a169; }
.dot.info{ background:#3b82f6; }
.bar:nth-child(2){ height:60% }
.bar:nth-child(1){ height:30% }
.bar:nth-child(3){ height:80% }
.bar:nth-child(4){ height:45% }

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy .mini-scanner { justify-content: center; }
}

/* Sticky CTA */
.sticky-cta {
  position: sticky;
  top: 0;
  z-index: 998;
  background: rgba(11, 15, 20, 0.85);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 8px 0;
}
.sticky-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sticky-cta .btn-primary { background: #fff; color: #0b5a9c; }
.sticky-cta .btn-primary:hover { background: #e9eef4; }
.sticky-cta-text { font-weight: 600; }
.subhead {
  font-size: 1.125rem;
  color: var(--text-2);
  margin-bottom: var(--space-4);
}
.mini-scanner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.mini-scanner input[type="url"] {
  min-width: 300px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}
/* Ensure anchor scrolling accounts for sticky header */
#mini-scanner { scroll-margin-top: 100px; }
.small-note {
  font-size: 0.875rem;
  color: var(--text-2);
  width: 100%;
  margin-top: var(--space-1);
}
.trust-row {
  margin-top: var(--space-4);
  padding: var(--space-3) 0;
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
  color: var(--text-2);
}
.trust-row p {
  margin: 0;
  font-weight: 600;
}
.trust-row .trust-heading {
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 10px;
}

/* Outcomes */
.outcomes-section {
  background: var(--bg-alt);
  padding: var(--space-6) 0;
}
.logo-wall { background: var(--bg-alt); padding: var(--space-3) 0; }
.logos { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.logo-pill { color:#374151; border:1px solid var(--border); background: #fff; padding:8px 14px; border-radius:999px; font-weight:700; box-shadow: 0 1px 0 rgba(0,0,0,0.03); }
/* Colorful chips */
.logos .logo-pill:nth-child(6n+1){ background: #eef5ff; border-color:#cfe2ff; color:#18427a; }
.logos .logo-pill:nth-child(6n+2){ background: #ecfdf5; border-color:#bbf7d0; color:#065f46; }
.logos .logo-pill:nth-child(6n+3){ background: #f5f3ff; border-color:#ddd6fe; color:#4c1d95; }
.logos .logo-pill:nth-child(6n+4){ background: #fff7ed; border-color:#fed7aa; color:#7c2d12; }
.logos .logo-pill:nth-child(6n+5){ background: #fdf2f8; border-color:#fbcfe8; color:#831843; }
.logos .logo-pill:nth-child(6n){ background: #ecfeff; border-color:#a5f3fc; color:#164e63; }
.grid-4-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-3);
}
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Free scan benefits */
.free-scan {}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.benefit {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 12px;
  padding: var(--space-3);
}
.benefit h3 { margin-bottom: 6px; }
.benefit p { margin: 0; }

/* Deep audit section */
.deep-audit { background: var(--bg-alt); }
.deep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-3);
}
.mock-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-3);
  min-height: 160px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* Product tour */
.product-tour {
  text-align: center;
}
.tabs-container {
  max-width: 900px;
  margin: var(--space-4) auto;
}
.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--space-4);
}
.tab-buttons button {
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.tab-buttons button[aria-selected="true"] {
  color: var(--brand);
  border-color: var(--brand);
}
.tab-panel {
  text-align: left;
  padding: var(--space-2);
  animation: fadeIn 0.35s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Social proof */
.social-proof-section {
  background: var(--brand-600);
  color: #fff;
  text-align: center;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.stat-number {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
}
.stat-label {
  color: #d4e2f0;
}

/* Use cases */
.use-cases-section {
  background: var(--bg-alt);
  text-align: center;
}
.grid-5-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.card-link {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-3);
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.card-link h3 {
  color: var(--brand);
}
.card-link p {
  color: var(--text-2);
  margin: 0;
}

/* Pricing teaser */
.pricing-teaser {
  text-align: center;
}

/* Security */
.security-section {
  background: var(--bg-alt);
  text-align: center;
  padding: var(--space-4) 0;
}
.security-section h3 {
  display: inline;
  margin-right: var(--space-2);
}
.security-section p {
  display: inline;
  margin: 0;
}

/* Final CTA */
.final-cta-section {
  background: var(--accent);
  color: #fff;
  text-align: center;
}
.final-cta-section h2 {
  color: #fff;
}
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.final-cta-section .btn-primary {
  background: #fff;
  color: var(--brand);
}
.final-cta-section .btn-primary:hover {
  background: #f1f1f1;
}
.final-cta-section .btn-secondary {
  border-color: #fff;
  color: #fff;
}
.final-cta-section .btn-secondary:hover {
  background: #fff;
  color: var(--brand);
}

/* Mobile nav */
@media (max-width: 920px) {
  .nav-toggle {
    display: inline-block;
  }
  .header-actions {
    display: none;
  }
  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: var(--space-2) var(--space-3);
  }
  .main-nav[hidden] {
    display: none;
  }
  .main-nav ul {
    display: grid;
    gap: var(--space-2);
  }
}
@media (min-width: 921px) {
  .main-nav {
    display: block !important;
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}

/* ===== Menu fixes (drop-in overrides) ===== */

.main-nav ul {
  gap: 18px;
}
.main-nav a {
  white-space: nowrap; /* keep each item on one line */
  padding: 8px 0; /* slightly shorter */
  font-size: 1rem; /* keep comfortable size */
}

/* Make header CTAs single-line and slimmer */
.header-actions .btn {
  white-space: nowrap;
}
.btn {
  display: inline-flex; /* perfectly center the text */
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  padding: 9px 14px; /* smaller default button */
  border-radius: 10px;
}
.btn-primary {
  padding: 10px 16px;
}
.btn-secondary {
  padding: 9px 14px;
}

/* Slightly condense the whole header on large screens */
.global-header {
  padding: 10px 0;
}

/* Responsive tweaks just before the mobile breakpoint */
@media (max-width: 1200px) and (min-width: 921px) {
  .main-nav ul {
    gap: 14px;
  }
  .main-nav a {
    font-size: 0.97rem;
  }
  .header-actions .btn {
    padding: 8px 12px;
  }
}

/* Mobile behavior unchanged; menu collapses at 920px */

/* Contact form layout */
.contact-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.contact-form .form-group.full-width {
  grid-column: 1 / -1;
}

.contact-form label {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid #c7cdd3;
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: #111;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #9aa3ad;
}

/* Error state (optional JS toggles aria-invalid) */
.contact-form [aria-invalid="true"] {
  border-color: #b3261e;
  outline-color: #b3261e;
}

/* Success panel */
.form-success {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: #f5faf6;
  border-left: 4px solid #1e7f3e;
}

/* Toast variant for transient messages */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  background: #ffffff;
  border: 1px solid var(--border);
  border-left: 4px solid #1e7f3e;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  border-radius: 12px;
  width: min(92vw, 520px);
}
@media (prefers-color-scheme: dark) {
  .toast { background: #0f141a; }
}

/* Responsive: stack fields on small screens */
@media (max-width: 720px) {
  .contact-form .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Sign-in form refinement */
.signin-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background: #f9fafb;
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.signin-form .form-group {
  display: flex;
  flex-direction: column;
}

.signin-form label {
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #1e1e1e;
}

.signin-form input[type="email"],
.signin-form input[type="password"] {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid #c7cdd3;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

.signin-form input:focus {
  outline: 2px solid #1d4ed8;
  outline-offset: 1px;
}

/* Remember me + forgot password layout */
.signin-form .form-group.inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.signin-form .form-group.inline label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}

.signin-form .small-link {
  color: #0a4ea1;
  text-decoration: none;
  font-size: 0.95rem;
}
.signin-form .small-link:hover,
.signin-form .small-link:focus {
  text-decoration: underline;
}

/* Button improvements */
.signin-form .btn.full-width {
  width: 100%;
  padding: 0.9rem;
  font-size: 1rem;
  border-radius: 8px;
}

/* Subtext + links */
.signin-form .muted {
  color: #555;
  font-size: 0.95rem;
  text-align: center;
}

.signin-form p:last-of-type {
  margin-top: 1.2rem;
  text-align: center;
}

.signin-form p a {
  color: #0a4ea1;
  font-weight: 500;
  text-decoration: none;
}
.signin-form p a:hover,
.signin-form p a:focus {
  text-decoration: underline;
}

/* PRICING: make plan cards equal height and align CTAs */
section[aria-labelledby="plans"] .grid-4-col {
  align-items: stretch; /* ensure all children stretch to the same row height */
}

.plan-card {
  display: flex; /* stack content vertically */
  flex-direction: column;
  height: 100%; /* take full column height */
}

/* Let the middle content expand; push CTAs to the bottom */
.plan-card .feature-list {
  margin-top: var(--space-1);
  flex: 1 1 auto; /* absorb free space so buttons sit at bottom */
}

/* Consistent CTA row */
.plan-card .cta-buttons {
  margin-top: auto; /* pin CTAs to the bottom edge */
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Tidy up spacing for price lines so headings line up better */
.plan-card .price {
  margin-top: 0.25rem;
}
.plan-card .muted {
  margin-top: 0.1rem;
}

/* Optional: make buttons equal width (looks polished) */
@media (min-width: 720px) {
  .plan-card .cta-buttons .btn {
    min-width: 9.5rem;
    justify-content: center;
  }
}

/* Card visual consistency */
.plan-card.card {
  padding-bottom: 1.25rem; /* ensure bottom padding is ample for the CTAs */
}

/* Resources page: search bar */
.search {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch; /* ensure equal heights */
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.search input[type="search"] {
  min-width: 360px;
  max-width: 640px;
  flex: 1 1 420px; /* grow but cap nicely */
  height: 44px; /* matches button */
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}

.search .btn {
  height: 44px; /* same visual height */
  padding: 0 20px; /* balanced look */
  border-radius: 12px;
}

/* Small screens: stack neatly */
@media (max-width: 520px) {
  .search {
    align-items: center;
  }
  .search input[type="search"],
  .search .btn {
    flex: 1 1 100%;
  }
}

/* ---------- Card alignment (all sections) ---------- */
/* Make every card occupy full column height */
.grid-4-col {
  align-items: stretch;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Keep buttons consistent and pinned to the bottom of cards */
.card .btn {
  align-self: flex-start;
}
.card .btn:last-child,
.card .cta-buttons:last-child,
.card .card-actions:last-child {
  margin-top: auto;
}

/* Optional: slightly tighter paragraph spacing inside cards */
.card p {
  margin-top: 0.5rem;
}

/* ---------- Resources page: search bar ---------- */
.search {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch; /* equal heights */
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.search input[type="search"] {
  min-width: 320px;
  max-width: 640px;
  flex: 1 1 420px;
  height: 44px; /* matches button */
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}

.search .btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
}

/* ---------- Newsletter form ---------- */
.newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* equal heights */
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.newsletter input[type="email"] {
  min-width: 280px;
  flex: 1 1 360px;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}

.newsletter .btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
}

/* Stack neatly on small screens */
@media (max-width: 560px) {
  .search input[type="search"],
  .search .btn,
  .newsletter input[type="email"],
  .newsletter .btn {
    flex: 1 1 100%;
  }
}
/*
===============================================================================
CSS MAP (for future React/Vite split)
-------------------------------------------------------------------------------
Design tokens
  - Root CSS variables, color-scheme: :root, @media (prefers-color-scheme:dark)
Base + helpers
  - Reset, typography, a:hover, headings, .sr-only, .skip-link, :focus-visible
  - Layout helpers: .container, section spacing, .text-center
Buttons
  - .btn, .btn-primary, .btn-secondary (states)
Header / Navigation
  - .global-header, .nav-container, .logo-img/.logo-link
  - .main-nav (+ mobile), .nav-toggle, current-page: .is-active/[aria-current]
Footer
  - .global-footer, .footer-grid, .footer-col, .footer-bottom
Homepage sections (index.html)
  - Hero (modern split): .hero-section, .hero-grid, .hero-copy, .hero-visual
    - Badges: .badge; Bars: .bars .bar--critical|major|minor|info (+ .h-xx)
  - Trust row + logo chips: .trust-row, .trust-heading, .logos, .logo-pill
  - Free Scan card: .scan-cta, .scan-card, .mini-scanner, .note-badges
  - Outcomes grid: .outcomes-section, .grid-4-col, .card
  - Product tour tabs: .product-tour, .tabs-container, .tab-buttons, .tab-panel
  - Social proof: .social-proof-section, .stats-grid, .stat-number/.stat-label
  - Use cases: .use-cases-section, .grid-5-col, .card-link
  - Pricing teaser, Security, Final CTA: .pricing-teaser, .security-section,
    .final-cta-section (.cta-buttons overrides)
Sticky CTA (home only)
  - #sticky-cta .sticky-cta, .sticky-cta-row, .sticky-cta-text
Developers page
  - Code styles: code, pre, pre code (wrapping + monospace)
Contact page
  - Contact form layout: .contact-form .form-grid, inputs/select/textarea
  - Success banner + states: .form-success (JS toggles [hidden])
Utilities
  - Mobile nav queries, responsive tweaks, contact/sign-in specific blocks

Notes
  - Hidden elements rely on `[hidden]{display:none!important}` below.
  - When migrating to React, move tokens/base/layout to global CSS; co-locate
    component styles (Header, Nav, Buttons, Cards, Forms) as CSS Modules.
===============================================================================
*/