/* fonts/v2/fonts.css */
@font-face{font-family:"Alexandria";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/v2/alexandria-500-00.9c577e6b2cd3.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/v2/alexandria-500-01.de95b834d870.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;}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/v2/alexandria-500-02.160e264d26e4.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/v2/alexandria-500-03.31ed6e6b4d1f.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;}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/alexandria-700-04.9c577e6b2cd3.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/alexandria-700-05.de95b834d870.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;}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/alexandria-700-06.160e264d26e4.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/alexandria-700-07.31ed6e6b4d1f.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;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/v2/montserrat-600-08.b5818778898b.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/v2/montserrat-600-09.45ea393f38e4.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/v2/montserrat-600-10.d185d272afd4.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;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/v2/montserrat-600-11.f143fb4877cf.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/v2/montserrat-600-12.c154477b9aff.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;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/montserrat-700-13.b5818778898b.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/montserrat-700-14.45ea393f38e4.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/montserrat-700-15.d185d272afd4.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;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/montserrat-700-16.f143fb4877cf.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/montserrat-700-17.c154477b9aff.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;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-400-18.28d74807f63c.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-400-19.23b6197258d7.woff2") format("woff2");unicode-range:U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-400-20.ce3541f3b0e6.woff2") format("woff2");unicode-range:U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-400-21.efba173df084.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-400-22.4edde8ceeb2e.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;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-500-23.28d74807f63c.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-500-24.23b6197258d7.woff2") format("woff2");unicode-range:U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-500-25.ce3541f3b0e6.woff2") format("woff2");unicode-range:U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-500-26.efba173df084.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-500-27.4edde8ceeb2e.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;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-700-28.28d74807f63c.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-700-29.23b6197258d7.woff2") format("woff2");unicode-range:U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-700-30.ce3541f3b0e6.woff2") format("woff2");unicode-range:U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-700-31.efba173df084.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/v2/noto-kufi-arabic-700-32.4edde8ceeb2e.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;}
@font-face{font-family:"Arya Dots 2";font-weight:300;font-display:swap;src:url("/static/fonts/v2/AryaDots2-Thin.e09ef18bf250.woff2") format("woff2");}
@font-face{font-family:"Arya Dots 2";font-weight:400;font-display:swap;src:url("/static/fonts/v2/AryaDots2-Regular.69bd14f5ea45.woff2") format("woff2");}
@font-face{font-family:"Arya Dots 2";font-weight:700;font-display:swap;src:url("/static/fonts/v2/AryaDots2-Bold.65ec2bd7e70e.woff2") format("woff2");}

/* app.css */
/* آريا تيك | الهوية v2 (brand/BRAND_V2/BRAND.md, tokens.json). The tokens below carry the names of tokens.json; the light
   theme is the page's, the navy one a class for the navy sections (.theme-navy). The fonts are local files
   (static/fonts/v2/fonts.css): Alexandria for headings and buttons, Noto Kufi Arabic for text, Montserrat for Latin and
   numbers, Arya Dots 2 for the one hero price of a screen. static/brand-v2.css, loaded last, is the skin itself. */
:root{
  --cta-bg:#167565;--cta-ink:#FFFFFF;--cta-hover:#115E51;--cta-off:#8FB8B0;       /* 1.53.0, the owner: «أخضر غامق بكتابة بيضاء، من ألوان الهوية» — the main order button, wherever it stands, and nothing else */
  --navy:#1F2A4B;--mint:#54BAA7;--charcoal:#1E1E1E;--mint-ink:#167565;--mint-soft:#E0F2EE;--surface:#F1F2F2;--surface-post:#DCDCDE;--surface-raised:#FFFFFF;--surface-navy:#1F2A4B;--ink:#1F2A4B;--ink-muted:#4F5A73;--on-mint:#1F2A4B;--on-navy:#FFFFFF;--line:#DDE1E6;--border-strong:#7A8499;--focus:#167565;--gray-shape:#CBCBCB;--offer:#CF5555;--offer-ink:#B23F3F;--danger:#B42318;--warning:#A15C07;--dot-grey-1:#E0E0E2;--dot-grey-2:#E3E3E5;--dot-grey-3:#E6E6E8;--dot-navy-1:#25315A;--dot-navy-2:#29355F;--dot-navy-3:#2D3A65;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;
  --radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-pill:999px;
  --shadow-card:0 2px 12px rgba(18,40,76,0.08);
  --font-heading:"Alexandria","Montserrat",system-ui,sans-serif;--font-body:"Montserrat","Noto Kufi Arabic",system-ui,sans-serif;--font-latin:"Montserrat",system-ui,sans-serif;--font-accent:"Arya Dots 2","Montserrat",sans-serif;
  /* 1.61.0, the scale of type (the owner: «الخطوط أهم شي عندي لازم تتعالج أحجامها»): every size of text in the stylesheets is one of
     these. A phone first; a wide screen has its own steps below. Order is by weight and colour before size, and one screen
     has one hero number. Under 13px there is only what is drawn inside a picture (static/villa-hud.css). brand/DESIGN_TOKENS.md, 2. */
  --fs-h1:24px;--lh-h1:34px;--fs-h1-hero:26px;--fs-h2:20px;--lh-h2:30px;--fs-h3:16px;--lh-h3:25px;
  --fs-item:15px;--lh-item:24px;--fs-body:15px;--lh-body:26px;--fs-ui:14px;--lh-ui:22px;--fs-small:13px;--lh-small:21px;
  --fs-btn:16px;--lh-btn:24px;--fs-btn-sm:14px;--lh-btn-sm:22px;--fs-num:16px;--lh-num:22px;--fs-num-lg:18px;--lh-num-lg:24px;
  --fs-price-card:34px;--lh-price-card:30px;--fs-price-hero:44px;--lh-price-hero:38px;--fs-price-xl:58px;--lh-price-xl:50px;
  --header-h:56px;                 /* 1.62.0, the owner: «الهيدر الموقع خله 56px»: the bar at the top; what stops or sticks under it is counted from it */
  --fs-field:16px;                  /* what is typed into: never under 16px on a phone, or the iPhone zooms the page */
  /* the names the older rules use, pointing at the tokens */
  --navy-900:var(--navy);--muted:var(--ink-muted);--faint:var(--ink-muted);
  --teal:var(--mint);--teal-700:var(--mint-ink);--teal-800:var(--mint-ink);--teal-soft:var(--mint-soft);--teal-line:#BFE3DB;
  --bg:var(--surface);--line-strong:var(--border-strong);--sand:var(--surface);--sand-2:var(--surface-post);--tone-plain:var(--surface);
  --amber:var(--warning);--amber-soft:#FFF4DE;
  --r-sm:var(--radius-sm);--r:var(--radius-lg);--r-lg:var(--radius-lg);--card-r:var(--radius-lg);
  --shadow:var(--shadow-card);--shadow-up:0 -2px 12px rgba(18,40,76,0.08);
  --gutter:16px;--nav-h:64px;
}
@media (min-width:900px){:root{--header-h:64px;--fs-h1:32px;--lh-h1:42px;--fs-h1-hero:42px;--fs-h2:24px;--lh-h2:34px;--fs-h3:18px;--lh-h3:28px;--fs-item:16px;--lh-item:26px;--fs-body:16px;--lh-body:28px;--fs-ui:15px;--lh-ui:24px;--fs-small:14px;--lh-small:22px;--fs-num:17px;--lh-num:24px;--fs-num-lg:20px;--lh-num-lg:26px;--fs-price-card:38px;--lh-price-card:34px;--fs-price-hero:52px;--lh-price-hero:44px;--fs-price-xl:64px;--lh-price-xl:56px}}
.theme-navy{--navy:#1F2A4B;--mint:#54BAA7;--charcoal:#1E1E1E;--mint-ink:#54BAA7;--mint-soft:#22405A;--surface:#151D35;--surface-post:#151D35;--surface-raised:#1F2A4B;--surface-navy:#2B3963;--ink:#FFFFFF;--ink-muted:#AEB6C8;--on-mint:#151D35;--on-navy:#FFFFFF;--line:#2E3A5E;--border-strong:#6E7A96;--focus:#54BAA7;--gray-shape:#3A4566;--offer:#FF8A7A;--offer-ink:#FF8A7A;--danger:#FF8A7A;--warning:#F5B84D;--dot-grey-1:#E0E0E2;--dot-grey-2:#E3E3E5;--dot-grey-3:#E6E6E8;--dot-navy-1:#25315A;--dot-navy-2:#29355F;--dot-navy-3:#2D3A65;--shadow-card:0 2px 12px rgba(0,0,0,0.35)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
small{font-size:var(--fs-small)}          /* 1.61.0: «smaller» of the browser would take a 13px line under the floor */
h1,h2,h3{color:var(--navy);line-height:1.4;font-weight:600}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
svg{display:block}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* review strip — preview-only, removed in the full build */
.review{background:var(--navy-900);color:#C9D4E5;font-size:var(--fs-small)}
.review .wrap{display:flex;align-items:center;gap:6px;min-height:40px;flex-wrap:wrap;padding-block:4px}
.review b{color:#fff;font-weight:600;margin-inline-end:4px}
.review a{padding:3px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.18)}
.review a[aria-current]{background:var(--teal);border-color:var(--teal);color:var(--navy-900);font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:12px;font-weight:600;font-size:var(--fs-btn);transition:transform .15s,background .15s,box-shadow .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--cta-bg);color:var(--cta-ink)}
.btn-primary:hover{background:var(--cta-hover)}
.btn-primary:disabled,.btn-primary[aria-disabled="true"]{background:var(--cta-off);color:var(--cta-ink);cursor:not-allowed}
.btn-mint{background:var(--teal);color:var(--navy)}
.btn-mint:hover{background:#49A998}
.btn-ghost{background:var(--surface-raised);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn-light{background:#fff;color:var(--navy)}
.btn-sm{min-height:40px;padding:0 14px;font-size:var(--fs-btn-sm);border-radius:12px}
.btn .ico{width:20px;height:20px}

/* top bar (site + portal share the skeleton: menu on the right) */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:10px;height:var(--header-h)}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--navy)}
.icon-btn:hover{background:var(--bg)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--navy);font-size:var(--fs-h3)}
.brand img{height:42px;width:auto}

.topbar .spacer{flex:1}
.desk-nav{display:none;gap:4px;font-weight:600;font-size:var(--fs-small);color:var(--ink)}
.desk-nav a{padding:8px 12px;border-radius:10px;white-space:nowrap}
.desk-nav a:hover{background:var(--bg)}
.pill{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:12px;font-size:var(--fs-small);font-weight:600;background:var(--teal-soft);color:var(--teal-800)}
.pill .ico{width:18px;height:18px}
.title-mid{font-weight:700;color:var(--navy);font-size:var(--fs-h3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* back row — same position on every inner page */
.backrow{background:var(--surface-raised);border-bottom:1px solid var(--line)}
.backrow a{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:600;font-size:var(--fs-small);color:var(--navy)}
.backrow .ico{width:20px;height:20px;color:var(--teal-700)}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(31,42,75,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.drawer{position:fixed;inset-block:0;right:0;width:min(86vw,340px);background:var(--surface-raised);z-index:41;transform:translateX(105%);transition:transform .25s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:14px 14px 24px;overflow-y:auto}
.menu-open .scrim{opacity:1;pointer-events:auto}
.menu-open .drawer{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.drawer a{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 10px;border-radius:12px;font-weight:600;color:var(--ink)}
.drawer a:hover,.drawer a[aria-current]{background:var(--bg);color:var(--navy)}
.drawer a .ico{color:var(--teal-700)}
.drawer .group{font-size:var(--fs-small);color:var(--faint);font-weight:600;padding:14px 10px 4px}
.soon{font-size:var(--fs-small);font-weight:600;color:var(--amber);background:var(--amber-soft);border-radius:7px;padding:1px 9px;margin-inline-start:auto}
.live{font-size:var(--fs-small);font-weight:600;color:var(--teal-800);background:var(--teal-soft);border-radius:7px;padding:1px 9px;margin-inline-start:auto}

/* section heading with the logo's teal bar */
.sec{padding-block:34px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px}
.sec-head h2{font-size:var(--fs-h2)}
.sec-head h2::before{content:"";display:block;width:40px;height:8px;margin-bottom:8px;background:radial-gradient(circle at 4px 50%,var(--teal) 4px,transparent 4.5px),linear-gradient(var(--navy),var(--navy)) right center/calc(100% - 11px) 3px no-repeat}
.sec-head a{font-size:var(--fs-item);font-weight:600;color:var(--teal-700);white-space:nowrap}
.lead{color:var(--muted);font-size:var(--fs-body)}

/* hero */
.hero{position:relative;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 2px 2px,rgba(84,186,167,.55) 1.6px,transparent 2px) 0 0/16px 16px;-webkit-mask-image:linear-gradient(to left,transparent 45%,#000 100%);mask-image:linear-gradient(to left,transparent 45%,#000 100%);opacity:.5;pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding-block:26px 8px;display:grid;gap:18px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:600;color:var(--teal-800)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.hero h1{font-size:var(--fs-h1);font-weight:700;line-height:1.3;margin-top:8px}
.hero h1 em{font-style:normal;color:var(--teal-700)}
.hero p{margin-top:10px;color:var(--muted);font-size:var(--fs-body);max-width:34em}
.cta-row{display:grid;gap:10px;margin-top:18px}
.cta-note{font-size:var(--fs-small);color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:10px}
.cta-note .ico{width:16px;height:16px;color:var(--teal-700)}
.hero-art{width:100%;height:auto;max-width:520px;margin-inline:auto}
.wire{stroke-dasharray:4 6;animation:flow 2.4s linear infinite}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.1);opacity:0}}

/* service cards */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.svc{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s,border-color .15s}
.svc:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--teal-line)}
.svc .badge-ico{width:42px;height:42px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center}
.svc h3{font-size:var(--fs-h3)}
.svc p{font-size:var(--fs-small);color:var(--muted);line-height:1.55}

/* works */
.works{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:10px}
.work{position:relative;border-radius:var(--r);min-height:112px;overflow:hidden;background:
  radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) 1.2px,transparent 1.6px) 0 0/14px 14px,var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:12px}
.work:first-child{grid-row:span 2}
.work.alt{background:radial-gradient(circle at 1px 1px,rgba(31,42,75,.22) 1.2px,transparent 1.6px) 0 0/14px 14px,var(--teal-soft);color:var(--teal-800)}
.work .ico{width:26px;height:26px;opacity:.85;margin-bottom:auto}
.work b{font-size:var(--fs-body)}
.work span{font-size:var(--fs-small);opacity:.8}

/* how we work */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;counter-reset:s}
.step{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:14px;counter-increment:s;position:relative}
.step::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:var(--fs-item);margin-bottom:8px}
.step h3{font-size:var(--fs-h3)}
.step p{font-size:var(--fs-small);color:var(--muted);line-height:1.55}

