/* ============================================================================
   Gyftalala Scrapbook — product page styles
   Optimised for Meta Ads landing: no framework, system font fallback until
   Google Fonts hydrate, all theme spreads driven by CSS custom properties.
============================================================================ */

/* Poppins faces required by the shared site header/footer.
   Inlined here so we can skip global.css (its universal `* { font-family }`
   rule would clobber the scrapbook page's DM Serif / Caveat typography). */
@font-face { font-family: "poppins-medium";        src: url("/assets/fonts/Poppins-Medium.woff2")        format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "poppins-medium-italic"; src: url("/assets/fonts/Poppins-MediumItalic.woff2")  format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "poppins-semibold";      src: url("/assets/fonts/Poppins-SemiBold.woff2")      format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "poppins-bold";          src: url("/assets/fonts/Poppins-Bold.woff2")          format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "poppins-black";         src: url("/assets/fonts/Poppins-Black.woff2")         format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --cream:   #F5EFE4;
  --paper:   #FBF6EC;
  --kraft:   #E8DEC9;
  --ink:     #1F1A14;
  --red:     #C4423A;
  --mustard: #E8B04A;
  --forest:  #2F5D4F;
  --rose:    #E8A6A0;
  --sky:     #A8C5D6;
  --muted:   #6a5d4d;
  --hairline:#3a3128;

  --serif: 'DM Serif Display', Georgia, serif;
  --sans:  'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --hand:  'Caveat', 'Brush Script MT', cursive;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: 'Archivo Black', Impact, sans-serif;

  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");

  /* Map shared reviews-widget tokens (consumed by reviews.css under
     body.landing-fraunces-page) to the scrapbook palette. */
  --sb-ink:         #1F1A14;
  --sb-muted:       #6a5d4d;
  --sb-line:        rgba(31, 26, 20, 0.14);
  --sb-card:        rgba(255, 252, 244, 0.92);
  --sb-shadow:      0 8px 22px rgba(40, 28, 14, 0.10);
  --sb-accent:      #C4423A;
  --sb-accent-deep: #9E2F28;
  --sb-secondary:   #2F5D4F;
}

/* Scrapbook-toned reviews widget (overrides reviews.css base teal accents
   when landing-fraunces-page mappings don't reach a selector). */
.scrapbook-reviews #reviewsMount .write-review-btn { background: var(--red); color: #fff; }
.scrapbook-reviews #reviewsMount .bar-fill         { background: var(--forest); }
.scrapbook-reviews #reviewsMount .review-stars,
.scrapbook-reviews #reviewsMount .stars-row        { color: var(--mustard); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* reviews.css ships with `body { max-width: 800px; color: #111 !important }`
     (a splashbook artifact). Reassert full-width + scrapbook palette. */
  max-width: none !important;
  background: var(--cream);
  background-image: var(--paper-grain);
  color: var(--ink) !important;
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── Layout container ─── */
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: 80px; }

/* Match section width to global header/footer (1400px, 7px inline gutters). */
.hero,
.pricing,
.themes,
.howto,
.reviews,
.faq,
.scrapbook-cta {
  width: calc(100% - 14px);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* The themes section paints its own mustard background, so visually
   it outruns the other sections (which have transparent fill and only
   read as wide as their inner content). Cap the orange band's width
   to match the inner content area of the body sections — i.e. the
   1400px section minus their 80px side padding on each side. */
.themes {
  max-width: 1240px;
}


/* ─── Nav ─── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid rgba(31,26,20,0.06);
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 80px;
}
.nav-brand { display: flex; align-items: baseline; gap: 10px; }
.nav-brand .logo { font-family: var(--serif); font-size: 28px; letter-spacing: -0.5px; }
.nav-brand .tag  { font-family: var(--hand); font-size: 20px; color: var(--red); }
.nav-links { display: flex; gap: 32px; font-size: 14px; font-weight: 500; }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-right .track { font-size: 14px; }
.btn-primary {
  background: var(--red); color: #fff;
  border: none; border-radius: 999px;
  padding: 14px 24px; font-weight: 700; font-size: 15px;
  cursor: pointer; box-shadow: 4px 4px 0 var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.btn-primary:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn-primary.compact { padding: 11px 18px; font-size: 13.5px; box-shadow: 3px 3px 0 var(--ink); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 13px 22px; font-weight: 600; font-size: 14.5px; cursor: pointer;
}
.nav-burger {
  display: none; width: 38px; height: 38px;
  border: 1.5px solid var(--ink); border-radius: 8px;
  background: transparent; padding: 8px 9px;
  flex-direction: column; justify-content: center; gap: 4px; cursor: pointer;
}
.nav-burger span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 1px; }

/* ─── Hero ─── */
.hero {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px;
  align-items: center;
  padding: 56px 80px 80px;
  position: relative;
}
.hero-left { position: relative; }
.theme-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 20px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: #fff; font-weight: 600; font-size: 15px; cursor: pointer;
  margin-bottom: 24px; position: relative;
}
.theme-pill svg { transition: transform .2s; }
.theme-pill[aria-expanded="true"] svg { transform: rotate(180deg); }
.theme-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 25;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 14px;
  padding: 6px; min-width: 220px;
  box-shadow: 0 16px 32px rgba(31,26,20,0.18);
  display: none;
}
.theme-pill[aria-expanded="true"] + .theme-menu { display: block; }
.theme-menu button {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; background: transparent; border: none;
  border-radius: 10px; font-size: 14.5px; font-weight: 500;
  color: var(--ink); cursor: pointer; font-family: inherit;
}
.theme-menu button[aria-selected="true"] { background: var(--paper); font-weight: 700; }
.theme-menu button:hover { background: var(--paper); }

