/* ============================================================
   UnicornHunt Marketing — Deep Navy / Electric Blue Theme
   Mirrors unicornhunt-classic tokens
   ============================================================ */

:root {
  /* Brand */
  --bg: hsl(230 65% 8%);              /* #070C22 */
  --bg-soft: hsl(230 50% 11%);
  --card: hsl(230 35% 12%);
  --card-elevated: hsl(230 30% 15%);
  --border: hsl(230 30% 18%);
  --border-strong: hsl(230 30% 24%);
  --muted: hsl(230 30% 16%);
  --fg: hsl(222 33% 97%);
  --fg-muted: hsl(222 14% 70%);
  --fg-subtle: hsl(222 12% 55%);

  --primary: hsl(226 100% 65%);       /* electric blue */
  --primary-hover: hsl(226 100% 70%);
  --primary-press: hsl(226 100% 60%);
  --primary-fg: hsl(230 65% 8%);

  --accent-cyan: hsl(190 95% 60%);
  --accent-violet: hsl(252 80% 70%);
  --accent-emerald: hsl(153 80% 55%);
  --accent-amber: hsl(42 100% 60%);
  --accent-pink: hsl(320 75% 70%);

  --success: hsl(153 70% 50%);
  --warning: hsl(42 95% 60%);
  --danger: hsl(350 100% 65%);

  /* Type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Radii */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadows */
  --shadow-1: 0 1px 0 hsl(230 50% 4% / 0.6), 0 0 0 1px hsl(230 30% 18% / 0.6);
  --shadow-2: 0 8px 24px -8px hsl(230 80% 4% / 0.5), 0 0 0 1px hsl(230 30% 22% / 0.5);
  --shadow-glow: 0 12px 40px -8px hsl(226 100% 65% / 0.35);

  /* Layout */
  --gutter: 18px;
  --maxw: 1200px;
  --pad-x: clamp(20px, 4vw, 48px);

  /* Type scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-hero: clamp(40px, 6vw, 72px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, hsl(226 100% 65% / 0.10), transparent 60%),
    radial-gradient(900px 600px at 0% 30%, hsl(252 80% 60% / 0.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.6em;
  font-weight: 700;
}
h1 { font-size: var(--text-hero); }
h2 { font-size: clamp(28px, 4vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 1em; color: var(--fg-muted); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: hsl(230 60% 7% / 0.7);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: var(--text-lg);
  color: var(--fg);
}
.brand img { height: 30px; width: auto; }
/* The header/footer lockup is composed, not a baked image. A pre-rendered
   lockup carries a fixed intrinsic width measured against the exporter's font;
   the live page renders Inter, which is wider, so the last letters of the
   wordmark were being clipped. The mark below is a square SVG applied as a
   CSS mask - it takes its colour from the surrounding text, so one file serves
   light and dark, and the wordmark is real text laid out by the browser, so it
   can never be cropped at any size or zoom. The path is relative to this
   stylesheet, so it resolves identically from / and /pages/. */
.brand { text-decoration: none; }
.brand__mark {
  flex: 0 0 auto;
  display: block;
  width: 30px;
  height: 30px;
  background-color: currentColor;
  -webkit-mask: url("../images/unicornhunt-mark.svg") center / contain no-repeat;
  mask: url("../images/unicornhunt-mark.svg") center / contain no-repeat;
}
.brand__name {
  font-weight: 900;
  font-size: 23px;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
  color: currentColor;
}
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav a {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}
.nav a:hover { color: var(--fg); }
.nav a.nav__ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
  position: relative;
}
.nav a.nav__ai::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(226 100% 65%), hsl(190 95% 60%));
  box-shadow: 0 0 0 3px hsl(226 100% 65% / 0.15);
}
.nav__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: hsl(226 100% 65% / 0.18);
  color: hsl(226 100% 75%);
  border: 1px solid hsl(226 100% 65% / 0.3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hamburger button (hidden on desktop, shown on mobile via media query) */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 22px;
  background: hsl(230 65% 6%);
  border-bottom: 1px solid var(--border);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a:not(.btn) {
  color: var(--fg);
  text-decoration: none;
  padding: 10px 4px;
  font-size: var(--text-base);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.mobile-nav a:not(.btn):last-of-type { border-bottom: 0; }
.mobile-nav .btn { justify-content: center; width: 100%; margin-top: 6px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 1px 0 hsl(226 100% 75%) inset, var(--shadow-glow);
}
.btn-primary:hover { background: var(--primary-hover); color: var(--primary-fg); }
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--card); border-color: var(--primary); color: var(--fg); }
.btn-lg { height: 48px; padding: 0 24px; font-size: var(--text-base); }

