/* ============================================================
   MAPLE — #buy (how to buy) + #tokenomics (the numbers)
   Owns: sections/buy.html only. All invented classes are buy-* / tok-*.
   ============================================================ */

/* ---------- shared local tokens ---------- */
#buy,
#tokenomics{
  --buy-gap:22px;
  --buy-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

/* ============================================================
   1 — HOW TO BUY
   ============================================================ */

#buy{
  background:
    radial-gradient(120% 70% at 88% -10%, rgba(232,161,58,.16), rgba(232,161,58,0) 62%),
    var(--paper);
  overflow:hidden;
}

.buy-head{max-width:34ch}
.buy-head .eyebrow{margin-bottom:1.1rem}
.buy-head h2{margin-bottom:1.1rem}
.buy-head-em{
  color:var(--red);
  font-weight:400;
  letter-spacing:-.01em;
}
.buy-panel-main{min-width:0}

/* ---------- the four steps ---------- */
.buy-steps{
  list-style:none;
  margin:clamp(40px,6vw,68px) 0 0;
  padding:0;
  display:grid;
  gap:var(--buy-gap);
  grid-template-columns:1fr;
}

.buy-step{
  position:relative;
  padding:clamp(24px,3.4vw,30px);
  border-radius:var(--radius);
  background:linear-gradient(170deg,var(--paper-2),var(--paper) 78%);
  border:1px solid rgba(22,13,7,.09);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),
             box-shadow .22s ease,
             border-color .22s ease;
}
.buy-step:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:rgba(216,35,42,.34);
}

.buy-num{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.7rem,6vw,3.5rem);
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--gold);
  transition:color .22s ease;
}
.buy-step:hover .buy-num{color:var(--red)}

.buy-num::after{
  content:"";
  display:block;
  width:34px;
  height:3px;
  border-radius:3px;
  margin:.7rem 0 1.1rem;
  background:var(--red);
  opacity:.55;
  transition:width .22s cubic-bezier(.2,.7,.2,1),opacity .22s ease;
}
.buy-step:hover .buy-num::after{width:56px; opacity:1}

.buy-step-title{margin-bottom:.55rem; text-wrap:balance}
.buy-step-copy{
  color:var(--ink-2);
  font-size:.97rem;
  line-height:1.62;
}

.buy-link{
  color:var(--red);
  font-weight:600;
  text-decoration:none;
  border-bottom:1.5px solid rgba(216,35,42,.32);
  transition:border-color .18s ease,color .18s ease;
}
.buy-link:hover{color:var(--red-deep); border-bottom-color:var(--red-deep)}

/* connector chevron between steps (stacked layout) */
.buy-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(var(--buy-gap) / -2);
  width:10px;
  height:10px;
  border-right:2px solid var(--gold);
  border-top:2px solid var(--gold);
  transform:translate(-50%,50%) rotate(135deg);
  opacity:.75;
}

/* ---------- CA + CTA panel ---------- */
.buy-panel{
  margin-top:clamp(38px,5vw,58px);
  padding:clamp(24px,3.6vw,36px);
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--amber),var(--gold));
  box-shadow:var(--shadow);
  display:grid;
  gap:clamp(20px,2.6vw,30px);
  align-items:center;
}

.buy-ca-label{
  display:block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:.7rem;
}

.buy-ca-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  padding:.75rem .9rem;
  border-radius:var(--radius-sm);
  background:rgba(251,244,233,.6);
  border:1px solid rgba(22,13,7,.16);
  min-width:0;
}

.buy-ca{
  flex:1 1 220px;
  min-width:0;
  font-family:var(--buy-mono);
  font-size:clamp(.76rem,2.9vw,.95rem);
  line-height:1.45;
  color:var(--ink);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.buy-copy{
  flex:0 0 auto;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.04em;
  padding:.55rem 1.1rem;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:var(--red);
  color:var(--paper);
  transition:background .18s ease,transform .18s ease;
}
.buy-copy:hover{background:var(--red-deep); transform:translateY(-1px)}
.buy-copy.is-copied{background:var(--moss)}

.buy-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}
.buy-actions .btn{flex:1 1 190px}
.buy-actions .btn-ghost{
  border-color:rgba(22,13,7,.28);
  background:rgba(251,244,233,.32);
}
.buy-actions .btn-ghost:hover{background:rgba(251,244,233,.62)}

/* ---------- safety note ---------- */
.buy-safety{
  margin-top:clamp(22px,3vw,30px);
  max-width:72ch;
  padding:1rem 1.2rem;
  border-left:3px solid var(--red);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:rgba(216,35,42,.06);
  color:var(--ink-2);
  font-size:.94rem;
  line-height:1.6;
}
.buy-safety strong{color:var(--ink)}

/* ============================================================
   2 — TOKENOMICS  (dark band for page rhythm)
   ============================================================ */