.h1 {
  font-family: var(--serif); font-size: 88px; line-height: 0.95;
  letter-spacing: -2.2px; margin: 0; text-wrap: pretty;
}
.h1 .script {
  font-family: var(--hand); color: var(--red); font-size: 104px; font-weight: 600;
}
.h1 .underlined { position: relative; display: inline-block; }
.h1 .underlined svg {
  position: absolute; left: -4px; right: -4px; bottom: -10px;
  width: calc(100% + 8px); height: 14px; pointer-events: none;
}
.hero-ctas { display: flex; gap: 14px; align-items: center; margin-bottom: 32px; flex-wrap: wrap; }

.hero-right {
  display: flex; justify-content: center; position: relative;
  padding: 16px 0 56px;
}
.hero-polaroid { position: absolute; z-index: 5; }
.hero-polaroid.tl { top: 16px; left: -10px; }
.hero-polaroid.br { bottom: 50px; right: -10px; }

/* ─── Flipbook (3D) ─── */
.flipbook {
  --book-w: 300px; --book-h: 420px;
  position: relative;
  width: calc(var(--book-w) * 2); height: var(--book-h);
  perspective: 2400px;
}
.flipbook-shadow {
  position: absolute; inset: 88% -6% -10% -6%;
  background: radial-gradient(ellipse at center, rgba(31,26,20,0.32), transparent 70%);
  filter: blur(6px); z-index: 0;
}
/* <img> with object-fit:contain preserves the binding's source aspect ratio
   (front/back 100×912, middle 336×3523) — no horizontal squish like with
   background-size:100% 100%. */
