/* Allowance + Ramadan and Raya guides (BM and EN). Loads after site.css and reuses its tokens:
   grey tiles, computed radius, the brand gradient on one phrase per headline, clay that moves.
   Motion is CSS only (float, hover lift) plus site.js (.reveal, [data-scrub] --q, video[data-loop]). */
:root { --s-grad: linear-gradient(90deg, #d4582a, #b8458a 55%, #5b4bd8); --s-lift: 0 24px 40px -24px rgba(29, 29, 31, .3); }

/* hero: copy and a visual, side by side from 60rem ----------------------------------------------- */
.s-hero { padding-bottom: calc(var(--sec) * .4); }
.s-hero-grid { display: grid; gap: var(--s10); align-items: center; }
.s-hero-grid > * { min-width: 0; }
.s-hero-copy > * { margin-left: 0; margin-right: 0; }
.s-hero .answer { margin-bottom: 0; }
.s-hero h1 { font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4.25rem); }
@media (min-width: 60rem) { .s-hero-grid { grid-template-columns: 1.25fr 1fr; gap: var(--s12); } }

/* the wallet stage: a real app screen with clay rewards floating around it */
.s-stage { position: relative; margin: 0 auto; width: min(100%, 440px); aspect-ratio: 1 / 1.02; background: var(--tile); border-radius: var(--radius-card); overflow: hidden; }
.s-stage-phone { position: absolute; left: 50%; bottom: -26%; width: 52%; transform: translateX(-50%); }
.s-stage-phone img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(29, 29, 31, .2)); }
.s-float { position: absolute; display: block; width: 26%; animation: s-float 6s var(--ease) infinite alternate; }
.s-float img { display: block; width: 100%; height: auto; }
.s-f1 { left: 4%; top: 10%; }
.s-f2 { right: 3%; top: 26%; width: 23%; animation-delay: -2s; }
.s-f3 { left: 7%; top: 52%; width: 21%; animation-delay: -4s; }
@keyframes s-float { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-14px) rotate(3deg); } }

/* centred hero with a wide clay scene under it (Ramadan) */
.s-hero-c { text-align: center; padding-bottom: 0; }
.s-hero-c .wrap > * { margin-left: auto; margin-right: auto; }
.s-hero-c h1 { max-width: 16ch; }
/* phones: one text left edge, hero included (site.css rule) */
@media (max-width: 39.99rem) { .s-hero-c, .s-head.center { text-align: left; } .s-hero-c .wrap > *, .s-head.center > p { margin-left: 0; margin-right: 0; } }
.s-scene { --q: 1; margin: var(--s10) 0 0; border-radius: var(--radius-card); overflow: hidden; background: #efedea; transform: scale(calc(.94 + var(--q) * .06)); transform-origin: 50% 0; }
.s-scene img, .s-scene video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 39.99rem) { .s-scene img, .s-scene video { aspect-ratio: 4 / 3; object-position: 78% 50%; } }

/* section heads and big statements -------------------------------------------------------------- */
.s-head { margin-bottom: var(--s10); }
.s-head > p { color: var(--muted); max-width: 60ch; margin-bottom: 0; }
.s-head.center > p { margin-left: auto; margin-right: auto; }
.s-say { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.3; letter-spacing: -.016em; color: var(--muted); max-width: 30ch; margin: var(--s16) 0 0; text-wrap: pretty; }
.s-say .hi { font-weight: var(--wt-strong); }
.s-note { color: var(--muted); font-size: var(--t-small); max-width: 62ch; margin: var(--s6) 0 0; }

