/*
 * A device's page (KID-1338, the canvas's CollarB board), on its app's domain. Loaded by that page alone, after
 * site.css, whose tokens.css declares the `pages` layer.
 */

@layer pages {
  .kp-device__title {
    max-width: 47.5rem;
    font-size: var(--kp-text-h2);
  }

  /* Hero: on lavender, continuing the header's; the promise and the form beside the photo */
  .kp-device-hero {
    padding-block: clamp(1.5rem, 0.6rem + 2.5vw, 3rem) clamp(3rem, 1.2rem + 7vw, 6rem);
    background: var(--kp-alt);
  }

  .kp-device-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-8);
    align-items: center;
  }

  @media (min-width: 64rem) {
    .kp-device-hero__inner {
      grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
      gap: 4rem;
    }
  }

  .kp-device-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kp-space-5);
    min-width: 0;
  }

  .kp-device-hero__labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
  }

  .kp-device-hero h1 {
    font-size: var(--kp-text-display-2);
    line-height: var(--kp-display-leading);
    letter-spacing: var(--kp-display-tracking-tight);
  }

  .kp-device-hero__lead {
    max-width: 35rem;
    color: var(--kp-ink-2);
    font-size: var(--kp-text-lead);
    line-height: var(--kp-body-leading);
  }

  .kp-device-hero .kp-waitlist__box {
    align-self: stretch;
  }

  .kp-device-hero .kp-device-photo {
    border-radius: var(--kp-radius-xl);
  }

  /* How it works: three numbered cards */
  .kp-device-steps__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 48rem) {
    .kp-device-steps__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .kp-device-steps__list li {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-3);
    padding: var(--kp-space-7);
    border-radius: var(--kp-radius-lg);
    background: var(--kp-alt);
    color: var(--kp-ink-2);
    line-height: var(--kp-body-leading);
  }

  .kp-device-steps__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--kp-btn-bg);
    color: var(--kp-btn-ink);
    font-family: var(--kp-font-display);
    font-size: 1.25rem;
    font-weight: var(--kp-display-weight);
  }

  .kp-device-steps__title {
    color: var(--kp-ink);
    font-family: var(--kp-font-display);
    font-size: var(--kp-text-h3);
    font-weight: var(--kp-display-weight);
    line-height: var(--kp-heading-leading);
  }

  /* Specs beside the price card */
  .kp-device-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-4);
    align-items: start;
  }

  @media (min-width: 64rem) {
    .kp-device-offer {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .kp-device-offer--price-only {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
  }

  .kp-device-specs,
  .kp-device-price {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-5);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-radius: var(--kp-radius-lg);
  }

  .kp-device-specs {
    background: var(--kp-alt);
  }

  .kp-device-specs__title {
    font-size: 2rem;
  }

  .kp-device-specs dl {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  .kp-device-specs dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
    padding-block: 0.875rem;
    border-block-start: 1px solid var(--kp-border);
  }

  @media (min-width: 40rem) {
    .kp-device-specs dl > div {
      grid-template-columns: 13.75rem minmax(0, 1fr);
      gap: var(--kp-space-4);
    }
  }

  .kp-device-specs dt {
    color: var(--kp-muted);
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .kp-device-specs dd {
    margin: 0;
    font-weight: 700;
  }

  .kp-device-price {
    gap: var(--kp-space-4);
    background: var(--kp-band);
    color: #ffffff;
  }

  .kp-device-price__label {
    color: var(--kp-yellow);
    font-size: var(--kp-text-eyebrow);
    font-weight: 800;
    letter-spacing: var(--kp-eyebrow-tracking);
    text-transform: var(--kp-eyebrow-case);
  }

  .kp-device-price__headline {
    font-family: var(--kp-font-display);
    font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);
    font-weight: var(--kp-display-weight);
    line-height: var(--kp-heading-leading);
  }

  .kp-device-price > p {
    color: var(--kp-lavender-2);
    line-height: var(--kp-reading-leading);
  }

  .kp-device-price__rows {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding-block-start: var(--kp-space-3);
    border-block-start: 1px solid rgb(255 255 255 / 0.18);
  }

  .kp-device-price__rows div {
    display: flex;
    justify-content: space-between;
    gap: var(--kp-space-3);
  }

  .kp-device-price__rows dt {
    color: var(--kp-lavender-2);
  }

  .kp-device-price__rows dd {
    margin: 0;
    font-weight: 800;
  }

  .kp-device-price .kp-button {
    align-self: flex-start;
  }

  .kp-device-faq {
    max-width: calc(var(--kp-measure-wide) + 2 * var(--kp-gutter));
  }

  /* The closing band: purple, with the second form */
  .kp-device-band {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-4);
    padding: clamp(1.5rem, 0.8rem + 3vw, 3rem);
    border-radius: var(--kp-radius-xl);
    background: var(--kp-band);
    color: #ffffff;
  }

  .kp-device-band h2 {
    color: #ffffff;
    font-size: var(--kp-text-h2);
  }

  .kp-device-band > p {
    max-width: 38.75rem;
    margin-block-end: var(--kp-space-2);
    color: var(--kp-lavender-2);
    font-size: var(--kp-text-body-l);
    line-height: var(--kp-reading-leading);
  }
}