/* Base rules extracted from the original artboards (shared by every page). */
*{box-sizing:border-box}
body{margin:0;background:#ffffff;color:#4a4d55;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#c10007;text-decoration:none}
a:hover{color:#9a0006}
::selection{background:#c10007;color:#fff}
@keyframes r0blink{0%,100%{opacity:1}50%{opacity:.28}}
.r0-live{animation:r0blink 1.5s ease-in-out infinite}
.r0-card{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.r0-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(21,22,26,.09);border-color:#d7d9de}
@media (max-width:640px){
    table{display:block;overflow-x:auto;max-width:100%}
pre{overflow-x:auto;max-width:100%}
  }

/* ==========================================================================
   reactivezero.ai — shared stylesheet (appended after base.css by tools/build.py)
   ========================================================================== */

/* ---- self-hosted fonts (variable files; no third-party requests) ---- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/space-grotesk-var.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-var.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2')}

/* ---- global ---- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
main{display:block}
.r0-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.r0-skip{position:absolute;left:-9999px;top:0;z-index:100;background:#15161a;color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font:600 14px 'IBM Plex Sans',sans-serif}
.r0-skip:focus{left:0}
:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid #c10007;outline-offset:3px;border-radius:4px}
.r0-on-dark :where(a,button):focus-visible,.r0-on-crimson :where(a,button,input,textarea):focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .r0-live,.r0-pring,.r0-critbox{animation:none!important}
  .r0-pring{opacity:0}
}

/* ---- buttons ---- */
.r0-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:11px 20px;font:600 15px 'IBM Plex Sans',sans-serif;line-height:1.2;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.r0-btn-primary{background:#c10007;color:#fff}
.r0-btn-primary:hover{background:#9a0006;color:#fff}
.r0-btn-secondary{background:#fff;color:#15161a;border-color:#d8dbdf}
.r0-btn-secondary:hover{border-color:#15161a;color:#15161a}
.r0-btn-onred{background:#fff;color:#c10007}
.r0-btn-onred:hover{background:#fff;color:#9a0006}
.r0-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.r0-btn-ghost:hover{border-color:#fff;color:#fff}

/* ---- header / navigation ---- */
.r0-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #ececef}
.r0-nav{max-width:1220px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px}
.r0-brand{display:flex;align-items:center;gap:11px;color:#15161a;flex:0 0 auto}
.r0-brand:hover{color:#15161a}
.r0-brand-text{display:flex;align-items:baseline;gap:8px}
.r0-brand-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;color:#15161a;letter-spacing:-.02em}
.r0-brand-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#c10007;letter-spacing:.02em;border:1px solid #f3d4d4;background:#fdf2f2;border-radius:5px;padding:1px 6px}
.r0-menu{display:flex;align-items:center;gap:22px}
.r0-menu-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
.r0-menu-list > li{position:relative}
.r0-navlink{display:inline-flex;align-items:center;gap:6px;color:#4a4d55;font:500 14.5px 'IBM Plex Sans',sans-serif;padding:8px 10px;border-radius:7px;background:none;border:0;cursor:pointer;line-height:1.2;white-space:nowrap}
.r0-navlink:hover{color:#15161a;background:#f4f5f7}
.r0-navlink[aria-current="page"],.r0-has-sub:has([aria-current="page"]) > .r0-sub-btn{color:#15161a;font-weight:600}
.r0-chev{transition:transform .15s ease;opacity:.7}
.r0-has-sub.is-open > .r0-sub-btn .r0-chev,.r0-has-sub:hover > .r0-sub-btn .r0-chev{transform:rotate(180deg)}
.r0-sub{list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 6px);left:0;min-width:290px;background:#fff;border:1px solid #e4e6ea;border-radius:12px;box-shadow:0 18px 44px rgba(21,22,26,.12);display:none;z-index:60}
.r0-has-sub:hover > .r0-sub,.r0-has-sub:focus-within > .r0-sub,.r0-has-sub.is-open > .r0-sub{display:block}
.r0-sub a{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:8px;color:#15161a;text-decoration:none}
.r0-sub a:hover{background:#f6f7f8;color:#15161a}
.r0-sub a strong{font-weight:600;font-size:14.5px;line-height:1.25}
.r0-sub a span{font-size:12.5px;color:#5f646d;line-height:1.35}
.r0-sub a[aria-current="page"] strong{color:#c10007}
.r0-nav-cta{padding:9px 18px;font-size:14.5px}
.r0-burger{display:none;width:44px;height:44px;border:1px solid #e4e6ea;border-radius:9px;background:#fff;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.r0-burger-bar{display:block;width:18px;height:2px;background:#15161a;border-radius:1px;transition:transform .2s ease,opacity .2s ease}
.r0-header.is-open .r0-burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.r0-header.is-open .r0-burger-bar:nth-child(2){opacity:0}
.r0-header.is-open .r0-burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:960px){
  .r0-nav{padding:8px 16px;min-height:60px}
  .r0-burger{display:flex}
  .r0-menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #ececef;box-shadow:0 20px 40px rgba(21,22,26,.12);padding:8px 16px 18px;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100vh - 60px);overflow-y:auto}
  .r0-header.is-open .r0-menu{display:flex}
  .r0-menu-list{flex-direction:column;align-items:stretch;gap:0}
  .r0-menu-list > li{border-top:1px solid #f0f1f3}
  .r0-menu-list > li:first-child{border-top:0}
  .r0-navlink{display:flex;width:100%;padding:13px 6px;font-size:16px;border-radius:0}
  .r0-navlink:hover{background:none}
  .r0-sub-btn{pointer-events:none;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5f646d;padding:14px 6px 6px}
  .r0-sub-btn .r0-chev{display:none}
  .r0-sub{display:block;position:static;min-width:0;border:0;box-shadow:none;padding:0 0 8px;background:none}
  .r0-sub a{padding:9px 6px}
  .r0-sub a span{display:none}
  .r0-nav-cta{margin-top:12px;width:100%;padding:13px 18px;font-size:15.5px}
}

/* ---- footer ---- */
.r0-footer-h{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a9098;margin-bottom:12px}
.r0-footer-links{display:flex;flex-direction:column;gap:9px}
.r0-footer-links a,.r0-footer-legal a{color:#a7adb4;font-size:14px;text-decoration:none}
.r0-footer-links a:hover,.r0-footer-legal a:hover{color:#fff}
.r0-footer-legal a{font-size:inherit}

/* ---- forms (demo / waitlist) ---- */
.r0-form{display:flex;flex-direction:column;gap:12px}
.r0-field{display:flex;flex-direction:column;gap:6px}
.r0-label{font:500 13.5px 'IBM Plex Sans',sans-serif;color:#15161a}
.r0-input,.r0-textarea,.r0-select{width:100%;border:1px solid #d8dbdf;border-radius:9px;padding:13px 14px;font:400 16px 'IBM Plex Sans',sans-serif;color:#15161a;background:#fff}
.r0-textarea{min-height:110px;resize:vertical}
.r0-input:focus,.r0-textarea:focus,.r0-select:focus{outline:none;border-color:#c10007;box-shadow:0 0 0 3px rgba(193,0,7,.14)}
.r0-choice{display:flex;gap:8px;flex-wrap:wrap}
.r0-choice label{flex:1 1 180px;display:flex;align-items:center;gap:10px;border:1px solid #d8dbdf;border-radius:9px;padding:11px 12px;font-size:14.5px;color:#15161a;cursor:pointer}
.r0-choice label:has(input:checked){border-color:#c10007;background:#fdf2f2}
.r0-choice input{accent-color:#c10007;margin:0}
.r0-form-note{font-size:12.5px;color:#5f646d;margin:4px 0 0;line-height:1.5}
.r0-form-note a{font-weight:600}
.r0-form-ok{margin:8px 0 0;padding:12px 14px;border:1px solid #bfe3cd;background:#eef8f2;border-radius:9px;color:#15161a;font-size:14px}
.r0-form-err{margin:8px 0 0;padding:12px 14px;border:1px solid #f3d4d4;background:#fdf2f2;border-radius:9px;color:#15161a;font-size:14px}
.r0-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---- case-study phase rows: wrap into two aligned lines on phones ---- */
@media (max-width:600px){
  .r0-phase{display:grid!important;grid-template-columns:26px 9px minmax(0,1fr) auto;column-gap:12px;row-gap:6px;align-items:center}
  .r0-phase > :nth-child(1){grid-column:1;grid-row:1}
  .r0-phase > :nth-child(2){grid-column:2;grid-row:1}
  .r0-phase > :nth-child(3){grid-column:3 / span 2;grid-row:1;min-width:0!important}
  .r0-phase > :nth-child(4){grid-column:3;grid-row:2;justify-self:start}
  .r0-phase > :nth-child(5){grid-column:4;grid-row:2;justify-self:start}
}

/* ---- hero diagram: SVG on desktop, stacked list on phones (SVG text is unreadable below ~640px) ---- */
.r0-diagram-mobile{display:none}
@media (max-width:640px){
  .r0-diagram-desk{display:none!important}
  .r0-diagram-mobile{display:block}
}
.r0-dm{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.r0-dm li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:13.5px;color:#15161a;line-height:1.45}
.r0-dm i{display:block;width:10px;height:10px;border-radius:50%;margin-top:5px}
.r0-dm strong{display:block;font:600 11.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#5f646d;margin-bottom:2px}
.r0-dm code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#4a4d55}

/* ---- misc components used by several pages ---- */
.r0-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#c10007;margin:0 0 12px}
.r0-prose p{margin:0 0 16px}
.r0-prose ul{margin:0 0 16px;padding-left:22px}
.r0-prose li{margin:0 0 6px}
.r0-prose h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(24px,3.2vw,34px);line-height:1.1;letter-spacing:-.02em;color:#15161a;margin:44px 0 12px}
.r0-prose h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;line-height:1.25;color:#15161a;margin:28px 0 8px}
.r0-prose a{text-decoration:underline;text-underline-offset:3px}
details.r0-faq{border:1px solid #e7e9ec;border-radius:11px;padding:0 18px;background:#fff}
details.r0-faq + details.r0-faq{margin-top:10px}
details.r0-faq summary{cursor:pointer;list-style:none;padding:16px 0;font:600 16px 'IBM Plex Sans',sans-serif;color:#15161a;display:flex;justify-content:space-between;gap:16px;align-items:center}
details.r0-faq summary::-webkit-details-marker{display:none}
details.r0-faq summary::after{content:'+';font-family:'IBM Plex Mono',monospace;color:#c10007;font-size:18px;flex:0 0 auto}
details.r0-faq[open] summary::after{content:'−'}
details.r0-faq .r0-faq-a{padding:0 0 18px;color:#4a4d55;font-size:15px;line-height:1.65}
details.r0-faq .r0-faq-a p{margin:0 0 10px}
.r0-table{width:100%;border-collapse:collapse;font-size:14.5px}
.r0-table th,.r0-table td{text-align:left;padding:12px 14px;border-bottom:1px solid #e7e9ec;vertical-align:top}
.r0-table th{font:600 12px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#5f646d;background:#fafbfc}

/* ---- related-pages block (internal links, rendered from the `related` META key) ---- */
.r0-related{max-width:1120px;margin:0 auto;padding:clamp(30px,4vw,48px) 24px;border-top:1px solid #ececef}
.r0-related-h{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#5f646d;margin:0 0 14px}
.r0-related ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.r0-related li{margin:0}
.r0-related a{display:block;border:1px solid #e7e9ec;border-radius:12px;padding:14px 16px;color:#15161a;text-decoration:none;font-size:14.5px;line-height:1.45;background:#fff}
.r0-related a:hover{border-color:#c10007;color:#15161a}

/* ---- responsive hard line breaks in headings: <br class="r0-br"> is a desktop-only break ---- */
@media (max-width:640px){.r0-br{display:none}}