/* ============================================================================
   EKG v2: the readability layer. Loaded last on every page.
   Two accent roles, never mixed:
     green  = live value or primary action (read from the chain, or do it)
     violet = structure (section markers, labels that orient you, links, nav)
     red    = burn only
   Text is brighter, labels are larger and set in the sans, not tiny mono caps.
   ========================================================================= */
:root{
  --paper:#07090C; --s1:#0E1117; --s2:#131821; --s3:#1A202B;
  --grid:#0C1016; --grid2:#121822;
  --ink:#F3F6FA; --ink2:#BCC5D2; --ink3:#8C97A9;
  --rule:#1F2632; --rule2:#2E3748; --hair:rgba(255,255,255,.07);
  --trace:#1FE07F; --trace2:#2DD4BF; --hot:#FFB547; --bad:#FF5A73;
  --line:#F3F6FA; --ok:#1FE07F; --warn:#FFB547;
  --up1:#1FE07F; --up2:#2DD4BF; --onAccent:#04140B;
  --vio:#A78BFA; --vio2:#8B5CF6; --vioSoft:rgba(167,139,250,.12); --vioLine:rgba(167,139,250,.38);
  --glow:rgba(31,224,127,.16); --glow2:rgba(139,92,246,.22);
  --c1:#1FE07F; --c2:#A78BFA; --c3:#FFB547; --c4:#FF5A73;
  --gridline:#1A202A; --axis:#8C97A9;
}
:root[data-theme="light"]{
  --vio:#6D28D9; --vio2:#5B21B6; --vioSoft:rgba(109,40,217,.08); --vioLine:rgba(109,40,217,.32);
  --glow2:rgba(109,40,217,.10); --c2:#6D28D9;
}

