:root {
  --ink: var(--jc-ink);
  --muted: var(--jc-steel-600);
  --forest: var(--jc-graphite);
  --forest-deep: var(--jc-graphite-deep);
  --forest-soft: var(--jc-signal-strong);
  --paper: var(--jc-mineral);
  --paper-deep: #e7e3db;
  --white: var(--jc-mineral-raised);
  --line: #d4cec3;
  --mint: var(--jc-success-soft);
  --blue: var(--jc-info-soft);
  --coral: var(--jc-critical-soft);
  --gold: var(--jc-signal);
  --shadow: var(--jc-shadow-2);
  font-family: var(--jc-font);
}

body {
  background: var(--jc-mineral);
}

.page-width {
  width: min(1220px, calc(100% - 48px));
}

.site-header {
  background: rgba(255, 253, 248, 0.98);
  border-top: 4px solid var(--jc-signal);
  border-bottom-color: #d5cfc4;
  box-shadow: 0 1px 0 rgba(29, 39, 37, 0.05);
}

.header-inner,
body.site-style-control-grid .header-inner {
  min-height: 70px;
}

.site-brand img {
  width: 40px;
  height: 40px;
  border-radius: 7px;
}

.site-brand strong {
  color: var(--jc-ink);
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.site-brand small {
  color: var(--jc-steel-600);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.site-nav a,
.header-signin,
.footer-links a {
  color: #47514d;
  font-weight: 750;
}

.site-nav a:hover,
.header-signin:hover,
.footer-links a:hover {
  color: var(--jc-signal-strong);
}

.site-button,
body.site-style-control-grid .site-button {
  border-radius: var(--jc-radius-sm);
  font-weight: 850;
}

.site-button-dark,
body.site-style-control-grid .site-button-dark,
.hero-actions .site-button-light,
body.site-style-control-grid .hero-actions .site-button-light {
  color: var(--jc-ink);
  background: var(--jc-signal);
  border-color: #c66713;
}

.site-button-dark:hover,
body.site-style-control-grid .site-button-dark:hover,
.hero-actions .site-button-light:hover,
body.site-style-control-grid .hero-actions .site-button-light:hover {
  color: #ffffff;
  background: var(--jc-signal-strong);
}

.site-hero,
body.site-style-control-grid .site-hero {
  min-height: 630px;
  background-color: var(--jc-graphite-deep);
  border-bottom: 4px solid var(--jc-signal);
}

.hero-shade {
  background: rgba(14, 20, 18, 0.84);
}

.hero-inner,
body.site-style-control-grid .hero-inner {
  min-height: 630px;
  padding-top: 62px;
  padding-bottom: 26px;
}

.hero-copy {
  max-width: 850px;
}

.hero-kicker {
  color: #f2c394;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.kicker-dot {
  border-radius: 2px;
  background: var(--jc-signal);
  box-shadow: none;
}

.hero-copy h1,
body.site-style-control-grid .hero-copy h1 {
  max-width: 880px;
  color: #ffffff;
  font-size: clamp(50px, 6.2vw, 78px);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.hero-copy h1 span {
  color: #ffffff;
}

.hero-positioning,
body.site-style-control-grid .hero-positioning {
  margin-top: 24px;
  color: #f2c394;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.015em;
}

.hero-lede {
  max-width: 720px;
  color: #d2d8d4;
  font-size: 17px;
}

.hero-facts {
  max-width: 880px;
  border-top-color: rgba(255, 255, 255, 0.22);
}

.hero-facts div {
  border-right-color: rgba(255, 255, 255, 0.15);
}

.hero-facts strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.hero-facts span,
.hero-note {
  color: #b9c1bd;
}

.trust-rail {
  background: #fffdf8;
}

.trust-rail-inner strong {
  color: var(--jc-ink);
}

.eyebrow,
.section-intro-light .eyebrow,
.eyebrow-light {
  color: var(--jc-signal-strong);
  font-weight: 900;
  letter-spacing: 0.09em;
}

.section-intro-light .eyebrow,
.eyebrow-light {
  color: #efb982;
}

.section-intro h2,
.section-intro-light h2,
.cta-inner h2,
body.site-style-control-grid .section-intro h2,
body.site-style-control-grid .section-intro-light h2,
body.site-style-control-grid .cta-inner h2 {
  font-size: clamp(37px, 4vw, 52px);
  font-weight: 850;
  letter-spacing: -0.045em;
}

.feature-grid {
  gap: 12px;
}

.feature-item,
body.site-style-control-grid .feature-item {
  min-height: 315px;
  border-top-width: 4px;
  border-radius: var(--jc-radius-sm);
  box-shadow: var(--jc-shadow-1);
}

.feature-item-green {
  border-top-color: var(--jc-success);
}

.feature-item-blue {
  border-top-color: var(--jc-info);
}

.feature-item-gold {
  border-top-color: var(--jc-signal);
}

.feature-index,
.feature-item-blue .feature-index,
.feature-item-gold .feature-index {
  color: var(--jc-ink);
  background: var(--jc-signal-soft);
  border-radius: 2px;
}

.feature-item h3 {
  font-weight: 800;
  letter-spacing: -0.025em;
}

.feature-link,
.inline-link {
  color: var(--jc-signal-strong);
}

.flow-band,
.site-cta,
.site-footer {
  background: var(--jc-graphite-deep);
}

.flow-number,
body.site-style-control-grid .flow-number {
  border-radius: 3px;
  color: var(--jc-ink);
  background: var(--jc-signal);
  border-color: var(--jc-signal);
}

.flow-connector {
  color: #b66b29;
}

.demo-launcher,
body.site-style-control-grid .demo-launcher {
  border: 1px solid #3b4743;
  border-top: 4px solid var(--jc-signal);
  border-radius: var(--jc-radius-sm);
  background: var(--jc-graphite-deep);
  box-shadow: var(--jc-shadow-2);
}

.launcher-side {
  background: var(--jc-graphite);
}

.role-choice,
body.site-style-control-grid .role-choice {
  border-radius: var(--jc-radius-sm);
}

.role-choice:hover,
.role-choice.is-selected {
  border-color: var(--jc-signal);
  background: rgba(215, 123, 36, 0.14);
}

.launcher-credentials span {
  color: #efb982;
}

.demo-visual {
  border-color: #cdc7bb;
  border-radius: var(--jc-radius-sm);
  box-shadow: var(--jc-shadow-1);
}

.product-shot {
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(21, 28, 26, 0.13);
}

.product-shot-phone {
  border-radius: 18px 18px 0 0;
}

.merit-mark,
.proof-checks > div > span {
  border-radius: 2px;
}

.merit-mark-gold,
.merit-mark-green,
.merit-mark-blue,
.merit-mark-coral {
  color: var(--jc-ink);
  background: var(--jc-signal-soft);
}

.merit-strip span {
  color: #6f3c0e;
}

.merit-strip span::before {
  border-radius: 1px;
  background: var(--jc-signal);
}

.proof-quote h2,
.proof-checks strong {
  color: var(--jc-ink);
}

.proof-checks > div > span {
  color: var(--jc-ink);
  background: var(--jc-signal-soft);
}

.site-brand-footer strong {
  color: #ffffff;
}

.site-brand-footer small,
.footer-inner > p,
.footer-links a {
  color: #b9c1bd;
}

.site-review-panel {
  border-top: 3px solid var(--jc-signal);
  border-radius: var(--jc-radius-sm);
}

@media (max-width: 800px) {
  .page-width {
    width: min(100% - 28px, 1220px);
  }

  .site-hero,
  body.site-style-control-grid .site-hero,
  .hero-inner,
  body.site-style-control-grid .hero-inner {
    min-height: 680px;
  }

  .hero-inner,
  body.site-style-control-grid .hero-inner {
    padding-top: 46px;
  }

  .hero-copy h1,
  body.site-style-control-grid .hero-copy h1 {
    font-size: clamp(44px, 14vw, 62px);
  }

  .hero-positioning,
  body.site-style-control-grid .hero-positioning {
    font-size: 17px;
  }

  .hero-actions .site-button {
    width: 100%;
    min-height: 48px;
  }

  .hero-facts {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-facts div {
    min-height: 0;
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }

  .hero-facts div:last-child {
    border-bottom: 0;
  }

  .site-section,
  body.site-style-control-grid .site-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .flow-band,
  body.site-style-control-grid .flow-band {
    padding-top: 64px;
    padding-bottom: 68px;
  }
}

@media (max-width: 390px) {
  .page-width {
    width: min(100% - 22px, 1220px);
  }

  .header-inner {
    min-height: 64px;
  }

  .site-brand img {
    width: 36px;
    height: 36px;
  }

  .site-brand small {
    max-width: 150px;
    white-space: normal;
  }
}