/* Pic-Books design system. Lifted from the original static site
   (Pic-Books.web/css/base.css + home.css + article.css). Brand palette
   + gradients are the load-bearing tokens — colour everything else flows from them. */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --c-red:    #e63329;
  --c-orange: #f47920;
  --c-yellow: #ffd700;
  --c-green:  #3aaa35;
  --c-blue:   #0072bc;
  --c-purple: #5b2d8e;
  --c-pink:   #e2007a;

  --grad-blue-purple:  linear-gradient(135deg, #0072bc, #5b2d8e);
  --grad-red-orange:   linear-gradient(135deg, #e63329, #f47920);
  --grad-orange-red:   linear-gradient(135deg, #f47920, #e63329);
  --grad-red-pink:     linear-gradient(135deg, #e63329, #e2007a);
  --grad-pink-purple:  linear-gradient(135deg, #e2007a, #5b2d8e);
  --grad-green-blue:   linear-gradient(135deg, #3aaa35, #0072bc);
  --grad-purple-pink:  linear-gradient(135deg, #5b2d8e, #e2007a);

  --text:        #222;
  --text-muted:  #555;
  --text-soft:   #888;
  --bg:          #fff;
  --bg-soft:     #f0f4f8;
  --bg-warm:     #f7f5f0;
  --border:      #eee;

  --page-max:   1180px;
  --gutter-x:   clamp(20px, 5vw, 64px);
  --section-y:  clamp(56px, 8vw, 96px);
  --article-max:    980px;
  --article-gutter: clamp(20px, 5vw, 48px);
  /* Blog posts use a narrower measure; hero and body share it so their text lines up */
  --blog-max:       760px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: "Nunito", "Oktah Round", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: var(--c-blue); }

/* Rainbow strip */
.rbar {
  height: 5px;
  background: linear-gradient(90deg, #e63329, #f47920, #ffd700, #3aaa35, #0072bc, #5b2d8e, #e2007a);
}

/* Top nav */
.nav {
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter-x);
  height: 72px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(8px);
}
.nav-logo-link { display: block; flex-shrink: 0; }
.nav-logo { height: 40px; width: auto; cursor: pointer; display: block; }

/* Inline links (desktop). Each link takes a colour from the rainbow strip and
   wears it as an underline, so the nav echoes the bar sitting above it. */
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin: 0;
  padding: 0;
}
.nav-links li:nth-child(1) { --link-c: var(--c-red); }
.nav-links li:nth-child(2) { --link-c: var(--c-orange); }
.nav-links li:nth-child(3) { --link-c: var(--c-green); }
.nav-links li:nth-child(4) { --link-c: var(--c-blue); }
.nav-links li:nth-child(5) { --link-c: var(--c-purple); }
.nav-links li:nth-child(6) { --link-c: var(--c-pink); }

.nav-links a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--link-c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover { color: var(--link-c); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--link-c); }

/* Hamburger toggle */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-bar {
  display: block;
  width: 26px;
  height: 3px;
  margin: 0 auto;
  border-radius: 3px;
  background: var(--text);
  transition: transform .25s ease, opacity .2s ease;
}
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Slide-in menu drawer */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,20,30,0.45);
  opacity: 0;
  z-index: 110;
  transition: opacity .25s ease;
}
body.nav-open .nav-overlay { opacity: 1; }

.nav-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(320px, 82vw);
  background: #fff;
  box-shadow: -8px 0 30px rgba(0,0,0,0.16);
  z-index: 120;
  padding: 88px 22px 32px;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
body.nav-open .nav-menu { transform: translateX(0); }

/* Drawer links: same rainbow logic, worn as a left edge rather than an underline. */
.nav-menu-links { list-style: none; display: flex; flex-direction: column; }
.nav-menu-links li:nth-child(1) { --link-c: var(--c-red); }
.nav-menu-links li:nth-child(2) { --link-c: var(--c-orange); }
.nav-menu-links li:nth-child(3) { --link-c: var(--c-green); }
.nav-menu-links li:nth-child(4) { --link-c: var(--c-blue); }
.nav-menu-links li:nth-child(5) { --link-c: var(--c-purple); }
.nav-menu-links li:nth-child(6) { --link-c: var(--c-pink); }
.nav-menu-links li + li { border-top: 1px solid var(--border); }

.nav-menu-links a {
  display: block;
  padding: 15px 14px;
  border-left: 3px solid transparent;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, padding-left .18s ease;
}
.nav-menu-links a:hover,
.nav-menu-links a.active {
  color: var(--link-c);
  border-left-color: var(--link-c);
  padding-left: 18px;
}

/* Desktop: inline links only. Mobile: hamburger + drawer only. */
@media (min-width: 881px) {
  .nav-toggle, .nav-overlay, .nav-menu { display: none; }
}
@media (max-width: 880px) {
  .nav-links { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bar, .nav-overlay, .nav-menu { transition: none; }
}

.nav-btn {
  background: var(--grad-blue-purple);
  color: #fff;
  border: none;
  padding: 11px 22px;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 18px rgba(0,114,188,0.24);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nav-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,114,188,0.32); }

/* Buttons (shared) */
.btn-p {
  background: var(--grad-blue-purple);
  color: #fff;
  border: none;
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 8px 22px rgba(0,114,188,0.28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,114,188,0.34); }
.btn-s {
  background: #fff;
  color: var(--text);
  border: 2px solid #ddd;
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
}
.btn-s:hover { border-color: #bbb; }

/* Sections rhythm */
section, .conv, .cta {
  padding: var(--section-y) var(--gutter-x);
}
.conv h2, .steps h2, .pricing-simple h2, .reviews h2, .cta h2,
.ideas-title, .gift-title {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #111;
  text-align: center;
  margin-bottom: 14px;
}

/* HERO */
.hero {
  /* The product shot (hero-book.jpg) has an off-white paper background baked in
     — it has no alpha. --hero-paper is sampled from that image's border, so the
     shot dissolves into the section instead of reading as a pasted rectangle.
     If the image is ever re-exported on a different backdrop, resample and
     change this one value. */
  --hero-paper: #efefee;
  /* The trust strip cancels this exact value with a negative bottom margin so the
     pink band hugs the hero's bottom edge — keep them tied to one variable. */
  --hero-pad-b: clamp(24px, 3vw, 36px);
  background: var(--hero-paper);
  padding: clamp(10px, 1.1vw, 18px) var(--gutter-x) var(--hero-pad-b);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* NOT centred. The shot is much taller than the text block, and centring pushes the
     text down by half the difference — a difference that GROWS with width (the shot
     scales up while the copy reflows onto fewer lines), so the logo visibly creeps
     downwards the wider the window gets. Anchoring both columns to the top keeps the
     logo put; .hero-right re-centres the shot against the text on its own. */
  align-items: start;
  gap: clamp(32px, 4vw, 56px);
  /* Deliberately WIDER than --page-max (which the rest of the page uses). The hero
     is a near-full-bleed composition: boxed into 1180px, each column is under 560px,
     which is too narrow for the product shot to carry any weight and leaves the logo
     looking oversized beside it. Wider than --page-max, but not so wide that the two
     columns drift apart into separate islands. */
  max-width: 1460px;
  margin: 0 auto;
  position: relative;
  z-index: 2;                          /* content above scattered decorations */
}
/* On wide screens the text block is narrower than its half of the grid, and the
   leftover would otherwise pool in the MIDDLE, pushing the copy away from the shot.
   margin-left:auto parks the block against the inner edge of its column, so the slack
   moves to the outside — a generous left margin and a tight centre gap, which is how
   the concept is set. Below ~1200px the column is narrower than 640px, the block fills
   it, and this has no effect. */
.hero-left {
  /* Narrower than the column on purpose. The block is pushed to the column's inner edge
     by margin-left:auto, so the SMALLER this cap, the further right the copy sits and the
     tighter the centre gap. The copy never filled 640px, so trimming it costs nothing. */
  max-width: 580px;
  margin-left: auto;
  padding-top: clamp(0px, 1.6vw, 26px);  /* small, FIXED nudge off the top — unlike centring, it doesn't grow with width */
}
.hero-logo {
  width: 100%;
  max-width: 320px;                    /* ~18% of the composition, as in the concept */
  height: auto;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 20px;
  display: block;
}
.hero-img-mobile { display: none; }
/* Two-tone headline: the plain-black lead-in sets up the pink product promise,
   which carries the size and the weight. */
.hero h1 {
  font-size: clamp(1.85rem, 2.6vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 26px;
  margin-top: 0;
  color: #1a1a1a;
}
.hero-h1-accent {
  display: block;
  color: var(--c-pink);
  font-weight: 900;
  font-size: 1.4em;                    /* relative to the h1, so it scales with it */
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin-top: 2px;
  text-wrap: balance;                  /* breaks as Personalised / Colouring Books, not an orphaned "Books" */
}
.hero p {
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 100%;                     /* the .hero-left cap already sets the measure */
  margin-bottom: 34px;
}
.hero-right { position: relative; }
.hero-img {
  display: block;
  width: 100%;
  /* This cap is what sets the hero's height: the shot is portrait (5:4 tall), so every
     100px of width costs 125px of hero. 500px is what keeps the trust strip above the
     fold on a laptop — it is the single biggest lever on this section's height, so
     raise it only if you're willing to push the strip off the first screen. The 80%
     keeps a slice of the column free on its right, which is where the price badge lives. */
  max-width: min(470px, 80%);
  /* Rides up past the hero's top padding. The artwork carries ~4% blank margin at the
     top (≈25px at this size), so this eats backdrop, not product — and .hero clips
     anything that overshoots. It also shortens the section, which is what lifts the
     trust strip into view. Don't push much past 40px or it starts biting the book. */
  margin: calc(-1 * clamp(0px, 2.4vw, 40px)) auto 0 0;
  /* The shot is a styled composite (its own shadows and paper texture are baked
     in), so it wants no frame of ours. Feathering the four edges dissolves the baked-in
     backdrop — and the vignette darkening its corners — into --hero-paper. The blank
     margin around the artwork is only 3-4% (measured; the bottom edge is tightest), so
     3% is the ceiling: past that the feather starts fading the outermost sparkles. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 3%, #000 97%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0, #000 3%, #000 97%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;   /* Safari's older keyword for `intersect` */
  mask-composite: intersect;
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Pricing badge — tilted sticker in the gap to the right of the book, level with
   the cover (as in the concept) rather than overlapping the artwork. It's allowed
   to hang past the grid column into the page gutter; .hero's overflow:hidden is
   what stops it running off the page on narrow screens. */
.hero-badge {
  position: absolute;
  width: clamp(115px, 13vw, 250px);    /* tracks the shot, so the gap beside the book stays filled */
  right: -20px;
  top: 34%;                            /* level with the lower half of the cover, as in the concept */
  transform: rotate(6deg);
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

/* Tablet / small laptop. On an even 50/50 split the copy column lands at ~420px here,
   and the two CTAs need ~427px side by side — so they miss by a hair and the row wraps
   into a stack, even though the section has plenty of room. Handing the copy a little
   more of the grid (and trimming the gutter between the columns) keeps them on one line;
   the shot has the width to spare at these sizes. */
@media (min-width: 721px) and (max-width: 1180px) {
  .hero-inner { grid-template-columns: 1.12fr 0.88fr; gap: 28px; }

  /* The copy column needs ~440px here or the CTAs wrap, which leaves the shot a narrow
     column — and the default 80% cap (reserving a strip for the badge) then shrinks it
     again, down to ~278px. Two fixes, since the space has to come from somewhere:
     pull in the hero's gutters, and let the shot use nearly its whole column. The badge
     rides further over the book's right border as a result, which reads fine — it's a
     sticker on the artwork rather than floating beside it — and it shrinks a little to
     keep that overlap off the cover art. */
  .hero { --gutter-x: clamp(24px, 3vw, 36px); }
  .hero-img { max-width: min(470px, 94%); }
  .hero-badge { width: clamp(105px, 11vw, 130px); right: -12px; }
}

/* Narrow two-column band (small tablets / landscape phones), just above the mobile
   stack. Two tweaks for this range only:
   1) The copy column is short enough that the shot, top-aligned in a taller row,
      leaves a pool of empty backdrop beneath it — centring the shot column drops it
      down to sit against the copy and fills that gap.
   2) The two CTAs miss a single line by ~12px here, so the row wraps into a stack.
      Trimming their side padding and the gap buys back that width so they stay on one
      line; flex-wrap is kept, so if the window is narrower still they degrade to a
      stack rather than overflowing. */
@media (min-width: 721px) and (max-width: 860px) {
  .hero-right { align-self: center; }
  /* Hand the copy a little more of the grid and pull the centre gap in, so the CTA row
     has the ~415px it needs on one line — without shrinking the shot noticeably. */
  .hero-inner { grid-template-columns: 1.18fr 0.82fr; gap: 22px; }
  .hero-btns { gap: 10px; }
  .hero-btns .btn-p,
  .hero-btns .btn-s { padding-left: 20px; padding-right: 20px; }
}

/* Mobile photo wrapper — exists so the mobile badge can sit absolutely
   on top of the mobile photo (same sticker pattern as desktop). */
.hero-mobile-photo { display: none; }
.hero-badge-mobile { display: none; }

@media (max-width: 720px) {
  .hero { padding-top: clamp(16px, 4vw, 26px); }
  .hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .hero-right { display: none; }

  /* Stack as headline → shot → copy → CTAs. The source order puts the shot first (it
     sits above the headline in the markup), which reads oddly once the logo is hidden,
     so the column is flexed and re-ordered here rather than duplicating the markup. */
  .hero-left {
    max-width: 100%;
    text-align: center;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }
  /* Headline sits above the shot: the photo wrapper is positioned (so it paints
     over static content), and it's pulled up tight under the title — this keeps
     the text on top where they overlap. */
  .hero-left h1          { order: 1; position: relative; z-index: 2; }
  .hero-left .hero-mobile-photo { order: 2; }
  .hero-left p           { order: 3; }
  .hero-left .hero-btns  { order: 4; }

  /* The nav wordmark carries the brand on mobile, so it's sized up to feel
     confident; the hero then leads with the photo + headline rather than
     repeating the logo a second time (avoids the stacked-wordmark look). */
  .nav-logo { height: 52px; }
  .hero-logo { display: none; }

  /* Mobile product shot + badge sticker. The shot is portrait, so it's capped
     well below the column width — left to fill the screen it would push the
     headline and the CTAs clean off the fold. */
  .hero-mobile-photo {
    display: block;
    position: relative;
    /* Pulled up tight under the headline. The artwork carries its own blank top
       margin (~3-4%) and the edge is feathered, so this negative margin eats that
       whitespace rather than the product — keeping the shot compact to the title. */
    margin: -38px auto 16px;
    max-width: 340px;
  }
  .hero-img-mobile {
    display: block;
    width: 100%;
    margin: 0;
    /* same edge feather as the desktop shot — see .hero-img */
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0, #000 3%, #000 97%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
    mask-image:
      linear-gradient(to right,  transparent 0, #000 3%, #000 97%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  /* Sized in % of the shot (not fixed px) so the badge holds the same spot at
     every screen width. It sits bottom-LEFT: on this artwork that corner is bare
     paper, whereas the right-hand side is where the open colouring book lands. */
  .hero-badge-mobile {
    display: block;
    position: absolute;
    width: 50%;
    left: -6%;
    bottom: -4%;                       /* hangs just below the shot, into the gap above the copy */
    transform: rotate(-6deg);
    z-index: 3;
  }

  /* Tighten heading/paragraph rhythm on mobile. The headline now leads the hero
     (no logo above it), so it's sized up to land as the first big statement. */
  .hero h1 { font-size: clamp(1.7rem, 5.6vw, 2.05rem); margin-top: 6px; margin-bottom: 18px; }
  .hero p  { margin: 0 auto 24px; }

  /* Single clear action: primary CTA full-width, secondary a quieter full-width
     outline below it — stacked reads more deliberate than two shrink-wrapped
     pills sharing a row. */
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 360px;
    margin: 0 auto;
  }
  .hero-btns .btn-p { width: 100%; }
  .hero-btns .btn-s { width: 100%; border-width: 1px; color: var(--text-muted); }
}

/* Scattered decorations around the hero — same pattern as .steps-deco-* */
.hero-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.hero-deco-heart-tl    { top: 26px;   left: 28px;   width: 42px; transform: rotate(-12deg); }
.hero-deco-arrow-tl    { top: 78px;   left: 18px;   width: 84px; transform: rotate(-6deg); }
.hero-deco-star-tr     { top: 30px;   right: 38px;  width: 44px; transform: rotate(14deg); }
.hero-deco-stroke-tr   { top: 84px;   right: 90px;  width: 36px; transform: rotate(-14deg); }

/* Both crayon clusters sit on the trust strip's TOP edge (they're children of
   .hero-trust). Anchoring to the strip means they ride up with the band when it
   wraps to a taller height, instead of a fixed bottom offset swallowing them. */
.hero-trust-crayons {
  position: absolute;
  bottom: 100%;                       /* bottoms rest on the strip's top edge */
  pointer-events: none;
  user-select: none;
  /* shadow casts down onto the band so they read as standing on it, not hanging over */
  filter: drop-shadow(0 5px 9px rgba(20, 12, 40, 0.30));
}
/* The two clusters sit on DIFFERENT layers, which is why .hero-trust deliberately has no
   z-index of its own — a stacking context there would trap both children behind the hero
   content (z-index 2) and the fan would disappear under the product shot.
   Fan: above the shot, so it overlaps the artwork and reads as sitting in front of it.
   Trio: below the hero content, so it tucks BEHIND the CTAs rather than over them. */
.hero-trust-crayons--right { right: 8px; width: clamp(165px, 20vw, 240px); z-index: 3; }
/* One smooth width across all widths (no breakpoint override) so the trio never
   jumps in size — it holds ~118px on phones/tablets and eases up to 145px on wide. */
.hero-trust-crayons--left  { left: 8px;  width: clamp(118px, 12vw, 145px); z-index: 1; }

/* Below 800px the photo (hero-right) is hidden — hide the right-hand fan with it.
   The left trio stays as a small splash of colour anchored to the band. */
@media (max-width: 720px) {
  .hero-trust-crayons--right { display: none; }
}

/* Tablet — drop the busiest top pieces */
@media (max-width: 960px) {
  .hero-deco-arrow-tl,
  .hero-deco-stroke-tr { display: none; }
}
/* Mobile — hide the loose scatter (the left trio keeps its smooth width from above). */
@media (max-width: 640px) {
  .hero-deco { display: none; }
}

/* Trust / process strip pinned to the hero's bottom edge. Full-bleeds out of the
   hero gutter (negative x-margins) and cancels the hero's bottom padding so the
   pink band hugs the very bottom of the section, like the ad example. */
.hero-trust {
  position: relative;
  /* NO z-index on purpose. Setting one here creates a stacking context that traps the
     crayon children inside it, forcing both onto the same layer relative to the hero
     content. They need different layers (see .hero-trust-crayons--left/--right), so the
     layering is set on the children instead. */
  margin: clamp(6px, 0.9vw, 14px) calc(-1 * var(--gutter-x)) calc(-1 * var(--hero-pad-b));
  padding: 15px var(--gutter-x);
  background: linear-gradient(90deg, #e2007a 0%, #c4178a 100%);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 22px);
  box-shadow: 0 -6px 18px rgba(20, 12, 40, 0.08);
}
.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
  line-height: 1.2;
}
.hero-trust-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.hero-trust-ico svg { width: 18px; height: 18px; color: #fff; }
.hero-trust-arrow { display: inline-flex; color: rgba(255, 255, 255, 0.8); }
.hero-trust-arrow svg { width: 20px; height: 20px; }

@media (max-width: 880px) {
  /* Even 2x2 grid instead of ragged centred wrapping — the four steps line up
     in two tidy columns so the strip reads as a deliberate panel. This covers the
     whole narrow band (the two-column hero now runs down to 720px) so the strip
     never does the ragged 3-then-1 flex wrap it fell into around 800-840px. */
  .hero-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    padding: 18px clamp(20px, 6vw, 32px);
    /* The clamp above bottoms out at 6px on a phone, which crowds the strip against
       the CTAs — give it more breathing room here. Only margin-top is overridden so
       the negative side/bottom margins (band flush to the hero edges) stay intact. */
    margin-top: 22px;
  }
  .hero-trust-arrow { display: none; }
  .hero-trust-item { font-size: 0.84rem; gap: 9px; }
  .hero-trust-ico { width: 30px; height: 30px; }
  .hero-trust-ico svg { width: 16px; height: 16px; }
}

/* IDEAS — polaroid-style frames pinned to a scrapbook */
.ideas { background: #fff; position: relative; overflow: hidden; }
.ideas-title, .ideas-grid, .ideas-cta-wrap { position: relative; z-index: 2; }
.ideas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 x 2 on desktop so the images read large */
  gap: 40px 48px;
  max-width: 860px;
  margin: 16px auto 0;
  padding: 32px 0 16px;        /* room for the tape to stick above the row */
}
@media (max-width: 900px) { .ideas-grid { gap: 32px; } }
@media (max-width: 600px) {
  .ideas-grid { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .idea-card { width: 100%; max-width: 340px; }
}

/* Polaroid frame: white card, image inset, caption at the bottom */
.idea-card {
  background: #fff;
  padding: 12px 12px 0 12px;
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(15, 30, 60, 0.12);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: box-shadow .2s ease;
}
.idea-card:hover { box-shadow: 0 14px 32px rgba(15, 30, 60, 0.18); }

/* Casual per-card tilts so the row reads pinned-up, not gridded */
.idea-card:nth-child(1) { transform: rotate(-2deg);   }
.idea-card:nth-child(2) { transform: rotate(1.4deg);  }
.idea-card:nth-child(3) { transform: rotate(-1.2deg); }
.idea-card:nth-child(4) { transform: rotate(2.2deg);  }

.idea-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: none;
  display: block;
}
/* Compare slider sits square inside the polaroid frame, like the old static img */
.idea-card .compare {
  aspect-ratio: 1;
  border-radius: 2px;
}
/* Hide the photo/colouring-page badges on the small polaroids — too cluttered here */
.idea-card .compare-label { display: none; }
.idea-label {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 12px 0 18px;
  text-align: center;
  line-height: 1.3;
}

/* Tape across the top of each polaroid — anchored at the top-centre of
   each card. Per-card translateX shifts it slightly off-centre + slight
   rotation, so it reads casually pinned rather than mechanically placed. */
.idea-tape {
  position: absolute;
  width: 84px;
  height: auto;
  pointer-events: none;
  z-index: 3;
  top: -14px;
  left: 50%;
}
.idea-card:nth-child(1) .idea-tape { transform: translateX(-58%) rotate(-10deg); }
.idea-card:nth-child(2) .idea-tape { transform: translateX(-46%) rotate(8deg);   }
.idea-card:nth-child(3) .idea-tape { transform: translateX(-54%) rotate(-4deg);  }
.idea-card:nth-child(4) .idea-tape { transform: translateX(-42%) rotate(12deg);  }

/* Floating section decorations */
.ideas-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.ideas-deco-heart-tl { top: 70px;     left:  28px; width: 50px; transform: rotate(-14deg); }
.ideas-deco-star-tr  { top: 64px;     right: 32px; width: 50px; transform: rotate(12deg);  }
.ideas-deco-sq-bl    { bottom: 100px; left:  24px; width: 88px; transform: rotate(-6deg); opacity: .85; }
.ideas-deco-star-br  { bottom: 100px; right: 28px; width: 46px; transform: rotate(-10deg); }

@media (max-width: 960px) {
  .ideas-deco-sq-bl { display: none; }
  .ideas-deco-heart-tl, .ideas-deco-star-tr, .ideas-deco-star-br { width: 38px; }
}
@media (max-width: 700px) {
  .ideas-deco { display: none; }
  .idea-tape  { width: 68px; }
}
.btn-ideas {
  background: var(--grad-orange-red);
  color: #fff;
  border: none;
  padding: 16px 40px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(244,121,32,0.35);
  font-family: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
  display: inline-block;
}
.btn-ideas:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(244,121,32,0.42); }
.ideas-cta-wrap { text-align: center; margin-top: 56px; }

/* STEPS */
.steps { background: var(--bg-soft); }
.sg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: var(--page-max);
  margin: 0 auto;
}
@media (max-width: 900px) { .sg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .sg { grid-template-columns: 1fr; } }
.step {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(15, 30, 60, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15, 30, 60, 0.10); }
.sn {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff;
  margin: 0 auto 16px;
  font-size: 1.1rem;
}
.step h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; color: #111; }
.step p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }

/* SIMPLE PRICING (single tier) */
.pricing-simple {
  background: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pricing-simple > h2,
.pricing-simple > .price-callout,
.pricing-simple > .price-sub,
.pricing-simple > .pricing-features,
.pricing-simple > .pricing-cta-wrap { position: relative; z-index: 2; }
.pricing-cta-wrap { text-align: center; margin-top: 28px; }

/* Price callout — big bold number flanked by hand-drawn sparkles */
.price-callout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 14px auto 16px;
  position: relative;
}
.price-callout .price-num {
  font-size: clamp(3.5rem, 8vw, 5.4rem);
  font-weight: 900;
  color: var(--c-blue);
  letter-spacing: -0.03em;
  line-height: 1;
  display: inline-block;
  transform: rotate(-1.5deg);
}
/* Small "from" prefix — sits high beside the big number, tilted, in brand orange */
.price-callout .price-from {
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  font-weight: 800;
  color: var(--c-orange);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  transform: rotate(-6deg);
  align-self: flex-start;
  margin-top: 14px;          /* drop it slightly so the baseline aligns near the £ */
  margin-right: -8px;        /* tuck it close to the number */
}
.price-spark {
  width: 58px;
  height: auto;
  pointer-events: none;
  opacity: .9;
}
.price-spark-l { transform: rotate(180deg); }   /* fan points toward the number */

.price-sub {
  color: var(--text-muted);
  font-size: 1.04rem;
  max-width: 540px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

/* Features list — pill chips on warm cream, rainbow tick bullets */
.pricing-features {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: .94rem;
  font-weight: 700;
  color: #1a1a1a;
  list-style: none;
  padding: 0;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fffaee;
  padding: 7px 16px 7px 10px;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
/* Rainbow checks as an inline-SVG mask painted with the brand colour — no
   per-colour image file, so nothing to cache-bust (see .tip-card note). */
.pricing-features li::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pricing-features li:nth-child(1)::before { color: var(--c-pink);   }
.pricing-features li:nth-child(2)::before { color: var(--c-orange); }
.pricing-features li:nth-child(3)::before { color: var(--c-yellow); }
.pricing-features li:nth-child(4)::before { color: var(--c-green);  }
.pricing-features li:nth-child(5)::before { color: var(--c-blue);   }

/* Floating section decorations */
.pricing-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.pricing-deco-heart-tl { top: 76px;    left: 6%;  width: 48px; transform: rotate(-12deg); }
.pricing-deco-star-tr  { top: 72px;    right: 7%; width: 48px; transform: rotate(14deg); }
.pricing-deco-sq-bl    { bottom: 70px; left: 6%;  width: 84px; transform: rotate(-6deg); opacity: .85; }
.pricing-deco-star-br  { bottom: 78px; right: 7%; width: 42px; transform: rotate(-10deg); }
@media (max-width: 960px) {
  .pricing-deco-sq-bl { display: none; }
  .pricing-deco-heart-tl, .pricing-deco-star-tr, .pricing-deco-star-br { width: 34px; }
}
@media (max-width: 700px) {
  .pricing-deco { display: none; }
  .price-spark { width: 44px; }
  .pricing-features { gap: 10px; }
  .pricing-features li { font-size: .9rem; padding: 6px 14px 6px 8px; }
}

/* GIFT */
.gift { background: var(--bg-warm); position: relative; overflow: hidden; }
.gift-title { position: relative; z-index: 2; }
.gift-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1000px;
  margin: 32px auto 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 700px) { .gift-grid { grid-template-columns: 1fr; gap: 20px; } }
.gift-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 28px;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  position: relative;
  transition: transform .15s ease;
}
.gift-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09); }
.gift-card:hover { transform: translateY(-3px); }
.gift-card h3 {
  font-size: 1.2rem;
  font-weight: 900;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gift-card h3::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background: center/contain no-repeat;
  flex-shrink: 0;
}
.gift-card p { font-size: 0.94rem; color: var(--text-muted); line-height: 1.7; }

/* Per-card brand colour rotation — heading colour + heart icon only; borders
   dropped because the crisp solid stroke clashed with the hand-drawn tape.
   Each card also gets a tiny random tilt so the row reads as messily pinned. */
.gift-card.gc-birthday  { transform: rotate(-1.2deg); }
.gift-card.gc-birthday  h3 { color: var(--c-pink); }
.gift-card.gc-birthday  h3::before { background-image: url("/img/brand/heart-pink.png"); }

.gift-card.gc-wedding   { transform: rotate(1.6deg); }
.gift-card.gc-wedding   h3 { color: var(--c-purple); }
.gift-card.gc-wedding   h3::before { background-image: url("/img/brand/heart-purple.png"); }

.gift-card.gc-holiday   { transform: rotate(1deg); }
.gift-card.gc-holiday   h3 { color: var(--c-orange); }
.gift-card.gc-holiday   h3::before { background-image: url("/img/brand/heart-orange.png"); }

.gift-card.gc-seasonal  { transform: rotate(-1.8deg); }
.gift-card.gc-seasonal  h3 { color: var(--c-green); }
.gift-card.gc-seasonal  h3::before { background-image: url("/img/brand/heart-green.png"); }

/* Per-card sticky tape — tape's CENTRE sits on the card's outer corner,
   with the card edge cutting across the tape's middle (matches the kit
   mockup). Horizontal source PNGs + pure CSS rotation = deterministic.
   Rotation direction is picked so the "inside-card" half of the tape
   points into the card interior, not back out across the edge. */
.gift-tape {
  position: absolute;
  width: 82px;
  height: auto;
  pointer-events: none;
  z-index: 3;
}
.gc-birthday .gift-tape { top:    -13px; left:  -40px; transform: rotate(24deg);  }  /* top-left card → TL corner, shallow */
.gc-wedding  .gift-tape { top:    -13px; right: -40px; transform: rotate(-38deg); }  /* top-right card → TR corner, steep */
.gc-holiday  .gift-tape { bottom: -13px; left:  -40px; transform: rotate(-36deg); }  /* bottom-left card → BL corner, steep */
.gc-seasonal .gift-tape { bottom: -13px; right: -40px; transform: rotate(22deg);  }  /* bottom-right card → BR corner, shallow */

/* Stroke flourish — INSIDE the card, diagonally opposite the tape so each
   card has weight on both diagonals. Avoids the inter-row gap where two
   strokes were previously colliding. */
.gift-stroke {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: .9;
  width: 42px;
}
.gc-birthday .gift-stroke { bottom: 18px; right: 22px; transform: rotate(15deg);   }
.gc-wedding  .gift-stroke { bottom: 18px; right: 22px; transform: rotate(-15deg);  }
.gc-holiday  .gift-stroke { top:    14px; right: 18px; transform: rotate(-20deg);  }
.gc-seasonal .gift-stroke { top:    14px; right: 18px; transform: rotate(25deg);   }

/* Floating section decorations (desktop only) — sized up so they read */
.gift-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.gift-deco-heart-tl    { top: 28px;    left: 32px;  width: 60px; transform: rotate(-12deg); }
.gift-deco-star-tr     { top: 24px;    right: 36px; width: 56px; transform: rotate(12deg); }
.gift-deco-squiggle-tl { top: 110px;   left: 18px;  width: 90px; transform: rotate(-6deg); opacity: .85; }
.gift-deco-arrow-tr    { top: 110px;   right: 32px; width: 78px; transform: rotate(8deg); opacity: .9; }
.gift-deco-heart-bl    { bottom: 70px; left: 36px;  width: 50px; transform: rotate(8deg); }
.gift-deco-star-br     { bottom: 60px; right: 32px; width: 56px; transform: rotate(-10deg); }
.gift-deco-squiggle-br { bottom: 130px; right: 18px; width: 82px; transform: rotate(8deg); opacity: .85; }

@media (max-width: 960px) {
  .gift-deco-squiggle-tl, .gift-deco-arrow-tr,
  .gift-deco-squiggle-br { display: none; }
  .gift-deco-heart-tl, .gift-deco-star-tr,
  .gift-deco-heart-bl, .gift-deco-star-br { width: 40px; }
}
@media (max-width: 700px) {
  .gift-deco { display: none; }
  .gift-tape { width: 72px; }
  .gift-stroke { width: 38px !important; }
}

/* CTA — soft pink closer with hand-drawn accents. Pale pink (not warm cream)
   so it sits visually distinct from the gift section's --bg-warm grey-cream
   immediately above. */
.cta {
  background: linear-gradient(180deg, #fde8ee 0%, #fff3d6 100%);
  text-align: center;
  color: #1a1a1a;
  position: relative;
  overflow: hidden;
}
.cta-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  z-index: 2;
}
.cta h2 { color: #111; margin-bottom: 14px; }
.cta p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 0 auto 28px;
  line-height: 1.7;
  max-width: 620px;
}
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }

/* Decorative scatter — same approach as .steps-deco-* in the steps section */
.cta-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.cta-deco-heart-tl    { top: 14%;  left: 6%;   width: 56px; transform: rotate(-12deg); }
.cta-deco-star-tr     { top: 18%;  right: 8%;  width: 52px; transform: rotate(14deg); }
.cta-deco-squiggle-bl { bottom: 12%; left: 9%;  width: 110px; transform: rotate(-6deg); opacity: .85; }
.cta-deco-heart-br    { bottom: 16%; right: 7%; width: 50px; transform: rotate(10deg); }
.cta-deco-star-bl     { bottom: 34%; left: 4%;  width: 38px; transform: rotate(-8deg); }
.cta-deco-stroke-tr   { top: 6%;   right: 18%; width: 88px; transform: rotate(8deg); opacity: .9; }

@media (max-width: 720px) {
  .cta-deco-squiggle-bl, .cta-deco-stroke-tr { display: none; }
  .cta-deco-heart-tl, .cta-deco-star-tr, .cta-deco-heart-br, .cta-deco-star-bl { width: 36px; }
}
.btn-wh, .btn-ou {
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  transition: transform .18s ease;
  text-decoration: none;
  display: inline-block;
}
.btn-wh { background: #fff; color: var(--c-purple); border: none; }
.btn-wh:hover { transform: translateY(-2px); }
.btn-ou {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
}
.btn-ou:hover { border-color: #fff; }

/* Footer */
.footer {
  padding: 72px var(--gutter-x) 0;
  background: #fff;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 56px;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.footer-logo { height: 40px; width: auto; margin-bottom: 14px; display: block; }
.footer-brand-desc { font-size: .9rem; color: var(--text-muted); line-height: 1.75; margin-top: 4px; max-width: 280px; }
.footer-col-head {
  font-size: .82rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 11px; }
.footer-links li a {
  font-size: .9rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s;
}
.footer-links li a:hover { color: var(--c-blue); }
.footer-bar {
  border-top: 1px solid var(--border);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--page-max);
  margin: 0 auto;
}
.footer-bar p { font-size: .82rem; color: #999; }

/* ─────────────────────────────────────────────────────────────────────
   PAGE HERO — playful intro for content pages that match the home style
   (currently used by /how-it-works; reusable for other salesy pages).
   ───────────────────────────────────────────────────────────────────── */
.page-hero {
  background: #fff;
  padding: clamp(64px, 7vw, 96px) var(--gutter-x) clamp(48px, 5vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #111;
  margin-bottom: 18px;
}
.page-hero-lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto 28px;
}
.page-hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.page-hero-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.ph-deco-heart-tl    { top: 38px;   left:  7%;  width: 50px; transform: rotate(-12deg); }
.ph-deco-star-tr-y   { top: 48px;   right: 8%;  width: 48px; transform: rotate(14deg); }
.ph-deco-star-tl-p   { top: 110px;  left: 14%;  width: 32px; transform: rotate(20deg); }
.ph-deco-sq-bl       { bottom: 64px; left: 7%;  width: 86px; transform: rotate(-6deg); opacity: .85; }
.ph-deco-arrow-br    { bottom: 56px; right: 8%; width: 78px; transform: rotate(8deg); opacity: .9; }
.ph-deco-heart-tr    { top: 130px;  right: 14%; width: 36px; transform: rotate(8deg); }
@media (max-width: 900px) {
  .ph-deco-star-tl-p, .ph-deco-heart-tr, .ph-deco-sq-bl, .ph-deco-arrow-br { display: none; }
  .ph-deco-heart-tl, .ph-deco-star-tr-y { width: 34px; }
}
@media (max-width: 600px) {
  /* Hide the secondary deco but keep the heart + star, tucked more central. */
  .ph-deco-star-tl-p, .ph-deco-heart-tr, .ph-deco-sq-bl, .ph-deco-arrow-br { display: none; }
  .ph-deco-heart-tl  { top: 30px; left: 8%;  width: 30px; }
  .ph-deco-star-tr-y { top: 38px; right: 8%; width: 30px; }
}

/* Our Story drops the bottom divider, so its two bottom decorations stay on
   instead — kept visible at every width (they're hidden elsewhere below 900px). */
.page-hero--keep-deco .ph-deco-sq-bl,
.page-hero--keep-deco .ph-deco-arrow-br { display: block; }
@media (max-width: 600px) {
  /* Tuck them into the very bottom corners so they frame, not crowd, the lede. */
  .page-hero--keep-deco .ph-deco-sq-bl    { bottom: 18px; left: 5%;  width: 58px; }
  .page-hero--keep-deco .ph-deco-arrow-br { bottom: 22px; right: 6%; width: 52px; }
}

/* Crayons resting on the hero's bottom edge (just above the brand divider). */
.page-hero-crayons {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  filter: drop-shadow(0 5px 9px rgba(20, 12, 40, 0.22));
}
.ph-crayons-left  { left: 2%;  width: clamp(150px, 18vw, 230px); }
.ph-crayons-right { right: 3%; width: clamp(120px, 13vw, 168px); }
@media (max-width: 600px) {
  .ph-crayons-left  { display: none; }
  .ph-crayons-right { width: 104px; right: -6px; }
}

/* ─────────────────────────────────────────────────────────────────────
   SHARED SECTION TYPOGRAPHY — used by deep-dive content sections
   (process, ba-gallery, photo-tips, product-spec, privacy).
   ───────────────────────────────────────────────────────────────────── */
.section-title {
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #111;
  text-align: center;
  margin-bottom: 12px;
}
.section-lede {
  font-size: 1.05rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 580px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────
   SPLIT ROW — alternating text + visual layout for deep-dive sections
   (used by the Process steps and the Product Spec breakdown).
   ───────────────────────────────────────────────────────────────────── */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  max-width: 1080px;
  margin: 56px auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 800px) {
  .split-row { grid-template-columns: 1fr; gap: 28px; margin: 36px auto; }
}
.split-row--reverse .split-text   { order: 2; }
.split-row--reverse .split-visual { order: 1; }
@media (max-width: 800px) {
  .split-row--reverse .split-text   { order: 1; }
  .split-row--reverse .split-visual { order: 2; }
}
.split-step-label {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-blue);
  margin-bottom: 10px;
}
.split-text h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #111;
  margin-bottom: 14px;
  line-height: 1.15;
}
.split-text p {
  font-size: 1rem;
  color: #3a3a3a;
  line-height: 1.75;
  margin-bottom: 14px;
}
.split-text ul.brand-list { margin-top: 18px; }

/* ─────────────────────────────────────────────────────────────────────
   OUR STORY — reuses the shared hero / section-title / split-row / tip
   vocabulary; these wrappers just set the alternating section backgrounds
   so the story reads as distinct bands rather than one flat column.
   ───────────────────────────────────────────────────────────────────── */
.story-warm  { background: #fdf7ea;       position: relative; overflow: hidden; }
.story-plain { background: #fff;          position: relative; overflow: hidden; }
.story-warm > .section-title,
.story-warm > .section-lede,
.story-warm > .split-row,
.story-plain > .section-title,
.story-plain > .section-lede,
.story-plain > .split-row,
.story-plain > .tips-grid { position: relative; z-index: 2; }
.privacy-promise { font-size: .98rem; font-weight: 700; color: #2a2a2a; margin-top: 26px; }

/* ─────────────────────────────────────────────────────────────────────
   PLACEHOLDER — dashed-border block standing in for an image / video /
   compare-slider until real content is wired up. Visible "TODO" cue.
   ───────────────────────────────────────────────────────────────────── */
.placeholder {
  background: rgba(255, 255, 255, 0.65);
  border: 2px dashed #c5d4e0;
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 280px;
  aspect-ratio: 4 / 3;
}
.placeholder--wide    { aspect-ratio: 16 / 10; }
.placeholder--compare { aspect-ratio: 4 / 3; border-color: var(--c-pink); background: rgba(254, 232, 238, 0.45); }

/* Real photo dropped into a .split-visual slot — same rounded card
   framing as the placeholder it replaces. */
.split-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(20, 30, 60, 0.10);
  object-fit: cover;
}
.placeholder-icon  { font-size: 2.2rem; opacity: .75; }
.placeholder-label { font-weight: 800; font-size: 1.02rem; color: #444; }
.placeholder-note  { font-size: .82rem; color: var(--text-soft); font-style: italic; max-width: 320px; line-height: 1.5; }

/* On narrow screens drop the fixed aspect-ratio + min-height so the box
   grows to fit its content instead of clipping the explanatory note. */
@media (max-width: 800px) {
  .placeholder,
  .placeholder--wide,
  .placeholder--compare {
    aspect-ratio: auto;
    min-height: 0;
    padding: 26px 20px;
  }
  .placeholder-note { max-width: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   COMPARE SLIDER — reusable before/after slider. Drag (or arrow keys)
   to reveal the bottom image. Behaviour lives in /js/compare-slider.js.
   ───────────────────────────────────────────────────────────────────── */
.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f7f5f0;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;   /* let a touch on the image scroll the page vertically */
  outline: none;
  -webkit-tap-highlight-color: transparent;   /* no grey/blue flash on mobile tap */
  cursor: default;       /* only the handle is draggable now */
}
/* Focus ring only for keyboard users (:focus-visible) — not on mouse/touch
   clicks, which otherwise showed a blue box when grabbing the handle. */
.compare:focus-visible { box-shadow: 0 0 0 3px rgba(0, 114, 188, 0.35); }
.compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
.compare-img--top    { z-index: 2; }
.compare-img--bottom { z-index: 1; }
.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  z-index: 3;
  transform: translateX(-1.5px);
  pointer-events: auto;   /* the handle IS the drag target */
  cursor: ew-resize;
  touch-action: none;     /* JS owns the horizontal drag gesture here */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.55);
}
/* Invisible wide hit-zone around the thin divider so the handle is easy to
   grab with a finger — without it only the 3px line / knob would be tappable. */
.compare-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 48px;
  transform: translateX(-50%);
}
.compare-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-purple);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  line-height: 1;
}
.compare-label {
  position: absolute;
  top: 10px;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 50px;
  z-index: 4;
  pointer-events: none;
}
.compare-label--left  { left: 10px; }
.compare-label--right { right: 10px; }

/* ─────────────────────────────────────────────────────────────────────
   PROCESS — deep-dive walkthrough of the three steps. Warm cream bg
   with hand-drawn decorations, alternating split-row layout inside.
   ───────────────────────────────────────────────────────────────────── */
.process {
  background: #fdf7ea;
  position: relative;
  overflow: hidden;
}
.process > .section-title,
.process > .section-lede { position: relative; z-index: 2; }
.process-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.process-deco-heart-tl { top: 56px;    left: 4%;  width: 50px; transform: rotate(-12deg); }
.process-deco-star-tr  { top: 60px;    right: 4%; width: 50px; transform: rotate(14deg);  }
.process-deco-sq-bl    { bottom: 80px; left: 4%;  width: 90px; transform: rotate(-6deg); opacity: .85; }
.process-deco-star-br  { bottom: 90px; right: 4%; width: 44px; transform: rotate(-10deg); }
@media (max-width: 900px) {
  .process-deco-sq-bl, .process-deco-star-br { display: none; }
}
@media (max-width: 700px) { .process-deco { display: none; } }

/* ─────────────────────────────────────────────────────────────────────
   BA GALLERY — before/after compare-slider showcase. White bg.
   ───────────────────────────────────────────────────────────────────── */
.ba-gallery {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.ba-gallery > .section-title,
.ba-gallery > .section-lede,
.ba-gallery > .ba-grid { position: relative; z-index: 2; }
.ba-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 700px) { .ba-grid { grid-template-columns: 1fr; gap: 20px; } }
.ba-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 6px 18px rgba(15, 30, 60, 0.08);
}
.ba-card:nth-child(1) { transform: rotate(-1deg); }
.ba-card:nth-child(2) { transform: rotate(1.2deg); }
.ba-card:nth-child(3) { transform: rotate(0.6deg); }
.ba-card:nth-child(4) { transform: rotate(-1.4deg); }
.ba-caption {
  margin: 12px 4px 4px;
  font-size: .92rem;
  font-weight: 700;
  text-align: center;
  color: #1a1a1a;
}

