/* Adult pages shared style (owner, 13 Oct 2026). NOT for the kids pages.
   App-icon tiles in earthy colours from the sofa photo, hanging over card corners (never inside),
   step numbers as tiles, pop-in animations, scrolling review rows. */
.tile, body .strip-item .stk, body .card .stk-card, body .principle .stk-card, body .step .n,
body .strip-item:nth-child(n) .stk, body .card:nth-child(n) .stk-card, body .principle:nth-child(n) .stk-card, body .step:nth-child(n) .n {
  --g1: #7C9A7E; --g2: #3F5A44; box-sizing: border-box; border: 0; border-radius: 28%; color: #fff;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.32), rgba(255,255,255,0) 55%), linear-gradient(160deg, var(--g1), var(--g2));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.1), 0 10px 20px -8px color-mix(in srgb, var(--g2) 80%, transparent); }
/* colour cycle: bottle green, rust, caramel, stone, espresso, WhatsApp green */
body .strip-item:nth-child(6n+2) .stk, body .card:nth-child(6n+2) .stk-card, body .principle:nth-child(6n+2) .stk-card, body .step:nth-child(6n+2) .n { --g1: #CC7A45; --g2: #8B3E12; }
body .strip-item:nth-child(6n+3) .stk, body .card:nth-child(6n+3) .stk-card, body .principle:nth-child(6n+3) .stk-card, body .step:nth-child(6n+3) .n { --g1: #BE9068; --g2: #855831; }
body .strip-item:nth-child(6n+4) .stk, body .card:nth-child(6n+4) .stk-card, body .principle:nth-child(6n+4) .stk-card, body .step:nth-child(6n+4) .n { --g1: #A69483; --g2: #615A4F; }
body .strip-item:nth-child(6n+5) .stk, body .card:nth-child(6n+5) .stk-card, body .principle:nth-child(6n+5) .stk-card, body .step:nth-child(6n+5) .n { --g1: #6E5848; --g2: #3C2E24; }
body .strip-item:nth-child(6n) .stk, body .card:nth-child(6n) .stk-card, body .principle:nth-child(6n) .stk-card, body .step:nth-child(6n) .n { --g1: #45B36B; --g2: #1E7A40; }

/* small tiles in the strip under the hero */
body .strip-item .stk, body .strip-item:nth-child(n) .stk { width: 40px; height: 40px; padding: 9px; margin: -6px 0; transform: none; }

/* card icons hang over the top corner, slightly tilted */
body .card, body .principle { position: relative; }
body .card .stk-card, body .principle .stk-card, body .card:nth-child(n) .stk-card, body .principle:nth-child(n) .stk-card {
  --r: 7deg; position: absolute; top: -26px; right: -12px; width: 64px; height: 64px; padding: 16px; margin: 0; z-index: 2; transform: rotate(var(--r)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
body .card:nth-child(even) .stk-card, body .principle:nth-child(even) .stk-card { --r: -6deg; }
body .card:nth-child(3n) .stk-card, body .principle:nth-child(3n) .stk-card { --r: 10deg; }
body .card:hover .stk-card, body .principle:hover .stk-card { transform: rotate(0) scale(1.08); }
body .card:has(.stk-card) h3, body .principle:has(.stk-card) .big { padding-right: 56px; }
body .card:has(.stk-card), body .principle:has(.stk-card) { padding-top: 34px; }

/* step numbers as tiles over the corner */
body .step { position: relative; }
body .step h3 { padding-right: 56px; }
body .step .n, body .step:nth-child(n) .n { --r: 7deg; position: absolute; top: -26px; right: -12px; width: 64px; height: 64px; display: grid; place-items: center; font-size: 1.7rem; font-weight: 800; color: #fff; transform: rotate(var(--r)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
body .step:nth-child(even) .n { --r: -6deg; }
body .step:nth-child(3n) .n { --r: 10deg; }
body .step:hover .n, body .step:nth-child(n):hover .n { transform: rotate(0) scale(1.08); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.1), 0 14px 24px -8px color-mix(in srgb, var(--g2) 80%, transparent); }
@media (max-width: 600px) {
  body .step .n, body .step:nth-child(n) .n, body .card .stk-card, body .principle .stk-card, body .card:nth-child(n) .stk-card, body .principle:nth-child(n) .stk-card { width: 56px; height: 56px; top: -22px; right: -4px; }
  body .step .n, body .step:nth-child(n) .n { font-size: 1.5rem; }
  body .card .stk-card, body .principle .stk-card, body .card:nth-child(n) .stk-card, body .principle:nth-child(n) .stk-card { padding: 14px; }
  body .strip-item .stk, body .strip-item:nth-child(n) .stk { width: 34px; height: 34px; padding: 8px; margin: -4px 0; }
}

/* pop in when scrolled into view (html.anim is set by adult.js) */
.anim .steps .n, .anim .cards4 .stk-card, .anim .principles .stk-card { opacity: 0; }
.anim .steps.in .n, .anim .cards4.in .stk-card, .anim .principles.in .stk-card { opacity: 1; animation: pop-in .9s cubic-bezier(.3,1.3,.5,1) both; }
.anim .in > :nth-child(2) .n, .anim .in > :nth-child(2) .stk-card { animation-delay: .15s; }
.anim .in > :nth-child(3) .n, .anim .in > :nth-child(3) .stk-card { animation-delay: .3s; }
.anim .in > :nth-child(4) .n, .anim .in > :nth-child(4) .stk-card { animation-delay: .45s; }
.anim .in > :nth-child(5) .stk-card { animation-delay: .6s; }
.anim .in > :nth-child(6) .stk-card { animation-delay: .75s; }
@keyframes pop-in {
  0% { opacity: 0; transform: translateY(24px) rotate(calc(var(--r, 0deg) - 40deg)) scale(0); }
  55% { opacity: 1; transform: translateY(-8px) rotate(calc(var(--r, 0deg) + 10deg)) scale(1.22); }
  78% { transform: rotate(calc(var(--r, 0deg) - 5deg)) scale(.94); }
  100% { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1); }
}

/* reviews: gently scrolling rows of real reviews */
.rv-marquee { display: grid; gap: 20px; margin-top: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rv-track { display: flex; gap: 20px; width: max-content; animation: rv-scroll 60s linear infinite; }
.rv-rev .rv-track { animation-direction: reverse; animation-duration: 70s; }
.rv-marquee:hover .rv-track { animation-play-state: paused; }
@keyframes rv-scroll { to { transform: translateX(calc(-50% - 10px)); } }
.review.rv { width: 380px; flex: none; display: grid; gap: 14px; grid-template-rows: auto 1fr auto; }
.review.rv .trn, .review.rv .tr { margin: -4px 0 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 600px) { .review.rv { width: 290px; padding: 22px; } }

@media (prefers-reduced-motion: reduce) {
  .anim .steps .n, .anim .cards4 .stk-card, .anim .principles .stk-card { opacity: 1 !important; animation: none !important; }
  .rv-track { animation: none; } .rv-row { overflow-x: auto; }
}

/* main call-to-action: soft sky button with a shine sweeping across and a gentle glow pulse */
body .btn-cta { position: relative; overflow: hidden; isolation: isolate; animation: cta-glow 2.8s ease-in-out infinite; }
body .btn-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: skewX(-20deg); animation: cta-shine 3.6s ease-in-out infinite; pointer-events: none; z-index: 1; }
body .btn-cta:hover { animation: cta-wiggle .5s ease; }
@keyframes cta-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes cta-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(159,186,214,.75), 0 8px 18px -10px rgba(31,42,58,.45); } 50% { box-shadow: 0 0 0 9px rgba(159,186,214,0), 0 12px 22px -10px rgba(31,42,58,.5); } }
@keyframes cta-wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-2deg) scale(1.04); } 50% { transform: rotate(2deg) scale(1.06); } 75% { transform: rotate(-1deg) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { body .btn-cta, body .btn-cta::after, body .btn-cta:hover { animation: none; } }