@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url("work-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/7ba26e76-bd6f-4c2b-8885-3e1eab12953d-7ba26e76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/3b8a1626-c816-403d-85e3-5dd7dedc7b7b-3b8a1626.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/6456b58a-2534-487d-aca0-81babe9fbad4-6456b58a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/94033bd7-9525-4c2e-abe8-58892f269871-94033bd7.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fbee4664-e45c-4749-867f-b8a4b3bc2653-fbee4664.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/3175e86a-db8f-4b2a-a557-504383a69e6c-3175e86a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/c6f63321-730d-4d22-9e8b-65278d8d71c3-c6f63321.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/7ba26e76-bd6f-4c2b-8885-3e1eab12953d-7ba26e76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/3b8a1626-c816-403d-85e3-5dd7dedc7b7b-3b8a1626.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/6456b58a-2534-487d-aca0-81babe9fbad4-6456b58a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/94033bd7-9525-4c2e-abe8-58892f269871-94033bd7.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/fbee4664-e45c-4749-867f-b8a4b3bc2653-fbee4664.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/3175e86a-db8f-4b2a-a557-504383a69e6c-3175e86a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/c6f63321-730d-4d22-9e8b-65278d8d71c3-c6f63321.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/7ba26e76-bd6f-4c2b-8885-3e1eab12953d-7ba26e76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/3b8a1626-c816-403d-85e3-5dd7dedc7b7b-3b8a1626.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/6456b58a-2534-487d-aca0-81babe9fbad4-6456b58a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/94033bd7-9525-4c2e-abe8-58892f269871-94033bd7.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/fbee4664-e45c-4749-867f-b8a4b3bc2653-fbee4664.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/3175e86a-db8f-4b2a-a557-504383a69e6c-3175e86a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/c6f63321-730d-4d22-9e8b-65278d8d71c3-c6f63321.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/7ba26e76-bd6f-4c2b-8885-3e1eab12953d-7ba26e76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/3b8a1626-c816-403d-85e3-5dd7dedc7b7b-3b8a1626.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/6456b58a-2534-487d-aca0-81babe9fbad4-6456b58a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/94033bd7-9525-4c2e-abe8-58892f269871-94033bd7.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/fbee4664-e45c-4749-867f-b8a4b3bc2653-fbee4664.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/3175e86a-db8f-4b2a-a557-504383a69e6c-3175e86a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/c6f63321-730d-4d22-9e8b-65278d8d71c3-c6f63321.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../assets/7ba26e76-bd6f-4c2b-8885-3e1eab12953d-7ba26e76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../assets/3b8a1626-c816-403d-85e3-5dd7dedc7b7b-3b8a1626.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../assets/6456b58a-2534-487d-aca0-81babe9fbad4-6456b58a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../assets/94033bd7-9525-4c2e-abe8-58892f269871-94033bd7.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../assets/fbee4664-e45c-4749-867f-b8a4b3bc2653-fbee4664.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../assets/3175e86a-db8f-4b2a-a557-504383a69e6c-3175e86a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../assets/c6f63321-730d-4d22-9e8b-65278d8d71c3-c6f63321.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter's stand-in while the web font loads: local Arial resized to Inter's width and line box, so the swap does not
   reflow text. size-adjust = Inter's average advance on body copy / Arial's (fontTools: Inter wght 400 vs Arial =
   106.67%, wght 700 vs Arial Bold = 102.82%); ascent/descent = Inter hhea (1984/-494, upm 2048) / size-adjust.
   One face per weight (two shared faces left CLS 0.02 on FAQs). These bytes sit in the render-blocking stylesheet, so
   each face carries only the basic-Latin unicode-range: with Inter's full range the six cost +5.9 KB and ~200 ms FCP
   on slow 4G (the CSS shares the link with the hero photos). build.mjs adds the
   unicode-range of Inter's basic-Latin file, so a character Inter lacks (→) still falls through to system-ui. */
@font-face{font-family:'Inter Fallback';font-weight:300;src:local('Arial');size-adjust:104.93%;ascent-override:92.32%;descent-override:22.99%;line-gap-override:0%;font-display:swap;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}
@font-face{font-family:'Inter Fallback';font-weight:400;src:local('Arial');size-adjust:106.67%;ascent-override:90.81%;descent-override:22.61%;line-gap-override:0%;font-display:swap;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}
@font-face{font-family:'Inter Fallback';font-weight:500;src:local('Arial');size-adjust:107.74%;ascent-override:89.92%;descent-override:22.39%;line-gap-override:0%;font-display:swap;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}
@font-face{font-family:'Inter Fallback';font-weight:600;src:local('Arial Bold');size-adjust:101.85%;ascent-override:95.12%;descent-override:23.68%;line-gap-override:0%;font-display:swap;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}
@font-face{font-family:'Inter Fallback';font-weight:700;src:local('Arial Bold');size-adjust:102.82%;ascent-override:94.21%;descent-override:23.46%;line-gap-override:0%;font-display:swap;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}
@font-face{font-family:'Inter Fallback';font-weight:800;src:local('Arial Bold');size-adjust:104.04%;ascent-override:93.12%;descent-override:23.19%;line-gap-override:0%;font-display:swap;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}
/* core.css — loaded BEFORE every site stylesheet, so site classes always win. Zero-specificity resets only. */
:where(img:not(.prose img)){width:auto;height:auto}                    /* width/height attrs give the aspect ratio, never the size */
:where(h1,h2,h3,h4,h5,h6).hd{margin:0;font:inherit;letter-spacing:inherit}   /* Heading behaves like the div it replaced */
.main{display:contents}
/* native-button reset for controls converted from div/span (S-INTERACTIVE); zero specificity so site classes win */
:where(.ui-btn){appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer}
:where(.ui-btn--block){display:block}
/* Shared components for every page: buttons and number badges. Linked before each page's own <style>.
 *
 * Buttons: the one place their look lives (client feedback 2026-10-15: "standardise all the cta button").
 * Markup carries only classes; inline styles on a button are for layout (margin, flex) and nothing else.
 *   <a class="btn btn--primary" href="#register">Book a free home visit</a>
 * Variant (one): --primary pink fill | --secondary outline | --on-dark outline on a dark section | --tab toggle (aria-pressed)
 * Size (optional): --sm header | --bar phone bottom bar | --block full width of its box
 */

/* Colour tokens, Tailwind-style (user, 2026-10-21). Every colour on the site is one of these: write var(--brand-500),
 * never a hex. _src/colors.py converts a page's literals and lists any colour off the scale. Exception: technology.html's
 * "How solar powers your home" widget keeps the client's own day/night palette (.eco). */
:root {
  --brand-50: #fff0fc;   /* tint fills: badges, pills, selected cards */
  --brand-200: #fdc9f0;  /* tint borders */
  --brand-500: #f454cd;  /* the brand pink: buttons, links, accents */
  --brand: var(--brand-500);
  --brand-600: #c030a3;  /* pink text on white or tint (contrast) */
  --white: #ffffff;
  --gray-100: #eeeeee;   /* section and card fills, hairlines */
  --gray-200: #dddddd;   /* borders */
  --gray-300: #bbbbbb;   /* disabled, placeholders */
  --gray-400: #888888;   /* secondary text */
  --gray-600: #666666;   /* body text */
  --black: #000000;      /* headings */
  --sand-50: #fff9e8;    /* warm fills */
  --sand-200: #efe3c4;   /* warm borders */
  --sun-400: #ffdc2e;    /* yellow accent */
  --sun-500: #f5b301;    /* review stars, warnings */
  --red-700: #b00020;    /* form errors */
}

/* Section header (user 2026-10-21: "standardise the homepage: eyebrow, title, subtitle with primary color, desc").
 * Eyebrow 14px uppercase pink --track-eyebrow; title --fs-title; optional pink subtitle --fs-subtitle; description 16px
 * --gray-600 --lh-body. The hero headline is the page's H1 and keeps its own larger size. */
:root { --fs-title: clamp(30px, 5vw, 40px); --fs-subtitle: 20px; }

/* Section spacing (user 2026-10-21: "standardise the y gap"). A section's top and bottom padding, and the gap between a
 * coloured block (card, form band) and the content next to it: 56px desktop, 44px phone (the [style*=…] overrides in
 * site.css already put the inline clamp(40px,4vw,56px) sections at 44). Check by eye with a row scan, not the CSS. */
:root { --sec-y: 56px; }
@media (max-width: 900px) { :root { --sec-y: 44px; } }

/* Size and effect tokens (2026-10-21; _src/scale.py converts a page and lists anything off the scale).
 * Heading line heights are --lh-display / --lh-heading / --lh-title (below); body text uses these two. */
:root {
  --radius-xs: 2px; --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --radius-2xl: 24px; --radius-full: 999px;
  --shadow-xs: 0 1px 4px rgba(0, 0, 0, .25);          /* range thumbs */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .14);          /* small controls: chips, nudges, toggles */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, .05);       /* flat cards */
  --shadow-md: 0 14px 34px rgba(0, 0, 0, .14);        /* dropdowns, hover lift */
  --shadow-on-photo: 0 10px 28px rgba(0, 0, 0, .35);  /* a button over a photograph */
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .35);        /* glass panels */
  --shadow-brand: 0 6px 22px rgba(244, 84, 205, .18); /* the highlighted plan */
  --track-eyebrow: 2.5px;   /* uppercase section eyebrows */
  --track-label: 1.6px;     /* uppercase field and card labels */
  --lh-body: 1.7;           /* paragraphs */
  --lh-normal: 1.6;         /* card and list text */
  --lh-snug: 1.5;           /* short lines: captions, chips, form text */
  --dur-fast: .15s; --dur: .2s; --dur-slow: .4s;
  /* Text sizes (user, 2026-10-21): writeups 16px; footer and minor text (form hints, input help) --fs-small;
   * disclaimers and illustrative-figure notes --fs-fine. dc-core.js snap() floors literal px at 16, so these are var()s. */
  --fs-small: 14px;
  --fs-fine: 12px;
}

/* Heading line spacing, by size (user, 2026-10-21). Heading font sizes follow the mockups one by one and stay as they
 * are; line spacing is one value per tier. Big figures (RM249, 64%) keep their own tight values. */
:root {
  --lh-display: 1.02;  /* page titles, 56px and up */
  --lh-heading: 1.08;  /* section headings, 28–55px */
  --lh-title: 1.2;     /* card and item titles, 20–27px */
}
.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 54px;
  padding: 12px 28px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}
.btn--primary { background: var(--brand-500); border-color: var(--brand-500); color: var(--white); }
.btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: var(--white); }
.btn--secondary { background: var(--white); border-color: var(--gray-200); color: var(--black); }
.btn--secondary:hover { border-color: var(--black); color: var(--black); }
.btn--on-dark { background: transparent; border-color: rgba(255, 255, 255, .25); color: var(--white); }
.btn--on-dark:hover { background: var(--white); border-color: var(--white); color: var(--brand-600); }   /* white fill, pink text (user 2026-10-21); set color here or site.css's a:hover turns the text pink on the dark photo */
.btn--glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: rgba(255, 255, 255, .4); }   /* glass button on a photo hero, beside the glass cards (Home mockup) */
.btn--tab { background: var(--white); border-color: var(--gray-200); color: var(--gray-600); }
.btn--tab:hover { border-color: var(--brand-500); }
.btn--tab[aria-pressed="true"] { background: rgba(244, 84, 205, .12); border-color: var(--brand-500); color: var(--black); }

.btn--sm { min-height: 42px; padding: 9px 22px; }
.btn--bar { flex: 1; min-width: 0; min-height: 0; padding: 13px 8px; white-space: nowrap; line-height: 1.2; }
.btn--block { display: flex; width: 100%; padding-inline: 8px; }

/* Number badges: every step or card number is a pink circle with the figure in white (client feedback 2026-10-15).
 *   <div class="num">3</div>     plain figure, no leading zero
 */
.num {
  box-sizing: border-box;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--brand-50);
  color: var(--brand-500);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}
/* the quote form's steps: solid pink, single digit, as in the mockup */
.num--solid { width: 34px; height: 34px; background: var(--brand-500); color: var(--white); font-size: 16px; }

/* Footer additions (client revamp 2026-10-15), ported from emitv2-seo: contact icons, social icons, licence logos */
.ft-ic{display:inline-flex;align-items:center;gap:8px}
.ft-ic svg{fill:currentColor;flex:none}
.ft-social{display:flex;gap:14px;margin-top:14px}
.ft-social a{color:var(--gray-600);display:block;line-height:0}
.ft-social a:hover{color:var(--brand-500)}
.ft-social svg{fill:currentColor}
.ft-accred{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:12px;max-width:340px;align-items:center}
@media (min-width:761px){.ft-accred{grid-template-columns:repeat(2,minmax(0,1fr));max-width:230px}}
.ft-accred a{display:block}
.ft-accred img{width:100%;height:auto;display:block}

/* ---- Photo heroes (user, 2026-10-20) ------------------------------------------------------------------------------
   --hero-shade: dark behind the copy on the left, clear on the right; phones (copy spans the width) get an even shade.
   .hero-full: on desktop the hero is at least the screen height under the header (128px), content centred; phones keep
   the natural height so the page's content is not a full screen away.
   .hero-strip: the glass strip of the Home hero (cards with dividers and a pink dash), shared by every hero that has one. */
/* hero glass (cards, strips and the glass button on a photo): one token for every hero, matched to the Home mockup */
:root { --glass-bg: rgba(20, 25, 30, 0.4); --glass-blur: blur(6px) saturate(0.5); }   /* user 2026-10-21, picked from a side-by-side (dev/glass-compare): darker tint at 0.4, saturate 0.5, blur 6px */
:root { --hero-shade: linear-gradient(90deg, rgba(10, 12, 20, 0.86) 0%, rgba(10, 12, 20, 0.7) 40%, rgba(10, 12, 20, 0.35) 60%, rgba(10, 12, 20, 0) 80%); }
@media (max-width: 860px) { :root { --hero-shade: linear-gradient(rgba(10, 12, 20, 0.62), rgba(10, 12, 20, 0.62)); } }
@media (min-width: 861px) {
  .hero-full { box-sizing: border-box; min-height: calc(100svh - 107px); display: flex; flex-direction: column; justify-content: center; }
  body:not(:has(.subrow)) .hero-full { min-height: calc(100svh - 66px); }   /* pages without the sub-nav row */
}
/* a centred wrapper inside the flex column would shrink to its content: keep it the full container width */
.hero-full > .sp-wrap, .hero-full > .fq-wrap { box-sizing: border-box; width: 100%; max-width: 1188px; }
.hero-strip { display: grid; grid-template-columns: repeat(var(--hero-strip-n, 3), minmax(0, 1fr)); border-radius: var(--radius-2xl); color: var(--white);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: var(--shadow-lg); }
.hero-strip > * { position: relative; padding: 24px 26px; color: var(--white); }
.hero-strip > * + *::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: rgba(255, 255, 255, 0.3); }
.hero-strip__dash { width: 26px; height: 2px; background: var(--brand-500); margin-bottom: 16px; }
.hero-strip__t { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; color: var(--white); }
.hero-strip__s { font-size: 16px; color: rgba(255, 255, 255, 0.82); line-height: var(--lh-snug); margin-top: 5px; }
a.hero-strip__item:hover .hero-strip__t { color: var(--brand-500); }
/* --cards: one glass card per item instead of one strip with dividers (Support mockup) */
.hero-strip--cards { gap: 16px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; border-radius: 0; }
.hero-strip--cards > * { border-radius: var(--radius-lg); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: var(--shadow-lg); }
.hero-strip--cards > * + *::before { content: none; }
.hero-strip__n { font-size: 18px; font-weight: 800; color: var(--brand-500); margin-bottom: 6px; }
@media (max-width: 860px) {
  .hero-strip { grid-template-columns: minmax(0, 1fr); }
  .hero-strip > * { padding: 16px 18px; }
  .hero-strip > * + *::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px; }
  .hero-strip--cards { gap: 10px; }
}

/* ---- FAQ accordion (2026-10-21): the short FAQ on index, calculator, green-rewards, solar-atap, support and technology.
   Was the same inline styles copied onto all 33 items. faq.html's full list is its own component (q.toggle rows). */
.faq-item { border-top: 1px solid var(--gray-200); }
.faq-q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.faq-sign { flex: none; font-size: 22px; font-weight: 400; color: var(--brand-500); transition: transform var(--dur); }
.faq-a { font-size: 16px; color: var(--gray-600); line-height: var(--lh-body); padding: 0 40px 22px 0; }
/* ===== Emit kit: tokens + shared component classes. Home and Technology both load this file. ===== */
/* colours, type, spacing, radius, shadow and glass tokens come from inputs/components.css (the design's, verbatim);
   only the kit's layout tokens live here */
:root{
  --maxw:1140px; --gutter:24px;
  --font:'Inter','Inter Fallback',system-ui,sans-serif;
}
html{scroll-behavior:smooth;margin:0}
/* as the design: html and body are one screen tall, so the body's 76px bottom padding (room for the mobile bar) sits inside
   that screen and never adds to the page; without it every page at <=900px was 76px taller than the original */
html,body{height:100%}
body{margin:0;background:var(--white);font-family:var(--font);color:var(--black);-webkit-font-smoothing:antialiased}
:where(a){color:var(--brand-500);text-decoration:none}
:where(a:hover){color:var(--brand-600)}
summary::-webkit-details-marker{display:none}
details[open] > summary > span:last-child{transform:rotate(45deg)}   /* as site.css: an open summary's own + turns to x (home FAQ); the page rules (fq-row, at-acc, tc-more) are more specific */
/* section links land under the header + sub-nav: chrome.tsx sets <html> scroll-padding-top to the header's measured height
   (as emit_html nav-offset.js); a fixed scroll-margin here would add to it */
.site{min-height:100%}
@media(max-width:900px){body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}}

/* ---------- Section / Wrap / headings ---------- */
.sec{border-bottom:1px solid var(--gray-100)}
.sec--cream{background:var(--sand-50);border-bottom-color:var(--gray-200)}
.sec--dark{background:var(--black);color:var(--white);border-bottom:0}
.sec--top{border-bottom:0;border-top:1px solid var(--gray-100)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--sec-y) var(--gutter)}   /* every section: one padding token (design 2026-10-21) */
.eyebrow{font-size:14px;font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--brand-500);margin-bottom:12px}
.eyebrow--14{margin-bottom:14px}.eyebrow--16{margin-bottom:16px}
.eyebrow--deep{color:var(--brand-600)}
.h1,.h2{margin:0}
.sec--none{border:0}
.h2{font-size:var(--fs-title);font-weight:800;letter-spacing:-1.6px;line-height:var(--lh-heading)}
.h2--104{line-height:1.04}.h2--106{line-height:1.06}.h2--11{line-height:1.1}
.h2--w640{max-width:640px}
.h1{font-size:clamp(36px,6.4vw,60px);font-weight:800;letter-spacing:-2.4px;line-height:.97}
.accent{color:var(--brand-500)}.accent-y{color:var(--sun-400)}
.kicker{font-size:var(--fs-subtitle);font-weight:800;letter-spacing:-.7px;line-height:1.2;color:var(--brand-500);margin-top:10px}
.kicker--18{font-size:18px;letter-spacing:-.5px;line-height:normal;margin-top:12px}
.body{font-size:16px;color:var(--gray-600);line-height:var(--lh-body);margin:16px 0 0;max-width:460px}
.body--wide{max-width:none}
.note{font-size:var(--fs-fine);color:var(--gray-400);line-height:var(--lh-snug)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--min,320px),100%),1fr));gap:52px;align-items:stretch}
.split--start{align-items:flex-start}.split--center{align-items:center}
@media(max-width:900px){.split{gap:30px}}
.photo{width:100%;object-fit:cover;border-radius:var(--radius-lg);display:block}
.secphoto{min-height:340px;height:100%}
@media(max-width:900px){.secphoto{min-height:0!important;height:200px!important}}

/* ---------- Grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--min,240px),100%),1fr));gap:var(--gap,14px);margin-top:var(--mt,0)}
.grid--stretch{align-items:stretch}

/* ---------- Buttons ---------- */
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Cards / lists / specs ---------- */
.card{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--pad,24px 26px);background:var(--white)}
.card--cream{border-color:var(--gray-200)}
.card--wash{border:1.5px solid var(--brand-500);background:var(--brand-50)}
.card__t{font-size:15px;font-weight:800;letter-spacing:-.3px}
.card--wash .card__t{color:var(--brand-600)}
.card__p{font-size:13px;color:var(--gray-600);line-height:1.6;margin-top:8px}
.bullets{display:flex;flex-direction:column;gap:var(--gap,7px);margin-top:var(--mt,16px)}
.bullets__i{display:flex;gap:9px;align-items:baseline}
.bullets__d{flex:0 0 auto;color:var(--brand-500);font-size:13px;line-height:1.5}
.bullets__t{font-size:13px;color:var(--gray-600);line-height:var(--lh,1.6)}
.rule{width:26px;height:2px;background:var(--brand-500);margin-bottom:var(--mb,16px)}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:10px;margin-top:12px}
.specs__i{border:1px solid var(--gray-200);border-radius:8px;padding:12px 14px}
.specs__k{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gray-400)}
.specs__v{font-size:15px;font-weight:800;letter-spacing:-.3px;margin-top:3px}
.specs--dark .specs__i{border-color:rgba(255,255,255,.2)}
.specs--dark .specs__k{color:rgba(255,255,255,.5)}
@media(max-width:900px){
  .specs{display:flex;flex-wrap:nowrap;gap:0;border:1px solid var(--gray-200);border-radius:12px;overflow:hidden}
  .specs__i{flex:1 1 0;min-width:0;border:none;border-radius:0;border-right:1px solid var(--gray-100);padding:12px 10px}
  .specs__i:last-child{border-right:none}
  .specs__k{font-size:9px;letter-spacing:.4px;overflow-wrap:anywhere}
  .specs__v{font-size:13px;overflow-wrap:anywhere}
  .specs--dark{border-color:rgba(255,255,255,.2)}
  .specs--dark .specs__i{border-right-color:rgba(255,255,255,.2)}
}
.stepbox{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:22px;background:var(--white)}
.stepbox--hi{border:1.5px solid var(--brand-200);background:var(--brand-50)}
.stepbox__n{font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--brand-500);margin-bottom:10px}
.stepbox--hi .stepbox__n{color:var(--brand-600)}
.stepbox--hi .card__t{color:var(--brand-500)}
.stepbox .card__p{margin-top:6px}

/* ---------- Header ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--gray-100)}
.nav:has(.subrow.barhide){margin-bottom:37px}
.nav__bar{padding:10px var(--hdr-x);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px}
.nav__left{display:flex;align-items:center;gap:clamp(16px,3vw,34px);flex-wrap:wrap}
.nav__logo{height:26px;display:block}
.navwide{display:flex;align-items:center;flex-wrap:wrap;gap:8px clamp(14px,2.4vw,28px);font-size:16px;font-weight:700}
.navwide a{letter-spacing:-.2px;padding-top:5px;padding-bottom:3px;border-bottom:2px solid transparent;color:var(--gray-400)}
.navwide a:hover{color:var(--gray-400)}
.navwide a[aria-current]{border-bottom-color:var(--brand-500);color:var(--black)}
.subrow{display:block;border-top:1px solid var(--gray-100)}
.subrow.barhide{display:none}
.subrow__in{padding:10px var(--hdr-x)}
.subnav{display:flex;align-items:center;gap:clamp(12px,2.2vw,26px);font-size:16px;font-weight:600;color:var(--gray-600);flex-wrap:wrap}
.subnav a{color:var(--gray-600)}
.subnav a:hover{color:var(--gray-600)}
/* the sub-nav link of the section in view (technology: of the selected tab) carries the menu's pink line; chrome.tsx
   useSubnav marks it and centres the links under the highlighted menu link (user, 2026-10-23; as emit_html site.css).
   The 8px padding holds the line inside the phones' sideways-scrolling row; the margin gives it back, same header height. */
