/* Ambio Edge — light/dark theme layer.
   Dark is the base design (inline <style> on each page). This file adds:
   the theme toggle button, the light token set, and light overrides for
   hardcoded dark colors. Theme is set on <html data-theme> by the inline
   head script before first paint; see /theme.js.
   The "GENERATED" block below is produced from the pages' inline CSS by
   scripts/gen-theme-css.py — rerun it after adding hardcoded colors to a page. */

/* QA 2026-10-11: footer fine print readable on phones (was 10.2-10.9px) */
@media (max-width:640px){.site-footer .cred{font-size:.72rem}.site-footer .footer-bottom>span{font-size:.75rem;line-height:1.5}}
/* services tag pills wrap on phones; "REQUIRED" pseudo-badge removed (duplicated the eyebrow and overlapped it on phones) */
.services-intro::before{content:none!important;display:none!important}
@media (max-width:640px){.tier-group-label{flex-wrap:wrap}.tier-group-label .tag{white-space:normal!important;letter-spacing:.08em!important;max-width:100%}.tier-group-label .line{display:none}}
/* sticky mobile CTA bar: buttons may shrink; never push the Call button off-screen */
.mobile-assess-bar .btn{min-width:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:.85rem}
.mobile-assess-bar .btn-ghost{min-width:4.6rem!important;flex:0 0 auto}

:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{
  color-scheme:light;
  --bg-0:#f5f8fc;--bg-1:#e8f0f8;--bg-2:#ffffff;--bg-3:#e3ebf5;
  --surface:rgba(12,40,80,.03);--surface-strong:rgba(12,40,80,.06);
  --line:rgba(12,40,80,.12);--line-strong:rgba(12,40,80,.22);
  --text-hi:#0b1a2e;--text-mid:#3b4f69;--text-low:#4d6078;
  --accent:#0a7599;--accent-2:#0c7d56;--accent-warm:#a85a12;--accent-deep:#086585;--danger:#c62f2f;
  --shadow-soft:0 20px 50px rgba(15,35,70,.12);--shadow-focus:0 0 0 3px rgba(10,117,153,.45);
}

/* Depicted screens (NOC dashboard, topology diagram, photo carousel, product
   screenshot) stay dark in light mode: re-declare the dark tokens on them. */
