/* ======== launch mode (layouts/partials/launch.html) ============ */
/* Single viewport: header + hero, no scrolling. Loaded after style.css/responsive.css. */

html,
body.launch {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.launch .pages-wrapper,
body.launch .pages {
  height: 100vh;
  height: 100dvh;
}
body.launch .pages {
  display: flex;
  flex-direction: column;
}

body.launch .header .navbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

body.launch .main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
body.launch .section.hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 0 0 4vh;
}
body.launch .hero-wrapper {
  width: 100%;
  height: 100%;
  max-height: 610px;
  align-items: center;
}
body.launch .hero-right {
  --phone-right: 0px;
  height: 100%;
  container-type: size;
}
body.launch .hero-launch {
  display: none;
}
/* Phone and pod keep the original desktop proportions at every size: the
   pod's visible part is 0.81× the phone's width and overlaps it by 0.09×.
   When space is tight the overlap may grow to 0.28× (phone + pod then span
   1.53× the phone's width); beyond that the phone, and the pod with it, shrinks.
   Images: phone 584×1232; the pod's visible part spans 27.9–70.9% of its width. */
body.launch .hero-phone,
body.launch .hero-pod {
  --phone-w: min(47.4cqh, (100cqw - var(--phone-right)) / 1.53);
  --pod-w: calc(1.886 * var(--phone-w));
  max-width: none;
}
body.launch .hero-phone {
  right: var(--phone-right);
  width: var(--phone-w);
  height: auto;
}
body.launch .hero-pod {
  width: var(--pod-w);
  right: min(var(--phone-right) + 0.907 * var(--phone-w) - 0.291 * var(--pod-w),
             100cqw - 0.721 * var(--pod-w));
}
@media (max-width: 991px) {
  body.launch .hero-right {
    --phone-right: 15px;
  }
}

/* Tablets: the copy column leaves the artwork little room, so tuck the pod
   over the phone and place both leaves around the phone as on phones, so
   leaf + pod + phone span 1.81× the phone's width. The orange leaf shows as
   much past the pod as the pod covers of the phone; that overlap matches what
   shows of the teal leaf past the phone (0.241×, or less where the viewport
   edge clips it at about 54px), so both leaves show the same width. */
@media (min-width: 768px) and (max-width: 1199px) {
  body.launch .hero-right > img {
    --phone-w: min(47.4cqh, (100cqw - var(--phone-right)) / 1.81);
    --pod-w: calc(1.886 * var(--phone-w));
    --art-bottom: calc((100cqh - 2.11 * var(--phone-w)) / 2);
    bottom: var(--art-bottom);
  }
  body.launch .hero-right .hero-pod {
    --pod-over: min(0.245 * var(--phone-w), 3.4rem);
    right: calc(var(--phone-right) + var(--phone-w) - var(--pod-over) - 0.291 * var(--pod-w));
  }
  body.launch .hero-right .shape {
    top: auto;
    left: auto;
    max-width: none;
    transform: none;
  }
  body.launch .hero-right .hero-shape-large {
    width: calc(1.007 * var(--phone-w));
    right: calc(var(--phone-right) - 0.241 * var(--phone-w));
    bottom: calc(var(--art-bottom) + 0.554 * var(--phone-w));
  }
  body.launch .hero-right .hero-shape-small {
    width: calc(0.807 * var(--phone-w));
    right: calc(var(--phone-right) + 1.0 * var(--phone-w));
    bottom: calc(var(--art-bottom) + 0.511 * var(--phone-w));
  }
}

/* Signup form: the email field takes the spare width and the button keeps its
   label on one line. If both don't fit (phones narrower than 375px), the
   button wraps under the field and spans the full width. */
body.launch .hero-content .hero-form {
  flex-wrap: wrap;
}
/* The field's minimum fits its placeholder: the text ("Enter your email"
   140px, "Votre courriel" 115px) plus 20px left and 12px right padding and
   the 1px borders. */