.subrow .subnav{padding-block:8px;margin-block:-8px}
.subnav a{position:relative}
.subnav a[aria-current]{color:var(--black)}
.subnav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--brand-500)}
/* the sub-nav row shows on phones too (client: level-2 nav always visible); it scrolls sideways there */
@media(max-width:900px){.subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:16px;margin:0 calc(-1 * var(--hdr-x));padding:0 var(--hdr-x)}.subnav::-webkit-scrollbar{display:none}.subnav a{flex:none;white-space:nowrap}}
.navicon{box-sizing:border-box;width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;padding:0;border:1.5px solid var(--gray-200);border-radius:var(--radius);background:var(--white);color:var(--black);cursor:pointer}
.nav__right{display:flex;align-items:center;gap:12px}
.navlang{position:relative}
/* The switcher is an extra the design has no room for: on a multi-language site it sits left of the button (desktop) or of the menu button. */
.nav__right{position:relative}
@media(max-width:1499px){.nav__bar--langs .navwide,.nav__bar--langs .navcta{display:none}.nav__bar--langs .navburger{display:flex}}   /* the switcher sits in the bar beside the button: the full row needs ~1500px */
.navlang summary{list-style:none;display:flex;align-items:center;gap:6px;height:38px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:700;letter-spacing:-.2px;color:var(--gray-400);cursor:pointer;user-select:none}   /* the menu links' type, the button's height */
.navlang summary::-webkit-details-marker{display:none}
.navlang summary:hover,.navlang[open] summary{background:rgba(0,0,0,.06);color:var(--black)}
.navlang[open] summary svg:last-child{transform:rotate(180deg)}
.navlang__list{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:168px;margin:0;padding:6px;list-style:none;background:var(--white);border:1px solid #eaeaea;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.10)}
.navlang__list a{display:block;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:700;letter-spacing:-.2px;color:var(--gray-400)}
.navlang__list a:hover{background:#f6f6f6;color:var(--black)}
.navlang__list a[aria-current]{color:var(--black);font-weight:700}
.navburger{display:none}
/* the full nav (8 links) + CTA needs ~1350px: below 1360px the menu button takes over, so the CTA never drops to a second row */
@media(max-width:1359px){.navburger{display:flex}.navwide,.navcta{display:none}}
@media(min-width:1360px){.navwide{column-gap:clamp(12px,4vw - 40px,16px)}.nav__left{column-gap:20px}.navcta{padding:11px 16px}}
/* Two-part headings (Rich balance): each half kept together when it fits, balanced when it wraps; no word alone on a line */
.hbal{display:inline-block;text-wrap:balance}
/* "No word alone" only where the design has it: its p/li. Every class-bearing <p> in the kit is a <div> in the design (no
   pretty there), and pretty rewraps them; checked page by page against emit_html (2026-10-09). */
p:not([class]),li:not([class]){text-wrap:pretty}
.navlines{position:relative;display:block;width:18px;height:14px}
.navlines i{position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor}
.navlines i:nth-child(1){top:0}.navlines i:nth-child(2){top:6px}.navlines i:nth-child(3){top:12px}
.menusheet .navlines i{animation:.28s cubic-bezier(.2,.7,.2,1) .04s both}
.menusheet .navlines i:nth-child(1){animation-name:navX1}.menusheet .navlines i:nth-child(2){animation-name:navX2}.menusheet .navlines i:nth-child(3){animation-name:navX3}
@keyframes navX1{to{transform:translateY(6px) rotate(45deg)}}@keyframes navX2{to{opacity:0}}@keyframes navX3{to{transform:translateY(-6px) rotate(-45deg)}}
.menusheet.closing{animation:sheetUpOut .26s cubic-bezier(.4,0,.8,.4) forwards!important}
@keyframes sheetUpOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
.menusheet.closing .navlines i{animation-duration:.22s;animation-delay:0s}
.menusheet.closing .navlines i:nth-child(1){animation-name:navO1}.menusheet.closing .navlines i:nth-child(2){animation-name:navO2}.menusheet.closing .navlines i:nth-child(3){animation-name:navO3}
@keyframes navO1{from{transform:translateY(6px) rotate(45deg)}to{transform:none}}@keyframes navO2{from{opacity:0}to{opacity:1}}@keyframes navO3{from{transform:translateY(-6px) rotate(-45deg)}to{transform:none}}
@keyframes sheetDown{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.menusheet{animation:none!important}.menusheet .navlines i{animation-duration:1ms;animation-delay:0s}}

/* menu sheet */
.menusheet{position:fixed;inset:0;z-index:70;background:var(--white);overflow-y:auto;animation:sheetDown .28s cubic-bezier(.2,.7,.2,1)}
.menusheet__in{padding:10px var(--hdr-x) 40px}
.menusheet__top{display:flex;align-items:center;justify-content:space-between;min-height:45px}   /* the header's height, so the logo and the menu button do not jump when the menu opens */
.menusheet__list{display:flex;flex-direction:column;margin-top:22px}
.menusheet__link{padding:15px 4px;border-bottom:1px solid var(--gray-100);font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--black)}
.menusheet__link:hover{color:var(--black)}
.menusheet__link[aria-current]{color:var(--brand-500)}
.menusheet__sub{display:flex;flex-direction:column;gap:2px;padding:4px 0 14px 2px}
.menusheet__sub a{padding:9px 0 9px 14px;border-left:2px solid var(--gray-100);font-size:16px;font-weight:600;color:var(--gray-600)}
.menusheet__sub a:hover{color:var(--gray-600)}
.menusheet__cta{margin-top:22px}
.menusheet__row{display:flex;gap:10px;margin-top:10px}
.menusheet__row>a{flex:1}

/* thumb bar */
.thumbbar{position:fixed;left:0;right:0;bottom:0;z-index:60;gap:7px;align-items:stretch;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--gray-200);padding:10px 12px calc(10px + env(safe-area-inset-bottom));transition:transform var(--dur) ease}
.thumbbar.barhide{transform:translateY(calc(100% + 2px))}
.thumbbar{display:none}@media(max-width:900px){.thumbbar{display:flex}}

/* ---------- Registration (emit_html/_src/partials/quote-form.html; values as the design writes them) ---------- */
.reg{background:var(--brand-50);color:var(--black)}
.reg__in{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,4vw,56px) var(--gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:56px;align-items:start}
@media(max-width:900px){.reg__in{padding-top:44px;padding-bottom:44px}}
.reg__intro{font-size:16px;color:var(--gray-600);line-height:var(--lh-body);margin-top:18px}
.reg__steps{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.reg__step{display:flex;gap:14px;align-items:flex-start}
.reg__t{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal)}
.reg__talk{font-size:16px;color:var(--gray-600);line-height:var(--lh-body);margin-top:32px;padding-top:24px;border-top:1px solid var(--gray-200)}
.reg__talk div{margin-top:12px}
.roi{background:var(--white);color:var(--black);border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:clamp(26px,3.2vw,38px)}
.roi__form{display:flex;flex-direction:column;gap:16px}
.roi__title{font-size:20px;font-weight:800;letter-spacing:-.6px}
.roi input,.roi select{box-sizing:border-box;width:100%;font-family:'Inter',system-ui,sans-serif;font-size:16px;color:var(--black);background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:13px 14px;outline:none;appearance:none}
.roi select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.roi input:focus,.roi select:focus{border-color:var(--brand-500)}
.roi input::placeholder{color:var(--gray-300)}
.roi input[type=radio],.roi input[type=checkbox]{appearance:auto;-webkit-appearance:auto;width:16px;height:16px;flex:none;padding:0;border:none;border-radius:0;accent-color:var(--brand-500)}
.roi__lab{display:block;font-size:14px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gray-600);margin-bottom:7px}
.roi__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.roi__grid{grid-template-columns:1fr}}
.roi__hint{font-size:var(--fs-small);color:var(--gray-400);margin-top:8px}
.roi__pills{display:flex;gap:8px;flex-wrap:wrap}
.roi__pill{flex:1;min-width:92px;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:12px 10px;font-size:16px;font-weight:600;color:var(--black);cursor:pointer;margin:0}
.roi__pill:hover{border-color:var(--brand-500)}
.roi__pill:has(input:checked){border-color:var(--brand-500);background:var(--brand-50)}
.roi__consent{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin:4px 0 0;cursor:pointer}
.roi__consent input{margin:2px 0 0}
.roi__submit{margin-top:4px}
.roi__submit:disabled{opacity:.6;cursor:default}
.roi__fine{font-size:var(--fs-small);color:var(--gray-400);text-align:center}

/* ---------- FAQ ---------- */
.faq{margin-top:28px}
.faq details{border-top:1px solid var(--gray-200)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:16px;font-weight:800;letter-spacing:-.3px}
.faq summary span:last-child{flex:none;font-size:22px;font-weight:400;color:var(--brand-500);transition:transform .18s}
.faq details[open] summary span:last-child{transform:rotate(45deg)}
.faq__a{font-size:14px;color:var(--gray-600);line-height:1.7;padding:0 40px 22px 0}
.faq__a>div{margin-top:var(--ag,10px)}
.faq__a ul{margin:10px 0 0;padding-left:18px}
.faq__a a{color:var(--brand-500);font-weight:700}
.faq__end{border-top:1px solid var(--gray-200)}
.faq__allrow{font-size:14px;margin-top:22px}
.faq__allrow a{font-weight:700;color:var(--brand-500)}
.faq__all{display:inline-block;margin-top:22px;font-size:14px;font-weight:700;color:var(--brand-500)}

/* ---------- Footer (emit_html/_src/partials/footer.html; its site.css rules, icons/socials/logos come from components.css) ---------- */
.ft-grid{max-width:var(--maxw);margin:0 auto;padding:var(--sec-y) var(--gutter) 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:32px;text-align:left}
.ft-logo{height:24px;display:block}
.ft-h{font-size:14px;font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--black)}
.ft-blurb,.ft-lic,.ft-disclaimer,.ft-copy{color:var(--gray-400)}
.ft-blurb,.ft-addr,.ft-lic,.ft-links{font-size:var(--fs-small)}
.ft-blurb,.ft-addr,.ft-lic,.ft-disclaimer{line-height:var(--lh-body)}
.ft-blurb{margin-top:14px}
.ft-links{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.ft-links a,.ft-addr{color:var(--gray-600)}
.ft-links a:hover{color:var(--brand-500)}
.ft-addr{margin-top:12px}
.ft-lic{margin-top:10px}
.ft-base{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) 28px}
.ft-disclaimer{font-size:var(--fs-fine);border-top:1px solid var(--gray-100);padding-top:18px}
.ft-copy{font-size:var(--fs-small);margin-top:14px}

/* ---------- Dark split ("Why Emit" / "Backed by Emit") ---------- */
.dark{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--min,320px),100%),1fr));gap:52px;align-items:center}
@media(max-width:900px){.dark{gap:30px}}
.dark .body{color:rgba(255,255,255,.6)}
.dark .h2{line-height:1.1}
bd-island{display:contents}
/* Text + photo/form splits: two columns only above 900px (the nav breakpoint), not wherever two 320px columns fit. Last in the file, so it wins over each grid's own auto-fit */
@media(max-width:900px){.split,.dark,.reg__in{grid-template-columns:minmax(0,1fr)}}

/* hero title + intro (user, 2026-10-23): every hero title wraps within one cap; the intro wraps at the title's width
   (line-balance.js sizes .hero-txt to the title's longest line); phones use the full width */
.hero-txt{width:fit-content;max-width:min(820px,100%)}
.hero-txt>.hero-desc{contain:inline-size;max-width:none;text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 12px rgba(0,0,0,.35)}
@media (max-width:620px){.hero-txt{width:auto!important}}

/* ---------- Header width, centred links, breadcrumb, phone buttons (client, 2026-10-23; same as emit_html site.css) ---------- */
/* the header spans the screen like the current emitsolar.com, half the old space above and below: bar 65px (was 86px) */
:root{--hdr-x:clamp(24px,20vw - 228px,60px)}   /* 60px from 1440px; narrower between, so the 8-link nav fits one row from 1360px */
/* desktop: links centred in the bar (logo left, button right); the sub-nav links centred under them */
@media(min-width:1360px){
  .nav__bar:not(.nav__bar--langs){display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);column-gap:12px}
  .nav__bar:not(.nav__bar--langs) .nav__left{display:contents}
  .nav__bar:not(.nav__bar--langs) .nav__left>a{grid-column:1;justify-self:start}
  .nav__bar:not(.nav__bar--langs) .navwide{grid-column:2;flex-wrap:nowrap}
  .nav__bar:not(.nav__bar--langs) .navcta{grid-column:3;justify-self:end}
  .nav__bar:not(.nav__bar--langs) .navburger{display:none}
}   /* the sub-nav starts under the menu's first link (chrome.tsx useSubnav; user's sample, 2026-10-23) */
@media(min-width:1500px){
  .nav__bar--langs{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);column-gap:12px}
  .nav__bar--langs .nav__left{display:contents}
  .nav__bar--langs .nav__left>a{grid-column:1;justify-self:start}
  .nav__bar--langs .navwide{grid-column:2;flex-wrap:nowrap}
  .nav__bar--langs .nav__right{grid-column:3;justify-self:end}
  .nav__bar--langs .navburger{display:none}
}
/* "Home › Page" above the hero eyebrow or H1 on every page but home (kit/crumbs.tsx); heroes are photos, .crumbs--on-light for legal */
.crumbs{font-size:var(--fs-small);line-height:1.4;color:rgba(255,255,255,.75);margin:0 0 40px}
@media(max-width:760px){.crumbs{margin-bottom:28px}}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs li+li::before{content:"";display:inline-block;width:5px;height:5px;margin:0 8px 1px 0;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--brand-500)}
.crumbs [aria-current]{color:var(--white);font-weight:600}
.crumbs--on-light{color:var(--gray-400)}
.crumbs--on-light [aria-current]{color:var(--black)}
/* phones: every content button is the full column width whatever its label; a pair in one row splits it evenly */
@media(max-width:620px){.btn:not(.btn--tab):not(.btn--sm):not(.btn--bar){box-sizing:border-box;width:100%}}
/* the breadcrumb sits at the top of the hero, 24px under the header (16px on phones); the hero's text stays centred without it */
.hero-full{position:relative}.hero-full .crumbs{position:absolute;top:24px;margin:0}
@media(max-width:860px){.hero-full .crumbs{top:16px}}
/* inner-page heroes: one top/bottom space (each kept its mockup's own): phones 60px top (breadcrumb + 24px gap) and --sec-y below,
   desktop 72px both with the text centred between; the home hero has no breadcrumb and keeps its own */
.hero-full:has(.crumbs){padding-top:72px!important;padding-bottom:72px!important}
@media(max-width:860px){.hero-full:has(.crumbs){padding-top:60px!important;padding-bottom:var(--sec-y)!important}}
/* every hero sits on a photo: all its text carries the intro's soft shadow so it stays readable on light patches
   (2026-10-23, as the HTML site); text-shadow inherits, so buttons and form fields switch it off */
.hero-full{text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 12px rgba(0,0,0,.35)}
.hero-full .btn,.hero-full input,.hero-full select,.hero-full textarea,.hero-full button,.hero-full .hm-calc{text-shadow:none}   /* .hm-calc: Home's light calculator card, dark text */
/* ===== Home page sheet: only what Home alone uses. Ported from emit_html/index.html (its inline styles, hm-css and the page rules
   in assets/site.css) with every value on a token from inputs/components.css. ===== */

/* ---------- section band: full-width background + the 1140px column ---------- */
.hm-band--gray{background:var(--gray-100)}
.hm-band--pink{background:var(--brand-50)}
.hm-band--dark{background:var(--black);color:var(--white)}
.hm-in{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,4vw,56px) var(--gutter)}   /* the design's own clamp: 40px at 1000px, 56px from 1400px */
@media(max-width:900px){.hm-in{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}}

/* ---------- section header: eyebrow, title, pink subtitle, description ---------- */
.hm-eb{font-size:14px;font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--brand-500);margin-bottom:12px}
.hm-eb--14{margin-bottom:14px}
.hm-t{font-size:var(--fs-title);font-weight:800;letter-spacing:-1.6px;line-height:var(--lh-heading)}
.hm-t--display{line-height:var(--lh-display)}
.hm-sub{font-size:var(--fs-subtitle);font-weight:800;letter-spacing:-.7px;line-height:1.2;color:var(--brand-500);margin-top:10px}
.hm-sub--12{line-height:var(--lh-heading);margin-top:12px}
.hm-p{font-size:16px;color:var(--gray-600);line-height:var(--lh-body);margin-top:16px}
.hm-p--0{margin-top:0}.hm-p--8{margin-top:8px}.hm-p--14{margin-top:14px}
.hm-more{margin-top:22px}
.hm-prods+.hm-more{margin-top:30px}
.hm-more--white{background:var(--white)}
.hm-dots{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.hm-dots__i{display:flex;gap:9px;align-items:baseline}
.hm-dots__d{flex:0 0 auto;color:var(--brand-500);font-size:16px;line-height:var(--lh-snug)}
.hm-dots__t{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal)}

/* ---------- hero: photo, shade, copy + glass calculator, glass trust strip ---------- */
.hm-hero{background:var(--white);position:relative}
.hm-hero__bg{position:relative;overflow:hidden;background:var(--black)}
.hm-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.hm-hero__shade{position:absolute;inset:0;background:var(--hero-shade)}
.hm-glass{border-radius:var(--radius-2xl);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.4);box-shadow:var(--shadow-lg)}
.hm-hero .hm-calc{background:rgba(248,248,248,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--black);border-color:rgba(255,255,255,.7)}   /* calculator card: white glass, light blur, dark text; the trust strip keeps the dark glass */
.hm-split{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,58px) var(--gutter) clamp(28px,3vw,40px);position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(30px,4.5vw,54px);align-items:center}
@media(max-width:820px){.hm-split{grid-template-columns:1fr;align-items:start}}
.hm-split>bd-island>div:first-child{text-shadow:0 2px 14px rgba(0,0,0,.45)}   /* shadow under the copy so it holds on the photo */
.hm-split .btn{text-shadow:none;box-shadow:var(--shadow-on-photo)}
.hm-eyebrow{font-size:14px;font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--brand-500)}
.hm-h1{font-size:clamp(36px,6.4vw,60px);font-weight:800;letter-spacing:-2.4px;line-height:.97;color:var(--white);margin-top:clamp(18px,2.6vw,26px);text-wrap:pretty}
.hm-lead{font-size:16px;color:rgba(255,255,255,.86);line-height:var(--lh-normal);margin-top:20px}
.hm-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hm-calc{padding:clamp(24px,3vw,34px)}
.hm-calc__k{font-size:14px;font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--gray-600);margin-bottom:12px}
.hm-calc__big{font-size:clamp(38px,5.4vw,50px);font-weight:800;letter-spacing:-2.2px;line-height:1;color:var(--brand-500)}
.hm-calc__big small{font-size:20px;font-weight:600;letter-spacing:-.4px;color:var(--black)}
.hm-calc__sub{font-size:16px;color:var(--gray-600);margin-top:10px}
.hm-calc__sub b{color:var(--black);font-weight:700}
.hm-calc__bar{display:flex;height:10px;border-radius:var(--radius-full);overflow:hidden;background:var(--gray-300);margin-top:22px}
.hm-calc__bar i{display:block;height:100%;background:var(--brand-500)}
.hm-calc__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(128px,100%),1fr));gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid var(--gray-300)}
.hm-calc__v{font-size:20px;font-weight:800;letter-spacing:-.7px;color:var(--black);white-space:nowrap}
.hm-calc__v small{font-size:16px;font-weight:600;letter-spacing:-.3px}
.hm-calc__l{font-size:16px;color:var(--gray-600);margin-top:2px}
.hm-calc__pick{margin-top:22px;padding-top:20px;border-top:1px solid var(--gray-300)}
.hm-calc__pickh{font-size:16px;font-weight:700;color:var(--black);margin-bottom:10px}
.hm-calc__chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(80px,100%),1fr));gap:8px}
.hm-chip{text-align:center;padding:13px 6px;border-radius:var(--radius);font-family:var(--font);font-size:16px;font-weight:700;cursor:pointer;line-height:normal;background:transparent;color:var(--gray-600);border:1.5px solid var(--gray-300)}
.hm-chip:hover{border-color:var(--brand-500)}
.hm-chip[aria-pressed=true]{background:var(--brand-50);border-color:var(--brand-500);color:var(--black)}   /* selected bill: light pink, dark text */
.hm-calc__fine{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:14px}
.hm-trustwrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(28px,3vw,36px);position:relative;z-index:2}   /* inside the hero photo */
.hm-trust{display:grid;grid-template-columns:repeat(3,1fr)}
.hm-trust>*{position:relative;padding:24px 26px}
.hm-trust>:first-child{padding:24px 26px 24px 28px}
.hm-trust>:last-child{padding:24px 28px 24px 26px}
.hm-trust__dash{width:26px;height:2px;background:var(--brand-500);margin-bottom:16px}
.hm-trust__t{font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--white)}
.hm-trust__s{font-size:16px;color:rgba(255,255,255,.82);line-height:var(--lh-snug);margin-top:5px}
@media(min-width:641px){.hm-trust>*+*::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:1px;background:rgba(255,255,255,.3)}}   /* dividers inset top and bottom */
@media(max-width:900px){.hm-trust>*+*{border-top:1px solid rgba(255,255,255,.2)}}
@media(max-width:820px){   /* three small cards side by side: the design's .herotrio phone rules */
  .hm-trust{gap:8px}
  .hm-trust>*,.hm-trust>:first-child,.hm-trust>:last-child{padding:14px 12px}
  .hm-trust__dash{width:20px;margin-bottom:10px}
  .hm-trust__t{letter-spacing:-.3px;line-height:1.25;font-size:16px}
  .hm-trust__s{margin-top:5px}
}
@media(max-width:640px){.hm-trust{grid-template-columns:1fr;gap:10px}.hm-trust>*,.hm-trust>:first-child,.hm-trust>:last-child{padding-left:0}}
@media(max-width:600px){.hm-trust>*,.hm-trust>:first-child,.hm-trust>:last-child{padding:16px 18px}}

/* ---------- two columns: text + picture ---------- */
.hm-split2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:52px;align-items:stretch}
@media(max-width:900px){.hm-split2{gap:30px;grid-template-columns:minmax(0,1fr)}}   /* two columns only above the nav breakpoint (site.css), not wherever two 320px columns fit */
@media(min-width:900px){.hm-maintain{gap:20px}}
@media(min-width:901px){.hm-maintain{grid-template-columns:1.63fr 1fr}}   /* the design's rule is min-width:900px, but at exactly 900 its one-column rule (site.css, higher specificity) wins the columns; the 20px gap still applies */
.hm-photo{width:100%;object-fit:cover;border-radius:var(--radius-lg);display:block}
.hm-photo--pay{height:auto;min-height:0;aspect-ratio:421/215;align-self:center}   /* about 2:1, as in the mockup */
.hm-photo--care{height:100%;min-height:340px}
@media(max-width:900px){.hm-photo--pay,.hm-photo--care{min-height:0;height:200px}}

/* ---------- comparison of payment options ---------- */
.hm-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:14px;margin-top:24px;align-items:stretch}
.hm-cmp__c{background:var(--gray-100);border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:26px 28px}
.hm-cmp__c--hi{background:var(--brand-50);border:1.5px solid var(--brand-500);display:flex;flex-direction:column}
.hm-cmp__t{font-size:18px;font-weight:800;letter-spacing:-.4px}
.hm-cmp__tag{font-size:14px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gray-400);margin-top:4px}
.hm-cmp__c--hi .hm-cmp__tag{color:var(--brand-600)}
.hm-cmp__list{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.hm-cmp__i{display:flex;gap:10px;align-items:baseline}
.hm-cmp__m{color:var(--brand-500);font-weight:800;font-size:16px}
.hm-cmp__x{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal)}
.hm-cmp__c--hi .hm-cmp__x{color:var(--black);font-weight:600}
.hm-cmp__btn{margin-top:24px}
@media(max-width:860px){.hm-cmp{grid-template-columns:1fr}.hm-cmp__c{padding:18px 16px}}

