/* =========================================================================
   Wikids — redesigned site (WIK-115)
   Shared stylesheet consumed by all public-new pages.
   Paper-craft / warm palette adapted from the approved design mock.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  --blue:      #143b73;
  --blue-2:    #1580bd;
  --sky:       #9fd8ee;
  --sky-2:     #a8e1ef;
  --sky-3:     #cbe7ee;
  --cream:     #fff3dd;
  --paper:     #fff8ea;
  --paper-2:   #fff8e8;
  --green:     #3f9b60;
  --green-2:   #499a55;
  --orange:    #f18a2e;
  --purple:    #7650b8;
  --yellow:    #f5c64a;
  --brown:     #52404a;
  --ink:       #173763;
  --ink-soft:  #233b56;
  --muted:     #55627a;

  --shadow:    0 12px 22px rgba(34,26,18,.16), inset 0 0 0 1px rgba(80,48,18,.08);
  --shadow-sm: 0 6px 14px rgba(34,26,18,.10);
  --radius:    22px;
  --radius-lg: 46px;
  --maxw:      1200px;

  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  font-family: var(--font);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { text-decoration: none; color: inherit; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 1000; color: var(--blue); line-height: 1.1; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  border-radius: 18px;
  padding: 14px 24px;
  font-family: var(--font);
  font-weight: 1000;
  font-size: 15px;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(34,26,18,.2), inset 0 0 0 1px rgba(80,48,18,.08);
}
.btn.purple { background: var(--purple); color: #fff; }
.btn.yellow { background: var(--yellow); color: #241805; }
.btn.orange { background: var(--orange); color: #fff; }
.btn.blue   { background: var(--blue-2); color: #fff; }

/* Store badge buttons (real images) */
.stores { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.stores img { height: 48px; width: auto; }
.stores.center { justify-content: center; }

/* ---------- Navigation ---------- */
.nav {
  height: 74px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 clamp(18px, 4vw, 46px);
  background: #fff5df;
  border-bottom: 2px solid rgba(83,50,18,.1);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav .brand img { height: 42px; }
.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-weight: 900;
  font-size: 15px;
  align-items: center;
}
.nav-links a { color: var(--ink); transition: color .2s ease; }
/* Exclude the .btn so its white-on-purple text isn't recoloured on hover. */
.nav-links a:not(.btn):hover { color: var(--purple); }
.nav-links .btn { padding: 11px 20px; font-size: 14px; }
.nav-lang { font-weight: 900; color: var(--ink); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 3px;
  background: var(--blue);
  border-radius: 3px;
  margin: 5px 0;
  transition: transform .25s ease, opacity .25s ease;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Jungle artwork shared with the Flutter app, uncropped. `cover` + center
     keeps its aspect ratio at any resolution: it always fills the hero's
     height and the excess is cropped evenly around the middle. */
  background: #bee3f2 url("/img/animals_cat_bg.webp") center / cover no-repeat;
  padding: 64px clamp(24px, 5vw, 60px);
  overflow: hidden;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;  /* ~52.5% text / ~47.5% media */
  align-items: center;
  gap: 32px;
}
.paper-card {
  position: relative;
  background: var(--paper-2);
  padding: 40px;
  border-radius: 6px;
  box-shadow: var(--shadow);
  z-index: 2;
}
.paper-card.torn { clip-path: polygon(1% 2%, 99% 0, 98% 99%, 2% 97%, 0 40%); }

.hero h1 {
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.03;
  margin: 0 0 24px;
  color: var(--blue);
}
.hero h1 .b { color: var(--blue-2); }
.hero h1 .g { color: var(--green); }
.hero p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 800;
  margin: 20px 0;
}
.download-lead {
  font-weight: 800;
  color: var(--blue);
  margin: 6px 0 10px !important;
  font-size: 18px;
}
.trust-strip {
  margin: 18px 50px 0 0 !important;
  font-size: 16px !important;
  font-weight: normal !important;
  color: var(--ink-soft);
  line-height: 1.6;
}
.trust-strip img { display: inline-block; height: 22px; vertical-align: middle; }

