/* Bettersight Intelligence — marketing homepage.
   Rebuilt against UI_DESIGN_THEME.md (Bettersight Brand System): dark-first
   navy-black base, single lime accent (no blue/cyan gradient), Archivo/
   Inter/JetBrains Mono type system. Structure (floating pill nav, dark
   hero, light content sections, dark stat/CTA bands, numbered steps,
   accordion FAQ, oversized footer wordmark) is unchanged from the previous
   pass — only the token system and component treatments were converted.

   Accent-on-light-surface note: the brand accent (#9FE838, a light
   yellow-green) reads poorly as body/label TEXT on a white or near-white
   background — it was legible as the old saturated blue but isn't at this
   luminance. Per this file's own single-accent philosophy, lime is used
   here as background tint / border / icon-fill / dot everywhere, and as
   full-strength text/icon color only on dark surfaces (hero, stat card,
   footer, final CTA) where the contrast is strong. Labels on light cards
   (team names, kickers, step numbers) use dark ink instead of lime text. */

:root {
  /* Accent — single brand color */
  --blue:    #9FE838;
  --blue-b:  #B8F94F;
  --cyan:    #9FE838; /* alias kept for continuity, equal to --blue in this single-accent system */

  /* Status colors — never brand accent */
  --green:   #10D98A;
  --green-l: #D4F9ED;
  --green-d: #059669;
  --amber:   #F79009;

  /* Background stack — dark surfaces */
  --navy:    #0A1420;
  --navy-2:  #0F1D2E;
  --navy-3:  #152838;

  /* Text on light surfaces */
  --t1: #0D1526;
  --t2: #2D3A52;
  --t3: #6B7A99;
  --t4: #9BA8C0;

  /* Text on dark surfaces */
  --w1: rgba(255,255,255,.94);
  --w2: rgba(255,255,255,.66);
  --w3: rgba(255,255,255,.42);
  --w4: rgba(255,255,255,.12);

  /* Borders */
  --border:   rgba(28,56,121,.11);
  --border-2: rgba(28,56,121,.18);
  --border-b: rgba(159,232,56,.28);

  /* Light surfaces */
  --surface:   #FFFFFF;
  --surface-2: #F8FAFD;
  --page:      #EEF1F6;

  /* Shadows — two levels only */
  --shadow:   0 2px 8px rgba(12,26,60,.06), 0 8px 28px rgba(12,26,60,.09), 0 0 0 1px rgba(28,56,121,.06);
  --shadow-h: 0 4px 16px rgba(12,26,60,.10), 0 16px 48px rgba(12,26,60,.13), 0 0 0 1px rgba(159,232,56,.18);

  --r: 14px;
  --fd: 'Archivo', sans-serif;
  --fb: 'Inter', sans-serif;
  --fm: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  background: var(--page);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── NAV — dark glass pill, consistent over both the dark hero and the
   light sections it floats above as the page scrolls ── */
.mkt-nav-outer {
  position: sticky; top: 16px; z-index: 50; padding: 0 20px;
  /* Cancels out .mkt-hero's own 24px horizontal padding, now that this
     sits inside that section — without this, the nav would be inset
     20px+24px per side instead of just its own 20px, narrower than
     intended */
  margin: 0 -24px;
}
.mkt-nav {
  max-width: 1120px;
  margin: 0 auto;
  background: rgba(15,29,46,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 100px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 20px;
}
.mkt-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.mkt-logo-mark {
  /* Unstyled per UI_DESIGN_THEME.md §5 — the brand asset carries its own
     transparent background and color, sized/centered here only. Not
     square: the real mark's aspect ratio is ~0.7:1, so width is auto
     rather than forced to match height. Same oversized issue as the app's
     own .logo-mark (main.css) — shrunk from 28px for the same reason. */
  height: 20px;
  display: flex; align-items: center; flex-shrink: 0;
}
.mkt-logo-mark img { height: 100%; width: auto; display: block; }
.mkt-logo-text { font-family: var(--fd); font-size: 15px; font-weight: 600; color: var(--w1); }
.mkt-logo-text em { font-style: normal; color: var(--blue); }
.mkt-nav-links { display: flex; align-items: center; gap: 28px; }
.mkt-nav-links a { font-size: 13.5px; font-weight: 500; color: var(--w2); text-decoration: none; }
.mkt-nav-links a:hover { color: var(--w1); }
.mkt-nav-right { display: flex; align-items: center; gap: 16px; }
.mkt-signin-link { font-size: 13.5px; font-weight: 500; color: var(--w2); text-decoration: none; }
.mkt-signin-link:hover { color: var(--w1); }
.mkt-nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue);
  color: var(--navy); font-family: var(--fd); font-size: 13.5px; font-weight: 700;
  padding: 11px 20px; border-radius: 100px; text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(159,232,56,.22);
  /* Now a <button> (triggers openSelfAssess()), not an <a> — reset the
     button-default border so it reads identically to before */
  border: none; cursor: pointer;
}
.mkt-nav-cta:hover { background: var(--blue-b); }

