:root{
  --paper:#E9ECE6;
  --card:#FBFBF8;
  --ink:#16211C;
  --muted:#63706A;
  --rule:#D2D8D0;
  --pine:#1F5F4A;
  --badge-bg:#EFE8CD;
  --badge-ink:#6F5605;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1rem/1.6 "IBM Plex Sans",system-ui,-apple-system,sans-serif;
  padding:clamp(1.5rem,5vw,4rem) 1.25rem 3rem;
}

.page{max-width:43rem;margin:0 auto}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

a{color:var(--pine);text-underline-offset:.18em}

:focus-visible{outline:2px solid var(--pine);outline-offset:3px}

.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pine);margin:0 0 1.2rem;
}

h1{
  font-family:"IBM Plex Mono",monospace;
  font-weight:600;
  font-size:clamp(2rem,7.5vw,3.15rem);
  line-height:1.03;letter-spacing:-.04em;
  margin:0 0 1.1rem;max-width:14ch;
}

.lede{max-width:33rem;color:var(--muted);margin:0 0 2.6rem}

.receipt{
  position:relative;
  background:var(--card);
  border:1px solid var(--rule);
  border-bottom:0;
  padding:1.6rem clamp(1.1rem,4vw,2rem) 1.9rem;
  box-shadow:0 20px 44px -32px rgba(22,33,28,.7);
}

.receipt::after{
  content:"";position:absolute;left:-1px;right:-1px;top:100%;height:13px;
  background:var(--card);
  -webkit-mask:radial-gradient(circle at 50% 100%,transparent 6.5px,#000 7px) 0 0/15px 13px repeat-x;
  mask:radial-gradient(circle at 50% 100%,transparent 6.5px,#000 7px) 0 0/15px 13px repeat-x;
}

.controls{display:grid;gap:1.3rem}

@media(min-width:36rem){
  .controls{grid-template-columns:1fr 1fr}
  .field{grid-column:1 / -1}
}

.lbl{
  display:block;
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .55rem;padding:0;
}

#amount{
  width:100%;
  font-family:"IBM Plex Mono",monospace;
  font-size:clamp(1.5rem,5vw,1.9rem);font-weight:500;
  color:var(--ink);background:transparent;
  border:0;border-bottom:2px solid var(--ink);border-radius:0;
  padding:.1rem 0 .3rem;
}

#amount:focus{outline:0;border-bottom-color:var(--pine)}
#amount:focus-visible{outline:0}

.seg{border:0;padding:0;margin:0;min-width:0}

.opts{display:flex;border:1px solid var(--rule);background:#fff}

.opts label{flex:1;position:relative}

.opts input{position:absolute;opacity:0;pointer-events:none}

.opts span{
  display:block;text-align:center;cursor:pointer;
  padding:.6rem .25rem;
  font-family:"IBM Plex Mono",monospace;font-size:.85rem;
  color:var(--muted);border-right:1px solid var(--rule);
  transition:background .15s ease,color .15s ease;
}

.opts label:last-child span{border-right:0}
.opts input:checked + span{background:var(--ink);color:var(--card)}
.opts input:focus-visible + span{outline:2px solid var(--pine);outline-offset:-3px}

.perf{margin:1.7rem 0 1.1rem;border-top:1px dashed var(--rule)}

.lines{margin:0}

.line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.45rem 0}

.line dt{color:var(--muted);font-size:.95rem}

.line dd{
  margin:0;
  font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums;
  font-size:1.05rem;white-space:nowrap;
}

#out-rate{font-family:"IBM Plex Mono",monospace;font-size:.9em}

.line--total{border-top:1px solid var(--ink);margin-top:.7rem;padding-top:.9rem}
.line--total dt{color:var(--ink);font-weight:500;font-size:1rem}
.line--total dd{font-size:clamp(1.55rem,5.5vw,2.05rem);font-weight:600;letter-spacing:-.025em}

.nojs{color:var(--muted);font-size:.9rem;margin:1rem 0 0}

.rates{margin-top:4rem}

h2{
  font-family:"IBM Plex Mono",monospace;
  font-weight:600;font-size:1.15rem;letter-spacing:-.02em;
  margin:0 0 1.4rem;
}

.rate-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}

.rate-list li{
  display:grid;grid-template-columns:4.6rem 1fr;gap:1rem;
  padding:1.1rem 0;border-bottom:1px solid var(--rule);
}

.pct{
  font-family:"IBM Plex Mono",monospace;
  font-size:1.15rem;font-weight:600;color:var(--pine);
  font-variant-numeric:tabular-nums;
}

.rate-list strong{font-weight:500;display:block}
.rate-list p{margin:.2rem 0 0;color:var(--muted);font-size:.95rem}

.note{
  margin:1.8rem 0 0;padding:1.2rem 1.3rem;
  background:var(--card);border-left:3px solid var(--badge-ink);
}

.note p{margin:0;font-size:.95rem}

.badge{
  display:inline-block;
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--badge-ink);background:var(--badge-bg);
  padding:.25rem .5rem;margin:0 0 .7rem;
}

.foot{margin-top:3.5rem;color:var(--muted);font-size:.88rem}
.foot p{margin:0 0 .35rem}
.host{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}

@media(prefers-reduced-motion:no-preference){
  .reveal{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
  .receipt.reveal{animation-delay:.08s}
  .rates.reveal{animation-delay:.16s}
  .foot.reveal{animation-delay:.22s}
}

@keyframes rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}