@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue");
  font-weight: 400;
}

@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-Bold");
  font-weight: 700;
}

@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-Italic");
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: "Cormorant Cyrillic";
  src: url("assets/cormorant-medium-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Cormorant;
  src: url("assets/cormorant-medium-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0020-007E;
}

@font-face {
  font-family: Cormorant;
  src: url("assets/cormorant-light-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  unicode-range: U+0030-0039;
}

@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-Light");
  font-weight: 300;
}

@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-Medium");
  font-weight: 500;
}

@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-Thin");
  font-weight: 200;
}

@font-face {
  font-family: "Footer Helvetica Neue";
  src: local("Helvetica Neue Thin"), local("HelveticaNeue-Thin");
  font-weight: 300;
}

@font-face {
  font-family: "Footer Roboto";
  src: url("assets/footer/roboto.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  --ice: #9fbfe2;
  --muted: #6d7985;
  --orange: #fc4f0b;
  --orange-gradient: linear-gradient(to top, #ff2500, #ff6704 108.57%);
  --design-width: 428px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  background: #000;
}

* {
  box-sizing: border-box;
}

body,
h1,
h2,
p {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

img {
  display: block;
}

a {
  color: inherit;
}

:is(a, summary):focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 4px;
}

.page {
  max-inline-size: var(--design-width);
  margin-inline: auto;
  overflow: clip;
  container-type: inline-size;
}

/* Keep the authored mobile frame at 1:1 through 428px and scale it on narrower screens. */
.mobile-frame {
  position: relative;
  inline-size: var(--design-width);
  zoom: var(--frame-scale, 1);
}

@supports (zoom: calc(100cqw / 428px)) {
  .mobile-frame {
    zoom: calc(100cqw / 428px);
  }
}

.hero-backdrop,
.hero-backdrop img,
.panel-effects,
.panel-effects > *,
.panel-surface,
.card-art,
.card-art img {
  position: absolute;
  pointer-events: none;
}

.hero-backdrop {
  inset: 0 0 auto;
  block-size: 760px;
  mask-image: url("assets/hero-mask.svg");
  mask-repeat: no-repeat;
  isolation: isolate;
  /* Inverted additive blending reproduces the Linear Burn layer from Figma. */
  background: #fff;
  filter: invert(1);
}

.hero-texture {
  left: -17px;
  top: -52px;
  width: 502px;
  height: 894px;
  object-fit: cover;
  filter: brightness(1.015) invert(1);
}

.hero-shadow {
  left: -305.911px;
  top: -291.682px;
  transform: rotate(-20.54deg);
  filter: invert(1);
}

.hero-glow {
  left: -131px;
  top: -243px;
  filter: invert(1);
  mix-blend-mode: plus-lighter;
}

.topbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  block-size: 66px;
  padding: 14px 29px 0 31px;
}

.brand {
  justify-self: start;
}

.languages {
  position: absolute;
  top: 21px;
  left: 154px;
  inline-size: 115px;
  line-height: 18px;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;
  white-space: pre;
}

.languages a {
  text-decoration: none;
}

.languages a[aria-current="page"] {
  color: #7f97b0;
}

.menu {
  grid-column: 3;
  justify-self: end;
  position: relative;
  margin-top: 10px;
}

.menu summary {
  cursor: pointer;
  list-style: none;
}

.menu summary::-webkit-details-marker {
  display: none;
}

.menu nav {
  position: absolute;
  inset: 30px 0 auto auto;
  min-inline-size: 150px;
  background: #10151b;
  border: 1px solid #2a3746;
  border-radius: 12px;
  padding: 6px;
}

.menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
}

.menu a:hover {
  background: #24364a;
}

.intro {
  position: relative;
  block-size: 242px;
}

.hero-title-main,
.hero-title-script,
.hero-pitch,
.offer-description,
.offer-title,
.offer-savings,
.lesson-list,
.details-caption {
  text-box: trim-both cap alphabetic;
}

.hero-title-main {
  position: absolute;
  inset: 54px 0 auto -2px;
  text-align: center;
  color: var(--ice);
  font-size: 58px;
  font-weight: 500;
}

.hero-title-script {
  position: absolute;
  left: 212px;
  top: 121px;
  font: italic 500 65px "Cormorant Cyrillic", Georgia, serif;
  transform: translateY(-3px);
}

