/*
 * The coupon family: Add your coupon, Choose your plan, Your coupon is ready, Ready to go.
 * Values are those of the four Figma frames (mobile/design-specs/coupons-measures.md, 440 by 956)
 * and of coupons-shared.md; Choose your plan (2.4) has no frame and is the browse look under a
 * banner (it also turns the browse sheet on, see navigation/FamilySheets.kt).
 *
 * The frame is a column at most 440 wide on the brand blue. Everything is laid out in flow with
 * logical properties, so it mirrors with the page and follows a narrow window or a zoomed one.
 * Pixels here are the frame's own.
 */

.coupon-ground { background: var(--palette-brand); }
.coupon-ground .page__main { background: var(--palette-brand); }

.coupon-page {
  position: relative; max-inline-size: 440px; margin-inline: auto; min-block-size: 100%;
  background: var(--palette-brand); color: var(--palette-on-brand); isolation: isolate;
}

/* ---- the blue head: a picture under a fade, the way back and the wordmark, title and subtitle ---- */

.coupon-hero { position: relative; padding-inline: 20px; padding-block-start: 12px; text-align: center; }
.coupon-hero__picture { position: absolute; inset-block-start: 0; inset-inline: 0; inline-size: 100%; z-index: -2; object-fit: cover; object-position: center top; }
.coupon-hero__fade { position: absolute; inset-inline: 0; inset-block: 0; z-index: -1; pointer-events: none; }
.coupon-bar { position: relative; display: flex; align-items: center; justify-content: center; min-block-size: 44px; }
.coupon-bar__back {
  position: absolute; inset-inline-start: -4px; inset-block-start: 0; display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px; border-radius: 50%; color: var(--palette-on-brand);
  transition: background-color var(--motion-selection-millis) var(--motion-easing);
}
.coupon-bar__back .icon { --icon-size: 16px; }
.coupon-bar__back:hover { background: var(--palette-on-brand-faint); }
.coupon-bar .wordmark { inline-size: 110px; block-size: 20px; color: var(--palette-on-brand); }

.coupon-hero__title { margin: 0; font: 700 40px/47px var(--font-family); color: var(--palette-on-brand); overflow-wrap: anywhere; }
.coupon-hero__subtitle { margin: 0; font: 600 16px/25px var(--font-family); color: var(--palette-on-brand); overflow-wrap: anywhere; }

