/* PURP Wallet product page. PURP+ pages wear the dark theme (owner rule); the designer opens in the
   shared full-screen viewer like every other page. The hero's glow takes its colour from the pass
   in the recording as it plays, so the page turns green and gold when the pass does. */
@property --ambient {
  syntax: '<color>';
  inherits: true;
  initial-value: #3a1466;
}
html:has(> body.wallet-page) { background: var(--stage-raised); }
.wallet-page { background: linear-gradient(var(--stage-raised), var(--stage-raised)) top / 100% 480px no-repeat, var(--stage); }
/* White type on the dark stage only: the light product bar keeps its own dark title. */
.wallet-page main { color: #fff; }
.wallet-page .product-nav__inner { width: var(--content); max-width: none; }

.wallet-eyebrow { color: #d0a8ef; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wallet-heading { max-width: 950px; margin: 0 auto 52px; text-align: center; }
.wallet-heading h2, .wallet-chapter h2 { margin-top: 18px; font-size: clamp(38px, 4.8vw, 64px); line-height: 1; font-weight: 620; letter-spacing: -.056em; text-wrap: balance; }

/* One window: the title, the recording and the three lines fit the first screen. */
.wallet-hero { --ambient: #3a1466; --hero-stage-height: clamp(250px, calc(100svh - 482px), 640px); position: relative; isolation: isolate; padding: 12px var(--gutter) 70px; text-align: center; color-scheme: dark; background: radial-gradient(ellipse 66% 62% at 50% 64%, color-mix(in srgb, var(--ambient) 88%, transparent), transparent 78%), linear-gradient(180deg, var(--stage-raised), var(--stage)); transition: --ambient 1.1s ease; }
.wallet-hero h1 { font-size: clamp(48px, 5.8vw, 80px); line-height: .98; font-weight: 650; letter-spacing: -.065em; text-wrap: balance; }
.wallet-hero__tagline { margin-top: 4px; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.wallet-hero__lede { max-width: 760px; margin: 18px auto 0; color: var(--pdb-purp-lavender, #d9cbff); font-size: 19px; line-height: 1.4; letter-spacing: -.02em; text-wrap: balance; }
/* The Wallet add-on beside the pass on a phone: the phone is the homepage demo's own bezel. */
.wallet-hero__stage { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 36px); width: var(--content); height: var(--hero-stage-height); margin: 24px auto 0; }
.wallet-hero__stage .wallet-hero__screen { flex: none; width: min(calc(100% - var(--hero-stage-height) * .46 - 36px), var(--hero-stage-height) * 16 / 10); }
.wallet-hero__phone { flex: none; width: calc(var(--hero-stage-height) * .46); margin: 0; }
.wallet-hero__bezel { padding: 4%; border-radius: 18.6% / 8.9%; background: var(--pdb-ink-900, #16101f); box-shadow: 0 30px 60px -20px #000c, 0 0 0 1px #ffffff1f, 0 0 80px color-mix(in srgb, var(--ambient) 45%, transparent); }
/* The phone shows the state the film shows: its stills cross-fade as the film moves on. */
.wallet-hero__phone-screen { position: relative; overflow: hidden; aspect-ratio: 1170 / 2532; border-radius: 15.4% / 7.1%; background: #f3eefb; }
.wallet-hero__phone-screen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.wallet-hero__phone-screen img.is-shown { opacity: 1; }
.wallet-hero__screen { position: relative; overflow: hidden; border: 1px solid #ffffff26; border-radius: 16px; background: #fbf8fe; box-shadow: 0 30px 90px #030007aa, 0 0 140px color-mix(in srgb, var(--ambient) 75%, transparent); transition: box-shadow 1.1s ease; }
.wallet-hero__film { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; }
/* Positioned so the recording frame's shadow (a positioned box) paints under it, not over it. */
.wallet-hero__meaning { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: var(--content); margin: 20px auto 0; padding: 14px 24px; list-style: none; border-top: 1px solid #d9cbff40; border-bottom: 1px solid #d9cbff40; }
.wallet-hero__meaning strong { display: block; font-size: 20px; font-weight: 620; letter-spacing: -.025em; }
.wallet-hero__meaning span { display: block; margin-top: 5px; color: var(--pdb-purp-lavender, #d9cbff); font-size: 13px; line-height: 1.4; }

/* Chapters: the words beside the real thing, alternating sides. */
.wallet-chapter { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 64px; width: min(var(--content), 1220px); margin: 0 auto; padding: 110px var(--gutter); color-scheme: dark; }
.wallet-chapter--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.wallet-chapter--flip .wallet-chapter__copy { order: 2; }
.wallet-chapter h2 { font-size: clamp(34px, 3.8vw, 54px); }
.wallet-chapter__copy > p { margin-top: 20px; color: #d0bddf; font-size: 19px; line-height: 1.45; }
.wallet-points { margin: 26px 0 0; padding: 0; list-style: none; }
.wallet-points li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid #dcc1f022; color: #e6daf0; font-size: 16.5px; line-height: 1.4; }
.wallet-points li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: #f5a9c8; box-shadow: 0 0 10px #f5a9c888; }
.wallet-chapter__film { margin: 0; }
.wallet-chapter__film .wallet-hero__screen { box-shadow: 0 30px 90px #030007aa, 0 0 90px #9554ca33; }
/* The email designer: the invite rebuilding as the design changes. */
.wallet-email { padding: 110px var(--gutter) 100px; color-scheme: dark; background: radial-gradient(ellipse 60% 30% at 50% 10%, #c0266640, transparent 80%), var(--stage); }
.wallet-heading p { max-width: 700px; margin: 20px auto 0; color: #d0bddf; font-size: 19px; line-height: 1.45; }
.wallet-email__stage { width: min(var(--content), 1120px); margin: 0 auto; }
.wallet-email__stage .wallet-hero__screen { box-shadow: 0 30px 90px #030007aa, 0 0 110px #c0266655; }
/* The live demo: the real Admin in the visitor's practice store, a laptop screen wide. */
/* The live Admin (point-of-sale.css) glows in the pass's rose here. */
.wallet-email .live-admin { box-shadow: 0 30px 90px #030007aa, 0 0 110px #c0266655; }
/* Phones get the recording and a way into the full designer: Admin needs a laptop's width. */
.wallet-email__film { display: none; }
.wallet-email__open { display: inline-block; margin-top: 18px; color: #ead6fa; }
.wallet-email__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: min(var(--content), 1120px); margin: 34px auto 0; padding: 0; list-style: none; }
.wallet-email__points strong { display: block; font-size: 20px; font-weight: 620; letter-spacing: -.025em; }
.wallet-email__points span { display: block; margin-top: 6px; color: #cdb9dc; font-size: 15.5px; line-height: 1.45; }

.wallet-reach { padding: 100px var(--gutter) 110px; color-scheme: dark; background: radial-gradient(ellipse 55% 40% at 50% 70%, #24103f, transparent 80%), var(--stage); }
.wallet-reach__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(var(--content), 1220px); margin: 0 auto; padding: 0; list-style: none; }
.wallet-reach__grid li { padding: 28px 24px; border: 1px solid #d9baf02e; border-radius: 22px; background: #ffffff08; }
.wallet-reach__step { display: block; margin-bottom: 16px; color: #f5a9c8; font-size: 13px; font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.wallet-reach__grid strong { display: block; font-size: 21px; font-weight: 620; line-height: 1.15; letter-spacing: -.03em; }
.wallet-reach__grid li > span:last-child { display: block; margin-top: 10px; color: #cdb9dc; font-size: 16px; line-height: 1.45; }

.wallet-finale { color-scheme: dark; color: #fff; padding-bottom: 100px; background: radial-gradient(ellipse 50% 45% at 50% 58%, #42186d, transparent 85%), var(--stage); }
.wallet-finale h2 { font-size: clamp(38px, 4.8vw, 64px); letter-spacing: -.055em; }
.wallet-finale > p { position: relative; margin-top: 20px; color: #ded0eb; font-size: 19px; }
.wallet-finale .pos-link { color: #ead6fa; }
.wallet-finale .pos-link:hover { color: #fff; }
.wallet-finale .live-cta__actions { margin-top: 38px; }

@media (max-width: 1000px) {
  .wallet-chapter, .wallet-chapter--flip { grid-template-columns: 1fr; gap: 40px; padding-top: 90px; padding-bottom: 90px; text-align: center; }
  .wallet-chapter--flip .wallet-chapter__copy { order: 0; }
  .wallet-points { max-width: 520px; margin-left: auto; margin-right: auto; text-align: left; }
  .wallet-reach__grid { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; }
  .wallet-email__points { grid-template-columns: 1fr; max-width: 620px; text-align: center; }
}
@media (max-width: 734px) {
  .wallet-page .product-nav__brand { display: none; }
  .wallet-page .product-nav__title { font-size: 14px; }
  .wallet-hero { padding-top: 28px; padding-bottom: 80px; }
  .wallet-hero h1 { font-size: clamp(44px, 12vw, 68px); }
  .wallet-hero__lede { margin-top: 16px; font-size: 17px; }
  .wallet-hero__lede br { display: none; }
  .wallet-hero__screen { border-radius: 10px; }
  /* On a phone the add-on fills the width and the pass sits over its corner. */
  .wallet-hero__stage { position: relative; display: block; height: auto; }
  .wallet-hero__stage .wallet-hero__screen { width: calc(100% - 38px); }
  .wallet-hero__phone { position: absolute; right: 0; bottom: -26px; width: 27%; }
  .wallet-email { padding-top: 80px; padding-bottom: 80px; }
  .wallet-email__film { display: block; text-align: center; }
  .wallet-hero__meaning { gap: 10px; margin-top: 16px; padding: 15px 0; }
  .wallet-hero__meaning strong { font-size: 15px; line-height: 1.2; }
  .wallet-hero__meaning span { font-size: 12px; }
  .wallet-heading { margin-bottom: 36px; }
  .wallet-heading h2, .wallet-chapter h2 { font-size: clamp(34px, 9vw, 52px); }
  .wallet-chapter__copy > p { font-size: 17px; }
  .wallet-phone { width: min(78%, 290px); }
  .wallet-reach { padding-top: 80px; padding-bottom: 80px; }
  .wallet-reach__grid { grid-template-columns: 1fr; }
  .wallet-finale { padding-bottom: 90px; }
  .wallet-finale > p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wallet-hero, .wallet-hero__screen { transition: none; }
}
/* A phone (html[data-purp-live="off"], sessionWatch.mjs): the recording stays and the note replaces the
 * way into the live designer. */
html[data-purp-live="off"] .wallet-email__open { display: none; }