/* ReconElevens theme v2: loaded last on landing and app. Warm paper, forest ink, one mint accent, coral for money at risk. */
:root{
  --bg:#F4F3EC;--bg-2:#ECEADF;--ink:#08130F;--ink-2:#1B2B25;--muted:#5C6A64;--line:#E0DED2;--line-2:#CFCCBD;
  --brand:#0B8F6F;--brand-d:#07705A;--brand-2:#DDF5EA;--glow:rgba(11,143,111,.2);--mint:#43E8B0;--mint-2:#6EE7C8;--forest:#08130F;
  --ok:#0B8F6F;--ok-bg:#DDF5EA;--bad:#D6401A;--bad-bg:#FFEBE3;--warn:#A8650A;--warn-bg:#FFF2D6;--info:#3856D6;--info-bg:#E9EEFF;
  --shadow:0 1px 0 rgba(255,255,255,.8) inset,0 1px 2px rgba(8,19,15,.04),0 10px 28px -10px rgba(8,19,15,.1);
  --shadow-lg:0 1px 2px rgba(8,19,15,.04),0 30px 70px -24px rgba(8,19,15,.28)
}
body{background:var(--bg)}
#prog{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--brand),var(--mint));transform:scaleX(0);transform-origin:0 50%;z-index:200;pointer-events:none}
.btn.brand{background:var(--brand);border-color:var(--brand);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 28px -10px var(--brand)}
.btn.brand:hover{background:var(--brand-d)}
.btn.primary{background:var(--forest);border-color:var(--forest)}
.tag.bad,.bad{color:var(--bad);background:var(--bad-bg)}.tag.warn,.warn{color:var(--warn);background:var(--warn-bg)}.tag.info,.info{color:var(--info);background:var(--info-bg)}

