/*
Theme Name: MoneyBuddy
Theme URI: https://moneybuddy.com.hk
Author: Love Frankie
Description: Custom theme for MoneyBuddy, Hong Kong loan matching. Site-wide header/footer chrome, editable homepage sections via block patterns, and shortcodes for the interactive calculator and tickers. Replaces the earlier auto-generated theme; fonts load cleanly from Google Fonts.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.2
License: GPL-2.0-or-later
Text Domain: moneybuddy
*/

/* =============================================================
   MoneyBuddy — Landing page styles (ported from standalone build)
   Fonts: Geist (body) · Instrument Serif (.serif) · JetBrains Mono (.mono)
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Sensible body defaults (the original prototype set these from a tweaks panel) */
body.mb-page { font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; }

/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("c0039c43-9a87-4f75-bc99-1b05bafd23ac") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("43d424bc-1ed0-42d6-9f6b-fc55d33a80d8") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("935ebe36-1f37-4107-ac71-785c25ea7b30") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("3f502227-d063-4983-9e60-ae3ba8f7c844") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("8c61638b-6519-496b-9481-a974e45e1efd") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c0039c43-9a87-4f75-bc99-1b05bafd23ac") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("43d424bc-1ed0-42d6-9f6b-fc55d33a80d8") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("935ebe36-1f37-4107-ac71-785c25ea7b30") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("3f502227-d063-4983-9e60-ae3ba8f7c844") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("8c61638b-6519-496b-9481-a974e45e1efd") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("c0039c43-9a87-4f75-bc99-1b05bafd23ac") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("43d424bc-1ed0-42d6-9f6b-fc55d33a80d8") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("935ebe36-1f37-4107-ac71-785c25ea7b30") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("3f502227-d063-4983-9e60-ae3ba8f7c844") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("8c61638b-6519-496b-9481-a974e45e1efd") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c0039c43-9a87-4f75-bc99-1b05bafd23ac") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("43d424bc-1ed0-42d6-9f6b-fc55d33a80d8") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("935ebe36-1f37-4107-ac71-785c25ea7b30") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("3f502227-d063-4983-9e60-ae3ba8f7c844") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("8c61638b-6519-496b-9481-a974e45e1efd") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c0039c43-9a87-4f75-bc99-1b05bafd23ac") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("43d424bc-1ed0-42d6-9f6b-fc55d33a80d8") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("935ebe36-1f37-4107-ac71-785c25ea7b30") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("3f502227-d063-4983-9e60-ae3ba8f7c844") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("8c61638b-6519-496b-9481-a974e45e1efd") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("478d62bd-5b8c-48c2-bb3b-d0e3e852d8aa") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("a433f8f2-f150-4d3f-b145-d7f80d3a6ce6") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("50f4ef93-cce1-466f-b0f3-e00d859c8728") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("5a24705f-584b-4dcd-a330-a9cc924320ae") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("a26bc935-ffee-40c7-a019-682daef8fd7a") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("e7f83881-cd78-45b9-a95a-34da29cb8e97") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("f5ac3562-06e3-44d7-b32c-6c2ae953cf96") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("19c8b15a-d262-4b14-9e55-1b8636e6f912") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("4f761509-3906-454b-9043-b8bc099e8b5c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("83b5171b-ed82-4a69-8756-4a0c01d6b72d") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("a26bc935-ffee-40c7-a019-682daef8fd7a") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("e7f83881-cd78-45b9-a95a-34da29cb8e97") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("f5ac3562-06e3-44d7-b32c-6c2ae953cf96") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("19c8b15a-d262-4b14-9e55-1b8636e6f912") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4f761509-3906-454b-9043-b8bc099e8b5c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("83b5171b-ed82-4a69-8756-4a0c01d6b72d") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



  :root {
    /* Brand: gradient cyan → sky → indigo from logo M */
    --brand-1:  #5EEAD4;   /* teal-300, logo highlight top */
    --brand-2:  #22D3EE;   /* cyan-400 */
    --brand-3:  #0EA5E9;   /* sky-500 */
    --brand-4:  #2563EB;   /* blue-600, logo deep base */
    --grad-brand: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 35%, var(--brand-3) 65%, var(--brand-4) 100%);
    --grad-brand-text: linear-gradient(120deg, #14B8A6 0%, #0EA5E9 50%, #2563EB 100%);

    --navy-900: #050B15;
    --navy-800: #0A1628;
    --navy-700: #0F2236;
    --navy-600: #1B3252;
    --navy-100: #DCE7F2;

    /* Legacy alias map (mint-* now points to cyan-teal brand) */
    --mint-600: #0891B2;
    --mint-500: #06B6D4;
    --mint-400: #22D3EE;
    --mint-100: #CFFAFE;
    --mint-50:  #ECFEFF;

    --cream:    #F6F9FC;
    --cream-2:  #EAF0F7;
    --ink:      #050B15;
    --ink-2:    #1F2937;
    --ink-3:    #5A6878;
    --line:     #DEE5EE;
    --line-dark:#C8D2DE;
    --warn:     #C2410C;
    --bg:       #F6F9FC;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Geist', -apple-system, system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    line-height: 1.55;
  }
  h1,h2,h3,h4,h5 { margin: 0; letter-spacing: -0.02em; line-height: 1.05; font-weight: 600; }
  p { margin: 0; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }
  .serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
  .mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }

  /* Layout */
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 720px) { .wrap { padding: 0 20px; } }

  .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brand-3);
    font-weight: 500;
    display: inline-flex; align-items: center; gap: 14px;
  }
  .eyebrow::before {
    content: ''; width: 36px; height: 1px; background: currentColor; opacity: .55;
  }

  /* Heading highlight: replaces former italic-serif treatment */
  .hl {
    background: var(--grad-brand-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-style: normal;
  }
  .hl-mark {
    background: linear-gradient(180deg, transparent 60%, rgba(34,211,238,.35) 60%, rgba(34,211,238,.35) 92%, transparent 92%);
    padding: 0 4px;
  }

  /* Fintech bg layers */
  .grid-bg {
    background-image:
      linear-gradient(rgba(15,34,54,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,34,54,.06) 1px, transparent 1px);
    background-size: 56px 56px;
  }
  .dark-bg {
    background: radial-gradient(60% 80% at 80% 0%, rgba(34,211,238,.16), transparent 60%),
                radial-gradient(50% 60% at 0% 100%, rgba(37,99,235,.18), transparent 65%),
                #050B15;
    color: white;
  }
  .glow-line {
    background: linear-gradient(90deg, transparent 0%, rgba(34,211,238,.5) 50%, transparent 100%);
    height: 1px; width: 100%;
  }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 22px; border-radius: 999px;
    font-weight: 500; font-size: 15px;
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--grad-brand); color: white; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 30px -10px rgba(14,165,233,.6); }
  .btn-primary:hover { background: var(--grad-brand); filter: brightness(1.05); }
  .btn-dark { background: var(--navy-800); color: white; }
  .btn-dark:hover { background: var(--navy-900); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-dark); }
  .btn-ghost:hover { background: white; }
  .btn-lg { padding: 18px 28px; font-size: 16px; }
  .btn-whatsapp { background: #1FAE54; color: white; }
  .btn-whatsapp:hover { background: #178A43; }

  /* Reusable card */
  .card {
    background: white; border: 1px solid var(--line); border-radius: 20px;
  }

  /* Section */
  section { padding: 96px 0; }
  @media (max-width: 720px) { section { padding: 64px 0; } }

  /* Util */
  .ink-3 { color: var(--ink-3); }
  .ink-2 { color: var(--ink-2); }

  /* Tweaks-driven theming */
  body[data-density="airy"]   section { padding: 120px 0; }
  body[data-density="compact"] section { padding: 64px 0; }

  /* Theme variants applied via [data-theme] */
  body[data-theme="navy-mint"]   { --bg:#F6F9FC; --cream:#F6F9FC; }
  body[data-theme="forest"]      { --bg:#F5F2EA; --navy-800:#13392B; --navy-900:#0A2418; --mint-500:#D4A24C; --mint-600:#B8862F; --cream:#F5F2EA; }
  body[data-theme="indigo"]      { --bg:#F4F1F9; --navy-800:#2B2076; --navy-900:#1A1252; --mint-500:#FF7A59; --mint-600:#E25C3D; --cream:#F4F1F9; }
  body[data-theme="midnight"]    { --bg:#050B15; --cream:#050B15; --ink:#F4F1EA; --ink-2:#D7D0BF; --ink-3:#9CA3AF; --line:#1F2A38; --line-dark:#2B3A4D; --navy-100:#1F2A38; }
  body[data-theme="midnight"] .card { background:#0F1B2D; border-color:#1F2A38; }
  body[data-theme="midnight"] .btn-ghost { color:#F4F1EA; }

  /* selection */
  ::selection { background: var(--mint-100); color: var(--ink); }

  /* ===================================================================
     ANIMATIONS — fintech motion layer
     =================================================================== */

  /* Scroll-reveal: fade + slide up, with per-element delay via --anim-delay */
  .anim-reveal {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
    transition:
      opacity 1.2s cubic-bezier(.16,.84,.3,1) var(--anim-delay, 0ms),
      transform 1.2s cubic-bezier(.16,.84,.3,1) var(--anim-delay, 0ms);
    will-change: opacity, transform;
  }
  .anim-reveal.is-in { opacity: 1; transform: translate3d(0,0,0); }
  body[data-motion="off"]    .anim-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  body[data-motion="subtle"] .anim-reveal { transform: translate3d(0, 28px, 0); transition-duration: .9s; }

  /* Hero headline: per-line stagger reveal on load */
  .hero-line {
    display: block;
    opacity: 0;
    transform: translateY(24px);
    animation: heroLineIn 1.2s cubic-bezier(.16,.84,.3,1) forwards;
  }
  .hero-line:nth-child(1) { animation-delay: .15s; }
  .hero-line:nth-child(2) { animation-delay: .35s; }
  .hero-line:nth-child(3) { animation-delay: .55s; }
  @keyframes heroLineIn { to { opacity: 1; transform: none; } }

  .hero-badge { animation: heroFadeIn 1s ease forwards; opacity: 0; }
  .hero-sub   { animation: heroFadeIn 1.1s .75s ease forwards; opacity: 0; }
  .hero-cta   { animation: heroFadeIn 1.1s .95s ease forwards; opacity: 0; }
  @keyframes heroFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* Hero gradient orbs — slow drift */
  .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(24px);
    pointer-events: none;
    will-change: transform;
  }
  /* Parallax offset (from mouse), composed with drift via translate3d */
  .grid-bg { --mx: 0px; --my: 0px; }
  .orb-a { animation: drifA 18s ease-in-out infinite alternate; transform: translate3d(var(--mx,0), var(--my,0), 0); transition: transform .4s ease-out; }
  .orb-b { animation: drifB 22s ease-in-out infinite alternate; transform: translate3d(calc(var(--mx,0) * -1), calc(var(--my,0) * -1), 0); transition: transform .4s ease-out; }
  .orb-c { animation: drifC 26s ease-in-out infinite alternate; transform: translate3d(calc(var(--mx,0) * 0.6), calc(var(--my,0) * -0.6), 0); transition: transform .4s ease-out; }
  @keyframes drifA { from { translate: 0 0; scale: 1;   } to { translate: -60px 40px;  scale: 1.12; } }
  @keyframes drifB { from { translate: 0 0; scale: 1;   } to { translate: 50px -30px;  scale: 1.08; } }
  @keyframes drifC { from { translate: 0 0; scale: .95; } to { translate: -40px -60px; scale: 1.1;  } }
  body[data-motion="off"] .orb { animation: none !important; transform: none !important; }

  /* Subtle grid background for hero — applied via ::before so it doesn't mask the content */
  .grid-bg { position: relative; }
  .grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(15,34,54,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,34,54,.045) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: center;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    pointer-events: none;
    z-index: 0;
  }
  .grid-bg > .wrap { position: relative; z-index: 1; }

  /* Sticky header — scrolled state */
  header.is-scrolled {
    box-shadow: 0 1px 0 var(--line), 0 6px 24px -16px rgba(15,34,54,.18);
    background: rgba(246,249,252,.92) !important;
  }
  header { transition: background .2s ease, box-shadow .25s ease; }

  /* Brand mark: arrow hover lift */
  .brand-mark { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  a:hover .brand-mark { transform: translateY(-2px); }
  .brand-mark img { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  a:hover .brand-mark img { transform: scale(1.04) rotate(-2deg); }

  /* Cards: lift + shadow on hover */
  .card {
    transition:
      transform .25s cubic-bezier(.2,.7,.2,1),
      box-shadow .25s cubic-bezier(.2,.7,.2,1),
      border-color .2s ease;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 18px 40px -22px rgba(15,34,54,.25);
    border-color: var(--line-dark);
  }
  body[data-motion="off"] .card:hover { transform: none; }

  /* Primary button shimmer */
  .btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .btn-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s ease;
    pointer-events: none;
  }
  .btn-primary:hover::after { transform: translateX(100%); }

  /* Marquee — infinite horizontal scroll, paused on hover */
  .marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .marquee-track {
    display: flex;
    gap: var(--marquee-gap, 56px);
    width: max-content;
    animation: marquee var(--marquee-duration, 40s) linear infinite;
    will-change: transform;
  }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(calc(-100% / 3), 0, 0); }
  }
  body[data-motion="off"] .marquee-track { animation: none !important; }

  /* Subtle mode: trims the more energetic bits */
  body[data-motion="subtle"] .orb { animation-duration: 36s, 42s, 50s; }
  body[data-motion="subtle"] .marquee-track { animation-duration: 70s; }
  body[data-motion="subtle"] .btn-primary::after { display: none; }

  /* Stat numbers: subtle highlight bar when revealed */
  [data-stat] {
    display: inline-block;
    font-variant-numeric: tabular-nums;
  }

  /* WhatsApp floating button: pulse ring */
  .pulse-dot { position: relative; }
  .pulse-dot::before {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid currentColor; opacity: .5;
    animation: pulseRing 1.8s ease-out infinite;
  }
  @keyframes pulseRing {
    0%   { transform: scale(.85); opacity: .6; }
    100% { transform: scale(1.8);  opacity: 0;  }
  }
  body[data-motion="off"] .pulse-dot::before { animation: none; }

  /* Cursor spotlight on dark sections */
  [data-spotlight] {
    position: relative;
    --sx: 50%; --sy: 50%; --so: 0;
    isolation: isolate;
  }
  [data-spotlight]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(94,234,212,.14), transparent 60%);
    opacity: var(--so);
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 0;
  }
  [data-spotlight] > * { position: relative; z-index: 1; }
  body[data-motion="off"] [data-spotlight]::before { display: none; }

  /* Magnetic buttons get a transition to spring back */
  .btn-primary, .btn-dark { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .12s ease; }

  /* Stat underline: thin gradient bar wipes in under each [data-stat] when revealed */
  [data-stat] {
    position: relative;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    padding-bottom: 6px;
  }
  [data-stat]::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--brand-2), var(--brand-4));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s .25s cubic-bezier(.16,.84,.3,1);
    border-radius: 2px;
  }
  [data-stat].is-revealed::after { transform: scaleX(.7); }
  body[data-motion="off"] [data-stat]::after { transform: scaleX(.7); transition: none; }

  /* Live rate ticker (hero floating card) */
  .rate-ticker {
    position: relative;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 20px 50px -30px rgba(15,34,54,.35);
    width: 280px;
    animation: rateIn 1s .65s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes rateIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  .rate-ticker-spark path.spark {
    fill: none;
    stroke: url(#rate-spark-grad);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: sparkDraw 1.6s 1.1s cubic-bezier(.2,.7,.2,1) forwards;
  }
  @keyframes sparkDraw { to { stroke-dashoffset: 0; } }
  .rate-ticker-spark .spark-fill {
    opacity: 0;
    animation: fadeFill .8s 2.2s forwards;
  }
  @keyframes fadeFill { to { opacity: 1; } }
  .live-dot {
    position: relative;
    width: 6px; height: 6px; border-radius: 50%;
    background: #22C55E;
    color: #22C55E;
    display: inline-block;
  }
  .live-dot::before {
    content: ''; position: absolute; inset: -3px;
    border-radius: 50%; border: 2px solid currentColor; opacity: .5;
    animation: pulseRing 1.8s ease-out infinite;
  }
  body[data-motion="off"] .live-dot::before, body[data-motion="off"] .rate-ticker-spark path.spark { animation: none; stroke-dashoffset: 0; }
  body[data-motion="off"] .rate-ticker { animation: none; opacity: 1; transform: none; }

  /* Calculator result tick: scale pop when value class toggles */
  .res-range-val {
    transition: transform .25s cubic-bezier(.2,.9,.2,1);
  }
  .res-range-val.tick { transform: scale(1.04); }

  /* Sequential reveal for VsDirect comparison rows */
  .vs-row {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .9s cubic-bezier(.16,.84,.3,1) var(--vs-delay, 0ms),
                transform .9s cubic-bezier(.16,.84,.3,1) var(--vs-delay, 0ms);
  }
  .vs-row.is-in { opacity: 1; transform: none; }
  body[data-motion="off"] .vs-row { opacity: 1 !important; transform: none !important; transition: none; }

  @media (prefers-reduced-motion: reduce) {
    .anim-reveal, .hero-line, .hero-badge, .hero-sub, .hero-cta { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
    .orb { animation: none !important; }
    .marquee-track { animation: none !important; }
  }


/* ---------- Loan calculator ---------- */

        .calc-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: stretch; }
        @media (max-width: 880px) { .calc-wrap { grid-template-columns: 1fr; } }
        .calc-controls { background: white; border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
        .calc-result   {
          background: radial-gradient(60% 90% at 90% 0%, rgba(34,211,238,.22), transparent 60%),
                      radial-gradient(60% 70% at 0% 100%, rgba(37,99,235,.28), transparent 65%),
                      #050B15;
          color: white; border-radius: 24px; padding: 32px; position: relative; overflow: hidden;
          display: flex; flex-direction: column; justify-content: space-between;
        }
        .calc-result::after {
          content: ''; position: absolute; inset: 0;
          background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
          background-size: 44px 44px; pointer-events: none;
        }
        .purp-tabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--cream-2); padding: 4px; border-radius: 14px; margin-bottom: 26px; }
        .purp-tab { flex: 1; min-width: 80px; padding: 11px 14px; border-radius: 10px; border: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background .15s; }
        .purp-tab.active { background: var(--navy-800); color: white; box-shadow: 0 4px 14px -4px rgba(10,22,40,.4); }
        .field { margin-bottom: 24px; }
        .field-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
        .field-label { font-size: 13px; color: var(--ink-3); font-weight: 500; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
        .field-input-wrap { display: inline-flex; align-items: baseline; gap: 6px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; transition: border-color .15s, box-shadow .15s; }
        .field-input-wrap:focus-within { border-color: var(--brand-3); box-shadow: 0 0 0 4px rgba(14,165,233,.14); background: white; }
        .field-prefix { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--ink-3); }
        .field-input  { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; color: var(--ink); border: 0; background: transparent; outline: none; width: 110px; text-align: right; padding: 0; }
        .field-suffix { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); margin-left: 2px; }
        input[type="range"] {
          -webkit-appearance: none; width: 100%; height: 6px; border-radius: 3px;
          background: linear-gradient(to right, var(--brand-3) var(--p, 50%), var(--cream-2) var(--p, 50%));
          outline: none;
        }
        input[type="range"]::-webkit-slider-thumb {
          -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
          background: white; border: 2px solid var(--brand-3);
          box-shadow: 0 2px 8px rgba(14,165,233,.35);
          cursor: pointer;
        }
        input[type="range"]::-moz-range-thumb {
          width: 22px; height: 22px; border-radius: 50%;
          background: white; border: 2px solid var(--brand-3); cursor: pointer;
        }
        .res-label { font-size: 11px; opacity: .7; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .14em; }
        .res-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; margin-top: 14px; }
        .res-range-low, .res-range-high {
          background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 18px 18px; position: relative;
        }
        .res-range-high { background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(37,99,235,.18)); border-color: rgba(94,234,212,.35); }
        .res-range-tag { font-size: 10px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .14em; opacity: .7; margin-bottom: 8px; }
        .res-range-val { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
        .res-range-rate { font-family: 'JetBrains Mono', monospace; font-size: 11px; opacity: .65; margin-top: 6px; }
        .res-summary {
          display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
          margin: 22px 0; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12);
          position: relative; z-index: 1;
        }
        .res-summary .l { font-size: 10px; opacity: .65; text-transform: uppercase; letter-spacing: .14em; font-family: 'JetBrains Mono', monospace; }
        .res-summary .v { font-family: 'JetBrains Mono', monospace; font-size: 14px; margin-top: 4px; }
        .res-cta { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
        .res-cta .btn { flex: 1; }
      

/* ---------- Contact form ---------- */

            .ff { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
            .ff label { font-size: 12px; color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-family: 'JetBrains Mono', monospace; }
            .ff input, .ff select {
              padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
              font-size: 15px; font-family: inherit; background: var(--cream); color: var(--ink);
              outline: none; transition: border-color .15s;
            }
            .ff input:focus, .ff select:focus { border-color: var(--mint-500); background: white; }
            .ff .prefix { display: flex; align-items: center; }
            .ff .prefix .px { padding: 14px 12px 14px 16px; background: var(--cream); border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--ink-3); }
            .ff .prefix input { border-radius: 0 12px 12px 0; flex: 1; }
            .typegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
            .typebtn {
              padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
              background: var(--cream); font-size: 13px; cursor: pointer; text-align: left;
              transition: all .15s;
            }
            .typebtn.on { background: var(--mint-500); color: white; border-color: var(--mint-500); }
          
@media (max-width: 880px) { #contact .wrap { grid-template-columns: 1fr !important; } }
/* ---------- FAQ accordion (class-toggled in WP port) ---------- */
.mb-faq-a { display: none; }
.mb-faq-item.open .mb-faq-a { display: block; }
.mb-faq-chev { background: var(--cream-2); color: var(--ink-2); }
.mb-faq-item.open .mb-faq-chev { background: var(--mint-500); color: white; transform: rotate(180deg); }

/* ---------- Responsive parity with the original prototype ---------- */
@media (max-width: 860px) { .hide-mobile { display: none !important; } }
@media (max-width: 880px) {
  .partners-grid,
  #about .wrap,
  #contact .wrap,
  #faq .wrap { grid-template-columns: 1fr !important; }
  #faq .wrap > div:first-child { position: static !important; }
  .mb-foot-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 1000px) { .products-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 760px) {
  #cases .card { grid-template-columns: 1fr !important; }
  .vs-grid { grid-template-columns: 1.6fr 1fr 1fr !important; font-size: 13px; }
  .vs-grid > div { padding: 14px 12px !important; }
}
@media (max-width: 720px) {
  section { padding: 56px 0; }
  section [style*="border-right"] { border-right: 0 !important; }
}
@media (max-width: 600px) { .mb-foot-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 520px) { .products-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 560px) { .hero-rate-row .rate-ticker { width: 100% !important; } }

/* bar-in keyframe for the weekly-matches mini chart */
@keyframes barIn { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: .85; } }

/* =============================================================
   Editable block-pattern sections (phase 2)
   ============================================================= */
.mb-sec { padding: 88px 0; }
.mb-sec-white { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mb-sec-cream { background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mb-sec .wrap > .wp-block-heading { font-size:clamp(32px,4.5vw,56px); line-height:1.05; font-weight:600; letter-spacing:-.025em; margin:0; max-width:880px; }
.mb-sec .mb-eyebrow { margin-bottom:16px; }
.mb-grid-3 { margin-top:48px; }


.mb-step { padding:28px 24px 32px; border-radius:20px; background:var(--cream); }
.mb-step .mb-num { font-size:12px; color:var(--mint-600); margin:0 0 24px; font-weight:500; font-family:'JetBrains Mono',monospace; }
.mb-step h3 { font-size:22px; margin:0 0 10px; font-weight:600; }
.mb-step p { color:var(--ink-2); font-size:15px; margin:0; }
.mb-product { padding:24px; background:#fff; border:1px solid var(--line); border-radius:20px; display:flex; flex-direction:column; }
.mb-product .mb-ico { width:44px; height:44px; border-radius:12px; background:var(--mint-50); color:var(--mint-600); display:grid; place-items:center; margin-bottom:24px; }
.mb-product h3 { font-size:18px; margin:0 0 4px; line-height:1.15; font-weight:600; }
.mb-product .mb-sub { font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; margin:0 0 14px; }
.mb-product p.mb-desc { color:var(--ink-2); font-size:13px; margin:0 0 16px; flex:1; line-height:1.5; }
.mb-product .mb-meta { border-top:1px solid var(--line); padding-top:14px; font-size:12px; }
.mb-product .mb-meta .mb-amt { color:var(--ink-3); display:block; }
.mb-product .mb-meta .mb-apr { color:var(--mint-600); font-weight:500; display:block; margin-top:4px; }
.mb-cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:48px; }

/* =============================================================
   Editable sections — full set (phase 2)
   ============================================================= */
.mb-sec-plain { padding:88px 0; }
.mb-sec-mint  { background:var(--mint-50); border-top:1px solid var(--mint-100); border-bottom:1px solid var(--mint-100); }
.mb-sec-navy  { background:var(--navy-900); color:#fff; }
.mb-sec h2.wp-block-heading { font-size:clamp(28px,3.6vw,44px); line-height:1.05; font-weight:600; letter-spacing:-.025em; margin:0; max-width:880px; }
.mb-sec p.mb-lead { color:var(--ink-2); font-size:17px; max-width:680px; margin:16px 0 40px; }
.mb-sec p.mb-disclaimer { font-size:11px; color:var(--ink-3); margin-top:24px; line-height:1.5; max-width:760px; }





/* hero */
.mb-hero { padding:96px 0 72px; position:relative; overflow:hidden; }
.mb-hero h2.wp-block-heading { font-size:clamp(40px,5.6vw,72px); line-height:1.08; letter-spacing:-.03em; max-width:1100px; margin:0; color:var(--ink); }
.mb-hero .mb-hero-badge { display:inline-flex; align-items:center; gap:10px; padding:8px 16px; background:rgba(255,255,255,.7); border:1px solid var(--mint-100); border-radius:999px; color:var(--brand-3); font-size:13px; font-weight:500; margin:0 0 28px; }
.mb-hero .mb-hero-sub { font-size:clamp(17px,1.5vw,21px); color:var(--ink-2); max-width:720px; line-height:1.5; margin:28px 0 8px; }
.mb-hero-wrap > .wp-block-heading + .wp-block-heading { margin-top:0; }

/* trust bar */

.mb-trust-cell { padding:8px 24px; border-right:1px solid var(--line); }
.mb-trust-cell:last-child { border-right:0; }
.mb-trust-v.wp-block-heading { font-size:clamp(28px,3vw,36px); font-weight:600; letter-spacing:-.02em; color:var(--mint-600); margin:0; }
.mb-trust-l { font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.12em; margin:8px 0 6px; }
.mb-trust-d { font-size:13px; color:var(--ink-2); line-height:1.45; margin:0; }

/* lenders */
.mb-lender-card { padding:24px 22px; border-radius:18px; background:var(--cream); border:1px solid var(--line); }
.mb-lender-n.wp-block-heading { font-size:clamp(28px,3vw,38px); font-weight:600; letter-spacing:-.02em; color:var(--mint-600); margin:0 0 8px; }
.mb-lender-l { font-size:15px; font-weight:600; margin:0 0 6px; color:var(--ink); }
.mb-lender-note { font-size:11px; color:var(--ink-3); line-height:1.5; margin:0; }

/* press */
.mb-press .mb-press-label { font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.14em; margin:0 0 24px; }

/* mid cta */
.mb-midcta { padding:72px 0; }

/* testimonials (dark) */
.mb-sec-navy .mb-eyebrow { color:var(--mint-400); }
.mb-sec-navy h2.wp-block-heading { color:#fff; max-width:760px; }
.mb-testi-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:28px; }
.mb-testi-card .mb-stars { display:flex; gap:2px; margin-bottom:16px; }
.mb-testi-card .mb-quote { font-size:15px; line-height:1.55; margin:0 0 24px; color:rgba(255,255,255,.92); }
.mb-author { display:flex; align-items:center; gap:12px; }
.mb-avatar { width:40px; height:40px; border-radius:50%; color:var(--navy-900); display:grid; place-items:center; font-weight:600; font-size:14px; }
.mb-aname { font-size:14px; font-weight:500; }
.mb-arole { font-size:11px; opacity:.6; }

/* about */


.mb-values { margin-top:8px; }
.mb-value-card { padding:20px; border-radius:16px; background:var(--cream); border:1px solid var(--line); }
.mb-value-ico { width:36px; height:36px; border-radius:10px; background:#fff; color:var(--brand-3); display:grid; place-items:center; margin-bottom:14px; box-shadow:0 1px 0 var(--line); }
.mb-value-card h4.wp-block-heading { font-weight:600; font-size:14px; margin:0 0 4px; }
.mb-value-d { font-size:13px; color:var(--ink-3); margin:0; }
.mb-ministat-grid { margin-top:16px; }
.mb-ministat { padding:14px; border-radius:12px; background:var(--cream); border:1px solid var(--line); text-align:center; }
.mb-ministat h4.wp-block-heading { font-size:18px; font-weight:600; margin:0; }
.mb-ministat-l { font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; margin:4px 0 0; }

/* contact */


.mb-check-list { display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.mb-check { display:flex; align-items:center; gap:12px; font-size:15px; }
.mb-check-i { width:24px; height:24px; border-radius:50%; background:var(--mint-500); color:#fff; display:grid; place-items:center; flex-shrink:0; }

/* faq */


.mb-faq-intro { position:sticky; top:96px; }
.mb-faq-item { border-bottom:1px solid var(--line); padding:18px 0; }
.mb-faq-item summary { font-size:17px; font-weight:500; color:var(--ink); cursor:pointer; list-style:none; }
.mb-faq-item summary::-webkit-details-marker { display:none; }
.mb-faq-item p { color:var(--ink-2); font-size:15px; line-height:1.65; max-width:640px; margin:16px 0 0; }

/* footer link columns (nav-menu or default) */
.mb-foot-menu { list-style:none; margin:0; padding:0; }
.mb-foot-menu li { margin-bottom:12px; }
.mb-foot-menu a, .mb-foot-link { font-size:14px; opacity:.8; color:inherit; text-decoration:none; display:block; margin-bottom:12px; }
.mb-foot-menu a:hover, .mb-foot-link:hover { opacity:1; }
.mb-nav-menu { list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.mb-nav-menu a { color:inherit; text-decoration:none; }

/* phase 2 layout fix — native Columns/Grid handle the columns; these are cosmetic only */
.mb-testi-grid { margin-top:48px; }
.wp-block-columns.mb-about-grid, .wp-block-columns.mb-contact-grid { align-items:center; }
.wp-block-columns.mb-faq-grid { align-items:flex-start; }
.mb-trust-grid .mb-trust-cell:last-child { border-right:0; }

/* =============================================================
   Full-bleed alignment — lets pattern sections break out of any
   constrained parent (e.g. inner pages on page.php). Without this
   rule, .alignfull is just a marker class in a classic theme.
   ============================================================= */
body { overflow-x: hidden; }
.alignfull {
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}
.alignwide {
	margin-left:  calc(50% - min(50vw, 720px));
	margin-right: calc(50% - min(50vw, 720px));
	max-width: none;
	width: auto;
}

/* Standalone CTA band pattern */
.mb-cta-band { padding:48px 0; }
.mb-cta-band > .wrap {
	max-width:1240px;
	margin:0 auto;
	padding:0 32px;
	box-sizing:border-box;
}
.mb-cta-band .mb-cta-row { margin-top:0; justify-content:center; gap:12px; flex-wrap:wrap; }
@media (max-width:720px) { .mb-cta-band > .wrap { padding:0 20px; } }

/* Smooth-scroll anchor links + offset for the sticky header */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

/* ============================================================
   Lively-modern animations — addendum
   ============================================================ */

/* --- Hover lift on the WP-theme cards (editable patterns) --- */
.mb-product,
.mb-testi-card,
.mb-lender-card,
.mb-step,
.mb-ministat,
.mb-trust-tile,
.mb-trust-cell {
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    border-color .25s ease;
  will-change: transform;
}
.mb-product:hover,
.mb-testi-card:hover,
.mb-lender-card:hover,
.mb-step:hover,
.mb-ministat:hover,
.mb-trust-tile:hover,
.mb-trust-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(8, 23, 53, .08);
  border-color: var(--brand-3, #38BDF8);
}
.mb-faq-item {
  transition: background .25s ease, border-color .25s ease;
}
.mb-faq-item:hover {
  background: rgba(8, 145, 178, .03);
}
body[data-motion="off"] .mb-product:hover,
body[data-motion="off"] .mb-testi-card:hover,
body[data-motion="off"] .mb-lender-card:hover,
body[data-motion="off"] .mb-step:hover,
body[data-motion="off"] .mb-ministat:hover,
body[data-motion="off"] .mb-trust-tile:hover,
body[data-motion="off"] .mb-trust-cell:hover {
  transform: none;
  box-shadow: none;
}

/* --- Editable .mb-hero: subtle scroll parallax on decorative pseudo-layer --- */
.mb-hero { position: relative; overflow: hidden; }
.mb-hero::before {
  content: "";
  position: absolute;
  inset: -10% -5% auto -5%;
  height: 70%;
  background:
    radial-gradient(60% 70% at 70% 20%, rgba(94, 234, 212, .22), transparent 60%),
    radial-gradient(50% 60% at 20% 80%, rgba(56, 189, 248, .18), transparent 60%);
  transform: translate3d(0, calc(var(--mb-scroll-y, 0px) * 0.6), 0);
  transition: transform .15s linear;
  pointer-events: none;
  z-index: 0;
}
.mb-hero > * { position: relative; z-index: 1; }
body[data-motion="off"] .mb-hero::before { transform: none; }

/* --- Floating WhatsApp button: gentle breathe + pulse ring --- */
@keyframes mb-fab-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.02); }
}
@keyframes mb-fab-ring {
  0%   { box-shadow: 0 0 0 0   rgba(31, 174, 84, .55), 0 10px 30px -10px rgba(31, 174, 84, .6), 0 4px 12px rgba(0, 0, 0, .1); }
  70%  { box-shadow: 0 0 0 18px rgba(31, 174, 84, 0),  0 10px 30px -10px rgba(31, 174, 84, .6), 0 4px 12px rgba(0, 0, 0, .1); }
  100% { box-shadow: 0 0 0 0   rgba(31, 174, 84, 0),  0 10px 30px -10px rgba(31, 174, 84, .6), 0 4px 12px rgba(0, 0, 0, .1); }
}
#mb-float-wa {
  animation: mb-fab-breathe 3.4s ease-in-out infinite, mb-fab-ring 3.4s ease-out infinite;
}
#mb-float-wa:hover { animation-play-state: paused; transform: translateY(-3px) scale(1.04); }
body[data-motion="off"] #mb-float-wa { animation: none; }

/* --- Smoother button transitions across both legacy + mb-* CTA bands --- */
.mb-cta-band a,
.mb-midcta a {
  transition: transform .25s ease, box-shadow .25s ease, filter .2s ease;
}
.mb-cta-band a:hover,
.mb-midcta a:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 28px rgba(8, 145, 178, .25);
}

@media (prefers-reduced-motion: reduce) {
  .mb-product, .mb-testi-card, .mb-lender-card, .mb-step, .mb-ministat, .mb-trust-cell { transition: none; }
  .mb-product:hover, .mb-testi-card:hover, .mb-lender-card:hover, .mb-step:hover, .mb-ministat:hover, .mb-trust-cell:hover { transform: none; box-shadow: none; }
  #mb-float-wa { animation: none; }
  .mb-hero::before { transform: none; }
}

/* ============================================================
   Bolder-modern animations (motion=full)
   ============================================================ */

/* Bigger, more confident reveal travel + slight scale-in */
body[data-motion="full"] .anim-reveal,
body:not([data-motion]) .anim-reveal {
  transform: translate3d(0, 140px, 0) scale(.85);
  transition-duration: 1.5s, 1.5s;
}
body[data-motion="full"] .anim-reveal.is-in,
body:not([data-motion]) .anim-reveal.is-in {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Bigger hover lift + soft scale for all card-style elements */
.mb-product:hover,
.mb-testi-card:hover,
.mb-lender-card:hover,
.mb-step:hover,
.mb-ministat:hover,
.mb-trust-cell:hover {
  transform: translateY(-14px) scale(1.04);
  box-shadow: 0 32px 80px rgba(8, 23, 53, .18);
}
.card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 24px 60px rgba(8, 23, 53, .12);
}
body[data-motion="off"] .mb-product:hover,
body[data-motion="off"] .mb-testi-card:hover,
body[data-motion="off"] .mb-lender-card:hover,
body[data-motion="off"] .mb-step:hover,
body[data-motion="off"] .mb-ministat:hover,
body[data-motion="off"] .mb-trust-cell:hover,
body[data-motion="off"] .card:hover {
  transform: none;
  box-shadow: none;
}

/* Hero decoratives: continuous gentle float on top of scroll-driven offset */
@keyframes mb-hero-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 22px -32px; }
}
body[data-motion="full"] .mb-hero::before,
body:not([data-motion]) .mb-hero::before {
  animation: mb-hero-float 9s ease-in-out infinite;
}
body[data-motion="off"] .mb-hero::before { animation: none; }

/* Scroll progress bar */
#mb-scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-1, #5EEAD4), var(--brand-3, #38BDF8), var(--brand-4, #2563EB));
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 100;
  pointer-events: none;
  transition: transform .12s linear;
  will-change: transform;
}
body[data-motion="off"] #mb-scroll-progress { display: none; }