/* ===== Pills / chips ===== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: hsl(226 100% 65% / 0.1);
  color: hsl(226 100% 80%);
  border: 1px solid hsl(226 100% 65% / 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ===== Hero ===== */
.hero {
  padding: 80px 0 64px;
  text-align: center;
}
.hero h1 {
  margin: 18px auto 22px;
  max-width: 14ch;
}
.hero h1 .accent {
  background: linear-gradient(135deg, hsl(226 100% 70%), hsl(252 90% 75%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  max-width: 640px;
  margin: 0 auto 36px;
  font-size: var(--text-lg);
  color: var(--fg-muted);
}

/* ===== Stat row ===== */
.stat-row {
  display: grid;
  /* auto-fit rather than a fixed count, so a row lays out correctly whatever
     number of boxes a page has, without each page needing its own rule. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  max-width: 880px;
  margin: 0 auto 36px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 18px;
  text-align: center;
}
.stat--featured {
  background: linear-gradient(180deg, hsl(226 100% 65% / 0.18), hsl(226 100% 65% / 0.06));
  border-color: hsl(226 100% 65% / 0.5);
}
.stat .num {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.stat .label {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Rate-limit cards (API docs) */
.rate-card { text-align: left; }
.rate-card h3 { margin-bottom: 12px; }
.rate-card .rate-num {
  font-size: var(--text-2xl);
  color: var(--fg);
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.1;
  white-space: nowrap;
}
.rate-card .rate-unit {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  font-weight: 400;
  margin: 0;
}

/* ===== Email CTA ===== */
.email-cta {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
}
.email-cta input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font-size: var(--text-sm);
  padding: 0 12px;
  font-family: inherit;
}
.email-cta input::placeholder { color: var(--fg-subtle); }

.fineprint {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.fineprint span { display: inline-flex; align-items: center; gap: 6px; }
.fineprint .check { color: var(--success); }

/* ===== Section ===== */
.section {
  padding: 80px 0;
}
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-head h2 { margin-bottom: 14px; }
.section-head p { font-size: var(--text-lg); }

/* ===== Feature grid ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.feature:hover {
  transform: translateY(-3px);
  border-color: hsl(226 100% 65% / 0.5);
  background: var(--card-elevated);
}
.icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: hsl(226 100% 65% / 0.15);
  color: var(--primary);
  flex-shrink: 0;
}
.icon svg { width: 22px; height: 22px; flex-shrink: 0; }
.feature--violet .icon { background: hsl(252 80% 70% / 0.18); color: var(--accent-violet); }
.feature--emerald .icon { background: hsl(153 80% 55% / 0.18); color: var(--accent-emerald); }
.feature--amber  .icon { background: hsl(42 100% 60% / 0.18); color: var(--accent-amber); }
.feature--pink   .icon { background: hsl(320 75% 70% / 0.18); color: var(--accent-pink); }
.feature--cyan   .icon { background: hsl(190 95% 60% / 0.18); color: var(--accent-cyan); }
.feature h3 { font-size: var(--text-lg); margin-bottom: 8px; color: var(--fg); }
.feature p { color: var(--fg-muted); font-size: var(--text-sm); margin-bottom: 16px; }
.feature .more {
  font-size: var(--text-sm);
  color: var(--primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===== Testimonials ===== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testimonial {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
}
.stars { color: var(--accent-amber); margin-bottom: 14px; letter-spacing: 2px; }
.testimonial blockquote {
  margin: 0 0 22px;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg);
}
.tperson { display: flex; align-items: center; gap: 12px; }
.tperson .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, hsl(226 100% 65%), hsl(252 80% 70%));
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: var(--text-sm);
}
.tperson .name { font-weight: 600; color: var(--fg); }
.tperson .role { font-size: var(--text-xs); color: var(--fg-muted); }
.tperson .firm { color: var(--primary); font-size: var(--text-xs); }

/* ===== CTA banner ===== */
.cta-banner {
  background: linear-gradient(135deg, hsl(226 100% 60%) 0%, hsl(252 80% 65%) 100%);
  border-radius: var(--r-xl);
  padding: 64px 48px;
  text-align: center;
  margin: 0 auto;
  max-width: var(--maxw);
  box-shadow: var(--shadow-glow);
}
.cta-banner h2 { color: white; margin-bottom: 14px; }
.cta-banner p { color: hsl(0 0% 100% / 0.85); max-width: 560px; margin: 0 auto 24px; font-size: var(--text-lg); }
.cta-banner .pill-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
  margin-bottom: 28px;
  font-size: var(--text-sm);
  color: hsl(0 0% 100% / 0.92);
}
.cta-banner .pill-row span { display: inline-flex; align-items: center; gap: 6px; }
.cta-banner .btn-primary {
  background: white; color: hsl(226 70% 30%);
  box-shadow: 0 6px 16px hsl(0 0% 0% / 0.2);
}
.cta-banner .btn-primary:hover { background: hsl(0 0% 96%); color: hsl(226 70% 25%); }

/* Secondary CTA (ghost) inside any blue gradient block must remain readable. */
.cta-banner .btn-ghost,
.gradient-on-blue .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: hsl(0 0% 100% / 0.55);
}
.cta-banner .btn-ghost:hover,
.gradient-on-blue .btn-ghost:hover {
  background: hsl(0 0% 100% / 0.12);
  color: #fff;
  border-color: hsl(0 0% 100% / 0.9);
}
.cta-banner .btn { min-width: 160px; }
.cta-banner .btn-row,
.cta-banner > div[style*="display:flex"] { gap: 16px; }

/* Inputs inside blue gradient blocks must remain readable. */
.cta-banner input[type="email"],
.cta-banner input[type="text"] {
  background: hsl(0 0% 100% / 0.18) !important;
  border: 1px solid hsl(0 0% 100% / 0.55) !important;
  color: #fff !important;
}
.cta-banner input::placeholder {
  color: hsl(0 0% 100% / 0.7) !important;
}
.cta-banner input:focus {
  border-color: #fff !important;
  background: hsl(0 0% 100% / 0.25) !important;
  outline: none;
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--border);
  background: hsl(230 60% 6%);
  padding: 64px 0 32px;
  margin-top: 80px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
.footer-about p {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  max-width: 36ch;
  margin: 0;
}
.footer-about .strong { color: var(--fg); font-weight: 500; }
.footer-col h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); margin-bottom: 18px; color: var(--fg);
}
.footer-col h4::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-violet);
  box-shadow: 0 0 10px var(--accent-violet);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--fg-muted); font-size: var(--text-sm); }
