/* =============================================================================
   MY SAINT STORY — DESKTOP / BASE STYLESHEET
   =============================================================================
   This file holds every rule that applies regardless of screen size (the
   "desktop-first" base). Small-screen overrides live in mobile.css, loaded
   right after this file so its @media rules win at their breakpoints.

   Table of contents
   -----------------
   1.  Design tokens (CSS variables)
   2.  Reset & global element defaults
   3.  Layout helpers (.wrap, .eyebrow)
   4.  Sky backdrop (animated sun + clouds)
   5.  Glass card recipe
   6.  Nav bar
   7.  Buttons
   8.  Hero section
   9.  Generic section scaffolding
   10. Example / book embed section
   11. How-it-works steps
   12. Create panel (CTA)
   13. Promise band
   14. FAQ
   15. Footer
   16. Scroll-reveal animation
   17. Buy popup — modal shell
   18. Buy popup — form fields
   19. Buy popup — photo dropzone
   20. Buy popup — consents, payment, confirmation
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   Central palette + shared measurements. Change a color here and it updates
   everywhere it's used.
----------------------------------------------------------------------------- */
:root{
  --ink:#3A4E68;
  --ink-soft:#4A5A78;
  --ink-muted:#6B7A94;
  --head-blue:#1F4E79;
  --head-plum:#503A55;
  --gold:#B08A3E;
  --gold-strong:#D6A74A;
  --gold-soft:#E7C77F;
  --glass-bg:rgba(255,255,255,.42);
  --glass-border:rgba(255,255,255,.65);
  --glass-shadow:0 20px 50px rgba(120,80,90,.14), inset 0 1px 0 rgba(255,255,255,.85);
  --maxw:1180px;
  color-scheme:light;

  /* Title-on-photo scheme (hero): white+shadow for the big headline, gold+shadow
     for the eyebrow above it, blue+soft-shadow for emphasised words. Kept as
     variables so mobile.css can turn up the shadow without redefining colors. */
  --shadow-title-lg:0 2px 18px rgba(20,40,70,.55), 0 1px 3px rgba(20,40,70,.5);
  --shadow-title-eyebrow:0 1px 8px rgba(20,40,70,.5), 0 1px 2px rgba(20,40,70,.45);
  --shadow-title-em:0 1px 2px rgba(255,255,255,.35);
}