.hero-thumbnails {
  position: absolute;
  inset: 116.4165px auto auto 49px;
  width: 142px;
  height: 59.1667px;
}

.hero-thumbnails > * {
  position: absolute;
}

.portrait,
.nail-thumbnail {
  object-fit: cover;
  mask: url("assets/thumbnail-mask.svg") no-repeat;
}

.portrait {
  left: -5.2508px;
  top: -29.6594px;
  width: 59.2429px;
  height: 128.3597px;
  mask-position: 5.2508px 29.6594px;
}

.nail-thumbnail {
  left: 18.8853px;
  top: -.0381px;
  width: 105.3208px;
  height: 59.2429px;
  mask-position: 22.5314px .0381px;
}

.jump-link {
  left: 82.8333px;
  width: 59.1667px;
  height: 59.1667px;
  border-radius: 50%;
}

.jump-arrow {
  position: absolute;
  left: 19.994px;
  top: 23.312px;
  transform-origin: 9.309px 7.364px;
  transform: rotate(-45deg);
}

.hero-pitch {
  position: absolute;
  inset: 197px 29px auto;
  font-size: 17px;
  font-weight: 700;
  color: var(--orange);
  text-align: center;
}

.offer-panel {
  position: relative;
  min-block-size: 545px;
  padding: 23px 30px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}

.offer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  border-radius: 40px;
  backdrop-filter: blur(5px);
}

.panel-surface {
  z-index: -2;
  top: 0;
  left: -1px;
}

.panel-effects {
  z-index: -1;
  inset: 0;
  mask: url("assets/panel-mask.svg") no-repeat;
}

.panel-glow-right {
  left: 204px;
  top: 60px;
}

.panel-glow-left {
  left: -211px;
  top: 3px;
}

.panel-grain {
  inset: -14px 0 0;
  background: url("assets/grain.png") repeat;
  opacity: .2;
}

.offer-description {
  inline-size: 333px;
  margin-inline-end: 1px;
  min-block-size: 44px;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
}

.offer-card {
  position: relative;
  inline-size: 367px;
  block-size: 279px;
  align-self: end;
  margin-block-start: 41px;
  padding: 53px 23px 0;
}

.card-art {
  inset: 0;
  z-index: -1;
  mask: url("assets/offer-mask.svg") no-repeat;
}

.card-nails {
  left: -61px;
  top: 0;
  width: 509px;
  height: 287px;
  object-fit: cover;
}

.card-shading {
  left: -463.9995px;
  top: -105.125px;
  transform: rotate(-74.63deg);
}

.offer-badge,
.buy-button,
.package-cta {
  border: 1px solid #ff2500;
  border-radius: 150px;
  background: var(--orange-gradient);
  color: #fff;
}

.offer-badge {
  position: absolute;
  top: -18px;
  left: 81px;
  display: grid;
  place-items: center;
  inline-size: 205px;
  block-size: 37px;
  line-height: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .45px;
}

.offer-title {
  font-size: 35px;
  font-weight: 200;
  min-block-size: 25px;
}

.lesson-list {
  inline-size: 330px;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: lessons;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
}

.lesson-list li {
  counter-increment: lessons;
}

.lesson-list li::before {
  content: counter(lessons, decimal-leading-zero) ". ";
}

.offer-savings {
  position: absolute;
  top: 234px;
  left: 25px;
  color: #ffeab5;
  font-size: 18px;
  font-weight: 700;
}

.buy-button {
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 368px;
  block-size: 60px;
  margin-block-start: 6px;
  padding: 0;
  font: 300 15px/25px "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.buy-button span {
  display: block;
  inline-size: 161px;
  margin-inline-start: 83px;
}

.buy-button img {
  position: absolute;
  left: 264px;
  top: 26.318px;
}

.details-caption {
  position: relative;
  inline-size: 211px;
  margin: 29px 0 0 15px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  line-height: 17px;
}

.details-caption img {
  position: absolute;
  left: -15px;
  top: 0;
  transform-origin: 0 50%;
  transform: translateY(-50%) rotate(90deg);
}

.audience {
  min-block-size: 631px;
  padding-block-start: 93px;
  isolation: isolate;
}

.audience-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  isolation: isolate;
  pointer-events: none;
  mask: url("assets/audience-mask.svg") no-repeat;
  background: #fff;
  filter: invert(1);
}

.audience-backdrop img {
  position: absolute;
}

