/* Pricing detail page uses the landing's public layout around its detailed components. */
html{scroll-padding-top:calc(var(--header) + 25px)}
main em{color:var(--violet)}
.pricing-surface{padding-bottom:56px}
.hero{padding-top:76px;padding-bottom:36px}
.hero h1{font-size:52px;line-height:1.15}
.hero .lede{font-family:Poppins,sans-serif;font-size:13px}
.pricing-sections{display:flex;gap:28px;align-items:center;padding:0 0 21px;margin-bottom:28px;border-bottom:1px solid var(--line);font:12px/1.7 Poppins,sans-serif}
.pricing-sections a{padding:8px 0;color:var(--muted)}
.pricing-sections a:hover{color:var(--violet)}
.section-heading h2,.faq-section h2{font-size:48px;line-height:1.15;letter-spacing:-2px}
.section-heading>p,.comparison-intro,.comparison-notes{font-family:Arial,Helvetica,sans-serif}
.closing-section .closing-inner h2{margin-top:20px}
.closing-section .closing-inner>.button{width:auto;display:inline-flex}
.site-header .icon-button svg{width:22px;height:22px}
@media(max-width:1150px){.wrap{width:calc(100% - 72px)}.section-heading h2,.faq-section h2{font-size:42px}}
@media(max-width:850px){.hero{padding-top:56px}.hero h1{font-size:46px}.section-heading h2,.faq-section h2{font-size:38px}}
@media(max-width:650px){.wrap{width:calc(100% - 40px)}.hero{padding:47px 0 30px}.hero h1{font-size:39px}.hero .lede{font-size:12px}.pricing-sections{gap:8px 20px;flex-wrap:wrap;font-size:11px;margin-bottom:24px;padding-bottom:16px}.section-heading h2,.faq-section h2{font-size:36px;letter-spacing:-1.6px}.pricing-surface{padding-bottom:40px}.closing-section .closing-inner>.button{width:auto}}
@media(max-width:360px){.hero h1{font-size:35px}.pricing-sections{gap:6px 16px}}

.release-proposal{font:13px/1.7 Arial,Helvetica,sans-serif;padding:16px 18px;margin:20px auto 28px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
/* Keep the production account header and pricing controls usable on small screens. */
.site-header .sign-link{font-size:11px;white-space:nowrap;padding-block:12px}
@media(max-width:650px){
 .site-header .nav-actions>.sign-link{display:none}
 .site-header .nav-shell{gap:8px}
 .site-header .brand{min-width:0;overflow-wrap:anywhere}
 .site-header .brand span{min-width:0;overflow-wrap:anywhere}
 .team-builder,.builder-controls,.team-total,.addon,.coming-section{min-width:0}
 .team-builder{grid-template-columns:minmax(0,1fr)}
 .quantity{display:flex;flex-wrap:wrap;gap:8px}
 .stepper{max-width:100%}
 .presets{display:flex;flex-wrap:wrap}
 .addon-row{flex-wrap:wrap}
 .addon-price{text-align:left;max-width:100%;white-space:normal}
}
@media(max-width:650px){
 .site-header .brand{flex-shrink:1}
 .site-header .nav-actions{flex-shrink:0}
 .coming-section{grid-template-columns:minmax(0,1fr)}
 .coming-intro,.coming-item,.section-heading>div,.faq-section>div{min-width:0}
 h1,h2,h3,h4,p,a,em{overflow-wrap:anywhere}
 .footer-bottom nav{flex-wrap:wrap;justify-content:flex-start}
}
@media(max-width:650px){.site-footer .brand{max-width:100%;min-width:0;flex-shrink:1}.site-footer .brand span{min-width:0;overflow-wrap:anywhere}}

html:not(.js) .billing-control,html:not(.js) #theme-toggle,html:not(.js) #menu-toggle,html:not(.js) .presets,html:not(.js) .stepper button{display:none!important}
@media(max-width:850px){html:not(.js) #mobile-nav{display:flex!important;flex-wrap:wrap;gap:12px;padding:16px 24px}}