/* ======= Layout shell ======================================== */
    body.pricing-page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow:hidden;          /* keep the cinematic feel on desktop */
  overflow-x:hidden;
}

@media (max-width: 768px){   /* phones & small tablets */
  body.pricing-page{
    overflow-y:auto;        /* let the page scroll vertically */
  }
}
    main.pricing-wrapper{
      flex:1 1 auto;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:4rem 1rem 2rem;
      gap:2rem;
      flex-wrap:wrap;
      position:relative;              /* keeps z-index above canvas  */
      z-index:5;
    }

    /* ======= Card ================================================ */
    .plan-card{
      backdrop-filter:blur(10px);
      background:rgba(0,0,0,.6);
      border:1px solid rgba(0,255,255,.15);
      border-radius:12px;
      box-shadow:0 0 25px rgba(0,255,255,.15);
      width:18rem;
      max-width:90vw;
      display:flex;
      flex-direction:column;
      padding:2rem 1.75rem;
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .plan-card:hover{
      transform:translateY(-6px);
      box-shadow:0 0 35px rgba(0,255,255,.25);
    }

    .plan-title{
      font-size:1.35rem;
      font-weight:700;
      color:var(--accent);
      text-align:center;
      margin:0 0 .3rem;
    }
    .plan-price{
      font-size:2.3rem;
      font-weight:700;
      text-align:center;
      margin:0 0 1.5rem;
    }
    .plan-price span{ font-size:.9rem; font-weight:400; color:#aaa; }

    .features{
      flex:1 1 auto;
      list-style:none;
      padding:0;
      margin:0 0 1.75rem;
      font-size:.95rem;
      line-height:1.55;
    }
    .features li::before{
      content:"✔";
      color:var(--accent);
      margin-right:.5rem;
      font-size:.85rem;
    }

    .cta-btn{
      display:block;
      width:100%;
      text-align:center;
      padding:.9rem 1.2rem;
      font-size:1rem;
      font-weight:600;
      border-radius:8px;
      border:1px solid var(--accent);
      background:linear-gradient(to bottom right,rgba(0,255,255,.12),rgba(0,0,0,.7));
      color:var(--accent);
      cursor:pointer;
      transition:background .25s ease, color .25s ease;
    }
    .cta-btn:hover{
      background:var(--accent);
      color:#000;
    }
    /* Pricing page buttons */
    .cta-btn {
      text-decoration: none;   /* kills underline */
      color: inherit;          /* keeps your accent color */
    }
    /* keep it gone on hover / focus too */
    .cta-btn:hover,
    .cta-btn:focus {
      text-decoration: none;
    }
    /* subtle text link under pricing grid */
    .login-cta{
      margin: 2rem auto 0;        /* auto left/right → centers block itself   */
      text-align: center;         /* keeps the inline link centered inside     */
      width: 100%;                /* let it span the grid’s full width         */
      font-size: 0.95rem;
      color: #aaa;
    }
    .login-cta a{
      color: var(--accent);
      text-decoration: none;     /* no underline */
      font-weight: 600;
    }
    .login-cta a:hover{
      text-decoration: underline;/* gentle hover cue */
    }
    /* ======= Footer stick-down =================================== */
    footer.site-footer{ position:static; margin-top:auto; }

    /* notice for returning users whose Pro subscription lapsed */
    .returning-note{
      display:none;
      margin:1rem auto 0;
      padding:0.75rem 1rem;
      max-width:32rem;
      border:1px solid rgba(255,0,0,0.5);
      background:rgba(255,0,0,0.1);
      color:#f55;
      text-align:center;
      border-radius:8px;
    }