/* ---------- components: three product cards ---------- */
.hm-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px;align-items:stretch}
@media(max-width:900px){.hm-prods{grid-template-columns:1fr}}
.hm-prod{border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);padding:32px}   /* text-only (client mockup 2026-10-22) */
.hm-prod__k{font-size:14px;font-weight:800;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--brand-500)}
.hm-prod__n{font-size:24px;font-weight:800;letter-spacing:-.6px;line-height:var(--lh-title);margin-top:8px}
.hm-prod .hm-dots{gap:10px;margin-top:20px}
@media(max-width:480px){.hm-prod{padding:24px}}

/* ---------- SolarCare ---------- */
.hm-care{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.hm-care>div{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:16px 18px}
.hm-care__t{font-size:18px;font-weight:800;letter-spacing:-.2px}
.hm-care__p{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:4px}
@media(min-width:1100px){.hm-care{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hm-care>div{padding:16px 14px}}
@media(max-width:860px){.hm-care{display:grid;grid-template-columns:repeat(3,1fr)}.hm-care>div{padding:14px 12px}}
@media(max-width:640px){.hm-care{grid-template-columns:1fr;gap:10px}}

/* ---------- included as standard ---------- */
.hm-std{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin-top:clamp(36px,4.5vw,48px);align-items:stretch}
.hm-std__c{background:var(--white);border:1px solid var(--brand-200);border-radius:var(--radius-lg);padding:24px 26px 26px;display:flex;flex-direction:column}
.hm-std__c .num{margin-bottom:6px}
.hm-std__t{font-size:18px;font-weight:800;letter-spacing:-.3px}
.hm-std__c .hm-dots{gap:6px;margin-top:7px}

/* ---------- journey ---------- */
.hm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:860px){.hm-tiles{grid-template-columns:1fr}}
.hm-tile{border:1px solid var(--brand-200);background:var(--white);border-radius:var(--radius-lg);padding:22px 24px;display:flex;align-items:center;gap:14px}
.hm-tile__n{min-width:1.25em;text-align:center;font-size:clamp(44px,5.5vw,70px);font-weight:800;letter-spacing:-2px;line-height:1;color:var(--brand-500)}
.hm-tile__t{font-size:18px;font-weight:800;letter-spacing:-.3px}
.hm-tile__p{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:3px}
.hm-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:36px;align-items:stretch}
@media(max-width:1000px){.hm-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.hm-steps{grid-template-columns:1fr}}
.hm-step{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:20px 18px}
.hm-step--hi{border-width:1.5px;background:var(--brand-50)}
.hm-step .num{margin-bottom:14px}
.hm-step__t{font-size:18px;font-weight:800;letter-spacing:-.3px}
.hm-step__p{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:6px}
.hm-journey__cta{margin-top:32px}

/* ---------- card sliders: installations + reviews (scroll-snap track, arrows in the "reviews" island) ---------- */
.hm-sl__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.hm-sl__btns{display:flex;gap:8px;flex:0 0 auto}
.hm-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.hm-track::-webkit-scrollbar{display:none}
.hm-track>*{box-sizing:border-box;flex:0 0 calc((round(100%, 1px) - 2.24px) / 1.16);scroll-snap-align:start;margin:0}   /* 1.16 cards and a peek of the next, 2 from 600px, 3 from 861px (Swiper's breakpoints); round(): Swiper sizes slides from the track's clientWidth, a whole pixel */
@media(min-width:600px){.hm-track>*{flex-basis:calc((round(100%, 1px) - 14px) / 2)}}
@media(min-width:861px){.hm-track>*{flex-basis:calc((round(100%, 1px) - 28px) / 3)}}
.hm-track--installs{margin-top:12px;padding:24px 0 52px;margin-bottom:-46px}   /* room for the hover lift and shadow, which overflow would clip; margins cancel it */
.hm-track--reviews{margin-top:36px}
.hm-inst{border:1px solid var(--gray-100);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);transition:transform var(--dur) ease,box-shadow var(--dur) ease}
.hm-inst:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.hm-inst__media{position:relative}
.hm-inst__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.hm-inst__loc{position:absolute;left:14px;bottom:14px;right:14px;background:rgba(12,12,18,.78);color:var(--white);font-size:16px;line-height:1.35;padding:10px 14px;border-radius:var(--radius);width:fit-content;max-width:calc(100% - 28px)}
.hm-inst__cap{padding:18px 20px 20px}
.hm-inst__row{display:flex;align-items:baseline;gap:10px}
.hm-inst__big{font-size:36px;font-weight:800;letter-spacing:-1.6px;line-height:1;color:var(--brand-500)}
.hm-inst__lab{font-size:16px;color:var(--gray-600)}
.hm-ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.hm-ba>div{background:var(--gray-100);border-radius:var(--radius);padding:10px 12px;text-align:center}
.hm-ba__k{font-size:14px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gray-600)}
.hm-ba__v{font-size:22px;font-weight:800;letter-spacing:-.6px;margin-top:2px}
.hm-ba__v--old{color:var(--gray-400)}
.hm-ba__u{font-size:16px;color:var(--gray-400)}
.hm-fine{font-size:var(--fs-fine);color:var(--gray-400);line-height:var(--lh-normal);margin-top:20px;font-style:italic}
.hm-track .hm-rev{margin:16px 0}   /* the figure's own margin survives in the design (Swiper slide) */
.hm-rev{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:26px 28px;display:flex;flex-direction:column}
.hm-rev__q{font-family:Georgia,'Times New Roman',serif;font-size:72px;font-weight:700;color:var(--brand-500);line-height:1;height:34px;overflow:visible}
.hm-rev blockquote{margin:10px 0 0;font-size:16px;line-height:var(--lh-normal);font-style:italic;flex:1 1 0%;color:var(--gray-400)}
.hm-rev__stars{color:var(--sun-500);font-size:18px;letter-spacing:3px;line-height:1;margin-top:16px}
.hm-rev figcaption{font-size:16px;font-weight:700;letter-spacing:-.2px;margin-top:16px;padding-top:16px;border-top:1px solid var(--gray-100);color:var(--gray-400)}
.hm-rated{font-size:14px;color:var(--gray-600);line-height:var(--lh-normal)}
.hm-rated__a{color:var(--black);font-weight:700;text-decoration:none}

/* ---------- why: dark split ---------- */
.hm-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:52px;align-items:center}
@media(max-width:900px){.hm-why{gap:30px;grid-template-columns:minmax(0,1fr)}}
@media(min-width:901px){.hm-why{grid-template-columns:minmax(500px,1.6fr) minmax(0,1fr)}}   /* the client's layout: text column keeps 500px, the photo takes the rest */
.hm-why .hm-t .accent-y{color:var(--sun-400)}
.hm-why__p{font-size:16px;color:rgba(255,255,255,.6);line-height:var(--lh-body);margin-top:16px}
.hm-why__p--next{margin-top:0}
.hm-pillars{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin-top:32px}
@media(max-width:640px){.hm-pillars{grid-template-columns:1fr}}
.hm-pillar{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;border-top:2px solid var(--brand-500);padding-top:14px}
.hm-pillar--full{grid-column:1/-1}
.hm-pillar__big{align-self:end;font-size:clamp(22px,3.2vw,28px);font-weight:800;letter-spacing:-1.1px;line-height:1;color:var(--sun-400)}
.hm-pillar--first .hm-pillar__big{max-width:71.45%}   /* "Backed By Time" as a share of "More Than An Installer": wraps exactly when that title wraps */
.hm-pillar__t{font-size:16px;font-weight:800;letter-spacing:-.3px;margin-top:8px;align-self:start}
.hm-pillar__p{font-size:16px;color:rgba(255,255,255,.55);line-height:var(--lh-normal);margin-top:5px}
.hm-why__photo{width:100%;height:100%;min-height:320px;max-height:460px;object-fit:cover;object-position:80% center;border-radius:var(--radius-lg);display:block}

/* ---------- FAQ ---------- */
.hm-faq{margin-top:28px}
.hm-faq .faq-a>div{margin-top:var(--ag,10px)}
.hm-faq .faq-a ul{margin:10px 0 0;padding-left:18px}
.hm-faq .faq-a a{color:var(--brand-500);font-weight:700}
.hm-faq__end{border-top:1px solid var(--gray-200)}
.hm-faq__all{display:inline-block;margin-top:22px;font-size:16px;font-weight:700;color:var(--brand-500)}
.hm-faq__row{font-size:var(--fs-small);margin-top:22px}
.hm-faq__row a{font-weight:700;color:var(--brand-500)}
.revbtn{display:inline-grid;place-items:center;padding:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--gray-200);background:var(--white);color:var(--black);cursor:pointer;transition:border-color var(--dur)}
.revbtn svg{display:block}
.revbtn:hover:not(:disabled){border-color:var(--brand-500)}
.revbtn:disabled{opacity:.35;cursor:default}
.hm-note{margin-top:28px;background:var(--sand-50);border:1px solid var(--gray-200);border-left:4px solid var(--sun-400);border-radius:var(--radius-md);padding:20px 24px}
.hm-note__t{font-size:20px;font-weight:800;letter-spacing:-.5px}
.hm-note__b{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:6px}
.hm-note__b a{color:var(--brand-500);font-weight:700}
/* ===== Technology page sheet (emit_html/technology.html's own styles, on the design's tokens). The kit supplies the rest. ===== */
/* "Roof to grid" widget: keeps the client's own palette, as in the design */
.eco{--e-bg:#FFFFFF;--e-ink:#1B1F2A;--e-muted:#5A6172;--e-line:#E4E6EC;--e-card:#F7F7FA;--e-brand:#F454CD;--e-brand-ink:#A3157E;--e-brand-soft:#FDEAF8;--e-grid:#2F6FDB;--e-focus:#2F6FDB;font-family:inherit;color:var(--e-ink);font-size:16px;line-height:1.55}
.eco *,.eco *::before,.eco *::after{box-sizing:border-box}
.eco .eco-controls{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 12px}
.eco .eco-seg{display:inline-flex;background:var(--e-card);border:1px solid var(--e-line);border-radius:999px;padding:3px}
.eco .eco-seg button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;font-weight:700;font-size:16px;color:var(--e-muted)}
.eco .eco-seg button[aria-checked="true"]{background:var(--e-ink);color:#fff}
.eco .eco-seg button:focus-visible,.eco .node:has(.node__hit:focus-visible) rect.box{outline:3px solid var(--e-focus);outline-offset:3px}
.eco .node{outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.eco .eco-seg svg{width:16px;height:16px}
.eco .eco-layout{display:grid;grid-template-columns:1fr;gap:12px}
.eco .eco-stage{border-radius:20px;padding:24px 18px;position:relative;overflow:hidden;transition:background .6s ease;background:#FFF5D9;--n-fill:#FFFFFF;--n-ink:#1B1F2A;--n-sub:#6B6450;--n-dim:.38;--wire:#E0D3AE;--arrow:#1B1F2A;--home-fill:#EEEEEE;--home-stroke:#A8A8A8;--tnb-fill:#EAF1FD}
.eco .eco-stage.night{background:#141B33;--n-fill:#1F2845;--n-ink:#EEF1FA;--n-sub:#C3CBE6;--wire:#2E3A60;--arrow:#EEF1FA;--home-fill:#2E3448;--home-stroke:#7C849C;--tnb-fill:#1D2B4D}
.eco .eco-status{display:flex;gap:12px;align-items:center;margin:0 0 10px;min-height:44px}
.eco .eco-sky{flex:none;width:36px;height:36px}
.eco .eco-status p{margin:0;font-size:16px;font-weight:700;color:var(--n-ink)}
.eco .eco-status small{display:block;font-weight:500;color:var(--n-sub);font-size:16px;margin-top:2px}
.eco .diagram{width:100%;height:auto;display:block}
.eco .d-narrow{display:none;max-width:420px;margin:0 auto}
.eco .d-wide{max-width:1100px;margin:0 auto}
.eco .node{cursor:pointer}
.eco .node__hit{display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.eco .node rect.box{fill:var(--n-fill);stroke-width:1.5;transition:fill .4s,stroke .4s,opacity .4s}
.eco .node.emit rect.box{stroke:var(--e-brand)}
.eco .node.addon rect.box{stroke-dasharray:6 4}
.eco .node.home rect.box{fill:var(--home-fill);stroke:var(--home-stroke)}
.eco .node.tnb rect.box{fill:var(--tnb-fill);stroke:var(--e-grid)}
.eco .node .t{fill:var(--n-ink);font-weight:700;font-size:18px}
.eco .node .s{fill:var(--n-sub);font-weight:500;font-size:16.5px}
.eco .node.off{opacity:var(--n-dim)}
.eco .node.sel rect.box{stroke-width:3;filter:url(#eco-sel-shadow)}
.eco .node:hover rect.box{stroke-width:2.4}
.eco .wire{stroke:var(--wire);stroke-width:2.5;fill:none;stroke-linecap:round;transition:stroke .4s}
.eco .flow{fill:none;stroke:var(--arrow);stroke-width:2.5;stroke-linecap:round;opacity:0;transition:opacity .4s}
.eco .flow.on{opacity:1}
.eco .flow.thin{stroke-dasharray:5 4}
.eco .ah{fill:var(--arrow)}
.eco .eco-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin:12px 0 0;padding:0;list-style:none;font-size:16px;font-weight:600;color:var(--n-sub)}
.eco .eco-legend li{display:flex;align-items:center;gap:8px}
.eco .eco-legend i{display:inline-block;width:26px;height:16px;border-radius:4px;border:1.5px solid}
.eco .lg-emit{border-color:var(--e-brand)!important;background:var(--n-fill)}
.eco .lg-addon{border-color:var(--e-brand)!important;border-style:dashed!important;background:var(--n-fill)}
.eco .lg-home{border-color:var(--home-stroke)!important;background:var(--home-fill)}
.eco .eco-panel{background:var(--e-card);border:1px solid var(--e-line);border-radius:16px;padding:18px 20px}
.eco .eco-panel h3{margin:0 0 6px;font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.eco .eco-panel p{margin:0 0 12px;color:var(--e-muted);font-size:16px}
.eco .eco-when{display:inline-flex;gap:8px;flex-wrap:wrap}
.eco .eco-chip{font-size:16px;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--e-bg);border:1px solid var(--e-line)}
.eco .eco-chip.emit{color:var(--e-brand-ink);background:var(--e-brand-soft);border-color:transparent}
@media (max-width:1100px){.eco .d-wide{display:none}.eco .d-narrow{display:block}.eco .eco-stage{padding:20px 8px;border-radius:16px}}
/* Phones: the diagram card's content, its boxes and the detail panel's text all start 20px in. The narrow diagram draws
   its boxes 10 viewBox units from its own edge, so it is widened past the padding by that much (10/360 of its width);
   the panel's 19px + its 1px border makes the same 20. */
@media (max-width:640px){.eco .eco-stage{padding:20px}.eco .eco-panel{padding:18px 19px}.eco .d-narrow{max-width:none;width:calc(100% + 18px);margin-inline:-9px}}
/* Phones: Roof to grid folds behind one bar, as before the revamp; desktop always shows it */

/* Phones: Roof to grid folds behind one bar, as before the revamp; desktop always shows it */
.tc-sys{display:none}
@media (max-width:860px){
  .tc-sys{display:flex;align-items:center;gap:10px;width:100%;margin-top:24px;padding:22px;border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--sand-50);color:var(--brand-600);font:inherit;text-align:left;cursor:pointer}
  .tc-sys__t{display:block;font-size:16px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--brand-600)}
  .tc-sys__h{display:block;margin-top:4px;font-size:var(--fs-fine);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gray-400)}
  .tc-sys svg{flex:none;margin-left:auto;transition:transform var(--dur-fast)}
  .tc-sys[aria-expanded="true"] svg{transform:rotate(180deg)}
  .tc-sys[aria-expanded="false"] + .eco{display:none}
  .tc-sys + .eco{margin-top:16px}
}

/* sections */
.tc-wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.tc-sec{padding:var(--sec-y) 0}
.tc-sec--grey{background:var(--gray-100);margin-top:0}
.tc-eyebrow{font-size:14px;font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--brand-500);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tc-pill{font-size:var(--fs-fine);font-weight:700;letter-spacing:1.2px;color:var(--brand-600);border:1.5px dashed var(--brand-500);border-radius:var(--radius-full);padding:1px 8px}   /* 25% smaller than the 16px label (client 2026-10-23) */
.tc-h1{font-size:clamp(36px,6.4vw,70px);font-weight:800;letter-spacing:-2.4px;line-height:var(--lh-display);margin:14px 0 0;color:var(--white);max-width:820px}
.tc-h1 span{color:var(--brand-500)}
.tc-h2{font-size:clamp(28px,5vw,44px);font-weight:800;letter-spacing:-1.4px;line-height:var(--lh-heading);margin:10px 0 0}
.tc-h3{font-size:clamp(24px,3.2vw,30px);font-weight:800;letter-spacing:-1px;line-height:var(--lh-heading);margin:10px 0 0}
.tc-lede{font-size:18px;line-height:var(--lh-normal);color:var(--gray-600);margin:14px 0 26px}
.tc-p{font-size:16px;line-height:var(--lh-body);color:var(--gray-600);margin:14px 0 0}
.tc-hero{position:relative;color:var(--white);background:var(--black)}
.tc-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.tc-hero::before{content:"";position:absolute;inset:0;z-index:1;background:var(--hero-shade)}
.tc-hero__in{box-sizing:border-box;position:relative;z-index:2;max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;padding:48px 24px}
.tc-hero__txt{margin:0;width:fit-content;max-width:100%}
.tc-hero__p{font-size:18px;line-height:var(--lh-body);color:rgba(255,255,255,.88);margin:18px 0 0;contain:inline-size}
.tc-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
@media (min-width:861px){.tc-tabs{flex-wrap:nowrap;margin-bottom:16px}.tc-tabs .tc-tab{flex:1 1 0;min-width:0;font-size:18px;min-height:54px;padding:12px 8px;white-space:nowrap}}   /* six equal tabs across the full row (mockup) */
.tc-tab{font:inherit;font-size:16px;font-weight:700;padding:13px 20px;border-radius:var(--radius-md);border:1.5px solid var(--gray-200);background:var(--white);color:var(--black);cursor:pointer;min-height:48px}
.tc-tab.techsel{background:var(--brand-500);border-color:var(--brand-500);color:var(--white)}
.tc-tab:focus-visible{outline:3px solid #2F6FDB;outline-offset:2px}
.tc-more{margin-top:20px;border-top:1px solid var(--gray-100);padding-top:16px}
.tc-more summary{cursor:pointer;font-size:16px;font-weight:700;color:var(--brand-600);list-style:none;padding:8px 0;min-height:44px}
.tc-more summary::-webkit-details-marker{display:none}
.tc-more summary:focus-visible{outline:3px solid #2F6FDB;outline-offset:2px}
.tc-more summary span{display:inline-block;vertical-align:-1px;transition:transform .2s}
.tc-more summary span svg{display:block}
.tc-more[open]>summary>span:last-child{transform:rotate(90deg)}   /* beats site.css details[open]>summary>span:last-child (the FAQ +, 45deg) */
.tc-more__body{padding-top:6px}
.tc-tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin-top:28px}
.tc-test{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:22px}
.tc-test__t{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.3;margin-top:10px}
.tc-test p{font-size:16px;line-height:var(--lh-normal);color:var(--gray-600);margin:6px 0 0}
@media (max-width:860px){.tc-hero__in{padding-top:48px;padding-bottom:48px}.tc-tab{flex:1 1 auto;padding:12px 14px}}

/* component cards */
#techspec.tc-card{background:none;border:0;box-shadow:none;padding:0}
.tc-v2{position:relative;display:flex;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.tc-v2__text{position:relative;z-index:2;width:62%;box-sizing:border-box;padding:24px 0 22px 28px;min-width:0}
.tc-v2__img{position:absolute;z-index:1;top:0;right:0;bottom:0;width:54%}   /* wider than the 46% it was, so the long fade has room before the device */
@media (min-width:861px){.tc-v2__img[data-lock]{bottom:auto;height:var(--tc-img-h)}}   /* "See more" open: the photo keeps the closed card's height; desktop only, phones stack the photo above the text at its own height */
.tc-v2__img img{width:100%;height:100%;object-fit:cover;display:block;max-height:none;min-height:0;border-radius:0}
.tc-v2__img img[src*="/battery"],.tc-v2__img img[src*="/inverter-huawei"],.tc-v2__img img[src*="/inverter-solis"]{object-position:100% 50%}   /* device sits right of centre in these photos: crop from the right so it lands mid-panel, clear of the fade */
.tc-v2__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--white) 0,var(--white) 16%,rgba(255,255,255,.97) 21.6%,rgba(255,255,255,.90) 27.2%,rgba(255,255,255,.78) 32.8%,rgba(255,255,255,.65) 38.4%,rgba(255,255,255,.50) 44%,rgba(255,255,255,.35) 49.6%,rgba(255,255,255,.22) 55.2%,rgba(255,255,255,.10) 60.8%,rgba(255,255,255,.03) 66.4%,rgba(255,255,255,0) 72%)}   /* long eased (smoothstep) fade so the photo melts into the card, no visible edge (client 2026-10-23: "even smoother") */
.tc-v2 .tc-eyebrow{gap:4px 12px}   /* a wrapped Optional pill sits tight under its eyebrow, apart from the title */
.tc-v2 .tc-pill{border:1.5px solid var(--brand-600);color:var(--brand-600)}
.tc-v2 .tc-h3{margin:12px 0 0}
@media (min-width:861px){.tc-v2--full .tc-v2__text{width:100%;padding-right:28px}}   /* no photo: the text uses the whole card (client 2026-10-23) */
.tc-invtabs{display:flex;gap:24px;margin:10px 0 0}   /* inverter: the brand tabs take the title's place (client 2026-10-23) */
.tc-invtab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;padding:4px 0;font:inherit;font-size:var(--fs-subtitle);font-weight:600;line-height:var(--lh-title);color:var(--black);cursor:pointer}
.tc-invtab:hover{color:var(--brand-600)}
.tc-invtab[aria-pressed="true"]{color:var(--brand-500);font-weight:800;border-bottom-color:var(--brand-500)}
.tc-v2 .tc-p{color:var(--gray-600);margin:10px 0 0;line-height:var(--lh-snug)}
.tc-v2__bul{list-style:none;margin:16px 0 0;padding:14px 20px;border-radius:var(--radius-lg);background:linear-gradient(90deg,var(--brand-50),rgba(253,239,249,.4));display:flex;flex-direction:column;gap:6px}
.tc-v2__bul li{position:relative;padding-left:26px;font-size:16px;line-height:var(--lh-snug);color:var(--gray-600)}
.tc-v2__bul li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--brand-500)}
.tc-v2__specs{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.tc-v2__spec{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-md);padding:12px 16px;box-shadow:var(--shadow-card);flex:1 1 auto;min-width:0;overflow-wrap:break-word;hyphens:auto}
.tc-v2__k{font-size:16px;color:var(--gray-400);line-height:1.3}
.tc-v2__v{font-size:16px;font-weight:800;color:var(--black);line-height:1.3;margin-top:4px}
.tc-v2 .tc-more.tc-v2__more{margin-top:12px;border:0;padding:0}
.tc-v2 .tc-more summary{color:var(--brand-600);padding:6px 0;min-height:0}
.tc-v2 .tc-more__body{padding-right:0}
@media (min-width:861px){.tc-v2:not(.tc-v2--full) .tc-v2__more .tc-more__body{width:calc((100% + 28px) / .62 - 56px)}}   /* details run the full card width under the photo (text column is 62%, 28px side padding) */
@media (max-width:860px){
  .tc-v2{flex-direction:column;border-radius:var(--radius-lg)}
  .tc-v2__text{width:auto;padding:0 18px 20px}
  .tc-v2__img{position:static;order:-1;width:auto;height:clamp(200px,48vw,300px);margin:14px 14px 18px;border-radius:var(--radius-lg);overflow:hidden}
  .tc-v2__img::after{display:none}
  .tc-v2__specs{gap:8px}
  .tc-v2__spec{padding:10px 10px;border-radius:var(--radius)}
  .tc-v2__bul{padding:12px 14px}
  .tc-v2--full .tc-v2__text{padding-top:20px}
}
@media (max-width:480px){.tc-v2__bul li{padding-left:22px}.tc-v2__specs{flex-direction:column;gap:8px}.tc-v2__spec{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px;hyphens:manual}.tc-v2__v{text-align:right}.tc-v2__text{padding:0 14px 18px}.tc-v2__img{margin:12px 12px 16px}}

