/* Apple product-page layer for all remaining pages (Lite, blog, newsroom, media, company, contact, support, whitepaper, legal, definition).
   Linked by scripts/add-apple-pages.py, loaded after index.css and each page's own stylesheet. */

/* Section rhythm */
html body main section { padding-top: clamp(4.5rem, 9vw, 8rem); padding-bottom: clamp(4.5rem, 9vw, 8rem); }

/* Hero titles */
html body main h1,
html body .page-title { font-weight: 700 !important; letter-spacing: -0.05em !important; line-height: 1.02 !important; font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5rem) !important; }
html body .article-body h1, html body .bl-article h1 { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.75rem) !important; }

/* Section headings */
html body main h2 { font-weight: 700 !important; letter-spacing: -0.04em !important; line-height: 1.06 !important; }
html body main section > .container > h2,
html body main section > h2,
html body main .section-header h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem) !important; }
html body .article-body h2, html body .bl-article h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; letter-spacing: -0.03em !important; }

/* Subtitles */
html body .page-subtitle,
html body main h1 + p { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem) !important; line-height: 1.4 !important; letter-spacing: -0.015em !important; color: #6E6E73; }

/* Eyebrows: sentence case, red, no tracking */
html body .lite-eyebrow, html body .bl-eyebrow, html body .md-kicker, html body .cx-eyebrow,
html body .wp-eyebrow, html body .ro-eyebrow, html body main .section-chip, html body .nr-eyebrow {
  text-transform: none !important; letter-spacing: -0.01em !important; font-size: 1rem !important; font-weight: 600 !important; color: var(--brand-crimson, #FF0000) !important;
}
html body .wb-chip, html body .nr-chip { border-radius: 999px !important; }

/* Cards: large radius, soft depth, lift */
html body .blog-card, html body .pd-card, html body .wb-card, html body .nr-card, html body .ds-card,
html body .wp-card, html body .cx-card, html body .lite-card, html body .lite-plan, html body .lt-card,
html body main .feature-card, html body main .contact-card, html body main .form-card {
  border-radius: 24px !important; border-color: transparent !important; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06) !important;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s !important;
}
html body .blog-card:hover, html body .pd-card:hover, html body .wb-card:hover,
html body .nr-card:hover, html body .ds-card:hover, html body .wp-card:hover {
  transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,.06), 0 24px 56px rgba(0,0,0,.10) !important;
}
html body .blog-card__media img, html body .pd-card-art img, html body .ds-card img { border-radius: 0 !important; }

/* Buttons: pill + press */
html body main .btn, html body main .btn-primary, html body main .btn-secondary,
html body main button[type="submit"], html body main [class*="-btn"]:not(.social-icon-btn) {
  border-radius: 999px !important; transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s !important;
}
html body main .btn:active, html body main button[type="submit"]:active, html body main [class*="-btn"]:active { transform: scale(.96) !important; }

/* Form fields */
html body main input:not([type="checkbox"]):not([type="radio"]), html body main select, html body main textarea { border-radius: 12px !important; }

@media (prefers-reduced-motion: reduce) {
  html body main [class*="card"]:hover { transform: none !important; }
}

/* Leftovers matched */
html body h1.page-title.page-title-plain { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5rem) !important; margin-bottom: 1rem !important; }
html body main h4[style*="uppercase"], html body main [class*="eyebrow"], html body main [class*="kicker"] { text-transform: none !important; letter-spacing: -0.01em !important; }
html body main h4[style*="uppercase"] { font-size: 1rem !important; }
html body .glass-panel { border-radius: 24px !important; }
html body .lite-features, html body .lite-grid { gap: 1.25rem !important; background: none !important; border: 0 !important; }
html body .lite-feature { border-radius: 24px !important; border: 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06) !important; transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s !important; }
html body .lite-feature:hover { transform: translateY(-4px); }
html body .lite-ic { border-radius: 14px !important; }
html body .lite-table-wrap { border-radius: 24px !important; overflow: hidden; }