.footer-col a:hover { color: var(--fg); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
  font-size: var(--text-xs); color: var(--fg-subtle);
}
.footer-bottom .links { display: flex; gap: 22px; }
.footer-bottom .links a { color: var(--fg-muted); }
.footer-bottom .meta { display: flex; align-items: center; gap: 18px; }
.footer-bottom .pill-status {
  display: inline-flex; align-items: center; gap: 6px;
  background: hsl(153 70% 40% / 0.15); color: hsl(153 80% 70%);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid hsl(153 70% 50% / 0.3);
}
.dot-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: hsl(153 70% 55%);
  box-shadow: 0 0 0 0 hsl(153 70% 55% / 0.7);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 hsl(153 70% 55% / 0.7); }
  70% { box-shadow: 0 0 0 8px hsl(153 70% 55% / 0); }
  100% { box-shadow: 0 0 0 0 hsl(153 70% 55% / 0); }
}

/* ===== Generic content pages ===== */
.page-head {
  padding: 80px 0 48px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.page-head .eyebrow { margin-bottom: 18px; }
.page-head h1 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 18px; }
.page-head p { font-size: var(--text-lg); color: var(--fg-muted); }

.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--pad-x) 80px;
}
.prose h2 { margin-top: 48px; font-size: var(--text-2xl); color: var(--fg); }
.prose h3 { margin-top: 32px; color: var(--fg); }
.prose p, .prose li { color: var(--fg-muted); }
.prose a { color: var(--primary); text-decoration: underline; text-decoration-color: hsl(226 100% 65% / 0.4); }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul li, .prose ol li { margin-bottom: 8px; }