/* the details opened by "See more" */
.tc-dg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;margin-top:40px}
.tc-dg--next{margin-top:12px}
.tc-dc{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:18px 20px}
.tc-dc__t{font-size:16px;font-weight:800;letter-spacing:-.3px}
.tc-dc__t--big{font-size:18px}   /* Solar Panels' cards only, as in the design */
.tc-dc__b{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.tc-dc__r{display:flex;gap:9px;align-items:baseline}
.tc-dc__d{flex:0 0 auto;color:var(--brand-500);font-size:16px;line-height:var(--lh-snug)}
.tc-dc__x{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal)}
.tc-dc__p{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:8px}
.tc-inc{margin-top:16px;border:1.5px solid var(--brand-500);background:var(--brand-50);border-radius:var(--radius-lg);padding:20px 22px}
.tc-inc__k{font-size:14px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--brand-600)}
.tc-inc__t{font-size:18px;font-weight:800;letter-spacing:-.5px;margin-top:6px}
.tc-inc__p{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:6px}
.tc-inc__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px;margin-top:14px}
.tc-inc__stat{border:1px solid var(--brand-500);background:var(--white);border-radius:var(--radius);padding:12px 14px}
.tc-inc__v{font-size:20px;font-weight:800;letter-spacing:-.5px}
.tc-inc__v--pink{color:var(--brand-500)}
.tc-inc__l{font-size:16px;color:var(--gray-600);margin-top:3px}
.tc-dfoot{font-size:var(--fs-small);color:var(--gray-400);line-height:var(--lh-body);margin-top:16px}

/* Component cards: phones swipe through all cards with arrows; desktop keeps the tabs */
.tc-arrows{display:none}
.tc-arrows .revbtn{display:inline-grid;place-items:center;padding:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--gray-200);background:var(--white);color:var(--black);cursor:pointer;transition:border-color var(--dur)}
.tc-arrows .revbtn svg{display:block}
.tc-arrows .revbtn:hover:not(:disabled){border-color:var(--brand-500)}
.tc-arrows .revbtn:disabled{opacity:.35;cursor:default}
@media (max-width:860px){
  .tc-tabs{display:none !important}
  .tc-arrows{display:flex;justify-content:flex-end;gap:8px;margin:0 0 14px}
  #techspec{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:6px;align-items:flex-start}
  #techspec::-webkit-scrollbar{display:none}
  #techspec.tc-card{border-radius:0;padding:4px 0 16px 14px;margin:-4px 0 -16px -14px;scroll-padding-left:14px}   /* the swipe row clips its overflow: no rounded corners of its own, and room for the card shadow */
  #techspec>.tc-slide,#techspec>.tc-slide[hidden]{display:block !important;flex:0 0 86%;min-width:0;scroll-snap-align:start}
  #techspec{align-items:stretch}#techspec>.tc-slide>.tc-v2,#techspec>.tc-slide>div>.tc-v2{height:100%;box-sizing:border-box}   /* every card the row's height: a short card left blank page under it before the next section */
}

/* "Why it's one system" */
.backed__h{font-size:clamp(30px,5vw,40px);font-weight:800;letter-spacing:-1.6px;line-height:var(--lh-heading);margin:0}
.backed__p{font-size:16px;color:rgba(255,255,255,.6);line-height:var(--lh-body);margin:16px 0 0}
.backed__specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:10px;margin-top:12px}
.backed__spec{border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);padding:12px 14px}
.backed__sk{font-size:14px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(255,255,255,.5)}
.backed__sv{font-size:16px;font-weight:800;letter-spacing:-.3px;margin-top:3px}
@media (max-width:900px){   /* phones: the warranty boxes become one divided row (the design's .specrow-dark) */
  .backed__specs{display:flex;flex-wrap:nowrap;gap:0;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);overflow:hidden}
  .backed__spec{flex:1 1 0;min-width:0;border:0;border-radius:0;border-right:1px solid rgba(255,255,255,.2);padding:12px 10px}
  .backed__spec:last-child{border-right:0}
  .backed__sk{font-size:16px;letter-spacing:.4px;overflow-wrap:anywhere}
  .backed__sv{overflow-wrap:anywhere}
}
.backed__warr{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2)}
.backed__k{font-size:14px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--sun-400)}
.backed__fine{font-size:16px;color:rgba(255,255,255,.5);line-height:var(--lh-body);margin-top:12px}
.backed__cta{margin-top:28px}

/* the Technology FAQ's title keeps its own clamp (36px) until that page's FAQ is standardised, as in the design */
body:has(.tc-hero) #faqs .hm-t{font-size:clamp(30px,5vw,36px)}

/* "Why it's one system" keeps the design's own section padding on desktop (the other pages' dark bands use the token) */
@media (min-width:901px){.wrap:has(> .dark > .backed){padding-block:clamp(40px,4vw,56px)}}

/* the design's site.css sets p,li{text-wrap:pretty}; the kit's rule only covers paragraphs without a class */
.tc-lede,.tc-p,.tc-hero__p{text-wrap:pretty}
/* ===== pages-a sheet: Time SolarCare, Solar ATAP and the FAQ centre. Values copied from emit_html/{support,solar-atap,faq}.html
   (their own <style> blocks + the rules of assets/site.css these pages use); colours, sizes and spacing are the design's tokens. ===== */

/* ---------- photo heroes: the picture is an <img> under the shade, the design draws it as a CSS background ---------- */
.pa-hero{position:relative;isolation:isolate;color:var(--white);background:var(--black);overflow:hidden}
.pa-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-2}
.pa-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-shade);pointer-events:none}
/* photo and shade sit under the text by negative z-index, not by lifting the wrap: a positioned wrap became the breadcrumb's
   containing block, so .crumbs (absolute, top of .hero-full) landed 240px down on FAQ and Time SolarCare */

/* ===================== Time SolarCare (support.html, sp-) ===================== */
.sp-wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.sp-pad{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.sp-hero{padding:48px 0}
.sp-eyebrow{font-size:14px;font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--brand-500);margin-bottom:12px}
.sp-eyebrow--light{margin-bottom:14px}
.sp-h1{margin:0;font-size:clamp(36px,6.4vw,68px);font-weight:800;letter-spacing:-2.4px;line-height:var(--lh-display)}
.sp-pink{color:var(--brand-500)}
.sp-lead{margin:18px 0 0;font-size:18px;line-height:var(--lh-normal);color:rgba(255,255,255,.88)}
.sp-hero-cards{margin-top:clamp(36px,7vw,84px)}
.sp-h2{margin:0;font-size:clamp(30px,5vw,40px);font-weight:800;letter-spacing:-1.6px;line-height:var(--lh-heading)}
.sp-h2--28{font-size:28px}.sp-h2--36{font-size:clamp(28px,5vw,36px)}.sp-h2--45{font-size:clamp(28px,5vw,45px)}
.sp-h3{margin:56px 0 0;font-size:22px;font-weight:800;letter-spacing:-.8px;line-height:1.2}
.sp-p{font-size:16px;color:var(--gray-600);line-height:var(--lh-body);margin:14px 0 0}
.sp-note{font-size:var(--fs-fine);color:var(--gray-400);line-height:var(--lh-body);margin:18px 0 0}
.sp-grid{display:grid;gap:14px;margin-top:28px}
.sp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}
.sp-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-grid--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sp-card,.sp-step{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:22px;background:var(--white)}
.sp-card::before{content:"";display:block;width:26px;height:3px;border-radius:var(--radius-xs);background:var(--brand-500);margin-bottom:14px}
.sp-step{border-radius:var(--radius-md);padding:18px}
.sp-card-t{margin:0;font-size:18px;font-weight:800;letter-spacing:-.3px}
.sp-step .sp-card-t{margin-top:10px}
.sp-card-d{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:6px}
.sp-claim{background:var(--brand-50);border:1px solid var(--brand-500);border-radius:var(--radius-xl);padding:clamp(24px,4vw,40px)}
.sp-claim .sp-step{border-color:var(--brand-200)}
.sp-onsite{margin-top:clamp(28px,4vw,40px)}
/* the claim box sits in its own section on the same white as Warranty: one gap between them, the same as Support's cards -> on-site box */
.sp-sec--cards:has(+.sp-sec--steps)>.sp-pad{padding-bottom:clamp(28px,4vw,40px)}
.sp-sec--steps>.sp-pad{padding-top:0}
.sp-onsite .sp-h3{margin-top:0}.sp-onsite .sp-card{border-color:var(--brand-200)}
.sp-ins{background:var(--white);padding:0 24px var(--sec-y)}
.sp-ins>.sp-wrap{background:var(--gray-100);border-radius:var(--radius-xl);padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)}
@media (max-width:600px){.sp-ins{padding:0 12px var(--sec-y)}}
.sp-ins .sp-card{border-color:var(--gray-100)}
@media (max-width:1050px){.sp-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.sp-grid--3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.sp-grid--4,.sp-grid--2,.sp-grid--5{grid-template-columns:minmax(0,1fr)}.sp-h1{letter-spacing:-1.4px}}
.sp-grey{background:var(--gray-100)}.sp-grey .sp-card{border-color:var(--gray-100)}
.sp-h3--dash{display:flex;align-items:center;gap:14px}.sp-h3--dash::before{content:"";flex:0 0 26px;height:3px;border-radius:var(--radius-xs);background:var(--brand-500)}

/* ===================== Solar ATAP (solar-atap.html, at-) ===================== */
.at-hero{position:relative;color:var(--white);background:var(--black);overflow:hidden}
.at-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.at-hero::before{content:"";position:absolute;inset:0;z-index:1;background:var(--hero-shade)}
.at-hero__in{position:relative;z-index:2;max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;padding:88px 24px 56px}
.at-eyebrow{font-size:14px;font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--brand-500);margin-bottom:14px}
.at-h1{margin:0;font-size:clamp(36px,6.4vw,67px);font-weight:800;letter-spacing:-2.4px;line-height:var(--lh-display)}
.at-pink{color:var(--brand-500)}
.at-h2{margin:0;font-size:clamp(28px,5vw,44px);font-weight:800;letter-spacing:-1.6px;line-height:var(--lh-heading)}
.at-h3{margin:0;font-size:clamp(22px,3.2vw,28px);font-weight:800;letter-spacing:-1.1px;line-height:var(--lh-heading)}
.at-lead{margin:20px 0 0;font-size:16px;line-height:var(--lh-body);color:rgba(255,255,255,.85)}
.at-lead--dk{margin-top:14px;color:var(--gray-600);max-width:none}   /* section intros span the container (user, 2026-10-23); hero lead keeps its cap */
.at-hero .at-lead{font-size:18px;margin-top:18px}.at-facts .hero-strip__t{font-size:26px;letter-spacing:-0.8px;line-height:1.15}
.at-p{margin:10px 0 0;font-size:16px;line-height:var(--lh-normal);color:var(--gray-600)}
.at-note{margin:14px 0 0;font-size:var(--fs-fine);line-height:var(--lh-normal);color:var(--gray-400)}
.at-note--box{background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--radius-md);padding:14px 18px;max-width:none}
.at-facts{margin-top:44px}
.at-sec--shade{background:var(--gray-100)}
.at-sec--shade .atapflow>div{background:var(--white);border-color:var(--gray-100)!important}   /* white step cards on the grey band (mockup) */
.at-wrap{max-width:1140px;margin:0 auto;padding:var(--sec-y) 24px}
.at-sec--tight .at-wrap{padding-bottom:0}.at-sec--tight .at-acc{margin-top:0}
.at-sub{margin-top:var(--sec-y)}   /* no divider line above (user, 2026-10-23) */
.at-barcard{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px 26px;background:var(--white)}.at-barcard>.at-p{margin-top:0}
@media (max-width:620px){.at-barcard{padding:20px 18px}}
.at-bars{margin-top:22px}
.at-bar+.at-bar{margin-top:18px}
.at-bar__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px;color:var(--black)}
.at-bar__v{font-size:18px;font-weight:600;text-align:right}
.at-bar__track{display:flex;gap:6px;height:18px;margin-top:8px}
.at-bar__fill{background:var(--brand-500);border-radius:var(--radius-xs)}
.at-bar__rest{flex:1;background:var(--gray-300);border-radius:var(--radius-xs)}
.at-legend{display:flex;gap:20px;margin-top:16px;font-size:var(--fs-small);color:var(--gray-600)}
.at-dot{display:inline-block;width:12px;height:12px;border-radius:var(--radius-xs);background:var(--gray-300);margin-right:8px}
.at-dot--p{background:var(--brand-500)}
.at-acc{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);margin-top:16px;overflow:hidden}
.at-acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.8px;line-height:1.2}
.at-acc>summary::-webkit-details-marker{display:none}
.at-acc__i{flex:none;position:relative;width:36px;height:36px;border-radius:50%;background:var(--brand-500);transition:transform var(--dur)}
/* chevron: down when closed; open turns the whole button 180deg (user, 2026-10-21) */
.at-acc__i::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-7px 0 0 -5px;border-right:2.5px solid var(--white);border-bottom:2.5px solid var(--white);transform:rotate(45deg)}
.at-acc[open] .at-acc__i{transform:rotate(180deg)}
.at-acc__b{padding:0 26px 26px}
.at-acc__intro{margin:0 0 18px}
.at-tblwrap{overflow-x:auto;border:1px solid var(--brand-200);border-radius:var(--radius-md)}
.at-tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:16px;line-height:var(--lh-snug);text-align:left}
.at-tbl th,.at-tbl td{padding:14px 18px;border-top:1px solid var(--gray-100);vertical-align:top}
.at-tbl thead th{border-top:0;background:var(--brand-50);font-size:16px;font-weight:700;letter-spacing:1px;color:var(--gray-600)}
.at-tbl thead .at-tbl__a{color:var(--brand-600)}
.at-tbl tbody th{font-weight:800;white-space:nowrap}
.at-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px;align-items:stretch}
.at-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:20px 22px;display:flex;flex-direction:column;gap:0}
.at-card__t{margin:14px 0 0;font-size:18px;font-weight:800;letter-spacing:-.5px}
.at-pair{display:flex;align-items:flex-end;gap:10px;margin-top:14px}
.at-pair>div:not(.at-pair__arr){flex:1 1 0;min-width:0}
.at-pair__l{font-size:16px;font-weight:700;color:var(--gray-400);margin-bottom:6px;line-height:1.25}
.at-pair__l--p{color:var(--brand-600)}
.at-pair__arr{font-size:18px;font-weight:800;color:var(--gray-300);align-self:center}
.at-mini{display:flex;height:10px;border-radius:var(--radius-full);background:var(--gray-100);overflow:hidden}
.at-mini i{background:var(--brand-500);display:block}
.at-mini b{background:repeating-linear-gradient(135deg,var(--gray-200) 0 5px,var(--gray-100) 5px 10px);display:block}
.at-pair__v{font-size:20px;font-weight:800;letter-spacing:-.8px;margin-top:8px}
.at-pair__v--p{color:var(--brand-500)}
.at-tou{margin-top:14px;padding-top:26px}   /* the height of .at-pair__l (16px x 1.25 + 6px), so this bar lines up with the two cards' bars */
.at-tou__bar{display:flex;height:10px;border-radius:var(--radius-full);overflow:hidden}
.at-tou__bar i{background:var(--gray-100);display:block}
.at-tou__bar b{background:var(--sun-400);display:block}
.at-tou__lab{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:16px;font-weight:800;color:var(--gray-400)}
.at-tou__lab span:last-child{color:var(--black)}
.at-do{margin-top:auto;padding:12px 14px;background:var(--brand-50);border-radius:var(--radius);font-size:16px;line-height:var(--lh-snug);color:var(--gray-600)}
.at-card .at-note{margin-top:10px}
.at-card>.at-do{margin-top:auto}
.at-card>.at-do{position:relative}
.at-card>*:nth-last-child(2){margin-bottom:16px}
/* the three cards share row tracks, so bars, notes and the pink box line up across cards whatever the copy length (user 2026-10-23) */
@supports (grid-template-rows:subgrid){.at-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:start}.at-card>.num{grid-row:1;justify-self:start}.at-card>.at-card__t{grid-row:2}.at-card>.at-p{grid-row:3}.at-card>.at-pair,.at-card>.at-tou{grid-row:4;align-self:start}.at-card>.at-note{grid-row:5;align-self:start}.at-card>.at-do{grid-row:6;margin-top:0}}
.at-do__l{font-size:16px;font-weight:800;letter-spacing:1.4px;color:var(--brand-600);margin-bottom:4px}
@media (max-width:1080px){.at-more{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.at-more{grid-template-columns:1fr}.at-hero__in{padding:56px 24px 40px}.at-wrap{padding:var(--sec-y) 20px}.at-acc>summary{padding:18px}.at-acc__b{padding:0 16px 18px}.at-tbl th,.at-tbl td{padding:12px 10px}.at-tbl{min-width:0}.at-tbl tbody th{white-space:normal}.at-tbl thead th{letter-spacing:0}.at-tbl th,.at-tbl td{overflow-wrap:anywhere;hyphens:auto}.at-tbl thead th{font-size:16px}.at-acc__b{padding:0 10px 14px}.at-tbl th,.at-tbl td{padding:10px 8px}}
/* ATAP vs NEM table on phones: one block per feature, values labelled, so no word breaks mid-way */
@media (max-width:600px){
  .at-tbl,.at-tbl tbody,.at-tbl tr,.at-tbl th,.at-tbl td{display:block;width:auto}
  .at-tbl thead{display:none}
  .at-tbl tr{padding:12px 14px;border-top:1px solid var(--gray-100)}
  .at-tbl tbody tr:first-child{border-top:0}
  .at-tbl th,.at-tbl td{padding:0 !important;border:0;overflow-wrap:normal;hyphens:manual}
  .at-tbl tbody th{margin-bottom:6px}
  .at-tbl td{margin-top:4px}
  .at-tbl td::before{display:block;font-size:16px;font-weight:700;color:var(--gray-600)}
  .at-tbl td:nth-of-type(1)::before{content:attr(data-l);color:var(--brand-600)}
  .at-tbl td:nth-of-type(2)::before{content:attr(data-l);margin-top:6px}
}
/* "how it works" cards: site.css .atapflow (4 -> 2 at 1080, 1 at 820 and 620; later rule wins) */
.atapflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:10px;margin-top:clamp(24px,3.5vw,36px)}
.atapflow__c{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:22px 20px 20px;display:flex;flex-direction:column}
.atapflow__t{margin:14px 0 0;font-size:18px;font-weight:800;letter-spacing:-.3px}
.atapflow__p{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:6px}
@media (max-width:820px){.atapflow{grid-template-columns:1fr !important;gap:12px !important}}
@media (max-width:1080px){.atapflow{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:620px){.atapflow{grid-template-columns:1fr !important}}
/* value cards (inline styles in the design) */
.at-rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin-top:24px;align-items:stretch}
.at-rate{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px 26px}
.at-rate--pink{border:1.5px solid var(--brand-500);background:var(--brand-50)}
.at-rate__k{font-size:14px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gray-400)}
.at-rate--pink .at-rate__k{color:var(--brand-600)}
.at-rate__big{font-size:clamp(30px,3.4vw,38px);font-weight:800;letter-spacing:-1.8px;line-height:1;margin-top:10px}
.at-rate--pink .at-rate__big{color:var(--brand-500)}
.at-rate__rows{display:flex;flex-direction:column;gap:9px;margin-top:18px;font-size:16px}
.at-rate__row{display:flex;justify-content:space-between}
.at-rate__row>span:first-child{color:var(--gray-600)}
.at-rate__v{font-weight:700}
.at-rate__row>span.at-mute{color:var(--gray-400);font-weight:400}
.at-rate__row--total{padding-top:7px;border-top:1px solid var(--brand-200)}
.at-rate__row--total>span:first-child{font-weight:700;color:var(--black)}
.at-rate__tv{font-weight:800}
.at-black{border:1px solid var(--black);background:var(--black);color:var(--white);border-radius:var(--radius-lg);padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
.at-black__k{font-size:14px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--sun-400)}
.at-black__big{font-size:44px;font-weight:800;letter-spacing:-2.2px;line-height:1;margin-top:10px}
.at-black__big span{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-left:6px}
.at-black__n{font-size:16px;color:rgba(255,255,255,.65);line-height:var(--lh-normal);margin-top:10px}
.at-fine{font-size:var(--fs-fine);color:var(--gray-400);line-height:var(--lh-body);margin-top:14px}
.at-fine--mt16{margin-top:16px}
/* fine-print band (ATAP footer note) */
.pa-noteband__in{max-width:1140px;margin:0 auto;padding:28px 24px 32px}
.pa-noteband__p{margin:0;font-size:var(--fs-fine);color:var(--gray-400);line-height:var(--lh-body)}

