/* MoneyHero HK · 稅季知識王 — campaign styles
   GENERATED by build-hubspot.mjs from index.html. Do not hand-edit.
   Upload to HubSpot (Content → Files), then point the module at the URL.
   Every rule is scoped to .mhg-tax-quiz so it cannot restyle the site. */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* ──────────────────────────────────────────────────────────────
   稅季知識王 — campaign styles ON THE MHG BRAND GUIDELINE.

   Composed 2026-09-29 by tools/apply-brand-css.mjs, in the load order
   CLAUDE.md §7 requires: fonts → tokens → grid → components → page.

     1. _shared/mh-strapi-base/dist/mh-strapi-base.css — the design system:
        Figma tokens (82tOs1i8NmsLWxZkHTzB80), the Alpha grid, .mhg-alpha-btn.
        Its @import is dropped; build-hubspot.mjs emits it as FONTS.
     2. six icon masks from mh-icon-masks.css — functional icons only.
     3. strapi-prototype/quiz-brand.css — the campaign's OWN layout and
        components, with every value taken from the tokens above. Generated
        from the Marketing stylesheet by strapi-prototype/convert-css.py.
     4. §12 preview chrome, review-only, deleted by build-hubspot.mjs.

   The campaign keeps its layout (Marketing's design). What changed is values:
   type scale, weights ≤700, letter-spacing 0, colour, radius and shadow all
   come from the brand tokens. See strapi-prototype/README.md for the table
   and for the items still open with Design.

   Sections 1–4 are GENERATED. Hand-edit only below the §12 marker; to change
   anything above it, change convert-css.py or the shared base and re-run.
   ────────────────────────────────────────────────────────────── */
/* MH Strapi-parity base — GENERATED 2026-09-28 by _shared/mh-strapi-base/build.mjs.
   Do not hand-edit. Order: fonts → tokens → grid → buttons → parity layer (CLAUDE.md §7). */
/* ─────────────────────────────────────────────────────────────
   MoneyHero Group Alpha Design System — Colors & Type Tokens
   Synced to Figma file: MHG Alpha Design System (82tOs1i8NmsLWxZkHTzB80)
   Sources:
     • EN type scale  → node 1638:5894 (Albert Sans)
     • ZH type scale  → node 2198:10388 (Noto Sans TC)
     • Semantic color alias naming → Figma collection `tokens-brand`
   Fonts: Albert Sans (EN, 100–900) + Noto Sans TC (繁中, 100–900)
   ───────────────────────────────────────────────────────────── */
/* Font @font-face rules extracted to ./fonts.css — load it alongside this file. */
/* ─────────────────────────────────────────────────────────────
   LAYER 1 — PRIMITIVES (Figma "Modulab Primitives" collection)
   Raw values. No semantic meaning. Components MUST NOT reference
   these directly — go through the semantic tokens below.
   ───────────────────────────────────────────────────────────── */
:root{
  /* ─── Color primitives ─── */
  /* Blue */
  --color-blue-50:   #e7ebf6;
  --color-blue-100:  #c2cbe9;
  --color-blue-700:  #2257b8;
  --color-blue-900:  #002981;
  --color-blue-950:  #001a5c;
  /* Note: --color-blue-800 removed; #04709b is teal, see --color-teal-700 */

  /* Teal (SingSaver primary) */
  --color-teal-50:   #e0f4f8;  /* updated from #e8f6fa — confirmed in Figma SS node 20631:7539 */
  --color-teal-700:  #04709b;
  --color-teal-900:  #004a68;

  /* Amber / Orange */
  --color-amber-400: #ffaf26;
  --color-amber-700: #ef6c00;
  --color-amber-800: #e65100;
  --color-amber-900: #8d4501;

  /* Olive (SingSaver secondary) */
  --color-olive-700: #5d8433;
  --color-olive-900: #3d6a01;

  /* Green */
  --color-green-50:  #e8f5e9;
  --color-green-500: #16a34a;
  --color-green-700: #33691e;

  /* Red */
  --color-red-50:    #ffebee;
  --color-red-500:   #dc2626;
  --color-red-700:   #b71c1c;

  /* Yellow / Warning */
  --color-yellow-50: #fffbeb;
  --color-yellow-100:#fff9c4;
  --color-yellow-500:#d97706;
  --color-yellow-700:#92400e;
  --color-yellow-800:#6a4a19;

  /* Orange highlights */
  --color-orange-50: #fff3e0;
  --color-orange-700:#bf360c;

  /* Gray */
  --color-gray-50:   #fafafa;
  --color-gray-100:  #f5f5f5;
  --color-gray-200:  #e0e0e0;
  --color-gray-300:  #bdbdbd;
  --color-gray-400:  #9e9e9e;
  --color-gray-500:  #757575;
  --color-gray-600:  #616161;
  --color-gray-700:  #424242;
  --color-gray-800:  #212121;
  --color-gray-900:  #111111;

  /* White / Black */
  --color-white:     #ffffff;
  --color-black:     #000000;

  /* ─── Spacing primitives (4px scale, Figma `Spacing/*`) ─── */
  --color-blue-50-rgb: 231, 235, 246; /* for legacy uses */
}
:root{
  /* ============ FONT FAMILIES ============
     Figma variable: font/font
       EN surfaces (SingSaver, MoneyHero Singapore)  → Albert Sans
       ZH surfaces (MoneyHero Hong Kong / Credit Hero Club 繁中) → Noto Sans TC
  */
  --font-sans:    'Albert Sans', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans-tc: 'Noto Sans TC', 'Albert Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ============ TYPE SCALE — tokens direct from Figma ============
     Pattern: --<token>-size / --<token>-lh / --<token>-weight
     Matches Figma: font-size/<token>, line-height/<token>, font-weight/<token>
     Mobile (360) defaults here; tablet+ values are overridden in @media blocks.
     Data sourced from CHC file (SBWAmXMaDf8KRIUbWiKQvJ) across 4 breakpoints.
  */

  /* display-1 → 20/24 mobile, 24/31 tablet+ */
  --display-1-size:    20px;
  --display-1-lh:      24px;
  --display-1-weight:  700;
  --display-1-blog-lh: 26px;   /* line-height/display-1-blog: 26 mobile, 31 tablet+ */

  /* display-2 → 24/31 mobile, 28/36 tablet+ */
  --display-2-size:    24px;
  --display-2-lh:      31px;
  --display-2-weight:  700;

  /* display-3 → 28/36 mobile, 34/40 tablet+ */
  --display-3-size:    28px;
  --display-3-lh:      36px;
  --display-3-weight:  700;

  /* display-4 → 28/36 mobile, 42/52 tablet+ */
  --display-4-size:    28px;
  --display-4-lh:      36px;
  --display-4-weight:  700;

  /* display-5 → 34/40 mobile, 48/58 tablet+ */
  --display-5-size:    34px;
  --display-5-lh:      40px;
  --display-5-weight:  700;

  /* title-1 → 18/22 mobile, 24/31 tablet+ */
  --title-1-size:      18px;
  --title-1-lh:        22px;
  --title-1-weight:    700;

  /* title-2 → 16/20 mobile, 22/28 tablet+ */
  --title-2-size:      16px;
  --title-2-lh:        20px;
  --title-2-weight:    700;

  /* subheading-1 → 18/22 mobile, 24/31 tablet+ */
  --subheading-1-size:   18px;
  --subheading-1-lh:     22px;
  --subheading-1-weight: 600;

  /* subheading-2 → 16/20 mobile, 20/24 tablet+ */
  --subheading-2-size:     16px;
  --subheading-2-lh:       20px;
  --subheading-2-weight:   600;
  --subheading-2-blog-lh:  21px;  /* line-height/sm-plus — fixed across bp */

  /* body-1 → 16/20 mobile, 18/22 tablet+, 18/27 desktop (1440 back to 22) */
  --body-1-size:         16px;
  --body-1-lh:           20px;
  --body-1-weight:       500;
  --body-1-relaxed-lh:   26px;   /* body-1-relaxed: 26 mobile, 27 tablet+ */

  /* body-2 → 14/18 mobile, 16/20 tablet+ */
  --body-2-size:         14px;
  --body-2-lh:           18px;
  --body-2-weight:       500;
  --body-2-relaxed-lh:   23px;   /* body-2-relaxed: 23 mobile, 26 tablet+ */

  /* body-1-blog / body-2-blog — long-form blog body variants.
     Same size + line-height as the relaxed variants, but lighter weight (400).
     Used by Blog scenario-accordion, pre-comparison-checklist, etc. */
  --body-1-blog-size:    var(--body-1-size);
  --body-1-blog-lh:      var(--body-1-relaxed-lh);
  --body-1-blog-weight:  400;
  --body-2-blog-size:    var(--body-2-size);
  --body-2-blog-lh:      var(--body-2-relaxed-lh);
  --body-2-blog-weight:  400;

  /* bullet-1 → 16/20 mobile, 18/22 tablet+ */
  --bullet-1-size:       16px;
  --bullet-1-lh:         20px;
  --bullet-1-weight:     600;

  /* bullet-2 → 14/18 mobile, 16/20 tablet+ */
  --bullet-2-size:       14px;
  --bullet-2-lh:         18px;
  --bullet-2-weight:     600;

  /* overline → 14/18 mobile, 16/20 tablet, 22/28 desktop+ (3-stage!) */
  --overline-size:       14px;
  --overline-lh:         18px;
  --overline-weight:     600;

  /* caption → 12/16 mobile, 14/18 tablet+ */
  --caption-size:        12px;
  --caption-lh:          16px;
  --caption-weight:      500;

  /* tag → 14/19 mobile/tablet, 16/23 desktop+ */
  --tag-size:            14px;
  --tag-lh:              19px;
  --tag-weight:          500;

  /* badge → 12/16 mobile, 14/18 tablet+ */
  --badge-size:          12px;
  --badge-lh:            16px;
  --badge-weight:        500;

  /* breadcrumb → 12/16 mobile, 14/18 tablet+ (Medium) */
  --breadcrumb-size:     12px;
  --breadcrumb-lh:       16px;
  --breadcrumb-weight:   500;

  /* Form input (Figma `form/input`) → 16/20 mobile, 18/22 tablet+ (SemiBold 600) */
  --form-input-size:     16px;
  --form-input-lh:       20px;
  --form-input-weight:   600;

  /* Button typography — legacy aliases (actual definitions are in BUTTON TOKENS block below) */

  /* Table typography — responsive via @media blocks */
  --table-header-size:       14px;  /* 14 mobile, 15 tablet+ */
  --table-header-lh:         18px;  /* 18 mobile, 21 tablet+ */
  --table-header-weight:     700;
  --table-cell-size:         13px;  /* 13 mobile, 14 tablet+ */
  --table-cell-lh:           17px;  /* 17 mobile, 18 tablet+ */
  --table-cell-weight:       500;
  --table-cell-primary-size: 14px;  /* 14 mobile, 15 tablet+ */
  --table-cell-primary-lh:   18px;  /* 18 mobile, 21 tablet+ */
  --table-cell-strong-weight:700;

  /* Letter & paragraph spacing (Figma: text-style/letter-spacing, paragraph-spacing/normal) */
  --letter-spacing-normal:    0;
  --paragraph-spacing-normal: 0;

  /* ============ TEXT — Figma `text/*` alias tokens ============ */
  /* MoneyHero is the default brand. SingSaver overrides --text-link below. */
  --text-primary:           var(--color-gray-800);   /* text/primary          — body copy, headings */
  --text-secondary:         var(--color-gray-700);   /* text/secondary        — secondary copy */
  --text-secondary-lighter: var(--color-gray-600);   /* text/secondary-lighter — labels, metadata */
  --text-muted:             #6b7280;                 /* muted captions, placeholder (app convention) */
  --text-disabled:          var(--color-gray-400);   /* text/disabled */
  --text-link:              var(--color-blue-700);   /* text/link — defaults to MoneyHero blue; overridden in .brand-singsaver */
  --text-on-dark:           var(--color-white);
  --text-on-dark-2:         var(--color-blue-100);   /* secondary text on navy hero */
  --text-accent:            var(--color-blue-900);   /* dark-blue accent text (hero card titles) */

  /* ============ FILLS / SURFACES — Figma `fill/*` alias tokens ============ */
  --fill-base:            var(--color-gray-50);    /* fill/base           — app background */
  --fill-card:            var(--color-white);      /* fill/card           — cards, elevated surfaces */
  --fill-primary:         var(--color-blue-700);   /* fill/primary        — primary brand fill (MoneyHero default) */
  --fill-primary-dark:    var(--color-blue-900);   /* fill/primary-dark   — hero, emphasis */
  --fill-primary-light:   var(--color-blue-50);    /* fill/primary-light  — tinted surfaces */
  --fill-primary-deeper:  var(--color-blue-950);   /* deepest navy stop */
  --fill-secondary:       var(--color-amber-400);  /* fill/secondary      — accent amber ("New" pills) */
  --fill-secondary-dark:  var(--color-amber-700);  /* fill/secondary-dark — CTA orange (Apply / Compare) */
  --fill-secondary-light: #FFF3D6;                 /* fill/secondary-light — tinted amber surfaces */
  --fill-alternative-1:   var(--color-gray-100);   /* fill/alternative-1  — table-header row, muted zones */
  --fill-alternative-2:   #f7f8fa;                 /* fill/alternative-2  — alternate gray (blog) */
  --fill-alternative-3:   var(--color-gray-200);   /* fill/alternative-3  — divider-like fills */

  /* ============ BORDERS — Figma `borders/*` alias tokens ============ */
  --border-default:     var(--color-gray-200);    /* borders/default */
  --border-soft:        #e5e7eb;
  --border-dark:        #d1d5db;
  --border-form-default:#d1d5db;                  /* borders/form-default */
  --border-form-hover:  var(--color-blue-700);    /* borders/form-hover */
  --border-form-error:  var(--color-red-500);     /* borders/form-error */

  /* Figma path-aligned alias for `borders/default` (newer Figma path) */
  --borders-default:    var(--border-default);

  /* ============ BRAND — MoneyHero / Credit Hero Club (DEFAULT) ============ */
  /* Deep confident navy-blue paired with optimistic amber. Default at :root. */
  --brand-primary:         var(--fill-primary);
  --brand-primary-dark:    var(--fill-primary-dark);
  --brand-primary-light:   var(--fill-primary-light);
  --brand-primary-deeper:  var(--color-blue-950);
  --brand-accent-orange:   var(--fill-secondary);
  --brand-cta-orange:      var(--fill-secondary-dark);
  --brand-cta-orange-hover:var(--color-amber-800);

  /* ============ BRAND — SingSaver (Blog / Editorial) ============ */
  /* Legacy aliases (kept for back-compat with existing previews / ui-kits).
     Do not invent new uses — prefer .brand-singsaver scope (see below). */
  --ss-brand:       var(--color-teal-700);
  --ss-brand-dark:  var(--color-teal-900);
  --ss-brand-bg:    var(--color-teal-50);

  /* ============ SEMANTIC — STATUS ============ */
  --success:          var(--color-green-500);
  --success-dark:     var(--color-green-700);
  --success-bg:       #f0fdf4;
  --success-border:   #bbf7d0;
  --success-light-bg: var(--color-green-50);

  --warning:        var(--color-yellow-500);
  --warning-bg:     var(--color-yellow-50);
  --warning-border: #fde68a;
  --warning-text:   var(--color-yellow-700);

  --danger:    var(--color-red-500);
  --danger-bg: #fef2f2;

  --info:    var(--brand-primary);
  --info-bg: var(--brand-primary-light);

  /* ============ STATUS — Figma path alias (newer naming) ============ */
  --status-success-bg: var(--highlight-green-light);
  --status-success-fg: var(--highlight-green-dark);
  --status-warning-bg: var(--highlight-yellow-light);
  --status-warning-fg: var(--highlight-yellow-dark);
  --status-danger-bg:  var(--highlight-red-light);
  --status-danger-fg:  var(--color-red-500);

  /* ============ HIGHLIGHT COLORS — Figma `highlights/*` ============
     Used for status pills, approval-odds badges, promotional tags.
     Each tone has -dark (text/border) + -light (background) variants.
  */
  --highlight-green-dark:  var(--color-green-700);
  --highlight-green-light: var(--color-green-50);
  --highlight-yellow-dark: var(--color-yellow-800);
  --highlight-yellow-light:var(--color-yellow-100);
  --highlight-orange-dark: var(--color-orange-700);
  --highlight-orange-light:var(--color-orange-50);
  --highlight-red-dark:    var(--color-red-700);
  --highlight-red-light:   var(--color-red-50);
  --highlight-gray-dark:   var(--color-gray-700);
  --highlight-gray-light:  var(--color-gray-100);

  /* ============ LEGACY ALIASES (kept for back-compat with existing code) ============ */
  --fg-primary:           var(--text-primary);
  --fg-secondary:         var(--text-secondary);
  --fg-secondary-lighter: var(--text-secondary-lighter);
  --fg-muted:             var(--text-muted);
  --fg-disabled:          var(--text-disabled);
  --fg-on-dark:           var(--text-on-dark);
  --fg-on-dark-2:         var(--text-on-dark-2);
  --fg-accent:            var(--text-accent);
  --border:               var(--border-default);

  /* ============ NEUTRALS ============ */
  --neutral-button:      var(--color-gray-500);
  --neutral-button-dark: var(--color-gray-800);
  --black:               var(--color-gray-900);

  /* ============ RADIUS (Figma `radius/*`) ============
     radius/button: 6 on mobile (node 1926:22353), 8 on tablet+ (node 12425:44493).
     Mobile defaults here; @media overrides below.
  */
  --r-none:       0;
  --r-button:     6px;    /* radius/button (mobile) — updated 4→6px per Figma v2 spec (KE node 20631:7539, NS node 21413:10542) */
  --r-tooltip:    6px;    /* radius/tooltip: 6 on tablet, 8 on desktop+ */
  --r-table:      6px;    /* radius/table — 6 mobile, 8 tablet+ (verified Figma radius/table) */
  --r-card:       10px;   /* radius/card — 10 mobile, 16 tablet+ (verified Figma radius/card) */
  --r-card-inner: 12px;   /* radius/card-inner */
  --r-pill:       999px;

  /* ============ SPACING PRIMITIVES (Modulab Core — static, same across breakpoints) ============
     Figma variable: Spacing/0.5, Spacing/1..15 (4px base scale)
  */
  --space-0-5: 2px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-11:  44px;
  --space-12:  48px;
  --space-13:  52px;
  --space-15:  60px;

  /* ============ SPACING ALIASES — Figma `tokens-breakpoint` (responsive) ============
     Values verified across CHC (Credit Hero Club), Blog, and MHG Alpha library files:
       • Mobile (360):  CHC node 20151:61724
       • Tablet (768):  CHC node 20269:57608
       • Desktop (1280): CHC node 20269:57815
       • Desktop-lg (1440): CHC node 20269:57706
     Mobile defaults declared here; @media blocks override for larger breakpoints.

     Category legend:
       spacing/padding/*  → inner padding (component interior)
       spacing/gap/*      → flex/grid gap between siblings
       spacing/margin/*   → outer margin / page gutters
       button/*           → button-specific spacing + sizing
       form/*, tag/*      → component-specific spacing
  */

  /* spacing/padding — inner padding (mobile 360) */
  --padding-section-x: 16px;   /* spacing/padding/section-x */
  --padding-section-y: 24px;   /* spacing/padding/section-y */
  --padding-x:         16px;   /* spacing/padding/x */
  --padding-x-sm:      12px;   /* spacing/padding/x-sm (inferred; consistent across bp) */
  --padding-x-xs:      4px;    /* spacing/padding/x-xs */
  --padding-y:         16px;   /* spacing/padding/y */
  --padding-y-sm:      12px;   /* spacing/padding/y-sm — 12 mobile (KE Figma 20631:7539), 16 tablet+ */
  --padding-y-xs:      8px;    /* spacing/padding/y-xs (inferred) */

  /* spacing/padding/soft-* — also shrink on mobile (smaller than their numeric name suggests) */
  --padding-soft-4:    2px;    /* spacing/padding/soft-4px  → 2 on mobile, 4 on tablet+ */
  --padding-soft-6:    4px;    /* spacing/padding/soft-6px  → 4 on mobile, 6 on tablet+ */
  --padding-soft-8:    6px;    /* spacing/padding/soft-8px  → 6 on mobile, 8 on tablet+ */
  --padding-soft-12:   8px;    /* spacing/padding/soft-12px → 8 / 10 / 12 / 12 */

  /* spacing/gap — flex / grid gap (mobile 360) */
  --gap-x:             16px;   /* spacing/gap/x */
  --gap-x-sm:          8px;    /* spacing/gap/x-sm */
  --gap-x-xs:          4px;    /* spacing/gap/x-xs */
  --gap-y:             16px;   /* spacing/gap/y */
  --gap-y-sm:          8px;    /* spacing/gap/y-sm */
  --gap-y-xs:          4px;    /* spacing/gap/y-xs */
  --gap-section-y:     16px;   /* spacing/gap/section-y */
  --gap-section-y-lg:  32px;   /* spacing/gap/section-y-lg */

  /* spacing/gap/soft-* — same responsive pattern as padding/soft-* */
  --gap-soft-4:        2px;    /* spacing/gap/soft-4px  → 2 on mobile, 4 on tablet+ */
  --gap-soft-6:        4px;    /* spacing/gap/soft-6px  → 4 on mobile, 6 on tablet+ */
  --gap-soft-8:        6px;    /* spacing/gap/soft-8px  → 6 on mobile, 8 on tablet+ */
  --gap-soft-12:       8px;    /* spacing/gap/soft-12px → 8 / 10 / 12 / 12 */

  /* spacing/margin — page-level gutters (mobile 360) */
  --margin-x:          16px;   /* spacing/margin/x */
  --margin-y:          16px;   /* spacing/margin/y */

  /* Form + tag spacing (Figma `form/*`, `tag/*`) */
  --form-inner-padding: 10px;  /* form/inner-element-padding: 10 / 12 / 12 / 12 */
  --tag-padding-icon:   4px;   /* tag/padding-icon — fixed across breakpoints */

  /* ============ BUTTON TOKENS (Figma `button/*` + `buttons/*`) ============
     Mobile (≤767px) values from nodes 1926:22353 (SingSaver) / 12425:44840 (MoneyHero).
     Tablet+ values (≥768px) from node 12425:44493 — overridden in @media below.
     Spacing/sizing is brand-agnostic; only primary + secondary colors swap per brand.
     All buttons use font: SemiBold Albert Sans.
  */

  /* Button colors — MoneyHero / Credit Hero Club (default brand)
     Override with `.brand-singsaver` class (or legacy `[data-brand="singsaver"]`) scope. */
  --button-primary:          var(--color-blue-700);   /* buttons/primary        — MoneyHero navy */
  --button-primary-hover:    var(--color-blue-900);   /* buttons/primary-hover */
  --button-secondary:        var(--color-amber-400);  /* buttons/secondary      — MoneyHero amber */
  --button-secondary-hover:  var(--color-amber-900);  /* buttons/secondary-hover */
  --button-secondary-text:   var(--color-blue-900);   /* dark navy text on amber for AA contrast */
  --button-outline-hover-bg: var(--color-blue-50);    /* outline-button hover surface */

  /* Button colors — shared across brands */
  --button-cta:              var(--color-amber-700);  /* buttons/cta            — Apply/Compare orange */
  --button-cta-hover:        var(--color-amber-800);  /* buttons/cta-hover */
  --button-neutral:          var(--color-gray-500);   /* buttons/neutral */
  --button-neutral-hover:    var(--color-gray-800);   /* buttons/neutral-hover */
  --button-disabled:         var(--color-gray-300);   /* buttons/disable */
  --button-base:             var(--color-white);      /* buttons/base           — outline/ghost fill */

  /* ─── Figma path alias (newer Figma naming `buttons/*`) ─── */
  --buttons-primary:         var(--button-primary);
  --buttons-primary-hover:   var(--button-primary-hover);
  --buttons-secondary:       var(--button-secondary);
  --buttons-secondary-hover: var(--button-secondary-hover);
  --buttons-secondary-text:  var(--button-secondary-text);
  --buttons-outline-hover-bg:var(--button-outline-hover-bg);
  --buttons-cta:             var(--button-cta);
  --buttons-cta-hover:       var(--button-cta-hover);
  --buttons-neutral:         var(--button-neutral);
  --buttons-neutral-hover:   var(--button-neutral-hover);
  --buttons-disable:         var(--button-disabled);
  --buttons-base:            var(--button-base);

  /* Button spacing + sizing — Figma `button/*` (mobile 360 defaults, brand-agnostic) */
  --button-gap:                   4px;   /* button/gap — fixed across breakpoints */
  --button-padding-toggle:        2px;   /* button/padding-toggle */
  --button-padding-small-x:       8px;   /* button/padding-small-x */
  --button-padding-small-x-icon:  6px;   /* button/padding-small-x-icon */
  --button-padding-regular-x:     12px;  /* button/padding-regular-x */
  --button-padding-regular-x-icon:8px;   /* button/padding-regular-x-icon */
  --button-size-small:            30px;  /* button/size-small */
  --button-size-regular:          36px;  /* button/size-regular */
  --button-icon-small:            18px;  /* button/icon-small */
  --button-icon-regular:          22px;  /* button/icon-regular */

  /* Button typography — mobile 360 defaults */
  --button-1-size:       16px;   /* font-size/button-1 */
  --button-1-lh:         20px;   /* line-height/button-1 */
  --button-1-weight:     600;
  --button-2-size:       14px;   /* font-size/button-2 */
  --button-2-lh:         18px;   /* line-height/button-2 */
  --button-2-weight:     600;

  /* ============ ICON SIZES (Figma `shapes/icon-size-*`) ============ */
  --icon-sm: 18px;   /* shapes/icon-size-sm */
  --icon-md: 18px;   /* shapes/icon-size-md — 18 mobile, 22 tablet+, 24 on desktop-lg (1440) */
  --icon-lg: 24px;   /* shapes/icon-size-lg */

  /* ============ LAYOUT MAX-WIDTHS (Figma `general/*`) ============ */
  --content-max-width:     100%;   /* general/content-max-width (mobile fluid) */
  --content-with-panel:    720px;  /* general/content-with-panel — body column inside an article (becomes 760 on desktop) */
  --narrow-content-width:  328px;  /* general/narrow-content-max-width-3 (mobile 328, tablet 720, desktop+ 1130) */
  --content-panel:         720px;  /* general/content-panel — note: becomes 346 on desktop */
  --col-2-width:           100%;   /* general/2-col-width — desktop only (184/206) */
  --qa-table-width:        100%;   /* quick-answer/table-width — mobile fluid */
  --top-nav-height:        48px;   /* size/top-nav-1 (mobile); scales 64→72→80 */
  --breakpoint-content-lg: 1360px; /* breakpoints/content/lg — desktop-lg content cap */

  /* ============ LEGACY ALIASES for section-x / section-y / gap-y ============ */
  --section-x: var(--padding-section-x);
  --section-y: var(--padding-section-y);

  /* ============ SHADOWS / ELEVATION ============ */
  --shadow-header: 0 1px 0 rgba(0,0,0,.06);
  --shadow-card:   0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:     0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
  --shadow-pop:    0 4px 16px rgba(0,0,0,0.15);
  --shadow-modal:  0 4px 24px rgba(0,0,0,0.20);
  --shadow-heavy:  0 0 12px rgba(0,0,0,0.15);

  /* ============================================================
     LAYER 4 — FIGMA PATH ALIASES
     Match the exact Figma variable paths so CSS exported by
     Figma/Claude can be pasted in without renaming. Every alias
     points back to the canonical short-name token defined above.
     ============================================================ */

  /* Color palette — observed steps in 1-12 scale (alongside 50-950) */
  --color-blue-1:    var(--color-blue-50);
  --color-blue-2:    #c2cbe9;
  --color-blue-3:    #8aa1d6;
  --color-blue-7:    var(--color-blue-700);
  --color-blue-8:    #1d4ba0;
  --color-blue-9:    var(--color-blue-900);
  --color-blue-10:   var(--color-blue-950);
  --color-blue-11:   #001244;
  --color-blue-12:   #000a2b;

  /* Spacing — Figma `spacing/padding/*`, `spacing/gap/*`, `spacing/margin/*` */
  --spacing-padding-x:        var(--padding-x);
  --spacing-padding-x-sm:     var(--padding-x-sm);
  --spacing-padding-x-xs:     var(--padding-x-xs);
  --spacing-padding-y:        var(--padding-y);
  --spacing-padding-y-sm:     var(--padding-y-sm);
  --spacing-padding-y-xs:     var(--padding-y-xs);
  --spacing-padding-section-x: var(--padding-section-x);
  --spacing-padding-section-y: var(--padding-section-y);
  --spacing-padding-soft-4:    var(--padding-soft-4);
  --spacing-padding-soft-6:    var(--padding-soft-6);
  --spacing-padding-soft-8:    var(--padding-soft-8);
  --spacing-padding-soft-12:   var(--padding-soft-12);
  --spacing-gap-x:            var(--gap-x);
  --spacing-gap-x-sm:         var(--gap-x-sm);
  --spacing-gap-x-xs:         var(--gap-x-xs);
  --spacing-gap-y:            var(--gap-y);
  --spacing-gap-y-sm:         var(--gap-y-sm);
  --spacing-gap-y-xs:         var(--gap-y-xs);
  --spacing-gap-section-y:    var(--gap-section-y);
  --spacing-gap-soft-4:       var(--gap-soft-4);
  --spacing-gap-soft-6:       var(--gap-soft-6);
  --spacing-gap-soft-8:       var(--gap-soft-8);
  --spacing-gap-soft-12:      var(--gap-soft-12);
  --spacing-margin-x:         var(--margin-x);

  /* Radius — Figma `radius/*` */
  --radius-none:        var(--r-none);
  --radius-button:      var(--r-button);
  --radius-tooltip:     var(--r-tooltip);
  --radius-tag:         var(--r-tag);
  --radius-input:       var(--r-input);
  --radius-card-inner:  var(--r-card-inner);
  --radius-card:        var(--r-card);
  --radius-modal:       var(--r-modal);
  --radius-pill:        var(--r-pill);

  /* Shadow — Figma `shadow/*` */
  --shadow-card-floating-x: var(--shadow-card);
  --shadow-pop-x:           var(--shadow-pop);
  --shadow-modal-x:         var(--shadow-modal);
  --shadow-heavy-x:         var(--shadow-heavy);

  /* Type — Figma `font-size/*`, `line-height/*`, `font-weight/*`
     (path-style aliases for export compatibility) */
  --font-size-display-1:    var(--display-1-size);
  --font-size-display-2:    var(--display-2-size);
  --font-size-display-3:    var(--display-3-size);
  --font-size-display-4:    var(--display-4-size);
  --font-size-display-5:    var(--display-5-size);
  --font-size-title-1:      var(--title-1-size);
  --font-size-title-2:      var(--title-2-size);
  --font-size-subheading-1: var(--subheading-1-size);
  --font-size-subheading-2: var(--subheading-2-size);
  --font-size-body-1:       var(--body-1-size);
  --font-size-body-2:       var(--body-2-size);
  --font-size-body-1-blog:  var(--body-1-blog-size);
  --font-size-body-2-blog:  var(--body-2-blog-size);
  --font-size-bullet-1:     var(--bullet-1-size);
  --font-size-bullet-2:     var(--bullet-2-size);
  --font-size-overline:     var(--overline-size);
  --font-size-caption:      var(--caption-size);
  --font-size-tag:          var(--tag-size);
  --font-size-button:       var(--button-size);
  --font-size-button-small: var(--button-2-size, 14px);
  --line-height-button-small: var(--button-2-lh, 18px);
  --font-weight-button-small: var(--button-2-weight, 600);

  --line-height-display-1:    var(--display-1-lh);
  --line-height-display-2:    var(--display-2-lh);
  --line-height-display-3:    var(--display-3-lh);
  --line-height-display-4:    var(--display-4-lh);
  --line-height-display-5:    var(--display-5-lh);
  --line-height-title-1:      var(--title-1-lh);
  --line-height-title-2:      var(--title-2-lh);
  --line-height-subheading-1: var(--subheading-1-lh);
  --line-height-subheading-2: var(--subheading-2-lh);
  --line-height-body-1:       var(--body-1-lh);
  --line-height-body-2:       var(--body-2-lh);
  --line-height-body-1-blog:  var(--body-1-blog-lh);
  --line-height-body-2-blog:  var(--body-2-blog-lh);
  --line-height-bullet-1:     var(--bullet-1-lh);
  --line-height-bullet-2:     var(--bullet-2-lh);
  --line-height-overline:     var(--overline-lh);
  --line-height-caption:      var(--caption-lh);
  --line-height-tag:          var(--tag-lh);
  --line-height-button:       var(--button-lh);

  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  /* Layout — Figma `general/*` */
  --general-content-panel:        var(--content-panel);
  --general-narrow-content-3:     var(--narrow-content-width);
  --general-top-nav-height:       var(--top-nav-height);

  /* Form / Tag — Figma `form/*`, `tag/*` */
  --form-input-padding-x:    var(--padding-form-x);
  --form-input-padding-y:    var(--padding-form-y);
  --form-input-radius:       var(--r-input);
  --tag-padding-x:           var(--padding-tag-x);
  --tag-padding-y:           var(--padding-tag-y);
  --tag-radius:              var(--r-tag);

  /* Spacing primitive scale — Figma `spacing/0.5`, `spacing/1..15` */
  --spacing-0-5: var(--space-0-5);
  --spacing-1:   var(--space-1);
  --spacing-2:   var(--space-2);
  --spacing-3:   var(--space-3);
  --spacing-4:   var(--space-4);
  --spacing-5:   var(--space-5);
  --spacing-6:   var(--space-6);
  --spacing-7:   var(--space-7);
  --spacing-8:   var(--space-8);
  --spacing-9:   var(--space-9);
  --spacing-10:  var(--space-10);
  --spacing-11:  var(--space-11);
  --spacing-12:  var(--space-12);
  --spacing-13:  var(--space-13);
  --spacing-15:  var(--space-15);

  /* Spacing soft variants — extra alias for `soft-12px` Figma path
     (Figma stores it with the px suffix; CSS-side alias to short name) */
  --spacing-padding-soft-12px: var(--padding-soft-12);
  --spacing-padding-soft-8px:  var(--padding-soft-8);
  --spacing-padding-soft-6px:  var(--padding-soft-6);
  --spacing-padding-soft-4px:  var(--padding-soft-4);
  --spacing-gap-soft-12px:     var(--gap-soft-12);
  --spacing-gap-soft-8px:      var(--gap-soft-8);
  --spacing-gap-soft-6px:      var(--gap-soft-6);
  --spacing-gap-soft-4px:      var(--gap-soft-4);

  /* Button typography — Figma `font-size/button-1`, `line-height/button-1` */
  --font-size-button-1:    var(--button-1-size);
  --line-height-button-1:  var(--button-1-lh);
  --font-weight-button-1:  var(--button-1-weight);
  --font-size-button-2:    var(--button-2-size);
  --line-height-button-2:  var(--button-2-lh);
  --font-weight-button-2:  var(--button-2-weight);

  /* Badge typography */
  --font-size-badge:       var(--badge-size);
  --line-height-badge:     var(--badge-lh);
  --font-weight-badge:     var(--badge-weight);

  /* Per-style font-weight Figma path aliases */
  --font-weight-display-1:    var(--display-1-weight);
  --font-weight-display-2:    var(--display-2-weight);
  --font-weight-display-3:    var(--display-3-weight);
  --font-weight-title-1:      var(--title-1-weight);
  --font-weight-title-2:      var(--title-2-weight);
  --font-weight-subheading-1: var(--subheading-1-weight);
  --font-weight-subheading-2: var(--subheading-2-weight);
  --font-weight-body-1:       var(--body-1-weight);
  --font-weight-body-2:       var(--body-2-weight);
  --font-weight-body-1-blog:  var(--body-1-blog-weight);
  --font-weight-body-2-blog:  var(--body-2-blog-weight);
  --font-weight-bullet-1:     var(--bullet-1-weight);
  --font-weight-bullet-2:     var(--bullet-2-weight);
  --font-weight-bullet:       var(--bullet-2-weight);  /* generic alias */
  --font-weight-overline:     var(--overline-weight);
  --font-weight-caption:      var(--caption-weight);
  --font-weight-tag:          var(--tag-weight);

  /* Icon sizes — Figma `shapes/icon-size-*` */
  --shapes-icon-size-sm: var(--icon-sm);
  --shapes-icon-size-md: var(--icon-md);
  --shapes-icon-size-lg: var(--icon-lg);

  /* Font family — Figma path alias */
  --font-family-default: var(--font-sans);
  --font-family-tc:      var(--font-sans-tc);
  --font-font:           var(--font-sans);   /* Figma: font/font — overridden to --font-sans-tc in :lang(zh-Hant) context */

  /* Border path alias (Figma `borders/default` keeps a plural form
     used by some exports) */
  --borders-default:   var(--border-default);
  --borders-input:     var(--border-input);
  --borders-input-active: var(--border-input-active);
  --borders-form-hover:   var(--border-form-hover);
  --borders-divider:   var(--border-divider);

  /* Radius — small numeric alias scale used by some Figma libraries
     (radius/2 = 8, radius/4 = 16 etc) */
  --radius-2: 8px;
  --radius-4: 16px;

  /* ============ STROKES & FOCUS — primitives shared across components ============
     Per CLAUDE.md Rule 2: components must reference tokens, never hardcode 1px / 2px.
     These are intentionally raw px values (the *base unit* of stroke width) — they're
     primitives, not aliases of another token. */
  --stroke-thin:        1px;   /* default hairline (cards, dividers, table rules) */
  --stroke-emphasis:    2px;   /* emphatic divider / focus ring thickness */
  --focus-ring-offset:  2px;   /* outline-offset on :focus-visible across components */

  /* ============ TYPE — table cells (Figma `font-size/table/*` paths) ============
     Aliases pointing at the existing body-2 / bullet-2 scales so table styling
     scales automatically across all breakpoints via tokens.css. */
  --font-size-table-header:           var(--bullet-2-size);
  --line-height-table-header:         var(--bullet-2-lh);
  --font-weight-table-header:         var(--font-weight-bold);

  --font-size-table-cell:             var(--body-2-size);
  --line-height-table-cell:           var(--body-2-lh);
  --font-weight-table-cell-normal:    var(--body-2-weight);   /* 500 */
  --font-weight-table-cell-strong:    var(--font-weight-bold);     /* 700 */

  --font-size-table-cell-primary:     var(--bullet-2-size);
  --line-height-table-cell-primary:   var(--bullet-2-lh);
  --font-weight-table-cell-primary:   var(--font-weight-semibold);  /* 600 */

  /* Body-2-relaxed alias on the path-style naming scheme. */
  --line-height-body-2-relaxed:       var(--body-2-relaxed-lh);

  /* ─────────────────────────────────────────────
     v=16 additions — fill remaining Figma path-style
     aliases so component CSS can use either short or
     path-style names. Each var() resolves at use-time
     so @media overrides on the underlying tokens
     propagate automatically.
     ───────────────────────────────────────────── */

  /* Borders — Figma `borders/*` (plural) */
  --borders-soft:         var(--border-soft);
  --borders-dark:         var(--border-dark);
  --borders-form-default: var(--border-form-default);
  --borders-form-error:   var(--border-form-error);

  /* Radius — table (newly responsive at v=16) */
  --radius-table:         var(--r-table);

  /* Spacing — margin-y + section-y-lg gap */
  --spacing-margin-y:         var(--margin-y);
  --spacing-gap-section-y-lg: var(--gap-section-y-lg);

  /* Spacing — soft-* with explicit `px` suffix (Figma path style) */
  --spacing-padding-soft-4px:  var(--padding-soft-4);
  --spacing-padding-soft-6px:  var(--padding-soft-6);
  --spacing-padding-soft-8px:  var(--padding-soft-8);
  --spacing-padding-soft-12px: var(--padding-soft-12);
  --spacing-gap-soft-4px:      var(--gap-soft-4);
  --spacing-gap-soft-6px:      var(--gap-soft-6);
  --spacing-gap-soft-8px:      var(--gap-soft-8);
  --spacing-gap-soft-12px:     var(--gap-soft-12);

  /* Layout — Figma `general/*` */
  --general-content-max-width:    var(--content-max-width);
  --general-content-with-panel:   var(--content-with-panel);
  --general-narrow-content-width: var(--narrow-content-width);
  --general-2-col-width:          var(--col-2-width);
  --general-qa-table-width:       var(--qa-table-width);

  /* Form — Figma `form/inner-element-padding` */
  --form-inner-element-padding: var(--form-inner-padding);

  /* Typography — body-1 relaxed line-height path alias */
  --line-height-body-1-relaxed:   var(--body-1-relaxed-lh);

  /* Typography — breadcrumb */
  --font-size-breadcrumb:   var(--breadcrumb-size);
  --line-height-breadcrumb: var(--breadcrumb-lh);
  --font-weight-breadcrumb: var(--breadcrumb-weight);

  /* Typography — form-input */
  --font-size-form-input:   var(--form-input-size);
  --line-height-form-input: var(--form-input-lh);
  --font-weight-form-input: var(--form-input-weight);

  /* Typography — display-4 / display-5 weights */
  --font-weight-display-4: var(--display-4-weight);
  --font-weight-display-5: var(--display-5-weight);

  /* ─── Composite font: shorthand tokens ───────────────────────────────────────
     Used by mhg-ns.css (Newsletter Sign-up) and future modules that need a
     single var() for a complete font: shorthand declaration.
     Sub-tokens are all responsive — the @media cascade in colors_and_type.css
     propagates automatically at var() resolution time.
     --font-font resolves to --font-sans-tc inside :lang(zh-Hant) elements
     (see :lang block below) so TC layouts automatically get the Noto Sans TC stack.
     ──────────────────────────────────────────────────────────────────────────── */
  --headline-subheading-2: var(--font-weight-subheading-2) var(--font-size-subheading-2)/var(--line-height-subheading-2) var(--font-font);
  --body-1-blog:           var(--font-weight-body-1-blog) var(--font-size-body-1-blog)/var(--line-height-body-1-blog) var(--font-font);
  --button-regular:        var(--font-weight-button-1) var(--font-size-button-1)/var(--line-height-button-1) var(--font-font);
}
/* ──────────────────────────────────────────────────────
   BRAND SCOPE — MoneyHero (default) + SingSaver overrides

   Set ONE brand class on <html>:
     <html class="brand-moneyhero">  → navy + amber (default at :root)
     <html class="brand-singsaver">  → teal + olive (overrides below)

   Legacy [data-brand="singsaver"] is also supported for back-compat.
   New code should use the class form.
   Only color tokens swap per brand. Spacing / sizing / type are brand-agnostic.
   ────────────────────────────────────────────────────── */
.mhg-tax-quiz.brand-moneyhero{
  /* Re-asserts MoneyHero defaults so you can scope a region back. */
  --button-primary:          var(--color-blue-700);
  --button-primary-hover:    var(--color-blue-900);
  --button-secondary:        var(--color-amber-400);
  --button-secondary-hover:  var(--color-amber-900);
  --button-secondary-text:   var(--color-blue-900);
  --button-outline-hover-bg: var(--color-blue-50);
  --buttons-primary:         var(--color-blue-700);
  --buttons-primary-hover:   var(--color-blue-900);
  --buttons-secondary:       var(--color-amber-400);
  --buttons-secondary-hover: var(--color-amber-900);
  --buttons-secondary-text:  var(--color-blue-900);
  --buttons-outline-hover-bg:var(--color-blue-50);
  --fill-primary:            var(--color-blue-700);
  --fill-primary-dark:       var(--color-blue-900);
  --fill-primary-light:      var(--color-blue-50);
  --fill-primary-deeper:     var(--color-blue-950);
  --fill-secondary:          var(--color-amber-400);
  --fill-secondary-dark:     var(--color-amber-700);
  --text-link:               var(--color-blue-700);
  --border-form-hover:       var(--color-blue-700);
}
.mhg-tax-quiz.brand-singsaver, .mhg-tax-quiz[data-brand="singsaver"]{
  --button-primary:          var(--color-teal-700);
  --button-primary-hover:    var(--color-teal-900);
  --button-secondary:        var(--color-olive-700);
  --button-secondary-hover:  var(--color-olive-900);
  --button-secondary-text:   var(--color-white);
  --button-outline-hover-bg: var(--color-teal-50);
  --buttons-primary:         var(--color-teal-700);
  --buttons-primary-hover:   var(--color-teal-900);
  --buttons-secondary:       var(--color-olive-700);
  --buttons-secondary-hover: var(--color-olive-900);
  --buttons-secondary-text:  var(--color-white);
  --buttons-outline-hover-bg:var(--color-teal-50);
  --fill-primary:            var(--color-teal-700);
  --fill-primary-dark:       var(--color-teal-900);
  --fill-primary-light:      var(--color-teal-50);
  --fill-primary-deeper:     var(--color-teal-900);
  --fill-secondary:          var(--color-olive-700);
  --fill-secondary-dark:     var(--color-olive-900);
  --text-link:               var(--color-teal-700);
  --text-accent:             var(--color-teal-900);  /* text/accent — teal-darker (#004A68); distinct from button-primary teal */
  --border-form-hover:       var(--color-teal-700);
}
/* ──────────────────────────────────────────────────────
   TYPE UTILITY CLASSES — 1:1 with Figma text styles
   Usage: <h2 class="t-display-2">…</h2>, <span class="t-overline">…</span>
   ────────────────────────────────────────────────────── */
.mhg-tax-quiz .t-display-1{ font: var(--display-1-weight) var(--display-1-size)/var(--display-1-lh) var(--font-sans); }
.mhg-tax-quiz .t-display-1-blog{ font: var(--display-1-weight) var(--display-1-size)/var(--display-1-blog-lh) var(--font-sans); }
.mhg-tax-quiz .t-display-2{ font: var(--display-2-weight) var(--display-2-size)/var(--display-2-lh) var(--font-sans); }
.mhg-tax-quiz .t-display-3{ font: var(--display-3-weight) var(--display-3-size)/var(--display-3-lh) var(--font-sans); }
.mhg-tax-quiz .t-display-4{ font: var(--display-4-weight) var(--display-4-size)/var(--display-4-lh) var(--font-sans); }
.mhg-tax-quiz .t-display-5{ font: var(--display-5-weight) var(--display-5-size)/var(--display-5-lh) var(--font-sans); }
.mhg-tax-quiz .t-title-1{ font: var(--title-1-weight) var(--title-1-size)/var(--title-1-lh) var(--font-sans); }
.mhg-tax-quiz .t-title-2{ font: var(--title-2-weight) var(--title-2-size)/var(--title-2-lh) var(--font-sans); }
.mhg-tax-quiz .t-subheading-1{ font: var(--subheading-1-weight) var(--subheading-1-size)/var(--subheading-1-lh) var(--font-sans); }
.mhg-tax-quiz .t-subheading-2{ font: var(--subheading-2-weight) var(--subheading-2-size)/var(--subheading-2-lh) var(--font-sans); }
.mhg-tax-quiz .t-subheading-2-blog{ font: 700 var(--subheading-2-size)/var(--subheading-2-blog-lh) var(--font-sans); }
.mhg-tax-quiz .t-body-1{ font: var(--body-1-weight) var(--body-1-size)/var(--body-1-lh) var(--font-sans); }
.mhg-tax-quiz .t-body-1-relaxed{ font: var(--body-1-weight) var(--body-1-size)/var(--body-1-relaxed-lh) var(--font-sans); }
.mhg-tax-quiz .t-body-1-blog{ font: 400 var(--body-1-size)/var(--body-1-relaxed-lh) var(--font-sans); }
.mhg-tax-quiz .t-body-1-underlined{ font: var(--body-1-weight) var(--body-1-size)/var(--body-1-lh) var(--font-sans); text-decoration: underline; }
.mhg-tax-quiz .t-body-1-relaxed-underlined{ font: var(--body-1-weight) var(--body-1-size)/var(--body-1-relaxed-lh) var(--font-sans); text-decoration: underline; }
.mhg-tax-quiz .t-body-2{ font: var(--body-2-weight) var(--body-2-size)/var(--body-2-lh) var(--font-sans); }
.mhg-tax-quiz .t-body-2-relaxed{ font: var(--body-2-weight) var(--body-2-size)/var(--body-2-relaxed-lh) var(--font-sans); }
.mhg-tax-quiz .t-body-2-blog{ font: 400 var(--body-2-size)/var(--body-2-relaxed-lh) var(--font-sans); }
.mhg-tax-quiz .t-body-2-underlined{ font: var(--body-2-weight) var(--body-2-size)/var(--body-2-lh) var(--font-sans); text-decoration: underline; }
.mhg-tax-quiz .t-body-2-relaxed-underlined{ font: var(--body-2-weight) var(--body-2-size)/var(--body-2-relaxed-lh) var(--font-sans); text-decoration: underline; }
.mhg-tax-quiz .t-bullet-1{ font: var(--bullet-1-weight) var(--bullet-1-size)/var(--bullet-1-lh) var(--font-sans); }
.mhg-tax-quiz .t-bullet-2{ font: var(--bullet-2-weight) var(--bullet-2-size)/var(--bullet-2-lh) var(--font-sans); }
.mhg-tax-quiz .t-overline{ font: var(--overline-weight) var(--overline-size)/var(--overline-lh) var(--font-sans); }
.mhg-tax-quiz .t-caption{ font: var(--caption-weight) var(--caption-size)/var(--caption-lh) var(--font-sans); }
.mhg-tax-quiz .t-caption-underlined{ font: var(--caption-weight) var(--caption-size)/var(--caption-lh) var(--font-sans); text-decoration: underline; }
.mhg-tax-quiz .t-tag{ font: var(--tag-weight) var(--tag-size)/var(--tag-lh) var(--font-sans); }
.mhg-tax-quiz .t-badge{ font: var(--badge-weight) var(--badge-size)/var(--badge-lh) var(--font-sans); }
.mhg-tax-quiz .t-breadcrumb{ font: var(--breadcrumb-weight) var(--breadcrumb-size)/var(--breadcrumb-lh) var(--font-sans); }
.mhg-tax-quiz .t-form-input{ font: var(--form-input-weight) var(--form-input-size)/var(--form-input-lh) var(--font-sans); }
/* Table type utilities */
.mhg-tax-quiz .t-table-header{ font: var(--table-header-weight) var(--table-header-size)/var(--table-header-lh) var(--font-sans); }
.mhg-tax-quiz .t-table-cell{ font: var(--table-cell-weight) var(--table-cell-size)/var(--table-cell-lh) var(--font-sans); }
.mhg-tax-quiz .t-table-cell-strong{ font: var(--table-cell-strong-weight) var(--table-cell-size)/var(--table-cell-lh) var(--font-sans); }
.mhg-tax-quiz .t-table-cell-primary{ font: var(--table-cell-strong-weight) var(--table-cell-primary-size)/var(--table-cell-primary-lh) var(--font-sans); }
/* ──────────────────────────────────────────────────────
   COMPONENT UTILITIES (optional)
   ────────────────────────────────────────────────────── */
.mhg-tax-quiz .mhg-card{
  background: var(--fill-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
/* ──────────────────────────────────────────────────────
   BUTTON UTILITIES  →  see ./components/buttons.css (authoritative)
   ────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────
   BADGE UTILITY
   ────────────────────────────────────────────────────── */
.mhg-tax-quiz .mhg-badge-new{
  background: var(--fill-secondary);
  color: var(--fill-primary-dark);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-button);
  font-size: var(--tag-size);
  line-height: var(--tag-lh);
}
/* ──────────────────────────────────────────────────────
   RESPONSIVE TOKEN OVERRIDES
   Figma `tokens-breakpoint` collection resolves to different pixel
   values depending on the surface's viewport width. Mirror that here.

   Breakpoints (MoneyHero Group convention):
     mobile         ≤ 767px   (MoneyHero Alpha 360 node)
     tablet         ≥ 768px
     desktop        ≥ 1280px
     desktop-lg     ≥ 1440px
   ────────────────────────────────────────────────────── */
@media (min-width: 768px){
:root{
    /* ========= TYPE SCALE — tablet+ ========= */

    /* Displays */
    --display-1-size:    24px;
    --display-1-lh:      31px;
    --display-1-blog-lh: 31px;
    --display-2-size:    28px;
    --display-2-lh:      36px;
    --display-3-size:    34px;
    --display-3-lh:      40px;
    --display-4-size:    42px;
    --display-4-lh:      52px;
    --display-5-size:    48px;
    --display-5-lh:      58px;

    /* Titles */
    --title-1-size:      24px;
    --title-1-lh:        31px;
    --title-2-size:      22px;
    --title-2-lh:        28px;

    /* Subheadings */
    --subheading-1-size: 24px;
    --subheading-1-lh:   31px;
    --subheading-2-size: 20px;
    --subheading-2-lh:   24px;

    /* Body */
    --body-1-size:       18px;
    --body-1-lh:         22px;
    --body-1-relaxed-lh: 27px;
    --body-2-size:       16px;
    --body-2-lh:         20px;
    --body-2-relaxed-lh: 26px;

    /* Bullets */
    --bullet-1-size:     18px;
    --bullet-1-lh:       22px;
    --bullet-2-size:     16px;
    --bullet-2-lh:       20px;

    /* Overline bumps (1st of 2 stages) */
    --overline-size:     16px;
    --overline-lh:       20px;

    /* Captions + badges + breadcrumb */
    --caption-size:      14px;
    --caption-lh:        18px;
    --badge-size:        14px;
    --badge-lh:          18px;
    --breadcrumb-size:   14px;
    --breadcrumb-lh:     18px;

    /* Form input */
    --form-input-size:   18px;
    --form-input-lh:     22px;

    /* Table */
    --table-header-size:       15px;
    --table-header-lh:         21px;
    --table-cell-size:         14px;
    --table-cell-lh:           18px;
    --table-cell-primary-size: 15px;
    --table-cell-primary-lh:   21px;

    /* ========= SPACING — tablet+ ========= */
    --padding-section-x: 24px;
    --padding-section-y: 32px;
    --padding-x:         16px;
    --padding-x-sm:      12px;
    --padding-x-xs:      8px;
    --padding-y:         20px;
    --padding-y-sm:      16px;

    /* spacing/padding/soft-* bump up one step on tablet+ */
    --padding-soft-4:    4px;
    --padding-soft-6:    6px;
    --padding-soft-8:    8px;
    --padding-soft-12:   10px;

    /* spacing/gap — loosens horizontally */
    --gap-x:             20px;
    --gap-x-sm:          12px;
    --gap-x-xs:          8px;
    --gap-y:             24px;
    --gap-y-sm:          16px;
    --gap-y-xs:          8px;
    --gap-section-y:     24px;
    --gap-section-y-lg:  40px;

    /* spacing/gap/soft-* bump up one step on tablet+ */
    --gap-soft-4:        4px;
    --gap-soft-6:        6px;
    --gap-soft-8:        8px;
    --gap-soft-12:       10px;

    /* spacing/margin */
    --margin-x:          16px;
    --margin-y:          16px;

    /* Form spacing bumps up */
    --form-inner-padding: 12px;

    /* ========= BUTTONS — tablet+ ========= */
    --button-padding-small-x:         12px;
    --button-padding-small-x-icon:    10px;
    --button-padding-regular-x:       14px;
    --button-padding-regular-x-icon:  12px;
    --button-size-small:              36px;
    --button-size-regular:            40px;
    --button-icon-small:              20px;
    --button-icon-regular:            24px;
    --button-1-size:                  20px;
    --button-1-lh:                    24px;
    --button-2-size:                  16px;
    --button-2-lh:                    20px;

    /* radius/button: 6 (mobile, set in :root) → 8 on tablet+ (confirmed KE 20631:7219, NS 21413:10528) */
    --r-button:          8px;

    /* radius/table bumps from 6 → 8 on tablet+ (stays 8 through desktop) */
    --r-table:           8px;

    /* radius/card bumps from 10 → 16 on tablet+ (stays 16 through desktop) */
    --r-card:            16px;

    /* shapes/icon-size-md bumps from 18 → 22 on tablet+ (stays 22 through desktop, 24 on desktop-lg) */
    --icon-md:           22px;

    /* layout */
    --content-max-width:     720px;
    --content-with-panel:    720px;
    --narrow-content-width:  720px;
    --content-panel:         720px;
    --col-2-width:           168px;   /* general/2-col-width (tablet) */
    --qa-table-width:        720px;   /* quick-answer/table-width (tablet) */
    --top-nav-height:        64px;
  }
}
@media (min-width: 1280px){
:root{
    /* ========= TYPE SCALE — desktop+ ========= */
    /* body-1 line-height loosens for desktop reading (drops back to 22 at 1440) */
    --body-1-lh:         27px;

    /* overline — 2nd stage, jumps to display-like size */
    --overline-size:     22px;
    --overline-lh:       28px;

    /* tag bumps up on desktop+ */
    --tag-size:          16px;
    --tag-lh:            23px;

    /* ========= SPACING — desktop+ ========= */
    --padding-section-x: 32px;
    --padding-section-y: 48px;
    --padding-x:         24px;
    --padding-x-sm:      16px;
    --padding-x-xs:      12px;
    --padding-y:         24px;

    /* spacing/padding/soft-12 bumps from 10 → 12 on desktop (soft-4/6/8 stay at tablet values) */
    --padding-soft-12:   12px;
    --gap-soft-12:       12px;

    /* spacing/gap */
    --gap-x:             24px;
    --gap-x-sm:          16px;
    --gap-section-y:     28px;
    --gap-section-y-lg:  48px;

    /* spacing/margin */
    --margin-x:          24px;
    --margin-y:          24px;

    /* Button tokens — desktop bumps button/size-regular from 40 → 44.
       All other button tokens remain at tablet values (see 768 block). */
    --button-size-regular: 44px;

    /* radius/tooltip bumps from 6 → 8 on desktop */
    --r-tooltip:         8px;

    /* radius/button final bump 6 → 8 on desktop+ */
    --r-button:          8px;

    /* layout */
    --content-max-width:    1216px;
    --content-with-panel:   760px;
    --narrow-content-width: 1130px;
    --content-panel:        346px;   /* narrow side panel on wide layouts */
    --col-2-width:          184px;   /* general/2-col-width (desktop) */
    --qa-table-width:       760px;   /* quick-answer/table-width (desktop+) */
    --top-nav-height:       72px;
  }
}
@media (min-width: 1440px){
:root{
    /* ========= TYPE SCALE — desktop-lg ========= */
    /* body-1 line-height tightens back to tablet value (confirmed across library, Blog, CHC) */
    --body-1-lh:          22px;

    /* ========= SPACING — desktop-lg ========= */
    --padding-section-x:  40px;
    --gap-section-y:      32px;

    /* icon size bumps from 22 → 24 */
    --icon-md:            24px;

    /* layout */
    --content-max-width:  1360px;
    --col-2-width:        206px;   /* general/2-col-width (desktop-lg) */
    --top-nav-height:     80px;
  }
}
/* Live-site font stack (verbatim from computed style on Strapi, 2026-09-28).
   Overrides the skill's Noto-first 繁中 stack — see OPEN ITEM in build.mjs. */
:root{--font-sans:"Albert Sans", "Open Sans", "Noto Sans", "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Segoe UI", SegoeUI, "Microsoft JhengHei", 微軟正黑體, "Helvetica Neue", Helvetica, Arial, sans-serif;--font-sans-tc:"Albert Sans", "Open Sans", "Noto Sans", "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Segoe UI", SegoeUI, "Microsoft JhengHei", 微軟正黑體, "Helvetica Neue", Helvetica, Arial, sans-serif;--font-family-default:"Albert Sans", "Open Sans", "Noto Sans", "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Segoe UI", SegoeUI, "Microsoft JhengHei", 微軟正黑體, "Helvetica Neue", Helvetica, Arial, sans-serif}
/* ─────────────────────────────────────────────────────────────
   MHG Alpha Design System — LAYOUT GRID
   Source: Figma "Grid Definition" page (node 1604:1307).
   Load after tokens.css. Two grids exist: Product and Campaign.

   Breakpoints (match tokens.css): mobile ≤767, tablet 768–1279,
   desktop 1280–1439, desktop-lg 1440+. Reference device widths in
   Figma: 360, 428, 768, 1024, 1280, 1366, 1440, 1920, 2560.

   PRODUCT grid (default app/page content)
   ┌────────────┬───────┬────────┬──────────────────┬──────────┐
   │ breakpoint │ gap   │ margin │ content width    │ columns  │
   ├────────────┼───────┼────────┼──────────────────┼──────────┤
   │ 0–767      │ 16px  │ 16px   │ 328 – 736px      │ fluid    │
   │ 768–1279   │ 16px  │ 24px   │ 720 – 1247px     │ fluid    │
   │ 1280–1439  │ 24px  │ 32px   │ 1130px (capped)  │ 12       │
   │ 1440+      │ 24px  │ 40px   │ 1130px (capped)  │ 12       │
   └────────────┴───────┴────────┴──────────────────┴──────────┘
   Desktop content caps at 1130px = 12 cols × 72.17px + 11 × 24px gap.

   CAMPAIGN grid (campaign / landing pages)
   ┌────────────┬───────┬────────┬──────────────────┬──────────┐
   │ 0–767      │ 16px  │ 16px   │ 328 – 736px      │ 1        │
   │ 768+       │ 16px  │ 24px   │ 720 – 976px      │ 2        │
   └────────────┴───────┴────────┴──────────────────┴──────────┘
   ───────────────────────────────────────────────────────────── */
:root{
  /* Product grid — mobile (≤767) defaults */
  --grid-margin:        16px;   /* page gutter (outer) */
  --grid-gap:           16px;   /* gutter between columns */
  --grid-max:           none;   /* content max-width (uncapped until desktop) */
  --grid-columns:       4;      /* mobile column count for .mhg-grid */
}
@media (min-width: 768px){
:root{
    --grid-margin:      24px;
    --grid-gap:         16px;
    --grid-max:         1247px;
    --grid-columns:     8;
  }
}
@media (min-width: 1280px){
:root{
    --grid-margin:      32px;
    --grid-gap:         24px;
    --grid-max:         1130px;   /* hard cap */
    --grid-columns:     12;
  }
}
@media (min-width: 1440px){
:root{
    --grid-margin:      40px;
    --grid-gap:         24px;
    --grid-max:         1130px;
    --grid-columns:     12;
  }
}
/* Centered page container with responsive gutters + content cap.
   Mobile/tablet fill available width; desktop caps content at 1130px
   (+ gutters). max-width is only set from 1280 up. */
.mhg-tax-quiz .mhg-container{
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}
@media (min-width: 1280px){
.mhg-tax-quiz .mhg-container{ max-width: calc(1130px + (var(--grid-margin) * 2)); }
}
/* 12-column (responsive) grid for laying out content inside a container. */
.mhg-tax-quiz .mhg-grid{
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);
}
/* Campaign variant — set on the container/grid for campaign & landing pages. */
.mhg-tax-quiz .mhg-container--campaign{ max-width: calc(976px + (var(--grid-margin) * 2)); }
@media (min-width: 768px){
.mhg-tax-quiz .mhg-grid--campaign{ --grid-columns: 2; --grid-gap: 16px; }
}
@media (max-width: 767px){
.mhg-tax-quiz .mhg-grid--campaign{ --grid-columns: 1; }
}
/* Column-span helpers (1–12). Use inside .mhg-grid at desktop. */
.mhg-tax-quiz .mhg-col-1{grid-column:span 1}
.mhg-tax-quiz .mhg-col-2{grid-column:span 2}
.mhg-tax-quiz .mhg-col-3{grid-column:span 3}
.mhg-tax-quiz .mhg-col-4{grid-column:span 4}
.mhg-tax-quiz .mhg-col-5{grid-column:span 5}
.mhg-tax-quiz .mhg-col-6{grid-column:span 6}
.mhg-tax-quiz .mhg-col-7{grid-column:span 7}
.mhg-tax-quiz .mhg-col-8{grid-column:span 8}
.mhg-tax-quiz .mhg-col-9{grid-column:span 9}
.mhg-tax-quiz .mhg-col-10{grid-column:span 10}
.mhg-tax-quiz .mhg-col-11{grid-column:span 11}
.mhg-tax-quiz .mhg-col-12{grid-column:span 12}
/* ─────────────────────────────────────────────────────────────
   MoneyHero Group — Button Component
   Component class only. All values reference semantic tokens
   defined in ../tokens.css.

   Synced to Figma file: MHG Alpha Design System (82tOs1i8NmsLWxZkHTzB80)
   ───────────────────────────────────────────────────────────── */
.mhg-tax-quiz .mhg-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);

  box-sizing: border-box;
  height: var(--button-size-regular);
  padding: 0 var(--button-padding-regular-x);
  border: 1px solid transparent;
  border-radius: var(--radius-button);

  background: var(--buttons-primary);
  color: var(--text-on-dark);

  font-family: var(--font-family-default);
  font-size: var(--font-size-button-1);
  line-height: var(--line-height-button-1);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;

  cursor: pointer;
  user-select: none;
  appearance: none;
  transition:
    background-color .15s ease,
    border-color     .15s ease,
    color            .15s ease;
}
.mhg-tax-quiz .mhg-btn:hover:not(:disabled):not([aria-disabled="true"]){
  background: var(--buttons-primary-hover);
}
.mhg-tax-quiz .mhg-btn:focus-visible{
  outline: 2px solid var(--buttons-primary);
  outline-offset: 2px;
}
.mhg-tax-quiz .mhg-btn:disabled, .mhg-tax-quiz .mhg-btn[aria-disabled="true"]{
  background: var(--buttons-disable);
  color: var(--text-on-dark);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}
