:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
.site-header {
  padding-block: var(--space-s); padding-inline: var(--gutter);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-m); max-inline-size: var(--content-width); margin-inline: auto;
}
.site-header__brand {
  display: block; line-height: 0;
}
.site-header__logo {
  inline-size: clamp(8.5rem, 16vw, 13rem); block-size: auto;
}
.site-header__nav {
  display: flex; flex-wrap: wrap; gap: var(--space-m);
}
.site-header__link {
  color: var(--text-light); font-size: var(--text-s); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: color 0.2s ease; &:hover, &:focus-visible { color: var(--primary-light); }
}
.site-footer {
  padding-block: var(--space-xl); padding-inline: var(--gutter);
}
.site-footer__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-s); max-inline-size: var(--content-width); margin-inline: auto; text-align: center;
}
.site-footer__brand {
  display: block; line-height: 0;
}
.site-footer__logo {
  inline-size: clamp(7rem, 12vw, 9.5rem); block-size: auto;
}
.site-footer__tagline {
  font-family: var(--heading-font-family); font-style: italic; font-size: var(--text-l); color: var(--text-light);
}
.site-footer__nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-m);
}
.site-footer__link {
  color: var(--text-light); font-size: var(--text-s); text-decoration: none; &:hover, &:focus-visible { color: var(--primary-light); text-decoration: underline; }
}
.site-footer__legal {
  color: var(--text-light-muted); font-size: var(--text-xs);
}
.site-main {
  display: block;
}
.hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
&.bg--ultra-dark { background-image: radial-gradient(ellipse 70% 65% at 50% 0%, color-mix(in oklch, var(--primary) 38%, transparent), transparent 72%), radial-gradient(circle at 0px 209px, color-mix(in oklch, var(--white) 57%, transparent) 1.0px, transparent 1.6px), radial-gradient(circle at 250px 304px, color-mix(in oklch, var(--white) 76%, transparent) 1.1px, transparent 1.7px), radial-gradient(circle at 155px 472px, color-mix(in oklch, var(--white) 72%, transparent) 0.8px, transparent 1.4px), radial-gradient(circle at 651px 284px, color-mix(in oklch, var(--white) 65%, transparent) 0.8px, transparent 1.4px), radial-gradient(circle at 509px 455px, color-mix(in oklch, var(--white) 66%, transparent) 1.1px, transparent 1.7px), radial-gradient(circle at 754px 10px, color-mix(in oklch, var(--white) 81%, transparent) 0.9px, transparent 1.5px), radial-gradient(circle at 6px 153px, var(--primary-light) 1.5px, transparent 2.1px), radial-gradient(circle at 300px 444px, var(--primary-light) 1.0px, transparent 1.6px), radial-gradient(circle at 414px 437px, var(--primary-light) 1.6px, transparent 2.2px), radial-gradient(circle at 538px 587px, var(--white) 1.4px, transparent 2.0px), radial-gradient(circle at 328px 179px, color-mix(in oklch, var(--white) 56%, transparent) 1.3px, transparent 1.9px), radial-gradient(circle at 689px 280px, color-mix(in oklch, var(--white) 55%, transparent) 1.5px, transparent 2.1px); background-size: 100% 100%, 523px 467px, 613px 587px, 709px 661px, 787px 743px, 859px 821px, 947px 883px, 419px 397px, 491px 463px, 577px 541px, 673px 619px, 761px 701px, 829px 797px; }
&::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 530px 280px, color-mix(in oklch, var(--white) 78%, transparent) 1.3px, transparent 1.9px), radial-gradient(circle at 278px 556px, color-mix(in oklch, var(--white) 74%, transparent) 1.6px, transparent 2.2px), radial-gradient(circle at 372px 154px, color-mix(in oklch, var(--white) 57%, transparent) 0.7px, transparent 1.3px), radial-gradient(circle at 88px 266px, color-mix(in oklch, var(--white) 72%, transparent) 1.2px, transparent 1.8px); background-size: 557px 509px, 641px 599px, 733px 683px, 811px 757px; animation: at-twinkle 5s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { &::before { animation: none; } } @media (min-width: 64em) { &.section--l { padding-block: var(--space-xl); } & .hero__inner { max-inline-size: 72rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". tree" "eyebrow tree" "title tree" "lede tree" ". tree"; column-gap: var(--space-xl); row-gap: var(--space-s); align-items: start; justify-items: start; text-align: start; } & .hero__eyebrow { grid-area: eyebrow; } & .hero__title { grid-area: title; } & .hero__lede { grid-area: lede; margin-inline: 0; } & .tree { grid-area: tree; align-self: center; margin-block-start: 0; } }
}
.hero__inner {
  max-inline-size: 48rem; align-items: center; gap: var(--space-m);
}
.hero__eyebrow {
  color: var(--primary-light); font-size: var(--text-s); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.hero__title {
  font-size: var(--h1); line-height: 1.05; text-wrap: balance;
}
.hero__accent {
  color: var(--primary-light); font-style: italic;
}
.hero__lede {
  font-size: var(--text-l); color: var(--text-light-muted); max-inline-size: 40ch; text-wrap: pretty;
}
.hero__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); margin-block-start: var(--space-xs);
}
.room__inner {
  max-inline-size: 44rem; align-items: center; gap: var(--space-m); text-align: center;
}
.room__title {
  font-style: italic;
}
.room__text {
  font-size: var(--text-l); color: var(--text-dark-muted); text-wrap: pretty;
}
.audios__inner {
  gap: var(--space-l);
}
.audios__header {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-s); max-inline-size: 46rem; margin-inline: auto; text-align: center;
}
.audios__eyebrow {
  color: var(--primary-semi-dark); font-size: var(--text-s); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.audios__title {
  text-wrap: balance;
}
.audios__intro {
  font-size: var(--text-l); color: var(--text-dark-muted); text-wrap: pretty;
}
.audios__grid {
  display: grid; grid-template-columns: var(--grid-auto-3); gap: var(--grid-gap); inline-size: 100%;
}
.audios__notice {
  inline-size: 100%; max-inline-size: 46rem; margin-inline: auto; padding: var(--space-m); background-color: var(--white); border-inline-start: 4px solid var(--primary); border-radius: var(--radius);
}
.audios__notice-text {
  font-size: var(--text-m); color: var(--text-dark);
}
.audios__credit {
  font-size: var(--text-s); color: var(--text-dark-muted); text-align: center; & a { color: var(--primary-semi-dark); text-underline-offset: 0.2em; }
}
.about__inner {
  max-inline-size: 46rem; align-items: center; gap: var(--space-m); text-align: center;
}
.about__title {
  text-wrap: balance;
}
.about__text {
  font-size: var(--text-l); color: var(--text-light-muted); text-wrap: pretty;
}
.hero__link {
  color: var(--text-light); font-weight: 600; text-decoration: underline; text-decoration-color: var(--primary-light); text-underline-offset: 0.3em; padding-block: var(--space-xs); padding-inline: var(--space-s); transition: color 0.2s ease; &:hover, &:focus-visible { color: var(--primary-light); }
}
.legal__inner {
  max-inline-size: 46rem; align-items: flex-start; gap: var(--space-s);
}
.legal__title {
  text-wrap: balance;
}
.legal__updated {
  color: var(--text-dark-muted); font-size: var(--text-s); margin-block-end: var(--space-s);
}
.legal__heading {
  font-size: var(--h4); margin-block-start: var(--space-m);
}
.legal__text {
  color: var(--text-dark-muted); & a { color: var(--primary-semi-dark); text-underline-offset: 0.2em; }
}
.offer {
  display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-l); background-color: var(--white); border-radius: var(--radius-l); border-block-start: 4px solid var(--primary); box-shadow: var(--box-shadow-1); text-align: start;
}
.offer__badge {
  align-self: flex-start; padding-block: 0.25em; padding-inline: var(--space-xs); border-radius: var(--radius); background-color: var(--primary); color: var(--white); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.offer__title {
  font-size: var(--h4); text-wrap: balance;
}
.offer__price {
  font-family: var(--heading-font-family); font-size: var(--h2); font-weight: 700; line-height: 1; color: var(--primary-semi-dark);
}
.offer__list {
  display: flex; flex-direction: column; gap: var(--space-xs); margin-block: var(--space-xs);
}
.offer__item {
  color: var(--text-dark-muted); font-size: var(--text-s);
}
.offer__note {
  margin-block-start: auto; color: var(--text-dark-muted); font-size: var(--text-s); font-style: italic;
}
.offer__buy {
  align-self: flex-start; margin-block-start: var(--space-s);
}
.tree {
  inline-size: 100%; max-inline-size: 36rem; margin-block-start: var(--space-s); padding: var(--space-m); border: 1px solid color-mix(in oklch, var(--white) 16%, transparent); border-radius: calc(var(--radius) * 3); background-color: color-mix(in oklch, var(--neutral-ultra-dark) 72%, transparent); box-shadow: var(--box-shadow-1); text-align: start; scroll-margin-block-start: var(--space-m); & .tree__choice { text-align: start; font-weight: 600; } & .tree__back { text-decoration: underline; text-underline-offset: 0.2em; }
}
.tree__step {
  display: none; &.tree__step--current { display: flex; flex-direction: column; gap: var(--space-s); } &.tree__step--current[data-step^="offer-"] { gap: var(--space-xs); }
}
.tree__eyebrow {
  margin: 0; color: var(--primary-light); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.tree__lead {
  margin: 0; color: var(--text-light-muted); font-size: var(--text-m);
}
.tree__question {
  margin: 0; color: var(--white); font-size: var(--h4); text-wrap: balance; &:focus { outline: none; } &.tree__question--program { font-size: var(--h3); }
}
.tree__choices {
  display: grid; gap: var(--space-xs);
}
.tree__choice {
  display: block; inline-size: 100%; padding-block: var(--space-xs); padding-inline: var(--space-s); border: 1px solid color-mix(in oklch, var(--white) 30%, transparent); border-radius: var(--radius); background-color: transparent; color: var(--white); font-family: inherit; font-size: var(--text-m); font-weight: 600; text-align: start; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; &:hover, &:focus-visible { background-color: var(--primary); border-color: var(--primary); }
}
.tree__text {
  margin: 0; color: var(--text-light-muted); font-size: var(--text-m);
}
.tree__form {
  display: grid; gap: var(--space-xs);
}
.tree__label {
  color: var(--white); font-size: var(--text-s); font-weight: 600;
}
.tree__input {
  inline-size: 100%; padding-block: var(--space-xs); padding-inline: var(--space-s); border: 1px solid color-mix(in oklch, var(--white) 30%, transparent); border-radius: var(--radius); background-color: var(--white); color: var(--text-dark); font-family: inherit; font-size: var(--text-m);
}
.tree__check {
  display: flex; align-items: center; gap: var(--space-xs); color: var(--white); font-size: var(--text-s); cursor: pointer; & input { accent-color: var(--primary); inline-size: 1.15em; block-size: 1.15em; }
}
.tree__submit {
  justify-self: start;
}
.tree__status {
  margin: 0; color: var(--primary-ultra-light); font-size: var(--text-s); &:empty { display: none; }
}
.tree__fine {
  margin: 0; color: var(--text-light-muted); font-size: var(--text-xs); & a { color: inherit; }
}
.tree__back {
  align-self: flex-start; padding: 0; border: 0; background: none; color: var(--text-light-muted); font-family: inherit; font-size: var(--text-s); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; &:hover, &:focus-visible { color: var(--white); }
}
.tree__hp {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}