/* ================================
   Background Image
=================================*/
body.onboarding-page {
    background-image: url('/images/zeusplanet.png');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: darken;
}

/* Page-only refresh: clearer hierarchy, improved spacing, modern glass panels */
    * { box-sizing: border-box; 
    letter-spacing: 2px;
    }

    :root{
      --gold:#ffd700;
      --panel: rgba(10, 14, 22, 0.62);
      --panel-strong: rgba(10, 14, 22, 0.78);
      --glow: 0 0 22px rgba(0,255,255,0.18);
      --glow-strong: 0 0 28px rgba(0,255,255,0.28);
      --border: rgba(0, 180, 255, 0.22);
      --border-strong: rgba(0, 180, 255, 0.32);
      --muted: #c9d4df;
      --text: #e9f0f7;
      --shadow: 0 18px 50px rgba(0,0,0,0.45);
    }

    /* Keep the “BLS” spaced look, but avoid stretching paragraph text */
    body.onboarding-page { color: var(--text); letter-spacing: 1.5px; }

    .hero p {
      color: var(--gold);
      margin: 0;
      font-size: 0.98rem;
      opacity: 0.95;
      text-shadow: 0 6px 20px rgba(0,0,0,0.45);
      
      text-wrap: balance;
    }


    /* Main container: widened to reduce awkward wrapping */
    .resource-container{
      display: grid;
      gap: 22px;
      padding: 34px 18px 46px;
      max-width: 1120px;
      margin: 0 auto;
    }

    /* Panels: modern glass + gradient edge */
    .resource-box{
      position: relative;
      background: var(--panel);
      border-radius: 16px;
      padding: 18px 18px 16px;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: var(--shadow), var(--glow);
      backdrop-filter: blur(10px);
      overflow: hidden;
    }

    .resource-box::before{
      content:"";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: 16px;
      padding: 1px;
      background: linear-gradient(135deg,
        rgba(0,180,255,0.36),
        rgba(255,215,0,0.18),
        rgba(0,180,255,0.22)
      );
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      mask-composite: exclude;
      opacity: 0.55;
    }

    .resource-box h3{
      font-size: 1.55rem;
      color: var(--gold);
      margin: 0 0 12px 0;
      font-weight: 900;
      text-shadow: 0 6px 18px rgba(0,0,0,0.45);
      text-wrap: balance;
    }

   /* =========================
   STEPS GRID (REFINED)
   ========================= */

.steps-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

/* Card */
.step{
  background: linear-gradient(180deg, rgba(8,12,18,0.78) 0%, rgba(8,12,18,0.58) 100%);
  border: 1px solid rgba(0, 180, 255, 0.18);
  border-radius: 14px;
  padding: 14px 16px 14px;          /* slightly more horizontal breathing room */

  /* Grid header + body */
  display: grid;
  grid-template-columns: 34px 1fr;  /* fixed badge width for perfect alignment */
  grid-template-rows: auto 1fr;
  column-gap: 12px;
  row-gap: 10px;

  min-height: 158px;               /* slightly taller = less cramped text */
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.step:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.42), var(--glow-strong);
  border-color: rgba(0, 180, 255, 0.28);
}

/* Number badge */
.step .num{
  grid-column: 1;
  grid-row: 1;

  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;

  font-weight: 900;
  background: rgba(19,32,51,0.9);
  color: #b8d6ff;
  border: 1px solid rgba(0, 180, 255, 0.22);
  box-shadow: 0 10px 20px rgba(0,0,0,0.35);

  /* subtle optical alignment */
  transform: translateY(1px);
}

