/*
 * Head Up Delivery Analysis - front end.
 * SurveyHeart-style look (Nunito Sans, blue pills with glow, soft motion). Everything is
 * scoped under .hua so the WordPress theme is not affected, and theme styles are reset.
 * Components are written as ".hua .hua-x" so they outrank the ".hua button" reset and theme button styles.
 */
.hua{
  /* Lighter, friendlier tone (0.3.0): mint page, soft green-grey text, light lines. */
  --ink:#23382B; --ink-2:#5B6B61; --ink-3:#8A9A90; --page:#F4FBF6;
  /* One green family (Kelvin, 9 Oct 2026, option 2): fresh green #3CC874 for buttons and highlights,
     #2DB463 for selected answers (--pick, easier to read with white text), #1E8A4C for green text on white. */
  --band:#EDF8F1; --soft:#E1F3E7; --line:#E3EFE6; --sel:#E9F8EF; --sel-line:#A8E3BC;
  --grab:#3CC874; --blue:#3CC874; --blue-dark:#1E8A4C; --glow:rgba(60,200,116,.22); --pick:#2DB463; --hover:#34B868;
  --good:#2E9A5B; --bad:#D0433A; --bad-soft:#FDECEB;
  /* score colours: soft green / fresh lime / soft amber / soft coral */
  --sc-strong:#5DBB6B; --sc-good:#9BCF6A; --sc-work:#F28A2E; --sc-weak:#E5484D; /* below 60: orange (40-59) and red (<40), urgent */
  --ease:cubic-bezier(0.23,1,0.32,1); /* strong ease-out: quick start, very soft landing */
  --ease-in-out:cubic-bezier(0.77,0,0.175,1); /* strong ease-in-out: things that move across the screen (progress bar) */
  --ease-drawer:cubic-bezier(0.32,0.72,0,1); /* iOS-like sheet curve: big entrances that travel far (screen float-up) */
  --warn:#C96A12; /* amber dark enough to read as a big number on white (--sc-work is too light): caution */
  font-family:'Nunito Sans','Noto Sans SC',system-ui,-apple-system,'PingFang SC',sans-serif; /* Noto Sans SC = smooth heavy Chinese (PingFang stops at semibold) */
  font-size:16px; line-height:1.6; color:var(--ink); background:var(--page);
  max-width:620px; margin:0 auto; -webkit-font-smoothing:antialiased;
}
.hua *,.hua *::before,.hua *::after{box-sizing:border-box}
.hua h1,.hua h2,.hua h3,.hua p,.hua ol{margin:0}
.hua h1,.hua h2,.hua h3{font-family:inherit;color:var(--ink);line-height:1.15;letter-spacing:-.01em;font-weight:800;text-transform:none}
.hua button,.hua input{font:inherit;color:inherit;letter-spacing:normal;text-transform:none}
.hua button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.hua b{font-weight:800}
.hua a{color:var(--blue)}
.hua :focus-visible{outline:3px solid #A8E3BC;outline-offset:2px}
.hua [hidden]{display:none!important}

/* top line */
.hua .hua-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border-bottom:1px solid var(--line)}
.hua .hua-brand{font-weight:900;font-size:14px;display:flex;align-items:center;gap:8px}
.hua .hua-brand::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--grab);box-shadow:inset 0 -5px 0 #2DB463}
.hua .hua-brand.hua-has-logo::before{display:none}
.hua .hua-logo{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:0 0 44px;display:block} /* full Head Up logo (mark + HEADUP) */
.hua .hua-seg{display:flex;gap:2px;background:var(--band);border-radius:999px;padding:3px}
.hua .hua-seg button{white-space:nowrap;border:0;background:transparent;color:var(--ink-2);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;transition:background .22s,color .22s}
.hua .hua-seg button[aria-pressed="true"]{background:var(--blue);color:#fff;box-shadow:0 4px 10px var(--glow)}

/* screens + motion */
.hua .hua-screen{display:flex;flex-direction:column;min-height:calc(100dvh - 140px)}
.hua .hua-pad{padding:32px 20px 24px}
.hua .hua-pop{animation:hua-pop .28s var(--ease)}
@keyframes hua-pop{40%{transform:scale(.97)}}

/* start */
.hua .hua-hero h1{font-size:clamp(32px,8vw,44px);margin-bottom:14px}
.hua .hua-hero > p{color:var(--ink-2);font-size:16.5px;margin-bottom:24px}
.hua .hua-stats{display:flex;border:1px solid var(--line);border-radius:16px;padding:14px 6px;margin-bottom:22px}
.hua .hua-stats div{flex:1;text-align:center;padding:0 6px}
.hua .hua-stats div + div{border-left:1px solid var(--line)}
.hua .hua-stats b{display:block;font-size:24px;font-weight:900;line-height:1.1;color:var(--blue)}
.hua .hua-stats span{font-size:12.5px;color:var(--ink-2);font-weight:600}
.hua .hua-gets{display:grid;gap:12px}
.hua .hua-gets > div{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;border:1px solid var(--line);border-radius:16px;padding:16px;transition:transform .22s,box-shadow .22s}
.hua .hua-gets > div:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px var(--glow)}
.hua .hua-gets i{width:48px;height:48px;border-radius:12px;background:var(--soft);color:var(--blue);display:grid;place-items:center}
.hua .hua-gets b{display:block;font-size:16.5px}
.hua .hua-gets span{color:var(--ink-2);font-size:14px}

