:root{
  --bg:#0A1310;
  --panel:#0F1B16;
  --panel-2:#14231C;
  --line:#22322B;
  --line-2:#33473D;
  --text:#EDF3EF;
  --muted:#8FA79B;
  --green:#3ED88A;
  --green-dk:#2BB56F;
  --mark:#4DE89B;
  --on-mark:#06170E;
  --red:#FF8A80;

  --disp:"Bricolage Grotesque",Georgia,serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;

  --wrap:760px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--bg);
  background-image:radial-gradient(680px 300px at 50% -80px,rgba(62,216,138,.10),transparent 72%);
  color:var(--text);
  font-family:var(--sans);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2{margin:0;font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.05}
p{margin:0}
b{font-weight:700}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:3px}

/* ---- highlighter: the one flourish, used on key words ---- */
.mark{position:relative;display:inline-block;z-index:0;color:var(--on-mark)}
.mark::before{
  content:"";position:absolute;z-index:-1;
  left:-.14em;right:-.14em;top:.14em;bottom:.06em;
  background:var(--mark);border-radius:2px 5px 3px 6px;
  transform:rotate(-.7deg);
}
.mark--sm::before{top:.2em;bottom:.1em;transform:rotate(-.5deg)}

/* ---- bar ---- */
.bar{border-bottom:1px solid var(--line);background:rgba(10,19,16,.9);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:20}
.bar__in{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.logo{text-decoration:none;color:var(--text)}
.logo__b{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.015em}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border:1.5px solid transparent;border-radius:8px;
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;transition:background-color .13s,border-color .13s,color .13s,transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn--go{background:var(--green);color:var(--on-mark)}
.btn--go:hover{background:var(--mark)}
.btn--go[disabled]{opacity:.5;cursor:not-allowed}
.btn--line{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn--line:hover{border-color:var(--green);color:var(--green)}
.btn--wide{width:100%;padding-block:15px}
.btn--sm{padding:8px 14px;font-size:13px;border-radius:7px}

/* ---- hero ---- */
.hero{padding:60px 0 30px}
.kick{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
}
.kick b{color:var(--green)}
.kick__sep{color:var(--line-2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(62,216,138,.18)}
h1{font-size:clamp(2.5rem,8.5vw,4.2rem);text-wrap:balance}
.hero__sub{margin-top:20px;color:var(--muted);font-size:17px;max-width:52ch;text-wrap:pretty}
.hero__sub b{color:var(--green)}

/* ---- tabs ---- */
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:26px}
.tab{
  appearance:none;background:none;border:0;padding:0 0 13px;margin-bottom:-1px;
  font-family:var(--sans);font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;
  border-bottom:2.5px solid transparent;
}
.tab:hover{color:var(--text)}
.tab.is-on{color:var(--text);border-bottom-color:var(--green)}

/* ---- flash ---- */
.flash{
  margin-bottom:20px;padding:12px 14px;border:1px solid var(--line);
  border-left:3px solid var(--green);border-radius:6px;background:var(--panel);font-size:14px;
}
.flash.is-bad{border-left-color:var(--red);color:var(--red)}

/* ---- tally strip ---- */
.tally{
  padding:14px 18px;border:1px dashed var(--line-2);border-radius:10px;background:var(--panel);
  text-align:center;font-size:14.5px;margin-bottom:22px;
}
.tally b{color:var(--green);font-family:var(--mono);letter-spacing:.06em}

/* ---- generic block ---- */
.block{border:1px solid var(--line);border-radius:12px;padding:26px 24px;margin-bottom:20px;background:var(--panel)}
.block__h{font-size:20px;text-wrap:balance}
.block__h--tight{font-size:18px}
.block__p{margin-top:7px;color:var(--muted);font-size:14.5px}
.block__p--tight{margin-top:2px;font-size:13.5px}
.block__h b{color:var(--green);font-family:var(--mono);letter-spacing:.06em}
.block__alt{margin-top:14px;text-align:center;font-size:13.5px;color:var(--muted)}
.block__alt a{color:var(--green);font-weight:700}

/* ---- who ---- */
.who{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);
  border-radius:12px;margin-bottom:20px;background:var(--panel)}
.who__pic{border-radius:50%;background:var(--panel-2);flex:none}
.who__id{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.who__name{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who__meta{font-size:12.5px;color:var(--muted)}

/* ---- ledger ---- */
.ledger{margin-bottom:20px}
.ledger__hd{display:flex;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.ledger__hd h2{font-family:var(--sans);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.ledger__n{
  min-width:26px;height:22px;padding:0 8px;border-radius:99px;background:var(--mark);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--on-mark);
}
.none{color:var(--muted);font-size:14px;padding-bottom:4px}

/* ---- entry receipt ---- */
.rec{position:relative;border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 10px 10px 0;padding:15px 17px;margin-bottom:11px;background:var(--panel);
  transition:border-left-color .5s}
.rec.is-ok{border-left-color:var(--green)}
.rec__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.rec__firm{font-weight:700;font-size:15px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;
  background:var(--panel-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.rec.is-ok .tag{background:var(--mark);border-color:transparent;color:var(--on-mark)}
.rec__grid{display:flex;flex-wrap:wrap;gap:6px 22px}
.rec__cell{display:flex;gap:8px;align-items:baseline;font-size:13px}
.rec__k{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
.rec__v{font-family:var(--mono);word-break:break-all}
.rec__v--t{color:var(--green);font-variant-numeric:tabular-nums}
.rec__flag{margin-top:8px;font-size:12.5px;color:var(--muted)}
.rec.is-new{animation:in .35s ease both}
@keyframes in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- firm list ---- */
.firms{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.firm{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);
  font:inherit;color:inherit;cursor:pointer;transition:border-color .13s,background-color .13s;
}
.firm:hover{border-color:var(--green);background:#182A21}
.mono{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line);overflow:hidden;
  font-family:var(--mono);font-size:13px;font-weight:500;color:var(--green);letter-spacing:.04em;
}
.mono img{width:100%;height:100%;object-fit:cover;display:block}
.firm__n{font-weight:700;font-size:15.5px;margin-right:auto}
.firm__go{color:var(--line-2);font-size:18px;line-height:1}
.firm:hover .firm__go{color:var(--green)}

/* ---- form ---- */
.form__hd{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.form__hd>div{margin-right:auto;min-width:0}
.back{appearance:none;background:none;border:0;padding:4px;font:inherit;font-size:13.5px;
  font-weight:700;color:var(--green);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.hint{padding:14px 16px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  font-size:14px;margin-bottom:20px}
.hint b{color:var(--green)}

.fld{margin:0 0 20px;padding:0;border:0}
.fld__hint{margin-top:8px;font-size:12.5px;color:var(--muted)}
.bar__right{display:flex;align-items:center;gap:18px}
.lnk-admin{font-size:13px;font-weight:700;color:var(--green);text-decoration:none}
.lnk-admin:hover{text-decoration:underline}
.fld__l{display:block;padding:0;margin-bottom:10px;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.size{
  appearance:none;padding:13px 6px;border:1.5px solid var(--line);border-radius:9px;background:var(--panel-2);
  font-family:var(--mono);font-size:14px;color:var(--text);cursor:pointer;transition:.13s;
}
.size:hover{border-color:var(--line-2)}
.size.is-on{border-color:var(--green);background:var(--mark);color:var(--on-mark);font-weight:500}
.in{width:100%;padding:14px 15px;border:1.5px solid var(--line);border-radius:9px;background:var(--panel-2);
  color:var(--text);font-family:var(--mono);font-size:15px}
.in::placeholder{color:#5E756A}
.in:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(62,216,138,.16)}
.err{margin-bottom:14px;font-size:13.5px;color:var(--red);font-weight:500}
.form__go{display:grid;grid-template-columns:1fr 2fr;gap:10px}

/* ---- band ---- */
.band{border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,rgba(62,216,138,.08),transparent 70%),var(--panel);
  padding:30px 22px;text-align:center;margin-bottom:24px}
.band p{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.band b{color:var(--text)}

/* ---- rules ---- */
.rules{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.rules li{display:flex;gap:12px;font-size:15px;align-items:flex-start;line-height:1.55}
.rules li>span{flex:1;min-width:0;text-wrap:pretty}
.rules li::before{
  content:"";flex:none;width:19px;height:19px;margin-top:3px;border-radius:50%;
  background:var(--mark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%2306170E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.rules b{color:var(--green)}
.fine{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

/* ---- foot ---- */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 40px;color:var(--muted);font-size:12.5px}

@media (max-width:600px){
  .hero{padding:44px 0 24px}
  .block{padding:22px 18px}
  .sizes{grid-template-columns:repeat(2,1fr)}
  .form__go{grid-template-columns:1fr}
  .form__go .btn--line{order:2}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
