/* Subscription-first landing page. */
.landing-nav{display:flex;justify-content:center;gap:12px;padding:24px 0 12px}
.landing-nav a{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:48px;padding:13px 20px;border:1px solid #434343;border-radius:14px;background:linear-gradient(140deg,#232323,#151515);color:#e5e5e5;font-size:14px;font-weight:700;transition:background .2s,border-color .2s,color .2s,transform .2s}
.landing-nav a span{color:#dddddd;font-size:17px}
.landing-nav a:hover{background:#2f2f2f;border-color:#9c9c9c;color:#ededed;transform:translateY(-2px)}
#landing>.plans{padding-top:28px;padding-bottom:56px;scroll-margin-top:24px}
#landing>.hero{padding-top:12px;padding-bottom:44px}
.hero-frame{border:0}
.hero-bottom{border-top:0}
@media(max-width:700px){.landing-nav{gap:8px;padding-top:16px;padding-bottom:8px}.landing-nav a{flex:1;gap:8px;padding:11px 10px;justify-content:center;border-radius:11px;font-size:12px}.landing-nav a span{font-size:14px}#landing>.plans{padding-top:24px;padding-bottom:32px}#landing>.hero{padding-bottom:24px}}
@media(prefers-reduced-motion:reduce){.landing-nav a{transition:none}.landing-nav a:hover{transform:none}}

/* Align navigation with the subscription heading and use the viewport width. */
#landing>.plans{max-width:none;width:calc(100% - 40px)}
#plans>.section-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px}
#plans>.section-head>.eyebrow{justify-self:end;text-align:right}
#plans .landing-nav{width:auto;max-width:none;margin:0;padding:0}
#plans .plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:1100px){#plans>.section-head{grid-template-columns:auto minmax(0,1fr)}#plans>.section-head>.eyebrow{display:none}}
@media(max-width:700px){#landing>.plans{width:calc(100% - 32px)}#plans>.section-head{grid-template-columns:1fr;gap:20px}#plans .landing-nav{width:100%;justify-content:flex-start}#plans .plan-grid{grid-template-columns:1fr;gap:18px}}

#plans .landing-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#plans .landing-nav a{min-width:0;justify-content:space-between;gap:10px}
@media(max-width:900px){#plans>.section-head{grid-template-columns:1fr}#plans .landing-nav{width:100%}}

/* Full-width rectangular navigation and subscription labels below the cards. */
#plans>.section-head{display:block}
#plans .landing-nav{width:100%;gap:24px}
#plans .landing-nav a{border-radius:0;min-height:54px;padding:15px 24px}
.plans-caption{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:32px}
.plans-caption h2{font-size:42px;letter-spacing:-1.7px;font-weight:600;margin:0}
.plans-caption>.eyebrow{color:#afafaf;text-align:right}
.header .account-toggle,.header #account-link{border-radius:0}
@media(max-width:700px){#plans .landing-nav{gap:8px}#plans .landing-nav a{padding:12px 10px;min-height:48px}.plans-caption{align-items:flex-start;gap:12px;margin-top:24px}.plans-caption h2{font-size:26px}.plans-caption>.eyebrow{font-size:10px;letter-spacing:1px;max-width:115px;line-height:1.7}}