/* buttons */
.hua .hua-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 24px;border-radius:999px;border:0;font-weight:800;font-size:16px;text-decoration:none;line-height:1.2;text-align:center;transition:transform .22s,box-shadow .22s,background .22s}
.hua .hua-btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px var(--glow)}
.hua .hua-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(60,200,116,.3)}
.hua .hua-btn-primary:active{transform:scale(.98)}
.hua .hua-btn-wa{background:#25D366;color:#063B22!important;box-shadow:0 6px 16px rgba(37,211,102,.26)}
.hua .hua-btn-wa:hover{transform:translateY(-2px)}
.hua .hua-btn:disabled,.hua .hua-btn[aria-disabled="true"]{background:#C9D9CF;color:#fff!important;box-shadow:none;transform:none;cursor:not-allowed}
.hua .hua-btn[aria-disabled="true"]{cursor:pointer} /* looks not ready, but tapping it shows what is still missing */
.hua .hua-btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.hua .hua-btn-ghost:hover{border-color:var(--sel-line)}
.hua .hua-block{width:100%}
.hua .hua-linkbtn{border:0;background:none;color:var(--ink-2);font-weight:700;text-decoration:underline;padding:8px}

/* sticky actions: never hidden by Safari's bottom bar */
.hua .hua-actions{position:sticky;bottom:0;z-index:20;margin-top:auto;display:flex;gap:10px;padding:14px 20px;padding-bottom:calc(14px + env(safe-area-inset-bottom));background:rgba(246,251,247,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 -1px 0 var(--line)}
/* Clear space between the last question/field and the button bar, so the last answers are never hidden behind it. */
.hua .hua-screen > :nth-last-child(2){margin-bottom:36px}
.hua .hua-actions .hua-btn-ghost{flex:0 0 auto}
.hua .hua-actions .hua-btn-primary,.hua .hua-actions .hua-btn-wa{flex:1}

/* progress + headings */
.hua .hua-progress{padding:16px 20px 0}
.hua .hua-meta{display:flex;justify-content:space-between;font-size:13px;font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums} /* digits keep their width while the % counts */
.hua .hua-meta span:last-child{color:var(--blue)}
.hua .hua-track{height:8px;border-radius:999px;background:var(--soft);margin-top:8px;overflow:hidden}
.hua .hua-track i{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#B6EBC9,var(--grab))} /* full width, slid into place with transform by app.js (no relayout) */
.hua .hua-head{padding:22px 20px 2px}
.hua .hua-head h2{font-size:28px}
.hua .hua-head p{color:var(--ink-2);margin-top:6px;font-size:15px}

/* questions */
.hua .hua-q{padding:20px 20px 0}
.hua .hua-q h3{font-size:17.5px;font-weight:800;margin-bottom:12px}
.hua .hua-hint{font-size:13.5px;color:var(--ink-3);margin:-8px 0 12px!important}
/* tip callout under each screen title (text + matching picture), lead question, campaign name tags */
.hua .hua-tip{display:flex;align-items:center;gap:14px;margin:14px 20px 4px;padding:14px 14px 14px 16px;background:#fff;border:1px solid #D5EFDE;border-radius:14px} /* soft outline, no side stripe */
.hua .hua-tip p{flex:1;min-width:0;font-size:14.5px;line-height:1.55;color:var(--ink-2);font-weight:600}
.hua .hua-tip p{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
.hua .hua-tip .hua-stat{font-size:clamp(34px,9vw,42px);line-height:1;font-weight:900;color:var(--blue);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hua .hua-tip p span{min-width:0}
.hua .hua-art{color:var(--blue)}
/* warning callout (e.g. the 1% cancellation red line) */
.hua .hua-tip-red{background:#FFF8F6;border-color:#F6D3CC}
.hua .hua-tip-red .hua-stat{color:#D2533F}
.hua .hua-tip-red .hua-art{color:#E0604B;--art-bg:#FDE7E3}
/* Tip numbers count to their value (app.js runStat): the digits keep a reserved width so the words beside
   never shift, the red-line card warms up as it nears 1%, and it gives one soft glow when it lands. */
.hua .hua-tip .hua-n{display:inline-block;text-align:right}
.hua .hua-tip{transition:background-color .5s ease,border-color .5s ease}
.hua .hua-tip.hua-landed{animation:hua-tip-glow .9s ease-out}
@keyframes hua-tip-glow{from{box-shadow:0 0 0 0 #F6D3CC,0 10px 24px -12px rgba(194,65,45,.28),0 2px 6px -1px rgba(194,65,45,.08)}to{box-shadow:0 0 0 10px rgba(246,211,204,0),0 10px 24px -12px rgba(194,65,45,.28),0 2px 6px -1px rgba(194,65,45,.08)}}
@media (max-width:420px){.hua .hua-tip{align-items:center}.hua .hua-tip p{grid-template-columns:1fr;gap:4px}}
.hua .hua-art{flex:0 0 64px;display:block;line-height:0}
.hua .hua-lead{margin:18px 20px 0!important;font-size:21px;line-height:1.3;font-weight:800;color:var(--ink);text-wrap:balance}
.hua .hua-note{margin:12px 20px 0!important;font-size:15px;color:var(--ink-2)}
.hua .hua-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 12px!important}
.hua .hua-tags span{font-size:13px;color:var(--ink-2);font-weight:700;margin-right:2px}
.hua .hua-tags b{font-size:13px;font-weight:800;color:var(--blue-dark);background:var(--sel);border:1px solid var(--sel-line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.hua .hua-opts{display:grid;gap:10px}
.hua .hua-cols{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.hua .hua-opt{display:flex;align-items:center;gap:12px;min-height:54px;width:100%;text-align:left;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-size:15.5px;font-weight:700;transition:border-color .22s,background .22s,transform .22s,box-shadow .22s}
.hua .hua-opt:hover{border-color:var(--sel-line)}
.hua .hua-dot{flex:0 0 22px;height:22px;border-radius:50%;border:2px solid #BDC7D3;display:grid;place-items:center;background:#fff;transition:border-color .2s ease,background-color .2s ease}
.hua .hua-multi .hua-dot{border-radius:6px}
.hua .hua-opt[aria-pressed="true"]{border-color:var(--sel-line);background:var(--sel);color:var(--blue-dark);box-shadow:0 6px 16px -12px var(--glow)}
.hua .hua-opt[aria-pressed="true"] .hua-dot{border-color:var(--grab);background:var(--grab)}
.hua .hua-opt[aria-pressed="true"] .hua-dot::after{content:"";width:9px;height:5px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.hua .hua-skipnote{margin:18px 20px 0!important;font-size:13.5px;color:var(--blue-dark);background:var(--band);border-radius:12px;padding:10px 14px;font-weight:700}

/* fields */
.hua .hua-field{padding:12px 20px 0}
.hua .hua-field > label,.hua .hua-label{display:block;font-weight:800;font-size:15px;margin-bottom:6px}
.hua input[type=text],.hua input[type=tel]{width:100%;min-height:54px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-size:16px;box-shadow:none;transition:border-color .22s,box-shadow .22s}
.hua input[type=text]:focus,.hua input[type=tel]:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(60,200,116,.12);outline:none}
.hua .hua-linkrow{display:flex;gap:8px}
.hua .hua-linkrow input{flex:1;min-width:0}
.hua .hua-paste{flex:0 0 auto;border:1.5px solid var(--blue);background:var(--soft);color:var(--blue-dark);border-radius:14px;padding:0 16px;font-weight:800}
.hua .hua-phone{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.hua .hua-phone:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(60,200,116,.12)}
.hua .hua-phone input{border:0;border-radius:0;box-shadow:none!important}
.hua .hua-small{font-size:13px;color:var(--ink-3);margin-top:6px!important}
.hua .hua-center{text-align:center}
.hua .hua-ok{color:var(--good);font-weight:800;font-size:14px;margin-top:8px!important}
.hua .hua-err{color:var(--bad);background:var(--bad-soft);border-radius:12px;padding:10px 12px;font-weight:700;font-size:14px;margin-top:8px!important}
/* label.hua-consent beats the general ".hua-field > label{display:block}" rule */
.hua .hua-field > label.hua-consent,.hua .hua-consent{display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-2);font-weight:600;background:var(--band);border-radius:14px;padding:16px;margin:0;cursor:pointer}
/* Reset theme checkbox styling so the box never overlaps the text. */
.hua .hua-consent input[type=checkbox]{-webkit-appearance:checkbox;appearance:auto;position:static;flex:0 0 22px;width:22px;height:22px;min-width:22px;margin:1px 0 0;padding:0;border:0;background:none;box-shadow:none;accent-color:var(--blue)}
.hua .hua-consent input[type=checkbox]::before,.hua .hua-consent input[type=checkbox]::after{content:none;display:none}
.hua .hua-consent span{flex:1;min-width:0}
.hua .hua-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* video tutorial */
.hua .hua-howto{margin:16px 20px 0;border:1px solid var(--line);border-radius:16px;background:var(--band);overflow:hidden}
.hua .hua-howto summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:800;color:var(--blue-dark);display:flex;align-items:center;gap:10px}
.hua .hua-howto summary::-webkit-details-marker{display:none}
.hua .hua-howto summary::before{content:"▶";display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;flex:0 0 28px}
.hua .hua-howto[open] summary::before{content:"▼"}
.hua .hua-video{display:block;width:100%;max-width:280px;aspect-ratio:23/50;margin:0 auto 12px;border-radius:14px;background:var(--soft)} /* phone screen recordings (~0.46 wide:high) */
.hua .hua-tabs{margin:0 16px 12px;width:max-content;max-width:calc(100% - 32px)}
.hua .hua-howto ol{padding:0 16px 16px 36px}
.hua .hua-howto li{margin:4px 0;font-size:14.5px}

/* instant report (done screen): score ring, headline bars, top 3 leaks, locked RM card */
.hua .hua-report{padding-bottom:28px}
.hua .hua-report > *:not(.hua-head){margin-left:20px;margin-right:20px}
.hua .hua-scorecard{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:8px 18px;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}
.hua .hua-ring{--c:var(--sc-strong);flex:0 0 104px;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p) * 1%),var(--soft) 0)}
.hua .hua-ring span{width:82px;height:82px;border-radius:50%;background:#fff;display:grid;place-items:center;align-content:center;line-height:1}
.hua .hua-ring b{font-size:32px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.hua .hua-ring small{font-size:12px;color:var(--ink-3);font-weight:700;margin-top:2px}
.hua .hua-ring.hua-good{--c:var(--sc-good)} .hua .hua-ring.hua-work{--c:var(--sc-work)} .hua .hua-ring.hua-weak{--c:var(--sc-weak)}
.hua .hua-score-txt{min-width:0;display:grid;gap:6px;justify-items:start}
.hua .hua-risk{display:inline-block;font-size:14px;font-weight:900;border-radius:999px;padding:4px 12px;background:#FDE7E3;color:#C2412D;border:1px solid #F6C3B9}
.hua .hua-r2 .hua-risk{background:#FEF1E1;color:#B4610E;border-color:#F7D3A8}
.hua .hua-r3 .hua-risk{background:#FBF4DC;color:#8A6A00;border-color:#EEDD9E}
.hua .hua-r4 .hua-risk,.hua .hua-r5 .hua-risk{background:var(--sel);color:var(--blue-dark);border-color:var(--sel-line)}
.hua .hua-level{font-size:16px;font-weight:800;color:var(--ink);line-height:1.3}
.hua .hua-steps5{display:flex;gap:4px}
.hua .hua-steps5 i{width:22px;height:6px;border-radius:999px;background:var(--soft)}
.hua .hua-steps5 i.on{background:var(--blue)}
.hua .hua-r1 .hua-steps5 i.on{background:var(--sc-weak)} .hua .hua-r2 .hua-steps5 i.on{background:var(--sc-work)}
.hua .hua-score-txt .hua-small{margin-top:0!important}
.hua .hua-verdict{grid-column:1 / -1;font-size:15.5px;line-height:1.55;font-weight:700;color:var(--ink);margin-top:6px!important}
.hua .hua-worst{margin-top:14px;background:#FDF0EE;border:1px solid #F6D3CC;border-radius:14px;padding:14px 16px}
.hua .hua-worst p{font-size:15.5px;line-height:1.6;color:#5C2A22;font-weight:600}
.hua .hua-worst b{color:#C2412D;font-weight:900}
.hua .hua-segs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hua .hua-seg-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px}
.hua .hua-seg-card p{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;font-weight:700;color:var(--ink-2);line-height:1.3}
.hua .hua-seg-card b{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;color:#3E9A4B}
.hua .hua-seg-card b.hua-good{color:#6E9F2F} .hua .hua-seg-card b.hua-work{color:#C07A10} .hua .hua-seg-card b.hua-weak{color:#D2533F}
.hua .hua-bar-track{height:8px;border-radius:999px;background:var(--soft);overflow:hidden}
.hua .hua-bar-track i{display:block;height:100%;border-radius:999px;background:var(--sc-strong)}
.hua .hua-bar-track i.hua-good{background:var(--sc-good)} .hua .hua-bar-track i.hua-work{background:var(--sc-work)} .hua .hua-bar-track i.hua-weak{background:var(--sc-weak)}
.hua .hua-rh{font-size:18px;margin-top:24px;margin-bottom:10px}
.hua .hua-probs{list-style:none;padding:0;display:grid;gap:10px}
.hua .hua-probs li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;background:#FDF0EE;border:1px solid #F6D3CC;border-radius:12px;padding:13px 14px;font-size:15.5px;line-height:1.5;font-weight:700;color:#5C2A22}
.hua .hua-probs li::before{content:"!";width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#E0604B;color:#fff;font-weight:900;font-size:14px;margin-top:1px} /* red "!" (Kelvin, 9 Oct 2026) */
@media (max-width:340px){.hua .hua-segs{grid-template-columns:1fr}}
@media (max-width:480px){.hua .hua-seg-card{padding:11px 12px}.hua .hua-seg-card p{font-size:13px;flex-direction:column;align-items:flex-start;gap:2px}.hua .hua-seg-card b{font-size:18px}}
.hua .hua-strengths{display:flex;flex-wrap:wrap;gap:8px}
.hua .hua-strengths span{background:var(--sel);color:var(--blue-dark);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:700}
.hua .hua-lock{margin-top:24px;margin-bottom:18px;border:1.5px dashed var(--sel-line);background:#fff;border-radius:18px;padding:18px;display:grid;gap:12px}
.hua .hua-lock-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:var(--ink)}
.hua .hua-lock-title svg{color:var(--blue)}
.hua .hua-locked{background:var(--band);border-radius:14px;padding:14px 16px;font-size:14px;font-weight:700;color:var(--ink-2)}
.hua .hua-blur{filter:blur(7px);user-select:none;-webkit-user-select:none;pointer-events:none;font-size:24px;font-weight:900;color:var(--ink);margin:2px 0 10px!important}
.hua .hua-blur-sm{font-size:15px;margin-bottom:0!important}
.hua .hua-lock .hua-small{margin-top:0!important;font-size:13.5px;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){.hua *,.hua *::before,.hua *::after{animation:none!important;transition-property:opacity,color,background-color,border-color!important;transition-duration:.2s!important}.hua .hua-enter{animation:hua-fade .2s ease both!important}}

/* Sticky block: top bar + progress + screen title stay on top while scrolling (below the WP admin bar when logged in). */
.hua .hua-sticky{position:sticky;top:var(--hua-top,0px);z-index:30;background:var(--page);box-shadow:0 1px 0 var(--line)}
.admin-bar .hua .hua-sticky{--hua-top:32px}
@media (max-width:782px){.admin-bar .hua .hua-sticky{--hua-top:46px}}
@media (max-width:600px){.admin-bar .hua .hua-sticky{--hua-top:0px}}
.hua .hua-sticky .hua-top{border-bottom:0}
.hua .hua-sticky .hua-progress{padding:0 20px 10px}
.hua .hua-sticky-title{margin:0;padding:0 20px 12px;font-size:21px;line-height:1.2;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.hua .hua-head:empty{display:none}
.hua .hua-head{padding-top:14px}

/* Store location */
/* Google's search box (closed widget): restyle the frame and the suggestion list to match our fields. */
.hua .hua-loc-box input{width:100%}
.hua .hua-map{height:170px;margin-top:10px;border-radius:14px;overflow:hidden;border:1.5px solid var(--line)}

/* Full-page layout (templates/full-page.php): our bar is the page header across the full width,
   content stays centred at reading width. */
body.hua-fullpage{margin:0;background:var(--page,#F6FBF7)}
body.hua-fullpage .hua{max-width:none;min-height:100dvh}
body.hua-fullpage .hua .hua-sticky{box-shadow:0 1px 0 var(--line),0 6px 18px -14px rgba(60,200,116,.25)}
body.hua-fullpage .hua .hua-top,
body.hua-fullpage .hua .hua-sticky .hua-progress,
body.hua-fullpage .hua .hua-sticky-title{padding-left:max(20px,calc((100% - 620px) / 2 + 20px));padding-right:max(20px,calc((100% - 620px) / 2 + 20px))}
body.hua-fullpage .hua .hua-top{padding-top:14px;padding-bottom:14px}
body.hua-fullpage .hua .hua-screen{max-width:620px;margin:0 auto}

/* Guard against the embedding page's own layout (e.g. an Elementor flex container) pushing the
   widget off-centre at wide/ultra-wide widths instead of stretching and centring it. */
.e-con:has(#hua-app){align-items:stretch!important;justify-content:flex-start!important}

/* Start page: the 7 segments we look into (same names and pictures as the question screens) */
.hua .hua-seglist{margin-bottom:22px}
.hua .hua-seglist h3{font-size:18px;margin-bottom:12px}
.hua .hua-seglist ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;counter-reset:seg}
.hua .hua-seglist li{counter-increment:seg;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:14.5px;font-weight:800;line-height:1.3;color:var(--ink);min-width:0}
.hua .hua-segart{flex:0 0 40px;line-height:0}
.hua .hua-segart svg{width:40px;height:40px}
.hua .hua-seglist li:last-child:nth-child(odd){grid-column:1 / -1}
@media (max-width:340px){.hua .hua-seglist ol{grid-template-columns:1fr}}

/* RM opportunity banner on the report (rough estimate, shown with its note) */
.hua .hua-rm{margin-top:14px;background:#1F3A2A;border-radius:18px;padding:18px;text-align:center;color:#DCEFE0}
.hua .hua-rm p{font-size:14px;line-height:1.5;font-weight:600}
.hua .hua-rm-amt{font-size:clamp(28px,8vw,36px)!important;font-weight:900!important;color:#7FD68A;line-height:1.15!important;margin:6px 0 2px!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.hua .hua-rm-year b{color:#fff;font-weight:900}
.hua .hua-rm-note{margin-top:8px!important;font-size:12px!important;color:#A9C7B1;font-weight:500!important}

.hua .hua-segart{color:var(--blue)}

/* Country picker: button inside the phone box + our own searchable list */
.hua .hua-phone-wrap{position:relative}
.hua .hua .hua-cc,.hua .hua-cc{display:flex;align-items:center;gap:6px;padding:0 12px;border:0;border-right:1.5px solid var(--line);background:var(--band);font-weight:800;color:var(--ink);white-space:nowrap;cursor:pointer;transition:background .2s}
.hua .hua-cc:hover{background:var(--soft)}
.hua .hua-cc-flag{font-size:20px;line-height:1}
.hua .hua-cc-caret{flex:none;display:block;width:12px;height:12px;margin-left:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238A9A90' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") center/12px 12px no-repeat;transition:transform .2s}
.hua .hua-cc[aria-expanded="true"] .hua-cc-caret{transform:rotate(180deg)}
.hua .hua-cc-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:#fff;border:1.5px solid var(--sel-line);border-radius:16px;box-shadow:0 18px 40px -16px rgba(35,56,43,.35);padding:10px;animation:hua-in .2s var(--ease) both}
.hua .hua .hua-cc-search,.hua input.hua-cc-search{width:100%;min-height:44px;padding:8px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;background:var(--page);margin-bottom:8px}
.hua input.hua-cc-search:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 4px rgba(60,200,116,.12)}
.hua .hua-cc-panel ul{list-style:none;margin:0;padding:0;max-height:280px;overflow-y:auto;overscroll-behavior:contain}
.hua .hua-cc-h{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:8px 8px 4px}
.hua .hua-cc-none{padding:12px 8px;color:var(--ink-3);font-size:14px}
.hua .hua-cc-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 8px;border-radius:10px;text-align:left;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer}
.hua .hua-cc-item:hover{background:var(--band)}
.hua .hua-cc-item[aria-selected="true"]{background:var(--sel);color:var(--blue-dark)}
.hua .hua-cc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hua .hua-cc-code{color:var(--ink-3);font-weight:700;font-variant-numeric:tabular-nums}
.hua .hua-cc-item[aria-selected="true"] .hua-cc-code{color:var(--blue-dark)}

/* Risk tag: raised with a soft shadow */
.hua .hua-risk{font-size:15px;padding:6px 14px;box-shadow:0 6px 16px -6px rgba(194,65,45,.45),0 1px 0 rgba(255,255,255,.6) inset}
.hua .hua-r2 .hua-risk{box-shadow:0 6px 16px -6px rgba(180,97,14,.45),0 1px 0 rgba(255,255,255,.6) inset}
.hua .hua-r3 .hua-risk{box-shadow:0 6px 16px -6px rgba(138,106,0,.45),0 1px 0 rgba(255,255,255,.6) inset}
.hua .hua-r4 .hua-risk,.hua .hua-r5 .hua-risk{box-shadow:0 6px 16px -6px rgba(47,125,56,.45),0 1px 0 rgba(255,255,255,.6) inset}

/* Report: comes alive on load and on hover / tap */
@keyframes hua-grow{from{transform:scaleX(0)}}
@keyframes hua-ring{from{--p:0}}
/* Score ring fills from 0 when the report first appears (number counts up in app.js over the same 1.3s).
   --p must be a registered number so the conic-gradient can animate; without @property it simply shows the final ring. */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.hua .hua-ring.hua-ring-in{animation:hua-ring 1.3s var(--ease) .25s both}
@media (prefers-reduced-motion:reduce){.hua .hua-ring.hua-ring-in{animation:none}}
.hua .hua-report .hua-bar-track i{transform-origin:left;animation:hua-grow .9s var(--ease) both .15s}
.hua .hua-scorecard,.hua .hua-seg-card,.hua .hua-probs li,.hua .hua-rm,.hua .hua-worst,.hua .hua-strengths span{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.hua .hua-seg-card:hover,.hua .hua-seg-card:active{transform:translateY(-3px);border-color:var(--sel-line);box-shadow:0 14px 28px -18px rgba(35,56,43,.45)}
.hua .hua-seg-card:hover .hua-bar-track{height:10px}
.hua .hua-bar-track{transition:height .25s var(--ease)}
.hua .hua-probs li:hover,.hua .hua-probs li:active{transform:translateX(4px);box-shadow:0 12px 24px -16px rgba(194,65,45,.5)}
.hua .hua-worst:hover{box-shadow:0 12px 26px -16px rgba(194,65,45,.5)}
.hua .hua-scorecard:hover{box-shadow:0 16px 32px -20px rgba(35,56,43,.4)}
.hua .hua-scorecard:hover .hua-ring{transform:rotate(-6deg) scale(1.04)}
.hua .hua-ring{transition:transform .35s var(--ease)}
.hua .hua-rm:hover,.hua .hua-rm:active{transform:translateY(-2px);box-shadow:0 18px 36px -18px rgba(31,58,42,.75)}
.hua .hua-rm:hover .hua-rm-amt{text-shadow:0 0 18px rgba(127,214,138,.45)}
.hua .hua-strengths span:hover{transform:translateY(-2px)}
.hua .hua-lock .hua-btn-wa{animation:hua-breathe 4s ease-in-out infinite} /* soft breathing: slowly swells and glows, then settles, nonstop */
.hua .hua-lock .hua-btn-wa::after{animation:hua-arrow 4s ease-in-out infinite}
.hua .hua-lock .hua-btn-wa:hover,.hua .hua-lock .hua-btn-wa:hover::after{animation:none}
@keyframes hua-breathe{0%,100%{transform:scale(1);box-shadow:0 8px 18px -10px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,0)}
  50%{transform:scale(1.018);box-shadow:0 12px 24px -10px rgba(37,211,102,.55),0 0 0 7px rgba(37,211,102,.09)}}
@keyframes hua-arrow{0%,100%{transform:translateY(-50%)}50%{transform:translate(3px,-50%)}}


/* Selected answer = filled deeper green (--pick #2DB463) with white text.
   Once a one-answer question is answered, the other answers turn grey (still tappable to change). */
.hua .hua-opt[aria-pressed="true"]{background:var(--pick);border-color:var(--pick);color:#fff;box-shadow:0 8px 18px -10px rgba(45,180,99,.55)}
.hua .hua-opt[aria-pressed="true"] .hua-dot{border-color:#fff;background:#fff}
.hua .hua-opt[aria-pressed="true"] .hua-dot::after{border-color:var(--pick)}
.hua .hua-opts:has(.hua-opt:not(.hua-multi)[aria-pressed="true"]) .hua-opt[aria-pressed="false"]{background:#fff;border-color:#EFEFEF;color:#BFBFBF;box-shadow:none} /* Grab's faded options */
.hua .hua-opts:has(.hua-opt:not(.hua-multi)[aria-pressed="true"]) .hua-opt[aria-pressed="false"] .hua-dot{border-color:#E8E8E8;background:#F6F6F6}
.hua .hua-opts:has(.hua-opt:not(.hua-multi)[aria-pressed="true"]) .hua-opt[aria-pressed="false"]:hover{color:var(--ink-2);border-color:#CFD6D1}

/* Button style C (Kelvin, 9 Oct 2026): fresh green pill with a white arrow circle that slides forward on hover.
   The arrow is drawn with ::after, so every main button gets it without extra markup. */
.hua .hua-btn-primary,.hua .hua-btn-wa{position:relative;padding:0 64px}
.hua .hua-btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 18px -10px rgba(60,200,116,.7)}
.hua .hua-btn-primary:hover{background:var(--hover);transform:none;box-shadow:0 10px 22px -10px rgba(52,184,104,.75)}
.hua .hua-btn-wa{background:#25D366;color:#063B22!important;box-shadow:0 8px 18px -10px rgba(37,211,102,.7)}
.hua .hua-btn-wa:hover{background:#22C55E;transform:none}
.hua .hua-btn-primary::after,.hua .hua-btn-wa::after{content:"";position:absolute;right:16px;top:50%;width:36px;height:36px;border-radius:50%;transform:translateY(-50%);transition:transform .25s var(--ease),opacity .2s;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232BA85E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat}
.hua .hua-btn-wa::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231DA851' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.hua .hua-btn-primary:hover::after,.hua .hua-btn-wa:hover::after{transform:translate(6px,-50%)} /* still 10px inside the edge */
.hua .hua-btn-primary:active::after,.hua .hua-btn-wa:active::after{transform:translate(8px,-50%)}
.hua .hua-btn:disabled,.hua .hua-btn[aria-disabled="true"]{background:#CFE3D6;box-shadow:none}
.hua .hua-btn:disabled::after,.hua .hua-btn[aria-disabled="true"]::after{opacity:.55}
.hua .hua-btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink);padding:0 22px}
.hua .hua-btn-ghost:hover{border-color:var(--sel-line);color:var(--blue-dark)}
.hua .hua-ph{white-space:nowrap} /* short Chinese phrase kept together */
/* Button text: Chinese only breaks at spaces (e.g. "WhatsApp / 解锁完整报告"), and the left side gives up padding
   the arrow circle doesn't need, so the label fits on one line more often. */
.hua .hua-btn{word-break:keep-all}
.hua .hua-lock .hua-btn-wa{padding:8px 60px 8px 24px;line-height:1.3}

/* Store search (own box + dropdown, replaces Google's element) */
.hua .hua-loc-wrap{position:relative}
.hua .hua-loc-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);line-height:0;pointer-events:none}
.hua .hua-loc-wrap input#hua-loc{padding-left:42px}
.hua .hua-loc-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:#fff;border:1.5px solid var(--sel-line);border-radius:16px;box-shadow:0 18px 40px -16px rgba(35,56,43,.35);padding:6px;animation:hua-in .2s var(--ease) both}
.hua .hua-loc-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;text-align:left;padding:10px 8px;border-radius:12px;cursor:pointer;color:var(--ink)}
.hua .hua-loc-item:hover,.hua .hua-loc-item[aria-selected="true"]{background:var(--band)}
.hua .hua-loc-pin{flex:0 0 32px;height:32px;border-radius:50%;background:var(--soft);color:var(--blue-dark);display:grid;place-items:center}
.hua .hua-loc-txt{min-width:0;display:grid;gap:1px}
.hua .hua-loc-txt b{font-size:15px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hua .hua-loc-txt b em{font-style:normal;color:var(--blue-dark);font-weight:900}
.hua .hua-loc-txt small{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hua .hua-loc-by{text-align:right;font-size:11.5px;color:var(--ink-3);padding:4px 10px 2px;margin:0}
/* Picked store: only the tick + store name in bold, address in normal weight */
.hua .hua-loc-picked{font-weight:600}
.hua .hua-loc-picked b{font-weight:800}
.hua .hua-loc-picked span{font-weight:500;color:var(--ink-2)}

/* Our Clients (under the report): white cloud tiles sliding sideways, like an agency client wall */
.hua .hua-clients{margin:40px 0 8px!important;padding:0 0 12px;background:none;overflow:hidden} /* no panel behind it: sits straight on the page */
.hua .hua-clients-kicker{margin:0 20px!important;font-size:13px;font-weight:700;color:var(--blue-dark);letter-spacing:.02em}
.hua .hua-clients-title{margin:2px 20px 16px;font-size:30px;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.hua .hua-marquee{overflow:hidden;padding:14px 0 18px;margin:-10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hua .hua-mtrack{display:flex;gap:14px;width:max-content;animation:hua-slide var(--dur,80s) linear infinite}
.hua .hua-rev .hua-mtrack{animation-direction:reverse}
.hua .hua-marquee:hover .hua-mtrack{animation-play-state:paused}
@keyframes hua-slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
.hua .hua-cloud{flex:0 0 auto;width:132px;height:108px;display:grid;place-items:center;filter:drop-shadow(0 6px 10px rgba(35,56,43,.08));transition:transform .3s var(--ease);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath fill='%23fff' d='M30 88C13 88 4 76 8 63 0 56 2 40 15 35 14 19 31 10 45 17 52 4 73 3 82 15 97 9 114 20 111 37 121 43 120 61 109 67 111 82 96 91 83 86 75 96 55 97 47 88 41 92 34 91 30 88Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hua .hua-cloud img{width:74px;height:74px;object-fit:contain;border-radius:14px}
.hua .hua-cloud:hover{transform:translateY(-4px) scale(1.08)}
@media (prefers-reduced-motion:reduce){.hua .hua-mtrack{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center}.hua .hua-mtrack .hua-cloud:nth-child(n+13){display:none}}

/* Clients wall goes full screen width (breaks out of the 620px column) and gets bigger on desktop / tablet. */
.hua{overflow-x:clip} /* no sideways scroll from the full-width rows; clip keeps the sticky header working */
.hua .hua-clients{width:100vw;margin-left:calc(50% - 50vw)!important;margin-right:0!important}
@media (min-width:768px){
  .hua .hua-clients-title{font-size:38px}
  .hua .hua-mtrack{gap:22px}
  .hua .hua-cloud{width:176px;height:144px}
  .hua .hua-cloud img{width:98px;height:98px;border-radius:18px}
  .hua .hua-marquee{padding:18px 0 24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
}
/* Clients heading centred over the full-width logo wall (all screen sizes) */
.hua .hua-clients{text-align:center}
.hua .hua-clients-kicker,.hua .hua-clients-title{margin-left:20px!important;margin-right:20px!important}

/* Head Up in numbers (from headup.com.my), under the client logos */
.hua .hua-stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:980px;margin:26px auto 0;padding:0 20px;text-align:center}
.hua .hua-stat3{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 20px 22px;display:grid;gap:6px;align-content:start;box-shadow:0 12px 30px -16px rgba(35,56,43,.28),0 2px 6px -2px rgba(35,56,43,.06);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.hua .hua-stat3:hover{transform:translateY(-5px);box-shadow:0 22px 40px -18px rgba(35,56,43,.38),0 2px 6px -2px rgba(35,56,43,.08)}
.hua .hua-stat3 b{font-size:clamp(30px,6vw,42px);font-weight:900;line-height:1.05;color:var(--blue-dark);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hua .hua-stat3 b small{font-size:.5em;font-weight:900;margin-right:3px}
.hua .hua-stat3 > span{font-size:14px;font-weight:800;color:var(--ink)}
.hua .hua-stat3 p{margin:8px 0 0!important;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
@media (max-width:700px){.hua .hua-stats3{grid-template-columns:1fr;gap:12px}}
.hua .hua-stat3 b i{font-style:normal}

/* Report cards: soft resting shadow (same feel as the number cards), a little deeper on hover */
.hua .hua-scorecard,.hua .hua-seg-card,.hua .hua-lock{box-shadow:0 12px 30px -18px rgba(35,56,43,.26),0 2px 6px -3px rgba(35,56,43,.06)}
.hua .hua-worst,.hua .hua-probs li{box-shadow:0 12px 26px -18px rgba(194,65,45,.35),0 2px 6px -3px rgba(194,65,45,.08)}
.hua .hua-rm{box-shadow:0 18px 36px -20px rgba(31,58,42,.6)}
.hua .hua-scorecard:hover,.hua .hua-seg-card:hover{box-shadow:0 20px 38px -20px rgba(35,56,43,.36),0 2px 6px -3px rgba(35,56,43,.08)}
.hua .hua-worst:hover,.hua .hua-probs li:hover{box-shadow:0 18px 32px -18px rgba(194,65,45,.45)}
.hua .hua-restart{margin-top:6px!important}

/* Soft shadow on every block across all screens (same family as the report cards) */
.hua .hua-stats,.hua .hua-gets > div,.hua .hua-seglist li,.hua .hua-tip,.hua .hua-howto{box-shadow:0 12px 28px -18px rgba(35,56,43,.26),0 2px 6px -3px rgba(35,56,43,.06)}
.hua .hua-tip-red{box-shadow:0 12px 26px -18px rgba(194,65,45,.32),0 2px 6px -3px rgba(194,65,45,.07)}
.hua .hua-opt{box-shadow:0 6px 16px -12px rgba(35,56,43,.22),0 1px 3px -1px rgba(35,56,43,.05)}
.hua .hua-opt:hover{box-shadow:0 10px 22px -14px rgba(35,56,43,.3),0 1px 3px -1px rgba(35,56,43,.06)}
.hua input[type=text],.hua input[type=tel],.hua .hua-phone{box-shadow:0 6px 16px -12px rgba(35,56,43,.2)}
.hua .hua-phone input{box-shadow:none!important}
.hua .hua-seglist li,.hua .hua-gets > div{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.hua .hua-seglist li:hover,.hua .hua-gets > div:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(35,56,43,.36),0 2px 6px -3px rgba(35,56,43,.08)}

/* Stronger, clearly visible card shadow everywhere (Kelvin: "make shadow on each section") */
.hua{--card-shadow:0 10px 26px -12px rgba(35,56,43,.22),0 2px 6px -1px rgba(35,56,43,.07);--card-shadow-hover:0 18px 36px -14px rgba(35,56,43,.30),0 3px 8px -2px rgba(35,56,43,.08)}
.hua .hua-stats,.hua .hua-gets > div,.hua .hua-seglist li,.hua .hua-tip,.hua .hua-howto,
.hua .hua-scorecard,.hua .hua-seg-card,.hua .hua-lock,.hua .hua-stat3,.hua .hua-opt,.hua .hua-btn-ghost,
.hua input[type=text],.hua input[type=tel],.hua .hua-phone{box-shadow:var(--card-shadow)}
.hua .hua-phone input{box-shadow:none!important}
.hua .hua-seglist li:hover,.hua .hua-gets > div:hover,.hua .hua-scorecard:hover,.hua .hua-seg-card:hover,.hua .hua-stat3:hover,.hua .hua-opt:hover,.hua .hua-btn-ghost:hover{box-shadow:var(--card-shadow-hover)}
.hua .hua-tip-red,.hua .hua-worst,.hua .hua-probs li{box-shadow:0 10px 24px -12px rgba(194,65,45,.28),0 2px 6px -1px rgba(194,65,45,.08)}
.hua .hua-opts:has(.hua-opt:not(.hua-multi)[aria-pressed="true"]) .hua-opt[aria-pressed="false"]{box-shadow:0 8px 20px -12px rgba(35,56,43,.14),0 1px 4px -1px rgba(35,56,43,.05)} /* faded answers keep a lighter shadow */

/* Green main buttons (Start / Continue / See my score) breathe softly once they are ready to press.
   While still locked (pale) they stay still; hover pauses the breathing. */
.hua .hua-btn-primary:not(:disabled):not([aria-disabled="true"]){animation:hua-breathe-g 4s ease-in-out infinite}
.hua .hua-btn-primary:not(:disabled):not([aria-disabled="true"])::after{animation:hua-arrow 4s ease-in-out infinite}
.hua .hua-btn-primary:not(:disabled):not([aria-disabled="true"]):hover,.hua .hua-btn-primary:not(:disabled):not([aria-disabled="true"]):hover::after{animation:none}
@keyframes hua-breathe-g{0%,100%{transform:scale(1);box-shadow:0 8px 18px -10px rgba(60,200,116,.6),0 0 0 0 rgba(60,200,116,0)}
  50%{transform:scale(1.018);box-shadow:0 12px 24px -10px rgba(60,200,116,.65),0 0 0 7px rgba(60,200,116,.1)}}
/* Bottom button bar: fully solid so questions scrolling behind it never show through */
.hua .hua-actions{background:var(--page);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 -1px 0 var(--line),0 -10px 24px -18px rgba(35,56,43,.25)}


/* ---- Motion pass (soft): transform/opacity only, ease-out curve, hover motion for mouse users only ---- */
@keyframes hua-fade{from{opacity:0}}
/* Screen entry: the new screen floats up from below in at most four beats (battlemind.my feel, tuned).
   The start page hero keeps its own piece-by-piece intro, so it is left out. */
/* backwards, not both: once landed the blocks drop the animation, so dropdowns (store search, country code)
   are not trapped under the fields below them */
.hua .hua-enter > *{animation:hua-in .7s var(--ease-drawer) backwards}
.hua .hua-enter > :nth-child(2){animation-delay:70ms}
.hua .hua-enter > :nth-child(3){animation-delay:140ms}
.hua .hua-enter > :nth-child(n+4){animation-delay:210ms} /* the rest and the Back / Continue bar land together, like
   Start -> store link: every screen settles in about 0.9s, however many questions it has */
.hua .hua-enter > .hua-hero{animation:none}
.hua .hua-enter > .hua-actions{animation:none} /* the Back / Continue bar never moves: it stays solid and the new questions float up behind it */

/* Continue / Back screen change (app.js go). .hua-old-screen is a copy of the old screen laid over the new one, so the
   page is never empty. At the top: the copy fades with a small lift while the new blocks float up. Scrolled down
   (.hua-soft): the copy fades out and the new blocks fade in while both slide back up (transform in app.js), which
   looks like scrolling to the top. Opacity + transform only, so the phone's GPU does the work. */
#hua-app{position:relative}
.hua .hua-old-screen{position:absolute;left:0;right:0;z-index:1;pointer-events:none;animation:hua-old-out .22s var(--ease) forwards}
@keyframes hua-old-out{to{opacity:0;transform:translateY(-24px)}}
.hua .hua-old-screen.hua-soft{animation:hua-old-fade .4s var(--ease) forwards}
@keyframes hua-old-fade{to{opacity:0}}
.hua .hua-enter.hua-soft > *{animation:hua-soft-in .5s var(--ease) backwards}
.hua .hua-enter.hua-soft > :nth-child(2){animation-delay:40ms}
.hua .hua-enter.hua-soft > :nth-child(3){animation-delay:80ms}
.hua .hua-enter.hua-soft > :nth-child(n+4){animation-delay:120ms}
.hua .hua-enter.hua-soft > .hua-actions{animation:none}
@keyframes hua-soft-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.hua .hua-old-screen{display:none}}
@keyframes hua-in{from{opacity:0;transform:translateY(160px)}to{opacity:1;transform:none}}
/* Dropdowns (country, store search): small drop from the box, not the page-entry slide */
.hua .hua-cc-panel,.hua .hua-loc-list{animation:hua-drop .18s var(--ease) both;transform-origin:top center}
@keyframes hua-drop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
/* Answer tap: a press transition instead of a restarting keyframe */
.hua .hua-pop{animation:none}
.hua .hua-opt{transition:border-color .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .12s var(--ease)}
.hua .hua-opt:active{transform:scale(.985)}
/* Button press: quick 140ms feedback */
.hua .hua-btn{transition:transform .14s var(--ease),box-shadow .25s ease,background-color .2s ease}
/* Breathing, soft: only a glow layer fades in and out (no growing button, no repainted shadow) */
.hua .hua-btn-primary:not(:disabled):not([aria-disabled="true"]),.hua .hua-lock .hua-btn-wa{animation:none;isolation:isolate}
.hua .hua-btn-primary:not(:disabled):not([aria-disabled="true"])::before,.hua .hua-lock .hua-btn-wa::before{content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:-1;pointer-events:none;
  box-shadow:0 0 0 5px rgba(60,200,116,.13),0 12px 26px -10px rgba(60,200,116,.55);opacity:0;animation:hua-glow 5s ease-in-out infinite}
.hua .hua-lock .hua-btn-wa::before{box-shadow:0 0 0 5px rgba(37,211,102,.13),0 12px 26px -10px rgba(37,211,102,.55)}
@keyframes hua-glow{0%,100%{opacity:0;transform:scale(.985)}50%{opacity:1;transform:scale(1)}}
.hua .hua-btn-primary:not(:disabled):not([aria-disabled="true"])::after,.hua .hua-lock .hua-btn-wa::after{animation:hua-arrow 5s ease-in-out infinite}
@keyframes hua-arrow{0%,100%{transform:translateY(-50%)}50%{transform:translate(2px,-50%)}}
.hua .hua-btn-primary:hover::before,.hua .hua-btn-wa:hover::before{animation-play-state:paused}
/* Gentler hover sizes */
.hua .hua-scorecard:hover .hua-ring{transform:scale(1.02)}
.hua .hua-seg-card:hover .hua-bar-track{height:8px}
.hua .hua-cloud:hover{transform:translateY(-3px) scale(1.04)}
.hua .hua-stat3:hover{transform:translateY(-3px)}
.hua .hua-probs li:hover{transform:translateX(3px)}
/* Touch screens: no hover lifts (a tap would leave cards stuck lifted) */
@media (hover:none),(pointer:coarse){
  .hua .hua-gets > div:hover,.hua .hua-seglist li:hover,.hua .hua-seg-card:hover,.hua .hua-seg-card:active,.hua .hua-probs li:hover,.hua .hua-probs li:active,
  .hua .hua-rm:hover,.hua .hua-rm:active,.hua .hua-scorecard:hover .hua-ring,.hua .hua-stat3:hover,.hua .hua-cloud:hover,.hua .hua-strengths span:hover{transform:none}
}

/* Tutorial video without player controls (plays by itself; tap to pause/resume) */
.hua .hua-video{cursor:pointer}
.hua .hua-video::-webkit-media-controls,.hua .hua-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
/* Bottom bar on phones: buttons may shrink, and the green button keeps room only on the arrow side */
.hua .hua-actions .hua-btn{min-width:0}
@media (max-width:480px){
  .hua .hua-actions .hua-btn-primary,.hua .hua-actions .hua-btn-wa{padding:0 56px 0 16px}
  .hua .hua-actions .hua-btn-ghost{padding:0 18px}
}

/* Tutorial videos re-recorded 9 Oct 2026 at 9:16 */
.hua .hua-video{aspect-ratio:9/16}
/* Tutorial video: never taller than ~40% of the screen, so the steps and buttons stay in view */
.hua .hua-video{width:auto;max-width:100%;height:min(360px,40vh);height:min(360px,40dvh);aspect-ratio:9/16;object-fit:contain}

/* Sound button on the tutorial video (silent by default) */
.hua .hua-vwrap{position:relative;width:max-content;max-width:100%;margin:0 auto 12px}
.hua .hua-vwrap .hua-video{margin:0}
.hua .hua-sound{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(20,32,25,.62);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 14px -6px rgba(0,0,0,.4);transition:background-color .2s ease,transform .14s var(--ease)}
.hua .hua-sound[aria-pressed="true"]{background:var(--blue)}
.hua .hua-sound:active{transform:scale(.94)}

/* Number boxes now sit above the client wall */
.hua .hua-stats3{margin:0 auto 40px}

/* "Why Head Up" heading above the number boxes (same style as Our Clients) */
.hua .hua-why-title{margin-bottom:8px!important}
.hua .hua-why-sub{max-width:560px;margin:0 auto 22px!important;padding:0 20px;font-size:15px;line-height:1.6;color:var(--ink-2)}

.hua .hua-why-sub,.hua .hua-stat3 p,.hua .hua-tip p > span{text-wrap-style:balance} /* even line lengths, no lonely last word */
.hua:lang(zh) .hua-why-sub{text-wrap-style:auto} /* Chinese: phrases already break at punctuation */

.hua .hua-gets p > span{text-wrap-style:pretty} /* no lonely last word in the start-page cards */

.hua .hua-ph{white-space:nowrap!important} /* keep short Chinese phrases together everywhere */
.hua:lang(zh) .hua-tip p > span,.hua:lang(zh) .hua-stat3 p{text-wrap-style:auto} /* Chinese already breaks at punctuation */

/* Start page hook line under the intro */
.hua .hua-hook{margin:0 0 22px;padding:16px 18px;border:1px solid #D5EFDE;background:linear-gradient(180deg,#fff,#F7FCF9);border-radius:16px;box-shadow:var(--card-shadow)} /* soft outline + faint green tint, no side stripe */
.hua .hua-hook p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.hua .hua-hook p b{display:block;margin-top:2px;font-size:17px;font-weight:800;color:var(--blue-dark)}

/* Call to action inside the hook box (starts the analysis, same as the big button) */
.hua .hua-hook-cta{margin-top:12px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--blue);
  background:var(--sel);color:var(--blue-dark);font-weight:800;font-size:15px;cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(60,200,116,.55),0 2px 4px -1px rgba(35,56,43,.08); /* soft green shadow under the button */
  transition:background-color .2s ease,color .2s ease,transform .14s var(--ease)}
.hua .hua-hook-cta span{transition:transform .25s var(--ease)}
.hua .hua-hook-cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.hua .hua-hook-cta:hover{background:var(--blue);color:#fff}.hua .hua-hook-cta:hover span{transform:translateX(3px)}}

.hua .hua-hero h1{text-wrap-style:balance} /* English headline: even lines */
.hua:lang(zh) .hua-hero h1{text-wrap-style:auto}

/* ---- Start page motion (first visit only) ----
   Entrance: each block rises 10px and fades in, 70ms apart; segment cards follow one by one. */
@keyframes hua-rise{from{opacity:0;transform:translateY(10px)}}
.hua .hua-intro > *{animation:hua-rise .5s var(--ease) both}
.hua .hua-intro > :nth-child(2){animation-delay:.07s}
.hua .hua-intro > :nth-child(3){animation-delay:.14s}
.hua .hua-intro > :nth-child(4){animation-delay:.21s}
.hua .hua-intro > :nth-child(5){animation-delay:.28s}
.hua .hua-intro > :nth-child(6){animation-delay:.35s}
.hua .hua-intro .hua-seglist li{animation:hua-rise .45s var(--ease) both}
.hua .hua-intro .hua-seglist li:nth-child(1){animation-delay:.34s}
.hua .hua-intro .hua-seglist li:nth-child(2){animation-delay:.38s}
.hua .hua-intro .hua-seglist li:nth-child(3){animation-delay:.42s}
.hua .hua-intro .hua-seglist li:nth-child(4){animation-delay:.46s}
.hua .hua-intro .hua-seglist li:nth-child(5){animation-delay:.50s}
.hua .hua-intro .hua-seglist li:nth-child(6){animation-delay:.54s}

/* "Check my store now": every 6s (after the entrance) two green rings ripple out one after the other,
   a soft light sweeps across, and the arrow nudges. Transform/opacity only; pauses on hover. */
.hua .hua-hook-cta{position:relative;isolation:isolate}
.hua .hua-hook-cta::before,.hua .hua-hook-cta::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;border:2.5px solid var(--blue);pointer-events:none;
  opacity:0;animation:hua-ping 6s var(--ease) 1.4s infinite}
.hua .hua-hook-cta::after{animation-delay:1.75s}
@keyframes hua-ping{0%{opacity:.75;transform:scale(1)}24%,100%{opacity:0;transform:scale(1.2)}}
.hua .hua-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;pointer-events:none}
.hua .hua-sheen::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));transform:translateX(-130%);
  animation:hua-sheen 6s cubic-bezier(0.77,0,0.175,1) 1.4s infinite}
@keyframes hua-sheen{0%{transform:translateX(-130%)}16%,100%{transform:translateX(260%)}}
.hua .hua-hook-cta span{display:inline-block;animation:hua-nudge-r 6s var(--ease) 1.4s infinite}
@keyframes hua-nudge-r{0%,22%,100%{transform:none}11%{transform:translateX(4px)}}
@media (hover:hover) and (pointer:fine){.hua .hua-hook-cta:hover::before,.hua .hua-hook-cta:hover::after,.hua .hua-hook-cta:hover .hua-sheen::after,.hua .hua-hook-cta:hover span{animation:none}}

/* Reduced motion: start page simply fades in, no sweep or nudge */
@media (prefers-reduced-motion:reduce){
  .hua .hua-intro > *,.hua .hua-intro .hua-seglist li{animation:hua-fade .2s ease both!important;transform:none!important}
  .hua .hua-hook-cta::before,.hua .hua-hook-cta::after,.hua .hua-sheen{display:none}
  .hua .hua-hook-cta span{animation:none}
}

/* Footer on the start and report pages: two short grey lines; each piece stays whole so lines break cleanly */
.hua .hua-foot{margin:36px 0 8px;padding:18px 20px 4px;border-top:1px solid var(--line);text-align:center}
.hua .hua-foot p{margin:0;font-size:12px;line-height:1.7;color:var(--ink-3)}
.hua .hua-foot span{white-space:nowrap}
.hua .hua-foot b{font-weight:400} /* policy names stay plain grey in the footer until they become links */

/* Phones: long answers wrap onto a second line instead of running off the screen (some themes set white-space:nowrap on buttons) */
.hua .hua-opt{white-space:normal;overflow-wrap:anywhere;min-width:0;line-height:1.35}
.hua .hua-opts:not(.hua-cols){grid-template-columns:minmax(0,1fr)}
.hua input[type=text]{text-overflow:ellipsis}
@media (max-width:480px){.hua .hua-opt{font-size:14.5px;padding:10px 14px;gap:10px}}
/* Country flag keeps its size on phones, also when WordPress swaps the flag for an image */
.hua .hua-cc{flex:none}
.hua .hua-cc-flag{flex:none;display:inline-flex;align-items:center}
.hua .hua-cc-flag img{display:block;width:1em!important;height:1em!important;min-width:1em;max-width:none!important;margin:0!important}

/* Continue / See my score tapped before everything is answered (app.js guideTo): only what needs a tap lights up.
   The title / label turns red; answer boxes and text boxes get a red edge and a soft red halo, and the circles go red.
   No fill, nothing outside the boxes, nothing added below; the answers (or the box) shake once. */
.hua .hua-need h3,.hua .hua-need > label,.hua .hua-need .hua-label{color:var(--bad);transition:color .2s ease}
.hua .hua-need .hua-opt,.hua .hua-need input[type=text],.hua .hua-need .hua-phone{border-color:var(--bad)!important;box-shadow:0 0 0 3px rgba(208,67,58,.14)!important}
.hua .hua-need .hua-dot{border-color:var(--bad)}
.hua .hua-need .hua-consent{color:var(--bad);box-shadow:inset 0 0 0 1.5px var(--bad)}
.hua .hua-shake .hua-opts,.hua .hua-shake input[type=text],.hua .hua-shake .hua-phone,.hua .hua-shake .hua-consent{animation:hua-shake .38s ease}
@keyframes hua-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.hua .hua-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* read out, not shown */

/* "Whole Malaysia" stays on one line like 全马来西亚: it shrinks only as much as its card needs (about 7.5em wide in
   English, 4.9em in Chinese) and its line keeps the numbers' height, so labels, dividers and text line up. */
.hua .hua-stat3{container-type:inline-size}
.hua .hua-stat3 b.hua-stat3-word{white-space:nowrap;font-size:min(clamp(30px,6vw,42px),13cqi);line-height:calc(clamp(30px,6vw,42px) * 1.05)}
.hua:lang(zh) .hua-stat3 b.hua-stat3-word{font-size:min(clamp(30px,6vw,42px),20cqi)}

/* Tip card: big number on the left, words and icon beside it on every screen size, phone too. Units, decimals and
   the "Up to / 最高" prefix are smaller, so even "1.00%" leaves the words room on a 390px phone (checked: at most
   5 lines in English, 3 in Chinese). The rating card ticks to 4.49 for a moment (app.js runStat, .hua-dip). */
.hua .hua-tip .hua-stat{font-size:clamp(44px,12vw,56px);display:flex;flex-direction:column;min-width:2.2em;align-items:center} /* number centred in its area, so a narrow 5x has even space both sides. One width on every card: the widest, 4.50⭐️, is about 2em, a little more on iPhone (Apple's star is wider), so the words and icon line up from screen to screen */
.hua .hua-tip .hua-pre{font-size:.27em;line-height:1.2;letter-spacing:0;font-weight:800;margin-bottom:.12em}
.hua .hua-tip .hua-u,.hua .hua-tip .hua-dec{font-size:.62em}
.hua .hua-tip .hua-u{margin-left:.02em}
.hua .hua-tip p > span b{color:var(--ink)} /* the "Go lower, / 哪怕低一点点" emphasis */
.hua .hua-tip .hua-stat.hua-dip{animation:hua-dip .32s var(--ease)}
@keyframes hua-dip{35%{transform:translateY(3px)}}
@media (max-width:420px){
  .hua .hua-tip{gap:12px;padding:14px 12px 14px 14px}
  .hua .hua-tip p{grid-template-columns:auto minmax(0,1fr);gap:12px;font-size:14px;line-height:1.45}
  .hua .hua-art{flex-basis:48px}
  .hua .hua-art svg{width:48px;height:48px}
}
/* Smaller phones (iPhone mini/SE 375px, most Android 360px): each "|" part of a tip line needs about 127px to stay on
   one line, so the card padding, gaps and icon shrink a little, and below 370px the words drop to 13px. */
@media (max-width:400px){
  .hua .hua-tip{gap:8px;padding:12px 10px 12px 12px}
  .hua .hua-tip p{gap:10px}
  .hua .hua-art{flex-basis:40px}
  .hua .hua-art svg{width:40px;height:40px}
}
@media (max-width:370px){
  .hua .hua-tip p{font-size:13px}
}

/* Phrases stay together when they fit on a line, but may wrap when wider than the whole line. Used for short Chinese
   phrases and for the "|" parts of tip lines and titles in both languages (see phr() in app.js). */
.hua .hua-ph{display:inline-block;max-width:100%;white-space:normal!important}

/* Result page: the theme sets p{text-wrap:pretty}, which on iPhone Safari ends lines early and leaves the right side of
   the score card, biggest-risk box and top 3 problems empty. Normal wrapping fills each line to the card edge. */
.hua .hua-report p,.hua .hua-report li{text-wrap:wrap}
/* "Your step-by-step fix plan is sent on WhatsApp…" sits centred above the WhatsApp button, lines kept even. */
.hua .hua-lock > .hua-small{text-align:center;text-wrap:balance}