@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
  @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Inter:wght@400;500;600;700&family=DM+Mono:wght@500&display=swap');
 
  :root{
    --bg:#FBF9F4;
    --ink:#15151C;
    --ink-lo:#5B5D6B;
 
    --s1:#E8483A; --s1-soft:#FFE3E0;
    --s2:#F08A2B; --s2-soft:#FFEBD4;
    --s3:#D2A500; --s3-soft:#FFF3C4;
    --s4:#2FA562; --s4-soft:#D9F5E4;
    --s5:#2D82E0; --s5-soft:#DCEBFF;
    --s6:#6C5CE7; --s6-soft:#E7E2FF;
    --s7:#B035C9; --s7-soft:#F5DFFB;
    --s8:#E33C7F; --s8-soft:#FFDDEB;
  }
 
  .token-section *{box-sizing:border-box;}
 
  .token-section{
    background:#f6e1fc;
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    line-height:1.65;
    padding:40px 0;
  }
 
  .token-section h1,
  .token-section h3{font-family:'Baloo 2',sans-serif;}
  .token-section .fw-bold{font-family:'Baloo 2',sans-serif;font-weight:700 !important;}
 
  .token-section .page-head{
    max-width:820px;
    margin:0 auto 56px;
    text-align:center;
    padding-top:20px;
  }
  .token-section .page-head .kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:2px solid var(--ink);
    border-radius:999px;
    padding:7px 16px;
    font-family:'DM Mono',monospace;
    font-size:.72rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    box-shadow:3px 3px 0 var(--ink);
    margin-bottom:24px;
  }
  .token-section .page-head h1{
    font-size:clamp(2rem,4.4vw,3rem);
    font-weight:800;
    margin-bottom:14px;
  }
  .token-section .page-head p{color:var(--ink-lo);font-size:1.02rem;}
 
  /* numbered circle badges, one color per section */
  .token-section .num-badge{
    border:2.5px solid var(--ink) !important;
    box-shadow:4px 4px 0 var(--ink);
  }
  .token-section .s1 .num-badge{background:var(--s1) !important;}
  .token-section .s2 .num-badge{background:var(--s2) !important;}
  .token-section .s3 .num-badge{background:var(--s3) !important;}
  .token-section .s4 .num-badge{background:var(--s4) !important;}
  .token-section .s5 .num-badge{background:var(--s5) !important;}
  .token-section .s6 .num-badge{background:var(--s6) !important;}
  .token-section .s7 .num-badge{background:var(--s7) !important;}
  .token-section .s8 .num-badge{background:var(--s8) !important;}
 
  .token-section .s1 .eyebrow{color:var(--s1) !important;}
  .token-section .s2 .eyebrow{color:var(--s2) !important;}
  .token-section .s3 .eyebrow{color:var(--s3) !important;}
  .token-section .s4 .eyebrow{color:var(--s4) !important;}
  .token-section .s5 .eyebrow{color:var(--s5) !important;}
  .token-section .s6 .eyebrow{color:var(--s6) !important;}
  .token-section .s7 .eyebrow{color:var(--s7) !important;}
  .token-section .s8 .eyebrow{color:var(--s8) !important;}
 
  .token-section .eyebrow{
    font-family:'DM Mono',monospace;
    font-weight:600;
    letter-spacing:.08em;
  }
 
  /* the info card = the "box" */
  .token-section .info-card{
    border:2.5px solid var(--ink) !important;
    border-radius:20px !important;
    box-shadow:6px 6px 0 var(--ink) !important;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .token-section .info-card:hover{
    transform:translate(-2px,-2px);
    box-shadow:9px 9px 0 var(--ink) !important;
  }
 
  .token-section .s1 .info-card .note{background:var(--s1-soft) !important;}
  .token-section .s2 .info-card .note{background:var(--s2-soft) !important;}
  .token-section .s3 .info-card .note{background:var(--s3-soft) !important;}
  .token-section .s4 .info-card .note{background:var(--s4-soft) !important;}
  .token-section .s5 .info-card .note{background:var(--s5-soft) !important;}
  .token-section .s6 .info-card .note{background:var(--s6-soft) !important;}
  .token-section .s7 .info-card .note{background:var(--s7-soft) !important;}
  .token-section .s8 .info-card .note{background:var(--s8-soft) !important;}
 
  .token-section .note{
    border:1.5px dashed var(--ink) !important;
    border-radius:12px !important;
  }
 
  .token-section .info-card h3{font-size:1.35rem;}
  .token-section .info-card p.text-secondary{color:var(--ink-lo) !important;}
  .token-section .note p.text-secondary{color:var(--ink-lo) !important;}
 
  .token-section .closing-box{
    max-width:760px;
    margin:40px auto 0;
    text-align:center;
    background:#fff;
    border:2.5px solid var(--ink);
    border-radius:22px;
    box-shadow:7px 7px 0 var(--ink);
    padding:44px 36px;
  }
  .token-section .closing-box h2{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.7rem;margin-bottom:12px;}
  .token-section .closing-box p{color:var(--ink-lo);max-width:440px;margin:0 auto 24px;}
  .token-section .btn-boxed{
    font-family:'Baloo 2',sans-serif;
    font-weight:700;
    border:2.5px solid var(--ink);
    border-radius:11px;
    padding:11px 24px;
    box-shadow:4px 4px 0 var(--ink);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .token-section .btn-boxed:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
  .token-section .btn-primary-boxed{background:var(--s3);color:var(--ink);}
  .token-section .btn-secondary-boxed{background:#fff;color:var(--ink);}
 
  @media (max-width: 991px){
    .token-section .num-badge{margin-bottom:10px;}
  }   

  /* index.php */