.subscription-hero { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: var(--space-8); align-items: center; padding-block: var(--space-5) var(--space-8); }
.subscription-intro { padding-block: var(--space-5); }
.subscription-eyebrow { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--font-body); }
.subscription-intro h1 { margin: var(--space-5) 0; font-size: clamp(var(--font-3xl),4vw,var(--font-display)); line-height: 1.08; letter-spacing: -.05em; font-weight: 600; }
.subscription-lead { margin: 0 0 var(--space-6); font-size: var(--font-lead); line-height: 1.6; color: var(--muted); }
.subscription-text-link { display: inline-flex; align-items: center; gap: var(--space-2); text-underline-offset: var(--space-1); }
.subscription-plan { background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-card); padding: var(--space-6); }
.subscription-trial { display: inline-flex; background: var(--accent); color: var(--color-ink); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--font-label); }
.subscription-plan h2 { margin: var(--space-5) 0 var(--space-4); font-size: var(--font-xl); font-weight: 550; }
.subscription-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); font-size: var(--font-display); line-height: 1.1; letter-spacing: -.05em; font-weight: 600; }
.subscription-price span { font-size: var(--font-body); font-weight: 400; letter-spacing: normal; color: var(--muted); }
.subscription-renewal { margin: var(--space-3) 0 var(--space-5); font-size: var(--font-md); }
.subscription-plan-list { display: grid; gap: var(--space-3); border-top: var(--border-width) solid var(--line); padding: var(--space-5) 0 0; margin: 0 0 var(--space-5); list-style: none; font-size: var(--font-body); line-height: 1.5; }
.subscription-plan-list li { display: flex; gap: var(--space-3); }
.subscription-plan-list li::before { content: '✓'; color: var(--muted); }
.subscription-plan-note { margin: var(--space-3) 0 0; font-size: var(--font-sm); line-height: 1.6; color: var(--muted); }
.subscription-section { border-top: var(--border-width) solid var(--line); padding-block: var(--space-8); scroll-margin-top: var(--space-5); }
.subscription-section h2 { margin: 0 0 var(--space-4); font-size: clamp(var(--font-2xl),3vw,var(--font-4xl)); line-height: 1.2; letter-spacing: -.04em; font-weight: 550; }
.subscription-section-intro > p:last-child { margin: 0; font-size: var(--font-md); line-height: 1.7; color: var(--muted); }
.subscription-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.subscription-benefits article { min-width: 0; }
.subscription-feature-card { padding: var(--space-5); overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-card); }
.subscription-audience { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin: 0; background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-control); color: var(--muted); font-size: var(--font-label); }
.subscription-audience > span { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--accent); }
.subscription-scope { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); font-size: var(--font-sm); color: var(--muted); }
.subscription-extras { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6); padding-bottom: var(--space-7); }
.subscription-extras article { display: flex; gap: var(--space-4); align-items: flex-start; }
.subscription-extras article > svg { margin-top: var(--space-1); }
.subscription-extras h3 { margin: 0 0 var(--space-2); font-size: var(--font-md); font-weight: 550; }
.subscription-extras p { margin: 0; font-size: var(--font-body); line-height: 1.7; color: var(--muted); }
.subscription-section h3 { margin: 0 0 var(--space-3); font-size: var(--font-lg); font-weight: 550; line-height: 1.4; }
.subscription-benefits p, .subscription-steps p { margin: 0; font-size: var(--font-body); color: var(--muted); line-height: 1.8; }
.subscription-connect { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-6) var(--space-8); }
.subscription-steps { counter-reset: steps; display: grid; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.subscription-steps li { position: relative; padding-inline-start: var(--space-7); counter-increment: steps; }
.subscription-steps li::before { content: '0' counter(steps); position: absolute; inset-inline-start: 0; top: var(--space-1); font-size: var(--font-label); color: var(--muted); }
.subscription-connect-action { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-5); background: var(--surface); border-radius: var(--radius-card); }
.subscription-connect-action strong { font-size: var(--font-md); font-weight: 550; }
.subscription-connect-action p { margin: var(--space-2) 0 0; font-size: var(--font-body); color: var(--muted); line-height: 1.6; }
.subscription-faq h2 { margin-bottom: var(--space-5); }
.subscription-faq details { border-bottom: var(--border-width) solid var(--line); padding-block: var(--space-5); }
.subscription-faq summary { display: flex; align-items: center; gap: var(--space-4); list-style: none; cursor: pointer; font-size: var(--font-md); line-height: 1.5; }
.subscription-faq summary::-webkit-details-marker { display: none; }
.subscription-faq p { margin: var(--space-4) 0 0; font-size: var(--font-body); line-height: 1.8; color: var(--muted); }
.subscription-feature-icon { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); margin-bottom: var(--space-5); background: var(--surface); color: var(--text); border: var(--border-width) solid var(--line); border-radius: var(--radius-card); }
.subscription-feature-icon svg { width: var(--space-6); height: var(--space-6); }
@media (max-width:1050px) { .subscription-hero { gap: var(--space-6); grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .subscription-benefits { grid-template-columns: minmax(0,1fr); } }
@media (max-width:680px) { .subscription-hero, .subscription-connect, .subscription-benefits, .subscription-extras { grid-template-columns: minmax(0,1fr); } .subscription-hero { gap: var(--space-5); padding-block: 0 var(--space-7); } .subscription-plan { padding: var(--space-5); } .subscription-intro { padding-block: var(--space-4); } .subscription-section { padding-block: var(--space-7); } .subscription-benefits { margin-top: var(--space-6); } }