/* Fernleaf SmartGRO — Vision, Learning & Development Check
   Palette: Fernleaf green + sunny yellow, sky blue + pasture green, cream.
   Vibe: warm, parent-friendly, credible "behavioural check-in" tool. */
:root{
  --green:#2A7D40; --green-d:#1E5E30; --yellow:#FFC629; --yellow-d:#E9A400;
  --orange:#D9731A; /* warm category accent for the Brain/Physical result cards (14 Aug) */
  --sky:#8FD3F4; --sky-d:#2FA9DE; --pasture:#C5EA92; --pasture-d:#6FAE3F;
  --cream:#FFFDF6; --ink:#22332A; --muted:#5C6B5E; --card:#FFFFFF;
  --line:#E6EDE5; --shadow:0 10px 28px rgba(34,60,40,.12); --shadow-sm:0 4px 14px rgba(34,60,40,.10);
  --r:18px; --r-lg:24px; --wrap:460px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0}
.visually-hidden{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}
body{
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.5;
  background-image:radial-gradient(120% 60% at 50% -10%, #EAF7FF 0%, var(--cream) 46%);
  min-height:100vh; overflow-x:hidden;
}
h1,h2,h3{margin:0 0 .4em; line-height:1.15; font-weight:800}
h1{font-size:clamp(1.65rem,6.4vw,2.2rem); font-weight:900; letter-spacing:-.01em}
h2{font-size:1.3rem}
p{margin:0 0 .7em}
.muted{color:var(--muted)}
.optnote{color:#9aa79b; font-weight:700; font-size:.78em}

/* ---------- app bar ---------- */
.appbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:10px 14px; background:rgba(255,253,246,.86); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; margin:0 auto}
.logo{height:45px; width:auto; display:block}
.header-actions{display:flex; align-items:center; gap:8px; min-width:74px; justify-content:flex-end}
.lang-toggle{display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow:var(--shadow-sm); color:var(--muted); font-size:.76rem; font-weight:900; line-height:1}
.lang-choice{appearance:none; border:0; border-radius:999px; padding:6px 7px; background:transparent; color:inherit; font:inherit; cursor:pointer}
.lang-choice[aria-pressed="true"]{background:var(--green-d); color:#fff}
.lang-choice:focus-visible{outline:3px solid var(--yellow); outline-offset:2px}
.chip{
  border:1px solid var(--line); background:#fff; color:var(--green-d); font-family:inherit;
  font-weight:800; font-size:.86rem; padding:8px 12px; border-radius:999px; cursor:pointer;
  min-width:74px; box-shadow:var(--shadow-sm); white-space:nowrap;
}
.chip:active{transform:translateY(1px)}
.chip.restart{color:var(--muted)}

/* progress */
.progress{height:5px; background:var(--line); position:sticky; top:51px; z-index:20}
.progress span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--pasture-d),var(--green)); transition:width .3s ease}

