/* AXVPN comparison cards: centered price hierarchy, native checkout and separate interaction layers. */
/* Outer width comes from the existing .ax-home .ax-container responsive chain. */
.ax-home #axh-plans{padding-top:max(24px,calc(var(--home-space) - 48px));--pricing-secondary:color-mix(in srgb,var(--home-muted) 75%,var(--home-ink))}
.ax-home #axh-plans .ax-home-plans-heading{margin-bottom:20px}
.ax-home #axh-plans .ax-plan-benefits{display:flex;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:10px 28px;margin:0 0 44px;color:var(--home-muted);font-size:14px;line-height:1.5}
.ax-home #axh-plans .ax-plan-benefits>span{display:inline-flex;gap:8px;align-items:baseline}
.ax-home #axh-plans .ax-plan-benefits>span>span{color:var(--home-accent)}
.ax-home #axh-plans .ax-plans{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.ax-home #axh-plans .ax-plan-compact{min-height:326px;padding:24px;display:flex;flex-direction:column;text-align:center;overflow:visible}
/* Explicit child alignment wins over the legacy mobile.css pricing rules. */
.ax-home #axh-plans .ax-plan-compact :is(h3,.ax-price,.ax-monthly,.ax-plan-saving,.ax-plan-badge,.ax-plan-cta){text-align:center}
.ax-home #axh-plans .ax-plan-compact::before{display:none}
.ax-home #axh-plans .ax-plan-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:28px;margin-bottom:14px;flex-wrap:wrap}
.ax-home #axh-plans .ax-plan-compact .ax-plan-badge{position:static;margin:0;min-height:28px;padding:5px 12px;font-size:11px;font-weight:700;line-height:1.4;border-radius:9px;letter-spacing:0;white-space:nowrap}
.ax-home #axh-plans .ax-plan-discount{margin-left:auto;font-size:13px;font-weight:650;line-height:1.4;color:var(--pricing-secondary);font-variant-numeric:tabular-nums}
.ax-home #axh-plans .ax-plan-compact h3{font-size:20px;font-weight:650;line-height:1.3;letter-spacing:-.025em;margin:0 0 16px}
.ax-home #axh-plans .ax-plan-compact .ax-price{font-size:48px;line-height:1.05;margin:0 0 9px;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.ax-home #axh-plans .ax-plan-compact .woocommerce-Price-currencySymbol{font-size:20px;letter-spacing:0;vertical-align:.1em}
.ax-home #axh-plans .ax-plan-compact .ax-monthly{font-size:14px;line-height:1.4;margin:0 0 14px}
.ax-home #axh-plans .ax-plan-saving{font-size:15px;line-height:1.4;color:var(--pricing-secondary);margin:0 0 11px;font-variant-numeric:tabular-nums}
.ax-home #axh-plans .ax-plan-compact form{margin-top:auto;border-top-width:1px;border-top-style:solid;border-top-color:var(--plan-divider);padding-top:12px}
.ax-home #axh-plans .ax-plan-compact.ax-plan-featured{border-color:rgba(215,25,48,.30)}
.ax-home #axh-plans .ax-plan-featured .ax-plan-discount{color:#ff8893}
.ax-home #axh-plans .ax-plan-featured .ax-plan-saving{color:#b9b9c3}
.ax-home #axh-plans .ax-plan-featured .ax-plan-badge{background:rgba(215,25,48,.08);border-color:rgba(255,88,104,.3);color:#ffb4bd}
@media(max-width:1100px){.ax-home #axh-plans .ax-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
.ax-home #axh-plans .ax-plans{grid-template-columns:1fr;gap:14px}
.ax-home #axh-plans .ax-plan-benefits{font-size:14px;gap:8px 18px;margin:0 0 32px}
.ax-home #axh-plans .ax-plan-compact{min-height:0;padding:20px 22px}
.ax-home #axh-plans .ax-plan-meta{min-height:28px;margin-bottom:4px}
.ax-home #axh-plans .ax-plan-meta:empty{display:flex}
.ax-home #axh-plans .ax-plan-compact h3{font-size:21px;margin-bottom:12px}
.ax-home #axh-plans .ax-plan-compact .ax-price{font-size:48px;margin-bottom:6px}
.ax-home #axh-plans .ax-plan-compact .ax-monthly{margin-bottom:10px}
.ax-home #axh-plans .ax-plan-saving{font-size:14px;margin-bottom:5px}
.ax-home #axh-plans .ax-plan-compact form{padding-top:12px}
}
/* 2.20.4: visual polish only; card structure and interaction layers unchanged. */
.ax-home #axh-plans .ax-plan-benefits{font-size:15px;font-weight:600;color:var(--home-ink);column-gap:26px}
.ax-home #axh-plans .ax-plan-compact .ax-price{font-weight:760}
.ax-home #axh-plans .ax-plan-compact .ax-monthly{font-size:16px;font-weight:600;color:var(--home-ink)}
.ax-home #axh-plans .ax-plan-featured .ax-monthly{color:#dfdfe5}
.ax-home #axh-plans .ax-plan-saving{font-weight:400}
.ax-home #axh-plans .ax-plan-compact .ax-plan-badge--popular{color:var(--home-ink);border-color:color-mix(in srgb,var(--home-line) 76%,var(--home-ink));background:var(--home-surface)}
.ax-home #axh-plans .ax-plan-discount{padding-top:3px;padding-right:4px}
@media(min-width:1101px){
.ax-home #axh-plans .ax-plan-compact .ax-price{font-size:52px}
}

