@font-face{
  font-family:"Builder Sans Extended";
  src:url("/fonts/BuilderExtended-Bold.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   Design tokens
   Type scale   : 11 / 13 / 15 / 17 / 20 (+ display h1)
   Fonts        : Inter 400 + 600 · Builder Sans Extended 700 (nothing else)
   Radii        : 8 (controls) · 12 (cards) · 999 (pills)
   Spacing grid : 4px - 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64
   ========================================================= */
:root{
  /* Amex blue theme - anchors: #00175A (deep) · #006FCF (accent) */
  --bg:#00081C;
  --panel:#020E30;
  --panel-2:#041436;
  --panel-3:#0A1C4A;
  --line:#1B3A86;
  --line-2:#2C4FA6;
  --text:#EAF1FC;
  --muted:#94A7C9;
  --faint:#5F76A8;
  --green:#006FCF;      /* accent fill */
  --mark:#1E82E0;       /* accent hover */
  --on-mark:#FFFFFF;
  --red:#FF8A80;

  --fs-xs:11px;
  --fs-sm:13px;
  --fs-md:15px;
  --fs-lg:17px;
  --fs-xl:20px;

  --r-sm:8px;
  --r:12px;

  --head:"Builder Sans Extended",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; /* site uses Inter + Builder only */

  --wrap:760px;
}

/* ---- base ---- */
*,*::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(0,111,207,.16),transparent 72%);
  color:var(--text);
  font-family:var(--sans);font-size:var(--fs-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2{margin:0;font-family:var(--head);font-weight:700;line-height:1.1;letter-spacing:0}
p{margin:0}
b{font-weight:600}
.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:4px}

/* One label style for every uppercase mono label */
.kick,.fld__l,.tag,.rec__k,.ledger__hd h2{
  font-family:var(--mono);font-weight:400;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
}
/* One code-token style for the promo code wherever it appears */
.kick b,.tally b{font-weight:600;color:var(--green)}
.block__h b{color:var(--green)}

/* ---- highlight ---- */
.mark{position:relative;display:inline-block;z-index:0;color:var(--on-mark)}
.mark::before{
  content:"";position:absolute;z-index:-1;
  left:-.12em;right:-.12em;top:.1em;bottom:.02em;
  background:var(--green);border-radius:4px;
}
.mark--sm::before{left:-.3em;right:-.3em;top:.05em;bottom:-.05em}

/* ---- bar ---- */
.bar{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);
  background:rgba(0,8,28,.9);backdrop-filter:blur(8px)}
.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(--head);font-weight:700;font-size:var(--fs-xl)}
.bar__right{display:flex;align-items:center;gap:16px}
.lnk-admin{font-size:var(--fs-sm);font-weight:600;color:var(--green);text-decoration:none}
.lnk-admin:hover{text-decoration:underline}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--sans);font-size:var(--fs-md);font-weight:600;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}
.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:14px}
.btn--sm{padding:8px 14px;font-size:var(--fs-sm)}