.audience-texture {
  left: -78px;
  top: -208px;
  width: 508px;
  height: 900px;
  object-fit: cover;
  filter: invert(1);
  transform: scaleY(-1);
}

.audience-shadow {
  transform: rotate(-35.42deg);
  filter: invert(1);
  transform-origin: 100px 100px;
}

.audience-shadow-left {
  left: -456.848px;
  top: 430.375px;
}

.audience-shadow-right {
  left: 127.219px;
  top: 483.267px;
}

.audience-shadow-edge {
  left: 3.428px;
  top: 620.562px;
}

.audience-shadow-top {
  left: -163.937px;
  top: -477.481px;
  transform-origin: 300px 300px;
}

.audience-shadow-center {
  left: -583.59px;
  top: -170.214px;
  transform-origin: 300px 300px;
  mix-blend-mode: plus-lighter;
}

.audience-title span,
.audience-number,
.audience-list p {
  text-box: trim-both cap alphabetic;
}

.audience-title span {
  display: block;
}

.audience-title-main {
  margin-inline-start: 74px;
  inline-size: 199px;
  text-align: center;
  font-size: 45px;
  font-weight: 500;
}

.audience-title-script {
  margin: 19px 0 0 97px;
  color: var(--ice);
  font: italic 500 40px Cormorant, "Cormorant Cyrillic", Georgia, serif;
}

.audience-list {
  position: absolute;
  inset: 213px 30px auto 31px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audience-list li {
  position: relative;
  display: grid;
  grid-template-columns: 115px 1fr;
  align-items: start;
  min-block-size: 100px;
}

.audience-list li:nth-child(2) {
  margin-inline-start: 30px;
  min-block-size: 109px;
}

.audience-list li:nth-child(3) {
  margin-inline-start: 80px;
}

.audience-number {
  color: var(--ice);
  font: italic 300 110px/110px Cormorant, Georgia, serif;
  transform: translateY(-7px);
}

.audience-icon {
  position: absolute;
  top: 33px;
  left: 61px;
  border-radius: 50%;
  backdrop-filter: blur(10px);
}

.audience-list li:nth-child(n+2) .audience-icon {
  left: 68px;
}

.audience-icon img:nth-child(2) {
  position: absolute;
  top: 7px;
  left: 11px;
}

.audience-list li:nth-child(2) .audience-icon img:nth-child(2) {
  top: 8px;
  left: 8px;
}

.audience-list li:nth-child(3) .audience-icon img:nth-child(2) {
  top: 9px;
  left: 9px;
}

.audience-list p {
  margin-block-start: 25px;
  max-inline-size: 180px;
  font-size: 15px;
  line-height: 18px;
}

.audience-list li:nth-child(2) p {
  max-inline-size: 201px;
}

.lessons {
  padding-block-end: 80px;
}

.lessons-title-main,
.lessons-title-script,
.lesson-meta span,
.lesson h3,
.lesson-summary,
.lesson-topics li {
  text-box: trim-both cap alphabetic;
}

.lessons-title-main,
.lessons-title-script {
  display: block;
}

.lessons-title-main {
  margin-inline-start: 29px;
  font: 500 42px/50px "Helvetica Neue", Arial, sans-serif;
}

.lessons-title-main > span {
  margin-inline-start: 1.39em;
}

.lessons-title-script {
  margin: 25px 0 0 104px;
  color: var(--ice);
  font: italic 500 40px/40px Cormorant, "Cormorant Cyrillic", Georgia, serif;
}

.lessons-title-script > span {
  margin-inline-start: 28px;
}

.lessons-cards {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin: 70px 30px 0 31px;
  inline-size: 367px;
}

.lesson {
  --photo-width: 450px;
  --photo-left: -42px;
  --photo-overlap: 0px;
  --divider-gap: 23px;
  --topics-offset: 230px;
  --topics-width: 285px;
  --summary-width: 299px;
  --summary-height: 47px;
  position: relative;
}

.lesson-crystal {
  --lesson-mask: url("assets/lesson-mask-crystal.svg");
  --body-height: 395px;
  --photo-left: -73px;
  --topics-width: 263px;
  --summary-width: 271px;
}

.lesson-volume {
  --lesson-mask: url("assets/lesson-mask-volume.svg");
  --body-height: 420px;
  --photo-overlap: -10px;
  --divider-gap: 33px;
  --topics-width: 235px;
  --summary-width: 313px;
}

.lesson-smile {
  --lesson-mask: url("assets/lesson-mask-smile.svg");
  --body-height: 471px;
  --photo-width: 449px;
  --photo-overlap: -86px;
  --divider-gap: 24px;
  --topics-offset: 209px;
  --topics-width: 242px;
  --summary-height: 29px;
}

.lesson-french {
  --lesson-mask: url("assets/lesson-mask-french.svg");
  --body-height: 425px;
  --divider-gap: 20px;
  --topics-offset: 235px;
  --topics-width: 285px;
  --summary-width: 308px;
  --summary-height: 65px;
}

.lesson-body {
  position: relative;
  isolation: isolate;
  block-size: var(--body-height);
  padding: 43px 24px 0 41px;
}

.lesson-body::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  border: 1px solid #121212;
  border-radius: 40px;
  background: #050505;
  content: "";
}

