.promo-main {
  --promo-ink: #0e3a5c;
  --promo-paper: #d1d2d445;
  --promo-pad: clamp(20px, 4.6vw, 72px);
  background: var(--promo-paper);
  color: var(--promo-ink);
}
.promo-main :is(section, a) { scroll-margin-top: calc(var(--header, 80px) + 16px); }
.promo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 17px var(--promo-pad);
  background: #98d5e843;
  border-bottom: 1px solid #a8bbc8;
}
.promo-toolbar strong { font-size: 15px; }
.promo-toolbar p { margin: 3px 0 0; font-size: 14px; }
.promo-toolbar nav { display: flex; flex-wrap: wrap; gap: 5px 18px; }
.promo-toolbar nav a, .promo-reference a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.promo-main .web-arrow { width: 17px; height: 17px; }
.promo-campaign {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5.5vw, 90px);
  padding: clamp(32px, 3.5vw, 56px) var(--promo-pad);
}
.promo-campaign h1, .promo-campaign h2 {
  font-size: clamp(44px, 5.15vw, 88px);
  letter-spacing: -.07em;
  line-height: .96;
  margin: 22px 0;
}
.promo-campaign h1 em { color: #0e3a5c; }
.promo-campaign h2 em { color: #34657f; }
.promo-eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: .15em;
  font-weight: 700;
}
.promo-description { max-width: 33ch; margin: 20px 0 27px; font-size: clamp(18px, 2vw, 24px); line-height: 1.4; }
.promo-offer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 15px 0 18px;
  margin-bottom: 18px;
  border-top: 1px solid #a8bbc8;
  border-bottom: 1px solid #a8bbc8;
}
.promo-price, .promo-audience { margin: 0; }
.promo-price > span, .promo-audience > span { font-size: 13px; }
.promo-price strong { display: block; font-size: clamp(28px, 3vw, 43px); line-height: 1.1; letter-spacing: -.045em; }
.promo-audience { font-weight: 700; }
.promo-audience > span { font-weight: 400; }
.promo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: fit-content;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid transparent;
  background: #ffdd00;
  color: #0e3a5c;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.promo-button:hover { background: #ffdd00; border-color: #0e3a5c; }
.promo-button:disabled { opacity: .65; cursor: default; }
.promo-main :is(a, button, input, select):focus-visible { outline: 3px solid #13a8e1; outline-offset: 4px; }
.promo-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(310px, 37vw, 540px);
  margin: 0;
  padding: clamp(22px, 3vw, 48px);
  overflow: hidden;
}
.flag-day-art {
  background: linear-gradient(150deg, #0e3a5cc7, #0e3a5c 93%), url('../images/panorama.webp') center/cover;
  border-inline-start: clamp(8px, 1vw, 15px) solid #fe3b1f;
  color: #ffffff;
}
.poster-index, .promo-art figcaption { font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.promo-art > strong {
  position: relative;
  align-self: center;
  white-space: nowrap;
  font-size: clamp(63px, 9.6vw, 150px);
  line-height: .9;
  letter-spacing: -.08em;
}
.promo-art figcaption { padding-top: 13px; border-top: 1px solid currentColor; }
#young-founders { background: #98d5e835; }
.young-founders-art { background: #ffdd00; color: #34657f; isolation: isolate; }
.young-founders-art::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 66%;
  aspect-ratio: 1;
  inset: 17% -8% auto auto;
  border: clamp(16px, 3vw, 45px) solid #ffdd00;
  transform: rotate(24deg);
}
.promo-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px clamp(28px, 5.5vw, 90px);
  padding: clamp(24px, 4vw, 53px) var(--promo-pad);
  background: #ffffff;
  border-block: 1px solid #98d5e879;
}
.promo-demo h2 { margin: 9px 0; font-size: clamp(25px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.04em; }
.promo-demo p { line-height: 1.5; }
.promo-test label { display: block; font-weight: 700; }
.promo-test :is(input, select) {
  display: block;
  width: 100%;
  padding: 10px 12px;
  min-height: 46px;
  border: 1px solid #778793;
  background: #ffffff;
  color: var(--promo-ink);
  font: inherit;
  margin: 7px 0 12px;
}
.promo-result { min-height: 3em; margin: 12px 0 0; }
.promo-reference { padding: 10px var(--promo-pad); margin: 0; font-size: 14px; }
@media (max-width: 760px) {
  .promo-campaign, .promo-demo { grid-template-columns: minmax(0, 1fr); }
  .promo-art { min-height: 245px; }
  .promo-art > strong { font-size: clamp(58px, 16vw, 115px); }
}