/* Physical card teaser and the waitlist modal it opens.
   Shared by the home page and the Visa card page, so the section is defined
   once. Load it after the page stylesheet. */

/* ===== SHELL =====
   The section reuses the business block's card markup. The home stylesheet
   defines that card, but the Visa card stylesheet ships only its narrow-width
   half, so the wide-layout values are restated here and the component no
   longer depends on which page it sits on.
   They are kept inside the min-width query because both page stylesheets
   already provide the stacked version, and this file loads after them: an
   unconditional copy would outrank their max-width rules and flatten the
   narrow layout. The few properties those rules never touch are declared
   outside it. */
.pcard_layout {
  display: flex;
  border-radius: 40px;
  overflow: hidden;
}

.pcard_section .business_intro {
  display: flex;
  flex-flow: column;
}

.pcard_section .div-block-298 {
  display: flex;
  flex-flow: column;
  gap: 24px;
}

.pcard_section .cta-new-white {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 56px;
  margin-top: 0;
  padding: 8px 24px;
  border-radius: 999px;
  background-color: #fff;
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease-in, background-position .2s ease-in;
}

.pcard_section .cta-new-white:hover {
  background-color: #ececec;
  transform: scale(.985);
}

@media (max-width: 991px) {
  .pcard_section .cta-new-white {
    font-size: 14px;
  }
}

/* ===== PHYSICAL CARD TEASER ===== */
/* Reuses the business block's card so the two stay identical, but not
   its dark full-width band: this one sits between two light sections,
   so only the card is dark. Two classes to outrank the single-class
   padding rules the generated stylesheet sets per breakpoint. The
   neighbours already carry 120px of padding, so none is needed here. */
.section_business_home.pcard_section {
  background-color: transparent;
  padding-top: 0;
  padding-bottom: 0;
  /* Anchor target for shared links. The navbar is fixed and 88px tall, so
     without this the card lands underneath it. */
  scroll-margin-top: 112px;
}

/* Pure black rather than the business block's #151515: the card render
   is photographed on black with soft glows and a reflection that fade
   out, so on a lighter panel its edges read as a pasted-in rectangle.
   Matching the panel to the render makes the seam disappear and keeps
   the card's own contrast. */
.pcard_layout {
  background-color: #000;
}

/* Both columns flex so they fill the row: the section containers are flex
   rows, so a single child is sized by its content, and the business block
   only reaches 1200px because its content overflows. Confined to the
   two-column layout, because below 992px the card becomes a flex column and
   a flex-basis there would set a height instead. */
