/* ============================ PRICING PAGE ============================ */
    /* "pricing-mode" hides the other homepage sections so #pricing fills the screen */
    body.pricing-mode > .aurora,
    body.pricing-mode > .wrap,
    body.pricing-mode > section:not(#pricing){ display:none !important; }

    /* ===== Premium plan cards — staggered entrance, hover sheen, a dominant
       glowing "Best value" card, shimmering badges. Tuned to pull the eye to
       the longest plan. ===== */
    .plans-grid{
      display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
      gap:16px; margin-top:40px; align-items:stretch;
    }
    @media (max-width:1024px){ .plans-grid{ grid-template-columns:repeat(2,1fr); } }
    @media (max-width:560px){ .plans-grid{ grid-template-columns:1fr; } }

    @keyframes planIn{ from{ opacity:0; transform:translateY(26px) scale(.97); } to{ opacity:1; transform:none; } }
    @keyframes planBadgeShine{ 0%{ background-position:-160% 0; } 60%,100%{ background-position:260% 0; } }
    @keyframes planBestGlow{
      0%,100%{ box-shadow:0 0 0 1px rgba(198,242,78,.4), 0 18px 50px -22px rgba(198,242,78,.5); }
      50%    { box-shadow:0 0 0 1px rgba(139,109,255,.5), 0 22px 60px -20px rgba(139,109,255,.55); }
    }

    #pricing .plan-card{
      position:relative; display:flex; flex-direction:column; gap:7px;
      padding:26px 22px 22px; border-radius:20px; cursor:pointer; text-align:left;
      background:linear-gradient(180deg, rgba(28,31,42,.8), rgba(16,18,26,.9));
      border:1px solid var(--glass-line); isolation:isolate; overflow:hidden;
      animation:planIn .6s cubic-bezier(.16,1,.3,1) backwards;
      animation-delay:calc(var(--pi,0) * 80ms);
      transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease;
    }
    #pricing .plan-card::after{   /* hover sheen sweep */
      content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
      background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
      background-size:240% 100%; background-position:-70% 0; transition:background-position .8s ease;
    }
    #pricing .plan-card:hover{
      transform:translateY(-8px); border-color:rgba(198,242,78,.5);
      box-shadow:0 28px 60px -28px rgba(198,242,78,.4), 0 10px 24px -18px rgba(0,0,0,.7);
    }
    #pricing .plan-card:hover::after{ background-position:170% 0; }
    #pricing .plan-card.selected{
      border-color:var(--lime);
      box-shadow:0 0 0 3px rgba(198,242,78,.18), 0 20px 44px -22px rgba(198,242,78,.4);
    }
    #pricing .plan-card--pop{ border-color:rgba(198,242,78,.4); }
    #pricing .plan-card--best{          /* the hero card */
      border:1px solid transparent;
      background:linear-gradient(180deg, rgba(30,28,46,.9), rgba(18,16,28,.94)) padding-box,
                 linear-gradient(135deg, var(--lime), var(--violet)) border-box;
      transform:translateY(-6px) scale(1.03);
      animation:planIn .6s cubic-bezier(.16,1,.3,1) backwards, planBestGlow 3.4s ease-in-out 1s infinite;
    }
    #pricing .plan-card--best:hover{ transform:translateY(-12px) scale(1.04); }

    #pricing .plan-badge{
      align-self:flex-start; font-size:10.5px; font-weight:900; letter-spacing:.8px;
      padding:5px 11px; border-radius:999px; margin-bottom:2px; position:relative; overflow:hidden;
      color:var(--on-lime); background:linear-gradient(135deg, var(--lime), #9ade3c);
    }
    #pricing .plan-badge--best{ color:#fff; background:linear-gradient(135deg, var(--violet), #b79bff); }
    #pricing .plan-badge::before{
      content:''; position:absolute; inset:0;
      background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.7) 50%, transparent 62%);
      background-size:240% 100%; animation:planBadgeShine 3s ease-in-out infinite;
    }
    #pricing .plan-title{ font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-size:21px; font-weight:800; color:var(--text); }
    #pricing .plan-sub{ font-size:12px; color:var(--muted); margin-top:-3px; }
    #pricing .plan-permonth{ display:flex; align-items:baseline; gap:6px; margin:10px 0 2px; }
    #pricing .plan-permonth b{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-size:34px; font-weight:800; line-height:1;
      background:linear-gradient(120deg, var(--lime), var(--cyan));
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    }
    #pricing .plan-card--best .plan-permonth b{ background:linear-gradient(120deg, var(--lime), var(--violet)); -webkit-background-clip:text; background-clip:text; }
    #pricing .plan-permonth span{ font-size:12px; color:var(--muted); font-weight:700; }
    /* big TOTAL one-time price (the hero number) */
    #pricing .plan-price-total{ display:flex; align-items:baseline; gap:7px; margin:12px 0 3px; }
    #pricing .plan-price-total b{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-size:40px; font-weight:800; line-height:1;
      background:linear-gradient(120deg, var(--lime), var(--cyan));
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    }
    #pricing .plan-card--best .plan-price-total b{ background:linear-gradient(120deg, var(--lime), var(--violet)); -webkit-background-clip:text; background-clip:text; }
    #pricing .plan-price-total span{ font-size:15px; color:var(--muted); font-weight:700; }
    #pricing .plan-oneoff{ font-size:11.5px; font-weight:800; letter-spacing:.3px; color:var(--lime); margin-bottom:2px; }
    #pricing .plan-card--best .plan-oneoff{ color:#b79bff; }
    #pricing .plan-anchor{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; min-height:20px; }
    #pricing .plan-anchor s{ color:var(--muted); opacity:.7; }
    #pricing .plan-anchor--flat{ color:var(--muted); opacity:.7; }
    #pricing .plan-save{
      font-weight:800; font-size:11px; letter-spacing:.3px; color:#06281a;
      background:linear-gradient(135deg,#86efac,#34d399); padding:2px 9px; border-radius:999px;
    }
    #pricing .plan-bonus{
      display:flex; flex-direction:column; margin:5px 0; font-weight:800; font-size:13px; color:var(--lime);
      padding:8px 12px; border-radius:12px; background:rgba(198,242,78,.10); border:1px dashed rgba(198,242,78,.4);
    }
    #pricing .plan-bonus small{ font-weight:600; font-size:10.5px; color:var(--muted); letter-spacing:.2px; margin-top:2px; }
    #pricing .plan-total{ font-size:12.5px; color:var(--text); opacity:.85; margin-top:2px; }
    #pricing .plan-perday{ font-size:11.5px; color:var(--muted); }
    /* ---- "Click to buy" — the bottom CTA on every plan card ----
       A real <a> straight to Telegram (built in 09-pricing.js). This is the
       whole checkout, so it's the loudest thing in the card: a solid lime pill
       with a sheen that sweeps across on hover and an arrow that leans in.
       The slot's auto margin bottom-aligns the buttons across cards of
       different heights (bonus row, savings row) so they sit on one line.
       Colours are baked, not themed: the pill is a fixed bright lime in BOTH
       themes, so its near-black label always has contrast to sit on. */
    #pricing .plan-buy-slot{ margin-top:auto; padding-top:16px; display:flex; }
    #pricing .plan-buy{
      position:relative; overflow:hidden; isolation:isolate; flex:1;
      display:inline-flex; align-items:center; justify-content:center; gap:9px;
      padding:13px 18px; border-radius:14px; text-decoration:none; white-space:nowrap;
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
      font-size:14.5px; font-weight:800; letter-spacing:.2px; color:#0a0b10;
      background:linear-gradient(135deg, #d8fb69 0%, #c6f24e 48%, #a9dd35 100%);
      box-shadow:0 12px 26px -16px rgba(198,242,78,.95), 0 1px 0 rgba(255,255,255,.45) inset;
      transition:transform .28s cubic-bezier(.2,.9,.25,1.4), box-shadow .3s ease, filter .2s ease;
    }
    #pricing .plan-buy-txt, #pricing .plan-buy-arrow{ position:relative; z-index:1; }
    #pricing .plan-buy-arrow{
      font-size:16px; line-height:1;
      transition:transform .35s cubic-bezier(.2,.85,.25,1.3);
    }
    /* sheen: parked off the left edge, swept across when the card is hovered */
    #pricing .plan-buy-sheen{
      position:absolute; inset:0; z-index:0; pointer-events:none;
      background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.8) 50%, transparent 64%);
      background-size:250% 100%; background-position:-150% 0;
      transition:background-position .9s cubic-bezier(.3,.7,.25,1);
    }
    #pricing .plan-card:hover .plan-buy-sheen,
    #pricing .plan-buy:focus-visible .plan-buy-sheen{ background-position:250% 0; }
    #pricing .plan-card:hover .plan-buy-arrow{ transform:translateX(5px); }
    #pricing .plan-card:hover .plan-buy{
      box-shadow:0 20px 36px -16px rgba(198,242,78,1), 0 1px 0 rgba(255,255,255,.55) inset;
    }
    #pricing .plan-buy:hover{ transform:translateY(-2px); filter:brightness(1.05); }
    #pricing .plan-buy:active{ transform:translateY(0) scale(.985); }
    #pricing .plan-buy:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
    /* the hero card keeps the lime pill (violet + white would drop under 4.5:1)
       but gains a violet halo and a slow drifting shimmer so it still leads */
    #pricing .plan-card--best .plan-buy{
      background:linear-gradient(120deg, #d8fb69, #c6f24e, #eaffb4, #c6f24e, #d8fb69);
      background-size:280% 100%; animation:planBuyFlow 7s ease-in-out infinite;
      box-shadow:0 14px 30px -16px rgba(139,109,255,.95), 0 0 0 1px rgba(255,255,255,.28) inset;
    }
    #pricing .plan-card--best:hover .plan-buy{
      box-shadow:0 22px 40px -16px rgba(139,109,255,1), 0 0 0 1px rgba(255,255,255,.4) inset;
    }
    @keyframes planBuyFlow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
    [data-theme="light"] #pricing .plan-card{ background:linear-gradient(180deg,#fff,#f7f8fb); border-color:rgba(20,30,50,.1); }
    [data-theme="light"] #pricing .plan-card--best{
      background:linear-gradient(180deg,#fff,#faf9ff) padding-box, linear-gradient(135deg,var(--lime),var(--violet)) border-box;
    }
    [data-theme="light"] #pricing .plan-save{ color:#fff; }
    @media (prefers-reduced-motion: reduce){
      #pricing .plan-card, #pricing .plan-card--best{ animation:none; }
      #pricing .plan-badge::before{ animation:none; }
      #pricing .plan-card:hover{ transform:translateY(-4px); }
    }

    .pricing-payinfo{
      margin:30px auto 0; max-width:600px;
      background:var(--glass); border:1px solid var(--glass-line);
      border-radius:18px; padding:24px 26px;
    }
    .pricing-payinfo h4{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-size:18px;
      margin-bottom:14px; display:flex; align-items:center; gap:8px;
    }
    .pay-card-box{
      display:flex; align-items:center; gap:14px;
      background:rgba(0,0,0,.25); border:1px solid var(--glass-line); border-radius:14px;
      padding:14px 18px; margin-bottom:10px;
    }
    .pay-card-num{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-size:22px; font-weight:800;
      color:var(--text); letter-spacing:1.5px; flex:1; word-spacing:4px;
    }
    .pay-card-copy{
      background:var(--lime); color:var(--on-lime); border:none;
      padding:8px 14px; border-radius:9px; cursor:pointer;
      font-weight:700; font-size:13px; font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
      transition:filter .15s;
    }
    .pay-card-copy:hover{ filter:brightness(1.06); }
    .pay-card-copy.copied{ background:var(--cyan); }
    .pay-card-holder{ font-size:14px; color:var(--muted); }
    .pay-card-holder b{ color:var(--text); font-weight:700; }

    .pricing-form{
      margin:30px auto 0; max-width:600px;
      background:var(--glass); border:1px solid var(--glass-line);
      border-radius:18px; padding:24px 26px;
    }
    .pricing-form h4{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-size:18px;
      margin-bottom:14px;
    }
    .pricing-form .field{ margin-bottom:14px; }
    .pricing-form label{
      display:block; font-size:12px; font-weight:700; color:var(--muted);
      margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px;
    }
    .pricing-form input, .pricing-form textarea{
      width:100%; padding:12px 14px; border-radius:10px;
      background:rgba(0,0,0,.25); border:1px solid var(--glass-line); color:var(--text);
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif; font-size:15px; outline:none;
    }
    .pricing-form input:focus, .pricing-form textarea:focus{ border-color:var(--lime); }
    .pricing-form textarea{ height:80px; resize:vertical; }
    .pricing-form-receipt{
      display:flex; align-items:center; gap:12px;
      padding:12px 14px;
      background:linear-gradient(135deg, rgba(198,242,78,.06), rgba(78,224,242,.04));
      border:1px dashed var(--glass-line); border-radius:12px;
      cursor:pointer; transition:background .15s;
    }
    .pricing-form-receipt:hover{ background:linear-gradient(135deg, rgba(198,242,78,.12), rgba(78,224,242,.06)); }
    .pricing-form-receipt input[type=file]{ display:none; }
    .pricing-form-receipt-ico{
      width:38px; height:38px; border-radius:10px;
      background:linear-gradient(135deg, var(--lime), var(--cyan));
      display:grid; place-items:center; color:var(--on-lime); font-size:18px;
      flex-shrink:0;
    }
    .pricing-form-receipt-text{ flex:1; }
    .pricing-form-receipt-title{ font-weight:700; font-size:14px; color:var(--text); }
    .pricing-form-receipt-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

    .pricing-submit{
      width:100%; padding:14px 18px; border-radius:12px; border:none;
      background:linear-gradient(135deg, var(--lime), #a4d324);
      color:var(--on-lime); font-weight:800; font-size:15px;
      cursor:pointer; font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
      transition:filter .15s, transform .1s, box-shadow .2s;
      box-shadow:0 8px 20px -8px rgba(198,242,78,.5);
    }
    .pricing-submit:hover{ filter:brightness(1.08); box-shadow:0 14px 30px -8px rgba(198,242,78,.6); }
    .pricing-submit:active{ transform:translateY(1px); }
    .pricing-submit:disabled{ opacity:.5; cursor:not-allowed; }

    .pricing-login-cta{
      margin:30px auto; max-width:520px; padding:24px;
      background:var(--glass); border:1px dashed var(--glass-line);
      border-radius:16px; text-align:center; color:var(--muted);
    }
    .pricing-success{
      margin:30px auto; max-width:600px; padding:22px 26px;
      background:linear-gradient(160deg, rgba(110,231,183,.12), rgba(78,224,242,.06));
      border:1px solid rgba(110,231,183,.35); border-radius:16px;
    }
    .pricing-success h4{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-size:18px; color:#6ee7b7;
      margin-bottom:8px; display:flex; align-items:center; gap:8px;
    }
    .pricing-success p{ color:var(--muted); font-size:14.5px; line-height:1.6; }

    /* `.my-requests` / `.my-req-*` lived here for the student's own list of
       submitted payment requests. Self-serve requests were removed (2026-07-22,
       see 09-pricing.js) and the markup went with them, so the rules had nothing
       left to match. */

    /* ============================================================
       PRICING — "mind-blowing" urgency + FX layer
       countdown banner · cursor spotlight · rising embers ·
       flowing aurora border · confetti-on-select · select pop
       ============================================================ */
    @property --pang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

    /* ---- live urgency banner ---- */
    #pricing .pricing-urgency{
      display:inline-flex; align-items:center; gap:10px; margin:24px auto 6px; position:relative; overflow:hidden;
      padding:10px 18px; border-radius:999px; font-weight:800; font-size:14px; color:var(--text);
      background:linear-gradient(135deg, rgba(251,113,133,.16), rgba(251,191,36,.14));
      border:1px solid rgba(251,113,133,.42);
      box-shadow:0 10px 32px -14px rgba(251,113,133,.6);
    }
    #pricing .pricing-urgency .pu-pulse{ position:absolute; inset:0; border-radius:inherit; pointer-events:none;
      box-shadow:0 0 0 0 rgba(251,113,133,.45); animation:puPulse 2.2s ease-out infinite; }
    #pricing .pricing-urgency .pu-flame{ font-size:16px; animation:puFlame 1.4s ease-in-out infinite; transform-origin:center bottom; }
    #pricing .pricing-urgency .pu-text{ color:var(--muted); font-weight:700; }
    #pricing .pricing-urgency .pu-clock{
      font-family:'JetBrains Mono', 'SF Mono', 'Menlo', 'Native Emoji', monospace; font-weight:800; font-size:16px; color:#fb7185;
      letter-spacing:1px; font-variant-numeric:tabular-nums; background:rgba(251,113,133,.16); padding:3px 10px; border-radius:8px;
    }
    #pricing .pricing-urgency .pu-rise{ color:var(--muted); font-weight:600; font-size:12px; }
    #pricing .pricing-urgency.pu-final{ border-color:#fb7185; }
    #pricing .pricing-urgency.pu-final .pu-clock{ animation:puBlink 1s step-end infinite; }
    #pricing .pricing-proof{ color:var(--muted); font-size:13px; margin:8px 0 0; }
    #pricing .pricing-proof b{ color:var(--lime); font-weight:800; font-variant-numeric:tabular-nums; }
    @keyframes puFlame{ 0%,100%{ transform:scale(1) rotate(-5deg); } 50%{ transform:scale(1.2) rotate(5deg); } }
    @keyframes puPulse{ 0%{ box-shadow:0 0 0 0 rgba(251,113,133,.45); } 100%{ box-shadow:0 0 0 16px rgba(251,113,133,0); } }
    @keyframes puBlink{ 50%{ opacity:.35; } }

    /* ---- cursor-follow spotlight (per card) ---- */
    #pricing .plan-glow{
      position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; opacity:0;
      background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(198,242,78,.18), transparent 60%);
      transition:opacity .35s ease;
    }
    #pricing .plan-card.lit .plan-glow{ opacity:1; }
    #pricing .plan-card--best .plan-glow{ background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%), rgba(139,109,255,.26), transparent 60%); }

    /* ---- rising embers on the Best Value card ---- */
    #pricing .plan-embers{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; border-radius:inherit; }
    #pricing .plan-embers i{ position:absolute; bottom:-10px; width:5px; height:5px; border-radius:50%;
      background:radial-gradient(circle, var(--lime), rgba(198,242,78,0)); opacity:0; animation:emberRise 3.4s ease-in infinite; }
    #pricing .plan-embers i:nth-child(1){ left:14%; animation-delay:0s;   animation-duration:3.2s; }
    #pricing .plan-embers i:nth-child(2){ left:30%; animation-delay:.9s;  background:radial-gradient(circle,var(--violet),transparent); animation-duration:3.9s; }
    #pricing .plan-embers i:nth-child(3){ left:46%; animation-delay:1.7s; animation-duration:3.0s; }
    #pricing .plan-embers i:nth-child(4){ left:60%; animation-delay:.4s;  background:radial-gradient(circle,#fbbf24,transparent); animation-duration:4.2s; }
    #pricing .plan-embers i:nth-child(5){ left:74%; animation-delay:2.2s; background:radial-gradient(circle,var(--violet),transparent); animation-duration:3.5s; }
    #pricing .plan-embers i:nth-child(6){ left:86%; animation-delay:1.2s; animation-duration:3.8s; }
    #pricing .plan-embers i:nth-child(7){ left:22%; animation-delay:2.7s; background:radial-gradient(circle,#fbbf24,transparent); animation-duration:3.3s; }
    @keyframes emberRise{ 0%{ transform:translateY(0) scale(.5); opacity:0; } 14%{ opacity:.95; } 100%{ transform:translateY(-230px) scale(1.15); opacity:0; } }

    /* ---- Best Value card: flowing aurora border ---- */
    #pricing .plan-card--best{
      border:1.5px solid transparent;
      background:linear-gradient(180deg, rgba(30,28,46,.92), rgba(18,16,28,.95)) padding-box,
                 conic-gradient(from var(--pang), var(--lime), var(--violet), var(--cyan), var(--lime)) border-box;
      animation:planIn .6s cubic-bezier(.16,1,.3,1) backwards, pangSpin 6s linear infinite, planBestGlow 3.4s ease-in-out 1s infinite;
    }
    @keyframes pangSpin{ to{ --pang:360deg; } }
    [data-theme="light"] #pricing .plan-card--best{
      background:linear-gradient(180deg,#fff,#faf9ff) padding-box,
                 conic-gradient(from var(--pang), var(--lime), var(--violet), var(--cyan), var(--lime)) border-box;
    }

    /* ---- select "pop" ---- */
    #pricing .plan-card.plan-pop{ animation:planPop .45s cubic-bezier(.2,.9,.3,1.2); }
    @keyframes planPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.05); } 100%{ transform:scale(1); } }
    #pricing .plan-card--best.plan-pop{ animation:planPopBest .45s cubic-bezier(.2,.9,.3,1.2); }
    @keyframes planPopBest{ 0%{ transform:translateY(-6px) scale(1.03);} 40%{ transform:translateY(-10px) scale(1.08);} 100%{ transform:translateY(-6px) scale(1.03);} }

    /* ---- confetti ---- */
    .confetti-layer{ position:fixed; z-index:9999; pointer-events:none; }
    .confetti-layer i{ position:absolute; left:0; top:0; width:9px; height:9px; border-radius:2px;
      animation:confettiFly .95s cubic-bezier(.2,.7,.3,1) forwards; }
    @keyframes confettiFly{
      0%{ transform:translate(0,0) rotate(0); opacity:1; }
      100%{ transform:translate(var(--dx), calc(var(--dy) + 130px)) rotate(var(--rot)); opacity:0; }
    }

    @media (prefers-reduced-motion: reduce){
      #pricing .pricing-urgency .pu-flame, #pricing .pricing-urgency .pu-pulse,
      #pricing .pricing-urgency.pu-final .pu-clock,
      #pricing .plan-embers i, #pricing .plan-card.plan-pop, #pricing .plan-card--best.plan-pop{ animation:none; }
      #pricing .plan-card--best{ animation:planBestGlow 3.4s ease-in-out 1s infinite; }
      .confetti-layer{ display:none; }
    }

    /* ============================================================
       PRICING — checkout note
       Replaces the old "Last step — checkout on Telegram" panel (a big blue
       card with a flying-plane badge). The plan cards ARE the checkout now:
       pressing a price opens Telegram directly, so a second call-to-action
       below them only added a step and competed with the buttons. What's
       left is one quiet reassurance line plus the @handle as a fallback.
       ============================================================ */
    #pricing .pricing-note{ margin:36px auto 0; max-width:640px; text-align:center; }
    #pricing .pricing-note-txt{
      margin:0; color:var(--muted); font-size:13.5px; line-height:1.75;
    }
    /* the emoji font eats the space that follows the glyph in flow text */
    #pricing .pricing-note-emo{ font-family:'Native Emoji', sans-serif; margin-right:7px; }
    #pricing .pricing-note-handle{
      display:inline-flex; align-items:center; gap:9px; margin-top:14px;
      padding:9px 16px; border-radius:999px; cursor:pointer;
      font:inherit; font-size:13px; color:var(--text);
      background:var(--glass); border:1px solid var(--glass-line);
      transition:border-color .25s ease, background .25s ease,
                 transform .25s cubic-bezier(.2,.9,.25,1.4), box-shadow .25s ease;
    }
    #pricing .pricing-note-handle:hover{
      transform:translateY(-2px); border-color:rgba(198,242,78,.55);
      background:rgba(198,242,78,.10); box-shadow:0 12px 26px -18px rgba(198,242,78,.9);
    }
    #pricing .pricing-note-handle:active{ transform:translateY(0); }
    #pricing .pricing-note-handle:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
    #pricing .pricing-note-lbl{ color:var(--muted); }
    #pricing .pricing-note-handle b{ color:var(--lime); font-weight:800; letter-spacing:.2px; }
    #pricing .pricing-note-copy{
      font-size:11px; color:var(--muted); letter-spacing:.4px; text-transform:uppercase;
      border-left:1px solid var(--glass-line); padding-left:10px;
    }

