/* Approved blue system (2026) — explicitly supersedes the prior "approved
   rose concept" this file used to carry. This file loads after index.html's
   inline <style> block and wins the cascade for every shared custom
   property, so it is the authoritative source of truth for brand color on
   this page, not the inline block. Source stylesheet, not a generated
   Tailwind artifact. */
:root {
  --brand: #146EF5;
  --brand-700: #1058C4;
  --brand-50: #EAF3FF;
  --ink: #0B1F44;
  --ink-2: #526173;
  --muted: #526173;
  --line: #E2E8F0;
  --panel: #F6F8FB;
  --surface: #FFFFFF;
}
body { background: var(--surface); }
header { background: rgba(255,255,255,.94) !important; }
header > div:first-child { height: 80px; }
header a, header button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { background: var(--brand); color: #FFFFFF; border-radius: 999px; }
.btn-primary:hover { background: var(--brand-700); }
.btn-ghost { border-radius: 999px; color: var(--brand-700); border-color: var(--line); }
.btn-ghost:hover { background: var(--brand-50); border-color: var(--brand); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 5px; }
.premium-hero { max-width: 1280px; margin: auto; padding: 40px 32px 64px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 620px; gap: 8px; }
.hero-copy { position: relative; z-index: 1; }
.hero-eyebrow { color: var(--muted); font-size: 13px; letter-spacing: .15em; margin-bottom: 24px; }
.hero-copy h1 { font-size: clamp(46px,5.1vw,70px); line-height: 1.22; font-weight: 800; letter-spacing: -.045em; }
.hero-description { font-size: 19px; line-height: 1.8; color: var(--muted); margin-top: 24px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 32px; }
.hero-actions .btn-primary { padding: 14px 38px; font-size: 17px; font-weight: 600; }
.hero-secondary { display: inline-flex; gap: 12px; align-items: center; min-height: 48px; color: var(--brand-700); }
.hero-art { perspective: 1000px; }
.hero-art img { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 24px 48px -16px rgba(11,31,68,.25); transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .4s ease; }
.premium-practice { max-width: 1280px; margin: auto; border-top: 1px solid var(--line); }
.practice-heading { text-align: center; font-size: 40px; line-height: 1.35; }
.practice-intro { text-align: center; margin-top: 14px; color: var(--muted); font-size: 18px; }
.card { border-radius: 20px; box-shadow: none; }
.course-card { padding: 26px; }
.course-card:hover { box-shadow: 0 8px 28px rgba(11,31,68,.08); }
.free-course { background: var(--brand-50); border-color: transparent; padding: 36px; display: grid; grid-template-columns: 70px 1fr; column-gap: 24px; align-content: center; }
.practice-symbol { grid-column: 1; grid-row: 1 / 5; color: var(--brand); align-self: center; }
.practice-symbol svg { width: 64px; height: 64px; }
.free-course > h3, .free-course > p, .free-course > div:not(.practice-symbol), .free-course > a { grid-column: 2; }
.free-course h3 { font-size: 20px; line-height: 1.5; }
.free-course > a { margin-top: 8px; }
.paid-groups { padding-top: 32px; }
.paid-groups > details { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
#packages { padding-top: 48px; }
#reviews { border-top: 1px solid var(--line); }
#reviews > section { background: var(--surface); }
#reviews .text-3xl { font-size: 34px; }
section[id], #reviews { scroll-margin-top: 92px; }
footer { background: var(--surface); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-primary, .course-card { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
  .btn-primary:hover { transform: translateY(-2px); }
}
@media (max-width: 767px) {
  header > div:first-child { height: 68px; }
  .premium-hero { grid-template-columns: 1fr; padding: 40px 24px 32px; min-height: auto; gap: 12px; }
  .hero-copy h1 { font-size: clamp(42px,10vw,60px); }
  .hero-description { font-size: 17px; margin-top: 20px; }
  .hero-eyebrow { margin-bottom: 18px; }
  .hero-actions { gap: 22px; margin-top: 24px; }
  .hero-actions .btn-primary { padding: 13px 28px; }
  .hero-art { max-width: 440px; margin: 0 auto; }
  .hero-art img { transform: none; }
  .practice-heading { font-size: 32px; }
  .practice-intro { font-size: 16px; }
  .free-course { padding: 24px; grid-template-columns: 48px 1fr; gap: 12px 16px; }
  .practice-symbol svg { width: 44px; height: 44px; }
  .free-course h3 { font-size: 18px; }
  .free-course > a { grid-column: 1 / -1; }
  .practice-symbol { grid-row: 1 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-art img { transform: none; }
}