:root {
  --ysNavy: hsl(214 52% 15%);
  --ysNavyDeep: hsl(216 58% 9%);
  --ysNavySoft: hsl(212 38% 24%);
  --ysTeal: hsl(181 62% 30%);
  --ysTealDeep: hsl(184 68% 22%);
  --ysAqua: hsl(166 58% 62%);
  --ysAquaPale: hsl(166 60% 80%);
  --ysTint: hsl(172 40% 91%);
  --ysWhite: hsl(180 30% 99%);
  --ysInk: hsl(214 35% 14%);
  --ysMuted: hsl(212 18% 36%);
  --ysLine: hsl(200 22% 80%);
  --ysHead: "Outfit", "Segoe UI", sans-serif;
  --ysBody: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --ysWrap: min(91%, 71rem);
  --ysPad: clamp(4.5rem, 10.5vw, 9.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ysWhite);
  color: var(--ysInk);
  font-family: var(--ysBody);
  font-size: 1.2rem;
  line-height: 1.62;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--ysHead); margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
s, del { opacity: .72; text-decoration-thickness: 2px; }

.ysWrap { width: var(--ysWrap); margin-inline: auto; }
.ysSec { padding-block: var(--ysPad); }
.ysSec h2 {
  font-size: clamp(2.1rem, 4.3vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  max-width: 18ch;
}
.ysEyebrow {
  font-family: var(--ysHead);
  font-size: .95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  margin-bottom: 1.1rem;
}

.ysBtn {
  display: inline-grid;
  place-items: center;
  min-height: 58px;
  padding: 1.05rem 2.7rem;
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--ysHead);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ysBtnLight { background: var(--ysAqua); color: var(--ysNavyDeep); }
.ysBtnLight:hover, .ysBtnLight:focus-visible { background: var(--ysWhite); }
.ysBtnDark { background: var(--ysNavy); color: var(--ysWhite); }
.ysBtnDark:hover, .ysBtnDark:focus-visible { background: var(--ysTealDeep); }
.ysBtn:focus-visible { outline: 3px solid var(--ysAqua); outline-offset: 4px; }

.ysPoster {
  background: var(--ysNavy);
  color: var(--ysWhite);
  padding: clamp(.9rem, 2.4vw, 2rem);
}

.ysFrame {
  border: 6px double hsl(166 58% 62% / .55);
  padding: clamp(1.1rem, 3.5vw, 3.4rem);
  display: flex;
  flex-direction: column;
}

.ysPosterTop {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid hsl(166 58% 62% / .35);
  font-family: var(--ysHead);
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ysAquaPale);
}

.ysPosterGrid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(16rem, 25rem) 1fr;
  align-items: center;
  column-gap: clamp(2.2rem, 5.5vw, 5.5rem);
  padding-block: clamp(2rem, 5vw, 4.6rem) clamp(1rem, 3vw, 2.6rem);
}

.ysPosterText { grid-column: 2; grid-row: 1; }
.ysCoverBox { grid-column: 1; grid-row: 1; margin: 0; }

.ysPoster h1 {
  font-size: clamp(2.7rem, 6.3vw, 5.9rem);
  line-height: 1;
  font-weight: 800;
  margin-bottom: 1.4rem;
}

.ysPoster h1 em { font-style: normal; color: var(--ysAqua); }
.ysKicker { color: var(--ysAqua); }
.ysLead { font-size: clamp(1.15rem, 1.7vw, 1.4rem); max-width: 34ch; color: hsl(180 25% 88%); }

.ysPriceLine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1.2rem;
  margin: 1.7rem 0 1.8rem;
  padding: .85rem 0;
  border-block: 1px solid hsl(166 58% 62% / .45);
  font-family: var(--ysHead);
}

.ysPriceLine span {
  font-size: .9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ysAquaPale);
}
.ysPriceLine strong { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; line-height: 1; }
.ysPriceLine s { font-size: 1.35rem; }
.ysTiny { margin-top: 1rem; font-size: .98rem; color: hsl(180 20% 80%); }

