@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
:root { --bg: #f5f3ef; --ink: #13131b; --muted: #77747f; --line: #d9d6d0; --lilac: #c3b2ff; --violet: #6955d9; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--bg); font-family: 'DM Sans', sans-serif; } a { color: inherit; text-decoration: none; }.page-width { width: min(1180px, calc(100% - 80px)); margin: 0 auto; }
.site-nav { width: min(1280px, calc(100% - 80px)); height: 86px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }.brand { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; }.brand__mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #17161e; border-radius: 50%; overflow: hidden; }.brand__mark img { width: 22px; height: 22px; object-fit: contain; }.site-nav nav { display: flex; gap: 32px; color: var(--muted); font-size: 11px; }.site-nav nav a { transition: color .2s ease; }.site-nav nav a:hover, .site-nav nav .is-active { color: var(--ink); }.nav-cta, .primary-button { display: inline-flex; align-items: center; gap: 18px; border: 1px solid #17161e; border-radius: 99px; padding: 11px 12px 11px 17px; font-size: 11px; }.nav-cta span, .primary-button span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: white; background: #17161e; }
.section-kicker, .section-label { color: var(--muted); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }.section-kicker span { display: inline-block; width: 25px; height: 1px; margin: 0 9px 3px 0; background: var(--muted); }
.pricing-hero { padding: 104px 0 70px; text-align: center; }.pricing-hero h1 { margin: 25px 0 22px; font-size: clamp(55px, 8vw, 112px); font-weight: 400; line-height: .9; letter-spacing: -.08em; }.pricing-hero h1 em { color: var(--violet); font-style: normal; }.pricing-hero > p:not(.section-kicker) { max-width: 410px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.5; }.billing { display: inline-flex; gap: 3px; margin-top: 34px; padding: 4px; border: 1px solid var(--line); border-radius: 99px; }.billing__option { border: 0; border-radius: 99px; padding: 9px 18px; color: var(--muted); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }.billing__option.is-active { color: white; background: var(--ink); }.billing__option span { margin-left: 4px; color: var(--violet); }.billing__option.is-active span { color: var(--lilac); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; align-items: stretch; padding-bottom: 130px; }.plan { position: relative; min-height: 520px; padding: 27px 25px 25px; border: 1px solid var(--line); border-radius: 5px; background: #faf9f6; }.plan--featured { border-color: #8171d9; background: #ded6ff; }.recommended { position: absolute; top: -13px; left: 25px; padding: 7px 12px; border-radius: 99px; color: white; background: var(--violet); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }.plan__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 23px; border-bottom: 1px solid rgba(19,19,27,.16); }.plan__name { font-size: 22px; letter-spacing: -.05em; }.plan__mark { color: var(--muted); font-size: 10px; }.plan__description { min-height: 47px; max-width: 260px; margin: 22px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.45; }.price { display: flex; align-items: baseline; gap: 5px; margin: 23px 0; }.price strong { font-size: 43px; font-weight: 400; letter-spacing: -.08em; }.price span { color: var(--muted); font-size: 11px; }.plan__button { display: flex; justify-content: space-between; align-items: center; padding: 12px 13px 12px 17px; border: 1px solid var(--ink); border-radius: 3px; font-size: 11px; }.plan__button span { font-size: 18px; }.plan--featured .plan__button { color: white; background: var(--ink); }.plan__includes { margin-top: 39px; padding-top: 20px; border-top: 1px solid rgba(19,19,27,.16); }.plan__includes > span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }.plan__includes ul { display: grid; gap: 13px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 12px; }.plan__includes li::before { content: '✓'; margin-right: 10px; color: var(--violet); }
.faq { display: grid; grid-template-columns: 1fr 2fr; gap: 70px; padding: 105px 0 130px; border-top: 1px solid var(--line); }.faq-list details { padding: 21px 0; border-top: 1px solid var(--line); }.faq-list details:last-child { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; justify-content: space-between; color: var(--ink); font-size: 14px; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--violet); font-size: 20px; font-weight: 300; }.faq-list p { max-width: 500px; margin: 15px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.pricing-cta { margin-bottom: 80px; padding: 95px 8%; text-align: center; border-radius: 5px; background: var(--ink); color: white; }.pricing-cta .section-kicker { color: var(--lilac); }.pricing-cta .section-kicker span { background: var(--lilac); }.pricing-cta h2 { margin: 22px auto 30px; font-size: clamp(45px, 6vw, 80px); font-weight: 400; line-height: .9; letter-spacing: -.075em; }.pricing-cta h2 em { color: var(--lilac); font-style: normal; }.pricing-cta .primary-button { border-color: var(--lilac); color: var(--ink); background: var(--lilac); }.pricing-cta .primary-button span { color: var(--lilac); background: var(--ink); }.site-footer { display: flex; justify-content: space-between; padding: 25px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.site-footer a { color: var(--violet); }
@media (max-width: 700px) { .page-width, .site-nav { width: calc(100% - 40px); }.site-nav { height: 72px; }.site-nav nav { display: none; }.nav-cta { font-size: 10px; }.pricing-hero { padding: 90px 0 60px; }.pricing-hero h1 { font-size: clamp(53px, 15vw, 83px); }.plans { grid-template-columns: 1fr; padding-bottom: 90px; }.plan { min-height: 0; padding: 25px 20px; }.plan__description { min-height: 0; }.faq { grid-template-columns: 1fr; gap: 32px; padding: 75px 0 90px; }.pricing-cta { margin-bottom: 45px; padding: 70px 20px; }.site-footer { display: grid; gap: 12px; } }

/* Shared Academy dark theme */
body { color: #f4f1fb; background: #070811; }
.site-nav { border-color: rgba(244,241,251,.14); }
.brand__mark { border-color: rgba(255,255,255,.5); }
.site-nav nav, .section-kicker, .section-label, .pricing-hero > p:not(.section-kicker), .price span, .plan__description, .plan__mark, .plan__includes > span, .faq-list p { color: #9291a4; }
.site-nav nav a:hover, .site-nav nav .is-active { color: #f4f1fb; }
.nav-cta, .primary-button { border-color: #a45bc6; }.nav-cta span, .primary-button span { color: #24142a; background: #d898f4; }
.pricing-hero h1 em, .pricing-cta h2 em { color: #d898f4; }
.billing { border-color: rgba(244,241,251,.18); }.billing__option { color: #9291a4; }.billing__option.is-active { color: #24142a; background: #d898f4; }.billing__option span { color: #d898f4; }.billing__option.is-active span { color: #24142a; }
.plan { border-color: rgba(244,241,251,.14); background: #0d0f1d; }.plan--featured { border-color: #9c83f0; background: #28213e; }.plan__head, .plan__includes { border-color: rgba(244,241,251,.14); }.plan__description, .plan__mark, .price span, .plan__includes > span { color: #9291a4; }.plan__includes li::before { color: #d898f4; }.plan__button { border-color: rgba(244,241,251,.36); }.plan--featured .plan__button { color: #24142a; background: #d898f4; border-color: #d898f4; }.recommended { color: #24142a; background: #d898f4; }
.faq { border-color: rgba(244,241,251,.14); }.faq-list details { border-color: rgba(244,241,251,.14); }.faq-list summary { color: #f4f1fb; }.faq-list summary span { color: #d898f4; }
.pricing-cta { background: #0d0f1d; }.pricing-cta .section-kicker { color: #d898f4; }.pricing-cta .section-kicker span { background: #d898f4; }.pricing-cta .primary-button { color: #24142a; background: #d898f4; border-color: #d898f4; }.pricing-cta .primary-button span { color: #d898f4; background: #24142a; }
.site-footer { border-color: rgba(244,241,251,.14); color: #9291a4; }.site-footer a { color: #d898f4; }