/* Hero media (video + phone-style frame) */
.hero-media { position: relative; z-index: 2; }

/* Cross-fading carousel of Wikids app device mockups (transparent PNGs). */
.hero-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 46 / 34;   /* matches the hero PNG proportions */
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .9s ease;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.22));
  will-change: opacity;
}
.hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity .3s ease; }
}

/* ---------- Animated layered owl (ported from the Flutter home owl) ----------
   16 stacked PNG layers, each a full 560×586 canvas, so every layer shares the
   owl's box and lines up with inset:0. Idle animations use only transforms +
   opacity (blink, breathe, symmetric wing flap, spark drift, mouth talk) —
   directly mirroring lib/widgets/chrome/home_owl.dart. Tuning constants below
   are carried over from that file. */
.owl {
  position: absolute;
  z-index: 3;                 /* above the paper card + carousel */
  /* Sits near the seam between the paper card and the device carousel,
     nudged 20px left of the grid's center gutter (was 50px). */
  left: calc(50% - 20px);
  /* DESKTOP VERTICAL POSITION — lower the number to drop the owl further.
     0 aligns the owl's feet with the bottom of the device carousel: the
     carousel is the tallest hero column, so hero-inner's bottom edge is the
     carousel's bottom edge. */
  bottom: 0;
  transform: translateX(-52%);
  /* DESKTOP SIZE — 10% smaller than the previous bump (188→169, 18.75→16.9vw, 275→248). */
  width: clamp(169px, 16.9vw, 248px);
  aspect-ratio: 560 / 586;
  pointer-events: none;
  /* Whole-owl breathe: a slow vertical bob + tiny scale, about the feet. */
  transform-origin: 50% 100%;
  animation: owlBreathe 4.6s ease-in-out infinite;
}
.owl-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Breathe wrapper adds a soft drop shadow under the owl. */
.owl-body { filter: drop-shadow(0 10px 14px rgba(0,0,0,.18)); }

/* Wings: symmetric flap about each shoulder pivot. Flutter pivots
   left(-0.15,0.25) / right(0.15,0.25) → CSS transform-origin (%). Max ~22°. */
.owl-wing { will-change: transform; }
.owl-wing-left  { transform-origin: 42.5% 62.5%; animation: owlFlapLeft  0.9s ease-in-out infinite; }
.owl-wing-right { transform-origin: 57.5% 62.5%; animation: owlFlapRight 0.9s ease-in-out infinite; }

/* Pupils + sparks blink together: squash on Y about the eye center. The
   Flutter eye center is y=-0.18 of the box → ~41% from top. */
.owl-blink {
  transform-origin: 50% 41%;
  will-change: transform;
  animation: owlBlink 5.4s ease-in-out infinite;
}
/* Sparks also drift horizontally for a gentle "looking around". Base offsets
   from the Flutter constants (fraction of box width). */
.owl-spark-left  { animation: owlBlink 5.4s ease-in-out infinite, owlSparkDrift 4.2s ease-in-out infinite; }
.owl-spark-right { animation: owlBlink 5.4s ease-in-out infinite, owlSparkDrift 4.2s ease-in-out infinite; }

/* Mouth talk crossfades in over the closed mouth; JS toggles .is-talking in
   randomized bursts (mirrors the Dart talk timer). Default hidden. */
.owl-mouth-talk { opacity: 0; transition: opacity .12s ease; }
.owl-mouth-talk.is-talking { opacity: 1; }

@keyframes owlBreathe {
  0%, 100% { transform: translateX(-52%) translateY(0)     scale(1); }
  50%      { transform: translateX(-52%) translateY(-2.5%) scale(1.012); }
}
/* One flap = wings rotate up then back. Left/right mirror (opposite sign). */
@keyframes owlFlapLeft {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(14deg); }
}
@keyframes owlFlapRight {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-14deg); }
}
/* Blink: eyes open most of the cycle, a quick double-squash near the end. */
@keyframes owlBlink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%           { transform: scaleY(0.08); }
  96%           { transform: scaleY(1); }
}
@keyframes owlSparkDrift {
  0%, 100% { margin-left: -0.9%; }
  50%      { margin-left:  0.9%; }
}