@media (max-width: 760px) {
  .mkt-nav-links { display: none; }
}
@media (max-width: 480px) {
  .mkt-nav { padding: 8px 8px 8px 14px; }
  .mkt-logo-text { font-size: 13px; }
  .mkt-signin-link { display: none; }
  .mkt-nav-cta { padding: 10px 16px; font-size: 12.5px; }
}

/* ── HERO — dark-first base band ── */
.mkt-hero {
  /* Top padding moved onto .mkt-hero-inner below — the nav now lives
     INSIDE this section, as its first child, so padding here would push
     the nav itself down from the section's top edge instead of just the
     hero copy beneath it. */
  /* Bottom padding here (rather than on .mkt-hero-inner, which isn't the
     section's last child — .mkt-mockup follows it) is what actually
     creates blank space before the section's own background ends and the
     next section's color begins. */
  padding: 0 24px 150px;
  background:
    radial-gradient(700px 420px at 15% 0%, rgba(159,232,56,.14), transparent 60%),
    radial-gradient(700px 420px at 85% 10%, rgba(159,232,56,.08), transparent 60%),
    var(--navy);
  text-align: center;
}
.mkt-hero-inner { max-width: 780px; margin: 0 auto; padding-top: 150px; }
.mkt-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fm); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); background: rgba(159,232,56,.1); border: 1px solid var(--border-b);
  padding: 6px 14px 6px 12px; border-radius: 100px; margin-bottom: 26px;
}
.mkt-eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.mkt-h1 {
  font-family: var(--fd); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(38px, 6vw, 64px); line-height: 1.08; color: var(--w1);
}
.mkt-h1 .accent { color: var(--blue); }
.mkt-sub { margin: 26px auto 0; max-width: 620px; font-size: 17px; line-height: 1.65; color: var(--w2); }
.mkt-cta-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.mkt-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blue);
  color: var(--navy); font-family: var(--fd); font-weight: 700; font-size: 14.5px;
  padding: 15px 26px; border-radius: 100px; text-decoration: none;
  box-shadow: 0 10px 30px rgba(159,232,56,.22);
  border: none;
}
.mkt-btn-primary:hover { background: var(--blue-b); }
.mkt-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid rgba(255,255,255,.22);
  color: var(--w1); font-family: var(--fd); font-weight: 600; font-size: 14.5px;
  padding: 14px 24px; border-radius: 100px; text-decoration: none;
}
.mkt-btn-ghost:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }

/* Product mockup — a real Quick Query exchange, same visual language as
   the app's own chat UI (source chips etc.), not a fabricated dashboard */
.mkt-mockup {
  max-width: 760px; margin: 56px auto 0;
  background: var(--navy-2);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(4,10,20,.45);
  overflow: hidden;
  text-align: left;
}
.mkt-mockup-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mkt-mockup-title { font-family: var(--fm); font-size: 11.5px; color: var(--w3); }
.mkt-mockup-live { font-family: var(--fm); font-size: 10px; color: var(--green); display: flex; align-items: center; gap: 5px; }
.mkt-mockup-live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.mkt-mockup-body { padding: 24px 22px 26px; }
.mkt-q-bubble { display: inline-block; max-width: 80%; margin-left: auto; background: var(--blue); color: var(--navy); font-size: 13.5px; font-weight: 600; padding: 11px 16px; border-radius: 14px 14px 3px 14px; text-align: right; }
.mkt-q-row { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.mkt-a-body { font-size: 13.5px; line-height: 1.7; color: var(--w2); }
.mkt-a-body b { color: var(--w1); }
.mkt-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mkt-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 100px; background: rgba(159,232,56,.12); border: 1px solid var(--border-b); font-family: var(--fm); font-size: 10.5px; color: var(--blue); }

