/* ===========================================================================
   Palette + tokens
   =========================================================================== */
:root{
  --ink:        #0C1512;
  --ink-2:      #101B17;
  --surface:    #13201B;
  --surface-2:  #17271F;
  --line:       rgba(242,238,228,.10);
  --line-2:     rgba(242,238,228,.20);
  --ivory:      #F2EEE4;
  --sage:       #93A79B;
  --sage-dim:   #6D8579;
  --brass:      #C08A3E;
  --brass-lt:   #E3BD7B;
  --settle:     #7FC79A;

  --serif: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1120px;
  --pad: 28px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* Bodoni Moda thins its hairlines as the optical size axis rises, which is
   what makes large headings look soft. Pin the axis to a text-sized value so
   the thin strokes stay solid no matter how big the type is set. */
.wordmark-text,
.seal,
.hero h1,
.register-head h2,
.why h2,
.onboard h2,
.figures dd,
.steps li span,
.foot-brand,
.token::after{
  font-optical-sizing:none;
  font-variation-settings:"opsz" 12;
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;} }

body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  font-feature-settings:"tnum" 1;
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }

a{ color:var(--brass-lt); text-decoration:none; }
a:hover{ color:var(--ivory); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brass); color:#1A1206; padding:10px 16px; font-weight:600;
}
.skip:focus{ left:8px; top:8px; }

.ta-r{ text-align:right; }

/* ===========================================================================
   Buttons
   =========================================================================== */
.btn{
  display:inline-block; font-family:var(--sans); font-weight:600;
  font-size:.95rem; letter-spacing:.01em; line-height:1;
  padding:15px 30px; border:1px solid transparent; cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.btn-primary{ background:var(--brass); color:#1A1206; }
.btn-primary:hover{ background:var(--brass-lt); color:#1A1206; }

.btn-row{
  padding:10px 22px; font-size:.86rem; width:100%; text-align:center;
  background:transparent; color:var(--brass-lt); border-color:var(--line-2);
}
.row:hover .btn-row,
.btn-row:hover,
.btn-row:focus-visible{ background:var(--brass); border-color:var(--brass); color:#1A1206; }

/* ===========================================================================
   Masthead
   =========================================================================== */
.masthead{ border-bottom:1px solid var(--line); background:var(--ink); }
.masthead-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px;
}
.wordmark{ display:flex; align-items:center; gap:14px; color:var(--ivory); }
.wordmark:hover{ color:var(--ivory); }

.seal{
  display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px;
  border:1px solid var(--brass); border-radius:50%;
  color:var(--brass-lt); font-family:var(--serif); font-size:.82rem;
  letter-spacing:.06em; font-weight:500;
}
.wordmark-text{
  font-family:var(--serif); font-weight:500; font-size:1.5rem;
  letter-spacing:.005em; line-height:1.1;
}

.stamp{
  margin:0; display:flex; align-items:center; gap:9px;
  font-size:.79rem; color:var(--sage); letter-spacing:.02em;
}
.live{
  width:7px; height:7px; border-radius:50%; background:var(--settle);
  box-shadow:0 0 0 0 rgba(127,199,154,.55); animation:pulse 3.2s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(127,199,154,.5); }
  70%{ box-shadow:0 0 0 8px rgba(127,199,154,0); }
  100%{ box-shadow:0 0 0 0 rgba(127,199,154,0); }
}

/* ===========================================================================
   Hero
   =========================================================================== */
.hero{
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(192,138,62,.09) 0%, rgba(192,138,62,0) 62%),
    var(--ink);
}
.hero-in{ padding-top:88px; padding-bottom:72px; max-width:960px; }

.hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.35rem, 5.6vw, 4.05rem);
  line-height:1.06;
  letter-spacing:-.012em;
  margin:0 0 26px;
  max-width:16ch;
}
.lede{
  font-size:1.09rem; line-height:1.72; color:var(--sage);
  max-width:60ch; margin:0 0 36px;
}