/* -----------------------------------------------------------------------------
   2. RESET & GLOBAL ELEMENT DEFAULTS
----------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Nunito Sans',sans-serif;
  background:linear-gradient(180deg,#5FA8EE 0%,#BEE0FB 45%,#F7FBFF 100%);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
h1,h2,h3,.display{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.08;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}

/* -----------------------------------------------------------------------------
   3. LAYOUT HELPERS
----------------------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.eyebrow{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:800;
  color:var(--gold);display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before,.eyebrow.center::after{content:"";width:34px;height:1px;background:var(--gold-soft)}
.eyebrow.center{justify-content:center}

/* -----------------------------------------------------------------------------
   4. SKY BACKDROP
   Sun + drifting clouds, fixed behind everything on the page.
----------------------------------------------------------------------------- */
@keyframes sunPulse{0%,100%{opacity:.9;}50%{opacity:1;}}
@keyframes cloudMove{0%{transform:translateX(-40vw);}100%{transform:translateX(120vw);}}
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky .sun{
  position:absolute;left:48%;bottom:86%;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #FFF6DD 0%, #FFF3D2 45%, rgba(255,200,120,0) 72%);
  box-shadow:0 0 120px 60px rgba(255,238,190,.22);
  animation:sunPulse 6s ease-in-out infinite;
}
.sky .c1{position:absolute;top:8%;left:0;width:380px;height:120px;filter:blur(2px);opacity:.95;animation:cloudMove 95s linear infinite;animation-delay:-20s;background:radial-gradient(ellipse 34% 52% at 22% 72%,#fff,rgba(255,255,255,0) 72%),radial-gradient(ellipse 26% 62% at 42% 48%,#fff,rgba(255,255,255,0) 70%),radial-gradient(ellipse 30% 70% at 58% 38%,rgba(255,255,255,.98),rgba(255,255,255,0) 70%),radial-gradient(ellipse 28% 55% at 74% 55%,#fff,rgba(255,255,255,0) 70%),radial-gradient(ellipse 18% 45% at 86% 74%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%),radial-gradient(ellipse 62% 34% at 50% 82%,rgba(255,255,255,.98),rgba(255,255,255,0) 75%)}
.sky .c2{position:absolute;top:21%;left:0;width:520px;height:150px;filter:blur(3px);opacity:.8;animation:cloudMove 140s linear infinite;animation-delay:-70s;background:radial-gradient(ellipse 30% 50% at 18% 70%,#fff,rgba(255,255,255,0) 72%),radial-gradient(ellipse 24% 62% at 36% 44%,#fff,rgba(255,255,255,0) 70%),radial-gradient(ellipse 28% 72% at 52% 34%,rgba(255,255,255,.97),rgba(255,255,255,0) 70%),radial-gradient(ellipse 26% 58% at 68% 48%,#fff,rgba(255,255,255,0) 70%),radial-gradient(ellipse 30% 46% at 84% 70%,rgba(255,255,255,.94),rgba(255,255,255,0) 72%),radial-gradient(ellipse 66% 32% at 50% 84%,#fff,rgba(255,255,255,0) 75%)}
.sky .c3{position:absolute;top:43%;left:0;width:300px;height:95px;filter:blur(2px);opacity:.7;animation:cloudMove 110s linear infinite;animation-delay:-45s;background:radial-gradient(ellipse 34% 55% at 26% 68%,#fff,rgba(255,255,255,0) 72%),radial-gradient(ellipse 30% 68% at 48% 42%,rgba(255,255,255,.97),rgba(255,255,255,0) 70%),radial-gradient(ellipse 30% 55% at 70% 60%,#fff,rgba(255,255,255,0) 70%),radial-gradient(ellipse 60% 34% at 50% 80%,rgba(255,255,255,.96),rgba(255,255,255,0) 75%)}
.sky .c4{position:absolute;top:62%;left:0;width:440px;height:130px;filter:blur(4px);opacity:.55;animation:cloudMove 170s linear infinite;animation-delay:-120s;background:radial-gradient(ellipse 32% 52% at 22% 70%,#fff,rgba(255,255,255,0) 72%),radial-gradient(ellipse 26% 66% at 44% 40%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),radial-gradient(ellipse 28% 58% at 64% 50%,#fff,rgba(255,255,255,0) 70%),radial-gradient(ellipse 30% 46% at 82% 68%,rgba(255,255,255,.92),rgba(255,255,255,0) 72%),radial-gradient(ellipse 64% 32% at 50% 82%,rgba(255,255,255,.95),rgba(255,255,255,0) 75%)}
.sky .c5{position:absolute;top:77%;left:0;width:330px;height:100px;filter:blur(3px);opacity:.5;animation:cloudMove 125s linear infinite;animation-delay:-90s;background:radial-gradient(ellipse 34% 54% at 28% 66%,#fff,rgba(255,255,255,0) 72%),radial-gradient(ellipse 28% 66% at 52% 40%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),radial-gradient(ellipse 32% 54% at 74% 62%,#fff,rgba(255,255,255,0) 70%),radial-gradient(ellipse 58% 32% at 50% 80%,rgba(255,255,255,.94),rgba(255,255,255,0) 75%)}

/* -----------------------------------------------------------------------------
   5. GLASS CARD RECIPE
   Shared frosted-glass look reused by hero copy, steps, panels, footer, etc.
----------------------------------------------------------------------------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid var(--glass-border);
  border-radius:24px;
  box-shadow:var(--glass-shadow);
}

/* -----------------------------------------------------------------------------
   6. NAV BAR
----------------------------------------------------------------------------- */
header.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.5);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.65);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;letter-spacing:.01em;color:var(--head-blue)}
.brand-logo{height:62px;width:auto;display:block; padding:0; margin:0}
.nav-links{display:flex;gap:34px;align-items:center;font-size:.95rem;font-weight:700}
.nav-links a{color:var(--ink-soft);transition:color .25s}
.nav-links a:hover{color:#2E6DA4}
.nav .btn{padding:.55em 1.25em}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav-price{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:.95rem;color:var(--ink-soft)}
.menu-toggle{display:none}

/* -----------------------------------------------------------------------------
   7. BUTTONS
----------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:1rem;
  background:linear-gradient(160deg,rgba(94,147,196,.88),rgba(46,109,164,.92));color:#fff;
  padding:.78em 1.6em;border-radius:99px;border:1px solid rgba(255,255,255,.6);
  box-shadow:0 12px 30px rgba(46,109,164,.35);backdrop-filter:blur(14px);
  transition:transform .2s,box-shadow .2s;letter-spacing:.01em;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(46,109,164,.45)}
/* A blocked step has to LOOK blocked — the popup disables its Continue
   button until the step is complete, and without this it stayed
   indistinguishable from a live one. */
.btn:disabled,.btn:disabled:hover{
  background:rgba(255,255,255,.42);color:#9AA5BC;border-color:rgba(255,255,255,.6);
  box-shadow:none;transform:none;cursor:not-allowed;
}
/* .btn's own display:inline-flex outranks the UA stylesheet's
   [hidden]{display:none}, so hiding a button by attribute needs this. */
.btn[hidden]{display:none}
.btn.ghost{background:rgba(255,255,255,.4);color:var(--ink);box-shadow:none;border:1px solid rgba(255,255,255,.65)}
.btn.ghost:hover{background:rgba(255,255,255,.6);transform:translateY(-2px)}
.btn.gold{background:linear-gradient(160deg,rgba(231,199,127,.92),rgba(214,167,74,.95));color:#5C4212;box-shadow:0 12px 28px rgba(214,167,74,.4)}
.btn.gold:hover{box-shadow:0 16px 34px rgba(214,167,74,.5)}

/* -----------------------------------------------------------------------------
   8. HERO SECTION
----------------------------------------------------------------------------- */
.hero{position:relative;padding:32px 0 68px}
.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr .92fr;column-gap:48px;row-gap:38px;
  grid-template-areas:"top photo" "copy photo";
  align-items:start;
}
.hero-body{display:contents}
.hero-top{grid-area:top;align-self:end;max-width:none;margin:0}
.hero-top .eyebrow{color:#FFE9B3;text-shadow:var(--shadow-title-eyebrow)}
.hero-top .eyebrow::before{background:rgba(255,255,255,.75)}
.hero-top h1{
  font-size:clamp(2.5rem,5.4vw,4.3rem);margin:.3em 0 0;color:#fff;
  text-shadow:var(--shadow-title-lg);
}
.hero-top h1 em{font-style:italic;color:var(--head-blue);text-shadow:var(--shadow-title-em)}
.hero-copy{grid-area:copy;padding:38px 40px;align-self:start}
.hero-video{display:block;width:100%;height:auto;border-radius:22px;overflow:hidden;background:rgba(0,0,0,.06);box-shadow:0 18px 40px rgba(31,25,16,.18);margin-bottom:26px}
.hero-copy .lede{font-size:1.2rem;color:var(--ink-soft);max-width:46ch;margin-bottom:1.7em}
.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.btn.btn-wide{width:100%;display:flex;align-items:center;justify-content:center;padding:20px 28px;font-size:1.15rem;letter-spacing:.01em;border-radius:999px}
.hero-trust{display:flex;gap:26px;margin-top:30px;font-size:.9rem;font-weight:700;color:var(--ink-soft);flex-wrap:wrap}
.hero-trust span{display:flex;align-items:center;gap:.5em}
.hero-trust svg{width:17px;height:17px;color:var(--gold-strong);flex:none}

/* real cover from the creator */
/* ---------------------------------------------------------------------------
   Nudge handles — every value defaults to "no change" (0px / scale 1), so
   overriding just one in a later rule (or an inline style, or devtools) moves
   only that thing, from wherever it already sits, without touching the base
   right/top/rotate values above:
     :root{ --stage-x:20px; --stage-y:-10px; --stage-scale:1.08 }  // whole book group
     :root{ --photo-x:-6px; --photo-y:4px }                        // photo only
     :root{ --clip-x:3px;  --clip-y:-2px }                         // clip only
----------------------------------------------------------------------------- */
:root{
  --stage-x:0px; --stage-y:-100px; --stage-scale:1.2;
  --photo-x:70px; --photo-y:5px;
  --clip-x:40px; --clip-y:20px;
}
.book-stage{
  grid-area:photo;align-self:center;position:relative;display:flex;justify-content:center;align-items:center;perspective:1600px;
  transform:translate(var(--stage-x),var(--stage-y)) scale(var(--stage-scale));
}
.book-glow{position:absolute;width:78%;height:78%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,243,210,.85),rgba(255,243,210,0) 68%);filter:blur(8px);z-index:0}
.book{
  position:relative;z-index:2;width:min(430px,100%);aspect-ratio:1/1;border-radius:5px 14px 14px 5px;overflow:hidden;
  box-shadow:
    -16px 0 0 -8px rgba(30,50,90,.18),
    0 30px 60px -18px rgba(46,74,130,.35),
    0 4px 12px rgba(30,50,90,.12);
  transform:rotateY(-6deg) rotateX(1deg);transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  border-left:2px solid rgba(30,50,90,.12);
  background:linear-gradient(155deg,#2E6DA4 0%,#1F4E79 60%,#193F63 100%);
}
.book:hover{transform:rotateY(-2deg) rotateX(0deg) translateY(-6px)}
.book img{display:block;width:100%;height:100%;object-fit:cover}
.book::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0) 9%,rgba(255,255,255,.14) 50%,rgba(0,0,0,0) 92%)}
.book-tag{
  display:none;
  position:absolute;z-index:5;right:-6px;top:30px;background:linear-gradient(160deg,rgba(231,199,127,.95),rgba(214,167,74,.97));color:#5C4212;
  font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.04em;padding:.5em 1em;border-radius:99px;
  box-shadow:0 10px 24px rgba(214,167,74,.45);transform:rotate(3deg)
}
.book-tag b{font-weight:800}
.book-link{display:block;width:min(430px,100%);text-decoration:none;position:relative;z-index:2}
.hero-photo{
  /* height:auto is load-bearing. The <img> carries width/height attributes so
     the browser can reserve the box before the file arrives, but those map to
     PRESENTATIONAL HINTS — real width/height declarations, not just an aspect
     ratio. This rule's `width` overrode the width hint while the height hint
     (383px) stayed, which stretched the instax photo into a tall thin strip.
     With height:auto the hints still supply the aspect ratio, and the height
     follows the width. Any rule that sets one axis on this image must set the
     other; see .brand-logo / .foot-logo, which pair their height with
     width:auto for the same reason. */
  position:absolute;z-index:6;right:20%;top:-14px;width:96px;height:auto;border-radius:4px;
  box-shadow:0 14px 30px rgba(30,50,90,.4);
  transform:translate(var(--photo-x),var(--photo-y)) rotate(-4deg);
  border:1px solid rgba(255,255,255,.6);
  transition:transform .1s ease-in-out;transform-origin:center
}
/* Straightens on hover instead of the old zoom — the gold clip above stays
   put, so the photo reads as pivoting under it, not popping off the page. */
.hero-photo:hover{transform:translate(var(--photo-x),var(--photo-y)) rotate(0deg)}
/* Sits right at the photo's top edge, gripping it to the book cover beneath —
   a small peek above the photo, most of its body over the photo/book seam. */
.hero-clip{
  position:absolute;z-index:7;right:calc(20% + 30px);top:-44px;width:34px;
  transform:translate(var(--clip-x),var(--clip-y)) rotate(-8deg);
  filter:drop-shadow(0 3px 6px rgba(30,50,90,.35));pointer-events:none;
}

/* -----------------------------------------------------------------------------
   9. GENERIC SECTION SCAFFOLDING
   Shared padding/heading rules reused by every content section below the hero.
----------------------------------------------------------------------------- */
section{position:relative;z-index:1}
.sec-pad{padding:96px 0}
.sec-head{max-width:640px;margin-bottom:48px}
.sec-head.center{margin:0 auto 52px;text-align:center}
.sec-head h2{font-size:clamp(2rem,3.6vw,3rem);margin:.34em 0 .3em;color:var(--head-blue)}
.sec-head h2 em{font-style:italic;color:var(--head-plum)}
.sec-head p{color:var(--ink-soft);font-size:1.1rem}

/* #example sits high enough on the body's sky gradient to still read like the
   hero (same title-on-photo scheme: white+shadow / gold+shadow / blue+shadow) —
   sections further down fade toward a near-white background, so they keep the
   default dark, shadow-less heading colors instead. */
#example .eyebrow{color:#FFE9B3;text-shadow:var(--shadow-title-eyebrow)}
#example .eyebrow::before{background:rgba(255,255,255,.75)}
#example .sec-head h2{color:#fff;text-shadow:var(--shadow-title-lg)}
#example .sec-head h2 em{color:var(--head-blue);text-shadow:var(--shadow-title-em)}

/* -----------------------------------------------------------------------------
   10. EXAMPLE / BOOK EMBED SECTION
   The real book, embedded live from the creator.
----------------------------------------------------------------------------- */
.book-embed{margin-top:44px;padding:0;overflow:hidden}
.book-embed iframe{display:block;width:100%;height:584px;border:none;border-radius:14px;transition:opacity .22s ease,transform .34s cubic-bezier(.2,.7,.2,1)}
.book-embed.sliding-out iframe{opacity:0;transform:translateX(-36px)}
.book-embed.sliding-in iframe{animation:exSlideIn .36s cubic-bezier(.2,.7,.2,1)}
@keyframes exSlideIn{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
.caption{text-align:center;margin-top:14px;color:var(--ink-muted);font-style:italic;font-size:.96rem}

.ex-heading{display:flex;align-items:center;justify-content:center;gap:18px}
.ex-nav{border:none;background:none;padding:6px;cursor:pointer;line-height:0;color:var(--gold);opacity:.85;transition:opacity .15s ease,transform .15s ease}
.ex-nav:hover{opacity:1;transform:scale(1.12)}
.ex-nav svg{width:26px;height:26px;display:block}

/* -----------------------------------------------------------------------------
   10b. BOOK CAROUSEL
   One cover per showcase PDF, sitting between the hero and the reader.
   --car-visible controls how many covers fit across .wrap at once.
   --car-size caps each cover's width (e.g. 160px); "none" leaves it to
   --car-visible/--car-gap's automatic sizing.
   --car-photo-size / --car-clip-size set the paperclipped photo/clip
   overlay widths, as a % of the cover (matches their current markup).
----------------------------------------------------------------------------- */
/* Nudge handles — carousel's own copy of the hero's photo/clip nudge pattern
   (§ "real cover from the creator" above). Every value defaults to "no
   change" (0px), so overriding just one moves only that thing, from wherever
   the base right/top/rotate values above already place it:
     :root{ --car-photo-x:-6px; --car-photo-y:4px }   // photo only
     :root{ --car-clip-x:3px;   --car-clip-y:-2px }   // clip only */
:root{
  --car-photo-x:0px; --car-photo-y:12px;
  --car-clip-x:-13px;  --car-clip-y:17px;
}
.book-carousel-sec{--car-visible:5;--car-gap:22px;--car-size:none;--car-photo-size:22%;--car-clip-size:6%;padding:26px 0 8px}
.carousel-lede{text-align:center;margin:0 0 16px;color:var(--ink-muted);font-style:italic;font-size:.96rem}

/* The strip drifts leftwards for ever: the book list is rendered twice and the
   inner rail slides exactly half its width, so the second copy lands where the
   first started and covers leaving on the left re-enter on the right. Each item
   carries its gap as margin-right (not flex `gap`) so that half is exact. */
.carousel-track{
  display:block;list-style:none;margin:0;padding:34px 0 18px;
  width:100vw;margin-left:calc(50% - 50vw);
  padding-top:20px;
  /* Both axes must be named. Setting only overflow-x forces the *other* axis
     from `visible` to `auto` (CSS overflow spec), which on touch turned this
     strip into its own vertical scroll container: swiping down over the
     carousel scrolled the strip instead of the page. `clip` on both axes
     creates no scroll container at all, and overflow-clip-margin keeps the
     paperclipped photos that hang above each cover from being cut off. */
  overflow-x:clip;overflow-y:clip;overflow-clip-margin:60px;
}
.carousel-rail{
  display:flex;width:max-content;list-style:none;margin:0;padding:0;
  animation:carouselDrift var(--car-duration,64s) linear infinite;
}
.carousel-track:hover .carousel-rail,
.carousel-track:focus-within .carousel-rail{animation-play-state:paused}
@keyframes carouselDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.carousel-rail>li{
  flex:0 0 calc((min(100vw, var(--maxw)) - 56px - (var(--car-visible) - 1) * var(--car-gap)) / var(--car-visible));
  max-width:var(--car-size);
  margin-right:var(--car-gap);
}
.carousel-item{
  position:relative;display:block;width:100%;border:none;background:none;padding:0;cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.2,1);
}
.carousel-item:hover{transform:translateY(-6px)}

/* Glow behind the chosen book — sits under the cover and breathes. */
.carousel-item::before{
  content:"";position:absolute;left:50%;top:44%;translate:-50% -50%;
  width:190%;height:170%;border-radius:50%;z-index:0;opacity:0;
  background:radial-gradient(closest-side,
    rgba(255,248,214,1),rgba(255,222,126,.92) 34%,rgba(246,196,84,.6) 58%,rgba(246,196,84,0) 80%);
  filter:blur(6px);
  transition:opacity .35s ease;pointer-events:none;
}
.carousel-item.is-active::before{opacity:1;animation:carouselGlow 3.2s ease-in-out infinite}
@keyframes carouselGlow{0%,100%{opacity:.7;transform:scale(.93)}50%{opacity:1;transform:scale(1.1)}}

.carousel-cover{
  display:block;position:relative;z-index:1;aspect-ratio:1/1;overflow:hidden;border-radius:10px;
  background:linear-gradient(160deg,#efe6d4,#e2d5bd);
  box-shadow:0 12px 26px rgba(30,22,10,.22);
  transition:box-shadow .25s ease,outline-color .25s ease,transform .25s cubic-bezier(.2,.7,.2,1);
  outline:2px solid transparent;outline-offset:2px;
}
.carousel-item.is-active .carousel-cover{
  outline-color:var(--gold);transform:scale(1.04);
  box-shadow:0 18px 38px rgba(30,22,10,.3),0 0 26px rgba(255,226,150,.85);
}
/* Every cover stays fully saturated — the chosen one is set apart by its glow,
   not by dimming the rest. */
.carousel-cover img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;
  filter:saturate(1.16) contrast(1.04);transition:opacity .3s ease}
.carousel-cover img.ready{opacity:1}

/* The child's real photo, paperclipped just outside the cover's top-right
   corner — the exact hero treatment (plain photo, thin white edge, floating
   above/beside the corner under a gold clip), only scaled down. */
.carousel-photo{
  position:absolute;z-index:3;right:-2%;top:-8%;width:var(--car-photo-size);border-radius:3px;
  box-shadow:0 6px 12px rgba(30,22,10,.4);
  border:1px solid rgba(255,255,255,.7);
  transform:translate(var(--car-photo-x),var(--car-photo-y)) rotate(-4deg);
  transform-origin:center;
  transition:transform .2s ease-in-out;
}
.carousel-item:hover .carousel-photo{transform:translate(var(--car-photo-x),var(--car-photo-y)) rotate(0deg)}
.carousel-photo img{display:block;width:100%;height:auto;opacity:1;filter:none;border-radius:2px}
.carousel-clip{
  position:absolute;z-index:4;right:6%;top:-13%;width:var(--car-clip-size);
  transform:translate(var(--car-clip-x),var(--car-clip-y)) rotate(-8deg);
  filter:drop-shadow(0 2px 4px rgba(30,22,10,.35));
  pointer-events:none;
}
.carousel-name{position:relative;z-index:1;display:block;margin-top:10px;text-align:center;font-size:.92rem;color:var(--ink-muted)}
.carousel-item.is-active .carousel-name{color:var(--ink);font-weight:600}

@media (prefers-reduced-motion: reduce){
  /* No drift — so the strip has to be swipeable to reach the later books. */
  /* Horizontal only — overflow-y stays clipped so the page keeps the
     vertical swipe (see the note on .carousel-track above). */
  .carousel-track{overflow-x:auto;overflow-y:clip;scrollbar-width:none;touch-action:pan-x}
  .carousel-track::-webkit-scrollbar{display:none}
  .carousel-rail{animation:none}
  .carousel-item.is-active::before{animation:none}
  .carousel-item.is-active .carousel-cover{transform:none}
  .carousel-item,.carousel-item:hover{transform:none;transition:none}
}

/* -----------------------------------------------------------------------------
   11. HOW-IT-WORKS STEPS
----------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px}
.steps-3{grid-template-columns:repeat(3,1fr)}
.step{position:relative;padding:30px 24px 28px;transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-5px)}
.step .num{font-family:'Cormorant Garamond',serif;font-size:2.7rem;color:var(--gold-soft);line-height:1;font-weight:600}
.step .ic{width:30px;height:30px;color:#2E6DA4;margin:14px 0 12px}
.step h3{font-size:1.32rem;margin-bottom:.35em;color:var(--head-blue)}
.step p{font-size:.96rem;color:var(--ink-soft)}
.step .opt{display:inline-block;margin-top:10px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft);border-radius:999px;padding:.25em .7em}

/* Screenshot / illustration above the title on each of the 3 how-it-works
   cards — a fixed aspect box so the row of cards lines up even though a
   checkout screenshot, a placeholder and an SVG illustration are all
   different native shapes. */
.step-shot{
  aspect-ratio:4/3;border-radius:14px;overflow:hidden;margin:0 0 16px;
  background:rgba(46,109,164,.06);box-shadow:0 10px 26px rgba(40,60,110,.14),inset 0 0 0 1px rgba(46,109,164,.1);
}
.step-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.step-shot-placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  border:1.5px dashed rgba(46,109,164,.35);background:rgba(46,109,164,.04);box-shadow:none;
}
.step-shot-placeholder span{font-size:.82rem;color:var(--ink-soft);line-height:1.5}
.step-shot-placeholder em{font-style:normal;color:var(--gold)}
.step-illustration{display:flex;align-items:center;justify-content:center;background:rgba(200,160,90,.08);box-shadow:none}
.step-illustration svg{width:62%;height:62%;color:#2E6DA4}

/* -----------------------------------------------------------------------------
   12. CREATE PANEL (CTA)
   Glass panel that leads into the real creator/checkout.
----------------------------------------------------------------------------- */
.create-panel{max-width:720px;margin:0 auto;padding:44px 46px;text-align:center}
.need-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin:26px 0 8px;text-align:left}
.need{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--ink-soft)}
.need svg{width:20px;height:20px;flex:none;color:#2E6DA4;margin-top:2px}
.need b{color:var(--ink);font-weight:800}
.price-line{margin:26px 0 6px;font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;color:var(--head-blue)}
.price-line .amt{font-size:2.2rem;color:var(--gold)}
.create-panel .btn{margin-top:16px;font-size:1.1rem;padding:.9em 2.2em}
.fineprint{font-size:.82rem;color:var(--ink-muted);margin-top:16px}

/* -----------------------------------------------------------------------------
   13. PROMISE BAND
   Denser glass band with the three trust pillars.
----------------------------------------------------------------------------- */
.band-dark{position:relative;z-index:1}
.band-dark .band-inner{
  background:linear-gradient(160deg,rgba(31,62,110,.72),rgba(25,63,99,.78));
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.25);border-radius:28px;
  box-shadow:0 24px 60px rgba(30,50,90,.3);
  color:#F4F6FF;padding:56px 46px;
}
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.promise .p{padding:8px}
.promise .ic{width:38px;height:38px;color:var(--gold-soft);margin-bottom:14px}
.promise h3{font-size:1.35rem;margin-bottom:.3em;color:#fff}
.promise p{color:#C9D6EE;font-size:.96rem}

/* -----------------------------------------------------------------------------
   14. FAQ
----------------------------------------------------------------------------- */
.faq{max-width:760px;margin:0 auto;padding:10px 30px}
.qa{border-bottom:1px solid rgba(255,255,255,.55)}
.qa:last-child{border-bottom:none}
.qa summary{cursor:pointer;list-style:none;padding:22px 4px;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.3rem;color:var(--head-blue);display:flex;justify-content:space-between;gap:18px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pl{color:var(--gold-strong);font-size:1.5rem;transition:transform .3s;flex:none}
.qa[open] summary .pl{transform:rotate(45deg)}
.qa p{padding:0 4px 24px;color:var(--ink-soft)}

/* -----------------------------------------------------------------------------
   15. FOOTER
   Glass-dark band.
----------------------------------------------------------------------------- */
footer{position:relative;z-index:1;padding:0 0 40px}
.foot-inner{
  background:linear-gradient(160deg,rgba(26,44,84,.8),rgba(18,36,72,.85));
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.2);border-radius:28px;
  color:#AEB9E2;padding:56px 46px 36px;
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
.foot-brand{display:flex;align-items:center;gap:11px;color:#F4F3EA;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.6rem;margin-bottom:14px}
.foot-logo{height:38px;width:auto;display:block}
footer h4{font-family:'Cormorant Garamond',serif;color:#F4F3EA;font-weight:700;margin-bottom:14px;font-size:1.1rem;letter-spacing:.02em}
footer a{color:#AEB9E2;display:block;padding:5px 0;transition:color .2s}
footer a:hover{color:var(--gold-soft)}
.foot-addr{font-style:normal;line-height:1.8;font-size:.94rem}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:#8794C4}

/* -----------------------------------------------------------------------------
   16. SCROLL-REVEAL ANIMATION
   Elements start hidden/offset and fade+slide in once IntersectionObserver
   (see index.html script) adds the .in class.
----------------------------------------------------------------------------- */
/* Everything below the fold fades in when it scrolls into view — .in is added
   by an IntersectionObserver in index.html. */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}

/* The hero is above the fold by definition, so it must never wait for
   JavaScript to become visible — .reveal would have kept it at opacity:0 until
   the observer ran. Same entrance, driven by CSS, starting at first paint. */
.hero-in{animation:heroIn .7s cubic-bezier(.2,.7,.2,1) both}
/* The book group carries its own transform (the --stage-* nudges), so it fades
   without being translated — animating transform here would fight those. */
.book-stage.hero-in{animation-name:heroFade}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .hero-in{animation:none}
}
.reveal.in{opacity:1;transform:none}


/* -----------------------------------------------------------------------------
   17. BUY POPUP — MODAL SHELL
   Checkout lives in a modal on this page rather than on a subpage, so the
   landing page's own sky and content stay visible behind it. The overlay is
   deliberately translucent for exactly that reason. Same recipe the old
   creator used for its buy modal (see archive/2026-08-11-live-creator/).
----------------------------------------------------------------------------- */
@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
.modal-overlay{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(70,60,100,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.modal-overlay[hidden]{display:none}
.modal{
  position:relative;width:520px;max-width:100%;max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.75);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);
  border:1px solid rgba(255,255,255,.8);border-radius:26px;
  box-shadow:0 30px 70px rgba(40,40,80,.35), inset 0 1px 0 rgba(255,255,255,.9);
  animation:fadeUp .3s ease;
}
.modal-head{padding:26px 30px 0;flex:none}
.modal-close{
  position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.55);color:var(--ink-muted);
  font-size:14px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:#fff;color:var(--ink)}
.modal h3{font-size:1.7rem;color:var(--head-blue);margin-bottom:.2em}
.modal .sub{font-size:.94rem;color:var(--ink-soft);margin-bottom:4px}
.modal-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 3px rgba(90,60,80,.12);overflow:hidden;margin:18px 0 0}
.modal-bar i{display:block;height:100%;border-radius:99px;width:25%;
  background:linear-gradient(90deg,#F5B87F,#E8A0A8 40%,#7FA9DC);transition:width .35s ease}
.modal-body{padding:22px 30px;overflow-y:auto;flex:1 1 auto}
.modal-foot{padding:0 30px 26px;display:flex;gap:12px;justify-content:space-between;align-items:center;flex:none}
.modal-foot .btn{padding:.72em 1.5em;font-size:.97rem}
.modal-foot .spacer{flex:1}

/* -----------------------------------------------------------------------------
   18. BUY POPUP — FORM FIELDS
----------------------------------------------------------------------------- */
.fld{display:block;margin-bottom:16px}
.fld > span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#6E87A8;margin-bottom:7px}
.fld input,.fld select{
  width:100%;padding:13px 15px;border:1px solid rgba(255,255,255,.85);border-radius:13px;
  font-family:'Nunito Sans',sans-serif;font-size:1rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.62);outline:none;
}
.fld input:focus,.fld select:focus{border-color:#8FB6D9;box-shadow:0 0 0 4px rgba(143,182,217,.22)}
.fld .hint{font-size:.78rem;font-weight:600;color:var(--ink-muted);margin-top:6px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.fld-row.thirds{grid-template-columns:1.4fr 1fr 1fr}

/* -----------------------------------------------------------------------------
   19. BUY POPUP — PHOTO DROPZONE
----------------------------------------------------------------------------- */
.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  border:1.5px dashed rgba(120,140,190,.5);border-radius:18px;padding:30px 20px;text-align:center;
  background:rgba(255,255,255,.3);transition:background .2s
}
.drop:hover,.drop.over{background:rgba(255,255,255,.55)}
.drop .ring{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#2E6DA4;background:linear-gradient(160deg,rgba(220,237,251,.9),rgba(191,220,245,.9))}
.drop b{font-size:.96rem;color:#2E6DA4}
.drop small{font-size:.78rem;color:#7E8AA8}
.photo-ok{display:flex;align-items:center;gap:15px}
/* .photo-ok's display:flex outranks the UA's [hidden]{display:none} — say it again. */
.photo-ok[hidden]{display:none}
.photo-ok img{width:86px;height:86px;border-radius:50%;object-fit:cover;flex:none;
  border:3px solid #FBE7BC;box-shadow:0 0 0 4px rgba(214,167,74,.25)}
.photo-ok b{display:block;font-size:.95rem;color:#3E4B66}
.photo-ok p{font-size:.8rem;color:var(--ink-muted);line-height:1.5}
.photo-ok button{border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.55);border-radius:9px;
  padding:7px 12px;font-size:.76rem;font-weight:700;color:#5A6A85;cursor:pointer;flex:none}

/* -----------------------------------------------------------------------------
   20. BUY POPUP — CONSENTS, PAYMENT, CONFIRMATION
----------------------------------------------------------------------------- */
.consents{background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.6);border-radius:16px;
  padding:18px 20px;margin-top:18px}
.consents > b{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#6E87A8;margin-bottom:12px}
.consents label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.8rem;line-height:1.55;
  color:var(--ink-soft);margin-bottom:11px}
.consents label:last-of-type{margin-bottom:0}
.consents input{margin-top:3px;accent-color:#2E6DA4;width:15px;height:15px;flex:none}
.consents .legal{margin-top:11px;font-size:.7rem;color:var(--ink-muted);line-height:1.5}

.pay-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;margin-bottom:16px;
  border-radius:14px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7)}
.pay-total span{font-size:.86rem;font-weight:700;color:var(--ink-soft)}
.pay-total b{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:700;color:var(--gold)}
.testmode{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;margin-bottom:18px;border-radius:13px;
  background:rgba(255,247,225,.75);border:1px solid rgba(226,196,124,.75);font-size:.8rem;line-height:1.55;color:#7A5A1D}
.testmode b{display:block;font-weight:800}

.modal-err{margin:0 30px 14px;padding:11px 15px;border-radius:12px;font-size:.84rem;line-height:1.5;
  background:rgba(252,240,239,.9);border:1px solid rgba(235,203,199,.9);color:#9A4A3F}
.modal-err[hidden]{display:none}

.done{text-align:center;padding:6px 0 4px}
.done .tick{width:62px;height:62px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;
  justify-content:center;font-size:26px;color:#7A5A1D;background:linear-gradient(160deg,#FBE7BC,#D6A74A)}
.done .no{display:inline-block;margin:4px 0 14px;padding:.45em 1em;border-radius:99px;font-weight:800;
  font-size:.92rem;letter-spacing:.06em;color:var(--head-blue);background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.8)}
.done p{font-size:.95rem;color:var(--ink-soft);line-height:1.65}

/* -----------------------------------------------------------------------------
   20b. BUY POPUP — THE GROWN-UPS (step 3)
----------------------------------------------------------------------------- */
.adult-slot{background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.6);border-radius:16px;
  padding:16px 18px;margin-bottom:14px}
.adult-slot[hidden]{display:none}
.adult-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.adult-head b{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6E87A8}
.adult-head button{border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.55);border-radius:9px;
  padding:5px 11px;font-size:.72rem;font-weight:700;color:#5A6A85;cursor:pointer}
.adult-head button[hidden]{display:none}
.adult-slot .drop{padding:18px 16px;gap:7px}
.adult-slot .drop .ring{width:46px;height:46px;font-size:19px}
.adult-slot .photo-ok img{width:66px;height:66px}
.adult-slot .fld{margin-bottom:0}
.btn.adult-add{width:100%;padding:.7em 1.2em;font-size:.9rem}