/* Primary CTA shimmer sweep on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
  transition: transform .8s ease;
}
.btn-primary:hover::after { transform: translateX(100%); }
body[data-motion="off"] .btn-primary::after { display: none; }

/* CTA bands: bigger hover */
.mb-cta-band a:hover,
.mb-midcta a:hover {
  transform: translateY(-5px) scale(1.04);
  filter: brightness(1.1);
  box-shadow: 0 22px 48px rgba(8, 145, 178, .38);
}

/* Number stats: subtle text-shadow glow during count-up (already in .is-revealed state via existing JS) */
[data-stat] {
  transition: text-shadow .6s ease;
}
[data-stat].is-revealed {
  text-shadow: 0 0 36px rgba(94, 234, 212, .55), 0 0 8px rgba(94, 234, 212, .35);
}
body[data-motion="off"] [data-stat] { text-shadow: none !important; }

/* Floating WhatsApp button: keep bolder breathe rhythm */
@keyframes mb-fab-breathe-bold {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-7px) scale(1.07); }
}
body[data-motion="full"] #mb-float-wa,
body:not([data-motion]) #mb-float-wa {
  animation: mb-fab-breathe-bold 3.2s ease-in-out infinite, mb-fab-ring 3.2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body[data-motion="full"] .anim-reveal,
  body:not([data-motion]) .anim-reveal { transform: none; transition: none; }
  .mb-hero::before { animation: none; }
  #mb-scroll-progress { display: none; }
  .btn-primary::after { display: none; }
}