.ysCoverMat {
  padding: .9rem;
  background: var(--ysNavyDeep);
  border: 1px solid hsl(166 58% 62% / .5);
  outline: 1px solid hsl(166 58% 62% / .2);
  outline-offset: 7px;
}

.ysCoverImg, .ysMini, .ysThanksCover { object-fit: contain; width: 100%; height: auto; }

.ysCoverBox figcaption {
  margin-top: 1.1rem;
  text-align: center;
  font-size: .9rem;
  letter-spacing: .08em;
  color: var(--ysAquaPale);
}

.ysGain { background: var(--ysWhite); }
.ysGain .ysEyebrow { color: var(--ysTeal); }
.ysGain h2 { margin-bottom: clamp(2.6rem, 5vw, 4.4rem); }

.ysGainList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 2px solid var(--ysNavy);
}

.ysGainList li {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 1rem;
  padding: 2rem 1.6rem 2.2rem 0;
  border-bottom: 1px solid var(--ysLine);
  font-size: clamp(1.18rem, 1.6vw, 1.35rem);
}

.ysGainList li:nth-child(even) { padding-left: 1.6rem; border-left: 1px solid var(--ysLine); }

.ysNum {
  font-family: var(--ysHead);
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--ysTeal);
}

.ysGainList b {
  display: block;
  font-family: var(--ysHead);
  font-size: 1.45rem;
  margin-bottom: .3rem;
}

.ysWho { background: var(--ysTint); }

.ysWhoGrid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(2.4rem, 6vw, 6rem);
  align-items: start;
}

.ysPlate {
  position: sticky;
  top: 2rem;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--ysTeal);
  color: var(--ysWhite);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.4rem), calc(100% - 2.4rem) 100%, 0 100%);
}

.ysPlate p {
  font-family: var(--ysHead);
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.03em;
}

.ysPlate p span { display: block; }
.ysPlate p span:nth-child(2) { color: var(--ysAquaPale); padding-left: .6em; }
.ysPlate p span:nth-child(3) { padding-left: 1.2em; }
.ysPlate small {
  display: block;
  margin-top: 1.6rem;
  font-size: 1rem;
  color: hsl(170 50% 92%);
}

.ysWho .ysEyebrow { color: var(--ysTealDeep); }
.ysWho h2 { margin-bottom: 2.2rem; }
.ysWhoList { display: grid; gap: 1.1rem; }

.ysWhoList li {
  padding: 1.4rem 1.6rem;
  background: var(--ysWhite);
  border-left: 5px solid var(--ysAqua);
  font-size: 1.18rem;
}

.ysWhoList strong {
  font-family: var(--ysHead);
  font-size: 1.3rem;
  display: block;
  color: var(--ysNavy);
}

.ysInside { background: var(--ysNavy); color: var(--ysWhite); }
.ysInside .ysEyebrow { color: var(--ysAqua); }
.ysInsideHead {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.8rem, 6vw, 5rem);
}
.ysInsideHead p:last-child { max-width: 28ch; color: hsl(180 20% 82%); }

.ysSteps {
  counter-reset: ysPart;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2.4rem;
}

.ysSteps li {
  counter-increment: ysPart;
  position: relative;
  padding: 2.6rem 0 2.4rem;
  border-top: 1px solid hsl(166 58% 62% / .35);
}

.ysSteps li::before {
  content: "0" counter(ysPart);
  display: block;
  font-family: var(--ysHead);
  font-size: clamp(3rem, 5vw, 4.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--ysAqua);
  margin-bottom: 1rem;
}

.ysSteps li::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--ysAqua);
}

.ysSteps h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: .5rem; }
.ysSteps p { font-size: 1.12rem; color: hsl(180 18% 84%); }

.ysExcerpt { background: var(--ysTeal); color: var(--ysWhite); }
.ysExcerpt .ysWrap { max-width: 58rem; }
.ysExcerpt .ysEyebrow { color: var(--ysAquaPale); }
.ysExcerpt h2 { margin-bottom: 2.2rem; }

