/* Growth Scan AI — dark theme (Moritz's brief: the original black + lime, Higgsfield / Vivir de IA style).
   Token names are kept from the light version so inline references in app.js keep working; see DESIGN.md. */
:root{
  --paper:#0A0A0B;      /* page background */
  --card:#141416;       /* cards and panels */
  --surface:#1C1C1F;    /* raised areas inside cards, chips, bars */
  --line:#2A2A2E;       /* borders and dividers */
  --ink:#F2F2F2;        /* main text */
  --ink-2:#A8A8B0;      /* secondary text, 8:1 on the page */
  /* Zero Code greens: a greener lime, with a green → lime gradient on buttons and featured cards */
  --green:#B8F01E;      /* lime: actions, what you win, highlights (dark text on top) */
  --green-2:#C9F53C;
  --green-text:#A3E635; /* green words in headlines and links */
  --green-deep:#7FC31C;
  --green-tint:rgba(170,232,30,.10);
  --grad:linear-gradient(90deg,#8DD100 0%,#C6F31E 100%);
  --grad-card:linear-gradient(160deg,rgba(130,200,20,.20) 0%,rgba(18,24,12,.92) 55%,rgba(14,16,12,.96) 100%);
  --marker:#B8F01E;
  --loss:#FF6B7A;       /* pink: money and time lost */
  --loss-tint:rgba(255,107,122,.12);
  --amber:#F5B942;
  --star:#FBBF24;
  --on-lime:#0A0A0B;
  --glow:0 0 40px rgba(198,255,26,.18);
  /* the money "ticket" is the one light element, like the white card in the Zero Code ad */
  --t-paper:#FFFFFF; --t-ink:#121214; --t-ink-2:#4A4F5A; --t-line:#E3E5EA; --t-loss:#C1352F; --t-gain:#0F6B4F;
  --r-s:12px; --r-m:16px; --r-l:22px; --pill:999px;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wide:"wdth" 118;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{background:radial-gradient(900px 420px at 80% -8%,rgba(198,255,26,.09),transparent 65%),var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--green)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:8px}
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--green);color:var(--on-lime);padding:10px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}

/* ---------- frame ---------- */
.top{max-width:1120px;margin:0 auto;padding:16px 20px}
.brand{font-weight:800;font-variation-settings:var(--wide);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.brand span{color:var(--green);margin-left:4px}
main{max-width:1120px;margin:0 auto;padding:0 20px 40px}
.screen{display:none}.screen.active{display:block;animation:in .28s ease}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.narrow{max-width:560px;margin:0 auto}
.foot{max-width:1120px;margin:0 auto;padding:24px 20px 96px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2);display:flex;gap:16px;flex-wrap:wrap}
.foot a{color:var(--ink-2)}

/* ---------- type ---------- */
h1{font-size:clamp(32px,8.2vw,56px);line-height:1.02;font-weight:850;font-variation-settings:var(--wide);letter-spacing:-.025em;max-width:15ch}
h1 .pink{color:var(--loss)} h1 .lime{color:var(--green)}
h2{font-size:22px;line-height:1.2;font-weight:800;font-variation-settings:var(--wide);letter-spacing:-.01em}
.h-step{font-size:clamp(26px,6.4vw,32px);line-height:1.1;max-width:none;margin-bottom:12px}
.h3{font-size:17px;font-weight:750;letter-spacing:0;margin-bottom:10px}
.lead{font-size:18px;color:var(--ink-2);margin-top:16px;max-width:46ch}
.lead strong{color:var(--ink);font-weight:650}
.sub{color:var(--ink-2);font-size:15px;margin-top:6px}
.fine{font-size:13px;color:var(--ink-2);margin-top:12px}
.num{font-variant-numeric:tabular-nums}
.mark{color:var(--green)}
.badge{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid rgba(198,255,26,.35);border-radius:var(--pill);padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;margin-bottom:20px}
.badge .g{color:var(--green)}.badge .w{color:var(--ink)}.badge .p{color:var(--loss)}.badge .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-2)}