/* ── SECTION SCAFFOLDING ── */
/* Alternating section tone (Problem/Who-it's-for/Doc-gen-demo/FAQ get
   .on-surface; What-it-does/How-it-works/Trust/Contact use this default)
   so consecutive sections read as distinct bands instead of one
   continuous flat field — every section differs from the one above and
   below it. Cards that float on an .on-surface section (.mkt-team-card,
   .mkt-gen-card) use --surface-2 instead of --surface so they still show
   real contrast against their own section, rather than disappearing into
   an identical white-on-white background. */
.mkt-section { padding: 88px 24px; background: var(--page); }
.mkt-section.on-surface { background: var(--surface); }
.mkt-section.tight { padding-top: 24px; }
.mkt-eyebrow-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fm); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t2); background: rgba(159,232,56,.08); border: 1px solid rgba(159,232,56,.22);
  padding: 5px 12px 5px 10px; border-radius: 100px; margin-bottom: 16px;
}
.mkt-eyebrow-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.mkt-h2 { font-family: var(--fd); font-weight: 800; letter-spacing: -.015em; font-size: clamp(28px, 4vw, 40px); color: var(--t1); line-height: 1.15; }
.mkt-h2-sub { margin-top: 14px; font-size: 15.5px; color: var(--t3); max-width: 520px; }

/* ── PROBLEM ── */
.mkt-problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: 44px; }
.mkt-problem-copy p { font-size: 15px; line-height: 1.75; color: var(--t3); margin-top: 18px; }
.mkt-stat-card {
  background: var(--navy); color: var(--w1); border-radius: 20px; padding: 30px 30px 34px;
  box-shadow: var(--shadow);
}
.mkt-stat-label { font-family: var(--fm); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--w3); margin-bottom: 18px; }
.mkt-stat-list { list-style: none; }
.mkt-stat-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--w2); padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
.mkt-stat-list li:first-child { border-top: none; }
.mkt-stat-list li::before { content: '—'; color: var(--blue); flex-shrink: 0; }

@media (max-width: 860px) {
  .mkt-problem-grid { grid-template-columns: 1fr; }
}

/* ── SERVICES GRID ── */
.mkt-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.mkt-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 30px 28px;
  box-shadow: var(--shadow);
}
.mkt-card-icon {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 20px;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.mkt-card-icon svg { width: 19px; height: 19px; stroke: var(--navy); }
.mkt-card h3 { font-family: var(--fd); font-size: 18px; font-weight: 700; color: var(--t1); }
.mkt-card .kicker { display: block; font-size: 13px; font-weight: 600; color: var(--t2); margin: 5px 0 12px; }
.mkt-card p { font-size: 14px; line-height: 1.65; color: var(--t3); }

@media (max-width: 760px) {
  .mkt-grid-2x2 { grid-template-columns: 1fr; }
}

/* ── WHO IT'S FOR (team examples) ── */
.mkt-teams-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.mkt-team-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); }
.mkt-team-name { font-family: var(--fd); font-weight: 700; font-size: 15px; color: var(--t1); margin-bottom: 10px; }
.mkt-team-q { font-size: 13.5px; line-height: 1.6; color: var(--t3); font-style: italic; }

@media (max-width: 900px) {
  .mkt-teams-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mkt-teams-grid { grid-template-columns: 1fr; }
}

/* ── HOW IT WORKS (numbered steps) ── */
.mkt-steps { margin-top: 48px; max-width: 720px; }
.mkt-step { display: grid; grid-template-columns: 140px 1fr; gap: 28px; padding: 30px 0; border-top: 1px solid var(--border); }
.mkt-step:first-child { border-top: none; }
.mkt-step-num { font-family: var(--fm); font-size: 12px; color: var(--blue); font-weight: 600; }
.mkt-step-label { font-family: var(--fd); font-size: 14px; font-weight: 600; color: var(--t2); margin-top: 4px; }
.mkt-step-title { font-family: var(--fd); font-size: 19px; font-weight: 700; color: var(--t1); margin-bottom: 8px; }
.mkt-step-body { font-size: 14.5px; line-height: 1.7; color: var(--t3); }

@media (max-width: 640px) {
  .mkt-step { grid-template-columns: 1fr; gap: 8px; }
}