.figures{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin:64px 0 0; padding-top:30px; border-top:1px solid var(--line); gap:24px;
}
.figures div{ min-width:0; }
.figures dt{ font-size:.79rem; color:var(--sage-dim); letter-spacing:.03em; margin-bottom:8px; }
.figures dd{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:2rem; line-height:1; color:var(--brass-lt);
}

/* ===========================================================================
   Register
   =========================================================================== */
.register{ padding:78px 0 20px; }
.register-head{ max-width:62ch; margin-bottom:34px; }
.register-head h2,
.why h2,
.onboard h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.75rem,3.2vw,2.4rem); line-height:1.14;
  letter-spacing:-.008em; margin:0 0 14px;
}
.register-head p{ margin:0; color:var(--sage); }

.controls{
  display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end;
  padding-bottom:22px; margin-bottom:0;
}
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field-search{ flex:1 1 260px; }
.field-label{ font-size:.78rem; color:var(--sage-dim); letter-spacing:.03em; }

.field input,
.field select{
  font-family:var(--sans); font-size:.94rem; color:var(--ivory);
  background:var(--surface); border:1px solid var(--line);
  padding:12px 14px; width:100%; min-height:46px;
  appearance:none; -webkit-appearance:none;
}
.field select{
  padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--sage) 50%),linear-gradient(135deg,var(--sage) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.field select option{ background:var(--surface); color:var(--ivory); }
.field select option:disabled{ color:var(--sage-dim); }
.field input::placeholder{ color:var(--sage-dim); }
.field input:focus,.field select:focus{ border-color:var(--line-2); outline:none; }
.field input:focus-visible,.field select:focus-visible{ outline:2px solid var(--brass-lt); outline-offset:2px; }

/* --- the board ----------------------------------------------------------- */
.board{ border-top:1px solid var(--line-2); }

.board-head,
.row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 172px 128px 118px;
  gap:18px; align-items:center;
}

.board-head{
  padding:13px 16px; border-bottom:1px solid var(--line);
  font-size:.75rem; color:var(--sage-dim); letter-spacing:.05em;
}

.row{
  padding:15px 16px; border-bottom:1px solid var(--line);
  position:relative; transition:background .14s ease;
}
.row::before{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:2px;
  background:var(--brass); opacity:0; transition:opacity .14s ease;
}
.row:hover{ background:var(--ink-2); }
.row:hover::before{ opacity:1; }
.row[hidden]{ display:none; }

.token{
  display:grid; place-items:center; width:36px; height:36px;
  border:1px solid var(--line-2); border-radius:50%; overflow:hidden;
  background:var(--surface); position:relative;
}
.token::after{
  content:attr(data-letter);
  font-family:var(--serif); font-size:.9rem; color:var(--brass-lt);
}
.token img{
  position:absolute; inset:0; margin:auto; width:22px; height:22px;
  border-radius:3px; background:var(--surface);
}

