/* =========================================================
   $OG / TOKEN PAGE  v2
   Built on css/preview.css, the site's design standard. This file
   only adds the pieces the token page needs: the spec sheet, the
   allocation, the unlock line, the fee cards, the launch steps, the
   reserve rules and the contract block. Same cards, same type, same
   colour; nothing floats and nothing holds the scroll.
   ========================================================= */

.tk-hero{ padding:150px 0 70px; }
.tk-hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center; }
.tk-hero h1{ font-size:clamp(42px, 5.2vw, 70px); letter-spacing:-.045em; line-height:1.03; }
.tk-hero h1 span{ color:#a698c0; }
.tk-hero .pv-lede{ margin-top:24px; }
.tk-hero .pv-actions{ margin-top:34px; }
@media (max-width:980px){ .tk-hero{ padding:116px 0 40px; } .tk-hero-grid{ grid-template-columns:1fr; gap:40px; } }

/* the spec sheet: what the token is, in one table */
.tk-sheet{ padding:10px 28px; border-radius:var(--r-xl); }
.tk-sheet dl{ display:grid; grid-template-columns:auto 1fr; }
.tk-sheet dt, .tk-sheet dd{ padding:13px 0; border-bottom:1px solid var(--line); font-size:15px; }
.tk-sheet dt{ padding-right:24px; color:var(--ink-3); }
.tk-sheet dd{ text-align:right; font-weight:500; color:var(--ink); }
.tk-sheet dt:last-of-type, .tk-sheet dd:last-of-type{ border-bottom:0; }
.tk-sheet dd.is-soon{ color:var(--gold-2); }
@media (max-width:460px){ .tk-sheet{ padding:6px 18px; } .tk-sheet dt, .tk-sheet dd{ font-size:14px; } }

/* allocation */
.tk-alloc{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:56px; align-items:center; margin-top:52px; }
.tk-alloc .pv-donut{ max-width:340px; }
.tk-buckets{ display:grid; gap:14px; }
.tk-bucket{ padding:26px 28px; border-radius:var(--r-lg); }
.tk-bucket-top{ display:flex; align-items:center; gap:14px; }
.tk-bucket-top i{ flex:none; width:12px; height:12px; border-radius:50%; }
.tk-bucket-top h3{ font-size:18px; letter-spacing:-.02em; }
.tk-bucket-top b{ margin-left:auto; font-size:30px; font-weight:600; letter-spacing:-.04em; }
.tk-bucket ul{ list-style:none; margin-top:14px; }
.tk-bucket li{ display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-top:1px solid var(--line); font-size:14.5px; }
.tk-bucket li span{ color:var(--ink-3); }
.tk-bucket li b{ font-weight:500; text-align:right; }
.tk-note{ margin-top:16px; padding:18px 24px; border-radius:var(--r-lg); border:1px dashed var(--line-2); font-size:15px; line-height:1.55; color:var(--ink-2); }
.tk-note b{ color:var(--ink); font-weight:600; }
@media (max-width:900px){ .tk-alloc{ grid-template-columns:1fr; gap:36px; } .tk-alloc .pv-donut{ max-width:250px; } .tk-bucket{ padding:22px 20px; } }

/* unlocks */
.tk-marks{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:52px; }
.tk-mark{ padding:22px 24px; border-radius:var(--r-lg); }
.tk-mark span{ display:block; font-size:14px; color:var(--ink-3); }
.tk-mark b{ display:block; margin-top:10px; font-size:clamp(26px, 2.6vw, 34px); font-weight:600; letter-spacing:-.035em; line-height:1.1; }
.tk-mark small{ display:block; margin-top:8px; font-size:14px; line-height:1.5; color:var(--ink-2); }
.tk-chart{ margin-top:14px; padding:26px 26px 18px; border-radius:var(--r-xl); }
.tk-chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.tk-chart .grid{ stroke:rgba(255,255,255,.07); stroke-width:1; }
.tk-chart .axis{ font:500 12px var(--sans); fill:var(--ink-3); }
.tk-chart .area{ fill:url(#tkArea); }
.tk-chart .line{ fill:none; stroke:#f4f0fa; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.tk-chart .dot{ fill:var(--gold); stroke:#07050d; stroke-width:3; }
.tk-chart .tag{ font:600 12.5px var(--sans); fill:var(--gold-2); }
.tk-chart figcaption{ margin-top:12px; font-size:13.5px; line-height:1.6; color:var(--ink-3); }
@media (max-width:760px){ .tk-marks{ grid-template-columns:1fr; } .tk-chart{ padding:18px 14px 14px; } }

/* the fee */
.tk-fees{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:52px; }
.tk-fee{ padding:26px 26px 28px; border-radius:var(--r-lg); }
.tk-fee span{ display:block; font-size:14px; color:var(--ink-3); }
.tk-fee b{ display:block; margin-top:12px; font-size:clamp(40px, 4.4vw, 56px); font-weight:600; letter-spacing:-.05em; line-height:1; }
.tk-fee p{ margin-top:12px; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.tk-fee.is-on{ border-color:rgba(242,200,120,.4); }
.tk-fee.is-on b{ color:var(--gold-2); }
.tk-note a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px){ .tk-fees{ grid-template-columns:1fr; } }

/* how the pool opens, and the launch sequence */
.tk-points{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:52px; }
.tk-point{ padding:24px 22px 26px; border-radius:var(--r-lg); }
.tk-point h3{ font-size:17px; letter-spacing:-.02em; line-height:1.3; }
.tk-point p{ margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.tk-point.is-warn{ border-color:rgba(242,200,120,.35); }
.tk-sub{ margin-top:64px; font-size:clamp(24px, 2.6vw, 30px); letter-spacing:-.03em; }
.tk-sub + p{ margin-top:10px; max-width:40em; font-size:15.5px; line-height:1.6; color:var(--ink-2); }
.tk-steps{ list-style:none; margin-top:26px; border-top:1px solid var(--line); }
.tk-step{ display:grid; grid-template-columns:56px minmax(0,220px) minmax(0,1fr); gap:24px; padding:20px 0; border-bottom:1px solid var(--line); }
.tk-step i{ font:600 14px/1.5 var(--sans); font-style:normal; color:var(--gold); }
.tk-step h4{ font-size:16px; letter-spacing:-.01em; line-height:1.4; }
.tk-step h4 small{ display:block; margin-top:4px; font-size:13.5px; font-weight:500; color:var(--ink-3); }
.tk-step p{ font-size:15px; line-height:1.6; color:var(--ink-2); }
@media (max-width:980px){ .tk-points{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:760px){ .tk-step{ grid-template-columns:40px minmax(0,1fr); gap:6px 14px; } .tk-step p{ grid-column:2; } }
@media (max-width:520px){ .tk-points{ grid-template-columns:1fr; } }

/* reserve rules and gates */
.tk-rules{ list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:48px; margin-top:52px; border-top:1px solid var(--line); }
.tk-rule{ display:grid; grid-template-columns:40px minmax(0,1fr); padding:20px 0; border-bottom:1px solid var(--line); }
.tk-rule i{ font:600 14px/1.5 var(--sans); font-style:normal; color:var(--gold); }
.tk-rule h4{ font-size:16px; letter-spacing:-.01em; line-height:1.4; }
.tk-rule p{ margin-top:5px; font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.tk-gates{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:28px; border-radius:var(--r-lg); overflow:hidden; }
.tk-gate{ padding:20px 22px; }
.tk-gate + .tk-gate{ border-left:1px solid var(--line); }
.tk-gate span{ display:block; font-size:14px; color:var(--ink-3); }
.tk-gate b{ display:block; margin-top:8px; font-size:17px; font-weight:600; letter-spacing:-.02em; }
.tk-gate small{ display:block; margin-top:6px; font-size:13.5px; line-height:1.5; color:var(--ink-2); }
@media (max-width:860px){
  .tk-rules{ grid-template-columns:1fr; }
  .tk-gates{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tk-gate:nth-child(3){ border-left:0; }
  .tk-gate:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* the contract */
.tk-ca{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:52px; padding:26px 28px; border-radius:var(--r-xl); }
.tk-ca span{ font-size:14px; color:var(--ink-3); }
.tk-ca code{ flex:1 1 320px; min-width:0; overflow-wrap:anywhere; font:500 17px/1.4 var(--mono); color:var(--ink); }
.tk-ca code.is-soon{ font-family:var(--sans); font-size:18px; color:var(--gold-2); }
.tk-ca .pv-btn[disabled]{ opacity:.45; cursor:default; }
.tk-ca-note{ margin-top:14px; font-size:14px; line-height:1.6; color:var(--ink-3); }
#contract .pv-facts{ justify-content:flex-start; margin:22px 0 0; max-width:none; }

/* risks */
.tk-risks{ display:grid; gap:10px; max-width:900px; margin-top:52px; }
.tk-foot-links{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:18px; font-size:14px; }
.tk-foot-links a{ color:var(--ink-2); text-decoration:none; }
.tk-foot-links a:hover{ color:var(--ink); }
/* a hidden button stays hidden: .pv-btn sets display, which would otherwise override [hidden] */
.tk-ca [hidden]{ display:none !important; }
.tk-rule{ align-items:baseline; }

/* ---- fixes from the browser pass ----
   The default margins and paddings on dl, dd, ol, ul and figure were
   pushing the spec sheet, the steps and the chart inwards, and label rules
   written as ".x span" were also catching the value spans inside the text. */
.tk-sheet dl, .tk-sheet dd, .tk-steps, .tk-rules, .tk-bucket ul, .tk-chart, .tk-step h4, .tk-rule h4{ margin:0; padding-left:0; }
.tk-steps, .tk-rules{ padding:0; }
.tk-sheet dd{ margin:0; }
.tk-step h4{ margin:0; }
.tk-step{ align-items:baseline; }
.tk-hero h1 span{ color:inherit; }
.tk-hero h1 .tk-dim{ color:#a698c0; }
.tk-fee span, .tk-mark span, .tk-gate span{ display:inline; font-size:inherit; color:inherit; }
.tk-fee > span, .tk-mark > span, .tk-gate > span{ display:block; font-size:14px; color:var(--ink-3); }