/* Raw values and purpose roles are shared by both product themes. */
:root,
.order-review::backdrop {
  --raw-offer-selection-light: #dfe1da;
  --raw-offer-selection-dark: #30312b;
  --raw-offer-hover-light: #d7dad1;
  --raw-offer-hover-dark: #292a25;
  --raw-offer-edge-dark: #74776e;
  --raw-offer-review-line: #9b9f96;
  --raw-offer-scrim: #191815c9;
  --raw-hardware-rim: #171819;
  --raw-hardware-edge: #777b7d;
  --raw-hardware-screen: #fff;
  --payment-selection-light: var(--raw-offer-selection-light);
  --payment-selection-dark: var(--raw-offer-selection-dark);
  --payment-hover-light: var(--raw-offer-hover-light);
  --payment-hover-dark: var(--raw-offer-hover-dark);
  --payment-edge-dark: var(--raw-offer-edge-dark);
  --review-line: var(--raw-offer-review-line);
  --review-scrim: var(--raw-offer-scrim);
  --hardware-rim: var(--raw-hardware-rim);
  --hardware-edge: var(--raw-hardware-edge);
  --hardware-screen: var(--raw-hardware-screen);
}
.product-page {
  background: var(--page-light);
  color: var(--ink-light);
}
.offer-masthead {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-dark);
  gap: 24px;
}
.offer-masthead .brand {
  width: 128px;
}
.offer-back {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  font-size: 14px;
  text-decoration: none;
}
.offer-back span {
  font-size: 24px;
  line-height: 1;
}
.offer-back:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.offers {
  padding-block: 48px 80px;
}
.offer-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 64px;
  margin-bottom: 40px;
}
.offer-intro h2 {
  font-size: clamp(64px, 6.6vw, 104px);
}
.offer-intro .eyebrow {
  margin-bottom: 20px;
  color: var(--ink-light);
}
.offer-lede {
  padding-bottom: 6px;
  max-width: 42ch;
  font-size: 18px;
  line-height: 1.6;
}
.offer-lede p + p {
  margin-top: 18px;
}
.offer-lede .offer-focus {
  font-size: 14px;
}
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.programme-offer {
  padding: 32px;
  border: 1px solid var(--line-light);
  min-width: 0;
}
.programme-offer h2 {
  font-size: clamp(56px, 5.5vw, 80px);
  letter-spacing: -0.015em;
}
.programme-offer .offer-description {
  margin: 16px 0 28px;
  max-width: 35ch;
  font-size: 16px;
  line-height: 1.55;
}
.programme-offer .offer-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.offer-mark {
  width: 58px;
  height: auto;
  margin-top: 8px;
}
.programme-offer.dark {
  border-color: var(--page-dark);
}
.programme-offer.dark h2 {
  color: var(--action-fill);
}
.payment-options {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.payment-options legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}
.payment-option {
  display: grid;
  grid-template-columns: 20px auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line-light);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.payment-option + .payment-option {
  margin-top: 10px;
}
.payment-option input {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-content: center;
  color: inherit;
}
.payment-option input::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
}
.payment-option input:checked::before {
  transform: scale(1);
}
.payment-option:has(input:checked) {
  background: var(--payment-selection-light);
}
.payment-option:has(input:focus-visible) {
  outline: 2px solid var(--focus-light);
  outline-offset: 4px;
}
.payment-option input:focus-visible {
  outline: none;
}
.payment-price {
  font: 550 36px/1.1 var(--reading);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.payment-caption {
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}
@media (max-width: 420px) {
  .payment-caption {
    grid-column: 2 / -1;
    text-align: left;
  }
}
.order-review .action {
  gap: 16px;
  font-family: var(--reading);
  text-align: left;
  cursor: pointer;
}
.order-review .action > span:first-child {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-size: inherit;
  line-height: inherit;
}
.order-review .action > span:last-child {
  flex: none;
}
.order-review .review-details dd {
  overflow-wrap: anywhere;
}
.programme-offer.dark .payment-option {
  border-color: var(--payment-edge-dark);
}
.programme-offer.dark .payment-option:has(input:checked) {
  background: var(--payment-selection-dark);
}
.programme-offer.dark .payment-option input:checked {
  color: var(--action-fill);
}
.programme-offer.dark .payment-option:has(input:focus-visible) {
  outline-color: var(--action-fill);
}
.offer-action {
  width: 100%;
  justify-content: space-between;
  margin-top: 24px;
  cursor: pointer;
  font-family: var(--reading);
}
.programme-offer.light .offer-action {
  background: var(--page-dark);
  color: var(--ink-dark);
}
.programme-offer.dark .offer-action {
  background: var(--action-fill);
  color: var(--action-ink);
}
.offer-inclusion {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  font-size: 13px;
}
.offer-inclusion svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.offer-shared {
  padding-block: 80px;
  border-top: 1px solid var(--line-light);
}
.shared-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.shared-copy h2 {
  font-size: clamp(56px, 5.5vw, 80px);
  max-width: 10ch;
  margin-bottom: 32px;
}
.shared-benefit {
  padding-block: 22px;
  border-top: 1px solid var(--line-light);
}
.shared-benefit h3 {
  font-size: 22px;
}
.shared-benefit p {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 8px;
  max-width: 44ch;
}
.shared-app {
  padding: 28px;
}
.shared-app .app-main {
  max-width: 450px;
  gap: 30px;
}
.shared-app figcaption {
  margin-top: 28px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.offer-proof {
  padding-block: 80px;
}
.offer-proof-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}
.offer-proof h2 {
  font-size: clamp(56px, 5.5vw, 80px);
}
.offer-proof-top > p {
  font-size: 16px;
  max-width: 34ch;
}
.offer-proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.offer-proof-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: contain;
  background: var(--image-field);
}
.offer-proof-grid figcaption {
  padding-top: 12px;
  font-size: 12px;
}
.offer-proof-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}
.offer-proof-footer .text-action {
  font-size: 16px;
  min-height: 44px;
}
.offer-last {
  padding-block: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 1px solid var(--line-light);
}
.offer-last h2 {
  font-size: clamp(44px, 4.7vw, 68px);
}
.offer-last .action {
  background: var(--page-dark);
  color: var(--ink-dark);
  flex-shrink: 0;
}
.order-review {
  --review-border: var(--review-line);
  border: 1px solid var(--line-light);
  width: min(560px, calc(100% - 32px));
  max-height: calc(100svh - 32px);
  overflow: auto;
  padding: 32px;
  background: var(--page-light);
  color: var(--ink-light);
}
.order-review::backdrop {
  background: var(--review-scrim);
}
.order-review h2 {
  font-size: 48px;
  margin: 18px 0 28px;
}
.order-review h2:focus {
  outline: none;
}
.order-review .eyebrow {
  color: var(--ink-light);
}
.review-details {
  margin: 0 0 28px;
}
.review-details > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
  border-top: 1px solid var(--review-border);
}
.review-details dt {
  font-size: 14px;
}
.review-details dd {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  text-align: right;
}
.review-details .review-price {
  font-size: 28px;
  letter-spacing: -0.04em;
}
.checkout-unavailable {
  font-size: 16px;
  line-height: 1.6;
  padding-block: 0 24px;
}
.order-review .action {
  width: 100%;
  justify-content: space-between;
  background: var(--page-dark);
  color: var(--ink-dark);
}
.order-review .action[hidden] {
  display: none;
}
.review-return {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  font: 500 14px/1.5 var(--reading);
  border: 0;
  color: var(--ink-light);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .payment-option:hover {
    background: var(--payment-hover-light);
  }
  .programme-offer.dark .payment-option:hover {
    background: var(--payment-hover-dark);
  }
}
@media (max-width: 1050px) {
  .offers {
    padding-top: 40px;
  }
  .offer-intro {
    gap: 32px;
  }
  .offer-intro h2 {
    font-size: 72px;
  }
  .programme-offer {
    padding: 24px;
  }
  .payment-price {
    font-size: 32px;
  }
  .payment-option {
    gap: 10px;
    padding-inline: 12px;
  }
  .shared-grid {
    gap: 40px;
  }
  .shared-app {
    padding-inline: 4px;
  }
}
@media (max-width: 700px) {
  .offer-masthead {
    min-height: 88px;
  }
  .offer-masthead .brand {
    width: 100px;
  }
  .offer-back {
    font-size: 13px;
    gap: 10px;
  }
  .offers {
    padding-block: 32px 48px;
  }
  .offer-intro {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 28px;
  }
  .offer-intro h2 {
    font-size: clamp(52px, 11vw, 72px);
  }
  .offer-intro .eyebrow {
    margin-bottom: 16px;
    font-size: 10px;
  }
  .offer-lede {
    font-size: 16px;
    padding: 0;
  }
  .offer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .programme-offer {
    padding: 24px;
  }
  .programme-offer h2 {
    font-size: 64px;
  }
  .programme-offer .offer-description {
    margin-block: 12px 24px;
  }
  .payment-option {
    min-height: 84px;
    padding: 14px;
    gap: 12px;
  }
  .payment-price {
    font-size: 34px;
  }
  .offer-shared,
  .offer-proof {
    padding-block: 48px;
  }
  .shared-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .shared-copy h2 {
    font-size: 56px;
    margin-bottom: 28px;
  }
  .shared-benefit h3 {
    font-size: 21px;
  }
  .shared-benefit p {
    font-size: 15px;
  }
  .shared-app {
    padding: 12px;
  }
  .shared-app .app-main {
    max-width: 380px;
    gap: 24px;
  }
  .offer-proof-top {
    display: block;
    margin-bottom: 28px;
  }
  .offer-proof h2 {
    font-size: 56px;
  }
  .offer-proof-top > p {
    margin-top: 22px;
    font-size: 15px;
  }
  .offer-proof-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .offer-proof-footer {
    justify-content: flex-start;
    margin-top: 24px;
  }
  .offer-last {
    display: block;
    padding-block: 40px;
  }
  .offer-last h2 {
    font-size: 48px;
    margin-bottom: 28px;
  }
  .offer-last .action {
    width: 100%;
    justify-content: space-between;
  }
  .order-review {
    padding: 24px;
  }
  .order-review h2 {
    font-size: 44px;
  }
}
@media (max-width: 360px) {
  .programme-offer {
    padding: 20px;
  }
  .programme-offer h2 {
    font-size: 56px;
  }
  .offer-mark {
    width: 44px;
  }
  .payment-price {
    font-size: 30px;
  }
  .payment-option {
    padding-inline: 10px;
    gap: 10px;
  }
  .payment-caption {
    font-size: 12px;
  }
  .offer-action {
    gap: 12px;
    font-size: 15px;
  }
  .offer-back {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .payment-option {
    transition: none;
  }
}

/* Shared screenshot hardware keeps the same material tokens as the homepage. */
.shared-app {
  --phone-rim: var(--hardware-rim);
  --phone-edge: var(--hardware-edge);
  --phone-screen: var(--hardware-screen);
}
.shared-copy h2 {
  max-width: none;
}
.shared-app .app-caption {
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.6;
}
.offer-intro h2 span {
  display: block;
}
.offer-heading h2 {
  white-space: nowrap;
}
@media (min-width: 1051px) and (max-height: 850px) {
  .offer-masthead {
    min-height: 88px;
  }
  .offers {
    padding-top: 32px;
  }
  .offer-intro {
    display: block;
    margin-bottom: 28px;
  }
  .offer-intro h2 {
    font-size: 72px;
  }
  .offer-intro h2 span {
    display: inline;
  }
  .offer-intro .eyebrow {
    margin-bottom: 14px;
  }
  .offer-lede {
    max-width: 70ch;
    margin-top: 18px;
    font-size: 16px;
  }
  .offer-lede p + p {
    display: none;
  }
  .programme-offer {
    padding: 24px;
  }
  .programme-offer h2 {
    font-size: 64px;
  }
  .programme-offer .offer-description {
    margin-block: 12px 20px;
  }
  .payment-option {
    min-height: 76px;
  }
  .offer-action {
    margin-top: 20px;
  }
  .offer-inclusion {
    margin-top: 18px;
  }
}
@media (max-width: 700px) {
  .programme-offer h2 {
    font-size: 56px;
  }
  .offer-lede p + p {
    display: none;
  }
}
@media (max-width: 360px) {
  .programme-offer h2 {
    font-size: 50px;
  }
}

.duration-jump {
  display: none;
}
.product-page [data-product] {
  scroll-margin-top: 24px;
}
.product-page [data-product]:focus {
  outline: none;
}
.offer-proof-grid img {
  color: var(--ink-light);
}
@media (max-width: 700px) {
  .duration-jump {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 0 28px;
    border-block: 1px solid var(--line-light);
  }
  .duration-jump a {
    position: relative;
    display: grid;
    gap: 5px;
    padding: 14px 28px 14px 0;
    color: var(--ink-light);
    text-decoration: none;
    min-height: 100px;
  }
  .duration-jump a + a {
    border-left: 1px solid var(--line-light);
    padding-left: 16px;
  }
  .duration-name {
    font: 400 24px/1.15 var(--display);
    text-transform: uppercase;
  }
  .duration-prices {
    font-size: 12px;
    line-height: 1.5;
  }
  .duration-arrow {
    position: absolute;
    right: 12px;
    top: 18px;
    font-size: 20px;
    line-height: 1;
  }
  .duration-jump a:hover .duration-name {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* Programme guidance is one ordered sequence, not a set of separate cards. */
.programme-start {
  padding-block: 72px 80px;
}
.programme-start-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 64px;
  margin-bottom: 48px;
}
.programme-start .eyebrow {
  margin-bottom: 20px;
}
.programme-start h1 {
  font-size: clamp(64px, 6vw, 88px);
}
.programme-start-lede {
  font-size: 18px;
  line-height: 1.6;
  max-width: 40ch;
  padding-bottom: 4px;
}
.programme-journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-dark);
}
.programme-journey li {
  min-width: 0;
  padding: 28px 32px 0 0;
}
.programme-journey li + li {
  border-left: 1px solid var(--line-dark);
  padding-left: 32px;
}
.programme-journey li:last-child {
  padding-right: 0;
}
.journey-number {
  display: block;
  color: var(--action-fill);
  font: 400 60px/1 var(--display);
  margin-bottom: 28px;
}
.programme-journey h3 {
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 16px;
  max-width: 20ch;
}
.programme-journey li p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 36ch;
}
.review-next-step {
  border-top: 1px solid var(--review-line);
  padding-block: 22px;
}
.review-next-step h3 {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 8px;
  letter-spacing: -0.025em;
}
.review-next-step p {
  font-size: 15px;
  line-height: 1.6;
}
.review-terms {
  border-top: 1px solid var(--review-line);
  padding-block: 18px;
  font-size: 15px;
  line-height: 1.6;
}
.review-terms p + p {
  margin-top: 6px;
  font-size: 13px;
}
.review-agreement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-top: 1px solid var(--review-line);
  padding-block: 18px 6px;
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
}
.review-agreement input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ink-light);
}
.review-agreement input:focus-visible {
  outline: 2px solid var(--focus-light);
  outline-offset: 3px;
}
.review-agreement a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.checkout-status {
  min-height: 1.6em;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
}
.checkout-status:empty {
  margin-bottom: 6px;
}
.order-review .action:disabled {
  cursor: progress;
  opacity: 0.72;
}
@media (min-width: 701px) and (max-width: 1050px) {
  .programme-start {
    padding-block: 56px 64px;
  }
  .programme-start-intro {
    gap: 32px;
  }
  .programme-start h1 {
    font-size: 64px;
  }
  .programme-journey li {
    padding-right: 20px;
  }
  .programme-journey li + li {
    padding-left: 20px;
  }
  .programme-journey h3 {
    font-size: 21px;
  }
  .programme-journey li p {
    font-size: 15px;
  }
}
@media (max-width: 700px) {
  .programme-start {
    padding-block: 48px;
  }
  .programme-start-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
  }
  .programme-start .eyebrow {
    margin-bottom: 16px;
  }
  .programme-start h1 {
    font-size: 56px;
  }
  .programme-start-lede {
    font-size: 16px;
    padding: 0;
  }
  .programme-journey {
    grid-template-columns: 1fr;
  }
  .programme-journey li {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 22px;
    padding: 28px 0;
  }
  .programme-journey li + li {
    border-left: 0;
    border-top: 1px solid var(--line-dark);
    padding-left: 0;
  }
  .programme-journey li:last-child {
    padding-bottom: 0;
  }
  .journey-number {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: 44px;
    margin-bottom: 0;
  }
  .programme-journey h3 {
    grid-column: 2;
    font-size: 22px;
    margin-bottom: 12px;
  }
  .programme-journey li p {
    grid-column: 2;
    font-size: 15px;
    max-width: none;
  }
}
@media (max-width: 360px) {
  .programme-start h1 {
    font-size: 50px;
  }
  .programme-journey li {
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
  }
  .journey-number {
    font-size: 40px;
  }
  .programme-journey h3 {
    font-size: 20px;
  }
}