.lesson-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  mask: var(--lesson-mask) no-repeat;
  pointer-events: none;
}

.lesson-art img {
  position: absolute;
  top: 0;
  left: -20px;
  width: 780px;
  height: 586px;
  object-fit: cover;
  mask: url("assets/lesson-mask-texture.svg") -320.5px -298px no-repeat;
}

.lesson-art::after {
  position: absolute;
  inset: 0;
  background: url("assets/grain.png") -42px -162px repeat;
  opacity: .2;
  content: "";
}

.lesson-meta {
  display: flex;
  justify-content: space-between;
  align-items: start;
  font-size: 16px;
  line-height: 19px;
}

.lesson h3 {
  margin: 38px 0 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 23px;
}

.lesson-summary {
  margin-block-start: 28.5px;
  inline-size: var(--summary-width);
  min-block-size: var(--summary-height);
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
}

.lesson-topics {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  top: var(--topics-offset);
  left: 55px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 17px;
}

.lesson-topics li {
  position: relative;
  inline-size: var(--topics-width);
}

.lesson-topics li::before {
  position: absolute;
  top: 4px;
  left: -12px;
  inline-size: 3px;
  block-size: 3px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.lesson-volume .lesson-topics li:first-child {
  inline-size: 288px;
}

.lesson-smile .lesson-topics li:first-child {
  inline-size: 285px;
}

.lesson-french .lesson-topics li:nth-child(n+3) {
  inline-size: 276px;
}

.lesson-photo {
  position: relative;
  block-size: 253px;
  margin-block-start: var(--photo-overlap);
  mask: url("assets/lesson-mask-photo.svg") no-repeat;
}

.lesson-photo img {
  position: absolute;
  left: var(--photo-left);
  top: 0;
  width: var(--photo-width);
  height: 253px;
  object-fit: cover;
}

/* Match Figma's rendered channel values for the three tagged Display P3 photos. */
.lesson:not(.lesson-french) .lesson-photo img {
  filter: url("assets/lesson-photo-color.svg#figma-color");
}

.lesson-french .lesson-photo img {
  left: 404px;
  width: 260px;
  height: 462px;
  transform: rotate(90deg);
  transform-origin: top left;
}

.lesson-divider {
  margin: var(--divider-gap) auto 0;
  transform: translateX(-.5px);
}

.package-title,
.package-label,
.package-description,
.package-pricing p,
.package-cta span {
  text-box: trim-both cap alphabetic;
}

.package-title {
  inline-size: 401px;
  margin-inline-start: 13px;
  font-size: 45px;
  font-weight: 500;
  line-height: 50px;
  text-align: center;
}

.package-card {
  position: relative;
  isolation: isolate;
  inline-size: 367px;
  min-block-size: 661px;
  margin: 40px 0 0 30px;
  padding: 41px 0 30px 36px;
}

.package-card::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  border-radius: 40px;
  background: #2c2c2c;
  box-shadow: 0 0 0 1px #121212;
  content: "";
}

.package-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  isolation: isolate;
  pointer-events: none;
  mask: url("assets/package-mask.svg") no-repeat;
  /* Inverted additive blending applies the authored Linear Burn effect. */
  background: #d3d3d3;
  filter: invert(1);
}

.package-art img {
  position: absolute;
}

.package-texture {
  left: -48px;
  top: -80px;
  width: 463px;
  height: 821px;
  object-fit: cover;
  filter: invert(1);
}

.package-glow {
  left: -184px;
  top: -194px;
  mix-blend-mode: plus-lighter;
  filter: invert(1);
}

