/* Byteable AEO, engineering theme. Loaded last on every page, and every rule starts with html:root so it wins over the page styles whatever
   the load order. Reference points: the restraint of Roche, Cytiva and Sartorius (white, cool grey, deep navy, one clinical blue),
   hairline rules instead of heavy outlines, small radii, soft shadows, a serif for headlines and a mono for data labels. */

html:root {
  --paper: #FFFFFF;
  --paper-2: #F3F6F9;
  --card: #FFFFFF;
  --ink: #0B2545;
  --ink-2: #34495E;
  --ink-3: #66788A;
  --line: #DCE3EA;
  --rule: #C9D3DD;
  --accent: #0B5CAD;
  --accent-dark: #084A8C;
  --hi: #E6EFF9;
  --hot: #B42318;
  --moss: #0F766E;
  --ok: #1B7F5C;
  --good: #1B7F5C;
  --warn: #9A6A12;
  --bad: #B42318;
  --muted: #66788A;
  --r: 8px;
  --shadow: 0 1px 2px rgba(11, 37, 69, .06), 0 8px 24px rgba(11, 37, 69, .06);
  --shadow-lg: 0 2px 6px rgba(11, 37, 69, .08), 0 22px 50px rgba(11, 37, 69, .14);
}

html:root body { background: var(--paper); color: var(--ink); font-size: 16.5px; line-height: 1.65; }
html:root ::selection { background: #CFE2F6; color: var(--ink); }
html:root :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* type: a serif with authority for headlines, plain sans for reading, mono for labels and data */
html:root h1, html:root h2, html:root h3 { font-family: var(--font-d); font-weight: 500; letter-spacing: -.012em; line-height: 1.14; }
html:root .h-xl { font-size: clamp(2.4rem, 5.2vw, 4.2rem); letter-spacing: -.02em; line-height: 1.06; }
html:root .h-lg { font-size: clamp(1.85rem, 3.5vw, 2.85rem); letter-spacing: -.015em; line-height: 1.12; }
html:root .lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; }
html:root em.mark { font-style: normal; background: none; color: var(--accent); padding: 0; }
html:root .eyebrow { font-size: 11.5px; letter-spacing: .18em; color: var(--accent); font-weight: 500; }
html:root .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 0; background: var(--accent); }
html:root .loop .num, html:root .q4 .num { font-style: normal; font-weight: 400; color: var(--accent) !important; letter-spacing: -.02em; }
html:root .price-foot { font-style: normal; color: var(--ink-2); font-size: 1.1rem; }
html:root .sticker { display: none; }
html:root .scroll-rail { background: var(--accent); }

