/* ============================================================
   Little Town Playhouse — HOME page flourishes
   Page-unique polish only. Builds on styles.css + the v4 kit;
   nothing here is needed by other pages. Mobile-first.
   ============================================================ */

/* Pastel ribbon colour for the flowing section dividers (this page) */
:root {
  --flow-accent: linear-gradient(90deg, var(--sky) 0%, var(--sage) 50%, var(--sun) 100%);
  /* section-rhythm washes — sky into sun, the home palette */
  --wash-1: #e1f2f8;  /* pale sky */
  --wash-2: #fdf1d0;  /* pale sun */
}

/* ---------- Hero: bolder, brighter, a touch more playful ---------- */
/* A warmer, sunnier sky wash behind the town so the hero reads brighter
   while keeping the same blue-sky family as the rest of the site. */
.hero-v2 { background: linear-gradient(180deg, #a6d8ea 0%, #c2e3ee 42%, #cfe8ef 72%, #c5e2ec 100%); }

/* Soft rolling lawn at the foot of the hero. Sits behind the town mark (it is
   the first child, so the buildings paint over it) and in front of the sky, so
   the town, the flanking trees/bushes and the wave divider all share one green
   ground line instead of floating on flat blue. Stretched full-width. */
.hero-ground {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: clamp(150px, 18vw, 200px);
  pointer-events: none;
}
/* A soft upward shadow on the lawn edge reads as a gentle horizon line, so the
   town plants its feet on real ground instead of floating on flat sky. */
.hero-ground img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 -3px 7px rgba(80,60,30,0.12)); }

/* Sticker sits above the eyebrow, centred, with a little breathing room. */
.home-hero-sticker {
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
  /* a soft halo so the stuck-on label stays crisp over the busy sky */
  box-shadow: var(--shadow-md);
}

/* Bigger, chunkier headline — the flagship voice. */
.home-hero-title {
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
/* Keep the marker highlight readable over the white halo on the hero. */
.hero-v2 .home-hero-title .hl { padding-inline: 0.12em; }

/* ---------- Stat strip ---------- */
/* The shared .grid-3 caps at 3 columns; we have four believable numbers,
   so give them their own responsive track: 2-up on phones, 4-up on wide. */
.home-stats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) {
  .home-stats { grid-template-columns: repeat(4, 1fr); }
}
.home-stats .stat .num {
  /* cycle the deep accents so the row feels lively, not monotone */
  color: var(--accent);
}
.home-stats .stat:nth-child(2) .num { color: var(--accent-sky); }
.home-stats .stat:nth-child(3) .num { color: var(--accent-sage); }
.home-stats .stat:nth-child(4) .num { color: var(--accent-coral); }
.home-stats .stat .num .unit { color: var(--ink-soft); font-weight: 700; }

/* ---------- Membership band: a crafted, premium offer card ----------
   Goal: stop the offer reading as a flat pastel box. We layer a richer,
   dimensional wash + soft glows + a faint dotted texture, frame the photo
   like a polaroid, add a price "stamp" medallion, and turn the perk dots
   into check badges. */
.home-member {
  position: relative;
  isolation: isolate;
  /* Deeper, more dimensional wash than the flat base gradient */
  background:
    radial-gradient(125% 90% at 100% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(95% 120% at 0% 105%, rgba(63,114,104,0.22) 0%, rgba(63,114,104,0) 55%),
    linear-gradient(135deg, var(--sage) 0%, var(--teal) 55%, #92c3b9 100%);
  /* Crisp inner highlight ring + soft outer lift so it reads as a card */
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.55),
    inset 0 2px 0 rgba(255,255,255,0.45),
    var(--shadow-lg);
}
/* Faint dot grid for tactile depth (clipped to the rounded card) */
.home-member::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(255,255,255,0.55) 1.3px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}
.home-member-copy { position: relative; z-index: 2; }

/* Inline "best value" flag — replaces the old corner sticker that the
   band's overflow:hidden was clipping in half. */
.member-flag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: #5a3d12; background: var(--sun);
  padding: 0.42rem 0.95rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.95rem;
}
.member-flag span { color: var(--accent-coral); font-size: 0.9rem; line-height: 1; }

/* Perks: rounded teal check badges instead of plain dots */
.home-member .member-perks li { color: var(--ink); font-weight: 500; }
.home-member .member-perks li::before {
  width: 22px; height: 22px; margin-top: 0.1rem; border-radius: 50%;
  background: var(--accent-teal)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E")
    center / 13px no-repeat;
  box-shadow: 0 3px 7px rgba(63,114,104,0.4);
}