/* ---------- buttons & fields ---------- */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:0 20px;border-radius:var(--pill);font-weight:800;font-size:17px;text-decoration:none;text-align:center;transition:background .15s,transform .1s,box-shadow .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--green);color:var(--on-lime);box-shadow:var(--glow)}
.btn-primary:hover{background:var(--green-2)}
.btn-quiet{background:var(--surface);color:var(--ink);font-weight:650;font-size:15px;min-height:48px;border:1px solid var(--line)}
.btn-quiet:hover{border-color:#3A3A40}
.btn-line{background:var(--green-tint);color:var(--green);border:1px solid rgba(198,255,26,.45);font-size:15px;min-height:48px}
.btn-line:hover{background:rgba(198,255,26,.16)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.fld{display:block;margin-top:12px}
.fld span{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:6px;letter-spacing:.02em}
.fld input,.fld select{width:100%;min-height:54px;border:1px solid var(--line);border-radius:var(--r-m);padding:0 16px;font-size:17px;background:var(--card);color:var(--ink)}
.fld select{font-size:16px}
.fld input:focus,.fld select:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(198,255,26,.15)}
.fld input::placeholder{color:#6E6E78}
.fld input[aria-invalid="true"]{border-color:var(--loss)}
.err{display:none;color:var(--loss);font-size:14px;margin-top:10px;font-weight:650}
.more{margin-top:12px;font-size:15px}
.more summary{cursor:pointer;color:var(--green);font-weight:650;min-height:44px;display:flex;align-items:center}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:14px;color:var(--ink-2);cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--green);flex-shrink:0;margin-top:1px}

/* ---------- hero ---------- */
.hero{display:grid;gap:32px;padding:12px 0 8px}
.search{margin-top:24px;max-width:460px}
.search .btn{margin-top:18px}
.hero-demo{display:none}
@media (min-width:960px){
  .hero{grid-template-columns:1.15fr .85fr;align-items:center;gap:56px;padding:28px 0 24px}
  .hero-demo{display:block}
  .hero-demo .chat{height:330px}
}
.hero-demo-res{min-height:120px}

/* ---------- demo list ---------- */
.demos{margin-top:44px;max-width:720px}
.demos h2{font-size:20px}
.demo-list{display:grid;gap:8px;margin-top:14px}
.demo-row{display:flex;gap:14px;align-items:center;text-align:left;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);min-height:68px;width:100%;transition:border-color .15s}
.demo-row:hover,.demo-row:focus-visible{border-color:rgba(198,255,26,.45)}
.demo-row b{display:block;font-weight:750;font-size:16px}
.demo-row small{display:block;color:var(--ink-2);font-size:14px}
.play{width:40px;height:40px;border-radius:50%;background:var(--green);flex-shrink:0;position:relative;box-shadow:0 0 18px rgba(198,255,26,.25)}
.play::after{content:"";position:absolute;left:15px;top:12px;border-left:13px solid var(--on-lime);border-top:8px solid transparent;border-bottom:8px solid transparent}
.doc{width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid rgba(198,255,26,.45);flex-shrink:0;position:relative}
.doc::after{content:"";position:absolute;left:11px;top:9px;width:16px;height:20px;border:2px solid var(--green);border-radius:3px}

