.mg-dropin img{width:auto;max-width:100%;display:inline-block}.mg-dropin ul,.mg-dropin ol{list-style:revert}.mg-dropin button{background:revert;border:revert}
/* inter-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-ef572f9187a8.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-5cb2f1cc0936.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-f0bb586459ce.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-6e441a6c9478.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-eadedd9e13c2.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-4f2b6f92ddfe.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-c15ddd00a992.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-bdae9d28729e.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-547ad9fdaeb0.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-54aa42d325bc.woff) format('woff');
  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;
}

/* inter-latin-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-6744a7f509eb.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-22ae8360fbad.woff) format('woff');
  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;
}

/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-8909904ab6c8.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-e20fa0b4fd2d.woff) format('woff');
  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;
}/* inter-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-1c2db92d3cd9.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-e250c05aebcf.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-b77a86ec16aa.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-5be18e034578.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-75a9ec9383a3.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-c85d11bde719.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-cc197d79d33a.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-86d55a4b1b9c.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-44e36aa5a8f1.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-18a4a09f7516.woff) format('woff');
  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;
}

/* inter-latin-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-2c6fbc42d315.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-30d2903ce97f.woff) format('woff');
  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;
}

/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-f3779f1efccc.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-9b42c108da48.woff) format('woff');
  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;
}/* inter-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-509fca9c5956.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-a50732854094.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-6c2a37f82a67.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-cc190ed1b64e.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-399f94d75aa7.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-efc7aa9cce5c.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-9c5a897f9d9f.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-090b24e22fc4.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-1aeb94ae9db0.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-24a01e7bd947.woff) format('woff');
  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;
}

/* inter-latin-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-e4bdf67b0cd1.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-22ff20a61706.woff) format('woff');
  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;
}

/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-f9a06e79cd3a.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-6a9cb3a509b4.woff) format('woff');
  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;
}/* inter-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-a46b99781170.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-0f3d4be2bd70.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-5917871d3cc9.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-72b6daa49173.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-b7b2732ebc98.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-b26ed64c9135.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-737c6c91cd60.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-53368f53d5fc.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-5fafa3829a16.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-412023ab2f41.woff) format('woff');
  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;
}

/* inter-latin-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-143f9504f137.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-1761edba3201.woff) format('woff');
  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;
}

/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-6f56409fd3d6.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-7c5ed5655730.woff) format('woff');
  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;
}/* ibm-plex-mono-cyrillic-ext-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-f8c22ec1804b.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-0e4a2393e8ed.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ibm-plex-mono-cyrillic-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-7635422bd10d.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-42da81a28bbc.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* ibm-plex-mono-vietnamese-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-62632b637530.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-bced561d991e.woff) format('woff');
  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;
}

/* ibm-plex-mono-latin-ext-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-6bc0f226a5b7.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-f8ddaa0ab9d3.woff) format('woff');
  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;
}

/* ibm-plex-mono-latin-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-08949f728dc5.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-328d50b6ece9.woff) format('woff');
  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;
}/* ibm-plex-mono-cyrillic-ext-500-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-3febe5c7f22e.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-eadb2c427859.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ibm-plex-mono-cyrillic-500-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-1d89462e86cb.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-55a3af5e5ba0.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* ibm-plex-mono-vietnamese-500-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-781633d95de8.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-755f62b418df.woff) format('woff');
  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;
}

/* ibm-plex-mono-latin-ext-500-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-6bb06407c975.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-ff5da89c3ee2.woff) format('woff');
  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;
}

/* ibm-plex-mono-latin-500-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-01d285447409.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-09f018c58556.woff) format('woff');
  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;
}/* ibm-plex-mono-cyrillic-ext-600-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-83109cdd4f86.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-d17413b646f9.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ibm-plex-mono-cyrillic-600-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-2b05a8695c7f.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-877b7b3177c2.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* ibm-plex-mono-vietnamese-600-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-51b74d53e106.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-e4c71658a1ee.woff) format('woff');
  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;
}

/* ibm-plex-mono-latin-ext-600-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-32057cf50dd1.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-46249f4bc59b.woff) format('woff');
  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;
}

/* ibm-plex-mono-latin-600-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-0d1f0b8d0722.woff2) format('woff2'), url(/wp-content/themes/mg_wp_23/templates-dropin/storefront/assets/embedded-cb96282f22c6.woff) format('woff');
  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;
}/* ===============================================================
   MINDGRUB · THE CAPABILITY STOREFRONT
   Design tokens — restyle the whole prototype from right here.
   Constraints honored: 1440 desktop canvas · no type < 16px · WCAG AA

   THEMING
   Dark is the base theme and lives in `:root` below. Light overrides
   only the themed tokens, in two places that must stay in sync:
     1. @media (prefers-color-scheme: light) — follows the OS setting
     2. :root[data-theme="light"]            — explicit user override
   `:root[data-theme="dark"]` re-asserts dark so the toggle wins in
   both directions. Only color-ish tokens are themed; type, spacing,
   radius, motion, and layout are shared and defined once.

   `.on-dark` reuses this same block, so any section that stays dark in
   both themes (a photo band, an inverted panel) can opt back into the
   dark palette by adding the class — no duplicated color values.
   =============================================================== */
.mg-dropin,.mg-dropin 
.on-dark {
  /* --- Surfaces (warm near-black) --- */
  --bg: #0b0b0f;
  --bg-deep: #07070a;
  --surface: #15151c;
  --surface-2: #1c1c25;
  --surface-3: #24242f;

  /* --- Borders / hairlines --- */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* --- Text (AA on --bg) --- */
  --text: #f6f5f8;        /* headings / high-emphasis */
  --text-body: #cdccd6;   /* body copy */
  --text-muted: #a2a1b0;  /* secondary / captions (>=4.5:1 on --bg) */

  /* --- Primary brand accent (matches logo gradient #F47114 → #D6000E) --- */
  --accent: #f47114; /* brand orange — 6.6:1 on --bg, AA for accent text */
  --accent-hover: #ffa566; /* lighter on dark = "brighter on hover" */
  --accent-2: #d6000e; /* brand deep red — decorative / white-text surfaces */
  --accent-rgb: 244, 113, 20; /* for rgba() glows — stays vivid in both themes */
  /* Exact logo gradient — hero headline, glows, decorative fills */
  --accent-grad: linear-gradient(105deg, #f47114 0%, #d6000e 100%);
  /* Deepened brand gradient for interactive controls — white labels hit AA
     (white ≥ 4.5:1 across the whole range; the exact gradient can't do this).
     Shared by both themes: buttons stay dark so their labels stay white. */
  --accent-grad-btn: linear-gradient(105deg, #c5520a 0%, #a8000b 100%);

  /* --- Category accents (each practice radiates its own color) --- */
  --c-ai: #ff7a3c;
  --c-build: #4f9dff;
  --c-design: #ff5d8f;
  --c-engineering: #2dd4bf;
  --c-strategy: #b88dff;
  --c-growth: #54e08a;
  /* Category hues are mixed toward this to become legible label text —
     toward white on dark, toward black on light. Flipping this one token
     is what keeps every tinted chip AA in both themes. */
  --tint-ink: white;
  /* How solid a selected filter chip's fill is (see Storefront.svelte) */
  --chip-active-fill: 30%;

  /* --- Ambient atmosphere (body::before glows + body::after grain) --- */
  --atmos:
    radial-gradient(680px 460px at 78% -4%, rgba(var(--accent-rgb), 0.2), transparent 60%),
    radial-gradient(620px 520px at 8% 8%, rgba(184, 141, 255, 0.14), transparent 60%),
    radial-gradient(900px 700px at 100% 60%, rgba(45, 212, 191, 0.08), transparent 60%);
  --grain-opacity: 0.035;
  /* peach, light-on-dark */
  --dot-color: rgba(255, 219, 194, 0.55);
  /* Cursor-following spotlight wash (.spotlight-surface) */
  --spot-grad: radial-gradient(
    1100px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), 0.18),
    rgba(184, 141, 255, 0.1) 32%,
    transparent 68%
  );

  /* --- Themed elevation --- */
  --shadow-card: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 0 1px var(--border), 0 24px 60px -28px rgba(0, 0, 0, 0.9);
  /* small lift for chips/thumbnails that sit on a surface */
  --shadow-chip: 0 4px 16px -4px rgba(0, 0, 0, 0.5);
  /* inset top highlight — catches "light from above" on raised panels */
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* even ambient glow for CTAs (no directional drop shadow) */
  --glow-btn: 0 0 26px -4px rgba(var(--accent-rgb), 0.5);
  --glow-btn-hover: 0 0 36px -2px rgba(var(--accent-rgb), 0.65);

  color-scheme: dark;
}

/* --------------------------- light theme --------------------------- */
/* Light can't mirror dark by simply darkening each surface — stacked greys
   go muddy. Instead cards stay white and separate with shadow + hairline,
   and the neon accents deepen to hold AA on a near-white background. */