/* ---------- Benefit owls (category owls ported from category_owl.dart) ----------
   Same layered kit as the hero owl, standing near the bottom-right corner of
   each benefit image. Shared parts load from /img/owl/, costumes from
   /img/owl/<category>/. Idle modes per category: space (float coupled to the
   wing beat + gentle head turn, no blink/talk), landmarks (sideways body
   drift + slow both-wing flap), home (hero idle), animals (right-wing burst
   flaps with a rest between). Blink / sparks / mouth reuse the hero classes. */
.benefit-owl {
  position: absolute;
  /* Shifted right by one full owl-width past the image edge, so it stands in
     the body's gutter rather than straddling the image. */
  right: calc(-1 * clamp(90px, 12vw, 120px));
  bottom: 50px;              /* feet aligned with the benefit image's bottom edge */
  width: clamp(110px, 12vw, 160px);
  aspect-ratio: 560 / 586;
  pointer-events: none;
  z-index: 2;
  transform-origin: 50% 100%;
}
/* Home: same breathe as the hero owl, minus the hero's translateX centering. */
.benefit-owl--home { animation: benefitOwlBreathe 4.6s ease-in-out infinite; }
@keyframes benefitOwlBreathe {
  0%, 100% { transform: translateY(0)     scale(1); }
  50%      { transform: translateY(-2.5%) scale(1.012); }
}
/* Landmarks: whole-owl sideways drift + small bob (floatSideways, 3.6s). */
.benefit-owl--landmarks { animation: owlFloatSideways 3.6s ease-in-out infinite alternate; }
@keyframes owlFloatSideways {
  from { transform: translate(-5%, 2%); }
  to   { transform: translate(5%, -2%); }
}
/* Slow constant both-wing flap (float modes): ±10° over a 5.2s full cycle. */
.owl-slow-wing-left  { will-change: transform; transform-origin: 42.5% 62.5%; animation: owlSlowFlapLeft  5.2s ease-in-out infinite; }
.owl-slow-wing-right { will-change: transform; transform-origin: 57.5% 62.5%; animation: owlSlowFlapRight 5.2s ease-in-out infinite; }
@keyframes owlSlowFlapLeft {
  0%, 100% { transform: rotate(-10deg); }
  50%      { transform: rotate(10deg); }
}
@keyframes owlSlowFlapRight {
  0%, 100% { transform: rotate(10deg); }
  50%      { transform: rotate(-10deg); }
}
/* Animals: two right-wing flaps (18°, ~1.1s each) then a rest, like the
   Flutter burst loop (fixed pattern instead of the randomized gap). */
.owl-burst-wing-right { will-change: transform; transform-origin: 57.5% 62.5%; animation: owlBurstFlapRight 3.7s ease-in-out infinite; }
@keyframes owlBurstFlapRight {
  0%, 60%, 100% { transform: rotate(0deg); }
  15%, 45%      { transform: rotate(-18deg); }
  30%           { transform: rotate(0deg); }
}
/* Space: the owl rises as the wings beat down and sinks as they lift. */
.benefit-owl--space { animation: owlSpaceFloat 5.2s ease-in-out infinite; }
@keyframes owlSpaceFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6%); }
}
/* Space wings: slow flap around a ±10° base offset that closes the suit gap
   (Flutter: wingBaseDeg 10 ± spaceFlapMaxDeg 10 → 0..20°, mirrored). */