/* ---------------- landing: dark hero panel ---------------- */
.hero{margin:-70px 12px 0;padding:150px 0 64px;background:var(--forest);color:#fff;border-radius:38px}
.hero::before{background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);opacity:1}
.hero::after{top:-120px;width:1100px;height:620px;background:radial-gradient(closest-side,rgba(67,232,176,.34),transparent);filter:blur(30px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{opacity:.65;transform:translateX(-50%) scale(1.08)}}
.hero h1{color:#fff;font-size:clamp(42px,6.6vw,82px)}
.hero h1 em{color:var(--mint-2)}
.hero .lead{color:#A9BBB3}
.hero .chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#E5F3EC;box-shadow:none}
.hero .chip i{background:rgba(67,232,176,.18);color:var(--mint)}
.hero .btn.brand{background:var(--mint);border-color:var(--mint);color:var(--ink);box-shadow:0 0 0 0 rgba(67,232,176,.5),0 14px 34px -12px rgba(67,232,176,.7);animation:ping 3s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(67,232,176,.45),0 14px 34px -12px rgba(67,232,176,.7)}70%,100%{box-shadow:0 0 0 16px rgba(67,232,176,0),0 14px 34px -12px rgba(67,232,176,.7)}}
.hero .btn:not(.brand){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.hero .btn:not(.brand):hover{background:rgba(255,255,255,.12)}
.hero .works{color:#8FA39B}.hero .works svg{color:var(--mint)}
.hero .cap{color:#8FA39B}
.win{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);margin-top:34px;box-shadow:0 50px 100px -30px rgba(67,232,176,.25)}
.win .in{border-color:transparent}

/* source -> result flow */
.flowviz{max-width:1000px;margin:54px auto 0;position:relative}
.flowviz .row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;justify-items:center}
.fsrc{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);text-align:left;backdrop-filter:blur(8px)}
.fsrc i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font:700 13px var(--mono);font-style:normal;color:var(--ink)}
.fsrc:nth-child(1) i{background:#9BE15D}.fsrc:nth-child(2) i{background:#7AA7FF}.fsrc:nth-child(3) i{background:#FFB562}
.fsrc b{display:block;font-size:15px;color:#fff;line-height:1.2}.fsrc small{display:block;font:500 11.5px var(--mono);color:#8FA39B}
.flowviz svg{width:100%;height:auto;margin-top:2px}
.flowviz .fl{fill:none;stroke:rgba(67,232,176,.55);stroke-width:2;stroke-dasharray:6 7;animation:dashmove 1.2s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-26}}
.hub{margin:-4px auto 0;width:max-content;max-width:100%;padding:16px 30px;border-radius:22px;background:linear-gradient(160deg,rgba(67,232,176,.2),rgba(67,232,176,.06));border:1px solid rgba(67,232,176,.45);box-shadow:0 0 60px -10px rgba(67,232,176,.45);text-align:center}
.hub span{display:block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.hub b{display:block;font-size:clamp(38px,5vw,56px);letter-spacing:-.04em;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums;margin-top:4px}
.hub small{display:block;color:#9FB3AA;font-size:13px;margin-top:2px}

/* preview window: rows arrive one by one */
.win .rw{opacity:0;transform:translateX(-14px)}
.win.in .rw{animation:rowin .6s var(--ease) forwards}
.win.in .rw:nth-child(1){animation-delay:.5s}.win.in .rw:nth-child(2){animation-delay:.9s}.win.in .rw:nth-child(3){animation-delay:1.3s}
@keyframes rowin{to{opacity:1;transform:none}}
.win .rw:first-child{position:relative}
.win .rw .amt{font-variant-numeric:tabular-nums}
.k4>div{transition:transform .3s var(--ease),box-shadow .3s}
.k4>div:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(8,19,15,.35)}
.k4>div:first-child{border-color:#F6C7B6;background:linear-gradient(180deg,#FFF6F2,#fff)}

/* problem cards: three signal colours */
.feat{border-top:3px solid transparent;transition:transform .3s var(--ease),box-shadow .3s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.g3 .feat:nth-child(1){border-top-color:var(--bad)}.g3 .feat:nth-child(1) .ic{background:var(--bad-bg);color:var(--bad)}
.g3 .feat:nth-child(2){border-top-color:#E39A1F}.g3 .feat:nth-child(2) .ic{background:var(--warn-bg);color:var(--warn)}
.g3 .feat:nth-child(3){border-top-color:var(--info)}.g3 .feat:nth-child(3) .ic{background:var(--info-bg);color:var(--info)}
.h2 em{color:var(--brand)}
.step{border-top:3px solid var(--brand);transition:transform .3s var(--ease),box-shadow .3s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.step .n{font-size:13px;font-weight:700}
.step .files span{background:var(--brand-2);border-color:transparent;color:var(--brand-d)}

/* checks: dark inset panel */
#catches{margin:0 12px;border-radius:38px;background:var(--forest)!important;border:0!important;color:#fff;position:relative;overflow:hidden}
#catches::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 360px at 85% 0%,rgba(67,232,176,.22),transparent 70%);pointer-events:none}
#catches .page{position:relative}
#catches .h2{color:#fff}#catches .h2 em{color:var(--mint-2)}#catches .sub{color:#A9BBB3}
#catches .eyebrow{color:var(--mint)}#catches .eyebrow::before{background:var(--mint)}
#catches .cat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);box-shadow:none;backdrop-filter:blur(6px)}
#catches .cat:hover{background:rgba(255,255,255,.09);border-color:rgba(67,232,176,.4);transform:translateY(-3px)}
#catches .cat p{color:#A9BBB3}
#catches .tag.bad{color:#FF9370;background:rgba(255,106,61,.16)}
#catches .tag.warn{color:#FFC663;background:rgba(245,165,36,.16)}
#catches .tag.info{color:#9DB3FF;background:rgba(120,150,255,.16)}

/* privacy flow lights up */
.flow b{background:var(--brand-2);border-color:transparent;color:var(--brand-d)}
.flow .x{color:var(--bad)}

/* pricing */
.plan{transition:transform .3s var(--ease),box-shadow .3s}
.plan:hover{transform:translateY(-4px)}
.plan.hl{background:linear-gradient(165deg,#0F2A22,var(--forest) 60%);border-color:#14382D;box-shadow:0 40px 80px -30px rgba(8,19,15,.6),0 0 0 5px rgba(67,232,176,.22)}
.plan.hl .pop{background:var(--mint)}
.plan.hl li svg{color:var(--mint)}
.plan.hl .btn.brand{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.faq summary:hover{color:var(--brand)}
.foot{background:var(--forest)}
.foot::before{background:radial-gradient(700px 340px at 15% 0%,rgba(67,232,176,.3),transparent 70%)}
.foot h2 em{color:var(--mint-2)}
.foot .btn.brand{background:var(--mint);border-color:var(--mint);color:var(--ink)}

/* ---------------- app ---------------- */
.rail{background:var(--forest)}
.rail .on{background:rgba(67,232,176,.16);color:var(--mint)}
.setup h1 em{color:var(--brand)}
.panel{border-radius:18px}
.src.done .ic{background:var(--brand)}
.kpi{border-radius:14px;box-shadow:inset 0 3px 0 var(--line-2);transition:transform .3s var(--ease),box-shadow .3s}
.kpi:hover{transform:translateY(-2px)}
.kpi.k-ok{box-shadow:inset 0 3px 0 var(--brand)}.kpi.k-bad{box-shadow:inset 0 3px 0 var(--bad);background:linear-gradient(180deg,#FFF6F2,#fff)}.kpi.k-warn{box-shadow:inset 0 3px 0 #E39A1F}
.kpi .v{font-size:27px}
.nav-i.on{background:var(--forest);color:#fff}
.nav-i.on .n{background:rgba(255,255,255,.18)!important;color:#fff!important}
tbody tr{animation:trin .45s var(--ease) both}
tbody tr:nth-child(1){animation-delay:.02s}tbody tr:nth-child(2){animation-delay:.06s}tbody tr:nth-child(3){animation-delay:.1s}tbody tr:nth-child(4){animation-delay:.14s}tbody tr:nth-child(5){animation-delay:.18s}tbody tr:nth-child(6){animation-delay:.22s}tbody tr:nth-child(7){animation-delay:.26s}tbody tr:nth-child(8){animation-delay:.3s}tbody tr:nth-child(9){animation-delay:.34s}tbody tr:nth-child(10){animation-delay:.38s}tbody tr:nth-child(n+11){animation-delay:.42s}
@keyframes trin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
tbody tr:hover td{background:#F1FAF6}
tbody tr.sel td{background:var(--brand-2)}
.tag{font-weight:700}
.drawer{border-radius:24px 0 0 24px}
.gap-box{background:linear-gradient(160deg,var(--bad-bg),#fff);border:1px solid #F6C7B6}
.gap-box .v{color:var(--bad)}
@media(max-width:640px){.hero{margin:-62px 8px 0;border-radius:28px;padding:120px 0 44px}#catches{margin:0 8px;border-radius:28px}.flowviz .row{gap:8px}.fsrc{padding:8px 10px;gap:8px}.fsrc i{width:26px;height:26px;font-size:11px}.fsrc b{font-size:12.5px}.fsrc small{display:none}.hub{padding:12px 22px}}
@media(prefers-reduced-motion:reduce){.hero::after,.hero .btn.brand,.flowviz .fl,.win .rw,tbody tr{animation:none!important}.win .rw{opacity:1;transform:none}}