/* Photo framed like a polaroid: white mat, gentle tilt, deep soft shadow */
.member-art { position: relative; }
.member-photo {
  position: relative;
  background: #fff;
  padding: 0.65rem;
  border-radius: calc(var(--r-lg) + 0.35rem);
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.6deg);
}
.member-photo img { box-shadow: none; }

/* Price "stamp" medallion overlapping the photo's bottom-left corner */
.member-price {
  position: absolute; z-index: 3;
  left: -0.4rem; bottom: -0.9rem;
  margin: 0;
  width: 116px; height: 116px;
  display: grid; place-content: center; gap: 0.05rem;
  text-align: center; line-height: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #ffffff 0%, #fdedca 64%, #f6d89a 100%);
  box-shadow: var(--shadow-md), inset 0 0 0 3px #fff;
  transform: rotate(-8deg);
}
.member-price::before {
  content: ""; position: absolute; inset: 9px;
  border-radius: 50%; border: 2px dashed rgba(179,90,55,0.4);
}
.member-price small {
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}
.member-price b {
  font-family: var(--font-head); font-weight: 800;
  font-size: 2rem; color: var(--accent); margin: 0.05rem 0;
}

/* Brand floaters tucked in the band's empty corners (desktop only) */
.hm-deco { position: absolute; z-index: 1; pointer-events: none; }
.hm-deco img { width: 100%; height: auto; filter: drop-shadow(0 6px 9px rgba(80,60,30,0.16)); }
.hm-deco--star { width: 36px; top: 1.5rem; right: 1.6rem; }
@media (max-width: 859px) { .hm-deco { display: none; } }

/* ---------- Parent Lounge feature (leads the reassurance section) ----------
   The gated parent lounge is a marquee amenity, so it gets a hero feature block
   above the three reassurance cards. A warm cream→coral card (deliberately
   distinct from the green membership band) carries the illustrated lounge scene
   beside the copy. Single column on phones; copy | art from 860px. */
.lounge-feature {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  align-items: center;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, var(--sun-tint) 0%, var(--coral-tint) 100%);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.8rem);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), var(--shadow-lg);
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
@media (min-width: 860px) {
  .lounge-feature { grid-template-columns: 1.05fr 0.95fr; }
}
.lounge-feature-copy { position: relative; z-index: 1; }
.lounge-feature .lounge-title { margin: 0.2rem 0 0.6rem; }

/* Inline "right inside the door" flag */
.lounge-flag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent); background: #fff;
  padding: 0.4rem 0.9rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm); margin-bottom: 0.85rem;
}
.lounge-flag img { width: 16px; height: 16px; }

/* Perks: warm coral check badges (mirrors the membership band's teal ones) */
.lounge-perks {
  list-style: none; margin: 0.5rem 0 0; padding: 0;
  display: grid; gap: 0.55rem; max-width: 44ch;
}
.lounge-perks li {
  position: relative; padding-left: 2rem;
  color: var(--ink); font-weight: 500; line-height: 1.4;
}
.lounge-perks li::before {
  content: ""; position: absolute; left: 0; top: 0.05rem;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-coral)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E")
    center / 13px no-repeat;
  box-shadow: 0 3px 7px rgba(217, 102, 61, 0.4);
}

/* Illustrated lounge scene */
.lounge-feature-art { position: relative; }
.lounge-feature-art svg {
  width: 100%; height: auto; display: block;
  max-width: 420px; margin-inline: auto;
  filter: drop-shadow(0 14px 26px rgba(80, 60, 30, 0.16));
}
/* On phones the art stacks below the copy; cap it so it never dwarfs the text. */
@media (max-width: 859px) {
  .lounge-feature-art svg { max-width: 340px; }
}

/* ---------- Explore the town: wonky cards with corner stickers ---------- */
/* Flex column so the trailing CTA pins to the bottom of every card — the three
   blurbs differ in length, and without this the buttons float at mismatched
   heights. The card art keeps its natural size; only the button is pushed down. */
