/* Pricing handoff v1: native, localized UI using the approved self-hosted UI type. */
.plans-page { --pricing-ease: cubic-bezier(.2,.8,.2,1); }
.plans-page .pricing-intro { padding-block: clamp(32px,5vw,64px) 28px; }
.plans-page .pricing-title { max-width: 1050px; margin-inline: auto; font-size: clamp(2rem,4.6vw,4.25rem); line-height: 1.1; letter-spacing: -.025em; }
.pricing-love { display: block; color: #bc185e; }
.plans-page .pricing-tagline { margin-block: 16px 0; color: #556c9d; font-size: clamp(1.1rem,2vw,1.55rem); }
.plans-page .pricing-section { padding-block: 36px 12px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; max-width: 1320px; margin-inline: auto; align-items: stretch; }
.pricing-card { --accent: #1299fd; --button-top: #0876c6; --button-bottom: #025ca4; position: relative; min-width: 0; display: flex; flex-direction: column; padding: 36px 28px 24px; border: 1px solid color-mix(in srgb,var(--accent) 32%,white); border-radius: 32px; color: #02276b; background: linear-gradient(165deg,color-mix(in srgb,var(--accent) 10%,white),white 38%); box-shadow: 0 24px 52px rgb(2 39 107 / .10),0 6px 16px rgb(2 39 107 / .05),inset 0 2px 0 #fff; transition: transform 260ms var(--pricing-ease),box-shadow 260ms var(--pricing-ease); }
.pricing-pink { --accent: #f84a94; --button-top: #c51e67; --button-bottom: #a91351; }
.pricing-gold { --accent: #ffb51d; --button-top: #ffd660; --button-bottom: #ffb51d; }
.pricing-popular { transform: translateY(-8px); box-shadow: 0 28px 62px rgb(248 74 148 / .18),0 8px 20px rgb(2 39 107 / .08),inset 0 2px 0 #fff; }
.pricing-badge { position: absolute; inset-block-start: 0; inset-inline: 16px; width: fit-content; max-width: calc(100% - 32px); margin-inline: auto; transform: translateY(-50%); padding: 8px 22px; border-radius: 999px; background: linear-gradient(#ca236c,#ad1250); color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.3; text-align: center; box-shadow: 0 9px 20px rgb(248 74 148 / .24),inset 0 1px 0 rgb(255 255 255 / .5); }
.pricing-card-heading { display: flex; gap: 14px; align-items: center; min-height: 134px; }
.pricing-profile-art { flex: 0 0 76px; width: 76px; height: 76px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 25%,#fff,color-mix(in srgb,var(--accent) 20%,white)); box-shadow: inset 0 2px 0 #fff,0 6px 14px color-mix(in srgb,var(--accent) 14%,transparent); }
.pricing-profile-art svg { width: 42px; height: 42px; fill: none; stroke: #02276b; stroke-width: 2; flex-shrink: 0; }
.pricing-profile-art svg + svg { margin-inline-start: -24px; }
.pricing-gold .pricing-profile-art svg { width: 34px; }
.plans-page .pricing-card h2 { color: #02276b; margin: 0 0 6px; font-size: clamp(1.4rem,2vw,1.85rem); line-height: 1.15; overflow-wrap: anywhere; }
.plans-page .pricing-description { color: #344e7b; margin: 0; font-size: 1rem; line-height: 1.45; }
.plans-page .pricing-price { color: #02276b; margin: 18px 0 26px; text-align: center; }
.pricing-price bdi { display: block; font-weight: 850; font-size: clamp(2.8rem,4.2vw,4rem); line-height: 1.05; letter-spacing: -.045em; }
.pricing-price span { display: block; margin-top: 8px; font-size: 1rem; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; font-size: 1rem; line-height: 1.45; }
.pricing-features li { position: relative; padding-inline-start: 31px; }
.pricing-features li::before { content: '✓'; position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 23px; height: 23px; display: grid; place-items: center; font-weight: 900; color: #02276b; background: color-mix(in srgb,var(--accent) 22%,white); border-radius: 50%; }
:is(.plans-page, .shop-page) .pricing-cta { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: 64px; margin-top: auto; padding: 16px 20px; display: grid; grid-template-columns: 22px 1fr 20px; gap: 12px; align-items: center; border: 1px solid rgb(255 255 255 / .6); border-radius: 22px; color: #fff; background: linear-gradient(180deg,var(--button-top),var(--button-bottom)); box-shadow: 0 12px 22px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 2px 0 rgb(255 255 255 / .42),inset 0 -4px 7px rgb(2 39 107 / .17); font: inherit; font-size: 1.1rem; font-weight: 850; line-height: 1.25; cursor: pointer; transition: transform 220ms var(--pricing-ease),box-shadow 220ms var(--pricing-ease); }
:is(.plans-page, .shop-page) .pricing-gold .pricing-cta { color: #02276b; }
.pricing-cta svg { width: 22px; height: 22px; }
.pricing-cta::after { content: ''; position: absolute; pointer-events: none; inset-block: -40%; inset-inline-start: -40%; width: 30%; background: linear-gradient(90deg,transparent,rgb(255 255 255 / .3),transparent); opacity: 0; transform: translateX(0) skewX(-20deg); }
.pricing-arrow { transition: transform 220ms var(--pricing-ease); }
[dir='rtl'] .pricing-arrow { rotate: 180deg; }
.pricing-cta:focus-visible { outline: 3px solid #6631cf; outline-offset: 5px; }
.pricing-cta:focus-visible::after { animation: pricing-sheen 560ms ease-out 1; }
@media (hover: hover) and (pointer: fine) {
  .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px color-mix(in srgb,var(--accent) 18%,transparent),0 8px 22px rgb(2 39 107 / .09); }
  .pricing-popular:hover { transform: translateY(-12px); }
  :is(.plans-page, .shop-page) .pricing-cta:hover { transform: translateY(-3px); box-shadow: 0 18px 28px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 2px 0 rgb(255 255 255 / .6),inset 0 -4px 7px rgb(2 39 107 / .17); }
  .pricing-cta:hover::after { animation: pricing-sheen 560ms ease-out 1; }
  .pricing-cta:hover .pricing-arrow { transform: translateX(4px); }
}
:is(.plans-page, .shop-page) .pricing-cta:active { transform: translateY(1px); box-shadow: 0 5px 10px color-mix(in srgb,var(--accent) 25%,transparent),inset 0 3px 7px rgb(2 39 107 / .2); }
.plans-page .pricing-microcopy { margin: 15px 0 0; text-align: center; color: #344e7b; font-size: .88rem; line-height: 1.4; }
.pricing-release { width: fit-content; max-width: 100%; margin: 34px auto 0; padding: 10px 18px; border: 1px solid #e4dcf7; border-radius: 999px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; background: #f5f2fc; color: #344e7b; font-size: .88rem; text-align: center; }
.pricing-release strong { color: #6631cf; }
.plans-page .pricing-status { min-height: 3em; max-width: 760px; margin: 16px auto 0; text-align: center; color: #02276b; font-size: 1rem; line-height: 1.5; }
@keyframes pricing-sheen { 0% { opacity: 0; transform: translateX(0) skewX(-20deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(620%) skewX(-20deg); } }
@media (max-width: 1020px) {
  .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 40px; }
  .pricing-gold { grid-column: 1 / -1; max-width: 440px; width: 100%; justify-self: center; }
  .pricing-card { padding-inline: 22px; }
  .pricing-card-heading { flex-direction: column; text-align: center; min-height: 186px; }
}
@media (max-width: 680px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 40px; max-width: 460px; }
  .pricing-card,.pricing-card:hover,.pricing-popular:hover { transform: none; }
  .pricing-gold { grid-column: auto; max-width: none; }
  .pricing-card-heading { flex-direction: row; text-align: start; min-height: 112px; }
  .pricing-release { border-radius: 18px; }
}
@media /* reunite-system-theme:dark */ not all {
  .pricing-love { color: #fa81b5; }
  .plans-page .pricing-tagline { color: #d9e9fc; }
  .plans-page .pricing-status { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-card,.pricing-cta,.pricing-arrow { transition: none !important; }
  .pricing-card,.pricing-card:hover,.pricing-popular:hover,:is(.plans-page, .shop-page) .pricing-cta:hover,:is(.plans-page, .shop-page) .pricing-cta:active,.pricing-cta:hover .pricing-arrow { transform: none; }
  .pricing-cta::after { display: none; animation: none !important; }
}


/* Tactile bonus-button behavior: a quiet ready light, then one release pop. */
.pricing-cta-wrap { position: relative; isolation: isolate; margin-top: auto; width: 100%; }
:is(.plans-page, .shop-page) .pricing-cta-wrap .pricing-cta { margin-top: 0; color: #02276b; border: 1px solid rgb(255 255 255 / .9); background: linear-gradient(180deg,rgb(255 255 255 / .76) 0%,rgb(255 255 255 / .32) 46%,rgb(255 255 255 / .06) 49%,rgb(255 255 255 / .38) 100%),linear-gradient(125deg,color-mix(in srgb,var(--accent) 38%,transparent),color-mix(in srgb,var(--accent) 68%,transparent)); box-shadow: 0 3px 0 color-mix(in srgb,var(--accent) 55%,transparent),0 12px 22px -8px color-mix(in srgb,var(--accent) 42%,transparent),inset 0 2px 0 rgb(255 255 255 / .95),inset 0 -1px 0 rgb(255 255 255 / .65),inset 0 12px 18px -12px #fff; text-shadow: 0 1px 0 rgb(255 255 255 / .45); }
.pricing-cta-wrap::before { content: ''; position: absolute; pointer-events: none; inset: -2px; border-radius: 25px; z-index: -1; box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 55%,white),0 0 16px 2px color-mix(in srgb,var(--accent) 48%,transparent); opacity: .18; animation: pricing-ready 5.6s ease-in-out infinite; }
.pricing-pink .pricing-cta-wrap::before { animation-delay: -.8s; }
.pricing-gold .pricing-cta-wrap::before { animation-delay: -1.6s; }
.pricing-cta-wrap .pricing-cta::after { animation: pricing-ready-sheen 6.8s ease-in-out infinite; }
.pricing-cta-wrap::after { content: ''; position: absolute; pointer-events: none; inset: -22px -16px; border-radius: 32px; opacity: 0; background: radial-gradient(circle at 5% 30%,#fff 0 1px,var(--accent) 2px 3px,transparent 4px),radial-gradient(circle at 20% 9%,#fff 0 1px,var(--accent) 2px 3px,transparent 4px),radial-gradient(circle at 74% 8%,#fff 0 1px,var(--accent) 2px 3px,transparent 4px),radial-gradient(circle at 95% 30%,#fff 0 1px,var(--accent) 2px 3px,transparent 4px),radial-gradient(circle at 12% 83%,#fff 0 1px,var(--accent) 2px 3px,transparent 4px),radial-gradient(circle at 38% 94%,#fff 0 1px,var(--accent) 2px 3px,transparent 4px),radial-gradient(circle at 70% 91%,#fff 0 1px,var(--accent) 2px 3px,transparent 4px),radial-gradient(circle at 92% 78%,#fff 0 1px,var(--accent) 2px 3px,transparent 4px); }
@media (hover: hover) and (pointer: fine) {
  .pricing-cta-wrap:hover::before { animation: none; opacity: .8; }
  .pricing-cta-wrap .pricing-cta:hover::after { animation: pricing-sheen 560ms ease-out 1; }
}
.pricing-cta-wrap:focus-within::before { opacity: .8; }
:is(.plans-page, .shop-page) .pricing-cta-wrap .pricing-cta:active { transform: translateY(3px) scale(.97); box-shadow: 0 1px 0 color-mix(in srgb,var(--accent) 65%,white),0 4px 8px -3px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 3px 6px rgb(2 39 107 / .12); transition-duration: 70ms; }
.pricing-cta-wrap.is-popping .pricing-cta { animation: pricing-pop 440ms ease-out 1; }
.pricing-cta-wrap.is-popping::before { animation: pricing-release-ring 480ms ease-out 1; }
.pricing-cta-wrap.is-popping::after { animation: pricing-sparks 480ms ease-out 1; }
.pricing-cta-wrap.is-popping .pricing-cta::after { animation: pricing-sheen 440ms ease-out 1; }
@keyframes pricing-ready { 0%,65%,100% { opacity: .18; } 82% { opacity: .7; } }
@keyframes pricing-ready-sheen { 0%,72% { opacity: 0; transform: translateX(0) skewX(-20deg); } 77% { opacity: .55; } 94%,100% { opacity: 0; transform: translateX(620%) skewX(-20deg); } }
@keyframes pricing-pop { 0% { transform: translateY(3px) scale(.97); } 42% { transform: translateY(-3px) scale(1.025); } 72% { transform: translateY(1px) scale(.995); } 100% { transform: translateY(0) scale(1); } }
@keyframes pricing-release-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.09,1.35); } }
@keyframes pricing-sparks { 0% { opacity: 0; transform: scale(.86,.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1,1.35); } }
@media (prefers-reduced-motion: reduce) {
  .pricing-cta-wrap::before { animation: none !important; opacity: .25; transform: none !important; }
  .pricing-cta-wrap::after,.pricing-cta-wrap .pricing-cta::after { display: none; animation: none !important; }
  :is(.plans-page, .shop-page) .pricing-cta-wrap .pricing-cta,:is(.plans-page, .shop-page) .pricing-cta-wrap .pricing-cta:active { animation: none !important; transform: none !important; transition: none !important; }
}
.plan-promo { display: grid; gap: 6px; width: min(100%, 320px); margin: 16px auto; font-weight: 700; }
.plan-promo input { min-height: 42px; padding: 9px 12px; border: 1px solid #8294aa; border-radius: 9px; font: inherit; }


.plan-code-box {max-width:420px;margin:0 auto 18px;padding:0;text-align:start;scroll-margin-top:100px;font-size:.875rem;color:#425c74;}
.plan-code-box summary {width:fit-content;margin:auto;padding:10px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.plan-code-box summary:focus-visible {outline:2px solid #274e73;outline-offset:3px;border-radius:4px;}
.plan-code-controls {display:flex;gap:8px;align-items:center;margin-top:8px;}
.plan-code-box .plan-promo {flex:1;min-width:0;width:auto;margin:0;}
.plan-code-caption {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.plan-code-box button {flex-shrink:0;min-height:44px;padding:8px 12px;border-radius:8px;border:1px solid #8294aa;background:transparent;color:#274e73;font:inherit;font-weight:600;cursor:pointer;}
.plan-code-box a {display:inline-block;padding:8px 0;color:#274e73;font-weight:600;text-underline-offset:3px;}
.plan-code-box [hidden]{display:none!important;}
.plan-code-box input{width:100%;box-sizing:border-box;font-weight:400;}
.plan-code-box p{line-height:1.5;overflow-wrap:anywhere;margin:8px 0 0;}
.plan-code-box p:empty,.plans-page .pricing-status:empty{display:none;}
.pricing-status:not(:empty){padding:16px;border:1px solid #89aac3;border-radius:12px;scroll-margin-top:110px;}