/* ==========================================================
   OtterWise Raft — LIGHT theme (loaded after raft.css)
   ========================================================== */
:root{
  --bg:#f7f8f5;
  --bg-2:#f0f2ee;
  --panel:#ffffff;
  --panel-2:#fbfbfa;
  --ink:#0f1110;
  --ink-2:#4a4f4b;
  --ink-3:#7d827d;
  --ink-4:#b4b8b3;
  --line:rgba(16,20,17,.09);
  --line-2:rgba(16,20,17,.16);
  --coral:#2aa45d;          /* accent fill */
  --coral-ink:#16824a;      /* accent text */
  --coral-glow:rgba(42,164,93,.18);
  --accent-text:#1b9152;
  --red:#d2604d;
  --sand:#d39c22;
  --dark:#0f1110;
}
html,body{background:var(--bg);color:var(--ink)}
body::after{opacity:.035;mix-blend-mode:multiply}
::selection{background:#bfe9cf;color:var(--ink)}
code{background:rgba(16,20,17,.06);color:var(--ink)}

/* dark "objects" on the light page keep their own palette */
.editor,.code-card,.raw pre,.billing{
  --ink:#eceee9;--ink-2:#a8aca7;--ink-3:#6e726d;--ink-4:#434743;
  --line:rgba(236,239,235,.09);--line-2:rgba(236,239,235,.16);
  --coral:#5fcd8a;--coral-glow:rgba(95,205,138,.16);
  color:var(--ink);
}

/* ---------- buttons ---------- */
.btn-light{background:var(--ink);color:#fff}
.btn-light:hover{background:var(--accent-text);color:#fff}
.btn-coral{background:var(--ink);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 10px 30px -14px rgba(15,17,16,.6)}
.btn-coral:hover{background:var(--accent-text);color:#fff;box-shadow:0 10px 30px -14px rgba(27,145,82,.6)}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}

/* ---------- nav ---------- */
.nav.scrolled{background:rgba(247,248,245,.78);border-bottom-color:var(--line)}
.brand-mark{color:var(--ink)}
.brand-raft{background:var(--ink);color:#fff}
.nav-links{color:var(--ink-2)}
.nav-links a::after{background:var(--accent-text)}

/* ---------- hero ---------- */
.hero-shade{background:
  radial-gradient(120% 70% at 8% 100%,rgba(247,248,245,.97) 0%,rgba(247,248,245,.8) 38%,rgba(247,248,245,0) 72%),
  linear-gradient(180deg,rgba(247,248,245,.9) 0%,rgba(247,248,245,0) 20%,rgba(247,248,245,0) 70%,rgba(247,248,245,.96) 100%)}
.eyebrow{background:rgba(255,255,255,.7);border-color:var(--line-2);color:var(--ink-2)}
.eyebrow .sep{color:var(--ink-4)}
.pulse{background:var(--coral)}
.hero-title{color:var(--ink)}
.hero-title .accent{color:var(--accent-text)}
.lede{color:var(--ink)}
.hud{background:rgba(255,255,255,.82);border-color:var(--line-2);box-shadow:0 30px 70px -36px rgba(15,17,16,.35)}
.hud-bar{background:rgba(16,20,17,.07)}
.hud-bar b{background:#c3c7c2}
.is-raft .hud-bar b{background:var(--coral)}
.hud-row.done .hud-time{color:var(--accent-text)}
.hud-foot [style*="coral"]{color:var(--accent-text)!important}
.lg-pass{background:#b9d3c1}
.lg-skip{background:var(--sand)}
.scroll-cue{border-color:var(--line-2)}
.scroll-cue span{background:var(--ink-3)}

/* ---------- section chrome ---------- */
.h2 .muted{color:#a2a7a1}
.h2code{background:rgba(42,164,93,.1);color:var(--accent-text)}
.c,.tot-v .c{color:var(--accent-text)}

/* ---------- race ---------- */
.track{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.lane.ubu .fill{background:repeating-linear-gradient(-45deg,#dfe1dd 0 6px,#d3d6d1 6px 12px);background-size:17px 17px}
.lane.ubu.finished .fill{background:#d7dad5}
.lane.raft .fill{background:var(--coral);opacity:1}
.lane .lbl{color:var(--ink-2);text-shadow:none}

.lane.raft.finished .clock{color:var(--accent-text)}
.track .gap{border-left-color:var(--coral);background:repeating-linear-gradient(-45deg,rgba(42,164,93,.2) 0 1px,transparent 1px 7px);color:var(--accent-text)}
.rr-pct .big{color:var(--accent-text)}
.rr-meta .warn{color:#b07a10}
.tot-v s{color:var(--ink-4)}
.raw summary::after{color:var(--accent-text)}
.raw pre{background:#111312;border-color:rgba(16,20,17,.2)}

/* ---------- bento + illustrations ---------- */
.bento{background:var(--line-2);border-color:var(--line-2)}
.card{background:#fff}
.card:hover{background:#fff}
.ill{background-color:#f6f7f4;background-image:radial-gradient(rgba(16,20,17,.12) 1px,transparent 1.2px)}
.ill::after,.card:hover .ill::after{background:radial-gradient(90% 90% at 50% 50%,transparent 60%,#f6f7f4 100%)}
.iso-face{stroke:#8f948e}
.f-top{fill:#ffffff}
.f-l{fill:#f0f1ee}
.f-r{fill:#e6e8e4}
.inset{stroke:rgba(16,20,17,.2)}
.guide{stroke:rgba(16,20,17,.35)}
.post{stroke:#8f948e}
.vent{stroke:rgba(16,20,17,.22)}
.sign-txt{fill:#6b706b}
.sign-txt.acc{fill:var(--accent-text)}
.ico{stroke:#8f948e}
.ico.acc{stroke:var(--coral)}
.fillacc{fill:rgba(42,164,93,.12)}
.fillacc-soft{fill:rgba(42,164,93,.14)}
.fill-acc,.led{fill:var(--coral)}
.ghost{opacity:.5}
.toggle{fill:rgba(42,164,93,.14);stroke:var(--coral)}
.orbit{stroke:var(--coral)}
.orbit-back{stroke:rgba(16,20,17,.3)}
.codeline{stroke:rgba(16,20,17,.2)}
.gut{fill:#eceee9;stroke:#a7aba6}
@keyframes gut{0%,6%{fill:#eceee9}12%,84%{fill:var(--coral)}100%{fill:#eceee9}}
@keyframes gutm{0%,6%{fill:#eceee9}12%,84%{fill:var(--red)}100%{fill:#eceee9}}
.card-r{fill:#fff;stroke:#a7aba6}
.card-r.hot{fill:#f1faf4;stroke:var(--coral)}
.card-t{fill:#8a8f89}
.card-t.strong{fill:var(--ink)}
.card-glyph{fill:#8a8f89}
.ghost-card .card-r{fill:#fbfbfa;stroke:#c9ccc7}
.ghost-card.far .card-r{fill:#f8f9f7;stroke:#dfe1dd}
.ghost-card .card-glyph,.ghost-card .card-t{fill:#b4b8b3}
.ghost-card.far .card-glyph,.ghost-card.far .card-t{fill:#d0d3ce}
.trace-back{stroke:rgba(16,20,17,.08)}
.feed{stroke:var(--coral)}
.lane-bg{stroke:rgba(16,20,17,.1)}
.lane-run{stroke:var(--coral)}
.pass{fill:#d4d7d2}
@keyframes pass{0%,40%{fill:#d4d7d2}46%,88%{fill:var(--coral)}100%{fill:#d4d7d2}}

/* ---------- coverage spotlight ---------- */
.spot-switch{background:#fff;border-color:var(--line-2)}
.spot-switch button{color:var(--ink-3)}
.spot-switch button:hover{color:var(--ink)}
.spot-switch button.on{background:var(--ink);color:#fff}
.spot-switch button.on[data-drv="raft"]{background:var(--coral);color:#fff}
.sm-bar{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.sm-bar b{background:#b4b8b3}
.sm-bar b.pcov{background:repeating-linear-gradient(-45deg,rgba(210,96,77,.75) 0 5px,rgba(210,96,77,.45) 5px 10px)}
.sm-bar b.raft{background:var(--coral)}
.sm-base{background:var(--ink-2)}
.sm-val{color:var(--ink)}
.editor{background:#111312;border-color:rgba(16,20,17,.25);box-shadow:0 40px 90px -40px rgba(15,17,16,.45)}
.editor::before{background:none}
.ed-bar i{background:#2a2d2b}

/* ---------- billing: the dark section on a light page ---------- */
.billing{background:#0f1110;color:var(--ink)}
.billing::before{opacity:.5;background-image:radial-gradient(rgba(236,239,235,.07) 1px,transparent 1.2px)}
.dark-ink{color:var(--ink)}
.bill-lede{color:var(--ink)}
.bill-sim{background:#171a18;border:1px solid var(--line-2);box-shadow:none}
.bs-head output{color:var(--ink)}
input[type=range]::-webkit-slider-thumb{border-color:#171a18}

/* ---------- setup ---------- */
.checks li{color:var(--ink-2)}
.checks li::before{border-color:var(--coral)}
.code-card{background:#111312;border-color:rgba(16,20,17,.25);box-shadow:0 30px 70px -40px rgba(15,17,16,.45)}
.checks-card{background:#fff;border-color:var(--line-2)}
.ck-ok{color:var(--accent-text);background:rgba(42,164,93,.1)}
.ck-dot{background:var(--coral)}

/* ---------- cta ---------- */
.cta::before{background:radial-gradient(60% 60% at 50% 120%,rgba(42,164,93,.12),transparent 70%)}
.cta-title .c{color:var(--accent-text)}
/* background is opaque, so the blur adds nothing and can leave a seam inside the pill in some browsers */
.cta-form{background:#fff;border-color:var(--line-2);box-shadow:0 20px 50px -30px rgba(15,17,16,.3);-webkit-backdrop-filter:none;backdrop-filter:none}
.otter-note b{color:var(--ink)}

@media (max-width:700px){
  .hero-shade{background:linear-gradient(180deg,rgba(247,248,245,.75) 0%,rgba(247,248,245,0) 14%,rgba(247,248,245,0) calc(min(56vh,480px) - 180px),rgba(247,248,245,1) min(56vh,480px))}
}

.foot{stroke:#a7aba6}
.lane.raft .lbl{color:var(--ink-2)}
.lane.raft .lbl-in{color:#fff}

.lift-shadow{fill:#101411}
.card:hover .lift-shadow{fill-opacity:.07}
.card:hover .ill .chip .fillacc{fill:rgba(42,164,93,.28)}

.raw pre .c{color:#6fd897}
.raw .err{color:#ec806d}

/* ---------- agents ---------- */
.replay{background:#fff}
.rp-row.raft.landed .rp-stat .big{color:var(--accent-text)}
.rp-track{background:#f6f7f4}
.seg.wait{background:repeating-linear-gradient(-45deg,#c9ccc7 0 1px,transparent 1px 5px);box-shadow:inset 0 0 0 1px #c9ccc7}
.rp-row.ubu .seg.wait{background:repeating-linear-gradient(-45deg,#b9bcb6 0 1px,transparent 1px 5px);box-shadow:inset 0 0 0 1px #b9bcb6}
.lg-wait{background:repeating-linear-gradient(-45deg,#b9bcb6 0 1px,transparent 1px 4px);box-shadow:inset 0 0 0 1px #b9bcb6}
.rp-mark.ok{box-shadow:0 0 0 2px #fff}
.rp-mark span{background:var(--accent-text)}
.prompt{fill:var(--accent-text)}
.lap-dot{fill:#6b706b}
.f-top.warn,.f-l.warn,.f-r.warn{fill:#fbe9e5}
.iso-face.warn{stroke:var(--red)}
.f-top.hot{fill:#e4f6ea}.f-l.hot{fill:#d2eedc}.f-r.hot{fill:#c3e7d0}
.iso-face.hot{stroke:var(--coral)}
.ghost-soft{opacity:.62}
.row-add{fill:rgba(42,164,93,.13)}
.row-del{fill:rgba(210,96,77,.12)}

/* brand lockup matching the main marketing nav (.nd-logo): mark + "OtterWise / Raft" */
.brand{gap:10px;font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.brand-mark-sm{width:22px;height:22px;flex:none;color:var(--ink)}
.brand-name{color:var(--ink)}
.brand-sub{color:#6B6F74}