:root {
  --gold: #8e7639;
  --ink: #1c1c16;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, sans-serif;
  --ease: cubic-bezier(.2, .75, .25, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: #f6f1ea; font-family: var(--sans); }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #786024; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); }
h1, h2 { font-weight: 400; }
.site { container-type: inline-size; }
.site > * { --u: calc(min(100vw, 853px) / 853); }
@supports (width: 1cqw) {
  .site > * { --u: calc(min(100cqw, 853px) / 853); }
}
.layout { position: relative; width: min(100%, 853px); margin-inline: auto; }
.icon { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; color: #927738; }
.skip-link { position: fixed; z-index: 5; top: 10px; left: 10px; transform: translateY(-150%); background: #fff; padding: 10px; }
.skip-link:focus { transform: none; }
.header {
  position: relative;
  z-index: 2;
  background: linear-gradient(100deg, #fbf8f2, #f3eee8);
  border-bottom: 1px solid #fdfaf5;
}
.header-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(42 * var(--u) - 1px);
  padding-inline: calc(55 * var(--u)) calc(15 * var(--u));
}
.brand { display: flex; align-items: center; gap: calc(8 * var(--u)); flex-shrink: 0; font: calc(16 * var(--u)) var(--serif); }
.logo-icon { width: calc(42 * var(--u)); height: calc(29 * var(--u)); }
.nav { display: flex; align-items: center; justify-content: space-between; position: absolute; left: calc(246 * var(--u)); width: calc(407 * var(--u)); font-size: max(9px, calc(10 * var(--u))); }
.nav a:hover { color: var(--gold); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: radial-gradient(ellipse at 32% -10%, #627d55 0%, transparent 72%), linear-gradient(#38573a, #193422);
  color: #fffdf8;
  font-family: var(--serif);
  text-align: center;
  box-shadow: inset 0 0 0 1px #6e80544d;
}
.button:hover { filter: brightness(1.12); }
.header-cta { width: calc(105 * var(--u)); height: calc(27 * var(--u)); font-size: calc(12 * var(--u)); }
.header-actions { display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
.language-switch { display: flex; gap: 1px; border: 1px solid #dcd1bf; border-radius: 99px; padding: 1px; }
.language-switch button { min-width: 22px; min-height: 22px; padding: 0 3px; border: 0; border-radius: 99px; background: none; color: #584c36; font-size: 10px; font-weight: 700; }
.language-switch button[aria-pressed="true"] { background: #e8deca; color: #264331; }
.menu-toggle { display: none; }

.hero, .course, .finish { position: relative; isolation: isolate; }
.hero {
  background: radial-gradient(ellipse at 67% 52%, #fcf9f4 0%, transparent 66%), linear-gradient(140deg, #f5eee4, #ede5dc 85%);
  border-bottom: 1px solid #fff9;
}
.hero-layout { min-height: calc(299 * var(--u) - 1px); }
.portrait-frame {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(355 * var(--u));
  overflow: hidden;
  background: radial-gradient(ellipse at 53% 46%, #fdf7e7 0%, #e5d5bb55 50%, transparent 72%);
}
.portrait-halo {
  position: absolute;
  inset: calc(17 * var(--u)) calc(24 * var(--u)) calc(15 * var(--u)) calc(60 * var(--u));
  border: 1px solid #fffbec;
  border-radius: 50%;
  box-shadow: 0 0 calc(12 * var(--u)) #fff9e6d9, inset 0 0 calc(14 * var(--u)) #fff7dfb0;
  mask-image: linear-gradient(#000 66%, transparent 100%);
}
.scene-leaves {
  position: absolute;
  left: 0;
  aspect-ratio: 540 / 722;
  background: url("assets/leaves-hd.png") left top / contain no-repeat;
  pointer-events: none;
}
.portrait-leaves { top: calc(5 * var(--u)); width: calc(99 * var(--u)); }
.hero-edge-leaves { display: none; }
.portrait {
  position: absolute;
  top: calc(-29 * var(--u));
  left: calc(45 * var(--u));
  display: block;
  width: calc(306 * var(--u));
  height: auto;
  --portrait-fade: linear-gradient(#000 76%, transparent 87%);
  -webkit-mask-image: var(--portrait-fade);
  mask-image: var(--portrait-fade), linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.scene-ridge {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(52%, 550px);
  background: url("assets/mountains-hd.jpg") right center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 73%);
  pointer-events: none;
}
.hero-ridge { opacity: .68; }
.course-ridge { opacity: .84; }
.hero-copy { position: relative; width: calc(435 * var(--u)); margin-left: calc(350 * var(--u)); padding-top: calc(19 * var(--u)); }
.eyebrow { margin-left: calc(12 * var(--u)); font-size: calc(9.5 * var(--u)); font-weight: 700; letter-spacing: calc(1.28 * var(--u)); text-transform: uppercase; }
.hero h1 { margin: calc(3 * var(--u)) 0 0 calc(12 * var(--u)); font-size: calc(44 * var(--u)); line-height: 1.01; }
.hero-description { margin: calc(3 * var(--u)) 0 0 calc(13 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.06; }
.methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(7 * var(--u)); }
.method { position: relative; text-align: center; padding-inline: calc(7 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.12; }
.method + .method::before, .fact + .fact::before, .benefit::before {
  content: ""; position: absolute; width: 1px; left: 0; top: 17%; bottom: 6%;
  background: linear-gradient(transparent, #b3a892 48%, transparent);
}
.method h3 { font: 700 calc(13 * var(--u)) / 1.04 var(--sans); margin-bottom: calc(2 * var(--u)); }
.method-icon, .fact-icon, .benefit-icon { margin: 0 auto calc(3 * var(--u)); width: calc(var(--icon-width) * var(--u)); }
.method-icon, .benefit-icon { height: calc(33 * var(--u)); }
.method-hand { --icon-width: 35; }
.method-lotus { --icon-width: 42; }
.method-yin { --icon-width: 37; }
.hero-cta { display: flex; width: calc(309 * var(--u)); min-height: calc(51 * var(--u)); margin: calc(9 * var(--u)) 0 0 calc(49 * var(--u)); font-size: calc(16.5 * var(--u)); line-height: 1.03; padding: calc(3 * var(--u)); }

.course {
  background: radial-gradient(ellipse at 37% 22%, #fbf8f2, transparent 74%), linear-gradient(#f6f1eb, #f0e8df);
  border-bottom: 1px solid #fff9;
}
.course-layout { min-height: calc(294 * var(--u) - 1px); }
.course-leaves { top: calc(27 * var(--u)); width: calc(63 * var(--u)); opacity: .55; }
.course-diagram {
  position: absolute;
  inset: 0 0 auto auto;
  width: calc(404 * var(--u));
  aspect-ratio: 404 / 293;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  cursor: zoom-in;
}
.course-visual {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 78.7%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.diagram-zoom {
  position: absolute;
  right: 19%;
  bottom: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid #fff9;
  border-radius: 50%;
  background: #fcf8f0e8;
  color: #304b37;
  opacity: 0;
}
.diagram-zoom::before { content: ""; position: absolute; top: 7px; left: 7px; width: 9px; height: 9px; border: 1.5px solid; border-radius: 50%; }
.diagram-zoom::after { content: ""; position: absolute; top: 18px; left: 17px; width: 6px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.course-diagram:hover .diagram-zoom, .course-diagram:focus-visible .diagram-zoom { opacity: 1; }
@media (hover: none) { .diagram-zoom { opacity: 1; } }
.course-copy { position: relative; width: calc(388 * var(--u)); margin-left: calc(73 * var(--u)); padding-top: calc(25 * var(--u)); }
.course-tag { display: inline-block; min-width: calc(126 * var(--u)); padding: calc(5 * var(--u)) calc(20 * var(--u)); border-radius: 99px; background: linear-gradient(#f0e6d6, #e5d7b9); text-align: center; font-size: calc(9.5 * var(--u)); font-weight: 700; letter-spacing: calc(1.25 * var(--u)); text-transform: uppercase; }
.course h2 { margin-top: calc(8 * var(--u)); font-size: calc(34 * var(--u)); line-height: 1.02; }
.course-description { margin: calc(10 * var(--u)) 0 0 calc(3 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.15; }
.facts { display: grid; grid-template-columns: .94fr 1.03fr 1.03fr; width: calc(333 * var(--u)); margin: calc(17 * var(--u)) 0 0 calc(-11 * var(--u)); padding-right: calc(15 * var(--u)); border: 1px solid #fff9; border-radius: 999px; background: #fff4; }
.fact { position: relative; padding: calc(4 * var(--u)) 0 calc(7 * var(--u)); text-align: center; font-size: calc(12 * var(--u)); }
.fact-icon { height: calc(31 * var(--u)); }
.fact-calendar { --icon-width: 34; }
.fact-stack { --icon-width: 39; }
.fact-book { --icon-width: 40; }

.program { background: linear-gradient(120deg, #faf6f0, #f1ebe5 65%, #f7f2ec); }
.program-layout { padding: calc(8 * var(--u)) calc(56 * var(--u)) calc(10 * var(--u)); }
.program-heading { text-align: center; }
.program-heading h2 { font-size: calc(31 * var(--u)); line-height: 1.15; }
.program-heading p { margin-top: calc(3 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(.16 * var(--u)); }
.element-tabs { display: grid; grid-template-columns: minmax(0, 146fr) minmax(0, 142fr) minmax(0, 143fr) minmax(0, 140fr) minmax(0, 142fr); gap: calc(4 * var(--u)); margin: calc(14 * var(--u)) calc(5 * var(--u)) calc(10 * var(--u)); }
.element-tab { overflow: hidden; border: 1px solid #fffc; border-radius: calc(17 * var(--u)); padding: 0 0 calc(7 * var(--u)); background: linear-gradient(var(--tint), #f9f6f1); text-align: center; }
.element-tab:hover { box-shadow: inset 0 0 0 1px var(--color); }
.element-art {
  display: block;
  width: 100%;
  aspect-ratio: 2.17;
  background: url("assets/elements-hd.jpg") var(--tile-x) var(--tile-y) / 201% 302% no-repeat;
  filter: saturate(.88);
  mask-image: linear-gradient(#000 79%, transparent);
}
.element-tab strong, .element-tab small { display: block; }
.element-tab strong { font: 700 calc(16.5 * var(--u)) / 1.05 var(--serif); }
.element-tab small { margin-top: calc(3 * var(--u)); font-size: calc(13 * var(--u)); }
.modules { display: grid; gap: calc(1 * var(--u)); }
.modules details { border: 1px solid #fffb; border-radius: calc(22 * var(--u)); background: linear-gradient(110deg, #eee7dc99, #f7f3ed80); }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.module-summary { display: grid; grid-template-columns: calc(70 * var(--u)) 1fr auto; align-items: center; min-height: calc(37 * var(--u)); padding-inline: calc(27 * var(--u)); }
.module-badge { display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border: 1px solid #fff9; border-radius: 50%; background: radial-gradient(circle at 34% 20%, #ffffff2b, transparent 65%), var(--color); }
.badge-icon { width: 79%; height: 79%; stroke-width: 1.38; color: #fffdf5; }
.module-title h3 { font-size: calc(13 * var(--u)); line-height: 1.06; }
.module-title p { margin-top: calc(2 * var(--u)); font: calc(10.8 * var(--u)) / 1.05 var(--serif); }
.plus { font-size: calc(18 * var(--u, 1px)); line-height: 1; }
details[open] > summary .plus { transform: rotate(45deg); }
.module-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 24px; padding: 12px calc(35 * var(--u)) 18px calc(97 * var(--u)); font-size: 13px; line-height: 1.55; }
.module-content h4 { margin: 0 0 4px; }
.module-result { grid-column: 1 / -1; border-top: 1px solid #d6cdbf; padding-top: 10px; }

.finish { background: linear-gradient(#f6f0eb, #faf5ed 55%, #eee4d7); }
.finish-layout { min-height: calc(201 * var(--u)); padding: calc(15 * var(--u)) calc(55 * var(--u)) calc(39 * var(--u)); }
.footer-landscape {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: clamp(86px, 11vw, 136px);
  background: url("assets/sunrise-hd.jpg") center 52.8% / max(850px, 100%) 252% no-repeat;
  mask-image: linear-gradient(transparent, #000 30%);
  pointer-events: none;
}
.benefits { display: grid; grid-template-columns: calc(182 * var(--u)) 1fr; align-items: start; min-height: calc(78 * var(--u)); }
.benefits h2 { font-size: calc(20 * var(--u)); padding: calc(14 * var(--u)) 0 0 calc(3 * var(--u)); white-space: nowrap; }
.benefits-grid { display: grid; grid-template-columns: 1.1fr 1.15fr 1fr 1.12fr; }
.benefit { position: relative; min-height: calc(72 * var(--u)); text-align: center; font-size: calc(10.6 * var(--u)); line-height: 1.16; }
.benefit-lotus { --icon-width: 46; }
.benefit-flash { --icon-width: 32; }
.benefit-leaf { --icon-width: 39; }
.benefit-infinity { --icon-width: 45; }
.course-cta { display: flex; gap: calc(14 * var(--u)); margin: calc(20 * var(--u)) auto 0; width: calc(314 * var(--u)); height: calc(45 * var(--u)); font-size: calc(19 * var(--u)); }

.contacts { background: linear-gradient(140deg, #faf6ee, #f2ebe1); border-top: 1px solid #fff9; scroll-margin-top: 12px; }
.contacts-layout {
  padding: clamp(24px, 4vw, 38px) calc(clamp(14px, 6.5vw, 55px) + env(safe-area-inset-right, 0px)) calc(34px + env(safe-area-inset-bottom, 0px)) calc(clamp(14px, 6.5vw, 55px) + env(safe-area-inset-left, 0px));
  text-align: center;
}
.contacts h2 { font-size: clamp(27px, 4vw, 34px); line-height: 1.1; }
.contacts-description { margin: 8px auto 0; color: #584e41; font-size: 14px; line-height: 1.45; }
.contact-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 760px); margin: 17px auto 0; padding: 0; list-style: none; }
.contact-link { display: flex; align-items: center; gap: 10px; min-height: 61px; height: 100%; padding: 9px 12px; text-align: left; border: 1px solid #ded2bd; border-radius: 14px; background: #fffcf6a6; }
.contact-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; color: #786024; background: #eee4d1; }
.contact-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-copy { display: grid; gap: 3px; min-width: 0; line-height: 1.2; }
.contact-copy strong { color: #274330; font: 700 15px / 1.2 var(--serif); }
.contact-copy span { color: #584e41; font-size: 13px; overflow-wrap: anywhere; }

@media (max-width: 650px) {
  .contact-links { grid-template-columns: minmax(0, 1fr); max-width: 365px; gap: 7px; }
  .contact-link { min-height: 54px; }
}

dialog { width: min(580px, calc(100% - 28px)); max-height: 85vh; max-height: 85dvh; padding: 24px; border: 1px solid #d5c7b2; border-radius: 20px; background: #fcf8f1; color: var(--ink); line-height: 1.5; overflow-y: auto; }
dialog::backdrop { background: #19261fa0; }
.dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.dialog-header h2 { font-size: 29px; }
.dialog-close { width: 37px; height: 37px; border: 1px solid #d5c7b2; border-radius: 50%; background: #f5eee3; font-size: 24px; }
#dialog-body p + p { margin-top: 12px; }
#dialog-body ul { padding-left: 20px; }
#dialog-body li + li { margin-top: 7px; }
#dialog-body details { border-top: 1px solid #ddd1c0; padding: 12px 0; }
#dialog-body details p { margin-top: 8px; }
#dialog-body summary { font-weight: 700; }
#dialog-body .health-note { margin-top: 18px; font-size: 13px; color: #625b50; }
.diagram-dialog { width: min(680px, calc(100% - 28px)); padding: clamp(12px, 3vw, 22px); }
.diagram-detail { display: block; width: auto; height: auto; max-width: 100%; max-height: 68vh; max-height: 68dvh; margin-inline: auto; border-radius: 10px; }

@media (min-width: 900px) {
  .layout { width: clamp(853px, calc(100% - 72px), 1080px); }
  .header-layout .nav { left: calc(50% - 180.5px); }
  .hero-copy { margin-left: calc(50% - 76px); }
  .portrait-frame { left: calc((100% - 853px) * .15); }
  .course-diagram { right: calc((100% - 853px) * .25); }
  .element-art { height: 72px; }
  .portrait-leaves { display: none; }
  .hero-edge-leaves {
    display: block;
    top: 5px;
    width: clamp(99px, 12vw, 180px);
  }
  .scene-ridge { width: clamp(460px, 39vw, 740px); }
}

@media (max-width: 680px), (max-width: 960px) and (max-height: 530px) and (orientation: landscape) {
  .site > * { --u: 1px; }
  .layout { width: min(100%, 853px); --pad-start: calc(14px + env(safe-area-inset-left, 0px)); --pad-end: calc(14px + env(safe-area-inset-right, 0px)); }
  .header-layout { height: auto; min-height: calc(55px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--pad-end) 0 var(--pad-start); justify-content: space-between; gap: 6px; }
  .brand { font-size: 17px; gap: 5px; margin-right: auto; }
  .header-actions { gap: 5px; }
  .header-cta { width: auto; height: 36px; padding-inline: 10px; white-space: nowrap; }
  .language-switch button { min-width: 29px; min-height: 34px; font-size: 11px; }
  .menu-toggle { display: grid; place-content: center; gap: 4px; width: 44px; height: 44px; padding: 0; border: 0; background: none; }
  .menu-toggle span { width: 18px; height: 1px; background: #243b2b; }
  .header-layout .nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #faf6ef; padding: 12px var(--pad-end) 12px var(--pad-start); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 14px; box-shadow: 0 8px 14px #30291d20; }
  .header-layout .nav.is-open { display: grid; }
  .nav a { display: flex; align-items: center; min-height: 38px; }
  .hero-layout { min-height: 0; padding: 0 var(--pad-end) 17px var(--pad-start); }
  .hero-edge-leaves { display: none; }
  .portrait-frame {
    position: relative;
    inset: auto;
    margin: 0 auto;
    width: min(286px, 100%);
    aspect-ratio: 355 / 283;
  }
  .portrait { width: 86%; left: 9%; top: -8%; --portrait-fade: linear-gradient(#000 73%, transparent 86%); }
  .portrait-halo { inset: 6% 9% 7% 13%; }
  .portrait-leaves {
    display: block;
    width: 28%;
    opacity: .84;
  }
  .scene-ridge { top: auto; width: min(70%, 380px); height: 218px; }
  .hero-ridge { opacity: .38; }
  .course-ridge { opacity: .46; }
  .hero-copy { width: 100%; min-width: 0; margin: 0; padding: 0; text-align: center; }
  .hero h1, .hero-description, .eyebrow { margin-left: 0; }
  .hero h1 { font-size: clamp(29px, 8.7vw, 36px); margin-top: 5px; }
  .hero-description { margin-top: 6px; font-size: 14px; line-height: 1.2; }
  .methods { max-width: 390px; margin: 13px auto 0; }
  .method { padding-inline: 3px; font-size: 10px; }
  .method h3 { font-size: 12px; }
  .hero-cta { width: min(312px, 100%); min-height: 48px; margin: 13px auto 0; padding: 8px 12px; font-size: 15px; line-height: 1.15; }
  .course-layout { display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 16px var(--pad-end) 10px var(--pad-start); }
  .course-leaves { opacity: .5; }
  .course-copy { width: min(100%, 390px); margin: 0; padding: 0; text-align: center; }
  .course h2 { font-size: clamp(23px, 6.9vw, 30px); }
  .course-description { margin-left: 0; font-size: 13.5px; line-height: 1.24; }
  .facts { width: min(100%, 304px); margin: 12px auto 0; padding-right: 0; }
  .course-diagram { position: relative; inset: auto; order: 1; width: min(100%, 290px); margin-top: 9px; aspect-ratio: auto; }
  .course-visual { position: static; width: 100%; height: auto; object-fit: contain; object-position: center; }
  .diagram-zoom { right: 7px; bottom: 7px; }
  .program-layout { padding: 14px var(--pad-end) 12px var(--pad-start); }
  .program-heading h2 { font-size: 26px; }
  .program-heading p { font-size: 11.5px; }
  .element-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-inline: 0; gap: 3px; }
  .element-tab { border-radius: 9px; padding-bottom: 6px; }
  .element-tab strong { font: 700 clamp(9px, 2.75vw, 14px) / 1.15 var(--serif); }
  .element-tab small { font-size: clamp(8px, 2.25vw, 12px); margin-top: 2px; }
  .module-summary { grid-template-columns: 38px minmax(0, 1fr) 18px; min-height: 51px; padding: 6px 9px; }
  .module-title h3 { font-size: 14px; line-height: 1.17; overflow-wrap: break-word; }
  .module-title p { font-size: 12px; line-height: 1.2; overflow-wrap: break-word; }
  .module-content { grid-template-columns: minmax(0, 1fr); padding: 10px 14px 15px; }
  .finish-layout { min-height: auto; padding: 12px var(--pad-end) calc(44px + env(safe-area-inset-bottom, 0px)) var(--pad-start); }
  .benefits { display: block; }
  .benefits h2 { text-align: center; padding: 0 0 12px; }
  .benefits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .benefit { font-size: 9.5px; padding-inline: 2px; overflow-wrap: anywhere; }
  .benefit:first-child::before { display: none; }
  .course-cta { width: min(312px, 100%); height: auto; min-height: 48px; margin-top: 12px; padding-inline: 10px; font-size: 17px; }
  .footer-landscape { height: 82px; }
}
@media (min-width: 540px) and (max-width: 680px), (min-width: 540px) and (max-width: 960px) and (max-height: 530px) and (orientation: landscape) {
  .hero-layout, .course-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 6px; min-height: 234px; padding: 14px var(--pad-end) 14px var(--pad-start); }
  .hero-copy, .course-copy { width: 100%; }
  .portrait-frame {
    width: min(248px, 100%);
    aspect-ratio: 355 / 323;
    mask-image: linear-gradient(#000 83%, transparent 100%);
  }
  .portrait { width: 102%; left: 0; top: -5%; }
  .hero h1 { font-size: 32px; }
  .hero-description { font-size: 13px; }
  .eyebrow { font-size: 8px; letter-spacing: .75px; }
  .methods { margin-top: 10px; }
  .method h3 { font-size: 11px; }
  .method p { font-size: 9px; }
  .hero-cta { min-height: 42px; margin-top: 10px; }
  .course-layout { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 12px; }
  .course h2 { font-size: clamp(20px, 3.65vw, 25px); }
  .course-diagram { width: min(100%, 258px); margin-inline: auto; }
}
@media (max-width: 450px) {
  .methods { grid-template-columns: minmax(0, 1fr); max-width: 340px; gap: 4px; }
  .method { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; column-gap: 7px; padding: 5px 7px; text-align: left; font-size: 12px; line-height: 1.25; }
  .method-icon { grid-row: span 2; margin: 0 auto; }
  .method h3 { font-size: 13px; margin: 0; }
  .method p { align-self: start; }
  .method br, .method + .method::before { display: none; }
  .element-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .element-tab { grid-column: span 2; padding-bottom: 8px; }
  .element-tab:nth-child(4) { grid-column: 2 / span 2; }
  .element-tab:nth-child(5) { grid-column: 4 / span 2; }
  .element-tab strong { font-size: 13px; }
  .element-tab small { font-size: 10.5px; }
  .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .benefit { min-height: 67px; font-size: 10.5px; }
  .benefit:nth-child(odd)::before { display: none; }
}
@media (max-width: 400px) {
  .brand { font-size: 15px; }
  .logo-icon { width: 33px; }
  .header-cta { display: none; }
}

@media (hover: hover) {
  .button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #6e80544d, 0 5px 13px #223a2740; }
  .element-tab:hover { transform: translateY(-3px); box-shadow: 0 5px 12px #574a3226; }
  .element-tab:hover .element-art { transform: scale(1.045); }
  .module-summary:hover { color: #37583b; }
  .dialog-close:hover { background: #ede1cf; }
  .contact-link:hover { background: #fffdf8; border-color: #a69262; }
}
.button:active, .element-tab:active { transform: translateY(1px); }
.element-tab[aria-expanded="true"] { border-color: var(--color); }
.modules details[open] { border-color: #d8cdbb; }

@media (prefers-reduced-motion: no-preference) {
  .button, .element-tab { transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), filter 200ms ease, border-color 200ms ease; }
  .element-art, .plus { transition: transform 280ms var(--ease); }
  .nav a, .module-summary, .dialog-close { transition: color 180ms ease, background-color 180ms ease; }
  .contact-link { transition: background-color 180ms ease, border-color 180ms ease; }
  .diagram-zoom { transition: opacity 180ms ease; }
  .portrait-frame { animation: portrait-in 750ms var(--ease); }
  .hero-copy { animation: rise-in 620ms var(--ease) 80ms backwards; }
  .hero-cta { animation: rise-in 540ms var(--ease) 160ms backwards; }
  .course.is-revealed .course-copy,
  .program.is-revealed .program-heading,
  .finish.is-revealed .benefits { animation: rise-in 560ms var(--ease); }
  .course.is-revealed .course-visual { animation: portrait-in 720ms var(--ease); }
  .program.is-revealed .element-tab { animation: appear 490ms ease calc(var(--card-order, 0) * 45ms) backwards; }
  .nav.is-open, dialog[open] { animation: rise-in 300ms var(--ease); }
  dialog[open]::backdrop { animation: appear 240ms ease; }
  .modules details[open] .module-content, #dialog-body details[open] p { animation: rise-in 320ms var(--ease); }

  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .modules details { interpolate-size: allow-keywords; }
    .modules details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 360ms var(--ease), content-visibility 360ms allow-discrete;
    }
    .modules details[open]::details-content { block-size: auto; }
  }
}

@keyframes portrait-in {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button:hover, .button:active, .element-tab:hover, .element-tab:active, .element-tab:hover .element-art { transform: none; }
}