/* ---------- questions ---------- */
.progress{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink-2);margin-top:4px}
.back{color:var(--green);font-weight:700;min-height:44px;padding-right:12px}
.bar{height:6px;background:var(--surface);border-radius:6px;overflow:hidden;margin:6px 0 24px}
.bar>i{display:block;height:100%;width:0;background:var(--green);transition:width .3s;box-shadow:0 0 12px rgba(198,255,26,.5)}
.q-hint{font-size:16px;color:var(--ink-2);margin:-4px 0 18px}
.q-hint strong{color:var(--ink)}
.options{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-m);text-align:left;font-size:16px;font-weight:600;width:100%;background:var(--card);transition:border-color .15s,background .15s}
.opt:hover{border-color:#3E3E45}
.opt.selected{border-color:var(--green);background:var(--green-tint)}
.opt .box{width:22px;height:22px;border:2px solid #6E6E78;flex-shrink:0;display:grid;place-items:center}
.opt .box.r{border-radius:50%}.opt .box.c{border-radius:6px}
.opt.selected .box{border-color:var(--green);background:var(--green)}
.opt.selected .box::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-lime)}
.opt.selected .box.c::after{width:10px;height:6px;border-radius:0;border:solid var(--on-lime);border-width:0 0 2px 2px;background:none;transform:rotate(-45deg) translate(1px,-1px)}
.group{margin-top:22px}
.opt-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt-row .opt{min-height:52px;font-size:15px}
.link{color:var(--green);font-weight:650;min-height:44px;margin-top:12px;text-decoration:underline}
.confirm-list{display:grid;gap:10px}
.place{display:block;text-align:left;width:100%;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}
.place:hover,.place:focus-visible{border-color:var(--green)}
.place b{display:block;font-size:17px}
.place span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.place em{display:block;font-style:normal;font-weight:700;margin-top:6px;color:var(--ink)}
.place em span{display:inline;font-size:inherit;color:var(--star);margin:0}
.attr{font-size:12px;color:var(--ink-2);margin-top:8px}
.loading{text-align:center;padding:72px 0}
.spinner{width:42px;height:42px;border:3px solid var(--surface);border-top-color:var(--green);border-radius:50%;margin:0 auto 18px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading p{color:var(--ink-2)}.loading strong{color:var(--ink)}

/* ---------- lead ---------- */
.teaser{list-style:none;margin:14px 0 18px}
.teaser li{padding:8px 0 8px 28px;position:relative;font-size:16px;color:var(--ink)}
.teaser li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;border:solid var(--green);border-width:0 0 3px 3px;transform:rotate(-45deg)}
.teaser strong{color:var(--green)}
.lead-card{background:var(--card);border:1px solid rgba(198,255,26,.28);border-radius:var(--r-l);padding:18px;box-shadow:var(--glow)}
.lead-card .btn{margin-top:18px}
.lead-card .btn-quiet{margin-top:10px}
.privacy-basic{font-size:12.5px;color:var(--ink-2);margin-top:12px;line-height:1.5}