.ysQuote {
  position: relative;
  margin: 0;
  padding-left: clamp(1.4rem, 4vw, 3.4rem);
  border-left: 3px solid var(--ysAqua);
}

.ysQuote::before {
  content: "\201C";
  position: absolute;
  top: -7.4rem;
  right: 0;
  font-family: var(--ysHead);
  font-size: clamp(7rem, 14vw, 11rem);
  line-height: 1;
  color: hsl(166 58% 62% / .35);
}

.ysQuote p {
  font-family: var(--ysHead);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  line-height: 1.5;
}
.ysQuote p + p { margin-top: 1.1rem; }
.ysQuote cite {
  display: block;
  margin-top: 1.6rem;
  font-style: normal;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ysAquaPale);
}

.ysAuthor {
  margin-top: clamp(3rem, 6vw, 4.6rem);
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.6rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(0 0% 100% / .3);
}

.ysAuthor h3 { font-size: 1.35rem; font-weight: 600; color: var(--ysAquaPale); }
.ysAuthor p { font-size: 1.15rem; }

.ysFaq { background: var(--ysWhite); }
.ysFaqGrid { display: grid; grid-template-columns: minmax(14rem, 1fr) 2fr; gap: clamp(2rem, 5vw, 5.4rem); }
.ysFaq .ysEyebrow { color: var(--ysTeal); }
.ysFaqAside p:last-child { margin-top: 1.4rem; color: var(--ysMuted); font-size: 1.1rem; }

.ysFaqList details { border-bottom: 1px solid var(--ysLine); }
.ysFaqList details:first-child { border-top: 2px solid var(--ysNavy); }

.ysFaqList summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.35rem 0;
  font-family: var(--ysHead);
  font-size: clamp(1.22rem, 1.8vw, 1.45rem);
  font-weight: 600;
}

.ysFaqList summary::-webkit-details-marker { display: none; }
.ysFaqList summary::after {
  content: "+";
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ysTeal);
  color: var(--ysTeal);
  font-weight: 400;
}
.ysFaqList details[open] summary::after { content: "\2212"; background: var(--ysTeal); color: var(--ysWhite); }
.ysFaqList summary:focus-visible { outline: 2px solid var(--ysTeal); outline-offset: 3px; }
.ysFaqList details p { padding: 0 3rem 1.6rem 0; color: var(--ysMuted); font-size: 1.15rem; }

.ysOrder { background: var(--ysTint); }
.ysOrderGrid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.4rem, 5.6vw, 5.8rem);
  align-items: start;
}
.ysOrder .ysEyebrow { color: var(--ysTealDeep); }
.ysOrder h2 { margin-bottom: 2rem; }

.ysOffer {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1.6rem;
  align-items: center;
}
.ysMini { border: 1px solid var(--ysLine); background: var(--ysWhite); padding: .4rem; }
.ysOfferPrice strong {
  display: block;
  font-family: var(--ysHead);
  font-size: clamp(2.3rem, 4vw, 3.1rem);
  line-height: 1;
  color: var(--ysNavy);
}
.ysOfferPrice s { display: inline-block; margin-top: .4rem; font-size: 1.2rem; }
.ysOfferPrice span {
  display: block;
  margin-top: .6rem;
  font-size: .98rem;
  color: var(--ysMuted);
}

.ysIncl { margin-top: 2.2rem; display: grid; gap: .7rem; }
.ysIncl li { position: relative; padding-left: 2rem; font-size: 1.15rem; }
.ysIncl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 1rem;
  height: 2px;
  background: var(--ysTeal);
}

.ysForm {
  background: var(--ysWhite);
  border: 2px solid var(--ysNavy);
  padding: clamp(1.6rem, 4vw, 3rem);
  box-shadow: 10px 10px 0 var(--ysAqua);
}

.ysForm h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
  color: var(--ysNavy);
}
.ysField { display: grid; gap: .45rem; margin-bottom: 1.3rem; }
.ysField label { font-weight: 700; font-size: 1rem; letter-spacing: .02em; }