.home-explore .card { position: relative; overflow: visible; display: flex; flex-direction: column; }
.home-explore .card > .btn { margin-top: auto; align-self: flex-start; }
.home-card-sticker {
  position: absolute;
  top: -0.75rem;
  left: -0.4rem;
  z-index: 3;
  font-size: 0.76rem;
  padding: 0.4rem 0.8rem;
  box-shadow: var(--shadow-md);
}
/* The shared .tilt alternates rotation by child index; nudge each sticker
   slightly the other way so they look hand-placed rather than uniform. */
.home-explore .card:nth-child(odd) .home-card-sticker  { transform: rotate(-6deg); }
.home-explore .card:nth-child(even) .home-card-sticker { transform: rotate(5deg); }

/* ---------- Inside the town: editorial "bento" photo glimpse ----------
   The home version is its own layout (the shared .pp-glimpse strip lives in
   styles.css for play-pricing). One large feature tile anchors the group; the
   rest sit around it. Consistent rounding, a hairline inner ring and a soft
   caption scrim unify the otherwise mismatched placeholder photos, and a slow
   image zoom on hover makes them feel intentional rather than dropped-in. */
.home-glimpse-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  grid-auto-rows: clamp(200px, 62vw, 320px);
}
.home-glimpse-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg, 22px);
  background: #f3ece2;
  box-shadow: var(--shadow-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home-glimpse-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Hairline inner ring + a gentle bottom warmth so each photo reads as framed */
.home-glimpse-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.home-glimpse-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.home-glimpse-tile:hover img { transform: scale(1.06); }

.home-glimpse-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 1.7rem 1rem 0.95rem;
  background: linear-gradient(0deg, rgba(40, 33, 26, 0.74) 0%, rgba(40, 33, 26, 0.28) 48%, rgba(40, 33, 26, 0) 100%);
}
.glimpse-cap {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.glimpse-cap::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

/* Small, unobtrusive honesty note under the grid */
.glimpse-note {
  margin-top: 1.1rem;
  font-size: 0.84rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* Tablet: two columns, the feature and the wide tile each span the row */
@media (min-width: 561px) {
  .home-glimpse-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: clamp(180px, 34vw, 250px);
  }
  .home-glimpse-tile--feature,
  .home-glimpse-tile--wide { grid-column: 1 / -1; }
  .home-glimpse-tile--feature figcaption { padding: 2rem 1.2rem 1.1rem; }
  .home-glimpse-tile--feature .glimpse-cap { font-size: 1.05rem; }
}

/* Desktop: true bento — big feature block on the left, three around it */
@media (min-width: 880px) {
  .home-glimpse-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, clamp(168px, 18.5vw, 240px));
    grid-auto-rows: auto;
  }
  .home-glimpse-tile--feature { grid-column: 1 / 3; grid-row: 1 / 3; }
  .home-glimpse-tile--wide { grid-column: 3 / 5; grid-row: 2; }
}

/* ---------- How a visit works ---------- */
.home-steps { overflow: hidden; } /* contain the soft blobs, no overflow */
.home-steps .step h3 { margin-bottom: 0.3rem; }
.home-steps .step p { max-width: 34ch; margin-inline: auto; }

/* ---------- Testimonials on the bold meadow band ---------- */
/* Keep the quote cards white for strong contrast against the green band;
   the .on-dark band already whitens the heading + lead above them. */
.home-quotes .quote p { color: var(--ink); }
.home-quotes .quote .who { color: var(--ink-soft); }

/* ============================================================
   Polish & guardrails
   ============================================================ */

/* No section should ever introduce horizontal overflow at any width. */
.home-stats, .home-explore, .home-quotes { max-width: 100%; }

/* Comfortable tap targets on the small-screen stat/step stacks. */
@media (max-width: 520px) {
  .home-hero-sticker { font-size: 0.82rem; }
  /* Slightly smaller price stamp, nudged fully onto the photo on phones */
  .member-price { width: 100px; height: 100px; left: 0.4rem; bottom: -0.7rem; }
  .member-price b { font-size: 1.7rem; }
}

/* ============================================================
   Mobile excellence layer — home page only
   All changes gated behind max-width so desktop is untouched.
   Builds ON TOP of the global v13 layer in styles.css.
   ============================================================ */

/* ----------------------------------------------------------
   HERO — headline, lead, CTAs + ground art at 320–480px
   ----------------------------------------------------------
   The global layer sets .hero-v2 min-height: clamp(520px,80vh,640px)
   and hides sparkles. Here we tighten the type scale, lower the
   lead's max-width so it wraps into a comfortable two-liner, and
   push the hero-ground up a touch so the town mark doesn't plant
   its feet too far below the fold. */