.c-name{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.nm{
  font-weight:500; font-size:1.02rem; letter-spacing:-.004em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hs{ font-size:.79rem; color:var(--sage-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.c-pay{ white-space:nowrap; }
.amt{ font-size:1.02rem; font-weight:500; letter-spacing:.004em; }
.tick{ font-size:.78rem; color:var(--brass-lt); margin-left:6px; letter-spacing:.04em; }

.c-wait{ font-size:.9rem; color:var(--sage); white-space:nowrap; }
.c-wait .nowait{ color:var(--settle); }

.empty{ padding:44px 16px; color:var(--sage); }
.empty code{ font-size:.88em; color:var(--brass-lt); }

.no-results{ padding:40px 16px; color:var(--sage); margin:0; }

/* ===========================================================================
   Why / onboarding
   =========================================================================== */
.why{ padding:78px 0; border-top:1px solid var(--line); margin-top:56px; }
.why-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px; background:var(--line); border:1px solid var(--line); margin-top:32px;
}
.why-grid > div{ background:var(--ink); padding:32px; }
.why-grid h3{
  margin:0 0 10px; font-size:1.05rem; font-weight:600; letter-spacing:-.004em;
}
.why-grid p{ margin:0; color:var(--sage); font-size:.96rem; max-width:46ch; }

.onboard{ border-top:1px solid var(--line); background:var(--ink-2); }
.onboard-in{ padding-top:72px; padding-bottom:72px; }
.onboard-copy{ max-width:62ch; }
.onboard p{ color:var(--sage); }

.steps{ list-style:none; margin:30px 0 34px; padding:0; }
.steps li{
  display:flex; align-items:baseline; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line); color:var(--ivory);
}
.steps li span{
  font-family:var(--serif); color:var(--brass); font-size:1.05rem; flex:0 0 18px;
}

/* ===========================================================================
   Footer
   =========================================================================== */
.foot{ border-top:1px solid var(--line); }
.foot-in{ padding-top:40px; padding-bottom:56px; }
.foot-brand{
  font-family:var(--serif); font-weight:500; font-size:1.05rem; margin:0 0 12px; color:var(--ivory);
}
.foot-note{ margin:0 0 6px; font-size:.83rem; color:var(--sage-dim); max-width:74ch; }

/* ===========================================================================
   Ad slots
   =========================================================================== */
.ad{ display:flex; justify-content:center; }
.ad-inner{ max-width:100%; overflow:hidden; }
.ad-top{ padding:14px var(--pad); border-bottom:1px solid var(--line); background:var(--ink-2); }
.ad-band{ padding:34px var(--pad); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.ad-row{
  padding:20px 16px; border-bottom:1px solid var(--line);
  background:var(--ink-2); display:flex; justify-content:center;
}
.ad-row[hidden]{ display:none; }

.rail{ display:none; }
@media (min-width:1500px){
  .rail{
    display:block; position:fixed; top:120px; z-index:5;
    width:170px; text-align:center;
  }
  .rail-l{ left:calc(50% - var(--wrap)/2 - 190px); }
  .rail-r{ right:calc(50% - var(--wrap)/2 - 190px); }
}

.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--ink-2); border-top:1px solid var(--line-2);
  padding:9px 44px 9px 12px; display:flex; justify-content:center;
}
.sticky[hidden]{ display:none; }
.sticky-in{ overflow:hidden; max-width:100%; }
.sticky-x{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:1px solid var(--line-2); color:var(--sage);
  width:28px; height:28px; font-size:17px; line-height:1; cursor:pointer;
}
.sticky-x:hover{ color:var(--ivory); border-color:var(--line-2); }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width:900px){
  .figures{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:30px; }
  .why-grid{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:760px){
  :root{ --pad:20px; }

  .hero-in{ padding-top:56px; padding-bottom:52px; }
  .register{ padding-top:56px; }
  .why,.onboard-in{ padding-top:56px; padding-bottom:56px; }

  .board-head{ display:none; }

  .row{
    grid-template-columns:40px minmax(0,1fr) auto;
    grid-template-areas:
      "tok name name"
      ".   pay  wait"
      ".   go   go";
    row-gap:12px; column-gap:12px; padding:18px 12px 20px;
    align-items:center;
  }
  .c-coin{ grid-area:tok; align-self:start; }
  .c-name{ grid-area:name; }
  .c-pay { grid-area:pay;  text-align:left; }
  .c-wait{ grid-area:wait; text-align:right; }
  .c-go  { grid-area:go; }

  .nm{ white-space:normal; }
  .token{ width:32px; height:32px; margin-top:2px; }
  .btn-row{ padding:12px 20px; }
  .controls{ gap:12px; }
  .field{ flex:1 1 100%; }
}

/* Visually hidden, still read by screen readers. */
.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}