/* Add your coupon: the destination photo under a fade to #0941a1, the ticket over the sheet's top edge. */
.coupon-hero--add { padding-block-end: 0; }
.coupon-hero--add .coupon-hero__picture { block-size: 454px; }
.coupon-hero--add .coupon-hero__fade { background: linear-gradient(to top, #0941a1 46.751%, rgba(20, 94, 238, 0.05) 95.397%); }
.coupon-hero--add .coupon-hero__title { margin-block-start: 58px; }
.coupon-hero--add .coupon-hero__subtitle { margin-block-start: 8px; }
.coupon-ticket {
  position: relative; z-index: 2; display: block; inline-size: 90.7%; block-size: auto; margin-inline: auto;
  margin-block-start: 0; margin-block-end: -18.6%; aspect-ratio: 802 / 505;
}

/* Your coupon is ready and Ready to go: a tall picture, a fade, the title low on it. */
.coupon-hero--ready { clip-path: inset(0 0 -600px 0); overflow-x: clip; padding-block-start: 12px; min-block-size: 402px; display: flex; flex-direction: column; }
.coupon-hero--ready .coupon-hero__picture { inset-block-start: -23px; block-size: 569px; inset-inline: -13px; inline-size: calc(100% + 26px); max-inline-size: none; }
.coupon-hero--ready .coupon-hero__fade { inset-block-start: 181px; background: linear-gradient(to top, #09317b 5.043%, rgba(20, 94, 238, 0) 74.928%); }
.coupon-hero--ready .coupon-hero__title { margin-block-start: auto; padding-block-start: 266px; }
.coupon-hero--ready .coupon-hero__subtitle { margin-block-start: 20px; padding-block-end: 30px; }
.coupon-hero--go { min-block-size: 406px; clip-path: inset(0 0 -600px 0); overflow-x: clip; }
.coupon-hero--go .coupon-hero__picture { inset-block-start: -228px; block-size: 782px; inset-inline: 0; inline-size: 100%; object-position: center; }
.coupon-hero--go .coupon-hero__fade { inset-block-start: 150px; background: linear-gradient(to top, #09317b 5.043%, rgba(20, 94, 238, 0) 74.928%); }
.coupon-hero--go .coupon-hero__title { padding-block-start: 130px; }

/* ---- the white sheet ---- */

.coupon-sheet {
  position: relative; z-index: 1; background: var(--palette-background); color: var(--palette-text-emphasis);
  border-start-start-radius: 40px; border-start-end-radius: 40px; padding: 43px 20px 32px;
  min-block-size: 554px;
}
.coupon-heading { margin: 0; font: 700 22px/26px var(--font-family); color: var(--palette-brand); text-align: start; overflow-wrap: anywhere; }

.coupon-button {
  display: flex; align-items: center; justify-content: center; gap: 10px; inline-size: 100%; min-block-size: 60px; padding-inline: 20px;
  border: 0; border-radius: 20px; background: var(--palette-brand); color: var(--palette-on-brand);
  font: 600 16px/19px var(--font-family); text-align: center; cursor: pointer;
  transition: background-color var(--motion-selection-millis) var(--motion-easing), opacity var(--motion-selection-millis) var(--motion-easing);
}
.coupon-button:hover { background: var(--palette-brand-shade); }
.coupon-button:disabled, .coupon-button[aria-disabled="true"] { opacity: var(--button-disabled-opacity, 0.5); cursor: not-allowed; pointer-events: none; }
.coupon-button__spinner {
  flex: none; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-block-start-color: #fff;
  animation: coupon-spin 0.8s linear infinite;
}
@keyframes coupon-spin { to { transform: rotate(360deg); } }
.coupon-text-button {
  display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: 44px; margin-block-start: 5px; padding-inline: 10px;
  border: 0; background: none; color: var(--palette-text-emphasis); font: 600 16px/19px var(--font-family); text-align: center; cursor: pointer;
}
.coupon-text-button:hover { color: var(--palette-brand); }

/* ---- Add your coupon ---- */

.coupon-field {
  position: relative; display: flex; align-items: center; gap: 5px; margin-block-start: 15px; margin-block-end: 20px; min-block-size: 50px;
  padding-inline: 15px 10px; border-radius: 20px; background: var(--palette-surface); color: var(--palette-brand);
  outline: 1px solid transparent; transition: outline-color var(--motion-selection-millis) var(--motion-easing);
}
.coupon-field:focus-within { outline-color: var(--palette-brand); }
.coupon-field--error { outline-color: var(--palette-error); }
.coupon-field .icon { --icon-size: 20px; color: var(--palette-brand); }
.coupon-field__input {
  flex: 1 1 0; min-inline-size: 0; inline-size: 100%; block-size: 50px; padding: 0; border: 0; background: none; outline: 0;
  direction: ltr; text-align: match-parent; unicode-bidi: plaintext;
  font: 500 14px/16px var(--font-family); letter-spacing: 0; color: var(--palette-brand);
}
.coupon-field__input::placeholder { color: var(--palette-placeholder); opacity: 1; direction: inherit; }
.coupon-field--error .coupon-field__input { color: var(--palette-error); }
.coupon-field__paste {
  position: relative; flex: none; inline-size: 60px; block-size: 30px; padding: 0 4px; border: 0; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--palette-brand); color: var(--palette-on-brand); font: 600 10px/12px var(--font-family); cursor: pointer;
}
.coupon-field__paste::after { content: ""; position: absolute; inset: -8px -4px; }
.coupon-field__paste:hover { background: var(--palette-brand-shade); }
.coupon-field__paste:disabled { opacity: 0.5; pointer-events: none; }
.coupon-problem { margin: -10px 0 20px; font: 500 14px/18px var(--font-family); color: var(--palette-error); overflow-wrap: anywhere; animation: coupon-fade-in 0.25s ease-out both; }
.coupon-field--shake { animation: coupon-shake 0.35s ease-in-out 1; }
@keyframes coupon-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes coupon-fade-in { from { opacity: 0; transform: translateY(-4px); } }

.coupon-or { display: flex; align-items: center; gap: 15px; margin-block: 15px 25px; color: var(--palette-brand); font: 500 14px/16px var(--font-family); }
.coupon-or::before, .coupon-or::after { content: ""; flex: 1 1 0; block-size: 1px; background: #94b4d6; }

.coupon-sources { display: flex; flex-wrap: wrap; gap: 10px; }
.coupon-source {
  flex: 1 1 150px; min-inline-size: 0; min-block-size: 140px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0;
  padding: 24px 8px 16px; border: 0; border-radius: 20px; background: var(--palette-surface); color: var(--palette-text-emphasis); text-align: center; cursor: pointer;
  transition: background-color var(--motion-selection-millis) var(--motion-easing);
}
.coupon-source:hover { background: var(--palette-brand-outline); }
.coupon-source:disabled { opacity: 0.5; pointer-events: none; }
.coupon-source .icon { --icon-size: 40px; color: var(--palette-brand); margin-block-end: 17px; }
.coupon-source__title { font: 700 18px/22px var(--font-family); color: var(--palette-text-emphasis); overflow-wrap: anywhere; }
.coupon-source__subtitle { margin-block-start: 5px; font: 500 14px/17px var(--font-family); color: var(--palette-text-emphasis); overflow-wrap: anywhere; }
.coupon-refused { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 15px; border-radius: 15px; background: var(--palette-surface); }
.coupon-refused__message { flex: 1 1 160px; margin: 0; font: 500 14px/18px var(--font-family); color: var(--palette-error); overflow-wrap: anywhere; }
.coupon-refused__action { flex: none; min-block-size: 44px; padding-inline: 8px; border: 0; background: none; color: var(--palette-brand); font: 600 14px/17px var(--font-family); cursor: pointer; }

.coupon-help {
  display: flex; align-items: center; gap: 10px; margin-block-start: 24px; min-block-size: 60px; inline-size: 100%; border: 0; text-align: start; cursor: pointer; padding-inline: 20px; padding-block: 8px;
  border-radius: 15px; background: var(--palette-surface); color: var(--palette-text-emphasis); font: 600 16px/19px var(--font-family);
}
.coupon-help .icon:first-child { --icon-size: 20px; color: var(--palette-brand); }
.coupon-help__label { flex: 1 1 0; min-inline-size: 0; overflow-wrap: anywhere; }
.coupon-help__arrow { --icon-size: 20px; color: #94b4d6; }
.coupon-help:hover { background: var(--palette-brand-outline); }

/* the camera reader, over the page */
.coupon-reader { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: #06122e; color: #fff; animation: coupon-fade-in 0.25s ease-out both; }
.coupon-reader__bar { display: flex; align-items: center; gap: 8px; padding: 12px 20px; }
.coupon-reader__back { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.coupon-reader__back .icon { --icon-size: 16px; }
.coupon-reader__title { margin: 0; font: 700 22px/26px var(--font-family); overflow-wrap: anywhere; }
.coupon-reader__stage { position: relative; flex: 1 1 0; min-block-size: 0; display: flex; align-items: center; justify-content: center; padding: 0 20px 20px; }
.coupon-reader__video { max-inline-size: 100%; max-block-size: 100%; border-radius: 20px; background: #000; object-fit: cover; }
.coupon-reader__hint { position: absolute; inset-inline: 40px; inset-block-end: 40px; margin: 0; text-align: center; font: 600 16px/22px var(--font-family); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.coupon-file { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

/* ---- Choose your plan ---- */

.coupon-plans-band { padding: 12px 20px 56px; color: var(--palette-on-brand); }
.coupon-plans-band .coupon-hero__title { font: 700 30px/35px var(--font-family); margin-block-start: 8px; text-align: start; }
.coupon-banner { margin-block-start: 16px; padding: 14px 18px; border-radius: 20px; background: var(--palette-on-brand-faint); text-align: start; }
.coupon-banner__headline { margin: 0; font: 700 22px/26px var(--font-family); overflow-wrap: anywhere; }
.coupon-banner__detail { margin: 4px 0 0; font: 500 14px/17px var(--font-family); color: var(--palette-on-brand-soft); overflow-wrap: anywhere; }
.coupon-notice { margin: 0 0 14px; font: 500 14px/18px var(--font-family); color: var(--palette-error); animation: coupon-fade-in 0.3s ease-out both; overflow-wrap: anywhere; }
.coupon-plans-sheet { margin-block-start: -40px; min-block-size: 480px; padding-block-start: 20px; }
.coupon-plans-sheet .category-tabs { margin-block-end: 16px; }
.coupon-plans-sheet .search-field { margin-block-end: 16px; }
.coupon-list { display: flex; flex-direction: column; gap: 10px; }
.coupon-list > * { animation: coupon-rise 0.35s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
.coupon-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.coupon-regions > * { animation: coupon-rise 0.35s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
.coupon-destination { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; animation: coupon-slide-in 0.3s ease-out both; }
.coupon-destination .flag { inline-size: 30px; block-size: 30px; }
.coupon-destination .icon { --icon-size: 30px; color: var(--palette-brand); }
.coupon-destination__name { margin: 0; font: 700 22px/26px var(--font-family); color: var(--palette-brand); overflow-wrap: anywhere; }
.coupon-plan-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; animation: coupon-slide-in 0.3s ease-out both; }
.coupon-plan { display: block; margin: 0; padding: 0; list-style: none; }
.coupon-plan .global-plan-row { margin: 0; }
.coupon-plan--off .global-plan-row { opacity: 0.45; }
.coupon-plan__note { margin: 6px 0 0; padding-inline: 12px; font: 500 12px/14px var(--font-family); color: var(--palette-text-muted); }
.coupon-note { margin: 12px 0 0; font: 500 12px/16px var(--font-family); color: var(--palette-text-muted); }
@keyframes coupon-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes coupon-slide-in { from { opacity: 0; transform: translateX(24px); } }
[dir="rtl"] .coupon-destination, [dir="rtl"] .coupon-plan-list { animation-name: coupon-slide-in-rtl; }
@keyframes coupon-slide-in-rtl { from { opacity: 0; transform: translateX(-24px); } }

.coupon-confirm { padding-block-end: 8px; }
.coupon-confirm__title { margin: 0 0 8px; font: 700 22px/26px var(--font-family); color: var(--palette-brand); overflow-wrap: anywhere; }
.coupon-confirm__body { margin: 0 0 16px; font: 500 14px/19px var(--font-family); color: var(--palette-text-muted); overflow-wrap: anywhere; }
.coupon-confirm__problem { margin: 12px 0 0; font: 500 14px/18px var(--font-family); color: var(--palette-error); overflow-wrap: anywhere; }
.coupon-confirm .sheet__ending, .sheet__ending.coupon-confirm__ending { margin-block-start: 16px; }

/* ---- Your coupon is ready ---- */

.coupon-sheet--ready { padding-block-start: 20px; }
.coupon-card {
  position: relative; display: flex; flex-direction: column; min-block-size: 230px; color: #fff; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: #0b317b; animation: coupon-rise 0.45s ease-out 0.35s both;
  /* the ticket's four notches: half circles of 8, on the two long sides at 77 from the top and at 77 from the foot */
  -webkit-mask-image:
    radial-gradient(circle 8px at 0 77px, transparent 7.5px, #000 8px), radial-gradient(circle 8px at 100% 77px, transparent 7.5px, #000 8px),
    radial-gradient(circle 8px at 0 calc(100% - 77px), transparent 7.5px, #000 8px), radial-gradient(circle 8px at 100% calc(100% - 77px), transparent 7.5px, #000 8px);
  -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-position: 0 0, 0 0, 0 0, 0 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 8px at 0 77px, transparent 7.5px, #000 8px), radial-gradient(circle 8px at 100% 77px, transparent 7.5px, #000 8px),
    radial-gradient(circle 8px at 0 calc(100% - 77px), transparent 7.5px, #000 8px), radial-gradient(circle 8px at 100% calc(100% - 77px), transparent 7.5px, #000 8px);
  mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  mask-position: 0 0, 0 0, 0 0, 0 0;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}
.coupon-card__photo { position: absolute; inset: 0; z-index: -3; inline-size: 100%; block-size: 100%; object-fit: cover; }
.coupon-card__band { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 77px; z-index: -2; mix-blend-mode: multiply; background: linear-gradient(to right, #20468f, #0e5bf0); }
[dir="ltr"] .coupon-card__band { background: linear-gradient(to left, #20468f, #0e5bf0); }
.coupon-card__wash { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 110% 150% at 2% 5%, rgba(20, 94, 238, 0) 0%, rgba(20, 94, 238, 0.7) 44%, rgba(11, 49, 123, 0.8) 100%); }
.coupon-card__plan { display: block; padding: 20px 20px 0; min-block-size: 153px; }
.coupon-card__head { display: flex; align-items: center; gap: 10px; }
.coupon-card__flag { flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; box-shadow: 0 0 0 1px #fff; object-fit: cover; }
.coupon-card__package { --icon-size: 40px; flex: none; }
.coupon-card__name { flex: 1 1 0; min-inline-size: 0; margin: 0; font: 600 22px/26px var(--font-family); color: #fff; text-align: start; overflow-wrap: anywhere; }
.coupon-card__chip { --icon-size: 36px; flex: none; inline-size: 40px; block-size: 36px; color: #fff; }
.coupon-card__data { display: flex; align-items: center; gap: 5px; margin-block-start: 22px; font: 700 40px/47px var(--font-family); text-transform: uppercase; overflow-wrap: anywhere; }
.coupon-card__data--unlimited { font-size: 30px; line-height: 35px; text-transform: none; }
.coupon-card__data .icon { --icon-size: 18px; inline-size: 30px; color: #fff; }
.coupon-card__days { margin: 2px 0 0; font: 500 12px/14px var(--font-family); }
.coupon-card__code { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 20px; min-block-size: 77px; }
.coupon-card__code::before {
  content: ""; position: absolute; inset-inline: 29px 18px; inset-block-start: 0; block-size: 1px;
  background: repeating-linear-gradient(to right, #fff 0 1.5px, transparent 1.5px 3px);
}
.coupon-card__codes { flex: 1 1 0; min-inline-size: 0; }
.coupon-card__label { display: block; font: 500 12px/14px var(--font-family); }
.coupon-card__value { display: block; margin-block-start: 4px; font: 600 20px/24px var(--font-family); direction: ltr; unicode-bidi: isolate; text-align: start; overflow-wrap: anywhere; }
[dir="rtl"] .coupon-card__value { text-align: right; }
.coupon-badge { flex: none; display: inline-flex; align-items: center; gap: 10px; min-block-size: 38px; padding-inline: 15px; border-radius: 19px; background: var(--palette-brand); font: 500 14px/16px var(--font-family); color: #fff; animation: coupon-fade-in 0.4s ease-out 0.8s both; }
.coupon-badge .icon { --icon-size: 18px; color: #fff; animation: coupon-tick 0.4s cubic-bezier(.3, 1.6, .5, 1) 0.9s both; }
.coupon-badge--again .icon { animation: coupon-tick 0.4s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes coupon-tick { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.coupon-hero__picture--drop { animation: coupon-drop 0.45s ease-out both; }
@keyframes coupon-drop { from { opacity: 0; transform: translateY(-8px); } }

.coupon-facts { display: flex; flex-direction: column; gap: 10px; margin-block-start: 20px; }
.coupon-fact { display: flex; align-items: center; gap: 10px; min-block-size: 60px; padding: 8px 20px; border-radius: 20px; background: var(--palette-surface); }
.coupon-fact .icon { --icon-size: 20px; flex: none; color: var(--palette-brand); margin-inline-end: 20px; }
.coupon-fact__label { flex: none; font: 500 14px/17px var(--font-family); color: var(--palette-text-emphasis); }
.coupon-fact__value { flex: 1 1 0; min-inline-size: 0; margin: 0; font: 700 16px/19px var(--font-family); color: var(--palette-text-muted); text-align: end; overflow-wrap: anywhere; }
.coupon-fact:last-child .coupon-fact__value { font-size: 18px; line-height: 21px; }
.coupon-actions { margin-block-start: 20px; }
.coupon-actions .coupon-text-button { margin-block-start: 15px; }
.coupon-actions .coupon-problem { margin: 0 0 14px; }
.coupon-button--ready { animation: kit-ring 1.8s ease-out 1.2s infinite; }

/* ---- Ready to go ---- */

.coupon-sheet--go { padding-block-start: 20px; min-block-size: 550px; }
.coupon-planrow {
  display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 70px; padding: 12px 20px; border: 0; border-radius: 20px;
  background: var(--palette-text-emphasis); color: #fff; text-align: start; cursor: pointer;
}
.coupon-planrow .flag { flex: none; inline-size: 30px; block-size: 30px; border-radius: 50%; box-shadow: 0 0 0 1px #fff; }
.coupon-planrow__package { --icon-size: 30px; flex: none; color: #fff; }
.coupon-planrow__text { flex: 1 1 0; min-inline-size: 0; }
.coupon-planrow__name { display: block; font: 600 16px/19px var(--font-family); overflow-wrap: anywhere; }
.coupon-planrow__facts { display: block; margin-block-start: 8px; font: 500 12px/14px var(--font-family); text-transform: uppercase; overflow-wrap: anywhere; }
.coupon-planrow__days::before { content: "|"; margin-inline: 12px; }
.coupon-planrow .icon:last-child { --icon-size: 20px; flex: none; color: #fff; }
.coupon-go-heading { margin-block-start: 20px; }
.coupon-steps { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 15px 0 0; padding: 0; list-style: none; }
.coupon-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; animation: coupon-rise 0.4s ease-out both; animation-delay: calc(var(--i, 0) * 120ms + 150ms); }
.coupon-step__number { margin-block-start: 18px; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--palette-brand); color: #fff; display: grid; place-items: center; font: 500 20px/24px var(--font-family); }
.coupon-step:not(:last-child) .coupon-step__number::after {
  content: ""; position: absolute; inset-inline-start: 19px; inset-block-start: 61px; inline-size: 2px; block-size: 40px; transform-origin: top;
  background: repeating-linear-gradient(to bottom, var(--palette-brand) 0 3px, transparent 3px 10px); border-radius: 1px;
  animation: coupon-draw 0.4s ease-out both; animation-delay: calc(var(--i, 0) * 120ms + 350ms);
}
@keyframes coupon-draw { from { transform: scaleY(0); } }
.coupon-step__card { display: flex; align-items: flex-start; gap: 15px; min-block-size: 75px; padding: 15px 15px 12px 20px; padding-inline: 20px 15px; border-radius: 20px; background: var(--palette-surface); }
.coupon-step__card .icon { --icon-size: 30px; flex: none; margin-block-start: 8px; color: var(--palette-brand); }
.coupon-step__text { flex: 1 1 0; min-inline-size: 0; }
.coupon-step__title { margin: 0; font: 700 16px/19px var(--font-family); color: var(--palette-text-emphasis); overflow-wrap: anywhere; }
.coupon-step__detail { margin: 12px 0 0; font: 500 14px/17px var(--font-family); color: var(--palette-text-muted); overflow-wrap: anywhere; }
.coupon-go-actions { margin-block-start: 20px; animation: coupon-rise 0.4s ease-out 0.6s both; }
.coupon-go-actions .coupon-text-button { margin-block-start: 15px; }
.coupon-status { margin-block-start: 16px; padding: 14px 16px; border-radius: 15px; background: var(--palette-surface); text-align: center; }
.coupon-status__message { margin: 0; font: 500 14px/18px var(--font-family); color: var(--palette-error); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .coupon-page *, .coupon-reader { animation: none !important; transition: none !important; }
}

/* wider than a phone: the frame stands in the middle of the blue, as the apps' do on a tablet */
@media (min-width: 768px) {
  .coupon-page { box-shadow: 0 0 0 100vmax var(--palette-brand); clip-path: inset(0 -100vmax); }
}

/* A narrow window or a large text size: the plan row's name and price stack instead of running past the edge. */
.coupon-confirm .global-plan-row__plan, .coupon-plan .global-plan-row__plan { flex-wrap: wrap; padding-block: 10px; row-gap: 4px; }
.coupon-confirm .global-plan-row__name { min-inline-size: 0; overflow-wrap: anywhere; }
.coupon-confirm .global-plan-row__details { display: none; }
.coupon-confirm .global-plan-row__plan { padding-inline-end: 15px; }
.coupon-confirm .global-plan-row__size { overflow-wrap: anywhere; }
.coupon-plan .global-plan-row__name, .coupon-confirm .global-plan-row__name { display: flex; flex-wrap: wrap; max-inline-size: 100%; min-inline-size: 0; }
.coupon-plan .global-plan-row__size, .coupon-plan .global-plan-row__validity { min-inline-size: 0; overflow-wrap: anywhere; }