/* ─────────────────────────────────────────────────────────────────────
   PHOTO TIPS — 2x3 grid of advice cards on warm grey background.
   ───────────────────────────────────────────────────────────────────── */
.photo-tips {
  background: var(--bg-warm);
  position: relative;
  overflow: hidden;
}
.photo-tips > .section-title,
.photo-tips > .section-lede,
.photo-tips > .tips-grid { position: relative; z-index: 2; }
.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 900px) { .tips-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tips-grid { grid-template-columns: 1fr; gap: 18px; } }

.tip-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  position: relative;
}
.tip-card:nth-child(1) { transform: rotate(-1deg); }
.tip-card:nth-child(2) { transform: rotate(0.8deg); }
.tip-card:nth-child(3) { transform: rotate(-0.6deg); }
.tip-card:nth-child(4) { transform: rotate(1.2deg); }
.tip-card:nth-child(5) { transform: rotate(-1.4deg); }
.tip-card:nth-child(6) { transform: rotate(0.9deg); }
.tip-card h3 {
  font-size: 1rem;
  font-weight: 900;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
/* Tick = inline-SVG checkmark drawn as a CSS mask, painted with currentColor — so
   it always matches the heading's brand colour exactly (set per card below) and
   stays crisp at any size. No icon-font dependency, no per-colour image. */
.tip-card h3::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tip-card p { font-size: .92rem; color: var(--text-muted); line-height: 1.65; margin: 0; }
.tip-card:nth-child(1) h3 { color: var(--c-pink);   }
.tip-card:nth-child(2) h3 { color: var(--c-orange); }
.tip-card:nth-child(3) h3 { color: var(--c-blue);   }
.tip-card:nth-child(4) h3 { color: var(--c-purple); }
.tip-card:nth-child(5) h3 { color: var(--c-green);  }
.tip-card:nth-child(6) h3 { color: var(--c-red);    }

/* ─────────────────────────────────────────────────────────────────────
   PRODUCT SPEC — what's in your book. White bg, single split-row.
   ───────────────────────────────────────────────────────────────────── */
.product-spec {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.product-spec > .section-title,
.product-spec > .section-lede,
.product-spec > .split-row { position: relative; z-index: 2; }

/* ─────────────────────────────────────────────────────────────────────
   PRIVACY — reassuring band centred around the heart-lock icon.
   ───────────────────────────────────────────────────────────────────── */
.privacy-section {
  background: #fdf7ea;
  position: relative;
  overflow: hidden;
}
.privacy-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.privacy-icon {
  width: 72px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
}
.privacy-section h2 { margin-bottom: 14px; }
.privacy-section p {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 22px;
}
.privacy-list {
  list-style: none;
  padding: 0;
  display: inline-block;
  text-align: left;
  margin: 0 auto;
}
.privacy-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 1rem;
  color: #2a2a2a;
  line-height: 1.55;
}
.privacy-list li::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-color: var(--c-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   FAQ MINI — compact FAQ cards on warm background. Visual rhyme with
   the home page gift section (white cards on warm bg, slight tilts).
   ───────────────────────────────────────────────────────────────────── */
.faq-mini {
  background: var(--bg-warm);
  position: relative;
  overflow: hidden;
}
.faq-mini-title { position: relative; z-index: 2; }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1000px;
  margin: 32px auto 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 700px) { .faq-grid { grid-template-columns: 1fr; gap: 20px; } }

.faq-card {
  background: #fff;
  border-radius: 16px;
  padding: 26px 24px 22px;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  position: relative;
  transition: box-shadow .2s ease;
}
.faq-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09); }
.faq-card h3 {
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111;
  line-height: 1.3;
}
.faq-card h3::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background: center/contain no-repeat;
  flex-shrink: 0;
}
.faq-card p { font-size: 0.96rem; color: var(--text-muted); line-height: 1.7; margin: 0; }

