/* Homepage plans, matched to the pricing page's cards. The billing pill, the rolling figures and the line under
   each price come from pricing-motion.css, which both pages load; this file dresses the homepage's own card
   markup (site-base.css lays it out on a shared subgrid) in the same surfaces, type and states. */
.pricing-billing-switch.home-pricing-period{display:flex;width:max-content;margin:28px auto 0}
.work-pricing-heading>p.home-pricing-note{font-size:12px;line-height:1.6;color:#999;margin:16px auto 0}
.home-pricing-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Cards: #171717 on the section, #262626 rules, 12px corners, flat. The lift uses the translate property, not
   transform, because the scroll reveal in motion.js animates transform on these cards. */
.work-plan{position:relative;isolation:isolate;border-color:var(--interactive-border,#262626);border-radius:12px;transition:translate 250ms var(--ease-out),border-color 250ms var(--ease-out)}
.work-plan::after{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:radial-gradient(440px circle at var(--mx,50%) var(--my,0px),#ffffff0f,transparent 65%);opacity:0;transition:opacity 250ms var(--ease-out);pointer-events:none}
@media(hover:hover){.work-plan:hover{translate:0 -2px;border-color:var(--interactive-border-hover,#363636)}.work-plan:hover::after{opacity:1}.work-plan[data-featured]:hover{border-color:#5c5c5c}}
.work-plan[data-featured]{background:radial-gradient(130% 46% at 50% 0,#ffffff14,transparent 70%),var(--surface-elevated,#1f1f1f);border-color:#3d3d3d}
.work-plan[data-featured]::before{content:'';position:absolute;top:-1px;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent,#ffffff99,transparent);pointer-events:none}
.work-plan .work-plan-heading{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.work-plan h3{font-size:24px;line-height:1.3;letter-spacing:-.035em;font-weight:500}
.work-plan-badge{padding:5px 10px;border-radius:999px;background:#ffffff0f;color:#c4c4c4;white-space:nowrap;font-size:12px;font-weight:500;line-height:1.2}
.work-plan[data-featured] .work-plan-badge{background:var(--primary-base,#fff);color:var(--primary-foreground,#000)}
.work-plan .work-plan-description{color:var(--surface-muted-foreground,#9e9e9e)!important}
.work-plan .work-plan-price{margin:0;min-height:58px;white-space:nowrap}
.work-plan .work-plan-price>span:first-child{font-size:48px;line-height:1.2;letter-spacing:-.045em}
.work-plan .work-plan-billing{font-size:14px;line-height:1.5;color:var(--surface-muted-foreground,#9e9e9e)}
.work-plan[data-featured] .work-plan-details{border-color:#333}

/* Design-system buttons: 40px, 10px squircle corners, 14px/500 label, 8px icon gap. Pro carries the primary fill. */
.work-plan .home-plan-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;box-sizing:border-box;padding:0 16px;border:1px solid var(--tint-border);border-radius:10px;corner-shape:squircle;background:color-mix(in srgb,var(--primary-base,#fff) 8%,transparent);color:var(--surface-foreground,#fff);font:500 14px/1 'Eshlon Sans',sans-serif;letter-spacing:.01em;text-decoration:none;transition:background-color 150ms ease,border-color 150ms ease}
.work-plan .home-plan-button:hover{background:var(--tint-hover)}
.work-plan .home-plan-button:active{background:var(--interactive-active)}
.work-plan .home-plan-button .icon{width:16px;height:16px;transition:transform 240ms var(--ease-out)}
.work-plan .home-plan-button:hover .icon{transform:translateX(3px)}
.work-plan .home-plan-button:focus-visible{outline:2px solid var(--interactive-border-focus,#8a8a8a);outline-offset:3px}
.work-plan .home-plan-button-light{color:var(--primary-foreground,#000);background:var(--primary-base,#fff);border-color:var(--primary-base,#fff)}
.work-plan .home-plan-button-light:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.work-plan .home-plan-button-light:active{background:var(--primary-active);border-color:var(--primary-active)}
@supports(corner-shape:squircle){.work-plan .home-plan-button{border-radius:50px}}

.work-plan-details h4{min-height:44px}
.work-plan .work-plan-details li{color:#c4c4c4}
.work-plan .work-plan-details li svg{color:#8a8a8a}
.work-plan-details li:has(.work-plan-highlight){color:var(--surface-foreground,#fff);font-weight:500}
.work-plan-details li:has(.work-plan-highlight) svg{color:var(--surface-foreground,#fff)}
@media(max-width:760px){.work-plan-details h4{min-height:0}.work-pricing-heading>p.home-pricing-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){.work-plan,.work-plan::after,.work-plan .home-plan-button,.work-plan .home-plan-button .icon{transition:none}.work-plan:hover{translate:none}.work-plan .home-plan-button:hover .icon{transform:none}}