/* ---- hero ---- */
.hero{padding:64px 0 32px}
.kick{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px}
.kick__sep{color:var(--line-2)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
h1{font-size:clamp(2.1rem,7vw,3.5rem);letter-spacing:-.01em;text-wrap:balance}
.hero__sub{margin-top:16px;color:var(--muted);font-size:var(--fs-lg);max-width:52ch;text-wrap:pretty}
.hero__sub b{color:var(--green)}

/* ---- tabs ---- */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:24px}
.tab{
  appearance:none;background:none;border:0;padding:0 0 12px;margin-bottom:-1px;
  font-family:var(--sans);font-size:var(--fs-md);font-weight:600;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.tab:hover{color:var(--text)}
.tab.is-on{color:var(--text);border-bottom-color:var(--green)}

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

/* ---- cards (tally / block / band share one surface) ---- */
.tally,.block,.band{
  border:1px dashed var(--line-2);border-radius:var(--r);background:var(--panel);margin-bottom:20px;
}
.tally{padding:16px 20px;text-align:center}
.tally-br{display:none}
.block{padding:24px}
.band{padding:32px 24px;text-align:center}

.block__h{font-size:var(--fs-xl);text-wrap:balance}
.block__h--tight{font-size:var(--fs-lg)}
.block__p{margin-top:16px;color:var(--muted)}
.block__p + .btn{margin-top:24px}
.block__p--tight{margin-top:2px;font-size:var(--fs-sm)}
.block__alt{margin-top:16px;text-align:center;font-size:var(--fs-sm);color:var(--muted)}
.block__alt a{color:var(--green);font-weight:600}

.band p{color:var(--muted);margin-bottom:16px}
.band b{color:var(--text)}

/* ---- who ---- */
.who{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px dashed var(--line-2);
  border-radius:var(--r);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:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who__meta{font-size:var(--fs-sm);color:var(--muted)}

/* ---- ledger ---- */
.ledger{margin-bottom:20px}
.ledger__hd{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.ledger__hd h2{line-height:1}
.ledger__n{
  min-width:24px;height:22px;padding:0 8px;border-radius:999px;background:var(--green);
  display:grid;place-items:center;font-weight:600;font-size:var(--fs-sm);color:var(--on-mark);
}
.none{color:var(--muted);font-size:var(--fs-sm)}

/* ---- entry receipt ---- */
.rec{position:relative;border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:var(--r);padding:16px;margin-bottom:12px;background:var(--panel);
  transition:border-left-color .5s}
.rec.is-approved,.rec.is-won{border-left-color:var(--green)}
.rec.is-rejected{border-left-color:var(--red)}
.rec.is-rejected .tag{color:var(--red);border-color:var(--red)}
.rec.is-approved .tag,.rec.is-won .tag{background:var(--green);border-color:transparent;color:var(--on-mark)}
.rec__flag--ok{color:var(--green)}
.flash a{color:var(--green);font-weight:600}
.rec__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.rec__firm{font-weight:600}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--line);line-height:1.4}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.rec__grid{display:flex;flex-wrap:wrap;gap:8px 20px}
.rec__cell{display:flex;gap:8px;align-items:baseline;font-size:var(--fs-sm)}
.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:var(--fs-sm);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:8px;margin-top:16px}
.firm{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);
  font:inherit;color:inherit;cursor:pointer;transition:border-color .15s,background-color .15s;
}
.firm:hover{border-color:var(--green);background:var(--panel-3)}
.mono{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid var(--line);overflow:hidden;
  font-weight:600;font-size:var(--fs-sm);color:var(--green);
}
.mono img{width:100%;height:100%;object-fit:cover;display:block}
.firm__n{font-weight:600;margin-right:auto}
.firm__go{color:var(--line-2);line-height:1;transition:color .15s}
.firm:hover .firm__go{color:var(--green)}

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

.fld{margin:0 0 20px;padding:0;border:0;min-width:0}
.fld__l{display:block;padding:0;margin-bottom:8px}
.fld__hint{margin-top:8px;font-size:var(--fs-sm);color:var(--muted)}
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.size{
  appearance:none;padding:12px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);
  font-family:var(--mono);font-size:var(--fs-md);color:var(--text);cursor:pointer;
  transition:border-color .15s,background-color .15s,color .15s;
}
.size:hover{border-color:var(--line-2)}
.size.is-on{border-color:var(--green);background:var(--green);color:var(--on-mark);font-weight:600}
.in{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);
  color:var(--text);font-family:var(--mono);font-size:var(--fs-md);line-height:1.4;transition:border-color .15s,box-shadow .15s}
.in::placeholder{color:var(--faint)}
.in:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,111,207,.28)}
.err{margin-bottom:12px;font-size:var(--fs-sm);color:var(--red)}
.form__go{display:grid;grid-template-columns:1fr 2fr;gap:12px}

/* ---- rules ---- */
.rules{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.rules li{display:flex;gap:12px;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:20px;height:20px;margin-top:2px;border-radius:50%;
  background:var(--green) 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='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.rules b{color:inherit}
.fine{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm)}

/* ---- foot ---- */
.foot{border-top:1px solid var(--line);margin-top:48px;padding:24px 0 48px;color:var(--muted);font-size:var(--fs-sm)}

/* ---- responsive ---- */
@media (max-width:600px){
  .logo__b,.bar .btn,.lnk-admin{white-space:nowrap}
  .logo__b{font-size:var(--fs-lg)}
  .bar .btn{padding:8px 14px;font-size:var(--fs-sm)}
  .bar__right{gap:12px}
  .tally-br{display:inline}
  .hero{padding:48px 0 24px}
  .block{padding:20px}
  .band{padding:24px 20px}
  .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}
}