/* portal teaser */
.teaser{background:var(--navy);border-radius:var(--r-lg);color:#DCE4F1;padding:20px;display:grid;gap:16px;position:relative;overflow:hidden}
.teaser::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.09) 1.2px,transparent 1.6px) 0 0/16px 16px}
.teaser>*{position:relative}
.teaser h2{color:#fff;font-size:var(--fs-h2)}
.teaser p{font-size:var(--fs-body);color:#B9C5D8}
.mini{background:#fff;border-radius:16px;padding:14px;color:var(--ink);box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.mini-top{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-small);color:var(--muted);margin-bottom:8px}
.mini-top b{color:var(--navy);font-size:var(--fs-body)}
.teaser ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:var(--fs-body)}
.teaser li{display:flex;gap:8px;align-items:center}
.teaser li .ico{width:18px;height:18px;color:var(--teal)}

/* group brands */
.brand-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:10px}
.brand-card header{display:flex;align-items:center;gap:10px}
.brand-card header .badge-ico{width:44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center}
.brand-card h3{font-size:var(--fs-h3)}
.brand-card header span{font-size:var(--fs-small);color:var(--muted);display:block;line-height:1.2}
.rows{display:grid;gap:0;font-size:var(--fs-body)}
.rows div{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px dashed var(--line)}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.stack>*{min-width:0}

/* footer */
.foot{background:var(--navy-900);color:#AEBBD0;margin-top:20px;padding:28px 0 calc(28px + env(safe-area-inset-bottom));font-size:var(--fs-small)}




.ask-ai{display:flex;align-items:center;gap:10px;width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;color:#fff;font-weight:600;text-align:start}
.ask-ai .ico{color:var(--teal)}
.ask-ai small{display:block;font-weight:500;color:#AEBBD0;font-size:var(--fs-small)}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:18px;padding-top:14px;font-size:var(--fs-small);color:#7F8DA6}

/* ───────── portal ───────── */
.app{padding-bottom:calc(var(--nav-h) + 22px + env(safe-area-inset-bottom))}
.card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.page-head{padding-block:16px 12px}
.page-head .kicker{font-size:var(--fs-small);color:var(--muted);font-weight:600}
.page-head h1,.page-head .h1{font-size:var(--fs-h1)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:600;border-radius:8px;padding:2px 10px;background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.chip.ok{background:var(--teal-soft);color:var(--teal-800);border-color:var(--teal-line)}
.chip.warn{background:var(--amber-soft);color:var(--amber);border-color:#F3DDB0}

/* stage rail — one compact row, no horizontal scroll, line never passes the current stage */
.rail{--n:7;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:14px -6px 4px;--p:0}
.rail::before,.rail::after{content:"";position:absolute;top:13px;height:4px;border-radius:4px;inset-inline-start:calc(50%/var(--n));}
.rail::before{width:calc(100% - 100%/var(--n));background:var(--line)}
.rail::after{width:calc((100% - 100%/var(--n)) * var(--p));background:var(--teal-700);transition:width 1s cubic-bezier(.3,.7,.2,1)}
.stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 1px;min-width:0}
.dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2.5px solid var(--line-strong);color:transparent;transition:background .3s,border-color .3s,box-shadow .3s}
.dot .ico{width:15px;height:15px;stroke-width:3}
.stage span{font-size:var(--fs-small);font-weight:600;color:var(--faint);line-height:1.2;text-align:center;white-space:nowrap}
.stage.done .dot{background:var(--teal-700);border-color:var(--teal-700);color:#fff}
.stage.done span{color:var(--teal-800)}
.stage.now .dot{border-color:var(--navy);box-shadow:0 0 0 5px rgba(84,186,167,.22)}
.stage.now .dot::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--teal)}
.stage.now span{color:var(--navy);font-weight:700}
.stage[aria-pressed="true"] .dot{outline:2px solid var(--navy);outline-offset:2px}
.rail-cap{font-size:var(--fs-small);color:var(--muted);text-align:center;min-height:22px;margin-top:6px}
.rail-cap b{color:var(--navy)}

.facts{display:grid;gap:0;margin-top:10px}
.fact{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:11px 0;border-top:1px solid var(--line)}
.fact .fi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-800)}
.fact .fi.amber{background:var(--amber-soft);color:var(--amber)}
.fact .fi.navy{background:#E9EDF5;color:var(--navy)}
.fact .ico{width:18px;height:18px}
.fact small{display:block;font-size:var(--fs-small);color:var(--muted);font-weight:600;line-height:1.3}
.fact b{display:block;font-size:var(--fs-body);color:var(--navy);line-height:1.5}
.fact em{font-style:normal;font-size:var(--fs-small);color:var(--muted)}

.rowlink{display:flex;align-items:center;gap:12px;width:100%;text-align:start}
.rowlink .thumb{width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
.rowlink .grow{flex:1;min-width:0}
.rowlink small{display:block;font-size:var(--fs-small);color:var(--muted)}
.rowlink b{display:block;color:var(--navy);font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowlink>.ico{color:var(--faint);width:18px;height:18px}

.pay-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pay-top h2{font-size:var(--fs-h2)}
.amount{font-size:var(--fs-num-lg);font-weight:700;color:var(--navy);line-height:1.2;margin-top:6px}
.amount small{font-size:var(--fs-small);font-weight:600;color:var(--muted);margin-inline-start:4px}
.bar{height:8px;border-radius:8px;background:var(--line);overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;width:0;background:var(--teal-700);border-radius:8px;transition:width 1s .2s cubic-bezier(.3,.7,.2,1)}
.pay-legend{display:flex;justify-content:space-between;font-size:var(--fs-small);color:var(--muted)}
.receipts{margin-top:10px}
.receipt{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);width:100%;text-align:start}
.receipt .ico{width:18px;height:18px;color:var(--teal-700)}
.receipt span{flex:1;font-size:var(--fs-body)}
.receipt b{font-size:var(--fs-body);color:var(--navy)}
.src{font-size:var(--fs-small);color:var(--faint);margin-top:8px;display:flex;gap:6px;align-items:center}
.src .ico{width:14px;height:14px}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{align-content:start;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:6px;text-align:start;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--teal-line);transform:translateY(-2px)}
.tile .badge-ico{width:40px;height:40px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center}
.tile b{color:var(--navy);font-size:var(--fs-body)}
.tile small{color:var(--muted);font-size:var(--fs-small);line-height:1.4}

.tabbar{position:fixed;inset-inline:0;bottom:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar nav{display:grid;grid-template-columns:repeat(5,1fr);max-width:760px;margin-inline:auto;height:var(--nav-h)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-small);font-weight:600;color:var(--faint);position:relative}
.tabbar a[aria-current]{color:var(--teal-800)}
.tabbar a[aria-current]::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 4px 4px;background:var(--teal)}

/* ───────── estimate result ───────── */
.est-head{padding-block:16px 6px}
.est-head h1{font-size:var(--fs-h1);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meta-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#E9EDF3;border-radius:12px;padding:3px;gap:3px}
.seg button{min-height:40px;border-radius:10px;font-weight:600;font-size:var(--fs-btn);color:var(--muted)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(31,42,75,.15)}
.sys{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sys+.sys{margin-top:10px}
.sys-h{display:flex;align-items:center;gap:12px;width:100%;padding:14px;text-align:start}
.sys-h .badge-ico{width:40px;height:40px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center;flex:none}
.sys-h .grow{flex:1;min-width:0}
.sys-h b{display:block;color:var(--navy);font-size:var(--fs-h3)}
.sys-h small{display:block;color:var(--muted);font-size:var(--fs-small);line-height:1.3}
.sys-h .sum{font-weight:700;color:var(--navy);font-size:var(--fs-item);white-space:nowrap}
.sys-h .chev{color:var(--faint);transition:transform .2s;width:18px;height:18px}
.sys[data-open="true"] .chev{transform:rotate(180deg)}
.sys-b{display:none;padding:0 14px 14px}
.sys[data-open="true"] .sys-b{display:block}
.line{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.line .nm{font-size:var(--fs-item);font-weight:600;color:var(--navy);line-height:1.4}
.line .sub{font-size:var(--fs-small);color:var(--muted);line-height:1.4}
.line .price{font-size:var(--fs-item);font-weight:600;color:var(--ink);text-align:end;white-space:nowrap}
.stepper{display:inline-grid;grid-template-columns:36px 34px 36px;align-items:center;border:1.5px solid var(--line-strong);border-radius:12px;height:38px;overflow:hidden;background:#fff}
.stepper button{height:100%;display:grid;place-items:center;color:var(--navy)}
.stepper button:hover{background:var(--bg)}
.stepper button:disabled{color:var(--line-strong);cursor:default;background:none}
.stepper .ico{width:16px;height:16px;stroke-width:2.4}
.stepper output{text-align:center;font-weight:700;color:var(--navy);font-size:var(--fs-item)}
.opt{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:8px}
.opt label{font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.rec{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:var(--teal-soft);border-radius:12px;padding:10px 12px;margin-top:4px}
.rec b{font-size:var(--fs-h3);color:var(--teal-800)}
.rec small{font-size:var(--fs-small);color:var(--teal-800);opacity:.85}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{min-height:36px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-strong);font-size:var(--fs-small);font-weight:600;color:var(--ink);background:#fff}
.chips button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.needs{display:flex;gap:10px;align-items:flex-start;background:var(--amber-soft);border:1px solid #F3DDB0;border-radius:var(--r);padding:12px 14px;margin-top:10px;font-size:var(--fs-body);color:#6B4510}
.needs .ico{color:var(--amber);width:20px;height:20px;margin-top:2px}
.needs b{display:block;color:#5A3A0C}
.est-pad{padding-bottom:150px}
.totalbar{position:fixed;inset-inline:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);box-shadow:var(--shadow-up);padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.totalbar .wrap{display:grid;gap:8px}
.tot-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tot-row>span{font-size:var(--fs-small);color:var(--muted);font-weight:600;line-height:1.3}
.tot-row b{font-size:var(--fs-num-lg);font-weight:700;color:var(--navy);white-space:nowrap}
.tot-row b small{font-size:var(--fs-small);color:var(--muted);margin-inline-start:4px}
.tot-split{font-size:var(--fs-small);color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tot-split .chip{margin-inline-start:auto}

/* toast */
.toast{position:fixed;inset-inline:16px;bottom:calc(var(--nav-h) + 18px);z-index:60;margin-inline:auto;max-width:420px;background:var(--navy-900);color:#fff;border-radius:14px;padding:12px 16px;font-size:var(--fs-body);box-shadow:var(--shadow);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.on{opacity:1;transform:none}
.has-total .toast{bottom:176px}
[hidden]{display:none!important}
.chip{font-style:normal}

/* ───────── forms & feedback ───────── */
.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;font-size:var(--fs-small);font-weight:600;color:var(--navy)}
.form label small,.h-sm small,summary small{font-weight:400;color:var(--muted)}
.field{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:12px;background:#fff;font:inherit;color:var(--ink)}
textarea.field{min-height:auto;line-height:1.7;resize:vertical}
.field:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(84,186,167,.35)}
.field.sm{min-height:42px;padding:6px 10px;font-size:var(--fs-body)}
.form .check,.check{display:flex;align-items:center;gap:10px;font-weight:500;font-size:var(--fs-body);min-height:40px}
.check input{width:20px;height:20px;accent-color:var(--navy);flex:none}
.form.inline{grid-template-columns:1fr auto;align-items:end;margin-top:10px}
.hint{font-size:var(--fs-small);color:var(--muted);line-height:1.6}
/* Quiet motion (static/motion.js). These classes exist only after the script has run and only where it put them:
   the brand line draws itself, and what was below the screen eases in once. No script, or «reduce motion»: none of it. */
/* «الإنجليزية» in the settings */
.en-row{display:grid;gap:6px}
.en-ar{display:block;padding:8px 10px;border-radius:10px;background:#F4F6F9;font-size:var(--fs-body);line-height:1.7;color:var(--ink)}
.en-flag{color:#912018;font-weight:700}
/* English pages read left to right. Nearly everything follows by itself (logical properties); these are the few things that point. */
[dir=ltr] svg.ico:has(use[href$="#go"]),[dir=ltr] svg.ico:has(use[href$="#back"]){transform:scaleX(-1)}
[dir=ltr] .drawer{right:auto;left:0;transform:translateX(-105%)}
[dir=ltr] .menu-open .drawer{transform:none}
[dir=ltr] .fabs{left:auto;right:16px}
/* a narrow phone: the language switch took the room of the portal's words, so the pill is its icon (its full name stays for screen readers) */
@media (max-width:420px){.topbar .pill span{display:none}.topbar .pill{padding:0 11px}}
/* the other language */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border-radius:12px;font-size:var(--fs-small);font-weight:700;color:var(--navy);text-decoration:none}
.lang-switch:hover{background:#EEF2F6}
/* «قل ما تحتاجه» */
.voice{display:grid;gap:10px}
.voice[hidden],.voice [hidden]{display:none}
.voice-row .btn{width:100%;min-height:48px}
.voice-stop .num{margin-inline-start:6px}
.voice-heard{display:grid;gap:8px}
.voice-heard ul{margin:0;padding-inline-start:18px}
.chip.src{width:fit-content;justify-self:start;align-self:flex-start;margin-block:2px}
.hint .ico{display:inline;width:15px;height:15px;vertical-align:-3px}
.notice{display:flex;gap:8px;align-items:flex-start;padding:10px 14px;border-radius:12px;font-size:var(--fs-body);background:#EEF2F6;color:var(--ink);margin:0}
.notice .ico{width:18px;height:18px;margin-top:3px}
.notice.ok{background:var(--teal-soft);color:var(--teal-800)}
.notice.warn{background:var(--amber-soft);color:#5A3A0C}
.notice.err{background:#FDECEA;color:#912018}
.flash{display:grid;gap:8px;margin-top:12px}
.h-sm{font-size:var(--fs-item);margin-bottom:6px}          /* 1.85.9 (ق7): a card's title, 15 / 16, an h3 */
.mt{margin-top:14px}
.more{display:inline-flex;margin-top:10px;font-size:var(--fs-item);font-weight:600;color:var(--teal-700)}
.empty{text-align:center;padding:36px 12px;display:grid;gap:10px;justify-items:center}
.empty>.ico{width:44px;height:44px;padding:10px;border-radius:50%;background:var(--teal-soft);color:var(--teal-800);stroke-width:2.4}
.empty b.num{font-size:var(--fs-price-hero);color:var(--teal);line-height:1}
.empty .rows{width:100%;text-align:start}
.spin{display:inline-block;width:16px;height:16px;border:2.5px solid var(--line-strong);border-top-color:var(--navy);border-radius:50%;animation:spin .8s linear infinite;flex:none;margin-top:4px}
@keyframes spin{to{transform:rotate(360deg)}}
.busy{opacity:.6;transition:opacity .15s}
.grow-note{flex:1;color:var(--muted);font-size:var(--fs-small)}
.rows div>b{margin-inline-start:auto}
.tot-row.sum{margin-top:12px;padding-top:12px;border-top:1.5px solid var(--line)}

/* sheet (ask AI) */
.sheet{position:fixed;inset:0;z-index:70;background:rgba(31,42,75,.5);display:grid;align-items:end}
.sheet-card{background:#fff;border-radius:22px 22px 0 0;padding:18px var(--gutter) calc(22px + env(safe-area-inset-bottom));display:grid;gap:12px;max-width:560px;width:100%;margin-inline:auto;max-height:92vh;overflow:auto}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{font-size:var(--fs-h2)}
.ai-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}


/* public inner pages */
.svc-detail{display:grid;gap:12px;scroll-margin-top:calc(var(--header-h) + 56px)}
.svc-h{display:flex;gap:12px;align-items:flex-start}
.svc-h .badge-ico{width:46px;height:46px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center;flex:none}
.svc-h h2{font-size:var(--fs-h2)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--fs-body)}
.ticks li{display:flex;gap:8px;align-items:flex-start}
.ticks .ico{width:18px;height:18px;color:var(--teal-700);margin-top:4px;stroke-width:2.4}
.cta-band{margin:22px 0;background:var(--navy);color:#C9D4E5;border-radius:var(--r-lg);padding:22px;display:grid;gap:10px;justify-items:start}
.cta-band h2{color:#fff;font-size:var(--fs-h2)}
.cta-band p{font-size:var(--fs-body)}
a.work{transition:transform .15s}
a.work:hover{transform:translateY(-2px)}

/* role entry */
.role-card{display:flex;align-items:center;gap:14px;width:100%;text-align:start;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:16px;transition:border-color .15s,transform .15s}
.role-card:hover{border-color:var(--navy);transform:translateY(-1px)}
.role-card .badge-ico{width:48px;height:48px;border-radius:14px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
.role-card .grow{flex:1}
.role-card b{display:block;color:var(--navy);font-size:var(--fs-h3)}
.role-card small{display:block;color:var(--muted);font-size:var(--fs-small);line-height:1.5}
.role-card>.ico{color:var(--faint)}

/* wizard */
.wiz{padding-bottom:110px}
.wiz-progress{height:5px;background:var(--line);border-radius:5px;margin-top:14px;overflow:hidden}
.wiz-progress i{display:block;height:100%;width:25%;background:var(--teal);border-radius:5px;transition:width .3s}
.wiz-hint{margin:10px 0}
.pick{margin-top:4px}
.pick-card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:6px;text-align:start;transition:border-color .15s,background .15s}
.pick-card .badge-ico{width:42px;height:42px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center}
.pick-card b{color:var(--navy);font-size:var(--fs-body)}
.pick-card small{color:var(--muted);font-size:var(--fs-small)}
.pick-card .tick{position:absolute;top:10px;inset-inline-end:10px;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;color:transparent}
.pick-card .tick .ico{width:14px;height:14px;stroke-width:3}
.pick-card[aria-pressed="true"]{border-color:var(--navy);background:#F3FBF8}
.pick-card[aria-pressed="true"] .tick{background:var(--navy);border-color:var(--navy);color:#fff}
.wiz-nav{position:fixed;inset-inline:0;bottom:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));display:grid}
.wiz-nav .btn{max-width:720px;width:100%;margin-inline:auto}
.wiz section>.seg,.wiz section>.card,.wiz [data-floors-editor]{margin-top:12px}
.stepper.big{grid-template-columns:52px 60px 52px;height:50px;justify-self:start}
.stepper.big output{font-size:var(--fs-num-lg)}
.drop{border:2px dashed var(--line-strong);border-radius:var(--r);padding:22px 14px;text-align:center;justify-items:center;cursor:pointer;background:var(--bg)}
.drop .ico{width:30px;height:30px;color:var(--teal-700)}
.drop:hover{border-color:var(--navy)}
.floor-row{display:grid;gap:10px;margin-top:10px;padding:12px}
.floor-top{display:flex;gap:8px;align-items:center}
.floor-top .field{flex:1;min-height:42px;font-weight:600}
.floor-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mini-field{display:grid;gap:4px;font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.per-floor{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:8px}
details.card summary{cursor:pointer;font-weight:600;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center}
details.card summary::after{content:"+";font-size:var(--fs-h2);color:var(--faint)}
details[open].card summary::after{content:"–"}
.sub.warn{color:var(--amber)}

/* devices */
.searchbar{position:relative;margin-bottom:10px}
.searchbar .ico{position:absolute;inset-inline-start:14px;top:13px;color:var(--faint)}
.searchbar .field{padding-inline-start:44px}
[data-dev-filter]{margin-bottom:12px}
.chips button b{font-weight:600;opacity:.7;margin-inline-start:2px}
.dev{background:#fff;border:1px solid var(--line);border-radius:14px;margin-top:8px;overflow:hidden;scroll-margin-top:calc(var(--header-h) + 66px)}
.dev-h{display:flex;align-items:center;gap:12px;width:100%;padding:12px;text-align:start}
.dev-h .badge-ico{width:40px;height:40px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center;flex:none}
.dev-h .grow{flex:1;min-width:0}
.dev-h b{display:block;color:var(--navy);font-size:var(--fs-body)}
.dev-h small{display:block;color:var(--muted);font-size:var(--fs-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-h .ip{font-size:var(--fs-small);color:var(--muted);background:var(--bg);border-radius:8px;padding:2px 8px}
.dev-h .chev{color:var(--faint);width:18px;height:18px;transition:transform .2s}
.dev[data-open="true"]{border-color:var(--navy)}
.dev[data-open="true"] .chev{transform:rotate(180deg)}
.dev-b{display:none;padding:0 12px 14px}
.dev[data-open="true"] .dev-b{display:block}
.kv{margin:0;display:grid}
.kv>div{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.kv dt{font-size:var(--fs-small);color:var(--muted);font-weight:600}
.kv dd{margin:0;display:flex;align-items:center;gap:6px;font-weight:600;color:var(--navy);font-size:var(--fs-item);min-width:0}
.kv dd bdi{flex:1;overflow-wrap:anywhere;user-select:all}
.kv.wide>div{align-items:start}
.mini-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--teal-700);background:var(--bg);flex:none}
.mini-btn:hover{background:var(--teal-soft)}
.mini-btn .ico{width:17px;height:17px}
.mini-btn[aria-pressed="true"]{background:var(--navy);color:#fff}
.dev-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media (max-width:420px){.dev-h .ip{display:none}}

/* guides */
.thumb.soft{background:var(--teal-soft);color:var(--teal-800)}
.guide-dots{display:flex;gap:6px;justify-content:center}
.guide-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:all .2s}
.guide-dots i.on{width:24px;border-radius:8px;background:var(--navy)}
.guide-step{display:grid;gap:8px;text-align:center;justify-items:center;padding:22px 16px}
.guide-step h2{font-size:var(--fs-h2)}
.guide-step p{font-size:var(--fs-body);color:var(--ink);max-width:30em}
.guide-art{width:96px;height:96px;border-radius:28px;background:radial-gradient(circle at 2px 2px,rgba(84,186,167,.5) 1.4px,transparent 1.8px) 0 0/12px 12px,var(--teal-soft);color:var(--navy);display:grid;place-items:center}
.guide-art .ico{width:44px;height:44px;stroke-width:1.5}
.guide-nav{display:grid;grid-template-columns:1fr 2fr;gap:10px}

/* visits, comments, gallery */
.facts.flush{margin-top:0}.facts.flush .fact:first-child{border-top:0;padding-top:0}
.fact p{font-size:var(--fs-body);color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.gallery a,.gallery label{display:grid;gap:4px;font-size:var(--fs-small);color:var(--muted)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--bg)}
.doc-preview{width:100%;border:1px solid var(--line);border-radius:12px}
.bubble{background:var(--bg);border-radius:14px 14px 14px 4px;padding:10px 12px;margin-top:8px;font-size:var(--fs-body)}
.bubble small{display:block;font-size:var(--fs-small);color:var(--muted);font-weight:600}
.bubble.them{background:var(--teal-soft);border-radius:14px 14px 4px 14px}
.bubble.internal{background:var(--amber-soft)}
.receipt small{display:block;font-size:var(--fs-small);color:var(--muted)}
a.receipt:hover span{color:var(--teal-700)}
.receipt>.chip{flex:none}

/* finance */
.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fin-grid small{display:block;font-size:var(--fs-small);color:var(--muted);font-weight:600}
.fin-grid b{font-size:var(--fs-h3);color:var(--navy)}
.fin-grid .span{grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px}
.fin-grid b.big{font-size:var(--fs-h1);font-weight:700}
.fin-grid b.big i{font-style:normal;font-size:var(--fs-small);color:var(--muted);font-weight:600}

/* admin */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpis a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:2px}
.kpis b{font-size:var(--fs-h1);color:var(--navy);line-height:1.1}
.kpis small{font-size:var(--fs-small);color:var(--muted)}
.chipbtn{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-strong);font-size:var(--fs-small);font-weight:600;background:#fff}
.chipbtn.on{background:var(--navy);border-color:var(--navy);color:#fff}
.table{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
th,td{text-align:start;padding:8px 6px;border-top:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;border-top:0}
.pick-photos label span{display:flex;align-items:center;gap:6px;color:var(--navy);font-weight:600}
.tabbar nav.n2{grid-template-columns:repeat(2,1fr)}.tabbar nav.n4{grid-template-columns:repeat(4,1fr)}
@media (min-width:720px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.sheet{align-items:center}.sheet-card{border-radius:22px}.floor-fields{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* choices (real radios/checkboxes styled as chips — work without JS) */
.fs{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.fs legend,.fs .legend{font-size:var(--fs-small);font-weight:600;color:var(--navy);padding:0;margin-bottom:2px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative;display:inline-flex}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.choice span{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line-strong);background:#fff;font-size:var(--fs-item);font-weight:600;color:var(--ink);transition:background .15s,border-color .15s}
.choice span .ico{width:18px;height:18px;color:var(--teal-700)}
.choice input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.choice input:checked+span .ico{color:var(--teal)}
.choice input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.check.offer{background:var(--teal-soft);border-radius:12px;padding:8px 12px;color:var(--teal-800);font-weight:600}
.pick-card.wide{grid-template-columns:1fr;padding:14px 16px;padding-inline-end:48px;width:100%}
.pick-card.wide .tick{top:50%;transform:translateY(-50%)}
.seg.pkg{margin-top:12px}
.more.danger{color:#B42318;display:block;margin-top:12px;text-align:start}
.mini-btn.danger{color:#B42318}
.chips button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.add-sys button{border-style:dashed}
.opt small.hint{font-size:var(--fs-small)}
/* offers */
.sec-tight{padding-block:18px}
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.offer-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:4px;align-content:start;transition:border-color .15s,transform .15s}
.offer-card:hover{border-color:var(--navy);transform:translateY(-2px)}
.offer-card b{color:var(--navy);font-size:var(--fs-body);line-height:1.4}
.offer-card small{color:var(--muted);font-size:var(--fs-small);line-height:1.5}
.offer-card em{font-style:normal;font-size:var(--fs-small);color:var(--teal-800);background:var(--teal-soft);border-radius:7px;padding:1px 8px;justify-self:start}
.offer-card .soon{position:absolute;top:-9px;inset-inline-end:10px;margin:0}
.offer-price{display:flex;align-items:baseline;gap:5px;margin-top:4px}
.offer-price bdi{font-size:var(--fs-price-card);font-weight:700;color:var(--navy);line-height:1}
.offer-price i{font-style:normal;font-size:var(--fs-small);color:var(--muted);font-weight:600}
.offer-price s,s.was{color:#B42318;font-size:var(--fs-item);font-weight:600}
.offer-card .btn{margin-top:8px}
.terms{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.terms summary{cursor:pointer;font-weight:600;color:var(--teal-700);font-size:var(--fs-item)}
.terms ul{margin:8px 0 0;padding-inline-start:18px;font-size:var(--fs-small);color:var(--muted);display:grid;gap:4px}
.hintlink{margin-top:10px}
.timeline{list-style:none;margin:8px 0;padding:0;display:grid;gap:0;border-inline-start:2px solid var(--line);margin-inline-start:6px}
.timeline li{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:5px 12px;font-size:var(--fs-body);position:relative}
.timeline li::before{content:"";position:absolute;inset-inline-start:-6px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--line-strong);border:2px solid #fff}
.timeline li.action::before{background:var(--teal)}
.timeline li bdi{color:var(--faint);font-size:var(--fs-small)}
.timeline li.action span{font-weight:600;color:var(--navy)}
@media (min-width:720px){.offers{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* cloud pbx */
.plans{display:grid;gap:10px}
.plan{position:relative;display:block}
.plan input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.plan-card{display:grid;gap:6px;border:1.5px solid var(--line-strong);border-radius:var(--r);padding:14px;background:#fff}
.plan-card b{font-size:var(--fs-h3);color:var(--navy)}
.plan-card em{font-style:normal;font-weight:700;color:var(--teal-700);font-size:var(--fs-item)}
.plan-card .ticks{font-size:var(--fs-body);gap:5px;margin-top:4px}
.plan input:checked+.plan-card{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy) inset;background:#F3FBF8}
.plan input:focus-visible+.plan-card{outline:3px solid var(--teal);outline-offset:2px}
.dids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:300px;overflow-y:auto;padding:2px}
.did{position:relative;display:block}
.did input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.did span{display:grid;justify-items:center;border:1.5px solid var(--line-strong);border-radius:12px;padding:8px 4px;background:#fff;font-weight:700;color:var(--navy);font-size:var(--fs-h3);letter-spacing:.04em}
.did small{font-weight:500;font-size:var(--fs-small);color:var(--muted);letter-spacing:0}
.did input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.did input:checked+span small{color:#C9D4E5}
.did input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.did-row{display:grid;grid-template-columns:88px 64px 1fr 38px 38px;gap:6px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.did-row bdi{font-weight:700;color:var(--navy);font-size:var(--fs-item)}
.did-row input[name=note]{grid-column:1/4}
@media (min-width:720px){.plans{grid-template-columns:1fr 1fr}.dids{grid-template-columns:repeat(4,minmax(0,1fr))}.did-row{grid-template-columns:100px 80px 120px 1fr 38px 38px}.did-row input[name=note]{grid-column:auto}}
/* ───────── wider screens ───────── */
@media (min-width:720px){
  :root{--gutter:32px}
  .cta-row{grid-auto-flow:column;justify-content:start}
  .grid-2.svcs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .works{grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto}
  .work:first-child{grid-row:auto}
  .work{min-height:170px}
  .stack.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teaser{grid-template-columns:1fr 1fr;align-items:center;padding:32px}

  .stage span{font-size:var(--fs-small)}
  .dot{width:34px;height:34px}
  .rail::before,.rail::after{top:15px}
}
@media (min-width:980px){
  .desk-nav{display:flex}
  .only-mobile{display:none}
  .hero .wrap{grid-template-columns:1.05fr .95fr;align-items:center;padding-block:56px 40px}
  .sec{padding-block:48px}
  .sec-head h2{font-size:var(--fs-h2)}
  .est-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
  .totalbar{position:sticky;top:calc(var(--header-h) + 16px);inset:auto;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 0}
  .totalbar .wrap{padding-inline:16px}
  .est-pad{padding-bottom:40px}
  .has-total .toast,.toast{bottom:24px}
  .portal-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;align-items:start}
}
@media (max-width:350px){
  :root{--gutter:12px}
  .stage span{font-size:var(--fs-small)}
  .stage.now span{font-weight:600}
  .dot{width:26px;height:26px}
  .rail::before,.rail::after{top:11px}
  .hero h1{font-size:var(--fs-h1)}
  .pill span{display:none}
  .stepper{grid-template-columns:32px 30px 32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ───────── instant quote, print, maintenance, comparison ───────── */
.stepper input{width:100%;border:0;background:none;text-align:center;font:inherit;font-weight:700;color:var(--navy);font-size:var(--fs-item);padding:0;-moz-appearance:textfield}
.btn-wa{background:#128C4B;color:#fff}
.btn-wa:hover{background:#0E7540}
.was{color:var(--faint);font-size:var(--fs-body);font-weight:500;margin-inline-end:4px}
.print-head{display:none}
.quote-doc .kv.wide{margin-top:6px}
.compare{width:100%;font-size:var(--fs-small);border-collapse:collapse}
.compare th,.compare td{padding:8px 6px;text-align:center;border-top:1px solid var(--line)}
.compare th:first-child,.compare td:first-child{text-align:start;color:var(--muted);font-weight:600}
.compare thead th{border-top:0;color:var(--navy);font-size:var(--fs-small)}
.compare .hl{background:var(--teal-soft)}
.scarce{display:flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:600;color:var(--amber)}
.scarce .ico{width:16px;height:16px}
.did.taken span{opacity:.45;text-decoration:line-through;cursor:not-allowed}
@media print{
  .topbar,.backrow,.drawer,.scrim,.no-print,.toast,.tabbar,.foot,.totalbar{display:none!important}
  body{background:#fff;font-size:12pt}
  .print-head{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:2px solid var(--navy);padding-bottom:10px;margin-bottom:14px}
  .print-head div{display:grid;text-align:end}
  .print-head b{font-size:15pt;color:var(--navy)}
  .print-head span{font-size:10pt;color:var(--muted)}
  .card{border:1px solid #bbb;break-inside:avoid}
  .wrap{max-width:none;padding:0}
}
.quote-doc .empty b.num{font-size:inherit;color:var(--navy)}
.quote-doc .rows div>span{flex:1}
.ticks li>span{flex:1;min-width:0}
.quote-doc .ticks li{display:block;position:relative;padding-inline-start:26px}
.quote-doc .ticks li .ico{position:absolute;inset-inline-start:0;top:4px;margin:0}
.quote-doc .ticks li>span{display:inline}

/* ── 1.4: suggestions, quick-quote quantities, maintenance ── */
.suggest{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:12px 14px;border-radius:14px;background:var(--teal-soft);color:var(--teal-800);border:1px solid transparent;margin-top:10px;font:inherit}
.suggest:hover{border-color:var(--teal)}
.suggest .grow{display:grid;gap:2px;min-width:0;flex:1;text-align:start}
.suggest b{font-size:var(--fs-body);color:var(--navy);line-height:1.45}
.suggest small{font-size:var(--fs-small);line-height:1.55;color:var(--ink)}
.suggest .ico{width:20px;height:20px;flex:none}
.suggest em{font-style:normal;font-weight:700;font-size:var(--fs-small);background:var(--navy);color:#fff;border-radius:10px;padding:6px 12px;flex:none}
.suggest.upgrade{background:#EEF2F8}
.stepper input{width:100%;border:0;background:none;text-align:center;font:inherit;font-weight:700;color:var(--navy);font-size:var(--fs-item);padding:0;min-width:0}
.choices.tight{gap:6px;flex-wrap:nowrap}
.choice.sm span{min-height:38px;padding:0 12px;font-size:var(--fs-body)}
.card>:is(h2,h3).h-sm .ico,.card.renew h2 .ico{display:inline-block;width:18px;height:18px;color:var(--teal-700);vertical-align:-3px;margin-inline-end:4px}
.stack.sm{gap:0}
.keepnote{font-size:var(--fs-small);color:var(--muted);margin-top:-4px}
.card.renew{border:1.5px solid var(--amber,#E9A23B);background:var(--amber-soft)}
.card.renew h2 .ico{width:18px;height:18px;vertical-align:-3px}
details.fold{margin:4px 0 8px;padding:0 0 8px;border-bottom:1px solid var(--line)}
details.fold summary{cursor:pointer;font-size:var(--fs-small);font-weight:600;color:var(--teal-800);padding:4px 0}
details.fold form{margin-top:8px}
.checkrow{border-top:1px solid var(--line);padding-top:10px}
.checkrow legend{font-weight:700;color:var(--navy);font-size:var(--fs-small)}
.choices.wrap{flex-wrap:wrap}
.bubble.me{background:var(--bg)}
.bubble p{margin:2px 0 0}
small.inline{display:inline}
.kpis b .ico{width:26px;height:26px;color:var(--teal-700)}
.catbar{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;position:sticky;top:calc(var(--header-h) - 4px);z-index:5;background:var(--bg);scrollbar-width:none}
.catbar::-webkit-scrollbar{display:none}
.catbar a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:40px;padding:0 14px;border-radius:999px;background:#fff;border:1.5px solid var(--line-strong);font-weight:600;font-size:var(--fs-item);color:var(--navy)}
.catbar a .ico,.offer-cats .chip .ico{width:16px;height:16px;color:var(--teal-700)}
.offer-cats{display:flex;flex-wrap:wrap;gap:8px}
.offer-cats .chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px}
section[id]{scroll-margin-top:calc(var(--header-h) + 56px)}
.big-price{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.big-price b{font-size:var(--fs-price-hero);line-height:1;color:var(--navy)}
.big-price small{color:var(--muted);font-size:var(--fs-body)}
@media (min-width:720px){.offers.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tabbar nav.n3{grid-template-columns:repeat(3,1fr)}

/* two doors + compact request sheet */
.ask-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:8px}
.ask-row .btn{padding-inline:10px;font-size:var(--fs-btn);white-space:nowrap}
.sheet.ask .sheet-card{gap:10px}
.sheet.ask .card{border:0;box-shadow:none;padding:0;background:none}
.sheet.ask .card>.btn{width:100%;margin-top:4px}
.ask-sum{font-size:var(--fs-item);color:var(--muted);font-weight:600;margin-top:-6px}
.ask-mode{background:var(--teal-soft);color:var(--teal-800);border-radius:12px;padding:9px 12px;font-size:var(--fs-item);font-weight:600;line-height:1.6}
body.ask-open{overflow:hidden}

/* maintenance: what the base subscription covers + contract perks */
.incl{background:var(--teal-soft);border-radius:14px;padding:12px 14px;margin-bottom:6px;display:grid;gap:8px}
.incl-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.incl-top b{color:var(--navy);font-size:var(--fs-body)}
.incl-top span{font-size:var(--fs-small);color:var(--teal-800);font-weight:600}
.incl-dots{display:flex;gap:6px}
.incl-dots i{flex:1;height:8px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--teal);transition:background .2s}
.incl-dots i.on{background:var(--teal)}
.perks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.perks div{background:#EEF2F8;border-radius:14px;padding:12px;display:grid;gap:4px}
.perks b{font-size:var(--fs-h1);color:var(--navy);line-height:1}
.perks span{font-size:var(--fs-small);line-height:1.6;color:var(--ink)}
/* offer page: the benefit first */
.pitch{background:var(--navy);color:#fff;border-radius:var(--r);padding:18px;margin-bottom:14px;display:grid;gap:10px}
.pitch h2{color:#fff;font-size:var(--fs-h2);line-height:1.5}
.pitch ul{display:grid;gap:6px;list-style:none;padding:0;margin:0}
.pitch li{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-body);line-height:1.7;color:#E6EDF7}
.pitch li .ico{color:var(--teal);width:18px;height:18px;flex:none;margin-top:4px}
/* explicit cross-link button inside a notice */
.notice .btn{margin-top:10px;width:100%}
.jump{display:grid;gap:8px}

/* one-tap add-on inside the request sheet + what was picked on the home opener */
.form .check.addon,.check.addon{align-items:flex-start;background:#EEF2F8;border-radius:12px;padding:10px 12px;min-height:0}
.check.addon input{margin-top:4px}
.check.addon span{display:grid;gap:2px}
.check.addon b{font-size:var(--fs-body);color:var(--navy)}
.check.addon small{font-size:var(--fs-small);color:var(--muted);line-height:1.6;font-weight:500}
.picked{display:flex;gap:8px;align-items:flex-start;background:var(--teal-soft);color:var(--teal-800);border-radius:12px;padding:10px 12px;font-size:var(--fs-body);line-height:1.7;margin-bottom:12px}
.picked .ico{width:18px;height:18px;flex:none;margin-top:3px}
.doors .mini-field b{font-size:var(--fs-h1);color:var(--navy);line-height:1.2}.doors .mini-field small{font-size:var(--fs-small);color:var(--muted)}
/* admin catalog */
.role-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.role-row .nm{display:grid;min-width:0}.role-row .nm b{font-size:var(--fs-body);color:var(--navy)}.role-row .nm small{font-size:var(--fs-small);color:var(--muted);overflow-wrap:anywhere}
.role-row details[open]{grid-column:1/-1}.role-row summary{cursor:pointer;list-style:none}.role-row summary::-webkit-details-marker{display:none}
/* portal additions */
.pipeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.pipeline div{display:grid;gap:2px}.pipeline small{font-size:var(--fs-small);color:var(--muted)}.pipeline b{font-size:var(--fs-h2);color:var(--navy);line-height:1.3}
.care{background:var(--teal-soft);border-color:var(--teal-line)}
.wa-line{width:100%}

/* offer artwork: a small night scene per card; positions via CSS transforms (works in Safari too) */
.oa{display:block;margin:-14px -14px 8px;border-radius:var(--r) var(--r) 0 0;background:radial-gradient(120% 100% at 50% 100%,#1B3562,var(--navy-900) 70%);overflow:hidden}
.oa svg{display:block;width:100%;height:auto;fill:none;stroke:#8FA5C6;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.oa .mint{stroke:var(--teal)}
.oa .win{fill:#1F2A4B}.oa .win.lit{fill:#FFE9A8;stroke:#FFE9A8}
.oa .eye circle{fill:var(--teal);stroke:none;filter:drop-shadow(0 0 4px rgba(84,186,167,.9))}
.oa .eye .cone{fill:rgba(84,186,167,.22);stroke:none;transform-origin:0 0}
.oa .dots circle{fill:var(--teal);stroke:none}
.oa-cctv .e1{transform:translate(40px,30px)}.oa-cctv .e1 .cone{transform:rotate(25deg)}
.oa-cctv .e2{transform:translate(120px,30px)}.oa-cctv .e2 .cone{transform:rotate(-25deg)}
.oa-cctv .e3{transform:translate(40px,52px)}.oa-cctv .e3 .cone{transform:rotate(70deg) scale(.6)}
.oa-cctv .e4{transform:translate(120px,52px)}.oa-cctv .e4 .cone{transform:rotate(-70deg) scale(.6)}
.oa-cctv .e5{transform:translate(80px,26px)}.oa-cctv .e5 .cone{transform:scale(.8)}
.oa-cctv .e6{transform:translate(22px,56px)}.oa-cctv .e6 .cone{transform:rotate(85deg) scale(.5)}
.oa-cctv .e7{transform:translate(138px,56px)}.oa-cctv .e7 .cone{transform:rotate(-85deg) scale(.5)}
.oa-cctv .e8{transform:translate(80px,48px)}.oa-cctv .e8 .cone{transform:scale(.5)}
.oa-house .h1{transform:translate(52px,38px)}.oa-house .h2{transform:translate(80px,38px)}.oa-house .h3{transform:translate(108px,38px)}
.offer-card .soon{z-index:1}

/* ───────── /manage/، إعدادات الموقع ───────── */
.mg{padding-bottom:48px}
.mg-nav{padding-top:12px}
.mg-out{display:flex;align-items:center;gap:8px}
.mg-out .pill{border:0;cursor:pointer;font-family:inherit}
.mg-who{font-size:var(--fs-small);color:var(--muted);max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-ro{margin-top:12px}
.mg-field{display:grid;gap:4px}
.mg-field.bad .field{border-color:#B42318}
.where{display:block;font-size:var(--fs-small);font-weight:400;color:var(--muted);line-height:1.6}
.field-err{margin:0;font-size:var(--fs-item);font-weight:600;color:#912018}
.mg-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mg-actions .btn:only-child{grid-column:1/-1}
.mg-log{display:grid;gap:6px}
.mg-diff{display:grid;gap:6px;margin:0}
.mg-diff div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:start}
.mg-diff dt{font-size:var(--fs-small);color:var(--muted);font-weight:600}
.mg-diff dd{margin:0;font-size:var(--fs-small);overflow-wrap:anywhere;white-space:pre-line}
.mg-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mg-inline .field{flex:1;min-width:140px}
.mg-issued{margin-bottom:12px}
.mg-secret{font-weight:700;font-size:var(--fs-h3);user-select:all;overflow-wrap:anywhere}
.previewbar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 14px;background:var(--navy);color:#fff;font-size:var(--fs-small)}
.previewbar span{flex:1;min-width:90px;color:#C9D6E6}
.previewbar .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.oa-img img{display:block;width:100%;height:auto;aspect-ratio:20/9;object-fit:cover}
.ask-price{font-size:var(--fs-body)}
.mg-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.mg-row .nm{display:grid;min-width:0}
.mg-row .nm b{font-size:var(--fs-small);color:var(--navy)}
.mg-row .nm small{font-size:var(--fs-small);color:var(--muted);overflow-wrap:anywhere}
.mg-move{display:flex;gap:4px}
.mg-move .mini-btn{border:0;cursor:pointer}
.mg-move .ico.up{transform:rotate(-90deg)}
.mg-move .ico.down{transform:rotate(90deg)}
.mg-comp{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:6px}
.mg-sub{font-size:var(--fs-small);color:var(--navy)}
.mg-sub small{font-weight:400;color:var(--muted)}
.mg-video{display:block;width:100%;max-width:420px;border-radius:12px;background:#000}
.mg-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.mg-shot{display:grid;gap:6px;align-content:start;justify-items:start}
.mg-shot img{width:160px;height:120px;border-radius:8px;object-fit:cover;background:var(--surface)}
.mg-thumb{width:100%;max-width:320px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.mg-slide{display:grid;gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.mg-danger{color:#B42318}

/* ───────── home page order (phase 2): shared pieces ───────── */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.deck{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 10px}
.deck::-webkit-scrollbar{display:none}
.deck>*{scroll-snap-align:start}
.kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.kind{display:grid;gap:2px;align-content:start;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:10px;transition:border-color .15s}
.kind:hover{border-color:var(--teal-line)}
.kind .oa{margin:0 0 6px;border-radius:10px}
.kind b{font-size:var(--fs-body);color:var(--navy)}
.kind small{font-size:var(--fs-small);color:var(--muted);line-height:1.5}
/* «اسأل الذكاء الاصطناعي»: one small button under the «للأفراد / للشركات» switch، no section of its own */
.ask-line{padding-block:12px 0}
.askbox.slim{display:grid;gap:8px;justify-items:center}
.askbox .ai-links[hidden]{display:none}
.askbox .ai-links .ico{width:16px;height:16px}
.askbox.slim .ask-ai{width:auto;min-height:40px;padding:6px 14px;border-radius:20px;background:var(--surface-raised);border:1px solid var(--line-strong);color:var(--navy);font-size:var(--fs-body)}
.askbox.slim .ask-ai .ico{width:18px;height:18px;color:var(--teal-700)}
.askbox.slim .ask-done{margin:0;font-size:var(--fs-small);color:var(--muted);text-align:center}
.askbox.slim .ai-links{justify-content:center}
/* one row to swipe: the next card always shows a little, so it is plain there is more */
.row1{margin-top:0}
.kinds.row1{grid-template-columns:none;grid-auto-columns:44%;gap:10px}
.sec-tight{padding-block:4px}
@media (min-width:900px){.offers.row1{grid-auto-columns:23%}.kinds.row1{grid-auto-columns:24%}}
.askbox .ask-done{margin:0;font-size:var(--fs-body);color:var(--muted)}
.askbox:not(.home){display:grid;gap:8px}
.askbox:not(.home) .ask-done{color:#AEBBD0}
.askbox .ai-links{display:flex;flex-wrap:wrap;gap:8px}
/* «العروض»: a pill per system (Offer.CATS) and its offers under it. Radios + these rules: it works with no script. */
.ot{position:relative}
.ot-r{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ot-bar{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1) 12px;padding:2px var(--gutter)}
.ot-bar::-webkit-scrollbar{display:none}
.ot-bar[hidden]{display:none}
.ot-l{flex:none;min-height:40px;display:grid;place-items:center;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-strong);background:#fff;font-size:var(--fs-item);font-weight:600;color:var(--navy);cursor:pointer;white-space:nowrap}
.ot-p{display:none;gap:10px}
#ot-all:checked~[data-ot=all],#ot-cctv:checked~[data-ot=cctv],#ot-intercom:checked~[data-ot=intercom],#ot-wifi:checked~[data-ot=wifi],#ot-pbx:checked~[data-ot=pbx],#ot-sat:checked~[data-ot=sat],#ot-maint:checked~[data-ot=maint],#ot-cloud:checked~[data-ot=cloud],#ot-smart:checked~[data-ot=smart],#ot-house:checked~[data-ot=house],#ot-other:checked~[data-ot=other]{display:grid}
#ot-all:checked~.ot-bar [for=ot-all],#ot-cctv:checked~.ot-bar [for=ot-cctv],#ot-intercom:checked~.ot-bar [for=ot-intercom],#ot-wifi:checked~.ot-bar [for=ot-wifi],#ot-pbx:checked~.ot-bar [for=ot-pbx],#ot-sat:checked~.ot-bar [for=ot-sat],#ot-maint:checked~.ot-bar [for=ot-maint],#ot-cloud:checked~.ot-bar [for=ot-cloud],#ot-smart:checked~.ot-bar [for=ot-smart],#ot-house:checked~.ot-bar [for=ot-house],#ot-other:checked~.ot-bar [for=ot-other]{background:var(--navy);border-color:var(--navy);color:#fff}
#ot-all:focus-visible~.ot-bar [for=ot-all],#ot-cctv:focus-visible~.ot-bar [for=ot-cctv],#ot-intercom:focus-visible~.ot-bar [for=ot-intercom],#ot-wifi:focus-visible~.ot-bar [for=ot-wifi],#ot-pbx:focus-visible~.ot-bar [for=ot-pbx],#ot-sat:focus-visible~.ot-bar [for=ot-sat],#ot-maint:focus-visible~.ot-bar [for=ot-maint],#ot-cloud:focus-visible~.ot-bar [for=ot-cloud],#ot-smart:focus-visible~.ot-bar [for=ot-smart],#ot-house:focus-visible~.ot-bar [for=ot-house],#ot-other:focus-visible~.ot-bar [for=ot-other]{outline:2px solid var(--teal-700);outline-offset:2px}
.ol{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;transition:border-color .15s}
.ol:hover{border-color:var(--navy)}
.ol-img{width:92px;height:84px;border-radius:14px;background:var(--tone-plain);overflow:hidden;display:grid;place-items:center}
.ol-img img{display:block;width:100%;height:100%;object-fit:cover}
.ol-prod img{object-fit:contain;padding:9px;filter:drop-shadow(0 6px 8px rgba(31,42,75,.2))}
.ol-ico img{width:64px;height:64px;object-fit:contain}
/* the light squares behind the brand's icons: one tone per family of systems (brand/BANNERS_AND_ICONS_AR.md) */
.hx .oh-hero.oh-split{overflow:visible}
.tone-green{background:#e3f6f0}.tone-violet{background:#ece6fb}.tone-sky{background:#e3eefb}.tone-amber{background:#fff1d6}.tone-coral{background:#fde3de}
.ol-text{display:grid;gap:2px;min-width:0}
.ol-text b{color:var(--navy);font-size:var(--fs-body);line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-wrap:balance}
.ol-text small{color:var(--muted);font-size:var(--fs-small);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ol-text em{font-style:normal;font-size:var(--fs-small);color:var(--teal-800);background:var(--teal-soft);border-radius:7px;padding:1px 8px;justify-self:start}
.ol .offer-price{flex-wrap:wrap;margin-top:2px}
.ol .offer-price bdi{font-size:var(--fs-num-lg)}
.ol .soon{position:absolute;top:-9px;inset-inline-end:10px;margin:0;z-index:1}
.ol .soon.pop{inset-inline:10px auto;color:#fff;background:var(--teal-700)}
.ol-more{justify-self:center;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;font-size:var(--fs-item);font-weight:600;color:var(--teal-700)}
.ol-more .ico{width:16px;height:16px}
.ot+.cta-row{margin-top:14px}
/* «خدماتنا»: nine square tiles, three to a line */
.tiles9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile9{aspect-ratio:1;display:grid;justify-items:center;align-content:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 4px;text-align:center;transition:border-color .15s}
.tile9:hover{border-color:var(--teal-line)}
.tile9-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center}
.tile9-ico img{width:40px;height:40px}
.tile9 b{font-size:var(--fs-small);line-height:1.35;color:var(--navy)}
@media (max-width:340px){.ol{grid-template-columns:72px minmax(0,1fr) auto;gap:9px}.ol-img{width:72px;height:72px}.ol-ico img{width:52px;height:52px}.tile9-ico{width:46px;height:46px}.tile9-ico img{width:36px;height:36px}.tile9 b{font-size:var(--fs-small)}}
@media (min-width:900px){.ot-p{grid-template-columns:repeat(2,minmax(0,1fr))}.ol-more{grid-column:1/-1}.tiles9{grid-template-columns:repeat(9,minmax(0,1fr))}.tile9 b{font-size:var(--fs-small)}}
@media (min-width:1100px){.ot-p{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prose p{margin:0 0 12px;line-height:1.9}
.prose p:last-child{margin-bottom:0}



/* 1.79.0, the one floating button (the designer's assistant-fab-v2; the owner: «مو موجود كل مكان ومو متوحد… ثبته كبار»):
   one round button of 64px on every public page — the assistant's face where she is offered to this visitor, the microphone
   where she is not — 16px from the edge and from the foot (24 on a wide screen), fixed, never larger, never smaller, never
   moved and never inside a bar. Every bar that is fixed at the foot of the screen keeps a place of 76px free at the button's
   end (below), so it covers nothing.
   1.79.1, the manager: a visitor is never left with no way to reach us — the corner always holds exactly one button: the
   assistant; else the microphone; else (the voice unit is down, an English page, /quote/) WhatsApp, in the very same shape:
   the navy circle in its white ring, its sign in mint. The loud green button is gone. templates/base.html still writes the
   WhatsApp link after the microphone (a test of the voice's own keeps it there); beside the microphone it is not drawn. */
.fabs{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center}
.mic-fab,.wa-fab{display:inline-flex;align-items:center;justify-content:center;width:64px;min-height:64px;padding:0;border-radius:50%;background:var(--navy);color:var(--mint);box-shadow:0 0 0 3px #fff,0 8px 22px -8px rgba(31,42,75,.55)}
.mic-fab .ico,.wa-fab .ico{width:28px;height:28px}
.wa-fab .ico{stroke-width:1.8}
.fabs .wa-fab:not(:only-child){display:none}
.mic-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mic-fab:focus-visible,.wa-fab:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
body.menu-open .fabs,body.ask-open .fabs{display:none}
/* the place kept for it: 76px at the button's end of every bar that stays at the foot of a phone's screen */
@media (max-width:899px){
  /* 1.81.1: no bar keeps a place at its end any more — on a phone the one floating button is in the middle of every public page (the end of this file) */
}
@media (min-width:900px){.fabs{left:24px;bottom:24px}[dir=ltr] .fabs{left:auto;right:24px}}
/* the picture head of a page (web/heads.py, {% pic %}): one of the designer's scenes edge to edge of the page's column, a soft navy fall over its foot, and the page's title written on it. Compact: the content under it starts within the first screen. */
.ph{position:relative;isolation:isolate;overflow:hidden;height:180px;margin:12px 0 6px;border-radius:16px;background:linear-gradient(160deg,#151D35,#1F2A4B)}
.ph picture{position:absolute;inset:0;z-index:-2}
.ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,29,53,.05) 25%,rgba(21,29,53,.78))}
.ph-text{position:absolute;inset:auto 16px 14px 16px;color:#fff}
.ph-text h1,.ph-title{margin:0;font-size:var(--fs-h1);font-weight:700;line-height:1.3;color:#fff}
.ph-text p{margin:2px 0 0;font-size:var(--fs-small);line-height:1.6;color:rgba(255,255,255,.92)}
.ph-kicker{display:block;font-size:var(--fs-small);font-weight:600;color:#9FE0CF}
.ph-sm{height:120px}.ph-sm .ph-text h1,.ph-sm .ph-title{font-size:var(--fs-h1)}
@media (min-width:900px){.ph{height:300px;margin:18px 0 8px}.narrow .ph{height:230px}.ph-sm,.narrow .ph-sm{height:190px}.ph-text{inset:auto 28px 22px 28px}.ph-text h1,.ph-title{font-size:var(--fs-h1)}.ph-sm .ph-text h1,.ph-sm .ph-title{font-size:var(--fs-h1)}.ph-text p{font-size:var(--fs-body)}}
/* a camera package's page: the other resolution, help with the number, what the price includes (moved here from the home page's panel in 1.38.0) */
.pack-more{display:grid;gap:10px;margin:0 0 14px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:16px}
.pack-res{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-item);font-weight:600;color:var(--navy)}
.seg-links{display:inline-flex;gap:6px}
.seg-links a{display:inline-flex;align-items:center;gap:4px;min-height:42px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line-strong);background:#fff;font-weight:700;color:var(--navy)}
.seg-links a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.seg-links small{font-size:var(--fs-small);font-weight:600;opacity:.8}
.pack-help{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-item);font-weight:700;color:var(--teal-800)}
.pack-help .ico{width:20px;height:20px}
.pack-more .w2-facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:10px 0 0;list-style:none;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--muted)}
.pack-more .w2-facts li{display:inline-flex;align-items:center;gap:5px}.pack-more .w2-facts .ico{width:16px;height:16px;color:var(--teal-700)}
/* an answer with a short title and a small line under it (the satellite's question) */
.choice.two span{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-height:50px;padding:5px 14px}
.choice.two span b{font-size:var(--fs-item);font-weight:700;line-height:1.35}.choice.two span small{font-size:var(--fs-small);font-weight:500;line-height:1.35;color:var(--muted)}
.choice.two input:checked+span small{color:rgba(255,255,255,.85)}
.chips button.two{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;padding-block:6px;text-align:start}
.chips button.two small{font-size:var(--fs-small);font-weight:500;opacity:.8}
/* «مكوّنات الباقة» (templates/web/_parts.html): a white tile per part, its quantity in the corner; then the navy strip of what the price includes */
.parts{margin:0 0 14px}
.parts-h{margin:0 0 10px;font-size:var(--fs-h3);font-weight:700;color:var(--navy)}
.parts-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.part{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px 12px;overflow:hidden;text-align:center;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(31,42,75,.06),0 10px 26px rgba(31,42,75,.08)}
.part-qty{position:absolute;top:0;right:0;padding:7px 11px;border-radius:0 16px 0 16px;background:#E9F7F2;color:#2fa98a;font:700 var(--fs-num-lg)/1 Montserrat,system-ui,sans-serif}
.part-pic{display:flex;align-items:center;justify-content:center;width:100%;height:96px}
.part-pic>img{width:auto;height:auto;max-width:88%;max-height:86px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(31,42,75,.16))}
.part-ico{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:22%;background:#e3eefb}
.part-ico img{width:78%;height:78%;mix-blend-mode:multiply}
.part-name{margin-top:6px;font-size:var(--fs-small);font-weight:600;line-height:1.4;color:var(--navy)}
.part-spec{font-size:var(--fs-small);line-height:1.5;color:#526176}
.parts-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;margin:10px 0 0;padding:11px 14px;border-radius:16px;background:#1F2A4B;color:#fff;font-size:var(--fs-small);font-weight:600}
.parts-strip span{display:inline-flex;align-items:center;gap:8px}
.parts-strip img{width:30px;height:30px;border-radius:9px;background:#fff}
.parts-strip i{width:1px;height:24px;background:rgba(255,255,255,.22)}
@media (min-width:700px){.part-pic{height:120px}.part-pic>img{max-height:104px}.part-name{font-size:var(--fs-body)}.parts-strip{font-size:var(--fs-small)}}
/* the bottom offer bar: on every public page (web/offer_bar.py says what it holds) */
.oh-bar{position:fixed;inset:auto 0 0 0;z-index:25;display:flex;align-items:center;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(10px);box-shadow:var(--shadow-up);transform:translateY(115%);transition:transform .25s ease}
.oh-bar.show{transform:none}
.oh-bar .t{flex:1;min-width:0;font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
.oh-bar .t b{display:block;font-size:var(--fs-body);color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oh-bar .btn{flex:none}
.oh-bar-v{display:contents}.oh-bar-v[hidden]{display:none}       /* the home page's bar has a variant per slice of the hero (templates/web/_offer_bar.html) */
/* 1.45.0: what the bar says under its name never ends in dots. Its pieces — the price, then the words after it — stand on one line; a piece that does not fit the screen drops out whole instead of being cut mid-word. */
.oh-bar[data-oh-bar] .t{display:flex;flex-wrap:wrap;align-content:flex-start;column-gap:.35em;max-height:46px;line-height:22px;overflow:hidden;text-overflow:clip;white-space:normal}
.oh-bar[data-oh-bar] .t b{flex:0 0 100%;line-height:22px;margin-bottom:2px;white-space:normal;overflow:visible;text-overflow:clip}       /* 1.51.0: a name that does not fit takes a second line, never dots (two lines fill the 46px and the price line drops whole); the 2px under it keep the dots of a last «ي» */
/* (1.80.2's rules for the bar on a phone went with 1.81.0: the bar there is a new shape, at the end of this file) */
@media (max-width:899px){.oh-bar[data-oh-bar]{padding-block:9px calc(9px + env(safe-area-inset-bottom))}}
@media (min-width:900px){.oh-bar[data-oh-bar]{padding-block:11px}}       /* the bar stays 64px tall */       /* 1.47.0: a name that ends in «ي» keeps its two dots — a line of 22px cut them off under the baseline */
@media (min-width:900px){.oh-bar{padding-inline:max(var(--gutter),calc((100vw - 1120px)/2));padding-block:12px}.oh-bar .t{font-size:var(--fs-small)}.oh-bar .t b{font-size:var(--fs-h3)}}
@media (prefers-reduced-motion:reduce){.oh-bar{transition:none}}
.oh-bar.on{transform:none}
.picks{align-items:stretch}
.offer-card.wide{grid-column:1/-1;grid-template-columns:132px minmax(0,1fr);gap:0 12px;align-items:center;padding:10px}
.offer-card.wide .oa{margin:0;border-radius:12px;align-self:stretch;display:grid;align-items:center}
.wide-text{display:grid;gap:4px;align-content:center}
.wide-text .btn{justify-self:start;margin-top:4px}
.deck-hint{margin:2px 0 0;font-size:var(--fs-small);color:var(--faint);text-align:center}
.trust{padding:6px 0 2px}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;padding:12px 14px;border-radius:var(--r);background:var(--surface-raised);border:1px solid var(--line)}
.trust-n{display:inline-flex;align-items:baseline;gap:6px;font-size:var(--fs-body);color:var(--muted)}
.trust-n b{font-size:var(--fs-num-lg);color:var(--navy)}
.trust-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px}
.trust-logo{height:24px;width:auto;max-width:74px;object-fit:contain}
@media (min-width:600px){.trust-logo{height:28px;max-width:110px}}
/* 1.48.0: «للأفراد / للشركات» is no longer a row at the top of the page: the way to the other audience is the first item of the side menu, in the brand's mint */
.drawer a.aud-go{min-height:60px;margin:4px 0 8px;padding:0 12px;background:var(--mint-soft,#E0F2EE);color:var(--navy)}
.drawer a.aud-go:hover{background:var(--mint-soft,#E0F2EE)}
.aud-go span{flex:1;display:grid;gap:1px;min-width:0}
.aud-go b{font-size:var(--fs-h3);line-height:22px}
.aud-go small{font-size:var(--fs-small);line-height:18px;font-weight:500;color:var(--ink-muted,#4F5A73)}
.aud-go .ico:last-child{flex:none;width:18px;height:18px}
.svc-index{margin-top:0}
.svc-index .kind{scroll-margin-top:calc(var(--header-h) + 56px)}
.svc-sec{padding-block:14px}
.svc-sec .notice{margin-bottom:12px}
.svc-points{margin-top:14px}
.svc-sec .more{display:inline-flex;align-items:center;gap:4px;margin-top:12px}
.faq details.card{padding:14px 16px}
.faq details p{margin:8px 0 0;color:var(--ink);font-size:var(--fs-body);line-height:1.7}
.faq summary{gap:10px;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.svc-order{padding-bottom:28px}
.svc-order .btn{width:100%}
.biz-kinds{margin-top:0}
.biz-form{margin:6px 0 28px;scroll-margin-top:calc(var(--header-h) + 26px)}
.biz-form .sec-head{margin-bottom:6px}
#company-maintenance,#biz-offers{scroll-margin-top:calc(var(--header-h) + 26px)}
@media (min-width:720px){.svc-order .btn{width:auto;min-width:280px}}
.facts h2{font-size:var(--fs-h2);margin:22px 0 8px}
.facts h3{font-size:var(--fs-h3);margin:18px 0 6px}
.facts p,.facts li{font-size:var(--fs-body);line-height:1.8}
.facts ul{margin:6px 0;padding-inline-start:20px}
.facts a{color:var(--teal-700);font-weight:600}
.table-wrap{overflow-x:auto;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface-raised)}
.facts table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.facts caption{text-align:start;padding:8px 10px;font-weight:600;color:var(--muted);font-size:var(--fs-small)}
.facts th,.facts td{padding:8px 10px;border-top:1px solid var(--line);text-align:start;vertical-align:top;line-height:1.6}
.facts thead th{color:var(--muted);font-size:var(--fs-small);white-space:nowrap}
.facts tbody th{font-weight:600;min-width:120px}
.facts td:nth-child(2){white-space:nowrap}
.facts td small{display:block;white-space:normal;color:var(--muted)}
.facts{padding-bottom:28px}
@media (max-width:599px){.facts thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.facts tbody tr{display:block;padding:8px 10px;border-top:1px solid var(--line)}.facts tbody th,.facts tbody td{display:block;padding:1px 0;border:0;min-width:0}.facts td:nth-child(3){color:var(--muted);font-size:var(--fs-small)}}
.facts time{white-space:nowrap;unicode-bidi:isolate;direction:ltr;display:inline-block}
.follow h2{font-size:var(--fs-h2)}
.pd{max-width:400px;margin:4px auto 18px;border:1.5px solid var(--line-strong);border-radius:26px;background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.pd-flag{margin:0;padding:8px 14px;background:var(--amber-soft);color:#5A3A0C;font-size:var(--fs-small);text-align:center}
.pd-r{position:absolute;opacity:0;pointer-events:none}
.pd-screens{padding:16px 16px 6px;min-height:330px}
.pd-s{display:none}
.pd-s h2{font-size:var(--fs-h2);margin-bottom:12px}
#pd-1:checked~.pd-screens .pd-s1,#pd-2:checked~.pd-screens .pd-s2,#pd-3:checked~.pd-screens .pd-s3,#pd-4:checked~.pd-screens .pd-s4{display:block}
.pd-steps,.pd-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pd-steps li,.pd-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--bg);color:var(--muted)}
.pd-steps li .ico,.pd-list li .ico{width:20px;height:20px;flex:none}
.pd-steps b,.pd-list b{display:block;font-size:var(--fs-body);color:var(--navy)}
.pd-steps small,.pd-list small,.pd-card small{display:block;font-size:var(--fs-small);color:var(--muted)}
.pd-steps li.done .ico{color:var(--teal-700)}
.pd-steps li.now{background:var(--teal-soft);box-shadow:0 0 0 1.5px var(--teal) inset}
.pd-steps li.now .ico,.pd-list li .ico{color:var(--teal-800)}
.pd-card{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.pd-card p{font-size:var(--fs-body);margin:6px 0}
.pd-shots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 6px}
.pd-shots .oa{margin:0;border-radius:10px}
.pd-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--surface-raised)}
.pd-tabs label{display:grid;justify-items:center;gap:2px;padding:8px 2px 10px;font-size:var(--fs-small);font-weight:600;color:var(--muted);cursor:pointer}
.pd-tabs .ico{width:22px;height:22px}
#pd-1:checked~.pd-tabs label[for=pd-1],#pd-2:checked~.pd-tabs label[for=pd-2],#pd-3:checked~.pd-tabs label[for=pd-3],#pd-4:checked~.pd-tabs label[for=pd-4]{color:var(--navy);box-shadow:0 2px 0 var(--teal) inset}
#pd-1:focus-visible~.pd-tabs label[for=pd-1],#pd-2:focus-visible~.pd-tabs label[for=pd-2],#pd-3:focus-visible~.pd-tabs label[for=pd-3],#pd-4:focus-visible~.pd-tabs label[for=pd-4]{outline:3px solid var(--teal);outline-offset:-3px}
.pd-order{padding-bottom:28px}
@media print{.pd-s{display:block}}
.mg-try{margin-top:8px;padding:12px;border:1px dashed var(--line-strong);border-radius:12px}
.mg-trial{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--teal-soft);font-size:var(--fs-small)}
.mg-trial ul{margin:6px 0 0;padding-inline-start:18px;line-height:1.9}
.rec.warn{background:var(--amber-soft)}.rec.warn b,.rec.warn small{color:#5A3A0C}
.est-note{font-size:var(--fs-body);line-height:1.7;margin:8px 0}
.bk-days{display:grid;gap:8px}
.bk-day{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 16px;border-radius:var(--r);background:#fff;border:1.5px solid var(--line-strong)}
.bk-day b{flex:1;font-size:var(--fs-h3);color:var(--navy)}
.bk-day small{font-size:var(--fs-small);color:var(--muted)}
.bk-day .ico{color:var(--faint)}
.bk-times .choice span{min-height:48px;min-width:104px;justify-content:center;font-size:var(--fs-body)}
.bk-when{margin-top:10px}
.svc-order .wrap{display:grid;gap:10px}
.mg-book{display:grid;gap:6px}
.mg-book .pay-top b{font-size:var(--fs-h3)}
.mg-book form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shot{margin:0;border-radius:var(--r);overflow:hidden;background:var(--surface-raised);border:1px solid var(--line)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.shot figcaption{padding:8px 10px;font-size:var(--fs-small);color:var(--ink);line-height:1.5}
.mg-logo{height:28px;width:auto;max-width:140px;object-fit:contain}
.ask-row>:only-child{grid-column:1/-1}
@media (min-width:900px){.deck-hint{display:none}.shots{grid-template-columns:repeat(3,minmax(0,1fr))}.picks{grid-template-columns:repeat(3,minmax(0,1fr))}.offer-card.wide{grid-column:auto;grid-template-columns:none;padding:14px}.offer-card.wide .oa{margin:-14px -14px 8px;border-radius:var(--r) var(--r) 0 0}.deck{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin-inline:0;padding-inline:0}.qt-p.deck{flex-basis:100%}.kinds{grid-template-columns:repeat(4,minmax(0,1fr))}.qt-l{flex:0 1 220px}}
@media (min-width:900px) and (max-width:1239px){.desk-nav{gap:0;font-size:var(--fs-small)}.desk-nav a{padding:8px 6px}}
@media print{.fabs{display:none!important}}

/* ───────── 1.32.0: the W2 manner on every public page ─────────
   One shared skin, laid over what is above: a light, neutral sand ground; white cards with 16px corners and a soft shadow;
   heavy navy titles with a grey line under them; filled navy buttons and outlined second ones; devices and drawings on
   light grounds. It changes no markup, no route and no word. */

h1,h2,h3{font-weight:700}
.page-head{padding-block:20px 12px}
.page-head h1,.page-head .h1{font-size:var(--fs-h1);line-height:1.3}
.page-head .lead,.lead{color:var(--muted)}
.sec{padding-block:26px}
.sec-head{margin-bottom:12px}
.sec-head h2{font-size:var(--fs-h2)}
.card,.offer-card,.ol,.kind,.tile9,.role-card,.pick-card,.svc,.tile,.brand-card{box-shadow:var(--shadow)}
.card,.offer-card,.ol,.kind,.tile9,.role-card{border-color:var(--line)}
.btn{border-radius:13px}
.btn-ghost{background:#fff}
.backrow{background:transparent}
.ot-l{border-color:var(--line-strong)}
/* drawings and device pictures sit on a light ground, in the brand's own ink */
.kind .oa,.offer-card .oa,.pd-shots .oa{background:var(--tone-plain)}
.kind .oa svg,.offer-card .oa svg,.pd-shots .oa svg{stroke:var(--navy);stroke-width:1.5}
.kind .oa .mint,.offer-card .oa .mint,.pd-shots .oa .mint{stroke:var(--teal-700)}
.kind .oa .win,.offer-card .oa .win,.pd-shots .oa .win{fill:#fff}
.kind .oa .win.lit,.offer-card .oa .win.lit,.pd-shots .oa .win.lit{fill:var(--teal);stroke:var(--teal)}
.kind .oa .eye circle,.offer-card .oa .eye circle,.kind .oa .dots circle,.offer-card .oa .dots circle{fill:var(--teal-700);filter:none}
.kind .oa .eye .cone,.offer-card .oa .eye .cone{fill:rgba(23,107,90,.16)}
.offer-card.follow .oa{background:radial-gradient(120% 100% at 50% 100%,#1B3562,var(--navy-900) 70%)}
/* the footer, shorter: the logo and its line, every link the brief asks for in a tight grid, then the legal line */
.foot{margin-top:28px;padding:22px 0 calc(22px + env(safe-area-inset-bottom));font-size:var(--fs-small);background:var(--navy)}





@media (max-width:340px){}
@media (min-width:900px){.page-head h1,.page-head .h1{font-size:var(--fs-h1)}.sec{padding-block:34px}.sec-head h2{font-size:var(--fs-h2)}}
/* ── 1.37.1 ── */
/* iPhone zooms the page when a field under 16px takes the focus: on phones every field is 16px */
@media (max-width:900px){:root input:not([type=checkbox]):not([type=radio]):not([type=range]),:root textarea,:root select{font-size:var(--fs-field)}}
/* the floating buttons: one place, beside each other, never moved; a page with its own big WhatsApp button has none */
body.no-fab .fabs{display:none!important}
/* «اطلب عرض سعر»: what is missing is said beside its field */
.err-slot{display:none}
.sheet .notice.err,.fs+.notice.err{margin:6px 0 0}
button[aria-busy=true]{opacity:.7;cursor:progress}
.voice-qs{display:grid;gap:10px}
.voice-q{display:grid;gap:6px}
.voice-q p{margin:0;font-size:var(--fs-item);font-weight:600;color:var(--navy)}
.voice-q-b{display:flex;flex-wrap:wrap;gap:6px}
.voice-q-b .btn{width:auto;min-height:40px;flex:0 1 auto}
/* «وصلنا طلبك»: the request as a document */
.doc-head{display:grid;gap:10px}
.doc-head>img{height:44px;width:auto}
.doc-id{font-size:var(--fs-h3);font-weight:700;color:var(--navy)}
.doc-kicker{display:block;font-size:var(--fs-small);font-weight:400;color:var(--muted)}
.print-contact i::before{content:"|";font-style:normal;margin-inline:6px}
.doc-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:0}
.doc-meta div{display:grid;min-width:0}
.doc-meta dt{font-size:var(--fs-small);color:var(--muted)}
.doc-meta dd{margin:0;font-size:var(--fs-small);font-weight:600;color:var(--navy);overflow-wrap:anywhere}
.doc-meta dd small{font-weight:400;color:var(--muted)}
.doc-sec{margin-top:14px;break-inside:avoid}
.doc-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:var(--fs-h3);color:var(--navy)}
.doc-sec h3 .ico{width:20px;height:20px;color:var(--teal-700);flex:none}
.doc-sec h3 span{flex:1;min-width:0}
.doc-sec h3 small{font-weight:400;font-size:var(--fs-small);color:var(--muted)}
.doc-lines{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.doc-lines th{font-size:var(--fs-small);font-weight:600;color:var(--muted);text-align:start;padding:4px 0 4px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.doc-lines td{padding:8px 0 8px 6px;border-bottom:1px dashed var(--line);vertical-align:middle}
.doc-lines th:not(:first-child),.doc-lines td:not(:first-child){text-align:end;white-space:nowrap;padding-inline-start:8px}
.doc-lines tr:last-child td{border-bottom:0}
.doc-lines td.num{display:table-cell}
.doc-lines th:first-child,.doc-lines td:first-child{width:100%}
.doc-item{display:flex;align-items:center;gap:8px;min-width:0}
.doc-item img{width:48px;height:32px;object-fit:contain;flex:none;border-radius:6px;background:var(--bg)}
.doc-item>span{display:grid;min-width:0}
.doc-item b{font-weight:600;color:var(--navy)}
.doc-item small{font-size:var(--fs-small);color:var(--muted);overflow-wrap:anywhere}
.doc-strip{margin:12px 0}
.doc-strip .ico{width:22px;height:22px;flex:none;color:var(--teal);stroke-width:2}
@media print{.doc-strip{background:none;color:var(--navy);border:1px solid var(--line);-webkit-print-color-adjust:exact;print-color-adjust:exact}.doc-strip .ico{color:var(--teal-700)}.doc-strip i{background:var(--line)}}
.doc-steps{margin:8px 0 0;padding:0;list-style:none;counter-reset:step;display:grid;gap:10px}
.doc-steps li{counter-increment:step;display:grid;grid-template-columns:30px 1fr;column-gap:10px;align-items:start}
.doc-steps li::before{content:counter(step);grid-row:1 / span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-800);font-weight:700;font-size:var(--fs-small)}
.doc-steps b{font-size:var(--fs-small);color:var(--navy)}
.doc-steps span{font-size:var(--fs-small);color:var(--muted)}
.doc-notes{margin:6px 0 0;font-size:var(--fs-small);white-space:normal;overflow-wrap:anywhere}
.print-contact{display:none}
@media print{
  @page{size:A4;margin:14mm}
  .quote-doc{max-width:none}
  .quote-doc .card{box-shadow:none;border:1px solid var(--line);break-inside:avoid}
  .doc-meta{grid-template-columns:repeat(4,minmax(0,1fr))}
  .doc-lines{font-size:10.5pt}
  .print-contact{display:block;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:10pt;color:var(--muted);text-align:center}
}

/* a service's short blurb: its sentence whole, then (on /services/) one whole point when it is short. Nothing is cut: no clamp, no «…» */
.kind-more{display:block;margin-top:2px;font-size:var(--fs-small);line-height:1.5;color:var(--faint,#7b8798)}
.tile9 small{display:block;padding-inline:4px;font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
/* ── 1.38.1 ── the floating WhatsApp button keeps its corner, so the page ends with room for it: at the end of the scroll it
   covers no last button or field. Only on phones, only while the button floats (no bottom bar is showing) and the page has one. */
@media (max-width:900px){
  body:has(.fabs>*):not(.no-fab):not(.has-total) .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  body:has(.fabs>*):not(.no-fab):not(.has-total):not(:has(.foot)){padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
.biz-form .fs+.notice.err{margin:6px 0 0}
/* ── 1.39.0 ── «اطلب عرض سعر» in three steps */
[data-step][hidden],.qsteps[hidden],.q-nav[hidden],.q-nav .btn[hidden],.ph[hidden],.voice-heard[hidden]{display:none}
.qsteps{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.qsteps li{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:4px 6px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:var(--fs-small);font-weight:600;color:var(--muted);text-align:center}
.qsteps li b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--muted);font-size:var(--fs-small)}
.qsteps li.on{border-color:var(--navy);color:var(--navy)}
.qsteps li.on b{background:var(--navy);color:#fff}
.qsteps li.done{cursor:pointer;color:var(--teal-800)}
.qsteps li.done b{background:var(--teal-soft);color:var(--teal-800)}
.q-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px}
.q-nav .btn{min-height:48px}
.q-nav [data-prev][hidden]+[data-next]{grid-column:1 / -1}
.q-nav [data-prev]:has(+[data-next][hidden]){grid-column:1 / -1}
.more-opts{border-top:1px dashed var(--line);margin-top:6px;padding-top:4px}
.more-opts>summary,.more-toggle{cursor:pointer;min-height:40px;display:flex;align-items:center;font-size:var(--fs-item);font-weight:600;color:var(--teal-800)}
.more-toggle{width:100%;padding:0;border:0;border-top:1px dashed var(--line);margin-top:6px;background:none;font-family:inherit;text-align:start}
.more-toggle::before{content:"";width:0;height:0;border-inline-start:6px solid currentColor;border-block:5px solid transparent;margin-inline-end:8px}
.more-toggle[aria-expanded=true]::before{transform:rotate(90deg)}
[dir=rtl] .more-toggle[aria-expanded=true]::before{transform:rotate(-90deg)}
.more-toggle[hidden],.line[hidden]{display:none}
[data-site] .more-opts{border-top:0;margin-top:0;padding-top:0}
[data-quick-slot] .voice-heard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px}
[data-quote-page][data-at="1"] .totalbar .tot-row,[data-quote-page][data-at="1"] .totalbar .tot-split{display:none}

/* ── 1.49.0: «العروض» as cards (the designer's offers-v2). One white card per offer: its picture, its name and line, the
   resolution where it is a camera package (two radios: the stylesheet shows the chosen resolution's name, badge, price and
   link — no script), the price in the brand's dotted digits with what it includes, and «احجز». A camera package's picture is
   the scenes its cameras show, laid out like a recorder's screen: two side by side, four in a square, one large and five, one
   large and seven. A scene's number stands at the far corner of its square, the badge at the near one: they never meet. ── */
.pk{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:10px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.pk-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pk-r4:checked~.pk-v8,.pk-r8:checked~.pk-v4,.pk-r4:checked~.pk-pic .pk-v8,.pk-r8:checked~.pk-pic .pk-v4{display:none}
.pk-own{position:absolute;inset:0}       /* the owner's own picture of a package covers the scenes */
.pk-pic{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0E1428}
.pk-mo{display:grid;gap:2px;height:100%}
/* 1.84.14, camera-kits-v2 (approved): on the /offers/ list a camera package is its own small scene with the recorder, and its
   cameras numbered around it facing it (web/packcards.py KIT and kit_css(), held the same by a test). On the white of the card:
   the owner, no grey tile behind a drawing. Placed as a picture, so the same on both sides */
.pk-pic.pk-kitpic{background:#fff}
.pk-kit{position:relative;height:100%}
.pk-ksc{position:absolute;left:50%;top:52%;max-height:90%;height:auto;object-fit:contain;transform:translate(-50%,-50%)}
.pk-kcam{position:absolute}
.pk-kcam img{display:block;width:100%;height:auto}
.pk-kfl img{transform:scaleX(-1)}
.pk-kcam b{position:absolute;top:-6px;left:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;font:700 var(--fs-small)/1 Montserrat,sans-serif;box-shadow:0 0 0 2px #fff}
.pk-kfl b{left:auto;right:-6px}
.pk-kit2 .pk-ksc{width:55.2%}
.pk-k2-1{left:77%;top:34%;width:19%}
.pk-k2-2{left:4%;top:34%;width:19%}
.pk-kit4 .pk-ksc{width:56.6%}
.pk-k4-1{left:80%;top:8%;width:17%}
.pk-k4-2{left:78%;top:58%;width:17%}
.pk-k4-3{left:3%;top:8%;width:17%}
.pk-k4-4{left:5%;top:58%;width:17%}
.pk-kit6 .pk-ksc{width:48.5%}
.pk-k6-1{left:83%;top:4%;width:15%}
.pk-k6-2{left:79%;top:37%;width:15%}
.pk-k6-3{left:83%;top:70%;width:15%}
.pk-k6-4{left:2%;top:4%;width:15%}
.pk-k6-5{left:6%;top:37%;width:15%}
.pk-k6-6{left:2%;top:70%;width:15%}
.pk-kit8 .pk-ksc{width:44.8%}
.pk-k8-1{left:86%;top:6%;width:13%}
.pk-k8-2{left:74%;top:30%;width:13%}
.pk-k8-3{left:86%;top:54%;width:13%}
.pk-k8-4{left:74%;top:77%;width:13%}
.pk-k8-5{left:1%;top:6%;width:13%}
.pk-k8-6{left:13%;top:30%;width:13%}
.pk-k8-7{left:1%;top:54%;width:13%}
.pk-k8-8{left:13%;top:77%;width:13%}
.pk-mo2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pk-mo4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.pk-mo6{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
.pk-mo6 .pk-cell:first-child{grid-column:1/3;grid-row:1/3}
.pk-mo8{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
.pk-mo8 .pk-cell:first-child{grid-column:1/4;grid-row:1/4}
.pk-cell{position:relative;min-width:0;min-height:0;overflow:hidden}
.pk-cell img{display:block;width:100%;height:100%;object-fit:cover}
.pk-cell b{position:absolute;top:5px;right:5px;display:grid;place-items:center;min-width:20px;height:20px;border-radius:6px;background:rgba(14,20,40,.78);color:#fff;font:700 var(--fs-small)/1 Montserrat,system-ui,sans-serif}
.pk-mo6 .pk-cell:not(:first-child) b,.pk-mo8 .pk-cell:not(:first-child) b{top:3px;right:3px;min-width:18px;height:18px}
[dir=ltr] .pk-mo6 .pk-cell:not(:first-child) b,[dir=ltr] .pk-mo8 .pk-cell:not(:first-child) b{right:auto;left:3px}
.pk-illus{position:absolute;bottom:8px;left:8px;padding:2px 8px;border-radius:8px;background:rgba(14,20,40,.72);color:#fff;font-size:var(--fs-small);line-height:20px}
.pk-img{position:absolute;inset:0;background:var(--surface)}
.pk-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pk-prod img{box-sizing:border-box;object-fit:contain;padding:14px;filter:drop-shadow(0 6px 8px rgba(31,42,75,.2))}
.pk-ico img{margin:auto;width:72px;height:72px;object-fit:contain}
.pk .soon{position:absolute;top:18px;inset-inline-end:18px;margin:0;z-index:1;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:var(--mint-soft);color:var(--mint-ink);font-weight:600;font-size:var(--fs-small)}
[dir=ltr] .pk-cell b{right:auto;left:5px}
.pk .soon.pop,.pk-pic>.soon.pop{background:var(--mint-soft);color:var(--mint-ink)}
.pk-pic>.soon{position:absolute;top:8px;inset-inline-end:8px;margin:0;z-index:1;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-weight:600;font-size:var(--fs-small)}       /* on the package's own page the badge stands in the picture itself: top left, clear of the first scene's number */
.pk-pic>.soon.pop::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
.pk .soon.soon-2{top:52px}
/* 1.84.14: on a kit the cameras stand in the corners; the badges stand at the top in the middle, over the scene's free sky, one beside the other */
.pk-cams:has(.pk-kitpic) .soon{top:16px;inset-inline-end:auto;left:50%;transform:translateX(-50%);white-space:nowrap}
.pk-cams:has(.pk-kitpic) .pk-head:has(.pop) .soon.soon-2{top:16px;transform:translateX(4px)}
.pk-cams:has(.pk-kitpic) .pk-head:has(.soon-2) .soon.pop{transform:translateX(calc(-100% - 4px))}
.pk .soon.pop::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
.pk-head{min-width:0;padding:0 4px}
.pk-head h3{margin:0;font-size:var(--fs-h3);line-height:26px;font-weight:700}
.pk-head h3 a{color:var(--ink)}
.pk-head h3 a::after{content:"";position:absolute;inset:0 0 auto 0;height:0}
.pk-head p{margin:0;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
.pk-res{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px;font-size:var(--fs-small);color:var(--ink-muted)}
.pk-seg{display:inline-flex;gap:2px;padding:4px;border-radius:14px;background:var(--surface)}
.pk-seg label{display:grid;place-items:center;min-width:62px;height:40px;padding:0 10px;border-radius:10px;font:700 var(--fs-ui)/1 Montserrat,system-ui,sans-serif;color:var(--ink-muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pk-r4:checked~.pk-res [data-mp="4"],.pk-r8:checked~.pk-res [data-mp="8"]{background:var(--navy);color:#fff}
.pk-r4:focus-visible~.pk-res [data-mp="4"],.pk-r8:focus-visible~.pk-res [data-mp="8"]{outline:2px solid var(--focus,#1F2A4B);outline-offset:2px}
.pk-buy{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding:0 4px 2px}
.pk-cost{display:grid;gap:0;min-width:0}
.pk-cost .offer-price{display:flex;align-items:baseline;gap:8px}
.pk-cost .offer-price bdi{font-family:var(--font-accent);font-weight:700;font-size:var(--fs-price-card);line-height:38px;letter-spacing:.02em;color:var(--ink)}
.pk-cost .offer-price .cur{font-style:normal;font-weight:700;font-size:var(--fs-small);color:var(--ink-muted)}
[dir=ltr] .pk-illus{left:auto;right:8px}
.pk-mo6~.pk-illus{bottom:calc(33.34% + 8px);left:calc(33.34% + 8px)}.pk-mo8~.pk-illus{bottom:calc(25% + 8px);left:calc(25% + 8px)}       /* in the large scene's own corner: it never covers a small scene's number */
[dir=ltr] .pk-mo6~.pk-illus{left:auto;right:calc(33.34% + 8px)}[dir=ltr] .pk-mo8~.pk-illus{left:auto;right:calc(25% + 8px)}
.pk-cost em{font-style:normal;font-size:var(--fs-small);line-height:18px;color:var(--ink-muted)}
.pk-cost small{font-size:var(--fs-small);line-height:18px;font-weight:600;color:var(--ink-muted)}       /* «يبدأ من», over the price of a service that has no ready-made offer (1.54.0) */
/* 1.55.1 (the designer's service-from-cards): the service's picture, its two lines, and the price in the navy box */
.pk-from .pk-head p{color:var(--ink)}
.pk-from .pk-head .pk-more{color:var(--ink-muted)}
.pk-from .pk-cost{gap:4px}
.pk-box{display:inline-flex;align-items:baseline;gap:8px;justify-self:start;padding:6px 14px 5px;border-radius:14px;background:var(--navy)}
.pk-box bdi,.pk-box bdi.num{font-family:var(--font-accent);font-weight:700;font-size:var(--fs-price-card);line-height:34px;letter-spacing:.02em;color:#fff}
.pk-box .cur{font-style:normal;font-weight:700;font-size:var(--fs-small);color:var(--mint)}
.pk-from .pk-buy:has(.btn:only-child){justify-content:flex-end}
.pk-from .pk-buy{flex-wrap:wrap}          /* in a narrow card the button goes under the price, whole */
.pk-from .pk-buy .btn{flex:1 1 auto}
.pk-note{margin:0;font-size:var(--fs-small);line-height:18px;color:var(--ink-muted)}
/* the bottom bar of «العروض» follows the tab (1.55.1); 1.59.0: under «خدمات أخرى» it is the service shown first there — its name, its price and its own button */
.oh-bar-t{display:none}
body:has(#ot-other:checked) .oh-bar-t[data-bar-tab=other]{display:contents}
body:has(#ot-other:checked) .oh-bar:has([data-bar-tab=other]) [data-bar-main]{display:none}
.pk-buy .btn{flex:none;min-height:48px;min-width:84px;padding:0 20px;border-radius:999px}
.ot-p{grid-template-columns:minmax(0,1fr);gap:14px}
.ot-row .ot-p{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(300px,82%);gap:12px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ot-row .ot-p::-webkit-scrollbar{display:none}
.ot-row .pk{scroll-snap-align:start}
.ot-row .ol-more{align-self:center}
.sec-head a.all-go,a.all-go{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 12px 0 8px;border-radius:999px;background:var(--mint-soft);color:var(--mint-ink);font-weight:600}
[dir=ltr] .sec-head a.all-go,[dir=ltr] a.all-go{padding:0 8px 0 12px}
.sec-head a.all-go .ico,a.all-go .ico{width:18px;height:18px}
a.all-go.ol-more{justify-self:center;align-self:center}
@media (min-width:900px){
  .ot-p{grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:16px}
  .ot-row .ot-p{grid-auto-columns:minmax(244px,calc((100% - 48px) / 4));margin-inline:0;padding:4px 2px 14px;scroll-padding-inline:2px}
  .pk{padding:12px}
}
@media (prefers-reduced-motion:no-preference){.ot-row .ot-p{scroll-behavior:smooth}}

/* ── 1.49.0: the page of one offer (the designer's package-v2). A phone reads it in one column, in the order of the model; a
   wide screen puts the order card, the resolution and the three facts in a column of their own beside the rest. ── */
.pkg-form{display:flex;flex-direction:column;gap:14px}
.pkg-main,.pkg-side{display:contents}
.pkg-pitch{order:1}.pkg .pack-more{order:2}.pkg-facts{order:3}.pkg-parts{order:4}.pkg-extra{order:5}.pkg .terms{order:6}.pkg-also{order:7}.pkg-order{order:8}
.pkg-pitch,.pkg-parts,.pkg-extra,.pkg .terms,.pkg .pack-more,.pkg-order{margin:0;padding:12px;border:0;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.pkg-pitch{display:grid;gap:12px}
.pkg-pitch .pitch{margin:0;padding:0 4px 4px;background:none;color:var(--ink)}
.pkg-pitch .pitch h2{color:var(--ink);font-size:var(--fs-h2);line-height:30px}
.pkg-pitch .pitch li{color:var(--ink)}
.pkg-pitch .pitch li .ico,.pkg-parts .ticks .ico{color:var(--mint-ink)}
.pkg .pack-more{display:grid;gap:6px}
.pkg .seg-links{gap:2px;padding:4px;border-radius:14px;background:var(--surface)}
.pkg .seg-links a{min-height:40px;border:0;border-radius:10px;background:none;color:var(--ink-muted)}
.pkg .seg-links a.on{background:var(--navy);color:#fff}
.pkg .pack-help{justify-self:start;min-height:44px;color:var(--mint-ink);text-decoration:underline;text-underline-offset:4px}
.pkg-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pkg-facts:empty{display:none}
.pkg-facts li{display:grid;justify-items:center;gap:4px;padding:12px 6px;border-radius:16px;background:var(--mint-soft);color:var(--ink);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-small);line-height:20px;text-align:center}
.pkg-facts .ico{width:22px;height:22px;color:var(--mint-ink)}
.pkg-parts{display:grid;gap:12px;background:none;box-shadow:none;padding:0}
.pkg-parts .parts{margin:0}
.pkg-parts .parts-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pkg-parts .parts-grid:has(li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}       /* four parts: two and two, never three and one alone */
.pkg-parts .ticks{padding:12px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.pkg-extra{min-width:0}
.pkg-extra legend{float:inline-start;width:100%;padding:0 4px 8px;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h3);color:var(--ink)}
.pkg-extra legend small{font-family:var(--font-body);font-weight:500;font-size:var(--fs-small);color:var(--ink-muted)}
.pkg-chips{clear:both;display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:none}
.pkg-chips::-webkit-scrollbar{display:none}
.pkg-chips label{flex:none;position:relative}
.pkg-chips input{position:absolute;opacity:0;width:1px;height:1px}
.pkg-chips span{direction:ltr;display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:52px;height:44px;padding:0 14px;border:1.5px solid var(--border-strong,#7A8499);border-radius:12px;background:#fff;color:var(--ink);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-item);cursor:pointer;white-space:nowrap}
.pkg-chips input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.pkg-chips input:focus-visible+span{outline:2px solid var(--focus,#1F2A4B);outline-offset:2px}
.pkg .terms summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 4px;list-style:none;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h3);color:var(--ink)}
.pkg .terms summary::-webkit-details-marker{display:none}
.pkg .terms summary .ico{width:20px;height:20px;transition:transform .2s}
.pkg .terms[open] summary .ico{transform:rotate(180deg)}
.pkg .terms ul{margin:4px 0 4px;padding-inline-start:22px;font-size:var(--fs-ui);line-height:24px;color:var(--ink-muted)}
.pkg-also-in{display:grid;gap:10px}
.pkg .suggest,.pkg .suggest.upgrade{padding:14px;border-radius:20px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.pkg-order{display:grid;gap:12px}
@media (min-width:900px){
  .pkg .totalbar{order:9;position:static;border:0;border-radius:24px;box-shadow:0 2px 12px rgba(18,40,76,.08);padding:16px 0}
  .pkg-form{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
  .pkg-main,.pkg-side{display:grid;gap:16px;min-width:0}
  .pkg-side{position:sticky;top:calc(var(--header-h) + 20px)}
  .pkg-cams .pkg-pitch{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;padding:12px}
  .pkg-pitch .pitch{padding:8px 8px 8px 4px}
  .pkg-parts{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;padding:12px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
  .pkg-parts[data-bare]{grid-template-columns:minmax(0,1fr)}
  .pkg-parts .ticks{padding:4px 8px;background:none;box-shadow:none}
  .pkg-also-in{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── 1.55.0: «مخطط تغطية الكاميرات» on a camera package's page (the designer's camera-coverage-plan). The plan is drawn by
   web/coverage.py; radios choose the camera and the rules below mark it, so it works with no script ── */
.pkg-cover{order:4}
.cp{display:grid;gap:10px;min-width:0;scroll-margin-top:calc(var(--header-h) + 16px)}
.cp-head{margin:0;align-items:center;gap:6px}
.cp .cp-head h2{padding-inline-start:30px;font-size:var(--fs-ui);line-height:24px;white-space:nowrap}          /* on a phone the heading and the four numbers share one row: a shorter dash */
[dir=ltr] .cp .cp-head h2{white-space:normal}          /* the English heading is longer: it takes a second line */
.cp .cp-head h2::before{top:15px;width:16px}
.cp .cp-head h2::after{top:11px;inset-inline-start:16px}
.cp-n{display:flex;gap:4px;margin-inline-start:auto;flex:none}
.cp-n a{display:grid;place-items:center;min-width:32px;height:34px;border-radius:10px;border:1.5px solid #8A93A6;background:#fff;color:var(--ink);font-family:var(--font-heading);font-weight:700;font-size:var(--fs-item)}
.cp-n a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
.cp-card{position:relative;display:grid;gap:10px;min-width:0;padding:12px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.cp-r{position:absolute;opacity:0;pointer-events:none}
.cp-plan{min-width:0}
.cp-plan svg{display:block;width:100%;height:auto;border-radius:14px}
.cp-plan text{font-family:var(--font-heading);font-weight:600}
.cp-plan .cp-m text{font-family:var(--font-latin);font-weight:700}
.cp-plan [data-cp]{cursor:pointer}
.cp-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 0;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
.cp-k{display:inline-flex;align-items:center;gap:6px}
.cp-k i{width:16px;height:10px;border-radius:3px;background:rgba(84,186,167,.45)}
.cp-k-in i{background:rgba(84,186,167,.25);outline:1px dashed #54BAA7}
.cp-s{display:none;grid-template-columns:132px minmax(0,1fr);gap:10px;align-items:center}
.cp-shot{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0E1428}
.cp-shot img{display:block;width:100%;height:100%;object-fit:cover}
.cp-shot em{position:absolute;inset-inline-start:5px;bottom:5px;padding:0 6px;border-radius:6px;background:rgba(14,20,40,.7);color:#fff;font-style:normal;font-size:var(--fs-small);line-height:20px}
.cp-code{display:block;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small);line-height:18px;letter-spacing:.04em;color:var(--mint-ink);text-align:start}
.cp-s strong{display:block;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h3);line-height:24px;color:var(--ink)}
.cp-s small{display:block;font-size:var(--fs-small);line-height:19px;color:var(--ink-muted)}
.cp-chips{display:flex;flex-wrap:wrap;gap:6px}
.cp-chips label{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding-inline:6px 12px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:var(--fs-ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cp-chips b{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:var(--fs-small)}
/* 1.62.0 (the designer's coverage-plan-v3): only the chosen camera's cone and what it guards show; the others are marks with a wedge; under the plan — what it covers, its scene whole, and the names in one row that is dragged */
.cp-plan .cp-c{display:none}
.cp-plan .fp-names text{font-family:var(--font-heading);font-weight:500}
.cp-l{display:none;align-items:center;gap:8px;margin:0;font-size:var(--fs-small);line-height:22px;color:var(--ink)}
.cp-l b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#167565;color:#fff;font-size:var(--fs-small)}
.cp-l .cp-lt{color:var(--ink-muted)}
.cp-l strong{font-family:var(--font-heading);font-weight:600}
.cp .cp-s{grid-template-columns:none}
.cp .cp-shot{display:block;border-radius:14px}
.cp .cp-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-12px;padding-inline:12px;scroll-padding-inline:12px}
.cp .cp-chips::-webkit-scrollbar{display:none}
.cp .cp-chips label{flex:none;white-space:nowrap}
#cp-r1:checked~.cp-plan .cp-c1,#cp-r2:checked~.cp-plan .cp-c2,#cp-r3:checked~.cp-plan .cp-c3,#cp-r4:checked~.cp-plan .cp-c4,#cp-r5:checked~.cp-plan .cp-c5,#cp-r6:checked~.cp-plan .cp-c6,#cp-r7:checked~.cp-plan .cp-c7,#cp-r8:checked~.cp-plan .cp-c8{display:block}#cp-r1:checked~.cp-plan .cp-f1,#cp-r2:checked~.cp-plan .cp-f2,#cp-r3:checked~.cp-plan .cp-f3,#cp-r4:checked~.cp-plan .cp-f4,#cp-r5:checked~.cp-plan .cp-f5,#cp-r6:checked~.cp-plan .cp-f6,#cp-r7:checked~.cp-plan .cp-f7,#cp-r8:checked~.cp-plan .cp-f8{display:none}#cp-r1:checked~.cp-plan .cp-m1 circle,#cp-r2:checked~.cp-plan .cp-m2 circle,#cp-r3:checked~.cp-plan .cp-m3 circle,#cp-r4:checked~.cp-plan .cp-m4 circle,#cp-r5:checked~.cp-plan .cp-m5 circle,#cp-r6:checked~.cp-plan .cp-m6 circle,#cp-r7:checked~.cp-plan .cp-m7 circle,#cp-r8:checked~.cp-plan .cp-m8 circle{fill:#167565;stroke:#FFFFFF;stroke-dasharray:none;r:9.5px}#cp-r1:checked~.cp-plan .cp-m1 text,#cp-r2:checked~.cp-plan .cp-m2 text,#cp-r3:checked~.cp-plan .cp-m3 text,#cp-r4:checked~.cp-plan .cp-m4 text,#cp-r5:checked~.cp-plan .cp-m5 text,#cp-r6:checked~.cp-plan .cp-m6 text,#cp-r7:checked~.cp-plan .cp-m7 text,#cp-r8:checked~.cp-plan .cp-m8 text{fill:#FFFFFF}#cp-r1:checked~.cp-lines .cp-l1,#cp-r2:checked~.cp-lines .cp-l2,#cp-r3:checked~.cp-lines .cp-l3,#cp-r4:checked~.cp-lines .cp-l4,#cp-r5:checked~.cp-lines .cp-l5,#cp-r6:checked~.cp-lines .cp-l6,#cp-r7:checked~.cp-lines .cp-l7,#cp-r8:checked~.cp-lines .cp-l8{display:flex}#cp-r1:checked~.cp-see .cp-s1,#cp-r2:checked~.cp-see .cp-s2,#cp-r3:checked~.cp-see .cp-s3,#cp-r4:checked~.cp-see .cp-s4,#cp-r5:checked~.cp-see .cp-s5,#cp-r6:checked~.cp-see .cp-s6,#cp-r7:checked~.cp-see .cp-s7,#cp-r8:checked~.cp-see .cp-s8{display:block}#cp-r1:checked~.cp-chips [for=cp-r1],#cp-r2:checked~.cp-chips [for=cp-r2],#cp-r3:checked~.cp-chips [for=cp-r3],#cp-r4:checked~.cp-chips [for=cp-r4],#cp-r5:checked~.cp-chips [for=cp-r5],#cp-r6:checked~.cp-chips [for=cp-r6],#cp-r7:checked~.cp-chips [for=cp-r7],#cp-r8:checked~.cp-chips [for=cp-r8]{background:var(--mint-soft);color:var(--mint-ink);font-weight:600}#cp-r1:checked~.cp-chips [for=cp-r1] b,#cp-r2:checked~.cp-chips [for=cp-r2] b,#cp-r3:checked~.cp-chips [for=cp-r3] b,#cp-r4:checked~.cp-chips [for=cp-r4] b,#cp-r5:checked~.cp-chips [for=cp-r5] b,#cp-r6:checked~.cp-chips [for=cp-r6] b,#cp-r7:checked~.cp-chips [for=cp-r7] b,#cp-r8:checked~.cp-chips [for=cp-r8] b{background:#167565}#cp-r1:focus-visible~.cp-chips [for=cp-r1],#cp-r2:focus-visible~.cp-chips [for=cp-r2],#cp-r3:focus-visible~.cp-chips [for=cp-r3],#cp-r4:focus-visible~.cp-chips [for=cp-r4],#cp-r5:focus-visible~.cp-chips [for=cp-r5],#cp-r6:focus-visible~.cp-chips [for=cp-r6],#cp-r7:focus-visible~.cp-chips [for=cp-r7],#cp-r8:focus-visible~.cp-chips [for=cp-r8]{outline:3px solid var(--mint-ink);outline-offset:2px}
@media (min-width:900px){
  .pkg-form>.pkg-main{grid-area:1/1}
  .pkg-form>.pkg-cover{grid-area:2/1}
  .pkg-form>.pkg-side{grid-area:1/2/3/3}          /* the order column runs beside both, so it never rides over the plan */
  .cp .cp-head h2{padding-inline-start:46px;font-size:var(--fs-h2);line-height:32px;white-space:normal}          /* as every other section's heading */
  .cp .cp-head h2::before{top:19px;width:26px}
  .cp .cp-head h2::after{top:15px;inset-inline-start:26px}
  .cp-card{grid-template-columns:minmax(0,560px) minmax(240px,1fr);grid-template-areas:"plan line" "plan see" "plan chips";grid-template-rows:auto auto 1fr;align-items:start;gap:12px 20px;padding:16px}          /* the plan no wider than 560px, the chosen camera's scene beside it, large */
  .pkg-form .cp-card{grid-template-areas:"plan line" "plan see" "chips chips";grid-template-rows:auto 1fr auto}          /* in the package page's narrower column the cameras' names run under the plan, not down a long empty side */
  .cp-plan{grid-area:plan}
  .cp-lines{grid-area:line}
  .cp .cp-chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}
  .cp-l{font-size:var(--fs-body)}
  .cp-see{grid-area:see}
  .cp-chips{grid-area:chips}
  .cp-s{grid-template-columns:minmax(0,1fr)}
  .cp-s strong{font-size:var(--fs-h3);line-height:28px}
}

/* ── 1.55.1: a service's page (the designer's service-cctv-v2). The head is the name, the line and the picture whole; the
   service's offers are the cards of «العروض», in a row that is pulled sideways on a phone ── */
.svc-top{display:grid;gap:12px;padding-top:14px;padding-bottom:6px}
.svc-top h1{margin:0}
.svc-top .lead{margin:4px 0 0}
.svc-top-more{display:none}
.svc-pic{position:relative;margin:0;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--surface-post)}
.svc-pic img{display:block;width:100%;height:100%;object-fit:cover}
.svc-pic figcaption{position:absolute;bottom:10px;inset-inline-start:10px;padding:2px 9px;border-radius:8px;background:rgba(14,20,40,.72);color:#fff;font-size:var(--fs-small);line-height:20px}
.svc-cover{padding-top:10px}
.svc-cover .pkg-cover{order:0}
.svc-cards{display:grid;grid-auto-flow:column;grid-auto-columns:min(300px,82%);gap:12px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.svc-cards::-webkit-scrollbar{display:none}
.svc-cards .pk{scroll-snap-align:start}
.svc-cards:has(.pk:only-child){grid-auto-columns:100%}
.svc-v2 .svc-points{margin-top:6px;padding:12px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.svc-order .btn-primary:only-child{width:100%}
.svc-sec .sec-head{align-items:center}
.svc-sec .sec-head h2{font-size:var(--fs-h2)}          /* «العروض والأسعار» and its pill on one row of a phone */
@media (min-width:900px){
  .svc-top{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:32px;padding-top:24px}
  .svc-top-more{display:grid;gap:16px;justify-items:start;margin-top:16px}
  .svc-top-more .svc-points{margin:0}
  .svc-v2 .svc-points{display:none}          /* on a wide screen the three points stand in the head, beside the picture */
  .svc-cards{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-inline:0;padding:4px 0 14px;overflow:visible}
  .svc-sec .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .svc-sec .faq>*{margin:0}
  .svc-order .btn-primary:only-child{width:auto}
  .svc-sec .sec-head h2{font-size:var(--fs-h2)}
}

/* ── 1.56.0 (the designer's business-v2 and services-and-footer-lighter): rows — a line icon in a soft mint square, a name,
   one line, an arrow, the whole row a link — each its own card (.lrows) or all in one card (.lcard) ── */
.lrows{display:grid;gap:10px}
.lrow{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px;border-radius:20px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08);color:var(--ink)}
.lrow-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--mint-soft);color:var(--mint-ink)}
.lrow-ico .ico{width:22px;height:22px}
.lrow .grow{flex:1;display:grid;gap:2px;min-width:0}
.lrow b{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h3);line-height:24px}
.lrow small{font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
.lrow>.ico{flex:none;width:18px;height:18px;color:var(--ink-muted)}
.lcard{padding:4px 14px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.lcard .lrow{padding:12px 0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--line)}
.lcard .lrow:last-child{border-bottom:0}
.lrow-art{display:none}
/* 1.84.14, «خدماتنا» on a phone: S1 of home-sections-options-v1 (the owner's pick) — two columns of tiles, the drawing beside the
   name and the line under them (two lines at most, every tile one height), the cloud PBX a row across. The owner: the drawing on
   the white of the tile, no tile behind it. A wide screen keeps its rows */
@media (max-width:600px){
  #services .lcard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;border-radius:0;background:none;box-shadow:none}
  #services .lcard .lrow{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:40px auto;align-content:start;gap:6px 8px;min-height:0;height:104px;box-sizing:border-box;padding:10px;border:0;border-radius:18px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
  #services .lrow-ico,#services .lrow:not(.lrow-cloud)>.ico{display:none}
  #services .lrow-art{display:block;width:40px;height:40px;object-fit:contain}
  #services .lrow .grow{display:contents}
  #services .lrow b{align-self:center;font-size:var(--fs-item);line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #services .lrow small{grid-column:1/-1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:20px}
  #services .lcard .lrow-cloud{grid-column:1/-1;grid-template-columns:40px minmax(0,1fr) 16px;grid-template-rows:none;align-items:center;height:64px}
  #services .lrow-cloud .grow{display:grid;gap:0;min-width:0}
  #services .lrow-cloud small{-webkit-line-clamp:1}
  #services .lrow-cloud>.ico{width:16px;height:16px;color:var(--mint-ink)}
}
/* /services/: a service's own picture at the start of its card */
.svc-list{display:grid;gap:12px}
.svc-card{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08);color:var(--ink)}
.svc-card-la{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/3}          /* 1.85.8: the service head's line art, straight on the card, no tile */
.svc-card-la img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.svc-card-pic{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--surface-post)}
.svc-card-pic img{display:block;width:100%;height:100%;object-fit:cover}
.svc-card-pic em{position:absolute;bottom:5px;inset-inline-start:5px;padding:0 6px;border-radius:6px;background:rgba(14,20,40,.72);color:#fff;font-style:normal;font-size:var(--fs-small);line-height:20px}
.svc-card .grow{display:grid;gap:2px;min-width:0}
.svc-card b{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h3);line-height:26px}
.svc-card small{font-size:var(--fs-ui);line-height:22px;color:var(--ink)}
.svc-card small.kind-more{font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
.svc-top .svc-title{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h1);line-height:38px;color:var(--ink)}
/* the companies' page */
.biz-grid{display:grid;gap:8px}
.biz-rows{min-width:0}
/* the footer, lighter: the logo and its line, the two ways to reach us, the links in two columns, one last line */






@media (min-width:900px){

  .lcard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;padding:8px 20px}
  .lcard .lrow:nth-last-child(2):nth-child(odd){border-bottom:0}
  .svc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .svc-card{grid-template-columns:180px minmax(0,1fr);gap:16px;padding:12px}
  .biz-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px;align-items:start}
  .biz-rows{position:sticky;top:calc(var(--header-h) + 20px)}          /* the rows stay beside the longer form */


}

/* ── 1.57.0: the quote's three steps in the new dress (the designer's quote-v2-step-1/2/3). Looks only: the form, its
   fields, its checks, its sentences and the voice path are as they were ── */
.q2-head{margin:10px 0 12px}
.q2-head h1{margin:0}
.q2-head .lead{margin:4px 0 0}
.q2 .qsteps{grid-template-columns:1.08fr .86fr 1.22fr;gap:5px;margin-bottom:14px}
.q2 .qsteps li{min-height:44px;padding:4px 6px;gap:5px;min-width:0;border:0;border-radius:999px;background:#fff;box-shadow:0 2px 10px rgba(18,40,76,.07);font-family:var(--font-heading);font-size:var(--fs-small);color:var(--ink);white-space:nowrap}
.q2 .qsteps li b{width:26px;height:26px;background:var(--surface);color:var(--ink-muted);font-family:var(--font-latin)}
.q2 .qsteps li.on{background:var(--navy);color:#fff}
.q2 .qsteps li.on b{background:var(--mint);color:var(--navy)}
.q2 .qsteps li.done{color:var(--ink)}
.q2 .qsteps li.done b{background:var(--mint-soft);color:var(--mint-ink)}
.q2 .card{border:0;border-radius:24px;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.q2 .choice>span{border-radius:999px}
.q2 [data-step="1"] .choice .ico{display:none}
.q2 .choices.tight{display:inline-flex;gap:0;padding:3px;border-radius:999px;background:var(--surface)}
.q2 .choices.tight .choice>span{min-height:38px;padding:0 16px;border:0;box-shadow:none;background:none;border-radius:999px;font-family:var(--font-latin);font-weight:700;color:var(--ink-muted)}
.q2 .choices.tight .choice input:checked+span{background:var(--navy);color:#fff}
.q2 .stepper{grid-template-columns:40px 40px 40px;height:40px;border:0;border-radius:0;background:none;overflow:visible}
.q2 .stepper button{width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--ink)}
.q2 .stepper button:hover{background:var(--surface-post)}
.q2 .stepper button:disabled{background:var(--surface);color:var(--line-strong)}
.q2 .stepper input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]){border:0;border-radius:0;box-shadow:none;background:none;min-height:0;padding:0;font-family:var(--font-latin);font-size:var(--fs-num)}          /* the number stands bare between the two round buttons */
.q2 .totalbar .tot-row{align-items:center}
.q2 .totalbar .tot-row>span{font-size:var(--fs-ui);color:var(--ink-muted)}
.q2 .totalbar .tot-row b{display:inline-flex;align-items:baseline;gap:8px;padding:6px 14px 5px;border-radius:14px;background:var(--navy);color:#fff}
.q2 .totalbar .tot-row b .num{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-h1);line-height:30px;color:#fff}
.q2 .totalbar .tot-row b .cur{margin:0;font-size:var(--fs-small);font-weight:700;color:var(--mint)}
.q2 .q-nav .btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--navy)}
/* «وصلنا طلبك» (the designer's quote-v2-received), on a screen only — the printed document keeps its own rules: the tick in
   the order's green, white cards, and the total in the navy box */
@media screen{
  .quote-doc .empty.ok{padding:26px 12px 20px}
  .quote-doc .empty.ok>.ico{width:72px;height:72px;padding:18px;background:var(--cta-bg);color:#fff}
  .quote-doc>.card{border:0;border-radius:24px;box-shadow:0 2px 12px rgba(18,40,76,.08)}
  .quote-doc .tot-row.price-hero{align-items:center}
  .quote-doc .tot-row.price-hero b{display:inline-flex;align-items:baseline;gap:8px;padding:8px 16px 6px;border-radius:16px;background:var(--navy)}
  .quote-doc .tot-row.price-hero b .num{font-size:var(--fs-price-card);color:#fff}
  .quote-doc .tot-row.price-hero b .cur{margin:0;font-weight:700;color:var(--mint)}
}

/* ── 1.58.0 (the designer's offers-v3 and her review of the wide screen) ── */
.pk .soon:not(.pop){background:var(--offer-ink);color:#fff}          /* «لفترة محدودة»: the red of offers, and only where the offer's own row says so */
.pk-cost .offer-price s{color:var(--offer-ink);text-decoration-color:var(--offer)}
.pk-need{display:none}
@media (min-width:900px){
  /* the bottom bar keeps to the page's own width: no two far ends with an empty middle */
  .oh-bar[data-oh-bar]{padding-inline:max(var(--gutter),calc((100vw - 1120px) / 2 + var(--gutter)))}
  /* «العروض»: a navy card fills what the last row leaves, with the page's own words */
  .ot:not(.ot-row) .pk-need{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;grid-column:span 2;min-height:220px;padding:28px;border-radius:24px;background:var(--navy);color:#fff}
  .pk-need b{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h2);line-height:32px}
  .ot:has(#ot-all:checked) ~ .need-row{display:none}
}

/* ── 1.58.0 (the designer's quote-print-a4-v2): the printed quote in the identity's dress — a navy head with the light logo,
   a navy head on each table, and the total in the navy box. Shape only: what the document says, and its labels, are as
   they were ── */
@media print{
  .quote-doc{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .quote-doc .print-head{margin:0 0 10px;padding:12px 16px;border:0;border-radius:10px;background:#1F2A4B}
  .quote-doc .print-head b{color:#fff}
  .quote-doc .print-head span{color:#D5DAE6}
  .quote-doc .card{margin:0 0 8px;padding:8px 0;border:0;border-radius:0;box-shadow:none;background:none}
  .quote-doc .doc-sec{margin-top:8px}
  .quote-doc .doc-lines thead th{padding:5px 8px;border:0;background:#1F2A4B;color:#fff}
  .quote-doc .doc-lines thead th:first-child{border-start-start-radius:6px;border-end-start-radius:6px}
  .quote-doc .doc-lines thead th:last-child{border-start-end-radius:6px;border-end-end-radius:6px}
  .quote-doc .doc-lines td{padding:5px 0 5px 6px}
  .quote-doc .tot-row.price-hero{align-items:center;margin-top:8px;padding-top:8px}
  .quote-doc .tot-row.price-hero b{display:inline-flex;align-items:baseline;gap:8px;padding:6px 14px 5px;border-radius:10px;background:#1F2A4B}
  .quote-doc .tot-row.price-hero b .num{font-size:24pt;color:#fff}
  .quote-doc .tot-row.price-hero b .cur{margin:0;font-weight:700;color:#54BAA7}
  .quote-doc .doc-steps{margin:4px 0 0}
  .quote-doc .print-contact{margin-top:8px;border-top:2px solid #1F2A4B;color:#1F2A4B}
}

/* ── 1.58.1: the printed quote, closer set, so an ordinary request is one A4 page (measured by switching these rules on in
   the browser at the page's own width: a request for cameras and Wi-Fi was a page and a half). Sizes and spaces only ── */
@media print{
  .quote-doc{font-size:10pt;line-height:1.35}
  .quote-doc .print-head{padding:9px 14px;margin-bottom:6px}
  .quote-doc .print-head img{height:40px;width:auto}
  .quote-doc .card{margin:0 0 4px;padding:4px 0}
  .quote-doc .doc-meta{gap:2px 12px;margin:0}
  .quote-doc .doc-meta dt{font-size:8.5pt}
  .quote-doc .doc-meta dd{font-size:10pt;margin:0}
  .quote-doc .pay-top h2{font-size:12pt;margin:0}
  .quote-doc .est-note{margin:4px 0;padding:5px 8px;font-size:8.5pt;line-height:1.35}
  .quote-doc .doc-sec{margin-top:6px}
  .quote-doc .doc-sec h3{margin:0 0 2px;font-size:10.5pt}
  .quote-doc .doc-lines{font-size:9.5pt}
  .quote-doc .doc-lines td{padding:2px 0 2px 6px}
  .quote-doc .doc-item{gap:6px}
  .quote-doc .doc-item img{width:30px;height:20px}
  .quote-doc .doc-item>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
  .quote-doc .doc-item small{font-size:8.5pt}
  .quote-doc .tot-row.price-hero{margin-top:4px;padding-top:6px}
  .quote-doc .tot-row.price-hero b .num{font-size:20pt}
  .quote-doc .doc-strip{margin:4px 0;padding:4px 8px;font-size:9pt}
  .quote-doc .doc-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;margin:2px 0 0;font-size:9pt}
  .quote-doc .doc-steps li{margin:0;padding:0}
  .quote-doc h2.h-sm{margin:0 0 2px;font-size:11pt}
  .quote-doc .print-note,.quote-doc .hint{margin:3px 0 0;font-size:8.5pt}
  .quote-doc .print-contact{margin-top:6px;padding-top:5px;font-size:9pt}
}
/* 1.58.1: the footer's «اسأل الذكاء الاصطناعي عنا» of the other pages lands here; the line stops under the fixed bar, not behind it */
.ask-line{scroll-margin-top:calc(var(--header-h) + 26px)}
/* 1.61.0: the fils of a price are smaller than its dinars («22.750»); on paper they keep the size of the number */
.fils{font-size:.78em}
@media print{.fils{font-size:inherit}}
/* 1.60.0: on a narrow phone the four tabs of «العروض» stand in one row with no dragging */
@media (max-width:400px){.ot-bar{gap:6px}.ot-l{padding:0 9px;font-size:var(--fs-ui)}}
/* 1.61.0: the English bar on a wide screen: its links are a step larger now (14px), so they stand closer and the bar stays inside 1366px */
@media (min-width:1240px) and (max-width:1499px){[dir=ltr] .desk-nav{gap:0}[dir=ltr] .desk-nav a{padding:8px 7px}}
/* 1.62.0: the bar at the top is 56px on a phone (64px on a wide screen, as it was): the logo, the menu, the language and the account stand smaller in it, each still at least 40px to the finger */
@media (max-width:899px){.topbar .wrap{gap:6px}.topbar .brand img,.topbar .brand picture img{height:36px}.topbar .icon-btn{width:40px;height:40px}.topbar .lang-switch{min-width:40px;min-height:40px;padding:0 8px}.topbar .pill{height:40px}}
/* 1.63.3: every dotted price is the plain Bold cut again, in its rule's own colour. The colour cuts (1.63.0) drew nothing at all
   on the owner's iPhone — Safari loads them and paints empty glyphs, so no fallback steps in and the price is not there. Their
   two files stay in static/fonts/v2/, named by no stylesheet (tests/test_round1633.py), until they can be tried on a real iPhone. */
/* 1.80.0, the owner: «هذا البار خله دايم موجود وتفاعلي». The bar is there from the first screen and never rests (the class 1.63.0 put on it is gone). */
.oh-bar{transition:transform .25s ease,visibility .25s}
@media (prefers-reduced-motion:reduce){.oh-bar{transition:none}}
/* 1.63.2: the dotted colour type is never set under 34px (under that its grey dots crowd the figure): a total in a bar — the
   estimate's result, the live total of a quote — is Montserrat 700 in the ink's colour, large and plain, its fils smaller */
.tot-row b .num[data-total]{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-h1);line-height:var(--lh-h1)}
/* 1.64.0, the owner: a box does not grow and shrink as what is in it changes. The bar of a total keeps one line under the
   total whatever the numbers are (a very long line is cut with dots; the same numbers stand whole in the page above it) */
.totalbar .tot-split{flex-wrap:nowrap;min-height:26px}
.totalbar .tot-split>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.totalbar .tot-split .chip{flex:none}
/* ── 1.66.0, the estimate (/estimate/) on the second designer's S12, S13 and S13b, in the site's own parts (the owner: «خلها
   مندمجة بالموقع لا تصير نشاز كتصميم»): the kind of place is three cards to choose from, the systems a list of rows, and the
   result is its total in a card of its own, the price as an invoice, and a bar at the foot with the total and the way on. ── */
.wiz .ph-sm{height:150px}
.wiz .ph-sm img{object-position:50% 78%}
.wiz-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.wiz-steps span:last-child{text-align:end}
.opts{display:grid;gap:8px}
.optc{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 12px;min-height:64px;padding:12px 16px;border:1.5px solid var(--line);border-radius:18px;background:#fff;color:var(--navy);text-align:start;cursor:pointer;box-shadow:var(--shadow)}
.optc b{font-family:var(--font-heading);font-size:var(--fs-item);line-height:var(--lh-item);font-weight:600}
.optc small{grid-column:2;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.optr{grid-row:1/3;width:22px;height:22px;box-sizing:border-box;border:2px solid var(--line-strong);border-radius:50%}
.optc[aria-pressed=true]{border-color:var(--navy);border-width:2px;padding:11.5px 15.5px}
.optc[aria-pressed=true] .optr{border:6px solid var(--navy)}
.optc:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wiz-q{display:block;margin-top:18px}
.wiz-q+.seg{margin-top:8px}
.pick-list{display:grid;gap:8px}
.pick-list .pick-card{grid-template-columns:auto 44px minmax(0,1fr);grid-template-areas:"tick ico t" "tick ico s";align-items:center;gap:0 12px;min-height:72px;padding:10px 16px;border-radius:18px}
.pick-list .pick-card .badge-ico{grid-area:ico;width:44px;height:44px}
.pick-list .pick-card b{grid-area:t;align-self:end;font-family:var(--font-heading);font-size:var(--fs-item);line-height:var(--lh-item)}
.pick-list .pick-card small{grid-area:s;align-self:start;line-height:var(--lh-small)}
.pick-list .pick-card .tick{grid-area:tick;position:static;width:24px;height:24px;border-radius:7px;transform:none}
.pick-list .pick-card[aria-pressed=true]{border-width:2px;background:#fff}
/* 1.80.0: over the first step, for who came from the banner's «تحت الإنشاء»: what the owner's figure includes, numbered as he wrote it */
.wiz-incl{display:grid;gap:8px;margin:0 0 16px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-raised)}
.wiz-incl-h{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-body);color:var(--navy)}
.wiz-incl ol{display:grid;gap:0;margin:0;padding:0;list-style:none}
.wiz-incl li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;padding:8px 0;font-size:var(--fs-ui);line-height:22px}
.wiz-incl li+li{border-top:1px solid #E6E8EB}
.wiz-incl li i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-style:normal;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small)}
.wiz-incl-f{margin:0;color:var(--mint-ink);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui)}
.wiz-more{display:grid;gap:10px;margin:18px 0 0}
.wiz-more .more{display:inline-flex;align-items:center;gap:6px}
.wiz-more .ico{width:14px;height:14px}
/* the result */
.est-head h1{display:block;font-size:var(--fs-h1);line-height:var(--lh-h1)}
.est-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:4px 0 0;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-muted)}
.est-meta .more{flex:none;margin:0}
.est-total{display:grid;gap:10px;padding:16px}
.est-total-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-ui);font-weight:600;color:var(--navy)}
.est-big{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;min-height:64px;margin:0;color:var(--navy)}
[dir=ltr] .est-big{justify-content:flex-start}
.est-big b{font-family:var(--font-accent);font-weight:700;font-size:var(--fs-price-xl);line-height:1;letter-spacing:.02em}
.est-big-rest{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-num-lg);white-space:nowrap}
.est-split{display:flex;gap:3px;height:10px}
.est-split i{flex:1 1 0;min-width:6px;border-radius:5px}
.est-split-eq,.est-dot-eq{background:var(--mint)}
.est-split-lab,.est-dot-lab{background:var(--navy)}
.est-parts{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.est-parts span{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:start;gap:0 6px}
.est-parts i{width:8px;height:8px;border-radius:2px}
.est-parts b{grid-column:1/-1;font-family:var(--font-latin);font-size:var(--fs-num);color:var(--navy)}
.est-review{justify-self:start}
.est-review[hidden]{display:none}
.est-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.est-acts .btn{min-height:44px;padding:0 6px;white-space:nowrap}
.est-h2{margin:22px 0 10px}
.est-h2 h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.est-h2 .lead{margin-top:2px}
.est-list{border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.est-list .sys{border:0;border-radius:0;background:none;box-shadow:none}
.est-list .sys+.sys{margin-top:0;border-top:1px solid var(--line)}
.est-list .sys-h{min-height:72px;padding:12px 16px}
.est-list .sys-h .badge-ico{width:44px;height:44px}
.est-list .sys-h .sum{font-family:var(--font-latin);font-size:var(--fs-num)}
.est-list .sys[data-open="true"] .sys-b{margin:0 12px 12px;padding:4px 12px 12px;border-radius:14px;background:var(--surface)}
.est-list>.opt,.est-list>.needs{margin:0;padding:14px 16px;border-top:1px solid var(--line)}
.est-how{margin-top:12px}
.est-how[hidden]{display:none}
.est-how p{margin:10px 0 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.est-note{margin:10px 0 12px}
.est-bar .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.est-bar .tot-row{display:grid;gap:0;justify-items:start}
.est-bar .tot-row>span{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.est-bar .bar-actions{display:flex;align-items:center;gap:8px}
.est-bar .btn{min-height:48px;padding:0 18px;white-space:nowrap}
.est-bar .tot-row b .num[data-total]{font-size:var(--fs-num-lg);line-height:var(--lh-h3)}
.est-bar .tot-row b{white-space:nowrap}
.est-list .sys-h .badge-ico,.pick-list .pick-card .badge-ico{background:var(--mint-soft);color:var(--mint-ink)}
.est-pad{padding-bottom:104px}
@media (min-width:900px){.est-pad{padding-bottom:40px}.est-bar .wrap{grid-template-columns:minmax(0,1fr)}}
/* ── 1.67.0: «ماركات نعمل بها» and «بالأرقام» after «خدماتنا» (brand/generated/mockups/home-brands-numbers-v3-*). The logos stand
   in white cells of one size — two rows that are pulled sideways on a phone, a grid on a wide screen; the numbers are navy
   cards of one height, the number in the dotted type (never under 34px), white. Nothing here grows or shrinks. ── */
.bl{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,60px);grid-auto-columns:112px;gap:8px;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 6px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
.bl::-webkit-scrollbar{display:none}
.bl-c{display:grid;place-items:center;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:var(--shadow);scroll-snap-align:start}
.bl-c img{display:block;width:100%;height:100%;object-fit:contain}
.bl-t b{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-ui);line-height:1.2;color:#4F5A73;text-align:center;overflow-wrap:anywhere}          /* 1.85.2: a brand named, with no logo */
.bl-more{margin:6px 0 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.nb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.nb-c{display:grid;align-content:space-between;justify-items:start;gap:8px;height:112px;box-sizing:border-box;padding:14px;border-radius:20px;background:var(--navy);color:#fff}
.nb-c b{display:block;min-width:2ch;font-family:var(--font-accent);font-weight:700;font-size:var(--fs-price-hero);line-height:44px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.nb-c span{font-size:var(--fs-ui);line-height:var(--lh-ui);color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nb-1{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .bl{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:60px;margin-inline:0;padding:2px 0;overflow:visible}
  .bl-more{display:none}
  .nb{grid-template-columns:repeat(4,minmax(0,1fr))}.nb-3{grid-template-columns:repeat(3,minmax(0,1fr))}.nb-2{grid-template-columns:repeat(2,minmax(0,1fr))}.nb-1{grid-template-columns:minmax(0,1fr)}
  .nb-c b{line-height:52px}
}
@media (min-width:900px){.est-bar .tot-row{display:none}}          /* 1.67.0: on a wide screen the total stands once, in its own card; the card at the side holds the way on */
.est-bar-line{display:none;margin:0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
@media (min-width:900px){.est-bar-line{display:block}}

/* ── 1.77.1, the footer of the designer's footer-v2 (templates/web/_footer.html): the logo with three white buttons, the links
   in two columns, the last line; no green. It keeps the class «foot» for the rules that leave room for the floating button. ── */
.foot.ft2{margin-top:28px;padding:14px 0 env(safe-area-inset-bottom);background:var(--navy);color:#fff;font-size:var(--fs-ui)}
.bar-on .foot.ft2{padding-bottom:calc(96px + env(safe-area-inset-bottom))}          /* the offer bar is up: the last links and the last line end above it */
.ft2 a{color:#fff;text-decoration:none}
.ft2-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo call" "tag tag" "links links";align-items:center;column-gap:12px}
.ft2-top{display:contents}                      /* a phone: the logo beside the buttons, the line under both */
.ft2-logo{grid-area:logo;display:flex;align-items:center;height:44px}
.ft2-logo img{display:block;width:auto;height:32px}
.ft2-tag{grid-area:tag;margin:4px 0 0;font-size:var(--fs-small);line-height:20px;color:#C9CED6}
.ft2-call{grid-area:call;align-self:start;display:flex;align-items:center;gap:8px}
.ft2 .ft2-tel,.ft2 .ft2-ib{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;height:44px;border-radius:14px;background:#fff;color:var(--navy)}
.ft2 .ft2-tel .num{letter-spacing:0}          /* 1.79.0: static/brand-v2.css spaces the digits of every phone link; the drawing's are close */
.ft2 .ft2-tel{padding:0 14px;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-item);white-space:nowrap}
.ft2 .ft2-ib{width:44px}
.ft2-call .ico{width:20px;height:20px}
.ft2-tel .ico{width:18px;height:18px}
.ft2 a:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.ft2-links{grid-area:links;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px;margin-top:10px;padding-top:4px;border-top:1px solid rgba(255,255,255,.14)}          /* 1.84.14: three columns on a phone, rows of 32 */
.ft2-links a{display:flex;align-items:center;min-height:32px;font-size:var(--fs-small);line-height:16px;overflow-wrap:anywhere}
.ft2-sub{display:flex;flex-wrap:wrap;justify-content:center}
.ft2 .ft2-sub a{color:#C9CED6;text-decoration:none}
.ft2 .ft2-sub a+a::before{content:"·";margin-inline:6px;color:#8C95A8}
.ft2 .ft2-end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:0;margin:4px 0 0;padding:8px 0;border-top:1px solid rgba(255,255,255,.14);font-size:var(--fs-small);color:#C9CED6;text-align:center}
@media (max-width:359px){.ft2-in{grid-template-areas:"logo logo" "call call" "tag tag" "links links"}.ft2-call{margin-top:10px}}
@media (min-width:900px){
  .foot.ft2{padding-top:28px}
  .ft2-in{grid-template-columns:320px minmax(0,1fr) auto;grid-template-areas:"top links call";align-items:start;column-gap:40px}
  .ft2-top{display:block;grid-area:top;min-width:0}
  .ft2-logo{height:auto}
  .ft2-logo img{height:38px}
  .ft2-links{display:block;justify-self:center;width:416px;columns:2;column-gap:16px;margin-top:0;padding-top:0;border-top:0}          /* two columns of 200, as before */
  .ft2-links a{min-height:36px;font-size:var(--fs-item);line-height:24px;break-inside:avoid}
  .ft2 .ft2-end{flex-direction:row;justify-content:space-between;gap:16px;margin-top:18px;padding:12px 0}
}

/* ───────── 1.81.0, the bar with the one floating button in its middle (the designer's assistant-fab-v4 and v5; the owner:
   «اعتمد الخلفية أ», «خلها ليكويد اشوي وتتحرك خفيف») — a phone only; a wide screen is as it was.
   One shape for the three bars that are drawn: the offer bar of every page (templates/web/_offer_bar.html), a package's own
   order bar, and the estimate's «التالي». 76px tall in the identity's light grey, the signal's two waves meeting under the
   button (brand/generated/patterns → static/brand/signal-*-light.svg), and over its middle a hump of 40px that is the
   button's ring: the button, 64px, stands with its centre on the bar's edge. A side, 84px left empty, a side: the name
   alone, and the green button with its word and the price under it.
   The hump is the designer's light way: one still shape (static/brand/bar-hump.svg) that breathes by transform, 5s — no
   path redrawn at every frame, and nothing to write in the page's shell. It rises with the assistant's hop and swells
   under a press. For who asked for stillness nothing moves. */
@keyframes hb-breathe{0%,100%{transform:none}50%{transform:scale(1.03,1.04)}}
@keyframes hb-float{0%,100%{transform:none}50%{transform:translateY(-1.5px)}}
@keyframes hb-hop{0%,100%{transform:none}30%{transform:translateY(-9px) scale(1.06)}55%{transform:none}75%{transform:translateY(-3px)}}
@media (min-width:900px){.oh-bar[data-kind=any]{display:none}.oh-bar .oh-link{display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-weight:700}.oh-bar .btn .oh-p{margin-inline-start:8px}.oh-bar .oh-tail,.oh-bar .oh-area{flex:0 0 100%}}
[data-offer-total]{display:inline-block;min-width:3.4ch;text-align:center;font-variant-numeric:tabular-nums}          /* 1.85.8, the owner: the total keeps one width as the extras change it (the most a package reaches is three figures) */
.oh-bar .btn .amt .num{font-family:var(--font-latin);font-weight:700}
@media (max-width:899px){
  :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav){position:fixed;inset:auto 0 0 0;z-index:25;display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);align-items:center;gap:0;box-sizing:border-box;height:calc(76px + env(safe-area-inset-bottom));min-height:0;margin:0;padding:0 16px env(safe-area-inset-bottom);border:0;border-top:1px solid #C9CED6;border-radius:0;background:url("/static/brand/signal-bl-light.ece266e45c08.svg") calc(50% + 130px) -140px/260px 260px no-repeat,url("/static/brand/signal-br-light.cb65cb84a7ac.svg") calc(50% - 130px) -140px/260px 260px no-repeat,#DCDCDE;box-shadow:0 -3px 8px rgba(18,40,76,.12);-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
  :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)::before{content:"";position:absolute;left:50%;top:-41px;width:128px;height:41px;margin-left:-64px;background:url("/static/brand/bar-hump.60433bef9d6f.svg") 0 0/128px 41px no-repeat;filter:drop-shadow(0 -3px 3px rgba(18,40,76,.10));transform-origin:50% 100%;pointer-events:none}
  /* the offer bar's two sides */
  .oh-bar[data-oh-bar] .t{grid-column:1;display:grid;align-content:center;gap:0;max-height:60px;overflow:hidden;font-size:var(--fs-small);line-height:18px;color:#4F5A73;text-align:start}
  .oh-bar[data-oh-bar] .t b{flex:none;margin:0;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui);line-height:21px;color:#1F2A4B;white-space:normal;overflow:visible}
  .oh-bar[data-oh-bar] .oh-tail{display:none}
  .oh-bar[data-oh-bar] .oh-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui);line-height:21px;color:#1F2A4B;text-decoration:none}
  .oh-bar[data-oh-bar] .oh-link .ico{width:16px;height:16px;color:var(--mint-ink)}
  :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav) .btn.btn-primary{grid-column:3;display:grid;align-content:center;justify-items:center;gap:0;width:100%;height:auto;min-height:52px;box-sizing:border-box;margin:0;padding:4px 6px;border-radius:16px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui);line-height:20px;text-align:center;white-space:normal;text-wrap:balance}          /* 1.85.2, the owner: a long word («اطلب عرض سعر مخصص» on 360–390) goes to a second line inside the button, never out of it */
  [dir=ltr] :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav) .btn.btn-primary{padding:0 2px;font-size:var(--fs-small);letter-spacing:-.02em}          /* «Order the package» is wider than its Arabic: set a size down, it stands whole on a phone of 360 */
  .oh-bar[data-oh-bar] .btn .oh-p{display:inline-flex;align-items:baseline;gap:4px;font-size:var(--fs-small);line-height:20px;font-weight:600}
  .oh-bar[data-oh-bar] .btn .amt{display:inline-flex;align-items:baseline;gap:3px}
  .oh-bar[data-oh-bar] .btn .amt .num{font-size:var(--fs-num);line-height:20px;color:inherit}
  .oh-bar[data-oh-bar] .btn .amt .cur{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small);color:inherit}
  /* the estimate's steps: «رجوع» on the name's side, «التالي» on the button's */
  .wiz-nav .btn.wiz-prev{grid-column:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;height:52px;min-height:0;margin:0;padding:0 6px;border-radius:16px;background:rgba(255,255,255,.7);box-shadow:none;color:#1F2A4B;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui)}
  .wiz-nav .btn{max-width:none}
  /* the one floating button, in the hump: no ring of its own (the hump is its ring), its centre on the bar's edge */
  body:has(:is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)):not(.no-fab) .fabs{left:50%;right:auto;bottom:calc(44px + env(safe-area-inset-bottom));margin-left:-32px;--va-fab-inset:0px;--va-fab-ring:none}          /* the assistant's disc takes its ring from these two (static/assistant.css): in a hump it has none */
  body:has(:is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)):not(.no-fab) .fabs .mic-fab,body:has(:is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)):not(.no-fab) .fabs .wa-fab{box-shadow:none}
  /* the page ends above the bar and its hump */
  .bar-on .foot.ft2{padding-bottom:calc(124px + env(safe-area-inset-bottom))}
  body:has(.wiz-nav) main,body:has(.totalbar.pg3-bar) main{padding-bottom:calc(124px + env(safe-area-inset-bottom))}
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)::before{animation:hb-breathe 5s cubic-bezier(.45,0,.55,1) infinite}
  body:has(:is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)):not(.no-fab) .fabs{animation:hb-float 5s cubic-bezier(.45,0,.55,1) infinite}
  body:has(.va-fab.va-hop) :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)::before{animation:hb-hop .7s ease}
  body:has(.fabs :active) :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)::before{animation:none;transform:scale(1.14,1.06);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
}
@media (min-width:900px){.wiz-nav .wiz-prev{display:none}}

/* ───────── 1.81.1, the manager: «لا زاوية على الجوال في أي صفحة عامة». On a phone the one floating button is in the middle of
   the foot of every public page, whatever is under it:
   • a bar with the hump (above): in the hump;
   • a bar that is not drawn with it — a quote's total, the cloud's, the maintenance's, an estimate's result, an older
     offer's — the same hump stands over that bar's upper edge, white as the bar is, and the button on the edge; the bar's
     own rows are as they were (their first is a word at one end and a figure at the other: the middle is free).
     static/fab.js says how tall the bar is («--foot-bar») and that it is there («tb-on»);
   • no bar at all: the button alone, 16px over the foot, in its white ring. */
@media (max-width:899px){
  .fabs,[dir=ltr] .fabs{left:50%;right:auto;margin-left:-32px;--va-fab-inset:3px;--va-fab-ring:0 0 0 3px #fff,0 8px 20px -6px rgba(31,42,75,.55)}
  .tb-on body:not(.no-fab) .fabs{bottom:calc(var(--foot-bar,76px) - 32px);--va-fab-inset:0px;--va-fab-ring:none}
  .tb-on body:not(.no-fab) .fabs .mic-fab,.tb-on body:not(.no-fab) .fabs .wa-fab{box-shadow:none}
  .tb-on .totalbar:not(.pg3-bar)::before{content:"";position:absolute;left:50%;top:-41px;width:128px;height:41px;margin-left:-64px;background:url("/static/brand/bar-hump-white.a93016510f27.svg") 0 0/128px 41px no-repeat;filter:drop-shadow(0 -3px 3px rgba(18,40,76,.10));transform-origin:50% 100%;pointer-events:none}
  .tb-on main::after{content:"";display:block;height:44px}          /* the page ends above the hump too */
  /* a quote's steps (the designer's screen 3, as the estimate's): «السابق» on one side and «التالي» on the other, the middle left to the button — at the first step the bar is this row alone, and the button stood over its word */
  .tb-on .totalbar .q-nav{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);gap:0;align-items:center}
  .tb-on .totalbar .q-nav[hidden]{display:none}
  .tb-on .totalbar .q-nav [data-prev]{grid-column:1;width:100%;margin:0}
  .tb-on .totalbar .q-nav [data-next]{grid-column:3;width:100%;margin:0}
}
@keyframes hb-beat{0%,100%{transform:none}45%{transform:scale(1.035)}}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .tb-on .totalbar:not(.pg3-bar)::before{animation:hb-breathe 5s cubic-bezier(.45,0,.55,1) infinite}
  .tb-on body:not(.no-fab) .fabs{animation:hb-float 5s cubic-bezier(.45,0,.55,1) infinite}
  body:has(.va-fab.va-hop) .totalbar:not(.pg3-bar)::before{animation:hb-hop .7s ease}
  body:has(.fabs :active) .totalbar:not(.pg3-bar)::before{animation:none;transform:scale(1.14,1.06);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
  /* the designer's v5: when the price in a bar's button changes the button beats once (static/fab.js puts the class; the figure itself goes up and out and the new one comes from below, as everywhere: static/motion.js) */
  :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav) .btn.hb-beat{animation:hb-beat .36s ease}
}

/* 1.81.2: the estimate hides its bar for an office or a commercial building (it has no «التالي» there): with no bar under it the button is the lone one, in its ring, 16px over the foot */
@media (max-width:899px){
  /* an estimate's result: its bar is one row, the total and the button — a side, the middle left to the floating button, a side (the button stood under it by 19px) */
  .tb-on .est-bar .wrap{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);gap:0}
  .tb-on .est-bar .tot-row{grid-column:1}
  .tb-on .est-bar .btn{grid-column:3;width:100%;padding:0 6px;font-size:var(--fs-ui)}
  .wiz-nav[hidden]{display:none}
  body:has(.wiz-nav[hidden]):not(.no-fab) .fabs{bottom:calc(16px + env(safe-area-inset-bottom));animation:none;--va-fab-inset:3px;--va-fab-ring:0 0 0 3px #fff,0 8px 20px -6px rgba(31,42,75,.55)}
  body:has(.wiz-nav[hidden]):not(.no-fab) .fabs .mic-fab,body:has(.wiz-nav[hidden]):not(.no-fab) .fabs .wa-fab{box-shadow:0 0 0 3px #fff,0 8px 22px -8px rgba(31,42,75,.55)}
}

/* ───────── 1.82.4, the owner on his iPhone: «البار مغطي على الكلام وما اقدر انزل تحت؟!». Every page with a bar at the foot
   ends above the bar, the 32 the floating button stands over its edge, and 16 more — and above the iPhone's own strip
   (safe-area). A bar of the usual 76 (the offer's, a package's, the estimate's steps); a taller one (the maintenance's,
   a quote's total) is measured by static/fab.js («tb-on», «--foot-bar»: its height with its own safe-area). The footer
   takes the space when there is one, the page's main part when there is none. Written once here, over the older rules
   that each counted one bar. */
@media (max-width:899px){
  body:has(:is(.oh-bar[data-oh-bar],.totalbar,.wiz-nav:not([hidden]))) :is(.foot,.foot.ft2){padding-bottom:calc(76px + 32px + 16px + env(safe-area-inset-bottom))}
  body:has(:is(.oh-bar[data-oh-bar],.totalbar,.wiz-nav:not([hidden]))):not(:has(.foot)) main{padding-bottom:calc(76px + 32px + 16px + env(safe-area-inset-bottom))}
  html.tb-on body:has(.totalbar) :is(.foot.ft2,.foot.foot){padding-bottom:calc(var(--foot-bar,76px) + 32px + 16px)}
  html.tb-on body:has(.totalbar):not(:has(.foot)) main{padding-bottom:calc(var(--foot-bar,76px) + 32px + 16px)}
  .tb-on main::after{content:none}
  body:has(:is(.oh-bar[data-oh-bar],.totalbar,.wiz-nav:not([hidden]))) .wrap.est-pad{padding-bottom:0}          /* its own older room for a bar, now counted above */
}
form#order{scroll-margin-top:calc(var(--header-h) + 16px)}          /* 1.82.4: «اطلب» of a home card lands on the order, under the header */

/* 1.82.6, a wide screen narrower than about 1300 (900, 1024): the bar's button ran under the floating button in its corner (24 to
   88 from the side, both languages). It keeps the designer's 17 clear of it (home-vertical-rhythm-wide-v1: «زر الشريط يبدأ بعده بـ 17») */
@media (min-width:900px){.oh-bar[data-oh-bar]{padding-inline-end:max(105px,calc((100vw - 1120px) / 2 + var(--gutter)))}}

/* 1.82.7, the header between 900 and 1239: the English row of links ran 143 past the page at 1024 (the Arabic 7) and drew a
   sideways scroll. «Customer portal» keeps its sign there, its words in its own label (aria-label), and the links stand 4 apart */
@media (min-width:900px) and (max-width:1239px){.topbar .pill span{display:none}.topbar .pill{padding:0 11px}.desk-nav a{padding:8px 4px}}

/* 1.82.8, the footer's row of the ways to pay (the designer's footer-payments-v1): between the links and the last line, a
   white square for each way that is on — KNET, VISA, Mastercard with Sadad's switch, Deema with Deema's; one that is off is
   not drawn, all off and the row is gone. Not links. The mark is the way's name until its official logo is in (shop/_pay_logo.html) */
.pay-logo{display:inline-grid;place-items:center;height:24px;min-width:44px;box-sizing:border-box;padding:0 6px;border:1.5px dotted #B7BECB;border-radius:6px;background:#fff;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small);line-height:1;color:#4F5A73;white-space:nowrap}          /* the mark of one way to pay, wherever it stands (the order step, the footer, Deema's line) */
.ft2-pay{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px;padding:10px 0;border-top:1px solid rgba(255,255,255,.14)}
/* 1.84.12, the owner (his screenshot at 390): one row, every mark in the same tile — 52 × 32, radius 8, white, a thin border,
   the mark centred and whole inside. Deema's tile is navy (its word is white). Apple Pay and Google Pay keep their own marks
   untouched, inside the tile with the clear space their rules ask (Apple: a quarter of its height, never sharing a border) */
.ft2-pay .pay-logo{position:relative;flex:none;width:52px;height:32px;min-width:0;box-sizing:border-box;padding:5px 6px;border:1px solid #E3E6EC;border-radius:8px;background:#fff;overflow:hidden;color:var(--navy);font-size:var(--fs-small);line-height:15px;white-space:normal;text-align:center}
.ft2-pay .pay-logo img{width:100%;height:100%;object-fit:contain}
.ft2-pay .pay-logo.pl-deema{width:108px;padding:4px 6px;border-color:rgba(255,255,255,.35);background:#1F2A4B}          /* 1.84.14, the owner: Deema readable — wider, its word about 13 high; on a phone it takes a row of its own, centred, never cut at the edge */
.ft2-pay .pay-logo.pl-applepay{padding:6px 10px}
.ft2-pay .pay-logo.pl-googlepay img{position:absolute;left:50%;top:50%;width:auto;height:33px;max-width:none;max-height:none;transform:translate(-50%,-50%)}          /* its file keeps its clear space inside: drawn larger, the mark 18 high */
@media (min-width:900px){.ft2-pay{justify-content:flex-start;gap:8px;padding:16px 0}.ft2-pay .pay-logo{width:64px;height:40px;padding:6px 8px}.ft2-pay .pay-logo.pl-applepay{padding:8px 13px}.ft2-pay .pay-logo.pl-deema{width:120px;padding:6px 8px}.ft2-pay .pay-logo.pl-googlepay img{height:41px}.ft2-pay+.ft2-end{margin-top:0}}

/* 1.82.9, the bar's button of a house being built: «ابتداء من 150 KD» alone (the owner: «احسب الان مالها داعي»), its figure bold */
.oh-bar[data-oh-bar] .btn.oh-solo .oh-p{margin:0;font-size:var(--fs-ui);line-height:22px}
.oh-bar[data-oh-bar] .btn.oh-solo .num{font-size:var(--fs-h3);font-weight:800}
.pay-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:100%}          /* 1.82.10: an official logo in its slot, whole, never stretched */
.pay-logo:has(img){border-style:solid;border-color:#E3E6EC}

/* 1.84.1: a page inside the heat map's frame (static/motion.js): no bar at its foot, no floating button, no space kept for them */
.framed .fabs,.framed .oh-bar,.framed .totalbar,.framed .wiz-nav{display:none!important}
.framed body{padding-bottom:0!important}

/* 1.84.13, the designer's offers-header-v1: the head of «كل العروض» as a white card — its brow, the title and one line, and
   Arya's line art (the camera, the distributor and the intercom) on the same light tile as «باقات جاهزة»; no big picture,
   so the tabs and the offers stay near the top */
.page-head.of-head{display:flex;align-items:center;gap:12px;margin-top:4px;padding:16px;border-radius:22px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.06)}
.of-t{flex:1;min-width:0}
.of-brow{margin:0;font-size:var(--fs-small);font-weight:700;line-height:20px;color:var(--mint-ink)}
.of-head h1{margin:2px 0 0;line-height:32px}
.of-head .lead{margin:4px 0 0;font-size:var(--fs-small);line-height:22px;color:#4F5A73}
.of-art{position:relative;flex:none;width:118px;height:92px;border-radius:16px;background:#EEF1F4}
.of-art img{position:absolute;object-fit:contain}
.of-art img:nth-child(1){left:6px;top:8px;width:62px;height:46px}
.of-art img:nth-child(2){right:6px;top:6px;width:50px;height:46px}
.of-art img:nth-child(3){left:34px;bottom:4px;width:54px;height:46px}
@media (min-width:900px){
  .page-head.of-head{padding:28px 36px}
  .of-head h1{line-height:42px}
  .of-head .lead{font-size:var(--fs-body)}
  .of-art{width:430px;height:150px}
  .of-art img:nth-child(1){left:18px;top:26px;width:130px;height:96px}
  .of-art img:nth-child(2){left:165px;right:auto;top:22px;width:100px;height:90px}
  .of-art img:nth-child(3){left:296px;top:28px;bottom:auto;width:110px;height:96px}
}

/* 1.84.15, the owner: the cloud PBX is for companies only, said under the title before anything is chosen */
.cq-rule{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:var(--fs-small);line-height:21px;color:var(--ink-muted)}
.cq-rule .ico{flex:none;width:16px;height:16px;margin-top:2px;color:var(--mint-ink)}
.cq-rule a{color:var(--mint-ink);font-weight:600;white-space:nowrap}

/* 1.84.15, «معاينة الموقع» (templates/web/inspection.html) and its two rules in the order step (templates/shop/checkout.html) */
.iv-pay{display:grid;gap:12px}
.iv-rules,.co-rules{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.iv-rules li,.co-rules li{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-small);line-height:21px;color:var(--ink-muted)}
.iv-rules .ico,.co-rules .ico{flex:none;width:16px;height:16px;margin-top:2px;color:var(--mint-ink)}
.iv-go{width:100%;min-height:48px}
.iv-note{margin:0;text-align:center;font-size:var(--fs-small);color:var(--ink-muted)}
.co-rules{margin-top:8px;padding:0 4px}
.co-rules-wide{display:none}
@media (min-width:900px){.co-main .co-rules{display:none}.co-rules-wide{display:grid}}

/* 1.84.17, the owner (the live home on a phone: big gaps here, tight there): one vertical rhythm for the home page. Its sections
   stand in one column with ONE gap between any two (--home-gap, a phone's and a wide screen's), and no section adds space of its
   own above or below */
:root{--home-gap:28px}
@media (min-width:900px){:root{--home-gap:48px}}
.page-home.page-home main{display:flex;flex-direction:column;gap:var(--home-gap)}
.page-home.page-home main>*{margin-block:0;padding-block:0}

/* ── 1.84.18, one bottom bar for the forms (brand/generated/mockups/bar-unified-v1, approved): the package page's own bar
   (static/package.css, pg3) made the rule for every page that sends something — the order step, /quote/, the maintenance
   contract, the cloud quote, an offer, the estimate. The same grey bar with the same raised middle (templates/web/_hump.html);
   the page's primary button stands in that middle; on the start side what is being totalled and its live figure, on the end
   side one small secondary thing; Arya leaves the bar on these pages (a phone) or waits in the corner (a wide screen). Each
   page keeps its own buttons and figures — and their scripts — and only puts them in these three places. «تحقق من الحقول
   المظللة» stands over the bar as a notice. Replaces the white «totalbar» of these pages (and its older hump with Arya). ── */
.totalbar.ubar.ubar{position:fixed;inset:auto 0 0 0;z-index:25;box-sizing:border-box;height:calc(76px + env(safe-area-inset-bottom));margin:0;padding:0 0 env(safe-area-inset-bottom);border:0;border-top:1px solid #C9CED6;border-radius:0;box-shadow:none;background:#DCDCDE;order:initial}
.totalbar.ubar.ubar::before,.tb-on .totalbar.ubar.ubar::before{content:none;animation:none}
.totalbar.ubar.ubar>.wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) calc((100vw - 116px) / 2 + 16px) minmax(0,1fr);grid-template-rows:76px;grid-template-areas:none;align-items:center;gap:0;box-sizing:border-box;height:76px;max-width:none;margin:0;padding:0 16px}
.totalbar.ubar.ubar .ask-row,.totalbar.ubar.ubar .q-nav,.tb-on .totalbar.ubar.ubar .q-nav{display:contents}
/* the start: what is totalled, and its figure */
.totalbar.ubar.ubar .tot-row{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-width:0;margin:0;white-space:nowrap}
.totalbar.ubar.ubar .tot-row>span{font-size:var(--fs-small);line-height:18px;font-weight:600;color:#4F5A73}
.totalbar.ubar.ubar .tot-row b{display:inline-flex;align-items:baseline;gap:4px;padding:0;border-radius:0;background:none;color:var(--navy);line-height:26px}
.totalbar.ubar.ubar .tot-row b .num{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-num-lg);line-height:26px;color:var(--navy)}
.totalbar.ubar.ubar .tot-row b .was{font-size:var(--fs-small);color:#7A8499}
.totalbar.ubar.ubar .tot-row b .cur,.totalbar.ubar.ubar .tot-row .cur{margin:0;font-family:var(--font-latin);font-size:var(--fs-small);font-weight:700;color:var(--navy)}
/* the raised middle and the page's primary button over it */
.totalbar.ubar.ubar .ub-hump{grid-column:2;grid-row:1;align-self:start;justify-self:center;display:flex;direction:ltr;width:calc(100% + 12px);height:42px;margin-top:-42px;pointer-events:none;filter:drop-shadow(0 -3px 3px rgba(18,40,76,.10))}
.totalbar.ubar.ubar .ub-hump svg{flex:none;display:block;height:42px}
.totalbar.ubar.ubar .ub-hump .ph-m{flex:1 1 auto;width:auto}
.totalbar.ubar.ubar :is(.ub-go,.ask-row .btn-primary,.q-nav [data-next]),.tb-on .totalbar.ubar.ubar .q-nav [data-next]{position:relative;z-index:1;grid-column:2;grid-row:1;align-self:start;justify-self:center;display:grid;align-content:center;justify-content:center;justify-items:center;gap:0;box-sizing:border-box;width:calc(100% - 16px);height:52px;min-height:0;margin:-25px 0 0;padding:0 6px;border:0;border-radius:16px;background:var(--cta-bg);color:var(--cta-ink);box-shadow:none;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui);line-height:20px;text-align:center;white-space:normal}
.totalbar.ubar.ubar .ub-go .co-kd{color:inherit}
/* the end: one small secondary thing */
.totalbar.ubar.ubar :is(.ub-end,.tot-split,.est-bar-line){grid-column:3;grid-row:1;justify-self:end;display:block;min-width:0;max-width:110px;min-height:0;margin:0;font-size:var(--fs-small);line-height:17px;color:#4F5A73;text-align:end;white-space:normal}
.totalbar.ubar.ubar .tot-split>span{white-space:normal;overflow:visible}
.totalbar.ubar.ubar .ub-safe{display:inline-flex;align-items:center;gap:4px;max-width:none;font-weight:600;color:#167565;white-space:nowrap}
.totalbar.ubar.ubar .ub-safe .ico{width:14px;height:14px}
.totalbar.ubar.ubar :is(.ask-row .btn-mint,.q-nav [data-prev]),.tb-on .totalbar.ubar.ubar .q-nav [data-prev]{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;align-items:center;gap:4px;width:auto;height:36px;min-height:0;margin:0;padding:0 12px;border:0;border-radius:12px;background:rgba(255,255,255,.7);color:var(--navy);box-shadow:none;font-size:var(--fs-small);font-weight:600;white-space:nowrap}
.totalbar.ubar.ubar .q-nav [data-prev] .ico{width:14px;height:14px}
/* «تحقق من الحقول المظللة»: a notice over the bar, not inside it */
.totalbar.ubar.ubar .ub-alert{position:absolute;inset-inline:16px;bottom:calc(100% + 50px);z-index:2;margin:0;padding:10px 14px;border-radius:12px;background:#FDECEC;color:#B42318;font-size:var(--fs-small);font-weight:600;text-align:center;box-shadow:0 4px 14px rgba(14,20,40,.12)}
.totalbar.ubar.ubar:has(.q-nav) .tot-split{display:none}          /* /quote/: its end is «السابق» */
.totalbar.ubar.ubar [hidden]{display:none}
body:has(.totalbar.ubar) .fabs{display:none}
body:has(.totalbar.ubar) main{padding-bottom:calc(76px + 40px + env(safe-area-inset-bottom))}
@media (min-width:900px){
  .totalbar.ubar.ubar{height:68px;padding:0}
  .totalbar.ubar.ubar>.wrap{grid-template-columns:minmax(0,1fr) 236px minmax(0,1fr);grid-template-rows:68px;height:68px;max-width:1248px;margin:0 auto;padding:0 24px}
  .totalbar.ubar.ubar .ub-hump{width:248px}
  .totalbar.ubar.ubar :is(.ub-go,.ask-row .btn-primary,.q-nav [data-next]){width:220px}
  .totalbar.ubar.ubar :is(.ub-end,.tot-split,.est-bar-line){max-width:260px}
  .totalbar.ubar.ubar .tot-row{display:flex}
  body:has(.totalbar.ubar) .fabs{display:flex;left:24px;right:auto;bottom:84px}
  body:has(.totalbar.ubar) main{padding-bottom:112px}
}

/* ── 1.85.9, the designer's site-unify-v1 (ق1, approved by the manager): ONE bar for the whole site. The offer bar of every
   public page (templates/web/_offer_bar.html, «ohb») is now the forms' bar above («ubar»): the same grey bar, the same raised
   middle, the action always in that middle — on a phone and on a wide screen alike — the name on the start side, one small
   link on the end side, Arya in the corner above it (a wide screen) or away (a phone), as on the forms. A page with no action
   of its own («ub-free»: contact, privacy, warranty, facts…) keeps Arya in a narrow middle and one link. ── */
.totalbar.ubar.ohb .oh-bar-v{display:contents}
.totalbar.ubar.ohb .oh-bar-v[hidden]{display:none}
.totalbar.ubar.ohb .t{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;max-height:60px;overflow:hidden;font-size:var(--fs-small);line-height:18px;color:#4F5A73;text-align:start}
.totalbar.ubar.ohb .t b{display:block;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui);line-height:21px;color:#1F2A4B;white-space:normal}
.totalbar.ubar.ohb .oh-tail,.totalbar.ubar.ohb .oh-area{display:block;font-size:var(--fs-small);line-height:18px;color:#4F5A73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.totalbar.ubar.ohb .oh-tail[hidden]{display:none}
.totalbar.ubar.ohb .oh-link,.totalbar.ubar.ohb .ub-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui);line-height:21px;color:#1F2A4B;text-decoration:none;white-space:nowrap}
.totalbar.ubar.ohb :is(.oh-link,.ub-link) .ico{width:16px;height:16px;color:var(--mint-ink)}
.totalbar.ubar.ohb .ub-link{grid-column:3;justify-self:end}
.totalbar.ubar.ohb .ub-go{text-decoration:none}
.totalbar.ubar.ohb .ub-go .oh-p{display:inline-flex;align-items:baseline;gap:4px;font-size:var(--fs-small);line-height:18px;font-weight:600}
.totalbar.ubar.ohb .ub-go .amt{display:inline-flex;align-items:baseline;gap:3px}
.totalbar.ubar.ohb .ub-go .amt .num{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-num);line-height:20px;color:inherit}
.totalbar.ubar.ohb .ub-go .amt .cur{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small);color:inherit}
.totalbar.ubar.ohb .ub-go.oh-solo .oh-p{margin:0;font-size:var(--fs-ui);line-height:22px}
.totalbar.ubar.ohb [data-bar-price]{display:inline-block;min-width:3ch;text-align:center;font-variant-numeric:tabular-nums}          /* ق2: the figure keeps its room */
/* a page with no action: a narrow middle for Arya, who stands in it on a phone and a wide screen */
.totalbar.ubar.ub-free .ub-fabhump{width:116px}
body:has(.totalbar.ubar.ub-free):not(.no-fab) .fabs{display:flex;left:50%;right:auto;margin-left:-32px;bottom:calc(44px + env(safe-area-inset-bottom));--va-fab-inset:0px;--va-fab-ring:none}
body:has(.totalbar.ubar.ub-free):not(.no-fab) .fabs :is(.mic-fab,.wa-fab){box-shadow:none}
[dir=ltr] .totalbar.ubar.ohb .t{text-align:start}
@media (min-width:900px){
  .totalbar.ubar.ohb .t b{font-size:var(--fs-body)}
  .totalbar.ubar.ub-free .ub-fabhump{width:116px}
  body:has(.totalbar.ubar.ub-free):not(.no-fab) .fabs{left:50%;right:auto;margin-left:-32px;bottom:36px}
}
/* the estimate's steps in the same bar: «التالي» in the middle, «رجوع» small on the end side (templates/estimator/wizard.html) */
.totalbar.ubar.wiz-bar .wiz-prev{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.7);color:var(--navy);font-size:var(--fs-small);font-weight:600;text-decoration:none;white-space:nowrap}
.totalbar.ubar.wiz-bar .wiz-prev .ico{width:14px;height:14px}
/* 1.85.9 (site-unify-v1, ق5 and ق3): a package's card shows its line art on the white of the card — never a device on a grey tile — at a card drawing's height (88 a phone, 120 a wide screen) */
.pk-pic:has(.pk-la){background:#fff}
.pk-img.pk-la{background:#fff}
.pk-img.pk-la img{inset:auto;top:50%;left:50%;width:auto;max-width:90%;height:88px;object-fit:contain;transform:translate(-50%,-50%)}
@media (min-width:900px){.pk-img.pk-la img{height:120px}}
/* 1.85.9 (site-unify-v1, ق4 and ق3): the cards of /services/ — on a phone a row, the service's drawing at a card's height (88)
   beside its name and line and the arrow; on a wide screen four in a row, the drawing (120) above the words; radius 20 */
.svc-list .svc-card:has(.svc-card-la){grid-template-columns:96px minmax(0,1fr) auto;padding:12px 16px;border-radius:20px}
.svc-card .svc-card-la{aspect-ratio:auto;height:88px;align-items:center}
.svc-card .svc-card-la img{max-height:88px}
.svc-go{display:grid;place-items:center;color:var(--mint-ink)}
.svc-go .ico{width:18px;height:18px}
@media (min-width:900px){
  .svc-list:has(.svc-card-la){grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .svc-list .svc-card:has(.svc-card-la){grid-template-columns:minmax(0,1fr);align-content:start;gap:12px;padding:20px}
  .svc-card .svc-card-la{height:120px}
  .svc-card .svc-card-la img{max-height:120px}
  .svc-list .svc-card:has(.svc-card-la) .svc-go{display:none}
}
/* ق3 elsewhere: a summary's drawing 160 (a phone) / 200 (a wide screen) — the technician over /quote/'s price; the cards of
   «باقات الأنظمة الأخرى» and /quote/'s systems at a card's 88 / 120 */
.qp-price img{width:auto;max-width:100%;height:160px;object-fit:contain}
@media (min-width:900px){.qp-price img{height:200px}}

/* ── 1.85.11, the owner: /quote/ on a wide screen «نفس الريفرنس» (the approved D14b/c/d) — and the pages like it. The side
   column's big drawing stands in the bottom corner of the screen on the side column's side, flush with the screen's edge,
   from the edge to the side column's inner edge, over the bar, and stays there as the page scrolls; the footer passes over
   it. A phone keeps its light page (the side column is not drawn there). ── */
.fside-art{display:none}
@media (min-width:900px){
  .fside-art{position:fixed;left:0;bottom:68px;z-index:1;display:block;width:calc(var(--fside-w,440px) + 56px + max(var(--gutter),(100vw - var(--fside-max,1360px)) / 2 + var(--gutter)));max-width:46vw;height:auto;max-height:calc(100vh - var(--header-h) - 68px - var(--fside-top,380px));object-fit:contain;object-position:left bottom;pointer-events:none}
  [dir=ltr] .fside-art{left:auto;right:0;object-position:right bottom}
  body:has(.fside-art) .foot{position:relative;z-index:2}
}
/* 1.85.14, the owner: a drawing that stands (not bled from the screen's edge) stands on the navy ground line of the line-art
   heads, 3px, its own width, round ends. The side column's drawing is sized to itself (no empty box around it) so the line
   under it is the drawing's width, 16 above the bar (on its edge the two read as one); /quote/'s bled drawing (.qp-side-art) keeps none. */
@media (min-width:900px){
  .fside>.fside-art{bottom:84px;width:auto;max-width:min(calc(var(--fside-w,440px) + 56px + max(var(--gutter),(100vw - var(--fside-max,1360px)) / 2 + var(--gutter))),46vw);padding-bottom:3px;object-fit:fill;background:radial-gradient(circle,#1F2A4B 1.5px,transparent 1.6px) 0 100%/3px 3px no-repeat,radial-gradient(circle,#1F2A4B 1.5px,transparent 1.6px) 100% 100%/3px 3px no-repeat,linear-gradient(#1F2A4B,#1F2A4B) 50% 100%/calc(100% - 3px) 3px no-repeat}
}
/* the page around it: the form at the start, the side column at the end (templates/web/_fside.html) */
.fside{display:none}
@media (min-width:900px){
  .wrap.fside-page{--fside-w:clamp(380px,34vw,480px);--fside-top:470px;display:grid;grid-template-columns:minmax(0,1fr) var(--fside-w);align-items:start;column-gap:56px;max-width:1360px}
  .wrap.fside-page{min-height:calc(100vh - var(--header-h) - 68px)}          /* a short page: the footer starts under the first screen, not over the drawing */
  .fside-page>:not(.fside){grid-column:1;min-width:0}
  .fside-page>.fside{grid-column:2;grid-row:1 / span 40;position:sticky;top:calc(var(--header-h) + 24px);z-index:2;display:block;padding-top:32px}
  .fside-page .fside-hide,.fside-page .la-hero{display:none}
  .fside-h{margin:0 0 18px;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-price-hero);line-height:1.25;color:var(--navy)}
  .fside-mint{color:#32897A}
  .fside-l{margin:0;font-size:var(--fs-h3);line-height:1.75;color:#4F5A73}
}

/* ── 1.85.12, the manager on a phone (with Safari's own bar the old one took a quarter of the screen): every bar at the foot is
   compact — 64 tall, its action in the middle inside it (no rise over its edge), the name or the total on its start side in
   their own sizes (a long name takes two lines, never cut). Only the empty room goes. A page with no action keeps Arya on the
   bar's edge in the middle.
   1.85.14, the owner (the bar before was nicer): the hump and its action rising over the bar's edge are back, as before; the
   bar's body stays compact (64, without the grey room under the action). ── */
@media (max-width:899px){
  .totalbar.ubar.ubar{height:calc(64px + env(safe-area-inset-bottom))}
  .totalbar.ubar.ubar>.wrap{grid-template-rows:64px;height:64px}
  .totalbar.ubar.ubar .tot-row{gap:0;white-space:normal}
  .totalbar.ubar.ubar .tot-row>span{line-height:17px}          /* a long name takes two lines, never cut */
  .totalbar.ubar.ub-free>.wrap{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr)}
  .totalbar.ubar.ohb .oh-link{white-space:normal;line-height:19px}          /* no action: the middle only for Arya, the link its room */
  .totalbar.ubar.ohb .t{max-height:64px}
  body:has(.totalbar.ubar.ub-free):not(.no-fab) .fabs{bottom:calc(32px + env(safe-area-inset-bottom))}
  .totalbar.pg3-bar.pg3-bar{height:calc(64px + env(safe-area-inset-bottom))}
}

/* ── 1.85.14, the owner chose option (a) of brand/generated/mockups/bottom-bar-liquid-v1.html: every bar at the foot is a
   floating pane of glass — 10 from the screen's edges, 68 tall, corners of 28, white at 62% over a blur of 18 and a saturation
   of 180%, a bright white rim of 1px, a highlight inside its top edge and a soft shadow; its action raised over it (24 above
   its edge) in a ring of white glass of 4px, and Arya, on a page with no action, in the same ring. The raised action is the
   hump now (the drawn humps go). No filter on the pane: it would cancel the glass's blur. Without backdrop-filter, white at
   92%. A wide screen the same, the pane as wide as the content (1248). ── */
.totalbar.ubar.ubar,.totalbar.pg3-bar.pg3-bar{left:max(10px,(100vw - 1248px) / 2);right:max(10px,(100vw - 1248px) / 2);bottom:calc(10px + env(safe-area-inset-bottom));height:68px;min-height:0;padding-bottom:0;border:1px solid rgba(255,255,255,.75);border-radius:28px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:0 10px 28px rgba(14,20,40,.18),inset 0 1px 0 rgba(255,255,255,.9);filter:none;transform:none}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .totalbar.ubar.ubar,.totalbar.pg3-bar.pg3-bar{background:rgba(255,255,255,.92)}
}
.totalbar.ubar.ubar::before,.totalbar.pg3-bar.pg3-bar::before{content:none}
.totalbar.ubar.ubar .ub-hump,.totalbar.pg3-bar.pg3-bar .pg3-hump{display:none}
.totalbar.ubar.ubar>.wrap{grid-template-rows:66px;height:66px;max-width:none}
.totalbar.ubar.ubar :is(.ub-go,.ask-row .btn-primary,.q-nav [data-next]),.tb-on .totalbar.ubar.ubar .q-nav [data-next],.totalbar.pg3-bar.pg3-bar .btn.btn-primary{align-self:start;height:54px;margin-top:-24px;box-shadow:0 8px 18px rgba(22,117,101,.35),0 0 0 4px rgba(255,255,255,.55)}
body:has(.totalbar.ubar.ub-free):not(.no-fab) .fabs{bottom:calc(46px + env(safe-area-inset-bottom))}          /* Arya's disc on the pane's top edge, in the middle */
body:has(.totalbar.ubar.ub-free):not(.no-fab) .fabs :is(.mic-fab,.wa-fab){box-shadow:0 8px 18px rgba(14,20,40,.3),0 0 0 4px rgba(255,255,255,.55)}
@media (max-width:899px){          /* the pane is 20 narrower than the screen: the middle column is the action's own width (137 on 390), so the sides keep «السعر التقديري» on one line down to 360 */
  .totalbar.ubar.ubar>.wrap{grid-template-columns:minmax(0,1fr) calc((100vw - 116px) / 2) minmax(0,1fr);padding:0 12px}
  .totalbar.pg3-bar.pg3-bar{grid-template-columns:minmax(0,1fr) calc((100vw - 116px) / 2) minmax(0,1fr);padding:0 12px}
  .totalbar.ubar.ubar :is(.ub-go,.ask-row .btn-primary,.q-nav [data-next]),.tb-on .totalbar.ubar.ubar .q-nav [data-next],.totalbar.pg3-bar.pg3-bar .btn.btn-primary{width:100%}
  .totalbar.ubar.ub-free>.wrap{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr)}
  .totalbar.ubar.ohb .oh-link{width:auto;max-width:100%;white-space:nowrap}          /* «اطلب عرض سعر» 100 wide in a side of 130 on 390 (96 on 360): one line, its arrow beside it */
}

/* 1.85.14, the owner: Deema's instalment under a price (templates/shop/_deema4.html) — a secondary line, the small mark beside it */
.deema4{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:var(--fs-small);line-height:20px;color:#3B4660}
.deema4[hidden]{display:none}
.deema4 .pay-logo{flex:none;min-width:0}
.deema4 .pay-logo.pl-deema{width:72px;height:26px;padding:5px 8px;border:0;border-radius:8px;background:#1F2A4B}
.deema4 .pay-logo.pl-deema img{width:100%;height:100%;object-fit:contain}
.deema4 b{font-weight:700;color:var(--navy)}
.qp-price .deema4{justify-content:center}
/* the pane is 66 inside: with the yearly maintenance ticked, the package's name and «+ 39 KD في السنة لعقد الصيانة» keep a line each */
.totalbar.pg3-bar.pg3-bar .pg3-who{max-height:66px}

/* 1.85.16, the manager: no word in a bar is cut short with dots — what does not fit takes another line, whole */
.totalbar.ubar.ubar .tot-split>span,.totalbar.ubar.ohb .oh-tail,.totalbar.ubar.ohb .oh-area,.totalbar.pg3-bar.pg3-bar .pg3-spec small,.totalbar.pg3-bar.pg3-bar .pg3-who>:is(b,.pg3-plus){white-space:normal;overflow:visible;text-overflow:clip}
/* … and when the whole words need more than the pane's 68 (a long name over its «شامل التركيب والتمديد والبرمجة» on 360), the
   pane grows to hold them: 68 at least, its action still raised over its top edge */
.totalbar.ubar.ubar,.totalbar.pg3-bar.pg3-bar{height:auto;min-height:68px}
.totalbar.ubar.ubar>.wrap{grid-template-rows:minmax(66px,auto);height:auto;min-height:66px}
.totalbar.ubar.ubar>.wrap>:not(.ub-hump):not(.ub-go):not(.ask-row):not(.q-nav),.totalbar.pg3-bar.pg3-bar>:not(.pg3-hump):not(.ask-row):not(.btn){max-height:none;padding-block:4px}
.totalbar.ubar.ubar .t,.totalbar.pg3-bar.pg3-bar .pg3-who{max-height:none}
@media (max-width:899px){          /* the bar's line after the name («شامل التركيب والتمديد والبرمجة») takes the empty side across the action, whole, rather than a third and fourth line under the name */
  .totalbar.ubar.ohb>.wrap:not(:has(.oh-link)) .oh-bar-v>.t:has(>.oh-tail){display:contents}
  .totalbar.ubar.ohb>.wrap:not(:has(.oh-link)) .oh-bar-v>.t>b{grid-column:1;grid-row:1;align-self:center;min-width:0}
  .totalbar.ubar.ohb>.wrap:not(:has(.oh-link)) .oh-bar-v>.t>.oh-tail{grid-column:3;grid-row:1;align-self:center;min-width:0;text-align:start}
}

/* 1.85.16, /manage/lab/: the owner's «مختبر الإطلاق» the whole width and the screen's height under its head (web/lab.py) */
.lab-frame{display:block;width:100%;height:calc(100dvh - 200px);min-height:560px;border:0;border-radius:16px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
/* 1.85.18, «اختبر الاتصال» of the Meta Pixel in /manage/ (templates/manage/_pixel_test.html) */
.pixel-test{display:grid;gap:10px;justify-items:start}
.pixel-test code{font-size:var(--fs-small);user-select:all;overflow-wrap:anywhere}

/* ── 1.85.20, «جرّب بنفسك» (brand/generated/mockups/interactive-banners-v1, approved; templates/web/_try.html, static/try.js):
   cards that open a sheet from the bottom. Every box has a fixed size, so nothing jumps as it is used; the sheet's bar is the
   page's liquid glass in the same spot, the two changing over with a fade. ── */
.tr-cards{display:grid;grid-template-columns:1fr;gap:12px}
.tr-card{display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:12px;width:100%;min-height:132px;padding:14px 16px;border:0;border-radius:22px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.06);color:var(--navy);text-align:start;font:inherit;cursor:pointer}
.tr-card img{width:112px;height:104px;object-fit:contain}
.tr-ey{display:block;font-size:var(--fs-small);font-weight:700;color:#167565}.tr-ey bdi{white-space:nowrap}
.tr-card b{display:block;margin-top:2px;font-family:var(--font-heading);font-size:var(--fs-h3);line-height:25px}
.tr-go{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:var(--fs-small);font-weight:600;color:#167565}
.tr-card:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (min-width:900px){
  .tr-cards{grid-template-columns:1fr 1fr;gap:18px}
  .tr-card{min-height:168px;grid-template-columns:minmax(0,1fr) 170px;padding:20px 24px}
  .tr-card img{width:170px;height:136px}
  .tr-card b{font-size:var(--fs-h2);line-height:30px}
}
.tr-dim{position:fixed;inset:0;z-index:60;background:rgba(14,20,40,.38);opacity:0;transition:opacity .25s}
.tr-dim.on{opacity:1}
.tr-sheet{position:fixed;z-index:61;left:0;right:0;bottom:0;display:flex;flex-direction:column;height:86vh;max-height:760px;overflow:hidden;border-radius:26px 26px 0 0;background:var(--bg,#F1F2F2);color:var(--navy);transform:translateY(102%);transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.tr-sheet.on{transform:none}
.tr-shd{flex:none;padding:10px 18px 8px}
.tr-grab{width:44px;height:5px;margin:0 auto 10px;border-radius:3px;background:#C9CED6}
.tr-shr{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tr-shr h2{margin:2px 0 0;font-size:var(--fs-h2);line-height:30px}
.tr-x{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:#fff;color:var(--navy);cursor:pointer}
.tr-x .ico{width:18px;height:18px}
.tr-body{flex:1;overflow:auto;padding:4px 18px 130px;overscroll-behavior:contain}
@media (min-width:900px){
  .tr-sheet{left:50%;right:auto;width:760px;margin-left:-380px;height:82vh;max-height:820px}
  .tr-body{padding:4px 28px 140px}.tr-shd{padding:12px 28px 8px}
  .tr-shr h2{line-height:36px}
}
.tr-open,.tr-open body{overflow:hidden}
.tr-box{padding:14px;border-radius:20px;background:#fff;box-shadow:0 2px 10px rgba(18,40,76,.05)}
.tr-mt{margin-top:12px}
.tr-seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:#E6E9EE}
.tr-seg button{flex:1;height:40px;border:0;border-radius:11px;background:none;color:#4F5A73;font:inherit;font-weight:700;font-size:var(--fs-ui);cursor:pointer}
.tr-seg button.on{background:#fff;color:#167565;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.tr-chips{display:flex;flex-wrap:wrap;gap:8px}
.tr-chips button{height:40px;min-width:56px;padding:0 14px;border:1.5px solid #E6E9EE;border-radius:12px;background:#fff;color:var(--navy);font:inherit;font-weight:700;font-size:var(--fs-ui);cursor:pointer}
.tr-chips button.on{border-color:#167565;color:#167565;background:#F2FAF7}
.tr-lbl{margin:14px 0 6px;font-size:var(--fs-small);font-weight:700;color:#4F5A73}
.tr-fine{margin:10px 2px 0;font-size:var(--fs-small);line-height:19px;color:#7A8499}
.tr-plan{display:block;width:100%;height:auto}
.tr-room rect.r{fill:#fff;stroke:#1F2A4B;stroke-width:2.5}
.tr-room.g rect.r{fill:#E9F6F2}.tr-room.w rect.r{fill:#FBF1F1}
.tr-room text.n{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-small);fill:#1F2A4B}
.tr-room.g rect.c{fill:#167565}.tr-room.w rect.c{fill:#CF5555}
.tr-room text.t{font-weight:700;font-size:var(--fs-small);fill:#fff}
.tr-ap circle.w1{fill:none;stroke:#54BAA7;stroke-width:2;opacity:.55}.tr-ap circle.d{fill:#fff;stroke:#167565;stroke-width:3}
.tr-leg{display:flex;justify-content:center;gap:14px;font-size:var(--fs-small);color:#4F5A73}
.tr-leg i{display:inline-block;width:10px;height:10px;margin-inline-end:5px;border-radius:3px;vertical-align:-1px}
.tr-leg i.g{background:#E9F6F2;border:1.5px solid #167565}.tr-leg i.w{background:#FBF1F1;border:1.5px solid #CF5555}
.tr-step{display:flex;align-items:center;justify-content:center;gap:16px;margin:14px 0 4px}
.tr-step button{width:56px;height:56px;border:1.5px solid #E6E9EE;border-radius:18px;background:#fff;color:#167565;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-price-card);line-height:1;cursor:pointer}
.tr-step button:disabled{color:#C9CED6;cursor:default}
.tr-v{width:150px;text-align:center}.tr-v b{display:block;font-family:var(--font-latin);font-size:var(--fs-price-card);line-height:38px}.tr-v small{font-size:var(--fs-small);font-weight:600;color:#4F5A73}
.tr-res{display:flex;flex-direction:column;justify-content:center;align-items:center;height:150px;margin-top:14px;border-radius:20px;background:#fff;text-align:center}
.tr-res b{font-size:var(--fs-h1);line-height:40px}.tr-res bdi{font-family:var(--font-latin)}.tr-res>span{font-size:var(--fs-ui);font-weight:600;color:#4F5A73}.tr-res small{margin-top:6px;color:#7A8499}
.tr-zoom{display:flex;align-items:center;gap:12px;margin-top:14px}.tr-zoom input{flex:1;accent-color:#167565}.tr-zoom span{width:36px;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-ui)}.tr-zoom .ico{width:22px;height:22px;color:#167565}
.tr-bell{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.tr-ring{width:100%;height:48px;border:0;border-radius:14px;background:#167565;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.tr-phone{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:300px;padding:12px 10px;border:3px solid #1F2A4B;border-radius:28px;background:#fff;text-align:center}
.tr-scr{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;margin-bottom:10px;border-radius:16px;background:#F4F6F8;color:#4F5A73;font-size:var(--fs-small);font-weight:600}
.tr-scr .ico{width:72px;height:72px;color:#C9CED6}.tr-scr.on .ico{color:#1F2A4B}.tr-scr.on span{color:#1F2A4B}.tr-scr.done span{color:#167565}
.tr-unlock{width:100%;height:44px;border:0;border-radius:14px;background:#E6E9EE;color:#9AA3B5;font:inherit;font-weight:700}.tr-unlock.on{background:#167565;color:#fff;cursor:pointer}
.tr-feat{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.tr-feat li{display:flex;align-items:center;gap:8px;font-size:var(--fs-ui);font-weight:600}
.tr-site{position:relative}.tr-site img{display:block;width:100%;height:220px;object-fit:contain}
.tr-pt{position:absolute;width:22px;height:22px;border:3px solid #fff;border-radius:50%;background:currentColor;box-shadow:0 0 0 2px currentColor;transform:translate(50%,-50%) scale(0);transition:transform .2s}.tr-pt.on{transform:translate(50%,-50%) scale(1)}
.tr-pt.p1{right:30%;top:22%}.tr-pt.p2{right:78%;top:30%}.tr-pt.p3{right:48%;top:40%}.tr-pt.p4{right:62%;top:58%}.tr-pt.p5{right:22%;top:66%}.tr-pt.p6{right:70%;top:72%}
.tr-pt.c1{color:#167565}.tr-pt.c2{color:#2E7DD7}.tr-pt.c3{color:#E0A43A}.tr-pt.c4{color:#8A5CC2}
.tr-chips .k2.on{border-color:#2E7DD7;color:#2E7DD7;background:#EEF4FC}.tr-chips .k3.on{border-color:#E0A43A;color:#A15C07;background:#FFF6E6}.tr-chips .k4.on{border-color:#8A5CC2;color:#6B3FA6;background:#F4EEFB}
.tr-deal{margin-top:12px;padding:12px 14px;border-radius:16px;background:#E0F2EE;color:#167565;font-size:var(--fs-ui);font-weight:600;line-height:22px}
.tr-bz img{display:block;width:100%;height:160px;object-fit:contain}
/* 1.85.20.1 (the manager's hotfix): a drawing in the sheet never grows past 440px, centred, at any width — on a tablet (600–1000)
   the Wi-Fi plan grew to the sheet's width, its room names to 40px, and «عدد الموزعات» fell below the fold */
.tr-plan,.tr-cmp,.tr-site{max-width:440px;margin-inline:auto}
/* 1.85.24 (interactive-banners-v2, final; the owner's design system): the sheet is as tall as its content and every area
   that changes has a fixed height, so nothing moves while you play; buttons and chips 44 high; radii 16 and 24; one shadow;
   each sheet: the title, the one thing to try, one line, and the price in the bar. The drawings sit on the sheet itself. */
.tr-sheet{height:auto;max-height:calc(100vh - 24px);border-radius:24px 24px 0 0}
.tr-body{flex:0 1 auto;display:flex;flex-direction:column;gap:16px;padding:0 16px 118px}
.tr-shd{padding:10px 16px 16px}
.tr-shr h2{font-family:var(--font-heading);font-size:var(--fs-h2);line-height:30px}
.tr-x{width:44px;height:44px;border-radius:16px;box-shadow:0 2px 12px rgba(18,40,76,.08)}
@media (min-width:900px){.tr-sheet{width:720px;margin-left:-360px;height:auto;max-height:calc(100vh - 40px)}.tr-body{padding:0 32px 126px}.tr-shd{padding:14px 32px 20px}.tr-shr h2{line-height:38px}}
.tr-pane{display:flex;flex-direction:column;gap:16px}.tr-pane[hidden]{display:none}
.tr-box{padding:16px;border-radius:24px;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.tr-mt{margin-top:0}
.tr-grp{display:flex;flex-direction:column;gap:8px}
.tr-lbl{margin:0;font-family:var(--font-heading);font-weight:500;font-size:var(--fs-item);color:#4F5A73}
.tr-line{margin:0;font-size:var(--fs-small);line-height:20px;color:#4F5A73;text-align:center}
.tr-seg{border-radius:16px;background:#E3E6EA}.tr-seg button{height:44px;border-radius:12px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-item)}
.tr-seg button.on{color:#167565;box-shadow:0 1px 4px rgba(18,40,76,.1)}
.tr-chips button{height:44px;min-width:60px;padding:0 16px;border:0;border-radius:16px;box-shadow:inset 0 0 0 1.5px #DDE1E6;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-item)}
.tr-chips button.on{border:0;box-shadow:inset 0 0 0 2px #167565;color:#167565;background:#F3FAF8}
.tr-chips .k2.on{box-shadow:inset 0 0 0 2px #2E6FBF;color:#2E6FBF}.tr-chips .k3.on{box-shadow:inset 0 0 0 2px #A15C07;color:#A15C07}.tr-chips .k4.on{box-shadow:inset 0 0 0 2px #6B3FA6;color:#6B3FA6}
.tr-leg{margin-top:12px}
.tr-step{gap:24px;margin:0}
.tr-step button{border:0;border-radius:16px;box-shadow:0 2px 12px rgba(18,40,76,.08)}.tr-step button:disabled{box-shadow:inset 0 0 0 1.5px #DDE1E6}
.tr-v{width:120px}
.tr-note{height:20px}
.tr-res{height:120px;margin-top:0;gap:4px;border-radius:24px}
.tr-res b{font-family:var(--font-heading);font-size:var(--fs-h1);line-height:40px}.tr-res bdi{font-size:var(--fs-price-card);margin:0 4px}.tr-res>span{font-size:var(--fs-item);font-weight:500}
.tr-cmp{position:relative;width:100%;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:#0E1428;touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.tr-ly{position:absolute;inset:0;background-repeat:no-repeat}.tr-l4{clip-path:inset(0 0 0 var(--x,50%))}
.tr-cmp em{position:absolute;top:12px;height:28px;padding:0 12px;border-radius:999px;background:rgba(14,20,40,.72);color:#fff;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small);line-height:28px;font-style:normal}
.tr-cmp .e4{right:12px}.tr-cmp .e8{left:12px}
.tr-dv{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.4);pointer-events:none}
.tr-dv b{position:absolute;top:86%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:#1F2A4B;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.tr-dv svg{width:20px;height:20px}
.tr-zoom{height:44px;margin-top:0}.tr-zoom input{height:28px}
.tr-pc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tr-pc button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:72px;border:0;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px #DDE1E6;color:var(--navy);font:inherit;cursor:pointer}
.tr-pc button small{font-size:var(--fs-small);color:#4F5A73}.tr-pc bdi{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small)}.tr-pc bdi b{font-size:var(--fs-h2)}
.tr-pc button.on{box-shadow:inset 0 0 0 2px #167565;background:#F3FAF8}.tr-pc button.on small{color:#167565}
.tr-door{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:300px;padding:0}.tr-door img{width:100%;height:196px;object-fit:contain}
.tr-ring{border-radius:16px;font-family:var(--font-heading)}
.tr-phone{gap:10px}.tr-unlock{height:48px;border-radius:16px;font-family:var(--font-heading)}
.tr-mart{display:block;width:100%;height:104px;object-fit:contain}
.tr-mlist{height:312px;padding:8px 16px}
.tr-mh{display:flex;align-items:center;height:36px;font-size:var(--fs-small);color:#4F5A73}
.tr-mr{display:flex;align-items:center;gap:12px;height:52px;border-top:1px solid #EEF0F3;font-size:var(--fs-item);line-height:22px}
.tr-mr i,.tr-sys i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#E0F2EE;color:#167565}
.tr-mr i .ico,.tr-sys i .ico{width:13px;height:13px}
.tr-mrow{display:grid;grid-template-columns:84px 1fr 1fr;align-items:center;gap:8px;height:52px;border-top:1px solid #EEF0F3}
.tr-mrow.h{height:36px;border-top:0;font-size:var(--fs-small);color:#4F5A73}.tr-mrow.h span{padding:0 8px}
.tr-mrow>b{font-family:var(--font-heading);font-weight:600;font-size:var(--fs-small)}
.tr-mrow .w,.tr-mrow .o{display:flex;align-items:center;height:40px;padding:0 8px;border-radius:10px;font-size:var(--fs-small);line-height:18px}.tr-mrow .w{background:#F3FAF8;color:#167565}.tr-mrow .o{background:#FBEDED;color:#B23F3F}
.tr-site img{height:208px}
.tr-deal{margin-top:0;padding:12px 16px;border-radius:16px;color:var(--navy);font-weight:500;line-height:24px;text-align:center}
.tr-bz img{display:block;width:100%;height:132px;object-fit:contain}
.tr-sys{display:flex;flex-direction:column;justify-content:center;gap:12px;height:156px;padding:12px 16px}
.tr-sys div{display:flex;align-items:center;gap:12px;font-size:var(--fs-item);line-height:22px}
@media (min-width:900px){.tr-door,.tr-phone{height:320px}.tr-mart{height:150px}}
/* the sheet's bar: the page's liquid glass (1.85.14), the same shape in the same spot over it; the two change over with a fade */
.tr-bar{position:fixed;z-index:62;left:max(10px,(100vw - 1248px) / 2);right:max(10px,(100vw - 1248px) / 2);bottom:calc(10px + env(safe-area-inset-bottom));height:68px;border:1px solid rgba(255,255,255,.75);border-radius:28px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:0 10px 28px rgba(14,20,40,.18),inset 0 1px 0 rgba(255,255,255,.9);opacity:0;transition:opacity .22s ease}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.tr-bar{background:rgba(255,255,255,.92)}}
.tr-bar.on{opacity:1}
.tr-bar-in{display:grid;grid-template-columns:minmax(0,1fr) calc((100vw - 116px) / 2) minmax(0,1fr);align-items:center;height:66px;padding:0 12px}
.tr-bs{display:flex;flex-direction:column;justify-content:center;min-width:0}.tr-bs b{font-family:var(--font-heading);font-size:var(--fs-ui);line-height:18px}.tr-bs small{color:#4F5A73;line-height:16px}
.tr-be{justify-self:end;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small);color:var(--navy)}.tr-be b{font-size:var(--fs-num-lg)}
.tr-go-btn{align-self:start;display:grid;place-items:center;width:100%;height:54px;margin-top:-24px;padding:0 6px;border-radius:16px;white-space:nowrap;box-shadow:0 8px 18px rgba(22,117,101,.35),0 0 0 4px rgba(255,255,255,.55)}
@media (min-width:900px){.tr-bar-in{grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);max-width:1248px;margin:0 auto;padding:0 24px}}
.totalbar.tr-under{opacity:0;pointer-events:none;transition:opacity .22s ease}
body:has(.totalbar.tr-under) .fabs{visibility:hidden}
/* 1.85.27 (the audit's P1-8, the manager): the services' cards on a phone show their whole name and line, wrapped, never «…» */
@media (max-width:600px){
  #services .lcard .lrow{height:auto;min-height:104px}
  #services .lcard .lrow-cloud{height:auto;min-height:64px}
  #services .lrow b{white-space:normal;overflow:visible;text-overflow:clip;line-height:20px}
  #services .lrow small,#services .lrow-cloud small{display:block;-webkit-line-clamp:none;overflow:visible}
}
/* 1.85.27 (the audit's P1-10, the manager): the bar of the public pages on a phone — 64 high whatever the page, the package's
   short name (Offer.bar_name) on one line, two at most, and the action beside it, never over the bar's own words; the line
   after the name is the offer page's, not the bar's here. A bar with no action (ub-free) keeps Arya in its middle. */
@media (max-width:899px){
  .totalbar.ubar.ohb:not(.ub-free){height:calc(64px + env(safe-area-inset-bottom));min-height:0}
  .totalbar.ubar.ohb:not(.ub-free)>.wrap{grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:64px;column-gap:10px;height:64px;min-height:0}
  .totalbar.ubar.ohb:not(.ub-free) .ub-hump{display:none}
  .totalbar.ubar.ohb:not(.ub-free) .oh-tail,.totalbar.ubar.ohb:not(.ub-free) .oh-area{display:none}
  .totalbar.ubar.ohb:not(.ub-free) .t{grid-column:1;grid-row:1;align-self:center;max-height:none;padding-block:0}
  .totalbar.ubar.ohb:not(.ub-free) .t b,.totalbar.ubar.ohb:not(.ub-free) .t>b{font-size:var(--fs-ui);line-height:20px;white-space:normal;overflow:visible;text-overflow:clip}
  .totalbar.ubar.ohb.ohb:not(.ub-free) .ub-go{grid-column:2;grid-row:1;align-self:center;justify-self:end;display:inline-flex;align-items:center;gap:6px;width:auto;height:44px;margin:0;padding:0 14px;border-radius:14px;white-space:nowrap}
  .totalbar.ubar.ohb.ohb:not(.ub-free) .ub-go .oh-p{display:inline-flex}
  .totalbar.ubar.ohb:not(.ub-free) .ub-link{grid-column:3;grid-row:1;align-self:center}
}
/* 1.85.27 (the audit's P3-28): «اختر رقمك واطلب عرض سعر مخصص» was 364 wide on one line in a column of 343, and /services/cloud/ moved 5 sideways */
.svc-order .btn{max-width:100%;white-space:normal;text-align:center}
/* 1.85.27 (the audit's P2-17): every control a hit area of 44×44 at least. Where a bigger box would move the page (the
   banner's chips, the header's buttons, the links beside a heading) the area grows round it, invisible; a row that scrolls
   sideways cannot show what overflows it, so its tabs grow instead. */
:is(.all-go,.rdp-all,.lang-switch,.topbar .pill,.icon-btn,.ask-ai,.w2-help-cta .btn,.pg3-seg a,.pg3-step button,.stepper button,.la-up,.pk-seg label,.pg3-cap a){position:relative}
:is(.bn-seg label,.rdp-btn,.bn-x,.all-go,.rdp-all,.lang-switch,.topbar .pill,.icon-btn,.ask-ai,.w2-help-cta .btn,.pg3-seg a,.pg3-step button,.stepper button,.la-up,.pq-seg label,.pk-seg label,.pg3-cap a)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.pq-tabs a{min-height:44px}
details.card summary,.terms summary{min-height:44px}
.tr-zoom input[type=range]{height:44px}
.kd{white-space:nowrap}          /* the audit's P2-23: an amount and its «KD» never part on two lines */
/* 1.85.28.1, the owner: «للشركات» is an item of its own in the bar, with the arrow every link to another page carries */
.desk-nav a.desk-aud{display:inline-flex;align-items:center;gap:4px}
.desk-nav a.desk-aud .ico{width:14px;height:14px;flex:none}
/* 1.85.28.2, the owner: no symbol set in type — a rating says its number with the identity's star */
.rate-n{display:inline-flex;align-items:center;gap:3px}.rate-n .ico{width:15px;height:15px;fill:currentColor}
/* 1.85.29 (the audit A4): the section a business request left out, outlined in the error's colour (static/app.js «missing») */
.fs.fs-miss{outline:2px solid #B23F3F;outline-offset:6px;border-radius:12px}
/* 1.85.30, phase C (minimal-v4.4 menu-mobile, home-desktop; behind «home_v3»): the menu's end — «اشترِ مع آريا» and English — and
   on a wide screen «للشركات» as a pill of its own */
.drawer .dr3-end{margin-top:auto;display:grid;gap:10px;padding-top:12px}
.drawer a.dr3-arya{justify-content:center;min-height:52px;padding:0 16px;border-radius:var(--radius-md);color:var(--cta-ink);background:var(--cta-bg)}
.drawer a.dr3-arya:hover{background:var(--cta-hover);color:var(--cta-ink)}
.dr3-face{display:inline-flex;width:28px;height:28px;flex:none}.dr3-face svg{display:block;width:100%;height:100%;overflow:visible}
.dr3-face .va-f-b{fill:#fff}.dr3-face .va-f-g circle{fill:#D5D9E3}.dr3-face .va-f-s{display:none}.dr3-face .va-f-calm{display:block;fill:var(--navy)}.dr3-face .va-ec{display:none}
.drawer a.dr3-lang{justify-content:center;min-height:44px;color:var(--mint-ink)}
.desk-nav.desk-v3 a.desk-pill{margin-inline-start:6px;padding:6px 12px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}

/* brand-v2.css */
/* آريا تيك — الهوية v2: the skin (1.41.0). Loaded last, over every page's own stylesheet: the layouts stay as they were,
   and what the identity fixes is said once here — the page's ground, the type, the buttons, the fields, the cards, the
   navy sections, and the identity's own marks (the line that ends in a dot, the LED dot grid, the icon in a mint circle,
   the dotted hero price). The tokens are static/app.css's :root, named as brand/BRAND_V2/tokens.json names them. */

/* ── ground and type ── */
body{background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body)}
h1,h2,h3,h4,legend,summary,label,th,button,.btn,.pill,.chip,.chipbtn,.lang-switch,.aud-go b,.desk-nav a,.drawer a,.drawer .group,.soon,.tab,.sec-head a,.w2-need b,.tile9 b,.kind b,.offer-card b,.ol b,.vp-tabs label,.vh-n{font-family:var(--font-heading)}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;color:var(--ink)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;color:var(--ink)}
h3{font-weight:500;color:var(--ink)}
.num,bdi.num,output,.cur,[data-price],[data-bar-price],.offer-price,.tot-row b,time,.vh-tag b{font-family:var(--font-latin);font-variant-numeric:tabular-nums}
.cur{font-family:var(--font-latin);font-weight:600;font-style:normal;letter-spacing:.02em}
a[href^="tel:"] .num,a[href^="tel:"] bdi{font-family:var(--font-latin);font-weight:700;letter-spacing:.12em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (min-width:900px){.w2-head h1,.page-head h1{font-size:var(--fs-h1);line-height:52px}}

/* ── buttons: the main one is mint with navy words, never white on mint ── */
.btn{min-height:52px;padding:0 22px;border-radius:var(--radius-md);font:500 var(--fs-btn)/22px var(--font-heading);box-shadow:none}
.btn-primary{background:var(--cta-bg);color:var(--cta-ink);box-shadow:none}
.btn-mint{background:var(--mint);color:var(--on-mint);box-shadow:none}
.btn-primary:hover{background:var(--cta-hover);color:var(--cta-ink)}
.btn-primary:focus-visible{outline:3px solid var(--cta-bg);outline-offset:3px}
.btn-mint:hover{background:#49A998;color:var(--on-mint)}
.btn-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn-ghost:hover{background:var(--surface-raised);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn-light{background:var(--surface-raised);color:var(--navy)}
.btn-sm{min-height:44px;padding:0 16px;border-radius:var(--radius-md);font-size:var(--fs-btn-sm)}
.theme-navy .btn-ghost,.foot .btn-ghost,.w2-help .btn:not(.w2-help-btn){background:transparent;color:var(--on-navy);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}

/* ── fields ── */
.field,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{border-radius:var(--radius-md);border:1.5px solid var(--border-strong);background:var(--surface-raised);color:var(--ink);font-family:var(--font-body)}
.field:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(22,117,101,.28)}

/* ── cards, tiles, panels: one radius, one soft shadow ── */
.card,.offer-card,.ol,.tile9,.kind,.w2-need,.w2-mini,.w2-sol,.w2-calc,.plan-card,.role-card,.faq details,.w2-shot,.part{border-radius:var(--radius-lg);border-color:var(--line);background-color:var(--surface-raised);box-shadow:var(--shadow-card)}
.card{padding:var(--space-4)}
@media (min-width:900px){.card{padding:var(--space-6)}}
.chip,.soon,.badge{border-radius:var(--radius-sm)}
.chip.ok,.soon{background:var(--mint-soft);color:var(--mint-ink);border-color:transparent}
.soon.pop{background:var(--navy);color:var(--on-navy)}
.pill{border-radius:var(--radius-md);background:var(--mint-soft);color:var(--mint-ink)}
.chips button,.chipbtn{border-radius:var(--radius-pill);border-color:var(--line);font-size:var(--fs-btn);min-height:40px}
.chips button[aria-pressed="true"],.chipbtn.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.w2-need{border-width:1.5px}
#need-cctv:checked~.w2-needs [for=need-cctv],#need-wifi:checked~.w2-needs [for=need-wifi],#need-build:checked~.w2-needs [for=need-build]{background:var(--navy);border-color:var(--navy);color:var(--on-navy);box-shadow:none}
#need-cctv:checked~.w2-needs [for=need-cctv] b,#need-wifi:checked~.w2-needs [for=need-wifi] b,#need-build:checked~.w2-needs [for=need-build] b,#need-cctv:checked~.w2-needs [for=need-cctv] small,#need-wifi:checked~.w2-needs [for=need-wifi] small,#need-build:checked~.w2-needs [for=need-build] small{color:var(--on-navy)}

/* ── sections: 32 between them on a phone, 48 on a wide screen; the title's line that ends in a mint dot (LineDot) ── */
.sec{padding-block:var(--space-8)}
@media (min-width:900px){.sec{padding-block:var(--space-12)}}
/* 1.51.0, the owner: «سوّهم سطر واحد: الخط بعدين كلمة العروض، وكل العروض هم تكون بنفس السطر» — the head of every section is one row:
   the line and its dot, then the title, at the start; the pill of «see all» at the end, on the middle line of the title's first line.
   A title too long for a phone wraps by itself; the pill stays beside its first line. */
.sec-head{align-items:flex-start}
.sec-head h2{position:relative;min-width:0;padding:4px 0;padding-inline-start:46px;font-size:var(--fs-h2);line-height:32px}
.sec-head h2::before{content:"";position:absolute;top:19px;inset-inline-start:0;display:block;width:26px;height:2px;margin:0;background:var(--navy)}
.sec-head h2::after{content:"";position:absolute;top:15px;inset-inline-start:26px;width:10px;height:10px;border-radius:50%;background:var(--mint)}
.sec-head>a{flex:none}
.sec-head a,.w2-all,a.more{color:var(--mint-ink)}

/* ── the bar at the top and the one at the bottom ── */
.topbar{background:var(--navy);backdrop-filter:none;border-bottom:1px solid var(--navy)}       /* 1.53.0, the owner: «البار فوق خلّه كحلي» */
.topbar .icon-btn,.topbar .lang-switch,.topbar .desk-nav,.topbar .desk-nav a{color:#fff}
.topbar .icon-btn:hover,.topbar .lang-switch:hover,.topbar .desk-nav a:hover{background:rgba(255,255,255,.12)}
.topbar .pill{background:rgba(255,255,255,.12);color:#fff;white-space:nowrap}          /* 1.58.0: a quiet button on the navy bar — a mint icon, white words, one line */
.topbar .pill .ico{color:var(--mint)}
.topbar .pill:hover{background:rgba(255,255,255,.2)}
@media (min-width:980px){.topbar [data-menu-open]{display:none}}          /* the links stand in the bar itself on a wide screen: no menu button beside them. 1.85.30: from 980, where the links show (static/app.css) — between 900 and 979 there was neither */
.topbar :focus-visible{outline-color:#fff}
.topbar .brand img,.drawer .brand img{display:block;width:auto;height:42px}
.oh-bar{background:var(--surface-raised);backdrop-filter:none;box-shadow:var(--shadow-up)}
.oh-bar .t{font-size:var(--fs-ui);line-height:20px;color:var(--ink-muted)}
.oh-bar .t b{font-family:var(--font-heading);font-size:var(--fs-body);line-height:22px;color:var(--ink)}
.amt{display:inline-block;white-space:nowrap}

/* ── the hero and the banners stand on the post grey, flat, with the LED dots fading in from one edge (DotGrid) ── */
.w2-hero,.hero,.page-hero{position:relative;isolation:isolate;background:var(--surface-post)}
.w2-hero::before,.hero::after{content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:min(46%,420px);background:url("/static/brand/dots-grey.ef8e5c497ec6.svg") 0 0/240px 240px;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent);opacity:1;pointer-events:none}
.hs-light,.oh-slide.v4{background:var(--surface-post)}
.hs-navy,.hs-green,.hs-media,.oa,.offer-card.follow .oa,.oh-slide.v2,.oh-hero,.oh-dark,.teaser,.ph{background:var(--navy)}
.oh-hero::before,.oh-slide::before,.oh-dark::before,.teaser::before{background:url("/static/brand/dots-navy.32e892df6af0.svg") 0 0/240px 240px}
.oh-hero::after,.hx .oh-hero::after{background:none}
.guide-art,.work.alt{background:var(--mint-soft)}

/* ── the navy sections: the house's panel, the footer, «دعنا نساعدك», the total bars ── */
.vh,.foot,.w2-help,.totalbar.navy{--surface:#151D35;--surface-raised:#1F2A4B;--ink:#FFFFFF;--ink-muted:#AEB6C8;--mint-ink:#54BAA7;--line:#2E3A5E;--border-strong:#6E7A96;--focus:#54BAA7}
.vh{background:var(--navy);border-radius:var(--radius-lg);box-shadow:none}
.vh::before{background:url("/static/brand/dots-navy.32e892df6af0.svg") 0 0/240px 240px}
.vh-line{border-color:var(--line);border-radius:var(--radius-md);background:rgba(21,29,53,.86)}
.vh-line b,.vh-line.h3-count{color:var(--mint)}
.vh-n,.vh-side button{border-radius:var(--radius-md);border-color:#6E7A96;background:rgba(21,29,53,.8);color:var(--on-navy)}
.vh-n.on{background:var(--mint);border-color:var(--mint);color:#151D35;box-shadow:none}
.vp-tabs{border-radius:var(--radius-pill);border-color:#6E7A96}
#vp-f0:checked~.vp-tabs [for=vp-f0],#vp-f1:checked~.vp-tabs [for=vp-f1]{background:var(--mint);color:#151D35}
.w2-help{background:var(--navy);border-radius:var(--radius-lg)}
.w2-help h2,.w2-help p{color:var(--on-navy)}
.w2-help .w2-help-btn{background:var(--mint);color:#151D35}
.foot{background:var(--navy);color:#AEB6C8}
.foot a{color:var(--on-navy)}

/* ── the services: a white line icon in a mint circle (IconCircle) ── */
.tile9-ico,.w2-need-ico,.badge-ico{width:52px;height:52px;border-radius:50%;background:var(--mint);display:grid;place-items:center;color:#fff}
.tile9-ico img,.w2-need-ico img{width:30px;height:30px;filter:brightness(0) invert(1)}
.w2-need-ico{width:36px;height:36px}.w2-need-ico img{width:22px;height:22px}
.w2-need b{font-size:var(--fs-ui);line-height:19px}
.badge-ico .ico{stroke:#fff}
.ico{stroke-width:2}

/* ── prices: the hero price of a screen in the brand's dotted type, once; an offer's red only where a price is struck ── */
.w2-mini-price .w2-price b,.price-hero b .num{font-family:var(--font-accent);font-weight:700;font-size:var(--fs-price-hero);line-height:1;letter-spacing:.02em;color:var(--ink)}
.price-hero b .num{font-size:var(--fs-price-xl);font-weight:700}
@media print{.price-hero b .num{font-size:30pt}}
@media (min-width:900px){.w2-mini-price .w2-price b{font-size:var(--fs-price-hero)}}
.w2-mini-price .w2-price .cur{font-size:var(--fs-body);color:var(--ink-muted)}
.offer-price s,.tot-row s,.big-price s,s.was{color:var(--offer-ink);text-decoration-color:var(--offer)}
.offer-price bdi,.tot-row b{color:var(--ink)}
.field-err{color:var(--danger)}

/* ── movement: once, between 0.3 and 1.5 seconds ── */
.vh.scan .vh-scan,.vh-plan.scan .vp-scan{animation-duration:.9s;animation-iteration-count:1}
/* what waits below the screen comes in once, from the side the language starts on: the right for Arabic, the left for English */
/* 1.67.0, the owner's approved motion (brand/generated/mockups/MOTION_SPEC.md): once, as a part comes into sight; transform and
   opacity only, so nothing changes its height or pushes what is under it; and none of it with «reduce motion» or on the first
   screen (static/motion.js adds the waiting state after load, only to what is below the screen). */
:root{--ease-in:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.4,0,1,1);--t-fast:180ms;--t-base:320ms;--t-slow:450ms}
/* rise: a part comes up 12px as it appears */
.mo .mo-wait:not(.sec-head){opacity:0;transform:translateY(12px)}
.mo .mo-in:not(.sec-head){transition:opacity .4s var(--ease-in),transform .4s var(--ease-in);transition-delay:.12s}
/* …and the rows and cards inside it follow one another, 60ms apart, six at the most */
.mo .mo-wait .lrow,.mo .mo-wait .nb-c{opacity:0;transform:translateY(12px)}
.mo .mo-in .lrow,.mo .mo-in .nb-c{transition:opacity .4s var(--ease-in),transform .4s var(--ease-in);transition-delay:.12s}
.mo .mo-in .lrow:nth-child(2),.mo .mo-in .nb-c:nth-child(2){transition-delay:.18s}.mo .mo-in .lrow:nth-child(3),.mo .mo-in .nb-c:nth-child(3){transition-delay:.24s}
.mo .mo-in .lrow:nth-child(4),.mo .mo-in .nb-c:nth-child(4){transition-delay:.3s}.mo .mo-in .lrow:nth-child(5){transition-delay:.36s}.mo .mo-in .lrow:nth-child(n+6){transition-delay:.42s}
/* logos: each settles in, 40ms apart */
.mo .mo-wait .bl-c{opacity:0;transform:scale(.96)}
.mo .mo-in .bl-c{transition:opacity .3s var(--ease-in),transform .3s var(--ease-in);transition-delay:.12s}
.mo .mo-in .bl-c:nth-child(2){transition-delay:.16s}.mo .mo-in .bl-c:nth-child(3){transition-delay:.2s}.mo .mo-in .bl-c:nth-child(4){transition-delay:.24s}.mo .mo-in .bl-c:nth-child(5){transition-delay:.28s}.mo .mo-in .bl-c:nth-child(6){transition-delay:.32s}.mo .mo-in .bl-c:nth-child(n+7){transition-delay:.36s}
/* the head of a section: its line is drawn from the reading side, then its dot */
.mo .sec-head h2::before{transform-origin:right center;transition:transform .3s var(--ease-in)}
[dir=ltr] .mo .sec-head h2::before,[dir=ltr].mo .sec-head h2::before{transform-origin:left center}
.mo .sec-head h2::after{transition:transform .2s var(--ease-in) .25s}
.mo .sec-head.mo-wait h2::before{transform:scaleX(0)}
.mo .sec-head.mo-wait h2::after{transform:scale(0)}
/* a price that changes (window.SWAP): up and out, then in from below; the cell keeps its size */
[data-cv-price],[data-wifi-price],[data-bar-price],[data-alt-price],[data-price]{display:inline-block}
.ps-out{opacity:0;transform:translateY(-6px);transition:opacity .12s var(--ease-out),transform .12s var(--ease-out)}
.ps-pre{opacity:0;transform:translateY(6px)}
.ps-in{transition:opacity var(--t-fast) var(--ease-in),transform var(--t-fast) var(--ease-in)}
@media (prefers-reduced-motion:no-preference){
  /* the signal: a ring from the dot of «مباشر», 1.3s of every 6s */
  .cv-live i{position:relative}
  .cv-live i::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;color:var(--offer);opacity:0;animation:sig 6s var(--ease-in) infinite}
  /* what a visitor opens himself: its inside fades in */
  details[open]>.ms-b,details.card[open]>:not(summary),.sys[data-open="true"] .sys-b{animation:fold-in var(--t-fast) var(--ease-in)}
}
@keyframes sig{0%{transform:scale(1);opacity:.55}22%{transform:scale(2.4);opacity:0}100%{transform:scale(2.4);opacity:0}}
@keyframes fold-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.mo .mo-wait,.mo .mo-in,.mo .mo-wait *,.mo .mo-in *,.mo .sec-head h2::before,.mo .sec-head h2::after,.ps-out,.ps-pre,.ps-in{opacity:1!important;transform:none!important;transition:none!important}}


/* ── the hero keeps to one screen on a phone: the bar at the bottom is one line of name and one of price ── */
.oh-bar .t{min-width:0;font-size:var(--fs-small);line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oh-bar .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:899px){.vh.h3-on .vh-stage{height:clamp(250px,calc(100svh - 470px),400px)}}
.w2-mini{align-items:center}
.w2-mini-price .w2-price{align-items:baseline;gap:6px}

/* ── the one promise the brand repeats, under the packages: a soft mint label with the mint dot ── */
.promise{display:flex;align-items:center;gap:var(--space-2);width:fit-content;max-width:100%;margin:var(--space-4) 0 0;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);background:var(--mint-soft);color:var(--ink);font:500 var(--fs-body)/22px var(--font-heading)}
.promise::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--mint)}

/* ── 1.41.1 ── */
/* «KD» stands to the right of its number wherever a price stands alone: the pair reads left to right */
.tot-row b,.oh-amount,.offer-price .amt,.hs-price,.big-price{direction:ltr;unicode-bidi:isolate}
.tot-row b .cur,.oh-amount .cur{font-size:var(--fs-body);color:var(--ink-muted);margin-inline-start:4px}
/* caption: the one size under the secondary 15 — dates, badges, the small notes that must stay small */
.caption{font-size:var(--fs-small);line-height:20px}
/* the bilingual logo in the bar on a wide screen */
.topbar .brand picture{display:block}
@media (min-width:900px){.topbar .brand img{width:auto;height:48px}}
/* 1.68.0, the spec's wipe of a section's title: the title is uncovered from the reading side after its line and its dot are
   drawn. «clip-path» on the title itself — the one movement of the site that is neither transform nor opacity, by the
   manager's written leave, on the titles of sections alone; it changes no size and moves nothing. */
.mo .sec-head.mo-wait h2{clip-path:inset(-8px -8px -8px calc(100% - 46px))}
.mo .sec-head.mo-wait:lang(en) h2{clip-path:inset(-8px calc(100% - 46px) -8px -8px)}
.mo .sec-head.mo-in h2{clip-path:inset(-8px);transition:clip-path var(--t-slow) var(--ease-in) .3s}
@media (prefers-reduced-motion:reduce){.mo .sec-head h2{clip-path:none!important}}

/* ── 1.85.9, the designer's site-unify-v1 (ق6, approved by the manager): one family of buttons — the primary 48 tall (52 in
   the bar), the secondary 48, white with a light frame, a small one in a card 40; corners 16 (14 for the small); one line
   each. The «كل …» capsule links 32 on a phone and 38 on a wide screen. A bar's or a page's own rule that sets a height of
   its own still stands over these (it is more particular). ── */
.btn{min-height:48px;border-radius:16px;white-space:nowrap}
.btn-primary{background:var(--cta-bg);color:var(--cta-ink);font-weight:600}
.btn-ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px #D5DAE2}
.btn-sm{min-height:40px;border-radius:14px}
.sec-head a.all-go,a.all-go{min-height:32px;border-radius:999px;white-space:nowrap}
@media (min-width:900px){.sec-head a.all-go,a.all-go{min-height:38px}}

/* ── 1.85.10, the designer's site-unify-v1 (ق9, the manager: «طبّقها على الموقع كله»): one rhythm — 32 between two sections
   on a phone and 56 on a wide screen (half of it on each side of a section), 16 inside a card and 20 on a wide screen, cards'
   corners 20, the page's edge 16 on a phone, and its content no wider than 1200 on a wide screen. ── */
:root{--home-gap:32px}
.sec{padding-block:16px}
.card{padding:16px;border-radius:20px}
@media (max-width:350px){:root{--gutter:16px}}
@media (min-width:720px){.wrap{max-width:calc(1200px + 2 * var(--gutter))}}
@media (min-width:900px){
  :root{--home-gap:56px}
  .sec{padding-block:28px}
  .card{padding:20px}
}