.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
}
.card h3 { color: var(--fg); margin-bottom: 10px; font-size: var(--text-lg); }
.card p { color: var(--fg-muted); font-size: var(--text-sm); margin-bottom: 12px; }

/* Pricing */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-top: 40px;
  align-items: stretch;
}
.price-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.price-card.featured {
  border-color: hsl(226 100% 65% / 0.6);
  background: linear-gradient(180deg, hsl(226 100% 65% / 0.10), var(--card));
  box-shadow: var(--shadow-glow);
  position: relative;
  /* No margin-top — badge floats via absolute positioning so all 3 cards align flush at top */
}
/* Real DOM badge — was previously rendered via ::before but that collided with
   .tilt-card::before, causing the badge to balloon into a giant pill on hover. */
.price-card .popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--primary-fg);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px hsl(226 100% 50% / 0.45);
  z-index: 3;
  pointer-events: none;
}
.price-card .pname { font-size: var(--text-lg); font-weight: 600; color: var(--fg); }
.price-card .pamount { font-size: var(--text-3xl); font-weight: 700; color: var(--fg); letter-spacing: -0.02em; }
.price-card .pamount span { font-size: var(--text-base); color: var(--fg-muted); font-weight: 500; }
.price-card .pdesc { color: var(--fg-muted); font-size: var(--text-sm); }
.price-card ul { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.price-card ul li { color: var(--fg); font-size: var(--text-sm); display: flex; gap: 8px; align-items: flex-start; }
.price-card ul li::before {
  content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 4px;
  background: hsl(226 100% 65% / 0.2);
  border: 1px solid hsl(226 100% 65% / 0.5);
  border-radius: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235570FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* Logo strip / Trust row */
.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 40px; opacity: 0.7;
  margin: 24px 0 12px;
  color: var(--fg-muted);
  font-size: var(--text-sm);
}
.trust-strip span { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* Form */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: var(--text-sm); color: var(--fg); font-weight: 500; }
.form-field input, .form-field textarea, .form-field select {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; color: var(--fg); font: inherit; font-size: var(--text-sm); outline: none;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--primary); }
.form-field textarea { min-height: 110px; resize: vertical; }

/* FAQ */
.faq-list .faq-cat {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.faq-list .faq-cat:first-child { margin-top: 0; }
.faq-list details {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 18px 22px; margin-bottom: 12px;
}
.faq-list summary { cursor: pointer; font-weight: 600; color: var(--fg); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--primary); font-size: var(--text-xl); font-weight: 400; }
.faq-list details[open] summary::after { content: '–'; }
.faq-list details[open] { background: var(--card-elevated); }
.faq-list details p { margin-top: 12px; margin-bottom: 0; color: var(--fg-muted); font-size: var(--text-sm); }