.owl-space-wing-left  { will-change: transform; transform-origin: 42.5% 62.5%; animation: owlSpaceFlapLeft  5.2s ease-in-out infinite; }
.owl-space-wing-right { will-change: transform; transform-origin: 57.5% 62.5%; animation: owlSpaceFlapRight 5.2s ease-in-out infinite; }
@keyframes owlSpaceFlapLeft {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(20deg); }
}
@keyframes owlSpaceFlapRight {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-20deg); }
}
/* Head + helmet turn gently about the neck base (Alignment 0.65 → 82.5%). */
.owl-space-head { will-change: transform; transform-origin: 50% 82.5%; animation: owlHeadTurn 3.2s ease-in-out infinite alternate; }
@keyframes owlHeadTurn {
  from { transform: rotate(-1.5deg); }
  to   { transform: rotate(1.5deg); }
}
/* Sparks ride the head turn AND keep the horizontal drift; raised 3% to sit
   in the visor eyes (spaceSparkBaseY). */
.owl-space-spark {
  transform-origin: 50% 82.5%;
  margin-top: -3%;
  animation: owlHeadTurn 3.2s ease-in-out infinite alternate, owlSparkDrift 4.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .owl, .benefit-owl,
  .owl-wing-left, .owl-wing-right,
  .owl-slow-wing-left, .owl-slow-wing-right, .owl-burst-wing-right,
  .owl-space-wing-left, .owl-space-wing-right, .owl-space-head, .owl-space-spark,
  .owl-blink, .owl-spark-left, .owl-spark-right { animation: none; }
  .owl { transform: translateX(-52%); }
}

/* ---------- Generic section ---------- */
section {
  position: relative;
  padding: 30px 0;
  /* Offset in-page anchor jumps by the sticky nav height (74px) + a little air,
     so a section's title isn't hidden under the nav after clicking a menu link. */
  scroll-margin-top: 90px;
}
.section-title {
  text-align: center;
  font-size: clamp(26px, 3.4vw, 32px);
  margin: 0 0 10px;
  color: var(--blue);
}
.section-subtitle {
  text-align: center;
  margin: 0 auto 32px;
  max-width: 620px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--muted);
}

/* Panel wrapper — the rounded cream blocks in the mock */
.panel {
  background: var(--sky-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin: 0 auto 40px;
  max-width: var(--maxw);
  padding: 48px clamp(24px, 4vw, 56px);
}
.panel.sky   { background: var(--cream); }
.panel.lilac { background: #dfe0f4; }
.coloring .panel {
  margin: 0 auto 0;
}

/* =========================================================================
   Carousels (testimonials / benefits / blog)
   Structure + JS ported from the current Wikids site: infinite clone loop,
   pixel-based transforms (no clipping), responsive visibleCount.
   Shared nav/dot styling below, per-carousel sizing after.
   ========================================================================= */

/* Shared arrow buttons */
.testimonial-nav, .benefit-nav, .blog-snapshot-nav {
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--purple);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: grid;
  font-size: 0;
  transition: transform .2s ease, background .2s ease;
  z-index: 4;
}
.testimonial-nav:hover, .benefit-nav:hover, .blog-snapshot-nav:hover {
  transform: translateY(-50%) scale(1.08);
}
/* Arrows overlap the outer cards slightly, exactly like the old site (-10px). */
.testimonial-nav.prev, .benefit-nav.prev, .blog-snapshot-nav.prev { left: -10px; }
.testimonial-nav.next, .benefit-nav.next, .blog-snapshot-nav.next { right: -10px; }
/* Testimonials: push the arrows off the white cards and into the cream panel
   gutter, so they sit on the section border like the benefits arrows below. */
.testimonial-nav.prev { left: -45px; }
.testimonial-nav.next { right: -45px; }
.testimonial-nav.prev::before, .benefit-nav.prev::before, .blog-snapshot-nav.prev::before {
  content: "‹"; font-size: 40px; line-height: 1;
}
.testimonial-nav.next::before, .benefit-nav.next::before, .blog-snapshot-nav.next::before {
  content: "›"; font-size: 40px; line-height: 1;
}

/* Shared dots */
.testimonial-dots, .benefit-dots, .blog-snapshot-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}
.testimonial-dot, .benefit-dot, .blog-snapshot-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 0;
  background: rgba(118,80,184,.3);
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.testimonial-dot.active, .benefit-dot.active, .blog-snapshot-dot.active {
  background: var(--purple);
  transform: scale(1.2);
}

