@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --ink: #14161F;
  --bg: #F4F5F8;
  --indigo: #372F72;
  --accent: #D9A441;
  --white: #FFFFFF;
  --line: #DDE0E8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html { scroll-padding-top: 100px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2, h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Nav */
.nav {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; }
.logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
}
.logo span { color: var(--indigo); }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; }
.nav-cta {
  background: var(--ink);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

/* Mobile nav toggle: hidden checkbox + label, not a <details>.
   .nav-links stays completely untouched by default (the unconditional rule
   above still applies at every width) — the checkbox/label pair is inert
   until the mobile media query gives it a role. This avoids relying on any
   native browser behavior tied to <details>/[open], which proved unreliable
   across browsers. */
.nav-toggle-input { display: none; }
.nav-toggle-label {
  display: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
}
.nav-toggle-label::after { content: '+'; margin-left: 6px; color: var(--indigo); }
.nav-toggle-input:checked ~ .nav-toggle-label::after { content: '\2212'; }

/* Hero */
.hero {
  padding: 96px 0 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: 48px;
  max-width: 11ch;
}
.hero p.lede {
  margin-top: 20px;
  font-size: 18px;
  max-width: 42ch;
  color: #454A5B;
}
.hero-actions { margin-top: 32px; display: flex; gap: 14px; align-items: center; }
.btn-primary {
  background: var(--ink);
  color: var(--white);
  padding: 14px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
}
.btn-primary.accent { background: var(--indigo); }
.btn-ghost {
  padding: 14px 20px;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  border-bottom: 1px solid var(--ink);
}

/* Loop motif */
.loop-motif { width: 100%; height: auto; }

/* Value props */
.values {
  padding: 64px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.value h2 { font-size: 19px; margin-bottom: 10px; }

/* Breadcrumb */
.breadcrumb { padding: 24px 0 0; font-size: 13px; color: #7B8094; }
.breadcrumb a { color: #7B8094; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .current { color: var(--ink); }
.value p { font-size: 15px; color: #454A5B; }
.value .mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 18px;
}

/* Section: audience */
.audience {
  padding: 72px 0;
  background: var(--ink);
  color: var(--white);
}
.audience h2 { font-size: 30px; max-width: 20ch; margin-bottom: 16px; }
.audience p { color: #B9BDCC; max-width: 48ch; font-size: 16px; }
.audience-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.audience-card {
  border: 1px solid #2A2D3B;
  border-radius: 8px;
  padding: 28px;
}
.audience-card h4 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; margin-bottom: 8px; }
.audience-card p { font-size: 14px; color: #9CA0B0; }

/* CTA band */
.cta-band {
  padding: 80px 0;
  text-align: left;
}
.cta-band h2 { font-size: 32px; max-width: 16ch; }
.cta-band p { margin-top: 14px; color: #454A5B; max-width: 44ch; }
.cta-band .hero-actions { margin-top: 28px; }

/* Footer */
footer {
  border-top: 1px solid var(--line);
  padding: 32px 0;
  font-size: 14px;
  color: #7B8094;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.footer-brand, .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
footer a {
  color: var(--indigo);
  text-decoration: underline;
}

/* Trial / landing page specific */
.trial-hero {
  padding: 80px 0 56px;
  text-align: left;
}
.trial-hero h1 { font-size: 42px; max-width: 15ch; }
.trial-hero p.lede { margin-top: 18px; font-size: 17px; max-width: 46ch; color: #454A5B; }

.trial-layout {
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}
.trial-points { list-style: none; }
.trial-points li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  font-size: 15px;
}
.trial-points li:first-child { padding-top: 0; }
.trial-points .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--indigo);
  margin-top: 7px;
  flex-shrink: 0;
}
.trial-proof { margin-top: 24px; font-size: 14px; color: #7B8094; }
.trial-proof a { color: var(--indigo); text-decoration: underline; }

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px;
}
.form-card h3 { font-size: 18px; margin-bottom: 6px; }
.form-card p.sub { font-size: 14px; color: #7B8094; margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.field input:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
}
.form-card .btn-primary { width: 100%; margin-top: 6px; }
.form-note { margin-top: 14px; font-size: 12px; color: #9CA0B0; }

.demo-banner {
  background: var(--ink);
  color: #C9CCDA;
  font-size: 13px;
  text-align: center;
  padding: 10px 16px;
}
.demo-banner strong { color: var(--white); }

.field input:disabled {
  background: #F1F2F5;
  color: #9CA0B0;
  cursor: not-allowed;
}
.btn-primary:disabled {
  background: #B9BDCC;
  cursor: not-allowed;
}

/* Article pages (SEO content) */
.article { padding: 96px 0 64px; max-width: 720px; }
.article h1 { font-size: 40px; margin-bottom: 20px; }
.article .lede-intro { font-size: 18px; color: #454A5B; margin-bottom: 40px; }
.article h2 { font-size: 26px; margin: 40px 0 16px; }
.article p { font-size: 16px; color: #2A2D3B; margin-bottom: 16px; }
.article a:not(.btn-primary) { color: var(--indigo); text-decoration: underline; }
.article-cta {
  margin: 48px 0; padding: 32px;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
}
.article-faq { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 32px; }

/* Standalone FAQ block (trial page): the article layout's own 64px bottom
   padding isn't present here, so this framed variant gets its own top and
   bottom border plus margin, instead of relying on the footer's border for
   closure. */
.trial-faq {
  margin-top: 56px;
  margin-bottom: 64px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Resources hub */
.resources-hero { padding: 96px 0 48px; }
.resources-hero h1 { font-size: 40px; margin-bottom: 16px; }
.resources-hero p { font-size: 18px; color: #454A5B; max-width: 60ch; }
.resources-list { padding-bottom: 96px; }

/* Category accordion: native <details>/<summary>, same pattern as the FAQ
   blocks. No JS, works the same way on desktop and mobile, keyboard and
   screen-reader accessible by default. */
.resource-group {
  border-top: 1px solid var(--line);
}
.resource-group:last-child { border-bottom: 1px solid var(--line); }
.resource-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  transition: background 0.1s ease;
}
.resource-group summary:hover { background: var(--line); }
.resource-group summary::-webkit-details-marker { display: none; }
.resource-group summary::marker { content: ''; }
.resource-group summary h2 { font-size: 22px; margin: 0; }
.resource-group summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 600;
  color: var(--indigo);
  flex-shrink: 0;
  margin-left: 16px;
  line-height: 1;
}
.resource-group[open] summary::after { content: '\2212'; }

.resource-cards { display: grid; gap: 24px; padding-bottom: 32px; }
.resource-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 24px;
  text-decoration: none; color: inherit; display: block;
}
.resource-card .tag { font-size: 13px; color: var(--indigo); font-weight: 600; margin-bottom: 8px; display: block; }
.resource-card h3 { font-size: 19px; margin-bottom: 8px; }
.resource-card p { font-size: 15px; color: #454A5B; }

/* Solutions dropdown in nav (replaces the old "Who it's for" anchor) */
.nav-dropdown { position: relative; }
.nav-dropdown-label {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.nav-dropdown-label::after { content: ' \25BE'; font-size: 11px; }
.nav-dropdown-menu { list-style: none; margin-top: 8px; }
.nav-dropdown-menu a { text-decoration: none; font-size: 15px; font-weight: 500; }

@media (min-width: 861px) {
  .nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 0 8px;
    min-width: 170px;
    box-shadow: 0 8px 24px rgba(20, 22, 31, 0.08);
  }
  .nav-dropdown-menu li { padding: 0; }
  .nav-dropdown-menu a { display: block; padding: 8px 16px; }
  .nav-dropdown-menu a:hover { background: var(--line); }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    display: block;
  }
}

@media (max-width: 860px) {
  .hero, .trial-layout, .audience-grid, .values { grid-template-columns: 1fr; }
  .hero h1, .trial-hero h1 { font-size: 26px; max-width: none; }
  .hero.wrap, .trial-hero.wrap, .values.wrap, .faq-section.wrap, .cta-band.wrap, .resources-hero.wrap, .article.wrap { padding-left: 40px; padding-right: 40px; }
  .audience .wrap { padding-left: 40px; padding-right: 40px; }
  .faq-section h2 { font-size: 26px; }
  .cta-band h2 { font-size: 26px; max-width: none; }
  .audience h2 { font-size: 24px; max-width: none; }
  .resources-hero h1 { font-size: 28px; }
  .article h1 { font-size: 28px; }

  .nav .wrap { flex-wrap: wrap; justify-content: flex-start; gap: 16px; }
  .nav-toggle-label { display: block; order: 2; margin-left: auto; padding: 10px 4px; min-height: 24px; }
  .nav-cta { order: 3; }
  .nav-links {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
  }
  .nav-toggle-input:checked ~ .nav-links { display: flex; }

  .nav-dropdown-menu { padding-left: 16px; margin-top: 4px; }
  .nav-dropdown-menu li { padding: 4px 0; }
}