.flipbook-spine {
  position: absolute; left: 50%; top: 2%; bottom: 2%;
  width: auto; height: 96%;
  transform: translateX(-50%);
  object-fit: contain; object-position: center;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
  z-index: 30; pointer-events: none;
}
.flipbook-pages { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.flipbook-page {
  position: absolute; left: 50%; top: 0;
  width: 50%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(.4,.05,.2,1);
  cursor: pointer;
}
.flipbook-page.flipped { transform: rotateY(-176deg); }
.face {
  position: absolute; inset: 0;
  background: var(--paper);
  background-image: var(--paper-grain);
  border-radius: 2px 8px 8px 2px;
  box-shadow: inset 6px 0 14px -8px rgba(0,0,0,0.28);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.face.back {
  transform: rotateY(180deg);
  border-radius: 8px 2px 2px 8px;
  box-shadow: inset -6px 0 14px -8px rgba(0,0,0,0.28);
}

/* ─── Theme page (the actual art inside each flipbook page) ─── */
/* Theme color variables driven by [data-theme="X"] */
.tp { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: var(--sans); }
[data-theme="wedding"]     { --t-bg:#FBF6EC; --t-accent:#E8A6A0; --t-accent2:#C4423A; --t-ink:#1F1A14;
                              --t-p1:#C4423A; --t-p2:#dca47a; --t-p3:#8a3f37; --t-p4:#E8A6A0; --t-p5:#a64a3a; }
[data-theme="anniversary"] { --t-bg:#F4EADB; --t-accent:#C4423A; --t-accent2:#7A4A2B; --t-ink:#1F1A14;
                              --t-p1:#7A4A2B; --t-p2:#cbb89a; --t-p3:#a89478; --t-p4:#D49A3E; --t-p5:#8a6f4a; }
[data-theme="birthday"]    { --t-bg:#FFF8E8; --t-accent:#E8B04A; --t-accent2:#C4423A; --t-ink:#1F1A14;
                              --t-p1:#E8B04A; --t-p2:#C97B35; --t-p3:#D49A3E; --t-p4:#C4423A; --t-p5:#E8A6A0; }
[data-theme="baby"]        { --t-bg:#F0EDE0; --t-accent:#A8C5D6; --t-accent2:#E8A6A0; --t-ink:#1F1A14;
                              --t-p1:#A8C5D6; --t-p2:#d5dee5; --t-p3:#cabba0; --t-p4:#E8A6A0; --t-p5:#b8c9d3; }
[data-theme="friends"]     { --t-bg:#FAF3E0; --t-accent:#E8B04A; --t-accent2:#2F5D4F; --t-ink:#1F1A14;
                              --t-p1:#E8B04A; --t-p2:#D49A3E; --t-p3:#A89478; --t-p4:#2F5D4F; --t-p5:#C4423A; }
[data-theme="family"]      { --t-bg:#EFE9D8; --t-accent:#2F5D4F; --t-accent2:#A89478; --t-ink:#1F1A14;
                              --t-p1:#6a8a76; --t-p2:#A89478; --t-p3:#cbb89a; --t-p4:#2F5D4F; --t-p5:#8a6f4a; }
[data-theme="travel"]      { --t-bg:#F2E9D2; --t-accent:#2F5D4F; --t-accent2:#C4423A; --t-ink:#1F1A14;
                              --t-p1:#2F5D4F; --t-p2:#6a8a76; --t-p3:#a8b89a; --t-p4:#D49A3E; --t-p5:#8a3f37; }

.tp { background: var(--t-bg); background-image: var(--paper-grain); }
.tp[data-theme="wedding"]     { background: var(--t-pat-wedding),     var(--paper-grain), #FBF6EC; }
.tp[data-theme="anniversary"] { background: var(--t-pat-anniversary), var(--paper-grain), #F4EADB; }
.tp[data-theme="birthday"]    { background: var(--t-pat-birthday),    var(--paper-grain), #FFF8E8; }
.tp[data-theme="baby"]        { background: var(--t-pat-baby),        var(--paper-grain), #F0EDE0; }
.tp[data-theme="friends"]     { background: var(--t-pat-friends),     var(--paper-grain), #FAF3E0; }
.tp[data-theme="family"]      { background: var(--t-pat-family),      var(--paper-grain), #EFE9D8; }
.tp[data-theme="travel"]      { background: var(--t-pat-travel),      var(--paper-grain), #F2E9D2; }

:root {
  --t-pat-wedding: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><path d='M22 32 C 14 25, 10 20, 13 14 C 16 9, 20 10, 22 14 C 24 10, 28 9, 31 14 C 34 20, 30 25, 22 32 Z' fill='%23E8A6A0' opacity='0.18'/></svg>");
  --t-pat-anniversary: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><circle cx='12' cy='12' r='6' fill='none' stroke='%23C4423A' stroke-width='1' opacity='0.25'/><circle cx='36' cy='36' r='4' fill='none' stroke='%23C4423A' stroke-width='1' opacity='0.25'/><circle cx='36' cy='12' r='2' fill='%23C4423A' opacity='0.18'/><circle cx='12' cy='36' r='2' fill='%23C4423A' opacity='0.18'/></svg>");
  --t-pat-birthday: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52'><path d='M6 10 L 10 6 L 14 10 L 10 14 Z' fill='%23E8B04A' opacity='0.35'/><circle cx='28' cy='8' r='2' fill='%23C4423A' opacity='0.4'/><path d='M40 24 L 44 28 L 40 32 L 36 28 Z' fill='%232F5D4F' opacity='0.3'/><circle cx='14' cy='34' r='3' fill='%23E8B04A' opacity='0.4'/><path d='M30 44 L 34 40 L 38 44' fill='none' stroke='%23C4423A' stroke-width='1.5' opacity='0.35'/></svg>");
  --t-pat-baby: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><ellipse cx='12' cy='14' rx='8' ry='4' fill='%23A8C5D6' opacity='0.3'/><circle cx='10' cy='14' r='3' fill='%23A8C5D6' opacity='0.3'/><circle cx='14' cy='13' r='3' fill='%23A8C5D6' opacity='0.3'/><path d='M36 30 L 38 26 L 40 30 L 44 30 L 41 33 L 42 37 L 38 35 L 34 37 L 35 33 L 32 30 Z' fill='%23E8B04A' opacity='0.4'/><circle cx='42' cy='8' r='1.5' fill='%231F1A14' opacity='0.3'/></svg>");
  --t-pat-friends: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><path d='M8 18 L 12 8 L 9 16 L 14 14 L 10 24 Z' fill='%23E8B04A' opacity='0.45'/><path d='M40 6 L 42 2 L 44 6 L 48 6 L 45 9 L 46 13 L 42 11 L 38 13 L 39 9 L 36 6 Z' fill='%23C4423A' opacity='0.35'/><path d='M30 38 L 34 28 L 31 36 L 36 34 L 32 44 Z' fill='%232F5D4F' opacity='0.35'/><circle cx='14' cy='42' r='2' fill='%23E8B04A' opacity='0.45'/></svg>");
  --t-pat-family: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M12 20 Q 8 14, 12 8 Q 16 14, 12 20 Z' fill='%232F5D4F' opacity='0.25'/><path d='M36 38 Q 32 32, 36 26 Q 40 32, 36 38 Z' fill='%232F5D4F' opacity='0.25'/><path d='M28 12 Q 24 6, 28 0 Q 32 6, 28 12 Z' fill='%236a8a76' opacity='0.3'/><circle cx='8' cy='38' r='1.5' fill='%232F5D4F' opacity='0.4'/></svg>");
  --t-pat-travel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><circle cx='12' cy='12' r='8' fill='none' stroke='%232F5D4F' stroke-width='1' stroke-dasharray='2 2' opacity='0.35'/><rect x='36' y='34' width='14' height='10' fill='none' stroke='%23C4423A' stroke-width='1' stroke-dasharray='2 2' opacity='0.35'/><path d='M2 46 L 14 50 M 20 52 L 30 48 M 36 50 L 48 54' stroke='%232F5D4F' stroke-width='1' stroke-dasharray='1 3' opacity='0.4' fill='none'/></svg>");
}

/* ─── Theme cover (front of each book) ─── */
.tcover {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8%; text-align: center; overflow: hidden;
}
.tcover .vol {
  position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 4.5cqw; letter-spacing: 2px;
  text-transform: uppercase; color: var(--t-ink); opacity: 0.6;
}
.tcover .title {
  font-family: var(--serif); font-size: 12cqw; line-height: 1; color: var(--t-ink);
  letter-spacing: -0.5px; margin-bottom: 4%;
}
.tcover .rule { width: 40%; height: 1px; background: var(--t-accent2); opacity: 0.5; margin-bottom: 4%; }
.tcover .sub { font-family: var(--hand); font-size: 10cqw; color: var(--t-accent2); line-height: 1; }
.tcover .brand {
  position: absolute; bottom: 6%; left: 8%;
  font-family: var(--mono); font-size: 4cqw; letter-spacing: 1.5px;
  color: var(--t-ink); opacity: 0.5;
}
.tcover .csticker {
  position: absolute; bottom: 8%; right: 8%; width: 18cqw; height: 18cqw;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.18));
}

/* ─── Theme page (left/right) — generic primitives reused by all 14 layouts ─── */
.tp .photo {
  position: absolute;
  background: #fff;
  padding: 4%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.tp .photo .inner { width: 100%; height: 100%; position: relative; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.08); }
.tp .photo.noframe { background: transparent; padding: 0; box-shadow: 0 3px 7px rgba(0,0,0,0.16); }
.tp .cap { position: absolute; font-family: var(--hand); line-height: 1.1; white-space: nowrap; }
.tp .cap.serif { font-family: var(--serif); }
.tp .cap.mono  { font-family: var(--mono); }
.tp .cap.display { font-family: var(--display); }
.tp .tape {
  position: absolute; opacity: 0.85; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.85), #000 12%, #000 88%, rgba(0,0,0,0.85));
          mask-image: linear-gradient(90deg, rgba(0,0,0,0.85), #000 12%, #000 88%, rgba(0,0,0,0.85));
}
.tp .stk { position: absolute; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.18)); }

/* ─── Pricing card ─── */
.pricing { padding: 0 80px 80px; }
.pricing-card {
  margin: 0 auto;
  background: var(--paper); border: 2px solid var(--red); border-radius: 20px;
  padding: 36px 40px; position: relative;
  box-shadow: 0 24px 40px -16px rgba(196,66,58,0.28);
}
.pricing-card .most-loved {
  position: absolute; top: -18px; left: 32px;
  background: var(--red); color: #fff;
  padding: 7px 18px; border-radius: 999px;
  font-family: var(--hand); font-size: 21px; font-weight: 600;
  box-shadow: 0 6px 12px rgba(196,66,58,0.35);
  display: none; align-items: center; gap: 6px;
}
.pricing-card .most-loved.show { display: inline-flex; }
.pricing-card .most-loved svg { width: 16px; height: 16px; }
.pricing-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start;
}
.pricing-title {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px;
}
.pricing-title h3 { font-family: var(--serif); font-size: 38px; margin: 0; line-height: 1; font-weight: 400; }
.pricing-spec { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.pricing-sub { font-family: var(--hand); font-size: 21px; color: var(--red); margin-bottom: 22px; }
.size-label { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; }
.size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 26px; }
.size-tile {
  position: relative;
  padding: 16px 4px 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid rgba(31,26,20,0.13);
  background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--sans); transition: all .15s;
}
.size-tile[aria-pressed="true"] {
  border: 2px solid var(--red); background: #fff;
  box-shadow: 0 6px 14px rgba(196,66,58,0.18);
  transform: translateY(-2px);
}
.size-tile .pages-n { font-family: var(--serif); font-size: 26px; color: var(--ink); line-height: 1; }
.size-tile[aria-pressed="true"] .pages-n { color: var(--red); }
.size-tile .pages-l { font-size: 10.5px; letter-spacing: 0.5px; color: var(--muted); text-transform: uppercase; }
.size-tile .pics-l  { font-family: var(--hand); font-size: 16px; color: var(--muted); margin-top: 2px; line-height: 1; }
.size-tile[aria-pressed="true"] .pics-l { color: var(--red); }
.size-tile .star {
  position: absolute; top: -9px; right: -4px;
  background: var(--mustard); color: var(--ink);
  padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 800;
}
.feature-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
}
.feature-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.feature-list .check { color: var(--red); font-weight: 700; }

.buy-box {
  background: #fff; border-radius: 14px; padding: 24px;
  border: 1px solid rgba(31,26,20,0.07);
  box-shadow: 0 4px 14px rgba(31,26,20,0.06);
  display: flex; flex-direction: column; gap: 14px;
}
.buy-box .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #8a7a64; }
.price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-now {
  font-family: var(--serif); font-size: 62px; line-height: 0.9; color: var(--red);
}
.price-mrp { text-decoration: line-through; color: #aa9b85; font-size: 15px; }
.save-chip {
  background: var(--mustard); color: var(--ink);
  padding: 3px 10px; border-radius: 4px; font-weight: 700; font-size: 12px; letter-spacing: 0.3px;
  display: inline-block; width: fit-content;
}
.coupon-row {
  padding: 12px 14px; background: var(--cream); border-radius: 10px;
  border: 1.5px dashed rgba(47,93,79,0.4);
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--forest); font-weight: 600;
}
.coupon-row code {
  font-family: var(--mono); letter-spacing: 1px;
  padding: 1px 6px; background: var(--forest); color: #fff;
  border-radius: 3px; margin-inline: 2px;
}
.buy-cta { width: 100%; padding: 17px 0; justify-content: center; font-size: 16px; }
.buy-trust {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: 12px; color: var(--muted); margin-top: 4px; flex-wrap: wrap;
}

/* ─── Themes section (thumbnail strip under the hero book) ─── */
.themes {
  background: var(--paper);
  padding: 20px 16px 12px;
}
.theme-thumb-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 4px 8px;
  margin: 0 auto;
  max-width: 1200px;
}
.theme-thumb-row::-webkit-scrollbar { display: none; }
.theme-thumb {
  flex: 0 0 84px;
  width: 84px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: transform 0.15s ease;
}
.theme-thumb:active { transform: scale(0.95); }
.theme-thumb-cover {
  width: 76px;
  height: 96px;
  margin: 0 auto 6px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.theme-thumb-cover .tp.tcover { width: 100%; height: 100%; }
.theme-thumb.active .theme-thumb-cover {
  border-color: var(--red);
  box-shadow: 0 4px 14px rgba(196, 66, 58, 0.25);
}
.theme-thumb-label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.theme-thumb.active .theme-thumb-label { color: var(--red); }

/* ─── How it works ─── */
.howto { padding: 64px 80px 88px; position: relative; }
.howto-intro { max-width: 820px; margin-bottom: 48px; }
.howto-intro h2 { font-family: var(--serif); font-size: 64px; line-height: 0.96; letter-spacing: -1.4px; margin: 0 0 16px; text-wrap: pretty; }
.howto-intro h2 .script { font-family: var(--hand); color: var(--red); font-size: 80px; font-weight: 700; }
.howto-intro p { font-size: 18px; line-height: 1.55; color: var(--hairline); margin: 0; max-width: 620px; }
.howto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; position: relative; }
.howto-grid::before {
  content: ''; position: absolute; top: 80px; left: 18%; right: 18%; height: 2px;
  background-image: linear-gradient(90deg, var(--ink) 50%, transparent 50%);
  background-size: 12px 2px; opacity: 0.25; z-index: 0;
}
.howto-card {
  position: relative; z-index: 1;
  background: #fff; padding: 32px 26px 28px;
  border-radius: 14px; border: 1px solid rgba(31,26,20,0.06);
  box-shadow: 0 14px 28px -12px rgba(31,26,20,0.16);
}
.howto-n {
  width: 130px; height: 130px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 22px -8px rgba(31,26,20,0.18);
  margin-bottom: 24px; position: relative;
  font-family: var(--serif); font-size: 58px; line-height: 1;
}
.howto-n .stk { position: absolute; top: -10px; right: -16px; width: 50px; height: 50px; transform: rotate(-12deg); filter: drop-shadow(0 3px 4px rgba(0,0,0,0.18)); }
.howto-card.red    .howto-n { border: 3px solid var(--red);    color: var(--red); }
.howto-card.must   .howto-n { border: 3px solid var(--mustard);color: var(--mustard); }
.howto-card.forest .howto-n { border: 3px solid var(--forest); color: var(--forest); }
.howto-card h3 { font-family: var(--serif); font-size: 26px; line-height: 1.1; margin: 0 0 12px; font-weight: 400; }
.howto-card p  { font-size: 15px; line-height: 1.55; color: var(--hairline); margin: 0; }

/* ─── Reviews ─── */
.reviews { padding: 0 80px 88px; }
.reviews-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 48px; }
.reviews-head p { font-size: 17px; line-height: 1.55; color: var(--hairline); margin: 0; max-width: 480px; }
.review-grid { columns: 3; column-gap: 28px; }
.review {
  break-inside: avoid; margin-bottom: 28px;
  background: #fff; padding: 20px; border-radius: 4px; position: relative;
  box-shadow: 0 16px 28px -14px rgba(31,26,20,0.25), 0 2px 6px rgba(31,26,20,0.1);
}
.review.r1 { transform: rotate(-1.2deg); }
.review.r2 { transform: rotate(1.2deg); }
.review.r3 { transform: rotate(-0.7deg); }
.review .photo { width: 100%; aspect-ratio: 5/4; margin-bottom: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
.review .tape {
  position: absolute; left: 50%; top: -10px; width: 110px; height: 22px;
  transform: translateX(-50%) rotate(-6deg);
  background: repeating-linear-gradient(45deg, var(--red) 0 6px, #a93730 6px 12px);
  opacity: 0.85;
}
.review.t-must .tape   { background: repeating-linear-gradient(45deg, var(--mustard) 0 6px, #c4922e 6px 12px); }
.review.t-forest .tape { background: repeating-linear-gradient(45deg, var(--forest) 0 6px, #1f4538 6px 12px); }
.review .stars { display: flex; gap: 4px; margin-bottom: 8px; }
.review .stars svg { width: 13px; height: 13px; }
.review .quote { font-size: 14.5px; line-height: 1.5; color: var(--hairline); margin: 0 0 12px; }
.review .meta { display: flex; justify-content: space-between; align-items: baseline; }
.review .name { font-family: var(--serif); font-size: 17px; }
.review .city { font-family: var(--hand); font-size: 17px; color: #8a7a64; }

/* ─── FAQ ─── */
.faq { padding: 0 80px 88px; }
.faq-grid { display: block; }
.faq h2 { font-family: var(--serif); font-size: 56px; line-height: 1; letter-spacing: -1.2px; margin: 0 0 22px; }
.faq h2 .script { font-family: var(--hand); color: var(--red); font-size: 72px; font-weight: 700; }
.faq-wa {
  padding: 22px 24px; background: var(--ink); color: var(--cream);
  border-radius: 14px;
  box-shadow: 0 14px 28px -12px rgba(31,26,20,0.3);
}
.faq-wa .label { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--mustard); margin-bottom: 6px; }
.faq-wa .num { font-family: var(--serif); font-size: 26px; line-height: 1; margin-bottom: 8px; }
.faq-wa .note { font-size: 14px; color: #cabba0; }
.faq-list { }
.faq-row {
  border-bottom: 1.5px dashed rgba(31,26,20,0.22); padding: 22px 8px; cursor: pointer;
}
.faq-row:first-child { border-top: 1.5px dashed rgba(31,26,20,0.22); }
.faq-row summary {
  list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; cursor: pointer;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row .q { font-family: var(--serif); font-size: 21px; line-height: 1.2; font-weight: 400; }
.faq-row .toggle {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  flex-shrink: 0; transition: all .2s;
}
.faq-row[open] .toggle { background: var(--red); color: #fff; border-color: var(--red); transform: rotate(45deg); }
.faq-row .a { padding: 12px 56px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--hairline); }

/* ─── Final CTA section (sits above shared site footer) ─── */
.scrapbook-cta {
  position: relative; padding: 88px 80px;
  background: var(--ink); color: var(--cream); overflow: hidden;
}
.footer-polaroid { position: absolute; opacity: 0.18; pointer-events: none; }
.footer-polaroid.p1 { top: 30px; left: 60px; transform: rotate(-12deg); }
.footer-polaroid.p2 { top: 70px; right: 90px; transform: rotate(14deg); }
.footer-polaroid.p3 { bottom: 100px; left: 200px; transform: rotate(8deg); }
.footer-polaroid div { width: 120px; aspect-ratio: 1; background: var(--red); padding: 8px; }
.footer-polaroid.p2 div { background: var(--mustard); }
.footer-polaroid.p3 div { background: var(--forest); }

.footer-cta { position: relative; text-align: center; max-width: 780px; margin: 0 auto; }
.footer-cta .kicker-script { font-family: var(--hand); font-size: 28px; color: var(--mustard); margin-bottom: 8px; }
.footer-cta h2 { font-family: var(--serif); font-size: 84px; line-height: 0.95; margin: 0 0 22px; letter-spacing: -1.8px; }
.footer-cta p { font-size: 18px; color: #cabba0; line-height: 1.5; margin: 0 auto 32px; max-width: 540px; }
.footer-cta .btn-primary { padding: 18px 36px; font-size: 18px; box-shadow: 6px 6px 0 var(--mustard); }
.footer-cta .coupon-hint { margin-top: 22px; font-size: 13.5px; color: #9a8b75; }
.footer-cta .coupon-hint b { color: var(--mustard); }

/* ─── Sticky CTA bar (mobile) ─── */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: none;
  background: var(--cream); border-top: 1.5px dashed rgba(31,26,20,0.22);
  padding: 12px 16px; align-items: center; gap: 12px;
  box-shadow: 0 -6px 18px rgba(31,26,20,0.08);
}
.sticky-cta .price { flex: 1; line-height: 1.15; }
.sticky-cta .price .now { font-family: var(--serif); font-size: 22px; color: var(--red); }
.sticky-cta .price .mrp { text-decoration: line-through; color: #aa9b85; font-size: 11px; margin-left: 5px; }
.sticky-cta .price .pg  { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; color: #8a7a64; margin-left: 4px; }
.sticky-cta .price .save { font-family: var(--hand); font-size: 14px; color: var(--forest); display: block; }
.sticky-cta button {
  background: var(--red); color: #fff; border: none;
  padding: 13px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}

/* ─── Responsive — mobile (390 design baseline) ─── */
@media (max-width: 900px) {
  .wrap { padding-inline: 0; }
  .nav { padding: 14px 18px; }
  .nav-links, .nav-right .track { display: none; }
  .nav-right .btn-primary { display: none; }
  .nav-burger { display: flex; }
  .nav-brand { flex-direction: column; }
  .nav-brand .logo { font-size: 22px; }
  .nav-brand .tag { font-size: 14px; }

  .hero { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px 24px; }
  .h1 { font-size: 44px; letter-spacing: -1.1px; }
  .h1 .script { font-size: 52px; }
  .hero-right { padding: 8px 0 64px; }
  .hero-polaroid { display: none; }
  .flipbook { --book-w: 155px; --book-h: 210px; }
  .hero-ctas .btn-ghost { display: none; }

  .pricing { padding: 0 16px 30px; }
  .pricing-card { padding: 22px 18px; border-radius: 14px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 18px; }
  .pricing-title h3 { font-size: 28px; }
  .pricing-sub { font-size: 17px; margin-bottom: 14px; }
  .size-grid { gap: 6px; margin-bottom: 18px; }
  .size-tile { padding: 10px 2px 8px; border-radius: 8px; }
  .size-tile .pages-n { font-size: 18px; }
  .size-tile .pages-l { font-size: 9px; }
  .size-tile .pics-l  { font-size: 13px; }
  .buy-box { padding: 18px; gap: 12px; }
  .price-now { font-size: 46px; }
  .buy-cta { padding: 14px 0; font-size: 15px; }

  .themes { padding: 14px 12px 8px; }
  .theme-thumb-row { gap: 10px; }
  .section-h2 { font-size: 34px; }
  .section-h2 .script { font-size: 52px; }

  .howto { padding: 38px 22px 36px; }
  .howto-intro h2 { font-size: 34px; }
  .howto-intro h2 .script { font-size: 42px; }
  .howto-intro p { font-size: 15px; }
  .howto-grid { grid-template-columns: 1fr; gap: 14px; }
  .howto-grid::before { display: none; }
  .howto-card { padding: 20px 18px; display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: center; border-radius: 12px; }
  .howto-n { width: 60px; height: 60px; font-size: 28px; margin-bottom: 0; }
  .howto-n .stk { display: none; }
  .howto-card h3 { font-size: 18px; margin-bottom: 4px; grid-column: 2; }
  .howto-card p  { font-size: 13px; grid-column: 2; }
  .howto-card .nbox { grid-row: span 2; }

  .reviews { padding: 16px 22px 36px; }
  .reviews-head { grid-template-columns: 1fr; gap: 8px; margin-bottom: 22px; }
  .reviews-head p { font-size: 14px; }
  .review-grid { columns: 1; }
  .review { padding: 14px; margin-bottom: 20px; }
  .review .quote { font-size: 13.5px; }
  .review .name, .review .city { font-size: 15px; }

  .faq { padding: 16px 22px 36px; }
  .faq-grid { grid-template-columns: 1fr; gap: 22px; }
  .faq h2 { font-size: 34px; }
  .faq h2 .script { font-size: 42px; }
  .faq-row .q { font-size: 16px; }
  .faq-row .toggle { width: 28px; height: 28px; font-size: 14px; }
  .faq-row .a { font-size: 13.5px; padding-right: 36px; }

  .scrapbook-cta { padding: 44px 22px 32px; }
  .footer-polaroid { display: none; }
  .footer-cta { text-align: left; max-width: none; }
  .footer-cta h2 { font-size: 40px; letter-spacing: -0.9px; }
  .footer-cta p  { font-size: 14.5px; margin: 0 0 20px; }
  .footer-cta .btn-primary { padding: 15px 26px; font-size: 15px; box-shadow: 5px 5px 0 var(--mustard); }

  .sticky-cta { display: flex; }
  body { padding-bottom: 76px; }
}

/* ─── No-JS fallback: hide flipbook 3D mechanics, show theme cover only ─── */
.no-js .flipbook-page:not(:first-child) { display: none; }
.no-js .face.back { display: none; }