/* ── Customize page: 1 the cover, 2 the book with that cover, 3 order ───── */
.cz-page { background: var(--surface); color: var(--navy-ink); }
.cz-steps { display: flex; gap: clamp(16px, 2.4vw, 40px); list-style: none; margin: 0; padding: 0; }
.cz-steps a { color: inherit; text-decoration: none; font: 500 12px / 1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; opacity: .45; padding-bottom: 6px; border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s; }
.cz-steps li.on a { opacity: 1; border-bottom-color: currentColor; }
.cz-page .live { min-height: calc(100svh - 90px); }
.cz-page .book { padding-top: clamp(40px, 4vw, 80px); }
.cz-page .book-head { margin-bottom: clamp(24px, 2.4vw, 44px); }
.cz-page .book-title { font-size: clamp(44px, 4.4vw, 84px); }

.cz-order { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(64px, 6vw, 120px) var(--gutter) clamp(80px, 8vw, 150px); }
.cz-title { margin: 0 0 18px; font: 400 clamp(52px, 5.6vw, 108px) / .98 var(--f-head); }
.cz-title em { font-style: italic; }
.cz-text { max-width: 34em; margin: 0 0 32px; font: 400 clamp(17px, 1.15vw, 21px) / 1.65 var(--f-body); }
.cz-small { margin: 22px 0 0; font: 400 15px var(--f-body); }
.cz-small a { color: inherit; }
@media (max-width: 767px) { .o-head .o-mark { font-size: 30px; } .o-back { font-size: 11px; letter-spacing: .14em; white-space: nowrap; } .cz-steps a { font-size: 10px; letter-spacing: .12em; } .cz-page .live { min-height: 0; } }

/* ── the memory card: their page in a phone, the printed card beside it ──── */
.cz-card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: clamp(64px, 6vw, 120px) var(--gutter); }
.cz-card-copy { grid-column: 1 / 6; }
.cz-card-copy .o-btn { margin-top: 26px; }
.mc-pick { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin-top: 8px; cursor: pointer; }
.mc-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mc-pick span { align-self: flex-start; padding: 14px 26px; border: 1.5px solid currentColor; border-radius: 99px; font: 500 13px / 1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; }
.mc-pick small { font: 400 14px / 1.4 var(--f-body); opacity: .75; }
.mc-pick:focus-within span { outline: 2px solid currentColor; outline-offset: 3px; }
.cz-card-show { grid-column: 7 / 13; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 56px); }
.mc-phone { width: clamp(240px, 19vw, 340px); aspect-ratio: 9 / 19.5; border-radius: 42px; padding: 12px; background: var(--navy-ink); box-shadow: 0 40px 60px rgb(24 24 24 / .25); }
.mc-phone iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 32px; background: var(--ivory); }
.mc-card { margin: 0; width: clamp(170px, 13vw, 240px); aspect-ratio: 7 / 10; padding: 16px 14px;   /* not %: that is of the whole row */ display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center;
  background: var(--ivory); border: 2px solid var(--navy-ink); outline: 8px solid var(--ivory); border-radius: 12px; rotate: 4deg; box-shadow: 0 30px 40px rgb(24 24 24 / .22); }
.mc-scan { margin: 0; font: italic 400 clamp(24px, 1.9vw, 36px) / 1 var(--f-head); }
.mc-sub { margin: 4px 0 0; font: 400 clamp(10px, .7vw, 13px) / 1.3 var(--f-body); }
.mc-qr { width: 72%; aspect-ratio: 1; }
.mc-qr svg { display: block; width: 100%; height: 100%; }
.mc-mark { margin: 0; font: 400 clamp(18px, 1.4vw, 26px) / 1.6 var(--f-script); }
@media (max-width: 900px) {
  .cz-card { grid-template-columns: 1fr; row-gap: 48px; }
  .cz-card-copy, .cz-card-show { grid-column: 1; }
  .cz-card-show { gap: 4vw; } .mc-phone { width: 52vw; } .mc-card { width: 30vw; }
}