/* ===== thinkingdbx central light mode (dbt-inspired) =====
   Dark is the default theme; these rules apply only when
   html[data-theme="light"] is set (toggle in nav, persisted). */

/* ===== foundation, hoisted out of the ten inline <style> blocks =====
   These were byte-identical on every page. The palette lives here now,
   so a colour change is a one-file change. Verified that hoisting them
   ahead of the page styles changes no cascade outcome: no earlier rule
   on any page shares their specificity and touches their properties. */
:root{
    --bg:#121212; --bg-2:#171717; --bg-3:#1c1c1c;
    --surface:#181818; --surface-2:#1e1e1e;
    --border:#242424; --border-2:#2e2e2e;
    --text:#ededed; --text-2:#a0a0a0; --text-3:#707070;
    --green:#3ecf8e; --green-2:#3fcf8e; --green-dim:#249b63;
    --green-soft:rgba(62,207,142,0.10);
    --sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:15px;}
::selection{background:rgba(62,207,142,0.25)}
.nav{position:sticky;top:0;z-index:50;background:rgba(18,18,18,0.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.nav-in{max-width:1180px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo .mk{width:24px;height:24px;border-radius:6px;border:1px solid var(--border-2);background:var(--bg-3);display:grid;place-items:center;font-family:var(--mono);color:var(--green);font-size:13px;font-weight:500;}
.nav-links a:hover{color:var(--text)}
.btn.sm{padding:6px 12px}

/* ===== shape language: instrument (both themes) =====
   Squarer corners, ruled surfaces instead of filled cards, mono for
   labels and card headings. The vocabulary comes from the training
   console and the precheck panel, which are the components that are
   actually ours.

   The `body` prefix is here only to outrank the per-page inline <style>
   blocks, which load after this file on all ten pages. The real fix is
   to lift the shared component CSS out of those pages and into here;
   until that happens, do not drop the prefix. */
body .door,body .prod,body .code,body .proof,body .cta-box,body .win,body .dp{border-radius:4px}
body .btn{border-radius:3px}
body .tag,body .tag-inline{border-radius:2px}

/* surfaces become ruled planes rather than filled cards */
body .door,body .prod{background:transparent;border:1px solid var(--border-2)}
body .door:hover,body .prod:hover{background:var(--bg-2);border-color:var(--text-3)}

/* the card label sits on a rule, the way the console header does */
body .door{padding-top:0}
body .door .k{display:block;border-bottom:1px solid var(--border);padding:16px 0 12px;margin-bottom:16px}
body .door .k,body .prod .tag{font-family:var(--mono)}
body .door h3,body .prod h4{font-family:var(--mono);font-weight:500;letter-spacing:-0.01em}

/* the stat band reads as a ruled table, not four floating boxes */
body .proof{background:transparent;border:1px solid var(--border-2)}
body .proof .c{background:transparent;border-right:1px solid var(--border)}
body .proof .c:last-child{border-right:none}
body .proof .n{font-family:var(--mono);font-weight:500}
body .proof .k{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em}
@media(max-width:720px){body .proof .c:nth-child(2n){border-right:none}}

body .finding{border-left-width:1px}
body .sector{border-top-color:var(--text-3)}
body .sector h4{font-family:var(--mono);font-weight:500;font-size:14px}

/* ===== shared structural components (both themes) ===== */
.foot-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-bottom:34px;font-size:13.5px}
.foot-grid .fh{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-3);margin-bottom:12px}
.foot-grid a{display:block;color:var(--text-2);padding:4px 0}
.foot-grid a:hover{color:var(--text)}
/* the rule above turns the footer logo into a block, which drops the
   wordmark below the mark. keep it on one line. */
.foot-grid a.logo{display:inline-flex;align-items:center;gap:9px;padding:0;white-space:nowrap}
.foot-about{color:var(--text-3);font-size:13px;max-width:34ch;margin-top:12px}
footer .foot{border-top:1px solid var(--border);padding-top:26px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}

.dp{display:flex;justify-content:space-between;align-items:center;gap:28px;border:1px solid var(--green-dim);background:var(--green-soft);border-radius:14px;padding:30px 32px;flex-wrap:wrap}
.dp .dp-k{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:0.1em;color:var(--green);margin-bottom:4px}
.dp h3{font-family:'Space Grotesk',var(--sans);font-size:1.25rem;font-weight:600;margin:6px 0 8px;letter-spacing:-0.01em}
.dp p{font-size:14px;color:var(--text-2);max-width:64ch}
.dp .btn{padding:11px 20px;font-size:15px;flex:none}

/* ===== design partner modal (both themes) ===== */
.dp-overlay{position:fixed;inset:0;z-index:200;background:rgba(3,7,17,0.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:24px}
.dp-overlay.open{display:flex}
.dp-modal{width:100%;max-width:460px;max-height:88vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border-2);border-radius:14px;padding:30px 30px 26px;box-shadow:0 30px 80px rgba(0,0,0,0.35)}
.dp-modal .dp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:6px}
.dp-modal h3{font-family:'Space Grotesk',var(--sans);font-size:1.2rem;font-weight:600;letter-spacing:-0.01em}
.dp-modal .dp-close{background:none;border:none;color:var(--text-3);font-size:20px;line-height:1;cursor:pointer;padding:2px 4px}
.dp-modal .dp-close:hover{color:var(--text)}
.dp-modal p.dp-sub{font-size:13.5px;color:var(--text-2);margin-bottom:20px}
.dp-field{margin-bottom:14px}
.dp-field label{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-3);margin-bottom:6px}
.dp-field input,.dp-field textarea{width:100%;background:var(--bg-3);border:1px solid var(--border-2);color:var(--text);font-family:var(--sans);font-size:14px;padding:10px 12px;border-radius:8px;resize:vertical}
.dp-field input:focus,.dp-field textarea:focus{outline:none;border-color:var(--green-dim)}
.dp-field.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dp-actions{display:flex;align-items:center;gap:14px;margin-top:20px}
.dp-actions .btn{flex:none}
.dp-msg{font-size:13px;color:var(--text-2)}
.dp-msg.err{color:#ed6a5e}
.dp-msg.ok{color:var(--green)}
html[data-theme="light"] .dp-field input,
html[data-theme="light"] .dp-field textarea{background:#fff}

/* ===== ribbons: both themes, different blends ===== */
.ribbons{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ribbons path{fill:none}
/* dark blend: low-opacity glows */
.ribbons .r1{stroke:#3ecf8e;stroke-opacity:0.10}
.ribbons .r2{stroke:#9c79ff;stroke-opacity:0.10}
.ribbons .r3{stroke:#d8ff33;stroke-opacity:0.05}
.ribbons .r4{stroke:#3ecf8e;stroke-opacity:0.30}
.ribbons .r5{stroke:#9c79ff;stroke-opacity:0.28}
.ribbons .r6{stroke:#3ecf8e;stroke-opacity:0.18}

/* ===== dark: accent color fields on cards ===== */
:is(.pillar,.feat,.case,.p,.cloud-card,.prods .prod,.posts .post){border-top:3px solid transparent}
:is(.pillar,.feat,.case,.p,.cloud-card,.prods .prod,.posts .post):nth-child(6n+1){border-top-color:rgba(62,207,142,0.55);background:linear-gradient(180deg,rgba(62,207,142,0.07),var(--surface) 60%)}
:is(.pillar,.feat,.case,.p,.cloud-card,.prods .prod,.posts .post):nth-child(6n+2){border-top-color:rgba(254,131,49,0.55);background:linear-gradient(180deg,rgba(254,131,49,0.06),var(--surface) 60%)}
:is(.pillar,.feat,.case,.p,.cloud-card,.prods .prod,.posts .post):nth-child(6n+3){border-top-color:rgba(156,121,255,0.55);background:linear-gradient(180deg,rgba(156,121,255,0.07),var(--surface) 60%)}
:is(.pillar,.feat,.case,.p,.cloud-card,.prods .prod,.posts .post):nth-child(6n+4){border-top-color:rgba(216,255,51,0.45);background:linear-gradient(180deg,rgba(216,255,51,0.05),var(--surface) 60%)}
:is(.pillar,.feat,.case,.p,.cloud-card,.prods .prod,.posts .post):nth-child(6n+5){border-top-color:rgba(255,204,37,0.50);background:linear-gradient(180deg,rgba(255,204,37,0.05),var(--surface) 60%)}
:is(.pillar,.feat,.case,.p,.cloud-card,.prods .prod,.posts .post):nth-child(6n){border-top-color:rgba(107,154,255,0.55);background:linear-gradient(180deg,rgba(107,154,255,0.06),var(--surface) 60%)}

/* ===== dark: multicolor stats ===== */
.proof .c:nth-child(2) .n:not(:has(span)){color:#fe8331}
.proof .c:nth-child(3) .n:not(:has(span)){color:#9c79ff}
.proof .c:nth-child(4) .n:not(:has(span)){color:#6b9aff}
.proof .c:nth-child(2) .n span{color:#fe8331}
.proof .c:nth-child(3) .n span{color:#9c79ff}
.proof .c:nth-child(4) .n span{color:#6b9aff}
.hero-stats .s:nth-child(2) .v{color:#fe8331}
.hero-stats .s:nth-child(3) .v{color:#9c79ff}
.hero-stats .s:nth-child(4) .v{color:#6b9aff}

html[data-theme="light"]{
    --bg:#fff; --bg-2:#f9fafb; --bg-3:#f3f4f6;
    --surface:#fff; --surface-2:#f9fafb;
    --border:#e5e7eb; --border-2:#d1d5dc;
    --text:#101828; --text-2:#4a5565; --text-3:#6a7282;
    --green:#15805a; --green-2:#15805a; --green-dim:#bfe9d5;
    --green-soft:#effaf5;
}
/* light blend: saturated bands */
html[data-theme="light"] .ribbons .r1{stroke:#3ecf8e;stroke-opacity:0.30}
html[data-theme="light"] .ribbons .r2{stroke:#d8ff33;stroke-opacity:0.45}
html[data-theme="light"] .ribbons .r3{stroke:#ffcc25;stroke-opacity:0.30}
html[data-theme="light"] .ribbons .r4{stroke:#eab308;stroke-opacity:0.38}
html[data-theme="light"] .ribbons .r5{stroke:#15805a;stroke-opacity:0.40}
html[data-theme="light"] .ribbons .r6{stroke:#15805a;stroke-opacity:0.30}

/* nav + buttons */
html[data-theme="light"] .nav{background:rgba(255,255,255,0.82)}
html[data-theme="light"] .btn.green{background:#3ecf8e;color:#06281a}
html[data-theme="light"] .btn.green:hover{background:#35c584}
html[data-theme="light"] .btn.ghost:hover{background:var(--surface-2);border-color:#b9c0cc}

/* hero */
html[data-theme="light"] .hero{background:linear-gradient(180deg,#eef9f4 0%,#f8fcfa 46%,#fff 100%)}
html[data-theme="light"] .hero-bg{background:
      radial-gradient(48% 42% at 22% -6%,rgba(62,207,142,0.36),transparent 70%),
      radial-gradient(44% 40% at 82% -8%,rgba(255,204,37,0.28),transparent 70%),
      linear-gradient(90deg,rgba(3,7,17,0.035) 1px,transparent 1px),
      radial-gradient(circle at 1px 1px,rgba(3,7,17,0.05) 1px,transparent 0);
    background-size:auto,auto,236px 100%,26px 26px}
html[data-theme="light"] .hero-logo{filter:none}
html[data-theme="light"] .kicker .live{box-shadow:none;background:#15805a}

/* window mocks + demo frames */
html[data-theme="light"] .win{box-shadow:0 24px 64px rgba(3,7,17,0.10),0 2px 8px rgba(3,7,17,0.05)}
html[data-theme="light"] .canvas{background:radial-gradient(circle at 1px 1px,rgba(3,7,17,0.05) 1px,transparent 0);background-size:20px 20px}
html[data-theme="light"] .node{background:#fff;box-shadow:0 1px 2px rgba(3,7,17,0.04)}
html[data-theme="light"] .node.on{background:#effaf5;border-color:#3ecf8e}
html[data-theme="light"] .wire{background:linear-gradient(90deg,#d1d5dc,#3ecf8e)}
html[data-theme="light"] .wire::after{background:#15805a;box-shadow:none}
html[data-theme="light"] .side .item.on{background:#d9f4e7;color:var(--text)}
html[data-theme="light"] .demo-play{background:rgba(255,255,255,0.85);color:#15805a}
html[data-theme="light"] .demo-play:hover{background:#effaf5}

/* strip */
html[data-theme="light"] .strip{background:#f2faf6}

/* code blocks: light syntax palettes */
html[data-theme="light"] .code{box-shadow:0 12px 32px rgba(3,7,17,0.07)}
html[data-theme="light"] .code .s{color:#b26a00}
html[data-theme="light"] .code .t{color:#2563eb}
html[data-theme="light"] .codeblock .k{color:#7c3aed}
html[data-theme="light"] .codeblock .fn{color:#2563eb}
html[data-theme="light"] .codeblock .s{color:#b26a00}
html[data-theme="light"] .codeblock .n{color:#c2410c}
html[data-theme="light"] .codeblock .t{color:#0369a1}
html[data-theme="light"] .term-win{box-shadow:0 12px 32px rgba(3,7,17,0.07)}
html[data-theme="light"] .install{background:#fff}

/* cards + grids (pillars, feats, cases, cloud, principles, posts) */
html[data-theme="light"] .pillar:hover,
html[data-theme="light"] .feat:hover,
html[data-theme="light"] .case:hover,
html[data-theme="light"] .p:hover,
html[data-theme="light"] .prod:hover{box-shadow:0 8px 24px rgba(3,7,17,0.06)}

/* pricing */
html[data-theme="light"] .plan .pop-tag{background:#3ecf8e;color:#06281a}

/* proof / stats */
html[data-theme="light"] .proof .c:nth-child(2) .n span{color:#fe6703}
html[data-theme="light"] .proof .c:nth-child(3) .n span{color:#632ff5}
html[data-theme="light"] .proof .c:nth-child(4) .n span{color:#0467b7}

/* index: per-product color fields (dbt accent palette) */
html[data-theme="light"] .prods .prod{border-top:3px solid transparent}
html[data-theme="light"] .prods .prod:nth-child(1){border-top-color:#fe6703;background:linear-gradient(180deg,#fff3ea,#fff 65%)}
html[data-theme="light"] .prods .prod:nth-child(1):hover{border-color:#ffc59b;border-top-color:#fe6703}
html[data-theme="light"] .prods .prod:nth-child(2){border-top-color:#632ff5;background:linear-gradient(180deg,#f3f1ff,#fff 65%)}
html[data-theme="light"] .prods .prod:nth-child(2):hover{border-color:#c9b8ff;border-top-color:#632ff5}
html[data-theme="light"] .prods .prod:nth-child(3){border-top-color:#c3e600;background:linear-gradient(180deg,#f9ffdd,#fff 65%)}
html[data-theme="light"] .prods .prod:nth-child(3):hover{border-color:#dbef86;border-top-color:#c3e600}
html[data-theme="light"] .prods .prod:nth-child(4){border-top-color:#ffcc25;background:linear-gradient(180deg,#fff8e2,#fff 65%)}
html[data-theme="light"] .prods .prod:nth-child(4):hover{border-color:#ffe391;border-top-color:#ffcc25}
html[data-theme="light"] .prods .prod:nth-child(2) .tag.os{color:#632ff5;border-color:#c9b8ff;background:#f3f1ff}
html[data-theme="light"] .prods .prod:nth-child(3) .tag.os{color:#5a6f00;border-color:#dbef86;background:#f9ffdd}
html[data-theme="light"] .prods .prod:nth-child(4) .tag.soon{color:#987600;border-color:#ffe391;background:#fff8e2}
html[data-theme="light"] #products{position:relative}
html[data-theme="light"] #products::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
    background:
      radial-gradient(52% 60% at 85% 0%,rgba(62,207,142,0.12),transparent 70%),
      repeating-linear-gradient(115deg,rgba(62,207,142,0.06) 0 2px,transparent 2px 110px)}

/* CTA boxes */
html[data-theme="light"] .cta-box{border-color:#bfe9d5}
html[data-theme="light"] .cta-l{background:
      radial-gradient(70% 90% at 0% 100%,rgba(62,207,142,0.26),transparent 70%),
      radial-gradient(55% 70% at 100% 0%,rgba(216,255,51,0.30),transparent 70%),
      radial-gradient(circle at 1px 1px,rgba(3,7,17,0.04) 1px,transparent 0);
    background-size:auto,auto,22px 22px}
html[data-theme="light"] .cta-r{background:var(--bg-2)}
html[data-theme="light"] .tl-step .dot{background:#3ecf8e;border:2px solid #fff;box-shadow:0 0 0 1px #bfe9d5}
html[data-theme="light"] footer{background:var(--bg-2)}

/* architecture (simple view) */
html[data-theme="light"] .arch{background-image:radial-gradient(circle at 1px 1px,rgba(3,7,17,0.04) 1px,transparent 0)}
html[data-theme="light"] .arch-node{box-shadow:0 1px 2px rgba(3,7,17,0.04)}
html[data-theme="light"] .arch-col.in .arch-node::before,
html[data-theme="light"] .arch-col.out .arch-node::before{background:#15805a;box-shadow:none}
html[data-theme="light"] .arch-core{border-color:#3ecf8e;box-shadow:0 0 0 3px rgba(62,207,142,0.10),0 12px 32px rgba(3,7,17,0.08)}
html[data-theme="light"] .arch-uml{background-image:radial-gradient(circle at 1px 1px,rgba(3,7,17,0.04) 1px,transparent 0)}

/* UML SVG diagrams (engineering views) */
html[data-theme="light"] .uml .t{fill:#101828}
html[data-theme="light"] .uml .t2{fill:#4a5565}
html[data-theme="light"] .uml .st{fill:#6a7282}
html[data-theme="light"] .uml .gt{fill:#15805a}
html[data-theme="light"] .uml .bx{fill:#fff;stroke:#d1d5dc}
html[data-theme="light"] .uml .ibx{fill:#f9fafb;stroke:#d1d5dc}
html[data-theme="light"] .uml .core{fill:#fff;stroke:#3ecf8e}
html[data-theme="light"] .uml .act{fill:#f3f4f6;stroke:#d1d5dc}
html[data-theme="light"] .uml .msg{stroke:#4a5565}
html[data-theme="light"] .uml .ret,
html[data-theme="light"] .uml .dep{stroke:#6a7282}
html[data-theme="light"] .uml .life,
html[data-theme="light"] .uml .frame,
html[data-theme="light"] .uml .thin{stroke:#d1d5dc}
html[data-theme="light"] .uml .port{fill:#fff;stroke:#6a7282}
html[data-theme="light"] .uml .actor{stroke:#4a5565}
html[data-theme="light"] .uml .doc{stroke:#6a7282}
html[data-theme="light"] .uml marker path[fill="none"]{stroke:#4a5565}
html[data-theme="light"] .uml marker path[fill="#a0a0a0"]{fill:#4a5565}
html[data-theme="light"] .uml path[fill="#1c1c1c"]{fill:#f3f4f6;stroke:#d1d5dc}
html[data-theme="light"] .uml rect[fill="#171717"]{fill:#f9fafb}
html[data-theme="light"] .uml rect[fill="#1c1c1c"]{fill:#fff}

/* ===== color fields on all pages (dbt accent cycle) ===== */
html[data-theme="light"] :is(.pillar,.feat,.case,.p,.cloud-card,.oss){border-top:3px solid transparent}
html[data-theme="light"] :is(.pillar,.feat,.case,.p,.cloud-card,.oss):nth-child(6n+1){border-top-color:#3ecf8e;background:linear-gradient(180deg,#effaf5,#fff 65%)}
html[data-theme="light"] :is(.pillar,.feat,.case,.p,.cloud-card,.oss):nth-child(6n+2){border-top-color:#fe6703;background:linear-gradient(180deg,#fff3ea,#fff 65%)}
html[data-theme="light"] :is(.pillar,.feat,.case,.p,.cloud-card,.oss):nth-child(6n+3){border-top-color:#632ff5;background:linear-gradient(180deg,#f3f1ff,#fff 65%)}
html[data-theme="light"] :is(.pillar,.feat,.case,.p,.cloud-card,.oss):nth-child(6n+4){border-top-color:#c3e600;background:linear-gradient(180deg,#f9ffdd,#fff 65%)}
html[data-theme="light"] :is(.pillar,.feat,.case,.p,.cloud-card,.oss):nth-child(6n+5){border-top-color:#ffcc25;background:linear-gradient(180deg,#fff8e2,#fff 65%)}
html[data-theme="light"] :is(.pillar,.feat,.case,.p,.cloud-card,.oss):nth-child(6n){border-top-color:#0467b7;background:linear-gradient(180deg,#eef6fd,#fff 65%)}

/* multicolor stats on product pages (index keeps its span-based accents) */
html[data-theme="light"] .proof .c:nth-child(2) .n:not(:has(span)){color:#fe6703}
html[data-theme="light"] .proof .c:nth-child(3) .n:not(:has(span)){color:#632ff5}
html[data-theme="light"] .proof .c:nth-child(4) .n:not(:has(span)){color:#0467b7}
html[data-theme="light"] .hero-stats .s:nth-child(2) .v{color:#fe6703}
html[data-theme="light"] .hero-stats .s:nth-child(3) .v{color:#632ff5}
html[data-theme="light"] .hero-stats .s:nth-child(4) .v{color:#0467b7}

/* blog cards join the accent cycle */
html[data-theme="light"] .posts .post{border-top:3px solid transparent}
html[data-theme="light"] .posts .post:nth-child(6n+1){border-top-color:#3ecf8e}
html[data-theme="light"] .posts .post:nth-child(6n+2){border-top-color:#fe6703}
html[data-theme="light"] .posts .post:nth-child(6n+3){border-top-color:#632ff5}
html[data-theme="light"] .posts .post:nth-child(6n+4){border-top-color:#c3e600}
html[data-theme="light"] .posts .post:nth-child(6n+5){border-top-color:#ffcc25}
html[data-theme="light"] .posts .post:nth-child(6n){border-top-color:#0467b7}