/* allowance by age: three tiles, the amount is the hero of each -------------------------------- */
.s-ages { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .s-ages { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.s-ages li { margin: 0; background: var(--tile); border-radius: var(--radius-card); padding: var(--s8) var(--pad-card); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.s-ages li:hover { transform: translateY(-4px); box-shadow: var(--s-lift); }
.s-age { font-size: var(--t-small); font-weight: var(--wt-strong); color: var(--muted); margin-bottom: var(--s5); }
.s-amt { display: block; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.08; letter-spacing: -.024em; font-weight: var(--wt-strong); color: var(--text); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .s-amt, .s-week-n { background: var(--s-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}
@media (max-width: 39.99rem) { .s-amt { font-size: 1.875rem; } }
.s-per { display: block; margin-top: var(--s2); color: var(--muted); font-size: var(--t-small); }
.s-ages p { margin: var(--s6) 0 0; padding-top: var(--s5); border-top: 1px solid var(--border); font-size: var(--t-small); }

/* split: copy on one side, a real app screen on the other ---------------------------------------- */
.s-split { display: grid; gap: var(--s10); align-items: center; }
.s-split > * { min-width: 0; }
.s-split-copy > p { color: var(--muted); }
.s-split-copy > p b, .s-split-copy > p strong { color: var(--text); }
.s-shot { position: relative; margin: 0; background: var(--tile); border-radius: var(--radius-card); overflow: hidden; padding: var(--s10) var(--s8) 0; max-height: 560px; display: flex; justify-content: center; }
.s-shot img { display: block; width: min(100%, 300px); height: auto; filter: drop-shadow(0 24px 34px rgba(29, 29, 31, .18)); transition: transform .5s var(--ease); }
.s-shot:hover img { transform: translateY(-10px); }
@media (min-width: 60rem) { .s-split { grid-template-columns: 1.1fr 1fr; gap: var(--s16); } .s-split-rev .s-shot { order: -1; } }
@media (max-width: 39.99rem) { .s-shot { max-height: 420px; padding: var(--s8) var(--s6) 0; } .s-shot img { width: 78%; } }

/* two parts of the allowance: icon beside text, no card inside a card */
.s-duo { list-style: none; padding: 0; margin: var(--s6) 0 var(--s6); max-width: none; display: grid; gap: var(--s5); }
.s-duo li { margin: 0; display: grid; grid-template-columns: 64px 1fr; gap: var(--s4); align-items: start; padding-top: var(--s5); border-top: 1px solid var(--border); }
.s-duo img { width: 64px; height: 64px; transition: transform .5s var(--ease); }
.s-duo li:hover img { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.s-duo b { display: block; font-weight: var(--wt-strong); margin-bottom: var(--s1); }
.s-duo span { color: var(--muted); font-size: var(--t-small); }

/* save / spend / give and the Ramadan rota: tiles led by a large clay object --------------------- */
.s-trio { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .s-trio { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.s-trio li, .s-rota li { margin: 0; background: var(--tile); border-radius: var(--radius-card); padding: var(--s8) var(--pad-card); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.s-trio li:hover, .s-rota li:hover { transform: translateY(-4px); box-shadow: var(--s-lift); }
.s-clay { display: block; width: 120px; height: 120px; margin: 0 0 var(--s5) -8px; transition: transform .5s var(--ease); }
.s-trio li:hover .s-clay, .s-rota li:hover .s-clay, .s-weeks li:hover .s-clay { transform: translateY(-6px) rotate(-6deg) scale(1.06); }
.s-trio h3, .s-rota h3 { margin: 0 0 var(--s2); }
.s-trio p, .s-rota p { margin: 0; color: var(--muted); font-size: var(--t-small); }
@media (max-width: 45.99rem) {
  .s-trio li, .s-rota li { display: grid; grid-template-columns: 72px 1fr; column-gap: var(--s4); align-items: start; padding: var(--s6) var(--s5); }
  .s-trio li > picture, .s-rota li > picture { grid-row: 1 / span 4; grid-column: 1; }
  .s-trio li > :not(picture), .s-rota li > :not(picture) { grid-column: 2; }
  .s-trio .s-clay, .s-rota .s-clay { width: 72px; height: 72px; margin: 0; }
}

.s-rota { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .s-rota { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 64rem) { .s-rota { grid-template-columns: repeat(6, 1fr); } .s-rota li { grid-column: span 2; } .s-rota li:nth-child(n+4) { grid-column: span 3; } }
.s-when { display: block; font-size: var(--t-meta); font-weight: var(--wt-strong); color: var(--muted); margin-bottom: var(--s2); }
.s-who { display: inline-flex; align-items: center; min-height: 28px; margin-top: var(--s4); padding: 0 var(--s3); border-radius: var(--radius-pill); background: var(--bg); color: var(--text); font-size: var(--t-meta); font-weight: var(--wt-medium); }
.s-trio .s-who { margin-top: var(--s4); }
@media (max-width: 45.99rem) { .s-who { justify-self: start; } }

/* Raya cleaning: a week by week timeline of tiles ------------------------------------------------ */
.s-weeks { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s4); grid-template-columns: 1fr; position: relative; }
@media (min-width: 46rem) { .s-weeks { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 64rem) { .s-weeks { grid-template-columns: repeat(4, 1fr); } }
.s-weeks li { margin: 0; position: relative; background: var(--tile); border-radius: var(--radius-card); padding: var(--s8) var(--pad-card); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.s-weeks li:hover { transform: translateY(-4px); box-shadow: var(--s-lift); }
.s-weeks .s-clay { width: 96px; height: 96px; margin: 0 0 var(--s5) -6px; }
.s-week-n { display: block; font-size: var(--t-h2); line-height: 1; letter-spacing: -.02em; font-weight: var(--wt-strong); color: #b8458a; margin-bottom: var(--s3); }
.s-weeks b { display: block; font-size: var(--t-h3); line-height: 1.24; letter-spacing: -.01em; font-weight: var(--wt-strong); margin-bottom: var(--s2); }
.s-weeks p { margin: 0; color: var(--muted); font-size: var(--t-small); }
.s-weeks .s-week-last { background: var(--text); color: var(--on-primary); }
.s-weeks .s-week-last p { color: rgba(255, 255, 255, .78); }
.s-weeks .s-week-last .s-week-n { background: none; color: #ffffff; -webkit-background-clip: border-box; background-clip: border-box; }
/* the thread between weeks: a hairline joining the tiles on wide screens */
@media (min-width: 64rem) {
  .s-weeks::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: var(--border); z-index: -1; }
}
@media (max-width: 45.99rem) {
  .s-weeks li { display: grid; grid-template-columns: 72px 1fr; column-gap: var(--s4); padding: var(--s6) var(--s5); }
  .s-weeks li > picture { grid-row: 1 / span 4; grid-column: 1; }
  .s-weeks li > :not(picture) { grid-column: 2; }
  .s-weeks .s-clay { width: 72px; height: 72px; margin: 0; }
  .s-week-n { font-size: var(--t-small); margin-bottom: var(--s1); }
  .s-weeks b { font-size: var(--t-body); }
}

/* feature tile: a generated clay still beside its words (duit raya) ------------------------------ */
.s-feature { display: grid; gap: var(--s8); align-items: center; background: var(--tile); border-radius: var(--radius-card); padding: var(--s8) var(--pad-card); overflow: hidden; }
.s-feature > * { min-width: 0; }
.s-feature h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
.s-feature p { color: var(--muted); }
.s-feature p:last-child { margin-bottom: 0; }
.s-feature .hi { color: var(--text); }
.s-art { --q: 1; margin: 0; justify-self: center; width: min(100%, 420px); transform: translateY(calc((1 - var(--q)) * 40px)) rotate(calc((1 - var(--q)) * -8deg)); }
.s-art img { display: block; width: 100%; height: auto; animation: s-float 7s var(--ease) infinite alternate; }
@media (min-width: 52rem) { .s-feature { grid-template-columns: 1fr 1.2fr; gap: var(--s12); padding: var(--s12) var(--s16) var(--s12) var(--s10); } }

/* two equal columns of plain text, a hairline over each ------------------------------------------ */
.s-pair { display: grid; gap: var(--s10) var(--s12); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .s-pair { grid-template-columns: repeat(2, 1fr); } }
.s-pair > div { padding-top: var(--s6); border-top: 1px solid var(--border); min-width: 0; }
.s-pair h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: 1.15; }
.s-pair p { color: var(--muted); }

/* two tiles side by side, an image at the foot of each (duit raya, balik kampung) --------------- */
.s-tiles { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .s-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
.s-tiles > div { background: var(--tile); border-radius: var(--radius-card); padding: var(--s8) var(--pad-card) 0; display: flex; flex-direction: column; overflow: hidden; min-width: 0; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.s-tiles > div:hover { transform: translateY(-4px); box-shadow: var(--s-lift); }
.s-tiles p { color: var(--muted); font-size: var(--t-small); }
.s-tiles h3 { margin-bottom: var(--s3); }
.s-tile-art { display: block; margin: auto auto 0; padding-top: var(--s4); width: min(100%, 280px); }
.s-tile-art img { display: block; width: 100%; height: auto; }
.s-tile-art.is-art { padding-bottom: var(--s8); width: min(90%, 320px); }
.s-tile-art.is-phone { max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.s-tile-art.is-phone img { filter: drop-shadow(0 20px 30px rgba(29, 29, 31, .16)); transition: transform .5s var(--ease); }
.s-tiles > div:hover .s-tile-art.is-phone img { transform: translateY(-8px); }

/* seasons: tag capsules (not links) under a statement -------------------------------------------- */
.s-tags { list-style: none; padding: 0; margin: var(--s6) 0 0; max-width: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.s-tags li { margin: 0; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4); border-radius: var(--radius-pill); background: var(--tile); font-size: var(--t-small); font-weight: var(--wt-medium); color: var(--text); }
.s-close { text-align: left; }
.s-close .badges { margin-top: var(--s8); }
.s-close .more-links { justify-content: flex-start; margin-left: 0; }

/* lead clay beside a section title */
.s-mark { display: block; width: 88px; height: 88px; margin-bottom: var(--s4); }

@media (prefers-reduced-motion: reduce) {
  .s-float, .s-art img { animation: none; }
  .s-art, .s-scene { transform: none; }
  .s-ages li, .s-trio li, .s-rota li, .s-weeks li, .s-tiles > div, .s-clay, .s-duo img, .s-shot img { transition: none; }
}