/* ===== Nov 2026: plans, calmer hero with scroll tilt, full-screen mobile menu, animated FAQ ===== */
.button.ghost{background:transparent;color:#fff7fa;border:1px solid #5a2a38}
.button.ghost:hover{background:#2b1019}
.secondary{margin-left:14px}
.nav-cta{display:none}

/* hero: no constant motion any more; the phones start tilted back and straighten as you scroll */
.reticle{animation:none}
.hero .scope,.hero .showcase::before,.hero .phone-stack,.hero-copy{translate:none !important;transition:none}
.showcase{perspective:1600px}
.hero .phone-stack{transform-origin:50% 85%;transform:rotateX(var(--tilt,0deg)) translateY(var(--lift,0px));will-change:transform}

/* plans */
.plans{text-align:center}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px;text-align:left}
.plan{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 24px;border:1px solid var(--line);border-radius:16px;background:#121014}
.plan.main{border-color:var(--red);background:radial-gradient(ellipse at 80% 0,#3d0f1d,transparent 70%),#140f13;box-shadow:0 0 40px #ff28471f}
.plan h3{margin:0}
.plan .price{font-size:2rem;font-weight:800;letter-spacing:-.04em}
.plan .price small{font-size:.9rem;color:var(--muted);font-weight:500;margin-left:4px}
.plan ul{margin:0;padding-left:18px;color:var(--muted);display:grid;gap:6px;flex:1}
.plan .button{text-align:center;border-radius:10px}
.badge{position:absolute;top:-11px;right:18px;background:var(--red);color:#16090d;font:700 .7rem/1 var(--mono);letter-spacing:.08em;padding:6px 9px;border-radius:999px;text-transform:uppercase}
@media(max-width:860px){.plan-grid{grid-template-columns:1fr}}

/* FAQ: smooth open/close (height animated in motion.js) */
.questions details .answer{overflow:hidden}
.questions summary::after{content:"+";font-size:1.3rem;line-height:1;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.questions details[open] summary::after{content:"+";transform:rotate(45deg)}
.questions details{transition:border-color .3s,background .3s}
.questions details[open]{border-color:#5a2a38;background:#17121a}

/* full-screen mobile menu */
@media(max-width:760px){
  /* a blurred header would become the containing block of the fixed menu panel: solid background on phones */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0a080bf2}
  .mobile-menu{position:relative;z-index:60;width:40px;height:40px;display:grid;place-content:center;gap:6px;padding:0}
  .mobile-menu span{display:block;width:24px;height:2px;background:#fff7fa;border-radius:2px;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .25s}
  .mobile-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .mobile-menu[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
  .mobile-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .top nav,.mobile-menu[aria-expanded="true"] + nav{
    display:flex;position:fixed;inset:0;z-index:50;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;
    width:100%;height:100dvh;margin:0;padding:max(90px,env(safe-area-inset-top)) 28px 40px;
    background:radial-gradient(ellipse at 100% 0,#3a0d1b 0,transparent 55%),radial-gradient(ellipse at 0 100%,#2a0a14 0,transparent 60%),#09080af7;
    backdrop-filter:blur(18px);clip-path:circle(0 at calc(100% - 36px) 34px);visibility:hidden;
    transition:clip-path .65s cubic-bezier(.7,0,.2,1),visibility 0s linear .65s}
  .mobile-menu[aria-expanded="true"] + nav{clip-path:circle(150% at calc(100% - 36px) 34px);visibility:visible;transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s}
  .top nav a{font-size:clamp(2rem,10vw,2.8rem);font-weight:800;letter-spacing:-.05em;color:#fff7fa;line-height:1.2;
    opacity:0;transform:translateY(28px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:0s}
  .mobile-menu[aria-expanded="true"] + nav a{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0) * .055s)}
  .top nav a.nav-cta{display:inline-block;font-size:1rem;letter-spacing:0;margin-top:18px;padding:12px 18px;border-radius:10px;background:var(--red);color:#16090d}
  .top nav a.nav-cta.ghost{margin-top:6px;background:transparent;color:#fff7fa;border:1px solid #5a2a38}
  body.menu-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
  .hero .phone-stack{transform:none}
  .top nav,.top nav a,.mobile-menu span{transition:none !important}
}