:root {
  /* EDITMODE markers defined below in JSON */
  --bg: #faf8f4;
  --bg-elev: #ffffff;
  --fg: #13120f;
  --fg-2: #3d3a33;
  --fg-3: #6b665c;
  --fg-4: #9a9389;
  --line: #e8e3d8;
  --line-2: #d8d2c3;
  --accent: #c9661f; /* burnt amber: "sunbound" */
  --accent-soft: #f4e4cf;
  --accent-ink: #5a2c0b;
  --sage: #5b7c6a; /* calm sustainability note */
  --sage-soft: #e1ebde;
  --code-bg: #13120f;
  --code-fg: #eee7d6;
  --radius: 10px;
  --radius-lg: 16px;
  --nav-h: 64px;
}
[data-theme="dark"] {
  --bg: #0e0d0b;
  --bg-elev: #1a1815;
  --fg: #f4efe3;
  --fg-2: #c9c3b4;
  --fg-3: #8e877a;
  --fg-4: #5c5649;
  --line: #26231e;
  --line-2: #34302a;
  --accent: #e88845;
  --accent-soft: #3a250f;
  --accent-ink: #f9d6b0;
  --sage: #8eae9d;
  --sage-soft: #1c2b23;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family:
    "Geist",
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}
.mono {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sb-megan {
  font-family: "Unbounded", "Geist", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "ss02";
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}
::selection {
  background: var(--accent);
  color: white;
}
#root {
  min-height: 100vh;
}

/* ─────── Mobile responsiveness ─────── */

