/* ═══════════════════════════════════════════════════════════════
   THE WORKING SURFACE — white page, red and black content.
   The ecosystem shell is cinematic and dark; the moment you are
   inside a workspace it becomes a place to work. Heroes stay dark
   so the industry artwork still reads; everything below is white.
   ═══════════════════════════════════════════════════════════════ */
body.light{
  --void:#ffffff;
  --deep:#f6f6f7;
  --panel:#ffffff;
  --raise:#fbfbfc;
  --edge:rgba(5,5,6,.11);
  --edge-2:rgba(5,5,6,.22);
  --ink:#08080a;
  --ink-2:#3d3d45;
  --ink-3:#6a6a74;
  --ink-4:#9b9ba5;
  --acc:#e01029;
  --acc-2:#b00c20;
  --acc-rgb:224,16,41;
  background:#fff;color:#08080a;
}
body.light .layer-grain,
body.light .layer-vignette,
body.light .layer-scene,
body.light .orbit-stage{display:none}

/* ── nav + rail ── */
body.light .nav.solid{background:rgba(255,255,255,.92);border-bottom-color:var(--edge)}
body.light .nav-links a{color:#5a5a64}
body.light .nav-links a:hover,body.light .nav-links a.on{color:#08080a;background:rgba(5,5,6,.05)}
body.light .brand-txt b{color:#08080a}
body.light .brand-txt i{color:#9b9ba5}
body.light .btn-ghost{border-color:rgba(5,5,6,.2);color:#3d3d45;background:rgba(5,5,6,.02)}
body.light .btn-ghost:hover{color:#08080a;border-color:#08080a;background:rgba(5,5,6,.05)}
body.light .nav-burger i{background:#3d3d45}
body.light .rail{background:rgba(255,255,255,.94);border-bottom-color:var(--edge)}
body.light .rail b{color:#08080a}
body.light .rail i{color:#b4b4bc}
body.light .rail a{color:#6a6a74}
body.light .rail-chip{background:rgba(224,16,41,.08);border-color:rgba(224,16,41,.3);color:#c00d24}

/* ── the heroes stay dark: the artwork needs it ── */
body.light .ihero,body.light .whero{background:#050506;color:#f4f4f6}
body.light .ihero h1,body.light .whero h1{color:#fff}
body.light .ihero .lede,body.light .whero .lede{color:#b3b3bd}
body.light .ihero .eyebrow,body.light .whero .eyebrow{color:#9b9ba5}
body.light .ihero-shade,body.light .whero-shade{
  background:linear-gradient(180deg,rgba(5,5,6,.72) 0%,rgba(5,5,6,.42) 34%,rgba(5,5,6,.86) 84%,#050506 100%);
}
body.light .ikpis{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.16)}
body.light .ikpi{background:rgba(9,9,11,.88)}
body.light .ikpi span{color:#b3b3bd}
body.light .pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#d4d4dc}
body.light .pill.acc{background:rgba(224,16,41,.2);border-color:rgba(224,16,41,.45);color:#ff8a94}
body.light .whero-spin{background:rgba(224,16,41,.16);color:#e4e4ea;border-left-color:#ff4d5c}
body.light .whero-spin b{color:#fff}
body.light .whero-ic{background:linear-gradient(140deg,rgba(224,16,41,.42),rgba(224,16,41,.14));border-color:rgba(224,16,41,.5)}
body.light .whero-sub{color:#ff8a94}

/* ── everything below the hero ── */
body.light .h-1,body.light .h-2,body.light .h-3,body.light .uni-head h1{color:#08080a}
body.light .ihero h1,body.light .whero h1{color:#fff}
body.light .lede{color:#3d3d45}
body.light .eyebrow{color:#8a8a94}
body.light .h-1 em,body.light .h-2 em,body.light .h-3 em,body.light .acc-txt{color:#c00d24}
body.light .grad-txt{background:linear-gradient(100deg,#e01029,#8a0a18);-webkit-background-clip:text;background-clip:text;color:transparent}

body.light .uni-switch{background:rgba(5,5,6,.045);border-color:var(--edge)}
body.light .uni-switch button{color:#6a6a74}
body.light .uni-switch button.on{background:linear-gradient(100deg,#e01029,#b00c20);color:#fff;box-shadow:0 4px 16px rgba(224,16,41,.28)}
body.light .uni-search input{background:#fff;border-color:var(--edge-2);color:#08080a;box-shadow:0 1px 2px rgba(5,5,6,.04)}
body.light .uni-search input::placeholder{color:#9b9ba5}
body.light .uni-search::before{color:#9b9ba5}
body.light .uni-filters button{background:#fff;border-color:var(--edge);color:#5a5a64}
body.light .uni-filters button:hover{color:#08080a;border-color:var(--edge-2)}
body.light .uni-filters button.on{background:rgba(224,16,41,.1);border-color:#e01029;color:#c00d24}

/* ── cards on white: flat, bordered, no glassy fog ── */
body.light .wsx,body.light .rel,body.light .dept,body.light .cap-item,
body.light .auth-c,body.light .rec-card,body.light .onb-opt,body.light .flow-step .fs-box{
  background:#fff;border-color:var(--edge);backdrop-filter:none;
  box-shadow:0 1px 2px rgba(5,5,6,.05),0 8px 22px rgba(5,5,6,.05);
}
body.light .wsx:hover,body.light .rel:hover,body.light .rec-card:hover,
body.light .cap-item:hover,body.light .dept:hover,body.light .flow-step:hover .fs-box,
body.light .onb-opt:hover{
  background:#fff;border-color:rgba(224,16,41,.42);
  box-shadow:0 3px 8px rgba(224,16,41,.09),0 18px 40px rgba(5,5,6,.09);
}
body.light .wsx p,body.light .cap-item p,body.light .auth-c .ac-scope{color:#4a4a54}
body.light .wsx-top b,body.light .rel b,body.light .auth-c b{color:#08080a}
body.light .rel span{color:#8a8a94}
body.light .wsx-ic{background:rgba(224,16,41,.09);border-color:rgba(224,16,41,.26)}
body.light .wsx-meta{color:#8a8a94}
body.light .wsx-meta b{color:#c00d24}
body.light .wsx-head h3{color:#08080a}
body.light .wsx-head .wsx-ct{color:#9b9ba5}
body.light .wsx-head .wsx-line{background:linear-gradient(90deg,rgba(5,5,6,.16),transparent)}
body.light .ci-n{background:rgba(224,16,41,.1);color:#c00d24;border-color:rgba(224,16,41,.26)}
body.light .cap-item.extra .ci-n{background:linear-gradient(100deg,#e01029,#b00c20);color:#fff}
body.light .dept{color:#3d3d45}
body.light .dept i{background:#e01029;box-shadow:none}
body.light .auth-c .ac-ask{background:rgba(224,16,41,.06);border-color:rgba(224,16,41,.2);color:#3d3d45}
body.light .auth-c::before{background:linear-gradient(180deg,#e01029,#8a0a18)}
body.light .tbl-wrap{background:#fff;border-color:var(--edge);box-shadow:0 1px 2px rgba(5,5,6,.05)}
body.light .tbl td{color:#3d3d45;border-bottom-color:var(--edge)}
body.light .tbl th{color:#8a8a94;border-bottom-color:var(--edge-2)}
body.light .tbl td b{color:#08080a}
body.light .tbl tr:hover td{background:rgba(224,16,41,.035)}
body.light .intg span{background:#fff;border-color:var(--edge);color:#3d3d45}
body.light .intg span.core{background:rgba(224,16,41,.08);border-color:rgba(224,16,41,.3);color:#c00d24}
body.light .intg span:hover{background:rgba(224,16,41,.1);border-color:rgba(224,16,41,.4);color:#08080a}
body.light .divider{background:linear-gradient(90deg,transparent,rgba(5,5,6,.14),transparent)}
body.light .small{color:#6a6a74}
body.light .tag{background:rgba(5,5,6,.045);border-color:var(--edge);color:#5a5a64}
body.light .thr-tabs button{background:#fff;border-color:var(--edge);color:#5a5a64}
body.light .thr-tabs button.on{background:rgba(224,16,41,.1);border-color:#e01029;color:#c00d24}

/* ── flow river ── */
body.light .flow-line{background:linear-gradient(90deg,transparent,rgba(224,16,41,.4),rgba(224,16,41,.4),transparent)}
body.light .flow-step .fs-dot{background:#fff;border-color:#e01029;box-shadow:0 0 0 4px rgba(224,16,41,.1)}
body.light .flow-step .fs-n{color:#9b9ba5}
body.light .flow-step h4{color:#08080a}
body.light .flow-step p,body.light .flow-step .fs-daffy{color:#4a4a54}
body.light .flow-step .fs-daffy{border-top-color:var(--edge)}
body.light .flow-step .fs-daffy::before{color:#e01029}

/* ── connection web ── */
body.light .web-wrap{background:#fff;border-color:var(--edge);box-shadow:0 1px 2px rgba(5,5,6,.05)}
body.light .web-node text{fill:#4a4a54}
body.light .web-node circle{fill:#fff;stroke:rgba(224,16,41,.5)}
body.light .web-hub text{fill:#fff}

/* ── onboarding + builder ── */
body.light .onb-prog i{background:rgba(5,5,6,.1)}
body.light .onb-opt b{color:#08080a}
body.light .onb-opt span{color:#5a5a64}
body.light .onb-opt.on{background:rgba(224,16,41,.07);border-color:#e01029}
body.light .onb-q>p{color:#4a4a54}
body.light .onb-skip{color:#9b9ba5}
body.light .onb-think h3{color:#08080a}
body.light .onb-think .ot-log{color:#5a5a64}
body.light .rec-sum{background:rgba(224,16,41,.05);border-color:rgba(224,16,41,.24)}
body.light .rec-sum p{color:#3d3d45}
body.light .rec-sum p b{color:#08080a}
body.light .rec-why{color:#6a6a74;border-top-color:var(--edge)}
body.light .rec-card.opt::after{background:rgba(5,5,6,.05);border-color:var(--edge);color:#8a8a94}
body.light .build{background:rgba(224,16,41,.035);border-color:rgba(224,16,41,.28)}
body.light .build h3{color:#08080a}
body.light .build>p{color:#4a4a54}
body.light .build-form input,body.light .build-form textarea{background:#fff;border-color:var(--edge-2);color:#08080a}
body.light .build-mods button{background:#fff;border-color:var(--edge);color:#5a5a64}
body.light .build-mods button.on{background:rgba(224,16,41,.1);border-color:#e01029;color:#c00d24}
body.light .build-out{background:#fff;border-color:rgba(224,16,41,.28);box-shadow:0 10px 30px rgba(5,5,6,.07)}
body.light .build-out li{color:#3d3d45}
body.light .build-out h4{color:#08080a}

/* ── industry cards stay dark on the white page: a gallery of stills ── */
body.light .ind-card{background:#0a0a0c;border-color:rgba(5,5,6,.14);box-shadow:0 2px 6px rgba(5,5,6,.08),0 16px 40px rgba(5,5,6,.1)}
body.light .ind-card:hover{border-color:rgba(224,16,41,.5);box-shadow:0 6px 16px rgba(224,16,41,.14),0 26px 60px rgba(5,5,6,.16)}
body.light .ind-card h3{color:#fff}
body.light .ind-card p{color:#c4c4cc}
body.light .ind-card .ic-go{color:#ff8a94}

/* ── close ── */
body.light .cta{background:#08080a;border-color:#08080a}
body.light .cta h2{color:#fff}
body.light .cta .lede{color:#b3b3bd}
body.light .cta::before{opacity:.7}
body.light .foot{background:#fff;border-top-color:var(--edge)}
body.light .foot-brand p,body.light .foot-col a,body.light .foot-col span{color:#5a5a64}
body.light .foot-col a:hover{color:#08080a}
body.light .foot-bot{color:#9b9ba5;border-top-color:var(--edge)}
body.light .empty b{color:#08080a}
body.light .empty{color:#6a6a74}

/* ── on a working surface the chrome is simply solid: white nav,
      white rail, and the dark hero begins cleanly beneath them ── */
body.light .nav{
  background:rgba(255,255,255,.94);backdrop-filter:blur(24px) saturate(160%);
  border-bottom-color:var(--edge);
}
body.light.has-rail .view{padding-top:calc(var(--nav-h) + 38px)}
body.light:not(.has-rail) .view{padding-top:var(--nav-h)}
body.light .ihero,body.light .whero{padding-top:clamp(3rem,7vw,5.5rem)}

/* ghost buttons that live inside a dark hero are always light */
body.light .ihero .btn-ghost,body.light .whero .btn-ghost{
  border-color:rgba(255,255,255,.3);color:#e4e4ea;background:rgba(255,255,255,.05);
}
body.light .ihero .btn-ghost:hover,body.light .whero .btn-ghost:hover{
  color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1);
}

/* the view already offsets for the fixed chrome — don't pad twice */
body.light .uni-head{padding-top:2.2rem}

/* ══════════ INSIDE DAFFY ══════════ */
body.light .inside-hero{min-height:52svh}
.anat{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.anat-i{position:relative;padding:1.5rem 1.5rem 1.6rem;border-radius:var(--r-l);border:1px solid var(--edge);background:#fff;box-shadow:0 1px 2px rgba(5,5,6,.05),0 10px 26px rgba(5,5,6,.05);transition:all .45s var(--ease)}
.anat-i:hover{border-color:rgba(224,16,41,.4);box-shadow:0 4px 10px rgba(224,16,41,.08),0 20px 44px rgba(5,5,6,.09);transform:translateY(-4px)}
.anat-n{position:absolute;right:1.3rem;top:1rem;font-family:var(--serif);font-size:2.6rem;font-weight:700;color:rgba(224,16,41,.12);line-height:1}
.anat-i h3{font-family:var(--serif);font-size:1.22rem;font-weight:700;margin-bottom:.6rem;padding-right:2.6rem;color:#08080a}
.anat-i p{font-size:.88rem;line-height:1.65;color:#4a4a54}

.weeks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}
.wk{padding:1.3rem 1.35rem;border-radius:var(--r-m);border:1px solid var(--edge);background:#fff;border-top:3px solid #e01029}
.wk-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#c00d24}
.wk h4{font-family:var(--serif);font-size:1.18rem;font-weight:700;margin:.5rem 0 .5rem;color:#08080a}
.wk p{font-size:.85rem;line-height:1.6;color:#4a4a54}

.deploy{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem;margin-bottom:1.6rem}
.dep{padding:1.2rem 1.3rem;border-radius:var(--r-m);border:1px solid var(--edge);background:#fff}
.dep h4{font-family:var(--serif);font-size:1.1rem;font-weight:700;margin-bottom:.45rem;color:#08080a}
.dep p{font-size:.84rem;line-height:1.6;color:#4a4a54}
.ctrl{padding:1.5rem 1.6rem;border-radius:var(--r-l);border:1px solid rgba(224,16,41,.24);background:rgba(224,16,41,.04)}
.ctrl h4{font-family:var(--serif);font-size:1.14rem;font-weight:700;margin-bottom:1rem;color:#08080a}
.ctrl-grid{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.ctrl-grid span{font-size:.78rem;padding:.36rem .72rem;border-radius:100px;background:#fff;border:1px solid var(--edge);color:#3d3d45}
.ctrl-note{font-size:.84rem;line-height:1.7;color:#4a4a54}
.ctrl-note b{color:#08080a;font-weight:650}

.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.pf{padding:1.4rem 1.5rem 1.5rem;border-radius:var(--r-l);border:1px solid var(--edge);background:#fff;box-shadow:0 1px 2px rgba(5,5,6,.05),0 10px 26px rgba(5,5,6,.05)}
.pf-top{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.9rem;padding-bottom:.9rem;border-bottom:1px solid var(--edge)}
.pf-top b{font-family:var(--serif);font-size:2.3rem;font-weight:700;color:#c00d24;line-height:1}
.pf-top span{font-size:.78rem;color:#6a6a74;line-height:1.35}
.pf h4{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:#08080a;margin-bottom:.55rem}
.pf h4 i{display:block;font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#9b9ba5;margin-top:4px}
.pf p{font-size:.85rem;line-height:1.65;color:#4a4a54}

.qa{max-width:860px}
.qa-i{border-bottom:1px solid var(--edge);padding:.2rem 0}
.qa-i summary{
  cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;position:relative;
  font-family:var(--serif);font-size:1.1rem;font-weight:700;color:#08080a;transition:color .3s;
}
.qa-i summary::-webkit-details-marker{display:none}
.qa-i summary:hover{color:#c00d24}
.qa-i summary::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:1.2rem;color:#c00d24;transition:transform .35s var(--ease)}
.qa-i[open] summary::after{content:"−"}
.qa-i p{font-size:.9rem;line-height:1.75;color:#4a4a54;padding:0 2.2rem 1.2rem 0;animation:fadeUp .45s var(--ease) both}

.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
.who-i{padding:1.1rem 1.25rem;border-radius:var(--r-m);border:1px solid var(--edge);background:#fff}
.who-i b{display:block;font-family:var(--serif);font-size:1.08rem;font-weight:700;color:#08080a;margin-bottom:.25rem}
.who-i span{font-size:.8rem;color:#6a6a74;line-height:1.5}


/* ── the camera wall, on the working surface ──
   The feeds stay dark (they are photographs off a camera), but the
   card around them becomes paper like everything else in here. */
body.light .cams-sec{padding:clamp(48px,6vw,84px) 0}
body.light .cam{
  background:var(--panel);border-color:var(--edge);
  box-shadow:0 14px 38px rgba(16,6,10,.10);
}
body.light .cam figcaption{border-top-color:var(--edge)}
body.light .cam-ws{color:var(--ink)}
body.light .cam-foot em{color:var(--ink)}