/* Pricing project comparison; shared by the generated language pages. */
.pricing-intro { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:4rem; align-items:center; margin-bottom:3rem; }
.pricing-lead { color:#b8b8b8; line-height:1.8; max-width:40rem; }
.pricing-proof { display:block; border:1px solid #ffffff24; padding:.65rem; background:#1e1e1e; border-radius:1rem; }
.pricing-proof img { width:100%; height:auto; border-radius:.5rem; }
.pricing-proof > span { display:flex; justify-content:space-between; gap:1rem; padding:.8rem .4rem .25rem; color:#b8b8b8; font-size:.8rem; }
.pricing-proof:hover > span { color:#97c21f; }
.pricing-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.pricing-option { display:flex; flex-direction:column; border:1px solid #ffffff24; border-radius:1rem; overflow:hidden; background:#0a0a0b; }
.pricing-option--recommended { border-color:#97c21f; background:linear-gradient(130deg,#97c21f12,#0a0a0b 65%); }
.pricing-recommendation,.pricing-category { margin:0; padding:.85rem 2rem; font-size:.75rem; font-weight:700; letter-spacing:.08em; }
.pricing-recommendation { background:#97c21f; color:#0a0a0b; }
.pricing-category { color:#b8b8b8; border-bottom:1px solid #ffffff24; }
.pricing-option-body { display:flex; flex:1; flex-direction:column; padding:2rem; }
.pricing-kicker { color:#97c21f; font-size:.8rem; font-weight:600; margin-bottom:.8rem; }
.pricing-title { color:#f4f4f2; font-size:clamp(1.5rem,2.3vw,2.1rem); font-weight:700; line-height:1.2; min-height:2.4em; margin-bottom:2rem; text-wrap:balance; }
.pricing-price { color:#f4f4f2; font-size:clamp(1.7rem,3.2vw,3rem); font-weight:700; line-height:1.15; letter-spacing:-.04em; white-space:nowrap; }
.pricing-unit { color:#b8b8b8; font-size:.8rem; margin:.65rem 0 1.75rem; }
.pricing-description { color:#b8b8b8; line-height:1.75; min-height:5.25em; margin-bottom:1.5rem; }
.pricing-option ul { margin-bottom:2rem; color:#b8b8b8; }
.pricing-cta { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:auto; padding:1rem 1.2rem; background:#97c21f; color:#0a0a0b; border:1px solid #97c21f; border-radius:.4rem; font-size:.9rem; font-weight:700; transition:background .2s,color .2s; }
.pricing-cta--secondary { background:transparent; color:#97c21f; }
.pricing-cta:hover { background:#acd936; color:#0a0a0b; }
.pricing-cta:active { transform:translateY(1px); }
.pricing-cta:focus-visible,.pricing-proof:focus-visible { outline:3px solid #97c21f; outline-offset:5px; }
.pricing-note { color:#b8b8b8; font-size:.8rem; line-height:1.7; margin:1.5rem 0 0; }
@media(max-width:767px) { .pricing-intro { grid-template-columns:1fr; gap:1.5rem; } .pricing-proof { max-width:28rem; } .pricing-options { grid-template-columns:1fr; } .pricing-title,.pricing-description { min-height:0; } .pricing-option-body { padding:1.5rem; } .pricing-recommendation,.pricing-category { padding:.85rem 1.5rem; } .pricing-price { font-size:clamp(1.6rem,6.7vw,2.8rem); } }
@media(prefers-reduced-motion:reduce) { .pricing-cta { transition:none; } }
@media(max-width:479px) { .pricing-intro h2 { font-size:1.65rem; hyphens:none; } }
/* Static links remain available without JavaScript. */
.pricing-gallery { min-width:0; position:relative; }
.pricing-gallery-stage { display:grid; gap:1rem; }
.pricing-gallery .pricing-proof { max-width:none; }
.pricing-gallery .pricing-proof img { aspect-ratio:1.65; object-fit:cover; object-position:top; }
.pricing-gallery.is-enhanced .pricing-gallery-stage { position:relative; display:grid; perspective:1000px; }
.pricing-gallery.is-enhanced .pricing-proof { grid-area:1/1; opacity:0; transform:translateX(1.5rem) rotateY(-5deg) scale(.96); pointer-events:none; transition:opacity .65s ease,transform .65s ease; }
.pricing-gallery.is-enhanced .pricing-proof.is-active { opacity:1; transform:translateX(0) rotateY(0) scale(1); pointer-events:auto; z-index:1; }
.pricing-gallery-controls:not([hidden]) { display:flex; align-items:center; gap:.5rem; margin-top:1rem; }
.pricing-gallery-count { margin-right:auto; color:#97c21f; font-size:.8rem; font-variant-numeric:tabular-nums; letter-spacing:.15em; }
.pricing-gallery-controls button { min-width:44px; min-height:44px; padding:.5rem .8rem; border:1px solid #97c21f70; border-radius:.35rem; color:#97c21f; font-size:.8rem; }
.pricing-gallery-controls button:hover,.pricing-gallery-controls button[aria-pressed="true"] { background:#97c21f; color:#0a0a0b; }
.pricing-gallery-controls button:focus-visible { outline:2px solid #97c21f; outline-offset:4px; }
@media(prefers-reduced-motion:reduce) { .pricing-gallery.is-enhanced .pricing-proof { transition:none; transform:none; } }
/* Hero motion graphic: one short sequence, with an optional replay. */
.pricing-hero-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:2.5rem; align-items:center; }
.pricing-hero-copy { min-width:0; }
.pricing-hero-copy h1 { font-size:clamp(2.5rem,4.4vw,4.2rem); }
.pricing-motion { min-width:0; }
.pricing-motion-art { display:block; width:100%; height:auto; overflow:visible; }
.pricing-motion-caption { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; color:#b8b8b8; font-size:.75rem; padding:0 1rem; }
.pricing-motion-caption p { color:#97c21f; }
.pricing-motion-replay { color:#b8b8b8; min-height:44px; text-decoration:underline; text-underline-offset:4px; }
.pricing-motion-replay:hover { color:#97c21f; }
.pricing-motion-replay:focus-visible { outline:2px solid #97c21f; outline-offset:4px; }
.pricing-motion-art g { transform-box:fill-box; transform-origin:center; }
.pricing-motion.is-playing .motion-browser { animation:motion-build 1s both; }
.pricing-motion.is-playing .motion-content { animation:motion-build .8s .5s both; }
.pricing-motion.is-playing .motion-visual { animation:motion-build 1s .9s both; }
.pricing-motion.is-playing .motion-tiles { animation:motion-build .8s 1.3s both; }
.pricing-motion.is-playing .motion-cursor { animation:motion-pointer 4.6s both; }
.pricing-motion.is-playing .motion-message { animation:motion-build .8s 3s both; }
@keyframes motion-build { from { opacity:0; transform:translateY(22px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes motion-pointer { 0%,35% { opacity:0; transform:translate(110px,80px); } 55% { opacity:1; transform:translate(0,0); } 62% { transform:scale(.85); } 70%,100% { opacity:1; transform:scale(1); } }
@media(max-width:1023px) { .pricing-hero-grid { grid-template-columns:1fr; gap:1.5rem; } .pricing-motion { width:min(100%,30rem); margin-inline:auto; } }
@media(prefers-reduced-motion:reduce) { .pricing-motion.is-playing g { animation:none; } .pricing-motion-replay { display:none; } }