/* ===================== FAQ centre (faq.html, fq-) ===================== */
.fq-wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.fq-body{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.fq-hero{padding:clamp(48px,7vw,84px) 0 clamp(44px,6vw,64px)}
.fq-eyebrow{font-size:14px;font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--brand-500);margin-bottom:14px}
.fq-h1{margin:0;font-size:clamp(36px,6.4vw,70px);font-weight:800;letter-spacing:-2.4px;line-height:var(--lh-display)}
.fq-pink{color:var(--brand-500)}
.fq-intro{margin:18px 0 0;font-size:18px;line-height:var(--lh-normal);color:rgba(255,255,255,.88)}
.fq-search{margin-top:28px;max-width:560px}
.fq-search input{width:100%;box-sizing:border-box;padding:15px 18px;border:1.5px solid rgba(255,255,255,.4);border-radius:var(--radius-md);background:rgba(10,12,20,.45);color:var(--white);font-size:16px;font-weight:600;outline:none;font-family:inherit}
.fq-search input::placeholder{color:rgba(255,255,255,.75)}
.fq-search input{padding-left:48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:16px center}
.fq-search input:focus{border-color:var(--brand-500)}
/* search results */
.fq-res__top{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline}
.fq-res__label{font-size:16px;color:var(--gray-400)}
.fq-res__clear{font:inherit;font-size:16px;font-weight:700;color:var(--brand-500);background:none;border:0;padding:0;cursor:pointer}
.fq-res__clear:hover{color:var(--brand-600)}
.fq-res__list{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--gray-100);max-width:820px}
.fq-res__item{border-bottom:1px solid var(--gray-100);padding:18px 2px}
.fq-res__g{font-size:14px;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--brand-500)}
.fq-res__q{margin:6px 0 0;font-size:16px;font-weight:800;letter-spacing:-.3px}
.fq-res__a{font-size:16px;color:var(--gray-600);line-height:var(--lh-body);margin-top:6px}
/* categories + questions */
.faqcols{display:grid;grid-template-columns:220px minmax(0,1fr);gap:44px;margin-top:0;align-items:start}
.faqcols[hidden]{display:none}
.faqrail{position:sticky;top:150px;display:flex;flex-direction:column;gap:2px}
.fq-rail-list{display:contents}
.fq-rail{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:var(--radius);font:inherit;font-size:16px;font-weight:700;text-align:left;cursor:pointer;color:var(--gray-400);background:transparent}
.fq-rail:hover{color:var(--black)}
.fq-rail[aria-pressed=true]{font-weight:800;color:var(--black);background:rgba(244,84,205,.12)}
.fq-rail__n{flex:1;min-width:0}
.fq-gt{margin:0;font-size:clamp(22px,3.2vw,28px);font-weight:800;letter-spacing:-1.1px;line-height:var(--lh-heading)}
.fq-list{display:flex;flex-direction:column;margin-top:20px;border-top:1px solid var(--black)}
.fq-row{border-bottom:1px solid var(--gray-100)}
.fq-row--off{display:none}
.fq-row__q{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:18px 0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.fq-row__q::-webkit-details-marker{display:none}
.fq-row__t{font-size:16px;font-weight:700;letter-spacing:-.2px}
.fq-row__c{flex:none;font-size:18px;font-weight:800;color:var(--gray-300);transform:rotate(0deg);transition:transform var(--dur-fast)}
.fq-row[open] .fq-row__c{color:var(--brand-500);transform:rotate(45deg)}
.fq-row__a{font-size:16px;color:var(--gray-600);line-height:var(--lh-body);padding:0 0 20px}
/* Phone: the category rail folds into one pink dropdown (faq-menu.js in the design) */
.fq-dd{display:none}
@media (max-width:860px){
  .faqcols{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:0}
  .faqrail{position:static;flex-direction:column;flex-wrap:wrap;gap:2px}
  .fq-dd{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 18px;border:0;border-radius:var(--radius-md);background:var(--brand-500);color:var(--white);font:inherit;font-size:16px;font-weight:800;text-align:left;cursor:pointer}
  .fq-dd::after{content:"";flex:none;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid currentColor;transition:transform var(--dur-fast)}
  .fq-dd[aria-expanded="true"]::after{transform:rotate(180deg)}
  .fq-rail-list{display:none}
  .faqrail.is-open .fq-rail-list{display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid var(--gray-100);border-radius:var(--radius-md)}
  .fq-gt{display:none}
  .fq-body{padding-top:48px}   /* hero -> dropdown = dropdown -> questions = 48px (body padding / rail gap + list margin) */
}
@media (max-width:640px){.fq-h1{letter-spacing:-1.4px}.fq-body{padding-bottom:48px}}   /* = the help card's 48px margin above it */
.fq-help{border:1.5px solid var(--brand-500);background:var(--brand-50);border-radius:var(--radius-lg);padding:28px 30px;margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px;align-items:center}
.fq-help__t{margin:0;font-size:20px;font-weight:800;letter-spacing:-.7px}
.fq-help__p{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:6px}
.fq-help__btns{display:flex;gap:12px;flex-wrap:wrap}
@media(min-width:700px){.fq-help__btns{justify-content:flex-end}}
.pa-photoband{width:100%;height:clamp(200px,26vw,320px);object-fit:cover;object-position:50% 45%;display:block}
body:has(.sp-hero) .hm-faq__row{font-size:16px}   /* Support's "Browse all FAQs" link is 16px in the design (home keeps 14px) */
/* site.css: p,li{text-wrap:pretty} (no one-word last lines); kit.css lacks it, so scoped here to these pages' paragraphs */
.sp-hero p,.sp-sec p,.at-hero p,.at-sec p,.fq-hero p,.fq-body p,.pa-noteband p{text-wrap:pretty}
/* ===== Calculator + Insights (page-unique sections). Values copied from the inline styles of emit_html/calculator.html and insights.html. ===== */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--radius-full);background:var(--gray-200);outline:none;box-sizing:border-box;margin:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--brand-500);border:3px solid var(--white);box-shadow:var(--shadow-xs);cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--brand-500);border:3px solid var(--white);box-shadow:var(--shadow-xs);cursor:pointer}

/* ---------- calculator (emit_html/calculator.html: .cl-* rules and the inline styles, as the page computes them) ---------- */
/* every band is a 1140px column with the page gutter outside it (the design's max-width:1140 + padding:0 24px on a content box) */
.cw__res,.cw__in,.cw__pay,.cw__scenin{box-sizing:content-box;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.cw__hero{position:relative;overflow:hidden;background:var(--black);color:var(--white)}
.cw__heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cw__hero::after{content:'';position:absolute;inset:0;background:var(--hero-shade);z-index:1}
.cw__herointro{position:relative;z-index:2;box-sizing:border-box;max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;padding:clamp(56px,9vw,104px) var(--gutter) clamp(48px,7vw,80px)}
.cw__title{margin:0;font-size:clamp(34px,6vw,56px);font-weight:800;letter-spacing:-2px;line-height:var(--lh-display)}
.cw__lede{margin:18px 0 0;font-size:16px;line-height:var(--lh-body);color:rgba(255,255,255,.88);text-wrap:pretty}   /* a <p> in the design: site.css p{text-wrap:pretty} */

.cw__res{padding-block:18px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:20px;align-items:stretch;z-index:5}
@media (min-width:760px) and (min-height:760px){.calcres{position:sticky;top:65px}}
@media (min-width:960px){.cw__res{grid-template-columns:1fr 1fr 1.3fr}}
/* the result cards overhang the hero's bottom edge (client Figma, 2026-10-23; user: hero ~70vh "so the card overflow
   nicely"; as emit_html calculator.html): the hero fits its content (see below), the cards rise --cl-lift into it and the
   hero gives that space back. The row is see-through over the photo, white only while stuck (.is-stuck, calc.tsx). */
.cw{--cl-lift:104px}
@media (max-width:760px){.cw{--cl-lift:0px}html .cw__hero .cw__herointro.hero-full{padding-bottom:var(--sec-y)!important}}   /* phones: no overhang, the cards start under the photo (user, 2026-10-23) */
/* desktop: the client Figma's proportions scaled to 1440: title 176px under the hero's top, 96px from the text to the
   cards, cards overhanging ~86px, hero ~515px (user: "refer to the image from figma") */
@media (min-width:861px){.cw__hero .cw__herointro.hero-full{min-height:0;padding-top:96px!important;justify-content:center}}   /* text centred between the hero top and the cards (user) */
.cw__res{position:relative;margin-top:calc(-1 * var(--cl-lift, 0px))}
@media (min-width:760px) and (min-height:760px){.cw__res{position:sticky}}
.cw__res.is-stuck{background:var(--white);box-shadow:0 0 0 100vmax var(--white);clip-path:inset(0 -100vmax)}   /* the white strip spans the screen, like the header (user, 2026-10-23) */
.cw__hero .cw__herointro.hero-full{padding-bottom:calc(96px + var(--cl-lift, 0px) - 18px)!important}   /* less the card row's 18px top padding */
@media (max-width:860px){.cw__hero .cw__herointro.hero-full{padding-top:calc(36px + var(--sec-y))!important;padding-bottom:calc(var(--sec-y) + var(--cl-lift, 0px) - 18px)!important}}   /* savings card wider so its two chips sit on one line (2026-10-23) */
.cw__card{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:20px 22px;display:flex;flex-direction:column;background:var(--white);box-shadow:var(--shadow-card)}
.cw__card--keep{border:1.5px solid var(--brand-500);background:var(--brand-50)}
.cw__lab{font-size:var(--fs-small);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gray-400)}
.cw__lab--deep{color:var(--brand-600)}
.cw__big{font-size:36px;font-weight:800;letter-spacing:-1.7px;line-height:1;margin-top:8px}
.cw__note{font-size:16px;color:var(--gray-600);line-height:var(--lh-snug);margin-top:10px}
.cw__rows{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:16px;color:var(--gray-600)}
.cw__row{display:flex;justify-content:space-between;gap:10px}
.cw__v{font-weight:700;color:var(--black)}.cw__v--deep{color:var(--brand-600)}
.cw__keep{font-size:50px;font-weight:800;letter-spacing:-2.6px;line-height:1;margin-top:6px;color:var(--brand-500)}
.cw__keepsub{font-size:16px;font-weight:800;letter-spacing:-.4px;margin-top:2px}
.cw__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cw__chip{white-space:nowrap;font-size:16px;font-weight:700;padding:7px 12px;border-radius:var(--radius-full);border:1px solid var(--brand-200);background:var(--white)}
.cw__more{display:inline-block;margin-top:auto;padding-top:14px;font-size:16px;font-weight:700;color:var(--brand-600);transition:color var(--dur-fast);align-self:flex-start}
.cw__more:hover{color:var(--black)}

.cw__in{margin-top:20px;padding-block:0}
.cw__panel{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:20px 22px;background:var(--white)}
.cw__panelhead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.cw__h2{margin:0;font-size:clamp(26px,4vw,34px);font-weight:800;letter-spacing:-1.2px;line-height:var(--lh-heading)}
.cw__intro{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin:6px 0 16px}
.cw__boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px}
.cw__box{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;text-align:left;width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--radius);transition:border-color var(--dur-fast);border:1.5px solid var(--gray-200);background:var(--white)}
.cw__box:hover{border-color:var(--brand-500)}
.cw__box.is-open{border-color:var(--brand-500);background:rgba(244,84,205,.10)}
.cw__boxlab{display:block;font-size:var(--fs-small);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gray-400)}
.cw__boxrow{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-top:4px}
.cw__boxval{font-size:16px;font-weight:800;letter-spacing:-.5px}
.cw__caret{font-size:16px;font-weight:800;flex:none;color:var(--gray-400);transform:rotate(0deg)}
.cw__box.is-open .cw__caret{color:var(--brand-500);transform:rotate(180deg)}
.cw__sub{background:var(--gray-100);border-radius:var(--radius-md);padding:16px 18px;margin-top:10px}
.cw__subhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cw__subt{font-size:16px;font-weight:800}.cw__subv{font-size:20px;font-weight:800;letter-spacing:-.8px}
.cw__subhint{font-size:var(--fs-small);color:var(--gray-400);line-height:var(--lh-snug);margin-bottom:12px}
.cw__subhint--bill{line-height:normal;margin:3px 0 14px}
.cw__optgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(96px,100%),1fr))}
.cw__opt{display:block;width:100%;box-sizing:border-box;text-align:center;padding:12px 16px;border-radius:var(--radius);font-size:16px;font-weight:700;border:1.5px solid var(--gray-200);background:transparent;color:var(--gray-200)}
.cw__opt:hover{border-color:var(--brand-500)}
.cw__opt.is-on{border-color:var(--brand-500);background:rgba(244,84,205,.18);color:var(--black)}
/* daytime presets under the slider, each with an info button; the tooltip opens on hovering the card (desktop), keyboard focus on the icon or a tap on it (.is-tip) */
.dayopts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));margin-top:12px}
.dayopt{position:relative;display:flex;align-items:center;justify-content:center}   /* each option centred in its column, info icon beside the button (client mockup, 2026-10-23) */
.dayopt__b{box-sizing:border-box;text-align:center;padding:7px 9px;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--fs-small);font-weight:500;line-height:1.4;cursor:pointer;border:1px solid var(--gray-200);background:var(--white);color:var(--black)}
.dayopt__b:hover{border-color:var(--brand-500)}
.dayopt__b.is-on{border-color:var(--brand-500);background:var(--brand-50);color:var(--brand-600);font-weight:600}
.dayopt__i{flex:none;width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--gray-400);cursor:pointer}
.dayopt__i svg{width:15px;height:15px}
.dayopt__i:hover,.dayopt__i:focus-visible,.dayopt.is-tip .dayopt__i{color:var(--brand-500)}
.dayopt__tip{position:absolute;z-index:5;left:50%;width:min(280px,calc(100vw - 48px));transform:translateX(-50%);box-sizing:border-box;bottom:calc(100% + 8px);padding:12px 14px;border-radius:var(--radius);background:var(--black);color:var(--white);font-size:var(--fs-small);font-weight:400;line-height:var(--lh-snug);text-align:left;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:opacity var(--dur-fast),visibility var(--dur-fast);pointer-events:none}
.dayopt__i:focus-visible~.dayopt__tip,.dayopt.is-tip .dayopt__tip{opacity:1;visibility:visible}
@media (hover:hover){.dayopt:hover .dayopt__tip{opacity:1;visibility:visible}.dayopt:hover .dayopt__i{color:var(--brand-500)}}   /* desktop: hovering anywhere on the card; phones: a tap on the icon */
.cw__scale{display:flex;justify-content:space-between;font-size:16px;color:var(--gray-400);margin-top:8px}
.cw__reset{display:inline-block;margin-top:10px;font-size:16px;font-weight:700;color:var(--brand-500);padding:6px 0}
.cw__reset:hover{color:var(--black)}

.cw__pay{margin-top:20px;padding-block:0}
.cw__paybox{color:var(--black)}   /* no outer card since 2026-10-22 */
.cw__paywash{background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--radius-lg);padding:24px 28px}   /* title on top, the two plans side by side under it, 10-year highlighted (2026-10-23) */
.cw__paytop{min-width:0}
.cw__payt{margin:0;font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-1px;line-height:var(--lh-title)}
.cw__paysub{font-size:16px;font-weight:700;color:var(--brand-600);margin-top:4px}
.cw__plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px;margin-top:18px}
.cw__plan{background:var(--white);border:1px solid var(--brand-200);border-radius:var(--radius-lg);padding:20px 22px}
.cw__plan--hl{border:2px solid var(--brand-500);box-shadow:var(--shadow-brand)}
.cw__plant{margin:0 0 8px;font-size:16px;font-weight:800;color:var(--black)}
.cw__fee{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1}
@media (max-width:640px){.cw__paywash{padding:20px 22px}}
.cw__feesuf{margin-left:4px;font-size:16px;font-weight:600;color:var(--gray-400)}
.cw__net{margin-top:12px;padding-top:12px;border-top:1px solid var(--gray-100)}
.cw__neth{font-size:16px;font-weight:800;line-height:var(--lh-snug);color:var(--brand-600)}
.cw__neth--neg{color:var(--gray-400)}
.cw__netn{margin-top:4px;font-size:14px;line-height:var(--lh-snug);color:var(--gray-600)}
.cw__spacer{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

.cw__tbw{box-sizing:content-box;max-width:var(--maxw);margin-inline:auto;padding:20px var(--gutter) 0}
.cw__tb{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:clamp(20px,2.6vw,28px)}
.cw__tbt{font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-1px;line-height:var(--lh-title);margin-bottom:14px}
.cw__tb table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:16px;font-variant-numeric:tabular-nums}
.cw__tb th:not(:first-child),.cw__tb td:not(:first-child){width:150px}
.cw__tb th,.cw__tb td{padding:10px 12px;text-align:right;vertical-align:bottom}
.cw__tb th:first-child,.cw__tb td:first-child{text-align:left;padding-left:0}
.cw__tb th:last-child,.cw__tb td:last-child{padding-right:0}
.cw__tb thead th{font-weight:700;color:var(--gray-600);border-bottom:1px solid var(--gray-200);vertical-align:bottom}
.cw__tb thead th:first-child{font-size:14px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--brand-600)}
.cw__tbu{text-transform:none;letter-spacing:0}
.cw__tb tbody td{border-bottom:1px dashed var(--gray-100)}
.cw__tb td:first-child{color:var(--gray-600)}
.cw__tb tr.cw__tb-tot td{font-weight:800;color:var(--black);border-bottom:1px solid var(--gray-200)}
.cw__tb tr.cw__tb-bill td{font-weight:800;color:var(--black);border-bottom:0;padding-top:14px}
.cw__tb tr.cw__tb-bill td:not(:first-child){font-size:20px;color:var(--brand-500)}
.cw__tb table+table{margin-top:28px}.cw__tb table.cw__tb-billt{margin-top:0}
@media (max-width:560px){.cw__tb th,.cw__tb td{padding:8px 6px;font-size:var(--fs-small)}.cw__tb th:not(:first-child),.cw__tb td:not(:first-child){width:84px}.cw__tb thead th:first-child{font-size:14px}.cw__tb tr.cw__tb-bill td:not(:first-child){font-size:16px}}
.cw__fine{font-size:var(--fs-fine);color:var(--gray-400);line-height:var(--lh-body);margin-top:14px}

/* two sections' padding above the heading (the results/plan block is a section of its own), one below */
.cw__scenin{padding-block:calc(var(--sec-y) * 2 - 20px) var(--sec-y)}
.cw__h2s{margin:0;font-size:clamp(28px,4.6vw,38px);font-weight:800;letter-spacing:-1.5px;line-height:var(--lh-heading)}
.cw__lead{font-size:16px;color:var(--gray-600);line-height:var(--lh-body);margin-top:14px}
.cw__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px;margin-top:36px;align-items:stretch}
.cw__sc{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px 28px;display:flex;flex-direction:column}
.cw__sc--hi{border:1.5px solid var(--brand-500);background:var(--brand-50)}
.cw__eye{font-size:var(--fs-small);font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--gray-600)}.cw__eye--pink{color:var(--brand-500)}
.cw__sch{margin:8px 0 0;font-size:22px;font-weight:800;letter-spacing:-.7px;line-height:1.2}
.cw__sctx{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:6px}
.cw__b{font-weight:700;color:var(--black)}
.cw__slide{margin-top:18px;padding-bottom:18px;border-bottom:1px solid var(--gray-100)}
.cw__slidehead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.cw__slidek{font-size:16px;font-weight:700;color:var(--gray-600)}.cw__slidev{font-size:16px;font-weight:800;letter-spacing:-.5px}
.cw__scen input[type=range]{background:linear-gradient(90deg,var(--brand-500) var(--p,50%),var(--gray-200) var(--p,50%))}   /* pink fill up to the thumb */
.cw__scbox{margin-top:18px;padding:18px 20px;border-radius:var(--radius-md);background:var(--gray-100);border:1px solid var(--gray-100)}
.cw__scbox--pink{background:rgba(255,255,255,.6);border-color:var(--brand-200)}
.cw__scbox .cw__eye{margin-bottom:8px}
.cw__kept{display:flex;align-items:baseline;gap:8px}
.cw__keptv{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1}.cw__scbox--pink .cw__keptv{color:var(--brand-500)}
.cw__keptk{font-size:16px;font-weight:600;color:var(--gray-400)}
.cw__delta{font-size:16px;font-weight:700;color:var(--brand-500);margin-top:6px}
.cw__scnote{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:10px}
.cw__info{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small);color:var(--gray-400);line-height:var(--lh-body);margin-top:16px;box-sizing:border-box;background:var(--gray-100);border-radius:var(--radius-md);padding:14px 18px}
.cw__info svg{flex:none;margin-top:4px}
.cw__info strong{color:var(--gray-600)}

.ctab{background:var(--black);color:var(--white)}
.ctab__in{max-width:var(--maxw);margin:0 auto;padding:80px var(--gutter);text-align:center}
.ctab__h{font-size:clamp(30px,5vw,40px);font-weight:800;letter-spacing:-1.6px;line-height:1.08}
.ctab__p{font-size:15px;color:rgba(255,255,255,.6);line-height:var(--lh-body);margin:16px auto 0;max-width:440px}
.ctab__row{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
/* calculator FAQ answers: a table and lists (the design's .cfaq-a rules) */
.faq-a table{border-collapse:collapse;margin-top:8px;width:100%}.faq-a td{border:1px solid var(--gray-100);padding:8px 10px;vertical-align:top}
/* ---------- insights (design insights.html: hero with the search, then one layout for every category) ---------- */
.ins-hero{position:relative;background:var(--black);color:var(--white);overflow:hidden}
.ins-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.ins-hero__shade{position:absolute;inset:0;background:var(--hero-shade)}
.ins-hero__in{position:relative;max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;padding:clamp(80px,11vw,140px) var(--gutter)}
.ins-hero__eyebrow{font-size:var(--fs-small);font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--brand-500);margin-bottom:14px}
.ins-hero__h1{font-size:clamp(36px,6.4vw,72px);font-weight:800;letter-spacing:-2.4px;line-height:var(--lh-display)}
.ins-hero__lead{font-size:16px;color:rgba(255,255,255,.88);line-height:var(--lh-body);margin-top:18px}
.ins-search{margin-top:28px;max-width:520px;position:relative}
.ins-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);fill:none;stroke:var(--white);stroke-width:2}
.ins-search input{width:100%;box-sizing:border-box;padding:15px 18px 15px 50px;border:1.5px solid rgba(255,255,255,.35);border-radius:var(--radius-md);background:rgba(255,255,255,.08);color:var(--white);font-size:16px;outline:none}
.ins-search input::placeholder{color:rgba(255,255,255,.7)}

.ins-cat{font-size:var(--fs-small);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--brand-500)}
.ins-blurb{font-size:16px;color:var(--gray-400);line-height:var(--lh-snug);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ins-meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:16px;color:var(--black)}   /* date and read time: dark, a gap, no dot */
.ins-meta--lead{margin-top:12px}.ins-meta--row{margin-top:6px}

.ins-group{margin-top:clamp(44px,5.2vw,64px)}
.ins-group:first-child{margin-top:0}   /* the first group sits one section padding under the hero */
.ins-group__h{font-size:clamp(22px,2.6vw,26px);font-weight:800;letter-spacing:-.4px;text-transform:uppercase}
.insgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,3.4vw,44px);margin-top:18px;align-items:start}
.ins-lead,.ins-row{color:var(--black)}.ins-lead:hover,.ins-row:hover{color:var(--brand-600)}
.ins-lead{display:block}
.ins-lead__img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:var(--radius-sm);display:block}
.ins-lead__img{margin-bottom:14px}.ins-lead__img--wide{margin-bottom:16px}   /* the design's every third group has a 16px gap under the picture, the rest 14px */
.ins-lead__cat{margin-top:14px}
.ins-lead__t{font-size:clamp(21px,2.6vw,27px);font-weight:800;letter-spacing:-1px;line-height:var(--lh-title);text-wrap:pretty;margin-top:6px}
.ins-lead__p{font-size:16px;color:var(--gray-600);line-height:var(--lh-body);margin-top:10px}
.ins-list{display:flex;flex-direction:column;grid-row:span 2}
.insgrid--nomore .ins-list{grid-row:auto}   /* no "See all" link: no empty second row (its row gap left 44px extra under the group) */
.ins-list__k{font-size:16px;font-weight:700;color:var(--gray-400);padding-bottom:4px}
.ins-row{display:flex;gap:16px;align-items:flex-start;padding:14px 0}
.ins-row__img{flex:none;width:96px;height:72px;object-fit:cover;border-radius:var(--radius-sm)}
.ins-row__b{min-width:0}
.ins-row__t{font-size:16px;font-weight:800;letter-spacing:-.35px;line-height:1.3;margin-top:4px}
.ins-more{grid-column:1;font-size:var(--fs-small);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--brand-500);justify-self:start;margin-top:0}
.ins-more:hover{color:var(--brand-600)}
@media (max-width:860px){
  .insgrid{grid-template-columns:minmax(0,1fr)}
  .ins-list{grid-row:auto}
  .ins-more{grid-column:auto;order:3}
}
.ins-note{font-size:var(--fs-fine);color:var(--gray-400);line-height:var(--lh-body);margin-top:32px}