/* Per-card brand colour + heart icon + slight random tilt */
.faq-card.fq-1 { transform: rotate(-1.2deg); }
.faq-card.fq-1 h3 { color: var(--c-blue); }
.faq-card.fq-1 h3::before { background-image: url("/img/brand/heart-teal.png"); }

.faq-card.fq-2 { transform: rotate(1deg); }
.faq-card.fq-2 h3 { color: var(--c-pink); }
.faq-card.fq-2 h3::before { background-image: url("/img/brand/heart-pink.png"); }

.faq-card.fq-3 { transform: rotate(-1.6deg); }
.faq-card.fq-3 h3 { color: var(--c-purple); }
.faq-card.fq-3 h3::before { background-image: url("/img/brand/heart-purple.png"); }

.faq-card.fq-4 { transform: rotate(1.4deg); }
.faq-card.fq-4 h3 { color: var(--c-green); }
.faq-card.fq-4 h3::before { background-image: url("/img/brand/heart-green.png"); }

/* Per-card tape + stroke flourish — same vocabulary as gift section, lighter */
.faq-tape {
  position: absolute;
  top: -10px;
  width: 74px;
  height: auto;
  pointer-events: none;
  z-index: 3;
}
/* Tape always sits on the grid column's outer edge */
.faq-grid .faq-card:nth-child(odd)  .faq-tape { left:  6px; right: auto; }
.faq-grid .faq-card:nth-child(even) .faq-tape { right: 6px; left:  auto; }
/* Per-card tilt for hand-stuck variety */
.fq-1 .faq-tape { transform: rotate(22deg);  }
.fq-2 .faq-tape { transform: rotate(-18deg); }
.fq-3 .faq-tape { transform: rotate(-30deg); }
.fq-4 .faq-tape { transform: rotate(24deg);  }