/* Title */
.step .title{
  grid-column: 2;
  grid-row: 1;
  align-self: center;

  font-weight: 900;
  color: var(--text);
  font-size: 1.04rem;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

/* Description */
.step .desc{
  grid-column: 1 / -1;
  grid-row: 2;

  color: rgba(201,212,223,0.95);
  font-size: 0.92rem;
  line-height: 1.5;
  text-wrap: pretty;

  /* ensures the desc doesn’t “float” visually */
  margin: 0;
}

/* =========================
   STEP 5 (CENTERED CTA FEEL)
   ========================= */

.steps-grid .step:nth-child(5){
  grid-column: 2 / -2;
  min-width: 240px;
  min-height: auto; /* CTA row can be a touch shorter than the top row */

  background: linear-gradient(180deg, rgba(10,14,22,0.86) 0%, rgba(10,14,22,0.66) 100%);
  border-color: rgba(255,215,0,0.22);

  /* center content without affecting the other cards */
  align-content: center;
}

.steps-grid .step:nth-child(5) .desc{
  text-align: center;
}

.steps-grid .step:nth-child(5) .title{
  text-align: center;
}

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

@media (max-width: 1120px){
  .steps-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-grid .step:nth-child(5){ grid-column: 1 / -1; }
}

@media (max-width: 520px){
  .steps-grid{ grid-template-columns: 1fr; }
}


    /* Path at a glance + overview grids */
    .road-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(260px, 1fr));
      gap: 12px;
      margin-top: 10px;
    }

    .road{
      background: linear-gradient(180deg, rgba(8,12,18,0.78) 0%, rgba(8,12,18,0.58) 100%);
      border: 1px solid rgba(0, 180, 255, 0.16);
      border-radius: 14px;
      padding: 16px 16px 14px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.35);
      transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
    }

    .road:hover{
      transform: translateY(-2px);
      border-color: rgba(0, 180, 255, 0.28);
      box-shadow: 0 18px 40px rgba(0,0,0,0.42), var(--glow);
    }

    .road .kicker{
      color: rgba(159,178,198,0.95);
      font-weight: 900;
      font-size: 0.92rem;
    }

    .road .rt{
      font-weight: 900;
      margin: 4px 0 8px;
      font-size: 1.05rem;
      color: var(--text);
      text-wrap: balance;
    }

    .road p{
      margin: 0;
      color: rgba(201,212,223,0.95);
      font-size: 0.93rem;
      line-height: 1.45;
      text-wrap: pretty;
    }

    /* FAQ: stronger affordance and readability */
    details.faq{
      background: rgba(8,12,18,0.72);
      border: 1px solid rgba(0, 180, 255, 0.16);
      border-radius: 14px;
      box-shadow: 0 10px 26px rgba(0,0,0,0.30);
      overflow: hidden;
    }
    details.faq + details.faq { margin-top: 10px; }

    details.faq summary{
      list-style: none;
      cursor: pointer;
      padding: 14px 16px;
      font-weight: 900;
      color: var(--gold);
      background: linear-gradient(180deg, rgba(10,14,22,0.65) 0%, rgba(10,14,22,0.35) 100%);
      text-wrap: balance;
    }

    details.faq[open] summary{
      border-bottom: 1px solid rgba(0, 180, 255, 0.16);
    }

    details.faq p{
      padding: 12px 16px 16px;
      margin: 0;
      color: rgba(201,212,223,0.95);
      font-size: 0.94rem;
      line-height: 1.45;
      text-wrap: pretty;
      hyphens: auto;
    }

    /* Small link styling inside FAQ text (optional, minimal) */
    .resource-box a{
      color: var(--gold);
      font-weight: 900;
      text-decoration: none;
      border-bottom: 1px solid rgba(255,215,0,0.35);
    }
    .resource-box a:hover{
      border-bottom-color: rgba(255,215,0,0.75);
    }

    /* Responsive adjustments */
    @media (max-width: 1120px){
      .steps-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .steps-grid .step:nth-child(5){ grid-column: 1 / -1; }
      .road-grid{ grid-template-columns: 1fr; }
    }

    @media (max-width: 520px){
      .resource-container{ padding: 26px 12px 40px; }
      .steps-grid{ grid-template-columns: 1fr; }
      .hero{ margin-top: 22px; }
    }

    html {
  scroll-behavior: smooth;
}