/* ── Variants ── */
.mhg-tax-quiz .mhg-btn--primary{
  background: var(--buttons-primary);
  color: var(--text-on-dark);
  border-color: transparent;
}
.mhg-tax-quiz .mhg-btn--primary:hover:not(:disabled):not([aria-disabled="true"]){
  background: var(--buttons-primary-hover);
}
.mhg-tax-quiz .mhg-btn--secondary{
  background: var(--buttons-secondary);
  color: var(--buttons-secondary-text);
  border-color: transparent;
}
.mhg-tax-quiz .mhg-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]){
  background: var(--buttons-secondary-hover);
  color: var(--text-on-dark);
}
.mhg-tax-quiz .mhg-btn--cta{
  background: var(--buttons-cta);
  color: var(--text-on-dark);
  border-color: transparent;
}
.mhg-tax-quiz .mhg-btn--cta:hover:not(:disabled):not([aria-disabled="true"]){
  background: var(--buttons-cta-hover);
}
.mhg-tax-quiz .mhg-btn--neutral{
  background: var(--buttons-neutral);
  color: var(--text-on-dark);
  border-color: transparent;
}
.mhg-tax-quiz .mhg-btn--neutral:hover:not(:disabled):not([aria-disabled="true"]){
  background: var(--buttons-neutral-hover);
}
/* Outline — neutral gray border (default).
   For brand-tinted outline emphasis, use .mhg-btn--outline-primary. */