.package-label {
  font-size: 30px;
  font-weight: 500;
}

.package-card .lesson-list {
  inline-size: 320px;
  margin-block-start: 58px;
}

.package-description {
  inline-size: 238px;
  margin: 45px 0 0 1px;
  font-size: 15px;
  line-height: 18px;
}

.package-pricing {
  inline-size: 238px;
  margin: 86px 0 0 28px;
  text-align: center;
}

.package-price-label {
  color: #939393;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: pre-wrap;
}

.package-price {
  margin-block-start: 18px;
  color: var(--ice);
  font: italic 500 90px/40px Cormorant, Georgia, serif;
}

.package-price span {
  font-size: 40px;
}

.package-savings {
  margin-block-start: 27px;
  color: #ffeab5;
  font-size: 18px;
  font-weight: 700;
}

.package-cta {
  display: grid;
  place-items: center;
  text-decoration: none;
  inline-size: 320px;
  block-size: 75px;
  margin: 39px 0 0 -13px;
  border-color: transparent;
  padding: 0;
  background:
    var(--orange-gradient) padding-box,
    linear-gradient(170deg, #ff2500 36.2%, #ff6704) border-box;
  font: 700 18px "Helvetica Neue", Arial, sans-serif;
}

.package-cta span {
  transform: translateY(-1px);
}

.training {
  min-block-size: 985px;
  padding: 103px 30px 123px 31px;
  isolation: isolate;
}

.training-backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  isolation: isolate;
  pointer-events: none;
  mask: url("assets/format-mask.svg") no-repeat;
  background: #fff;
  filter: invert(1);
}

.training-backdrop img {
  position: absolute;
  filter: invert(1);
}

.training-fabric {
  top: -8px;
  left: -87px;
  width: 515px;
  height: 918px;
  object-fit: cover;
}

.training-shade {
  transform-origin: 20px 20px;
}

.training-upper-right {
  top: -46.802px;
  left: 226.584px;
  transform: rotate(-11.05deg);
}

.training-upper-left {
  top: -46.802px;
  left: 134.326px;
  transform: rotate(11.05deg) scaleX(-1);
}

.training-lower-right {
  top: 894.067px;
  left: 468.723px;
  transform: rotate(61.28deg) scaleX(-1);
}

.training-lower {
  top: 937px;
  left: -53px;
  transform: scaleY(-1);
}

.training-burn {
  top: -123px;
  left: -204px;
  mix-blend-mode: plus-lighter;
}

.training-title span,
.training-number,
.training-step-text p,
.training-note p {
  text-box: trim-both cap alphabetic;
}

.training-title span {
  display: block;
}

.training-title-main {
  inline-size: 183px;
  margin-inline-start: 76px;
  font-size: 45px;
  font-weight: 500;
  line-height: 50px;
  text-align: center;
}

.training-title-script {
  margin: 17px 0 0 145px;
  color: var(--ice);
  font: italic 500 40px/40px "Cormorant Cyrillic", Georgia, serif;
}

.training-steps {
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}

.training-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 81px 1fr;
  min-block-size: 107px;
}

.training-steps li::before {
  position: absolute;
  top: -1px;
  left: 0;
  inline-size: 366px;
  block-size: 1px;
  background: url("assets/format-divider.svg") no-repeat;
  content: "";
}

.training-steps li:nth-child(3) {
  min-block-size: 92px;
}

.training-number {
  align-self: start;
  margin-block-start: 18px;
  color: var(--ice);
  font: italic 500 60px/40px Cormorant, Georgia, serif;
}

.training-step-text {
  padding-block-start: 30px;
  font-size: 15px;
  line-height: 18px;
}

.training-step-text > p:first-child {
  max-inline-size: 240px;
}

.training-steps li:nth-child(2) .training-step-text > p:first-child {
  max-inline-size: 218px;
}

.training-steps li:last-child .training-step-text > p:first-child {
  max-inline-size: 285px;
}

.training-community-note {
  inline-size: 249px;
  margin-block-start: 20px;
  color: var(--ice);
  font-style: italic;
}

.training-note {
  position: relative;
  isolation: isolate;
  inline-size: 367px;
  block-size: 150px;
  margin-block-start: 22.25px;
  padding: 27px 0 0 84px;
  border-radius: 30px;
  background: #0d0d0d;
  box-shadow: 0 0 0 1px #1a1a1a;
}