/* All three sliders: the outer .slider is the positioning context for the arrows
   and is NOT clipped, so the arrows are always visible. Its side padding is the
   arrow gutter. The inner .slider-viewport is the clipping window (so no slide
   peeks past the edges) and carries a little padding so card shadows aren't cut. */
/* The outer .slider is NOT clipped — it just hosts the arrows so they're never
   cut. The inner .slider-viewport is the clip window (old-site geometry: 13px
   side padding gives the soft shadow room; slides sum to the padded content width
   so clones sit past the 13px edge and no neighbour card peeks). */
.testimonials-slider, .benefits-slider, .blog-snapshots-slider {
  position: relative;
}
.slider-viewport {
  overflow: hidden;
  padding: 20px 13px;
}
/* Old-site shadow: soft, low-opacity, weighted down so 13px padding is enough. */
.testimonial-slide, .benefit-slide, .blog-snapshot-slide {
  box-shadow: 0 5px 15px rgba(34, 26, 18, .10);
}
.testimonials-track, .benefits-track, .blog-snapshots-track {
  display: flex;
  gap: 24px;
  align-items: stretch;
  will-change: transform;
  transition: transform .6s ease;
}

/* ---------- Testimonials section: cream panel tucked under the hero ----------
   Matches the mock: a big rounded cream card that rises over the hero's
   jungle artwork. The negative top margin creates the overlap; the section is
   positioned (generic section rule) and later in the DOM, so it paints above
   the hero. The coloring section stays separate below it. */
.testimonials-section {
  /* Match the benefits/blog card edge: those sit inside .container (max --maxw,
     24px side gutters) plus the slider-viewport's 13px padding, i.e. 37px inset
     each side. Subtract 2×37 = 74px so the cream panel lines up with them. */
  width: calc(min(var(--maxw), 100%) - 74px);
  margin: -40px auto 30px auto;
  /* The hero doesn't create a stacking context, so its positioned children
     (hero-inner z-index 2, owl 3) paint in the root context; sit above the
     ones that can reach the overlap band. */
  z-index: 2;
  /* Paper-craft flower corners: original art bottom-left, mirrored copy
     bottom-right; the panel's border-radius clips them. */
  background:
    url("/img/flowers_corner_left.png")  left bottom / auto clamp(140px, 18vw, 220px) no-repeat,
    url("/img/flowers_corner_right.png") right bottom / auto clamp(140px, 18vw, 220px) no-repeat,
    var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 56px 0;
}
.section-title .hl { color: var(--purple); }
/* Text-glyph heart (no emoji variation selector) so it takes CSS color; pink
   and slightly larger than surrounding text. Shared by the testimonials title
   and the "Kids ❤ Us" nav link. */
.hl-heart {
  color: #ff5fa2;
  font-size: 1.2em;
  vertical-align: -0.05em;
}

