/* The buying page: a page that explains what is bought and then asks, in the same language as the rest (white blocks on the ground, one main button, tiles, the sunrise). No promise here that the product does not keep. */
.paywall .wrap { padding-bottom: calc(var(--space-6) + 76px + env(safe-area-inset-bottom, 0px)); }   /* room for the bar at the bottom */
.pw-section { margin: 0 0 var(--space-5); }
.pw-section h2 { margin: 0 0 var(--space-2); font-size: 24px; line-height: 1.2; font-weight: 800; }
.pw-hero { padding-bottom: var(--space-4); }
.pw-price-line { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.pw-price-line b { font: 800 28px/1.1 var(--font-sans); }
.pw-price-line span { color: var(--ink-soft); font-size: 16px; }
.pw-hero .btn { margin-top: 4px; text-decoration: none; }

.pw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: pw; }
.pw-steps li { counter-increment: pw; position: relative; display: grid; gap: 4px; padding: 16px 64px 16px 16px; background: var(--raised); border-radius: 24px; box-shadow: var(--shadow-raised); }
.pw-steps li::before { content: counter(pw); position: absolute; inset-inline-start: 16px; top: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--haley-orange); color: #fff; display: grid; place-items: center; font-weight: 800; }
.pw-steps b { font-size: 19px; line-height: 1.25; }
.pw-steps span { color: var(--ink-soft); }

.pw-shots { list-style: none; margin: var(--space-2) -16px 0; padding: 4px 16px 12px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; }
.pw-shots li { flex: 0 0 min(66%, 250px); scroll-snap-align: start; }
.pw-shots figure { margin: 0; display: grid; gap: 8px; }
.pw-shots img { width: 100%; height: auto; border-radius: 22px; box-shadow: var(--shadow-raised); background: var(--raised); }
.pw-shots figcaption { font-size: 16px; font-weight: 700; color: var(--ink-soft); text-align: center; }
.pw-shots:focus-visible { outline-offset: -4px; }

.pw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pw-list li { position: relative; padding: 12px 52px 12px 14px; background: var(--raised); border-radius: 16px; }
.pw-list li::before { content: ''; position: absolute; inset-inline-start: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--action); }
.pw-list li::after { content: ''; position: absolute; inset-inline-start: 22px; top: 19px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

.pw-price-card { text-align: center; padding: 20px; }
.pw-amount { margin: 0; display: grid; gap: 2px; }
.pw-amount b { font: 800 44px/1.05 var(--font-sans); }
.pw-amount span { font-weight: 700; color: var(--ink-soft); }
.pw-offer { margin: 8px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--tint); font-weight: 700; }
.pw-guarantee { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-soft); }
.pw-pay form { margin-top: var(--space-2); }

.pw-faq { display: grid; gap: 8px; }
.pw-faq details { background: var(--raised); border-radius: 16px; padding: 0; }
.pw-faq summary { list-style: none; cursor: pointer; padding: 14px 16px; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }
.pw-faq summary::-webkit-details-marker { display: none; }
.pw-faq summary::after { content: ''; flex: none; width: 10px; height: 10px; border: solid var(--ink-soft); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .2s; }
.pw-faq details[open] summary::after { transform: rotate(-135deg); }
.pw-faq details p { margin: 0; padding: 0 16px 16px; color: var(--ink-soft); }
.pw-faq summary:focus-visible { outline-offset: -3px; border-radius: 16px; }

/* the call to action that follows the reader until the order form is on screen */
.app .pw-sticky { position: fixed; inset-inline: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; width: auto; max-width: 560px; margin-inline: auto; text-decoration: none; box-shadow: 0 8px 24px rgba(45, 41, 38, .22); display: flex; gap: 10px; }
.app .pw-sticky span { font-weight: 700; opacity: .92; }
.app .pw-sticky[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pw-faq summary::after { transition: none; } }
@media (min-width: 720px) { .paywall .wrap { width: min(100% - 48px, 640px); } .pw-shots li { flex-basis: 220px; } .pw-shots { margin-inline: 0; padding-inline: 0; } }

/* the create page: before payment it asks for a code, and the form waits behind "I have a code" */
.pw-gate { text-align: center; padding: 20px; margin-bottom: var(--space-2); }
.pw-gate h2 { margin: 0 0 8px; font-size: 24px; }
.pw-gate .lead { margin: 0 0 16px; }
.pw-gate .btn { text-decoration: none; }
.pw-have:not(.gated) > summary { display: none; }
.pw-have.gated > summary { list-style: none; cursor: pointer; min-height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid var(--line-soft); background: var(--raised); font-weight: 700; margin-bottom: var(--space-2); }
.pw-have.gated > summary::-webkit-details-marker { display: none; }
.pw-have summary:focus-visible { outline-offset: 3px; }

/* the launch price, and a sample of Haley's voice */
.pw-was { margin-inline-end: 10px; color: var(--ink-faint); font: 600 22px/1.1 var(--font-sans); text-decoration-thickness: 2px; }
.pw-amount .pw-was { font-size: 26px; }
.pw-badge { margin: 0; align-self: start; justify-self: start; padding: 6px 14px; border-radius: 999px; background: var(--tint); font-weight: 700; font-size: 16px; }
.pw-sample { padding: 18px; display: grid; gap: 12px; }
.pw-quote { margin: 0; font: 600 20px/1.5 var(--font-sans); }
.pw-sample-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pw-sample-buttons .btn { width: 100%; }
.pw-sample .small { margin: 0; min-height: 1.4em; }
.pw-more { margin: 0; }
.pw-more > summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; color: var(--action); font-weight: 700; }
.pw-more > summary::-webkit-details-marker { display: none; }
.pw-more[open] > summary { margin-bottom: 8px; }
.pw-more p { margin: 0 0 14px; }
.pw-more summary:focus-visible { outline-offset: 3px; border-radius: 8px; }
.pw-sub { margin: 24px 0 12px; font-size: 20px; line-height: 1.3; }
.pw-contact { margin-top: 16px; text-align: center; }
.pw-from { display: inline-block; margin: 0 0 12px; padding: 8px 16px; border-radius: 999px; background: var(--tint); color: var(--ink); font-weight: 700; }

/* the note a gift's sender wrote, shown on the gift page */
.pw-note { margin: 0 0 16px; padding: 16px 20px; border-radius: 20px; background: var(--tint); color: var(--ink); }
.pw-note blockquote { margin: 0 0 8px; font-size: 1.15rem; line-height: 1.6; font-weight: 700; overflow-wrap: anywhere; white-space: pre-wrap; }
.pw-note figcaption { margin: 0; }
.pw-share { margin: 16px 0 0; padding: 16px 20px; border-radius: 20px; border: 2px dashed var(--line, #d9cfc9); }
.pw-share input { width: 100%; }