#tokenomics{
  background:var(--water);
  color:var(--paper);
  overflow:hidden;
}
#tokenomics::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(90% 60% at 12% 0%, rgba(232,161,58,.22), rgba(232,161,58,0) 60%),
    radial-gradient(70% 60% at 92% 100%, rgba(216,35,42,.18), rgba(216,35,42,0) 62%);
}
#tokenomics > .shell{position:relative; z-index:1}

.tok-head{max-width:40ch}
.tok-head .eyebrow{color:var(--amber); margin-bottom:1.1rem}
.tok-head .eyebrow::before{background:var(--amber)}
.tok-head h2{color:var(--paper); margin-bottom:1.1rem}
.tok-head .lede{color:rgba(251,244,233,.74)}

/* ---------- stat cards ---------- */
.tok-grid{
  margin-top:clamp(38px,5vw,62px);
  display:grid;
  gap:var(--buy-gap);
  grid-template-columns:1fr;
}

.tok-card{
  display:flex;
  flex-direction:column;
  padding:clamp(22px,3vw,28px);
  border-radius:var(--radius);
  background:rgba(251,244,233,.055);
  border:1px solid rgba(251,244,233,.14);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),
             background .22s ease,
             border-color .22s ease;
}
.tok-card:hover{
  transform:translateY(-5px);
  background:rgba(251,244,233,.09);
  border-color:rgba(232,161,58,.55);
}

.tok-label{
  display:block;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:rgba(251,244,233,.56);
  margin-bottom:.75rem;
}
.tok-value{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.75rem,3.2vw,2.35rem);
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--amber);
  overflow-wrap:anywhere;
}
.tok-note{
  margin-top:auto;
  padding-top:.75rem;
  font-size:.88rem;
  line-height:1.55;
  color:rgba(251,244,233,.62);
}

/* ---------- creator rewards callout ---------- */
.tok-rewards{
  margin-top:var(--buy-gap);
  padding:clamp(26px,3.6vw,40px);
  border-radius:var(--radius);
  background:linear-gradient(140deg,rgba(232,161,58,.16),rgba(216,35,42,.12));
  border:1px solid rgba(232,161,58,.34);
  display:grid;
  gap:clamp(14px,2.4vw,34px);
  align-items:start;
}

.tok-rewards-figure{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(3.2rem,9vw,5rem);
  line-height:.85;
  letter-spacing:-.05em;
  color:var(--amber);
}

.tok-rewards-title{
  color:var(--paper);
  font-weight:600;
  max-width:26ch;
  margin-bottom:.85rem;
}
.tok-rewards-copy{
  color:rgba(251,244,233,.76);
  font-size:.98rem;
  line-height:1.62;
  max-width:62ch;
}
.tok-disclaimer{
  margin-top:1rem;
  font-size:.78rem;
  line-height:1.55;
  letter-spacing:.01em;
  color:rgba(251,244,233,.5);
  max-width:62ch;
}

/* ---------- live data note ---------- */
.tok-live{
  margin-top:clamp(24px,3vw,34px);
  max-width:70ch;
  font-size:.94rem;
  line-height:1.62;
  color:rgba(251,244,233,.66);
}
.tok-live-link{
  color:var(--amber);
  font-weight:600;
  text-decoration:none;
  border-bottom:1.5px solid rgba(232,161,58,.45);
  transition:border-color .18s ease,color .18s ease;
}
.tok-live-link:hover{color:var(--paper); border-bottom-color:var(--paper)}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (min-width:720px){
  .buy-steps{grid-template-columns:repeat(2,1fr)}
  /* connectors would point off-row in a 2-up grid */
  .buy-step:not(:last-child)::after{display:none}

  .tok-grid{grid-template-columns:repeat(2,1fr)}

  .tok-rewards{
    grid-template-columns:auto 1fr;
    align-items:start;
  }
  .tok-rewards-figure{margin-top:-.06em}
}

@media (min-width:980px){
  .buy-panel{grid-template-columns:1fr auto}
  .buy-actions{flex-wrap:nowrap}
  .buy-actions .btn{flex:0 0 auto}
}

@media (min-width:1040px){
  .buy-steps{grid-template-columns:repeat(4,1fr)}

  /* horizontal path between the four steps */
  .buy-step:not(:last-child)::after{
    display:block;
    left:auto;
    bottom:auto;
    right:calc(var(--buy-gap) / -2);
    top:50%;
    transform:translate(50%,-50%) rotate(45deg);
  }

  .tok-grid{grid-template-columns:repeat(4,1fr)}

  /* keep step copy on a common baseline when a title wraps */
  .buy-step-title{min-height:2.05em}
}

@media (prefers-reduced-motion:reduce){
  .buy-step:hover,
  .tok-card:hover,
  .buy-copy:hover{transform:none}
}