/* ---------- Testimonials carousel (3 / 2 / 1 per view) ---------- */
.testimonials-card { position: relative; padding: 0 0 8px; }
.testimonial-slide {
  flex: 0 0 calc((100% - 48px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  background: var(--paper);
  border-radius: 15px;
  min-height: 260px;
}
.testimonial-author { font-weight: 900; color: var(--blue); margin: 0 0 18px; }
.testimonial-rating { width: 100px; margin-bottom: .8rem; }
.testimonial-text {
  font-size: 1.05rem;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 0;
  max-width: 520px;
  flex-grow: 1;
}
@media (max-width: 991.98px) {
  .testimonial-slide { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 575.98px) {
  .testimonials-track { gap: 16px; }
  .testimonial-slide { flex: 0 0 100%; padding: 1.75rem 1.5rem; }
}

/* ---------- Benefits carousel (full-width horizontal slide) ---------- */
.benefits-card { position: relative; padding: 0 0 6px; }
.benefit-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: stretch;
  background: var(--sky-3);
  border-radius: 26px;
  overflow: hidden;
  min-height: 300px;
}
.benefit-slide-media {
  flex: 0 0 42%;
  position: relative;
  /* Inset the image from the slide's outer edge (~36px) so it sits closer to the
     centre instead of flush against the border. Logical property → left edge in
     LTR, right edge in RTL, automatically. Reset on mobile (stacked, full-width). */
  margin-inline-start: 36px;
}
/* Direct child only: the owl's layer imgs inside must keep their own sizing. */
.benefit-slide-media > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 20px; }
.benefit-slide-body {
  flex: 1;
  /* 20% of the former text width (58% → 46.4% of the card), freed as a
     gutter next to the image so the corner owl has room. */
  margin-left: 11.6%;
  padding: 2.6rem 2.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .9rem;
}
.benefit-slide-body h4 { margin: 0; color: var(--blue); font-size: 1.8rem; }
.benefit-slide-text { margin: 0; font-size: 1.1rem; color: var(--ink-soft); font-weight: 700; line-height: 1.6; }

/* ---------- Blog carousel (3 / 2 / 1 vertical cards, like testimonials) ---------- */
.blog-snapshots-card { position: relative; padding: 0 0 6px; }
.blog-snapshot-slide {
  flex: 0 0 calc((100% - 48px) / 3);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 18px;
  overflow: hidden;
  min-height: 380px;
}
.blog-snapshot-media { height: 170px; }
.blog-snapshot-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-snapshot-body {
  flex: 1;
  padding: 1.5rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.blog-snapshot-body h4 { margin: 0; color: var(--blue); font-size: 1.15rem; line-height: 1.3; }
.blog-snapshot-text { margin: 0; font-size: .95rem; color: var(--muted); line-height: 1.55; font-weight: 600; }
.blog-snapshot-btn {
  align-self: flex-start;
  margin-top: auto;
  color: var(--purple);
  font-weight: 1000;
  font-size: .95rem;
}
.blog-snapshot-btn::after { content: " →"; }

@media (max-width: 991.98px) {
  .blog-snapshot-slide { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 575.98px) {
  .blog-snapshots-track { gap: 16px; }
  .blog-snapshot-slide { flex: 0 0 100%; }
}

/* Benefits stays a full-width horizontal slide; stack it on small screens. */
@media (max-width: 700px) {
  /* Image on top, text below. The title+text take 3/4 of the row width; the
     owl sits to their right in the remaining 1/4, anchored to the slide. */
  .benefit-slide { flex-direction: column; min-height: 0; position: relative; }
  /* Drop the media's positioning context so the owl (its child) anchors to
     the whole slide, letting it sit down beside the text instead of over
     the image. */
  .benefit-slide-media { flex: 0 0 auto; height: 200px; position: static; margin-inline-start: 0; }
  .benefit-slide-media > img { border-radius: 0; }
  .benefit-slide-body { width: 75%; padding: 1.8rem 1.6rem; margin-left: 0; }
  .benefit-slide-body h4 { font-size: 1.4rem; }
  /* Owl: in the right-hand quarter, sitting on the slide's bottom. The image
     area is 200px tall, so anchoring to the slide bottom keeps it down beside
     the text rather than up in the image. Positioned via left/right (not a
     transform) so it survives the per-owl transform-based idle animations. */
  .benefit-owl {
    width: 22%;
    max-width: 130px;
    left: auto;
    right: 1.5%;
    bottom: 1.6rem;
  }
}

/* ---------- Coloring page / email capture ---------- */
.coloring { text-align: center; }
.coloring h3 { font-size: clamp(20px, 2.6vw, 26px); margin: 0 auto 20px; max-width: 640px; }
/* Coloring-page artwork on the left, copy + form on the right; stacks on small screens. */
.coloring-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
.coloring-illustration { width: clamp(160px, 20vw, 240px); }
@media (max-width: 700px) {
  .coloring-inner { grid-template-columns: 1fr; justify-items: center; }
}
.email-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.email-row input {
  border: 0;
  border-radius: 18px;
  padding: 14px 22px;
  min-width: 270px;
  font-family: var(--font);
  font-size: 1.05rem;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.13);
}
[data-fs-success] {
  display: none;
  padding: 14px 18px;
  border-radius: 12px;
  margin: 0 auto 18px;
  max-width: 480px;
  font-size: 1.05rem;
  background: inherit !important;
  color: inherit !important;
  font-weight: 800;
  border: 1px solid #c3e6cb;
}
[data-fs-success][data-fs-active] { display: block; }
[data-fs-success][data-fs-active] ~ #coloring-form { display: none; }
[data-fs-error] { display: none; color: #b3261e; font-weight: 800; margin-top: 10px; }
.coloring-download-btn {
  display: inline-block;
  margin-top: 10px;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: #fff7e1;
  color: #e59a1b;
  font-weight: 800;
  font-size: .9rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.coloring-download-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* ---------- Discover / feature block ---------- */
.feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 34px;
}
.feature .feature-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.feature .feature-media img { border-radius: 18px; }
/* Looping discovery video: frame matches the source video's native ratio
   (2732x1980) so it fills edge-to-edge with no letterbox bars. */
.feature .feature-media { width: 100%; }
.feature-video {
  position: relative;
  width: 100%;
  aspect-ratio: 2732 / 1980;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.feature-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.feature h2 { text-align: left; font-size: clamp(24px, 3vw, 30px); margin: 0 0 14px; }
.feature p { color: var(--ink-soft); margin: 0 0 18px; }
.feature-note { font-weight: normal !important; color: var(--purple); margin: 14px 0 0 !important; }

/* ---------- Blog cards (used on the Blog index page) ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-card {
  background: var(--paper);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.blog-card .thumb {
  height: 160px;
  background: linear-gradient(135deg, #d8e9ef, #c69251);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card h3 { font-size: 18px; margin: 0 0 10px; }
.blog-card p { font-weight: 700; color: var(--muted); font-size: 14px; margin: 0 0 16px; flex: 1; }
.blog-card .read {
  align-self: flex-start;
  color: var(--purple);
  font-weight: 1000;
}
.tag {
  display: inline-block;
  margin: 0 0 12px;
  border-radius: 14px;
  padding: 5px 12px;
  background: var(--purple);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.tag.green { background: var(--green); }
.tag.blue  { background: var(--blue-2); }

/* ---------- Final CTA ---------- */
.cta {
  display: grid;
  /* Text on one side, the animated owl on the other. */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 30px;
}
.cta h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; margin: 0 0 16px; }
.cta p { color: var(--ink-soft); margin: 0; }

/* CTA owl: same layered kit + idle as the hero owl, but a normal in-flow grid
   item (not absolutely positioned). Reuses the shared owl-layer / blink / wing /
   spark / mouth-talk animation classes; the whole-owl breathe matches the home
   owl (benefitOwlBreathe). */
.cta-owl {
  position: relative;
  width: clamp(150px, 18vw, 230px);
  aspect-ratio: 560 / 586;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: benefitOwlBreathe 4.6s ease-in-out infinite;
  justify-self: end;
}
.cta-owl .owl-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cta-owl .owl-body { filter: drop-shadow(0 10px 14px rgba(0,0,0,.18)); }
@media (prefers-reduced-motion: reduce) {
  .cta-owl { animation: none; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--brown);
  color: #fff3da;
  padding: 46px clamp(24px, 5vw, 70px) 34px;
}
.footer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 30px;
}
.footer h4 { margin: 0 0 16px; color: #fff; font-size: 16px; }
.footer a, .footer p { display: block; color: #fff3da; opacity: .92; margin: 8px 0; font-weight: 700; font-size: 14px; }
.footer a:hover { opacity: 1; text-decoration: underline; }
.footer .brand img { height: 40px; margin-bottom: 12px; }
/* Social icons — styling ported from the previous site (.social-icon):
   white circle with a dark glyph; on hover the circle turns blue with a
   white glyph and scales up slightly. */
.social { display: flex; gap: 12px; margin: 14px 0 1.5rem; }
.social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: all .3s ease;
}
.social a:hover {
  background: #000;
  color: #fff;
  transform: scale(1.1);
  text-decoration: none;   /* override the generic .footer a:hover underline */
}
.footer-form { display: flex; gap: 8px; margin: 6px 0 12px; flex-wrap: wrap; }
.footer-form input {
  flex: 1;
  min-width: 150px;
  border: 0;
  border-radius: 14px;
  padding: 11px 14px;
  font-family: var(--font);
  font-size: 14px;
}
.footer-form .btn { padding: 11px 18px; font-size: 14px; }
.footer-form-success {
  background: #d4edda;
  color: #155724;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 10px;
}

.footer-copyright {
  max-width: var(--maxw);
  margin: 24px auto 0;
  padding-top: 20px;
  text-align: center;
  font-size: 13px;
  opacity: .8;
}

/* =========================================================================
   Micro-animations (scroll reveal + ambient motion)
   ========================================================================= */
.motion-item {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  filter: blur(3px);
  transition: opacity .65s ease,
              transform .65s cubic-bezier(.2,.8,.2,1),
              filter .65s ease;
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform, filter;
}
.motion-item.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.btn.motion-item.in-view {
  animation: softPop .52s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--delay, 0ms);
}

@keyframes softPop {
  0%   { transform: translateY(18px) scale(.96); }
  70%  { transform: translateY(-3px) scale(1.015); }
  100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-item, .btn {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
  .nav-links {
    position: absolute;
    top: 74px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: #fff5df;
    padding: 16px 24px;
    border-bottom: 2px solid rgba(83,50,18,.1);
    box-shadow: var(--shadow-sm);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 8px 0; }
  .nav-links .btn { margin-top: 8px; }
  .nav-toggle { display: block; }

  .hero-inner { grid-template-columns: 1fr; position: relative; }
  .feature, .cta, .testimonials, .blog-grid, .benefits-grid, .footer-grid {
    grid-template-columns: 1fr;
  }

  /* On mobile the two columns stack (paper card above the device carousel), so
     the column-seam anchor no longer applies. Shrink the owl and perch it over
     the upper-left corner of the carousel. The carousel is the last child and
     ~full-column-width tall × 34/46; anchoring to the hero-inner bottom by that
     height lands the owl on its top-left regardless of card height. */
  .owl {
    /* MOBILE SIZE — 20% smaller than before (173→138, 46.8→37.4vw, 225→180).
       Raise/lower these to taste; the middle vw value scales with screen width. */
    width: clamp(138px, 37.4vw, 180px);
    /* MOBILE HORIZONTAL POSITION — distance from the left edge. */
    left: 4%;
    right: auto;
    /* MOBILE VERTICAL POSITION — distance up from the hero bottom. Increase to
       raise the owl, decrease to drop it toward the carousel. Shifted 30px
       lower than before. */
    bottom: calc(min(52vw, 200px) - 30px);
    transform: translateX(0);
  }
  @keyframes owlBreathe {
    0%, 100% { transform: translateX(0) translateY(0)     scale(1); }
    50%      { transform: translateX(0) translateY(-2.5%) scale(1.012); }
  }
  .benefits-grid { gap: 20px; }
  .cta { text-align: center; justify-items: center; }
  .cta .stores { justify-content: center; }
  /* Owl stacks below the centred text on mobile; don't pin it to the end. */
  .cta-owl { justify-self: center; margin-top: 8px; }
  /* Discovery: stacked owl image over centered title, text, badges + note. */
  .feature { text-align: center; }
  .feature h2 { text-align: center; }
  .feature .stores { justify-content: center; }
  .panel { border-radius: 28px; padding: 32px 20px; margin-left: 12px; margin-right: 12px; }
}

@media (max-width: 560px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .email-row input { min-width: 0; width: 100%; }
}