/* ============================================================
   WPForms styling — match the MoneyBuddy prototype
   Scoped to .mb-contact-form so it doesn't leak anywhere else.
   ============================================================ */

.mb-contact-form .wpforms-container { margin: 0; max-width: 100%; }
.mb-contact-form .wpforms-form { font-family: inherit; }

/* Field group spacing */
.mb-contact-form .wpforms-field {
  margin: 0 0 16px;
  padding: 0;
}

/* Labels: uppercase, mono, small, subtle */
.mb-contact-form .wpforms-field-label,
.mb-contact-form .wpforms-field > label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--navy-900, #050B15);
  opacity: 0.7;
  margin-bottom: 10px;
  display: block;
  line-height: 1.4;
}
.mb-contact-form .wpforms-required-label {
  color: var(--brand-3, #38BDF8);
  margin-left: 4px;
}

/* Inputs / textarea / select */
.mb-contact-form .wpforms-field input[type="text"],
.mb-contact-form .wpforms-field input[type="email"],
.mb-contact-form .wpforms-field input[type="tel"],
.mb-contact-form .wpforms-field input[type="number"],
.mb-contact-form .wpforms-field input[type="url"],
.mb-contact-form .wpforms-field textarea,
.mb-contact-form .wpforms-field select {
  width: 100%;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: inherit;
  font-weight: 500;
  color: var(--ink, #050B15);
  background: rgba(8, 145, 178, 0.04);
  border: 1px solid rgba(8, 145, 178, 0.18);
  border-radius: 12px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: none;
  box-sizing: border-box;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.mb-contact-form .wpforms-field input:focus,
.mb-contact-form .wpforms-field textarea:focus,
.mb-contact-form .wpforms-field select:focus {
  outline: none;
  border-color: var(--brand-3, #38BDF8);
  background: white;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
.mb-contact-form .wpforms-field input::placeholder,
.mb-contact-form .wpforms-field textarea::placeholder {
  color: rgba(5, 11, 21, 0.4);
  font-weight: 400;
}
.mb-contact-form .wpforms-field textarea {
  min-height: 96px;
  resize: vertical;
}

/* Custom dropdown arrow for <select> */
.mb-contact-form .wpforms-field select {
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}

/* Description text under labels */
.mb-contact-form .wpforms-field-description {
  font-size: 12px;
  color: rgba(5, 11, 21, 0.55);
  margin-top: 6px;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Checkbox (PDPO consent) */
.mb-contact-form .wpforms-field-checkbox ul,
.mb-contact-form .wpforms-field-radio ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mb-contact-form .wpforms-field-checkbox ul li,
.mb-contact-form .wpforms-field-radio ul li {
  margin: 0 0 10px;
  padding: 0;
}
.mb-contact-form .wpforms-field-checkbox ul li label,
.mb-contact-form .wpforms-field-radio ul li label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--ink, #050B15);
  opacity: 0.85;
  cursor: pointer;
  margin: 0;
}
.mb-contact-form .wpforms-field-checkbox input[type="checkbox"],
.mb-contact-form .wpforms-field-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--mint-600, #0891B2);
  cursor: pointer;
}
/* Hide the parent "consent" label when the field is just a single checkbox option */
.mb-contact-form .wpforms-field-checkbox > .wpforms-field-label { display: none; }

/* Submit button: full-width, mint→blue gradient, rounded pill */
.mb-contact-form .wpforms-submit-container {
  margin-top: 20px;
  padding: 0;
}
.mb-contact-form button.wpforms-submit,
.mb-contact-form .wpforms-submit-container button,
.mb-contact-form input[type="submit"] {
  display: block;
  width: 100%;
  padding: 14px 24px !important;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: white;
  background: linear-gradient(90deg, var(--brand-1, #5EEAD4) 0%, var(--brand-3, #38BDF8) 50%, var(--brand-4, #2563EB) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-position .6s ease, transform .2s ease, box-shadow .3s ease, filter .2s ease;
  box-shadow: 0 10px 28px rgba(8, 145, 178, 0.22);
  -webkit-appearance: none;
  appearance: none;
}
.mb-contact-form button.wpforms-submit:hover,
.mb-contact-form .wpforms-submit-container button:hover,
.mb-contact-form input[type="submit"]:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 14px 36px rgba(8, 145, 178, 0.32);
}
.mb-contact-form button.wpforms-submit:active {
  transform: translateY(0);
}

/* Error states */
.mb-contact-form .wpforms-error,
.mb-contact-form label.wpforms-error {
  color: #DC2626;
  font-size: 12px;
  margin-top: 6px;
  font-family: inherit;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.mb-contact-form .wpforms-field input.wpforms-error,
.mb-contact-form .wpforms-field textarea.wpforms-error,
.mb-contact-form .wpforms-field select.wpforms-error {
  border-color: #DC2626;
  background: rgba(220, 38, 38, 0.04);
}
.mb-contact-form .wpforms-field input.wpforms-error:focus,
.mb-contact-form .wpforms-field textarea.wpforms-error:focus,
.mb-contact-form .wpforms-field select.wpforms-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Success / confirmation panel */
.wpforms-confirmation-container,
.wpforms-confirmation-container-full,
.mb-contact-form .wpforms-confirmation-container {
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.10), rgba(56, 189, 248, 0.08));
  border: 1px solid rgba(94, 234, 212, 0.35);
  border-radius: 14px;
  padding: 24px 28px;
  color: var(--ink, #050B15);
  font-size: 15px;
  line-height: 1.6;
}

/* Honeypot/sub-fields cleanup (WPForms can render some wrapper divs) */
.mb-contact-form .wpforms-field-sublabel { font-size: 12px; opacity: 0.6; }

/* Mobile tightening */
@media (max-width: 640px) {
  .mb-contact-form .wpforms-field input,
  .mb-contact-form .wpforms-field textarea,
  .mb-contact-form .wpforms-field select { padding: 11px 13px !important; font-size: 13px !important; }
  .mb-contact-form button.wpforms-submit { padding: 12px 20px !important; font-size: 13px !important; }
}

/* ============================================================
   Even bolder — addendum to make animations unmistakable
   ============================================================ */

/* Thicker scroll progress bar with a soft mint glow trail */
#mb-scroll-progress {
  height: 4px;
  box-shadow: 0 0 14px rgba(94, 234, 212, .65), 0 1px 4px rgba(56, 189, 248, .4);
  transition: transform .14s ease-out;
}

/* Headings inside sections — distinctly bolder reveal (more travel, slight rotate-in feel) */
body[data-motion="full"] .mb-sec h2.anim-reveal,
body[data-motion="full"] .mb-sec h3.anim-reveal,
body[data-motion="full"] section h2.anim-reveal,
body[data-motion="full"] section h3.anim-reveal,
body:not([data-motion]) .mb-sec h2.anim-reveal,
body:not([data-motion]) .mb-sec h3.anim-reveal,
body:not([data-motion]) section h2.anim-reveal,
body:not([data-motion]) section h3.anim-reveal {
  transform: translate3d(0, 80px, 0) scale(.9);
  transition-duration: 1.0s, 1.0s;
}
body[data-motion="full"] .mb-sec h2.anim-reveal.is-in,
body[data-motion="full"] .mb-sec h3.anim-reveal.is-in,
body[data-motion="full"] section h2.anim-reveal.is-in,
body[data-motion="full"] section h3.anim-reveal.is-in,
body:not([data-motion]) .mb-sec h2.anim-reveal.is-in,
body:not([data-motion]) .mb-sec h3.anim-reveal.is-in,
body:not([data-motion]) section h2.anim-reveal.is-in,
body:not([data-motion]) section h3.anim-reveal.is-in {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Eyebrows / leads: slide in from the left with a clear travel */
body[data-motion="full"] .mb-eyebrow.anim-reveal,
body[data-motion="full"] .mb-lead.anim-reveal,
body:not([data-motion]) .mb-eyebrow.anim-reveal,
body:not([data-motion]) .mb-lead.anim-reveal {
  transform: translate3d(-32px, 24px, 0);
}
body[data-motion="full"] .mb-eyebrow.anim-reveal.is-in,
body[data-motion="full"] .mb-lead.anim-reveal.is-in,
body:not([data-motion]) .mb-eyebrow.anim-reveal.is-in,
body:not([data-motion]) .mb-lead.anim-reveal.is-in {
  transform: translate3d(0, 0, 0);
}

/* Buttons: clearer hover lift + crisper transitions on legacy + new */
.btn:hover, .btn-primary:hover, .btn-dark:hover {
  transform: translateY(-3px) scale(1.025) !important;
}

/* Number stats: subtle scale pulse when revealed (in addition to glow) */
@keyframes mb-stat-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
body[data-motion="full"] [data-stat].is-revealed,
body:not([data-motion]) [data-stat].is-revealed {
  animation: mb-stat-pulse .9s cubic-bezier(.34, 1.56, .64, 1) .3s;
}
body[data-motion="off"] [data-stat].is-revealed { animation: none !important; }

/* Section pseudo-divider draws in below mb-sec headings (subtle accent line) */
body[data-motion="full"] .mb-eyebrow.anim-reveal::after,
body:not([data-motion]) .mb-eyebrow.anim-reveal::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-1, #5EEAD4), var(--brand-3, #38BDF8));
  vertical-align: middle;
  margin-left: 12px;
  transition: width .8s ease .5s;
  border-radius: 2px;
}
body[data-motion="full"] .mb-eyebrow.anim-reveal.is-in::after,
body:not([data-motion]) .mb-eyebrow.anim-reveal.is-in::after {
  width: 36px;
}

/* ============================================================
   WPForms Multiple Choice → pill-button grid (loan-type buttons)
   Activates automatically once the loan-type field is set to
   "Multiple Choice" in WPForms. No theme change needed beyond this.
   ============================================================ */

.mb-contact-form .wpforms-field-radio ul,
.mb-contact-form .wpforms-field-checkbox ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mb-contact-form .wpforms-field-radio ul li,
.mb-contact-form .wpforms-field-checkbox ul li {
  margin: 0;
  padding: 0;
  position: relative;
}

/* Hide the actual radio input — accessible but invisible.
   The clickable target is the label itself. */
.mb-contact-form .wpforms-field-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
  margin: 0;
}

/* Pill-button label */
.mb-contact-form .wpforms-field-radio ul li label {
  display: block;
  padding: 11px 14px !important;
  background: rgba(8, 145, 178, 0.04);
  border: 1px solid rgba(8, 145, 178, 0.18);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--ink, #050B15);
  cursor: pointer;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
  opacity: 1;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease, transform .15s ease;
  user-select: none;
}
.mb-contact-form .wpforms-field-radio ul li label:hover {
  background: rgba(8, 145, 178, 0.08);
  border-color: var(--brand-3, #38BDF8);
  transform: translateY(-1px);
}

/* Selected state — mint→blue gradient fill, white text */
.mb-contact-form .wpforms-field-radio input[type="radio"]:checked + label {
  background: linear-gradient(90deg, var(--brand-1, #5EEAD4), var(--brand-3, #38BDF8)) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(8, 145, 178, 0.28);
}

/* Mobile: single column (keeps buttons tappable, avoids cramped 2-col on narrow screens) */
@media (max-width: 480px) {
  .mb-contact-form .wpforms-field-radio ul {
    grid-template-columns: 1fr;
  }
}

/* The PDPO consent checkbox is also wpforms-field-checkbox, but with only one option.
   Override the grid back to a single-column flex layout for single-option checkbox fields. */
.mb-contact-form .wpforms-field-checkbox ul:has(li:only-child) {
  display: block;
}
.mb-contact-form .wpforms-field-checkbox ul li:only-child label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
  font-size: 12px !important;
}

/* ============================================================
   WPForms Multi-Choice (Checkboxes) loan-type buttons — final overrides
   Wins specificity battles with WPForms' loaded CSS.
   ============================================================ */

/* Both radio and checkbox fields render as 2-col pill grid */
.mb-contact-form .wpforms-field-radio ul,
.mb-contact-form .wpforms-field-checkbox ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mb-contact-form .wpforms-field-radio ul li,
.mb-contact-form .wpforms-field-checkbox ul li {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  width: auto !important;
}

/* Hide the actual input — label is the clickable target */
.mb-contact-form .wpforms-field-radio input[type="radio"],
.mb-contact-form .wpforms-field-checkbox input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* Pill-button label */
.mb-contact-form .wpforms-field-radio ul li label,
.mb-contact-form .wpforms-field-checkbox ul li label {
  display: block !important;
  padding: 11px 14px !important;
  background: rgba(8, 145, 178, 0.04) !important;
  border: 1px solid rgba(8, 145, 178, 0.18) !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink, #050B15) !important;
  cursor: pointer !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  opacity: 1 !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease, transform .15s ease !important;
  user-select: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.mb-contact-form .wpforms-field-radio ul li label:hover,
.mb-contact-form .wpforms-field-checkbox ul li label:hover {
  background: rgba(8, 145, 178, 0.08) !important;
  border-color: var(--brand-3, #38BDF8) !important;
  transform: translateY(-1px) !important;
}

/* Selected state — gradient fill */
.mb-contact-form .wpforms-field-radio input[type="radio"]:checked + label,
.mb-contact-form .wpforms-field-checkbox input[type="checkbox"]:checked + label {
  background: linear-gradient(90deg, var(--brand-1, #5EEAD4), var(--brand-3, #38BDF8)) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(8, 145, 178, 0.28) !important;
}

/* PDPO single-option checkbox: override grid back to inline-flex with visible checkbox */
.mb-contact-form .wpforms-field-checkbox ul:has(> li:only-child) {
  display: block !important;
  grid-template-columns: none !important;
}
.mb-contact-form .wpforms-field-checkbox ul li:only-child {
  position: relative !important;
}
.mb-contact-form .wpforms-field-checkbox ul li:only-child input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 !important;
  flex-shrink: 0 !important;
  accent-color: var(--mint-600, #0891B2) !important;
}
.mb-contact-form .wpforms-field-checkbox ul li:only-child label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
  font-size: 12px !important;
  cursor: pointer !important;
  width: auto !important;
  box-shadow: none !important;
  transform: none !important;
}
.mb-contact-form .wpforms-field-checkbox ul li:only-child input[type="checkbox"]:checked + label {
  background: transparent !important;
  color: var(--ink, #050B15) !important;
  box-shadow: none !important;
}

@media (max-width: 480px) {
  .mb-contact-form .wpforms-field-radio ul,
  .mb-contact-form .wpforms-field-checkbox ul {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   Footer relayout overrides (3-col responsive)
   ============================================================ */

.mb-foot-grid > div a:hover,
.mb-foot-grid > div a:focus {
  opacity: 1 !important;
  color: var(--mint-400, #5EEAD4) !important;
}

/* When the Legal menu location is assigned, style the wp_nav_menu output to match */
.mb-foot-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mb-foot-menu li { margin: 0; padding: 0; }
.mb-foot-menu a {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  opacity: 0.85;
  transition: opacity .2s, color .2s;
}
.mb-foot-menu a:hover { opacity: 1; color: var(--mint-400, #5EEAD4); }

@media (max-width: 820px) {
  .mb-foot-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .mb-foot-grid > div:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .mb-foot-grid {
    grid-template-columns: 1fr !important;
  }
  .mb-foot-grid > div:first-child {
    grid-column: auto;
  }
}

/* ============================================================
   WPForms submit button — stop it from being page-wide
   ============================================================ */
.mb-contact-form button.wpforms-submit,
.mb-contact-form .wpforms-submit-container button,
.mb-contact-form input[type="submit"] {
  width: auto !important;
  min-width: 200px !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
}
.mb-contact-form .wpforms-submit-container {
  text-align: center !important;
}

/* Also constrain the form wrapper inside the card so inputs aren't oversized */
.mb-contact-form .wpforms-container { max-width: 380px !important; margin: 0 auto !important; }
.mb-contact-form .wpforms-field input[type="text"],
.mb-contact-form .wpforms-field input[type="email"],
.mb-contact-form .wpforms-field input[type="tel"],
.mb-contact-form .wpforms-field input[type="number"],
.mb-contact-form .wpforms-field input[type="url"],
.mb-contact-form .wpforms-field textarea,
.mb-contact-form .wpforms-field select {
  padding: 11px 13px !important;
  font-size: 13px !important;
}
.mb-contact-form .wpforms-field-label,
.mb-contact-form .wpforms-field > label {
  font-size: 10px !important;
}

/* ============================================================
   PDPO consent checkbox — final visibility safeguard
   Two paths to make the single-option consent checkbox visible:
     (a) Auto: when the <ul> has only one <li> child (most cases)
     (b) Manual: when the user adds CSS class "mb-consent" to the
         field in WPForms (Advanced → CSS Classes), as a fallback
         when the :only-child auto-detection misses
   ============================================================ */

/* Path (a) — auto-detect by :only-child */
.mb-contact-form .wpforms-field-checkbox ul li:only-child input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 !important;
  flex-shrink: 0 !important;
  accent-color: var(--mint-600, #0891B2) !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/* Path (b) — class-based manual hook */
.mb-contact-form .wpforms-field.mb-consent ul {
  display: block !important;
  grid-template-columns: none !important;
}
.mb-contact-form .wpforms-field.mb-consent ul li {
  position: relative !important;
}
.mb-contact-form .wpforms-field.mb-consent ul li label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
  font-size: 12px !important;
  cursor: pointer !important;
  width: auto !important;
  box-shadow: none !important;
  transform: none !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  color: var(--ink, #050B15) !important;
  opacity: .85 !important;
  line-height: 1.55 !important;
}
.mb-contact-form .wpforms-field.mb-consent input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 !important;
  flex-shrink: 0 !important;
  accent-color: var(--mint-600, #0891B2) !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}
.mb-contact-form .wpforms-field.mb-consent input[type="checkbox"]:checked + label {
  background: transparent !important;
  color: var(--ink, #050B15) !important;
  box-shadow: none !important;
}
/* Show the field label "DATA COLLECTION CONSENT" above the consent checkbox */
.mb-contact-form .wpforms-field.mb-consent > .wpforms-field-label {
  display: block !important;
}

/* ============================================================
   Batch update — mobile nav, spacing, form, logo, calculator polish
   ============================================================ */

/* ===== Mobile nav hamburger menu ===== */
@media (max-width: 820px) {
  .mb-nav-toggle.show-mobile { display: inline-flex !important; align-items: center; justify-content: center; }
  body.mb-nav-open { overflow: hidden; }
  body.mb-nav-open .mb-mobile-menu { display: flex !important; }
}
.mb-mobile-menu { font-family: inherit; }
.mb-mobile-link {
  display: block;
  padding: 16px 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  transition: color .2s ease, padding-left .2s ease;
}
.mb-mobile-link:hover { color: var(--mint-600); padding-left: 4px; }

/* ===== Logo — bigger text-half on the right ===== */
header .wrap > a[href] > div[style*="font-weight:700"] {
  font-size: 21px !important;
  letter-spacing: 0.015em !important;
}
header .wrap > a[href] img {
  height: 42px !important;
}

/* ===== Form: red required asterisk to top-right of label ===== */
.mb-contact-form .wpforms-required-label,
.mb-contact-form .wpforms-field-label .wpforms-required-label {
  position: absolute !important;
  top: -2px !important;
  margin-left: 4px !important;
  font-size: 11px !important;
  color: #DC2626 !important;
}
.mb-contact-form .wpforms-field-label,
.mb-contact-form .wpforms-field > label { position: relative !important; padding-right: 14px; }

/* ===== Form: kill the white line on left of submit button (focus-visible outline) ===== */
.mb-contact-form button.wpforms-submit,
.mb-contact-form .wpforms-submit-container button,
.mb-contact-form input[type="submit"] {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  border-left: none !important;
  box-shadow: 0 10px 28px rgba(8, 145, 178, .22) !important;
}
.mb-contact-form button.wpforms-submit:focus,
.mb-contact-form button.wpforms-submit:focus-visible,
.mb-contact-form button.wpforms-submit:active {
  outline: none !important;
  box-shadow: 0 10px 28px rgba(8, 145, 178, .32), 0 0 0 3px rgba(94, 234, 212, .25) !important;
}

/* ===== Form: tighten white space ===== */
.mb-contact-form { padding: 20px !important; }
.mb-contact-form .wpforms-field { margin-bottom: 14px !important; }
.mb-contact-form .wpforms-submit-container { margin-top: 16px !important; }

/* ===== Contact section: tighter heading→subheading spacing ===== */
section#contact > .wrap > div:first-child .eyebrow,
section#contact > .wrap > div:first-child h2,
section#about > .wrap > div:first-child .eyebrow,
section#about > .wrap > div:first-child h2,
section#faq > .wrap > .eyebrow,
section#faq > .wrap h2 {
  margin-bottom: 8px !important;
}
section#contact h2, section#about h2, section#faq h2 {
  line-height: 1.05 !important;
  margin-bottom: 14px !important;
}
section#contact h2 + p,
section#about h2 + p,
section#faq h2 + p {
  margin-top: 14px !important;
}
section#about ul, section#contact ul {
  margin-top: 14px !important;
}
section#about ul li, section#contact ul li { margin-bottom: 8px !important; }

/* ===== Calculator: new single-line range row (replaces best/conservative) ===== */
.calc-result .res-range-single {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: white;
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.calc-result .res-range-dash {
  color: rgba(94, 234, 212, .8);
  font-weight: 500;
}
.calc-result .res-range-val { display: inline-block; }
.calc-result .res-range-rate-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  opacity: 0.7;
  color: white;
  margin-top: 8px;
}

/* ===== Hero ministats tile hover lift ===== */
.mb-trust-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
}

/* ===== Hero: subtle animated background glow ===== */
#mb-hero,
.mb-hero,
section.mb-hero,
section[class*="hero"]:first-of-type {
  position: relative;
  overflow: hidden;
}
section[class*="hero"]:first-of-type::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(94, 234, 212, .14), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: mb-hero-bg-float 18s ease-in-out infinite;
}
section[class*="hero"]:first-of-type::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(56, 189, 248, .12), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: mb-hero-bg-float 22s ease-in-out infinite reverse;
}
section[class*="hero"]:first-of-type > * { position: relative; z-index: 1; }

@keyframes mb-hero-bg-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(40px, -28px, 0) scale(1.08); }
}
body[data-motion="off"] section[class*="hero"]:first-of-type::before,
body[data-motion="off"] section[class*="hero"]:first-of-type::after {
  animation: none !important;
}

/* ===== Chinese version: hide HK$0 tile ===== */
html[lang^="zh"] .mb-hide-on-zh,
body[class*="lang-zh"] .mb-hide-on-zh,
body[class*="trp-translation-zh"] .mb-hide-on-zh {
  display: none !important;
}

/* ===== WhatsApp button: kill the rogue blue spot (browser default focus styles) ===== */
.btn, .btn-primary, .btn-dark, .btn-ghost,
a.btn, a.btn-primary, a.btn-dark, a.btn-ghost,
button.btn, button.btn-primary, button.btn-dark {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.btn:focus, .btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, .3);
}

/* ===== Mobile responsive overall touches ===== */
@media (max-width: 540px) {
  .mb-trust-tile { padding: 16px 18px !important; }
  .mb-trust-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}

/* ============================================================
   Trust ministat tiles — works for BOTH render paths:
   - Shortcode: outputs .mb-trust-tile with inline color styles
   - Editable pattern: outputs .mb-trust-cell.mb-trust-tile (no inline styles, colors via nth-child)
   nth-child rules below provide colors as a defensive fallback whenever inline styles aren't present.
   ============================================================ */

/* Grid container override — kill the old "row with dividers" layout */
.mb-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
}

/* Base tile look (applies to both shortcode + pattern outputs) */
.mb-trust-tile,
.mb-trust-cell {
  padding: 22px 24px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  background: rgba(20, 184, 166, .06) !important;
  transition: transform .25s ease, box-shadow .25s ease;
  border-right: 1px solid rgba(0, 0, 0, .08) !important;  /* override the old border-right divider */
}
.mb-trust-tile:hover,
.mb-trust-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
}

/* Color rotation via nth-child — applies when no inline color is set (pattern path) */
.mb-trust-grid > .mb-trust-tile:nth-child(1),
.mb-trust-grid > .mb-trust-cell:nth-child(1) {
  background: rgba(20, 184, 166, .07) !important;
  border-color: rgba(20, 184, 166, .28) !important;
}
.mb-trust-grid > .mb-trust-tile:nth-child(1) .mb-trust-v,
.mb-trust-grid > .mb-trust-cell:nth-child(1) .mb-trust-v,
.mb-trust-grid > .mb-trust-tile:nth-child(1) [data-stat],
.mb-trust-grid > .mb-trust-cell:nth-child(1) [data-stat] {
  color: var(--mint-600, #0891B2) !important;
}

.mb-trust-grid > .mb-trust-tile:nth-child(2),
.mb-trust-grid > .mb-trust-cell:nth-child(2) {
  background: rgba(14, 165, 233, .07) !important;
  border-color: rgba(14, 165, 233, .28) !important;
}
.mb-trust-grid > .mb-trust-tile:nth-child(2) .mb-trust-v,
.mb-trust-grid > .mb-trust-cell:nth-child(2) .mb-trust-v,
.mb-trust-grid > .mb-trust-tile:nth-child(2) [data-stat],
.mb-trust-grid > .mb-trust-cell:nth-child(2) [data-stat] {
  color: #0EA5E9 !important;
}

.mb-trust-grid > .mb-trust-tile:nth-child(3),
.mb-trust-grid > .mb-trust-cell:nth-child(3) {
  background: rgba(37, 99, 235, .07) !important;
  border-color: rgba(37, 99, 235, .28) !important;
}
.mb-trust-grid > .mb-trust-tile:nth-child(3) .mb-trust-v,
.mb-trust-grid > .mb-trust-cell:nth-child(3) .mb-trust-v,
.mb-trust-grid > .mb-trust-tile:nth-child(3) [data-stat],
.mb-trust-grid > .mb-trust-cell:nth-child(3) [data-stat] {
  color: #2563EB !important;
}

.mb-trust-grid > .mb-trust-tile:nth-child(4),
.mb-trust-grid > .mb-trust-cell:nth-child(4) {
  background: rgba(124, 58, 237, .07) !important;
  border-color: rgba(124, 58, 237, .28) !important;
}
.mb-trust-grid > .mb-trust-tile:nth-child(4) .mb-trust-v,
.mb-trust-grid > .mb-trust-cell:nth-child(4) .mb-trust-v,
.mb-trust-grid > .mb-trust-tile:nth-child(4) [data-stat],
.mb-trust-grid > .mb-trust-cell:nth-child(4) [data-stat] {
  color: #7C3AED !important;
}

/* Same idea for the lender 4-card grid (in case pattern path renders it) */
.mb-lender-cards > .mb-lender-card:nth-child(1) {
  background: rgba(20, 184, 166, .07) !important;
  border-color: rgba(20, 184, 166, .28) !important;
}
.mb-lender-cards > .mb-lender-card:nth-child(1) .mb-lender-n { color: var(--mint-600, #0891B2) !important; }
.mb-lender-cards > .mb-lender-card:nth-child(2) {
  background: rgba(14, 165, 233, .07) !important;
  border-color: rgba(14, 165, 233, .28) !important;
}
.mb-lender-cards > .mb-lender-card:nth-child(2) .mb-lender-n { color: #0EA5E9 !important; }
.mb-lender-cards > .mb-lender-card:nth-child(3) {
  background: rgba(37, 99, 235, .07) !important;
  border-color: rgba(37, 99, 235, .28) !important;
}
.mb-lender-cards > .mb-lender-card:nth-child(3) .mb-lender-n { color: #2563EB !important; }
.mb-lender-cards > .mb-lender-card:nth-child(4) {
  background: rgba(124, 58, 237, .07) !important;
  border-color: rgba(124, 58, 237, .28) !important;
}
.mb-lender-cards > .mb-lender-card:nth-child(4) .mb-lender-n { color: #7C3AED !important; }

/* On mobile, 2-up grid for trust tiles */
@media (max-width: 540px) {
  .mb-trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .mb-trust-tile, .mb-trust-cell { padding: 16px 18px !important; }
}

/* ============================================================
   FINAL BATCH FIXES — items 1-9 from client feedback
   ============================================================ */

/* ===== 2. Gradient button artifact fix (the "dark blue blob on left") =====
   Root cause: the dual box-shadow + shimmer pseudo + the gradient was creating
   an interaction artifact at the corners. Strip down to a clean single shadow,
   ensure overflow clipping is rock-solid, kill all browser-default highlights. */
.btn-primary,
a.btn-primary,
button.btn-primary,
.mb-contact-form .wpforms-field-radio input[type="radio"]:checked + label,
.mb-contact-form .wpforms-field-checkbox input[type="checkbox"]:checked + label,
.mb-contact-form button.wpforms-submit,
.mb-contact-form input[type="submit"] {
  overflow: hidden !important;
  isolation: isolate !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important; /* Safari clipping fix */
  transform: translateZ(0); /* GPU layer for clean rendering */
  border: none !important;
}
.btn-primary {
  box-shadow: 0 10px 28px -8px rgba(14, 165, 233, .35) !important;
  background: linear-gradient(90deg, var(--brand-1, #5EEAD4) 0%, var(--brand-3, #38BDF8) 50%, var(--brand-4, #2563EB) 100%) !important;
}
.btn-primary::after { display: none !important; } /* kill the shimmer pseudo that was causing the bleed */
.btn-primary:hover {
  box-shadow: 0 14px 32px -8px rgba(14, 165, 233, .45) !important;
  filter: brightness(1.04);
}

/* ===== 4. Section padding audit — tighten all major gaps ===== */
section { padding-top: 64px; padding-bottom: 64px; } /* default for sections without explicit padding */
section#products { padding: 56px 0; }
section#calculator { padding: 56px 0; }
section#cases { padding: 56px 0 !important; }
section#about { padding: 56px 0; }
section#faq { padding: 56px 0; }
.mb-cta-band { padding: 48px 0 !important; }

/* ===== 6. Digit-roll animation initial state =====
   Elements marked data-roll-amount start with all 9s. JS swaps in target on observe. */
[data-roll-amount] {
  font-variant-numeric: tabular-nums;
}

/* ===== 7. Calculator result: bigger range value, tighter layout ===== */
.calc-result .res-range-single {
  font-size: clamp(88px, 12vw, 160px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  margin: 0 !important;
  gap: 28px !important;
  align-items: center !important;
}
.calc-result .res-range-dash {
  font-size: 0.6em;
  align-self: center !important;
  position: relative !important;
  top: -0.08em !important;
}
}
.calc-result .res-range-rate-line {
  margin-top: 12px !important;
  margin-bottom: 28px !important;
}
.calc-result .res-cta {
  margin-top: 0 !important;
}
.calc-result {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 56px 56px 48px 56px !important;
  align-items: stretch !important;
}
.calc-result .res-label {
  margin-bottom: 0 !important;
}

/* ===== 9. Contact form section: tighter spacing on left ===== */
section#contact h2 { margin-bottom: 8px !important; }
section#contact .eyebrow { margin-bottom: 12px !important; }
section#contact > .wrap > div > div:first-child p { margin-bottom: 20px !important; }
section#contact > .wrap > div > div:first-child > div[style*="flex-direction:column"] { gap: 10px !important; }

/* ===== 9. Form internal — tighten field gaps + loan-type button grid ===== */
.mb-contact-form .wpforms-field-radio ul,
.mb-contact-form .wpforms-field-checkbox ul {
  gap: 8px !important;
}
.mb-contact-form .wpforms-field-radio ul li label,
.mb-contact-form .wpforms-field-checkbox ul li label {
  padding: 9px 12px !important;
  font-size: 12.5px !important;
}
.mb-contact-form .wpforms-field { margin-bottom: 12px !important; }
.mb-contact-form { padding: 18px !important; }

/* ============================================================
   UNIVERSAL SPACING RHYTHM
   Applied site-wide via sibling selectors. Overrides inline margins
   so every section header pattern follows the same beat:
     eyebrow → 16-20px → heading → 24-28px → body → 20-24px → content
   ============================================================ */

/* Step 1: Section padding — UNIFORM 48px top/bottom everywhere */
section,
.mb-sec,
section[id],
section[class*="mb-"] {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
@media (max-width: 720px) {
  section, .mb-sec, section[id], section[class*="mb-"] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* Step 2: Eyebrows — uniform bottom gap to heading */
.eyebrow,
.mb-eyebrow,
section .eyebrow {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

/* Step 3: Section headings — tight top, generous bottom */
section h2,
.mb-sec h2 {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  line-height: 1.05 !important;
}

/* Step 4: Two-line stacked headings (h2 with multiple block spans) — tight between lines */
section h2 span,
section h2 .hl,
.mb-sec h2 span,
.mb-sec h2 .hl {
  margin: 0 !important;
  padding: 0 !important;
}

/* Step 5: Heading → paragraph */
section h2 + p,
.mb-sec h2 + p,
section h2 + .mb-lead,
.mb-sec h2 + .mb-lead {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

/* Step 6: Paragraph → next paragraph (about section has two stacked p's) */
section h2 + p + p,
.mb-sec h2 + p + p {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

/* Step 7: Paragraph → content blocks (bullets, grids, button rows) */
section h2 + p + div,
section h2 + p + ul,
section h2 + p + p + div,
section h2 + .mb-lead + div,
.mb-sec h2 + p + div,
.mb-sec h2 + p + ul {
  margin-top: 0 !important;
}

/* Step 8: Last child of section wrap — no trailing margin */
section > .wrap > *:last-child,
.mb-sec > *:last-child {
  margin-bottom: 0 !important;
}

/* Step 9: Multi-column section grids — start alignment so columns don't stretch */
section > .wrap[style*="display:grid"],
section > .wrap[style*="display: grid"] {
  /* Already set inline; this is a safety net for any I missed */
}

/* ============================================================
   ABOUT SECTION — photo + stats exact alignment
   ============================================================ */
.mb-about-media {
  width: 100%;
  display: block;
}
.mb-about-photo {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.mb-about-stats {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ============================================================
   CASE STUDIES — cards full wrap width
   ============================================================ */
section#cases > .wrap > [data-reveal-group="cases"] {
  width: 100% !important;
  max-width: 100% !important;
}
section#cases > .wrap > [data-reveal-group="cases"] > .card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ============================================================
   CALCULATOR DISCLAIMER — full wrap width
   ============================================================ */
section#calculator p.mono,
section[id*="calculator"] p.mono {
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 32px !important;
}

/* ============================================================
   Disclaimer paragraph (.mb-disclaimer Gutenberg block)
   Plays nicely with WP's "Wide width" alignment: lets the block
   center naturally via auto margins, just caps its max-width so
   it approximately matches the calculator's wrap width above.
   ============================================================ */
p.mb-disclaimer,
.wp-block-paragraph.mb-disclaimer {
  max-width: 1240px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* If the user has "Wide width" alignment applied — same rule wins via specificity */
p.mb-disclaimer.alignwide,
.wp-block-paragraph.mb-disclaimer.alignwide {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   HOW-IT-WORKS step icons (CSS-injected for resilience)
   Targets .mb-step cards in the editable pattern. Works for
   already-inserted pattern blocks since the markup itself
   doesn't need to be updated.
   ============================================================ */

/* Step card container needs to give the icon room at the top */
.mb-step.wp-block-group,
.wp-block-group.mb-step {
  position: relative;
}

/* Icon pill — common styling */
.mb-step::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background-color: white;
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 12px;
  margin-bottom: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  box-shadow: 0 1px 0 rgba(20, 184, 166, 0.06);
}

/* Step 1 — chat icon (Tell us what you need) */
.mb-step:nth-child(1)::before,
.wp-block-columns .mb-step:nth-of-type(1)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
}

/* Step 2 — scale icon (We shop the market for you) */
.mb-step:nth-child(2)::before,
.wp-block-columns .mb-step:nth-of-type(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/><path d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/><path d='M7 21h10'/><path d='M12 3v18'/><path d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/></svg>");
}

/* Step 3 — bolt icon (Get funded, often same day) */
.mb-step:nth-child(3)::before,
.wp-block-columns .mb-step:nth-of-type(3)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>");
}

/* Step number — color teal so it visually connects to the icon */
.mb-step .mb-num {
  color: var(--mint-600, #0891B2) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 16px !important;
  margin-top: 0 !important;
}

/* ============================================================
   GROUP REVEAL — more dramatic transform for large cards
   The default .anim-reveal transform (80px/0.88) is too subtle on
   tall case study cards. Override for [data-reveal-group] children
   so the rise is clearly visible relative to the card's height.
   ============================================================ */
[data-reveal-group] > .anim-reveal,
[data-reveal-group="cases"] > .card.anim-reveal {
  opacity: 0 !important;
  transform: translate3d(0, 200px, 0) scale(0.94) !important;
  transition:
    opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform, opacity;
}

[data-reveal-group] > .anim-reveal.is-in,
[data-reveal-group="cases"] > .card.anim-reveal.is-in {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* ============================================================
   Smooth scroll for in-page anchor links (e.g., Apply for a loan → #contact)
   Offset accounts for the sticky header so the form heading isn't hidden behind it.
   ============================================================ */
html { scroll-behavior: smooth; }
section[id], #contact, #calculator, #products, #cases, #about, #faq {
  scroll-margin-top: 80px; /* header height + a bit of breathing room */
}

/* ============================================================
   About section — align bottom edges of left & right columns
   Left column (heading + paras + value-prop grid) was ending higher
   than right column (photo + stats). Stretch the row, push the
   left column's value-prop grid to the bottom.
   ============================================================ */
section#about > .wrap {
  align-items: stretch !important;
}
section#about > .wrap > div[data-reveal]:first-child {
  display: flex !important;
  flex-direction: column !important;
}
section#about > .wrap > div[data-reveal]:first-child > div:last-child {
  margin-top: auto !important;
}

/* ============================================================
   About stats — no animation, ever
   ============================================================ */
.mb-no-anim,
.mb-no-anim * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* ============================================================
   June 2026 revision round — appended overrides
   ============================================================ */

/* ---- Press "As featured in" bar: keep horizontal marquee scroll, remove the
   wipe-up scroll-reveal entrance so it doesn't slide up on scroll. The marquee
   itself (animation: marquee) is left intact. Targets the press section by its
   stable class plus any marquee container, so it works on both the shortcode
   and the DB-saved pattern render paths. ---- */
.mb-press.anim-reveal,
.mb-press .anim-reveal,
.anim-reveal:has(.marquee) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---- #7 Calculator: "Estimated monthly repayment" label sized to match the button (15px) ---- */
.calc-result .res-label {
  font-size: 15px !important;
}

/* ---- #9 Contact confirmation box: brand mint->sky gradient, override WPForms default green ---- */
.mb-contact-form .wpforms-confirmation-container,
.mb-contact-form .wpforms-confirmation-container-full,
div.wpforms-container .wpforms-confirmation-container-full,
.wpforms-confirmation-container,
.wpforms-confirmation-container-full {
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.14), rgba(56, 189, 248, 0.12)) !important;
  border: 1px solid rgba(94, 234, 212, 0.40) !important;
  border-radius: 14px !important;
  color: var(--ink, #050B15) !important;
  padding: 24px 28px !important;
}
.wpforms-confirmation-container p,
.wpforms-confirmation-container-full p {
  color: var(--ink-2, #334155) !important;
  margin: 0 !important;
}

/* ---- Calculator result: keep the two repayment figures on ONE line ----
   The Chinese page shows wider numbers (e.g. HK$502,400 — HK$560,000) which,
   at the large display size, overflowed and wrapped the second figure onto a
   new line. We force single-line here; the actual font size is auto-fitted by
   JS (fitRange() in moneybuddy-app.js) so English stays large/dramatic and
   only wide values shrink — down to the floor below — to stay on one line. */
.calc-result .res-range-single {
  flex-wrap: nowrap !important;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center !important;
  gap: clamp(8px, 1.2vw, 18px) !important;
  line-height: 1.1 !important;
  overflow: hidden;
  /* Base (max) size; JS reduces toward the floor when content is too wide. */
  font-size: clamp(28px, 12vw, 96px);
}
.calc-result .res-range-val {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.calc-result .res-range-dash {
  flex: 0 0 auto;
  font-size: 0.6em !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  /* The en-dash glyph sits a little below optical centre against the large
     numbers; nudge it up so the bar is vertically centered between them. */
  position: relative !important;
  top: -0.12em !important;
}

/* ---- Hover lift must win even when the card also has .anim-reveal ----
   The top trust boxes carry .anim-reveal.is-in, whose transform
   (translate3d(0,0,0)) and slow 1.5s transition were overriding the hover
   lift, so they didn't visibly react on hover (unlike the lender boxes,
   which have no anim-reveal). These rules make the hover lift + fast
   transition win for any trust/card element regardless of anim-reveal. */
.mb-trust-tile.anim-reveal,
.mb-trust-cell.anim-reveal,
.mb-trust-tile,
.mb-trust-cell,
.mb-lender-card.anim-reveal,
.mb-ministat.anim-reveal,
.mb-step.anim-reveal {
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s ease,
              border-color .25s ease !important;
}
.mb-trust-tile:hover,
.mb-trust-cell:hover,
.mb-trust-tile.anim-reveal.is-in:hover,
.mb-trust-cell.anim-reveal.is-in:hover,
.mb-lender-card.anim-reveal.is-in:hover,
.mb-ministat.anim-reveal.is-in:hover,
.mb-step.anim-reveal.is-in:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(8, 23, 53, .10) !important;
  border-color: var(--brand-3, #38BDF8) !important;
}
body[data-motion="off"] .mb-trust-tile:hover,
body[data-motion="off"] .mb-trust-cell:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ---- Blog post / long-form prose (single.php, page.php) ---- */
.mb-prose { max-width: 720px; }
.mb-prose > * + * { margin-top: 1.1em; }
.mb-prose h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-top: 1.8em; margin-bottom: .2em; }
.mb-prose h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 600; color: var(--ink); margin-top: 1.5em; margin-bottom: .2em; }
.mb-prose h4 { font-size: 18px; font-weight: 600; color: var(--ink); margin-top: 1.3em; }
.mb-prose p { margin: 0 0 0 0; }
.mb-prose a { color: var(--brand-3, #2563eb); text-decoration: underline; text-underline-offset: 2px; }
.mb-prose a:hover { opacity: .8; }
.mb-prose ul, .mb-prose ol { margin: 1em 0; padding-left: 1.4em; }
.mb-prose li { margin: .4em 0; }
.mb-prose ul li { list-style: disc; }
.mb-prose ol li { list-style: decimal; }
.mb-prose blockquote { border-left: 3px solid var(--mint-500, #14b8a6); padding: .2em 0 .2em 1.1em; margin: 1.4em 0; color: var(--ink-2); font-style: italic; }
.mb-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.4em 0; }
.mb-prose strong { color: var(--ink); font-weight: 600; }
.mb-prose code { background: rgba(0,0,0,.05); padding: .12em .4em; border-radius: 5px; font-size: .92em; }
.mb-prose pre { background: #0b1220; color: #e2e8f0; padding: 16px 18px; border-radius: 12px; overflow-x: auto; margin: 1.4em 0; }
.mb-prose pre code { background: none; padding: 0; }
.mb-prose hr { border: none; border-top: 1px solid rgba(0,0,0,.1); margin: 2em 0; }
.mb-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; }
.mb-prose th, .mb-prose td { border: 1px solid rgba(0,0,0,.12); padding: 8px 12px; text-align: left; }
.mb-prose th { background: rgba(0,0,0,.03); font-weight: 600; color: var(--ink); }