/* The design's page styles: the rules each designed page carried in its <style> block, merged. */
body{margin:0;background:#FAFAF9}
a{color:#111111;text-decoration:none}
a:hover{color:#000000}
.nav-link:hover{color:#111111}
.btn-primary:hover{opacity:0.86}
.btn-secondary{border-color:#D6D3D1;background:rgba(255,255,255,0.6)}
.btn-secondary:hover{border-color:#A8A29E;background:#FFFFFF}
.text-link:hover .arrow{transform:translateX(3px)}
a:focus-visible{outline:2px solid #111111;outline-offset:3px;border-radius:6px}
.bgfield::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url(assets/caas-dotfield.png);background-size:1320px 1320px;background-repeat:repeat;background-position:center top;opacity:var(--bg-op,0.5)}
a.on-dark:hover{color:#FFFFFF}
.jump:hover{color:#111111;border-color:#A8A29E}
/* Phones: logo and Get started share the top row, the page links scroll on a second row inside the bar. */
@media (max-width:640px){
.site-nav{height:auto!important;padding:10px 16px 6px!important;row-gap:4px!important}
.site-nav-right{display:contents!important}
.site-nav-right>.btn-primary{order:2;height:36px!important;padding:0 14px!important;white-space:nowrap}
.site-nav-links{order:3;flex:1 0 100%;flex-wrap:nowrap!important;gap:20px!important;overflow-x:auto;padding:8px 0 6px}
.site-nav-links a{white-space:nowrap}
}
/* Phones: every band keeps 16px side gutters, as the header does; hero headlines step down so they fit. The containers are
   matched by their inline max-width, as the server writes it and as the browser does after an in-page navigation. */
@media (max-width:640px){
main [style*="max-width:1200px"],main [style*="max-width: 1200px"],footer [style*="max-width:1200px"],footer [style*="max-width: 1200px"]{padding-left:16px!important;padding-right:16px!important}
.hero-title{font-size:42px!important;line-height:1.08!important}
}
/* Homepage hero routing panel (scoped to .rt): triggers on the left, isolance in the middle, providers on the right, a run below. */
.rt { flex: 1 1 420px; min-width: 0; background: #111111; color: #FAFAF9; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08); --mono: 'Geist Mono', ui-monospace, monospace; --line: #2A2A2A; --muted: #A8A29E; --ok: #8FD9A8; --warn: #F0BE85; }
.rt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.rt-live { display: inline-flex; align-items: center; gap: 8px; color: #FAFAF9; }
.rt-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--ok); }
.rt-map { display: grid; grid-template-columns: minmax(0, 1fr) 36px auto 36px minmax(0, 1fr); grid-template-rows: auto 168px; row-gap: 10px; padding: 20px 20px 22px; }
.rt-label { grid-row: 1; grid-column: 1; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: #78716C; }
.rt-label-end { grid-column: 5; }
.rt-list { grid-row: 2; margin: 0; padding: 0; list-style: none; display: grid; }
.rt-sources { grid-column: 1; grid-template-rows: repeat(4, minmax(0, 1fr)); }
.rt-providers { grid-column: 5; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.rt-list li { display: flex; align-items: center; min-width: 0; }
.rt-node { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #161616; font-size: 13px; color: #A8A29E; white-space: nowrap; overflow: hidden; }
.rt-providers .rt-node { height: 40px; font-size: 14px; font-weight: 500; color: #D6D3D1; }
.rt-node.on { border-color: #3B5444; background: #142019; color: #FAFAF9; }
.rt-node.down { border-style: dashed; border-color: #5C4834; color: var(--muted); }
.rt-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--ok); }
.rt-node.down .rt-tag { color: var(--warn); }
.rt-wires { grid-row: 2; display: block; width: 100%; height: 100%; overflow: visible; }
.rt-wires.in { grid-column: 2; }
.rt-wires.out { grid-column: 4; }
.rt-wire { fill: none; stroke: #34312E; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rt-wire.on { stroke: var(--ok); }
.rt-wire.down { stroke: var(--warn); stroke-dasharray: 3 4; opacity: 0.75; }
.rt-hub { grid-row: 2; grid-column: 3; align-self: center; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #3A3531; border-radius: 10px; background: #1C1C1C; box-shadow: 0 0 0 5px rgba(143, 217, 168, 0.06); font-family: var(--mono); font-size: 13px; color: #FAFAF9; }
.rt-term { margin: 0; padding: 18px 20px 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 13.5px; line-height: 1.8; color: #FAFAF9; white-space: pre-wrap; }
.rt-muted { color: var(--muted); }
.rt-warn { color: var(--warn); }
.rt-ok { color: var(--ok); }
@media (max-width: 640px) {
  .rt-map { grid-template-columns: minmax(0, 1fr) 20px auto 20px minmax(0, 1fr); grid-template-rows: auto 156px; padding: 16px 16px 18px; }
  .rt-node { padding: 0 8px; font-size: 12px; }
  .rt-providers .rt-node { font-size: 13px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
  .rt-tag { font-size: 9px; line-height: 1.2; }
  .rt-hub { gap: 6px; padding: 8px 9px; font-size: 12px; }
  .rt-term { padding: 16px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  .rt-hub span { display: none; }
}

/* Homepage pricing teaser (scoped to .price-strip). */
.price-strip { flex: 1 1 560px; min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #FFFFFF; border: 1px solid #E7E5E4; border-radius: 12px; overflow: hidden; }
.price-strip > div { padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.price-strip > div + div { border-left: 1px solid #E7E5E4; }
.price-strip dt { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.5; letter-spacing: 0.08em; color: #6B6B6B; }
.price-strip dd { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; color: #111111; }
@media (max-width: 640px) {
  .price-strip { grid-template-columns: minmax(0, 1fr); }
  .price-strip > div { flex-direction: row; align-items: baseline; padding: 20px; }
  .price-strip > div + div { border-left: 0; border-top: 1px solid #E7E5E4; }
  .price-strip dd { font-size: 24px; white-space: nowrap; }
}
/* Docs (scoped to .docs): the guide list beside a 760px reading column of rendered Markdown. */
.docs { --ink: #111111; --body: #57534E; --muted: #6B6B6B; --line: #E7E5E4; --mono: 'Geist Mono', ui-monospace, monospace; display: grid; grid-template-columns: 200px minmax(0, 760px); column-gap: 72px; align-items: start; }
.docs-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.docs-guides { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.docs-guides a { display: block; padding: 7px 12px; margin-left: -12px; border-radius: 8px; color: var(--body); line-height: 1.4; }
.docs-guides a:hover { color: var(--ink); background: rgba(231, 229, 228, 0.6); }
.docs-guides a[aria-current="page"] { color: var(--ink); font-weight: 500; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.docs-menu { display: none; }
.docs-article { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.docs-article > h1 { margin: 0; font-size: 44px; line-height: 1.1; font-weight: 600; letter-spacing: -0.028em; color: var(--ink); }
.docs-body { padding-top: 32px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.7; color: var(--body); }
.docs-body > * { margin: 0; }
.docs-body > * + * { margin-top: 20px; }
.docs-body h2, .docs-body h3, .docs-body h4 { color: var(--ink); scroll-margin-top: 88px; }
.docs-body h2 { font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.docs-body h3 { font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.docs-body h4 { font-size: 16px; line-height: 1.5; font-weight: 600; }
.docs-body > * + h2 { margin-top: 56px; }
.docs-body > * + h3 { margin-top: 36px; }
.docs-body > * + h4 { margin-top: 28px; }
.docs-body > h2 + *, .docs-body > h3 + *, .docs-body > h4 + * { margin-top: 14px; }
.docs-body .docs-anchor { color: inherit; }
.docs-body .docs-anchor::after { content: "#"; margin-left: 10px; color: #A8A29E; font-weight: 400; opacity: 0; transition: opacity 0.15s ease; }
.docs-body .docs-anchor:hover::after, .docs-body .docs-anchor:focus-visible::after { opacity: 1; }
.docs-body a:not(.docs-anchor) { color: var(--ink); text-decoration: underline; text-decoration-color: #A8A29E; text-underline-offset: 3px; }
.docs-body a:not(.docs-anchor):hover { text-decoration-color: var(--ink); }
.docs-body strong { font-weight: 600; color: var(--ink); }
.docs-body code { font-family: var(--mono); font-size: 0.875em; color: var(--ink); background: #F5F5F4; border: 1px solid var(--line); border-radius: 5px; padding: 0.1em 0.35em; overflow-wrap: anywhere; }
.docs-body ul, .docs-body ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.docs-body li > * { margin: 0; }
.docs-body li > * + * { margin-top: 12px; }
.docs-body li::marker { color: #A8A29E; }
.docs-body ol > li::marker { font-family: var(--mono); font-size: 0.875em; }
.docs-body li > ul, .docs-body li > ol { margin-top: 8px; }
.docs-body blockquote { padding: 16px 20px; background: #FFFFFF; border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 10px; }
.docs-body blockquote > * { margin: 0; }
.docs-body blockquote > * + * { margin-top: 12px; }
.docs-body hr { border: 0; border-top: 1px solid var(--line); }
.docs-code { background: #111111; color: #FAFAF9; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.08); }
.docs-code-label { padding: 10px 20px; border-bottom: 1px solid #2A2A2A; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #A8A29E; }
.docs-code pre { margin: 0; padding: 18px 20px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: #FAFAF9; }
.docs-code pre:focus-visible { outline: 2px solid #FAFAF9; outline-offset: -4px; border-radius: 10px; }
.docs-body .docs-code code { font: inherit; color: inherit; background: none; border: 0; padding: 0; overflow-wrap: normal; }
.docs-table { overflow-x: auto; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; }
.docs-table:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.docs-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.docs-table th, .docs-table td { padding: 10px 16px; text-align: left; vertical-align: top; }
.docs-table th { font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); background: #FAFAF9; }
.docs-table td { border-bottom: 1px solid #F0EFEC; }
.docs-table tbody tr:last-child td { border-bottom: 0; }
.docs-table code { white-space: nowrap; }
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .docs-sidebar { display: none; }
  .docs-menu { display: block; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; }
  .docs-menu summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 500; color: var(--ink); }
  .docs-menu summary::-webkit-details-marker { display: none; }
  .docs-menu summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease; }
  .docs-menu[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .docs-menu summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; }
  .docs-menu-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); font-weight: 400; }
  .docs-menu nav { padding: 4px 16px 12px 28px; border-top: 1px solid var(--line); }
  .docs-menu .docs-guides a { padding: 10px 12px; }
}
@media (max-width: 640px) {
  .docs-article > h1 { font-size: 34px; }
  .docs-body h2 { font-size: 23px; }
  .docs-code pre { padding: 16px; font-size: 13px; }
  .docs-code-label { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .docs * { transition: none !important; } }