/* painted-welcome.css (2 Oct 2026, session: painted-lander-part1). Only loaded with the painted welcome
   (intake/painted-welcome.js). Tokens from Claude Design v1's build note; single theme on purpose (paper). */
html.pwl-boot .app, html.pwl-on .app, html.pwl-boot #coach, html.pwl-on #coach, html.pwl-on #resume, html.pwl-on #paintbar { display: none !important; }
.pwl { display: none; }
html.pwl-on .pwl { display: flow-root; }   /* flow-root: the form's top margin must not collapse through and drag the painting down */
html.pwl-on, html.pwl-on body { background: #F9F3E8; color-scheme: light; }
html.pwl-on body { display: flow-root; overflow-x: hidden; }

.pwl {
  --paper: #F9F3E8; --paper-dark: #EFE6D5; --warm-white: #FFFDF8; --ink: #3D3225; --ink-soft: #6B5D4D;
  --line: rgba(139, 115, 85, .42); --go: #A65D3F; --chosen-tint: rgba(248, 237, 229, .95); --pill: rgba(255, 253, 248, .62);
  --shadow: 0 1px 2px rgba(139, 115, 85, .18), 0 6px 16px -8px rgba(139, 115, 85, .32);
  --glow: 0 0 22px var(--paper), 0 0 10px var(--paper), 0 0 3px var(--paper);
  --f-q: "Lora", Georgia, serif; --f-ui: "Quicksand", system-ui, sans-serif; --f-label: "Caveat", cursive;
  --pwl-h: 100vh; --pwl-panel: 0px;
  position: relative; width: 100%; align-self: stretch; box-sizing: border-box; min-height: var(--pwl-h); color: var(--ink); font-family: var(--f-ui); font-size: 1rem; line-height: 1.5;
}
/* The painting: on phones it sits at the top of the document (the page scrolls as one sheet); wide = fixed panel. */
.pwl-art { position: absolute; left: 0; top: 0; width: 100%; height: var(--pwl-h); pointer-events: none; overflow: hidden; }
.pwl-art canvas { display: block; width: 100%; height: 100%; }
.pwl.pwl-wide .pwl-art { position: fixed; width: var(--pwl-panel); height: 100vh; }

/* Brand bar: floats over the painting with a paper glow; gets its paper plate once the page scrolls (v1 review fix). */
.pwl-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 14px) 10px calc(env(safe-area-inset-left, 0px) + 16px);
  background: linear-gradient(to bottom, rgba(249, 243, 232, .82), rgba(249, 243, 232, .5) 70%, rgba(249, 243, 232, 0));
  transition: background-color .25s ease, box-shadow .25s ease; }
.pwl.pwl-scrolled .pwl-bar { background: rgba(249, 243, 232, .96); box-shadow: 0 1px 0 rgba(139, 115, 85, .16); }
.pwl.pwl-wide .pwl-bar { left: var(--pwl-panel); }
.pwl-brand { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.35rem; line-height: 1; color: var(--ink); text-shadow: var(--glow); }
.pwl-brand span { color: var(--go); }
.pwl-bar { flex-wrap: wrap; row-gap: 4px; }
.pwl-count { order: 3; flex: 1 0 100%; }   /* the painted stroke gets its own line under the logo row, like the form */
.pwl-count .mpb { display: block; filter: drop-shadow(0 0 6px rgba(249, 243, 232, .9)); }
.pwl-later { margin-left: auto; min-height: 44px; padding: 0 4px; border: 0; background: none; font: 600 .85rem var(--f-ui); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-shadow: var(--glow); cursor: pointer; }
.pwl-back-note { position: fixed; z-index: 19; top: calc(env(safe-area-inset-top, 0px) + 82px); left: 16px; right: 16px; margin: 0; padding: 8px 12px; border-radius: 12px;
  background: rgba(249, 243, 232, .94); box-shadow: var(--shadow); font-size: .88rem; transition: opacity .6s ease; }
.pwl.pwl-wide .pwl-back-note { left: calc(var(--pwl-panel) + 24px); right: auto; max-width: 30rem; }
.pwl-back-note.gone { opacity: 0; }

