/* Pricing page motion is opt-in and scoped to the pricing template. */
.pricing-motion-ready .pricing-reveal {
  opacity: 0;
  transform: translate3d(0, 1.15rem, 0);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--pricing-reveal-delay, 0ms);
}

.pricing-motion-ready .pricing-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.pricing-motion-ready .pricing-reveal-card {
  opacity: 0;
  filter: blur(3px);
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), filter 650ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pricing-motion-ready .pricing-reveal-card.is-visible {
  opacity: 1;
  filter: none;
}

.pricing-motion-ready .web-hero-person {
  animation: pricing-person-float 8s ease-in-out 900ms infinite;
}

.pricing-page .extra-panel {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
}

.pricing-page .extra-panel:hover,
.pricing-page .extra-panel:focus-within {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.8rem 1.5rem rgba(17, 17, 17, 0.09);
}

@keyframes pricing-person-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-0.45rem); }
}

@media (min-width: 781px) {
  .pricing-page .web-hero {
    min-height: min(54rem, calc(100svh - 1rem));
    padding-top: clamp(5rem, 8vh, 6.75rem);
    padding-bottom: clamp(1rem, 3vh, 2.5rem);
    overflow: clip;
  }

  .pricing-page .web-hero h1 {
    max-width: 48rem;
    font-size: clamp(3rem, min(5.8vw, 8vh), 5.6rem);
    line-height: 0.91;
  }

  .pricing-page .web-hero p:not(.eyebrow) {
    max-width: 39rem;
    font-size: clamp(0.9rem, 1.05vw, 1.04rem);
    line-height: 1.48;
  }

  .pricing-page .web-hero-showcase {
    min-height: clamp(30rem, calc(100svh - 8.5rem), 43rem);
  }
}

@media (min-width: 781px) and (max-width: 1080px) {
  .pricing-page .web-hero-plan {
    width: clamp(9rem, 15vw, 11rem);
    padding: 0.8rem;
  }

  .pricing-page .web-hero-plan-business {
    width: clamp(10rem, 17vw, 12rem);
  }

  .pricing-page .web-hero-plan-price strong {
    font-size: clamp(2.2rem, 4vw, 2.8rem);
  }

  .pricing-page .web-hero-plan li {
    font-size: 0.52rem;
  }
}

@media (min-width: 781px) and (max-height: 760px) {
  .pricing-page .web-hero {
    gap: 1.5rem;
    padding-top: 4.65rem;
    padding-bottom: 0.75rem;
  }

  .pricing-page .web-hero h1 {
    font-size: clamp(2.75rem, min(5.3vw, 7.4vh), 4.75rem);
  }

  .pricing-page .web-hero p:not(.eyebrow) {
    font-size: 0.88rem;
    line-height: 1.4;
  }
}

