/* Product platform chooser: intro first, then equal platform cards. */
.platform-strip-inner {
  grid-template-columns: 1fr;
  gap: 18px;
}

.platform-strip-copy {
  max-inline-size: 780px;
}

.platform-strip-copy h2 {
  margin-block-start: 2px;
}

.platform-strip-copy > p:last-child {
  max-inline-size: 720px;
}

.platform-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

/*
  The three cards use the same explicit vertical tracks:
  heading/icon, description, and CTA. display: contents lets the title and
  description participate in the parent grid so every divider/CTA lands at
  exactly the same height, regardless of copy length.
*/
.choice-card.platform-action {
  block-size: 360px;
  min-block-size: 360px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: 72px minmax(0, 1fr) 58px;
  column-gap: 15px;
  row-gap: 0;
  align-content: stretch;
  padding: 20px;
}

/* Lively, solid platform marks share one optically centered icon container. */
.choice-card.platform-action .choice-icon {
  grid-column: 1;
  grid-row: 1;
  place-self: start center;
  inline-size: 56px;
  block-size: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 8px 22px rgba(0, 0, 0, .10);
}

.choice-card.platform-action .choice-icon .platform-icon {
  inline-size: 30px;
  block-size: 30px;
  display: block;
  margin: 0;
}

.choice-card.platform-action.store .choice-icon {
  background: linear-gradient(145deg, rgba(20, 77, 73, .96), rgba(15, 57, 71, .96));
}

.choice-card.platform-action.store .choice-icon .platform-icon {
  inline-size: 31px;
  block-size: 31px;
}

.choice-card.platform-action.web .choice-icon {
  background: linear-gradient(145deg, #0f6f89, #124b72);
}

.choice-card.platform-action.iphone .choice-icon {
  background: linear-gradient(145deg, #493a82, #7b3f7f 52%, #a95069);
}

.choice-card.platform-action.web .choice-icon .platform-icon,
.choice-card.platform-action.iphone .choice-icon .platform-icon {
  display: none;
}

.choice-card.platform-action.web .choice-icon::before,
.choice-card.platform-action.iphone .choice-icon::before {
  content: "";
  inline-size: 31px;
  block-size: 31px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.choice-card.platform-action.web .choice-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%235ee6df'/%3E%3Cpath d='M4.5 16h23M16 4c3.7 4.4 3.7 19.6 0 24M16 4c-3.7 4.4-3.7 19.6 0 24M7 10.3h18M7 21.7h18' fill='none' stroke='%230b3850' stroke-width='1.8' stroke-linecap='round' opacity='.92'/%3E%3C/svg%3E");
}

.choice-card.platform-action.iphone .choice-icon::before {
  inline-size: 30px;
  block-size: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='3' y1='3' x2='21' y2='21' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%236ee7f2'/%3E%3Cstop offset='.48' stop-color='%23c084fc'/%3E%3Cstop offset='1' stop-color='%23fb7185'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M15.18 3.14c-.83.06-1.82.59-2.38 1.25-.5.58-.94 1.45-.77 2.29.9.07 1.84-.46 2.38-1.13.53-.65.9-1.51.77-2.41Zm3.13 10.75c-.04-2.05 1.68-3.04 1.75-3.08-.96-1.4-2.45-1.59-2.98-1.61-1.25-.13-2.47.75-3.11.75-.65 0-1.64-.75-2.71-.73-1.37.02-2.66.82-3.36 2.09-1.45 2.51-.37 6.2 1.02 8.23.69.99 1.49 2.09 2.56 2.05 1.04-.05 1.43-.67 2.68-.67 1.24 0 1.61.67 2.7.64 1.13-.02 1.83-1 2.5-1.99.79-1.13 1.11-2.26 1.12-2.31-.03-.01-2.15-.83-2.17-3.37Z' fill='url(%23g)'/%3E%3C/svg%3E");
}

.choice-card.platform-action .choice-copy {
  display: contents;
}

.choice-card.platform-action .choice-copy strong {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-inline-size: 0;
  margin: 0;
  padding-block-start: 8px;
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
  line-height: 1.25;
}

.choice-card.platform-action .choice-copy > span {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-inline-size: 0;
  margin: 0;
  padding-block-start: 1px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.58;
}

.choice-card.platform-action .choice-cta {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  min-block-size: 58px;
  margin: 0;
  padding-block-start: 16px;
}

.choice-card.platform-action.iphone {
  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
}

@media (max-width: 980px) {
  .platform-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-action.iphone {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .platform-strip-inner {
    padding: 18px;
  }

  .platform-actions {
    grid-template-columns: 1fr;
  }

  .platform-action.iphone {
    grid-column: 1;
  }

  .choice-card.platform-action {
    block-size: auto;
    min-block-size: 0;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 8px;
  }

  .choice-card.platform-action .choice-copy strong {
    grid-row: 1;
  }

  .choice-card.platform-action .choice-copy > span {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-block-start: 4px;
  }

  .choice-card.platform-action .choice-cta {
    grid-row: 3;
    min-block-size: 0;
    margin-block-start: 8px;
  }
}