.faq-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.faq-deco-heart-tl { top: 70px;     left:  28px; width: 46px; transform: rotate(-12deg); }
.faq-deco-star-tr  { top: 64px;     right: 30px; width: 46px; transform: rotate(14deg); }
.faq-deco-sq-bl    { bottom: 100px; left: 24px;  width: 84px; transform: rotate(-6deg); opacity: .85; }
.faq-deco-star-br  { bottom: 110px; right: 30px; width: 44px; transform: rotate(-10deg); }
@media (max-width: 960px) {
  .faq-deco-sq-bl { display: none; }
  .faq-deco-heart-tl, .faq-deco-star-tr, .faq-deco-star-br { width: 34px; }
}
@media (max-width: 700px) {
  .faq-deco { display: none; }
  .faq-tape { width: 58px; }
}

/* Article pages chrome (used for /faq /privacy /terms etc — added in M2) */
body.article { background: #fff; }
.article-hero {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: clamp(48px, 6vw, 80px) var(--article-gutter) clamp(36px, 4vw, 56px);
}
.article-hero-inner { max-width: var(--article-max); margin: 0 auto; }
.article-hero-label {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-blue);
  margin-bottom: 12px;
}
.article-hero h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #111;
  margin-bottom: 14px;
}
.article-hero-meta { font-size: .92rem; color: var(--text-soft); line-height: 1.6; }
.article-hero-meta a { color: var(--c-blue); font-weight: 700; text-decoration: none; }