@media (prefers-color-scheme: light) {
  .mg-dropin:not([data-theme="dark"]) {
    --bg: #f7f6f9;
    --bg-deep: #eceaf1;
    --surface: #ffffff;
    --surface-2: #f2f1f6;
    --surface-3: #e9e8ef;

    --border: rgba(16, 16, 28, 0.1);
    --border-strong: rgba(16, 16, 28, 0.2);

    --text: #14141c;       /* ~16:1 on --bg */
    --text-body: #3d3d4a;  /* ~9.9:1 */
    --text-muted: #5f5f70; /* ~5.8:1 — still AA at body size */

    /* Brand orange is only ~2.9:1 on near-white, so accent *text* deepens
       to a burnt orange (~5.1:1). Decorative glows keep --accent-rgb. */
    --accent: var(--ink-accent);
    --accent-hover: #8a3906; /* darker on light = "stronger on hover" */
    --accent-2: #d6000e; /* ~5.1:1 on --bg — brand red passes as-is */
    /* Display gradient deepened to clear 3:1 for large text */
    --accent-grad: linear-gradient(105deg, #d2600f 0%, #b00009 100%);

    --c-ai: var(--ink-ai);
    --c-build: var(--ink-build);
    --c-design: var(--ink-design);
    --c-engineering: var(--ink-engineering);
    --c-strategy: var(--ink-strategy);
    --c-growth: var(--ink-growth);
    --tint-ink: black;
    --chip-active-fill: 100%;

    --atmos:
      radial-gradient(680px 460px at 78% -4%, rgba(var(--accent-rgb), 0.1), transparent 62%),
      radial-gradient(620px 520px at 8% 8%, rgba(109, 40, 217, 0.07), transparent 62%),
      radial-gradient(900px 700px at 100% 60%, rgba(15, 118, 110, 0.05), transparent 62%);
    --grain-opacity: 0.02;
    /* peach vanishes on near-white — low-alpha brand orange reads the way
       the live site's dots do on its white background */
    --dot-color: rgba(244, 113, 20, 0.45);
    --spot-grad: radial-gradient(
      1100px circle at var(--mx, 50%) var(--my, 50%),
      rgba(var(--accent-rgb), 0.09),
      rgba(109, 40, 217, 0.05) 32%,
      transparent 68%
    );

    /* Depth comes from shadow, not from lighter surfaces */
    --shadow-card:
      0 12px 28px -18px rgba(20, 20, 45, 0.28),
      0 2px 6px -2px rgba(20, 20, 45, 0.08);
    --shadow-glow:
      0 0 0 1px var(--border),
      0 20px 44px -26px rgba(20, 20, 45, 0.35);
    --shadow-chip: 0 4px 14px -6px rgba(20, 20, 45, 0.25);
    --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    /* Ambient neon reads as a smudge on white — tighten to a soft lift */
    --glow-btn: 0 6px 16px -6px rgba(var(--accent-rgb), 0.45);
    --glow-btn-hover: 0 10px 22px -6px rgba(var(--accent-rgb), 0.6);

    color-scheme: light;
  }
}

/* Explicit user override — must mirror the media query block above. */
.mg-dropin[data-theme="light"] {
  --bg: #f7f6f9;
  --bg-deep: #eceaf1;
  --surface: #ffffff;
  --surface-2: #f2f1f6;
  --surface-3: #e9e8ef;

  --border: rgba(16, 16, 28, 0.1);
  --border-strong: rgba(16, 16, 28, 0.2);

  --text: #14141c;
  --text-body: #3d3d4a;
  --text-muted: #5f5f70;

  --accent: var(--ink-accent);
  --accent-hover: #8a3906;
  --accent-2: #d6000e;
  --accent-grad: linear-gradient(105deg, #d2600f 0%, #b00009 100%);

  --c-ai: var(--ink-ai);
  --c-build: var(--ink-build);
  --c-design: var(--ink-design);
  --c-engineering: var(--ink-engineering);
  --c-strategy: var(--ink-strategy);
  --c-growth: var(--ink-growth);
  --tint-ink: black;
  --chip-active-fill: 100%;

  --atmos:
    radial-gradient(680px 460px at 78% -4%, rgba(var(--accent-rgb), 0.1), transparent 62%),
    radial-gradient(620px 520px at 8% 8%, rgba(109, 40, 217, 0.07), transparent 62%),
    radial-gradient(900px 700px at 100% 60%, rgba(15, 118, 110, 0.05), transparent 62%);
  --grain-opacity: 0.02;
  --dot-color: rgba(244, 113, 20, 0.45);
  --spot-grad: radial-gradient(
    1100px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), 0.09),
    rgba(109, 40, 217, 0.05) 32%,
    transparent 68%
  );

  --shadow-card:
    0 12px 28px -18px rgba(20, 20, 45, 0.28),
    0 2px 6px -2px rgba(20, 20, 45, 0.08);
  --shadow-glow:
    0 0 0 1px var(--border),
    0 20px 44px -26px rgba(20, 20, 45, 0.35);
  --shadow-chip: 0 4px 14px -6px rgba(20, 20, 45, 0.25);
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glow-btn: 0 6px 16px -6px rgba(var(--accent-rgb), 0.45);
  --glow-btn-hover: 0 10px 22px -6px rgba(var(--accent-rgb), 0.6);

  color-scheme: light;
}

/* Shared (non-themed) tokens */
.mg-dropin {
  /* --- Category ink ---------------------------------------------------
     Deep category colors that clear the 3:1 graphics minimum on white.
     Needed because the light-on-dark palette above is too bright for a
     white surface (#ff7a3c is only 2.6:1). Shared, not themed: the white
     icon disc looks the same in both themes, so its ink must too. The
     light theme reuses these as its category palette. */
  --ink-ai: #c2410c;
  --ink-build: #1d4ed8;
  --ink-design: #be185d;
  --ink-engineering: #0f766e;
  --ink-strategy: #6d28d9;
  --ink-growth: #15803d;
  --ink-accent: #b04a08;

  /* --- Storefront filter categories (aliased onto the palette above) --- */
  --c-training: var(--c-ai);
  --c-development: var(--c-build);
  --c-cloud: var(--c-engineering);
  --c-scale: var(--c-growth);
  --c-support: var(--c-design);
  /* Matching ink aliases — offerings carry these category names, so without
     them every offering disc falls back to --ink-accent. Keep in step with
     the --c-* aliases above. (strategy needs none: it's in both sets.) */
  --ink-training: var(--ink-ai);
  --ink-development: var(--ink-build);
  --ink-cloud: var(--ink-engineering);
  --ink-scale: var(--ink-growth);
  --ink-support: var(--ink-design);

  /* --- Named brand gradients ----------------------------------------
     Ported from the WP theme's base/_gradients.scss so sections can vary
     instead of all reaching for --accent-grad. Fixed brand values, not
     themed. --grad-brand is the same pair as --accent-grad. */
  --grad-brand: linear-gradient(45deg, #f47114, #d6000e);
  --grad-orchid: linear-gradient(45deg, #f6f2ff, #d8c7ff);
  --grad-champagne: linear-gradient(120deg, #fff 0%, #ffd088 100%);
  --grad-purple: linear-gradient(90deg, #4b2e83 0%, #af92f8 100%);

  /* --- Perforated dot texture ---------------------------------------
     The WP theme's hero/mega-menu motif is a field of peach dots. The
     source is a 775KB SVG of 149 paths, so this reproduces it with two
     offset dot grids instead — same motif, no payload. Apply with the
     .dot-field utility. --dot-color is themed (see below); the grid
     geometry is shared. */
  --dot-size: 15px;

  /* --- Typography --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — body/content stays >= 16px; only the uppercase
     mono micro-labels (eyebrows, tags, pills, badges) go smaller. */
  --fs-label: 14px;     /* section eyebrows, stat labels, footer headings */
  --fs-label-xs: 12px;  /* tiny chip labels: pills, tags, badges */
  --fs-body-sm: 16px;
  --fs-body: 18px;
  --fs-lead: 20px;
  --fs-h3: 22px;
  --fs-h2: clamp(28px, 3.2vw, 40px);
  --fs-display: clamp(44px, 6vw, 78px);

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* --- Radius / shadow --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;

  /* --- Layout --- */
  --page-max: 1440px;
  --content-max: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
}

/* Toggling back to dark must beat the prefers-color-scheme: light block. */
.mg-dropin[data-theme="dark"] {
  color-scheme: dark;
}

/* An always-dark island. The tokens come from the `:root, .on-dark` block
   above; this just re-anchors the inherited text color, which isn't a token.
   Custom properties set here win inside the subtree no matter what the
   theme set on :root — specificity only competes on the same element. */
.mg-dropin .on-dark {
  color: var(--text-body);
}

/* --------------------------- reset --------------------------- */
.mg-dropin *,.mg-dropin 
*::before,.mg-dropin 
*::after {
  box-sizing: border-box;
  margin: 0;
}

.mg-dropin {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

.mg-dropin {
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-body);
  background: var(--bg);
  position: relative;
  /* `clip` prevents horizontal overflow WITHOUT making <body> a scroll
     container — `hidden` computes overflow-y to `auto`, which breaks the
     sticky header's backdrop-filter blur (no backdrop to sample). */
  overflow-x: clip;
}

/* Ambient neon atmosphere — layered radial glows behind everything */
.mg-dropin::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--atmos);
  pointer-events: none;
}

/* Fine grain overlay for texture/depth */
.mg-dropin::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: var(--grain-opacity);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------- type --------------------------- */
/* Everything is set in the brand font, Inter. */
.mg-dropin h1,.mg-dropin 
h2,.mg-dropin 
h3,.mg-dropin 
h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.mg-dropin p {
  text-wrap: pretty;
}

.mg-dropin a {
  color: inherit;
  text-decoration: none;
}

.mg-dropin button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}

/* Mono technical label — used for eyebrows, pills, stats */
.mg-dropin .mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --------------------------- layout --------------------------- */
.mg-dropin .container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------- a11y --------------------------- */
.mg-dropin :focus-visible {
  outline: 2px solid var(--c-build);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scroll-reveal (driven by the `reveal` action in src/lib/reveal.js) */
.mg-dropin .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.mg-dropin .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mg-dropin .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Cursor-following glow (driven by the `spotlight` action in src/lib/spotlight.js).
   The ::before is absolutely positioned so it never participates in grid layout. */
.mg-dropin .spotlight-surface {
  position: relative;
  overflow: hidden;
}
.mg-dropin .spotlight-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--spot-grad);
  opacity: var(--spot, 0);
  transition: opacity 0.45s var(--ease-out);
}
.mg-dropin .spotlight-surface > * {
  position: relative;
  z-index: 1;
}

