/* Compact, content-sized cards: clear benefit groups without a stretched middle. */
#plans{--plans-edge-space:var(--section-space)}
#plans>.section{padding-block:0 var(--plans-edge-space)}
#plans .plans-screen{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:12px;padding:var(--plans-edge-space) 0 14px;min-height:0}
#plans .plans-heading{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-items:start;padding:0}
#plans .plans-heading>.eyebrow{margin:0;font-size:.75rem;line-height:1.4}
#plans .plans-heading h2{font-size:var(--section-title-size);line-height:1.12;letter-spacing:-.035em;max-width:none;margin:0;text-wrap:pretty}
#plans .plans-heading>p:not(.eyebrow){margin:0;padding-right:280px;font-size:.875rem;line-height:1.45;max-width:none}
#plans .plan-tools{position:absolute;right:0;bottom:0;display:flex;margin:0}
#plans .billing-control{position:static;margin:0;padding:4px}
#plans .billing-control button{min-height:40px;padding:8px 14px;font-size:.875rem;gap:8px}
#plans .billing-control button>span{font-size:.75rem;padding:2px 6px}
#plans .plan-cards{margin:0;gap:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;border:0;padding:0;overflow:visible}
#plans .plan-card,#plans .plan-card:first-child,#plans .plan-card:last-child{display:grid;grid-row:auto;grid-template-rows:auto auto auto auto;align-content:start;gap:10px;padding:18px;min-width:0}
#plans .plan-card-header{display:grid;grid-template-columns:minmax(0,1fr) 88px;grid-template-rows:auto auto;column-gap:10px;row-gap:6px;align-items:center;min-height:96px}
#plans .plan-card-identity{grid-column:1;grid-row:1;min-width:0}
#plans .plan-tag{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:20px;margin:0 0 6px;font-size:.75rem;line-height:1.4;letter-spacing:0;text-transform:none}
#plans .plan-inherits{display:block;font-family:var(--heading);font-size:.875rem;line-height:1.35;font-weight:500;min-height:0;margin:0;color:var(--plan-accent)}
#plans .plan-limit{border:1px solid #d8c0ff55;background:#d8c0ff12;border-radius:4px;padding:1px 5px;color:#e3d2ff;font-size:.75rem;line-height:1.4;white-space:nowrap}
#plans .plan-name{font-size:clamp(1.375rem,1.85vw,1.75rem);line-height:1.1;letter-spacing:-.035em;white-space:normal;overflow-wrap:normal;text-wrap:pretty;margin:0}
#plans .plan-mascot-stage{grid-column:2;grid-row:1 / 3;height:88px;margin:0;align-self:center}
#plans .plan-mascot-viewport{position:relative;width:88px;height:88px;flex:none;overflow:hidden;mix-blend-mode:lighten}
#plans .plan-price-row{grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-height:0;margin:0;align-self:start}
#plans .plan-price-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#plans .plan-price{font-size:clamp(1.875rem,2.5vw,2.5rem);line-height:1.1;margin:0}
#plans .plan-period{font-size:.875rem;line-height:1.4;min-height:0;margin:0;color:#b8c4cd}
#plans .plan-billed{font-size:.75rem;line-height:1.4;margin:0;min-height:0;max-width:none;color:#aebdca}
#plans .plan-billed:empty{display:none}
#plans .plan-card>.button{min-height:44px;padding:10px 16px;font-size:.875rem;line-height:1.4;align-self:start;margin:0}
#plans .plan-contents{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;margin:0;padding:0;border:0}
#plans .plan-benefit-panel{min-width:0;padding:8px 10px;border:1px solid #74859826;border-radius:6px;background:#ffffff03}
#plans .plan-benefit-primary{background:var(--plan-tint);border-color:var(--plan-edge);border-left:3px solid var(--plan-accent);padding-left:8px}
#plans .plan-benefit-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:5px}
#plans .plan-benefit-heading h4{display:flex;align-items:center;gap:6px;margin:0;font-family:var(--heading);font-weight:600;font-size:.9375rem;line-height:1.25;text-wrap:pretty}
#plans .plan-benefit-mark{color:var(--plan-accent);font-family:var(--body);font-size:1rem;font-weight:500;line-height:1}
#plans .plan-features{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:0;padding:0;border:0;list-style:none}
#plans .plan-features li{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:.875rem;line-height:1.35;padding:0;min-width:0;color:#d0dae2}
#plans .plan-features li:before{display:none}
#plans .plan-features li>span{min-width:0}
#plans .plan-value{flex:none;padding:2px 6px;border:1px solid #74859830;border-radius:4px;background:#ffffff06;font-size:.75rem;line-height:1.25;font-family:var(--body);font-weight:500;white-space:nowrap;color:var(--plan-accent)}
#plans .plan-features .plan-value{color:var(--plan-accent);font-weight:500}
#plans .plan-benefit-primary .plan-value{background:#ffffff08;border-color:var(--plan-edge)}
#plans .plan-feature-caption{display:block;margin:0;padding:0;border:0;font-family:var(--heading);font-size:.75rem;line-height:1.45;min-height:0;color:#aebdca}
#plans .plans-footer{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px;align-items:center;border-top:1px solid #344450}
#plans .comparison{margin:0;border:0;border-radius:0;background:none;overflow:visible}
#plans .comparison summary{min-height:40px;padding:8px 0;gap:16px;font-size:.875rem;line-height:1.4;color:#dce7ef}
#plans .comparison[open]{grid-column:1 / -1}
#plans .comparison[open]+.subscription-note{grid-column:1 / -1;padding-bottom:10px}
#plans .subscription-note{margin:0;padding:0;gap:8px;justify-self:end;align-items:center;background:none;border:0}
#plans .subscription-note p{font-size:.75rem;line-height:1.5;max-width:none}
#plans .subscription-note .note-mark{width:18px;height:18px;font-size:11px;border-color:#607583;color:#aebdca}
#plans .plan-mascot-fallback{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
#plans .plan-mascot-cell{position:absolute;inset:0;overflow:hidden;animation:plan-cell-hold 1.12s steps(1,end) infinite;animation-play-state:paused}
#plans [data-plan=start] .plan-mascot-cell{animation-name:plan-walk-align}
#plans [data-plan=geek] .plan-mascot-cell{animation-duration:.96s}
#plans [data-plan=platinum] .plan-mascot-cell{animation-duration:1.28s}
#plans .plan-mascot-frames{position:absolute;inset:0 auto auto 0;width:400%;height:200%;max-width:none;image-rendering:pixelated;visibility:hidden;animation:plan-sprite 1.12s steps(1,end) infinite;animation-play-state:paused}
#plans [data-plan=geek] .plan-mascot-frames{animation-duration:.96s}
#plans [data-plan=platinum] .plan-mascot-frames{animation-duration:1.28s}
#plans .plan-mascot-viewport.is-ready .plan-mascot-fallback{visibility:hidden}
#plans .plan-mascot-viewport.is-ready .plan-mascot-frames{visibility:visible}
#plans .plan-mascot-viewport.is-ready.is-in-view .plan-mascot-frames,#plans .plan-mascot-viewport.is-ready.is-in-view .plan-mascot-cell{animation-play-state:running}
#plans.plan-motion-paused .plan-mascot-frames,#plans.plan-motion-paused .plan-mascot-cell{animation-play-state:paused}
@keyframes plan-cell-hold{0%,100%{transform:none}}
@keyframes plan-walk-align{0%,100%{transform:translateY(0)}50%{transform:translateY(7.67%)}}
@keyframes plan-sprite{
 0%,100%{transform:translate(0,0)}
 12.5%{transform:translate(-25%,0)}
 25%{transform:translate(-50%,0)}
 37.5%{transform:translate(-75%,0)}
 50%{transform:translate(0,-50%)}
 62.5%{transform:translate(-25%,-50%)}
 75%{transform:translate(-50%,-50%)}
 87.5%{transform:translate(-75%,-50%)}
}

