/* 2026 UI Kit alignment — loaded last on index.html and request-a-demo.html.

   Maps the pages onto the "2026 UI Kit" Figma file: Typography, Color,
   Grid, Elevation and UI Elements (buttons, fields). Everything here is an
   override of the older homepage / sandbox styles, so the shared files (also
   used by Rurik's sandbox pages) stay untouched.

   Kit reference
   - Type: Synapse. H1 Standard 64 / Compact 48 / Mobile 36, H2 Display 56 /
     Standard 36, H3 28 — Regular. H4 20 / H5 16 / H6 14 — Semibold. Headings
     use Figma "Auto" line height (Synapse's own 1.26); body is 150%.
   - Color: Brand palette + Tokens (text 100/80/60/30%, strokes 5/15/40%).
   - Grid: 12 columns, 80px margins, 48px gutters; 16px mobile margins.
   - Elevation 1 (default) 0 4 15 / 4%; Elevation 2 (hover) 0 8 15 / 10%.
   - Buttons: 8px radius, Synapse Regular. Light surfaces: primary Teal Shade
     (hover Teal Dark), secondary transparent + 15% stroke (hover White).
     Dark surfaces: primary Citron Highlight (hover Citron Tint), secondary
     Ivory Medium stroke/text (hover Ivory Dark). Large 52 / Medium 48.
   - Fields: 16px label 4px above; 41px field, 4px radius, 15% stroke,
     14px text, Ivory Shade placeholder. Form card: 24px radius, 15% stroke. */

:root {
  --kit-black: #201F1D;
  --kit-white: #FFFFFF;
  --kit-text-strong: #201F1D;
  --kit-text-medium: rgba(32, 31, 29, .8);
  --kit-text-subtle: rgba(32, 31, 29, .6);
  --kit-text-on-dark: #FFFFFF;
  --kit-text-on-dark-medium: rgba(255, 255, 255, .8);
  --kit-text-on-dark-subtle: rgba(255, 255, 255, .6);
  --kit-stroke-subtle: rgba(32, 31, 29, .05);
  --kit-stroke-light: rgba(32, 31, 29, .15);
  --kit-stroke-medium: rgba(32, 31, 29, .4);
  --kit-teal-medium: #0A7891;
  --kit-teal-shade: #0C505D;
  --kit-teal-dark: #0D2828;
  --kit-teal-highlight: #C9FEFF;
  --kit-citron-highlight: #FFFA66;
  --kit-citron-tint: #FFFDC7;
  --kit-ivory-tint: #F8F7F7;
  --kit-ivory-medium: #E4E1DF;
  --kit-ivory-shade: #A8A39F;
  --kit-ivory-dark: #6B665E;
  --kit-elevation-1: 0 4px 15px rgba(0, 0, 0, .04);
  --kit-elevation-2: 0 8px 15px rgba(0, 0, 0, .10);
  --kit-heading-lh: 1.26;
}

/* ---------- Typography: headings ---------- */
/* Sizes, line heights and tracking come from css/type.css (three viewports:
   >= 1024, 600–1023, < 600), so these rules only map the page's heading
   classes onto it. */

/* H1 64 / 48 / 34 */
.hero-section--sandbox .hero-title {
  font-size: var(--type-h1);
  font-weight: 400;
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
}

/* H1 Compact 48 / 40 / 32 */
.dm-title {
  font-size: var(--type-h1-compact);
  font-weight: 400;
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
}

/* H2 56 / 40 / 28 */
.section-heading,
.mcp-heading,
.demo-heading,
.connect-embed .hero-title,
.dm-stories-title {
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
}

/* H3 28 / 24 / 22 */
.proof-cols .mosaic-heading,
.dm-card-title,
.dm-slide-tag {
  font-size: var(--type-h3);
  font-weight: 400;
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
}

/* H4 20 / 18 / 18 Semibold */
.pd-gov-head h3,
.fig-kicker,
.dm-feature h3,
.sf-news-heading,
.dm-intro .dm-g2 p {
  font-size: var(--type-h4);
  font-weight: 600;
  line-height: var(--type-h4-lh);
  letter-spacing: var(--type-h4-ls);
}