/* ---- base reading comfort ---------------------------------------------- */
body{font-size:17px;line-height:1.68}
.lede{color:var(--ink2);line-height:1.6}
a{color:var(--vio)}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible{outline-color:var(--vio)}
::selection{background:var(--vio2);color:#fff}

/* ---- brand and headline: green into violet, PulseChain's own register --- */
.brand span{background:linear-gradient(95deg,var(--up1),var(--vio))!important;-webkit-background-clip:text!important;background-clip:text!important}
.hero h1 em,.claim .v,.asic h3{background:linear-gradient(98deg,var(--up1) 10%,var(--up2) 48%,var(--vio) 96%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}

/* ---- structure is violet ----------------------------------------------- */
.eyebrow,.rail .n,.four .n,.chart .kicker,.body h2 .n,.wrap.app .label{
  color:var(--vio)!important;font-size:12.5px!important;letter-spacing:.14em!important;font-weight:600!important}
.rail .bar{background:linear-gradient(90deg,var(--vioLine),transparent)!important}
.callout{border-left-color:var(--vio);background:linear-gradient(90deg,var(--vioSoft),transparent 76%)}
.pill:before{background:var(--vio)}
.tab[aria-selected="true"]{border-color:var(--vio)!important;color:var(--vio)!important;background:var(--vioSoft)!important}
.chip2{color:var(--vio)!important;border-color:var(--vioLine)!important;background:var(--vioSoft)}
.howto b{color:var(--vio)!important;border-color:var(--vioLine)!important;background:var(--vioSoft)}
.flowstep .i{background:var(--vioSoft)!important;color:var(--vio)!important}
.tl:before{background:linear-gradient(180deg,var(--trace),var(--vio))!important}

/* ---- nav: readable words, not tiny caps -------------------------------- */
.nav a.l{font-family:var(--sans)!important;font-size:14.5px!important;letter-spacing:.01em!important;
  text-transform:none!important;font-weight:500;color:var(--ink2)}
.nav a.l:hover{color:var(--ink)}
.nav a.l[aria-current="page"]{color:var(--ink);border-bottom-color:var(--vio)!important}
@media(max-width:720px){
  .nav a.l{font-size:16.5px!important;padding:15px 2px}
  .nav a.l[aria-current="page"]{color:var(--vio)!important;border-bottom-color:var(--rule)!important}
}

/* ---- buttons: say it in plain words ------------------------------------ */
.btn{font-family:var(--sans)!important;font-size:15px!important;letter-spacing:0!important;text-transform:none!important;
  font-weight:600!important;border-radius:8px!important;padding:13px 22px}
.btn:not(.btn-primary):hover{border-color:var(--vio)!important}

/* ---- labels: larger, sans, calm ---------------------------------------- */
.stat dt,th,.pill,.railstats .k,.registry .rk,.fgrid .fk,.vsCard .k,.vsCard .usd,
.mon .top h2,.mon .price .k,.mon .g2 .k,.claim .k,.receipt .rh,.calc label,.k2,.asic .k,
.caRow .caK,.pricebar label,.heroNote,.meta,.toc p,.bar3 .k,.bal .k,.panel label,.steps b,
.wrap.app .v .k,.wrap.app .sp span,.wrap.app .getrow span,.wrap.app .g span,.wrap.app .pos .id,
.wrap.app label,.wrap.app td:first-child,.four .more,.registry .rbtn,.caRow .caBtn,.chips button{
  font-family:var(--sans)!important;font-size:12.5px!important;letter-spacing:.06em!important;font-weight:600!important}
.stat dt,th,.railstats .k,.fgrid .fk,.vsCard .k,.mon .price .k,.mon .g2 .k,.claim .k,.k2,.asic .k,
.caRow .caK,.wrap.app .v .k,.wrap.app .sp span,.wrap.app .getrow span,.wrap.app .g span,.wrap.app td:first-child{color:var(--ink3)!important}
.heroNote b{color:var(--ink2)}
.heroNote i{background:var(--vio)!important;opacity:.7}
.mon .top h2{color:var(--ink2)!important}

/* ---- live values are green, burned is red ------------------------------ */
.mon .live,.badge{color:var(--trace)}
.vsGapLine b,.receipt .r.big span:last-child{color:var(--trace)}

/* ---- surfaces: a little more separation -------------------------------- */
.card,.chartbox,.vsCard,.cy,.flowstep,.rails,.registry,.scroll,.fourup,.statgrid,.railstats,.maproll{border-color:var(--rule2)!important}
.card-glow{box-shadow:0 2px 6px rgba(0,0,0,.45),0 0 0 1px var(--rule2),0 0 90px -40px var(--vio2)!important}
.sec + .sec{border-top:1px solid var(--rule)}
.band{background:linear-gradient(180deg,var(--s2),var(--paper))}

/* ---- secondary copy a step brighter ------------------------------------ */
.vprop li,.four p,.cy .t,.grid3 p,.threeup p,.claim p,.tl p,.vsCard .d,.flowstep span.t,
.rails .sub,figure.chart figcaption,.asic p,.mon .price .d,.wrap.app .hint,.wrap.app .card .hint{color:var(--ink2)!important}
.vprop li{font-size:17px}
.four p,.cy .t,.grid3 p,.threeup p,.claim p{font-size:15.5px!important;line-height:1.6!important}
.fine,.notes2,.calc .foot{color:var(--ink3)!important;font-size:14px!important}

/* ---- the mine page ------------------------------------------------------ */
.wrap.app .card{border-radius:12px}
.wrap.app .card h2{font-size:1.2rem!important}
.wrap.app .v .num,.wrap.app .getrow b,.wrap.app .sp b{font-size:1.02rem}
.wrap.app .out{font-size:.9rem!important;color:var(--ink2)!important}
.wrap.app button.ghost{border-color:var(--rule2)!important;color:var(--ink2)!important}
.wrap.app button.ghost:hover:not(:disabled){color:var(--ink)!important;border-color:var(--vio)!important;background:var(--vioSoft)!important}
.wrap.app button.pct[aria-pressed="true"],.wrap.app button.swPct[aria-pressed="true"],.wrap.app .swSlip[aria-pressed="true"]{
  border-color:var(--vio)!important;color:var(--vio)!important;background:var(--vioSoft)!important}
.wrap.app input{font-size:1.1rem!important;padding:14px 16px!important}
.wrap.app input:focus{outline-color:var(--vio)!important}

/* ---- home calculator: fill the empty grid slot ------------------------- */
.calc .out:after{content:"";background:var(--s1)}
@media(max-width:619px){.calc .out:after{display:none}}

/* ---- mine page layout: the two actions first, side by side ------------- */
.wrap.app .vsCard .v{padding:0!important;background:none!important}
.wrap.app > .cols > .card:nth-child(1){order:1}
.wrap.app > .cols > .card:nth-child(4){order:2}
.wrap.app > .cols > .card:nth-child(2){order:3}
.wrap.app > .cols > .card:nth-child(3){order:4}
.wrap.app > .cols > .card:nth-child(5){order:5}
.wrap.app > .cols > #opsCard{order:6}
@media(min-width:960px){
  .wrap.app > .cols{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .wrap.app > .cols > .card:nth-child(1),.wrap.app > .cols > .card:nth-child(4){grid-column:span 3}
  .wrap.app > .cols > .card:nth-child(2),.wrap.app > .cols > .card:nth-child(3),.wrap.app > .cols > .card:nth-child(5){grid-column:span 2}
  .wrap.app > .cols > #opsCard{grid-column:1/-1}
}
.wrap.app .swSlip{padding:8px 14px!important;font-size:.85rem!important}

/* ---- chart kickers: violet, readable ----------------------------------- */
.chart .kicker{font-family:var(--sans)!important;letter-spacing:.08em!important}

/* ---- analytics page ----------------------------------------------------- */
.wrap.mon{font-size:16px}
.wrap.mon h2{font-family:var(--sans)!important;font-size:13px!important;font-weight:700!important;letter-spacing:.1em!important;
  color:var(--vio)!important;border-bottom-color:var(--rule2)!important;margin-top:48px!important}
.wrap.mon header .sub{font-family:var(--sans)!important;font-size:15px!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink2)!important}
.wrap.mon .chip{font-family:var(--sans)!important;font-size:12.5px!important;letter-spacing:.04em!important;font-weight:600}
.wrap.mon .hero .cap{font-family:var(--sans)!important;font-size:12.5px!important;letter-spacing:.06em!important;font-weight:600;color:var(--ink3)!important}
.wrap.mon .hero .note{font-size:15px!important;max-width:46ch!important}
.wrap.mon .tabs button{font-family:var(--sans)!important;font-size:13.5px!important;letter-spacing:.02em!important;text-transform:none!important}
.wrap.mon .tabs button[aria-selected="true"]{background:var(--vioSoft)!important;color:var(--vio)!important}
.wrap.mon dt{font-size:13.5px!important}
.wrap.mon dd small{font-size:13px!important}
.wrap.mon footer{font-size:13.5px!important}

/* ---- docs ---------------------------------------------------------------- */
.toc a.on{border-left-color:var(--vio)!important}
.toc a{font-size:14.5px!important}
.body li{color:var(--ink2)}
.kill{border-left-color:var(--vio)!important}

/* ---- shield and ceremony: plain word buttons --------------------------- */
.btnf,.go{font-family:var(--sans)!important;font-size:15px!important;letter-spacing:0!important;text-transform:none!important;border-radius:8px!important}
.steps b{border-color:var(--vio)!important;color:var(--vio)!important}
.panel h2 b{color:var(--vio)!important}
.panel .hint,.head p,.steps li{color:var(--ink2)!important}

/* ============================================================================
   v3: phone first pass. Diagrams get real phone versions, numbers never clip,
   the paper gets a summary and a contents menu, the home page answers the
   common questions.
   ========================================================================= */
@media(max-width:640px){
  .mon .g2 .v,.bar3 .v,.vsCard .v{white-space:normal!important;overflow:visible!important;word-break:break-word;font-size:17px}
  .vsCard .v{font-size:30px!important}
  .mon .price .v{white-space:normal!important}
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{justify-content:center;width:100%}
  .sec{padding-block:48px}
  h2{font-size:clamp(26px,7.4vw,34px)}
  .wrap.app .vs{gap:22px}
}
.flowm{display:none}
@media(max-width:760px){.maproll{display:none!important}.flowm{display:block}}
.flowm .fz{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vio);margin:6px 0 12px}
.flowm .fz + ol{margin-bottom:28px}
.flowm ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.flowm .fn{border:1px solid var(--rule2);border-radius:12px;background:var(--s1);padding:14px 16px;position:relative}
.flowm .fn b{display:block;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.flowm .fn span{display:block;font-size:14.5px;color:var(--ink2);margin-top:3px;line-height:1.5}
.flowm .fn.g{border-color:color-mix(in srgb,var(--trace) 55%,var(--rule2))}
.flowm .fn.r{border-color:color-mix(in srgb,var(--bad) 60%,var(--rule2))}
.flowm .fn.v{border-color:var(--vioLine)}
.flowm .fe{font-family:var(--mono);font-size:13px;color:var(--ink3);padding:9px 0 9px 26px;position:relative}
.flowm .fe:before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:var(--rule2)}
.flowm .fe.g{color:var(--trace)} .flowm .fe.g:before{background:var(--trace)}
.flowm .fe.r{color:var(--bad)} .flowm .fe.r:before{background:var(--bad)}
.flowm .fe.v{color:var(--vio)} .flowm .fe.v:before{background:var(--vio)}
.flowm .split{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0}
.flowm .split div{border:1px solid var(--rule2);border-radius:10px;background:var(--s2);padding:10px 12px}
.flowm .split b{display:block;font-family:var(--mono);font-size:20px;font-weight:600}
.flowm .split span{display:block;font-size:13px;color:var(--ink2);line-height:1.4;margin-top:2px}
.flowm .split .s90 b{color:var(--trace)} .flowm .split .s7 b{color:var(--bad)}
.flowm .split .s2 b{color:var(--vio)} .flowm .split .s1 b{color:var(--ink2)}
.railm{display:none}
@media(max-width:760px){.railviz{display:none!important}.railm{display:grid;gap:14px;margin-top:4px}}
.railm .rm{border:1px solid var(--rule2);border-radius:12px;background:var(--s2);padding:16px}
.railm .rm.bad{border-color:color-mix(in srgb,var(--bad) 50%,var(--rule2))}
.railm .rm.ok{border-color:color-mix(in srgb,var(--trace) 50%,var(--rule2))}
.railm .rh{margin:0 0 10px;font-weight:700;font-size:15.5px;color:var(--ink)}
.railm dl{margin:0;display:grid;gap:0}
.railm dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--rule)}
.railm dt{font-size:13.5px;color:var(--ink3);font-weight:600}
.railm dd{margin:0;font-family:var(--mono);font-size:14px}
.railm .bad dd{color:var(--bad)} .railm .ok dd{color:var(--trace)}
.railm .rn{margin:10px 0 0;font-size:14px;color:var(--ink2);line-height:1.5}
.faq{display:grid;gap:10px;max-width:860px}
.faq details{border:1px solid var(--rule2);border-radius:12px;background:var(--s1);transition:border-color .15s}
.faq details[open]{border-color:var(--vioLine)}
.faq summary{list-style:none;cursor:pointer;padding:17px 52px 17px 20px;font-weight:600;font-size:16.5px;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:22px;color:var(--vio)}
.faq details[open] summary:after{content:"\2212"}
.faq details p{margin:0;padding:0 20px 18px;color:var(--ink2);font-size:15.5px;line-height:1.65}
.faq details p a{color:var(--vio)}
.tldr{border:1px solid var(--vioLine);border-radius:14px;background:linear-gradient(180deg,var(--vioSoft),transparent 70%),var(--s1);padding:22px 22px 18px;margin:0 0 34px}
.tldr .tk{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vio);margin:0}
.tldr h2{font-size:22px!important;margin:8px 0 6px!important}
.tldr ul{margin:10px 0 0!important;padding-left:0!important;list-style:none;display:grid;gap:9px}
.tldr li{position:relative;padding-left:22px;margin:0!important;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.tldr li:before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--trace)}
.tldr li b{color:var(--ink)}
.mtoc{display:none;margin:0 0 26px;border:1px solid var(--rule2);border-radius:12px;background:var(--s1)}
@media(max-width:999px){.mtoc{display:block}}
.mtoc summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:600;color:var(--ink)}
.mtoc summary::-webkit-details-marker{display:none}
.mtoc summary:after{content:"\25BE";float:right;color:var(--vio)}
.mtoc nav{display:grid;padding:0 10px 10px}
.mtoc a{display:flex;gap:12px;padding:11px 8px;border-top:1px solid var(--rule);color:var(--ink2);text-decoration:none;font-size:15px}
.mtoc a b{font-family:var(--mono);font-size:13px;color:var(--vio);font-weight:600;min-width:22px}
.totop{position:fixed;right:16px;bottom:18px;z-index:40;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--s2);border:1px solid var(--vioLine);color:var(--vio);text-decoration:none;font-size:20px;box-shadow:0 8px 24px -8px rgba(0,0,0,.7)}
@media(min-width:1000px){.totop{display:none}}
.wrap.mon .tabs:has(button:only-child){display:none}