@media (max-width: 480px) {
  /* Pull the headline back so it never takes more than 2 lines,
     even on a 320px screen. clamp floor matches the global lead size. */
  .home-hero-title {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
    letter-spacing: -0.01em;
  }

  /* Narrower lead column so it wraps at a legible measure, not full-width. */
  .hero-v2 .lead {
    font-size: clamp(0.97rem, 3.6vw, 1.12rem);
    max-width: 32ch;
  }

  /* Shrink the ground strip so it doesn't eat into available hero height
     on short phones; the town mark still "stands" on the lawn. */
  .hero-ground {
    height: clamp(90px, 18vw, 140px);
  }

  /* Sticker: already 0.82rem above; give it slightly less vertical breathing
     room so the whole composition fits above the fold without scrolling. */
  .home-hero-sticker { margin-bottom: 0.55rem; }
}

/* On very narrow phones (320px) push the hero content padding down a touch
   so it clears the fixed header and doesn't feel squeezed at the top. */
@media (max-width: 359px) {
  .home-hero-title { font-size: 1.75rem; }
  .hero-v2 .lead  { font-size: 0.95rem; }
  /* Tighten the eyebrow so the "· Ages 2–7" tail fits on one line at 320px
     instead of orphaning a lone "7" onto the next row. */
  .hero-v2 .eyebrow { letter-spacing: 0.12em; font-size: 0.72rem; }
}

/* ----------------------------------------------------------
   HERO SCENE — phone/tablet parkland + sky (≤880px)
   ----------------------------------------------------------
   The desktop .deco floaters are display:none ≤880px (they're
   sized + placed for a wide hero and would crowd the centred
   headline on a phone). This is the small-screen counterpart:
   the same brand SVGs, but resized and re-anchored for a narrow
   screen so they FRAME the copy — sky flourishes tucked to the
   top corners, a little parkland flanking the town along the
   lawn — rather than sit behind the headline. It hands off to
   the desktop floaters cleanly at the same 880px line, and the
   drifting clouds (styles.css) animate underneath on every size.
   The .anim-* classes (bob / sway / spin-slow / twinkle) are the
   shared global keyframes; reduced-motion already stills them. */
.hero-scene-m { display: none; }

@media (max-width: 880px) {
  .hero-scene-m {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;            /* in front of the town + clouds, behind the copy (z2) */
    pointer-events: none;
    overflow: hidden;      /* clip the edge trees so they never add page overflow */
  }
  .m-deco { position: absolute; }
  .m-deco img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 7px rgba(80, 60, 30, 0.14));
  }

  /* Sky — sun, balloons, a kite and twinkles. The whole top of a phone hero is
     filled by the centred copy (eyebrow → headline → lead → CTAs), so the only
     clean sky is the band BETWEEN the CTAs and the town roofline. Anchor these
     to the bottom (like the town) so they always float just above it, in
     whatever sky the viewport gives, and spread them left→right so the centre
     (the tall café tower) stays clear. */
  .m-sun       { bottom: 195px; right: 6%;  width: 52px; }
  .m-balloon   { bottom: 198px; left: 6%;   width: 30px; }
  .m-balloon-2 { bottom: 190px; left: 19%;  width: 21px; }
  .m-kite      { bottom: 166px; left: 31%;  width: 36px; }
  .m-star-1    { bottom: 248px; left: 26%;  width: 14px; }
  .m-star-2    { bottom: 230px; right: 27%; width: 12px; }

  /* Parkland — a tree + a low flower cluster flanking each side of the town on
     the lawn (foreground: in front of the town base, behind the copy). Negative
     outer offsets let the tallest trees root just off the edge so the flanks
     read full. The mid bushes were removed: the town mark spans nearly the full
     phone width, so they sat ON the buildings and covered the logo. */
  .m-tree-l    { bottom: 28px; left: -3%;  width: 86px; }
  .m-flowers-l { bottom: 12px; left: 4%;   width: 46px; }
  .m-tree-r    { bottom: 30px; right: -3%; width: 90px; }
  .m-flowers-r { bottom: 12px; right: 3%;  width: 48px; }
}

/* Smaller phones: trim the sizes a notch so the sky band stays uncrowded and
   the parkland doesn't crowd the (proportionally larger) town. */