/* The handwritten label lands in the calmest spot of the painting (js picks it). */
.pwl-label { position: absolute; left: 16px; top: 72px; font-family: var(--f-label); font-size: 2rem; line-height: 1.15; color: var(--ink); text-shadow: var(--glow);
  white-space: nowrap; opacity: 0; transform: translateY(.5rem) rotate(-4deg) scale(.96); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.pwl-label.on { opacity: 1; transform: rotate(-2deg); }
.pwl.pwl-wide .pwl-label { font-size: 2.5rem; }

/* The question column: phones start at half height on the veil; wide = the paper column, centred. */
.pwl *, .pwl *::before { box-sizing: border-box; }
.pwl-form { position: relative; z-index: 2; margin-top: calc(var(--pwl-h) * .5); min-height: calc(var(--pwl-h) * .5);
  padding: 1.125rem calc(env(safe-area-inset-right, 0px) + 1.125rem) calc(env(safe-area-inset-bottom, 0px) + 1.75rem) calc(env(safe-area-inset-left, 0px) + 1.125rem); }
.pwl-form-in { max-width: 30rem; margin: 0 auto; display: grid; gap: .75rem; transition: opacity .3s ease, transform .3s ease; }
.pwl-form.out .pwl-form-in { opacity: 0; transform: translateY(-.375rem); pointer-events: none; }
.pwl.pwl-wide .pwl-form { margin: 0 0 0 var(--pwl-panel); min-height: 100vh; display: flex; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 4.5rem) clamp(28px, 5vw, 120px) calc(env(safe-area-inset-bottom, 0px) + 9vh) clamp(17px, 3vw, 72px); }
.pwl.pwl-wide .pwl-form-in { width: 100%; max-width: 36rem; margin: 0; }
.pwl-q { margin: 0; font-family: var(--f-q); font-weight: 400; font-size: clamp(1.75rem, 6.4vw, 2.25rem); line-height: 1.15; text-wrap: balance; text-shadow: var(--glow); outline: none; }
.pwl.pwl-wide .pwl-q { font-size: clamp(1.5rem, calc(min(2.4vw, 4.2vh) + .6rem), 3.25rem); }
.pwl-eyebrow { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--go); text-shadow: var(--glow); }
.pwl-note { margin: 0; color: var(--ink); font-size: .92rem; text-shadow: var(--glow); }

.pwl-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.pwl-pill { appearance: none; min-height: 46px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--pill);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow); color: var(--ink); font: 600 1rem/1.25 var(--f-ui);
  text-align: left; cursor: pointer; transition: transform .12s ease, border-color .2s ease, background-color .2s ease; }
.pwl-pill:hover { border-color: var(--go); }
.pwl-pill:active { transform: scale(.97); }
/* Chosen = tick + light tint + terracotta outline, dark text. Never the solid "go on" colour. */
.pwl-pill.on { background: var(--chosen-tint); border: 1.5px solid var(--go); }
.pwl-pill.on::before { content: "\2713"; color: var(--go); font-weight: 700; margin-right: 6px; }
.pwl-pill--quiet { background: rgba(255, 253, 248, .45); border-style: dashed; box-shadow: none; }
.pwl-pill--sm { min-height: 44px; padding: 8px 14px; }
.pwl-go { appearance: none; min-height: 46px; padding: 11px 22px; border: 0; border-radius: 999px; background: var(--go); color: #fff;
  font: 600 1rem var(--f-ui); cursor: pointer; box-shadow: var(--shadow); }