/* Job listings */
.job-list { display: flex; flex-direction: column; gap: 12px; }
.job {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.job h3 { font-size: var(--text-base); margin-bottom: 4px; }
.job .meta { color: var(--fg-muted); font-size: var(--text-sm); display: flex; gap: 18px; flex-wrap: wrap; }
.job .meta span { display: inline-flex; align-items: center; gap: 6px; }
.job-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: hsl(226 100% 65% / 0.12); color: hsl(226 100% 80%);
  border: 1px solid hsl(226 100% 65% / 0.25);
  padding: 3px 9px; border-radius: 999px; font-size: var(--text-xs); font-weight: 500;
}

/* API code block */
pre.code {
  background: hsl(230 60% 6%); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 20px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px; line-height: 1.55; color: hsl(222 33% 92%);
  overflow-x: auto;
}
pre.code .k { color: hsl(252 80% 75%); }
pre.code .s { color: hsl(153 70% 70%); }
pre.code .c { color: var(--fg-subtle); }

/* Resource list */
.res-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.res-item {
  display: flex; gap: 14px; padding: 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.res-item:hover { border-color: hsl(226 100% 65% / 0.5); transform: translateY(-2px); }
.res-item .ricon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px;
  background: hsl(226 100% 65% / 0.15); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.res-item h4 { font-size: var(--text-sm); margin: 0 0 4px; color: var(--fg); }
.res-item p { font-size: var(--text-xs); margin: 0; color: var(--fg-muted); }

/* Press / press kit */
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.press-item {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px; display: flex; flex-direction: column; gap: 8px;
}
.press-item .src { color: var(--primary); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* Webinar card */
.webinar-card {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 18px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 12px;
}
.webinar-date {
  background: var(--bg-soft); border: 1px solid var(--border-strong);
  border-radius: 8px; text-align: center; padding: 10px;
}
.webinar-date .m { font-size: var(--text-xs); color: var(--primary); text-transform: uppercase; letter-spacing: 0.06em; }
.webinar-date .d { font-size: var(--text-2xl); font-weight: 700; color: var(--fg); line-height: 1; }
.webinar-card h3 { font-size: var(--text-base); margin-bottom: 4px; }
.webinar-card .meta { color: var(--fg-muted); font-size: var(--text-xs); }

/* Mobile */
@media (max-width: 980px) {
  .feature-grid, .feature-grid.cols-3, .price-grid, .testimonial-grid, .card-grid-2, .card-grid-3, .res-list, .press-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; }
  .header-cta { display: none; }
}
@media (max-width: 720px) {
  /* Scale the lockup down on narrow screens so it does not crowd the menu
     button. Mark and type shrink together so the proportions hold. */
  .brand__mark { width: 26px; height: 26px; }
  .brand__name { font-size: 20px; }

  .email-cta { flex-direction: column; padding: 10px; gap: 10px; }
  .email-cta input { padding: 10px 12px; }
  .email-cta .btn { width: 100%; height: 44px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  /* Odd number of boxes: let the last one span the full width instead of
     sitting alone in a half-width column. */
  .stat-row > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .feature-grid, .feature-grid.cols-3, .price-grid, .testimonial-grid, .card-grid-2, .card-grid-3, .res-list, .press-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .cta-banner { padding: 44px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .webinar-card { grid-template-columns: 70px 1fr; }
  .webinar-card .btn { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

.section--narrow { padding: 60px 0; }
hr.divider { border: 0; border-top: 1px solid var(--border); margin: 48px 0; }

/* Generic .more link (used outside .feature) */
.more {
  display: inline-block;
  margin-top: 14px;
  color: var(--primary);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
}
.more:hover { color: hsl(226 100% 75%); }

/* Webinar card override for vertical layout (block style) */
.webinar-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}
.webinar-card .webinar-date {
  display: inline-block;
  background: hsl(226 100% 65% / 0.12);
  border: 1px solid hsl(226 100% 65% / 0.3);
  color: hsl(226 100% 80%);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.webinar-card h3 { font-size: var(--text-lg); margin: 8px 0; color: var(--fg); }
.webinar-card p { color: var(--fg-muted); font-size: var(--text-sm); }

/* Form select element styling */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3acc2' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* Search input on Help Center */
input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
input[type="search"]:focus { border-color: var(--primary); }