/* --------------------------- button bloom ---------------------------
   The WP theme's primary CTA hover (mg-button--style-6 + --scale). Note it
   carries --no-circle: the circle-sweep on the theme's other button styles
   is deliberately NOT used here. What it does instead is much quieter — a
   second gradient crossfades in over 125ms while that same overlay scales to
   1.04 over 0.3s, so the fill shifts and blooms just past the button edge.

   `overflow: visible` lets the bloom spill (the original does this too), and
   `isolation` makes the button a stacking context so the z-index:-1 overlay
   paints above its background but below its label.

   The overlay reuses --accent-grad-btn with the angle reversed rather than
   brightening toward the raw brand gradient: white labels have to stay AA,
   and #f47114 is only 2.9:1 against white. */
.mg-dropin .btn-bloom {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.mg-dropin .btn-bloom::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--bloom-fill, linear-gradient(285deg, #c5520a 0%, #a8000b 100%));
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 125ms ease-out,
    transform 0.3s ease-out;
  will-change: transform;
}
.mg-dropin .btn-bloom:hover::before,.mg-dropin 
.btn-bloom:focus-visible::before {
  opacity: 1;
  transform: scale(1.04);
}

/* --------------------------- dot field ---------------------------
   Peach perforated texture, ported from the WP theme's hero + mega-menu.
   Two dot grids at different scales and offsets so it doesn't read as a
   plain regular lattice like a single grid would. Decorative only —
   always pair with a positioned, aria-hidden element. */
.mg-dropin .dot-field {
  background-image:
    radial-gradient(circle, var(--dot-color) 1.1px, transparent 1.6px),
    radial-gradient(circle, var(--dot-color) 0.8px, transparent 1.3px);
  background-size:
    var(--dot-size) var(--dot-size),
    calc(var(--dot-size) * 1.8) calc(var(--dot-size) * 1.8);
  background-position:
    0 0,
    calc(var(--dot-size) * 0.55) calc(var(--dot-size) * 0.35);
  pointer-events: none;
}

/* --------------------------- icon disc ---------------------------
   Shared holding shape for card icons: a solid white circle with the icon
   in its deep category ink. Used by OfferingCard, FeaturedForYou,
   BrowseByGoal, LearnRow, and DifferenceBand — one definition so the shape
   can be retuned in a single place.

   Set --c-ink on an ancestor (next to --c) to color the glyph.

   No ring and no shadow: the disc always contrasts strongly with its card
   now (white on dark, category ink on light), so both were decoration that
   only drew attention to the edge.

   --disc-glyph-stroke optically compensates for irradiation: a dark glyph
   on a white disc reads thinner than the same glyph reversed out white, so
   the dark-on-white case gets emboldened and the white-on-color case
   doesn't. Value is in SVG user units against the icons' 0 0 48 48 viewBox,
   so the added weight scales with the rendered size. */
.mg-dropin .icon-disc {
  --disc-glyph-stroke: 1.1;
  display: grid;
  place-items: center;
  width: var(--disc-size, 48px);
  height: var(--disc-size, 48px);
  border-radius: 999px;
  background: #fff;
  color: var(--c-ink, var(--ink-accent));
}

/* The brand icons are filled paths shaped like strokes (fill="currentColor"),
   not stroked outlines, so there's no stroke-width to raise — adding a
   same-color stroke grows the filled shape outward instead. Round joins keep
   sharp corners from spiking. */
.mg-dropin .icon-disc svg [fill="currentColor"] {
  stroke: currentColor;
  stroke-width: var(--disc-glyph-stroke);
  stroke-linejoin: round;
}

/* The disc has to contrast with the CARD, not the theme. On a light theme's
   white card a white disc disappears, so the fill and glyph swap: the disc
   becomes the category ink and the glyph goes white. Same idea either way —
   a solid disc holding the icon — and it keeps the same punch in both themes. */
/* The theme selectors are wrapped in :where() so they add no specificity —
   otherwise :root[data-theme="light"] .icon-disc (0,3,0) would outrank the
   .on-dark override below (0,2,0) and win by accident rather than intent. */
@media (prefers-color-scheme: light) {
  :where(.mg-dropin:not([data-theme="dark"])) .icon-disc {
    background: var(--c-ink, var(--ink-accent));
    color: #fff;
    --disc-glyph-stroke: 0; /* reversed out — already reads bold */
  }
}
:where(.mg-dropin[data-theme="light"]) .icon-disc {
  background: var(--c-ink, var(--ink-accent));
  color: #fff;
  --disc-glyph-stroke: 0;
}

/* ...except inside an always-dark island, where the card is dark in both
   themes, so the disc stays white and the glyph needs the weight back. */
.mg-dropin .on-dark .icon-disc {
  background: #fff;
  color: var(--c-ink, var(--ink-accent));
  --disc-glyph-stroke: 1.1;
}

.mg-dropin .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mg-dropin .skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--accent-2);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.mg-dropin .skip-link:focus {
  top: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  .mg-dropin {
    scroll-behavior: auto;
  }
  .mg-dropin *,.mg-dropin 
  *::before,.mg-dropin 
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

  .mg-dropin .long-arrow.svelte-9bdpla {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    /* room for the bar, the head, and the hover extension */
    width: calc(var(--bar) + 8px);
    height: 8px;
    /* the extension spills right rather than reflowing the line */
    overflow: visible;
    vertical-align: middle;
  }

  /* bar */
  .mg-dropin .long-arrow.svelte-9bdpla::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: var(--weight);
    width: var(--bar);
    background: currentColor;
    transform: translateY(-50%);
    transition: width 0.125s ease-out;
  }

  /* Solid triangle head, butted against the bar. The 1px overlap hides the
     seam that antialiasing leaves between two separately-rasterized shapes. */
  .mg-dropin .long-arrow.svelte-9bdpla::after {
    content: "";
    position: absolute;
    left: calc(var(--bar) - 1px);
    top: 50%;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid currentColor;
    transform: translateY(-50%);
    transition: transform 0.125s ease-out;
  }

  .mg-dropin .has-long-arrow:hover .long-arrow.svelte-9bdpla::before,.mg-dropin 
  .has-long-arrow:focus-visible .long-arrow.svelte-9bdpla::before {
    width: calc(var(--bar) + 6px);
  }
  /* head travels with the bar so the two stay joined */
  .mg-dropin .has-long-arrow:hover .long-arrow.svelte-9bdpla::after,.mg-dropin 
  .has-long-arrow:focus-visible .long-arrow.svelte-9bdpla::after {
    transform: translateY(-50%) translateX(6px);
  }

  @media (prefers-reduced-motion: reduce) {
    .mg-dropin .long-arrow.svelte-9bdpla::before,.mg-dropin 
    .long-arrow.svelte-9bdpla::after {
      transition: none;
    }
  }

  .mg-dropin .promo.svelte-117l6rv {
    background:
      linear-gradient(
        90deg,
        rgba(var(--accent-rgb), 0.14),
        rgba(184, 141, 255, 0.12)
      ),
      var(--bg-deep);
    border-bottom: 1px solid var(--border);
  }
  .mg-dropin .inner.svelte-117l6rv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 50px;
  }
  .mg-dropin .msg.svelte-117l6rv {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--fs-body-sm);
    color: var(--text-body);
  }
  .mg-dropin .tag.svelte-117l6rv {
    padding: 3px 9px;
    border-radius: 999px;
    color: #fff;
    background: var(--accent-grad-btn);
  }
  .mg-dropin .link.svelte-117l6rv {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .link.svelte-117l6rv svg {
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .link.svelte-117l6rv:hover {
    color: var(--accent-hover);
  }
  .mg-dropin .link.svelte-117l6rv:hover svg {
    transform: translateX(3px);
  }

  /* On narrow screens, drop the long copy and the secondary link */
  @media (max-width: 720px) {
    .mg-dropin .copy.svelte-117l6rv,.mg-dropin 
    .aux.svelte-117l6rv {
      display: none;
    }
    .mg-dropin .inner.svelte-117l6rv {
      justify-content: center;
    }
  }

  .mg-dropin .mg-icon.svelte-1m6etm {
    display: inline-grid;
    place-items: center;
    width: var(--mg-size);
    height: var(--mg-size);
    line-height: 0;
    flex-shrink: 0;
  }
  .mg-dropin .mg-icon.svelte-1m6etm svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* The live panel is #231F20 — a warm neutral that reads as foreign next to
     this palette's violet-tinted surfaces. --surface-3 is within a hair of the
     same lightness but in the right hue family, and because .on-dark re-asserts
     the dark palette it stays dark in the light theme too. Kept slightly
     translucent over a blur to match the header's treatment. */
  .mg-dropin .panel.svelte-1rqi3hn {
    --panel-bg: color-mix(in oklab, var(--surface-3) 92%, transparent);
    --panel-ink: var(--text);
    --panel-ink-hover: #d4c2ff; /* $mg-brand-lighter-purple, matches the icons */
  }

  .mg-dropin .dd.svelte-1rqi3hn {
    position: relative;
  }

  .mg-dropin .trigger.svelte-1rqi3hn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: var(--fs-body-sm);
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: 0;
    padding: 8px 0;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .trigger.svelte-1rqi3hn:hover,.mg-dropin 
  .trigger.open.svelte-1rqi3hn {
    color: var(--text);
  }
  .mg-dropin .chev.svelte-1rqi3hn {
    display: inline-flex;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .chev.open.svelte-1rqi3hn {
    transform: rotate(180deg);
  }

  /* Panel sits 40px below the bar. The live menu pops with no transition and
     closes on leaving the header bar, so the gap needs no hover bridge. */
  .mg-dropin .panel.svelte-1rqi3hn {
    position: absolute;
    top: calc(100% + 40px);
    left: 0;
    z-index: 60;
    min-width: 660px;
    max-width: 1200px;
    background: var(--panel-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* No hairline border: it would draw a seam across the caret's base, and
       the panel already separates cleanly from the page in both themes. */
    border-radius: 24px;
    /* Live geometry (20/40/65), retinted from the site's warm brown to this
       palette's near-black so it doesn't warm the violet panel's edges. */
    box-shadow: 20px 40px 65px 0 rgba(7, 7, 10, 0.6);
    color: var(--panel-ink);
    /* display, not visibility — a hidden panel must leave the layout entirely
       or it widens the document. The live menu pops with no transition, so
       there's nothing to animate away. `position()` still measures correctly:
       Svelte runs the $effect after `.open` is in the DOM. */
    display: none;
  }
  .mg-dropin .panel.open.svelte-1rqi3hn {
    display: block;
    /* Entrance only — no exit. On a hover menu, animating the close makes
       moving the pointer away feel sticky. A keyframe (not a transition) is
       what works here: the panel goes display:none → block, and discrete
       properties can't be transitioned without @starting-style.
       The global prefers-reduced-motion block in app.css already neutralizes
       this, so there's no local media query. */
    animation: svelte-1rqi3hn-nav-panel-in var(--dur-fast) var(--ease-out) both;
  }
  @keyframes svelte-1rqi3hn-nav-panel-in {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Caret pointing at the trigger; --caret-left is set by position(). */
  .mg-dropin .panel.svelte-1rqi3hn::before {
    content: "";
    position: absolute;
    top: -11px;
    left: var(--caret-left, 50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid var(--panel-bg);
  }

  .mg-dropin .inner.svelte-1rqi3hn {
    position: relative;
    padding: 32px 48px;
    overflow: hidden;
    border-radius: inherit;
  }
  .mg-dropin .panel-dots.svelte-1rqi3hn {
    position: absolute;
    inset: 0;
    z-index: 0;
    -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000 0%, transparent 68%);
    mask-image: radial-gradient(90% 120% at 100% 0%, #000 0%, transparent 68%);
    opacity: 0.35;
  }
  .mg-dropin .head.svelte-1rqi3hn,.mg-dropin 
  .cards.svelte-1rqi3hn {
    position: relative;
    z-index: 1;
  }

  .mg-dropin .head.svelte-1rqi3hn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
  }
  .mg-dropin .head-title.svelte-1rqi3hn {
    font-size: var(--fs-h3); /* 22px */
    font-weight: 600;
    line-height: 1.4545;
    letter-spacing: -0.44px;
    color: var(--panel-ink);
  }
  .mg-dropin .view-all.svelte-1rqi3hn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--panel-ink);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .view-all.svelte-1rqi3hn span:where(.svelte-1rqi3hn) {
    text-decoration: underline;
    text-underline-offset: 1px;
  }
  .mg-dropin .view-all.svelte-1rqi3hn:hover {
    color: var(--panel-ink-hover);
  }

  /* Two-column icon list. 48px below the head, 10px between cards. */
  .mg-dropin .cards.svelte-1rqi3hn {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .mg-dropin .card.svelte-1rqi3hn {
    flex: 1 1 calc(50% - 10px);
    width: calc(50% - 10px);
  }
  .mg-dropin .card.svelte-1rqi3hn a:where(.svelte-1rqi3hn) {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--panel-ink);
  }
  .mg-dropin .card-text.svelte-1rqi3hn {
    display: flex;
    flex-direction: column;
  }
  .mg-dropin .card-eyebrow.svelte-1rqi3hn {
    font-family: var(--font-mono);
    font-size: var(--fs-label-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--panel-ink-hover);
  }
  .mg-dropin .card-title.svelte-1rqi3hn {
    font-size: var(--fs-body-sm);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.28px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: 1px;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .card.svelte-1rqi3hn a:where(.svelte-1rqi3hn):hover .card-title:where(.svelte-1rqi3hn),.mg-dropin 
  .card.svelte-1rqi3hn a:where(.svelte-1rqi3hn):focus-visible .card-title:where(.svelte-1rqi3hn) {
    color: var(--panel-ink-hover);
  }

  /* Brand icons are fill="currentColor" line art. Repaint just those parts
     with the site's orchid gradient (the live menu uses an icon font with
     background-clip:text, which inline SVG can't do). */
  .mg-dropin .card-icon.svelte-1rqi3hn {
    display: inline-flex;
    flex-shrink: 0;
  }
  .mg-dropin .card-icon.svelte-1rqi3hn svg [fill="currentColor"] {
    fill: url(#mgNavIconGradient);
  }

  @media (max-width: 1100px) {
    .mg-dropin .panel.svelte-1rqi3hn {
      min-width: 520px;
    }
  }

  .mg-dropin .theme-toggle.svelte-lu0t34 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-body);
    transition:
      background var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .theme-toggle.svelte-lu0t34:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text);
  }

  .mg-dropin .site-header.svelte-zne36e {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--bg) 78%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }

  /* If the browser doesn't support backdrop-filter at all (older browsers),
     fall back to a fully opaque bar so the header stays legible instead of
     going see-through. Note: this can't catch the case where the property is
     supported but silently no-ops (e.g. hardware acceleration disabled). */
  @supports not (backdrop-filter: blur(1px)) {
    .mg-dropin .site-header.svelte-zne36e {
      background: var(--bg);
    }
  }

  .mg-dropin .bar.svelte-zne36e {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    height: 115px; /* matches mindgrub.com's main nav bar */
  }

  .mg-dropin .brand.svelte-zne36e {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .mg-dropin .brand-logo.svelte-zne36e {
    height: 51px; /* matches the live mindgrub.com logo scale */
    width: auto;
    display: block;
  }

  .mg-dropin .nav.svelte-zne36e {
    display: flex;
    gap: var(--space-5);
    margin-inline: auto;
  }

  .mg-dropin .actions.svelte-zne36e {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
  }

  .mg-dropin .cta.svelte-zne36e {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: #fff;
    background: var(--accent-grad-btn);
    box-shadow: var(--glow-btn);
    transition:
      transform var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .cta.svelte-zne36e:hover {
    transform: translateY(-1px);
    box-shadow: var(--glow-btn-hover);
  }

  /* Below the desktop canvas, fold the secondary nav away */
  @media (max-width: 960px) {
    .mg-dropin .nav.svelte-zne36e {
      display: none;
    }
  }
  @media (max-width: 560px) {
    .mg-dropin .actions.svelte-zne36e .cta:where(.svelte-zne36e) {
      display: none;
    }
  }

  .mg-dropin .cluster.svelte-16dd6jx {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    isolation: isolate;
  }

  .mg-dropin .halo.svelte-16dd6jx {
    position: absolute;
    inset: 8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(var(--accent-rgb), 0.35),
      rgba(184, 141, 255, 0.12) 45%,
      transparent 70%
    );
    filter: blur(18px);
  }

  .mg-dropin .stage.svelte-16dd6jx {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
    width: 74%;
    aspect-ratio: 1 / 1;
    transform: rotateX(54deg) rotateZ(45deg);
    transform-style: preserve-3d;
    animation: svelte-16dd6jx-float 9s var(--ease-out) infinite;
  }

  .mg-dropin .tile.svelte-16dd6jx {
    border-radius: 7px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--edge-highlight);
  }

  .mg-dropin .tile.lit.svelte-16dd6jx {
    background: color-mix(in oklab, var(--c) 28%, var(--surface-2));
    border-color: color-mix(in oklab, var(--c) 60%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--c) 50%, transparent),
      0 8px 26px -4px var(--c),
      0 18px 40px -8px var(--c);
    animation: svelte-16dd6jx-pulse 3.4s var(--ease-out) infinite;
    animation-delay: var(--d);
  }

  @keyframes svelte-16dd6jx-float {
    0%,
    100% {
      transform: rotateX(54deg) rotateZ(45deg) translateZ(0);
    }
    50% {
      transform: rotateX(54deg) rotateZ(45deg) translateZ(22px);
    }
  }

  @keyframes svelte-16dd6jx-pulse {
    0%,
    100% {
      filter: brightness(1);
      opacity: 0.92;
    }
    50% {
      filter: brightness(1.35);
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mg-dropin .stage.svelte-16dd6jx,.mg-dropin 
    .tile.lit.svelte-16dd6jx {
      animation: none;
    }
  }

  @media (max-width: 960px) {
    .mg-dropin .cluster.svelte-16dd6jx {
      max-width: 420px;
      margin-inline: auto;
    }
  }

  .mg-dropin .viewport.svelte-1eh3jns {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  /* soft brand halo — several offset elliptical gradients (so it isn't a
     clean circle) blurred together into an organic, diffuse glow. Oversized
     + overflow-visible so it bleeds past the canvas instead of clipping. */
  .mg-dropin .viewport.svelte-1eh3jns::before {
    content: "";
    position: absolute;
    inset: -45%;
    background:
      radial-gradient(58% 52% at 48% 42%, rgba(var(--accent-rgb), 0.22), transparent 78%),
      radial-gradient(52% 58% at 61% 62%, rgba(214, 0, 14, 0.13), transparent 76%),
      radial-gradient(56% 48% at 38% 64%, rgba(184, 141, 255, 0.11), transparent 78%);
    filter: blur(44px);
    pointer-events: none;
  }

  @media (max-width: 960px) {
    .mg-dropin .viewport.svelte-1eh3jns {
      max-width: 460px;
      margin-inline: auto;
    }
  }

  .mg-dropin .hero.svelte-qzo0r3 {
    position: relative;
    padding-block: clamp(48px, 8vw, 104px) var(--space-8);
  }
  /* Faded from the top-left so the texture reads at the edge and clears the
     copy — the WP hero does the same, letting it die out behind the headline. */
  .mg-dropin .dots.svelte-qzo0r3 {
    position: absolute;
    inset: 0;
    z-index: 0;
    -webkit-mask-image: radial-gradient(120% 100% at 0% 0%, #000 0%, transparent 62%);
    mask-image: radial-gradient(120% 100% at 0% 0%, #000 0%, transparent 62%);
    opacity: 0.5;
  }
  .mg-dropin .grid.svelte-qzo0r3 {
    position: relative;
    z-index: 1;
  }

  .mg-dropin .grid.svelte-qzo0r3 {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-6);
  }

  /* fixed logo size, anchored right; the text column (1fr) takes the rest */
  .mg-dropin .visual.svelte-qzo0r3 {
    width: clamp(380px, 48vw, 640px);
    justify-self: end;
  }

  .mg-dropin .eyebrow.svelte-qzo0r3 {
    color: var(--accent);
    margin-bottom: var(--space-5);
  }

  .mg-dropin h1.svelte-qzo0r3 {
    font-family: var(--font-sans); /* Inter */
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
  }
  .mg-dropin .grad.svelte-qzo0r3 {
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .mg-dropin .lead.svelte-qzo0r3 {
    margin-top: var(--space-5);
    max-width: 46ch;
    font-size: var(--fs-lead);
    color: var(--text-muted);
  }

  .mg-dropin .ctas.svelte-qzo0r3 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
  }
  .mg-dropin .btn.svelte-qzo0r3 {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    transition:
      transform var(--dur-fast) var(--ease-out),
      background var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .btn-primary.svelte-qzo0r3 {
    color: #fff;
    background: var(--accent-grad-btn);
    box-shadow: var(--glow-btn);
  }
  .mg-dropin .btn-primary.svelte-qzo0r3:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-btn-hover);
  }
  .mg-dropin .btn-ghost.svelte-qzo0r3 {
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
  }
  .mg-dropin .btn-ghost.svelte-qzo0r3:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
  }

  /* Staggered page-load reveal */
  .mg-dropin .reveal.svelte-qzo0r3 {
    opacity: 0;
    transform: translateY(16px);
    animation: svelte-qzo0r3-rise var(--dur-slow) var(--ease-out) forwards;
    animation-delay: calc(var(--i) * 110ms);
  }
  @keyframes svelte-qzo0r3-rise {
    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (max-width: 960px) {
    .mg-dropin .grid.svelte-qzo0r3 {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }
    .mg-dropin .visual.svelte-qzo0r3 {
      order: -1;
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mg-dropin .reveal.svelte-qzo0r3 {
      opacity: 1;
      transform: none;
      animation: none;
    }
  }

  .mg-dropin .rail.svelte-120i8qr {
    padding-block: var(--space-6);
  }

  .mg-dropin .head.svelte-120i8qr {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .mg-dropin .eyebrow.svelte-120i8qr {
    color: var(--accent);
    margin-bottom: var(--space-3);
  }
  .mg-dropin h2.svelte-120i8qr {
    font-size: var(--fs-h2);
  }

  .mg-dropin .controls.svelte-120i8qr {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-shrink: 0;
  }
  .mg-dropin .view-all.svelte-120i8qr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
  }
  .mg-dropin .view-all.svelte-120i8qr:hover {
    color: var(--accent);
  }
  .mg-dropin .arrows.svelte-120i8qr {
    display: flex;
    gap: var(--space-2);
  }
  .mg-dropin .arrow.svelte-120i8qr {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    transition:
      border-color var(--dur-fast) var(--ease-out),
      opacity var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .arrow.svelte-120i8qr:hover:not(:disabled) {
    border-color: var(--accent);
  }
  .mg-dropin .arrow.svelte-120i8qr:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .mg-dropin .track.svelte-120i8qr {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* overflow-x:auto also clips vertically — pad the box so the cards'
       hover lift + shadow aren't cut off, then offset with negative margins
       so the layout position is unchanged. */
    padding: 16px 2px 24px;
    margin-block: -16px -24px;
    /* hide scrollbar but keep functionality */
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .mg-dropin .track.svelte-120i8qr::-webkit-scrollbar {
    height: 8px;
  }
  .mg-dropin .track.svelte-120i8qr::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
  }
  /* Each direct child becomes a snap target with a fixed-ish width */
  .mg-dropin .track.svelte-120i8qr > * {
    scroll-snap-align: start;
    flex: 0 0 clamp(260px, 24%, 320px);
  }

  @media (max-width: 640px) {
    .mg-dropin .track.svelte-120i8qr > * {
      flex-basis: 80%;
    }
    .mg-dropin .head.svelte-120i8qr {
      flex-wrap: wrap;
    }
  }

  .mg-dropin .fcard.svelte-149b8mz {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--c) 12%, var(--surface)),
      var(--surface)
    );
    border: 1px solid color-mix(in oklab, var(--c) 24%, var(--border));
    box-shadow: var(--shadow-card);
    transition:
      transform var(--dur-med) var(--ease-out),
      border-color var(--dur-med) var(--ease-out);
  }
  .mg-dropin .fcard.svelte-149b8mz:hover,.mg-dropin 
  .fcard.svelte-149b8mz:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--c) 55%, transparent);
  }

  .mg-dropin .top.svelte-149b8mz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .mg-dropin .tag.svelte-149b8mz {
    font-size: var(--fs-label-xs);
    padding: 5px 11px;
    border-radius: 999px;
    color: color-mix(in oklab, var(--c) 86%, var(--tint-ink));
    background: color-mix(in oklab, var(--c) 16%, transparent);
    border: 1px solid color-mix(in oklab, var(--c) 32%, transparent);
  }
  /* shape comes from .icon-disc in app.css */
  .mg-dropin .icon.svelte-149b8mz {
    --disc-size: 44px;
  }

  .mg-dropin h3.svelte-149b8mz {
    font-size: var(--fs-h3);
    margin-top: var(--space-2);
  }
  .mg-dropin p.svelte-149b8mz {
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
    flex-grow: 1;
  }

  .mg-dropin .link.svelte-149b8mz {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-3);
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: var(--text);
    width: fit-content;
    background: none;
    border: 0;
    padding: 0;
  }
  .mg-dropin .link.svelte-149b8mz svg {
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .fcard.svelte-149b8mz:hover .link:where(.svelte-149b8mz) {
    color: var(--c);
  }
  .mg-dropin .fcard.svelte-149b8mz:hover .link:where(.svelte-149b8mz) svg {
    transform: translate(2px, -2px);
  }

  .mg-dropin .card.svelte-mortlb {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition:
      transform var(--dur-med) var(--ease-out),
      border-color var(--dur-med) var(--ease-out);
  }

  /* Category-colored glow wash that fades in on hover */
  .mg-dropin .card.svelte-mortlb::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      120% 90% at 100% 0%,
      color-mix(in oklab, var(--c) 22%, transparent),
      transparent 55%
    );
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
    pointer-events: none;
  }

  .mg-dropin .card.svelte-mortlb:hover,.mg-dropin 
  .card.svelte-mortlb:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--c) 55%, transparent);
  }
  .mg-dropin .card.svelte-mortlb:hover::before,.mg-dropin 
  .card.svelte-mortlb:focus-within::before {
    opacity: 1;
  }

  .mg-dropin .card-top.svelte-mortlb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  /* shape comes from .icon-disc in app.css; no hover glow — the solid disc
     carries enough weight without one */

  .mg-dropin .pill.svelte-mortlb {
    font-size: var(--fs-label-xs);
    padding: 5px 11px;
    border-radius: 999px;
    color: color-mix(in oklab, var(--c) 86%, var(--tint-ink));
    background: color-mix(in oklab, var(--c) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--c) 30%, transparent);
  }

  .mg-dropin h3.svelte-mortlb {
    font-size: var(--fs-h3);
    margin-top: var(--space-2);
  }

  .mg-dropin p.svelte-mortlb {
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
    flex-grow: 1;
  }

  .mg-dropin .card-link.svelte-mortlb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-3);
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: var(--text);
    width: fit-content;
  }
  .mg-dropin .card-link.svelte-mortlb svg {
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .card.svelte-mortlb:hover .card-link:where(.svelte-mortlb) {
    color: var(--c);
  }
  .mg-dropin .card.svelte-mortlb:hover .card-link:where(.svelte-mortlb) svg {
    transform: translate(2px, -2px);
  }

  .mg-dropin .storefront.svelte-12ehzg7 {
    padding-block: var(--space-8);
  }

  .mg-dropin .head.svelte-12ehzg7 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
  }
  .mg-dropin .eyebrow.svelte-12ehzg7 {
    color: var(--accent);
    margin-bottom: var(--space-3);
  }
  .mg-dropin h2.svelte-12ehzg7 {
    font-size: var(--fs-h2);
  }
  .mg-dropin .subhead.svelte-12ehzg7 {
    margin-top: var(--space-3);
    max-width: 56ch;
    font-size: var(--fs-lead);
    color: var(--text-muted);
  }
  .mg-dropin .count.svelte-12ehzg7 {
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
  }
  .mg-dropin .count.svelte-12ehzg7 strong:where(.svelte-12ehzg7) {
    color: var(--text);
  }

  .mg-dropin .filters.svelte-12ehzg7 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }
  .mg-dropin .chip.svelte-12ehzg7 {
    --c: var(--accent);
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    transition:
      color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      background var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .chip.svelte-12ehzg7:hover {
    color: var(--text);
    border-color: color-mix(in oklab, var(--c) 55%, transparent);
  }
  .mg-dropin .chip.active.svelte-12ehzg7 {
    color: #fff;
    /* Dark: a 30% wash over the dark surface carries white text. Light: the
       same wash over white would not, so the fill goes solid instead. */
    background: color-mix(in oklab, var(--c) var(--chip-active-fill), var(--surface));
    border-color: color-mix(in oklab, var(--c) 70%, transparent);
    box-shadow: 0 0 22px -8px var(--c);
  }

  .mg-dropin .grid.svelte-12ehzg7 {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  .mg-dropin .grid.svelte-12ehzg7 > li:where(.svelte-12ehzg7) {
    display: flex;
  }
  .mg-dropin .grid.svelte-12ehzg7 > li:where(.svelte-12ehzg7) > .card {
    width: 100%;
  }

  @media (max-width: 1200px) {
    .mg-dropin .grid.svelte-12ehzg7 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (max-width: 820px) {
    .mg-dropin .grid.svelte-12ehzg7 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 520px) {
    .mg-dropin .grid.svelte-12ehzg7 {
      grid-template-columns: 1fr;
    }
  }

  .mg-dropin .journey.svelte-qa59wp {
    padding-block: var(--space-7);
  }
  .mg-dropin .head.svelte-qa59wp {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
  }
  .mg-dropin .eyebrow.svelte-qa59wp {
    color: var(--accent);
    margin-bottom: var(--space-3);
  }
  .mg-dropin h2.svelte-qa59wp {
    font-size: var(--fs-h2);
  }
  .mg-dropin .stages.svelte-qa59wp {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .mg-dropin .stage.svelte-qa59wp {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }
  /* connector segment from this node's center to the next node's center
     (column width + gap), flowing from this stage's color into the next */
  .mg-dropin .stage.svelte-qa59wp::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 50%;
    width: calc(100% + var(--space-4));
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c), var(--next, var(--c)));
    opacity: 0.6;
    z-index: 0;
  }
  .mg-dropin .stage.svelte-qa59wp:last-child::before {
    display: none;
  }

  /* numbered timeline node, sitting on the line */
  .mg-dropin .node.svelte-qa59wp {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 22px;
    color: color-mix(in oklab, var(--c) 88%, var(--tint-ink));
    background: color-mix(in oklab, var(--c) 22%, var(--surface-2));
    border: 2px solid color-mix(in oklab, var(--c) 70%, transparent);
    box-shadow:
      0 0 0 7px var(--bg),
      0 0 20px -2px color-mix(in oklab, var(--c) 60%, transparent);
  }

  .mg-dropin .card.svelte-qa59wp {
    width: 100%;
    flex-grow: 1; /* fill the (equal-height) stage column so all cards match */
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color var(--dur-med) var(--ease-out);
  }
  .mg-dropin .card.svelte-qa59wp:hover {
    border-color: color-mix(in oklab, var(--c) 50%, transparent);
  }

  .mg-dropin .step.svelte-qa59wp {
    font-size: var(--fs-label-xs);
    color: color-mix(in oklab, var(--c) 86%, var(--tint-ink));
  }
  .mg-dropin h3.svelte-qa59wp {
    font-size: var(--fs-h3);
  }
  .mg-dropin .blurb.svelte-qa59wp {
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
  }

  .mg-dropin .items.svelte-qa59wp {
    list-style: none;
    padding: 0;
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .mg-dropin .items.svelte-qa59wp li:where(.svelte-qa59wp) {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-body-sm);
    color: var(--text-body);
  }
  .mg-dropin .items.svelte-qa59wp li:where(.svelte-qa59wp) a:where(.svelte-qa59wp) {
    color: inherit;
    text-decoration: none;
  }
  .mg-dropin .items.svelte-qa59wp li:where(.svelte-qa59wp) a:where(.svelte-qa59wp):hover {
    color: var(--c);
    text-decoration: underline;
  }
  .mg-dropin .dot.svelte-qa59wp {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: var(--c);
    background: color-mix(in oklab, var(--c) 18%, transparent);
  }

  /* two-up, then stacked — drop the horizontal connector when it'd point
     into empty space; the numbered nodes still convey the sequence */
  @media (max-width: 900px) {
    .mg-dropin .stages.svelte-qa59wp {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6) var(--space-5);
    }
    .mg-dropin .stage.svelte-qa59wp::before {
      display: none;
    }
  }
  @media (max-width: 520px) {
    .mg-dropin .stages.svelte-qa59wp {
      grid-template-columns: 1fr;
    }
  }

  .mg-dropin .wrap.svelte-o3aom7 {
    padding-block: var(--space-7);
  }

  .mg-dropin .panel.svelte-o3aom7 {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-7);
    padding: clamp(28px, 4vw, 56px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-strong);
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), 0.22), transparent 55%),
      radial-gradient(120% 140% at 100% 100%, rgba(184, 141, 255, 0.22), transparent 55%),
      var(--surface);
    overflow: hidden;
  }

  .mg-dropin .eyebrow-row.svelte-o3aom7 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
  }
  .mg-dropin .eyebrow.svelte-o3aom7 {
    color: var(--accent);
  }
  .mg-dropin h2.svelte-o3aom7 {
    font-size: var(--fs-h2);
  }
  .mg-dropin .blurb.svelte-o3aom7 {
    margin-top: var(--space-4);
    max-width: 48ch;
    font-size: var(--fs-lead);
    color: var(--text-body);
  }

  .mg-dropin .tags.svelte-o3aom7 {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }
  .mg-dropin .tag.svelte-o3aom7 {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: var(--fs-body-sm);
    font-weight: 500;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
  }
  .mg-dropin .arrow.svelte-o3aom7 {
    display: grid;
    place-items: center;
    color: var(--accent);
  }

  .mg-dropin .cta.svelte-o3aom7 {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: #fff;
    background: var(--accent-grad-btn);
    box-shadow: var(--glow-btn);
    transition:
      transform var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .cta.svelte-o3aom7:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-btn-hover);
  }

  .mg-dropin .visual.svelte-o3aom7 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: var(--space-7);
    border-left: 1px solid var(--border);
  }
  .mg-dropin .visual.svelte-o3aom7 svg {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1;
  }

  @media (max-width: 900px) {
    .mg-dropin .panel.svelte-o3aom7 {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }
    .mg-dropin .visual.svelte-o3aom7 {
      padding-left: 0;
      padding-top: var(--space-6);
      border-left: none;
      border-top: 1px solid var(--border);
    }
  }

  .mg-dropin .goals-section.svelte-dhi6yz {
    padding-block: var(--space-6);
  }
  .mg-dropin .head.svelte-dhi6yz {
    margin-bottom: var(--space-6);
  }
  .mg-dropin .eyebrow.svelte-dhi6yz {
    color: var(--accent);
    margin-bottom: var(--space-3);
  }
  .mg-dropin h2.svelte-dhi6yz {
    font-size: var(--fs-h2);
  }

  .mg-dropin .goals.svelte-dhi6yz {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
  .mg-dropin .goal.svelte-dhi6yz {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    transition:
      transform var(--dur-med) var(--ease-out),
      border-color var(--dur-med) var(--ease-out);
  }
  .mg-dropin .goal.svelte-dhi6yz:hover,.mg-dropin 
  .goal.svelte-dhi6yz:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--c) 50%, transparent);
  }

  .mg-dropin .art.svelte-dhi6yz {
    position: relative;
    height: 160px;
  }
  .mg-dropin .art.svelte-dhi6yz img:where(.svelte-dhi6yz) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.2) contrast(1.08) brightness(1.04);
    transition: filter var(--dur-med) var(--ease-out);
  }
  .mg-dropin .goal.svelte-dhi6yz:hover .art:where(.svelte-dhi6yz) img:where(.svelte-dhi6yz),.mg-dropin 
  .goal.svelte-dhi6yz:focus-within .art:where(.svelte-dhi6yz) img:where(.svelte-dhi6yz) {
    filter: saturate(1.35) contrast(1.1) brightness(1.08);
  }
  /* Category-tinted scrim, kept to the edges only: a tint at the top and a fade
     into the card at the bottom for the icon/title edge. The middle of the
     photo is left alone so it doesn't read washed out. */
  .mg-dropin .art.svelte-dhi6yz::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, color-mix(in oklab, var(--c) 26%, transparent), transparent 45%, var(--surface) 98%),
      linear-gradient(to bottom, rgba(7, 7, 10, 0.18), rgba(7, 7, 10, 0.06) 50%, rgba(7, 7, 10, 0.3));
  }

  /* shape comes from .icon-disc in app.css */
  .mg-dropin .icon.svelte-dhi6yz {
    position: absolute;
    z-index: 1;
    left: var(--space-5);
    bottom: -22px;
  }

  .mg-dropin .content.svelte-dhi6yz {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    padding-top: calc(var(--space-5) + 14px);
    flex-grow: 1;
  }
  .mg-dropin .body.svelte-dhi6yz {
    flex-grow: 1;
  }
  .mg-dropin h3.svelte-dhi6yz {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-2);
  }
  .mg-dropin p.svelte-dhi6yz {
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
  }
  .mg-dropin .link.svelte-dhi6yz {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: var(--c);
    width: fit-content;
    background: none;
    border: 0;
    padding: 0;
  }
  .mg-dropin .link.svelte-dhi6yz svg {
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .goal.svelte-dhi6yz:hover .link:where(.svelte-dhi6yz) svg {
    transform: translateX(3px);
  }

  @media (max-width: 900px) {
    .mg-dropin .goals.svelte-dhi6yz {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 560px) {
    .mg-dropin .goals.svelte-dhi6yz {
      grid-template-columns: 1fr;
    }
  }

  .mg-dropin .lcard.svelte-1l84yl5 {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: var(--bg-deep);
    border: 1px solid var(--border);
    overflow: hidden;
    transition:
      transform var(--dur-med) var(--ease-out),
      border-color var(--dur-med) var(--ease-out);
  }
  .mg-dropin .lcard.svelte-1l84yl5:hover,.mg-dropin 
  .lcard.svelte-1l84yl5:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--c) 50%, transparent);
  }

  .mg-dropin .art.svelte-1l84yl5 {
    position: relative;
    height: 144px;
  }
  .mg-dropin .art.svelte-1l84yl5 img:where(.svelte-1l84yl5) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.2) contrast(1.08) brightness(1.04);
    transition: filter var(--dur-med) var(--ease-out);
  }
  .mg-dropin .lcard.svelte-1l84yl5:hover .art:where(.svelte-1l84yl5) img:where(.svelte-1l84yl5),.mg-dropin 
  .lcard.svelte-1l84yl5:focus-within .art:where(.svelte-1l84yl5) img:where(.svelte-1l84yl5) {
    filter: saturate(1.35) contrast(1.1) brightness(1.08);
  }
  /* Scrim stays only where it earns its keep: a tint at the top for the
     category accent, and a fade into the card at the bottom so the icon and
     title edge read cleanly. The middle of the photo is left alone. */
  .mg-dropin .art.svelte-1l84yl5::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, color-mix(in oklab, var(--c) 26%, transparent), transparent 45%, var(--bg-deep) 98%),
      linear-gradient(to bottom, rgba(7, 7, 10, 0.18), rgba(7, 7, 10, 0.06) 50%, rgba(7, 7, 10, 0.3));
  }

  /* shape comes from .icon-disc in app.css */
  .mg-dropin .icon.svelte-1l84yl5 {
    --disc-size: 44px;
    position: absolute;
    z-index: 1;
    left: var(--space-5);
    bottom: -20px;
  }

  .mg-dropin .content.svelte-1l84yl5 {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    padding-top: calc(var(--space-5) + 12px);
    flex-grow: 1;
  }
  .mg-dropin .body.svelte-1l84yl5 {
    flex-grow: 1;
  }
  .mg-dropin h3.svelte-1l84yl5 {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-2);
  }
  .mg-dropin p.svelte-1l84yl5 {
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
  }
  .mg-dropin .cta.svelte-1l84yl5 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: var(--c);
    width: fit-content;
  }
  .mg-dropin .cta.svelte-1l84yl5 svg {
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .lcard.svelte-1l84yl5:hover .cta:where(.svelte-1l84yl5) svg {
    transform: translateX(3px);
  }
  .mg-dropin .filetype.svelte-1l84yl5 {
    color: var(--text-muted);
    font-weight: 500;
  }

  .mg-dropin .stories.svelte-dpnwkv {
    padding-block: var(--space-7);
  }
  .mg-dropin .head.svelte-dpnwkv {
    margin-bottom: var(--space-6);
  }
  .mg-dropin .eyebrow.svelte-dpnwkv {
    color: var(--accent);
    margin-bottom: var(--space-3);
  }
  .mg-dropin h2.svelte-dpnwkv {
    font-size: var(--fs-h2);
  }

  .mg-dropin .grid.svelte-dpnwkv {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
  .mg-dropin .story.svelte-dpnwkv {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    transition:
      transform var(--dur-med) var(--ease-out),
      border-color var(--dur-med) var(--ease-out);
  }
  .mg-dropin .story.svelte-dpnwkv:hover,.mg-dropin 
  .story.svelte-dpnwkv:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--c) 50%, transparent);
  }

  /* abstract gradient "art" stands in for a case-study photo */
  .mg-dropin .art.svelte-dpnwkv {
    position: relative;
    height: 168px;
    background: linear-gradient(
      135deg,
      color-mix(in oklab, var(--c) 40%, var(--bg-deep)),
      var(--bg-deep)
    );
    overflow: hidden;
  }
  /* blend the bottom of the photo into the card body */
  .mg-dropin .art.svelte-dpnwkv::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, var(--surface));
    pointer-events: none;
  }
  .mg-dropin .orb.svelte-dpnwkv {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    top: -40px;
    right: -30px;
    background: radial-gradient(circle, var(--c), transparent 70%);
    opacity: 0.65;
    filter: blur(6px);
  }
  .mg-dropin .orb-2.svelte-dpnwkv {
    width: 120px;
    height: 120px;
    top: auto;
    bottom: -40px;
    left: -20px;
    right: auto;
    opacity: 0.4;
  }
  /* real photo, when provided via data — replaces the gradient art */
  .mg-dropin .photo.svelte-dpnwkv {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mg-dropin .body.svelte-dpnwkv {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    flex-grow: 1;
  }
  .mg-dropin .sector.svelte-dpnwkv {
    color: color-mix(in oklab, var(--c) 86%, var(--tint-ink));
  }
  .mg-dropin h3.svelte-dpnwkv {
    font-size: var(--fs-h3);
  }
  .mg-dropin p.svelte-dpnwkv {
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
    flex-grow: 1;
  }
  .mg-dropin .link.svelte-dpnwkv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: var(--text);
    width: fit-content;
  }
  .mg-dropin .link.svelte-dpnwkv svg {
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .story.svelte-dpnwkv:hover .link:where(.svelte-dpnwkv) {
    color: var(--c);
  }
  .mg-dropin .story.svelte-dpnwkv:hover .link:where(.svelte-dpnwkv) svg {
    transform: translateX(3px);
  }

  @media (max-width: 900px) {
    .mg-dropin .grid.svelte-dpnwkv {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
  }

  .mg-dropin .industries.svelte-1ce1opr {
    padding-block: var(--space-6);
  }
  .mg-dropin .inner.svelte-1ce1opr {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-6);
    align-items: center;
    padding: clamp(24px, 3vw, 40px);
    border-radius: var(--radius-xl);
    background: var(--bg-deep);
    border: 1px solid var(--border);
  }
  .mg-dropin .eyebrow.svelte-1ce1opr {
    color: var(--accent);
    margin-bottom: var(--space-3);
  }
  .mg-dropin h2.svelte-1ce1opr {
    font-size: var(--fs-h2);
  }

  .mg-dropin .chips.svelte-1ce1opr {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .mg-dropin .chip.svelte-1ce1opr {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 16px;
    border-radius: 999px;
    font-size: var(--fs-body-sm);
    font-weight: 500;
    color: var(--text-body);
    background: var(--surface);
    border: 1px solid var(--border);
    transition:
      color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .chip.svelte-1ce1opr:hover {
    color: var(--text);
    border-color: var(--accent);
  }
  .mg-dropin .icon.svelte-1ce1opr {
    display: grid;
    place-items: center;
    color: var(--accent);
  }

  @media (max-width: 860px) {
    .mg-dropin .inner.svelte-1ce1opr {
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }
  }

  .mg-dropin .wrap.svelte-ajk5m7 {
    padding-block: var(--space-7);
  }
  .mg-dropin .inner.svelte-ajk5m7 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-7);
    align-items: center;
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--radius-xl);
    background:
      linear-gradient(rgba(7, 7, 10, 0.55), rgba(7, 7, 10, 0.72)),
      var(--bg-photo) center / cover no-repeat,
      var(--bg-deep);
    border: 1px solid var(--border);
  }

  .mg-dropin .eyebrow.svelte-ajk5m7 {
    color: var(--accent);
    margin-bottom: var(--space-4);
  }
  .mg-dropin h2.svelte-ajk5m7 {
    font-size: var(--fs-h2);
  }
  .mg-dropin .pillars.svelte-ajk5m7 {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .mg-dropin .pillar.svelte-ajk5m7 {
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color var(--dur-med) var(--ease-out);
  }
  .mg-dropin .pillar.svelte-ajk5m7:hover {
    border-color: var(--border-strong);
  }
  /* shape comes from .icon-disc in app.css; ink falls back to --ink-accent */
  .mg-dropin .icon.svelte-ajk5m7 {
    --disc-size: 44px;
    margin-bottom: var(--space-3);
  }
  .mg-dropin .pillar.svelte-ajk5m7 h3:where(.svelte-ajk5m7) {
    font-size: var(--fs-h3);
  }
  .mg-dropin .pillar.svelte-ajk5m7 p:where(.svelte-ajk5m7) {
    margin-top: var(--space-2);
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
  }

  @media (max-width: 900px) {
    .mg-dropin .inner.svelte-ajk5m7 {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }
  }
  @media (max-width: 480px) {
    .mg-dropin .pillars.svelte-ajk5m7 {
      grid-template-columns: 1fr;
    }
  }

  /* ---- final CTA band ---- */
  .mg-dropin .cta-band.svelte-9sff3o {
    padding-block: var(--space-7);
  }
  .mg-dropin .cta-inner.svelte-9sff3o {
    /* Set here rather than relying on .spotlight-surface — the spotlight
       action bails out entirely under prefers-reduced-motion. */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding: clamp(40px, 5.5vw, 72px);
    border-radius: var(--radius-xl);
    /* Dark base; the abstract photo rides on ::after so its fade is a single
       dial (--art-fade) rather than being baked into a scrim stack. The
       spotlight action adds a cursor-following highlight via ::before. */
    --art-fade: 0.32;
    background: linear-gradient(150deg, var(--surface-2), var(--bg-deep) 76%);
    border: 1px solid var(--border-strong);
    box-shadow: var(--edge-highlight);
  }
  /* Abstract shapes, lightly faded. Masked away at both ends: the copy on the
     left sits on near-flat dark, and the far right drops back so the button
     keeps its contrast instead of landing orange-on-orange. */
  .mg-dropin .cta-inner.svelte-9sff3o::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--bg-photo) 22% 62% / cover no-repeat;
    opacity: var(--art-fade);
    -webkit-mask-image: linear-gradient(
      100deg,
      transparent 4%,
      rgba(0, 0, 0, 0.4) 28%,
      #000 56%,
      rgba(0, 0, 0, 0.3) 86%,
      transparent 100%
    );
    mask-image: linear-gradient(
      100deg,
      transparent 4%,
      rgba(0, 0, 0, 0.4) 28%,
      #000 56%,
      rgba(0, 0, 0, 0.3) 86%,
      transparent 100%
    );
  }
  .mg-dropin .cta-copy.svelte-9sff3o {
    position: relative;
    z-index: 1;
    flex: 1 1 540px;
    max-width: 64ch;
  }
  /* Larger than --fs-h2: this is the page's closing statement and it now carries
     the block on its own with the eyebrow gone. */
  .mg-dropin .cta-inner.svelte-9sff3o h2:where(.svelte-9sff3o) {
    font-size: clamp(34px, 4.2vw, 52px);
  }
  .mg-dropin .cta-inner.svelte-9sff3o h2:where(.svelte-9sff3o) .grad:where(.svelte-9sff3o) {
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .mg-dropin .cta-sub.svelte-9sff3o {
    margin-top: var(--space-4);
    color: var(--text-body);
    font-size: var(--fs-lead);
    max-width: 48ch;
  }
  .mg-dropin .cta.svelte-9sff3o {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 18px 32px;
    font-size: var(--fs-body);
    border-radius: 999px;
    font-weight: 600;
    color: #fff;
    background: var(--accent-grad-btn);
    box-shadow: var(--glow-btn);
    transition:
      transform var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
    white-space: nowrap;
  }
  .mg-dropin .cta.svelte-9sff3o:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-btn-hover);
  }

  /* ---- footer ---- */
  .mg-dropin .site-footer.svelte-9sff3o {
    margin-top: var(--space-7);
    padding-top: var(--space-7);
    border-top: 1px solid var(--border);
    background: var(--bg-deep);
  }
  .mg-dropin .foot-grid.svelte-9sff3o {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--space-6);
    padding-bottom: var(--space-7);
  }

  .mg-dropin .brand.svelte-9sff3o {
    display: inline-flex;
    align-items: center;
  }
  .mg-dropin .brand-logo.svelte-9sff3o {
    height: 30px;
    width: auto;
    display: block;
  }
  .mg-dropin .tagline.svelte-9sff3o {
    margin-top: var(--space-4);
    color: var(--text-muted);
    max-width: 28ch;
  }

  .mg-dropin .socials.svelte-9sff3o {
    list-style: none;
    padding: 0;
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }
  .mg-dropin .social.svelte-9sff3o {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    transition:
      color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .social.svelte-9sff3o:hover {
    color: var(--text);
    border-color: var(--accent);
  }

  .mg-dropin .col.svelte-9sff3o h3:where(.svelte-9sff3o) {
    color: var(--text-muted);
    margin-bottom: var(--space-4);
  }
  .mg-dropin .col.svelte-9sff3o ul:where(.svelte-9sff3o) {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .mg-dropin .col.svelte-9sff3o a:where(.svelte-9sff3o) {
    color: var(--text-body);
    font-size: var(--fs-body-sm);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .mg-dropin .col.svelte-9sff3o a:where(.svelte-9sff3o):hover {
    color: var(--accent);
  }

  .mg-dropin .legal.svelte-9sff3o {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-5);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-body-sm);
  }

  @media (max-width: 820px) {
    .mg-dropin .foot-grid.svelte-9sff3o {
      grid-template-columns: 1fr 1fr;
    }
    .mg-dropin .brand-col.svelte-9sff3o {
      grid-column: 1 / -1;
    }
  }
/*$vite$:1*/