/* Radix Colors: Sand + Tomato. https://www.radix-ui.com/colors */
:root {
  --paper: #fdfdfc; --surface: #fff; --subtle: #f9f9f8; --hover: #f1f0ef;
  --line: #dad9d6; --control-line: #cfceca; --ink: #21201c; --muted: #63635e;
  --accent: #d13415; --accent-hover: #5c271f; --accent-soft: #feebe7; --max: 1120px;
  --primary: #d13415; --primary-hover: #5c271f;
  --terminal: #242522; --terminal-ink: #f4f4ef; --terminal-muted: #b5b7ad; --terminal-line: #50524b;
  color-scheme: light;
  font-family: var(--font-ui);
  color: var(--ink); background: var(--paper); font-synthesis: none;
}
:root[data-theme="dark"] {
  --paper: #181917; --surface: #20211e; --subtle: #252622; --hover: #30312c;
  --line: #3b3d36; --control-line: #575a50; --ink: #f1f2eb; --muted: #b3b6aa;
  --accent: #ff957d; --accent-hover: #ffb9a8; --accent-soft: #412c26;
  --primary: #b93218; --primary-hover: #a82d16;
  --terminal: #252622;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font-size: 15px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; transition: color .15s, background-color .15s, border-color .15s; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
h1, h2, h3, h4, p { margin: 0; word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3 { font-weight: 650; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 12px; background: var(--ink); color: var(--paper); z-index: 30; }
.skip-link:focus { top: 12px; }
.section, .header-inner, .site-footer { width: min(var(--max), calc(100% - 80px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 23px; letter-spacing: -1px; font-weight: 750; }
.brand-logo { display: block; height: 32px; width: auto; }
.site-footer .brand-logo { height: 22px; }
.brand-logo-dark, :root[data-theme="dark"] .brand-logo:not(.brand-logo-dark) { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: block; }
.site-nav { display: flex; align-items: center; gap: 27px; font-size: 13px; font-weight: 550; margin-left: auto; }
.site-nav a { min-height: 44px; display: inline-flex; align-items: center; gap: 16px; }
.site-nav a:hover { color: var(--accent); }
.site-nav .nav-console { border-left: 1px solid var(--line); padding-left: 26px; }
.menu-button { display: none; min-height: 44px; border: 1px solid var(--control-line); background: transparent; color: var(--ink); border-radius: 4px; padding: 0 15px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--control-line); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 12px; }
.theme-toggle:hover { background: var(--hover); }
.theme-icon { font-size: 19px; line-height: 1; }
.theme-toggle[aria-pressed="true"] .theme-icon { transform: rotate(180deg); }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 68px; padding-top: 78px; padding-bottom: 65px; align-items: end; }
.eyebrow { color: var(--muted); font-size: 13px; font-weight: 550; margin-bottom: 19px; }
h1 { font-size: clamp(40px, 4.6vw, 58px); line-height: 1.23; letter-spacing: -2.5px; }
.hero-copy { padding-bottom: 5px; }
.hero-copy > p:first-child { max-width: 400px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 26px; }
.hero-note { font-size: 12px; color: var(--muted); margin-top: 17px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 46px; padding: 10px 19px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; }
.button-primary { background: var(--primary); color: #fff; }
.button-primary:hover:not(:disabled) { background: var(--primary-hover); }
.button-secondary { border-color: var(--control-line); background: var(--surface); color: var(--ink); }
.button-secondary:hover:not(:disabled), .button-quiet:hover:not(:disabled) { background: var(--hover); border-color: var(--muted); }
.button-quiet { background: transparent; border-color: var(--control-line); color: var(--ink); }
.button-danger { background: transparent; border-color: var(--control-line); color: var(--accent); }
.button-danger:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.button:disabled { color: var(--muted); background: var(--hover); border-color: var(--line); font-weight: 400; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--control-line); }
.text-link:hover { color: var(--accent); border-color: var(--accent); }
.install { padding-bottom: 48px; }
.install-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.install-heading h2 { font-size: 15px; letter-spacing: -.3px; }
.install-options { display: flex; gap: 4px; }
.install-options button { min-height: 44px; padding: 7px 14px; border: 1px solid transparent; border-radius: 4px; color: var(--muted); background: transparent; font-size: 12px; }
.install-options button:hover { color: var(--ink); background: var(--hover); }
.install-options button[aria-pressed="true"] { color: var(--ink); background: var(--surface); border-color: var(--control-line); }
.install-terminal { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 15px 18px 15px 24px; background: var(--terminal); color: var(--terminal-ink); border: 1px solid var(--terminal-line); border-radius: 6px; }
.terminal-prompt { color: var(--terminal-muted); user-select: none; }
.install-terminal code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 15px/1.7 var(--font-mono); }
.copy-command { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--terminal-line); border-radius: 4px; background: transparent; color: var(--terminal-ink); font-size: 12px; }
.copy-command:hover { background: var(--terminal-line); }
.copy-command:focus-visible { outline-color: var(--terminal-ink); }
.install-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.install-meta [data-copy-status] { min-height: 20px; }
.demo { padding-bottom: 82px; }
.demo-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 15px; }
.demo-heading h2 { font-size: 16px; letter-spacing: -.3px; }
.demo-heading p { color: var(--muted); font-size: 13px; }
.simulator { border: 1px solid var(--control-line); border-radius: 6px; background: var(--surface); overflow: hidden; }
.simulator-head { padding: 18px 28px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.sample-customer { display: flex; gap: 14px; align-items: baseline; }
.sample-customer h3 { font-size: 17px; }
.sample-customer > span { font: 12px var(--font-ui); color: var(--muted); }
.example-label { color: var(--muted); font-size: 12px; }
.simulator-body { display: grid; grid-template-columns: 1.35fr 1fr; }
.simulator-data { padding: 28px; }
.customer-summary { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; min-height: 100px; }
.status-caption { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.simulator-status strong { display: block; font-size: 21px; letter-spacing: -.6px; line-height: 1.5; }
.status-icon { font-size: 17px; color: var(--muted); }
.simulator-status p { color: var(--muted); font-size: 12px; margin-top: 6px; }
.balance-row { position: relative; padding-left: 24px; border-left: 1px solid var(--line); }
.balance-row > strong { display: block; font-size: 30px; line-height: 1.25; font-weight: 600; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.balance-row small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.balance-mark { display: block; font: 11px var(--font-ui); color: var(--muted); margin-top: 9px; }
.simulator-log { border-top: 1px solid var(--line); margin-top: 23px; padding-top: 15px; min-height: 122px; }
.simulator-log h4 { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 9px; }
.log-item { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; line-height: 1.85; }
.log-item > span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); }
.log-empty { color: var(--muted); font-size: 13px; display: block; padding-top: 10px; }
.simulator-actions { display: grid; align-content: start; gap: 9px; padding: 28px; border-left: 1px solid var(--line); background: var(--subtle); }
.simulator-actions > .button { justify-content: space-between; }
.simulator-actions > .button[data-action="reset"] { justify-content: center; }
.simulator-actions .button { min-height: 44px; font-size: 13px; }
.action-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.action-note { color: var(--muted); font-size: 11px; text-align: center; padding-top: 4px; }
.simulator-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 20px; padding: 12px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.product { padding-top: 52px; padding-bottom: 62px; border-top: 1px solid var(--line); }
h2 { font-size: 28px; line-height: 1.5; letter-spacing: -1px; }
.section-intro > p { color: var(--muted); margin-top: 10px; }
.feature-list { margin: 37px 0 0; }
.feature-list > div { display: grid; grid-template-columns: 180px 1fr 145px; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); align-items: baseline; }
.feature-list dt { font-weight: 600; }
.feature-list dd { margin: 0; color: var(--muted); font-size: 14px; max-width: 570px; }
.feature-list .feature-detail { font-size: 12px; color: var(--muted); text-align: right; }
.integration { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; padding-top: 58px; padding-bottom: 76px; border-top: 1px solid var(--line); align-items: start; }
.integration-copy .eyebrow { margin-bottom: 12px; }
.integration-copy > p:not(.eyebrow) { color: var(--muted); max-width: 355px; margin-top: 18px; font-size: 14px; }
.integration-copy .fine-print { font-size: 12px !important; }
.code-card { border: 1px solid var(--line); border-radius: 4px; min-width: 0; background: var(--subtle); }
.code-top { display: flex; justify-content: space-between; gap: 10px; padding: 13px 20px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.code-card pre { margin: 0; padding: 19px 20px; overflow-x: auto; font: 12px/1.75 var(--font-ui); tab-size: 2; }
.code-keyword { color: var(--accent); }
.code-string { color: var(--accent-hover); }
.code-foot { margin: 0; padding: 11px 20px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; padding-top: 48px; padding-bottom: 55px; border-top: 1px solid var(--line); }
.faq h2 { font-size: 23px; }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 550; }
details:first-child summary { padding-top: 6px; }
summary::-webkit-details-marker { display: none; }
summary span { font-size: 20px; line-height: 1.2; color: var(--muted); }
details[open] summary span { transform: rotate(45deg); }
details p { color: var(--muted); font-size: 13px; line-height: 1.8; padding-bottom: 18px; max-width: 570px; }
.console-link { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; border-top: 1px solid var(--line); }
.console-link p { color: var(--muted); font-size: 14px; }
.site-footer { border-top: 1px solid var(--line); padding-block: 24px 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 26px; font-size: 12px; color: var(--muted); }
.site-footer .footer-info { flex-basis: 100%; margin: 0; line-height: 1.8; overflow-wrap: anywhere; }
.site-footer .brand { font-size: 18px; color: var(--ink); }
.site-footer > span { margin-left: auto; }
@media (max-width: 900px) {
  .section, .header-inner, .site-footer { width: calc(100% - 48px); }
  .site-nav { gap: 18px; }
  .header-inner { gap: 16px; }
  .theme-toggle > span:last-child { display: none; }
  .theme-toggle { min-width: 44px; }
  .hero { gap: 30px; }
  h1 { font-size: 46px; }
  .hero-copy > p:first-child { font-size: 15px; }
  .simulator-data, .simulator-actions { padding: 23px; }
  .simulator-body { grid-template-columns: 1.2fr 1fr; }
  .customer-summary { grid-template-columns: 1fr; min-height: 0; gap: 18px; }
  .balance-row { padding: 0; border: 0; }
  .balance-mark { display: inline-block; }
  .balance-row > strong { display: inline-block; margin-right: 14px; }
  .feature-list > div { grid-template-columns: 155px 1fr; }
  .feature-detail { display: none; }
  .integration { gap: 34px; }
  .faq { gap: 34px; grid-template-columns: 1fr 1.7fr; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 86px; }
  .section, .header-inner, .site-footer { width: calc(100% - 40px); }
  .header-inner { min-height: 65px; }
  .brand { font-size: 22px; }
  .menu-button { display: block; margin-left: auto; }
  .site-nav { display: none; position: absolute; inset: 65px 0 auto; background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 20px 18px; }
  .site-nav.is-open { display: grid; gap: 3px; }
  .site-nav a { padding: 6px 10px; min-height: 44px; }
  .site-nav .nav-console { border: 0; border-top: 1px solid var(--line); padding-left: 10px; margin-top: 8px; padding-top: 13px; }
  .hero { display: block; padding-top: 42px; padding-bottom: 39px; }
  .eyebrow { margin-bottom: 13px; }
  h1 { font-size: clamp(36px, 9.5vw, 48px); letter-spacing: -1.7px; }
  .hero-copy { margin-top: 23px; padding: 0; }
  .hero-copy > p:first-child { max-width: 370px; }
  .hero-actions { margin-top: 20px; gap: 22px; }
  .hero-note { font-size: 11px; margin-top: 13px; }
  .install { padding-bottom: 32px; }
  .install-heading { flex-wrap: wrap; gap: 4px 12px; }
  .install-terminal { gap: 10px; padding: 12px; }
  .install-terminal code { font-size: 13px; }
  .copy-command { gap: 5px; padding-inline: 9px; }
  .demo { padding-bottom: 46px; }
  .demo-heading { display: block; margin-bottom: 12px; }
  .demo-heading p { font-size: 12px; margin-top: 3px; }
  .simulator-head { padding: 15px 19px; }
  .simulator-body { display: block; }
  .simulator-data { padding: 21px 19px 16px; }
  .customer-summary { grid-template-columns: 1.15fr 1fr; gap: 15px; }
  .simulator-status strong { font-size: 19px; }
  .balance-row { border-left: 1px solid var(--line); padding-left: 15px; }
  .balance-row > strong { display: block; margin: 0; font-size: 28px; }
  .balance-row small { display: block; margin-top: 5px; font-size: 11px; }
  .balance-mark { margin-top: 6px; }
  .simulator-log { margin-top: 20px; min-height: 113px; }
  .simulator-actions { border-left: 0; border-top: 1px solid var(--line); padding: 18px 19px; }
  .simulator-footer { padding: 12px 19px; font-size: 11px; }
  .product { padding-block: 34px 38px; }
  h2 { font-size: 25px; letter-spacing: -.8px; }
  .section-intro > p { font-size: 14px; }
  .feature-list { margin-top: 26px; }
  .feature-list > div { display: block; padding-block: 20px; }
  .feature-list dd { margin-top: 8px; }
  .integration { display: block; padding-block: 36px 44px; }
  .integration-copy > p:not(.eyebrow) { max-width: none; }
  .code-card { margin-top: 27px; }
  .code-card pre { font-size: 11px; padding-inline: 15px; }
  .code-top, .code-foot { padding-inline: 15px; }
  .faq { display: block; padding-block: 31px 38px; }
  .faq-list { margin-top: 23px; }
  .console-link { align-items: flex-start; flex-direction: column; gap: 10px; padding-block: 23px; }
  .site-footer { flex-wrap: wrap; gap: 8px 18px; }
  .site-footer > span { width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}