.mhg-tax-quiz .mhg-btn--outline{
  background: var(--buttons-base);
  color: var(--text-primary);
  border-color: var(--borders-default);
}
.mhg-tax-quiz .mhg-btn--outline:hover:not(:disabled):not([aria-disabled="true"]){
  background: var(--fill-alternative-1);
  color: var(--text-primary);
  border-color: var(--text-secondary-lighter);
}
.mhg-tax-quiz .mhg-btn--outline:disabled, .mhg-tax-quiz .mhg-btn--outline[aria-disabled="true"]{
  background: var(--buttons-base);
  color: var(--buttons-disable);
  border-color: var(--borders-default);
}
.mhg-tax-quiz .mhg-btn--outline-primary{
  background: var(--buttons-base);
  color: var(--buttons-primary);
  border-color: var(--buttons-primary);
}
.mhg-tax-quiz .mhg-btn--outline-primary:hover:not(:disabled):not([aria-disabled="true"]){
  background: var(--buttons-outline-hover-bg);
  color: var(--buttons-primary-hover);
  border-color: var(--buttons-primary-hover);
}
.mhg-tax-quiz .mhg-btn--outline-primary:disabled, .mhg-tax-quiz .mhg-btn--outline-primary[aria-disabled="true"]{
  background: var(--buttons-base);
  color: var(--buttons-disable);
  border-color: var(--buttons-disable);
}
.mhg-tax-quiz .mhg-btn--ghost{
  background: transparent;
  color: var(--buttons-primary);
  border-color: transparent;
}
.mhg-tax-quiz .mhg-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]){
  background: var(--buttons-outline-hover-bg);
  color: var(--buttons-primary-hover);
}
.mhg-tax-quiz .mhg-btn--ghost:disabled, .mhg-tax-quiz .mhg-btn--ghost[aria-disabled="true"]{
  background: transparent;
  color: var(--buttons-disable);
}
/* ── Sizes ── */
.mhg-tax-quiz .mhg-btn--small{
  height: var(--button-size-small);
  padding: 0 var(--button-padding-small-x);
  font-size: var(--font-size-button-2);
  line-height: var(--line-height-button-2);
}
/* ── Icon modifiers ── */
.mhg-tax-quiz .mhg-btn--icon{
  padding: 0 var(--button-padding-regular-x-icon);
}
.mhg-tax-quiz .mhg-btn--icon.mhg-btn--small{
  padding: 0 var(--button-padding-small-x-icon);
}
.mhg-tax-quiz .mhg-btn--icon-only{
  width: var(--button-size-regular);
  padding: 0;
}
.mhg-tax-quiz .mhg-btn--icon-only.mhg-btn--small{
  width: var(--button-size-small);
}
.mhg-tax-quiz .mhg-btn__icon{
  flex-shrink: 0;
  width: var(--button-icon-regular);
  height: var(--button-icon-regular);
}
.mhg-tax-quiz .mhg-btn--small .mhg-btn__icon{
  width: var(--button-icon-small);
  height: var(--button-icon-small);
}
/* ── Layout modifier ── */
.mhg-tax-quiz .mhg-btn--block{
  display: flex;
  width: 100%;
}
/* ─────────────────────────────────────────────────────────────
   MH Strapi-parity component layer
   Loaded AFTER tokens + grid + mhg-design buttons.css (see build.mjs).

   Every value is a semantic token from mhg-design/references/tokens.css.
   Each component names the live Strapi source it mirrors, so a reviewer
   can open that file and check the match rather than eyeball it:
     fe-services-master/styles/globals.common.css   (.mhg-alpha-btn*)
     cms-components-main/src/components/ProductCard  (card, header, CTA)
     cms-components-main/cms.css                     (.card-radius, headings)
   Verified against computed styles on moneyhero.com.hk/zh/personal-loan
   (Strapi) on 2026-09-28 at 1024px: card 1px #e0e0e0 / 16px radius /
   12px padding / no shadow; CTA 36px / 8px radius / 16-20 600.

   RULE: no raw hex, px font sizes, 800/900 weights, gradients or
   coloured shadows in this file. build.mjs asserts it.
   ───────────────────────────────────────────────────────────── */