/* search results */
.ins-results{margin-top:26px}
.ins-resline{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline}
.ins-resn{font-size:16px;color:var(--gray-400)}
.ins-clear{font-size:16px;font-weight:700;color:var(--brand-500)}.ins-clear:hover{color:var(--brand-600)}
.ins-resgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin-top:18px}
.ins-card{border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;color:var(--black)}
.ins-card:hover{border-color:var(--brand-500);color:var(--black)}
.ins-card__img{width:100%;height:132px;object-fit:cover;display:block}
.ins-card__b{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.ins-card__t{font-size:16px;font-weight:800;letter-spacing:-.4px;line-height:1.3;margin-top:7px}
.ins-card__m{display:flex;gap:14px;font-size:16px;color:var(--gray-400);margin-top:auto;padding-top:14px}

/* ---------- thank-you page (after the registration; prod /thank-you/) ---------- */
.thx{border-bottom:1px solid var(--gray-100)}
.thx__in{max-width:var(--maxw);margin:0 auto;padding:var(--sec-y) var(--gutter);text-align:center}
.thx__sun{width:120px;height:120px;display:block;margin:0 auto 24px}
.thx__h{text-wrap:balance;font-size:clamp(30px,5vw,40px);font-weight:800;letter-spacing:-1.6px;line-height:var(--lh-heading);max-width:640px;margin:0 auto}
.thx__p{font-size:16px;color:var(--gray-600);line-height:var(--lh-body);margin:16px auto 0;max-width:480px}
.thx__btn{margin-top:32px}
/* ===== pages-c sheet: Green Rewards, Privacy and Terms. Values copied from emit_html/{green-rewards,privacy,terms}.html ===== */

/* ---------- Green Rewards (emit_html/green-rewards.html) ---------- */
.gr-hero{position:relative;color:var(--white);background:var(--black);overflow:hidden}
.gr-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.gr-hero::before{content:"";position:absolute;inset:0;z-index:1;background:var(--hero-shade);pointer-events:none}
.gr-hero__in{position:relative;z-index:2;max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;padding:clamp(96px,14vw,170px) 24px clamp(88px,12vw,150px)}
.gr-hero__h{margin:0;font-weight:800;line-height:var(--lh-display)}   /* Figma: line 1 40px, line 2 64px (user 2026-10-23) */
.gr-hero__l1{display:block;font-size:clamp(26px,4vw,40px);letter-spacing:-1.4px}
.gr-hero__l2{display:block;font-size:clamp(36px,6.4vw,64px);letter-spacing:-2.4px}
.gr-pink{color:var(--brand-500)}
.gr-hero__lead{font-size:18px;line-height:var(--lh-normal);margin-top:18px;color:rgba(255,255,255,.9)}
.gr-hero__b{color:var(--white)}
.gr-hero__cta{margin-top:30px}
.gr-band{background:var(--gray-100)}
.gr-wrap{max-width:1140px;margin:0 auto;padding:clamp(40px,4vw,56px) 24px}
@media (max-width:900px){.gr-wrap{padding-top:44px;padding-bottom:44px}}   /* site.css: the design's inline clamp(40px,4vw,56px) sections are 44px on phones and tablets */
.gr-eyebrow{font-size:14px;font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--brand-500);margin-bottom:12px}
.gr-h2{margin:0;font-size:clamp(30px,5vw,40px);font-weight:800;letter-spacing:-1.6px;line-height:var(--lh-heading)}
.gr-h2--lg{font-size:clamp(28px,5vw,44px)}
.gr-lede{font-size:16px;color:var(--gray-600);line-height:var(--lh-body);margin-top:14px}
.gr-grid{display:grid;gap:14px}
.gr-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.gr-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.gr-grid--5{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:28px 22px}
.gr-grid--steps{margin-top:36px}
.gr-grid--cards{margin-top:32px}
.gr-title{margin:12px 0 0;font-size:18px;font-weight:800;letter-spacing:-.2px;line-height:1.35}
.gr-card .gr-title{margin-top:0}
.gr-text{font-size:16px;color:var(--gray-600);line-height:var(--lh-normal);margin-top:8px}
.gr-text--dark{color:var(--black);margin-top:0}
.gr-text--note{margin-top:12px}
.gr-card{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-md);padding:22px 22px 24px}
.gr-card--grey{background:var(--gray-100);border-color:var(--gray-100)}
.gr-card--pink{background:var(--brand-50);border-color:var(--brand-200)}

/* ---------- Privacy policy and Terms (emit_html/privacy.html, terms.html) ---------- */
.lg{border-bottom:1px solid var(--gray-100)}
.lg__in{max-width:1140px;margin:0 auto;padding:var(--sec-y) 24px}
.lg__h{font-size:clamp(36px,6.4vw,60px);font-weight:800;letter-spacing:-2.4px;line-height:var(--lh-display);margin:0 0 .67em}
.lg__date{font-size:var(--fs-small);color:var(--gray-400);margin-top:12px}
.seo-legal{font-size:16px;line-height:var(--lh-body);color:var(--black);max-width:820px}
.seo-legal p{margin:0 0 14px}
.seo-legal ol,.seo-legal ul{margin:0 0 14px;padding-left:24px}
.seo-legal li{margin:0 0 8px}
.seo-legal ol ol{list-style:lower-alpha;margin-top:8px}
.seo-legal ol ol ol{list-style:lower-roman}
.seo-legal table{border-collapse:collapse;margin:12px 0 18px;font-size:16px;display:block;overflow-x:auto}
.seo-legal td,.seo-legal th{border:1px solid var(--gray-200);padding:8px 10px;vertical-align:top}
@media (max-width:480px){.seo-legal table,.seo-legal tbody,.seo-legal thead,.seo-legal tr,.seo-legal td,.seo-legal th{display:block}.seo-legal tr{margin-bottom:-1px}.seo-legal td:first-child,.seo-legal th:first-child{font-weight:700;border-bottom:0;padding-bottom:2px}.seo-legal td:not(:first-child),.seo-legal th:not(:first-child){border-top:0;padding-top:2px}}
.seo-legal a{color:var(--brand-600)}
.seo-legal h2{font-size:clamp(22px,3.2vw,28px);font-weight:800;letter-spacing:-1px;line-height:var(--lh-heading,1.08);margin:40px 0 12px;color:var(--black)}
.seo-legal h3{font-size:18px;font-weight:800;margin:26px 0 8px;color:var(--black)}
.seo-lang-in{position:absolute;opacity:0;pointer-events:none}
.seo-lang{display:inline-flex;gap:4px;margin:28px 0 24px;padding:4px;border-radius:var(--radius-full);background:var(--gray-100)}
.seo-lang label{padding:9px 22px;border-radius:var(--radius-full);font-size:16px;font-weight:700;color:var(--gray-400);cursor:pointer}
#seo-lang-en:checked~.seo-lang label[for=seo-lang-en],#seo-lang-bm:checked~.seo-lang label[for=seo-lang-bm]{background:var(--white);color:var(--black);box-shadow:var(--shadow-sm)}
.seo-lang-in:focus-visible~.seo-lang{outline:2px solid var(--brand-500);outline-offset:2px}
#seo-lang-en:checked~.seo-pane-bm,#seo-lang-bm:checked~.seo-pane-en{display:none}
.seo-pane-en>:last-child,.seo-pane-bm>:last-child{margin-bottom:0}
.seo-tnc{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:20px;margin-top:40px;max-width:none}
.seo-tnc section{background:var(--gray-100);border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:28px 28px 22px}
.seo-tnc .hd{margin:0 0 18px;font-size:clamp(22px,3.2vw,28px);font-weight:800;letter-spacing:-1px;line-height:var(--lh-heading,1.08);color:var(--black)}
.seo-tnc ul{list-style:none;padding:0;margin:0}
.seo-tnc li{margin:0 0 12px}
.seo-tnc li a{display:flex;gap:12px;align-items:flex-start;color:var(--black);text-decoration:none;font-weight:600;font-size:16px}
.seo-tnc li a:hover{color:var(--brand-600)}
.seo-tnc li svg{flex:none;margin-top:3px}
.seo-tnc .tc-arch{margin-top:18px;font-size:16px;font-weight:600;color:var(--gray-600)}
.seo-tnc .tc-arch+ul{margin-top:10px;padding-left:22px}
.seo-tnc .tc-arch+ul svg{display:none}
/* ===== sedadocument (Upload IC and SEDA Documents) ===== copied from www.emitsolar.com's /sedadocument/ (its page style, the site's snippet CSS and the upload plugin's CSS), every rule under .seda-page so nothing leaks to other pages.
   The live values are kept (colours, sizes, radii; tokens are not used on purpose). Where the live page had a <div>, <h3> or <img> that is clickable, this kit has a native <button>
   (S-INTERACTIVE), so a few rules below restore its look; the picture backgrounds the live CSS took from /wp-content/uploads are <Img>s here. */