@media (max-width: 780px) {
  .pricing-page .web-hero {
    overflow: clip;
    padding-top: clamp(6rem, 15vw, 7.5rem);
    padding-bottom: clamp(2rem, 6vw, 3.5rem);
  }

  .pricing-page .web-hero h1 {
    font-size: clamp(2.65rem, 11.5vw, 4.1rem);
    line-height: 0.93;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-motion-ready .pricing-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  .pricing-motion-ready .pricing-reveal-card {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .pricing-motion-ready .web-hero-person {
    transform: translateX(-50%) !important;
  }
}

/* Keep the pricing composition inside short desktop viewports. */
@media (min-width: 781px) {
  .pricing-page .web-hero { min-height: min(54rem, calc(100svh - 5.5rem)); }
  .pricing-page .web-hero-showcase { min-height: clamp(29rem, calc(100svh - 12.5rem), 40rem); }
  .pricing-page .web-hero-person { bottom: 0; width: min(32rem, 90%); filter: drop-shadow(0 8px 8px rgba(17, 17, 17, 0.12)); }
  .pricing-page .web-hero-plan { width: clamp(9.5rem, 10vw, 11rem); padding: .65rem; }
  .pricing-page .web-hero-plan-business { width: clamp(10.5rem, 11.5vw, 12rem); padding: .7rem; }
  .pricing-page .web-hero-plan-heading { grid-template-columns: 2rem minmax(0, 1fr); gap: .6rem; }
  .pricing-page .web-hero-plan-icon { width: 2rem; height: 2rem; }
  .pricing-page .web-hero-plan h2 { font-size: .78rem; }
  .pricing-page .web-hero-plan-heading p,
  .pricing-page .web-hero .web-hero-plan-heading p:not(.eyebrow) { font-size: .54rem; }
  .pricing-page .web-hero-plan-price { margin-top: .8rem; padding-bottom: .72rem; gap: 0; }
  .pricing-page .web-hero-plan-price strong { font-size: clamp(2.1rem, 3.1vw, 3.1rem); }
  .pricing-page .web-hero-plan ul { gap: .4rem; margin-block: .72rem; }
  .pricing-page .web-hero-plan li { font-size: .54rem; }
  .pricing-page .web-hero-plan > a { min-height: 2.1rem; font-size: .58rem; }
}

@media (min-width: 781px) and (max-width: 1080px) {
  .pricing-page .web-hero-person { width: min(28rem, 94%); }
  .pricing-page .web-hero-plan { width: clamp(7.8rem, 10vw, 9rem); padding: .55rem; }
  .pricing-page .web-hero-plan-business { width: clamp(8.8rem, 11vw, 10rem); padding: .6rem; }
  .pricing-page .web-hero-plan-price strong { font-size: clamp(1.9rem, 3.6vw, 2.45rem); }
  .pricing-page .web-hero-plan li { font-size: .48rem; }
}

/* Match the app carousel's tighter section rhythm without changing card or
   text dimensions. This file is loaded on the WordPress pricing template
   after the theme stylesheet, so the scoped spacing wins cleanly. */
@media (min-width: 621px) {
  .pricing-page .pricing-section {
    padding-top: clamp(2.75rem, 4vw, 4rem);
    padding-bottom: clamp(1.25rem, 2vw, 2rem);
  }

  .pricing-page section.pricing-section .pricing-hint {
    margin-top: clamp(.75rem, 1.5vw, 1.25rem);
  }

  .pricing-page section.pricing-section .pricing-stage {
    margin-top: clamp(-5rem, -4vw, -2rem);
  }
}

/* Lightweight isometric pricing scene. The same CSS primitive geometry is
   used by the app and the export so the WordPress upload keeps visual parity. */
.pricing-page .web-hero-showcase::before { display: none; }
.pricing-scene { --scene-front:#f4f4f2; --scene-top:#fff; --scene-side:#c6c7c5; --scene-ink:#111; position:relative; width:100%; min-height:clamp(31rem,67vh,42rem); overflow:visible; isolation:isolate; perspective:1100px; }
.pricing-scene-mark { position:absolute; top:8%; left:50%; z-index:-4; color:rgba(17,17,17,.035); font-family:Georgia,"Times New Roman",serif; font-size:clamp(12rem,24vw,22rem); font-weight:700; letter-spacing:-.18em; line-height:.7; transform:translateX(-50%); user-select:none; }
.pricing-scene-light { position:absolute; top:4%; right:10%; width:40%; height:40%; z-index:-3; border-radius:50%; background:rgba(255,255,255,.72); filter:blur(28px); pointer-events:none; }
.pricing-scene-grid { position:absolute; z-index:-2; height:1px; background:rgba(17,17,17,.12); transform-origin:left center; pointer-events:none; }
.pricing-scene-grid-a { top:31%; left:8%; width:24%; transform:rotate(-14deg); }
.pricing-scene-grid-b { top:28%; right:4%; width:18%; transform:rotate(12deg); }
.pricing-scene-platform,.pricing-scene-platform-edge { position:absolute; right:3%; left:3%; transform:skewY(-7deg) rotateX(52deg); transform-origin:center bottom; pointer-events:none; }
.pricing-scene-platform { bottom:13%; height:36%; z-index:-1; border:1px solid #d0d0ce; background:#e8e8e6; box-shadow:0 2.5rem 2rem rgba(17,17,17,.12); }
.pricing-scene-platform-edge { bottom:8%; height:11%; z-index:-2; border:1px solid #bfc0be; background:#cfd0ce; box-shadow:0 1rem 1rem rgba(17,17,17,.1); }
.pricing-scene-cards { position:absolute; inset:7% 2% 18% 2%; z-index:1; transform-style:preserve-3d; }
.pricing-scene-card { --card-height:48%; --card-width:21%; --card-rotate:0deg; --card-delay:80ms; position:absolute; bottom:0; left:var(--card-left); display:block; width:var(--card-width); height:var(--card-height); color:var(--scene-ink); text-decoration:none; transform:translateY(1.5rem) rotateZ(var(--card-rotate)); transform-origin:center bottom; transform-style:preserve-3d; animation:pricing-scene-rise 780ms var(--card-delay) both cubic-bezier(.22,1,.36,1); transition:transform 360ms cubic-bezier(.22,1,.36,1),filter 360ms ease; }
.pricing-scene-card:hover,.pricing-scene-card:focus-visible { z-index:4; filter:brightness(1.03); transform:translateY(-.45rem) rotateZ(var(--card-rotate)) scale(1.035); }
.pricing-scene-card:focus-visible { outline:3px solid var(--scene-ink); outline-offset:5px; }
.pricing-scene-card-face { position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; padding:clamp(.6rem,1.2vw,1rem); overflow:hidden; border:1px solid #d1d1cf; border-radius:3px; background:var(--scene-front); box-shadow:inset -.7rem 0 1.1rem rgba(17,17,17,.04),0 1rem 1.5rem rgba(17,17,17,.12); }
.pricing-scene-card-top,.pricing-scene-card-side { position:absolute; display:block; pointer-events:none; }
.pricing-scene-card-top { top:-.8rem; right:.8rem; left:-.15rem; height:.8rem; border:1px solid #d0d0ce; background:var(--scene-top); transform:skewX(-42deg); transform-origin:left bottom; }
.pricing-scene-card-side { top:-.8rem; right:-.8rem; width:.8rem; height:calc(100% + .8rem); border:1px solid #bfc0be; background:var(--scene-side); transform:skewY(-42deg); transform-origin:left top; }
.pricing-scene-card-name { max-width:100%; font-family:Georgia,"Times New Roman",serif; font-size:clamp(.5rem,.92vw,.82rem); font-weight:700; letter-spacing:.015em; line-height:1.05; text-transform:uppercase; }
.pricing-scene-card-face strong { margin-top:auto; font-size:clamp(1.6rem,3.4vw,3.3rem); font-weight:760; letter-spacing:-.07em; line-height:.85; }
.pricing-scene-card-detail { margin-top:.55rem; color:#6e6e6c; font-size:clamp(.42rem,.7vw,.62rem); letter-spacing:.02em; line-height:1.2; }
.pricing-scene-card-badge { margin-top:.55rem; padding:.22rem .38rem; border:1px solid currentColor; border-radius:999px; font-size:clamp(.37rem,.62vw,.52rem); font-weight:800; letter-spacing:.12em; line-height:1; text-transform:uppercase; }
.pricing-scene-mini { --card-left:3%; --card-height:44%; --card-rotate:-4deg; --card-delay:80ms; }
.pricing-scene-landing { --card-left:27%; --card-height:58%; --card-rotate:-2deg; --card-delay:150ms; }
.pricing-scene-starter { --card-left:51%; --card-height:72%; --card-rotate:2deg; --card-delay:220ms; --scene-front:#111; --scene-top:#242424; --scene-side:#050505; color:#fff; }
.pricing-scene-starter .pricing-scene-card-face { border-color:#111; box-shadow:inset -.7rem 0 1.1rem rgba(255,255,255,.08),0 1rem 1.6rem rgba(17,17,17,.24); }
.pricing-scene-starter .pricing-scene-card-top,.pricing-scene-starter .pricing-scene-card-side { border-color:#111; }
.pricing-scene-starter .pricing-scene-card-detail { color:#c3c3c3; }
.pricing-scene-business { --card-left:75%; --card-height:90%; --card-rotate:4deg; --card-delay:290ms; }
.pricing-scene-caption { position:absolute; right:3%; bottom:3%; color:#737371; font-size:clamp(.48rem,.78vw,.68rem); font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
@keyframes pricing-scene-rise { from { opacity:0; transform:translateY(1.5rem) rotateZ(calc(var(--card-rotate) - 3deg)); } 68% { opacity:1; transform:translateY(-.12rem) rotateZ(calc(var(--card-rotate) + 1deg)); } to { opacity:1; transform:translateY(0) rotateZ(var(--card-rotate)); } }
@media (max-width:780px) {
  .pricing-scene { min-height:28rem; }
  .pricing-scene-cards { inset:9% 1% 19% 1%; }
  .pricing-scene-card { --card-width:23%; }
  .pricing-scene-mini { --card-left:1%; }
  .pricing-scene-landing { --card-left:25%; }
  .pricing-scene-starter { --card-left:49%; }
  .pricing-scene-business { --card-left:73%; }
  .pricing-scene-card-face { padding:.48rem; }
  .pricing-scene-card-face strong { font-size:clamp(1.3rem,8vw,2.25rem); }
  .pricing-scene-card-detail { max-width:9ch; margin-top:.35rem; font-size:.4rem; }
  .pricing-scene-caption { right:1%; bottom:1.5%; font-size:.43rem; letter-spacing:.1em; }
}
@media (prefers-reduced-motion:reduce) {
  .pricing-scene-card { animation:none; transform:rotateZ(var(--card-rotate)); transition-duration:.01ms; }
  .pricing-scene-card:hover,.pricing-scene-card:focus-visible { transform:rotateZ(var(--card-rotate)); }
}