/* ── Page root ─────────────────────────────────────────────────
   tokens.css ships element defaults (html, body, h1–h5, p, a) that would
   restyle the HubSpot header and footer. build.mjs strips them and this
   block re-applies them under .mhg-page only. :where() keeps them at
   class-level specificity so any component class overrides them. */
.mhg-tax-quiz .mhg-page{
  font-family:var(--font-sans);
  font-size:var(--body-2-size);
  line-height:var(--body-2-lh);
  font-weight:var(--body-2-weight);
  color:var(--text-primary);
  letter-spacing:var(--letter-spacing-normal);
  -webkit-font-smoothing:antialiased;
}
.mhg-tax-quiz .mhg-page :where(h1){font:var(--display-3-weight) var(--display-3-size)/var(--display-3-lh) var(--font-sans)}
.mhg-tax-quiz .mhg-page :where(h2){font:var(--display-1-weight) var(--display-1-size)/var(--display-1-lh) var(--font-sans)}
/* cms.css: h2 = display-1 */
.mhg-tax-quiz .mhg-page :where(h3){font:var(--title-2-weight) var(--title-2-size)/var(--title-2-lh) var(--font-sans)}
/* cms.css: h3 = title-2 */
.mhg-tax-quiz .mhg-page :where(h4){font:var(--subheading-2-weight) var(--subheading-2-size)/var(--subheading-2-lh) var(--font-sans)}
/* cms.css: h4 = subheading-2 */
/* ── Icons (MHG Alpha "Icons", Figma node 139:2054) ────────────
   Material Symbols Outlined, weight 300, grade 0, 24px — as the Figma
   frame specifies. Inline <svg><use href="#mhi-NAME"></svg>; the sprite is
   dist/mh-icons-sprite.html. Colour follows text (currentColor). */