.pwl-go:disabled { background: var(--paper-dark); color: var(--ink-soft); box-shadow: none; cursor: default; }
.pwl-go--wide { width: 100%; margin-top: .25rem; }
.pwl-go--end { justify-self: start; min-width: 14rem; margin-top: .25rem; }
.pwl-field, .pwl-else { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pwl-input { flex: 1 1 12rem; min-width: 0; min-height: 46px; padding: 8px 4px; border: 0; border-bottom: 1.5px solid var(--ink-soft); border-radius: 0;
  background: rgba(255, 253, 248, .55); color: var(--ink); font: 400 1.1rem var(--f-q); }
.pwl-input--big { font-size: 1.25rem; }
.pwl-input::placeholder { color: #8B7355; opacity: 1; }
.pwl-input:focus { outline: none; border-bottom-color: var(--go); }
.pwl-back { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 .9rem var(--f-ui); text-shadow: var(--glow); cursor: pointer; }
.pwl button:focus-visible, .pwl input:focus-visible { outline: 3px solid var(--go); outline-offset: 3px; }
.pwl-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .pwl-form-in, .pwl-label, .pwl-pill, .pwl-back-note { transition: opacity .2s linear; transform: none !important; }
}

/* ---------- The photo step on the painted sheet (2 Oct 2026, painted visitors only: html.pwl-sheet, set by app.js) ----------
   8 Oct 2026 (H-Dawg: "a little tight when the browser is smushed"): on wide screens the painting panel gives way
   to the page: the column keeps at least 540px, the panel takes what is left (up to the full picture), and the
   picture slides so its middle stays in the panel (faces, not the left edge).
   The end-screen painting stays behind the top of the page as a pale ghost (Claude Design's hand-over: ~16%), the header
   lets it through, the heading uses the welcome's question type, the cards are frosted paper and the one "go on" button
   is the welcome's solid terracotta. What the step asks and does is unchanged. */
/* phones: the painting belongs to the step (not the page top), so a banner above it moves painting and text together */
html.pwl-sheet body { background: #F9F3E8; }
@media not all and (min-width: 600px) and (min-aspect-ratio: 85/100) {
  html.pwl-sheet .section {
    background:
      linear-gradient(to bottom, #F9F3E8 0, #F9F3E8 calc(255px - 45vw + var(--pwl-shift, 0px)), rgba(249, 243, 232, .22) calc(355px - 45vw + var(--pwl-shift, 0px)),
        rgba(249, 243, 232, .22) calc(465px - 10vw + var(--pwl-shift, 0px)), rgba(249, 243, 232, .85) calc(605px + 10vw + var(--pwl-shift, 0px)), #F9F3E8 calc(685px + 15vw + var(--pwl-shift, 0px))),
      var(--pwl-art, url(/images/painted/G1-640.webp)) center calc(255px - 45vw + var(--pwl-shift, 0px)) / 100% auto no-repeat,
      #F9F3E8;
  }
}
@media (min-width: 600px) and (min-aspect-ratio: 85/100) {
  /* 8 Oct 2026 (H-Dawg on desktop: "looks weird"): the painting is a tall panel on the left that ends in a soft edge
     exactly where the picture ends (--pwl-p: never wider than the 9:16 painting at full height, 56.25vh), and the
     whole page (header, cards, buttons) sits in the paper to its right, like the welcome. Before, the fade was set
     for a wider panel than the picture (hard right edge), the header's paper strip covered its top, and the page was
     centred across the whole window, over the painting. */
  html.pwl-sheet { --pwl-p: max(0px, min(40vw, 56vh, 100vw - 540px)); }
  html.pwl-sheet body {
    background:
      linear-gradient(to right, rgba(249, 243, 232, .14) 0, rgba(249, 243, 232, .24) calc(var(--pwl-p) * .70), #F9F3E8 var(--pwl-p)) fixed,
      var(--pwl-art-wide, url(/images/painted/G1-1024.webp)) calc((var(--pwl-p) - 56.25vh) / 2) top / auto 100vh no-repeat fixed,
      #F9F3E8;
  }
  html.pwl-sheet .app { box-sizing: border-box; padding-left: var(--pwl-p); }
  html.pwl-sheet .mfb-foot { padding-left: var(--pwl-p); }
}
html.pwl-sheet .app__header { background: rgba(249, 243, 232, .72); border-bottom-color: transparent; }
html.pwl-sheet .section__title { font-family: "Lora", Georgia, serif; font-weight: 400; text-shadow: 0 0 22px #F9F3E8, 0 0 10px #F9F3E8, 0 0 3px #F9F3E8; }
html.pwl-sheet .section__eyebrow, html.pwl-sheet .section__intro { text-shadow: 0 0 18px #F9F3E8, 0 0 8px #F9F3E8, 0 0 3px #F9F3E8; }
html.pwl-sheet .photo-slot { background: rgba(255, 253, 248, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(139, 115, 85, .32); box-shadow: 0 1px 2px rgba(139, 115, 85, .18), 0 10px 24px -12px rgba(139, 115, 85, .36); }
html.pwl-sheet .photo-slot .photo { background: rgba(249, 243, 232, .6); }
html.pwl-sheet .btn--ghost { background: rgba(255, 253, 248, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-color: rgba(139, 115, 85, .42); }
html.pwl-sheet .btn--primary { background: #A65D3F; box-shadow: 0 6px 18px rgba(166, 93, 63, .35); }
html.pwl-sheet .btn--primary:hover { background: #8F4E33; }
html.pwl-sheet .botnav { background: linear-gradient(180deg, rgba(249, 243, 232, 0), rgba(249, 243, 232, .97) 28%, #F9F3E8 55%); }   /* 8 Oct: text scrolling under the buttons no longer shows through */
html.pwl-sheet .steps-line .mpb { filter: drop-shadow(0 0 6px rgba(249, 243, 232, .9)); }

/* 2 Oct 2026 (H-Dawg: "a big shift from a gorgeous painting to a faded version"): the painting now shows at ~80%,
   so the heading and intro sit on a soft frosted-paper panel to stay readable. */
/* trial (H-Dawg 2 Oct): no panel behind the heading; it relies on the paper glow alone */

/* Phones (H-Dawg 2 Oct: "keep the faces visible, move the card lower"): the photo card starts below the faces, and the
   consent line + the looks field under it sit on paper (they were "barely legible" over the painting). */
@media not all and (min-width: 600px) and (min-aspect-ratio: 85/100) {
  /* the first card starts just below the painting's top half (where the people are), whatever the heading's height:
     painting top = 255px - 45vw, painting height = 175vw, so its middle = 255px + 42.5vw (in the step) */
  html.pwl-sheet .section__head { box-sizing: border-box; min-height: calc(247px + 42.5vw + var(--pwl-shift, 0px)); margin-bottom: 0; }
  /* photo step (H-Dawg 2 Oct, G1): card ~100px higher, over the girl's face; the mother's face stays clear above it */
  html.pwl-sheet[data-pwl-step="heroPhotos"] .section__head { min-height: calc(147px + 42.5vw + var(--pwl-shift, 0px)); }
}
html.pwl-sheet .consent-note, html.pwl-sheet .section .q { background: rgba(249, 243, 232, .92); border-radius: 14px; padding: 12px 14px; }
html.pwl-sheet .consent-note { color: #5C4934; }

/* The other painted steps: whatever carries paragraphs or fields sits on paper (H-Dawg's rule: long text on paper). */
html.pwl-sheet .addressee-bar, html.pwl-sheet .pw-welcome-note, html.pwl-sheet .chars-gate, html.pwl-sheet .pw {
  background: rgba(249, 243, 232, .92); border-radius: 16px; padding: 14px 16px; box-shadow: 0 8px 24px -16px rgba(92, 73, 52, .35); }
/* first look + payment: their intros are 4-5 lines and ran over the painting's faces; they get a light paper wash */
html.pwl-sheet[data-pwl-step="charactersHero"] .section__intro, html.pwl-sheet[data-pwl-step="paywall"] .section__intro {
  background: rgba(249, 243, 232, .84); border-radius: 14px; padding: 8px 12px; }
html.pwl-sheet[data-pwl-step="charactersHero"], html.pwl-sheet[data-pwl-step="paywall"] { --pwl-shift: 100px; }   /* long intros: faces below them */
/* First look + payment (H-Dawg 2 Oct: too much scrolling): no faces gap, the content starts under the intro; the
   painting stays behind them as a lighter wash so heading and cards read cleanly. */
html.pwl-sheet[data-pwl-step="charactersHero"], html.pwl-sheet[data-pwl-step="paywall"] { --pwl-shift: 0px; }
@media not all and (min-width: 600px) and (min-aspect-ratio: 85/100) {
  html.pwl-sheet[data-pwl-step="charactersHero"] .section__head, html.pwl-sheet[data-pwl-step="paywall"] .section__head { min-height: 0; margin-bottom: 4px; }
  html.pwl-sheet[data-pwl-step="charactersHero"] .section {
    background:
      linear-gradient(to bottom, rgba(249, 243, 232, .62) 0, rgba(249, 243, 232, .70) 70vh, #F9F3E8 120vh),
      var(--pwl-art, url(/images/painted/G1-640.webp)) center top / 100% auto no-repeat,
      #F9F3E8;
  }
}
/* the optional news tick under the pay button: one small line */
html.pwl-sheet .pwl-news { margin: 10px 0 4px; }
html.pwl-sheet .pwl-news .tick { padding: 8px 10px; background: transparent; border: 0; box-shadow: none; }
html.pwl-sheet .pwl-news .tick__sub, html.pwl-sheet .pwl-news .tick__opt { display: none; }
html.pwl-sheet .pwl-news .tick__title { font-size: .9rem; font-weight: 500; }
/* payment page, painted visitors: no eyebrow (H-Dawg: too much text) */
html.pwl-sheet[data-pwl-step="paywall"] .section__eyebrow { display: none; }
html.pwl-sheet .pw .pwl-news, html.pwl-sheet .pw .pwl-news .tick { background: none; border: 0; box-shadow: none; padding: 4px 0; }
html.pwl-sheet .pw .pwl-news .tick { justify-content: center; text-align: left; }
/* First look, painted visitors: less status text (H-Dawg: "trim the first look too"). The price follows on the
   next page; the per-figure hint and the "more figures are being painted" note go; the one status line stays. */
html.pwl-sheet[data-pwl-step="charactersHero"] .pw-price-note,
html.pwl-sheet[data-pwl-step="charactersHero"] .chars-progress-header__hint,
html.pwl-sheet[data-pwl-step="charactersHero"] .chars-floor-note { display: none !important; }

/* Payment page (H-Dawg: "the page where we ask people to buy is very plain and lacking in the paintings"): the painting
   at full strength behind the whole page and a frosted price card it shows through. No faces gap, so no extra scroll. */
@media not all and (min-width: 600px) and (min-aspect-ratio: 85/100) {
  html.pwl-sheet[data-pwl-step="paywall"] .section {
    background:
      /* 8 Oct 2026: the wash reaches full paper where the painting ends (40px + 167vw), not at 125vh: on a long page
         (the gift fields) the painting's bottom edge showed as a hard line */
      linear-gradient(to bottom, rgba(249, 243, 232, .30) 0, rgba(249, 243, 232, .18) 40vh, rgba(249, 243, 232, .55) calc(40px + 130vw), #F9F3E8 calc(40px + 165vw)),
      var(--pwl-art, url(/images/painted/G1-640.webp)) center calc(40px - 8vw) / 100% auto no-repeat,
      #F9F3E8;
  }
  /* a window between intro and price card where the faces show (painting top ~0, faces ~47% of the width down) */
  html.pwl-sheet[data-pwl-step="paywall"] .section__head { min-height: calc(130px + 40vw); }
}
html.pwl-sheet[data-pwl-step="paywall"] .pw { background: rgba(249, 243, 232, .80); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
html.pwl-sheet[data-pwl-step="paywall"] .section__title { text-shadow: 0 0 24px #F9F3E8, 0 0 12px #F9F3E8, 0 0 4px #F9F3E8; }
html.pwl-sheet[data-pwl-step="paywall"] .pw-price { font-size: 1.9rem; line-height: 1.15; margin-bottom: 4px; }
html.pwl-sheet[data-pwl-step="paywall"] .pw-points { margin: 8px 0 12px; }
/* 30 Oct 2026: "you need not know everything about her" under the order button */
.pw-knowlittle { margin: 4px 0 14px; font-size: 14px; line-height: 1.5; color: var(--text-secondary, #6B5D4D); text-align: center; }

/* ---------- The photo step, part 2 (8 Oct 2026, session: painted-form-part2) ----------
   Why: 3 of the first 4 painted visitors who finished the welcome stopped on this step. On a 360x640 phone its first
   screen showed no upload button, only the big orange "Weiter" (which skips the photo). Now:
   - "Foto auswählen" IS the big terracotta button, inside a solid paper card, above the fold on a 360x640 phone;
   - "Ich habe gerade kein Foto, später hinzufügen" is the quiet outlined option under it, in the same card;
   - the bottom bar (Zurück / Weiter) stays hidden until a photo is in (html.pwl-needphoto, set by app.js
     pwPhotoSync); meanwhile "Zurück" is a quiet link under the consent line.
   H-Dawg's readability rule: the painting only behind the short heading; the tip, buttons and consent sit on paper. */
html.pwl-needphoto .botnav { display: none; }
html.pwl-photo:not(.pwl-needphoto) .photo-slot .photo-later, html.pwl-photo:not(.pwl-needphoto) .pwl-photo-back { display: none; }
html.pwl-sheet[data-pwl-step="heroPhotos"] .section__eyebrow { display: none; }
html.pwl-photo .photo-slot { background: rgba(249, 243, 232, .97); -webkit-backdrop-filter: none; backdrop-filter: none; padding: 16px; }
html.pwl-photo .photo-card--big .photo-nudge { font-size: .92rem; line-height: 1.45; color: #5C4934; margin: 0 0 12px; }
html.pwl-photo .photo-card--big .photo.photo--big {
  justify-content: center; gap: 10px; min-height: 56px; padding: 14px 22px; border: 0; border-radius: 999px;
  background: #A65D3F; box-shadow: 0 6px 18px rgba(166, 93, 63, .35); transition: background-color .2s ease, transform .12s ease; }
html.pwl-photo .photo-card--big .photo.photo--big:hover, html.pwl-photo .photo-card--big .photo.photo--big.is-drag { background: #8F4E33; }
html.pwl-photo .photo-card--big .photo.photo--big:active { transform: scale(.98); }
html.pwl-photo .photo-card--big .photo.photo--big:focus-visible { outline: 3px solid #A65D3F; outline-offset: 3px; }
html.pwl-photo .photo-card--big .photo--big .photo__icon svg { color: #fff; opacity: 1; width: 22px; height: 22px; }
html.pwl-photo .photo-card--big .photo--big .photo__cta { color: #fff; font-size: 1.06rem; }
html.pwl-photo .photo-card--big[data-uploading="true"] .photo--big .photo__icon, html.pwl-photo .photo-card--big[data-uploading="true"] .photo--big .photo__cta { opacity: .55; }
html.pwl-photo .photo-slot .photo-later { display: flex; width: 100%; justify-content: center; gap: 6px; margin: 10px 0 0; min-height: 46px; padding: 10px 14px;
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1.5px solid rgba(139, 115, 85, .42); border-radius: 999px;
  color: #3D3225; font-weight: 600; font-size: .95rem; line-height: 1.3; text-align: center; box-shadow: none; }
html.pwl-photo .photo-slot .photo-later svg { width: 16px; height: 16px; flex: 0 0 auto; }
html.pwl-photo .pwl-photo-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 6px 0 0 4px; padding: 0 4px; border: 0; background: none;
  color: #3D3225; font: 500 .92rem "Quicksand", system-ui, sans-serif; text-decoration: underline; text-decoration-color: rgba(61, 50, 37, .35); text-underline-offset: .22em; cursor: pointer; }
html.pwl-photo .pwl-photo-back svg { width: 16px; height: 16px; }
html.pwl-needphoto .app { padding-bottom: 24px; }
/* Phones: the painting starts under the header (faces near the top of the screen), the short heading sits on its upper
   part, and the paper card starts at the girl's face: painting = 175vw tall (9:16), placed at -40px in the step, so the
   mother's face is at ~-40px + 47vw and the girl's at ~-40px + 70vw. */
@media not all and (min-width: 600px) and (min-aspect-ratio: 85/100) {
  html.pwl-sheet[data-pwl-step="heroPhotos"] .section {
    background:
      linear-gradient(to bottom, rgba(249, 243, 232, .62) 0, rgba(249, 243, 232, .30) 30vw, rgba(249, 243, 232, .10) 48vw,
        rgba(249, 243, 232, .10) 82vw, rgba(249, 243, 232, .92) 112vw, #F9F3E8 128vw),
      var(--pwl-art, url(/images/painted/G1-640.webp)) center -40px / 100% auto no-repeat,
      #F9F3E8;
  }
  html.pwl-sheet[data-pwl-step="heroPhotos"] .section__head { min-height: calc(70vw - 38px); margin-bottom: 0; }
}

/* ---------- The gift on the painted payment page (8 Oct 2026, session: painted-form-part2; PR #6 folded in) ----------
   The welcome's rules: a choice is a pill with a tick + light tint + terracotta outline, never the solid "go on"
   colour (that is the pay button's alone); fields are left-aligned on the paper card. */
html.pwl-sheet .pw-giftmsg .pill {
  flex: 1 1 10rem; min-height: 46px; padding: 10px 16px; border: 1px solid rgba(139, 115, 85, .42); border-radius: 24px;
  background: rgba(255, 253, 248, .9); color: #3D3225; font: 600 1rem/1.25 "Quicksand", system-ui, sans-serif; box-shadow: 0 1px 2px rgba(139, 115, 85, .18); }
html.pwl-sheet .pw-giftmsg .pill[aria-checked="true"] {
  background: rgba(248, 237, 229, .95); border: 1.5px solid #A65D3F; color: #3D3225; }
html.pwl-sheet .pw-giftmsg .pill[aria-checked="true"]::before {
  content: "\2713"; color: #A65D3F; font-weight: 700; margin-right: 6px; }
html.pwl-sheet .pw-giftmsg .pill { font: 400 .98rem/1.45 "Lora", Georgia, serif; border-radius: 16px; }
html.pwl-sheet .pw-giftfields, html.pwl-sheet .pw-giftscene, html.pwl-sheet .pw-giftmsg, html.pwl-sheet .pw-giftnote { text-align: left; }
html.pwl-sheet .section .pw-giftfields .q, html.pwl-sheet .section .pw-giftscene.q, html.pwl-sheet .section .pw-giftmsg.q { background: none; padding: 0; box-shadow: none; border-radius: 0; }
html.pwl-sheet .pw-giftfields .q { margin-bottom: 12px; }
html.pwl-sheet .pw-giftfields .q__label, html.pwl-sheet .pw-giftscene .q__label, html.pwl-sheet .pw-giftmsg .q__label { display: block; font: 600 1rem/1.35 "Quicksand", system-ui, sans-serif; color: #3D3225; }
html.pwl-sheet .pw-giftfields .field, html.pwl-sheet .pw-giftscene .field, html.pwl-sheet .pw-giftmsg .field {
  border: 0; border-bottom: 1.5px solid #6B5D4D; border-radius: 0; background: rgba(255, 253, 248, .7); font: 400 1.08rem "Lora", Georgia, serif; padding: 8px 4px; }
html.pwl-sheet .pw-giftfields .field:focus, html.pwl-sheet .pw-giftscene .field:focus, html.pwl-sheet .pw-giftmsg .field:focus { outline: none; border-bottom-color: #A65D3F; box-shadow: none; }
/* "Karte malen lassen" is a side action: outlined, so the pay button stays the one solid button on the page */
html.pwl-sheet .pw-giftscene [data-giftpaint] { background: transparent; color: #A65D3F; border: 1.5px solid #A65D3F; box-shadow: none; min-height: 46px; }
html.pwl-sheet .pw-giftscene [data-giftpaint]:hover { background: #FFFDF8; }
html.pwl-sheet .pw-giftnote { color: #5C4934; }

/* ---------- The gift's own screens: buyer's card + recipient's welcome (8 Oct 2026, session: painted-form-part2) ----------
   html.pwl-gift (app.js giftPaintedSheet): the painting shows at the top (G1 for the buyer, W0 the open door for the
   recipient), the whole screen sits on one paper card below it. */
html.pwl-gift .gate { box-sizing: border-box; max-width: 34rem; margin: 0 auto; padding: 22px 18px 24px; border-radius: 18px;
  background: rgba(249, 243, 232, .97); box-shadow: 0 10px 30px -18px rgba(92, 73, 52, .45); color: #3D3225; }
html.pwl-gift .gate__crest { display: none; }
html.pwl-gift .gate__title { font-family: "Lora", Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.15; text-wrap: balance; }
html.pwl-gift .gate__body { color: #5C4934; }
html.pwl-gift .gift-welcome .pill { min-height: 46px; border-radius: 24px; border: 1px solid rgba(139, 115, 85, .42); background: rgba(255, 253, 248, .9); color: #3D3225; font-weight: 600; }
html.pwl-gift .gift-welcome .pill[aria-checked="true"] { background: rgba(248, 237, 229, .95); border: 1.5px solid #A65D3F; color: #3D3225; }
html.pwl-gift .gift-welcome .pill[aria-checked="true"]::before { content: "\2713"; color: #A65D3F; font-weight: 700; margin-right: 6px; }
html.pwl-gift .gift-welcome .q, html.pwl-gift .gift-card-step .q { background: none; padding: 0; box-shadow: none; }
html.pwl-gift .gift-welcome .field, html.pwl-gift .gift-card-step .field { border: 0; border-bottom: 1.5px solid #6B5D4D; border-radius: 0; background: rgba(255, 253, 248, .7); font: 400 1.08rem "Lora", Georgia, serif; }
html.pwl-gift .btn--green, html.pwl-gift .gate .btn--primary { background: #A65D3F; border-color: #A65D3F; color: #fff; box-shadow: 0 6px 18px rgba(166, 93, 63, .35); }
@media not all and (min-width: 600px) and (min-aspect-ratio: 85/100) {
  html.pwl-gift .section {
    background:
      linear-gradient(to bottom, rgba(249, 243, 232, .10) 0, rgba(249, 243, 232, .10) 40vw, rgba(249, 243, 232, .9) 70vw, #F9F3E8 85vw),
      var(--pwl-art, url(/images/painted/G1-640.webp)) center -20vw / 100% auto no-repeat,
      #F9F3E8;
  }
  html.pwl-gift .gate { margin-top: 44vw; }
}
@media (min-width: 600px) and (min-aspect-ratio: 85/100) {
  html.pwl-gift .gate { margin-top: 8vh; }
}
html.pwl-gift .gift-welcome .pills { background: none; border: 0; padding: 0; box-shadow: none; display: flex; flex-wrap: wrap; gap: 10px; }
html.pwl-gift .gift-welcome .pill { flex: 1 1 12rem; }

/* "Für mich selbst" (8 Oct 2026): its "Ich bin …" row sits under it, then a quiet "Für jemand anderen …" */
.pwl-self { display: grid; gap: 8px; }
.pwl-self .pwl-note { font-weight: 600; }
.pwl-self + .pwl-pill--quiet { justify-self: start; margin-top: 2px; }

/* the two option cards (8 Oct 2026): paper cards on the frosted price card, the chosen one tinted with the tick */
html.pwl-sheet .pw-opt { background: rgba(255, 253, 248, .92); border-color: rgba(139, 115, 85, .42); box-shadow: 0 1px 2px rgba(139, 115, 85, .18); }
html.pwl-sheet .pw-opt[aria-checked="true"] { background: rgba(248, 237, 229, .97); border-color: #A65D3F; }
html.pwl-sheet .pw-opt__b { font-family: "Lora", Georgia, serif; }

/* "Deine Karte" after payment (8 Oct 2026): the front as it will print, then the fields and the message
   (the message pills use the .pw-giftmsg rules above: html.pwl-sheet is set on the gift screens too) */
html.pwl-gift .gift-card-step .q__label { display: block; font: 600 1rem/1.35 "Quicksand", system-ui, sans-serif; color: #3D3225; }
html.pwl-gift .gift-card-step .qlist { margin: 0 0 6px; }
.gift-front { max-width: 320px; margin: 0 auto 18px; text-align: center; }
.gift-front__img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid #EFE6D5; }
.gift-front__wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 1 / 1; padding: 18px;
  border-radius: 10px; border: 1px dashed rgba(139, 115, 85, .42); background: rgba(255, 253, 248, .7); font-size: .92rem; color: #5C4934; }
.gift-front__for { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.5rem; color: #A65D3F; margin-top: 8px; }
.gift-front__again { margin-top: 4px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: #3D3225; font: 500 .9rem "Quicksand", system-ui, sans-serif;
  text-decoration: underline; text-decoration-color: rgba(61, 50, 37, .35); text-underline-offset: .22em; cursor: pointer; }

/* ---------- The buyer's gift screens on plain paper, "Deine Karte" step by step (8 Oct 2026) ---------- */
html.pwl-giftplain .section, html.pwl-sheet.pwl-giftplain body { background: #F9F3E8; }
html.pwl-sheet.pwl-giftplain .app, html.pwl-sheet.pwl-giftplain .mfb-foot { padding-left: 0; }
html.pwl-giftplain .gate { margin-top: 12px; box-shadow: none; background: transparent; }
@media (min-width: 600px) { html.pwl-giftplain .gate { margin-top: 5vh; } }
.gift-step__eyebrow { margin: 0 0 6px; text-align: center; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #A65D3F; }
.gift-step__q { text-align: center; }
.gift-step__intro, .gift-step__help { margin: -4px 0 14px; text-align: center; font-family: "Lora", Georgia, serif; font-size: .95rem; line-height: 1.5; color: #5C4934; }
html.pwl-gift .gift-step__input { display: block; width: 100%; box-sizing: border-box; font-size: 1.2rem; padding: 10px 6px; margin-bottom: 14px; }
html.pwl-gift .gift-step__own { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 12px; }
.gift-step__go { width: 100%; margin-top: 4px; }
.gift-step__quiet { display: block; margin: 10px auto 0; min-height: 44px; padding: 0 10px; border: 0; background: none; color: #3D3225;
  font: 500 .92rem "Quicksand", system-ui, sans-serif; text-decoration: underline; text-decoration-color: rgba(61, 50, 37, .35); text-underline-offset: .22em; cursor: pointer; }
.gift-step__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 14px; padding: 0 4px; border: 0; background: none; color: #3D3225;
  font: 500 .92rem "Quicksand", system-ui, sans-serif; cursor: pointer; }
.gift-step__back svg { width: 16px; height: 16px; }
html.pwl-gift .gift-card-step .pw-giftmsg .pill { display: block; width: 100%; margin: 0 0 8px; padding: 10px 14px; text-align: left; white-space: normal; line-height: 1.4; }
html.pwl-gift .gift-card-step .pw-giftmsg .pill--quiet { font-family: "Quicksand", system-ui, sans-serif; font-weight: 600; background: rgba(255, 253, 248, .5); border-style: dashed; }
.gift-front--small { max-width: 150px; margin-bottom: 14px; }
.gift-front--small .gift-front__wait { font-size: .78rem; padding: 10px; }
.gift-preview__inside { margin: 16px 0 14px; padding: 16px; border-radius: 12px; border: 1px solid #EFE6D5; background: #FFFDF8; text-align: center; }
.gift-preview__msg { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.2rem; line-height: 1.4; color: #3D3225; }
.gift-preview__hand { margin: 0; font-size: .9rem; color: #6B5D4D; }
.gift-preview__from { margin: 10px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.1rem; color: #A65D3F; }

/* ---------- Phone-first order page (29 Oct 2026, session: no-email-before-pay) ----------
   H-Dawg: "three whole scrolls of text" before the order button. Their portrait, the button, gift and digital as two
   small options, then the rest (Christmas date, no-photo note, country, news tick, Stripe line, email link).
   The painting stays behind the heading only; the "welcome back" box and the floating Zurück stay out of the way. */
html.pwl-sheet[data-pwl-step="paywall"] #resume { display: none !important; }
html.pwl-sheet[data-pwl-step="paywall"] .botnav { position: static; background: none; }
@media not all and (min-width: 600px) and (min-aspect-ratio: 85/100) {
  html.pwl-sheet[data-pwl-step="paywall"] .section__head { min-height: 0; margin-bottom: 12px; }
}
/* 4 Nov 2026: the phone-first pay-screen rules (.pw--first, .pw-portrait, .pw-alt, .pw-more, .pw-unsure) moved to intake.css, shared with How We Met */
/* 4 Nov 2026: the repaint link, Christmas line and money-back line rules now live in intake.css (shared with How We Met) */
/* A sample page above the order button (2 Nov 2026, session: paywall-story-page): WF12's page render, the book's own
   layout. While it paints: the portrait in a page outline with a note and grey text lines. */
.pw-story__t { margin: 0 0 8px; font: 600 1.15rem/1.3 "Lora", Georgia, serif; color: #3B3127; }
.pw-story { margin: 0 auto 14px; width: min(62%, 230px); }
.pw-story__img { display: block; width: 100%; height: auto; transform: rotate(-1deg); box-shadow: 0 14px 30px -12px rgba(92, 73, 52, .55), 0 0 0 1px #EADFCD; }
.pw-story__page { position: relative; aspect-ratio: 210 / 297; padding: 8% 8% 0; background: #FFFDF8; text-align: left; transform: rotate(-1deg);
  box-shadow: 0 14px 30px -12px rgba(92, 73, 52, .55), 0 0 0 1px #EADFCD; box-sizing: border-box; }
.pw-story__pic { position: relative; aspect-ratio: 1 / 1.08; overflow: hidden; background: #F3ECDF; }
.pw-story__pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) saturate(.6); opacity: .55; }
.pw-story__busy { position: absolute; left: 8px; right: 8px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 10px; background: rgba(255, 253, 248, .92); font: 600 .8rem/1.35 "Quicksand", system-ui, sans-serif; color: #5C4934; }
.pw-story__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #A65D3F; border-right-color: transparent;
  animation: pw-story-spin 1s linear infinite; }
@keyframes pw-story-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pw-story__dot { animation: none; } }
.pw-story__line { display: block; height: 6px; margin: 9px 0 0; border-radius: 3px; background: #EFE6D5; }
.pw-story__line--short { width: 60%; }
.pw-story figcaption { margin-top: 10px; font-size: .8rem; line-height: 1.45; color: #7A6550; font-style: italic; }