/* The section title, common benefits and cards share one left edge at every width. */
.ax-home #axh-plans :is(.ax-home-plans-heading,.ax-plan-benefits){width:100%;margin-left:0}

/* Native mobile carousel. The dots reserve space before JavaScript initializes. */
.ax-home #axh-plans .ax-plan-pagination{display:none}
@media(max-width:600px){
.ax-home #axh-plans .ax-home-plans-heading{margin-bottom:16px}
.ax-home #axh-plans .ax-plans:has(>.ax-plan-compact){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:18px 2px 8px;scrollbar-width:none;min-width:0;max-width:100%}
.ax-home #axh-plans .ax-plans::-webkit-scrollbar{display:none}
.ax-home #axh-plans .ax-plan-compact{scroll-snap-align:start;min-width:0}
.ax-home #axh-plans .ax-plan-pagination{display:flex;justify-content:center;align-items:center;gap:0;margin-top:6px;min-height:44px;visibility:hidden}
.ax-home #axh-plans .ax-plan-pagination.is-ready{visibility:visible}
.ax-home #axh-plans .ax-plan-dot{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;border-radius:12px;cursor:pointer;box-shadow:none}
.ax-home #axh-plans .ax-plan-dot span{display:block;width:6px;height:6px;border-radius:50%;background:var(--home-muted);opacity:.7;transition:opacity .15s ease,background-color .15s ease}
.ax-home #axh-plans .ax-plan-dot[aria-current="true"] span{background:var(--home-accent);opacity:1}
.ax-home #axh-plans .ax-plan-dot:focus-visible{outline:2px solid var(--home-accent);outline-offset:-4px}
.ax-home #axh-plans .ax-plan-benefits{font-size:14px;column-gap:20px}
}
@media(prefers-reduced-motion:reduce){.ax-home #axh-plans .ax-plan-dot span{transition:none}}

/* 2.20.9 material layer: static, token-backed depth underneath existing Spotlight. */
.ax-home #axh-plans .ax-plan-compact{--plan-base:var(--home-card);--plan-light-x:24%;--plan-ambient:rgba(255,255,255,.01);--plan-top-light:rgba(255,255,255,.015);--plan-low-shade:rgba(0,0,0,.02);--plan-divider:rgba(17,17,19,.08);background-color:var(--plan-base);background-image:radial-gradient(ellipse at var(--plan-light-x) 0,var(--plan-ambient),transparent 60%),linear-gradient(135deg,var(--plan-top-light),transparent 48%,var(--plan-low-shade))}
html[data-theme="dark"] .ax-home #axh-plans .ax-plan-compact:not(.ax-plan-featured){--plan-low-shade:rgba(0,0,0,.035);--plan-divider:rgba(245,245,247,.075)}
.ax-home #axh-plans .ax-plan-compact.ax-plan-featured{--plan-base:#16161b;--plan-light-x:90%;--plan-ambient:rgba(215,25,48,.025);--plan-low-shade:rgba(0,0,0,.08);--plan-divider:rgba(255,88,104,.11)}
.ax-home #axh-plans .ax-plan-saving{display:flex;justify-content:center;align-items:center;gap:7px}
.ax-home #axh-plans .ax-plan-saving::before{content:"";flex:0 0 4px;width:4px;height:4px;border-radius:50%;background:var(--home-accent);opacity:.8}
.ax-home #axh-plans .ax-plan-featured .ax-plan-saving::before{background:#ff5868}
.ax-home #axh-plans .ax-plan-compact .ax-plan-badge--featured{position:absolute;top:-14px;left:50%;right:auto;transform:translateX(-50%);z-index:2;min-height:28px;padding:5px 12px;max-width:calc(100% - 28px);font-size:11px;font-weight:700;line-height:1.4;background:#291b21;border:1px solid #a63b4a;border-radius:9px;color:#ffd4db;box-shadow:none;white-space:nowrap}
@media(max-width:600px){
.ax-home #axh-plans .ax-plan-compact{--plan-top-light:rgba(255,255,255,.01);--plan-ambient:rgba(255,255,255,.006)}
.ax-home #axh-plans .ax-plan-compact.ax-plan-featured{--plan-ambient:rgba(215,25,48,.02)}
}
@media(max-width:700px){
 /* Keep the badge on the card axis without moving the discount or changing row height. */
 .ax-home #axh-plans .ax-plan-compact .ax-plan-badge--popular{position:relative;top:0;left:50%;transform:translateX(-50%)}
}

/* The traffic amount comes from Core's rendered plan, including the owner's current limit. */
.ax-home #axh-plans .ax-plan-compact .ax-plan-traffic{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:0 0 12px;color:var(--pricing-secondary);font-size:13px;line-height:1.45}
.ax-home #axh-plans .ax-plan-compact .ax-plan-traffic strong{color:var(--home-ink);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.ax-home #axh-plans .ax-plan-featured .ax-plan-traffic{color:#b9b9c3}
.ax-home #axh-plans .ax-plan-featured .ax-plan-traffic strong{color:#f5f5f7}
@media(max-width:600px){.ax-home #axh-plans .ax-plan-compact .ax-plan-traffic{margin-bottom:10px;flex-wrap:wrap}}