.ysField input {
  width: 100%;
  min-height: 58px;
  padding: .9rem 1rem;
  border: 1.5px solid hsl(212 25% 62%);
  border-radius: 0;
  background: var(--ysWhite);
  color: var(--ysInk);
  font: inherit;
  font-size: 1.15rem;
}

.ysField input:focus { outline: none; border-color: var(--ysTeal); box-shadow: inset 0 -3px 0 var(--ysTeal); }
.ysForm .ysBtn { width: 100%; margin-top: .4rem; }
.ysNote { margin-top: 1.1rem; font-size: .95rem; color: var(--ysMuted); }
.ysNote a { color: var(--ysTealDeep); font-weight: 600; }

.ysCaution {
  margin-top: 1.8rem;
  padding: 1.1rem 1.3rem;
  border: 1px dashed hsl(184 40% 45%);
  font-size: .96rem;
  line-height: 1.55;
  color: var(--ysInk);
}

.ysFoot {
  background: var(--ysNavyDeep);
  color: hsl(180 18% 82%);
  padding: clamp(3rem, 6vw, 4.4rem) 0 2.4rem;
  font-size: 1rem;
}
.ysFootRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.6rem 3rem;
  align-items: start;
}
.ysFootLinks { display: flex; flex-direction: column; gap: .55rem; }
.ysFootLinks a { text-decoration: none; border-bottom: 1px solid hsl(166 58% 62% / .4); align-self: start; }
.ysFootLinks a:hover, .ysFootLinks a:focus-visible { color: var(--ysAqua); border-color: var(--ysAqua); }
.ysFootTitle {
  font-family: var(--ysHead);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ysWhite);
  max-width: 20ch;
  line-height: 1.2;
}
.ysFootBase {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid hsl(0 0% 100% / .12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 2rem;
  font-size: .92rem;
}

.ysDocTop { background: var(--ysNavy); color: var(--ysWhite); padding: clamp(2.4rem, 6vw, 4.6rem) 0 clamp(2rem, 5vw, 3.6rem); }
.ysBack {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--ysAqua);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
}
.ysBack:hover, .ysBack:focus-visible { text-decoration: underline; }
.ysDocTop h1 {
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.05;
  font-weight: 800;
  max-width: 20ch;
}
.ysDocDate { margin-top: 1.1rem; color: var(--ysAquaPale); font-size: 1rem; }

.ysDoc { padding-block: clamp(3rem, 7vw, 5.6rem); background: var(--ysWhite); }
.ysDoc .ysWrap { max-width: 50rem; }
.ysDocIntro { font-size: 1.25rem; margin-bottom: 2.4rem; }
.ysDocPart { padding: .2rem 0 .2rem 1.6rem; border-left: 3px solid var(--ysTeal); margin-bottom: 2.6rem; }
.ysDocPart h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  margin-bottom: .8rem;
  color: var(--ysNavy);
}
.ysDocPart p, .ysDocPart li { font-size: 1.12rem; color: hsl(214 25% 22%); }
.ysDocPart p + p, .ysDocPart p + ul, .ysDocPart ul + p { margin-top: .8rem; }
.ysDocPart ul { display: grid; gap: .45rem; }
.ysDocPart ul li { position: relative; padding-left: 1.4rem; }
.ysDocPart ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: .55rem;
  height: .55rem;
  background: var(--ysAqua);
}

.ysDocFaq details { border: 1px solid var(--ysLine); margin-bottom: .8rem; background: hsl(172 40% 96%); }
.ysDocFaq summary {
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-family: var(--ysHead);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ysNavy);
}
.ysDocFaq summary:focus-visible { outline: 2px solid var(--ysTeal); }
.ysDocFaq details > div { padding: 0 1.3rem 1.2rem; }
.ysDocFaq details p { font-size: 1.1rem; }
.ysDocFaq details p + p { margin-top: .7rem; }