@media (min-width: 992px) {
  /* 32px rather than the business block's 64px: the home page narrows that
     gap in a page-level rule, and stating it here keeps the two pages on the
     same column widths instead of leaving it to whichever page it sits on. */
  .pcard_layout {
    column-gap: 32px;
    align-items: center;
    width: 100%;
    height: 512px;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* The business block pins its button to the bottom with
     space-between, which works because its paragraph is long. This
     copy is short, so that would leave a hole between the list and the
     button; the column is centred against the card art instead. */
  .pcard_section .business_intro {
    flex: 1 1 437px;
    justify-content: center;
    align-items: flex-start;
    gap: 36px;
    max-width: 437px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* The smaller heading the home page sets for this card; stated here so
     the card page's larger default does not reflow the column. */
  .pcard_section .h2 {
    font-size: 56px;
    letter-spacing: -3px;
  }

  .pcard_visual {
    flex: 0 1 635px;
    align-self: center;
    min-width: 0;
  }
}

/* Apple's product pattern: a small tinted line introducing the thing,
   then the headline carries the weight. Its own wrapper so the pair
   stays tight while the list keeps the 24px rhythm of .div-block-298. */
.pcard_head {
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.pcard_eyebrow {
  color: #E4FF38;
  font-family: Geist, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .2px;
  line-height: 130%;
}

.pcard_list {
  display: flex;
  flex-flow: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcard_list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d6d6d6;
  font-family: Geist, Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 150%;
}

/* The source icons are drawn for light backgrounds, so they are
   inlined and recoloured through currentColor rather than loaded as
   images that could not be turned white. */
.pcard_icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: #fff;
}

/* Geist Medium, the weight the nav CTAs and the Notify me button in the
   modal this opens already use. */
.pcard_section [data-waitlist-open] {
  font-weight: 500;
}

/* The site's background-video script mounts the clip inside this box,
   so it needs a positioning context. The still underneath is both the
   poster and the whole visual when that script skips video, which it
   does for reduced motion, save-data and slow connections.
   Qualified by the attribute to outrank the [data-bgv] utility, which
   pins the full-bleed video layers over their section: that rule lives in
   a page-level style block and so would otherwise win on order. */
.pcard_visual[data-bgv] {
  position: relative;
}

.pcard_visual[data-bgv] video {
  position: absolute;
  inset: 0;
}

.pcard_visual_img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .pcard_visual {
    width: 100%;
    padding: 0 32px;
  }
}

/* ===== WAITLIST MODAL ===== */
/* Matches the site's only other overlay (the download one): a light
   blurred card on a dark scrim. Its own element at body level so no
   section's stacking context can clip it. */
.wl_modal[hidden] {
  display: none;
}

.wl_modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.wl_scrim {
  position: absolute;
  inset: 0;
  background-color: #0c0c0ccc;
}

.wl_card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  padding: 40px;
  border: 1px solid #48484a33;
  border-radius: 40px;
  background-color: #fffffff2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.wl_close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: #48484a1a;
  color: #0c0c0c;
  cursor: pointer;
}

.wl_close svg {
  width: 16px;
  height: 16px;
}

.wl_close:hover {
  background-color: #48484a33;
}

.wl_eyebrow {
  margin-bottom: 10px;
  color: #5e5e5e;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .6px;
  line-height: 100%;
  text-transform: uppercase;
}

.wl_title {
  margin: 0 0 12px;
  max-width: 300px;
  color: #0c0c0c;
  font-family: Geist, Arial, sans-serif;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -1.6px;
  line-height: 112%;
}

.wl_dek {
  margin: 0 0 28px;
  color: #5e5e5e;
  font-family: Geist, Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 152%;
}

.wl_form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wl_input {
  box-sizing: border-box;
  flex: 1 1 200px;
  min-width: 0;
  height: 56px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid #e1e1e1;
  border-radius: 999px;
  background-color: #fff;
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 17px;
  line-height: 100%;
  transition: border-color .2s ease;
}

.wl_input::placeholder {
  color: #969696;
}

.wl_input:focus {
  outline: none;
  border-color: #111;
}

.wl_input[aria-invalid="true"] {
  border-color: #d23b3b;
}

.wl_submit {
  flex: none;
  height: 56px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background-color: #111;
  color: #fff;
  font-family: Geist, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 100%;
  cursor: pointer;
  transition: opacity .2s ease;
}

.wl_submit:hover {
  opacity: .82;
}

.wl_submit[disabled] {
  cursor: default;
  opacity: .5;
}

.wl_msg {
  margin: 14px 0 0;
  color: #0c0c0c;
  font-family: Geist, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
}

.wl_msg:empty {
  display: none;
}

.wl_msg.is-error {
  color: #d23b3b;
}

.wl_note {
  margin: 14px 0 0;
  color: #969696;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}

/* Own class rather than the navbar's .is-locked: that one is driven by
   a MutationObserver on the nav and also repositions the body. */
html.wl_locked {
  overflow: hidden;
}

@media (max-width: 479px) {
  .wl_card {
    padding: 32px 24px;
    border-radius: 28px;
  }

  .wl_title {
    font-size: 28px;
    letter-spacing: -1.2px;
  }

  .wl_submit {
    flex: 1 1 100%;
  }
}