body.launch .hero-form .form-control {
  flex: 999 1 174px;
  min-width: 0;
  width: auto;
  padding-right: 12px;
}
body.launch:lang(fr) .hero-form .form-control {
  flex-basis: 150px;
}
body.launch .hero-form button {
  flex: 1 0 auto;
  white-space: nowrap;
}
/* Signup feedback (static/assets/js/subscribe.js). On success the form gives
   way to the thank-you line. */
body.launch .hero-content .form-status {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 20px;
  color: #2F364F;
}
body.launch .hero-content .form-status:empty {
  display: none;
}
body.launch .hero-content .form-status.is-error {
  color: #B3261E;
}
body.launch .input-box.is-done .checkbox,
body.launch .input-box.is-done .hero-form {
  display: none !important;
}
body.launch .input-box.is-done .form-status {
  margin-top: 0;
  font-weight: 600;
}
body.launch .hero-form button:disabled {
  opacity: .6;
  cursor: wait;
}

/* Phones and portrait tablets: a slimmer button keeps "Subscribe" beside the
   field down to a 312px-wide form. */
@media (max-width: 991px) {
  body.launch .hero-form button {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Phones: stack copy over a shrinking image, and show the signup form
   (the full site hides it here and relies on the scroll-triggered subscribe box). */
@media (max-width: 767px) {
  body.launch .languages {
    margin-left: 0 !important;
  }
  body.launch .section.hero {
    align-items: stretch;
    padding: 0 0 16px;
  }
  body.launch .hero-wrapper {
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: none;
  }
  body.launch .hero-content {
    flex: 0 0 auto;
    margin-bottom: 12px;
  }
  body.launch .hero-content h1 {
    font-size: 28px;
    line-height: 31px;
    margin-bottom: 12px;
  }
  body.launch .hero-content p {
    font-size: 17px;
    line-height: 21px;
    margin-bottom: 16px;
  }
  body.launch .hero-content .checkbox {
    display: block;
    margin-bottom: 10px;
  }
  body.launch .hero-content .hero-form {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
  }
  body.launch .hero-form.input-box {
    display: block;
  }
  body.launch .hero-right {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-width: none;
  }
  body.launch .section.hero {
    overflow-x: clip;
  }
  /* Center the phone + pod (1.72× the phone's width at the ideal overlap) in
     the area, and place both leaves around the phone as on desktop, where
     the teal leaf starts 0.23× in from the phone's left edge and the orange
     one ends 0.22× short of it (both measured in phone widths). */
  body.launch .hero-right > img {
    --phone-w: min(47.4cqh, 100cqw / 1.718);
    --phone-right: calc((100cqw - 1.718 * var(--phone-w)) / 2);
    --art-bottom: calc((100cqh - 2.11 * var(--phone-w)) / 2);
    bottom: var(--art-bottom);
  }
  body.launch .hero-right .shape {
    top: auto;
    left: auto;
    max-width: none;
    transform: none;
  }
  body.launch .hero-right .hero-shape-large {
    width: calc(1.007 * var(--phone-w));
    right: calc(var(--phone-right) - 0.241 * var(--phone-w));
    bottom: calc(var(--art-bottom) + 0.554 * var(--phone-w));
  }
  body.launch .hero-right .hero-shape-small {
    width: calc(0.807 * var(--phone-w));
    right: calc(var(--phone-right) + 1.224 * var(--phone-w));
    bottom: calc(var(--art-bottom) + 0.511 * var(--phone-w));
  }
}

/* Short phones: drop the description and, if really short, the artwork. */
@media (max-width: 767px) and (max-height: 700px) {
  body.launch .hero-content p {
    display: none;
  }
}
@media (max-width: 767px) and (max-height: 420px) {
  body.launch .hero-right {
    display: none;
  }
}

/* Short desktop windows: tighten the copy so the form stays visible. */
@media (min-width: 768px) and (max-height: 720px) {
  body.launch .header .navbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  body.launch .hero-content h1 {
    font-size: 36px;
  }
  body.launch .hero-content p {
    font-size: 20px;
    margin-bottom: 16px;
  }
}