@media (max-width: 480px) {
  /* Sky decos re-anchored to sit in the open band just BELOW the CTAs (instead
     of poking out from behind them). Hero height itself is unchanged. */
  .m-sun       { bottom: 147px; width: 46px; }
  .m-balloon   { bottom: 156px; left: 5%;  width: 26px; }
  .m-balloon-2 { bottom: 158px; left: 18%; width: 18px; }
  .m-kite      { bottom: 122px; left: 32%; width: 32px; }
  .m-star-1    { bottom: 154px; left: 25%; width: 13px; }
  .m-star-2    { bottom: 166px; right: 28%; width: 11px; }
  .m-tree-l    { width: 74px; }
  .m-flowers-l { width: 40px; }
  .m-tree-r    { width: 78px; }
  .m-flowers-r { width: 42px; }
}

@media (max-width: 359px) {
  /* Tightest phones: drop the smallest twinkles + the second balloon and shrink
     the groves so the scene stays calm in the limited sky. */
  .m-star-1, .m-star-2, .m-balloon-2 { display: none; }
  .m-sun     { bottom: 165px; width: 40px; }
  .m-balloon { bottom: 168px; }
  .m-kite    { bottom: 144px; left: 33%; width: 28px; }
  .m-tree-l  { width: 64px; }
  .m-tree-r  { width: 66px; }
}

/* Reduced motion stills the sky animations (the global rule already sets
   animation:none); keep the pieces visible, just static. */
@media (prefers-reduced-motion: reduce) {
  .m-deco { animation: none !important; }
}

/* ----------------------------------------------------------
   EXPLORE THE TOWN — card stickers at 320–600px
   ----------------------------------------------------------
   Cards stack to 1-up below 720px (.grid-3 resets to 1fr) so the
   sticker's negative left offset (-0.4rem) risks being clipped by
   the container edge. Pull it back to zero and flatten the rotation
   slightly so it sits entirely inside the safe area of the card. */

@media (max-width: 600px) {
  .home-card-sticker {
    /* Land the sticker inside the card boundary — no negative left on narrow widths */
    left: 0.6rem;
    top: -0.65rem;
    /* Tone down rotation so it reads clearly at single-column width */
    font-size: 0.72rem;
    padding: 0.35rem 0.7rem;
  }
  /* Restore rotations scoped to phone — gentler than the desktop angles */
  .home-explore .card:nth-child(odd)  .home-card-sticker { transform: rotate(-4deg); }
  .home-explore .card:nth-child(even) .home-card-sticker { transform: rotate(3.5deg); }

  /* Make sure the card's overflow:visible doesn't leak the sticker
     beyond the section edge — cap each card's visual container. */
  .home-explore .card { margin-top: 0.8rem; }

  /* The stacked card height feels generous on desktop; give the art a
     sensible max so single-column logos don't balloon. */
  .home-explore .card-art { padding: 0.7rem; }
  .home-explore .card-art img { max-height: 140px; }
}

/* ----------------------------------------------------------
   MEMBERSHIP BAND — polaroid + medallion at 320–600px
   ----------------------------------------------------------
   The band stacks to a single column below 860px. The .member-art
   sits below the copy, and the .member-price medallion (position:
   absolute, bottom:-0.9rem, left:-0.4rem) can bleed out of the band
   on narrow phones. We re-anchor it on the photo and add bottom
   clearance inside the band so the medallion is never clipped.
   We also strip the polaroid tilt at ≤480px — a rotated photo inside
   a tight single-column layout can introduce a horizontal scroll nub. */

@media (max-width: 600px) {
  /* The parent .member-band has overflow:hidden (styles.css), which clips the
     absolutely-positioned .member-price medallion that overhangs the bottom of
     .member-art. Fix: let the band paint past its bottom edge while keeping the
     dot-grid ::before clipped to the rounded card via the inner element. */
  .home-member { overflow: visible; }
  /* Re-clip the dot-grid texture so it doesn't bleed past the band corners. */
  .home-member::before { overflow: hidden; }

  /* Give the art wrapper enough room for the medallion to breathe below it. */
  .member-art { padding-bottom: 1.6rem; }

  /* Pull the tilt back to a very gentle angle so the photo stays
     comfortably inside the section's padding on a 360px screen. */
  .member-photo { transform: rotate(-0.8deg); }

  /* Keep the medallion on-card — never outside the band's left edge. */
  .member-price {
    left: 0.5rem;
    bottom: -0.5rem;
    width: 96px;
    height: 96px;
  }
  .member-price b  { font-size: 1.65rem; }
  .member-price small { font-size: 0.58rem; }

  /* Perk list: tighten the row spacing so three items scan in one glance. */
  .home-member .member-perks { gap: 0.45rem; }

  /* The band's CTA pair is already full-width via .flex-cta ≤559px;
     add a little top margin so it breathes below the perks list. */
  .home-member .flex-cta { margin-top: 1.2rem; }
}