/* H5 16 / 16 / 15 Semibold */
.sf-heading {
  font-size: var(--type-h5);
  font-weight: 600;
  line-height: var(--type-h5-lh);
  letter-spacing: 0;
}

/* ---------- Typography: body ---------- */
/* Sizes from css/type.css: Lede 18/17/16, Body 16/16/15, Small 15/15/14,
   Caption 13, all 1.5. These rules map the pages' text classes onto them. */

/* Lede: hero descriptions and every section subhead */
.hero-section--sandbox .hero-desc,
.proof-lede,
.section-body,
.mcp-desc,
.demo-desc,
.proof-cols .mosaic-text,
.dm-slide-text {
  font-size: var(--type-lede);
  font-weight: 400;
  line-height: var(--type-body-lh);
}

/* Even line lengths, so the hero subhead never ends on a short last line. */
.hero-section--sandbox .hero-desc { text-wrap: balance; }

/* Body */
.connect-embed .hero-desc,
.proof-cols .stat-label,
.dm-intro p,
.dm-card-text,
.dm-feature p,
.dm-logos-lede {
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
}

/* Small */
.proof-cols .mosaic-quote,
.sf-address {
  font-size: var(--type-small);
  line-height: var(--type-body-lh);
}

/* Caption */
.proof-cols .mosaic-attribution,
.sf-consent,
.sf-bottom,
.dm-form-note {
  font-size: var(--type-caption);
  line-height: var(--type-body-lh);
}

/* ---------- Color: text tokens ---------- */

.proof-cols .stat-number,
.proof-cols .stat-label,
.proof-cols .mosaic-text,
.proof-cols .mosaic-quote,
.proof-cols .mosaic-heading {
  color: var(--kit-text-strong);
}

.section-body,
.fig-bracket-text,
.fig-ribbon--hollow .fig-seg {
  color: var(--kit-text-medium);
}

.proof-cols .mosaic-attribution,
.connect-embed .tool-legend,
.dm-form-note {
  color: var(--kit-text-subtle);
}

.demo-desc {
  color: var(--kit-text-on-dark-medium);
}

/* Platform diagram ink and shell onto the palette (Black, Ivory Medium). */
.pdiagram {
  --pd-ink: var(--kit-black);
  --pd-shell: var(--kit-ivory-medium);
}

/* ---------- Color: strokes and surfaces ---------- */

.proof-cols .proof-cell {
  border-color: var(--kit-stroke-light);
}

.fig-ribbon--hollow {
  border-color: var(--kit-stroke-light);
}

.fig-panel .fig-dot {
  background: var(--kit-white);
}

/* ---------- Elevation ---------- */

.proof-cols .proof-cell {
  box-shadow: var(--kit-elevation-1);
}

.proof-cols a.proof-cell--link:hover {
  box-shadow: var(--kit-elevation-2);
}

/* ---------- Grid: 80px margins (40px tablet, 16px mobile) ---------- */

.hero-section--sandbox .hero-inner,
.proof-inner,
.problem-section,
.compare-section,
.mcp-inner,
.connect-embed .hero-inner,
.stops-inner,
.harness-inner,
.demo-inner {
  max-width: 1440px;
  padding-left: 80px;
  padding-right: 80px;
}