.ysTrack { counter-reset: ysStage; margin: 1rem 0 2.6rem; }
.ysTrack li { counter-increment: ysStage; position: relative; padding: 0 0 2rem 4rem; }
.ysTrack li::before {
  content: counter(ysStage);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  background: var(--ysNavy);
  color: var(--ysAqua);
  font-family: var(--ysHead);
  font-weight: 700;
}
.ysTrack li::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.8rem;
  bottom: .3rem;
  width: 2px;
  background: var(--ysLine);
}
.ysTrack li:last-child::after { display: none; }
.ysTrack h2 { font-size: 1.45rem; margin-bottom: .4rem; color: var(--ysNavy); }
.ysTrack p { font-size: 1.12rem; }

.ysThanks {
  background: var(--ysNavy);
  color: var(--ysWhite);
  min-height: 40rem;
  padding-block: clamp(3.4rem, 9vw, 7.5rem);
}
.ysThanksGrid {
  display: grid;
  grid-template-columns: 1fr 13rem;
  gap: clamp(2rem, 5vw, 4.6rem);
  align-items: start;
}
.ysThanks h1 {
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  line-height: 1.02;
  font-weight: 800;
  margin-bottom: 1.4rem;
}
.ysThanks h1 span { color: var(--ysAqua); }
.ysThanksLead { font-size: clamp(1.18rem, 1.8vw, 1.4rem); max-width: 40ch; color: hsl(180 25% 88%); }
.ysThanksCover { border: 1px solid hsl(166 58% 62% / .5); padding: .6rem; background: var(--ysNavyDeep); }

.ysNext {
  margin-top: 2.6rem;
  display: grid;
  gap: 1rem;
  counter-reset: ysNext;
  max-width: 44rem;
}
.ysNext li {
  counter-increment: ysNext;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(166 58% 62% / .3);
  font-size: 1.12rem;
}
.ysNext li::before {
  content: counter(ysNext);
  font-family: var(--ysHead);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--ysAqua);
}
.ysThanks .ysBtn { margin-top: 2.4rem; }

@media (max-width: 960px) {
  .ysFrame { padding-bottom: 2rem; }
  .ysPosterGrid { grid-template-columns: 1fr; row-gap: 2.4rem; padding-top: 1.4rem; }
  .ysPosterText, .ysCoverBox { grid-column: 1; grid-row: auto; }
  .ysCoverBox { width: 60%; max-width: 16rem; margin-inline: auto; }
  .ysWhoGrid, .ysFaqGrid, .ysOrderGrid { grid-template-columns: 1fr; }
  .ysPlate { position: static; }
  .ysSteps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 1.15rem; }
  .ysPoster { padding: .55rem; }
  .ysFrame { border-width: 4px; padding: 1rem .95rem 1.6rem; }
  .ysPosterTop { font-size: .7rem; letter-spacing: .14em; }
  .ysPosterTop span:last-child { display: none; }
  .ysPoster h1 { font-size: 2.65rem; margin-bottom: 1rem; }
  .ysPriceLine { margin: 1.2rem 0 1.3rem; }
  .ysBtn { width: 100%; padding-inline: 1.2rem; }
  .ysGainList { grid-template-columns: 1fr; }
  .ysGainList li, .ysGainList li:nth-child(even) { grid-template-columns: 3.4rem 1fr; padding: 1.6rem 0; border-left: 0; }
  .ysNum { font-size: 2.1rem; }
  .ysSteps { grid-template-columns: 1fr; }
  .ysAuthor { grid-template-columns: 1fr; gap: .6rem; }
  .ysFaqList details p { padding-right: 0; }
  .ysOffer { grid-template-columns: 6.5rem 1fr; gap: 1.1rem; }
  .ysForm { box-shadow: 6px 6px 0 var(--ysAqua); }
  .ysThanksGrid { grid-template-columns: 1fr; }
  .ysThanksCover { width: 9rem; }
  .ysDocPart { padding-left: 1rem; }
  .ysTrack li { padding-left: 3.4rem; }
}