/* The best-value card is emphasised with `scale(1.03)`, which pushes it OUTSIDE
   the page gutter every other card respects — 5.3px closer to each screen edge
   at 375, and 7.2px past its own container at 1024. Once the grid is a single
   column there is nothing to stand out from, so drop the scale and keep the
   lift; the gradient border and glow still carry the emphasis. */
@media (max-width:900px){
  #pricing .plan-card--best{ transform:translateY(-6px); }
  #pricing .plan-card--best:hover{ transform:translateY(-10px); }
  @keyframes planPopBest{ 0%{ transform:translateY(-6px);} 40%{ transform:translateY(-10px);} 100%{ transform:translateY(-6px);} }
}

/* Once the grid is one column a plan card is as wide as the page, so the buy
   button can afford to be a proper full-width tap target — 48px+ tall, which
   is the phone floor. It's also the only thing a thumb should ever need to
   hit here, so give it room to breathe under the price. */
@media (max-width:560px){
  #pricing .plan-buy{ padding:15px 20px; font-size:15.5px; border-radius:15px; }
  #pricing .plan-buy-slot{ padding-top:18px; }
  #pricing .pricing-note{ margin-top:28px; }
  #pricing .pricing-note-txt{ font-size:13px; }
  #pricing .pricing-note-handle{ flex-wrap:wrap; justify-content:center; max-width:100%; }
}

/* The lime pill's flowing shimmer and the sheen sweep are pure decoration —
   the label and the arrow carry the meaning on their own. */
@media (prefers-reduced-motion: reduce){
  #pricing .plan-card--best .plan-buy{ animation:none; }
  #pricing .plan-buy-sheen{ display:none; }
  #pricing .plan-buy, #pricing .plan-buy-arrow{ transition:none; }
}