.training-note-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  mask: url("assets/format-note-mask.svg") no-repeat;
}

.training-note-art img {
  position: absolute;
  top: -22px;
  left: -81px;
  width: 528px;
  height: 298px;
  object-fit: cover;
}

.training-note-star {
  position: absolute;
  top: 27.894px;
  left: 61.104px;
  transform: rotate(-10.47deg);
  transform-origin: top left;
}

.training-note p {
  inline-size: 236px;
  color: var(--muted);
  font-size: 12px;
  line-height: 14px;
}

.faq {
  min-block-size: 628px;
  padding: 0 31px;
}

.faq-title {
  inline-size: 341px;
  margin-inline-start: 12px;
  font-size: 45px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  text-box: trim-both cap alphabetic;
}

.faq-questions {
  margin-block-start: 36.875px;
}

.faq-item {
  position: relative;
  min-block-size: 99px;
  padding-block: 30px;
}

.faq-item[open]:first-child {
  min-block-size: 185px;
  padding-block-end: 29px;
}

.faq-item::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  block-size: 1px;
  background: url("assets/faq-divider.svg") no-repeat;
  pointer-events: none;
  content: "";
}

.faq-item summary {
  display: grid;
  grid-template-columns: 21px 1fr;
  align-items: start;
  padding: 0 48px 0 6px;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-number,
.faq-question {
  text-box: trim-both cap alphabetic;
}

.faq-question {
  max-inline-size: 273px;
}

.faq-item:nth-child(2) .faq-question {
  max-inline-size: 220px;
}

.faq-item:nth-child(3) .faq-question {
  max-inline-size: 267px;
}

.faq-item:nth-child(4) .faq-question {
  max-inline-size: 248px;
}

.faq-icon {
  position: absolute;
  right: -.2px;
  top: 37px;
}

.faq-item:nth-child(2) .faq-icon {
  top: 36px;
}

.faq-item:nth-child(3) .faq-icon {
  top: 30px;
}

.faq-icon-close,
.faq-item[open] .faq-icon-open {
  display: none;
}

.faq-item[open] .faq-icon-close {
  display: block;
  transform: rotate(-45deg);
}

.faq-item[open]:first-child .faq-icon-close {
  top: 108px;
}

.faq-answer {
  max-inline-size: 298px;
  margin: 28px 0 0 27px;
  font-size: 15px;
  font-style: italic;
  line-height: 20px;
}

.site-footer {
  padding: 80px 39px 34px;
  background: #030303;
  font-family: "Footer Helvetica Neue", "Footer Roboto", Arial, sans-serif;
  font-weight: 300;
  text-align: center;
}

.site-footer a {
  text-decoration: none;
}

.footer-company {
  color: #b7c4d4;
  font-size: 20px;
  line-height: 18px;
  text-transform: uppercase;
  transform: translateY(1px);
}

.footer-address {
  margin: 26px auto 0;
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
}

.footer-address a {
  display: inline-block;
  margin-block-start: 11px;
}

.footer-socials {
  display: grid;
  grid-template-columns: repeat(3, 90px);
  justify-content: center;
  gap: 20px;
  margin-block-start: 33px;
}

.footer-social {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  block-size: 90px;
  padding-block-start: 20px;
  border: 1px solid rgb(183 196 212 / 10%);
  border-radius: 25px;
  background:
    radial-gradient(ellipse 107.59px 104.28px at 79.765px 0, rgb(127 151 176 / 30%), transparent) border-box,
    radial-gradient(ellipse 35.446px 48.571px at 27.882px 90px, rgb(127 151 176 / 20%), transparent) border-box,
    #0c0c0c;
  font-size: 10px;
  line-height: 12.05px;
  text-transform: uppercase;
}

.footer-social:nth-child(1) img {
  width: 32px;
  height: 32px;
}

.footer-social:nth-child(2) img {
  width: 30px;
  height: 30px;
  transform: translate(.5px, 1px);
}

.footer-social:nth-child(3) img {
  width: 29px;
  height: 29px;
  transform: translate(-.5px, 2px);
}

.footer-social span {
  position: absolute;
  margin-block-start: 41px;
  transform: translateX(.5px);
}

.footer-social:nth-child(3) span {
  transform: translateX(-1px);
}

.footer-legal {
  margin-block-start: 20px;
  font-size: 16px;
  line-height: 25px;
  text-decoration: underline;
  text-underline-position: from-font;
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}