.mhg-tax-quiz .mhg-icon{display:inline-block;flex-shrink:0;width:var(--mhg-icon-size,24px);height:var(--mhg-icon-size,24px);fill:currentColor;vertical-align:middle}
.mhg-tax-quiz .mhg-icon--18{--mhg-icon-size:var(--button-icon-small)}
.mhg-tax-quiz .mhg-icon--22{--mhg-icon-size:var(--button-icon-regular)}
.mhg-tax-quiz .mhg-icon--16{--mhg-icon-size:16px}
.mhg-tax-quiz .mhg-icon--20{--mhg-icon-size:20px}
/* ── Buttons — mirrors .mhg-alpha-btn (globals.common.css:302-485) ── */
.mhg-tax-quiz .mhg-alpha-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);box-sizing:border-box;height:var(--button-size-regular);padding:0 var(--button-padding-regular-x);border:1px solid transparent;border-radius:var(--radius-button);font:var(--button-1-weight) var(--button-1-size)/var(--button-1-lh) var(--font-sans);letter-spacing:0;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.mhg-tax-quiz .mhg-alpha-btn:hover{text-decoration:none}
.mhg-tax-quiz .mhg-alpha-btn:focus-visible{outline:2px solid var(--buttons-primary);outline-offset:2px}
.mhg-tax-quiz .mhg-alpha-btn-cta{background:var(--buttons-cta);color:var(--buttons-base)}
.mhg-tax-quiz .mhg-alpha-btn-cta:hover{background:var(--buttons-cta-hover)}
.mhg-tax-quiz .mhg-alpha-btn-primary{background:var(--buttons-primary);color:var(--buttons-base)}
.mhg-tax-quiz .mhg-alpha-btn-primary:hover{background:var(--buttons-primary-hover)}
.mhg-tax-quiz .mhg-alpha-btn-outline-primary{background:var(--buttons-base);color:var(--buttons-primary);border-color:var(--buttons-primary)}
.mhg-tax-quiz .mhg-alpha-btn-outline-primary:hover{background:var(--buttons-primary-hover);border-color:var(--buttons-primary-hover);color:var(--buttons-base)}
.mhg-tax-quiz .mhg-alpha-btn-small{height:var(--button-size-small);padding:0 var(--button-padding-small-x);font:var(--button-2-weight) var(--button-2-size)/var(--button-2-lh) var(--font-sans)}
/* ── Card — mirrors ProductCard container (ProductCard.tsx:322) ──
   `card-radius border border-borders/default p-3 bg-fill/card`, no shadow. */