.article-body {
  max-width: var(--article-max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--article-gutter) clamp(56px, 8vw, 96px);
}
.article-body h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #111;
  margin: 48px 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;
}
.article-body h2:first-child, .article-body > *:first-child + h2 { margin-top: 0; }
.article-body h3 { font-size: 1.05rem; font-weight: 800; color: #1a1a1a; margin: 28px 0 10px; }
.article-body p { font-size: 1rem; color: #3a3a3a; line-height: 1.78; margin-bottom: 14px; }
.article-body ul, .article-body ol { padding-left: 1.4rem; margin: 4px 0 18px; }
.article-body li { font-size: 1rem; color: #3a3a3a; line-height: 1.78; margin-bottom: 8px; }
.article-body a { color: var(--c-blue); font-weight: 600; text-decoration: none; }
.article-body a:hover { text-decoration: underline; }
.article-body strong { color: #1a1a1a; font-weight: 800; }

.highlight, .warning {
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 20px 0 24px;
}
.highlight { background: #f0f7ff; border-left: 4px solid var(--c-blue); }
.highlight p { margin: 0; font-size: .96rem; color: #1a4a6b; font-weight: 600; line-height: 1.65; }
.warning { background: #fff8e1; border-left: 4px solid var(--c-orange); }
.warning p { margin: 0; font-size: .96rem; color: #7a4500; font-weight: 600; line-height: 1.65; }

.contact-box { background: var(--bg-warm); border-radius: 14px; padding: 22px 26px; margin-top: 32px; }
.contact-box p { margin: 0; font-size: .96rem; color: #3a3a3a; line-height: 1.7; }
.contact-box a { color: var(--c-blue); font-weight: 700; text-decoration: none; }

.subpage-cta {
  text-align: center;
  margin-top: 56px;
  padding: 44px 32px;
  background: var(--bg-warm);
  border-radius: 18px;
}
.subpage-cta .h { font-size: 1.3rem; font-weight: 900; color: #111; margin-bottom: 10px; letter-spacing: -0.01em; }
.subpage-cta .sub { font-size: .98rem; color: var(--text-muted); margin-bottom: 24px; line-height: 1.65; max-width: 480px; margin-left: auto; margin-right: auto; }
.subpage-cta .btn-go {
  background: var(--grad-red-pink);
  color: #fff;
  border: none;
  padding: 15px 36px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 8px 24px rgba(226,0,122,.28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.subpage-cta .btn-go:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(226,0,122,.35); }

/* ─────────────────────────────────────────────────────────────────────
   STEPS V2 — playful hand-drawn three-step section (replaces .steps/.sg)
   Uses PNG assets in /img/steps/. The .steps-v2 modifier scopes everything
   so the legacy rules above stay untouched.
   ───────────────────────────────────────────────────────────────────── */

.steps-v2 {
  background: #fdf7ea;             /* warm cream from mockup */
  position: relative;
  overflow: hidden;                /* clip stray edges of corner decorations */
}
.steps-v2 .steps-inner {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 8px 0 16px;             /* outer section padding handled by section rule */
}
.steps-v2 .steps-title {
  text-align: center;
  margin-bottom: 6px;
}
.steps-v2 .steps-title-sep {
  display: block;
  margin: 6px auto 36px;
  height: 28px;
  width: auto;
  max-width: 80%;
  pointer-events: none;
}

/* ── Card grid ─────────────────────────────────────────────────────── */
.steps-v2 .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;                      /* cards above floating decorations */
}
.steps-v2 .step-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 28px 22px 26px;
  text-align: center;
  box-shadow: 0 6px 22px rgba(15, 30, 60, 0.07);
  overflow: visible;
}
.steps-v2 .step-card h3 {
  font-size: 1.15rem;
  font-weight: 900;
  margin: 4px 0 14px;
  line-height: 1.25;
}
.steps-v2 .step-card p {
  font-size: 0.96rem;
  font-weight: 600;
  color: #3a3a3a;
  line-height: 1.55;
  margin: 14px 8px 0;
  text-wrap: balance;
}
.steps-v2 .step-card.sc-pink   h3 { color: var(--c-pink); }
.steps-v2 .step-card.sc-green  h3 { color: var(--c-green); }
.steps-v2 .step-card.sc-purple h3 { color: var(--c-purple); }

/* Tiny random tilt per card so the row reads as casually pinned */
.steps-v2 .step-card.sc-pink   { transform: rotate(-1.4deg); }
.steps-v2 .step-card.sc-green  { transform: rotate(1deg);    }
.steps-v2 .step-card.sc-purple { transform: rotate(-0.8deg); }

.steps-v2 .step-badge-img {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto 6px;
  position: relative;
  z-index: 2;
}
.steps-v2 .step-graphic {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 4px auto 6px;
  position: relative;
  z-index: 1;
}

/* Sticky tape — anchors each card. Different position per card.       */
.steps-v2 .step-tape {
  position: absolute;
  width: 92px;
  height: auto;
  pointer-events: none;
  z-index: 3;
}
.steps-v2 .step-tape { width: 90px; }
/* Tape centred on a corner, card edge bisects the tape. Mockup pattern:
   step 1 bottom-left, step 2 top-right, step 3 bottom-right. */
.steps-v2 .sc-pink   .step-tape { bottom: -14px; left:  -44px; transform: rotate(-22deg); }
.steps-v2 .sc-green  .step-tape { top:    -14px; right: -44px; transform: rotate(-30deg); }
.steps-v2 .sc-purple .step-tape { bottom: -14px; right: -44px; transform: rotate(38deg);  }

/* Tiny stroke flourishes near the badge on each card                  */
.steps-v2 .step-stroke {
  position: absolute;
  width: 38px;
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: .9;
}
.steps-v2 .sc-pink   .step-stroke-a { top: 16px; left: 38px;  transform: rotate(-18deg); }
.steps-v2 .sc-pink   .step-stroke-b { top: 22px; right: 36px; width: 30px; transform: rotate(28deg); }
.steps-v2 .sc-green  .step-stroke-a { top: 10px; left: 30px;  transform: rotate(-14deg); }
.steps-v2 .sc-green  .step-stroke-b { top: 18px; right: 26px; width: 32px; transform: rotate(22deg); }
.steps-v2 .sc-purple .step-stroke-a { top: 14px; left: 28px;  transform: rotate(-22deg); }
.steps-v2 .sc-purple .step-stroke-b { top: 20px; right: 28px; width: 32px; transform: rotate(20deg); }

/* ── Privacy pill ──────────────────────────────────────────────────── */
.steps-v2 .steps-privacy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 620px;
  margin: 36px auto 0;
  padding: 12px 22px 12px 14px;
  background: #fffaee;
  border: 1.5px solid #f3d99a;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(244, 121, 32, 0.08);
}
.steps-v2 .steps-privacy-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
.steps-v2 .steps-privacy span {
  font-size: 0.95rem;
  color: #444;
  font-weight: 500;
}

/* ── Floating decorations (desktop only) ───────────────────────────── */
.steps-v2 .steps-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;                      /* below cards */
}
/* Top-left cluster: pink heart on top, blue arrow tucked just under-right */
.steps-v2 .steps-deco-heart-tl    { top: 18px;  left: 22px;  width: 38px; transform: rotate(-10deg); }
.steps-v2 .steps-deco-arrow-tl    { top: 64px;  left: 14px;  width: 78px; transform: rotate(-4deg); }

/* Top-right cluster: orange strokes + yellow star + purple star, near corner */
.steps-v2 .steps-deco-stroke-tr   { top: 32px;  right: 110px; width: 38px; transform: rotate(-12deg); }
.steps-v2 .steps-deco-star-tr-y   { top: 18px;  right: 60px;  width: 38px; transform: rotate(14deg); }
.steps-v2 .steps-deco-star-tr-p   { top: 64px;  right: 14px;  width: 38px; transform: rotate(-12deg); }

/* Bottom-left cluster: blue star + purple squiggle (yellow strokes dropped — looked random) */
.steps-v2 .steps-deco-star-bl     { bottom: 96px; left: 22px;  width: 38px; transform: rotate(-14deg); }
.steps-v2 .steps-deco-squiggle-bl { bottom: 56px; left: 70px;  width: 60px; transform: rotate(6deg); }
.steps-v2 .steps-deco-stroke-bl   { display: none; }

/* Bottom-right cluster: outline pink heart + green squiggle */
.steps-v2 .steps-deco-heart-br    { bottom: 90px; right: 22px;  width: 42px; transform: rotate(12deg); }
.steps-v2 .steps-deco-squiggle-br { bottom: 56px; right: 70px;  width: 62px; transform: rotate(-10deg); }

/* ── Tablet (2-column doesn't read well with full-bleed graphics) ──── */
@media (max-width: 960px) {
  .steps-v2 .steps-grid { grid-template-columns: 1fr; gap: 22px; max-width: 460px; margin: 0 auto; }
  .steps-v2 .step-card  { padding: 26px 22px 24px; }
  .steps-v2 .step-graphic { max-width: 220px; }
  /* Pull a couple of decorations in tighter; hide the rest                */
  .steps-v2 .steps-deco-arrow-tl,
  .steps-v2 .steps-deco-star-tr-p,
  .steps-v2 .steps-deco-stroke-bl,
  .steps-v2 .steps-deco-squiggle-bl,
  .steps-v2 .steps-deco-squiggle-br { display: none; }
}

/* ── Mobile (≤640px) — hide all loose decorations, keep card-level    */
@media (max-width: 640px) {
  .steps-v2 .steps-title-sep { height: 14px; margin-bottom: 24px; }
  .steps-v2 .step-badge-img  { width: 80px; }
  .steps-v2 .step-graphic    { max-width: 200px; }
  .steps-v2 .step-card h3    { font-size: 1.05rem; }
  .steps-v2 .step-tape       { width: 72px; }
  .steps-v2 .steps-privacy {
    margin-top: 28px;
    padding: 10px 16px 10px 12px;
    border-radius: 16px;
    align-items: flex-start;
  }
  .steps-v2 .steps-privacy span { font-size: 0.88rem; }
  .steps-v2 .steps-privacy-icon { width: 30px; height: 30px; flex-basis: 30px; }
  .steps-v2 .steps-deco { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   BLOG — index listing (/blog) and individual posts (/blog/{slug})
   Tiles use a soft card with a zoom-on-hover hero and a lift on hover.
   Reuses the brand tokens and the article-body chrome for post content.
   ───────────────────────────────────────────────────────────────────── */

/* Header band on the index */
.blog-header {
  position: relative;
  overflow: hidden;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border);
  padding: clamp(48px, 6vw, 84px) var(--gutter-x) clamp(40px, 5vw, 64px);
  text-align: center;
}
.blog-header-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.blog-header-divider { position: relative; z-index: 2; margin-top: clamp(28px, 4vw, 40px); }

/* Hand-drawn brand decorations scattered round the header (same kit + idiom as
   the home page hero/ideas sections). Purely decorative, hidden on small screens. */
.blog-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.blog-deco-heart-tl    { top: 40px;  left: 5%;   width: 46px; transform: rotate(-12deg); }
.blog-deco-star-tl     { bottom: 54px; left: 9%;  width: 34px; transform: rotate(8deg); }
.blog-deco-star-tr     { top: 46px;  right: 7%;   width: 46px; transform: rotate(14deg); }
.blog-deco-stroke-tr   { top: 104px; right: 4%;   width: 38px; transform: rotate(-16deg); }
.blog-deco-squiggle-bl { bottom: 40px; left: 3%;  width: 80px; transform: rotate(-4deg); opacity: .9; }
.blog-deco-star-br     { bottom: 58px; right: 10%; width: 40px; transform: rotate(-10deg); }

/* Crayon clusters anchored low in the corners, peeking up from the bottom edge. */
.blog-crayons {
  position: absolute;
  bottom: -8px;
  width: clamp(120px, 13vw, 180px);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.blog-crayons-left  { left: -10px;  transform: rotate(6deg); }
.blog-crayons-right { right: -10px; transform: rotate(-4deg); }

@media (max-width: 1024px) {
  .blog-crayons { display: none; }
  .blog-deco-stroke-tr, .blog-deco-squiggle-bl { display: none; }
}
@media (max-width: 680px) {
  .blog-deco { display: none; }
}
.blog-header-label {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-blue);
  margin-bottom: 14px;
}
.blog-header h1 {
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #111;
  margin-bottom: 16px;
}
.blog-header p { font-size: 1.05rem; color: var(--text-muted); line-height: 1.7; max-width: 600px; margin: 0 auto; }

.blog-layout {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--gutter-x) clamp(56px, 8vw, 96px);
}

/* Shared tag chip */
.blog-tag, .blog-card-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 50px;
}
.blog-card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 13px;
  background: rgba(255,255,255,.94);
  color: var(--c-blue);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  backdrop-filter: blur(4px);
}

/* Featured (latest) post — wide card at the top */
.blog-featured {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: visible;          /* let the sticky-tape peek above the top edge */
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .22s ease, box-shadow .22s ease;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.blog-featured:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.12); }
.blog-featured-img { position: relative; overflow: hidden; min-height: 280px; border-radius: 21px 0 0 21px; }
.blog-featured-tape {
  position: absolute;
  top: -17px;
  left: 46px;
  width: 92px;
  height: auto;
  transform: rotate(-8deg);
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
.blog-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.blog-featured:hover .blog-featured-img img { transform: scale(1.05); }
.blog-featured-body { padding: clamp(28px, 3.4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.blog-featured-kicker {
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-pink);
  margin-bottom: 12px;
}
.blog-featured-body h2 {
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #111;
  margin-bottom: 14px;
}
.blog-featured-cta { margin-top: 18px; font-weight: 800; color: var(--c-blue); font-size: .98rem; }

/* Grid of cards */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(22px, 2.6vw, 34px);
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  transition: transform .22s ease, box-shadow .22s ease;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.blog-card-img { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-soft); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.07); }
.blog-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.blog-card-body h3 {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #111;
  margin-bottom: 10px;
  transition: color .18s ease;
}
.blog-card:hover .blog-card-body h3 { color: var(--c-blue); }
.blog-card-excerpt { font-size: .94rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 16px; flex: 1; }
.blog-card-meta { font-size: .8rem; color: var(--text-soft); font-weight: 600; }

.blog-index-cta { margin-top: clamp(48px, 6vw, 72px); }

/* ── Individual post ───────────────────────────────────────────────── */
.blog-post-hero {
  position: relative;
  padding: clamp(56px, 9vw, 120px) var(--article-gutter) clamp(40px, 5vw, 64px);
  background-image: var(--blog-hero);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.blog-post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.72) 100%);
}
/* Same measure and gutter as .blog-post-body, so the h1 sits flush with the body text */
.blog-post-hero-inner {
  position: relative;
  max-width: var(--blog-max);
  margin: 0 auto;
  padding: 0 var(--article-gutter);
}
.blog-crumbs { font-size: .85rem; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.blog-crumbs a { color: rgba(255,255,255,.9); text-decoration: none; font-weight: 600; }
.blog-crumbs a:hover { text-decoration: underline; }
.blog-crumbs span { color: rgba(255,255,255,.6); }
.blog-post-hero .blog-tag {
  padding: 6px 14px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  margin-bottom: 18px;
  backdrop-filter: blur(4px);
}
.blog-post-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 16ch;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  margin-bottom: 18px;
}
.blog-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .92rem;
  color: rgba(255,255,255,.92);
  font-weight: 600;
}
.blog-post-meta span[aria-hidden] { color: rgba(255,255,255,.55); }

/* Post body: slightly narrower measure than legal articles for readability */
.blog-post-body { max-width: var(--blog-max); }
.blog-post-body > p:first-of-type { font-size: 1.12rem; color: #2a2a2a; line-height: 1.75; }

/* In-article product photo: a captioned figure, not an ad slot */
.blog-product-visual { margin: 28px 0 26px; }
.blog-product-visual a { display: block; text-decoration: none; }
.blog-product-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.blog-product-visual a:hover img {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.blog-product-visual figcaption {
  margin-top: 10px;
  font-size: .9rem;
  line-height: 1.6;
  color: #6a6a6a;
  text-align: center;
}
.blog-product-visual figcaption a { font-weight: 700; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .blog-product-visual img { transition: none; }
  .blog-product-visual a:hover img { transform: none; }
}

/* Related posts strip */
.blog-related { background: var(--bg-warm); border-top: 1px solid var(--border); }
.blog-related-inner { max-width: var(--page-max); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--gutter-x); }
.blog-related-inner > h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #111;
  margin-bottom: 28px;
  text-align: center;
}

@media (max-width: 820px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-img { min-height: 220px; aspect-ratio: 16 / 9; border-radius: 21px 21px 0 0; }
  .blog-featured-tape { left: 50%; transform: translateX(-50%) rotate(-8deg); }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
}