.seda-page *,.seda-page *::before,.seda-page *::after{box-sizing:border-box}
/* ===== sedadocument (Upload IC and SEDA Documents): copied from www.emitsolar.com's page, every rule under .seda-page so nothing leaks ===== */
.seda-page .dnd-icon-remove.deleting{font-size:12px; color:#000; font-weight: 500; position: relative; top:-3px;}
.seda-page .dnd-icon-remove.deleting:after{display:none!important;}
.seda-page .dnd-upload-status{display:flex; padding:4px 0; align-items:center; position:relative;}
.seda-page .dnd-upload-status .dnd-upload-image{width:40px; height:40px; border:1px solid #a5a5a5; text-align:center; border-radius:100%; position:relative;}
.seda-page .dnd-upload-status .dnd-upload-image span.file{background-image: url("data:image/svg+xml,%0A%3Csvg width='18' height='23' viewBox='0 0 18 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.569 0.659576H0.5V23H18V6.09053L12.569 0.659576ZM12.7872 1.93075L16.7288 5.87234H12.7872V1.93075ZM1.24468 22.2553V1.40426H12.0426V6.61702H17.2553V22.2553H1.24468Z' fill='%235C5B5B'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 100%; height: 21px; width: 16px; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -moz-transform : translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.seda-page .dnd-upload-status .dnd-upload-details{padding-left:10px; width: calc(100% - 40px);}
.seda-page .dnd-upload-status .dnd-upload-details .name{color:#016d98; padding:4px 0; padding-right:60px; display:flex;}
.seda-page .dnd-upload-status .dnd-upload-details .name span{text-overflow: ellipsis; white-space: nowrap; overflow: hidden; position: relative; padding-right:10px;}
.seda-page .dnd-upload-status .dnd-upload-details .name em{color:#444242;	font-weight:700;}
.seda-page .dnd-upload-status .dnd-upload-details .remove-file{position:absolute; right:0; top:10px; text-decoration:none; box-shadow:none; outline:none; opacity:1;}
.seda-page .dnd-upload-status.in-progress .remove-file{opacity:0.2;}
.seda-page .dnd-upload-status .dnd-upload-details span.has-error{color:#f50505;}
.seda-page .dnd-upload-status .dnd-upload-details .dnd-progress-bar{display: block; border-radius: 5px; overflow: hidden; background: #565555; height: 14px;}
.seda-page .dnd-upload-status .dnd-upload-details .dnd-progress-bar span{background: #4CAF50; display: block; font-size: 11px; text-align: right; color: #fff; height: 100%; width:0; line-height:14px;}
.seda-page .dnd-upload-status .dnd-upload-details .dnd-progress-bar span.complete{width:100%!important; padding-right:5px;}
.seda-page .dnd-upload-counter{position:absolute; right:5px; bottom:3px; font-size:12px;}
.seda-page .codedropz-upload-handler{border:2px dashed #c5c5c5; border-radius:5px; margin-bottom:10px; position:relative;}
.seda-page .codedropz-upload-container{padding:15px 20px;}
.seda-page .codedropz-upload-inner{overflow:hidden; width:100%; text-align:center; text-overflow: ellipsis; font-weight:inherit;}
.seda-page .codedropz-upload-inner .codedropz-btn-wrap .cd-upload-btn{text-decoration:none; box-shadow:none;}
.seda-page .codedropz-upload-inner .dz-title{margin:5px 0; font-size:30px; line-height:32px; word-break:break-word;}
.seda-page .codedropz-dragover{border-color:#6b6a6a;}
.seda-page .codedropz-upload-wrapper span.has-error-msg{display:inline-block; color:#ff0000; padding:5px 0; font-style:italic;}
@media screen and (max-width: 767px){
.seda-page .dnd-upload-status .dnd-upload-details .name em{font-weight:normal;}
.seda-page .dnd-upload-status .dnd-upload-details .name{padding-right:60px;}
.seda-page .codedropz-upload-inner .dz-title{font-size:22px;}
}
.seda-page .seda-personal-info{border-radius: 15px; background: #F2F2F2; padding: 30px; gap: 25px 32px; gap: 20px 31px; display: flex; flex-wrap: wrap; margin-bottom: 30px; max-width: 830px; margin-left: auto; margin-right: auto;}
.seda-page .seda-personal-info:last-of-type{margin-bottom: 0;}
.seda-page .seda-personal-info .upload-docs-headers .hd{display: block; width: 100%;}
.seda-page .seda-personal-info .upload-docs-headers span{color: #000; font-family: 'Work Sans', var(--font); font-size: 12px; font-style: italic; font-weight: 400; margin-bottom: 16px;}
.seda-page .seda-personal-info .upload-docs-headers{display: flex; flex-direction: column; min-width: 50%; min-height: 88px;}
.seda-page .seda-personal-info .upload-docs-cont{display: flex; justify-content: space-between; grid-gap: 24px;}
@media screen and (max-width: 919px){
.seda-page .upload-info{gap: 16px;}
.seda-page .seda-personal-info .upload-docs-headers{min-height: auto;}
.seda-page .seda-personal-info .upload-docs-cont{display: flex; flex-direction: column; grid-gap: 24px;}
}
@media screen and (max-width: 492px){
.seda-page #upload-doc-form .codedropz-upload-handler{width: auto !important;}
}
.seda-page .seda-personal-info label{position: absolute; top: 50%; transform: translatey(-50%); left: 15px; z-index: 2; transition: all .5s ease-in-out; pointer-events: none;}
.seda-page .seda-personal-info .form-item.focused input{border-color: #14D0EF !important; border-color: #C16FFB !important;}
.seda-page .seda-personal-info .form-item.focused label,
.seda-page .seda-personal-info .form-item.local-search label,
.seda-page .seda-personal-info .form-item.content label{top: 8px; transform: translateY(0%); font-size: 12px;}
@media screen and (max-width: 500px){
.seda-page .seda-personal-info .form-item.local-search input{padding-top: 30px;}
.seda-page .seda-personal-info .form-item.focused label,
.seda-page .seda-personal-info .form-item.local-search label,
.seda-page .seda-personal-info .form-item.content label{font-size: 10px; max-width: 90%;}
}
.seda-page .seda-personal-info .form-item.local-search input::placeholder{font-weight: 300;}
.seda-page .seda-personal-info .form-item.local-search input::-webkit-input-placeholder{font-weight: 300;}
.seda-page .seda-personal-info .form-item.local-search input::-moz-placeholder{font-weight: 300; opacity: 1;}
.seda-page .seda-personal-info .form-item.local-search input:-ms-input-placeholder{font-weight: 300;}
.seda-page .seda-personal-info input{border-radius: 15px; border: 2px solid #000; background: #FFF; padding: 20px 15px 12px; font-size: 16px; font-weight: 600; outline: none; appearance: none; -moz-appearance: textfield;}
.seda-page .seda-personal-info .form-item{position: relative; width: calc(50% - 16px);}
.seda-page .seda-personal-info .form-item.error-parent{margin-bottom: 15px;}
.seda-page .seda-personal-info .form-item.error-parent input{border-color: red;}
@media screen and (max-width: 500px){
.seda-page .seda-personal-info .form-item{width: 100%;}
}
.seda-page .seda-personal-info .form-item.focused .form-tooltip{display: block;}
.seda-page .seda-personal-info .form-tooltip{position: absolute; bottom: calc(100% + 7px); background: #FFF8FE; border-radius: 15px; border: 1px solid #DDAEFF; padding: 12px 15px; z-index: 3; display: none; color: #000; font-family: 'Work Sans', var(--font); font-size: 12px; font-style: normal; font-weight: 400; line-height: 14px; filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.15));}
.seda-page .seda-personal-info .form-item.full-width{width: 100%;}
.seda-page .seda-personal-info select{border-radius: 15px; border: 2px solid #000; background: #FFF; padding: 20px 15px 12px; font-size: 16px; font-weight: 600; outline: none;}
.seda-page .codedropz-upload-wrapper{display: flex; flex-direction: column-reverse;}
.seda-page .dnd-upload-status{margin-bottom: 17px;}
.seda-page .dnd-upload-status .dnd-progress-bar{display: none !important;}
.seda-page .dnd-upload-details .name{text-decoration: underline !important;}
.seda-page .dnd-upload-status .dnd-upload-image span.file{display: none !important;}
.seda-page .dnd-upload-status .dnd-upload-image{position: relative !important; border: 0 !important;}
.seda-page .dnd-upload-details span,
.seda-page .dnd-upload-details em{color: #000; font-family: 'Work Sans', var(--font); font-size: 14px; font-style: normal; font-weight: 400; line-height: 18px;}
.seda-page .back-to-home-btn{display: inline-flex; align-content: center; gap: 5px; margin-bottom: 100px; margin-bottom: 28px; margin-top: 23px;}
@media screen and (max-width: 500px){
.seda-page .back-to-home-btn{margin-top: 0; background: #F2F2F2; margin-bottom: 58px; margin-bottom: 28px;}
}
.seda-page .back-to-home-btn span{color: #000; font-family: 'Work Sans', var(--font); font-size: 14px; font-style: normal; font-weight: 600; line-height: 2;}
.seda-page .back-to-home-btn:hover{text-decoration: underline;}
.seda-page .form-item.disabled input,
.seda-page .form-item.disabled select{pointer-events: none;}
.seda-page #upload-doc-form{background-color: #fff;}
.seda-page #upload-doc-form{padding: 4px;}
@media screen and (min-width: 500px){
.seda-page #upload-doc-form{padding: 20px;}
}
.seda-page #upload-doc-form .title{text-align: center; max-width: 600px; max-width: 711px; margin: 0 auto 38px;}
.seda-page #upload-doc-form .hd{color: #000; font-family: 'Work Sans', var(--font); font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; margin-bottom: 0;}
.seda-page #upload-doc-form .codedropz-upload-handler{border-radius: 15px; width: 370px;}
.seda-page #upload-doc-form .codedropz-upload-inner{display: flex; flex-direction: column;}
.seda-page #upload-doc-form .codedropz-upload-inner .dz-title,
.seda-page #upload-doc-form .codedropz-btn-wrap .cd-upload-btn{font-size: 18px !important;}
.seda-page #upload-doc-form .codedropz-upload-inner span{font-size: 18px !important; font-style: normal; margin-bottom: 0px;}
.seda-page #upload-doc-form span.dnd-upload-counter{font-size: 12px; font-style: normal; margin-bottom: 0px;}
.seda-page .codedropz-upload-handler{width: 100%;}
.seda-page .codedropz-upload-container{padding: 18px !important;}
.seda-page .codedropz-upload-inner{display: flex; align-items: center; justify-content: center; gap: 5px;}
.seda-page .codedropz-upload-inner .dz-title{width: auto; display: inline-block;}
.seda-page .codedropz-upload-inner .dz-title,
.seda-page .codedropz-upload-inner span{color: #000; font-family: 'Work Sans', var(--font); font-size: 14px !important; font-style: normal; font-weight: 600; line-height: normal;}
@media screen and (max-width: 500px){
.seda-page .codedropz-upload-inner{flex-wrap: wrap;}
.seda-page .codedropz-upload-inner span,
.seda-page .codedropz-upload-inner .dz-title{display: block !important; width: 100%;}
}
.seda-page .modal-display{overflow: hidden !important;}
.seda-page .modal-display .modal-overlay,
.seda-page .modal-display .modal.popup{opacity: 1; z-index: 1000; pointer-events: auto; transition: 0.3s;}
.seda-page .modal-display .modal.popup{top: 50%; transition: 0.3s;}
.seda-page .modal-overlay,
.seda-page .modal.popup{opacity: 0; z-index: -1; pointer-events: none; transition: 0.15s;}
.seda-page .modal-overlay{display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;}
.seda-page .modal{position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); margin: 0 auto; width: 600px; height: auto; flex-shrink: 0; border-radius: 15px; border: 2px solid #000; background: #fff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); transition: 0.3s;}
.seda-page .modal-content{position: relative;}
.seda-page .modal button.close{background: transparent; border: 0; padding: 0 0;}
.seda-page .modal-content > button.close{position: absolute; right: 20px; top: 20px; opacity: 1; transition: 0.3s;}
.seda-page .modal-content > button.close:hover{opacity: 0.5; transition: 0.3s;}
.seda-page .modal-info-icon{position: absolute; left: 0; right: 0; margin: 0 auto; top: -34px; width: 68px; height: 68px; flex-shrink: 0;}
.seda-page .modal-body{text-align: center; padding: 55px 15px 40px;}
.seda-page .modal-body .hd{margin: 0px; font-family: 'Work Sans', var(--font); font-size: 30px; font-style: normal; font-weight: 600; line-height: normal;}
.seda-page .modal-body p{padding: 15px 80px 30px; margin: 0 auto; font-family: 'Work Sans', var(--font); font-size: 18px; font-style: normal; font-weight: 400; line-height: normal;}
.seda-page .modal-body button,
.seda-page .container .submit-seda-button button{border-radius: 40px; display: inline-flex; padding: 8px 25px; justify-content: center; align-items: center; gap: 10px; font-family: 'Work Sans', var(--font); font-size: 20px; font-weight: 600; line-height: normal; transition: 0.3s; margin-bottom: 16px;}
.seda-page .marker-tooltip{position: absolute; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 5px; border-radius: 4px; font-family: Arial, sans-serif; font-size: 12px; top: 50%; left: 50%; transform: translateX(-50%);}
.seda-page .disabled{}
.seda-page .main-container{min-height: 78vh;}
.seda-page .codedropz-upload-wrapper{display: flex; flex-direction: column;}
.seda-page .dnd-upload-counter{display: none;}
.seda-page .dnd-upload-status .dnd-upload-details .name span{white-space: pre-wrap;}
.seda-page .submit-seda-button{display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 6px; margin-top: 20px;}
.seda-page #submit-seda-btn{margin-bottom: 0px;}
.seda-page .otp-buttons{display: flex; justify-content: center; gap: 24px;}
.seda-page .otp-timer{text-align: center; margin-top: 10px; font-size: 16px; color: #000;}
.seda-page .otp-input-field input{border-radius: 15px; border: 2px solid #000; background: #FFF; padding: 15px 12px; font-size: 16px; font-weight: 600; outline: none; appearance: none; -moz-appearance: textfield; margin-bottom: 24px;}
.seda-page .modal-display{overflow: hidden !important;}
.seda-page .modal-display .modal-overlay,
.seda-page .modal-display .modal.popup{opacity: 1; z-index: 1000; pointer-events: auto; transition: 0.3s;}
.seda-page .modal-display .modal.popup{top: 50%; transition: 0.3s;}
.seda-page .modal-overlay,
.seda-page .modal.popup{opacity: 0; z-index: -1; pointer-events: none; transition: 0.15s;}
.seda-page .modal-overlay{display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;}
.seda-page .modal{position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); margin: 0 auto; height: auto; flex-shrink: 0; border-radius: 15px; border: 2px solid #000; background: #fff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); transition: 0.3s; width: auto;}
.seda-page .modal-content{position: relative;}
.seda-page .modal button.close{background: transparent; border: 0; padding: 0 0;}
.seda-page .modal-content > button.close{position: absolute; right: 10px; top: 10px; opacity: 1; transition: 0.3s;}
.seda-page .modal-content > button.close:hover{opacity: 0.5; transition: 0.3s;}
.seda-page .modal-info-icon{position: absolute; left: 0; right: 0; margin: 0 auto; top: -34px; width: 68px; height: 68px; flex-shrink: 0;}
.seda-page .lead-personal-info label{font-size: 10px; top: 8px; transform: translateY(0%); max-width: 90%; position: absolute !important;}
.seda-page .seda-download-btn{font-family: 'Work Sans', var(--font); font-size: 12px !important; font-style: italic; display: block; text-align: left; color: #F454CD;}
.seda-page #lead-name-field,
.seda-page #lead-nric-field,
.seda-page #lead-email-field{cursor: not-allowed;}
.seda-page .modal-body{text-align: center; padding: 55px 15px 40px;}
.seda-page .modal-body .hd{margin: 0px; font-family: 'Work Sans', var(--font); font-size: 30px; font-style: normal; font-weight: 600; line-height: normal;}
.seda-page .modal-body p{padding: 15px 80px 30px; margin: 0 auto; font-family: 'Work Sans', var(--font); font-size: 18px; font-style: normal; font-weight: 400; line-height: normal;}
.seda-page .modal-body button,
.seda-page .container .submit-seda-button button{border-radius: 40px; display: inline-flex; padding: 8px 25px; justify-content: center; align-items: center; gap: 10px; font-family: 'Work Sans', var(--font); font-size: 20px; font-weight: 600; line-height: normal; color: #A6A6A6; transition: 0.3s; margin-bottom: 16px;}
.seda-page .modal-body button.btn-confirm-otp,
.seda-page .container .submit-seda-button button.btn-submit-seda{color: #000; background: #f454cd; width: max-content; border: 2px solid #f454cd;}
.seda-page .modal-body button.btn-confirm-otp:hover,
.seda-page .container .submit-seda-button button.btn-submit-seda:hover{background: #fff; color: #f454cd;}
.seda-page .modal-body button.btn-request-otp{color: #fff; background: #000; border: 2px solid #000;}
.seda-page .marker-tooltip{position: absolute; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 5px; border-radius: 4px; font-family: Arial, sans-serif; font-size: 12px; top: 50%; left: 50%; transform: translateX(-50%);}
.seda-page .disabled{background: grey !important; color: #ccc !important; cursor: not-allowed !important; pointer-events: none; border: 2px solid grey !important; outline: none !important;}
.seda-page .lead-disabled{cursor: not-allowed !important; pointer-events: none; border: 2px solid grey !important; outline: none !important;}
.seda-page .upload-docs-card{width: 100%; border-radius: 8px; background: #F7F7F7;}
.seda-page .upload-docs-cont{flex-direction: column; width: 100%;}
.seda-page #upload-doc-form{min-height: 80vh;}
.seda-page #upload-doc-form .back-to-home-btn{background: none;}
.seda-page #upload-doc-form .codedropz-upload-handler{width: 100%; margin-top: 20px;}
.seda-page .seda-collapsable-card{max-width: 640px; padding: 0px; background-color: #FFFFFF; border-radius: 12px; margin-bottom: 16px; gap: 8px;}
.seda-page .seda-collapsable-card .upload-docs-headers{min-width: 100% !important;}
.seda-page .seda-collapsable-card .upload-docs-headers span{margin-bottom: 0;}
.seda-page .seda-collapsable-card .upload-docs-headers{min-height: 0;}
.seda-page .seda-collapsable-card .upload-docs-headers.flex{display: flex;}
@media screen and (min-width: 500px){
.seda-page .seda-personal-info .form-item{width: calc(50% - 4px);}
}
.seda-page .submitted-modal{top: 40%}
.seda-page .form-tooltip{display: none;}
.seda-page #submit-seda-btn-2{background-color: transparent; border: none; font-size: 12px; padding: 0px; margin-top: 20px; margin-bottom: 10px;}
.seda-page .title-desc{font-size: 14px;}
.seda-page .lead-personal-info > .custom-collapsible-content > .form-item > label{position: initial;}
.seda-page .custom_modal{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000; display: none; width: max-content; max-width: 100%; border-radius: 15px; padding: 20px;}
.seda-page .custom_modal > button{margin-top: 10px; display: block; margin-left: auto; font-weight: 600;}
.seda-page .custom_modal > img{width: 400px;}
.seda-page .custom_overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; display: none;}
.seda-page .custom_modal.fade-in{animation: fadeIn 0.3s forwards;}
.seda-page .custom_modal.fade-out{animation: fadeOut 0.3s forwards;}
.seda-page .custom_overlay.fade-in{animation: fadeIn 0.3s forwards;}
.seda-page .custom_overlay.fade-out{animation: fadeOut 0.3s forwards;}
.seda-page .custom_info_button{margin-left: 5px; cursor: pointer; font-size: 20px; border: none !important; background: transparent !important; padding: 0px !important; margin: 0px !important;}
.seda-page .custom-upload-tnb-collapsible-content,
.seda-page .custom-upload-owner-collapsible-content,
.seda-page .custom-upload-collapsible-content,
.seda-page .custom-alternate-collapsible-content,
.seda-page .custom-collapsible-content{display: none; overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out;}
.seda-page .custom-upload-tnb-collapsible-content.expanded,
.seda-page .custom-upload-owner-collapsible-content.expanded,
.seda-page .custom-upload-collapsible-content.expanded,
.seda-page .custom-alternate-collapsible-content.expanded,
.seda-page .custom-collapsible-content.expanded{margin-top: -20px !important; display: flex !important; max-height: 2000px; padding: 0px 16px 16px 16px !important; width: 100%;}
.seda-page .custom-upload-owner-collapsible-btn,
.seda-page .custom-upload-tnb-collapsible-btn,
.seda-page .custom-upload-collapsible-btn,
.seda-page .custom-alternate-collapsible-btn,
.seda-page .custom-collapsible-btn{padding: 20px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 70px;}
.seda-page .upload-arrow,
.seda-page .upload-arrow-owner,
.seda-page .upload-arrow-tnb,
.seda-page .alternate-arrow,
.seda-page .arrow > img{width: 15px;}
.seda-page .upload-arrow,
.seda-page .upload-arrow-owner,
.seda-page .upload-arrow-tnb,
.seda-page .alternate-arrow,
.seda-page .arrow{display: inline-block; transition: transform 0.3s ease; font-size: 12px;}
.seda-page .upload-arrow-owner.down,
.seda-page .upload-arrow-tnb.down,
.seda-page .upload-arrow.down,
.seda-page .alternate-arrow.down,
.seda-page .arrow.down{transform: rotate(180deg); margin-top: 5px;}
.seda-page #upload-doc-form .hd{margin: 0px; -webkit-tap-highlight-color: transparent;}
.seda-page .seda-personal-info .dnd-upload-status{margin-bottom: 0px;}
.seda-page .upload-arrow.ip,
.seda-page .upload-arrow-owner.up,
.seda-page .upload-arrow-tnb.up,
.seda-page .alternate-arrow.up,
.seda-page .arrow.up{transform: rotate(0deg);}
.seda-page .seda-form-body{background-color: #F2F2F2; padding: 24px 16px; border-radius: 12px;}
.seda-page .seda-status-badge{height: 20px !important;}
.seda-page .seda-status-icon{height: 25px !important; width: 25px;}
.seda-page .seda_d-flex_center{display: flex; align-items: center; gap: 8px}
.seda-page .seda-personal-info .remove-file{width: 18px; height: 18px; top: auto !important; right: 12px !important; cursor: pointer;}
.seda-page .seda-personal-info .second-icon{width: 18px; height: 16px; position: absolute; top: auto !important; right: 50px !important; cursor: pointer;}
.seda-page .seda-personal-info .seda-file-reinput{color: #A50000;}
.seda-page .seda-personal-info .dnd-upload-status .dnd-upload-details{padding: 0px !important;}
.seda-page .seda-personal-info .dnd-upload-details .name{text-decoration: unset !important;}
.seda-page .seda-personal-info .dnd-upload-details span{color: #464646; font-weight: 500;}
.seda-page .seda-personal-info .dnd-upload-details em{display: none;}
.seda-page .dnd-upload-details > .seda_file_name > strong{color: #464646; font-weight: 600;}
.seda-page .seda_file_name{display: inline-block; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.seda-page .custom-upload-docs-card{width: 100%; border-radius: 8px; background: #F7F7F7; min-height: 48px; padding: 12px; position: relative; display: flex; align-items: center;}
.seda-page .custom-upload-docs-card .upload-docs-card-label{display: flex; align-items: center; gap: 5px;}
.seda-page .custom-upload-docs-card .upload-docs-card-icon{width: 18px; height: 16px; position: absolute; top: 17px !important; right: 12px !important; cursor: pointer;}
.seda-page .seda-preview-close{margin-right: auto; color: #000; background: #f454cd; border: 2px solid #f454cd; border-radius: 40px;}
.seda-page .seda-preview-close:hover{background: #fff; color: #f454cd;}
.seda-page .seda-modal-title{font-size: 16px; font-weight: 600; margin-bottom: 15px;}
.seda-page .seda-done-icon{height: 45px; width: 45px;}
.seda-page #submitted-modal{width: 350px; border: none !important;}
.seda-page .seda-personal-info .upload-docs-cont{grid-gap: 12px;}
.seda-page .dnd-upload-details{width: calc(100% - 20px);}
.seda-page .dnd-upload-details p{font-size: 12px;}
.seda-page .dnd-upload-details strong{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.seda-page .seda-form-body .dnd-upload-details{display: flex; align-items: center;}
@keyframes fadeIn{from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }}
@keyframes fadeOut{from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }}
.seda-page .mb-1{margin-bottom: 4px;}
.seda-page .flex{display: flex;}
.seda-page .flex-col{flex-direction: column;}
.seda-page .gap-1{gap: 4px;}
.seda-page .font-normal{font-weight: 400;}
.seda-page .font-semibold{font-weight: 600;}
.seda-page #submit-seda-btn{width: 200px;}
.seda-page #nem-docs-remarks{margin-bottom: 20px;}
.seda-page #nem-docs-remarks,
.seda-page #seda-details-remarks{color: #525252; font-size: 14px;}
.seda-page .seda-sample-btn{color: #5B78C1; font-size: 12px; cursor: pointer; margin-top: -7px; display: block;}
.seda-page .seda-thumbnail-cont{min-width: 50px; width: 50px; height: 50px; background: white; display: flex; align-items: center; justify-content: center; border-radius: 12px; overflow: hidden; padding: 7px; margin-right: 10px; margin-left: 10px; margin-top: 5px; margin-bottom: 5px;}
.seda-page #otp-message{padding: 15px 0px 30px;}
.seda-page #alternate_contact_relationship{border-radius: 15px !important; border: 2px solid #000 !important; background: #FFF !important; padding: 20px 15px 12px !important; font-size: 16px !important; font-weight: 600 !important; outline: none !important; appearance: none !important;}
.seda-page .seda-thumbnail-cont img{max-width: 100%; max-height: 100%; object-fit: contain;}
@media screen and (min-width: 768px){
.seda-page .modal{width:600px !important;}
}

/* kit: window states the live page set from script (display / opacity / z-index), and the native-button look of what was a div or an image */
.seda-page .modal-overlay.is-open{display:block;opacity:1;pointer-events:auto}
.seda-page .modal-overlay.is-open .modal{opacity:1;z-index:1000;pointer-events:auto}
.seda-page #upload-doc-form .title .hd{color:#000;font-family:'Work Sans',var(--font);font-size:30px;font-weight:600;line-height:normal;text-align:center}
.seda-page .seda-submitted-h{display:block;font-size:.83em !important;font-weight:700 !important;margin:1.67em 0 !important}
.seda-page .custom_modal .hd{font-size:1em;font-weight:700;margin:1.33em 0}
.seda-page .custom_modal > button{padding:8px 25px;font-size:20px;border-radius:40px;cursor:pointer;color:#000;background:#f454cd;border:2px solid #f454cd}
.seda-page button.custom_overlay{padding:0;border:0;margin:0;cursor:default;background:rgba(0,0,0,.5)}
.seda-page .seda-personal-info .form-item:focus-within input{border-color:#C16FFB}
.seda-page .upload-docs-card-icon img,.seda-page .remove-file img{display:block;width:100%;height:100%}
.seda-page .upload-arrow img,.seda-page .upload-arrow-owner img,.seda-page .upload-arrow-tnb img,.seda-page .alternate-arrow img,.seda-page .arrow img{display:block}
.seda-page .dnd-upload-image img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:16px}
.seda-page .cd-upload-btn{font-weight:600;color:#000;font-family:'Work Sans',var(--font);cursor:pointer}
.seda-page .codedropz-upload-inner::before{content:'';position:relative;width:20px;height:20px;background-size:contain;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%237DF9D2'/%3E%3Cpath d='M10 15V5.5M5.8 9.6 10 5.4l4.2 4.2' fill='none' stroke='%23003d2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.seda-page .codedropz-upload-wrapper{flex-direction:column}
.seda-page .dnd-upload-counter{display:none}
.seda-page [class*=arrow] img{width:15px;height:auto}
.seda-page .seda-personal-info .form-item input,.seda-page .seda-personal-info .form-item select{width:100%}
.seda-page #upload-doc-form{max-width:1160px;margin:0 auto}
.seda-page #upload-doc-form .container{max-width:1120px;margin:0 auto}
.seda-page .seda-collapsable-card > .hd{width:100%}
/* matching the live layout: OTP window stacked and centred; cards 448px; an opened section is as wide as its widest content, centred (the live page's own emergent result) */
.seda-page .otp-input-field{display:flex;flex-direction:column;align-items:center}
.seda-page .otp-input-field label{display:block;position:static;transform:none;pointer-events:auto}
.seda-page .otp-input-field input{width:283px;max-width:100%}
.seda-page .otp-buttons{flex-direction:column;align-items:center;gap:0}
.seda-page .seda-form-body > .seda-collapsable-card{max-width:448px}
.seda-page .seda-form-body [class*=collapsible-content].expanded{width:fit-content !important;max-width:100%;margin-left:auto;margin-right:auto}
.seda-page [data-field=alternate_status],.seda-page #alternate_status_remark{flex-basis:100%}
.seda-page .upload-docs-cont{display:flex}
@media screen and (min-width:501px){.seda-page .custom-alternate-collapsible-content .form-item{width:calc(50% - 4px)}}
.seda-page .seda_d-flex_center{margin:0 auto}
.seda-page button.custom-upload-docs-card{text-align:left;border:0;font:inherit}

/* ===== proposal ("Fetching your proposal ..."): www.emitsolar.com's page is one centred heading in a full-height column ===== */
.proposal-page{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.proposal-page .proposal-title{margin:0;padding:0;text-align:center;font:600 40px/1 'Inter',sans-serif;color:#000}   /* the site's h2 (Inter 600 40px) in Elementor's heading widget (line-height 1, no margin) */
.proposal-page .proposal-error{max-width:560px;margin:16px auto 0;text-align:center;font:400 16px/1.5 'Inter',sans-serif;color:#555}   /* the message when the proposal cannot be opened (not on live, which never says) */

/* ===== solar-calendar-booking and solar-calendar-cancel: the live pages' widget CSS (two <style> widgets of the booking page; the cancel page has the same rules for what it uses), every selector under .cal-page ===== */
.cal-page .calendly-container{font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); display: flex; width: 100%; max-width: 1100px; min-height: 500px; overflow: hidden; border: 1px solid #e2e2e2; box-sizing: border-box; color: #1a1a1a; margin: 0 auto;}
.cal-page .calendly-container *{box-sizing: border-box;}
.cal-page .meeting-details{width: 30%; padding: 40px; border-right: 1px solid #e2e2e2; background-color: #fff; display: flex; flex-direction: column;}
.cal-page .host-name{color: #737373; font-size: 14px; font-weight: 600; margin-bottom: 8px;}
.cal-page .meeting-title{font-size: 24px; font-weight: 700; margin: 0 0 20px 0;}
.cal-page .meeting-info{display: flex; align-items: flex-start; color: #737373; font-size: 15px; margin-bottom: 15px; font-weight: 500; line-height: 1.4;}
.cal-page .meeting-info i{font-size: 18px; margin-right: 12px; color: #737373; margin-top: 2px; width: 20px; text-align: center;}
.cal-page #event_desc_ID a{font-size: inherit; color: var(--emit-pink);}
.cal-page #selected-datetime{margin-top: 15px; color: var(--emit-pink); font-weight: 600; display: none;}
.cal-page #selected-datetime i{color: var(--emit-pink);}
.cal-page .dynamic-panel{width: 65%; padding: 40px; position: relative; min-width: 0;}
.cal-page .view-section{display: none;}
.cal-page .view-section.active{display: block;}
.cal-page .step-1-container{display: flex; gap: 20px; height: 100%;}
.cal-page .calendar-section{flex: 1; transition: all 0.3s ease;}
.cal-page .calendar-header{font-size: 20px; font-weight: 700; margin: 0 0 25px 0;}
.cal-page .month-navigation{display: flex; justify-content: center; align-items: center; margin-bottom: 20px; font-size: 16px;}
.cal-page .nav-arrow{background: none; border: none; color: var(--emit-pink); font-size: 16px; cursor: pointer; padding: 10px; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; transition: 0.2s;}
.cal-page .nav-arrow:hover:not(:disabled){opacity: 50%;}
.cal-page .nav-arrow:disabled{cursor: not-allowed;}
.cal-page .calendar-grid{display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center;}
.cal-page .day-name{font-size: 12px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px;}
.cal-page .date-btn{background: transparent; border: none; border-radius: 50%; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; margin: 0 auto; padding: 0; text-align: center;}
.cal-page .date-btn.available{color: #006bff; background-color: #f0f5ff;}
.cal-page .date-btn.available:hover{background-color: #d6e4ff;}
.cal-page .date-btn.selected{background-color: var(--emit-pink); color: white;}
.cal-page .date-btn.disabled{color: #b2b2b2; cursor: not-allowed; pointer-events: none;}
.cal-page .time-slots-section{width: 200px; display: none; flex-direction: column; gap: 10px; max-height: 400px; overflow-y: auto; padding-left: 20px; border-left: 1px solid #e2e2e2;}
.cal-page .time-slots-section.active{display: flex;}
.cal-page .time-slots-container{display: flex; flex-direction: column; gap: 10px;}
.cal-page .date-heading{font-size: 16px; margin-top: 0; margin-bottom: 15px; font-weight: 600;}
.cal-page .time-slot-wrapper{display: flex; gap: 5px;}
.cal-page .time-btn{flex: 1; border: 1px solid var(--emit-pink); color: var(--emit-pink); background: white; padding: 12px; border-radius: 4px; font-weight: 600; cursor: pointer; transition: 0.2s; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.cal-page .time-btn:hover{opacity: 0.5; background: none; color: var(--emit-pink);}
.cal-page .time-btn.active{background: none; color: var(--emit-pink);}
.cal-page .confirm-btn{display: none; background: var(--emit-pink); color: white; border: none; padding: 12px; border-radius: 4px; font-weight: 600; cursor: pointer; text-align: center; flex-direction: column; align-items: center; justify-content: center;}
.cal-page .time-slot-wrapper.active .confirm-btn{display: flex; flex: 1;}
.cal-page .form-header{display: flex; align-items: center; margin-bottom: 20px;}
.cal-page .back-btn{background: none; border: 1px solid #e2e2e2; border-radius: 50%; width: 38px; height: 38px; font-size: 14px; cursor: pointer; margin-right: 15px; display: flex; justify-content: center; align-items: center; transition: 0.2s; color: #1a1a1a;}
.cal-page .back-btn:hover{background: #f4f5f7; border-color: #d2d2d2;}
.cal-page .form-group{margin-bottom: 18px;}
.cal-page .form-group label{display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px;}
.cal-page .form-group input, .cal-page .form-group textarea{width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; font-family: inherit;}
.cal-page .form-group input:focus, .cal-page .form-group textarea:focus{border-color: #006bff; outline: none; box-shadow: 0 0 0 2px rgba(0,107,255,0.2);}
.cal-page .form-group textarea{resize: vertical; min-height: 80px;}
.cal-page .form-group input[readonly], .cal-page .form-group textarea[readonly]{background-color: #f5f5f5; color: #666; cursor: not-allowed;}
.cal-page .form-group input[readonly]:focus, .cal-page .form-group textarea[readonly]:focus{border-color: #ccc; box-shadow: none;}
.cal-page .submit-btn{background: var(--emit-pink); color: white; border: none; padding: 14px 24px; border-radius: 25px; font-weight: 600; font-size: 15px; cursor: pointer; transition: 0.2s; margin-top: 10px;}
.cal-page .submit-btn:hover{background: var(--emit-pink-dark);}
@media (max-width: 768px){.cal-page .calendly-container{flex-direction: column;}
.cal-page .meeting-details, .cal-page .dynamic-panel{width: 100%; border-right: none;}
.cal-page .meeting-details{border-bottom: 1px solid #e2e2e2; padding: 30px;}
.cal-page .dynamic-panel{padding: 30px;}
.cal-page .step-1-container{flex-direction: column;}
.cal-page .time-slots-section{width: 100%; border-left: none; padding-left: 0; border-top: 1px solid #e2e2e2; padding-top: 20px; margin-top: 20px;}
}
.cal-page .booking-modal{position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; justify-content: center; align-items: center; z-index: 9999;}
.cal-page .booking-modal.show{display: flex;}
.cal-page .booking-modal-content{background: white; width: 90%; max-width: 500px; border-radius: 12px; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.15);}
.cal-page .booking-modal-actions{display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap;}
.cal-page .btn-primary, .cal-page .btn-secondary, .cal-page .btn-danger{border: none; cursor: pointer; padding: 10px 16px; border-radius: 8px;}
.cal-page .btn-primary{background: #006bff; color: white;}
.cal-page .btn-secondary{background: #e5e7eb;}
.cal-page .btn-danger{background: #dc2626; color: white;}
.cal-page .calendar-modal-btn{padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem;}
.cal-page .calendar-modal-btn:hover{background-color: #0056b3;}
.cal-page .calendar-modal-overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;}
.cal-page .calendar-modal-overlay.calendar-modal-active{opacity: 1; visibility: visible;}
.cal-page .calendar-modal-content{background-color: #ffffff; width: 90%; max-width: 500px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); transform: translateY(-20px); transition: transform 0.3s ease;}
.cal-page .calendar-modal-overlay.calendar-modal-active .calendar-modal-content{transform: translateY(0);}
.cal-page .calendar-modal-header{display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #eaeaea;}
.cal-page .calendar-modal-title{margin: 0; font-size: 1.25rem; color: #333;}
.cal-page .calendar-modal-close-btn{background: none; border: none; font-size: 1.5rem; font-weight: bold; color: #888; cursor: pointer; line-height: 1; padding: 0;}
.cal-page .calendar-modal-close-btn:hover{color: #333;}
.cal-page .calendar-modal-body{padding: 20px; color: #555; line-height: 1.5;}

/* ----- kit side of the two pages: the live theme's font and h2/h3 look (Work Sans body 18px; headings Inter 600), the pink variables, native buttons for the live <div>s, the font's <i> ----- */
.cal-page{--emit-pink:#F94BC0;--emit-pink-dark:#AA0EA3;padding:10px;margin:0 auto 30px;max-width:1140px;font:400 18px/normal 'Work Sans',sans-serif;color:#000}
.cal-page .calendly-container{margin:0 auto}
.cal-page button{font-family:inherit}
.cal-page .fa-i{display:inline-block;font-style:normal;line-height:1;text-rendering:auto}
.cal-page .fa-i svg{display:block;display:inline-block;vertical-align:-.125em;overflow:visible}
.cal-page .meeting-info i svg{margin:0 auto}
.cal-page .time-btn,.cal-page .confirm-btn,.cal-page .btn-primary,.cal-page .btn-secondary,.cal-page .btn-danger,.cal-page .back-btn,.cal-page .submit-btn{font-family:inherit}
.cal-page .nav-arrow{font-family:inherit}
.cal-page .calendly-container .date-btn,.cal-page .calendly-container .submit-btn,.cal-page .calendly-container .back-btn,.cal-page .form-group input,.cal-page .form-group textarea{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.cal-page .booking-modal-content h2,.cal-page .booking-modal-content h3{margin:0;font:600 30px/36px 'Inter',sans-serif;color:#000}
.cal-page .calendar-modal-title{margin:0;font:600 40px/47px 'Inter',sans-serif;color:#333}
.cal-page .booking-modal-content p{margin:0}
.cal-page .calendar-modal-body p{margin:0}
.cal-page .calendar-modal-close-btn{font-family:'Work Sans',sans-serif}
.cal-page .calendly-container p{margin:0}
.cal-page .cal-overlay-close{position:absolute;inset:0;width:100%;height:100%;cursor:default}
.cal-page .calendar-modal-content{position:relative}

/* ----- /book-appointment/ and its two siblings (block appointment-booking): the live page's own CSS (its widget <style> and the "Emit CSS" rules it uses), scoped to the page ----- */
.appt-page{max-width:1140px;margin:0 auto;padding:10px;font:400 18px/normal 'Work Sans',sans-serif;color:#000}
.appt-page .appt-head{padding:10px}
.appt-page .back-to-home-btn{display:inline-flex;align-content:center;gap:5px;margin-bottom:28px;margin-top:23px}
.appt-page .back-to-home-btn span{color:#000;font-family:'Work Sans',sans-serif;font-size:14px;font-style:normal;font-weight:600;line-height:2}
.appt-page .back-to-home-btn:hover{text-decoration:underline}
@media screen and (max-width:500px){.appt-page .back-to-home-btn{margin-top:0;background:#F2F2F2}}
.appt-page .appt-title{margin:8px 0 16px;line-height:normal;text-align:center;color:#000;font:700 30px/normal 'Work Sans',sans-serif}
.appt-page .appt-main{display:flex;flex-direction:column;padding:10px}
.appt-page .appt-notice{width:70%;align-self:center;display:flex;justify-content:center;align-items:center;background:#F454CD;border-radius:10px;color:#fff;text-align:center;padding:10px}
.appt-page .appt-notice p{margin:0}
#keep-atp-btn{color:#000;background:#f454cd;border:2px solid #f454cd}
#keep-atp-btn:hover,#replace-atp-btn:hover,#cancel-atp-btn:hover{background:#fff;color:#f454cd}
#replace-atp-btn,#cancel-atp-btn{color:#fff;background:#000;border:2px solid #000}
#cancel-apt-overlay{position:fixed;width:100vw;height:100vh;background:rgba(0,0,0,0.5);top:0;left:0;display:none;align-items:center;justify-content:center}
.appt-page .loader{position:fixed;width:100vw;height:100vh;background:rgba(0,0,0,0.5);top:0;left:0;display:none;align-items:center;justify-content:center}
#cancel-apt-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;align-items:center}
#cancel-apt-buttons > button{margin-bottom:0px !important;width:max-content;font-size:15px;padding:8px 12px}
.appt-page .loader-icon{border:10px solid #f3f3f3;border-radius:50%;border-top:10px solid #F454CD;width:120px;height:120px;animation:appt-spin 2s linear infinite}
.appt-page .cancel-apt-modal{top:45%;max-width:95%}
@keyframes appt-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.appt-page .modal{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);margin:0 auto;width:600px;height:auto;flex-shrink:0;border-radius:15px;border:2px solid #000;background:#fff;box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2);transition:0.3s}
.appt-page .modal-content{position:relative}
.appt-page .modal-body{text-align:center;padding:55px 15px 40px}
.appt-page .modal-body .hd{margin:0px;font-family:'Work Sans',sans-serif;font-size:30px;font-style:normal;font-weight:600;line-height:normal}
.appt-page .modal-body p{padding:15px 80px 30px;margin:0 auto;font-family:'Work Sans',sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:normal}
.appt-page .modal-body button{border-radius:40px;display:inline-flex;padding:8px 25px;justify-content:center;align-items:center;gap:10px;font-family:'Work Sans',sans-serif;font-size:20px;font-weight:600;line-height:normal;transition:0.3s;margin-bottom:16px;cursor:pointer}

/* ----- /lead-qr-activation/ (block lead-qr): the "General CSS" utility classes and components the live page uses, the TdcAlert dialog's CSS (WPCode "TDC Alert CSS/JS"), scoped to the page ----- */
.qr-page{--emit-pink:#F94BC0;--emit-pink-dark:#AA0EA3;--white:#ffffff;--black-100:#3B3B3B;--sp-0-5:2px;--sp-2:8px;--sp-2-5:10px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-10:40px;--text-base:1rem;--text-lg:1.125rem;--text-2xl:1.5rem;--font-semibold:600;--clamp-xl:clamp(var(--text-lg),3.5vw,var(--text-2xl));max-width:1100px;margin:0 auto;padding:10px;font:400 18px/normal 'Work Sans',sans-serif;color:#000}
.qr-page .qr-body{display:flex;flex-direction:column}
.qr-page .qr-head{border-bottom:1px solid #000}
.qr-page .qr-title{margin:8px 0 16px;font:600 40px/47px 'Inter',sans-serif;color:#000}
.qr-page .qr-main{display:flex;flex-direction:column}
.qr-page .flex{display:flex !important}.qr-page .flex-col{flex-direction:column !important}.qr-page .flex-wrap{flex-wrap:wrap !important}
.qr-page .justify-between{justify-content:space-between !important}.qr-page .items-start{align-items:flex-start !important}.qr-page .flex-1{flex:1 !important}
.qr-page .mt-2{margin-top:var(--sp-2) !important}.qr-page .mt-3{margin-top:var(--sp-3) !important}.qr-page .mt-4{margin-top:var(--sp-4) !important}.qr-page .mt-5{margin-top:var(--sp-5) !important}
.qr-page .p-4{padding:var(--sp-4) !important}.qr-page .py-4{padding-top:var(--sp-4) !important;padding-bottom:var(--sp-4) !important}
.qr-page .gap-3{gap:var(--sp-3) !important}.qr-page .gap-4{gap:var(--sp-4) !important}.qr-page .rounded-4{border-radius:var(--sp-4) !important}
.qr-page .font-xl{font-size:var(--clamp-xl) !important}.qr-page .font-semibold{font-weight:var(--font-semibold) !important}
.qr-page .text-muted{color:rgba(33,37,41,.75)}
.qr-page .emit-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2-5);padding:var(--sp-5) var(--sp-10);border:none;font-family:inherit;font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--white);letter-spacing:0.01em;background-color:var(--emit-pink);border-radius:var(--sp-4);cursor:pointer}
.qr-page .emit-btn--sm{padding:var(--sp-3) var(--sp-6);font-size:var(--text-base);border-radius:var(--sp-3)}
.qr-page .emit-btn:hover{background-color:var(--emit-pink-dark);color:var(--white)}
.qr-page .emit-btn:active{transform:scale(0.98)}
.qr-page .emit-badge--pink{background-color:#ffd9f6;color:var(--emit-pink)}
.qr-page #contactForm{margin:0}
.qr-page #contactForm label{display:inline-block;line-height:1;vertical-align:middle;margin-bottom:5px;font-weight:400;color:#000}
.qr-page #contactForm input{display:block;width:100%;padding:.5rem 1rem;font:400 1rem/1.5 'Work Sans',sans-serif;color:#333;background-color:transparent;border:1px solid #666;border-radius:3px;box-sizing:border-box}
.qr-page .fa-i{display:inline-block;font-style:normal;line-height:1;text-rendering:auto;margin-inline-end:.5rem}
.qr-page .fa-i svg{display:inline-block;vertical-align:-.125em;overflow:visible}
.qr-page .qr-main h3.hd{margin:0;font:600 30px/36px 'Inter',sans-serif;color:#000}
.qr-page .tdc-overlay-v-1{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);display:flex;justify-content:center;align-items:center;z-index:9999;opacity:0;animation:tdc-fadeIn-v-1 0.2s forwards}
.qr-page .tdc-overlay-v-1.tdc-closing-v-1{animation:tdc-fadeOut-v-1 0.2s forwards}
.qr-page .tdc-modal-v-1{background:#fff;border-radius:8px;width:100%;max-width:400px;padding:30px 20px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.15);transform:scale(0.8);opacity:0;animation:tdc-popIn-v-1 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards;font-family:system-ui,-apple-system,sans-serif;position:relative;overflow:hidden;box-sizing:border-box}
.qr-page .tdc-overlay-v-1.tdc-closing-v-1 .tdc-modal-v-1{animation:tdc-popOut-v-1 0.2s forwards}
.qr-page .tdc-title-v-1{margin:15px 0 10px;font:600 1.5rem/1.175 'Inter',sans-serif;color:#333}
.qr-page .tdc-text-v-1{color:#545454;font-size:1rem;line-height:1.5;margin-bottom:25px}
.qr-page .tdc-actions-v-1{display:flex;justify-content:center;gap:10px}
.qr-page .tdc-btn-v-1{border:none;border-radius:4px;padding:10px 24px;font-family:inherit;font-size:1rem;cursor:pointer;font-weight:500;transition:filter 0.2s;color:white}
.qr-page .tdc-btn-v-1:hover{filter:brightness(0.9)}
.qr-page .tdc-btn-confirm-v-1{background-color:#3085d6}
.qr-page .tdc-btn-cancel-v-1{background-color:#d33}
.qr-page .tdc-icon-v-1{width:80px;height:80px;border:4px solid transparent;border-radius:50%;margin:0 auto 20px;position:relative;box-sizing:content-box}
.qr-page .tdc-icon-success-v-1{border-color:#a5dc86}
.qr-page .tdc-icon-success-v-1::before,.qr-page .tdc-icon-success-v-1::after{content:'';position:absolute;background:#a5dc86}
.qr-page .tdc-icon-success-v-1::before{width:25px;height:5px;transform:rotate(45deg);top:46px;left:14px}
.qr-page .tdc-icon-success-v-1::after{width:47px;height:5px;transform:rotate(-45deg);top:38px;right:8px}
.qr-page .tdc-icon-error-v-1{border-color:#f27474}
.qr-page .tdc-icon-error-v-1::before,.qr-page .tdc-icon-error-v-1::after{content:'';position:absolute;width:47px;height:5px;background:#f27474;top:37px;left:16px}
.qr-page .tdc-icon-error-v-1::before{transform:rotate(45deg)}
.qr-page .tdc-icon-error-v-1::after{transform:rotate(-45deg)}
.qr-page .tdc-icon-warning-v-1{border-color:#f8bb86}
.qr-page .tdc-icon-warning-v-1::before{content:'!';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:60px;color:#f8bb86;font-weight:bold}
.qr-page .tdc-icon-info-v-1{border-color:#3fc3ee}
.qr-page .tdc-icon-info-v-1::before{content:'i';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:60px;color:#3fc3ee;font-weight:bold;font-family:serif}
.qr-page .tdc-timer-progress-bar-v-1{position:absolute;bottom:0;left:0;height:4px;width:100%;background:var(--emit-pink);transform-origin:left}
@keyframes tdc-fadeIn-v-1{from{opacity:0}to{opacity:1}}
@keyframes tdc-fadeOut-v-1{from{opacity:1}to{opacity:0}}
@keyframes tdc-popIn-v-1{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
@keyframes tdc-popOut-v-1{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.8)}}
.qr-page .tdc-backdrop-v-1{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;padding:0;cursor:default}
.qr-page .tdc-modal-v-1{z-index:1}

/* ----- /emit-solar-partner-profile/ (block partner-profile): the Elementor page 9127 layout + the live "Solar Partner Profile" CSS (WPCode, the .sales-partner-* rules, kept as written), scoped to the page ----- */
.pp-page{max-width:960px;margin:0 auto;padding:10px;font:400 16px/24px 'Inter',sans-serif;color:#000}
.pp-page .pp-top{display:flex}
.pp-page .pp-back{display:inline-flex;align-items:center;gap:6px;margin:64px 0 48px;padding:0;background:#fff;color:#000;font:600 14px/1 'Work Sans',sans-serif;text-decoration:none}
@media (max-width:767px){.pp-page .pp-back{margin:94px 0 29px;padding:0 0 0 10px}}
.pp-page .pp-wrap{margin-top:70px;display:flex;flex-direction:column}
.pp-page .pp-card{display:flex;flex-direction:column;gap:20px;background:#fff;border-radius:25px;padding:48px}
.pp-page .pp-intro{display:flex;flex-direction:column;gap:2px}
.pp-page .pp-banner{display:block;width:150px;height:auto;margin:0}
.pp-page .pp-name{margin:0;font:500 36px/1.2 'Work Sans',sans-serif;color:#000}
.pp-page .pp-code p{margin:0;font:400 18px/24px 'Work Sans',sans-serif;color:#A4A4A4}
.pp-page .pp-details{display:flex;flex-direction:row;gap:20px}
.pp-page .pp-logo{display:flex;justify-content:center;align-items:center;align-self:center;background:#F1F1F1;border-radius:16px;padding:8px}
.pp-page .pp-logo-img{display:block;width:400px;max-width:100%;height:200px;object-fit:contain}
.pp-page .pp-rows{display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;align-self:center}
.pp-page .pp-row{display:flex;flex-direction:row;align-items:center;gap:5px}
.pp-page .pp-row-icon{display:block;width:50px;height:auto}
.pp-page .pp-row-text p{margin:0;color:#686868;font:400 16px/24px 'Inter',sans-serif}
.pp-page #company-profile-phone p{font:400 18px/24px 'Work Sans',sans-serif}
.pp-page .pp-cta{display:flex;flex-direction:column}
.pp-page .pp-btn{align-self:center;margin-top:20px;display:inline-block;padding:12px 24px;background:#F454CD;color:#fff;border:2px solid #F454CD;border-radius:27px;font:500 15px/1 'Work Sans',sans-serif;text-align:center;text-decoration:none;transition:all .3s}
.pp-page .pp-btn:hover{background:#fff;color:#000;border-color:#F454CD}
.pp-page .pp-team{min-height:80vh;margin-top:20px}
.pp-page .pp-team-title{margin:0 0 20px;font:500 36px/1.2 'Work Sans',sans-serif;color:#000}
@media (max-width:1024px){.pp-page .pp-name,.pp-page .pp-team-title{font-size:40px;line-height:46px}}
@media (max-width:767px){.pp-page .pp-name,.pp-page .pp-team-title{font-size:30px;line-height:38px;text-align:center}.pp-page .pp-code p{font-size:16px;line-height:22px;text-align:center}.pp-page #company-profile-phone p{font-size:16px;line-height:22px}.pp-page .pp-details{flex-wrap:wrap}.pp-page .pp-card{padding:48px 20px}}
.pp-page .sales-partner-container{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin:auto}
.pp-page .sales-partner-item{display:flex;align-items:center;background:white;padding:14px 16px;border-radius:20px;width:100%;word-wrap:break-word}
.pp-page .sales-partner-img{width:60%;min-width:150px;height:100%;display:flex;align-items:center;justify-content:center}
.pp-page .sales-partner-img img{width:150px;height:150px;border-radius:50%;object-fit:contain;box-shadow:0px 4px 6px rgba(0,0,0,0.1)}
.pp-page .sales-partner-info{display:flex;flex-direction:column;gap:2px;width:100%;height:100%;padding:5px;margin-left:12px}
.pp-page .sales-partner-phone,.pp-page .sales-partner-email{font-size:16px;line-height:normal;font-weight:400;color:#626262;display:block}
.pp-page .sales-partner-name{font-weight:500;line-height:normal;color:black;font-size:24px}
.pp-page .sales-partner-btn{display:inline-block;width:100%;text-align:center;padding:8px 42px;background-color:#E25FC7;color:white;text-decoration:none;border-radius:30px;margin:20px auto;font-size:14px !important}
.pp-page .sales-partner-btn:hover{color:white}
@media (max-width:768px){.pp-page .sales-partner-container{grid-template-columns:repeat(1,1fr)}
.pp-page .sales-partner-img{width:100%;min-width:100px;max-width:100px;padding-left:5px}
.pp-page .sales-partner-img img{width:85px;height:85px;margin:auto}
.pp-page .sales-partner-btn{margin:12px auto;padding:5px 12px;width:fit-content}
.pp-page .sales-partner-item{padding:0px}
.pp-page .sales-partner-name{font-size:20px}
.pp-page .sales-partner-phone,.pp-page .sales-partner-email{font-size:14px}}
.pp-page .fa-i{display:inline-block;font-style:normal;line-height:1;text-rendering:auto}
.pp-page .fa-i svg{display:inline-block;vertical-align:-.125em;overflow:visible}

/* Elementor draws every element border-box (`.elementor *`); the three Elementor pages above need it for their widths */
.appt-page *,.appt-page *::before,.appt-page *::after,.qr-page *,.qr-page *::before,.qr-page *::after,.pp-page *,.pp-page *::before,.pp-page *::after{box-sizing:border-box}
.art{max-width:1140px;margin:0 auto;padding:var(--sec-y) 24px}
.art-crumb{font-size:14px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--brand-500);margin-bottom:14px}
.art-crumb a{color:inherit}.art-crumb span{color:var(--gray-300);margin:0 8px}
.art-h1{font-size:clamp(36px, 6.4vw, 60px);font-weight:800;letter-spacing:-2.4px;line-height:1.02;max-width:900px;margin:0}
.art-lead{font-size:16px;color:var(--gray-600);line-height:1.7;margin-top:18px;max-width:720px}
.art-lead p{margin:0}
.art-meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:16px;color:var(--black);margin-top:18px}
.art-hero{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:16px;display:block;margin-top:36px;background:var(--gray-100)}
.art-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;margin-top:48px;align-items:start}
.art-side{position:sticky;top:150px}
.art-label{font-size:14px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gray-400);padding-bottom:10px;border-bottom:1px solid var(--black)}
.art-more a{display:block;padding:14px 0;border-bottom:1px solid var(--gray-100);color:var(--black)}
.art-more a:hover{color:var(--brand-600)}
.art-more b{display:block;font-size:16px;font-weight:800;letter-spacing:-0.2px;line-height:1.35}
.art-more small{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:16px;color:var(--black);margin-top:5px}
.art-back{display:inline-block;margin-top:18px;font-size:16px;font-weight:700;color:var(--brand-500)}
.prose{max-width:720px;font-size:16px;line-height:1.75;color:var(--gray-600)}
.prose>:first-child{margin-top:0}
.prose p{margin:0 0 16px}
.prose strong,.prose b{color:var(--black)}
.prose a:not(.btn){color:var(--brand-500);font-weight:700}
.prose h2{font-size:clamp(22px, 3.2vw, 28px);font-weight:800;letter-spacing:-1.1px;line-height:1.15;color:var(--black);margin:48px 0 14px}
.prose h3{font-size:16px;font-weight:800;letter-spacing:-0.3px;line-height:1.35;color:var(--black);margin:28px 0 8px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}.prose li{margin:4px 0}
.prose figure{margin:28px 0}.prose img{max-width:100%;height:auto;border-radius:16px;display:block}
.prose figcaption{font-size:16px;color:var(--gray-400);margin-top:8px}
.prose blockquote{margin:24px 0;padding-left:18px;border-left:3px solid var(--brand-500);color:var(--black)}
.prose .callout{background:var(--sand-50);border-radius:16px;padding:22px 24px;margin:24px 0}
.prose .callout.pink{background:var(--brand-50)}
.prose .callout.line{background:var(--white);border:1px solid var(--gray-200)}
.prose>:last-child{margin-bottom:0}.prose .callout>:first-child,.prose .cell>:first-child{margin-top:0}.prose .callout>:last-child,.prose .cell>:last-child{margin-bottom:0}
.prose .callout h3{margin-top:0}
.prose .c{text-align:center}
.prose .row{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0;align-items:stretch}
.prose .row>*{box-sizing:border-box;flex:1 1 calc((100% - (var(--n) - 1) * 14px) / var(--n));min-width:min(120px, 100%);margin:0}
.prose .row>[style*="--w"]{flex:0 1 calc(var(--w) - 14px);min-width:0}
.prose .row>[style*="--w"]:last-child{flex-grow:1}
.prose .row>.arrow{flex:0 0 auto;min-width:0;align-self:center;font-weight:800;color:var(--gray-300)}
.prose .cell{padding:4px 0}
.prose .cell p{margin-bottom:6px}
.prose img.icon{display:inline-block;width:auto;max-width:100%;height:auto;max-height:96px;border-radius:0;margin:0 0 10px}
.prose .ico{display:inline-block;width:44px;height:44px;color:var(--brand-500);margin-bottom:10px}.prose .ico svg{width:100%;height:100%}
.prose li.lr{display:flex;gap:14px}.prose li.lr>p{margin:0}.prose li.lr>p:first-child{flex:0 0 32%;font-weight:700;color:var(--black)}
.prose .frz{position:relative;margin:24px 0 32px}
.prose .frz>div{position:absolute;box-sizing:border-box;display:flex;align-items:center;padding:0 10px;font-size:16px;line-height:1.3}
.prose .frz>.txt{padding:0;color:var(--gray-600)}.prose .frz>.txt{white-space:nowrap}.prose .frz>.b{font-weight:700;color:var(--black)}
.prose .frz>.w{color:var(--white)}.prose .frz>.solid{background:var(--brand-500)}.prose .frz>.pink{background:var(--brand-50)}.prose .frz>.cream,.prose .frz>.line{background:var(--gray-100)}
.prose ul.ticks{list-style:none;padding-left:0}
.prose ul.ticks li{position:relative;padding-left:30px;margin:10px 0}
.prose ul.ticks li>br:first-child{display:none}
.prose ul.ticks li{text-wrap:balance}
.prose ul.ticks li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:999px;background:var(--brand-500);color:var(--white);font-size:16px;font-weight:800;line-height:20px;text-align:center}
.art-lead h5,.art-lead h2.as5{font-size:16px;font-weight:800;font-style:italic;color:var(--black);margin:0 0 8px;letter-spacing:normal;line-height:inherit}
.art-lead h2.as4{font-size:16px;font-weight:700;margin:1.33em 0;letter-spacing:normal;line-height:inherit}
.prose h2.as3{font-size:16px;font-weight:800;letter-spacing:-0.3px;line-height:1.35;color:var(--black);margin:28px 0 8px}
.prose .callout h2.as3{margin-top:0}
.prose .tbl{overflow-x:auto;margin:24px 0}
.prose table{border-collapse:collapse;width:100%;font-size:16px;line-height:1.5}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--gray-200);vertical-align:top}
.prose th{color:var(--black);font-weight:800;background:var(--sand-50)}
.prose details{border-top:1px solid var(--gray-200)}
.prose details:last-of-type{border-bottom:1px solid var(--gray-200)}
.prose summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:16px;font-weight:800;letter-spacing:-0.3px;color:var(--black)}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:"+";flex:none;font-size:20px;color:var(--gray-300);transition:transform .15s}
.prose details[open] summary::after{transform:rotate(45deg);color:var(--brand-500)}
.prose details>div{padding-bottom:12px}
.prose .pill{display:inline-block;font-size:14px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--brand-600);background:rgba(244, 84, 205, 0.12);border-radius:999px;padding:3px 9px;margin-right:8px;vertical-align:2px}
.prose .bar{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:14px 0;font-size:16px}
.prose .bar b{color:var(--black)}
.prose .bar .track{grid-column:1/-1;display:block;height:6px;border-radius:999px;background:var(--gray-100);overflow:hidden}
.prose .bar .track i{display:block;height:100%;background:var(--brand-500)}
.prose .cta{margin:24px 0}
@media (max-width:560px){.prose .row>[style*="--w"]{flex:1 1 100%}}
.prose{container-type:inline-size}
@container (max-width:620px){.prose .row>[style*="--w"]{flex:1 1 100%}}
@media (max-width:860px){.art-cols{grid-template-columns:minmax(0,1fr);gap:48px}.art-side{position:static}.art-hero{aspect-ratio:16/9}}