:root { --coral: #ae3150; --coral-soft: #fcf0f1; --amber: #805400; --soft-neutral: #f5f5f7; --photo-ink: #241c35; --photo-muted: #403649; }
:root[data-theme='dark'] { --coral: #ff9aaa; --coral-soft: #352432; --amber: #f5b544; --soft-neutral: #231e2a; }
.webinar-band { background: var(--soft-neutral); border-block: 1px solid var(--line); padding-block: 48px; }
.webinar-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.webinar-band h2 { font-size: 32px; }
.webinar-band p:last-child { color: var(--muted); margin-bottom: 0; }
.webinar-band .button { flex-shrink: 0; }
.webinar-overview { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; padding-block: 56px; }
.webinar-overview > img { display: block; width: 100%; aspect-ratio: 1.4; object-fit: cover; border-radius: 4px; }
.webinar-overview p { color: var(--muted); }
.webinar-schedule { display: flex; align-items: start; gap: 24px; border-block: 1px solid var(--line); padding-block: 32px; }
.webinar-calendar { color: var(--coral); display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; }
.webinar-schedule h3 { font-size: 24px; }
.webinar-schedule p { color: var(--muted); margin-bottom: 0; }
@media (max-width: 600px) { .webinar-overview { grid-template-columns: minmax(0,1fr); gap: 32px; padding-block: 36px; } .webinar-band-inner { flex-direction: column; align-items: start; } .webinar-band h2 { font-size: 28px; } .webinar-schedule { gap: 12px; } .webinar-schedule h3 { font-size: 22px; } }
.education-site { --motif: 8px; }
.education-site .wrap { width: min(1240px, calc(100% - 80px)); }
.education-site .public-header { position: relative; z-index: 6; --panel: #fff; --ink: #1b1340; --ink-2: #3a2f63; --line: #e1dee7; --violet: #6240d5; background: var(--panel); }
.education-site .public-header .logo-light { display: block !important; filter: brightness(0); }
.education-site .public-header .logo-dark { display: none !important; }
.education-site .header-inner { min-height: 90px; gap: 24px; }
.education-site .brand { flex-basis: 204px; }
.education-site .brand img { width: 204px; }
.education-site .desktop-nav { gap: 22px; }
.education-site .desktop-nav a { font-size: 14px; }
.education-site .account-menu summary { font-size: 14px; color: var(--ink); }
.education-site .header-join { min-height: 44px; padding: 10px 15px; font-size: 14px; gap: 10px; }
.education-site .button { border-radius: 4px; font-size: 15px; gap: 12px; }
.education-site .button.secondary { background: transparent; border-color: currentColor; }
.education-site .lucide, .education-site i[data-lucide] { width: 20px; height: 20px; flex: 0 0 20px; }
.education-site h2 { font-size: 40px; }
.education-site h3 { font-size: 24px; }
.education-site .eyebrow { font-size: 14px; line-height: 1.4; font-weight: 600; }
.education-hero { position: relative; color: var(--photo-ink); background: #e1effb url('/assets/education/architecture-hero.png') center 52% / cover; }
.hero-inner { padding-block: 56px 48px; min-height: 580px; }
.education-hero .eyebrow { color: #733344; }
.education-hero h1 { font-size: 66px; line-height: 1.02; font-weight: 600; margin: 20px 0 24px; width: max-content; max-width: 100%; }
.education-hero h1 span { color: var(--photo-ink); }
.hero-lead { font-size: 25px; font-weight: 500; line-height: 1.4; margin-bottom: 16px; }
.hero-copy { max-width: 410px; font-size: 16px; line-height: 1.6; color: var(--photo-muted); }
.education-hero .actions { margin-top: 28px; }
.education-hero .button.primary { color: #fff; background: #6240d5; border-color: #6240d5; }
.education-hero .button.secondary { color: var(--photo-ink); background: #ffffffa3; border-color: #756880; }
.hero-price-note { max-width: 360px; margin: 20px 0 0; color: var(--photo-muted); font-size: 16px; line-height: 1.6; }
.hero-price-note .price-row { display: block; }
.hero-caption { position: absolute; right: 40px; bottom: 28px; padding: 6px 12px; color: var(--photo-ink); background: #ffffffed; font-size: 13px; }
.education-values { border-bottom: 1px solid var(--line); background: var(--panel); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 26px; gap: 30px; }
.values-grid > div { display: flex; align-items: center; gap: 16px; }
.values-grid .lucide { color: var(--coral); width: 25px; height: 25px; flex-basis: 25px; }
.values-grid p { margin: 0; font-size: 14px; line-height: 1.5; }
.values-grid strong, .values-grid span { display: block; }
.values-grid span { color: var(--muted); font-size: 13px; }
.education-section { padding-block: 80px; }
.section-heading { align-items: flex-end; margin-bottom: 32px; }
.section-heading h2 { margin: 0; }
.section-heading .text-link { font-size: 14px; }
.section-copy { color: var(--muted); margin-top: -14px; margin-bottom: 32px; }
.learning-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.learning-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.course-image { position: relative; display: block; height: 240px; overflow: hidden; text-decoration: none; }
.course-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.course-image-label { position: absolute; bottom: 24px; left: 24px; font-family: 'Space Grotesk', sans-serif; font-size: 25px; line-height: 1.3; color: var(--photo-ink); background: #ffffffed; padding: 14px 18px; }
.course-image-label small { display: block; font: 12px/1.2 Inter, sans-serif; margin-top: 6px; }
.learning-card-copy { padding: 28px 30px; }
.course-label { font-size: 12px; font-weight: 650; color: var(--muted); margin: 0 0 14px; }
.learning-card h3 a { color: var(--ink); text-decoration: none; }
.learning-card-copy > p:not(.course-label) { color: var(--muted); max-width: 440px; }
.course-card-bottom { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.course-card-bottom p { margin: 0; color: var(--ink); white-space: nowrap; }
.course-card-bottom strong { font-size: 25px; font-family: 'Space Grotesk', sans-serif; margin-right: 8px; }
.course-card-bottom span { font-size: 13px; color: var(--muted); }
.course-card-bottom .text-link { font-size: 13px; }
.membership-card-top { height: 240px; background: var(--coral-soft); color: var(--ink); padding: 28px 32px; }
.membership-card-top .lucide { color: var(--coral); width: 30px; height: 30px; }
.membership-card-top p { font: 27px/1.3 'Space Grotesk', sans-serif; margin-top: 18px; }
.membership-card-top span { color: var(--coral); }
.inperson-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 30px; }
.inperson-row > div { display: flex; align-items: center; gap: 16px; }
.inperson-row .lucide { color: var(--violet); }
.inperson-row p { margin: 0; font-size: 14px; }
.inperson-row strong, .inperson-row span { display: block; }
.inperson-row span { color: var(--muted); }
.inperson-row > a { font-size: 14px; }
.architect-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.architect-photo { aspect-ratio: 1 / 1.12; overflow: hidden; border-radius: 4px; background: var(--soft-neutral); }
.architect-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(1); }
.architect:nth-child(2) img { object-position: center 0%; }
.architect h3 { font-size: 22px; margin: 20px 0 5px; }
.architect p { font-size: 13px; color: var(--muted); margin: 0; }
.architects-note { max-width: 780px; color: var(--muted); margin-top: 36px; }
.framework-section { padding-block: 76px; background: var(--soft-neutral); border-block: 1px solid var(--line); }
.framework-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 100px; }
.framework-grid > div > p:not(.eyebrow) { max-width: 430px; color: var(--muted); }
.framework-list { margin: 0; padding: 0; list-style: none; }
.framework-list li { display: grid; grid-template-columns: 46px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.framework-list li:first-child { padding-top: 0; }
.framework-list li:last-child { border: 0; padding-bottom: 0; }
.framework-list > li > span { color: var(--coral); font: 20px 'Space Grotesk', sans-serif; }
.framework-list h3 { font-size: 23px; margin-bottom: 8px; }
.framework-list p { margin: 0; color: var(--muted); }
.community-band { padding-block: 70px; background: var(--coral-soft); }
.community-band-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; }
.community-band .eyebrow { color: var(--coral); }
.community-band h2 { font-size: 44px; margin-bottom: 16px; }
.community-band p:not(.eyebrow):not(.community-price) { color: var(--muted); }
.community-band-inner > div > p:last-child { margin-bottom: 0; }
.community-action { justify-self: end; }
.community-price { font: 50px 'Space Grotesk', sans-serif; margin: 0 0 20px; }
.community-price span { font: 16px Inter, sans-serif; color: var(--muted); }
.small-note { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 14px; }
.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
.faq-section > div > p:last-child { color: var(--muted); }
.education-faq details { border-bottom: 1px solid var(--line); padding-block: 20px; }
.education-faq details:first-child { border-top: 1px solid var(--line); }
.education-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; font-weight: 550; list-style: none; min-height: 24px; }
.education-faq summary::-webkit-details-marker, .curriculum summary::-webkit-details-marker { display: none; }
.education-faq details[open] .lucide, .curriculum details[open] summary .lucide { transform: rotate(45deg); }
.education-faq p { padding: 14px 28px 0 0; margin: 0; color: var(--muted); }
.education-site .public-footer { --panel: #211c2a; --bg: #211c2a; --ink: #f4f1ff; --ink-2: #e2dbfb; --muted: #bcb3d9; --line: #71638d; --violet: #b29aff; }
.education-intro { padding-block: 35px 56px; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); margin-bottom: 36px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.education-intro h1 { font-size: 56px; margin-top: 14px; }
.education-intro .lead { color: var(--muted); margin: 0; }
.catalog-course { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.catalog-course > img { width: 100%; aspect-ratio: 1.2; object-fit: cover; border-radius: 4px; }
.catalog-course h2 { font-size: 48px; }
.catalog-course .lead { font-size: 18px; }
.inperson-details { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.inperson-details > div:nth-child(2) { border-left: 1px solid var(--line); padding-left: 50px; }
.course-overview { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 90px; padding-block: 60px; }
.course-overview > div > p { color: var(--muted); }
.course-outcomes { padding: 0; margin: 30px 0; list-style: none; }
.course-outcomes li { display: flex; gap: 12px; align-items: start; margin: 14px 0; }
.course-outcomes .lucide { color: var(--blue); margin-top: 3px; }
.curriculum-title { font-size: 32px !important; margin-top: 48px; }
.curriculum details { border-bottom: 1px solid var(--line); }
.curriculum details:first-child { border-top: 1px solid var(--line); }
.curriculum summary { display: flex; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none; font-weight: 550; align-items: center; }
.curriculum summary .lucide { margin-left: auto; }
.module-number { color: var(--coral); font-family: 'Space Grotesk', sans-serif; }
.module-copy { padding: 0 0 22px 42px; color: var(--muted); }
.module-copy p { margin: 0; }
.module-copy .text-link { margin-top: 8px; }
.course-enrollment { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; overflow: hidden; align-self: start; position: sticky; top: 24px; }
.course-enrollment > img { width: 100%; display: block; aspect-ratio: 1.55; object-fit: cover; }
.course-enrollment > div { padding: 26px; }
.enrollment-price, .dialog-price { font: 46px 'Space Grotesk', sans-serif; margin-bottom: 22px; }
.enrollment-price span, .dialog-price span { display: block; margin-top: 8px; font: 14px/1.5 Inter, sans-serif; color: var(--muted); }
.enrollment-price s, .dialog-price s { font: 24px 'Space Grotesk', sans-serif; color: var(--muted); }
.course-card-bottom s { font-size: 15px; color: var(--muted); }
.course-enrollment .button { width: 100%; font-size: 14px; cursor: pointer; }
.course-enrollment .text-link { font-size: 14px; margin-top: 10px; }
.course-enrollment hr { border: 0; border-top: 1px solid var(--line); margin-top: 22px; }
.enrollment-dialog { width: min(520px,calc(100% - 32px)); border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 42px; }
.enrollment-dialog::backdrop { background: #211c2aa8; }
.enrollment-dialog h2 { font-size: 30px; }
.dialog-close { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; color: var(--ink); border: 0; cursor: pointer; }
.community-hero { padding-block: 34px 60px; background: var(--coral-soft); }
.community-hero h1 { font-size: 66px; }
.community-hero .eyebrow { color: var(--coral); }
.community-copy { color: var(--muted); max-width: 540px; }
.community-hero .actions { align-items: center; gap: 30px; }
.inline-price { margin: 0; font: 35px 'Space Grotesk', sans-serif; }
.inline-price span { font: 15px Inter, sans-serif; color: var(--muted); }
.community-people { display: flex; gap: 8px; align-items: center; margin-top: 38px; }
.community-people img { border-radius: 50%; object-fit: cover; object-position: center 16%; filter: grayscale(1); width: 52px; height: 52px; }
.community-people p { font-size: 13px; margin: 0 0 0 16px; }
.community-people a { display: inline-flex; align-items: center; gap: 8px; }
.community-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 60px; }
.community-benefits article { border-top: 1px solid var(--line); padding-top: 28px; }
.community-benefits .lucide { width: 28px; height: 28px; color: var(--coral); margin-bottom: 24px; }
.community-benefits p { color: var(--muted); }
.membership-context { font-size: 14px; border-top: 1px solid var(--line); padding-top: 28px; margin-top: 36px; color: var(--muted); }
.lesson-page { padding-block: 32px 70px; }
.lesson-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 80px; }
.lesson-sidebar { align-self: start; padding-top: 12px; position: sticky; top: 25px; }
.lesson-sidebar h2 { font-size: 22px; }
.lesson-sidebar ol { padding: 0; list-style: none; margin-bottom: 24px; }
.lesson-sidebar li { display: grid; grid-template-columns: 25px 1fr; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.lesson-sidebar li span { font-size: 13px; }
.lesson-sidebar .current-lesson { color: var(--violet); }
.lesson-sidebar .text-link { font-size: 14px; }
.lesson-content { max-width: 800px; }
.lesson-content h1 { font-size: 48px; margin-top: 10px; }
.lesson-content h2 { font-size: 30px; margin-top: 36px; }
.lesson-content > p:not(.eyebrow) { color: var(--muted); }
.lesson-content .lead { font-size: 22px; }
.lesson-image { width: 100%; aspect-ratio: 2.5; object-fit: cover; border-radius: 4px; display: block; margin-block: 30px; }
.lesson-example { background: var(--soft-neutral); padding: 28px; border-radius: 4px; border-left: 3px solid var(--violet); margin-top: 30px; }
.lesson-example dl { margin: 20px 0; }
.lesson-example dl > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; }
.lesson-example dd { margin: 0; font-weight: 600; }
.example-result { border-top: 1px solid var(--line); color: var(--blue); }
.lesson-example > p:last-child { font-size: 14px; color: var(--muted); margin-bottom: 0; }
.knowledge-check { padding: 24px; border: 1px solid var(--line); border-radius: 4px; margin: 28px 0; }
.knowledge-check legend { font-weight: 550; padding: 0 8px; }
.knowledge-check label { display: flex; gap: 12px; align-items: center; min-height: 48px; cursor: pointer; }
.knowledge-check input { width: 19px; height: 19px; accent-color: var(--violet); }
.knowledge-check .button { margin-top: 16px; cursor: pointer; }
[data-answer-feedback] { margin: 16px 0 0; min-height: 24px; color: var(--ink-2); }
[data-answer-feedback][data-result='correct'] { color: var(--blue); }
.lesson-disclaimer { font-size: 13px; }
@media (max-width: 1200px) { .education-site .desktop-nav { display: none; } .education-site .account-menu { margin-left: auto; } .education-site .mobile-menu { display: block; } .education-site .header-inner { gap: 18px; } }
@media (max-width: 850px) { .education-site .wrap { width: calc(100% - 48px); } .hero-inner { min-height: 530px; } .education-hero h1 { font-size: 54px; } .education-hero { background-position: 35% center; } .hero-copy { max-width: 340px; } .values-grid { gap: 20px; } .values-grid > div { align-items: start; } .values-grid span { display: none; } .framework-grid, .community-band-inner, .faq-section { gap: 40px; } .architect-grid { grid-template-columns: repeat(2,1fr); gap: 30px; } .course-overview { grid-template-columns: minmax(0,1fr) 300px; gap: 35px; } .catalog-course, .inperson-details { gap: 35px; } .lesson-layout { grid-template-columns: 210px minmax(0,1fr); gap: 35px; } .community-benefits { gap: 25px; } .course-card-bottom { flex-wrap: wrap; } }
@media (max-width: 600px) {
  .education-site .wrap { width: calc(100% - 40px); } .education-site .header-inner { min-height: 76px; gap: 10px; } .education-site .brand { flex-basis: 168px; } .education-site .brand img { width: 168px; } .education-site .header-join { display: none; } .education-site .account-menu { margin-left: auto; } .education-site .mobile-menu summary { width: 42px; padding: 12px 8px; list-style: none; } .mobile-menu summary::-webkit-details-marker { display: none; }
  .education-hero { background-position: 15% center; background-size: auto 100%; } .hero-inner { padding-block: 38px 35px; min-height: 540px; } .education-hero h1 { font-size: 39px; line-height: 1.08; margin-top: 22px; } .education-hero .eyebrow { max-width: 230px; } .hero-lead { font-size: 22px; max-width: 325px; } .hero-copy { display: none; } .education-hero .actions { gap: 10px; max-width: 310px; } .education-hero .button { width: auto; font-size: 13px; padding: 10px 12px; gap: 8px; min-height: 46px; } .hero-price-note { display: block; max-width: 300px; line-height: 1.6; font-size: 14px; color: #241c35; } .hero-caption { display: none; }
  .values-grid { grid-template-columns: repeat(3,1fr); gap: 14px; padding-block: 20px; } .values-grid > div { display: block; } .values-grid .lucide { margin-bottom: 8px; width: 22px; height: 22px; } .values-grid p { font-size: 12px; }
  .education-section { padding-block: 45px; } .education-site h2 { font-size: 30px; } .section-heading { align-items: start; gap: 18px; margin-bottom: 24px; } .section-heading > a { display: none; } .section-copy { margin-top: 0; font-size: 15px; } .learning-grid { grid-template-columns: 1fr; gap: 24px; } .course-image, .membership-card-top { height: 215px; } .learning-card-copy { padding: 24px; } .course-card-bottom { gap: 6px; } .course-card-bottom .text-link { font-size: 13px; } .inperson-row { display: block; } .inperson-row > a { margin-top: 12px; } .architect-grid { gap: 28px 18px; } .architect h3 { font-size: 18px; margin-top: 14px; } .architect p { font-size: 12px; }
  .framework-section { padding-block: 45px; } .framework-grid, .community-band-inner, .faq-section, .catalog-course, .inperson-details, .course-overview, .lesson-layout { grid-template-columns: 1fr; gap: 34px; } .framework-list h3 { font-size: 21px; } .framework-list li { gap: 12px; grid-template-columns: 32px 1fr; } .community-band { padding-block: 45px; } .community-band h2 { font-size: 34px; } .community-action { justify-self: start; } .community-price { font-size: 42px; } .community-band .button { font-size: 14px; } .education-faq summary { font-size: 15px; line-height: 1.5; }
  .education-intro { padding-block: 24px 36px; } .breadcrumb { font-size: 12px; margin-bottom: 28px; } .education-intro h1 { font-size: 38px; } .education-intro .lead { font-size: 18px; } .catalog-course h2 { font-size: 34px; } .catalog-course > img { aspect-ratio: 1.5; } .inperson-details > div:nth-child(2) { border-left: 0; border-top: 1px solid var(--line); padding: 28px 0 0; } .course-overview { padding-block: 38px; } .course-enrollment { position: static; grid-row: 1; } .curriculum summary { font-size: 15px; gap: 14px; } .enrollment-dialog { padding: 36px 24px 24px; } .enrollment-dialog .button { width: 100%; }
  .community-hero { padding-block: 24px 40px; } .community-hero h1 { font-size: 40px; } .community-hero .lead { font-size: 22px; } .community-hero .actions { gap: 18px; } .community-hero .button { font-size: 14px; } .inline-price { font-size: 30px; } .community-people { flex-wrap: wrap; } .community-people p { margin: 12px 0 0; flex-basis: 100%; } .community-benefits { grid-template-columns: 1fr; gap: 24px; } .community-benefits .lucide { margin-bottom: 16px; }
  .lesson-page { padding-top: 24px; } .lesson-sidebar { position: static; } .lesson-sidebar ol { display: none; } .lesson-sidebar h2 { display: none; } .lesson-sidebar .text-link { margin: 0; } .lesson-layout { gap: 24px; } .lesson-content h1 { font-size: 37px; } .lesson-content .lead { font-size: 19px; } .lesson-image { aspect-ratio: 1.7; } .lesson-example { padding: 20px; } .lesson-example dl > div { font-size: 14px; } .knowledge-check { padding: 18px; } .knowledge-check legend { font-size: 15px; } .knowledge-check label { font-size: 14px; }
}
@media (max-width: 360px) { .education-site .wrap { width: calc(100% - 32px); } .education-site .brand { flex-basis: 148px; } .education-site .brand img { width: 148px; } .education-hero h1 { font-size: 33px; } .education-hero .button { width: auto; } .hero-lead { font-size: 20px; } .hero-inner { min-height: 542px; } .architect h3 { font-size: 17px; } .community-hero h1 { font-size: 34px; } }
@media (max-width: 600px) and (max-height: 700px) { .hero-inner { min-height: 0; padding-block: 24px; } .hero-copy { display: none; } .education-hero h1 { font-size: 33px; margin-block: 16px; } .hero-lead { font-size: 20px; margin-bottom: 0; } .education-hero .actions { margin-top: 20px; } .hero-price-note { margin-top: 14px; } }