/* Premium composes the landing page's grid, body type, CTA, FAQ, and footer. */
:root {
  --plan-border: #b5ac9a;
  --sage-surface: #e5ead5;
  --sage-text: #4d5140;
  --resource-surface: #fdfdfb;
  --resource-card-surface: #f4ede7;
}
*, *::before, *::after { box-sizing: border-box; }
body.premium-body { margin: 0; background: var(--paper); color: var(--coffee-900); font-family: var(--body); -webkit-font-smoothing: antialiased; }
.premium-page :is(h1, h2, h3, p, ul, blockquote) { margin-block: 0; }
.premium-page a { color: inherit; }
.premium-page :is(a, button):focus-visible { outline: 2px solid var(--merlot); outline-offset: 5px; }
.premium-hero { padding: 120px 0 var(--marketing-section-padding); background: var(--paper); }
.premium-intro { text-align: center; }
.premium-intro h1, .premium-resources h2 { font: 500 72px/1.2 var(--display); letter-spacing: var(--display-letter-spacing); word-spacing: var(--display-word-spacing); }
.premium-intro p { margin-top: 32px; color: var(--coffee-600); font-size: var(--text-body-size); line-height: var(--text-body-line-height); letter-spacing: var(--text-body-letter-spacing); font-weight: 500; }
.plan-comparison { margin-top: 120px; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.plan-card { display: flex; flex-direction: column; gap: 48px; min-width: 0; padding: 48px; border: 1px solid var(--plan-border); border-radius: 48px; background: var(--paper-muted); }
.plan-heading h2, .premium-resource-card h3 { font: 600 22px/28px var(--body); letter-spacing: -0.264px; }
.plan-heading p { margin-top: 8px; color: var(--coffee-500); font-size: var(--text-body-size); line-height: var(--text-body-line-height); letter-spacing: var(--text-body-letter-spacing); font-weight: 500; }
.plan-price { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.plan-amount { font: 500 48px/1.2 var(--display); letter-spacing: -2px; white-space: nowrap; }
.plan-period { color: var(--coffee-500); font-size: var(--text-body-size); line-height: var(--text-body-line-height); letter-spacing: var(--text-body-letter-spacing); }
.plan-download.download-button { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 64px; margin: 0; border: 0; border-radius: 999px; background: var(--merlot); color: var(--white); text-decoration: none; transition: background-color 200ms ease; }
.plan-download .download-button-icon { width: 28px; height: 28px; flex-basis: 28px; }
.plan-download .download-button-label-mobile { display: none; }
.plan-features { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; font-size: var(--text-body-size); line-height: var(--text-body-line-height); letter-spacing: var(--text-body-letter-spacing); }
.plan-features li { display: flex; align-items: flex-start; gap: 16px; }
.plan-features img { display: block; flex: 0 0 24px; width: 24px; height: 24px; }
.plan-includes { font-weight: 500; }
.premium-page .plan-disclaimer { margin-top: 56px; color: var(--coffee-500); font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line-height) var(--body); letter-spacing: var(--text-body-letter-spacing); text-align: center; }
@media (min-width: 1024px) {
  .plan-grid { row-gap: 48px; }
  .plan-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
}
.premium-testimonial { background: var(--sage-surface); }
.premium-testimonial .testimonial-quote { max-width: 836px; margin: 48px auto 0; color: var(--sage-text); }
.premium-testimonial .testimonial-name { margin-top: 48px; color: var(--sage-text); }
.premium-resources { padding: var(--marketing-section-padding) 0; background: var(--resource-surface); }
.premium-resources h2 { text-align: center; font-size: 70px; }
.premium-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 150px; }
.premium-resource-card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 250px; padding: 40px 48px; background: var(--resource-card-surface); border-radius: 32px; text-decoration: none; transition: background-color 200ms ease; }
.premium-resource-card img { display: block; width: 32px; height: 32px; }
.premium-resource-card h3 { margin-top: 16px; text-wrap: pretty; }
.premium-resource-arrow { align-self: flex-end; }
.premium-page .faq-answer a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .premium-resource-card:hover { background: var(--paper-muted); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .premium-resource-arrow { transition: transform 200ms ease; }
  .premium-resource-card:hover .premium-resource-arrow { transform: translateX(5px); }
}
@media (max-width: 1200px) and (min-width: 1024px) {
  .plan-card { padding: 32px; }
  .premium-resource-card { padding-inline: 32px; }
}
@media (max-width: 1023px) {
  .premium-hero { padding-top: 80px; }
  .plan-comparison { margin-top: 80px; }
  .premium-intro h1 { font-size: 48px; }
  .premium-intro h1 span { display: block; }
  .premium-intro p { color: var(--coffee-800); font-weight: 400; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-card { gap: 40px; padding: 32px 32px 40px; border-radius: 32px; }
  .plan-period { font-size: var(--text-callout-size); line-height: var(--text-callout-line-height); letter-spacing: var(--text-callout-letter-spacing); }
  .premium-resource-grid { grid-template-columns: minmax(0, 1fr); margin-top: 120px; }
  .premium-resources h2 { font-size: 48px; text-align: left; }
  .premium-resource-card { min-height: 250px; }
}
@media (max-width: 520px) {
  .premium-page .plan-disclaimer { margin-inline: 24px; }
}
@media (max-width: 380px) {
  .plan-card { padding: 24px 24px 40px; }
  .premium-copy-break { display: none; }
  .premium-resource-card { padding-inline: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-resource-card, .premium-resource-arrow, .plan-download.download-button { transition: none; }
  .premium-resource-card:hover .premium-resource-arrow { transform: none; }
}