/* ---------- screens ---------- */
.screen{display:none; max-width:var(--wrap); margin:0 auto; padding:16px 16px 40px; animation:fade .35s ease}
.screen.show{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font-family:inherit; font-weight:800; font-size:1rem; border:none; border-radius:14px;
  padding:14px 18px; cursor:pointer; transition:transform .08s, box-shadow .2s, filter .2s; text-decoration:none;
}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:16px 20px; font-size:1.06rem; border-radius:16px}
.btn-primary{background:linear-gradient(135deg,var(--green),var(--pasture-d)); color:#fff; box-shadow:0 8px 20px rgba(42,125,64,.32)}
.btn-primary:hover{filter:brightness(1.04)}
.btn-soft{background:#fff; color:var(--green-d); border:1.5px solid var(--line); box-shadow:var(--shadow-sm)}
.btn-ghost{background:var(--pasture); color:var(--green-d)}
.btn-text{background:transparent; color:var(--green-d); border:1.5px solid var(--green); box-shadow:none}
.btn-compact{width:auto; min-height:44px; padding:10px 14px; font-size:.9rem; border-radius:12px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:focus-visible,.chip:focus-visible,.dialog-close:focus-visible{outline:3px solid var(--yellow); outline-offset:3px}
.linkbtn{background:none; border:none; color:var(--sky-d); font-family:inherit; font-weight:800; cursor:pointer; padding:10px; width:100%; font-size:.95rem}

/* ---------- hero ---------- */
.hero{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; margin-bottom:18px}
.hero-img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; align-self:center}
.hero-media{position:relative; line-height:0; overflow:visible}
/* Titular sticker lockup over the hero KV (29-Jul round 4, client direction): the
   sticker silhouette IS the letterforms — no box. Baloo 2 bubble caps in two-tone
   Fernleaf greens with a thick white stroke hugging the letters plus a pale-green
   outer stroke (duplicate SVG text behind), slight tilt, tagline beneath.
   13-Aug (Michelle, PDF p1): now the hero's main title — anchored top-right in
   the band the removed "Tinggi Membesar Bijak Belajar" headline occupied,
   sized to clear Ayda's hair (y≈355/1080) and the girl's raised hand. */
.hero-sticker{position:absolute; right:2.5%; top:2.5%; z-index:2; margin:0; width:min(54%,236px); line-height:0}
.sticker-art{display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 5px 9px rgba(9,58,32,.38))}
.sticker-art text{text-anchor:middle; font-family:"Baloo 2","Nunito",system-ui,sans-serif; font-weight:800; stroke-linejoin:round; stroke-linecap:round}
.stk-w1{font-size:46px}
.stk-w2{font-size:56px}
.stk-back{fill:none; stroke:#C5EA92}
.stk-back.stk-w1{stroke-width:17}
.stk-back.stk-w2{stroke-width:19}
.stk-fill{paint-order:stroke; stroke:#fff}
.stk-fill.stk-w1{fill:#0C6F40; stroke-width:9}
.stk-fill.stk-w2{fill:#6FAE3F; stroke-width:10}
.stk-sub{font-family:"Nunito",system-ui,sans-serif; font-size:14.5px; font-weight:800; fill:#0C6F40; paint-order:stroke; stroke:#fff; stroke-width:3.2}
@keyframes ctaPulse{0%,100%{box-shadow:0 8px 20px rgba(42,125,64,.4)}50%{box-shadow:0 14px 34px rgba(42,125,64,.6)}}
.btn.pulse{animation:ctaPulse 1.7s ease-in-out infinite; font-size:1.14rem; padding:17px 20px}
@media(prefers-reduced-motion:reduce){.btn.pulse{animation:none}}
.video-section{margin:26px 4px 8px}
.video-section h2{text-align:center; color:var(--green-d)}
.video-section .hero-video{border-radius:var(--r-lg); box-shadow:var(--shadow-sm)}
.video-embed{position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); background:#000}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.banner-section{margin:24px 4px 8px}
/* Transparent-PNG artwork floats directly on the cream page — no card frame,
   radius, or box shadow (a rect shadow would betray the transparent corners). */
.brand-banner{display:block; width:100%; height:auto}
.hero-video{position:relative; display:block; width:100%; height:206px; border:none; padding:0; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,#BFE8FF 0%, #DFF3FF 46%, var(--pasture) 100%); overflow:hidden}
.play{position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%;
  background:rgba(255,255,255,.94); box-shadow:0 8px 24px rgba(0,0,0,.3); transition:transform .15s}
.hero-video:hover .play{transform:translate(-50%,-50%) scale(1.06)}
.play::after{content:""; position:absolute; top:50%; left:56%; transform:translate(-50%,-50%);
  border-style:solid; border-width:13px 0 13px 22px; border-color:transparent transparent transparent var(--green)}
.vchip{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); background:rgba(34,51,42,.8); color:#fff;
  font-weight:800; font-size:.78rem; padding:6px 13px; border-radius:999px; white-space:nowrap}
.yt{display:block; width:100%; aspect-ratio:16/9; border:0}
.sun{position:absolute; top:22px; right:30px; width:54px; height:54px; border-radius:50%;
  background:radial-gradient(circle,var(--yellow),#FFD862); box-shadow:0 0 0 12px rgba(255,198,41,.22), 0 0 40px rgba(255,198,41,.5)}
.hill{position:absolute; bottom:-40px; border-radius:50%}
.hill-1{left:-12%; width:75%; height:150px; background:var(--pasture-d); opacity:.55}
.hill-2{right:-14%; width:80%; height:165px; background:var(--pasture-d); opacity:.8}
.hero-pack{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); height:150px; width:auto;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.22))}
.hero-copy{padding:22px 18px}
.hero-copy .sub{color:var(--muted); font-size:1rem}
.voucher-chip{display:block; background:var(--pasture); color:var(--green-d); line-height:1.6;
  font-weight:800; font-size:.92rem; padding:11px 14px; border-radius:12px; margin:6px 0 14px}
.voucher-chip b{background:#fff; color:var(--green); padding:2px 9px; border-radius:8px; white-space:nowrap}
.microtrust{font-size:.8rem; color:#8a978b; margin:12px 2px 0; text-align:center}
.benefits{display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 14px}
.benefits span{background:#EAF6FD; color:#0a4a66; font-weight:800; font-size:.75rem; padding:5px 11px; border-radius:999px}
.benefits span::before{content:"✓ "; color:var(--pasture-d)}
#toQuizBtn{margin-top:20px}

/* how it works */
.how,.growth-chain{margin:24px 4px}
.how h2,.growth-chain h2{text-align:center; color:var(--green-d)}
/* "Why [SMARTGRO]" section-title lockup: logo enlarged to carry the stacked 2-line
   wordmark, "Why" scaled to match its visual weight, flex-centred with a slight
   optical nudge so the pair reads as one deliberate title. */
.why-title{display:flex; align-items:center; justify-content:center; gap:.42em; font-size:1.6rem; margin:34px 0 20px}
.why-logo{height:2.35em; width:auto; display:block; transform:translateY(.06em)}
.chain-sub{text-align:center; font-size:.92rem; margin:-2px 6px 14px}
.steps{display:grid; gap:10px}
.step{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:13px 14px; box-shadow:var(--shadow-sm)}
.step .n{flex:0 0 30px; height:30px; border-radius:50%; background:var(--pasture); color:var(--green-d);
  font-weight:900; display:grid; place-items:center}
.step b{display:block}
.step small{color:var(--muted); font-size:.88rem}

/* vision-led growth chain */
.chain{display:grid; gap:0}
.chain-card{display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:14px 15px; box-shadow:var(--shadow-sm)}
.chain-card .ic{flex:0 0 44px; height:44px; border-radius:50%; display:grid; place-items:center; overflow:hidden}
.chain-card .ctext b{display:block; font-size:1.02rem; margin-bottom:2px}
.chain-card .ctext small{color:var(--muted); font-size:.87rem; line-height:1.45}
.chain-link{justify-self:center; color:var(--pasture-d); font-weight:900; font-size:1.2rem; line-height:1; margin:4px 0}
.brand-icon{display:block; width:100%; height:100%; object-fit:cover; border-radius:50%}

/* ---------- cards / forms ---------- */
.card{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px 18px; margin:0 auto 16px}
.card.narrow{max-width:440px}
.field{display:block; font-weight:800; color:var(--ink); margin:10px 0 4px}
.field input{display:block; width:100%; margin-top:6px; padding:13px 14px; border:1.5px solid var(--line);
  border-radius:12px; font-family:inherit; font-size:1rem; background:#fff}
.field input:focus{outline:none; border-color:var(--sky-d)}
.field select{display:block; width:100%; margin-top:6px; padding:13px 40px 13px 14px; border:1.5px solid var(--line);
  border-radius:12px; font-family:inherit; font-size:1rem; color:var(--ink); cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235C6B5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px}
.field select:focus{outline:none; border-color:var(--sky-d)}
.field select:required:invalid{color:var(--muted)}
.milk-hint,.name-hint{margin:6px 2px 0; font-size:.84rem; color:var(--muted); font-weight:800}
.field-label{font-weight:800; margin:16px 0 8px}
.age-grid{display:grid; gap:10px}
.age-inputs{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.age-input-label{display:block; color:var(--muted); font-size:.86rem; font-weight:900}
.age-input-label input{display:block; width:100%; margin-top:6px; padding:14px 12px;
  border:1.5px solid var(--line); border-radius:12px; font-family:inherit; font-size:1.05rem; font-weight:900; color:var(--ink);
  background:#fff; text-align:center}
.age-input-label input:focus{outline:none; border-color:var(--sky-d); box-shadow:0 0 0 3px rgba(47,169,222,.16)}
.age-callout{margin:2px 0 0}
.age-callout .age-callout-hint{display:block; font-size:.84rem; color:var(--muted); font-weight:800}
.age-callout.warn .age-callout-hint{color:#B26700}
.age-callout.ok{display:flex; gap:11px; align-items:center;
  background:linear-gradient(135deg,#EAF7EE,#F4FBEC); border:1.5px solid var(--pasture-d);
  border-radius:14px; padding:12px 14px; box-shadow:var(--shadow-sm); animation:calloutPop .28s ease}
.age-callout.ok .age-callout-icon{flex:0 0 26px; height:26px; color:var(--green); display:flex}
.age-callout.ok .age-callout-icon svg{width:26px; height:26px}
.age-callout.ok .age-callout-text{min-width:0; line-height:1.35}
.age-callout.ok .age-callout-main{display:block; color:var(--green-d); font-weight:900; font-size:1rem}
.age-callout.ok .age-callout-sub{display:block; color:var(--muted); font-weight:800; font-size:.85rem; margin-top:2px}
@keyframes calloutPop{from{opacity:0; transform:scale(.97)} to{opacity:1; transform:scale(1)}}
.theme-picker{margin:16px 0 12px; padding:0; border:0}
.theme-picker legend{font-weight:800; color:var(--ink); padding:0}
.theme-picker>p{margin:3px 0 9px; color:var(--muted); font-size:.8rem}
.theme-options{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.theme-option{position:relative; min-width:0; display:flex; align-items:center; gap:7px; padding:11px 10px;
  border:2px solid var(--line); border-radius:14px; background:#fff; color:var(--green-d); cursor:pointer}
.theme-option input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.theme-option span{font-size:1.25rem; line-height:1}
.theme-option b{font-size:.78rem; line-height:1.2}
.theme-option:has(input:checked){border-color:var(--green); background:#EEF8E8; box-shadow:0 0 0 2px rgba(42,125,64,.08)}
.theme-option:has(input:focus-visible){outline:3px solid var(--yellow); outline-offset:2px}
/* ---------- quiz ---------- */
.quizcard{min-height:360px; display:flex; flex-direction:column}
.qcount{font-weight:800; color:var(--pasture-d); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 8px}
.qtext{font-size:1.32rem; color:var(--ink); margin-bottom:18px}
.options{display:grid; gap:9px}
.opt{display:flex; align-items:center; gap:12px; background:#fff; border:2px solid var(--line); border-radius:14px;
  padding:15px 16px; font-family:inherit; font-size:1.02rem; font-weight:700; color:var(--ink); cursor:pointer; text-align:left; transition:.12s}
.opt:hover{border-color:var(--pasture-d)}
.opt:active{transform:scale(.99)}
.opt .dot{flex:0 0 22px; height:22px; border-radius:50%; border:2px solid var(--line)}
.opt.sel{border-color:var(--green); background:var(--pasture)}
.opt.sel .dot{border-color:var(--green); background:var(--green); box-shadow:inset 0 0 0 3px #fff}
.reassure{text-align:center; color:#9aa79b; font-size:.82rem; margin:14px 0 0}

/* scrollable quiz */
.quiz-sticky{position:sticky; top:64px; z-index:15; background:rgba(255,253,246,.94); backdrop-filter:blur(8px); padding:9px 4px; margin:-16px -4px 10px; border-radius:0 0 14px 14px}
.qbar{height:7px; background:var(--line); border-radius:99px; overflow:hidden}
.qbar span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--pasture-d),var(--green)); transition:width .25s}
.quiz-sticky p{margin:5px 2px 0; font-weight:800; font-size:.76rem; color:var(--pasture-d); text-align:center}
.quiz-intro{text-align:center; margin-bottom:14px}
.quiz-intro h2{color:var(--green-d); margin-top:12px}
.quiz-banner{position:relative; height:96px; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(180deg,#BFE8FF,#DFF3FF 50%,var(--pasture))}
.qbanner{position:relative; margin:10px 0 13px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); line-height:0}
.qbanner img{width:100%; height:162px; object-fit:cover; object-position:center 38%; display:block}
.qcard{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:16px 15px; margin-bottom:13px}
.qhead{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.qicon{flex:0 0 46px; height:46px; border-radius:50%; display:grid; place-items:center; overflow:hidden}
.qhead h3{font-size:1.05rem; margin:0; line-height:1.32; white-space:pre-line}
.sticky-cta{position:static; margin-top:14px; box-shadow:0 10px 26px rgba(42,125,64,.42)}

/* ---------- results ---------- */
.result-head{text-align:center; margin:6px 4px 14px}
.result-head h2{color:var(--green-d); font-size:1.5rem; overflow-wrap:anywhere}
.result-personality{margin:0 0 10px; color:var(--green-d); font-size:1.72rem; line-height:1.12; font-weight:900; letter-spacing:-.01em; overflow-wrap:anywhere}
/* "THE RESULT" reveal: kicker + the child's earned SMARTGRO character. */
.result-kicker{margin:2px 0 6px; color:var(--pasture-d); font-size:.8rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase}
.result-character{margin:0 auto 10px; line-height:0}
.result-character img{width:132px; height:132px; object-fit:cover; border-radius:50%; border:4px solid #fff;
  box-shadow:0 8px 20px rgba(25,55,35,.25)}
.benchmark{padding:18px 14px 15px; overflow:hidden; background:linear-gradient(155deg,#fff,#F5FAF0)}
.benchmark-copy{text-align:center; padding:0 5px}
.benchmark h3{margin:0; color:var(--green-d); font-size:1.62rem}
.stage-ribbon{width:max-content; max-width:100%; margin:9px auto 0; padding:8px 24px 14px;
  background:var(--green-d); color:#fff; font-weight:900; font-size:1.02rem; letter-spacing:.01em;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),50% 100%,0 calc(100% - 7px))}
.msnap{display:grid; gap:14px; margin:14px auto 0; max-width:360px}
.msnap-row{background:#fff; border-radius:var(--r); box-shadow:var(--shadow-sm); padding:11px 13px 13px}
.msnap-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(84px,106px); align-items:center; gap:9px}
.msnap-name{min-width:0; font-weight:900; font-size:.98rem; line-height:1.2; color:var(--ink)}
.msnap-measures{display:block; margin-top:2px; color:var(--muted); font-size:.72rem; font-weight:700; line-height:1.3}
.msnap-head .tag{justify-self:end; width:auto; min-height:28px; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.74rem; padding:5px 10px; border-radius:999px; color:#fff; line-height:1.22; text-align:center}
.msnap-marklabel{margin:9px 0 0; font-size:.62rem; line-height:1.15; font-weight:900; letter-spacing:.04em;
  text-transform:uppercase; color:#7A887B}
.msnap-track{position:relative; height:13px; margin-top:8px; border-radius:999px; background:#EDF2EC}
.msnap-fill{display:block; height:100%; border-radius:999px; min-width:6px}
.msnap-mark{position:absolute; left:66.7%; top:-4px; bottom:-4px; width:3px; margin-left:-1.5px; border-radius:2px;
  background:var(--green-d); opacity:.85}
.msnap-eye .tag{background:var(--green-d)}
.msnap-seg{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:10px; border-radius:999px; overflow:hidden}
.msnap-seg .seg{height:22px; display:grid; place-items:center; background:#EDF2EC; color:#7A887B; font-size:.74rem; font-weight:900}
.msnap-seg .seg.on{background:var(--green); color:#fff}
.msnap-verdict{margin:9px 2px 0; font-size:.78rem; line-height:1.45; font-weight:800; color:var(--muted)}
.bands{display:grid; gap:12px; margin-bottom:16px}
.bandcard{background:#fff; border-radius:var(--r); box-shadow:var(--shadow-sm); padding:15px 16px; border-left:6px solid var(--orange)}
.bandcard .top{display:grid; grid-template-columns:34px minmax(0,1fr) minmax(88px,110px); align-items:center; gap:10px; margin-bottom:6px}
.bandcard .ic{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; overflow:hidden; flex:0 0 34px}
.bandcard .pill-name{font-weight:900; font-size:1.05rem; line-height:1.25}
.bandcard .tag{justify-self:end; width:auto; min-height:30px; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.82rem; padding:6px 14px; border-radius:999px; color:#fff; line-height:1.22; text-align:center}
.bandcard .chain{font-size:.9rem; color:var(--muted); margin:4px 0 8px}
.bandcard .msnap-track{margin-bottom:12px}
.bandcard .nutri{margin:8px 0 10px; font-size:1.08rem; line-height:1.3; font-weight:900}
.bandcard .nutri-brain{color:#E94B2C}
.bandcard .nutri-growth{color:#098C9C}
.bandcard ul{margin:8px 0 0; padding-left:18px}
.bandcard li{font-size:.88rem; margin-bottom:3px}
.bandcard .note{font-size:.76rem; color:#9aa79b; margin-top:8px}

/* Eye Protection card is green-themed — no sky-blue accents (14 Aug). */
.eyecare{border-left:6px solid var(--green)}
.eyecare-top{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.eyecare-icon{flex:0 0 34px; width:34px; height:34px; border-radius:50%; overflow:hidden}
.eyecare-top h3{margin:0; color:var(--ink); font-size:1.05rem; line-height:1.25; text-align:left; flex:1}
.eyecare-tag{width:auto; min-height:30px; display:flex; align-items:center; justify-content:center; background:var(--green-d);
  color:#fff; font-weight:900; font-size:.82rem; padding:6px 14px; border-radius:999px; line-height:1.22; text-align:center}
.eyecare-seg{margin:0 0 4px}
.eyecare .msnap-verdict{margin-bottom:12px}
.eyecare-rule{margin-top:10px; padding:10px 12px; border-radius:12px; background:#F4FBEC; color:var(--green-d);
  font-size:.85rem; font-weight:800}
.eyecare-intro{font-size:.9rem; margin:0 0 10px}
.eyecare-lutein{color:#A7358C; font-weight:900; font-size:1.08rem; line-height:1.3; margin:0 0 12px}
.eyecare-affirm p{font-size:.92rem; margin:0 0 8px}
.eyecare-keepup{font-weight:800; color:var(--green-d); margin:10px 0 2px}
.eyecare ul{margin:6px 0 0; padding-left:20px}
.eyecare li{margin-bottom:6px; font-size:.92rem}
.eyecare-lead{font-weight:800; color:var(--green-d); margin:8px 0 4px}
.eyecare-tie{font-size:.85rem; color:var(--green-d); background:#F4FBEC; border-radius:12px; padding:10px 12px; margin-top:10px}

/* Both approved disclaimers, directly beneath the Eye Care Habits results
   (13 Aug corrections, 11-Aug PDF p4). */
.eyecare-disclaimers{max-width:360px; margin:12px auto 4px}
.eyecare-disclaimers p{margin:0 0 8px; color:#7A887B; font-size:.74rem; line-height:1.45; text-align:center}

/* sources & notes */
.sources{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:2px 16px; margin:0 auto 16px}
.sources summary{cursor:pointer; font-weight:800; color:var(--green-d); padding:13px 0; list-style:none}
.sources summary::-webkit-details-marker{display:none}
.sources summary::after{content:"›"; float:right; font-size:1.2rem; transition:transform .2s}
.sources[open] summary::after{transform:rotate(90deg)}
.sources ul{margin:4px 0 12px; padding-left:18px}
.sources li{margin-bottom:9px; font-size:.85rem; line-height:1.4}
.sources a{color:var(--sky-d); font-weight:700; word-break:break-word}

/* Page 3: one clean white product tile, followed by a distinct action panel. */
.product-section{margin:24px 0 0; padding:0; overflow:hidden; background:#fff}
.product-art{margin:0; line-height:0; background:#fff}
.brand-banner-packshot{border-radius:0; background:#fff; box-shadow:none}
.commerce{padding:4px 18px 20px; text-align:center; background:transparent}
.commerce h3{font-size:clamp(1.48rem,5vw,1.75rem); color:var(--green-d)}
.commerce .muted{max-width:390px; margin:0 auto; font-size:1rem; line-height:1.5}
.commerce-emphasis{margin:7px auto 0; color:var(--green-d); font-family:"Segoe Print","Bradley Hand",cursive; font-size:clamp(1.08rem,4vw,1.3rem); font-style:italic; font-weight:800; line-height:1.25}
.pack-shot{height:150px; width:auto; margin:6px auto 12px; display:block; filter:drop-shadow(0 8px 14px rgba(0,0,0,.16))}
.action-section{margin:18px 0 22px; padding:24px 16px 18px; border:1px solid #F1C75C; border-radius:var(--r-lg); background:linear-gradient(145deg,#FFF9DC,#FFF0BD 56%,#FFE3A1); box-shadow:0 12px 26px rgba(178,111,17,.16); text-align:center}
.action-header{margin:0 0 15px; color:var(--green-d); font-size:clamp(1.55rem,5.6vw,2rem); font-weight:900; letter-spacing:.01em; line-height:1.05; text-align:center}
.cta-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:10px}
.btn-featured{background:linear-gradient(135deg,#F15A28,#E84921); color:#fff; border-radius:14px; padding:14px 10px; font-size:.95rem; font-weight:900; line-height:1.3; box-shadow:0 8px 20px rgba(206,77,30,.30)}
.btn-featured:hover{filter:brightness(1.06)}
.btn-photo-entry{max-width:310px; margin:2px auto 0; background:transparent; border:1.5px solid rgba(167,92,11,.5); color:#80500A; font-size:.86rem; padding:10px 14px; box-shadow:none}
.action-share-status{margin:9px 0 0; color:var(--green-d); font-size:.84rem; font-weight:800; line-height:1.4}
.action-section .photo-step{margin:18px auto 0}
.shop-cta{background:#fff; box-shadow:var(--shadow-sm)}
.shop-logo{display:block; width:25px; height:25px; object-fit:contain}
.shop-shopee{border:2px solid #EE4D2D; color:#B83921}
.shop-tiktok{flex-direction:column; gap:4px; border:2px solid #171717; color:#171717}
.shop-tiktok .shop-logo{width:142px; height:auto}

/* optional-photo profile-card builder */
.sharecard{
  position:relative; overflow:hidden; text-align:center; margin:26px 0 24px; padding:28px 16px 26px;
  border:2px solid #B9D9A8; border-radius:28px;
  background:
    radial-gradient(circle at 8% 3%,rgba(197,234,146,.72),transparent 28%),
    radial-gradient(circle at 96% 8%,rgba(143,211,244,.46),transparent 29%),
    linear-gradient(155deg,#F7FBEF 0%,#ECF7E8 48%,#F4FBF7 100%);
  box-shadow:0 18px 42px rgba(34,74,44,.15);
}
.sharecard::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.38;
  background-image:radial-gradient(circle,rgba(42,125,64,.28) 1px,transparent 1.5px);
  background-size:24px 24px; mask-image:linear-gradient(180deg,#000,transparent 22%);
}
.sharecard>*{position:relative; z-index:1}
.sharecard h3{max-width:560px; margin:0 auto 8px; color:var(--green-d); font-size:clamp(1.55rem,5vw,2rem)}
.builder-intro{max-width:560px; margin:0 auto 20px}
.profile-card-step{max-width:680px; min-width:0; margin:0 auto 16px; padding:0; border:0; background:transparent; text-align:left; scroll-margin-top:76px; overflow-wrap:anywhere}
.profile-card-step-content{min-width:0; padding:18px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow-sm)}
.builder-step-head{width:100%; min-width:0; display:flex; align-items:flex-start; gap:12px; margin:0 0 14px; padding:0; float:none}
.builder-step-number{flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--pasture-d)); color:#fff; font-size:1.1rem; font-weight:900; box-shadow:0 5px 13px rgba(42,125,64,.22)}
.builder-step-head>div,.builder-step-head>span:last-child{min-width:0}
.builder-step-head h4,.builder-step-head strong{display:block; margin:1px 0 2px; color:var(--green-d); font-size:1.08rem; line-height:1.25; font-weight:900}
.builder-step-head p,.builder-step-head small{display:block; margin:0; color:var(--muted); font-size:.84rem; line-height:1.42; font-weight:700}
.photo-status,.generate-status{margin:8px 2px 0; color:var(--muted); font-size:.78rem; line-height:1.4}
.photo-controls{margin-top:4px}
.photo-controls h4{margin:0 0 10px; color:var(--green-d); font-size:1rem}
.photo-drop-zone{min-height:176px; display:grid; justify-items:center; align-content:center; gap:6px; padding:18px; border:2px dashed #9FC89F;
  border-radius:17px; background:linear-gradient(145deg,#F8FCF5,#F0F8EC); color:var(--green-d); text-align:center; transition:border-color .16s,background .16s,transform .16s}
.photo-drop-zone.is-dragging{border-color:var(--green); background:#EAF7E5; transform:scale(.995)}
.photo-drop-icon{width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#fff; border:1px solid var(--line);
  color:var(--green); font-size:1.65rem; font-weight:700; box-shadow:var(--shadow-sm)}
.photo-drop-zone>strong{font-size:1.05rem}
.photo-drop-zone>span:not(.photo-drop-icon){color:var(--muted); font-size:.84rem}
.photo-drop-zone .btn{margin:7px 0 2px}
.photo-drop-zone small{max-width:460px; color:#788579; font-size:.72rem; line-height:1.35}
.photo-preview{display:grid; grid-template-columns:minmax(110px,170px) minmax(0,1fr); gap:15px; align-items:center; padding:12px;
  border:2px solid #94C990; border-radius:17px; background:#F4FAEF}
.photo-preview>canvas{display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:13px; background:#E9EFE8}
.photo-preview-copy{min-width:0}
.photo-preview-copy>strong{display:block; color:var(--green-d); font-size:1.04rem}
.photo-preview-copy>span{display:block; margin-top:3px; color:var(--muted); font-size:.78rem; line-height:1.35; overflow-wrap:anywhere}
.photo-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:11px}
.photo-processing-note{display:flex; align-items:flex-start; gap:6px; margin:11px 2px 0; color:var(--green-d); font-size:.78rem; line-height:1.4; font-weight:800}
.photo-status.success{color:var(--green-d); font-weight:800}
.photo-status.error{color:#9C3D18; font-weight:800}
.photo-consent{display:grid; grid-template-columns:22px minmax(0,1fr); gap:9px; max-width:560px; margin:14px auto 13px; padding:12px 13px;
  border:1px solid #D9B35A; border-radius:14px; background:#FFF9E7; color:#5E480E; text-align:left; font-size:.79rem; line-height:1.42; font-weight:800}
.photo-consent input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--green)}
.photo-step{text-align:center}
.photo-step .builder-step-head{text-align:left}
.generate-card-btn{max-width:520px; margin:2px auto 0; display:flex}
.generate-status{text-align:center}
.photo-step[aria-busy="true"] .generate-card-btn::before{content:""; width:18px; height:18px; border:3px solid rgba(255,255,255,.45);
  border-top-color:#fff; border-radius:50%; animation:builderSpin .7s linear infinite}
.custom-preview{max-width:560px; margin:14px auto 0; padding:14px; border:2px solid #94C990; border-radius:17px; background:#F4FAEF; text-align:center}
.custom-preview>strong{display:block; margin-bottom:10px; color:var(--green-d)}
.custom-preview img{display:block; width:min(280px,80%); height:auto; margin:0 auto 12px; border-radius:14px; box-shadow:var(--shadow-sm)}
.custom-preview-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.photo-panel-close{margin-top:14px}
.generation-failure{max-width:560px; margin:12px auto 0; padding:13px; border:1px solid #E2A07C; border-radius:14px; background:#FFF3EC; color:#7B321A; text-align:left}
.generation-failure>strong,.generation-failure>span{display:block}
.generation-failure>span{margin-top:3px; font-size:.8rem; line-height:1.4}
.generation-failure>div{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
@keyframes builderSpin{to{transform:rotate(360deg)}}
.card-output{position:relative; max-width:680px; margin:22px auto 0; scroll-margin-top:74px}
/* The approved card is a single canvas render (screen = export, no drift).
   Rounded corners are baked into the artwork, so the shadow follows the alpha. */
.result-card-canvas{display:block; width:min(560px,100%); height:auto; margin:8px auto 16px;
  filter:drop-shadow(0 16px 30px rgba(20,51,31,.28))}
.card-custom-note{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; max-width:560px;
  margin:0 auto 12px; padding:10px 14px; border:1.5px solid #94C990; border-radius:14px; background:#F4FAEF;
  color:var(--green-d); font-size:.82rem; font-weight:800; line-height:1.4}
.card-custom-note .btn{margin:0}
.share-controls{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:560px; margin:0 auto}
.ai-face-btn{max-width:560px; margin:10px auto 0; display:flex}
.sharenote{max-width:560px; margin:10px auto 0; font-size:.86rem; color:var(--green-d); font-weight:700}
#restartBig{
  display:flex; width:min(100%,560px); margin-left:auto; margin-right:auto; justify-content:center; text-align:center
}

/* Page 4: Fernleaf yellow/orange voucher sheet, with one fused promo-code +
   Shopee CTA so the code remains visible when the store action is taken. */
.voucher-sheet{width:min(420px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:22px; color:var(--ink); background:#fff; box-shadow:0 22px 70px rgba(18,55,28,.34)}
.voucher-sheet::backdrop{background:rgba(18,40,26,.62); backdrop-filter:blur(3px)}
.voucher-sheet-inner{position:relative; padding:18px 20px 22px; text-align:center; overflow:auto}
.voucher-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.voucher-sheet-kicker{margin:0; color:#C95B16; font-size:.78rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase}
.dialog-close{width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:50%; background:#FFF1CD; color:#D7571D; font-family:inherit; font-size:1.5rem; font-weight:900; line-height:1; cursor:pointer; flex:0 0 auto}
.voucher-hero{display:flex; align-items:center; gap:12px; text-align:left; background:linear-gradient(115deg,#F5A008,#F26722); border:0; border-radius:16px; padding:16px; margin-bottom:12px; box-shadow:0 9px 18px rgba(204,102,19,.22)}
.voucher-hero-logo-wrap{display:grid; place-items:center; flex:0 0 56px; width:56px; height:56px; border-radius:14px; background:#fff; box-shadow:0 4px 10px rgba(117,51,8,.20)}
.voucher-hero-logo{display:block; width:38px; height:38px; object-fit:contain}
.voucher-hero h2{margin:0; color:#fff; font-size:1.26rem; line-height:1.2}
.voucher-details{margin:0 0 14px; padding-left:21px; color:var(--ink); font-size:.89rem; line-height:1.38; text-align:left}
.btn-voucher-cta{display:flex; flex-direction:column; gap:2px; width:100%; background:linear-gradient(135deg,#F15A28,#E84921); color:#fff; border-radius:14px; padding:13px 16px; text-decoration:none; box-shadow:0 8px 20px rgba(206,77,30,.30); font-family:inherit; border:0; cursor:pointer}
.btn-voucher-cta:hover{filter:brightness(1.05)}
.voucher-cta-code{font-size:1.16rem; font-weight:900; letter-spacing:.02em; line-height:1.18}
.voucher-cta-action{font-weight:900; font-size:.98rem; line-height:1.25}
.voucher-copy-status{min-height:0; margin:0; color:#C95B16; font-size:.84rem; font-weight:800}
.voucher-copy-status:not(:empty){margin:8px 0 0}
.voucher-reminder{margin:12px 0 0; padding:11px 13px; border-radius:12px; background:#FFF8D9; border:1.5px solid #F0C84C; color:#80500A; font-size:.86rem; font-weight:800; text-align:left}

.social-row{display:flex; gap:16px; justify-content:center; margin:12px 0 18px}
.soc-ic{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .12s; text-decoration:none}
.soc-ic:active{transform:translateY(1px)}
.soc-ic svg{width:27px; height:27px}
.soc-ic.instagram{color:#E1306C}
.soc-ic.facebook{color:#1877F2}
.soc-ic.tiktok{color:#111}

/* footer */
.foot{max-width:var(--wrap); margin:10px auto 0; padding:22px 18px 40px; text-align:center; border-top:1px solid var(--line)}
.foot-logo{height:26px; opacity:.8; margin-bottom:10px}
.foot p{font-size:.76rem; color:#9aa79b}

@media(min-width:520px){
  .hero-video{height:240px}
  .hero-pack{height:172px}
}
@media(min-width:600px){
  #s-results{max-width:780px}
  #s-results>.result-head,
  #s-results>.benchmark,
  #s-results>.bands,
  #s-results>.eyecare,
  #s-results>.eyecare-disclaimers,
  #s-results>.product-section,
  #s-results>.action-section,
  #s-results>.social-row,
  #s-results>.sources,
  #s-results>#restartBig{width:100%; max-width:560px; margin-left:auto; margin-right:auto}
}
@media(max-width:420px){
  .appbar{padding-left:9px; padding-right:9px; gap:5px}
  .header-actions{gap:5px; min-width:0}
  .lang-choice{padding:6px}
  .chip{min-width:0; padding:8px 10px}
  .sharecard{margin-left:-5px; margin-right:-5px; padding:24px 10px 22px; border-radius:24px}
  .profile-card-step-content{padding:14px}
  .builder-step-head{gap:10px}
  .builder-step-number{flex-basis:34px; width:34px; height:34px}
  .photo-preview{grid-template-columns:100px minmax(0,1fr); gap:11px; padding:9px}
  .photo-actions .btn{width:100%}
}
@media(max-width:380px){
  .share-controls{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}

@media (max-width:480px){ .chip{font-size:.78rem; padding:7px 10px; min-width:auto} .logo{height:34px} .brand{min-width:0} }