@media (max-width: 380px) {
  /* No tilt at all on the very smallest phones — keeps the photo
     from introducing a micro horizontal-overflow nub. */
  .member-photo { transform: none; }

  /* Medallion: smallest-phone treatment, fully on the photo. */
  .member-price {
    width: 86px;
    height: 86px;
    left: 0.3rem;
  }
  .member-price b { font-size: 1.45rem; }
}

/* ----------------------------------------------------------
   GLIMPSE GRID — bento tiles at 320–560px
   ----------------------------------------------------------
   The global breakpoint in home.css already goes 1-up below 561px
   with grid-auto-rows: clamp(200px,62vw,320px). At 360px, 62vw
   = ~223px which is comfortable; the one tweak needed is making sure
   the caption scrim text doesn't feel cramped on very narrow tiles. */

@media (max-width: 480px) {
  /* A touch less row height at the very narrow end so tiles don't
     feel disproportionately tall on a 360px screen. */
  .home-glimpse-grid { grid-auto-rows: clamp(180px, 58vw, 270px); }

  /* Tighten caption padding — leave room for the scrim gradient. */
  .home-glimpse-tile figcaption { padding: 1.2rem 0.85rem 0.75rem; }
  .glimpse-cap { font-size: 0.86rem; }

  /* Tighten the note text under the grid. */
  .glimpse-note { font-size: 0.8rem; }
}

/* ----------------------------------------------------------
   HOW A VISIT WORKS — steps at 360–760px
   ----------------------------------------------------------
   Steps are already 1-column on phones (global .steps rule). We
   add a hairline divider between steps and tighten the badge size
   so the 3-step stack doesn't tower over the page. */

@media (max-width: 600px) {
  /* Tighter step gap so three steps fit without excessive scrolling. */
  .home-steps .steps { gap: 0.9rem; }

  /* Reduce the step badge size a touch — 60px is generous on a phone. */
  .home-steps .step .step-no { width: 50px; height: 50px; font-size: 1.2rem; }

  /* Constrain the descriptive paragraph to a comfortable measure. */
  .home-steps .step p { max-width: 30ch; }
}

/* ----------------------------------------------------------
   PARENT REASSURANCE — icon chips at 360–600px
   ----------------------------------------------------------
   Three .reassure columns already stack to 1-up via .grid-3.
   We limit the icon chip size on phones so it doesn't feel huge
   on a single-column layout where it's centred and prominent. */

@media (max-width: 600px) {
  .reassure .chip { width: 60px; height: 60px; }
  .reassure .chip img { width: 28px; height: 28px; }
}

/* ----------------------------------------------------------
   TESTIMONIALS — .home-quotes (future-proof stub)
   ----------------------------------------------------------
   The band doesn't exist in the current HTML but the CSS selector
   is defined; keep the cards comfortable if it's ever added. */

@media (max-width: 600px) {
  .home-quotes .quote { padding: 1.1rem 1rem; }
  .home-quotes .quote p { font-size: 0.97rem; }
}

/* ----------------------------------------------------------
   STAT STRIP — .home-stats (future-proof stub)
   ----------------------------------------------------------
   Already 2-up on phones. Ensure numbers don't clip at 320px. */

@media (max-width: 480px) {
  .home-stats .stat .num { font-size: clamp(2rem, 9.5vw, 2.8rem); }
  .home-stats .stat .label { font-size: 0.85rem; }
}

/* ---------- Reduced motion: silence every home-only flourish ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-hero-sticker { animation: none !important; }
  .hm-deco { animation: none !important; }
  .home-explore .card:nth-child(odd) .home-card-sticker,
  .home-explore .card:nth-child(even) .home-card-sticker { transform: none !important; }
  .home-glimpse-tile,
  .home-glimpse-tile img { transition: none !important; }
  .home-glimpse-tile:hover { transform: none !important; }
  .home-glimpse-tile:hover img { transform: none !important; }
}