/* Generic two-col + three-col grids collapse to single col on tablet/phone */
.sb-container {
  padding: 0 32px;
}
.sb-grid-2 {
  display: grid;
  gap: 72px;
}
.sb-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}
.sb-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.sb-grid-3-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sb-fields-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sb-compliance-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.sb-cloud-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: end;
}
.sb-cloud-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.sb-exp-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: end;
}
.sb-exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.sb-agent-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 72px;
  align-items: center;
}
.sb-blackbox-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 72px;
  align-items: center;
}
.sb-workflow-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
}
.sb-faq-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 72px;
}
.sb-footer {
  padding: 56px 0 40px;
}
.sb-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 32px;
}
.sb-footer-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--fg-2);
}
.sb-footer-links a:hover {
  color: var(--fg);
}
.sb-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--fg-4);
}
.sb-footer-social {
  display: inline-flex;
  align-items: center;
  color: var(--fg-3);
  transition: color 0.15s ease;
}
.sb-footer-social:hover {
  color: var(--fg);
}
.sb-doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sb-diwass-block {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.sb-diwass-col {
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sb-diwass-col + .sb-diwass-col {
  border-left: 1px solid var(--line);
}
.sb-diwass-h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.sb-diwass-sub {
  font-size: 17px;
  color: var(--fg-2);
  line-height: 1.4;
}
.sb-diwass-body {
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.6;
  margin: 0;
}
.sb-diwass-links {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.sb-diwass-links a {
  color: var(--accent);
  text-decoration: none;
  transition: text-decoration 0.15s ease;
}
.sb-diwass-links a:hover {
  text-decoration: underline;
}
.sb-diwass-further {
  margin-top: 4px;
  font-size: 12px;
  color: var(--fg-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sb-diwass-further a {
  color: var(--fg-2);
  text-decoration: none;
}
.sb-diwass-further a:hover {
  color: var(--fg);
  text-decoration: underline;
}
.sb-diwass-further-sep {
  color: var(--fg-4);
}
.sb-diwass-onboarding {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.sb-diwass-onboarding-text {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-diwass-onboarding-h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.sb-diwass-onboarding-body {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.5;
  margin: 0;
}
.sb-diwass-onboarding-cta {
  flex-shrink: 0;
}
.sb-diwass-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.5;
}
.sb-diwass-bullets li {
  position: relative;
  padding-left: 18px;
}
.sb-diwass-bullets li::before {
  content: "\2022";
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--accent);
  line-height: 1.5;
}
.sb-vs-row {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1.3fr;
}
.sb-hero-mock {
  display: grid;
  grid-template-columns: 220px 1fr 340px;
  min-height: 520px;
}

.sb-nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--fg-2);
}
.sb-nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sb-mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--fg);
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.sb-mobile-menu-btn__close {
  display: none;
}
.sb-mobile-menu-btn[aria-expanded="true"] .sb-mobile-menu-btn__open {
  display: none;
}
.sb-mobile-menu-btn[aria-expanded="true"] .sb-mobile-menu-btn__close {
  display: inline-block;
}

.sb-mobile-menu-panel {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 24px 0 32px;
  min-height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.sb-mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.sb-mobile-nav-list li + li {
  border-top: 1px solid var(--line);
}
.sb-mobile-nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.sb-mobile-nav-list a::after {
  content: "→";
  color: var(--fg-4);
  font-size: 15px;
  transition: transform 0.15s ease;
}
.sb-mobile-nav-list a:hover::after {
  transform: translateX(2px);
  color: var(--accent);
}
.sb-mobile-menu__cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 24px;
}
.sb-lang-switch.sb-mobile-menu__lang {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  margin: 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.sb-mobile-menu__lang .sb-lang-btn {
  padding: 6px 12px;
  font-size: 13px;
}

@media (max-width: 1024px) {
  .sb-container {
    padding: 0 24px;
  }
  .sb-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sb-grid-3 {
    grid-template-columns: 1fr;
  }
  .sb-grid-3-pricing {
    grid-template-columns: 1fr;
  }
  .sb-compliance-grid,
  .sb-cloud-head,
  .sb-cloud-grid,
  .sb-exp-head,
  .sb-exp-grid,
  .sb-agent-grid,
  .sb-blackbox-grid,
  .sb-workflow-grid,
  .sb-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }
  .sb-diwass-block {
    grid-template-columns: 1fr !important;
  }
  .sb-diwass-col + .sb-diwass-col {
    border-left: none !important;
    border-top: 1px solid var(--line);
  }
  .sb-compliance-grid > div:first-child,
  .sb-workflow-grid > div:first-child {
    position: static !important;
  }
  .sb-exp-grid > div {
    border-left: none !important;
    border-top: 1px solid color-mix(in oklab, var(--bg) 18%, transparent) !important;
    padding-top: 28px !important;
  }
  .sb-hero-mock {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .sb-hero-mock .sb-sidenav,
  .sb-hero-mock .sb-agentpanel {
    display: none;
  }
  .sb-nav-links {
    display: none;
  }
  .sb-nav-cta .sb-lang-switch,
  .sb-nav-cta > .sb-btn {
    display: none;
  }
  .sb-mobile-menu-btn {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .sb-container {
    padding: 0 18px;
  }
  .sb-fields-2 {
    grid-template-columns: 1fr;
  }
  .sb-doc-grid {
    display: none;
  }
  .sb-vs-row {
    grid-template-columns: 1fr;
  }
  .sb-vs-row > div {
    border-left: none !important;
  }
  .sb-vs-row > div:not(:first-child) {
    border-top: 1px solid var(--line);
  }
  .sb-vs-header {
    display: none !important;
  }
  .sb-footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .sb-footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
  }
  .sb-final-cta {
    padding: 40px 24px !important;
  }
  :root {
    --nav-h: 56px;
  }
  .sb-nav {
    height: 56px !important;
  }
  section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .sb-hero {
    padding: 32px 0 !important;
    min-height: auto !important;
  }
  .sb-section-pad-lg {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  .sb-agent-transcript-body {
    max-height: none !important;
  }
  .sb-stat-card {
    padding: 22px 20px !important;
  }
  .sb-stat-card .sb-stat-num {
    font-size: 40px !important;
  }
  .sb-hero-h1 {
    font-size: 48px !important;
    line-height: 1.02 !important;
  }
  .sb-hero-sub {
    font-size: 17px !important;
  }
  .sb-section-h2 {
    font-size: 30px !important;
    line-height: 1.08 !important;
  }
  .sb-btn-row {
    flex-wrap: wrap;
  }
  .sb-cta-buttons {
    flex-direction: column;
    align-items: stretch !important;
  }
  .sb-cta-buttons a,
  .sb-cta-buttons button {
    justify-content: center;
  }
  .sb-weighbridge-weight {
    font-size: 44px !important;
  }
  .sb-tweaks {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    bottom: 12px !important;
    max-height: 70vh;
    overflow-y: auto;
  }
  .sb-logorow {
    justify-content: flex-start !important;
    gap: 14px !important;
  }
  .sb-logorow > div {
    font-size: 13px !important;
  }
  .sb-doc-ocr {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 18px !important;
  }
}
/* ─────── Component utilities (refactor pass) ─────── */
main {
  display: block;
}

.sb-hero {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: 24px 0 15vh;
  position: relative;
  overflow: hidden;
}
.sb-hero-showcase {
  padding: 40px 0 80px;
}
.sb-container {
  max-width: 1240px;
  margin: 0 auto;
}
.sb-section {
  padding: 120px 0;
}
.sb-section--alt {
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sb-section--bordered {
  border-top: 1px solid var(--line);
}

/* Nav shell */
.sb-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition:
    background 0.2s ease,
    backdrop-filter 0.2s ease,
    border-bottom-color 0.2s ease;
}
.sb-nav-wrap.is-scrolled {
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.sb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Language switcher */
.sb-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-right: 4px;
}
/* TEMP: DE disabled. Delete this rule to restore the EN/DE toggle. */
.sb-lang-switch {
  display: none !important;
}
.sb-lang-btn {
  background: transparent;
  border: 0;
  padding: 4px 2px;
  color: var(--fg-4);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  transition: color 0.15s ease;
}
.sb-lang-btn:hover {
  color: var(--fg-2);
}
.sb-lang-btn.is-active {
  color: var(--fg);
}
.sb-lang-sep {
  color: var(--line-2);
}

/* Logo */
.sb-logo {
  display: inline-flex;
  align-items: center;
}
.sb-logo__img {
  height: 22px;
  width: auto;
  display: block;
}

/* Button */
.sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 99px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition:
    transform 0.12s ease,
    opacity 0.12s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.sb-btn:hover {
  transform: translateY(-1px);
}
.sb-btn--primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.sb-btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-2);
}
.sb-btn--accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.sb-btn--sm {
  padding: 8px 14px;
  font-size: 13px;
}
.sb-btn--md {
  padding: 11px 20px;
  font-size: 14px;
}
.sb-btn--lg {
  padding: 14px 24px;
  font-size: 15px;
}

/* Eyebrow (mono label with accent dot) */
.sb-eyebrow {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sb-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--accent);
}
.sb-eyebrow--on-dark {
  color: color-mix(in oklab, var(--bg) 55%, transparent);
}
.sb-eyebrow--on-cta {
  color: color-mix(in oklab, var(--bg) 60%, transparent);
}

/* Section heading */
.sb-section-h2 {
  font-size: clamp(30px, 4.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 16px 0 20px;
}

/* Stat card / stat num */
.sb-stat-card {
  background: var(--bg-elev);
  padding: 32px 28px;
}
.sb-stat-num {
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--accent);
}

/* ─────── Legal / long-form pages ─────── */
.sb-legal {
  padding: 120px 0 96px;
  max-width: 760px;
  margin: 0 auto;
}
.sb-legal__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-3);
  margin-bottom: 32px;
  transition: color 0.15s ease;
}
.sb-legal__back:hover {
  color: var(--fg);
}
.sb-legal h1 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 48px;
}
.sb-legal section {
  border-top: 1px solid var(--line);
  padding: 28px 0;
}
.sb-legal section:first-of-type {
  border-top: none;
  padding-top: 0;
}
.sb-legal h2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--fg);
}
.sb-legal p,
.sb-legal li {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 0 12px;
}
.sb-legal p:last-child,
.sb-legal li:last-child {
  margin-bottom: 0;
}
.sb-legal ul {
  padding-left: 22px;
  margin: 0 0 12px;
}
.sb-legal a {
  color: var(--accent);
}
.sb-legal a:hover {
  text-decoration: underline;
}
.sb-legal dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 24px;
  margin: 0;
}
.sb-legal dt {
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sb-legal dd {
  font-size: 14.5px;
  color: var(--fg);
  margin: 0;
}
@media (max-width: 640px) {
  .sb-legal {
    padding: 72px 0 64px;
  }
  .sb-legal dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .sb-legal dd {
    margin-bottom: 10px;
  }
}