/* One illustrated invitation, then room for the visitor to imagine belonging. */
:is(#launch, #company) .why-invitation {
  --why-blue: #00467f;
  --why-deep: #002e55;
  --why-light: #e7eff5;
  --why-display: "Launch Noto Condensed", "Company Display", sans-serif;
  color: var(--why-deep);
  text-align: left;
}
:is(#launch, #company) .why-invitation :is(h1, h2, h3, p) { margin: 0; }
:is(#launch, #company) .why-welcome { position: relative; isolation: isolate; background: var(--why-blue); color: white; }
:is(#launch, #company) .why-art { position: absolute; z-index: -2; right: 0; width: 82%; height: 100%; object-fit: cover; object-position: 70% center; }
:is(#launch, #company) .why-welcome::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--why-blue) 15%, #00467ff2 31%, #00467f00 65%); }
:is(#launch, #company) .why-welcome-copy { position: relative; width: 48%; padding: 64px 0 62px 8%; }
:is(#launch, #company) .why-welcome .eyebrow { margin-bottom: 26px; color: white; font-size: .75rem; letter-spacing: .15em; }
:is(#launch, #company) .why-invitation h1 { margin-bottom: 26px; color: white; font: 900 clamp(4rem, 7.6vw, 7rem)/.97 var(--why-display); letter-spacing: -.035em; }
:is(#launch, #company) .why-opening { max-width: 29ch; font-size: 1.125rem; line-height: 1.7; }
:is(#launch, #company) .why-invitation h2 { color: var(--why-blue); font: 900 clamp(2.25rem, 4.3vw, 3.5rem)/1.12 var(--why-display); letter-spacing: -.025em; }
:is(#launch, #company) .why-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 6%; }
:is(#launch, #company) .why-reason { padding: 32px 28px 36px; border: 1px solid #8aa9bf; }
:is(#launch, #company) .why-reason .eyebrow { margin-bottom: 18px; color: var(--red); font-size: .75rem; letter-spacing: .1em; }
:is(#launch, #company) .why-reason h2 { margin-bottom: 18px; font-size: 2rem; line-height: 1.15; }
:is(#launch, #company) .why-reason > p:not(.eyebrow) { max-width: 36ch; font-size: 1rem; line-height: 1.75; }
:is(#launch, #company) .why-camaraderie { background: #d6e4ef; }
:is(#launch, #company) .why-community { background: white; }
:is(#launch, #company) .why-veterans { background: var(--why-deep); color: white; }
:is(#launch, #company) .why-veterans .eyebrow { color: #c0d5e6; }
:is(#launch, #company) .why-veterans h2 { color: white; }
:is(#launch, #company) .why-story-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--why-blue); font-size: .9375rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #00467f55; }
:is(#launch, #company) .why-story-link:hover { text-decoration-color: var(--why-blue); }
:is(#launch, #company) .why-purpose { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.7fr); margin: 0 6% 40px; border: 1px solid #8aa9bf; background: white; }
:is(#launch, #company) .why-purpose-intro { container-type: inline-size; padding: 34px 30px; border-top: 4px solid var(--red); background: var(--why-blue); color: white; }
:is(#launch, #company) .why-purpose .eyebrow { margin-bottom: 22px; font-size: .75rem; letter-spacing: .1em; }
:is(#launch, #company) .why-purpose-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 30%); align-items: center; gap: 20px; margin-bottom: 22px; }
:is(#launch, #company) .why-purpose h2 { max-width: 12ch; color: white; font-size: clamp(2.25rem, 3.5vw, 3rem); }
:is(#launch, #company) .why-purpose-emblem { display: block; width: 100%; max-width: 112px; height: auto; justify-self: end; }
:is(#launch, #company) .why-purpose-intro > p:not(.eyebrow) { max-width: 36ch; font-size: 1rem; line-height: 1.75; }
:is(#launch, #company) .why-purpose-intro .why-story-link { margin-top: 20px; color: white; text-decoration-color: #ffffff80; }
:is(#launch, #company) .why-purpose-intro .why-story-link:hover { text-decoration-color: white; }
:is(#launch, #company) .why-purpose-intro a:focus-visible { outline: 3px solid white; outline-offset: 5px; }
:is(#launch, #company) .why-purpose-detail { padding: 38px 32px 26px; }
:is(#launch, #company) .why-purpose-detail > .eyebrow { color: var(--red); }
:is(#launch, #company) .why-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; margin: 0; padding: 0; list-style: none; }
:is(#launch, #company) .why-pillars li { padding-left: 16px; border-left: 3px solid #d6e4ef; }
:is(#launch, #company) .why-pillars h3 { margin-bottom: 10px; color: var(--why-blue); font-family: inherit; font-size: 1.125rem; font-weight: 700; line-height: 1.4; letter-spacing: -.015em; }
:is(#launch, #company) .why-pillars p { font-size: .9375rem; line-height: 1.75; }
:is(#launch, #company) .why-purpose-detail > .why-story-link { margin-top: 24px; }
:is(#launch, #company) .why-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 10%; padding: 42px 8% 34px; background: var(--why-light); }
:is(#launch, #company) .why-next h2 { margin-bottom: 12px; font-size: 2.5rem; }
:is(#launch, #company) .why-hello-copy > p { max-width: 46ch; font-size: 1rem; line-height: 1.7; }
:is(#launch, #company) .why-hello-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
:is(#launch, #company) .why-next .main-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 52px; padding: 14px 22px; background: var(--red); color: white; font-size: 1rem; font-weight: 700; }
:is(#launch, #company) .why-next .main-action:hover { background: #901017; }
:is(#launch, #company) .why-next .main-action:focus-visible { outline: 3px solid var(--why-blue); outline-offset: 5px; }
:is(#launch, #company) .why-next .why-membership { grid-column: 1 / -1; margin-top: 8px; max-width: 75ch; font-size: .8125rem; line-height: 1.8; color: var(--muted); }
:is(#launch, #company) .why-membership a { display: inline-block; padding-block: 8px; color: var(--why-blue); text-decoration: underline; text-underline-offset: 3px; }
/* V2's surrounding table is narrower than the full-width V1 canvas. */
#company .why-invitation { --why-display: "Company Display", sans-serif; }
#company .why-welcome-copy { width: 62%; padding: 36px 0 38px 7%; }
#company .why-invitation .why-welcome::before { background: linear-gradient(90deg, var(--why-blue) 15%, #00467ff2 62%, #00467f00 95%); }
#company .why-invitation h1 { font-size: clamp(3.5rem, 6vw, 5rem); }
#company .why-next { grid-template-columns: minmax(0, 1fr); }
#company .why-reasons { grid-template-columns: minmax(0, 1fr); margin-inline: 0; }
#company .why-reason > p:not(.eyebrow) { max-width: 54ch; }
#company .why-purpose { grid-template-columns: minmax(0, 1fr); margin-inline: 0; }
#company .why-purpose h2 { max-width: none; }
#company .why-purpose-intro > p:not(.eyebrow) { max-width: 54ch; }
@container (max-width: 14rem) {
  :is(#launch, #company) .why-purpose-heading { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  :is(#launch, #company) .why-purpose-emblem { width: 80px; justify-self: start; }
}
@media (max-width: 1000px) {
  #launch .why-purpose { grid-template-columns: minmax(0, 1fr); }
  #launch .why-purpose h2 { max-width: none; }
  #launch .why-purpose-intro > p:not(.eyebrow) { max-width: 62ch; }
}
@media (max-width: 820px) {
  :is(#launch, #company) .why-welcome-copy { width: 61%; padding: 40px 0 38px 7%; }
  :is(#launch, #company) .why-welcome::before { background: linear-gradient(90deg, var(--why-blue) 15%, #00467ff2 61%, #00467f00 95%); }
  :is(#launch, #company) .why-invitation h1 { font-size: 4.5rem; }
  :is(#launch, #company) .why-next { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  :is(#launch, #company) .why-reasons { grid-template-columns: minmax(0, 1fr); margin-block: 28px; }
  :is(#launch, #company) .why-reason > p:not(.eyebrow) { max-width: 54ch; }
}
@media (max-width: 540px) {
  :is(#launch, #company) .why-welcome { display: flex; flex-direction: column; }
  :is(#launch, #company) .why-welcome-copy { order: -1; width: 100%; padding: 32px 8% 12px; }
  :is(#launch, #company) .why-welcome::before { display: none; }
  :is(#launch, #company) .why-welcome .eyebrow { margin-bottom: 20px; }
  :is(#launch, #company) .why-invitation h1 { margin-bottom: 20px; font-size: 4.25rem; }
  :is(#launch, #company) .why-opening { max-width: 32ch; font-size: 1rem; }
  :is(#launch, #company) .why-art { position: relative; z-index: auto; width: 100%; height: auto; aspect-ratio: 1.7; object-fit: cover; object-position: right 52%; mask-image: linear-gradient(transparent, black 22%); }
  :is(#launch, #company) .why-reasons { margin: 24px 6%; }
  :is(#launch, #company) .why-reason { padding: 28px 24px; }
  :is(#launch, #company) .why-purpose { margin-bottom: 24px; }
  :is(#launch, #company) .why-purpose-intro { padding: 28px 24px; }
  :is(#launch, #company) .why-purpose-detail { padding: 28px 24px 20px; }
  :is(#launch, #company) .why-pillars { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  :is(#launch, #company) .why-next { padding: 32px 8% 28px; }
  :is(#launch, #company) .why-next h2 { font-size: 2.25rem; }
}