/* navigation */
html:root .nav { background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
html:root .nav.solid { border-color: var(--line); }
html:root .brand { font-family: var(--font-d); font-weight: 600; letter-spacing: -.005em; }
html:root .brand i { background: var(--ink); border-radius: 5px; }
html:root .nav-links { font-size: 14px; font-weight: 500; color: var(--ink-2); }
html:root .nav-links a:hover { color: var(--accent); }
html:root footer, html:root .foot { border-top: 1px solid var(--line); background: var(--paper-2); }

/* buttons */
html:root .btn { border-radius: 5px; border: 1px solid var(--ink); font-weight: 600; font-size: 14.5px; letter-spacing: .01em; padding: 12px 22px; box-shadow: none; transform: none; }
html:root .btn:hover { transform: none; box-shadow: var(--shadow); }
html:root .btn-lg { padding: 15px 28px; font-size: 16px; }
html:root .btn-ink, html:root .btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
html:root .btn-ink:hover, html:root .btn-primary:hover { background: var(--accent); border-color: var(--accent); }
html:root .btn-hi { background: var(--accent); border-color: var(--accent); color: #fff !important; }
html:root .btn-hi:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
html:root .btn-line { background: transparent; color: var(--ink); }
html:root .btn-line:hover { background: var(--ink); color: #fff; }
html:root .scan input { border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow); font-size: 1.05rem; }
html:root .scan input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); box-shadow: var(--shadow); }
html:root .scan button[type="submit"] { background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 6px; }
html:root .scan button[type="submit"]:hover { background: var(--accent); border-color: var(--accent); }
html:root .chip { border-radius: 4px; border: 1px solid var(--rule); color: var(--ink-2); font-size: 11.5px; }
html:root .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* surfaces: hairline borders and soft elevation */
html:root .area, html:root .product, html:root .cat, html:root .check, html:root .table-wrap, html:root .band-stat, html:root .count-tile,
html:root .tapestry, html:root .cockpit, html:root .deep, html:root .role, html:root .price, html:root .devscene, html:root .frame, html:root .mcard { border-color: var(--rule); }
html:root .cockpit::before { background: radial-gradient(circle at 18% 28%, rgba(11, 92, 173, .07), transparent 52%); }
html:root .cockpit { background: linear-gradient(180deg, #FFFFFF, #F3F6F9); border-radius: 10px; }
html:root .product:hover { transform: none; box-shadow: var(--shadow-lg); }
html:root .cat:hover { transform: none; box-shadow: var(--shadow); border-color: var(--accent); }
html:root .cta-line { background: var(--hi); border: 1px solid #C5D9F0; border-radius: 6px; }
html:root .found { background: var(--hi); border: 1px solid #C5D9F0; border-radius: 6px; color: var(--ink) !important; }
html:root .band, html:root .ab { background: var(--paper-2); }
html:root .photo-band { border-block: 1px solid var(--rule); }

/* status language: restrained, never neon */
html:root .sq { border: 1px solid rgba(11, 37, 69, .28); border-radius: 3px; }
html:root .sq-pass { background: var(--ok); }
html:root .sq-warn { background: repeating-linear-gradient(135deg, #D9A62E 0 4px, #F5E6BC 4px 8px); }
html:root .sq-fail { background: var(--hot); }
html:root .sq-info { background: transparent; border-style: dashed; border-color: var(--ink-3); }
html:root .s-pass .icon { background: var(--ok); border-color: var(--ok); }
html:root .s-warn .icon { background: #C9921E; border-color: #C9921E; color: #fff; }
html:root .s-fail .icon { background: var(--hot); border-color: var(--hot); }
html:root .icon { border: 1px solid var(--rule); }
html:root .dot.ok { background: var(--ok); } html:root .dot.bad { background: var(--hot); } html:root .dot.warn { background: #C9921E; }
html:root .badge { background: var(--hi); color: var(--accent-dark); border: 1px solid #C5D9F0; border-radius: 3px; }
html:root .level { color: var(--accent); }
html:root .tc-discoverability .tap-title, html:root .area.tc-discoverability { color: #0F766E; }
html:root .tc-content .tap-title, html:root .area.tc-content { color: #0B5CAD; }
html:root .tc-bots .tap-title, html:root .area.tc-bots { color: #8A5A12; }
html:root .tc-api .tap-title, html:root .area.tc-api { color: #4B4F9E; }
html:root .tc-footprint .tap-title, html:root .area.tc-footprint { color: #8B2F5B; }

/* floating chips: calm, not stickers */
html:root .chip-float, html:root .vchip { border: 1px solid var(--rule); box-shadow: var(--shadow); font-size: 12px; }
html:root .stage-photo, html:root .vis-stage, html:root .devscene { box-shadow: var(--shadow-lg); border: 1px solid var(--rule); }
html:root .stage-photo { transform: none; }
html:root .dev-phone { box-shadow: var(--shadow-lg); }

/* the hero carries a faint engineering grid, fading out before the next section */
html:root .hero { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #FFFFFF 100%), linear-gradient(rgba(11, 37, 69, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 37, 69, .045) 1px, transparent 1px); background-size: auto, 44px 44px, 44px 44px; background-position: 0 0, -1px -1px, -1px -1px; }

/* pricing: the featured plan is set apart by a rule, not a lift */
html:root .price.hi { transform: none; border-color: var(--accent); background: #F6FAFE; }
html:root .price .flag { background: var(--accent); color: #fff; border-radius: 3px; border: 0; }

/* dark navy bands: light type and a lighter accent so nothing sinks into the background */
html:root .reel .eyebrow, html:root .finale .eyebrow { color: #8FB0D6; }
html:root .reel .eyebrow::before, html:root .finale .eyebrow::before { background: #5B8FD0; }
html:root .reel .lede, html:root .finale .lede { color: #AFC0D2; }
html:root .reel, html:root .finale { background: #0B1B2E; }
html:root .finale .btn-hi { background: #FFFFFF; color: var(--ink) !important; border-color: #FFFFFF; }
html:root .finale .btn-hi:hover { background: #E6EFF9; border-color: #E6EFF9; }
html:root .finale .btn-line { border-color: rgba(255, 255, 255, .6); color: #fff; }
html:root .finale .btn-line:hover { background: #fff; color: var(--ink); }
html:root .finale .tags span { border-color: rgba(255, 255, 255, .25); color: #AFC0D2; }

/* phones: grid children may shrink, and the image stage must not force the column wider than the screen */
html:root .hero-grid > * { min-width: 0; }
@media (max-width: 900px) { html:root .stage { min-height: 0; } html:root body { overflow-x: hidden; } }
@media (max-width: 900px) {
  html:root .out-grid, html:root .demo, html:root .pair, html:root .dash-grid { grid-template-columns: minmax(0, 1fr); }
  html:root .out-grid > *, html:root .out-stack > *, html:root .dash-grid > *, html:root .frame .bar, html:root .frame .bar span { min-width: 0; }
}

/* footer legal line (static product pages) */
html:root footer .legal{display:block;width:100%;margin-top:10px;font-size:13px;color:var(--muted,#5B6675)}
html:root footer .legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}