@media (max-width: 1100px) {
  .hero-section--sandbox .hero-inner,
  .proof-inner,
  .problem-section,
  .compare-section,
  .mcp-inner,
  .connect-embed .hero-inner,
  .stops-inner,
  .harness-inner,
  .demo-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 760px) {
  .hero-section--sandbox .hero-inner,
  .hero-section--sandbox .hero-image-wrap,
  .proof-inner,
  .problem-section,
  .compare-section,
  .mcp-inner,
  .connect-embed .hero-inner,
  .stops-inner,
  .harness-inner,
  .demo-inner,
  .dm-hero-inner,
  .dm-features-inner,
  .dm-logos,
  .dm-stories-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sf-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.dm-features-inner {
  gap: 48px;
}

/* ---------- Buttons ---------- */

/* Large (52): 14/18 padding, 16px Synapse Regular. */
.btn-citron,
.btn-outline-teal,
.btn-demo-white,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 8px;
  font-family: 'Synapse', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Primary on light surfaces: Teal Shade → Teal Dark. */
.btn-primary,
.connect-embed .connect-btn,
.dm-form .mktoButton,
.demo-cta {
  background: var(--kit-teal-shade);
  color: var(--kit-white);
}

.btn-primary:hover,
.connect-embed .connect-btn:hover,
.dm-form .mktoButton:hover,
.demo-cta-link:hover .demo-cta {
  background: var(--kit-teal-dark);
  color: var(--kit-white);
}

/* Primary on dark surfaces (hero, demo band, footer): Citron Highlight →
   Citron Tint, Black text. */
.btn-citron,
.btn-demo-white,
.sf-news-form .mktoButton {
  border: 0;
  background: var(--kit-citron-highlight);
  color: var(--kit-black);
}

.btn-citron:hover,
.btn-demo-white:hover,
.sf-news-form .mktoButton:hover {
  background: var(--kit-citron-tint);
  color: var(--kit-black);
}

/* Secondary on dark surfaces: Ivory Medium stroke and text → Ivory Dark. */
.btn-outline-teal {
  padding: 13px 17px; /* 1px border included in the 52px Large height */
  border: 1px solid var(--kit-ivory-medium);
  background: transparent;
  color: var(--kit-ivory-medium);
}

.btn-outline-teal:hover {
  border-color: var(--kit-ivory-medium);
  background: var(--kit-ivory-dark);
  color: var(--kit-ivory-medium);
}

/* Secondary on light surfaces (header Connect): 15% stroke → White. */
.connect-pill {
  border-color: var(--kit-stroke-light);
  background: transparent;
  color: var(--kit-black);
}

.connect-pill:hover {
  border-color: var(--kit-stroke-light);
  background: var(--kit-white);
}

/* Medium (48): 12/16 padding, 14px Synapse Regular. */
.connect-embed .connect-btn,
.sf-news-form .mktoButton,
.dm-form .mktoButton {
  height: 48px;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  font: 400 14px/24px 'Synapse', 'Inter', sans-serif;
}

/* ---------- Fields ---------- */

.dm-form .mktoLabel,
.sf-news-form .mktoLabel {
  margin-bottom: 4px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
}

.dm-form .mktoLabel,
.dm-form .mktoAsterix {
  color: var(--kit-text-strong);
}

.dm-form input.mktoField,
.dm-form select.mktoField,
.dm-form textarea.mktoField,
.sf-news-form input.mktoField {
  height: 41px;
  padding: 0 10px;
  border: 1px solid var(--kit-stroke-light);
  border-radius: 4px;
  background-color: var(--kit-white);
  font: 400 14px/21px 'Synapse', 'Inter', sans-serif;
  color: var(--kit-text-strong);
}

.dm-form textarea.mktoField {
  height: auto;
  min-height: 103px;
  padding: 10px;
}

.dm-form .mktoField::placeholder,
.sf-news-form .mktoField::placeholder,
.connect-embed .email-input::placeholder {
  color: var(--kit-ivory-shade);
  opacity: 1;
}

/* Kit field stacks sit 8px apart; the button follows the card's 24px gap. */
.dm-form .mktoFormRow + .mktoFormRow .mktoFieldWrap {
  margin-top: 8px;
}

.dm-form .mktoButtonRow {
  margin-top: 24px;
}

/* The Connect email field sits beside a Medium button, so it keeps the
   button's 48px height; everything else follows the kit field. */
.connect-embed .email-input {
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--kit-stroke-light);
  padding: 0 10px;
  font-size: 14px;
  color: var(--kit-text-strong);
}

/* Form card (kit "Field Card"): 24px radius, 56px padding, 15% stroke. */
.dm-card {
  border: 1px solid var(--kit-stroke-light);
  border-radius: 24px;
}