/* Shared intrinsic rows line up prices, actions and groups; none consumes spare viewport height. */
@media(min-width:901px){
 @supports(grid-template-rows:subgrid){
  #plans .plan-cards{row-gap:0}
  #plans .plan-card,#plans .plan-card:first-child,#plans .plan-card:last-child{grid-row:span 4;grid-template-rows:subgrid}
  #plans .plan-card-header{align-self:start}
 }
}
@media(min-width:901px) and (max-height:800px){
 #plans{--plans-edge-space:48px}
 #plans .plans-screen{gap:8px;padding-bottom:10px}
 #plans .plan-card,#plans .plan-card:first-child,#plans .plan-card:last-child{padding:14px;gap:7px}
 #plans .plan-card-header{grid-template-columns:minmax(0,1fr) 64px;row-gap:4px;min-height:88px}
 #plans .plan-mascot-stage{height:64px}
 #plans .plan-mascot-viewport{width:64px;height:64px}
 #plans .plan-name{font-size:1.5rem}
 #plans .plan-price{font-size:2rem}
 #plans .plan-benefit-panel{padding-top:6px;padding-bottom:6px}
 #plans .plan-benefit-heading{margin-bottom:4px}
 #plans .plan-benefit-heading h4{font-size:.875rem}
 #plans .plan-features{gap:3px}
 #plans .plan-value{padding-block:1px}
}
@media(min-width:901px) and (max-width:1150px){
 #plans .plans-heading{grid-template-columns:minmax(0,1fr) auto}
 #plans .plans-heading>.eyebrow{grid-column:1;grid-row:1;align-self:center}
 #plans .plans-heading h2,#plans .plans-heading>p:not(.eyebrow){grid-column:1 / -1;padding-right:0}
 #plans .plan-tools{position:static;grid-column:2;grid-row:1;justify-self:end}
 #plans .plan-cards{column-gap:12px}
 #plans .plan-card,#plans .plan-card:first-child,#plans .plan-card:last-child{padding:12px}
 #plans .plan-card-header{grid-template-columns:minmax(0,1fr) 56px;column-gap:6px}
 #plans .plan-mascot-stage{height:56px}
 #plans .plan-mascot-viewport{width:56px;height:56px}
 #plans .plan-name{font-size:1.375rem}
 #plans .plan-price{font-size:1.75rem}
 #plans .plan-inherits{font-size:.75rem}
 #plans .plan-benefit-panel{padding-inline:8px}
 #plans .plan-benefit-primary{padding-left:6px}
 #plans .plan-value{padding-inline:4px}
}
@media(min-width:901px) and (max-height:740px){
 #plans .plans-screen{gap:6px}
 #plans .plan-card,#plans .plan-card:first-child,#plans .plan-card:last-child{gap:5px}
 #plans .plan-card-header{min-height:0;row-gap:2px}
 #plans .plan-tag{margin-bottom:4px}
 #plans .plan-name{font-size:1.375rem}
 #plans .plan-price{font-size:1.75rem}
 #plans .plan-benefit-panel{padding-block:4px}
 #plans .comparison summary{min-height:36px;padding-block:6px}
}
@media(max-width:900px){
 #plans .plans-screen{gap:12px;padding-bottom:14px}
 #plans .plans-heading{gap:8px}
 #plans .plans-heading h2{font-size:var(--section-title-size);max-width:none}
 #plans .plans-heading>p:not(.eyebrow){padding-right:0}
 #plans .plan-tools{position:static;justify-self:start;margin-top:2px}
 #plans .plan-cards{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;gap:12px;padding:2px 0 8px}
 #plans .plan-card,#plans .plan-card:first-child,#plans .plan-card:last-child{flex:0 0 min(94%,400px);display:grid;grid-template-rows:auto auto auto auto;padding:16px;gap:10px;scroll-snap-align:start}
 #plans .plan-card-header{grid-template-columns:minmax(0,1fr) 64px;column-gap:8px}
 #plans .plan-name{font-size:1.5rem}
 #plans .plan-mascot-stage{height:64px;margin:0}
 #plans .plan-mascot-viewport{width:64px;height:64px}
 #plans .plan-price{font-size:2rem}
 #plans .plans-footer{grid-template-columns:minmax(0,1fr);gap:4px}
 #plans .subscription-note{justify-self:start}
 #plans .scroll-carousel-controls{margin:0}
}
@media(prefers-reduced-motion:reduce){
 #plans .plan-mascot-frames,#plans .plan-mascot-cell{animation-play-state:paused!important}
}