:root[data-theme="light"] :is(.noc-panel,.topology,.field-carousel,.gate-preview-frame){
  color-scheme:dark;
  --bg-0:#070c18;--bg-1:#0c1427;--bg-2:#111c36;--bg-3:#162544;
  --surface:rgba(255,255,255,.04);--surface-strong:rgba(255,255,255,.08);
  --line:rgba(138,176,216,.16);--line-strong:rgba(138,176,216,.28);
  --text-hi:#f5faff;--text-mid:#b2c4db;--text-low:#7c92af;
  --accent:#4AC8E8;--accent-2:#7ce6b8;--accent-warm:#f5b878;--accent-deep:#2ea4c7;--danger:#ff8080;
}
:root[data-theme="light"] .topology{background:linear-gradient(155deg,#0c1428 0%,#080e1c 100%)}

/* Theme toggle button (hidden without JS — no-JS visitors get the dark base) */
.theme-toggle{display:none;align-items:center;justify-content:center;flex:0 0 auto;width:2.4rem;height:2.4rem;padding:0;margin-left:-.6rem;border:1px solid var(--line);border-radius:.6rem;background:none;color:var(--text-mid);cursor:pointer;transition:color .15s,border-color .15s,background-color .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:root[data-theme] .theme-toggle{display:inline-flex}
.theme-toggle:hover{color:var(--text-hi);border-color:var(--line-strong);background:var(--surface-strong)}
.theme-toggle svg{width:1.1rem;height:1.1rem}
:root[data-theme="dark"] .theme-toggle .i-moon,:root[data-theme="light"] .theme-toggle .i-sun{display:none}
.nav-shell > nav{margin-inline:auto}
@media (pointer:coarse){.theme-toggle{width:2.75rem;height:2.75rem}}
.theme-switching,.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:none!important}

/* Light: brand wordmark — darker cyan, no glow; red EDGE kept, glow toned down */
:root[data-theme="light"] .brand-text .bt-main .bt-am{color:#0a86b8;text-shadow:none}
:root[data-theme="light"] .brand-text .bt-main .bt-edge{text-shadow:none}
:root[data-theme="light"] .brand .brand-mark{filter:none}
:root[data-theme="light"] .brand:hover .brand-mark{filter:drop-shadow(0 2px 12px rgba(10,130,175,.3))}
:root[data-theme="light"] [style*="text-decoration-color:rgba(255,255,255"]{text-decoration-color:rgba(12,40,80,.3)!important}
:root[data-theme="light"] [style*="border-top:1px dashed rgba(255,255,255"]{border-top-color:rgba(12,40,80,.14)!important}
:root[data-theme="light"] .number-big{background:linear-gradient(180deg,#0b1a2e 0%,#3b5570 100%);-webkit-background-clip:text;background-clip:text}
:root[data-theme="light"] .partner-logo{box-shadow:0 0 0 1px rgba(12,40,80,.1),0 6px 20px rgba(15,35,70,.08)}

/* Light: primary actions are solid ink, not cyan (reads as an established firm) */
:root[data-theme="light"] :is(.btn-primary,.submit-btn,.matcher-result-cta){background:#0f1b2a;color:#fff;box-shadow:0 10px 24px -14px rgba(15,27,42,.6)}
:root[data-theme="light"] :is(.btn-primary,.submit-btn,.matcher-result-cta):hover{background:#1c2d42}

/* Light: inline-SVG list icons use dark-theme hexes */
:root[data-theme="light"] .fit-list path[stroke="#7ce6b8"]{stroke:var(--accent-2)}
:root[data-theme="light"] .fit-list path[stroke="#ff8080"]{stroke:var(--danger)}

/* Nav dropdown: inline CSS hardcodes a dark panel; give it a light surface in light mode. */
:root[data-theme="light"] .menu{background:#ffffff;box-shadow:0 24px 60px -20px rgba(15,35,70,.28)}
:root[data-theme="light"] .menu-col a{color:var(--text-mid)}
:root[data-theme="light"] .menu-col a:hover,:root[data-theme="light"] .menu-col a:focus-visible{background:var(--surface-strong);color:var(--text-hi)}

/* Header: keep nav labels and header buttons on one line (desktop-mode phones ~920-1000px wrapped "Services" and its chevron). */
.nav-links a,.nav-shell .btn{white-space:nowrap}
@media (min-width:901px) and (max-width:1080px){.nav-links a{padding:.5rem .6rem}.nav-util{display:none}}

/* ---- Mobile polish (2026-10-09) ---- */
/* Menu button: inline-SVG hamburger morphing to an X; same border/radius as the theme toggle. */
.nav-mobile-toggle{color:var(--text-mid);border:1px solid var(--line);border-radius:.6rem;background:none;transition:color .15s,border-color .15s,background-color .15s}
.nav-mobile-toggle:hover,.nav-mobile-toggle.active{color:var(--text-hi);border-color:var(--line-strong);background:var(--surface-strong)}
.nav-mobile-toggle .i-burger{width:1.375rem;height:1.375rem;display:block;overflow:visible}
.nav-mobile-toggle .i-burger path{transform-origin:12px 12px;transition:transform .25s ease,opacity .2s ease}
.nav-mobile-toggle.active .i-burger .l1{transform:rotate(45deg) translateY(5px)}
.nav-mobile-toggle.active .i-burger .l2{opacity:0}
.nav-mobile-toggle.active .i-burger .l3{transform:rotate(-45deg) translateY(-5px)}

/* Header controls never shrink; the brand gives way instead (the menu button
   was flex-shrinking to ~7px and getting pushed off the right edge). */
.nav-shell > .theme-toggle,.nav-shell > .nav-mobile-toggle{flex:0 0 auto}
.nav-shell > .brand{min-width:0;flex:0 1 auto}
@media (max-width:900px){
  .nav-shell{gap:.5rem}
  .nav-shell > .theme-toggle{margin-left:0}
  .nav-shell > .theme-toggle,.nav-shell > .nav-mobile-toggle{width:2.75rem;height:2.75rem}
  .nav-links a{min-height:2.75rem;display:flex;align-items:center}
  .nav-links.active{max-height:calc(100vh - 5rem);max-height:calc(100dvh - 5rem);overflow-y:auto}
  /* Opened menu: solid panel (the 97-98% tint let the hero headline bleed through). */
  .site-header .nav-links{background:var(--bg-0);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
  :root[data-theme="light"] .site-header .nav-links{background:#fff;box-shadow:0 18px 40px -18px rgba(15,35,70,.3)}
  /* Closed menu is out of the tab order and the accessibility tree; visibility
     flips only after the collapse animation finishes (and at once on open). */
  .site-header .nav-links{visibility:hidden;transition:max-height .3s,opacity .25s,visibility 0s linear .3s}
  .site-header .nav-links.active{visibility:visible;transition-delay:0s}
}
@media (max-width:600px){
  .nav-shell{min-height:3.75rem}
  .site-header .brand{gap:.5rem}
  .site-header .brand img,.site-header .brand .brand-mark{height:38px}
  .site-header .brand-text .bt-main{font-size:1.06rem}
  .site-header .brand-text .bt-sub{font-size:.5rem;margin-top:.3em}
}
@media (max-width:340px){
  .site-header .brand img,.site-header .brand .brand-mark{height:34px}
  .site-header .brand-text .bt-main{font-size:.96rem}
}

/* Back-to-top: the sticky bottom bar already covers navigation on phones, and
   the floating button sat over text. Hide it there; keep it clear of the bar above. */
@media (max-width:600px){.fab-top{display:none!important}}
@media (min-width:601px) and (max-width:900px){.fab-top{bottom:calc(5.6rem + env(safe-area-inset-bottom))}}
/* Room under the last content (footer, last FAQ, form submit) for the sticky bar + home indicator. */
@media (max-width:900px){body:has(.mobile-assess-bar){padding-bottom:calc(5.6rem + env(safe-area-inset-bottom))}}

/* Tables. Page-level nowrap on .eol-table cells made prose columns one
   1000-2500px line (sideways scroll even on desktop); let cells wrap. Only
   part-number columns (.pn-last) stay unbroken. Phones get stacked cards. */
table.eol-table th,table.eol-table td{white-space:normal}
table.eol-table.pn-last td:last-child{white-space:nowrap}
@media (max-width:600px){
  .stack-sm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stack-sm,.stack-sm tbody,.stack-sm tr,.stack-sm td,.stack-sm tbody th{display:block;width:100%}
  table.stack-sm{font-size:.95rem!important}
  .stack-sm tr{border:1px solid var(--line);border-radius:var(--radius-sm,.6rem);margin-bottom:.6rem;padding:.4rem 0;background:var(--surface)}
  table.stack-sm td,table.stack-sm tbody th{border:none!important;padding:.3rem .85rem!important;text-align:left;white-space:normal!important;min-width:0}
  .stack-sm td::before,.stack-sm tbody th::before{content:attr(data-label);display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-low);margin-bottom:.1rem}
  .stack-sm td:first-child{color:var(--text-hi);font-weight:600}
  .stack-sm td:first-child::before{display:none}
  table.stack-sm.pn-last td:last-child{white-space:nowrap!important;font-size:.9rem;color:var(--text-hi)}
  .eol-table-wrap:has(.stack-sm){overflow:visible}
}
.scroll-hint-md{display:none;font-size:.78rem;color:var(--text-low);margin-top:.4rem}
@media (min-width:601px) and (max-width:900px){.scroll-hint-md{display:block}}

/* Phone readability: secondary card copy was 13-14.7px; lift running text to
   15px and fine print to ~13.5px. */
@media (max-width:600px){
  :is(.why,.tier-features li,.tier-outcome p,.process-step p,.guardrail p,.timeline-step p,.g-feature p,.pain-list p,.buy-grid p,.partners-panel p,.variant-cta,.services-intro-note,.model-card p,.why-card p,.variant-note,.ssl-note,.cta-quick p,.number-foot,.case-metric p,.cap-desc,.outcome-card p,.cta-check li,.expect-list li,.engineer-pedigree){font-size:.94rem!important}
  :is(.numbers-footnote,.tm-line,.tier-note,.footer-tag){font-size:.84rem!important}
}

/* Sticky bottom bar: phones/tablets get no backdrop blur (desktop-only in the
   inline CSS), so the 90-94% tint let body copy show through. Effectively
   opaque here. `body` raises specificity over the generated light rule below. */
@media (max-width:900px){
  body .mobile-assess-bar{background:rgba(7,12,24,.97)}
  :root[data-theme="light"] body .mobile-assess-bar{background:rgba(255,255,255,.985)}
}

/* iOS Safari zooms into any focused field under 16px. */
@media (max-width:600px){
  body :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]),select,textarea){font-size:16px!important}
}

/* ---- sitewide nav + footer 2026-10-10 (generated markup: scripts/sitewide-nav.py) ---- */
.menu-single{grid-template-columns:max-content}
.menu-sub{font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--text-low);padding:.5rem .5rem .1rem}
.menu-col .menu-title+.menu-sub{padding-top:0}
:root[data-theme="light"] .menu{background:#fff;border-color:rgba(15,35,70,.14);box-shadow:0 24px 50px -24px rgba(15,35,70,.32)}
.site-footer .footer-grid.footer-v2{grid-template-columns:minmax(17.5rem,1.4fr) repeat(5,minmax(8rem,1fr));gap:2rem 1.5rem;margin-bottom:1.75rem}
.footer-v2 .footer-brand .brand{margin-right:1rem}
.footer-v2 .footer-col{margin:0;min-width:0}
.footer-v2 .footer-col>summary{list-style:none;position:relative;padding-bottom:.55rem;margin-bottom:.7rem;letter-spacing:.16em;pointer-events:none}
.footer-v2 .footer-col>summary::-webkit-details-marker{display:none}
.footer-v2 .footer-col>summary::after{content:"";position:absolute;left:0;bottom:0;width:1.75rem;height:1px;background:var(--accent);opacity:.55}
.footer-v2 .footer-links{gap:.1rem}
.footer-v2 .footer-links a{line-height:1.35}
.footer-v2 .footer-sub{font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--text-low);margin-top:.6rem;padding-bottom:.05rem}
.footer-v2 .footer-sub:first-child{margin-top:0}
.footer-v2 .footer-contact{margin-top:1.15rem;display:grid;gap:.5rem}
.footer-v2 .fc-row{display:flex;align-items:flex-start;gap:.55rem}
.footer-v2 .fc-row>svg{width:15px;height:15px;flex:none;margin-top:.22rem;color:var(--accent);opacity:.8}
.footer-v2 .fc-row a{padding:0}
.footer-v2 .fc-addr span{line-height:1.5}
.footer-v2 .copy-btn{border:0;padding:.18rem;margin-left:.15rem;opacity:.55;border-radius:5px;line-height:0}
.footer-v2 .copy-btn:hover,.footer-v2 .copy-btn:focus-visible{opacity:1;background:rgba(127,127,127,.12)}
.footer-v2 .copy-btn svg{width:13px;height:13px}
.footer-v2 .copy-btn.copied{opacity:1;color:var(--accent-2)}
.footer-v2 .copy-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.footer-company ul{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;padding:1rem 0 .9rem;margin:0;border-top:1px solid var(--line)}
.footer-company a{color:var(--text-mid);font-size:.82rem;text-decoration:none}
.footer-company a:hover{color:var(--accent)}
.footer-company+.footer-bottom{border-top:0;padding-top:.2rem}
@media (min-width:901px) and (max-width:1180px){
  .site-footer .footer-grid.footer-v2{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-v2 .footer-brand{grid-column:1/-1;max-width:40rem}
}
@media (max-width:900px){
  .site-footer .footer-grid.footer-v2{grid-template-columns:1fr;gap:0}
  .footer-v2 .footer-brand{margin-bottom:1.5rem}
  .footer-v2 .footer-col{border-top:1px solid var(--line)}
  .footer-v2 .footer-col:last-of-type{border-bottom:1px solid var(--line)}
  .footer-v2 .footer-col>summary{pointer-events:auto;cursor:pointer;margin:0;padding:1rem 0;display:flex;justify-content:space-between;align-items:center;min-height:2.75rem}
  .footer-v2 .footer-col>summary::after{position:static;width:.5rem;height:.5rem;background:none;border-right:1.5px solid var(--text-low);border-bottom:1.5px solid var(--text-low);transform:rotate(45deg);opacity:1;margin:0 .25rem .2rem 0;transition:transform .2s}
  .footer-v2 .footer-col[open]>summary::after{transform:rotate(-135deg);margin-bottom:-.2rem}
  .footer-v2 .footer-col .footer-links{padding-bottom:1rem}
  .footer-v2 .footer-links a{padding:.4rem 0}
  .footer-company ul{border-top:0;padding-top:1.25rem;gap:.5rem 1.25rem}
}

/* QA final polish 2026-10-11: CTA aside not stretched; phone buttons centered; no blank strip under footer */
.cta-quick{align-self:start}
@media (max-width:600px){.btn{justify-content:center;text-align:center;gap:.5rem}}
@media (max-width:900px){body:has(.mobile-assess-bar){padding-bottom:0}body:has(.mobile-assess-bar) .site-footer{padding-bottom:calc(2rem + 5.6rem + env(safe-area-inset-bottom))}}
/* Polish 2026-10-11 (round 2) */
/* Services: plan fine print as three short cards instead of one long column */
.plan-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0 0 2.2rem}
.plan-note{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);padding:1.15rem 1.25rem}
.plan-note h3{font-size:1rem;margin:0 0 .45rem;color:var(--text-hi)}
.plan-note p{font-size:.92rem;color:var(--text-mid);margin:0}
@media (max-width:900px){.plan-notes{grid-template-columns:1fr}}
:root[data-theme="light"] .plan-note{background:#fff}
/* Engineer + partner cards: same top edge and height; partner logo centered in the space under the text */
.engineer-grid .partners-panel{margin-top:0;display:flex;flex-direction:column;gap:1.5rem}
.engineer-grid .partner-logo{margin:auto;max-width:260px}
/* Contact map: tinted grid placeholder until the lazy iframe paints */
.map-frame{min-height:420px;background:radial-gradient(circle at 50% 46%,rgba(74,200,232,.35) 0 7px,rgba(74,200,232,.12) 8px 22px,transparent 23px),repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 56px),repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 56px),var(--bg-1)}
@media (max-width:900px){.map-frame{min-height:340px}}
/* Phone model-comparison tables: narrower columns so the next model peeks in */
@media (max-width:600px){
  .spec-wrap .spec-table.compare td{white-space:normal;min-width:8.5rem}
  .spec-wrap .spec-table.compare :is(th[scope=row],thead th:first-child){min-width:6.5rem;max-width:7.5rem}
}
/* Short text-only sections (service area, related links, sources): less dead space */
.section:is([aria-labelledby="area-title"],[aria-labelledby="related-title"],[aria-labelledby="sources-title"],[aria-label="Related guides"]){padding-block:clamp(2.5rem,5vw,3.5rem)}
/* Long URLs in cards wrap instead of widening the grid */
.diff-grid>*{min-width:0}
.diff-card a,.src-list a{overflow-wrap:anywhere}
/* Stat cells holding words, not numbers */
.number-big.number-word{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.15;overflow-wrap:anywhere}
/* QA visual pass 2026-10-11 */
html{scroll-padding-top:5rem}
h1,h2{text-wrap:balance}
.nowrap{white-space:nowrap}
@media (min-width:601px){.nowrap-md{white-space:nowrap}}

/* Sticky header: opaque on phones/tablets (no blur below 901px, body copy showed through). */
@media (max-width:900px){
  body .site-header{background:var(--bg-0)}
  :root[data-theme="light"] body .site-header{background:var(--bg-0)}
}

/* Eyebrows that wrap: dot sits on the first line; tighter tracking on phones. */
.eyebrow{align-items:flex-start}
.eyebrow::before{flex:none;margin-top:.45em}
@media (max-width:600px){.eyebrow{letter-spacing:.1em}}

/* Differentiator cards, sitewide (services.html had the markup but no rules).
   2 columns, 3 when there are exactly 3 cards, 1 on phones; an odd last card
   spans the row instead of leaving a hole. Overrides the pages' 900/1100px collapse. */
.diff-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.diff-card{border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));padding:1.5rem;transition:transform .25s,border-color .25s,box-shadow .25s}
.diff-card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.diff-card h3{font-size:var(--fs-h3);margin-bottom:.5rem}
.diff-card h3 a{color:inherit;text-decoration:none}
.diff-card p{font-size:.95rem;color:var(--text-mid)}
.diff-card a.more{color:var(--accent);text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap}
.diff-card a.more:hover,.diff-card a.more:focus-visible{text-decoration:underline}
@media (min-width:641px){.diff-grid>:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:901px){
  .diff-grid:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .diff-grid:has(>:nth-child(3):last-child)>:last-child{grid-column:auto}
}
@media (max-width:640px){.diff-grid{grid-template-columns:1fr}}

/* Services featured-tier badge: one line, never over the title; inline above it on phones. */
.tier-badge{white-space:nowrap;max-width:calc(100% - 2.8rem);overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.tier-card .tier-badge{position:static;display:inline-block;align-self:flex-start;max-width:100%;letter-spacing:.08em}}

/* Light theme: cards had a ~1.1:1 edge; give them a white surface and a soft shadow. */
:root[data-theme="light"] body :is(.tier-card:not(.is-featured),.diff-card,.numbers-grid){background:#fff;box-shadow:0 1px 2px rgba(15,35,70,.06),0 8px 24px rgba(15,35,70,.06)}
:root[data-theme="light"] body :is(.tier-card,.diff-card):hover{box-shadow:0 2px 4px rgba(15,35,70,.06),0 18px 40px -12px rgba(15,35,70,.18)}

/* Long fine print reads as prose, not a terminal dump; mono stays on short labels. */
:is(.tier-note,.numbers-footnote,.services-intro-note,.matcher-result-note){font-family:var(--font-body);font-size:.9rem;letter-spacing:0;color:var(--text-mid);max-width:64ch}

/* Table headers readable; copy buttons look enabled. */
table.plain th,:is(.spec-table,.price-table) thead th{color:var(--text-mid);font-size:.72rem}
.copy-btn{border-style:solid}

/* Mid-width (601-900px) scrolling tables keep the row label in view. */
@media (min-width:601px) and (max-width:900px){
  .eol-table-wrap table.eol-table :is(thead th,tbody th,tbody td):first-child{position:sticky;left:0;z-index:1;background:var(--bg-0);box-shadow:1px 0 0 var(--line)}
}

/* Home before/after diagram: legible on phones by scrolling instead of shrinking. */
.topology-hint{display:none;font-size:.78rem;color:var(--text-low);margin:.4rem 0 0}
@media (max-width:600px){
  .topology-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .topology-scroll .topology-svg{min-width:640px;max-height:none}
  .topology-hint{display:block}
}
/* Carousel dots on a backing pill so they don't sit on chart data. */
.field-dots{background:rgba(8,16,32,.6);padding:6px 10px;border-radius:999px}

/* ---- GENERATED light overrides for hardcoded colors ---- */
:root[data-theme="light"] .atmosphere{background:radial-gradient(ellipse 80% 50% at 85% -5%, rgba(10,130,175,0.198), transparent 60%), radial-gradient(ellipse 70% 60% at 10% 40%, rgba(12,150,100,0.096), transparent 60%), radial-gradient(ellipse 60% 40% at 90% 75%, rgba(10,130,175,0.09), transparent 60%), linear-gradient(180deg,var(--bg-1) 0%,var(--bg-0) 35%,var(--bg-0) 100%)}
:root[data-theme="light"] .atmosphere::before{background-image:linear-gradient(to right, rgba(12,40,80,0.065) 1px, transparent 1px),linear-gradient(to bottom, rgba(12,40,80,0.065) 1px, transparent 1px)}
:root[data-theme="light"] .site-header{background:rgba(255,255,255,0.892)}
@supports (backdrop-filter:blur(1px)){@media (min-width:901px){:root[data-theme="light"] .site-header{background:rgba(255,255,255,0.73)}}}
:root[data-theme="light"] .nav-links{background:rgba(255,255,255,0.73)}
:root[data-theme="light"] .nav-links a:hover,:root[data-theme="light"] .nav-links a:focus-visible{background:rgba(12,40,80,0.094)}
:root[data-theme="light"] .nav-links a.is-current{background:rgba(10,130,175,0.126);box-shadow:inset 0 0 0 1px rgba(10,130,175,0.225)}
:root[data-theme="light"] .mobile-assess-bar{background:rgba(255,255,255,0.94);box-shadow:0 16px 46px rgba(15,35,70,0.132)}
:root[data-theme="light"] .btn-primary{--accent:#4AC8E8;--accent-2:#7ce6b8;--accent-deep:#2ea4c7;box-shadow:0 10px 30px -12px rgba(10,130,175,0.495)}
:root[data-theme="light"] .btn-primary:hover,:root[data-theme="light"] .btn-primary:focus-visible{box-shadow:0 14px 40px -12px rgba(10,130,175,0.585)}
:root[data-theme="light"] .btn-ghost{border-color:rgba(12,40,80,0.22);background:rgba(255,255,255,0.65)}
:root[data-theme="light"] .btn-ghost:hover,:root[data-theme="light"] .btn-ghost:focus-visible{border-color:rgba(12,40,80,0.35);background:rgba(12,40,80,0.085)}
:root[data-theme="light"] .about-hero::before{background:radial-gradient(circle at 35% 35%, rgba(10,130,175,0.27), rgba(10,130,175,0.018) 60%, transparent)}
:root[data-theme="light"] .about-hero::after{background:radial-gradient(circle at 60% 40%, rgba(12,150,100,0.144), transparent 60%)}
:root[data-theme="light"] .numbers-grid{background:linear-gradient(180deg,rgba(255,255,255,0.75),rgba(255,255,255,0.6))}
:root[data-theme="light"] .diff-card{background:linear-gradient(180deg,rgba(255,255,255,0.75),rgba(255,255,255,0.625))}
:root[data-theme="light"] .approach-step{background:rgba(255,255,255,0.76)}
:root[data-theme="light"] .step-num{background:rgba(10,130,175,0.072);border:1px solid rgba(10,130,175,0.225)}
:root[data-theme="light"] .engineer-card{background:radial-gradient(circle at 10% 0%, rgba(10,130,175,0.126), transparent 45%),linear-gradient(180deg,rgba(255,255,255,0.91),rgba(255,255,255,0.73))}
:root[data-theme="light"] .engineer-avatar{--accent:#4AC8E8;--accent-2:#7ce6b8;--accent-deep:#2ea4c7;box-shadow:0 0 0 4px rgba(10,130,175,0.126)}
:root[data-theme="light"] .engineer-pedigree{background:rgba(10,130,175,0.054)}
:root[data-theme="light"] .cred{background:rgba(255,255,255,0.8)}
:root[data-theme="light"] .fit-card{background:rgba(255,255,255,0.65)}
:root[data-theme="light"] .fit-card.is-no{border-top:3px solid rgba(198,47,47,0.7)}
:root[data-theme="light"] .industry-tags .cred{background:rgba(10,130,175,0.072);border-color:rgba(10,130,175,0.225)}
:root[data-theme="light"] .partners-panel{background:rgba(255,255,255,0.65)}
:root[data-theme="light"] .cta-shell{background:radial-gradient(ellipse at 100% 0%, rgba(10,130,175,0.18), transparent 60%), radial-gradient(ellipse at 0% 100%, rgba(12,150,100,0.08), transparent 50%), linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,255,255,0.65))}
:root[data-theme="light"] .cta-quick{background:rgba(255,255,255,0.73)}
:root[data-theme="light"] .cta-meta{border-top:1px dashed rgba(12,40,80,0.112)}
:root[data-theme="light"] .site-footer{background:rgba(255,255,255,0.76)}
:root[data-theme="light"] .fab-top{border:1px solid rgba(10,130,175,0.45);box-shadow:0 10px 30px -6px rgba(10,130,175,0.45)}
@media (max-width:900px){:root[data-theme="light"] .nav-links{background:rgba(255,255,255,0.97)}}
:root[data-theme="light"] .menu{box-shadow:0 24px 60px -20px rgba(15,35,70,0.154)}
:root[data-theme="light"] .bk-overlay{background:rgba(255,255,255,0.832)}
:root[data-theme="light"] .bk-dialog{box-shadow:0 30px 80px -20px rgba(15,35,70,0.154)}
:root[data-theme="light"] .portal-card{border:1px solid var(--border,rgba(12,40,80,0.148));background:rgba(255,255,255,0.65)}
:root[data-theme="light"] .contact-hero::before{background:radial-gradient(circle at 35% 35%, rgba(10,130,175,0.288), rgba(10,130,175,0.018) 60%, transparent)}
:root[data-theme="light"] .contact-hero::after{background:radial-gradient(circle at 60% 40%, rgba(12,150,100,0.144), transparent 60%)}
:root[data-theme="light"] .path-card{background:linear-gradient(180deg,rgba(255,255,255,0.75),rgba(255,255,255,0.6))}
:root[data-theme="light"] .path-card:hover{box-shadow:0 18px 48px -20px rgba(15,35,70,0.176)}
:root[data-theme="light"] .path-card.is-featured{border-color:rgba(10,130,175,0.36);background:radial-gradient(ellipse at 0% 0%, rgba(10,130,175,0.126), transparent 55%),linear-gradient(180deg,rgba(255,255,255,0.8),rgba(255,255,255,0.61));box-shadow:0 0 0 1px rgba(10,130,175,0.108), 0 24px 60px -24px rgba(10,130,175,0.225)}
:root[data-theme="light"] .path-icon{background:rgba(10,130,175,0.09);border:1px solid rgba(10,130,175,0.27)}
:root[data-theme="light"] .info-card,:root[data-theme="light"] .expect-card{background:linear-gradient(180deg,rgba(255,255,255,0.75),rgba(255,255,255,0.6))}
:root[data-theme="light"] .info-item{border-bottom:1px dashed rgba(12,40,80,0.094)}
:root[data-theme="light"] .info-ic{background:rgba(10,130,175,0.072);border:1px solid rgba(10,130,175,0.225)}
:root[data-theme="light"] .info-value a{border-bottom:1px dotted rgba(10,130,175,0.27)}
:root[data-theme="light"] .form-wrap{background:radial-gradient(ellipse at 100% 0%, rgba(10,130,175,0.126), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.61))}
:root[data-theme="light"] .form-wrap::before{background-image:linear-gradient(to right, rgba(10,130,175,0.027) 1px, transparent 1px)}
:root[data-theme="light"] .form-row input[type="text"],:root[data-theme="light"] .form-row input[type="email"],:root[data-theme="light"] .form-row input[type="tel"],:root[data-theme="light"] .form-row select,:root[data-theme="light"] .form-row textarea{background:rgba(255,255,255,0.79)}
:root[data-theme="light"] .form-row input:focus,:root[data-theme="light"] .form-row select:focus,:root[data-theme="light"] .form-row textarea:focus{border-color:rgba(10,130,175,0.495);box-shadow:0 0 0 3px rgba(10,130,175,0.135);background:rgba(255,255,255,0.91)}
:root[data-theme="light"] .submit-btn{--accent:#4AC8E8;--accent-2:#7ce6b8;--accent-deep:#2ea4c7;box-shadow:0 10px 30px -12px rgba(10,130,175,0.495)}
:root[data-theme="light"] .submit-btn:hover:not(:disabled){box-shadow:0 14px 40px -12px rgba(10,130,175,0.585)}
:root[data-theme="light"] .error-message{border:1px solid rgba(198,47,47,0.25);background:rgba(198,47,47,0.06)}
:root[data-theme="light"] .form-meta{border-top:1px dashed rgba(12,40,80,0.112)}
:root[data-theme="light"] .success-ic{--accent:#4AC8E8;--accent-2:#7ce6b8;--accent-deep:#2ea4c7;box-shadow:0 0 0 6px rgba(12,150,100,0.096), 0 20px 60px -20px rgba(10,130,175,0.45)}
:root[data-theme="light"] .map-overlay{background:rgba(255,255,255,0.928)}
@supports (backdrop-filter:blur(1px)){@media (min-width:901px){:root[data-theme="light"] .map-overlay{background:rgba(255,255,255,0.808)}}}
:root[data-theme="light"] .atmosphere::before{background-image:linear-gradient(to right, rgba(12,40,80,0.065) 1px, transparent 1px), linear-gradient(to bottom, rgba(12,40,80,0.065) 1px, transparent 1px)}
:root[data-theme="light"] .hero::before{background:radial-gradient(circle at 35% 35%, rgba(10,130,175,0.315), rgba(10,130,175,0.018) 60%, transparent)}
:root[data-theme="light"] .hero::after{background:radial-gradient(circle at 60% 40%, rgba(12,150,100,0.176), transparent 60%)}
:root[data-theme="light"] .trust-list li{background:rgba(255,255,255,0.65)}
:root[data-theme="light"] .outcome-card{background:rgba(255,255,255,0.82)}
:root[data-theme="light"] .cost-card{background:linear-gradient(180deg, rgba(168,90,18,0.04), rgba(255,255,255,0.65))}
:root[data-theme="light"] .cost-anchor{background:rgba(10,130,175,0.045)}
:root[data-theme="light"] .calc-wrap{background:linear-gradient(160deg,rgba(10,130,175,0.054) 0%,rgba(255,255,255,0.94) 100%)}
:root[data-theme="light"] .calc-wrap::before{background:radial-gradient(circle,rgba(10,130,175,0.135),transparent 70%)}
:root[data-theme="light"] .calc-field input[type=range]{background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--fill,0%),rgba(12,40,80,0.112) var(--fill,0%))}
:root[data-theme="light"] .calc-field input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(10,130,175,0.18),0 4px 14px rgba(10,130,175,0.36)}
:root[data-theme="light"] .calc-field input[type=range]::-moz-range-thumb{box-shadow:0 0 0 4px rgba(10,130,175,0.18),0 4px 14px rgba(10,130,175,0.36)}
:root[data-theme="light"] .calc-output{background:linear-gradient(165deg,rgba(255,255,255,0.94) 0%,rgba(255,255,255,0.97) 100%)}
:root[data-theme="light"] .calc-output::before{background:linear-gradient(135deg,rgba(10,130,175,0.162),transparent 50%)}
:root[data-theme="light"] .scope-card{background:rgba(255,255,255,0.7)}
:root[data-theme="light"] .scope-card.is-do{border-color:rgba(12,150,100,0.224);background:linear-gradient(180deg,rgba(12,150,100,0.048),rgba(12,150,100,0.012))}
:root[data-theme="light"] .scope-card.is-dont{border-color:rgba(198,47,47,0.22);background:linear-gradient(180deg,rgba(198,47,47,0.05),rgba(198,47,47,0.01))}
:root[data-theme="light"] .scope-card.is-do .scope-icon{background:rgba(12,150,100,0.12)}
:root[data-theme="light"] .scope-card.is-dont .scope-icon{background:rgba(198,47,47,0.12)}
:root[data-theme="light"] .case{background:linear-gradient(155deg, rgba(10,130,175,0.045), rgba(255,255,255,0.76))}
:root[data-theme="light"] .case-context p.case-attribution{border-top:1px dashed rgba(12,40,80,0.112)}
:root[data-theme="light"] .case-metric{background:rgba(255,255,255,0.73)}
:root[data-theme="light"] .timeline-step{background:rgba(255,255,255,0.76)}
:root[data-theme="light"] .guardrails{background:radial-gradient(ellipse at 90% 10%, rgba(10,130,175,0.162), transparent 50%), radial-gradient(ellipse at 0% 100%, rgba(12,150,100,0.064), transparent 50%), linear-gradient(180deg,rgba(255,255,255,0.91),rgba(255,255,255,0.73))}
:root[data-theme="light"] .g-feature{background:rgba(255,255,255,0.65)}
:root[data-theme="light"] .g-feature-icon{background:rgba(10,130,175,0.108);border:1px solid rgba(10,130,175,0.225)}
:root[data-theme="light"] .why-card{background:rgba(255,255,255,0.65)}
:root[data-theme="light"] .services-hero::before{background:radial-gradient(circle at 35% 35%, rgba(10,130,175,0.288), rgba(10,130,175,0.018) 60%, transparent)}
:root[data-theme="light"] .services-hero::after{background:radial-gradient(circle at 60% 40%, rgba(12,150,100,0.144), transparent 60%)}
:root[data-theme="light"] .services-intro{background:radial-gradient(ellipse at 100% 0%, rgba(10,130,175,0.126), transparent 55%), linear-gradient(160deg, rgba(255,255,255,0.8), rgba(255,255,255,0.625))}
:root[data-theme="light"] .services-intro::before{background:rgba(10,130,175,0.09);border:1px solid rgba(10,130,175,0.27)}
:root[data-theme="light"] .services-intro-note{border-top:1px dashed rgba(12,40,80,0.112)}
:root[data-theme="light"] .matcher{background:linear-gradient(180deg,rgba(255,255,255,0.75),rgba(255,255,255,0.6))}
:root[data-theme="light"] .matcher-question{border-bottom:1px dashed rgba(12,40,80,0.094)}
:root[data-theme="light"] .matcher-opt{background:rgba(255,255,255,0.7)}
:root[data-theme="light"] .matcher-opt[aria-pressed="true"]{background:rgba(10,130,175,0.108);border-color:rgba(10,130,175,0.405);box-shadow:inset 0 0 0 1px rgba(10,130,175,0.225)}
:root[data-theme="light"] .matcher-result{border:1px solid rgba(10,130,175,0.225);background:radial-gradient(circle at 0% 0%, rgba(10,130,175,0.108), transparent 55%), rgba(255,255,255,0.79)}
:root[data-theme="light"] .matcher-result-cta{--accent:#4AC8E8;--accent-2:#7ce6b8;--accent-deep:#2ea4c7;box-shadow:0 10px 30px -12px rgba(10,130,175,0.495)}
:root[data-theme="light"] .matcher-result-cta:hover{box-shadow:0 14px 40px -12px rgba(10,130,175,0.585)}
:root[data-theme="light"] .tier-group-label .tag{background:rgba(10,130,175,0.072);border:1px solid rgba(10,130,175,0.225)}
:root[data-theme="light"] .tier-card{background:linear-gradient(180deg,rgba(255,255,255,0.725),rgba(255,255,255,0.59))}
:root[data-theme="light"] .tier-card:hover{box-shadow:0 20px 50px -20px rgba(15,35,70,0.176)}
:root[data-theme="light"] .tier-card.is-featured{border-color:rgba(10,130,175,0.405);background:radial-gradient(ellipse at 0% 0%, rgba(10,130,175,0.108), transparent 55%),linear-gradient(180deg,rgba(255,255,255,0.8),rgba(255,255,255,0.61));box-shadow:0 0 0 1px rgba(10,130,175,0.108), 0 24px 60px -24px rgba(10,130,175,0.225)}
:root[data-theme="light"] .tier-badge{--accent:#4AC8E8;--accent-2:#7ce6b8;--accent-deep:#2ea4c7}
:root[data-theme="light"] .tier-response{background:rgba(10,130,175,0.072);border:1px solid rgba(10,130,175,0.198)}
:root[data-theme="light"] .tier-note{border-top:1px dashed rgba(12,40,80,0.112)}
:root[data-theme="light"] .process-step{background:rgba(255,255,255,0.73)}
:root[data-theme="light"] .process-num{background:rgba(255,255,255,0.97);border:1px solid rgba(10,130,175,0.315);box-shadow:0 0 0 6px rgba(15,35,70,0.121)}
:root[data-theme="light"] .process-step .marker{border-top:1px dashed rgba(12,40,80,0.112)}
:root[data-theme="light"] .guardrail{background:rgba(255,255,255,0.65)}
:root[data-theme="light"] .guardrail-icon{background:rgba(10,130,175,0.09);border:1px solid rgba(10,130,175,0.27)}
:root[data-theme="light"] .faq-item{background:rgba(255,255,255,0.65)}
:root[data-theme="light"] .faq-item[open]{border-color:rgba(10,130,175,0.27);background:rgba(10,130,175,0.036)}
