/* Selected hero only. The existing topbar and every other section keep their styles. */
.hero.studio-hero {
  --studio-green: #00ef74;
  --studio-gutter: clamp(22px, 4.2vw, 80px);
  min-height: 100svh;
  padding: 112px var(--studio-gutter) 22px;
  align-items: stretch;
  text-align: left;
  background: #101112;
  isolation: isolate;
}
.studio-hero::before { content: none; }
.studio-hero-layout {
  width: 100%;
  max-width: 1560px;
  margin: auto;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-content: center;
  align-items: center;
  gap: clamp(40px, 5vw, 90px);
  min-width: 0;
}
.studio-hero-layout::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 45%;
  height: 70%;
  top: 12%;
  right: 0;
  background: radial-gradient(ellipse, #00ef7408, transparent 65%);
  pointer-events: none;
}
.studio-hero-copy-wrap { position: relative; min-width: 0; }
.studio-hero-copy { padding: 12px 0 20px; min-width: 0; }
.studio-hero h1 {
  font: 500 clamp(42px, 4.8vw, 72px)/1.065 var(--font-display);
  letter-spacing: -.05em;
  color: #f1f1ed;
  max-width: 520px;
  margin: 0;
  text-wrap: balance;
}
.studio-hero h1 span { color: var(--studio-green); }
.studio-hero-description {
  font-size: 15px;
  line-height: 1.85;
  color: #e1e3df;
  max-width: 360px;
  margin: 25px 0 0;
  text-wrap: pretty;
}
.studio-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 28px; }
.studio-hero-buy { display: flex; align-items: center; gap: 8px; }
.studio-hero .studio-hero-sale {
  position: absolute;
  left: 0;
  bottom: calc(100% + clamp(0px, (100svh - 600px) / 3, 32px));
  flex-direction: row;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  gap: 24px;
  margin: 0;
  padding: 14px 18px;
  border-radius: 7px;
  border: 1px solid #00ef7445;
  background: linear-gradient(110deg, #00ef741a, #00ef740a);
  color: var(--studio-green);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.studio-hero-sale [data-sale-discount] {
  font: 600 26px/1 var(--font-display);
  letter-spacing: -.03em;
  text-transform: none;
}
.studio-hero .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 0 21px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  gap: 18px;
}
.studio-hero .btn-primary { background: var(--studio-green); border-color: var(--studio-green); }
.studio-hero .btn-primary:hover { background: #62ffa6; border-color: #62ffa6; }
.studio-hero .btn-ghost { color: #f1f1ed; border-color: #414542; }
.studio-hero .btn-ghost:hover { background: #242925; border-color: #7a837d; }
.studio-hero-arrow { color: #fff; filter: invert(1); }
.studio-hero-price { font-family: var(--font-body); font-size: 12px; }
.studio-hero-terms { font-size: 11px; color: #9b9e9d; margin: 13px 0 0; line-height: 1.6; }
.studio-hero-terms [data-price] { color: #c7cbc6; white-space: nowrap; }
.studio-hero .price-was { font-weight: 400; font-size: .9em; color: #8b938e; margin-right: 5px; }
.studio-hero .hero-showcase {
  width: 100%;
  max-width: 860px;
  min-width: 0;
  margin: 0;
  justify-self: end;
  border: 1px solid #39443a;
  border-radius: 7px;
  box-shadow: 0 28px 65px #0004;
}
.studio-hero .cycle-clip { object-fit: contain; }
.studio-hero-explore {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1400px;
  margin: 36px auto 0;
  padding-top: 16px;
  border-top: 1px solid transparent;
  font: 10px/1.6 var(--font-mono);
}
.studio-hero-explore a { display: flex; gap: 22px; align-items: center; color: #c2c8c3; }
.studio-hero-explore a span { font-size: 16px; color: var(--studio-green); }
.studio-hero a:focus-visible { outline: 2px solid var(--studio-green); outline-offset: 5px; }
@media (min-width: 1800px) {
  .studio-hero-layout { gap: 95px; }
  .studio-hero h1 { font-size: 74px; }
  .studio-hero-description { font-size: 16px; }
}
@media (max-width: 1000px) {
  .studio-hero-layout { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .studio-hero h1 { font-size: 48px; }
  .studio-hero-description { font-size: 13px; }
  .studio-hero .btn { font-size: 11px; padding-inline: 14px; }
}
@media (min-width: 761px) and (max-height: 600px) {
  .studio-hero .studio-hero-sale { padding-block: 10px; }
}
@media (max-width: 760px) {
  .hero.studio-hero { --studio-gutter: 24px; padding-top: 98px; padding-bottom: 20px; }
  .studio-hero-layout { display: flex; flex-direction: column; align-items: stretch; gap: 25px; max-width: 540px; }
  .studio-hero-copy { padding: 0; }
  .studio-hero .studio-hero-sale { bottom: calc(100% + 8px); padding: 4px 12px; gap: 18px; font-size: 9px; }
  .studio-hero-sale [data-sale-discount] { font-size: 18px; }
  .studio-hero h1 { font-size: clamp(40px, 7.8vw, 58px); max-width: 470px; }
  .studio-hero-description { font-size: 13px; margin-top: 20px; max-width: 400px; }
  .studio-hero-actions { margin-top: 21px; gap: 9px; }
  .studio-hero .btn { font-size: 11px; min-height: 44px; padding-inline: 15px; gap: 10px; }
  .studio-hero-price { font-size: 11px; }
  .studio-hero-terms { font-size: 10px; margin-top: 11px; }
  .studio-hero .hero-showcase { max-width: 540px; }
  .studio-hero-explore { font-size: 9px; margin-top: 30px; }
}
@media (max-width: 359px) {
  .hero.studio-hero { --studio-gutter: 18px; }
  .studio-hero .btn { font-size: 10px; padding-inline: 12px; gap: 7px; }
  .studio-hero-price { font-size: 10px; }
}