/* ── GENERATION DEMO (mirrors real Document Generation output) ── */
.mkt-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 44px; }
.mkt-demo-copy h3 { font-family: var(--fd); font-size: 22px; font-weight: 700; color: var(--t1); margin-bottom: 12px; }
.mkt-demo-copy p { font-size: 14.5px; line-height: 1.7; color: var(--t3); }
.mkt-gen-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-h); padding: 24px; }
.mkt-gen-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mkt-gen-card-title { font-family: var(--fd); font-size: 13.5px; font-weight: 700; color: var(--t1); }
.mkt-gen-badge { font-family: var(--fm); font-size: 10px; color: var(--amber); background: rgba(247,144,9,.1); border: 1px solid rgba(247,144,9,.25); padding: 3px 9px; border-radius: 100px; }
.mkt-gen-section-title { font-size: 12.5px; font-weight: 700; color: var(--t1); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.mkt-gen-body { font-size: 13.5px; line-height: 1.7; color: var(--t3); }
.mkt-gen-body .flag { color: var(--amber); font-weight: 600; }
.mkt-gen-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mkt-gen-sources .mkt-chip { color: var(--t2); background: rgba(159,232,56,.1); border-color: var(--border-b); }

@media (max-width: 860px) {
  .mkt-demo-grid { grid-template-columns: 1fr; }
}

/* ── FAQ — native details/summary, plus-to-cross icon, no JS ── */
.mkt-faq-grid { display: grid; grid-template-columns: 340px 1fr; gap: 48px; margin-top: 44px; }
.mkt-faq-item { border-top: 1px solid var(--border); padding: 20px 0; }
.mkt-faq-item:last-child { padding-bottom: 0; }
.mkt-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-size: 15.5px; font-weight: 600; color: var(--t1); list-style: none; }
.mkt-faq-q::-webkit-details-marker { display: none; }
.mkt-faq-q svg { width: 16px; height: 16px; stroke: var(--blue); flex-shrink: 0; transition: transform .2s; }
.mkt-faq-item[open] .mkt-faq-q svg { transform: rotate(45deg); }
.mkt-faq-a { font-size: 14px; line-height: 1.7; color: var(--t3); margin-top: 12px; }

@media (max-width: 760px) {
  .mkt-faq-grid { grid-template-columns: 1fr; }
}

/* ── FINAL CTA ── */
.mkt-cta-card {
  background: var(--navy); border-radius: 24px; padding: 64px 48px; text-align: center; color: var(--w1);
}
.mkt-cta-card h2 { font-family: var(--fd); font-size: clamp(26px, 4vw, 36px); font-weight: 800; margin-bottom: 16px; }
.mkt-cta-card p { font-size: 15px; color: var(--w2); max-width: 480px; margin: 0 auto 30px; }

/* ── CONTACT FORM (inside the dark final-CTA card) ── */
.mkt-contact-form { max-width: 460px; margin: 0 auto; text-align: left; }
.mkt-contact-row { display: flex; gap: 12px; }
.mkt-contact-form input, .mkt-contact-form textarea {
  width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 12px 14px; color: var(--w1); font-family: var(--fb);
  font-size: 13.5px; margin-bottom: 12px; outline: none; resize: vertical;
}
.mkt-contact-form input::placeholder, .mkt-contact-form textarea::placeholder { color: var(--w3); }
.mkt-contact-form input:focus, .mkt-contact-form textarea:focus { border-color: var(--blue); }
.mkt-contact-form .mkt-btn-primary { width: 100%; justify-content: center; border: none; cursor: pointer; }
.mkt-contact-form .mkt-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.mkt-contact-error { color: #ff8a8a; font-size: 13px; margin-top: 12px; text-align: center; }
.mkt-contact-success { max-width: 460px; margin: 0 auto; text-align: center; color: var(--w2); font-size: 15px; padding: 20px 0; }

@media (max-width: 560px) {
  .mkt-contact-row { flex-direction: column; gap: 0; }
}

/* ── FOOTER — dark band, oversized low-opacity wordmark watermark ── */
.mkt-footer { padding: 56px 24px 0; background: var(--navy); color: var(--w2); }
.mkt-footer .mkt-logo-text { color: var(--w1); }
.mkt-footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mkt-footer-tagline { font-size: 14px; color: var(--w2); max-width: 320px; margin-top: 10px; line-height: 1.6; }
.mkt-footer-caps { font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--w3); margin-top: 8px; }
.mkt-footer-legal { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 11.5px; color: var(--w3); flex-wrap: wrap; }
.mkt-footer-wordmark {
  font-family: var(--fd); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(32px, 7vw, 108px); line-height: 1;
  color: rgba(255,255,255,.07); white-space: nowrap; overflow: hidden;
  text-align: center; user-select: none; padding-bottom: 10px;
}