.mhg-tax-quiz .mhg-alpha-card{background:var(--fill-card);border:1px solid var(--borders-default);border-radius:var(--r-card);padding:var(--space-3)}
/* ── Tag / chip — Strapi Tag uses the tag type style ── */
.mhg-tax-quiz .mhg-alpha-tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-0-5) var(--space-2);border-radius:var(--r-button);font:var(--tag-weight) var(--tag-size)/var(--tag-lh) var(--font-sans)}
/* ── ICON MASKS — MHG Alpha, the six this page paints ── */
:root{--mhi-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M9.55%2017.6534L4.2155%2012.3189L5.2845%2011.2496L9.55%2015.5151L18.7155%206.34961L19.7845%207.41886L9.55%2017.6534Z'%2F%3E%3C%2Fsvg%3E")}
:root{--mhi-close:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M6.39999%2018.6534L5.34616%2017.5995L10.9462%2011.9995L5.34616%206.39953L6.39999%205.3457L12%2010.9457L17.6%205.3457L18.6538%206.39953L13.0538%2011.9995L18.6538%2017.5995L17.6%2018.6534L12%2013.0534L6.39999%2018.6534Z'%2F%3E%3C%2Fsvg%3E")}
:root{--mhi-expand_more:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%2015.0387L6.34616%209.38488L7.39999%208.33105L12%2012.9311L16.6%208.33105L17.6538%209.38488L12%2015.0387Z'%2F%3E%3C%2Fsvg%3E")}
:root{--mhi-info:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M450-290h60v-230h-60v230Zm52.92-307.75q9.39-9.29%209.39-23.02t-9.29-23.02q-9.29-9.28-23.02-9.28t-23.02%209.28q-9.29%209.29-9.29%2023.02t9.39%2023.02q9.38%209.29%2022.92%209.29%2013.54%200%2022.92-9.29ZM480.07-100q-78.84%200-148.21-29.92t-120.68-81.21q-51.31-51.29-81.25-120.63Q100-401.1%20100-479.93q0-78.84%2029.92-148.21t81.21-120.68q51.29-51.31%20120.63-81.25Q401.1-860%20479.93-860q78.84%200%20148.21%2029.92t120.68%2081.21q51.31%2051.29%2081.25%20120.63Q860-558.9%20860-480.07q0%2078.84-29.92%20148.21t-81.21%20120.68q-51.29%2051.31-120.63%2081.25Q558.9-100%20480.07-100Zm-.07-60q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0-320Z'%2F%3E%3C%2Fsvg%3E")}
:root{--mhi-open_in_new:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M5.3077%2020.5C4.80257%2020.5%204.375%2020.325%204.025%2019.975C3.675%2019.625%203.5%2019.1974%203.5%2018.6923V5.3077C3.5%204.80257%203.675%204.375%204.025%204.025C4.375%203.675%204.80257%203.5%205.3077%203.5H11.6153V4.99998H5.3077C5.23077%204.99998%205.16024%205.03203%205.09612%205.09613C5.03202%205.16024%204.99997%205.23077%204.99997%205.3077V18.6923C4.99997%2018.7692%205.03202%2018.8397%205.09612%2018.9038C5.16024%2018.9679%205.23077%2019%205.3077%2019H18.6923C18.7692%2019%2018.8397%2018.9679%2018.9038%2018.9038C18.9679%2018.8397%2019%2018.7692%2019%2018.6923V12.3846H20.5V18.6923C20.5%2019.1974%2020.325%2019.625%2019.975%2019.975C19.625%2020.325%2019.1974%2020.5%2018.6923%2020.5H5.3077ZM9.7192%2015.3346L8.66538%2014.2808L17.9461%204.99998H14V3.5H20.5V9.99998H19V6.0538L9.7192%2015.3346Z'%2F%3E%3C%2Fsvg%3E")}
:root{--mhi-featured_seasonal_and_gifts:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M164.62-100v-435.39H100v-208.45h206.85q-8.46-9.77-11.5-22.01-3.04-12.23-3.04-25.69%200-44.87%2031.41-76.28%2031.41-31.41%2076.28-31.41%2023%200%2042.62%209.65%2019.61%209.66%2035.07%2025.81%2015.46-16.77%2035.08-26.11%2019.61-9.35%2042.61-9.35%2044.88%200%2076.29%2031.41%2031.41%2031.41%2031.41%2076.28%200%2013.31-3.35%2025.31-3.35%2012-11.19%2022.39H860v208.45h-64.62V-100H164.62ZM521.5-825.52q-13.81%2013.71-13.81%2033.98%200%2020.27%2013.71%2033.98%2013.71%2013.72%2033.98%2013.72%2020.27%200%2033.99-13.72%2013.71-13.71%2013.71-33.98%200-20.27-13.81-33.98-13.81-13.71-33.89-13.71-20.07%200-33.88%2013.71Zm-169.19%2033.98q0%2020.27%2013.8%2033.98%2013.81%2013.72%2033.89%2013.72t33.89-13.72q13.8-13.71%2013.8-33.98%200-20.27-13.71-33.98-13.71-13.71-33.98-13.71-20.27%200-33.98%2013.71-13.71%2013.71-13.71%2033.98ZM160-683.85v88.47h290v-88.47H160ZM450-160v-375.39H224.61V-160H450Zm60%200h225.39v-375.39H510V-160Zm290-435.38v-88.47H510v88.47h290Z'%2F%3E%3C%2Fsvg%3E")}
/* 稅季知識王 — campaign stylesheet on the MHG brand tokens. GENERATED by convert-css.py
   from the campaign's own stylesheet: same layout and components (Marketing's design),
   values from the brand guideline (type scale, weights ≤700, letter-spacing 0, colour,
   radius and shadow tokens). Do not hand-edit; change convert-css.py and re-run. */
:root{
  --mh-blue:var(--fill-primary-dark);        --mh-bright-blue:var(--fill-primary);
  --mh-orange:var(--buttons-cta);            --mh-orange-hover:var(--buttons-cta-hover);
  --mh-orange-deep:var(--buttons-secondary-hover);   /* amber-900: the hard edge under the game button */
  --mh-yellow:var(--fill-secondary);         --mh-green:var(--success);
  --mh-green-soft:var(--highlight-green-light);
  --ink:var(--text-primary);                 --muted:var(--text-muted);
  --on-dark:var(--text-on-dark-2);
  --surface-card:var(--fill-card);           --surface-tint:var(--fill-primary-light);
  --surface-tint-2:var(--fill-alternative-2); --surface-panel:var(--fill-alternative-2);
  --surface-pill:var(--fill-primary-light);  --track:var(--fill-alternative-3);
  --hairline:var(--borders-default);         --hairline-soft:var(--borders-form-default);
  --border-soft:var(--borders-default);      --edge:var(--borders-default);
  --danger:var(--status-danger-fg);          --danger-bg:var(--highlight-red-light);
  --danger-border:var(--highlight-red-light);
  --warn-bg:var(--warning-bg);               --warn-border:var(--warning-border);
  --warn-ink:var(--warning-text);
  --shadow-soft:var(--shadow-card);
  --shell-w:min(100%,520px); --shell-pad-top:40px; --shell-pad-bottom:40px;
  --font-tc:var(--font-sans); --font-num:var(--font-sans);
}
.mhg-tax-quiz, .mhg-tax-quiz *, .mhg-tax-quiz *::before, .mhg-tax-quiz *::after{box-sizing:border-box}
.mhg-tax-quiz [hidden]{display:none !important}
.mhg-tax-quiz{margin:0; color:var(--ink); background:var(--fill-primary-light); font-family:var(--font-tc); font-size:var(--body-1-size); line-height:normal; -webkit-font-smoothing:antialiased}
.mhg-tax-quiz *{font-family:inherit}
.mhg-tax-quiz button, .mhg-tax-quiz input{font:inherit}
.mhg-tax-quiz button{touch-action:manipulation}
.mhg-tax-quiz img, .mhg-tax-quiz svg{max-width:100%; display:block}
.mhg-tax-quiz h1, .mhg-tax-quiz h2, .mhg-tax-quiz h3, .mhg-tax-quiz h4, .mhg-tax-quiz h5{margin:0}
.mhg-tax-quiz p{margin:0}
.mhg-tax-quiz ul{margin:0; padding:0; list-style:none}
.mhg-tax-quiz a{color:var(--mh-bright-blue); font-weight:var(--font-weight-bold); text-decoration:none}
.mhg-tax-quiz a:hover{text-decoration:underline}
.mhg-tax-quiz h1, .mhg-tax-quiz h2, .mhg-tax-quiz h3, .mhg-tax-quiz h4, .mhg-tax-quiz h5, .mhg-tax-quiz p, .mhg-tax-quiz li, .mhg-tax-quiz span, .mhg-tax-quiz div, .mhg-tax-quiz button, .mhg-tax-quiz label{word-break:break-word; overflow-wrap:anywhere}
.mhg-tax-quiz .secnav{position:sticky; top:0; z-index:40; background:var(--fill-card);
  box-shadow:0 1px 0 var(--borders-default)}
.mhg-tax-quiz .secnav__in{display:flex; align-items:center; justify-content:center; gap:10px;
  width:min(100%,1100px); margin-inline:auto; padding:10px 16px}
.mhg-tax-quiz .secnav__list{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:4px; margin:0; padding:0; list-style:none; min-width:0}
.mhg-tax-quiz .secnav__btn{padding:9px 16px; background:none; border:0; border-radius:var(--r-pill);
  color:var(--mh-blue); font-family:inherit; font-size:var(--body-1-size); font-weight:var(--font-weight-bold);
  white-space:nowrap; cursor:pointer}
.mhg-tax-quiz .secnav__btn[aria-current="true"]{background:var(--mh-blue); color:var(--fill-card)}
.mhg-tax-quiz .secnav__top{flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px;
  padding:0; background:var(--mh-yellow); border:0; border-radius:var(--r-pill);
  color:var(--mh-blue); font-size:var(--title-2-size); font-weight:var(--font-weight-bold); cursor:pointer}
@media (hover:hover) and (pointer:fine){
.mhg-tax-quiz .secnav__btn:hover{background:var(--surface-tint)}
.mhg-tax-quiz .secnav__btn[aria-current="true"]:hover{background:var(--mh-blue)}
.mhg-tax-quiz .secnav__top:hover{filter:brightness(.95)}
}
@media (max-width:640px){
.mhg-tax-quiz .secnav__in{gap:6px; padding:8px 10px}
.mhg-tax-quiz .secnav__btn{padding:7px 11px; font-size:var(--caption-size)}
.mhg-tax-quiz .secnav__top{width:32px; height:32px; font-size:var(--body-1-size)}
}
@media (prefers-reduced-motion:reduce){
.mhg-tax-quiz{scroll-behavior:auto}
}
.mhg-tax-quiz .site-shell, .mhg-tax-quiz .below, .mhg-tax-quiz .warnbar, .mhg-tax-quiz .disclaimer{
  width:auto;
  margin-inline:calc(50% - 50vw + var(--mh-sbw, 0px) / 2);
}
.mhg-tax-quiz .site-shell{
  background:var(--fill-primary-light);
  display:flex; flex-direction:column; align-items:center;
  --shell-pad-x:18px;
  padding:var(--shell-pad-top) var(--shell-pad-x) var(--shell-pad-bottom);
}
.mhg-tax-quiz .blurb-art{flex:0 0 auto; width:170px; height:auto}
.mhg-tax-quiz .game-blurb__t{margin:0}
@media (max-width:820px){
.mhg-tax-quiz .blurb-art{display:none}
}
.mhg-tax-quiz .sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.mhg-tax-quiz .game-blurb{display:flex; align-items:center; gap:24px; width:min(100%,820px);
  margin-top:20px; padding:22px 26px;
  background:var(--fill-card); border-radius:var(--r-card); box-shadow:var(--shadow-soft);
  color:var(--mh-blue); font-size:var(--body-1-size); font-weight:var(--font-weight-bold); line-height:1.9; text-align:center}
.mhg-tax-quiz .game-blurb b{color:var(--mh-orange); font-weight:var(--font-weight-bold)}
@media (max-width:640px){
.mhg-tax-quiz .game-blurb{padding:18px 16px; font-size:var(--body-2-size); line-height:1.85}
}
.mhg-tax-quiz .warn-footer{width:var(--shell-w); padding:18px 0 2px; color:var(--mh-blue); font-size:var(--caption-size); font-weight:var(--font-weight-bold); text-align:center}
.mhg-tax-quiz .game-card{
  width:var(--shell-w); min-height:650px; overflow:hidden;
  background:var(--surface-card); border:1px solid var(--edge);
  border-radius:var(--r-card); box-shadow:var(--shadow-card);
}
.mhg-tax-quiz .panel{min-height:650px; padding:38px 30px 30px}
.mhg-tax-quiz .panel[hidden]{display:none}
.mhg-tax-quiz .start-panel{display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center}
.mhg-tax-quiz .campaign-name{margin:0 0 22px; color:var(--mh-blue); font-size:var(--display-5-size);
  font-weight:var(--font-weight-bold);  line-height:1.25; text-align:center}
@media (max-width:640px){
.mhg-tax-quiz .campaign-name{margin-bottom:16px}
}
.mhg-tax-quiz .tax-hero-wrap{width:min(230px,62%); margin:0 auto 14px}
.mhg-tax-quiz .tax-hero{display:block; width:100%; height:auto; margin:-18.4% 0 -15%}
.mhg-tax-quiz .eyebrow{margin:0 0 8px; color:var(--mh-bright-blue); font-size:var(--caption-size); font-weight:var(--font-weight-bold); }
.mhg-tax-quiz .start-panel h1{margin:0; color:var(--mh-blue); font-size:var(--display-5-size); line-height:1.05; }
.mhg-tax-quiz .start-panel h1 b{color:var(--mh-orange); font-family:var(--font-num); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .lead{margin:20px 0 22px; color:var(--muted); font-weight:var(--font-weight-semibold); line-height:1.75}
.mhg-tax-quiz .rule-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; margin-bottom:22px}
.mhg-tax-quiz .rule-row span{padding:11px 4px; background:var(--surface-tint-2); border-radius:var(--r-card-inner); color:var(--muted); font-size:var(--caption-size)}
.mhg-tax-quiz .rule-row b{color:var(--mh-blue); font-size:var(--title-1-size)}
.mhg-tax-quiz .primary-button{
  width:100%; padding:16px 20px; border:0; border-radius:var(--r-button);
  background:var(--mh-orange); color:var(--fill-card); font-size:var(--title-2-size); font-weight:var(--font-weight-bold);
  cursor:pointer; box-shadow:0 8px var(--mh-orange-deep);
  transition:transform .12s,box-shadow .12s;
}
.mhg-tax-quiz .primary-button:active:not(:disabled){transform:translateY(5px); box-shadow:0 3px var(--mh-orange-deep)}
.mhg-tax-quiz .primary-button:focus-visible{outline:3px solid var(--mh-bright-blue); outline-offset:3px}
.mhg-tax-quiz .primary-button:disabled{background:var(--color-gray-300); box-shadow:0 8px var(--color-gray-500); cursor:not-allowed}
.mhg-tax-quiz .primary-button span{margin-left:10px}
.mhg-tax-quiz .microcopy{margin:18px 0 0; color:var(--muted); font-size:var(--caption-size)}
.mhg-tax-quiz .text-button{display:block; margin:14px auto 0; padding:0; background:0 0; border:0; color:var(--muted); font-size:var(--caption-size); text-decoration:underline; cursor:pointer}
.mhg-tax-quiz .scoreboard{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mhg-tax-quiz .scoreboard>div{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; background:var(--surface-tint); border-radius:var(--r-card-inner)}
.mhg-tax-quiz .scoreboard span{color:var(--muted); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .scoreboard strong{color:var(--mh-blue); font-family:var(--font-num); font-size:var(--display-3-size)}
.mhg-tax-quiz .scoreboard strong.urgent{color:var(--danger); animation:pulse .7s infinite alternate}
.mhg-tax-quiz .scoreboard small{margin-left:3px; font-family:inherit; font-size:var(--caption-size); color:inherit}
@keyframes pulse{50%{opacity:.5}}
.mhg-tax-quiz .progress-track{height:8px; margin:18px 0 38px; background:var(--track); border-radius:var(--r-pill); overflow:hidden}
.mhg-tax-quiz .progress-track span{display:block; height:100%; border-radius:inherit; background:var(--buttons-cta); transition:width .2s linear}
.mhg-tax-quiz .question-meta{display:flex; align-items:center; justify-content:space-between}
.mhg-tax-quiz .question-meta .cat{padding:6px 10px; background:var(--surface-pill); border-radius:var(--r-pill); color:var(--mh-bright-blue); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .question-meta small{color:var(--muted); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .quiz-panel h2{min-height:120px; margin:20px 0 26px; color:var(--mh-blue); font-size:var(--display-3-size); line-height:1.38; }
.mhg-tax-quiz .answers{display:grid; gap:14px}
.mhg-tax-quiz .answers button{
  min-height:70px; padding:12px 18px; text-align:left; cursor:pointer;
  background:var(--fill-card); border:2px solid var(--hairline); border-radius:var(--r-card-inner);
  color:var(--mh-blue); font-size:var(--title-1-size); font-weight:var(--font-weight-bold); transition:all .12s;
}
@media (hover:hover) and (pointer:fine){
.mhg-tax-quiz .answers button:hover:not(:disabled){border-color:var(--mh-bright-blue); background:var(--surface-tint); transform:translateY(-2px)}
}
.mhg-tax-quiz .answers button:focus-visible{border-color:var(--mh-bright-blue); background:var(--surface-tint); outline:none; transform:translateY(-2px)}
.mhg-tax-quiz .answers button:active:not(:disabled){transform:scale(.98)}
.mhg-tax-quiz .answers button .k{display:inline-grid; place-items:center; width:34px; height:34px; margin-right:12px; background:var(--mh-blue); color:var(--fill-card); border-radius:var(--r-card-inner); font-family:var(--font-num); font-size:var(--body-1-size)}
.mhg-tax-quiz .speed-note{margin:18px 0 0; color:var(--muted); font-size:var(--caption-size); text-align:center}
.mhg-tax-quiz .result-panel{text-align:center}
.mhg-tax-quiz .result-badge{display:inline-block; padding:7px 12px; background:var(--mh-yellow); border-radius:var(--r-pill); color:var(--mh-blue); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .result-kicker{margin:20px 0 4px; color:var(--muted); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .result-panel>h2{margin:0; color:var(--mh-blue); font-size:var(--display-4-size); }
.mhg-tax-quiz .result-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:22px 0 14px}
.mhg-tax-quiz .result-stats div{padding:13px 4px; background:var(--surface-tint); border-radius:var(--r-card-inner)}
.mhg-tax-quiz .result-stats strong{display:block; color:var(--mh-orange); font-family:var(--font-num); font-size:var(--display-2-size)}
.mhg-tax-quiz .result-stats span{color:var(--muted); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .rank-basis{margin:0 0 20px; color:var(--muted); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .rank-basis b{color:var(--mh-blue); font-family:var(--font-num); font-size:var(--body-1-size)}
.mhg-tax-quiz .entry-code{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:space-between;
  padding:14px 16px; margin-bottom:14px; border:2px dashed var(--mh-bright-blue);
  border-radius:var(--r-card-inner); background:var(--surface-pill); text-align:left}
.mhg-tax-quiz .entry-code .k{color:var(--mh-blue); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .entry-code .v{font-family:var(--font-num); font-size:var(--display-2-size); font-weight:var(--font-weight-bold);  color:var(--mh-blue); user-select:all}
.mhg-tax-quiz .entry-code .h{margin:0; color:var(--muted); font-size:var(--caption-size); font-weight:var(--font-weight-bold); flex-basis:100%}
.mhg-tax-quiz .attempt-note{margin:0 0 14px; padding:11px 14px; background:var(--surface-tint); border-radius:var(--r-card-inner); color:var(--muted); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .result-msg{margin:0 0 22px; padding:14px 16px; background:var(--warn-bg); border-radius:var(--r-card-inner); color:var(--warn-ink); font-size:var(--caption-size); font-weight:var(--font-weight-bold); line-height:1.6}
.mhg-tax-quiz .rv-box{margin-top:18px; padding:2px 16px; background:var(--surface-panel); border-radius:var(--r-card-inner); text-align:left}
.mhg-tax-quiz .rv-box summary{display:flex; align-items:center; gap:8px; padding:13px 0; color:var(--mh-blue); font-size:var(--body-2-size); font-weight:var(--font-weight-bold); cursor:pointer; list-style:none}
.mhg-tax-quiz .rv-box summary::-webkit-details-marker{display:none}
.mhg-tax-quiz .rv-box summary::after{content:''; margin-left:auto; width:20px; height:20px; background:var(--text-secondary); -webkit-mask:var(--mhi-expand_more) center/contain no-repeat; mask:var(--mhi-expand_more) center/contain no-repeat; transition:transform .2s}
.mhg-tax-quiz .rv-box[open] summary::after{transform:rotate(180deg)}
.mhg-tax-quiz .rv-box #reviewCount{color:var(--muted); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .rv-box .review{padding-bottom:14px}
.mhg-tax-quiz .review{display:grid; gap:10px; text-align:left}
.mhg-tax-quiz .rv{display:flex; gap:11px; padding:13px 15px; border-radius:var(--r-button); background:var(--surface-panel); border:2px solid transparent}
.mhg-tax-quiz .rv[data-ok="1"]{background:var(--success-bg); border-color:var(--success-border)}
.mhg-tax-quiz .rv[data-ok="0"]{background:var(--danger-bg); border-color:var(--danger-border)}
.mhg-tax-quiz .rv .ico{flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-pill); font-size:var(--body-2-size); font-weight:var(--font-weight-bold); color:var(--fill-card)}
.mhg-tax-quiz .rv[data-ok="1"] .ico{background:var(--mh-green)}
.mhg-tax-quiz .rv[data-ok="0"] .ico{background:var(--danger)}
.mhg-tax-quiz .rv .b{min-width:0}
.mhg-tax-quiz .rv .t{margin:0 0 3px; color:var(--mh-blue); font-size:var(--caption-size); font-weight:var(--font-weight-bold); line-height:1.45}
.mhg-tax-quiz .rv .d{margin:0; color:var(--muted); font-size:var(--caption-size); line-height:1.5}
.mhg-tax-quiz .rv .d b{color:var(--mh-blue)}
.mhg-tax-quiz .result-actions{margin-top:22px}
.mhg-tax-quiz .done-panel{display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center}
.mhg-tax-quiz .check-icon{display:grid; place-items:center; width:76px; height:76px; margin-bottom:22px;
  background:var(--color-green-50); color:var(--mh-green); border-radius:var(--r-pill); font-size:var(--display-4-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .check-icon[data-state="skipped"]{background:var(--surface-tint); color:var(--mh-bright-blue)}
.mhg-tax-quiz .done-panel h2{margin:0 0 14px; color:var(--mh-blue); font-size:var(--display-4-size); }
.mhg-tax-quiz .done-lead{margin:0 0 22px; color:var(--muted); line-height:1.8}
.mhg-tax-quiz .done-lead b{color:var(--mh-blue)}
.mhg-tax-quiz .proof{width:100%; text-align:left; background:var(--fill-card); border:2px solid var(--mh-blue); border-radius:var(--r-card-inner); overflow:hidden}
.mhg-tax-quiz .proof__hd{padding:9px 16px; background:var(--mh-blue); color:var(--fill-card); font-size:var(--caption-size); font-weight:var(--font-weight-bold); }
.mhg-tax-quiz .proof__row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:11px 16px 0}
.mhg-tax-quiz .proof__k{flex:0 0 auto; color:var(--muted); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .proof__codewrap{display:inline-flex; align-items:center; gap:8px}
.mhg-tax-quiz .proof__code{font-family:var(--font-num); font-size:var(--display-1-size); font-weight:var(--font-weight-bold);  color:var(--mh-blue); user-select:all}
.mhg-tax-quiz .copy-btn{padding:4px 10px; background:var(--surface-tint); border:1px solid var(--hairline); border-radius:var(--r-button); color:var(--mh-bright-blue); font-size:var(--caption-size); font-weight:var(--font-weight-bold); cursor:pointer; white-space:nowrap}
.mhg-tax-quiz .copy-btn:hover{background:var(--fill-card); border-color:var(--mh-bright-blue)}
.mhg-tax-quiz .copy-btn:focus-visible{outline:2px solid var(--mh-bright-blue); outline-offset:2px}
.mhg-tax-quiz .copy-btn[data-done="1"]{background:var(--success-bg); border-color:var(--success-border); color:var(--success-dark)}
.mhg-tax-quiz .proof__v{font-size:var(--caption-size); font-weight:var(--font-weight-bold); color:var(--ink); word-break:break-all; text-align:right; user-select:all}
.mhg-tax-quiz .proof__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:12px 16px 0}
.mhg-tax-quiz .proof__grid div{padding:9px 4px; background:var(--surface-tint); border-radius:var(--r-card-inner); text-align:center}
.mhg-tax-quiz .proof__grid strong{display:block; color:var(--mh-orange); font-family:var(--font-num); font-size:var(--display-1-size)}
.mhg-tax-quiz .proof__grid span{color:var(--muted); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .proof__foot{display:flex; flex-wrap:wrap; gap:4px 16px; padding:11px 16px 0; color:var(--muted); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .proof__foot b{color:var(--mh-blue); font-family:var(--font-num); font-size:var(--caption-size)}
.mhg-tax-quiz .proof__stamp{padding:9px 16px 12px; color:var(--muted); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .done-panel .primary-button{max-width:330px}
.mhg-tax-quiz .inbox-note{margin:14px 0 22px; padding:11px 14px; background:var(--warn-bg); border-radius:var(--r-card-inner);
  color:var(--warn-ink); font-size:var(--caption-size); font-weight:var(--font-weight-bold); line-height:1.6}
.mhg-tax-quiz .email-block{width:100%; padding:22px; background:var(--surface-panel); border-radius:var(--r-card); text-align:left}
.mhg-tax-quiz .email-block h3{margin:0; color:var(--mh-blue); font-size:var(--display-1-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .email-block>p{margin:7px 0 18px; color:var(--muted); font-size:var(--caption-size); line-height:1.55}
.mhg-tax-quiz .field label{display:block; margin-bottom:7px; color:var(--mh-blue); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .field input[type="email"]{width:100%; padding:13px 14px; background:var(--fill-card); border:2px solid var(--hairline-soft); border-radius:var(--r-card-inner); color:var(--ink); font-size:var(--body-1-size); line-height:normal; outline:none}
.mhg-tax-quiz .field input[type="email"]:focus{border-color:var(--mh-bright-blue)}
.mhg-tax-quiz .field[data-error="1"] input{border-color:var(--danger); background:var(--danger-bg)}
.mhg-tax-quiz .field .hint{display:block; margin-top:7px; color:var(--muted); font-size:var(--caption-size); line-height:1.5}
.mhg-tax-quiz .consent-row{display:flex; align-items:flex-start; gap:9px; margin:13px 0 0; color:var(--muted); font-size:var(--caption-size); line-height:1.45; cursor:pointer}
.mhg-tax-quiz .consent-row input{flex:0 0 auto; margin-top:2px; accent-color:var(--mh-bright-blue); width:16px; height:16px}
.mhg-tax-quiz .consent-row[data-error="1"]{color:var(--danger); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .form-error{margin:14px 0 0; color:var(--danger); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .form-error[hidden]{display:none}
.mhg-tax-quiz .form-error ul{margin:4px 0 0; padding-inline-start:1.1em; list-style:disc}
.mhg-tax-quiz .pics{margin-top:14px; padding:13px 15px; background:var(--fill-card); border-radius:var(--r-card-inner); border:1px solid var(--hairline-soft)}
.mhg-tax-quiz .pics h5{margin:0 0 5px; color:var(--mh-blue); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .pics p{margin:0; color:var(--muted); font-size:var(--caption-size); line-height:1.55}
.mhg-tax-quiz .formio-note{margin-bottom:14px; padding:11px 13px; background:var(--warn-bg); border-radius:var(--r-card-inner); color:var(--warn-ink); font-size:var(--caption-size); font-weight:var(--font-weight-bold); line-height:1.5}
.mhg-tax-quiz .formio-note[hidden]{display:none}
.mhg-tax-quiz .start-panel .email-block{margin-bottom:18px}
.mhg-tax-quiz #formio [class*="formio-component-"]{min-width:0}
.mhg-tax-quiz #formio .formio-component-form{display:contents}
.mhg-tax-quiz #formio label, .mhg-tax-quiz #formio .col-form-label{display:block; margin:0 0 7px; color:var(--mh-blue); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz #formio .field-required::after{content:" *"; color:var(--danger)}
.mhg-tax-quiz #formio .form-control, .mhg-tax-quiz #formio input[type="email"], .mhg-tax-quiz #formio input[type="text"], .mhg-tax-quiz #formio textarea{
  width:100%; padding:13px 14px; background:var(--fill-card); border:2px solid var(--hairline-soft);
  border-radius:var(--r-card-inner); color:var(--ink); font-size:var(--body-1-size); line-height:normal;
  outline:none; box-shadow:none;
}
.mhg-tax-quiz #formio textarea{height:48px; resize:none; overflow:auto}
.mhg-tax-quiz #formio .form-control:focus{border-color:var(--mh-bright-blue)}
.mhg-tax-quiz #formio .form-control.is-invalid, .mhg-tax-quiz #formio .is-invalid .form-control{border-color:var(--danger); background:var(--danger-bg)}
.mhg-tax-quiz #formio .formio-errors .error, .mhg-tax-quiz #formio .invalid-feedback{display:block; margin-top:5px; color:var(--danger); font-size:var(--caption-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz #formio .form-text, .mhg-tax-quiz #formio .text-muted, .mhg-tax-quiz #formio .formio-description{margin-top:7px; color:var(--muted); font-size:var(--caption-size); line-height:1.5}
.mhg-tax-quiz #formio .alert{display:none}
.mhg-tax-quiz #formio .formio-component-submit, .mhg-tax-quiz #formio .formio-component-button{display:none}
.mhg-tax-quiz #formio .formio-component-hidden{display:none}
.mhg-tax-quiz .below{padding:34px 18px; background:var(--surface-tint-2)}
.mhg-tax-quiz .below:nth-of-type(even){background:var(--surface-tint)}
.mhg-tax-quiz .below__in{width:var(--shell-w); margin-inline:auto}
.mhg-tax-quiz .below__in--wide{width:min(100%,1100px)}
.mhg-tax-quiz .deck-banner{margin:-38px -30px 22px; padding:13px 20px; background:var(--warn-bg);
  border:0; border-bottom:1px solid var(--warn-border); border-radius:var(--r-card) var(--r-card) 0 0;
  color:var(--warn-ink); font-size:var(--caption-size); font-weight:var(--font-weight-bold); line-height:1.5; text-align:center}
/* ── LOAN CARDS — simple grid card (Clara, 2026-09-28). Brand card: 1px border,
   DEVIATION from the review prototype: two cards per row on phones, not one
   (Clara's standing instruction, 2026-09-2x — 3 across on desktop, 2 on mobile).
   The two figures stack inside the card below 600px so they still fit.
   card radius, no shadow. Logo, name, two figures (no reward figure), CTA, and a
   了解更多 link to the personal-loan RP for the full details. ── */
.mhg-tax-quiz .prod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
@media(min-width:960px){
.mhg-tax-quiz .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.mhg-tax-quiz .prod{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--fill-card);border:1px solid var(--borders-default);border-radius:var(--r-card);min-width:0}
.mhg-tax-quiz .prod__media{flex:0 0 auto;box-sizing:border-box;display:grid;place-items:center;height:72px;padding:var(--space-2);background:var(--fill-card);border:1px solid var(--borders-default);border-radius:var(--r-tooltip)}
.mhg-tax-quiz .prod__logo{display:block;width:100%;height:calc(72px - var(--space-2) * 2 - 2px);object-fit:contain}
.mhg-tax-quiz .prod__name{min-height:calc(var(--title-2-lh) * 2);font:var(--title-2-weight) var(--title-2-size)/var(--title-2-lh) var(--font-sans);color:var(--text-primary)}
.mhg-tax-quiz .prod__bottom{margin-top:auto}
.mhg-tax-quiz .prod__hl{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-2);padding:var(--space-2) var(--space-3);background:var(--fill-primary-light);border-radius:var(--r-card-inner)}
.mhg-tax-quiz .prod__hl::before{content:'';flex:0 0 auto;width:20px;height:20px;background:var(--fill-primary-dark);-webkit-mask:var(--mhi-featured_seasonal_and_gifts) center/contain no-repeat;mask:var(--mhi-featured_seasonal_and_gifts) center/contain no-repeat}
.mhg-tax-quiz .prod__hlk{font:var(--bullet-2-weight) var(--bullet-2-size)/var(--bullet-2-lh) var(--font-sans);color:var(--fill-primary-dark)}
.mhg-tax-quiz .prod__hlv{font:var(--font-weight-bold) var(--bullet-2-size)/var(--bullet-2-lh) var(--font-sans);color:var(--fill-primary-dark);font-variant-numeric:tabular-nums}
.mhg-tax-quiz .prod__rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
@media(max-width:599px){
.mhg-tax-quiz .prod__rows{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
}
.mhg-tax-quiz .prod__row{min-width:0}
.mhg-tax-quiz .prod__k{display:block;font:var(--caption-weight) var(--caption-size)/var(--caption-lh) var(--font-sans);color:var(--text-secondary-lighter)}
.mhg-tax-quiz .prod__v{display:block;margin-top:var(--space-1);font:var(--body-1-weight) var(--body-1-size)/var(--body-1-lh) var(--font-sans);color:var(--text-primary);font-variant-numeric:tabular-nums}
.mhg-tax-quiz .prod__cta{display:flex;align-items:center;justify-content:center;gap:var(--button-gap);height:var(--button-size-regular);padding:0 var(--button-padding-regular-x);background:var(--buttons-cta);border-radius:var(--radius-button);font:var(--font-weight-semibold) var(--font-size-button-1)/var(--line-height-button-1) var(--font-sans);color:var(--text-on-dark);text-decoration:none}
.mhg-tax-quiz .prod__cta::after{content:'';width:var(--button-icon-small);height:var(--button-icon-small);background:currentColor;-webkit-mask:var(--mhi-open_in_new) center/contain no-repeat;mask:var(--mhi-open_in_new) center/contain no-repeat}
.mhg-tax-quiz .prod__cta:hover{background:var(--buttons-cta-hover);text-decoration:none}
.mhg-tax-quiz .prod__warn{padding-top:var(--space-3);border-top:1px solid var(--borders-default);font:var(--caption-weight) var(--caption-size)/var(--caption-lh) var(--font-sans);color:var(--text-primary);text-align:center}
.mhg-tax-quiz .prod-all{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5);margin-top:var(--space-5);padding:var(--space-5);background:var(--fill-primary-light);border-radius:var(--r-card)}
.mhg-tax-quiz .prod-all__t{flex:1 1 320px;margin:0;font:var(--title-2-weight) var(--title-2-size)/var(--title-2-lh) var(--font-sans);color:var(--text-primary)}
.mhg-tax-quiz .prod-all__t{text-wrap:balance}
.mhg-tax-quiz .prod-all__nw{white-space:nowrap}
.mhg-tax-quiz .prod-all .mhg-alpha-btn{flex:0 0 auto}
@media(max-width:599px){
.mhg-tax-quiz .prod-all{flex-direction:column;align-items:stretch;text-align:center}
.mhg-tax-quiz .prod-all__t{flex:none}
}
.mhg-tax-quiz .below h2 b{color:var(--mh-orange)}
.mhg-tax-quiz .below h2{margin:0 0 10px; color:var(--mh-blue); font-size:var(--display-4-size); font-weight:var(--font-weight-bold);  line-height:1.25; text-align:center}
.mhg-tax-quiz .below .sub{margin:0 0 22px; color:var(--muted); font-size:var(--body-1-size); line-height:1.7; text-align:center}
.mhg-tax-quiz .tbc{padding:0 5px; background:repeating-linear-gradient(135deg,var(--warn-bg),var(--warn-bg) 6px,var(--warn-border) 6px,var(--warn-border) 12px); border-bottom:2px dashed var(--mh-orange); border-radius:var(--r-tooltip); color:var(--warn-ink); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .has-bunting{padding-top:0}
.mhg-tax-quiz .bunting-wrap{width:min(100%,760px); margin-inline:auto}
.mhg-tax-quiz .bunting{display:block; width:100%; height:auto;
  margin:-4.49% 0 -8%; pointer-events:none; user-select:none}
.mhg-tax-quiz .prize-hero{padding:22px 18px; background:var(--fill-card); border-radius:var(--r-card-inner); box-shadow:var(--shadow-soft); text-align:center}
.mhg-tax-quiz .prize-hero__n{color:var(--mh-orange); font-family:var(--font-num); font-size:var(--display-5-size); font-weight:var(--font-weight-bold); line-height:1}
.mhg-tax-quiz .prize-hero__t{margin-top:2px; color:var(--muted); font-size:var(--body-2-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .prize-hero__v{margin-top:8px; color:var(--mh-blue); font-size:var(--display-2-size); font-weight:var(--font-weight-bold); line-height:1.35}
.mhg-tax-quiz .prize-note{margin:14px 0 0; color:var(--muted); font-size:var(--caption-size); line-height:1.75}
.mhg-tax-quiz .steps{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.mhg-tax-quiz .step{display:flex; gap:14px; padding:18px; background:var(--fill-card); border-radius:var(--r-card-inner); box-shadow:var(--shadow-soft)}
.mhg-tax-quiz .step__n{flex:0 0 auto; display:inline-grid; place-items:center; width:38px; height:38px;
  background:var(--mh-yellow); border-radius:var(--r-pill); color:var(--mh-blue);
  font-family:var(--font-num); font-size:var(--body-1-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .step h3{margin:0 0 7px; color:var(--mh-blue); font-size:var(--display-1-size); font-weight:var(--font-weight-bold); line-height:1.35}
.mhg-tax-quiz .step p{margin:0; color:var(--muted); font-size:var(--body-1-size); line-height:1.75}
.mhg-tax-quiz .step__alt{margin-top:6px !important; color:var(--mh-bright-blue) !important; font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .step a{color:var(--mh-bright-blue)}
.mhg-tax-quiz .prize-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.mhg-tax-quiz .prize{padding:18px 8px; background:var(--fill-card); border-radius:var(--r-card-inner); text-align:center; box-shadow:var(--shadow-soft)}
.mhg-tax-quiz .prize__rank{display:inline-grid; place-items:center; width:36px; height:36px; margin-bottom:8px; background:var(--mh-yellow); border-radius:var(--r-pill); color:var(--mh-blue); font-family:var(--font-num); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .prize__t{margin-bottom:4px; color:var(--mh-blue); font-size:var(--body-2-size); font-weight:var(--font-weight-bold)}
.mhg-tax-quiz .prize__d{color:var(--muted); font-size:var(--caption-size); line-height:1.5}
.mhg-tax-quiz .basis{margin:0 0 18px; color:var(--muted); font-size:var(--caption-size); line-height:1.65; text-align:center}
.mhg-tax-quiz .below__cta{margin-top:16px}
.mhg-tax-quiz .terms details{background:var(--fill-card); border-radius:var(--r-card-inner); margin-bottom:10px; padding:16px 20px}
.mhg-tax-quiz .terms summary{display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--mh-blue); font-size:var(--body-1-size); font-weight:var(--font-weight-bold); cursor:pointer; list-style:none}
.mhg-tax-quiz .terms summary::-webkit-details-marker{display:none}
.mhg-tax-quiz .terms summary::after{content:''; flex:0 0 auto; width:20px; height:20px; background:var(--text-secondary); -webkit-mask:var(--mhi-expand_more) center/contain no-repeat; mask:var(--mhi-expand_more) center/contain no-repeat; transition:transform .2s}
.mhg-tax-quiz .terms details[open] summary::after{transform:rotate(180deg)}
.mhg-tax-quiz .terms details>div{padding-top:12px}
.mhg-tax-quiz .terms li{margin-bottom:8px; padding-left:16px; position:relative; color:var(--muted); font-size:var(--body-2-size); line-height:1.75}
.mhg-tax-quiz .terms li::before{content:""; position:absolute; left:3px; top:7px; width:4px; height:4px; border-radius:var(--r-pill); background:var(--mh-bright-blue)}
.mhg-tax-quiz .warnbar{padding:16px 18px; background:var(--mh-blue); text-align:center}
.mhg-tax-quiz .warnbar p{color:var(--mh-yellow); font-size:var(--body-2-size); font-weight:var(--font-weight-bold); }
.mhg-tax-quiz .disclaimer{padding:26px 18px 34px; background:var(--color-blue-950)}
.mhg-tax-quiz .disclaimer div{width:var(--shell-w); margin-inline:auto}
.mhg-tax-quiz .disclaimer p{margin:0 0 11px; color:var(--on-dark); font-size:var(--body-2-size); line-height:1.75}
.mhg-tax-quiz .disclaimer a{color:var(--mh-yellow)}
@media (width<=540px){
.mhg-tax-quiz .site-shell{--shell-pad-bottom:20px; --shell-pad-x:10px;
    padding-top:var(--shell-pad-top)}
.mhg-tax-quiz .game-card{border-radius:var(--r-card); min-height:0}
.mhg-tax-quiz .panel{min-height:0; padding:28px 22px 24px}
.mhg-tax-quiz .deck-banner{margin:-28px -22px 18px; padding:11px 14px; border-radius:var(--r-card) var(--r-card) 0 0}
.mhg-tax-quiz .quiz-panel h2{min-height:134px}
.mhg-tax-quiz .warn-footer{padding-top:12px}
.mhg-tax-quiz .result-stats, .mhg-tax-quiz .proof__grid{grid-template-columns:repeat(2,1fr); gap:6px}
.mhg-tax-quiz .result-stats strong{font-size:var(--display-1-size)}
.mhg-tax-quiz .prize-grid{gap:6px}
}
@media (prefers-reduced-motion:reduce){
.mhg-tax-quiz *, .mhg-tax-quiz *::before, .mhg-tax-quiz *::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}
/* ── ICONS — MHG Alpha, functional only (brand icon set replaces text glyphs) ── */
.mhg-tax-quiz .check-icon{font-size:0}
.mhg-tax-quiz .check-icon::before{content:'';width:40px;height:40px;background:currentColor;-webkit-mask:var(--mhi-check) center/contain no-repeat;mask:var(--mhi-check) center/contain no-repeat}
.mhg-tax-quiz .check-icon[data-state="skipped"]::before{-webkit-mask-image:var(--mhi-info);mask-image:var(--mhi-info)}
.mhg-tax-quiz .rv .ico::before{content:'';width:16px;height:16px;background:currentColor;-webkit-mask:var(--mhi-close) center/contain no-repeat;mask:var(--mhi-close) center/contain no-repeat}
.mhg-tax-quiz .rv[data-ok="1"] .ico::before{-webkit-mask-image:var(--mhi-check);mask-image:var(--mhi-check)}
.mhg-tax-quiz .secnav__top{font-size:0}
.mhg-tax-quiz .secnav__top::before{content:'';width:20px;height:20px;background:currentColor;transform:rotate(180deg);-webkit-mask:var(--mhi-expand_more) center/contain no-repeat;mask:var(--mhi-expand_more) center/contain no-repeat}
/* ── BRAND BASIC ELEMENTS (Clara, 2026-09-28: "layout can keep but brand basic
   element need to remain"). Buttons, form field and checkbox follow the mhg-design
   components; values copied from references/components/buttons.css and the form
   tokens. Layout around them is the campaign's own. ── */
/* CTA — .mhg-btn.mhg-btn--cta.mhg-btn--block: flat, 36/40/44px, button-1 type */
.mhg-tax-quiz .primary-button{
  display:flex; align-items:center; justify-content:center; gap:var(--button-gap);
  box-sizing:border-box; width:100%; height:var(--button-size-regular); padding:0 var(--button-padding-regular-x);
  border:1px solid transparent; border-radius:var(--radius-button);
  background:var(--buttons-cta); color:var(--text-on-dark);
  font-family:var(--font-sans); font-size:var(--font-size-button-1); line-height:var(--line-height-button-1); font-weight:var(--font-weight-semibold);
  text-align:center; text-decoration:none; white-space:nowrap; cursor:pointer;
  box-shadow:none; transform:none; transition:background-color .15s ease}
.mhg-tax-quiz .primary-button:hover:not(:disabled){background:var(--buttons-cta-hover); text-decoration:none}
.mhg-tax-quiz .primary-button:active:not(:disabled){transform:none; box-shadow:none}
.mhg-tax-quiz .primary-button:focus-visible, .mhg-tax-quiz .prod__cta:focus-visible{outline:2px solid var(--buttons-primary); outline-offset:2px}
.mhg-tax-quiz .primary-button:disabled{background:var(--buttons-disable); color:var(--text-on-dark); box-shadow:none; cursor:not-allowed}
.mhg-tax-quiz .primary-button span{margin-left:0}
/* 複製 — .mhg-btn--outline-primary.mhg-btn--small */
.mhg-tax-quiz .copy-btn{display:inline-flex; align-items:center; justify-content:center; height:var(--button-size-small); padding:0 var(--button-padding-small-x);
  background:var(--buttons-base); border:1px solid var(--buttons-primary); border-radius:var(--radius-button); color:var(--buttons-primary);
  font-size:var(--font-size-button-2); line-height:var(--line-height-button-2); font-weight:var(--font-weight-semibold)}
.mhg-tax-quiz .copy-btn:hover{background:var(--buttons-outline-hover-bg); border-color:var(--buttons-primary-hover); color:var(--buttons-primary-hover)}
/* email — Figma Input Simple. Per COMPONENTS.md: form-input type + --r-button radius.
   tokens.css aliases --form-input-padding-* / --form-input-radius to --padding-form-x/y and
   --r-input, which the skill never defines (flagged); the defined form/inner-element-padding is used. */
.mhg-tax-quiz .field input[type="email"]{box-sizing:border-box; padding:var(--form-inner-padding) var(--form-inner-padding);
  border:1px solid var(--borders-form-default); border-radius:var(--r-button); background:var(--fill-card); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--form-input-size); line-height:var(--form-input-lh); font-weight:var(--form-input-weight)}
.mhg-tax-quiz .field input[type="email"]::placeholder{color:var(--text-muted); font-weight:var(--font-weight-regular, 400)}
.mhg-tax-quiz .field input[type="email"]:hover{border-color:var(--borders-form-hover)}
.mhg-tax-quiz .field input[type="email"]:focus{border-color:var(--borders-form-hover); outline:none}
/* checkbox — no checkbox in mhg-design (flagged to Design); native control in brand blue */
.mhg-tax-quiz .consent-row input{width:20px; height:20px; margin-top:0; accent-color:var(--buttons-primary)}
/* figures are data, not CTAs: brand blue (orange stays for CTAs and campaign headline accents) */
.mhg-tax-quiz .result-stats strong, .mhg-tax-quiz .proof__grid strong{color:var(--text-primary)}
/* result nudge is a message, not a warning */
.mhg-tax-quiz .result-msg{background:var(--fill-secondary-light); color:var(--text-primary)}
/* ── AUDIT FIXES (Clara, 2026-09-28: "change what doesn't match our brand") ── */
/* 1. one content width: the Strapi 976px container for every section below the game */
.mhg-tax-quiz .below__in, .mhg-tax-quiz .below__in--wide, .mhg-tax-quiz .disclaimer div{width:min(100%,976px); margin-inline:auto}
@media (min-width:768px){
.mhg-tax-quiz .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.mhg-tax-quiz .step{flex-direction:column}
}
/* 2. page ground: Strapi fill/base with white cards, no alternating section colours */
.mhg-tax-quiz .below, .mhg-tax-quiz .below:nth-of-type(even){background:var(--fill-base)}
/* 3. cards: the brand card (1px border, card radius, no shadow), as on the ProductCard */
.mhg-tax-quiz .prize-hero, .mhg-tax-quiz .step, .mhg-tax-quiz .prize{background:var(--fill-card); border:1px solid var(--borders-default); border-radius:var(--r-card); box-shadow:none}
/* 4. orange is for CTAs only: accent words take brand blue, figures take the text colour */
.mhg-tax-quiz .below h2 b, .mhg-tax-quiz .start-panel h1 b, .mhg-tax-quiz .game-blurb b{color:var(--fill-primary)}
.mhg-tax-quiz .prize-hero__n{color:var(--text-primary)}
/* 5. 條款及細則: the same accordion as the ProductCard rows, inside one white card */
.mhg-tax-quiz .terms{display:grid; gap:var(--space-2); padding:var(--space-3); background:var(--fill-card); border:1px solid var(--borders-default); border-radius:var(--r-card)}
.mhg-tax-quiz .terms details{margin:0; padding:0; background:var(--fill-alternative-1); border-radius:var(--r-card-inner)}
.mhg-tax-quiz .terms summary{padding:var(--space-3) var(--space-4); font:var(--bullet-1-weight) var(--bullet-1-size)/var(--bullet-1-lh) var(--font-sans); color:var(--text-primary)}
.mhg-tax-quiz .terms summary:hover{background:var(--fill-alternative-3); border-radius:var(--r-card-inner)}
.mhg-tax-quiz .terms summary::after{background:var(--text-primary)}
.mhg-tax-quiz .terms details>div{padding:0 var(--space-4) var(--space-4)}
.mhg-tax-quiz .terms li{color:var(--text-secondary); font:var(--body-2-weight) var(--body-2-size)/var(--body-2-relaxed-lh) var(--font-sans)}
.mhg-tax-quiz .terms li::before{top:calc(var(--body-2-relaxed-lh) / 2 - 2px); background:var(--text-secondary)}
/* 6. section tabs: the Strapi anchor tabs (underline on the current tab), copied from quiz-page.css */
.mhg-tax-quiz .secnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--fill-card);border-bottom:1px solid var(--borders-default)}
.mhg-tax-quiz .secnav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:min(100%,calc(976px + var(--grid-margin) * 2));margin-inline:auto;padding-inline:var(--grid-margin)}
.mhg-tax-quiz .secnav__list{display:flex;align-items:stretch;gap:var(--space-1);min-width:0;overflow-x:auto;scrollbar-width:none}
.mhg-tax-quiz .secnav__list::-webkit-scrollbar{display:none}
.mhg-tax-quiz .secnav__btn{padding:var(--space-3) var(--space-3);background:none;border:0;border-bottom:2px solid transparent;font:var(--bullet-2-weight) var(--bullet-2-size)/var(--bullet-2-lh) var(--font-sans);color:var(--text-secondary);white-space:nowrap;cursor:pointer}
.mhg-tax-quiz .secnav__btn:hover{color:var(--fill-primary)}
.mhg-tax-quiz .secnav__btn[aria-current="true"]{color:var(--fill-primary);border-bottom-color:var(--fill-primary)}
.mhg-tax-quiz .secnav__top{flex:0 0 auto;display:grid;place-items:center;width:var(--button-size-small);height:var(--button-size-small);padding:0;background:var(--fill-card);border:1px solid var(--borders-default);border-radius:var(--r-button);color:var(--text-primary);font-size:0;cursor:pointer}
.mhg-tax-quiz .secnav__top::before{content:'';width:20px;height:20px;background:currentColor;transform:rotate(180deg);-webkit-mask:var(--mhi-expand_more) center/contain no-repeat;mask:var(--mhi-expand_more) center/contain no-repeat}
.mhg-tax-quiz .secnav__top:hover{border-color:var(--buttons-neutral)}
.mhg-tax-quiz .secnav__btn{margin:0; border-radius:0; flex:0 0 auto}
.mhg-tax-quiz .secnav__list{flex-wrap:nowrap; justify-content:flex-start}
.mhg-tax-quiz .secnav__btn[aria-current="true"], .mhg-tax-quiz .secnav__btn[aria-current="true"]:hover{background:none}
@media (hover:hover) and (pointer:fine){
.mhg-tax-quiz .secnav__btn:hover{background:none}
}
/* 7. links: brand link blue on light grounds; on the navy disclaimer, on-dark text underlined */
.mhg-tax-quiz a, .mhg-tax-quiz .step a{color:var(--text-link)}
.mhg-tax-quiz .disclaimer a{color:var(--text-on-dark); text-decoration:underline}
.mhg-tax-quiz .warnbar p{color:var(--text-on-dark)}