/* ---------- results ---------- */
.example-note{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);padding:12px 14px;border-radius:var(--r-s);font-size:14px;margin-bottom:16px;color:var(--ink-2)}
.listing{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.listing figure{position:relative;aspect-ratio:16/9;background:var(--surface)}
.listing figure::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(20,20,22,.85))}
.listing img{width:100%;height:100%;object-fit:cover;display:block}
.listing figcaption{position:absolute;right:8px;bottom:8px;z-index:1;background:rgba(10,10,11,.7);color:#fff;font-size:11px;padding:3px 8px;border-radius:6px}
.listing figcaption a{color:#fff}
.listing .body{padding:18px}
.listing h1{font-size:clamp(28px,7vw,38px);max-width:none}
.listing .meta{color:var(--ink-2);font-size:15px;margin-top:4px}
.stars{color:var(--star);letter-spacing:1px}
.score{display:flex;gap:16px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.score p{font-size:15px;color:var(--ink-2)}.score strong{color:var(--ink)}
.ring{--p:0;--c:var(--loss);width:92px;height:92px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--surface) 0);box-shadow:0 0 28px rgba(0,0,0,.4)}
.ring>span{width:74px;height:74px;border-radius:50%;background:var(--card);display:grid;place-items:center;text-align:center;line-height:1}
.ring b{font-size:28px;font-weight:850;font-variation-settings:var(--wide)}
.ring small{display:block;font-size:11px;color:var(--ink-2);margin-top:2px}
.parts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.parts div{background:var(--surface);border-radius:var(--r-s);padding:10px 12px;font-size:13px;color:var(--ink-2)}
.parts b{display:block;color:var(--ink);font-size:16px}

.block{margin-top:30px}
.block>h2{margin-bottom:12px}

/* the money ticket: white card on the dark page (Zero Code ad) */
.money{border-radius:var(--r-l);padding:20px;background:var(--t-paper);color:var(--t-ink);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.money .grp{font-size:13px;font-weight:750;color:var(--t-ink-2);margin:4px 0 6px}
.m-line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed var(--t-line);font-size:15px}
.m-line b{white-space:nowrap;font-variant-numeric:tabular-nums}
.m-line.lost b{color:var(--t-loss)}
.m-line.gain b{color:var(--t-gain)}
.m-sub{font-size:13px;color:var(--t-ink-2);margin:6px 0 2px}
.m-total{margin-top:18px;font-size:19px;line-height:1.45;font-weight:700}
.m-total b{font-size:clamp(26px,7vw,32px);font-weight:850;font-variation-settings:var(--wide)}
.money .mark{color:var(--t-ink);background:linear-gradient(transparent 50%,var(--marker) 50%,var(--marker) 92%,transparent 92%);padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.m-year{font-size:15px;color:var(--t-ink-2);margin-top:2px}
.m-if{margin-top:14px;font-size:15px;padding:12px 14px;background:#F2F3F6;border-radius:var(--r-s)}
.m-if span{color:var(--t-ink-2) !important}
.m-foot{margin-top:14px;font-size:12.5px;color:var(--t-ink-2);line-height:1.5}
.m-foot a{color:var(--t-ink-2)}

.cmp-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin-top:14px}
.cmp-name{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-row.me .cmp-name{font-weight:800}
.cmp-val{font-size:14px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp-row.me .cmp-val{color:var(--ink);font-weight:700}
.cmp-bar{grid-column:1/-1;height:10px;background:var(--surface);border-radius:6px;overflow:hidden}
.cmp-bar i{display:block;height:100%;background:#5A5A63;border-radius:6px;transition:width .8s ease}
.cmp-row.me .cmp-bar i{background:var(--loss);box-shadow:0 0 12px rgba(255,107,122,.4)}
.note{font-size:12.5px;color:var(--ink-2);margin-top:12px}

.week{margin-top:6px}
.wk-axis{display:grid;grid-template-columns:28px 1fr;font-size:11px;color:var(--ink-2)}
.wk-axis div{position:relative;display:block;height:16px}
.wk-axis div span{position:absolute;transform:translateX(-50%)}
.wk-axis div span:first-child{transform:none}
.wk-axis div span:last-child{transform:translateX(-100%)}
.wk-row{display:grid;grid-template-columns:28px 1fr;align-items:center;margin-top:5px}
.wk-row span{font-size:13px;font-weight:700;color:var(--ink-2)}
.wk-bar{position:relative;height:18px;background:var(--loss-tint);border-radius:5px;overflow:hidden}
.wk-bar i{position:absolute;top:0;bottom:0;background:var(--green)}
.wk-key{display:flex;gap:16px;font-size:13px;color:var(--ink-2);margin-top:10px}
.wk-key span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.wk-key .o::before{background:var(--green)}.wk-key .c::before{background:var(--loss-tint);border:1px solid rgba(255,107,122,.4)}

.find{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.find:first-of-type{border-top:none;padding-top:4px}
.find strong{color:var(--ink)}
.src{font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--pill);white-space:nowrap;height:fit-content}
.s-res{background:var(--loss-tint);color:var(--loss)}
.s-ok,.s-tu{background:var(--green-tint);color:var(--green)}
.s-google{background:rgba(138,180,255,.14);color:#9EC1FF}
.s-ficha,.s-web{background:var(--surface);color:var(--ink)}
.s-sector{background:rgba(245,185,66,.14);color:var(--amber)}
.quote{margin-top:8px;padding:10px 12px;border-left:3px solid var(--loss);background:rgba(255,107,122,.06);border-radius:0 var(--r-s) var(--r-s) 0;font-style:italic;color:var(--ink)}
.quote small{display:block;font-style:normal;color:var(--ink-2);font-size:12.5px;margin-top:4px}
.quote small a{color:var(--ink-2)}

.rec{padding:20px;margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l)}
.rec-n{font-size:12px;font-weight:750;color:var(--green);letter-spacing:.02em}
.rec h3{font-size:22px;line-height:1.2;font-weight:800;font-variation-settings:var(--wide);margin-top:2px}
.ba-txt{display:grid;gap:8px;margin-top:12px}
.ba-txt div{padding:10px 12px;border-radius:var(--r-s);font-size:15px}
.ba-txt .bef{background:var(--loss-tint);color:var(--ink-2)}
.ba-txt .bef s{text-decoration-color:rgba(255,107,122,.6)}
.ba-txt .aft{background:var(--green-tint);color:var(--ink)}
.ba-txt b{display:block;font-size:12px;font-weight:750;margin-bottom:2px}
.ba-txt .bef b{color:var(--loss)}.ba-txt .aft b{color:var(--green)}
.why{list-style:none;margin-top:12px}
.why li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14px;padding:5px 0;color:var(--ink-2)}
.why li a{color:var(--ink-2)}
.rec .est{margin-top:12px;font-size:15px;font-weight:650}
.rec .btn-line{margin-top:14px}
.day-btn{margin-top:12px}

.cta{margin-top:32px;padding:24px;border-radius:var(--r-l);background:linear-gradient(160deg,rgba(198,255,26,.10),rgba(20,20,22,1) 55%);border:1px solid rgba(198,255,26,.35);box-shadow:var(--glow)}
.cta h2{font-size:24px}
.cta p{color:var(--ink-2);margin:8px 0 16px;font-size:15px}
.cta-msg{color:var(--ink) !important;font-weight:650;margin:12px 0 0 !important}
.cta-msg:empty{display:none}
.cta-retry{color:var(--green);text-decoration:underline;font-weight:750;min-height:44px}
.packs{display:grid;gap:8px;margin-bottom:14px}
.pack{display:flex;justify-content:space-between;background:var(--surface);border-radius:var(--r-s);padding:10px 12px;font-size:14px}
.dev-note{font-size:12px;color:var(--amber) !important;margin:10px 0 0 !important}
.formula{margin-top:20px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px}
.formula summary{cursor:pointer;font-weight:650;color:var(--ink);min-height:44px;display:flex;align-items:center}
.formula p{margin-top:8px}
.formula strong{color:var(--ink)}
.restart{margin-top:12px;text-align:center}
.restart button{color:var(--green);text-decoration:underline;min-height:44px;font-weight:650}
.fallback{background:rgba(245,185,66,.08);border-left:4px solid var(--amber);padding:12px 14px;border-radius:0 var(--r-s) var(--r-s) 0;font-size:14px;color:var(--ink)}

.sticky{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,11,.9);backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:20}
.sticky .btn{max-width:560px;margin:0 auto}

/* ---------- phone / chat (dark chat app) ---------- */
.phone{background:#0B141A;border:1px solid #233138;border-radius:24px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 40px rgba(198,255,26,.06)}
.phone-h{display:flex;gap:10px;align-items:center;padding:10px 14px;background:#1F2C34}
.av{width:36px;height:36px;border-radius:50%;background:var(--green);color:var(--on-lime);display:grid;place-items:center;font-weight:800;flex-shrink:0}
.phone-h b{display:block;font-size:15px;color:#E9EDEF}
.phone-h small{display:block;font-size:12px;color:#8696A0}
.chat{height:min(44dvh,330px);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
.msg{max-width:85%;padding:8px 11px;border-radius:12px;font-size:14.5px;line-height:1.4;white-space:pre-line;animation:pop .2s ease;color:#E9EDEF}
.msg.in{align-self:flex-start;background:#202C33;border-top-left-radius:4px}
.msg.out{align-self:flex-end;background:#005C4B;border-top-right-radius:4px}
.msg .bot{display:block;font-size:11.5px;font-weight:750;color:#9FE0C9;margin-bottom:2px}
.msg.file{align-self:flex-start;background:#202C33;border:1px dashed #3B4A54;font-weight:650;display:flex;gap:8px;align-items:center}
.clip{width:14px;height:16px;border:2px solid #8696A0;border-radius:3px;display:inline-block}
.msg.sys{align-self:center;background:#182229;color:#8696A0;font-size:12px;text-align:center;max-width:95%}
.msg.chapter{align-self:flex-start;background:var(--green);color:var(--on-lime);font-weight:800;font-variation-settings:var(--wide);font-size:15px;border-radius:8px;padding:4px 10px}
.typing{align-self:flex-end;background:#005C4B;padding:10px 12px;border-radius:12px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:#9FE0C9;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.res-card{margin-top:12px;background:var(--card);border:1px solid rgba(198,255,26,.4);border-radius:var(--r-m);padding:14px;animation:pop .3s ease;box-shadow:var(--glow)}
.res-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.res-h b{font-size:15px}
.res-tag{font-size:12px;font-weight:750;background:var(--green);color:var(--on-lime);padding:2px 9px;border-radius:var(--pill);white-space:nowrap}
.res-foot{font-size:13px;color:var(--ink-2);margin-top:8px}
.cal-row{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.cal-row>span{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}
.cal-row>i{font-style:normal;color:#8A8A94}
.cal-row.new>i{background:var(--green-tint);border-left:4px solid var(--green);border-radius:6px;padding:7px 9px;color:var(--ink);font-weight:700;animation:ring 1.3s ease}
.cal-row.cancel>i{background:var(--loss-tint);border-left:4px solid var(--loss);border-radius:6px;padding:7px 9px;color:var(--loss);font-weight:700}
.cal-row.cancel b{text-decoration:line-through}
.cal-row i small{display:block;color:var(--ink-2);font-size:12px;font-weight:500;margin-top:2px}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(198,255,26,.45)}100%{box-shadow:0 0 0 12px rgba(198,255,26,0)}}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chips span{font-size:12px;font-weight:700;background:var(--green-tint);color:var(--green);border-radius:var(--pill);padding:3px 9px}
.rv{display:flex;gap:10px}
.rv-a{width:36px;height:36px;border-radius:50%;background:#7C6CF0;color:#fff;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.rv p{font-size:14px;margin-top:2px;color:var(--ink-2)}
.counter{font-size:24px;font-weight:850;color:var(--green);display:inline-block;transition:transform .3s;font-variation-settings:var(--wide)}
.counter.bump{transform:scale(1.3)}
.q-title{font-weight:750;font-size:15px}
.q-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:7px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.q-line b{white-space:nowrap;color:var(--ink)}
.q-line.total{font-size:16px}.q-line.total b{color:var(--green)}
.crm{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.crm-col{background:var(--surface);border-radius:var(--r-s);padding:8px;min-height:80px;font-size:12px;font-weight:700;color:var(--ink-2)}
.crm-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;color:var(--ink);font-size:13px;margin-top:6px;animation:pop .3s ease}
.crm-card.won{border:1px solid var(--green);background:var(--green-tint)}
.chk{display:flex;gap:10px;align-items:center;font-size:14px;padding:7px 0;border-top:1px solid var(--line)}
.chk i{width:22px;height:22px;border-radius:6px;border:2px solid #6E6E78;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900;color:transparent;transition:all .3s}
.chk.on i{background:var(--green);border-color:var(--green);color:var(--on-lime)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba figure{background:var(--surface);border-radius:var(--r-s);padding:6px;text-align:center;font-size:12px;color:var(--ink-2);font-weight:650}
.ba svg{width:100%;height:auto;display:block;border-radius:6px;margin-bottom:4px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal-box{width:100%;max-width:460px;max-height:100dvh;overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:24px 24px 0 0;padding:18px 16px 22px;animation:in .25s ease}
@media (min-width:640px){.modal{align-items:center}.modal-box{border-radius:24px;max-height:94dvh}}
.modal-top{position:sticky;top:-18px;background:var(--paper);z-index:2;padding:18px 0 10px;margin-top:-18px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.modal-top h2{font-size:21px}
.modal-top p{font-size:14px;color:var(--ink-2);margin-top:2px}
.x{width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font-size:16px;flex-shrink:0}
.modal-actions{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:16px}
.modal-actions .btn-quiet{width:auto;padding:0 20px}
.sim-note{font-size:12.5px;color:var(--ink-2);text-align:center;margin-top:10px}
.day-sum{margin-top:12px;padding:14px;border-radius:var(--r-m);background:var(--green-tint);border:1px solid rgba(198,255,26,.4)}
.day-sum b{display:block;font-size:16px;margin-bottom:6px;color:var(--green)}
.day-sum li{font-size:14px;margin-left:18px;padding:2px 0;color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Design review, third round (equipo/informes/2026-11-03-producto.md) */
.fld input,.fld select,.opt,.place{border-color:#66666F}
.opt.selected,.fld input:focus,.fld select:focus{border-color:var(--green)}
.fld span{font-size:14px}
.lead,.q-hint{color:#E4E4E8}
.wk-bar{background:#54272C;box-shadow:inset 0 0 0 1px #A0454E}
.wk-key .c::before{background:#54272C;border:1px solid #A0454E}
.block[aria-labelledby="wk-h"] .mark,.block[aria-labelledby="cmp-h"] .mark{color:var(--loss)}
.cmp-bar i{background:#7A7A85}
.badge .p{color:var(--ink)}

/* Zero Code greens (Moritz, 3-nov-2026): gradient buttons, green words, white inputs with a green ring, green-tinted featured cards */
:root{--glow:0 0 36px rgba(150,220,20,.22)}
body{background:radial-gradient(900px 420px at 80% -8%,rgba(140,210,20,.10),transparent 65%),var(--paper)}
a,.link,.more summary,.back,.restart button{color:var(--green-text)}
h1 .lime,.mark,.brand span,.badge .g,.rec-n,.teaser strong,.counter,.q-line.total b{color:var(--green-text)}
.badge{border-color:rgba(170,232,30,.45)}
.btn-primary{background:var(--grad);color:var(--on-lime)}
.btn-primary:hover{background:var(--grad);filter:brightness(1.07)}
.btn-line{color:var(--green-text);border-color:rgba(170,232,30,.5)}
.play,.res-tag,.msg.chapter,.bar>i{background:var(--grad)}
.res-tag{color:var(--on-lime)}
.av{background:var(--grad)}
.fld input,.fld select{background:#FFFFFF;color:#121214;border:2px solid rgba(170,232,30,.55);box-shadow:0 0 0 4px rgba(140,210,20,.08)}
.fld input::placeholder{color:#6B7280}
.fld input:focus,.fld select:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(170,232,30,.25)}
.fld input[aria-invalid="true"]{border-color:var(--loss);box-shadow:0 0 0 4px rgba(255,107,122,.18)}
.lead-card,.cta{background:var(--grad-card);border:1px solid rgba(170,232,30,.5)}
.res-card{border-color:rgba(170,232,30,.45)}
.demo-row:hover,.demo-row:focus-visible,.place:hover,.place:focus-visible{border-color:rgba(170,232,30,.6)}
.opt.selected{border-color:var(--green);background:var(--green-tint)}
.s-ok,.s-tu{color:var(--green-text)}
.ba-txt .aft b{color:var(--green-text)}
.wk-bar i,.wk-key .o::before{background:var(--grad)}
.day-sum{background:var(--grad-card);border-color:rgba(170,232,30,.5)}
.day-sum b{color:var(--green-text)}